vuex集成于banner真实数据读取

bilibili-api/app/routes/rank.js

@@ -17,5 +17,9 @@ router.get('/randking', async (ctx, next) => {
   let response = await axios.get(randking)
   ctx.body = response.data
 })
+router.get('/1-3day.json', async (ctx, next) => {
+  let response = await axios.get(randking)
+  ctx.body = response.data
+})
 
 export default router

build/webpack.base.conf.js

@@ -26,6 +26,7 @@ module.exports = {
       'vue$': 'vue/dist/vue.common.js',
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
+      'api': path.resolve(__dirname, '../src/api'),
       'components': path.resolve(__dirname, '../src/components')
     }
   },

package.json

@@ -12,7 +12,10 @@
     "test": "npm run unit && npm run e2e"
   },
   "dependencies": {
-    "vue": "^2.1.0"
+    "axios": "^0.15.3",
+    "vue": "^2.1.0",
+    "vue-router": "^2.3.0",
+    "vuex": "^2.2.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.4.0",

src/api/index.js

@@ -0,0 +1,12 @@
+import * as url from './urlConfig'
+import axios from 'axios'
+
+//获取轮播图
+export const bannerApi = {
+	list() {
+		return axios.get(url.banner).then((response) => {
+			return response.data
+		})
+	}
+}
+

src/api/urlConfig.js

@@ -1,5 +1,4 @@
-// 各分类下的热门内容
-export const classifyHot = 'http://api.bilibili.com/x/web-show/res/locs?callback=jQuery17209599995421109273_1487494141365&pf=0&ids=1550%2C1554%2C1556%2C1558%2C1560%2C1562%2C1564%2C1566%2C1568%2C1570%2C1572%2C1574%2C1624%2C1636&jsonp=jsonp&_=1487494141938'
 
-// 默认搜索词
-export const searchWords = 'http://www.bilibili.com/widget/getSearchDefaultWords'
+const serverRoot = 'http://127.0.0.1:9050'
+
+export const banner = serverRoot + '/banner'

src/components/banner/Banner.vue

@@ -3,24 +3,21 @@
 		<div class="topic-preview-wrapper">
 			<div class="topic-preview-list-wrapper">
 				<ul class="topic-preview" style="width: 500%;"  ref="banner"> 
-					<BannerItem v-for="i in bannerLinks" :banner-link="i"></BannerItem>
+					<BannerItem v-for="item  in bannerlist" :banner="item"></BannerItem>
 				</ul>
 			</div>
 			<a class="more-topic" href="/topic/integrated-1.html" target="_blank">更多
 				<i class="b-icon"></i>
 			</a>
 			<div class="s-bottom">
-				<div class="title">
+				<div class="title" v-if="bannerlist[count]">
 					<span class="">
-						<a href="http://www.bilibili.com/blackboard/activity-Hk-ZOAoKl.html" target="_blank">开棺而起！</a>
+						<img src="//static.hdslb.com/images/base/ad.png" style="width: 32px; height: 20px: margin-left: 5px;vertical-align: middle;" v-if="bannerlist[count].is_ad">
+						<a :href="bannerlist[count].url" target="_blank">{{ bannerlist[count].name }}</a>
 					</span>
 				</div>
 				<ul class="slide-bar">
-					<li class="on"></li>
-					<li></li>
-					<li></li>
-					<li></li>
-					<li></li>
+					<li :class="{on: count == index}" v-for="(item, index) in bannerlist"></li>
 				</ul>
 			</div>
 		</div>
@@ -29,26 +26,37 @@
 
 <script>
 import BannerItem from 'components/banner/BannerItem'
+import { mapGetters } from 'vuex'
 export default {
 	data() {
 		return {
-			bannerLinks: ['http://i0.hdslb.com/bfs/archive/5e03bce223d8af8f1eeefc7928d0fdf85a51bc7d.jpg', 'http://i0.hdslb.com/bfs/archive/7e1a5353c2bca2704d5f2a85f7cca395ff57f0f1.jpg','http://i0.hdslb.com/bfs/archive/5009a193676d6166083dc756fe40bd555f48864d.jpg','http://i0.hdslb.com/bfs/archive/778b9e7f7ac51a495daa8a0936cb41ae2b4c11e4.png','http://i0.hdslb.com/bfs/archive/14545332a4293781becd078594ddcf045ebe776c.jpg'
-			],
-			count: 0,
-			item: 5
+			count: 0
 		}
 	},
+	computed: {
+		...mapGetters([
+			'requesting',
+			'error',
+			'bannerlist'
+		])
+	},
 	mounted() {
 		//轮播图定时滚动
 		setInterval(() => {
+			this.count ++ 
 			if (this.count === 5) {
 				this.count = 0
 			}
 			let distance = -100 * this.count
+			console.log(this.count + ':' + distance)
+
 			let left = distance + "%"
-			this.$refs.banner.style.marginLeft = left
-			this.count ++
+			if (this.$refs.banner) {
+				this.$refs.banner.style.marginLeft = left
+			}
 		}, 5000)
+		
+		this.$store.dispatch('bannerlist')
 	},
 	components: {
 		BannerItem

src/components/banner/BannerItem.vue

@@ -1,16 +1,15 @@
 <template>
 	<li class="banner-item">
-		<a href="" class="b-link" target="_blank">
-			<img :src="bannerLink">
+		<a :href="banner.url" class="b-link" target="_blank">
+			<img :src="banner.pic">
 		</a>
 	</li>
 </template>
 <script>
 export default {
 	props: {
-		bannerLink: {
-			type: String,
-			required: true
+		banner: {
+			type: Object
 		}
 	}
 }

src/components/common/BMenuItem.vue

@@ -29,7 +29,6 @@ export default {
 	},
 	computed: {
 		showNum() {
-			console.log(JSON.stringify(this.item))
 			if (this.item.home || this.item.sequare || this.item.live) {
 				return false
 			}

src/main.js

@@ -3,8 +3,10 @@
 import Vue from 'vue'
 import App from './App'
 
+import store from './store'
 /* eslint-disable no-new */
 new Vue({
+	store,
   el: '#app',
   template: '<App/>',
   components: { App }

src/store/actionType/bannerType.js

@@ -0,0 +1,3 @@
+export const BANNER_LIST_REQUEST = 'BANNER_LIST_REQUEST'
+export const BANNER_LIST_SUCCESS = 'BANNER_LIST_SUCCESS'
+export const BANNER_LIST_FAILURE = 'BANNER_LIST_FAILURE'

src/store/index.js

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+
+import bannerStore from './modules/bannerStore'
+
+const state = {
+	requesting: false,
+	error: {}
+}
+
+const getters = {
+	requesting: state => state.requesting,
+	error: state => state.error
+}
+
+export default new Vuex.Store({
+	state,
+	getters,
+	modules: {
+		bannerStore
+	}
+})

src/store/modules/bannerStore.js

@@ -0,0 +1,43 @@
+import { bannerApi } from 'api'
+import * as TYPE from '../actionType/bannerType'
+
+const state = {
+	bannerlist: []
+}
+
+const getters = {
+	bannerlist: state => state.bannerlist
+}
+
+const actions = {
+	bannerlist({commit, state, rootState}) {
+		rootState.requesting = true
+		commit(TYPE.BANNER_LIST_REQUEST)
+		bannerApi.list().then((response) => {
+			rootState.requesting = false
+			commit(TYPE.BANNER_LIST_SUCCESS, response)
+		}, (error) => {
+			rootState.requesting = false
+			commit(TYPE.BANNER_LIST_FAILURE)
+		})
+	}
+}
+
+const mutations = {
+	[TYPE.BANNER_LIST_REQUEST] (state) {
+
+	},
+	[TYPE.BANNER_LIST_SUCCESS] (state, bannerlist) {
+		state.bannerlist = bannerlist.data
+	},
+	[TYPE.BANNER_LIST_FAILURE] (state) {
+
+	}
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations
+}