explain:
(1) Content of this blog: this blog is mainly about[ SSM development book review network 19: develop [Kaptcha verification code function] ]The verification code function developed in is applied to the registration module; Only at this stage of development, the complete business logic of the registration module has not been developed;
(2) Explanation of rationality of this blog: [in[ SSM development book review network 19: develop [Kaptcha verification code function] ]In, we developed Kaptcha verification code] → [however, this verification code needs to be connected with the foreground interface (registration and login page) before it can be of practical use] → [then, this blog uses the Kaptcha verification code previously developed in combination with the development of registration function]
(3) Points encountered in this blog:
● encountered [when accessing the get request, add the ts timestamp after the url to solve the possible problems caused by the browser cache];
● this blog serializes the data of the form through [data: $("#frmLogin").serialize()]; The Serialize () method is an ajax method in JQuery, which is used to encode the set of form elements into strings for submission;;;;;; Then I remembered[ Background system 4: [add] function; (FileUpload component) ]This blog; The main content of this blog is [file upload is involved when submitting forms], and then we set the encoding method of forms through [enctype = "multipart / form data"] so that files can be uploaded;
catalogue
1: In the project, introduce the front-end file of the registration page: register ftl；
2. Display the verification code on the registration page;
3. When clicking the verification code picture, replace the verification code;
1: In the project, introduce the front-end file of the registration page: register ftl；
register. Initial content of FTL:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Member registration-Muke Book Review Network</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">Member registration</h4>
<h6 class="float-right pt-2"><a href="/login.html">Member login</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="enter one user name">
</div>
<div class="input-group mt-4 ">
<input id="password" name="password" class="form-control p-4" placeholder="Please input a password" type="password">
</div>
<div class="input-group mt-4 ">
<input type="text" id="nickname" name="nickname" class="form-control p-4" placeholder="enter one user name"
>
</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="Verification Code">
</div>
<div class="col-4 p-0 pl-2 pt-0">
<!-- Verification code picture -->
<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">notes book</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">
You have registered successfully
</div>
<div class="modal-footer">
<a href="/login.html" type="button" class="btn btn-primary">Go login</a>
</div>
</div>
</div>
</div>
<script>
//Control the display and hiding of error messages
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")
}
}
//Resend the request and refresh the verification code
function reloadVerifyCode(){
//Please refresh the verification code here
}
//Click the verification code picture to refresh the verification code
$("#imgVerifyCode").click(function () {
reloadVerifyCode();
});
//Click the submit button to initiate an ajax request to / registe r
//The submit request contains four parameters
//vc: foreground input verification code Username: username password: password nickname: nickname
$("#btnSubmit").click(function () {
//Form verification
var username = $.trim($("#username").val());
var regex = /^.{6,10}$/;
if (!regex.test(username)) {
showTips(true, "alert-danger", "Please enter the correct format for user name (6)-10 Bit)");
return;
} else {
showTips(false);
}
var password = $.trim($("#password").val());
if (!regex.test(password)) {
showTips(true, "alert-danger", "Please enter the correct password format (6)-10 Bit)");
return;
} else {
showTips(false);
}
$btnReg = $(this);
$btnReg.text("Processing...");
$btnReg.attr("disabled", "disabled");
//Send ajax request
$.ajax({
url: "/registe",
type: "post",
dataType: "json",
data: $("#frmLogin").serialize(),
success: function (data) {
//Result processing: judge the processing status of the server according to the code returned by the server
//The server requires that JSON format be returned:
//{"code":"0","msg": "processing messages"}
console.info("Server response:" , data);
if (data.code == "0") {
//The registration success dialog box is displayed
$("#exampleModalCenter").modal({});
$("#exampleModalCenter").modal("show");
} else {
//Server verification exception, error message
showTips(true, "alert-danger", data.msg);
reloadVerifyCode();
$btnReg.text("notes book");
$btnReg.removeAttr("disabled");
}
}
});
return false;
});
</script>
</body>
</html>
2: Development;
1. Create the MemberController class: develop the [entry method for accessing the registration page]; (that is, develop the access url of the register.ftl registration page)
The MemberController class is a member controller class. Because user registration and user login are functions related to members; Therefore, the contents related to registration and login can be placed in this class;
MemberController class:
package com.imooc.reader.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
/**
* member Member Controller
*/
@Controller
public class MemberController {
/**
* Jump to display register FTL registration page;
* @return
*/
@GetMapping("/register.html")
public ModelAndView showRegister() {
return new ModelAndView("/register");
}
}
explain:
(1) Class content description;
(2) In this way, for example, here, we can access the registration page through [localhost/register.html];
2. Display the verification code on the registration page;
Restart Tomcat and observe the effect:
3. When clicking the verification code picture, replace the verification code;
This requires us to write the click event of the < img > tag where the < img id = "imgverifycode" > verification code image is located;
Restart Tomcat and observe the effect:
4. Click the [registration] button on the registration page to submit the registration form information; (at present, we focus on the submission of verification code information)
In the foreground, we fill in the verification code. After submitting it, we compare it with the verification code in the server Session; If it is consistent, the verification is passed; If not, it means that the verification code entered is wrong;
explain:
(1) Here we serialize the data of the form through [data: $("#frmLogin").serialize(),]; The Serialize () method is an ajax method in JQuery. Its function is to encode the set of form elements into strings for submission; (refer to if necessary)[ Ajax functions in jQuery: $ ajax(),$. post(),$. Use and difference of get();])
(2) Then, the form serialize() above is serialized; Reminds me of[ Background system 4: [add] function; (FileUpload component) ]This blog; The main content of this blog is [file upload is involved when submitting forms], and then we set the encoding method of forms through [enctype = "multipart / form data"] so that files can be uploaded;
(3) Next, we need to develop a Controller to process the registration request (and the url of the Controller's method to process the registration needs to be "/ registe r");
5. Click [registration] at the front end to initiate a registration request, and then the back end will process the request; (at present, we only focus on the verification of verification code)
In the Controller class of MemberController, which is used to process users, add a method to process registration;
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 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();
//First, get the verification code stored in the back end from the Session object
String verifyCode = (String) request.getSession().getAttribute("kaptchaVerifyCode");
//If [no verification code entered at the front end] or [no verification code in the current Session] or [the verification code entered at the front end and the verification code at the back end are inconsistent after ignoring case]: the verification fails;
if (vc == null || verifyCode == null ||!vc.equalsIgnoreCase(verifyCode)) {
result.put("code", "VC01");
result.put("msg", "Verification code error");
} else {
result.put("code", "0");
result.put("msg", "success Processing succeeded");
}
return result;
}
}
explain:
(1) The url and method of the back end should correspond to the front end;
(2) The back-end uses method parameters. When receiving front-end data, the parameter name needs to be written correctly; (refer to if necessary)[ Introduction to spring MVC and data binding 5: Spring MVC data binding 2: the Controller receives one of the parameters in the request: use [method parameters] to receive;])
(3) As mentioned in the previous blog: if you need HttpServletRequest or HttpServletResponse, just write it directly in the method parameters, and the Spring IoC container will inject it for us;
(4) After background processing, appropriate information needs to be returned according to the requirements of the front end;
(5) This method directly returns the Map object, but it can be serialized into a JSON string; Pass[ RESTful development style 6: RESTful basic use 4: JSON serialization; (jackson component and its @ JsonFormat annotation to solve the time problem;) ]It can be seen that when we use jackson in Spring MVC, the method in the server-side Controller can directly return the entity object, and jackson will help us serialize the object into JSON;
(6) Effect: start Tomcat and observe the effect: enter the correct verification code and the wrong verification code respectively as follows, which is OK;
So far, in registration, we have successfully introduced the verification code function; Now we are going to realize the complete business logic of registration;