RESTFul风格实现CRUD（无数据库）（二）

最新推荐文章于 2024-10-01 09:29:45 发布

别让我头发掉光

最新推荐文章于 2024-10-01 09:29:45 发布

阅读量1k

点赞数

分类专栏： java 文章标签： java 后端

本文链接：https://blog.csdn.net/lmx20010720lmx/article/details/123826090

版权

java 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

3.5具体功能：删除功能
添加Vue.js
在这里插入图片描述
前端页面:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table id="dataTable" border="1" >
        <tr>
            <th style="border: 1px" colspan="5">Employee Info</th>
        </tr>
        <tr>
            <th>id</th>
            <th>lastName</th>
            <th>email</th>
            <th>gender</th>
            <th>options(<a th:href="@{/toAdd}">add</a>)</th>
        </tr>
        <tr th:each="employee : ${all}">
            <td th:text="${employee.id}"></td>
            <td th:text="${employee.lastName}"></td>
            <td th:text="${employee.email}"></td>
            <td th:text="${employee.gender}"></td>
            <td>
                <a @click="deleteEmployee" th:href="@{'/employee/'+${employee.id}}">delete</a>
                <a href="">update</a>
            </td>
        </tr>
    </table>

    <form id="deleteForm" method="post" >
        <input type="hidden" name="_method" value="delete">
    </form>
<!--    引入vue.js-->
    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script type="text/javascript">
        var vue = new Vue({
            el:"#dataTable",
            methods:{
                deleteEmployee:function (event) {
                    //根据id获取表单元素
                    var deleteForm = document.getElementById("deleteForm");
                    //将触发点击事件的超链接的href属性赋值给表单的action
                    deleteForm.action = event.target.href;
                    //提交表单
                    deleteForm.submit();
                    //取消超链接的默认行为
                    event.preventDefault();
                }
            }
        });
    </script>
</body>
</html>

控制层:

@RequestMapping(value = "/employee/{id}",method = RequestMethod.DELETE)
    public String employeeDelete(@PathVariable("id") Integer id){
        employeeDao.delete(id);
        return "redirect:/employee";
    }

springMvc.xml添加这个,不然会报错

<!--    开放对静态网页资源的访问-->
    <mvc:default-servlet-handler/>

3.6回显修改页面
前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
</head>
<body>
<form th:action="@{/employee_update}" method="post">
    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="id" th:value="${employee.id}">
    lastName：<input type="text" name="lastName" th:value="${employee.lastName}"><br>
    email：<input type="text" name="email" th:value="${employee.email}"><br>
    gender：<input type="radio" name="gender" value="1" th:field="${employee.gender}">男
    <input type="radio" name="gender" value="0" th:field="${employee.gender}">女<br>

    <input type="submit" value="修改"><br>
</form>
</body>
</html>

控制层

//跳转修改页面
    @RequestMapping(value = "/employee_toUpdate/{id}",method = RequestMethod.GET)
    public String employeeUpdate(@PathVariable("id") Integer id,Model model){
        Employee employee = employeeDao.get(id);
        model.addAttribute("employee",employee);
        return "employee_update";
    }

首页添加点击跳转修改页面按钮

 <a th:href="@{'/employee_toUpdate/'+${employee.id}}">update</a>

3.7实现修改功能
前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
</head>
<body>
<form th:action="@{/employee_Update}" method="post">
    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="id" th:value="${employee.id}">
    lastName：<input type="text" name="lastName" th:value="${employee.lastName}"><br>
    email：<input type="text" name="email" th:value="${employee.email}"><br>
    gender：<input type="radio" name="gender" value="1" th:field="${employee.gender}">男
    <input type="radio" name="gender" value="0" th:field="${employee.gender}">女<br>
    <input type="submit" value="修改"><br>
</form>
</body>
</html>

控制层

//实现修改
    @RequestMapping(value = "/employee_Update",method = RequestMethod.PUT)
    public String employeeUpdate(Employee employee){
        employeeDao.save(employee);
        return "redirect:/employee";
    }