基于ASP技術(shù)的留言板的開與研究

1、基于ASP技術(shù)的留言板設(shè)計姓名：卜凱 學(xué)號：2 指導(dǎo)老師：余世干摘要：在網(wǎng)絡(luò)技術(shù)發(fā)展迅速的今天，作為能夠支持網(wǎng)絡(luò)用戶相互交流的網(wǎng)絡(luò)留言板越來越得到各大網(wǎng)站的廣泛使用，在本次設(shè)計的網(wǎng)絡(luò)留言板系統(tǒng)中，通過ASP和SQL SERVER 技術(shù)實現(xiàn)網(wǎng)絡(luò)留板中的動態(tài)功能，同時使用XHTML和DIV+CSS層疊式樣表技術(shù)設(shè)計留言板系統(tǒng)的界面和風(fēng)格，結(jié)合使用Microsoft Office Access 2003建立數(shù)據(jù)庫實現(xiàn)后臺管理。通過測試，網(wǎng)站不僅擁有游客注冊、會員登陸、發(fā)帖回帖等基本功能，而且還可以支持添加好友、發(fā)送信息、贈送花朵、改變網(wǎng)站風(fēng)格等功能，同時在設(shè)計該系統(tǒng)時加入了管理員系統(tǒng)，管理員不但能夠

2、能對網(wǎng)站系統(tǒng)進行設(shè)置，并且可以對會員用戶進行資料修改，刪除惡意注冊用戶。以上功能的實現(xiàn)均與系統(tǒng)設(shè)計的預(yù)期一致，希望該網(wǎng)絡(luò)留言板能夠給廣大網(wǎng)民帶來方便。關(guān)鍵詞：ASP，留言板，網(wǎng)站，管理員The Message Board Design Based On ASP TechnologyName:Kai Bo Number:2 Advisor:Shigan YuAbstract: The rapid development in network technology today, as the support network of Internet users to exchange message

3、 board has been more widespread use of Web sites, in this Internet message board system designed in ASP and SQL SERVER through the network technology to stay Board of the dynamic function, while using XHTML and cascading style sheet DIV + CSS technology design message board system interface and styl

4、es, combined with Microsoft Office Access 2003 to establish a database to achieve Admin. Pass the test site not only has a tourist up, Login, post Replies and other basic functions, but also can support add friends, send messages, gift flowers, change the site style, features, and join in the design

5、 of the system administrator system , The administrator of the website system not only can be set, and the members of the user data can modify, delete malicious registered users. Implementation of these features are consistent with the expected design, I hope the network message board can bring conv

6、enience to our users.Keywords: ASP, message board, website, administrator1 系統(tǒng)需求分析1.1任務(wù)概述開發(fā)出的網(wǎng)絡(luò)留言板系統(tǒng)應(yīng)該具備很強的開放性、擴展性和安全性，同時能夠便捷的對用戶資料進行查詢管理對網(wǎng)站上的不文雅詞匯進行過濾，屏蔽可能出現(xiàn)的安全隱患，讓注冊用戶可以有一個輕松自在的網(wǎng)上互動交流的站點。1.2 系統(tǒng)功能分析1.2.1系統(tǒng)用戶系統(tǒng)用戶主要有游客、注冊用戶、管理員三種，詳見圖1-1所示。用戶游客管理員系統(tǒng)注冊用戶圖1-1系統(tǒng)用戶圖1.2.2系統(tǒng)用戶功能游客是用戶里面權(quán)限最低的。只可以查看已發(fā)布的文章和已注冊博友

7、，無法進行其他操作，不用注冊。注冊用戶是已經(jīng)注冊用戶，可以添加其他注冊用戶為好友，發(fā)送信息，修改自己的個人信息，發(fā)帖回帖。用戶組的用例圖如圖1-2所示。游客查看文章注冊個人資料管理，添加好友發(fā)帖回帖發(fā)信息，送花朵圖1-2 用戶組的用例圖管理員組：管理員權(quán)限比注冊用戶高。他們不但可以對注冊用戶進行管理而且可以對網(wǎng)站進行管理。管理包括修改改會員信息、刪除會員、過濾敏感詞匯、設(shè)置網(wǎng)站外觀以及文章顯示、改變網(wǎng)站名稱、關(guān)閉網(wǎng)站，和關(guān)閉網(wǎng)站注冊。當(dāng)然，他們也可以像一般用戶那樣填寫留言和修改個人資料。以上各種操作也必須經(jīng)過登錄驗證以后，但是值得注意的是權(quán)限相同的管理員不能夠?qū)Ρ舜诉M行操作，管理員組的用例圖如

8、圖1-3所示。管理員修改用戶資料刪除注冊用戶過濾敏感詞匯設(shè)置網(wǎng)站外觀關(guān)閉注冊和關(guān)閉網(wǎng)站修改網(wǎng)站名 圖1-3 管理員組的用例圖1.3性能需求可以在windows的任何版本的操作系統(tǒng)下運行。可以在IE，火狐等瀏覽器上兼容流暢運行。1.4數(shù)據(jù)描述利用Access來設(shè)計數(shù)據(jù)庫，使程序數(shù)據(jù)添加使用更加容易。（1）用戶表：此表用于存放用戶的所有注冊信息，同時管理員的信息也存放在此表中。（2）文章表：此表存放發(fā)布文章的內(nèi)容和回帖的內(nèi)容。（3）網(wǎng)站表：此表存放網(wǎng)站設(shè)置信息，供管理員使用。（4）贈花表：存放會員間送花的信息。（5）好友表：存放好友添加情況信息。（6）信息表：存放好友發(fā)送信息的情況。2 系統(tǒng)開發(fā)工

9、具介紹以及運行環(huán)境要求2.1 ASP技術(shù)簡介2.1.1 ASP優(yōu)勢Active Server Pages：“動態(tài)服務(wù)器網(wǎng)頁”，通常我們簡稱為“ASP”，我們之所以接受并且重視ASP的原因，主要在于其在客戶端產(chǎn)生的網(wǎng)頁代碼都是標(biāo)準(zhǔn)的HTML格式，而且這些程序是在服務(wù)器端執(zhí)行，使用一般的瀏覽器（如IE 或火狐）都可以正確地獲得ASP的“執(zhí)行”結(jié)果，并且這些ASP執(zhí)行的結(jié)果都可以直接在瀏覽器中“瀏覽”。2.1.2 ASP特點（1）使用簡單的文件編輯器就可以創(chuàng)建和編輯ASP程序。（2）ASP的源代碼不會被傳送到客戶的瀏覽器，安全性高。（3）ASP可使服務(wù)器端的腳本程序來自動生成客戶端的腳本代碼。（4）

10、ASP提供了后臺數(shù)據(jù)庫連接和訪問的功能。（5）使用簡單的VBScript和Javascript結(jié)合XHTML代碼即可快速方便的WEB網(wǎng)站。2.2 系統(tǒng)數(shù)據(jù)庫的分析2.2.1 SQL語言的基本功能和特點SQL全稱是“結(jié)構(gòu)化查詢語言(Structured Query Language)” ，他是集數(shù)據(jù)查詢（Data Query）、數(shù)據(jù)操控（Date Manipulation）、數(shù)據(jù)定義（Date Definition）和數(shù)據(jù)控制（Date Control）功能于一體，主要特點包括：（1）高度非過程化的語言。（2）統(tǒng)一的語言。（3）面向集合的操作方式。（4）以同一種語法結(jié)構(gòu)提供多種使用方式。（5）語

11、法簡介易學(xué)易用。2.2.2 數(shù)據(jù)庫開發(fā)工具Access的分析（1）存儲方式簡單，易于維護管理。（2）面向?qū)ο?Access是一個面向?qū)ο蟮拈_發(fā)工具。（3）界面友好、易操作。（4）集成環(huán)境、處理多種數(shù)據(jù)信息。（5）Access支持ODBC（開發(fā)數(shù)據(jù)庫互連，Open Data Base Connectivity）。（6）支持廣泛，易于擴展，彈性較大。2.3 XHTML介紹XHTML是Extensible HyperText Markup Language(可擴張超文本標(biāo)記語言)的英文縮寫，它的前身是HTML。由于HTML代碼繁瑣，結(jié)構(gòu)松散，所以推出XHTML，也可以說XHTML是HTML的一個升級

12、版本，它是網(wǎng)頁制作的基礎(chǔ)，它的核心是標(biāo)簽，不管是何種軟件制作網(wǎng)站，實際是都是在編寫XHTML代碼的過程。2.4 DIV+CSS技術(shù)解釋DIV+CSS是目前比較流行的網(wǎng)頁布局方式，而它本身也具備相較于其他布局方式突出的優(yōu)點：（1）CSS可以使網(wǎng)頁的代碼大范圍的的簡潔，對于一個大型網(wǎng)站來說，可以大幅度的節(jié)省帶寬，由于代碼的簡潔，使關(guān)鍵字在網(wǎng)頁中代碼中的比列升高，更受搜索引擎喜愛。（2）使用DIV+CSS技術(shù)制作的網(wǎng)站，在網(wǎng)站改版的時候更加簡單方便，很多問題只要改變CSS而不需要改動程序。（3）可以更好更輕松的控制網(wǎng)頁的布局。（4）將CSS文件存放在單獨的樣式表文件中，可以減少網(wǎng)頁無效的可能性。雖然

13、DIV+CSS在網(wǎng)頁布局上優(yōu)勢明顯，但是問題同樣也存在，它不但對于CSS高度依賴，而且會使網(wǎng)頁設(shè)計變的復(fù)雜，容易出現(xiàn)瀏覽器兼容問題。2.5 EditPlus 3方便好用的代碼編輯器，可以對代碼進行加色擁有自動換行等功能。2.6 運行環(huán)境Microsoft Windows sever 2003 ，IIS5.13 網(wǎng)站總體設(shè)計3.1 網(wǎng)站的總體結(jié)構(gòu)網(wǎng)站總體設(shè)計思想:前臺和后臺分離，數(shù)據(jù)和程序分離的設(shè)計思想。3.1.1 前臺頁面設(shè)計前臺設(shè)計圖如圖3-1所示。留言網(wǎng)系統(tǒng)送花管理信息管理文章管理博友管理資料管理首頁管理圖3-1前臺設(shè)計圖3.1.2 后臺頁面設(shè)計后臺設(shè)計圖如圖3-2所示。留言網(wǎng)后臺設(shè)計圖留

14、言管理用戶管理系統(tǒng)設(shè)置敏感字管理網(wǎng)站設(shè)置圖3-2后臺設(shè)計圖3.2 網(wǎng)站實際效果網(wǎng)站包括首頁，注冊，登陸，會員中心，管理中心，博友，數(shù)據(jù)庫等各項組成。通過主頁使每一個瀏覽者都能很快地看到所有人發(fā)布的文章，找到自己喜歡的內(nèi)容如果是已注冊用戶還可以進行回復(fù)。網(wǎng)站主頁如圖3-3所示：圖3-3網(wǎng)站主頁面3.3 系統(tǒng)文件說明系統(tǒng)中存在大量文件為了方便辨別和記憶其功能，所以制作了系統(tǒng)文件說明表，如表3-1所示。表3-1文件說明文件名文件功能說明db 存放數(shù)據(jù)庫的文件夾emotions發(fā)表留言上的表情選擇face會員頭像存放文件夾images網(wǎng)站中背景等應(yīng)用圖片的文件夾js存放Javascript的文件夾ki

15、nd文章各種標(biāo)題圖片文件夾pic存放發(fā)布文章圖片的文件夾qemotions存放發(fā)布文章插入Q圖的文件夾style 存放CSS網(wǎng)站排版的文件夾ubb存放發(fā)布文章的中功能圖片admin.asp后臺服務(wù)器信息界面代碼admin_set.asp系統(tǒng)設(shè)置界面代碼admin_sidebar.asp會員管理界面?zhèn)冗厵诖aadmin_vip.asp會員管理界面代碼admin_vip_del.asp實現(xiàn)管理員刪除會員功能代碼admin_vip_mof.asp管理員進行修改會員信息界面代碼admin_vip_mof_do.asp實現(xiàn)管理員修改會員信息代碼article.asp發(fā)布文章界面代碼blog.asp博友界

16、面代碼code.asp驗證碼程序代碼conn.asp數(shù)據(jù)庫實例創(chuàng)建連接銷毀以及敏感詞過濾代碼face.asp會員注冊時選擇頭像界面flower.asp會員查看花朵界面代碼footer.asp網(wǎng)站底界面代碼friend.asp會員查看好友界面代碼header.asp網(wǎng)站頭界面代碼index.asp網(wǎng)站首頁代碼login.asp登陸界面代碼login_do.asp實現(xiàn)會員登陸功能的代碼logout.asp登出系統(tǒng)的代碼md5.asp注冊用戶密碼在數(shù)據(jù)庫中加密的文件member.asp個人中心首頁代碼member_flower.asp個人中心查看花朵界面代碼member_friend2.asp個人中

17、心查看我添加好友界面的代碼member_friend.asp個人中心查看添加我的好友界面的代碼member_friend_del.asp個人中心實現(xiàn)拒絕別人添加自己好友的代碼member_friend_val.asp個人中心實現(xiàn)接受別人添加自己好友的代碼member_info.asp個人中心個人資料界面代碼member_info_do.asp個人中心實現(xiàn)資料修改的代碼member_note2.asp個人中心短信管理發(fā)件箱的代碼member_note.asp個人中心短信管理收件箱的代碼member_note_d.asp個人中心短信管理查看短信界面代碼member_note_del.asp個人中心

18、短信管理實現(xiàn)刪除短信功能的代碼member_sidebar.asp個人中心側(cè)邊欄界面的代碼note.asp會員相互發(fā)短信息界面的代碼post.asp回帖界面代碼post_do.asp實現(xiàn)新增文章功能代碼qemotions.asp文章發(fā)布時候選擇表情圖片reg.asp注冊界面代碼reg_do.asp實現(xiàn)注冊信息驗證并且寫入數(shù)據(jù)庫代碼repost_do.asp實現(xiàn)回帖的代碼skin.asp網(wǎng)站皮膚選擇器title.asp網(wǎng)站名稱以及網(wǎng)站整體CSS樣式選擇代碼ubb.asp發(fā)布文章中UBB解析器body.Fix Head.Fix驗證碼文件4 網(wǎng)站的數(shù)據(jù)庫設(shè)計4.1 數(shù)據(jù)表的概要說明數(shù)據(jù)庫中的表如圖4

19、-1所示。圖4-1數(shù)據(jù)庫中表圖4.2數(shù)據(jù)庫連接為了防止代碼重復(fù)使用，使代碼重用性與維護的方便性，本系統(tǒng)采用ASP的文件包含語法，將數(shù)據(jù)庫連接代碼放在conn.asp中，在需要使用的時候，只要通過文件名調(diào)用即可。具體方法：<!-#include >。在本系統(tǒng)其他幾處重用代碼中都運用了此方法，方法語法一樣，<!-#include file=“文件名.asp”->運用了此方法后，使系統(tǒng)模塊化，程序更加簡潔，便于修改和維護。4.3主要的數(shù)據(jù)表結(jié)構(gòu)表 G_User.mdb中存放注冊信息和會員等級等,如圖4-2所示。圖4-2 G_User.mdb設(shè)計視圖表 G_Article.md

20、b中存放文章信息，如圖4-3所示。圖4-3 G_Article.mdb設(shè)計視圖表 G_Friend.mdb中存放添加好友信息，如圖4-4所示。圖4-4 G_Article.mdb設(shè)計視圖表 G_Flower.mdb中存放送花信息，如圖4-5所示。圖4-5 G_Flower.mdb設(shè)計視圖表 G_Note.mdb中存放送花信息，如圖4-6所示。圖4-6 G_Note.mdb設(shè)計視圖表 G_Web.mdb中存放管理員管理項目信息，如圖4-7所示。圖4-7 G_Web.mdb設(shè)計視圖5 主要界面設(shè)計及功能介紹5.1 論壇首頁設(shè)計論壇首頁可以看到網(wǎng)站名“502留言網(wǎng)”，在網(wǎng)站右邊上方是有網(wǎng)站風(fēng)格點擊可

21、以看到三種網(wǎng)站風(fēng)格，分別是：藍(lán)顏知己、在首頁我們可也看到一個游客訪問該網(wǎng)站所具有的權(quán)限，在文章列表一欄的發(fā)表留言選項，只有登陸用戶才可以點擊進入，沒有登陸的會告知請先登陸，該頁面設(shè)計如圖5-1所示。圖5-1首頁視圖5.2 注冊界面設(shè)計對于游客來說很多網(wǎng)站功能都無法實現(xiàn)，所以這時候就需要注冊成為注冊用戶了，在注冊界面可以輕松完成注冊，值得注意的是由于在注冊信息上使用了ASP的判斷，使得用戶在注冊時候?qū)τ脩羲顚懶畔⒂幸欢ǖ呐袛?，在一定程度上防止用戶惡意注冊，注冊信息虛假，注冊信息過于簡單，易于被黑客所盜取注冊信息，注冊界面如圖5-2示。圖5-2用戶注冊界面視圖5.3 注冊用戶登陸界面設(shè)計已經(jīng)注冊

22、過用戶可通過登陸界面登陸留言板網(wǎng)站系統(tǒng)，以獲得更好的網(wǎng)站使用權(quán)限，為了給用戶更多的使用方便，在設(shè)計時采用了保留cookies時間的方法，以獲得保留登陸效果的功能，設(shè)計更人性化，登陸界面如圖5-3所示。圖5-3用戶登陸界面視圖5.4會員中心頁面界面設(shè)計會員中心界面，我可以看到右邊側(cè)欄上有6個選項，這都是會員可以查看和管理的，會員可以通過資料修改來修改自己注冊時除用戶名之外的所有資料，短信管理中我們可以查看自己發(fā)送給別人的信息，也可以看別人給自己的信息，可以對短信進行刪除操作，好友管理中用戶可以看到別人向自己發(fā)送的添加好友請求，用戶可以選擇接受或者拒絕，也可查看自己申請別人好友的狀態(tài)。在查看花朵界

23、面中可以查看別人送給自己花朵的情況，進而判斷自己在該網(wǎng)站中受歡迎的程度，會員中心界面如圖5-4所示。圖5-4會員中心界面視圖5.5 博友界面設(shè)計用戶可以通過博友界面看到所有已注冊用戶，并且可以給感興趣的用戶發(fā)信息，送花朵還可以加好友，為了使用戶使用更方便，在博友界面中加入了搜索功能，有精確和模糊兩種方式，可以讓用戶更快更便捷的找到已經(jīng)注冊的會員，設(shè)計界面如圖5-5所示。圖5-5博友界面視圖5.6管理員界面設(shè)計管理員登陸會有管理員界面，本留言板系統(tǒng)管理員是在系統(tǒng)設(shè)計時候直接添加到數(shù)據(jù)庫中的，有2個管理員，用戶名字分別是“海賊王”和“admin”，密碼都是123456，管理員帳號登陸界面會有一個管

24、理選項，進入管理界面，右邊側(cè)欄分別有三項，點擊后臺首頁會顯示網(wǎng)站服務(wù)器的基本信息，進入系統(tǒng)設(shè)置管理員可以給網(wǎng)站進行一些基本設(shè)置，如網(wǎng)站名的修改，敏感字的過濾，網(wǎng)站默認(rèn)風(fēng)格的修改，網(wǎng)站的關(guān)閉。在會員管理中管理員可以對惡意會員進行刪除操作，也可以修改會員資料，前提是該會員不是管理員，管理員界面設(shè)計如圖5-6所示。圖5-6管理員界面視圖6用戶操作說明本設(shè)計網(wǎng)絡(luò)留言板系統(tǒng)，功能明了操作簡單，敘述如下：（1）非注冊用戶可以查看發(fā)布的帖子和別人回的帖子，但是無權(quán)發(fā)帖或者回帖。（2）游客可以通過注冊頁面按照要求進行注冊。（3）用戶注冊后就可以實現(xiàn)網(wǎng)站的發(fā)信息，加好友，發(fā)帖回帖，個人資料修改等功能。7系統(tǒng)測試

25、7.1 游客測試網(wǎng)站發(fā)布成功后，進入網(wǎng)站首頁，此時用戶未登陸，即是游客。在主頁上有首頁、注冊、登陸、博友等選項，下方有文章列表，用戶可以查看文章，但是無權(quán)發(fā)表文章和回復(fù)文章。若用戶是未注冊用戶，可以點擊注冊界面進行注冊，若用戶已經(jīng)注冊過，可以直接用自己的帳號進行登陸。7.2 會員測試當(dāng)游客用已注冊帳號登陸后，即會進入會員界面，和游客界面不同的是，在主頁上沒有了注冊和登陸選項，取而代之的是會員中心和退出選項。同時在博友界面，發(fā)信息和送花朵加好友功能都可以實現(xiàn)，在首頁文章列表右上方點擊發(fā)表文章按鈕，會進入發(fā)表文章界面，可以發(fā)表新的文章，同時點擊文章進入后，會在文章最下方發(fā)現(xiàn)回復(fù)主題的的界面，寫好內(nèi)

26、容點擊發(fā)布即可回復(fù)主題。在點擊進入會員中心界面后，可以查看添加好友情況，自己收到花的情況以及發(fā)送信息和收到信息情況，同時也可以修改自己的資料。7.3 管理員測試在設(shè)計系統(tǒng)時，添加了兩個管理員，用戶名分別是“海賊王”和“admin”，密碼都是123456，當(dāng)系統(tǒng)用這兩個帳號登陸時候，進去的就是管理員界面了，和普通注冊用戶界面不同的是，在上方主選項上多了一個紅色的管理選項，點擊進入管理選項，會看到后臺管理和會員管理，在后臺管理中，能夠查看服務(wù)器信息和系統(tǒng)設(shè)置，在系統(tǒng)設(shè)置中管理員用戶可以更改網(wǎng)站名稱和網(wǎng)站默認(rèn)風(fēng)格，關(guān)閉網(wǎng)站注冊和關(guān)閉網(wǎng)站，并且能夠屏蔽惡意詞匯。在進入會員管理界面可以看到所有以注冊會員，包括普通會員和管理員會員，對普通會員用戶管理員可以對其進行資料修改和刪除會員操作，對于管理員用戶，因為權(quán)限一樣，所以只能查看基本信息，無法進行修改和刪除。7.4 系統(tǒng)功能總結(jié) 該網(wǎng)絡(luò)留言板系統(tǒng)所擁有的版式還有功能和設(shè)計初衷一致，并且擁有