今天继续是对后台管理部分的一个操作,但是快要结束了,今天结束,明天会进入一个从Vue以来,另外一个名声显著的东西了,一只耳闻从未见识,而且十分的炫酷

他就是------数据可视化Echarts,迫不及待了解了

11.销售属性添加

当我们点击添加就,应该把添加的放到table里面来,table里面每一行数据是一个对象

然后就可以开始整理数据,我们select收集的值不应该只是id

收集到了数据,直接在button点击事件,整理参数,给到我们的data对应的数据

12.销售属性值展示与收集

这里主要是button和input的一个切换

给添加来一个点击事件,此时的row就为当前这一行的数据,我们知道每一行必须有自己独有的控制切换的变量,我们前面也说过先把控制切换的变量还有收集input的变量先放在这里,并没有去做什么时候添加这两个变量,现在就是时候了,当点击添加的时候就可以把两个变量添加进来,但是要注意我们需要点击就重新解析页面出来input所以要做响应式数据,同时需要把上面表单收集的值也做好,因为马上切换为input就要开始收集了

然后就是当我们失去焦点,需要将值呈现出来,这个就要看到我们的tag是遍历的什么了

所以失去焦点后要总结一下值放到这个子列表里面

然后就是两个注意事项,一个是不能存空值,一个是不能存重复的值

13.删除销售属性与属性值

拿到索引,直接根据splice方法删除即可,注意tag组件点击x的事件是close

顺便把除了在场景0显示其他都不能点击的三级联动也做了

14.spu修改保存操作

这个页面涉及到两个操作的保存,一个是修改一个是新增,而且他们两个接口要的数据都差不多就是一个id的区

然后在我们保存点击事件准备发请求,先要整理参数,所有的参数都能够收集到,只是照片墙这里需要整合进数据,我们新增的数据没有imgname和imgurl,其次我们发过去的数据不需要name和url

请求成功应该通知父组件回到table并刷新页面

15.spu添加保存

当我们点击添加spu,应该发起两个请求,获取品牌和销售属性的下拉框选择,添加按钮在父组件,所以通过ref通知子组件发请求

然后观察得知都可以手机,就是category3id收集不到

然后就是几个bug,当出现内容过多我在第三页添加保存之后不应该在第三页要回到第一页

取消按钮也要改

二.删除spu

准备接口,用到组件pop

同时判断当前位置应该停留在那

三.添加sku

1.静态组件

首先点击新增sku会切换场景2

然后完成sku的静态,主要就是注意一下table前面如果不是序号为选择框,type为selection

2.获取skuform数据

当我们点击新增sku,需要发起三个请求,一样的套路通过父组件ref来调用

3.sku收集与展示

总共应该分为三类数据,第一类应该是父组件传过来的

第二类应该是通过v-model可以收集到的数据

主要就是注意一下 input新增 type为number可以限制只能输入数字

第三类数据就是一些需要计算操作的数据

先把平台属性完成,遍历

这里的难点主要在于怎么来收集数据,看接口文档可知,需要这些数据

但是我们这里其实只需要拿到这两个就可以了

attrId表示你选择了那一个select,valueId表示你选择了那一个值,有这两个就可以了

第二个难点就是我们数据要放在哪里,因为你要知道我们这里收集的可能不只一个值,不只一个select,所以最好的方法其实是存放在这个select的对象里面

销售属性同理

接下来是对sku图片的一个收集与展示

然后这个图片怎么来收集的问题,复选框表格有一个事件,是当选择按钮发生变化时触发,而且还会有参数,参数就为当前勾选的这些图片的一行的数据

先不要放进skuInfo接口参数里面,因为还不完整

查看我们接口数据可知有一个isDefault的参数,它是表示当前这个图片是否是默认值,但是我们从服务器拿回来数据的时候就没有这个参数,所以一开始就要添加上

然后做默认button

4.sku保存

在做这一步之前,肯定是要先整理参数,首先是平台属性和销售属性的参数整理,应该点击保存后,就对attrData来一个遍历,然后依次每一条数据字符串转为数组,push到一个对象里面,最后把这个对象给到skuinfo的参数

但是我这里不这样做,用另一个方法,因为这里你会重复往一个数组里面添加内容,所以可以通过迭代来做

销售属性同理

整理图片参数

发起保存请求,成功返回页面

5.sku列表展示

完成接口后,这里使用dialog展示出来,将标题改为动态

然后修改table的结构

6.loading效果

用到elementUI全新的组件loading

直接给table来一个v-loading指令

然后需要在数据data定义loading为true

记得数据回来将其改为false

然后有两个bug

一个是我们的loading只会执行一次,因为改为false后就永远是false了,还有一个是会有数据回显的问题,点了一个sku显示之后在去点其他的 他一瞬间会显示下上一条的数据

这些都可以通过dialog的一个回调来解决,before-close注意它是一个属性,所以要用v-bind绑定,然后他有一个形参done,必须写上才能正常关闭,他表示关闭dialog前的回调

四.Sku

1.数据展示与分页

首先做好接口,然后完成静态页面

发请求获取table数据

动态展示数据在表格上

然后做分页器,点击改变还是用的之前的套路

2.上架与下架功能

这是两个接口,然后点击切换上下架的按钮,并发起相应的接口请求

3.查看详情(多个新组件)

首先点击查看详情由一个从右往左出来的内容,用到Drawer 抽屉

同时点开查看详情还应该发起请求

然后给我们drawer抽屉整理下布局,这里应该用到一个新组件layout,跟bootstrap的栅格系统一样,但是饿了吗是分为了24份

要注意要自己去修改样式,并不是用这里的组件当成组件标签去修改,可以去看最终在页面上呈现的标签类名等来修改

然后页面布局完毕,就可以放入动态数据了,平台属性用的是tag标签

最后是图片展示这里,需要一个轮播图carousel

要修改单独的指示器

4.深度选择器

首先回顾一点,我们给css加scoped,是为了让当前样式只在这个组件生效,他的方法就是给当前组件所有的标签都加上一个随机的属性,再通过你的选择器和他的属性选择器达到只在这里生效

但是要注意一点,我们的子组件 根组件也会有这个属性,所以如果子组件根组件跟父组件设置的选择器一样的话那么根组件是会受影响的,但是只影响根组件,根组件下面的其他标签就没事了

当我有这样一个子组件,我也想要父组件设置了子组件能够跟着生效

一种方法就是父组件去掉scoped,但是我就是不能去掉,这个时候就要用到深度选择器了,也叫样式穿透在原生css里面是>>>,less里面是/deep/,scss里面是::v-deep

所以针对刚才那种情况样式穿透也可以实现

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

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

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

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

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

  3. Spark大型电商项目实战-及其改良之番外(1)-将spark前端页面效果高效拷贝至博客

    Spark大型电商项目实战-及其改良这个系列的时间轴展示图一直在变....1-3篇是用图直接表示时间轴,用一段简陋的html代码表示时间表.第4篇开始才是用比较完整的前端效果,能移动.缩放时间轴,鼠标 ...

  4. C# 大型电商项目性能优化(一)

    经过几个月的忙碌,我厂最近的电商平台项目终于上线,期间遇到的问题以及解决方案,也可以拿来和大家多做交流了. 我厂的项目大多采用C#.net,使用逐渐发展并流行起来的EF(Entity Framewor ...

  5. C#大型电商项目优化(二)——嫌弃EF与抛弃EF

    上一篇博文中讲述了使用EF开发电商项目的代码基础篇,提到EF后,一语激起千层浪.不少园友纷纷表示:EF不适合增长速度飞快的互联网项目,EF只适合企业级应用等等. 也有部分高手提到了分布式,确实,性能优 ...

  6. Spark大型电商项目实战-及其改良(1) 比对sparkSQL和纯RDD实现的结果

    代码存在码云:https://coding.net/u/funcfans/p/sparkProject/git 代码主要学习https://blog.csdn.net/u012318074/artic ...

  7. Spark大型电商项目实战-及其改良(4) 单独运行程序发现的问题

    之前的运行结果比对发现,有1个函数的作用在2个job里面是相同的,但是对应的计算时间却差太远 于是把4个job分开运行.虽说使用的数据不同,但是生成数据的生成器是相同的,数据排布差距不大,数据量也是相 ...

  8. Spark大型电商项目实战-及其改良(3) 分析sparkSQL语句的性能影响

    之前的运行数据被清除了,只能再运行一次,对比一下sparkSQL语句的影响 纯SQL的时间 对应时间表 th:first-child,.table-bordered tbody:first-child ...

  9. Spark大型电商项目实战-及其改良(2) RDD优化效果不稳定的真正原因

    首先看没有map join的第2任务: 时间线如下 接着是对应id的算子计算时间表 Stage Id Description Submitted Duration Tasks: Succeeded/T ...

  10. C#大型电商项目优化(三)——扩展性与支付

    上一篇文章引来不少非议,笔者并非对EF有看法,而是针对不同的业务场景和框架背景,挑选不同的方案.每个方案都有其优势劣势,挑选最快速,最简单的方案,是笔者的初衷. 看评论也是学习的过程,然而有些只做评价 ...

随机推荐

  1. tableView中自定header视图的重用问题

    在UItableView中使用代理方发 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger ...

  2. CSS3实现的渐变按钮,在IE7、IE6下的滤镜使用。

      .ui-button { BORDER-LEFT-WIDTH:; ; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-T ...

  3. 【重要版本】Firefly alpha beta v1.2.2 正式发布

    原地址:http://bbs.gameres.com/thread_220175.html firefly 1.2.2 更新 更新内容: 功能添加       1.动态模块更新       2.部分b ...

  4. 鼠标点击DIV后,DIV的背景变色(js)

    <!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs ...

  5. 五子棋Web版的开发(三)

    最近在这个上面花费的时间不多,进展不大,而且遇到了一个问题好久也没有解决..我将struct2 改为Spring MVC.但是ziRUL的自动映射却无法起作用.   一直不知道为什么会出现这个问题.. ...

  6. jQuery stop()浅析

    作为前端开发人员,JS和JQuery是我们经常用到的开发语言和工具类库.我们都晓得,在jQuery中有一个很强大的方法——stop(),他是阻止在连续动画或事件中出现重复累积状况的方法.那么,stop ...

  7. linux用户权限 -&gt; 系统基本权限

    比如rwxr-xr-x linux中正是这9个权限位来控制文件属主(User).属组(Group).其他用户(Other)基础权限. 用户对资源来说, 有三种角色 User(u): 属主用户(文件所有 ...

  8. evernote如何笔记共享

    首先将你的笔记共享     访问你的共享笔记地址,就可看到共享笔记的内容了 https://www.evernote.com/pub/用户名/笔记名 https://www.evernote.com/ ...

  9. eclipse-设置默认编码格式为UTF-8

    需要设置的几处地方为: Window->Preferences->General ->Content Type->Text->JSP 最下面设置为UTF-8 Window ...

  10. 使用fastcgi部署django应用

    1.fastcgi和cgi的区别 1)CGI (Common Gateway Interface): 用来作为 Web Server 同 Python, PHP 等的通信手段.而在静态网页的时代, 只 ...