第18章WEB应用程序设计56

UML建模与分析UML建模与分析2Internet上的计算机应用已经成为当代计算机应用的主流方式。已从早期单纯提供网上信息浏览、查询、检索、下载等功能，发展到提供各种应用服务，出现了许多Web应用系统。对于提供重要Web应用服务的大型Web应用系统来说，严格的系统分析与设计是十分必要的。采用UML进行Web系统的分析与设计，可以规范化开发语言和表示方式，有利于开发团队内外的交流，有效地提高系统的开发质量，降低开发风险，降低开发成本。第18章Web应用程序设计UML建模与分析3第18章Web应用程序设计Web应用程序结构1Web应用系统架构2Web页模型元素3Web应用系统建模4熟悉OCL标准库9简易网上超市系统示例5UML建模与分析418.1Web应用程序结构1、Web应用系统的组成2、Web应用系统的开发UML建模与分析5Web应用系统可以概略地定义为是由浏览器、Web服务器、Internet网络、HTTP协议等元素组成的为用户提供应用业务服务的计算机系统。用户可以分布在Internet网络的任何节点上，而用户的输入（数据输入和导航）会影响到系统的应用业务状态。一个Web应用系统，例如一个网上商店，不仅为顾客提供商品查询功能，而且提供选购商品、送货、货款结算等服务。这些有关商品订购的业务状态在系统的使用过程中发生着变化，用户能够通过与浏览器的交互，输入数据或决策信息，改变和影响服务器上的业务状态。1Web应用系统的组成UML建模与分析6一个Web应用系统的基本构造，如图所示。1Web应用系统的组成Web应用系统基本构造浏览器浏览器Web服务器（应用服务器）InternetInternet数据库（数据库服务器）UML建模与分析7Web应用系统可用UML的UseCase模型、实现模型、安全模型等一组模型来表示。明确区分业务逻辑和表示逻辑。在建立系统模型时，一个极重要的工作是划分与创建分别表示和实现业务逻辑和表示逻辑的对象类，以及持久性数据类，确定哪些类配置在客户端，哪些类配置在服务器端，并把它们组织成组件。用户是通过Web网页与Web应用系统交互。Web页、超链接、客户机和服务器上的动态内容正是需要建模的对象。2Web应用系统的开发UML建模与分析8为了方便对Web应用系统进行建模，可以利用UML的扩展机制表示模型元素，主要有：（1）使用构造型对类、关联等模型元素进行限定，指定其专门的含义。如用构造型“clientpage”或“serverpage”分别表示客户端Web页和服务器端Web页。（2）使用标记对模型元素标注值，如标注某关联所传输的参数的值。（3）使用约束对模型元素指定约束规则，约束可用对象约束语言(OCL)表示。2Web应用系统的开发UML建模与分析9一个Web应用系统的基本架构，如图所示。18.2Web应用系统架构Web应用系统基本架构·HTML·DHTML·XML浏览器数据库服务器JavaservletASPJSPHTML页脚本页数据库HTTP应用服务器Web应用系统的基本架构包括一个或多个浏览器、Internet网络连接件和一个Web服务器。UML建模与分析10Web服务器端的基本构造通常包含一批动态网页（ASP、JSP）和其它网页，可执行模块（JavaServlet），以及其它资源。应用业务逻辑可以就在Web服务器上实现，也可以设置独立的应用服务器，负责管理应用业务逻辑和业务状态，提供业务服务。为了存储和管理持久性数据，通常需要有数据库服务器和数据库。数据库服务器和数据库可以驻留在Web服务器上，也可以配置在专用的网络节点（site）上。18.2Web应用系统架构UML建模与分析11Web应用系统的结构模式可以分为三种类型：瘦客户端系统（ThinWebClientSystem）、胖客户端系统（ThickWebClientSystem）和发送系统（WebDeliverySystem）。所谓瘦客户端系统是指，在其客户端上只配置了浏览器（Explorer）软件。用户通过浏览器向服务器请求网页，获得所需的信息，客户机上不直接进行任何的业务逻辑处理，所有的业务逻辑处理任务全部由服务器端（Web服务器和/或应用服务器）完成。18.2Web应用系统架构UML建模与分析12所谓胖客户端系统是指，在其客户端上除了配置了浏览器软件外，还可以有其它的资源，如实现某些业务逻辑的组件、局部数据库等。用户不仅可以通过浏览器向服务器请求所需网页，还可以执行网页中规定的脚本、JavaApplet、ActiveX控件等，做一些简单的业务处理工作。18.2Web应用系统架构UML建模与分析1318.2Web应用系统架构浏览器JavaAppletActiveX控件应用服务器业务逻辑对象客户端脚本VBScriptJavaScriptHTML页FormInputElementXML文档ElementAttribute服务器页ASPPageJSPPageJavaServletsISAPINSAPICGIWeb服务器持久数据层一个胖客户端Web应用系统的构造如图所示UML建模与分析1418.3Web页模型元素1、Web页2、超链接3、表单4、脚本5、Web页诸元素的协作6、框架UML建模与分析15一个静态HTMLWeb页上只拥有纯粹的HTML代码，浏览器直接解释执行HTML代码，调用相应的资源（文本、图形、图像、音频、视频等），把结果在屏幕上显示给用户。有的Web页使用XML代码文档。一个交互式Web页一般拥有表单（Form），这些表单包含各种输入控件，供用户输入信息。一个动态Web页上除了HTML代码（或XML代码文档）外，一般还有可执行的脚本程序代码。1Web页UML建模与分析16客户端的动态Web页上的可执行的脚本程序代码（如VBScript和JavaScript代码），可以由浏览器直接调用相应的引擎解释执行。服务器端的可执行的脚本程序代码（如ASP、JSP），只能由服务器端的相应的引擎处理和执行，执行的结果将生成一个客户端浏览器可以执行的HTMLWeb页，通过Internet通信传送给客户端的浏览器。1Web页UML建模与分析17客户端资源有：DOM、JavaApplet、ActiveX控件和组件等；服务器端资源有：中间层组件、JavaServlet、数据库存取组件、服务器操作系统等。不但需要对Web页本身进行UML图形描述，而且要描述它所拥有的表单、脚本程序代码和二进制程序组件，以及它们与相关的资源为实现该Web页的功能的协作关系。1Web页UML建模与分析18一个Web页可以用一个UML的类来表示，Web页中的脚本就映射为这个类的操作，脚本中的所有本页范围内的变量，映射为该类的属性。在UML类图标中可以使用构造型serverpage或clientpage，以区分服务器端的Web页和客户端的Web页。Web页的UML类图标如图所示。1Web页clientpage订购商品ItemcountSubTotalTotalCostShippingAddrUpdateItem()UpdateForm()serverpage处理订货TotalCostTotalWeightGetCart()BuildTable()CreateItem()UML建模与分析19超链接是Web页与Web页之间的一个重要的联系。超链接实际上是一个对Web页的请求，用户可以通过Web页之间的超链接，从一个Web页转到另一个Web页。Web页之间的超链接可以用一个UML关联表示，并可以带有构造型link、redirect、build等。带有构造型link的关联表示一般的导航路径，它总是从客户端的Web页出发，指向另一个客户端Web页或服务器Web页。2超链接（Link）UML建模与分析20构造型redirect含义为“重定向”，即改变当前的导航路径的走向。构造型build含义为“创建”。服务器的动态Web页，根据需要执行自身的脚本或调用有关的业务处理组件，将结果组成一个HTMLWeb页发回给客户端，即创建了新Web页。2超链接Web页之间的超链接关系{parameters=ErrNo,disc}serverpage处理订购clientpage订货状况buildserverpage付款结账serverpage结账出错处理redirectclientpage订购商品clientpage查询商品linkUML建模与分析21表单（Form）是Web页上的基本数据输入机制，用户通过表单把输入数据提交给系统。表单可以用UML的类表示，它的构造型用form表示。表单没有自身的操作。表单通常包含一些用于输入的ActiveX控件或JavaApplet程序，它们所代表的输入元素都是表单（Form）类的的属性。3表单UML建模与分析22表单完全包含在网页的HTML文档内，因此表单与其所在的网页的关系可以用UML的聚合联系表示。从表单输入的数据内容须提交给某个相应的服务器网页进行处理，该网页可以是只能在服务器上执行的ASP或JSP代码页。表单与处理该表单输入数据的服务器网页之间存在着关联，该关联的构造型可用submit（提交）表示。3表单UML建模与分析23例：一个表单类“采购单”，如图所示。3表单表单与脚本示例+Itemclientpage订购商品serverpage处理订货form采购单selectionProductIDinputQuantityinputShippingAddrbuttonOkbuttonCancel……Javascript物件选购PnamePnoPqtycost……computeTotal()displayItems()0..*ActiveXCalendarday()month()year()value()today()UML建模与分析24脚本（Script）是动态网页中的可执行代码。客户端Web页上的脚本如VBScript代码和JavaScript代码等，将由浏览器调用相应的引擎执行。在表示Web页的类中，可以把脚本中的所有本页范围内的变量映射成该Web页类的属性，而把脚本映射成该类的操作。4脚本UML建模与分析25也可以把脚本映射成一个独立的Script类，而脚本的执行中的活动可以用一个顺序图专门进行描述。例如，在上图中类“物件选购”表示一个脚本，其构造型为javascript。在系统实现中，脚本类的属性将映射为脚本程序代码中的变量，而操作则由相应的可执行代码段实现。4脚本UML建模与分析26一个Web页可包含多种元素，如HTML代码、表单、脚本、ActiveX控件等。在Web页的执行中，可能还须要调用DOM（DocumentObjectModel）接口、JavaApplet、JavaServlet、ActiveX组件、业务对象模块等。对Web页诸元素的协同（Collaboration）建模是十分重要的。5Web诸元素的协作UML建模与分析27诸模型元素的协同关系可通过对象类图表现。例如，在上图中，表现了组成客户端Web页“订购商品”的诸模型元素的协同关系，以及客户端Web页“订购商品”与服务器端Web页“处理订货”的联系。Web页的脚本，以及诸模型元素的协同也可以用顺序图表示。5Web诸元素的协作UML建模与分析28例：客户端Web页诸元素协作的顺序图，如图所示。5Web诸元素的协作用户clientpage订购商品form采购单Javascript物件选购1:OrderItems2:UpdateItems7:Submmit5:Compu