增：增加员工

  1. 导入一个新的页面侧边栏和导航栏可以直接使用commons中的组件
  2. 去模板网站：Forms · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网找到你需要的模板添加在新的页面中
  3. 在controller层编写跳转页面首先get与post请求这叫riset风格
  1. GetMapping用来接收list中的页面请求，来跳到刚刚新建的一个页面
  2. PostMapping用来接收新建页面的上传用户请求，然后重定向去list页面
  1. 小结总结
  1. 不使用ajax发送后台请求时建议吧所有的字段使用name往后端传输数据
  2. 在添加那种多个数据绑定在一起的数据时一定要把绑定的数据一起同步绑定在前端，不然就会给你报一个400然后你还莫名其妙，就比如你在上传员工的时候员工需要有相对应的id，这个是需要一起实时传过去的 <!-- 这里th:each:${dept:${department}这里用java的思想来解释解释new了一个对象循环对象内的数据} th:text="${dept.getDepartmentName()}循环遍历出来的数据后进行显示 th:value="${dept.getId()}数据传入后台不是传的字符而是数字id所以默认值value默认值需要是它所代表的的id Department是一个对象所以在调用时要带上name="depatment.id" 对象中的id 
1. -->
<select class="form-control"  name="depatment.id" id="exampleFormControlSelect1">
<option th:each="dept:${department}"th:text="${dept.getDepartmentName()}"th:value="${dept.getId()}"></option>
  1. 时间显示与上传在springboot中时间格式为yyyy/MM/dd但一般来说我们在页面上看到的时间格式为yyyy-MM-dd，这时我们需要在配置中更改时间 spring.mvc.date-format=yyyy-MM-dd

删：删除用户信息

知识点

1.后台逻辑

String.Remove 方法：返回一个新字符串，它相当于从当前字符串删除了指定数量的字符。

2.在前台写入删除按钮，把删除的请求发至后端，注：前端发送删除请求到后端的时候需要携带一个id作为删除请求的地位坐标


<a class="btn btn-sm btn-danger" th:href="@{'/delemp/'+${emp.getId()}}">删除</a>


3.后端接收到前端的请求后调用后台已经写好的的Remove 封装方法，删除后返回至index页面


@GetMapping("/delemp/{id}")
public String delemp(@PathVariable("id") int id,Employee employee){
    employeeDao.delete(id);
    return "redirect:/emps";
}


改:更改原工信息

流程：

我们要实现员工修改功能，需要实现两步：

  1. 点击修改按钮；跳转至编辑页面，
  2. 显示原数据，修改完成后跳转至列表页面

技术要点：

  1. 从list展示员工页面跳转至新的修改原工页面（新建页面）
  2. 在controller层进行页面渲染
  1. 在controller层中需要查出原有的员工信息
  1. <!--这里的@{/update(id=${emp.getId()})}意思是在跳转页面的时候带一个getId的参数过去--> <a class="btn btn-sm btn-primary" th:href="@{/update(id=${emp.getId()})}">编辑</a>比较难的小技术点：
    1.<a class="btn btn-sm btn-primary" th:href="@{'/emp/'+${emp.getId()}}"></a>
    编辑按钮处 th:href="@{'/emp/'+${emp.getId()}}"这个拼接 需要注意的是’//‘+这个地方后端直接拒收方法就是/emp/{id}
    2.<input type="hidden" name="id" th:value="${emp.getId()}">
    需要在修改页面的form表单顶部加上这段代码，这段代码的意思是，按照id查询后进行修改，如果不加就会直接变成添加
    3.th:value="${emp.getLastName()}
    要在每段需要发送值的段落中加上一个默认值，不然点击list跳转按钮时将不会携带参数至新的页面
    4.复选框th:checked="${emp.getGender()==1}"
    如性别一栏中添加默认值的方法如文本不同复选框是chexcked
    5.时间th:value="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm')}
    和复选框一样时间与文本也是不同的${#dates.format时间需要加上这个
1. @GetMapping("/emp/{id}")
   public String updentEpl(@PathVariable("id") Integer id, Model model){
  
       Employee employee = employeeDao.getEmployeeById(id);
       model.addAttribute("emp",employee);
  1.   1.在后端需要注意的就是@GetMapping("/emp/{id}")这里前端传至后端是带参数的
    2.(@PathVariable("id")这个参数要往下传，传至这里 Employee employee = employeeDao.getEmployeeById(id);这里的意思是在后台寻找这个参数id返回前端后以这个id去判断修改的用户
    3.<form th:action="@{/emp}" method="post">
    这里把值带去后端后直接找到之前的添加功能保存了值

查：员工页面展示

  1. 抽出页面的公共重复的页面属性，写成组件，核心思想就是封装一个方法，这是模板引擎thymelea或者vun都能做到的一个前端功能
  2. th:fragment="组件名字"
  3. <!--th:insert=~{组件存放位置::你给组件起的名字}--> 
1. <div th:insert="~{commons/commons::topbar}"></div>
  1. 前端循环后台数据
  1. <!--th:each="前端赋值的名字:${后端controller层的映射名}"--> 
1. <tr th:each="emp:${emps}">
  1. <!--添加按钮为接下来的功能做铺垫--> 
1. <button class="btn btn-sm btn-primary">删除</button>
<button class="btn btn-sm btn-danger">编辑</button>
  1. 重点小结
  1. <!--从后端导入用户信息男女时需要在前端进行判断后在显示--> 
1. <td th:text="${emp.getGender()==0?'女':'男'}"></td>
  1. <!--前端在显示时间格式时要跟随大众--> 
1. <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
  1. <!--在导入那种需要绑定的信息时需要把绑定的信息一起传输如按部门id查找部门--> 
1. <td th:text="${emp.depatment.getDepartmentName()}"></td>

退出

退出属于一个小功能，实现步骤 1.编写注销按钮


<a class="nav-link"th:href="@{/user/loginout}">注销</a>


  1. 在后台编写接收并且清除session然后返回页面至首页 @RequestMapping("/loginout") 
1. public String loginout(HttpSession session){
    session.invalidate();
    return "redirect:/index.html";
}

自定义404、500......

1.在templates下建立一个error文件夹

2.html文件已404、500等等命名

3.把文件放在error文件下