Spring 全家桶之 Spring Boot 2.6.4（六）- Web Develop（Part C）

四、Employee List 开发

跳转至Employee List 页面

在templates目录下增加employee文件夹，将list.html页面放入该文件夹下。在controller包中新建EmployeeController，增加list方法来获取Employee列表，然后返回list.html页面

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeMapper employeeMapper;

    @GetMapping("/list")
    public String list(Model model){
        Collection<Employee> list = employeeMapper.getAll();
        model.addAttribute("list", list);
        return "employee/list";
    }
}

将dashboard.html页面的Employee List超链接改为/list

<li class="nav-item">
   <a class="nav-link" href="#" th:href="@{/list}">
      <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>
      Employee List
   </a>
</li>

重新启动应用，登录后点击Employee List

页面跳转到list.html页面，并且无任何错误信息

抽取公共页面

由于list.html和dashboard.html的顶部和侧边栏都是相同的，因此可以将顶部和侧边栏抽取为公共页面

Thymeleaf官网中 8 Template Layout 提到了如何抽取公共页面

首先要在index.html的顶部导航栏设置一个fragment

然后在list.html页面通过th:insert标签来引入前面设置的fragment

重新启动应用 页面顶部导航栏能够正确显示

页面引入方式包括th:insert，共有三种引入方式

• th:insert，将公共片段插入到这个声明引入的元素中
• th:replace，将声明引入的元素替换为公共片段
• th:include，将被引入的片段内容包含到这个标签中

因此需要将insert替换为replace

抽取侧边栏时，给侧边栏设置一个id为selector

引入时通过id选择器引入公共片段

重新启动应用，查看页面顶部导航栏和侧边栏

修改过后，侧边栏能够正常显示

抽取公共片段到单独页面

上面定义的公共片段还是在具体的页面中，可以将公共页面，顶部和侧边栏单独抽取到一个html页面中，降低耦合

新建一个bar.html，将顶部导航栏和侧边栏拷贝到该页面中

在dashboard.html页面和list.html页面引入公共片段

侧边目录高亮

当进入到list.html页面时，左侧的目录并没有高亮显示，想要解决在具体页面高亮对应的目录需要在公共片段进行变量值判断，每个变量引用时都设置一个该片段独有的值。关于变量可以查看thymeleaf官方文档 8.2 Parameterizable fragment signatures

首先在公共片段目录增加变量判断，如果activeUri为list，就高亮，否则不高亮显示

list页面设置的activeUri变量的值为list

dashboard页面设置的activeUri的值为dashboard

重新启动应用 每个页面对应的目录都可以高亮显示

显示员工数据列表

使用for循环取出list列表中的全部属性，员工的gender使用0和1表示，这里可以进行判断，用男和女代替0和1

重启应用，查看员工列表

五、Add Employee

进入Add Employee 页面

Add Hero 增加超链接，跳转至添加页面

拷贝list.html页面并重命名为add.html,从Bootstrap [Components] (getbootstrap.com/docs/4.0/co…) 拷贝第二个表单到add.html页面

在EmployeeController增加视图映射，点击按钮跳转到add.html页面

@GetMapping("/employee")
public String employee(Model model){
    return "employee/add";
}

重新启动应用，点击Add按钮 能正常跳转至页面

修改添加表单为如下：

<form>
   <div class="form-group">
      <label>LastName</label>
      <input type="text" class="form-control" placeholder="loki">
   </div>
   <div class="form-group">
      <label>Email</label>
      <input type="email" class="form-control" placeholder="loki@asgard.com">
   </div>
   <div class="form-group">
      <label>Gender</label><br/>
      <div class="form-check form-check-inline">
         <input class="form-check-input" type="radio" name="gender"  value="1">
         <label class="form-check-label">男</label>
      </div>
      <div class="form-check form-check-inline">
         <input class="form-check-input" type="radio" name="gender"  value="0">
         <label class="form-check-label">女</label>
      </div>
   </div>
   <div class="form-group">
      <label>Department</label>
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
   <button type="submit" class="btn btn-primary">添加</button>
</form>

修改employee方法，在跳转至add.html页面前需要将部门信息查出来在下拉框中展示

@GetMapping("/employee")
public String employee(Model model){
    Collection<Department> departments = departmentMapper.getDepartments();
    model.addAttribute("departments", departments);
    return "employee/add";
}

在页面下拉框中取出部门信息

重启应用

执行 Add Employee

修改form表单提交地址为th:action="@{/add}"，提交方式post，并对每个input标签增加name属性

在EmployeeController中的add()方法中调用employeeMapper的save()方法，保存新增加的Employee对象

@PostMapping("/add")
public String add(Employee employee){
    System.out.println(employee);
    employeeMapper.save(employee);
    return "redirect:/list";
}

重启应用，进入添加页面 点击添加按钮，员工添加成功 控制台打印出提交的员工信息

六、Edit Employee

来到信息修改页面

点编辑按钮来到添加表单，添加和修改都是用add.html，同时回显要修改的员工信息，对编辑按钮增加超链接

<a class="btn btn-sm btn-primary" th:href="@{/edit/}+${emp.id}">EDIT</a>

在add.html的input标签中使用th:value="${emp.latName}"来回显数据，对于单选按钮回显数据使用th:checked="${emp.gender==1}"，表达式为True就选中，否则就不会选中

选中部门使用th:selected

如果循环到的部门的id与当前员工的部门id一致就显示该部门的name

重启应用，点击EDIT按钮 可以正常回显数据

但是在list.html页面点击添加按钮，服务端后台报错

这是应为点击添加来到页面时，并没有传递employee对象，空对象获取lastName属性值，所以会报错，因此需要区分是员工修改还是员工添加，只有在employee对象不为空的时候才是编辑页面，才会进行数据回显

重新启动，点击添加按钮 页面能正常显示。

执行修改操作

对员工信息修改需要发送PUT请求，需要在表单上对请求方式进行修改

<input type="hidden" name="_method" value="put" th:if="${emp!=null}">

配置文件增加配置

spring.mvc.hiddenmethod.filter.enabled=true

EmployeeController中增加方法

@PutMapping("/add")
public String edit(Employee employee){
    System.out.println(employee);
    employeeMapper.save(employee);
    return "redirect:/list";
}

重启应用，进入编辑界面，编辑并提交数据 此时控制台打印出的employee对象中的id为空，因此需要在form添加中添加一个隐藏的input框，将id传递到服务端，如下图所示

重新启动应用，再次测试

修改成功

七、Delete Employee

在EmployeeController中增加删除方法方法

@DeleteMapping("/delete/{id}")
public String delete(@PathVariable("id") Integer id){
    employeeMapper.delete(id);
    return "redirect:/list";
}

list.html页面需要通过js来提交Delete方式的请求，删除按钮修改为如下

<td>
   <a class="btn btn-sm btn-primary" th:href="@{/edit/}+${emp.id}">EDIT</a>
   <button th:attr="del_uri=@{/delete/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">DELETE</button>
</td>

在main标签同级下增加提交的表单

<form id="deleteEmpForm"  method="post">
   <input type="hidden" name="_method" value="delete"/>
</form>

增加js脚本，提价表单

<script>
   $(".deleteBtn").click(function(){
      //删除当前员工的
      $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
      return false;
   });
</script>

重新启动页面，点击删除按钮

成功删除