基于Hybrid模式的互聯(lián)網(wǎng)投保業(yè)務(wù)系統(tǒng)移動(dòng)應(yīng)用設(shè)計(jì)與實(shí)現(xiàn)

馬嘉敏

摘 要：在移動(dòng)互聯(lián)網(wǎng)時(shí)代，為了滿足不斷擴(kuò)張的保險(xiǎn)市場(chǎng)與提高投保業(yè)務(wù)效率，設(shè)計(jì)并開(kāi)發(fā)了基于Hybrid模式的互聯(lián)網(wǎng)投保業(yè)務(wù)系統(tǒng)，實(shí)現(xiàn)用戶在線選購(gòu)產(chǎn)品、保險(xiǎn)下單、分享注冊(cè)以及業(yè)務(wù)管理的功能。為了實(shí)現(xiàn)跨平臺(tái)運(yùn)行，系統(tǒng)移動(dòng)應(yīng)用基于混合模式進(jìn)行開(kāi)發(fā)，前端選用輕量級(jí)的Vue.js 框架，后臺(tái)采用Dubbo+SSM的分布式系統(tǒng)架構(gòu)，具有代碼低耦合、擴(kuò)展性強(qiáng)、穩(wěn)定性高的特點(diǎn)。該系統(tǒng)對(duì)接多家保險(xiǎn)公司和專業(yè)經(jīng)代公司，且支持跨平臺(tái)應(yīng)用，具有更豐富的資源、更高的投保效率和更好的用戶體驗(yàn)，滿足互聯(lián)網(wǎng)時(shí)代保險(xiǎn)行業(yè)與投?？蛻舻男枨蟆?/p>

關(guān)鍵詞：Hybrid模式;投保業(yè)務(wù)系統(tǒng);Vue.js;分布式系統(tǒng)

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 引言

隨著互聯(lián)網(wǎng)的快速發(fā)展，我國(guó)保險(xiǎn)業(yè)也進(jìn)入高速發(fā)展階段，成為以客戶為核心的競(jìng)爭(zhēng)時(shí)代。因此保險(xiǎn)業(yè)與互聯(lián)網(wǎng)開(kāi)始探索深度融合，各種互聯(lián)網(wǎng)保險(xiǎn)機(jī)構(gòu)不斷涌現(xiàn)，健康險(xiǎn)、意外險(xiǎn)、家財(cái)險(xiǎn)等產(chǎn)品層出不窮，業(yè)務(wù)規(guī)模呈迅速擴(kuò)張的態(tài)勢(shì)。傳統(tǒng)的營(yíng)銷渠道與服務(wù)方式已無(wú)法滿足不斷擴(kuò)張的保險(xiǎn)市場(chǎng)，開(kāi)發(fā)一個(gè)支持多產(chǎn)品多渠道公正化營(yíng)銷的“互聯(lián)網(wǎng)+保險(xiǎn)”系統(tǒng)勢(shì)在必行。本項(xiàng)目針對(duì)當(dāng)前保險(xiǎn)行業(yè)的特點(diǎn)與投?？蛻舻男枨?，開(kāi)發(fā)的保險(xiǎn)業(yè)務(wù)系統(tǒng)對(duì)接多家保險(xiǎn)公司與多渠道專業(yè)經(jīng)代公司，具有以下特點(diǎn)：（1） 高效高頻化，可在移動(dòng)客戶端實(shí)時(shí)實(shí)地完成投保業(yè)務(wù)。（2） 產(chǎn)品多樣化，與太平洋、眾安、平安保險(xiǎn)等多家保險(xiǎn)公司合作，多種類型保險(xiǎn)產(chǎn)品能夠滿足用戶需求。（3） 專業(yè)便捷化，專業(yè)經(jīng)代公司能為用戶選擇合適的產(chǎn)品與投保方案。（4） 公正客觀化，多渠道業(yè)務(wù)員不受限于一家保險(xiǎn)公司，推薦產(chǎn)品以客戶為核心。

本文主要介紹了基于Hybrid模式的互聯(lián)網(wǎng)投保業(yè)務(wù)系統(tǒng)移動(dòng)應(yīng)用的設(shè)計(jì)與實(shí)現(xiàn)，為了提升用戶體驗(yàn)、降低開(kāi)發(fā)成本以及跨平臺(tái)運(yùn)行，系統(tǒng)移動(dòng)端采用Hybrid混合開(kāi)發(fā)模式，可以同時(shí)兼顧Native App本地資源訪問(wèn)能力，以及Web App可跨平臺(tái)的優(yōu)勢(shì)，實(shí)現(xiàn)了“一次開(kāi)發(fā)，多處運(yùn)行”的機(jī)制[1]。

1 系統(tǒng)移動(dòng)應(yīng)用總體設(shè)計(jì)

1.1 系統(tǒng)移動(dòng)應(yīng)用技術(shù)架構(gòu)設(shè)計(jì)

本文設(shè)計(jì)的互聯(lián)網(wǎng)投保業(yè)務(wù)系統(tǒng)移動(dòng)應(yīng)用主要由移動(dòng)客戶端和服務(wù)器端組成，客戶端使用Axios技術(shù)向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器端接收到請(qǐng)求后對(duì)數(shù)據(jù)進(jìn)行業(yè)務(wù)邏輯操作，最后將數(shù)據(jù)封裝成JSON格式反饋給客戶端?；旌祥_(kāi)發(fā)即在Android/IOS App的WebView容器內(nèi)嵌入HTML5網(wǎng)頁(yè)，底層需要Native提供的WebView容器，上層通過(guò)Html+Css+JS技術(shù)展現(xiàn)界面的交互效果，通信層由Native端的橋JS Bridge與JS端組成[2]，其架構(gòu)圖，如圖1所示。

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

1.2 投保業(yè)務(wù)功能主要模塊設(shè)計(jì)

根據(jù)互聯(lián)網(wǎng)保險(xiǎn)行業(yè)的特點(diǎn)以及用戶投保業(yè)務(wù)的需求，系統(tǒng)移動(dòng)應(yīng)用面向多渠道業(yè)務(wù)員及其團(tuán)隊(duì)下級(jí)成員，主要有分享注冊(cè)、保險(xiǎn)下單以及我的業(yè)務(wù)功能模塊，功能架構(gòu)圖，如圖2所示。

分享注冊(cè)模塊可實(shí)現(xiàn)業(yè)務(wù)員分享產(chǎn)品列表或者個(gè)人名片到微信，其團(tuán)隊(duì)下級(jí)成員通過(guò)微信鏈接快速注冊(cè)并進(jìn)行保險(xiǎn)下單;保險(xiǎn)下單模塊則是移動(dòng)端的核心模塊，由Native與H5結(jié)合實(shí)現(xiàn)，包括選擇產(chǎn)品、確定方案、投保校驗(yàn)、錄入信息、報(bào)價(jià)、支付等流程;我的業(yè)務(wù)模塊由Native實(shí)現(xiàn)，業(yè)務(wù)員可便捷查詢訂單，并對(duì)未完成的訂單進(jìn)行管理。

1.3 數(shù)據(jù)庫(kù)設(shè)計(jì)

投保業(yè)務(wù)系統(tǒng)移動(dòng)應(yīng)用的核心業(yè)務(wù)流程是從用戶進(jìn)行產(chǎn)品列表查詢開(kāi)始，然后選擇產(chǎn)品進(jìn)行保險(xiǎn)下單，到最終訂單管理。中間主要涉及到用戶信息表、產(chǎn)品列表、訂單列表等，結(jié)合數(shù)據(jù)庫(kù)的設(shè)計(jì)原則和業(yè)務(wù)系統(tǒng)數(shù)據(jù)庫(kù)的一些關(guān)聯(lián)信息，投保業(yè)務(wù)流程主要數(shù)據(jù)庫(kù)表設(shè)計(jì)，如圖3所示。

圖中列舉了用戶信息表（UserInfo）、產(chǎn)品列表（ProductList）、方案列表（ScenarioList）、訂單表（OrderList）、關(guān)系人信息表（CustomerInfo）中包含主要信息的幾個(gè)字段，1：1以及1：N表示數(shù)據(jù)庫(kù)表之間的1對(duì)1和1對(duì)多的關(guān)系。

2 系統(tǒng)移動(dòng)應(yīng)用的實(shí)現(xiàn)

2.1 投保頁(yè)面布局的實(shí)現(xiàn)

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

2.2 保險(xiǎn)下單模塊的實(shí)現(xiàn)

根據(jù)系統(tǒng)后臺(tái)架構(gòu)設(shè)計(jì)，保險(xiǎn)下單的每個(gè)模塊都是通過(guò)Axios技術(shù)向服務(wù)器發(fā)送請(qǐng)求，調(diào)用對(duì)應(yīng)的后臺(tái)接口實(shí)現(xiàn)的，其中主要涉及到產(chǎn)品列表查詢接口、保費(fèi)查詢接口、職業(yè)類別查詢接口、生成訂單接口、支付方式查詢接口以及訂單列表查詢接口等。以保險(xiǎn)下單流程中調(diào)用保費(fèi)查詢接口為例，當(dāng)用戶選擇投保方案以及錄入基本信息后，前端會(huì)調(diào)用保費(fèi)查詢接口getPremiumService，后臺(tái)獲取到請(qǐng)求參數(shù)并進(jìn)行相關(guān)業(yè)務(wù)邏輯操作，最后前端通過(guò).then（ ）方法獲取JSON格式的數(shù)據(jù)并展示給用戶。系統(tǒng)目前支持醫(yī)療險(xiǎn)、重疾險(xiǎn)、意外險(xiǎn)等6個(gè)保險(xiǎn)產(chǎn)品的投保業(yè)務(wù)，以百萬(wàn)醫(yī)療產(chǎn)品為例保險(xiǎn)下單流程示意圖，如圖4所示。

2.3 分享注冊(cè)模塊的實(shí)現(xiàn)

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

2.4 分布式系統(tǒng)的實(shí)現(xiàn)

由于系統(tǒng)的設(shè)計(jì)需要考慮易于擴(kuò)展不同業(yè)務(wù)規(guī)則的保險(xiǎn)產(chǎn)品，以及支持高并發(fā)下的正常使用，因此通過(guò)Dubbo+SSM的分布式系統(tǒng)架構(gòu)把業(yè)務(wù)邏輯分離出來(lái)，作為一個(gè)獨(dú)立的模塊與前端進(jìn)行交互，可以實(shí)現(xiàn)代碼低耦合，擴(kuò)展性強(qiáng)、穩(wěn)定性高。系統(tǒng)前端的每個(gè)模塊作為消費(fèi)者，Zookeeper作為注冊(cè)中心，后臺(tái)對(duì)應(yīng)的接口模塊作為生產(chǎn)者。后臺(tái)通過(guò)配置文件為前端模塊暴露服務(wù)接口，使前端應(yīng)用能快速和穩(wěn)定地響應(yīng)請(qǐng)求，在配置文件中對(duì)Dubbo進(jìn)行配置的代碼實(shí)現(xiàn)如下。

基于上述設(shè)計(jì)與開(kāi)發(fā)，系統(tǒng)移動(dòng)應(yīng)用的實(shí)現(xiàn)效果，如圖5所示。

3 測(cè)試結(jié)果

在基于Hybrid模式的互聯(lián)網(wǎng)投保業(yè)務(wù)系統(tǒng)移動(dòng)應(yīng)用中，首先通過(guò)編寫和執(zhí)行測(cè)試用例，完成了功能測(cè)試。為保證系統(tǒng)能夠在多用戶使用時(shí)穩(wěn)定運(yùn)行，通過(guò)soapUI、LoadRunner等自動(dòng)化測(cè)試工以及Andriod測(cè)試工具GT進(jìn)行性能測(cè)試，投保業(yè)務(wù)系統(tǒng)中調(diào)用的部分接口相關(guān)參數(shù)，如表1所示。

從測(cè)試數(shù)據(jù)中可以看出，生成訂單接口平均響應(yīng)時(shí)間較快，而產(chǎn)品列表接口和職業(yè)類別查詢接口響應(yīng)時(shí)間較長(zhǎng)，是由于的請(qǐng)求和返回的參數(shù)過(guò)多，造成加載時(shí)間較慢，但平均響應(yīng)時(shí)間能在4秒以內(nèi)達(dá)到并發(fā)300個(gè)請(qǐng)求，符合系統(tǒng)性能要求。由于采用Hybrid混合開(kāi)發(fā)模式，分別在Andriod和IOS系統(tǒng)進(jìn)行測(cè)試，各個(gè)功能模塊均滿足用戶需求，因此跨平臺(tái)性能符合要求。

4 總結(jié)

本文介紹的互聯(lián)網(wǎng)投保業(yè)務(wù)系統(tǒng)移動(dòng)應(yīng)用在技術(shù)上采用Hybrid混合開(kāi)發(fā)模式，具有低成本、高效率以及跨平臺(tái)運(yùn)行的優(yōu)勢(shì)，移動(dòng)客戶端投保功能模塊設(shè)計(jì)合理，并采用分布式系統(tǒng)架構(gòu)，便于產(chǎn)品擴(kuò)展和后期維護(hù)。業(yè)務(wù)上對(duì)接多家保險(xiǎn)公司與專業(yè)經(jīng)代渠道，能為用戶提供高效便捷公正的投保體驗(yàn)，移動(dòng)應(yīng)用性能符合要求。在移動(dòng)互聯(lián)網(wǎng)時(shí)代，該系統(tǒng)能夠滿足不斷擴(kuò)張的保險(xiǎn)市場(chǎng)，有效提高用戶投保業(yè)務(wù)效率，具有“高效高頻化、產(chǎn)品多樣化、專業(yè)便捷化、公正客觀化”的特點(diǎn)。

參考文獻(xiàn)

[1] 劉鵬.基于Hybrid App混合模式的跨平臺(tái)移動(dòng)互聯(lián)醫(yī)患服務(wù)平臺(tái)構(gòu)建研究[J].中國(guó)數(shù)字醫(yī)學(xué)，2017，12（5）：68-70.

[2] 趙英軍. Hybrid模式系統(tǒng)框架的設(shè)計(jì)與應(yīng)用[D].大連：大連海事大學(xué)，2018.

[3] 鄧雯婷.基于Vue.js構(gòu)建單頁(yè)面GIS應(yīng)用的方法研究[J].科技創(chuàng)新與應(yīng)用，2018（14）：5-7.

[4] 張中玉. 基于DUBBO和SSM的口腔門診管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].杭州：浙江工業(yè)大學(xué)，2017.

[5] 張志遠(yuǎn). 基于Android混合模式開(kāi)發(fā)的實(shí)習(xí)寶軟件[D].北京：北京郵電大學(xué)，2016.

（收稿日期：2019.08.28）