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}"，此标签不太优雅，通常用的比较少。