【VUE项目实战】42、添加商品分类功能（三）

2024-05-16 02:00:19

接上篇《41、添加商品分类功能（二）》
上一篇我们处理了添加分类时表单相关的内容，本篇我们来完成添加分类的提交入库。

一、提交商品表单入库

我们需要调用“添加分类”的API接口，参数如下：

该接口的请求类型是post，请求参数需要通过请求体，包含cat_pid、cat_name以及cat_level三个参数。

我们找到“添加”按钮的函数“addCate”，编写预校验的逻辑，判断用户填写的数据是否合法，如果合法，就调用提交接口，将表单提交至后台，并判断是否成功：

//点击按钮，添加新的分类
addCate(){console.log(this.addCateForm);this.$refs.addCateFormRef.validate(async valid =>{if(!valid) return; //校验失败，不提交const {data:res} = await this.$http.post('categories',this.addCateForm);if(res.meta.status!==201){return this.$message.error("添加分类失败！");}this.$message.success("添加分类成功！");this.getCatelist(); //刷新分类列表this.addCateDialogVisible = false; //关闭对话框});
}

效果：

上图我们成功添加了一个一级分类。然后我们添加二级和三级分类：

可以看到成功了。

编辑和删除的操作和之前的各模块一样，这里不再赘述。

二、合并商品分类分支代码

至此，添加分类表单的所有工作全部完成，我们需要将商品分类的分支代码合并到主分支master上。
首先使用“git branch”查看当前所在分支，是goods_cate分支；然后使用“git add .”将修改内容添加到暂存区，然后执行“git commit”将修改内容提交至当前本地分支；然后使用“git push”将本地分支push到云端；最后通过“git checkout master”将分支切换到master分支，执行“git merge goods_cate”将goods_cate的内容合并至master主分支，然后将本地master分支推送到云端，此时master更新到了最新：

前往Gitee查看首页的提交记录，可以看到合并成功：

下一篇我们将开发新的模块————分类参数。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/u013517797/article/details/123610857

【VUE项目实战】42、添加商品分类功能（三）相关推荐

【VUE项目实战】41、添加商品分类功能（二）
接上篇<40.添加商品分类功能(一)> 上一篇我们实现了部分添加商品分类的功能,本篇我们来继续处理添加分类时表单相关的内容. 一.优化上一章剩余的小问题首先我们先处理一下选中之后想要清除 ...
【VUE项目实战】56、商品添加功能（六）-提交添加的商品
接上篇<55.商品添加功能(五)-商品内容模块> 上一篇我们完成了商品内容编辑模块的开发,也即是完成了商品所有的信息编辑,本篇我们就来开发提交商品所有信息到后台的功能. 一.要实现的效果 ...
【VUE项目实战】37、商品分类功能介绍和基本结构搭建
接上篇<36.用户分配角色功能> 上一篇我们完成了为用户分配角色的功能,结束了权限管理模块.本篇我们开启新模块"分类管理"的开发,先进行模块的介绍和基本结构的搭建. 一 ...
【VUE项目实战】54、商品添加功能（四）-商品图片上传模块
接上篇<53.商品添加功能(三)-商品参数及属性模块> 上一篇我们完成了商品参数和商品属性面板的开发,本篇我们来完成商品图片上传模块的开发. 一.要实现的效果我们在商品图片页签,需要放置 ...
【VUE项目实战】59、订单的物流信息查询功能
接上篇<58.订单修改收货地址的功能> 上一篇我们完成了订单列表的修改收货地址功能,本篇我们来实现订单的物流信息查询功能. 一.要实现的效果我们要实现点击操作列的"物流进度&q ...
vue 动态添加class_前端开发：Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容项目环境搭建路由导航实现 ListVie ...
Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
【VUE项目实战】32、权限管理-实现角色列表
接上篇<31.权限管理-实现权限列表> 上个阶段我们完成了权限管理模块,本篇我们来介绍用户.角色和权限三者的关系,并完成角色管理列表模块. 一.权限管理业务分析通过权限管理模块,控制不同 ...
【VUE项目实战】9、创建登录组件并绘制布局
接上篇<8.登录与退出功能开发准备(二)> 上一篇讲解了登录模块的开发的前置准备工作,本篇来正式开发登录模块. 一.创建登录组件并渲染下面我们创建一个根组件,并将根组件渲染到App根组件 ...
【VUE项目实战】1、学习目标以及概述
之前我们分别学习了ES6和Vue的基础,下面新开启的系列,是从0开始通过Vue搭建一个电商管理系统,从而学习Vue的具体实战. 以下博文记录,均参考黑马程序员(www.itheima.com)Vue项 ...

最新文章

热门文章