商品列表
目录
一.创建一个子分支
git branch——查看当前所在分支
git checkout -b goods_list——创建新的子分支goods_list
git branch——查看当前所在分支
git push -u origin goods_list——将子分支goods_list推送到云端仓库中
二.创建组件
1.在goods文件夹中创建List.vue组件
2.在router/index.js中导入刚刚创建的组件
3.注册为Home的子路由
三.绘制商品列表的页面基本结构
1.面包屑导航
2.卡片视图区域
（1）带图标的输入框
效果：
（2）添加按钮
效果：
（3）获取商品列表数据
首先在data中定义一个参数对象，作为调用api接口的请求参数
接着在methods中定义getGoodList函数，用来获取商品列表数据
然后在data中定义一个空数组和total，用来存放获取到的商品列表数据和数据总条数
最后在getGoodsList函数中将获取到的数据赋值给goodslist数组和total
（4）将获取到的数据渲染出来
首先在卡片视图区域中添加table表格，data绑定goodslist数组，加边框，隔行变色
接着是显示索引列
效果：
其次是商品名称列，prop属性指定goods_name属性
效果：
紧接着的是商品价格，prop指定的是good_price
效果：
然后是商品重量，prop指定的是goods_weight
再后面是商品创建时间，prop指定的是add_time
效果：
最后是操作，使用作用域插槽的形式接收这一行的数据
效果：
优化每一列的宽度
希望商品名称自适应，其他列强制性给个宽度
效果：
（5）创建一个全局的时间过滤器
在main.js中注册一个全局的过滤器
dateFormat——过滤器的名字
originVal——需要处理的时间数据
getFullYear()——获取完整的年份
getMonth()——获取月份，从0开始的,所以要加1，
padStart()——不够多少位，用什么来填充
getDate()——获取当前日期
getHours()——获取当前的时
getMinutes()——获取当前的分
getSeconds()——获取当前的秒
在创建时间那一列使用作用域插槽的形式，调用过滤器渲染时间，
效果：
（6）分页区
添加分页
在methods中定义，pagesize改变就会触发这个函数，我们将newPagesize赋值给pagesize，然后再刷新一下数据
在methods中定义，pagenum改变就会触发这个函数,我们将newPagenum赋值给pagenum，然后再刷新一下数据
效果：
加背景
效果：
四.功能
1.搜索
（1）输入框双向绑定queryInfo对象里面的query
（2）单击搜索图标触发获取商品列表数据的函数
效果：
（3）添加删除小图标，清空输入框，刷新数据
效果：
2.删除
（1）给删除按钮绑定一个单击事件，通过id来删除
（2）在methods中定义removeById函数
（3)弹框提示用户是否删除商品
（4）发起删除请求
3.添加
（1）给添加按钮绑定单击事件
（2）在methods中定义goAddpage函数
（3）在goods文件夹中创建Add.vue组件
（4）在router/index.js中导入，注册为Home的子路由
效果：
（5）绘制添加商品的页面基本结构
面包屑导航
效果：
卡片视图区域
效果：
警告区域
步骤条
不要忘记在plugins/element.js中导入和注册组件
效果：
让步骤条距离上下有间距，全局样式表中设置margin
效果：
在全局样式表中将步骤条文本改小
效果：
步骤条居中显示
效果：
激活第一项
在data中定义activeIndex值为0，用来控制激活的索引
步骤条绑定activeIndex
效果：
Tabs标签页
效果：
步骤条与tabs标签页的联动效果
tabs可以使用v-model来指定激活的哪个面板，如果点击第一个，就会把第一个的name保存到activeName身上
所以我们需要将步骤条的active和tabs的v-model绑定同一个值,这样子tab改变了name值，activeIndex就会跟着改变，步骤条也会跟着activeIndex改变而发生改变
name是字符串类型，所以要将activeIndex变为字符串0
但是步骤条的active只绑定数字型的值，我们可以将activeIndex字符串-0就可以变成数字了
使用表单将tabs包裹起来
将label设置在文本框的上面
在data中定义表单数据对象和表单验证对象
基本信息面板
在第一个pane面板中创建form-item，其中有两个属性，label指定标题名称，prop指定验证规则
在form-item里添加输入框
让价格，重量，数量只能输入数字，在input加type=“number”
效果：
可以发现高度不够，我们需要把tabs的固定高度删掉
效果：
商品分类
获取商品分类数据
直接get就行了，不用传入任何参数
在data中定义一个catelist数组，用来存放商品分类数据
在methods中定义getCateList函数，用来获取商品分类数据
在生命周期函数中调用getCateList函数
将获取到商品分类数据渲染成级联选择器
添加级联选择器
在data中，在商品表单对象addForm中定义空数组goods_cat, 用来存放分类的id
在data中定义cateProps配置项
给商品分类绑定验证规则goods_cat
在data中定义goods_cat验证规则
在methods中定义handleChange函数，级联选择器选中项变化，会触发这个函数
控制级联选择器的选择范围，只允许选择三级，不允许选择二级或者一级的商品分类，使用v-if和v-else，如果数组length=3，我们就允许选中，如果不等于3，我们就清空，我们在handleChange函数中做一下判断
阻止标签页的切换
监听标签页的切换事件，然后在事件的处理函数中判断当前是否处于第一个页签，同时还要判断选中的商品分类是否为三级分类，是三级分类则允许切换，否则不允许切换
触发before-leave属性，会调用一个function函数，第一个参数是即将要跳转的标签页的name，第二个参数是即将离开的标签页的name，我们拿到这两个参数就可以判断了
我们给tabs标签添加before-leave属性，绑定一个beforeTabLeave函数，
在methods中定义beforeTabLeave函数
效果：
商品参数面板
请求路径中的参数是选中的三级分类的id， 通过get方式向服务器提交一个参数叫做sel，我们打开的参数面板，所以将sel规定为many就可以了
在点击第二个面板的时候获取参数数据列表
给Tabs标签页绑定tab-click事件，当它被选中的时候会触发
在methods中定义tabClicked函数
在computed中定义一个计算属性，计算三级商品分类id
在 tabClicked函数中首先先判断是否选中第二个面板，然后再发起数据请求
在data中定义一个空数组manyTableDate，用来存放获取到的参数数据
在methods中，将获取到的参数列表数据赋值给manyTableDate
渲染表单的item项
item项的label不应该写死，使用v-for循环，将attr_name作为label值，attr_id作为key值
将item项里面的attr_vals渲染成复选框
可以将数组渲染成复选框，但是attr_vals是字符串，首先我们应该先把attr_vals字符串转变为数组
在将参数列表数据赋值给manyTableData之前，参数列表数据forEach循环，每循环一次都会得到一个item项，item项里面有一个attr_vals字符串，先判断是否为空字符串，然后将它使用split（‘ ’）变成数组
添加复选框
效果：
给checkbox加边框线
效果：
美化复选框
修改合适的外边距
效果：
商品属性面板
在data中定义一个空数组onlyTableData，用来存放获取到的静态属性的数据
在tabClicked函数中判断选中是否为属性面板，发起数据请求，将sel的值设置为only，判断是否请求成功，失败则提示获取静态属性失败！，成功则将获取到的数据赋值给onlyTableData
渲染商品属性
在el-form-item标签中， 使用v-for循环onlyTableData数组，每循环一次都会得到一个item项，将item项的attr_name绑定给label，将attr_id绑定给key
效果：
渲染文本框
双向绑定每一项的attr_vals
效果：
商品图片面板
（1）图片上传
action属性——图片要上传的后台api地址
on-preview属性——指定预览事件，处理图片预览效果
on-remove属性——点击叉号，触发事件，处理移除图片的操作
file-list属性——指定文件列表
list-type属性——当前组件呈现的预览方式
添加upload组件，不要忘记在plugins/element.js中导入和注册
在data中定义uploadURL
在methods中定义handlePreview函数和handleRemove函数
查看效果：
我们的图片上传失败了，upload组件没有使用axios发送ajax请求，而是它自己内部封装了一套ajax，它自己封装的ajax是没有携带Authorization字段的。
解决方法：
给upload绑定一个请求头
在data中定义请求头
上传图片成功了！
效果：
注意！！！
每次上传图片期间，都要为上传组件手动指定header请求头，在请求头对象中绑定Authorization字段，因为上传组件它自己封装的ajax是没有携带Authorization字段的。
图片上传成功后的操作
监听上传成功这个操作，将服务器返回的临时路径以对象的形式添加到pics数组中
在methods中定义handleSuccess函数
在data中addForm中定义一个空数组，用来存放图片
在handleSuccess函数中将服务器返回的临时路径以对象的形式添加到pics数组中
（2）图片移除
监听on-remove事件
在handleRemove函数中将图片从pics数组中移除
1.获取就要删除的图片的临时路径
2.从pics数组中，找到这个图片对应的索引信息
3.调用数组的splice方法，把图片信息对象，从pics中移除
x就是数组中的每一项，如果x的pic的值正好等于filePath的值，那就刚好找到那一项
（3）图片预览
在data中定义一个空字符串previewPath，用来存放要预览的图片地址
在 handlePreview中给previewPath赋值
添加对话框
在data中定义 previewVisible值为false
在handlePreview中将previewVisible设置为true，显示对话框
效果：
让图片占满
效果：
商品内容面板
安装vue-quill-editor依赖，
注册为全局可用的组件
添加富文本编辑器
在data的addForm中添加goods_introduce
效果：
优化：
在全局样式表中设置
效果：
添加一个按钮
设置按钮的上外边距
效果：
给“添加商品”按钮绑定一个单击事件
在methods中添加add函数，拿到表单引用对象，进行预验证
在发起数据请求之前，我们需要将goods_cat数组处理成字符串，但是级联选择器v-model绑定是goods_cat数组，所以我们需要深拷贝。还需要处理attrs
下载lodash依赖
导入lodash
将addForm 深拷贝
处理attrs,attrs是一个数组，每一项都是对象，对象中只有两个属性，分别是attr_id（参数或属性的id）和attr_value（参数或属性的value）,
在addForm中添加一个空数组attrs
我们需要循环manyTableData和onlyTableData这两个数组，将循环的每一项进行处理，将处理的结果push到attrs数组中，最后还需要将addForm里的attrs赋值给form的attrs
发起添加商品的数据请求
效果：
五.提交代码
git branch ——查看当前所处分支
git status——查看当前状态，此时为红色
git add .——添加到暂存区
git status——查看当前状态，此时变成绿色
git commit -m "完成了商品功能开发"——提交到了本地仓库
git push——将本地的goods_list分支推送到云端
git checkout master——切换到主分支
git merge goods_list——主动合并goods_list分支
git push——将本地的主分支推送到云端
