Thymeleaf 结合SpringBoot 的 CRUD-员工列表
- 实验要求:
1)、RestfulCRUD:CRUD满足Rest风格;
利用2)、实验的请求架构;
URI: /资源名称/资源标识
普通CRUD(uri来区分操作) | RestfulCRUD | |
---|---|---|
查询 | getEmp | emp---GET |
添加 | addEmp?xxx | emp---POST |
修改 | updateEmp?id=xxx&xxx=xx | emp/{id}---PUT |
删除 | deleteEmp?id=1 | emp/{id}---DELETE |
2)、实验的请求架构
实验功能 | 请求URI | 请求方式 |
---|---|---|
查询所有员工 | emps | GET |
查询某个员工(来到修改页面) | emp/{id} | GET |
来到添加页面 | emp | GET |
添加员工 | emp | POST |
来到修改页面(查出员工进行信息回显) | emp/1 | GET |
修改员工 | emp | PUT |
删除员工 | emp/{id} | DELETE |
- 这里主要展示添加和修改两个动能~
- 页面展示:
案例中将员工添加和员工修改(编辑)的页面合二为一,即使用同一个add.html 页面来显示
- 通过employee是否为空进行判断是添加操作还是修改操作
-
th:if="${employee!=null}"
-
th:value="${employee!=null}?${employee.lastName}"
<!--引入侧边栏-->
<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<!--需要区分是添加还是修改-->
<form th:action="@{/emp}" method="post">
<!--若是修改:点击修改,发送put请求,同时携带id传到后端controller-->
<input type="hidden" name="_method" value="put" th:if="${employee!=null}">
<!--th:if成立,才会生成id-->
<input type="hidden" name="id" th:if="${employee!=null}" th:value="${employee.id}">
<div class="form-group">
<label>LastName</label>
<input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${employee!=null}?${employee.lastName}">
</div>
<div class="form-group">
<label>Email</label>
<input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${employee!=null}?${employee.email}">
</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" th:checked="${employee!=null}?${employee.gender==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" th:checked="${employee!=null}?${employee.gender==0}">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<!--每一个th:each都会生成一个option标签-->
<option th:value="${dept.id}" th:each="dept:${departments}" th:text="${dept.departmentName}" th:selected="${employee!=null}?${employee.department.id == dept.id}">1</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<!--使用date工具-->
<input name="birth" th:value="${employee!=null}?${#dates.format(employee.birth, 'yyyy-MM-dd')}" type="text" class="form-control" placeholder="zhangsan">
</div>
<button type="submit" class="btn btn-primary" th:text="${employee!=null}?'修改':'添加'">添加</button>
</form>
-
html代码解析
-
需要注意一点的是:修改操作,需要通过
type="hidden"
来发送put请求,同时携带id传到后端controller
-
<!--若是修改:点击修改,发送put请求,同时携带id传到后端controller--> <input type="hidden" name="_method" value="put" th:if="${employee!=null}"> <!--th:if成立,才会生成id--> <input type="hidden" name="id" th:if="${employee!=null}" th:value="${employee.id}">
- 配置文件也需要添加
spring.mvc.hiddenmethod.filter.enabled=true
才能确保生效。
-
我存在的问题如下:
- 进行员工修改时,开始用的是重定向
发现500错误,提示重定向"redirect:/emps"失败,于是采用页面跳转的方式,跳转到 templates/emp/list.html 页面,就相当于多做了一遍查询。return "redirect:/emps";
//员工修改
@PutMapping("/emp")
public String updateEmp(Employee employee,Model model) {
System.out.println("修改之后的员工:" + employee);
ed.save(employee);
Collection<Employee> employees = ed.getAll();
model.addAttribute("emps", employees);
return "emp/list";
}
- 另附上
的代码:查询所有员工返回列表页面
-
//查询所有员工返回列表页面 @GetMapping("/emps") public String list(Model model) { Collection<Employee> employees = ed.getAll(); model.addAttribute("emps", employees); //thymeleaf默认会拼串 classpath:/templates/ .html return "emp/list"; }