iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
0
Modern Web

Vue.js 30天隨身包系列 第 22

Day22 - [Vuex實作-購物車(2)] 商品頁面

我們將購物車分兩個主要頁面來寫:商品頁面與購物車頁面,這天我們先寫商品頁面。

https://ithelp.ithome.com.tw/upload/images/20180118/20107673AMZ8xoZYEc.png

前置作業:Vuex安裝、引入專案與新增Vuex需要的檔案

Vuex安裝

記得路徑要切換到專案底下喔!

$ npm install vuex --save

將Vuex引入專案

修改src/router/index.js,引入Vuex並使用:

import Vuex from 'vuex'

Vue.use(Vuex)

先修改下方export方法內的routes的,將預設的HelloWorld元件刪除,以便之後使用:

https://ithelp.ithome.com.tw/upload/images/20180118/20107673fxNoOJPTUy.png

新增Vuex需要的檔案

我將使用Vuex Module來管理架構,因為當我們App狀態一變多及複雜時,存放狀態的store會變得很龐大,因此Vuex允許我們將store切割成一個一個模組(module),而每個module都擁有自己的statemutationactiongetter

因此我們將前一篇建立的專案,新增一些檔案,之後我們就是編輯這些檔案來做Vuex專案。

需要新增的檔案如下:

  • src目錄下新增一個store資料夾,裡面新增一個modules資料夾,需要新增的檔案可以參考下圖。
  • src/components下新增pagesshared資料夾,為的是好管理元件檔案。

https://ithelp.ithome.com.tw/upload/images/20180118/20107673WFEXL1z1VC.png

製作共用navbar

1. 先到BootstrapFont Awesome官網下載套件,並將它們的css、fonts等資料夾放入Vue專案。

我使用的版本:Bootstrap 3.3.7 & Font Awesome 4

因為Font Awesome我只會使用它的css,所以我將這些資料夾複製放到專案根目錄下的src/assets內(參考下圖):

https://ithelp.ithome.com.tw/upload/images/20180118/20107673wjvNWik3YM.png

2. 修改src/main.js,引入Bootstrap與Font Awesome:

// 引入Bootstrap與Font Awesome
import './assets/css/bootstrap.css'
import './assets/css/font-awesome.css'

3. 修改src/components/shared/navbar.vue

<template>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <router-link to="/" class="navbar-brand">Shopping Cart</router-link>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <router-link to="/cart" tag="li"><a><i class="fa fa-shopping-cart"></i></a></router-link>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script>
export default {
    
}
</script>

4. 修改src/App.vue

<template>
    <div id="app">
        <navbar></navbar>
        <router-view/>
    </div>
</template>

<script>
import navbar from './components/shared/navbar.vue'
export default {
    name: 'App',
    components: {
        navbar: navbar
    }
}
</script>

<style>
#app {
    font-size: 18px;
}
#app .commonbtn {
    font-size: 18px;
    padding: 10px 30px;
    border: 1px solid #FF7744;
    color: #FF7744;
}
#app .commonbtn:hover {
    background: #FF7744;
    color: #fff;
}
</style>

5. 修改src/components/pages/shop.vue

<template>
    <div class="container">
        <p>Welcome to Shopping Mall~</p>
        <p><router-link to="/products">Product List</router-link></p>
    </div>
</template>

<script>
export default {

}
</script>

6. 修改src/router/index.js

// 引入components
import shop from '@/components/pages/shop'
import products from '@/components/pages/products'
import shoppingcart from '@/components/pages/shoppingCart'

export default new Router({
  routes: [
    {
        path: '/',
        component: shop
    },
    {
        path: '/products',
        component: products
    },
    {
        path: '/cart',
        component: shoppingcart
    }
  ]
});

7. 下npm run dev指令編譯並啟動http server,打開瀏覽器輸入http://localhost:8080/#/,看看結果有沒有像是以下的畫面:

https://ithelp.ithome.com.tw/upload/images/20180118/20107673ZHf8ovBaJS.png

商品頁面

1. 先刻出UI介面:修改src/components/pages/products.vue

<template>
	<div class="container">
		<div class="row">
			<div class="col-sm-3">
				<img src="http://ww1.sinaimg.cn/mw690/005MkxmCgw1emff4u3rtej30cu0cnwez.jpg" class="products-img">
			</div>
			<div class="col-sm-6">
				<p>商品名稱:xxx</p>
				<p>單價:$ XXX</p>
				<p>規格:xxx</p>
				<p>數量:
					<button class="btn btn-default" @click="addCount()">+</button>
					<span class="products-count-number">{{ productCount }}</span>
					<button class="btn btn-default" @click="minusCount()">-</button>
					  剩下數量:xxx
				</p>
				<button class="btn btn-default commonbtn">加入購物車</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data: function() {
		return {
			productCount: 1
		}
	},
	methods: {
		addCount: function() {
			this.productCount++;
		},
		minusCount: function() {
			this.productCount--;
		}
	}
}
</script>

<style scoped>
.products-img {
	width: 100%;
	border: 1px solid #AAA;
	padding: 10px;
}
.products-count-number {
	padding: 10px;
}
</style>

套用vuex:[[ to be continued ]]


參考資料


上一篇
Day21 - [Vuex實作-購物車(1)] Vuex環境安裝與建立新專案
下一篇
Day23 - [Vuex實作-購物車(3)] 購物車頁面
系列文
Vue.js 30天隨身包30

尚未有邦友留言

立即登入留言