張文孝 白俊鴿* 四川大學錦城學院 計算機與軟件學院
近年來隨著手機行業(yè)的迅速發(fā)展,手機變得越來越智能化。日常生活中,人們也愈加依賴手機,這都歸功于手機便攜和易操作的特點。通過移動設備不僅可以進行娛樂也可以辦理一些簡單的服務。作為交通運輸服務業(yè)的汽車租賃業(yè)正慢慢收到企業(yè)和個人的青睞,因為通過汽車租賃,個人或者企業(yè)就可以享受到和擁有個人車輛或者公司車輛一樣的便捷。而相較于買車,租車又有不用辦理保險、無需年檢維修、可隨意更換車輛等優(yōu)點。
在選擇使用何種移動開發(fā)技術時,首先考慮的是原生APP開發(fā)?;贜ative APP框架,不同手機操作系統(tǒng)采用不同語言和框架進行開發(fā),由云服務器數(shù)據(jù)和APP 客戶端構成,可有最佳用戶體驗,可節(jié)省帶寬成本,訪問本地資源,但需不同平臺分別開發(fā)且周期時間。但是目前手機系統(tǒng)主要分為安卓和ios兩大陣營,如果使用原生APP開發(fā)就需要使用不同的編程語言進行開發(fā),以滿足安卓和ios用戶。因此使用原生APP開發(fā)的成本較高,而且后期的維護成本也較高。
另一種選擇是基于 HTML5 的跨平臺移動開發(fā)技術。其中的MUI框架直接采用原生JS編寫,性能高于大多數(shù)框架。MUI框架還有一個最大的優(yōu)勢就是跨平臺,不需要像原生APP開發(fā)那樣對于不同的操作系統(tǒng)需要使用不同的編程語言??缙脚_開發(fā)技術簡單說就是能夠讓一種程序代碼在不同移動終端上應用,可以大大降低開發(fā)技術損耗的精力和時間。
由于是移動端的應用,面向的是需要租賃汽車的用戶,因此移動端應用本身不需要涉及到后臺的數(shù)據(jù)操作等管理員需要的功能。對于實際的用戶需求可以設計出三部分主要的功能,包括登錄注冊功能、車輛信息展示功能和數(shù)據(jù)統(tǒng)計功能。
用戶可以通過登錄賬號查看個人信息,包括當前正在租用的汽車信息和計時計費信息。考慮到租賃汽車手續(xù)比較繁雜,因此沒有設計直接在移動應用上租賃汽車的功能。車輛展示功能主要展示當前可租用車輛的車輛信息,方便用戶考慮租用哪種車輛。數(shù)據(jù)統(tǒng)計功能可以展示當前總的汽車租賃情況,可直觀地看到哪種車輛最受用戶喜愛,也能給用戶選擇車輛時作參考。
應用的首頁主要展示的是當前可以租賃的汽車的信息,包括價格、車輛編號、車輛類型信息。
頁面頂端顯示該頁標題,在標題下方使用的是區(qū)域滾動組件中的橫向滾動,將汽車根據(jù)汽車的類型進行分類顯示。中間部分為內(nèi)容顯示部分,這一部分展示車輛的價格及編號等信息,用戶可以通過點擊上方按鈕選擇不同的車輛類型,內(nèi)容部分就會顯示對應類型的車輛信息。最后,頁面底部為導航欄,通過點擊可跳轉至其他兩個頁面。
數(shù)據(jù)統(tǒng)計頁面主要展示近期車輛的租賃情況以及車輛性能比較,為用戶在選擇車輛時作參考。通過引入Echarts圖表可以將數(shù)據(jù)可視化,讓數(shù)據(jù)直觀地展示給用戶。Echarts提供了豐富的API接口以及文檔, 通過合理設置并結合后臺傳送的json數(shù)據(jù), 即可展示所需的數(shù)據(jù)主題。
個人頁面可以展示當前用戶的用戶名、正在租用的車輛信息以及該車輛的計時和累計費用等信息。此外為了能方便用戶切換賬號和新用戶注冊,設計了登錄、注冊和注銷功能。
第一部分顯示用戶的基本信息,包括用戶名和用戶ID,第二部分展示租車信息和計時信息,右上角的菜單包含了登錄和注冊兩個子頁面以及注銷功能。
在用戶未登錄時,將不顯示個人信息。登錄成功后從登錄頁面跳轉至個人頁面,此時將顯示正在租用車輛的信息,包括車輛類型和開始租用該車的時間,以及顯示該車的租用時長和累計的費用。
在首頁的車輛信息展示界面將汽車分為了五類,這里僅以“A類車”為例。因為汽車的信息是從后臺獲取的,所以需要首先需要實現(xiàn)與后臺之間的發(fā)送和接受數(shù)據(jù),然后將接收到的數(shù)據(jù)用卡片視圖的形式展現(xiàn)出來。
首先定義了一個findAllCars的函數(shù),將前臺與后臺的交互和信息顯示這兩個功能在該函數(shù)中實現(xiàn)。
首先是前臺與后臺交互這個功能,想要獲取后臺數(shù)據(jù)首先需要向后臺發(fā)送數(shù)據(jù)。這里使用了JSON數(shù)據(jù)格式,首先定義了一個strTemp的對象,然后將" find_AllCars"這個字符串賦值給對象中的reqKey這個變量。" find_AllCars"字符串與數(shù)據(jù)庫中的find_AllCars這個存儲過程相對應,告訴后臺要執(zhí)行查找所有車輛信息這個操作。最后將strTemp這個對象轉換成JSON字符串,把這個JSON字符串作為sendToServer函數(shù)的第一個參數(shù)發(fā)送給后臺。
sendToServer函數(shù)就承擔了數(shù)據(jù)的發(fā)送和接收的工作。在該函數(shù)中,變量url的值是一個字符串,這個字符串表示Apache Web服務器的doserver.php這個文件的地址。接下來就是使用ajax發(fā)送請求和服務器響應成功后執(zhí)行funcName(jsonVar)函數(shù)。
代碼示例:
function sendToServer(tStr,funcName)
信息展示這個功能是在成功接收到后臺數(shù)據(jù)后執(zhí)行的,因此可以將實現(xiàn)這一部分的代碼寫在sendToServer函數(shù)的第二個參數(shù)的function(data)函數(shù)中。函數(shù)function(data)將從后臺接收來的數(shù)據(jù)通過解析提取有用的數(shù)據(jù),后臺返回的數(shù)據(jù)是一個對象,我們只需要對象中data這個二維數(shù)組的數(shù)據(jù)。最后通過判斷語句篩選出“A類車”的數(shù)據(jù),在繪制div盒子時將對應的數(shù)據(jù)添加進去就實現(xiàn)了車輛信息的動態(tài)顯示。其他頁面的不同類型車輛信息的展示原理是類似的,只需要將function(data)函數(shù)中判斷語句的條件進行修改即可。
以柱狀圖為例,和獲取車輛信息的方法類似,首先定義了一個findAllRecord函數(shù)用于獲取汽車租賃記錄。在函數(shù)中定義一個strTemp的對象,對象中有一個叫reqKey的變量,給其賦值為"find_AllRecord",對應于數(shù)據(jù)庫中查找所有汽車租賃記錄的存儲過程。同樣地,將這個對象轉換成JSON字符串,作為sendToServer函數(shù)的第一個參數(shù)。而sendToServer函數(shù)的第二個參數(shù)是個函數(shù),在該函數(shù)體中,將從后臺接收來的數(shù)據(jù)中表示車輛類型的字符串與事先定義好的type對象數(shù)組的name成員進行對比,如果一樣則將對象中的sum成員加一,以此來計算不同類型車輛的數(shù)目。然后將統(tǒng)計好的車輛數(shù)目的數(shù)據(jù)存在localStorage緩存中,方便接下來使用。
接下來是實現(xiàn)柱狀圖數(shù)據(jù)的顯示,通過getItem函數(shù)將緩存中的數(shù)據(jù)取出來放在一個數(shù)組中,然后將這個數(shù)組中的成員依次放入echarts代碼的data中就可以將數(shù)據(jù)顯示出來了。當然為了能方便刷新數(shù)據(jù),可以添加一個下拉刷新函數(shù),然后把findAllRecord這個函數(shù)放入下拉刷新函數(shù),就可以在下拉釋放后調用此函數(shù)再次查詢后臺數(shù)據(jù)以實現(xiàn)數(shù)據(jù)的刷新了。
注冊功能主要分為兩個步驟,首先獲取用戶在表單中輸入的數(shù)據(jù),然后將獲取的數(shù)據(jù)發(fā)送給后臺執(zhí)行注冊操作。在這里還是要用到strTemp這個對象,不過與上述兩個頁面不同的是,在strTemp中需要添加一個input成員,input中包含了用戶在表單中輸入的數(shù)據(jù)。給reqKey賦值為Insert_Users,告訴服務器要注冊新的用戶。
將strTemp對象轉換成JSON字符串后,同樣地調用sendToServer函數(shù),不過需要對function(data)函數(shù)進行修改。為了能夠將數(shù)據(jù)傳到另一個頁面,方便在另一個頁面使用,需要將這些數(shù)據(jù)存入緩存。在注冊成功后再跳轉到個人頁面。
登錄功能的實現(xiàn)和注冊功能類似,這里就不再論述了。個人頁面主要是個人信息的展示,因此也需要使用sendToServer函數(shù)通過后臺查詢用戶的信息。在這之前需要先判斷用戶是否登錄,判斷用戶是否登錄只需要從緩存中查找userName的值是否為空就行了,因為在注冊和登錄成功后就已經(jīng)將相關數(shù)據(jù)存入到緩存中了。這時如果緩存中userName的值為空,表示用戶未登錄或已經(jīng)注銷,則不再顯示用戶信息;如果不為空,則需要調用相關函數(shù)查詢用戶信息并顯示。
因為要顯示租車信息和計時信息,所以在實現(xiàn)這個功能的函數(shù)中要調用兩次sendToServer函數(shù),且函數(shù)需要使用不同的參數(shù)。先定義兩個對象strTemp1和strTemp2,分別作為兩次調用sendToServer函數(shù)時的第一個參數(shù),告訴服務器要執(zhí)行的操作。
對象strTemp1是為了通過緩存中的userIDCard也就是用戶的id查找該用戶在租車輛的租用信息,對象strTemp2是用于查找對應車輛,找到其租賃價格。這兩個對象對應數(shù)據(jù)庫中對兩個表的操作。
第一次調用sendToServer函數(shù)時,將str1作為第一個參數(shù),第二個參數(shù)依然是function(data)函數(shù),該函數(shù)先將后臺服務器傳回來的數(shù)據(jù)存入緩存中,再通過innerHTML方法將數(shù)據(jù)顯示在界面上,進而實現(xiàn)租車信息的顯示。
第二次調用sendToServer函數(shù)時,將str2作為第一個參數(shù),第二個參數(shù)是function(data)函數(shù),函數(shù)中將獲取到的對應汽車價格存入緩存,然后通過把當前時間與租車時間作差,求出到現(xiàn)在為止租用的時長,再與汽車價格相乘求出累計費用。結束語
本文介紹了如何使用MUI框架開發(fā)移動應用,使用MUI框架開發(fā)移動應用具有跨平臺、開發(fā)成本低等特點,且代碼簡單易懂,應用界面簡潔統(tǒng)一。相較于原生APP開發(fā),雖然使用MUI框架開發(fā)APP還有很多不足的地方,但是其學習成本較低,適合于移動應用開發(fā)的初學者。