搜索
第10章WebApp开发综合案例(课程设计)清华大学出版社（第2版）上海高校精品课程主编普通高等院校规划教材国家十三五重点出版规划项目上海市高校优秀教材奖主编目录10.2Web商品进销存信息系统210.3Web书城信息系统310.4本章小结410.1WebApp项目开发概述110.5课程设计任务书及评价5教学目标及重点教学目标●了解Web工程及与传统软件工程的区别●理解WebApp的概念、特点和开发过程●掌握WebApp的分析、设计和测试方法●掌握WebApp综合开发方法及课程设计重点重点10.1WebApp项目开发概述10.1.1WebApp的特点及类型1.WebE的概念及与传统项目的区别1998年YogeshDeshpande和SteveHansen提出了Web工程（简称WebE）的概念，是指按计划进行的网络综合性工作。基于Web的系统和应用简称WebApp,不同于其他计算机软件，而是基于web的系统与“页面排版和软件开发、市场和预算、内部交流和外部联系以及艺术和技术间”综合作用的产物。开发一个Web商品进销存信息系统，为计划、采购、销售、库存和管理提供方便，实现进销存信息资源优化，有效地提高工作效率。采用C/S结构的基于WebService的进销存系统，选择VS2015与SQLServer2014开发环境，以C#编程语言完成，按照软件工程方法,首先对系统进行需求分析，在进行总体设计基础上进行编程实现。.NET平台内建立对WebService支持，包括WebService构建和使用，可在应用程序集成或其他场合被重用。系统总体的功能有商品基本计划、采购、销售、库存、查询、统计、增删改和相关管理等。案例10-110.1WebApp项目开发概述WebE与传统软件工程区别,体现6个方面,如表10-1所示：（1）WebApp强调信息的含量，传统软件工程则强调系统功能的完善；（2）WebApp关注视觉和感觉，传统的软件界面则奉行“简单为美”原则；（3）多数WebApp是数据驱动，传统的软件开发多是功能驱动或过程驱动；（4）WebApp适应不同的用户，传统软件系统的用户群体则常圈定在某个范围之内；（5）WebApp应在短期内开发完成，很难用传统软件工程中的形式化方法和测试技术；（6）WebE要求技术、艺术和科学在更大范围内相互结合。10.1WebApp项目开发概述比较内容传统项目小型WebApp项目大型WebApp项目需求收集严格的受限制的严格的技术规格说明模型、规格说明健全总体描述UML、模型、规格说明健全项目持续时间以月或年为度量单位以天、周或月为度量单位以月或年为度量单位测试和质量保证致力于取得质量目标致力于风险控制重视所有的SQA活动风险管理明确的内部的明确的可交付使用的期限18个月或更长3-6个月或更短3-12个月或更短发布过程严格的快速的严格的发布后客户的反馈需要大量的主动工作以用户交互中自动获得自动获得及由请求反馈获得表10-1WebApp与传统软件项目的区别软件质量保证10.1WebApp项目开发概述2.WebApp的特点WebApp的特点具有8个方面：（1）网络密集性（Networkintensiveness）。（2）并发性（Concurrency）。（3）难预测负载量（Unpredictableload）。（4）性能敏感性（Performancesensitive）。（5）高可用性（Highavailability）。（6）数据驱动(Datadriven)。（7）内容敏感（Contentsensitive）。（8）持续演化(Continuousevolution)。WebApp驱动持续演化的过程的特征：①即时性。②安全性。③美观性。WebApp的开发具有3个特点：WebApp常以增量的方式进行开发、经常发生变化、期限较短。因此，整个WebE过程也与这些特点相适应。10.1WebApp项目开发概述3.WebApp主要应用类型在WebApp中，主要应用类型包括：（1）信息型。利用网站的简单导航和链接提供信息资源。（2）交互型。通过聊天室、即时消息或公告牌等进行信息传递。（3）面向事务型。用户提交由WebApp完成的请求,如订货单。（4）面向服务型。程序向用户提供服务，如确定抵押支付。（5）门户型。引导用户到链接的其他应用信息或服务。（6）数据库访问型。用户查询某大型数据库并提取信息。（7）数据仓库型。用户查询一组大型数据库并提取信息。（8）用户输入型。基于表格的输入是满足通信需要的主要机制。（9）可定制型。用户定制电子期刊等内容以满足特定需要。（10）下载型。用户通过网站从合适的服务器下载信息。10.1WebApp项目开发概述10.1.2WebApp开发任务、过程和方法1.WebApp开发任务和过程主要任务包括：①对问题进行定义及陈述交流；②制定项目协议/合同及计划/方案；③分析需求；④设计体系结构、导航、接口;⑤使用Web开发工具实现WebApp；⑥测试及发布。过程、技术（工具）和方法称为WebE的三要素。WebE过程及WebApp开发流程。根据WebE的特点，可构建WebE过程框架，如图10-1所示。图10-1WebApp开发过程框架10.1WebApp项目开发概述WebApp开发需要过程模型、适合WebApp开发特点的技术和方法。WebE过程：（1）沟通交流。在WebE过程中，沟通交流的特点有3种WebE活动：规划（Formulation）、提取（Elicitation）和协商。（2）计划（Planning）。做出由一个任务定义和一个时间表组成的WebApp增量式项目开发计划。（3）建模（Modeling）。软件项目和设计应与WebApp开发相适应,然后并入WebApp建模活动中。（4）构建（Construction）。利用Web工具和技术构建已建模的WebApp，并可快速测试暴露设计问题及时调整及修改。（5）部署（Deployment）。在实际开发过程中，WebApp开发的目标是按时、保质、保量完成预期交付软件。通常WebApp开发采用增量的迭代模型，其开发流程与传统软件开发项目的过程类似，具体WebApp开发流程，如图10-2所示。10.1WebApp项目开发概述图10-2WebApp开发流程10.1WebApp项目开发概述2.WebApp开发技术及方法1）技术和工具建立高质量的WebApp，需要三种技术：（1）基于部件的开发。（2）安全性技术。（3）Internet标准HTML和XML。2）WebE方法WebE方法主要有以下5种：（1）交流方法。（2）需求分析方法。（4）设计方法。（5）测试方法。可扩展10.1WebApp项目开发概述10.1.3WebApp需求分析1．WebApp需求分析的任务WebApp的需求分析有3个任务：表述问题、收集需求和分析建模，在表述问题期间主要确定WebApp的目的和目标，并定义用户种类。收集需求主要通过调研等确定具体功能、内容、界面等需求，并以分析建模进行具体描述。主要进行4种分析：①内容分析；②交互分析；③功能分析；④配置分析。分析重点是解决3个重要问题：①表达或处理的信息内容；②为最终用户提供的功能；③WebApp表达内容和执行功能时，表现的行为，可将问题的回答表示为分析模型的一部分。10.1WebApp项目开发概述2．WebApp需求分析模型WebE根据自身特点，将分析模型分为：1）内容分析模型对WebE基础的内容进行分析。内容模型包含结构元素，为WebApp的内容需求提供一个重要的视图。其结构元素包含内容对象(如，文本、图形图像、照片、视频图橡、音频)，其内容对象是WebApp的一部分。2）交互分析模型交互模型由4种元素组成：用例、顺序图、状态图、用户界面原型。（1）用例。（2）顺序图。（3）状态图。（4）用户界面原型。10.1WebApp项目开发概述3）功能分析模型功能模型描述WebApp的两个处理元素，各元素代表过程抽象的2个不同层次：（1）用户可观察到由系统传递给最终用户的功能。（2）分析类中实现与类相关的行为的操作。4）配置分析模型客户端软件提供的基础设施，使用户可从所在位置访问。通常，浏览器用于显示从服务器下载的内容和功能。应针对各种浏览器特性及配置(配置模型的部分详细说明)，对WebApp进行彻底测试。10.1WebApp项目开发概述5）关系导航分析模型关系导航分析(Relationship-navigationanalysis，RNA)提供一系列分析步骤，主要分析各网页之间的关系。RNA方法可以分成5步：（1）用户分析。（2）元素分析。（3）关系分材。（4）导航分析。（5）评估分析。10.1WebApp项目开发概述10.1.4WebApp设计1.WebApp设计的目标要求WebApp设计的目标要求，包括7个方面：（1）简单性。（2）一致性。（3）相符性。（4）健壮性。（5）导航性。（6）视觉吸引。（7）兼容性。10.1WebApp项目开发概述2.WebApp的设计活动WebApp设计可分为6种活动：构件设计、体系结构设计、导航设计、内容设计、美观设计和界面设计。每种设计都影响整体质量，可用金字塔表示，如图10-3所示。1）构件设计WebApp经过发展逐渐形成为模板化功能化.处理功能主要包括：数据库查询及其他操作；与外部企业系统的数据接口；用户的注册和认证。为了重复利用这些功能，应设计和构建一些程序构件，同普通软件在形式上一致.利用构件技术,可便于组建各种WebApp。2）体系结构设计体系结构的设计主要定义WebApp超媒体结构、设计模式、设计模板、内容设计。设计模式为解决某些问题的一般性方法。如在WebApp中处理数据功能时，可用体系结构和构件级设计模式。超文本级的设计模式着重导航特征的设计，允许用户以流畅的方式在WebApp内容间移动。图10-3WebApp设计金字塔模型10.1WebApp项目开发概述体系结构的设计与WebApp的目标、内容、导航原则紧密相关。体系结构主要分为4种：线性结构、网格结构、层次结构和网状结构。（1）线性结构。当内部交互可预测顺序时，Web内容串形相连，常选择线型结构。这种结构简单，但缺乏灵活性。如图10-4所示。（2）网格结构：当WebApp内容可分类地组织成二维或更高维时，可采用网格结构，如图10-5所示。这种结构有很大灵活性，但也容易带来混乱。图10-4线性结构图10-5网格结构10.1WebApp项目开发概述（3）层次结构。如图10-6是最常见的体系结构。其结构可设计成使控制流水平地穿过垂直分支（超文本分支）的方式。在此结构中左边展示的内容可由超文本链接其他分支的内容，实现内容快速导航。（4）网络结构。如图10-7在很多方面类似于面向对象系统的体系结构。对结构构件（网页）进行设计，使构件可将控制传递（以超文本链接）到系统中的其他部件，使导航相对灵活。图10-6层次结构图10-7网络结构10.1WebApp项目开发概述体系结构线性结构网格结构层次结构特点结构比较固定Web内容一维化Web内容多维化最常见的结构优点简单有极大的灵活性有较大的灵活性缺点灵活性不高很容易带来混乱易混乱例子订单大型网站普通网站4种类型的体系结构，比较如表10-2所示。表10-2不同的体系结构比较10.1WebApp项目开发概述3）导航设计导航设计的主要过程为：①识别用户角色，不同的用户角色可获得不同的内容和服务。如注册客户、特权客户可获得不同级别的信息和服务；②为每一类用户角色确定访问目标;③为每类用户的每个访问目标设计最佳的导航路径。导航设计还要解决使用各种辅助手段使导航更容易方便。在导航设计时，应为同类用户建立一个语义导航单元，以便后继的管理和操作。4）内容设计对内容对象建模后，编写对象传递的信息并对其格式化，尽量满足用户需求。常以所提供信息的概要描述和内容对象的类型说明设计内容对象。10.1WebApp项目开发概述5）美观及布局设计美观设计又称美工（学）设计，包括颜色配置、几何图案设计、文字大小字体和位置、图形使用等