项目技术分享

火车票项目技术分享

• 项目规划和安排
• 项目实现和vue所遇到的坑
• 项目展望和总结
• 资源分享

项目地址:火车票

火车票项目

火车票项目采用vue写的一个SPA 先后花费2个多月
项目所涉及的技术有:

1. vuejs （框架）
2. vue-router (vue路由)
3. vue-resource (vue ajax的封装 promise)
4. ES6 babel (ES6 语法糖 和bebel转化为可执行的ES5)
5. webpack (项目构建打包发布工具)
6. mint ui vue组件库 类型的还有(vux sui等)
7. eslint (部分文件约束规范)

个人所参考的代码规范
代码规范标准化
[vue+webpack标准化]
(https://www.talkingcoder.com/article/6309726065044556372)

项目初期规划

1. 组件和视图的规划
2. 插件 弹出层的梳理
3. 路由的整理
4. 数据层的封装
5. 数据层状态的管理 vuex(由于个人不熟悉没有上)
6. 调试接口 精细UI

梳理火车票的功能和相关流程

1. 登录
2. 添加 删除 修改联系人
3. 查询火车票
4. 订票
5. 退票
6. 改签
7. 订单的操作

定义界面和路由

页面和路由

1. home页面 /home
2. ticketlist页面 /hb/ticfketlist
3. login页面 12306登陆界面 /hb/user/login
4. children-insurance 填写儿童信息界面 /insurance/children
5. 订单页面 order

填写订单页面 1. choose-seat-order
填写订单页面2. fill-order order/fill

6. 订单详情界面 detail order/detail 订单详情界面 (未支付)
7. 订单支付界面 pay order/pay 订单支付界面(订单支付界面)
8. 订单列表 orderlist order/list 订单列表
   订单详情 (支付购票成功后的操作) history-detail
   。。。。

当然实际开发的时候界面有所改动 会比先期所设想的界面多的多

定义和理清路由和界面的对应关系后就可以对每个界面做具体的实现
每个界面对应一个或多个vue实例
需要做的是：

1. 响应用户操作和显示对应操作逻辑
2. 呈现对应的数据

具体到vue上 就是纯粹的对数据操作

1. 使用vue-resource 获取数据
2. 模板上 vue 自动绑定对应数据
3. 用户操作 改变对应的数据 dom更新
   使用mvvm将繁琐的手动维护和更新dom的操作删除了
   只用关心数据和对应模板 以及对数据的格式化显示(采用compute 和filter来处理)

vue1.0 开发中遇到的坑

• checkbox 数据双向绑定 chooseId 中的 v-model 需要为字符串 类型的数组才能实现双向绑定和关联

• input[type=text] chang foucs v-model 在ios上有兼容性问题
  采用 v-on:input ="updateStationList"

• vue中的组件交互 父子组件 兄弟组件的数据传递会将界面逻辑变复杂 所以采用vue1.0的话 尽量一个页面对应一个独立的组件 常用的fragment instance可以独立为对应的组件 header footer公用组件抽取 其它的不建议
  ps 等vue2.0

• 处理大量数据 前端不适合一次处理大量数据

使用vue webpack的好处

1. 界面组件化 代码大同小异 统一格式 便于管理和查看 每个界面为一个或多个vue的示例
2. 能使用各种es6的语法糖 解构 箭头函数等
3. 基于模板和数据的快速定位和查找问题
4. 不用手动频繁操作dom 聚焦于数据和展现
5. 趋势 快捷发布

项目展望和规划

1. 定义和规范好前端的规范 采用eslint 控制好代码规范
2. 采用lodash 替代 underscore 聚焦数据进行操作
3. 前后端接口文档规范的制定和评审
4. 采用vue2.0 更加方便的操作vue组件交互和操作
5. 前端项目的独立部署 和更加彻底的前后端分离

资源分享

最全前端资源汇集

整理下vue线上项目相关资源

• 墨瞳漫画http://m.cm233.com/
• 掘金 http://gold.xitu.io/
• vue Carbon author 刘宇阳
• 知乎-哪些公司在使用vue
• mint-ui
• vue资源 - awesome
• vue2.0 - 中文教程
• 卖座 vue-vuex