中客户WEB应用程序总体模型(LeeBai20019)

中客户WEB应用程序总体模型(LeeBai2001.9)1、什么是“中客户”应用程序？“中客户”应用程序是相对于“胖客户”、“瘦客户”应用程序而言的。“中客户”应用程序中，客户机（浏览器）向应用服务器发送业务请求（同一般的Web程序），应用服务器返回结果数据（不是可显示的页面），客户机负责解析并显示结果数据。相对于传统的“瘦客户”Web程序，“中客户”程序的应用服务器不负责用户界面的构造（如ASP页面、JSP页面），这一工作由浏览器来做，所以客户端“胖”了一些。“中客户”程序中，浏览器和应用服务器的职责分割更为明确、合理，浏览器完全负责界面操作，而应用服务器只处理具体业务逻辑，系统性能也会有很大的提高。“中客户”程序可以基于XML技术实现，也可以用脚本和DHTML技术实现，本文主要阐述后一种实现技术。基于XML的中客户和基于DHTML的中客户比较：比较项目XML的中客户(及webService)DHTML的中客户请求数据格式URL+XML（SOAP信件）URL+POST数据返回数据格式XML（SOAP信件）含Script变量的普通HTML页面数据类型定义XML定义的数据类型Script定义的数据类型数据显示逻辑XSL，不够灵活，可配合脚本Script+DHTML，高度灵活前端可编程性弱强通讯协议HTTP(HTTP之上的SOAP)基于HTTP，无标准，自由使用要求浏览器版本=IE5=IE4服务器端要求XML构造器，加重负载无要求，低开销学习曲线陡，有了XML还要Script平缓,一旦拥有，别无所求数据可交换性强弱2、名词定义：界面页面数据页面前端程序界面页面和数据页面都是html页面。用于在浏览器中直接显示的页面为界面页面，用户可以看该页面的内容，或者在其中输入数据。普通的Web应用程序中，基本上所有的页面都是界面页面（静态html文件，或者后台程序动态产生的页面）；在中客户应用程序中，界面页面总是静态html文件，后台程序从来不产生界面页面。只用于应用服务器向浏览器传递数据的页面为数据页面，用户看不到该页面的内容，也不能对其进行任何操作。数据页面一般传输到一个隐含帧（大小为零）中，再由该隐含帧所在的页面（一个界面页面）中的前端程序（一套脚本代码）对其中的数据进行操作。实际应用中，数据页面由后台程序（CGI、Servlet，本文档后续描述大部分针对Servlet）动态产生。前端程序是界面页面的重要组成部分，可以控制后者的显示元素显示在哪个位置，什么格式，是否显示，以及随时改变显示元素的内容。3、中客户应用程序的运行机制及对比JSP/ASP上图中，用户先进入应用系统界面的首页Index.htm（静态html文件，下同），在首页中可能有部分信息（如在线人数）是动态的，因此在BODY元素的onload中需从后台程序获取数据，然后显示出来。接着用户想知道到底哪些人在线，于是通过连接打开了一个叫OnlineList.htm的页面，此页面中的在线人员列表是动态的，因此在BODY元素的onload中需从后台程序获取数据，然后显示出来。再后用户想某个用户的个人信息，于是打开一个叫UserInfo.htm的页面，同样的，该页面在onload中取用户信息并显示。如果要看更详细的用户信息，按下MoreInfo按钮，前端程序从后台程序取回了更多信息并显示出来。这个页面画出了取动态数据并显示的具体实现过程。从上面的样例分析，我们可以看出中客户应用与JSP/ASP应用的差异：a.静态页面和动态数据完全分离，互不干扰。比如首页，在JSP/ASP中可能某些原因导致整个页面无法显示；而在本模型中，大不了显示在线人数“未知”，而其他都正常。b.程序界面对应用服务器是透明的，应用服务器无需替浏览器组装HTML页面，因此降低了应用服务器的负载，并提高了服务器的响应速度。另外还可以避免JSP/ASP的各种安全问题、配置问题。c.后台开发人员可以完全不管界面，专注于业务逻辑的开发。d.前端开发人员可以完全专注于脚本开发。e.特定复杂度的动态界面，用JSP/ASP生成与用中客户模式生成工作量大致相同。但作为MVC模式中的View，JSP依赖于传过来的数据Bean，不能独立开发测试；而Servlet和业务Bean的功能正确性验证也依赖与JSP的显示，因此也不能独立开发测试，因此很多JSP者既作业务开发又作界面开发，不是Java掌握不透，就是Javascript用不好，效率很差。f.界面操作因为没有整页刷新（只更新要变化的部分）而更加流畅。g.只传输不带显示格式的纯数据，大幅度减少了网络传输，速度更快。WebServerAppServerServlet业务类BeanDBPage(带程序)Browser首页(Index.htm)目前99在线A页(OnlineList.htm)在线人员列表:…B页(UserInfo.htm)ScriptCodeEmail:[e-mail]:Beijinghtmlbodyscriptvarem=’lbq@a.b.c’;varad=’Beijing’;parent.loadok();/script/body/htmlMoreInfo①操作请求数据(get/post)②返回数据(关键)③回调(CallBack)代码(关键)④取数据、处理、显示①②③④输入URL缓冲隐含帧Name:LeebaiSex:male4、中客户应用程序的模块内、模块间的接口定义4．1、MI(MethodInterface)---方法调用（从后台程序）：Java业务对象的公开方法，由本模块的其他业务对象调用，或由其他模块的业务对象调用。4．2、SI(ServletInterface)--Servlet调用（从前端界面）：调用servlet，并传参数。不返回界面页面，只返回数据页面（简单情况下返回数据只表明操作是否成功，复杂情况下调用者可以任意处理返回数据）。被调用的servlet负责拆解输入参数，并调用相应业务对象的SI辅助方法（即返回脚本格式数据的方法，其可能调用本对象的私有方法，或者本对象、其他对象的MI方法以获得数据，也可能直接访问数据库获得数据）。一个SI调用可以只引用一个SI辅助方法，也可以引用多个SI辅助方法（这时将多个引用返回的数据累加，再传回浏览器）。4．3、UI(UserInterface)---界面调用（从前端界面）：调用一个静态html文件（即界面页面），并可以传递参数，该界面与对应的servlet进行一系列的SI通讯来完成所要求的功能。可以返回值（如用户选择），也可以不返回值（如权限分配）。一般情况下，用户操作导致UI调用（特例：机场航显，被动显示），UI调用或用户操作导致SI调用，SI调用导致SI辅助方法调用，SI辅助方法调用导致MI调用。各种调用可能发生在一个模块(应用程序)内部，也可能跨越模块。下图是典型例子：MI(MethodInterface)调用SI(ServletInterface)调用权限管理用户管理业务模块代管对象列表角色列表角色属性对象赋权业务对象列表业务对象属性复杂(关联)操作业务对象列表用户列表部门列表用户属性部门属性SSS权限控制单实例对象多实例对象角色DB业务对象DBDB部门对象用户对象业务对象属性UI(UserInterface)调用用户界面后台程序5、“中客户”应用模型开发过程前端开发SI后端开发系统设计UI定义SI定义1.SI辅助方法定义2.业务类静态、动态模型定义3.MI定义UI界面优化UI前端程序实现Servlet实现业务类实现UI测试(使用SI测试桩)业务类测试(通过SI、MI)集成测试集成测试（SI联接）5．1、用例(UseCase)设计:从使用者(用户或系统对象)的角度观察系统功能，总结出用例图和每个用例的详细说明（使用者系统操作响应表）。用例详细描述时，可以借助用户操作界面的某些概念（一般情况下，一个用例对应一个UI；操作者非人时对应一个SI或MI）。文档要求：用例图及各用例描述。下面是“对象赋权”的用例设计：对象赋权用例描述：（*表示可选操作）使用者操作系统响应初始状态对象列表显示(参考“对象选取”用例)选一个对象，要求赋权显示该对象目前已赋权的用户、角色，以及这些用户角色拥有的具体权限。*改变已有用户角色的权限界面记录改变*删除已有用户角色(所有权限)界面记录改变*新增用户角色以赋权显示用户列表供选择（参考“用户选取”用例）显示角色列表供选择（参考“角色选取”用例）确认或Apply保存所有权限变更取消什么都不做分析用例AdminPowerUser对象选取(列表)用户选取(列表)部门选取(列表)include对象赋权baseonuse角色选取(列表)use5．2、UI定义：根据用例的需要，采用面向对象的思想，规划系统所需的UI。在本模型中，UI与普通的Web页面不同，而更接近于传统桌面程序。在内容上，UI可以分为对象列表、对象属性、复杂(对象关联)操作三类；在形式上，UI可以分为主界面和对话框两种。作为系统主界面的根页面，一般显示系统主要对象的列表。对话框页面可以显示对象属性、或者复杂操作。主界面和对话框都可以链接到其他UI。UI设计要指明该UI功能、显示内容、显示形式，并设计出具体的HTML页面。对该页面中动态的部分（比如一个对象列表），要放到一个确定的容器中（比如：DIV，TD）,并给该容器指定一个ID。对于对话框UI，要指明可能的引用者、参数、返回值。根据界面显示和操作需要，初步考虑界面初始化、中间操作、退出时都需要那些SI，这些SI是用一个还是多个缓冲隐含帧来接收返回数据页面，以及数据页面的回调函数。此外还要指定该UI要调用的其他UI。文档要求：系统UI定义表；每个UI的界面页面（HTML）。下面是“对象赋权”的UI定义：对象赋权（Authority.htm）:给一个具体对象设置操作权限，复杂对话框，如下图：访问者：需要对象赋权的所有业务模块。访问参数：要赋权的类ID和对象ID。返回值：无，数据直接更新到后台。SI调用：1、界面刚进入时，从后台取该对象当前的所有权限分配数据。2、“确定”或“应用”时，更新权限数据。UI调用：1、用户选择。2、角色选择。动态5．3、SI定义：SI设计是中客户应用设计的核心，是用例和UI的自然延伸。SI设计相当于C/S应用中的协议设计。一个UI会有一个或多个SI，一个SI也可以服务于多个UI。SI定义内容包括：请求类型，GET或POST，除非参数数据太大或太复杂，建议尽可能使用GET；请求参数数据；请求返回数据页面的内容和格式（返回数据有单值、一条记录、一个记录集、多个记录集等情形），并提供一个或几个数据页面样板，在样板中注释数据格式。SI定义的请求参数和返回数据格式及样板是前、后端分别进行黑箱测试的重要依据。另外，前端、后端开发人员必须准确理解SI，SI是前后端人员沟通的唯一通道。文档要求：系统SI定义表；每个SI对应的数据页面样板（一个或多个）。下面是“对象赋权”的“取对象当前已分配权限SI”定义：名称：getCurAuths功能：取对象当前已分配的权限请求类型：GET参数：?Act=getCurAuths&ClassID=XXX&ObjectID=XXX返回数据页面：1、操作是否成功。2、该类的所有操作权限的ID及名称。3、该对象已分配权限的各个用户、角色的ID、名称、权限ID集合。数据格式：参考样板数据页面。样板数据页面：//头略（*）varok=true;//样板中可加注释varallOpersID=[“R”,”N”,”C”,”D”];varallOpersName=[“读”,”新建”,”审查”,”删除”];varroleAuth=newArray();varroleAuth[0]=[12345,”系统管理员”,”R-D”];varroleAuth[1]=[34521,”主编”,”C-D”];varuserAuth=newArray();var