问答平台（2），注册功能

访问注册页面

1
- 点击顶部区域内的链接，打开注册页面。

提交注册数据

1
2
3
- 通过表单提交数据；
- 服务端验证账号是否已经存在，邮箱是否已经注册；
- 服务端发送激活邮件。

激活注册账号

1
- 点击邮件中的链接，访问服务端的激活服务。

工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// CommunityUtil.java
public class CommunityUtil {

    //  生成随机字符串
    public static String generateUUID() {
        return UUID.randomUUID().toString().replaceAll("-", "");
    }

    // MD5加密
    // hello -> 5d41402abc4b2a76b9719d911017c592
    // hello + salt -> xxx
    public static String md5(String key) {
        if(StringUtils.isBlank(key)) {
            return null;
        }
        return DigestUtils.md5DigestAsHex(key.getBytes());
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// CommunityConstant.java
public interface  CommunityConstant {

    /**
     * 激活成功
     */
    int ACTIVATION_SUCCESS = 0;

    /**
     * 重复激活
     */
    int ACTIVATION_REPEAT = 1;

    /**
     * 激活失败
     */
    int ACTIVATION_FAILURE = 2;
}

业务层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// UserService.java
public User findUserById(int id) {
    return userMapper.selectById(id);
}

public Map<String, Object> register(User user) {
    Map<String, Object> map = new HashMap<>();

    // 空值处理
    if(user == null) {
        throw new IllegalArgumentException("参数不能为空!");
    }
    if(StringUtils.isBlank(user.getUsername())) {
        map.put("usernameMsg", "账号不能为空!");
        return map;
    }
    if(StringUtils.isBlank(user.getPassword())) {
        map.put("passwordMsg", "密码不能为空!");
        return map;
    }
    if(StringUtils.isBlank(user.getEmail())) {
        map.put("emailMsg", "邮箱不能为空!");
        return map;
    }

    // 验证账号
    User u = userMapper.selectByName(user.getUsername());
    if(u != null) {
        map.put("usernameMsg", "该账号已存在!");
        return map;
    }

    // 验证邮箱
    u = userMapper.selectByEmail(user.getEmail());
    if(u != null) {
        map.put("emailMsg", "该邮箱已被注册!");
        return map;
    }

    // 注册用户
    user.setSalt(CommunityUtil.generateUUID().substring(0, 5));
    user.setPassword(CommunityUtil.md5(user.getPassword() + user.getSalt()));
    user.setType(0);
    user.setStatus(0);
    user.setActivationCode(CommunityUtil.generateUUID());
    user.setHeaderUrl(String.format("http://images.nowcoder.com/head/%dt.png", new Random().nextInt(1001)));
    user.setCreateTime(new Date());
    userMapper.insertUser(user);

    // 激活邮件
    Context context = new Context();
    context.setVariable("email", user.getEmail());
    // http://localhost:8080/community/activation/101/code
    String url = domain + contextPath + "/activation/" + user.getId() + "/" + user.getActivationCode();
    context.setVariable("url", url);
    String content = templateEngine.process("/mail/activation", context);
    mailClient.sendMail(user.getEmail(), "激活账号", content);

    return map;
}

public int activation(int userId, String code) {
    User user = userMapper.selectById(userId);
    if(user.getStatus() == 1) {
        return ACTIVATION_REPEAT;
    } else if(user.getActivationCode().equals(code)) {
        userMapper.updateStatus(userId, 1);
        clearCache(userId);
        return ACTIVATION_SUCCESS;
    } else {
        return ACTIVATION_FAILURE;
    }
}

表现层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// LoginController.java
@RequestMapping(path = "/register", method = RequestMethod.GET)
public String getRegisterPage() {
    return "/site/register";
}

@RequestMapping(path = "/login", method = RequestMethod.GET)
public String getLoginPage() {
    return "/site/login";
}

@RequestMapping(path = "/register", method = RequestMethod.POST)
public String register(Model model, User user) {
    Map<String, Object> map = userService.register(user);
    if(map == null || map.isEmpty()) {
        model.addAttribute("msg", "注册成功，我们已经向您的邮箱发送了一封激活邮件，请尽快激活！");
        model.addAttribute("target", "/index");
        return "/site/operate-result";
    } else {
        model.addAttribute("usernameMsg", map.get("usernameMsg"));
        model.addAttribute("passwordMsg", map.get("passwordMsg"));
        model.addAttribute("emailMsg", map.get("emailMsg"));
        return "/site/register";
    }
}

// http://localhost:8080/community/activation/101/code
@RequestMapping(path = "/activation/{userId}/{code}", method = RequestMethod.GET)
public String activation(Model model, @PathVariable("userId") int userId, @PathVariable("code") String code) {
    int result = userService.activation(userId, code);
    if (result == ACTIVATION_SUCCESS) {
        model.addAttribute("msg", "激活成功，您的账号已经可以正常使用了！");
        model.addAttribute("target", "/login");
    } else if (result == ACTIVATION_REPEAT) {
        model.addAttribute("msg", "无效操作，该账号已经激活过了！");
        model.addAttribute("target", "/index");
    } else {
        model.addAttribute("msg", "激活失败，您提供的激活码不正确！");
        model.addAttribute("target", "/index");
    }
    return "/site/operate-result";
}

页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- operate-result.html -->
<!-- 内容 -->
<div class="main">
    <div class="container mt-5">
        <div class="jumbotron">
            <p class="lead" th:text="${msg}">您的账号已经激活成功,可以正常使用了!</p>
            <hr class="my-4">
            <p>
                系统会在 <span id="seconds" class="text-danger">8</span> 秒后自动跳转,
                您也可以点此 <a id="target" th:href="@{${target}}" class="text-primary">链接</a>, 手动跳转!
            </p>
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!-- register.html -->
<!-- 头部 -->
<li class="nav-item ml-3 btn-group-vertical" th:if="${loginUser==null}">
    <a class="nav-link" th:href="@{/register}">注册</a>
</li>
<!-- 内容 -->
<div class="main">
    <div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
        <h3 class="text-center text-info border-bottom pb-3">注&nbsp;&nbsp;册</h3>
        <form class="mt-5" method="post" th:action="@{/register}">
            <div class="form-group row">
                <label for="username" class="col-sm-2 col-form-label text-right">账号:</label>
                <div class="col-sm-10">
                    <input type="text"
                            th:class="|form-control ${usernameMsg!=null?'is-invalid':''}|"
                            th:value="${user!=null?user.username:''}"
                            id="username" name="username" placeholder="请输入您的账号!" required>
                    <div class="invalid-feedback" th:text="${usernameMsg}">
                        该账号已存在!
                    </div>
                </div>
            </div>
            <div class="form-group row mt-4">
                <label for="password" class="col-sm-2 col-form-label text-right">密码:</label>
                <div class="col-sm-10">
                    <input type="password"
                            th:class="|form-control ${passwordMsg!=null?'is-invalid':''}|"
                            th:value="${user!=null?user.password:''}"
                            id="password" name="password" placeholder="请输入您的密码!" required>
                    <div class="invalid-feedback" th:text="${passwordMsg}">
                        密码长度不能小于8位!
                    </div>
                </div>
            </div>
            <div class="form-group row mt-4">
                <label for="confirm-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control"
                            th:value="${user!=null?user.password:''}"
                            id="confirm-password" placeholder="请再次输入密码!" required>
                    <div class="invalid-feedback">
                        两次输入的密码不一致!
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="email" class="col-sm-2 col-form-label text-right">邮箱:</label>
                <div class="col-sm-10">
                    <input type="email"
                            th:class="|form-control ${emailMsg!=null?'is-invalid':''}|"
                            th:value="${user!=null?user.email:''}"
                            id="email" name="email" placeholder="请输入您的邮箱!" required>
                    <div class="invalid-feedback" th:text="${emailMsg}">
                        该邮箱已注册!
                    </div>
                </div>
            </div>
            <div class="form-group row mt-4">
                <div class="col-sm-2"></div>
                <div class="col-sm-10 text-center">
                    <button type="submit" class="btn btn-info text-white form-control">立即注册</button>
                </div>
            </div>
        </form>
    </div>
</div>
1
2
<!-- login.html -->
<!-- 内容 -->
#问答平台
问答平台（2），注册功能
https://lcf163.github.io/2020/04/22/问答平台（2），注册功能/
作者
乘风的小站
发布于
2020年4月22日
许可协议