在SpringBoot當中使用Thymeleaf視圖解析器的詳細教程

更新時間：2024年09月13日 09:37:46 作者：RainbowSea

Thymeleaf是一款開源的模板引擎,它允許前端開發(fā)者使用HTML與XML編寫動態(tài)網(wǎng)頁,hymeleaf的主要特點是將表達式語言嵌入到HTML結(jié)構(gòu)中,它支持Spring框架,使得在Spring MVC應用中集成非常方便,本文給大家介紹了在SpringBoot當中使用Thymeleaf視圖解析器的詳細教程

在Spring Boot 當中使用 Thymeleaf 視圖解析器

想要在 Spring Boot 當中使用 Thymeleaf 視圖，就需要導入相關(guān)的 jar 依賴。在 pom.xml 文件中配置。

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

在 Spring Boot當中的 Thymeleaf 相關(guān)的類是：ThymeleafProperties.java 類。

注意：路徑不可以隨便改，要按照要求來，或者通過 application.yaml 進行修改。

spring:
  thymeleaf:
    prefix: "classpath:/填寫自己想要的路徑目錄"
    # classpath:/ 類路徑起手

對應 HTML頁面上想要使用上 Thymeleaf 語法的需要加上如下的一行內(nèi)容，才行。

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

案例舉例：

在 pom.xml 文件當中，導入相關(guān)的 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 父工程-規(guī)定寫法-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.3</version>
    </parent>

    <!--    導入web項目場景啟動器：會自動導入和web開發(fā)相關(guān)的jar包所有依賴【庫/jar】-->
    <!--    后面還會在說明spring-boot-starter-web 到底引入哪些相關(guān)依賴-->
    <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>

編寫相關(guān)項目的啟動場景。

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  // 無參數(shù)
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 // 無參數(shù)
@AllArgsConstructor  // 全參數(shù)
public class User {
    private Integer id;
    private String name;
    private String password;
    private Integer age;
    private String email;

}

編寫相關(guān) thymeleaf 視圖，HTML文件。

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

相關(guān)的 controller 控制器，處理請求內(nèi)容。

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 ，不使用請求轉(zhuǎn)發(fā)是防止刷新頁面會重復提交
            // 這里老師為什么寫的是 manage.html，因為這樣可以更加明確的表示到哪個頁面
            // manage.html 表示要去找方法的映射路徑為: manage.html
            return "redirect:/manage.html";
        } else {
            // 不合法，就重新登錄，請求轉(zhuǎn)發(fā)
            model.addAttribute("msg","賬號/用戶錯誤");
            return "adminLogin";  // 視圖解析
        }

    }

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

        // 可以這里集合~模板數(shù)據(jù)，放入到request域中，并顯示
        ArrayList<User> users = new ArrayList<>();
        users.add(new User(1,"關(guān)羽","666",28,"gy@ohu.com"));
        users.add(new User(2,"關(guān)羽","666",28,"gy@ohu.com"));
        users.add(new User(3,"關(guān)羽","666",28,"gy@ohu.com"));
        users.add(new User(4,"關(guān)羽","666",28,"gy@ohu.com"));
        users.add(new User(5,"關(guān)羽","666",28,"gy@ohu.com"));
        model.addAttribute("users",users);  // 放入到請求域當中
        return "manage";  // 視圖解析器

        // 攔截器處理
        // 獲取到 session會話域當中的信息，判斷用戶是否登錄過，進行一個過濾
        /*Object loginAdmin = session.getAttribute("loginAdmin");
        if(null != loginAdmin) {  // 說明成功登錄過
            // 可以這里集合~模板數(shù)據(jù)，放入到request域中，并顯示
            ArrayList<User> users = new ArrayList<>();
            users.add(new User(1,"關(guān)羽","666",28,"gy@ohu.com"));
            users.add(new User(2,"關(guān)羽","666",28,"gy@ohu.com"));
            users.add(new User(3,"關(guān)羽","666",28,"gy@ohu.com"));
            users.add(new User(4,"關(guān)羽","666",28,"gy@ohu.com"));
            users.add(new User(5,"關(guān)羽","666",28,"gy@ohu.com"));
            model.addAttribute("users",users);  // 放入到請求域當中

            return "manage";  // 視圖解析器
        } else {
            // 說明沒有登錄過，
            // 這里就返回登錄頁，并給出提示
            model.addAttribute("msg","你沒有登錄/請登錄");  // 請求域
            return "adminLogin"; // 請求轉(zhuǎn)發(fā)到 adminLogin.html視圖解析
        }*/


    }
}

package com.rainbowsea.springboot.controller;


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

@Controller
public class IndexController {

    // 編寫方法，轉(zhuǎn)發(fā)到登錄頁面
    /*
    解釋:
    1.因為我們引入了 starter-thymeleaf
    2.這里就會直接使用視圖解析到thymeleaf下的模板文件admin
     */
    @GetMapping(value = {"/","/login"})
    public String login(){
        return "adminLogin";
    }
}

配置的相關(guān)攔截器：

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) { // 說明該用戶已經(jīng)成功登錄
            // 返回 true 就是放行
            return true;
        } else {
            // 攔截，重新返回到登錄頁面
            request.setAttribute("msg", "你沒有登錄/請登錄~~~");
            // 注意：因為這里我們只有一個內(nèi)容被攔截了，而且該內(nèi)容的 uri路徑就是我們要跳轉(zhuǎn)進入的路徑
            request.getRequestDispatcher("/").forward(request, response);  // 重定向
            return false; // 攔截了，不放行

        }


    }

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

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

    }
}
// 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/**"); // 還要放行視圖的內(nèi)容，因為上面是
        // 攔截所有，注意不要: 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/**");
            }
        };
    }
}

啟動程序，打開瀏覽器運行測試