解决问题的思路
关于使用token进行登录的验证操作
登录注册逻辑
登录
- 在点击登录的时候会生成的一个加密的token字段,把加密的token字段保存在vuex中进行数据共享
- vuex中储存一份还需要再本地永久存储一份
- 在路由守卫的逻辑里面需要进行判断
- 一.如果有:
- 1.1限制有token之后是不能去到登录页的
- 1.2判断是否有用户名
- 1.2.1:如果有,则直接在路由导航守卫进行放行
- 1.2.2:如果没有:需要通过token来请求用户名,保存在vuex中,如果请求token有问题,使用try来捕获错误,直接跳转到登录页面
- 二.如果没有:则需要设置一个白名单,白名单之前的组件没有token是无法进入组件的
解决问题的思路
- 创建变量保存一些东西
- 使用开关思想来控制一些操作
- 如果是请求,判断请求成功或者失败,使用try和catch来捕获错误信息
- 如果promise返回失败,是会中断函数的执行的
- 一些对数组的操作,一般使用reduce基本都可以完成
- 一般在移入列表的时候需要修改样式的时候可以通过修改下标的方法来控制动态类名
同时请求二级和三级列表的方法
- 封装请求一级列表的方法,页面挂载的时候请求一级列表并渲染
- 在移入一级列表的时候传递过来一个当前一个列表的id值,通过id来请求二级列表数据,在一级列表数据的每一个对象身上添加一个children属性,用来保存请求回来的对应的每一个二级列表,但是注意:新增和删除对象属性是不具备响应式的,使用Vue.set可以解决问题
- 三级列表在请求二级列表的时候需要同时请求,但是我们需要在请求三级列表的时候需要阻塞二级列表的数据先修改了,需要同时进行修改.通过高并发的方式Promise.all,创建一个空的数组保存所有请求回来的三级列表的promise,等到所有的数据都请求回来之后,把一个数据都添加到二级列表的每一个对象的chilren属性身上
购物车商品数量的修改
- 出现的问题:每次数量累加或者累减的时候都需要发起请求,数量是不能小于0的,但是请求是异步的,有时候因为数据还没有回来,导致数据还没有被修改,判断条件就无法生效
- 解决方法:通过高级节流的方法(开关思想)
1.有些时候我们不知道点击数据累加或者累减的是哪一条数据,我们就给每个数据都添加一个布尔值的数据,默认是flase
2.在点击一次事件的时候把数据修改为true,判断数据如果是true就直接return, 等到await之后在把数据变成false
结算和提交订单和支付
- 点击结算的时候会跳转到提交订单组件,在提价订单组件会在页面挂载的时候去请求收货地址信息和购物车商品信息
- 在每次进入提交订单页面会有一个交易信息编号,在点击提交订单的时候回发送post请求把收货地址等信息和商品信息和交易编号发送到数据库
- 跳转到支付页,通过交易信息编号生成订单编号
- 通过订单编号可以生成一个微信支付的编码,通过qrcode插件生成微信支付二维码
- 轮询检测是否支付,在定时器中持续发起请求支付状态,通过try和catch来捕获是否请求成功,成功直接跳转成功支付页面,记得需要清除定时器
