關於Vue電商平臺專案的總結
該專案主要是仿照電商平臺，使用vue-router處理路由，主要實現資料的展示，其中在專案中，自己封裝瞭如下拉框，單選框等可複用元件。
第一：
App.vue: 實現首頁的header和footer,content部分採用vue-router方式進行切換。為首頁的logo標誌新增路由，在任一路由中點選logo都可跳轉到首頁.同時首頁中存在登入，註冊，關於，這三個功能的實現採用類似modal模態框的功能來實現。
1. 給logo圖片新增路由,點選跳轉到首頁
<router-link :to="{path: '/'}">
<img class="header-img" 2.關於登入，註冊，關於的dialog元件的實現。
這裡以登入dialog的實現為例：
<!-- 登入dialog -->
<myDialog :isShow="isShowLogDialog" @close="closeDialog('isShowLogDialog')">
<h3 slot="header-info">請登入</h3>
<!-- 登入表單元件 -->
<logForm slot="content-info" dialog.vue: 可複用的dialog彈出框元件，首先會存在一個遮罩層來模擬modal效果，同時彈出框出現和消失時會有動畫效果。該彈出框 通過props獲得父元件的資料，來控制彈出框的顯示和消失。當想要關閉彈出框時，通過this.$emit()來觸發父元件事件，在父元件中進行彈出框的關閉。 (因為一般不推薦在子元件中改變通過props獲取到的父元件資料。)
<template>
<div class="dialog">
<div 登入元件的實現：
<template>
<div class="logForm">
<div class="login">
<div class="login-info">
<label>使用者名稱</label>
<input class="input" type="text" placeholder="請輸入你的使用者名稱" v-model="userName"/>
<span class="errorInfo">{{userNameError.errorInfo}}</span>
</div>
<div class="login-info">
<label>密   碼</label>
<input class="input" type="password" placeholder="請輸入你的密碼" v-model="passWord" />
<span class="errorInfo">{{passWordError.errorInfo}}</span>
</div>
<div class="login-info">
<button @click="login">登入</button>
</div>
<p class="errorText">{{errorText}}</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
userName: '',
passWord: '',
errorText: ''
}
},
computed: {
/* 利用正則表示式進行表單驗證 */
userNameError () {
let reg = /^[a-zA-Z0-9]{4,12}$/
let errorInfo, status
if (!reg.test(this.userName)) {
status = false
errorInfo = '使用者名稱長度為4--16位，且只能是數字或字母'
} else {
status = true
errorInfo = ''
}
/* 第一次進入錯誤資訊不提示 */
if (!this.userNameFlag) {
errorInfo = ''
this.userNameFlag = true
}
return {
status,
errorInfo
}
},
passWordError () {
let reg = /^\w{6,12}$/
let errorInfo, status
if (!reg.test(this.passWord)) {
status = false
errorInfo = '密碼長度為6--12位'
} else {
status = true
errorInfo = ''
}
/* 第一次進入錯誤資訊不提示 */
if (!this.passWordFlag) {
errorInfo = ''
this.passWordFlag = true
}
return {
status,
errorInfo
}
}
},
methods: {
login () {
if (!this.userNameError.status || !this.passWordError.status) {
this.errorText = '請重新檢查你的輸入'
} else {
this.errorText = ''
this.$emit('has-login', this.userName)
}
}
}
}
</script>第二：
Index.vue：App.vue中的content內容，左側的產品內容及最新訊息內容都是以資料的形式渲染出來；右側中的輪播呼叫slideShow輪播元件，四個產品以資料的形式進行渲染。每個產品中，點選立即購買按鈕會跳轉到相應的路由。
slideShow.vue: 可複用的輪播幻燈片元件。由圖片和圖片說明資訊兩部分組成。輪播圖片資料通過props從父元件中獲取，獲取到的是一個存放圖片資訊的陣列，為標籤繫結圖片資訊，將所有圖片渲染出來。
detail.vue: 算是四個產品詳情頁資訊的控制者吧。採用vue-router路由切換方式展示四個產品的詳細資訊。為左側的圖片繫結路由對映，根據不同的的路由顯示所對應的不同圖片。
這個問題的主要是：當點選不同的產品時，會跳轉到相應的產品詳情頁。
我主要是為每一個點選按鈕綁定了路由，即：
<router-link :to="{path: 'detail/' + item.toKey}">
<button>點選購買</button>
</router-link>其中，toKey的值是指在路由配置中path的值。
這一點的實現現在想來還是比較簡單的。
還有一點就是：當我點選不同的產品時，出現的圖片是不一樣的，所以我為每張圖片綁定了路由對映。
<!-- 為圖片繫結路由對映 -->
<img :src="productImg" />
imgMap: {
'/detail/pro1': require('../../assets/board-item-images/1.jpg'),
'/detail/pro2': require('../../assets/board-item-images/2.jpg'),
'/detail/pro3': require('../../assets/board-item-images/3.jpg'),
'/detail/pro4': require('../../assets/board-item-images/4.jpg')
}
computed: {
productImg () {
return this.imgMap[this.$route.path]
}
}根據路由的變化顯示不同的圖片。
第三：
可複用單選框元件：
<!-- 單選radioChoose元件 -->
<radioChoose :selections="colorTypes" @selectChange="onParamChange('proType', $event)">
</radioChoose>
<template>
<div class="radioChoose-wrap">
<ul>
<li v-for="(item, index) in selections" :class="{active:index===nowIndex}" @click="chooseSelection(index)">
{{item.name}}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
selections: Array
},
data () {
return {
nowIndex: 0
}
},
methods: {
chooseSelection (index) {
this.nowIndex = index
this.$emit('selectChange', this.selections[index])
}
}
}
</script>單選框元件的實現：主要是從父元件中獲得資料，為每一個單選框繫結點選事件，當點選該單選框時，設定當前點選的index等於nowIndex。其中還要注意一點：為每一個單選框繫結 :class=”{active:index===nowIndex}”，只有當index等於nowIndex時，才會顯示選中的樣式。
第四：
可複用下拉框元件
<!-- 下拉框selection元件 -->
<selection :selections='districts' @selectChange="onParamChange('proPlaces', $event)">
</selection>
<template>
<div class="selection-wrap">
<div class="selection-title" @click="toggleDrop">
<span> {{ selections[nowIndex].name }} </span>
<div class="arrow"></div>
</div>
<div class="selection-list" v-show="isDrop">
<ul>
<li v-for="(item,index) in selections" @click="chooseSelection(index)">{{item.name}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: {
selections: Array
},
data () {
return {
nowIndex: 0,
isDrop: false
}
},
methods: {
toggleDrop () {
this.isDrop = !this.isDrop
},
chooseSelection (index) {
this.nowIndex = index
this.isDrop = !this.isDrop
this.$emit('selectChange', this.selections[this.nowIndex])
}
}
}
</script>
下拉框元件的實現：從父元件中獲得資料，預設顯示陣列中的第一個，為顯示框設定點選事件，為下拉列表繫結v-show屬性，通過點選事件，來改變v-show屬性的值，實現下拉列表的顯示與隱藏。
還有一點就是實現點選下拉列表中的某一項：文字框中會自動顯示點選的內容，這主要是為每一項繫結一個點選函式，函式中傳入當前點選的index值，並且設定index等於nowIndex，來實現點選時的切換。
第五：
使用localStorage來儲存使用者的購買資訊。
首先使用者獲得自己的購買資訊，是通過每次選擇完商品屬性時，通過$emit()向父元件傳遞當前所選中的資訊，然後將這些資訊儲存在localStorage中。
因為這些資訊資訊是以json資料的格式進行儲存的，而localStorage中只能儲存字串，所以我通過JSON.stringify()將json物件轉化為字串儲存在本地儲存中，當用戶想要檢視購買資訊是，在從本地儲存中獲取。