本來是spring boot和前端vue一起學(xué)的（我這顆勵(lì)志當(dāng)全棧工程師的心啊(ˇ?ˇ)），發(fā)現(xiàn)精力跟不上偶妖，于是就只研究vue。后臺數(shù)據(jù)用REST方式從聚合數(shù)據(jù)獲取唉擂，當(dāng)然前提是有他們的賬號餐屎。
npm i vue-cli -g //安裝vue腳手架
vue init webpack-simple#1.0 newsapp // webpack-simple工程目錄比較簡單，說實(shí)話玩祟，默認(rèn)的webpack腳手架工程看不懂腹缩。。。以后再研究吧藏鹊，vue版本選1.0润讥，2.0還沒學(xué)
cd newsapp & npm i
npm i vue-resource --save // 需要用到vue-resource
工程目錄：
Paste_Image.png
index.html , 使用bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" >
<title>newsapp</title>
</head>
<body>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>
main.js 沒啥變化
import Vue from 'vue'
import App from './App.vue'
Vue.config.debug = true
new Vue({
el: 'body',
components: { App }
})
插播一下聚合數(shù)據(jù)的請求格式：
Paste_Image.png
返回格式類似于這樣：
{
"reason":"成功的返回",
"result":{ "stat":"1",
"data":[
{
"title":"高曉松為王寶強(qiáng)打氣 明天離婚案王寶強(qiáng)現(xiàn)身馬蓉不出庭",
"date":"2016-10-17 15:01",
"author_name":"人民網(wǎng)", "thumbnail_pic_s":"http:\/\/02.imgmini.eastday.com\/mobile\/20161017\/20161017150141_b0a5bc32a3e75044e5604d090a702dac_1_mwpm_03200403.jpeg", "thumbnail_pic_s02":"http:\/\/02.imgmini.eastday.com\/mobile\/20161017\/20161017150141_b0a5bc32a3e75044e5604d090a702dac_1_mwpl_05500201.jpeg", "thumbnail_pic_s03":"http:\/\/02.imgmini.eastday.com\/mobile\/20161017\/20161017150141_b0a5bc32a3e75044e5604d090a702dac_1_mwpl_05500201.jpeg", "url":"http:\/\/mini.eastday.com\/mobile\/161017150141494.html?qid=juheshuju", "uniquekey":"161017150141494", "type":"頭條", "realtype":"娛樂" }, { "title":"這年頭當(dāng)鴨居然這么不容易!", "date":"2016-10-17 16:15", "author_name":"任真天", "thumbnail_pic_s":"http:\/\/08.imgmini.eastday.com\/mobile\/20161017\/20161017161510_6932252a05947fa6dc80ffec4ee8e282_1_mwpm_03200403.jpeg", "thumbnail_pic_s02":"http:\/\/08.imgmini.eastday.com\/mobile\/20161017\/20161017161510_6932252a05947fa6dc80ffec4ee8e282_1_mwpl_05500201.jpeg",
//可以看到只要data數(shù)組就行了
App.vue
<template>
<div class="alert alert-warning" role="alert" v-if="error!=''">{{error}}</div>
<top-header></top-header>
<main-list :news-list="news"></main-list>
</template>
<script>
import TopHeader from './components/TopHeader.vue'
import MainList from './components/MainList.vue'
import Vue from 'vue'
var vueResource = require('vue-resource')
Vue.use(vueResource)
export default {
data () {
return {
news : [],
error:''
}
},
components :{
TopHeader,MainList
},
created :
function(){
this.getData('top');
},
events:{
'onGetData':function(dataType){
this.getData(dataType);
}
},
methods :{
getData : function(dataType){
this.$http.get('http://v.juhe.cn/toutiao/index?key=你的key&type='+dataType).then((response) => {
this.$set('news', response.body.result.data);
}, (response) => {
this.error = response.error_code
});
}
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
TopHeader.vue
<template>
<div><ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" ><a href="#" @click="getData('top')">頭條</a></li>
<li role="presentation" ><a href="#" @click="getData('shehui')">社會</a></li>
<li role="presentation" ><a href="#" @click="getData('guonei')">國內(nèi)</a></li>
<li role="presentation"><a href="#" @click="getData('guoji')">國際</a></li>
<li role="presentation"><a href="#" @click="getData('yule')">娛樂</a></li>
<li role="presentation"><a href="#" @click="getData('tiyu')">體育</a></li>
<li role="presentation"><a href="#" @click="getData('junshi')">軍事</a></li>
<li role="presentation"><a href="#" @click="getData('keji')">科技</a></li>
<li role="presentation"><a href="#" @click="getData('caijing')">財(cái)經(jīng)</a></li>
<li role="presentation"><a href="#" @click="getData('shishang')">時(shí)尚</a></li>
</ul></div>
</template>
<script>
export default{
methods :{
getData: function(dType){
this.$dispatch('onGetData',dType);
}
}
}
</script>
MainList.vue
<template>
<div class="row" id="main">
<div class="col-sm-6 col-md-4" v-for="n in newsList">
<div class="thumbnail" >
<a :href="n.url">
<img :src="n.thumbnail_pic_s" :alt="n.author_name" >
<div class="caption">
<p class="text-center">{{n.title}}</p>
</div>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['newsList']
}
</script>
<style>
#main {
margin-top: 10px
}
</style>
- 為了體現(xiàn)組件化思想，我把頂部導(dǎo)航條單獨(dú)出來一個(gè)組件盘寡，這樣也有一個(gè)麻煩就是每次點(diǎn)擊都要dispatch事件楚殿，然后在父組件App.vue里監(jiān)聽這個(gè)事件onGetData. 事件處理很簡單就是使用vue-resource調(diào)用聚合的API獲取數(shù)據(jù)，最后利用props傳入子組件Mainlist.vue
效果：
1431816-0624a5871f445fb7.png
重要提示：vue -resource本地調(diào)試會有跨域問題竿痰，使用chrome 瀏覽器的話可以下個(gè)擴(kuò)展插件
1431816-821482aa727dc66a.png
