目录

Part 5 - 完成用户登录功能

2021-11-08
3分钟阅读时长
webtraining

【版本】

当前版本号v20211108

版本修改说明
v20211115修正代码格式
v20211108初始化版本

【实验名称】 实验5.1 完成用户登录功能

【实验目的】

  • 掌握用户登录功能
  • 掌握 AJAX 请求前后端开发技巧

【实验环境】

  • 内存：至少4G
  • 硬盘：至少空余10G
  • 操作系统: 64位 Windows系统。

【实验资源】

下载地址：

链接：https://pan.baidu.com/s/1lwTbxGGCKKzC7TPXSgeVzQ 
提取码：heis

【实验要求】

  1. 完成旅游网站的登录功能。用户访问http://localhost:8082/login.html，输入用户名、密码和验证码可以实现登录。

  2. 前端采用 AJAX 的方式请求登录，API 说明如下

项描述
登录请求APIhttp://localhost:8082/signin
AJAX请求数据格式JSON
  • 请求 JSON 格式数据示例代码：
{
  "username": "zhangsan",
  "password": "123456",
  "captcha": "cLAK"
}
  1. 登录校验要求。
  • 如果验证码不正确，需要返回消息提示验证码不正确。
  • 用户名或密码为空，需要返回消息提示用户名密码均不能为空。
  • 用户名如果不存在，需要返回消息提示用户名不存在。
  • 用户密码不正确，需要返回消息提示用户名或密码不正确。
  • 只有用户是激活状态下（tab_user.status=‘Y’)，才允许登录，否则提示用户名不存在。
  • 如果用户角色是member，登录成功跳转到http://localhost:8082/mine
  • 如果用户角色是admin，登录成功跳转到http://localhost:8082/dashboard
  1. 完成功能以后，请在课程设计报告记录你修改的部分的代码和你测试该功能的步骤。

【实验提示】

  1. 用户如果成功登录，需要写入以下信息到Session。
键值
Const.SESSION_KEY_USER用户实体对象
Const.SESSION_KEY_USERNAME用户名
Const.SESSION_KEY_USER_ROLE用户角色
  1. 以下为LoginController.signIn方法登录伪代码:
@RequestMapping(value = "/signin")
 @ResponseBody
 public ResMsg signIn(@RequestBody LoginVo vo) {
   ResMsg resMsg = new ResMsg();
   String captcha=(String)session.getAttribute(Const.SESSION_KEY_CAPTCHA);
   if(captcha==null || !captcha.equalsIgnoreCase(vo.getCaptcha())){
     resMsg.setErrcode("4");
     resMsg.setErrmsg("验证码不正确");
     return resMsg;
   }
   if (用户名和密码不为空) {
     User dbuser = 按用户名从数据库查询出用户对象
     if (dbuser不为空) {
       if (密码不正确) {
         resMsg.setErrcode("0");
         resMsg.setErrmsg("登录成功");
         if (Const.USER_ROLE_ADMIN.equals(dbuser.getRole())) {
           resMsg.setResult(new RedirectVo("/dashboard"));
         } else if (Const.USER_ROLE_MEMBER.equals(dbuser.getRole())) {
           resMsg.setResult(new RedirectVo("/mine"));
         }
         //写入以下信息到Session;
       } else {
         resMsg.setErrcode("1");
         resMsg.setErrmsg("用户名或密码不正确");
       }
     } else {
       resMsg.setErrcode("3");
       resMsg.setErrmsg("用户不存在");
     }
   } else {
     resMsg.setErrcode("2");
     resMsg.setErrmsg("用户名密码均不能为空");
   }
   return resMsg;
 }
  1. 以下为前端 AJAX 请求 Javascript 参考伪代码：
$.ajax({
  url: "http://localhost:8082/signin",
  contentType: "application/json",
  type: "post",
  data: JSON.stringify({
  	"username": username,
  	"password": password,
  	"captcha": captcha
  }),
  dataType: "json",
  success: function(result) {
  	//成功调用，请补充代码
  },
  error: function() {
  	showMsg("请求异常");
  }
});
#web
Avatar
黄老师