電子商城-網(wǎng)上購物系統(tǒng)

1、<p>　　本科生畢業(yè)論文(設計)</p><p>　　題 目： 電子商城-網(wǎng)上購物系統(tǒng) </p><p>　　學生姓名： 彭曉紅 </p><p>　　學 號： 201317030231 </p><p>　　專業(yè)班級： 網(wǎng)絡工程13102班 </

2、p><p>　　指導教師： 丁德紅 </p><p>　　完成時間： 2017 年 4 月 </p><p><b>　　目 錄</b></p><p><b>　　目 錄I</b></p><p><b

3、>　　摘 要IV</b></p><p>　　AbstractIV</p><p><b>　　引 言1</b></p><p><b>　　第一章 緒 論2</b></p><p>　　1.1 網(wǎng)上購物系統(tǒng)的概念2</p><p>　　1.2 網(wǎng)

4、上購物系統(tǒng)與電子商務的聯(lián)系與區(qū)別2</p><p>　　第二章 主要開發(fā)技術介紹3</p><p>　　2.1 開發(fā)工具3</p><p>　　2.2 開發(fā)語言3</p><p>　　2.3 設計模式3</p><p>　　2.4 后端框架3</p><p>　　2.5 前端框架4

5、</p><p>　　2.6 數(shù)據(jù)交互技術4</p><p>　　2.7 響應式設計4</p><p>　　2.8 即時通訊5</p><p>　　第三章 需求與可行性分析6</p><p>　　3.1 功能需求6</p><p>　　3.2 性能分析7</p><

6、;p>　　3.3 可行性分析8</p><p>　　第四章 系統(tǒng)總體設計9</p><p>　　4.1 數(shù)據(jù)庫設計9</p><p>　　4.2 功能模塊設計16</p><p>　　4.3 網(wǎng)站流程設計17</p><p>　　第五章 系統(tǒng)詳細設計與實現(xiàn)18</p><p>

7、　　5.1 為用戶提供主頁18</p><p>　　5.2 用戶注冊頁面19</p><p>　　5.3 用戶登陸頁面21</p><p>　　5.4 找回密碼頁面22</p><p>　　5.5 個人信息頁面23</p><p>　　5.6 商品列表頁面25</p><p>　　5

8、.7 商品詳情頁面26</p><p>　　5.8 店鋪展示頁面30</p><p>　　5.9 申請成為賣家31</p><p>　　5.10 賣家管理中心32</p><p>　　5.11 添加商品32</p><p>　　5.12 我的關注頁面34</p><p>　　5.13

9、 我的收藏頁面34</p><p>　　5.14 我的購物車頁面34</p><p>　　5.15 我的訂單頁面35</p><p>　　5.16 管理員登陸界面36</p><p>　　5.17 超級管理系統(tǒng)界面37</p><p>　　5.18 購物管理系統(tǒng)界面38</p><p&g

10、t;<b>　　第六章 總結(jié)42</b></p><p>　　6.1 系統(tǒng)優(yōu)點42</p><p>　　6.2 存在的不足42</p><p>　　6.3 改進的方案42</p><p><b>　　結(jié)束語43</b></p><p><b>　　參考文獻

11、44</b></p><p><b>　　致 謝45</b></p><p><b>　　附 錄46</b></p><p><b>　　摘 要</b></p><p>　　在電子商務日益繁榮的今天，網(wǎng)上購物系統(tǒng)承擔著極其重要的作用，因此設計一個安全、高效、穩(wěn)

12、定、具有良好用戶體驗的網(wǎng)上購物系統(tǒng)是值得不斷探討的一個主題。本網(wǎng)上購物系統(tǒng)以Windows操作系統(tǒng)作為開發(fā)平臺，使用JetBrains公司的集成開發(fā)工具IntelliJ IDEA實現(xiàn)。后端以Java的SSH（Spring、Struts2和Hibernate）三大框架作為核心架構(gòu)并采用MVC設計模式，前端以Bootstrap作為主要框架。系統(tǒng)使用Oracle數(shù)據(jù)庫作為數(shù)據(jù)庫管理軟件。系統(tǒng)中大量使用Ajax技術用于前后端信息交互，以便優(yōu)化用

13、戶體驗，在后臺對用戶數(shù)據(jù)進行檢驗，提高了系統(tǒng)安全性，為了進行實時交互，還采用了HTML5的WebSocket技術。系統(tǒng)為用戶提供了登陸、注冊、找回密碼、修改個人信息、商品分類、搜索商品、收藏商品、購買商品、關注店鋪、加入購物車、申請退貨、余額充值、申請成為賣家、新建店鋪、發(fā)布商品等功能，系統(tǒng)還為管理人員提供了修改密碼、對用戶提交的申請進行審核等功能。</p><p>　　關鍵詞：Java,SSH,Spring,S

14、truts2,Hibernate,Bootstrap,Ajax,WebSocket,MVC</p><p><b>　　Abstract</b></p><p>　　Today,E-commerce is more and more booming.The online shopping system is playing an extremely important

15、 role,so design an safe,efficient,stable Online shopping system with a good experience is a subject that worth exploring.This online shopping system is based on the Windows operating system platform,and it was developed

16、by using JetBrains's integrated development tool IntelliJ IDEA.In posterior system,Java's three framework SSH (Spring, Struts2 and Hibernate) was used as the core framework and M</p><p>　　Keywords:Ja

17、va,SSH,Spring,Struts2,Hibernate,Bootstrap,AJAX,WebSocket,MVC</p><p><b>　　引 言</b></p><p>　　購物作為人類生活中不可或缺的一部分，進入互聯(lián)網(wǎng)時代后，隨著網(wǎng)絡技術的不斷發(fā)展進步，各種移動智能終端快速涌現(xiàn)[1]，網(wǎng)民數(shù)量的不斷增長，網(wǎng)絡與人們的生活日益緊密，人們對購物提出了更高的要

18、求，他們不再滿足于不得不在特定場所（比如商場、小賣部等）進行購物的現(xiàn)狀，網(wǎng)上購物系統(tǒng)可以解決這些問題。通過網(wǎng)上購物系統(tǒng)，人們只要手持一部智能終端，就能隨時隨地購物。隨著電子商務的不斷成熟，網(wǎng)上的商品也與日俱增，幾乎可以滿足所有用戶的購物需求，絕大多數(shù)人們可以在網(wǎng)上購買到想要的商品。購物系統(tǒng)給人類的生活帶來了巨大的便利[2]。</p><p><b>　　第一章 緒 論</b></p&g

19、t;<p>　　1.1 網(wǎng)上購物系統(tǒng)的概念</p><p>　　網(wǎng)上購物系統(tǒng)又稱為在線商城、網(wǎng)絡商城、網(wǎng)上商城，是指運行在網(wǎng)絡上的并且人們可以通過其進行購物行為的系統(tǒng)[3]。網(wǎng)上購物系統(tǒng)的英文是Online Shopping System，最早被Lap公司提出，當時英國在線購物剛剛起步，這一詞語后來被引入中國，也就是現(xiàn)在的網(wǎng)上購物系統(tǒng)。</p><p>　　1.2 網(wǎng)上購物系

20、統(tǒng)與電子商務的聯(lián)系與區(qū)別</p><p>　　電子商務的概念是在1996年被提出的，是指通過網(wǎng)絡進行商務交易。狹義上的電子商務是指主要利用因特網(wǎng)進行商務活動，從廣義上講一切通過各種電子手段進行的商務交易都可以稱之為電子商務。他們都有一個共同點，就是不是面對面的交易活動，這也是其區(qū)別于傳統(tǒng)商務活動的地方[4]。</p><p>　　根據(jù)電子商務的概念，網(wǎng)上購物是一種典型并常見的電子商務行為，

21、網(wǎng)上購物系統(tǒng)作為網(wǎng)上購物行為中被廣泛使用的一種重要工具和手段，在電子商務中充當著特殊且重要的角色。同時，人們網(wǎng)上購物的需求成就了網(wǎng)上購物系統(tǒng)的誕生與發(fā)展[5]。</p><p>　　第二章 主要開發(fā)技術介紹</p><p><b>　　2.1 開發(fā)工具</b></p><p>　　IntelliJ IDEA：IntelliJ IDEA是JetB

22、rains公司推出的一款集成開發(fā)工具，主要用于Java開發(fā)，由于其在代碼智能助手、代碼自動提示、重構(gòu)、J2EE支持、各類版本工具、單元測試、代碼分析等方面的功能非常優(yōu)秀，獲得業(yè)界的高度好評，被公認為最好的java開發(fā)工具之一。</p><p><b>　　2.2 開發(fā)語言</b></p><p>　　Java 是由Sun Microsystems公司于1995年5月推

23、出的高級程序設計語言。Java具有易于學習、強制面向?qū)ο?、分布式、安全健壯、體系結(jié)構(gòu)中立、原生支持多線程等優(yōu)良特性而被許多程序員青睞[6]。Java的技術體系平臺只要包括Java SE、Java ME、Java EE。本系統(tǒng)使用的是Java EE平臺[7]。現(xiàn)階段，Java EE平臺被在許多企業(yè)使用于服務器端開發(fā)，占據(jù)著自己的一片天地。</p><p><b>　　2.3 設計模式</b>&

24、lt;/p><p>　　B/S模式：B/S模式即“流量器/服務器”模式，區(qū)別于C/S（“客戶端/服務器”）模式，對于用戶而言，它的好處就是只需要通過瀏覽器就可以與服務器進行交互，不需要額外安裝客戶端程序[8]。它的不足是，與C/S相比，安全性和功能的完備性較差，它的客戶端開發(fā)是基于瀏覽器的，存在限制，而C/S的客戶端開發(fā)是專門為某些服務量身定制的，更加具有多樣性。</p><p>　　MVC的

25、英文全稱是Model View Controller，即模型-視圖-控制器[9]。就是把一個應用程序設計為模型、視圖和控制器三層，模型層封裝數(shù)據(jù)和業(yè)務處理邏輯，視圖層實現(xiàn)信息顯示，控制層接收來自用戶的操作，調(diào)用模型層響應對應的視圖組件。這樣做的好處是可以實現(xiàn)業(yè)務代碼的重用，并且層次分明，便于查錯和修改。本系統(tǒng)中使用的Struts2框架就是該模式的典型體現(xiàn)[10]。</p><p><b>　　2.4 后

26、端框架</b></p><p>　　Spring是一個開源的輕量級框架，基于Spring開發(fā)的應用中的對象可以不依賴于Spring的API。Spring還是一個反轉(zhuǎn)控制（IOC）和面向切面編程（AOP）的一站式容器，它可以包含和管理應用對象的聲明周期，整合各種企業(yè)應用的第三方類庫，例如本系統(tǒng)中使用的Struts框架和Hibernate框架就是使用Spring進行整合的，稱之為SSH架構(gòu)[11]。<

27、;/p><p>　　Struts2是一個基于MVC設計模式的Web應用框架[12]，它使用Filter作為控制器，可以很方便地對所有資源進行控制訪問，并且提供了開發(fā)過程中一些常見問題的解決方案，例如：對來自用戶輸入數(shù)據(jù)進行合法性驗證，統(tǒng)一的布局，可擴展性、國際化和本地化、表單的重復提交、文件的上傳下載等等。</p><p>　　Hibernate是Java領域的一個非常成熟持久化框架，它通過對

28、象關系映射實現(xiàn)對象的持久化，內(nèi)部實現(xiàn)為對JDBC進行了非常輕量級的封裝[13]。通過這個框架，程序員可以通過面向?qū)ο蟮姆绞綄崿F(xiàn)對關系型數(shù)據(jù)庫的操作，消除了那些針對特定數(shù)據(jù)庫廠商的SQL代碼。</p><p><b>　　2.5 前端框架</b></p><p>　　Bootstrap 是一個用于快速開發(fā) Web 應用程序和網(wǎng)站的前端框架，目前非常受歡迎[14]。它基于

29、HTML、CSS和JavaScript提供了大量現(xiàn)代Web項目開發(fā)中常用的組件，并且整個框架是基于模塊的，使得更為簡潔靈活，使用者可以不需要知道太多的HTML和CSS知識就可以構(gòu)建一個網(wǎng)站。</p><p>　　2.6 數(shù)據(jù)交互技術</p><p>　　Ajax即異步的JavaScript和XML，是一種前后端信息交互技術，它可以在不刷新整個頁面的情況下，對網(wǎng)頁的某個部分進行更新。利用好這

30、項技術可以提升用戶體驗，有些情況下還可以減輕服務器壓力[15]。例如：表單驗證、搜索框提示、圖片瀑布流等等。</p><p><b>　　2.7 響應式設計</b></p><p>　　所謂響應式網(wǎng)站布局就是指頁面可以根據(jù)用戶行為或設備環(huán)境自動調(diào)整布局，使用這種設計理念可以達到更好的體驗效果，例如：一個頁面包含30張圖片，在電腦瀏覽器上面可以清晰的展示，在不改變頁面布

31、局的情況下如果通過手機的瀏覽器打開就可能因為圖片太小而看不清晰，通過響應式布局設計可以使頁面通過手機的瀏覽器打開時調(diào)整布局，每行顯示更少的圖片，達到簡潔清晰的效果[16]。</p><p><b>　　2.8 即時通訊</b></p><p>　　WebSocket是HTML5開始提供的一種基于 TCP 連接實現(xiàn)瀏覽器與服務器全雙工通訊的協(xié)議[17]。通常，瀏覽器使用

32、HTTP協(xié)議向服務器發(fā)送請求，但是這種通訊方式是單向的，服務器只有在收到瀏覽器的請求時才會根據(jù)這些請求進行對應處理并把處理的結(jié)果響應給瀏覽器，服務器不能主動向瀏覽器傳輸信息。而在許多情況下，這種需求是存在的，例如：股票、證券等實時數(shù)據(jù)的更新，在用戶沒有任何操作時向網(wǎng)頁推送廣告或新聞、在網(wǎng)頁上實時聊天等等。在WebSocket之前，也有許多的技術能夠?qū)崿F(xiàn)這種需求，比如輪詢(polling)、Comet、flash中的socket和xmls

33、ocket等等，但是這些技術都存在一些缺陷。輪詢指瀏覽器每隔特定時間（比如1秒）向服務器發(fā)送http請求，以便獲得最新數(shù)據(jù)來更新頁面，這種方式請求頭很長，而且有效數(shù)據(jù)少，浪費帶寬，需要不斷訪問服務器，增加了服務器壓力。Comet技術比輪詢更有優(yōu)勢，基于HTTP長連接實現(xiàn)，不需要瀏覽器顯示發(fā)送請求，服務器會主動通過異步的方式推送數(shù)據(jù)到服務器，但是這種方式對服務器有要求，并且效率不高。使用flash可以完全實現(xiàn)該需求，但是瀏覽器需要安裝f&

34、lt;/p><p>　　第三章 需求與可行性分析</p><p>　　需求分析指明了要求完成的任務，為任務的實現(xiàn)者明確地提出了工作的方向和目標。在一個項目實際操作之前，進行詳細的需求分析，是十分重要的一個環(huán)節(jié)，如果沒有這一步，可能因為需求不明確而導致某些需求未給予實現(xiàn)或者實現(xiàn)不符合需求。通過需求分析可以體現(xiàn)項目的規(guī)模、實現(xiàn)難度以及需要的資源（包括人力和物力資源），從而在工作開始之前對需要的資源

35、進行預算和準備?？尚行苑治鍪窃谛枨蠓治龅幕A之上的，只有在確定需求之后才能分析出這些需求是否能夠?qū)崿F(xiàn)。如果沒有進行可行性分析，可能出現(xiàn)工程在實現(xiàn)部分功能之后由于某些需求無法實現(xiàn)從而導致整個工程無法實現(xiàn)造成一定損失的情況?？尚行苑治鲂枰紤]的情況很多，除上面提到的之外，還包括法律可行性、社會可行性、經(jīng)濟可行性等等。</p><p><b>　　3.1 功能需求</b></p>&

36、lt;p>　　購物系統(tǒng)要求采用B/S模式實現(xiàn)，用戶可以通過瀏覽器方便地對服務器進行訪問，而不需要經(jīng)過安裝客戶端的繁瑣過程。購物系統(tǒng)的用戶按角色分為游客、會員、賣家和管理員，游客、會員和賣家是層層遞進的關系，會員具備游客能實現(xiàn)的全部行為，賣家具有買家能實現(xiàn)的全部行為。游客能夠查看和查詢商品信息，并且可以注冊購物系統(tǒng)，成為會員，會員主要作為商品的消費者，賣家是商品的提供者，而管理員對會員的行為進行管理。對于會員訪問的頁面，要求實現(xiàn)響應

37、式布局，在不同大小的窗口中對布局進行調(diào)整，以便在不同設備上頁面都能達到較好的顯示效果。</p><p>　　3.1.1 為非管理員用戶提供的功能</p><p>　　游客可以訪問購物系統(tǒng)的主頁并瀏覽其中的商品信息，但是許多行為受到限制。游客成功注冊購物系統(tǒng)后就具備會員的一切行為，會員可以體驗購物系統(tǒng)提供的更多的功能，例如查看自己的個人信息，包括昵稱、性別、默認收貨地址、手機號和余額等，并

38、且可以對自己的這些信息進行修改。會員還可以根據(jù)商品的類別、商品的名稱和商品所屬的店鋪名稱搜索自己需要的商品，并查看商品詳情，關注自己喜歡的店鋪，收藏心儀的商品，購買商品或把商品加入購物車。</p><p>　　會員可以申請成為賣家，申請成為賣家需要提供更多的個人信息，這些信息會被管理員看到，管理員會對這些信息進行審核，只有當管理員確定這些信息的合法性并同意通過審核之后，申請者才能成為賣家。賣家具有創(chuàng)建店鋪，并向店

39、鋪中發(fā)布商品的功能，發(fā)布的商品也必須首先經(jīng)過管理員審核通過之后才能被用戶看到和購買。</p><p>　　3.1.2 為管理員用戶提供的功能</p><p>　　購物系統(tǒng)有兩種管理員角色，分別是普通管理員和超級管理員，普通管理員的職責是對買家和賣家的操作行為進行控制，維護購物系統(tǒng)的良好環(huán)境，保障消費者權(quán)益，防止不良用戶非法注冊并發(fā)布虛假不合格商品。超級管理員一般只設置一個，是這個系統(tǒng)的答

40、Boss，普通管理員都是他的員工，超級管理員可以對普通管理員的信息進行增刪改查，對整個系統(tǒng)進行宏觀的控制。</p><p><b>　　3.2 性能分析</b></p><p>　　對于購物系統(tǒng)而言，從架構(gòu)角度考慮，不使用框架，直接使用方法實現(xiàn)功能，性能會比較好，但是開發(fā)效率會降低，開發(fā)難度也會加大，要求程序員對技術的掌握程度更高。對于現(xiàn)在的處理器來說，使用優(yōu)良的框架

41、進行架構(gòu)，性能影響不大。良好的代碼能夠使購物系統(tǒng)在相同硬件基礎的條件下，具有更高的并發(fā)和數(shù)據(jù)處理能力。本系統(tǒng)中使用的是一些比較優(yōu)秀和常用的框架，在一定程度上提高了開發(fā)效率，同時也保證了性能。性能分析考慮的方面很多，除了上面提到的之外，包括以下幾個方面。</p><p>　　3.2.1 功能的完整性</p><p>　　前面以購物系統(tǒng)的使用者為切入點，對系統(tǒng)的功能做了比較詳細的需求分析，這些

42、功能涵蓋了一個購物系統(tǒng)必須具備的基本功能，并在此基礎上進行了擴展，總體來說，這個系統(tǒng)的功能還是比較完整和豐富的。</p><p>　　3.2.2 數(shù)據(jù)庫的安全性</p><p>　　系統(tǒng)使用了Oracle數(shù)據(jù)庫對數(shù)據(jù)進行存儲和管理，并通過持久化框架Hibernate對數(shù)據(jù)庫進行操作，使用Spring框架對Hibernate框架進行整合，管理Hibernate的sessionFactory，

43、配置聲明式事務和事務切入點，實現(xiàn)事務處理，保證了數(shù)據(jù)的一致性。在Hibernate中使用c3p0數(shù)據(jù)源管理Java程序與數(shù)據(jù)庫的連接，在整體上提高了操作數(shù)據(jù)庫的效率。在對數(shù)據(jù)庫進行操作之前進行了權(quán)限的檢驗和數(shù)據(jù)的校驗，防止對數(shù)據(jù)的非法操作和修改。</p><p>　　3.2.3 軟件的可維護和可擴展性</p><p>　　系統(tǒng)中使用的Spring框架是輕量級的，使用該框架開發(fā)的應用可以不依

44、賴于該框架的API，也就是說是松耦合的，更易于維護和擴展。同時，Spring框架是一個容器，可以整合第三方框架，很好地實現(xiàn)了擴展。在Struts2中，可以對控制用戶訪問的攔截器進行自由配置，也可以根據(jù)需求自定義攔截器，具有很好的靈活性。在后臺系統(tǒng)中，所有使用的框架都使用配置文件的方式實現(xiàn)了軟編碼。這樣的好處是，某些情況下，需要對程序進行調(diào)整，可以通過修改配置文件而不必修改原代碼實現(xiàn)。</p><p>　　3.2.

45、4 程序的可移植性</p><p>　　Hibernate框架了使用配置文件的方式，實現(xiàn)了數(shù)據(jù)的可移植性。Java是一門跨平臺語言，使用Java開發(fā)的程序可以運行在實現(xiàn)對應平臺的JVM上，實現(xiàn)了整個系統(tǒng)的可移植性。使用Windows系統(tǒng)開發(fā)的程序可以在不對原碼進行任何修改的情況下部署到以Linux為操作系統(tǒng)的服務器上。</p><p><b>　　3.3 可行性分析</b&

46、gt;</p><p>　　3.3.1 社會可行性分析</p><p>　　網(wǎng)上購物系統(tǒng)是現(xiàn)代比較流行的一種程序，它的出現(xiàn)給人們的生活帶來了方便，也在一定程度上推動了經(jīng)濟的發(fā)展，促進了社會的進步。網(wǎng)上購物系統(tǒng)是網(wǎng)上購物需求的產(chǎn)物，也是網(wǎng)上購物的一種實現(xiàn)途徑。網(wǎng)上購物的流行促進了人們的消費，以一種新的模式與實體經(jīng)濟進行融合，顯示出強大的生命力。</p><p>　　

47、3.3.2 經(jīng)濟可行性分析</p><p>　　使用網(wǎng)上購物系統(tǒng)創(chuàng)建一個網(wǎng)上商城的成本包括開發(fā)成本、租用或購買服務器成本、維護成本等等，這里只對網(wǎng)上購物系統(tǒng)的設計與開發(fā)進行介紹，只涉及到開發(fā)成本，開發(fā)成本的高低與購物系統(tǒng)的復雜度有直接關系。</p><p>　　3.3.3 技術可行性分析</p><p>　　系統(tǒng)為B/S模式，通常把瀏覽器端的開發(fā)稱之為前端開發(fā)，

48、把服務器端的開發(fā)稱之為服務器端開發(fā)。服務器端可以通過JAVAEE平臺實現(xiàn)，使用Spring框架管理對象，使用Struts2框架處理請求，使用hibernate框架持久化數(shù)據(jù)。前端可以通過HTML、CSS和JavaScript技術及基于這些技術的框架BootStrap實現(xiàn)。</p><p>　　第四章 系統(tǒng)總體設計</p><p>　　從總體角度對系統(tǒng)進行設計，大處著眼，從形成對整個系統(tǒng)的一

49、個宏觀上的認識，再由粗入細，小處著手，完成對整個系統(tǒng)的設計。這里從數(shù)據(jù)庫設計、功能模塊設計和流程設計三個方面進行介紹[18]。</p><p><b>　　4.1 數(shù)據(jù)庫設計</b></p><p>　　數(shù)據(jù)是系統(tǒng)中最為寶貴的資源，在關系型數(shù)據(jù)庫中，數(shù)據(jù)通過記錄的形式保存在表中，對于復雜的數(shù)據(jù)，數(shù)據(jù)之間是存在某些關系的，通常體現(xiàn)在表與表之間的關系，處理好這些關系，有助

50、于提高操作數(shù)據(jù)的效率，同時也讓人容易理解，一目了然。</p><p>　　4.2.1 概念結(jié)構(gòu)設計</p><p>　　概念結(jié)構(gòu)設計是對現(xiàn)實中的事物的屬性與關系進行分析，也是對信息的第一層提取和總結(jié)，為之后把其轉(zhuǎn)化為可以通過數(shù)據(jù)庫管理系統(tǒng)進行操作的數(shù)據(jù)表奠定基礎。通常把這種抽象的事務稱之為實體，通過E-R圖的方式可以清楚地展示實體之間的關系。</p><p>　　

51、下面是系統(tǒng)分析過程中的部分E-R圖，如圖4.1所示，清楚地展示了管理員、買家、賣家、店鋪、商品等實體之間的關系。與現(xiàn)實生活相似，一個會員實體具有昵稱、性別、電話、頭像、余額等屬性，賣家也是會員，所以會員包括賣家，會員必須提供相關身份證明并通過管理員才能成為賣家，賣家具備創(chuàng)建店鋪的行為，一個店鋪可以存放若干商品，商品需要被管理員審核通過才能參與交易，一類商品可以使用多個參數(shù)、多張圖片進行描述，一類商品可以有不同的規(guī)格，每種規(guī)格可以有不同的

52、參數(shù)。</p><p>　　圖4.1 主要實體間關系</p><p>　　圖4.2中描述了商品實體間的聯(lián)系，在現(xiàn)實中，我們經(jīng)常把具有相同特征或功能的某些事物抽象成一個類，在類的基礎上，還可以進行抽象，形成一個更大范圍的類，于是類便有了層次結(jié)構(gòu)。例如：一頭豬和一頭牛，它們都是哺乳動物，一條蛇和一條鱷魚，它們都是爬行動物，哺乳動物和爬行動物都是動物，動物和植物都是生物。這里對商品進行了分類，把

53、一個大的類別劃分為若干個中等的類別，再把每個中等的類別劃分為若干個小的類別。</p><p>　　圖4.2 商品類別實體關系</p><p>　　圖4.3中同樣按照分類的思想描述了省市區(qū)之間的聯(lián)系，一個省包含了多個市、一個市包含了多個區(qū)。省市區(qū)都用來表示一個地址范圍，且代表的范圍越來越小。分類的好處是便于對類中的個體進行查找和管理。</p><p>　　圖4.3 省

54、市區(qū)實體間關系</p><p>　　4.2.2 實體與數(shù)據(jù)表</p><p>　　在實際開發(fā)中，實體需要進行進一步抽象，轉(zhuǎn)化為數(shù)據(jù)表，存儲在數(shù)據(jù)庫中，以便通過程序代碼進行操作。在Java中，通常使用一個類對應數(shù)據(jù)庫中的一個表，使用一個對象對應數(shù)據(jù)庫中一條記錄，使用屬性代表數(shù)據(jù)庫中的字段。下面的表4.1-表4.21描述了實體與數(shù)據(jù)表之間的對應關系。</p><p>

55、　　表4.1 超級管理員資料數(shù)據(jù)表-ADMIN_SUPER</p><p>　　表4.2 普通管理員資料數(shù)據(jù)表-ADMIN</p><p>　　表4.3 會員資料數(shù)據(jù)表-USERS</p><p>　　表4.4 賣家資料數(shù)據(jù)表-SELLERS</p><p>　　表4.5 店鋪資料數(shù)據(jù)表-SHOPS</p><p>　

56、　表4.6 商品資料數(shù)據(jù)表-GOODS</p><p>　　表4.7 商品詳情資料數(shù)據(jù)表-GOODS_DESC</p><p>　　表4.8 商品參數(shù)資料數(shù)據(jù)表-GOODS_PARA</p><p>　　表4.9 商品規(guī)格資料數(shù)據(jù)表-GOODS_NORM</p><p>　　表4.10 規(guī)格參數(shù)資料數(shù)據(jù)表-NORM_VALUE</p&g

57、t;<p>　　表4.11 退貨請求資料數(shù)據(jù)表-RETURNGOODS</p><p>　　表4.12 關注資料數(shù)據(jù)表-USERS_ATTEN</p><p>　　表4.13 收藏資料數(shù)據(jù)表-USERS_COLLECT</p><p>　　表4.14 購物車資料數(shù)據(jù)表-USERS_CART</p><p>　　表4.15 訂單資

58、料數(shù)據(jù)表-USERS_ORDER</p><p>　　表4.16 省名稱資料數(shù)據(jù)表-ADDR_PROVINCE</p><p>　　表4.17 城市名稱資料數(shù)據(jù)表-ADDR_CITY</p><p>　　表4.18 地區(qū)名稱資料數(shù)據(jù)表-ADDR_AREA</p><p>　　表4.19 商品大類別資料數(shù)據(jù)表-CATE_A</p>

59、<p>　　表4.20 商品中類別資料數(shù)據(jù)表-CATE_B</p><p>　　表4.21 商品小類別資料數(shù)據(jù)表-CATE_C</p><p>　　4.2 功能模塊設計</p><p>　　系統(tǒng)主要包含網(wǎng)上購物系統(tǒng)和網(wǎng)上購物管理平臺兩個模塊。網(wǎng)上購物系統(tǒng)是面向網(wǎng)絡上使用該購物系統(tǒng)進行購物和發(fā)布商品的用戶的，在此基礎上的購物管理平臺是針對系統(tǒng)擁有者的。&l

60、t;/p><p>　　4.4.1 網(wǎng)上購物系統(tǒng)功能模塊</p><p>　　在圖4.4中比較清晰地列出了網(wǎng)絡購物系統(tǒng)下主要的功能模塊，這些功能模塊的具體實現(xiàn)將在下一章進行介紹。</p><p>　　圖4.4 網(wǎng)絡管理系統(tǒng)功能模塊圖</p><p>　　4.4.2 網(wǎng)上購物管理系統(tǒng)功能模</p><p>　　如圖4.5所

61、示，網(wǎng)上購物管理系統(tǒng)的主要功能模塊包括登陸、注銷、修改密碼、審核賣家和商品和管理管理員。</p><p>　　圖4.5 管理平臺功能模塊圖</p><p>　　4.3 網(wǎng)站流程設計</p><p>　　下圖4.6描述了該系統(tǒng)前臺基本流程圖，當進入本站主頁后，用戶可以瀏覽本站商品，或者登陸本站購買商品、關注店鋪、收藏商品、加入購物車，沒有賬號的用戶可以進行注冊成為本系

62、統(tǒng)會員，會員如果想要發(fā)布商品可以提交申請信息供管理員審核，審核通過后就是本系統(tǒng)的賣家會員了，賣家發(fā)布的商品也是要經(jīng)過管理員審核的，不然是無法被其他會員購買的。管理員也需要登陸管理平臺后才能對會員或者管理員進行管理。</p><p>　　圖4.6 系統(tǒng)前臺基本流程圖</p><p>　　第五章 系統(tǒng)詳細設計與實現(xiàn)</p><p>　　5.1 為用戶提供主頁</p

63、><p>　　主頁是一個網(wǎng)站的門面。如圖5.1所示，顯示了系統(tǒng)主頁，主頁簡潔方便，導航條上列出了登陸、注冊、我的關注、我的收藏、我的訂單、登出等連接，這些都是用戶最常用的。主頁上提供了搜索框，用戶可以使用它快速地找到想要的商品。主頁上的商品欄中列出了最新發(fā)布的商品供用戶選擇。在主頁的最后列出了商品的類別，如果用戶想查找某一類別的商品就可以用到它。</p><p><b>　　圖5.1

64、 主頁界面</b></p><p>　　主頁設計時使用了Bootstrap框架的響應式布局模塊，頁面能夠自適應屏幕，當使用手機瀏覽器打開主頁是，界面如圖5.2所示。導航欄會自動折疊，在右上角顯示折疊欄，點擊該折疊欄，導航欄中的內(nèi)容就能展開了。原來在在電腦瀏覽器中一行顯示六張圖片，在這里每行只顯示兩張圖片，看起來更加清晰精簡。</p><p>　　圖5.2 移動端主頁</p

65、><p>　　5.2 用戶注冊頁面</p><p>　　點擊主頁中的注冊按鈕或者直接鍵入注冊網(wǎng)址就進入了注冊頁面。注冊頁面提供注冊功能，其實現(xiàn)使用了AJAX技術，該技術主要用于在不提交表單的情況下檢測昵稱是否已經(jīng)被注冊和實現(xiàn)省、市、區(qū)三級聯(lián)動。同時，對于輸入的字段，使用JQuery進行了格式校驗。如果填寫的信息不合法或者格式錯誤，注冊按鈕是不能使用的。除此之外，該界面模擬了使用手機獲取驗證碼驗

66、證功能，由于發(fā)送短信需要購買接口，所以這里只進行了模擬。界面如圖5.3所示。</p><p><b>　　圖5.3 注冊頁面</b></p><p><b>　　部分代碼：</b></p><p>　　//前端格式校驗時獲取輸入文本字節(jié)數(shù)的函數(shù)：</p><p>　　function getByte

67、Num(str) {</p><p>　　var total = 0;</p><p>　　var charCode;</p><p>　　for (var i = 0; i < str.length; i++) {</p><p>　　charCode = str.charCodeAt(i);</p><p>

68、　　if (charCode <= 0x007f) {</p><p>　　total += 1;</p><p>　　} else if (charCode <= 0x07ff) {</p><p>　　total += 2;</p><p>　　} else if (charCode <= 0xffff) {</p

69、><p>　　total += 3;</p><p><b>　　} else {</b></p><p>　　total += 4;</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　

70、　return total;</p><p><b>　　}</b></p><p>　　//當輸入長度過長時禁止輸入函數(shù)：</p><p>　　function srzs(that, num) {</p><p>　　var value = that.val().trim();</p><p>

71、　　while (getByteNum(value) > num) {</p><p>　　value = value.substr(0, value.length - 1);</p><p>　　that.val(value);</p><p><b>　　}</b></p><p><b>　　}&l

72、t;/b></p><p>　　//后端校驗昵稱是否已經(jīng)占用的代碼</p><p>　　public String verifyNick() {</p><p>　　//通過昵稱從數(shù)據(jù)庫中獲取user對象</p><p>　　Users user = usersService.getByNick(httpServletRequest.g

73、etParameter("uNick"));</p><p>　　if (user == null) {</p><p>　　result.put("result", "true");</p><p><b>　　} else {</b></p><p>　　r

74、esult.put("result", "false");</p><p><b>　　}</b></p><p>　　return SUCCESS;</p><p><b>　　}</b></p><p>　　5.3 用戶登陸頁面</p>&l

75、t;p>　　系統(tǒng)提供使用電話號碼和密碼登陸的功能，登陸需要填寫驗證碼，目的是防止惡意套取他人賬號，在登陸界面的左下角和右下角，分別提供了注冊賬號和找回密碼的鏈接，方便用戶切換頁面。</p><p><b>　　圖5.4 登錄頁面</b></p><p><b>　　部分代碼：</b></p><p>　　//電話號碼

76、只能填寫數(shù)字</p><p>　　$(":input[name='uPhone']").keyup(function () {</p><p>　　$(this).val($(this).val().match(/\d+/g, "-"));</p><p><b>　　});</b><

77、;/p><p>　　//點擊圖片時更換驗證碼</p><p>　　$("img").click(function () {</p><p>　　$("img").attr("src","${pageContext.request.contextPath}/users_getSecurityCode?&

78、quot;+new Date().getTime());</p><p><b>　　});</b></p><p>　　//后端校驗驗證碼是否正確</p><p>　　public String varifySecurityCode() {</p><p>　　String securityCode = httpSer

79、vletRequest.getParameter("securityCode");</p><p>　　result.put("result", "false");</p><p>　　if (securityCode != null && securityCode.equalsIgnoreCase((String

80、) session.get("securityCode"))) {</p><p>　　result.put("result", "true");</p><p><b>　　}</b></p><p>　　return SUCCESS;</p><p><

81、;b>　　}</b></p><p>　　5.4 找回密碼頁面</p><p>　　當用戶忘記密碼時，可以點擊登錄界面的找回密碼鏈接進入找回密碼界面，找回密碼界面模擬通過手機號獲取驗證碼來獲得登錄密碼。</p><p>　　圖5.5 找回密碼頁面</p><p><b>　　部分代碼：</b></

82、p><p>　　//后臺隨機生成驗證碼并把驗證碼保存在session中</p><p>　　public String sendPhoneCode() {</p><p>　　String phone = httpServletRequest.getParameter("phone");</p><p>　　Users use

83、r = usersService.getByPhone(phone);</p><p>　　result.put("result", "false");</p><p>　　if (user != null) {</p><p>　　String s = "";</p><p>　　

84、for (int i = 0; i < 6; i++) {</p><p>　　s += String.valueOf(Math.round(Math.random() * 9));</p><p><b>　　}</b></p><p>　　session.put("pass", user.getuPass());&

85、lt;/p><p>　　session.put("phoneCode", s);</p><p>　　result.put("result", s);</p><p><b>　　}</b></p><p>　　return SUCCESS;</p><p>&

86、lt;b>　　}</b></p><p>　　5.5 個人信息頁面</p><p>　　登陸成功后，主頁上會顯示會員的昵稱，點擊昵稱就進入個人信息頁面，用戶可以對自己的個人信息進行修改。在個人信息頁面，點擊頭像可以修改頭像，點擊頁面中的“編輯”按鈕可以對相關信息進行編輯，注意的是這個功能有的瀏覽器不支持，修改完成后，可以點擊“確定修改”按鈕確定修改，也可以點擊“取消”按鈕

87、取消修改。點擊頁面中的“充值”按鈕，會彈出輸入充值金額的對話框，輸入充值的數(shù)目，點擊“確定”按鈕完成充值，點擊“取消”按鈕取消充值。如果要對手機號和密碼進行修改，必須先填寫密碼，在對應位置輸入修改目標手機號或目標密碼，點擊對應的“修改”按鈕完成修改。</p><p>　　圖5.6 個人信息頁面</p><p><b>　　部分代碼：</b></p>&l

88、t;p>　　//使用ajax發(fā)送充值請求</p><p>　　$(".ok").click(function () {</p><p>　　$(".more").css("display", "none");</p><p>　　$.get("${pageContext.

89、request.contextPath}/users_updateUser", {</p><p>　　"name": "uMoney",</p><p>　　"value": $("#addMoney").val()</p><p>　　}, function (data)

90、{</p><p>　　if (JSON.parse(data).result == "success") {</p><p>　　$("td[name='uMoney']").text(parseFloat(${sessionScope.user.uMoney}) + parseFloat($("#addMoney&quo

91、t;).val()));</p><p>　　alert("充值成功！");</p><p><b>　　} else {</b></p><p>　　alert("充值失?。?quot;);</p><p><b>　　}</b></p><p&g

92、t;　　$.get("${pageContext.request.contextPath}/users_myData", function (data) {</p><p>　　$("body").html(data);</p><p><b>　　});</b></p><p><b>　　}

93、);</b></p><p><b>　　});</b></p><p>　　//手機號或密碼修改</p><p>　　$("button.update").click(function () {</p><p>　　if ($(".uPass").text().len

94、gth == 0) {</p><p>　　alert("修改之前必須提供密碼！");</p><p><b>　　} else {</b></p><p>　　$.get("${pageContext.request.contextPath}/users_updateUser", {</p>

95、<p>　　"name": $(this).parent().prev().attr("name"),</p><p>　　"value": $(this).parent().prev().text(),</p><p>　　"pass": $(".uPass").text()

96、</p><p>　　}, function (data) {</p><p>　　if (JSON.parse(data).result == "success") {</p><p>　　alert("修改成功！");</p><p>　　window.location.assign("$

97、{pageContext.request.contextPath}/users_logout");</p><p><b>　　} else {</b></p><p>　　$(".uPass").text("");</p><p>　　$("td[name='uPhone&#

98、39;]").text("");</p><p>　　$("td[name='uPass']").text(""); alert("修改失??！");</p><p><b>　　}</b></p><p><b>　　});<

99、;/b></p><p><b>　　}</b></p><p><b>　　});</b></p><p>　　5.6 商品列表頁面</p><p>　　在主頁中提供了搜索框，搜索框提供了兩種模式搜索商品，第一種模式是通過商品名稱搜索商品，另一種是通過店鋪名稱搜索商品。搜索采用的是模糊查詢，

100、只要名稱中包含了填寫的關鍵字，該商品就能被搜索到。點擊搜索按鈕后就進入到商品列表頁面，如下圖5.6所示。如果想按照類別查找所需商品，可以在主頁中找到相應類別的鏈接也能進入到該頁面。</p><p>　　圖5.7 商品列表頁面</p><p><b>　　部分代碼：</b></p><p><b>　　//控制層代碼</b>

101、</p><p>　　public String ShowGood() {</p><p>　　String cId = httpServletRequest.getParameter("cId");</p><p>　　if (cId != null) {</p><p>　　cId = cId.trim();</

102、p><p><b>　　}</b></p><p>　　String type = httpServletRequest.getParameter("type");</p><p>　　if (type != null) {</p><p>　　type = type.trim();</p>

103、<p><b>　　}</b></p><p>　　String key = httpServletRequest.getParameter("key");</p><p>　　if (key != null) {</p><p>　　key = key.trim();</p><p>&

104、lt;b>　　}</b></p><p>　　String pages = httpServletRequest.getParameter("page");</p><p>　　if (pages == null || pages.equals("")) {</p><p>　　pages = "1

105、";</p><p><b>　　} else {</b></p><p>　　pages = pages.trim();</p><p><b>　　}</b></p><p>　　System.out.println(httpServletRequest.getParameter(&q

106、uot;page"));</p><p>　　int size = 2;</p><p>　　int page = Integer.parseInt(pages);</p><p>　　System.out.println("page"+page);</p><p>　　List<Goods> goo

107、dses = new ArrayList<>();</p><p>　　if (cId != null && !cId.equals("")) {</p><p>　　goodses = goodsService.listGoodsByCate(Long.parseLong(cId), page, size);</p><

108、p>　　Collections.shuffle(goodses);</p><p><b>　　}</b></p><p>　　if (type != null && !type.equals("")) {</p><p>　　goodses = goodsService.listGoodsByType

109、(type, key, page, size);</p><p><b>　　}</b></p><p>　　Iterator<Goods> iterator = goodses.iterator();</p><p>　　int i = 0;</p><p>　　while (iterator.hasNex

110、t()) {</p><p>　　Goods next = iterator.next();</p><p>　　String getgName = next.getgName();</p><p>　　if (getgName.length() > 6) {</p><p>　　next.setgName(getgName.subst

111、ring(0, 6) + "...");</p><p><b>　　}</b></p><p>　　GoodsNorm norm = goodsService.listGoodsNorm(next).get(0);</p><p>　　Double price = norm.getnPrice();</p>

112、<p>　　byte[] bytes = next.getgHead();</p><p>　　String head = Base64.getEncoder().encodeToString(bytes);</p><p>　　result.put("head" + i, head);</p><p>　　result.put(&qu

113、ot;price" + i++, String.valueOf(price));</p><p>　　next.setgHead(null);</p><p><b>　　}</b></p><p><b>　　try {</b></p><p>　　result.put("go

114、odses", JSONUtil.serialize(goodses));</p><p>　　} catch (JSONException e) {</p><p>　　e.printStackTrace();</p><p><b>　　}</b></p><p>　　return SUCCESS;<

115、/p><p><b>　　}</b></p><p>　　5.7 商品詳情頁面</p><p>　　在主頁、商品列表頁面、店鋪展示頁面上都有商品展示圖片，點擊商品展示圖片瀏覽器就會跳轉(zhuǎn)到商品詳情頁面，商品詳情頁面如下圖所示，該頁面顯示了商品的詳細信息，包括商品所在店鋪、商品名稱、商品的賣家、發(fā)貨地址、參數(shù)、規(guī)格等等。在這里，會員可以點擊對應的按鈕進

116、行收藏、購買和加入購物車操作，如果是商品的賣家自己進入到該頁面，是看不見這些按鈕的，因為本購物系統(tǒng)不允許自己購買自己的商品。</p><p>　　圖5.8 商品詳情頁面</p><p><b>　　部分代碼：</b></p><p><b>　　//后臺響應請求</b></p><p>　　publ

117、ic String showGoodDetails() {</p><p>　　String gId = httpServletRequest.getParameter("gId");</p><p>　　Goods good = goodsService.getGood(Long.parseLong(gId));</p><p>　　Shops

118、 shopById = shopsServers.getShopById(good.getsId());</p><p>　　Users userbyid = usersService.getById(shopById.getuId().getuId());</p><p>　　System.out.println(shopById.getuId());</p><p&

119、gt;　　byte[] bytes = good.getgHead();</p><p>　　String head = Base64.getEncoder().encodeToString(bytes);</p><p>　　result.put("head", head);</p><p>　　good.setgHead(null);<

120、/p><p>　　Users user = (Users) session.get("user");</p><p>　　result.put("hide", "false");</p><p>　　if (user != null && user.getuId() == shopById.ge

121、tuId().getuId()) {</p><p>　　result.put("hide", "true");</p><p><b>　　}</b></p><p>　　result.put("isCollect", "false");</p>&

122、lt;p>　　if (user != null && usersService.getCollectById(user.getuId(), Long.parseLong(gId)) != null) {</p><p>　　result.put("isCollect", "true");</p><p><b>　　}