SpringMVC系列之整合Thymeleaf【Thymeleaf整合springmvc介绍及Thymeleaf基础概念、使用语法详解】

Thymeleaf是java的模板引擎，可以将动态页面静态化；目前使用较多的模板引擎：Velocity、Freemarker、Thymeleaf

一、Maven依赖

Thymeleaf整合springmvc共需要两个jar：

1. thymeleaf

2. thymeleaf-spring5

 <dependency>
   <groupId>org.thymeleaf</groupId>
   <artifactId>thymeleaf</artifactId>
   <version>3.0.9.RELEASE</version>
 </dependency>
 <dependency>
   <groupId>org.thymeleaf</groupId>
   <artifactId>thymeleaf-spring5</artifactId>
   <version>3.0.9.RELEASE</version>
 </dependency>

二、需要配置的Bean对象

在springmvc容器中，Thymeleaf需要配置3个Bean对象：

1. SpringResourceTemplateResolver

2. SpringTemplateEngine

3. ThymeleafViewResolver

代码：

<!-- SpringResourceTemplateResolver --> 
<bean id="templateResolver"   class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplat eResolver">  
	<!-- 页面位置 -->  
	<property name="prefix" value="/templates/" />  
	<!-- 页面后缀名 -->  
	<property name="suffix" value=".html" />  
	<!-- 编码 -->  
	<property name="characterEncoding" value="UTF-8" />  
	<!-- 模板模式：也就是使用什么模板，默认就是HTML -->  
	<property name="templateMode" value="HTML" />
	 <!-- 是否进行页面缓存(默认是true), 开发阶段设置为false,以便页面修改完可以立即生效 -->  
	 <property name="cacheable" value="false" /> 
 </bean>
 
 <!-- SpringTemplateEngine --> 
 <bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">  
 	<property name="templateResolver" ref="templateResolver" /> 
 </bean>
 
<!-- ThymeleafViewResolver --> 
<bean class="org.thymeleaf.spring5.view.ThymeleafViewResolver"> 
	<property name="templateEngine" ref="templateEngine" />
	<!--如果不写这个,返回到页面的中文将乱码-->  
	<property name="characterEncoding" value="UTF-8" /> 
</bean>

三、Thymeleaf详细解析

1. Thymeleaf 介绍

用来开发Web和独立环境项目的现代服务器端Java模板引擎。

目标：

为咱们的开发带来优雅的

自然模板

– HTML。

可以在直接浏览器中直接显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。

借助Spring Framework的模块，可以根据自己的喜好进行自由选择，可插拔功能组件，Thymeleaf是现代HTML5 Web开发的理想选择 – 尽管它可以做的更多。

Spring官方支持的服务的渲模板中，并不包含JSP。而是Thymeleaf和Freemarker等，而Thymeleaf与SpringMVC的视图技术以及SpringBoot的自动化配置集成的非常完美，几乎没有任何成本，咱们只需要关注一下Thymeleaf的语法即可。

Thymeleaf是一种模板语言（模板引擎）。那模板语言或模板引擎是什么？

常见的模板语言都包含以下几个概念：

数据（Data）。
模板（Template）。
模板引擎（Template Engine）。
结果文档（Result Documents）。

数据

    数据是信息的表现形式和载体，可以是符号、文字、数字、语音、图像、视频等。
    数据本身没有意义，数据只有对实体行为产生影响时才成为信息。

模板

   是一个与类型无关的类。
   编译器在使用模板时，会根据模板实参对模板进行实例化，得到一个与类型相关的类。

模板引擎

  这里特指用于Web开发的模板引擎；
  是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档；
  用于网站的时候模板引擎就会生成一个标准的HTML文档。

结果文档

  一种特定格式的文档，比如用于网站的模板引擎就会生成一个标准的HTML文档。

2. Thymeleaf的特点：

动静结合：

Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。
这是由于它支持html原型，然后在html标签里增加额外的属性来达到“模板+数据”的展示方式。浏览器解释html时会忽略未定义的标签属性，所以Thymeleaf的模板可以静态地运行；当有数据返回到页面时，Thymeleaf标签会动态地替换掉静态内容，使页面动态显示。

开箱即用：

它提供标准和Spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

多方言支持：

它提供Spring标准方言和一个与SpringMVC完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

与SpringBoot完美整合：

SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

3. 常用语法

3.1 链接表达式 @{}

<link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />

3.2 变量表达式：${}

Thymeleaf通过
${}
来获取model中的变量，注意这不是EL表达式，而是springel表达式，但是语法非常像。

Java后端Controller代码：

@Controller
public class UserController {

	@RequestMapping("queryUser")
	public String queryUser(Model model) {
		User user = new User(1, "张三", 20);
		model.addAttribute("user", user);
		return "index";
	}
}

在 index.html中使用如下格式，进行model中值的直接调用。

<span th:text="${user.name}">默认值</span>
   OR
<span th:text="${user['name']}">默认值</span>

3.3 选择表达式 *{}

使用方法：通过
th:object
获取对象，然后使用
th:xx="*{}"
获取对象属性值。

下面使用form和表格两种方式展示使用方式：

 <form th:object="${user}">
    <input name="id" th:value="*{id}"/>
    <input name="name" th:value="*{name}"/>
    <input name="age" th:value="*{age}"/>
 </form>

  <table>
  <tr>
	<td>id</td>
	<td>名字</td>
	<td>年龄</td>
  </tr>
  <tr th:object="${user}">
	<td><span th:text="*{id}"></td>
	<td><span th:text="*{name}"></td>
	<td><span th:text="*{age}"></td>
  </tr>
</table>

3.4 循环 th:each

在Java后端Controller中的代码：

@Controller
public class UserController {

	@RequestMapping("queryUser")
	public String queryUser(Model model) {
		User user2 = new User(2, "lisi", 22);
		User user3 = new User(3, "Jack", 23);
		User user4 = new User(4, "Jhon", 24);
	
		List<User> userList = new ArrayList<User>();
		userList.add(user2);
		userList.add(user3);
		userList.add(user4);
		model.addAttribute("userList", userList);
		return "index";
	}
}

在前端index.html中使用：

<table>
 	  <tr>
 		<td>id</td>
 		<td>名字</td>
 		<td>年龄</td>
 		<td>操作</td>
 	  </tr>
	 <tr th:each="user,stat:${userList}">
	    <td><span th:text="${user.id}"></td>
		<td><span th:text="${user.name}"></td>
		<td><span th:text="${user.age}"></td>
	 </tr>
</table>

注意：

stat对象包含以下属性：

index，从0开始的角标
count，元素的个数，从1开始
size，总元素个数
current，当前遍历到的元素
even/odd，返回是否为奇偶，boolean值
first/last，返回是否为第一或最后，boolean值

3.5 JS中使用模板数据

在js代码中，可以使用
[[${object}]]
来指名调用对象。

使用
[[${#httpServletRequest.getContextPath()}]]
可以调用httpServletRequest对象的getContextPath()方法，当然还可以调用其他方法。

<script th:inline="javascript">
	var user = [[${user}]];
	console.log("name:" + user.name);

    var contextPath = [[${#httpServletRequest.getContextPath()}]];
	// var contextPath = [[${#request.getContextPath()}]];
	// alert("contextPath-->" + contextPath);
</script>

3.6 get请求传参

在使用超链接发送get请求时，需要使用
@{/url}
的格式来指定访问的路径，如果有参数就在url中用
()
将键值对罗列，并用
，
隔开。

  <a th:href="@{/hello(name=test,k2=v2)}">get传参</a>

原文链接：https://blog.csdn.net/m0_46193073/article/details/104547529