本文介绍了使用Vue实现电商网站项目的过程，包括效果展示、安装步骤、需求分析、数据处理、vue-router和vuex的运用。重点讲述了如何实现商品筛选、排序以及购物车功能，同时分享了项目源码链接和个人联系方式。
Vue实现电商网站项目
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: {
//异步请求商品列表，暂且使用setTimeout
getProductList(context){
setTimeout(() => {
context.commit('setProductList', product_data)
}, 500);
},
//购买
buy(context){
//生产环境使用ajax请求服务端响应后再清空购物车
return new Promise(resolve => {
setTimeout(() => {
context.commit('emptyCart');
resolve();
}, 500);
});
},
}
});
后记
本项目是参考iview作者Aresn书写的《Vue.js实战》一书，这本书循序渐进地对vue框架进行讲解，言语简洁、意思明了，适合着手Vue框架的FE，遗憾的是作者没有给出全部源码，我想应该是让读者手动实践，更加深入理解其原理。
在原项目上新增了登录功能
项目地址: github
笔者个人微信
笔者公众号
技术交流群[微信]
参考资料
Vue.js实战
Vue.js
扫一扫
902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
