干货 | 前端框架thymeleaf — 基础篇（内附代码）
Posted FEC筷云股份
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了干货 | 前端框架thymeleaf — 基础篇（内附代码）相关的知识，希望对你有一定的参考价值。
互联网
生态体系构建者
前言：本文由筷云技术人员提供，为thymeleaf基础内容，旨在探讨、交流互联网开发技术，希望能够帮到大家，也希望能够起到“抛砖引玉”的作用。愿大家：越努力，越幸运，越快乐，越成功，越勤劳，越有福！
不积跬步无以至千里，所以干了这碗毒鸡汤
▼再来看正文▼
背景：技术在不停进步，知识需不停更新。因公司技术架构升级到springCloud，已经决定抛弃JSP页面的前端风格，采用前后端分离的方式来实现开发，前端选取框架thymeleaf作为前端技术。
一．简介
- 1 -
什么是Thymeleaf ？
Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：
第一，Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。
这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
第二，Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
第三，Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
- 2 -
什么是模板引擎？
模板引擎简单的说就是把数据和按照一定的规则定义的模板用模板引擎合成可展示给用户查看的页面。
▼举个栗子吧▼
在模板中，我们使用某个对象中的数据都是{{productMap.name }}，模板引擎就是采用replace对应的把数据替换掉{{productMap.name }}。
但是说起来容易，其实模板引擎实现步骤是很复杂的，感兴趣的小伙伴可以自行了解这里不多做阐述。
二．使用
工欲善其事，必先利其器。官网的帮助文档肯定是需要看的。
https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#what-is-thymeleaf
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>2.1.4</version>
</dependency>
2. 在html页面加入头文件：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
3. 基础使用
3.1 获得对象
控制层：
@Controller
public class HelloController {
/**
* 测试hello
* @return
*/
@RequestMapping(value = "/hello")
public String hello(Model model) {
model.addAttribute("name", "ZK");
model.addAttribute("logo", http://www.fecsoft.cn/r/cms/fecsoft/default/common/img/logo.png");
return "hello";
}
}
View层：
<p th:text="'Hello！, ' + ${name} + '!'" >我的名字</p>
<a th:href="@{http://www.fecsoft.cn/r/cms/fecsoft/default/common/img/logo.png}">Thymeleaf 写路径的写法比较特殊</a>
3.2 条件判断
控制层：同3.1；
View层：
<p th:if="${name!=null} th:text="'Hello！, ' + ${name} + '!'" >我的名字</p>
注意：th:if属性求Bool值，只有true的时候其所在的标签及该标签中的内容才会被渲染到输出结果中
3.3 List循环
控制层：
@Controller
public class HelloController {
/**
* 测试List
* @return
*/
@RequestMapping(value = "/list")
public String list(Model model) {
List<String> userList = new ArrayList<String>();
userList .add("ZK1");
userList .add("ZK2");
userList .add("ZK3");
model.addAttribute("list", userList );
return "list";
}
}
View层：
<table>
<tr>
<th>用户名</th>
</tr>
<tr th:each="user,userStat : ${list}">
<td th:text="${user.userName}">用户名</td>
</tr>
</table>
三．总结
Thymeleaf 是一款语法相对更简单，且功能强大的模板引擎。后续会对Thymeleaf 的一些高级用法进行更加详细的介绍。
FEC筷云股份
赋能数字经济
◆ ◆ ◆
以上是关于干货 | 前端框架thymeleaf — 基础篇（内附代码）的主要内容，如果未能解决你的问题，请参考以下文章
SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染