导航栏作为公共页面
1. 公共部分提取
<head th:fragment="head(title)"> //提取Html头，以及css，js且让title动态显示
<title th:text="${title}">title</title>
<header class="main-header" th:fragment="top">//提取不需要变化的公共部分
<aside class="main-sidebar" th:fragment="sider(key)">//提取导航栏部分，使用(key)来为后续导航栏在对应页面进行高亮处理
2. 公共页面引入
<head th:replace="temp::head('管理项目')"> //引入Html头后，传入当前页面title
<header th:replace="temp::top"> //引入公共不需要变化的部分
<aside th:replace="temp::sider(admin_project_project)"></aside> //引入导航栏，并进行传入key值，为后续高亮处理做铺垫
3.Thymeleaf的三个不同引入方法的区别
| 属性 |
特点 |
| th:replace |
不保留自己的主标签，保留th:fragment的主标签 |
| th:include |
保留自己的主标签，不保留th:fragment的主标签 |
| th:insert |
保留自己的主标签，也保留th:fragment的主标签 |
导航栏在对应页面高亮处理
<li class="treeview" th:class="${#strings.startsWith(key,'admin_project_')} ? 'active': ''">
<a href="#">
<i class="fa fa-firefox"></i><span>项目模块管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li th:class="${key == 'admin_project_project' ? 'active' : ''}">
<a th:href="@{/admin/project/project}">
<i class="fa fa-circle-o"></i>项目管理
</a>
</li>
</ul>
<ul class="treeview-menu">
<li th:class="${key == 'admin_project_module' ? 'active' : ''}">
<a th:href="@{/admin/project/module}">
<i class="fa fa-circle-o"></i>模块管理
</a>
</li>
</ul>
</li>
Thymeleaf注意点
1. 配置非严格的语法,thymeleaf 有严格的语法限制，会极大程度限制你的发挥，所以先把这个模板的严格去掉
<!--避坑包 -->
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>
2.在application.properties中配置(可选)
<!-- 关闭thymeleaf缓存 开发时使用 否则没有实时画面-->
spring.thymeleaf.cache=false
## 检查模板是否存在，然后再呈现
spring.thymeleaf.check-template-location=true
#Content-Type值
spring.thymeleaf.content-type=text/html
#启用MVC Thymeleaf视图分辨率
spring.thymeleaf.enabled=true
## 应该从解决方案中排除的视图名称的逗号分隔列表
##spring.thymeleaf.excluded-view-names=
#模板编码
spring.thymeleaf.mode=LEGACYHTML5
# 在构建URL时预先查看名称的前缀
spring.thymeleaf.prefix=classpath:/templates/
# 构建URL时附加查看名称的后缀.
spring.thymeleaf.suffix=.html
3.Thymeleaf书写
<!--JS代码怎么写，必须 加上 th:inline-->
<script type="text/javascript" th:inline ="javascript">
**********************
</script >
<!--怎么将 springBoot中的 model 存储的值取出来-->
html:<span th:text = ${address}}></span>
JS: var urls = [[${address}]] ;
<!--怎么写URL链接-->
<a th:href="@{/admin/project/project}"></a>
<!--如果你URL中有参数，是页面初始化传入的-->
<a th:href="@{/admin/project/projectId(id = ${projectId})}"></a>
4.Select数据回显选中
<div class="form-group">
<label>性别</label>
<select class="form-control" th:value="${session.user.sex}" name="sex">
<option class="form-control" th:selected="${session.user.sex == '男'}" value="男">男</option>
<option class="form-control" th:selected="${session.user.sex == '女'}" value="女">女</option>
</select>
</div>
<!--th:field="*{Ygdly.dlrlx}"这个代表要匹配的数-->
<select style='width: 148.15px' name="dlrlx" th:field="*{Ygdly.dlrlx}">
<option th:each="dlrlxitem : ${dlrlxs}" th:text="${dlrlxitem.mc}" th:value="${dlrlxitem.bm}"></option>
</select>
5. Thymeleaf在js中从modle取值
totalPages:[[${pageInfo.pages}]], //总页数
6.遇到的一个问题
<!--以这种方式书写JS和css路径，出现GetMapper("/user")正常加载页面，但是GetMapper("/user/user")出现静态资源无法加载的状况-->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css" th:href="@{bootstrap/css/bootstrap.min.css}">
<!--改为这种引入的书写方式便没有问题了-->
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
