由于项目中用到了豆瓣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获取数据，只能先将数据保存下来进行访问，大家做项目的时候，访问静态数据json会遇到路径404，这里我们可以通过在dev-server.js里添加静态数据的路由，例如：我们先将豆瓣的首页数据先保存到/src/data/homeData.json,
dev-server.js 添加
//添加静态数据路由
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
接下来我们将静态数据显示到首页中：静态数据分为热门和推荐，我么先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循环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实战：仿豆瓣app项目，创建自定义组件tabbar
2-vuejs2.0实战：仿豆瓣app项目，创建组件header,tabbar路由跳转
