版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/rubulai/article/details/82750902
1、Restful风格请求
请求的URI通过资源名称、资源标识以及HTTP请求的方式对资源进行CRUD操作,例如: /资源名称/{资源标识}
2、员工列表
html:
<a class="nav-link" href="#" 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>
Controller:向页面传递数据可以使用Model、Map或者ModelMap
@Controller
public class EmployeeController {
@Autowired
private EmployeeDao employeeDao;
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
model.addAttribute("emps",employees);
return "emp/list";
}
}
页面展示数据:
<table class="table table-striped table-sm">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>性别</th>
<th>部门</th>
<th>生日</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="emp:${emps}">
<td th:text="${emp.id}"></td>
<td>[[${emp.lastName}]]</td>
<td th:text="${emp.email}"></td>
<td th:text="${emp.gender} == 0 ? '女' : '男'"></td>
<td th:text="${emp.department.departmentName}"></td>
<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd')}"></td>
<td>
<button class="btn btn-sm btn-primary">编辑</button>
<button class="btn btn-sm btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
利用th:each遍历数据,${}获取后台传递过来的数据,也可以使用thymeleaf内置的对象#dates格式化时间
效果:
3、Thymeleaf抽取公共页面
①抽取公共片段:使用th:fragment属性
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
②引入公共片段:~{templatename::selector}:模板名::选择器或~{templatename::fragmentname}:模板名::片段名,如果使用th:insert等属性进行引入,可以不用写~{},但行内写法必须加上~{}:[[~{}]]、[(~{})]
有三种引入方式:
th:insert:将公共片段整个插入到声明引入的元素中
<div th:insert="footer :: copy"></div>
效果:
<div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>
th:replace:将声明引入的元素替换为公共片段
<div th:replace="footer :: copy"></div>
效果:
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
th:include:将被引入的片段的内容包含进引入元素
<div th:include="footer :: copy"></div>
效果:
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
4、参数化的抽取公共页面:向引入的公共片段传入参数,然后在公共片段中用${}取出传过来的参数进行判断实现一些逻辑等
引入公共片段时:
<div th:replace="commons/bar::#sidebar(activeUri='main')"></div>
<div th:replace="commons/bar::#sidebar(activeUri='list')"></div>
在公共片段中获取引入时传的参数:
<a class="nav-link active" th:class="${activeUri == 'main' ? 'nav-link active':'nav-link'}" href="#" 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>