【正文】 詳細(xì)設(shè)計(jì)的根本目標(biāo)是確定應(yīng)該具體地實(shí)現(xiàn)所要求的系統(tǒng)，也就是說(shuō)，經(jīng)過(guò)這個(gè)階段的設(shè)計(jì)工作，應(yīng)該得出對(duì)目標(biāo)系統(tǒng)的精確描述，從而在編碼階段可以把這個(gè)描述直接翻譯成用某種程序設(shè)計(jì)語(yǔ)言書寫的程序。在項(xiàng)目開發(fā)時(shí)，使用一種穩(wěn)定成熟的框架是項(xiàng)目成功的重要因素。MVC的基本思想就是邏輯與顯示的分離，Model是應(yīng)用程序的主體部分，它表示業(yè)務(wù)數(shù)據(jù)或者業(yè)務(wù)邏輯，View是應(yīng)用程序中與用戶界面相關(guān)的部分，也就是用戶看到并與之交互的界面，Controller根據(jù)用戶的輸入，控制用戶界面數(shù)據(jù)的顯示和更新Model對(duì)象的狀態(tài)，MVC不僅實(shí)現(xiàn)了功能模塊和顯示模塊的分離，同時(shí)也提供了應(yīng)用系統(tǒng)的可維護(hù)性、可擴(kuò)展性、可移植性和組件的可重用性。模型、視圖與控制器的分離，使得一個(gè)模型可以具有多個(gè)顯示視圖。如果用戶通過(guò)某個(gè)視圖的控制器改變了模型的數(shù)據(jù)，所有其它依賴于這些數(shù)據(jù)的視圖都應(yīng)反映到這些變化。因此，無(wú)論何時(shí)發(fā)生了何種數(shù)據(jù)變化，控制器都會(huì)將變化通知所有的視圖，導(dǎo)致顯示的更新。新代運(yùn)動(dòng)網(wǎng)，根據(jù)上述運(yùn)行可行性分析以及系統(tǒng)的數(shù)據(jù)庫(kù)與系統(tǒng)的功能模塊概要設(shè)計(jì)后，結(jié)合實(shí)際情況，先將系統(tǒng)運(yùn)行平臺(tái)設(shè)置如下：1．服務(wù)器端硬件環(huán)境：CPU：Intel I3或更高 內(nèi)存：2G客戶端硬件環(huán)境：CPU：Intel Pentium4內(nèi)存：256MB由于客戶端主要用于瀏覽器和操作數(shù)據(jù)，所以對(duì)客戶端的硬件環(huán)境要求不高。2．服務(wù)器端軟件環(huán)境：Web服務(wù)器： Java 開發(fā)包：數(shù)據(jù)庫(kù)：開發(fā)工具：MyEclipse ，Dreamweaver 客戶端軟件環(huán)境：瀏覽器：Internet Explorer 由于客戶端主要用于瀏覽器和操作數(shù)據(jù)，所以客戶端軟件環(huán)境設(shè)置要求不高。本網(wǎng)站的主界面整體結(jié)構(gòu)為上下左中右結(jié)構(gòu)，上面部分為導(dǎo)航區(qū)，下面部分為版權(quán)，左面部分為動(dòng)態(tài)生成商品類別，右面部分為資訊區(qū)，中間部分為商品展示區(qū)。前臺(tái)分為以下幾部分1. 首頁(yè) a. 顯示某類商品b. 根據(jù)ID顯示圖片c. 搜索d. 注冊(cè)e. 登錄f. 自助服務(wù)2. 搜索界面 3. 搜索結(jié)果界面 4. 注冊(cè)a. 注冊(cè)頁(yè)面 b. 注冊(cè)成功 c. 注冊(cè)失敗 5. 登錄a. 登錄頁(yè)面 b. 登錄成功頁(yè)面 c. 登錄失敗頁(yè)面 6. 自主服務(wù) a. 修改密碼 b. 修改密碼成功 c. 修改密碼失敗 d. 修改其他信息 e. 修改其他信息成功 f. 修改其他信息失敗 7. 購(gòu)物界面a. 購(gòu)物車瀏覽 b. 結(jié)帳 后臺(tái)界面分為以下這幾個(gè)方面（在admin目錄下）1. 管理員登錄界面 2. a. 用戶管理b. 產(chǎn)品管理c. 類別管理d. 訂單管理3. 用戶管理a. 顯示用戶 b. 刪除用戶 c. 搜索用戶 4. 產(chǎn)品管理a. 產(chǎn)品顯示 b. 產(chǎn)品添加 c. 產(chǎn)品更改 d. 產(chǎn)品刪除 e. 產(chǎn)品搜索 5. 類別管理a. 類別顯示 b. 類別添加 c. 類別刪除 d. 類別修改 6. 訂單管理a. 訂單瀏覽 b. 訂單處理 以上所列界面將用dreamwaver設(shè)計(jì)，再用MyEclipse進(jìn)行編碼實(shí)現(xiàn)。1．實(shí)現(xiàn)目標(biāo)簡(jiǎn)單、友好、方便操作的主頁(yè)面。點(diǎn)擊”新用戶注冊(cè)”按鈕可以直接進(jìn)入注冊(cè)頁(yè)面。只有登陸后才可以進(jìn)行購(gòu)買商品。導(dǎo)航欄上的按鈕均可點(diǎn)擊后鏈接到對(duì)應(yīng)的頁(yè)面上?？蓜?dòng)態(tài)顯示商品類別、銷售排行、瀏覽歷史。2．實(shí)現(xiàn)過(guò)程圖4 1 首頁(yè)界面圖Fig 41 Home interface chart頁(yè)面名稱：。商品類別、銷售排行、瀏覽歷史用AJAX技術(shù)框架DWR實(shí)現(xiàn)。下圖是首頁(yè)界面。 各模塊詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)本節(jié)對(duì)網(wǎng)上商城的主要模塊進(jìn)行了詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)過(guò)程的論述。對(duì)于每個(gè)模塊的三層架構(gòu)進(jìn)行分析。并給出相應(yīng)的實(shí)現(xiàn)目標(biāo)與實(shí)現(xiàn)過(guò)程。本網(wǎng)站各個(gè)模塊均采用了MVC三層架構(gòu)的方式實(shí)現(xiàn)，對(duì)各個(gè)模塊進(jìn)行了代碼的設(shè)計(jì)和實(shí)施。其中，分別建立了清晰的action，DAO，service類用來(lái)實(shí)現(xiàn)。 用戶注冊(cè)模塊新用戶必須注冊(cè)，并且填入個(gè)人信息完成注冊(cè)后才能進(jìn)行商品的購(gòu)買等活動(dòng)。沒(méi)有帳號(hào)的用戶可以在首頁(yè)的用戶注冊(cè)模塊進(jìn)行注冊(cè)，而已有賬戶的用戶則可以直接登錄。該模塊界面如下圖。圖4 2首頁(yè)用戶注冊(cè)登錄模塊界面圖Fig 42 index user login chart圖4 3 用戶注冊(cè)界面圖Fig 43 Register interface點(diǎn)擊進(jìn)入新用戶注冊(cè)之后需要填寫個(gè)人信息等。見(jiàn)下圖在這個(gè)jsp頁(yè)面中用form表單收集數(shù)據(jù)并且提交給自身代碼如下：form method=post name=register action= onSubmit==true。input type=hidden name=action value=register/在收集用戶信息后包裝成user類進(jìn)行處理代碼如下(GBK)。String action = (action)。if(action != null amp。amp。 ().equals(register)) { String username = (username)。 String password = (password)。 String phone = (phone)。 String addr = (addr)。 User u = new User()。 (username)。 (password)。 (phone)。 (addr)。 (new Date())。 ()。 (注冊(cè)成功!恭喜!)。 return。}以上的代碼初步的運(yùn)用了MVC思想，()等這是Control控制層。()方法中調(diào)用DAO類中的save方法，改寫后臺(tái)數(shù)據(jù)庫(kù)這是Model模型層。 后臺(tái)用戶信息查看模塊用戶注冊(cè)完成后，管理員可以在后臺(tái)管理模塊中查看用戶的個(gè)人信息，并進(jìn)行管理。該模塊界面如下圖圖4 4 后臺(tái)管理模塊圖Fig 44 Admin Block Diagram相關(guān)代碼如下：public static ListUser getUsers() { ListUser users = new ArrayListUser()。 Connection conn = ()。 String sql = select * from user。 Statement stmt = (conn)。 ResultSet rs = (stmt, sql)。 try { while (()) { User u = new User()。 ((id))。 ((username))。 ((password))。 ((phone))。 ((addr))。 ((rdate))。 (u)。 } } catch (SQLException e) { ()。 } finally { (rs)。 (stmt)。 (conn)。 } return users。 }上面的代碼主要是從數(shù)據(jù)庫(kù)中讀出所有的用戶信息把每個(gè)用戶的信息包裝成users類也就是用戶群類，再返回到j(luò)sp頁(yè)面中進(jìn)行顯示。 產(chǎn)品管理模塊在本模塊中管理員可以方便的對(duì)產(chǎn)品進(jìn)行管理。包括瀏覽產(chǎn)品，設(shè)置類別，修改產(chǎn)品信息，刪除商品，添加商品等功能。主界面如下圖。圖4 5 產(chǎn)品管理模塊圖Fig 45 Product Management Block Diagram在這個(gè)界面中可以看到已經(jīng)加入了2個(gè)測(cè)試用商品。其相關(guān)核心代碼如下：final int PAGE_SIZE = 2。 //每頁(yè)顯示多少條記錄 final int PAGES_PER_TIME = 10。//每次顯示多少個(gè)頁(yè)碼鏈接 int pageNo = 1。 String strPageNo = (pageNo)。 if (strPageNo != null amp。amp。 !().equals()) { try { pageNo = (strPageNo)。 } catch (NumberFormatException e) { pageNo = 1。 } } if (pageNo = 0) pageNo = 1。 這段代碼其功能是讀出后臺(tái)數(shù)據(jù)庫(kù)中一共有多少商品并且進(jìn)行分頁(yè)顯示。在這里可以設(shè)置每頁(yè)顯示的商品數(shù)量和每頁(yè)可顯示的頁(yè)碼鏈接。這樣可以方便管理員用戶進(jìn)行操作。 在本模塊中可以進(jìn)行商品的刪除操作并且可以用復(fù)選框選擇所要?jiǎng)h除的商品進(jìn)行多個(gè)商品的一次性刪除。這樣方便了管理員的操作減輕了管理員的勞動(dòng)強(qiáng)度。如下圖所示（注意紅色標(biāo)識(shí)）。圖4 6 產(chǎn)品刪除界面圖Fig 46 Remove the interface of the product在這里運(yùn)用到了一段javaScript技巧。其核心代碼如下：script type=text/javascript function checkDelete() { var ids = (id)。 if() { for(var i=0。 i。 i++) { ids[i].checked=checked。 } } else { for(var i=0。 i。 i++) { ids[i].checked=。 } } } /script上面的這段javascript代碼主要實(shí)現(xiàn)的功能是判斷復(fù)選框。在頁(yè)面左下角處有個(gè)以復(fù)選框是可以選中后選擇當(dāng)前頁(yè)面的所有商品的。如果點(diǎn)擊全選則把當(dāng)前頁(yè)面的所有商品全部選中。如果用戶確定要?jiǎng)h除，則系統(tǒng)會(huì)提示您是否真的要?jiǎng)h除，這樣可以有效的避免管理員的失誤操作。在刪除成功后系統(tǒng)會(huì)在本頁(yè)面給出刪除成功的提示如下圖（注意紅色框提示）。在本模塊中也可以對(duì)商品信息進(jìn)行修改其界面如上圖。圖4 7 刪除成功提示圖Fig 47 Deleted successfully prompted plans注意紅色方框的提示。圖4 8 產(chǎn)品修改界面圖Fig 48 Modify the interface of the product chart商品的信息修改其實(shí)是分為兩個(gè)大步驟的。第一，在選擇所要修改的商品后系統(tǒng)會(huì)根據(jù)選擇的產(chǎn)品的ID讀出其相應(yīng)的信息并且在jsp頁(yè)面上顯示。然后管理員用戶會(huì)在這個(gè)界面對(duì)商品的信息進(jìn)行修改。第二，在修改信息填寫完成后點(diǎn)擊提交，系統(tǒng)會(huì)調(diào)用相應(yīng)的方法并且對(duì)后臺(tái)數(shù)據(jù)庫(kù)進(jìn)行更新操作。在本模塊中可以進(jìn)行商品的搜索如下圖所示。圖 49 產(chǎn)品搜索界面圖Fig 49 Product search interface可以使用兩種搜索模式一種是簡(jiǎn)單搜索一種是高級(jí)搜索。簡(jiǎn)單搜索是用戶可以隨意輸入一個(gè)關(guān)鍵詞，點(diǎn)擊提交按鈕系統(tǒng)便會(huì)跟據(jù)所提交的關(guān)鍵詞對(duì)所有商品的字段進(jìn)行搜索，只要是含有這個(gè)關(guān)鍵詞的商品條目都會(huì)返回。返回界面如下圖所示。圖410 產(chǎn)品顯示界面圖Fig 410 Product display interface chart其核心代碼如下所示： public int find(ListProduct products, int pageNo, int pageSize, String keyword) { String queryStr = where like 39。% + keyword + %39。 or like 39。% + keyword + %39。 return (products, pageNo, pageSize, queryStr)。 }在以上代碼中對(duì)用戶輸入的關(guān)鍵詞在數(shù)據(jù)庫(kù)中進(jìn)行搜索，并返回結(jié)果集。用戶也可以按照需求使用高級(jí)搜索。可以按類別產(chǎn)品名，市場(chǎng)價(jià)格，會(huì)員價(jià)格等條件進(jìn)行搜索。如下圖所示。高級(jí)搜索的設(shè)計(jì)可以便于商品的細(xì)化查詢搜索，用戶可以根據(jù)條件來(lái)搜索出目的商品。方便了管理員的操作減低了勞動(dòng)強(qiáng)度。圖411 高級(jí)搜索界面圖Fig 411 Advanced search interface chart在本模塊中可以進(jìn)行商品的添加如下圖。圖4 12產(chǎn)品添加界面圖Fig 412 Add interface of the product chart 用戶登錄模塊已有賬戶的用戶可以直接進(jìn)行登錄。界面如下。圖4 13 登錄注冊(cè)界面圖Fig 413 Login interface chart在輸入用戶名和密碼后可以便并點(diǎn)擊確認(rèn)后即完成登錄。相關(guān)核心代碼如下：try { User u = (username, password)。 (user, u)。} catch (UserNotFoundException e) { (())。 return。} catch (PasswordNotCorrectException e) { (())。 return。}用一個(gè)user對(duì)象來(lái)得到用戶信息并且調(diào)用check()方法來(lái)比對(duì)后臺(tái)數(shù)據(jù)庫(kù)中是否存在這個(gè)用戶，并檢查密碼是否正確。在這個(gè)過(guò)程中將user對(duì)象寫入到session中保持連接一旦關(guān)閉頁(yè)面后將自動(dòng)注銷登錄。如果密碼不對(duì)或者用戶不存在則給出相應(yīng)的提示。如果登錄成功則轉(zhuǎn)向用戶歡迎界面。 用戶信息模塊在這個(gè)模塊中用戶可以對(duì)自己的信息進(jìn)行瀏覽，修改并查看自己的訂單。界面如下圖：圖4 14 用戶信息