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

Bertha 。 2022-05-19 08:17 191阅读 0赞

## RESTful API实现员工列表 ##

#### 一、RESTful API与普通API对比。 ####

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

<table> 
 <thead> 
  <tr> 
   <th>URL</th> 
   <th>普通API（uri来区分操作）</th> 
   <th>Restful API（用请求方式区分操做）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>查询</td> 
   <td>getEmp</td> 
   <td>emp（GET）</td> 
  </tr> 
  <tr> 
   <td>添加</td> 
   <td>addEmp?xxx</td> 
   <td>emp（POST）</td> 
  </tr> 
  <tr> 
   <td>修改</td> 
   <td>updateEmp?id=xxx&amp;xxx=xx</td> 
   <td>emp/{id}（PUT ）</td> 
  </tr> 
  <tr> 
   <td>删除</td> 
   <td>deleteEmp?id=1</td> 
   <td>emp/{id}（DELETE）</td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 二、实验的请求架构(RESTful风格)。 ####

<table> 
 <thead> 
  <tr> 
   <th>实验功能</th> 
   <th>请求URI</th> 
   <th>请求方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>查询所有员工</td> 
   <td>emps</td> 
   <td>GET</td> 
  </tr> 
  <tr> 
   <td>查询某个员工(来到修改页面)</td> 
   <td>emp/1</td> 
   <td>GET</td> 
  </tr> 
  <tr> 
   <td>来到添加页面</td> 
   <td>emp</td> 
   <td>GET</td> 
  </tr> 
  <tr> 
   <td>添加员工</td> 
   <td>emp</td> 
   <td>POST</td> 
  </tr> 
  <tr> 
   <td>来到修改页面（查出员工进行信息回显）</td> 
   <td>emp/1</td> 
   <td>GET</td> 
  </tr> 
  <tr> 
   <td>修改员工</td> 
   <td>emp</td> 
   <td>PUT</td> 
  </tr> 
  <tr> 
   <td>删除员工</td> 
   <td>emp/1</td> 
   <td>DELETE</td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 三、 thymeleaf公共页面元素抽取。 ####

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

**1、使用thymeleaf抽取公共html片段：**

<div th:fragment="copyRight">
        &copyRight; 2018 The Good Thymes Virtual Grocery
    </div>

这样就将`copyRight`的信息抽出座位一个公共页面；

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

<table> 
 <thead> 
  <tr> 
   <th>命令</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>th:insert</td> 
   <td align="center">将公共片段整个插入到声明引入的元素中</td> 
  </tr> 
  <tr> 
   <td>th:replace</td> 
   <td align="center">将声明引入的元素替换为公共片段</td> 
  </tr> 
  <tr> 
   <td>th:include</td> 
   <td align="center">将被引入的片段的内容包含进这个标签中</td> 
  </tr> 
 </tbody> 
</table>

案例：如下引入公共模块

引入方式:(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">
                    
                    <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】