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
转载于:https://www.cnblogs.com/ccylovehs/p/10560159.html
vue+vue-router+vuex实战相关推荐
- Vue前端项目-Vuex实战使用
目录 1.创建 vue-cli 脚手架项目 2.安装 vuex 3.将 store 实例注册到 Vue对象 4. store 实例对象 5.将 store 分割成模块化(Module) 6.项目中的模 ...
- Vue+Vue Router+Vuex页面演示
Vue+Vue Router+Vuex简单页面演示 1.目录结构(使用vue-cli创建) 2.编写代码 src/router/index.js import Vue from "vue&q ...
- Vue项目SSR改造实战
博客已全站升级到https,如果遇到无法访问,请手动加上https://前缀 我们先看"疗效",你可以打开我的博客u3xyz.com,通过查看源代码来看SSR直出效果.我的博客已经 ...
- vue+websocket+express+mongodb实战项目(实时聊天)(一)
##vue+websocket+express+mongodb实战项目(实时聊天)(一) 在原来基础上增加了多个聊天室以及发送图片[vue+websocket+express+mongodb实战项目( ...
- Vue + Spring Boot 项目实战(六):前端路由与登录拦截器
本篇目录 前言 一.前端路由 二.使用 History 模式 三.后端登录拦截器 1.LoginController 2.LoginInterceptor 3.WebConfigurer 4.效果检验 ...
- 四十三、在Vue使用router,路由的管理
@Author:Runsen @Date:2020/7/17 管理路由是一项必不可少的功能.今天,Runsen学习Vue Router. 文章目录 安装Vue Router Vue Router使用 ...
- 四十二、开始Vuex的学习:如何在Vue中使用Vuex
@Author:Runsen @Date:2020/7/12 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
- Vue.js-Day09【项目实战(附带 完整项目源码)-day04:用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
- Vue.js-Day06-AM【项目实战(附带 完整项目源码)-day01-am:移动端响应式(响应式尺寸、视口问题、实现rem变化、rem设计)、实战项目搭建(初始化项目、处理rem、搭建路由)】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
- vuex构建vue项目_如何使用Vue.js,Vuex,Vuetify和Firebase构建单页应用程序
vuex构建vue项目 如何使用Vuetify和Vue路由器安装Vue并构建SPA (How to install Vue and build an SPA using Vuetify and Vue ...
最新文章
- 谷歌如何利用人工智能重塑美国医疗行业?
- java输入字符数组_JAVA中怎样把用户输入的字符串存入数组中?
- Android安卓开发-'Theme.AppCompat.Light'无法找到的解决方案
- scanf函数使用遇到的问题
- Apache Ranger、业务背景、现状与需求、大数据安全组件介绍与对别、系统架构及实践、ranger admin、UserSync、plugin、权限模型、权限实现等
- pytorch打印模型参数_Pytorch网络压缩系列教程一:Prune你的模型
- POJ3348-Cows【凸包,计算几何】
- -%3erow mysql_MySQL查询优化
- The slave I/O thread stops(equal MySQL server ids)
- 晨哥真有料丨及时止损的信号及可能的挽回方法
- 计算机2级文档试题,计算机二级考试word操作题真题
- android沉浸式状态栏封装—教你玩出新花样
- GitLab 注册 Runner Registering Runners
- 被人民日报等官媒反复强调的​「企业家精神」,到底是什么?
- 致远OA单点登陆到第三方系统(零代码实现)
- Google Material Design 元件库
- 在SQL中limit 函数的使用
- jquery:toggle()方法模拟鼠标连续click事件
- PATH linux环境变量 LD_LIBRARY_PATH详解
- Java库:Jansi - 彩色日志输出体验
热门文章
- python画图表用引用数据_如何在python pandas中对数据帧使用按引用传递
- python手机版编程-可以使用手机编程实现python吗
- python详细安装教程linux-Linux环境下Python的安装方法
- python入门自学-你是如何自学 Python 的?
- php7和python3性能对比-Python 2.7与Python 3.7区别
- python怎么用excel-Python使用xlwt模块操作Excel的方法详解
- 2!=5 or 0在python中是否正确-python and or用法
- 开课吧python课程-开课吧Python课程亮相胡海泉抖音直播间
- python简单代码表白-python浪漫表白源码
- python朋友圈为什么这么火-看我如何用Python发一个高逼格的朋友圈