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
转载于:https://www.cnblogs.com/canfoo/p/6214406.html
vue2.0构建淘票票webapp相关推荐
- 饿了吗app都是用html写的,Vue2.0仿饿了么webapp单页面应用详细步骤
这篇文章主要为大家详细介绍了Vue2.0仿饿了么webapp单页面应用详细步骤,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 部分截图 [图片暂 ...
- vue2.0仿饿了么webAPP项目
# webapp vue2.x仿饿了么app项目总结 项目地址:https://github.com/harrietjia/vue2-webapp.git 如果觉得有帮助,希望可以在右上角给我个sta ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- 本地运行github上的vue2.0仿饿了么webapp项目
在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了 github源码地址:https://github.com/RegToss/Vue-SPA 课程教 ...
- react构建淘票票webapp,及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
- 使用Compose实现淘票票选择电影座位的效果
关注公众号学习更多知识 这是一篇去年就写好的博客 起因 新年要来了,看电影是我们新年中必不可少的娱乐项目,那么看电影的时候你是否有想过选座位的空间是如何实现的呢,座位优秀的程序员,我就想到了,今天就带 ...
- 08-Flask之淘票票(前后端分离)
一.区域选择模块 数据库建模 from App.ext import db# 字母模型类 class Letter(db.Model):id = db.Column(db.Integer, prima ...
- 猫眼、淘票票环伺 豆瓣影评危机被指公信力下降
猫眼.淘票票"环伺",豆瓣评分被指公信力下降 豆瓣影评"危机" 李甜,吴可仲 作为"影视风向标",豆瓣在评分与评论上的"公信力&q ...
- 支付宝老将樊路远加盟阿里影业 淘票票将成下一个支付宝?
2017年8月2日晚上,阿里巴巴发布的一则消息让文娱圈炸了!阿里巴巴文化娱乐集团董事长兼CEO俞永福宣布,阿里巴巴合伙人樊路远将加入阿里大文娱大班委,出任阿里影业集团公司CEO. 对还在纠缠中的猫眼和 ...
最新文章
- 文本编辑器中实现设置工具栏和状态栏可见性的功能
- 高考特长计算机2017,2017年北京理工大学计算机学院申请竞赛获奖与特长生推荐.PDF...
- netty epoll调用示例
- php版 v2.0,KangPHP v2.0 正式版
- 最短路径——Dijkstra算法以及二叉堆优化(含证明)
- springboot(十二)-分布式锁(redis)
- STM32工作笔记0013---认识UCOS系统
- java接口参数类型为枚举_Spring MVC处理参数中的枚举类型通用实现方法
- 查找算法之变种二分查找(C++版本)
- Exchange2003部署与管理体系结构
- sqlmap的安装教程
- 完整制作网吧系统全过程
- ios 集成阿里云推送通知的注意点
- GUI输出中文为乱码解决方式
- 安卓手机虚拟键盘和position:fixed问题
- MySQL-innobackupex备份工具
- Unity2D 简易2D地图 —— 地图的显示
- InnoDB Persistent Statistics问题
- Java+Jsp+MySql实现图书管理系统_图书管理系统代码
- 老北京的清明习俗(图)
热门文章
- 开车,开车,裤子里穿丝袜是什么感觉?
- 生活随记 - 2020年 人生没了来处只剩下了归途
- 第十届蓝桥杯大赛软件类省赛 JAVA 大学 A 组
- chromebook刷机_如何在Chromebook上设置家长控制
- 为什么要清除浮动?清除浮动的方式?
- Linux 实现ssh免密登录--设置后不生效的处理办法
- 数组三元数c语言程序,递增三元数组——第九届蓝桥杯C语言B组(省赛)第六题...
- 如何兼顾隐私安全与便捷体验?华为浏览器集成FIDO,登录环境更安全
- python gui web_一篇让你大开眼界的Python教程:让Web和GUI鱼和熊掌兼得
- iOS代码混淆安全加固