自学内容网 自学内容网

【前端项目笔记】7 商品管理

商品管理

效果展示:
在这里插入图片描述

在功能开发之前,创建商品列表的子分支
git branch 查看所有分支
git checkout -b goods_list 创建并切换到新分支goods_list
git push -u origin goods_list 将新分支goods_list推送到云端仓库origin并命名为goods_list保存

通过路由形式加载商品列表

在这里插入图片描述
在这里插入图片描述
效果展示:
在这里插入图片描述

渲染商品列表基本结构

面包屑导航+卡片视图区域(输入文本框+搜索图标+添加商品按钮)
在这里插入图片描述

获取商品列表数据

在这里插入图片描述
在这里插入图片描述

渲染商品列表table表格

在这里插入图片描述

创建一个全局的时间过滤器以处理时间格式问题

当前是以毫秒的形式展示
在main.js中注册一个格式化时间的过滤器:
在这里插入图片描述
在这里插入图片描述

过滤器用法:(来自itpeilibo【Vue2.0源码学习】过滤器篇
过滤器经常会被用来格式化模板中的文本。
使用形式:使用形式都是

表达式 | 过滤器1 | 过滤器2 | ...

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

添加分页区域

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实现搜索与清空的功能

输入文本,显示所有包含该文本的商品,清空文本直接显示所有商品
在这里插入图片描述

实现删除商品按钮的功能

  1. 在删除商品之前先弹出提示框提示用户是否确认删除(弹框MessageBox)
  2. 在使用弹框时需要捕获取消删除行为
  3. 发起删除商品的请求
    在这里插入图片描述
    在这里插入图片描述
    效果展示:
    在这里插入图片描述

实现添加商品按钮的功能

点击添加商品按钮通过路由导航的方式跳转到添加商品页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

绘制添加商品页面的基本页面

面包屑导航+卡片视图区域(Alert警告区域+进度条区域+tab面板)
在这里插入图片描述
在这里插入图片描述

实现tab栏和步骤条的数据联动效果

tab栏通过v-model实现数据双向绑定,点击不同的tab-pane面板会绑定到v-model中,改变tab栏面板;steps步骤条通过active控制激活项
要想步骤条steps和tab栏保持一致,只要tab中v-model与steps中active绑定的变量保持一致即可
注意:由于active只接受数值类型,v-model只接受字符串类型,故需要将activeIndex-0转为数值类型
在这里插入图片描述
需要将5个pane面板统一进行包裹,所以将表单放在5个tab面板之外
标签在上,文本框在下:
在这里插入图片描述
在这里插入图片描述

绘制基本信息面板中的表单

在这里插入图片描述
在这里插入图片描述
获取商品列表
在这里插入图片描述
绘制商品分类的级联选择器:
在这里插入图片描述
在这里插入图片描述
控制级联选择器的选择范围:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

阻止标签页的切换

未选择商品分类前不允许切换其他标签页,选择商品分类后可切换
如何监听标签页的切换行为,在事件的处理函数中判断当前是否除以第一个页签,同时还要判断选择的商品分类是否为三级商品分类(length是否为3,不等于3阻止切换)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
效果展示:
在这里插入图片描述

获取商品参数面板对应的数据

调用接口:获取参数列表
参数类型是many 动态参数
当点击第二个面板时发起对应的数据请求
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

渲染商品参数面板中的表单item项

以复选框形式出现
先处理参数项数组:
在这里插入图片描述
再把参数项以复选框形式出现
在这里插入图片描述
美化复选框:
在这里插入图片描述
间距过大且换行不对齐
原因:margin不一致有些有右边距,有些有左右边距
优化:仅添加右边距,并使其优先级最高
在这里插入图片描述

开发商品属性面板对应的功能

点击面板时应立即发起数据请求获取静态属性(only)
在这里插入图片描述

在这里插入图片描述

渲染商品静态属性列表为表单

在这里插入图片描述
效果展示:
在这里插入图片描述

完成图片上传的功能

使用upload上传 组件
第一次使用的组件需要全局注册!
这里的action前面一定要加冒号!
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
解决一个bug:
在这里插入图片描述
msg为无效token且状态码为400,证明图片为真正上传到后台服务器
原因:无效token,一开始每次发axios请求都会配置一个token,但是upload组件内部发请求时没用到axios发ajax请求,而是组件内部自己封装了一套ajax,未调用axios携带authorization字段,需要在请求头自己加authorization。

在这里插入图片描述
利用headers自己添加authorization字段
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

图片上传成功之后的操作

上传图片,服务器存储图片,添加到表单中才成功
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

图片的移除操作

添加一张新图片时,会立即将图片的信息封装成一个object对象,在对象中包含一个pic属性。添加的新图片信息对象push到pic数组中,删除时将对象移除。
在这里插入图片描述

  1. 获取将要删除的图片的临时路径
  2. 从pics数组中,找到这个图片对应的索引值
  3. 调用数组的splice方法,把图片信息对象,从pics数组中移除
    在这里插入图片描述

在这里插入图片描述

splice函数用法:
splice():在数组中插入元素(会修改原数组)
删除:2个参数,开始位置 结束位置(左闭右开)
插入:3个参数,开始位置 删除元素数量(一般为0) 插入元素
替换:3个参数,开始位置 删除元素数量 插入任意多个元素

图片的预览操作

点击对应图片的名称时弹出对话框完整展示图片
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
处理图片过大问题:
在这里插入图片描述

在商品内容面板中渲染一个富文本编辑器

  1. 首先用命令行安装依赖vue-quill-editor:
npm install vue-quill-editor --save

SSR,全称为Server Side Rendering,即服务器端渲染。
SPA 路由控制和视图转换框架

  1. 在main.js导入富文本编辑器、对应样式,并注册为全局可用样式
    在这里插入图片描述
  2. 使用富文本编辑器+添加商品按钮
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实现商品内容的添加

  1. 在进行商品添加之前对整个表单进行数据校验(预验证)
    在add()函数中找到表单的引用对象this.$refs.addFormRef,调用validate函数,从它的回调函数中拿到验证结果valid,判断是否合法
  2. 根据API文档对goods_cat和attrs进行数据处理
    深拷贝:把某个对象原封不动的复制一份,和原对象互不相干。
    安装lodash
npm install lodash

导入并注册组件
在这里插入图片描述
3. 发起请求添加商品
在这里插入图片描述
在这里插入图片描述
效果展示:
在这里插入图片描述

实现修改商品按钮的功能

  1. 添加修改商品的对话框,添加表单及对应表单验证规则
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2. 修改对话框关闭后需要重置
在这里插入图片描述
在这里插入图片描述
3. 提交修改表单预校验,成功发起修改请求
在这里插入图片描述
在这里插入图片描述
效果展示:
在这里插入图片描述

提交商品管理代码

git status 查看文件状态
git branch 查看所有分支
git add . 将所有文件添加到暂存区
git commit -m "完成商品管理功能开发" 提交代码到当前代码goods_list中
git push 将本地代码推送到云端仓库中
本地代码中,goods_list分支代码已最新,但是master还是旧的代码
git checkout master 切换到主分支master
git merge goods_list 在本地上将goods_list代码合并到master中
git push 将本地分支推送到云端存储


原文地址:https://blog.csdn.net/C_greenbird/article/details/140016626

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!