Part 3 - 完成用户注册功能

【版本】

当前版本号v20211109

【实验名称】实验3.1 完成用户注册功能

【实验目的】

• 掌握 AJAX 请求前后端开发技巧
• 掌握注册功能开发

【实验环境】

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

【实验资源】

下载地址：

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

【实验要求】

1. 完成旅游网站的注册功能。用户访问http://localhost:8082/register.html，输入用户名、密码、Email、姓名、手机号、性别、出生日期和验证码可以实现注册。

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

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

{
	"username": "zhangsan",
  "password": "123456",
  "email": "zhangsan@qq.com",
  "name": "张三",
  "telephone": "13512345678",
  "birthday": "1988-8-8",
  "sex": "男",
  "code": "ABCD"
}

3. 注册前端校验要求

• 用户名不为空，限制5-20位。参考 register.html 页面的Javascript函数 checkUsername()。
• 密码不为空，限制6-20位。参考 register.html 页面的Javascript函数 checkPassword()。
• 邮箱需要符合格式，参考 register.html 的页面的Javascript函数 checkEmail()。
• 姓名、手机号、出生日期、验证码、性别都不能为空。参考 register.html 的页面的Javascript函数 isNotBlankField()。

4. 注册后端代码要求

• 用户注册表所有输入框内容均不能为空。
• 用户邮箱或用户名均不能和存在数据表tab_user的username和email列。
• 如果校验成功，用户输入的内容需要保存到tab_user。
• 注册成功的用户是未激活状态（tab_user.status=‘N’)，并且生成一个20位的随机字符串保存在tab_user.code（提示：参考方法 org.apache.commons.lang3.RandomStringUtils.random()）。
• 注册成功的用户，写入一个激活链接到控制台，示例如下，其中username是用户名，code是激活码。

http://localhost:8082/activation?username=zhangsan&code=jtoi2j34o8tjr3oir3

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

【实验提示】

1. 以下为LoginController.signup方法实现注册的伪代码:

@RequestMapping(value = "/signup")
  @ResponseBody
  public ResMsg signup(@RequestBody User ue){
    ResMsg resmsg=new ResMsg();
    String captcha=(String)session.getAttribute(Const.SESSION_KEY_CAPTCHA);
    if(captcha==null || !captcha.equalsIgnoreCase(ue.getCode())){
      resmsg.setErrcode("4");
      resmsg.setErrmsg("验证码不正确");
      return resmsg;
    }
    if (用户所有内容均不为空) {
      if (用户名和邮箱都不存在数据表) {
        ue.setStatus(Const.USER_STATUS_INACTIVE);
        ue.setCode(RandomStringUtils.random(20,Const.CHARSET_ALPHA));
        ue.setRole(Const.USER_ROLE_MEMBER);//注册默认都是会员角色
        if (保存用户信息) {
          resmsg.setErrcode("0");
          resmsg.setErrmsg("注册成功");
          logger.info("激活链接 -> "+String.format("http://localhost:8082/activation?username=%s&code=%s",ue.getUsername(),ue.getCode()));
        } else {
          resmsg.setErrcode("1");
          resmsg.setErrmsg("注册失败");
        }
      } else {
        resmsg.setErrcode("2");
        resmsg.setErrmsg("用户名或Email已存在");
      }
    } else {
      resmsg.setErrcode("3");
      resmsg.setErrmsg("注册表格输入框均不能为空");
    }
    return resmsg;
  }

2. 以下为前端AJAX 请求Javascript 参考伪代码：

$.ajax({
    url: "http://localhost:8082/signup",
    contentType: "application/json",
    type: "post",
    data: JSON.stringify({
    	"username": username,
    	"password": password,
    	"email": email,
    	"name": name,
    	"telephone": telephone,
    	"birthday": birthday,
    	"sex": sex,
    	"code": code
    }),
    dataType: "json",
    success: function(result) {
    	//成功调用，请补充代码
    },
    error: function() {
    	showMsg("请求异常");
    }
});