基于VueJS的景區(qū)管理系統(tǒng)設(shè)計(jì)與開發(fā)
發(fā)布時(shí)間:2022-01-01 19:58
隨著我國經(jīng)濟(jì)的蓬勃發(fā)展,人民的生活正全面奔小康,生活質(zhì)量得到很大的改善,從而對(duì)于旅游體驗(yàn)要求越來越高,但是目前我國的傳統(tǒng)旅游管理模式已經(jīng)無法滿足人們的需求,因此景區(qū)需要針對(duì)自身需求制定一套智能化的景區(qū)管理系統(tǒng)。安全管理是景區(qū)管理中最重要也是最基礎(chǔ)的環(huán)節(jié),同時(shí)智能化的售票檢票可以提高景區(qū)的資源利用,促進(jìn)景區(qū)的發(fā)展,所以景區(qū)的安全和票務(wù)是景區(qū)管理中急需解決的重要問題。針對(duì)目前景區(qū)管理中存在的問題,本文在分析了國內(nèi)外景區(qū)智能化管理研究現(xiàn)狀以及發(fā)展趨勢(shì)的基礎(chǔ)上,同時(shí)分析了景區(qū)管理系統(tǒng)的整體需求,采用JavaScript和Java語言,使用WebRTC實(shí)時(shí)視頻傳輸技術(shù)以及PostgreSQL數(shù)據(jù)庫存儲(chǔ)技術(shù),設(shè)計(jì)并開發(fā)了基于VueJS的景區(qū)管理系統(tǒng),本文的主要工作如下:(1)介紹了景區(qū)智能化管理的研究背景和意義,闡述了景區(qū)管理系統(tǒng)的國內(nèi)外研究現(xiàn)狀,并介紹了系統(tǒng)開發(fā)中采用的關(guān)鍵技術(shù),同時(shí)確定了系統(tǒng)所用的框架和數(shù)據(jù)庫。(2)基于對(duì)系統(tǒng)信息需求、功能需求和性能需求三個(gè)方面綜合分析的基礎(chǔ)上,設(shè)計(jì)了景區(qū)管理系統(tǒng)的整體結(jié)構(gòu)、網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)、邏輯結(jié)構(gòu),并給出了系統(tǒng)的技術(shù)路線,然后對(duì)系統(tǒng)具體功能模塊進(jìn)行詳細(xì)設(shè)計(jì),最...
【文章來源】:浙江工業(yè)大學(xué)浙江省
【文章頁數(shù)】:75 頁
【學(xué)位級(jí)別】:碩士
【圖文】:
EventLoop執(zhí)行過程圖
基于VueJS的景區(qū)管理系統(tǒng)設(shè)計(jì)與開發(fā)9用于實(shí)現(xiàn)客戶端與服務(wù)器端的異步通信,實(shí)現(xiàn)頁面的局部刷新,從而快速創(chuàng)建動(dòng)態(tài)網(wǎng)頁[48]。在傳統(tǒng)Web交互中,客戶端向服務(wù)器端發(fā)送一個(gè)HTTP請(qǐng)求后,服務(wù)器端對(duì)請(qǐng)求進(jìn)行處理后向客戶端返回一個(gè)新的HTML網(wǎng)頁,但客戶端在服務(wù)器端處理客戶端的HTTP請(qǐng)求時(shí),只能空閑等待,從而導(dǎo)致客戶端需要重新讀取HTML頁面,浪費(fèi)時(shí)間和資源。Ajax應(yīng)用是客戶端通過XMLHttpRequest對(duì)象向服務(wù)器端發(fā)送HTTP請(qǐng)求,服務(wù)器端返回?cái)?shù)據(jù),通過JavaScript操作DOM對(duì)象,實(shí)現(xiàn)頁面刷新,由于JavaScript可以及時(shí)對(duì)服務(wù)器提出請(qǐng)求與響應(yīng),并且不阻塞用戶,從而節(jié)省時(shí)間提高性能,Ajax工作原理流程圖如圖2-2所示。并且Ajax具有無刷新更新數(shù)據(jù),異步與服務(wù)器通信,前端和后端負(fù)載平衡、基于標(biāo)準(zhǔn)被廣泛支持以及界面與應(yīng)用分離等優(yōu)點(diǎn)[49]。圖22Ajax應(yīng)用模型圖Figure2-2.AjaxwebapplicationmodelDiagram2.1.2VueJS框架VueJS是一款用于構(gòu)建用戶頁面的輕量級(jí)、漸進(jìn)式框架[50],而且也是一款輕量級(jí)的JS庫,API簡(jiǎn)潔,容易上手。與原生JavaScript或者JQuery相比,VueJS只需要關(guān)注圖層數(shù)據(jù),不需要繁雜的DOM操作,并且支持多種第三方庫以及方便于項(xiàng)目整合,從而節(jié)省開發(fā)時(shí)間及成本。同時(shí)VueJS框架具有侵入性低、鼓勵(lì)模塊化、雙向綁定、組件化開發(fā)和豐富指令等特點(diǎn),使復(fù)雜交互邏輯的前端應(yīng)用開發(fā)變得簡(jiǎn)單。
畚?10VueJS的核心思想是數(shù)據(jù)驅(qū)動(dòng)[51],它可以使數(shù)據(jù)與DOM保持同步,避免使用JQuery手動(dòng)操作DOM時(shí)遇到的命令式、重復(fù)的以及易錯(cuò)的代碼等錯(cuò)誤。Vue的核心思路是將data的屬性轉(zhuǎn)化為getter和setter然后和watch綁定,將MVVM作為數(shù)據(jù)綁定的入口,整合Observer,Compile和Watcher三者,通過Observer來監(jiān)聽model的數(shù)據(jù)變化,通過Compile來解析編譯模板指令(vue中用來解析{{}}),利用Watch作為Observer和Compile之間的通信橋梁,實(shí)現(xiàn)數(shù)據(jù)變化視圖更新,視圖交互變化,數(shù)據(jù)model變更的雙向綁定效果,Vue執(zhí)行流程如圖2-3所示。圖2-3Vue執(zhí)行流程圖Figure2-3.VueexecutionflowchartVueJS使用數(shù)據(jù)劫持和訂閱發(fā)布實(shí)現(xiàn)雙向綁定,實(shí)例化Vue對(duì)象時(shí),對(duì)數(shù)據(jù)進(jìn)行屬性遍歷,通過Object.defineProperty()給數(shù)據(jù)對(duì)象添加getter和setter,并對(duì)模板進(jìn)行編譯生成指令對(duì)象,每個(gè)指令對(duì)象綁定一個(gè)Watcher對(duì)象,然后對(duì)數(shù)據(jù)賦值時(shí)會(huì)觸發(fā)setter,此時(shí)會(huì)使得Watcher再次被觸發(fā)進(jìn)行監(jiān)聽,如果數(shù)據(jù)變化,會(huì)通知相應(yīng)的指令,調(diào)用指令的update方法,指令是指DOM封裝,因此會(huì)調(diào)用DOM的原生方法對(duì)DOM進(jìn)行更新,實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)DOM的變化。同時(shí)Vue還會(huì)對(duì)DOM進(jìn)行事件監(jiān)聽,如果DOM發(fā)生變化,Vue監(jiān)聽到后則會(huì)修改相應(yīng)的data。VueJS另一核心是虛擬DOM,可以看作是一個(gè)使用JavaScript模擬DOM結(jié)構(gòu)的樹形結(jié)構(gòu)。在傳統(tǒng)Web應(yīng)用開發(fā)模式中,原生JavaScript或者JQuery操作DOM時(shí),瀏覽器會(huì)從構(gòu)建DOM樹開始從頭到尾執(zhí)行,計(jì)算DOM節(jié)點(diǎn)不僅浪費(fèi)瀏覽器性能,并且頻繁操作還會(huì)出現(xiàn)頁面卡頓,影響用戶體驗(yàn)。虛擬DOM是純粹的JavaScript對(duì)象,具有高效的Diff算法,當(dāng)頁面更新時(shí),先全部反映在JS對(duì)象(虛擬DOM)上,操作內(nèi)存中的JS對(duì)象的速度顯然要更快,等更新完成后,再將最終的JS對(duì)象映射成真實(shí)的DOM
【參考文獻(xiàn)】:
期刊論文
[1]中國旅游發(fā)展筆談——智慧旅游目的地的困境與突破[J]. 楊振之. 旅游學(xué)刊. 2019(08)
[2]基于移動(dòng)互聯(lián)的智慧景區(qū)檢測(cè)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 劉杰,高靜,張姝. 信息與電腦(理論版). 2019(13)
[3]都市森林公園生態(tài)旅游的管理策略——以上海共青森林公園為例[J]. 晏姿. 現(xiàn)代園藝. 2019(13)
[4]北京市旅游產(chǎn)業(yè)創(chuàng)新的現(xiàn)狀與發(fā)展策略[J]. 王義博,鞏麗朵,王緒輝,田嘉美,林茹. 旅游縱覽(下半月). 2019(05)
[5]互聯(lián)網(wǎng)時(shí)代下“智慧景區(qū)”管理系統(tǒng)構(gòu)建與策略探究[J]. 林捷興. 計(jì)算機(jī)產(chǎn)品與流通. 2019(05)
[6]基于人工智能視頻深度處理技術(shù)的景區(qū)智慧化管理探索研究[J]. 王剛,楊晟,戴成華,宋偲皓,薛繼待. 科技通報(bào). 2019(04)
[7]南京智慧景區(qū)的發(fā)展——以牛首山文化旅游區(qū)為例[J]. 任靜. 現(xiàn)代經(jīng)濟(jì)信息. 2019(01)
[8]廬山白鹿洞書院的智慧旅游體系構(gòu)建研究[J]. 劉元明,喬秋敏. 旅游縱覽(下半月). 2018(10)
[9]基于低碳理念的智慧景區(qū)規(guī)劃設(shè)計(jì)研究——以烏村景區(qū)為例[J]. 孔俊婷,楊森. 生態(tài)經(jīng)濟(jì). 2018(09)
[10]風(fēng)景名勝區(qū)總體規(guī)劃實(shí)施評(píng)估研究--以杭州西湖風(fēng)景名勝區(qū)為例[J]. 李寧汀,石春暉,宋峰,王曉輝. 城市發(fā)展研究. 2018(06)
碩士論文
[1]景區(qū)電子票務(wù)智能管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[D]. 歐陽雁.湖南大學(xué) 2017
[2]基于HTML5的高校就業(yè)信息管理系統(tǒng)的研究與開發(fā)[D]. 黃文強(qiáng).南昌航空大學(xué) 2016
[3]基于MVC模式的WEB前端開發(fā)研究與應(yīng)用[D]. 姚騰輝.合肥工業(yè)大學(xué) 2016
[4]基于H.264的視頻壓縮技術(shù)及其在視頻監(jiān)控系統(tǒng)中的應(yīng)用[D]. 徐瑤.安徽大學(xué) 2014
[5]基于Node.js高并發(fā)web系統(tǒng)的研究與應(yīng)用[D]. 陳瑤.電子科技大學(xué) 2014
[6]Spring框架技術(shù)分析及應(yīng)用研究[D]. 翟劍錕.中國科學(xué)院大學(xué)(工程管理與信息技術(shù)學(xué)院) 2013
[7]基于ARM9的嵌入式H.264編碼器的應(yīng)用研究[D]. 李杜.江西理工大學(xué) 2012
[8]基于HTML5和CSS3的網(wǎng)易WAP站觸屏版移動(dòng)產(chǎn)品研究[D]. 丁楠.華中科技大學(xué) 2012
本文編號(hào):3562742
【文章來源】:浙江工業(yè)大學(xué)浙江省
【文章頁數(shù)】:75 頁
【學(xué)位級(jí)別】:碩士
【圖文】:
EventLoop執(zhí)行過程圖
基于VueJS的景區(qū)管理系統(tǒng)設(shè)計(jì)與開發(fā)9用于實(shí)現(xiàn)客戶端與服務(wù)器端的異步通信,實(shí)現(xiàn)頁面的局部刷新,從而快速創(chuàng)建動(dòng)態(tài)網(wǎng)頁[48]。在傳統(tǒng)Web交互中,客戶端向服務(wù)器端發(fā)送一個(gè)HTTP請(qǐng)求后,服務(wù)器端對(duì)請(qǐng)求進(jìn)行處理后向客戶端返回一個(gè)新的HTML網(wǎng)頁,但客戶端在服務(wù)器端處理客戶端的HTTP請(qǐng)求時(shí),只能空閑等待,從而導(dǎo)致客戶端需要重新讀取HTML頁面,浪費(fèi)時(shí)間和資源。Ajax應(yīng)用是客戶端通過XMLHttpRequest對(duì)象向服務(wù)器端發(fā)送HTTP請(qǐng)求,服務(wù)器端返回?cái)?shù)據(jù),通過JavaScript操作DOM對(duì)象,實(shí)現(xiàn)頁面刷新,由于JavaScript可以及時(shí)對(duì)服務(wù)器提出請(qǐng)求與響應(yīng),并且不阻塞用戶,從而節(jié)省時(shí)間提高性能,Ajax工作原理流程圖如圖2-2所示。并且Ajax具有無刷新更新數(shù)據(jù),異步與服務(wù)器通信,前端和后端負(fù)載平衡、基于標(biāo)準(zhǔn)被廣泛支持以及界面與應(yīng)用分離等優(yōu)點(diǎn)[49]。圖22Ajax應(yīng)用模型圖Figure2-2.AjaxwebapplicationmodelDiagram2.1.2VueJS框架VueJS是一款用于構(gòu)建用戶頁面的輕量級(jí)、漸進(jìn)式框架[50],而且也是一款輕量級(jí)的JS庫,API簡(jiǎn)潔,容易上手。與原生JavaScript或者JQuery相比,VueJS只需要關(guān)注圖層數(shù)據(jù),不需要繁雜的DOM操作,并且支持多種第三方庫以及方便于項(xiàng)目整合,從而節(jié)省開發(fā)時(shí)間及成本。同時(shí)VueJS框架具有侵入性低、鼓勵(lì)模塊化、雙向綁定、組件化開發(fā)和豐富指令等特點(diǎn),使復(fù)雜交互邏輯的前端應(yīng)用開發(fā)變得簡(jiǎn)單。
畚?10VueJS的核心思想是數(shù)據(jù)驅(qū)動(dòng)[51],它可以使數(shù)據(jù)與DOM保持同步,避免使用JQuery手動(dòng)操作DOM時(shí)遇到的命令式、重復(fù)的以及易錯(cuò)的代碼等錯(cuò)誤。Vue的核心思路是將data的屬性轉(zhuǎn)化為getter和setter然后和watch綁定,將MVVM作為數(shù)據(jù)綁定的入口,整合Observer,Compile和Watcher三者,通過Observer來監(jiān)聽model的數(shù)據(jù)變化,通過Compile來解析編譯模板指令(vue中用來解析{{}}),利用Watch作為Observer和Compile之間的通信橋梁,實(shí)現(xiàn)數(shù)據(jù)變化視圖更新,視圖交互變化,數(shù)據(jù)model變更的雙向綁定效果,Vue執(zhí)行流程如圖2-3所示。圖2-3Vue執(zhí)行流程圖Figure2-3.VueexecutionflowchartVueJS使用數(shù)據(jù)劫持和訂閱發(fā)布實(shí)現(xiàn)雙向綁定,實(shí)例化Vue對(duì)象時(shí),對(duì)數(shù)據(jù)進(jìn)行屬性遍歷,通過Object.defineProperty()給數(shù)據(jù)對(duì)象添加getter和setter,并對(duì)模板進(jìn)行編譯生成指令對(duì)象,每個(gè)指令對(duì)象綁定一個(gè)Watcher對(duì)象,然后對(duì)數(shù)據(jù)賦值時(shí)會(huì)觸發(fā)setter,此時(shí)會(huì)使得Watcher再次被觸發(fā)進(jìn)行監(jiān)聽,如果數(shù)據(jù)變化,會(huì)通知相應(yīng)的指令,調(diào)用指令的update方法,指令是指DOM封裝,因此會(huì)調(diào)用DOM的原生方法對(duì)DOM進(jìn)行更新,實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)DOM的變化。同時(shí)Vue還會(huì)對(duì)DOM進(jìn)行事件監(jiān)聽,如果DOM發(fā)生變化,Vue監(jiān)聽到后則會(huì)修改相應(yīng)的data。VueJS另一核心是虛擬DOM,可以看作是一個(gè)使用JavaScript模擬DOM結(jié)構(gòu)的樹形結(jié)構(gòu)。在傳統(tǒng)Web應(yīng)用開發(fā)模式中,原生JavaScript或者JQuery操作DOM時(shí),瀏覽器會(huì)從構(gòu)建DOM樹開始從頭到尾執(zhí)行,計(jì)算DOM節(jié)點(diǎn)不僅浪費(fèi)瀏覽器性能,并且頻繁操作還會(huì)出現(xiàn)頁面卡頓,影響用戶體驗(yàn)。虛擬DOM是純粹的JavaScript對(duì)象,具有高效的Diff算法,當(dāng)頁面更新時(shí),先全部反映在JS對(duì)象(虛擬DOM)上,操作內(nèi)存中的JS對(duì)象的速度顯然要更快,等更新完成后,再將最終的JS對(duì)象映射成真實(shí)的DOM
【參考文獻(xiàn)】:
期刊論文
[1]中國旅游發(fā)展筆談——智慧旅游目的地的困境與突破[J]. 楊振之. 旅游學(xué)刊. 2019(08)
[2]基于移動(dòng)互聯(lián)的智慧景區(qū)檢測(cè)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 劉杰,高靜,張姝. 信息與電腦(理論版). 2019(13)
[3]都市森林公園生態(tài)旅游的管理策略——以上海共青森林公園為例[J]. 晏姿. 現(xiàn)代園藝. 2019(13)
[4]北京市旅游產(chǎn)業(yè)創(chuàng)新的現(xiàn)狀與發(fā)展策略[J]. 王義博,鞏麗朵,王緒輝,田嘉美,林茹. 旅游縱覽(下半月). 2019(05)
[5]互聯(lián)網(wǎng)時(shí)代下“智慧景區(qū)”管理系統(tǒng)構(gòu)建與策略探究[J]. 林捷興. 計(jì)算機(jī)產(chǎn)品與流通. 2019(05)
[6]基于人工智能視頻深度處理技術(shù)的景區(qū)智慧化管理探索研究[J]. 王剛,楊晟,戴成華,宋偲皓,薛繼待. 科技通報(bào). 2019(04)
[7]南京智慧景區(qū)的發(fā)展——以牛首山文化旅游區(qū)為例[J]. 任靜. 現(xiàn)代經(jīng)濟(jì)信息. 2019(01)
[8]廬山白鹿洞書院的智慧旅游體系構(gòu)建研究[J]. 劉元明,喬秋敏. 旅游縱覽(下半月). 2018(10)
[9]基于低碳理念的智慧景區(qū)規(guī)劃設(shè)計(jì)研究——以烏村景區(qū)為例[J]. 孔俊婷,楊森. 生態(tài)經(jīng)濟(jì). 2018(09)
[10]風(fēng)景名勝區(qū)總體規(guī)劃實(shí)施評(píng)估研究--以杭州西湖風(fēng)景名勝區(qū)為例[J]. 李寧汀,石春暉,宋峰,王曉輝. 城市發(fā)展研究. 2018(06)
碩士論文
[1]景區(qū)電子票務(wù)智能管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[D]. 歐陽雁.湖南大學(xué) 2017
[2]基于HTML5的高校就業(yè)信息管理系統(tǒng)的研究與開發(fā)[D]. 黃文強(qiáng).南昌航空大學(xué) 2016
[3]基于MVC模式的WEB前端開發(fā)研究與應(yīng)用[D]. 姚騰輝.合肥工業(yè)大學(xué) 2016
[4]基于H.264的視頻壓縮技術(shù)及其在視頻監(jiān)控系統(tǒng)中的應(yīng)用[D]. 徐瑤.安徽大學(xué) 2014
[5]基于Node.js高并發(fā)web系統(tǒng)的研究與應(yīng)用[D]. 陳瑤.電子科技大學(xué) 2014
[6]Spring框架技術(shù)分析及應(yīng)用研究[D]. 翟劍錕.中國科學(xué)院大學(xué)(工程管理與信息技術(shù)學(xué)院) 2013
[7]基于ARM9的嵌入式H.264編碼器的應(yīng)用研究[D]. 李杜.江西理工大學(xué) 2012
[8]基于HTML5和CSS3的網(wǎng)易WAP站觸屏版移動(dòng)產(chǎn)品研究[D]. 丁楠.華中科技大學(xué) 2012
本文編號(hào):3562742
本文鏈接:http://sikaile.net/kejilunwen/ruanjiangongchenglunwen/3562742.html
最近更新
教材專著