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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33404395/article/details/81165296

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="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">
    <!--发送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="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>
        <!--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】

展开阅读全文

没有更多推荐了,返回首页