Vue高仿饿了么项目（4）—header组件开发

目标

完成header组件需要完成以下几部分

1. 商家信息的展示—获取数据
2. 公告信息展示—外部组件的开发
3. 弹出层的实现

---

获取数据

1.安装vue-resource，在main.js里注册此插件
Vue.js有一个插件vue-resource，用来解决前后端数据请求，数据交互的。
安装方法如下

npm install vue-resource --save

安装成功后引用并注册

//引用
import VueResource from 'vue-resource'
//全局注册
Vue.use(VueResource)

vue-resource的使用例子

{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}

这里的this就是vue的实例，使用vue-resource相当于给每一个vue实例去扩展了一个.$http的方法，这样就可以在组件里面通过this.$http访问到。

2.在App.vue中定义一个seller对象，使用data方法，在函数内返回一个空对象
header组件有很多关于商家的一些数据，这些数据的来源是通过异步请求后端的数据接口而获得的，header组件负责接收这样的数据并渲染。可以通过header的父组件即App.vue来发送一个ajax请求，然后通过header的一个prop属性传递给这个组件。首先在App.vue定义一个seller的对象，用data ()方法，在Vue.js中，规定data是一个函数，因为组件是可以复用的，如果定义成一个对象修改某一个组件会影响另外一个组件，所以这里要定义成一个函数。函数里面要返回一个seller空对象，然后通过发送一个Ajax请求拿到一个seller对象放到这个空对象里面，这样就拿到了这个对象的数据。

export default {
   
   
    data () {
        return {
            seller: {}
        }
    }
}

3.在App.vue中通过vue-resource发送一个Ajax请求，获取后台的数据（seller对象），然后塞给上一步的空对象

• 什么时候去发送这样一个Ajax请求？每个Vue实例在实例化的时候经过一系列的过程，例如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期其中有一个钩子叫做created ()，它也是一个方法，vue实例被生成后就调用这个函数。一般可以在created ()函数中调用ajax获取页面初始化所需的数据。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。
• 在 created () 里面通过 .get () 方法去获取数据，获取地址是“ /api/seller ”，请求发送以后，调用 .then () 方法。.then () 方法中的第一个参数是成功的回调，第二个参数是失败的回调。因为这里是模拟后台数据，所以一定是成功的，所以只写成功的回调方法。response 是一个方法，返回的内容不是json对象，而是属性。看文档可以知道，body参数返回的数据类型是 object 类型，正是我们所需要的。
• 3）接着判断 errno 是否为 0，为 0 表示正常，然后返回数据。关于 errno 的设置在 webpack.dev.conf.js 中可以找到。这里定义一个常量 ERR_OK 为 0，是为了阅读代码时更加清晰，知道 0 代表什么，无需通篇查找 errno = 0 的含义，代码更为友好。

export default {
  created () {
    this.$http.get('/api/seller').then((response) => {
      response = response.body
      console.log(response)
      if (response.errno === ERR_OK) {
        this.seller = response.data
        console.log(this.seller)
      }
    })
  }

接下来需要将seller对象传递给header组件，让header组件将其渲染出来。可以通过v-bind:将其进行数据绑定，v-bind的缩写为:。首先是seller对象的传递

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

然后在header.vue中通过props属性接收App.vue中传递过来的seller对象

export default {
   
   
  props: {
    seller: {
      type: Object
    }
  }
}

接下来进行外层组件和弹出层的设计。代码框架：

<template>
  <div class="header">
      <div class="content-wrapper"></div> //外层组件中的上层部分
      <div class="bulletin-wrapper"></div> //外层组件中的公告栏部分
      <div class="background"></div> /