張 弛

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

1 關鍵技術和需求分析

1.1 關鍵技術

1.1.1 jQuery

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

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

1.1.2 AJAX

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

1.1.3 模塊Store

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

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

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

1.2 需求分析

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

2 總體設計

2.1 系統(tǒng)架構

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

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

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

2.2.1 用戶表（user表）

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

2.2.2 角色表（role表）

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

2.2.3 商品表（goods表）

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

2.2.4 訂單表（order表）

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

2.2.5 店鋪表（store表）

store表，商家信息除了個人信息在user表中，關于店鋪的信息存放在store表中。

3 模塊的劃分與功能設計

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

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

3.1 用戶注冊模塊

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

3.2 用戶登錄模塊

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

3.3 商品查詢模塊

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

3.4 商品選購模塊

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

3.5 訂單查詢模塊

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

3.6 店鋪商品更新模塊

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

3.7 個人信息修改模塊

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

4 詳細設計與實現(xiàn)

4.1 用戶注冊功能的設計與實現(xiàn)

4.1.1 功能概述

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

4.1.2 功能詳細設計

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

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

4.1.3 界面設計

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

4.2 用戶登錄功能的設計與實現(xiàn)

4.2.1 功能概述

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

4.2.2 功能詳細設計

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

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

發(fā)送成功后，返回的ret是一個JSON對象{“msg”:“請到郵箱查收郵件”}。當用戶在登錄時重置密碼，此時LocalStorage的token對象沒有值，則用戶需要輸入用戶注冊時的手機號和郵箱方可進行重置。

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

4.2.3 界面設計

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

4.3 商品查詢功能的設計與實現(xiàn)

4.3.1 功能概述

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

4.3.2 功能詳細設計

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

4.4 訂單查詢功能的設計與實現(xiàn)

4.4.1 功能概述

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

4.4.2 功能詳細設計

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

5 結語

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

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

[參考文獻]

[1]劉天寅.HTML5與未來的WEB應用平臺[J].陰山學刊（自然科學版），2010（2）：86-90.

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

[3]龍奇.新一代網(wǎng)絡技術標準HTML5的研究[J].科技信息，2011（10）：245.

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

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

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

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