电商网站项目

发表于 | 分类于 | 本文总阅读数 次
字数统计: 7,326 | 阅读时长 ≈ 36

电商网站项目开发

本项目结合 webpack、Vuex、vue-router 等知识点来开发一个具有代表性的电商网站项目. 所涉及的内容涵盖了许多典型场景, 如商品类表按照价格、销量排序; 商品列表按照品牌、价格过滤; 动态的购物车; 使用优惠码等.

项目工程搭建

新建目录 shopping, 复制 webpack.config.js、webpack.prod.config.js 和 package.json 等核心文件, 并通过 NPM 完成安装. 项目的主要配置在于 main.js 文件

本项目会使用 Vue.js 的路由插件 vue-router 和 状态管理插件 Vuex, 首先在 main.js 中导入并做初始化配置,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//	main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Routers from './router.js';
import Vuex from 'vuex';
import App from './app.vue';
import './style.css';

Vue.use(VueRouter);
Vue.use(Vuex);

//	路由配置
const RouterConfig = {
    //	使用 HTML5 的 History 路由模式
    mode: 'history',
    routes: Routers
};
const router = new VueRouter(RouterConfig);

router.beforeEach( (to, from, next) => {
	window.document.title = to.meta.title;
	next();
})
router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
})

const store = new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {}
});

new Vue({
    el: '#app',
    router: router,
    store: store,
    render: h => {
        return h(App)
    }
});

其中, 路由的页面配置放在了 router.js 文件内单独维护; Vuex 默认设置了 state getters mutations actions, 之后随项目需求持续增加.

项目中全局使用的一些 CSS 样式写在了 style.css 文件内, 在 main.js 中直接导入, webpack 打包时, 会将此 CSS 文件与.vue 单文件中的 CSS 一同提取, 输出到 main.css 文件.

在 shopping 目录下新建 views 目录, 用于存放每个路由页面的 .vue 文件; 新建 components 目录用来存放公共组件; 新建 images 目录用来存放项目中用到的图片. 配置完这些后, 通过 NPM 运行 npm run dev 命令, 启动 webpack 服务. 这样就完成了基础工程的搭建.

商品列表页

需求分析与模块拆分

商品列表页面用于展示相关的所有商品, 一般具有筛选和排序两种过滤方法. 比如可以按照品牌筛选或颜色筛选, 筛选条件可以叠加. 可以按照价格、销量等在筛选的基础上再进行排序, 最终过滤出符合要求的商品.

排序为单选, 初始按 “默认” 进行排序, 其中价格可以分为升序和降序两种排序, 销量则只有降序.

品牌和颜色都是单选, 单次点击选中, 再次点击取消选中.

初次打开商品类表会请求一次远程数据 ( 使用 setTimeout 模拟异步 ) 获取到的全量的商品数据, 然后筛选和排序都是在本地完成 (真实场景也有在服务端进行筛选和排序的做法, 因为商品很有可能会分页, 前端一次性拿到所有数据不现实)

商品列表主要有两个模块, 一个是路由组件(views/list.vue), 负责数据的请求、过滤相关的逻辑; 另一个是商品简介组件 (components/product.vue), 鼠标经过时, 显示出加入购物车的按钮. 这两个模块的样式都直接写在格子的 .vue 文件的 style scopen 部分.

商品简介组件

在 components 目录下新建 product.vue 文件. 每个商品的选项比较多, 比如标题、价格、颜色等, 为方便父子组件之间传递, 直接在 product.vue 中设置一个 property: info 来接收一个对象格式的数据, 这样扩展性较高, 父级也可以直接将获取到的数据传递过来, 省去了拆分的工作.

info 数据结构如下:

1
2
3
4
5
6
7
8
9
10
//	info 
{
    id: 1,
    name: 'AirPods',
    brand: 'Apple',
    image: 'http://ordfm6aah.bkt.clouddn.com/shop/1.jpeg',
    sales: 10000,
    cost: 1288,
    color: '白色'
}

其中 id 是商品的 id, 点击卡片会进入该商品的详情页面. name 是商品名称, brand 为品牌, sales 是销量, cost 为单价. 颜色比较特殊, 因为直接返回的中文无法对应到具体的色值, 所以在 product.vue 的 data 选项中定义一个 map, 用于映射颜色和色值.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//	product.vue
<script>
	export default {
        props: {
            info: Object
        },
        data () {
            return {
                colors: {
                    '白色': '#ffffff',
                    '金色': '#dac272',
                    '蓝色': '#233472',
                    '红色': '#f2352e',
                }
            }
        }
	};
</script>

鼠标悬停在卡片上时会显示 “加入购物车” 按钮. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//	product.vue
<template>
	<div class="product"> 
		<router-link
			:to="'/product/' + info.id"
			class="product-main">
			<img :src="info.images">
			<h4>{{ info.name }}</h4>
			<div
				class="product-color"
				:style="{ background: colors[info.color] }"></div>
			<div class="product-cost">￥ {{ info.cost }}</div>
			<div
				class="product-add-cart"
				@click.prevent="handleCart">加入购物车</div>
		</router-link>
	</div>
</template>
<script>
	export default {
        methods: {
            handleCart () {
                this.$store.commit('addCart', this.info.id);
            }
        }
	};
</script>

router-link 最终会渲染为一个 a 标签, 链接到 :to 定义的 url, 也就是商品详情页, id 会作为参数通过 vue-router 传递

“加入购物车” 按钮对 @click 事件使用了 prevent 修饰符来阻止冒泡, 否则在点击按钮的同时, 也会点击到 a 标签进入详情页.

“加入购物车” 按钮设置了一个 handleCart 方法, 通过 Vuex 触发 mutation 保存到购物车, 参数为商品的 id

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//	product.vue
<style scoped>
	.product {
        width: 25%;
        float: left;
	}
	.product-main {
        display: block;
        margin: 16px;
        padding: 16px;
        border: 1px solid #dddee1;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
        text-align: center;
        position: relative;
	}
	.product-main img {
        width: 100%;
	}
	h4 {
        color: #222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
	}
	.product-main:hover h4 {
        color: #0070c9;
	}
	.product-color {
        display: block;
        width: 16px;
        height: 16px;
        border: 1px solid #dddee1;
        border-radius: 50%;
        margin: 6px auto;
	}
	.product-cost {
        color: #de4037;
        margin-top: 6px;
	}
	.product-add-cart {
        display: none;
        padding: 4px 8px;
        background: #2d8cf0;
        color: #fff;
        font-size: 12px;
        border-radius: 3px;
        cursor: pointer;
        position: absolute;
        top: 5px;
        right: 5px;
	}
	.product-main:hover .product-add-cart {
        display: inline-block;
	}
</style>

使用 Less 修改样式文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//	product.vue
<style scoped lang="less">
	@prefix-cls: "product";
	.@{prefix-cls} {
        width: 25%;
        float: left;
        &-main {
            display: block;
            margin: 16px;
            padding: 16px;
            border: 1px solid #dddee1;
            border-radius: 6px;
            overflow: hidden;
            background: #fff;
            text-align: center;
            position: relative;
            & img {
                width: 100%;
            }
        }
        & h4 {
            color: #222;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        &:hover h4 {
            color: #0070c9;
        }
        &-color {
            display: block;
            width: 16px;
            height: 16px;
            border: 1px solid #dddee1;
            border-radius: 50%;
            margin: 6px auto;
        }
        &-cost {
            color: #de4037;
            margin-top: 6px;
        }
        &-add-cart {
            display: none;
            padding: 4px 8px;
            background: #2d8cf0;
            color: #fff;
            font-size: 12px;
            border-radius: 3px;
            cursor: pointer;
            position: absolute;
            top: 5px;
            right: 5px;
        }
        &:hover .@{prefix-cls} {
            display: inline-block;
        }
	}
</style>

使用 CSS 预编译的好处有很多, 比如支持变量, 封装相同样式为函数、循环等. 但是 webpack 默认是不支持的, 需要配置 less-loader.

配置 less 的方法

首先通过 NPM 安装 less 和 less-loader:

npm install less –save-dev

npm install less-loader –save-dev

然后在 webpack 中配置 less-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    less: ExtractTextPlugin.extract({
                        use: ['css-loader', 'less-loader'],
                        fallback: 'vue-style-loader'
                    }),
                    css: ExtractTextPlugin.extract({
                        use: ['css-loader', 'less-loader'],
                        fallback: 'vue-style-loader'
                    })
                }
            }
        },
        {
            test: /\.less/,
            use: ExtractTextPlugin.extract({
                use: ['less-loader'],
                fallback: 'style-loader'
            })
        }
    ]
}

列表按照价格、销量排序

在 views 目录下新建 list.vue 文件, 并在 router.js 中添加商品类表的路由配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//	router.js
const routers = {
    {
        path: 'list',
        meta: {
            title: '商品类表',
        },
        component: (resolve) => require(['./views/list.vue'], resolve)
    },
    {
        path: '*',
        redirect: '/list'
    }
};
export default routers;

先把数据搞定, 再来看看 list.vue. 列表相关的数据都通过 Vuex 来维护

首先需要获取商品类表的数据, 获取是异步的, 所以要写在 Vuex 的 actions 里. 在真实场景中, 数据应当是通过 Ajax 从服务器端获取的, 这里使用 setTimeout 来模拟异步, 并用本地数据来 mock.

在跟目录 shopping 下新建文件 product.js, 并写入以下数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
//	product.js
export default [
    {
        id: 1,
        name: 'AirPods',
        brand: 'Apple',
        image: 'http://ordfm6aah.bkt.clouddn.com/shop/1.jpeg',
        sales: 10000,
        cost: 1288,
        color: '白色'
    },
    {
        id: 2,
        name: 'BeatsX 入耳式耳机',
        brand: 'Beats',
        image: 'http://ordfm6aah.bkt.clouddn.com/shop/2.jpeg',
        sales: 11000,
        cost: 1188,
        color: '白色'
    },
    {
        id: 3,
        name: 'Beats Solo3 Wireless 头戴式耳机',
        brand: 'Beats',
        image: 'http://ordfm6aah.bkt.clouddn.com/shop/3.jpeg',
        sales: 5000,
        cost: 2288,
        color: '金色'
    },
    {
        id: 4,
        name: 'Beats Pill+ 便携式扬声器',
        brand: 'Apple',
        image: 'http://ordfm6aah.bkt.clouddn.com/shop/4.jpeg',
        sales: 3000,
        cost: 1888,
        color: '红色'
    },
    {
        id: 5,
        name: 'Sonos PLAY:1 无线扬声器',
        brand: 'Sonos',
        image: 'http://ordfm6aah.bkt.clouddn.com/shop/5.jpeg',
        sales: 8000,
        cost: 1578,
        color: '白色'
    },
    {
        id: 6,
        name: 'Powerbeats3 by Dr. Dre Wireless 入耳式耳机',
        brand: 'Beats',
        image: 'http://ordfm6aah.bkt.clouddn.com/shop/6.jpeg',
        sales: 12000,
        cost: 1488,
        color: '金色'
    },
    {
        id: 7,
        name: 'Beats EF 头戴式耳机',
        brand: 'Beats',
        image: 'http://ordfm6aah.bkt.clouddn.com/shop/7.jpeg',
        sales: 25000,
        cost: 788,
        color: '蓝色'
    },
    {
        id: 8,
        name: 'B&O PLAY BeoPlay A1 便携式蓝牙扬声器',
        brand: 'B&O',
        image: 'http://ordfm6aah.bkt.clouddn.com/shop/8.jpeg',
        sales: 15000,
        cost: 1898,
        color: '金色'
    },
    {
        id: 9,
        name: 'Boser QuietComfortr 35 无线耳机',
        brand: 'Bose',
        image: 'http://ordfm6aah.bkt.clouddn.com/shop/9.jpeg',
        sales: 14000,
        cost: 2878,
        color: '蓝色'
    },
    {
        id: 10,
        name: 'B&O PLAY Beoplay H4 无线头戴式耳机',
        brand: 'B&O',
        image: 'http://ordfm6aah.bkt.clouddn.com/shop/10.jpeg',
        sales: 9000,
        cost: 2298,
        color: '金色'
    }
]

在 main.js 中导入数据, 并在 Vuex 中声明数据列表相关的 state、mutations、actions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//	main.js
//	导入数据
import product_data from './product.js';

const store = new Vuex.Store({
    state: {
        //	商品类表数据
        productList: [],
        //	购物车数据
        cartList: []
    },
    mutations: {
        //	添加商品类表
        setProductList (state, data) {
            state.productList = data;
        }
    },
    actions: {
        //	请求商品列表
        getProductList (context) {
            //	真实环境通过 ajax 获取, 这里用异步模拟
            setTimeout(() => {
                context.commit('setProductList', product_data);
            }, 500);
        }
    }
});

首先通过 action 的 getProductList 方法获取数据, 然后由 mutation 的 setProduction 方法将数据设置到 productList.

准备好数据, 在来看视图部分. 先在跟实例 app.vue 中挂载路由并设置导航条:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//	app.vue
<template>
	<div>
		<div class="header">
			<router-link
				to="/list"
				class="header-title">电商网站示例</router-link>
			<div class="header-menu">
				<router-link to="/cart" class="header-menu-cart">
					购物车
					<span v-if="cartList.length">{{ cartList.length }}</span>
				</router-link>
			</div>
		</div>
		<router-view></router-view>
	</div>
</template>
<script>
	export default {
        computed: {
            cartList () {
                return this.$store.state.cartList;
            }
        }
	}
</script>

数据 cartList 是购物车中添加的商品, 路由视图 router-view 挂载了所有的路由组件.

app.vue 的样式在 style.css 中全局定义:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//	style.css
* {
    margin: 0';
    padding: 0;
}
a {
    text-decoration: none;
}
body {
    background: #f8f8f9;
}
.header {
    height: 48px;
    line-height: 48px;
    background: rgba(0,0,0,.8);
    color: #fff;
}
.header-title {
    padding: 0 32px;
    float: left;
    color: #fff;
}
.header-menu {
    float: right;
    margin-right: 32px;
}
.header-menu-cart {
    color: #fff;
}
.header-menu-cart span {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: #ff5500;
    color: #fff;
    font-size: 12px;
}

商品类表页 list.vue 在初始化时调用 Vuex 的 action 触发请求数据操作, 并设置计算属性从 Vuex 中读取数据 productList

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//	list.vue
<template>
	<div v-show="list.length">
		<Product v-for="item in list" :info="item" :key="item.id"></Product>
	</div>
</template>
<script>
	//	导入商品简介组件
	import Product from '../components/product.vue';
	export default {
        components: { Product },
        computed: {
            list () {
                //	从 Vuex 获取商品列表数据
                return this.$store.state.productList;
            }
        },
        mounted () {
            //	初始化时, 通过 Vuex 的 action 请求数据
            this.$store.dispatch(getProductList);
        }
	}
</script>

打开浏览器, 现在已经可以渲染出商品类表了

实现按照价格、销量排序, 就不能直接使用数据 list, 也不能直接重置 list (因为过滤不是一次性的,所以不能破坏原数据, 否则无法复原), 所以用计算属性来动态返回过滤后的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//	list.vue
<template>
	<div v-show="list.length">
		<Product
			v-for="item in filteredAndOrderedList"
			:info="item"
			:key="item.id"></Product>
			<div
				class="product-not-found"
				v-show="!filteredAndOrderedList.length">暂无相关商品</div>
	</div>
</template>
<script>
	import Product from '../components/product.vue';
	export default {
        components: { Product },
        data () {
            return {
                //	排序依据, 可选值为
                //	sales (销量)
                //	cost-desc (价格降序)
                //	cost-asc (价格升序)
                order: ''
            }
        },
        computed: {
            list () {
                return this.$store.state.productList;
            },
            filteredAndOrderedList () {
                //	复制原始数据
                let list = [...this.list];
                //	TODO 按品牌过滤
                //	TODO 按颜色过滤
                //	排序
                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;
            }
        }
	}
</script>
<style scoped>
	.product-not-found {
        text-align: center;
        padding: 32px;
	}
</style>

计算属性 filteredAndOrderedList 将 list 进一步过滤, 返回筛选、排序后的数据, 排序依据于 data: order, 默认为空, 即默认的排序为 sales、cost-desc、cost-asc 时则分别按照销量、价格降序、价格升序来排序. 排序直接使用 JavaScript 数组的 sort 方法对前后两个值比较大小.

把 Product 循环的数据由 list 改为 filteredAndOrderedList 后, 显示的就是过滤后的数据. 剩余工作只要在视图中通过操作改变 order 即可.

在模板里加入排序按钮, 并绑定相关事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
//	list.vue
<template>
	<div v-show="list.length">
		<div class="list.control">
			<div class="list-control-order">
				<span>排序: </span>
				<span
					class="list-control-order-item"
					:class="{on: order === ''}"
					@click="handleOrderDefault">默认</span>
				<span
					class="list-control-order-item"
					:class="{on: order === 'sales'}"
					@click="handleOrderSales">
					销量
					<template v-if="order === 'sales'">↓</template>
				</span>
				<span
					class="list-control-order-item"
						:class="{on: order.indexOf('cost') > -1}"
						@click="handleOrderCost">
						价格
						<template v-if="order === 'cost-asc'">↑</template>
						<template v-if="order === 'cost-desc'">↓</template>
				</span>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
        data () {
            return {
                order: ''
            }
        },
        methods: {
            handleOrderDefault () {
                this.order = '';
            },
            handleOrderSales () {
                this.order = 'sales';
            },
            handleOrderCost () {
                if (this.order === 'cost-desc') {
                    this.order = 'cost-asc';
                } else {
                    this.order = 'cost-desc';
                }
            }
        }
	}
</script>
<style scoped>
	.list-control {
        background: #fff;
        border-radius: 6px;
        margin: 16px;
        padding: 16px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	}
	.list-control-filter {
        margin-bottom: 16px;
	}
	.list-control-filter-item,
	.list-control-order-item {
        cursor: pointer;
        display: inline-block;
        border: 1px solid #e9eaec;
        border-radius: 4px;
        margin-right: 6px;
        padding: 2px 6px;
	}
	.list-control-filter-item.on,
	.list-control-order-item.on {
        background: #f2352e;
        border: 1px solid #f2352e;
        color: #fff;
	}
</style>

“默认” 和 “销量” 只能单次点击, “价格” 按钮可以点击切换为升序和降序两种状态. 通过判断 order 的状态, 给 3 个按钮动态绑定了 class (.on) 来高亮显示当前排序的按钮. 刷新页面, 点击切换排序状态, 商品类表已经可以动态更新了.

列表按照品牌、颜色筛选

首先准备数据

品牌和颜色的数据可以作为 getters 从 Vuex 的 productList 里遍历获取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//	main.js
//	数组排重
function getFilterArray (array) {
    const res = [];
    const json = {};
    for (let i = 0; i < array.length; i++) {
        const _self = array[i];
        if (!json[_self]) {
            res.push(_self);
            json[_self] = 1;
        }
    }
    return res;
}

const store = new Vuex.Store({
    state: {
        productList: [];
    },
    getters: {
        brands: state => {
            const brands = state.productList.map(item => item.brand);
            return getFilterArray(brands);
        },
        colors: state => {
            const colors = state.productList.map(item => item.color);
            return getFilterArray(colors);
        }
    }
});

使用 map 方法把 productList 里的 brand 或 color 数据过滤出来, 然后用 getFilterArray 方法对数组去重.

getters 里的 brands 和 colors 依赖数据 productList, 与计算属性原理类似, 所以只要维护好 productList、brands 和 colors 就可以自动跟新.

然后在 list.vue 中把 Vuex 里的品牌和颜色数据引入, 并完成列表的过滤.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//	list.vue
<script>
	export default {
        computed: {
            list () {
                return this.$store.state.productList;
            },
            brands () {
                return this.$store.getters.brands;
            },
            colors () {
                return this.$store.getters.colors;
            },
            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);
                }
                //	排序...
                return list;
            }
        },
        data () {
            return {
                filterBrand: '',
                filterColor: ''
            }
        }
	}
</script>

品牌和颜色都是单选, 但是可以协同过滤, 最后只需要根据操作设置正确的 filterBrand 和 filterColor, 商品列表就可以自动完成对品牌、颜色的筛选以及价格、销量的排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//	list.vue
<template>
	<div v-show="list.length">
		<div class="list-control"> 
			<div class="list-control-filter">
				<span>品牌:<span>
				<span
					class="list-controol-filter-item"
					:class="{on: item === filterBrand}"
					v-for="item in brands"
					@click="handleFilterBrand(item)">{{ item }}</span>
			</div>
			<div class="list-control-filter">
				<span>颜色: </span>
				<span
					class="list-control-filter-item"
					:class="{on: item === filterColor}"
					v-for="item in colors"
					@click="handleFilterColor(item)">{{ item }}</span>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
        methods: {
            //	筛选品牌
            handleFilterBrand (brand) {
                //	单次点击选中,再次点击取消选中
                if (this.filterBrand === brand){
                    this.filterBrand = '';
                } else {
                    this.filterBrand = brand
                }
            },
            //	筛选颜色
            handleFilterColor (color) {
                if (this.filterColor === color) {
                    this.filterColor = '';
                } else {
                    this.filterColor = color;
                }
            }
        }
	}
</script>

商品详情页

在 views 目录下新建 product.vue 文件, 并在 router.js 中添加商品详情的路由配制:

1
2
3
4
5
6
7
8
9
10
//	router.js
const routers = [
    {
        path: '/product/:id',
        meta: {
            title: '商品详情'
        },
        component: (resolve) => require(['./views/product.vue'], resolve)
    }
];

商品详情的路由接收一个参数 商品的 id. 常见的业务场景中, 会以 id 作为接口的索引, 查询出所有相关的数据. 为了使业务更好的解耦, 从商品类表页跳转至详情页时, 只传递一个商品的 id, 不需要其他任何数据

通过 $route 可以获取当前路由的参数, 并在页面初始化时请求该商品的数据, 从数据源 (product.js) 里通过数组的 find() 方法拿到指定 id 的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//	views/product.vue
<script>
	//	导入本地数据做匹配用
	import product_data from '../product.js';
	export default {
        data () {
            return {
                //	获取路由中的参数
                id: parseInt(this.$route.params.id);
                product: null
            }
        },
        methods: {
            getProduct () {
                setTimeout (() => {
                    this.product = product_data.find(item => item.id === this.id);
                }, 500);
            }
        },
        mounted () {
            //	初始化时, 请求数据
            this.getProduct();
        }
	}
</script>

然后将数据写入模板即可, 需要注意的是, 电商网站的详情页一般为自定义的文本和图片, 商家通过富文本编辑器以可视化的形式编辑好商品内容, 接口返回的是 HTML 片段, 可以直接用 v-html 指令渲染 HTML 内容, 但在服务器端要对提交的 HTML 做处理, 避免发生 XSS 攻击.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
//	views/product.vue
<template>
	<div v-if="product">
		<div class="product">
			<div class="product-image">
				<img :src="product.image">
			</div>
			<div class="product-info">
				<h1 class="product-name">{{ product.name }}</h1>
				<div class="product-cost">￥ {{ product.cost }}</div>
				<div class="product-add-cart"
					@click="handleAddToCart">加入购物车</div>
			</div>
		</div>
		<div class="product-desc">
			<h2>产品介绍</h2>
			<img v-for="n in 10"
				:src="'http://ordfm6aah.bkt.clouddn.com/shop/' + n + '.jpeg'">
		</div>
	</div>
</template>
<script>
	export default {
        methods: {
            //	加入购物车
            handleAddToCart () {
                this.$store.commit('addCart', this.id);
            }
        }
	}
</script>
<style scoped>
	.product {
        margin: 32px;
        padding: 32px;
        background: #fff;
        border: 1px solid #dddee1;
        border-radius: 10px;
        overflow: hidden;
	}
	.product-image {
        width: 50%;
        height: 550px;
        float: left;
        text-align: center;
	}
	.product-image img {
        height: 100%;
	}
	.product-info {
        width: 50%;
        padding: 150px 0 250px;
        height: 150px;
        float: left;
        text-align: center;
	}
	.product-cost {
        color: #f2352e;
        margin: 8px 0;
	}
	.product-add-cart {
        display: inline-block;
        padding: 8px 64px;
        margin: 8px 0;
        background: #2d8cf0;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
	}
	.product-desc {
        background: #fff;
        margin: 32px;
        padding: 32px;
        border: 1px solid #dddee1;
        border-radius: 10px;
        text-align: center;
	}
	.product-desc img {
        display: block;
        width: 50%;
        margin: 32px auto;
        padding: 32px;
        border-bottom: 1px solid #dddee1;
	}
</style>

购物车

最后也是最重要的一个环节, 就是在购物车完成结算

在购物车中, 每件商品最少要选 1 件, 不过可以删除, 每件商品会有价格小计. 可以使用优惠码, 使用后在总价的基础上减少 500 元, 总价会根据购买商品的数量动态计算. 右上角的购物车入口也会显示当前购物车商品的数量.

准备数据

因为将商品加入到购物车是通过 Vuex 来完成的. 在 main.js 中, 先来定义 Vuex 中的 state 和 mutations

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//	main.js
const store = new Vuex.Store({
    state: {
        productList: [],
        cartList: []
    },
    mutations: {
        //	添加到购物车
        addCart (state, id) {
            //	先判断购物车是否已有, 如果有, 数量 +1
            const isAdded = state.cartList.find(item => item.id === id);
            if (isAdded) {
                isAdded.count ++;
            } else {
                state.creatList.push({
                    id: id,
                    count: 1
                })
            }
        }
    }
});

数据 cartList 中保存购物车记录, 数据格式为数组, 每项是对象, 包含商品 id 和购买数量两个数据. addCart 方法接收参数为商品 id, 添加前先判断 cartList 中是否已存在商品, 存在则数量加 1, 不存在则写入

有了购物车数据, 剩余工作就是把数据显示出来, 并动态修改数据. 在 app.vue 中定义购物车入口和已添加数量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//	app.vue
<template>
	<div>
		<div class="header">
			<router-link
				to="/list"
				class="header-title">电商网站示例</router-link>
			<div class="header-menu">
				<router-link to="/cart" class="header-menu-cart">
					购物车
					<span v-if="cartList.length">{{ cartList.length }}</span>
				</router-link>
			</div>
		</div>
		<router-view></router-view>
	</div>
</template>
<script>
	export default {
        computed: {
            cartList () {
                return this.$store.state.cartList;
            }
        }
	}
</script>

在 views 目录中新建 cart.vue 文件, 并添加购物车路由:

1
2
3
4
5
6
7
8
9
10
//	router.js
const routers = [
    {
        path: '/cart',
        meta: {
            title: '购物车'
        },
        component: (resolve) => require(['./views/cart.vue'], resolve)
    }
]

cart.vue 中可以先准备好以下动态数据:

  • Vuex 中的购物车数据 cartList
  • product.js 中所有的商品数据
  • 将 product.js 中的数组转换为字典 productDictList 方便快速选取
  • 商品总数 countAll
  • 总费用 (不含优惠码) costAll
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//	cart.vue
<script>
	import product_data from '../product.js';
	export default {
        computed: {
            cartList () {
                return this.$store.state.cartList;
            },
            productDictList () {
                const dict = {};
                this.productList.forEach(item => {
                    dict[item.id] = item;
                });
                return dict;
            },
            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;
            }
        },
        data () {
            return {
                productList: product_data
            }
        }
	}
</script>

这些数据都使用了计算属性, 因此彼此互相依赖.

productDictList 是对象, key 是商品 id, value 是商品信息, 数据即为 product.js 中每项的内容, 通过 id 可以快捷地获取对应商品信息.

显示和操作数据

在下单前, 可以对每个商品的数量进行加减, 或者删除商品. 先将购物车数据 cartList 循环渲染, 并完成表格的样式.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
//	cart.vue
<template>
	<div class="cart">
		<div class="cart-header">
			<div class="cart-header-title">购物车</div>
			<div class="cart-header-main">
				<div class="cart-info">商品信息</div>
				<div class="cart-price">单价</div>
				<div class="cart-count">数量</div>
				<div class="cart-cost">小计</div>
				<div class="cart-delete">删除</div>
			</div>
		</div>
		<div class="cart-content">
			<div class="cart-content-main" v-for="(item, index) in cartList">
				<div class="cart-info">
					<img :src="productDictList[item.id].img">
					<span>{{ productDictList[item.id].name }}</span>
				</div>
				<div class="cart-price">
					￥ {{ productDictList[item.id].cost }}
				</div>
				<div class="cart-count">
					<span
						class="cart-control-minus"
						@click="handleCount(index, -1)">-</span>
					{{ item.count }}
					<span
						class="cart-control-add"
						@click="handleCount(index, 1)">+</span>
				</div>
				<div class="cart-cost">
					￥ {{ productDictList[item.id].cost * item.count }}
				</div>
				<div class="cart-delete">
					<span
						class="cart-control-delete"
						@click="handleDelete(index)">删除</span>
				</div>
			</div>
			<div class="cart-empty" v-if="!cartList.length">购物车为空</div>
		</div>
	</div>
</template>
<script>
	export default {
        methods: {
            handleCount (index, count) {
                if (count < 0 && this.cartList[index].count === 1) return;
                this.$store.commit('editCartCount', {
                    id: this.cartList[index].id,
                    count: count
                });
            },
            handleDelete (index) {
                this.$store.commit('deleteCart', this.cartList[index].id);
            }
        }
	}
</scrit>
<style scoped>
	.cart {
        margin: 32px;
        background: #fff;
        border: 1px solid #dddee1;
        border-radius: 10px;
	}
	.cart-header-title {
        padding: 16px 32px;
        border-bottom: 1px solid #dddee1;
        border-radius: 10px 10px 0 0;
        background: #f8f8f9;
	}
	.cart-header-main {
        padding: 8px 32px;
        overflow: hidden;
        border-bottom: 1px solid #dddee1;
        background: #eee;
        overflow: hidden;
	}
	.cart-empty {
        text-align: center;
        padding: 32px;
	}
	.cart-header-main div {
        text-align: center;
        float: left;
        font-size: 14px;
	}
	div.cart-info {
        width: 60%;
        text-align: left;
	}
	.cart-price {
        width: 10%;
	}
	.cart-count {
        width: 10%;
	}
	.cart-cost {
        width: 10%;
	}
	.cart-delete {
        width: 10%;
	}
	.cart-content-main {
        padding: 0 32px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-bottom: 1px solid #e9eaec;
        overflow: hidden;
	}
	.cart-content-main div {
        float: left;
	}
	.cart-content-main img {
        width: 40px;
        height: 40px;
        position: relative;
        top: 10px;
	}
	.cart-control-minus,
	.cart-control-add {
        display: inline-block;
        margin: 0 4px;
        width: 24px;
        height: 24px;
        line-height: 22px;
        text-align: 22px;
        background: #f8f8f9;
        border-radius: 50%;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        cursor: pointer;
	}
	.cart-control-delete {
        cursor: pointer;
        color: #2d8cf0;
	}
</style>

handleCount 方法用于修改购物车商品数量, 最小为 1; handleDelete 方法用于删除商品. 两者都根据接收的参数 index, 并从数据 cartList 中获取具体商品信息. 只传入 index, 而不是具体数据的好处是更灵活、便于扩展, 如果需求有所改变, 就需要修改 handleCount 里的逻辑, 不需要维护模板部分

这两个方法都交给了 Vuex 中的 mutations 来操作数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//	main.js
const store = new Vuex.Store({
    state: {
        cartList: []
    },
    mutations: {
        //	修改商品数量
        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.split(index, 1);
        }
    }
})

###

使用优惠码

优惠码功能使用到两个数据, promotionCode 和 promotion, 前者用于双向绑定输入框数据, 后者是优惠金额.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
//	cart.vue
<template>
	<div class="cart">
		<div class="cart-promotion" v-show="cartList.length">
			<span>使用优惠码:</span>
			<input type="text" v-module="promotionCode">
			<span
				calss="Cart-control-promotion"
				@click="handleCheckCode">验证</span>
		</div>
		<div class="cart-footer" v-show="cartList.length">
			<div class="cart-footer-desc">
				共计 <span>{{ countAll }}</span>件商品
			</div>
			<div class="cart-footer-desc">
				应付金额 <span>￥ {{ costAll - promotion }}</span>
				<br>
				<template v-if="promotion">
					(优惠 <span>￥ {{ promotion }}</span>)
				</template>
			</div>
			<div class="cart-footer-desc">
				<div
					class="cart-control-order"
					@click="handleOrder">现在结算</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
        data () {
            return {
                promotionCode: '',
                promotion: 0
            }
        },
        methods: {
            //	验证优惠码
            handleCheckCode () {
                if (this.promotionCode === '') {
                    window.alert('请输入优惠码');
                    return;
                }
                if (this.promotionCode !== 'YouHuiMa') {
                    window.alert('优惠码验证失败');
                } else {
                    this.promotion = 500;
                }
            },
            //	通知 Vuex 完成下单
            handleOrder () {
                this.$store.dispatch('buy').then(() => {
                    window.alert('购买成功');
                })
            }
        }
	}
</script>
<style scoped>
	.cart-promotion {
        padding: 16px 32px;
	}
	.cart-control-promotion,
	.cart-control-order {
        display: inline-block;
        padding: 8px 32px;
        border-radius: 6px;
        background: #2d8cf0;
        color: #fff;
        cursor: pointer;
	}
	.cart-control-promotion {
        padding: 2px 6px;
        font-size: 12px;
        border-radius: 3px;
	}
	.cart-footer {
        padding: 32px;
        text-align: right;
	}
	.cart-footer-desc {
        display: inline-block;
        padding: 0 16px;
	}
	.cart-footer-desc span {
        color: #f2352e;
        font-size: 20px;
	}
<style>

应付总额是实际商品总价减去优惠的价格, 因为优惠价 promotion 默认是 0, 可以不用判断是否使用了优惠码.

下单的操作通过 Vuex 的 action 完成, 下单成功后, 清空购物车数据. 因为下单要通知服务端, 所以要在 action 内完成.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//	main.js 
const store = new Vuex.Store({
    state: {
        cartList: []
    },
    mutations: {
        //	清空购物车
        emptyCart (state) {
            state.cartList = [];
        }
    },
    actions: {
        //	购买
        buy (context) {
            //	真实环境通过 ajax 提交购买请求后再清空购物列表
            return new Promise(resolve => {
                setTimeout(() => {
                    context.commit('emptyCart');
                    resolve();
                }, 500)
            })
        }
    }
})

在 action 中, 使用 setTimeout 模拟异步, 并通过返回一个 Promise 对象来通知 cart.vue 的handleOrder 购物完成

总结

在大中型项目中, 尤其是多人协同开发时, 最重要的是模块解耦. 对于公共组件, 要定义好 API, 公用数据要在 Vuex 或 bus 中统一维护. 在业务中, 要尽可能避免直接操作父链和子链来修改组件的状态, 对于跨级通信最好通过 Vuex 或 bus 完成.

在协同开发时, 可以将路由组件的内容拆分为多个组件, 由不同的人维护, 这样可以避免冲突, 是模块更清晰, 寻找 bug 也更有针对性. 公共配置还可以使用混合

打赏功能
-------------本文结束感谢您的阅读-------------
0%