基于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）