基于Vue.js的车险报价系统的设计与实现

张志鹏 黄素娟 蒋龙玉 马嘉敏

摘 要：

随着近些年来随着WEB应用的迅速扩展，涌现了多种前端框架，Vue.js就是其中一款轻量且高效的前端框架，其核心是一个响应的数据绑定系统，适合开发单页应用（SPA）。单页应用在浏览器使用期间不会重新加载页面，它可以看作一种从Web服务器加载的富客户端。当下的车险市场发展前景良好，将传统的投保流程与互联网结合形成线上投保将是未来的一种发展趋势，设计的Web车险报价系统能够在浏览器端进行线上车险购买，不仅能够缩减传统投保流程中成本，更能加快车险的落地周期。而线上投保流程强调的是实时与高效，加上前后端分离开发，使得这一系统可以被量身定做为一款单页应用程序。结合车险出单系统，从业务场景、技术介绍、工程设计实现3个层面，全面分析在Vue.js框架下如何开发设计一款独立的单页应用。

关键词：

Vue.js; 车险报价系统; Webpack; Vuex

中图分类号： TP 311

文献标志码： A

Design and Implementation of Vehicle Insurance Quotation System Based on Vue.js

ZHANG Zhipeng， HUANG Sujuan， JIANG Longyu， MA Jiamin

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

Abstract：

A variety of front-end frameworks have emerged with the rapid rise of WEB applications in recent years， and the Vue.js is one lightweight and efficient front-end framework of them. Its core is a responsive data binding system and suitable for developing single-page application （SPA）. A single-page application does not reload pages during its application period in the browser， it can be seen as loaded by a rich client from a Web server. The current auto insurance market has good development prospects. Combining the traditional insurance quote process with the Internet to purchase insurance online will be a development trend. The Web auto insurance quotation system proposed in this article can purchase online auto insurance on the browser side， which can not only reduce the cost in the traditional insurance process but also speed up the time it takes for the insurance to take effect. The online insurance process emphasizes real-time and high efficiency. Coupled with the separation of front and rear， this system can be a tailor-made single-page application. The paper will combine the auto insurance billing system to comprehensively analyze how to develop and design a single-page application under the Vue.js framework from three aspects： business scenario， technology introduction and engineering design.

Key words：

vue.js; car insurance quotation system; webpack; vuex

0 引言

得益于經济快速发展的影响，我国居民的汽车产品需求持续旺盛，过去几年汽车市场经历了快速扩张和发展，其中我国乘用车市场规模持续高于行业水平，同时我国私家车保有量持续稳步高速增长[1]。巨大的汽车市场带来的是大规模的车险消费市场，根据搜狐汽车网资料显示，截至2017年底，国内全年的车险保费规模约为7 530亿元。传统商业险的销售模式具有手续繁琐，代理层级多诸多缺点，带来的是高昂的销售成本[2]。线上互联网车险的出现，不仅降低了险企的产品推广成本，缩短车险落地周期，促进车险产品方案多样化升级，更能让用户体验也得到显著提升。在这样的背景下，积极整合多方保险公司搭建一个共享的车险报价平台，实现多重身份的用户能够自助进行车险产品的下单，因此设计一款线上车险报价APP自然十分必要，作者所在公司目前已经上线了包括安卓、IOS两种移动端的在线车险报价的APP产品，本文中的Web端报价系统的实现更能进一步完善线上车险报价的终端场景的布局，下面也将从该系统前端工程的设计与实现过程做更深入的介绍。

1 业务场景

整个产品系统面向的是各保险公司业务员以及车主的报价过程，根据车主的保险购买需求以及各保险公司在当地的销售策略，实现包括用户登录、车型查询、报价、投保、核保、支付以及落地订单查询等多个功能，全方位覆盖一份车险产品销售的整个流程，保证其透明公开以及实时高效，其流程大致如图1所示。

2 核心技术

2.1 Vue.js框架

Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架[3]。它是一个注重View-Model的典型MVVM框架，在Html5技术发展初期，MVC模型是WEB应用的最佳模型，只因当时WEB应用的View层相对简单，界面所需数据基本上是通过服务器端处理，前端只用来展示，而并没有独立出来处理业务。随着WEB3.0时代的到来，前端工程化开发的形式逐渐兴起，前后端分离开发的模式更是使得MVVM模型大有用武之地[4-5]。

如图2所示。

MVVM模型由View层、View-Model层、Model层构成，区别于MVC模型，MVVM模型当中View不再与Model关联，所有View层的变化都是基于其对应的数据绑定，同样，View层的改变页数自动刷新更改Model层的数据，而这当中的最核心的枢纽就是View-Model层的逻辑构建，自然Vue.js就是一款这样的角色，它能够实现视图与数据的双向绑定，使得开发者能够专注于数据的设计处理上来[6]。

2.2 Webpack工具

webpack是一款开源的模块加载器兼打包工具，它能够分析整个项目的结构，通过入口文件依次找寻其对应的依赖模块，包括Javascript模块以及其他浏览器不能运行的拓展语言（Css的拓展语言Sass、Less等）转译成当前浏览器能够识别的版本格式[7]。Webpack工具当中两个核心的概念是loader与plugin。loader能够帮助Webpack处理特定格式的文件，它能够扮演一个“翻译官”的角色，让所有高新的拓展高效的开发技术转译成本地的浏览器能够识别运行的文件。plugin是作为一种贯穿于项目构建全局过程当中的全局辅助工具，解放开发者的双手去做一些核心的事情，而一些重复的工作就交给插件来做就好。

2.3 Vuex

Vuex是一款專为Vue.js应用程序开发的状态管理模式，在构建一个较大型的单页应用的时候，Vuex能够帮助开发者更好地在组件外部统一管理状态。组件化开发必然有多个组件共享状态的场景，而使用原始的方法进行组件间传参的话则必然使得代码变得臃肿冗余，可读性差，要保证每个组件都能拿到同一状态必须得保证每一个环节的传参都不能犯错，这显然工作量巨大且难以维护，而Vuex则像一个状态池，只要将全局多个组件共享的状态丢到池内，一个组件所依赖的状态的读写就可以映射到其他组件身上去，而不用管这几个组件之间的传参路径。

3 设计实现

本节将会整体对出单系统的项目结构做一个概述，然后针对核心组件Vuex、router以及信息填报界面的设计作详细的介绍。

3.1 结构设计

项目工程结构设计整个工程划分为六大部分，api下封装完整的请求后台各项服务的接口函数，这一部分基于业务做了细致的分类，便于流程应用过程中引入;common部分的文件主要是一些全局通用的工具函数，不涉及后台接口的调用，只是辅助页面逻辑部分的实现，包括各种变量的校验、字符串的拼接等等;components部分下面则为各个页面通用的静态组件，例如每个流程页面都要引入的头部组件与底部组件;router部分配置了各流程页面与前端路由的一一对应关系;views部分则是整个系统的核心部分，即车险下单各个流程页面的展示内容;Vuex部分包括了全局状态管理的所有模块。那便于详细介绍信息流程页面的内容，整个项目工程的目录只涵盖信息采集页面会涉及到的所有内容，如图3所示。

3.2 信息采集页面的Vuex设计

在state.js当中定义全局状态，比如多个页面都会用到的的车辆识别代码、发动机号、初登日期、车型名称等：

const state = {

frameNo： ''，

…}

状态设计完之后，在actions.js当中设计对应状态的操作方法：

const actions = {

change_frameNo（{commit}， frameNo） {

commit（types.SET_FRAMENO， frameNo）

}…}

如车辆识别代码的赋值操作对应的change_frameNo方法，这部分action内部可对传入的状态做异步操作，commit只是用来提交同步指令以改变其对应的状态值，上述代码中传入的frameNo即为待更新状态的值， vuex中不直接改变当前状态，而是统一采取提交mutation的方式来进行状态变更，这是为了便于在调试过程中更明确地追踪某一状态。在mutation.js当中，会对全局的状态做统一的赋值，而这个值由actions当中传入，设计如下：

const mutations = {

[types.SET_FRAMENO]（state， frameNo） {

state.frameNo = frameNo

}，…}

最后将包含了所有的state及其对应actions分发方式、同步赋值的mutation统一引入store对象当中，并在根组件中注入store对象，这样全局环境都能获取vuex当中的状态及其对应的异步操作和同步读写，逻辑如图4所示。

抽离系统中涉及到需要共享的所有状态数据流，存储在State对象内，页面需要对象内部分数据即从页面引用，并与元素进行绑定，用户在页面对于数据的操作都映射成分发相关的Actions操作，在每一个特定的action内部可以进行调取后台服务的异步操作，亦或者直接同步进行状态的更新，所有需要进行数据流更新的操作在action内部都是不被提倡的，action内到最后都归为分发多重的mutation，每一个mutation实际上可以看作是与State内部数据一一对应的，mutation只允许同步操作，这给开发者对于某一数据的监控带来了便利，在开发过程当中，会用到vue-devtools来对vue应用进行调试，而这就便于对数据的跟踪。状态一经更新，组件便随之改变，由此而形成一个vuex的闭环。

3.3 信息填写页面的布局设计

整个布局组件都集中在template内，这部分等同于html当中body内的dom组件，差异点在于在vue的模版中会将数据注入到各个组件当中，这里可以使用引入的element-UI库，按照其对应的命令式编程即可。

出单流程中多个页面的头部与底部的内容都是共用的，因此把这两部分抽离出来作为独立的组件，如果全局的头部底部信息需要调整只需在此调整即可全局应用。其中头部文件当中的流程进度图片是与出单流程对应的，这里采用了vue当中的具名插槽特性，在设计头部组件时，流程图片元素为待复用插槽，那么在任何引入头部组件的页面，在其内部插入当前流程所对应的图片即可，代码设计如下：

页面内容包括车辆信息、车主信息、起保日期、新车备案（北京地区独有）等4个部分，如图6所示。

3.4 script逻辑部分设计

整个页面呈现所涉及到的所有交互逻辑部分构成如图7所示。

Import部分导入整个逻辑实现部分所有的依赖状态、组件、方法等等，components里面则是前文所提到的头部与底部组件注入，data中定义该页面页面所有的状态，其中大部分为隐式，即不在页面动态展示的;computed部分则为页面的计算属性，这部分为被此页面监视的所有状态，也会有其它状态的派生属性。而created与beforeUpdated部分则是vue的两个生命周期函数，在created阶段会从后台获取页面所需的默认信息（ajax异步请求），包括当地的所有合作方、根据首页的新旧车是否进行旧车查询、获取当地的纳税情况等等，获取完毕会自动同页面相关组件进行绑定;而beforeUpdated階段则为页面任意局部刷新就会调用，这部分设计为对报价结果的过程进行校验。Methods内部定义所有页面组件会调取的一切函数，包括页面参数的校验调整与后台交互的请求函数（从api文件目录下引入）的调用，这两部分也构成了交互的核心部分，以上便是是逻辑部分的设计。

3.5 style样式部分的设计

样式部分按照引入的stylus预处理工具约定的形式设计，区别于初始的CSS样式设计，在stylus下的样式可以嵌套编写，前提是与模版当中的结构一致。其内容格式基本如下：

〈style scoped lang="stylus"〉

.tol {

margin： 24px auto

background-color： #ffffff

.main {

.row{…}

.logo{…}

…

〈/style〉

可以看到样式设置与css一致，只是与模版当中各元素的父子关系要严格对应，这样不仅能减少编写工作量，也便于开发者快速定位到对应元素的样式布局设计上来。

4 总结

整个系统的开发设计方法大致如上，区别在于业务层面上实现差异化的规则，因为车险下单各个地区、各保险公司都有着不同的规则约束。本文只基于Vue.js框架，结合车险出单系统的业务场景，并从工程构建到vue页面的设计两方面，单纯从技术层面介绍前后端分离模式下，开发一款独立的单页应用前端工作者所涉及到的研究内容。可以看到，Vue.js框架核心是一个响应的数据绑定系统，通过对整个页面构成深入分析，将各模块组件与数据绑定映射关系，从而避免传统前端开发当中频繁的dom操作，使得整个前端工程变得高效轻量化，而且使得开发者能够专注于数据模型的设计与处理，能大大缩短项目开发周期。

参考文献

[1] 詹薇. 国内互联网车险发展研究[D].南昌：江西财经大学，2018.

[2] 李佳.商车费改背景下我国互联网车险发展研究[J].保险职业学院学报，2018，32（5）：78-81.

[3] 毛炎. 基于Vue.js框架的Web方言地图的设计与开发[D].武汉：武汉大学，2018.

[4] 潘彦. 前端组件化与后端接口自动化构建工具研究[D].北京：北京邮电大学，2018.

[5] 黄俊勇. 基于Vue.js的WebGIS云管理与服务平台[D].武汉：武汉纺织大学，2018.

[6] Michael S. Mikowski， Josh C. Powell. 单页Web应用JavaScript从前端到后端[M].包勇明，译.北京：人民邮电出版社，2014.

[7] 易剑波.基于MVVM模式的WEB前端框架的研究[J].信息与电（理论版），2016（19）：58-59.

[8] 麦冬，陈涛，梁宗湾.轻量级响应式框架Vue.js应用分析[J].信息与电脑（理论版），2017（07）：58-59.

（收稿日期： 2019.06.21）