【正文】 1 題 目： 基于 Java 的 Web 開發(fā) —— 控制界面設(shè)計 引言 隨著網(wǎng)絡(luò)的不斷普及，基于網(wǎng)絡(luò)的計算機應(yīng)用也在飛速發(fā)展，其中基于 B/S模式（ Browser/Server 模式，瀏覽器 /服務(wù)器模式）的 Web 應(yīng)用從出現(xiàn)到現(xiàn)在一直具有非常旺盛的生命力，而且應(yīng)用面也越來越廣。這些都得益于 Web 應(yīng)用方便的部署和使用方式，以及強大的交互和展現(xiàn)能力。正因為 Web 應(yīng)用的前景看好， Web 開發(fā)技術(shù)也發(fā) 展迅速。 Web 開發(fā)，就是開發(fā)應(yīng)用于 Web 之上的系統(tǒng)。而隨著 Inter 成為現(xiàn)如今覆蓋面最大和應(yīng)用最廣泛的網(wǎng)絡(luò)， Web 開發(fā)技術(shù)也主要集中在開發(fā)基于 Inter 的網(wǎng)絡(luò)應(yīng)用系統(tǒng)。 Inter 是一系列網(wǎng)絡(luò)結(jié)構(gòu)和網(wǎng)絡(luò)協(xié)議等網(wǎng)絡(luò)技術(shù)的集合，這些技術(shù)也是基于 Inter 的 Web 應(yīng)用的基礎(chǔ)，了解基本的 Inter 網(wǎng)絡(luò)技術(shù)對于深入理解 Web 開發(fā)技術(shù)是不能缺少的。 隨著 Web 技術(shù)的發(fā)展，基于實驗資源共享的網(wǎng)絡(luò)平臺技術(shù)已經(jīng)得到了廣泛的研究和發(fā)展，特別是在高校的教學(xué)環(huán)境中已有初步的應(yīng)用。網(wǎng)咯實驗平臺技術(shù)經(jīng)歷了以 下幾個階段： Web 的虛擬實驗室：一般采用 B/S（瀏覽器 /服務(wù)器）架構(gòu)，用戶只需要通過瀏覽器登錄虛擬實驗室就可以遠(yuǎn)程進(jìn)行實驗。 Web 服務(wù)的虛擬實驗室：這種形式的實驗室，從用戶的角度來看和基于 Web 的虛擬實驗室沒有區(qū)別。但是從服務(wù)器端開來，這兩者之間就有很大的區(qū)別了。基于 Web 的虛擬實驗室只解決了遠(yuǎn)程操作問題，實驗的資源和設(shè)備只能在同一個實驗室，為了將分布于不同地點的設(shè)備和資源整合起來，提出了基于Web 服務(wù)的虛擬實驗室。 ： Web 服務(wù)雖然解決了異構(gòu)實驗設(shè)備的整合，以及互聯(lián)網(wǎng)平臺上的訪問等關(guān)鍵問題，但隨著分布式資源的增加，要求虛擬實驗室必須具備分布式系統(tǒng)管理方面的功能，比如資源的發(fā)現(xiàn)、監(jiān)測、調(diào)度等，這樣就提出了基于網(wǎng)絡(luò)的虛擬實驗室。 本項目的整體目標(biāo)是基于 Web 服務(wù)的虛擬實驗室， 基于 Web 服務(wù)的網(wǎng)絡(luò)實驗平臺都由用戶接口， Web 服務(wù)器及 Web 服務(wù)組成。我們這里所設(shè)計的是信號處理方面的實驗，例如信號變換，信號調(diào)制， DFT， FFT 等等，一般都沒有涉及到狀態(tài)的持續(xù)?；镜慕Y(jié)構(gòu)圖如下所示： 2 圖 1 Web 服務(wù)的虛擬實驗室 結(jié)構(gòu)圖 用戶通過互聯(lián)網(wǎng)或者局域網(wǎng)訪問 Web 服務(wù)器，服務(wù)器隨即調(diào)用相應(yīng)的實驗服務(wù)，經(jīng)過計算返回結(jié)果給訪問者?；?WEB 服務(wù)的網(wǎng)絡(luò)實驗平臺架構(gòu)被分為三層。 第一層為實驗設(shè)備接口層 。 設(shè)備接口層負(fù)責(zé)網(wǎng)絡(luò)實驗平臺的服務(wù)層與虛擬儀器系統(tǒng) 、物理實驗系統(tǒng)和仿真實驗 系統(tǒng)的數(shù)據(jù)交換。各種不同的數(shù)據(jù)流 , 通過這一層被轉(zhuǎn)換成 規(guī)定 的格式提交給 執(zhí)行系統(tǒng)。 第二層為 WEB 服務(wù)層 。完成實驗資源的整合，提供實驗服務(wù)。 第三層為用戶接口層 。 這一層是直接面對實驗進(jìn)行操作的用戶的 ， 用戶通過瀏覽器訪問網(wǎng)絡(luò)實驗室服務(wù)平臺 , 提交定制的實驗參數(shù)得到實驗結(jié)果。 圖 2 基于 WEB 服務(wù)的網(wǎng)絡(luò)實驗平臺架構(gòu) 整個項目的主要目的是實現(xiàn)系統(tǒng)能夠進(jìn)行數(shù)據(jù)采集，模型仿真和網(wǎng)關(guān)發(fā)布一用戶接口 Web 服務(wù)引擎 MATLAB引擎 信號變換 信號調(diào)制 DFT FFT 其他實驗 虛擬文字接口 虛擬儀 器 用戶接口層 Web 服務(wù)層 設(shè)備接口層 3 系列操作。我在整個項目中負(fù)責(zé)的是基于 Web 服務(wù)的虛擬實驗室的控制界面的設(shè)計，用來提高使用者對于這個系統(tǒng)的體驗度，使頁面顯示更加靈活，提高系統(tǒng)與用戶 的交互性。 網(wǎng)頁設(shè)計要使用多種技術(shù)，包括 HTML 語言、腳本程序設(shè)計、 CSS 樣式表以及美工技術(shù)等。僅僅使用 HTML 語言設(shè)計的頁面屬于靜態(tài)頁面。 Web 剛出現(xiàn)的一段時間內(nèi)， Web 是一個靜態(tài)信息發(fā)布平臺，所設(shè)計的頁面都是靜態(tài)頁面；而如今的 Web 已經(jīng)具有更豐富的功能?，F(xiàn)在，人們不僅需要瀏覽 Web 提供的信息，而且還需要進(jìn)行信息搜索等功能。為實現(xiàn)此類功能，增加用戶的體驗度，必須使用更新的網(wǎng)絡(luò)編程技術(shù)設(shè)計動態(tài)網(wǎng)頁。所謂動態(tài)，指的是按照訪問者的需求，對訪問者輸入的信息作出不同的響應(yīng)，提供響應(yīng)信息。本文通過 HTML 語言結(jié)合腳本 程序設(shè)計、 CSS 樣式表以及 jQuery 動畫特效進(jìn)行基本的頁面設(shè)計，了解頁面設(shè)計的思路方法。 4 1 Web 編程基本介紹 Web 簡介 Web 的基本概念 現(xiàn)在 Inter 已經(jīng)成為世界上最大的信息寶庫，然而 Inter 上的信息資源既沒有統(tǒng)一的目錄，也沒有統(tǒng)一的組織和系統(tǒng)，這些信息分布在 Inter 位于世界各地的計算機系統(tǒng)中。人們?yōu)榱顺浞掷?Inter 上的信息資源，迫切需要一種方便快捷的信息瀏覽和查詢工具，在這種情況下， Web 誕生了。 Web 全稱為 word wide web,縮寫為 。 Web 是一種體系結(jié)構(gòu)，通過它可以訪問分布于 Inter 主機上的鏈接文檔。也就是說， Web 是 Inter 提供的一種服務(wù)，是存儲在全世界 Inter 計算機中、數(shù)量巨大的文檔的集合，是世界上最大的電子信息倉庫。 Web 上的海量信息是由彼此關(guān)聯(lián)的文檔組成的，這些文檔稱為主頁或頁面，它是一種超文本信息，而使其連接在一起的是抄鏈接。 Web的內(nèi)容保存在 Web 站點，即 Web 服務(wù)器中，用戶可以通過瀏覽器訪問 Web 站點。因此 Web 是一種基于瀏覽器、服務(wù)器的結(jié)構(gòu)。也就是說， Web 其實是 一種全球性通信系統(tǒng)，他通過 Inter 使計算機互相傳送基于超媒體的數(shù)據(jù)信息。 近年來， Web 得到了迅猛的發(fā)展，如今的 Web 應(yīng)用已遠(yuǎn)遠(yuǎn)超出了原先對它的設(shè)想。它具有以下特點： (1)Web 是一種超文本信息系統(tǒng)； (2)Web 是圖形化的和易于導(dǎo)航的； (3)Web 與平臺無關(guān)，即對系統(tǒng)平臺沒有限制，無論系統(tǒng)的軟硬件平臺是什么，都可以通過 Inter 訪問 WWW； (4)Web 是分布式的； (5)Web具有新聞性； (6)Web 是動態(tài)的、交互的。 Web 的工作原理及應(yīng)用結(jié)構(gòu) 的工作原理 Web 是一種基 于瀏覽器、服務(wù)器的體系結(jié)構(gòu)。典型的 B/S 結(jié)構(gòu)將計算機應(yīng)用分為三個層次，即客戶端瀏覽器層、 Web 服務(wù)器曾和數(shù)據(jù)庫服務(wù)器層。 B/S 結(jié)構(gòu)有許多優(yōu)點，他簡化了客戶端的維護(hù)，所有應(yīng)用邏輯都是在 Web 服務(wù)器上配置的。 B/S 結(jié)構(gòu)突破了傳統(tǒng)客戶機 /服務(wù)器 (C/S)結(jié)構(gòu)中的局域網(wǎng)計算機應(yīng)用的限制，用戶可以在任何地方登錄 Web 服務(wù)器，按照用戶角色執(zhí)行自己的業(yè)務(wù)流程。 Web 5 通過 HTTP 協(xié)議實現(xiàn)客戶端瀏覽器和 Web 服務(wù)器的信息交換。 客戶端瀏覽器和服務(wù)器之間的關(guān)系：服務(wù)器處理數(shù)據(jù)并生成頁面，客戶端瀏覽器請求頁面和顯示頁面。其優(yōu)點是 采用 IP 協(xié)議通訊，位于 Inter 任何的一個人都可以訪問；以瀏覽器為客戶端程序，客戶對數(shù)據(jù)不得處理簡化，客戶端不需要編寫單獨的應(yīng)用程序；容易布置，升級和維護(hù)。 的應(yīng)用簡介 Web 應(yīng)用是指能夠通過 Web提供一系列功能的應(yīng)用系統(tǒng)。如果脫離了 Eclipse和 Tomcat 等開發(fā)工具盒 Web服務(wù)器，一個 Web 應(yīng)用就是具有特定的目錄結(jié)構(gòu)的文件盒目錄。不同的 Web 服務(wù)器中的 Web 應(yīng)用具有不同的目錄結(jié)構(gòu)。 Tomcat 中的 Web 應(yīng)用也具有特定的文件結(jié)構(gòu)，并且每個 Web 應(yīng)用都包含一個配置文件。本文將介紹 Tomcat 中的 Web 應(yīng)用。了解了 Web 應(yīng)用的結(jié)構(gòu)，對于理解后續(xù)所介紹的應(yīng)用實例中的頁面設(shè)計實現(xiàn)過程會有很大的幫助。 (1)Web 應(yīng)用結(jié)構(gòu) 實質(zhì)上一個 Web 應(yīng)用通常就是文件系統(tǒng)中的一個目錄，稱為 Web 應(yīng)用根目錄。 Web 應(yīng)用根目錄中的文件是該 Web 應(yīng)用中的資源，包括：需要通過 Web 提供給客戶端訪問的資源以及 Web 應(yīng)用本身的配置和描述文件等。不同的 Web 服務(wù)器對 Web 應(yīng)用根目錄中文件的結(jié)構(gòu)和意義又不同的規(guī)定，只有結(jié)構(gòu)符合規(guī)定的 Web 應(yīng)用部署到 Web 服務(wù)器中后才能獲得預(yù)期的效果。典型的 Tomcat Web應(yīng)用具有如下圖所示 的目錄結(jié)構(gòu)。 圖 11 Web 應(yīng)用目錄結(jié)構(gòu) WebTest WEBINF Image lib classes 6 該 Web 應(yīng)用的根目錄是 WebTest，通常稱該 Web 應(yīng)用為 WebTest 應(yīng)用。 Web應(yīng)用的所有資源和配置文件都應(yīng)該放置在 Web 應(yīng)用的根目錄中，也只有 Web 應(yīng)用根目錄中的資源才能通過該 Web 應(yīng)用訪問。 所有的靜態(tài) Web 對象和 JSP 文件可以按照任意的目錄層次放置在 Web 應(yīng)用根目錄下，在將 Web 應(yīng)用部署到 Tomcat 服務(wù)器中后這些文件都可以根據(jù)其目錄結(jié)構(gòu)通過 URL 直接訪問； WEBINF 目錄是一個特殊的子目錄，它存在的目的不是為了能讓客戶端直接訪問其中的文件，而 是通過間接的方式支持 Web 應(yīng)用的運行，比如提供 Web 應(yīng)用需要訪問的資源文件、放置 Web 應(yīng)用的屬性文件或配置文件等。 WEBINF 目錄必須位于 Web 應(yīng)用根目錄下，通常該文件夾中包含 lib子目錄， classes 子目錄和 文件。其中， lib 目錄用于放置該 Web 應(yīng)用使用的庫文件， classes 目錄用于放置該 Web 應(yīng)用使用的 class 文件， 是Web 應(yīng)用描述符，用于設(shè)置 Web 應(yīng)用特有的配置。 WEBINF 目錄中的文件是不能通過 URL 直接訪問的。 (2)Web 應(yīng)用的上下文路徑 Web 應(yīng)用在文件系 統(tǒng)中存儲時表現(xiàn)為一個目錄，在文件系統(tǒng)中可以使用不同的路徑用于區(qū)分目錄。當(dāng)將 Web 應(yīng)用部署到 Tomcat 中時， Web 應(yīng)用就是一個抽象的概念，而且 Tomcat 中可以部署很多的 Web 應(yīng)用，通過使用 Web 應(yīng)用的上下文路徑區(qū)分每個 Web 應(yīng)用。 Web 應(yīng)用的上下文路徑是一個字符串，在 Tomcat 中與 Host 名一起用于唯一確定 Tomcat 中的一個 Web 應(yīng)用。在將 Web 應(yīng)用部署到 Tomcat 中時必須為 Web應(yīng)用制定一個上下文路徑，并且在同一個 Host 中每個 Web 應(yīng)用的上下文路徑必須唯一。例如， localhost 中部署了 2 個 Web 應(yīng)用，它們的上下文路徑分別是：app1 和 app2。訪問上下文路徑為 app1 的 Web 應(yīng)用時，使用的 URL 前綴為： ： //localhos： 8080/app1；訪問上下文路徑為 app2 的 Web 應(yīng)用時，使用的 URL前綴為： ： //localhos： 8080/app2。 反過來， Tomcat 也可以利用上下文路徑根據(jù)客戶端請求 URL 的前綴將客戶端請求分發(fā)到適當(dāng)?shù)?Web應(yīng)用。例如請求 URL的前綴為 ： //localhos： 8080/app1的客戶端請求被分發(fā)到第一個 Web 應(yīng)用；請求 URL 的 前綴為 ： //localhos：8080/app2 的客戶端請求被分發(fā)到第二個 Web 應(yīng)用。 需要注意的是，上下文路徑與 Web 應(yīng)用的根目錄不是一個概念，對于同一個 Web 應(yīng)用來說，這兩個值未必是一樣的。在將 Web 應(yīng)用部署到 Tomcat 中時可以為 Web 應(yīng)用設(shè)置不同于 Web 應(yīng)用根目錄的上下文路徑。 7 HTTP 協(xié)議 HTTP 的全稱是 HyperText Transfer Protocal，即超文本傳輸協(xié)議。它是 Inter的應(yīng)用層協(xié)議，它定義了客戶機的瀏覽器與服務(wù)器的 Web 應(yīng)用之間如何進(jìn)行通信，以及通信 時用于傳遞數(shù)據(jù)的數(shù)據(jù)包的格式等內(nèi)容。 HTTP 是采用請求 /響應(yīng)模式的無狀態(tài)協(xié)議。客戶機瀏覽器和服務(wù)器 Web 應(yīng)用采用 HTTP 協(xié)議進(jìn)行通信時，通信由瀏覽器發(fā)起；瀏覽器向 Web 應(yīng)用發(fā)送一個請求， Web 應(yīng)用接受并處理該請求，然后向瀏覽器發(fā)回響應(yīng)。在請求 /響應(yīng)過程中， Web 應(yīng)用不保存與任何一個客戶機通信的狀態(tài)，它只對到來的當(dāng)前請求進(jìn)行處理，處理完返回對應(yīng)于該請求的響應(yīng)；任何兩個請求的處理都是獨立的，無論這兩個請求是來自同一個客戶機還是不同的客戶機。 8 2 超文本標(biāo)記語言 HTML 語言概述 HTML 和 XML 是進(jìn)行 Web 程序設(shè)計的兩種重要的基礎(chǔ)語言，這里主要介紹超文本標(biāo)記語言 HTML。 超文本標(biāo)記語言 HTML 是在萬維網(wǎng)上建立超文本文件的語言，它是萬維網(wǎng)的核心計算機語言。創(chuàng)建 Web 站點時，需使用 HTML 語言向組成 Web 站點的各個 Web 頁面放置文本、圖形、動畫、音頻、視頻信息等內(nèi)容，以及按鈕和超鏈接等可以進(jìn)行交互的內(nèi)容。 HTML 源于“標(biāo)準(zhǔn)通用標(biāo)記語言” SGML 的設(shè)計概念。 SGML 標(biāo)記，英文稱