SSM开发书评网20：把【Kaptcha验证码功能】应用到注册模块上；（遇到了【get请求的url，添加时间戳】，【表单内容序列化】）
作者：互联网
说明：
（1）本篇博客的内容： 本篇博客主要是把【SSM开发书评网19：开发【Kaptcha验证码功能】】中开发的验证码功能，应用到注册模块上；只是开发到了这一步，注册模块的完整业务逻辑并没有开发；
（2）本篇博客合理性说明：【在【SSM开发书评网19：开发【Kaptcha验证码功能】】中我们开发了Kaptcha验证码】→【但是，这个验证码，需要和前台界面（注册和登录页）联系在一起后，才有实际使用的价值】→【然后，本篇博客结合开发注册功能时，把前面开发的Kaptcha验证码给用上】
（3）本篇博客遇到的点：
● 遇到了【在访问get请求时，在url后面增加ts时间戳，用来解决浏览器缓存可能带来的问题】；
● 本篇博客通过【data: $("#frmLogin").serialize()】，把表单的数据给序列化了；serialize()方法是JQuery中的ajax方法，其作用是编码表单元素集为字符串以便提交；；；；；；然后，自己想起了【后台系统四：【新增】功能；（FileUpload组件）】这篇博客；这篇博客主要内容是【提交的表单的时候，涉及到了文件上传】，然后我们通过【enctype="multipart/form-data"】设置表单的编码方式，以便能够上传文件；
目录
一：在项目中，引入注册页的前端文件：register.ftl；
1.创建MemberController类：开发【访问注册页的入口方法】；（也就是，开发register.ftl注册页的访问url）
4.注册页点击【注册】按钮后，提交注册表单信息；（这儿目前，专注于验证码信息的提交）
5.前端点击【注册】发起注册请求后，后端处理请求；（这儿目前，只专注于验证码的校验）
一：在项目中，引入注册页的前端文件：register.ftl；
register.ftl初始内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>会员注册-慕课书评网</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="./resources/bootstrap/bootstrap.css"> <link rel="stylesheet" href="./resources/raty/lib/jquery.raty.css"> <script src="./resources/jquery.3.3.1.min.js"></script> <script src="./resources/bootstrap/bootstrap.min.js"></script> <style> .container { padding: 0px; margin: 0px; } .row { padding: 0px; margin: 0px; } .col- * { padding: 0px; } .description p { text-indent: 2em; } .description img { width: 100%; } </style> </head> <body> <!--<div style="width: 375px;margin-left: auto;margin-right: auto;">--> <div class="container "> <nav class="navbar navbar-light bg-white shadow"> <ul class="nav"> <li class="nav-item"> <a href="/"> <img src="https://m.imooc.com/static/wap/static/common/img/logo2.png" class="mt-1" style="width: 100px"> </a> </li> </ul> </nav> <div class="container mt-2 p-2 m-0"> <form id="frmLogin"> <div class="passport bg-white"> <h4 class="float-left">会员注册</h4> <h6 class="float-right pt-2"><a href="/login.html">会员登录</a></h6> <div class="clearfix"></div> <div class="alert d-none mt-2" id="tips" role="alert"> </div> <div class="input-group mt-2 "> <input type="text" id="username" name="username" class="form-control p-4" placeholder="请输入用户名"> </div> <div class="input-group mt-4 "> <input id="password" name="password" class="form-control p-4" placeholder="请输入密码" type="password"> </div> <div class="input-group mt-4 "> <input type="text" id="nickname" name="nickname" class="form-control p-4" placeholder="请输入用户名" > </div> <div class="input-group mt-4 "> <div class="col-5 p-0"> <input type="text" id="verifyCode" name="vc" class="form-control p-4" placeholder="验证码"> </div> <div class="col-4 p-0 pl-2 pt-0"> <!-- 验证码图片 --> <img id="imgVerifyCode" src="" style="width: 120px;height:50px;cursor: pointer"> </div> </div> <a id="btnSubmit" class="btn btn-success btn-block mt-4 text-white pt-3 pb-3">注 册</a> </div> </form> </div> </div> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-body"> 您已注册成功 </div> <div class="modal-footer"> <a href="/login.html" type="button" class="btn btn-primary">去登录</a> </div> </div> </div> </div> <script> //控制错误信息的显示与隐藏 function showTips(isShow, css, text) { if (isShow) { $("#tips").removeClass("d-none") $("#tips").hide(); $("#tips").addClass(css); $("#tips").text(text); $("#tips").fadeIn(200); } else { $("#tips").text(""); $("#tips").fadeOut(200); $("#tips").removeClass(); $("#tips").addClass("alert") } } //重新发送请求,刷新验证码 function reloadVerifyCode(){ //请在这里实现刷新验证码 } //点击验证码图片刷新验证码 $("#imgVerifyCode").click(function () { reloadVerifyCode(); }); //点击提交按钮,向/registe发起ajax请求 //提交请求包含四个参数 //vc:前台输入验证码 username:用户名 password:密码 nickname:昵称 $("#btnSubmit").click(function () { //表单校验 var username = $.trim($("#username").val()); var regex = /^.{6,10}$/; if (!regex.test(username)) { showTips(true, "alert-danger", "用户名请输入正确格式（6-10位）"); return; } else { showTips(false); } var password = $.trim($("#password").val()); if (!regex.test(password)) { showTips(true, "alert-danger", "密码请输入正确格式（6-10位）"); return; } else { showTips(false); } $btnReg = $(this); $btnReg.text("正在处理..."); $btnReg.attr("disabled", "disabled"); //发送ajax请求 $.ajax({ url: "/registe", type: "post", dataType: "json", data: $("#frmLogin").serialize(), success: function (data) { //结果处理,根据服务器返回code判断服务器处理状态 //服务器要求返回JSON格式: //{"code":"0","msg":"处理消息"} console.info("服务器响应:" , data); if (data.code == "0") { //显示注册成功对话框 $("#exampleModalCenter").modal({}); $("#exampleModalCenter").modal("show"); } else { //服务器校验异常,提示错误信息 showTips(true, "alert-danger", data.msg); reloadVerifyCode(); $btnReg.text("注 册"); $btnReg.removeAttr("disabled"); } } }); return false; }); </script> </body> </html>
二：开发；
1.创建MemberController类：开发【访问注册页的入口方法】；（也就是，开发register.ftl注册页的访问url）
MemberController类是会员控制器类。因为用户注册和用户登录，都是与会员相关的功能；所以，注册和登录相关的内容，都可以放在这个类中；
MemberController类：
package com.imooc.reader.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.servlet.ModelAndView; /** * member会员Controller */ @Controller public class MemberController { /** * 跳转显示register.ftl注册页； * @return */ @GetMapping("/register.html") public ModelAndView showRegister() { return new ModelAndView("/register"); } }说明：
（1）类内容说明；
（2）这样以后，比如这儿，我们通过【localhost/register.html】就能够访问到注册页了；
2.在注册页上，显示验证码；
重启Tomcat，观察效果：
3.点击验证码图片时，更换验证码；
这就需要我们编写 <img id="imgVerifyCode" >这个验证码图片所在的<img>标签的单击事件了；
重启Tomcat，观察效果：
4.注册页点击【注册】按钮后，提交注册表单信息；（这儿目前，专注于验证码信息的提交）
在前台我们填写了验证码，提交了以后，将其与服务器端Session中的验证码，进行比对；如果一致，校验通过；如果不一致，就表示输入的验证码是不对的；
说明：
（1） 这儿我们通过【data: $("#frmLogin").serialize(),】：把表单的数据给序列化了；serialize()方法是JQuery中的ajax方法，其作用是编码表单元素集为字符串以便提交；（如有需要可以参考【jQuery中Ajax函数：$.ajax()、$.post()、$.get()的使用、区别；】）
（2）然后，上面的表单serialize()序列化；让自己想起了【后台系统四：【新增】功能；（FileUpload组件）】这篇博客；这篇博客主要内容是【提交的表单的时候，涉及到了文件上传】，然后我们通过【enctype="multipart/form-data"】设置表单的编码方式，以便能够上传文件；
（3）接下来，我们要做的就是开发一个处理注册请求的Controller（并且该Controller处理注册的方法的url需要是“/registe”）；
5.前端点击【注册】发起注册请求后，后端处理请求；（这儿目前，只专注于验证码的校验）
在MemberController这个用于处理用户的Controller类中，添加处理注册的方法；
package com.imooc.reader.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import javax.servlet.http.HttpServletRequest; import java.util.HashMap; import java.util.Map; /** * member会员Controller */ @Controller public class MemberController { @PostMapping("/registe") @ResponseBody public Map registe(String vc, String username, String password, String nickname, HttpServletRequest request) { Map result = new HashMap(); //首先从Session会话对象中，获取存储在后端的验证码 String verifyCode = (String) request.getSession().getAttribute("kaptchaVerifyCode"); //如果【前端没有输入验证码】或者【当前Session中没有验证码】或者【前端输入的验证码和后端的验证码，在忽略大小写后不一致】：表示验证失败； if (vc == null || verifyCode == null ||!vc.equalsIgnoreCase(verifyCode)) { result.put("code", "VC01"); result.put("msg", "验证码错误"); } else { result.put("code", "0"); result.put("msg", "success处理成功"); } return result; } }说明：
（1）后端的url和方式，需要和前端对应上；
（2）后端使用方法参数的方式，接收前端数据时，参数名需要写对；（如有需要可以参考【SpringMVC入门与数据绑定5：Spring MVC数据绑定二：Controller接收请求中的参数之：使用【方法参数】接收；】）
（3）上篇博客提到过：如果需要HttpServletRequest或者HttpServletResponse的话，直接在方法参数中写上就行，Spring IoC容器会帮我们注入；
（4）后台处理后，需要根据前端要求返回合适的信息；
（5）这个方法直接返回了Map对象，但其可以被序列化为JSON字符串； 通过【RESTful开发风格6：RESTful基本使用四：JSON序列化；（jackson组件，以及其中的 @JsonFormat注解来解决时间问题；）】可知，当我们在Spring MVC中使用jackson时，服务器端Controller中的方法，直接返回实体对象就可以了，jackson会帮我们把对象序列化为JSON；
（6）效果：启动Tomcat，观察效果：如下分别输入正确验证码和错误的验证码，其是OK的；
至此，在注册这块，我们就成功的把验证码功能给引入了；下面我们就是去实现注册的完整业务逻辑了；
标签：20,url,验证码,表单,Controller,注册,import,tips,序列化 来源： https://blog.csdn.net/csucsgoat/article/details/122359693