173

咔咔出行(出行可视化)

项目简介

解决出行问题,用于出行行程记录,路线规划,数据可视化分析的移动端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提供

后端

  • 使用Nodeexpress框架,连接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,时间有限主要实现核心功能,产品还是很粗糙,我会找时间完善下,谢谢


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

22 条评论
Kylin_Wit · 6月9日

不错

回复

转身 · 6月10日

小哥,有线上地址么,想欣赏下线上得

回复

0

@转身 最近服务器在重新换,过阵子弄好了放上

小健 作者 · 6月10日
0

小哥,能说下你得sql文件得字符集和排序规则么

转身 · 6月16日
Davie · 6月10日

数据库表结构能提供下吗?不然后端跑步起来,谢谢

回复

0

@Davie 稍等,回头我传github上

小健 作者 · 6月10日
0

已上传

小健 作者 · 6月10日
0

兄弟,你导入成功了吗?是什么编码格式的啊,我这边全是错

懿蕃蕃 · 6月11日
Freedom · 6月12日

后台运行不起来,用什么命令运行? 谢谢啦

回复

0

需要连上数据库哦,npm start就可以,像这种运行命令package.json里都能看到

小健 作者 · 6月12日
0

npm ERR! errno 1
npm ERR! myapp@0.0.0 start: node ./bin/www
npm ERR! Exit status 1
报这个错误

Freedom · 6月12日
0

npm install了吗?

小健 作者 · 6月12日
lyqBridge · 6月13日

大佬,npm run build 的时候,vue.config.js里面要改什么配置吗?为什么我在移动端运行老是报错,求指教

回复

书包里的河马 · 6月14日

npm 版本不匹配服务启动不起来 。请问你的npm用的什么版本的啊

回复

0

这还有版本不匹配吗,新按的环境node都是最新版,你可以试试cnpm之类的

小健 作者 · 6月14日
gettyleemma · 8月7日

你好,关于postcss-px-to-viewport和mand-mobile.css冲突是如何解决的?谢谢。错误如下:
((Emitted value instead of an instance of Error) postcss-viewport-units: F:VueProjecttripRecordnode_modulesmand-mobilelibmand-mobile.css:1:95071: '.md-slider-handle:after' already has a 'content' property, give up to overwrite it.)

回复

载入中...