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">
    &copyRight; 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>
       &copyRight; 2018 The Good Thymes Virtual Grocery
    </footer>
</div>

<footer>
    &copyRight; 2018 The Good Thymes Virtual Grocery
</footer>

<div>
    &copyRight; 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">
                <!--公共模块被引入时需要对是否有传参数【activeUri】做判断-->
                <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>

                                    <!--thymeleaf格式化日期显示-->
                                    <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="[email protected]">
    </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的方式转换（当输入的不是就报错）；
其自动配置源码如下：

扫描二维码关注公众号，回复： 2717209 查看本文章

        @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">
    <!--发送put请求修改员工数据-->
    <!-- 1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的）
         2、页面创建一个post表单
         3、创建一个input项，name="_method";值就是我们指定的请求方式
    -->
    <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="[email protected]" 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>
        <!--url上直接使用thymeleaf表达式实现带参数；-->
        <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】