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

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

《基于Java的Web开发控制界面设计.docx》由会员分享，可在线阅读，更多相关《基于Java的Web开发控制界面设计.docx（26页珍藏版）》请在冰豆网上搜索。

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

基于Java的Web开发——控制界面设计

引言

随着网络的不断普及，基于网络的计算机应用也在飞速发展，其中基于B/S模式（Browser/Server模式，浏览器/服务器模式）的Web应用从出现到现在一直具有非常旺盛的生命力，而且应用面也越来越广。

这些都得益于Web应用方便的部署和使用方式，以及强大的交互和展现能力。

正因为Web应用的前景看好，Web开发技术也发展迅速。

Web开发，就是开发应用于Web之上的系统。

而随着Internet成为现如今覆盖面最大和应用最广泛的网络，Web开发技术也主要集中在开发基于Internet的网络应用系统。

Internet是一系列网络结构和网络协议等网络技术的集合，这些技术也是基于Internet的Web应用的基础，了解基本的Internet网络技术对于深入理解Web开发技术是不能缺少的。

随着Web技术的发展，基于实验资源共享的网络平台技术已经得到了广泛的研究和发展，特别是在高校的教学环境中已有初步的应用。

网咯实验平台技术经历了以下几个阶段：

1.基于Web的虚拟实验室：

一般采用B/S（浏览器/服务器）架构，用户只需要通过浏览器登录虚拟实验室就可以远程进行实验。

2.基于Web服务的虚拟实验室：

这种形式的实验室，从用户的角度来看和基于Web的虚拟实验室没有区别。

但是从服务器端开来，这两者之间就有很大的区别了。

基于Web的虚拟实验室只解决了远程操作问题，实验的资源和设备只能在同一个实验室，为了将分布于不同地点的设备和资源整合起来，提出了基于Web服务的虚拟实验室。

3.基于网络的虚拟实验室：

Web服务虽然解决了异构实验设备的整合，以及互联网平台上的访问等关键问题，但随着分布式资源的增加，要求虚拟实验室必须具备分布式系统管理方面的功能，比如资源的发现、监测、调度等，这样就提出了基于网络的虚拟实验室。

本项目的整体目标是基于Web服务的虚拟实验室，基于Web服务的网络实验平台都由用户接口，Web服务器及Web服务组成。

我们这里所设计的是信号处理方面的实验，例如信号变换，信号调制，DFT，FFT等等，一般都没有涉及到状态的持续。

基本的结构图如下所示：

图1Web服务的虚拟实验室结构图

用户通过互联网或者局域网访问Web服务器，服务器随即调用相应的实验服务，经过计算返回结果给访问者。

基于WEB服务的网络实验平台架构被分为三层。

第一层为实验设备接口层。

设备接口层负责网络实验平台的服务层与虚拟仪器系统、物理实验系统和仿真实验系统的数据交换。

各种不同的数据流,通过这一层被转换成规定的格式提交给执行系统。

第二层为WEB服务层。

完成实验资源的整合，提供实验服务。

第三层为用户接口层。

这一层是直接面对实验进行操作的用户的，用户通过浏览器访问网络实验室服务平台,提交定制的实验参数得到实验结果。

图2基于WEB服务的网络实验平台架构

整个项目的主要目的是实现系统能够进行数据采集，模型仿真和网关发布一系列操作。

我在整个项目中负责的是基于Web服务的虚拟实验室的控制界面的设计，用来提高使用者对于这个系统的体验度，使页面显示更加灵活，提高系统与用户的交互性。

网页设计要使用多种技术，包括HTML语言、脚本程序设计、CSS样式表以及美工技术等。

仅仅使用HTML语言设计的页面属于静态页面。

Web刚出现的一段时间内，Web是一个静态信息发布平台，所设计的页面都是静态页面；而如今的Web已经具有更丰富的功能。

现在，人们不仅需要浏览Web提供的信息，而且还需要进行信息搜索等功能。

为实现此类功能，增加用户的体验度，必须使用更新的网络编程技术设计动态网页。

所谓动态，指的是按照访问者的需求，对访问者输入的信息作出不同的响应，提供响应信息。

本文通过HTML语言结合脚本程序设计、CSS样式表以及jQuery动画特效进行基本的页面设计，了解页面设计的思路方法。

1　Web编程基本介绍

1.1　Web简介

1.1.1　Web的基本概念

现在Internet已经成为世界上最大的信息宝库，然而Internet上的信息资源既没有统一的目录，也没有统一的组织和系统，这些信息分布在Internet位于世界各地的计算机系统中。

人们为了充分利用Internet上的信息资源，迫切需要一种方便快捷的信息浏览和查询工具，在这种情况下，Web诞生了。

Web全称为wordwideweb,缩写为www。

Web是一种体系结构，通过它可以访问分布于Internet主机上的链接文档。

也就是说，Web是Internet提供的一种服务，是存储在全世界Internet计算机中、数量巨大的文档的集合，是世界上最大的电子信息仓库。

Web上的海量信息是由彼此关联的文档组成的，这些文档称为主页或页面，它是一种超文本信息，而使其连接在一起的是抄链接。

Web的内容保存在Web站点，即Web服务器中，用户可以通过浏览器访问Web站点。

因此Web是一种基于浏览器、服务器的结构。

也就是说，Web其实是一种全球性通信系统，他通过Internet使计算机互相传送基于超媒体的数据信息。

近年来，Web得到了迅猛的发展，如今的Web应用已远远超出了原先对它的设想。

它具有以下特点：

（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结构突破了传统客户机/服务器（C/S）结构中的局域网计算机应用的限制，用户可以在任何地方登录Web服务器，按照用户角色执行自己的业务流程。

Web通过HTTP协议实现客户端浏览器和Web服务器的信息交换。

客户端浏览器和服务器之间的关系：

服务器处理数据并生成页面，客户端浏览器请求页面和显示页面。

其优点是采用IP协议通讯，位于Internet任何的一个人都可以访问；以浏览器为客户端程序，客户对数据不得处理简化，客户端不需要编写单独的应用程序；容易布置，升级和维护。

2.Web的应用简介

Web应用是指能够通过Web提供一系列功能的应用系统。

如果脱离了Eclipse和Tomcat等开发工具盒Web服务器，一个Web应用就是具有特定的目录结构的文件盒目录。

不同的Web服务器中的Web应用具有不同的目录结构。

Tomcat中的Web应用也具有特定的文件结构，并且每个Web应用都包含一个配置文件。

本文将介绍Tomcat中的Web应用。

了解了Web应用的结构，对于理解后续所介绍的应用实例中的页面设计实现过程会有很大的帮助。

（1）Web应用结构

实质上一个Web应用通常就是文件系统中的一个目录，称为Web应用根目录。

Web应用根目录中的文件是该Web应用中的资源，包括：

需要通过Web提供给客户端访问的资源以及Web应用本身的配置和描述文件等。

不同的Web服务器对Web应用根目录中文件的结构和意义又不同的规定，只有结构符合规定的Web应用部署到Web服务器中后才能获得预期的效果。

典型的TomcatWeb应用具有如下图所示的目录结构。

图1-1Web应用目录结构

该Web应用的根目录是WebTest，通常称该Web应用为WebTest应用。

Web应用的所有资源和配置文件都应该放置在Web应用的根目录中，也只有Web应用根目录中的资源才能通过该Web应用访问。

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

WEB-INF目录必须位于Web应用根目录下，通常该文件夹中包含lib子目录，classes子目录和web.xml文件。

其中，lib目录用于放置该Web应用使用的库文件，classes目录用于放置该Web应用使用的class文件，web.xml是Web应用描述符，用于设置Web应用特有的配置。

WEB-INF目录中的文件是不能通过URL直接访问的。

（2）Web应用的上下文路径

Web应用在文件系统中存储时表现为一个目录，在文件系统中可以使用不同的路径用于区分目录。

当将Web应用部署到Tomcat中时，Web应用就是一个抽象的概念，而且Tomcat中可以部署很多的Web应用，通过使用Web应用的上下文路径区分每个Web应用。

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前缀为：

http：

//localhos：

8080/app2。

反过来，Tomcat也可以利用上下文路径根据客户端请求URL的前缀将客户端请求分发到适当的Web应用。

例如请求URL的前缀为http：

//localhos：

8080/app1的客户端请求被分发到第一个Web应用；请求URL的前缀为http：

//localhos：

8080/app2的客户端请求被分发到第二个Web应用。

需要注意的是，上下文路径与Web应用的根目录不是一个概念，对于同一个Web应用来说，这两个值未必是一样的。

在将Web应用部署到Tomcat中时可以为Web应用设置不同于Web应用根目录的上下文路径。

1.2　HTTP协议

HTTP的全称是HyperTextTransferProtocal，即超文本传输协议。

它是Internet的应用层协议，它定义了客户机的浏览器与服务器的Web应用之间如何进行通信，以及通信时用于传递数据的数据包的格式等内容。

HTTP是采用请求/响应模式的无状态协议。

客户机浏览器和服务器Web应用采用HTTP协议进行通信时，通信由浏览器发起；浏览器向Web应用发送一个请求，Web应用接受并处理该请求，然后向浏览器发回响应。

在请求/响应过程中，Web应用不保存与任何一个客户机通信的状态，它只对到来的当前请求进行处理，处理完返回对应于该请求的响应；任何两个请求的处理都是独立的，无论这两个请求是来自同一个客户机还是不同的客户机。

2　超文本标记语言

2.1　HTML语言概述

HTML和XML是进行Web程序设计的两种重要的基础语言，这里主要介绍超文本标记语言HTML。

超文本标记语言HTML是在万维网上建立超文本文件的语言，它是万维网的核心计算机语言。

创建Web站点时，需使用HTML语言向组成Web站点的各个Web页面放置文本、图形、动画、音频、视频信息等内容，以及按钮和超链接等可以进行交互的内容。

HTML源于“标准通用标记语言”SGML的设计概念。

SGML标记，英文称为tag，就是在文档需要的地方，插入特定的记号，来控制文档内容的显示，这就是文档格式定义。

HTML采用SGML的“文档格式定义”概念，通过标记与属性对一段文本的语义进行描述，并提供由一个文件到另一个文件、或在一个文件内部不同部分之间的链接。

HTML标记是区分文本各个部分的分界符,用于将HTML文档划分为不同的逻辑部分（如段落、标题等），它描述文档的结构，与属性一起向浏览器提供该文档的格式化信息以传递文档的外观特征。

HTML是一种文本标记语言，而非编程语言。

HTML文件是普通文本文件，与平台无关，可用任何文本编辑器进行编辑，文件扩展名为.htm或.html。

HTML文档使用一系列标签将文本组织成特定的结构，并且可以通过特定的标签使得文档在浏览器中展示时可以引入丰富的颜色、图片、文字等信息。

HTML文档的结构是由标签包含关系标示的一种层次结构，厅层标签是。

2.2　标签和属性

HTML文档的内容通过一系列标签进行格式化，例如,,,等都是HTML标签。

HTML标签分为开始标签和结束标签，开始标签由一对尖括号括起来，尖括号中的文字是标签的名称，结束标签与开始标签有相同的名称，并且在左尖括号和标签名称之间加了一个/；HTML中的大部分标签都是成对的，例如和、和；一对标签之间可以包含文字也可以包含其他标签。

另外，有一种特殊的写法，就是将/写在尖括号的前面，这是的简写形式，它表示标签中不包含任何内容。

HTML标签除了可以组织内容之外，大多数的HTML标签还可以定义一系列的属性用于补充说明标签的一些附加信息，属性都写在开始标签中，例如：

…

表示将该HTML页面的背景色设置为红色。

HTML的常用标签可以分为页面标签，格式标签，表格，表单等。

（a）格式标签：

一个HTML文档的基本结构，其中用、、