Vue全家桶實現一個購物Web App
阿新 • • 發佈:2019-01-03
好的生活,聚集美麗,成人之美!從現在做起!http://www.tuicool.com/articles/EBbmAjr
效果預覽
PS:google瀏覽器在切換不同的手機測試,需要重新重新整理頁面;安卓手機可能不適應
:point_right:原始碼地址: Github在這裡
專案描述
技術棧
Vue2.0全家桶 + axios + Vuex + Mint-Ui + Mock.js + Stylus
前端部分
- Vue2.0 前端頁面的展示
- SPA單頁應用,前端後分離
- Stylus css預編譯
- Axios 非同步資料的請求
- localStorage 個人資訊以及購物車資訊的儲存
- ES6 Js語言的標準
- Mint_UI 實現圖片輪播,圖片懶載入等等
- Better-Scroll 實現移動端滾動,讓滾動更加協調
- flexible.js和rem,解決移動端裝置相容
後端部分
- Mock.js 實現後端資料的託管
待更新的功能
- 後端平臺搭建,利用新一代的Koa伺服器框架
- 訂單頁面的展示
- 商家頁面的請求
- 下拉,載入更多的商品資料
實現功能
首頁
- 1、tabbar切換
- 2、優惠商品倒計時
- 3、活動的商品的推薦
- 4、swiper滑動,切換頁面
- 5、搜尋框
- 6、首頁不同頁面的展示
商品詳情
- 1、商品圖片放大顯示
- 2、商品具體的顯示、評論、圖片展示
- 3、加入購車車頁面彈窗,選擇商品的種類,以及數量
- 4、商品加入購物車,動畫
購物車
- 1、登入狀態判斷
- 2、全選,以及非全選的切換
- 3、新增商品、以及減少與刪除
個人
- 1、賬戶的登入
- 2、註冊賬戶
- 3、設定頁面
總結
- 1、熟悉使用Vue2.0
- 2、在專案中,將元件進行分離,編寫可以複用的元件,提高效率
- 3、Vuex的狀態管理模組,統一的狀態的管理,讓我們更好的去對資料操作
- 4、util的工具,倒計時js
- 5、對axios有更進一步的理解,利用cros進行跨域處理
- 6、進行路由的懶載入,優化頁面載入
具體功能實現
路由結構
export default new Router({
routes: [
{ //這裡要設定一個預設的主頁面 後面才起作用 /代表根目錄
path: '/',
name: 'index' ,
component: resolve => require(['@/pages/index/index'], resolve),
redirect: '/index/page1'
},
{
path: '/index',
component: resolve => require(['@/pages/index/index'], resolve),
meta: {keepAlive: true},
children: [
{
path: '',
component: resolve => require(['@/pages/index/index'], resolve)
},
{
path: 'page1',
name: 'page1',
component: resolve => require(['@/pages/index/page1'], resolve)
},
{
path: 'page2',
name: 'page2',
component: resolve => require(['@/pages/index/page2'], resolve)
},
{
path: 'page3',
name: 'page3',
component: resolve => require(['@/pages/index/page3'], resolve)
},
{
path: 'page4',
name: 'page4',
component: resolve => require(['@/pages/index/page4'], resolve)
},
{
path: 'page5',
name: 'page5',
component: resolve => require(['@/pages/index/page5'], resolve)
},
{
path: 'page6',
name: 'page6',
component: resolve => require(['@/pages/index/page6'], resolve)
},
{
path: 'page7',
component: resolve => require(['@/pages/index/page7'], resolve)
},
]
},
{
path: '/brandsale',
name: 'brandSale',
component: resolve => require(['@/pages/brandsale/index'], resolve)
},
{
path: '/livecommunity',
name: 'liveCommunity',
component: resolve => require(['@/pages/livecommunity/index'], resolve)
},
{
path: '/shopcart',
name: 'shopCart',
component: resolve => require(['@/pages/shopCart/index'], resolve)
},
{
path: '/myself',
name: 'mySelf',
component: resolve => require(['@/pages/mySelf/index'], resolve)
},
{
path: "/setter",
name: 'setter',
component: resolve => require(['@/pages/mySelf/setter'], resolve)
},
{
path: '/login',
name: 'login',
component: resolve => require(['@/pages/mySelf/login'], resolve)
},
{
path: '/product',
name: 'product',
component: resolve => require(['@/pages/product/index'], resolve),
redirect: '/product/info',
children: [
{
path: 'info',
name: 'productInfo',
component: resolve => require(['@/pages/product/info'], resolve)
},
{
path: 'detail',
name: 'productDetail',
component: resolve => require(['@/pages/product/detail'], resolve)
},
{
path: 'comment',
name: 'productComment',
component: resolve => require(['@/pages/product/comment'], resolve)
}
]
},
]
})
Vuex狀態管理
這裡我貼出購物車模組。它的使用場景:新增商品到購物車,更新商品的資訊、進行增刪,並且在操作過程中,將資料儲存到
localStorage,持久儲存,由於後臺伺服器尚未搭建,利用這樣來保持資料的儲存。
import * as types from '../mutation-types.js'
const storage = window.localStorage
const state = {
added: [],
checkoutStatus: null
}
const getters = {
checkoutStatus: state => state.checkoutStatus,
cartLists: state => state.added
}
const mutations = {
[types.ADD_TO_CART] (state, product) {
let id = product.id
const record = state.added.find(p => p.id === id && p.type === product.type)
// 解決方法一 找到資料遍歷一次
// 方法二 是獲取到父級的資料
if (!record) {
state.added.push(product)
} else {
record.quantity += product.quantity
}
storage.setItem('cart', JSON.stringify(state.added))
},
//傳入商品的資訊 product id和型別判斷當前儲存的商品 要修改的數量
// 更新產品的資料
[types.UPDATE_THIS_PRODUCT] (state, product) {
let {id,type,quantity} = product //物件的解構
const record = state.added.find(p => p.id===id &&p.type===type)
if (quantity>0) {
record?record.quantity = quantity : ''
} else {
// 傳入的商品數量為0 就刪除這個商品 刪除指定的序號的商品
let index = state.added.indexOf(record)
state.added.splice(index,1)
}
storage.setItem('cart', JSON.stringify(state.added))
},
}
export default {
state,
getters,
mutations
}
來個廣告,拍賣自己!!!
- :point_right:jerrylee: 感興趣請點我,這是我的簡歷
- :point_right:微訊號:JerryLeelisa
- :point_right:電 話:15279106115
- :point_right:郵 箱:[email protected]
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For detailed explanation on how things work, checkout theguide anddocs for vue-loader.