SpringBoot整合JSP

SpringBoot整合JSP文章目录SpringBoot整合JSP前言配置JSP环境编写DemoJSPJSP实现简单的登录判断参考文章前言在上一步中，我们已经使用 IDEA 搭建了一个 SpringBoot 项目，编写一个简单的 HelloController 就能进行访问。不熟悉的可以查看这篇博客第一个SpringBoot程序配置JSP环境首先，我们先在 SpringBoot 项目的 pom

风云诀4

933人浏览 · 2020-05-18 21:25:46

风云诀4 · 2020-05-18 21:25:46 发布

SpringBoot整合JSP

文章目录

SpringBoot整合JSP

前言

在上一步中，我们已经使用 IDEA 搭建了一个 SpringBoot 项目，编写一个简单的 HelloController 就能进行访问。

不熟悉的可以查看这篇博客第一个SpringBoot程序

配置JSP环境

首先，我们先在 SpringBoot 项目的 pom.xml 文件中导入 jsp 的依赖，添加到里面。

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

接着我们在 main 目录下建立 webapp 文件夹，在 webapp 里面之后建立 WEB-INF，jsp 文件夹。注意，webapp 和 resource 在同级目录下。

点击 “FIle”-> “Project Structure”，选择 “Model”-> “Web”，将“Web Resource Directory”的路径修改为刚建立的 webapp 的路径。如果 Web Resource Directory 下没有路径就新建一个。

然后我们去 application.properties 文件里面配置 SpringMVC 解析文件的前后缀

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

现在我们可以开始新建 jsp 文件了。

编写DemoJSP

鼠标选中 jsp 文件夹，右键，选择 “New”-> “JSP/JSPX”，新建一个 demo.jsp 文件。

在里面随便输入一些内容

<%@ page contentType="text/html;charset=UTF-8" 
language="java" %>
<html>
<head>
    <title>Demo</title>
</head>
<body>
This is a jsp file!
</body>
</html>

在 Controller 包中新建 JSPController 类，在里面设置接口访问 demo.jsp文件。注意这里使用的是 @Controller 注解。

@Controller
public class JSPController {    
    @GetMapping("/demo")    
    public String demo(){        
        return "demo";    
    }
}

运行项目，输入地址 “localhost:8080/demo”就能访问到 demo.jsp 页面啦。

JSP实现简单的登录判断

我们先在 jsp 文件夹中建立 login.jsp 文件，简单输入用户名和密码。使用 ajax 方法向后端传值，由后端进行判断并返回结果，前端接受返回值在进行提示。

这里我们使用的是在线的 jquery，就不需要再去下载 jquery 和配置了，非常方便。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        function check() {
            //ajax传数据
            var name = document.getElementById("user").value;
            var psw = document.getElementById("psw").value;
            var params = {
                "username":name,
                "password":psw
            };
            //console.log(params);
            $.ajax({
                type: "post",
                ansyv: false,
                data: params,
                url: "/check",
                success:function (data) {
                    //console.log(data);
                    if(data=="success"){
                        alert("登录成功");
                    }else {
                        alert("用户名或密码错误");
                    }
                },
                error:function (data2) {
                    alert("ajax failed");
                }
            })
        }
    </script>
</head>
<body>
    <input type="text" id="user" maxlength="10" placeholder="username">
    <br>
    <input type="password" id="psw" placeholder="password">
    <br>
    <button onclick="check()">sign</button>
</body>
</html>

然后去 JSPController 里设置访问地址，并设置后端处理数据的 url。

@GetMapping("/login")
public String login(){
    return "login";
}
@ResponseBody
@PostMapping("/check")
public String check(@RequestParam Map<String, Object> param){
    String username = (String)param.get("username");
    String password = (String)param.get("password");
    if(username.equals("kk") && password.equals("123")){
        return "success";
    }
    else {
        return "failed";
    }
}

这里因为我们没有连接数据库，所以就直接固定了后台验证的用户名和密码。当用户名为“kk”，密码为“123”时，向前端返回“success”，否则返回“failed”。

当我们输入不符合的用户名和密码时，页面弹窗警告“用户名和密码错误”。

当我们输入正确的用户名和密码时，页面会弹窗“登录成功”。
s10

这里要强调一点，我们写了一个 error 函数，当 ajax 传值失败时会提示“ajax failed”。

那么什么时候 ajax 传值会失败呢，如果我们在 ajax 中加上 dataType:"json"的话 ajax 就会传值失败了，因为后端的 @RequestParam 不接受 json 数据的传输。

$.ajax({    
    type: "post",    
    ansyv: false,  
    data: params,     
    dataType:"json",     
    url: "/check",
    success:function (data) {
    ······

s11

这里如果判断成功我们想要跳转页面，比如从 login.jsp 跳转到 demo.jsp，从后端是不能直接跳转的，因为 ajax 会接受返回数据，所以只能从前端跳转。

success:function (data) {    
    console.log(data);    
    if(data=="success"){        
        alert("登录成功");
        window.location.href="demo";
    }else {        
        alert("用户名或密码错误");    
    }
},
error:function (data2) {    
    alert("ajax failed");
}