基于HTML5的手機(jī)移動(dòng)便利店研究

張 弛

（大連集益物流有限公司，遼寧 大連 116601）

1 關(guān)鍵技術(shù)和需求分析

1.1 關(guān)鍵技術(shù)

1.1.1 jQuery

jQuery是輕量級(jí)的Javascript庫，兼容CSS3以及各種瀏覽器，包括IE，F(xiàn)F，Safari和Opera等。jQuery使得開發(fā)者更加便捷地處理HTML，events以及實(shí)現(xiàn)動(dòng)畫效果，并且其提供了Ajax的交互功能，方便了網(wǎng)站數(shù)據(jù)庫的操作。jQuery還有一個(gè)最大的特點(diǎn)就是文檔健全，提供許多開發(fā)者熟悉的插件，并且都有很好的交互性。隨著jQuery的不斷發(fā)展，其實(shí)現(xiàn)了HTML頁面代碼與內(nèi)容的分離，即js文件可以通過調(diào)用的形式使用，不用再在代碼中嵌套js代碼。

jQuery的使用方法很簡便，我們可以登錄jQuery的官方網(wǎng)頁進(jìn)行瀏覽和學(xué)習(xí)。需要引用的js文件可以通過http網(wǎng)址的引用寫入代碼，也可以將js文件下載到項(xiàng)目的目錄下直接使用。

1.1.2 AJAX

AJAX即“Asynchronous Javascript And XML”（異步Javascript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。其主要功能是通過后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)溝通，使網(wǎng)頁實(shí)現(xiàn)異步更新。傳統(tǒng)的頁面在更新時(shí)，是整個(gè)頁面重新加載，而使用AJAX后，僅是局部的更新。它的這種特性，使得因特網(wǎng)的應(yīng)用程序，能夠更加快捷、友好。

1.1.3 模塊Store

APICloud的最大魅力源于其本身所帶有的模塊調(diào)用功能，開發(fā)者將所需功能封裝成一個(gè)個(gè)模塊共享到平臺(tái)，其他開發(fā)者若想使用該模塊功能即可引入該模塊，而無需自行敲打代碼完成功能的實(shí)現(xiàn)。這樣不僅提高了效率，縮短開發(fā)周期，減少了許多不必要的操作，而且也開動(dòng)眾多開發(fā)者的大腦，共同開發(fā)出多樣的功能模塊，不斷完善和提高系統(tǒng)的性能。APICloud自身封裝了一些模塊功能，包括界面布局、導(dǎo)航菜單、系統(tǒng)應(yīng)用和第三方服務(wù)功能等。

1.1.4 數(shù)據(jù)云的操作

要使用APICloud數(shù)據(jù)云API主要有3種方法。（1）api.ajax：使用靈活，但也復(fù)雜，可以連接其他數(shù)據(jù)云。（2）mcm模塊：簡單快捷，但只能連接APICloud的數(shù)據(jù)云。（3）mcmjs-sdk（APICloud JS SDK）：是參考angular-resource.js類庫，基于api.ajax而寫成的原生Javascript 類庫。它與已經(jīng)存在的Javascript程序是兼容的，支持對(duì)象化操作，簡化文件上傳、多個(gè)文件上傳、Relation相關(guān)操作，只需要在代碼中做出一點(diǎn)點(diǎn)改變。因?yàn)槭腔赼pi.ajax的參數(shù)封裝類庫，所以可以做到最小的影響性能，最小化配置，讓開發(fā)者很快地在APICloud上使用Javascript和HTML5。

1.2 需求分析

手機(jī)移動(dòng)便利店系統(tǒng)的需求分析是軟件開發(fā)生命周期內(nèi)的重要工作，其作用在于引導(dǎo)整個(gè)系統(tǒng)的開發(fā)方向，在設(shè)計(jì)系統(tǒng)時(shí)應(yīng)該著手于4個(gè)方面：（1）用戶登錄以及注冊(cè)，用戶進(jìn)入系統(tǒng)必須通過注冊(cè)，然后成功登錄，方可獲得相應(yīng)使用權(quán)。（2）店鋪分類管理，這就涉及數(shù)據(jù)庫的分類管理，這樣做的目的是方便買家查詢購買。（3）獲取數(shù)據(jù)庫信息，完成商品的瀏覽、選購等工作。這部分是重點(diǎn)，實(shí)現(xiàn)了整個(gè)系統(tǒng)的核心價(jià)值。（4）個(gè)人信息和店鋪信息的修改，這部分實(shí)現(xiàn)了信息的不斷更新，真正實(shí)現(xiàn)網(wǎng)絡(luò)的價(jià)值。

2 總體設(shè)計(jì)

2.1 系統(tǒng)架構(gòu)

根據(jù)系統(tǒng)的需求分析，本項(xiàng)目采用MVC框架，即模型（Model）—視圖（View）—控制器（Controller）框架進(jìn)行設(shè)計(jì)開發(fā)。模型（Model）主要針對(duì)數(shù)據(jù)庫進(jìn)行操作，完成基本的檢索、查詢和刪除；視圖（View）主要針對(duì)系統(tǒng)的界面進(jìn)行設(shè)計(jì)，根據(jù)用戶需求完成具體功能模塊的設(shè)計(jì)，便于交互；控制器（Controller）主要是根據(jù)用戶發(fā)出的請(qǐng)求，調(diào)用處理相應(yīng)功能的模塊，作出相對(duì)數(shù)據(jù)庫的操作，并將請(qǐng)求結(jié)果返還給用戶?；贏PICloud平臺(tái)的開發(fā)為了調(diào)用眾多功能模塊，其強(qiáng)大之處在于封裝了各類功能接口，使得操作和運(yùn)行都高效有質(zhì)量。APICloud提供的后臺(tái)管理，根據(jù)各項(xiàng)數(shù)據(jù)的回饋形成文檔，為系統(tǒng)修復(fù)和升級(jí)提供材料。

2.2 數(shù)據(jù)庫設(shè)計(jì)

根據(jù)需求分析，為了系統(tǒng)的進(jìn)一步設(shè)計(jì)，首先設(shè)計(jì)后臺(tái)數(shù)據(jù)庫，方便之后的功能實(shí)現(xiàn)和數(shù)據(jù)交互。

2.2.1 用戶表（user表）

user表用于存儲(chǔ)用戶信息，無論用戶身份是什么都存儲(chǔ)在該表中，用于區(qū)別身份的是role列，role列對(duì)應(yīng)role表的用戶類型，在此即可區(qū)分用戶身份。

2.2.2 角色表（role表）

區(qū)分用戶角色的role表定義了各個(gè)用戶身份區(qū)別。

2.2.3 商品表（goods表）

goods表用于存儲(chǔ)商品信息，store表中relation到該表，則體現(xiàn)了商家所屬的商品信息。

2.2.4 訂單表（order表）

order表，存放訂單信息，包括消費(fèi)者、商家和商品的關(guān)聯(lián)信息。

2.2.5 店鋪表（store表）

store表，商家信息除了個(gè)人信息在user表中，關(guān)于店鋪的信息存放在store表中。

3 模塊的劃分與功能設(shè)計(jì)

通過對(duì)系統(tǒng)的需求進(jìn)行分析，本次開發(fā)將系統(tǒng)功能模塊分為：用戶注冊(cè)、用戶登錄、商品查詢、商品選購、訂單查詢、店鋪商品更新、個(gè)人信息修改七大模塊，系統(tǒng)的功能架構(gòu)如圖1所示。

圖1 系統(tǒng)功能架構(gòu)

3.1 用戶注冊(cè)模塊

用戶進(jìn)入系統(tǒng)，首先要注冊(cè)個(gè)人賬號(hào)，其中包含的個(gè)人信息有用戶手機(jī)號(hào)、密碼、用戶名、用戶地址、用戶郵箱、用戶身份?；谑謾C(jī)號(hào)的唯一性，使得它成為標(biāo)記用戶的Id，也就是說同一個(gè)手機(jī)號(hào)只能注冊(cè)一次；用戶名和地址方便店家與消費(fèi)者進(jìn)行聯(lián)系；用戶郵箱用于用戶找回賬號(hào)密碼；而用戶身份則是用于區(qū)分賣家還是消費(fèi)者。

3.2 用戶登錄模塊

無論是消費(fèi)者還是賣家，他們的登錄方式是相同的，通過將用戶輸入的手機(jī)號(hào)與密碼到數(shù)據(jù)庫進(jìn)行匹配，判斷用戶是否資格使用該賬號(hào)登錄，并執(zhí)行該賬號(hào)下所屬的權(quán)利。

3.3 商品查詢模塊

用戶登錄成功后進(jìn)入系統(tǒng)主界面，根據(jù)所需在店家分類的界面下進(jìn)行商品的查詢。查詢過程中，用戶不僅可以查看到琳瑯滿目的商品信息，還可以瀏覽店鋪的商家信息，根據(jù)商家與商品的綜合信息，進(jìn)行接下來的商品選購。

3.4 商品選購模塊

用戶查找到心儀商品就可以進(jìn)行購買。在“商品選購”界面下輸入所需商品需求，包括取貨方式、產(chǎn)品種類、數(shù)量和價(jià)錢。完成這些信息后，就可以提交訂單，完成商品的選購功能。

3.5 訂單查詢模塊

在這個(gè)模塊下，無論是賣家還是消費(fèi)者，都能查到與自己相關(guān)的購物訂單，方便用戶的個(gè)人消費(fèi)管理，以及查詢個(gè)人的消費(fèi)記錄。

3.6 店鋪商品更新模塊

賣家的個(gè)人中心有一個(gè)“我的店鋪”模塊，在這個(gè)模塊下賣家可以通過修改、刪除和添加商品信息的方式，更新店鋪信息。

3.7 個(gè)人信息修改模塊

這個(gè)模塊顧名思義就是修改用戶在注冊(cè)時(shí)候填寫的個(gè)人信息，根據(jù)個(gè)人信息的修改，及時(shí)返還數(shù)據(jù)庫進(jìn)行更新，方便日后的購物功能。

4 詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)

4.1 用戶注冊(cè)功能的設(shè)計(jì)與實(shí)現(xiàn)

4.1.1 功能概述

新用戶進(jìn)入系統(tǒng)需要進(jìn)行登錄才能享受系統(tǒng)相關(guān)服務(wù)，對(duì)于初次使用的用戶則需要賬號(hào)的注冊(cè)。賬號(hào)注冊(cè)需要用戶提供手機(jī)號(hào)、密碼作為必要信息，下次用戶就可以通過手機(jī)號(hào)直接登錄。在注冊(cè)表中填寫郵箱，是為了重置賬號(hào)密碼時(shí)使用的，并且需要登錄郵箱進(jìn)行驗(yàn)證才能重置密碼。

4.1.2 功能詳細(xì)設(shè)計(jì)

（1）用戶注冊(cè)。在設(shè)計(jì)用戶注冊(cè)時(shí)，首先注意的是用戶表的建立。本系統(tǒng)的數(shù)據(jù)庫采用APICloud的數(shù)據(jù)云技術(shù)，該技術(shù)由APICloud開發(fā)，并根據(jù)常用數(shù)據(jù)庫使用方式封裝了許多接口，方便操作和運(yùn)用。在數(shù)據(jù)云中每個(gè)項(xiàng)目有默認(rèn)的5個(gè)表：accessToken， fi le，role，roleMapping，user，其中在注冊(cè)功能上運(yùn)用了user和role表，accessToken表是與user表相關(guān)聯(lián)的用戶登錄記錄表，user表對(duì)accessToken表是一對(duì)多的關(guān)系，即統(tǒng)計(jì)用戶登入登出狀態(tài)的關(guān)聯(lián)表，在注冊(cè)時(shí)無需使用。

（2）郵箱注冊(cè)。用戶成功注冊(cè)后，若是在注冊(cè)時(shí)填寫了正確的郵箱，則成功注冊(cè)的同時(shí)會(huì)向郵箱發(fā)送驗(yàn)證信息，為了下次方便用戶修改密碼，則用戶需要到郵箱中激活賬號(hào)，當(dāng)郵箱激活成功后，user表中的emailVerified就會(huì)由false轉(zhuǎn)變?yōu)閠rue，意味著該賬號(hào)已經(jīng)通過郵箱激活完畢，激活成功。

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

在界面設(shè)計(jì)時(shí)為了保證界面的友好性和美觀性，需要引入CSS樣式文件，CSS文件的引入方式同JQuery庫的引入，可以通過網(wǎng)絡(luò)地址直接引入，也可以下載引入，由于使用網(wǎng)絡(luò)地址的方式引入，會(huì)使得系統(tǒng)在無網(wǎng)絡(luò)狀態(tài)下出現(xiàn)界面混亂的結(jié)果，所以，本項(xiàng)目開發(fā)中用到的CSS和JQuery文件都是下載到項(xiàng)目列表下引入到項(xiàng)目中，直接在項(xiàng)目包中，這樣在無網(wǎng)絡(luò)狀態(tài)下依然保持順暢的界面。

4.2 用戶登錄功能的設(shè)計(jì)與實(shí)現(xiàn)

4.2.1 功能概述

用戶進(jìn)入系統(tǒng)后，若是已有注冊(cè)賬號(hào)則可以通過登錄系統(tǒng)享受服務(wù)權(quán)利。用戶在登錄界面輸入手機(jī)號(hào)和密碼，若與數(shù)據(jù)庫存儲(chǔ)的密碼和手機(jī)號(hào)相匹配則登錄成功，若不相匹配，則用戶可以通過激活的郵箱重置密碼，重置后用戶就可以根據(jù)新密碼重新登錄系統(tǒng)。

4.2.2 功能詳細(xì)設(shè)計(jì)

（1）用戶登錄。在系統(tǒng)界面用戶在input控件中輸入手機(jī)號(hào)和密碼，并由“$api.byId(id).value”獲得輸入框中的值，再通過Ajax傳遞到后臺(tái)數(shù)據(jù)庫進(jìn)行數(shù)據(jù)匹配，若匹配成功則返回ret對(duì)應(yīng)數(shù)據(jù)庫用戶信息。為接下來界面都能傳遞登錄用戶信息，則通過$api.setStorage(key,value)存儲(chǔ)登錄用戶信息，其中key（string）為鍵名，value（任意類型）為值。

（2）密碼重置。當(dāng)用戶登錄系統(tǒng)忘記密碼，或是想更換密碼提高安全性能時(shí)可以在登錄界面，或是修改個(gè)人信息中重置密碼。請(qǐng)求密碼重置URL：/mcm/api/user/resetRequest，HTTP：POST，請(qǐng)求時(shí)需要發(fā)送一個(gè)POST請(qǐng)求到/resetRequest。當(dāng)然，用戶密碼重置的前提就是激活了郵箱。

發(fā)送成功后，返回的ret是一個(gè)JSON對(duì)象{“msg”:“請(qǐng)到郵箱查收郵件”}。當(dāng)用戶在登錄時(shí)重置密碼，此時(shí)LocalStorage的token對(duì)象沒有值，則用戶需要輸入用戶注冊(cè)時(shí)的手機(jī)號(hào)和郵箱方可進(jìn)行重置。

而在登錄后重置密碼，則通過$api.getStorage(‘token’);來獲得登錄后LocalStorage里的token，該參數(shù)代表登錄后用戶在數(shù)據(jù)表中的真實(shí)Id，可以利用這個(gè)Id得到重置密碼的權(quán)利，并執(zhí)行密碼重置功能。

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

用戶登錄界面主要獲得用戶輸入的手機(jī)號(hào)和密碼，當(dāng)用戶忘記密碼時(shí)則提供密碼重置的功能，因而在登錄界面的設(shè)計(jì)上注重的主要是簡潔大方，讓操作者使用起來很容易，當(dāng)用戶填寫信息與數(shù)據(jù)庫不符，則發(fā)出提示信息。

4.3 商品查詢功能的設(shè)計(jì)與實(shí)現(xiàn)

4.3.1 功能概述

這部分主要完成的功能是用戶通過瀏覽商家查詢自己心儀的商品，為下一步選購做準(zhǔn)備。用戶進(jìn)入系統(tǒng)后首先在主界面會(huì)看到商家的分類，商家的分類方便了用戶篩選自己心儀的商品所歸屬的店鋪。用戶根據(jù)自身喜好選擇商家，則可進(jìn)入該商家的商品列表，在商品列表中消費(fèi)者則可以瀏覽全部商品信息，并可以根據(jù)關(guān)鍵字在搜索表中搜索所需商品，快捷準(zhǔn)確地找到自己所需產(chǎn)品。

4.3.2 功能詳細(xì)設(shè)計(jì)

在商家和商品列表這部分的實(shí)現(xiàn)中，除了前端的處理，也涉及后臺(tái)數(shù)據(jù)庫的連接。數(shù)據(jù)表設(shè)計(jì)包括3張：用戶表、店鋪表和商品表。用戶表顧名思義就是店家自己的信息，如果用戶身份為賣家，則pointer到店鋪表，即一個(gè)賣家對(duì)應(yīng)一個(gè)店鋪表的行信息。店鋪表相當(dāng)于一個(gè)橋梁，它存儲(chǔ)店家的備注信息，同時(shí)relation到商品表，關(guān)聯(lián)著賣家的商品信息。

4.4 訂單查詢功能的設(shè)計(jì)與實(shí)現(xiàn)

4.4.1 功能概述

用戶登錄成功后即可在個(gè)人中心查找到自己選購成功的商品，商品列表詳細(xì)記錄了用戶的訂購需求和交易雙方的信息，方便售后的各項(xiàng)服務(wù)。

4.4.2 功能詳細(xì)設(shè)計(jì)

這部分的功能實(shí)現(xiàn)主要是表查詢功能。即根據(jù)$api.getStorage(‘token’)獲得的用戶ID，查找到關(guān)聯(lián)的order表信息，并逐一顯示到界面。

5 結(jié)語

隨著計(jì)算機(jī)網(wǎng)絡(luò)的高速發(fā)展，各種商業(yè)都與網(wǎng)絡(luò)息息相關(guān)，因而網(wǎng)站開發(fā)成了現(xiàn)今IT領(lǐng)域的熱門技術(shù)，但是多平臺(tái)移植造成了網(wǎng)站開發(fā)的難點(diǎn)。HTML5網(wǎng)站開發(fā)正是解決了這些問題帶來的困擾，HTML5的網(wǎng)站主要有：兼容性好、跨平臺(tái)（包括：windows，Mac，Linux，iOS等系統(tǒng)）、跨終端（包括：手機(jī)、電腦、iPad等設(shè)備）、安全性更高、擴(kuò)展性更強(qiáng)、功能更加豐富、開發(fā)效率更高等特性。

網(wǎng)絡(luò)信息的時(shí)代，我們?cè)诖笃髽I(yè)大數(shù)據(jù)發(fā)展的同時(shí)，也應(yīng)當(dāng)多多關(guān)注身邊小企業(yè)小發(fā)展的動(dòng)態(tài)，關(guān)注這些，不僅有助于產(chǎn)業(yè)鏈的持續(xù)發(fā)展，更能細(xì)致入微到我們生活的點(diǎn)點(diǎn)滴滴中，方便我們的生活，提高生活質(zhì)量。

[參考文獻(xiàn)]

[1]劉天寅.HTML5與未來的WEB應(yīng)用平臺(tái)[J].陰山學(xué)刊（自然科學(xué)版），2010（2）：86-90.

[2]邢曉鵬.HTML5核心技術(shù)的研究與價(jià)值分析[J].價(jià)值工程，2011（22）：157-158.

[3]龍奇.新一代網(wǎng)絡(luò)技術(shù)標(biāo)準(zhǔn)HTML5的研究[J].科技信息，2011（10）：245.

[4]顧旻霞.構(gòu)建更加開放的移動(dòng)互聯(lián)網(wǎng)[J].信息通信技術(shù)，2011（4）：54-57.

[5]顧春蓮.HTML5中的音頻及視頻元素對(duì)互聯(lián)網(wǎng)的影響[J].河北省科學(xué)院學(xué)報(bào)，2011（3）：106-108.

[6]史君.支持HTML5技術(shù)的嵌入式移動(dòng)瀏覽器研究與開發(fā)[D].大連：大連海事大學(xué)，2012.

[7]王雯潔.基于UML及HTML5網(wǎng)站的開發(fā)和測(cè)試[D].呼和浩特：內(nèi)蒙古大學(xué)，2012.