KakaTravel（旅游可视化）项目介绍解决旅游问题，用于旅游行程记录，路线规划，数据可视化分析的移动webapp点击查看项目截图私人旅行公交历史一览我的信息技术栈前端：移动端、vue全家桶、Mand组件库、Echarts.js、Scss后端：Node、Express框架、高德地图API数据库：Mysql函数模块个人旅游用户个人旅游不确定关于距离、目的地等信息。选择一个旅行工具，然后单击开始。系统会实时监测用户手机位置，获取WGS84经纬度坐标（w3cHTML5Geolocation标准）。行程结束后，记录行程信息，经纬度坐标转换为GCJ-02坐标系，通过高德地图提供三方API绘制行程轨迹。公共交通用户确定出发地、目的地、交通工具，选择公共交通出行，用户输入位置关键词，选择合适的出发/目的地位置，选择交通工具，规划出行路线，选择某某路线，确认后点击保存上传这条旅行记录的历史列表按时间顺序查看所有旅行历史记录，可以查看旅行详情，行程轨迹，路线规划我的信息（未完成）查看我的详情，获取的旅行趋势折线throughtraveldataanalysisFigure，与出行数据相关的数据分析图表，其他功能就不写了项目建设前端基于vue-cli3开发。在此之上，根据项目需求，对项目工程进行一些修改，将前端代码移到视图/文件夹中终端适配：之前做移动端开发，一直使用的分辨率适配方案淘宝。本项目使用webpack，根据大魔王的《如何在Vue项目中使用vw实现移动端适配》，在项目中配置移动端分辨率。请求拦截器：在view/src/request/中，基于axios提供的拦截器，对所有ajax请求和响应添加相应的操作，如添加请求头，添加token，在响应后台识别并上报错误状态码；简单封装下axios请求主要是get和post。Navigationguard：在view/src/router/下做了一个全局的navigationguard，没有登录的用户只能访问项目登录页面。工具类：在view/src/utils/下，对公共枚举值、全局组件注册、公共类封装等功能进行模块化。css样式：在view/src/style/，全局公共样式，初始化样式。svg组件：在view/src/icons/中，封装了svg显示组件，用于小图标的显示，svg保存在该文件夹中。模块化：路由和vuex的模块化封装。地图：所有地图、地理信息、轨迹、路线规划功能均由高德地图第三方API提供。后端使用Nodeexpress框架连接Mysql数据库，开发数据接口，增删改查数据，简单封装。Summary项目总结难度：简单开发时间：前期调研，一周coding关键词：移动端，出行，可视化，高德地图，Echart图表过程总结思路输出：因为在滴滴出行的实习经历，跟赚钱有关对于旅游平台，前端可视化相关的产品。需求调研：结合出行可视化关键词做需求分析，调研悦动圈、悦跑圈、滴滴出行、百度地图、高德地图，确定几个主要功能的实时定位，绘制出行轨迹（悦跑圈，已完成）路线规划，规划及路线绘制路线图（百度地图，已完成），网约车，快车，专车，网约车（滴滴出行，未完成）可视化分析，出行数据可视化分析（已完成）技术研究：选择HTML5Geolocation提供的物理位置实时监测功能，获取WGS84经纬度坐标。选用高德地图第三方API，提供地图、地理位置、轨迹绘制、路线规划等功能。选择开发移动端项目，使用滴滴的Mand作为移动端UI组件库选择Node作为服务端，Express作为后端框架，Mysql作为数据库。难点从头总结产品是最难的。虽然项目难度不大，但前期在产品调研、技术攻关、项目建设等方面耗费了大量时间。和写成品相比，有很多不一样的体验。Github源码https://github.com/wwenj/tripRecord补充数据库表已上传。您可以修改服务器/路由器中的连接数据库信息。连接上数据库后，就可以运行personalserverischanging了，改完之后就上线了。注：因为马上就要毕业了，所以这里只是为了毕业设计临时写的一个小项目。没想到会有这么多明星。时间有限，实现核心功能。产品还是很粗糙。我会找时间完善的，谢谢更新2019.11.15项目已经上线，可以点击体验http://demo.wwenj.com/tripRecord项目已经上传到服务器，只需要克隆项目，运行前端代码，界面会访问线上服务器。如果想访问自己的本地服务，在/view/src/request/http.js中把前端request改成自己的ip，导入表连接自己的数据库，谢谢。因为浏览器端定位本身受很多因素限制，定位成功率不是很高，很可能没有权限，定位失败。您可以尝试启用权限或更换浏览器。
