在探讨B/S架构发展的基础上，对当前流行的Web应用程序的特点，如用户体验、开发环境，开发周期进行分析和比较，并在此基础上提出一种高效的解决方案3XT.NET。利用EXT.NET、三层架构和.NET开发平台，设计并实现基于B/S架构的富客户端库存管理系统。该系统界面美观，用户交互全部采用Ajax方式与后台对接，动态效果好、响应快、功能丰富，并且前台页面基本无需式样表与JS代码，软件开发周期缩短。
0 引言
随着互联网技术的发展，特别是动态网页技术的不断成熟，B/S架构因统一了客户端(全部使用浏览器)，将系统功能实现的核心部分都集中到服务器上，简化了系统的部署、维护和更新。HTML5、CSS3等新Web技术的出现，使得普通网页同样能呈现如传统C/S架构应用程序同样精致动态的富客户端用户界面。然而，由于客户端全部转移到了浏览器上，开发人员需要掌握HTML、CSS、Javascript等网络编程语言，从而导致开发人员编写前台页面往往耗费大量时间，无法专注于后台业务逻辑及数据库代码[1]。
本文在分析和比较各类动态网页技术的基础上，提出一种针对企业web应用程序的高效解决方案，即利用三层架构、EXT.NET、ASP.NET、ADO.NET等技术，结合企业需求，设计并快速开发出一款商品库存管理系统。实验结果表明，该系统用户界面友好，业务功能强大，开发周期短。
1 Web应用发展与现状
1.1 Web服务器发展过程
互联网应用最初，所有Web页面都是静态的，服务器收到客户端请求资源后再返回资源。此后，CGI应用程序实现了在静态Web页面上的动态交互，客户端发送的请求使服务器激活指定的CGI程序，再由它调用其它程序并收集执行结果，最后转换成能识别的HTML格式回送给客户端[2]。不过Java Applet因为其“一次编写，随处可用”的特点，更为流行。开发人员可以编写嵌入在Web页面中的Applet小程序，在所有支持Java的浏览器上都可以运行[3]。然而，使用Applet时要求开发人员必须考虑客户端版本问题，而且复杂的Applet在网络传输量很大，于是开发人员希望最后发送给客户端的依旧是静态的Web页面，只是这一页面是在服务器动态生成。为此，能在应用服务器上运行的Servlet由Sun公司率先提出。Servlet根据从客户端得到的信息，利用整个服务器资源，完成所需的业务逻辑，再一行一行地打印出HTML文件发回给客户端[4]。然而这样的流程使开发人员必须考虑到Web页面的外观设计，希望将Web的图形设计与业务逻辑分开，于是针对服务器端又出现了新的解决方案，最著名的就是微软公司的Active Server Pages(ASP)[5]、Sun公司的JavaServer Pages(JSP)[6]和开源的PHP[7]。
1.2 AJAX
虽然服务器端的发展使得Web应用有了动态效果，但和C/S结构下的富客户端相比，这些动态生成的原始HTML文件依然显得有些单调。为了让用户体验更丰富，在此基础上很多技术都得到广泛关注，但真正称得上里程碑的是Ajax的出现。在Ajax之前，即使只更新Web页面上的部分数据，也必须刷新整个页面，而利用Ajax可以异步访问服务器，即时响应用户的请求，同时只传输必须更新的部分页面，大大提高了Web应用的执行效率[8]。谷歌、微软、亚马逊和雅虎等公司相继使用Ajax技术，其已成为新一代Web应用炙手可热的技术[9]。此后Ajax的概念进一步扩展，现在几乎所有不刷新页面就能实现请求服务器的技术都涵盖在内，包括XHTML、CSS、DOM、XML、XSLT、JavaScript和XMLHttpRequest等技术[10]。然而，不可避免地要求开发人员同时掌握服务器和客户端上的多种语言，若想开发单纯由Ajax实现的富客户端Web应用，仅编写JavaScript代码上就需耗费大量时间和精力。对于普通企业来说，将大大增加开发难度和开发成本。
2 基于EXT.NET快速开发方案
为降低通过Ajax开发Web应用的难度，很多整合了JavaScript库的框架出现在了人们的视野中，如Prototype、jQuery、YUI、ExtJS[11]。各类JS框架的出现极大地提高了RIA(富互联网应用程序)开发的效率，尤其体现在对不同浏览器的兼容性上。然而，使用精简了的JS框架并不意味着完全省去JS代码，仍需大量使用层叠样式表设计UI界面，所以RIA开发方案依然不算快速。本文提出3XT.NET快速开发方案，结合了EXT.NET和三层架构开发理念，依托于.NET 开发平台相关技术，高效地开发出纯AJAX、有富客户端体验的企业应用系统。
2.1 EXT.NET
EXT.NET结合了.NET Framework和跨浏览器的ExtJS库，是一套支持Ajax、开源的Web控件。其强大之处在于，所有控件都类似于ASP.NET的服务器控件，可以直接拖拽使用，且精美的动态样式已经封装于其中，所以无需引入任何样式表即能呈现精美的用户界面，可以省下不少CSS和JS代码，同时大量使用Ajax+Json的响应传值方式，因此非常适合作为企业应用开发工具[12]。Ext.NET包含超过100个高性能的组件，如常用的Gridpanel、menu、button、navigation等。使用EXT.NET，不仅可以使各种丰富多彩的UI更容易被开发和实现，还可以进行RIA(Rich Internet Applications)的Ajax应用开发[13]。
2.2 三层架构
三层架构一般指将整个应用程序划分为表现层(Presentation layer)、业务逻辑层(Business Logic Layer)、数据访问层(Data access layer)。目的是为了实现“高内聚低耦合”，为后续软件维护和扩展提供便利。其中，表现层主要负责呈现用户界面，接收用户操作指令并反馈对应的信息，业务逻辑层针对具体的业务需求进行各种处理，并在需要时调用数据层接口访问数据库;数据访问层负责为上层提供数据服务，具体表现为提供各类接口用于访问数据库，对原始数据进行操作[14]。
2.3 .NET相关技术
.NET Framework是微软推出的开发平台。使用.NET平台中的各类技术可以很容易地搭建三层架构[15]。基于ASP.NET的动态网页除非修改了页面或重启了Web应用程序，否则经过首次编译后无需再次编译。所以，在有二次访问的情况下，响应速度有很大提升。采用服务器控件概念和“code-behind”方式使表现与逻辑分离，代码结构更清晰，降低了系统的开发与维护难度[16]。ADO.NET是一组.NET Framework提供给.NET开发人员的类库，提供了一种访问各类数据源的通用方法以及完善的数据访问服务，包括SQL server、ODBC、OLE DB数据库、Oracle数据源以及XML等 [17]。
3 软件设计
3.1 功能模块设计
本软件需要实现的主要功能模块分为：主仓库模块、寄卖管理模块、销售模块、客户模块，如图1所示。
图1 功能模块设计
3.2 架构设计
本系统架构采用较为常用的三层架构设计方案，划分为表现层、业务逻辑层、数据访问层。此外，引入模型层，将数据对象实体和方法分离，以便在多层中进行传递。
表现层基于EXT.NET框架，位于最外层(最上层)，最接近用户。用于显示数据和接收用户输入数据，为用户提供一种交互式操作的界面。负责页面的布局、美工，后台数据的呈现、排列，用户操作的接收、反馈。
业务逻辑层主要解决业务规则的制定、业务流程的实现等与业务需求有关的算法设计。用户各种操作经表现层传递至此，经过相关函数的调用，逻辑算法的处理，再被传递到下一层(数据访问层)执行相对应的SQL语句。然后，再将反馈的数据交回表现层展示给用户。
数据访问层也被称为持久层，其功能主要是负责数据库访问，可以访问数据库系统、二进制文件、文本文档或是XML文档。本文使用ADO.NET技术，结合SQL映射实现对数据表的Select，Insert，Update，Delete的操作，如图2所示。
3.3 数据库设计
本系统数据库采用SqlServer2008。针对所要实现的功能，建立如图3所示的表结构。
4 系统实现
4.1 表现层实现
(1)EXT.NET框架搭建。
由于表现层不是基于传统HTML的标签，也不是ASP.NET的服务器控件标签，而是EXT.NET框架控件，所以首先引入EXT.NET。
首先在项目中添加Ext.Net.dll， Ext.Net.Utilities.dll， Newtonsoft.Jason.dll 3个文件的引用，然后修改Web.Config 配置。添加内容如下：
此外，在每个aspx文件页头必须添加：
最后，搭建页面框架，在标签开头添加EXT.NET控件标签：
ID="ResourceManager1"
runat="server"
DirectMethodNamespace="drcm"
Theme="Gray"/>
至此，EXT.NET框架已搭建完毕，在form中拖入EXT.NET的控件就能完成前台页面设计，而无需编写任何式样表和javascript代码。
(2)AJAX实现无刷新响应。
使用EXT.NET能轻松实现页面无刷新并快速响应，正体现出EXT.NET框架的优势，具体利用Ajax+Json的方式。
例如前台有以下表控件：
Title="当前库存(base)" Height="600">
…
页面载入时将后台的一张表传递到前台显示，只需2行代码即可，即：
GridPanel1.DataSource = datetable;
GridPanel1.DataBind();
相反，将前台表中的某一行传到后台，只需在触发的方法中写下2行，就可直接转换成对象的泛型列表：
string json = e.ExtraParams["Values"];
List row_catch = JSON.Deserialize >(json)
4.2 业务逻辑层实现
业务逻辑层包括SaleService、BaseService、ConsignmentService和CustomerService，分别处理销售模块、库存模块、寄卖管理模块和客户模块的业务逻辑，另外有SysManager类处理系统的通用操作。这些类采用C#语言编写，在三层架构中起着承上启下的作用。
表现层接收用户的操作，触发相应的方法，例如：
protected void button_click(object sender， DirectEventArgs e){…}
在方法体内，仅进行简单的验证操作，然后将数据对象和需求传递给业务逻辑层的相应方法，例如：
protected bool StockUp(Goods good){…}
在BLL类中的方法体内，首先判断前台所要执行的动作，随后继续调用相关其它方法来完成业务逻辑。当需要进行数据库操作时，并不直接参与，而是使用数据层提供的方法，将相应的数据实体传给数据层，例如：
protected bool InsertEntity(string operation， ArrayList parValues){…}
业务逻辑层中有些方法只返回布尔类型，提示操作成功或失败，也有些是返回数据，由表现层负责展示给用户。
用户操作便一层一层向下传递，每一层经过相应处理，将结果传递到下一层。
4.3 数据访问层实现
数据访问层主要由封装了的ADO.NET基本代码的核心操作类crud、SQL映射文件SqlMapCommon.xml和每张表对应的一个操作类组成。
以操作Customer表的CustomerDB类为例，它包含了对表增删改查的基本方法，如：
protected bool Add(Customer newCustomer){…}
而crud.cs文件包括常用的ADO.NET类和对象：Connection， Command， DateReader， DataSet， DataAdapter。使用这些类和对象，封装编写了5类数据库核心操作方法，供各表操作类调用，分别是：
RetrieveDataTable(string statementName， ArrayList parValues )(获取一张表)，
RetrieveEntities(string statementName， ArrayList parValues )(获取一行)，
DeleteEntity(string statementName， ArrayList parValues )(删除一行)，
InsertEntity(string statementName， ArrayList parValues )(插入一行)，
UpdataEntity(string statementName， ArrayList parValues )(修改一行)，
SqlMapCommon.xml映射文件是专门用来写SQL语句的，里面罗列了所有需要用到的增查改删语句。
INSERT INTO [sales_list] ([Typ]，[Unit]，[Num]，[Life]，[Price]，[Date]，[Channel]，[Customer])
VALUES (@0，@1，@2，@4，@5，@6，@8，@9)
]] >
其中，@0，@1...分别对应数组参数中序号。
4.4 模型层实现
模型层负责统一管理其它3层所用到的数据实体，包括4个类：Sale、Goods、Consignment和Customer。数据对象的所有字段都被封装为类的属性，分别由get和set 方法来获取和修改属性的值，其它类要使用对象实体必须先实例化。
5 结语
本文设计的商品管理系统在前端页面无需添加任何CSS或JS代码，开发周期短，投入运行后使用正常，系统稳定。并且前台页面全部采用Ajax技术，无需刷新页面，软件交互性和用户体验度大大提升。无论是功能，还是界面都能与传统C/S架构的应用软件相媲美。因此，采用3XT.NET解决方案可以有效降低应用程序开发和维护成本，实现了软件需求、用户体验和开发开销之间的平衡。由于整个系统采用三层架构，因此系统修改和升级方便快捷。
作者：季嘉明 沈毅俊 方建安 来源：软件导刊 2015年8期
