【文章內(nèi)容簡介】 nytext用戶填寫工作單位workareselect用戶選擇工作地區(qū)phonetext用戶填寫聯(lián)系電話etimeselect用戶選擇入學(xué)年份workonselect用戶選擇工作領(lǐng)域qqtext用戶填寫用戶submitsubmit注冊提交表單在注冊功能的前臺驗證中使用了JavaScript技術(shù)，這樣做的好處在于用戶不用真正提交注冊信息就可以得知注冊信息的合法性。不僅如此，在此功能的實現(xiàn)上我采用了更加靈活的顯示方式。效果如圖62所示。圖62 系統(tǒng)注冊驗證頁面如圖所示用戶所填寫的注冊信息合法性會實時地顯示在頁面的右部。在這里采用的是JavaScript和正則表達式相結(jié)合的方法，使用正則表達式可以更準確的驗證數(shù)據(jù)，同時可以屏蔽非法字符。Ajax技術(shù)是當下流行的WEB技術(shù)，主要無刷的數(shù)據(jù)提交。Ajax使用XML傳輸數(shù)據(jù)、異步JavaScript解析XMLDocument對象、服務(wù)器回傳數(shù)據(jù)不重繪頁面，它可以與任何服務(wù)器技術(shù)進行交互。Ajax是典型的客戶端技術(shù)，所以要使用Ajax還需要了解HTML、DOM、CSS和JavaScript，以及熟悉JavaScript的即時測試和JavaScript的瀏覽器版本測試。我在注冊功能中使用Ajax技術(shù)實現(xiàn)了用戶賬號是否存在的無刷驗證。Ajax驗證的頁面調(diào)用代碼如下：input type=text name=userid id=userid onblur=UserCheck(,39。txtHint39。)。=39。input_onBlur39。autoplete=off /Ajax的功能實現(xiàn)核心代碼：//向服務(wù)器發(fā)送驗證請求if(!objRequestamp。amp。typeof XMLHttpRequest!=undefined) {objRequest=new XMLHttpRequest()。}var url=?action=Isregamp。name=+escape(name)。 if(objRequest!=null) { = nameProcess。 (get,url,true)。 (ContentType, text/xml。charset=GB2312)。 (null)。 }}功能演示如圖63和圖64所示。圖63 系統(tǒng)注冊頁面Ajax使用1圖64 系統(tǒng)注冊頁面Ajax使用2。所謂后臺數(shù)據(jù)驗證就是注冊信息被提交給服務(wù)器后在寫入數(shù)據(jù)庫之前的最后一次驗證。因為JavaScript 客戶端解釋語言，在客戶端用戶可以通過設(shè)置自己的瀏覽器屬性來關(guān)閉瀏覽器對JavaScript的支持，這樣一來前臺驗證寫的再嚴謹也無用武之地，而此時使用服務(wù)器端腳本語言VBScript 編寫的后臺數(shù)據(jù)驗證就顯得尤其重要。如圖65為注冊成功頁面。圖65 系統(tǒng)注冊成功頁面根據(jù)系統(tǒng)設(shè)計階段的設(shè)計信息平臺具有四個主要功能：發(fā)布信息、發(fā)表回復(fù)、查找信息、瀏覽信息。實現(xiàn)的主要功能為：進行信息驗證，通過驗證后方可寫入數(shù)據(jù)庫。圖66為校友之家網(wǎng)站系統(tǒng)的發(fā)布信息頁面。用戶通過表單提供信息內(nèi)容，系統(tǒng)對用戶提供的信息進行驗證，如果合法，則將信息寫入數(shù)據(jù)庫，如果不合法則提示錯誤信息。在這里值得提出的是對信息描述字數(shù)限制的控制，我所采用的不是簡單的JavaScript驗證，而是實時的字數(shù)顯示和余下可數(shù)字數(shù)的提醒。這個功能的實現(xiàn)使用的仍然是JavaScript的客戶端驗證技術(shù)，但是在使用手法上卻更加成熟和靈活。實現(xiàn)這個功能的前臺層的布局和設(shè)置代碼如下：DIV class=case div class=demo gray textarea name=content id=content cols=65 rows=15 onfocus==39。input_onFocus39。 onblur==39。input_onBlur39。 maxlength=5000/textarea /div div class=gray最多可輸入span id=stat_max class=b light/span，當前共span id=stat_total class=b light/span，還可輸入span id=stat_left class=b light/span/div /div圖66 系統(tǒng)發(fā)布信息頁面系統(tǒng)信息發(fā)布頁面使用了一個信息表(infoadd)。在系統(tǒng)信息發(fā)布頁面里使用這個表單采集信息。表62 信息表名稱表單元素類型Value值含義titleText用戶填寫信息標題classnameSelect用戶選擇信息類別contentTextarea用戶填寫信息內(nèi)容daysSelect用戶選擇信息有效期adIframe用戶填寫上傳圖片submitSubmit提 交提交表單在添加信息的表單中也加入了JavaScript的前臺驗證，在這里不再贅述。實現(xiàn)的主要功能為：根據(jù)查找依據(jù)合成SQL語句查找數(shù)據(jù)表。圖67為校友之家網(wǎng)站系統(tǒng)的信息查找頁面。用戶通過表單提供信息查找依據(jù)，系統(tǒng)根據(jù)用戶提供的查找依據(jù)合成SQL語句進行數(shù)據(jù)查找。系統(tǒng)信息查找頁面使用了一個表單(infosearch)。在系統(tǒng)信息查找頁面里使用這個表單采集查找依據(jù)信息。圖67 系統(tǒng)信息查找頁面表63 信息查找表名稱表單元素類型Value值含義searchkeyText用戶填寫搜索關(guān)鍵字classnameSelect用戶選擇信息類別submitSubmit搜 索提交表單。實現(xiàn)的主要功能有：數(shù)據(jù)通過客戶端和服務(wù)器端驗證后寫入數(shù)據(jù)庫。在發(fā)表回復(fù)頁面中用戶通過表單提供回復(fù)內(nèi)容，系統(tǒng)對回復(fù)內(nèi)容進行驗證，發(fā)表的回復(fù)內(nèi)容字符數(shù)不能超過300，校友在輸入回復(fù)的過程中系統(tǒng)會自動提示已經(jīng)輸入的字符數(shù)與還可以輸入的字符數(shù)。在此頁面中使用的表單名為wb。表64 發(fā)表回復(fù)表名稱表單元素類型Value值含義contentTextarea用戶填寫回復(fù)內(nèi)容infoidHidden系統(tǒng)賦值信息IDsubmitSubmit發(fā)表留言提交表單圖68為校友之家網(wǎng)站的發(fā)表回復(fù)頁面：圖68 系統(tǒng)發(fā)表回復(fù)頁面在此功能上做了對留言的客戶端驗證包括字數(shù)限制等等，在服務(wù)器端做了同樣的工作，是留言內(nèi)容更加規(guī)整，更加合法。具體的實現(xiàn)方法和前幾個功能類似，在此不再贅述。此功能模塊尚存在的不足：沒有對留言進行分頁顯示。此不足的存在原因是我在開發(fā)過程中的疏忽。我會盡快完善。校友分會的前臺不需要瀏覽信息的校友填寫任何信息，只需校友選擇要瀏覽的分會點擊進去進行瀏覽就可，這個模塊中顯然功能上要求不高，但要做的盡量人性化，方便校友進行瀏覽、查閱。在這里導(dǎo)航的現(xiàn)實樣式就凸顯出了它功能上的優(yōu)越。在此功能模塊上值得注意的是各個校友分會的活動剪影和各個分會的關(guān)聯(lián)。要實現(xiàn)這個功能就需要在數(shù)據(jù)庫中建立兩張表：分會信息表、活動剪影表。而且分會信息表中的分會ID 應(yīng)該作為外鍵存儲在活動剪影表內(nèi)。圖69為校友之家網(wǎng)站校友分會的導(dǎo)航：圖69 系統(tǒng)校友分會導(dǎo)航此處的導(dǎo)航功能是使用DIV+CSS設(shè)計，JavaScript語言實現(xiàn)的。網(wǎng)站功能的人性化程度是網(wǎng)站建設(shè)的一個軟性指標，但是卻直接影響到整個網(wǎng)站在校友心目中的形象。在校友之家網(wǎng)站功能的人性化問題上我與校友辦的姚科長進行了多次探討，在開發(fā)過程中姚科長的所提的意見讓我能夠更好地從校友們的角度去思考問題，去設(shè)計網(wǎng)站的功能。在校友之家網(wǎng)站各個功能的設(shè)計過程中我都盡量將人性化因素考慮在其中，因為經(jīng)驗和實力等因素我做的并不是很好。在設(shè)計中我認真考慮了校友在瀏覽校友分會信息的便捷性，將點擊頻率較高的功能鍵盡量放在頁面中顯眼且容易被點擊到的地方，讓校友在使用本系統(tǒng)時有種得心應(yīng)手的感覺。當然我所做的還遠遠不足。 圖610是校友分會信息的瀏覽頁面。圖610 系統(tǒng)校友分會瀏覽頁面圖611所示，頁面頂部已經(jīng)將所有分會信息羅列出來，如果校友想進行校友分會間的跳轉(zhuǎn)瀏覽直接點擊就可以，而不需要再去導(dǎo)航中找相應(yīng)的分會鏈接。在分會活動剪影中的快捷體驗如圖611所示。圖611 系統(tǒng)校友分會活動剪影頁面 圖611所示當鼠標放在頁面中“分會活動”上時就會自動彈出各個分會活動剪影的鏈接。這樣就更方便校友對分會活動剪影進行瀏覽。網(wǎng)站的后臺用于管理網(wǎng)站的所有資源，安全性要求相對較高，而后臺的登陸模塊是整個后臺的門戶，除了做到后臺的安全隱藏以外還要做到后臺登陸驗證的盡可能嚴謹。校友之家網(wǎng)站的后臺登陸頁面如圖612所示。圖612 系統(tǒng)后臺管理登陸頁面后臺登陸頁面所包含的驗證有：客戶端JavaScript驗證、服務(wù)器端驗證、驗證碼驗證。運行結(jié)果如圖613所示。圖613 系統(tǒng)后臺管理登陸判空驗證如圖614為系統(tǒng)后臺登陸的報錯頁面圖614 系統(tǒng)后臺管理登陸后臺驗證報錯如圖615為系統(tǒng)后臺登陸成功后的頁面圖615 系統(tǒng)后臺管理登陸登陸成功頁面普通管理員和超級管理員都可以對網(wǎng)站的注冊校友進行管理?？梢赃M行的操作有校友信息審核、校友鎖定、校友刪除、校友查詢。其中信息審核功能能夠很好地控制網(wǎng)站已經(jīng)注冊校友信息的真實性、有利于更好的維護校友之家網(wǎng)站秩序。圖616是校友管理功能的初始頁面。圖616 系統(tǒng)校友管理頁面如圖616中所示，為通過信息驗證的校友會在頁面中直接顯示出來，而且被用紅色字樣特殊標記出來。管理員只要點擊操作一欄中的“審核”就可以對校友進行信息審核。此功能實現(xiàn)的代碼如下：% if trim(rs(ischeck))=0 then font color=red否/font else 是 end if % 值得提出的是在此頁面中還添加了發(fā)送站內(nèi)通知的快捷方式，點擊就可以直接對該校友發(fā)送站內(nèi)通知。此功能實現(xiàn)的代碼如下：a href=?UserID=%=rs(UserID)%amp。Username=%=rs(Username)% 發(fā)站內(nèi)通知/a圖617為校友信息的審核頁面，如圖所示，頁面中將注冊校友的所有信息都顯示了出來，管理員根據(jù)所添加的信息來判斷此條記錄是否有效。若發(fā)現(xiàn)校友信息明顯不屬實可以直接將此記錄刪除。圖617 系統(tǒng)校友信息審核頁面刪除快捷方式的實現(xiàn)代碼為：a href=?UserID=%=rsUser(UserID)%font color=FF0000strong刪除此用戶/strong/font/a信息若通過驗證后屬實，管理員只需在是否通過驗證一欄中選擇“予以通過”便可以通過該校友的注冊。此處的頁面邏輯控制代碼為：select name=ischeck option value=0%if trim(rsUser(ischeck))=0 then% selected=selected%end if%未曾通過/option option value=1%if trim(rsUser(ischeck))=1 then% selected=selected%end if%予以通過/option /select。7校友之家網(wǎng)站系統(tǒng)的測試與分析測試的目標或定義：；；。除非是測試一個小程序，否則一開始就把整個系統(tǒng)作為一個單獨的實體來測試是不現(xiàn)實的。與開發(fā)過程類似，測試過程也必須分步驟進行，每個步驟在邏輯上是前一個步驟的繼續(xù)。大型軟件系統(tǒng)通常由若干個子系統(tǒng)組成，每個子系統(tǒng)又有許多模塊組成。因此，大型軟件系統(tǒng)的測試基本上由下述幾個步驟組成：在設(shè)計得好的軟件系統(tǒng)中，每個模塊完成一個清晰定義的子功能，而且這個子系統(tǒng)和同級其他作為一個單獨的實體來測試，而且通常比較容易設(shè)計模塊正確性的測試方案。子系統(tǒng)測試是把經(jīng)過單元測試的模塊放在一起形成一個子系統(tǒng)來測試。模塊相互間的協(xié)調(diào)和通信是這個測試過程中的主要問題，因此這個步驟著重測試模塊的接口。系統(tǒng)測試是把經(jīng)過測試的子系統(tǒng)裝配成一個完整的系統(tǒng)來測試。驗收測試的目的是驗證系統(tǒng)確實能夠滿足用戶的需要，在這個測試步驟中發(fā)現(xiàn)的往往是系統(tǒng)需求說明書中的錯誤。所謂平行運行就是同時運行新開發(fā)出來的系統(tǒng)和將被它取代的舊系統(tǒng)，以便比較新舊兩個系統(tǒng)的處理結(jié)果。對鹽城工學(xué)院校友之家網(wǎng)站系統(tǒng)的測試是比較復(fù)雜、繁瑣和機械的工作，因為說明書的篇幅有限，在此處只作簡單說明，不詳細列出測試過程。此系統(tǒng)所有調(diào)試在Windows XP操作系統(tǒng)下完成的。在注冊信息過程中輸入不合法的信息后在右列會立即顯示錯誤信息提示。例如在賬號文本框內(nèi)輸入字符串“123”然后將焦點移開，在右列會立即顯示報錯信息：“用戶名不合法”。在不修改的情況下點擊注冊按鈕系統(tǒng)會跳出警告框并終止注冊信息的提交。在發(fā)布信息頁面沒有將信息填寫完整就點擊發(fā)布，系統(tǒng)會自動跳出警告框報錯，并終止信息的發(fā)布。在填寫發(fā)布信息的內(nèi)容時校友會發(fā)現(xiàn)系統(tǒng)會實時反饋已經(jīng)輸入信息字符數(shù)和還可以輸入的字符數(shù)，當輸入達到最大限制時就不可以繼續(xù)輸入。當校友成功提交信息后會發(fā)現(xiàn)