SpringBoot：2.SpringBoot整合Thymeleaf模板引擎渲染web視圖

時間 2020-06-13

標籤 springboot 2.springboot 整合 thymeleaf 模板引擎渲染 web 視圖欄目 Spring 简体版

原文原文鏈接

在Web開發過程當中，Spring Boot能夠經過@RestController來返回json數據，那如何渲染Web頁面？Spring Boot提供了多種默認渲染html的模板引擎，主要有如下幾種：html

Thymeleaf
FreeMarker
Velocity
Groovy
Mustache

Spring Boot 推薦使用這些模板引擎來代替 Jsp，Thymeleaf 只是其中一種，下面咱們來簡單聊聊Thymeleaf及實踐一下如何整合Spring Boot和Thymeleaf。java

1.Thymeleaf 介紹

Thymeleaf簡單的說，就是一款用於渲染 XML/XHTML/HTML5 內容的模板引擎，可用於Web與非Web環境中的應用開發。git

2.實踐Spring Boot整合Thymeleaf

2.1 構建Spring Boot項目

咱們以SpringBoot：1.開啓SpringBoot之旅的源碼做爲基礎修改，項目名爲：02.Spring-Boot-Thymeleaf 僅保留Application.java啓動類，其餘都去除。github

基本的目錄結構web

Application.javaspring

package com.w3cjava;

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

}

pom.xmlapache

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.9.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.w3cjava</groupId>
    <artifactId>02.Spring-Boot-Thymeleaf</artifactId>
    <version>0.1</version>
    <name>02.Spring-Boot-Thymeleaf</name>
    <description>Thymeleaf project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <maven-jar-plugin.version>3.0.0</maven-jar-plugin.version>
    </properties>

    <dependencies>
        <!-- 支持web的模塊依賴 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <!-- 排除tomcat依賴 -->
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-tomcat</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!-- jetty依賴 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jetty</artifactId>
        </dependency>
        <!-- 測試模塊依賴 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- 熱部署依賴 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>        
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2.2 引入Thymeleaf依賴

<!-- thymeleaf模板引擎依賴 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.3 構建IndexController

package com.w3cjava.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {
    @RequestMapping("/")
    public String index(ModelMap map) {
        // 加入一個屬性，用來在模板中讀取
        map.addAttribute("host", "http://www.w3cjava.com");
        // return模板文件的名稱，對應src/main/resources/templates/index.html
        return "index";
    }

}

2.4 渲染頁面

在項目src/main/resources/templates目錄下新建一個模板文件index.html文件，內容以下json

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
<h1 th:text="${host}">Hello World</h1>
</body>
</html>

2.5 訪問路徑

經過訪問路徑http://localhost:8080/ 結果頁面以下。tomcat

以上僅僅只是展現了Thymeleaf渲染文本的語法，更多Thymeleaf的頁面語法，還請訪問Thymeleaf的官方文檔查詢使用。微信

2.6 Thymeleaf的默認參數配置

Thymeleaf給咱們提供部分參數的默認配置項，好比渲染模板默認路徑爲resources目錄下templates下的文件，文件類型爲text/html等等。

如須要修改默認配置，只需複製下面要修改的屬性到application.properties中，並修改爲須要的值。

# Enable template caching.
spring.thymeleaf.cache=true 
# Check that the templates location exists.
spring.thymeleaf.check-template-location=true 
# Content-Type value.
spring.thymeleaf.content-type=text/html 
# Enable MVC Thymeleaf view resolution.
spring.thymeleaf.enabled=true 
# Template encoding.
spring.thymeleaf.encoding=UTF-8 
# Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.excluded-view-names= 
# Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.mode=HTML5 
# Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.prefix=classpath:/templates/ 
# Suffix that gets appended to view names when building a URL.
spring.thymeleaf.suffix=.html  spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain. spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.