基于H5的燃?xì)怆U設(shè)計與開發(fā)

吳喬 路行 劉云啟

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

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

中圖分類號： 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 引言

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

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

1 開發(fā)技術(shù)簡介

1.1 開發(fā)工具

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

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

1.2 主要技術(shù)框架

（1） H5技術(shù)

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

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

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

（2）Spring+SpringMVC+Mybatis框架

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

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

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

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

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

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

2.1 功能設(shè)計

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

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

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

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

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

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

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

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

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

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

3.2 燃?xì)怆U系統(tǒng)的測試

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

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

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

//校驗長度，類型

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

return false;

}

//檢查號碼是否符合規(guī)范，包括長度，類型

function isCardNo（card） {

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

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

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

return false;

}

return true;

};

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

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

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

（4） 投保頁面，必須要閱讀條款須知。當(dāng)沒有勾選【已閱讀】按鈕時，提示：請您先閱讀條款須知?！獪y試通過

（5） 上傳用戶信息沒有錄入地址電話等信息時，也支持投保下單，當(dāng)投保成功后，再點擊信息查詢時，用戶的相關(guān)信息需要同步更新到導(dǎo)入信息中。——測試通過

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

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

4 總結(jié)

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

參考文獻(xiàn)

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

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

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

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

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

（收稿日期： 2019.07.02）