github:https://github.com/qiuChengleiy/shop-vue
shop-vue移動(dòng)端商城
項(xiàng)目概要
本項(xiàng)目用到的技術(shù)棧： vue-cli + vue-router + vuex + axios + vue-axios + vant( UI )
如何在本地運(yùn)行本項(xiàng)目
git clone git@github.com:qiuChengleiy/shop-vue.git
cd shop-vue
npm i 或 cnpm i //安裝項(xiàng)目依賴(lài) 建議使用淘寶鏡像源 cnpm 安裝 具體參考官網(wǎng)cnpm.taobao.org
npm run dev //運(yùn)行項(xiàng)目服務(wù) 在瀏覽器：localhost:8080/ 查看
如果運(yùn)行不成功請(qǐng)查看是否缺少配置文件 比如.babelrc或者嘗試用vue-cli初始化一個(gè)vue項(xiàng)目再將本項(xiàng)目移植進(jìn)去
真機(jī)體驗(yàn) APK（限安卓)
真機(jī)體驗(yàn)可能會(huì)帶來(lái)不流暢卡頓等現(xiàn)象 建議使用Chrome瀏覽器體驗(yàn)
項(xiàng)目文檔說(shuō)明
項(xiàng)目結(jié)構(gòu)
├── build/ # 項(xiàng)目打包配置文件 vue-cli 初始化的文件
├── node_modules/ #模塊文件
├── config/ #配置文件 vue-cli 初始化的配置
├── dist/ #打包后的文件存放目錄
├── src/ #項(xiàng)目入口目錄
├── assets/ #前端資源目錄
├── css/ # 樣式表目錄/less文件存放目錄
├── components/ # vue組件目錄/.vue文件存放目錄
├── about.vue # 項(xiàng)目介紹組件
├── active.vue # 活動(dòng)版塊組件
├── buyInfo.vue # 購(gòu)買(mǎi)信息組件
├── community.vue # 社區(qū)組件
├── goodsInfo.vue # 商品信息組件
├── home.vue # 首頁(yè)組件
├── login.vue # 登錄注冊(cè)組件
├── me.vue # 用戶(hù)組件
├── news.vue # 社區(qū)文章信息組件
├── orderList.vue # 訂單列表組件
├── orderPay.vue # 訂單支付組件
├── search.vue # 搜索版塊組件
├── shoppingCart.vue # 購(gòu)物車(chē)組件
├── swiper.vue # 輪播公用組件
├── router/ # vue路由管理目錄
├── index.js # 路由主文件
├── store/ # vuex狀態(tài)管理目錄
├── Core_store/ # store對(duì)象目錄
├── active.js # 活動(dòng)頁(yè)的狀態(tài)管理
├── community.js # 社區(qū)的狀態(tài)管理
├── home.js # 主頁(yè)狀態(tài)管理
├── index.js # 狀態(tài)管理入口主文件
├── App.vue # 項(xiàng)目根組件
├── main.js # 項(xiàng)目入口文件
├── static/ #靜態(tài)文件存放目錄
├── images/ # 圖片資源
├── data.json # mock數(shù)據(jù)
├── test/ #測(cè)試目錄
├── package.json #包文件信息
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcsssrc.js
├── index.html
├── README.md
├── vue-shop.apk
功能簡(jiǎn)單介紹
main.js 項(xiàng)目入口文件
在主文件中，把所需要的模塊加進(jìn)來(lái)，vant的框架因?yàn)榈谝淮斡茫砸膊恢谰唧w加啥組件，所以索性都編譯進(jìn)去了~ 這也導(dǎo)致了編譯的速度有點(diǎn)稍慢
狀態(tài)方面也對(duì)它做了簡(jiǎn)單的封裝 /store/
//導(dǎo)入所需模塊
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
//axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
//狀態(tài)管理
import vuex from 'vuex'
Vue.use(vuex);
//ui 框架
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
//懶加載
import { Lazyload } from 'vant';
Vue.use(Lazyload);
//瀑布流
import { Waterfall } from 'vant';
Vue.use(Waterfall);
import store from './store/index'
/* VUE實(shí)例 */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
路由管理
在這里把需要跳轉(zhuǎn)的組件都加進(jìn)來(lái)，配合vue-router使用，因?yàn)闃I(yè)務(wù)邏輯不是很復(fù)雜，所以這里沒(méi)有用子路由跳轉(zhuǎn),都是簡(jiǎn)單的路由處理
在js中控制路由跳轉(zhuǎn)：
this.$router.push(url);
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import Search from '@/components/search'
import GoodsInfo from '@/components/goodsInfo'
import Buy from '@/components/buyInfo'
import Pay from '@/components/orderPay'
import Community from '@/components/community'
import ShopingCart from '@/components/shoppingCart'
import Me from '@/components/me'
import Login from '@/components/login'
import About from '@/components/about'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/search',
name: 'search',
component: Search,
},
{
path:'/goods/:id',
name:'goodsInfo',
component:GoodsInfo,
},
{
path:'/goods/:id/buy',
name:'buyInfo',
component:Buy,
},
{
path:'/goods/:id/buy/pay',
name:'pay',
component:Pay,
},
{
path:'/community',
name:'community',
component:Community,
},
{
path:'/shoppingCart',
name:'shoppingCart',
component:ShopingCart,
},
{
path:'/me',
name:'Me',
component:Me,
},
{
path:'/login',
name:'login',
component:Login,
},
{
path:'/register',
name:'register',
component:Login,
},
{
path:'/about',
name:'aboutMe',
component:About,
},
{
path:'*',
redirect:'/'
}
]
})
狀態(tài)管理
- 對(duì)口處進(jìn)行了簡(jiǎn)單的封裝 方便后續(xù)管理
- 其他部分文件導(dǎo)出均是各模塊所需的對(duì)象
- 在組件中引入即可
import { mapState,mapActions,mapGetters } from 'vuex';
computed: {
...mapState({
title: state => state.home.tab.title,
icon: state => state.home.badge.icon,
bageTitle: state => state.home.badge.title,
actives: state => state.active.home.title,
src : state => state.home.lunbo.src,
activeTitle: state => state.active.home.activeTitle,
days: state => state.active.home.days,
broadcast: state => state.home.broadcast,
shop_info: state => state.home.shop_info,
my_info: state => state.home.my_info,
show: state => state.home.show,
}),
...mapGetters(['bc_notshow','search_show']),
},
methods: {
...mapActions([
'searchA'
]),
//index.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
//引入store對(duì)象
import home from './Core_store/home';
import active from './Core_store/active';
import community from './Core_store/community';
export default new vuex.Store({
modules: {
home: home,
active:active,
community:community,
}
})
// home.js
export default {
state:{
tab:{
title:['','今日推薦','時(shí)尚','美妝','家電','家居','國(guó)際','生活'],
},
badge:{
icon:['icon_1','icon_2','icon_8','icon_4','icon_5','icon_6','icon_7','icon_10'],
title:['鞋包館','運(yùn)動(dòng)館','母嬰館','超市','女裝館','美妝館','男裝館','更多'],
},
imageList:[],
broadcast:[],
bc:true,
show:true,
sshow:false,
shop_info:4,
my_info:2,
buyInfo:{
img:[],
},
orderShow:false,
numO:null,
},
mutations: {
search_(state) {
state.show = false;
},
buySearch(state,img) {
state.buyInfo.img[0] = img;
console.log(state.buyInfo.img);
},
orderShow_(state) {
state.orderShow ? state.orderShow = false : state.orderShow = true;
setTimeout(() => {
state.orderShow = false;
}, 22000);
},
addNum(state,e) {
state.numO = e;
console.log(e);
},
shopCartInfo(state) {
console.log(state.shop_info);
state.shop_info+=4;
}
},
actions: {
searchA(context,e) {
context.commit('search_');
},
buyParam(context,img) {
context.commit('buySearch',img);
},
orderShows(context) {
context.commit('orderShow_');
},
orderNum(context,e) {
context.commit('addNum',e);
},
infoAction(context) {
context.commit('shopCartInfo');
}
},
getters: {
bc_notshow(state){
setTimeout(() => {
state.bc = false;
}, 20000);
return state.bc;
},
}
}
組件
- 在寫(xiě)組件的過(guò)程中遇到的一些問(wèn)題：
// 1. 當(dāng)使用ui組件時(shí) 部分樣式無(wú)法直接在css中更改，解決辦法： 通過(guò)自定義指令，調(diào)用原生方法用JS重寫(xiě)樣式，將指令綁定到相應(yīng)的組件上
// 2. 在開(kāi)發(fā)過(guò)程中，很多部分都是一樣的，所以編寫(xiě)可復(fù)用的組件很重要， 比如輪播 懶加載圖片
// 3. 隨著功能的增多，組件的體積也變得龐大，冗余的代碼有點(diǎn)多
// 4. 組件之間的狀態(tài)要更多的互通性，使得各組件互相關(guān)聯(lián)起來(lái)
// 5. 在向后臺(tái)發(fā)起請(qǐng)求時(shí) 對(duì)組件進(jìn)行數(shù)據(jù)渲染時(shí)，判斷難免會(huì)多，當(dāng)相同的判斷時(shí)用switch 比 if 會(huì)更加舒服一點(diǎn)
- 組件相關(guān)的開(kāi)發(fā)，具體到/components/里查看
mock數(shù)據(jù)
- 簡(jiǎn)單模擬了一下數(shù)據(jù),因?yàn)閼械萌デ袌D了，所以直接用的圖片地址，而且也更加方便測(cè)試
{
"home":{
"lunbo":{
"home":[
"https://a2.vimage1.com/upload/flow/2018/06/12/50/15287856410421.jpg",
"https://a3.vimage1.com/upload/flow/2018/06/06/29/15282588215380.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/11/129/15287110698394.jpg",
"https://a3.vimage1.com/upload/flow/2018/06/11/79/15286841592012.jpg"
],
"meizhuang":[
"https://a3.vimage1.com/upload/flow/2018/06/11/123/15287145413911.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/12/104/15287681714987.jpg",
"https://a3.vimage1.com/upload/flow/2018/06/12/77/15287678981404.jpg"
],
"jiadian":[
"https://a3.vimage1.com/upload/flow/2018/06/12/65/15287673095242.jpg",
"https://a3.vimage1.com/upload/flow/2018/06/11/169/15287297288138.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/11/78/15287120642222.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/08/161/15284659187259.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/08/119/15284419569224.jpg"
],
"jiaju":[
"https://a2.vimage1.com/upload/flow/2018/06/11/151/15287113456414.jpg",
"https://a3.vimage1.com/upload/flow/2018/06/11/137/15287118337181.jpg",
"https://a4.vimage1.com/upload/flow/2018/06/12/83/15287340857050.jpg",
"https://a3.vimage1.com/upload/flow/2018/06/11/190/15287119563873.jpg"
],
"guoji":[
"https://a4.vimage1.com/upload/flow/2018/03/09/186/15205868083347.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/08/123/15284718303958.jpg"
],
"shenghuo":[
"https://a2.vimage1.com/upload/flow/2018/06/11/100/15287234758123.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/12/105/15287757783356.jpg",
"https://a4.vimage1.com/upload/flow/2018/06/11/85/15287233692932.jpg"
]
},
"imageList":[
"https://a3.vimage1.com/upload/flow/2018/06/11/194/15286863014296.jpg",
"https://a.vimage1.com/upcb/2018/06/11/120/ias_152869995885967_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/11/115/ias_152870605995543_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/06/144/ias_152825513726419_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/08/51/ias_152842946434501_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/12/137/ias_152878266391137_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/06/67/ias_152827678595317_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/08/109/ias_152845118539325_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/06/92/ias_152827324042112_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/12/123/ias_152877345994463_604x290_80.jpg"
],
"shishangImglist":[
"https://b.vimage1.com/upload/mst/2018/06/11/48/71e35131673e743e0ec9079dca1ced73_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/05/30/102/d23b59694ad34bb00dbe8178bad13f77_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/12/121/18fd0f7347a63950fbe3aca8183da448_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/11/41/ias_152869536334678_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/08/88/ias_152844371626949_604x290_80.jpg",
"https://a3.vimage1.com/upload/flow/2018/06/12/131/15287706240279.jpg",
"https://a.vimage1.com/upcb/2018/05/31/146/ias_152773404529400_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/10/88/980541d3f3f1296b5452171873cd975b_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/07/99/cc7152ad509339bc5f0dfc84b25cdb65_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/10/12/cea85a7b12a8df861088425200b43b1e_604x290_80.jpg"
],
"meizhuangImglist":[
"https://b.vimage1.com/upload/mst/2018/06/11/53/0bb659b137130f45de936fce60f99431_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/12/30/bfc7291561078ad05047d275cfddfca7_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/07/39/ias_152837250337311_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/02/174/ias_152791504299532_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/04/172/ias_152808517547013_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/06/9/ias_152825409267894_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/02/09/77/ias_151814376124213_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/09/106/ias_152585776124735_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/12/137/ias_152878266391137_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/04/12/22/ias_152351476783062_604x290_80.jpg"
],
"jiadianImglist":[
"https://b.vimage1.com/upload/mst/2018/06/11/128/991614fa794aa1809627c300e05a8767_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/11/161/b9bc72faac0e8cc0f8a557221b31bc9d_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/07/17/ias_152836114644876_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/02/02/165/ias_151754855585473_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/07/53/ias_152836466385103_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/10/153/ias_152591865270589_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/07/155/ias_152836765612517_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/16/130/ias_152646048078501_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/18/169/ias_152663431694211_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/05/176/ias_152816254162219_604x290_80.jpg"
],
"jiajuImglist":[
"https://b.vimage1.com/upload/mst/2018/06/08/0/cbd1732180e834a27b8874a4e69f66b4_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/07/23/0869529ca3761386b0e9130b3c1f5a2e_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/05/15/3e870b33cec90e43d63d0fb9cc579098_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/05/119/ias_152820199998884_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/07/123/74ce5a3e4e88972470d78414d10345fe_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/09/178/ias_152851554068030_604x290_80.jpg",
"https://a.vimage1.com/upcb/2017/08/15/76/ias_150278253968565_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/11/21/ias_152602611864772_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/02/09/142/ias_151814287717429_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/07/28/ias_152835216343248_604x290_80.jpg"
],
"guojiImglist":[
"https://b.vimage1.com/upload/mst/2018/06/11/143/002d5f9a2948e6aed66c1afd97ddc47c_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/08/90/f50425f591d46d32732d83397edf6012_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/01/31/55/ias_151737470529280_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/01/31/69/ias_151737515244688_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/24/46/ias_152714751025939_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/11/171/ias_152602721897866_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/04/10/87/ias_152334067320117_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/02/27/19/ias_151971744197878_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/11/115/ias_152868514634331_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/05/14/94/3ee39731e9b34c63872bbf2bf4b8dc28_604x290_80.gif"
],
"shenghuoImglist":[
"https://a.vimage1.com/upcb/2018/05/10/178/ias_152593779756191_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/24/42/ias_152715382693755_604x290_80.jpg",
"https://b.vimage1.com/upload/mst/2018/06/05/49/dc369f96734691b316bb6126f2f3c3b3_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/07/174/ias_152835318617869_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/06/12/184/ias_152877000079292_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/10/72/ias_152592429461132_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/04/27/32/ias_152482888135847_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/11/67/ias_152602436411366_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/02/26/152/ias_151961860066199_604x290_80.jpg",
"https://a.vimage1.com/upcb/2018/05/14/185/ias_152626794854550_604x290_80.jpg"
],
"broadcast":["forge商城移動(dòng)端app1.0版本正式發(fā)布 歡迎來(lái)體驗(yàn) ^_^ pc端響應(yīng)式站點(diǎn)即將將上線~~~ 歡迎來(lái)戳 作者QQ:1421546334 Email:qcl9701s666@163.com Github:https://github.com/qiuChengleiy"],
"active":{
"tuijian_title":["新人專(zhuān)享","8折起 春夏新品官方店","0.5折起 朗姿集團(tuán)女裝專(zhuān)場(chǎng)","3折起 耐克Nike男女運(yùn)動(dòng)專(zhuān)場(chǎng)","1.4折起 170元組合紅包-真美詩(shī)","3.1折起 歐萊雅Loreal化妝品專(zhuān)場(chǎng)","1.2折起 原創(chuàng)藝術(shù)專(zhuān)場(chǎng)-富安娜集團(tuán)","0.9折起簡(jiǎn)狐女裝年輕媽媽裝","2.2折起 潮牌-芬克鯊魚(yú)FinkShark女裝","2.1折起 妖精的口袋ELFSACK女裝專(zhuān)場(chǎng)"],
"shishang_title":["時(shí)尚風(fēng)暴","1件8.5折-仙潮女裝","時(shí)尚風(fēng)暴 仙潮女裝","0.7折起 雅瑩家族旗下品牌女裝專(zhuān)場(chǎng)","6.1折起 法國(guó)貝德瑪潔顏?zhàn)o(hù)膚專(zhuān)場(chǎng)","1折起 阿萊蒂爾女裝專(zhuān)場(chǎng)","2.1折起 百麗男女鞋專(zhuān)場(chǎng)","時(shí)尚風(fēng)暴-潮尚鞋包","時(shí)尚風(fēng)暴-時(shí)髦男裝","時(shí)尚風(fēng)暴-童裝童鞋"],
"meizhuang_title":["世界杯High購(gòu)節(jié)-美妝個(gè)護(hù)","美妝熱賣(mài)推薦","5.1折起 雅詩(shī)蘭黛化妝品","1.6折起 丸美MARUBI護(hù)膚專(zhuān)場(chǎng)","4.1折起 The History of Whoo專(zhuān)場(chǎng)","4.1折起 瑪麗黛佳彩妝專(zhuān)場(chǎng)","2.3折起 自然堂CHANDO化妝品專(zhuān)場(chǎng)","4.1折起 玉蘭油Olay護(hù)膚專(zhuān)場(chǎng)","3.1折起 歐萊雅Loreal化妝品專(zhuān)場(chǎng)","6.5折起 SK-ll化妝品專(zhuān)場(chǎng)"],
"jiadian_title":["612粽香端午節(jié)-小家電","612粽香父親節(jié)-一級(jí)數(shù)碼開(kāi)售","2.3折起 艾美特電風(fēng)扇","3.3折起 歐樂(lè)口腔護(hù)理專(zhuān)場(chǎng)","2.2折起 蘇泊爾電器專(zhuān)場(chǎng)","8.7折起 小米智能酷玩專(zhuān)場(chǎng)","1.7折起 美的廚電專(zhuān)場(chǎng)","1.7折起 科斯沃掃地機(jī)器人專(zhuān)場(chǎng)","8.2折起 BEATS時(shí)尚耳機(jī)專(zhuān)場(chǎng)","3折起 松下panasonic個(gè)人護(hù)理專(zhuān)場(chǎng)"],
"jiaju_title":["父親節(jié) 一起愛(ài)爸!","世界杯High購(gòu)節(jié)-家居家紡","超級(jí)預(yù)付-家居家紡","1.5折起 限時(shí)特惠","616 年中尖貨購(gòu)","2.5折起 H&3收納日用專(zhuān)場(chǎng)","3.7折起 日本TIGER虎牌保溫杯專(zhuān)場(chǎng)","3.3折起 潔柔紙品直降專(zhuān)場(chǎng)","2.7折起 寶家潔 清潔用品專(zhuān)場(chǎng)","2.2折起 父愛(ài)如蔭-博洋特惠家紡專(zhuān)場(chǎng)"],
"guoji_title":["安瓶助'仙'","國(guó)際616盛夏狂歡","4.3折起 日本Moony尤尼佳嬰","3.5折起 日本花妝嬰兒","3.7折起 日本澳洲Swisess天然營(yíng)養(yǎng)膳食專(zhuān)場(chǎng)","5.7折起 阿迪達(dá)斯經(jīng)典休閑鞋","9折起 韓國(guó)宮廷化妝品專(zhuān)場(chǎng)","6.3折起 韓國(guó)時(shí)尚女裝專(zhuān)場(chǎng)","國(guó)際616盛夏狂歡-澳洲專(zhuān)場(chǎng)","韓國(guó)風(fēng)尚"],
"shenghuo_title":["0.7折起 良品鋪?zhàn)有蓍e零食專(zhuān)場(chǎng)","1.6折起 三只松鼠零食專(zhuān)場(chǎng)","616預(yù)付-生活超市","1.7折起 八馬茗茶專(zhuān)場(chǎng)","2.2折起 百草味休閑零食專(zhuān)場(chǎng)","1.8折起 拉菲美酒專(zhuān)場(chǎng)","3.1折起 湯臣倍保健食品專(zhuān)場(chǎng)","2.2折起 新牧歌牛肉干食品專(zhuān)場(chǎng)","9.4折起 伊利牛奶專(zhuān)場(chǎng)","2.8折起 瀘州老窖美酒專(zhuān)場(chǎng)"],
"days":["2","2","3","1","2","1","3","1","2","1"]
}
},
"goods":{
"id_0":{
"title":[
["耐克Nike AIR ZOOM PEGASUS 34 男款跑鞋","耐克Nike TESSEN 女款運(yùn)動(dòng)鞋","耐克Nike WMNS NIKE COURT ROYALE 女款運(yùn)動(dòng)板鞋","耐克Nike 彈力透氣 中性款襪子 三對(duì)裝"],
["耐克Nike CLASSIC CORTEZ LEATHER 女款運(yùn)動(dòng)鞋","耐克Nike 舒爽快干 男款運(yùn)動(dòng)短褲","耐克Nike 排汗純棉 男款短袖T恤","耐克Nike TANJUN 男款運(yùn)動(dòng)鞋"]
],
"description":["耐克運(yùn)動(dòng)跑鞋","耐克女款運(yùn)動(dòng)鞋","耐克運(yùn)動(dòng)女款板鞋","耐克彈力透氣 中性款"],
"shops":["森馬官方旗艦店","耐克官方旗艦店","亞馬遜官方旗艦店","韓國(guó)潮流官方旗艦店"],
"limit_price":[
["509","483","399","49"],
["615","159","175","419"]
],
"original_price": [
["899","549","499","99"],
["699","349","149","499"]
],
"discount":[
["5.7","8.8","8","4.9"],
["8.8","4.6","8.8","8.4"]
],
"imgList": [
[
"https://a4.vimage1.com/upload/merchandise/pdc/544/548/464510208477548544/0/880555-001-5_218x274_70.jpg",
"https://a2.vimage1.com/upload/merchandise/pdc/078/211/358093934211078/0/AA2172-601-5_218x274_70.jpg",
"https://a4.vimage1.com/upload/merchandise/pdc/708/957/442273793580957708/0/749867-112-5_218x274_70.jpg",
"https://a4.vimage1.com/upload/merchandise/pdc/104/287/298158490090287104/0/SX4703-001-5_218x274_70.jpg"
],
[
"https://a2.vimage1.com/upload/merchandise/pdc/676/982/100563133647982676/0/807471-103-5_218x274_70.jpg",
"https://a4.vimage1.com/upload/merchandise/pdc/028/969/246648548803969028/2/833371-457-5_218x274_70.jpg",
"https://a4.vimage1.com/upload/merchandise/pdc/161/684/19498258958684161/0/343880-090-5_218x274_70.jpg",
"https://a4.vimage1.com/upload/merchandise/pdc/979/954/7584701095096954979/3/812654-011-5_218x274_70.jpg"
]
],
"moreImg":[
"https://a.vimage1.com/upload/merchandise/pdcvop/00605599/10000630/1534671224-217938183647330340-1_720x909_70.jpg",
"https://a.vimage1.com/upload/merchandise/pdcvop/00605599/10000630/1534671224-217938183647330340-2_720x909_70.jpg",
"https://a.vimage1.com/upload/merchandise/pdcvop/00605599/10000630/1534671224-217938183647330340-3_720x909_70.jpg"
]
}
},
"community":{
"author":["A.B.C","明天的早晨","周游世界","世界杯112","我最帥哇<(*￣▽?zhuān)?)/","HY.O","時(shí)尚達(dá)人ol","天王之王","大道至簡(jiǎn)","天地之靈"],
"watch":["602","1008","54","104","2萬(wàn)+","669","200","440","2060","2099"],
"grefContent":[
"隨著服裝款式設(shè)計(jì)、創(chuàng)作、流行的多樣化，服裝行業(yè)款式豐富度和以前不可同日而語(yǔ)。這給行業(yè)二級(jí)品類(lèi)劃分，和商家類(lèi)目選擇都帶來(lái)一定的影響，根據(jù)目前春夏季類(lèi)目劃分里，幾個(gè)比較有爭(zhēng)議的...",
"很多朋友對(duì)于淘寶購(gòu)物的看法都意見(jiàn)不一，有買(mǎi)家說(shuō)淘寶假貨橫行，稍不小心就可能購(gòu)買(mǎi)到假貨，也有買(mǎi)家說(shuō)淘寶購(gòu)物便宜實(shí)惠，未曾遇到過(guò)被騙或買(mǎi)到假貨的情況。到底淘寶怎么樣，應(yīng)該怎...",
"其次，如果遇到價(jià)格相對(duì)高一點(diǎn)的商品，自己又不敢確定的，最好問(wèn)問(wèn)周?chē)呐笥鸦蛳鄬?duì)有經(jīng)驗(yàn)的買(mǎi)家，很多時(shí)候，是要一點(diǎn)經(jīng)驗(yàn)才能淘到貨真價(jià)實(shí)的產(chǎn)品的。要記住，商人都非常精明，虧本生意...",
"再次，看信譽(yù)。除了信譽(yù)，更重要的是要看看其他買(mǎi)家的購(gòu)買(mǎi)評(píng)價(jià)，有不少買(mǎi)家還是很熱心的對(duì)自己的購(gòu)買(mǎi)到的商品進(jìn)行中肯評(píng)價(jià)的。不過(guò)各位淘友要注意，現(xiàn)在很多淘寶賣(mài)家利用刷手刷店鋪信...",
"個(gè)人的經(jīng)驗(yàn)是皇冠以上的賣(mài)家不論是商品質(zhì)量還是服務(wù)、售后上都會(huì)比較有保障的，因?yàn)檫@部分賣(mài)家有一定的業(yè)務(wù)量，服務(wù)上做得比較好。還有就是一鉆以下買(mǎi)家，由于新店需要銷(xiāo)量升排名，因此...",
"再看看店家是否已經(jīng)加入消費(fèi)者保障協(xié)會(huì)，但凡加入的店鋪，如果你購(gòu)買(mǎi)的東西發(fā)生狀況的時(shí)候，才好索賠。（當(dāng)然，最好不要發(fā)生狀況，因?yàn)橥素浰髻r畢竟是件很麻煩的事情。）現(xiàn)在許多淘寶導(dǎo)...",
"我自己也是做淘寶的，在我看來(lái)，買(mǎi)家的購(gòu)物感受對(duì)我們很重要。所以我們?cè)趯氊愘|(zhì)量和物流方面跟得很緊。特別是現(xiàn)在的物流，無(wú)論我是買(mǎi)家還是賣(mài)家我都不滿(mǎn)意，所以各位淘友在這方面不要給...",
"真實(shí)的事情。在繁榮和商人聊天,問(wèn)是否正品,這是非常重要的。 返現(xiàn)網(wǎng)淘寶返還網(wǎng)有很多是灰色,香港、臺(tái)灣版本不是真實(shí)的東西。如果你想買(mǎi)真正的東西,你應(yīng)該說(shuō):“要求退款”不是真實(shí)的事情,返現(xiàn)...",
"別人不能太低的目標(biāo),因?yàn)槊恳粋€(gè)老買(mǎi)家談判,協(xié)商學(xué)習(xí)很多,我將細(xì)節(jié):1想買(mǎi)你假裝無(wú)所謂。2說(shuō)話(huà)太快,讓賣(mài)方猜你可能買(mǎi)沒(méi)關(guān)系。返現(xiàn)網(wǎng)哪個(gè)最好三個(gè)應(yīng)該講禮貌,善良,給賣(mài)家一個(gè)好印象,這樣他可...",
"不讀商店信用是非常重要的。現(xiàn)在刷信譽(yù)方面,服務(wù)是最重要的。淘寶返現(xiàn)網(wǎng)官網(wǎng)店主服務(wù)好,你幾美元是一件好事,不管以后貨物如果你有任何問(wèn)題,售后服務(wù)或選擇好商店。是沒(méi)有用的可信度。有很..."
],
"content":[
"隨著服裝款式設(shè)計(jì)、創(chuàng)作、流行的多樣化，服裝行業(yè)款式豐富度和以前不可同日而語(yǔ)。這給行業(yè)二級(jí)品類(lèi)劃分，和商家類(lèi)目選擇都帶來(lái)一定的影響，根據(jù)目前春夏季類(lèi)目劃分里，幾個(gè)比較有爭(zhēng)議性的案列，已經(jīng)整理，需要大家達(dá)成定義的共識(shí)，避免類(lèi)目混亂",
"很多朋友對(duì)于淘寶購(gòu)物的看法都意見(jiàn)不一，有買(mǎi)家說(shuō)淘寶假貨橫行，稍不小心就可能購(gòu)買(mǎi)到假貨，也有買(mǎi)家說(shuō)淘寶購(gòu)物便宜實(shí)惠，未曾遇到過(guò)被騙或買(mǎi)到假貨的情況。到底淘寶怎么樣，應(yīng)該怎樣才能避免被騙呢？下面讓我們一起來(lái)分享一下一位一皇冠淘寶買(mǎi)家的淘寶購(gòu)物心得吧",
"其次，如果遇到價(jià)格相對(duì)高一點(diǎn)的商品，自己又不敢確定的，最好問(wèn)問(wèn)周?chē)呐笥鸦蛳鄬?duì)有經(jīng)驗(yàn)的買(mǎi)家，很多時(shí)候，是要一點(diǎn)經(jīng)驗(yàn)才能淘到貨真價(jià)實(shí)的產(chǎn)品的。要記住，商人都非常精明，虧本生意他們是絕對(duì)不會(huì)做的",
"再次，看信譽(yù)。除了信譽(yù)，更重要的是要看看其他買(mǎi)家的購(gòu)買(mǎi)評(píng)價(jià)，有不少買(mǎi)家還是很熱心的對(duì)自己的購(gòu)買(mǎi)到的商品進(jìn)行中肯評(píng)價(jià)的。不過(guò)各位淘友要注意，現(xiàn)在很多淘寶賣(mài)家利用刷手刷店鋪信譽(yù)，所以一定要看清楚評(píng)論內(nèi)容，內(nèi)容簡(jiǎn)單隨便的反而是真實(shí)的，相反一定是假的",
"個(gè)人的經(jīng)驗(yàn)是皇冠以上的賣(mài)家不論是商品質(zhì)量還是服務(wù)、售后上都會(huì)比較有保障的，因?yàn)檫@部分賣(mài)家有一定的業(yè)務(wù)量，服務(wù)上做得比較好。還有就是一鉆以下買(mǎi)家，由于新店需要銷(xiāo)量升排名，因此對(duì)貨品的質(zhì)量也會(huì)有更高的要求，價(jià)格也比較真實(shí)和實(shí)惠",
"再看看店家是否已經(jīng)加入消費(fèi)者保障協(xié)會(huì)，但凡加入的店鋪，如果你購(gòu)買(mǎi)的東西發(fā)生狀況的時(shí)候，才好索賠。（當(dāng)然，最好不要發(fā)生狀況，因?yàn)橥素浰髻r畢竟是件很麻煩的事情。）現(xiàn)在許多淘寶導(dǎo)購(gòu)網(wǎng)的店鋪推薦可以參考下",
"我自己也是做淘寶的，在我看來(lái)，買(mǎi)家的購(gòu)物感受對(duì)我們很重要。所以我們?cè)趯氊愘|(zhì)量和物流方面跟得很緊。特別是現(xiàn)在的物流，無(wú)論我是買(mǎi)家還是賣(mài)家我都不滿(mǎn)意，所以各位淘友在這方面不要給賣(mài)家太高要求，畢竟這塊兒我們賣(mài)家也沒(méi)辦法",
"真實(shí)的事情。在繁榮和商人聊天,問(wèn)是否正品,這是非常重要的。 返現(xiàn)網(wǎng)淘寶返還網(wǎng)有很多是灰色,香港、臺(tái)灣版本不是真實(shí)的東西。如果你想買(mǎi)真正的東西,你應(yīng)該說(shuō):“要求退款”不是真實(shí)的事情。返現(xiàn)網(wǎng)哪個(gè)最好",
"別人不能太低的目標(biāo),因?yàn)槊恳粋€(gè)老買(mǎi)家談判,協(xié)商學(xué)習(xí)很多,我將細(xì)節(jié):1想買(mǎi)你假裝無(wú)所謂。2說(shuō)話(huà)太快,讓賣(mài)方猜你可能買(mǎi)沒(méi)關(guān)系。返現(xiàn)網(wǎng)哪個(gè)最好三個(gè)應(yīng)該講禮貌,善良,給賣(mài)家一個(gè)好印象,這樣他可以給你最低的價(jià)格。4必須說(shuō)會(huì)介紹很多朋友惠顧。 52返現(xiàn)網(wǎng) 5個(gè)中的口才,你在這里購(gòu)物市場(chǎng)的會(huì)知道如何玩一樣",
"不讀商店信用是非常重要的。現(xiàn)在刷信譽(yù)方面,服務(wù)是最重要的。淘寶返現(xiàn)網(wǎng)官網(wǎng)店主服務(wù)好,你幾美元是一件好事,不管以后貨物如果你有任何問(wèn)題,售后服務(wù)或選擇好商店。是沒(méi)有用的可信度。有很多新店服務(wù)5鉆。返現(xiàn)網(wǎng)哪個(gè)最好 因?yàn)閯傞_(kāi)店,都想做得更好,在優(yōu)質(zhì)售后非常嚴(yán)重。加上新生意不好做,當(dāng)然更多的感激你的支持。返現(xiàn)網(wǎng)哪個(gè)最好"
]
}
}
總結(jié)
這是我學(xué)vue做的第一個(gè)綜合性的項(xiàng)目，整個(gè)過(guò)程耗時(shí)差不多20天左右吧,由于平時(shí)還有課程作業(yè)(大三)要做,都是擠著周末做的o(╥﹏╥)o以后繼續(xù)完善這個(gè)項(xiàng)目
在做的過(guò)程中遇到了很多問(wèn)題，所以收獲了不少經(jīng)驗(yàn)，再接再厲 _
一句話(huà)總結(jié)自己： 繼續(xù)踩坑
