基于Java的Web开发--控制界面设计.doc

1、 1 题 目： 基于 Java 的 Web 开发 控制界面设计 引言 随着网络的不断普及，基于网络的计算机应用也在飞速发展，其中基于 B/S模式（ Browser/Server 模式，浏览器 /服务器模式）的 Web 应用从出现到现在一直具有非常旺盛的生命力，而且应用面也越来越广。这些都得益于 Web 应用方便的部署和使用方式，以及强大的交互和展现能力。正因为 Web 应用的前景看好， Web 开发技术也发 展迅速。 Web 开发，就是开发应用于 Web 之上的系统。而随着 Internet 成为现如今覆盖面最大和应用最广泛的网络， Web 开发技术也主要集中在开发基于 Internet 的网

2、络应用系统。 Internet 是一系列网络结构和网络协议等网络技术的集合，这些技术也是基于 Internet 的 Web 应用的基础，了解基本的 Internet 网络技术对于深入理解 Web 开发技术是不能缺少的。 随着 Web 技术的发展，基于实验资源共享的网络平台技术已经得到了广泛的研究和发展，特别是在高校的教学环境中已有初步的应用。网咯实验平台技术经历了以 下几个阶段： 1.基于 Web 的虚拟实验室：一般采用 B/S（浏览器 /服务器）架构，用户只需要通过浏览器登录虚拟实验室就可以远程进行实验。 2.基于 Web 服务的虚拟实验室：这种形式的实验室，从用户的角度来看和基于 Web

3、的虚拟实验室没有区别。但是从服务器端开来，这两者之间就有很大的区别了。基于 Web 的虚拟实验室只解决了远程操作问题，实验的资源和设备只能在同一个实验室，为了将分布于不同地点的设备和资源整合起来，提出了基于Web 服务的虚拟实验室。 3.基于网络的虚拟实验室： Web 服务虽然解决了异构实验设备的整合，以及互联网平台上的访问等关键问题，但随着分布式资源的增加，要求虚拟实验室必须具备分布式系统管理方面的功能，比如资源的发现、监测、调度等，这样就提出了基于网络的虚拟实验室。 本项目的整体目标是基于 Web 服务的虚拟实验室， 基于 Web 服务的网络实验平台都由用户接口， Web 服务器及 Web

4、 服务组成。我们这里所设计的是信号处理方面的实验，例如信号变换，信号调制， DFT， FFT 等等，一般都没有涉及到状态的持续。基本的结构图如下所示： 2 图 1 Web 服务的虚拟实验室 结构图 用户通过互联网或者局域网访问 Web 服务器，服务器随即调用相应的实验服务，经过计算返回结果给访问者。基于 WEB 服务的网络实验平台架构被分为三层。 第一层为实验设备接口层 。 设备接口层负责网络实验平台的服务层与虚拟仪器系统 、物理实验系统和仿真实验 系统的数据交换。各种不同的数据流 , 通过这一层被转换成 规定 的格式提交给 执行系统。 第二层为 WEB 服务层 。完成实验资源的整合，提供实验

5、服务。 第三层为用户接口层 。 这一层是直接面对实验进行操作的用户的 ， 用户通过浏览器访问网络实验室服务平台 , 提交定制的实验参数得到实验结果。 图 2 基于 WEB 服务的网络实验平台架构 整个项目的主要目的是实现系统能够进行数据采集，模型仿真和网关发布一用户接口 Web 服务引擎 MATLAB引擎 信号变换 信号调制 DFT FFT 其他实验 虚拟文字接口 虚拟仪 器 用户接口层 Web 服务层 设备接口层 3 系列操作。我在整个项目中负责的是基于 Web 服务的虚拟实验室的控制界面的设计，用来提高使用者对于这个系统的体验度，使页面显示更加灵活，提高系统与用户 的交互性。 网页设计要使

6、用多种技术，包括 HTML 语言、脚本程序设计、 CSS 样式表以及美工技术等。仅仅使用 HTML 语言设计的页面属于静态页面。 Web 刚出现的一段时间内， Web 是一个静态信息发布平台，所设计的页面都是静态页面；而如今的 Web 已经具有更丰富的功能。现在，人们不仅需要浏览 Web 提供的信息，而且还需要进行信息搜索等功能。为实现此类功能，增加用户的体验度，必须使用更新的网络编程技术设计动态网页。所谓动态，指的是按照访问者的需求，对访问者输入的信息作出不同的响应，提供响应信息。本文通过 HTML 语言结合脚本 程序设计、 CSS 样式表以及 jQuery 动画特效进行基本的页面设计，了解

7、页面设计的思路方法。 4 1 Web 编程基本介绍 1.1 Web 简介 1.1.1 Web 的基本概念 现在 Internet 已经成为世界上最大的信息宝库，然而 Internet 上的信息资源既没有统一的目录，也没有统一的组织和系统，这些信息分布在 Internet 位于世界各地的计算机系统中。人们为了充分利用 Internet 上的信息资源，迫切需要一种方便快捷的信息浏览和查询工具，在这种情况下， Web 诞生了。 Web 全称为 word wide web,缩写为 www。 Web 是一种体系结构，通过它可以访问分布于 Internet 主机上的链接文档。也就是说， Web 是 Int

8、ernet 提供的一种服务，是存储在全世界 Internet 计算机中、数量巨大的文档的集合，是世界上最大的电子信息仓库。 Web 上的海量信息是由彼此关联的文档组成的，这些文档称为主页或页面，它是一种超文本信息，而使其连接在一起的是抄链接。 Web的内容保存在 Web 站点，即 Web 服务器中，用户可以通过浏览器访问 Web 站点。因此 Web 是一种基于浏览器、服务器的结构。也就是说， Web 其实是 一种全球性通信系统，他通过 Internet 使计算机互相传送基于超媒体的数据信息。 近年来， Web 得到了迅猛的发展，如今的 Web 应用已远远超出了原先对它的设想。它具有以下特点：

9、(1)Web 是一种超文本信息系统； (2)Web 是图形化的和易于导航的； (3)Web 与平台无关，即对系统平台没有限制，无论系统的软硬件平台是什么，都可以通过 Internet 访问 WWW； (4)Web 是分布式的； (5)Web具有新闻性； (6)Web 是动态的、交互的。 1.1.2 Web 的工作原理及应用结构 1.Web 的工作原理 Web 是一种基 于浏览器、服务器的体系结构。典型的 B/S 结构将计算机应用分为三个层次，即客户端浏览器层、 Web 服务器曾和数据库服务器层。 B/S 结构有许多优点，他简化了客户端的维护，所有应用逻辑都是在 Web 服务器上配置的。 B/S

10、 结构突破了传统客户机 /服务器 (C/S)结构中的局域网计算机应用的限制，用户可以在任何地方登录 Web 服务器，按照用户角色执行自己的业务流程。 Web5 通过 HTTP 协议实现客户端浏览器和 Web 服务器的信息交换。 客户端浏览器和服务器之间的关系：服务器处理数据并生成页面，客户端浏览器请求页面和显示页面。其优点是 采用 IP协议通讯，位于 Internet 任何的一个人都可以访问；以浏览器为客户端程序，客户对数据不得处理简化，客户端不需要编写单独的应用程序；容易布置，升级和维护。 2.Web 的应用简介 Web 应用是指能够通过 Web提供一系列功能的应用系统。如果脱离了 Ecli

11、pse和 Tomcat 等开发工具盒 Web 服务器，一个 Web 应用就是具有特定的目录结构的文件盒目录。不同的 Web 服务器中的 Web 应用具有不同的目录结构。 Tomcat 中的 Web 应用也具有特定的文件结构，并且每个 Web 应用都包含一个配置文件。本文将介绍 Tomcat 中的 Web 应用。了解了 Web 应用的结构，对于理解后续所介绍的应用实例中的页面设计实现过程会有很大的帮助。 (1)Web 应用结构 实质上一个 Web 应用通常就是文件系统中的一个目录，称为 Web 应用根目录。 Web 应用根目录中的文件是该 Web 应用中的资源，包括：需要通过 Web 提供给客户

12、端访问的资源以及 Web 应用本身的配置和描述文件等。不同的 Web 服务器对 Web 应用根目录中文件的结构和意义又不同的规定，只有结构符合规定的 Web 应用部署到 Web 服务器中后才能获得预期的效果。典型的 Tomcat Web应用具有如下图所示 的目录结构。 图 1-1 Web 应用目录结构 WebTest WEB-INF Image Index.html test.jsp lib classes Web.xml a.jpg 6 该 Web 应用的根目录是 WebTest，通常称该 Web 应用为 WebTest 应用。 Web应用的所有资源和配置文件都应该放置在 Web 应用的根目

13、录中，也只有 Web 应用根目录中的资源才能通过该 Web 应用访问。 所有的静态 Web 对象和 JSP 文件可以按照任意的目录层次放置在 Web 应用根目录下，在将 Web 应用部署到 Tomcat 服务器中后这些文件都可以根据其目录结构通过 URL 直接访问； WEB-INF 目录是一个特殊的子目录，它存在的目的不是为了能让客户端直接访问其中的文件，而 是通过间接的方式支持 Web 应用的运行，比如提供 Web 应用需要访问的资源文件、放置 Web 应用的属性文件或配置文件等。 WEB-INF 目录必须位于 Web 应用根目录下，通常该文件夹中包含 lib子目录， classes 子目录

14、和 web.xml 文件。其中， lib 目录用于放置该 Web 应用使用的库文件， classes 目录用于放置该 Web 应用使用的 class 文件， web.xml 是Web 应用描述符，用于设置 Web 应用特有的配置。 WEB-INF 目录中的文件是不能通过 URL 直接访问的。 (2)Web 应用的上下文路径 Web 应用在文件系 统中存储时表现为一个目录，在文件系统中可以使用不同的路径用于区分目录。当将 Web 应用部署到 Tomcat 中时， Web 应用就是一个抽象的概念，而且 Tomcat 中可以部署很多的 Web 应用，通过使用 Web 应用的上下文路径区分每个 Web

15、 应用。 Web 应用的上下文路径是一个字符串，在 Tomcat 中与 Host 名一起用于唯一确定 Tomcat 中的一个 Web 应用。在将 Web 应用部署到 Tomcat 中时必须为 Web应用制定一个上下文路径，并且在同一个 Host 中每个 Web 应用的上下文路径必须唯一。例如， localhost 中部署了 2 个 Web 应用，它们的上下文路径分别是：app1 和 app2。访问上下文路径为 app1 的 Web 应用时，使用的 URL 前缀为： http： /localhos： 8080/app1；访问上下文路径为 app2 的 Web 应用时，使用的 URL前缀为： ht

16、tp： /localhos： 8080/app2。 反过来， Tomcat 也可以利用上下文路径根据客户端请求 URL 的前缀将客户端请求分发到适当的 Web应用。例如请求 URL的前缀为 http： /localhos： 8080/app1的客户端请求被分发到第一个 Web 应用；请求 URL 的 前缀为 http： /localhos：8080/app2 的客户端请求被分发到第二个 Web 应用。 需要注意的是，上下文路径与 Web 应用的根目录不是一个概念，对于同一个 Web 应用来说，这两个值未必是一样的。在将 Web 应用部署到 Tomcat 中时可以为 Web 应用设置不同于 We

17、b 应用根目录的上下文路径。 7 1.2 HTTP 协议 HTTP 的全称是 HyperText Transfer Protocal，即超文本传输协议。它是 Internet的应用层协议，它定义了客户机的浏览器与服务器的 Web 应用之间如何进行通信，以及通信 时用于传递数据的数据包的格式等内容。 HTTP 是采用请求 /响应模式的无状态协议。客户机浏览器和服务器 Web 应用采用 HTTP 协议进行通信时，通信由浏览器发起；浏览器向 Web 应用发送一个请求， Web 应用接受并处理该请求，然后向浏览器发回响应。在请求 /响应过程中， Web 应用不保存与任何一个客户机通信的状态，它只对到来

18、的当前请求进行处理，处理完返回对应于该请求的响应；任何两个请求的处理都是独立的，无论这两个请求是来自同一个客户机还是不同的客户机。 8 2 超文本标记语言 2.1 HTML 语言概述 HTML 和 XML 是进行 Web 程序设计的两种重要的基础语言，这里主要介绍超文本标记语言 HTML。 超文本标记语言 HTML 是在万维网上建立超文本文件的语言，它是万维网的核心计算机语言。创建 Web 站点时，需使用 HTML 语言向组成 Web 站点的各个 Web 页面放置文本、图形、动画、音频、视频信息等内容，以及按钮和超链接等可以进行交互的内容。 HTML 源于“标准通用标记语言” SGML 的设计

19、概念。 SGML 标记，英文称为 tag，就是在文档需要的地方，插入特定的记号，来控制文档内容的显示，这就是文档格式定义。 HTML 采用 SGML 的“文档格式定义”概念，通过标记与属性对一段文本的语义进行描述，并提供由一个文件到另一个文件、或在一个文件内部不同部分之间的链接。 HTML 标记是区分文本各个部分的分界符 ,用于将 HTML 文档划分为不同的逻辑部分（如段落、标题等），它描述文档的结构，与属性一起向浏览器提供该文档的格式化信息以传递文档的外观特征。 HTML 是一种文本标记语言，而非编程语言。 HTML 文件是普通文本文件，与平台无关，可用任何文本编辑器进行编辑，文件扩展名为

20、.htm或 .html。 HTML文档使用一系列标签将文本组织成特定的结 构，并且可以通过特定的标签使得文档在浏览器中展示时可以引入丰富的颜色、图片、文字等信息。 HTML 文档的结构是由标签包含关系标示的一种层次结构，厅层标签是 。 2.2 标签和属性 HTML 文 档 的 内 容 通 过 一 系 列 标 签 进 行 格 式 化 ， 例 如,等都是 HTML 标签。 HTML 标签分为开始标签和结束标签，开始标签由一对尖括号括起来，尖括号中的文字是标签的名称，结束标签与开始标签有相同的名称，并且在左尖括号和标签名称之间加了一个 /；9 HTML 中的大部分标签都是成对的， 例如 和 、 和

21、；一对标签之间可以包含文字也可以包含其他标签。另外，有一种特殊的写法，就是将 /写在尖括号的前面，这是 的简写形式，它表示 标签中不包含任何内容。 HTML 标签除了可以组织内容之外，大多数的 HTML标签还可以定义一系列的属性用于补充说明标签的一些附加信息，属性都写在开始标签中，例如： 表示将该 HTML 页面的背景色设置为红色。 HTML 的常用标签可以分为页 面标签，格式标签，表格，表单等。 (a)格式标签：一个 HTML 文档的基本结构，其中用 、 、 和 规定了文档的整体结构， 标签中是头部信息，其中可以定义一些辅助信息，这些信息不会显示在浏览器页面的正文中。 中除了可以包含外，还可

22、以包含其他的标签 (link：可以用于链接一些其它文档，最常见的是使用该标签链接样式表，例如 表示 链接 theme.css，用它定义的样式作为本页的格式。 Meta：用于定义页面的一些元数据信息，最常见的是使用该标签定义页面的媒体格式和字符编码方式，例如 表示该页面的类型是 text/html，字符编码格式是 ISO-8859-1) 定义了页面的标题，它显示在浏览器的标题栏中； 标签中的内容是 HTML 文档的主体，需要显示在浏览器页面正文中的内容全 部写在该标签中。 (b)格式标签：在 HTML 文件中文字的位置、文字之间的回车换行和空格等都不会被最终显示到浏览器上，要控制 HTML 文档

23、中的文字最终如何在浏览器中布局，需要使用 HTML 的格式标签。 文字控制： HTML 中提供了一个通用的标签用于设置文字的属性，即 ，它是一个用于设置文字字体的通用方法，它通过不同属性来设置文字的不同方面： size 属性用于设置文字的大小、 face 属性用于设置字体、 color 属性用于设置文字的颜色； 标签是一组标签的总称， x 可以是 1、 2、 3、 它们都表示页10 面的标题，不 同的 x表示的标题级别不一样， x越大级别越低，所包含文字的字体也会越小；每个标题占一行； 和 标签表示将文字加粗； 和 标签表示将文字变成斜体； 标签表示给文字加下划线。 布局控制：即对页面的布局格

24、式进行控制的标签。 Align 属性通常用于规定标签内容的对齐方式， 、 、 标签都有该属性，可以通过将该属性的值指定为 center、 left 或 right 以用于将内容居中、居左或居右对齐。 (c)表格：表格是 HTML 中使用最多也是最重要的一种技巧，通常大部分网页设计师用 表格控制页面内容在整个页面中的分布，并且可以通过使用嵌套的表格将页面进行任意的划分。表格都用顶层标签 进行定义， 标签用于定义表头， 标签用于定义一行， 标签用于定义一行中的一列。 (d)表单：表单在 HTML 中是非常重要的，它提供了一系列可以展现在浏览器中并且能够提供交互的功能组件，例如文本框、密码框、文本域。按钮等。可以使用表格来组织表单中的组件。 (f)其他： 标签主要用于定义一个超链接，其 href属性用于指定超链接的地址； 标签用于在网页中以链接的方式加入 一个图片，其 src 属性用于指定待链接图片的位置； 标签可以在页面上加一个水平的分隔线。 HTML 有很多标签，大部分标签也都定义了很多属性，熟悉掌握它们对于Web 应用开发是非常重要的。