项目描述

之前一直用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地址阅读源码,如果有问题,可以在这里指出,让我们共同进步。

vue2.0构建淘票票webapp的更多相关文章

  1. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  2. 适用初学者:vue2.0构建单页应用最佳实战

    参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-wor ...

  3. react构建淘票票webapp,及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  4. react+redux构建淘票票首页

    react+redux构建淘票票首页 描述 在之前的项目中都是单纯的用react,并没有结合redux.对于中小项目仅仅使用react是可以的:但当项目变得更加复杂,仅仅使用react是远远不够的,我 ...

  5. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  6. vue2.0+elementUI构建单页面后台管理平台

    git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...

  7. Vue2.0 全家桶开发的网页应用(参照吾记APP)

    github链接 借鉴吾记APP,使用 vue2.0+vue-router+vuex 为主要技术栈,elementui做为ui框架,多模块 spa 模式,webpack2.0 负责模块打包,gulp ...

  8. vue2.0与实战开发

    慕课网实战 百度云 web前端实战: Node.js入门到企业Web开发中的应用 Web前端性能优化 让你的页面飞起来 前端跳槽面试必备技巧 前端JavaScript面试技巧全套 node.JS 线上 ...

  9. 一步步构造自己的vue2.0+webpack环境

    前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...

随机推荐

  1. 【OpenJudge 191】【POJ 1189】钉子和小球

    http://noi.openjudge.cn/ch0405/191/ http://poj.org/problem?id=1189 一开始忘了\(2^{50}\)没超long long差点写高精度Q ...

  2. linux 下的信号量参数

    linux 下的信号量参数 转载自:http://blog.itpub.net/26110315/viewspace-718306/ 信号量是一种锁机制用于协调进程之间互斥的访问临界资源.以确保某种共 ...

  3. pstools使用教程

    pstools是sysinternals开发的一个功能强大的nt/2k远程管理工具包. 官方网址为http://www.sysinternals.com/ 下载地址为http://www.sysint ...

  4. jquery 获取Select option 选择的Text和Value

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置 获取一组radio被选中项的值:var item = $(' ...

  5. C#调用c++Dll 结构体数组指针的问题

    参考文章http://blog.csdn.net/jadeflute/article/details/5684687 但是这里面第一个方案我没有测试成功,第二个方案我感觉有点复杂. 然后自己写啦一个: ...

  6. Swift - 自动布局库SnapKit的使用详解2(约束的更新、移除、重做)

    在之前的文章中我介绍了如何使用SnapKit的 snp_makeConstraints 方法进行各种约束的设置.但有时我们的页面并不是一直固定不变的,这就需要修改已经存在的约束.本文介绍如何更新.移除 ...

  7. ACE - Ubuntu下环境搭建

    之前写了很多linux下的底层网络API的demo,这些demo可用于了解底层的网络通信过程,但是想做出好的服务器用于实际业务还是非常困难的,需要大量的代码实现,移植性也非常差,想要写出高性能架构的服 ...

  8. VMware虚拟系统 bridged、NAT、host-only三种网络连接模式

    目录 前言 bridged(桥接模式) NAT(网络地址转换模式) host-only(仅主机模式) 总结 前言 如果你想利用VMWare安装虚拟机,或想创建一个与网内其他机器相隔离的虚拟系统,进行特 ...

  9. java_redis3.0.3集群搭建

    redis3.0版本之后支持Cluster,具体介绍redis集群我就不多说,了解请看redis中文简介. 首先,直接访问redis.io官网,下载redis.tar.gz,现在版本3.0.3,我下面 ...

  10. 网页设定固定背景图片(抄袭自百度FM)

    这个新技能,我是从百度FM中学习到的. 在网页中,有一个id为"body-bg"的层, html代码: <div id="body-bg" style=& ...