3.SpringBoot整合Thymeleaf模板

1、前言

SrpingBoot支持如JSP、Thymeleaf、FreeMarker、Mustache、Velocity等各類模板引擎，同時還爲開發者提供了自定義模板擴展的支持。

使用嵌入式Servlet容器時，請避免使用JSP，由於使用JSP打包後會存在一些限制。

在SpringBoot使用上述模板，默認從src/main/resources/templates下加載。

 

2、thymeleaf介紹

Thymeleaf是現代化服務器端的Java模板引擎，不一樣與其它幾種模板的是Thymeleaf的語法更加接近HTML，而且具備很高的擴展性。詳細資料能夠瀏覽官網。

 特色

• 支持無網絡環境下運行，因爲它支持 html 原型，而後在 html 標籤裏增長額外的屬性來達到模板+數據的展現方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，因此 thymeleaf 的模板能夠靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。因此它可讓前端小姐姐在瀏覽器中查看頁面的靜態效果，又可讓程序員小哥哥在服務端查看帶數據的動態頁面效果。
• 開箱即用，爲Spring提供方言，可直接套用模板實現JSTL、 OGNL表達式效果，避免天天因套用模板而修改JSTL、 OGNL標籤的困擾。同時開發人員能夠擴展自定義的方言。
• SpringBoot官方推薦模板，提供了可選集成模塊(spring-boot-starter-thymeleaf)，能夠快速的實現表單綁定、屬性編輯器、國際化等功能。

3、使用

3.1 首先要在pom.xml中添加對thymeleaf模板依賴

1 <dependency>
2     <groupId>org.springframework.boot</groupId>
3     <artifactId>spring-boot-starter-thymeleaf</artifactId>
4 </dependency>
5 <dependency>
6   <groupId>org.springframework.boot</groupId>
7   <artifactId>spring-boot-starter-web</artifactId>
8 </dependency>

 

3.2 添加完thymeleaf模板依賴的pom.xml文件內容以下

 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 
 6     <groupId>cn.kgc</groupId>
 7     <artifactId>springboot1</artifactId>
 8     <version>0.0.1-SNAPSHOT</version>
 9     <packaging>jar</packaging>
10 
11     <name>springboot1</name>
12     <description>我用的第一個maven工程</description>
13 
14 
15     <!--版本採用的是最新的 2.0.1.RELEASE
16     TODO 開發中請記得版本必定要選擇 RELEASE ，由於是穩定版本且BUG少-->
17     <parent>
18         <groupId>org.springframework.boot</groupId>
19         <artifactId>spring-boot-starter-parent</artifactId>
20         <version>2.0.5.RELEASE</version>
21         <relativePath/> <!-- lookup parent from repository -->
22     </parent>
23 
24     <properties>
25         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
26         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
27         <java.version>1.8</java.version>
28     </properties>
29 
30     <dependencies>
31 
32         <!--模塊(spring-boot-starter-thymeleaf)，能夠快速的實現表單綁定、屬性編輯器、國際化等功能。-->
33         <dependency>
34             <groupId>org.springframework.boot</groupId>
35             <artifactId>spring-boot-starter-thymeleaf</artifactId>
36         </dependency>
37         <!-- 默認就內嵌了Tomcat 容器，如須要更換容器也極其簡單-->
38         <dependency>
39             <groupId>org.springframework.boot</groupId>
40             <artifactId>spring-boot-starter-web</artifactId>
41         </dependency>
42         <!-- 測試包,當咱們使用 mvn package 的時候該包並不會被打入,由於它的生命週期只在 test 以內-->
43         <dependency>
44             <groupId>org.springframework.boot</groupId>
45             <artifactId>spring-boot-starter-test</artifactId>
46             <scope>test</scope>
47         </dependency>
48         <!--該依賴能夠不添加，可是在 IDEA 和 STS 中不會有屬性提示，
49         沒有提示的配置就跟你用記事本寫代碼同樣苦逼，出個問題弄哭你去-->
50         <dependency>
51             <groupId>org.springframework.boot</groupId>
52             <artifactId>spring-boot-configuration-processor</artifactId>
53             <optional>true</optional>
54         </dependency>
55     </dependencies>
56 
57     <build>
58         <plugins>
59             <!-- 編譯插件 -->
60             <plugin>
61                 <groupId>org.springframework.boot</groupId>
62                 <artifactId>spring-boot-maven-plugin</artifactId>
63             </plugin>
64         </plugins>
65     </build>
66 
67 
68 </project>

 

3.3  建立ThymeleafController.java

建立一個ThymeleafController用來映射HTTP請求與頁面的跳轉，下面寫了兩種方式，第一種比較直觀和優雅，第二種相對廣泛且代碼較少，且迎合從struts2跳坑的朋友們…

Spring4.3之後爲簡化@RequestMapping(method = RequestMethod.XXX)的寫法，故而將其作了一層包裝，也就是如今的GetMapping、PostMapping、PutMapping、DeleteMapping、PatchMapping

 1 package cn.kgc.controller;
 2 import org.springframework.stereotype.Controller;
 3 import org.springframework.web.bind.annotation.GetMapping;
 4 import org.springframework.web.bind.annotation.RequestMapping;
 5 import org.springframework.web.servlet.ModelAndView;
 6 import javax.servlet.http.HttpServletRequest;
 7 /**
 8  * ThymeleafController用來映射HTTP請求與頁面的跳轉
 9  */
10 @Controller
11 @RequestMapping
12 public class ThymeleafController {
13     /**
14      * 方法1:返回ModelAndView對象，
15      * 將視圖名稱封裝到該對象的viewName屬性中
16      * 將頁面所須要的數據封裝到該對象的addObject對象中
17      * @return
18      */
19     @GetMapping("/index.do")
20     public ModelAndView index() {
21         ModelAndView view = new ModelAndView();
22         // 設置跳轉的視圖 默認映射到 src/main/resources/templates/{viewName}.html
23         view.setViewName("index");
24         // 設置屬性
25         view.addObject("title", "個人第一個ThymeleafWEB頁面");
26         view.addObject("desc", "歡迎進入課工場學習");
27         Teacher teacher=new Teacher(1,"Holly","964918306","北大青鳥-南京中博軟件學院-課工場");
28         view.addObject("teacher", teacher);
29         return view;
30     }
31 
32     @GetMapping("/index1")
33     public String index1(HttpServletRequest request) {
34         // TODO 與上面的寫法不一樣，可是結果一致。
35         // 設置屬性
36         Teacher teacher=new Teacher(1,"Holly","964918306","北大青鳥-南京中博軟件學院-課工場");
37         request.setAttribute("teacher", teacher);
38         request.setAttribute("title", "個人第一個ThymeleafWEB頁面");
39         request.setAttribute("desc", "歡迎進入課工場學習");
40         // 返回的 index 默認映射到 src/main/resources/templates/xxxx.html
41         return "index";
42     }
43 
44     class Teacher {
45         private int tid;
46         private String tname;
47         private String qq;
48         private String address;
49 
50         public Teacher() {
51         }
52 
53         public Teacher(int tid, String tname, String qq, String address) {
54             this.tid = tid;
55             this.tname = tname;
56             this.qq = qq;
57             this.address = address;
58         }
59 
60         public int getTid() {
61             return tid;
62         }
63 
64         public void setTid(int tid) {
65             this.tid = tid;
66         }
67 
68         public String getTname() {
69             return tname;
70         }
71 
72         public void setTname(String tname) {
73             this.tname = tname;
74         }
75 
76         public String getQq() {
77             return qq;
78         }
79 
80         public void setQq(String qq) {
81             this.qq = qq;
82         }
83 
84         public String getAddress() {
85             return address;
86         }
87 
88         public void setAddress(String address) {
89             this.address = address;
90         }
91     }
92 }

 

3.4 建立index.html的模板文件

在src/main/resources/templates目錄下建立一個名index.html的模板文件，能夠看到thymeleaf是經過在標籤中添加額外屬性動態綁定數據的

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml"
 3       xmlns:th="http://www.thymeleaf.org">
 4 <head>
 5     <meta charset="UTF-8">
 6     <!-- 能夠看到 thymeleaf 是經過在標籤裏添加額外屬性來綁定動態數據的 -->
 7     <!--/*@thymesVar id="title" type=""*/-->
 8     <title th:text="${title}">Title</title>
 9     <!-- 在/resources/static/js目錄下建立一個hello.js 用以下語法依賴便可-->
10     <script type="text/javascript" th:src="@{/js/hello.js}"></script>
11 </head>
12 <body>
13 <h1 th:text="${desc}">Hello World</h1>
14 <h2>=====做者信息=====</h2>
15 <p th:text="${teacher.tid}"></p>
16 <p th:text="${teacher.tname}"></p>
17 <p th:text="${teacher.qq}"></p>
18 <p th:text="${teacher.address}"></p>
19 </body>
20 </html>

停一下，在你的機器上看到的是報錯的狀況，以下圖所示，可是頁面卻能夠展現數據，這個咱們稍加配置就能夠解決錯誤問題

咱們在idea中設置一下就ok

 

 

 

 

 

 3.5 靜態效果:  運行index.html既能夠看到以下的靜態效果

 

 

 3.5 動態效果:  

在瀏覽器輸入：http://localhost:9090/springboot1/index.do能夠看到渲染後的效果，真正意義上的動靜分離了

 

總結：

 Thymeleaf參考手冊：https://blog.csdn.net/zrk1000/article/details/72667478

 

參考文章出處:

• 本文做者：唐亞峯
• 本文連接：http://blog.battcn.com/2018/04/28/springboot/v2-web-thymeleaf/
• 版權聲明：本博客全部文章除特別聲明外，均採用CC BY-NC-SA 3.0許可協議。轉載請註明出處！