Vue+Vue-router+Vuex项目实战
shopping
vue
+ vue-router
+ vuex
实现电商网站
效果展示
install
- 下载代码:
git clone https://github.com/chenchangyuan/shopping.git
- 安装依赖:
npm install
- 启动项目:
npm run dev
运行环境: node v9.11.1 npm 5.6.0
需求分析
- 登录页面、商品列表页(网站首页)、购物车页(实现结算)、商品详情页
- 可按颜色、品牌对商品进行筛选,单击选中,再次点击取消
- 根据价格进行升序降序、销量降序排列
- 商品列表显示图片、名称、销量、颜色、单价
- 实时显示购物车数量(商品类别数)
- 购物车页面实现商品总价、总数进行结算,优惠券打折
数据存储 & 数据处理
product.js
存放商品数据(生产环境需通过接口调用获取数据)
{id: 1,name: 'AirPods',brand: 'Apple',image: '/src/images/airPods.jpg',imageDetail: '/src/images/airPods_detail.jpg',sales: 10000,cost: 1288,color: '白色'
},
复制代码
window.localStorage
实现数据存储与验证
let username = window.localStorage.getItem('username');
let password = window.localStorage.getItem('password');
if(!util.trim(this.username) || !util.trim(this.username) ){window.alert('账号或密码不能为空');return;
}
if(username === this.username && password === this.password){this.login = false;window.localStorage.setItem('loginStatus', 'login');this.$store.commit('getUser', this.username);window.alert('登陆成功,确定进入网站首页');window.location.href = '/list';
}else{window.alert('账号或密码错误');
}
复制代码
数据过滤与排序处理
filteredAndOrderedList(){//拷贝原数组let list = [...this.list];//品牌过滤if(this.filterBrand !== ''){list = list.filter(item => item.brand === this.filterBrand);}//颜色过滤if(this.filterColor !== ''){list = list.filter(item => item.color === this.filterColor);}//排序if(this.order !== ''){if(this.order === 'sales'){list = list.sort((a, b) => b.sales - a.sales);}else if(this.order === 'cost-desc'){list = list.sort((a, b) => b.cost - a.cost);}else if(this.order === 'cost-asc'){list = list.sort((a, b) => a.cost - b.cost);}}return list;
}
复制代码
实时显示应付总额与商品数
//购物车商品总数
countAll(){let count = 0;this.cartList.forEach(item => {count += item.count;});return count;
},
//购物车商品总价
costAll(){let cost = 0;this.cartList.forEach(item => {cost += this.productDictList[item.id].cost * item.count;});return cost;
}
复制代码
购物车结算处理
//通知Vuex,完成下单
handleOrder(){this.$store.dispatch('buy').then(() => {window.alert('购买成功');})
},
复制代码
vue-router & vuex
vue-router路由管理/src/views/
目录下的vue
组件进行设置,router-views
挂载所有路由,登录界面与商品列表页面之间header做隐藏显示处理,登录状态下刷新页面跳转至列表页,其他页面设置默认跳转
跳转处理
const router = new VueRouter(RouterConfig);//跳转前设置title
router.beforeEach((to, from, next) => {window.document.title = to.meta.title;next();
});
//跳转后设置scroll为原点
router.afterEach((to, from, next) => {window.scrollTo(0, 0);
});
复制代码
routers配置
//商品列表路由配置
const routers = [{path: '/list',meta: {title: '商品列表'},component: (resolve) => require(['./views/list.vue'], resolve)},{path: '/product/:id',meta: {title: '商品详情'},component: (resolve) => require(['./views/product.vue'], resolve)},{path: '/cart',meta: {title: '购物车'},component: (resolve) => require(['./views/cart.vue'], resolve)},{path: '/login/:loginStatus',meta: {title: '登录注册'},component: (resolve) => require(['./views/login.vue'], resolve)},{path: '*',redirect: '/login/login'}
];
export default routers;
复制代码
vuex状态管理,各组件共享数据在state
中设置,mutation
实现数据同步,action
异步加载
//配置Vuex状态管理
const store = new Vuex.Store({state: {//商品列表信息productList: [],//购物车数据,数组形式,数据元素为对象(商品id,购买数量count)cartList: [],//当前用户账号username: window.localStorage.getItem('username'),//登录状态loginStatus: !!window.localStorage.getItem('loginStatus'),},getters: {//品牌、颜色筛选brands: state => {const brands = state.productList.map(item => item.brand);return util.getFilterArray(brands);},colors: state => {const colors = state.productList.map(item => item.color);return util.getFilterArray(colors);}},//mutations只能以同步方式mutations: {//添加商品列表setProductList(state, data){state.productList = data;},//添加购物车addCart(state, id){const isAdded = state.cartList.find(item => item.id === id);//如果不存在设置购物车为1,存在count++if(isAdded){isAdded.count++;}else{state.cartList.push({id: id,count: 1})}},//修改购物车商品数量editCartCount(state, payload){const product = state.cartList.find(item => item.id === payload.id);product.count += payload.count;},//删除购物车商品deleteCart(state, id){const index = state.cartList.findIndex(item => item.id === id);state.cartList.splice(index, 1)},//清空购物车emptyCart(state){state.cartList = [];},getUser(state, username){console.log('username',username)state.username = username;},getLoginStatus(state, flag){state.loginStatus = flag;}},actions: {//异步请求商品列表,暂且使用setTimeoutgetProductList(context){setTimeout(() => {context.commit('setProductList', product_data)}, 500);},//购买buy(context){//生产环境使用ajax请求服务端响应后再清空购物车return new Promise(resolve => {setTimeout(() => {context.commit('emptyCart');resolve();}, 500);});},}
});
复制代码
后记
项目地址: 阅读完本文如果对vue的理解有所帮助,请给颗star,谢谢~
笔者个人微信 gm4118679254
欢迎加好友一起交流技术
参考资料
Vue.js实战 Vue.js
Vue+Vue-router+Vuex项目实战相关推荐
- Vue 3.0 企业级项目实战
目录 小册介绍 Vue 3.0 + Element Plus + Spring Boot 前后端分离实践,你不能错过! 小册须知 你会学到什么? 适宜人群 作者介绍 小册介绍 基于真实项目的实战开发, ...
- 基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
本文目录 前言 做项目的三大好处 强强联手(天狗组合) 专栏作者简介 专栏的优势 后端规划 1. SpringBoot 和 SpringCloud 的选择 2. Mybatis 和 MybatisPl ...
- 最全16套vue.js入门和项目实战+素材+源码
vue.js实战项目17个 包括 电商实战 音乐播放器 团购网 新闻客户端 图书管理 移动端APP 点餐系统 小米阅读开发 商城 vue+Python前后端分离打造电商系统 vue+node构建大型商 ...
- Vue.js快速入门+项目实战(源码)
Vue.js电影网站项目 github 链接(如果觉得有用记得start哦~): 项目源代码链接 目录 前言 安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 ...
- 尚硅谷 VUE 尚品汇项目实战问题解决方式整理(Vue3 版)
教学视频:https://www.bilibili.com/video/BV1Vf4y1T7bw 不回要资料的评论,资料在视频底下评论有些仓库里面有. 试图自行解决问题也是程序员必备技能之一,多做尝试 ...
- 尚硅谷 VUE 尚品汇项目实战问题解决方式整理
最近在自学大型vue项目,选中了尚硅谷的尚品汇,之前也学习过黑马程序员的一个电商后台管理项目,因为项目打包优化时候出了Bug,就闲置了,但是代码是一行一行敲完啦,也放到了码云上!学完这个尚品汇准备下一 ...
- Spring boot+Vue前后端分离项目实战——学生管理系统【三】后端
就不一段一段的贴代码了,讲一下代码结构,之后会将代码放在GitHub,将代码拉到自己电脑后对照学习 代码地址 https://github.com/SAGE-likeWu/student_manage ...
- vue项目实战之Layout
前言 接上篇 基于vue.element的项目实战 ,这一章节将向大家讲解一个项目中的主结构layout,也就是一个项目的导航栏和菜单栏. 一.创建登录页面 在 src 文件夹下创建 page 文件 ...
- Vue + Element-UI —— 项目实战(零)(项目概述)
Vue + ElementUI 后台管理项目实战 内容 参考链接 一 Vue + Element-UI -- 项目实战(零)(项目概述[附源码]) 二 Vue + Element-UI -- 项目实战 ...
最新文章
- 创业者如何小步快跑,从0开始实现自己的产品?
- linux用冒泡排序程序,利用双向走动法改进冒泡排序算法C语言源代码[黑盟核心成员]...
- CodeForces - 553C Love Triangles(二分图)
- AI+药物研发:人工智能赋能新药研发(人工智能应用案例)
- 【转】数学与编程——求余、取模运算及其性质
- Linux的应用领域
- Nginx+keepalived 实现高可用,防盗链及动静分离配置详解(值得收藏)
- python2.7安装pygame_python 安装 pygame了
- 木纹标识lisp_lisp 习题 用列表元素标识文件一行。
- PLT hook与Inline hook
- BestCoder Round #66 (div.2)B GTW likes gt
- Java基本数据类型自动转换
- 痛苦的evo安装之旅,终于成功了
- Excel·VBA考勤打卡记录统计结果
- Springboot中使用freemarker动态生成word文档
- 2018纪中夏季信息学集训总结
- 通过百度人脸对比API进行人脸对比
- java在线编译网站
- Verilog基础语法--运算符【常用的几种】
- java版gbc模拟器下载_GBA/GBC模拟器(VisualBoyAdvance-M)下载_GBA/GBC模拟器(VisualBoyAdvance-M)官方下载-太平洋下载中心...
热门文章
- c#获取文件夹路径(转载)
- 一些css3简单的练习
- 【CSS布局】已知布局元素的高度,写出三栏布局,要求左栏、右栏宽度各为300px,中间自适应。
- Vite 创建 vue3.x 项目
- 动手学深度学习(PyTorch实现)(七)--LeNet模型
- 7-237 有理数加法 (15 分)
- 北林oj-算法设计与分析-Tom palindrome number
- jar k8s 自己的 部署_k8s+jenkins+harbor镜像仓库实现持续集成
- typeof和instanceof
- .net面试题(会持续更新)