昨天太晚就没来得及更新,今天是spu管理界面,这个界面一共有三个界面需要切换,完成了两个界面,而且今天的难度在于最后两个章节,富有一定的逻辑性,当然中间也有很多需要注意的,比如ElementUI的照片墙需要添加list属性而且值为你的数据并且必须是一个数组必须有name、url属性

一.spu管理

1.按钮与三级联动可操作性

当进入属性的添加这个界面我们的三级联动应该不可点击

以及我们没有添加属性值不应该能够点击保存

2.spu介绍

spu和sku就是类与实例的关系

添加

修改

等等

3.静态

两个card构成,上面还是我们的三级联动

下面这个card先是一个button然后一个table,然后一组button,出现了多次button,后期会封装一个el-button,利用$attrs这个api

然后分页器

4.动态展示spu列表

应该在获取到3id这里来发

渲染数据

然后是我们的button这里,封装一个hintbutton,让其有悬浮提示效果

来一个全局组件,title显示提示内容,利用两个api $attrs直接绑定在组件上可以让其有传过来的所有属性,后面是直接有父组件传过来的事件绑定(包括触发方式和回调)

然后把分页器也做了,注意current-change这个事件可以直接写在获取列表这个回调里面,投机取巧

5.spu管理内容切换

在我们spu管理内容界面一共有三个界面需要切换,一个是现在的列表展示,一个是spu的管理,一个是sku的管理,如果只有两个用true和false来切换即可,但是这里有三个页面所以需要一个动态数据,而切换的依据就是看数字是否匹配

后面两个组件由于内容比较多,我就单独写为两个组件引入进来

6.spuform静态

首先应该点击添加和修改进入spuform界面

注意这里是组件标签,但是为什么直接写上系统事件可以实现,因为我们封装了,组件那边用一个$listeners直接获取了这个事件的触发方式和回调,用一个v-on绑定

主要就是记住el-form里面每一项表单要配合el-form-item就行了

7.spuform业务分析

点击取消回到0页面,用到自定义事件

然后就是每次点击编辑进入spuform这个页面都会发送四个请求,主要是每次点进来都要发送,而且也不能写在mounted里面,因为并没有销毁路由,按理说可以给编辑按钮来一个点击事件,但是需要这些请求回来的数据是在子组件,而编辑按钮是在父组件。

这里不能用自定义事件,因为要数据的是在子组件并不是要把数据发到父组件,可以现在父组件点击发起请求然后props给到子组件,但是过于麻烦了,这里可以用过ref拿到子组件的实例对象,然后在子组件methods定义一个发起请求的函数,当父组件一点击编辑的按钮,就用这个实例对象里面的这个方法就调用到了子组件的请求函数了

8.获取spuform数据

先整理接口

接下来四个接口全部请求,然后给到我们对应的响应式数据

9.spuform数据展示

  • 首先spu名称通过v-model进行收集

这样一弄确实可以进行双向收集

但是要考虑到一点,我们是因为点击的修改所以进来会发请求,spudata里面才会有这些属性,那如果我点击新增spu,没发请求,我也要手机,到时候点击保存要发起保存请求,这个时候怎么办

观察接口可以发现需要这么一堆数据,给到请求

直接将其放到spudata里面,这时候就算是没发请求我也可以收集到数据

  • 品牌部分

直接遍历,然后收集tmid

  • spu描述

  • spu图片

    因为我们这里要照片墙类型展示,所以要添加一个很重要的属性 file-list而且值应该为你这个存放图片的数组,而且查看官网文档可知,添加了这个属性后,你的照片这里的数据必须为一个数组,每一个照片数据为一个对象必须有name和url两个属性

    那么我这里就可以这么做,照片墙两个事件,一个是上传了文件后的回调,一个是删除了文件后的回调,这只是题外话,我在发起获得这些照片的接口那里就可以对这个list做一些操作

  • 销售属性

    首先我们表格里面展示的是spu自身已经选择的销售属性

    然后属性值名称用到动态编辑标签

    然后是我们button和input的切换,当初做并不是直接在data来一个赋值让其点击一下切换,你要考虑到这里不光是一行数据,如果都用这个来控制切换到时候就会出现你切换大家一起切换,所以要在各自的对象里面加上这个属性

    上面只是先占位,真正添加进对象后面再做,先把表格最后一个删除按钮做了

    下面最重要的一个功能,全平台一共有三个销售属性,你自己可能已经选择了一些,那么我就要把剩下没有选择的筛选出来,这里用一个计算属性来做

这里面的逻辑有点绕注意,用系统总共的数组去筛选,再遍历你已有的数据,用every也就是全部满足才返回true,我就去比较老数据看是不是不等于你已经有的数据,全部满足就返回

然后就可以用我们筛选好的数据去渲染到表单

10.spu照片墙

我们前面完成了照片墙的显示,但是并没有完成他的收集功能

可以看到我们照片墙上面有两个事件,on-preview表示图片预览的时候触发的事件,在这里不需要收集,on-remove表示的是图片删除的时候触发的事件,这里需要收集数据

他有两个参数,file表示你删除的那个文件,fileList表示的是剩余的文件

下一个问题,那么我们上传图片怎么来收集,可以用upload组件的on-success事件,表示的是文件上传成功触发的回调

他的三个参数分别是,上传成功返回的一些信息,上传成功那张图的一些信息,上传成功后所有的图片信息

vue大型电商项目尚品汇(后台篇)day04的更多相关文章

  1. vue大型电商项目尚品汇(前台篇)day01

    学完vue2还是决定先做一个比较经典,也比较大的项目来练练手好一点,vue3的知识不用那么着急,先把vue2用熟练了,vue3随时都能学. 这个项目确实很经典包含了登录注册.购物车电商网站该有的都有, ...

  2. vue大型电商项目尚品汇(后台篇)day01

    开始我们后台篇的内容,前面处理了一些事情,去学校完成授位仪式,由校长授位合影,青春不留遗憾,然后还换了一个电脑,征战了四年的神船终于退役了,各种各样的小毛病是真的烦人. 现在正式开始后台篇的内容,做了 ...

  3. vue大型电商项目尚品汇(前台篇)day02

    现在正式回归,开始好好做项目了,正好这一个项目也开始慢慢的开始起色了,前面的准备工作都做的差不多了. 而且我现在也开始慢慢了解到了一些项目才开始需要的一些什么东西了,vuex.router这些都是必备 ...

  4. vue大型电商项目尚品汇(前台篇)day04

    这几天一直都在做项目,只是没有上传上来,即将把前台项目完结了.现在开始更新整个前台的部分 一.面包屑处理 1.分类操作 点击三级联动进入搜索产生面包屑,直接取参数中的name即可 点击x怎么干掉这个面 ...

  5. vue大型电商项目尚品汇(前台篇)day05

    紧急更新第二弹,然后就剩下最后一弹,也就是整个前台的项目 一.购物车 1.加入购物车(新知识点) 加入到购物车是需要接口操作的,因为我们需要将用户的加入到购物车的保存到服务器数据库,你的账号后面才会在 ...

  6. vue大型电商项目尚品汇(前台篇)day05终结篇

    前台部分到此结束,一路走来还挺怀念,今天主要是对整个项目的完成做一个最后的收尾工作,对于功能上的需求没有什么了,主要就是项目上线的一些注意事项. 一.个人中心二级路由 当我们点击查看订单应该跳转到个人 ...

  7. vue大型电商项目尚品汇(后台篇)day03

    今天把平台属性的管理基本完成了,后台管理做到现在基本也开始熟悉,确实就是对ElementUI的一个熟练程度. 一.平台属性管理 1.动态展示数据 先把接口弄好,应该在第三级标题选择后进行发请求 静态页 ...

  8. vue大型电商项目尚品汇(后台终结篇)day06 重磅!!!

    自此整个项目前后台,全部搭建完毕. 今天是最后一天,内容很多,而且也比较常用,一个图标类数据可视化,一个后台的权限管理,都是很经典的类型. 一.数据可视化 1.简介 专门的一门学科,有专门研究这个的岗 ...

  9. vue大型电商项目尚品汇(后台篇)day05

    今天继续是对后台管理部分的一个操作,但是快要结束了,今天结束,明天会进入一个从Vue以来,另外一个名声显著的东西了,一只耳闻从未见识,而且十分的炫酷 他就是------数据可视化Echarts,迫不及 ...

  10. vue大型电商项目尚品汇(后台篇)day02

    这几天更新有点小慢,逐渐开始回归状态了.尽快把这个后台做完,要开始vue3了 3.添加修改品牌 用到组件 Dialog 对话框,其中visible.sync这个配置是修改他的显示隐藏的,label-w ...

随机推荐

  1. Android搞定权限申请

    0x00 前言 使用EasyPermissions库进行申请权限 打开App时就申请权限,如果用户拒绝权限后,会循环申请 如果永久拒绝后,会跳转到设置里继续申请 效果图: 注:不讲原理,先教你怎么实现 ...

  2. Ubuntu16更换flatabulous主题

    Ubuntu16更换flatabulous主题 安装unity-tweak-tool sudo apt-get install unity-tweak-tool 安装flatabulous主题 sud ...

  3. python输出二维数组中,每行N个最大值的索引

    `import heapq import numpy as np import random a = np.random.randint(50,size= (4,5)) a = np.array(a) ...

  4. 坐实大数据资源调度框架之王,Yarn为何这么牛

    摘要:Yarn的出现伴随着Hadoop的发展,使Hadoop从一个单一的大数据计算引擎,成为大数据的代名词. 本文分享自华为云社区<Yarn为何能坐实资源调度框架之王?>,作者: Java ...

  5. 小程序 canvas 文字加粗

    在fillText前设置font属性 ctx.font = 'normal bold 18px sans-serif'; 但是有继承问题: 解决方法 - 1: 先绘制字体不加粗部分, 再绘制需要加粗部 ...

  6. Educational Codeforces Round 113 (Rated for Div. 2)

    多拿纸画画 ! ! ! Problem - B - Codeforces 题意 给出n个数字(数字为1或2), 1代表这第i个选手没有输过,  2代表这第i个选手至少赢一次 输出为n*n矩阵( i行j ...

  7. python基础练习题(题目 递归求等差数列)

    day20 --------------------------------------------------------------- 实例028:递归求等差数列 题目 有5个人坐在一起,问第5个 ...

  8. [ Perl ] 多线程并发编程

    https://www.cnblogs.com/yeungchie/ 记录一些常用的 模块 / 方法 . 多线程 使用模块 threads use 5.010; use threads; sub fu ...

  9. 超全!华为交换机端口vlan详解~

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 华为交换机和其他品牌的交换机在端口的vlan划分上有一些区别,今天就和大家详细说说华为交换机的 ...

  10. java高级用法之:绑定CPU的线程Thread-Affinity

    目录 简介 Java Thread Affinity简介 AffinityLock的使用 使用API直接分配CPU 总结 简介 在现代计算机系统中,可以有多个CPU,每个CPU又可以有多核.为了充分利 ...