补：在Spring Boot 当中使用 Thymeleaf 视图解析器

ChinaRainbowSea

于 2024-09-12 23:44:59 发布

阅读量455

点赞数 3

本文链接：https://blog.csdn.net/weixin_61635597/article/details/142188366

版权

Spring Boot 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

补：在Spring Boot 当中使用 Thymeleaf 视图解析器

想要在 Spring Boot 当中使用 Thymeleaf 视图，就需要导入相关的 jar 依赖。在 pom.xml 文件中配置

。

在这里插入图片描述

<!--        引入 thymeleaf-start ,项目会自动完成配置，-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

在 Spring Boot当中的 Thymeleaf 相关的类是：ThymeleafProperties.java 类。

注意：路径不可以随便改，要按照要求来，或者通过 application.yaml 进行修改。

spring:
  thymeleaf:
    prefix: "classpath:/填写自己想要的路径目录"
    # classpath:/ 类路径起手

对应 HTML页面上想要使用上 Thymeleaf 语法的需要加上如下的一行内容，才行。

在这里插入图片描述

<html lang="en" xmlns:th="http://www.thymeleaf.org">

案例举例：

在 pom.xml 文件当中，导入相关的 jar 包文件。

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.rainbowsea</groupId>
    <artifactId>springboot_usersys</artifactId>
    <version>1.0-SNAPSHOT</version>


    <!--    导入SpringBoot 父工程-规定写法-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.3</version>
    </parent>

    <!--    导入web项目场景启动器：会自动导入和web开发相关的jar包所有依赖【库/jar】-->
    <!--    后面还会在说明spring-boot-starter-web 到底引入哪些相关依赖-->
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--引入lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <!--        引入 thymeleaf-start ,项目会自动完成配置，-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!--  引入 lombok 插件      -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>
</project>

编写相关项目的启动场景。

在这里插入图片描述

package com.rainbowsea.springboot;


import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication // 项目启动标志
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class,args);
    }
}

对应的 Bean 类

在这里插入图片描述

package com.rainbowsea.springboot.bean;


import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor  // 无参数
public class Admin {
    private String name;
    private String password;

}

package com.rainbowsea.springboot.bean;


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor // 无参数
@AllArgsConstructor  // 全参数
public class User {
    private Integer id;
    private String name;
    private String password;
    private Integer age;
    private String email;

}

编写相关 thymeleaf 视图，HTML文件。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
</head>
<body>
<a href="#">返回管理界面</a> <a href="#">安全推出</a>


<hr>
<div style="text-align: center">
    <h1>管理员</h1>
    <table border="1px" cellspacing="0" bordercolor="green" style="text-align: center">
        <tr bgcolor="pink">
            <td>id</td>
            <td>name</td>
            <td>pwd</td>
            <td>email</td>
            <td>age</td>
        </tr>
        <tr bgcolor="#7fffd4" style="text-align: center" th:each="user:${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.password}"></td>
            <td th:text="${user.email}"></td>
            <td th:text="${user.age}"></td>
        </tr>
    </table>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
<div style="text-align: center">
    <h1>用户登录</h1>
    <form action="#" th:action="@{/login}" method="post">
        <label style="color: red" th:text="${msg}"></label><br>
        用户名: <input type="text" style="width: 150px" name="name"><br>
        密码: <input type="password" style="width: 150px" name="password"><br>
        <input type="submit" value="登录"><br>
        <input type="reset" value="重新填写"><br>
    </form>
</div>

</body>
</html>

相关的 controller 控制器，处理请求内容。

在这里插入图片描述

package com.rainbowsea.springboot.controller;


import com.rainbowsea.springboot.bean.Admin;
import com.rainbowsea.springboot.bean.User;
import com.sun.org.apache.xpath.internal.operations.Mod;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.jws.WebParam;
import javax.servlet.http.HttpSession;
import java.util.ArrayList;

@Controller
public class AdminController {


    @PostMapping("/login")
    public String login(Admin admin, HttpSession session, Model model) {




        // 验证用户是否合法
        if(StringUtils.hasText(admin.getName()) && "666".equals(admin.getPassword())) {
            // 将登录用户保险到 session会话域当中
            session.setAttribute("loginAdmin",admin);

            // 合法，重定向到manage.html
            // 请小伙伴回忆，Java web ，不使用请求转发是防止刷新页面会重复提交
            // 这里老师为什么写的是 manage.html，因为这样可以更加明确的表示到哪个页面
            // manage.html 表示要去找方法的映射路径为: manage.html
            return "redirect:/manage.html";
        } else {
            // 不合法，就重新登录，请求转发
            model.addAttribute("msg","账号/用户错误");
            return "adminLogin";  // 视图解析
        }

    }

    // 处理用户的请求到 manage.html
    // 是重定向——>get
    @GetMapping("/manage.html")
    public String mainPage(Model model,HttpSession session){

        // 可以这里集合~模板数据，放入到request域中，并显示
        ArrayList<User> users = new ArrayList<>();
        users.add(new User(1,"关羽","666",28,"gy@ohu.com"));
        users.add(new User(2,"关羽","666",28,"gy@ohu.com"));
        users.add(new User(3,"关羽","666",28,"gy@ohu.com"));
        users.add(new User(4,"关羽","666",28,"gy@ohu.com"));
        users.add(new User(5,"关羽","666",28,"gy@ohu.com"));
        model.addAttribute("users",users);  // 放入到请求域当中
        return "manage";  // 视图解析器

        // 拦截器处理
        // 获取到 session会话域当中的信息，判断用户是否登录过，进行一个过滤
        /*Object loginAdmin = session.getAttribute("loginAdmin");
        if(null != loginAdmin) {  // 说明成功登录过
            // 可以这里集合~模板数据，放入到request域中，并显示
            ArrayList<User> users = new ArrayList<>();
            users.add(new User(1,"关羽","666",28,"gy@ohu.com"));
            users.add(new User(2,"关羽","666",28,"gy@ohu.com"));
            users.add(new User(3,"关羽","666",28,"gy@ohu.com"));
            users.add(new User(4,"关羽","666",28,"gy@ohu.com"));
            users.add(new User(5,"关羽","666",28,"gy@ohu.com"));
            model.addAttribute("users",users);  // 放入到请求域当中

            return "manage";  // 视图解析器
        } else {
            // 说明没有登录过，
            // 这里就返回登录页，并给出提示
            model.addAttribute("msg","你没有登录/请登录");  // 请求域
            return "adminLogin"; // 请求转发到 adminLogin.html视图解析
        }*/


    }
}

package com.rainbowsea.springboot.controller;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {

    // 编写方法，转发到登录页面
    /*
    解释:
    1.因为我们引入了 starter-thymeleaf
    2.这里就会直接使用视图解析到thymeleaf下的模板文件admin
     */
    @GetMapping(value = {"/","/login"})
    public String login(){
        return "adminLogin";
    }
}

配置的相关拦截器：

在这里插入图片描述

package com.rainbowsea.springboot.interceptor;

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


@Slf4j
public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        // 为了让大家看到访问的URI
        String requestURI = request.getRequestURI();
        String requestURL = request.getRequestURL().toString();
        log.info("preHandle 拦截到的请求URI={}", requestURI);
        log.info("preHandle 拦截到的请求URL={}", requestURL);

        // 进行登录的校验
        HttpSession session = request.getSession();
        Object loginAdmin = session.getAttribute("loginAdmin");
        if (null != loginAdmin) { // 说明该用户已经成功登录
            // 返回 true 就是放行
            return true;
        } else {
            // 拦截，重新返回到登录页面
            request.setAttribute("msg", "你没有登录/请登录~~~");
            // 注意：因为这里我们只有一个内容被拦截了，而且该内容的 uri路径就是我们要跳转进入的路径
            request.getRequestDispatcher("/").forward(request, response);  // 重定向
            return false; // 拦截了，不放行

        }


    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        log.info("postHandle执行了...");
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        log.info("afterCompletion执行了...");

    }
}
// HandlerInterceptor

在这里插入图片描述

package com.rainbowsea.springboot.config;


import com.rainbowsea.springboot.interceptor.LoginInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration  // 配置拦截器
public class WebConfig
/*        implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 注册自定义拦截器LoginInterceptor
        registry.addInterceptor(new LoginInterceptor())
                .addPathPatterns("/**")  // 拦截所有的请求
                .excludePathPatterns("/","/login","/images/**"); // 还要放行视图的内容，因为上面是
        // 拦截所有，注意不要: templates ，因为sprinboot的默认配置，就是以templates为根路径往下找的
        // 所以添加就错了，就成了 /templates/templates/images/**了。

    }*/
{

    @Bean
    public WebMvcConfigurer webMvcConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addInterceptors(InterceptorRegistry registry) {
                System.out.println("addInterceptors~~~");
                // 注册拦截器
                registry.addInterceptor(new LoginInterceptor())
                        .addPathPatterns("/**")
                        .excludePathPatterns("/","/login","/images/**");
            }
        };
    }
}