Vue简单例子-调用聚合数据API显示新闻.md

2016-10-10 本文已影响4668人 Angeladaddy

本来是spring boot和前端vue一起学的（我这颗励志当全栈工程师的心啊(ˇ∀ˇ)），发现精力跟不上，于是就只研究vue。后台数据用REST方式从聚合数据获取，当然前提是有他们的账号。

npm i vue-cli -g //安装vue脚手架
vue init webpack-simple#1.0 newsapp // webpack-simple工程目录比较简单，说实话，默认的webpack脚手架工程看不懂。。。以后再研究吧，vue版本选1.0，2.0还没学
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" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <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 }
})

插播一下聚合数据的请求格式：

Paste_Image.png

返回格式类似于这样：

{   
"reason":"成功的返回",   
"result":{      "stat":"1",     
"data":[            

          {             
        "title":"高晓松为王宝强打气 明天离婚案王宝强现身马蓉不出庭",                
        "date":"2016-10-17 15:01",              
        "author_name":"人民网",                "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":"这年头当鸭居然这么不容易!",                "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数组就行了

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')">国内</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')">财经</a></li>
      <li role="presentation"><a href="#"  @click="getData('shishang')">时尚</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>

为了体现组件化思想，我把顶部导航条单独出来一个组件，这样也有一个麻烦就是每次点击都要dispatch事件，然后在父组件App.vue里监听这个事件onGetData. 事件处理很简单就是使用vue-resource调用聚合的API获取数据，最后利用props传入子组件Mainlist.vue

效果：

1431816-0624a5871f445fb7.png

重要提示：vue -resource本地调试会有跨域问题，使用chrome 浏览器的话可以下个扩展插件

1431816-821482aa727dc66a.png

Vue简单例子-调用聚合数据API显示新闻.md

猜你喜欢

热点阅读