前端页面分析

首先我们可以单独打开这个界面，这里新增分类一共有两个，一个是套餐，一个是菜品。现在我们要去做这个功能。

我们先尝试去看其前端界面。这里是上面两个按钮的具体的展示，它们其实绑定了同一个方法，只是方法传参不同。

当我们点击两个新增按钮的时候，会弹出相应的表单。


其实这两个表单的结构是一样的，只是在标题的名字有所区分。这与按钮调用的方法有关。
调用的是这个方法，然后上面的具体的表单就展示了出来。在这里它会根据type的值来区分是新增的菜品还是新增的套餐。所以在这里也会指定这个type的值，这个type自然在data中的数据模型当中有定义。

其实在这个分类表中我们可以去看到这个type。

我们可以去填充数据，然后点击提交。取消的话直接将表单框关闭就好，保存提交的话一共有两个，一个是只保存然后退出，一个是保存后继续添加。
从下面找到的这段看的话，其实还是按钮绑定了方法，调用的也是同一个方法，只不过是具体的传递参数不一样。

然后我们去具体看这个方法。截取了一部分这个方法，其实这个方法写了很多，其实修改的话也是调用了这个方法。我们截取到这里。说明了它具体干了什么。前面部分主要做了一部分的表单验证

后面调用的方法就是具体的新增的方法。这里携带着参数过去了。

我们点进去这个方法。其实这个具体的请求方法还是写在另一个js里面。从这里我们就可以看到它具体的请求方式，以及路径。

其实单单调试页面的话，也是可以找到具体的请求路径的。

在这里的负载呢，我们也可以看到具体的传递的数据。这样也可以。

整体页面查看呢，是为了一个整体的了解。后面我们后端还需要去返回数据。

后端功能开发

很简单的事情。至于前面的实体类等等，在上一篇已经给出了。所以本篇不再赘述。我们只去在Controller里面写出这个功能。

请求方式为post请求。
传递的是json格式的数据，这样的参数体，所以我们用RequestBody。
实体类是category。

 @PostMapping
    public R_<String> save (@RequestBody Category category)
    {
        log.info("category:{}",category);
        categoryService.save(category);
        return  R_.success("新增分类成功");
    }
1
2
3
4
5
6
7

返回R_包装的返回

新增之后给前端，然后前端得到返回code为1，它会对数据界面有一个刷新，具体其实就是一个重新分页查询。

分页查询后的数据展示在这里

我们的数据最终会按照排序去分布。是因为我们的分页查询那边添加的条件，按照升序排列。

测试

这是后台分类界面的前后端分析的整个过程。