三、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 }

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。   ④,访问 http://localhost:8080/index 浏览器返回的视图如下 三、SpringBoot整合Thymeleaf 随笔 第1张三、SpringBoot整合Thymeleaf 随笔 第2张 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 浏览器返回的视图如下 三、SpringBoot整合Thymeleaf 随笔 第3张三、SpringBoot整合Thymeleaf 随笔 第4张         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}"，此标签不太优雅，一般用的比较少。
           
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄