电商后台管理系统的功能——商品管理模块
商品管理概述
商品管理模块用于维护电商平台的商品信息，包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以实现商品的添加、修改、展示和删除等功能。
1.商品列表
在goods文件夹下创建List.vue组件
1.1商品列表功能
在main.js入口文件中创建一个全局过滤器：所有的组件都可以使用
1.2添加商品
点击添加商品按钮跳转到添加商品的页面
①基本布局与分布条效果
需要使用step步骤条组件
Tab组件的基本使用
tab栏绑定的值是字符串类型的，但是步骤条中的active属性绑定的是数值类型的，因此需要做一个转换，将activeIndex转成数值类型：
如果要将一个长得像数字一样的字符串转换为数值类型，只需要-0即可。
阻止标签页之间的切换：首先要监听标签页的切换事件，在事件处理函数中判断是否处于第一个页签，还要判断选中的商品分类是否为三级分类。实际上就是判断数组长度是否为3，如果不等于3，则阻止跳转
③商品基本信息
我们将一个商品信息拆分成了五个panel面板，每个面板里面只维护着当前商品的部分数据，只有将所有面板的数据合并起来才是一个完整的商品数据，因此应该在五个panel面板的外面嵌套一层form表单。
addFormRules:{goods_name:[{required:true,message:'请填写商品名称',trigger:'blur'}],goods_price:[{required:true,message:'请填写商品价格',trigger:'blur'}],goods_weight:[{required:true,message:'请填写商品重量',trigger:'blur'}],goods_number:[{required:true,message:'请填写商品数量',trigger:'blur'}],goods_cat:[{required:true,message:'请选择商品分类',trigger:'blur'}]}使标签与文本框不在同一行：
④商品分类信息
⑤商品动态参数
使用到复选框组件：
⑥商品静态属性
⑦商品图片上传
图片上传upload组件基本使用
解决方法如下：
图片预览
实现图片的预览效果：图片预览实际上就是弹出一个对话框，只不过没有取消和确定按钮而已。
图片删除
完成图片上传
⑧商品详情
富文本编辑器基本使用
//安装vue-quill-editornpminstallvue-quill-editor-S或者使用vueui图形化界面安装：
⑨完成商品添加
上面的一行代码执行后会报错，这是因为在基本信息面板中的级联选择器必须双向绑定要一个数组上，但是在提交商品信息时，执行add()函数后，就将goods_cat转换为了字符串，这样就会报错
如何解决呢？可以在拼接操作goods_cat之前将addForm对象做一下深拷贝（将这个对象原封不动的拷贝一份出来，两个对象之间互不相干）
有两个bug还未解决：
①当不选择商品价格、商品重量和商品数量时，后台服务器会报错，显示必须输入这些值，但实际上这些属性是有一个默认值的0，为什么会显示为空数据呢？
②添加商品名称不能一致，但是删除了该商品之后，再添加一个与删除商品名称一致的商品却不行，这是为什么呢？后台数据库中没有删数据吗？知道原因了，sp_goods_pics这个表中已经删除该商品，但是在sp_goods表中却仍然保留着该商品的id值，是后台数据接口的问题。
1.3提交商品列表功能到码云
本地goods_list的代码就是最新的了
使用gitpush-uorigingoods_list命令把本地的goods_list分支推送到云端中
master是主分支，但是它的代码还是旧的，应该立即把所有的代码合并到主分支上
2.分类管理
在components目录下创建goods文件夹，然后创建cate.vue组件
2.1商品分类概述
商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到。
2.2商品分类列表
基本布局与数据获取
将商品分类的数据渲染为树形表格，但elementUI中并没有提供这样的组件，我们需要依赖第三方的插件来实现树形的table表格：
①第三方树形表格的基本使用
npmivue-table-with-tree-grid-S或者使用vueui图形化界面来安装依赖包：
我们使用手动注册的方式：在main.js入口文件中导入，ZkTable是要注册的插件，ZkTable.name是注册的名称
②实现分类树形列表
隐藏掉树形表格前面的复选框和展开行的效果
需要在前面加一个索引列：
自定义索引列的标题：
设置表格列与列之间的边框：
实现'是否有效'这一列：需要用到作用域插槽
先将这一列用type指定为template，再使用template属性来指定具体的作用域插槽。在表格的中间用一个template来定义这个插槽，然后使用scope属性取个名字来与column中的template名称对应，并且通过slot-scope属性来接收这一行的数据
2.4分页功能
①实现分类树形列表
实现添加分类按钮的功能：
父级分类是没有验证规则的，如果为空，则是将当前的分类名称添加为一级分类，如果选择了一个（大家电），则是二级分类（大家电的子分类），如果选择了两个，则是三级分类。只需要获取前两级的分类，即请求的type设为2，不需要pagenum和pagesize，一次性的将前两级分类获取过来
级联选择器Cascader：:options指的是级联选择器的数据源，props属性是级联选择器的配置选项，你选中的值、展示的值、以及通过哪个属性来实现父子嵌套都要通过props预先进行配置
③控制父级分类的选择
父级分类选择时，获取对应的分类id。
handleChange(){if(this.selectedCateList.length===0){//证明没有选中任何父级分类this.addForm.cat_pid=0this.addForm.cat_level=0}else{//选中父级分类this.addForm.cat_pid=this.selectedCateList[this.selectedCateList.length-1]//设置分类等级this.addForm.cat_level=this.selectedCateList.length}}④完成分类添加
将分类名称、分类等级和父分类id提交到后台，完成分类添加。
2.6提交分类管理功能到码云
本地goods_cate的代码就是最新的了
使用gitpush-uorigingoods_cate命令把本地的goods_cate分支推送到云端中
3.参数管理
在goods文件夹下创建Params.vue组件
3.1参数管理概述
商品参数用于显示商品的固定的特征信息，可以通过电商平台商品详情页面直观的看到。
动态参数：
静态属性：
3.2商品分类选择
①选择商品分类
级联选择器默认只能选择选择框的最后一项，但是我们只允许选择三级分类，如果只有二级分类的选项，其实是可以选中二级分类的。那如何解决呢？
我们只需要监听选择器的change事件，在change事件中只需要判断选中项的长度，如果长度不等于3，则说明选择的不是三级分类，只需要将v-model绑定的数组（当前选中的值）清空即可，对应的选择器中的选择项也会被清空。
如果在级联框中选中了一项，则启用tab标签栏，否则，tab标签栏处于禁用状态
如何实现呢？定义一个计算属性，根据级联选择数组的长度返回一个bool值，从而控制按钮的启用和禁用
3.3实现参数列表
①根据选择的商品分类加载对应的参数数据
添加参数和添加属性共用一个弹出对话框：也通过计算属性绑定
②处理标签数据格式
将字符串形式的数据分隔为数组。
res.data.forEach(item=>{//把字符串的可选项，分割为数组，重新赋值给attr_valsitem.attr_vals=item.attr_vals.length>0item.attr_vals.split(‘，'):[]})实现展开列里面的数据渲染：
在getParamsData()函数中赋值之前添加下面这一段代码
出现一个bug：当我们新增一个参数后，展开列中应该没有内容，但是却有一个空的标签：
这是因为，如果attr_vals为空，则用split按空格分割之后得到的数组是包含一项的，就是空字符串，所以就渲染出了一个空白的el-tag
如何解决呢？过滤掉空字符串
③控制添加标签文本框的显示
$nextTick的执行时机：DOM更新完毕之后
出现一个bug：展开两项，然后点击其中一项的输入newtag按钮，但是两项都变成了输入文本框，并且输入其中一个文本框，另一个会有联动的效果
这是因为所有的input绑定的都是同一个if判断条件，数据双向绑定的也是同一个值。每渲染一个展开行，都公用同一个value值和bool值
如何解决呢？只需要给每一行的数据单独提供个value值和bool值
把inputVisible设置为true之后，页面上的元素还没有被重新渲染，也就是说页面上展示的还是button按钮，并不是文本输入框。所以要等到渲染完成之后，才去执行。
优化：当文本框中输入的内容后，失去焦点之后，再次点击按钮显示文本框，之前输入文本框中的内容并没有被清空。但是我们想要清除不合法的输入内容，比如说一串空格
出现一个bug：当我们选中一个三级分类之后，下面会显示相应的参数，然后当我们再切换选择为一个二级分类，但是不允许我们选择，所以级联选择框会自动被清空，但是下面的参数却还在。这样如果我们添加新tag时，会因为没有商品的id值而报错
解决方法：
④实现标签动态添加的文本框控制逻辑
res.data.forEach(item=>{//把字符串的可选项，分割为数组，重新赋值给attr_valsitem.attr_vals=item.attr_vals.length>0item.attr_vals.split(‘，'):[]//为每个数据行，添加自己的tagInputVisible，从而控制自己展开行中的输入框的显示与隐藏item.tagInputVisible=false//把文本框中输入的值，双向绑定到item.tagInputValue上item.tagInputValue=''})⑤实现标签的添加和删除操作
添加标签和删除标签使用的是同一个接口，参数是一样的。
本地goods_params的代码就是最新的了
使用gitpush-uorigingoods_params命令把本地的goods_params分支推送到云端中