zoukankan      html  css  js  c++  java
  • 项目vue2.0仿外卖APP(五)

    header组件

    vue-resourse应用

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

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

    vue-resource插件具有以下特点:

    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,或者在请求失败时,提供共通的处理方式。

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

    Header组件:商家数据,通过异步请求后端的数据接口获得的,header组件就负责接受这样的数据并渲染 。那我们就可以在app.vue组件(header的父组件),通过发送一个AJAX请求去获取商家的相关数据,然后把这些数据通过headerprop属性传递给这个组件。

    可以查看:http://cn.vuejs.org/v2/guide/components.html#example-2-5

    父子组件间的通信

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

    Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。看看它们是怎么工作的。


    使用 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获取页面初始化所需的数据。

     

    能够看到这里已经发送了:

    还有很多字段:每个字段都有getset方法:

    到这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

    图片的2x3x是对应不同的dpr的。需要用到媒体查询,代码比较多,写在mixin.styl

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

    为了将它的数值对应到各自的含义,可以定义一个classMap:

    然后再动态添加class的值:

    想要变化:减价变成特价。可以去后台该数据的顺序:

    接下来写右下角的“5”:

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

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

    关于公告区:

    为了清除间隙还有不影响省略号,我们就不用font-size0了,用其他方法,就是元素紧贴一起。

    设置对齐的时候,可以先设置顶部对齐: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
           100%
          height: 100%
          overflow: auto
          background: rgba(7,17,27,0.5)

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

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

    也就是说,我们在new这个vue的时候,它会对data里面的变量去编译然后给它添加gettersetter,这样当我们的变量变化的时候,DOM就会跟着变化。

    查看元素:

    这是就要添加方法了:

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

    也就是说当我们去点击这个层的时候,会调用这个方法去改变detailShow,由于这个变量是依赖跟踪的,他就会访问到data里的detailShow,变化的时候vue也可以检测到,最后会通知这个DOM的指令,然后更新状态。

    就是这样,用过vue去操作数据,从而改变DOM的状态,这过程我们并没有去操作DOM

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

    讲一下sticky footershttp://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;
          }

    接下来回到header组件去引入了,然后注册。注册之后就可以在DOM用这个标签了。

    Star标签它是要传两个参数的。

    Tract-byhttps://segmentfault.com/q/1010000005143763

    查看元素:

    还要在header.vue组件中设置他们的样式,比如边距什么的,当然不能放在组件里面,如果这样就受限了。我们可以在在外层去包装它的容器,然后在定义它的内边距啊、高度等等

    优惠公告:

    这也是一个经典的布局问题:线的宽度是自适应,文字居中。文字与线之间的空隙也要有半透明的背景,这里会用移动端常见的布局flex。

    Flex布局:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

    一般有两层,父元素displayflex子元素指定flex

    这里为什么子元素用div呢?因为用span的话在Android某些浏览器会有问题。

    关于代码中CSS的样式兼容问题:我们并无需全部写出,因为有工具帮忙完成:

    接下来写优惠信息详细内容:

    这块内容跟我们外层的.support是相似的。

    但是vue2.0中的index这样用,请查看:http://cn.vuejs.org/v2/guide/list.html#v-for

    接下来再添加详细介绍,添加按钮的关闭功能。

    还可以添加动画,我还没添加。

    https://vuefe.cn/v2/guide/migration.html#过渡

    https://segmentfault.com/q/1010000007738500

    还有一点就是:在设计稿上可以看到,它的背景是模糊的,和刚刚图片模糊是完全不一样的。这个模糊只有在IOS上才能实现,它的实现是通过一个backdrop-filter: blur(10px)

    下一张就到了商品这个组件了,这个组件才是大大发挥vue的优势。

  • 相关阅读:
    codefoeces problem 671D——贪心+启发式合并+平衡树
    bzoj 1598: [Usaco2008 Mar]牛跑步
    bzoj 1050: [HAOI2006]旅行comf&&【codevs1001】
    codefoeces 671 problem D
    利用FFMPEG以及EasyRTMP实现读取H.264文件推RTMP视频流的两种方式
    视频流拉转推工具对比:EasyRTSPLive和FFMPEG拉转推效果对比
    TSINGSEE青犀视频Webrtc实时通信的构建流程:PeerConnection对等通信的实现方式
    TSINGSEE青犀视频云边端架构产品编译Intel Media SDK 编译报错error"SSE4.1 instruction set not enabled"
    H.265编码视频在web网页实现无插件播放,应该通过软解码还是硬解码?
    【案例分析】EasyDSS+EasyCVR融合共享解决方案
  • 原文地址:https://www.cnblogs.com/Chen-XiaoJun/p/6250316.html
Copyright © 2011-2022 走看看