【项目】仿牛客网社区开发第2章 Spring Boot 实践开发社区登录模块 2 开发注册功能

布满荆棘的人生 2024-03-22 10:46 12阅读 0赞

### 【项目】仿牛客网社区开发 ###

#### 文章目录 ####

*   *  【项目】仿牛客网社区开发
     *   *  第2章 Spring Boot 实践 开发社区登录模块
         *   *  2 开发注册功能

![在这里插入图片描述][5b0a0c588feb449eb298b43577ef94cc.png_pic_center]

#### 第2章 Spring Boot 实践 开发社区登录模块 ####

##### 2 开发注册功能 #####

![在这里插入图片描述][29da8b7cee8f4d62945bc81c21a6f366.png_pic_center]

*  访问注册页面
    
     *  点击顶部区域内的链接，打开注册页面。
 *  提交注册数据 - 通过表单提交数据。
    
     *  服务端验证账号是否已存在、邮箱是否已注册。
     *  服务端发送激活邮件。
 *  激活注册账号
    
     *  点击邮件中的链接，访问服务端的激活服务。

新的控制器

package com.nowcoder.community.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    
    /**
     * @Projectname: community
     * @Classname: LoginController
     * @Author: Ding Jiaxiong
     * @Date:2023/4/17 19:19
     */
    
    @Controller
    public class LoginController {
        
    
        @RequestMapping(path = "/register", method = RequestMethod.GET)
        public String getRegisterPage() {
        
            return "/site/register";
        }
    
    }

修改模板

修改首页的顶部跳转

![在这里插入图片描述][480568223e8044aab71ca9cbc034308f.png_pic_center]

当然顶部可以进行一个复用

![在这里插入图片描述][813552e6fec94fc18b41b209910f8123.png_pic_center]

![在这里插入图片描述][ec721ac91b19466f8cb1eb65f296c8b2.png_pic_center]

OK，现在启动一下项目，点击“注册”按钮

![在这里插入图片描述][892bbdcb69754efab073a1247c005d08.png_pic_center]

过来了

这就是访问注册页面的实现，下面就是提交注册数据

这里用到一个 包，`common lang`

![在这里插入图片描述][2251475bcd714d4ab6bcdf434054bca8.png_pic_center]

这个，复制坐标

![在这里插入图片描述][dc590f2a558d40369e479cf9bda5d88d.png_pic_center]

修改配置文件

![在这里插入图片描述][8275c53eb948409287f1df8bd28b1b32.png_pic_center]

再来个工具类

package com.nowcoder.community.util;
    
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.util.DigestUtils;
    
    import java.util.UUID;
    
    /**
     * @Projectname: community
     * @Classname: CommunityUtil
     * @Author: Ding Jiaxiong
     * @Date:2023/4/17 19:34
     */
    
    public class CommunityUtil {
        
    
        // 生成随机字符串
        public static String generateUUID() {
        
            return UUID.randomUUID().toString().replaceAll("-", "");
        }
    
        // MD5 加密
        // 只能加密不能解密
        // 加盐的目的是防止密码被破解
        public static String md5(String key) {
        
            if (StringUtils.isBlank(key)) {
        
                return null;
            }
    
            return DigestUtils.md5DigestAsHex(key.getBytes());
        }
    
    }

修改用户业务层类

package com.nowcoder.community.service;
    
    import com.nowcoder.community.dao.UserMapper;
    import com.nowcoder.community.entity.User;
    import com.nowcoder.community.util.CommunityUtil;
    import com.nowcoder.community.util.MailClient;
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Service;
    import org.thymeleaf.TemplateEngine;
    import org.thymeleaf.context.Context;
    
    import java.util.Date;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.Random;
    
    /**
     * @Projectname: community
     * @Classname: UserService
     * @Author: Ding Jiaxiong
     * @Date:2023/4/17 15:11
     */
    
    @Service
    public class UserService {
        
    
        @Autowired
        private UserMapper userMapper;
    
        @Autowired
        private MailClient mailClient;
    
        @Autowired
        private TemplateEngine templateEngine;
    
        @Value("${community.path.domain}")
        private String domain;
    
        @Value("${server.servlet.context-path}")
        private String contextPath;
    
        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(1000)));
            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;
        }
    
    }

改造激活邮件的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}">此链接</a>,
            激活您的牛客账号!
        </p>
    </div>
    </body>
    </html>

继续修改控制器

@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";
            }
        }

![在这里插入图片描述][9a75e03ceb4142b7960ac6a2454292c8.png_pic_center]

修改操作结果模板页面

<!doctype html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              crossorigin="anonymous">
        <link rel="stylesheet" th:href="@{/css/global.css}"/>
        <title>牛客网-操作结果</title>
    </head>
    <body class="bg-white">
    <div class="nk-container">
        
        <header class="bg-dark sticky-top" th:replace="index::header">
            <div class="container">
                
                <nav class="navbar navbar-expand-lg navbar-dark">
                    
                    <a class="navbar-brand" href="#"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="../index.html">首页</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link position-relative" href="letter.html">消息<span
                                        class="badge badge-danger">12</span></a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="register.html">注册</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="login.html">登录</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle"
                                         style="width:30px;"/>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item text-center" href="profile.html">个人主页</a>
                                    <a class="dropdown-item text-center" href="setting.html">账号设置</a>
                                    <a class="dropdown-item text-center" href="login.html">退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <span class="dropdown-item text-center text-secondary">nowcoder</span>
                                </div>
                            </li>
                        </ul>
                        
                        <form class="form-inline my-2 my-lg-0" action="search.html">
                            <input class="form-control mr-sm-2" type="search" aria-label="Search"/>
                            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
                        </form>
                    </div>
                </nav>
            </div>
        </header>
    
        
        <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>
    
        
        <footer class="bg-dark">
            <div class="container">
                <div class="row">
                    
                    <div class="col-4 qrcode">
                        <img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail"
                             style="width:136px;"/>
                    </div>
                    
                    <div class="col-8 detail-info">
                        <div class="row">
                            <div class="col">
                                <ul class="nav">
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">关于我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">加入我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">意见反馈</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">企业服务</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">联系我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">免责声明</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">友情链接</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <ul class="nav btn-group-vertical company-info">
                                    <li class="nav-item text-white-50">
                                        公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
                                    </li>
                                    <li class="nav-item text-white-50">
                                        联系方式：010-60728802(电话)    admin@nowcoder.com
                                    </li>
                                    <li class="nav-item text-white-50">
                                        牛客科技©2018 All rights reserved
                                    </li>
                                    <li class="nav-item text-white-50">
                                        京ICP备14055008号-4     
                                        <img src="http://static.nowcoder.com/company/images/res/ghs.png"
                                             style="width:18px;"/>
                                        京公网安备 11010502036488号
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script>
        $(function () {
          
            setInterval(function () {
          
                var seconds = $("#seconds").text();
                $("#seconds").text(--seconds);
                if (seconds == 0) {
          
                    location.href = $("#target").attr("href");
                }
            }, 1000);
        });
    </script>
    </body>
    </html>

修改注册页面模板

<!doctype html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              crossorigin="anonymous">
        <link rel="stylesheet" th:href="@{/css/global.css}"/>
        <link rel="stylesheet" th:href="@{/css/login.css}"/>
        <title>牛客网-注册</title>
    </head>
    <body>
    <div class="nk-container">
        
        <header class="bg-dark sticky-top" th:replace="index::header">
            <div class="container">
                
                <nav class="navbar navbar-expand-lg navbar-dark">
                    
                    <a class="navbar-brand" href="#"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="../index.html">首页</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link position-relative" href="letter.html">消息<span
                                        class="badge badge-danger">12</span></a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="register.html">注册</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="login.html">登录</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle"
                                         style="width:30px;"/>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item text-center" href="profile.html">个人主页</a>
                                    <a class="dropdown-item text-center" href="setting.html">账号设置</a>
                                    <a class="dropdown-item text-center" href="login.html">退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <span class="dropdown-item text-center text-secondary">nowcoder</span>
                                </div>
                            </li>
                        </ul>
                        
                        <form class="form-inline my-2 my-lg-0" action="search.html">
                            <input class="form-control mr-sm-2" type="search" aria-label="Search"/>
                            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
                        </form>
                    </div>
                </nav>
            </div>
        </header>
    
        
        <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">注  册</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>
    
        
        <footer class="bg-dark">
            <div class="container">
                <div class="row">
                    
                    <div class="col-4 qrcode">
                        <img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail"
                             style="width:136px;"/>
                    </div>
                    
                    <div class="col-8 detail-info">
                        <div class="row">
                            <div class="col">
                                <ul class="nav">
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">关于我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">加入我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">意见反馈</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">企业服务</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">联系我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">免责声明</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">友情链接</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <ul class="nav btn-group-vertical company-info">
                                    <li class="nav-item text-white-50">
                                        公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
                                    </li>
                                    <li class="nav-item text-white-50">
                                        联系方式：010-60728802(电话)    admin@nowcoder.com
                                    </li>
                                    <li class="nav-item text-white-50">
                                        牛客科技©2018 All rights reserved
                                    </li>
                                    <li class="nav-item text-white-50">
                                        京ICP备14055008号-4     
                                        <img src="http://static.nowcoder.com/company/images/res/ghs.png"
                                             style="width:18px;"/>
                                        京公网安备 11010502036488号
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script th:src="@{/js/global.js}"></script>
    <script th:src="@{/js/register.js}"></script>
    </body>
    </html>

OK，到这里注册的逻辑就算完了，就是还没做激活逻辑，先运行测试一下

![在这里插入图片描述][a649e77fd02143018a90e5ac47fa7047.png_pic_center]

用户名已经存在

![在这里插入图片描述][ec732cd0ec7f46dca6b5f78a3ea59609.png_pic_center]

邮箱已经用于注册。

来个正确的

![在这里插入图片描述][31f05f552ea147479177622966adb939.png_pic_center]

![在这里插入图片描述][964952a432f449e58b7b0780f5bde2ec.png_pic_center]

![在这里插入图片描述][baae6919f60a44038827395d9e01f5f0.png_pic_center]

邮件也收到了【下一步就是处理这个链接的激活逻辑 了】

![在这里插入图片描述][8f77471fa1f04f178282346e68fb64af.png_pic_center]

可以看到数据库里面，用户已经有了 ，就是还没激活

【激活注册账号】

先来一个激活状态常量

package com.nowcoder.community.util;
    
    /**
     * @Projectname: community
     * @Classname: CommunityConstant
     * @Author: Ding Jiaxiong
     * @Date:2023/4/17 20:15
     */
    
    public interface CommunityConstant {
        
    
        /**
         * 激活成功
         */
        int ACTIVATION_SUCCESS = 0;
    
        /**
         * 重复激活
         */
        int ACTIVATION_REPEAT = 1;
    
        /**
         * 激活失败
         */
        int ACTIVATION_FAILURE = 2;
    
    }

![在这里插入图片描述][c1ae68ccf85b412883e421098e6b6f5e.png_pic_center]

让业务层的类，实现这个接口

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);
                return ACTIVATION_SUCCESS;
            } else {
        
                return ACTIVATION_FAILURE;
            }
        }

这就是激活的业务层方法

![在这里插入图片描述][5c70bad213304849bba80d99173c1915.png_pic_center]

下面修改控制器

![在这里插入图片描述][ff7e899abf4340ffae678dd3ee781bc9.png_pic_center]

让控制器同样实现这个接口，

然后编写处理请求的方法

// 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";
        }

![在这里插入图片描述][ac359e1a5ba04d38ad9c438b2f7343c0.png_pic_center]

声明登录页面

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

![在这里插入图片描述][67cc07f70c374e0f9909252e09cfc9dd.png_pic_center]

修改登录页面模板

<!doctype html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              crossorigin="anonymous">
        <link rel="stylesheet" th:href="@{/css/global.css}"/>
        <link rel="stylesheet" th:href="@{/css/login.css}"/>
        <title>牛客网-登录</title>
    </head>
    <body>
    <div class="nk-container">
        
        <header class="bg-dark sticky-top" th:replace="index::header">
            <div class="container">
                
                <nav class="navbar navbar-expand-lg navbar-dark">
                    
                    <a class="navbar-brand" href="#"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="../index.html">首页</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link position-relative" href="letter.html">消息<span
                                        class="badge badge-danger">12</span></a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="register.html">注册</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="login.html">登录</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle"
                                         style="width:30px;"/>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item text-center" href="profile.html">个人主页</a>
                                    <a class="dropdown-item text-center" href="setting.html">账号设置</a>
                                    <a class="dropdown-item text-center" href="login.html">退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <span class="dropdown-item text-center text-secondary">nowcoder</span>
                                </div>
                            </li>
                        </ul>
                        
                        <form class="form-inline my-2 my-lg-0" action="search.html">
                            <input class="form-control mr-sm-2" type="search" aria-label="Search"/>
                            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
                        </form>
                    </div>
                </nav>
            </div>
        </header>
    
        
        <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">登  录</h3>
                <form class="mt-5">
                    <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" class="form-control is-invalid" id="username" placeholder="请输入您的账号!"
                                   required>
                            <div class="invalid-feedback">
                                该账号不存在!
                            </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" class="form-control is-invalid" id="password"
                                   placeholder="请输入您的密码!" required>
                            <div class="invalid-feedback">
                                密码长度不能小于8位!
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mt-4">
                        <label for="verifycode" class="col-sm-2 col-form-label text-right">验证码:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control is-invalid" id="verifycode" placeholder="请输入验证码!">
                            <div class="invalid-feedback">
                                验证码不正确!
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <img th:src="@{/img/captcha.png}" style="width:100px;height:40px;" class="mr-2"/>
                            <a href="javascript:;" class="font-size-12 align-bottom">刷新验证码</a>
                        </div>
                    </div>
                    <div class="form-group row mt-4">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-10">
                            <input type="checkbox" id="remember-me" checked="checked">
                            <label class="form-check-label" for="remember-me">记住我</label>
                            <a href="forget.html" class="text-danger float-right">忘记密码?</a>
                        </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>
    
        
        <footer class="bg-dark">
            <div class="container">
                <div class="row">
                    
                    <div class="col-4 qrcode">
                        <img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail"
                             style="width:136px;"/>
                    </div>
                    
                    <div class="col-8 detail-info">
                        <div class="row">
                            <div class="col">
                                <ul class="nav">
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">关于我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">加入我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">意见反馈</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">企业服务</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">联系我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">免责声明</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">友情链接</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <ul class="nav btn-group-vertical company-info">
                                    <li class="nav-item text-white-50">
                                        公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
                                    </li>
                                    <li class="nav-item text-white-50">
                                        联系方式：010-60728802(电话)    admin@nowcoder.com
                                    </li>
                                    <li class="nav-item text-white-50">
                                        牛客科技©2018 All rights reserved
                                    </li>
                                    <li class="nav-item text-white-50">
                                        京ICP备14055008号-4     
                                        <img src="http://static.nowcoder.com/company/images/res/ghs.png"
                                             style="width:18px;"/>
                                        京公网安备 11010502036488号
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script th:src="@{/js/global.js}"></script>
    </body>
    </html>

当然逻辑可以先不管，那是我们后面要做的登录功能，现在只要可以正常跳转过来就OK了

同样的，记得改首页

![在这里插入图片描述][31b32136d9de490386cc50ae2c4e0b98.png_pic_center]

OK， 重启服务器，测试一下

![在这里插入图片描述][8c04ec5a64db4d309636e130812ff723.png_pic_center]

点击登录按钮

![在这里插入图片描述][807cc236fc294d5fa93589f152c721f9.png_pic_center]

可以过来，就行

现在直接点击激活邮件中的链接

![在这里插入图片描述][4d0addebe8ca46e4937b865621059eb6.png_pic_center]

![在这里插入图片描述][102a81a08ca749fabdfdaf0d4b6719cd.png_pic_center]

嚓， 继续访问，点了没反应，OK，把localhost改成127.0.0.1

![在这里插入图片描述][2343a475d044479abfdcc8b6d55f2c52.png_pic_center]

再试一次【删除数据库的记录，再注册一次】

![在这里插入图片描述][8e0511d49ec041ec865974f7c930c90b.png_pic_center]

这次这个链接就可以点了

![在这里插入图片描述][cf12bd18dafb4af0a418af8950191f82.png_pic_center]

继续访问

![在这里插入图片描述][7dcc36e647bf44939827edaef91f4c33.png_pic_center]

啊这【当然也可以在新窗口中打开笑死，主要应该是因为QQ 邮箱的安全措施做的太好了，后面项目上线后，有了公网IP 就可以跳过去了，现在的localhost 确实有问题】

![在这里插入图片描述][826619e788be44d4a793bf9bc0cacf19.png_pic_center]

确实是成功拼接了，但是要想在QQ 邮箱里面跳转过去，不行，所以可以直接从新窗口中打开此链接

![在这里插入图片描述][e1d487389cd044f396c2cf5117172c46.png_pic_center]

![在这里插入图片描述][a59cda7c9d63458cb3534735c8a1f1a9.png_pic_center]

这样就行了

![在这里插入图片描述][53c477e610cc4182a7548b5446d03c87.png_pic_center]

OK。激活成功了

![在这里插入图片描述][f59c586bfcad4b1492fa1442f2096fe7.png_pic_center]

而且跳转到了登录页面，看看数据库

![在这里插入图片描述][94f7f6627398467788b3191562e66388.png_pic_center]

没毛病，激活状态为1 了【已激活 】

如果尝试再次激活

![在这里插入图片描述][5997d6b0a61c48f6bbc347907b1bfeae.png_pic_center]

无效激活了就是。

为了验证实验一下，我试试网易的邮箱

![在这里插入图片描述][895f9d34609b4de5a6940758495ebd33.png_pic_center]

![在这里插入图片描述][4b4befd9b1414f05875db332ffc2cbcd.png_pic_center]

![在这里插入图片描述][facd5a324c0e466784e8687bb24f041f.png_pic_center]

直接点

![在这里插入图片描述][d268bdf612ea4c03a2fe544a979e08aa.png_pic_center]

继续前往

![在这里插入图片描述][83fea2dc793e447396c9bb4d8c76d728.png_pic_center]

嗯，亲测， 网易可以笑死。【其实总的来说，就是localhost的原因，之后上线的话，肯定会换成我们服务器的IP ，后面看看能不能正常解决这个问题吧】

[5b0a0c588feb449eb298b43577ef94cc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1669ac9195a94504a8fd592535cc1993.png
[29da8b7cee8f4d62945bc81c21a6f366.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d732e14e8dd94f68827a81d0b0c16280.png
[480568223e8044aab71ca9cbc034308f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/830fb46f45f84d288c3b50ec626a1c8f.png
[813552e6fec94fc18b41b209910f8123.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1b6ca5e042fe423cb9a7bec40476719d.png
[ec721ac91b19466f8cb1eb65f296c8b2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d553a76c43004ca1b224d819618933f7.png
[892bbdcb69754efab073a1247c005d08.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4caa7aaf560b422385856ce65e380b77.png
[2251475bcd714d4ab6bcdf434054bca8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/63095514b8bb48e29887c9b1f4d3252a.png
[dc590f2a558d40369e479cf9bda5d88d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b560eced98944db9828af4f6146b6851.png
[8275c53eb948409287f1df8bd28b1b32.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/25626528d16244d99e7e3a6abee911cd.png
[9a75e03ceb4142b7960ac6a2454292c8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/19e57c5e5dd6460ca1f00e7886c527b2.png
[a649e77fd02143018a90e5ac47fa7047.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5590bf51fb6a4358b7ac39c39d6f83d3.png
[ec732cd0ec7f46dca6b5f78a3ea59609.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/031b616e581d474a97233097ea988740.png
[31f05f552ea147479177622966adb939.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/09af2b7348004b238a8431af1acd5517.png
[964952a432f449e58b7b0780f5bde2ec.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/565d065839f94efeb1895a2211a2adcf.png
[baae6919f60a44038827395d9e01f5f0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/112181228f42484c8055386f896d9a48.png
[8f77471fa1f04f178282346e68fb64af.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3594821e18e14f768f0cf7696a9da6d9.png
[c1ae68ccf85b412883e421098e6b6f5e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8a20e5cd60fe4fd0b96a982fdb4d0d45.png
[5c70bad213304849bba80d99173c1915.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d5a09462d8e641e28ff37f8ba754ffcd.png
[ff7e899abf4340ffae678dd3ee781bc9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/595edecd4000442f9865a857fcf49c29.png
[ac359e1a5ba04d38ad9c438b2f7343c0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3102ade357f94111911a0e4de66492f7.png
[67cc07f70c374e0f9909252e09cfc9dd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bd6d7238acf04ba783bb53257c24dc3a.png
[31b32136d9de490386cc50ae2c4e0b98.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6de5b94a583d4e8caadca12fc20b75df.png
[8c04ec5a64db4d309636e130812ff723.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3579154d3c4949fda206056f2e1c7cc4.png
[807cc236fc294d5fa93589f152c721f9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7d261b3afba249eb88f21e723352579b.png
[4d0addebe8ca46e4937b865621059eb6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c16f0b74ef1645c58192781ee7098452.png
[102a81a08ca749fabdfdaf0d4b6719cd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/12ed9ee2c2b44263ab8bf19d73edac9f.png
[2343a475d044479abfdcc8b6d55f2c52.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4513cfde7c5b4ce78d4acbc55430517c.png
[8e0511d49ec041ec865974f7c930c90b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b27cd2f6688d44dc8f85da1591d21d64.png
[cf12bd18dafb4af0a418af8950191f82.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/da6e701536284a0eb4bd9ef970f520e8.png
[7dcc36e647bf44939827edaef91f4c33.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/42477d0bed2b448abd25c2f629b35cf2.png
[826619e788be44d4a793bf9bc0cacf19.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1a90aba1fb584a9ea2917bad78dac9d4.png
[e1d487389cd044f396c2cf5117172c46.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/64790243cc92454c802980f365875630.png
[a59cda7c9d63458cb3534735c8a1f1a9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5b51329163d640a89b6314c4f351bd02.png
[53c477e610cc4182a7548b5446d03c87.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4fc1519f26704207a05c31a8fafed50e.png
[f59c586bfcad4b1492fa1442f2096fe7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2633aadf4e4649ea8829dcb7cde9c0c5.png
[94f7f6627398467788b3191562e66388.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4082728c45e04c4d896cc151aa57f125.png
[5997d6b0a61c48f6bbc347907b1bfeae.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/90464b6c030f416cad3b770158f32260.png
[895f9d34609b4de5a6940758495ebd33.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c385bdea12b14bb5a480ec601b52b10d.png
[4b4befd9b1414f05875db332ffc2cbcd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bde87451604249189aac8a2b8f9b97ef.png
[facd5a324c0e466784e8687bb24f041f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8d9d2c16ddbb465891060a748c87e9f4.png
[d268bdf612ea4c03a2fe544a979e08aa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6b2ae0a4244744bc937cdacdf273f244.png
[83fea2dc793e447396c9bb4d8c76d728.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4bc59584e4c44350948d98e899ef2eca.png