黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)

商品列表

目录

商品列表

一.创建一个子分支

二.创建组件

三.绘制商品列表的页面基本结构

1.面包屑导航

 2.卡片视图区域

四.功能

1.搜索

 2.删除

 3.添加

五.提交代码


一.创建一个子分支

git branch——查看当前所在分支

git checkout -b goods_list——创建新的子分支goods_list

git branch——查看当前所在分支

git push -u origin goods_list——将子分支goods_list推送到云端仓库中

二.创建组件

1.在goods文件夹中创建List.vue组件

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第1张图片

2.在router/index.js中导入刚刚创建的组件

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第2张图片

3.注册为Home的子路由

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第3张图片

三.绘制商品列表的页面基本结构

1.面包屑导航

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第4张图片

 2.卡片视图区域

 (1)带图标的输入框

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第5张图片

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第6张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第7张图片

 (2)添加按钮

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第8张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第9张图片

(3)获取商品列表数据

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第10张图片

首先在data中定义一个参数对象,作为调用api接口的请求参数

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第11张图片

接着在methods中定义getGoodList函数,用来获取商品列表数据

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第12张图片

 然后在data中定义一个空数组和total,用来存放获取到的商品列表数据和数据总条数

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第13张图片

最后在getGoodsList函数中将获取到的数据赋值给goodslist数组和total

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第14张图片

 (4)将获取到的数据渲染出来

首先在卡片视图区域中添加table表格,data绑定goodslist数组,加边框,隔行变色

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第15张图片

 接着是显示索引列

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第16张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第17张图片

 其次是商品名称列,prop属性指定goods_name属性

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第18张图片

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第19张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第20张图片

 紧接着的是商品价格,prop指定的是good_price

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第21张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第22张图片

 然后是商品重量,prop指定的是goods_weight

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第23张图片

再后面是商品创建时间,prop指定的是add_time

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第24张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第25张图片

 最后是操作,使用作用域插槽的形式接收这一行的数据

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第26张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第27张图片

 优化每一列的宽度

希望商品名称自适应,其他列强制性给个宽度

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第28张图片

效果:

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第29张图片

 (5)创建一个全局的时间过滤器

在main.js中注册一个全局的过滤器

dateFormat——过滤器的名字

originVal——需要处理的时间数据

getFullYear()——获取完整的年份

getMonth()——获取月份,从0开始的,所以要加1,

padStart()——不够多少位,用什么来填充

getDate()——获取当前日期

getHours()——获取当前的时

getMinutes()——获取当前的分

getSeconds()——获取当前的秒

 在创建时间那一列使用作用域插槽的形式,调用过滤器渲染时间,

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第30张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第31张图片

 (6)分页区

添加分页

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第32张图片

在methods中定义,pagesize改变就会触发这个函数,我们将newPagesize赋值给pagesize,然后再刷新一下数据

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第33张图片

在methods中定义,pagenum改变就会触发这个函数,我们将newPagenum赋值给pagenum,然后再刷新一下数据

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第34张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第35张图片

 加背景

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第36张图片

 效果:

四.功能

1.搜索

(1)输入框双向绑定queryInfo对象里面的query

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第37张图片

(2)单击搜索图标触发获取商品列表数据的函数 

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第38张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第39张图片

 (3)添加删除小图标,清空输入框,刷新数据

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第40张图片

效果:

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第41张图片

 2.删除

(1)给删除按钮绑定一个单击事件,通过id来删除

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第42张图片

 (2)在methods中定义removeById函数

(3)弹框提示用户是否删除商品

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第43张图片

 (4)发起删除请求

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第44张图片

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第45张图片

 3.添加

(1)给添加按钮绑定单击事件

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第46张图片

(2)在methods中定义goAddpage函数

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第47张图片

(3)在goods文件夹中创建Add.vue组件

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第48张图片

(4)在router/index.js中导入,注册为Home的子路由

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第49张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第50张图片

 (5)绘制添加商品的页面基本结构

面包屑导航

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第51张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第52张图片

卡片视图区域

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第53张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第54张图片

 警告区域

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第55张图片

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第56张图片

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第57张图片

步骤条

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第58张图片

不要忘记在plugins/element.js中导入和注册组件

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第59张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第60张图片

 让步骤条距离上下有间距,全局样式表中设置margin

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第61张图片

 效果:

 在全局样式表中将步骤条文本改小

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第62张图片

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第63张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第64张图片

 步骤条居中显示

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第65张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第66张图片

 激活第一项

在data中定义activeIndex值为0,用来控制激活的索引

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第67张图片

 步骤条绑定activeIndex

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第68张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第69张图片

 Tabs标签页

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第70张图片

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第71张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第72张图片

 步骤条与tabs标签页的联动效果

tabs可以使用v-model来指定激活的哪个面板,如果点击第一个,就会把第一个的name保存到activeName身上

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第73张图片

所以我们需要将步骤条的active和tabs的v-model绑定同一个值,这样子tab改变了name值,activeIndex就会跟着改变,步骤条也会跟着activeIndex改变而发生改变

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第74张图片

name是字符串类型,所以要将activeIndex变为字符串0

 但是步骤条的active只绑定数字型的值,我们可以将activeIndex字符串-0就可以变成数字了

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第75张图片

 使用表单将tabs包裹起来

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第76张图片

 将label设置在文本框的上面

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第77张图片

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第78张图片

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第79张图片

在data中定义表单数据对象和表单验证对象

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第80张图片

 基本信息面板

在第一个pane面板中创建form-item,其中有两个属性,label指定标题名称,prop指定验证规则

在form-item里添加输入框

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第81张图片

 让价格,重量,数量只能输入数字,在input加type=“number”

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第82张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第83张图片

可以发现高度不够,我们需要把tabs的固定高度删掉

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第84张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第85张图片

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第86张图片

商品分类

 获取商品分类数据

直接get就行了,不用传入任何参数

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第87张图片

在data中定义一个catelist数组,用来存放商品分类数据

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第88张图片

 在methods中定义getCateList函数,用来获取商品分类数据

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第89张图片

在生命周期函数中调用getCateList函数

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第90张图片

 将获取到商品分类数据渲染成级联选择器

添加级联选择器

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第91张图片

在data中,在商品表单对象addForm中定义空数组goods_cat, 用来存放分类的id

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第92张图片

在data中定义cateProps配置项

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第93张图片

给商品分类绑定验证规则goods_cat

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第94张图片

在data中定义goods_cat验证规则

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第95张图片

在methods中定义handleChange函数,级联选择器选中项变化,会触发这个函数

控制级联选择器的选择范围,只允许选择三级,不允许选择二级或者一级的商品分类,使用v-if和v-else,如果数组length=3,我们就允许选中,如果不等于3,我们就清空,我们在handleChange函数中做一下判断

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第96张图片

 阻止标签页的切换

监听标签页的切换事件,然后在事件的处理函数中判断当前是否处于第一个页签,同时还要判断选中的商品分类是否为三级分类,是三级分类则允许切换,否则不允许切换

触发before-leave属性,会调用一个function函数,第一个参数是即将要跳转的标签页的name,第二个参数是即将离开的标签页的name,我们拿到这两个参数就可以判断了

 我们给tabs标签添加before-leave属性,绑定一个beforeTabLeave函数,

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第97张图片

 在methods中定义beforeTabLeave函数

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第98张图片

 商品参数面板

请求路径中的参数是选中的三级分类的id, 通过get方式向服务器提交一个参数叫做sel,我们打开的参数面板,所以将sel规定为many就可以了

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第99张图片

在点击第二个面板的时候获取参数数据列表

给Tabs标签页绑定tab-click事件,当它被选中的时候会触发

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第100张图片

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第101张图片

在methods中定义tabClicked函数

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第102张图片

在computed中定义一个计算属性,计算三级商品分类id

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第103张图片

在 tabClicked函数中首先先判断是否选中第二个面板,然后再发起数据请求

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第104张图片

 在data中定义一个空数组manyTableDate,用来存放获取到的参数数据

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第105张图片

 在methods中,将获取到的参数列表数据赋值给manyTableDate

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第106张图片

渲染表单的item项

item项的label不应该写死,使用v-for循环,将attr_name作为label值,attr_id作为key值

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第107张图片

 将item项里面的attr_vals渲染成复选框

可以将数组渲染成复选框,但是attr_vals是字符串,首先我们应该先把attr_vals字符串转变为数组

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第108张图片

 在将参数列表数据赋值给manyTableData之前,参数列表数据forEach循环,每循环一次都会得到一个item项,item项里面有一个attr_vals字符串,先判断是否为空字符串,然后将它使用split(‘ ’)变成数组

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第109张图片

 添加复选框

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第110张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第111张图片

 给checkbox加边框线

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第112张图片

 效果: 

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第113张图片

美化复选框

修改合适的外边距

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第114张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第115张图片

 商品属性面板

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第116张图片

在data中定义一个空数组onlyTableData,用来存放获取到的静态属性的数据

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第117张图片

在tabClicked函数中判断选中是否为属性面板,发起数据请求,将sel的值设置为only,判断是否请求成功,失败则提示获取静态属性失败!,成功则将获取到的数据赋值给onlyTableData

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第118张图片

 渲染商品属性

在el-form-item标签中, 使用v-for循环onlyTableData数组,每循环一次都会得到一个item项,将item项的attr_name绑定给label,将attr_id绑定给key

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第119张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第120张图片

 渲染文本框

双向绑定每一项的attr_vals

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第121张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第122张图片

  

商品图片面板

(1)图片上传

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第123张图片

action属性——图片要上传的后台api地址

on-preview属性——指定预览事件,处理图片预览效果

on-remove属性——点击叉号,触发事件,处理移除图片的操作

file-list属性——指定文件列表

list-type属性——当前组件呈现的预览方式

添加upload组件,不要忘记在plugins/element.js中导入和注册

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第124张图片

在data中定义uploadURL

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第125张图片

 在methods中定义handlePreview函数和handleRemove函数

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第126张图片

 查看效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第127张图片

我们的图片上传失败了,upload组件没有使用axios发送ajax请求,而是它自己内部封装了一套ajax,它自己封装的ajax是没有携带Authorization字段的。

解决方法:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第128张图片

 给upload绑定一个请求头

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第129张图片

 在data中定义请求头

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第130张图片

 上传图片成功了!

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第131张图片

注意!!!

每次上传图片期间,都要为上传组件手动指定header请求头,在请求头对象中绑定Authorization字段,因为上传组件它自己封装的ajax是没有携带Authorization字段的。

图片上传成功后的操作

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第132张图片

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第133张图片

监听上传成功这个操作,将服务器返回的临时路径以对象的形式添加到pics数组中

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第134张图片

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第135张图片

在methods中定义handleSuccess函数

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第136张图片

在data中addForm中定义一个空数组,用来存放图片

 在handleSuccess函数中将服务器返回的临时路径以对象的形式添加到pics数组中

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第137张图片

(2)图片移除

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第138张图片

监听on-remove事件

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第139张图片

在handleRemove函数中将图片从pics数组中移除

  1.获取就要删除的图片的临时路径

  2.从pics数组中,找到这个图片对应的索引信息

  3.调用数组的splice方法,把图片信息对象,从pics中移除

x就是数组中的每一项,如果x的pic的值正好等于filePath的值,那就刚好找到那一项

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第140张图片

 (3)图片预览

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第141张图片

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第142张图片

在data中定义一个空字符串previewPath,用来存放要预览的图片地址

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第143张图片

在 handlePreview中给previewPath赋值

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第144张图片

 添加对话框

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第145张图片

在data中定义 previewVisible值为false

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第146张图片

 在handlePreview中将previewVisible设置为true,显示对话框

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第147张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第148张图片

让图片占满

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第149张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第150张图片

商品内容面板

安装vue-quill-editor依赖,

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第151张图片

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第152张图片

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第153张图片

 注册为全局可用的组件

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第154张图片

 添加富文本编辑器

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第155张图片

在data的addForm中添加goods_introduce

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第156张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第157张图片

 优化:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第158张图片

 在全局样式表中设置

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第159张图片

效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第160张图片

 添加一个按钮

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第161张图片

设置按钮的上外边距

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第162张图片

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第163张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第164张图片

 给“添加商品”按钮绑定一个单击事件

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第165张图片

在methods中添加add函数,拿到表单引用对象,进行预验证 

 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第166张图片

在发起数据请求之前,我们需要将goods_cat数组处理成字符串,但是级联选择器v-model绑定是goods_cat数组,所以我们需要深拷贝。还需要处理attrs

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第167张图片

下载lodash依赖

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第168张图片

导入lodash

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第169张图片

将addForm 深拷贝

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第170张图片

 

 处理attrs,attrs是一个数组,每一项都是对象,对象中只有两个属性,分别是attr_id(参数或属性的id)和attr_value(参数或属性的value),

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第171张图片

在addForm中添加一个空数组attrs

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第172张图片

 我们需要循环manyTableData和onlyTableData这两个数组,将循环的每一项进行处理,将处理的结果push到attrs数组中,最后还需要将addForm里的attrs赋值给form的attrs

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第173张图片

 

 发起添加商品的数据请求

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第174张图片

 效果:

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)_第175张图片

 

 

五.提交代码

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——将本地的主分支推送到云端

你可能感兴趣的