鄭麗萍

摘要：“游淮安”App是結(jié)合了MUI的布局方式，利用Vue.js框架的編寫方法與技巧，實(shí)現(xiàn)了系統(tǒng)的各項(xiàng)功能，宣傳我國(guó)的紅色教育、大好河山和歷史文化。充分考慮其穩(wěn)定、可靠、便攜性等方面的要求，系統(tǒng)采用前端主流技術(shù)實(shí)現(xiàn)了遠(yuǎn)程數(shù)據(jù)的訪問。“游淮安”App可以作為前端開發(fā)類課程的綜合實(shí)訓(xùn)項(xiàng)目，既體現(xiàn)思政教育又能培養(yǎng)學(xué)生的前端開發(fā)能力。

關(guān)鍵詞：思政;JavaScript;MUI;Vue.js

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）21-0091-02

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

1 背景

淮安歷史文化底蘊(yùn)深厚，是淮揚(yáng)菜的發(fā)源地，紅色旅游景區(qū)豐富且經(jīng)典，如：周恩來(lái)紀(jì)念館及故里景區(qū)、劉老莊八十二烈士陵園、黃花塘新四軍軍部紀(jì)念館、蘇皖邊區(qū)政府舊址紀(jì)念館等。淮安五湖鑲嵌、四水穿城，金湖水上森林公園等多處的生態(tài)旅游景區(qū)為游客提供享受并了解自然?；窗裁溯叧?，有西漢軍事家韓信，漢賦的開創(chuàng)者之一枚乘，南宋著名抗金女將梁紅玉，南宋畫家、詩(shī)人龔開，中國(guó)古典四大名著之一《西游記》的作者吳承恩，清朝虎門銷煙的愛國(guó)名將、民族英雄關(guān)天培，清末四大譴責(zé)小說《老殘游記》的作者劉鶚，中華人民共和國(guó)開國(guó)總理周恩來(lái)、中國(guó)第五位女性外交部發(fā)言人華春瑩等等。

為了更好地推廣淮安的特色風(fēng)景，特色菜，特色文化，名人名士，我們著手研究休閑經(jīng)濟(jì)時(shí)代下淮安特色休閑旅游產(chǎn)品開發(fā)，開發(fā)“游淮安”App，搭建旅游信息服務(wù)平臺(tái)[1]，促進(jìn)信息共享，提供旅游賓館及飯店、交通運(yùn)輸、餐飲娛樂、旅游購(gòu)物、社會(huì)服務(wù)等信息，構(gòu)建無(wú)障礙旅游環(huán)境。推出若干精品旅游線路，主推紅色旅游。該項(xiàng)目可以作為Web前端移動(dòng)開發(fā)實(shí)訓(xùn)項(xiàng)目，培養(yǎng)學(xué)生愛國(guó)情懷，鍛煉學(xué)生綜合開發(fā)能力。

為了更好地推廣淮安的特色風(fēng)景、特色菜、特色文化，我們著手研究休閑經(jīng)濟(jì)時(shí)代下淮安特色休閑旅游產(chǎn)品開發(fā)，開發(fā)“游淮安”App，滿足游客和市場(chǎng)對(duì)信息化的需求。提供旅游賓館及飯店、交通運(yùn)輸、餐飲娛樂、旅游購(gòu)物、社會(huì)服務(wù)等信息，以游客的安全和便利為目標(biāo)，構(gòu)建無(wú)障礙旅游環(huán)境。

2 系統(tǒng)軟件的開發(fā)語(yǔ)言

本系統(tǒng)采用HBuilder開發(fā)平臺(tái)，使用HTML語(yǔ)言、CSS樣式、JavaScript語(yǔ)言、PHP語(yǔ)言等設(shè)計(jì)一套有效的平臺(tái)，減輕管理員的工作負(fù)擔(dān)。

HTML（全稱是HyperText Markup Language超文本標(biāo)記語(yǔ)言）描述了網(wǎng)頁(yè)的內(nèi)容，即頁(yè)面結(jié)構(gòu)，HTML 5是最新的HTML版本;CSS（Cascading Style Sheet層疊樣式表）描述了網(wǎng)頁(yè)布局的樣式，定義了其中元素的顯示方式。CSS 3是最新的CSS標(biāo)準(zhǔn);JavaScript控制網(wǎng)頁(yè)的行為，即通過JavaScript改變網(wǎng)頁(yè)的內(nèi)容和樣式，實(shí)際上就是通過調(diào)用JavaScript函數(shù)改變文檔中各個(gè)元素對(duì)象的屬性值，或使用文檔對(duì)象的方法，響應(yīng)用戶的操作。JavaScript（簡(jiǎn)稱“JS”） 是一種基于對(duì)象的，解釋型的編程語(yǔ)言。JavaScript已經(jīng)廣泛的用語(yǔ)Web應(yīng)用開發(fā)中，可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì)表單輸入的數(shù)據(jù)進(jìn)行驗(yàn)證，對(duì)瀏覽器事件做出響應(yīng)，讀寫HTML元素，動(dòng)態(tài)改變?cè)貥邮降?，?shí)現(xiàn)如執(zhí)行計(jì)算、檢查表單、編寫游戲、添加特殊效果等，所有這些功能都有助于增強(qiáng)頁(yè)面的動(dòng)態(tài)效果和交互性，為用戶提供更流暢美觀的瀏覽效果，隨著移動(dòng)應(yīng)用的興起，JavaScript在移動(dòng)端的應(yīng)用也越來(lái)越流行，JavaScript實(shí)現(xiàn)了基于HTML5的移動(dòng)應(yīng)用交互邏輯，JavaScript已成為手機(jī)App[2-4]開發(fā)風(fēng)潮的關(guān)鍵。JavaScript不但能處理跨瀏覽器兼容問題，而且非常容易完成混合開發(fā)的移動(dòng)應(yīng)用。系統(tǒng)使用MUI框架開發(fā)前端頁(yè)面，MUI框架就是基于HTML、CSS、JavaScript的。

3 MUI前端框架

“游淮安”App采用MUI移動(dòng)框架實(shí)現(xiàn)系統(tǒng)頁(yè)面的整體布局，MUI移動(dòng)端框架是最接近原生App體驗(yàn)的高性能前端框架，由DCloud公司研發(fā)而成，提供大量HTML5和JavaScript語(yǔ)言組成的組件。HBuilder內(nèi)置HTML5+ App開發(fā)環(huán)境，通過HBuilder，可以快速搭建基于MUI的項(xiàng)目和開發(fā)WebApp頁(yè)面。MUI框架體量小加載快，頁(yè)面繪出快，預(yù)加載，轉(zhuǎn)場(chǎng)快，窗口立即轉(zhuǎn)過來(lái)，下拉刷新，區(qū)域滾動(dòng)，貼近原生，告別元素抖動(dòng)，MUI框架提供了足夠多的控件，JavaScript API 和上百種的樣式，HBuilder出廠設(shè)置的時(shí)候就將MUI框架進(jìn)行了內(nèi)置，提供一套完整的移動(dòng)應(yīng)用開發(fā)解決方案，可以進(jìn)行HTML 5、CSS 3、JavaScript及相關(guān)框架的快捷操作，邊看邊改，也可以用模擬器調(diào)試和真機(jī)同步聯(lián)調(diào)。MUI的使用方式非常簡(jiǎn)便，在常規(guī)的移動(dòng)端頁(yè)面架構(gòu)中，只需要引入MUI框架中相應(yīng)的封裝好的樣式文件CSS和功能JS文件，既可以使用MUI框架的頁(yè)面樣式布局和邏輯操作，還可以根據(jù)需求使用JavaScript實(shí)現(xiàn)更多的邏輯功能。比如給景區(qū)列表項(xiàng)綁定事件，可以使用.on（）方法實(shí)現(xiàn)批量元素的事件綁定，單擊景區(qū)列表，獲取當(dāng)前列表項(xiàng)的id，并將該id傳給景區(qū)詳情頁(yè)面，然后打開景區(qū)詳情頁(yè)面。

4 Vue.js實(shí)現(xiàn)系統(tǒng)軟件的數(shù)據(jù)顯示

4.1 Vue.js

Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM（全稱是Model-ViewModel-View）的漸進(jìn)式框架[5]。Model對(duì)應(yīng)的是數(shù)據(jù)，JavaScript對(duì)象;View對(duì)應(yīng)的是視圖，也就是DOM;ViewModel是連接View和Model的中間件，在MVVM下，View和Model是不能直接通訊的，當(dāng)數(shù)據(jù)變化或者用戶操作視圖，ViewModel都能監(jiān)聽到變化，實(shí)現(xiàn)了雙向綁定。一旦創(chuàng)建了綁定，DOM將與數(shù)據(jù)保持同步。每當(dāng)修改了數(shù)據(jù)，DOM便相應(yīng)地更新，這樣的代碼更容易編寫、理解與維護(hù)。由于Vue.js采取DOM與數(shù)據(jù)綁定的方法，且這種綁定為雙向綁定，使得數(shù)據(jù)與DOM同步更新。不同于原先的jQuery，需先遍歷DOM。這提高了網(wǎng)頁(yè)的響應(yīng)速度，得到了較好的網(wǎng)頁(yè)瀏覽體驗(yàn)。