SpringBoot源码学习之路（九、Web实战详解（RESTful API与Thymeleaf引擎模板实现CRUD））

RESTful API实现员工列表

一、RESTful API与普通API对比。

我们要实现对于员工对象（emp）进行CRUD操作。RESTful架构需要满足：
①、URI： /资源名称/资源标识。
②、 HTTP请求方式（Get、Post、Put、Delete）区分对资源CRUD操作。
对比：

URL 普通API（uri来区分操作） Restful API（用请求方式区分操做）
查询 getEmp emp（GET）
添加 addEmp?xxx emp（POST）
修改 updateEmp?id=xxx&xxx=xx emp/{id}（PUT ）
删除 deleteEmp?id=1 emp/{id}（DELETE）
二、实验的请求架构(RESTful风格)。

实验功能请求URI 请求方式
查询所有员工 emps GET
查询某个员工(来到修改页面) emp/1 GET
来到添加页面 emp GET
添加员工 emp POST
来到修改页面（查出员工进行信息回显） emp/1 GET
修改员工 emp PUT
删除员工 emp/1 DELETE
三、 thymeleaf公共页面元素抽取。

我们在在使用thymeleaf模板引擎的时候一般可以将所有公共片段抽取到一个单独的html文件，然后在各个页面中分别引入。

1、使用thymeleaf抽取公共html片段：
<div th:fragment="copyRight"> ©Right; 2018 The Good Thymes Virtual Grocery
</div>
这样就将copyRight的信息抽出座位一个公共页面；

2、引入公共html片段
可以在html元素内使用如下三种方式引入：

命令作用
th:insert 将公共片段整个插入到声明引入的元素中
th:replace 将声明引入的元素替换为公共片段
th:include 将被引入的片段的内容包含进这个标签中
案例：如下引入公共模块
引入方式:(copyRight为公共片段名称) <div th:insert="footer :: copyRight"></div> <div th:
replace="footer :: copyRight"></div> <div th:include="footer :: copyRight"></div
>
生成效果如下：
<div> <footer> ©Right; 2018 The Good Thymes Virtual Grocery </footer> </div
> <footer> ©Right; 2018 The Good Thymes Virtual Grocery </footer> <div>
©Right; 2018 The Good Thymes Virtual Grocery</div>
同时引入片段的时候也可以传入参数：
 <nav class="col-md-2 d-none d-md-block bg-light sidebar" id=
"sidebar"> <div class="sidebar-sticky"> <ul class="nav flex-column"> <li class=
"nav-item">  <a class="nav-link active"
th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}" href="#"
th:href="@{/main.html}"> <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-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline
points="9 22 9 12 15 12 15 22"></polyline> </svg> Dashboard <span class=
"sr-only">(current)</span> </a> </li> </ul> <div> </nav>  <div
th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
三、 Thymeleaf实现员工列表CRUD

（1）、对于员工列表遍历：
<table class="table table-striped table-sm"> <thead> <tr> <th>#</th>对于员工列表遍历： <
th>lastName</th> <th>email</th> <th>gender</th> <th>department</th> <th>birth</
th> <th>操作</th> </tr> </thead> <tbody> <tr th:each="emp:${emps}">
 <td th:text="${emp.id}"></td> <td>[[${emp.lastName}]]</td> <
td th:text="${emp.email}"></td> <td th:text="${emp.gender}==0?'女':'男'"></td> <td
th:text="${emp.department.departmentName}"></td>  <td
th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td> <td> <a class=
"btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a> <button th:attr=
"del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
</td> </tr> </tbody> </table>
（2）、员工添加
<form> <div class="form-group"> <label>LastName</label> <input type="text"
class="form-control" placeholder="zhangsan"> </div> <div class="form-group"> <
label>Email</label> <input type="email" class="form-control" placeholder=
"zhangsan@atguigu.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
> <div class="form-group"> <label>Birth</label> <input type="text" class=
"form-control" placeholder="zhangsan"> </div> <button type="submit" class="btn
btn-primary">添加</button> </form>
注意上面对表单中的Date格式需要使用：yyyy/MM/dd。
原因在于：SpringMvc自动配置默认日期是按照yyyy/MM/dd的方式转换（当输入的不是就报错）；
其自动配置源码如下：
@Bean @ConditionalOnProperty( prefix = "spring.mvc", name = {"date-format"} )
public Formatter<Date> dateFormatter() { return new DateFormatter(this
.mvcProperties.getDateFormat()); }public MessageCodesResolver
getMessageCodesResolver() { if (this
.mvcProperties.getMessageCodesResolverFormat() !=null) {
DefaultMessageCodesResolver resolver =new DefaultMessageCodesResolver();
resolver.setMessageCodeFormatter(this
.mvcProperties.getMessageCodesResolverFormat());return resolver; } else { return
null; } }
所以当需要更改时，就在配置文件中指定:
spring.mvc.date-format=yyyy-MM-dd
此时就会以yyyy-MM-dd替换默认的yyyy/MM/dd。

（3）、修改员工
直接拿添加的页面来更改，做成公用的页面：（需要注意post请求转put和delete）
 <form th:action="@{/emp}" method="post">
  <input type="hidden" name="_method"
value="put" th:if="${emp!=null}"/> <input type="hidden" name="id" th:if=
"${emp!=null}" th:value="${emp.id}"> <div class="form-group"> <label>LastName</
label> <input name="lastName" type="text" class="form-control" placeholder=
"zhangsan" th:value="${emp!=null}?${emp.lastName}"> </div> <div class=
"form-group"> <label>Email</label> <input name="email" type="email" class=
"form-control" placeholder="zhangsan@atguigu.com" th:value=
"${emp!=null}?${emp.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=
"${emp!=null}?${emp.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="${emp!=null}?${emp.gender==0}">
<label class="form-check-label">女</label> </div> </div> <div class="form-group">
<label>department</label> <select class="form-control" name="department.id"> <
option th:selected="${emp!=null}?${dept.id == emp.department.id}" th:value=
"${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
</select> </div> <div class="form-group"> <label>Birth</label> <input name=
"birth" type="text" class="form-control" placeholder="zhangsan" th:value=
"${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"> </div>
 <button type="submit" class="btn btn-primary" th:text=
"${emp!=null}?'修改':'添加'">添加</button> </form>
（4）、删除员工
<tr th:each="emp:${emps}"> <td th:text="${emp.id}"></td> <td>
[[${emp.lastName}]]</td> <td th:text="${emp.email}"></td> <td th:text=
"${emp.gender}==0?'女':'男'"></td> <td th:text="${emp.department.departmentName}">
</td> <td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td> <td> <
a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
 <button th:attr="del_uri=@{/emp/}+${emp.id}"
class="btn btn-sm btn-danger deleteBtn">删除</button> </td> </tr> <script> $(
".deleteBtn").click(function(){ //删除当前员工 $("#deleteEmpForm").attr("action",$(
this).attr("del_uri")).submit(); return false; }); </script>
到此，整体功能就ok了。

参考项目：【Git\repository\SpringBoot\prooject\com.atguigu\spring-boot-04-web-restfulcrud】

热门工具换一换

SpringBoot源码学习之路（九、Web实战详解（RESTful API与Thymeleaf引擎模板实现CRUD） ）