SpringBoot基础--（实验）员工列表和thymeleaf公共页面元素抽取以及实现高亮效果

实验的请求架构;

实验功能	请求URI	请求方式
查询所有员工	emps	GET
查询某个员工(来到修改页面)	emp/1	GET
来到添加页面	emp	GET
添加员工	emp	POST
来到修改页面（查出员工进行信息回显）	emp/1	GET
修改员工	emp	PUT
删除员工	emp/1	DELETE

员工列表

1、在dashboard.html 文件中将Customer项得超链接改为themleaf渲染

<a class="nav-link" th:href="@{/emps}">

2、在控制文件中新建EmployeeController.java 对链接进行处理
当点击以上那个超链接时，就会对该超链接进行拼串然后跳转到指定页面

import java.util.Collection;

@Controller
public class EmployeeController {
//    注入EmployeeDao 类
//    该类中的getAll()方法可以获取员工列表
    @Autowired
    EmployeeDao employeeDao;

    @GetMapping("/emps")
    public String list(Model model) {
//        获取员工列表
        Collection<Employee> collection = employeeDao.getAll();
//        放到请求域中
        model.addAttribute("emps", collection);
//        返回字符串，thymeleaf会自动进行拼串，classpath/resource/template/XXX.html
        return "emp/list";
    }
}

编写完以上程序，我们在点击Customer该项时，就会跳转到list.html文件

公共样式抽取

1、抽取公共片段
<div th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</div>

2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名

3、默认效果：
insert的公共片段在div标签中
如果使用th:insert等属性进行引入，可以不用写~{}：
行内写法可以加上：[[~{}]];[(~{})]；

三种引入公共片段的th属性：

th:insert：将公共片段整个插入到声明引入的元素中

th:replace：将声明引入的元素替换为公共片段

th:include：将被引入的片段的内容包含进这个标签中

<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

引入方式
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

效果
<div>
    <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
</div>

<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

引入片段的时候传入参数：
动态的赋值class属性，当被选中时添加active 类，没被选中取消

<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
            <!--通过三元问号表达式来判断有没有被选中，通过传过来的参数即
            若变量acticeUri 是main.html，添加active类，高亮，否则反之-->
                <a class="nav-link active"
                   th:class="${activeUri=='main.html'?'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>
            </li>

<!--引入侧边栏;传入参数-->
<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

遍历员工信息显示

我们在设置控制跳转到员工信息显示界面时（EmployeController.java），将员工信息存了请求域中，我们可以通过请求域中的emps值来遍历输出员工的信息

//    注入EmployeeDao 类
//    该类中的getAll()方法可以获取员工列表
    @Autowired
    EmployeeDao employeeDao;

    @GetMapping("/emps")
    public String list(Model model) {
//        获取员工列表
        Collection<Employee> collection = employeeDao.getAll();
//        放到请求域中
        model.addAttribute("emps", collection);
//        返回字符串，thymeleaf会自动进行拼串，classpath/resource/template/XXX.html
        return "emp/list";
    }

遍历

<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>
<!--使用dates.format来格式化日期-->
	<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>