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>lastNameth>
                                    <th>emailth>
                                    <th>genderth>
                                    <th>departmentth>
                                    <th>birthth>
                                    <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>LastNamelabel>
        <input type="text" class="form-control" placeholder="zhangsan">
    div>
    <div class="form-group">
        <label>Emaillabel>
        <input type="email" class="form-control" placeholder="[email protected]">
    div>
    <div class="form-group">
        <label>Genderlabel><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>departmentlabel>
        <select class="form-control">
            <option>1option>
            <option>2option>
            <option>3option>
            <option>4option>
            <option>5option>
        select>
    div>
    <div class="form-group">
        <label>Birthlabel>
        <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 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>LastNamelabel>
        <input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
    div>
    <div class="form-group">
        <label>Emaillabel>
        <input name="email" type="email" class="form-control" placeholder="[email protected]" th:value="${emp!=null}?${emp.email}">
    div>
    <div class="form-group">
        <label>Genderlabel><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>departmentlabel>
        <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}">1option>
        select>
    div>
    <div class="form-group">
        <label>Birthlabel>
        <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】