黑马瑞吉外卖之分类的修改

我们要做的就是对分类模块这个功能这里的修改的页面的一个完善。

还是按照前端的逻辑去前端页面分析。前端页面这里绑定了按钮，是修改的按钮。

@click="editHandle(scope.row)

scope.row代表当前行的数据对象。
比如我们点击下面这一行的话，那么下面这一行的数据对象就会传过来。
那么数据对象封装的就是分类名称，分类类型，操作时间，排序和操作这些字段数据。

然后传到下面这个方法就是给到了dat。然后将具体的数据给到classData，其实就是做了一个数据回显
按钮这里绑定了一个方法。这个方法一定是定义在vue组件的method里面。所以我们去寻找。可以看到具体的给到了classData里面的数据。

其实classData是在vue 的data里面定义的数据表模型。

然后呢，这个数据模型绑定到表单，然后具体的展示到这里。我们点击修改按钮的时候，那么当前行的数据就会通过classData的数据模型将数据进行展示。

所以点击修改的时候会展示出来这样的一个表单框，然后数据回显了出来，我们可以修改，按照vue模型的双向绑定的话，我们填写的话也可以传给数据模型，然后我们点击确定，提交，提交给后端，后端然后做出数据的修改的功能开发，就是这么一个过程。

然后这里点击确定的时候还是绑定了提交的这个方法。


具体就是调用到了它下面的这个editCategory。

editCategory({‘id’:this.classData.id,‘name’: this.classData.name, sort: this.classData.sort}).then(res…

然后点进去这个方法。其实还是写在一个js里面
在这里我们就可以清清楚楚的看出它的请求方式和路径。

在浏览器调试的话，也可以看到这个请求路径。写好后端的代码的话，是不会报404的。我们点击修改确定之后，他会首先执行的就是我们前端看到的这里的修改的请求，同时当后端正确响应后，它会再次做一个分页的查询

可以去看这个添加请求的标头和负载

负载呢，就是我们修改框最终提交的这些数据，如果你什么也没修改，那么就还是原来的数据。

这是前端分析的完整过程。

后端要写的很少。

@PutMapping
    public R_<String> update(@RequestBody Category category)
    {
        log.info("修改分类信息{}",category);
        categoryService.updateById(category);
        return R_.success("修改分类信息成功");
    }
1
2
3
4
5
6
7

这就是修改分类的完整的过程。