VueJS基础系列：使用vue-resource请求数据进行渲染

什么是vue-resource

Vue 要实现异步加载需要使用到 vue-resource 库，可以选择cdn方式：

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

也可以选择安装，详细可以看github： https://github.com/pagekit/vue-resource

npm 安装vue-resource

1、在根目录下的package.json中声明依赖：

 2、命令行：

cnpm install vue-resource

 

进入到项目目录重新跑一下：cnpm run dev

在项目中使用时，查看一下vue-resource中package.json中name值，再在main.js中注册：

在项目中使用：

先看看现有App.vue中已经写好的代码：

<template>
  <div id="app">
    <v-header>
    </v-header>
    <div class="tab">
      <div class="tab-item">
        <router-link :to="'goods'">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="'ratings'" >评论</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="'seller'" >商家</router-link>
      </div>
    </div>
    <router-view>

    </router-view>

  </div>

</template>

<script>
import header from 'components/header/header.vue';

export default {
  name: 'app',
  components: {
    'v-header': header
  }

};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #app
    /* background: gray */
    .tab
      display: flex
      width: 100%
      height: 40px
      background: white
      line-height: 40px
      border-bottom: 1px solid rgba(7,17,27,0.1)
      .tab-item
        flex: 1
        text-align: center
        & > a
          display: block
          font-size: 14px
          color: rgb(77,85,93)
          &.active
            color: rgb(240,20,20)

</style>

涉及到的header.vue：

<template>
  <div class="header">
      我是header
  </div>
</template>

<script type="text/ecmascript-6">
export default{
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .header
    width: 100%
    height: 134px
    background: rgba(0,0,0,0.1)
</style>

效果图：

这些在另一篇中有写到：https://blog.csdn.net/baidu_41327283/article/details/89345625

再看看我们的目的：通过App组件获取商家相关数据，并传递给v-header组件进行渲染。

1、首先我们需要准备好App组件要获取的数据--本地模拟数据（vue+express），将准备好的数据文件data.json放在项目根目录下，data.json内容如下：

 

之后就可以进行配置，我们的配置目的：实现访问http://localhost:8080/app/seller即可取得data.json文件中seller对应数据。

对于早期的vue在build目录下面有dev-server.js和dev-client.js两文件，请求本地数据在dev-server.js里配置，最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替，所以 配置本地访问在webpack.dev.conf.js里配置即可。

修改build文件夹下webpack.dev.conf.js：

//使用express框架
const express = require('express');
const app = express();
//获取data.json的数据赋值给appData
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

然后找到devServer，添加以下代码：

before(app){
      //定义接口
      app.get('/api/seller',function(req,res){
        //定义返回值json
        res.json({
          //表示数据正常
          errno: 0,
          data:seller
        });
      });
      app.get('/api/goods',function(req,res){
        res.json({
          errno: 0,
          data:goods
        });
      });
      app.get('/api/ratings',function(req,res){
        res.json({
          errno: 0,
          data:ratings
        });
      });
    }
  },

修改完需要重新跑一下代码才能看到效果：

更多express框架详情：http://www.expressjs.com.cn/starter/hello-world.html

2、准备好App组件要获取商家相关数据之后，我们需要在App组件中定义一个data用于传递给v-header组件

在vue组件中，data必须是函数，这样每个实例的data有自己的作用域，相互独立，互不影响。详细解释：https://www.cnblogs.com/libin-1/p/6878057.html

修改App.vue：

<script>
import header from 'components/header/header.vue';

const ERR_OK = 0;
export default {
  name: 'app',
  data () {
    return {
      seller: {}
    };
  },
  components: {
    'v-header': header
  }

};
</script>

在每个vue实例创建完成后，将调用created()，此时已经完成了数据初始化，但还未渲染，可以对数据进行修改。我们可以使用created()，在此方法中使用vue-resource获取数据

<script type="text/ecmascript-6">
import header from 'components/header/header.vue';

const ERR_OK = 0;
export default {
  name: 'app',
  data () {
    return {
      seller: {}
    };
  },
  created () {
    this.$http.get('/api/seller').then((response) => {
      response = response.body;
      if (response.errno === ERR_OK) {
        this.seller = response.data;
        console.log(this.seller);
      }
    });
  },
  components: {
    'v-header': header
  }

};
</script>

3、通过上面步骤，我们已经拿到了seller对象，接下来就是将对象通过v-bind属性传递给v-header组件进行渲染

修改App.vue：

<v-header :seller='seller'>
</v-header>

在header.vue中通过props对象接收数据，header.vue：

<template>
  <div class="header">
      <div class="content-wrapper">
//    输出seller对象中name的值
        {{seller.name}}
      </div>
      <div class="bulletin-wrapper">

      </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default{
//    通过props属性对象中的seller属性接收数据，类型是对象类型
  props: {
    seller: {
      type: Object
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .header
    width: 100%
    height: 134px
    background: rgba(0,0,0,0.1)
</style>