【文章內(nèi)容簡(jiǎn)介】 根據(jù)該系統(tǒng)的實(shí)際需要， 可以分為前臺(tái)用戶使用部分和后臺(tái)商家使用的兩個(gè)部分，首先介紹前臺(tái) 消費(fèi)者操作模塊，如圖 所示。 圖 前臺(tái) 消費(fèi)者 操作模塊 （ 1） 瀏覽商品 用 戶進(jìn)入該購(gòu)物平臺(tái)后，可以在不登錄的情況下進(jìn)行商品的瀏覽，由于該平臺(tái)只是買服飾的，所以此時(shí)所有的商品都顯示出來，可以根據(jù)品牌和類別進(jìn)行篩選。 （ 2） 商品詳情 當(dāng)用戶點(diǎn)擊某個(gè)商品后，進(jìn)入該商品的詳情頁(yè)，詳情頁(yè)上顯示該商品的價(jià)格，運(yùn)費(fèi)， 瀏覽商品 商品詳情 用戶登錄 購(gòu)物車管理 訂單管理 修改購(gòu)物車 提交到訂單 查看訂單 提交訂單 填寫訂單 個(gè)人資料 我的訂單 收貨地址 個(gè)人中心 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 9 尺碼，顏色，庫(kù)存，購(gòu)買限制等信息，不同的顏色可能對(duì)應(yīng)的尺碼不全，用戶在選擇了顏色和尺碼其中一個(gè)屬性時(shí)，另一個(gè)屬性是否可點(diǎn)動(dòng)態(tài)顯示。商品詳情頁(yè)上可以點(diǎn)擊加入購(gòu)物車直接向購(gòu)物車中添加這個(gè)商品，也可以點(diǎn)擊購(gòu)買直接進(jìn)入購(gòu)物車頁(yè)面。 （ 3） 修改購(gòu)物車 進(jìn)入購(gòu)物車頁(yè)面后，可以對(duì)購(gòu)物車中的商品進(jìn)行個(gè)數(shù)的加減 ，同時(shí)最大購(gòu)買數(shù)量滿足該商品的購(gòu)買限制，購(gòu)買數(shù)量減到 0 后自動(dòng)提示刪除該購(gòu)物項(xiàng)，在購(gòu)物車中對(duì)商品個(gè)數(shù)的增減同時(shí)動(dòng)態(tài)顯示用戶需付款總額。 （ 4） 提交到訂單 用戶在購(gòu)物車中點(diǎn)擊結(jié)算后，判斷用戶是否已經(jīng)登錄。如果已經(jīng)登錄了就進(jìn)入訂單確認(rèn)頁(yè)，如果沒有登錄就進(jìn)入登錄頁(yè)面進(jìn)行登錄，登錄完成后頁(yè)面會(huì)跳到剛剛的購(gòu)物車頁(yè)面 ，再次點(diǎn)擊結(jié)算后跳轉(zhuǎn)到訂單確認(rèn)頁(yè)。 （ 5） 用戶登錄 用戶在進(jìn)入登錄頁(yè)面后，需要輸入用戶名，密碼和驗(yàn)證碼。當(dāng)三者都驗(yàn)證通過后才算登錄成功，登錄成功后跳轉(zhuǎn)到上一個(gè)頁(yè)面。 （ 6） 填寫訂單 用戶在訂單頁(yè)面選擇收貨地址和付款方式后，可以 點(diǎn)擊確認(rèn)訂單進(jìn)入下一步。 （ 7） 提交訂單 用戶在確認(rèn)信息無誤后，點(diǎn)擊確認(rèn)，顯示該次交易的訂單詳情。 后臺(tái)商家管理模塊，如圖 所示。 圖 后臺(tái)商家管理 模塊 后臺(tái)系統(tǒng) 品牌刪除 商品管理 訂單查看 品牌查看 商品修改 商品刪除 商品查看 品牌管理 品牌修改 商品添加 品牌添加 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 10 本系統(tǒng)后臺(tái)部分管理功能： （ 8） 品牌管理 對(duì)品牌信息進(jìn)行管理，包括查看品牌信息，對(duì)品牌進(jìn)行增加，修改和刪除操作。 （ 9） 商品管理 對(duì)商品信息進(jìn)行管理，包括查看商品信息，對(duì)商品進(jìn)行添加，修改和刪除操作。 （ 10） 訂單查看 對(duì)用戶提交的訂單進(jìn)行查看，可以看到用戶訂單的所有信息 。 網(wǎng)上購(gòu)物平臺(tái)系統(tǒng)非功能性需求 （ 1） 實(shí)用性：系統(tǒng)的實(shí)用是非常重要的，必須確保系統(tǒng)可以實(shí)現(xiàn)目標(biāo)和操作 方便。 （ 2） 友好性：由于系統(tǒng)界面簡(jiǎn)單，操作主線明顯，用戶可以很快上手購(gòu)買商品完成交易。用戶可以在不登錄的情況下 瀏覽商品， 向購(gòu)物車中添加商品，只有在確認(rèn)購(gòu)買的情況下才會(huì)引導(dǎo)用戶進(jìn)行登錄完成交易。 （ 3） 可靠性：本購(gòu)物平臺(tái)使用的是 C3P0 數(shù)據(jù)庫(kù)連接池，保證數(shù)據(jù)庫(kù)連接的穩(wěn)定性。項(xiàng)目中圖片資源較多，為了保證項(xiàng)目運(yùn)行流暢，減小服務(wù)器壓力，將項(xiàng)目中商品相關(guān)的圖片單獨(dú)放到一個(gè)圖片服務(wù)器中。 （ 4） 健壯性：用戶在 使用過程中，難免會(huì)輸入非法數(shù)據(jù)。對(duì)于非法數(shù)據(jù)，系統(tǒng)前臺(tái)會(huì)進(jìn)行判斷并對(duì)用戶做出提醒，修改為正確格式的數(shù)據(jù) 。 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 11 4 網(wǎng)上購(gòu)物平臺(tái) 概要設(shè)計(jì) 網(wǎng)上購(gòu)物平臺(tái)設(shè)計(jì)目標(biāo) 該購(gòu)物平臺(tái)設(shè)計(jì)為的是能給客戶的對(duì)戶外裝備的特殊需求提供方便，某一個(gè)切面的商品平臺(tái)能讓用戶更快的挑選到自己需要的商品。所以開發(fā)這個(gè)主賣沖鋒衣的網(wǎng)站，就是為了實(shí)現(xiàn)用戶對(duì)這方面的需求的時(shí)候能夠快速購(gòu)買到自己需要的商品。本購(gòu)物平臺(tái)使用方便簡(jiǎn)單，操作主線明顯，不僅方便用戶購(gòu)買，而且方便商家管理?？梢欢ǔ潭壬辖鉀Q商家在實(shí)體店銷售服飾的巨大成本問題。 網(wǎng)上購(gòu)物平臺(tái)系統(tǒng)可行性分析 在經(jīng)過一系列的系統(tǒng)需求獲取，優(yōu)化和測(cè)試，由于網(wǎng)上購(gòu)物平臺(tái)的特點(diǎn)是商品信息量很大，為了能讓商家能夠方便快捷的管理和維護(hù)商品信息，滿足廣大客戶日益增長(zhǎng)的數(shù)量，達(dá)到操作過程中的直觀，方便，實(shí)用，安全。系統(tǒng)具有安全性，擴(kuò)展性，高效性，穩(wěn)定性。 1，安全性：項(xiàng)目中用戶密碼采用 MD5 加密，即使數(shù)據(jù)庫(kù)管理員也是不能夠查看用戶的密碼的。項(xiàng)目中通過 URL 向后臺(tái)傳遞數(shù)據(jù)的時(shí)候傳遞的是商品的數(shù)量和 id 等信息，價(jià)錢由后臺(tái)計(jì)算得出再顯示，也有效避免了通過篡改 URL 路徑導(dǎo)致數(shù)據(jù)不正確的情況。 2，擴(kuò)展性：項(xiàng) 目使用了 SpringMVC 的架構(gòu)，項(xiàng)目的數(shù)據(jù)庫(kù)訪問層，控制層，業(yè)務(wù)邏輯處理層等分層明確，如需增加新的模塊，無需修改代碼，只需要增加代碼即可，符合開閉原則。 3，高效性：項(xiàng)目操作簡(jiǎn)單，客戶和商家可以很方便的進(jìn)行操作。數(shù)據(jù)訪問層使用的是 Mybatis 框架，可以對(duì)項(xiàng)目中用到的 SQL 語(yǔ)句進(jìn)行一定程度的優(yōu)化，提高數(shù)據(jù)庫(kù)訪問效率。項(xiàng)目中還配置了第二臺(tái)服務(wù)器專門用戶存放商品中的各類圖片，這樣保證部署項(xiàng)目的服務(wù)器運(yùn)行流暢，提高用戶的訪問體驗(yàn)。 4，穩(wěn)定性：項(xiàng)目部署的服務(wù)器運(yùn)行穩(wěn)定，項(xiàng)目中盡可能減少用戶輸入的內(nèi)容，增加一些固 定的選擇項(xiàng)，也防止用戶錯(cuò)誤數(shù)據(jù)的錄入，減少 Bug 的發(fā)生。 網(wǎng)上購(gòu)物平臺(tái)功能架構(gòu)及設(shè)計(jì) 本課題要實(shí)現(xiàn)網(wǎng)上快捷購(gòu)物，在開始設(shè)計(jì)時(shí)要求交互界面友好， 操作主線明顯， 便于用戶 快速上手操作。系統(tǒng)具有前臺(tái) 消費(fèi)者 使用模塊和后臺(tái)商家管理模塊兩大模塊。系統(tǒng)功能結(jié)構(gòu)圖 如 圖 所示 。 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 12 圖 系統(tǒng)功能結(jié)構(gòu)圖 4. 3. 1 前臺(tái)消費(fèi)者模塊 前臺(tái)消費(fèi)者模塊包括幾個(gè)功能，具體功能如下： （ 1） 瀏覽商品：用戶首先進(jìn)入網(wǎng)站后瀏覽商品，可以根據(jù)自己 的選擇點(diǎn)擊某個(gè)商品，進(jìn)入該商品的詳情頁(yè)。 （ 2） 商品詳情：當(dāng)用戶進(jìn)入商品詳情頁(yè)后，顯示該商品的詳情，包括商品大圖顯示，商品價(jià)格，庫(kù)存數(shù)，可選顏色，可選尺碼，需要購(gòu)買的數(shù)量等等。在這個(gè)頁(yè)面也可以點(diǎn)擊登錄進(jìn)行用戶登錄。頁(yè)面上主要有加入購(gòu)物車按鈕和購(gòu)買按鈕，點(diǎn)擊加入購(gòu)物車按鈕后直接向購(gòu)物車中添加該購(gòu)物項(xiàng)，點(diǎn)擊購(gòu)買按鈕跳轉(zhuǎn)到購(gòu)物車結(jié)算頁(yè)面。 （ 3） 購(gòu)物車詳情：購(gòu)物車頁(yè)面中，顯示了當(dāng)前購(gòu)物車中所有的商品以及購(gòu)買數(shù)量?jī)r(jià)格等信息，用戶可以對(duì)購(gòu)物車中的商品數(shù)量進(jìn)行增刪，最多數(shù)量不能超過該商品的最大購(gòu)買限制，最小到 0 即刪除該 條購(gòu)物項(xiàng)，對(duì)商品數(shù)量增減的同時(shí)頁(yè)面動(dòng)態(tài)顯示客戶所需付金額。 （ 4） 填寫訂單：當(dāng)用戶在購(gòu)物車頁(yè)面點(diǎn)擊結(jié)算按鈕后，如果用戶未登錄，則引導(dǎo)用戶進(jìn)行登錄，如果已經(jīng)登錄成功，則進(jìn)入訂單填寫頁(yè)面，此時(shí)只需要用戶選擇收貨地址和付款方式，訂單中所選購(gòu)商品詳情已經(jīng)不能再改變。此時(shí)點(diǎn)擊提交訂單后，生成訂單，進(jìn)入訂單詳情頁(yè)。 （ 5） 訂單詳情頁(yè)：訂單詳情頁(yè)上顯示當(dāng)前訂單的訂單號(hào)，配送方式，應(yīng)付現(xiàn)金，預(yù)計(jì)到貨時(shí)間，支付方式，支付要求。 （ 6） 登錄頁(yè)面：用戶進(jìn)入登錄頁(yè)面后，需要輸入用戶名，密碼和驗(yàn)證碼，三者都驗(yàn)證通過后才能登錄成功，返 回上一個(gè)頁(yè)面。 網(wǎng)上購(gòu)物平臺(tái) 前臺(tái)消費(fèi)者模塊 后臺(tái)商家管理模塊 瀏覽商品 商品詳情 購(gòu)物車詳情 填寫訂單 訂單詳情頁(yè) 登錄頁(yè)面 品牌管理 商品管理 查看訂單 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 13 4. 3. 2 后臺(tái)商家管理模塊 后臺(tái)商家管理模塊主要分三大 模塊 ，一是品牌管理， 主要操作就是 對(duì)品牌進(jìn)行增刪改查，二是對(duì)某個(gè)品牌的商品進(jìn)行增刪改查，三是查看由前臺(tái)用戶提交成功的訂單 。 （ 1） 品牌管理 ： 首先使用分頁(yè)顯示所有的品牌，包括品牌名稱，品牌圖片，品牌描述等信息，可以添加品牌，需要上傳圖片填寫品牌名稱和描述等信息，品牌的刪除和修改，刪除的時(shí)候有提示， 提示用戶 是否確認(rèn)刪除。修改的時(shí)候頁(yè)面內(nèi)容回顯。 （ 2） 商品管理 :： 商家點(diǎn)擊商品管理后，首先按照分頁(yè)顯示所有的商品信息，可以根據(jù)品牌名稱或者商品名 稱或者是否上下架進(jìn)行檢索商品。商品添加需要填寫商品基本信息，如商品類型，名稱，品牌，毛重，材質(zhì)，顏色，尺碼，主圖片。還需要填寫商品描述，主要是上傳一張長(zhǎng)圖片作為商品介紹。最后需要填寫一個(gè)包裝清單，該商品發(fā)貨具體有哪幾件物品。商品修改頁(yè)面和商品添加是相同的，只是商品修改頁(yè)面上顯示了該商品的所有信息，有頁(yè)面回顯。商品管理模塊還包括庫(kù)存管理，點(diǎn)擊某個(gè)商品的庫(kù)存管理后進(jìn)入庫(kù)存管理頁(yè)面，根據(jù)詳細(xì)的尺碼和顏色區(qū)別每一件商品，可以填寫商品的價(jià)格，庫(kù)存，購(gòu)買限制和運(yùn)費(fèi)等信息。 （ 3） 查看訂單：本模塊首先顯示一個(gè)訂單列表，點(diǎn) 擊某個(gè)訂單詳情后顯示該訂單詳情，包含收貨人地址，是否付款，付款方式，金額，訂單編號(hào)，以及所購(gòu)商品的所有信息，方便商家進(jìn)行配貨發(fā)貨。 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 14 5 系統(tǒng)詳細(xì)設(shè)計(jì) 前臺(tái)消費(fèi)者模塊 前臺(tái)消費(fèi)者模塊的服務(wù)對(duì)象是消費(fèi)者，模塊功能就是讓消費(fèi)者能夠快速找到自己想要的商品。下面就具體介紹該模塊下的功能： 瀏覽商品模塊 前臺(tái)頁(yè)面首先是瀏覽商品，由首頁(yè)進(jìn)入沖鋒衣商品模塊，顯示所有的沖鋒衣商品列表。包括商品的預(yù)覽圖，商品名價(jià)格等信息，還可以根據(jù)品牌名和類型進(jìn)行商品的檢索，整個(gè)商品列表支持分頁(yè)顯示。 （ 1） 瀏覽商品模塊 要解決的主要問題 ： ? 從后臺(tái)查詢商品相關(guān)數(shù)據(jù)，業(yè)務(wù)處理層整合數(shù)據(jù)，分頁(yè)顯示到商品列表頁(yè)。 ? 商品圖片從圖片服務(wù)器讀取顯示到前臺(tái)。 ? 可以根據(jù)商品的品牌名和類型進(jìn)行商品檢索。 （ 2） 瀏覽商品模塊相關(guān)問題的解決方案 ： 針對(duì)以上幾個(gè)要解決的問題，提出以下解決方案，并運(yùn)用實(shí)施。 ? 當(dāng)在頁(yè)面顯示商品列表的時(shí)，后臺(tái)控制層相應(yīng)的 Service 實(shí)現(xiàn)來查詢出集合對(duì)象，像是一些商品屬性的集合直接 Model 回前臺(tái)，商品集合是通過單獨(dú)的分頁(yè)對(duì)象處理得到，分別 Model 回前臺(tái)后，在前臺(tái)頁(yè)面使用 JSTL 標(biāo)簽結(jié)合 EL 表達(dá)式進(jìn)行遍歷輸出。 ? 頁(yè)面上 根據(jù)品牌名稱和品牌類型進(jìn)行商品檢索，結(jié)合 JS 代碼來控制向后臺(tái)傳遞的參數(shù)。 ? 商品圖片根據(jù)數(shù)據(jù)庫(kù)中對(duì)應(yīng)的 URL 路徑放置到頁(yè)面的中的 Src 屬性中，實(shí)現(xiàn)從圖片服務(wù)器讀取圖片并顯示到頁(yè)面上。 商品詳情模塊 （ 1） 商品詳情模塊要解決的主要問題 ： ? 在 商品列表頁(yè)點(diǎn)擊某個(gè)商品后進(jìn)入該商品的商品詳情頁(yè)，并顯示該商品的 所有 詳細(xì)信息。 ? 該商品對(duì)應(yīng)的最小銷售單元顯示要正確，對(duì)于顏色和尺碼不全的商品要特殊處理，實(shí)現(xiàn)先點(diǎn)擊選擇某種顏色，該顏色有哪幾種尺碼可選；先點(diǎn)擊選擇尺碼，該尺碼有哪幾種顏色可選。 ? 可以直接加入購(gòu)物車，也可 以直接點(diǎn)擊購(gòu)買進(jìn)入購(gòu)物車頁(yè)面。 （ 2） 商品詳情模塊相關(guān)問題的解決方案 ： 針對(duì)以上幾個(gè)要解決的問題，提出以下解決方案，并運(yùn)用實(shí)施。 ? 當(dāng)點(diǎn)擊某個(gè)商品后，向后臺(tái)傳遞該商品的 Id，從后臺(tái)查出該商品對(duì)象的所有屬性值。同時(shí)查出該商品相關(guān)的所有最小銷售單元的對(duì)象集合，同時(shí)由于前臺(tái)頁(yè)面上需要顯示 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 15 該商品具有哪幾種顏色，需要對(duì)該商品的所有最小銷售單元的顏色去重，單獨(dú)放到一個(gè)集合中 Model 回頁(yè)面顯示。 ? 在商品詳情頁(yè)上，通過在尺碼和顏色按鈕上添加點(diǎn)擊事件，通過 Ajax 實(shí)現(xiàn)選擇顏色對(duì)應(yīng)可點(diǎn)的尺碼，選擇尺碼對(duì)應(yīng)可點(diǎn)的顏色。 ? 如果點(diǎn)擊 加入購(gòu)物車或者是點(diǎn)擊購(gòu)買直接進(jìn)入購(gòu)物車頁(yè)面，實(shí)際上都是把當(dāng)前頁(yè)面上商品的最小銷售單元加入到當(dāng)前的購(gòu)物車中，最小銷售單元也就是某個(gè)商品的具體到某個(gè)顏色和某個(gè)尺碼。 購(gòu)物車模塊 （ 1） 購(gòu)物車模塊要解決的主要問題 ： ? 從商品詳情頁(yè)點(diǎn)擊購(gòu)買直接跳轉(zhuǎn)到購(gòu)物車頁(yè)面，此時(shí)顯示當(dāng)前購(gòu)物車中的所有信息，包括商品的名稱，單價(jià)，數(shù)量等。 ? 購(gòu)買商品的 數(shù)量要求可以點(diǎn)擊左右的加減號(hào)按鈕進(jìn)行加 或 減，同時(shí)對(duì)應(yīng) 頁(yè)面上 購(gòu)物車金額小計(jì)和應(yīng)付總額 動(dòng)態(tài) 顯示。 ? 用戶向購(gòu)物車中添加數(shù)據(jù)無需登錄，只有結(jié)算需要生成訂單時(shí)才進(jìn)行登錄。 （ 2） 購(gòu)物車模塊相 關(guān)問題的解決方案 ： 針對(duì)以上幾個(gè)要解決的問題，提出以下解決方案，并運(yùn)用實(shí)施。 ? 由于向購(gòu)物車中添加購(gòu)物項(xiàng)是無需登錄的，所以為了存儲(chǔ)購(gòu)物車，需要把購(gòu)物車對(duì)象放到 Cookie 中， 由于 Cookie 中不能放置對(duì)象，所以 使用 SpringMVC 框架提供的一個(gè)流把購(gòu)物車對(duì)象轉(zhuǎn)