HTML5：電商網(wǎng)站設(shè)計與實現(xiàn)

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

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

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

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

緒論

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

（一）課題研究背景

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

（二）本課題目的及意義

隨著互聯(lián)網(wǎng)發(fā)展，在網(wǎng)上開店的潮流已經(jīng)興起，又因為網(wǎng)上購物十分方便，網(wǎng)店銷售在未來必定有長遠(yuǎn)發(fā)展。

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

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

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

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

1.用戶管理中心

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

2.商品資訊

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

3.商品購買

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

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

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

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

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

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

（4）數(shù)據(jù)的交互通過AJAX來實現(xiàn)，將后臺的數(shù)據(jù)顯示到前臺頁面上。

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

（6）整個電商項目全部跑通。

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

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

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

（一）開發(fā)工具

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

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

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

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

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

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

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

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

（三）HTML5的新功能

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

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

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

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

需求分析

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

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

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

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

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

2.技術(shù)可行性

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

3.操作可行性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（二）前臺功能實現(xiàn)

項目中前臺功能主要有注冊登錄功能、商品購物功能、商品查詢、個人中心、商品資訊推送，查看訂單等功能。

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

當(dāng)用戶需要購買商品的時候需要進(jìn)行登錄操作，因為不登錄的話就不能進(jìn)行購買的操作，在用戶進(jìn)行登錄的時候，輸入賬號密碼正確的時候就可以登錄，如果賬號或者密碼輸入錯誤，則提示用戶的輸入有誤，請重新輸入。

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

2.商品購買功能實現(xiàn)

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

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

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

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

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

4.個人中心功能實現(xiàn)

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

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

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

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

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

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

2.后臺主界面功能實現(xiàn)

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

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

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

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

（一）測試目的

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

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

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

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

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

（1）測試后臺添加商品功能是否正常。

（2）測試用戶注冊登錄模塊是否正常。

（3）測試商品購買模塊。

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

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

結(jié)論

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

（一）首頁功能

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

（二）用戶中心功能

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

（三）商品購買功能

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

（四）后臺模塊功能

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

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

（1）首頁的界面布局過于簡單，而且東西過少。

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

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