三、SpringBoot整合Thymeleaf

本文轉載自查看原文 2019-04-23 23:10 868 SpringBoot

三、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}"，此標簽不太優雅，一般用的比較少。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Springboot整合thymeleaf模板 SpringBoot整合Thymeleaf SpringBoot整合thymeleaf springBoot整合thymeleaf Springboot+thymeleaf+shiro整合 3.SpringBoot整合Thymeleaf模板 Springboot整合Thymeleaf，Thymeleaf頁面引入靜態資源 springboot +Thymeleaf+UEditor整合記錄 SpringBoot入門系列（四）整合模板引擎Thymeleaf SpringBoot整合Jsp和Thymeleaf (附工程)