开发者学堂课程【SpringBoot快速掌握 - 核心技术：【实验】-员工列表-公共页抽取 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/612/detail/9250
【实验】-员工列表-公共页抽取
内容介绍
一、员工列表
二、三种引入功能片段的 th 属性
三、公共页抽取示例
一、员工列表
前边说了实验的一些要求，现在就根据这些要求来完成第一个功能，员工列表。先登录来到后台的主面板界面，希望点击 Customers 来查询所有员工的信息，点击 Customers 后，查出所有员工来到列表页面。列表页面在 restful-crud- 实验 /list 里边，可以进行增量检查。
来到主页面的代码编辑对话框 dashboard.html 里。找到 Customers 发请求。
Ctrl+f 查找，Customers ，将其改成中文：员工管理，修改超链接。
……
</1i>
<li class="nav-item" >
<a class="nav-link"href="#" th : href="@{/emps}">
……
</svg>
员工管理
</a>
</1i>
上节课，已经修改成@{/}的方式进行路径引入，引入名称空间。发送 emps 请求，查询所有员工用 get 方式。
在 controller 文件下新建 EmployeeController 文件，用它来处理和员工相关的请求。（实例操作看内容：三、公共页抽取示例）
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 等属性进行引入，可以不用写~{} :
行内写法可以加上: [[~{}]];[(~{})];
二、三种引入功能片段的th属性
th:insert :将公共片段整个插入到声明引入的元素中
th:replace :将声明引入的元素替换为公共片段
th:include :将被引入的片段的内容包含进这个标签中
例：
<footer th:fragment-"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>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
三、公共页抽取示例
1、发出“查询所有员工”请求
先登录到 Dashboard 后台主页面。点击 Cuctomers 查询所有员工，来到所有员工的列表页面，restul-crud- 实验里边的 list.html 文件，打开，在 Section title 列表页面里可以对它进行检查。
回到 main.html 主页面。点击 Cuctomers 来到 dashboard.html ，发出查询所有员工的 emps 请求是 GET 方式。编辑：
</1i>
<1i class="nav-item">
<a class=" nav- link" href= "#" th:href="@{/emps}">
<svg ……
</svg>
员工管理
</a>
</1i>
2、更改主页侧边栏的 Cuctomers 为“员工管理”
在 controlle 里新建 Create New Class ，名为 EmployeeController 。
当然，所有与员工有关的页面，都放在 templates 下的 emp 文件夹里，新建 emp文件，将 list.html 放入到 emp 里。
在 EmployeeControllerjava 里编辑：
package com. atguigu.springboot.controller;import org.springframework.stereotype.Controller;import com. atguigu. springboot . dao. EmployeeDao;import com. atguigu. springboot . entities . Employee;import org . springframework . beans . factory . annotat ion . Autowired;import org. springframework. stereotype .Controller; import org . springframework . ui .Model;import org . springframework . web . bind. annotation . GetMapping;import java. util.Collection;@Controllerpublic class EmployeeController {@AutowiredEmployeeDao employeeDao;
//查询所有员工返回列表页面
@GetMapping("/emps")public String list(Model model){Collectionemployees=employeeDao.getAll();
//放在请求域中
model.addAttribute(attributeName:"emps",employees);
// thymeleaf默认就会拼串
// classpath:/templates/xxxx. htmlreturn "emp/list";}}
访问) localhost:8080/crud/emps 输入登录名密码，进入主页面localhost:8080/crud/main.html 看到侧边栏的 Cuctomers 被改变成员工管理。点击员工管理，进入 localhost:8080/crud/emps 页面，看到 Company name 标题栏，侧边栏等还未改变。仍旧可以抽取。
3、在 dashboard.html 页面抽取 topbar
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md- nowrap p-0" th:fragment= "topbar">
……
来到 list.html 页面， 的 标签可以删掉了，改为引入：
<body>
<!--引入抽取的topbar-->
<!--模板名:会使用thymeleaf的前后缀配置规则进行解析-->
<div th:replace="dashboard: :topbar"></div>
刷新 localhost:8080/crud/emps 页面。可以看见原来的标题标签 Company name 变为 admin 。说明抽取没有问题。
同样，在 dashboard.html 里， 的 标签页可以抽取。
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
……
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id= "sidebar">
<div class="sidebar-sticky">
……
回到 list.htm，同样将
<div class=" container-fluid">
<div class="row">
后边的 标签删除。继续编辑:
……
<div class="container-fluid">
<div class="row">
<!--引入侧边栏-->
<div th:replace= "~{dashboard: :#sidebar}"></div>
……
然后，刷新，看到侧边栏的 Cuctomers 变成 员工管理。引入抽取成功。
