<li class="nav-item">
<a class="nav-link" th:href="@{/emps}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
员工管理
</a>
</li>
templates下新建emp包list.html
点进application.properties的thymeleaf默认配置，如spring.thymeleaf.cache进入到ThymeleafProperties，
public static final String DEFAULT_PREFIX = "classpath:/templates/";
controller包中新建EmployeeController
package com.cnstrong.springboot04webrestfulcrud.controller;
import com.cnstrong.springboot04webrestfulcrud.dao.EmployeeDao;
import com.cnstrong.springboot04webrestfulcrud.entities.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Collection;
@Controller
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
//查询所有员工返回列表页面
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
//放在请求域中
model.addAttribute("emps",employees);
//thymeleaf默认就会拼串
//classpath:/templates/返回值.html
return "emp/list";
}
}
关于模板片段的使用可以参考
====================================================================================================
thymeleaf公共页面元素抽取
1、抽取公共片段
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
〜{templatename :: selector} 模板名 ：：选择器
〜{templatename :: fragmentname} 模板名 ：：片段名
3、默认效果
insert的功能片段宿主标签的标签体中，如div
如果使用th:insert等属性进行引入，可以不用写~{}
行内写法[[~{}]]转义写法一定要加，[(~{})]可以写上
dashboard.html
<!--顶部栏开始-->
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow" th:fragment="topbar">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="https://getbootstrap.com/docs/4.1/examples/dashboard/#">[[${session.loginUser}]]</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search" />
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="https://getbootstrap.com/docs/4.1/examples/dashboard/#">Sign out</a>
</li>
</ul>
</nav>
list.html
<!--引入抽取的topbar--> <!--模板名会使用thymeleaf的前后缀配置规则进行解析--> <div th:insert="dashboard::topbar"></div>
th:insert和th:replace(th:include)之间的区别
th:insert和th:replace之间有什么区别?(th:include在3.0之后不推荐使⽤ 了)？
th:insert是最简单的：它将简单地插⼊指定宿主标签的标签体中。
th:replace实际上⽤指定的⽚段替换其宿主标签。
th:include类似于th:insert，⽽不是插⼊⽚段，它只插⼊此⽚段的内 容。
所以这样⼀个HTML⽚段：
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
...在宿主<div>标签中包含三次上述⽚段，如下所示：
<body>
...
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>
</body>
结果如下：
<body>
...
<div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
</body>
通过选择器的方式
dashboard.html
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
list.html
<div th:replace="~{dashboard::#sidebar}></div>
把topbar和sidebar的内容抽取出来放入commons/bar.html中
dashboard.html,list.html中替代为
<!--引入顶部栏--> <div th:replace="commons/bar :: topbar"></div>
<!--引入侧边栏--> <div th:replace="~{commons/bar :: #sidebar}"></div>
修改bar.html href
<a class="nav-link active" th:href="@{/main.html}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
Dashboard <span class="sr-only">(current)</span>
</a>
<li class="nav-item">
<a class="nav-link" th:href="@{/emps}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
员工管理
</a>
</li>
使用th:class修改bar.html
<li class="nav-item" >
<a class="nav-link active"
th:class="${activeUri}=='main.html'?'nav-link active':'nav-link'"
href="https://getbootstrap.com/docs/4.1/examples/dashboard/#" th:href="@{/main.html}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link"
th:class="${activeUri}=='emps'?'nav-link active':'nav-link'"
href="https://getbootstrap.com/docs/4.1/examples/dashboard/#" th:href="@{/emps}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
员工管理
</a>
</li>
参数化片段
dashboard.html
<!--引入侧边栏-->
<div th:replace="commons/bar :: sidebar(activeUri='main.html')"></div>
list.html
<!--引入侧边栏-->
<div th:replace="commons/bar::sidebar(activeUri='emps')"></div>
list.html中循环遍历出数据
<thead>
<tr>
<th>#</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>department</th>
<th>birth</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="emp:${emps}">
<td th:text="${emp.id}">1</td>
<td th:text="${emp.lastName}">1</td>
<td th:text="${emp.email}">1</td>
<td th:text="${emp.gender}">1</td>
<td th:text="${emp.department.departmentName}">1</td>
<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm:ss')}">1</td>
<td>
<a href="#" th:href="@{/emp/}+${emp.id}" class="btn btn-sm btn-primary">编辑</a>
<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
</td>
</tr>
工具表达式对象 #dates：java.util.Date对象的⽅法：格式化，组件提取等
