基于MUI的汽車租賃系統(tǒng)移動(dòng)應(yīng)用的設(shè)計(jì)與實(shí)現(xiàn)

張文孝 白俊鴿* 四川大學(xué)錦城學(xué)院 計(jì)算機(jī)與軟件學(xué)院

1 引言

近年來隨著手機(jī)行業(yè)的迅速發(fā)展，手機(jī)變得越來越智能化。日常生活中，人們也愈加依賴手機(jī)，這都?xì)w功于手機(jī)便攜和易操作的特點(diǎn)。通過移動(dòng)設(shè)備不僅可以進(jìn)行娛樂也可以辦理一些簡(jiǎn)單的服務(wù)。作為交通運(yùn)輸服務(wù)業(yè)的汽車租賃業(yè)正慢慢收到企業(yè)和個(gè)人的青睞，因?yàn)橥ㄟ^汽車租賃，個(gè)人或者企業(yè)就可以享受到和擁有個(gè)人車輛或者公司車輛一樣的便捷。而相較于買車，租車又有不用辦理保險(xiǎn)、無需年檢維修、可隨意更換車輛等優(yōu)點(diǎn)。

2 移動(dòng)開發(fā)技術(shù)的選擇

在選擇使用何種移動(dòng)開發(fā)技術(shù)時(shí)，首先考慮的是原生APP開發(fā)。基于Native APP框架，不同手機(jī)操作系統(tǒng)采用不同語(yǔ)言和框架進(jìn)行開發(fā)，由云服務(wù)器數(shù)據(jù)和APP 客戶端構(gòu)成，可有最佳用戶體驗(yàn)，可節(jié)省帶寬成本，訪問本地資源，但需不同平臺(tái)分別開發(fā)且周期時(shí)間。但是目前手機(jī)系統(tǒng)主要分為安卓和ios兩大陣營(yíng)，如果使用原生APP開發(fā)就需要使用不同的編程語(yǔ)言進(jìn)行開發(fā)，以滿足安卓和ios用戶。因此使用原生APP開發(fā)的成本較高，而且后期的維護(hù)成本也較高。

另一種選擇是基于 HTML5 的跨平臺(tái)移動(dòng)開發(fā)技術(shù)。其中的MUI框架直接采用原生JS編寫，性能高于大多數(shù)框架。MUI框架還有一個(gè)最大的優(yōu)勢(shì)就是跨平臺(tái)，不需要像原生APP開發(fā)那樣對(duì)于不同的操作系統(tǒng)需要使用不同的編程語(yǔ)言。跨平臺(tái)開發(fā)技術(shù)簡(jiǎn)單說就是能夠讓一種程序代碼在不同移動(dòng)終端上應(yīng)用，可以大大降低開發(fā)技術(shù)損耗的精力和時(shí)間。

3 主要功能描述

由于是移動(dòng)端的應(yīng)用，面向的是需要租賃汽車的用戶，因此移動(dòng)端應(yīng)用本身不需要涉及到后臺(tái)的數(shù)據(jù)操作等管理員需要的功能。對(duì)于實(shí)際的用戶需求可以設(shè)計(jì)出三部分主要的功能，包括登錄注冊(cè)功能、車輛信息展示功能和數(shù)據(jù)統(tǒng)計(jì)功能。

用戶可以通過登錄賬號(hào)查看個(gè)人信息，包括當(dāng)前正在租用的汽車信息和計(jì)時(shí)計(jì)費(fèi)信息。考慮到租賃汽車手續(xù)比較繁雜，因此沒有設(shè)計(jì)直接在移動(dòng)應(yīng)用上租賃汽車的功能。車輛展示功能主要展示當(dāng)前可租用車輛的車輛信息，方便用戶考慮租用哪種車輛。數(shù)據(jù)統(tǒng)計(jì)功能可以展示當(dāng)前總的汽車租賃情況，可直觀地看到哪種車輛最受用戶喜愛，也能給用戶選擇車輛時(shí)作參考。

4 界面設(shè)計(jì)

4.1 應(yīng)用首頁(yè)

應(yīng)用的首頁(yè)主要展示的是當(dāng)前可以租賃的汽車的信息，包括價(jià)格、車輛編號(hào)、車輛類型信息。

頁(yè)面頂端顯示該頁(yè)標(biāo)題，在標(biāo)題下方使用的是區(qū)域滾動(dòng)組件中的橫向滾動(dòng)，將汽車根據(jù)汽車的類型進(jìn)行分類顯示。中間部分為內(nèi)容顯示部分，這一部分展示車輛的價(jià)格及編號(hào)等信息，用戶可以通過點(diǎn)擊上方按鈕選擇不同的車輛類型，內(nèi)容部分就會(huì)顯示對(duì)應(yīng)類型的車輛信息。最后，頁(yè)面底部為導(dǎo)航欄，通過點(diǎn)擊可跳轉(zhuǎn)至其他兩個(gè)頁(yè)面。

4.2 數(shù)據(jù)統(tǒng)計(jì)頁(yè)面

數(shù)據(jù)統(tǒng)計(jì)頁(yè)面主要展示近期車輛的租賃情況以及車輛性能比較，為用戶在選擇車輛時(shí)作參考。通過引入Echarts圖表可以將數(shù)據(jù)可視化，讓數(shù)據(jù)直觀地展示給用戶。Echarts提供了豐富的API接口以及文檔, 通過合理設(shè)置并結(jié)合后臺(tái)傳送的json數(shù)據(jù), 即可展示所需的數(shù)據(jù)主題。

4.3 個(gè)人頁(yè)面

個(gè)人頁(yè)面可以展示當(dāng)前用戶的用戶名、正在租用的車輛信息以及該車輛的計(jì)時(shí)和累計(jì)費(fèi)用等信息。此外為了能方便用戶切換賬號(hào)和新用戶注冊(cè)，設(shè)計(jì)了登錄、注冊(cè)和注銷功能。

第一部分顯示用戶的基本信息，包括用戶名和用戶ID，第二部分展示租車信息和計(jì)時(shí)信息，右上角的菜單包含了登錄和注冊(cè)兩個(gè)子頁(yè)面以及注銷功能。

在用戶未登錄時(shí)，將不顯示個(gè)人信息。登錄成功后從登錄頁(yè)面跳轉(zhuǎn)至個(gè)人頁(yè)面，此時(shí)將顯示正在租用車輛的信息，包括車輛類型和開始租用該車的時(shí)間，以及顯示該車的租用時(shí)長(zhǎng)和累計(jì)的費(fèi)用。

5 功能實(shí)現(xiàn)

5.1 應(yīng)用首頁(yè)

在首頁(yè)的車輛信息展示界面將汽車分為了五類，這里僅以“A類車”為例。因?yàn)槠嚨男畔⑹菑暮笈_(tái)獲取的，所以需要首先需要實(shí)現(xiàn)與后臺(tái)之間的發(fā)送和接受數(shù)據(jù)，然后將接收到的數(shù)據(jù)用卡片視圖的形式展現(xiàn)出來。

首先定義了一個(gè)findAllCars的函數(shù)，將前臺(tái)與后臺(tái)的交互和信息顯示這兩個(gè)功能在該函數(shù)中實(shí)現(xiàn)。

首先是前臺(tái)與后臺(tái)交互這個(gè)功能，想要獲取后臺(tái)數(shù)據(jù)首先需要向后臺(tái)發(fā)送數(shù)據(jù)。這里使用了JSON數(shù)據(jù)格式，首先定義了一個(gè)strTemp的對(duì)象，然后將" find_AllCars"這個(gè)字符串賦值給對(duì)象中的reqKey這個(gè)變量。" find_AllCars"字符串與數(shù)據(jù)庫(kù)中的find_AllCars這個(gè)存儲(chǔ)過程相對(duì)應(yīng)，告訴后臺(tái)要執(zhí)行查找所有車輛信息這個(gè)操作。最后將strTemp這個(gè)對(duì)象轉(zhuǎn)換成JSON字符串，把這個(gè)JSON字符串作為sendToServer函數(shù)的第一個(gè)參數(shù)發(fā)送給后臺(tái)。

sendToServer函數(shù)就承擔(dān)了數(shù)據(jù)的發(fā)送和接收的工作。在該函數(shù)中，變量url的值是一個(gè)字符串，這個(gè)字符串表示Apache Web服務(wù)器的doserver.php這個(gè)文件的地址。接下來就是使用ajax發(fā)送請(qǐng)求和服務(wù)器響應(yīng)成功后執(zhí)行funcName(jsonVar)函數(shù)。

代碼示例：

function sendToServer(tStr,funcName)

信息展示這個(gè)功能是在成功接收到后臺(tái)數(shù)據(jù)后執(zhí)行的，因此可以將實(shí)現(xiàn)這一部分的代碼寫在sendToServer函數(shù)的第二個(gè)參數(shù)的function(data)函數(shù)中。函數(shù)function(data)將從后臺(tái)接收來的數(shù)據(jù)通過解析提取有用的數(shù)據(jù)，后臺(tái)返回的數(shù)據(jù)是一個(gè)對(duì)象，我們只需要對(duì)象中data這個(gè)二維數(shù)組的數(shù)據(jù)。最后通過判斷語(yǔ)句篩選出“A類車”的數(shù)據(jù)，在繪制div盒子時(shí)將對(duì)應(yīng)的數(shù)據(jù)添加進(jìn)去就實(shí)現(xiàn)了車輛信息的動(dòng)態(tài)顯示。其他頁(yè)面的不同類型車輛信息的展示原理是類似的，只需要將function(data)函數(shù)中判斷語(yǔ)句的條件進(jìn)行修改即可。

5.2 統(tǒng)計(jì)頁(yè)面

以柱狀圖為例，和獲取車輛信息的方法類似，首先定義了一個(gè)findAllRecord函數(shù)用于獲取汽車租賃記錄。在函數(shù)中定義一個(gè)strTemp的對(duì)象，對(duì)象中有一個(gè)叫reqKey的變量，給其賦值為"find_AllRecord"，對(duì)應(yīng)于數(shù)據(jù)庫(kù)中查找所有汽車租賃記錄的存儲(chǔ)過程。同樣地，將這個(gè)對(duì)象轉(zhuǎn)換成JSON字符串，作為sendToServer函數(shù)的第一個(gè)參數(shù)。而sendToServer函數(shù)的第二個(gè)參數(shù)是個(gè)函數(shù)，在該函數(shù)體中，將從后臺(tái)接收來的數(shù)據(jù)中表示車輛類型的字符串與事先定義好的type對(duì)象數(shù)組的name成員進(jìn)行對(duì)比，如果一樣則將對(duì)象中的sum成員加一，以此來計(jì)算不同類型車輛的數(shù)目。然后將統(tǒng)計(jì)好的車輛數(shù)目的數(shù)據(jù)存在localStorage緩存中，方便接下來使用。

接下來是實(shí)現(xiàn)柱狀圖數(shù)據(jù)的顯示，通過getItem函數(shù)將緩存中的數(shù)據(jù)取出來放在一個(gè)數(shù)組中，然后將這個(gè)數(shù)組中的成員依次放入echarts代碼的data中就可以將數(shù)據(jù)顯示出來了。當(dāng)然為了能方便刷新數(shù)據(jù)，可以添加一個(gè)下拉刷新函數(shù)，然后把findAllRecord這個(gè)函數(shù)放入下拉刷新函數(shù)，就可以在下拉釋放后調(diào)用此函數(shù)再次查詢后臺(tái)數(shù)據(jù)以實(shí)現(xiàn)數(shù)據(jù)的刷新了。

5.3 注冊(cè)、登錄及個(gè)人頁(yè)面

注冊(cè)功能主要分為兩個(gè)步驟，首先獲取用戶在表單中輸入的數(shù)據(jù)，然后將獲取的數(shù)據(jù)發(fā)送給后臺(tái)執(zhí)行注冊(cè)操作。在這里還是要用到strTemp這個(gè)對(duì)象，不過與上述兩個(gè)頁(yè)面不同的是，在strTemp中需要添加一個(gè)input成員，input中包含了用戶在表單中輸入的數(shù)據(jù)。給reqKey賦值為Insert_Users，告訴服務(wù)器要注冊(cè)新的用戶。

將strTemp對(duì)象轉(zhuǎn)換成JSON字符串后，同樣地調(diào)用sendToServer函數(shù)，不過需要對(duì)function(data)函數(shù)進(jìn)行修改。為了能夠?qū)?shù)據(jù)傳到另一個(gè)頁(yè)面，方便在另一個(gè)頁(yè)面使用，需要將這些數(shù)據(jù)存入緩存。在注冊(cè)成功后再跳轉(zhuǎn)到個(gè)人頁(yè)面。

登錄功能的實(shí)現(xiàn)和注冊(cè)功能類似，這里就不再論述了。個(gè)人頁(yè)面主要是個(gè)人信息的展示，因此也需要使用sendToServer函數(shù)通過后臺(tái)查詢用戶的信息。在這之前需要先判斷用戶是否登錄，判斷用戶是否登錄只需要從緩存中查找userName的值是否為空就行了，因?yàn)樵谧?cè)和登錄成功后就已經(jīng)將相關(guān)數(shù)據(jù)存入到緩存中了。這時(shí)如果緩存中userName的值為空，表示用戶未登錄或已經(jīng)注銷，則不再顯示用戶信息；如果不為空，則需要調(diào)用相關(guān)函數(shù)查詢用戶信息并顯示。

因?yàn)橐@示租車信息和計(jì)時(shí)信息，所以在實(shí)現(xiàn)這個(gè)功能的函數(shù)中要調(diào)用兩次sendToServer函數(shù)，且函數(shù)需要使用不同的參數(shù)。先定義兩個(gè)對(duì)象strTemp1和strTemp2，分別作為兩次調(diào)用sendToServer函數(shù)時(shí)的第一個(gè)參數(shù)，告訴服務(wù)器要執(zhí)行的操作。

對(duì)象strTemp1是為了通過緩存中的userIDCard也就是用戶的id查找該用戶在租車輛的租用信息，對(duì)象strTemp2是用于查找對(duì)應(yīng)車輛，找到其租賃價(jià)格。這兩個(gè)對(duì)象對(duì)應(yīng)數(shù)據(jù)庫(kù)中對(duì)兩個(gè)表的操作。

第一次調(diào)用sendToServer函數(shù)時(shí)，將str1作為第一個(gè)參數(shù)，第二個(gè)參數(shù)依然是function(data)函數(shù)，該函數(shù)先將后臺(tái)服務(wù)器傳回來的數(shù)據(jù)存入緩存中，再通過innerHTML方法將數(shù)據(jù)顯示在界面上，進(jìn)而實(shí)現(xiàn)租車信息的顯示。

第二次調(diào)用sendToServer函數(shù)時(shí)，將str2作為第一個(gè)參數(shù)，第二個(gè)參數(shù)是function(data)函數(shù)，函數(shù)中將獲取到的對(duì)應(yīng)汽車價(jià)格存入緩存，然后通過把當(dāng)前時(shí)間與租車時(shí)間作差，求出到現(xiàn)在為止租用的時(shí)長(zhǎng)，再與汽車價(jià)格相乘求出累計(jì)費(fèi)用。結(jié)束語(yǔ)

6 結(jié)束語(yǔ)

本文介紹了如何使用MUI框架開發(fā)移動(dòng)應(yīng)用，使用MUI框架開發(fā)移動(dòng)應(yīng)用具有跨平臺(tái)、開發(fā)成本低等特點(diǎn)，且代碼簡(jiǎn)單易懂，應(yīng)用界面簡(jiǎn)潔統(tǒng)一。相較于原生APP開發(fā)，雖然使用MUI框架開發(fā)APP還有很多不足的地方，但是其學(xué)習(xí)成本較低，適合于移動(dòng)應(yīng)用開發(fā)的初學(xué)者。