SpringBoot整合Thymeleaf
1.引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>2.导入配置
spring:
thymeleaf:
servlet:
content-type: text/html;
suffix: .html
prefix: classpath:/templates/
encoding: UTF-8
mode: HTML
cache: false
mvc:
static-path-pattern: /**3.新建Controller
/**
* 打开页面并渲染数据
*/
@GetMapping("/index")
public String index(Map<String, Object> map) {
List<Article> list = articleService.findAll(1,100);
map.put("list", list);
return "index";
}
/**
* * 传值，页面跳转
*/
@GetMapping("/detail/{id}")
public String detail(@PathVariable("id") String id, Map<String, Object> map) {
Article article = articleService.findById(id);
map.put("article", article);
return "detail";
}3.新建html页面
<ul class="cbp_tmtimeline">
// 使用 th:each 遍历数据，取出controller值
<li th:each="o:${list}">
<time class="cbp_tmtime">
// 日期格式化
<span th:text="${#dates.format(o.getCreateDate(), 'yyyy-MM-dd HH:mm:ss')}"> </span>
</time>
<div class="cbp_tmicon"></div>
<div class="cbp_tmlabel" data-scroll-reveal="enter right over 1s">
// 绑定数据
<h2 th:text="${o.getArticleName()}"></h2>
// 截取字符串长度
<p th:text="${#strings.abbreviate(o.getArticleContent(),80)}">
<span class="blogpic"><a href="/">
<img th:src="@{/images/t03.jpg}"></a>
</span>
<span th:text="${o.getId()}"></span>
</p>
// * 向后台传值
<a th:href="@{'/detail/'+${o.getId()}}" target="_self" class="readmore">阅读全文>></a>
</div>
</li>
</ul>4.代码案例
码云：https://gitee.com/lzhjava/large-video-websites.git
访问地址：http://localhost:9999/index
5.常用标签
咱们上面知道Thymeleaf通过特殊的标签来寻找属于Thymeleaf的部分，并渲染该部分内容，而除了上面展示过的th:text之外还有很多常用标签，并且Thymeleaf也主要通过标签来识别替换对应位置内容，Thymeleaf标签有很多很多，功能也很丰富，这里列举一些比较常用的标签如下：
| 标签 | 作用 | 示例 |
|---|---|---|
| th:id | 替换id | <input th:id="${user.id}"/> |
| th:text | 文本替换 | <p text:="${user.name}">bigsai</p> |
| th:utext | 支持html的文本替换 | <p utext:="${htmlcontent}">content</p> |
| th:object | 替换对象 | <div th:object="${user}"></div> |
| th:value | 替换值 | <input th:value="${user.name}" > |
| th:each | 迭代 | <tr th:each="student:${user}" > |
| th:href | 替换超链接 | <a th:href="@{index.html}">超链接</a> |
| th:src | 替换资源 | <script type="text/javascript" th:src="@{index.js}"></script> |
6.链接表达式：@{...}
在使用thymeleaf前需要在html页面的头部加Thymeleaf标识：
<html xmlns:th="http://www.thymeleaf.org">引入css和js：
<link th:href="@{css/index.css}" rel="stylesheet"><script th:src="@{/js/modernizr.js}"></script>
7.变量表达式：${...}，在上面的项目案例中我们已经提到了，具体使用可参照项目中的具体应用即可。
遍历list：具体参照项目案例的应用
取map集合：
${Map名['key']} 或 ${Map名.key} 或 ${map.get('key')}遍历map：
th:each="item:${Map名}"，在下面只需使用item.key和item.value即可获得值<h2>Map遍历</h2><table border="1"><tr th:each="item:${map}"><td th:text="${item.key}"></td><td th:text="${item.value}"></td></tr></table>
8.选择变量表达式：*{...}
什么是选定对象？使用th:object属性的表达式的结果。就可以选定对象，具体实例如下：
<div th:object="${user}"><p>Name: <span th:text="*{name}">赛</span>.</p><p>Age: <span th:text="*{age}">18</span>.</p><p>Detail: <span th:text="*{detail}">大明太祖爷朱元璋</span>.</p></div>
当然*{…}也可和${…}混用。上面的代码如果不使用选定对象，完全等价于：
<div >
<p>Name: <span th:text="*{user.name}">赛</span>.</p>
<p>Age: <span th:text="${user.age}">18</span>.</p>
<p>Detail: <span th:text="${user.detail}">好好学习</span>.</p>
</div>