麥加是伊斯蘭教的發(fā)祥地,每年的十二月份,數(shù)百萬來自世界各地的穆斯林齊聚麥加,參加一年一度盛大的麥加朝覲活動(dòng)。因?yàn)槿巳簱矶?踩踏事故屢見不鮮,這些事故給人們的生命財(cái)產(chǎn)安全造成了巨大的損失。麥加政府希望通過實(shí)現(xiàn)一個(gè)系統(tǒng)幫助他們感知交通以便實(shí)時(shí)掌握麥加交通運(yùn)行和穆斯林聚集情況,根據(jù)實(shí)際情況調(diào)動(dòng)資源,避免事故發(fā)生。智慧交通是一個(gè)很寬泛的概念,對(duì)應(yīng)的在用途上,智慧交通系統(tǒng)也是形形色色的,大多數(shù)智慧交通系統(tǒng)都專注于解決某一個(gè)或多個(gè)特定的交通問題,有的用于市內(nèi)交通,有的用于市外交通,有的用于水運(yùn)交通,有的用于空運(yùn)交通,或者多方面的協(xié)同管理等等。在實(shí)現(xiàn)方案上,大多數(shù)運(yùn)行在網(wǎng)頁或PC等傳統(tǒng)平臺(tái)上,隨著移動(dòng)互聯(lián)網(wǎng)的普及,目前也有一些智慧交通應(yīng)用運(yùn)行在手機(jī)APP中。本文實(shí)現(xiàn)的麥加朝覲智慧交通系統(tǒng)前端模塊是一個(gè)用于展示麥加交通運(yùn)行情況的單頁應(yīng)用,借助散布于城市各處的物聯(lián)網(wǎng)傳感器傳回的數(shù)據(jù),系統(tǒng)可以幫助城市交通管理人員實(shí)時(shí)查看當(dāng)?shù)氐牡缆窊矶潞湍滤沽志奂闆r,可以回放歷史交通情況也可以根據(jù)歷史數(shù)據(jù)簡(jiǎn)單預(yù)測(cè)未來交通情況。整個(gè)系統(tǒng)的前端模塊采用MVC架構(gòu),并且根據(jù)實(shí)際需要添加了狀態(tài)管理模塊。在技術(shù)選型上,前端模塊采用單頁應(yīng)用,即用JavaScript、CSS、HTML等前端技術(shù)實(shí)現(xiàn)的只有一個(gè)頁面的Web應(yīng)用,同時(shí)使用Babel、Webpack等前端工具加以編譯和構(gòu)建。使用單頁應(yīng)用方式開發(fā)的麥加智慧交通系統(tǒng),充分分離了前后端,后端專注于提供數(shù)據(jù),前端根據(jù)數(shù)據(jù)渲染頁面,同時(shí)組件之間相互分離,降低了系統(tǒng)的耦合,提升了系統(tǒng)的可拓展性和可修改性。該系統(tǒng)上線后取得了較好的效果,實(shí)時(shí)高效穩(wěn)定地給政府工作人員展示麥加城市的交通運(yùn)行狀況,提高了政府工作人員對(duì)危險(xiǎn)狀況的反應(yīng)速度,避免了許多事故的發(fā)生。
【學(xué)位單位】：南京大學(xué)
【學(xué)位級(jí)別】：碩士
【學(xué)位年份】：2018
【中圖分類】：TP311.52
【文章目錄】：
摘要
Abstract
第一章 引言
    1.1 項(xiàng)目背景
    1.2 智慧交通單頁應(yīng)用發(fā)展概況
    1.3 本文主要研究的工作
    1.4 本文的組織結(jié)構(gòu)
第二章 技術(shù)綜述
    2.1 ECMAScript 2017
    2.2 Babel
    2.3 Webpack
    2.4 Leaflet.js
    2.5 D3.js
    2.6 LESS
    2.7 本章小結(jié)
第三章 麥加朝覲智慧交通系統(tǒng)前端模塊的需求分析與總體設(shè)計(jì)
    3.1 項(xiàng)目需求概述
    3.2 系統(tǒng)需求分析
        3.2.1 功能需求
        3.2.2 非功能需求
        3.2.3 系統(tǒng)用例圖
        3.2.4 關(guān)鍵用例描述
    3.3 系統(tǒng)總體設(shè)計(jì)與模塊設(shè)計(jì)
        3.3.1 麥加朝覲智慧交通系統(tǒng)前端模塊的總體結(jié)構(gòu)
        3.3.2 狀態(tài)管理模塊
        3.3.3 View模塊
        3.3.4 地圖組件和圖表組件
    3.4 本章小結(jié)
第四章 麥加朝覲智慧交通系統(tǒng)前端模塊的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
    4.1 狀態(tài)管理模塊的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
        4.1.1 StateBus的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
        4.1.2 Remote StateBus的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
    4.2 View模塊的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
        4.2.1 網(wǎng)格布局的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
        4.2.2 分層結(jié)構(gòu)的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
        4.2.3 布局器的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
    4.3 地圖組件與圖表組件的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
        4.3.1 地圖組件的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
        4.3.2 圖表組件的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)
    4.4 前端模塊的測(cè)試
        4.4.1 邏輯校驗(yàn)測(cè)試
        4.4.2 服務(wù)校驗(yàn)測(cè)試
    4.5 系統(tǒng)運(yùn)行示例
    4.6 本章小結(jié)
第五章 總結(jié)與展望
    5.1 總結(jié)
    5.2 展望
參考文獻(xiàn)
致謝

【參考文獻(xiàn)】

相關(guān)期刊論文 前10條

1 徐魁;;國(guó)內(nèi)城市智慧交通發(fā)展探討[J];西部交通科技;2017年01期

2 丁隆;;麥加朝覲:事故頻發(fā)的背后[J];世界知識(shí);2015年20期

3 郭巧麗;;Position定位技術(shù)在網(wǎng)頁制作中的應(yīng)用[J];電腦編程技巧與維護(hù);2015年12期

4 張運(yùn)良;張兆鋒;張曉丹;許德山;;使用D3.js的知識(shí)組織系統(tǒng)Web動(dòng)態(tài)交互可視化功能實(shí)現(xiàn)[J];現(xiàn)代圖書情報(bào)技術(shù);2013年Z1期

5 蔡翠;;我國(guó)智慧交通發(fā)展的現(xiàn)狀分析與建議[J];公路交通科技(應(yīng)用技術(shù)版);2013年06期

6 田娟;徐釗;;基于J2EE的MVC設(shè)計(jì)模式的分析與思考[J];計(jì)算機(jī)與現(xiàn)代化;2010年10期

7 唐燦;;下一代Web界面前端技術(shù)綜述[J];重慶工商大學(xué)學(xué)報(bào)(自然科學(xué)版);2009年04期

8 柯昌正;黃厚寬;;Ajax技術(shù)的原理與應(yīng)用[J];鐵路計(jì)算機(jī)應(yīng)用;2007年01期

9 韓志斌;;近年麥加朝覲慘劇反思[J];世界宗教文化;2006年03期

10 任中方,張華,閆明松,陳世福;MVC模式研究的綜述[J];計(jì)算機(jī)應(yīng)用研究;2004年10期

相關(guān)碩士學(xué)位論文 前1條

1 段躍潤(rùn);基于HTML5的移動(dòng)電商系統(tǒng)前端的設(shè)計(jì)與實(shí)現(xiàn)[D];南京大學(xué);2017年

本文編號(hào)：2838222