组件化
1.相同的代码可以组件化可以提高代码的复用,th:fragment="topbar"
将代码组件化,单独放到一个目录下
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--头部导航栏-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/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="http://getbootstrap.com/docs/4.0/examples/dashboard/#">退出</a>
</li>
</ul>
</nav>
</html>
2.使用组件,commons/commons表示路径,topbar表示使用的组件
<div th:insert="~{commons/commons::topbar}"></div>
三元运算符
实现连接点击过后高亮
1.给组件传递一个参数
<div th:insert="~{commons/commons::topbar(active='main.html')}"></div>
2.判断组件参数是否正确
<li class="nav-item">
<!-- 判断active的值是否为main.html,正确高亮,错误不高亮-->
<a th:class="${active=='main.html'?'nav-link active':'nav-link '}" th:href="@{/index.html}">
首页 <span class="sr-only">(current)</span>
</a>
</li>
遍历
1.后台获取数据传递到前台
@Controller
public class EmployeeController {
@Autowired
private EmployeeDao employeeDao;
@RequestMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.find();
model.addAttribute("employees",employees);
return "emp/list";
}
}
2.前台获取数据进行遍历
<tr th:each="emp:${employees}">
<td th:text="${emp.getId()}"></td>
<td th:text="${emp.getLastName()}"></td>
<td th:text="${emp.getEmail()}"></td>
<td th:text="${emp.getGender()==0?'女':'男'}"></td>
<td th:text="${emp.getDepartment().getDepartmentName()}"></td>
<td th:text="${#dates.format(emp.getBrith(),'yyyy-MM-dd HH:mm')}"></td>
<td>
<button class="btn btn-sm btn-primary"> 编辑</button>
<button class="btn btn-sm btn-danger"> 删除</button>
</td>
</tr>