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

三级黄色

项目描述

解决旅行问题,旅行行程的移动网络应用,路线规划,数据可视化分析

点击此处查看项目(

项目截图

私人旅行

8b0ce11f22114c9797f0f049a99a7ae1

3575752696134478b58d219f4595b663

公共交通

02bbbaabec8645af9ba316cd878beb76

e9e87f2fd9bb4570889d9a2d7d124cb2

历史列表

0fbd960e9e624206929211bc3538ae17

我的信息

fe9830ebe2e545eea597b2490c966711

bfe3464d5c87487e94a8841ec94b4097

技术堆栈

前端:移动,vue系列存储桶,Mand组件库,Echarts.js,Scss后端:节点,Express框架,高德地图API数据库:Mysql

功能模块

个人旅行

用户个人旅行,不确定距离,目的地等信息,选择旅行工具,点击开始,系统实时监控用户的手机位置,获取WGS84经纬度坐标(w3c HTML5地理定位地理标准),行程结束,记录当前的旅行信息,纬度和经度坐标转换GCJ-02坐标系并提供三部分API以通过Gaode地图绘制旅行轨迹。

公共交通

用户确定出发地,目的地,交通工具,选择公共交通工具,用户输入位置关键字,选择适当的出发地/目的地位置,选择交通工具,计划出行路线,选择一定路线,然后点击保存并这次上传。旅行历史

历史列表

按时间顺序查看所有旅行历史记录,查看旅行详情,行程,路线规划

我的信息(未完成)

查看我的详细信息,从旅行数据分析获得的旅行趋势线图,与旅行数据相关的数据分析图表,其他未编写的功能

项目建设

前端

前端是在vue-cli3的基础上开发的。在此基础上,根据项目要求对项目进行了一些修改。前端代码位于视图/文件夹

移动终端适应:在进行移动开发之前,我一直使用洗手的分辨率解析方案。该项目根据沙漠《如何在Vue项目中使用vw实现移动端适配》配置,移动端分辨率在项目中使用webpack配置。请求拦截器:在视图/src/request /中,基于axios提供的拦截器,向所有ajax请求和响应添加相应的操作,例如请求头添加,令牌添加,对后台错误状态码识别和错误报告的响应;简单封装在axios请求下,主要用于get,post两个。导航防护:在视图/src/router /中,创建了一个全局导航防护。未注册的用户只能访问项目登录页面。工具:在view/src/utils /中,公共枚举值的模块化封装,全局组件注册和公共类封装。 Css样式:在view/src/style /中,全局公共样式,初始化样式。 Svg组件:在view/src/icons /中,包用于svg显示组件,用作小图标显示,svg保存文件夹。模块化:用于路由和vuex的模块化包装。地图:所有地图,地理信息,轨迹和路线规划功能均由高端地图第三方API提供

后端

使用Node的express框架连接到Mysql数据库,进行数据接口开发,数据添加,删除和简单封装。

总结

项目摘要

难度:开发时间简单:预研,编码一周关键词:移动,旅游,可视化,高德地图,电子海图

流程摘要

想法输出:由于Didi旅行的实习经验,它已准备好为旅行平台的前端可视化赚钱。需求研究:结合旅游视觉关键词做需求分析,研究悦环,悦润圈,滴滴旅游,百度地图,高德地图,确定几个主要功能的实时定位,画出旅游轨迹(悦润圈,完成)路线规划,规划路线绘制路径图(百度地图,已完成)网络关于汽车,特快列车,专车,穿梭在线呼叫(滴灌,未完成)视觉分析,旅游数据可视化分析(已完成)技术研究:选择实时监控HTML5地理位置提供的物理位置功能,获取WGS84经纬度坐标,选择Gaode地图的第三方API,提供地图,地理位置,轨迹图,路线规划等功能,选择手机终端项目,使用Mand作为移动终端。 UI组件库选择Node作为服务器,Express作为后端框架,Mysql作为数据库

困难的总结

该产品是最难从零开始的,虽然项目并不难,但早期的产品研究,技术研究,项目建设确实需要花费大量的时间,相比成品要写出很多不同的经验

Github源代码

整理:前锋网前端

作者:Kin

链接: