项目vue2.0仿外卖APP（五）

时间 2019-11-10

标签项目 vue2.0 vue 外卖 app 繁體版

原文原文链接

header组件

vue-resourse应用

https://github.com/pagekit/vue-resourcecss

vue-resource是Vue.js的一款插件，它能够经过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能作的事情，vue-resource插件同样也能作到，并且vue-resource的API更为简洁。另外，vue-resource还提供了很是有用的inteceptor功能，使用inteceptor能够在请求前和请求后附加一些行为，好比使用inteceptor在ajax请求时显示loading界面。html

vue-resource插件具备如下特色：vue

1. 体积小
vue-resource很是小巧，在压缩之后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
2. 支持主流的浏览器
和Vue.js同样，vue-resource除了不支持IE 9如下的浏览器，其余主流的浏览器都支持。
3. 支持Promise API和URI Templates
Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些相似于ASP.NET MVC的路由模板。
4. 支持拦截器
拦截器是全局的，拦截器能够在请求发送前和发送请求后作一些处理。
拦截器在一些场景下会很是有用，好比请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。git

http://www.cnblogs.com/keepfool/p/5657065.htmlgithub

Header组件：商家数据，经过异步请求后端的数据接口得到的，header组件就负责接受这样的数据并渲染。那咱们就能够在app.vue组件（header的父组件），经过发送一个AJAX请求去获取商家的相关数据，而后把这些数据经过header的prop属性传递给这个组件。ajax

能够查看：http://cn.vuejs.org/v2/guide/components.html#example-2-5json

父子组件间的通讯segmentfault

组件意味着协同工做，一般父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然须要相互通讯：父组件要给子组件传递数据，子组件须要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽量将父子组件解耦是很重要的。这保证了每一个组件能够在相对隔离的环境中书写和理解，也大幅提升了组件的可维护性和可重用性。后端

在 Vue.js 中，父子组件的关系能够总结为 props down, events up 。父组件经过 props 向下传递数据给子组件，子组件经过 events 给父组件发送消息。看看它们是怎么工做的。api

使用 Prop 传递数据

组件实例的做用域是孤立的。这意味着不能而且不该该在子组件的模板内直接引用父组件的数据。可使用 props 把数据传给子组件。
prop 是父组件用来传递数据的一个自定义属性。子组件须要显式地用 props 选项声明 “prop”：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 同样，prop 能够用在模板内
  // 一样也能够在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

而后向它传入一个普通字符串：

<child message="hello!"></child>

结果输出“hello”。

回到项目中来

首先咱们须要给app.vue定义一个seller的对象：能够经过data()方法。在vue.js中，这个data属性是一个函数（可查看连接），由于组件是能够被复用的，若是定义一个对象而后修改某一个组件的话会影响另外的组件，因此这里定义成一个函数。这个函数return一个对象，对象里面有seller对象，先定为空，而后咱们经过发送AJAX请求去拿到一个seller对象，而后send给它。这样就能够拿到seller对象的数据。

Vue.js社区有个第三方插件：vue-resource，用来处理一些先后端请求数据交互的。

示例：

{
  // GET /someUrl
  this.$http.get('/someUrl').then((response) => {
    // success callback
  }, (response) => {
    // error callback
  });
}

一样的，在package.json添加它的依赖：

第三方插件import引用时须要注册，用Vue.use(vueResource)把这个注册。在main.js注册

而后回到app.vue，在这里咱们须要经过一个vue.resource去发送一个AJAX请求，须要在什么时序去发起呢？

咱们知道每一个vue实例化的时候都有一个生命周期，其中有个钩子叫created().

关于钩子：https://segmentfault.com/q/1010000004335505

关于实例的生命周期：https://cn.vuejs.org/v2/guide/instance.html#实例生命周期

这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，以后还要进行编译，而后再插入到document中。每个阶段都会有一个钩子函数，方便开发者在不一样阶段处理不一样逻辑。通常能够在created函数中调用ajax获取页面初始化所需的数据。

可以看到这里已经发送了：

还有不少字段：每一个字段都有get和set方法：

到这vue-resource就介绍完了，seller对象已经拿到，接下来就把seller对象传递给header组件，让header渲染便可。

外部组件

vue2.0组件间通讯：http://blog.csdn.net/qq_24122593/article/details/53509229

上一讲从后端的seller API得到这个seller对象，如今就来把这个seller对象传给header组件

https://cn.vuejs.org/v2/api/#props

经过v-bind指令去传，把这个seller这个变量传给这个header组件。

咱们在header组件里面就会经过propS属性去接受传过来的seller。

有了这个变量就能够来写它的DOM结构了。

<img width="64" height="64" src="seller.avatar">

这样不行，不能直接指定src。须要用v-bind，这样才能够去引用头像图片的地址，由于seller.avatar一开始是不存在的

再写写样式

有的层之间会有空隙，须要怎么处理呢？方法有不少，这里使用font-size。能够先把父级的font-size设为0，再设置自己的font-size。

图片的2x和3x是对应不一样的dpr的。须要用到媒体查询，代码比较多，写在mixin.styl。

减价、打折、特价等图标须要根据后台返回的数据来选择，因此这里就得根据后台返回的数据修改class，这是须要动态绑定

为了将它的数值对应到各自的含义，能够定义一个classMap:

而后再动态添加class的值：

想要变化：减价变成特价。能够去后台该数据的顺序：

接下来写右下角的“5个”：

<i class="icon-keyboard_arrow_right"></i>

这个小图标用到的是字体图标。

关于公告区：

为了清除间隙还有不影响省略号，咱们就不用font-size为0了，用其余方法，就是元素紧贴一块儿。

设置对齐的时候，能够先设置顶部对齐：vertical-align: top，再进行调整

背景图：

Image标签设置它的容器的filter。

背景置于容器的顶部：

position: absolute
top: 0
left: 0
z-index: -1

接下来：内部弹层详细页

要求：全屏、模糊、底部还有关闭按钮，并且，高度可能比手机高度还高，这是就会有滚动条。

关闭按钮在最下方，若是用普通的布局的话，就会盖在文字上面，这显然不行。这时就要用到css striky footers布局。相对窗口作fixed布局

最外层：

.detail
      position: fixed
      z-index: 100
      top: 0
      left: 0
      width: 100%
      height: 100%
      overflow: auto
      background: rgba(7,17,27,0.5)

控制显示和隐藏，在vue里面能够经过v-show指令去控制，还要给vue的实例里面加一个选项data，它是一个function，由于可能会有多个实例组件。这个function会return一个object，会去跟踪依赖一些变量。

data() {
      return {
        detailShow: false
      };
},

也就是说，咱们在new这个vue的时候，它会对data里面的变量去编译而后给它添加getter和setter，这样当咱们的变量变化的时候，DOM就会跟着变化。

查看元素：

这是就要添加方法了：

showDetail() {
        this.detailShow = true;
      },

也就是说当咱们去点击这个层的时候，会调用这个方法去改变detailShow，因为这个变量是依赖跟踪的，他就会访问到data里的detailShow，变化的时候vue也能够检测到，最后会通知这个DOM的指令，而后更新状态。

就是这样，用过vue去操做数据，从而改变DOM的状态，这过程咱们并无去操做DOM。

接下来写详情页里面的内容了，布局是个问题

讲一下sticky footers：http://www.tuicool.com/articles/rEbQjaM

Sticky footers能够归纳以下：若是页面内容不够长的时候，页脚块粘贴在视窗底部；若是内容足够长时，页脚块会被内容向下推送。

有不少种方案，这里做者介绍一种比较复杂的可是兼容性好的方案。

定两层，上一层要清除浮动：

最终套路：

detail-wrapper层要让它的最小高度撑满整个屏幕的，按钮才会定在最下面。内容层有个padding-bottom，关闭层有个margin-top，就是为了向上提。

还要在base.styl添加清楚浮动的代码。

detail-main是内容区块，向上须要有margin-top，向下有padding-bottom。

detail-close也是用到图标字体，这里还有一个重要的点：相对定位，而后向上的负margin-top，还要清除浮动。无论内容再多，关闭按钮仍然可以定在底部，padding-bottom很关键。

接下来添加内容

不可能这样整张图吧，由于若是评分多的话，有100分呢，那么这样的图片不得有上百行。并且项目也多处有星星，因此这样能够弄一个组件star.vue。并且把图片都单独切开，这样无论什么状态都只有这么多图片。

为了有更好的扩展性，而且足够灵活，咱们要利用vue里面的v-for的指令，根据咱们定的星星个数去遍历它。

而且，因为这里的star有不一样尺寸，因此也有不一样样式，因此就用一个v-bind绑定class。

首先，star有不一样的尺寸，这个尺寸的大小是由外部数据传进来的，因此须要对外提供接口，能够传过来变量，告诉你star的尺寸是多少，得分又是多少。

这个过程主要仍是两方面：根据得分给星星，星星尺寸也不一样。

这里还须要一个公式来根据传过来的尺寸分数映射一个类型。

就好比传进来的size是24，那么计算以后就获得star-24，这是就能够设置size-24的相关样式了。

再添加不一样类型尺寸的star的样式。

接下来就是star的遍历了，它是一个数组，要得出须要多少个star。取整再除2，再取整数部分和小数部分。

由于半星只会有一个，因此只需一次push

长度不到5就补全。

itemClasses() {
        let result = [];
        let score = Math.floor(this.score * 2) / 2;
        let hasDecimal = score % 1 !== 0;
        let integer = Math.floor(score);
        for (let i = 0; i < integer; i++) {
          result.push(CLS_ON);
        }
        if (hasDecimal) {
          result.push(CLS_HALF);
        }
        while (result.length < LENGTH) {
          result.push(CLS_OFF);
        }
        return result;
      }