0
点赞
收藏
分享

微信扫一扫

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

老北京的热干面 2022-04-19 阅读 64

商品列表

目录

商品列表

一.创建一个子分支

二.创建组件

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

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组件

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

举报

相关推荐

0 条评论