第二篇：網(wǎng)站設(shè)計(jì)畢業(yè)論文

目錄

摘 要..................................................................................................................1 Abstract...............................................................................................................1 第一章緒論..........................................................................................................3 1.1研究背景.....................................................................................................3 1.2歷史及現(xiàn)狀................................................................................................3 1.3發(fā)展前景及優(yōu)勢(shì).........................................................................................3 1.4 研究目的....................................................................................................4 1.5開發(fā)工具.....................................................................................................4 第二章系統(tǒng)需求分析...........................................................................................5 2.1功能分析.....................................................................................................5 2.1.1用戶模塊...............................................................................................5 2.1.2一級(jí)菜單模塊.......................................................................................5 2.1.3商品模塊...............................................................................................6 2.1.4購(gòu)物車模塊...........................................................................................6 2.1.5訂單模塊...............................................................................................6 2.2安全性分析.................................................................................................7 2.3運(yùn)行分析.....................................................................................................7 2.4可行性分析.................................................................................................7 2.4.1技術(shù)可行性...........................................................................................7 2.4.2經(jīng)濟(jì)可行性...........................................................................................7 第三章系統(tǒng)總體設(shè)計(jì)...........................................................................................8 3.1設(shè)計(jì)概述.....................................................................................................8 3.2總體結(jié)構(gòu).....................................................................................................8 3.3各個(gè)模塊功能.............................................................................................8 第四章系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì).......................................................................................10 4.1數(shù)據(jù)庫(kù)需求分析.........................................................................................10

I

4.2概念結(jié)構(gòu)設(shè)計(jì)............................................................................................10 4.3邏輯結(jié)構(gòu)設(shè)計(jì)............................................................................................11 第五章系統(tǒng)詳細(xì)設(shè)計(jì)..........................................................................................13 5.1前臺(tái)界面設(shè)計(jì)............................................................................................13 5.1.1首頁(yè)界面設(shè)計(jì)......................................................................................13 5.1.2主要界面設(shè)計(jì)......................................................................................15 5.1.3其他界面設(shè)計(jì)......................................................................................16 5.2關(guān)鍵問題設(shè)計(jì)............................................................................................18 5.2.1驗(yàn)證碼技術(shù)..........................................................................................18 5.2.2左右無縫平移設(shè)計(jì)...............................................................................19 5.2.3輪播切換設(shè)計(jì)......................................................................................20 5.2.4平移圖層..............................................................................................20 5.2.5分頁(yè)技術(shù)..............................................................................................21 5.2.6 郵箱激活.............................................................................................21 參考文獻(xiàn).............................................................................................................24 致謝....................................................................................................................25

II

西華師范大學(xué)跳蚤市場(chǎng)網(wǎng)

xxx

計(jì)算機(jī)學(xué)院軟件工程專業(yè)xxx級(jí) 指導(dǎo)教師：xxx

摘 要：隨著Internet技術(shù)的發(fā)展，人們的日常生活已經(jīng)離不開網(wǎng)絡(luò)。未來社會(huì)人們的生活和工作將越來越依賴于數(shù)字技術(shù)的發(fā)展，越來越數(shù)字化、網(wǎng)絡(luò)化、電子化、虛擬化。Internet的發(fā)展歷程以及目前的應(yīng)用狀況和發(fā)展趨勢(shì)，可以充分地相信網(wǎng)絡(luò)技術(shù)將極大的改變我們的生活方式和工作方式，甚至社會(huì)的價(jià)值觀也會(huì)發(fā)生某種變化。

本設(shè)計(jì)嘗試用SPRING在網(wǎng)絡(luò)上架構(gòu)一個(gè)網(wǎng)上二手交易市場(chǎng)，讓每一個(gè)學(xué)生都能在學(xué)校內(nèi)完成二手商品交易，通過交易，不僅可以進(jìn)行環(huán)保、節(jié)儉等傳統(tǒng)文明教育，還可以讓學(xué)生在學(xué)校內(nèi)部進(jìn)行電子商務(wù)的演練實(shí)訓(xùn)。本文從理論和實(shí)踐兩角度出發(fā)，對(duì)一個(gè)具有基本互動(dòng)功能的在線二手商品交易網(wǎng)站進(jìn)行設(shè)計(jì)與實(shí)現(xiàn)分析。論文首先較為詳盡地介紹了面向?qū)ο蠓治雠c設(shè)計(jì)的有關(guān)概念與技術(shù)。接著對(duì)交易系統(tǒng)的可行性進(jìn)行了分析，然后對(duì)系統(tǒng)的設(shè)計(jì)思想、設(shè)計(jì)目標(biāo)與系統(tǒng)的整體結(jié)構(gòu)進(jìn)行了明確的規(guī)劃。最后對(duì)系統(tǒng)的主要頁(yè)面、數(shù)據(jù)庫(kù)的設(shè)計(jì)與實(shí)現(xiàn)作了較為詳細(xì)的講解。

本網(wǎng)上二手商品交易系統(tǒng)是運(yùn)用SPRING技術(shù)來實(shí)現(xiàn)的。其主要功能有用戶登陸注冊(cè)，商品查詢，訂單和購(gòu)物車等功能。論文在撰寫過程中，力求將應(yīng)用相結(jié)合，對(duì)各種理論進(jìn)行闡述的同時(shí)配合系統(tǒng)從實(shí)際應(yīng)用和操作技巧上加以說明，希望能夠更充分地體現(xiàn)到這些知識(shí)與技術(shù)在本系統(tǒng)中的應(yīng)用與實(shí)現(xiàn)。關(guān)鍵詞：電子商務(wù)、SPRING、數(shù)據(jù)庫(kù)

The Flea Market Website of China West Normal University

xxx

School of Computer Software Engineering2013 Instructor: xxx

Abstract: Along with the development of Internet technology, daily life can not already do without the network.The life and work of the social people of future will depend on the development of digital technology more and more.Digitize more and more, the networking, electronic, virtual.Development course and present application state and development trend of Internet, can believe network technology great change life and working way of us fully, even certain change will take place in the values of the society.This procedure tries to build up a bookshop in the network with SPRING so that every customer needn't go out and can do shopping easily through surfing the Net at home.This article is analyzing the design and realization of an online bookshop with Data Mining function, from the views of theory and practice.Starting with introducing concepts and techniques of OOA and OOP in detail, especially introducing the knowledge which apply for this system, such as the feature and flow

of OOA and OOPanalyzing the featurestructure and using method of developing techniques SPRING and ADO.NET which using in my system.And then, this article analyses the feasibility of the system, then minutely layouts the design thoughts, goals and the system holistic framework.At last, this article minutely explains the design and realization of Web page layout, data base and application program of our system.This online bookstore system uses SPRING technology to realize on Visual Studio.Net platform.Its main function has users login and registration, thecommodity system, process of purchase, the comment of the books, etc.During the course of writing this article, I strive to integrate theory and practice.While expatiating the different kind of theories, I illuminate the application and operation skill combining the system so as to fully incarnate the application of these theories and techniques to this system.Keywords：Electronic Business, SPRING,DATABASE

第一章

緒

論

1.1研究背景

近幾年來互聯(lián)網(wǎng)的快速發(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ā)展方向，但是還沒有一個(gè)專門只為當(dāng)代大學(xué)生提供的一個(gè)純粹的“二手網(wǎng)”。

在跳蚤市場(chǎng)中，甩賣的物品多為大四畢業(yè)學(xué)生在大學(xué)四年中的生活、學(xué)習(xí)、社交等用品。這些是他們無法帶走或者舍不得丟掉的，但仍然可以再次利用起來的物品。這些舊物品對(duì)學(xué)弟學(xué)妹們來說可是一些寶貝，它可以為學(xué)弟學(xué)妹們提供一些方便的、可靠的、有效的學(xué)習(xí)資料，一些便宜的生活物資以及即將到來的大學(xué)畢業(yè)提供一些方向。

但是，從近幾年的狀況來看，畢業(yè)生大部分的東西是沒有得到利用的，往往是以廉價(jià)賣給廢品回收站，有的學(xué)弟學(xué)妹卻以高額的價(jià)格從各個(gè)商店買來一些接下來的學(xué)習(xí)和生活可能需要的物品。

1.2歷史及現(xiàn)狀

跳蚤市場(chǎng)（flea market）是歐美等西方國(guó)家對(duì)舊貨地?cái)偸袌?chǎng)的別稱。由一個(gè)個(gè)地?cái)倲偽唤M成，市場(chǎng)規(guī)模大小不等。出售商品多是舊貨、人們多余的物品及未曾用過但已過時(shí)的衣物等，小到衣服上的小裝飾物，大到完整的舊汽車、錄像機(jī)、電視機(jī)、洗衣機(jī)，一應(yīng)俱全，應(yīng)有盡有。價(jià)格低廉，僅為新貨價(jià)格的10％～30％。跳蚤市場(chǎng)的管理松散。有關(guān)flea market的來源，有兩種理論： 據(jù)語(yǔ)源學(xué)家克麗絲汀·安默兒說，flea market最初來源于紐約的Fly Market，F(xiàn)ly Market是紐約下曼哈頓地區(qū)的一個(gè)固定市場(chǎng)，這一市場(chǎng)從美國(guó)獨(dú)立戰(zhàn)爭(zhēng)(1775年)之前一直延續(xù)到大約1816年。Fly這個(gè)詞來源于該市場(chǎng)的荷蘭語(yǔ)名稱Vly或Vile，這個(gè)詞在荷蘭語(yǔ)的意思是“山谷”，很巧的是，它在荷蘭語(yǔ)中的發(fā)音正好和英語(yǔ)中的flea一樣，所以就形成了英語(yǔ)中的flea market。

目前市場(chǎng)上有眾多二手網(wǎng)，基本可分為二手房、二手車、二手書、二手日常用品這幾大類；按地域則幾乎每個(gè)地區(qū)都有本地的二手交易網(wǎng)。二手商品皆有一個(gè)破損率、折舊率的概念，因此不可能像新商品一樣采用標(biāo)明商品性能的方式，所以其信任度有待而估以及大都采用線下交易方式。

另外這些網(wǎng)站基本上全是會(huì)的都摻雜一些無聊廣告、游戲推送，并沒有一個(gè)很好專屬于校園的二手網(wǎng)，頁(yè)面無法很好的根據(jù)師生需求進(jìn)行物品搜素。1.3發(fā)展前景及優(yōu)勢(shì)

首先，學(xué)校擴(kuò)招，師生人數(shù)不斷的增加，用戶群將不斷的更新擴(kuò)大；其次，各個(gè)高校并沒有專屬于自己的跳蚤市場(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]。

其次，最近年輕人惰性增加，對(duì)需要體力的事情拒之千里，從心里面產(chǎn)生抵觸。另外，二手市場(chǎng)給予用戶一個(gè)指路牌，直接將用戶帶到所要搜尋的商品面前，節(jié)省了用戶在市場(chǎng)中心急如焚、汗流浹背、口干舌燥地尋找與砍價(jià)。依賴于品種豐富，購(gòu)買者選擇余地較大；購(gòu)買方便、售價(jià)便宜等優(yōu)勢(shì)。從側(cè)面給電子商務(wù)增 加潛在市場(chǎng)。

然后，該網(wǎng)站開發(fā)會(huì)逐步更新；管理涉及西華師范大學(xué)師生，管理經(jīng)費(fèi)較少。預(yù)計(jì)在近五年里Flea Market將快速占有四川高校市場(chǎng)，直到最后占有全國(guó)市場(chǎng)的大部分甚至更遠(yuǎn)。

1.4研究目的

以西華師范大學(xué)一年一度的跳蚤市場(chǎng)為背景，讓廢舊物品得到充分的利用；方便了同學(xué)也營(yíng)造了節(jié)約光榮，浪費(fèi)可恥的校園文化氛圍；為在校師生提供一個(gè)供需平臺(tái)，所有注冊(cè)用戶都可以將自己不用的東西放在網(wǎng)上，同時(shí)也可以在網(wǎng)上找到自己需要的東西，物美價(jià)廉，達(dá)到雙贏；其次是間接性的為學(xué)弟學(xué)妹從中找到自己以后可能發(fā)展方向，并為之而努力奮斗。

1.5開發(fā)工具

開發(fā)工具：JerBrains WebStorm10、MyEclipse 10 開發(fā)語(yǔ)言：JAVA

運(yùn)行環(huán)境：Windows XP/7/10 數(shù)據(jù)庫(kù)：MySql JerBrains WebStorm的介紹： JerBrains WebStorm中文名為：網(wǎng)絡(luò)風(fēng)暴，享有WEB前端開發(fā)神器的名譽(yù)。功能上：具有JavaScript功能，例如：基于DOM，特定瀏覽器完成、編碼導(dǎo)航和用法查詢、支持結(jié)點(diǎn)、重構(gòu)、單元測(cè)試等；具有批量代碼分析、編輯語(yǔ)言混合、拼寫檢查、重復(fù)代碼檢測(cè)器的功能；支持H5、CSS/JS、顯示內(nèi)容及應(yīng)用風(fēng)格；具有便捷的環(huán)境，可以遠(yuǎn)程同步、集成版本控制系統(tǒng)、本地記錄等。

另外，具有強(qiáng)烈的智能代碼補(bǔ)全、代碼優(yōu)化、html提示、聯(lián)想查詢、代碼重構(gòu)，以及代碼檢查和快速修復(fù)、調(diào)試、結(jié)構(gòu)瀏覽、折疊等等功能優(yōu)勢(shì)。

第二章

系統(tǒng)需求分析

2.1功能分析

為解決不同用戶的不同需求，該網(wǎng)站主要功能有：用戶模塊、一級(jí)菜單分類模塊、商品模塊、購(gòu)物車模塊、訂單模塊等[1]。

2.1.1用戶模塊

根據(jù)對(duì)用戶簡(jiǎn)單分析[2]，得出用戶基本功能，見圖2.1。

注冊(cè)：前臺(tái)的JS校驗(yàn)、使用AJAX完成對(duì)用戶名異步校驗(yàn)、后臺(tái)Struts 2校驗(yàn)、驗(yàn)證碼、發(fā)送激活郵件、將用戶信息存入數(shù)據(jù)庫(kù)里面。

激活：根據(jù)激活碼查詢用戶是否存在，激活或者修改用戶狀態(tài)。登陸：輸入用戶名和密碼進(jìn)行數(shù)據(jù)校驗(yàn)，驗(yàn)證碼校驗(yàn)進(jìn)行用戶登陸。退出：銷毀session。

圖2.1 用戶模塊圖

2.1.2一級(jí)菜單模塊

查詢一級(jí)分類及商品類型，并將分類存入到session范圍類，同時(shí)查詢到每個(gè)一級(jí)分類所屬的二級(jí)分類，以及查詢所有商品分類下面的所有商品，并采用分頁(yè)方式顯示，見圖2.2。

圖2.2 一級(jí)菜單模塊圖

2.1.3商品模塊

對(duì)商品的展示，查詢熱門商品、查詢最新商品、根據(jù)ID查詢商品，見圖2.3。

圖2.3 商品模塊圖

2.1.4購(gòu)物車模塊

用戶將商品添加到購(gòu)物車、從購(gòu)物車中移除商品、清空購(gòu)物車中所有商品等，見圖2.4。

圖2.4 購(gòu)物車模塊圖

2.1.5訂單模塊

為用戶生成訂單，將購(gòu)物車中信息存入數(shù)據(jù)庫(kù)中；為訂單付款，在線支付、修改訂單狀態(tài)、修改訂單信息；查詢用戶訂單等，見圖2.5。

圖2.5 訂單模塊圖

2.2安全性分析

安全方面，普通用戶只可以查找商品、和賣家留言聯(lián)系進(jìn)行商品買賣；注冊(cè)用戶可以更改自己的相關(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)安全性、程序安全性三重安全性管理來達(dá)到系統(tǒng)要求的安全性[3]。

2.3運(yùn)行分析

支持系統(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沒有被其他的占用。硬件方面需建立維護(hù)和使用制度，在硬件選擇是要充分考慮硬件的負(fù)載和應(yīng)用環(huán)境。軟件方面則需對(duì)系統(tǒng)進(jìn)行定期地維護(hù)，盡量能夠預(yù)防各種BUG問題。

2.4可行性分析

可行性分析也稱可行性研究，是在系統(tǒng)調(diào)查的基礎(chǔ)上，針對(duì)新系統(tǒng)的開發(fā)是否具備必要性和可能性，對(duì)新系統(tǒng)的開發(fā)從技術(shù)、經(jīng)濟(jì)、社會(huì)的方面進(jìn)行分析和研究，以避免投資失誤，保證新系統(tǒng)的開發(fā)成功。

2.4.1技術(shù)可行性

前端采用HTML5、CSS3布局；JS、JQuery技術(shù)頁(yè)面動(dòng)畫效果； AJAX頁(yè)面數(shù)據(jù)的交互；代碼分段、分類，重用率高，可維護(hù)性強(qiáng)[4]。后臺(tái)SSH框架，著重struts和spring進(jìn)行業(yè)務(wù)分層描寫；代碼層次清晰可維護(hù)性強(qiáng)。后端數(shù)據(jù)庫(kù)采用SQL編寫，輕便且功能強(qiáng)大，數(shù)據(jù)處理快、權(quán)限設(shè)置準(zhǔn)確、數(shù)據(jù)安全性高。2.4.2經(jīng)濟(jì)可行性

經(jīng)濟(jì)可行性主要對(duì)系統(tǒng)的經(jīng)濟(jì)效益進(jìn)行評(píng)價(jià)，該系統(tǒng)的設(shè)計(jì)與開發(fā)不需要特殊硬件，使用的軟件為開源免費(fèi)的，不會(huì)產(chǎn)生技術(shù)專利問題，同在開發(fā)過程中的經(jīng)費(fèi)低[5]。

第三章

系統(tǒng)總體設(shè)計(jì)

3.1設(shè)計(jì)概述

根據(jù)需求將網(wǎng)站劃分為不同的模塊，每個(gè)模塊將完成特定功能，最后將每個(gè)模塊鏈接起來，組成一個(gè)整體[6]。

3.2總體結(jié)構(gòu)

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

圖3.1 總體模塊功能劃分圖

3.3各個(gè)模塊功能

各個(gè)模塊功能如下

用戶模塊：用戶注冊(cè)、用戶激活、登陸、退出等功能。

圖3.2 用戶管理模塊功能圖 注冊(cè)主要有，用戶名(唯一標(biāo)識(shí))、密碼、郵箱、姓名、性別、電話、地址，以及需要激活的驗(yàn)證碼。

激活主要應(yīng)用在用戶登錄時(shí)，將用戶的狀態(tài)修改。登錄和注銷用來管理用戶的回話信息，登錄時(shí)，網(wǎng)站會(huì)保留用戶的基本信息，包括用戶ID、用戶名等。退出時(shí)用戶信息會(huì)清除。

商品模塊：根據(jù)熱賣狀態(tài)對(duì)商品的瀏覽，或者根據(jù)分類狀態(tài)瀏覽商品。每個(gè)用戶皆可以根據(jù)一定的條件對(duì)全部或部分商品搜索后瀏覽，并可以看到商品的一些基本信息。例如：商品名稱、從不同角度展現(xiàn)出的圖片、商品作用、購(gòu)買時(shí)間、原價(jià)、現(xiàn)價(jià)等信息。

購(gòu)物車模塊：添加、移除、查詢、清空等功能。

添加商品，用戶根據(jù)商品ID將商品添加到購(gòu)物車中。移除商品，只能根據(jù)商品ID移除單個(gè)商品。

查詢購(gòu)物車，查詢購(gòu)物車中商品的各種信息，包括商品種類、數(shù)量、單價(jià)以及總價(jià)。

清空購(gòu)物車，一次性將購(gòu)物車中所有的商品全部移除。

圖3.3 購(gòu)物車模塊功能圖

訂單模塊：商品添加后自動(dòng)生成訂單，用戶根據(jù)需求查詢訂單、對(duì)商品進(jìn)行支付等功能。

圖3.4 訂單模塊功能圖

第四章 系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)

4.1數(shù)據(jù)庫(kù)需求分析

在整個(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ù)丟失等問題。系統(tǒng)開發(fā)中數(shù)據(jù)可設(shè)計(jì)至關(guān)重要，它將影響整個(gè)系統(tǒng)的執(zhí)行效率和可靠性，關(guān)系到系統(tǒng)管理員的操作、運(yùn)行等的可靠性。

該網(wǎng)站開發(fā)過程中使用MySql數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)名為將j2ee，用戶名root，數(shù)據(jù)庫(kù)密碼123。

4.2概念結(jié)構(gòu)設(shè)計(jì)

數(shù)據(jù)庫(kù)的概念結(jié)構(gòu)設(shè)計(jì)就是將需求分析得到的用戶需求抽象為信息結(jié)構(gòu)，即概念模型。概念模型作為概念結(jié)構(gòu)設(shè)計(jì)的表達(dá)工具，為數(shù)據(jù)庫(kù)提供一個(gè)說明性結(jié)構(gòu)，是設(shè)計(jì)數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)即邏輯模型的基礎(chǔ)[3]。

數(shù)據(jù)庫(kù)的概念結(jié)構(gòu)設(shè)計(jì)就是將需求分析得到的用戶需求抽象為信息結(jié)構(gòu)，即概念模型。概念模型的種類很多，其中最著名、最實(shí)用的一種是E－R（實(shí)體－聯(lián)系）模型，它將現(xiàn)實(shí)世界的信息結(jié)構(gòu)統(tǒng)一用屬性、實(shí)體以及他們之間的聯(lián)系來描述[3]。

以下是本數(shù)據(jù)庫(kù)系統(tǒng)E-R模型：

圖4.1 數(shù)據(jù)庫(kù)E-R模型圖

4.3邏輯結(jié)構(gòu)設(shè)計(jì)

該網(wǎng)站主要數(shù)據(jù)表有：用戶信息表user、一級(jí)菜單表goodstitle、商品信息表product、二級(jí)菜單表goodstitlesecond、訂單信息表orderitem、定單表order。

用戶表user存放的為用戶登錄、注冊(cè)信息，具體表結(jié)構(gòu)設(shè)計(jì)見圖4.2。

圖4.2 用戶信息表

一級(jí)菜單表goodstitle存放商品類型信息，具體表結(jié)構(gòu)見圖4.3。

圖4.3 用戶信息表

二級(jí)菜單表goodstitlesecond存放商品分類信息，具體表結(jié)構(gòu)見圖4.4。

圖4.4 二級(jí)菜單表

商品信息表product存放商品各種基本信息，具體表結(jié)構(gòu)見圖4.5。

圖4.5 商品信息表 訂單信息表orderitem存放訂單各種狀態(tài)信息，具體表結(jié)構(gòu)見圖4.6。

圖4.6 訂單信息表

定單表order存放用戶訂購(gòu)商品信息，具體表結(jié)構(gòu)見圖4.7。

圖4.7 訂單表

第五章 系統(tǒng)詳細(xì)設(shè)計(jì)

5.1前臺(tái)界面設(shè)計(jì)

界面是網(wǎng)站的門面，以達(dá)到美觀、舒適、操作方便、信息準(zhǔn)確、結(jié)構(gòu)合理為標(biāo)準(zhǔn)。

5.1.1首頁(yè)界面設(shè)計(jì)

用戶一打開該網(wǎng)站，就通過客戶端的首頁(yè)對(duì)該網(wǎng)站的功能一目了然[1]。網(wǎng)站采取暖色調(diào)背景，促進(jìn)用戶的購(gòu)物欲望。用戶可以根據(jù)“圖書”、“宿舍生活”、“戶外活動(dòng)”、“電器”、“其他”等不同類別瀏覽該網(wǎng)站，也可通過首頁(yè)各個(gè)板塊瀏覽商品信息。其中“注冊(cè)”為注冊(cè)成為普通用戶的功能，“登陸”為有賬號(hào)的[7]所有類型用戶可以操作。其中頭部和尾部的設(shè)計(jì)是一樣的。

首頁(yè)界面如下所示：

(a)頭部

(b)熱賣

(c)限時(shí)搶購(gòu)

(d)促銷區(qū)

(e)其他

(f)底部

圖5.1 網(wǎng)站首頁(yè)

5.1.2主要界面設(shè)計(jì)

商品展示界面為用戶瀏覽商品信息的主要界面。按不同的分類瀏覽，不同的分類器商品信息不同，但功能風(fēng)格相同。這里將展示出其界面。每種商品都以小圖或者簡(jiǎn)介的形式展示，單擊可以查看其詳細(xì)信息和放大圖片，以直觀的方式介紹商品。另外，在每個(gè)頁(yè)面中用戶都可直接注冊(cè)和登陸，商品類型，從而為用戶操作提供方便。

商品界面如下所示：

(a)商品頭部

(b)商品分頁(yè)

圖5.2 商品展示界面

登陸界面如下：

圖5.3 用戶登錄界面

注冊(cè)界面

圖5.4 用戶注冊(cè)界面

5.1.3其他界面設(shè)計(jì)

用戶查看所點(diǎn)擊的商品的相關(guān)信息，并根據(jù)需求添加到購(gòu)物車實(shí)行商品購(gòu)買。

(a)商品詳細(xì) 16

(b)商品推薦

圖5.5 商品詳情頁(yè)界面

圖5.6 購(gòu)物車界面

(a)支付方式 17

(b)未支付

圖5.7 訂單界面

5.2關(guān)鍵問題設(shè)計(jì)

該網(wǎng)站采用MVC模型設(shè)計(jì)，設(shè)計(jì)到一些常用的技術(shù)手段[8]。

5.2.1驗(yàn)證碼技術(shù)

防止用戶利用機(jī)器人自動(dòng)注冊(cè)、登陸、灌水，皆采用驗(yàn)證碼技術(shù)。所謂驗(yàn)證碼，就是將一串隨機(jī)產(chǎn)生的數(shù)字或字符，生成一個(gè)特定的字符串，用戶識(shí)別其驗(yàn)證碼信息，輸入表單提交驗(yàn)證，驗(yàn)證成功后才可以使用其中特定的功能[9]。

驗(yàn)證碼的實(shí)現(xiàn)流程是：服務(wù)器端隨機(jī)生成驗(yàn)證嗎字符串，保存在內(nèi)存中，發(fā)送給瀏覽器顯示；瀏覽器端輸入驗(yàn)證碼字符串，然后提交服務(wù)器端，提交的字符與服務(wù)器端保存的字符進(jìn)行比較，若一致則繼續(xù)下一步，否則返回提示。

驗(yàn)證碼主要代碼： BufferedImage img=new BufferedImage(150,30,BufferedImage.TYPE_INT_BGR);

Graphics g=img.getGraphics();

g.setColor(Color.black);

g.fillRect(0, 0, 150,30);

g.setFont(new Font(“楷體”,Font.BOLD,25));

Random ran=new Random();

String strs=“1234567890asdfghjklzxcvbnmqwertyuiop”;

StringBuffer sb=new StringBuffer();

for(int i=1;i<=4;i++){

char a=strs.charAt(ran.nextInt(strs.length()));

int r=ran.nextInt(255);

int g1=ran.nextInt(255);

int b=ran.nextInt(255);

g.setColor(new Color(r,g1,b));

switch(i){

case 1: g.drawString(a+“",20,15);break;

case 2: g.drawString(a+”“,60,25);break;

case 3:g.drawString(a+”“,90,15);break;

case 4: g.drawString(a+”“,130,20);break;

default: break;

}

sb.append(a);

}

ServletActionContext.getRequest().getSession().setAttribute(”validateCodeSession“,sb.toString());

for(int i=0;i<10;i++){

int x1=ran.nextInt(150);

int y1=ran.nextInt(30);

int x2=ran.nextInt(150);

int y2=ran.nextInt(30);

g.drawLine(x1, y1, x2, y2);

}

g.dispose();

ImageIO.write(img, ”jpg“, ServletActionContext.getResponse().getOutputStream());

return NONE;5.2.2左右無縫平移設(shè)計(jì)

圖片或圖層平移無間隙，緩和地平移圖片或圖層，使得頁(yè)面效果更平緩。無縫平移主要代碼： $:function(objName){

if(document.getElementById){ return eval('document.getElementById(”'+objName+'“)')

}else{ return eval('document.all.'+objName)} }，isIE:navigator.appVersion.indexOf(”MSIE“)!=-1?true:false，addEvent:function(l,i,I){

if(l.attachEvent){

l.attachEvent(”on“+i,I)

}else{

l.addEventListener(i,I,false)

}

}，delEvent:function(l,i,I){

if(l.detachEvent){

l.detachEvent(”on“+i,I)

}else{

l.removeEventListener(i,I,false)

}

}，readCookie:function(O){

var o=”“,l=O+”=“;if(document.cookie.length>0){

var i=document.cookie.indexOf(l);

if(i!=-1){

i+=l.length;var I=document.cookie.indexOf(”;“,i);

if(I==-1)I=document.cookie.length;

o=unescape(document.cookie.substring(i,I))

}

};

return o;

}，writeCookie:function(i,l,o,c){

var O=”“,I=”“;

if(o!=null){

O=new Date((new Date).getTime()+o*3600000);

O=”;expires=“+O.toGMTString()

};

if(c!=null){

I=”;domain=“+c;

};

document.cookie=i+”=“+escape(l)+O+I;

}，readStyle:function(I,l){

if(I.style[l]){

return I.style[l]

}else if(I.currentStyle){

return I.currentStyle[l];

}else if(document.defaultView&&document.defaultView.getComputedStyle){

var i=document.defaultView.getComputedStyle(I,null);

return i.getPropertyValue(l);

}else{

return null;

}

}

5.2.3輪播切換設(shè)計(jì)

圖層輪播切換技術(shù)采用純JS技術(shù)編寫，實(shí)現(xiàn)頁(yè)面動(dòng)畫效果。主要代碼如下： NextPrev:function(e){

var btnClass =$(e.target || e.event).attr(”class“);

//alert(btnClass);

btnClass==”prev“?tag =-1:tag = 1;

var src = $(”.product-img img“).attr(”src“);

var newSrc = src.slice(0,-5);

var n = parseInt(src.slice(-5,-4));

n+=tag;

n

n>this.max?n=this.min:n;

//alert(n);

$(”.product-img img“).attr(”src“,newSrc+n+”.jpg“);

}

5.2.4平移圖層

圖層平移一般應(yīng)用在詳情頁(yè)面，當(dāng)用戶需要對(duì)象應(yīng)商品進(jìn)行更深層次的了解 時(shí)，需仔細(xì)查看圖層的各個(gè)細(xì)節(jié)，其平移位置根據(jù)鼠標(biāo)的位置而定。部分代碼如下：

maskMove:function(e){

var x = e.offsetX;

var y = e.offsetY;

var left = xthis.MSize/2;

left = left<=0?0:left;

left>=this.MaxLft?this.MaxLft:left;

top = top<=0?0:top;

top>=this.MaxTop?this.MaxTop:top;

$(”#mask“).css({ ”left“:left+110, ”top“:top+170

});

} 5.2.5分頁(yè)技術(shù)

當(dāng)商品類型過多時(shí)，需對(duì)商品展示進(jìn)行分頁(yè)展示。先統(tǒng)計(jì)數(shù)據(jù)庫(kù)中商品的總數(shù)，在根據(jù)頁(yè)面展示的數(shù)量大小進(jìn)行分頁(yè)顯示[10]。主要代碼如下：

PageSet

pageSetBean=new PageSet

();

pageSetBean.setType(1);

pageSetBean.setPage(page);//設(shè)置當(dāng)前頁(yè)數(shù)

int limit=8;//設(shè)置當(dāng)前顯示記錄數(shù)

pageSetBean.setLimit(limit);

int numberCount=0;//總記錄數(shù)

numberCount=productDao.findnumberCount(gid);

pageSetBean.setNumberCount(numberCount);

int pageCount=0;//總頁(yè)數(shù)

if(numberCount%limit==0){

pageCount=numberCount/limit;

}else{

pageCount=(numberCount/limit)+1;

}

pageSetBean.setPageCount(pageCount);

int begin=(page-1)*limit;//設(shè)置數(shù)據(jù)集合

List

list=productDao.findProductPage(gid,begin,limit);pageSetBean.setList(list);return pageSetBean;5.2.6 郵箱激活

用戶注冊(cè)時(shí)進(jìn)行驗(yàn)證碼激活。主要代碼如下：

public static void sendEmail(String into,String codeNumber){

Properties p=new Properties();

p.setProperty(”mail.host“,”localhost“);

Session session=Session.getInstance(p,new Authenticator(){

@Override

protected javax.mail.PasswordAuthentication getPasswordAuthentication(){

return new PasswordAuthentication(”service@igou.com“, ”123“);

};

});

Message message =new MimeMessage(session);

try {

message.setFrom(new InternetAddress(”service@igou.com“));

message.addRecipient(RecipientType.TO, new InternetAddress(into));

message.setSubject(”email“);

message.setContent(”

email

Transport.send(message);

} catch(AddressException e){

// TODO Auto-generated catch block

e.printStackTrace();

} catch(MessagingException e){

// TODO Auto-generated catch block

e.printStackTrace();

}

}

結(jié)論

經(jīng)過這三個(gè)月的畢業(yè)設(shè)計(jì)，我完成了flea market網(wǎng)站，即該網(wǎng)站從分析、設(shè)計(jì)到實(shí)現(xiàn)的三個(gè)過程。在設(shè)計(jì)過程中，通過查閱大量的相關(guān)資料、與同學(xué)交流經(jīng)驗(yàn)、自學(xué)、并向老師請(qǐng)教等方式促使自己學(xué)到不少知識(shí)，并大大提高了實(shí)際操作能力。讓我充分體會(huì)到在創(chuàng)造過程中的艱辛探索和成功的喜悅。

同時(shí)，通過開發(fā)這個(gè)網(wǎng)站讓我對(duì)軟件工程設(shè)計(jì)方面有了更深層次的理解，在前期需求分析和數(shù)據(jù)可設(shè)計(jì)時(shí)，沒有很好的理解其相關(guān)性，導(dǎo)致后期在開發(fā)過程中出現(xiàn)框架設(shè)計(jì)錯(cuò)誤，自己只能邊設(shè)計(jì)邊修改需求方案，最終在老師和自己的合理調(diào)整后解決了相應(yīng)的問題，這是在今后項(xiàng)目開發(fā)是需要謹(jǐn)記得教訓(xùn)。

在實(shí)際項(xiàng)目開發(fā)過程中，由于時(shí)間和本人缺乏系統(tǒng)設(shè)計(jì)經(jīng)驗(yàn)，因此網(wǎng)站依然存在一些遺憾和不足，比如驗(yàn)證的嚴(yán)謹(jǐn)性、瀏覽器之間的兼容性、后臺(tái)操作的準(zhǔn)確性等問題。雖然這些問題存在，但是在設(shè)計(jì)的過程中所學(xué)到的東西是這次畢業(yè)設(shè)計(jì)的最大收獲和財(cái)富，使我終身受益。

參考文獻(xiàn)

[1] 冀振燕．UML系統(tǒng)分析與設(shè)計(jì)教程[M]．北京：人民郵電出版社，2014.[2] 錢樂秋.軟件工程[M].清華大學(xué)出版社，2013.[3] Baron Schwartz等.高性能MySQL 第三版[M].電子工業(yè)出版社，2013.5.[4] 陳華.Ajax從入門到精通[M].清華大學(xué)出版社，2012.[5] 劉克強(qiáng).電子商務(wù)平臺(tái)建設(shè)[M].人民郵電出版社，2011.[6] 鄭阿奇.SQL Server數(shù)據(jù)庫(kù)教程[M].北京：人民郵電出版社，2013.[7] 魏雪萍.完美網(wǎng)站建設(shè)全能[M].人民郵電出版社，2012.[8] 陳雄化 林開雄.Spring3.x企業(yè)應(yīng)用開發(fā)實(shí)戰(zhàn)[M].電子工業(yè)出版社，2013.5.[9] 劉京華.Java Web整合開發(fā)王者歸來[M].清華大學(xué)出版社，2012.5.[10]葛一鳴等.Java 程序性能優(yōu)化[M].清華大學(xué)出版社，2012.10.24

致

謝

在這三個(gè)月的忙碌和學(xué)習(xí)中，畢業(yè)設(shè)計(jì)也即將結(jié)束，作為一名本科生畢業(yè)設(shè)計(jì)，因經(jīng)驗(yàn)不足，難免有諸多考慮不周的地方，在此衷心感謝李艷梅老師給予我的督促指導(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ì)順利完成。

畢業(yè)設(shè)計(jì)，可以很好地總結(jié)大學(xué)四年中收獲、認(rèn)知。與此同時(shí)，幫助改變一些處理事情時(shí)的懶惰。從最開始的材料收集，整理資料，題目構(gòu)思與確定，到網(wǎng)站設(shè)計(jì)以及搭建。每一步都需精心思考，認(rèn)真查閱資料，仔細(xì)實(shí)際操作。

通過畢業(yè)設(shè)計(jì)，讓我深刻領(lǐng)會(huì)到基礎(chǔ)的重要性。它不僅幫助檢驗(yàn)學(xué)生大學(xué)期間的學(xué)習(xí)成果，還可幫助我們更加清楚地認(rèn)識(shí)自我，更多地磨練我們的意志與耐性，這會(huì)為我們今后的工作、生活帶來巨大幫助。

最后，再次感謝李艷梅老師給予我的耐心、細(xì)致、全面的指導(dǎo)，感謝關(guān)心和鼓勵(lì)我的同伴們，感謝學(xué)校老師、領(lǐng)導(dǎo)，感謝你們給予我的幫助與關(guān)懷；感謝西華師范大學(xué)計(jì)算機(jī)學(xué)院四年來為我提供良好的學(xué)習(xí)環(huán)境。

第三篇：網(wǎng)站設(shè)計(jì) 畢業(yè)論文 畢業(yè)設(shè)計(jì)

（論文設(shè)計(jì)（論文）題目

JSP動(dòng)態(tài)網(wǎng)站設(shè)計(jì)

學(xué) 院 教 學(xué) 系 班 級(jí)

姓 名 指導(dǎo)教師

畢業(yè)設(shè)計(jì)）

畢業(yè)論文

JSP動(dòng)態(tài)網(wǎng)站設(shè)計(jì)

摘要

隨著Internet技術(shù)的發(fā)展,人們的日常生活已經(jīng)離不開網(wǎng)絡(luò)。未來社會(huì)人們的生活和工作將越來越依賴于數(shù)字技術(shù)的發(fā)展，越來越數(shù)字化、網(wǎng)絡(luò)化、電子化、虛擬化。Internet的發(fā)展歷程以及目前的應(yīng)用狀況和發(fā)展趨勢(shì)，可以充分地相信網(wǎng)絡(luò)技術(shù)將極大的改變我們的生活和工作方式，甚至社會(huì)的價(jià)值觀也會(huì)發(fā)生某種變化。

企業(yè)網(wǎng)站，就是企業(yè)在互聯(lián)網(wǎng)上進(jìn)行網(wǎng)絡(luò)建設(shè)和形像宣傳的平臺(tái)。企業(yè)網(wǎng)站就相當(dāng)于一個(gè)企業(yè)的網(wǎng)絡(luò)名片，不但對(duì)企業(yè)的形象是一個(gè)良好的宣傳，同時(shí)可以輔助企業(yè)的銷售，甚至可以通過網(wǎng)絡(luò)直接幫助企業(yè)實(shí)現(xiàn)產(chǎn)品的銷售，企業(yè)可以利用網(wǎng)站來進(jìn)行宣傳、產(chǎn)品資訊發(fā)布、招聘等等。企業(yè)網(wǎng)站的作用就是為展現(xiàn)公司形象，加強(qiáng)客戶服務(wù)，完善網(wǎng)絡(luò)業(yè)務(wù)，還可以與潛在客戶建立商業(yè)聯(lián)系。本網(wǎng)站使用JSP技術(shù)，所謂JSP就是在傳統(tǒng)的網(wǎng)頁(yè)HTML文件（*.html,*.htm）中加入Java程序片段（Scriptlet）和JSP標(biāo)記（tag），就構(gòu)成了JSP網(wǎng)頁(yè)（*.jsp）。Web服務(wù)器在遇到訪問JSP網(wǎng)頁(yè)的請(qǐng)求時(shí)，首先執(zhí)行其中的程序片段，然后執(zhí)行結(jié)果以HMTL格式返回給客戶。程序片段可以操作數(shù)據(jù)庫(kù)、重新定向網(wǎng)頁(yè)以及發(fā)送E-mail等，這就是建立動(dòng)態(tài)網(wǎng)站所需要的功能。所有程序操作都在服務(wù)器端執(zhí)行，網(wǎng)絡(luò)上傳送給客戶端的僅僅是結(jié)果，對(duì)客戶瀏覽器的要求最低。

在Java的基礎(chǔ)上開發(fā)出的JSP實(shí)現(xiàn)了動(dòng)態(tài)頁(yè)面與靜態(tài)頁(yè)面的分離，脫離了硬件平臺(tái)的束縛以及編譯后運(yùn)行等方式，大大提高了其執(zhí)行效率而逐漸成為Internet上的主流開發(fā)工具。在美國(guó)，EJB+Servlet+JSP幾乎成為了電子商務(wù)的開發(fā)標(biāo)準(zhǔn)，而在我國(guó)也正逐漸興起，不少網(wǎng)站都采用了JSP技術(shù)。全球電子商務(wù)的出現(xiàn)和發(fā)展，無疑為我國(guó)發(fā)展知識(shí)經(jīng)濟(jì)和推進(jìn)現(xiàn)代化事業(yè)提供了歷史機(jī)遇，也提出了嚴(yán)峻的挑戰(zhàn)。電子商務(wù)是信息化社會(huì)的商務(wù)模式，也是商務(wù)的未來。作為一種現(xiàn)代商務(wù)模式，電子商務(wù)利用計(jì)算機(jī)網(wǎng)絡(luò)檢索和獲取信息，對(duì)個(gè)人和公司提供決策服務(wù)，解決了組織、商家和客戶的需求，減少了用于改善貨物和服務(wù)質(zhì)量的投入，加快了商品交易的速度。電子商務(wù)可以應(yīng)用于制造到零售，從銀行、金融機(jī)構(gòu)到出版娛樂以及其他的任何企業(yè)。

關(guān)鍵詞 ：電子商務(wù) JSP MySQL

畢業(yè)論文

目 錄

摘要...............................................................1 1緒論..............................................................1 1.1課題背景與來源..................................................1

1.2 課題研究意義...................................................1 1.3企業(yè)網(wǎng)站的由來和發(fā)展............................................2 2 開發(fā)工具的介紹及選擇.............................................2 2.1 Dreamweaver8.0.................................................2 2.2 MyEclipse 8.5..................................................3 2.3 JavaScript.....................................................4 3 企業(yè)網(wǎng)站結(jié)構(gòu)設(shè)計(jì).................................................4 3.1 技術(shù)涉及領(lǐng)域...................................................4 3.2可行性分析......................................................8 3.3網(wǎng)站的設(shè)計(jì)與規(guī)劃................................................8

3.3.1網(wǎng)站目的.................................................10 3.3.2網(wǎng)站概貌.................................................11 3.3.3功能規(guī)劃.................................................11 4數(shù)據(jù)庫(kù)設(shè)計(jì)實(shí)現(xiàn)...................................................11 4.1 數(shù)據(jù)庫(kù)設(shè)計(jì)....................................................11 4.2注冊(cè)表（tb_login）.............................................13 4.3產(chǎn)品表（product）..............................................14 4.4購(gòu)物車表（tb_shop）............................................14 4.5 網(wǎng)頁(yè)與數(shù)據(jù)庫(kù)的鏈接代碼........................................15 5模塊功能實(shí)現(xiàn).....................................................15 5.1系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì)...............................................15 5.2 主頁(yè)頁(yè)面......................................................16 5.3 登陸/注冊(cè).....................................................16 5.4購(gòu)物頁(yè)面.......................................................19 5.5其它頁(yè)面實(shí)現(xiàn)...................................................21 6設(shè)計(jì)技巧和解決方法...............................................22 7總 結(jié)............................................................23 謝辭..............................................................24 參考文獻(xiàn)..........................................................25

畢業(yè)論文

1緒論

1.1課題背景與來源

在已跨入21世紀(jì)的今天，人類使用和學(xué)習(xí)信息的方式以及信息的包裝方式正在進(jìn)行著不可阻擋的革命，這次革命將比印刷術(shù)的出現(xiàn)所產(chǎn)生的影響以及對(duì)社會(huì)發(fā)展的推動(dòng)遠(yuǎn)為復(fù)雜而巨大。

隨著網(wǎng)絡(luò)的發(fā)展，越來越多的企業(yè)需要搭建公司網(wǎng)站，將其作為對(duì)外宣傳、推廣、服務(wù)及傳銷的載體，來配合公司的發(fā)展和需要，使更多的客戶通過網(wǎng)絡(luò)來結(jié)盟公司。本課題根據(jù)企業(yè)的具體情況及需要，設(shè)計(jì)開發(fā)企業(yè)宣傳網(wǎng)站，幫助其充分利用國(guó)際互聯(lián)網(wǎng)上的信息資源，服務(wù)現(xiàn)有客戶，挖掘潛在客戶，最大限度地開拓屬于另一片天空的市場(chǎng)。是目前使用最為廣泛的軟件系統(tǒng)。課題涉及的知識(shí)較廣泛,其中包括了目前最新的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，如WEB標(biāo)準(zhǔn)、XHTML技術(shù)的應(yīng)用、CSS技術(shù)的應(yīng)用、Javascript代碼的設(shè)計(jì)、網(wǎng)站的配置及發(fā)布等等內(nèi)容。通過實(shí)現(xiàn)該課題，學(xué)生對(duì)多種知識(shí)進(jìn)行綜合使用，達(dá)到融會(huì)貫通的程度，更重要的是在該課題的開發(fā)過程中學(xué)生使用WEB標(biāo)準(zhǔn)進(jìn)行網(wǎng)頁(yè)的設(shè)計(jì)，對(duì)網(wǎng)站的重構(gòu)和優(yōu)化有一個(gè)詳細(xì)深入的認(rèn)識(shí)，對(duì)于當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)的最新技術(shù)和標(biāo)準(zhǔn)規(guī)范有了一次真實(shí)體驗(yàn)，使學(xué)生在就業(yè)前得到一次實(shí)踐鍛煉的機(jī)會(huì)，提前熟悉企業(yè)中網(wǎng)站開發(fā)的標(biāo)準(zhǔn)流程，更能適應(yīng)當(dāng)前市場(chǎng)的需求。

目前，我國(guó)上網(wǎng)的人口已近一個(gè)億，成立世界上網(wǎng)民最多的國(guó)家，許多人在需要查詢信息，首先想到的就是上網(wǎng)。網(wǎng)站的迷人之處在于綜合使用文本、圖象、聲音、動(dòng)畫和視頻的信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動(dòng)特點(diǎn)，無可置疑，網(wǎng)站已成為最吸引人的也最有效的信息傳遞手段和方式。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，各類網(wǎng)站紛紛出現(xiàn)。企業(yè)網(wǎng)站也成為了一種時(shí)尚。越來越多的公司通過企業(yè)網(wǎng)站，打開網(wǎng)絡(luò)世界的廣闊市場(chǎng)，展示企業(yè)的文化和形象。

1.2 課題研究意義

通過對(duì)這一題目的設(shè)計(jì)實(shí)現(xiàn), 使學(xué)生鞏固、提高和綜合運(yùn)用已學(xué)知識(shí)，同時(shí)培養(yǎng)學(xué)生綜合知識(shí)的應(yīng)用能力，提高學(xué)生分析問題和解決問題的能力，學(xué)會(huì)設(shè)計(jì)工作思路、方法、步驟，提高技術(shù)應(yīng)用能力；進(jìn)一步培養(yǎng)學(xué)生樹立嚴(yán)謹(jǐn)?shù)目茖W(xué)作風(fēng)和良好的工作能力，提高獨(dú)立思考與團(tuán)隊(duì)合作的能力。通過對(duì)本課題的設(shè)計(jì)，力圖使學(xué)生能熟練掌握利用XHTML＋CSS+Javascript等語(yǔ)言開發(fā)網(wǎng)頁(yè)的過程和開發(fā)方法，深刻地體會(huì)到在開發(fā)網(wǎng)頁(yè)時(shí)使用CSS技術(shù)的優(yōu)越性，獲得實(shí)際的開發(fā)經(jīng)驗(yàn)，熟悉一個(gè)實(shí)際項(xiàng)目的開發(fā)過程和開發(fā)方法，增加自己的編程實(shí)踐經(jīng)驗(yàn)，為自己將來的工作奠定一個(gè)堅(jiān)實(shí)的基礎(chǔ)。隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)站已經(jīng)越來越引起人們的關(guān)注，很多種搭建網(wǎng)頁(yè)的編程語(yǔ)言應(yīng)運(yùn)而生。JSP是一種動(dòng)態(tài)網(wǎng)頁(yè)的編程語(yǔ)言，它是在傳統(tǒng)的網(wǎng)頁(yè)HTML文件中插入Java程序段和JSP標(biāo)記,從而形成JSP文件。

畢業(yè)論文

用JSP開發(fā)的Web應(yīng)用是跨平臺(tái)的，既能在Linux下運(yùn)行，也能在其他操作系統(tǒng)上運(yùn)行。自JSP推出后，眾多大公司都支持JSP技術(shù)的服務(wù)器，如IBM、Oracle、Bea公司等，所以JSP迅速成為商業(yè)應(yīng)用的服務(wù)器端語(yǔ)言。JSP具備了Java技術(shù)的簡(jiǎn)單易用，完全的面向?qū)ο?，具有平臺(tái)無關(guān)性且安全可靠，主要面向因特網(wǎng)的所有特點(diǎn)。JSP將網(wǎng)頁(yè)邏輯與網(wǎng)頁(yè)設(shè)計(jì)和顯示分離，支持可重用的基于組件的設(shè)計(jì)，使基于Web的應(yīng)用程序的開發(fā)變得迅速和容易。插入的Java程序段可以操作數(shù)據(jù)庫(kù)、重新定向網(wǎng)頁(yè)等，以實(shí)現(xiàn)建立動(dòng)態(tài)網(wǎng)頁(yè)所需要的功能。JSP是在服務(wù)器端執(zhí)行的，通常返回給客戶端的就是一個(gè)HTML文本，因此客戶端只要有瀏覽器就能瀏覽。正因?yàn)镴SP擁有如此多的優(yōu)點(diǎn)，在社會(huì)上也成為了流行的編程語(yǔ)言，深受民眾的普遍受歡迎。成功完成一項(xiàng)由JSP語(yǔ)言匯編的網(wǎng)頁(yè)，將會(huì)大大提高學(xué)生的編程技術(shù)，使學(xué)生在就業(yè)前得到一次實(shí)踐鍛煉的機(jī)會(huì)，提前熟悉企業(yè)中網(wǎng)站開發(fā)的標(biāo)準(zhǔn)流程，使學(xué)生更能適應(yīng)市場(chǎng)的需求。

1.3企業(yè)網(wǎng)站的由來和發(fā)展

互聯(lián)網(wǎng)在中國(guó)的出現(xiàn)只有短短七年時(shí)間，1994年中國(guó)科學(xué)院高能物理研究所設(shè)立了國(guó)內(nèi)第一個(gè)Web服務(wù)器，推出一個(gè)叫做“中國(guó)之窗”的網(wǎng)頁(yè)，這可能是國(guó)內(nèi)Internet上出現(xiàn)的第一個(gè)Web網(wǎng)頁(yè)，1995年開始，中國(guó)教育科研網(wǎng)，中國(guó)科技網(wǎng)，中國(guó)公用計(jì)算機(jī)互聯(lián)網(wǎng)以及中國(guó)金橋網(wǎng)這構(gòu)成中國(guó)數(shù)字神經(jīng)系統(tǒng)的四大互聯(lián)網(wǎng)絡(luò)相繼建成，使互聯(lián)網(wǎng)在中國(guó)開始真正進(jìn)入社會(huì)生活之中。

企業(yè)網(wǎng)站，就是企業(yè)在互聯(lián)網(wǎng)上進(jìn)行網(wǎng)絡(luò)建設(shè)和形像宣傳的平臺(tái)。企業(yè)網(wǎng)站就相當(dāng)于一個(gè)企業(yè)的網(wǎng)絡(luò)名片，不但對(duì)企業(yè)的形象是一個(gè)良好的宣傳，同時(shí)可以輔助企業(yè)的銷售，甚至可以通過網(wǎng)絡(luò)直接幫助企業(yè)實(shí)現(xiàn)產(chǎn)品的銷售，企業(yè)可以利用網(wǎng)站來進(jìn)行宣傳、產(chǎn)品資訊發(fā)布、招聘等等。企業(yè)網(wǎng)站的作用就是為展現(xiàn)公司形象，加強(qiáng)客戶服務(wù)，完善網(wǎng)絡(luò)業(yè)務(wù)，還可以與潛在客戶建立商業(yè)聯(lián)系。隨著網(wǎng)絡(luò)的發(fā)展，出現(xiàn)了提供網(wǎng)絡(luò)資訊為盈利手段的網(wǎng)絡(luò)公司，通常這些公司的網(wǎng)站上提供人們生活各個(gè)方面的資訊，如時(shí)事新聞、旅游、娛樂、經(jīng)濟(jì)等。開發(fā)工具的介紹及選擇

2.1 Dreamweaver8.0 Web(World Wide Web，簡(jiǎn)稱 編輯器和其他編程工具（包括 Microsoft Visual Studio.NET）一起工作。這不僅使得 Web 開發(fā)更加方便，而且還能提供這些工具必須提供的所有優(yōu)點(diǎn)，包括開發(fā)人員可以用來將服務(wù)器控件拖放到 Web 頁(yè)的 GUI 和完全集成的調(diào)試支持。微軟為ASP.NET設(shè)計(jì)了這樣一些策略：易于寫出結(jié)構(gòu)清晰的代碼、代碼易于重用和共享、可用編譯類語(yǔ)言編寫等等，目的是讓程序員更容易開發(fā)出Web應(yīng)用，滿足計(jì)算向Web轉(zhuǎn)移的戰(zhàn)略需要。

JSP（JavaServer Pages）是Sun公司推出的一種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)。JSP技術(shù)是以Java語(yǔ)言作為腳本語(yǔ)言的，熟悉JAVA語(yǔ)言的人可以很快上手。JSP本身雖然也是腳本語(yǔ)言，但是卻和PHP、ASP有著本質(zhì)的區(qū)別。PHP和ASP都是由語(yǔ)言引擎解釋執(zhí)行程序代碼，而JSP代碼卻被編譯成Servlet并由Java虛擬機(jī)執(zhí)行，這種編譯操作僅在對(duì)JSP頁(yè)面的第一次請(qǐng)求時(shí)發(fā)生。因此普遍認(rèn)為JSP的執(zhí)行效率比PHP和ASP都高。JSP是一種服務(wù)器端的腳本語(yǔ)言，最大的好處就是開發(fā)效率較高，JSP可以使用JavaBeans或者EJB（Enterprise JavaBeans）來執(zhí)行應(yīng)用程序所要求的更為復(fù)雜的處理，但是這種網(wǎng)站架構(gòu)因?yàn)槠錁I(yè)務(wù)規(guī)則代碼與頁(yè)面代碼混為一團(tuán)，不利于維護(hù)，因此并不適應(yīng)大型應(yīng)用的要求，取而代之的是基于MVC的Web架構(gòu)。MVC的核心思想是將應(yīng)用分為模型、視圖和控制器三部分。模型是指應(yīng)用程序的數(shù)據(jù)，以及對(duì)這些數(shù)據(jù)的操作；視圖是指用戶界面；控制器負(fù)責(zé)用戶界面和程序數(shù)據(jù)之間的同步。通過MVC的Web架構(gòu)，可以弱化各個(gè)部分的耦合關(guān)系，并將業(yè)務(wù)邏輯處理與頁(yè)面以及數(shù)據(jù)分離開來，這樣當(dāng)其中一個(gè)模塊的代碼發(fā)生改變時(shí)，并不影響其他模塊的正常運(yùn)行，所以基于MVC的Web架構(gòu)更適應(yīng)于大型應(yīng)用開發(fā)的潮流。因此，不少國(guó)外的大型企業(yè)系統(tǒng)

畢業(yè)論文

和商務(wù)系統(tǒng)都使用以上的MVC架構(gòu)，能夠支持高度復(fù)雜的基于Web的大型應(yīng)用。

<5> JSP開發(fā)環(huán)境: JDK：Java Development Kit，Java開發(fā)工具集 Tomcat：服務(wù)器

IDE：Integated Development Environment，集成開發(fā)環(huán)境 常用：Eclipse（MyEclipse）、JBuilder 3.2可行性分析

（1）經(jīng)濟(jì)可行性分析：網(wǎng)頁(yè)開發(fā)費(fèi)用可以接受，開發(fā)周期短，網(wǎng)站使用期持久。（2）技術(shù)可行性分析：計(jì)算機(jī)硬件和軟件的飛速發(fā)展為網(wǎng)頁(yè)提供了技術(shù)條件。（3）社會(huì)可行性分析：在當(dāng)前信息技術(shù)飛速發(fā)展的大環(huán)境下，計(jì)算機(jī)技術(shù)和軟件技術(shù)的更新是網(wǎng)頁(yè)，完全有可能也有能力采用這樣先進(jìn)的技術(shù)。

3.3網(wǎng)站的設(shè)計(jì)與規(guī)劃

JSP頁(yè)面包含的元素：JSP代碼、JSP指令、JSP動(dòng)作。JSP代碼指的是嵌入在JSP頁(yè)面中的Java代碼。JSP指令是為JSP引擎設(shè)計(jì)的，它告訴JSP引擎如何處理代碼，比如引入一個(gè)其他的類、設(shè)置JSP用的語(yǔ)言等。JSP動(dòng)作是用來控制JSP引擎的動(dòng)作，比如可以根據(jù)某個(gè)條件動(dòng)態(tài)跳轉(zhuǎn)到另一個(gè)頁(yè)面。JSP的內(nèi)建對(duì)象由JSP容器自動(dòng)為JSP頁(yè)面提供，是預(yù)先存在的。在編寫JSP程序時(shí)，可以直接使用內(nèi)建對(duì)象。

JSP的常用內(nèi)建對(duì)象有：

<1>out：傳送信息到客戶端的瀏覽器。<2>request：包裝客戶端的請(qǐng)求信息。<3>response：響應(yīng)客戶端的請(qǐng)求。<4>session：客戶端請(qǐng)求的一次回話。

JDBC（Java Data Base Connectivity）Java數(shù)據(jù)庫(kù)連接。是一種用于執(zhí)行SQL語(yǔ)句的Java API，可以為多種關(guān)系數(shù)據(jù)庫(kù)提供統(tǒng)一訪問，由一組用Java語(yǔ)言編寫的類和接口組成。

MySQL的安裝、建庫(kù)、表、增刪改查、MyEclipse Database Browser。使用JDBC訪問MySQL步驟： <1>加載驅(qū)動(dòng)程序類 <2>建立連接

<3>創(chuàng)建能夠發(fā)送SQL語(yǔ)句的對(duì)象 <4>執(zhí)行發(fā)送的SQL語(yǔ)句 <5>處理返回結(jié)果 <6>關(guān)閉連接

畢業(yè)論文

加載驅(qū)動(dòng)程序類: try{ Class.forName(“com.mysql.jdbc.Driver”);} catch(Exception e){ e.printStackTrace();} 建立連接: Connection conn=DriverManager.getConnection(“jdbc:mysql://localhost:3306/數(shù)據(jù)庫(kù)名”,”用戶名”,”密碼”);創(chuàng)建能夠發(fā)送SQL語(yǔ)句的對(duì)象: Statement：向數(shù)據(jù)庫(kù)提交SQL語(yǔ)句并返回相應(yīng)結(jié)果的工具。Statement st=conn.createStatement();PreparedStatement：繼承Statement接口，當(dāng)一條SQL語(yǔ)句需要稍加變化而反復(fù)執(zhí)行時(shí)，通常可以使用PreparedStatement。

PreparedStatement ps=conn.prepareStatment(“sql”);

CallableStatement：繼承PreparedStatement接口，用于執(zhí)行存儲(chǔ)過程。CallableStatement cs=conn.prepareCall(“sql”);執(zhí)行發(fā)送的SQL語(yǔ)句: int n=st.executeUpdate(“sql”);/* 增刪改*/ int n=ps.executeUpdate();ResultSet rs=st.executeQuery(“sql”);/* 查詢*/ ResultSet rs=ps.executeQuery();cs.execute();/*其它*/ 處理返回結(jié)果: 增刪改:if(n>0)操作成功！else 操作失敗！

查詢:while(rs.next()){rs.getxxx(“列名”)//獲取結(jié)果集中的值} 關(guān)閉連接conn.close();JavaBean目前代表性的組件技術(shù)有COM、COM+、JavaBean、EJB、CORBA。它基于組件的軟件設(shè)計(jì)擁有組件可重復(fù)使用、易于替換和升級(jí)、加快軟件開發(fā)速度，縮短生產(chǎn)周期的優(yōu)勢(shì)。JavaBean支持可視化和非可視化兩種組件?？梢暬M件在運(yùn)行中能夠顯示出來。非可視化組件通常用來處理一些復(fù)雜事物，一般不會(huì)有可視化的輸出。JSP只支持一些非可視化的JavaBean來實(shí)現(xiàn)一些比較復(fù)雜的事務(wù)處理。

Servlet是服務(wù)器端的Java小程序，用于響應(yīng)客戶端的請(qǐng)求。一般會(huì)把處理結(jié)果以HTML的形式返回，在客戶端形成動(dòng)態(tài)網(wǎng)頁(yè)。Servlet和JSP的區(qū)別是JSP更加注重頁(yè)面的表現(xiàn)，而Servlet更注重業(yè)務(wù)邏輯的實(shí)現(xiàn)，且編寫Servlet較難。JSP只能處理瀏覽器的請(qǐng)求，而Servlet還可以處理客戶端的應(yīng)用程序請(qǐng)求，可以認(rèn)為Servlet加強(qiáng)了Web服務(wù)器的功能。

畢業(yè)論文

一個(gè)Web項(xiàng)目至少分為三層：數(shù)據(jù)層、業(yè)務(wù)邏輯層和表示層。數(shù)據(jù)層通過數(shù)據(jù)庫(kù)保存數(shù)據(jù)。業(yè)務(wù)邏輯層用來完成數(shù)據(jù)計(jì)算、數(shù)據(jù)分析、數(shù)據(jù)庫(kù)連接等處理工作。表示層用來完成HTML頁(yè)面的輸出。

Servlet的生命周期分為：初始化、處理客戶端的請(qǐng)求和銷毀三個(gè)階段。當(dāng)服務(wù)器裝載一個(gè)Servlet的時(shí)候，服務(wù)器創(chuàng)建一個(gè)Servlet實(shí)例，并且調(diào)用Servlet的init()方法。在初始化階段，Servlet初始化參數(shù)被傳遞給Servlet配置對(duì)象。在服務(wù)器裝載和初始化Servlet后，服務(wù)器會(huì)創(chuàng)建特定的“請(qǐng)求”對(duì)象和一個(gè)“響應(yīng)”對(duì)象。服務(wù)器調(diào)用Servlet的service()方法，用于傳遞“請(qǐng)求”和“響應(yīng)”對(duì)象。service()方法從“請(qǐng)求”對(duì)象獲得請(qǐng)求信息，處理該請(qǐng)求并用“響應(yīng)”對(duì)象的方法將響應(yīng)返回客戶端。service()方法可以調(diào)用其他方法來處理請(qǐng)求，例如doGet()、doPost()等方法。如果服務(wù)器不再需要或重新裝入Servlet實(shí)例時(shí)，服務(wù)器會(huì)調(diào)用Servlet的destroy()方法以終止請(qǐng)求。

Servlet基本方法: <1>init()：在Servlet的生命周期中，init()方法僅執(zhí)行一次。它是在服務(wù)器裝入Servlet時(shí)執(zhí)行的。

<2>service()：該方法是Servlet的核心。每當(dāng)客戶端請(qǐng)求一個(gè)Servlet實(shí)例時(shí)，該實(shí)例的service()方法就會(huì)被調(diào)用。默認(rèn)條件下調(diào)用與HTTP請(qǐng)求方法相應(yīng)的do功能。如果HTTP請(qǐng)求方法是GET，則默認(rèn)條件下調(diào)用doGet()方法；如果HTTP請(qǐng)求方法是POST，則默認(rèn)情況下調(diào)用doPost()方法。

<3>destroy()：該方法只執(zhí)行一次，即在服務(wù)器停止并卸載Servlet時(shí)被調(diào)用。Servlet編寫

<4>Servlet是Java類。

<5>一般Servlet是javax.servlet.HttpServlet的子類，需覆蓋doGet()和doPost()方法來完成相應(yīng)功能。

<6>Servlet編寫完成需配置web.xml文件： Servlet、Servlet-mapping 3.3.1網(wǎng)站目的

通常情況下，架設(shè)企業(yè)網(wǎng)站主要是為滿足公司的基本業(yè)務(wù)以及日益擴(kuò)大的商務(wù)應(yīng)用能夠隨時(shí)升級(jí)，擁有產(chǎn)品銷售業(yè)務(wù)的企業(yè)以網(wǎng)絡(luò)營(yíng)銷為目的，在互聯(lián)網(wǎng)上進(jìn)行企業(yè)宣傳。企業(yè)網(wǎng)站建設(shè)是指使用標(biāo)識(shí)語(yǔ)言（markup language)，通過一系列設(shè)計(jì)、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡(jiǎn)單來說，網(wǎng)頁(yè)設(shè)計(jì)的目的就是產(chǎn)生網(wǎng)站。本網(wǎng)站的功能在一般網(wǎng)站的功能上需要適當(dāng)創(chuàng)新和添加。

畢業(yè)論文

3.3.2網(wǎng)站概貌

因?yàn)槭瞧髽I(yè)網(wǎng)站，所以需要包涵公司要求的各方面內(nèi)容，在突出企業(yè)的風(fēng)格和特點(diǎn)的同時(shí)，還應(yīng)用了現(xiàn)在流行的網(wǎng)站設(shè)計(jì)技術(shù)和數(shù)據(jù)庫(kù)技術(shù)。因此將網(wǎng)站設(shè)計(jì)分為前臺(tái)頁(yè)面展示平臺(tái)和后臺(tái)設(shè)計(jì)。3.3.3功能規(guī)劃

網(wǎng)站設(shè)計(jì)有公司動(dòng)態(tài)更新，瀏覽者可以在首頁(yè)了解世紀(jì)互聯(lián)數(shù)據(jù)中心的基本信息，并且可以登錄和注冊(cè)賬戶，在后臺(tái)設(shè)計(jì)頁(yè)面中，管理員可以對(duì)網(wǎng)站信息進(jìn)行管理。站內(nèi)的其它頁(yè)面均是按照公司整體需求進(jìn)行設(shè)計(jì)的。

<1>主頁(yè)

主頁(yè)可以讓用戶看見公司的簡(jiǎn)單介紹。<2>登陸/注冊(cè)

愿意了解公司的客戶需要進(jìn)行注冊(cè)登陸。<3>商品展示

是對(duì)公司產(chǎn)品的一個(gè)陳列說明，可以讓客戶進(jìn)行選購(gòu)。<4>購(gòu)物車 讓用戶選購(gòu)產(chǎn)品。<5>服務(wù)內(nèi)容

世紀(jì)互聯(lián)公司不只是產(chǎn)品銷售公司，它的服務(wù)范圍涵蓋IT界各項(xiàng)內(nèi)容。<6>招聘信息

對(duì)人才的需求也是公司的重點(diǎn)，通過招聘信息瀏覽者可以申請(qǐng)公司職位。

4數(shù)據(jù)庫(kù)設(shè)計(jì)實(shí)現(xiàn)

對(duì)于數(shù)據(jù)庫(kù)的需求而言，由于其主要是用于信息的提供、保存、更新和查詢等利用數(shù)據(jù)庫(kù)設(shè)計(jì)用戶數(shù)據(jù)表保存用戶數(shù)據(jù)。我們以系統(tǒng)功能所隱含的對(duì)數(shù)據(jù)應(yīng)用的需求，確定了數(shù)據(jù)庫(kù)的結(jié)構(gòu)，并建立了數(shù)據(jù)表。本網(wǎng)站數(shù)據(jù)庫(kù)BuinessDB。BuinessDB里創(chuàng)建了多個(gè)數(shù)據(jù)表tb_login、product和購(gòu)物車表（tb_shop）。

4.1 數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)是計(jì)算機(jī)應(yīng)用系統(tǒng)中的一種專門管理數(shù)據(jù)資源的系統(tǒng)。數(shù)據(jù)有多種形式，如文字、數(shù)碼、符號(hào)、圖形、圖像以及聲音等。數(shù)據(jù)是所有計(jì)算機(jī)系統(tǒng)所要處理的對(duì)象。人們所熟知的一種處理辦法是制作文件，即將處理過程編成程序文件，將所涉及的數(shù)據(jù)按程序要求組織成數(shù)據(jù)文件，用程序文件來調(diào)用。數(shù)據(jù)文件與程序文件保持著一定的對(duì)應(yīng)關(guān)系。在計(jì)算機(jī)應(yīng)用迅速發(fā)展的情況下，這種文件式方法便顯出不足。比如，它使得數(shù)據(jù)通用性差，不便于移植，在不同文件中存儲(chǔ)大量重復(fù)信息、浪費(fèi)存儲(chǔ)空間、更新不便等。數(shù)據(jù)庫(kù)系統(tǒng)便能解決上述問題。數(shù)據(jù)庫(kù)系統(tǒng)不從具體的應(yīng)用程序

畢業(yè)論文

出發(fā)，而是立足于數(shù)據(jù)本身的管理，它將所有數(shù)據(jù)保存在數(shù)據(jù)庫(kù)中，進(jìn)行科學(xué)的組織，并借助于數(shù)據(jù)庫(kù)管理系統(tǒng)，以它為中介，與各種應(yīng)用程序或應(yīng)用系統(tǒng)接口，使之能方便地使用數(shù)據(jù)庫(kù)中的數(shù)據(jù)。

這段說明介紹的確非常詳細(xì)，可能讓人看得頭暈眼花了，其實(shí)簡(jiǎn)單地說數(shù)據(jù)庫(kù)就是一組經(jīng)過計(jì)算機(jī)整理后的數(shù)據(jù)，存儲(chǔ)在一個(gè)或多個(gè)文件中，而管理這個(gè)數(shù)據(jù)庫(kù)的軟件就稱之為數(shù)據(jù)庫(kù)管理系統(tǒng)。一般一個(gè)數(shù)據(jù)庫(kù)系統(tǒng)（Database System）可分為數(shù)據(jù)庫(kù)（Database）與數(shù)據(jù)管理系統(tǒng)（Database Management System，DBMS）兩個(gè)部分。

數(shù)據(jù)庫(kù)解決方案分為兩個(gè)基本類別：數(shù)據(jù)庫(kù)服務(wù)(DBaaS)和數(shù)據(jù)服務(wù)(DaaS)。這兩者間的主要區(qū)別在于數(shù)據(jù)是怎樣管理的。

DaaS使你可以定義你的數(shù)據(jù)，然后你可以從世界任何地方通過Internet連接對(duì)這些數(shù)據(jù)進(jìn)行查詢。不同于傳統(tǒng)的數(shù)據(jù)庫(kù)解決方案，DaaS不執(zhí)行典型RDBMS接口，例如SQL。而是通過一套通用的API訪問數(shù)據(jù)。此外，DaaS是最適合于基礎(chǔ)數(shù)據(jù)的查詢和操縱等管理。

DBaaS是一個(gè)更為強(qiáng)大的數(shù)據(jù)解決方案，它提供全面的數(shù)據(jù)庫(kù)功能。在DBaaS中，管理層負(fù)責(zé)連續(xù)監(jiān)測(cè)和配置數(shù)據(jù)庫(kù)，以實(shí)現(xiàn)優(yōu)化縮放、高可用性、多租戶、并在云中有效的分配資源。因此，開發(fā)者可以免去許多繁瑣乏味的數(shù)據(jù)庫(kù)管理操作的麻煩，因?yàn)檫@些會(huì)被自動(dòng)處理。

有三種基本的基于云數(shù)據(jù)庫(kù)的服務(wù)，它們的不同在于用戶定制環(huán)境的靈活性。對(duì)于擴(kuò)展性，云計(jì)算是用戶訪問一個(gè)只有操作系統(tǒng)的準(zhǔn)機(jī)器，而對(duì)于這個(gè)操作系統(tǒng)用戶有充分的靈活性安裝和配置選定的RDBMS軟件。這種安裝被認(rèn)為云服務(wù)基礎(chǔ)設(shè)施(IaaS)。Amazon Elasti Computing Cloud(EC2)就是這種服務(wù)的一個(gè)很好的例子。對(duì)于想對(duì)其托管的數(shù)據(jù)庫(kù)具有完全控制權(quán)的人來說，這個(gè)平臺(tái)是一個(gè)很好的選擇。

另一個(gè)在云中部署RDBMS通用模型的是虛擬設(shè)備模型。虛擬設(shè)備是一個(gè)預(yù)裝載并預(yù)配置設(shè)備的虛擬機(jī)。Amazon還在其EC2云中部署預(yù)配置了MySQL、Oracle和Microsoft SQL Server的虛擬設(shè)備。

最后，本地云數(shù)據(jù)服務(wù)，例如Xeround’s MySQL云數(shù)據(jù)庫(kù)使用NoSQL數(shù)據(jù)庫(kù)，通過Web界面進(jìn)行管理。本地云數(shù)據(jù)庫(kù)往往得到更好的設(shè)備以便能夠更好地使用云資源，并且與非云RDBMS使用的軟件相比提供更好的可用性與穩(wěn)定性。

正如現(xiàn)在云計(jì)算一樣棘手，讓陌生人訪問您的數(shù)據(jù)要考慮清楚，不能掉以輕心。低價(jià)格：這可能是使企業(yè)進(jìn)入云行列的第一個(gè)原因。使用基于云數(shù)據(jù)庫(kù)解決方案，可以從硬件、軟件許可以及服務(wù)實(shí)施等方面大幅降低運(yùn)營(yíng)成本和支出，因?yàn)槟阒恍枰獙?duì)所使用的部分買單。

擴(kuò)展性與靈活性：數(shù)據(jù)庫(kù)托管公司往往處于有利位置，為了得到更高的效率并減少未使用的空間而使資源得到最大化。他們根據(jù)你不斷變化的業(yè)務(wù)需求而對(duì)服務(wù)進(jìn)行增加或縮減。

畢業(yè)論文

高效率：云計(jì)算提供了硬件共享、流程自動(dòng)化和技術(shù)熟練的好處。你和你的員工可以從任何地方、使用任何電腦、移動(dòng)設(shè)備或?yàn)g覽器訪問數(shù)據(jù)庫(kù)。它還能從整體上降低資源的使用。

缺點(diǎn)： 安全問題：云計(jì)算中一個(gè)值得關(guān)注的事情是你的數(shù)據(jù)是通過網(wǎng)絡(luò)訪問的。這就產(chǎn)生了一系列問題，你會(huì)給某人提供機(jī)會(huì)攻擊你的數(shù)據(jù)庫(kù)服務(wù)商并且竊取你寶貴的資料嗎？這樣安全漏洞事件是誰的責(zé)任呢？當(dāng)?shù)谌絹G失客戶信息時(shí)，你不能也不應(yīng)該只躲在云供應(yīng)商后面。除了網(wǎng)頁(yè)接入問題，怎樣才能使供應(yīng)商的物理位置安全呢？他們經(jīng)常進(jìn)行備份么？有異地?cái)?shù)據(jù)存儲(chǔ)么？這些實(shí)在沒有辦法百分之百的確定。你只能相信你的供應(yīng)商能照顧好您的數(shù)據(jù)。

互聯(lián)網(wǎng)連接風(fēng)險(xiǎn)的損失：由于你的數(shù)據(jù)通過網(wǎng)絡(luò)進(jìn)行交互，你應(yīng)該考慮失去數(shù)據(jù)庫(kù)連接將會(huì)對(duì)你的企業(yè)生產(chǎn)帶來怎樣的影響。這種風(fēng)險(xiǎn)你能忍受么？這里有個(gè)叫做五個(gè)九的高可用性標(biāo)準(zhǔn)。在99.999%的時(shí)間正常運(yùn)行，每年停機(jī)時(shí)間約為五分鐘。你能期望它保證具有這種可靠性么？

定制的局限性：當(dāng)處理如此多的業(yè)務(wù)時(shí)，要求數(shù)據(jù)庫(kù)服務(wù)商要很靈活。如果需要深度定制并且與現(xiàn)有系統(tǒng)集成來為日常業(yè)務(wù)服務(wù)，那么云計(jì)算能夠適應(yīng)你的需求嗎。

4.2注冊(cè)表（tb_login）

主要記錄用戶在注冊(cè)時(shí)的個(gè)人基本信息，用戶可以對(duì)這個(gè)表中的信息進(jìn)行修改。

表 5-1-1 注冊(cè)表的邏輯結(jié)構(gòu)

詳細(xì)數(shù)據(jù)表如下：

5-1-用戶注冊(cè)表

畢業(yè)論文

4.3產(chǎn)品表（product）

主要記錄公司為客戶提供的產(chǎn)品信息，客戶可以瀏覽，購(gòu)買這個(gè)表中的產(chǎn)品。管理員可對(duì)產(chǎn)品信息進(jìn)行增加、刪除及修改。

表5-2-1 產(chǎn)品表的邏輯結(jié)構(gòu)

詳細(xì)數(shù)據(jù)表如表：

表5-2-2 產(chǎn)品數(shù)據(jù)表

4.4購(gòu)物車表（tb_shop）

購(gòu)物車表，主要用來存放用戶已加入購(gòu)物車的商品。

表5-3-1 購(gòu)物車表的邏輯結(jié)構(gòu)

詳細(xì)數(shù)據(jù)表如表：

表5-3-2 購(gòu)物車數(shù)據(jù)表

畢業(yè)論文

4.5 網(wǎng)頁(yè)與數(shù)據(jù)庫(kù)的鏈接代碼

在JSP網(wǎng)站設(shè)計(jì)搭建中，數(shù)據(jù)庫(kù)要想與網(wǎng)頁(yè)鏈接必須要有DBconn代碼。

5模塊功能實(shí)現(xiàn)

5.1系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì)

本網(wǎng)站主要圖片由公司提供，劃分為上下兩部分，上部分是一個(gè)Web用戶控件，這種控件可以在Web窗體中進(jìn)行引用，這樣這個(gè)網(wǎng)站的風(fēng)格有了一定的統(tǒng)一；下部分分左右兩部分，左邊主要顯示各個(gè)頁(yè)面應(yīng)有的內(nèi)容，右邊為內(nèi)容的視覺表達(dá)，每個(gè)網(wǎng)頁(yè)的布局都是這樣，使整個(gè)網(wǎng)站統(tǒng)一化。因?yàn)楣揪W(wǎng)站的原因，整個(gè)網(wǎng)站的顏色都比較大眾化，所以一般不采用暖色調(diào)來填充顏色，因本網(wǎng)站主要圖片的人性化設(shè)計(jì)，在風(fēng)格上也向部分網(wǎng)站進(jìn)行了模仿，為使整個(gè)網(wǎng)站在美觀上有所提高，我們對(duì)一些圖片進(jìn)行了修改。

圖4-1-1 系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì)圖

畢業(yè)論文

5.2 主頁(yè)頁(yè)面

主頁(yè)面包含注冊(cè)、登錄、產(chǎn)品瀏覽、購(gòu)物車、招聘信息以及后臺(tái)管理等主要功能鏈接，簡(jiǎn)潔明了的模塊化分給顧客直觀的感受和足夠的參考信息。

圖4-5-1 主頁(yè)面

主頁(yè)樣式設(shè)計(jì)代碼如下：

登陸/注冊(cè)

(1)登陸頁(yè)面：輸入用戶名及密碼，若與數(shù)據(jù)表中有匹配項(xiàng)則登陸成功。

畢業(yè)論文

圖4-2-1 登陸頁(yè)設(shè)計(jì)圖

用戶登錄jsp代碼如下：

<%

if(request.getParameter(“username”)!=null&&request.getParameter(“pass{

String strName=request.getParameter(”username“);String strPass=request.getParameter(”password“);Class.forName(”com.mysql.jdbc.Driver“);Connection word”)!=null)conn=DriverManager.getConnection(“jdbc:mysql://localhost:3306/test”,“root”,“");

Statement stat=conn.createStatement();String strSql=”select count(*)from tb_login where ResultSet result=stat.executeQuery(strSql);result.next();if(result.getInt(1)==1){ session.setAttribute(“l(fā)ogin”,“ok”);response.sendRedirect(“main.jsp”);

} else

{ out.println(“用戶名或密碼輸入錯(cuò)誤！”);out.println(“返回>>重新輸入”);} result.close();} username='“+strName+”'and password='“+strPass+”'“;

%>

畢業(yè)論文

(2)注冊(cè)頁(yè)面：取得用戶的信息并保存。

圖4-2-2 注冊(cè)頁(yè)設(shè)計(jì)

用戶注冊(cè)jsp代碼如下：

<%if(!request.getParameter(”Password“).equals(request.getParameter(”Password1“))){ out.println(”密碼輸入不一致！
“);

out.println(”返回“);} else{ try{ //加載驅(qū)動(dòng)程序

Class.forName(”com.mysql.jdbc.Driver“);//建立連接

Connection conn=DriverManager.getConnection(”jdbc:mysql://localhost:3306/test“,”root“,”“);//創(chuàng)建能夠發(fā)送SQL語(yǔ)句的對(duì)象

Statement st=conn.createStatement();String sql=”insert into tb_login values('“+request.getParameter(”ID“)+ ”','“+request.getParameter(”Name“)+”',“+request.getParameter(”Password“)+”)“;sql=new String(sql.getBytes(”ISO-8859-1“),”GBK“);//執(zhí)行SQL語(yǔ)句

int n=st.executeUpdate(sql);//處理執(zhí)行結(jié)果

if(n>0){ out.println(”“);} else{ out.println(”“);}} %>

畢業(yè)論文

5.4購(gòu)物頁(yè)面

購(gòu)物車模塊主要的核心功能就是產(chǎn)品展示和購(gòu)物車，這個(gè)模塊分三個(gè)頁(yè)面來實(shí)現(xiàn)，瀏覽頁(yè)面實(shí)現(xiàn)加入購(gòu)物車，購(gòu)物車頁(yè)面實(shí)現(xiàn)購(gòu)物車管理。

圖4-3-1 產(chǎn)品展示頁(yè)

購(gòu)物頁(yè)面：消費(fèi)客戶能夠查看虛擬購(gòu)物車內(nèi)的所有產(chǎn)品，并且已登陸的客戶可以刪除圖書。當(dāng)客戶刪除產(chǎn)品項(xiàng)之后，系統(tǒng)會(huì)及時(shí)更新數(shù)據(jù)表中相應(yīng)內(nèi)容。在瀏覽頁(yè)點(diǎn)擊加入購(gòu)物車就可實(shí)現(xiàn)加入虛擬購(gòu)物車功能，在購(gòu)物車頁(yè)面，已登陸的消費(fèi)者可以看到自己將購(gòu)買的商品，同時(shí)也可刪除商品。

圖4-3-2 購(gòu)物車效果圖

畢業(yè)論文

購(gòu)物車jsp代碼如下：

<%try{ //加載驅(qū)動(dòng)程序 Class.forName(”com.mysql.jdbc.Driver“);//建立連接 Connection conn=DriverManager.getConnection(”jdbc:mysql://localhost:3306/test“,”root“,”“);//創(chuàng)建能夠發(fā)送SQL語(yǔ)句的對(duì)象

Statement st=conn.createStatement();String sql=”insert into tb_shop values('“+request.getParameter(”ID“)+ ”','“+request.getParameter(”Name“)+”',“+request.getParameter(”Number“)+”,“+request.getParameter(”Price“)+”)“;sql=new String(sql.getBytes(”ISO-8859-1“),”GBK“);//執(zhí)行SQL語(yǔ)句 int n=st.executeUpdate(sql);//處理執(zhí)行結(jié)果 if(n>0){ out.println(”“);} else{ out.println(”“);} } catch(Exception e){ %>

e.printStackTrace();}

瀏覽頁(yè)面：消費(fèi)者可以通過瀏覽產(chǎn)品目錄，查看和選擇產(chǎn)品。當(dāng)用戶瀏覽目錄的時(shí)候，可以遍歷產(chǎn)品類別的層次，并且查看屬于各個(gè)類別的產(chǎn)品列表，當(dāng)查看完產(chǎn)品后，消費(fèi)用戶就能夠?qū)⑾胭?gòu)買的產(chǎn)品放在他們的虛擬購(gòu)物車中。

圖4-3-3 購(gòu)物車查看圖

畢業(yè)論文

購(gòu)物車信息表代碼如下：

<% int n=0;//用戶人數(shù)

try{Class.forName(”com.mysql.jdbc.Driver“);Connection conn=DriverManager.getConnection(”jdbc:mysql://localhost:3306/test“,”root“,”“);Statement st=conn.createStatement();String sql=”select * from tb_shop“;ResultSet rs=st.executeQuery(sql);while(rs.next()){ out.println(”“);out.println(”“+rs.getString(”pname“)+”“);out.println(”“+rs.getString(”number“)+”“);out.println(”“+rs.getInt(”price“)+”“);out.println(”");n++;} conn.close();} catch(Exception e){e.printStackTrace();} %>

5.5其它頁(yè)面實(shí)現(xiàn)

企業(yè)網(wǎng)站包涵公司要求的各方面內(nèi)容，需要對(duì)公司服務(wù)內(nèi)容進(jìn)行詳細(xì)的說明介紹，世紀(jì)互聯(lián)數(shù)據(jù)中心是IT行業(yè)相當(dāng)成熟的企業(yè)，它覆蓋了幾乎所有網(wǎng)絡(luò)行業(yè)的服務(wù)內(nèi)容，為網(wǎng)絡(luò)用戶需求帶來全面的服務(wù)。

圖4-4-1 企業(yè)服務(wù)介紹

畢業(yè)論文

6設(shè)計(jì)技巧和解決方法

我們?cè)谥谱骶W(wǎng)頁(yè)的時(shí)候，經(jīng)常有這種體會(huì)，那就是制作好的網(wǎng)頁(yè)在本地計(jì)算機(jī)上瀏覽時(shí)很正常，但在另外一臺(tái)計(jì)算機(jī)上瀏覽時(shí)發(fā)現(xiàn)原本漂亮的網(wǎng)頁(yè)變得歪歪扭扭了，這是為什么呢?原來各個(gè)計(jì)算機(jī)的分辨率要使你的主頁(yè)在不同的分辨率下都能正常顯示，在 Dreamweaver中得到了較好的解決。在文檔窗口的右下角，Dreamweaver 顯示當(dāng)前文檔被設(shè)計(jì)成的分辨率大小。單擊哪個(gè)數(shù)字，在彈出式菜單中可以為當(dāng)前的頁(yè)面指定顯示分辨率，通過修改可以使你的主頁(yè)更具靈活性。使不同分辨率的顯示器都能較好地顯示。有時(shí)我們?yōu)榱艘_(dá)到一種逼真的效果，希望鼠標(biāo)移動(dòng)到某個(gè)鏈接上時(shí)能有動(dòng)感產(chǎn)生。使用Dreamweaver可以很容易實(shí)現(xiàn)這種效果。設(shè)計(jì)時(shí)，我們首先需要準(zhǔn)備兩幅圖象，第一幅是原始圖象，第二幅是鼠標(biāo)移動(dòng)上去后的圖象。接著用鼠標(biāo)單擊第一幅圖，在屬性面板中的鏈接欄中填上要鏈接的文件，然后單擊鍵盤上的F8鍵，在彈出的Behaviors窗口中單擊“+”號(hào)，隨后選擇“swap image”，在接著出現(xiàn)的窗口中選擇第二幅圖象，最后單擊確定就可以了。

本次為期三個(gè)月多的畢業(yè)設(shè)計(jì)是大學(xué)三年所學(xué)知識(shí)的綜合運(yùn)用，是理論與實(shí)踐相得綜合考察。這種畢業(yè)設(shè)計(jì)項(xiàng)目的選做,不僅可以鞏固了所學(xué)的書本知識(shí),還能學(xué)到了許多課堂上和書本上無法學(xué)到的實(shí)踐知識(shí)，提高我們的自學(xué)能力，增強(qiáng)了專業(yè)技術(shù)的水平，同時(shí)也為今后從事本專業(yè)的工作打下了的基礎(chǔ)。

畢業(yè)論文

7總 結(jié)

經(jīng)過幾個(gè)月的努力，我們的畢業(yè)設(shè)計(jì)終于完成了。通過結(jié)合畢設(shè)計(jì)劃書的要求，制定了公司網(wǎng)站系統(tǒng)管理的計(jì)劃方案，本網(wǎng)站可實(shí)現(xiàn)用戶注冊(cè)、登錄、修改信息、購(gòu)物、生成訂單、瀏覽產(chǎn)品等公司網(wǎng)站應(yīng)具備的功能，同時(shí)添加了用戶管理系統(tǒng)，進(jìn)一步完善了本網(wǎng)站的功能，在這次公司網(wǎng)站系統(tǒng)的設(shè)計(jì)過程中我受到很大啟發(fā)：在網(wǎng)站開發(fā)與設(shè)計(jì)上，體會(huì)到了理論與實(shí)際結(jié)合的重要性，認(rèn)識(shí)到做一個(gè)完美的網(wǎng)站不僅僅要考慮到網(wǎng)站功能及其效果的實(shí)現(xiàn)，更應(yīng)該注重網(wǎng)站與用戶的有機(jī)結(jié)合。

在老師耐心細(xì)致的指導(dǎo)下，同學(xué)之間相互交流，同時(shí)翻閱了大量的資料(包括網(wǎng)上資料，書本及學(xué)校的一些相關(guān)資料)經(jīng)過近一段時(shí)間的努力，企業(yè)網(wǎng)站的設(shè)計(jì)制作告一段落。總結(jié)這次“世紀(jì)互聯(lián)網(wǎng)站”開發(fā)制作過程，我們綜合使用了目前因特網(wǎng)上比較流行的各種靜態(tài)、動(dòng)態(tài)制作方法，并對(duì)初步利用后臺(tái)程序完成生成網(wǎng)頁(yè)的技術(shù)。同時(shí)也從中學(xué)習(xí)了對(duì)靜態(tài)頁(yè)面的處理風(fēng)格，色彩搭配，頁(yè)面導(dǎo)航方面有了一定經(jīng)驗(yàn)。目前網(wǎng)站的制作技術(shù)與要求，都已經(jīng)告別了因特網(wǎng)初期網(wǎng)站制作的“幼稚”期，隨著各類網(wǎng)站的迅速增加與瀏覽者需求的提高，無不要求網(wǎng)站從立意，策劃，頁(yè)面設(shè)計(jì)到后臺(tái)程序的全面提高。無論是個(gè)人網(wǎng)站還是企業(yè)網(wǎng)站都必須被要求從瀏覽者角度出發(fā)，最大限度的滿足用戶的要求，這也是以后各類網(wǎng)站發(fā)展競(jìng)爭(zhēng)的真正實(shí)質(zhì)所在。

本次設(shè)計(jì)由于設(shè)計(jì)時(shí)間較緊，且相關(guān)模塊比較多，加之設(shè)計(jì)經(jīng)驗(yàn)的不足，在網(wǎng)站的整體設(shè)計(jì)及各模塊功能可能設(shè)計(jì)的不完全，有待于進(jìn)一步的完善和改進(jìn)。雖然在完成項(xiàng)目的過程中也遇到過各種困難,但最終我們達(dá)到了自己的預(yù)期目標(biāo),雖然此網(wǎng)站與其它網(wǎng)站相比仍有很多不足,但是整個(gè)制作過程才是整個(gè)項(xiàng)目最寶貴的地方,最后, 由于時(shí)間倉(cāng)促以及本人水平有限，本系統(tǒng)還有很多不完善之處，也難免存在錯(cuò)漏，懇請(qǐng)各位老師多多指點(diǎn)。

畢業(yè)論文

謝辭

畢業(yè)論文

參考文獻(xiàn)

[1] 吳濤主編.網(wǎng)站全程設(shè)計(jì)技術(shù)[M].北京：清華大學(xué)出版社，2006,7.[2] 龍馬工作室編.JSP+SQL Server組建動(dòng)態(tài)網(wǎng)站實(shí)例精講[M].北京：人民郵出版社，2008,4.[3] 趙增敏編.JSP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)[M].電子工業(yè)出版社，2003,8.[4] 任學(xué)文，范嚴(yán)編.網(wǎng)頁(yè)設(shè)計(jì)與制作[M].中國(guó)科學(xué)技術(shù)出版社，2006,8.[5] 武創(chuàng)，王惠.網(wǎng)頁(yè)設(shè)計(jì)探索之旅 [M].電子工業(yè)出版社，2006,9.[6] 杜巧玲等編.網(wǎng)頁(yè)設(shè)計(jì)超級(jí)夢(mèng)幻組合[M].清華大學(xué)出版社, 2003,3.[7] 吳黎兵，羅云芳編.網(wǎng)頁(yè)設(shè)計(jì)教程[M].武漢大學(xué)出版社，2006,2.[8] 莊王健編.網(wǎng)頁(yè)設(shè)計(jì)三劍客白金教程[M].電子工業(yè)出版社，2006,1.[9] 澤卡斯著，李松峰，曹力譯.JavaScript高級(jí)程序設(shè)計(jì)(第2版)[J].人民郵電出版社，2010.[10] 唐永明.淺議網(wǎng)頁(yè)設(shè)計(jì)與制作[J].科技信息，2009(20).[11] 陳孝強(qiáng)等編.Dreamweaver8 必練[M].北京：清華大學(xué)出版社，2006.[12]（美）特里等著，謝文亮譯.《SQL Server 2005深入開發(fā)系列——SQLServer 2005報(bào)表服務(wù)高級(jí)編程》[M].北京：清華大學(xué)出版社，2007.[13] 王華杰，孫一波等編.《C#數(shù)據(jù)庫(kù)開發(fā)技術(shù)》[J].清華大學(xué)出版社，2003,2.

第四篇：網(wǎng)站前端性能優(yōu)化總結(jié)

一、服務(wù)器側(cè)優(yōu)化

1.添加 Expires 或 Cache-Control 信息頭

某些經(jīng)常使用到、并且不會(huì)經(jīng)常做改動(dòng)的圖片（banner、logo等等）、靜態(tài)文件（登錄首頁(yè)、說明文檔等）可以設(shè)置較長(zhǎng)的有效期（expiration date），這些HTTP頭向客戶端表明了文檔的有效性和持久性。如果有緩存，文檔就可以從緩存（除已經(jīng)過期）而不是從服務(wù)器讀取。接著，客戶端考察緩存中的副本，看看是否過期或者失效，以決定是否必須從服務(wù)器獲得更新。

各個(gè)容器都有針對(duì)的方案,，以 Apache 為例：

ExpiresActive On ExpiresByType image/gif “access plus 1 weeks”

表示gif文件緩存一周，配置可以根據(jù)具體的業(yè)務(wù)進(jìn)行調(diào)整，具體配置可以參考：http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_expires.html

2.壓縮內(nèi)容

對(duì)于絕大多數(shù)站點(diǎn)，這都是必要的一步，能有效減輕網(wǎng)絡(luò)流量壓力。

DeflateCompressionLevel 9 AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-httpd-php AddOutputFilter DEFLATE html htm xml php css js

表示zlib在壓縮時(shí)可以最大程度的使用內(nèi)存，壓縮html、文本、xml和php這幾種類型的文件，指定擴(kuò)展名為html、htm、xml、php、css和js的文件啟用壓縮。

具體配置可以參考：http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_deflate.html

3.設(shè)置 Etags

在使用etags之前，有必要復(fù)習(xí)一下 RFC2068 中規(guī)定的返回值 200 和 304 的含義：

200--OK 304--Not Modified

客戶端在請(qǐng)求一份文件的時(shí)候，服務(wù)端會(huì)檢查客戶端是否存在該文件，如果客戶端不存在該文件，則下載該文件并返回200；如果客戶端存在該文件并且該文件在規(guī)定期限內(nèi)沒有被修改（Inode，MTime和Size），則服務(wù)端只返回一個(gè)304，并不返回資源內(nèi)容，客戶端將會(huì)使用之前的緩存文件。而etags就是判斷該文件是否被修改的記號(hào)，與服務(wù)器端的資源一一關(guān)聯(lián)，所以etags對(duì)于CGI類型的頁(yè)面緩存尤其有用。

下圖是優(yōu)化前的首頁(yè)：（注意，此時(shí)沒有壓縮首頁(yè)圖片，即使使用了緩存，仍需要5s左右的時(shí)間）

化前的某頁(yè)面

需要注意的是，使用etags會(huì)增加服務(wù)器端的負(fù)載，在實(shí)際應(yīng)用中需要自行平衡。

二、Cookie優(yōu)化

1.減小Cookie體積

HTTP coockie可以用于權(quán)限驗(yàn)證和個(gè)性化身份等多種用途。coockie內(nèi)的有關(guān)信息是通過HTTP文件頭來在web服務(wù)器和瀏覽器之間進(jìn)行交流的。因此保持coockie盡可能的小以減少用戶的響應(yīng)時(shí)間十分重要。

使cookie體積盡量?。?/p>

在合適的子域名上設(shè)置bookie，以免影響其他子域名下的響應(yīng)；

設(shè)置合理的過期時(shí)間，去掉不必要的cookie。

下面對(duì)比一下各個(gè)網(wǎng)站的cookie：

圖中可以看出，6K的cookie顯然是不必要的。

2.對(duì)于頁(yè)面內(nèi)容使用無coockie域名

當(dāng)瀏覽器在請(qǐng)求中同時(shí)請(qǐng)求一張靜態(tài)的圖片和發(fā)送coockie時(shí)，服務(wù)器對(duì)于這些coockie不會(huì)做任何地使用。因此它們只是因?yàn)槟承┴?fù)面因素而創(chuàng)建的網(wǎng)絡(luò)傳輸。所以你應(yīng)該確定對(duì)于靜態(tài)內(nèi)容的請(qǐng)求是無coockie的請(qǐng)求。創(chuàng)建一個(gè)子域名并用他來存放所有靜態(tài)內(nèi)容。

例如，域名是

3.切分組件到多個(gè)域

主要的目的是提高頁(yè)面組件并行下載能力，但注意，也不要同時(shí)使用過多的域名，否則就會(huì)出現(xiàn)第一條DNS lookup過多的問題，一般情況下兩個(gè)域名就可以了。

4.杜絕 http 404 錯(cuò)誤

對(duì)頁(yè)面鏈接的充分測(cè)試加上對(duì) Web 服務(wù)器 error 日志的不斷跟蹤可以有效減少 404 錯(cuò)誤，并提升用戶體驗(yàn)。

后記：

這次總結(jié)給我?guī)淼膯l(fā)并不在于提升系統(tǒng)性能性能本身，提升性能只是一個(gè)很表面上的東西，網(wǎng)上的方法有很多，測(cè)試的方法也有很多，照著都做一遍，性能確實(shí)會(huì)有所提升，但是這種知其然而不知其所以然的性能提升是沒有意義的，這便是本文的目的所在。

第五篇：9個(gè)優(yōu)秀的中文前端開發(fā)設(shè)計(jì)網(wǎng)站

在國(guó)內(nèi)，“前端開發(fā)

”這個(gè)名詞逐步被熟知，“前端開發(fā)

”這個(gè)職位越來越被企業(yè)重視，表明國(guó)內(nèi)的Web前端開發(fā)正在慢慢走向成熟，更好地學(xué)習(xí)提高自身的前端開發(fā)技術(shù)能力是必須的，整理9個(gè)國(guó)內(nèi)優(yōu)秀的前端開發(fā)設(shè)計(jì)網(wǎng)站給大家，也希望能看到你推薦的中文前端開發(fā)網(wǎng)站和社區(qū)。

1, OKAJAX

OKAJAX是以ajax技術(shù)為主，涉及網(wǎng)站建設(shè)、網(wǎng)絡(luò)編程、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)特效、服務(wù)器技術(shù)、資源下載等的綜合性網(wǎng)站。

2, 藍(lán)色理想

誕生于1999年10月的藍(lán)色理想，以建設(shè)網(wǎng)站設(shè)計(jì)與開發(fā)人員之家為宗旨，以介紹網(wǎng)絡(luò)開發(fā)技術(shù)與網(wǎng)站創(chuàng)作設(shè)計(jì)交流為主要內(nèi)容，是國(guó)內(nèi)最大的設(shè)計(jì)類站點(diǎn)之一。

3, W3School

W3School是最完善的在線教程站，包括

XHTML教程、XML教程

JavaScript & AJAX、網(wǎng)站構(gòu)建等前端開發(fā)人員必備的系統(tǒng)性學(xué)習(xí)教材。

4, 前端觀察

前端觀察是一個(gè)純粹的前端技術(shù)分享網(wǎng)站，本站的目的是為前端技術(shù)人員提供所需的資訊及資源，挖掘國(guó)內(nèi)優(yōu)秀的原創(chuàng)設(shè)計(jì)及內(nèi)容，加以高度的整理。

5, CSS88

CSS88專注前端開發(fā)，關(guān)注用戶體驗(yàn)，是一個(gè)資深的Web前端開發(fā)站，不僅傳播前端技術(shù)，更重要的是關(guān)注前端設(shè)計(jì)從業(yè)者的生存狀態(tài)，有多個(gè)開放的前端交流群。

6, CssRain

CssRain實(shí)用的前端技術(shù)信息，原創(chuàng)和搜集前端開發(fā)中細(xì)節(jié)的內(nèi)容，一本jQuery新書推薦<<鋒利的jQuery>>你值得擁有。

7, 我愛CSS

我愛CSS，致力于Web標(biāo)準(zhǔn)在中國(guó)的應(yīng)用和發(fā)展，提供CSS和XHTML學(xué)習(xí)教程。8, iJavaScript

iJavaScript致力于JavaScript信息的共享，提供JavaScript基礎(chǔ)教程、AJAX技術(shù)及JavaScript框架的學(xué)習(xí)和應(yīng)用。

9.菠菜博

菠菜博是一個(gè)分享優(yōu)質(zhì)網(wǎng)站設(shè)計(jì)素材資源、關(guān)注Web前端開發(fā)與應(yīng)用資源的博客。