zoukankan      html  css  js  c++  java
  • vue2.0构建淘票票webapp

    项目描述

    之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务。

    前端技术栈:vue2.0 + vue-router + vuex + mint-ui 

    后台技术栈:nodejs + express

    项目地址:https://github.com/canfoo/vue2.0-taopiaopiao

    废话先不多说,先晒晒预览效果,过过瘾:

        

        

    项目架构

    本项目采用vue2.0栈构建前端页面,采用express搭建后台服务,主要目录如下:

     build
     config 
     src //前端主要开发目录
      --assets //存放前端静态资源
      --components //存放组件
        --store //vuex数据流管理
        --views //页面视图,由vue-router引入
        --App.vue 
        --main.js //前端入口文件
    server //后台服务
       --bin //启动后台服务配置
       --database //存放页面所需要的json数据
       --public //前端部署时存放在后台服务的位置
       --routes //路由于请求接口管理
       --views //前端模板存放位置
       --app.js //后台服务入口

    主要特色功能概览

    1. 通过vue自定义指令实现正在热映等列表中图片按需加载,源码位置在/vue2.0-taopiaopiao/src/components/lazyload.js

    2. 通过组件设计思想实现电影院详情中图片滑动变速、选中动画等功能,源码位置在/vue2.0-taopiaopiao/src/components/cinemaDetai/film.vue

    3. 采用vuex管理每次加载数据自动判断是否需要显示loading,源码位置在/vue2.0-taopiaopiao/src/store/loading/mutations.js

    4. 采用mint-ui实现城市分类选择等样式,其项目主页为http://mint-ui.github.io/#!/zh-cn

    ...

    学习心得

    vue2.0相对于vue1.0还是拥有比较大的变化,废除了很多原有的接口,比如1.0的为了解决组件通信的$dispatch和$broadcast弃用掉,转而提倡更多简明清晰的组件间通信和更好的状态管理方案,如vuex。事实证明,用vuex可以轻易解决组件间通信,而且容易维护和引用。还有2.0将v-el 和 v-ref 合并为一个 ref 属性,使用方法跟react里的refs是一样的。这里只是简单举两个例子,如果还停留在1.0的童鞋,可以直接到官方网站中查看。如果还不了解同时还在犹豫要不要入手vue的童鞋,这里强烈建议赶快拿起vue上来撸了,为什么呢,因为vue上手快,而且mvvm的数据双向绑定会让你省去很多无用的事,再配合第三方提供的方案,比如vue-router和vuex,可以将单薄的vue包装成一个强大的栈,对于移动端中、大项目快速开发与良好维护是一个非常不错的选择。

    写此博客的目的主要是让大家简单了解下这个项目,而没有具体分析代码细节,因为个人觉得vue官网已经把很多知识点写得很详细了,没必要再复述了,如果对此项目有兴趣的童鞋,请到项目github地址阅读源码,如果有问题,可以在这里指出,让我们共同进步。

    其他

    react实现的淘票票仓库地址:https://github.com/canfoo/react-taopiaopiao

    react-native实现的淘票票仓库地址:https://github.com/canfoo/react-native-taopiaopiao

  • 相关阅读:
    变量的创建和初始化
    HDU 1114 Piggy-Bank (dp)
    HDU 1421 搬寝室 (dp)
    HDU 2059 龟兔赛跑 (dp)
    HDU 2571 命运 (dp)
    HDU 1574 RP问题 (dp)
    HDU 2577 How to Type (字符串处理)
    HDU 1422 重温世界杯 (dp)
    HDU 2191 珍惜现在,感恩生活 (dp)
    HH实习 acm算法部 1689
  • 原文地址:https://www.cnblogs.com/canfoo/p/6214406.html
Copyright © 2011-2022 走看看