電子商務交易平臺畢業(yè)論文

1、<p><b>　　摘要</b></p><p>　　電子商務（Electronic Commerce）又稱電子商業(yè)。是指商務活動的參與者（包括消費者、銷售商、供應商、企業(yè)雇員、銀行或金融機構以及政府等）利用各種電子工具和電子技術對貿易活動各個階段進行改造和創(chuàng)新，實現整個貿易活動的自動化和電子化。簡單的說，電子商務就是利用計算機網絡和數據信息等手段聯絡交易主體和銀行信用方式的所有經

2、濟活動。</p><p>　　經濟的發(fā)展和科技的進步為電子商務開辟了無比廣闊的前景，在全球信息化大勢所驅的影響下，各國的電子商務不斷的改進和完善，電子商務已成為21世紀先進生產力的標志之一。作為一種信息時代國際通行的商務模式，電子商務觀念正不斷深入人心。而在我國，計算機與網絡技術的普及與發(fā)展，電子商務迅速崛起，網上交易發(fā)展也步入了一個新臺階。電子商務的深入發(fā)展引發(fā)了一場廣泛、深刻的商業(yè)變革。電子商務作為網上交易的

3、重要商務活動之一，其存在的巨大經濟潛力，使得許多企業(yè)都躍躍欲試，雖然這一新經濟狀態(tài)下的商務形態(tài)有著光明的前景，但也面臨著許多問題。經歷了網絡泡沫的中國電子商務，目前已經進入平穩(wěn)發(fā)展階段，前景非?？春茫请娮由虅赵谖磥淼陌l(fā)展道路上，其問題依然不少。因此，現在應展望電子商務的發(fā)展趨勢，理清目前存在的問題并提出相應對策，這樣就更有利于新形勢下我國電子商務的持續(xù)、快速、健康地發(fā)展。</p><p>　　在現代網絡、通信

4、和信息技術的大力發(fā)展下，電子商務將發(fā)展到全球規(guī)模，這使得任何一個商業(yè)組織都必須重新調整自己的運營模式和產業(yè)結構，以適應新的市場發(fā)展的需要。因此，任何一個企業(yè)想要在21世紀生存下來，就必須迅速地改變傳統(tǒng)的經營觀念，跟上當今世界發(fā)展的最新潮流，加入到電子商務大潮中。</p><p>　　前臺交易系統(tǒng)主要包括用戶管理、商品展示、我的訂單、購物車管理，結算系統(tǒng)主要包括訂單管理、用戶訂單管理、訂單結算。系統(tǒng)主要采用了流行的

5、MVC思想，融入了JSP、Ajax、JQuery、javascript等典型WEB開發(fā)相關技術，同時采用MySql數據庫和主流服務器Tomcat，后使用Spring、Hibernate、Struts2三大框架進行整合。系統(tǒng)的各個模塊設計合理，業(yè)務方法利用接口理念，這樣讓系統(tǒng)很靈活，具備了良好的擴展性，采用Spring框架的注入原理，使得程序結構更加完美。</p><p>　　經過本人不斷的調試和改進，系統(tǒng)逐漸完善

6、，最終完成電子商務交易平臺。</p><p>　　關鍵詞：電子商務;網上購物;java </p><p><b>　　Abstract</b></p><p>　　Electronic Commerce (Electronic Commerce) is also called electronic business. Refers to th

7、e business activities of the participants (including consumers, dealers, suppliers, employees, banks or financial institutions and government) to carry out reform and innovation in various stages of trading activities by

8、 using various electronic tools and electronic technology, realize the whole trade automation and computerization. Simply put, all the economic activities of e-commerce is the use of compute</p><p>　　The dev

9、elopment of economy and the progress of science and technology opens a wide prospect for electronic commerce, affected by flooding in the global trend of information technology under the electronic commerce, the unceasin

10、g improvement and the consummation, the electronic commerce has become the symbol of advanced productivity in twenty-first Century. As a kind of information era the international business model, e-commerce concept contin

11、ues to win support among the people. But in our count</p><p>　　With the development of communication and information technology, the modern network, e-commerce will develop to a global scale, which makes any

12、 business organization must recalibrate operation mode and its own industrial structure, in order to adapt to the new market development. Therefore, any enterprise want to survive in the twenty-first Century, they must q

13、uickly change the traditional ideas, keep up with the latest trend in today's world development, added to the electronic commerce.</p><p>　　The electronic commerce system using B\/S mode, the main front

14、desk trading system and settlement system and user management system. The system includes user management, commodity display, my orders, shopping cart management, order management, settlement system mainly includes the u

15、ser order management, order settlement. The system mainly uses the popular MVC theory, into the JSP, Ajax, JQuery, JavaScript and other typical WEB developing technology, at the same time, using the MySql database and<

16、;/p><p>　　After my constant adjustment and improvement, system gradually perfect, complete e-commerce trading platform.</p><p>　　Keywords: electronic;online shopping;java目 錄</p><p>

17、<b>　　摘要II</b></p><p>　　AbstractIII</p><p><b>　　引 言1</b></p><p>　　第1章 系統(tǒng)開發(fā)技術和運行環(huán)境配置2</p><p>　　1.1 Struts2框架技術2</p><p>　　1.

18、1.1 Struts2的體系結構2</p><p>　　1.1.2 Struts2的處理流程3</p><p>　　1.2 Hibernate框架技術4</p><p>　　1.2.1 hibernate的體系結構4</p><p>　　1.2.2 Hibernate處理流程5</p><p>　　

19、1.3 Spring框架技術6</p><p>　　1.3.1 Spring結構體系7</p><p>　　1.4 Ajax技術7</p><p>　　1.5 JQuery技術8</p><p>　　1.6 B/S三層架構10</p><p>　　1.7 系統(tǒng)環(huán)境11</p>&l

20、t;p>　　1.7.1 系統(tǒng)開發(fā)環(huán)境11</p><p>　　1.7.2 系統(tǒng)運行環(huán)境11</p><p>　　第2章 需求分析12</p><p>　　2.1 網站開發(fā)目的12</p><p>　　2.2 系統(tǒng)功能結構描述12</p><p>　　2.3 系統(tǒng)流程圖13</p>

21、;<p>　　2.4 使用的技術14</p><p>　　第3章 數據庫設計15</p><p>　　3.1 網站的數據庫分析15</p><p>　　3.2 數據庫概念結構設計15</p><p>　　3.3 數據庫物理設計16</p><p>　　第4章 系統(tǒng)設計及實現19&l

22、t;/p><p>　　4.1 系統(tǒng)頁面結構19</p><p>　　4.2 網站的前臺模塊設計21</p><p>　　4.2.1 用戶模塊21</p><p>　　4.2.2 主頁模塊31</p><p>　　4.2.3 購物車33</p><p>　　4.2.4 我的訂單

23、37</p><p>　　4.3 訂單管理41</p><p>　　4.3.1 訂單查詢42</p><p>　　4.3.2 購物明細表43</p><p>　　4.3.3 單個用戶訂單查詢43</p><p>　　4.3.4 商品管理44</p><p>　　第5章 測試

24、45</p><p>　　5.1 注冊模塊測試46</p><p>　　5.3 購物車模塊測試47</p><p>　　5.4 分類數目統(tǒng)計49</p><p>　　5.5 商品排序測試49</p><p>　　5.6 刪除的物品不在結算當中50</p><p><b&

25、gt;　　結 論51</b></p><p>　　參 考 文 獻52</p><p><b>　　致 謝53</b></p><p><b>　　引 言</b></p><p>　　隨著信息時代的到來,特別是國際互聯網的應用與普及,我們的現實生活發(fā)生了根本的變革,

26、基于網絡的消費方式——網上購物的出現及逐漸流行,改變了我們的生活方式和消費觀念,人們在網上輕點鼠標就可以實現購物,購買生活、工作和學習用品。網上消費給人們帶來的快捷、便利、節(jié)約成本等優(yōu)越條件,使越來越多的人選擇了網上消費。網上購物系統(tǒng)作為B2B，B2C（Business to Customer），即（企業(yè)對消費者）電子商務的前端商務平臺，在其商務活動全過程中起著舉足輕重的作用。從長遠來看，企業(yè)對消費者的電子商務將最終在電子商務領域占據重

27、要地位。為了順應這種潮流，同時考慮到畢業(yè)生自身特點，我選擇了開發(fā)一個基于JAVA技術實現的企業(yè)管理網站，而且利用了javascript，Ajax，jQuery的技術使頁面更加鮮活，美觀，并通過web服務器實現。</p><p>　　本平臺不僅充分顯示了產品的信息，也給用戶很好的視覺體驗和感覺體驗，讓用戶的操作更簡單。</p><p><b>　?、偕唐返臑g覽功能。</b&g

28、t;</p><p><b>　　②商品的詳細信息。</b></p><p><b>　?、塾唵喂芾砉δ?。</b></p><p><b>　　④用戶管理功能。</b></p><p>　?、萦脩舨樵冇唵喂δ艿?章 系統(tǒng)開發(fā)技術和運行環(huán)境配置</p><p

29、>　　該平臺的需求分析明確網站的開發(fā)目的，根據網站的總體思想進行開發(fā)，進行開發(fā)語言選擇和開發(fā)工具選擇，并配置運行環(huán)境，根據各種技術達到給用戶更好的體驗。</p><p>　　1.1 Struts2框架技術</p><p>　　本系統(tǒng)采用了Struts2框架設計完成，Struts2是系統(tǒng)的核心控制器?；贛VC設計，分層結構開發(fā)。</p><p><b&

30、gt;　　分層結構：</b></p><p>　　表現層(V):JSP,js,Ajax,JQuery,EL,Struts2標簽</p><p>　　控制層(C):Struts2控制器，Action</p><p>　　業(yè)務層(M):javaBean</p><p>　　數據訪問層（持久層）(M):DAO組件</p>

31、<p>　　主要技術：jQuery+Struts2+JDBC</p><p>　　1.1.1 Struts2的體系結構</p><p>　　Struts2的體系結構如圖1.1.1所示：</p><p><b>　　。</b></p><p>　　圖1.1.1 Struts2體系結構</p>&l

32、t;p>　　Struts2的幾個核心組件：</p><p>　　a 、ActionServlet(核心控制器)</p><p>　　b、RequestProcessor類(處理異常的核心組件)</p><p>　　c、ActionForm(接收頁面中傳過的數據)</p><p>　　d、Action(是控制器，主要是從ActionFor

33、m中接收頁面?zhèn)鬟M來的數據， 然后進行邏輯處理)</p><p>　　e、ActionForward(頁面跳轉，跳轉到jsp組件)</p><p>　　f、ActionMapping(配置每個Action所對應的映射關系)。</p><p>　　1.1.2 Struts2的處理流程</p><p>　　圖1.1.2 Struts2的

34、處理流程</p><p><b>　　處理流程詳細描述：</b></p><p>　　客戶端初始化一個指向Servlet容器（如Tomcat）的請求。 </p><p>　　這個請求經過一系列過濾器（如ActionContextCleanUp、SiteMesh等）。 </p><p>　　FilterDispatcher

35、被調用，FilterDispatcher詢問ActionMapper來決定這個請求是否需要調用某個Action。 </p><p>　　如果ActionMapper決定需要調用某個Action，FilterDispatcher把請求交給ActionProxy。 </p><p>　　ActionProxy通過Configuration Manager詢問Struts配置文件，找到需要調用的

36、Action類。 </p><p>　　ActionProxy創(chuàng)建一個ActionInvocation實例。 </p><p>　　ActionInvocation實例使用命名的模式來調用，回調Action的execute方法。 </p><p>　　一旦Action執(zhí)行完畢，ActionInvocation負責根據Struts.xml的配置返回結果。</p&

37、gt;<p>　　1.2 Hibernate框架技術</p><p>　　本框架采用hibernate框架技術，通過hibernate框架的技術鏈接數據庫和使用hibernate的緩存機制，更好的優(yōu)化了網站的結構，減輕了大量用戶時對數據庫的壓力，使用戶更好，更方便的使用。</p><p>　　1.2.1 hibernate的體系結構</p><p>

38、;　　圖1.2.1 hibernate體系結構</p><p>　　Hibernate的幾個核心組件</p><p>　　a、class元素：用來定義一個持久化類，它的屬性name和table分別為持久化的類名及對應到DB中的表名</p><p>　　b、generator：Hibernate內置生成器，有increment(遞增)，identity(標識)，seq

39、uence(序列)，seqhilo(序列高/低位)，uuid.hex，assigned，foreign</p><p>　　c、Configuration類：它負責管理Hiberante的配置信息，它主要用來加載這些陪置文件。</p><p>　　d、SessionFactory接口：SessionFactory負責Session實例的創(chuàng)建</p><p>　　e、

40、Session接口：Session是應用程序與數據庫之間的一個會話，是Hibernate運作的中心，持久層操作的基礎，相當于JDBC中的Connection。</p><p>　　f、Query接口：用來執(zhí)行HQL語句。</p><p>　　1.2.2 Hibernate處理流程</p><p>　　圖1.2.2 Hibernate處理流程</p>

41、<p><b>　　處理流程詳細介紹：</b></p><p>　　通過JDBC操作數據庫，首先要獲得數據庫的連接，然后通過Statement執(zhí)行SQL語句，Hibernate隱藏了顯示進行數據庫連接的細節(jié)，只要配置相關的數據庫連接即可，Hibernate初始化流程步驟如下： 創(chuàng)建Configuration類的實例Configuration的構造方法讀入配置文件信息，一

42、個Configuration實例代表Hibernate所有Java類到SQL數據庫映射的集合。Configuration讀取路徑根目錄下的配置文件hibernate.properties或hibernate.cfg.xml，創(chuàng)建Configuration類的實例代碼如下：Configuration config = new Configuration(); 創(chuàng)建SessionFactory實例它把Configuration

43、對象中的所有配置信息拷貝到SessionFactory的緩存中。一個SessionFactory的實例代表一個數據庫存儲源，創(chuàng)建后不再與Configuration對象關聯。sessionFactory = config.buildSessi</p><p>　　1.3 Spring框架技術</p><p>　　本程序采用了Spring框架技術，通過Spring框架技術的AOP（方面組

44、件）和ＩＯＣ（控制反轉）等技術利用IoC機制實現Action和Service，Service和DAO之間低耦合調用，利用AoP機制實現事務管理，以及共通功能的切入等。 功能是整合，好處是解偶。</p><p>　　1.3.1 Spring結構體系</p><p>　　圖1.3.1 Spring結構體系</p><p>　　Spring幾個核心組件：</p&g

45、t;<p>　　IOC（Inversion of Control）控制反轉：它是Spring的核心，是一種將組件依賴關系的創(chuàng)建和管理置于程序外部的技術</p><p>　　面向切面編程(AOP)：它是OOP的補充，而不是OOP的對手。不用OOP只用AOP寫程序幾乎不可能。 OOP可以有效解決很多問題，但在有些問題的解決上，運用AOP會使工作更加聰明輕松。AOP使得程序更加模塊化</p>

46、<p>　　通知(Advice)：在某一個聯結點處運行的代碼成為通知.根據在聯結點之前執(zhí)行和之后執(zhí)行分為前置通知和后置通知。</p><p>　　切入點(Pointcut):來定義某一個通知該何時執(zhí)行的一組聯結點。通常會組件復雜的切入點來控制通知什么時候運行</p><p>　　1.4 Ajax技術</p><p>　　Ajax的原理簡單來說通過Xml

47、HttpRequest對象來向服務器發(fā)異步請求，從服務器獲得數據，然后用javascript來操作DOM而更新頁面。</p><p>　　在本網站中使用了的是JQuery的Ajax如圖1.4所示</p><p>　　圖1.4 JQuery中ajax顯示</p><p>　　在本網站中使用的代碼如下：</p><p>　　$.post(&quo

48、t;checkEmail.action",{'email':email},function(data){</p><p><b>　　if(data){</b></p><p>　　$('#email\\.info').css("color","green");</p>&

49、lt;p>　　$('#email\\.info').html("<image src='../images/right.gif'>郵箱可用");</p><p>　　check_email=true;</p><p><b>　　}else{</b></p><p>　　$(

50、'#email\\.info').css("color","red");</p><p>　　$('#email\\.info').html("<image src='../images/wrong.gif'>郵箱已被占用");</p><p><b>　　}&

51、lt;/b></p><p><b>　　});</b></p><p><b>　　});</b></p><p>　　1.5 JQuery技術</p><p>　　使用選擇器(借鑒了css選擇器的語法)查找節(jié)點，并且將節(jié)點封裝成jQuery對象，通過調用jQuery對象的方法或屬性來實現

52、對底層</p><p>　　節(jié)點的操作。這樣做的好處是：屏蔽了瀏覽器之間的差異，另外，也簡化了編程。</p><p>　　在本網頁中使用如圖1.5.1和1.5.2所示</p><p>　　圖1.5.1 JQuery購買成功顯示</p><p>　　圖1.5.2 已經購買JQuery技術顯示</p><p>　　在網頁中

53、的代碼如下所示</p><p>　　1.4 <script type="text/javascript" src="../js/jquery-1.4.3.js"></p><p><b>　　</script></b></p><p>　　<script type="

54、;text/javascript"></p><p>　　$(function(){</p><p>　　$(".goumai").click(function(){</p><p>　　var id=$(this).attr("id");</p><p>　　var a=$(this)

55、;</p><p>　　var msg_span=$(this).next();</p><p>　　$.post("../cart/buy.action",{"id":id},</p><p>　　function(data){</p><p>　　if(data==true){</p>

56、<p><b>　　a.hide();</b></p><p>　　msg_span.css("color","green");</p><p>　　msg_span.html("<image src='../images/right.gif'>購買成功");</

57、p><p>　　setTimeout(function(){</p><p>　　msg_span.html('');</p><p>　　a.html("<image src='../images/buttom_goumai.gif'>");</p><p><b>　　

58、a.show()</b></p><p><b>　　},2000);</b></p><p><b>　　}else{</b></p><p><b>　　a.hide();</b></p><p>　　msg_span.css("color"

59、,"red");</p><p>　　msg_span.html("<image src='../images/wrong.gif'>您已經購買了");</p><p>　　setTimeout(function(){</p><p>　　msg_span.html('');<

60、/p><p>　　a.html("<image src='../images/buttom_goumai.gif'>");</p><p><b>　　a.show()</b></p><p><b>　　},2000);</b></p><p><

61、b>　　}</b></p><p><b>　　}</b></p><p><b>　　);</b></p><p>　　return false;</p><p><b>　　});</b></p><p>　　$('#sel

62、ect').change(function(){</p><p>　　var orderby=$('#select').val();</p><p>　　var pid=$('#pid').val();</p><p>　　var cid=$('#cid').val();</p><p>

63、;　　location.href="booklist.action?pid="+pid+"&cid="+cid+"&orderby="+orderby;</p><p><b>　　});</b></p><p><b>　　});</b></p><

64、p>　　1.6 B/S三層架構</p><p>　　三層B/S應用模式是為了解決兩層結構中存在的問題而提出的,在三層模式中，在瀏覽器和服務器之間引入了應用層的概念，將應用邏輯移到應用層實現，與傳統(tǒng)兩層B/S模式相比，三層有著可伸縮性好、可管理性強、安全性高、軟件重用性好以及節(jié)省開發(fā)時間等諸多優(yōu)點。三層結構的應用程序把業(yè)務邏輯獨立起來，組成一層或多層，這樣就形成了瀏覽器界面層、中間業(yè)務邏輯層和后端數據庫服務

65、器層。</p><p>　　圖1.4.1 三層B/S結構</p><p><b>　　1.7 系統(tǒng)環(huán)境</b></p><p>　　1.7.1 系統(tǒng)開發(fā)環(huán)境</p><p>　　操作系統(tǒng)：windows</p><p>　　開發(fā)工具：MyEclipse8.0+Tomcat+MySql<

66、/p><p>　　相關技術：Java+SSH+JDBC+JSP+Ajax+JQuery+JavaScript+html+css等</p><p>　　1.7.2 系統(tǒng)運行環(huán)境</p><p>　　系統(tǒng)所需要的軟件環(huán)境：</p><p>　　開發(fā)工具：MyEclipse 8.0或更高版本</p><p>　　WEB服務器：

67、tomcat 6.0</p><p>　　數據庫：MySQL5.5</p><p>　　虛擬機(JVM)：jdk-6-linux-i586或jdk-6-win-i586</p><p>　　瀏覽器：Internet Explorer(建議用FireFox)第2章 需求分析</p><p>　　網站系統(tǒng)需求分析首先要明確網站開發(fā)的目的，網站的

68、整體開發(fā)思想，這個項目建立在什么樣的背景下進行，開發(fā)這個網站要用那些開發(fā)語言，開發(fā)成功之后需要運行的技術平臺、開發(fā)工具及其運行需求。</p><p>　　2.1 網站開發(fā)目的</p><p>　　通用電子商務平臺的設計是為了讓更多的企業(yè)擁有自己的網上交易活動，擴展他們的經營模式。作為一個商業(yè)性質的電子商務平臺，系統(tǒng)必須滿足企業(yè)的業(yè)務要求，與企業(yè)的商業(yè)活動真正接軌，形成服務一體化。系統(tǒng)界面

69、設計一定要友好，操作安全，服務方便快捷。系統(tǒng)總體流程必須合理規(guī)范，無邏輯錯誤。數據庫必須設計合理，數據的存儲一定要安全化。同時，這是一個網站，必須要考慮到服務器的承載壓力和訪問速度。作為一個大學生的畢業(yè)設計，它也必須符合大學生畢業(yè)設計的規(guī)范。</p><p>　　2.2 系統(tǒng)功能結構描述</p><p>　　本系統(tǒng)主要采用B/S三層模式，同時利用典型的MVC模式Struts2，Hiber

70、nate，Spring框架設計完成。本系統(tǒng)主要包括前臺交易系統(tǒng)和后臺管理系統(tǒng)，前臺功能如下：</p><p>　　1. 用戶模塊，其中包括用戶注冊、 登錄、 登出。</p><p>　　2. 主頁顯示模塊，其中包括分類瀏覽、分頁查看、</p><p>　　3. 購物車模塊，該模塊實現商品的添加、數量修改，商品刪除、恢復、清空、結算。</p><p

71、>　　4. 訂單模塊，該模塊實現訂單確認、訂單列表、查看訂單和收件人等功能。 </p><p>　　5. 我的當當，用戶昵稱修改，訂單查詢，訂單詳細查詢。</p><p>　　系統(tǒng)功能結構如圖2.1所示。</p><p>　　圖 2.1 系統(tǒng)功能結構圖</p><p>　　2.3 系統(tǒng)流程圖</p><p>

72、　　圖 2.2 系統(tǒng)流程圖</p><p>　　2.4 使用的技術</p><p>　　Ajax、Jquery、javascript、mysql、struts2、Hibernate、Spring第3章 數據庫設計</p><p>　　網站數據庫的整體設計首先要有明確的網站數據庫需求分析，然后要對數據庫的邏輯結構有一個整體的思路，再者要配置好文件的代碼。<

73、/p><p>　　3.1 網站的數據庫分析</p><p>　　本系統(tǒng)是在網上運行的企業(yè)網站，對于這種類型的網站來說,其數據庫的保密性要求比較嚴格，但無須使用大型的數據庫，MySQL是一個小型關系型數據庫管理系統(tǒng)，是最受歡迎的開源SQL數據庫管理系統(tǒng)，是一個快速的、多線程、多用戶和健壯的SQL數據庫服務器。因此數據庫選擇上采用了MySql數據庫。</p><p>　　

74、3.2 數據庫概念結構設計</p><p>　　概念結構設計的任務是在需求分析階段產生的需求說明書的基礎上，按照特定的方法把它們抽象為一個不依賴于任何具體機器的數據模型，即概念模型。概念模型使設計者的注意力能夠從復雜的實現細節(jié)中解脫出來，而只集中在最重要的信息的組織結構和處理模式上。本系統(tǒng)的E-R模型圖如圖3.1所示：</p><p>　　圖3.1 系統(tǒng)E-R圖</p>&

75、lt;p>　　3.3 數據庫物理設計</p><p>　　由數據庫E-R模型圖轉換為關系模型，并最終根據關系模型在數據庫中建立了8張數據表。各個數據表的物理結構如表3-1至3-8所示。</p><p>　　(1)用戶表d_user，主要包含用戶編號、郵箱、密碼、積分、昵稱、郵箱驗證狀態(tài)、郵箱驗證碼、最后登錄時間、最后登錄IP。</p><p>　　表3-1

76、用戶表（d_user）</p><p>　　(2)圖書表(d_book)，主要包含圖書ID、作者、出版社、出版時間、字數、版本、總頁數、印刷時間、國家圖書統(tǒng)一編號、作者介紹、目錄預覽。</p><p>　　表3-2 圖書表(d_book)</p><p>　　(3)商品表(d_product)，主要包含產品ID、產品名稱、描述、上架時間、市場價、當當價、關鍵字、是否

77、下架、產品圖片名稱。</p><p>　　表3-3 商品表（d_product）</p><p>　　(4)類別表(d_category)，主要包含類別ID、中文名稱、英文名稱、父類ID、類別描述。</p><p>　　表3-4 類別表（d_category）</p><p>　　(5)產品與類別關系表(d_category_product)

78、，主要包含ID，商品編號ID，類別編號ID。</p><p>　　表3-5 分類與產品表（d_category_product）</p><p>　　(6)訂單表(d_order)，主要包含訂單編號、用戶編號、訂單狀態(tài)、訂單生成時間、訂單描述、訂單總價、收件人姓名、收件人地址、郵政編碼、手機號碼、固定電話號碼。</p><p>　　表3-6 訂單表（d_order）

79、</p><p>　　(7)訂單項表(d_item)，主要包含訂單項編號、訂單編號、商品編號、商品名稱、當當價格、商品數量、總價。</p><p>　　表3-7 貨物表（d_item）</p><p>　　收件人信息表(d_receive_address)，主要包含編號、用戶編號、收件人姓名、詳細地址、郵政編碼、手機號碼、固定電話號碼。</p><

80、;p>　　表3-8 收貨地址表（d_receive_address）</p><p>　　第4章 系統(tǒng)設計及實現</p><p>　　系統(tǒng)設計是新系統(tǒng)的物理設計階段。根據系統(tǒng)分析階段所確定的新系統(tǒng)的邏輯模型、功能要求，在用戶提供的環(huán)境條件下，設計出一個能在計算機網絡環(huán)境上實施的方案，即建立新系統(tǒng)的物理模型。</p><p>　　4.1 系統(tǒng)頁面結構<

81、/p><p>　　系統(tǒng)主要展示主頁面，其它的頁面都是通過include指令包含到主頁面中，各頁面需要加載數據都是通過其在main.jsp中的div標簽想服務器發(fā)送請求。通過css/html的div標簽讓各頁面在主頁面上融合顯示。主頁面主要包含以下頁面：hot.jsp(圖書熱銷頁面)，new.jsp(新書上架頁面)，recommend.jsp(編輯推薦圖書頁面)，category.jsp(圖書分類頁面)。熱銷圖書頁面h

82、ot.jsp是根據賣出的書的數量來進行排序的，所以每次加載主頁面它都必須向服務器發(fā)送請求獲取最新數據。</p><p><b>　　圖4.1主頁面顯示</b></p><p>　　圖4.2 系統(tǒng)主頁面視圖</p><p>　　前臺交易系統(tǒng)視圖層介紹：</p><p>　　用戶模塊：login_form.jsp(用戶登錄

83、頁面)</p><p>　　register_form.jsp(用戶注冊頁面)</p><p>　　verify_form.jsp(郵箱驗證頁面)</p><p>　　register_ok.jsp(注冊成功頁面)</p><p>　　vali.jsp(驗證用戶是否登入頁面)</p><p>　　my.jsp(我的當當

84、頁面)</p><p>　　user_index.jsp(用戶信息中心頁面)</p><p>　　modify_pwd.jsp(用戶密碼修改頁面)</p><p>　　主頁面模塊：main.jsp(主頁面)</p><p>　　book_list.jsp(圖書列表顯示)</p><p>　　Product.jsp(圖書

85、詳細頁面)</p><p>　　Comment.jsp(用戶評論頁面)</p><p>　　New.jsp(最新上架圖書列表顯示)</p><p>　　Category.jsp(左側類別菜單顯示)</p><p>　　Hot.jsp(熱銷圖書列表)</p><p>　　Recommend.jsp(編輯推薦列表)<

86、/p><p>　　訂單模塊：address_form.jsp(填寫收件人地址信息頁面)</p><p>　　order_info(確認訂單頁面)</p><p>　　order_ok.jsp(訂單生成頁面)</p><p>　　order_list（訂單詳細信息頁面）</p><p>　　item.jsp(購物明細列表)&

87、lt;/p><p>　　購物車模塊：cart_list.jsp(購物車詳細頁面)</p><p>　　4.2 網站的前臺模塊設計</p><p>　　本系統(tǒng)主要包含前臺交易系統(tǒng)和后臺管理系統(tǒng)，其中前臺交易系統(tǒng)包括用戶模塊、主頁模塊、訂單模塊、購物車模塊。</p><p>　　4.2.1 用戶模塊</p><p>　　用

88、戶模塊主要實現了用戶注冊、登入/登出、修改信息、查看訂單等功能，用戶模塊結構功能如圖4.3所示。</p><p>　　圖4.3用戶模塊功能結構圖</p><p><b>　　(1) 用戶注冊</b></p><p>　　系統(tǒng)采用了JQuery（jquery-1.4.min.js）進行表單數據基本驗證，注冊頁面register_form.jsp表

89、單中的數據只要有一項不符合驗證規(guī)則的數據，則表單提交按鈕失效。為了保證用戶注冊的郵箱名在數據庫中是唯一的，使用了Ajax技術向服務器發(fā)送異步請求，如果數據庫中已經存在，則在頁面上提示用戶“此郵箱已經被占用”的錯誤消息，用戶注冊流程如圖4.4所示。</p><p>　　圖4.4 注冊流程圖</p><p>　　用戶注冊的頁面代碼如下：</p><p>　　<sc

90、ript type="text/javascript" src="../js/jquery-1.4.3.js"></script></p><p>　　<script type="text/javascript"></p><p>　　var check_email=false;</p>

91、<p>　　var check_nickname=false;</p><p>　　var check_password=false;</p><p>　　var check_code=false;</p><p><b>　　//表單驗證</b></p><p>　　$(function(){</p&

92、gt;<p>　　$('#txtEmail').blur(function(){</p><p><b>　　//非空檢查</b></p><p>　　var email=$('#txtEmail').val();//獲得輸入框中的數據</p><p>　　if(email==""

93、;){</p><p>　　$('#email\\.info').css("color","red");</p><p>　　$('#email\\.info').html("<image src='../images/wrong.gif'>郵箱不能為空");</p

94、><p><b>　　return;</b></p><p><b>　　}</b></p><p><b>　　//格式檢查</b></p><p>　　var pattern=/\b(^['_A-Za-z0-9-]+(\.['_A-Za-z0-9-]+)*@([

95、A-Za-z0-9-])+(\.[A-Za-z0-9-]+)*((\.[A-Za-z0-9]{2,})|(\.[A-Za-z0-9]{2,}\.[A-Za-z0-9]{2,}))$)\b/;</p><p>　　if(!pattern.test(email)){</p><p>　　$('#email\\.info').css("color","

96、;red");</p><p>　　$('#email\\.info').html("<image src='../images/wrong.gif'>郵箱格式不正確");</p><p><b>　　return;</b></p><p><b>　　}<

97、;/b></p><p><b>　　//唯一性檢查</b></p><p>　　$.post("checkEmail.action",{'email':email},function(data){</p><p><b>　　if(data){</b></p>&l

98、t;p>　　$('#email\\.info').css("color","green");</p><p>　　$('#email\\.info').html("<image src='../images/right.gif'>郵箱可用");</p><p>　　

99、check_email=true;</p><p><b>　　}else{</b></p><p>　　$('#email\\.info').css("color","red");</p><p>　　$('#email\\.info').html("<i

100、mage src='../images/wrong.gif'>郵箱已被占用");</p><p><b>　　}</b></p><p><b>　　});</b></p><p><b>　　});</b></p><p><b>　

101、　//檢查昵稱</b></p><p>　　$('#txtNickName').blur(function(){</p><p><b>　　//檢查非空</b></p><p>　　var nickname=$('#txtNickName').val();</p><p>　

102、　if(nickname==""){</p><p>　　$('#name\\.info').css("color","red");</p><p>　　$('#name\\.info').html("<image src='../images/wrong.gif'&

103、gt;昵稱不能為空");</p><p><b>　　return;</b></p><p><b>　　}</b></p><p><b>　　//檢查格式</b></p><p>　　var pattern=/^([\u4e00-\u9fa5]{2,10}|[0-

104、9a-zA-Z]{4,20})$/;</p><p>　　if(!pattern.test(nickname)){</p><p>　　$('#name\\.info').css("color","red");</p><p>　　$('#name\\.info').html("<

105、;image src='../images/wrong.gif'>昵稱格式不正確");</p><p>　　check_nickname=false;</p><p><b>　　}else{</b></p><p>　　$('#name\\.info').css("color"

106、;,"green");</p><p>　　$('#name\\.info').html("<image src='../images/right.gif'>昵稱可用");</p><p>　　check_nickname=true;</p><p><b>　　}<

107、/b></p><p><b>　　});</b></p><p><b>　　//檢查密碼</b></p><p>　　$('#txtPassword').blur(function(){</p><p><b>　　//檢查非空</b></p&g

108、t;<p>　　var password=$('#txtPassword').val();</p><p>　　if(password==""){</p><p>　　$('#password\\.info').css("color","red");</p><p&

109、gt;　　$('#password\\.info').html("<image src='../images/wrong.gif'>密碼不能為空");</p><p><b>　　return;</b></p><p><b>　　}</b></p><p>

110、<b>　　//檢查格式</b></p><p>　　var pattern=/\b(^[A-Za-z0-9]{6,20}$)\b/;</p><p>　　if(!pattern.test(password)){</p><p>　　$('#password\\.info').css("color",&quo

111、t;red");</p><p>　　$('#password\\.info').html("<image src='../images/wrong.gif'>密碼格式不正確");</p><p>　　check_password=false;</p><p><b>　　}else

112、{</b></p><p>　　check_password=true;</p><p>　　$('#password\\.info').css("color","green");</p><p>　　$('#password\\.info').html("<imag

113、e src='../images/right.gif'>密碼可用");</p><p><b>　　}</b></p><p><b>　　});</b></p><p>　　//檢查密碼是否一致</p><p>　　$('#txtRepeatPass'

114、;).blur(function(){</p><p><b>　　//檢查密碼非空</b></p><p>　　var password=$('#txtRepeatPass').val();</p><p>　　if(password==""){</p><p>　　$('#

115、password1\\.info').css("color","red");</p><p>　　$('#password1\\.info').html("<image src='../images/wrong.gif'>輸入不能為空");</p><p><b>　　

116、return;</b></p><p><b>　　}</b></p><p>　　//檢查密碼是否一致</p><p>　　var password1=$('#txtPassword').val();</p><p>　　if(password==password1){</p>

117、<p>　　$('#password1\\.info').css("color","green");</p><p>　　$('#password1\\.info').html("<image src='../images/right.gif'>密碼一致");</p>

118、<p>　　check_repeatpass=true;</p><p><b>　　}else{</b></p><p>　　$('#password1\\.info').css("color","red");</p><p>　　$('#password1\\.inf

119、o').html("<image src='../images/wrong.gif'>密碼不一致");</p><p>　　check_repeatpass=false;</p><p><b>　　}</b></p><p><b>　　});</b></p&

120、gt;<p>　　//當連接點擊時驗證碼改變</p><p>　　$('#change').click(function(){</p><p>　　$('#imgVcode').attr('src','checkcode.action?dt='+new Date().getTime());</p>

121、<p><b>　　});</b></p><p>　　//檢查驗證碼是否一致</p><p>　　$('#txtVerifyCode').blur(function(){</p><p>　　var txtcode=$('#txtVerifyCode').val();</p><p

122、>　　if(txtcode==""){</p><p>　　$('#number\\.info').css("color","red");</p><p>　　$('#number\\.info').html("<image src='../images/wrong.g

123、if'>驗證碼不能為空");</p><p><b>　　return;</b></p><p><b>　　}</b></p><p>　　$.post("check.action",{"txtcode":txtcode},function(data){&l

124、t;/p><p><b>　　if(data){</b></p><p>　　$('#number\\.info').css("color","green");</p><p>　　$('#number\\.info').html("<image src=

125、9;../images/right.gif'>驗證碼正確");</p><p>　　check_code=true;</p><p><b>　　}else{</b></p><p>　　$('#number\\.info').css("color","red");

126、</p><p>　　$('#number\\.info').html("<image src='../images/wrong.gif'>驗證碼不正確");</p><p><b>　　}</b></p><p><b>　　});</b></p>

127、;<p><b>　　});</b></p><p>　　$('#f').submit(function(){</p><p>　　$('#txtEmail').blur();</p><p>　　$('#txtNickName').blur();</p><p&