注册功能的实现(四)

---

一 注册功能需求

注册功能相对于之前比较复杂

初步需要实现的功能如下

二 注册功能的实现

点击注册按钮前往注册界面

注册界面的controller

package com.wjiangquan.community.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * @author weijiangquan
 * @date 2022/10/3 -22:47
 * @Description
 */
@Controller
public class LoginController {
    @GetMapping("/register")
    public String getRegisterPage(){
        return "/site/register";
    }
}

本节要点

1. 页面的跳转

点击之后将进入到 controller中

2. 复用公共的模块(导航栏每个界面都是一样的,可以复用)

在 index.html界面中 添加如下 表明该标签下的全部内容可以复用

注册界面导航栏和首页相同,添加th:replace="index::header"表示复用index.html文件中th:fragment为header的模块

3. 注册功能的详细实现

• 点击页面的注册按钮时

通过th:href="@{/register}"找到controller中的 /register

@GetMapping("/register")
    public String getRegisterPage(){
        return "/site/register";
    }

• 接收到请求之后跳转到注册界面 /site/rigster

• 注册界面填写信息(代码一)之后使用post请求进入到contoller中/handleRegister(代码二)

代码一

<form class="mt-5" method="post"  th:action="@{/handleRegister}">
					<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':''}|" id="username" placeholder="请输入您的账号!" name="username" th:value="${username!=null?user.username:''}" required>
							<div class="invalid-feedback" th:text="${usernameMag}">
								该账号已存在!
							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':''}|" id="password" placeholder="请输入您的密码!" th:value="${user!=null?user.password:''}" name="password" 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" id="confirm-password" placeholder="请再次输入密码!" th:value="${user!=null?user.password:''}" 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 ${email!=null?'is-invalid':''}|" id="email" placeholder="请输入您的邮箱!" name="email" th:value="${user!=null?user.email:''}" 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>				

代码二,用于处理注册请求

    /**
     * 处理注册
     * @param model
     * @param user 用户的信息
     * @return 返回对应的页面
     */
    @PostMapping("/handleRegister")
    public String handleRegister(Model model,User user){
        Map<String, Object> map = userService.register(user);
        if(map == null || map.isEmpty()){
            model.addAttribute("mag","注册成功,我们已经向你的邮箱发送了一封激活邮件,请快点激活");
            model.addAttribute("target","/index");
            return "/site/operate-result";
        }else {
            model.addAttribute("username",map.get("usernameMsg"));
            model.addAttribute("password",map.get("passwordMsg"));
            model.addAttribute("email",map.get("emailMsg"));
            return "/site/register";
        }
    }

代码二调用业务层的代码 进行注册判断和发送邮件进行验证

  @Override
    public Map<String, Object> register(User user) {
        Map<String, Object> map = new HashMap<>();
        //1.判断是否为空
        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;
        }
        //2.判断账号是否注册
        User checkedUser = userMapper.getUserByName(user.getUsername());
        if (checkedUser != null) {
            map.put("usernameMag", "账号已存在");
            return map;
        }
        // 验证邮箱
        User userByEmail = userMapper.getUserByEmail(user.getEmail());
        if (userByEmail != null) {
            map.put("usernameError", "邮箱已经被注册");
            return map;
        }

        //3.注册用户
        //用户密码加密和设计激活码
        // 生成随机的盐值
        String salt = CommunityUtil.generateUUID().substring(0, 5);
        String password = CommunityUtil.MD5(user.getPassword()+salt);
        user.setPassword(password);
        user.setSalt(salt);
        user.setType(0);
        user.setStatus(0);
        user.setCreateTime(new Date());
        // 激活码
        String activationCode = CommunityUtil.generateUUID();
        // 生成一个随机的头像
        user.setHeaderUrl(String.format("http://images.nowcoder.com/head/%dt.png",new Random().nextInt(1000)));
        user.setActivationCode(activationCode);
        userMapper.insertUser(user);

        //4.发送激活邮件
        //点击的邮件的链接
        //http://www.localhost:8081/community/activation/用户的id/用户激活码
        String url = path + classPath + "/activation/" + user.getId() + "/" + user.getActivationCode();
        Context context = new Context();

        context.setVariable("email", user.getEmail());
        context.setVariable("url", url);
        String content = templateEngine.process("/mail/activation.html", context);
        mailClient.sendMail(user.getEmail(), "激活邮件", content);

        return null;  //注册成功返回空
    }

激活邮件 activation.html

doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    <title>牛客网-激活账号title>
head>
<body>
	<div>
		<p>
			<b th:text="${email}">[email protected]b>, 您好!
		p>
		<p>
			您正在注册牛客网, 这是一封激活邮件, 请点击 
			<a th:href="${url}">http://www.nowcoder.com/activation/abcdefg123456.htmla>,
			激活您的牛客账号!
		p>
	div>
body>
html>

• 用户点击点击激活邮件通过链接访问http://localhsot:8081/community/aactivation/{用户id}/{激活码} 进行验证之后会进入到 contoller层中的请求中的方法,该方法将对用户的操作进行判断。

  @GetMapping("/activation/{userId}/{activationCode}")
    public String handleActivation(@PathVariable("userId") int userId,@PathVariable("activationCode") String activationCode,Model model){
        int result = userService.activation(userId, activationCode);
        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";
    }

调用的业务层

  /**
     * 处理激活
     * @param userId 用户id
     * @param code 激活码
     * @return 激活状态
     */
    @Override
    public int activation(int userId,String code){
        User userById = userMapper.getUserById(userId);
        int status = userById.getStatus();
        if(status==1){
            return ACTIVATION_REPEAT;
        }else if(userById.getActivationCode().equals(code)){
            userMapper.updateUserByStatus(userId,1);
            return ACTIVATION_SUCCESS;
        }else {
            return ACTIVATION_FAILURE;
        }
    }

将激活码状态进行封装,封装成常量,方便进行统一的管理

package com.wjiangquan.community.util;

/**
 * @author weijiangquan
 * @date 2022/10/4 -14:53
 * @Description
 */
public interface CommunityConstant {
    /**
     * 激活成功
     */
    int ACTIVATION_SUCCESS = 0;

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

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