[[toc]]

第四节 案例

1、准备工作

和传统 CRUD 一样。

  • 搭建环境
  • 准备实体类
  • 准备Service接口和实现类

2、功能清单

功能 URL 地址 请求方式
访问首页√ / GET
查询全部数据√ /movie GET
删除√ /movie/2 DELETE
跳转到添加数据的表单√ /movie/add/page GET
执行保存√ /movie POST
跳转到更新数据的表单√ /movie/2 GET
执行更新√ /movie PUT

3、具体功能：访问首页

①流程图

第四节 案例 - 图1

②配置view-controller

第四节 案例 - 图2

③创建页面

第四节 案例 - 图3

<!DOCTYPE html>






首页

  1. <a th:href="@{/movie}">显示电影列表</a>


4、具体功能：查询全部数据

①流程图

第四节 案例 - 图4

②handler 方法

@RequestMapping(value = “/movie”, method = RequestMethod.GET)
public String getMovieList(Model model) {

// 1.调用 Service 方法查询数据<br />    List<Movie> movieList = movieService.getAll();

// 2.将数据存入模型<br />    model.addAttribute("movieList", movieList);

// 3.返回逻辑视图<br />    return "movie-list";<br />}

③页面展示数据





























电影ID 电影名称 电影票价格 删除 更新
抱歉！没有查询到数据！

跳转到添加数据的表单页面
这里显示电影ID 这里显示电影名称 这里显示电影价格
删除
更新

跳转到添加数据的表单页面

5、具体功能：删除

第四节 案例 - 图5

重点在于将 GET 请求转换为 DELETE。基本思路是：通过一个通用表单，使用 Vue 代码先把 GET 请求转换为 POST，然后再借助 hiddenHttpMethodFilter 在服务器端把 POST 请求转为 DELETE。

①创建通用表单



<!-- 请求参数作用：告诉服务器端 hiddenHttpMethodFilter 要转换的目标请求方式 --><br />    <!-- 请求参数名：_method，这是 hiddenHttpMethodFilter 中规定的 --><br />    <!-- 请求参数值：delete，这是因为我们希望服务器端将请求方式最终转换为 delete --><br />    <input type="hidden" name="_method" value="delete"/><br /></form>

②删除超链接绑定单击响应函数

在这个单击响应函数中完成转换

[1]引入 Vue

第四节 案例 - 图6

[2]绑定单击响应函数

删除超链接：
删除

Vue代码：
new Vue({
“el”:”#dataTable”,
“methods”:{
“doConvert”:function () {

        // 1.根据 id 值查询到通用表单的元素对象<br />            var convertFormEle = document.getElementById("convertForm");

        // 2.将当前超链接的 href 属性值赋值给通用表单的元素对象的 action 属性<br />            // ①event：当前事件对象<br />            // ②event.target：当前点击的超链接对象<br />            // ③event.target.href：读取当前超链接对象的 href 属性<br />            // ④convertFormEle.action：给表单的 action 属性赋值<br />            convertFormEle.action = event.target.href;

        // 3.提交通用表单<br />            convertFormEle.submit();

        // 测试单击响应函数是否正确绑定<br />            // console.log("你点我了！！！");

        // 取消超链接控件的默认行为<br />            event.preventDefault();<br />        }<br />    }<br />});

③handler 方法

// 实际访问地址举例：/movie/2345QEA<br />    // 想要把路径中代表 movieId 的部分给匹配出来<br />    // 所以在 @RequestMapping 注解中写 URL 地址的时候，把地址中动态的部分用大括号标记出来<br />    // 在大括号中声明变量名<br />    // 在 @PathVariable 注解中引用这个变量名<br />    // 使用 @PathVariable 注解修饰一个形参，SpringMVC 就会将匹配到的值从形参这里传入<br />    @RequestMapping(value = "/movie/{movieId}", method = RequestMethod.DELETE)<br />    public String removeMovie(<br />            @PathVariable("movieId") String movieId<br />    ) {

    // 1.执行删除<br />        movieService.removeMovieById(movieId);

    // 2.重定向到显示列表的页面<br />        return "redirect:/movie";<br />    }

6、具体功能：跳转到添加数据的表单

①流程图

第四节 案例 - 图7

②配置view-controller

第四节 案例 - 图8

③创建页面

第四节 案例 - 图9

电影名称：

电影票价格：

7、具体功能：执行保存

①流程图

第四节 案例 - 图10

②handler 方法

@RequestMapping(value = "/movie", method = RequestMethod.POST)<br />    public String saveMovie(Movie movie) {

    movieService.saveMovie(movie);

    return "redirect:/movie";<br />    }

8、具体功能：跳转到更新数据的表单

①流程图

第四节 案例 - 图11

②handler 方法

@RequestMapping(value ="/movie/{movieId}", method = RequestMethod.GET)<br />    public String toEditPage(@PathVariable("movieId") String movieId, Model model) {

    Movie movie = movieService.getMovieById(movieId);

    model.addAttribute("movie", movie);

    return "movie-edit";<br />    }

③页面表单回显


电影名称：

电影票价格：

9、具体功能：执行更新

①流程图

第四节 案例 - 图12

②handler 方法

@RequestMapping(value = “/movie”, method = RequestMethod.PUT)
public String updateMovie(Movie movie) {

movieService.updateMovie(movie);

return "redirect:/movie";<br />}

上一节 回目录