駱慧勇，湯 進(jìn)

（人民銀行泰州市中心支行 江蘇 泰州225300）

融合C/S和B/S優(yōu)勢(shì)的應(yīng)用程序開(kāi)發(fā)方法

駱慧勇，湯 進(jìn)

（人民銀行泰州市中心支行 江蘇 泰州225300）

當(dāng)前，在信息系統(tǒng)開(kāi)發(fā)中，更多采用B/S結(jié)構(gòu)，但C/S結(jié)構(gòu)仍然具有較為可取的方面，比如可以使用客戶端的操作系統(tǒng)API來(lái)實(shí)現(xiàn)一些B/S無(wú)法完成的工作，也可以有效避免瀏覽器兼容性的問(wèn)題。本文首先從技術(shù)人員角度分析了B/S與C/S相比的優(yōu)勢(shì)及不足，然后再提出如何通過(guò)融合兩種結(jié)構(gòu)的開(kāi)發(fā)思路形成更實(shí)用的新型開(kāi)發(fā)方法，提供開(kāi)發(fā)人員更多的選擇。

B/S結(jié)構(gòu)；C/S結(jié)構(gòu)；融合；程序開(kāi)發(fā)

瀏覽器/服務(wù)器（Browser/Server，B/S）結(jié)構(gòu)的信息系統(tǒng)建設(shè)已經(jīng)深入人心，但由于其依賴(lài)于客戶端瀏覽器帶來(lái)了一些功能性限制。通過(guò)融合客戶端/服務(wù)器（Client/Server，C/S）與瀏覽器/服務(wù)器結(jié)構(gòu)中的優(yōu)勢(shì)，對(duì)突破現(xiàn)有信息系統(tǒng)開(kāi)發(fā)思路，實(shí)現(xiàn)更多的功能滿足信息系統(tǒng)的多樣化需求具有重要的意義。

1 C/S與B/S結(jié)構(gòu)及其特性分析

C/S結(jié)構(gòu)是早期信息系統(tǒng)的構(gòu)架方式，早期其結(jié)構(gòu)為客戶端與數(shù)據(jù)庫(kù)的兩層構(gòu)架，客戶端直接讀取數(shù)據(jù)庫(kù)數(shù)據(jù)，并實(shí)現(xiàn)業(yè)務(wù)邏輯處理。這種方式結(jié)構(gòu)簡(jiǎn)單，但存在可伸縮性、可擴(kuò)展性、數(shù)據(jù)庫(kù)兼容性差等問(wèn)題。后期逐步發(fā)展至客戶端、應(yīng)用服務(wù)器、數(shù)據(jù)庫(kù)服務(wù)器三層構(gòu)架。 在三層構(gòu)架中客戶端程序承擔(dān)著界面展示及用戶交互，用戶通過(guò)客戶端程序?qū)崿F(xiàn)交互及業(yè)務(wù)功能的調(diào)用，服務(wù)器響應(yīng)客戶端程序的請(qǐng)求，實(shí)現(xiàn)數(shù)據(jù)處理及業(yè)務(wù)邏輯。

B/S結(jié)構(gòu)是現(xiàn)在流行的信息系統(tǒng)構(gòu)架方式，主流結(jié)構(gòu)為三層構(gòu)架，分為客戶端展現(xiàn)層、業(yè)務(wù)邏輯層、數(shù)據(jù)庫(kù)層，業(yè)務(wù)邏輯層根據(jù)具體系統(tǒng)需求可以直接通過(guò)提供互聯(lián)網(wǎng)信息服務(wù) （Internet Information Services，IIS）的網(wǎng)站實(shí)現(xiàn)，也可以通過(guò)網(wǎng)站與應(yīng)用服務(wù)器集合實(shí)現(xiàn)。在B/S結(jié)構(gòu)中客戶機(jī)瀏覽器實(shí)現(xiàn)界面展示及用戶交互，信息系統(tǒng)部署于業(yè)務(wù)邏輯層，網(wǎng)站實(shí)現(xiàn)客戶機(jī)瀏覽器操作的響應(yīng)，網(wǎng)站或應(yīng)用服務(wù)器實(shí)現(xiàn)業(yè)務(wù)邏輯處理。

2 C/S與B/S結(jié)構(gòu)程序優(yōu)缺點(diǎn)對(duì)比

1）功能對(duì)比

C/S結(jié)構(gòu)的客戶端程序能夠調(diào)用操作系統(tǒng)底層應(yīng)用程序編程接口（Application Programming Interface，API）實(shí)現(xiàn)一些脫離瀏覽器的系統(tǒng)功能，例如屏幕截取、鍵盤(pán)操作截取、文件監(jiān)控[1]、串行接口通信[2]等。B/S結(jié)構(gòu)中瀏覽器前臺(tái)技術(shù)的大量出現(xiàn)，能夠?qū)崿F(xiàn)更合理的頁(yè)面數(shù)據(jù)展示，同時(shí)由于大量前臺(tái)動(dòng)態(tài)處理技術(shù)的出現(xiàn)，可以通過(guò)前臺(tái)實(shí)現(xiàn)更復(fù)雜的業(yè)務(wù)邏輯。

2）適用性對(duì)比

C/S結(jié)構(gòu)的客戶端程序具有獨(dú)立性，需要單獨(dú)安裝客戶端程序并進(jìn)行配置，而B(niǎo)/S結(jié)構(gòu)僅需要安裝有適用Web瀏覽器的客戶端。當(dāng)業(yè)務(wù)需求發(fā)生變更需要對(duì)信息系統(tǒng)進(jìn)行升級(jí)改造時(shí)，C/S結(jié)構(gòu)需要對(duì)客戶端進(jìn)行重新部署，而B(niǎo)/S結(jié)構(gòu)僅需對(duì)后臺(tái)服務(wù)器網(wǎng)站或服務(wù)器程序進(jìn)行重新部署即可。

3）兼容性對(duì)比

C/S結(jié)構(gòu)客戶端程序的兼容性主要依賴(lài)操作系統(tǒng)，客戶端程序一般兼容性較高，而B(niǎo)/S結(jié)構(gòu)的信息系統(tǒng)客戶端展示主要依賴(lài)于瀏覽器，由于B/S前臺(tái)技術(shù)的更新速度較快，出現(xiàn)了大量瀏覽器兼容性問(wèn)題，表現(xiàn)為新型前臺(tái)技術(shù)無(wú)法被老版瀏覽器識(shí)別，造成界面無(wú)法展示甚至業(yè)務(wù)邏輯無(wú)法實(shí)現(xiàn)[3]。根據(jù)2015年百度統(tǒng)計(jì)對(duì)瀏覽器市場(chǎng)份額分析，國(guó)內(nèi)目前IE瀏覽器8.0及以下版本瀏覽器仍然占到32.24%，在企業(yè)內(nèi)部這個(gè)比例更高。由于兼容性問(wèn)題，開(kāi)發(fā)人員不得不放棄新技術(shù)及部分功能的實(shí)現(xiàn)。

4）安全性對(duì)比

B/S結(jié)構(gòu)下數(shù)據(jù)的處理主要由服務(wù)器執(zhí)行，服務(wù)器僅傳輸客戶端需要展示的數(shù)據(jù)，對(duì)底層數(shù)據(jù)實(shí)現(xiàn)了一定的隱藏。C/S結(jié)構(gòu)下，如數(shù)據(jù)處理的設(shè)計(jì)層次不合理，則會(huì)造成底層數(shù)據(jù)直接暴露于網(wǎng)絡(luò)，所以C/S結(jié)構(gòu)對(duì)網(wǎng)絡(luò)的安全性要求更高。

5）部署要求

在B/S結(jié)構(gòu)中服務(wù)器集中處理客戶端的訪問(wèn)，需要處理數(shù)據(jù)的調(diào)用、傳送、計(jì)算、展示，對(duì)服務(wù)器性能要求較高。采用C/S結(jié)構(gòu)則可以將部分運(yùn)算和展示交付給客戶端，將數(shù)據(jù)的調(diào)用、傳送等功能交付于應(yīng)用服務(wù)器或者數(shù)據(jù)庫(kù)服務(wù)器，能夠降低對(duì)服務(wù)器性能的要求。

3 C/S與B/S結(jié)構(gòu)融合思考

C/S與B/S結(jié)構(gòu)的結(jié)合可以從多個(gè)角度進(jìn)行思考，比如從服務(wù)器構(gòu)架角度、從數(shù)據(jù)調(diào)用角度、從模式轉(zhuǎn)換角度[4]等。在這些方法中，在結(jié)構(gòu)上仍將客戶端應(yīng)用分為客戶端程序及瀏覽器應(yīng)用。這樣做的好處是通過(guò)各自比較成熟的開(kāi)發(fā)技術(shù)分別實(shí)現(xiàn)相關(guān)功能，但技術(shù)人員需要實(shí)現(xiàn)需要利用不同的開(kāi)發(fā)技術(shù)分別實(shí)現(xiàn)，對(duì)開(kāi)發(fā)人員技術(shù)要求較高。日后維護(hù)升級(jí)時(shí)，可能存在對(duì)兩者都要升級(jí)的情況，增加了維護(hù)成本。

通過(guò)開(kāi)發(fā)融合型客戶端即能夠展現(xiàn)B/S結(jié)構(gòu)中的網(wǎng)站內(nèi)容，又可以獨(dú)立完成部分需要操作系統(tǒng)底層API支持的功能。這樣做不會(huì)對(duì)開(kāi)發(fā)、維護(hù)造成新的明顯負(fù)擔(dān)，且能集成B/S的集中維護(hù)的優(yōu)點(diǎn)。融合主要從集成方式、調(diào)用方向、數(shù)據(jù)存放3個(gè)角度進(jìn)行思考。

1）集成方式分類(lèi)

瀏覽器集成有3種方式，分別為調(diào)用操作系統(tǒng)瀏覽器、引入第三方瀏覽器和內(nèi)嵌瀏覽器。3種方式各有優(yōu)缺點(diǎn)，通過(guò)調(diào)用操作系統(tǒng)瀏覽器的方式可以簡(jiǎn)化軟件開(kāi)發(fā)難度，但卻受制于操作系統(tǒng)內(nèi)置瀏覽器的兼容性，特別是IE瀏覽器的兼容性飽受詬病，開(kāi)發(fā)中更需要考慮各版本IE的兼容性。通過(guò)引入第三方瀏覽器的方式可以避免兼容性問(wèn)題，不過(guò)由于需要獨(dú)立安裝，用戶對(duì)所需客戶端之外再安裝多余瀏覽器程序存在接受度問(wèn)題。采用內(nèi)嵌瀏覽器則需要較高的技術(shù)能力，同時(shí)會(huì)增加客戶端軟件的大小。

2）調(diào)用方向分類(lèi)

通過(guò)瀏覽功能的調(diào)用可以較好實(shí)現(xiàn)客戶端軟件能夠調(diào)用網(wǎng)站頁(yè)面，實(shí)現(xiàn)界面展示、業(yè)務(wù)功能等。另外在集成后還有另外一種可能需求，就是通過(guò)瀏覽器調(diào)用客戶端操作系統(tǒng)某程序、客戶端程序或者客戶端程序的某個(gè)功能。

3）數(shù)據(jù)存放分類(lèi)

融合型客戶端生成數(shù)據(jù)主要通過(guò)網(wǎng)站將數(shù)據(jù)集中存放于數(shù)據(jù)庫(kù)。但部分?jǐn)?shù)據(jù)可以采用網(wǎng)站存放，例如網(wǎng)站訪問(wèn)量、特殊字符集、過(guò)濾規(guī)則等網(wǎng)站前臺(tái)可能用到的非業(yè)務(wù)數(shù)據(jù)。也有部分?jǐn)?shù)據(jù)可以通過(guò)優(yōu)化設(shè)計(jì)等實(shí)現(xiàn)客戶端本地存放，例如用戶未正式提交的業(yè)務(wù)數(shù)據(jù)，也可以為用戶定制本地文件緩存。

4 融合開(kāi)發(fā)的方法

C/S與B/S結(jié)構(gòu)融合開(kāi)發(fā)本文主要集中在客戶端應(yīng)用程序，為了實(shí)現(xiàn)較好的融合，可以從多個(gè)方向考慮以實(shí)現(xiàn)較好的優(yōu)化，例如可以利用socket編程技術(shù)截取并分析特定字符、深入改造內(nèi)置瀏覽器引擎實(shí)現(xiàn)自定義控件解析[5]等多種方法，但這些方法對(duì)開(kāi)發(fā)技術(shù)要求較高，本文通過(guò)以下步驟進(jìn)行融合。

1）集成方式的選擇

經(jīng)過(guò)對(duì)融合集成方式的思考，客戶體驗(yàn)比較好的集成方式是利用內(nèi)嵌瀏覽器，具體開(kāi)發(fā)中可以采用開(kāi)源瀏覽器引擎進(jìn)行集成[6]。客戶端本省不集成具體業(yè)務(wù)功能和邏輯處理，僅提供界面展示、數(shù)據(jù)調(diào)用等基礎(chǔ)功能[7]。

2）網(wǎng)站頁(yè)面調(diào)用本地程序或功能

在調(diào)用方向上，網(wǎng)站頁(yè)面也應(yīng)能夠調(diào)用本地可執(zhí)行程序。Windows可以通過(guò)注冊(cè)自定義協(xié)議實(shí)現(xiàn)調(diào)用。

以注冊(cè)自定義demo協(xié)議為例，瀏覽器中調(diào)用方法為，客戶端windows系統(tǒng)自定義協(xié)議注冊(cè)文件為：

除了該方法外，還有NPAPI插件方式、瀏覽器擴(kuò)展（Browser Extenstion）、ActiveX[8]等多種方式，有些需要特定領(lǐng)域的專(zhuān)業(yè)知識(shí)，也受到具體瀏覽器以及安全性限制，本文不做詳細(xì)討論。

3）客戶端式子窗口的實(shí)現(xiàn)

在C/S結(jié)構(gòu)的程序中，子窗口、確認(rèn)窗口是常規(guī)操作，如果使用網(wǎng)站頁(yè)面，會(huì)出現(xiàn)限制彈出窗口的范圍、彈出窗口會(huì)被母窗口包裹、限制拖動(dòng)或遮蓋等，造成用戶界面友好感下降，如圖1所示。

圖1 彈出窗口集成轉(zhuǎn)變

為了更好地實(shí)現(xiàn)融合，點(diǎn)擊網(wǎng)頁(yè)應(yīng)該能夠?qū)崿F(xiàn)對(duì)新窗口的大小和位置的訂制。通過(guò)自定義協(xié)議參數(shù)傳遞是一個(gè)較為簡(jiǎn)單的方法。首先客戶端程序加載網(wǎng)站父頁(yè)面，當(dāng)點(diǎn)擊按鈕或超鏈接時(shí)則將含有子窗口、位置參數(shù)信息的自定義協(xié)議參數(shù)發(fā)送至客戶端程序。其次客戶程序通過(guò)內(nèi)部處理在指定位置生成指定大小的內(nèi)置瀏覽器窗口并加載子頁(yè)面。用戶操作形成的結(jié)果通過(guò)自定義協(xié)議參數(shù)再發(fā)送至客戶端程序。最后客戶端程序嘗試重新加載父頁(yè)面，并同時(shí)將用戶操作結(jié)果通過(guò)網(wǎng)址的方式發(fā)送給父頁(yè)面，父頁(yè)面進(jìn)行頁(yè)面處理并相應(yīng)重新加載。相關(guān)調(diào)用及參數(shù)傳遞如圖2所示。

重點(diǎn)代碼舉例：

圖2 子窗口調(diào)用及參數(shù)傳遞

3）重要細(xì)節(jié)優(yōu)化技術(shù)

為了給用戶良好的融合感，可優(yōu)化一些細(xì)節(jié)，例如頁(yè)面菜單注意不要出現(xiàn)被母窗口限制、屏蔽瀏覽器原有右鍵菜單等。除此之外，還有一些需要重點(diǎn)注意的技術(shù)，相關(guān)內(nèi)容如下：

①在網(wǎng)站開(kāi)發(fā)中頁(yè)面信息較為豐富，而客戶端程序所需頁(yè)面信息可能不多，可以在網(wǎng)站中對(duì)子窗口調(diào)用開(kāi)發(fā)分析功能，根據(jù)地址參數(shù)，通過(guò)JavaScript、JQuery等腳本語(yǔ)言動(dòng)態(tài)操作父頁(yè)面的文檔對(duì)象模型（Document Object Model，DOM）[9]，提取展現(xiàn)信息動(dòng)態(tài)生成子窗口。該方法也可以實(shí)現(xiàn)網(wǎng)站正常頁(yè)面與調(diào)用頁(yè)面的區(qū)分，實(shí)現(xiàn)同一頁(yè)面不同展示。

②采用融合開(kāi)發(fā)方法，還應(yīng)注重網(wǎng)站前臺(tái)開(kāi)發(fā)，實(shí)現(xiàn)頁(yè)面對(duì)瀏覽器窗口大小的自適應(yīng)，能夠根據(jù)窗口大小調(diào)整頁(yè)面布局，這樣做將能極大提高客戶端程序的調(diào)用靈活度。利用現(xiàn)有比較成熟的響應(yīng)式開(kāi)發(fā)前臺(tái)框架，如Bootstrap等，可減少開(kāi)發(fā)工作量[10]。

4）客戶端數(shù)據(jù)存儲(chǔ)

客戶端程序可以利用內(nèi)嵌瀏覽器及本地客戶端兩種方法實(shí)現(xiàn)數(shù)據(jù)緩存功能，內(nèi)嵌瀏覽器方式可以利用本地cookies實(shí)現(xiàn)數(shù)據(jù)緩存，也可利用當(dāng)前流行的html5相關(guān)技術(shù)實(shí)現(xiàn)本地?cái)?shù)據(jù)緩存[11]。本地客戶端則可以采用程序緩存、文件緩存及輕量級(jí)數(shù)據(jù)庫(kù)方式。如需要內(nèi)嵌瀏覽器頁(yè)面對(duì)本地?cái)?shù)據(jù)文件、數(shù)據(jù)庫(kù)的讀取操作，可以通過(guò)腳本語(yǔ)言及ActiveX等技術(shù)可以實(shí)現(xiàn)對(duì)本地?cái)?shù)據(jù)文件、數(shù)據(jù)庫(kù)的讀取[12]。數(shù)據(jù)庫(kù)可以選擇文本型數(shù)據(jù)庫(kù)，能夠支持網(wǎng)頁(yè)對(duì)本地?cái)?shù)據(jù)庫(kù)的直接操作。但頁(yè)面對(duì)數(shù)據(jù)庫(kù)讀取受到瀏覽器類(lèi)型及安全性限制，如果在系統(tǒng)開(kāi)發(fā)中需要實(shí)現(xiàn)web頁(yè)面對(duì)本地?cái)?shù)據(jù)文件、數(shù)據(jù)庫(kù)的寫(xiě)入，可以按照數(shù)據(jù)的寫(xiě)入需求通過(guò)兩種方法實(shí)現(xiàn)：

①簡(jiǎn)單數(shù)據(jù)寫(xiě)入

通過(guò)批處理腳本（bat）方式實(shí)現(xiàn)對(duì)客戶端數(shù)據(jù)文件、數(shù)據(jù)庫(kù)的寫(xiě)操作，注冊(cè)自定義協(xié)議實(shí)現(xiàn)對(duì)該腳本文件的調(diào)用。網(wǎng)站頁(yè)面中寫(xiě)入包含簡(jiǎn)單數(shù)據(jù)的自定義協(xié)議參數(shù)的鏈接，點(diǎn)擊后可以實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)的快速寫(xiě)入。

②標(biāo)準(zhǔn)數(shù)據(jù)處理

對(duì)于標(biāo)準(zhǔn)數(shù)據(jù)，利用自定義協(xié)議參數(shù)傳遞網(wǎng)站數(shù)據(jù)接口地址，客戶端程序讀取根據(jù)數(shù)據(jù)接口地址嘗試讀取數(shù)據(jù)，網(wǎng)站標(biāo)準(zhǔn)的數(shù)據(jù)接口生成相應(yīng)數(shù)據(jù)[13]，客戶端最終實(shí)現(xiàn)數(shù)據(jù)解析和數(shù)據(jù)寫(xiě)入。

兩種數(shù)據(jù)處理的調(diào)用及參數(shù)傳遞如圖3所示。

圖3 網(wǎng)站實(shí)現(xiàn)對(duì)客戶端數(shù)據(jù)存儲(chǔ)

5 結(jié) 論

文中通過(guò)對(duì)客戶端程序開(kāi)發(fā)重新認(rèn)識(shí)，在客戶端程序中集成開(kāi)源瀏覽器引擎，以及在網(wǎng)站開(kāi)發(fā)中針對(duì)新型客戶端程序進(jìn)行少量代碼的更新，較好地實(shí)現(xiàn)了從客戶端程序這個(gè)角度完成C/S與B/S結(jié)構(gòu)開(kāi)發(fā)優(yōu)勢(shì)的融合。另外詳細(xì)探討了如何實(shí)現(xiàn)融合的一些關(guān)鍵技術(shù)及方法，該方法對(duì)融合C/S與B/S結(jié)構(gòu)開(kāi)發(fā)具有較好的參考意義。

[1]尚瑛，張凱然.基于Windows API文件存儲(chǔ)監(jiān)控技術(shù)[J].電子科技，2011，24（7）:152-154.

[2]黃曉波.基于Windows API的異步串口通信軟件設(shè)計(jì)[J].現(xiàn)代電子技術(shù)，2011，34（16）:35-38.

[3]黨長(zhǎng)青.探究瀏覽器兼容性問(wèn)題及解決方案[J].技術(shù)與市場(chǎng)，2014（8）:212.

[4]查修齊，吳榮泉，高元鈞.C/S到B/S模式轉(zhuǎn)換的技術(shù)研究[J].計(jì)算機(jī)工程，2014（1）:263-267.

[5]李永祥.嵌入式瀏覽器布局渲染引擎的研究與實(shí)現(xiàn)[D].成都：電子科技大學(xué)，2010.

[6]吳歡.基于WebKit的嵌入式瀏覽器移植和擴(kuò)展技術(shù)[D].華中科技大學(xué)，2013.

[7]宗蓮松.基于開(kāi)源瀏覽器技術(shù)的客戶端平臺(tái)設(shè)計(jì)[J].成都電子機(jī)械高等專(zhuān)科學(xué)校學(xué)報(bào)，2012，15（2）:28-31.

[8]朱前飛，高芒.COM組件和ActiveX技術(shù)在B/S體系結(jié)構(gòu)中的應(yīng)用[J].計(jì)算機(jī)工程與設(shè)計(jì)，2005，26（3）: 654-656.

[9]周玲余.基于jQuery框架的頁(yè)面前端特效的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與現(xiàn)代化，2013（1）:61-63.

[10]夏立波，畢春光.基于Bootstrap和Wordpress個(gè)人博客的搭建[J].電子世界，2014（4）:186-187.

[11]劉華星，楊庚.HTML5——下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)研究[J].計(jì)算機(jī)技術(shù)與發(fā)展，2011，21（8）:54-58.

[12]汪倍貝.Web數(shù)據(jù)庫(kù)訪問(wèn)技術(shù)的研究[J].科技資訊，2010（24）:24-26.

[13]劉兵.計(jì)算機(jī)軟件數(shù)據(jù)接口的應(yīng)用分析[J].計(jì)算機(jī)光盤(pán)軟件與應(yīng)用，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稿件編號(hào)：201605006

駱慧勇（1982—），男，江蘇姜堰人，工程師。研究方向：Java編程、前臺(tái)開(kāi)發(fā)、SSO、網(wǎng)絡(luò)管理、安全管理等。