抽取公共部分：

使用

<div th:fragment="copy">将div元素抽取出来</div>

2.插入公共部分：

//insert的作用是插入
<div th:insert="~{抽取的页面名称::copy}"

3.其他效果：

//三种引入公共片段的方法：
//insert:将公共片段整个插入到声明引入的元素中
//replace:直接把声明引入的元素直接替换成公共片段
//include:将被引入的片段内容包含进声明元素中

4.声明公共元素的方式：
还可以使用选择器selector:

<div id="copy"></div>

抽取并插入：

<div th:replace="~{抽取的页面名称::#copy}"></div>

5.公共部分的处理：
若是有模板页面，建议将模板页面中要抽取的所有公共部分单独取出（设为template.html），方便改动以及加工，例如此次毕设要用到的layui前端模板
今后若是新增页面需要用到模板中的公共部分，即可通过

//标记模板名中的公共部分
<div th:fragment="sidelist"></div>

//将其抽取植入新页面
<div th:replace="~{tempate::sidelist}"></div>

6.高亮点击按钮：
可以使用thymeleaf中的判断语法${}：

//1.重定义元素的class:
<a class="xxx active" th:class="${ActiveUri=='请求的uri(为判断当前用户是否点击了该按钮)'?'xxx active':'xxx'}" th:href="@{/请求的uri}"></a>

//其他引入改公共部分的地方须添加：
<div th:replace="~{tempate::sidelist(ActiveUri='请求的uri')}"></div>

查询功能(Read)：

第一步：选择发起查询请求的按钮（get方式）为其配置链接：

th:href=“@{/请求的URI(emps)}”

第二步：在后端响应前端的request（请求查询员工信息）添加相应的controller类

第三步：将controller类实例化
1.加入@Getmapping（/请求的URI(emps)）注解（表示从前端获取到第一步的配置）
2.接着引入后端数据处理的dao类并实例化对象实现其中的查询方法
3.获取查询数据（记得之前加入@Autowirde注解）

第四步：将得到的数据放在请求域中：
1.在controller类的方法中加入Model类的实例化Model model（记为请求域）
视频中提供的思路：
将后端传来的信息存放在collection容器中

model.addAttribute("请求Uri)",对象(内部存储着后端返回的数据))；

3.return“/响应前端请求后返回页面对应的相对地址”（ex：emp/index）

第五步：前端将数据写入
例子：

<table>
<thead>
<th>name</th>
<th>xxx</th>
....
</thead>
<tbody>
//${}指取得前端发出的uri请求在后端得到的响应值（指返回的对象），将其遍历赋值给emp
        <tr th:each="emp:${Uri请求}">
//用th:text方式将td标签内部的文本替换为emp的名称（此处的emp相当于后端的员工employee对象）
             <td th:text="${emp.GetName()}"></td>
             <td th:text="${emp.Getxxx()}"></td>
              ...
        </tr>
</tbody>
</table>

添加功能(Create):

第一步：查询界面添加一个增加按钮，为其加入get请求的uri

  <a class="btn" th:href="@{/emp}">添加</a>

第二步：在后端的controller中声明一个方法来响应该请求，并跳转至添加页面：

 @GetMapping("/emp")
public String Add()
{
//返回至添加页面
      return "xxx/add";
}

第三步：编写添加页面，并将其放入对应的xxx文件夹下

第四步：考虑实际情况，有时候有的添加页面也需要从后端传入数据（例如视频中所讲的需要在后端获取到所有的部门信息，将其作为选择项以供员工选择）：
因此，还应对controller中的Add方法进行一个完善：

 //从Dao，Information package中获取部门信息：
  @GetMapping("/emp")
public String Add(Model model)
{
//返回至添加页面
Collection<Deparment> depatments= depatmentDao.getDepartments();
model.addAttribute("depts",depatments);//此处的depts可自己命名，指往前端获取的后端数据的一个容器
      return "xxx/add";
}

紧接着，需要对前端add页面相应部分进行遍历以获取传入的值

<select>
//注意，此时添加完员工后，还需向数据库中提交信息，因此还应设置value值
 <option th:each="dept:${depts}" th:text="${dept.GetdepartmentName()}" th:value="${dept.GetdepartmentValue()}"></option>
</select>

第五步：添加员工，首先明确添加在点击添加按钮后，客户端会向服务端发送post请求，因此，应该在form表单上注明post请求，以及uri请求：

<form th:action="@{/addemp}" method="post">
xxx
xxx
...
</form>

第六步：后端controller类中添加响应方法：

@PostMapping("/addemp")
public String addEmployee(Employee employee)//自动将请求对象与入参对象绑定，但要注意使用一样的名称
{  
  // 使用后端dao方法将前端数据的载体对象employee的值传入数据库中即可  
  employeedao.insert(employee);
    //该方法除了要满足响应前端的post请求外，还应该注意响应后将页面跳转至其他界面，因此要使用redirect重定向
  return "redirect:/emps"//此处是视频讲解中所使用的重定向  表示重定向到emps请求，既再次到达员工列表界面，但再发送重定向时，可以理解为再次发送了emps的get请求，因此再次到达员工列表界面时，界面会刷新
}

注意前端表单中的name属性内的属性名应该与后端对应属性的属性名一致

编辑（修改）功能（Update）：

功能大体上分为两步：

第一步是跳转至员工信息页面

第二步在信息页面修改成功后将修改后的值在前，后端更新

第一步：点击修改按钮，查出对应员工信息进行信息回显

uri请求设置为：change/员工id

方式：Get

//使用拼串的方式将完整的uri请求发送给后端，员工id可使用查询员工时传入前端的employee对象
 <a class="btn" th:href="@{/change/}+${emp.id}">编辑</a>

第二步：在后端controller类中增加响应修改请求的方法：
1.先跳转至修改页面，查出对应员工，并在页面回显

@GetMapping("/change/{id}")
public String changePage(@PathVariable("id") Integer id,Model model)
{
//回显时记得将部门的信息也调回：
      Collection<Deparment> depatments= depatmentDao.getDepartments();
      model.addAttribute("depts",depatments);

//通过id得到数据库中对应的员工信息
      Employee employee=employeedao.get(id);
      model.addAtribute("change",employee);
//回到修改页面
return "xxx";
}

2.在前端修改页面处，应显示原来信息

//在输入框中：
<input th:value="${change.GetName()}">
//在选择按钮的input元素中加入：
<input class="form-check-input" type=radio values="男" th:checked="${change.sex=="男"}">
<input class="form-check-input" type=radio values="女" th:checked="${change.sex=="女 "}">
//多选框中：
<select>
<option th:select="${响应修改请求所传入的属性}==${当前页面遍历的属性}">
</select>

3.视频中由于使用的是修改添加同一个页面，因此出现问题，我使用两个页面来响应两个请求，但是还是将视频中的内容做个笔记：

问题关键是当前页面需要进行判断当前到底是修改页面还是添加页面

解决方案：由于修改时回传了两个对象：修改的员工的对象 + 部门对象（用于显示多选框）

而添加时只回传了一个部门对象

因此：

//在value中进行判断即可
<th:value="${change!=null}?${change.xxx}">

4.点击按钮发送put请求修改数据
加入

//将该input标签放入form表单中
<input type="hidden" name="_method" value="put" th:if="${change!=null}"/>

5.后台controller类添加响应put请求

@PutMapping("/change")
//将修改的对象加入
public String change(Empolyee employee)
{
    //修改完成后重定向到员工列表页面
    employeeDao.update(employee);
    renturn "redirect:/emps"
}

由于视频中的员工对象有id属性且为自增属性，不会出现在员工信息的显示页面，故无法传入，因此在修改时也应该将对应的id也返回,加入

<input type="hidden" name="id" th:if="${change!=null}" th:value="${change.id}"/>

删除功能（Delete）

点击删除按钮即可删除信息
向后台发起Delete请求
前端：

<form  method="post" id="deleteform">
<input type="hidden" name="_method" value="delete"/>
<button th:attr="delete_uri=@{/emp/}+${emp.id}" type="submit" class="btn">删除</button>
</form>

后端:

@DeleteMapping("/delete/{id}")
public String Delete(@PathVariable("id") Integer id)
{
    employeeDao.delete(id);
    return "redirect:/emps";
}

造成的结果就是页面很难看....因为每有一个删除按钮，都会有一个form表单
因此优化：使用js
1.给删除按钮一个delete类,将上述表单等其他元素放在外面

<button type="submit" class="btn delete">删除</button>

2.js中绑定click事件：

<script>
$(".delete").click(function()
{
$("#deleteform").attr("action",$(this).attr("delete_uri")).submit();
return false;
});
</script>

2020-04-03