Springboot(三)——Thymeleaf模板
Springboot(三)——Thymeleaf模板
Springboot(三)——Thymeleaf模板
内容回顾：
1.springboot基本配置；
2.springboot整合mybatis开发web项目
本章重点：
1.什么thymeleaf模板
2.使用thymeleaf完全前台页面操作
一、Thymeleaf介绍
Thymeleaf是一个全新得模板引擎，可以用来替代jsp页面。是spring4推荐使用得一个模板引擎。
特点：
1.Thymeleaf支持HTML原型，在服务不运行得情况下，可以直接运行，可以让美工在浏览器上直接查看页面的静态效果，也可以支持开发人员在服务器运行时查询动态页面效果。
2.在html标签中增加了额外得属性来达到模版+数据得展示方式，在浏览器解析html页面时，会自动忽略html标签中未定义得属性，达到可以显示静态页面效果；当有数据返回时，thymeleaf标签会动态得替换掉静态内容，显示动态页面。
3.提供了标准和spring标准两种语言，实现jstl,ognl表达式得效果。
4.使用方便，学习简单，快速得实现表单得数据绑定。
二、Thymeleaf使用
2.1 创建springboot项目
2.2 在pom.xml中引入需要得依赖关系
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>2.3 配置springboot
server.servlet.context-path=/springboot03
# 数据库配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/yiibaidb?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
spring.datasource.username=root
spring.datasource.password=root
# thymeleaf模板配置
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-82.4 编写Controller层代码
@Controller
public class TestController {
@RequestMapping("test")
public String test(Model model){
model.addAttribute("msg","测试方法调用成功");
return "success";
}
}2.5 创建thymeleaf模板
- 在templates创建html页面
- 在html页面上引入thymeleaf命名空间
<html lang="en" xmlns:th="http://wwww.thymeleaf.org" >2.6 在html标签中使用thymeleaf标签获取服务器返回得数据信息
<span th:text="${msg}">success</span>三、直接访问templates下模板文件
# 静态资源路径
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/templates/四、Thymeleaf常用标签
关键字 | 功能介绍 | 案例 |
|---|---|---|
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:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" |
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 rel="nofollow" th:href="@{/login}" th:unless=${session.user != null}>Login</a> |
th:href | 链接地址 | <a rel="nofollow" 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}"，此标签不太优雅，一般用的比较少。 |
五、Thymeleaf标签中表达式语法
分为四类：
- 变量表达式；
- 星号表达式；
- 国际化表达式；
- URL表达式；
5.1变量表达式
变量表达式就是OGNL表达式，获取上下文中对应对象得值，格式：${变量名}
<span th:text="${msg}">success.html</span>5.2 星号表达式
可以选择指定对象替代上下文对象：
格式：*{变量名}
<span th:text="*{msg}">success.html</span><br/>与变量表达式得区别：
1.当不考虑上下文得情况下，没有区别：
变量表达式：<span th:text="${msg}">success.html</span><br/>
星号表达式：<span th:text="*{msg}">success.html</span><br/>2.*可以指定对象替代上下文对象，获取父类标签得值，示例：
<!-- 获取上下文中得emp对象得lastName属性值 -->
<div th:text="${emp.lastName}">emp</div>
<!-- th:object替换对象为emp -->
<div th:object="${emp}">
<!-- *从emp对象中获取值 -->
<span th:text="*{lastName}">lastName</span>
</div>5.3 URL表达式
把上下文中得信息添加到URL中，URL重写。
RL表达式：
<a rel="nofollow" href="1.html" th:href="@{/add}">超链接1</a><br/>
<a rel="nofollow" href="1.html" th:href="@{/add(name='admin',pwd='123')}">超链接2</a><br/>
<a rel="nofollow" href="1.html" th:href="@{/add(name=${msg}})}">超链接3</a><br/>5.4 表达式支持语法
1.文字
<span th:text="123text">测试</span><br/>
<span th:text="true">测试</span><br/>
<span th:text="null">测试</span><br/>2.文本操作
<span th:text="'AB'+${msg}">测试</span><br/>
<span th:text="|AB${msg}CC|">测试</span><br/>3.算术运算，二元运算符，比较运算符
<span th:text="1+2">测试</span><br/>
<span th:text="2*2">测试</span><br/>
<span th:text="1==1 and 1==2">测试</span><br/>
<span th:text="1==2?'a':'b'">测试</span><br/>六、常用标签得使用
1.赋值和字符串操作
<span th:text="123text">测试</span><br/>
<span th:text="true">测试</span><br/>
<span th:text="null">测试</span><br/>
<span th:text="'AB'+${msg}">测试</span><br/>
<span th:text="|AB${msg}CC|">测试</span><br/>2.条件判断
th:if当条件成立时，显示标签；
th:unless当条件不成立时，显示标签；
标签常用方法：<br/>
<a rel="nofollow" th:if="1==1" href="/add">if连接1</a><br/>
<a rel="nofollow" th:if="1==2" href="/add">if连接2</a><br/>
<a rel="nofollow" th:unless="1==1" href="/add">unless连接1</a><br/>
<a rel="nofollow" th:unless="1==2" href="/add">unless连接2</a><br/>3.for循环
for循环：<br/>
<table>
<tr>
<td>编号</td>
<td>名</td>
<td>姓</td>
</tr>
<tr th:each="l:${list}">
<td th:text="${l.employeeNumber}">编号</td>
<td th:text="${l.firstName}">名</td>
<td th:text="${l.lastName}">姓</td>
</tr>
</table>状态变量iterStat：
for循环：<br/>
<table>
<tr>
<td>下标，从0开始</td>
<td>循环得第几个对象，从1开始</td>
<td>编号</td>
<td>名</td>
<td>姓</td>
</tr>
<tr th:each="l,iterStat:${list}">
<td th:text="${iterStat.index}"></td>
<td th:text="${iterStat.count}"></td>
<td th:text="${l.employeeNumber}">编号</td>
<td th:text="${l.firstName}">名</td>
<td th:text="${l.lastName}">姓</td>
</tr>
</table>腾讯云开发者
