一、thymeleaf简介
Thymeleaf 可以轻易地与 Spring MVC等Web 框架进行集成。Thymeleaf 语法并不会破坏文档的结构,所以 Thymeleaf 模板依然是有效的HTML文档。模板还可以被用作工作原型, Thymeleaf 会在运行期内替换掉静态值。它的模板文件能直接在浏览器中打开并正确显示页面,而不需要启动整个Web 应用程序。
二、使用thymeleaf
1、添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、在模板文件中加入解析
在加入依赖后,还需要在 HTML.文件中加入
<html lang="en" xmlns:th="http://www.thymeleaf.org">
命名空间。这样就能完成 Thymeleaf 的标签的渲染。
三、配置视图解析器
在创建springboot项目时只要勾选了thymeleaf模板引擎之后springboot配置文件中会自动配置视图解析器，但是我们需要关闭thymeleaf的缓存，否则在修改代码的时候会出现不能及时刷新的情况。
# 应用名称
spring.application.name=demo
# 应用服务 WEB 访问端口
server.port=8080
# THYMELEAF (ThymeleafAutoConfiguration)
# 开启模板缓存（默认值： true ）
spring.thymeleaf.cache=false
# 检查模板是否存在，然后再呈现
spring.thymeleaf.check-template=true
# 检查模板位置是否正确（默认值 :true ）
spring.thymeleaf.check-template-location=true
#Content-Type 的值（默认值： text/html ）
spring.thymeleaf.content-type=text/html
# 开启 MVC Thymeleaf 视图解析（默认值： true ）
spring.thymeleaf.enabled=true
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 要被排除在解析之外的视图名称列表，⽤逗号分隔
spring.thymeleaf.excluded-view-names=
# 要运⽤于模板之上的模板模式。另⻅ StandardTemplate-ModeHandlers( 默认值： HTML5)
spring.thymeleaf.mode=HTML5
# 在构建 URL 时添加到视图名称前的前缀（默认值： classpath:/templates/ ）
spring.thymeleaf.prefix=classpath:/templates/
# 在构建 URL 时添加到视图名称后的后缀（默认值： .html ）
spring.thymeleaf.suffix=.html
四、基础语法
1、引用命名空间
要使用thymeleaf模板首先引入依赖然后在html文件中引入命名空间：
<html lang="en" xmlns:th="http://www.thymeleaf.org">
2、常用th标签
（1）th:text
<div th:text="${session.user.username}">name</div>
用来接受控制器传来的值，如果username不存在的话显示标签中原来的内容。
（2）th:object
<div th:object="${session.user}">
<p th:text="*{username}"></p>
<p th:text="*{age}"></p>
<p th:text="*{role}"></p>
</div>{}获取对象中的属性。
（3）th:action
<form th:action="@{/artical/}"></form>
当涉及到url的时候都需要在前面加@
（4）th:value
<input type="text" th:value="${session.user.username}" value="哈哈">
将input中的value值替换为username。
3、thymeleaf中的URL写法
Thymeleaf 是通过语法@来处理URL的,需要使用 “th:href”和“th:src”等属性,“如下代码：
<a th:href="@{http://eg.com/}">绝对路径</a>
<a th:href="@{/}">相対路径</a>
<a th:href="@{css/bootstrap.min.css}">默认访问static 下的css文件夹</a>
4、使用thymeleaf进行条件求值
Thymeleaf 通过“th:if”和“th:unless”属性进行条件判断。在下面的例子中,<a>标签只有在“th:if” 中的条件成立时才显示.
<a th:href="@{/test01}" th:if="${session.user}!=null">哈哈</a>
“th:unless” 与 “th:if”恰好相反——只有当表达式中的条件不成立时才显示其内容。在下方代码中,如果用户 sesion为空,则不显示登录(test01)链接。
<a th:href="@{/test01}" th:unless="${session.user}!=null">哈哈</a>
五、th:switch……th:case
<div th:switch="${session.user.role}">
<p th:case="管理员">管理员</p>
<p th:case="会员">会员</p>
<p th:case="*">普通用户</p>
</div>
上述代码的意思是:如果用户角色(role )是管理员,则显示“管理员”;如果用户角色是会员,显示“会员”;如果都不是,则显示“普通用户”,即使用“*”表示默认情况。
六、Thymeleaf运算符
1、算数运算符
以下代码表示算数运算：
<!--加减运算-->
<p th:text="1+3"></p>
<!--取模运算-->
<p th:text="9%2"></p>
<!--乘法运算-->
<p th:text="9*2"></p>
<!--除法运算-->
<p th:text="9/2"></p>结果：
2、条件运算符th:if
gt:大于
ge:大于或者等于
eq:等于
lt:小于
le:小于或等于
ne:不等于
<span th:if="${session.user.role eq '管理员'}">欢迎您，管理员！</span>
上述代码表示只有role等于管理员的时候才会显示欢迎您管理员。
3、判断空值
<span th:if="${session.user.username==null}">当前值为null</span>
<span th:if="${session.user.username!=null}">当前值不为null</span>
七、处理循环遍历
1、遍历对象
<div th:each="item:${session.user}">
<li th:text="${item.username}"></li>
<li th:text="${item.age}"></li>
<li th:text="${item.role}"></li>
</div>
结果：
3、遍历集合
<div th:each="item:${session.user.hobbies}">
<li th:text="${item}"></li>
</div>
遍历数组和集合都差不多就是，方式还是一样的。
八、处理公共代码块
1、使用fragment标记重复代码块
2、调用重复代码
代码运行结果：
九、处理分页(mybatis-Plus)
在使用mybatis-plus进行分页的时候需要写一个配置类，这个配置类是必须要有的！！代码如下：
@Configuration public class MPConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor(){ MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor(); mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor()); return mybatisPlusInterceptor; } }
编写完配置类之后需要在后端实现分页给功能,代码如下：
/*分页查询，相比较mybatis的拦截器，这里mybatis-plus的拦截器需要使用配置类添加到spring*/ @GetMapping("/RetailerList") public String UserList(@RequestParam(value = "current",defaultValue = "1") Integer current , @RequestParam(value = "size",defaultValue = "5") Integer size, Model model){ /*查询全部的数据*/ IPage<Retailer> iPage = new Page(current,size); IPage<Retailer> iPage1 = retailerDao.selectPage(iPage, null); model.addAttribute("retailersInfo",iPage1); return "Retailer/RetailerList"; }
current表示当前是第几页，size表示当前页显示多少条数据。defaultValue表示如果当前访问该controller的路径中不包含current和size参数的话默认使用defaultValue的值。
Ipage:和mybatis中的分页对象pageHelper差不多，Ipage记录了分页的总页数，当前页数。当前页中有多少数据等等的信息。
将数据保存到model中转发到前端，前端代码：
<div class="box-tools pull-right"> <ul class="pagination"> <!--th:href="@{/RetailerList(current=1,size=5)}"就相当于是: href="@{/RetailerList?current=1&size=5)}--> <li> <a th:href="@{/RetailerList(current=1,size=5)}" aria-label="Previous">首页</a> </li> <!--先判断当前页是不是第一页，不是第一页的话通过当前页-1跳转到上一页。--> <!--如果当前页是第一页的话，使按键禁用--> <li th:if="${retailersInfo.current>1}" class="prev"><a th:href="@{/RetailerList(current=${retailersInfo.current}-1)}">上一页</a></li> <li th:if="${retailersInfo.current==1}" class="prev disabled"><a>上一页</a></li> <!--遍历总页数，范围是第一页到最后一页--> <li th:each="num:${#numbers.sequence(1,retailersInfo.pages)}"> <a th:href="@{/RetailerList(current=${num})}">[[${num}]]</a> </li> <!--和上一页的原理一样--> <li th:if="${retailersInfo.current<retailersInfo.pages}"><a th:href="@{/RetailerList(current=${retailersInfo.current}+1)}">下一页</a></li> <li th:if="${retailersInfo.current==retailersInfo.pages}" class="next disabled"><a>下一页</a></li> <li> <a th:href="@{/RetailerList(current=${retailersInfo.pages})}" aria-label="Next">尾页</a> </li> </ul> </div>
首页：首页参数就是current=1，size=5没啥好说的。但是需要注意书写的形式；在jsp中是href="/RetailerList?current=1&size=5"
但是使用thymeleaf就变成了：href="@{/RetailerList(current=1,size=5)上一页：在进行上一页之前需要先判断当前页是不是第一页，是第一页的话上一页的按键应该是禁用的。如果不是第一页的话就需要将当前页减一。
下一页：和上一页的原理是一样的只不过就是在当前页上加一罢了。
页面显示页码：就是遍历页数，num:${#numbers.sequence(1,retailersInfo.pages)}范围是第一页到总页数。
十、验证和提示错误消息
大多数表单信息都需要进行字符串的验证，以及提供错误消息反馈。Thymeleal 提供了几种示错误信息的方法。
1.字段错误信息提示
Thymeleaf通过“th:field”" 提供了“herrors" 和“th:error和th:errorclass"属性，用来验证和提示错误消息，如以下代码。如果邮箱信息验证出错，则会提示错误信息。
<div>
<span>邮箱:</span>
<span><input type="text" th:field="*{email}"/></span>
<span class="warn" th:if-="${#fields hasErrors('email')" th:erorsr="*{emai}">邮箱错误</span>
</div>
#fields.haserror()方法接收字段返回来的错误信息，并显示给用户。在Spring Boot 中，#fields.hasErrors()方法常常结合其内置的验证器( Validator)一起使用，它直接通过实体定义的API返回信息。比如在实体中加入Email验证，如下:@Email(message = "请输入邮箱")
@NotBlank(message = "邮箱不能为空")
private String email;
除反馈错误信息外，还可以定义错误的CSS样式，如以下代码:
<input type="text" th:field="*{name}" class="small" th:errorclass="warn" >
