文/王立強(qiáng) （海南廣播電視大學(xué)理工學(xué)院）

基于HTML5開(kāi)發(fā)的一款網(wǎng)上商品購(gòu)買(mǎi)軟件，使用JavaScript進(jìn)行業(yè)務(wù)功能編寫(xiě)，使用PHP進(jìn)行后臺(tái)服務(wù)端開(kāi)發(fā)，數(shù)據(jù)庫(kù)使用MYSQL數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)管理。本項(xiàng)目分為前端頁(yè)面與后臺(tái)服務(wù)端，前端頁(yè)面展示商品信息等數(shù)據(jù)，后臺(tái)服務(wù)器端進(jìn)行數(shù)據(jù)管理。本電商項(xiàng)目主要功能有：登錄注冊(cè)，首頁(yè)、列表詳情、購(gòu)物車(chē)、查看訂單等模塊。使用了HTML5與CSS來(lái)進(jìn)行頁(yè)面布局及美化，使用Bootstrap進(jìn)行頁(yè)面結(jié)構(gòu)搭建，JavaScript進(jìn)行頁(yè)面邏輯編寫(xiě)，數(shù)據(jù)庫(kù)使用MySQL進(jìn)行數(shù)據(jù)存儲(chǔ)管理，通過(guò)AJAX進(jìn)行數(shù)據(jù)交互。

HTML5是超文本標(biāo)記語(yǔ)言的第五次重大修改，簡(jiǎn)稱(chēng)H5，是萬(wàn)維網(wǎng)聯(lián)盟和Web Hypertext Application Technology Working Group經(jīng)過(guò)接近8年的努力規(guī)范制定完成的。H5的第一份草案在2008年1月22日公布，當(dāng)時(shí)正是國(guó)內(nèi)電商發(fā)展迅猛的時(shí)候，國(guó)內(nèi)網(wǎng)購(gòu)用戶(hù)仰頭上漲，各類(lèi)電商網(wǎng)站紛紛出現(xiàn)，目前，網(wǎng)上電商網(wǎng)站五花八門(mén)。本課題就是在這個(gè)前提下展開(kāi)研究的。

本課題主要使用了HTML5的規(guī)范進(jìn)行網(wǎng)上商城的編寫(xiě)，輔助其他前端技術(shù)來(lái)進(jìn)行功能的實(shí)現(xiàn)，諸如CSS3、JavaScript、Bootstrap等進(jìn)行網(wǎng)站開(kāi)發(fā)，使用MYSQL作為網(wǎng)站數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)的存儲(chǔ)以及管理，使用PHP進(jìn)行后臺(tái)系統(tǒng)的編寫(xiě)，使系統(tǒng)對(duì)數(shù)據(jù)的管理也更方便。

緒論

這一章主要是介紹項(xiàng)目的研究背景以及為什么要做該項(xiàng)目，在調(diào)查過(guò)程中適當(dāng)?shù)膶?duì)現(xiàn)階段的行情進(jìn)行分析，給一些喜歡網(wǎng)購(gòu)的朋友提供一個(gè)購(gòu)買(mǎi)的渠道。

（一）課題研究背景

隨著國(guó)內(nèi)經(jīng)濟(jì)提高，民眾的生活質(zhì)量大大提高。開(kāi)發(fā)一個(gè)基于HTML5的電商網(wǎng)站是在新增HTML語(yǔ)義標(biāo)簽的基礎(chǔ)上，運(yùn)用所學(xué)理論知識(shí)和編碼能力，設(shè)計(jì)出一個(gè)高效快捷、針對(duì)性強(qiáng)的系統(tǒng)。

（二）本課題目的及意義

隨著互聯(lián)網(wǎng)發(fā)展，在網(wǎng)上開(kāi)店的潮流已經(jīng)興起，又因?yàn)榫W(wǎng)上購(gòu)物十分方便，網(wǎng)店銷(xiāo)售在未來(lái)必定有長(zhǎng)遠(yuǎn)發(fā)展。

前端技術(shù)在最近幾年開(kāi)始成熟，迅速在互聯(lián)網(wǎng)這個(gè)領(lǐng)域火了起來(lái)，HTML5剛剛出現(xiàn)卻顛覆了當(dāng)前前端技術(shù)的頁(yè)面編寫(xiě)方式，HTML5開(kāi)始了迅速發(fā)展，并且隨著HTML5的發(fā)展，各種前端的框架也隨之而來(lái)，讓前端這門(mén)技術(shù)更加火熱。

（三）國(guó)內(nèi)發(fā)展概況

國(guó)內(nèi)也有一些大型的電商網(wǎng)站，比如京東、淘寶、唯品會(huì)等?，F(xiàn)在國(guó)內(nèi)的網(wǎng)購(gòu)的行情日趨好轉(zhuǎn)，環(huán)境相對(duì)于以前來(lái)說(shuō)優(yōu)化了很多，因此現(xiàn)在國(guó)內(nèi)電商的發(fā)展越來(lái)越好了。

（四）本課題的主要內(nèi)容和任務(wù)

1.用戶(hù)管理中心

用戶(hù)管理中心指的就是用戶(hù)在本網(wǎng)站里面注冊(cè)以后進(jìn)行登錄的一個(gè)管理方式，主要是用戶(hù)首先注冊(cè)，注冊(cè)完成以后信息存儲(chǔ)到用戶(hù)信息表中，在用戶(hù)中心里面用戶(hù)可以自己查看個(gè)人信息，查看訂單信息，查看購(gòu)物車(chē)等一系列操作。

2.商品資訊

商品資訊是整個(gè)電商項(xiàng)目的一個(gè)小功能，通過(guò)商品資訊用戶(hù)可以自己關(guān)注自己喜歡的商品，而管理員也可以給用戶(hù)推送最新的商品信息，讓用戶(hù)了解最新的商品信息。

3.商品購(gòu)買(mǎi)

商品購(gòu)買(mǎi)是整個(gè)項(xiàng)目最核心的一個(gè)模塊，通過(guò)它能夠讓用戶(hù)在看好自己喜歡的商品后下單購(gòu)買(mǎi)，當(dāng)用戶(hù)購(gòu)買(mǎi)完成后生產(chǎn)一個(gè)訂單信息，用戶(hù)可以看到購(gòu)買(mǎi)的商品信息，如果用戶(hù)在購(gòu)買(mǎi)前不喜歡可以刪除該商品。

4.項(xiàng)目的主要任務(wù)

先根據(jù)項(xiàng)目的整體進(jìn)行需求分析，然后使用前端技術(shù)對(duì)需求分析好的項(xiàng)目進(jìn)行靜態(tài)頁(yè)面的整體結(jié)構(gòu)設(shè)計(jì)以及界面布局，還有就是一些數(shù)據(jù)存儲(chǔ)，在一些功能模塊上，根據(jù)頁(yè)面的布局來(lái)給用戶(hù)呈現(xiàn)什么樣的數(shù)據(jù)提供給用戶(hù)進(jìn)行操作，通過(guò)用戶(hù)的操作行為進(jìn)行判斷需要發(fā)送什么數(shù)據(jù)給后臺(tái)，后臺(tái)根據(jù)用戶(hù)發(fā)送的數(shù)據(jù)進(jìn)行相應(yīng)的判斷以后返回?cái)?shù)據(jù)對(duì)頁(yè)面進(jìn)行相對(duì)應(yīng)的數(shù)據(jù)顯示。

（1）使用Bootstrap進(jìn)行靜態(tài)頁(yè)面結(jié)構(gòu)的搭建，HTML和CSS進(jìn)行頁(yè)面的靜態(tài)布局。

（2）使用JavaScript編寫(xiě)頁(yè)面的邏輯結(jié)構(gòu)。

（3）使用MYSQL進(jìn)行數(shù)據(jù)庫(kù)的創(chuàng)建，通過(guò)PHP編寫(xiě)后臺(tái)的一些邏輯，達(dá)到對(duì)數(shù)據(jù)庫(kù)的增刪改查。

（4）數(shù)據(jù)的交互通過(guò)AJAX來(lái)實(shí)現(xiàn)，將后臺(tái)的數(shù)據(jù)顯示到前臺(tái)頁(yè)面上。

（5）項(xiàng)目最后是在先前搭建好的Xampp環(huán)境下進(jìn)行測(cè)試，根據(jù)測(cè)試的結(jié)果來(lái)對(duì)代碼進(jìn)行優(yōu)化。

（6）整個(gè)電商項(xiàng)目全部跑通。

（7）將跑通的項(xiàng)目進(jìn)行上線(xiàn)，只能在瀏覽器上模擬演示。

相關(guān)技術(shù)介紹

電商網(wǎng)站設(shè)計(jì)中涉及到的到的相關(guān)技術(shù)和開(kāi)發(fā)所需要的環(huán)境進(jìn)行介紹包括對(duì)HTML5技術(shù)和介紹和本系統(tǒng)開(kāi)發(fā)中要用到的軟件和數(shù)據(jù)庫(kù)等相應(yīng)環(huán)境的相關(guān)介紹。

（一）開(kāi)發(fā)工具

這個(gè)系統(tǒng)使用了MYSQL這個(gè)數(shù)據(jù)庫(kù)作為后臺(tái)數(shù)據(jù)庫(kù)，以HTML5、CSS3、JavaScript、Bootstrap作為前端開(kāi)發(fā)技術(shù)。這個(gè)系統(tǒng)使用了中文的界面，操作流程及其簡(jiǎn)單，就算是沒(méi)有計(jì)算機(jī)基礎(chǔ)的管理人員和業(yè)務(wù)操作人員也可以在較短的時(shí)間內(nèi)掌握相關(guān)的操作流程。

（1）MYSQL它在數(shù)據(jù)庫(kù)的類(lèi)別是屬于關(guān)系型的數(shù)據(jù)庫(kù)，一開(kāi)始是瑞典的一家叫做MYSQL AB公司開(kāi)發(fā)的，現(xiàn)在是屬于Oracle公司的一個(gè)開(kāi)源產(chǎn)品。目前MYSQL在很多公司的中小型的網(wǎng)站中被廣泛的使用。主要是因?yàn)槠潴w積相當(dāng)?shù)男?、速度比較快，而且一般成本偏低，所以說(shuō)一般都選擇MYSQL作為網(wǎng)站的數(shù)據(jù)庫(kù)比較好。

（2）HTML5，隨著H5的發(fā)布，它帶來(lái)了很多的新特性，不僅僅是語(yǔ)法上的變化，還有就是新增了很多語(yǔ)義化的標(biāo)簽，主要是在原來(lái)的基礎(chǔ)上開(kāi)辟了一個(gè)全新的部分，HTML5的使用，可以使頁(yè)碼布局更加簡(jiǎn)潔和清晰，增加了些許用戶(hù)體驗(yàn)。

（3）CSS3，是與HTML5一起出來(lái)的，通過(guò)CSS3可以對(duì)頁(yè)面的布局進(jìn)行樣式的修改，讓頁(yè)面更加的美觀(guān)。CSS3不僅可以對(duì)頁(yè)面進(jìn)行優(yōu)化，可以實(shí)現(xiàn)動(dòng)畫(huà)文字特效、線(xiàn)性漸變、旋轉(zhuǎn)還有縮放、定位和傾斜等，在CSS3中，增加了很多CSS選擇器，而對(duì)于多屏切換則會(huì)用到媒體查詢(xún)，使用多欄布局將頁(yè)面劃分好清晰的布局。用好CSS3在做頁(yè)面效果和特效的時(shí)候節(jié)省很多不必要的步驟。

（4）PHP是一門(mén)萬(wàn)金油的語(yǔ)言，它十分的全面，既可以寫(xiě)前端的代碼，又可以寫(xiě)后端的代碼，PHP在寫(xiě)動(dòng)態(tài)頁(yè)面的時(shí)候比其他的編程語(yǔ)言效率的都高很多，而且PHP對(duì)于編譯以后的代碼還是能夠執(zhí)行，PHP腳本語(yǔ)言運(yùn)行效率比較高、響應(yīng)速度也比較快，PHP在互聯(lián)網(wǎng)上的應(yīng)用很多，算是很主流的一門(mén)語(yǔ)言。

（5）Bootstrap，Bootstrap是一個(gè)免費(fèi)公開(kāi)的并且十分方便的框架。是一個(gè)CSS和HTML響應(yīng)式布局的一個(gè)框架。Bootstrap使用CSS3的Less語(yǔ)言為前端開(kāi)發(fā)工程師提供了寫(xiě)好的HTML和CSS直接使用就行，不需要再為了如何優(yōu)雅的進(jìn)行布局而煩惱。Bootstrap經(jīng)過(guò)免費(fèi)公開(kāi)使用后，開(kāi)發(fā)人員十分的青睞這個(gè)框架，而且Bootstrap在GitHub上一直是一個(gè)很火爆的開(kāi)源項(xiàng)目。

（二）HTML5的優(yōu)勢(shì)

HTML5的出現(xiàn)，豐富了原先的HTML標(biāo)準(zhǔn)。讓頁(yè)面的編寫(xiě)變得更加方便，比如以前用div標(biāo)簽頭部區(qū)域需要先給div起個(gè)class名字，而現(xiàn)在H5就能直接使用新標(biāo)簽就能達(dá)到新標(biāo)簽沒(méi)出來(lái)之前的效果，減少了起名字的困難，簡(jiǎn)化了頁(yè)面。

（三）HTML5的新功能

HTML5的新特性除了上面的以外還有其他的新標(biāo)簽，例如SVG，它是一個(gè)類(lèi)似于矢量圖形的一個(gè)標(biāo)簽，使用它可以保證圖片不會(huì)失真，也可以通過(guò)一些文本編譯器來(lái)進(jìn)行一些處理，如果使用它來(lái)引用矢量圖標(biāo)的話(huà)，可以很完美的適應(yīng)，圖片使用它進(jìn)行嵌套，可以進(jìn)行搜索、壓縮、伸縮、索引等操作。

H5的新特性還有地理定位web worker，它是通過(guò)H5的一個(gè)API來(lái)請(qǐng)求獲取用戶(hù)的地理位置，在請(qǐng)求地理位置的時(shí)候需要跟用戶(hù)確認(rèn)是否允許使用他當(dāng)前的位置，當(dāng)用戶(hù)授權(quán)了以后才能進(jìn)行下一步的操作，而web worker這個(gè)特性是在后臺(tái)運(yùn)行的，它自身可以生成多個(gè)線(xiàn)程，這樣就可以保證頁(yè)面能正常的響應(yīng)。

（四）MySQL數(shù)據(jù)庫(kù)

MYSQL數(shù)據(jù)庫(kù)與其他的大型數(shù)據(jù)庫(kù)根本沒(méi)法比，它跟其他的大型數(shù)據(jù)庫(kù)比起來(lái)缺陷就很明顯了，比如MySQL跟Oracle、DB2、SQL Server比起來(lái)就顯得規(guī)模小，功能有限了。但是它不影響MySQL在個(gè)人和很多公司中的歡迎程度，在很多公司里一些中小型的項(xiàng)目中使用MySQL能夠大大的降低網(wǎng)站的開(kāi)發(fā)成本，因?yàn)镸ySQL是一個(gè)開(kāi)源的項(xiàng)目。

需求分析

項(xiàng)目一般在開(kāi)始前都需要進(jìn)行需求分析，而需求分析的根本原則就是為了了解用戶(hù)的需要跟要求。并且要能夠精確的將用戶(hù)反映出來(lái)的需求進(jìn)行準(zhǔn)確的評(píng)估及數(shù)據(jù)的管理與安全的需求過(guò)程。

（一）系統(tǒng)可行性分析

可行性分析，是在系統(tǒng)調(diào)查的基礎(chǔ)上，對(duì)項(xiàng)目的開(kāi)發(fā)是否可以正常的完成進(jìn)行一次深層次的必要性和可能性進(jìn)行分析研究，本系統(tǒng)分別是從：經(jīng)濟(jì)可行性、技術(shù)可行性、操作可行性這三個(gè)方面進(jìn)行分析。

1.經(jīng)濟(jì)可行性

市場(chǎng)分析：該系統(tǒng)可以對(duì)公司所發(fā)布的商品銷(xiāo)售信息、購(gòu)物者進(jìn)行在線(xiàn)購(gòu)物，滿(mǎn)足了公司對(duì)于廣大銷(xiāo)售公司的需求，只要有購(gòu)物的需求，就會(huì)有相對(duì)于的經(jīng)濟(jì)收益，并且該系統(tǒng)簡(jiǎn)單易懂，所以，系統(tǒng)具有經(jīng)濟(jì)可行性。

2.技術(shù)可行性

所設(shè)計(jì)和實(shí)現(xiàn)的基于HTML5的零食網(wǎng)上售賣(mài)網(wǎng)站是用的phpstorm編寫(xiě)軟件進(jìn)行的編寫(xiě)，借助這個(gè)開(kāi)發(fā)工具和WebStorm編程軟件都是極為方便的。而實(shí)現(xiàn)該系統(tǒng)所使用的技術(shù)有：HTML、CSS、JavaScript、jQuery、Bootstrap、PHP和MYSQL等，這些技術(shù)簡(jiǎn)單易懂，系統(tǒng)能用性高，編寫(xiě)及應(yīng)用方便；在硬件方面，選擇空間越大，配置越高，系統(tǒng)的開(kāi)發(fā)和運(yùn)行就會(huì)更流程，本機(jī)的系統(tǒng)運(yùn)行環(huán)境是采用Microsoft windows7服務(wù)器操作系統(tǒng)，用PHP+MYSQL來(lái)編寫(xiě)后臺(tái)數(shù)據(jù)庫(kù)；客戶(hù)端可以采用常用的任意瀏覽器軟件如火狐、谷歌和ie8版本以上，所以，系統(tǒng)具有技術(shù)可行性。

3.操作可行性

通用的Web瀏覽器使操作難度降低了，按照普通人的使用習(xí)慣進(jìn)行設(shè)計(jì)，讓他們?cè)谑褂帽鞠到y(tǒng)的時(shí)候沒(méi)有操作上的問(wèn)題，很明確的知道這個(gè)模塊是實(shí)現(xiàn)什么功能的，從這個(gè)角度出發(fā)本系統(tǒng)的設(shè)計(jì)方案是可行的。

圖1 本系統(tǒng)業(yè)務(wù)流程

（二）系統(tǒng)功能需求

該系統(tǒng)是為了加強(qiáng)對(duì)用戶(hù)資料和服務(wù)情況的管理進(jìn)行了一個(gè)后臺(tái)系統(tǒng)的開(kāi)發(fā)，后臺(tái)系統(tǒng)能夠?qū)τ脩?hù)的服務(wù)信息跟蹤，掌握店家的服務(wù)情況，收集用戶(hù)的意見(jiàn)，擁有這個(gè)后臺(tái)系統(tǒng)方便管理的系統(tǒng)化、規(guī)范化、自動(dòng)化和智能化。前臺(tái)能夠?qū)崟r(shí)的將數(shù)據(jù)信息展示給用戶(hù)。

本系統(tǒng)業(yè)務(wù)流程圖：

業(yè)務(wù)流程圖是一個(gè)用來(lái)進(jìn)行業(yè)務(wù)邏輯梳理的一個(gè)圖表，它可以很明確的指出業(yè)務(wù)之間的流向，通過(guò)它可以觀(guān)察到業(yè)務(wù)之間進(jìn)行流通時(shí)可能出現(xiàn)的不合理的地方，通過(guò)它可以進(jìn)行業(yè)務(wù)的修正，并且因?yàn)闃I(yè)務(wù)流程圖的流程很簡(jiǎn)單明了，就算不是開(kāi)發(fā)人員也可以很輕易的理解程序中的業(yè)務(wù)邏輯。

本系統(tǒng)的業(yè)務(wù)流程如圖1所示。

系統(tǒng)總體設(shè)計(jì)

主要介紹本系統(tǒng)的設(shè)計(jì)目標(biāo)和系統(tǒng)的整體結(jié)構(gòu)以及數(shù)據(jù)庫(kù)的設(shè)計(jì)。

（一）系統(tǒng)設(shè)計(jì)目標(biāo)

電商網(wǎng)站的主要業(yè)務(wù)流程為背景開(kāi)發(fā)一套網(wǎng)上電商網(wǎng)站系統(tǒng)，商品購(gòu)買(mǎi)系統(tǒng)實(shí)現(xiàn)了分散網(wǎng)絡(luò)環(huán)境下的商品購(gòu)買(mǎi)的計(jì)算機(jī)化、標(biāo)準(zhǔn)化和規(guī)范化，提高了購(gòu)物的效率和質(zhì)量，增強(qiáng)了企業(yè)競(jìng)爭(zhēng)力。系統(tǒng)的投入運(yùn)行可以加快公司內(nèi)部信息的傳遞速度，能實(shí)時(shí)準(zhǔn)確地向決策部門(mén)供給信息，給工作人員提供客戶(hù)掌上也可以購(gòu)買(mǎi)各類(lèi)商品。

（二）結(jié)構(gòu)功能設(shè)計(jì)

按電商網(wǎng)站的設(shè)計(jì)和劃分模塊，是系統(tǒng)研究的核心問(wèn)題，它可以確定整個(gè)電商網(wǎng)站的整體結(jié)構(gòu)和功能模塊的排版，該系統(tǒng)的結(jié)構(gòu)化設(shè)計(jì)思想是從上到下將系統(tǒng)從一個(gè)主支上分出一個(gè)個(gè)子系統(tǒng)，以及將分出來(lái)的子系統(tǒng)再進(jìn)行一次模塊的劃分，被劃分出來(lái)的模塊計(jì)算機(jī)都可以執(zhí)行，能夠當(dāng)成一個(gè)單獨(dú)的程序。電商網(wǎng)站前端頁(yè)面主要是提供用戶(hù)登錄窗口，用戶(hù)通過(guò)PC登錄進(jìn)入系統(tǒng)后可以在線(xiàn)瀏覽商品、商品查詢(xún)、商品資訊、訂單查看等功能的。

（三）系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)是一個(gè)網(wǎng)站必須要具備的一個(gè)因素，如果沒(méi)有數(shù)據(jù)庫(kù)，那龐大的信息就無(wú)法存儲(chǔ)，網(wǎng)站的服務(wù)就會(huì)很單一而不能應(yīng)付多種服務(wù)，而從數(shù)據(jù)庫(kù)出現(xiàn)到現(xiàn)在，數(shù)據(jù)庫(kù)的技術(shù)日趨成熟，所以現(xiàn)在數(shù)據(jù)庫(kù)的存在讓網(wǎng)站的服務(wù)更加好了，對(duì)于數(shù)據(jù)的處理也更加的便捷。

本系統(tǒng)的數(shù)據(jù)庫(kù)設(shè)計(jì)是由MYSQL5.0數(shù)據(jù)庫(kù)支持的，本系統(tǒng)的數(shù)據(jù)結(jié)構(gòu)模型是實(shí)際數(shù)據(jù)模型。

對(duì)于本系統(tǒng)來(lái)說(shuō)，數(shù)據(jù)庫(kù)的設(shè)計(jì)是十分重要的，本系統(tǒng)的一切商品信息，用戶(hù)信息，各種各樣的信息全部都存在一個(gè)數(shù)據(jù)庫(kù)里面，數(shù)據(jù)庫(kù)的設(shè)計(jì)是對(duì)本系統(tǒng)的信息進(jìn)行管理，網(wǎng)站共有一個(gè)數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)的數(shù)據(jù)表分別有用戶(hù)信息表，商品信息表，訂單信息表等。

系統(tǒng)功能實(shí)現(xiàn)

本章主要是介紹了網(wǎng)站的實(shí)現(xiàn)是如何實(shí)現(xiàn)的，功能模塊的實(shí)現(xiàn)，本網(wǎng)站由前臺(tái)頁(yè)面以及后臺(tái)的管理系統(tǒng)組成，其中前臺(tái)的功能模塊大致有注冊(cè)登錄模塊，商品購(gòu)買(mǎi)模塊，個(gè)人信息模塊，而后臺(tái)系統(tǒng)則有管理員登錄模塊，主頁(yè)面管理，商品信息管理等。

（一）軟件界面設(shè)計(jì)

因?yàn)楝F(xiàn)在手機(jī)是人們必不可少的物品，因而在設(shè)計(jì)網(wǎng)站的時(shí)候需要考慮用戶(hù)在手機(jī)上可以進(jìn)行瀏覽網(wǎng)頁(yè)，所以需要對(duì)網(wǎng)站做一個(gè)能適應(yīng)手機(jī)屏幕的一個(gè)需求，考慮手機(jī)屏幕的問(wèn)題所以進(jìn)行的一個(gè)響應(yīng)式的開(kāi)發(fā)，以達(dá)到適應(yīng)手機(jī)屏幕的需求。

（二）前臺(tái)功能實(shí)現(xiàn)

項(xiàng)目中前臺(tái)功能主要有注冊(cè)登錄功能、商品購(gòu)物功能、商品查詢(xún)、個(gè)人中心、商品資訊推送，查看訂單等功能。

1.登錄功能實(shí)現(xiàn)

當(dāng)用戶(hù)需要購(gòu)買(mǎi)商品的時(shí)候需要進(jìn)行登錄操作，因?yàn)椴坏卿浀脑?huà)就不能進(jìn)行購(gòu)買(mǎi)的操作，在用戶(hù)進(jìn)行登錄的時(shí)候，輸入賬號(hào)密碼正確的時(shí)候就可以登錄，如果賬號(hào)或者密碼輸入錯(cuò)誤，則提示用戶(hù)的輸入有誤，請(qǐng)重新輸入。

其實(shí)現(xiàn)登錄功能的關(guān)鍵程序代碼如下：

2.商品購(gòu)買(mǎi)功能實(shí)現(xiàn)

當(dāng)用戶(hù)通過(guò)登錄進(jìn)入網(wǎng)站，可以瀏覽商品信息，然后看上自己喜歡的商品以后進(jìn)行下單，當(dāng)用戶(hù)提交購(gòu)買(mǎi)的商品信息后，服務(wù)器端就可以看到用戶(hù)購(gòu)買(mǎi)的商品信息。

實(shí)現(xiàn)主頁(yè)面功能的關(guān)鍵程序代碼如下所示：

3.商品推送功能實(shí)現(xiàn)

本功能主要是實(shí)現(xiàn)用戶(hù)在網(wǎng)站瀏覽的時(shí)候，通過(guò)左側(cè)的商品資訊推送進(jìn)行查看最新的商品信息，當(dāng)看上自己喜歡的商品以后可以點(diǎn)擊進(jìn)去查看相應(yīng)商品的詳細(xì)信息，如果喜歡可以進(jìn)行購(gòu)買(mǎi)。

實(shí)現(xiàn)主頁(yè)面功能的關(guān)鍵程序代碼如下所示：

4.個(gè)人中心功能實(shí)現(xiàn)

本功能主要是用戶(hù)注冊(cè)登錄后就要以進(jìn)入自己的個(gè)人信息界面，

實(shí)現(xiàn)主頁(yè)面功能的關(guān)鍵程序代碼如下所示：

（三）服務(wù)器端功能實(shí)現(xiàn)

服務(wù)器端主要有管理員登錄功能、后臺(tái)管理主界面功能、商品管理功能。

1.服務(wù)器端登錄實(shí)現(xiàn)

后臺(tái)系統(tǒng)主要是通過(guò)PC端登錄，當(dāng)管理員登入后臺(tái)系統(tǒng)的網(wǎng)站時(shí)，首先輸入管理員賬號(hào)密碼進(jìn)行登錄校驗(yàn)，當(dāng)賬號(hào)密碼正確才能進(jìn)入系統(tǒng)，擁有管理員權(quán)限的人在PC電腦上登錄成功后，可以進(jìn)入后臺(tái)系統(tǒng)進(jìn)行相應(yīng)的權(quán)限管理，可以相應(yīng)的查看錯(cuò)誤報(bào)告，其運(yùn)行效果如下圖2所示。

2.后臺(tái)主界面功能實(shí)現(xiàn)

當(dāng)管理員成功登錄后臺(tái)，主要是使用Bootstrap來(lái)搭建頁(yè)面的整體靜態(tài)結(jié)構(gòu)。

3.商品管理功能實(shí)現(xiàn)

本功能主要實(shí)現(xiàn)商品信息的管理，服務(wù)器端管理員發(fā)布商品信息也可以對(duì)商品信息進(jìn)行修改操作。

在項(xiàng)目的設(shè)計(jì)以及實(shí)現(xiàn)階段完成以后，在上線(xiàn)前需要經(jīng)過(guò)項(xiàng)目的測(cè)試，測(cè)試這一道關(guān)卡是十分重要的，因?yàn)檫@是檢驗(yàn)開(kāi)發(fā)的項(xiàng)目是否合格，能否上線(xiàn)的最后一道程序

（一）測(cè)試目的

軟件測(cè)試的目的便是為了項(xiàng)目最終上線(xiàn)前的最后一道流程，它根據(jù)項(xiàng)目的流程來(lái)進(jìn)行測(cè)試，測(cè)試的最終目標(biāo)還是防止錯(cuò)誤的出現(xiàn)，優(yōu)秀的測(cè)試人員能在項(xiàng)目出現(xiàn)錯(cuò)誤的時(shí)候進(jìn)行分析這個(gè)錯(cuò)誤是如何產(chǎn)生的，能夠幫助開(kāi)發(fā)人員進(jìn)行分析為什么會(huì)出現(xiàn)這樣的錯(cuò)誤，并且能夠給出大致解決方案。

（二）系統(tǒng)測(cè)試原理

測(cè)試的依據(jù)就是根據(jù)前面被測(cè)試的系統(tǒng)的調(diào)查結(jié)果和技術(shù)規(guī)格書(shū)，是針對(duì)整個(gè)項(xiàng)目的功能以及性能來(lái)進(jìn)行綜合測(cè)試與評(píng)估，測(cè)試的原理就是根據(jù)項(xiàng)目的運(yùn)行機(jī)制來(lái)進(jìn)行測(cè)試，而實(shí)際上測(cè)試是根據(jù)在項(xiàng)目運(yùn)行的時(shí)候根據(jù)獲取到的數(shù)據(jù)，進(jìn)行相應(yīng)的對(duì)比來(lái)對(duì)項(xiàng)目的達(dá)標(biāo)與否做一個(gè)判斷。

（三）本系統(tǒng)的功能測(cè)試

本次測(cè)試對(duì)系統(tǒng)的幾個(gè)主要模塊進(jìn)行測(cè)試，分別是：登錄注冊(cè)模塊、商品購(gòu)買(mǎi)、后臺(tái)添加商品功能。

（1）測(cè)試后臺(tái)添加商品功能是否正常。

（2）測(cè)試用戶(hù)注冊(cè)登錄模塊是否正常。

（3）測(cè)試商品購(gòu)買(mǎi)模塊。

（4）小結(jié)，本章節(jié)主要介紹項(xiàng)目完成后，對(duì)項(xiàng)目驗(yàn)收的一個(gè)測(cè)試的流程。為了讓用戶(hù)能夠很好的使用，本次測(cè)試是通過(guò)AJAX與后臺(tái)進(jìn)行交互，進(jìn)而對(duì)項(xiàng)目的幾個(gè)功能進(jìn)行了測(cè)試，最終完成了該頁(yè)面的功能。

圖2 服務(wù)器登錄效果圖

結(jié)論

此次自己所設(shè)計(jì)和編寫(xiě)的基于HTML5的電商網(wǎng)站可以為廣大購(gòu)物者提供了一個(gè)高效且便捷的購(gòu)物平臺(tái)，該項(xiàng)目的主要版塊有：首頁(yè)、用戶(hù)中心、商品購(gòu)買(mǎi)、商品推送、后臺(tái)管理等主要模塊。這些模塊的主要功能有：

（一）首頁(yè)功能

是每個(gè)網(wǎng)站必須要有的一個(gè)模塊，這里可以展示整個(gè)網(wǎng)站部分的精品商品，可以在這里進(jìn)行各種操作。

（二）用戶(hù)中心功能

是用戶(hù)登錄以后，在網(wǎng)站里面瀏覽商品信息，看好以后可以對(duì)自己喜愛(ài)的商品進(jìn)行下單，然后在個(gè)人中心里面可以顯示訂單的詳情，還可以對(duì)自己信息進(jìn)行更改。

（三）商品購(gòu)買(mǎi)功能

是用戶(hù)在看好自己喜歡的商品后進(jìn)行的一個(gè)操作，在這個(gè)模塊里面用戶(hù)可以對(duì)自己購(gòu)物車(chē)中的商品進(jìn)行增加和移除。當(dāng)下單成功后會(huì)生成一個(gè)訂單供用戶(hù)查看。

（四）后臺(tái)模塊功能

則是管理員使用的，這里可以對(duì)整個(gè)網(wǎng)站的用戶(hù)和商品信息進(jìn)行管理。能夠?qū)ι唐愤M(jìn)行增刪改查，對(duì)用戶(hù)的信息進(jìn)行管理。

雖然本系統(tǒng)的基本功能都能夠?qū)崿F(xiàn)，設(shè)計(jì)也達(dá)到了大致的效果，但是還是有一些地方設(shè)計(jì)和功能上還是有些不足：

（1）首頁(yè)的界面布局過(guò)于簡(jiǎn)單，而且東西過(guò)少。

（2）由于使用的是Bootstrap這個(gè)框架，所以有的地方的CSS樣式無(wú)法進(jìn)行修改。

（3）在做用戶(hù)注冊(cè)登錄的時(shí)候?qū)τ谝恍?yàn)證的實(shí)現(xiàn)不是很人性化。下一步是將這些地方進(jìn)行一次優(yōu)化，保證網(wǎng)站對(duì)用戶(hù)十分友好。