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

虚幻大学 xuhss 297℃ 0评论

? 优质资源分享 ?

学习路线指引(点击解锁) 知识定位 人群定位
? Python实战微信订餐小程序 ? 进阶级 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。
?Python量化交易实战? 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

今天把平台属性的管理基本完成了,后台管理做到现在基本也开始熟悉,确实就是对ElementUI的一个熟练程度。

一.平台属性管理

1.动态展示数据

先把接口弄好,应该在第三级标题选择后进行发请求

9d90c20364003f792e50f3113b160d2d - vue大型电商项目尚品汇(后台篇)day03

静态页面搭建

91d2099d4259a65e472295373e70dffa - vue大型电商项目尚品汇(后台篇)day03

渲染数据

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

属性值列表,用到一个新组件 tag,并且这里有多个属性值,所以要遍历,既然要在里面加标签那就要用slot,最后添加两个图标

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

78cfaf57a1d49628225313e18a1cf5da - vue大型电商项目尚品汇(后台篇)day03

2.添加与修改属性(静态)

点击添加修改应该将下面的表格组件隐藏出来一个新的组件

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

如果没有选择到三级分类的时候,添加属性按钮应该不可点

0ef28b3faf32029c2c4ee31f38f63e03 - vue大型电商项目尚品汇(后台篇)day03

新的页面布局

34b54047c4c24d106f467cd4047a2bed - vue大型电商项目尚品汇(后台篇)day03

5ef44061d23931a13988fb7bc7590b0c - vue大型电商项目尚品汇(后台篇)day03

点击取消应该回到列表展示界面

76f78c23f0c7dd1f12fec1c33d8db5bb - vue大型电商项目尚品汇(后台篇)day03

3.收集平台属性

首先我们的接口需要的数据,这里要注意我们categoryId是收集categoty3的id,但是这里不能用this.category3Id因为data里面数据声明赋值是乱序的,所以会出现undefined

08592837fca636a17b08881b67391dbf - vue大型电商项目尚品汇(后台篇)day03

先收集属性名

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

在收集属性值

table数据指向子级list,属性值应该为一个input框收集内容

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

默认进来应该为空只有当点击添加才会出现,那么应该给子级list里面的长度为0,因为table绑定的这个数据,当我们点击新增再去push

注意id应该为undefined,因为我们只是占位,添加过后给到后端,他才会赋值你的id

31b31f7cd17fb2c9907a776ee6997d51 - vue大型电商项目尚品汇(后台篇)day03

当我们属性名没有内容时,新增属性值按钮应该为disabled

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

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

58d5a264cd078e4a1671c6c6e5c43ff6 - vue大型电商项目尚品汇(后台篇)day03

4.返回按钮数据回显问题

当点击取消,再点击添加属性,我们刚才编辑的内容还在

就是添加属性进来应该清空一下内容

45a527c6c4033892776f559b8b3a957d - vue大型电商项目尚品汇(后台篇)day03

并且顺便还可以把3Id在这里收集了

39f0044d76b73021021bf06f65e8500d - vue大型电商项目尚品汇(后台篇)day03

5.修改属性操作(面试重点深浅拷贝复习)

点击修改按钮,把传进来的row参数直接赋值给

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

但是这里会有问题,当我们修改了内容不点保存点击取消,会发现新的内容会保存下来,其原理跟前面指向问题那里一样,因为row是服务器返回来的数据,我们的table也基于这个数据在渲染,你现在点击修改将baseAttrInfo赋值给了row,相当于table渲染的数据和baseAttrInfo都指向了同一个数组,所以在内存里面要修改都会被修改

765d2c59df39904bc6bd5fa576475907 - vue大型电商项目尚品汇(后台篇)day03

先回顾一下深浅拷贝,这两个必须达到手写出来的程度

浅拷贝,也可以利用es6语法object.assign方法来实现,前面参数老对象后面参数新对象,还可以使用之前用的方法{...obj}扩展运算符出来,又赋值一个新对象

一定要注意浅拷贝只拷贝一层,深层次的内容只拷贝引用,意思就是新对象可以得到这个内容,但是由于只是引用所以新对象修改,老对象深层次的内容也会被修改

03dbb4e99b7e610f7e7863495d6cf291 - vue大型电商项目尚品汇(后台篇)day03

然后是深拷贝,他就是可以拷贝多层,而且深层次的内容开辟新的空间,各管各的,要实现深拷贝用到一个核心内容就是递归

1c85f6563f576955bad62edbab024e14 - vue大型电商项目尚品汇(后台篇)day03

所以回到项目上面来,我们这里这个数据能像之前那样直接使用浅拷贝吗

5f0972478534ed40e159ab2832973b04 - vue大型电商项目尚品汇(后台篇)day03

很明显涉及到深层次数据了,所以这里直接用深拷贝,用到lodash的深拷贝

13225a50c731cfd2bc55e3eba8af2189 - vue大型电商项目尚品汇(后台篇)day03

448d433c597f618dcd5feb3310b9ddc2 - vue大型电商项目尚品汇(后台篇)day03

6.查看模式与修改模式切换

当点击修改进来attrId应该为当前这个属性的id

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

所以我新增的这个属性也应该有id,这样当我们的如果是修改进入就是这个id,如果是直接新增一个新的属性,那么没有这个id值就为undefined

4e0bc50c799fafd4a117a336ecbf7c2d - vue大型电商项目尚品汇(后台篇)day03

什么叫做查看模式与修改模式

当我点击添加应该有一个input框当我失去焦点应该转为一个span来呈现,两者势不两立应该用v-if和v-else来展示

0605513b9739f0f3aacacafe0663647c - vue大型电商项目尚品汇(后台篇)day03

注意这里并不能统一在data定义一个flag来作为切换的依据,因为如果都用它那么当我有多条数据的时候,我切换就变成了全部一起切换了

这里有个技巧就是,当我在push一条新数据,点击添加新对象的时候,给每一条数据单独添加一个flag

8089f7e4af31716a05fe71459c76d949 - vue大型电商项目尚品汇(后台篇)day03

8e6a441f91f99c049c82b33dc52e89be - vue大型电商项目尚品汇(后台篇)day03

失去焦点、以及回车都会切换到查看模式,注意这里是组件标签所以系统事件也是自定义事件要先加native再加enter才行

1dac3fa1d38576a23e1fc5e01a79a681 - vue大型电商项目尚品汇(后台篇)day03

然后是查看模式双击事件切换到修改模式

045c16442698acbff4b8beec7d473b70 - vue大型电商项目尚品汇(后台篇)day03

注意事项:

  • 一个是如果我们输入的空白值不允许保存切换

25314d6ff2c494b2724713a90db9b9cd - vue大型电商项目尚品汇(后台篇)day03

57c5324651acd60ce2f654c4d6212306 - vue大型电商项目尚品汇(后台篇)day03

  • 还有一个问题就是,如果是重复的值也不能切换,这里用some方法来做,some和every的区别回顾一下,还有这里有个问题,我们对当前子级list做一个遍历,而且逻辑是写在blur里面的,所以这个时候我们新的数据,也就是row已经生成,那么我们some就会遍历到他,那么你在里面判断的时候应该排除掉他,不然的话每一个item进来永远都有一个相等的

0fcf1f88bdacc5c15971433b3d3847aa - vue大型电商项目尚品汇(后台篇)day03

7.修改按钮的查看与编辑切换

当我们点击修改按钮进入属性操作,会发现无法进行查看与编辑的切换,也很正常,刚才添加flag完全是在添加属性这个按钮里面做的

所以我们就需要给修改按钮的回调做一些操作

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

如果像这样做确实能添加上flag但并不会触发视图更新,因为我们前面的flag是通过push添加进行的,能够被vue检测到,而且还是响应式数据,而我们这里直接加入进来,一个普通的数据并不会被vue检测到改变,所以也就不会去重新解析模板,这里的做饭就是用$set添加响应数据即可

52eb853bc134b86472589636d354b40d - vue大型电商项目尚品汇(后台篇)day03

8.表单元素自动聚焦

核心思想是给每个input打ref,而且值为$index,当我们从span切换到编辑的这个事件中,可以传入这个时候index,也就是当前的input,利用nextTick就可以让切换过后的input马上聚焦

2912408d9d06c23cf0a025d3fdf8a0cd - vue大型电商项目尚品汇(后台篇)day03

因为index是动态参数所以这里对象只能采用【】这种形式

3b7e931c5605d70e535cd42a3d303e3a - vue大型电商项目尚品汇(后台篇)day03

然后就是我们每一次点击新增属性也应该聚焦,而且是聚焦最后一个

92708997be0711385d10e95217ffb99a - vue大型电商项目尚品汇(后台篇)day03

9.删除属性值

用到一个新组件气泡框 Popconfirm

327e242d022d3bf1af9eb5d6df8c65a8 - vue大型电商项目尚品汇(后台篇)day03

注意一下,这里模板用的elementUI是2.13.2版本,官网是最新版本,所以对于气泡框的事件名有出入

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

注意splice方法

3e7a4752666f870d258bed22ee8ddedf - vue大型电商项目尚品汇(后台篇)day03

10.保存操作

平台属性最后一步就是编辑完成保存操作,在这一步准备发请求了,但是在发请求之前要先整理一下参数

首先我们的参数要确保不能有空的内容

3e863ced08e1c1e45f9556a47b8ac24c - vue大型电商项目尚品汇(后台篇)day03

另外就是我们的请求的参数数据是不需要flag还要把他删除了,直接delete可以删除对象的属性

5199b6bb588b85594c864ea42517bf03 - vue大型电商项目尚品汇(后台篇)day03

然后就可以发请求

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

转载请注明:xuhss » vue大型电商项目尚品汇(后台篇)day03

喜欢 (0)

您必须 登录 才能发表评论!