畢業(yè)論文-西華師范大學(xué)跳蚤市場(chǎng)網(wǎng)的設(shè)計(jì)與實(shí)現(xiàn)

1、<p>　　西華師范大學(xué)跳蚤市場(chǎng)網(wǎng)的設(shè)計(jì)與實(shí)現(xiàn)</p><p><b>　　陳祖梅</b></p><p>　　計(jì)算機(jī)學(xué)院軟件工程專業(yè)2013級(jí) 指導(dǎo)教師：李艷梅</p><p>　　摘　要：隨著Internet技術(shù)的發(fā)展，網(wǎng)絡(luò)已經(jīng)侵入人們的日常生活。將來(lái)人們的日常生活和工作將越來(lái)越仰賴于發(fā)展的數(shù)字技術(shù)，越來(lái)越數(shù)字化、網(wǎng)絡(luò)化、電子化、

2、虛擬化。Internet的發(fā)展歷程以及目前的應(yīng)用狀況和發(fā)展趨勢(shì)，將極大的改變我們的生活方式和工作方式，甚至影響社會(huì)價(jià)值觀發(fā)生變化。</p><p>　　本設(shè)計(jì)試圖利用SPRING將一個(gè)網(wǎng)上二手交易市場(chǎng)架構(gòu)在網(wǎng)絡(luò)上，讓每一個(gè)同學(xué)都能在校內(nèi)實(shí)現(xiàn)二手商品交易。通過(guò)交易，不僅體現(xiàn)環(huán)保、勤儉等傳統(tǒng)，還可以進(jìn)行電子商務(wù)的實(shí)戰(zhàn)演練。本文從理論和實(shí)際兩個(gè)角度出發(fā)，以西華師范大學(xué)跳蚤市場(chǎng)網(wǎng)為例對(duì)一個(gè)具有基本互動(dòng)性能的在線二手商品交

3、易網(wǎng)站進(jìn)行設(shè)計(jì)與實(shí)現(xiàn)分析。設(shè)計(jì)首先采用面向?qū)ο蠓治雠c設(shè)計(jì)方式介紹。其次對(duì)系統(tǒng)進(jìn)行的可行性分析，然后根據(jù)設(shè)計(jì)思想、設(shè)計(jì)目標(biāo)以及整體結(jié)構(gòu)對(duì)系統(tǒng)進(jìn)行精確的策劃。最后對(duì)系統(tǒng)的主要界面、數(shù)據(jù)庫(kù)、交互實(shí)現(xiàn)做出較為具體的說(shuō)明。</p><p>　　采用SPRING技術(shù)來(lái)實(shí)現(xiàn)該二手商品交易系統(tǒng)。其主要性能有用戶登陸注冊(cè)，商品查詢，訂單和購(gòu)物車等功能。設(shè)計(jì)在編輯過(guò)程中，爭(zhēng)取理論和應(yīng)用合二為一，系統(tǒng)從實(shí)際應(yīng)用到操作技巧上進(jìn)行闡述。希

4、望能夠更充分將所學(xué)知識(shí)與技術(shù)體現(xiàn)運(yùn)用本次設(shè)計(jì)網(wǎng)站中。</p><p>　　關(guān)鍵詞：電子商務(wù)；SPRING；數(shù)據(jù)庫(kù)</p><p>　　Design and Implementation of Flea Market Website of China West Normal University</p><p>　　Zumei Chen </p>&l

5、t;p>　　Software Engineering, Computer School Grade 2013 Instructor: Yanmei Li</p><p>　　Abstract: With the development of Internet technology, the Internet has invaded people's daily life. In the future

6、, people's life and work will depend more and more on the development of digital technology, and become more and more digital, networked, electronic and virtualized. The development process of Internet and its curren

7、t application situation and development trend will greatly change our lifestyle and work style, and even affect social values change. </p><p>　　This design attempts to use SPRING to construct an online secon

8、dary market in the network, so that each student can complete the secondary commodity transaction in the school. Through the transaction, not only embodies environmental protection, thrift and other traditions, but also

9、can carry out actual combat exercises of e-commerce. From the two angles of theory and practice, this paper expounds the design and implementation of an online second-hand commodity trading website of China West Norma<

10、;/p><p>　　SPRING technology is used to realize the second-hand commodity trading system. Its main functions are user login, registration, commodity inquiries, orders and shopping cart and other functions. In th

11、e process of editing, the theory and application are combined, and the system is expounded from practical application to operation skill. I hope that I will be able to apply the knowledge and technology in this design we

12、bsite more fully.</p><p>　　Key words：Electronic Business; SPRING; DATABASE</p><p><b>　　第一章 緒 論</b></p><p><b>　　1.1研究背景</b></p><p>　　近幾年來(lái)互聯(lián)網(wǎng)的快速

13、發(fā)展，“互聯(lián)網(wǎng)+”的出現(xiàn)，促使多樣化信息技術(shù)同實(shí)體進(jìn)行聯(lián)合，以及當(dāng)代大學(xué)生成為網(wǎng)購(gòu)的主力軍，使得各種購(gòu)物網(wǎng)、快遞公司的蓬勃發(fā)展；伴隨著電子商務(wù)的發(fā)展，保護(hù)環(huán)境、節(jié)儉節(jié)約、循環(huán)利用資源的意識(shí)在頭腦中形成，二手商品交易成為一種發(fā)展方向，但是還沒(méi)有一個(gè)專門只為當(dāng)代大學(xué)生提供的一個(gè)純粹的“二手網(wǎng)”。</p><p>　　在跳蚤市場(chǎng)中，甩賣的物品多為大四畢業(yè)學(xué)生在大學(xué)四年中的生活、學(xué)習(xí)、社交等用品。這些是他們無(wú)法帶走或者舍

14、不得丟掉的，但仍然可以再次利用起來(lái)的物品。這些舊物品對(duì)學(xué)弟學(xué)妹們來(lái)說(shuō)可是一些寶貝，它可以為學(xué)弟學(xué)妹們提供一些方便的、可靠的、有效的學(xué)習(xí)資料，一些便宜的生活物資以及即將到來(lái)的大學(xué)畢業(yè)提供一些方向。</p><p>　　但是，從近幾年的狀況來(lái)看，畢業(yè)生大部分的東西是沒(méi)有得到利用的，往往是以廉價(jià)賣給廢品回收站，有的學(xué)弟學(xué)妹卻以高額的價(jià)格從各個(gè)商店買來(lái)一些接下來(lái)的學(xué)習(xí)和生活可能需要的物品。</p><

15、p><b>　　1.2 歷史及現(xiàn)狀</b></p><p>　　跳蚤市場(chǎng)（flea market）是西方國(guó)家對(duì)舊貨地?cái)偸袌?chǎng)的稱呼。由一個(gè)個(gè)地?cái)倲偽唤M成，市場(chǎng)規(guī)模大小不等。發(fā)售商品多是舊貨、人們多余的物品及不曾用過(guò)但已過(guò)時(shí)的衣物等，小到衣服上的小裝飾物，大到完好的舊汽車、錄像機(jī)、電視機(jī)、洗衣機(jī)，一應(yīng)俱全，應(yīng)有盡有。價(jià)格低廉，僅為新貨價(jià)格的10％～30％。跳蚤市場(chǎng)的治理松懈。關(guān)于

16、flea market的起源，現(xiàn)有兩種說(shuō)法。一是來(lái)源于紐約的Fly Market，F(xiàn)ly Market是紐約下曼哈頓地區(qū)的一個(gè)固定市場(chǎng)，這一市場(chǎng)從美國(guó)獨(dú)立戰(zhàn)爭(zhēng)(1775年)之前一直持續(xù)到大約1816年；二是，F(xiàn)ly這個(gè)詞來(lái)源于荷蘭語(yǔ)稱號(hào)Vly或Vile，原意為 “山谷”，由于它在荷蘭語(yǔ)中的發(fā)音正好和英語(yǔ)中的flea一樣，所以就形成了如今的flea market。</p><p&

17、gt;　　目前市場(chǎng)上有眾多二手網(wǎng)，基本可分為二手房、二手車、二手書(shū)、二手日常用品這幾大類；按地域則幾乎每個(gè)地區(qū)都有本地的二手交易網(wǎng)。二手商品皆有一個(gè)破損率、折舊率的概念，因此不可能像新商品一樣采用標(biāo)明商品性能的方式，所以其信任度有待而估以及大都采用線下交易方式。</p><p>　　另外這些網(wǎng)站基本上全是會(huì)的都摻雜一些無(wú)聊廣告、游戲推送，并沒(méi)有一個(gè)很好專屬于校園的二手網(wǎng)，頁(yè)面無(wú)法很好的根據(jù)師生需求進(jìn)行物品搜素。&

18、lt;/p><p>　　1.3 發(fā)展前景及優(yōu)勢(shì)</p><p>　　首先，學(xué)校擴(kuò)招，師生人數(shù)不斷的增加，用戶群將不斷的更新擴(kuò)大；其次，各個(gè)高校并沒(méi)有專屬于自己的跳蚤市場(chǎng)網(wǎng)，市場(chǎng)前景廣闊；然后，學(xué)校、國(guó)家、社會(huì)對(duì)大學(xué)生創(chuàng)業(yè)的各個(gè)方面的引導(dǎo)以及支持；最為重要的是，現(xiàn)在網(wǎng)絡(luò)的時(shí)代的快速發(fā)展，互聯(lián)網(wǎng)涉及生活中每個(gè)角落，人們文化素質(zhì)的提高，科技運(yùn)用的普及等等[5]。</p><p&g

19、t;　　其次，最近年輕人惰性增加，對(duì)需要體力的事情拒之千里，從心里面產(chǎn)生抵觸。另外，二手市場(chǎng)給予用戶一個(gè)指路牌，直接將用戶帶到所要搜尋的商品面前，節(jié)省了用戶在市場(chǎng)中心急如焚、汗流浹背、口干舌燥地尋找與砍價(jià)。依賴于品種豐富，購(gòu)買者選擇余地較大；購(gòu)買方便、售價(jià)便宜等優(yōu)勢(shì)。從側(cè)面給電子商務(wù)增加潛在市場(chǎng)。</p><p>　　然后，該網(wǎng)站開(kāi)發(fā)會(huì)逐步更新；管理涉及西華師范大學(xué)師生，管理經(jīng)費(fèi)較少。</p>&l

20、t;p>　　預(yù)計(jì)在近五年里Flea Market將快速占有四川高校市場(chǎng)，直到最后占有全國(guó)市場(chǎng)的大部分甚至更遠(yuǎn)。</p><p><b>　　1.4 研究目的</b></p><p>　　以西華師范大學(xué)一年一度的跳蚤市場(chǎng)為背景，讓廢舊物品得到充分的利用；不但方便了同學(xué)們，同時(shí)也營(yíng)建節(jié)約光榮，浪費(fèi)可恥的校園文明氣氛；為老師和同學(xué)提供平臺(tái)，所有注冊(cè)用戶不僅可以在網(wǎng)上放

21、上自己不需要的東西，同時(shí)也可以在網(wǎng)上找到自己需要的東西，物有所值，互利共享；其次是間接性的為學(xué)弟學(xué)妹從中找到自己以后可能發(fā)展方向，并為之而努力奮斗。 </p><p><b>　　1.5開(kāi)發(fā)工具</b></p><p>　　開(kāi)發(fā)工具：JerBrains WebStorm10 、MyEclipse 10</p><p><b>　　開(kāi)發(fā)

22、語(yǔ)言：JAVA</b></p><p>　　運(yùn)行環(huán)境：Windows XP/7/10</p><p><b>　　數(shù)據(jù)庫(kù)：MySql</b></p><p>　　JerBrains WebStorm的介紹：</p><p>　　JerBrains WebStorm中文名為：網(wǎng)絡(luò)風(fēng)暴，享有WEB前端開(kāi)發(fā)神器的名

23、譽(yù)。功能上：具有JavaScript功能，例如：基于DOM，特定瀏覽器完成、編碼導(dǎo)航和用法查詢、支持結(jié)點(diǎn)、重構(gòu)、單元測(cè)試等；具有批量代碼分析、編輯語(yǔ)言混合、拼寫(xiě)檢查、重復(fù)代碼檢測(cè)器的功能；支持H5、CSS/JS、顯示內(nèi)容及應(yīng)用風(fēng)格；具有便捷的環(huán)境，可以遠(yuǎn)程同步、集成版本控制系統(tǒng)、本地記錄等。</p><p>　　另外，具有強(qiáng)烈的智能代碼補(bǔ)全、代碼優(yōu)化、html提示、聯(lián)想查詢、代碼重構(gòu)，以及代碼檢查和快速修復(fù)、調(diào)試

24、、結(jié)構(gòu)瀏覽、折疊等等功能優(yōu)勢(shì)。</p><p>　　第二章 系統(tǒng)需求分析</p><p><b>　　2.1功能分析</b></p><p>　　為解決不同用戶的不同需求，該網(wǎng)站主要功能有：用戶模塊、一級(jí)菜單分類模塊、商品模塊、購(gòu)物車模塊、訂單模塊等[1]。</p><p><b>　　2.1.1用戶模塊&l

25、t;/b></p><p>　　根據(jù)對(duì)用戶簡(jiǎn)單分析，得出用戶基本功能[2]，見(jiàn)圖2.1。</p><p>　　注冊(cè)：前臺(tái)的JS校驗(yàn)、使用AJAX完成對(duì)用戶名異步校驗(yàn)、 后臺(tái)Struts 2校驗(yàn)、驗(yàn)證碼、發(fā)送激活郵件、將用戶信息存入數(shù)據(jù)庫(kù)里面。</p><p>　　激活：根據(jù)激活碼查詢用戶是否存在，激活或者修改用戶狀態(tài)。</p><p>

26、　　登陸：輸入用戶名和密碼進(jìn)行數(shù)據(jù)校驗(yàn)，驗(yàn)證碼校驗(yàn)進(jìn)行用戶登陸。</p><p>　　退出：銷毀session。</p><p>　　圖2.1 用戶模塊圖</p><p>　　2.1.2一級(jí)菜單模塊</p><p>　　查詢一級(jí)分類及商品類型，并將分類存入到session范圍類，同時(shí)查詢到每個(gè)一級(jí)分類所屬的二級(jí)分類，以及查詢所有商品分類下面的

27、所有商品，并采用分頁(yè)方式顯示，見(jiàn)圖2.2。 </p><p>　　圖2.2 一級(jí)菜單模塊圖</p><p><b>　　2.1.3商品模塊</b></p><p>　　對(duì)商品的展示，查詢熱門商品、查詢最新商品、根據(jù)ID查詢商品,見(jiàn)圖2.3[2]。<

28、;/p><p>　　圖2.3 商品模塊圖</p><p>　　2.1.4購(gòu)物車模塊</p><p>　　首先用戶把商品添加到購(gòu)物車、然后從購(gòu)物車中移除商品、最后清空購(gòu)物車中所有商品等，見(jiàn)圖2.4。</p><p>　　圖2.4 購(gòu)物車模塊圖</p><p><b>　　2.1.5訂單模塊</b><

29、;/p><p>　　生成訂單，將購(gòu)物車中信息存入數(shù)據(jù)庫(kù)中，具有訂單付款，在線支付、修改訂單狀態(tài)、修改訂單信息，查詢用戶訂單等，見(jiàn)圖2.5。</p><p>　　圖2.5 訂單模塊圖</p><p><b>　　2.2安全性分析</b></p><p>　　安全方面，普通用戶只可以查找商品、和賣家留言聯(lián)系進(jìn)行商品買賣；注冊(cè)用戶

30、可以更改自己的相關(guān)信息、相關(guān)商品的管理、同買家留言交流；系統(tǒng)管理員可以對(duì)自身和注冊(cè)用戶基本信息進(jìn)行操作，刪除注冊(cè)用戶；可以對(duì)新聞、網(wǎng)站管理進(jìn)行操作的用戶，以及其他類型用戶的相關(guān)權(quán)限借可以。系統(tǒng)是在網(wǎng)絡(luò)上運(yùn)行的多用戶系統(tǒng)，采用了數(shù)據(jù)庫(kù)安全性、操作系統(tǒng)安全性、程序安全性三重安全性管理來(lái)達(dá)到系統(tǒng)要求的安全性[2]。</p><p><b>　　2.3運(yùn)行分析</b></p><

31、p>　　支持系統(tǒng)運(yùn)行的系統(tǒng)需要在Windows xp/7/10下，需要安裝火狐瀏覽器、MySql數(shù)據(jù)庫(kù)且數(shù)據(jù)庫(kù)密碼為123，以及tomcat7.0運(yùn)行環(huán)境并保證接口8080沒(méi)有被其他的占用。硬件方面需建立維護(hù)和使用制度，在硬件選擇是要充分考慮硬件的負(fù)載和應(yīng)用環(huán)境。軟件方面則需對(duì)系統(tǒng)進(jìn)行定期地維護(hù)，盡量能夠預(yù)防各種BUG問(wèn)題。</p><p><b>　　2.4可行性分析</b><

32、/p><p>　　可行性分析另一個(gè)稱呼是可行性研究，即在系統(tǒng)考察基礎(chǔ)上，針對(duì)新系統(tǒng)開(kāi)發(fā)判斷其是否具有必要性和可能性，從技術(shù)、經(jīng)濟(jì)、社會(huì)的方面進(jìn)行開(kāi)發(fā)分析和研究，以防止投資失誤，保障新系統(tǒng)的順利開(kāi)發(fā)[3]。</p><p>　　2.4.1技術(shù)可行性</p><p>　　前端采用HTML5、CSS3布局,JS、JQuery技術(shù)頁(yè)面動(dòng)畫(huà)效果, AJAX頁(yè)面數(shù)據(jù)的交互,代碼分段

33、、分類，重用率高，可維護(hù)性強(qiáng)[4]。后臺(tái)SSH框架，著重struts和spring進(jìn)行業(yè)務(wù)分層描寫(xiě)；代碼層次清晰可維護(hù)性強(qiáng)。后端數(shù)據(jù)庫(kù)采用SQL編寫(xiě)，輕便且功能強(qiáng)大，數(shù)據(jù)處理快、權(quán)限設(shè)置準(zhǔn)確、數(shù)據(jù)安全性高。</p><p>　　2.4.2經(jīng)濟(jì)可行性</p><p>　　經(jīng)濟(jì)可行性主要對(duì)系統(tǒng)的經(jīng)濟(jì)效益進(jìn)行評(píng)價(jià)，該系統(tǒng)的設(shè)計(jì)與開(kāi)發(fā)不需要特殊硬件，使用的軟件為開(kāi)源免費(fèi)的，不會(huì)產(chǎn)生技術(shù)專利問(wèn)題，同

34、在開(kāi)發(fā)過(guò)程中的經(jīng)費(fèi)低[5]。</p><p>　　第三章 系統(tǒng)總體設(shè)計(jì)</p><p><b>　　3.1設(shè)計(jì)概述</b></p><p>　　根據(jù)需求將網(wǎng)站劃分為不同的模塊，每個(gè)模塊將完成特定功能，最后將每個(gè)模塊鏈接起來(lái)，組成一個(gè)整體[6]。</p><p><b>　　3.2總體結(jié)構(gòu)</b>&

35、lt;/p><p>　　根據(jù)需求分析，F(xiàn)lea Market網(wǎng)可以劃分為：用戶模塊、商品模塊、訂單模塊、購(gòu)物車模塊等。用戶模塊包括用戶注冊(cè)、登陸、激活、退出等功能；商品模塊可以分為商品的查詢、瀏覽；訂單模塊包括商品信息、訂單信息、支付信息；購(gòu)物車模塊有商品信息、商品支付狀態(tài)、商品添加刪除等。詳見(jiàn)圖3.1。</p><p>　　圖3.1 總體模塊功能劃分圖</p><p>

36、;<b>　　3.3各個(gè)模塊功能</b></p><p><b>　　各個(gè)模塊功能如下</b></p><p>　　用戶模塊：用戶注冊(cè)、用戶激活、登陸、注銷等功能。</p><p>　　圖3.2 用戶管理模塊功能圖</p><p>　　注冊(cè)主要有，用戶名(唯一標(biāo)識(shí))、密碼、郵箱、姓名、性別、電話、地

37、址，以及需要激活的驗(yàn)證碼。</p><p>　　激活主要應(yīng)用在用戶登錄時(shí)，將用戶的狀態(tài)修改。</p><p>　　登錄和注銷用來(lái)管理用戶的回話信息，登錄時(shí)，網(wǎng)站會(huì)保留用戶的基本信息，包括用戶ID、用戶名等。退出時(shí)用戶信息會(huì)清除。</p><p>　　商品模塊：根據(jù)熱賣狀態(tài)對(duì)商品的瀏覽，或者根據(jù)分類狀態(tài)瀏覽商品。每個(gè)用戶皆可以根據(jù)一定的條件對(duì)全部或部分商品搜索后瀏覽，

38、并可以看到商品的一些基本信息。例如：商品名稱、從不同角度展現(xiàn)出的圖片、商品作用、購(gòu)買時(shí)間、原價(jià)、現(xiàn)價(jià)等信息。</p><p>　　購(gòu)物車模塊：添加、移除、查詢、清空等功能。</p><p>　　添加商品，用戶根據(jù)商品ID將商品添加到購(gòu)物車中。</p><p>　　移除商品，只能根據(jù)商品ID移除單個(gè)商品。</p><p>　　查詢購(gòu)物車，查詢購(gòu)

39、物車中商品的各種信息，包括商品種類、數(shù)量、單價(jià)以及總價(jià)。</p><p>　　清空購(gòu)物車，一次性將購(gòu)物車中所有的商品全部移除。</p><p>　　圖3.3 購(gòu)物車模塊功能圖</p><p>　　訂單模塊：商品添加后自動(dòng)生成訂單，用戶根據(jù)需求查詢訂單、對(duì)商品進(jìn)行支付等功能。</p><p>　　圖3.4 訂單模塊功能圖</p>

40、<p>　　第四章 系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)</p><p>　　4.1數(shù)據(jù)庫(kù)需求分析</p><p>　　在整個(gè)動(dòng)態(tài)網(wǎng)站設(shè)計(jì)中，數(shù)據(jù)庫(kù)設(shè)計(jì)具有重要位置，數(shù)據(jù)庫(kù)設(shè)計(jì)質(zhì)量直接影響到數(shù)據(jù)庫(kù)數(shù)據(jù)的冗余度，數(shù)據(jù)的一致性，數(shù)據(jù)丟失等問(wèn)題。系統(tǒng)開(kāi)發(fā)中數(shù)據(jù)可設(shè)計(jì)至關(guān)重要，它將影響整個(gè)系統(tǒng)的執(zhí)行效率和可靠性，關(guān)系到系統(tǒng)管理員的操作、運(yùn)行等的可靠性。</p><p>　　該網(wǎng)站開(kāi)發(fā)過(guò)

41、程中使用MySql數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)名為將j2ee，用戶名root，數(shù)據(jù)庫(kù)密碼123 。</p><p><b>　　4.2概念結(jié)構(gòu)設(shè)計(jì)</b></p><p>　　數(shù)據(jù)庫(kù)的概念結(jié)構(gòu)設(shè)計(jì)就是將需求分析得到的用戶需求抽象為信息結(jié)構(gòu)，即概念模型[3]。概念模型作為概念結(jié)構(gòu)設(shè)計(jì)的表達(dá)工具，為數(shù)據(jù)庫(kù)提供一個(gè)說(shuō)明性結(jié)構(gòu)，是設(shè)計(jì)數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)即邏輯模型的基礎(chǔ)[3]。它種類繁多，其中最

42、著名、最適用的一種是E－R（實(shí)體－聯(lián)系）模型，它將現(xiàn)實(shí)世界的信息結(jié)構(gòu)統(tǒng)一用屬性、實(shí)體以及他們之間的聯(lián)系來(lái)描述。</p><p>　　以下是本數(shù)據(jù)庫(kù)系統(tǒng)E-R模型：</p><p>　　圖4.1 數(shù)據(jù)庫(kù)E-R模型圖</p><p><b>　　4.3邏輯結(jié)構(gòu)設(shè)計(jì)</b></p><p>　　該網(wǎng)站主要數(shù)據(jù)表有：用戶信息表u

43、ser、一級(jí)菜單表goodstitle、商品信息表product、二級(jí)菜單表goodstitlesecond、訂單信息表orderitem、定單表order。</p><p>　　用戶表user存放的為用戶登錄、注冊(cè)信息，具體表結(jié)構(gòu)設(shè)計(jì)見(jiàn)圖4.2。</p><p>　　圖4.2 用戶信息表</p><p>　　一級(jí)菜單表goodstitle存放商品類型信息，具體表結(jié)

44、構(gòu)見(jiàn)圖4.3。</p><p>　　圖4.3 用戶信息表</p><p>　　二級(jí)菜單表goodstitlesecond存放商品分類信息，具體表結(jié)構(gòu)見(jiàn)圖4.4。</p><p>　　圖4.4 二級(jí)菜單表</p><p>　　商品信息表product存放商品各種基本信息，具體表結(jié)構(gòu)見(jiàn)圖4.5。</p><p>　　圖4.

45、5 商品信息表</p><p>　　訂單信息表orderitem存放訂單各種狀態(tài)信息，具體表結(jié)構(gòu)見(jiàn)圖4.6。</p><p>　　圖4.6 訂單信息表</p><p>　　定單表order存放用戶訂購(gòu)商品信息，具體表結(jié)構(gòu)見(jiàn)圖4.7。</p><p><b>　　圖4.7 訂單表</b></p><p&

46、gt;　　第五章 系統(tǒng)詳細(xì)設(shè)計(jì)</p><p><b>　　5.1前臺(tái)界面設(shè)計(jì)</b></p><p>　　界面是網(wǎng)站的門面，以達(dá)到美觀、舒適、操作方便、信息準(zhǔn)確、結(jié)構(gòu)合理為標(biāo)準(zhǔn)。</p><p>　　5.1.1首頁(yè)界面設(shè)計(jì)</p><p>　　用戶一打開(kāi)該網(wǎng)站，就通過(guò)客戶端的首頁(yè)對(duì)該網(wǎng)站的功能一目了然[7]。網(wǎng)站采取暖

47、色調(diào)背景，促進(jìn)用戶的購(gòu)物欲望。用戶可以根據(jù)“圖書(shū)”、“宿舍生活”、“戶外活動(dòng)”、“電器”、“其他”等不同類別瀏覽該網(wǎng)站，也可通過(guò)首頁(yè)各個(gè)板塊瀏覽商品信息。其中“注冊(cè)”為注冊(cè)成為普通用戶的功能，“登陸”為有賬號(hào)的所有類型用戶可以操作。其中頭部和尾部的設(shè)計(jì)是一樣的[7]。</p><p><b>　　首頁(yè)界面如下所示：</b></p><p><b>　　(a)

48、 頭部</b></p><p><b>　　(b) 熱賣</b></p><p><b>　　(c) 限時(shí)搶購(gòu)</b></p><p><b>　　(d) 促銷區(qū)</b></p><p><b>　　(e) 其他</b></p>

49、<p><b>　　(f) 底部</b></p><p><b>　　圖5.1 網(wǎng)站首頁(yè)</b></p><p>　　5.1.2主要界面設(shè)計(jì)</p><p>　　商品展示界面為用戶瀏覽商品信息的主要界面。按不同的分類瀏覽，不同的分類器商品信息不同，但功能風(fēng)格相同。這里將展示出其界面。每種商品都以小圖或者簡(jiǎn)介的形式

50、展示，單擊可以查看其詳細(xì)信息和放大圖片，以直觀的方式介紹商品。另外，在每個(gè)頁(yè)面中用戶都可直接注冊(cè)和登陸，商品類型，從而為用戶操作提供方便。</p><p><b>　　商品界面如下所示：</b></p><p><b>　　(a) 商品頭部</b></p><p><b>　　(b) 商品分頁(yè)</b>

51、</p><p>　　圖5.2 商品展示界面</p><p><b>　　登陸界面如下：</b></p><p>　　圖5.3 用戶登錄界面</p><p><b>　　注冊(cè)界面</b></p><p>　　圖5.4 用戶注冊(cè)界面</p><p>　　

52、5.1.3其他界面設(shè)計(jì)</p><p>　　用戶查看所點(diǎn)擊的商品的相關(guān)信息，并根據(jù)需求添加到購(gòu)物車實(shí)行商品購(gòu)買。(a) 商品詳細(xì) (b) 商品推薦</p><p>　　圖5.5 商品詳情頁(yè)界面</p><p>　　圖5.6 購(gòu)物車界面</p><p>　　(a) 支付方式 (b) 未支付</p><p><b&g

53、t;　　圖5.7 訂單界面</b></p><p><b>　　5.2關(guān)鍵問(wèn)題設(shè)計(jì)</b></p><p>　　該網(wǎng)站采用MVC模型設(shè)計(jì)，設(shè)計(jì)到一些常用的技術(shù)手段[8]。</p><p>　　5.2.1驗(yàn)證碼技術(shù)</p><p>　　避免用戶采用機(jī)器人自動(dòng)注冊(cè)、登陸、灌水，利用驗(yàn)證碼技術(shù)。所謂驗(yàn)證碼，就是將一

54、串隨機(jī)產(chǎn)生的數(shù)字或字符，生成一個(gè)特定的字符串，用戶辨別其驗(yàn)證碼信息，輸入表單提交驗(yàn)證，驗(yàn)證成功后才可以使用其中特定的功能[9]。</p><p>　　驗(yàn)證碼的實(shí)現(xiàn)過(guò)程：驗(yàn)證碼字符串在服務(wù)器端隨機(jī)生成，在內(nèi)存中保存，發(fā)送在瀏覽器界面顯示；瀏覽器端輸入驗(yàn)證碼字符串，然后提交服務(wù)器端，提交的字符與服務(wù)器端保存的字符進(jìn)行對(duì)比，若一致則繼續(xù)下一步，否則返回提示[8]。</p><p><b&g

55、t;　　驗(yàn)證碼主要代碼：</b></p><p>　　BufferedImage img=new BufferedImage(150,30,BufferedImage.TYPE_INT_BGR);</p><p>　　Graphics g=img.getGraphics(); </p><p>　　g.setColor(Color.black)

56、;</p><p>　　g.fillRect(0, 0, 150,30);</p><p>　　g.setFont(new Font("楷體",Font.BOLD,25));</p><p>　　Random ran=new Random();</p><p>　　String strs="1234567890a

57、sdfghjklzxcvbnmqwertyuiop";</p><p>　　StringBuffer sb=new StringBuffer();</p><p>　　for(int i=1;i<=4;i++){</p><p>　　char a=strs.charAt(ran.nextInt(strs.length()));</p>

58、<p>　　int r=ran.nextInt(255);</p><p>　　int g1=ran.nextInt(255);</p><p>　　int b=ran.nextInt(255);</p><p>　　g.setColor(new Color(r,g1,b));</p><p>　　switch (i) {&

59、lt;/p><p>　　case 1: g.drawString(a+"",20,15); break;</p><p>　　case 2: g.drawString(a+"",60,25);break;</p><p>　　case 3:g.drawString(a+"",90,15); break;<

60、;/p><p>　　case 4: g.drawString(a+"",130,20); break;</p><p>　　default:break;</p><p><b>　　}</b></p><p>　　sb.append(a);</p><p>　　}Serv

61、letActionContext.getRequest().getSession().setAttribute("validateCodeSession",sb.toString());</p><p>　　for(int i=0;i<10;i++){</p><p>　　int x1=ran.nextInt(150);</p><p>

62、;　　int y1=ran.nextInt(30);</p><p>　　int x2=ran.nextInt(150);</p><p>　　int y2=ran.nextInt(30);</p><p>　　g.drawLine(x1, y1, x2, y2);</p><p><b>　　}</b>&l

63、t;/p><p>　　g.dispose();</p><p>　　ImageIO.write(img, "jpg", ServletActionContext.getResponse().getOutputStream());</p><p>　　return NONE;</p><p>　　5.2.2左右無(wú)縫平移設(shè)計(jì)&

64、lt;/p><p>　　圖片或圖層平移無(wú)間隙，緩和地平移圖片或圖層，使得頁(yè)面效果更平緩。無(wú)縫平移主要代碼：</p><p>　　$:function(objName){</p><p>　　if(document.getElementById){ return eval('document.getElementById("'+objName+&

65、#39;")')</p><p>　　}else{ return eval('document.all.'+objName) } },</p><p>　　isIE:navigator.appVersion.indexOf("MSIE")!=-1?true:false,</p><p>　　addEvent:f

66、unction(l,i,I){</p><p>　　if(l.attachEvent){</p><p>　　l.attachEvent("on"+i,I)</p><p><b>　　}else{</b></p><p>　　l.addEventListener(i,I,false)</p&g

67、t;<p><b>　　}</b></p><p><b>　　},</b></p><p>　　delEvent:function(l,i,I){</p><p>　　if(l.detachEvent){</p><p>　　l.detachEvent("on"+

68、i,I)</p><p><b>　　}else{</b></p><p>　　l.removeEventListener(i,I,false)</p><p><b>　　}</b></p><p><b>　　},</b></p><p>　　rea

69、dCookie:function(O){</p><p>　　var o="",l=O+"=";if(document.cookie.length>0){</p><p>　　var i=document.cookie.indexOf(l);</p><p>　　if(i!=-1){</p><p&g

70、t;　　i+=l.length;var I=document.cookie.indexOf(";",i);</p><p>　　if(I==-1)I=document.cookie.length;</p><p>　　o=unescape(document.cookie.substring(i,I))</p><p><b>　　}&l

71、t;/b></p><p><b>　　};</b></p><p><b>　　return o;</b></p><p><b>　　},</b></p><p>　　writeCookie:function(i,l,o,c){</p><p>

72、;　　var O="",I="";</p><p>　　if(o!=null){</p><p>　　O=new Date((new Date).getTime()+o*3600000);</p><p>　　O="; expires="+O.toGMTString()</p><p&g

73、t;<b>　　};</b></p><p>　　if(c!=null){</p><p>　　I=";domain="+c;</p><p><b>　　};</b></p><p>　　document.cookie=i+"="+escape(l)+O+I

74、;</p><p><b>　　},</b></p><p>　　readStyle:function(I,l){</p><p>　　if(I.style[l]){</p><p>　　return I.style[l]</p><p>　　}else if(I.currentStyle){&l

75、t;/p><p>　　return I.currentStyle[l];</p><p>　　}else if(document.defaultView&&document.defaultView.getComputedStyle){</p><p>　　var i=document.defaultView.getComputedStyle(I,null

76、);</p><p>　　return i.getPropertyValue(l);</p><p><b>　　}else{</b></p><p>　　return null;</p><p><b>　　}</b></p><p><b>　　}</b&

77、gt;</p><p>　　5.2.3輪播切換設(shè)計(jì)</p><p>　　圖層輪播切換技術(shù)采用純JS技術(shù)編寫(xiě)，實(shí)現(xiàn)頁(yè)面動(dòng)畫(huà)效果。主要代碼如下：</p><p>　　NextPrev:function(e){</p><p>　　var btnClass =$(e.target || e.event).attr("class"

78、);</p><p>　　//alert(btnClass);</p><p>　　btnClass=="prev"?tag = -1:tag = 1;</p><p>　　var src = $(".product-img img").attr("src");</p><p>　　

79、var newSrc = src.slice(0,-5);</p><p>　　var n = parseInt(src.slice(-5,-4));</p><p><b>　　n+=tag;</b></p><p>　　n<this.min?n=this.max:n;</p><p>　　n>this.m

80、ax?n=this.min:n;</p><p>　　//alert(n);</p><p>　　$(".product-img img").attr("src",newSrc+n+".jpg");</p><p><b>　　} </b></p><p>&l

81、t;b>　　5.2.4平移圖層</b></p><p>　　圖層平移一般應(yīng)用在詳情頁(yè)面，當(dāng)用戶需要對(duì)象應(yīng)商品進(jìn)行更深層次的了解時(shí)，需仔細(xì)查看圖層的各個(gè)細(xì)節(jié)，其平移位置根據(jù)鼠標(biāo)的位置而定。部分代碼如下：</p><p>　　maskMove:function(e){</p><p>　　var x = e.offsetX;</p>&l

82、t;p>　　var y = e.offsetY;</p><p>　　var left = x - this.MSize/2 ;</p><p>　　var top = y - this.MSize/2 ;</p><p>　　left = left<=0?0:left;</p><p>　　left>=this.MaxL

83、ft?this.MaxLft:left;</p><p>　　top = top<=0?0:top;</p><p>　　top>=this.MaxTop?this.MaxTop:top;</p><p>　　$("#mask").css({</p><p>　　"left":left+11

84、0,</p><p>　　"top":top+170</p><p><b>　　});</b></p><p><b>　　}</b></p><p><b>　　5.2.5分頁(yè)技術(shù)</b></p><p>　　當(dāng)商品類型過(guò)多時(shí)，需

85、對(duì)商品展示進(jìn)行分頁(yè)展示。先統(tǒng)計(jì)數(shù)據(jù)庫(kù)中商品的總數(shù)，在根據(jù)頁(yè)面展示的數(shù)量大小進(jìn)行分頁(yè)顯示0。主要代碼如下：</p><p>　　PageSet<Product> pageSetBean=new PageSet<Product>();</p><p>　　pageSetBean.setType(1);</p><p>　　pageSetBean.

86、setPage(page); //設(shè)置當(dāng)前頁(yè)數(shù)</p><p>　　int limit=8; //設(shè)置當(dāng)前顯示記錄數(shù)</p><p>　　pageSetBean.setLimit(limit);</p><p>　　int numberCount=0; //總記錄數(shù)</p><p>　　numberCount=productDao.findn

87、umberCount(gid);</p><p>　　pageSetBean.setNumberCount(numberCount);</p><p>　　int pageCount=0; //總頁(yè)數(shù)</p><p>　　if(numberCount%limit==0){</p><p>　　pageCount=numberCount/lim

88、it;</p><p><b>　　}else{</b></p><p>　　pageCount=(numberCount/limit)+1;</p><p><b>　　}</b></p><p>　　pageSetBean.setPageCount(pageCount);</p>

89、<p>　　int begin=(page-1)*limit;</p><p><b>　　//設(shè)置數(shù)據(jù)集合</b></p><p>　　List<Product> list=productDao.findProductPage(gid,begin,limit); pageSetBean.setList(list);</p>&

90、lt;p>　　return pageSetBean; </p><p>　　5.2.6 郵箱激活</p><p>　　用戶注冊(cè)時(shí)進(jìn)行驗(yàn)證碼激活。主要代碼如下：</p><p>　　public static void sendEmail(String into,String codeNumber){ </p><p>　　Pro

91、perties p=new Properties();</p><p>　　p.setProperty("mail.host","localhost");</p><p>　　Session session=Session.getInstance(p,new Authenticator(){</p><p><b>

92、　　@Override</b></p><p>　　protected javax.mail.PasswordAuthentication getPasswordAuthentication() {</p><p>　　return new PasswordAuthentication("service@igou.com", "123")

93、;</p><p><b>　　};</b></p><p><b>　　});</b></p><p>　　Message message =new MimeMessage(session); </p><p>　　try { </p>

94、;<p>　　message.setFrom(new InternetAddress("service@igou.com"));</p><p>　　message.addRecipient(RecipientType.TO, new InternetAddress(into));</p><p>　　message.setSubj

95、ect("email");</p><p>　　message.setContent("<h1>email</h1><br/><a href='http://localhost:8080/igou2/user_jihuo.action?code="+codeNumber+"'>code</a&g

96、t;", "text/html;charset=UTF-8");</p><p>　　Transport.send(message);</p><p>　　} catch (AddressException e) {</p><p>　　// TODO Auto-generated catch block</p><

97、p>　　e.printStackTrace();</p><p>　　} catch (MessagingException e) {</p><p>　　// TODO Auto-generated catch block</p><p>　　e.printStackTrace();</p><p><b>　　}</

98、b></p><p><b>　　}</b></p><p><b>　　結(jié)論</b></p><p>　　經(jīng)過(guò)這三個(gè)月的畢業(yè)設(shè)計(jì)，我完成了flea market網(wǎng)站，即該網(wǎng)站從分析、設(shè)計(jì)到實(shí)現(xiàn)的三個(gè)過(guò)程。在設(shè)計(jì)過(guò)程中，通過(guò)相關(guān)資料的查閱、同學(xué)經(jīng)驗(yàn)的交流、自學(xué)以及請(qǐng)教老師等方式敦促自己學(xué)到更多知識(shí)，并大大提高了實(shí)際操

99、作能力。讓我十分享受在設(shè)計(jì)過(guò)程中所遇到的艱苦和成功帶來(lái)的喜悅。</p><p>　　同時(shí)，通過(guò)開(kāi)發(fā)這個(gè)網(wǎng)站讓我對(duì)軟件工程設(shè)計(jì)方面有了更深層次的理解，在前期需求分析和數(shù)據(jù)可設(shè)計(jì)時(shí)，沒(méi)有很好的理解其相關(guān)性，導(dǎo)致后期在開(kāi)發(fā)過(guò)程中出現(xiàn)框架設(shè)計(jì)錯(cuò)誤，自己只能邊設(shè)計(jì)邊修改需求方案，最終在老師和自己的合理調(diào)整后解決了相應(yīng)的問(wèn)題，這是在今后項(xiàng)目開(kāi)發(fā)是需要謹(jǐn)記得教訓(xùn)。</p><p>　　在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程

100、中，由于時(shí)間和本人缺乏系統(tǒng)設(shè)計(jì)經(jīng)驗(yàn)，因此網(wǎng)站依然存在一些遺憾和不足，比如驗(yàn)證的嚴(yán)謹(jǐn)性、瀏覽器之間的兼容性、后臺(tái)操作的準(zhǔn)確性等問(wèn)題。盡管存在諸多問(wèn)題，但在次過(guò)程中學(xué)到的東西是最大收獲和財(cái)富，且讓我終身受益。</p><p><b>　　參考文獻(xiàn)</b></p><p>　　冀振燕．UML系統(tǒng)分析與設(shè)計(jì)教程[M]．北京：人民郵電出版社，2014.</p>&

101、lt;p>　　錢樂(lè)秋.軟件工程[M].清華大學(xué)出版社，2013.</p><p>　　Baron Schwartz等.高性能MySQL 第三版[M].電子工業(yè)出版社，2013.5.</p><p>　　陳華.Ajax從入門到精通[M].清華大學(xué)出版社，2012.</p><p>　　劉克強(qiáng).電子商務(wù)平臺(tái)建設(shè)[M].人民郵電出版社，2011.</p>

102、<p>　　鄭阿奇. SQL Server數(shù)據(jù)庫(kù)教程[M].北京：人民郵電出版社，2013.</p><p>　　魏雪萍.完美網(wǎng)站建設(shè)全能[M].人民郵電出版社，2012.</p><p>　　陳雄化 林開(kāi)雄.Spring3.x企業(yè)應(yīng)用開(kāi)發(fā)實(shí)戰(zhàn)[M]. 電子工業(yè)出版社，2013.5. </p><p>　　劉京華.Java Web整合開(kāi)發(fā)王者歸來(lái)[M]

103、.清華大學(xué)出版社，2012.5.</p><p>　　[10]葛一鳴等.Java 程序性能優(yōu)化[M].清華大學(xué)出版社，2012.10.</p><p><b>　　致 謝</b></p><p>　　經(jīng)過(guò)幾個(gè)月的忙碌和學(xué)習(xí)中，畢業(yè)設(shè)計(jì)也即將結(jié)束，作為一名本科生畢業(yè)設(shè)計(jì)，因經(jīng)驗(yàn)不足，難免有諸多考慮不周的地方，在此衷心感謝李艷梅老師給予我的督促指

104、導(dǎo)，對(duì)于網(wǎng)站設(shè)計(jì)有了更多新認(rèn)識(shí)，對(duì)基本網(wǎng)站設(shè)計(jì)有進(jìn)一步認(rèn)識(shí)，對(duì)網(wǎng)站整體設(shè)計(jì)脈絡(luò)了解更為清晰透徹；以及感謝各位同伴的支持與鼓舞，使得這次畢業(yè)設(shè)計(jì)順利完成。</p><p>　　畢業(yè)設(shè)計(jì)，可以很好地總結(jié)大學(xué)四年中收獲、認(rèn)知。與此同時(shí)，幫助改變一些處理事情時(shí)的懶惰。從最開(kāi)始的材料收集，整理資料，題目構(gòu)思與確定，到網(wǎng)站設(shè)計(jì)以及搭建。每一步都需精心思考，認(rèn)真查閱資料，仔細(xì)實(shí)際操作。</p><p>

105、　　通過(guò)畢業(yè)設(shè)計(jì)，讓我深刻領(lǐng)會(huì)到基礎(chǔ)的重要性。它不僅幫助檢驗(yàn)學(xué)生大學(xué)期間的學(xué)習(xí)成果，還可幫助我們更加清楚地認(rèn)識(shí)自我，更多地磨練我們的意志與耐性，這會(huì)為我們今后的工作、生活帶來(lái)巨大幫助。</p><p>　　最后，再次感謝李艷梅老師給予我的耐心、細(xì)致、全面的指導(dǎo)，感謝關(guān)心和鼓勵(lì)我的同伴們，感謝學(xué)校老師、領(lǐng)導(dǎo)，感謝你們給予我的幫助與關(guān)懷；感謝西華師范大學(xué)計(jì)算機(jī)學(xué)院四年來(lái)為我提供良好的學(xué)習(xí)環(huán)境。</p>