。這種方式主要用于對具體的標簽作具體的調整，其作用的范圍只限于本標簽。嵌入式樣式表不能充分體現出CSS樣式表的優越性，所以應用場合并不多。§2.5.2內聯式樣式表
若想只對當前頁面應用樣式，就要使用內聯式樣式表。所謂內聯式樣式表就是把樣式表定義語句放在標簽中，設置時通常放在HTML代碼的
部分。§2.5.3外聯式樣式表外聯式樣式表是將指定的樣式代碼放到一個擴展名為.css的樣式文件中以方便其他網頁的調用。這種方式的優點是可以通過一個.css文件管理網站中的多個網頁。如果要對網站中其他頁面進行樣式引用，可以先把樣式用記事本定義成一個“.css”的文件。例如：打開記事本，將定義的名為h3的樣式代碼寫到記事本中，保存的文件名為example.css，代碼如下： h3{ font-family:”黑體”;color:green;font-style:italic;} 引用時在網頁HTML代碼的
標記后用和
。§2.6 超鏈接
超鏈接在本質上屬于一個網頁的一部分，它是一種允許我們同其他網頁或站點之間進行連接的元素。各個網頁鏈接在一起后，才能真正構成一個網站。所謂的超鏈接是指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后,鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。按照鏈接路徑的不同,網頁中超鏈接一般分為以下3種類型: 內部鏈接,錨點鏈接和外部鏈接。超鏈接對象：如果按照使用對象的不同，網頁中的 6
鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。超鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網頁內的某個位置，或打開一個新的網頁，或打開某一個新的">班級主頁
目錄
摘 要..................................................................................................................1 Abstract...............................................................................................................1 第一章緒論..........................................................................................................3 1.1研究背景.....................................................................................................3 1.2歷史及現狀................................................................................................3 1.3發展前景及優勢.........................................................................................3 1.4 研究目的....................................................................................................4 1.5開發工具.....................................................................................................4 第二章系統需求分析...........................................................................................5 2.1功能分析.....................................................................................................5 2.1.1用戶模塊...............................................................................................5 2.1.2一級菜單模塊.......................................................................................5 2.1.3商品模塊...............................................................................................6 2.1.4購物車模塊...........................................................................................6 2.1.5訂單模塊...............................................................................................6 2.2安全性分析.................................................................................................7 2.3運行分析.....................................................................................................7 2.4可行性分析.................................................................................................7 2.4.1技術可行性...........................................................................................7 2.4.2經濟可行性...........................................................................................7 第三章系統總體設計...........................................................................................8 3.1設計概述.....................................................................................................8 3.2總體結構.....................................................................................................8 3.3各個模塊功能.............................................................................................8 第四章系統數據庫設計.......................................................................................10 4.1數據庫需求分析.........................................................................................10
I
4.2概念結構設計............................................................................................10 4.3邏輯結構設計............................................................................................11 第五章系統詳細設計..........................................................................................13 5.1前臺界面設計............................................................................................13 5.1.1首頁界面設計......................................................................................13 5.1.2主要界面設計......................................................................................15 5.1.3其他界面設計......................................................................................16 5.2關鍵問題設計............................................................................................18 5.2.1驗證碼技術..........................................................................................18 5.2.2左右無縫平移設計...............................................................................19 5.2.3輪播切換設計......................................................................................20 5.2.4平移圖層..............................................................................................20 5.2.5分頁技術..............................................................................................21 5.2.6 郵箱激活.............................................................................................21 參考文獻.............................................................................................................24 致謝....................................................................................................................25
II
西華師范大學跳蚤市場網
xxx
計算機學院軟件工程專業xxx級 指導教師：xxx
摘 要：隨著Internet技術的發展，人們的日常生活已經離不開網絡。未來社會人們的生活和工作將越來越依賴于數字技術的發展，越來越數字化、網絡化、電子化、虛擬化。Internet的發展歷程以及目前的應用狀況和發展趨勢，可以充分地相信網絡技術將極大的改變我們的生活方式和工作方式，甚至社會的價值觀也會發生某種變化。
本設計嘗試用SPRING在網絡上架構一個網上二手交易市場，讓每一個學生都能在學校內完成二手商品交易，通過交易，不僅可以進行環保、節儉等傳統文明教育，還可以讓學生在學校內部進行電子商務的演練實訓。本文從理論和實踐兩角度出發，對一個具有基本互動功能的在線二手商品交易網站進行設計與實現分析。論文首先較為詳盡地介紹了面向對象分析與設計的有關概念與技術。接著對交易系統的可行性進行了分析，然后對系統的設計思想、設計目標與系統的整體結構進行了明確的規劃。最后對系統的主要頁面、數據庫的設計與實現作了較為詳細的講解。
本網上二手商品交易系統是運用SPRING技術來實現的。其主要功能有用戶登陸注冊，商品查詢，訂單和購物車等功能。論文在撰寫過程中，力求將應用相結合，對各種理論進行闡述的同時配合系統從實際應用和操作技巧上加以說明，希望能夠更充分地體現到這些知識與技術在本系統中的應用與實現。關鍵詞：電子商務、SPRING、數據庫
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研究背景
近幾年來互聯網的快速發展，“互聯網+”的出現，促使多樣化信息技術同實體進行聯合，以及當代大學生成為網購的主力軍，使得各種購物網、快遞公司的蓬勃發展；伴隨著電子商務的發展，保護環境、節儉節約、循環利用資源的意識在頭腦中形成，二手商品交易成為一種發展方向，但是還沒有一個專門只為當代大學生提供的一個純粹的“二手網”。
在跳蚤市場中，甩賣的物品多為大四畢業學生在大學四年中的生活、學習、社交等用品。這些是他們無法帶走或者舍不得丟掉的，但仍然可以再次利用起來的物品。這些舊物品對學弟學妹們來說可是一些寶貝，它可以為學弟學妹們提供一些方便的、可靠的、有效的學習資料，一些便宜的生活物資以及即將到來的大學畢業提供一些方向。
但是，從近幾年的狀況來看，畢業生大部分的東西是沒有得到利用的，往往是以廉價賣給廢品回收站，有的學弟學妹卻以高額的價格從各個商店買來一些接下來的學習和生活可能需要的物品。
1.2歷史及現狀
跳蚤市場（flea market）是歐美等西方國家對舊貨地攤市場的別稱。由一個個地攤攤位組成，市場規模大小不等。出售商品多是舊貨、人們多余的物品及未曾用過但已過時的衣物等，小到衣服上的小裝飾物，大到完整的舊汽車、錄像機、電視機、洗衣機，一應俱全，應有盡有。價格低廉，僅為新貨價格的10％～30％。跳蚤市場的管理松散。有關flea market的來源，有兩種理論： 據語源學家克麗絲汀·安默兒說，flea market最初來源于紐約的Fly Market，Fly Market是紐約下曼哈頓地區的一個固定市場，這一市場從美國獨立戰爭(1775年)之前一直延續到大約1816年。Fly這個詞來源于該市場的荷蘭語名稱Vly或Vile，這個詞在荷蘭語的意思是“山谷”，很巧的是，它在荷蘭語中的發音正好和英語中的flea一樣，所以就形成了英語中的flea market。
目前市場上有眾多二手網，基本可分為二手房、二手車、二手書、二手日常用品這幾大類；按地域則幾乎每個地區都有本地的二手交易網。二手商品皆有一個破損率、折舊率的概念，因此不可能像新商品一樣采用標明商品性能的方式，所以其信任度有待而估以及大都采用線下交易方式。
另外這些網站基本上全是會的都摻雜一些無聊廣告、游戲推送，并沒有一個很好專屬于校園的二手網，頁面無法很好的根據師生需求進行物品搜素。1.3發展前景及優勢
首先，學校擴招，師生人數不斷的增加，用戶群將不斷的更新擴大；其次，各個高校并沒有專屬于自己的跳蚤市場網，市場前景廣闊；然后，學校、國家、社會對大學生創業的各個方面的引導以及支持；最為重要的是，現在網絡的時代的快速發展，互聯網涉及生活中每個角落，人們文化素質的提高，科技運用的普及等等[5]。
其次，最近年輕人惰性增加，對需要體力的事情拒之千里，從心里面產生抵觸。另外，二手市場給予用戶一個指路牌，直接將用戶帶到所要搜尋的商品面前，節省了用戶在市場中心急如焚、汗流浹背、口干舌燥地尋找與砍價。依賴于品種豐富，購買者選擇余地較大；購買方便、售價便宜等優勢。從側面給電子商務增 加潛在市場。
然后，該網站開發會逐步更新；管理涉及西華師范大學師生，管理經費較少。預計在近五年里Flea Market將快速占有四川高校市場，直到最后占有全國市場的大部分甚至更遠。
1.4研究目的
以西華師范大學一年一度的跳蚤市場為背景，讓廢舊物品得到充分的利用；方便了同學也營造了節約光榮，浪費可恥的校園文化氛圍；為在校師生提供一個供需平臺，所有注冊用戶都可以將自己不用的東西放在網上，同時也可以在網上找到自己需要的東西，物美價廉，達到雙贏；其次是間接性的為學弟學妹從中找到自己以后可能發展方向，并為之而努力奮斗。
1.5開發工具
開發工具：JerBrains WebStorm10、MyEclipse 10 開發語言：JAVA
運行環境：Windows XP/7/10 數據庫：MySql JerBrains WebStorm的介紹： JerBrains WebStorm中文名為：網絡風暴，享有WEB前端開發神器的名譽。功能上：具有JavaScript功能，例如：基于DOM，特定瀏覽器完成、編碼導航和用法查詢、支持結點、重構、單元測試等；具有批量代碼分析、編輯語言混合、拼寫檢查、重復代碼檢測器的功能；支持H5、CSS/JS、顯示內容及應用風格；具有便捷的環境，可以遠程同步、集成版本控制系統、本地記錄等。
另外，具有強烈的智能代碼補全、代碼優化、html提示、聯想查詢、代碼重構，以及代碼檢查和快速修復、調試、結構瀏覽、折疊等等功能優勢。
第二章
系統需求分析
2.1功能分析
為解決不同用戶的不同需求，該網站主要功能有：用戶模塊、一級菜單分類模塊、商品模塊、購物車模塊、訂單模塊等[1]。
2.1.1用戶模塊
根據對用戶簡單分析[2]，得出用戶基本功能，見圖2.1。
注冊：前臺的JS校驗、使用AJAX完成對用戶名異步校驗、后臺Struts 2校驗、驗證碼、發送激活郵件、將用戶信息存入數據庫里面。
激活：根據激活碼查詢用戶是否存在，激活或者修改用戶狀態。登陸：輸入用戶名和密碼進行數據校驗，驗證碼校驗進行用戶登陸。退出：銷毀session。
圖2.1 用戶模塊圖
2.1.2一級菜單模塊
查詢一級分類及商品類型，并將分類存入到session范圍類，同時查詢到每個一級分類所屬的二級分類，以及查詢所有商品分類下面的所有商品，并采用分頁方式顯示，見圖2.2。
圖2.2 一級菜單模塊圖
2.1.3商品模塊
對商品的展示，查詢熱門商品、查詢最新商品、根據ID查詢商品，見圖2.3。
圖2.3 商品模塊圖
2.1.4購物車模塊
用戶將商品添加到購物車、從購物車中移除商品、清空購物車中所有商品等，見圖2.4。
圖2.4 購物車模塊圖
2.1.5訂單模塊
為用戶生成訂單，將購物車中信息存入數據庫中；為訂單付款，在線支付、修改訂單狀態、修改訂單信息；查詢用戶訂單等，見圖2.5。
圖2.5 訂單模塊圖
2.2安全性分析
安全方面，普通用戶只可以查找商品、和賣家留言聯系進行商品買賣；注冊用戶可以更改自己的相關信息、相關商品的管理、同買家留言交流；系統管理員可以對自身和注冊用戶基本信息進行操作，刪除注冊用戶；可以對新聞、網站管理進行操作的用戶，以及其他類型用戶的相關權限借可以。系統是在網絡上運行的多用戶系統，采用了數據庫安全性、操作系統安全性、程序安全性三重安全性管理來達到系統要求的安全性[3]。
2.3運行分析
支持系統運行的系統需要在Windows xp/7/10下，需要安裝火狐瀏覽器、MySql數據庫且數據庫密碼為123，以及tomcat7.0運行環境并保證接口8080沒有被其他的占用。硬件方面需建立維護和使用制度，在硬件選擇是要充分考慮硬件的負載和應用環境。軟件方面則需對系統進行定期地維護，盡量能夠預防各種BUG問題。
2.4可行性分析
可行性分析也稱可行性研究，是在系統調查的基礎上，針對新系統的開發是否具備必要性和可能性，對新系統的開發從技術、經濟、社會的方面進行分析和研究，以避免投資失誤，保證新系統的開發成功。
2.4.1技術可行性
前端采用HTML5、CSS3布局；JS、JQuery技術頁面動畫效果； AJAX頁面數據的交互；代碼分段、分類，重用率高，可維護性強[4]。后臺SSH框架，著重struts和spring進行業務分層描寫；代碼層次清晰可維護性強。后端數據庫采用SQL編寫，輕便且功能強大，數據處理快、權限設置準確、數據安全性高。2.4.2經濟可行性
經濟可行性主要對系統的經濟效益進行評價，該系統的設計與開發不需要特殊硬件，使用的軟件為開源免費的，不會產生技術專利問題，同在開發過程中的經費低[5]。
第三章
系統總體設計
3.1設計概述
根據需求將網站劃分為不同的模塊，每個模塊將完成特定功能，最后將每個模塊鏈接起來，組成一個整體[6]。
3.2總體結構
根據需求分析，Flea Market網可以劃分為：用戶模塊、商品模塊、訂單模塊、購物車模塊等。用戶模塊包括用戶注冊、登陸、激活、退出等功能；商品模塊可以分為商品的查詢、瀏覽；訂單模塊包括商品信息、訂單信息、支付信息；購物車模塊有商品信息、商品支付狀態、商品添加刪除等。詳見圖3.1。
圖3.1 總體模塊功能劃分圖
3.3各個模塊功能
各個模塊功能如下
用戶模塊：用戶注冊、用戶激活、登陸、退出等功能。
圖3.2 用戶管理模塊功能圖 注冊主要有，用戶名(唯一標識)、密碼、郵箱、姓名、性別、電話、地址，以及需要激活的驗證碼。
激活主要應用在用戶登錄時，將用戶的狀態修改。登錄和注銷用來管理用戶的回話信息，登錄時，網站會保留用戶的基本信息，包括用戶ID、用戶名等。退出時用戶信息會清除。
商品模塊：根據熱賣狀態對商品的瀏覽，或者根據分類狀態瀏覽商品。每個用戶皆可以根據一定的條件對全部或部分商品搜索后瀏覽，并可以看到商品的一些基本信息。例如：商品名稱、從不同角度展現出的圖片、商品作用、購買時間、原價、現價等信息。
購物車模塊：添加、移除、查詢、清空等功能。
添加商品，用戶根據商品ID將商品添加到購物車中。移除商品，只能根據商品ID移除單個商品。
查詢購物車，查詢購物車中商品的各種信息，包括商品種類、數量、單價以及總價。
清空購物車，一次性將購物車中所有的商品全部移除。
圖3.3 購物車模塊功能圖
訂單模塊：商品添加后自動生成訂單，用戶根據需求查詢訂單、對商品進行支付等功能。
圖3.4 訂單模塊功能圖
第四章 系統數據庫設計
4.1數據庫需求分析
在整個動態網站設計中，數據庫設計具有重要位置，數據庫設計質量直接影響到數據庫數據的冗余度，數據的一致性，數據丟失等問題。系統開發中數據可設計至關重要，它將影響整個系統的執行效率和可靠性，關系到系統管理員的操作、運行等的可靠性。
該網站開發過程中使用MySql數據庫，數據庫名為將j2ee，用戶名root，數據庫密碼123。
4.2概念結構設計
數據庫的概念結構設計就是將需求分析得到的用戶需求抽象為信息結構，即概念模型。概念模型作為概念結構設計的表達工具，為數據庫提供一個說明性結構，是設計數據庫邏輯結構即邏輯模型的基礎[3]。
數據庫的概念結構設計就是將需求分析得到的用戶需求抽象為信息結構，即概念模型。概念模型的種類很多，其中最著名、最實用的一種是E－R（實體－聯系）模型，它將現實世界的信息結構統一用屬性、實體以及他們之間的聯系來描述[3]。
以下是本數據庫系統E-R模型：
圖4.1 數據庫E-R模型圖
4.3邏輯結構設計
該網站主要數據表有：用戶信息表user、一級菜單表goodstitle、商品信息表product、二級菜單表goodstitlesecond、訂單信息表orderitem、定單表order。
用戶表user存放的為用戶登錄、注冊信息，具體表結構設計見圖4.2。
圖4.2 用戶信息表
一級菜單表goodstitle存放商品類型信息，具體表結構見圖4.3。
圖4.3 用戶信息表
二級菜單表goodstitlesecond存放商品分類信息，具體表結構見圖4.4。
圖4.4 二級菜單表
商品信息表product存放商品各種基本信息，具體表結構見圖4.5。
圖4.5 商品信息表 訂單信息表orderitem存放訂單各種狀態信息，具體表結構見圖4.6。
圖4.6 訂單信息表
定單表order存放用戶訂購商品信息，具體表結構見圖4.7。
圖4.7 訂單表
第五章 系統詳細設計
5.1前臺界面設計
界面是網站的門面，以達到美觀、舒適、操作方便、信息準確、結構合理為標準。
5.1.1首頁界面設計
用戶一打開該網站，就通過客戶端的首頁對該網站的功能一目了然[1]。網站采取暖色調背景，促進用戶的購物欲望。用戶可以根據“圖書”、“宿舍生活”、“戶外活動”、“電器”、“其他”等不同類別瀏覽該網站，也可通過首頁各個板塊瀏覽商品信息。其中“注冊”為注冊成為普通用戶的功能，“登陸”為有賬號的[7]所有類型用戶可以操作。其中頭部和尾部的設計是一樣的。
首頁界面如下所示：
(a)頭部
(b)熱賣
(c)限時搶購
(d)促銷區
(e)其他
(f)底部
圖5.1 網站首頁
5.1.2主要界面設計
商品展示界面為用戶瀏覽商品信息的主要界面。按不同的分類瀏覽，不同的分類器商品信息不同，但功能風格相同。這里將展示出其界面。每種商品都以小圖或者簡介的形式展示，單擊可以查看其詳細信息和放大圖片，以直觀的方式介紹商品。另外，在每個頁面中用戶都可直接注冊和登陸，商品類型，從而為用戶操作提供方便。
商品界面如下所示：
(a)商品頭部
(b)商品分頁
圖5.2 商品展示界面
登陸界面如下：
圖5.3 用戶登錄界面
注冊界面
圖5.4 用戶注冊界面
5.1.3其他界面設計
用戶查看所點擊的商品的相關信息，并根據需求添加到購物車實行商品購買。
(a)商品詳細 16
(b)商品推薦
圖5.5 商品詳情頁界面
圖5.6 購物車界面
(a)支付方式 17
(b)未支付
圖5.7 訂單界面
5.2關鍵問題設計
該網站采用MVC模型設計，設計到一些常用的技術手段[8]。
5.2.1驗證碼技術
防止用戶利用機器人自動注冊、登陸、灌水，皆采用驗證碼技術。所謂驗證碼，就是將一串隨機產生的數字或字符，生成一個特定的字符串，用戶識別其驗證碼信息，輸入表單提交驗證，驗證成功后才可以使用其中特定的功能[9]。
驗證碼的實現流程是：服務器端隨機生成驗證嗎字符串，保存在內存中，發送給瀏覽器顯示；瀏覽器端輸入驗證碼字符串，然后提交服務器端，提交的字符與服務器端保存的字符進行比較，若一致則繼續下一步，否則返回提示。
驗證碼主要代碼： 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左右無縫平移設計
圖片或圖層平移無間隙，緩和地平移圖片或圖層，使得頁面效果更平緩。無縫平移主要代碼： $: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輪播切換設計
圖層輪播切換技術采用純JS技術編寫，實現頁面動畫效果。主要代碼如下： 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;
nn>this.max?n=this.min:n;
//alert(n);
$(”.product-img img“).attr(”src“,newSrc+n+”.jpg“);
}
5.2.4平移圖層
圖層平移一般應用在詳情頁面，當用戶需要對象應商品進行更深層次的了解 時，需仔細查看圖層的各個細節，其平移位置根據鼠標的位置而定。部分代碼如下：
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分頁技術
當商品類型過多時，需對商品展示進行分頁展示。先統計數據庫中商品的總數，在根據頁面展示的數量大小進行分頁顯示[10]。主要代碼如下：
PageSet
pageSetBean=new PageSet
();
pageSetBean.setType(1);
pageSetBean.setPage(page);//設置當前頁數
int limit=8;//設置當前顯示記錄數
pageSetBean.setLimit(limit);
int numberCount=0;//總記錄數
numberCount=productDao.findnumberCount(gid);
pageSetBean.setNumberCount(numberCount);
int pageCount=0;//總頁數
if(numberCount%limit==0){
pageCount=numberCount/limit;
}else{
pageCount=(numberCount/limit)+1;
}
pageSetBean.setPageCount(pageCount);
int begin=(page-1)*limit;//設置數據集合
List
list=productDao.findProductPage(gid,begin,limit);pageSetBean.setList(list);return pageSetBean;5.2.6 郵箱激活
用戶注冊時進行驗證碼激活。主要代碼如下：
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 code “, ”text/html;charset=UTF-8");
Transport.send(message);
} catch(AddressException e){
// TODO Auto-generated catch block
e.printStackTrace();
} catch(MessagingException e){
// TODO Auto-generated catch block
e.printStackTrace();
}
}
結論
經過這三個月的畢業設計，我完成了flea market網站，即該網站從分析、設計到實現的三個過程。在設計過程中，通過查閱大量的相關資料、與同學交流經驗、自學、并向老師請教等方式促使自己學到不少知識，并大大提高了實際操作能力。讓我充分體會到在創造過程中的艱辛探索和成功的喜悅。
同時，通過開發這個網站讓我對軟件工程設計方面有了更深層次的理解，在前期需求分析和數據可設計時，沒有很好的理解其相關性，導致后期在開發過程中出現框架設計錯誤，自己只能邊設計邊修改需求方案，最終在老師和自己的合理調整后解決了相應的問題，這是在今后項目開發是需要謹記得教訓。
在實際項目開發過程中，由于時間和本人缺乏系統設計經驗，因此網站依然存在一些遺憾和不足，比如驗證的嚴謹性、瀏覽器之間的兼容性、后臺操作的準確性等問題。雖然這些問題存在，但是在設計的過程中所學到的東西是這次畢業設計的最大收獲和財富，使我終身受益。
參考文獻
[1] 冀振燕．UML系統分析與設計教程[M]．北京：人民郵電出版社，2014.[2] 錢樂秋.軟件工程[M].清華大學出版社，2013.[3] Baron Schwartz等.高性能MySQL 第三版[M].電子工業出版社，2013.5.[4] 陳華.Ajax從入門到精通[M].清華大學出版社，2012.[5] 劉克強.電子商務平臺建設[M].人民郵電出版社，2011.[6] 鄭阿奇.SQL Server數據庫教程[M].北京：人民郵電出版社，2013.[7] 魏雪萍.完美網站建設全能[M].人民郵電出版社，2012.[8] 陳雄化 林開雄.Spring3.x企業應用開發實戰[M].電子工業出版社，2013.5.[9] 劉京華.Java Web整合開發王者歸來[M].清華大學出版社，2012.5.[10]葛一鳴等.Java 程序性能優化[M].清華大學出版社，2012.10.24
致
謝
在這三個月的忙碌和學習中，畢業設計也即將結束，作為一名本科生畢業設計，因經驗不足，難免有諸多考慮不周的地方，在此衷心感謝李艷梅老師給予我的督促指導，對于網站設計有了更多新認識，對基本網站設計有進一步認識，對網站整體設計脈絡了解更為清晰透徹；以及感謝各位同伴的支持與鼓舞，使得這次畢業設計順利完成。
畢業設計，可以很好地總結大學四年中收獲、認知。與此同時，幫助改變一些處理事情時的懶惰。從最開始的材料收集，整理資料，題目構思與確定，到網站設計以及搭建。每一步都需精心思考，認真查閱資料，仔細實際操作。
通過畢業設計，讓我深刻領會到基礎的重要性。它不僅幫助檢驗學生大學期間的學習成果，還可幫助我們更加清楚地認識自我，更多地磨練我們的意志與耐性，這會為我們今后的工作、生活帶來巨大幫助。
最后，再次感謝李艷梅老師給予我的耐心、細致、全面的指導，感謝關心和鼓勵我的同伴們，感謝學校老師、領導，感謝你們給予我的幫助與關懷；感謝西華師范大學計算機學院四年來為我提供良好的學習環境。
（論文設計（論文）題目
JSP動態網站設計
學 院 教 學 系 班 級
姓 名 指導教師
畢業設計）
畢業論文
JSP動態網站設計
摘要
隨著Internet技術的發展,人們的日常生活已經離不開網絡。未來社會人們的生活和工作將越來越依賴于數字技術的發展，越來越數字化、網絡化、電子化、虛擬化。Internet的發展歷程以及目前的應用狀況和發展趨勢，可以充分地相信網絡技術將極大的改變我們的生活和工作方式，甚至社會的價值觀也會發生某種變化。
企業網站，就是企業在互聯網上進行網絡建設和形像宣傳的平臺。企業網站就相當于一個企業的網絡名片，不但對企業的形象是一個良好的宣傳，同時可以輔助企業的銷售，甚至可以通過網絡直接幫助企業實現產品的銷售，企業可以利用網站來進行宣傳、產品資訊發布、招聘等等。企業網站的作用就是為展現公司形象，加強客戶服務，完善網絡業務，還可以與潛在客戶建立商業聯系。本網站使用JSP技術，所謂JSP就是在傳統的網頁HTML文件（*.html,*.htm）中加入Java程序片段（Scriptlet）和JSP標記（tag），就構成了JSP網頁（*.jsp）。Web服務器在遇到訪問JSP網頁的請求時，首先執行其中的程序片段，然后執行結果以HMTL格式返回給客戶。程序片段可以操作數據庫、重新定向網頁以及發送E-mail等，這就是建立動態網站所需要的功能。所有程序操作都在服務器端執行，網絡上傳送給客戶端的僅僅是結果，對客戶瀏覽器的要求最低。
在Java的基礎上開發出的JSP實現了動態頁面與靜態頁面的分離，脫離了硬件平臺的束縛以及編譯后運行等方式，大大提高了其執行效率而逐漸成為Internet上的主流開發工具。在美國，EJB+Servlet+JSP幾乎成為了電子商務的開發標準，而在我國也正逐漸興起，不少網站都采用了JSP技術。全球電子商務的出現和發展，無疑為我國發展知識經濟和推進現代化事業提供了歷史機遇，也提出了嚴峻的挑戰。電子商務是信息化社會的商務模式，也是商務的未來。作為一種現代商務模式，電子商務利用計算機網絡檢索和獲取信息，對個人和公司提供決策服務，解決了組織、商家和客戶的需求，減少了用于改善貨物和服務質量的投入，加快了商品交易的速度。電子商務可以應用于制造到零售，從銀行、金融機構到出版娛樂以及其他的任何企業。
關鍵詞 ：電子商務 JSP MySQL
畢業論文
目 錄
摘要...............................................................1 1緒論..............................................................1 1.1課題背景與來源..................................................1
1.2 課題研究意義...................................................1 1.3企業網站的由來和發展............................................2 2 開發工具的介紹及選擇.............................................2 2.1 Dreamweaver8.0.................................................2 2.2 MyEclipse 8.5..................................................3 2.3 JavaScript.....................................................4 3 企業網站結構設計.................................................4 3.1 技術涉及領域...................................................4 3.2可行性分析......................................................8 3.3網站的設計與規劃................................................8
3.3.1網站目的.................................................10 3.3.2網站概貌.................................................11 3.3.3功能規劃.................................................11 4數據庫設計實現...................................................11 4.1 數據庫設計....................................................11 4.2注冊表（tb_login）.............................................13 4.3產品表（product）..............................................14 4.4購物車表（tb_shop）............................................14 4.5 網頁與數據庫的鏈接代碼........................................15 5模塊功能實現.....................................................15 5.1系統總體結構設計...............................................15 5.2 主頁頁面......................................................16 5.3 登陸/注冊.....................................................16 5.4購物頁面.......................................................19 5.5其它頁面實現...................................................21 6設計技巧和解決方法...............................................22 7總 結............................................................23 謝辭..............................................................24 參考文獻..........................................................25
畢業論文
1緒論
1.1課題背景與來源
在已跨入21世紀的今天，人類使用和學習信息的方式以及信息的包裝方式正在進行著不可阻擋的革命，這次革命將比印刷術的出現所產生的影響以及對社會發展的推動遠為復雜而巨大。
隨著網絡的發展，越來越多的企業需要搭建公司網站，將其作為對外宣傳、推廣、服務及傳銷的載體，來配合公司的發展和需要，使更多的客戶通過網絡來結盟公司。本課題根據企業的具體情況及需要，設計開發企業宣傳網站，幫助其充分利用國際互聯網上的信息資源，服務現有客戶，挖掘潛在客戶，最大限度地開拓屬于另一片天空的市場。是目前使用最為廣泛的軟件系統。課題涉及的知識較廣泛,其中包括了目前最新的網頁設計技術，如WEB標準、XHTML技術的應用、CSS技術的應用、Javascript代碼的設計、網站的配置及發布等等內容。通過實現該課題，學生對多種知識進行綜合使用，達到融會貫通的程度，更重要的是在該課題的開發過程中學生使用WEB標準進行網頁的設計，對網站的重構和優化有一個詳細深入的認識，對于當前網頁設計的最新技術和標準規范有了一次真實體驗，使學生在就業前得到一次實踐鍛煉的機會，提前熟悉企業中網站開發的標準流程，更能適應當前市場的需求。
目前，我國上網的人口已近一個億，成立世界上網民最多的國家，許多人在需要查詢信息，首先想到的就是上網。網站的迷人之處在于綜合使用文本、圖象、聲音、動畫和視頻的信息和內容，具有豐富的多媒體表現與互動特點，無可置疑，網站已成為最吸引人的也最有效的信息傳遞手段和方式。隨著網絡技術的發展，各類網站紛紛出現。企業網站也成為了一種時尚。越來越多的公司通過企業網站，打開網絡世界的廣闊市場，展示企業的文化和形象。
1.2 課題研究意義
通過對這一題目的設計實現, 使學生鞏固、提高和綜合運用已學知識，同時培養學生綜合知識的應用能力，提高學生分析問題和解決問題的能力，學會設計工作思路、方法、步驟，提高技術應用能力；進一步培養學生樹立嚴謹的科學作風和良好的工作能力，提高獨立思考與團隊合作的能力。通過對本課題的設計，力圖使學生能熟練掌握利用XHTML＋CSS+Javascript等語言開發網頁的過程和開發方法，深刻地體會到在開發網頁時使用CSS技術的優越性，獲得實際的開發經驗，熟悉一個實際項目的開發過程和開發方法，增加自己的編程實踐經驗，為自己將來的工作奠定一個堅實的基礎。隨著互聯網的發展，網站已經越來越引起人們的關注，很多種搭建網頁的編程語言應運而生。JSP是一種動態網頁的編程語言，它是在傳統的網頁HTML文件中插入Java程序段和JSP標記,從而形成JSP文件。
畢業論文
用JSP開發的Web應用是跨平臺的，既能在Linux下運行，也能在其他操作系統上運行。自JSP推出后，眾多大公司都支持JSP技術的服務器，如IBM、Oracle、Bea公司等，所以JSP迅速成為商業應用的服務器端語言。JSP具備了Java技術的簡單易用，完全的面向對象，具有平臺無關性且安全可靠，主要面向因特網的所有特點。JSP將網頁邏輯與網頁設計和顯示分離，支持可重用的基于組件的設計，使基于Web的應用程序的開發變得迅速和容易。插入的Java程序段可以操作數據庫、重新定向網頁等，以實現建立動態網頁所需要的功能。JSP是在服務器端執行的，通常返回給客戶端的就是一個HTML文本，因此客戶端只要有瀏覽器就能瀏覽。正因為JSP擁有如此多的優點，在社會上也成為了流行的編程語言，深受民眾的普遍受歡迎。成功完成一項由JSP語言匯編的網頁，將會大大提高學生的編程技術，使學生在就業前得到一次實踐鍛煉的機會，提前熟悉企業中網站開發的標準流程，使學生更能適應市場的需求。
1.3企業網站的由來和發展
互聯網在中國的出現只有短短七年時間，1994年中國科學院高能物理研究所設立了國內第一個Web服務器，推出一個叫做“中國之窗”的網頁，這可能是國內Internet上出現的第一個Web網頁，1995年開始，中國教育科研網，中國科技網，中國公用計算機互聯網以及中國金橋網這構成中國數字神經系統的四大互聯網絡相繼建成，使互聯網在中國開始真正進入社會生活之中。
企業網站，就是企業在互聯網上進行網絡建設和形像宣傳的平臺。企業網站就相當于一個企業的網絡名片，不但對企業的形象是一個良好的宣傳，同時可以輔助企業的銷售，甚至可以通過網絡直接幫助企業實現產品的銷售，企業可以利用網站來進行宣傳、產品資訊發布、招聘等等。企業網站的作用就是為展現公司形象，加強客戶服務，完善網絡業務，還可以與潛在客戶建立商業聯系。隨著網絡的發展，出現了提供網絡資訊為盈利手段的網絡公司，通常這些公司的網站上提供人們生活各個方面的資訊，如時事新聞、旅游、娛樂、經濟等。開發工具的介紹及選擇
2.1 Dreamweaver8.0 Web(World Wide Web，簡稱 編輯器和其他編程工具（包括 Microsoft Visual Studio.NET）一起工作。這不僅使得 Web 開發更加方便，而且還能提供這些工具必須提供的所有優點，包括開發人員可以用來將服務器控件拖放到 Web 頁的 GUI 和完全集成的調試支持。微軟為ASP.NET設計了這樣一些策略：易于寫出結構清晰的代碼、代碼易于重用和共享、可用編譯類語言編寫等等，目的是讓程序員更容易開發出Web應用，滿足計算向Web轉移的戰略需要。
JSP（JavaServer Pages）是Sun公司推出的一種動態網頁技術。JSP技術是以Java語言作為腳本語言的，熟悉JAVA語言的人可以很快上手。JSP本身雖然也是腳本語言，但是卻和PHP、ASP有著本質的區別。PHP和ASP都是由語言引擎解釋執行程序代碼，而JSP代碼卻被編譯成Servlet并由Java虛擬機執行，這種編譯操作僅在對JSP頁面的第一次請求時發生。因此普遍認為JSP的執行效率比PHP和ASP都高。JSP是一種服務器端的腳本語言，最大的好處就是開發效率較高，JSP可以使用JavaBeans或者EJB（Enterprise JavaBeans）來執行應用程序所要求的更為復雜的處理，但是這種網站架構因為其業務規則代碼與頁面代碼混為一團，不利于維護，因此并不適應大型應用的要求，取而代之的是基于MVC的Web架構。MVC的核心思想是將應用分為模型、視圖和控制器三部分。模型是指應用程序的數據，以及對這些數據的操作；視圖是指用戶界面；控制器負責用戶界面和程序數據之間的同步。通過MVC的Web架構，可以弱化各個部分的耦合關系，并將業務邏輯處理與頁面以及數據分離開來，這樣當其中一個模塊的代碼發生改變時，并不影響其他模塊的正常運行，所以基于MVC的Web架構更適應于大型應用開發的潮流。因此，不少國外的大型企業系統
畢業論文
和商務系統都使用以上的MVC架構，能夠支持高度復雜的基于Web的大型應用。
<5> JSP開發環境: JDK：Java Development Kit，Java開發工具集 Tomcat：服務器
IDE：Integated Development Environment，集成開發環境 常用：Eclipse（MyEclipse）、JBuilder 3.2可行性分析
（1）經濟可行性分析：網頁開發費用可以接受，開發周期短，網站使用期持久。（2）技術可行性分析：計算機硬件和軟件的飛速發展為網頁提供了技術條件。（3）社會可行性分析：在當前信息技術飛速發展的大環境下，計算機技術和軟件技術的更新是網頁，完全有可能也有能力采用這樣先進的技術。
3.3網站的設計與規劃
JSP頁面包含的元素：JSP代碼、JSP指令、JSP動作。JSP代碼指的是嵌入在JSP頁面中的Java代碼。JSP指令是為JSP引擎設計的，它告訴JSP引擎如何處理代碼，比如引入一個其他的類、設置JSP用的語言等。JSP動作是用來控制JSP引擎的動作，比如可以根據某個條件動態跳轉到另一個頁面。JSP的內建對象由JSP容器自動為JSP頁面提供，是預先存在的。在編寫JSP程序時，可以直接使用內建對象。
JSP的常用內建對象有：
<1>out：傳送信息到客戶端的瀏覽器。<2>request：包裝客戶端的請求信息。<3>response：響應客戶端的請求。<4>session：客戶端請求的一次回話。
JDBC（Java Data Base Connectivity）Java數據庫連接。是一種用于執行SQL語句的Java API，可以為多種關系數據庫提供統一訪問，由一組用Java語言編寫的類和接口組成。
MySQL的安裝、建庫、表、增刪改查、MyEclipse Database Browser。使用JDBC訪問MySQL步驟： <1>加載驅動程序類 <2>建立連接
<3>創建能夠發送SQL語句的對象 <4>執行發送的SQL語句 <5>處理返回結果 <6>關閉連接
畢業論文
加載驅動程序類: try{ Class.forName(“com.mysql.jdbc.Driver”);} catch(Exception e){ e.printStackTrace();} 建立連接: Connection conn=DriverManager.getConnection(“jdbc:mysql://localhost:3306/數據庫名”,”用戶名”,”密碼”);創建能夠發送SQL語句的對象: Statement：向數據庫提交SQL語句并返回相應結果的工具。Statement st=conn.createStatement();PreparedStatement：繼承Statement接口，當一條SQL語句需要稍加變化而反復執行時，通常可以使用PreparedStatement。
PreparedStatement ps=conn.prepareStatment(“sql”);
CallableStatement：繼承PreparedStatement接口，用于執行存儲過程。CallableStatement cs=conn.prepareCall(“sql”);執行發送的SQL語句: int n=st.executeUpdate(“sql”);/* 增刪改*/ int n=ps.executeUpdate();ResultSet rs=st.executeQuery(“sql”);/* 查詢*/ ResultSet rs=ps.executeQuery();cs.execute();/*其它*/ 處理返回結果: 增刪改:if(n>0)操作成功！else 操作失敗！
查詢:while(rs.next()){rs.getxxx(“列名”)//獲取結果集中的值} 關閉連接conn.close();JavaBean目前代表性的組件技術有COM、COM+、JavaBean、EJB、CORBA。它基于組件的軟件設計擁有組件可重復使用、易于替換和升級、加快軟件開發速度，縮短生產周期的優勢。JavaBean支持可視化和非可視化兩種組件。可視化組件在運行中能夠顯示出來。非可視化組件通常用來處理一些復雜事物，一般不會有可視化的輸出。JSP只支持一些非可視化的JavaBean來實現一些比較復雜的事務處理。
Servlet是服務器端的Java小程序，用于響應客戶端的請求。一般會把處理結果以HTML的形式返回，在客戶端形成動態網頁。Servlet和JSP的區別是JSP更加注重頁面的表現，而Servlet更注重業務邏輯的實現，且編寫Servlet較難。JSP只能處理瀏覽器的請求，而Servlet還可以處理客戶端的應用程序請求，可以認為Servlet加強了Web服務器的功能。
畢業論文
一個Web項目至少分為三層：數據層、業務邏輯層和表示層。數據層通過數據庫保存數據。業務邏輯層用來完成數據計算、數據分析、數據庫連接等處理工作。表示層用來完成HTML頁面的輸出。
Servlet的生命周期分為：初始化、處理客戶端的請求和銷毀三個階段。當服務器裝載一個Servlet的時候，服務器創建一個Servlet實例，并且調用Servlet的init()方法。在初始化階段，Servlet初始化參數被傳遞給Servlet配置對象。在服務器裝載和初始化Servlet后，服務器會創建特定的“請求”對象和一個“響應”對象。服務器調用Servlet的service()方法，用于傳遞“請求”和“響應”對象。service()方法從“請求”對象獲得請求信息，處理該請求并用“響應”對象的方法將響應返回客戶端。service()方法可以調用其他方法來處理請求，例如doGet()、doPost()等方法。如果服務器不再需要或重新裝入Servlet實例時，服務器會調用Servlet的destroy()方法以終止請求。
Servlet基本方法: <1>init()：在Servlet的生命周期中，init()方法僅執行一次。它是在服務器裝入Servlet時執行的。
<2>service()：該方法是Servlet的核心。每當客戶端請求一個Servlet實例時，該實例的service()方法就會被調用。默認條件下調用與HTTP請求方法相應的do功能。如果HTTP請求方法是GET，則默認條件下調用doGet()方法；如果HTTP請求方法是POST，則默認情況下調用doPost()方法。
<3>destroy()：該方法只執行一次，即在服務器停止并卸載Servlet時被調用。Servlet編寫
<4>Servlet是Java類。
<5>一般Servlet是javax.servlet.HttpServlet的子類，需覆蓋doGet()和doPost()方法來完成相應功能。
<6>Servlet編寫完成需配置web.xml文件： Servlet、Servlet-mapping 3.3.1網站目的
通常情況下，架設企業網站主要是為滿足公司的基本業務以及日益擴大的商務應用能夠隨時升級，擁有產品銷售業務的企業以網絡營銷為目的，在互聯網上進行企業宣傳。企業網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。本網站的功能在一般網站的功能上需要適當創新和添加。
畢業論文
3.3.2網站概貌
因為是企業網站，所以需要包涵公司要求的各方面內容，在突出企業的風格和特點的同時，還應用了現在流行的網站設計技術和數據庫技術。因此將網站設計分為前臺頁面展示平臺和后臺設計。3.3.3功能規劃
網站設計有公司動態更新，瀏覽者可以在首頁了解世紀互聯數據中心的基本信息，并且可以登錄和注冊賬戶，在后臺設計頁面中，管理員可以對網站信息進行管理。站內的其它頁面均是按照公司整體需求進行設計的。
<1>主頁
主頁可以讓用戶看見公司的簡單介紹。<2>登陸/注冊
愿意了解公司的客戶需要進行注冊登陸。<3>商品展示
是對公司產品的一個陳列說明，可以讓客戶進行選購。<4>購物車 讓用戶選購產品。<5>服務內容
世紀互聯公司不只是產品銷售公司，它的服務范圍涵蓋IT界各項內容。<6>招聘信息
對人才的需求也是公司的重點，通過招聘信息瀏覽者可以申請公司職位。
4數據庫設計實現
對于數據庫的需求而言，由于其主要是用于信息的提供、保存、更新和查詢等利用數據庫設計用戶數據表保存用戶數據。我們以系統功能所隱含的對數據應用的需求，確定了數據庫的結構，并建立了數據表。本網站數據庫BuinessDB。BuinessDB里創建了多個數據表tb_login、product和購物車表（tb_shop）。
4.1 數據庫設計
數據庫是計算機應用系統中的一種專門管理數據資源的系統。數據有多種形式，如文字、數碼、符號、圖形、圖像以及聲音等。數據是所有計算機系統所要處理的對象。人們所熟知的一種處理辦法是制作文件，即將處理過程編成程序文件，將所涉及的數據按程序要求組織成數據文件，用程序文件來調用。數據文件與程序文件保持著一定的對應關系。在計算機應用迅速發展的情況下，這種文件式方法便顯出不足。比如，它使得數據通用性差，不便于移植，在不同文件中存儲大量重復信息、浪費存儲空間、更新不便等。數據庫系統便能解決上述問題。數據庫系統不從具體的應用程序
畢業論文
出發，而是立足于數據本身的管理，它將所有數據保存在數據庫中，進行科學的組織，并借助于數據庫管理系統，以它為中介，與各種應用程序或應用系統接口，使之能方便地使用數據庫中的數據。
這段說明介紹的確非常詳細，可能讓人看得頭暈眼花了，其實簡單地說數據庫就是一組經過計算機整理后的數據，存儲在一個或多個文件中，而管理這個數據庫的軟件就稱之為數據庫管理系統。一般一個數據庫系統（Database System）可分為數據庫（Database）與數據管理系統（Database Management System，DBMS）兩個部分。
數據庫解決方案分為兩個基本類別：數據庫服務(DBaaS)和數據服務(DaaS)。這兩者間的主要區別在于數據是怎樣管理的。
DaaS使你可以定義你的數據，然后你可以從世界任何地方通過Internet連接對這些數據進行查詢。不同于傳統的數據庫解決方案，DaaS不執行典型RDBMS接口，例如SQL。而是通過一套通用的API訪問數據。此外，DaaS是最適合于基礎數據的查詢和操縱等管理。
DBaaS是一個更為強大的數據解決方案，它提供全面的數據庫功能。在DBaaS中，管理層負責連續監測和配置數據庫，以實現優化縮放、高可用性、多租戶、并在云中有效的分配資源。因此，開發者可以免去許多繁瑣乏味的數據庫管理操作的麻煩，因為這些會被自動處理。
有三種基本的基于云數據庫的服務，它們的不同在于用戶定制環境的靈活性。對于擴展性，云計算是用戶訪問一個只有操作系統的準機器，而對于這個操作系統用戶有充分的靈活性安裝和配置選定的RDBMS軟件。這種安裝被認為云服務基礎設施(IaaS)。Amazon Elasti Computing Cloud(EC2)就是這種服務的一個很好的例子。對于想對其托管的數據庫具有完全控制權的人來說，這個平臺是一個很好的選擇。
另一個在云中部署RDBMS通用模型的是虛擬設備模型。虛擬設備是一個預裝載并預配置設備的虛擬機。Amazon還在其EC2云中部署預配置了MySQL、Oracle和Microsoft SQL Server的虛擬設備。
最后，本地云數據服務，例如Xeround’s MySQL云數據庫使用NoSQL數據庫，通過Web界面進行管理。本地云數據庫往往得到更好的設備以便能夠更好地使用云資源，并且與非云RDBMS使用的軟件相比提供更好的可用性與穩定性。
正如現在云計算一樣棘手，讓陌生人訪問您的數據要考慮清楚，不能掉以輕心。低價格：這可能是使企業進入云行列的第一個原因。使用基于云數據庫解決方案，可以從硬件、軟件許可以及服務實施等方面大幅降低運營成本和支出，因為你只需要對所使用的部分買單。
擴展性與靈活性：數據庫托管公司往往處于有利位置，為了得到更高的效率并減少未使用的空間而使資源得到最大化。他們根據你不斷變化的業務需求而對服務進行增加或縮減。
畢業論文
高效率：云計算提供了硬件共享、流程自動化和技術熟練的好處。你和你的員工可以從任何地方、使用任何電腦、移動設備或瀏覽器訪問數據庫。它還能從整體上降低資源的使用。
缺點： 安全問題：云計算中一個值得關注的事情是你的數據是通過網絡訪問的。這就產生了一系列問題，你會給某人提供機會攻擊你的數據庫服務商并且竊取你寶貴的資料嗎？這樣安全漏洞事件是誰的責任呢？當第三方丟失客戶信息時，你不能也不應該只躲在云供應商后面。除了網頁接入問題，怎樣才能使供應商的物理位置安全呢？他們經常進行備份么？有異地數據存儲么？這些實在沒有辦法百分之百的確定。你只能相信你的供應商能照顧好您的數據。
互聯網連接風險的損失：由于你的數據通過網絡進行交互，你應該考慮失去數據庫連接將會對你的企業生產帶來怎樣的影響。這種風險你能忍受么？這里有個叫做五個九的高可用性標準。在99.999%的時間正常運行，每年停機時間約為五分鐘。你能期望它保證具有這種可靠性么？
定制的局限性：當處理如此多的業務時，要求數據庫服務商要很靈活。如果需要深度定制并且與現有系統集成來為日常業務服務，那么云計算能夠適應你的需求嗎。
4.2注冊表（tb_login）
主要記錄用戶在注冊時的個人基本信息，用戶可以對這個表中的信息進行修改。
表 5-1-1 注冊表的邏輯結構
詳細數據表如下：
5-1-用戶注冊表
畢業論文
4.3產品表（product）
主要記錄公司為客戶提供的產品信息，客戶可以瀏覽，購買這個表中的產品。管理員可對產品信息進行增加、刪除及修改。
表5-2-1 產品表的邏輯結構
詳細數據表如表：
表5-2-2 產品數據表
4.4購物車表（tb_shop）
購物車表，主要用來存放用戶已加入購物車的商品。
表5-3-1 購物車表的邏輯結構
詳細數據表如表：
表5-3-2 購物車數據表
畢業論文
4.5 網頁與數據庫的鏈接代碼
在JSP網站設計搭建中，數據庫要想與網頁鏈接必須要有DBconn代碼。
5模塊功能實現
5.1系統總體結構設計
本網站主要圖片由公司提供，劃分為上下兩部分，上部分是一個Web用戶控件，這種控件可以在Web窗體中進行引用，這樣這個網站的風格有了一定的統一；下部分分左右兩部分，左邊主要顯示各個頁面應有的內容，右邊為內容的視覺表達，每個網頁的布局都是這樣，使整個網站統一化。因為公司網站的原因，整個網站的顏色都比較大眾化，所以一般不采用暖色調來填充顏色，因本網站主要圖片的人性化設計，在風格上也向部分網站進行了模仿，為使整個網站在美觀上有所提高，我們對一些圖片進行了修改。
圖4-1-1 系統總體結構設計圖
畢業論文
5.2 主頁頁面
主頁面包含注冊、登錄、產品瀏覽、購物車、招聘信息以及后臺管理等主要功能鏈接，簡潔明了的模塊化分給顧客直觀的感受和足夠的參考信息。
圖4-5-1 主頁面
主頁樣式設計代碼如下：
登陸/注冊
(1)登陸頁面：輸入用戶名及密碼，若與數據表中有匹配項則登陸成功。
畢業論文
圖4-2-1 登陸頁設計圖
用戶登錄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(“login”,“ok”);response.sendRedirect(“main.jsp”);
} else
{ out.println(“用戶名或密碼輸入錯誤！”);out.println(“返回>> 重新輸入”);} result.close();} username='“+strName+”'and password='“+strPass+”'“;
%>
畢業論文
(2)注冊頁面：取得用戶的信息并保存。
圖4-2-2 注冊頁設計
用戶注冊jsp代碼如下：
<%if(!request.getParameter(”Password“).equals(request.getParameter(”Password1“))){ out.println(”密碼輸入不一致！
out.println(”返回 “);} else{ try{ //加載驅動程序
Class.forName(”com.mysql.jdbc.Driver“);//建立連接
Connection conn=DriverManager.getConnection(”jdbc:mysql://localhost:3306/test“,”root“,”“);//創建能夠發送SQL語句的對象
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“);//執行SQL語句
int n=st.executeUpdate(sql);//處理執行結果
if(n>0){ out.println(”“);} else{ out.println(”“);}} %>
畢業論文
5.4購物頁面
購物車模塊主要的核心功能就是產品展示和購物車，這個模塊分三個頁面來實現，瀏覽頁面實現加入購物車，購物車頁面實現購物車管理。
圖4-3-1 產品展示頁
購物頁面：消費客戶能夠查看虛擬購物車內的所有產品，并且已登陸的客戶可以刪除圖書。當客戶刪除產品項之后，系統會及時更新數據表中相應內容。在瀏覽頁點擊加入購物車就可實現加入虛擬購物車功能，在購物車頁面，已登陸的消費者可以看到自己將購買的商品，同時也可刪除商品。
圖4-3-2 購物車效果圖
畢業論文
購物車jsp代碼如下：
<%try{ //加載驅動程序 Class.forName(”com.mysql.jdbc.Driver“);//建立連接 Connection conn=DriverManager.getConnection(”jdbc:mysql://localhost:3306/test“,”root“,”“);//創建能夠發送SQL語句的對象
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“);//執行SQL語句 int n=st.executeUpdate(sql);//處理執行結果 if(n>0){ out.println(”“);} else{ out.println(”“);} } catch(Exception e){ %>
e.printStackTrace();}
瀏覽頁面：消費者可以通過瀏覽產品目錄，查看和選擇產品。當用戶瀏覽目錄的時候，可以遍歷產品類別的層次，并且查看屬于各個類別的產品列表，當查看完產品后，消費用戶就能夠將想購買的產品放在他們的虛擬購物車中。
圖4-3-3 購物車查看圖
畢業論文
購物車信息表代碼如下：
<% int n=0;//用戶人數
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其它頁面實現
企業網站包涵公司要求的各方面內容，需要對公司服務內容進行詳細的說明介紹，世紀互聯數據中心是IT行業相當成熟的企業，它覆蓋了幾乎所有網絡行業的服務內容，為網絡用戶需求帶來全面的服務。
圖4-4-1 企業服務介紹
畢業論文
6設計技巧和解決方法
我們在制作網頁的時候，經常有這種體會，那就是制作好的網頁在本地計算機上瀏覽時很正常，但在另外一臺計算機上瀏覽時發現原本漂亮的網頁變得歪歪扭扭了，這是為什么呢?原來各個計算機的分辨率要使你的主頁在不同的分辨率下都能正常顯示，在 Dreamweaver中得到了較好的解決。在文檔窗口的右下角，Dreamweaver 顯示當前文檔被設計成的分辨率大小。單擊哪個數字，在彈出式菜單中可以為當前的頁面指定顯示分辨率，通過修改可以使你的主頁更具靈活性。使不同分辨率的顯示器都能較好地顯示。有時我們為了要達到一種逼真的效果，希望鼠標移動到某個鏈接上時能有動感產生。使用Dreamweaver可以很容易實現這種效果。設計時，我們首先需要準備兩幅圖象，第一幅是原始圖象，第二幅是鼠標移動上去后的圖象。接著用鼠標單擊第一幅圖，在屬性面板中的鏈接欄中填上要鏈接的文件，然后單擊鍵盤上的F8鍵，在彈出的Behaviors窗口中單擊“+”號，隨后選擇“swap image”，在接著出現的窗口中選擇第二幅圖象，最后單擊確定就可以了。
本次為期三個月多的畢業設計是大學三年所學知識的綜合運用，是理論與實踐相得綜合考察。這種畢業設計項目的選做,不僅可以鞏固了所學的書本知識,還能學到了許多課堂上和書本上無法學到的實踐知識，提高我們的自學能力，增強了專業技術的水平，同時也為今后從事本專業的工作打下了的基礎。
畢業論文
7總 結
經過幾個月的努力，我們的畢業設計終于完成了。通過結合畢設計劃書的要求，制定了公司網站系統管理的計劃方案，本網站可實現用戶注冊、登錄、修改信息、購物、生成訂單、瀏覽產品等公司網站應具備的功能，同時添加了用戶管理系統，進一步完善了本網站的功能，在這次公司網站系統的設計過程中我受到很大啟發：在網站開發與設計上，體會到了理論與實際結合的重要性，認識到做一個完美的網站不僅僅要考慮到網站功能及其效果的實現，更應該注重網站與用戶的有機結合。
在老師耐心細致的指導下，同學之間相互交流，同時翻閱了大量的資料(包括網上資料，書本及學校的一些相關資料)經過近一段時間的努力，企業網站的設計制作告一段落。總結這次“世紀互聯網站”開發制作過程，我們綜合使用了目前因特網上比較流行的各種靜態、動態制作方法，并對初步利用后臺程序完成生成網頁的技術。同時也從中學習了對靜態頁面的處理風格，色彩搭配，頁面導航方面有了一定經驗。目前網站的制作技術與要求，都已經告別了因特網初期網站制作的“幼稚”期，隨著各類網站的迅速增加與瀏覽者需求的提高，無不要求網站從立意，策劃，頁面設計到后臺程序的全面提高。無論是個人網站還是企業網站都必須被要求從瀏覽者角度出發，最大限度的滿足用戶的要求，這也是以后各類網站發展競爭的真正實質所在。
本次設計由于設計時間較緊，且相關模塊比較多，加之設計經驗的不足，在網站的整體設計及各模塊功能可能設計的不完全，有待于進一步的完善和改進。雖然在完成項目的過程中也遇到過各種困難,但最終我們達到了自己的預期目標,雖然此網站與其它網站相比仍有很多不足,但是整個制作過程才是整個項目最寶貴的地方,最后, 由于時間倉促以及本人水平有限，本系統還有很多不完善之處，也難免存在錯漏，懇請各位老師多多指點。
畢業論文
謝辭
畢業論文
參考文獻
[1] 吳濤主編.網站全程設計技術[M].北京：清華大學出版社，2006,7.[2] 龍馬工作室編.JSP+SQL Server組建動態網站實例精講[M].北京：人民郵出版社，2008,4.[3] 趙增敏編.JSP動態網頁設計[M].電子工業出版社，2003,8.[4] 任學文，范嚴編.網頁設計與制作[M].中國科學技術出版社，2006,8.[5] 武創，王惠.網頁設計探索之旅 [M].電子工業出版社，2006,9.[6] 杜巧玲等編.網頁設計超級夢幻組合[M].清華大學出版社, 2003,3.[7] 吳黎兵，羅云芳編.網頁設計教程[M].武漢大學出版社，2006,2.[8] 莊王健編.網頁設計三劍客白金教程[M].電子工業出版社，2006,1.[9] 澤卡斯著，李松峰，曹力譯.JavaScript高級程序設計(第2版)[J].人民郵電出版社，2010.[10] 唐永明.淺議網頁設計與制作[J].科技信息，2009(20).[11] 陳孝強等編.Dreamweaver8 必練[M].北京：清華大學出版社，2006.[12]（美）特里等著，謝文亮譯.《SQL Server 2005深入開發系列——SQLServer 2005報表服務高級編程》[M].北京：清華大學出版社，2007.[13] 王華杰，孫一波等編.《C#數據庫開發技術》[J].清華大學出版社，2003,2.
目 錄
摘 要.......................................................................I ABSTRACT...................................................................II 1 緒 言.....................................................................1 1.1 課題的可行性分析......................................................1 1.2 總體設計..............................................................2 1.3 網站設計思想..........................................................3 2 相關技術..................................................................3 2.1 ASP簡介...............................................................3 2.1.1 Asp的優勢.........................................................3 2.1.2 Asp的特點.........................................................4 2.2 MACROMEDIA DREAMWEAVER 8簡介..............................................5 2.3 MICROMEDIA FLASH 8.0.....................................................5 2.4 ADOBE PHOTOSHOP8.0.......................................................6 2.5 ACCESS數據庫的簡介.....................................................6 2.5.1 Access數據庫概述..................................................6 2.5.2 Access數據庫的優點................................................6 2.5.3 ADO數據訪問技術...................................................7 3 網站總體分析與設計........................................................7 3.1 網站系統分析..........................................................7 3.2 網站數據庫詳細設計....................................................8 3.3 每個頁面的詳細設計....................................................9 3.3.1 網站主頁..........................................................9 3.3.2 音樂欣賞.........................................................10 3.3.3 班級相冊模塊.....................................................10 3.3.4 美文模塊.........................................................12 3.3.5 留言模塊.........................................................14 4 結束語...................................................................18 致 謝......................................................................19 參考文獻...................................................................20
摘 要
班級網站是一個班級和外界交流的窗口，也是本班同學相互聯系、交流的平臺。本設計是用Dreamweaver排版頁面，中間嵌入asp編程來實現各個功能。網站利用IIS-ASP構成三層式WEB結構中的中間一層，將瀏覽器/服務器結構與WEB密切結合，完成前、后端兩者的集成輸出功能。網站以互聯網信息服務(IIS)為依托，后臺采用access數據庫服務，兼容性強。本設計界面友好，功能直觀，方便用戶在互聯網上訪問本網站。
網站首頁提供一些其他常用網站的鏈接，讓用戶方便去這些網站搜集自己所要的信息。班級動態是公布班級里一些重大事務或重要通知的地方，普通用戶只可以瀏覽新聞，而管理員享有發布、修改、刪除新聞的權利。影集里是用戶存放照片的地方，用戶可以在這里瀏覽其他用戶上傳的照片，或者自己也可以上傳照片；管理員享有修改、刪除照片的權利。論壇是用來給用戶相互交流，高談闊論的地方，普通用戶只能編輯自己的帖子，而管理員則可以編輯任何人的帖子。
關鍵字：班級網站；ASP；Access；留言板
I
ABSTRACT
The net station is a window which can communicate with outside world, It's also a terrace with which classmates can get in touch with each other and communicate with other classmates.This construction used Dreamweaver to compose the interfaces and actualize every function with asp program.the net station make use of IIS-ASP to constitute the middle layer of three layers WEB framework, with which, make explorer/service and WEB combine closely, so, it can complete pre-end and back-end’s function of corpus output.the net station relay on Internet Information Server(IIS), and use the database of access ,it is strong compatible.this net station has friendly interface and it’s function is intuitivism.because of these, the customers can visit this net station with internet easily.The net station’s header provide some net station’s catenate which used often.it can help customer to collect information that he need expediently.Class dynamic is a place where the administrator will announce some important events or important notification.general customer can browse news only, and the administrator can announce, mending and delete news.there are photos in the album, the customer can browse other customer’s photo ,or spread own photos.the administrator have the obligation of modify, delete the photos.Beside these, the customers also can communicate with each other and talk volubly with the forum.General customer can only edit own article, and the administrator can edit any customer’s article.Keywords：Class Webpage;ASP;Access;Message board
II 1 緒 言
據中國互聯網絡信息中心（CNNIC）2007年4月發布的調查數據，在我國3.03億網民中，學生占到33.2%，而這其中在校學生更是網民的主體。在大學校園里，擁有個人電腦的學生與日俱增。在連上教育網的大學宿舍里，一個個學生一整天掛在網上，開著BBS，開著QQ，他們在上面憑借一個個ID瀏覽、發布信息，與人交流，甚至是與自己相距80公分的室友。BBS幾乎成為大學校園次文化的一個組成部分。特別是大學班級網站這一特殊的虛擬社區，近年來也像QQ和手機短信一樣，逐漸成為年輕人的一種時尚。
既然網絡已經融入了學生的日常生活，成為他們學習、生活中不可或缺的部分，而現實又迫切需要有新的集體建設的方式來彌補傳統班級管理的缺陷，那么能否發揮網絡的功能，服務于班集體建設便成為自然的思考。所以該論文所涉及討論的班級網站就是班級現實組織在網絡上的一種延伸和映射，建立班級網站的目的是為了探索高校班級建設的新方式，構建班級建設的新平臺。1.1 課題的可行性分析
隨著網絡信息時代的來臨，互聯網應用越來越廣泛，從網上獲取并且發布信息已成為現代計算機應用的一大特色。一個網站，是一個傳媒，也是一個窗口。普通人可以通過瀏覽各個網站，接觸到許多從書本上學不到的知識，還可以看看新聞之類當作是一種消遣。而一個企業，一個個體通過制作自己的網站，向全世界宣傳自己的產品，提供各種產品的信息供顧客參考，并兼顧銷售。這時，網站也就成為對外的窗口。同時，網站上普遍都有一些免費資源，從而達到資源共享，使得我們足不出戶都能得到想要的資料。現在很多企業、學校、乃至班級都有自己的網站，通過網站使數據處理更方便快捷，人員訪問更方便。
班級網站是使用計算機對畢業班級大學生活以及以后方便聯系而開發的系統。通過使用計算機技術、信息技術、數據庫技術，來實現遠程網絡聯系，資源共享為目標，利用先進的硬件設備，對班級網站進行一定的錯誤的調試和糾正以及網站完整性的規劃。
在該項目的可行性研究與計劃工作中，通過對網絡工作環境進行的實地調查和自己掌握的知識的程度，通過對資料的整體和對整體網站的構想和實現程度進行的全面的分析得出了結論，這個網站的任務對是完全可以達到的。主要分析如下所述：
（1）技術可行性 通過以往學習和總結得到的經驗，首先我熟練掌握了基礎軟件Dreamweaver的使用，可以使用它對網站的整體結構進行完整的設計規劃。Flash是一款很好的動畫制作軟件，可以對網頁的進一步完善起到至關重要的作用。后臺數據庫設計使用Microsoft公司提供的office軟件中自帶的Access軟件，數據表存儲格式為*.MDB。通過它對數據可以很方便的進行管理，也可以很容易的移植到其他數據庫系統中。因此，在技術上，開發班級網站是可行的。
（2）經濟可行性
對于我來說已經不用再到其他的網吧或者借用其他人的電腦來完成自己的班級網站的設計，自己可以在自己的電腦中完成對網站開發的所有工作，而且這次對班級網站的開發也是完全不需要資金的投入的，主要是時間和精力的投入，所以經濟這方面是完全可行的。
（3）人員可行性
作為班級網站的設計，我已掌握了大部分設計軟件的使用，包括Dreamweaver的使用、Flash動畫軟件的使用、Photoshop美化軟件的使用、Access數據軟件的使用、Asp知識的靈活運用等等，完全有能力成功設計出這個班級網站的。另在輔導老師的大力支持和幫助下，其他曾經參與過其他網站設計的同學等等所有的人力都已經完全大具備的情況下，實現班級網站的設計在人員上是完全可行的。
綜上所述，系統開發是完全可行的。1.2 總體設計
在總體設計中要解決的問題是“做什么”以及“怎么做”問題。總體設計的任務是：劃分出組成網頁的物理元素，如：程序、文件、數據庫、過程和文檔等。
（1）設計網頁的結構，確定中每個程序由哪些模塊組成，并確定模塊與模塊之間的關系。
（2）尋找實現目標網頁的各種不同的方案，然后從中選取合理的方案，列出組成網頁的所有物理元素，制定實現這個方案的進一步計劃。
（3）選擇一個最佳方案，并進一步為這個最佳方案設計軟件結構，進行必要的數據庫設計。
一、版面設計(Dreamweaver)Dreamweaver網頁設計軟件，它的功能非常強大，幾乎可以完成很多網頁的整體規劃。它可以連續修改一個或幾個網頁的外觀和格式，能夠顯著增強和擴展HTML元素，從而實現更少的編碼、更少的頁數和更快的下載速度。選取一個固定的版面格式，為頁面設計確定方向。
二、建立數據庫
運用Access，因其具有強大的數據倉庫，并提供了一個全面的平臺，從而使設計、建立、維護和使用數據倉庫解決方案變得迅速而輕松，這樣的數據倉庫解決方案讓決策過程在準確的信息基礎上更為有效。在邏輯結構基本確定之后，再根據應用需要對設計結構進行適當的修改和調整以期進一步完善設計，提高應用系統的性能。這種修改和調整包括以下這兩個方面：
（1）增加必要的冗余數據。
（2）如果經常要做的查詢是兩個關系的連接，則可以考慮是否可以將兩個關系合并為一個關系。
數據試運行合格后，數據開發工作就基本完成，即可投入正式運行了。但是，由于應用環境在不斷變化，數據運行過程中物理存儲也會不斷變化，對數據設計進行評價、調整、修改等維護工作是一個長期的任務，也是設計工作的繼續和提高。1.3 網站設計思想
通過班級網站，全面宣傳，展示班級風采、優點與特色，發布班級的重大活動安排，增強同學之間的相互聯系，提高辦事效率。相關技術
本系統是以Asp技術，以DreamWeaver 8.0、Micromedia Flash 8.0、Adobe photoshop8.0作為開發工具，Access數據庫管理為基礎而設計的一個班級網站。2.1 Asp簡介
2.1.1 Asp的優勢
在制作本系統過程中的一個至關重要的環節就是網頁的制作。而在當今世界上，用于制作網頁的工具比比皆是，如ASP、PHP、JSP等等。但我之所以選擇ASP制作本系統,原 因在于asp是微軟公司最為流行的開放式的Web服務器應用程序開發技術，它相對于其他網頁制作工具具有自己獨特的優勢,是一套微軟開發的服務器端運行的腳本平臺。
與一般的程序不同，.asp 程序無須編譯，ASP 程序的控制部份，是使用 VBScript、JScript 等腳本語言來設計的，當執行 ASP 程序時，腳本程序將一整套命令發送給腳本解釋器(即腳本引擎)，由腳本解釋器進行翻譯并將其轉換成服務器所能執行的命令。當然，同其他編程語言一樣，ASP 程序的編寫也遵循一定的規則，如果你想使用你所喜愛的腳本語言編寫 ASP 程序，那么你的服務器上必須要有能解釋這種腳本語言的腳本解釋器。當你安裝 ASP 時，系統提供了兩種腳本語言： VBsrcipt 和 JScript，而 VBscript 則被作為系統默認的腳本語言。ASP 本身并不是一種腳本語言，它只是提供了一種使鑲嵌在 HTML 頁面中的腳本程序得以運行的環境。因此，我使用asp作為制作本網站的主要技術和工具，一方面符合了現階段制作網頁的流行趨勢，很好地做到了與世界前沿的接軌，可以最大限度地利用世界上現有的動態網頁資源，豐富制作手段；另一方面使用asp制作這個系統，可以最大化地發揮asp技術的優勢，簡化制作程序，減少工作時間，降低制作成本，這也是本文選擇ASP作為開發工具最重要的原因之一。
2.1.2 Asp的特點
（1）任何開發工具皆可開發ASP
只要使用一般的文書編輯程序，如Windows記事本，就可以編輯。當然，其他網頁開發工具，例如，FrontPage Express、FrontPage等也都可以。
由于ASP程序是在網絡服務器端中執行，執行結果所產生的HTML文件適用于不同的瀏覽器。
（2）語言相容性高
ASP與所有的ActiveX Script語言都相容，除了可結合HTML，VBScript、Java Script、Active X服務器組件來設計外，并可經由“plug-In（外掛組件模組）的方式，使用其他廠商（Third Party）所提供的語言。
（3）隱密安全性高
如果我們在瀏覽器中直接查看網頁的原始代碼，就只能看到HTML文件，原始的ASP程序代碼是看不到的！這是因為ASP程序先于網站服務（Web Server）端執行后，將結果轉換成標準HTML文件，再傳送到客戶端（Client）的瀏覽器上，因此，我們所辛苦撰寫的ASP程序并不會輕易地被看見進而被盜用。（4）易于操控數據庫
ASP可以輕易地通過ODBC(Open Database Connectivity)驅動程序連接各種不同的數據庫，例如：Acess、Foxpro、dBase、Oracle等等，另外，ASP亦可將“文本文件”或是”Excel” 文件當成數據庫用。
（5）面向對象學習容易
ASP具備有面向對象（Object-Oriented）功能，學習容易，ASP提供了五種方便能力強大的內建對象：Request、Response、Sever、Application以及Session，同時，若使用ASP內建的“Application”對象或”Session”對象所撰寫出來的ASP程序可以在多個網頁之間暫時保存必要的信息。2.2 Macromedia Dreamweaver 8簡介
Dreamweaver是由美國MACROMEDIA公司開發的，是集網頁制作和管理網站于一身的網頁編輯器，它是目前市場上有關網頁設計、制作功能非常強大的軟件，操作界面友好，可擴展性能強，是網頁設計制作領域的主流工具。
由于Dreamweaver工作區是非常靈活的，因此它可以適應各種不同的工作風格和使用水平。常用的Dreamweaver工作區組件有以下若干種：
(1)文檔窗口可顯示當前文檔，文檔的外觀和瀏覽器中看到的非常相似。(2)裝載器中包含一些打開和關閉常用檢查器和模板的按鈕。
(3)對象工具欄包含創建不同類型的對象（例如圖象、表格和層等）的按鈕。(4)屬性檢查器顯示選定對象的屬性。
(5)快捷菜單可以使用戶對當前選擇或區域快速執行某些命令。
(6)可固定的浮動工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中。
2.3 Micromedia Flash 8.0 FLASH是Macromedia公司出品的，用在互聯網上動態的、互動的shockwave。它的優點是體積小，可邊下載邊播放，這樣就避免了用戶長時間的等待。
FLASH可以用其生成動畫，還可在網頁中加入聲音。這樣你就能生成多媒體的圖形和界面，而使文件的體積卻很小。
不僅如此，FLASH用其內置語句并結合JAVASCRIPE，還可作出互動性很強的主頁。但 是，必須安裝插件PLUG-IN，才能被瀏覽器所接受。2.4 Adobe Photoshop8.0 Photoshop 8.0是目前最流行的圖形、圖像編輯設計軟件，在數碼影像處理、圖像編輯合成、廣告設計、封面設計、美術繪畫、網頁設計等領域都被廣泛地應用。Photoshop 8.0的主要特點是：
(1)文字處理更加方便。(2)使圖層管理更有序。
(3)新增圖像功能：圖像的剪切和剪裁更加方便。
(4)將所有工具的選項板改進為工具選項欄放置在工作區頂部，方便先項參數的設置。(5)為了更方便地用路徑繪畫，改進增加了幾何形狀工具，通過選擇工具的不同工作模式，可創建路徑、幾何形狀或幾何填充區，使得矢量繪圖功能得到了加強。2.5 Access數據庫的簡介
2.5.1 Access數據庫概述
數據庫是有結構的數據集合,它與一般的數據文件不同，是一串文字或數字流。數據庫中的數據可以是文字、圖象、聲音等。
Microsoft Access是一種關系式數據庫，關系式數據庫由一系列表組成，表又由一系列行和列組成，每一行是一個記錄，每一列是一個字段，每個字段有一個字段名，字段名在一個表中不能重復。表與表之間可以建立關系（或稱關聯，連接），以便查詢相關聯的信息。Access數據庫以文件形式保存，文件的擴展名是DB。
2.5.2 Access數據庫的優點
Access 是微軟公司推出的基于Windows的桌面關系數據庫管理系統（RDBMS），是Office系列應用軟件之一。Access是一種關系型數據庫管理系統，其優點如下：
(1)完善地管理各種數據庫對象，具有強大的數據組織、用戶管理、安全檢查等功能。(2)強大的數據處理功能，在一個工作組級別的網絡環境中，使用Access開發的多用戶數據庫管理系統具有傳統的XBASE（DBASE、FoxBASE的統稱）數據庫系統所無法實現的客戶服務器(Cient/Server)結構和相應的數據庫安全機制，Access具備了許多先進的大型 數據庫管理系統所具備的特征，如事務處理/出錯回滾能力等。
(3)可以方便地生成各種數據對象，利用存儲的數據建立窗體和報表，可視性好。(4)作為Office套件的一部分，可以與Office集成，實現無縫連接。
(5)能夠利用Web檢索和發布數據，實現與Internet的連接。Access主要適用于中小型應用系統，或作為客戶機/服務器系統中的客戶端數據庫。
2.5.3 ADO數據訪問技術
連接一個本地數據庫或遠程數據庫。打開一個指定的數據庫表，或定義一個基于結構化查詢語言(SQL)的查詢、或存儲過程、或該數據庫中的表的視圖的記錄集合。將數據字段的數值傳遞給數據綁定的控件，可以在這些控件中顯示或更改這些數值。添加新的記錄，或根據對顯示在綁定的控件中的數據的任何更改來更新一個數據庫。
ADO連接數據庫的通用代碼：（1）添加的代碼為：
<%Conn.execute(“insert into tab data**)values('**','**')”)
Conn.close
set Conn=nothing response.Redirect(“datalist.asp”)
%>（2）刪除的代碼為：
<%Conn.execute(“delete * from tab data where id=”+request.QueryString(“did”))'Response.Write(“delete * from tab data where id=”+request.QueryString(“did”))Conn.close
set Conn=nothing
response.Redirect(“datalist.asp”)
%> 3 網站總體分析與設計
3.1 網站系統分析
根據前面的設計思想進行分析，按照系統開發的基本觀點對網站進行分解，欄目的實質是一個網站的大綱索引，索引應該將網站的主體明確顯示出來。因此我將自己的班級網站分為五個欄目：
（1）班級首頁
通過一定的flash動畫設計和動態的文字實現首頁的展示，從側面反映班級的和睦和 團結。
（2）班級風采
通過班級體、校內外的趣事、宿舍間的故事展現班級體，從中多數是以照片和文字結合的效果來展現的。
（3）音樂
在其中展示個人喜歡的歌曲，朋友們可以在里面點播自己喜歡的歌。（4）美文
在其中展示個人喜歡的文章，朋友們可以在里面欣賞到經典的文章。（5）留言板
是一個我與大家談心交流的地方，在留言板中，我們可以暢所欲言，就我們感興趣的話題展開討論，和大家進行溝通。3.2 網站數據庫詳細設計
一、用戶表yh 存儲了用戶的檔案包括：id、name、ly、hf、lytime等。id字段采用自動編號，為該表的主關鍵字；name字段為留言者的名稱；ly字段為留言的內容；hf字段為管理員進行回復的內容；lytime字段代表留言的時間。它的設計視圖如下圖3-1所示。
圖3-1 yh表
二、管理員表admin 管理員表是為管理員服務的，該表包括字段為id、name、password字段。其中id為主關鍵字，name和password分別代表用戶名和密碼。它的設計視圖如下圖3-2所示。
圖3-2 admin表 以上數據表為Access類型的庫文件，將它定名為：“ly.mdb”。3.3 每個頁面的詳細設計
3.3.1 網站主頁
網站主頁采用靜、動相結合的方式，即靜態的主畫面和動態的flash動畫相結合以及滾動的消息條相組合而成，以蛋黃色為背景色，充分體現班級的勃勃生氣，靜態的圖片起到了一定的承托動態文字的作用,起到了一定的美化作用，而動態的文字就得利用到了JavaScript 等腳本語言來設計的,使之可以實現移動的效果也利用Dreamweaver實現了鏈接的功能。
班級網站的主頁面構圖如下圖3-3所示，首頁中導航欄包含了如網站首頁、班級相冊、音樂天地、美文欣賞、留言板等板塊，從多方面展示網站作者的生活動態。
圖3-3 網站首頁
1、flash的制作
主頁的大篇幅被一個flash占據,并且我使用flash實現了它對其他班級網站頁面的鏈接,該flash給人以一種新鮮活潑的感覺,充分的反應了當代大學生的積極樂觀的風貌,在該flash中點擊一定的頁面內容都會出現一定的動畫效果,可以給每一個瀏覽該頁面的人一種輕松愉悅的心情。3.3.2 音樂欣賞
音樂欣板塊供瀏覽者在閑暇之余享受到一份安寧，用淡淡的紫色作為背景給人一種舒心的感覺。在這個板塊中添加的主要音樂有我校校歌，陽光總在風雨后等一些激勵的歌曲，同時通過點擊不同的音樂還會伴隨著歌詞的出現，該板塊頁面如下圖3-4所示。
圖3-4 音樂界面
音樂欣賞界面的核心代碼為：
3.3.3 班級相冊模塊班級相冊主要展示我們班級同學的精神面貌，以及展現出我們班級和諧相處，互敬互愛的高尚素質。班級相冊頁面如下圖3-5所示。
圖3-5 班級相冊 班級相冊主要是采用Micromedia Flash 8.0技術制作的，自制動畫是由四個圖層組成，主要使用動作補間動畫和形狀補間動畫制成。動作補間動畫的原理是根據實例屬性的變化來形成動畫效果。它的前提條件是對象必須是一個元件的實例、文本或組；分離的對象不能形成動作補間動畫。對于在舞臺上繪制的圖形，一定要將圖形組合或轉換為元件之后，才能形成動作補間動畫。動作補間動畫實際上就是給一個對象的兩個關鍵幀分別定義不同的屬性，如大小、顏色、位置、角度以及透明度等，在這兩個關鍵幀之間建立一種變化關系。形狀補間動畫是根據對象的形狀變化來實現的動畫，只需要給出動畫的第一幀和最后一幀的對象形狀，中間的動畫過程由系統自動生成。實現形狀動畫的前提條件是，對象必須為矢量圖形。班級相冊頁面的核心代碼如下：
stop();//動畫開始時停止
var i:Number = 1;//設置變量i的初始值為1 prev_mc.gotoAndStop(2);//“prev_mc”影片，開始讓它停止在第2幀，讓按鈕變成灰色并失去作用，因為動畫開始時沒有上一張圖片
onEnterFrame = function(){//運行每一幀時執行以下函數
片
if(_root._currentframe == 11){//如果主場景播放到第11幀
} if(_root._currentframe == 20){//如果主場景播放到第20幀
} gotoAndStop(2);//主場景動畫停止在第2幀
pictures.gotoAndStop(i);//“pictures”影片停止在第i幀，從第11幀出現第i張圖
next_mc.next_btn.onRelease = function(){//“next_mc”影片中的按鈕在釋放時執行以
if(i<28){//如果變量i小于28（“pictures”影片中只有5張圖片）
下函數
i++;//每點擊“next_mc”影片中的按鈕時變量i遞增1，“pictures”影片也跳轉 到下一幀
prev_mc.gotoAndStop(1);//“prev_mc”影片停止在第1幀，即讓按鈕變黑并起
作用，因為此時有了上一張圖片
} play();//主場景動畫開始播放 if(i == 28){//如果變量i等于28
next_mc.gotoAndStop(2);//“next_mc”影片停止在第1幀，即讓按鈕變成灰色
并失去作用，因為此時沒有下一張圖片
};} prev_mc.prev_btn.onRelease = function(){//“prev_mc”影片中的按鈕在釋放時執行以
if(i>1){//如果變量i大于1
下函數
i--;//每點擊“prev_mc”影片中的按鈕時變量i遞減1，“pictures”影片也跳轉 到上一幀
next_mc.gotoAndStop(1);//“next_mc”影片停止在第1幀，即讓按鈕變黑并起
作用，因為此時有了下一張圖片
} play();//主場景動畫開始播放
if(i == 1){//如果變量i等于1
prev_mc.gotoAndStop(2);//“prev_mc”影片停止在第2幀，即讓按鈕變成灰色
并失去作用，因為此時沒有上一張圖片
};3.3.4 美文模塊 };} 美文，顧名思義就是美好的文辭。美文，顧名思義就是美好的文辭。有人把美文比作一杯好茶，看著舒雅，泡在杯里，茶葉慢慢地舒展開來，一股淡淡地清香猶如裊裊升起的飲煙，撩拔起心中的欲想，于是情不自盡地想品上一口，幾許苦澀，幾許甘甜，從口中一直向心田傳去。
該模塊主要包括友誼是一棵樹、做個努力的人、我們學會感恩等一些文章，該模塊左邊有一個導航欄目，通過點擊不同的美文可以在頁面查看該文章的內容。該模塊的頁面如下圖3-6所示。
圖3-6 美文界面
美文界面的核心代碼如下所示：
…………………………………………………………………………………………………………………………………
友誼是一株樹
忙的時候，想要休息；
度假的時候，想到未來。
窮的時候，渴望富有；
生活安逸了，怕幸福不能長久。
該決定的時候，擔心結果不如預期；
看明白了，后悔當初沒有下定決心。
不屬于自己的，常常心存欲望；
握在手里了，又懷念未擁有前的輕松。
生命若不是現在，那是何時？
一個人可以毫無道理跟你做一輩子親戚,但
一個人不會毫無道理跟你做一輩子朋友
我會想起與你們認識的種種.
也會想起發生過的點點滴滴.
直到我們都年老時是否會像現在這樣坐在電腦前互訴心聲？
不管如何,希望我們永遠是真誠相對的朋友(知己)
朋友就是喜歡你也了解你的人
愿你都能珍惜身邊每一個朋友
因為你我有緣份，才能成為朋友
可以成為知己的，更難得！
時間未必是你我成為知己的原因
但一定可以證明到
你對朋友的關懷不是白費！
3.3.5 留言模塊本板塊由發表留言和查看留言兩部分組成。查看留言結果為網頁lyxs.asp，用來顯示用戶發言的內容；發表留言為頁面zxly.asp，大家可以暢談自己的想法。留言板與數據庫book.mdb相連，其中數據庫連接頁面conn.asp
點擊咨詢 