黑马瑞吉外卖之新增分类
- 前端页面分析
- 后端功能开发
前端页面分析
首先我们可以单独打开这个界面，这里新增分类一共有两个，一个是套餐，一个是菜品。现在我们要去做这个功能。
我们先尝试去看其前端界面。这里是上面两个按钮的具体的展示，它们其实绑定了同一个方法，只是方法传参不同。
当我们点击两个新增按钮的时候，会弹出相应的表单。
其实这两个表单的结构是一样的，只是在标题的名字有所区分。这与按钮调用的方法有关。 调用的是这个方法，然后上面的具体的表单就展示了出来。在这里它会根据type的值来区分是新增的菜品还是新增的套餐。所以在这里也会指定这个type的值，这个type自然在data中的数据模型当中有定义。
其实在这个分类表中我们可以去看到这个type。
我们可以去填充数据，然后点击提交。取消的话直接将表单框关闭就好，保存提交的话一共有两个，一个是只保存然后退出，一个是保存后继续添加。 从下面找到的这段看的话，其实还是按钮绑定了方法，调用的也是同一个方法，只不过是具体的传递参数不一样。
然后我们去具体看这个方法。截取了一部分这个方法，其实这个方法写了很多，其实修改的话也是调用了这个方法。我们截取到这里。说明了它具体干了什么。前面部分主要做了一部分的表单验证
后面调用的方法就是具体的新增的方法。这里携带着参数过去了。
我们点进去这个方法。其实这个具体的请求方法还是写在另一个js里面。从这里我们就可以看到它具体的请求方式，以及路径。
其实单单调试页面的话，也是可以找到具体的请求路径的。
在这里的负载呢，我们也可以看到具体的传递的数据。这样也可以。
整体页面查看呢，是为了一个整体的了解。后面我们后端还需要去返回数据。
后端功能开发
很简单的事情。至于前面的实体类等等，在上一篇已经给出了。所以本篇不再赘述。我们只去在Controller里面写出这个功能。
请求方式为post请求。 传递的是json格式的数据，这样的参数体，所以我们用RequestBody。 实体类是category。
代码语言：javascript复制 @PostMapping
public R_<String> save (@RequestBody Category category)
{
log.info("category:{}",category);
categoryService.save(category);
return R_.success("新增分类成功");
}返回R_包装的返回
新增之后给前端，然后前端得到返回code为1，它会对数据界面有一个刷新，具体其实就是一个重新分页查询。
分页查询后的数据展示在这里
我们的数据最终会按照排序去分布。是因为我们的分页查询那边添加的条件，按照升序排列。
测试
这是后台分类界面的前后端分析的整个过程。
