演示視頻： 

https://www.bilibili.com/video/BV1xJ4m147ei/

第5章  詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)

5.1 系統(tǒng)運(yùn)行平臺設(shè)置

本系統(tǒng)的運(yùn)行平臺設(shè)置分為硬件環(huán)境和軟件環(huán)境。

1．硬件環(huán)境

系統(tǒng)的硬件環(huán)境配置為處理器Pentium III800，內(nèi)存512M，硬盤1G。

2．軟件環(huán)境

系統(tǒng)的軟件環(huán)境配置為Windows XP操作系統(tǒng)，SQL Server 2005數(shù)據(jù)庫，JDK1.5、MyEclipse3.1開發(fā)工具包和Tomcat6.0服務(wù)器。

5.3  開發(fā)工具及技術(shù)簡介

以下內(nèi)容是對本系統(tǒng)所采用的開發(fā)工具和技術(shù)進(jìn)行的簡單介紹。

MyEclipse企業(yè)級工作平臺（MyEclipse Enterprise Workbench ，簡稱MyEclipse）是對Eclipse IDE的擴(kuò)展，利用它我們可以在數(shù)據(jù)庫和J2EE的開發(fā)、發(fā)布，以及應(yīng)用程序服務(wù)器的整合方面極大的提高工作效率。它是功能豐富的J2EE集成開發(fā)環(huán)境，包括了完備的編碼、調(diào)試、測試和發(fā)布功能，完整支持HTML, Struts, JSF, CSS, Javascript, SQL, Hibernate。

在結(jié)構(gòu)上，MyEclipse的特征可以分為7類：（1）J2EE模型；（2）WEB開發(fā)工具；（3）EJB開發(fā)工具；（4）應(yīng)用程序服務(wù)器的連接器；（5）J2EE項(xiàng)目部署服務(wù)；（6）數(shù)據(jù)庫服務(wù)；（7）MyEclipse整合幫助。

對于以上每一種功能上的類別，在Eclipse中都有相應(yīng)的功能部件，并通過一系列的插件來實(shí)現(xiàn)它們。MyEclipse結(jié)構(gòu)上的這種模塊化，可以在不影響其他模塊的情況下，對任一模塊進(jìn)行單獨(dú)的擴(kuò)展和升級。

簡單而言，MyEclipse是Eclipse的插件，也是一款功能強(qiáng)大的J2EE集成開發(fā)環(huán)境，支持代碼編寫、配置、測試以及除錯(cuò)。

SQL Server 2005是一種采用T-SQL語言，基于C/S模式的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。SQL Server 2005存儲(chǔ)和管理數(shù)據(jù)有以下優(yōu)點(diǎn)

（1）每個(gè)數(shù)據(jù)項(xiàng)都存儲(chǔ)在中央位置，所有用戶都可在這個(gè)位置使用它們；

（2）各個(gè)客戶端上不單獨(dú)存儲(chǔ)數(shù)據(jù)項(xiàng)復(fù)本，從而消除了因用戶不得不確保使用的信息相同所帶來的麻煩。系統(tǒng)不需要確保使用當(dāng)前值更新所有數(shù)據(jù)復(fù)本，因?yàn)橹醒胛恢脙H有一個(gè)復(fù)本；

（3） 可以在服務(wù)器上一次性定義業(yè)務(wù)和安全規(guī)則，并對所有的用戶平等執(zhí)行；

（4）可以在數(shù)據(jù)庫內(nèi)通過使用約束、存儲(chǔ)過程和觸發(fā)器來強(qiáng)制執(zhí)行規(guī)則。還可在服務(wù)器應(yīng)用程序中執(zhí)行規(guī)則，因?yàn)檫@些應(yīng)用程序也是許多客戶端訪問的中央資源；

（5）關(guān)系數(shù)據(jù)庫服務(wù)器只返回應(yīng)用程序所需要的數(shù)據(jù)，優(yōu)化了網(wǎng)絡(luò)流量；

（6）Zui大程度地降低硬件的成本，由于數(shù)據(jù)不是存儲(chǔ)在每個(gè)客戶端上，客戶端不必耗費(fèi)磁盤空間來存儲(chǔ)數(shù)據(jù)。客戶端無需在本地增加管理數(shù)據(jù)的功能，同時(shí)，服務(wù)器不需將處理能力耗費(fèi)在顯示數(shù)據(jù)上；

（7）可以配置服務(wù)器以優(yōu)化檢索數(shù)據(jù)所需的磁盤輸入/輸出容量，配置客戶端以優(yōu)化從服務(wù)器檢索數(shù)據(jù)的格式；

（8）可以將服務(wù)器存儲(chǔ)在一個(gè)相對安全的位置，并配備如不間斷電源供應(yīng)系統(tǒng)這樣的設(shè)備，這比完全保護(hù)每個(gè)客戶端更經(jīng)濟(jì)；

（9）維護(hù)任務(wù)（例如備份和恢復(fù)數(shù)據(jù)）得到簡化，因?yàn)檫@些任務(wù)都可以集中在中央服務(wù)器上執(zhí)行。

本系統(tǒng)采用MVC框架，MVC（Model-View-Controller）是一種設(shè)計(jì) 模式，它強(qiáng)制性地把應(yīng)用程序的輸入、處理和輸出分開。MVC把應(yīng)用程序分成3個(gè)核心：模型層、視圖層和控制層，它們分別擔(dān)負(fù)不同的任務(wù)。其中視圖層向用戶顯示相關(guān)的數(shù)據(jù)，并能接受用戶的輸入數(shù)據(jù)，但是它并不進(jìn)行任何實(shí)際的業(yè)務(wù)處理。模型層表示業(yè)務(wù)數(shù)據(jù)和業(yè)務(wù)邏輯?？刂茖咏邮沼脩糨斎氩⒄{(diào)用模型和視圖去完成用戶的需求。

本系統(tǒng)需要用到的Java相關(guān)技術(shù)有jsp技術(shù)、servlet技術(shù)、jdbc技術(shù)、SSH框架。其中，關(guān)鍵的技術(shù)難點(diǎn)在于Struts技術(shù)的運(yùn)用。Struts技術(shù)是基于MVC的Web應(yīng)用框架。在Struts框架中，模型層由實(shí)現(xiàn)業(yè)務(wù)邏輯的JavaBean組件構(gòu)成，控制層由ActionServlet和Action來實(shí)現(xiàn)，視圖層由一組JSP文件構(gòu)成。

5.4 系統(tǒng)首頁設(shè)計(jì)

本系統(tǒng)網(wǎng)站的主界面設(shè)計(jì)結(jié)構(gòu)采用了上左右的結(jié)構(gòu)，上部分為主功能菜單區(qū)，主要是顯示網(wǎng)站的主功能，左側(cè)為用戶注冊、登錄,公告瀏覽，珠寶首飾查詢，右部分為信息顯示區(qū)，銷售排行榜 主要是為方便用戶提供了一些Zui新上架的數(shù)碼產(chǎn)品信息。界面設(shè)計(jì)如圖3-1所示。

圖3-1　系統(tǒng)首頁

5.5 系統(tǒng)前臺基本功能設(shè)計(jì)與實(shí)現(xiàn)

本節(jié)對系統(tǒng)前臺主要功能設(shè)計(jì)進(jìn)行詳細(xì)的說明。

由于網(wǎng)上購物必須保證用戶的正確性、購物的安全性，需要對用戶資料進(jìn)行有效的管理，因此用戶管理是電子商務(wù)網(wǎng)站的重要內(nèi)容。它主要包括用戶注冊、登錄和驗(yàn)證、用戶注冊資料的修改更新和用戶注銷等功能。

1．注冊

（1）實(shí)現(xiàn)目標(biāo)

用戶單擊注冊后需要輸入密碼和確認(rèn)密碼、用戶真實(shí)姓名、住址、性別、E_mail、QQ。用戶只須填寫一個(gè)Web表單。這里需要用戶通過E_mail注冊是考慮到兩點(diǎn)：第一，用戶的E_mail是惟一的；第二，通過用戶的E_mail可以很方便快捷的與用戶取得聯(lián)系。用戶在提交注冊信息后，系統(tǒng)會(huì)對注冊頁面填寫的正確性進(jìn)行檢查。對于不符合要求的填寫會(huì)給出必要的提示，并返回修改；對于符合要求的注冊表單，用戶提交信息后也要返回相應(yīng)的歡迎信息，用戶提交的正確注冊信息將被存入系統(tǒng)的數(shù)據(jù)庫中。界面的設(shè)計(jì)如圖3-2所示。

圖3-2　用戶注冊模塊

2．登錄和驗(yàn)證

（1）用戶登錄程序流程描述

當(dāng)用戶輸入用戶名和密碼后首先要進(jìn)行身份驗(yàn)證，如果用戶存在，則成功登錄，反之，如果用戶不存在，提示錯(cuò)誤信息“輸入的用戶名或密碼不存在，請注冊”，返回登錄界面重新輸入用戶名和密碼。用戶登錄的程序流程圖如圖3-3所示。

圖3-3　用戶登錄程序流程圖

（2）實(shí)現(xiàn)目標(biāo)

對于本系統(tǒng)的購物過程而言，在用戶瀏覽珠寶首飾時(shí)，可以不進(jìn)行登錄，只有在使用購物車時(shí)，才需要登錄，以完成整個(gè)購物過程。用戶登錄用于驗(yàn)證用戶的用戶名和密碼，然后決定顧客進(jìn)入系統(tǒng)進(jìn)行操作，如進(jìn)行用戶修改的操作，購物車和結(jié)帳的操作等。界面的設(shè)計(jì)如圖3-4所示。

圖3-4　用戶登錄模塊

3．用戶修改和注銷

（1）實(shí)現(xiàn)目標(biāo)

已注冊的用戶只要登錄本系統(tǒng)后便可以通過單擊用戶修改按鈕進(jìn)行用戶修改操作，在此頁面中用戶可以更改自己的帳戶和詳細(xì)信息，如可以修改密碼、修改Email地址等個(gè)人信息。通過點(diǎn)擊提交按鈕完成修改操作。界面的設(shè)計(jì)如圖3-5所示。

圖3-5　用戶修改模塊

為了保證用戶購物的安全性，系統(tǒng)提供了不關(guān)閉瀏覽器而退出珠寶首飾在線銷售系統(tǒng)的功能，注銷功能是清除用戶在使用或登錄系統(tǒng)期間的所有Session信息。

（2）實(shí)現(xiàn)過程數(shù)碼產(chǎn)品展示模塊設(shè)計(jì)與實(shí)現(xiàn)

1．實(shí)現(xiàn)目標(biāo)

為了方便顧客選購珠寶首飾，本系統(tǒng)采用了兩種展示產(chǎn)品的方式。一種是以類別查詢?yōu)榛A(chǔ)查看珠寶首飾，另外一種是新品上架、特價(jià)產(chǎn)品和銷售排行的展臺。以銷售排行查看數(shù)碼產(chǎn)品為例，顧客在首頁的的銷售排行即可查看銷售排行，方便顧客查看暢銷的數(shù)碼產(chǎn)品相關(guān)信息及詳細(xì)信息。界面的設(shè)計(jì)如圖3-6所示。

圖3-6　銷售排行模塊

2．實(shí)現(xiàn)過程

所屬頁面名：index.jsp

通過查詢t_orderItem表中按銷售額字段goods_降序排列實(shí)現(xiàn)。

1．購物車程序流程描述

用戶選購珠寶首飾后添加到購物車中，在購物車中進(jìn)行查看，同時(shí)對不滿意的產(chǎn)品可以進(jìn)行移除，對要購買的產(chǎn)品可以調(diào)整數(shù)量，移除產(chǎn)品和清空產(chǎn)品。用戶決定購買產(chǎn)品后可以去收銀臺進(jìn)行結(jié)賬。購物車流程圖如圖3-7所示。

圖3-7　購物車程序流程圖

2．實(shí)現(xiàn)目標(biāo)

用戶購買產(chǎn)品的核心功能是購物車和訂單提交。購物車模塊的設(shè)計(jì)包括：顧客添加珠寶首飾到購物車和顧客對購物車的管理，如更新購買的珠寶首飾數(shù)量、清空購物車和將購物車中珠寶首飾從購物車中移除等。購物車要具有持續(xù)性，而且不限制用戶購買珠寶首飾的數(shù)量，也就是購物車可以顯示很多珠寶首飾。界面的設(shè)計(jì)如圖3-8所示。

3．實(shí)現(xiàn)過程

所屬頁面名：myCart.jsp核心代碼參見附錄3

頁面設(shè)計(jì)如表3-8所示。

圖3-8　購物車模塊

1．實(shí)現(xiàn)目標(biāo)

用戶選擇完珠寶首飾后，需要確認(rèn)購物車中內(nèi)容，即結(jié)帳，點(diǎn)擊下一步，此時(shí)頁面跳轉(zhuǎn)到結(jié)賬頁面。在結(jié)帳頁面，需要用戶填寫聯(lián)系地址、聯(lián)系電話、付款方式和送貨方式和備注信息，以便生成訂單。當(dāng)完成一次交易所需要的用戶方面的信息都已齊全，只須生成訂單即可進(jìn)入配送過程。如果用戶所填寫的訂單信息正確，系統(tǒng)會(huì)返回給用戶此次交易所產(chǎn)生的訂單號碼。界面的設(shè)計(jì)如圖3-9所示。

圖3-9　結(jié)賬模塊查看訂單模塊的設(shè)計(jì)與實(shí)現(xiàn)

1．實(shí)現(xiàn)目標(biāo)

用戶填寫完訂單并提交成功后可以通過查看訂單按鈕看到自己的訂單及詳細(xì)信息。界面的設(shè)計(jì)如圖3-10所示。

圖3-10　查看訂單模塊

2．實(shí)現(xiàn)過程

所屬頁面名：myOrder.jsp

具體代碼參見附錄3。

1．實(shí)現(xiàn)目標(biāo)

吸引顧客有很多種宣傳措施，本系統(tǒng)采用公告的方式進(jìn)行宣傳。利用類似流動(dòng)看板的方式顯示公告信息。在顧客點(diǎn)擊某一條公告信息時(shí)，系統(tǒng)可以自動(dòng)彈出一個(gè)頁面顯示具體的公告信息。界面的設(shè)計(jì)如圖3-11所示。

圖3-11　公告瀏覽模塊

2．實(shí)現(xiàn)過程

所屬頁面名：gonggaoDetail

首先使用gonggaoDAO中的save方法，將公告信息添加到數(shù)據(jù)庫中，在用戶點(diǎn)擊頁面中的公告后，通過gonggaoDAO下的findAll方法，將其調(diào)出，顯示到頁面中。

1．實(shí)現(xiàn)目標(biāo)

為了能夠了解客戶對我們的珠寶首飾的滿意程度，我們設(shè)計(jì)了留言模塊，讓用戶能夠在第一時(shí)間將問題反映給我們，以便我們及時(shí)改進(jìn)。界面的設(shè)計(jì)如圖3-12所示。

圖3-12　留言瀏覽模塊

2．實(shí)現(xiàn)過程

所屬頁面名：liuyanAll.jsp

首先通過判斷session中的userName是否為空，如果為空，則只能先登錄才能進(jìn)行留言。如果不為空，則留言人中顯示userName，使用獲取系統(tǒng)時(shí)將來給留言時(shí)間賦值?？蛻粼谳斎霕?biāo)題和內(nèi)容后，將其存儲(chǔ)到數(shù)據(jù)庫中，在客戶查看時(shí)再將其調(diào)出。

5.6 　系統(tǒng)后臺管理功能設(shè)計(jì)與實(shí)現(xiàn)

本節(jié)對系統(tǒng)后臺功能設(shè)計(jì)進(jìn)行詳細(xì)的說明。

1．實(shí)現(xiàn)目標(biāo)

該功能主要分布在管理員信息、用戶信息、珠寶首飾類別信息，訂單信息，公告信息和留言信息的處理。對這些信息操作的主要功能詳細(xì)設(shè)計(jì)包括對它們的添加、刪除、更新和查詢等操作，需要分別在基本信息中的每一個(gè)頁面中設(shè)計(jì)這些功能。當(dāng)對這些基本信息進(jìn)行添加、刪除和更新操作時(shí)，需要將這些操作所執(zhí)行的結(jié)果返回到本系統(tǒng)的數(shù)據(jù)庫中，并能夠在相應(yīng)的頁面中刷新顯示新的結(jié)果集。需要用SQL語句將這些信息添加到數(shù)據(jù)庫中。模塊的輸出是操作信息成功的提示信息。對于在某一頁面中的查詢功能，此頁面要能夠刷新顯示出此查詢結(jié)果信息。以客戶信息管理理為例。界面的設(shè)計(jì)如圖3-13所示。

圖3-13　客戶信息管理模塊

2．實(shí)現(xiàn)過程

所屬頁面名：userMana.jsp

客戶管理主要是使用userDAO中下的findById和findAll方法來刪除和獲取數(shù)據(jù)庫中的數(shù)據(jù)。進(jìn)入客戶管理界面時(shí)通過findAll方法來顯示所有用戶的信息，點(diǎn)擊刪除時(shí)，通過findById方法獲取指定的用戶ID，使用sql語句進(jìn)行操作。

1．實(shí)現(xiàn)目標(biāo)

該模塊是針對用戶訂單信息和訂單明細(xì)信息的管理功能進(jìn)行的詳細(xì)設(shè)計(jì)，主要是對用戶訂單信息和訂單明細(xì)信息的查看、刪除和受理訂單的操作。管理員應(yīng)該可以查看系統(tǒng)中已處理的訂單和未經(jīng)處理的訂單信息，用戶訂單信息和訂單明細(xì)信息在不同的頁面顯示。界面的設(shè)計(jì)如圖3-14所示。

圖3-14　訂單管理模塊

2．實(shí)現(xiàn)過程

所屬頁面名：orderMana.jsp

訂單管理模塊使用了buyAction中的方法，當(dāng)用戶提交訂單時(shí)，訂單狀態(tài)默認(rèn)為未受理。管理員查看訂單時(shí)調(diào)用了orderMana()方法將訂單顯示到頁面中，點(diǎn)擊刪除時(shí)調(diào)用orderDelByAd()方法將通過訂單的ID對指定的訂單進(jìn)行那個(gè)刪除操作，點(diǎn)擊受理訂單時(shí)調(diào)用orderShouli()方法將訂單狀態(tài)改為已受理。管理員查看訂單明細(xì)時(shí)通過 orderDetail()方法通過訂單ID將指定的訂單明細(xì)顯示到頁面中。

具體代碼參照附錄3。

5.6.3  數(shù)碼產(chǎn)品信息管理設(shè)計(jì)與實(shí)現(xiàn)

1．實(shí)現(xiàn)目標(biāo)

在珠寶首飾管理模塊中除了基本的信息管理功能外，為了方便顧客瀏覽到珠寶首飾的真實(shí)外貌，在添加珠寶首飾模塊中增加上傳珠寶首飾圖片的功能。

管理員在珠寶首飾添加頁面中輸入添加的珠寶首飾基本信息，點(diǎn)擊提交后進(jìn)入上傳圖片頁面。在珠寶首飾信息管理中，我將珠寶首飾分為特價(jià)和非特價(jià)珠寶首飾來管理。此頁面中能夠顯示出已輸入的特價(jià)珠寶首飾基本信息，在上傳圖片位置上添加文件后點(diǎn)擊提交，提交成功后有提示信息彈出。在管理員查看珠寶首飾信息時(shí)，將鼠標(biāo)放到查看圖片上就可以查看圖片界面的設(shè)計(jì)如圖3-15所示。

圖3-15　珠寶首飾信息管理模塊

2．實(shí)現(xiàn)過程

所屬頁面名：goodsManaYesTejia.jsp

本模塊主要是對珠寶首飾表進(jìn)行管理，所以就是一些查詢和刪除操作，我在做的時(shí)候，主要講珠寶首飾分為特價(jià)和非特價(jià)珠寶首飾，在管理時(shí)也是分開管理，主要通過判斷goodsIsnottejia來區(qū)分是否為特價(jià)珠寶首飾。

1．實(shí)現(xiàn)目標(biāo)

在各大熱門網(wǎng)站上都有公共的出現(xiàn)，該模塊的建立也是為了通過實(shí)現(xiàn)發(fā)布公告，給顧客提供方便的操作，讓客戶能夠及時(shí)的了解商城的活動(dòng)情況。界面的設(shè)計(jì)如圖3-16所示。

                       圖3-16　公告管理模塊

2．實(shí)現(xiàn)過程

所屬頁面名：gonggaoMana.jsp

在gonggaoAction中，調(diào)用gonggaoAdd方法進(jìn)行添加操作，使管理員能添加一個(gè)新公告，管理員查看時(shí)則調(diào)用了gonggaoMana()方法，來顯示所有的公告信息，要進(jìn)行刪除操作就會(huì)調(diào)用gonggaoDel()方法進(jìn)行刪除。

1．實(shí)現(xiàn)目標(biāo)

客戶對商城的珠寶首飾有任何意見，都可以在留言模塊中進(jìn)行留言，方便管理員查看，商城會(huì)及時(shí)處理問題。界面的設(shè)計(jì)如圖3-17所示。

圖3-17　留言信息管理模塊

2．實(shí)現(xiàn)過程

所屬頁面名：liuyanMana.jsp

留言功能，主要先依靠liuyanDAO.findAll方法來獲取所有留言，然后調(diào)用liuyanMana來顯示，管理員的添加操作是調(diào)用liuyanAdd方法實(shí)現(xiàn)的，留言的時(shí)間定義是用獲取系統(tǒng)時(shí)間的方法來定義的。刪除留言時(shí)則調(diào)用liuyanDel方法來實(shí)現(xiàn)。

5.7 　本章小結(jié)

本章進(jìn)行了此系統(tǒng)的詳細(xì)設(shè)計(jì)的介紹，我們可以對本系統(tǒng)的設(shè)計(jì)有了一個(gè)細(xì)致全面的了解。前臺模塊詳細(xì)介紹了用戶維護(hù)、銷售排行、購物車、結(jié)賬、查看訂單、留言模塊和公告瀏覽模塊的設(shè)計(jì)和實(shí)現(xiàn)的過程，同時(shí)后臺模塊介紹了客戶信息管理、訂單管理、珠寶首飾信息管理、公告管理和留言管理的設(shè)計(jì)和實(shí)現(xiàn)的過程。本系統(tǒng)詳細(xì)設(shè)計(jì)的原則是采用結(jié)構(gòu)化的設(shè)計(jì)方法，改善控制結(jié)構(gòu)，降低程序的復(fù)雜程度，從而提高程序的可讀性、可測試性和可維護(hù)性。