麦加朝觐智慧交通系统前端模块的设计与实现
发布时间:2020-10-12 20:15
麦加是伊斯兰教的发祥地,每年的十二月份,数百万来自世界各地的穆斯林齐聚麦加,参加一年一度盛大的麦加朝觐活动。因为人群拥堵,踩踏事故屡见不鲜,这些事故给人们的生命财产安全造成了巨大的损失。麦加政府希望通过实现一个系统帮助他们感知交通以便实时掌握麦加交通运行和穆斯林聚集情况,根据实际情况调动资源,避免事故发生。智慧交通是一个很宽泛的概念,对应的在用途上,智慧交通系统也是形形色色的,大多数智慧交通系统都专注于解决某一个或多个特定的交通问题,有的用于市内交通,有的用于市外交通,有的用于水运交通,有的用于空运交通,或者多方面的协同管理等等。在实现方案上,大多数运行在网页或PC等传统平台上,随着移动互联网的普及,目前也有一些智慧交通应用运行在手机APP中。本文实现的麦加朝觐智慧交通系统前端模块是一个用于展示麦加交通运行情况的单页应用,借助散布于城市各处的物联网传感器传回的数据,系统可以帮助城市交通管理人员实时查看当地的道路拥堵和穆斯林聚集情况,可以回放历史交通情况也可以根据历史数据简单预测未来交通情况。整个系统的前端模块采用MVC架构,并且根据实际需要添加了状态管理模块。在技术选型上,前端模块采用单页应用,即用JavaScript、CSS、HTML等前端技术实现的只有一个页面的Web应用,同时使用Babel、Webpack等前端工具加以编译和构建。使用单页应用方式开发的麦加智慧交通系统,充分分离了前后端,后端专注于提供数据,前端根据数据渲染页面,同时组件之间相互分离,降低了系统的耦合,提升了系统的可拓展性和可修改性。该系统上线后取得了较好的效果,实时高效稳定地给政府工作人员展示麦加城市的交通运行状况,提高了政府工作人员对危险状况的反应速度,避免了许多事故的发生。
【学位单位】:南京大学
【学位级别】:硕士
【学位年份】:2018
【中图分类】:TP311.52
【文章目录】:
摘要
Abstract
第一章 引言
1.1 项目背景
1.2 智慧交通单页应用发展概况
1.3 本文主要研究的工作
1.4 本文的组织结构
第二章 技术综述
2.1 ECMAScript 2017
2.2 Babel
2.3 Webpack
2.4 Leaflet.js
2.5 D3.js
2.6 LESS
2.7 本章小结
第三章 麦加朝觐智慧交通系统前端模块的需求分析与总体设计
3.1 项目需求概述
3.2 系统需求分析
3.2.1 功能需求
3.2.2 非功能需求
3.2.3 系统用例图
3.2.4 关键用例描述
3.3 系统总体设计与模块设计
3.3.1 麦加朝觐智慧交通系统前端模块的总体结构
3.3.2 状态管理模块
3.3.3 View模块
3.3.4 地图组件和图表组件
3.4 本章小结
第四章 麦加朝觐智慧交通系统前端模块的详细设计与实现
4.1 状态管理模块的详细设计与实现
4.1.1 StateBus的详细设计与实现
4.1.2 Remote StateBus的详细设计与实现
4.2 View模块的详细设计与实现
4.2.1 网格布局的详细设计与实现
4.2.2 分层结构的详细设计与实现
4.2.3 布局器的详细设计与实现
4.3 地图组件与图表组件的详细设计与实现
4.3.1 地图组件的详细设计与实现
4.3.2 图表组件的详细设计与实现
4.4 前端模块的测试
4.4.1 逻辑校验测试
4.4.2 服务校验测试
4.5 系统运行示例
4.6 本章小结
第五章 总结与展望
5.1 总结
5.2 展望
参考文献
致谢
【参考文献】
本文编号:2838222
【学位单位】:南京大学
【学位级别】:硕士
【学位年份】:2018
【中图分类】:TP311.52
【文章目录】:
摘要
Abstract
第一章 引言
1.1 项目背景
1.2 智慧交通单页应用发展概况
1.3 本文主要研究的工作
1.4 本文的组织结构
第二章 技术综述
2.1 ECMAScript 2017
2.2 Babel
2.3 Webpack
2.4 Leaflet.js
2.5 D3.js
2.6 LESS
2.7 本章小结
第三章 麦加朝觐智慧交通系统前端模块的需求分析与总体设计
3.1 项目需求概述
3.2 系统需求分析
3.2.1 功能需求
3.2.2 非功能需求
3.2.3 系统用例图
3.2.4 关键用例描述
3.3 系统总体设计与模块设计
3.3.1 麦加朝觐智慧交通系统前端模块的总体结构
3.3.2 状态管理模块
3.3.3 View模块
3.3.4 地图组件和图表组件
3.4 本章小结
第四章 麦加朝觐智慧交通系统前端模块的详细设计与实现
4.1 状态管理模块的详细设计与实现
4.1.1 StateBus的详细设计与实现
4.1.2 Remote StateBus的详细设计与实现
4.2 View模块的详细设计与实现
4.2.1 网格布局的详细设计与实现
4.2.2 分层结构的详细设计与实现
4.2.3 布局器的详细设计与实现
4.3 地图组件与图表组件的详细设计与实现
4.3.1 地图组件的详细设计与实现
4.3.2 图表组件的详细设计与实现
4.4 前端模块的测试
4.4.1 逻辑校验测试
4.4.2 服务校验测试
4.5 系统运行示例
4.6 本章小结
第五章 总结与展望
5.1 总结
5.2 展望
参考文献
致谢
【参考文献】
相关期刊论文 前10条
1 徐魁;;国内城市智慧交通发展探讨[J];西部交通科技;2017年01期
2 丁隆;;麦加朝觐:事故频发的背后[J];世界知识;2015年20期
3 郭巧丽;;Position定位技术在网页制作中的应用[J];电脑编程技巧与维护;2015年12期
4 张运良;张兆锋;张晓丹;许德山;;使用D3.js的知识组织系统Web动态交互可视化功能实现[J];现代图书情报技术;2013年Z1期
5 蔡翠;;我国智慧交通发展的现状分析与建议[J];公路交通科技(应用技术版);2013年06期
6 田娟;徐钊;;基于J2EE的MVC设计模式的分析与思考[J];计算机与现代化;2010年10期
7 唐灿;;下一代Web界面前端技术综述[J];重庆工商大学学报(自然科学版);2009年04期
8 柯昌正;黄厚宽;;Ajax技术的原理与应用[J];铁路计算机应用;2007年01期
9 韩志斌;;近年麦加朝觐惨剧反思[J];世界宗教文化;2006年03期
10 任中方,张华,闫明松,陈世福;MVC模式研究的综述[J];计算机应用研究;2004年10期
相关硕士学位论文 前1条
1 段跃润;基于HTML5的移动电商系统前端的设计与实现[D];南京大学;2017年
本文编号:2838222
本文链接:https://www.wllwen.com/kejilunwen/ruanjiangongchenglunwen/2838222.html