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