3、SpringBoot整合Thymeleaf

時間 2019-11-16

標籤 springboot 整合 thymeleaf 欄目 Spring 简体版

原文原文鏈接

3、SpringBoot整合Thymeleaf

As well as REST web services, you can also use Spring MVC to serve dynamic HTML content. Spring MVC supports a variety of templating technologies, including Thymeleaf, FreeMarker, and JSPs. Also, many other templating engines include their own Spring MVC integrations.

Spring Boot includes auto-configuration support for the following templating engines:

* FreeMarker

* Groovy

* Thymeleaf

* Mustache

If possible, JSPs should be avoided. There are several known limitations when using them with embedded servlet containers

When you use one of these templating engines with the default configuration, your templates are picked up automatically from src/main/resources/templates.

由上述內容可知,咱們能夠經過SpringMVC來提供動態內容,SpringMVC支持各類模板引擎,好比Thymeleaf,FreeMarker以及JSP等等,SpringBoot對這些模板引擎也有很好的集成

可是,若是可能,咱們應該儘可能避免在SpringBoot應用程序中使用Jsp,由於它們和一些嵌入式Servlet容器一塊兒使用時,會出現問題...

1.簡單整合

①,在pom.xml中添加Thymeleaf集成

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 3  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 4     <modelVersion>4.0.0</modelVersion>
 5     <parent>
 6         <groupId>org.springframework.boot</groupId>
 7         <artifactId>spring-boot-starter-parent</artifactId>
 8         <version>2.1.4.RELEASE</version>
 9         <relativePath/> <!-- lookup parent from repository -->
10     </parent>
11     <groupId>com.hnnz</groupId>
12     <artifactId>demo</artifactId>
13     <version>0.0.1-SNAPSHOT</version>
14     <name>SpringBootDemo</name>
15     <description>Demo project for Spring Boot</description>
16  
17  
18     <properties>
19         <java.version>1.8</java.version>
20     </properties>
21  
22  
23     <dependencies>
24         <dependency>
25             <groupId>org.springframework.boot</groupId>
26             <artifactId>spring-boot-starter-web</artifactId>
27         </dependency>
28  
29  
30         <dependency>
31             <groupId>org.springframework.boot</groupId>
32             <artifactId>spring-boot-starter-test</artifactId>
33             <scope>test</scope>
34         </dependency>
35  
36  
37         <dependency> 38 <groupId>org.springframework.boot</groupId> 39 <artifactId>spring-boot-starter-thymeleaf</artifactId> 40 </dependency>
41  
42  
43         <!-- Compile -->
44         <dependency> 45 <groupId>javax.servlet</groupId> 46 <artifactId>jstl</artifactId> 47 </dependency> 48 <!-- Provided --> 49 <dependency> 50 <groupId>org.springframework.boot</groupId> 51 <artifactId>spring-boot-starter-tomcat</artifactId> 52 <scope>provided</scope> 53 </dependency> 54 <dependency> 55 <groupId>org.apache.tomcat.embed</groupId> 56 <artifactId>tomcat-embed-jasper</artifactId> 57 <scope>provided</scope> 58 </dependency>
59  
60  
61     </dependencies>
62  
63  
64     <build>
65         <plugins>
66             <plugin>
67                 <groupId>org.springframework.boot</groupId>
68                 <artifactId>spring-boot-maven-plugin</artifactId>
69             </plugin>
70         </plugins>
71     </build>
72  
73  
74 </project>

如上:

紅色標註部分是SpringBoot集成Thymeleaf
藍色劃去部分是咱們上一章整合JSP的內容,這裏能夠忽略或者刪除

②,修改application.properties(刪去application.properties中原有的配置JSP的內容)

1 spring.mvc.view.prefix: /resources/templates/ 2 spring.mvc.view.suffix: .html

其實仍是修改前綴後綴,可是這裏咱們徹底能夠不寫,由於本章最開始的英文文檔已經說過:Spring會默認的去/resources/templates/ 下尋找HTML模板

③,在/resources/templates/下新建index.html,內容以下

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8  Hello,Thymeleaf!  9 </body>
10 </html>

綠色部分表示聲明當前文件是 thymeleaf, 裏面能夠用th開頭的屬性

HelloController內容不變,不過,如今咱們訪問/index,返回的視圖將會是一個html頁面

HelloController.java:

 1 package com.hnnz.demo.controller;  2  
 3  
 4 import org.springframework.stereotype.Controller;  5 import org.springframework.web.bind.annotation.RequestMapping;  6 import org.springframework.web.bind.annotation.ResponseBody;  7 import org.springframework.web.bind.annotation.RestController;  8  
 9  
10 @Controller 11 public class HelloController { 12  
13  
14     @RequestMapping("/hello") 15  @ResponseBody 16     public String hello(){ 17         return "Hello,Spring Boot!"; 18  } 19  
20  
21     @RequestMapping("/index") 22     public String index() { 23         return "index"; 24  } 25  
26  
27 }

④,訪問 http://localhost:8080/index 瀏覽器返回的視圖以下

2.參數傳遞

Thymeleaf的參數傳遞依靠ognl表達式完成(相似於EL表達式),其用法以下

①,修改HelloController

 1 package com.hnnz.demo.controller;  2  
 3  
 4 import org.springframework.stereotype.Controller;  5 import org.springframework.ui.ModelMap;  6 import org.springframework.web.bind.annotation.RequestMapping;  7 import org.springframework.web.bind.annotation.ResponseBody;  8 import org.springframework.web.bind.annotation.RestController;  9  
10  
11 @Controller 12 public class HelloController { 13  
14  
15     private String hello = "Hello,Thymeleaf!"; 16  
17  
18     @RequestMapping("/hello") 19  @ResponseBody 20     public String hello(){ 21         return "Hello,Spring Boot!"; 22  } 23  
24  
25     @RequestMapping("/index") 26     public String index(ModelMap modelMap) { 27         modelMap.addAttribute("hello",hello); 28         return "index"; 29  } 30  
31  
32 }

咱們要作的就是將這個類裏面的私有屬性hello傳遞到html文件中
ModelMap實質上就是一個Map集合,咱們能夠經過addAttribute(String,Object)方法添加值

②,修改index.html

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <p th:text="${hello}"></p>
 9 </body>
10 </html>

紅色標註部分,就表示將hello取出來放進<p>標籤裏

③,訪問 http://localhost:8080/index 瀏覽器返回的視圖以下

3.模板其它用法

Thymeleaf也有其餘用法,好比判斷,遍歷等等,這裏給出一個表格,再也不贅述,你也能夠參閱官方文檔瞭解它的用法,地址: https://www.thymeleaf.org/documentation.html

關鍵字	功能介紹	案例
th:id	替換id	<input th:id="'xxx' + ${collect.id}"/>
th:text	文本替換	<p th:text="${collect.description}">description</p>
th:utext	支持html的文本替換	<p th:utext="${htmlcontent}">conten</p>
th:object	替換對象	<div th:object="${session.user}">
th:value	屬性賦值	<input th:value="${user.name}" />
th:with	變量賦值運算	<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style	設置樣式	th:
th:onclick	點擊事件	th:onclick="'getCollect()'"
th:each	遍歷	tr th:each="user,userStat:${users}">
th:if	判斷條件	<a th:if="${userId == collect.userId}" >
th:unless	和th:if判斷相反	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href	連接地址	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch	多路選擇配合th:case 使用	<div th:switch="${user.role}">
th:case	th:switch的一個分支	<p th:case="'admin'">User is an administrator</p>
th:fragment	佈局標籤，定義一個代碼片斷，方便其它地方引用	<div th:fragment="alert">
th:include	佈局標籤，替換內容到引入的文件	<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace	佈局標籤，替換整個標籤到引入的文件	<div th:replace="fragments/header :: title"></div>
th:selected	selected選擇框選中	th:selected="(${xxx.id} == ${configObj.dd})"
th:src	圖片類地址引入	<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline	定義js腳本可使用變量	<script type="text/javascript" th:inline="javascript">
th:action	表單提交的地址	<form action="subscribe.html" th:action="@{/subscribe}">
th:remove	刪除某個屬性	<tr th:remove="all"> 1.all:刪除包含標籤和全部的孩子。2.body:不包含標記刪除,但刪除其全部的孩子。3.tag:包含標記的刪除,但不刪除它的孩子。4.all-but-first:刪除全部包含標籤的孩子,除了第一個。5.none:什麼也不作。這個值是有用的動態評估。
th:attr	設置標籤屬性，多個屬性能夠用逗號分隔	好比th:attr="src=@{/image/aa.jpg},title=#{logo}"，此標籤不太優雅，通常用的比較少。

相關標籤/搜索

springboot+mybatis+mysql+thymeleaf

springboot+shiro+mybatis+thymeleaf

springboot+thymeleaf+mybatis

springboot+mybatis+thymeleaf+vue

springboot+thymeleaf+security+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。