一 注册功能需求
注册功能相对于之前比较复杂
初步需要实现的功能如下
二 注册功能的实现
点击注册按钮前往注册界面
注册界面的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";
}
}
本节要点
- 页面的跳转
点击之后将进入到 controller中
- 复用公共的模块(导航栏每个界面都是一样的,可以复用)
在 index.html界面中 添加如下 表明该标签下的全部内容可以复用
注册界面导航栏和首页相同,添加th:replace="index::header"表示复用index.html文件中th:fragment为header的模块
- 注册功能的详细实现
- 点击页面的注册按钮时
通过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}">xxx@xxx.com</b>, 您好!
</p>
<p>
您正在注册牛客网, 这是一封激活邮件, 请点击
<a th:href="${url}">http://www.nowcoder.com/activation/abcdefg123456.html</a>,
激活您的牛客账号!
</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;
}
808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
