Vue 开发简易商城,运用 Vuex VueRouter
localhost 本地暂存数据,模拟简易商城功能
商品筛选 | 商品添加购物车 | 登录注册 | 清空购物车 | localStorage 模拟仓库库存
开始
Vue是目前前端领域教火的框架,被广泛应用,插件和依赖包生态强大,诞生了许多大型应用
学习了 vue 之后,利用所学知识搭建了个简易的商城,用到了 vue 开发中常用的技巧以及扩展包,通过这个小项目加深了对 vue 的学习
但因为没有做对应的后台,所以用到了浏览器本地储存作为临时仓库的模拟,以达到计算商品剩余量的目的
同样,对于登录和注册功能,也是通过 localStorage 暂存用户名与密码,所以只能暂时有一个用户~~
后台系统的话,以后我会用 node 或者 django 搭建出来的,这里先给出本前端项目地址:
https://github.com/li-car-fei/vue_shopping
注册与登录
如上所述,本项目暂用 localStorage 存储用户名和密码,以达到登录和注册功能
首先,我们先需要配置路由npm i vue-router --save
安装包,然后在 index.js 中引入并且使用:
1 | import VueRouter from "vue-router"; |
记得最后一定要在 new Vue()
是添加 router 路由器:
1 | const app = new Vue({ |
配置的路由,写在了 router.js 中,如下:
1 | //meta中存有title,用作跳转路由时改变title标题 |
想了解vue-router
源码解析,可看我另一篇博客:vue-router 源码解析
注意两点:
- 可通过设置默认路由跳转至登陆界面,使用
redirect
属性即可 - 可能会 index.js 有疑问,大多数项目可能是 main.js 作为入口文件的文件名,但这是基于 webpack 配置的项目,修改 webpack 入口配置即可,文件名无关紧要
关于登录界面,最关键的是在 created 生命周期准确地判断状态
- 退出登录的状态
- localStorage 有用户信息,已登录的状态
- 未登录或注册的状态
1 | created(){ |
关于登录注册界面的其他操作及参数,请自行查看,注释都较为清楚
商城主页
首先,我们介绍除了 router
以外,另一个全局共用的变量 vuex
vuex
可以将全局使用的变量进行统一管理,在 index.js 中 new Vue()
时进行注册即可,它可以帮组我们更好地管理全局共用的数据,防止出现多组件之间传变量,传方法的复杂应用
通过vuex
的dispatch
,commit
,getters
机制,对状态进行统一管理,想了解vuex
源码解析,可以看我的另一篇博客:vuex 源码解析
以下是 index.js 中配置的 vuex
1 | //配置Vuex状态管理 |
同样的,要记得在 new Vue()
的时候添加配置
以上,我们可以看到项目的基本流程,包括添加购物车,清空购物车等等
可以看到在 add(context, id)
方法中,需要先判断登录状态,再进行库存的判断,是否加购的判断,最终返回一个 Promise 对象或者跳转路由
同样的,在 editCart(context, payload)
方法中,也是返回一个 Promise 对象,判断库存然后resolve()
或者reject()
而在商品组件添加商品和在购物车页面中修改数量时,通过如下方式调用:
1 | //添加购物车 |
同理,对于清空购物车的操作,也遵循上书方式
1 | //清空购物车 |
主页中,还有颜色,品牌的筛选,有销量和价格的排序,我认为自已的实现方法是较为笨重的,设置了filterBrand
,filterColor
作为筛选品牌和颜色的数组,order
作为排序选项,然后通过两层 forEach
进行筛选,最终得到筛选,排序后的商品数组。希望大家有更好的实现方案能够私聊我或者直接在评论区分享~~
list.vue 定义:
1 | export default { |
购物车
关于购物车中,有总价的计算,商品数量的改变等,实现较为简单,此处不作赘述,看代码即可:
1 | export default { |
商品详情页
商品详情页较之以上操作,多了评论的操作,如下:
1 | export default { |
结语
总体讲述了此商城项目,感谢阅读
感兴趣地可以到 github 上 clone 此项目:https://github.com/li-car-fei/vue_shopping
有帮助的可以打个赏 oh 亲~~