由于項目中用到了豆瓣api,涉及到跨域訪問，就需要在config的index.js添加代理,例如
proxyTable: {
'/api': {
target: 'https://api.douban.com/v2',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
安裝axios
npm install --save axios vue-axios
在main.js引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
在各個組件里獲取數據，就是這么簡單
this.axios.get(api).then((response) => {
console.log(response.data)
})
由于豆瓣app首頁的數據，我們不能直接通過api獲取數據，只能先將數據保存下來進行訪問梨州，大家做項目的時候，訪問靜態(tài)數據json會遇到路徑404田轧，這里我們可以通過在dev-server.js里添加靜態(tài)數據的路由暴匠，例如：我們先將豆瓣的首頁數據先保存到/src/data/homeData.json,
dev-server.js 添加
//添加靜態(tài)數據路由
var app = express()
var homeData=require('../src/data/homeData.json');
var apiRoutes = express.Router();
apiRoutes.get('/homeData',function (req,res) {
res.json({
errno:0,
data:homeData
});
});
app.use('/api',apiRoutes);
在組件里面訪問
this.axios.get('/api/homeData').then((response) => {
console.log(response.data)
})
數據就出來了
Paste_Image.png
接下來我們將靜態(tài)數據顯示到首頁中：靜態(tài)數據分為熱門和推薦，我么先fetchData獲取數據傻粘，通過判斷card.name每窖，賦值給recommendData、hotData
data() {
return {
recommendData: [],
hotData: []
}
},
created() {
this.fetchData();
},
methods: {
fetchData() {
this.axios.get('/api/homeData').then((response) => {
let data = response.data.data.recommend_feeds;
let recommend = [];
let hot = [];
for (var i in data) {
if (data[i].card && data[i].card.name == '為你推薦') {
recommend.push(data[i]);
} else {
hot.push(data[i]);
}
}
this.recommendData = recommend;
this.hotData = hot;
})
}
}
在index.vue循環(huán)media-cell組件
<m-cell-media :author="item.target.author.name" :column="item.source_cn" :img="item.target.cover_url" v-for="(item,index) in hotData"
:key="item.id">
<span slot="title">{{item.title}}</span>
<span slot="describe">{{item.target.desc}}</span>
</m-cell-media>
Paste_Image.png
git地址：
https://github.com/MrMoveon/doubanApp
vue專題目錄：
1-vuejs2.0實戰(zhàn)：仿豆瓣app項目弦悉，創(chuàng)建自定義組件tabbar
2-vuejs2.0實戰(zhàn)：仿豆瓣app項目窒典，創(chuàng)建組件header,tabbar路由跳轉
