1. First create a springboot project
2. Import dependencies
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
3.application.properties file configuration
server.port=8080
server.servlet.context-path=/
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
spring.web.resources.static-locations=classpath:/static/
4. First create three directories
5. Click File—"Project structure—"facets to build the webapp as a static resource Road King
6. This is done, and the created file also has a jsp file
Example: SMS service page and background authentication
controller layer
package com.jsptest.demo.jspdemo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @description:
* @author:cyz
* @time:2021/8/29 0029
*/
@Controller
public class TestController {
/**
*@Description:这是一个测试页面方法
*@params:
*@return:
*@Author:cyz
*@Date:2021/8/29 0029
*/
@RequestMapping(value="/index")
public String index(){
return "index";
}
@RequestMapping(value="/indexlist")
public void indexlist(HttpServletRequest request){
//获取手机号码
String phonenum = request.getParameter("phonenum");
//随机生成6位数验证码
String str="";
for (int i = 0; i <6; i++) {
str += (int)Math.floor(Math.random() * 10);
}
request.getSession().setAttribute("_code",str);
System.out.println(str);
sendMsg(phonenum,str);
}
//发送验证消息(可连接阿里云短信服务接口)
private void sendMsg(String phonenum, String str) {
//具体参考上一片文档阿里云短信api连接
}
@RequestMapping(value="/validate")
public void validateVerify(HttpServletRequest request, HttpServletResponse response) throws IOException {
String verifycode = request.getParameter("verifycode");//获取前台得到的验证码
String _code = (String)request.getSession().getAttribute("_code");
if(_code.equals(verifycode)){
System.out.println("验证通过");
response.getWriter().println("success...");
}else{
System.out.println("失败");
response.getWriter().append("fail.....");
}
}
}
front page
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="index.css" type="text/css" rel="stylesheet"/>
<title>这是一个JSP页面</title>
<style type="text/css">
body,html{
background:#1f1f2b;
color:#ffffff;
}
</style>
</head>
<body>
<div>
<div class="divForm">
<form class="formaction" >
<div class="boxfrist">
<div class="divbox">
[中国移动] 短信验证系统
</div>
</div>
<div class="boxfrist">
<div class="divbox">
<label>手机号码：</label>
<input type="text" id="phonenumber" name="phonenumber" value=""/>
</div>
</div>
<div class="boxfrist">
<div class="divbox">
<input type="text" id="verifycode" name="verifycode" value=""/>
</div>
<div class="divmsg">
<a class="msgbg" href="javascript:void(0)" id="msgbg" >发送验证码</a>
</div>
</div>
<div class="boxfrist">
<div class="divbox">
<button id="btn" onclick="validate()">校验</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var flag=60;
var obj=document.getElementById("msgbg");
obj.onclick=function() {
//控制时间
if (flag < 60) {
return;
}
let num = document.getElementById("phonenumber").value;
if (num == null || num == '') {
alert("请填入手机号！")
} else {
var xhr = new XMLHttpRequest();
xhr.open("post", "indexlist?phonenum=" + num, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText)
}
}
xhr.send(null);
timer();
}
}
//计时器
function timer(){
flag--;
obj.innerHTML=flag+"秒重新获取验证码";
if(flag==0){
obj.innerHTML="获取验证码";
flag=60
}else{
setTimeout("timer()",1000);//递归调用
}
}
function validate(){
let verifycode = document.getElementById("verifycode").value;
var xhr = new XMLHttpRequest();
if(verifycode!=null&&verifycode!='') {
xhr.open("post", "validate?verifycode=" + verifycode, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText)
}
}
}else{
alert("请填写验证码！");
return ;
}
xhr.send(null);
}
</script>
The style index.css in the static directory
input{
border:none;
border-bottom: 1px solid #000000;
outline:none;
-webkit-box-shadow: 0 0 0 1000px #454a4a inset;
}
.divForm{
position: absolute;/*绝对定位*/
width: 400px;
height:300px;
text-align: center;/*(让div中的内容居中)*/
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
background:#454a4a;
border-radius: 10px;
box-shadow: 0px 0px 60px #ffffff;
}
.formaction{
text-align:center ;
left:0px;
right:0px;
margin-top:15%;
width: 100%;
}
.boxfrist{
width:100%;
}
.divbox{
width:70%;
margin-top:5%;
float: left;
}
.divmsg{
width:20%;
margin-top:5%;
float: left;
}
a{
color:#ffffff;
}
.msgbg{
}
#btn{
width: 100px;
height: 30px;
border-radius: 10px;
border: none;
}
Quickly build jsp templates (similarly, thymeleaf can be quickly built)
first enter the setting interface - File and Code Templates to build file templates
