springboot快速构建jsp

七秒～车

已于 2022-02-12 15:52:15 修改

阅读量1k

点赞数 1

文章标签： spring boot jsp

于 2021-08-29 18:57:18 首次发布

本文链接：https://blog.csdn.net/m0_46742141/article/details/119983812

版权

1.首先创建一个springboot项目

2.导入依赖

 <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
  </dependency>

3.application.properties文件配置

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.首先创建三个目录
在这里插入图片描述
5.点击File—》Project structure—》facets进行构建webapp为静态资源路劲

6.这样就构建好了，同时创建文件也有了jsp文件

示例:短信服务页面及后台验证
controller层

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.....");
        }

    }
}

前端页面

<%@ 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>

static目录下的样式index.css

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

快速构建jsp模板（同理可快速构建thymeleaf）
首先进入setting界面—File and Code Templates构建文件模板
在这里插入图片描述

七秒～车

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboot快速构建jsp

1.首先创建一个springboot项目2.导入依赖 <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> </dependency>3.application.properties文件配置server.port=8080server.serv
复制链接

扫一扫