【正文】 本系統(tǒng)具有比較友好的界面，另。雖然，這次畢業(yè)設(shè)計時間比較短，只有七個）星期，但是通過這一階段我們課題小組的共同努力，我們組的課題“基于 WEB 的虛擬計算機(jī)網(wǎng)絡(luò)實驗平臺”的設(shè)計與實現(xiàn)已經(jīng)達(dá)到了預(yù)定的目標(biāo)。 通過在創(chuàng)作過程中進(jìn)行的階段測試，發(fā)現(xiàn)了一些錯誤，不過經(jīng)過組員們的共同努力錯誤下修改了錯誤，最終測試結(jié)果與期望結(jié)果一致。以避免在多級頁面下帶來的測試不便。如果它與測試結(jié)果不符合，便說明程序中存在錯誤，需要用糾錯來改正。通常把一次程序執(zhí)行需要的測試數(shù)據(jù)稱為一個“測試用例（ Test Case）” .。 測試與糾錯的關(guān)系，可以用圖的數(shù)據(jù)流圖來說明。測試的目的與任務(wù)可以描述為：目的是發(fā)現(xiàn)程序的錯誤并定位和糾正錯誤。 } 此函數(shù)實現(xiàn)傳參，此參數(shù)用在 /script下面： %if trim(request(add1))= and trim(request(add2))= and trim(request(add3))= and trim(request(add4))= and trim(request(add5))= and trim(request(add6))= and trim(request(add7))= and trim(request(add8))= and trim(request(add9))= and trim(request(add10))= and trim(request(add11))= and trim(request(add12))= and trim(request(add13))= and trim(request(add14))= and trim(request(add15))= then% 具體流程如下 對文本框 id1進(jìn)行判定，當(dāng)點擊確定按鈕時觸發(fā)事件，如果傳來參數(shù)是該文本框參數(shù)，如果文本框為空或不等于“ enable”（應(yīng)輸入命令），則在其下行輸出“指令錯誤重新輸入”，否則顯示下行命令文本框。 格式為 onClick=return check1() 具體函數(shù)為 javascript 語言編寫，在程序緊接 body 下面，函數(shù)實現(xiàn)方法如下： function check1() { =add1。學(xué)習(xí)者在練習(xí)過程中需要注意以下幾點： 流程完全按照 FLASH 演示； 所有命令區(qū)分大小寫； 不能打回車，只能手動點擊確定按鈕，否則跳回第一條命令。 （ 2）實驗練習(xí)部分的實現(xiàn)： 在用戶進(jìn)行模擬實訓(xùn)之前還可以進(jìn)行交換機(jī)的配置練習(xí)，以便達(dá)到更好的學(xué)習(xí)效果。}//提示 用戶根據(jù)提示輸入相應(yīng)的命令。 =39。) sw15() else errormand() //跳轉(zhuǎn)執(zhí)行 erromand 函數(shù) } 函數(shù)體如下：以 SW12 為例： function sw12(){ =inline =none =none =none =none =none =none =none =none =none =none =none =none =39。) sw14() else if(menu==39。) sw13() else if(menu==39。) sw12() else if(menu==39。) sw11() 天津工程師范學(xué)院 2021 屆本科生畢業(yè)設(shè)計（論文） 33 else if(menu==39。) if (haha==1) sw10() else sw8() else if(menu==39。) sw9() else if(menu==39。) sw7() else if(menu==39。) sw6() else if(menu==39。) sw5() else if(menu==39。) sw4() else if(menu==39。) sw3() else if(menu==39。) sw2() else if(menu==39。) sw1() //跳轉(zhuǎn)執(zhí)行 SW1 函數(shù) else if(menu==39。} 實現(xiàn)效果如圖 711所示： 圖 711 實現(xiàn)效果圖 天津工程師范學(xué)院 2021 屆本科生畢業(yè)設(shè)計（論文） 32 實現(xiàn)代碼如下 if(menu==39。實現(xiàn)函數(shù)如下 function errormand(){ =39。進(jìn)入全局配置狀態(tài) 39。39。_39。 var gett= var len=。,zhi function flash(){ ttime++ if(ttime%2==1){ tip=39。 var ttime=0,haha=0,tip=39。 ()。 ErrorMessage = 參數(shù)太多 . 交換 機(jī)互動模塊的設(shè)計： （ 1）模擬實訓(xùn)部分的實現(xiàn) 模擬實訓(xùn)部分是交換機(jī)仿真教學(xué)系統(tǒng)中最重要的交互部分，是通過 Java Script 腳本編程實現(xiàn)的，模擬實訓(xùn)部分程序流程圖如圖 78所示 天津工程師范學(xué)院 2021 屆本科生畢業(yè)設(shè)計（論文） 29 圖 78 模擬實訓(xùn)部分流程圖 當(dāng)學(xué)習(xí)者進(jìn)入模擬實訓(xùn)部分后的默認(rèn)設(shè)置是進(jìn)入模擬交換機(jī)配置模式，如圖79所示。 ErrorMessage = 參數(shù)太多 .。 TotalIndex = AAIndex。 }//如果輸入的命令是空則 會顯示“ Enable 命令丟失” else { ErrorMessage = eval(EE_ add Index)。 //定義變量并賦值 if (eval(CE_ add Index) ne eval(AK_ add Index)) { if (eval(CE_ add Index) ne eval(AA_ add Index)) { Check = 0。 EE_1 = Enable 命令輸入錯誤 .。 天津工程師范學(xué)院 2021 屆本科生畢業(yè)設(shè)計（論文） 27 圖 77 路由器配置模式 當(dāng)用戶輸入的命令出現(xiàn)不同的錯誤時系統(tǒng)會根據(jù)不同的情況做出相應(yīng)的處理，即調(diào)用相應(yīng)的處理函數(shù)并給出相應(yīng)的提示，其代碼實現(xiàn)如下（以第二章第一節(jié)為例）： AK_1 = enable。倘若用戶記不起某些配置命令那么可以切換到演示模式下觀看相關(guān)的配置步 驟，然后再切回交互狀態(tài)繼續(xù)進(jìn)行配置。 天津工程師范學(xué)院 2021 屆本科生畢業(yè)設(shè)計（論文） 26 圖 76 路由器互動模塊流程圖 當(dāng)用戶選擇了一節(jié)交互部分時就會出現(xiàn)由 Flash 制作而成的交互界面，選擇第一步再按照要求輸入相應(yīng)的配置命令，命令之間用空格隔開，輸完后回車加以確認(rèn)，此時系統(tǒng)就會進(jìn)行判斷如果輸入的是正確的命令并且該步不是最后一步，那么就會進(jìn)入到下一步的操作然后再重復(fù)前面的循環(huán)；如果輸入的命令是錯誤的，系統(tǒng)會給出提示信息，這可以分為三種情況 : 一是沒有輸入任何命令，系統(tǒng)會顯示該命令丟失；二是輸入了錯誤的命令，系統(tǒng)會顯示該命令錯誤；三是輸入了多余的命令，系統(tǒng)會顯示命令太多。 路由器互動模塊的設(shè)計 路由器互動模塊分 為九章若干小節(jié)，每個小節(jié)中都會有某一方面的交互內(nèi)容。 我們通過 ASP VBScript 腳本編程實現(xiàn)了交換機(jī)互動模塊即模擬實訓(xùn)和課后練習(xí)部分。只有這樣，才能減輕用戶使用軟件的困難，使用戶不知不覺地進(jìn)入統(tǒng)一的思維框架，從而正確地、順利地應(yīng)用這個軟件。 設(shè)計人機(jī)界面時，經(jīng)常會遇到靈活性與一致性的權(quán)衡問題。盡可能減少用戶的記憶，為此可建立容易記的快捷鍵（例如 Ctrl+p啟動打印），采用演進(jìn)形式顯示提示信息，以免要用戶一次記憶大量的信息等。盡可能不改變用戶已經(jīng)熟悉的操作功能鍵（例如 Ctrl+s來保存文件）設(shè)定界面的缺省狀態(tài)。 2) 界面必須始終一致 一致的人機(jī)界面不致增加用戶的負(fù)擔(dān)，讓用戶始終用同一種方式思考與操作。另一方面，機(jī)器向人傳遞的信息必須準(zhǔn)確，不致引起誤解或混亂。而在人機(jī)交互技術(shù)的設(shè)計中，應(yīng)具備以下基本原則： 1) 以交互功能作為界面設(shè)計的核心 天津工程師范學(xué)院 2021 屆本科生畢業(yè)設(shè)計（論文） 25 使人與計算機(jī)之間能夠準(zhǔn)確地交流信息是人機(jī)界面的關(guān)鍵。很大程度上，軟件的易用程度和界面的交互友好與否直接影響著軟件的聲譽和前景，而易用性很大程度上又取決于人機(jī)交互的品質(zhì)，因此人機(jī)界面設(shè)計顯得相當(dāng)重要?；幽K主要是實現(xiàn)人機(jī)交互，在虛擬的環(huán)境中對網(wǎng)絡(luò)互連設(shè)備路由器、交換機(jī)等進(jìn)行與實際相同或相近的配置。 由于此系統(tǒng)屬于教學(xué)類軟件，所以在界面的設(shè)計過程中本著純樸、大方的原則，在背景顏色設(shè)置中基本設(shè)置為默認(rèn)的白色，目的是讓學(xué)習(xí)者能夠更好的利用此系統(tǒng)資源來學(xué)習(xí)。實現(xiàn)效果如圖 75所示。如圖 74所示。 （ 2）在頂部單元格中插入一行一列的表格，表格邊框設(shè)置為零，表格屬性如圖 73 所示，然后 執(zhí)行“插入” → “媒體” → “ flash”命令，選擇要插入的 flash的路徑，將其放入以保存的站點中，在設(shè)計窗口中調(diào)整 flash 到合適大小。所以 我們在 整體上定義了一個 table，分為四行，頁眉和頁腳各占一行， 導(dǎo)航欄 占一行，為了頁面整齊美觀，在中間的行中又嵌套了 三 個 table，然后分別安排 公告 、 鏈接地址 、 系統(tǒng)總體介紹的 的內(nèi)容。頁面中表格 可以不 顯示出來 ， 從而使網(wǎng)頁顯示整齊有致。 導(dǎo)航欄 主要是為了能隨時進(jìn)入到 各網(wǎng)絡(luò) 實驗； 導(dǎo)航欄的 圖標(biāo)是利用 photoshop 圖像制作軟件進(jìn)行美工處理。在主界面的中間是系統(tǒng)的整體介紹和制作人員。 圖 71系統(tǒng)主界面框架 系統(tǒng)主界面如圖 72 所示： 天津工程師范學(xué)院 2021 屆本科生畢業(yè)設(shè)計（論文） 22 圖 72系統(tǒng)主界面圖 主界面建立了四個網(wǎng)絡(luò)實驗課程的鏈接，整體顯得整潔而淡雅，為了增加網(wǎng)頁的整體效果，我們在網(wǎng)頁頂部插入了一個簡單 flash 這樣顯得莊重而又不單調(diào)。 基于 WEB 的虛擬計算機(jī)網(wǎng)絡(luò)實驗平臺包含了目前比較普及的計算機(jī)網(wǎng)絡(luò)實驗，在系統(tǒng)主界面中我們包含了路由器、交換機(jī)、因此所有的內(nèi)容都嵌入到了網(wǎng)頁中這樣易于管理同時還具有條理性，下面是各個功能塊的設(shè)計框圖及界面圖。 路由器仿真 交換機(jī)仿真 無線網(wǎng)絡(luò) 網(wǎng)絡(luò)服務(wù)器 基于 WEB 的虛擬計算機(jī)網(wǎng)絡(luò)實驗平臺 教學(xué)環(huán)節(jié) 實驗演示 教學(xué)環(huán)節(jié) 模擬實訓(xùn) 實驗演示 模擬實訓(xùn) 教學(xué)環(huán)節(jié) 實驗演示 模擬實訓(xùn) 教學(xué)環(huán)節(jié) 實驗演示 模擬實訓(xùn) 天津工程師范學(xué)院 2021 屆本科生畢業(yè)設(shè)計（論文） 21 7 系統(tǒng)的詳細(xì)設(shè)計（系統(tǒng)主界面及網(wǎng)絡(luò)互連設(shè)備互動模塊） 系統(tǒng)主界面的設(shè)計 一個系統(tǒng)的界面風(fēng)格是系統(tǒng)給人 的第一印象，有好的界面風(fēng)格，就能吸引住使用者，讓使用者有種賞心悅目的感覺。在每個實驗當(dāng)中都設(shè)定了基礎(chǔ)教學(xué)環(huán)節(jié)、實驗演示環(huán)節(jié)和模擬實訓(xùn)環(huán)節(jié)。 可擴(kuò)展性： 在整個平臺開發(fā)完成并在正式運行時，能夠?qū)π碌闹R進(jìn)行擴(kuò)充。 靈活性 當(dāng)用戶需求，如操作方式，運行環(huán)境，結(jié)果精度，數(shù)據(jù)結(jié)構(gòu) 在 其他軟件接口等天津工程師范學(xué)院 2021 屆本科生畢業(yè)設(shè)計（論文） 19 發(fā)生變化時，要做適當(dāng)調(diào)整 ,靈活性非常大。此外，系統(tǒng)還應(yīng)具有良好的兼容性、穩(wěn)定性和可擴(kuò)展性。 軟件接口： Windows202 XP、 2021 及 Linux 操作系統(tǒng)。 界面一般都要簡潔、美觀，符合教學(xué)系統(tǒng)的基本要求，使學(xué)習(xí)者可以一目了然的了解系統(tǒng)的功能，并容易上手使用，降低學(xué)習(xí)者使用系統(tǒng)的難度和所耗費的時間，可以提高工作的效率。同 時對于不太熟悉操作命令的使用者，還能夠提供各實驗的演示過程以供參考。 該平臺的綜合要求包括：功能要求，界面要求和性能要求。由于該平臺的數(shù)據(jù)不需要經(jīng)常更新，并不需要進(jìn)行驗證登錄和數(shù)據(jù)庫的應(yīng)用。 由上所述：本網(wǎng)絡(luò)實驗平臺具有開發(fā)價值，并能夠在規(guī)定時間內(nèi)完成。學(xué)習(xí)者可以輕松上手。 從用戶角度來看：網(wǎng)絡(luò)實驗平臺界面友好，操作簡單，從而可以使學(xué)習(xí)者容易上手，在虛擬的網(wǎng)絡(luò)學(xué)習(xí)中提高學(xué)習(xí)者本身的計算機(jī)網(wǎng)絡(luò)知識和實踐能力，并在實際操作中提供必要的提示。 因為通過網(wǎng)絡(luò)來實現(xiàn)網(wǎng)絡(luò)實驗課程教學(xué)，因此可以節(jié)約許多的人力和物力，方便管理，由此可以減少購買網(wǎng)絡(luò)實驗設(shè)備時的開支，同時該網(wǎng)絡(luò)實驗平臺可以提高教學(xué)效率，所以從經(jīng)濟(jì)上完全是可行的。 (5)此虛擬網(wǎng)絡(luò)實驗平臺具有實用性、安全性。 (3)主要面向高校計算機(jī)專業(yè)教學(xué)，使用方便 ，