1、jsp生成工具的設(shè)計(jì)說(shuō)明書(shū)作者:日期: TOC o 1-5 h z 、網(wǎng)站概述 1 HYPERLINK l bookmark4 o Current Document 1.1開(kāi)發(fā)背景1 HYPERLINK l bookmark6 o Current Document 1。2系統(tǒng)環(huán)境2 HYPERLINK l bookmark8 o Current Document 、系統(tǒng)設(shè)計(jì)3 HYPERLINK l bookmark10 o Current Document 需求分析32。1。1功能描述3 HYPERLINK l bookmark16 o Current Document 用例分析4 HYPE

2、RLINK l bookmark18 o Current Document 三、美工技術(shù)6 HYPERLINK l bookmark20 o Current Document 3。1 LOGO 設(shè)計(jì)6 HYPERLINK l bookmark22 o Current Document FLASH 設(shè)計(jì)6 HYPERLINK l bookmark24 o Current Document div 設(shè)計(jì)6 HYPERLINK l bookmark26 o Current Document 四、界面設(shè)計(jì)8 HYPERLINK l bookmark28 o Current Document 管理員界面

3、8 HYPERLINK l bookmark30 o Current Document 登錄界面8 HYPERLINK l bookmark32 o Current Document 類(lèi)別管理界面8 HYPERLINK l bookmark34 o Current Document 商品管理界面9 HYPERLINK l bookmark36 o Current Document 訂單管理界面 10 HYPERLINK l bookmark38 o Current Document 用戶(hù)界面12 HYPERLINK l bookmark40 o Current Document 舂錄界面12

4、HYPERLINK l bookmark42 o Current Document 汴冊(cè)界面134。2。3訂單管理14 HYPERLINK l bookmark46 o Current Document 4。2.4個(gè)人管理15 HYPERLINK l bookmark48 o Current Document 查看購(gòu)物車(chē) 15 HYPERLINK l bookmark50 o Current Document 檢索商品16 HYPERLINK l bookmark52 o Current Document 總結(jié)17 HYPERLINK l bookmark54 o Current Docume

5、nt 參考文獻(xiàn)17濱海在線商城 設(shè)計(jì)說(shuō)明書(shū)1。1開(kāi)發(fā)背景隨著計(jì)算機(jī)技術(shù)的發(fā)展，計(jì)算機(jī)應(yīng)用于網(wǎng)絡(luò)商務(wù)經(jīng)營(yíng)及信息管理的必要性和 優(yōu)越性日益顯示出來(lái)。企業(yè)若想在激烈的競(jìng)爭(zhēng)中勝出就必須擁有一套完整的且 合適自身特點(diǎn)的網(wǎng)絡(luò)商務(wù)經(jīng)營(yíng)及管理信息系統(tǒng)。電子商務(wù)是Internet爆炸式發(fā)展的直接產(chǎn)物，是網(wǎng)絡(luò)技術(shù)應(yīng)用的全新發(fā)展方 向.電子商務(wù)是利用現(xiàn)代信息 進(jìn)行商務(wù)活動(dòng)的一種先進(jìn)手段，作為創(chuàng)新的經(jīng)濟(jì) 運(yùn)行方式，其影響已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)商業(yè)領(lǐng)域.針對(duì)當(dāng)前蓬勃發(fā)展的電子商務(wù)浪潮，本 文從理論和實(shí)踐兩個(gè)角度出發(fā)，對(duì)電子商務(wù)進(jìn)行了深入的探討。報(bào)告構(gòu)建一個(gè) 電子商務(wù)應(yīng)用系統(tǒng)-網(wǎng)上購(gòu)書(shū)。本系統(tǒng)是一個(gè)基于internet采用B2c

6、(Business to Consumer9模式，并根 據(jù)現(xiàn)有的網(wǎng)上購(gòu)書(shū)系統(tǒng)的現(xiàn)狀而設(shè)計(jì)開(kāi)發(fā)的電子商務(wù)平臺(tái).它不但可以擴(kuò)大商家 的規(guī)模和市場(chǎng)影響力，而且可以減少企業(yè)的經(jīng)營(yíng)成本，提高工作效率。利用了Access 2003及MyEclipse開(kāi)發(fā)此系統(tǒng)。本文檔詳細(xì)介紹了使用UML進(jìn)行系統(tǒng)的 分析與設(shè)計(jì)。JSP技術(shù)使用Java編程語(yǔ)言編寫(xiě)類(lèi)XML的tags和scriptlets,來(lái)封裝產(chǎn)生動(dòng)態(tài)網(wǎng) 頁(yè)的處理邏輯.網(wǎng)頁(yè)還能通過(guò)tags和scriptlets訪問(wèn)存在于服務(wù)端的資源的應(yīng)用邏 輯。JSP將網(wǎng)頁(yè)邏輯與網(wǎng)頁(yè)設(shè)計(jì)和顯示分離，支持可重用的基于組件的設(shè)計(jì)，使基于Web的應(yīng)用程序的開(kāi)發(fā)變得迅速和容易。We

7、b服務(wù)器在遇到訪問(wèn)JSP網(wǎng)頁(yè)的請(qǐng)求時(shí)，首先執(zhí)行其中的程序段，然后將執(zhí) 行結(jié)果連同JSP文件中的HTML代碼一起返回給客戶(hù)。插入的Java程序段可以 操作數(shù)據(jù)庫(kù)、重新定向網(wǎng)頁(yè)等，以實(shí)現(xiàn)建立動(dòng)態(tài)網(wǎng)頁(yè)所需要的功能。該系統(tǒng)能 夠?qū)崿F(xiàn)用戶(hù)的注冊(cè)，登錄功能，能夠?qū)崿F(xiàn)商品的訂購(gòu)和管理員管理等功能。該 系統(tǒng)基本上具備一個(gè)網(wǎng)上商品銷(xiāo)售系統(tǒng)應(yīng)該具備的功能，該系統(tǒng)基本上體現(xiàn)了 構(gòu)建一個(gè)動(dòng)態(tài)商務(wù)網(wǎng)站所需要的技術(shù)，可以說(shuō)，目前的帶型商務(wù)網(wǎng)站也是這種 小型網(wǎng)站的擴(kuò)充和重復(fù)。網(wǎng)購(gòu)如今已經(jīng)成為了人們生活的習(xí)慣，越來(lái)越多的人參與到網(wǎng)購(gòu)當(dāng)中，國(guó)人通過(guò)互聯(lián)網(wǎng)購(gòu)物的消費(fèi)量已經(jīng)躍居世界第一，在此電子商務(wù)大發(fā)展的背景下，“濱海在線商城”

8、開(kāi)發(fā)完成正式問(wèn)世.1.2系統(tǒng)環(huán)境系統(tǒng)架構(gòu)：B/S操作系統(tǒng)： Windows XP / 7開(kāi)發(fā)語(yǔ)言：Java開(kāi)發(fā)環(huán)境:JDK 1.6、JavaEE 5開(kāi)發(fā)工具：MyEclipse 8.5應(yīng)用服務(wù)器：Totmcat 6。0數(shù)據(jù)庫(kù)：Mysql 5。5UML 建模工具：TrufunPlato數(shù)據(jù)庫(kù)建模工具：ERStudio代碼管理工具：TortoiseSVN前臺(tái)工具： Dreamweaver, Photoshop Flash 等運(yùn)行環(huán)境：IE, Firefox, Chrome相關(guān)技術(shù)：JSP、Struts2、Hibernate、C3P0、Spring、JavaMail、Lucene、JQuery、Aj

9、ax、JSON、Log4J、Junit、Html/CSS 等二、系統(tǒng)設(shè)計(jì)2。1需求分析2.1.1功能描述會(huì)員功能：1）會(huì)員注冊(cè):買(mǎi)家購(gòu)物之前需要注冊(cè)成為會(huì)員。2）會(huì)員登錄：輸入正確的登錄名，密碼進(jìn)行登錄。3）檢索商品：輸入商品名進(jìn)行商品檢索。4）查看購(gòu)物車(chē)：會(huì)員可以在購(gòu)物車(chē)中查看自己選好放入購(gòu)物車(chē)車(chē)中的商 品。5）查看訂單：會(huì)員可以查看自己的訂單情況 ，以及選擇進(jìn)行支付或取消支 付。6）訂單支付：會(huì)員可以通過(guò)支付中介向商家進(jìn)行支付 7）廢除訂單：如果訂單還沒(méi)進(jìn)行支付可以廢除該訂單。8）個(gè)人管理：會(huì)員可以修改自己的密碼和個(gè)人資料。管理員功能：1）類(lèi)別管理：管理員可以查詢(xún)、添加、修改和刪除商品類(lèi)別

10、。2）商品管理：管理員可以查詢(xún)、添加、修改和刪除商品。3）會(huì)員管理：管理員可以查看會(huì)員的個(gè)人信息并且刪除會(huì)員。4）訂單管理：管理員可以查看所有會(huì)員訂單信息并且刪除訂單。5）管理員登錄：輸入正確的登錄名，密碼進(jìn)行登錄。2。1.2系統(tǒng)結(jié)構(gòu)根據(jù)系統(tǒng)功能分析描述，系統(tǒng)功能結(jié)構(gòu)圖如下圖所示:潴海在線守城圖2.1濱海在線商城結(jié)構(gòu)圖會(huì)員*Mltir單有相ir單比利國(guó)板或高修r(nóng)l*llR睢加MA詢(xún)費(fèi)-M性&要用布津憲中事XI苴WJ2.2用例分析從管理員角度分析，用例圖如下圖所示:就喜劇圖2。2濱海在線商城管理員例圖從會(huì)員角度分析，用例圖如下圖所示叁員 IJser)圖2。3濱海在線商城會(huì)員用例圖三、美工技術(shù)3.

11、1 logo 設(shè)計(jì)Logo代表一個(gè)網(wǎng)站的標(biāo)志、徽標(biāo)。這是我設(shè)計(jì)的濱海在線購(gòu)物網(wǎng)站的logo,這個(gè)人在提著一個(gè)小的籃子在濱海超市購(gòu)物，看這個(gè)人都要跑起來(lái)，說(shuō)明來(lái)濱海購(gòu)物網(wǎng)站里的 人特別多，這個(gè)購(gòu)物網(wǎng)站的生意非常好。在看一下 bh就是代表我們的濱海這個(gè)名字，希 望濱海在線購(gòu)物網(wǎng)站生意越來(lái)越好。寸的H圖 31 logo3。2 flash 設(shè)計(jì)Flash動(dòng)畫(huà)運(yùn)用到網(wǎng)站上非常廣，我們的網(wǎng)站也不例外，也運(yùn)用了 flash,使自己的網(wǎng) 站效果更好。在flash中，運(yùn)用了動(dòng)作補(bǔ)問(wèn)動(dòng)畫(huà)，從無(wú)都有的，再由有到無(wú)的一個(gè)漸變 過(guò)程，還運(yùn)用了 actionscript.在這個(gè)圖下面有幾個(gè)按鈕分別寫(xiě)這 1、2、3、4、5

12、,點(diǎn)擊這 五個(gè)按鈕就可以跳到相應(yīng)的圖片，對(duì)圖片增加了可讀性。圖32 flash 設(shè)計(jì)3。3 div設(shè)計(jì)使用DIV+CSS布局，頁(yè)面代碼精簡(jiǎn)，這一點(diǎn)相信對(duì) XHTML有所了解的都知道.代 碼精簡(jiǎn)所帶來(lái)的直接好處有兩點(diǎn)：一是提高 spider爬行效率，能在最短的時(shí)間內(nèi)爬完整個(gè)頁(yè)面，這樣對(duì)收錄質(zhì)量有一定好處；二是由于能高效的爬行，就會(huì)受到spider喜歡，這樣對(duì)收錄數(shù)量有一定好處。DIV+CSS布局較Table布局減少了頁(yè)面代碼，加載速度得到很大的提高，這在 spider 爬行時(shí)是非常有利的.過(guò)多的頁(yè)面代碼可能造成爬行超時(shí)，spider就會(huì)認(rèn)為這個(gè)頁(yè)面無(wú)法 訪問(wèn)，影響收錄及權(quán)重.這是一小段div代碼

13、,這段代碼設(shè)計(jì)了它的寬度、浮動(dòng)，可以用任意一個(gè)圖片去引用 這段div小代碼.例如：div id=style ” /div不光是這個(gè)圖片可以引用，其它的圖片或是按鈕也可以去引用這一段代碼。四、界面設(shè)計(jì)4。1管理員界面4。1.1登錄界面本模塊最主要得到是系統(tǒng)管理員登錄的主界面。該系統(tǒng)主要界面如下圖所示歡 進(jìn)人ddll管理員登錄網(wǎng)上兩域管理系統(tǒng)OS.圖4-1管理員登錄界面4.1。2類(lèi)別管理界面本模塊最主要得到是對(duì)商品進(jìn)行分類(lèi)管理界面，實(shí)現(xiàn)功能主要有添加商品類(lèi)別和查iu&nt.如X心彳融吉擊齒洞tl叫翊W*翎於IHg . M5 A 日 口天 H看修改商品類(lèi)別。該系統(tǒng)主要界面如下圖所示:LjtlS 19

14、圖42類(lèi)別管理界面主要代碼:$(.upd).click(function () var jchTd = $ (this).parent ()。prev ();var jtxtTd = $(this) .parent。siblings。ctype);if ($ (this).val()= 更新)$ (this).val ( 確認(rèn));jchTd。children().removeAttr ( disabled);jtxtTd。html( ); else $ (this) o val (更新)；jchTd.children。.attr ( disabled , disabled);jtxtTd。ht

15、ml (jtxtTd。children ().val();var isChecked = jchTd.children ()。attr(checked)= checked ？ true:false;$ o postf categoryAction_updateCategory action”, category.cid : $ (this).attr ( “ lang”)， category.ctype : jtxtTd.html (), category。chot”: isChecked);)；4。1。3商品管理界面本模塊最主要是添加商品，查詢(xún)修改商品.該系統(tǒng)主要界面如下圖所示:同曲工口 7

16、 -HMMAAjdM2看工” *a-tenaflJ*WT亡rtwOQC?即rtifl一典士看州DDCK*itEL史仝也用!M*IIVW?*W*主要代碼:function option () $ ( # shuju td“).addClass(bg1);$ ( # shuju td).mouseover (function () $ (this) .removeClass(bg1”);$ (this).parent ()。children().addClass(bg);)。 mouseout (function。 $(this).parent ().children ()。removeClass

17、 ( bg);$(this)0 parent。children。addClass(“ bg1” );)；$ (.del) .clickfunction ()if (confirm(你確定要?jiǎng)h除這件商品嗎？)$ .post (goodsAction_deleteGoodsById.action” goods.gid ： goods.gid);/刪除自身行$ (this).parents ( tr： first ).remove();).mouseover (function。 $(this) .css( cursor, hand );)；4。1。4訂單管理界面用戶(hù)注冊(cè)主要功能是詳細(xì)查詢(xún)和修改。如

18、下圖所示：注序曲五l*IHi. 國(guó)舉1話至1M就satif澗通LFWe&*iJ4圖4-4 訂單管理界面主要代碼:$ (#pageNow).change(function () window o open (eNow= $ (this) .val(), _self)； )；$。 formValidator.initConfig ( formid : form1 ”， onerror : function(msg) alert (msg);$ (#csny)。focus (function () WdatePicker( skin :whyGreen,oncleared : function。 $

19、(this)。blur ()；, onpicked : function ()$ (this) o blur (););)； )；4。2用戶(hù)界面4.2.1登錄界面這個(gè)模塊主要是用戶(hù)登錄。如圖所示:圖4-5 用戶(hù)登錄界面登錄主要代碼：table width=284 height=113 border=0th height=29 scope=col” table width=100% height= 69% border= 0trth width=3% height=21 scope= col” /input type= text name= user。ulogin id= texfield” /

20、th width=2%scope= col/table4.2.2注冊(cè)界面這個(gè)模塊主要是用戶(hù)注冊(cè).如圖所示:圖4-6 用戶(hù)注冊(cè)界面主要代碼：messages:user.ulogin: required:登陸名必須填寫(xiě)”，rangelength： jQuery.format (夾 輸入字符長(zhǎng)度應(yīng)該在remote：”對(duì)不起！ ！此用戶(hù)名已經(jīng)被占用”,力 user.uname:required:必須得填寫(xiě)真實(shí)姓名”user。upass required:請(qǐng)?zhí)顚?xiě)密碼！ !,rangelengthi： jQuery.format（ 密碼的字符長(zhǎng)度,upass2 equalTo:兩次密碼/&入不一致”, u

21、ser.uemail: required:請(qǐng)?zhí)顚?xiě) E-mail 地址！ !,email:請(qǐng)輸入正確的E-mail地址”,ccode: required:必須填寫(xiě)驗(yàn)證碼,remote:您輸入的馬證碼錯(cuò)誤, user。upost” : required:請(qǐng)?zhí)顚?xiě)郵政編碼”，number：請(qǐng)輸入數(shù)字”，rangelengthi: jQuery。format （ 輸入的字符長(zhǎng)度應(yīng)該是 0位”） : user。uaddress? required:請(qǐng)?zhí)顚?xiě)您的詳細(xì)地址，可更好的送貨”）；4.2.3訂單管理這個(gè)模塊主要是訂單管理，主要功能有查看訂單，刪除訂單，訂單支付。如圖所示第日罰rwm遇r是，警通白員 譽(yù)

22、止到現(xiàn)在你目前已有n張訂單擾累R限門(mén)打元ii單肆他找人總件訂期統(tǒng)訂單詳情潮信去倒寸ji券生書(shū)36,心未支付杳書(shū)仃單注悟野百訂單去重句11前生方珞上口東支付否看訂摩鼻懵町百訂單左支伺共1 %星而總市3至日由國(guó)小可:莫匡貢上一55下一覽尾直圖4-7 用戶(hù)訂單管理界面4。2.4個(gè)人管理這個(gè)模塊主要是賬戶(hù)管理、個(gè)人信息管理。如圖所示:宇?lèi)?ài)眄用戶(hù)：耐然到唇由近坡南鼻中A也建空小如育曲寫(xiě)，*平名再講，圖4-8用戶(hù)個(gè)人界面4.2.5查看購(gòu)物車(chē)這個(gè)模塊主要是查看購(gòu)物車(chē)，查看自己要買(mǎi)的東西。如圖所示:鼻 hflje r us 蕓wit圖4-9用戶(hù)查看購(gòu)物車(chē)4.2.6檢索商品這個(gè)模塊主要是檢索商品，以最快的速度找

23、到自己想要的商品。如圖所示:圖410用戶(hù)檢索商品界面mm里苗I*1 工HIM * 11總結(jié)回顧該系統(tǒng)從選題，到調(diào)研、需求分析、設(shè)計(jì)、編碼實(shí)現(xiàn)、測(cè)試等，論文的撰寫(xiě)，這 系列連貫的過(guò)程，感想頗多，收獲也很多。大致的總結(jié)幾點(diǎn)，如下：1 .設(shè)計(jì)開(kāi)發(fā)一個(gè)管理系統(tǒng)，首先要了解所涉及到行業(yè)的現(xiàn)狀，一定要想辦法進(jìn)行行業(yè) 調(diào)研，從不同途徑獲取該行業(yè)的專(zhuān)業(yè)知識(shí)。合理安排系統(tǒng)設(shè)計(jì)開(kāi)發(fā)時(shí)間，進(jìn)行實(shí)際開(kāi)發(fā) 會(huì)發(fā)現(xiàn)需求分析與系統(tǒng)設(shè)計(jì)占主要的時(shí)間，如果前面的工作做好了，編碼實(shí)現(xiàn)占用的時(shí)間 很短。再根據(jù)所了解的情況進(jìn)行詳細(xì)的編程階段。2。在開(kāi)發(fā)一個(gè)系統(tǒng)時(shí)，前期的分析準(zhǔn)備工作非常的重要.對(duì)于系統(tǒng)的需求要明確， 這樣才能做到有的放矢.特別是對(duì)于系統(tǒng)中數(shù)據(jù)的存儲(chǔ)和表單格式的設(shè)計(jì)，設(shè)計(jì)的不好會(huì) 出現(xiàn)會(huì)出現(xiàn)大量的數(shù)據(jù)庫(kù)內(nèi)存的浪費(fèi)和頁(yè)面與數(shù)據(jù)庫(kù)連接不成功等問(wèn)題 .3.在設(shè)計(jì)的初期，對(duì)一個(gè)網(wǎng)頁(yè)功能模塊，要構(gòu)想出詳細(xì)的方案，這樣可以根據(jù)所需 要完成的功能來(lái)進(jìn)行編寫(xiě)，從而使設(shè)計(jì)方案更加完美，設(shè)計(jì)開(kāi)發(fā)過(guò)程中一定要吸取經(jīng)