springMVC: RestFul案例2

萌萌哒huo

已于 2022-02-14 16:23:22 修改

阅读量185

点赞数

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

于 2022-02-13 18:30:55 首次发布

本文链接：https://blog.csdn.net/huozhiran/article/details/122865542

版权

JAVA 专栏收录该内容

24 篇文章 9 订阅

订阅专栏

需要实现的功能：

1. 查询全部的员工信息

① EmployeeController控制器类中添加控制器方法

- 该方法调用getAll()，将所有员工信息封装到employeeList集合中，并使用model存到了request域中；

- 跳转到employee_list.html中。

@Controller
public class EmployeeController {
    @Autowired
    //自动装配：默认根据ByType，其次ByName。在IOC容器的范围内找到一个Bean来赋值
    //通过注解 + 扫描，IOC容器中就包含了EmployeeDao这个Bean，从而进行自动装配
    private EmployeeDao employeeDao;

    @RequestMapping(value="/employee", method = RequestMethod.GET)
    public String getAllEmployee(Model model){
        Collection<Employee> employeeList = employeeDao.getAll();
        //利用model向request域对象共享数据
        model.addAttribute("employeeList", employeeList);
        return "employee_list";
    }
}

②创建employee_list.html

在templates目录下创建，以表格的形式，展示查询到的所有员工信息。

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employee Info</title>
</head>
<body>
    <table id="dataTable" border="1" cellspacing="0" cellpadding="0" style="text-align: center">
        <tr>
            <!-- colspan为合并列 -->
            <th colspan="5">Employee Info</th>
        </tr>
        <tr>
            <th>id</th>
            <th>lastname</th>
            <th>email</th>
            <th>gender</th>
            <th>options</th>
        </tr>
        <!-- 循环 -->
        <tr th:each="employee : ${employeeList}">
            <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>
                <!-- 方式二：分开相加
                    /employee后面的/是参数，而不是路径
                    <a th:href="@{/employee/} + ${employee.id}">delete</a>
                -->
                <a href="">update</a>
            </td>
        </tr>
    </table>
</body>
</html>

注意：

delete请求无法通过超链接的形式发送，上面程序就是先意思意思。

解决思路：利用超链接控制一个表单的提交，表单中包含method = host，请求方式为post，并且包含请求参数：_method。

2. 删除功能：

（1）一些问题

需要解决的问题，这里我们需要发送一个delete请求。

这里我们采用以下方式：

点击超链接，来控制表单提交，然后得以发送delete请求。

由于删除时需要id，也就是需要传参，下面介绍超链接传递参数的两种写法：

超链接在参数传递时，有两种方式：

①利用竖线

单引号内会被解析为路径，后面的则会被解析为参数。

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

        在一个大括号内

②分成两个相加

/employee后面的/是参数，而不是路径。

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

        各有一个大括号

（2）步骤

① 在webapp下创建一个目录，起名：static（不能放在WEB-INF下，因为该目录下的文件必须通过转发来访问）

② 在static下再创建一个js文件夹，将vue.js放在该目录下

③ 编辑employee_list.html

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employee Info</title>
</head>
<body>
    <table id="dataTable" border="1" cellspacing="0" cellpadding="0" style="text-align: center">
        <tr>
            <!-- colspan为合并列 -->
            <th colspan="5">Employee Info</th>
        </tr>
        <tr>
            <th>id</th>
            <th>lastname</th>
            <th>email</th>
            <th>gender</th>
            <th>options</th>
        </tr>
        <!-- 循环 -->
        <tr th:each="employee : ${employeeList}">
            <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>
                <!-- 方式二：分开相加
                    /employee后面的/是参数，而不是路径
                    <a th:href="@{/employee/} + ${employee.id}">delete</a>
                -->
                <a href="">update</a>
            </td>
        </tr>
    </table>

    <!-- 此表单的提交通过上面delete的超链接来控制，因此不需要submit按钮 -->
    <form id="deleteForm" method="post">
        <input type="hidden" name="_method" value="delete">
    </form>

    <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获取Form表单
                    var deleteForm = document.getElementById("deleteForm");
                    //event对应：超链接按钮的超链接的点击事件
                    //event.target对应：触发事件的元素（这里为超链接）
                    //event.target.href对应：超链接的href属性
                    //即将触发点击事件的超链接的href属性赋值给表单的action
                    //触发的事件为delete，得到th:href="@{|/employee/| + ${employee.id}}并赋值给action
                    deleteForm.action = event.target.href
                    deleteForm.submit();    //提交表单
                    event.preventDefault(); //取消超链接的默认行为
                    //因此现在点击超链接，会取消默认行为，并提交表单
                    //由于这个表单的请求方式是post，且包含参数：_method
                    //就可以将该请求方式转换为：delete
                }
            }
        });
    </script>
</body>
</html>

注：

- Form表单有一项action属性，如果不写，那就提交到当前页面。所以上面的程序使用vue设置了表单的action属性；

- 本来点击的是超链接，应该由超链接提交。但是我们取消了超链接的默认行为，因此最终是以表单提交的方式（被转换为delete方式），到了那个地址；

- 执行流程：

点击table里的delete按钮，会触发单击事件，执行vue代码：将delete的超链接地址，赋给Form表单的action属性，从而把表单提交到delete对应的超链接页面。这个表单纯纯工具人，里面啥都没有，只是为了在点击delete按钮后，发送的是DELETE请求。这样就能对应我们一开始设置的那个功能表。

④ 在EmployeeController控制器类中增加控制器方法

//这里由于有传进来的参数，因此在/employee后面需要有占位符{}来存储
//然后利用@PathVariable注解，将占位符所表示的值与控制器函数内的形参进行绑定
@RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE)
public String deleteEmployee(@PathVariable("id") Integer id){
    employeeDao.delete(id);
    return "redirect:/employee";
    //在删除结束后，回到展示表单的页面。先进入上一个控制器方法获取全部的志愿信息，让它再去展示表单
    //这里不采用转发，而是重定向。因为删除成功后，和之前的请求就没有关系了。
    //如果用转发，则地址栏中的地址还是现在的地址：/employee/{id}
    //重定向之后，地址栏中就会显示：/employee。相当于咱们自己在地址栏中输入了个地址去访问，默认为get请求
}

注：

静态资源在访问时，首先会被springMVC处理（因为在web.xml中设置的前端控制器DispatcherServlet，设置的请求映射为：/，表示所有请求），然而springMVC无法处理静态资源。又由于默认的servlet可以处理静态资源，因从需要在springMVC.xml中开放默认的servlet，使其处理静态资源。

<!-- 开放对静态资源的访问 -->
<mvc:default-servlet-handler></mvc:default-servlet-handler>
<!-- 开启mvc注解驱动-->
<mvc:annotation-driven/>

该行需要搭配第二行的“开启mvc注解驱动”来使用，否则所有的请求都会被默认的servlet来处理，这样请求映射就无法访问了。加上“开启mvc注解驱动”后，所有请求会先被DispatcherServlet处理，之后才是默认的servlet处理。也即请求映射被DispatcherServlet处理，静态资源（DispatcherServlet无法处理）会被默认servlet处理。

3. 添加功能

① 在employee_list.html中添加

在table的option加上超链接：

<th>options(<a th:href="@{/toAdd}">add</a>)</th>

变为这样：表后面多了一个add选项。

② spring.mvc中添加

在spring.mvc文件中添加一个视图控制器，使得点击add按钮后，直接跳转到employee_add.html页面。

注：因为add按钮仅仅是一个跳转到html页面的功能，就不写控制器方法了。

<mvc:view-controller path="/toAdd" view-name="employee_add"></mvc:view-controller>

③ 新建employee_add.html

由于视图前缀为"/WEB-INF/templates/"，在templates文件夹中创建employee_add.html。这个html用来输入新添加的employee的信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>add employee</title>
</head>
<body>
<form th:action="@{/employee}" method="post">
    lastName:<input type="text" name="lastName"><br>
    email:<input type="text" name="email"><br>
    gender:<input type="radio" name="gender" value="1">male<br>
           <input type="radio" name="gender" value="0">fmale<br>
    <input type="submit" value="add"><br>
</form>
</body>
</html>

④ 在EmployeeController控制器类中增加控制器方法

@RequestMapping(value = "/employee", method = RequestMethod.POST)
public String addEmployee(Employee employee){
    //存储得到的Employee对象
    employeeDao.save(employee);
    return  "redirect:/employee";
}

4. 修改功能

① 在employee_list.html中添加

update按钮上添加超链接：得到对应的id。

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

给这个超链接添加对应的控制器方法：得到指定id的employee对象，并存在请求域中。

@RequestMapping(value = "/employee/{id}", method = RequestMethod.GET)
//由于需要将查询出的数据在请求域中共享，因此参数中有个model
public String getEmployeeById(@PathVariable("id") Integer id, Model model){
    Employee employee = employeeDao.get(id);
    model.addAttribute("employee",employee);
    return "employee_update";
}

② 创建employee_update.html

这个html用来输入修改的新信息，包含回显功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>update employee</title>
</head>
<body>
<form th:action="@{/employee}" method="post">
    <!-- 将请求方式变为put -->
    <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}">male<br>
    <input type="radio" name="gender" value="0" th:field="${employee.gender}">fmale<br>
    <input type="submit" value="update"><br>
</form>
</body>
</html>

③ 控制器方法

@RequestMapping(value = "/employee", method = RequestMethod.PUT)
public String updateEmployee(Employee employee){
    employeeDao.save(employee);
    return "redirect:/employee";
}