参考文档
https://www.cnblogs.com/msi-chen/p/10974009.html#_label1_0
一、准备工作
1、导包 或 创建项目时勾选
<dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> </dependency>
2、创建配置类
目的：访问静态资源 新建config文件夹
package com.wt.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport; @Configuration public class WebStaticConfig extends WebMvcConfigurationSupport { @Override protected void addResourceHandlers(ResourceHandlerRegistry registry) { super.addResourceHandlers(registry); // 访问 http://localhost:8085/static/jquery-3.3.1.js 即访问 classpath: /static/jquery-3.3.1.js registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); } }
3、将静态资源(bootstrap)放到static文件夹下
4、HTML文件引入约束
xmlns:th="http://www.thymeleaf.org"
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
二、常用语法
1、导入CSS和JS
<link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" > <script th:src="@{static/jquery-3.3.1.js}"></script> <script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
2、组件复用(fragment)
a、组件
1 <nav class="navbar navbar-inverse" th:fragment="my-top"> 2 <div class="container-fluid"> 3 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 4 <ul class="nav navbar-nav"> 5 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 6 <li><a href="#">Link</a></li> 7 </ul> 8 <ul class="nav navbar-nav navbar-right"> 9 <li><a href="#">Link</a></li> 10 <li class="dropdown"> 11 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 12 <ul class="dropdown-menu"> 13 <li><a href="#">Action</a></li> 14 </ul> 15 </li> 16 </ul> 17 </div><!-- /.navbar-collapse --> 18 </div><!-- /.container-fluid --> 19 </nav>
b、复用
<!-- 组件相对路径 templates --> <nav th:insert="~{base/base::my-top}"></nav>
<nav th:replace="~{base/base::my-nav}"></nav>
注意：使用replace，效果更好
案例
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head th:fragment="my-head"> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" > <script th:src="@{static/jquery-3.3.1.js}"></script> <script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script> </head> <body> <nav class="navbar navbar-inverse" th:fragment="my-nav"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> </div> </body> </html>
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head th:replace="~{base/base::my-head}"> </head> <body> <nav th:replace="~{base/base::my-nav}"></nav> </body> </html>
3、循环 each
<tr th:each="depatment:${departmentList}"> <td th:text="${depatmentStat.index + 1}"></td> <td th:text="${depatment.name}"></td> </tr>
注意：
a、departmentList 是后端传递的参数
b、xxxStat.index 从0开始的序号，还有其它属性
4、页面跳转 (a标签 href属性)
a、类restful格式
<a class="btn btn-primary" th:href="@{/edit/}+${depatment.id}">编辑</a>
链接：localhost:8085/edit/1
b、普通格式
<a class="btn btn-primary" th:href="@{/edit(id=${depatment.id})}">编辑</a>
链接：localhost:8085/edit?id=1
案例：用到3和4的内容
后端
@GetMapping("/list")
public String list(Model model){
List<Department> departmentList = departmentMapper.selectAllDepartment();
System.out.println(departmentList);
model.addAttribute("departmentList", departmentList);
return "department/show";
}
前端
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head th:replace="~{base/base::my-head}"> </head> <body> <nav th:replace="~{base/base::my-nav}"></nav> <div class="container"> <div class="row col-md-8 col-md-offset-2" > <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">部门列表 <div class="text-right"> <a class="btn btn-default btn-" th:href="@{/depart/insert}">添加</a> </div> </h3> </div> <div class="panel-body"> <table class="table table-hover"> <thead> <tr> <th>序号</th> <th>部门名称</th> <th>操作</th> </tr> </thead> <tbody> <tr th:each="depatment:${departmentList}"> <td th:text="${depatmentStat.index + 1}"></td> <td th:text="${depatment.name}"></td> <td> <a class="btn btn-primary" th:href="@{/edit/}+${depatment.id}">编辑</a> <a class="btn btn-primary" th:href="@{/edit(id=${depatment.id})}">编辑</a> <a class="btn btn-danger">删除</a> </td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>
5、三元运算
后端
@GetMapping("/test")
public String test(@RequestParam("id") int id, Model model){
model.addAttribute("id", id);
return "department/test";
}
前端
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>你好,世界</h1> <div th:text="${id}==0?'女':'男'"></div> </body> </html>