邊檢“V通關”微信服務平臺的設計與實現

盧 冶， 翟東濤， 過錫偉

(1. 江蘇科技大學 電氣與信息工程學院,江蘇 張家港 215600; 2. 張家港金典軟件有限公司,江蘇 張家港 215600; 3. 張家港邊防檢查站，江蘇 張家港 215600)

?

邊檢“V通關”微信服務平臺的設計與實現

盧 冶1， 翟東濤2， 過錫偉3

(1. 江蘇科技大學 電氣與信息工程學院,江蘇 張家港 215600; 2. 張家港金典軟件有限公司,江蘇 張家港 215600; 3. 張家港邊防檢查站，江蘇 張家港 215600)

伴隨移動互聯技術的迅猛發展，面對眾多的船務代理公司和代理人員，為提高邊防檢查工作效率和服務管理水平，設計并實現了讓廣大服務對象享受快速優質通關服務的平臺。微信前臺基于 HTML、CSS、JavaScript 設計自適應網頁，負責采集多媒體信息；業務處理在 Struts2、Spring 和 Hibernate 框架的基礎上，結合前端框架 Ext-JS，構建了公眾賬號服務器應用程序。多媒體信息的發送和接收，實現了即時消息傳達和溝通互動；Ext-JS 良好的組件化設計提升了 Web 界面品質和開發效率。平臺的應用促進了邊檢服務模式的轉變，也為管理工作進入新的層次奠定了基礎。

微信； 多媒體信息； 邊防檢查； Ext-JS

0 引 言

微信是一個為智能終端提供即時通訊服務的免費應用程序。它的通信功能和社交功能實現和提升了用戶間的互動交流，平臺化功能則提供了一種新型的移動應用開發方式[1]。微信公眾平臺作為微信最為重要的組成部分，吸引著眾多企業和個人開發者不斷加入到微信開發陣營，陸續在公眾平臺上創建并推廣自己的品牌和服務。

張家港邊防檢查站[2]經國務院批準成立于1982年8月，主要擔負長江水域張家港段63.57 km內的26個對外開放碼頭、74個開放泊位、15個江心浮筒和2個檢疫錨地的出入境邊防檢查任務。伴隨移動互聯技術的迅猛發展，面對眾多的船務代理公司和代理人員，為了進一步創新便民、利民舉措，創優邊檢服務管理水平，需要構建一套智能化、信息化、高效率、互動性強的整體解決方案：① 對于船務代理公司和代理人員的信息進行現場備案；② 通過微信前臺頁面采集服務對象的多媒體業務數據(文本、聲音、圖片、視頻等)并發送到部署了Web 應用的公眾賬號服務器上；③ 邊檢值班人員及時應對處理并將結果反饋到服務對象的手機上；④ 統計和備份服務對象發生的業務數據，并實現與原有業務系統的無縫對接。

基于上述業務需求，本文設計并實現了邊檢“V通關”微信服務平臺(簡稱邊檢通關平臺)。平臺是邊檢機關通過微信渠道讓廣大服務對象享受快速優質通關服務的完整方案。微信前臺基于HTML、CSS、JavaScript[3-5]設計自適應網頁；業務處理在 Struts2、Spring 和 Hibernate[4-6]框架的基礎上，結合Web 前端框架Ext-JS[7]，構建了公眾賬號服務器應用程序。除了具有政策法規發布、在線咨詢回復、投訴建議受理等信息推送、互動基礎服務功能外，主要受理登輪證辦理、船舶移泊申請、船舶實際抵離港時間申報三項業務。平臺實現了邊檢服務管理工作從傳統的計算機應用模式向移動互聯管理模式的轉變。

1 系統設計

1.1 系統架構

為了滿足特定業務需求，諸如實現用戶身份驗證、對接企業的業務系統、實現個性化回復等，需要企業注冊公眾服務帳號、啟用開發模式、并且部署 Web 應用的公網環境。用戶持有的手機終端是邊檢通關平臺的感知層，負責業務數據的全面采集。公眾賬號服務器是后臺處理程序，是傳統的 Web 應用環境，全面處理和統計前端采集的數據并將結果反饋給手機用戶，以實現信息傳達、動態交互和智能管理。

1.2 開發架構

邊檢通關平臺的開發架構如圖1所示。微信前臺創建自定義功能菜單，分為6個模塊：用戶授權模塊、登輪許可證辦理模塊、在港船舶移泊申請模塊、實際抵離港時間申報模塊、在線咨詢模塊和舉報投訴模塊。

圖1 邊檢通關平臺的開發架構

業務前臺與微信前臺對應，除上述6個功能模塊以外，還包括：現場備案模塊、日志管理模塊和系統管理模塊。

(1) 現場備案模塊。持有手機的船務代理人員必須進行現場備案，才能進行業務操作。備案模塊分為公司備案與個人備案，個人備案必須在公司備案的基礎上進行。備案過程由一系列資料的提交與處理構成，以便查詢與追溯備案的過程與結果。除了提交規定的資料以外，還需要處理以下關鍵信息，以建立備案數據的多重關聯關系，如圖2所示。

圖2 備案數據的多重關聯

(2) 登輪許可證辦理模塊。負責辦理登輪手續。登輪證分為三種：普通登輪證、從事供應、加油、維修等業務登輪證(需要《船方委托書》(照片))和船員親屬登輪證(需要《船方申請》(照片)、親屬關系證明(照片))。服務對象通過實名備案后，就可以通過手機直接進行登輪許可的申請。邊檢值班人員在接到申請后，對通過審核的服務對象推送一個二維碼圖片，服務對象憑借二維碼圖片到碼頭出示給檢查人員，通過警務通的驗證后即可直接登輪。

(3) 在港船舶移泊申請模塊。負責邊檢站所轄港口的船舶從原來的靠泊地移動到另一靠泊地的時間申請和批準。

(4) 抵離港申請模塊。負責邊檢站所轄港口的船舶到達和駛離時間的申請和批準。

(5) 在線咨詢和舉報投訴模塊。服務對象通過手機發送文本、圖片和聲音等多媒體信息。業務前臺接收信息后可以實時播放這些多媒體文件，邊檢值班人員根據咨詢和投訴內容，通過富文本編輯器編輯多媒體信息進行回復。

(6) 用戶授權模塊。實現邊檢通關平臺用戶(船務代理人員和邊檢值班人員)的動態管理。菜單對象定義系統的不同功能模塊；角色對象指定不同角色所擁有的等級和權限；用戶授權功能則為指定用戶分配角色，從而不同的用戶會看到不同的菜單內容。微信前臺對于不同角色的用戶會推送不同的信息；業務前臺則以樹型結構進行菜單的動態呈現[8]。

(7) 日志管理模塊。邊檢值班人員的所有操作都將記錄日志。日志管理模塊能夠按照業務模塊和值班人員進行操作查詢和數據統計。

(8) 系統管理模塊。負責邊檢值班人員的信息管理、密碼修改、以及業務常用回復信息的動態維護等。

1.3 技術架構

從技術架構來說，邊檢通關平臺的微信前臺基于 HTML、CSS、JavaScript 和 AJAX[9]技術實現；公眾賬號服務器以 Struts2、Spring 和 Hibernate 框架為基礎，采用了基于 B/S 結構的多層架構設計思想，結合 Web 前端框架——Ext-JS，把系統實現為頁面表示層、控制層、業務層、數據訪問層和數據持久層。Struts2、Spring 與 Hibernate 整合在一起，能夠有效搭建三層或多層系統，不僅可以解耦、職責劃分清晰，還有利于提高可維護性和可擴展性。Spring 是服務于所有層面的應用程序，提供了 Bean 的配置基礎、AOP 的支持、JDBC 提取框架、抽象事務支持等，還有效地組織了系統中的中間層對象，消除了組件對象創建與使用耦合緊密的問題[10]。Hibernate 充分利用提供的 O/R 映射功能，采用DAO 設計模式與數據庫進行交互。該模式不僅將前端技術與后端技術完全分離，還能夠保證源碼簡練和完全面向對象風格[11]。數據庫使用MySQL，Web 服務器為 Tomcat。

2 系統分析與實現

2.1 發送HTTPS請求

創建自定義菜單、獲取手機用戶基本信息、篩選關注者列表、上傳及下載多媒體文件等功能，都需要調用公眾平臺開放的接口，這些接口是基于HTTPS協議的。HTTPS是HTTP和SSL/TLS協議的組合，用于提供加密通信以及對網絡服務器身份的驗證。SSL協議使用X.509認證，包括加密的網絡上客戶端和服務器相互發送的信息；驗證消息在傳送過程是否被人改動；用RSA公鑰方法驗證服務器；驗證客戶身份[12]。

JSSE(Java Secure Socket Extension) 是一個 SSL 和 TLS 的純 Java 實現，可以透明地提供數據加密、服務器認證、信息完整性等功能。JSSE 將危險的安全弱點降到最低，并且可以減輕開發者的負擔，使得開發者可以很容易編程實現對 HTTPS 站點的訪問。

客戶端在連接 SSL 服務器時，SSL 服務器會將自己的證書鏈交給客戶端驗證。如果在證書鏈中發現存在無效的證書，客戶端會立即終止連接?？蛻舳说?TrustStore 文件保存著被客戶端所信任的服務器的證書信息，JSSE 正是根據 TrustStore 文件決定是否信任服務器端的證書。

JSSE 提供了一系列應用程序編程接口以及這些接口的實現類[13]。其中有一個默認的信任管理器類，它負責決定是否信任服務器端的證書?？蛻舳嗽L問 HTTPS 鏈接時，有兩種方法能夠讓 JSSE 信任 HTTPS 服務器端的安全證書：一是將 HTTPS 服務器端的安全證書導入到客戶端的 TrustStore 文件中，該方法相對安全，但是如果服務器端證書經常變化，則非常不方便；二是實現自定義的信任管理器類；該方法避免手工導入證書，相對靈活[14]。

邊檢通關平臺采用了自定義的信任管理器。管理器類實現了 X509TrustManager 接口，并實現了該接口的3個方法：① checkClientTrusted() 方法用于檢查客戶端的證書；② checkServerTtrusted() 方法用于檢查服務器端的證書；③ getAcceptedIssuers() 方法返回受信任的 X509 證書數組。

2.2 自定義菜單接口

通過調用自定義菜單接口，能夠實現菜單的創建、查詢與刪除。自定義菜單項通常被看作是按鈕，按鈕的類型有Click(點擊事件)和 View(訪問網頁)兩種。Click 類型按鈕會根據微信服務器返回的 Key 值和 Event 事件進行消息響應；而 View 類型的按鈕則會通過微信內置瀏覽器訪問開發者指定的 URL。

(1) 菜單結構說明。由于 JSON 格式的數據簡單、便捷，所以向微信服務器提交的菜單結構采用 JSON 格式。但是，JSON 格式沒有 XML 格式一目了然，尤其是 JSON 數據很長的時候，會陷入繁瑣復雜的數據節點查找中；同時，使用手工或者字符串拼接的方式實現編輯，容易出錯，也不利于代碼的閱讀和后期維護，所以要借助 JSON 開源工具包。

(2) 封裝菜單結構。菜單的層級分為一級和二級，通常為 3*5 的菜單結構。首先將菜單按鈕封裝成 Button 對象，然后按照結構將按鈕對象分為三類：ComplexButton 對象為一級菜單；二級菜單分別是 ClickButton 對象和 ViewButton 對象。Menu 對象是三類按鈕對象的組合。在獲取到 Menu 對象后，使用 JSON-lib 工具包將 Menu 對象轉換成 JSON 字符串提交給微信服務器。

(3) 響應菜單點擊事件。菜單創建完成后，手機客戶端將會看到效果。點擊 View 類型的按鈕會打開指定的 URL，此時由于無法獲取用戶的發送方賬號(對于一個公眾賬號，用戶擁有一個唯一的發送方賬號)，那么 View 類型的按鈕會指向邊檢動態、使用幫助、活動宣傳、值班信息等頁面。而 Click 類型的按鈕則需要通過邊檢通關平臺接收事件消息，并經由 OAuth2.0 實現網頁授權進入業務處理頁面。

自定義功能菜單和菜單項鏈接頁面如圖3所示。

圖3 功能菜單和鏈接頁面

2.3 多媒體數據交互

構建公眾賬號服務器應用程序，主要是發揮微信平臺其信息流轉、連接用戶與業務、實現溝通互動的服務特點。因此，消息的發送、接收與響應是后臺處理中的重中之重。

通常，公眾平臺的消息交互流程如下：當微信用戶向公眾賬號發送消息時，微信服務器將信息以 XML 數據包的形式發送到開發者填寫的 URL 上。后臺處理程序接收消息并進行處理，然后按原路返回特定的 XML 結構進行消息響應。目前支持文本、圖片、圖文、語音、視頻、音樂格式。

(1) 消息的分類。微信服務器與公眾賬號服務器交互的消息可以分為 3 類：請求消息、事件和響應消息。請求消息是由手機用戶發送給公眾賬號的消息。事件是用戶對公眾賬號做出某種操作(如關注操作)時，微信服務器會將對應的事件推送給公眾賬號服務器。響應消息是公眾賬號回復給手機用戶的消息。

(2) 上傳及下載多媒體文件。公眾賬號服務器應用程序在接收用戶發送的多媒體消息時，需要憑借唯一的 media_id 從微信服務器上下載多媒體文件，并可以在線播放和查閱；同樣地，公眾賬號服務器應用程序給手機用戶回復多媒體消息時，也需要預先將多媒體文件上傳到微信服務器，上傳成功后會返回唯一的 media_id。

(3) 富文本編輯器。登輪證辦理、在港船舶移泊申請、抵離港時間申報的在線回復中需要編輯包含多個段落的文本信息；在線咨詢、舉報投訴的回復內容還需要編輯多媒體信息。因此，基于 Ext-JS 的 HTMLEditor 組件并做適當擴展[15]，實現了一個富文本編輯器。它不僅可以管理符合 HTML 規范的文檔信息，還能夠實現圖片、聲音、視頻文件的上傳，還可以查看符合 HTML 規范的源代碼。

手機客戶端多媒體消息的接收和推送的登輪二維碼圖片見圖4，該二維碼是使用 QRCode 生成的。

圖4 手機終端接收多媒體消息和二維碼

2.4 增強用戶體驗

在構建邊檢通關平臺的手機頁面和公眾賬號后臺處理程序時，十分注重細節的設計，方便船務代理人員和邊檢值班人員的使用，增強用戶體驗。

(1) 國籍模糊查詢。由于船舶隸屬于 200 多個國家，因此在手機終端填寫國籍信息時需要進行模糊查詢。采用 JavaScript 構建了基于浮動 DIV 的下拉列表框，列表框的國籍數據會根據文本框輸入動態生成，選中國籍后會把完整國籍信息顯示在對應文本框中。

(2) 阻止表單重復提交。在測試的過程中，發現華為 P6 手機在業務提交成功后，點擊回退按鈕時會重復提交數據。因此，采用 Struts2 的 Token 機制，避免表單數據的重復提交。

(3) 查詢船務代理人員的備案信息及業務歷史數據。在 5個業務功能查詢結果中，點擊代理人姓名鏈接，即可查詢出其備案信息及業務辦理歷史數據(共多少、通過多少次、未通過多少次)。

(4) 消息提醒。當有手機用戶提交數據時，需要在邊檢通關平臺的后臺處理程序中實時提醒值班人員。因此，采用了類似電子郵箱的處理機制。當有任何業務數據提交時，會在屏幕的右下角以小窗口+語音的形式提醒值班人員，并在相應業務菜單的后面提示未處理數據的條數。當數據處理完畢后，對應未處理條數會相應遞減。

(5) Web 在線踢人。為了保證每名值班人員只能在一臺機器上登錄，實現了 Web 在線踢人功能。首先創建一個 Map 容器，Key 值為值班人員的姓名，Value 為值班人員對象。然后創建一個 Session 監聽器去監聽 Session 屬性的創建。當檢測到有 Session 的屬性 username 添加時，就會把對應的 Session 中 username 屬性清空。最后創建一個攔截器，攔截器會根據登錄時間判斷登錄次序的先后，舊的登錄人員只能跳轉到登錄頁面。

3 結 語

本文針對移動互聯發展趨勢中，邊檢服務多元化信息處理、以及簡化客戶處理流程的需求，借助微信渠道設計并實現了邊檢“V通關”微信服務平臺。平臺由手機頁面和公眾賬號服務器應用程序兩部分構成。手機頁面通過 HTML、CSS、JavaScript 控制自適應網頁設計；公眾賬號服務器程序則基于 SSH + Ext-JS 框架。其優點在于：多媒體消息的發送、接收以及在線播放與編輯，實現了即時信息傳達和溝通互動；與現有邊檢業務系統的無縫對接，讓廣大服務對象享受了快速優質通關服務；Ext-JS 良好的組件化設計提升了 Web 界面品質和開發效率。平臺的應用促進了邊檢服務模式的轉變，簡化了業務處理流程，提高了工作效率，也為管理工作進入新的層次奠定了基礎。

[1] 王 萍. 微信移動學習平臺建設與應用[J]. 現代教育技術, 2014, 24(5): 88-95.

[2] 張家港邊防檢查站[EB/OL]. http://www.zjgbjz.com/index.asp, 2014.

[3] David Flanagan. JavaScript權威指南(第6版)[M]. 北京: 機械工業出版社, 2012.

[4] 李 剛. 輕量級Java EE企業應用實戰(第3版)[M]. 北京: 電子工業出版社, 2014.

[5] 陳雄華, 林開雄. Spring 3.x企業應用開發實戰. 北京: 電子工業出版社, 2013.

[6] 孫衛琴. 精通 Hibernate：Java對象持久化技術(第2版)[M]. 北京:電子工業出版社, 2010.

[7] 衛 軍, 夏慧軍, 孟臘春, 等. ExtJS Web應用程序開發指南(第2版)[M]. 北京:機械工業出版社, 2011.

[8] 李天鳴, 何月順. 基于ExtJS技術與SSH框架的權限管理研究[J]. 計算機應用與軟件, 2011, 28(5): 165-166.

[9] 余建潮, 汪進前, 葉秉良, 等. 基于Ajax的實驗室安全知識培訓系統研發[J]. 實驗室研究與探索, 2012, 31(2): 195-197.

[10] 盧 冶, 徐 明, 蘇 勇. 一個基于Ext-JS技術的污水管理信息平臺的設計與實現[J]. 計算機應用與軟件, 2013, 30(9): 241-244.

[11] 盧 冶, 徐 明, 蘇 勇. 農村環境連片整治長效管理感知平臺的設計[J]. 實驗室研究與探索, 2014, 33(2): 118-121.

[12] 梁敏鴻, 陳平華. 基于JSSE和SOAP頭的Web服務安全通信的研究與實現[J]. 現代計算機(專業版), 2012, (6): 49-53.

[13] 王偉強, 唐晶磊, 劉忠彥. 基于JSSE的可擴展安全通信系統設計與實現[J]. 計算機工程與設計, 2009, 30(3): 597-599.

[14] 柳 峰. 微信公眾平臺應用開發方法、技巧與案例[M]. 北京: 機械工業出版社, 2014.

[15] Ext-JS擴展Htmleditor[EB/OL]. http://hi.baidu.com/jackvoilet/blog/item/38551a3dc709d40cbba16717.html,2010-03-27.

Design and Implementation of a Convenient Wechat Service Platform for Immigration Inspection

LUYe,ZHAIDong-tao,GUOXi-wei

(1. School of Electrical and Information Engineering, Jiangsu University of Science and Technology, Zhangjiang,215600, China; 2. Zhangjiagang Kingteam Software Co., Ltd, Zhangjiang, 215600, China; 3. Zhangjiagang Immigration Inspection Station, Zhangjiagang 215600, China)

With the rapid development of mobile networking, facing on the numerous shipping agent companies and agency staff, in order to improve the efficiency and management level of the immigration inspection, a platform which provides top quality service for the large-scale customers is designed and implemented. On the one hand, the Wechat front end whose responsibility is to gather multi-media information is made up of the adaptive web pages by means of HTML, CSS and JavaScript. On the other hand, a web application deployed to a public accounts server is constructed based on Struts2, Spring, Hibernate and Ext-JS. Due to the transmission and reception of multi-media information, the information delivery and communication interaction are achieved. Moreover, good component-based programming in Ext-JS effectively improved the quality of web pages and development efficiency. The application of this platform has promoted the transformation of the service mode, and also laid the foundation for the immigration inspection management entering a new level.

wechat; multi-media message; immigration inspection; Ext-JS

2015-01-24

盧 冶(1975-)，女，遼寧大連人，碩士，講師/工程師，研究方向為自然語言處理與軟件工程。

Tel.：0512-56731561，18962234056；E-mail：houyily@126.com

TP 311

A

1006-7167(2015)10-0092-04