基于H5的燃氣險設計與開發

吳喬 路行 劉云啟

摘 要：?隨著互聯網技術的不斷發展，一個規范有條理的燃氣險下單系統對于用戶及企業的員工來說是非常重要的。基于H5、和SSM等技術開發了一個燃氣險出單流程，實現用戶可以通過導入自己的基本信息后直接進入燃氣險購買方案頁面，選擇適合的套餐后支付，并可以實時查詢訂單的狀態。大大的縮短了下單周期，給用戶帶來了極大的便捷。

關鍵詞：?H5; 燃氣險; SpringMVC

中圖分類號： TG 4

文獻標志碼： 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 引言

如今人們生活水平的不斷提高，對自己的生活保障也愈來愈高，購買保險意識也就更深入人心。在基于我國人口眾多的大環境下，保險這項服務就在社會中扮演了很重要的角色。公司在前幾年設計并開發上線了一些車險應用APP，隨著用戶需求的增大和業務的擴張，在原車險的基礎上新增了一款非車險—太保燃氣險。在公司的客戶運維平臺系統里添加了燃氣險模塊，將保險業務和互聯網結合起來，使得辦公人員更快更精準的定位到客戶信息，便于快速錄入燃氣用戶綜合險。

這個項目用的技術為H5+SSM，前端采用H5技術，后端采用Spring+SpringMVC+Mybatis的架構。通過Spring提供的MVC架構并配合Spring Web的組合，將前端和后端分離開共同合作，這樣高效的方式讓整個架構更易操作。將互聯網技術和保險業務結合會讓整個業務的用戶體驗更佳。

1 開發技術簡介

1.1 開發工具

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

（2） Vscode：一款免費開源的現代化輕量級代碼編輯器，提供了多平臺、代碼調試、插件豐富等優點便于開發。

1.2 主要技術框架

（1） H5技術

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

在技術方面，普通HTML5編輯器采用的前后端耦合的開發方式在整個系統的開發效率和代碼利用率上相對較差，這種設計模式的架構無法適應現今靈活多變的功能需求。移動端HTML5頁面快速開發系統設計的目的是通過優化目前Web系統的開發模式，完成基于JavaScript構建大型網站應用的目標，最大程度地發揮系統性能。

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

（2）Spring+SpringMVC+Mybatis框架

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

SpringMVC是一種基于Java，實現了Web MVC設計模式，請求驅動類型的輕量級Web框架，即使用了MVC架構模式的思想，將Web層進行職責解耦。基于請求驅動指的就是使用請求-響應模型，框架的目的就是幫助我們簡化開發，SpringMVC也是要簡化我們日常Web開發。相比傳統的SpringMVC來說，用戶的返回相應可以直接傳給控制器，業務邏輯和數據庫操作也可以返回結果給控制器。具體操作如圖1所示。

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

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

2 系統的設計與實現

在原來都保吧的運維平臺上增加了一個非車險模塊—太平洋燃氣險，業務上支持用戶通過燃氣繳費的鏈接或是通過網頁打開web版的燃氣險產品進行投保流程。

2.1 功能設計

燃氣險模塊下有3個子菜單：燃氣險人員導入、燃氣險出單和燃氣險人員查詢，這3個模塊又分為以下幾個小的功能點。如圖2所示。

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

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

燃氣險人員查詢：分為查詢和訂單狀態兩個子菜單，燃氣險人員查詢模塊，可以通過導入日期、姓名、手機號、證件號這4個字段進行訂單的查詢。選擇需要查詢的條件后點擊查詢即可。通過查詢后得到的訂單，會有未處理和已完成幾個狀態，未處理的業務允許用戶繼續下單支付，已完成的業務可以查詢保單的訂單詳情。

用戶、燃氣公司、Web系統和保險公司之間的交互流程如圖3所示。

2.2 數據庫的設計

根據燃氣險系統的實際需求，結合數據庫的設計原則和業務系統數據庫的一些關聯信息，錄入的人員信息和訂單的相關信息等的表結構如表1所示。

3 燃氣險系統的實現與測試

3.1 燃氣險系統的實現

經過開發系統、執行測試用例、發現bug直至修改完bug，整個燃氣險系統也就實現了，頁面的效果圖如圖4所示。

3.2 燃氣險系統的測試

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

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

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

//校驗長度，類型

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

return false;

}

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

function isCardNo（card） {

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

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

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

return false;

}

return true;

};

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

（2） 已經導入成功的數據，若再重復導入也會提示：導入失敗，該數據已存在。通過這個操作會避免數據冗余，節約數據庫的空間。——測試通過

（3） 投保人的證件類型控制為只能錄入身份證，當錄入身份證時可以繼續點擊下一步，當錄入是非身份證時，提示：證件類型只支持身份證。——測試通過

（4） 投保頁面，必須要閱讀條款須知。當沒有勾選【已閱讀】按鈕時，提示：請您先閱讀條款須知。——測試通過

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

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

通過rational robot自動化測試工具對整個系統的性能進行測試，整個下單過程用時2-5min（達到標準），模擬幾萬個用戶同時執行業務，同時記錄下每一個事務的處理時間、數據庫的狀態等指標等，進行長達一周不停地運行，均可支持業務。大量的數據記錄可以預先知道整個系統的承受能力，這樣就可以為用戶規劃整個運行環境的配置提供了有力的證據。

4 總結

燃氣險系統的開發與應用，不僅能夠減輕燃氣公司作息人員的工作量，提高工作效率，還能方便用戶自己錄入自己的信息直接進行下單過程。用戶還可以直接進入系統查看自己訂單的狀態。更好的將計算機同業務結合起來，也滿足當前公司的發展需要，使得燃氣險出單系統更加系統化、專業化、規范化。

參考文獻

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

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

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

[4] 李鑫. 移動端H5頁面快速開發系統的設計與實現[D].北京：北京郵電大學，2018.

[5] 邰振強，唐兆偉，陳思豪等.基于H5與JQ的Windows模擬考核系統Agent設計實現[J].齊齊哈爾大學學報（自然科學版），2017，33（6）：20-23.

（收稿日期： 2019.07.02）