吳喬 路行 劉云啟

摘 要：?隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，一個(gè)規(guī)范有條理的燃?xì)怆U(xiǎn)下單系統(tǒng)對(duì)于用戶及企業(yè)的員工來(lái)說(shuō)是非常重要的。基于H5、和SSM等技術(shù)開(kāi)發(fā)了一個(gè)燃?xì)怆U(xiǎn)出單流程，實(shí)現(xiàn)用戶可以通過(guò)導(dǎo)入自己的基本信息后直接進(jìn)入燃?xì)怆U(xiǎn)購(gòu)買(mǎi)方案頁(yè)面，選擇適合的套餐后支付，并可以實(shí)時(shí)查詢訂單的狀態(tài)。大大的縮短了下單周期，給用戶帶來(lái)了極大的便捷。

關(guān)鍵詞：?H5; 燃?xì)怆U(xiǎn); SpringMVC

中圖分類號(hào)： TG 4

文獻(xiàn)標(biāo)志碼： A

Design and Development of Gas Insurance Based on H5

WU Qiao， LU Xing， LIU Yunqi

（School of Communication & Information Engineering， Shanghai University， Shanghai 200444， China）

Abstract：

With the continuous development of the Internet technology， a well-organized gas insurance ordering system is very important for users and employees. Through the H5， JS and Spring MVC technologies， a gas insurance billing process has been developed. Users can directly enter the gas insurance purchase plan page by importing their own basic information， select the appropriate package and pay， and can check the status of the order in real time. It greatly shortened the order cycle， brought great convenience to users.

Key words：

H5; gas insurance; Spring MVC

0 引言

如今人們生活水平的不斷提高，對(duì)自己的生活保障也愈來(lái)愈高，購(gòu)買(mǎi)保險(xiǎn)意識(shí)也就更深入人心。在基于我國(guó)人口眾多的大環(huán)境下，保險(xiǎn)這項(xiàng)服務(wù)就在社會(huì)中扮演了很重要的角色。公司在前幾年設(shè)計(jì)并開(kāi)發(fā)上線了一些車險(xiǎn)應(yīng)用APP，隨著用戶需求的增大和業(yè)務(wù)的擴(kuò)張，在原車險(xiǎn)的基礎(chǔ)上新增了一款非車險(xiǎn)—太保燃?xì)怆U(xiǎn)。在公司的客戶運(yùn)維平臺(tái)系統(tǒng)里添加了燃?xì)怆U(xiǎn)模塊，將保險(xiǎn)業(yè)務(wù)和互聯(lián)網(wǎng)結(jié)合起來(lái)，使得辦公人員更快更精準(zhǔn)的定位到客戶信息，便于快速錄入燃?xì)庥脩艟C合險(xiǎn)。

這個(gè)項(xiàng)目用的技術(shù)為H5+SSM，前端采用H5技術(shù)，后端采用Spring+SpringMVC+Mybatis的架構(gòu)。通過(guò)Spring提供的MVC架構(gòu)并配合Spring Web的組合，將前端和后端分離開(kāi)共同合作，這樣高效的方式讓整個(gè)架構(gòu)更易操作。將互聯(lián)網(wǎng)技術(shù)和保險(xiǎn)業(yè)務(wù)結(jié)合會(huì)讓整個(gè)業(yè)務(wù)的用戶體驗(yàn)更佳。

1 開(kāi)發(fā)技術(shù)簡(jiǎn)介

1.1 開(kāi)發(fā)工具

（1） My eclipse：它雖是一個(gè)插件但是功能非常強(qiáng)大，鑒于使用的編程語(yǔ)言是Java，通過(guò)這個(gè)工具可以很好的對(duì)數(shù)據(jù)庫(kù)和Java進(jìn)行開(kāi)發(fā)和發(fā)布。并且可以對(duì)代碼進(jìn)行編碼、調(diào)試和測(cè)試工作，極大提高了整個(gè)項(xiàng)目的工作效率。

（2） Vscode：一款免費(fèi)開(kāi)源的現(xiàn)代化輕量級(jí)代碼編輯器，提供了多平臺(tái)、代碼調(diào)試、插件豐富等優(yōu)點(diǎn)便于開(kāi)發(fā)。

1.2 主要技術(shù)框架

（1） H5技術(shù)

超級(jí)文本標(biāo)記語(yǔ)言是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)。它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。HTML5應(yīng)用作為一種快速傳播的媒介，具有非常重要的推廣和使用價(jià)值。因此，移動(dòng)端HTML5頁(yè)面的快速開(kāi)發(fā)也成了各企業(yè)進(jìn)行自身推廣的一大需求。它既有常見(jiàn)的展示需求，也有開(kāi)發(fā)者自身定義功能的需求，對(duì)于現(xiàn)在市面上的普通HTML5編輯器而言，大多數(shù)情況下只能實(shí)現(xiàn)基本功能的需求，無(wú)法滿足開(kāi)發(fā)者的拓展需要。

在技術(shù)方面，普通HTML5編輯器采用的前后端耦合的開(kāi)發(fā)方式在整個(gè)系統(tǒng)的開(kāi)發(fā)效率和代碼利用率上相對(duì)較差，這種設(shè)計(jì)模式的架構(gòu)無(wú)法適應(yīng)現(xiàn)今靈活多變的功能需求。移動(dòng)端HTML5頁(yè)面快速開(kāi)發(fā)系統(tǒng)設(shè)計(jì)的目的是通過(guò)優(yōu)化目前Web系統(tǒng)的開(kāi)發(fā)模式，完成基于JavaScript構(gòu)建大型網(wǎng)站應(yīng)用的目標(biāo)，最大程度地發(fā)揮系統(tǒng)性能。

JQuery是一個(gè)快速又簡(jiǎn)潔的JS框架，它的選擇機(jī)制夠建于Css的選擇器，提供了快速查詢DOM文檔中元素的能力，而且大大強(qiáng)化了JavaScript中獲取頁(yè)面元素的方式。主要由入口模塊、 底層支持模塊和功能模塊構(gòu)成，在功能模塊中，事件系統(tǒng)提供了統(tǒng)一的事件綁定、響應(yīng)、手動(dòng)觸發(fā)和移除機(jī)制，它并沒(méi)有將事件直接綁定到DOM元素上，而是基于數(shù)據(jù)緩存模塊來(lái)管理事件;Ajax模塊允許從服務(wù)器上加載數(shù)據(jù)，而不用刷新頁(yè)面，它基于異步隊(duì)列模塊來(lái)管理和觸發(fā)回調(diào)函數(shù)。H5的這些優(yōu)點(diǎn)，給開(kāi)發(fā)燃?xì)怆U(xiǎn)帶來(lái)了極大的便利，非常適合開(kāi)發(fā)本文的燃?xì)怆U(xiǎn)系統(tǒng)。

（2）Spring+SpringMVC+Mybatis框架

Spring可以被看做是一個(gè)企業(yè)解決方案級(jí)別的框架。首先客戶端發(fā)送請(qǐng)求，服務(wù)器控制器DispatcherServlet完成請(qǐng)求的轉(zhuǎn)發(fā)，控制器調(diào)用一個(gè)用于映射的類HandlerMapping（是將請(qǐng)求映射到對(duì)應(yīng)的處理器來(lái)處理請(qǐng)求）。HandlerMapping 將請(qǐng)求映射到對(duì)應(yīng)的處理器Controller（相當(dāng)于Action）后，在Spring 當(dāng)中如果寫(xiě)一些處理器組件，一般實(shí)現(xiàn)Controller 接口，在Controller 中就可以調(diào)用一些Service 或DAO 來(lái)進(jìn)行數(shù)據(jù)操作 ModelAndView 用于存放從DAO 中取出的數(shù)據(jù)，還可以存放響應(yīng)視圖的一些數(shù)據(jù)。 如果想將處理結(jié)果返回給用戶，那么在Spring 框架中還提供一個(gè)視圖組件ViewResolver，該組件根據(jù)Controller 返回的標(biāo)示，找到對(duì)應(yīng)的視圖，將響應(yīng)response 返回給用戶。

SpringMVC是一種基于Java，實(shí)現(xiàn)了Web MVC設(shè)計(jì)模式，請(qǐng)求驅(qū)動(dòng)類型的輕量級(jí)Web框架，即使用了MVC架構(gòu)模式的思想，將Web層進(jìn)行職責(zé)解耦。基于請(qǐng)求驅(qū)動(dòng)指的就是使用請(qǐng)求-響應(yīng)模型，框架的目的就是幫助我們簡(jiǎn)化開(kāi)發(fā)，SpringMVC也是要簡(jiǎn)化我們?nèi)粘eb開(kāi)發(fā)。相比傳統(tǒng)的SpringMVC來(lái)說(shuō)，用戶的返回相應(yīng)可以直接傳給控制器，業(yè)務(wù)邏輯和數(shù)據(jù)庫(kù)操作也可以返回結(jié)果給控制器。具體操作如圖1所示。

用戶發(fā)送請(qǐng)求后，前端控制器收到請(qǐng)求后自己不進(jìn)行處理，委托給其他解析器統(tǒng)一處理從而對(duì)全局的流程控制。DispatcherServlet會(huì)把請(qǐng)求映射為HandlerExecutionChain對(duì)象，處理器適配器會(huì)把處理器包裝為適配器，這樣會(huì)支持更多類型的處理器，更好的適應(yīng)業(yè)務(wù)的需求，操作性強(qiáng)。

Mybatis是J2EE應(yīng)用開(kāi)發(fā)中的持久層框架，可以通過(guò)XML文件或者注解來(lái)配置Map接口，開(kāi)發(fā)者通過(guò)Map接口就可以調(diào)用數(shù)據(jù)庫(kù)，實(shí)現(xiàn)SQL語(yǔ)句和程序代碼相分離，使系統(tǒng)的設(shè)計(jì)和開(kāi)發(fā)更加清晰明了[6]。Mybatis框架是程序開(kāi)發(fā)者自己寫(xiě)SQL語(yǔ)句，可以對(duì)數(shù)據(jù)庫(kù)的讀取速率進(jìn)行更深的優(yōu)化，和Hibernate框架相比更加靈活方便，是一種半自動(dòng)化的ORM（對(duì)象關(guān)系映射）實(shí)現(xiàn)。車輛保險(xiǎn)系統(tǒng)的數(shù)據(jù)庫(kù)表結(jié)構(gòu)比較穩(wěn)定，主要操作是對(duì)數(shù)據(jù)進(jìn)行增加和查詢，為了提高讀取數(shù)據(jù)庫(kù)的效率，選擇Mybatis框架作為保險(xiǎn)系統(tǒng)的持久層框架是非常合適的。

2 系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

在原來(lái)都保吧的運(yùn)維平臺(tái)上增加了一個(gè)非車險(xiǎn)模塊—太平洋燃?xì)怆U(xiǎn)，業(yè)務(wù)上支持用戶通過(guò)燃?xì)饫U費(fèi)的鏈接或是通過(guò)網(wǎng)頁(yè)打開(kāi)web版的燃?xì)怆U(xiǎn)產(chǎn)品進(jìn)行投保流程。

2.1 功能設(shè)計(jì)

燃?xì)怆U(xiǎn)模塊下有3個(gè)子菜單：燃?xì)怆U(xiǎn)人員導(dǎo)入、燃?xì)怆U(xiǎn)出單和燃?xì)怆U(xiǎn)人員查詢，這3個(gè)模塊又分為以下幾個(gè)小的功能點(diǎn)。如圖2所示。

燃?xì)怆U(xiǎn)人員導(dǎo)入：分為模塊下載和上傳兩個(gè)子菜單，模塊下載主要是針對(duì)數(shù)據(jù)進(jìn)行統(tǒng)一導(dǎo)入時(shí)的標(biāo)準(zhǔn)模板可供用戶選擇。下載的模板有人員姓名、人員手機(jī)號(hào)、人員證件號(hào)、人員地址、操作員姓名、操作員賬號(hào)和備注這7個(gè)字段，錄入自己的信息到Excel表中。上傳是信息錄入后上傳Excel表，由于有的是操作員進(jìn)行同一統(tǒng)計(jì)用戶的信息，因此支持批量上傳。上傳完成后，后臺(tái)會(huì)對(duì)信息進(jìn)行判斷，即顯示導(dǎo)入成功XX條，導(dǎo)入失敗XX條。

燃?xì)怆U(xiǎn)出單購(gòu)買(mǎi)：分為投保和支付兩個(gè)子菜單，已經(jīng)導(dǎo)入成功的信息可以顯示在頁(yè)面上，點(diǎn)擊進(jìn)行購(gòu)買(mǎi)并直接進(jìn)入出單頁(yè)面。通過(guò)Excel表導(dǎo)入進(jìn)去的信息會(huì)自動(dòng)帶出（投保人信息），再錄入被投保人的名字、手機(jī)號(hào)、郵箱、證件號(hào)碼、被保險(xiǎn)財(cái)產(chǎn)地址。燃?xì)怆U(xiǎn)共有3種方案可供選擇，可以根據(jù)自己的需求選擇適合自己的方案，點(diǎn)擊立即投保即可，支持銀聯(lián)和微信兩種支付方式。

燃?xì)怆U(xiǎn)人員查詢：分為查詢和訂單狀態(tài)兩個(gè)子菜單，燃?xì)怆U(xiǎn)人員查詢模塊，可以通過(guò)導(dǎo)入日期、姓名、手機(jī)號(hào)、證件號(hào)這4個(gè)字段進(jìn)行訂單的查詢。選擇需要查詢的條件后點(diǎn)擊查詢即可。通過(guò)查詢后得到的訂單，會(huì)有未處理和已完成幾個(gè)狀態(tài)，未處理的業(yè)務(wù)允許用戶繼續(xù)下單支付，已完成的業(yè)務(wù)可以查詢保單的訂單詳情。

用戶、燃?xì)夤尽eb系統(tǒng)和保險(xiǎn)公司之間的交互流程如圖3所示。

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

根據(jù)燃?xì)怆U(xiǎn)系統(tǒng)的實(shí)際需求，結(jié)合數(shù)據(jù)庫(kù)的設(shè)計(jì)原則和業(yè)務(wù)系統(tǒng)數(shù)據(jù)庫(kù)的一些關(guān)聯(lián)信息，錄入的人員信息和訂單的相關(guān)信息等的表結(jié)構(gòu)如表1所示。

3 燃?xì)怆U(xiǎn)系統(tǒng)的實(shí)現(xiàn)與測(cè)試

3.1 燃?xì)怆U(xiǎn)系統(tǒng)的實(shí)現(xiàn)

經(jīng)過(guò)開(kāi)發(fā)系統(tǒng)、執(zhí)行測(cè)試用例、發(fā)現(xiàn)bug直至修改完bug，整個(gè)燃?xì)怆U(xiǎn)系統(tǒng)也就實(shí)現(xiàn)了，頁(yè)面的效果圖如圖4所示。

3.2 燃?xì)怆U(xiǎn)系統(tǒng)的測(cè)試

一個(gè)項(xiàng)目從開(kāi)發(fā)到能夠上線給用戶使用需要經(jīng)過(guò)大量的測(cè)試，通過(guò)LoadRunner和UI等軟件自動(dòng)化測(cè)試工具對(duì)整個(gè)系統(tǒng)進(jìn)行功能測(cè)試、性能測(cè)試、壓力測(cè)試。

對(duì)于功能測(cè)試，從導(dǎo)入用戶信息、下單購(gòu)買(mǎi)、支付到最后訂單狀態(tài)的改變中，每種不同的路徑都需要考慮周全，以便達(dá)到最好的用戶體驗(yàn)。下面列出幾個(gè)測(cè)試用例及其結(jié)果：

（1） 在上傳用戶信息時(shí)，由于姓名和身份證號(hào)為必錄，當(dāng)不錄入這兩項(xiàng)中任一項(xiàng)時(shí)提示上傳失敗，并且需要對(duì)身份證號(hào)校驗(yàn)以確保是有效的證件號(hào)，以下是校驗(yàn)的部分代碼

//校驗(yàn)長(zhǎng)度，類型

if （isCardNo（card） === false） {

return false;

}

//檢查號(hào)碼是否符合規(guī)范，包括長(zhǎng)度，類型

function isCardNo（card） {

//身份證號(hào)碼為15位或者18位，15位時(shí)全為數(shù)字，18位前17位為數(shù)字，最后一位是校驗(yàn)位，可能為數(shù)字或字符X

var reg = /（^＼d{15}）|（^＼d{17}（＼d|X））/;

if （reg.test（card） === false） {

return false;

}

return true;

};

上述代碼中的CardNo為校驗(yàn)證件號(hào)長(zhǎng)度的函數(shù)名，還有checkProvince（校驗(yàn)省份）、checkBirthday（校驗(yàn)生日）、verifyBirthday（校驗(yàn)日期）等函數(shù)，就不一一列出了。即證件號(hào)的類型和長(zhǎng)度不符合規(guī)定會(huì)提示證件類型格式對(duì)，再將全國(guó)各個(gè)省份的前兩位代碼錄入，取輸入身份證件號(hào)的前兩位一一核對(duì)，當(dāng)均不符合時(shí)就會(huì)提示錯(cuò)誤?！獪y(cè)試通過(guò)

（2） 已經(jīng)導(dǎo)入成功的數(shù)據(jù)，若再重復(fù)導(dǎo)入也會(huì)提示：導(dǎo)入失敗，該數(shù)據(jù)已存在。通過(guò)這個(gè)操作會(huì)避免數(shù)據(jù)冗余，節(jié)約數(shù)據(jù)庫(kù)的空間?！獪y(cè)試通過(guò)

（3） 投保人的證件類型控制為只能錄入身份證，當(dāng)錄入身份證時(shí)可以繼續(xù)點(diǎn)擊下一步，當(dāng)錄入是非身份證時(shí)，提示：證件類型只支持身份證?！獪y(cè)試通過(guò)

（4） 投保頁(yè)面，必須要閱讀條款須知。當(dāng)沒(méi)有勾選【已閱讀】按鈕時(shí)，提示：請(qǐng)您先閱讀條款須知。——測(cè)試通過(guò)

（5） 上傳用戶信息沒(méi)有錄入地址電話等信息時(shí)，也支持投保下單，當(dāng)投保成功后，再點(diǎn)擊信息查詢時(shí)，用戶的相關(guān)信息需要同步更新到導(dǎo)入信息中?！獪y(cè)試通過(guò)

（6） 已完成支付的單子，點(diǎn)擊燃?xì)怆U(xiǎn)信息查詢找到該單時(shí)，頁(yè)面顯示狀態(tài)為：已完成。為了確保數(shù)據(jù)庫(kù)的狀態(tài)也已經(jīng)生效，打開(kāi)RQX-CUSTOMER-INFO.business表中根據(jù)身份證號(hào)篩選出該單信息，查看對(duì)應(yīng)的STATUS字段顯示為5（表示已完成）?！獪y(cè)試通過(guò)

通過(guò)rational robot自動(dòng)化測(cè)試工具對(duì)整個(gè)系統(tǒng)的性能進(jìn)行測(cè)試，整個(gè)下單過(guò)程用時(shí)2-5min（達(dá)到標(biāo)準(zhǔn)），模擬幾萬(wàn)個(gè)用戶同時(shí)執(zhí)行業(yè)務(wù)，同時(shí)記錄下每一個(gè)事務(wù)的處理時(shí)間、數(shù)據(jù)庫(kù)的狀態(tài)等指標(biāo)等，進(jìn)行長(zhǎng)達(dá)一周不停地運(yùn)行，均可支持業(yè)務(wù)。大量的數(shù)據(jù)記錄可以預(yù)先知道整個(gè)系統(tǒng)的承受能力，這樣就可以為用戶規(guī)劃整個(gè)運(yùn)行環(huán)境的配置提供了有力的證據(jù)。

4 總結(jié)

燃?xì)怆U(xiǎn)系統(tǒng)的開(kāi)發(fā)與應(yīng)用，不僅能夠減輕燃?xì)夤咀飨⑷藛T的工作量，提高工作效率，還能方便用戶自己錄入自己的信息直接進(jìn)行下單過(guò)程。用戶還可以直接進(jìn)入系統(tǒng)查看自己訂單的狀態(tài)。更好的將計(jì)算機(jī)同業(yè)務(wù)結(jié)合起來(lái)，也滿足當(dāng)前公司的發(fā)展需要，使得燃?xì)怆U(xiǎn)出單系統(tǒng)更加系統(tǒng)化、專業(yè)化、規(guī)范化。

參考文獻(xiàn)

[1]?肖云，周輝.新形勢(shì)下車險(xiǎn)營(yíng)銷模式探討[J].合作經(jīng)濟(jì)與科技，2019（1）：117-119.

[2] 李亞麗，張國(guó)平，張青苗.基于Spring MVC的工資管理系統(tǒng)的開(kāi)發(fā)[J].微型電腦應(yīng)用，2018，34（11）：119-123.

[3] 趙子晨，朱志祥，蔣來(lái)好.構(gòu)建基于Dubbo框架的Spring Boot微服務(wù)[J].計(jì)算機(jī)與數(shù)字工程，2018，46（12）：2539-2543.

[4] 李鑫. 移動(dòng)端H5頁(yè)面快速開(kāi)發(fā)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].北京：北京郵電大學(xué)，2018.

[5] 邰振強(qiáng)，唐兆偉，陳思豪等.基于H5與JQ的Windows模擬考核系統(tǒng)Agent設(shè)計(jì)實(shí)現(xiàn)[J].齊齊哈爾大學(xué)學(xué)報(bào)（自然科學(xué)版），2017，33（6）：20-23.

（收稿日期： 2019.07.02）