php 实现留言本增删改查功能_Vue 原生实现商城购物车增删改查

业务分析：

1 .整个页面分为两种状态：

正常状态：选中商品显示总价，可结算

编辑状态：选中商品增删改查，可删除

页面状态直接影响底部栏的变化

2. 商品，店铺，全选两种状态都可三级联动

3. 编辑状态只有一个店铺能编辑，其他不可编辑

4. 编辑状态对数量操作：增加，减少，输入操作三种改变数量的方式

5. 整体而言，删除商品的情况：正常状态滑动商品单个删除，编辑状态下单个或多个删除及整个店铺删除三种

6.点击删除按钮显示确认对话框，根据用户点击结果发送请求或者直接关闭对话框

7.对话框关闭后从编辑状态切换到正常状态

页面两种状态图示：

准备工作：

1.为所有数据请求接口封装一个入口fetch

export 

2.对同一个场景下所有的操作进行一个封装：

购物车有多种状态，封装cartService对购物车业务状态统一处理

class 

步骤：

1. 获取数据进行加工：

获取数据Mock模板：

{
  

从后台获取的数据，先对数据进行加工处理，然后再赋值给data里相应的属性

_cart

2.页面两种状态通过正在编辑的editingShop的值来判断，editingShop通过点击编辑店铺按钮控制

html

3.根据页面状态的三级联动

自下而上：商品 > 店铺 > 全选

1.

4.此时页面选择情况大致完成，那么我就要动态生成 正常状态选择的列表，或编辑状态的列表，还有总价，是否可以支付

computed

5.更新数量：

<

6.删除商品：

1.

修复bug:

1.编辑时，之前滑动的商品应回归正常状态

recoverSlide

2.滑动删除后，紧接着的下一个商品会继承滑动的效果，因为v-for采用‘就地复用策略’，复用原有DOM结构，解决：为商品添加唯一识别 ，绑定key,注意不能绑定index

<

总结：

1.从后台获取的数据，先对数据进行加工处理，然后再赋值给data里相应的属性。因为是引用，让所有操作都变得对应起来。

2.通过computed 里动态的set 来做响应式处理。这使得data里不需要初始化很多数据，也起到watch的作用。

3.找到突破点，才能让逻辑清晰，有条理。editingShop便是关键。

4.不要闲代码多，乱，先实现需求后优化。。

5.写了好久，我可真蠢，我怀疑我是不是少了哪根筋？？？？？想起来大一计算机基础得了61，我就知道生活不会好过的。。

知识点：

1.$refs 获取子元素/组件列表

ref 是非响应式的，不建议在模板中进行数据绑定，即使用唯一标识绑定

2.v-for 模式使用“就地复用”策略，简单理解就是会复用原有的dom结构，尽量减少dom重排来提高性能 ( 解决方案：还原dom样式 )

3.key 为每个节点提供身份标识，数据改变时会重排，最好绑定唯一标识，如果用index标识可能得不到想要的效果 ( 解决方案：绑定唯一识别key )

4.v-model.number

5.Velocity

6.mockjs

可拓展：

1.分理出失效商品

2.点击结算，判断登录状态，未登录显示对话框跳转登录注册页，登录成功返回购物车页面，已登录状态后生成支付页，支付成功生成查看订单页

Appendix:

mockjs

mockjs examples

Velocity

ref

三级联动