（仿牛客论坛项目）06 - 忘记密码

最新推荐文章于 2023-10-18 15:21:56 发布

每天都要学习的阿荣

最新推荐文章于 2023-10-18 15:21:56 发布

阅读量2.3k

点赞数 6

分类专栏： java项目文章标签： java spring boot springboot 数据库

本文链接：https://blog.csdn.net/qq_42148002/article/details/125587133

版权

java项目专栏收录该内容

8 篇文章 6 订阅

订阅专栏

前言

首先我们在登陆页面，点击忘记密码跳转到如下页面；
其次在如下页面输入邮箱（判断邮箱是否正确），点击获取验证码，会像邮箱中发送验证码；同时，这个验证码要自己保存一份以备验证；
填写邮箱和验证码之后，输入新密码，点击重置密码，修改数据库中用户的密码。

在这里插入图片描述

1、访问忘记密码页面

1.1 修改 LoginController 层

获取忘记密码的超链接请求，跳转到 forget.html 页面

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

1.2 修改 forget.html 页面

修改引入的样式表路径为 thymeleaf 格式的，包括所有使用相对路径的 CSS、JS 文件都修改为绝对路径格式，例如：th:href="@{/css/login.css}"；
同时，头部文件进行代码复用；th:replace="index::header"

在这里插入图片描述

1.3 修改 index.html 界面

修改忘记密码跳转链接：

<a th:href="@{/forget}" class="text-danger float-right">忘记密码?</a>

1.4 测试页面

在登陆页面点击忘记密码：

在这里插入图片描述

2、向邮箱发送验证码

2.1 修改 forget.html 页面（错误排查中对 js 代码进行了修改）

没学过 jQuery ，所以用原生 JS 实现点击超链接发送请求（前端页面实在是困难）：

<a href="#" th:onclick="get_code()" class="btn btn-info form-control">获取验证码</a>

<script>
    function get_code() {
        var email = document.getElementById("your-email");
        // 点击该超链接会发送请求给浏览器
        window.location.href = "getCode?email=" + email;
    }
</script>

2.2 UserService 层

实现获取验证码的方法，根据用户输入的邮箱；
1. 判断邮箱是否为空；
2. 判断邮箱是否存在被注册过；
3. 判断邮箱的用户状态是否已经激活；
都没问题的话发送随机 6 位字符串验证码到指定邮箱（这里已经有做好的 html 模板可以使用，其中需要邮箱和验证码两个信息）；
同时记录下来验证码和验证码过期时间，之后验证的时候使用；

//忘记密码之后给邮箱发送验证码
@Override
public Map<String, Object> getCode(String email) {
    Map<String,Object> map = new HashMap<>();
    //空值判断
    if (StringUtils.isBlank(email)){
        map.put("emailMsg","请输入邮箱！");
        return map;
    }
    //邮箱是否正确
    User user = userMapper.selectByEmail(email);
    if (user == null){
        map.put("emailMsg","该邮箱还未注册过，请注册后再使用！");
        return map;
    }
     //该用户还未激活
    if (user.getStatus() == 0){
        map.put("emailMsg","该邮箱还未激活，请到邮箱中激活后再使用！");
        return map;
    }
    //邮箱正确的情况下，发送验证码到邮箱
    Context context = new Context();
    context.setVariable("email",email);
    String code = CommunityUtil.generateUUID().substring(0,5);
    context.setVariable("code",code);
    String content = templateEngine.process("mail/forget", context);
    mailClient.sendMail(email, "牛客验证码", content);

    map.put("code",code);//map中存放一份，为了之后和用户输入的验证码进行对比
    map.put("expirationTime", LocalDateTime.now().plusMinutes(5L));//过期时间
    return map;
}

2.3 修改 mail/forget.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>
			您正在找回牛客账号的密码, 本次操作的验证码为 <b th:utext="${code}">u5s6dt</b> ,
			有效时间5分钟, 请您及时进行操作!
		</p>
	</div>
</body>
</html>

2.3 LoginController 层

实现获取验证码的方法，调用 Service 层获取验证码（底层实现了发送邮件的功能）；
如果有错误信息，错误信息显示给客户端；
如果没有错误信息，告诉客户端验证码已发送的消息；
同时将验证码和过期时间记录在 session 中，以便后续和用户输入的信息作比较。

//忘记密码之后获取验证码
@RequestMapping(path = "/getCode", method = RequestMethod.GET)
public String getCode(String email, Model model,HttpSession session) {
    Map<String, Object> map = userService.getCode(email);
    if (map.containsKey("emailMsg")) {//有错误的情况下
        model.addAttribute("emailMsg", map.get("emailMsg"));
    } else {//正确的情况下，向邮箱发送了验证码
        model.addAttribute("msg", "验证码已经发送到您的邮箱，5分钟内有效！");
        //将验证码存放在 session 中，后序和用户输入的信息进行比较
        session.setAttribute("code",map.get("code"));
        //后序判断用户输入验证码的时候验证码是否已经过期
        session.setAttribute("expirationTime",map.get("expirationTime"));
    }
    return "site/forget";
}

2.4 修改 forget.html 页面

主要是邮箱和验证码的错误和正确信息回显：

<div class="form-group row">
    <label for="your-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':''}|"
               name="email" th:value="${param.email}"
               id="your-email" placeholder="请输入您的邮箱!" required>
        <div class="invalid-feedback" th:text="${emailMsg}">
            该邮箱已被注册!
        </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" th:class="|form-control ${codeMsg!=null?'is-invalid':''}|"
               name="verifycode"
               id="verifycode" placeholder="请输入验证码!">
        <div class="invalid-feedback" th:text="${codeMsg}">
            验证码不正确!
        </div>
    </div>
    <div class="col-sm-4">
       <a href="javascript:void(0)" th:onclick="get_code()" class="btn btn-info form-control">获取验证码</a>
    </div>
</div>

2.5 测试页面

空值测试（前端逻辑过不去）：

在这里插入图片描述

未注册的邮箱：

在这里插入图片描述

未激活的邮箱：

在这里插入图片描述

正确情况下：

在这里插入图片描述

2.6 错误排查

2.6.1 邮箱未输入的情况下，点击获取验证码出现如下错误：

原因是前端页面设置了只有在表单提交的时候，内容为空的警告，没有其他空警告功能，所以我们需要自己实现一个；
同时，我们通过 document.getElementById("your-email"); 获取到的是一个 DOM 对象，而不是 input 标签中的值，需要进行修改；

java.lang.IllegalArgumentException: Invalid character found in the request target [/community/getCode?email=[object%20HTMLInputElement] ]. The valid characters are defined in RFC 7230 and RFC 3986
	at org.apache.coyote.http11.Http11InputBuffer.parseRequestLine(Http11InputBuffer.java:494)
	at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:271)
	at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65)
	at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:890)
	at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1787)
	at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
	at org.apache.tomcat.util.threads.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1191)
	at org.apache.tomcat.util.threads.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:659)
	at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
	at java.base/java.lang.Thread.run(Thread.java:833)

在这里插入图片描述

js 功能的实现：

<script>
    function get_code() {
        var email = $("#your-email").val();	//获取input框内的值;
        if (email == null || email == ""){
            alert("邮箱未填写！");	//如果值为空，提示用户填写
            return;
        }else{
            // 点击该超链接会发送请求给浏览器
            window.location = "getCode?email=" + email;
        }
    }
</script>

3、重置密码功能实现

3.1 UserService 层

实现忘记密码功能；
空值处理，验证码是否正确，是否过期；
邮箱和验证码没有问题的情况下修改当前用户的密码；

//忘记密码
@Override
public Map<String, Object> forget(String email, String verifycode, String password, HttpSession session){
    Map<String,Object> map = new HashMap<>();
    //空值处理
    if (StringUtils.isBlank(email)){
        map.put("emailMsg","请输入邮箱！");
        return map;
    }
    if (StringUtils.isBlank(verifycode)){
        map.put("codeMsg","请输入验证码！");
        return map;
    }
    if (StringUtils.isBlank(password)){
        map.put("passwordMsg","请输入新密码！");
        return map;
    }
    /*
    //验证验证码是否正确
    if (!verifycode.equals(session.getAttribute("code"))){
        map.put("codeMsg","输入的验证码不正确！");
        return map;
    }
    //验证码是否过期
    if (LocalDateTime.now().isAfter((LocalDateTime)session.getAttribute("expirationTime"))){
        map.put("codeMsg","输入的验证码已过期，请重新获取验证码！");
        return map;
    }
    */
    //邮箱在获取验证码那一步已经验证过了，是有效的邮箱，且验证码也有效
    User user = userMapper.selectByEmail(email);
    password = CommunityUtil.md5(password + user.getSalt());
    userMapper.updatePassword(user.getId(),password);

    return map;
}

解释：

由于 session 最好是在表现层使用，所以这里判断验证码放到表现层去判断，因为涉及到调用 session。

3.2 LoginController 层

判断验证码是否有效，是否已经过期；
没有问题的情况下，调用 service 层去更新用户密码；

//忘记密码
@RequestMapping(path = "/forget", method = RequestMethod.POST)
public String forget(Model model, String email, String verifycode, String password, HttpSession session) {
    //验证验证码是否正确
    if (!verifycode.equals(session.getAttribute("code"))) {
        model.addAttribute("codeMsg", "输入的验证码不正确！");
        return "site/forget";
    }
    //验证码是否过期
    if (LocalDateTime.now().isAfter((LocalDateTime) session.getAttribute("expirationTime"))) {
        model.addAttribute("codeMsg", "输入的验证码已过期，请重新获取验证码！");
        return "site/forget";
    }
    Map<String, Object> map = userService.forget(email, verifycode, password);
    if (map == null || map.isEmpty()) {
        model.addAttribute("msg", "密码修改成功，可以使用新密码登录了!");
        model.addAttribute("target", "/login");
        return "site/operate-result";
    } else {
        model.addAttribute("emailMsg", map.get("emailMsg"));
        model.addAttribute("codeMsg", map.get("codeMsg"));
        model.addAttribute("passwordMsg", map.get("passwordMsg"));
        return "/site/forget";
    }
}

3.3 修改 forget.html 页面

每一项输入的 name 属性；
已填充信息回显；
错误信息显示；
错误样式显示

<form class="mt-5" th:action="@{/forget}" method="post">
    <div class="form-group row">
        <label for="your-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':''}|"
                   name="email" th:value="${param.email}"
                   id="your-email" placeholder="请输入您的邮箱!" required>
            <div class="invalid-feedback" th:text="${emailMsg}">
                该邮箱已被注册!
            </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" th:class="|form-control ${codeMsg!=null?'is-invalid':''}|"
                   name="verifycode"
                   id="verifycode" placeholder="请输入验证码!">
            <div class="invalid-feedback" th:text="${codeMsg}">
                验证码不正确!
            </div>
        </div>
        <div class="col-sm-4">
            <a href="javascript:void(0)" th:onclick="get_code()" class="btn btn-info form-control">获取验证码</a>
        </div>
    </div>
    <div class="form-group row mt-4">
        <label for="your-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':''}|"
                   name="password" th:value="${param.password}"
                   id="your-password" placeholder="请输入新的密码!" required>
            <div class="invalid-feedback" th:text="${passwordMsg}">
                密码长度不能小于8位!
            </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>

3.4 测试页面

空值就不演示了，前端逻辑会实现；
验证码不正确：

在这里插入图片描述

验证码过期：

在这里插入图片描述

正确情况下：

在这里插入图片描述

参考文献

每天都要学习的阿荣

关注

6
点赞
踩
27

收藏

觉得还不错? 一键收藏
2
评论
（仿牛客论坛项目）06 - 忘记密码

1.2 修改 forget.html 页面修改引入的样式表路径为 thymeleaf 格式的，包括所有使用相对路径的 CSS、JS 文件都修改为绝对路径格式，例如：；同时，头部文件进行代码复用；1.4 测试页面在登陆页面点击忘记密码：2.2 UserService 层实现获取验证码的方法，根据用户输入的邮箱；都没问题的话发送随机 6 位字符串验证码到指定邮箱（这里已经有做好的 html 模板可以使用，其中需要邮箱和验证码两个信息）；同时记录下来验证码和验证码过期时间，之后验证的时候使
复制链接

扫一扫