畢業(yè)設(shè)計（論文）基于JSP的化妝品在線銷售系統(tǒng)的設(shè)計與開發(fā)

1、目目 錄錄化妝品在線銷售系統(tǒng)的設(shè)計與開發(fā) .1摘 要 .1第 1 章 緒論 .21.1 課題背景21.2 課題研究的意義21.3 化妝品銷售網(wǎng)站的現(xiàn)狀3第 2 章 系統(tǒng)需求分析 .32.1 化妝品銷售網(wǎng)站背景32.2 網(wǎng)站的市場定位分析42.3 網(wǎng)站的開發(fā)工具42.4 網(wǎng)站業(yè)務(wù)流程4第 3 章 系統(tǒng)總體設(shè)計 .53.1 系統(tǒng)功能概述53.2 系統(tǒng)功能分析63.3 系統(tǒng)功能模塊劃分6第 4 章 數(shù)據(jù)庫的設(shè)計與實現(xiàn) .74.1 數(shù)據(jù)庫需求分析74.2 數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計84.3 數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計11第 5 章 網(wǎng)站的風(fēng)格及頁面設(shè)計 .145.1 頁面設(shè)計的原則145.1.1 線條的使用 .145

2、.1.2 色彩的選擇 .155.2 網(wǎng)站設(shè)計構(gòu)思155.3 網(wǎng)站的風(fēng)格版面設(shè)計165.4 商城主頁設(shè)計175.5 客戶端界面結(jié)構(gòu)設(shè)計185.5.1 界面頭、尾設(shè)計 .185.5.2 界面左惻快捷菜單設(shè)計 .19第 6 章 系統(tǒng)詳細(xì)設(shè)計 .196.1 客戶端界面設(shè)計196.1.1 商品（化妝品）信息瀏覽模塊 .196.1.2 購物車管理模塊設(shè)計 .206.1.3 提交訂單模塊設(shè)計 .236.2 系統(tǒng)調(diào)試運行26結(jié) 論 .28致 謝 .29參考文獻(xiàn) .30 化妝品在線銷售系統(tǒng)的設(shè)計與開發(fā)化妝品在線銷售系統(tǒng)的設(shè)計與開發(fā)摘 要電子商務(wù)形式的網(wǎng)上商店具有高效、快捷，信息暢通的特點,還可以很大程度上降低銷

3、售成本。本文通過在線化妝品銷售系統(tǒng)的建設(shè)以實現(xiàn)商業(yè)零售企業(yè)的信息化管理。著重論述了在線化妝品銷售系統(tǒng)功能的實現(xiàn)與設(shè)計過程。在系統(tǒng)的設(shè)計與開發(fā)過程中嚴(yán)格遵守軟件工程的規(guī)范，運用軟件設(shè)計模式，從而減少系統(tǒng)模塊間的偶合，力求做到系統(tǒng)的穩(wěn)定性、可重用性和可擴充性。本系統(tǒng)功能主要包括會員注冊、帳戶管理、購物車、搜索、結(jié)帳等基本功能。系統(tǒng)運用 jsp 技術(shù)實現(xiàn)，后端數(shù)據(jù)庫采用 access 作為數(shù)據(jù)庫服務(wù)器，前端開發(fā)工具使用 macromedia dreamweaver 8。本系統(tǒng)具有用戶使用簡單、界面直觀等優(yōu)點，可以幫助顧客更快更準(zhǔn)的了解化妝品市場信息，以便取得物美價廉的化妝品。關(guān)鍵詞：電子商務(wù)，網(wǎng)上商

4、店，化妝品購物 第 1 章 緒論1.1 課題背景近年來，隨著 internet 的迅速崛起，互聯(lián)網(wǎng)已日益成為收集提供信息的最佳渠道并逐步進(jìn)入傳統(tǒng)的流通領(lǐng)域。于是電子商務(wù)開始流行起來，越來越多的商家在網(wǎng)上建起在線商店，向消費者展示出一種新穎的購物理念。網(wǎng)上購物系統(tǒng)作為 b2b（既企業(yè)對企業(yè)）,b2c(即企業(yè)對消費者),c2c(即消費者對消費者)電子商務(wù)的前端商務(wù)平臺,在其商務(wù)活動全過程中起著舉足輕重的作用。網(wǎng)上購物系統(tǒng)具有強大的交互功能，可使商家和用戶方便的傳遞信息，完成電子貿(mào)易或 edi 交易。這種全新的交易方式實現(xiàn)了公司間文檔與資金的無紙化交換。本文旨在研究如何建設(shè) b2c 的在線化妝品銷售

5、系統(tǒng)。1.2 課題研究的意義企業(yè)與消費者間的電子商務(wù) b2c，是一種網(wǎng)上直銷方式，網(wǎng)上銷售化妝品縮減了中間渠道，產(chǎn)品一般直接源自廠商的生產(chǎn)基地，不但品質(zhì)有保證價格上也更優(yōu)惠。同時網(wǎng)上銷售在縮減支出方面的有時也是傳統(tǒng)店鋪無法比擬的，由于不需要實際的店面，不僅避免了店鋪租金的開銷，還可省去裝修、管理等方面的諸多費用，所以價格成為眾多網(wǎng)上購機用戶的首選因素。另外所不同的就是網(wǎng)上購物可以足不出戶，各地商品任選，如此方便快捷，無時間空間限制是傳統(tǒng)經(jīng)營模式無法比擬的，如今人們生活質(zhì)量的提高，購物方式也變得輕松自由化、個性化，這將成為網(wǎng)上銷售化妝品的一大優(yōu)勢。傳統(tǒng)的購物和網(wǎng)上購物相比，有其自身的許多優(yōu)勢。（

6、1）網(wǎng)上購物的快捷，方便是傳統(tǒng)購物沒法比較的。（2）網(wǎng)上購物是基于互聯(lián)網(wǎng)的一種商務(wù)活動，互聯(lián)網(wǎng)本身具有開放性全球性，特點，電子商務(wù)可為企業(yè)個人提供豐富的信息資源，為企業(yè)創(chuàng)造更多商業(yè)機會。（3）網(wǎng)上購物簡化了企業(yè)與企業(yè)，企業(yè)與個人之間的流通環(huán)節(jié)，最大限度地降低了流通成本，能有效地提高企業(yè)在現(xiàn)代商業(yè)活動中的競爭力。（4）網(wǎng)上購物將大部商務(wù)活動搬到網(wǎng)上進(jìn)行，企業(yè)可以實行無紙辦公化節(jié)省了開支。 （5）網(wǎng)上購物將傳統(tǒng)的商務(wù)流程數(shù)字化、電子化，讓傳統(tǒng)的商務(wù)流程轉(zhuǎn)化為電子流、信息流，突破了時間空間的局限，大大提高了商業(yè)運作的效率，并有效地降低了成本。1.3 化妝品銷售網(wǎng)站的現(xiàn)狀隨著中國互聯(lián)網(wǎng)行業(yè)迅速的發(fā)展，

7、上網(wǎng)人數(shù)的增多，化妝品網(wǎng)上銷售正在被消費者普遍接受，國內(nèi)各大型綜合門戶網(wǎng)站也在網(wǎng)站上開展了化妝品電子商務(wù)，如新浪商城、搜狐商城，以及專門銷售化妝品的“長信化妝品” ()和 5291()。歸納起來，銷售化妝品的網(wǎng)站大致分為以下幾類：綜合門戶網(wǎng)站購物商城、專業(yè)電子商務(wù)網(wǎng)站、專業(yè)銷售化妝品網(wǎng)站。其中，綜合類網(wǎng)站中的購物商城 60%，專門銷售化妝品的網(wǎng)站 25%，專門做銷售的購物網(wǎng)站 15%。第 2 章 系統(tǒng)需求分析2.1 化妝品銷售網(wǎng)站背景最近幾年，隨著國內(nèi)化妝品用戶量的迅猛發(fā)展，化妝品行業(yè)的競爭愈演愈烈，化妝品網(wǎng)上銷售為化妝品生產(chǎn)商和經(jīng)銷商提供了一個良好的契機。有關(guān)數(shù)據(jù)也表明，化妝品網(wǎng)上銷售正在被

8、消費者普遍接受，國內(nèi)各大型綜合門戶網(wǎng)站也在網(wǎng)站上開展了化妝品電子商務(wù)。由于網(wǎng)上銷售縮減了中間渠道，產(chǎn)品一般直接源自廠商的生產(chǎn)基地，不但品質(zhì)有保證，價格上也更優(yōu)惠。2.2 網(wǎng)站的市場定位分析系統(tǒng)主要定位于中小型化妝品銷售商，使其能以電子商務(wù)的形式通過網(wǎng)絡(luò)平臺進(jìn)行產(chǎn)品的銷售，客戶端為瀏覽器，用戶為化妝品購買者，因為購買者的背景和文化層次不同，本系統(tǒng)必須簡單易用，不能讓購買者在購買化妝品時摸不著頭腦。服務(wù)器端為本系統(tǒng)和 access 數(shù)據(jù)庫服務(wù)器，如果考慮到性能，可以將本系統(tǒng)部署在應(yīng)用服務(wù)器上，通過應(yīng)用服務(wù)器訪問數(shù)據(jù)庫服務(wù)器。系統(tǒng)后端主要面向的是系統(tǒng)管理員和數(shù)據(jù)庫管理員，系統(tǒng)在開發(fā)的過程中力求做到可

9、維護(hù)性強和操作簡易。作為一個網(wǎng)上交易的平臺，也考慮了系統(tǒng)的穩(wěn)定性、安全性和網(wǎng)絡(luò)傳輸?shù)男?，力求做到系統(tǒng)對用戶有較好的響應(yīng)速度。2.3 網(wǎng)站的開發(fā)工具（1）網(wǎng)絡(luò)服務(wù)器操作系統(tǒng)：windows xp （2）web 服務(wù)器：tomat 6.0（3）后臺數(shù)據(jù)庫系統(tǒng)：access（4）網(wǎng)頁編程語言：html，jsp，javascript（5）網(wǎng)頁前臺編輯工具： micromedia dreamweaver 8.02.4 網(wǎng)站業(yè)務(wù)流程此化妝品銷售網(wǎng)站主要是顧客選購商品，確認(rèn)之后然后下訂單結(jié)帳?；瘖y品銷售網(wǎng)站業(yè)務(wù)流程如圖 2-1 所示：客戶登陸會員注冊收銀臺選擇付款方式購物車購物區(qū)選擇送貨方式交易完成下訂單

10、滿意圖 2-1 化妝品銷售網(wǎng)站業(yè)務(wù)流程第 3 章 系統(tǒng)總體設(shè)計3.1 系統(tǒng)功能概述在線化妝品銷售系統(tǒng)是以電子商務(wù)為運營模式，其模型是典型的網(wǎng)上購物實踐中最為普遍的電子商務(wù)企業(yè)對客戶 (b2c) 模式，主要包括會員注冊、帳戶管理、購物車、搜索、結(jié)帳等基本功能。本系統(tǒng)完全基于 jsp 技術(shù)，在系統(tǒng)的設(shè)計與開發(fā)過程中嚴(yán)格遵守軟件工程的規(guī)范，運用軟件設(shè)計模式，從而減少系統(tǒng)模塊間的偶合，力求做到系統(tǒng)的穩(wěn)定性、可重用性和可擴充性。3.2 系統(tǒng)功能分析在線化妝品銷售系統(tǒng)主要的功能如下：（1）客戶界面部分：選購化妝品（可按廠商查找化妝品，或通過關(guān)鍵字進(jìn)行查詢）可以查看熱門化妝品和最優(yōu)惠化妝品購物車功能查看化妝

11、品詳細(xì)情況用戶注冊用戶登陸查看用戶的訂單信息修改用戶個人信息找回密碼功能購物幫助功能維護(hù)購物幫助：增加，修改和刪除購物幫助3.3 系統(tǒng)功能模塊劃分根據(jù)系統(tǒng)功能分析，可以畫出系統(tǒng)的功能模塊圖，這里從客戶界面理界面對功能模塊圖加以描述。客戶界面的系統(tǒng)功能模塊圖 3-1 如圖所示。最新推薦化妝品最優(yōu)惠商品熱門商品廠商列表購買商品查找商品香水查看商品詳細(xì)信息詳細(xì)信商品縮略圖預(yù)覽清空購物車提交購物清單修改購物信息查看購物車修改個人信息會員登陸會員注冊問題答案問題列表網(wǎng)站首頁化妝品列表購物幫助購物車會員功能在線化妝品銷售系統(tǒng)客戶界面圖 3-1 客戶界面的系統(tǒng)功能模塊圖第 4 章 數(shù)據(jù)庫的設(shè)計與實現(xiàn)數(shù)據(jù)庫在

12、一個信息管理系統(tǒng)中占有非常重要的地位，數(shù)據(jù)庫結(jié)構(gòu)設(shè)計的好壞將直接對應(yīng)用系統(tǒng)的效率及實現(xiàn)的效果產(chǎn)生影響。合理的數(shù)據(jù)庫結(jié)構(gòu)設(shè)計可以提高數(shù)據(jù)存儲的效率，保證數(shù)據(jù)的完整和一致。設(shè)計數(shù)據(jù)庫系統(tǒng)時應(yīng)該首先充分了解用戶在各個方面的需求，包括現(xiàn)有的及將來可能增加的需求。數(shù)據(jù)庫設(shè)計一般包括如下幾個步驟：（1）數(shù)據(jù)庫需求分析（2）數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計（3）數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計4.1 數(shù)據(jù)庫需求分析用戶的需求具體體現(xiàn)在各種信息的提供，保存，更新和查詢方面，這就要求數(shù)據(jù)庫結(jié)構(gòu)能充分滿足各種信息的輸出和輸入。收集基本數(shù)據(jù)，數(shù)據(jù)結(jié)構(gòu)及數(shù)據(jù)處理的流程，組成一份詳細(xì)的數(shù)據(jù)字典，為后面的具體設(shè)計打下基礎(chǔ)。通過上述系統(tǒng)功能分析，針對

13、一般在線化妝品銷售系統(tǒng)，總結(jié)出如下的需求信息：用戶分一般用戶，注冊用戶和管理員用戶；一般用戶和注冊用戶無需登陸就可以查看化妝品信息并購買；注冊用戶登陸后可以維護(hù)自己的個人信息，并且在向網(wǎng)站發(fā)出訂單時會自動填寫自己的聯(lián)系信息；化妝品按化妝品廠商來分類，每一個化妝品都對應(yīng)一個廠商；訂單分單張詳細(xì)訂單和總訂單；一個用戶可以購買多個或多種型號的化妝品；一個用戶對應(yīng)一張訂單列表；一個訂單列表對應(yīng)多張訂單詳細(xì)信息；提供購物幫助功能。關(guān)于訂單列表與訂單詳細(xì)信息可以這樣理解：因為用戶一次可以購買多種產(chǎn)品，則對每一種產(chǎn)品（即每一款型號的化妝品）生成一條訂單詳細(xì)信息記錄，然后多個這樣的訂單詳細(xì)信息組成一個訂單列表

14、。每一個訂單列表才與一個用戶對應(yīng)，在發(fā)貨時以訂單列表為單位，也既用戶在操作時所看到的“訂單” 。經(jīng)過上述系統(tǒng)功能分析和需求總結(jié)，考慮到將來功能上的擴展，設(shè)計出如下的數(shù)據(jù)項和數(shù)據(jù)結(jié)構(gòu)：（1）注冊用戶（會員） ，包括數(shù)據(jù)項，用戶 id，用戶名，密碼等。（2）化妝品，包括數(shù)據(jù)項：化妝品編號，化妝品名稱，分類編號等。（3）化妝品分類，包括數(shù)據(jù)項：分類編號，分類名稱，上級分類編號（4）訂單詳細(xì)信息，包括數(shù)據(jù)項：訂單編號，訂單列表編號，化妝品編號，購買數(shù)量。（5）訂單列表，包括數(shù)據(jù)項：訂單列表編號，用戶編號，下單時間，聯(lián)系方式等。（6）購物幫助，包括數(shù)據(jù)項：問題 id，問題標(biāo)題，答案和點擊次數(shù)。4.2 數(shù)

15、據(jù)庫概念結(jié)構(gòu)設(shè)計得到上面的數(shù)據(jù)項和數(shù)據(jù)結(jié)構(gòu)以后，就可以設(shè)計出能夠滿足用戶需求的各種實體，以及他們之間的關(guān)系，為后面的邏輯結(jié)構(gòu)設(shè)計打下基礎(chǔ)。這些實體包含各種具體信息，通過相互之間的作用形成數(shù)據(jù)的流動。根據(jù)上面的設(shè)計規(guī)劃出的實體有：注冊用戶（會員）信息實體，產(chǎn)品實體，產(chǎn)品類型實體，訂單詳細(xì)信息實體，訂單列表實體和常見問題實體。實體之間關(guān)系的 e-r 圖如下圖 4-1 所示： 1nmn購買用戶1n訂單列表商品/香水商品分類訂單圖 4-1 實體間的關(guān)系 e-r 圖注冊用戶會員賬號姓名密碼地址圖 4-2 注冊用戶信息實體 e-r 圖化妝品實體 e-r 圖如下圖 4-3 所示：香水信息編號名稱說明明類型圖

16、 4-3 化妝品實體 e-r 圖化妝品類型實體 e-r 圖如下圖 4-4 所示：香水類型上級類型類型名稱類型編號圖 4-4 化妝品類型實體 e-r 圖訂單詳細(xì)信息實體 e-r 圖如下圖 4-5 所示：訂單詳細(xì)信息編號所屬訂單列表購買商品購買數(shù)量圖 4-5 訂單詳細(xì)信息實體 e-r 圖訂單列表實體 e-r 圖如下圖 4-6 所示：訂單列表編號客戶信息應(yīng)付款額處理狀態(tài)圖 4-6 訂單列表實體 e-r 圖常見問題實體 e-r 圖如下圖 4-7 所示：常見問題編號問題答案點擊數(shù)圖 4-7 常見問題實體 e-r 圖4.3 數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計數(shù)據(jù)庫的概念結(jié)構(gòu)設(shè)計完畢后，現(xiàn)在可以將上面的數(shù)據(jù)庫概念結(jié)構(gòu)轉(zhuǎn)化為

17、某種數(shù)據(jù)庫系統(tǒng)所支持的實際數(shù)據(jù)模型，也就是數(shù)據(jù)庫的邏輯結(jié)構(gòu)。在線化妝品銷售系統(tǒng)數(shù)據(jù)庫中各個表的設(shè)計結(jié)果如表 4-1表 4-6 所示。每個表格表示在數(shù)據(jù)庫中的一個表。（1）會員表（會員帳號，密碼，e-mail，電話，地址，郵編）主鍵：會員帳號 not null說明：會員表記錄系統(tǒng)中注冊用戶的詳細(xì)信息。其表結(jié)構(gòu)如下表 4-1 所示：表 4-1 會員表（member）數(shù)據(jù)類型長度允許空備注memberidvarchar20會員賬號（主鍵）pwdvarchar16密碼emailvarchar30e-mailphonevarchar16電話addressvarchar60地址zipcodevarchar

18、6郵編（2）產(chǎn)品信息表（產(chǎn)品編號，產(chǎn)品類型編號，產(chǎn)品名稱，產(chǎn)品說明，市場價，會員價，小圖片相對路徑，大圖片相對路徑，點擊數(shù)，購買次數(shù)，是否推薦，設(shè)置為推薦的日期）主鍵：產(chǎn)品編號 not null說明：產(chǎn)品信息表記錄系統(tǒng)中已有化妝品產(chǎn)品的信息。其表結(jié)構(gòu)如表 4-2所示：表 4-2 產(chǎn)品信息表（product）字段名數(shù)據(jù)類型長度允許空備注idint4產(chǎn)品編號（主鍵）producttypeint4產(chǎn)品類型編號namevarchar30產(chǎn)品名稱introducetext16產(chǎn)品介紹remarktext16產(chǎn)品說明marketpricemoney8市場價memberpricemoney8會員價small

19、imgvarchar100小圖片相對路徑bigimgvarchar100小圖片相對路徑recommendtinyint1是否推薦（是：1，否：0）recommenddatedatetime8是設(shè)置為推薦的日期，用于在推薦產(chǎn)品中排序（3）產(chǎn)品類型表（類型 id，上級類型 id，上級類型名稱）主鍵：類型 id not null說明：產(chǎn)品類型表記錄系統(tǒng)中的廠商信息。其表結(jié)構(gòu)如下表 4-3 所示：表 4-3 產(chǎn)品類型表（producttype）列名數(shù)據(jù)類型長度允許空備注idint4類型 id（主鍵）superidint4上級類型 id（備用）name varchar20上級類型名稱（備用）（4）訂單表

20、（訂單表 id，產(chǎn)品 id，產(chǎn)品名稱，產(chǎn)品單價，訂購數(shù)量）主鍵：無說明：訂單表記錄在客戶的一個訂單中，針對一件商品的訂貨信息。其表結(jié)構(gòu)如表 4-4 所示：表 4-4 訂單表（orderdetail）字段名數(shù)據(jù)類型長度允許空備注idint4訂單表的惟一標(biāo)志ordereidint4訂單 idproductidint4產(chǎn)品 idproductnamevarchar30產(chǎn)品名稱pricemoney8產(chǎn)品單價quantity int4訂購數(shù)量（5）發(fā)貨訂單表（訂單列表編號，會員 id，客戶姓名，詳細(xì)地址，郵編，聯(lián)系電話，電子郵件，應(yīng)付款額，備注，下單時間，處理狀態(tài)）主鍵：訂單列表編號 not null說

21、明：發(fā)貨訂單表記錄針對用戶的一個訂單的詳細(xì)信息。其表結(jié)構(gòu)如下表4-5 所示：表 4-5 發(fā)貨訂單表（orderlist）字段名數(shù)據(jù)類型長度允許空備注idint4發(fā)貨訂單編號（主鍵）memberidvarchar20會員 id，非會員為 0addressvarchar60詳細(xì)地址（送貨用）zipcodevarchar6郵編phonevarchar20聯(lián)系電話emailvarchar30電子郵件paymentvarchar20應(yīng)付款額remarkvarchar16備注createdatevarchar8下單時間treateddatevarchar8是送貨日期treatedremarkvarchar

22、16是送貨備注（6）購物幫助表（問題編號，問題標(biāo)題，答案，點擊數(shù)）主鍵：問題編號 not null說明：購物幫助表記錄系統(tǒng)中的常見問題，用于實現(xiàn)購物幫助功能。其表結(jié)構(gòu)如下表 4-6 所示：表 4-6 購物幫助表（faq）字段名數(shù)據(jù)類型長度允許空備注idint4問題編號（主鍵）questionvarchar100問題標(biāo)題answertext16答案hitnum int4點擊數(shù)，用于評價是否是熱點問題第 5 章 網(wǎng)站的風(fēng)格及頁面設(shè)計5.1 頁面設(shè)計的原則設(shè)計的 3c 原則：所謂 3c 原則是指簡潔、一致性、好的對比度。web 頁面設(shè)計需要遵循這三條原則。根據(jù)以上原則網(wǎng)站頁面要做到樸素大方，線條輪廓

23、要流暢、穩(wěn)重，用色要慎重不可花里胡哨。5.1.1 線條的使用直線（矩形）的應(yīng)用。直線條的藝術(shù)效果是流暢、挺拔、規(guī)矩、整齊，所謂有輪有廓。直線和矩形在頁面上的重復(fù)組合可以呈現(xiàn)井井有條、涇渭分明的視覺效果。曲線（弧形）的應(yīng)用。曲線的效果是流動、活躍，具有動感。曲線和弧形在頁面上的重復(fù)組合可以呈現(xiàn)流暢、輕快，富有活力的視覺效果。一般應(yīng)用于青春、活潑的主頁題材。曲、直線（矩形、弧形）的綜合應(yīng)用。把以上兩種線條和形狀結(jié)合起來運用，可以大大豐富主頁的表現(xiàn)力，使頁面呈現(xiàn)更加豐富多彩的藝術(shù)效果。這種形式的主頁，適應(yīng)的范圍更大，各種主題的主頁都可以應(yīng)用。但是，在頁面的編排處理上，難度也會相應(yīng)大一些，處理得不好會

24、產(chǎn)生凌亂的效果。5.1.2 色彩的選擇色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對比”，也就是：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上，可以根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。因為色彩具有象征性，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對于色彩的

25、喜好也存在著較大的差異。所以，我以藍(lán)白色搭配為主色調(diào)其它顏色相輔，給人以寧靜深遠(yuǎn)的回味，導(dǎo)航欄用七色箭頭點綴，彩色圖片和動態(tài)元素的使用使頁面樸素、大方、莊重。5.2 網(wǎng)站設(shè)計構(gòu)思首先在制作一個網(wǎng)頁之前，應(yīng)該先進(jìn)行構(gòu)思。新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮你的想象力，將你想到的“景象”畫上去，建議用一張白紙和一支鉛筆將初步的設(shè)想畫在紙上，當(dāng)然用作圖軟件 photoshop 等也可以，免得在做了一半時發(fā)現(xiàn)頁面不和諧而重做。這屬于創(chuàng)造階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡可能多畫幾張，最后選定一個滿意的作為繼續(xù)創(chuàng)作的腳本

26、。第一步先明確頁面主題，考慮是否有合適的圖片來襯托主題，如果有現(xiàn)成的圖片就可以了，沒有的話，就根據(jù)情況來決定是否自己做一幅，這里我用photoshop 軟件設(shè)計了一張簡單的網(wǎng)站標(biāo)題“新世紀(jì)化妝品商城”字體顏色選用淺藍(lán)，以便協(xié)調(diào)網(wǎng)站的基色。但不管怎樣，標(biāo)題的主色調(diào)應(yīng)先定下來，這對后面幾步的版面影響很大。第二步明確頁面上要鏈接的目錄，要將他們放在較顯眼的位置，根據(jù)頁面風(fēng)格的不同可以放在頂部、左邊、右邊、中部等較明顯的位置，主鏈接可以做成小圖標(biāo)的形式，但注意圖片不能太大、也不能過分搶眼（一般情況下不比標(biāo)題或主圖的色彩重）。第三步是指定主圖，所謂主圖，就是放一幅較能反映頁面主題思想的圖片，他的大小可適

27、當(dāng)超過頁面上的其它圖片，顏色不加限制，而且位置應(yīng)盡量突出在前面搶眼處。這里要特別指出的是，網(wǎng)標(biāo)，它是一個網(wǎng)站的標(biāo)志和靈魂，在他的設(shè)計上一定要突出自己的風(fēng)格和特點，能反映站點主題，體現(xiàn)企業(yè)文化，可以結(jié)合使用企業(yè)的標(biāo)志。以上三步確定下來后，頁面的基本風(fēng)格就出現(xiàn)了，我們在根據(jù)情況進(jìn)行調(diào)整，或者看是否加上背景，主要考慮主圖是否需要背景。5.3 網(wǎng)站的風(fēng)格版面設(shè)計在版面設(shè)計上我認(rèn)為可以說是既繼承了傳統(tǒng)設(shè)計的優(yōu)點，又作了個性化創(chuàng)新作為傳統(tǒng)設(shè)計無非是用以下幾種架構(gòu)如圖 5-1 所示：a、 b、 c、 d、圖 5-1 網(wǎng)站架構(gòu) a 型、b 型、c 型、d 型多數(shù)網(wǎng)站的設(shè)計都采用了 c 型，上邊為站標(biāo)及廣告欄，

28、左邊作為導(dǎo)航欄，底邊為版權(quán)信息及設(shè)計制作小組，中間作為內(nèi)容區(qū)。我的設(shè)計基本延用了 d 型但做了一些改進(jìn)。延用了上下邊框和左邊框的設(shè)計網(wǎng)頁顯得簡潔。但沒有使用共享邊框，而是單獨的設(shè)計制作了上邊框的內(nèi)容 top.jsp，下邊框的內(nèi)容 copy. jsp，和左邊框的內(nèi)容 left. jsp。使用語句完成對上述部分的調(diào)用，實現(xiàn)頁面共享使每層網(wǎng)頁具有相同的上下及左邊框統(tǒng)一了風(fēng)格，這樣的調(diào)用方法效地解決了導(dǎo)航欄及超鏈接在深層網(wǎng)頁的相對路徑偏差問題，實現(xiàn)鏈接路徑完全統(tǒng)一化。網(wǎng)站頁面結(jié)構(gòu)布局如下圖 5-2 所示：網(wǎng)站購物功能鏈接區(qū)（top. jsp）登陸界面以及公布欄等（商 品顯 示 區(qū)）最 新新 聞 版 權(quán)

29、 信 息圖 5-2 網(wǎng)站頁面結(jié)構(gòu)布局5.4 商城主頁設(shè)計主頁是一個商城的門戶，顧客一般都是首先看到此頁（也有個別從鏈接進(jìn)來者） ，因此大多數(shù)商家都希望在主頁上能夠顯示盡可能多的信息，而且希望將自己最希望讓別人了解的信息放在最吸引目光的位置。本系統(tǒng)的主頁是 index.jsp 文件，圖 5-3 是在線化妝品銷售系統(tǒng)的主頁面。圖 5-3 在線化妝品銷售系統(tǒng)主頁面5.5 客戶端界面結(jié)構(gòu)設(shè)計在客戶端界面中，出于美觀考慮，沒有采用框架?？蛻舳私缑娼Y(jié)構(gòu)是由頭（head.jsp） 、左惻快捷菜單（left.jsp） 、體和尾（foot.jsp）四部分組成。由于沒有使用框架，各個模塊的頁面需要在此的基礎(chǔ)上，在

30、頁面結(jié)構(gòu)的“體”處加入實現(xiàn)功能特點的頁面代碼。5.5.1 界面頭、尾設(shè)計為了提高代碼的重用性，把客戶端界面部分相同的頭和尾做成兩個文件分別命名為 head.jsp 和 foot.jsp 在 head.jsp 中除了功能菜單以外，還集成了一個會員登陸功能，在 head.jsp 文件中調(diào)用 showmemberlogin()過程就是為了實現(xiàn)此功能的，其作用是根據(jù)會員是否登陸來顯示歡迎信息或登陸表單。5.5.2 界面左惻快捷菜單設(shè)計左惻快捷菜單包含三部分，分別是化妝品廠商、熱門商品和最優(yōu)惠商品。left.jsp 文件的實現(xiàn)，它所包含的每一部分都是由一個表格（table）構(gòu)成，由于需要頁面美化，其中每

31、個表格都包含了一些 html 修飾代碼。第 6 章 系統(tǒng)詳細(xì)設(shè)計6.1 客戶端界面設(shè)計客戶端界面的設(shè)計采用了界面模塊化的思想，每個頁面都具有一定的功能，且頁面命名采用“模塊名+功能名” 的方式。6.1.1 商品（化妝品）信息瀏覽模塊商品（化妝品）信息瀏覽模塊的主要功能：顯示商品預(yù)覽列表（product.jsp） ，顯示商品詳細(xì)信息頁面（productdetail.jsp） ，存放商品基本函數(shù)（productbase.jsp） 。商品既化妝品是顧客來到網(wǎng)站后所關(guān)心的第一件事，對于化妝品這類注重外形的商品，具備以縮略圖方式預(yù)覽化妝品的功能是非常必要的，另外還需要具備查詢功能。1.化妝品預(yù)覽列表在本

32、系統(tǒng)中，化妝品預(yù)覽列表與查詢是用同一個頁面完成的，既都是product. jsp 文件，在這個文件中，默認(rèn)是顯示全部商品，然后可以根據(jù)化妝品廠商和化妝品名稱關(guān)鍵字來查看過濾后所顯示的化妝品。2.化妝品詳細(xì)信息化妝品詳細(xì)信息對應(yīng)的文件是 productdetail. jsp，圖 6-12 是查看某一化妝品詳細(xì)信息的頁面。查看化妝品詳細(xì)信息是通過在 productdetail. jsp 文件中調(diào)用如下語句實現(xiàn)的：call showproduct(realstring(request.querystring(“id”)這里通過 request 對象獲得要查看化妝品的編號，然后作為參數(shù)傳入showpr

33、oduct 過程中，這個過程也位于 in-product. jsp 文件中，它的實現(xiàn)原理是通過傳入的產(chǎn)品編號組織數(shù)據(jù)庫語句，從數(shù)據(jù)庫中檢索數(shù)據(jù)，然后將查到的結(jié)果顯示出來，另外 ，由于這個頁面用來顯示大量文本，所以一定要用 convert函數(shù)對所顯示的文本進(jìn)行 html 編碼和用 html 的換行符“”替換字符串中的回車符，否則頁面顯示會很亂。圖 6-12 查看化妝品詳細(xì)信息6.1.2 購物車管理模塊設(shè)計購物車管理模塊的主要功能：顯示購物車（basket. jsp） ，購物車基本函數(shù)（cash. jsp） 。購物車管理模塊與訂單維護(hù)模塊類似，也是本系統(tǒng)的本質(zhì)所在。本系統(tǒng)的目的就是用來銷售，自然最

34、感興趣的就是顧客將商品放入購物車并提交訂單。但實際上購物車管理模塊從技術(shù)實現(xiàn)角度將并不復(fù)雜，與訂單維護(hù)模塊類似。查看購物車用到的是 basket. jsp 和 bought. jsp 兩個文件。圖 6-13 是查看購物車的顯示界面，從圖中可以看出在購物車內(nèi)可以存放多種商品，每種商品也可以購買多個。顧客利用購物車所提供的功能，可以更改所購買商品的數(shù)量或刪除所購買的商品。此頁的原理是每次訪問此頁時，都會從 request 對象和 querystring 集合和form 集合中尋找以下三個參數(shù)：（1）productid：要購買的商品編號，位于 querystring 集合中，如果找不到，報錯。（2）

35、clear：是否清空購物車，位于 querystring 集合中，只有當(dāng)此參數(shù)為“yes”時才清空購物車。（3）modify：修改購物車，位于 form 集合中，只有當(dāng)此參數(shù)為“yes”時才更新購物車。圖 6-13 查看購物車的顯示界面然后，分別根據(jù)是否接收到這三個指令來執(zhí)行相應(yīng)的操作，這部分代碼沒有放在其他文件中，而是直接放在了 save to .jsp 文件中的頁面體部分。在本系統(tǒng)中，購物車是存儲在 session 中，根據(jù)所需要保存的數(shù)據(jù)，需要用到兩個 session 變量，作用如下：session(“productlist”)：購買的商品 id 列表，以英文逗號分隔。session(“

36、quantitylist”)：與 session(“productlist”)對應(yīng)，分別表示購買商品數(shù)量，以英文逗號分隔。例如對于下面的值：session(“productlist”)=”70,71,72”session(“quantitylist”)=”2,3,1”它所表示的意思是購買編號為 70 的商品 2 件，購買編號 71 的商品 3 件，購買編號為 72 的商品 1 件。購物車執(zhí)行程序流程圖如下圖 6-14 所示：圖 6-14 購物車執(zhí)行程序流程圖6.1.3 提交訂單模塊設(shè)計提交訂單模塊的主要功能：輸入用戶信息頁面（showing.jsp） ，輸入用戶信息表單（pycusinfo.j

37、sp） ，確認(rèn)用戶信息頁面（cashsave.jsp） ，確認(rèn)用戶信息表單（pyorderinfo.jsp） ，提交結(jié)果頁面（cash.jsp） ，提交結(jié)果表單（pysucinfo.jsp） 。提交訂單過程就是一個填寫顧客信息，然后向 orderlist 和 orderdetail 表中插入記錄的過程，一共分為三步，前兩步教為簡單，第三步教復(fù)雜。圖 6-15為確認(rèn)付款信息頁面。y購物車查看商品是否滿意下訂單調(diào)整商品n開始結(jié)束圖 6-15 確認(rèn)付款信息頁面當(dāng)會員登陸后，此頁會自動根據(jù)會員信息填寫這些內(nèi)容，會員只需要修改和確認(rèn)即可，省去了重新輸入送貨信息的麻煩。圖 6-16 為輸入信息用戶信息表單

38、。這頁是對用戶上一步所輸入信息的確認(rèn)，實現(xiàn)方法與管理端界面中的查看訂單和客戶界面中的查看購物車都很相似。圖 6-16 輸入用戶信息表單確認(rèn)提交后，就到了提交訂單的最后一步，在這里，需要將訂單數(shù)據(jù)寫入到數(shù)據(jù)庫中，如果操作成功，則給出成功信息，并提示顧客訂單號，用于查詢訂單，如圖 6-17 所示。圖 6-17 訂單提交成功提交訂單最后一步對應(yīng)的頁面 cash.jsp。在這個文件中包含了 pysucinfo.jsp 文件，用于實現(xiàn)具體功能，并且所的數(shù)據(jù)庫操作也都位于 pysucinfo.jsp 文件中。在 cash.jsp 文件中，首先利用 request 對象獲取提交表單的數(shù)據(jù)，將一個訂單的信息寫

39、入 orderlist 表中，然后再將這個訂單所包含的詳細(xì)信息寫入orderdetail 表中。因為這兩個操作要么同時發(fā)生，要么都不發(fā)生，所以要用到事務(wù)。在進(jìn)行第一個數(shù)據(jù)庫操作之前開始事務(wù)，在最后一個數(shù)據(jù)庫操作完成之后結(jié)束事塊務(wù)，期間如果有錯誤發(fā)生的話，則將事務(wù)回滾?？蛻舳讼到y(tǒng)程序流程圖如下圖 6-18 所示：ynny是否退出出?開始進(jìn)入系統(tǒng)登錄界面輸入用戶名及密碼是否正確確？進(jìn)入系統(tǒng)主頁面可以對站內(nèi)商品行瀏覽、搜索、選購結(jié) 束圖 6-18 客戶端系統(tǒng)程序流程圖6.2 系統(tǒng)調(diào)試運行jsp 的運行環(huán)境是一種服務(wù)器端的腳本環(huán)境，當(dāng)用戶從瀏覽器向 web 服務(wù)器請求.jsp 文件時，jsp 腳本開始

40、運行，然后 web 服務(wù)器調(diào)用 jsp，jsp 全面讀取請求的文件，執(zhí)行所有腳本命令，并將 web 頁傳送給瀏覽器，這就意味著用戶不能簡單的在現(xiàn)有的操作運行.jsp 文件需要服務(wù)器端的支持，安裝支持jsp 的服務(wù)器端環(huán)境，因為本站點是在 xp 下制作的，所以安裝的是 xp 下的personal web server,首先在 xp 盤運行“add-onpws”目錄中的 setup.exe 文件，進(jìn)行完 personal web server 安裝后，重起計算機后，可以在欄中看到相應(yīng)的圖標(biāo)，雙擊圖標(biāo)，就會出現(xiàn)個人 web 管理器最全面，單擊“啟動”按鈕，剛服務(wù)器啟動，在該界面單擊“高級”，然后再單擊“添加”，添加新的虛擬目錄，這里選擇的就是本站點的實際物理路徑，在“別名”中輸入站點名稱，不改變默認(rèn)的訪問權(quán)限，然后按“確定”按鈕，這虛擬目錄就建好了，這時就可以在瀏覽器中的地址中輸入 http:/localhost:8080/webroot/index.jsp 文件，這樣就可以預(yù)覽本站點中的頁面了，同時也可以看出有哪些錯誤，當(dāng)然直接單擊 index.jsp 網(wǎng)頁，從而進(jìn)入本站首頁，可以通過連接在各個頁面之間進(jìn)行轉(zhuǎn)換，進(jìn)行會員注冊等操作，看看是否可以安全運行，通過對程序的調(diào)式，是系統(tǒng)可以正常的運行。結(jié) 論通過對在線化妝品系統(tǒng)的畢業(yè)設(shè)計，使自己在網(wǎng)