前端技术选型报告
⼀、技术栈
VueJs+ElementUI+WebSocket/stopmJs+百度地图API+nodeJs/MockJs
运⾏平台:现代浏览器(Chrome、Firefox、Edge以及⼤部分国产浏览器的极速模式)
⼆、框架选型
Vue全家桶(vue+vue-router+axios)
主要特性:
1、 渐进式MVVM框架
2、 组件化编程,⽅便复⽤
3、 虚拟DOM技术,页⾯性能好
4、 API简洁明了
5、 社区丰富强⼤
Vue vs React
1、 都⽀持平台级的⼤型复杂应⽤,⽣态都很丰富
2、 状态管理上,理念类似,vue使⽤vuex,React使⽤的是Redux
3、 在扩展能⼒上,两者⽣态也相差⽆⼏
4、 社区活跃度都很⾼,都有较多的配套UI
5、 React学习曲线⽐较陡。在模板上,React使⽤的是JSX,⽽Vue使⽤的是接近常规的HTML模板,提供了⽐较⼈性化的指令。在⽂档上,Vue是国⼈开发的,中⽂⽂档⽐较友好,React中⽂⽂档⽐较粗略。
三、 UI选型
ElementUI
1、 ⾯向web的vue配套UI。
2、 丰富的组件、界⾯⽐较美观。
3、 ⽂档⽐较完整、社区活跃。
前端websocket怎么用四、消息框架选型
Websocket+ stompjs.js
构造stomp对象,连接后端RabbitMQ服务,实现消息实时推送。
五、地图Api选型
选择百度地图Api的原因:
1、 Api齐全,可满⾜标注、绘制点线⾯、路线规划、轨迹回放等功能。
2、 Api性能较好,定位精度⾼
3、 路线规划可满⾜铁路、公路、飞机的需求
百度地图Api vs ⾼德地图Api
1、 两者都具有⽐较丰富的Api
2、 ⾼德APi⽐较简答,上⼿⽐较容易,⽂档上,⾼德⽂档也⽐较友好
3、 在路线规划上,⽬前⾼德暂时不满⾜铁路、飞机的规划,⽽百度可以
六、 Mock数据选型
NodeJs+MockJs
使⽤NodeJs+MockJs的⽅式进⾏开发数据的模拟,满⾜前端开发受限于后端接⼝的问题,使前后端开发可以同步进⾏,提⾼开发效率