Vue+Node+高德地图+Echart作一款出行可视化全栈webapp

咔咔出行（出行可视化）

项目简介

解决出行问题，用于出行行程记录，路线规划，数据可视化分析的移动端webapp
点击这里查看该项目

项目截图

私人出行


公共交通


历史列表

个人信息

技术栈

• 前端：移动端，vue全家桶，Mand组件库，Echarts.js，Scss
• 后端：Node，Express框架，高德地图API
• 数据库：Mysql

功能模块

我的出行

用户我的出行，不肯定路程、目的地等信息，选择出行工具，点击开始，系统实时监听用户手机位置获得WGS84经纬度坐标（w3c HTML5 Geolocation地理定位标准），行程结束，记录本次出行信息，经纬度坐标转换GCJ-02坐标体系，经过高德地图提供三方API绘制出行轨迹。

公共交通

用户肯定出发地、目的地、交通工具，选择公共交通出行，用户输入位置关键字，选择合适出发/目的位置，选择乘坐交通工具，规划出行路线，选择某一条路线，肯定后点击保存上传本次出行记录

历史列表

按时间顺序查看全部出行的历史记录，可查看出行的详情信息、行程轨迹、路线规划

个人信息（未完成）

查看个人详情信息，经过出行数据分析获得的出行趋势折线图，与出行数据相关的数据分析图表，其余功能未写

项目构建

前端

前端在vue-cli3基础上开发，在此之上根据项目需求对项目工程做出几点修改，前端代码在view/文件夹中

• 移动端适配：以前作移动端开发一直使用手淘的分辨率适配方案，本项目根据大漠的《如何在Vue项目中使用vw实现移动端适配》，对移动端分辨率用webpack在工程中配置。
• 请求拦截器：在view/src/request/中，基于axios提供的interceptors对全部ajax的请求和响应添加相应操做，如请求头添加，token添加，响应后台错误状态码的识别与报错；简单封装了下axios请求，主要为get，post两种。
• 导航守卫：在view/src/router/中，作了全局导航守卫，未登陆用户只能访问项目登陆页面。
• 工具类：在view/src/utils/中，对经常使用枚举值、全局组件注册、经常使用类封装等功能作模块化封装。
• css样式：在view/src/style/中，全局公共样式，初始化样式。
• svg组件：在view/src/icons/中，封装用于svg展现组件，用作小icon的展现，svg保存该文件夹中。
• 模块化：对路由与vuex作模块化封装。
• 地图：全部地图、地理信息、轨迹、路线规划功能有高德地图第三方API提供

后端

• 使用Node的express框架，链接Mysql数据库，作数据接口开发，数据的增删改查与简单封装。

小结

项目简结

• 难度：简单
• 开发时长：前期调研，编码一周
• 关键字：移动端，出行，可视化，高德地图，Echart图表

过程总结

• 想法产出：由于在滴滴出行的实习经历，准备作款有关出行平台的，有关前端可视化的产品。

• 需求调研：结合出行 可视化 关键字作需求分析，调研悦动圈、悦跑圈、滴滴出行、百度地图、高德地图肯定几个主要功能

  1. 实时定位，绘制出行轨迹(悦跑圈，已完成)
  2. 路线规划，规划路线绘制路径图(百度地图，已完成)
  3. 网约车，快车，专车，顺风车在线叫车(滴滴出行，未完成)
  4. 可视化分析，出行数据的可视化分析(已完成)

• 技术调研：

  1. 选取HTML5 Geolocation提供的物理位置实时监听功能，获取到WGS84经纬坐标
  2. 选取高德地图第三方API提供地图，地理位置，轨迹绘制，路线规划等功能
  3. 选择开发移动端项目，用滴滴的Mand做为移动端UI组件库
  4. 选取Node为服务端，Express为后端框架，Mysql为数据库

难点总结

产品从无到有是最困难的，项目虽然不难，可前期产品调研，技术调研，项目构建确花费了大量时间，相比照着成品写多了不少不同的体验

Github源码 https://github.com/wwenj/tripRecord

补充

数据库表已上传，可在server/router中修改链接数据库信息，链接数据库后便可运行
我的服务器正在更改，更改后会放到线上

注：由于立刻毕业，这只是为了应对毕业设计临时写的小项目，没想到会有这么多star，时间有限主要实现核心功能，产品仍是很粗糙，我会找时间完善下，谢谢