融合C/S和B/S优势的应用程序开发方法

骆慧勇，汤 进

（人民银行泰州市中心支行 江苏 泰州225300）

融合C/S和B/S优势的应用程序开发方法

骆慧勇，汤 进

（人民银行泰州市中心支行 江苏 泰州225300）

当前，在信息系统开发中，更多采用B/S结构，但C/S结构仍然具有较为可取的方面，比如可以使用客户端的操作系统API来实现一些B/S无法完成的工作，也可以有效避免浏览器兼容性的问题。本文首先从技术人员角度分析了B/S与C/S相比的优势及不足，然后再提出如何通过融合两种结构的开发思路形成更实用的新型开发方法，提供开发人员更多的选择。

B/S结构；C/S结构；融合；程序开发

浏览器/服务器（Browser/Server，B/S）结构的信息系统建设已经深入人心，但由于其依赖于客户端浏览器带来了一些功能性限制。通过融合客户端/服务器（Client/Server，C/S）与浏览器/服务器结构中的优势，对突破现有信息系统开发思路，实现更多的功能满足信息系统的多样化需求具有重要的意义。

1 C/S与B/S结构及其特性分析

C/S结构是早期信息系统的构架方式，早期其结构为客户端与数据库的两层构架，客户端直接读取数据库数据，并实现业务逻辑处理。这种方式结构简单，但存在可伸缩性、可扩展性、数据库兼容性差等问题。后期逐步发展至客户端、应用服务器、数据库服务器三层构架。 在三层构架中客户端程序承担着界面展示及用户交互，用户通过客户端程序实现交互及业务功能的调用，服务器响应客户端程序的请求，实现数据处理及业务逻辑。

B/S结构是现在流行的信息系统构架方式，主流结构为三层构架，分为客户端展现层、业务逻辑层、数据库层，业务逻辑层根据具体系统需求可以直接通过提供互联网信息服务 （Internet Information Services，IIS）的网站实现，也可以通过网站与应用服务器集合实现。在B/S结构中客户机浏览器实现界面展示及用户交互，信息系统部署于业务逻辑层，网站实现客户机浏览器操作的响应，网站或应用服务器实现业务逻辑处理。

2 C/S与B/S结构程序优缺点对比

1）功能对比

C/S结构的客户端程序能够调用操作系统底层应用程序编程接口（Application Programming Interface，API）实现一些脱离浏览器的系统功能，例如屏幕截取、键盘操作截取、文件监控[1]、串行接口通信[2]等。B/S结构中浏览器前台技术的大量出现，能够实现更合理的页面数据展示，同时由于大量前台动态处理技术的出现，可以通过前台实现更复杂的业务逻辑。

2）适用性对比

C/S结构的客户端程序具有独立性，需要单独安装客户端程序并进行配置，而B/S结构仅需要安装有适用Web浏览器的客户端。当业务需求发生变更需要对信息系统进行升级改造时，C/S结构需要对客户端进行重新部署，而B/S结构仅需对后台服务器网站或服务器程序进行重新部署即可。

3）兼容性对比

C/S结构客户端程序的兼容性主要依赖操作系统，客户端程序一般兼容性较高，而B/S结构的信息系统客户端展示主要依赖于浏览器，由于B/S前台技术的更新速度较快，出现了大量浏览器兼容性问题，表现为新型前台技术无法被老版浏览器识别，造成界面无法展示甚至业务逻辑无法实现[3]。根据2015年百度统计对浏览器市场份额分析，国内目前IE浏览器8.0及以下版本浏览器仍然占到32.24%，在企业内部这个比例更高。由于兼容性问题，开发人员不得不放弃新技术及部分功能的实现。

4）安全性对比

B/S结构下数据的处理主要由服务器执行，服务器仅传输客户端需要展示的数据，对底层数据实现了一定的隐藏。C/S结构下，如数据处理的设计层次不合理，则会造成底层数据直接暴露于网络，所以C/S结构对网络的安全性要求更高。

5）部署要求

在B/S结构中服务器集中处理客户端的访问，需要处理数据的调用、传送、计算、展示，对服务器性能要求较高。采用C/S结构则可以将部分运算和展示交付给客户端，将数据的调用、传送等功能交付于应用服务器或者数据库服务器，能够降低对服务器性能的要求。

3 C/S与B/S结构融合思考

C/S与B/S结构的结合可以从多个角度进行思考，比如从服务器构架角度、从数据调用角度、从模式转换角度[4]等。在这些方法中，在结构上仍将客户端应用分为客户端程序及浏览器应用。这样做的好处是通过各自比较成熟的开发技术分别实现相关功能，但技术人员需要实现需要利用不同的开发技术分别实现，对开发人员技术要求较高。日后维护升级时，可能存在对两者都要升级的情况，增加了维护成本。

通过开发融合型客户端即能够展现B/S结构中的网站内容，又可以独立完成部分需要操作系统底层API支持的功能。这样做不会对开发、维护造成新的明显负担，且能集成B/S的集中维护的优点。融合主要从集成方式、调用方向、数据存放3个角度进行思考。

1）集成方式分类

浏览器集成有3种方式，分别为调用操作系统浏览器、引入第三方浏览器和内嵌浏览器。3种方式各有优缺点，通过调用操作系统浏览器的方式可以简化软件开发难度，但却受制于操作系统内置浏览器的兼容性，特别是IE浏览器的兼容性饱受诟病，开发中更需要考虑各版本IE的兼容性。通过引入第三方浏览器的方式可以避免兼容性问题，不过由于需要独立安装，用户对所需客户端之外再安装多余浏览器程序存在接受度问题。采用内嵌浏览器则需要较高的技术能力，同时会增加客户端软件的大小。

2）调用方向分类

通过浏览功能的调用可以较好实现客户端软件能够调用网站页面，实现界面展示、业务功能等。另外在集成后还有另外一种可能需求，就是通过浏览器调用客户端操作系统某程序、客户端程序或者客户端程序的某个功能。

3）数据存放分类

融合型客户端生成数据主要通过网站将数据集中存放于数据库。但部分数据可以采用网站存放，例如网站访问量、特殊字符集、过滤规则等网站前台可能用到的非业务数据。也有部分数据可以通过优化设计等实现客户端本地存放，例如用户未正式提交的业务数据，也可以为用户定制本地文件缓存。

4 融合开发的方法

C/S与B/S结构融合开发本文主要集中在客户端应用程序，为了实现较好的融合，可以从多个方向考虑以实现较好的优化，例如可以利用socket编程技术截取并分析特定字符、深入改造内置浏览器引擎实现自定义控件解析[5]等多种方法，但这些方法对开发技术要求较高，本文通过以下步骤进行融合。

1）集成方式的选择

经过对融合集成方式的思考，客户体验比较好的集成方式是利用内嵌浏览器，具体开发中可以采用开源浏览器引擎进行集成[6]。客户端本省不集成具体业务功能和逻辑处理，仅提供界面展示、数据调用等基础功能[7]。

2）网站页面调用本地程序或功能

在调用方向上，网站页面也应能够调用本地可执行程序。Windows可以通过注册自定义协议实现调用。

以注册自定义demo协议为例，浏览器中调用方法为，客户端windows系统自定义协议注册文件为：

除了该方法外，还有NPAPI插件方式、浏览器扩展（Browser Extenstion）、ActiveX[8]等多种方式，有些需要特定领域的专业知识，也受到具体浏览器以及安全性限制，本文不做详细讨论。

3）客户端式子窗口的实现

在C/S结构的程序中，子窗口、确认窗口是常规操作，如果使用网站页面，会出现限制弹出窗口的范围、弹出窗口会被母窗口包裹、限制拖动或遮盖等，造成用户界面友好感下降，如图1所示。

图1 弹出窗口集成转变

为了更好地实现融合，点击网页应该能够实现对新窗口的大小和位置的订制。通过自定义协议参数传递是一个较为简单的方法。首先客户端程序加载网站父页面，当点击按钮或超链接时则将含有子窗口、位置参数信息的自定义协议参数发送至客户端程序。其次客户程序通过内部处理在指定位置生成指定大小的内置浏览器窗口并加载子页面。用户操作形成的结果通过自定义协议参数再发送至客户端程序。最后客户端程序尝试重新加载父页面，并同时将用户操作结果通过网址的方式发送给父页面，父页面进行页面处理并相应重新加载。相关调用及参数传递如图2所示。

重点代码举例：

图2 子窗口调用及参数传递

3）重要细节优化技术

为了给用户良好的融合感，可优化一些细节，例如页面菜单注意不要出现被母窗口限制、屏蔽浏览器原有右键菜单等。除此之外，还有一些需要重点注意的技术，相关内容如下：

①在网站开发中页面信息较为丰富，而客户端程序所需页面信息可能不多，可以在网站中对子窗口调用开发分析功能，根据地址参数，通过JavaScript、JQuery等脚本语言动态操作父页面的文档对象模型（Document Object Model，DOM）[9]，提取展现信息动态生成子窗口。该方法也可以实现网站正常页面与调用页面的区分，实现同一页面不同展示。

②采用融合开发方法，还应注重网站前台开发，实现页面对浏览器窗口大小的自适应，能够根据窗口大小调整页面布局，这样做将能极大提高客户端程序的调用灵活度。利用现有比较成熟的响应式开发前台框架，如Bootstrap等，可减少开发工作量[10]。

4）客户端数据存储

客户端程序可以利用内嵌浏览器及本地客户端两种方法实现数据缓存功能，内嵌浏览器方式可以利用本地cookies实现数据缓存，也可利用当前流行的html5相关技术实现本地数据缓存[11]。本地客户端则可以采用程序缓存、文件缓存及轻量级数据库方式。如需要内嵌浏览器页面对本地数据文件、数据库的读取操作，可以通过脚本语言及ActiveX等技术可以实现对本地数据文件、数据库的读取[12]。数据库可以选择文本型数据库，能够支持网页对本地数据库的直接操作。但页面对数据库读取受到浏览器类型及安全性限制，如果在系统开发中需要实现web页面对本地数据文件、数据库的写入，可以按照数据的写入需求通过两种方法实现：

①简单数据写入

通过批处理脚本（bat）方式实现对客户端数据文件、数据库的写操作，注册自定义协议实现对该脚本文件的调用。网站页面中写入包含简单数据的自定义协议参数的链接，点击后可以实现简单数据的快速写入。

②标准数据处理

对于标准数据，利用自定义协议参数传递网站数据接口地址，客户端程序读取根据数据接口地址尝试读取数据，网站标准的数据接口生成相应数据[13]，客户端最终实现数据解析和数据写入。

两种数据处理的调用及参数传递如图3所示。

图3 网站实现对客户端数据存储

5 结 论

文中通过对客户端程序开发重新认识，在客户端程序中集成开源浏览器引擎，以及在网站开发中针对新型客户端程序进行少量代码的更新，较好地实现了从客户端程序这个角度完成C/S与B/S结构开发优势的融合。另外详细探讨了如何实现融合的一些关键技术及方法，该方法对融合C/S与B/S结构开发具有较好的参考意义。

[1]尚瑛，张凯然.基于Windows API文件存储监控技术[J].电子科技，2011，24（7）:152-154.

[2]黄晓波.基于Windows API的异步串口通信软件设计[J].现代电子技术，2011，34（16）:35-38.

[3]党长青.探究浏览器兼容性问题及解决方案[J].技术与市场，2014（8）:212.

[4]查修齐，吴荣泉，高元钧.C/S到B/S模式转换的技术研究[J].计算机工程，2014（1）:263-267.

[5]李永祥.嵌入式浏览器布局渲染引擎的研究与实现[D].成都：电子科技大学，2010.

[6]吴欢.基于WebKit的嵌入式浏览器移植和扩展技术[D].华中科技大学，2013.

[7]宗莲松.基于开源浏览器技术的客户端平台设计[J].成都电子机械高等专科学校学报，2012，15（2）:28-31.

[8]朱前飞，高芒.COM组件和ActiveX技术在B/S体系结构中的应用[J].计算机工程与设计，2005，26（3）: 654-656.

[9]周玲余.基于jQuery框架的页面前端特效的设计与实现[J].计算机与现代化，2013（1）:61-63.

[10]夏立波，毕春光.基于Bootstrap和Wordpress个人博客的搭建[J].电子世界，2014（4）:186-187.

[11]刘华星，杨庚.HTML5——下一代Web开发标准研究[J].计算机技术与发展，2011，21（8）:54-58.

[12]汪倍贝.Web数据库访问技术的研究[J].科技资讯，2010（24）:24-26.

[13]刘兵.计算机软件数据接口的应用分析[J].计算机光盘软件与应用，2012（1）:72.

The way of application development by integration C/S and B/S advantages

LUO Hui-yong，TANG Jin
（People's Bank of China，Taizhou Central Branch，Taizhou 225300，China）

At present，B/S architecture is used more often for the development of information systems，but the C/S architecture still has its advantages.For example，it can use the client operating system's API to complete some work that B/S could not be done；it can also effectively avoid browser compatibility issues.Firstly，the thesis analyzes the advantages and disadvantages between the B/S and the C/S from the view of technicians and then propose how to form a more practical new method through the integration of two structures，providing developers with more choices.

B/S architecture；C/S architecture；integration；program development

TN02

A

1674－6236（2017）10-0014-04

2016-05-02稿件编号：201605006

骆慧勇（1982—），男，江苏姜堰人，工程师。研究方向：Java编程、前台开发、SSO、网络管理、安全管理等。