“游淮安”App的設計與實現

鄭麗萍

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

關鍵詞：思政;JavaScript;MUI;Vue.js

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）21-0091-02

開放科學（資源服務）標識碼（OSID）：

1 背景

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

為了更好地推廣淮安的特色風景，特色菜，特色文化，名人名士，我們著手研究休閑經濟時代下淮安特色休閑旅游產品開發，開發“游淮安”App，搭建旅游信息服務平臺[1]，促進信息共享，提供旅游賓館及飯店、交通運輸、餐飲娛樂、旅游購物、社會服務等信息，構建無障礙旅游環境。推出若干精品旅游線路，主推紅色旅游。該項目可以作為Web前端移動開發實訓項目，培養學生愛國情懷，鍛煉學生綜合開發能力。

為了更好地推廣淮安的特色風景、特色菜、特色文化，我們著手研究休閑經濟時代下淮安特色休閑旅游產品開發，開發“游淮安”App，滿足游客和市場對信息化的需求。提供旅游賓館及飯店、交通運輸、餐飲娛樂、旅游購物、社會服務等信息，以游客的安全和便利為目標，構建無障礙旅游環境。

2 系統軟件的開發語言

本系統采用HBuilder開發平臺，使用HTML語言、CSS樣式、JavaScript語言、PHP語言等設計一套有效的平臺，減輕管理員的工作負擔。

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

3 MUI前端框架

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

4 Vue.js實現系統軟件的數據顯示

4.1 Vue.js

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