背景：技术在不停进步，知识需不停更新。因公司技术架构升级到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
1. 需要导入thymeleaf的jar包（下载地址：http://www.thymeleaf.org/download.html）如果使用的是maven的话加入：
<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 的一些高级用法进行更加详细的介绍。
本文来源于：干货 | 前端框架thymeleaf — 基础篇（内附代码）-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。
- 赞助本站
- 微信扫一扫
-
- 加入Q群
- QQ扫一扫
-
评论