标签：总结 登录 vuex 购物车 组件 地址栏 season5

season5总结

前言

项目链接

github：https://caokejian.github.io/Season-5/dist/

腾讯云：（部署Xshell出现秘钥问题没有解决...）

前端

vue2+vuex·····从0开始的酒庄销售系统的前端项目

后端

后端采用其他公司的开源接口，数据是小组Apifox模拟出来了

考虑过Rails，Rails优点是开发效率很高，书写很简便，单元测试也使用过，但由于我技术不成熟，这个项目属于前端，我对于后端还是很有期待......

技术选型

Docker、Vue全家桶、Js、腾讯云服务器

页面展示

XD、mastergo

需求文档

设计思路

1. 页面布局（首页、全部商品、个人中心、购物车、登录）

整体采用flex布局，部分区域设置响应式，如：

2. 不使用第三方组件库，手动封装组件库，如（提示窗口）：

3. axios发送请求，并封装拦截器：

4. 实现登录模态窗口，控制变量放进vuex管理：

5. 手机验证与微信验证采用接口，抽取在utils文件夹下：

6. 采用npm的qs模块，将URL解析成对象的形式

7. 用户信息保存在vuex中，请求数据，登录成功

8. 数据渲染

懒加载期初实现，但和computed属性冲突不知道怎么解决...

=>思路 获取浏览器兼容的各种“高度”

v-show控制显示

scrollFn函数实现其功能

节流做法

9. 实现搜索、筛选（按价格、销量、区间）功能

10. 实现跳转（商品=>商品详情）

思路=>通过地址栏传id=>通过id查找所载数据索引

11. 实现购物车 通过vuex管理数据持久化（保存本地法）

12. 全局导航守卫

在个人中心页使用了导航守卫，检测不到登录的‘x-auth-token'不能进入，使登陆模态窗口跳出

13. 购物车组件写进个人中心的小购物车里

14. 跨域配置

处理Bug

* 解决重复点击出发同一路由跳转报错

* 避免倒计时定时器叠加

* 如果store分模块写，那么在调用mutations的方法是，this.$store.commit()括号里一定要加上 文件名/方法名

* 解决拿不到code的问题 定时器

* hash模式地址栏会有一个# 导致地址栏上的code在#前边，无法清除，就没有办法登陆逻辑

* 退出之后，更换路由的时候使Topbar组件重载，绑定：key，用watch监听是他++，然后触发重载

* 页面一刷新，用户信息丢失，根据是否有token来确定登录状态

* 父传子，父不能改子，props只能单向；使用v-model仍有错误没有改掉；全局事件总线只能发出，接收产生错误；使用vuex

未解决

* 中央事件总线

* 详情页侧边栏通过随机数获取当前品种的随机项

* 购物车数量显示bug，但price正确

* 筛选系统如果数据中有标签可以更方便的筛选，但目前仍存在不能多项筛选的问题，用最简单的确实可以暴力拆，但没必要

标签：总结,登录,vuex,购物车,组件,地址栏,season5
From： https://www.cnblogs.com/colin6721/p/16930061.html