基于Hybrid模式的互聯網投保業務系統移動應用設計與實現

馬嘉敏

摘 要：在移動互聯網時代，為了滿足不斷擴張的保險市場與提高投保業務效率，設計并開發了基于Hybrid模式的互聯網投保業務系統，實現用戶在線選購產品、保險下單、分享注冊以及業務管理的功能。為了實現跨平臺運行，系統移動應用基于混合模式進行開發，前端選用輕量級的Vue.js 框架，后臺采用Dubbo+SSM的分布式系統架構，具有代碼低耦合、擴展性強、穩定性高的特點。該系統對接多家保險公司和專業經代公司，且支持跨平臺應用，具有更豐富的資源、更高的投保效率和更好的用戶體驗，滿足互聯網時代保險行業與投保客戶的需求。

關鍵詞：Hybrid模式;投保業務系統;Vue.js;分布式系統

Abstract：In the era of mobile Internet， in order to meet the need of expanding insurance market and improve the efficiency of insurance business， a hybrid app-based Internet insurance business system was designed and developed to realize the functions for users purchasing products online， ordering insurance， sharing registration and managing business. In order to achieve cross-platform operation， the system mobile application is developed based on the hybrid mode. Its front-end selects the lightweight Vue.js framework， and the background uses the distributed system architecture integrated with Dubbo and SSM. It has low code coupling， strong scalability and high stability features. The system connects a number of insurance companies and professional generation companies， and supports cross-platform applications， with richer resources， higher insurance efficiency and better user experience. It meets the needs of the insurance industry and insured customers in the Internet age.

Key words：Hybrid App;insurance business system;Vue.js;distributed systems

0 引言

隨著互聯網的快速發展，我國保險業也進入高速發展階段，成為以客戶為核心的競爭時代。因此保險業與互聯網開始探索深度融合，各種互聯網保險機構不斷涌現，健康險、意外險、家財險等產品層出不窮，業務規模呈迅速擴張的態勢。傳統的營銷渠道與服務方式已無法滿足不斷擴張的保險市場，開發一個支持多產品多渠道公正化營銷的“互聯網+保險”系統勢在必行。本項目針對當前保險行業的特點與投保客戶的需求，開發的保險業務系統對接多家保險公司與多渠道專業經代公司，具有以下特點：（1） 高效高頻化，可在移動客戶端實時實地完成投保業務。（2） 產品多樣化，與太平洋、眾安、平安保險等多家保險公司合作，多種類型保險產品能夠滿足用戶需求。（3） 專業便捷化，專業經代公司能為用戶選擇合適的產品與投保方案。（4） 公正客觀化，多渠道業務員不受限于一家保險公司，推薦產品以客戶為核心。

本文主要介紹了基于Hybrid模式的互聯網投保業務系統移動應用的設計與實現，為了提升用戶體驗、降低開發成本以及跨平臺運行，系統移動端采用Hybrid混合開發模式，可以同時兼顧Native App本地資源訪問能力，以及Web App可跨平臺的優勢，實現了“一次開發，多處運行”的機制[1]。

1 系統移動應用總體設計

1.1 系統移動應用技術架構設計

本文設計的互聯網投保業務系統移動應用主要由移動客戶端和服務器端組成，客戶端使用Axios技術向服務器發送請求，服務器端接收到請求后對數據進行業務邏輯操作，最后將數據封裝成JSON格式反饋給客戶端。混合開發即在Android/IOS App的WebView容器內嵌入HTML5網頁，底層需要Native提供的WebView容器，上層通過Html+Css+JS技術展現界面的交互效果，通信層由Native端的橋JS Bridge與JS端組成[2]，其架構圖，如圖1所示。

移動客戶端表現層選用輕量級的Vue.js框架，通過引入MVVM模型實現系統的展示邏輯與業務邏輯分離，當用戶在View層的操作通過數據綁定和指令傳遞給View-Model，然后更新Model;當Model的數據變更后，View-Model會自動追蹤變化，最終數據自動更新到View，這種方式稱為雙向數據綁定[3]。同時，通過前端路由插件Vue-router展示不同路徑對應的頁面內容，以及通過狀態管理模式Vuex實現組件外部統一管理狀態。服務器端主要采用Dubbo+SSM的分布式系統架構為客戶端暴露服務接口，Dubbo管理層通過負責不同Tomcat服務器之間的遠程服務調用實現服務層的負載均衡[4]。

1.2 投保業務功能主要模塊設計

根據互聯網保險行業的特點以及用戶投保業務的需求，系統移動應用面向多渠道業務員及其團隊下級成員，主要有分享注冊、保險下單以及我的業務功能模塊，功能架構圖，如圖2所示。

分享注冊模塊可實現業務員分享產品列表或者個人名片到微信，其團隊下級成員通過微信鏈接快速注冊并進行保險下單;保險下單模塊則是移動端的核心模塊，由Native與H5結合實現，包括選擇產品、確定方案、投保校驗、錄入信息、報價、支付等流程;我的業務模塊由Native實現，業務員可便捷查詢訂單，并對未完成的訂單進行管理。

1.3 數據庫設計

投保業務系統移動應用的核心業務流程是從用戶進行產品列表查詢開始，然后選擇產品進行保險下單，到最終訂單管理。中間主要涉及到用戶信息表、產品列表、訂單列表等，結合數據庫的設計原則和業務系統數據庫的一些關聯信息，投保業務流程主要數據庫表設計，如圖3所示。

圖中列舉了用戶信息表（UserInfo）、產品列表（ProductList）、方案列表（ScenarioList）、訂單表（OrderList）、關系人信息表（CustomerInfo）中包含主要信息的幾個字段，1：1以及1：N表示數據庫表之間的1對1和1對多的關系。

2 系統移動應用的實現

2.1 投保頁面布局的實現

系統的頁面布局設計要滿足通用性高，便于產品的后期維護和擴展。投保頁面基于H5開發，整個布局組件都集中在template內，主要由頂部圖片顯示區域，中間主體頁面與底部導航欄組成。主體頁面通過選項卡van-tabs標簽實現“產品介紹”、“保障詳情”和“服務詳情”3個頁面的切換，其中“產品介紹”頁面將需要顯示的多張圖片存入一個二維數組，用v-for指令根據該數組的選項列表進行渲染加載本地圖片;“服務詳情”頁面則是通過設置字體樣式，顯示Q-A形式的問題解答;“保障詳情”頁面根據全家桶產品和個人款產品的業務邏輯不同，通過對象方法實現Vue動態綁定class，在不同的產品中控制“個人款”與“家庭款”的顯示。底部導航欄實時展示當前的保費、金豆，以及跳轉頁面的按鈕。

2.2 保險下單模塊的實現

根據系統后臺架構設計，保險下單的每個模塊都是通過Axios技術向服務器發送請求，調用對應的后臺接口實現的，其中主要涉及到產品列表查詢接口、保費查詢接口、職業類別查詢接口、生成訂單接口、支付方式查詢接口以及訂單列表查詢接口等。以保險下單流程中調用保費查詢接口為例，當用戶選擇投保方案以及錄入基本信息后，前端會調用保費查詢接口getPremiumService，后臺獲取到請求參數并進行相關業務邏輯操作，最后前端通過.then（ ）方法獲取JSON格式的數據并展示給用戶。系統目前支持醫療險、重疾險、意外險等6個保險產品的投保業務，以百萬醫療產品為例保險下單流程示意圖，如圖4所示。

2.3 分享注冊模塊的實現

在混合開發模塊中，實現將產品列表的H5頁面分享到微信。以Andriod App為例，產品列表頁面頭部調用Android布局文件include_headview.xml設置分享和返回按鈕，主體界面通過Android頁面容器類Webview的loadUrl（ ）方法實現H5頁面加載。其中要對WebView進行配置，例如設置支持JS、兼容中文、可以訪問本地文件等。當用戶觸發點擊事件“分享”按鈕時，頁面底部彈出分享到微信好友或朋友圈的選項。IWXAPI是第三方app和微信通信的openapi接口[5]，實現分享功能首先要獲取IWXAPI 實例，然后在AndroidManifest.xml中設置權限將應用的AppID注冊到微信，接著還需在wxapi目錄下新增一個繼承自Activity的WXEntryActivity類，用來實現IWXAPIEventHandler接口微信客戶端回調activity。當業務員成功分享到微信后，團隊下級成員可通過微信鏈接完成注冊并進行保險下單。

2.4 分布式系統的實現

由于系統的設計需要考慮易于擴展不同業務規則的保險產品，以及支持高并發下的正常使用，因此通過Dubbo+SSM的分布式系統架構把業務邏輯分離出來，作為一個獨立的模塊與前端進行交互，可以實現代碼低耦合，擴展性強、穩定性高。系統前端的每個模塊作為消費者，Zookeeper作為注冊中心，后臺對應的接口模塊作為生產者。后臺通過配置文件為前端模塊暴露服務接口，使前端應用能快速和穩定地響應請求，在配置文件中對Dubbo進行配置的代碼實現如下。

基于上述設計與開發，系統移動應用的實現效果，如圖5所示。

3 測試結果

在基于Hybrid模式的互聯網投保業務系統移動應用中，首先通過編寫和執行測試用例，完成了功能測試。為保證系統能夠在多用戶使用時穩定運行，通過soapUI、LoadRunner等自動化測試工以及Andriod測試工具GT進行性能測試，投保業務系統中調用的部分接口相關參數，如表1所示。

從測試數據中可以看出，生成訂單接口平均響應時間較快，而產品列表接口和職業類別查詢接口響應時間較長，是由于的請求和返回的參數過多，造成加載時間較慢，但平均響應時間能在4秒以內達到并發300個請求，符合系統性能要求。由于采用Hybrid混合開發模式，分別在Andriod和IOS系統進行測試，各個功能模塊均滿足用戶需求，因此跨平臺性能符合要求。

4 總結

本文介紹的互聯網投保業務系統移動應用在技術上采用Hybrid混合開發模式，具有低成本、高效率以及跨平臺運行的優勢，移動客戶端投保功能模塊設計合理，并采用分布式系統架構，便于產品擴展和后期維護。業務上對接多家保險公司與專業經代渠道，能為用戶提供高效便捷公正的投保體驗，移動應用性能符合要求。在移動互聯網時代，該系統能夠滿足不斷擴張的保險市場，有效提高用戶投保業務效率，具有“高效高頻化、產品多樣化、專業便捷化、公正客觀化”的特點。

參考文獻

[1] 劉鵬.基于Hybrid App混合模式的跨平臺移動互聯醫患服務平臺構建研究[J].中國數字醫學，2017，12（5）：68-70.

[2] 趙英軍. Hybrid模式系統框架的設計與應用[D].大連：大連海事大學，2018.

[3] 鄧雯婷.基于Vue.js構建單頁面GIS應用的方法研究[J].科技創新與應用，2018（14）：5-7.

[4] 張中玉. 基于DUBBO和SSM的口腔門診管理系統的設計與實現[D].杭州：浙江工業大學，2017.

[5] 張志遠. 基于Android混合模式開發的實習寶軟件[D].北京：北京郵電大學，2016.

（收稿日期：2019.08.28）