Part 5 - 完成用户登录功能

【版本】

当前版本号v20211108

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

【实验目的】

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

【实验环境】

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

【实验资源】

下载地址：

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

【实验要求】

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

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

• 请求 JSON 格式数据示例代码：

{
  "username": "zhangsan",
  "password": "123456",
  "captcha": "cLAK"
}

3. 登录校验要求。

• 如果验证码不正确，需要返回消息提示验证码不正确。
• 用户名或密码为空，需要返回消息提示用户名密码均不能为空。
• 用户名如果不存在，需要返回消息提示用户名不存在。
• 用户密码不正确，需要返回消息提示用户名或密码不正确。
• 只有用户是激活状态下（tab_user.status=‘Y’)，才允许登录，否则提示用户名不存在。
• 如果用户角色是member，登录成功跳转到http://localhost:8082/mine
• 如果用户角色是admin，登录成功跳转到http://localhost:8082/dashboard

4. 完成功能以后，请在课程设计报告记录你修改的部分的代码和你测试该功能的步骤。

【实验提示】

1. 用户如果成功登录，需要写入以下信息到Session。

2. 以下为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;
 }

3. 以下为前端 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("请求异常");
  }
});