基于Vue.js的車險報價系統(tǒng)的設(shè)計與實現(xiàn)

張志鵬 黃素娟 蔣龍玉 馬嘉敏

摘 要：

隨著近些年來隨著WEB應(yīng)用的迅速擴展，涌現(xiàn)了多種前端框架，Vue.js就是其中一款輕量且高效的前端框架，其核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，適合開發(fā)單頁應(yīng)用（SPA）。單頁應(yīng)用在瀏覽器使用期間不會重新加載頁面，它可以看作一種從Web服務(wù)器加載的富客戶端。當(dāng)下的車險市場發(fā)展前景良好，將傳統(tǒng)的投保流程與互聯(lián)網(wǎng)結(jié)合形成線上投保將是未來的一種發(fā)展趨勢，設(shè)計的Web車險報價系統(tǒng)能夠在瀏覽器端進行線上車險購買，不僅能夠縮減傳統(tǒng)投保流程中成本，更能加快車險的落地周期。而線上投保流程強調(diào)的是實時與高效，加上前后端分離開發(fā)，使得這一系統(tǒng)可以被量身定做為一款單頁應(yīng)用程序。結(jié)合車險出單系統(tǒng)，從業(yè)務(wù)場景、技術(shù)介紹、工程設(shè)計實現(xiàn)3個層面，全面分析在Vue.js框架下如何開發(fā)設(shè)計一款獨立的單頁應(yīng)用。

關(guān)鍵詞：

Vue.js; 車險報價系統(tǒng); 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 引言

得益于經(jīng)濟快速發(fā)展的影響，我國居民的汽車產(chǎn)品需求持續(xù)旺盛，過去幾年汽車市場經(jīng)歷了快速擴張和發(fā)展，其中我國乘用車市場規(guī)模持續(xù)高于行業(yè)水平，同時我國私家車保有量持續(xù)穩(wěn)步高速增長[1]。巨大的汽車市場帶來的是大規(guī)模的車險消費市場，根據(jù)搜狐汽車網(wǎng)資料顯示，截至2017年底，國內(nèi)全年的車險保費規(guī)模約為7 530億元。傳統(tǒng)商業(yè)險的銷售模式具有手續(xù)繁瑣，代理層級多諸多缺點，帶來的是高昂的銷售成本[2]。線上互聯(lián)網(wǎng)車險的出現(xiàn)，不僅降低了險企的產(chǎn)品推廣成本，縮短車險落地周期，促進車險產(chǎn)品方案多樣化升級，更能讓用戶體驗也得到顯著提升。在這樣的背景下，積極整合多方保險公司搭建一個共享的車險報價平臺，實現(xiàn)多重身份的用戶能夠自助進行車險產(chǎn)品的下單，因此設(shè)計一款線上車險報價APP自然十分必要，作者所在公司目前已經(jīng)上線了包括安卓、IOS兩種移動端的在線車險報價的APP產(chǎn)品，本文中的Web端報價系統(tǒng)的實現(xiàn)更能進一步完善線上車險報價的終端場景的布局，下面也將從該系統(tǒng)前端工程的設(shè)計與實現(xiàn)過程做更深入的介紹。

1 業(yè)務(wù)場景

整個產(chǎn)品系統(tǒng)面向的是各保險公司業(yè)務(wù)員以及車主的報價過程，根據(jù)車主的保險購買需求以及各保險公司在當(dāng)?shù)氐匿N售策略，實現(xiàn)包括用戶登錄、車型查詢、報價、投保、核保、支付以及落地訂單查詢等多個功能，全方位覆蓋一份車險產(chǎn)品銷售的整個流程，保證其透明公開以及實時高效，其流程大致如圖1所示。

2 核心技術(shù)

2.1 Vue.js框架

Vue.js 是一個JavaScriptMVVM庫，是一套構(gòu)建用戶界面的漸進式框架[3]。它是一個注重View-Model的典型MVVM框架，在Html5技術(shù)發(fā)展初期，MVC模型是WEB應(yīng)用的最佳模型，只因當(dāng)時WEB應(yīng)用的View層相對簡單，界面所需數(shù)據(jù)基本上是通過服務(wù)器端處理，前端只用來展示，而并沒有獨立出來處理業(yè)務(wù)。隨著WEB3.0時代的到來，前端工程化開發(fā)的形式逐漸興起，前后端分離開發(fā)的模式更是使得MVVM模型大有用武之地[4-5]。

如圖2所示。

MVVM模型由View層、View-Model層、Model層構(gòu)成，區(qū)別于MVC模型，MVVM模型當(dāng)中View不再與Model關(guān)聯(lián)，所有View層的變化都是基于其對應(yīng)的數(shù)據(jù)綁定，同樣，View層的改變頁數(shù)自動刷新更改Model層的數(shù)據(jù)，而這當(dāng)中的最核心的樞紐就是View-Model層的邏輯構(gòu)建，自然Vue.js就是一款這樣的角色，它能夠?qū)崿F(xiàn)視圖與數(shù)據(jù)的雙向綁定，使得開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)的設(shè)計處理上來[6]。

2.2 Webpack工具

webpack是一款開源的模塊加載器兼打包工具，它能夠分析整個項目的結(jié)構(gòu)，通過入口文件依次找尋其對應(yīng)的依賴模塊，包括Javascript模塊以及其他瀏覽器不能運行的拓展語言（Css的拓展語言Sass、Less等）轉(zhuǎn)譯成當(dāng)前瀏覽器能夠識別的版本格式[7]。Webpack工具當(dāng)中兩個核心的概念是loader與plugin。loader能夠幫助Webpack處理特定格式的文件，它能夠扮演一個“翻譯官”的角色，讓所有高新的拓展高效的開發(fā)技術(shù)轉(zhuǎn)譯成本地的瀏覽器能夠識別運行的文件。plugin是作為一種貫穿于項目構(gòu)建全局過程當(dāng)中的全局輔助工具，解放開發(fā)者的雙手去做一些核心的事情，而一些重復(fù)的工作就交給插件來做就好。

2.3 Vuex

Vuex是一款專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，在構(gòu)建一個較大型的單頁應(yīng)用的時候，Vuex能夠幫助開發(fā)者更好地在組件外部統(tǒng)一管理狀態(tài)。組件化開發(fā)必然有多個組件共享狀態(tài)的場景，而使用原始的方法進行組件間傳參的話則必然使得代碼變得臃腫冗余，可讀性差，要保證每個組件都能拿到同一狀態(tài)必須得保證每一個環(huán)節(jié)的傳參都不能犯錯，這顯然工作量巨大且難以維護，而Vuex則像一個狀態(tài)池，只要將全局多個組件共享的狀態(tài)丟到池內(nèi)，一個組件所依賴的狀態(tài)的讀寫就可以映射到其他組件身上去，而不用管這幾個組件之間的傳參路徑。

3 設(shè)計實現(xiàn)

本節(jié)將會整體對出單系統(tǒng)的項目結(jié)構(gòu)做一個概述，然后針對核心組件Vuex、router以及信息填報界面的設(shè)計作詳細的介紹。

3.1 結(jié)構(gòu)設(shè)計

項目工程結(jié)構(gòu)設(shè)計整個工程劃分為六大部分，api下封裝完整的請求后臺各項服務(wù)的接口函數(shù)，這一部分基于業(yè)務(wù)做了細致的分類，便于流程應(yīng)用過程中引入;common部分的文件主要是一些全局通用的工具函數(shù)，不涉及后臺接口的調(diào)用，只是輔助頁面邏輯部分的實現(xiàn)，包括各種變量的校驗、字符串的拼接等等;components部分下面則為各個頁面通用的靜態(tài)組件，例如每個流程頁面都要引入的頭部組件與底部組件;router部分配置了各流程頁面與前端路由的一一對應(yīng)關(guān)系;views部分則是整個系統(tǒng)的核心部分，即車險下單各個流程頁面的展示內(nèi)容;Vuex部分包括了全局狀態(tài)管理的所有模塊。那便于詳細介紹信息流程頁面的內(nèi)容，整個項目工程的目錄只涵蓋信息采集頁面會涉及到的所有內(nèi)容，如圖3所示。

3.2 信息采集頁面的Vuex設(shè)計

在state.js當(dāng)中定義全局狀態(tài)，比如多個頁面都會用到的的車輛識別代碼、發(fā)動機號、初登日期、車型名稱等：

const state = {

frameNo： ''，

…}

狀態(tài)設(shè)計完之后，在actions.js當(dāng)中設(shè)計對應(yīng)狀態(tài)的操作方法：

const actions = {

change_frameNo（{commit}， frameNo） {

commit（types.SET_FRAMENO， frameNo）

}…}

如車輛識別代碼的賦值操作對應(yīng)的change_frameNo方法，這部分action內(nèi)部可對傳入的狀態(tài)做異步操作，commit只是用來提交同步指令以改變其對應(yīng)的狀態(tài)值，上述代碼中傳入的frameNo即為待更新狀態(tài)的值， vuex中不直接改變當(dāng)前狀態(tài)，而是統(tǒng)一采取提交mutation的方式來進行狀態(tài)變更，這是為了便于在調(diào)試過程中更明確地追蹤某一狀態(tài)。在mutation.js當(dāng)中，會對全局的狀態(tài)做統(tǒng)一的賦值，而這個值由actions當(dāng)中傳入，設(shè)計如下：

const mutations = {

[types.SET_FRAMENO]（state， frameNo） {

state.frameNo = frameNo

}，…}

最后將包含了所有的state及其對應(yīng)actions分發(fā)方式、同步賦值的mutation統(tǒng)一引入store對象當(dāng)中，并在根組件中注入store對象，這樣全局環(huán)境都能獲取vuex當(dāng)中的狀態(tài)及其對應(yīng)的異步操作和同步讀寫，邏輯如圖4所示。

抽離系統(tǒng)中涉及到需要共享的所有狀態(tài)數(shù)據(jù)流，存儲在State對象內(nèi)，頁面需要對象內(nèi)部分數(shù)據(jù)即從頁面引用，并與元素進行綁定，用戶在頁面對于數(shù)據(jù)的操作都映射成分發(fā)相關(guān)的Actions操作，在每一個特定的action內(nèi)部可以進行調(diào)取后臺服務(wù)的異步操作，亦或者直接同步進行狀態(tài)的更新，所有需要進行數(shù)據(jù)流更新的操作在action內(nèi)部都是不被提倡的，action內(nèi)到最后都歸為分發(fā)多重的mutation，每一個mutation實際上可以看作是與State內(nèi)部數(shù)據(jù)一一對應(yīng)的，mutation只允許同步操作，這給開發(fā)者對于某一數(shù)據(jù)的監(jiān)控帶來了便利，在開發(fā)過程當(dāng)中，會用到vue-devtools來對vue應(yīng)用進行調(diào)試，而這就便于對數(shù)據(jù)的跟蹤。狀態(tài)一經(jīng)更新，組件便隨之改變，由此而形成一個vuex的閉環(huán)。

3.3 信息填寫頁面的布局設(shè)計

整個布局組件都集中在template內(nèi)，這部分等同于html當(dāng)中body內(nèi)的dom組件，差異點在于在vue的模版中會將數(shù)據(jù)注入到各個組件當(dāng)中，這里可以使用引入的element-UI庫，按照其對應(yīng)的命令式編程即可。

出單流程中多個頁面的頭部與底部的內(nèi)容都是共用的，因此把這兩部分抽離出來作為獨立的組件，如果全局的頭部底部信息需要調(diào)整只需在此調(diào)整即可全局應(yīng)用。其中頭部文件當(dāng)中的流程進度圖片是與出單流程對應(yīng)的，這里采用了vue當(dāng)中的具名插槽特性，在設(shè)計頭部組件時，流程圖片元素為待復(fù)用插槽，那么在任何引入頭部組件的頁面，在其內(nèi)部插入當(dāng)前流程所對應(yīng)的圖片即可，代碼設(shè)計如下：

頁面內(nèi)容包括車輛信息、車主信息、起保日期、新車備案（北京地區(qū)獨有）等4個部分，如圖6所示。

3.4 script邏輯部分設(shè)計

整個頁面呈現(xiàn)所涉及到的所有交互邏輯部分構(gòu)成如圖7所示。

Import部分導(dǎo)入整個邏輯實現(xiàn)部分所有的依賴狀態(tài)、組件、方法等等，components里面則是前文所提到的頭部與底部組件注入，data中定義該頁面頁面所有的狀態(tài)，其中大部分為隱式，即不在頁面動態(tài)展示的;computed部分則為頁面的計算屬性，這部分為被此頁面監(jiān)視的所有狀態(tài)，也會有其它狀態(tài)的派生屬性。而created與beforeUpdated部分則是vue的兩個生命周期函數(shù)，在created階段會從后臺獲取頁面所需的默認信息（ajax異步請求），包括當(dāng)?shù)氐乃泻献鞣?、根?jù)首頁的新舊車是否進行舊車查詢、獲取當(dāng)?shù)氐募{稅情況等等，獲取完畢會自動同頁面相關(guān)組件進行綁定;而beforeUpdated階段則為頁面任意局部刷新就會調(diào)用，這部分設(shè)計為對報價結(jié)果的過程進行校驗。Methods內(nèi)部定義所有頁面組件會調(diào)取的一切函數(shù)，包括頁面參數(shù)的校驗調(diào)整與后臺交互的請求函數(shù)（從api文件目錄下引入）的調(diào)用，這兩部分也構(gòu)成了交互的核心部分，以上便是是邏輯部分的設(shè)計。

3.5 style樣式部分的設(shè)計

樣式部分按照引入的stylus預(yù)處理工具約定的形式設(shè)計，區(qū)別于初始的CSS樣式設(shè)計，在stylus下的樣式可以嵌套編寫，前提是與模版當(dāng)中的結(jié)構(gòu)一致。其內(nèi)容格式基本如下：

〈style scoped lang="stylus"〉

.tol {

margin： 24px auto

background-color： #ffffff

.main {

.row{…}

.logo{…}

…

〈/style〉

可以看到樣式設(shè)置與css一致，只是與模版當(dāng)中各元素的父子關(guān)系要嚴格對應(yīng)，這樣不僅能減少編寫工作量，也便于開發(fā)者快速定位到對應(yīng)元素的樣式布局設(shè)計上來。

4 總結(jié)

整個系統(tǒng)的開發(fā)設(shè)計方法大致如上，區(qū)別在于業(yè)務(wù)層面上實現(xiàn)差異化的規(guī)則，因為車險下單各個地區(qū)、各保險公司都有著不同的規(guī)則約束。本文只基于Vue.js框架，結(jié)合車險出單系統(tǒng)的業(yè)務(wù)場景，并從工程構(gòu)建到vue頁面的設(shè)計兩方面，單純從技術(shù)層面介紹前后端分離模式下，開發(fā)一款獨立的單頁應(yīng)用前端工作者所涉及到的研究內(nèi)容?？梢钥吹剑琕ue.js框架核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，通過對整個頁面構(gòu)成深入分析，將各模塊組件與數(shù)據(jù)綁定映射關(guān)系，從而避免傳統(tǒng)前端開發(fā)當(dāng)中頻繁的dom操作，使得整個前端工程變得高效輕量化，而且使得開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)模型的設(shè)計與處理，能大大縮短項目開發(fā)周期。

參考文獻

[1] 詹薇. 國內(nèi)互聯(lián)網(wǎng)車險發(fā)展研究[D].南昌：江西財經(jīng)大學(xué)，2018.

[2] 李佳.商車費改背景下我國互聯(lián)網(wǎng)車險發(fā)展研究[J].保險職業(yè)學(xué)院學(xué)報，2018，32（5）：78-81.

[3] 毛炎. 基于Vue.js框架的Web方言地圖的設(shè)計與開發(fā)[D].武漢：武漢大學(xué)，2018.

[4] 潘彥. 前端組件化與后端接口自動化構(gòu)建工具研究[D].北京：北京郵電大學(xué)，2018.

[5] 黃俊勇. 基于Vue.js的WebGIS云管理與服務(wù)平臺[D].武漢：武漢紡織大學(xué)，2018.

[6] Michael S. Mikowski， Josh C. Powell. 單頁Web應(yīng)用JavaScript從前端到后端[M].包勇明，譯.北京：人民郵電出版社，2014.

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

[8] 麥冬，陳濤，梁宗灣.輕量級響應(yīng)式框架Vue.js應(yīng)用分析[J].信息與電腦（理論版），2017（07）：58-59.

（收稿日期： 2019.06.21）