基于vue+node+MySQL的导航可视化系统webapp设计
基于Express+vue+高德地图API实现的出行可视化APP
1.项目简介 1
1.1技术栈 1
1.2功能模块 1
1.2.1个人出行 1
1.2.2公共交通 2
1.2.3历史列表 2
1.2.4我的信息(未完成) 2
2.项目构建 2
2.1前端 2
2.2后端 3
3.系统设计 3
3.1项目配置 3
3.2路由转发 4
3.3请求拦截器 5
3.4正则验证规则 5
4.项目运行 6
5.项目截图 6
公共交通 7
历史列表 8
我的信息 9
6.小结 10
6.1项目简结 10
6.2过程总结 10
i. 实时定位,绘制出行轨迹(悦跑圈,已完成) 10
ii. 路线规划,规划路线绘制路径图(百度地图,已完成) 10
iii. 网约车,快车,专车,顺风车在线叫车(滴滴出行,未完成) 10
iv. 可视化分析,出行数据的可视化分析(已完成) 10
6.3难点总结 11
6.4补充 11
6.5更新 11
1.1技术栈
前端:移动端,vue全家桶,Mand组件库,Echarts.js,Scss
后端:Node,Express框架,高德地图API
数据库:Mysql
1.2功能模块
1.2.1个人出行
用户个人出行,不确定路程、目的地等信息,选择出行工具,点击开始,系统实时监听用户手机位置得到WGS84经纬度坐标(w3c HTML5 Geolocation地理定位标准),行程结束,记录本次出行信息,经纬度坐标转换GCJ-02坐标体系,通过高德地图提供三方API绘制出行轨迹。
1.2.2公共交通
用户确定出发地、目的地、交通工具,选择公共交通出行,用户输入位置关键字,选择合适出发/目的位置,选择乘坐交通工具,规划出行路线,选择某一条路线,确定后点击保存上传本次出行记录
1.2.3历史列表
按时间顺序查看所有出行的历史记录,可查看出行的详情信息、行程轨迹、路线规划
1.2.4我的信息
查看我的详情信息,通过出行数据分析得到的出行趋势折线图,与出行数据相关的数据分析图表,其他功能未写
2.项目构建
2.1前端
前端在 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提供
2.2后端
使用 Node 的 express 框架,连接 Mysql 数据库,做数据接口开发,数据的增删改查与简单封装。
项目配置const path = require('path')function resolve (dir) {return path.join(__dirname, './', dir)}module.exports = {chainWebpack: config => {//为src下文件配别名,不使用相对路径 config.resolve.alias.set('@', resolve('src')).set('assets', resolve('src/assets')).set('components', resolve('src/components')).set('views', resolve('src/views')).set('icons', resolve('src/icons')).set('router', resolve('src/router')).set('utils', resolve('src/utils')).set('style', resolve('src/style'))/** 设置处理svg的router,使svg可直接用名称调用,无需路径 */// svg rule loaderconst svgRule = config.module.rule('svg') // 找到svg-loader svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录 svgRule // 添加svg新的loader处理.test(/\.svg$/).use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'})},publicPath: './',/** 开发环境代理 */devServer: {open: true,proxy: {'/api': {target: 'http://localhost:3000',ws: true,changeOrigin: true,pathRequires: {'^/api': ''}}}}}var createError = require('http-errors');var express = require('express');var path = require('path');var cookieParser = require('cookie-parser');var logger = require('morgan');var indexRouter = require('./routes/index');var userRouter = require('./routes/user');var tripRouter = require('./routes/trip');var app = express();// view engine setupapp.set('views', path.join(__dirname, 'views'));app.set('view engine', 'pug');app.use(logger('dev'));app.use(express.json());app.use(express.urlencoded({ extended: false }));app.use(cookieParser());app.use(express.static(path.join(__dirname, 'public')));app.use('/', indexRouter);app.use('/user', userRouter);app.use('/trip', tripRouter);//catch 404 and forward to error handler app.use(function(req, res, next) {
next(createError(404)); });//error handlerapp.use(function(err, req, res, next) {//set locals, only providing error in development res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};//render the error pageres.status(err.status || 500);res.render('error');});module.exports = app;
基于vue+node+MySQL的导航可视化系统webapp设计相关推荐
- 基于Vue+Element-UI实现的威胁情报可视化系统【100011419】
基于威胁情报基础库的关联关系可视化 摘 要 威胁情报数据分析是网络安全防护及网络攻击追踪溯源的重要前提,但传统分析方式并不足以反映复杂网络数据的真实情况,只有充分结合专家分析模式与交互式可视化技术,才 ...
- 基于Vue和SpringBoot的论文检测系统的设计与实现
作者主页:Designer 小郑 作者简介:Java全栈软件工程师一枚,来自浙江宁波,负责开发管理公司OA项目,专注软件前后端开发(Vue.SpringBoot和微信小程序).系统定制.远程技术指导. ...
- 基于Vue和SpringBoot的毕业生追踪系统的设计和实现
作者主页:Designer 小郑 作者简介:Java全栈软件工程师一枚,来自浙江宁波,负责开发管理公司OA项目,专注软件前后端开发(Vue.SpringBoot和微信小程序).系统定制.远程技术指导. ...
- 基于Vue+Node+MySQL的美食菜谱食材网站设计与实现
摘 要 摘要:本文描述的基于Vue.js开发一个在线的美食网站.Vue.js性能强悍.文档清晰明了.简单易学且更契合国内开发者习惯,成为国内当前最受欢迎的前端框架.以功能强大.开发方便的Vue.js作 ...
- mysql实现日志系统_基于Hadoop/CloudBase/MySQL的日志分析系统的设计与实现
Design and Implementation of Log Analysis System Based on Hadoop/CloudBase/MySQL ZHUO Haiyi 1 卓海艺(19 ...
- 基于Vue+Express+Mysql开发的手机端电影购票系统(附源码)
基于Vue+Express+Mysql开发的手机端电影购票系统 基于手机的电影购票系统-Vue+Node 一个Vue+Express+Mysql的电影售票项目 项目完整源码下载 https://dow ...
- Springboot毕设项目基于SpringBoot的学生宿舍水电费缴费系统的设计与实现2py81(java+VUE+Mybatis+Maven+Mysql)
Springboot毕设项目基于SpringBoot的学生宿舍水电费缴费系统的设计与实现2py81(java+VUE+Mybatis+Maven+Mysql) 项目运行 环境配置: Jdk1.8 + ...
- 基于Vue的驾校理论课模拟考试系统
基于Vue的驾校理论课模拟考试系统 系统角色: 系统管理员.普通用户.学员等. 主要功能包括: 定时处理服务器图片到本地.定时获取第三方平台题库.小车.客车.货车试题练习(练习方式包括:顺序练习.习题 ...
- 基于node.js网上蛋糕店系统的设计与实现(论文+项目源码)
随着互联网应用技术的突飞猛进.信息化广泛使用,已渗透到各行各业.作为代表的以网上购物商城为例.它极大地改变了人们的出行方式以及线上购物发生的转变.网上购物的需求也随着人们的个性化定制而变得相对复杂.用 ...
最新文章
- 模型优化的风向标:偏差与方差
- Linux_用户权限管理
- (原创)无废话C#设计模式之十二:Bridge
- Unity应用架构设计(7)——IoC工厂理念先行
- 爬虫采集-基于webkit核心的客户端Ghost.py [爬虫实例]
- Android中再按一次退出实现
- 车牌识别python实现ubuntu_python利用百度云接口实现车牌识别
- OpenCV提供的各种阈值选项的实例(附完整代码)
- 跟我一起学.NetCore之Asp.NetCore启动流程浅析
- Python使用C++动态库的方法
- 使用android日志工具
- android----AsyncHttpClient的get,post和图片上传
- Servlet开发(1)-----基础及MVC设计模式
- paip . 解决spring No unique bean of type [com.mijie.homi.search.service.index.MoodUserIndexService]
- do while 执行1次
- win7下让不支持代理的程序使用代理
- 结对编程-李晓彤+凌嘉文
- 记录一次idea因为虚拟内存不足而闪退的经历
- RecycleView的 Scrapped or attached views may not be recycled错误原因研究
- “马赛克”真能去除了?老司机狂喜!