一、准备工作
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>
