基于Vue.js的車險(xiǎn)報(bào)價(jià)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

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

摘 要：

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

關(guān)鍵詞：

Vue.js; 車險(xiǎn)報(bào)價(jià)系統(tǒng); Webpack; Vuex

中圖分類號(hào)： TP 311

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

1 業(yè)務(wù)場(chǎng)景

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

2 核心技術(shù)

2.1 Vue.js框架

Vue.js 是一個(gè)JavaScriptMVVM庫(kù)，是一套構(gòu)建用戶界面的漸進(jìn)式框架[3]。它是一個(gè)注重View-Model的典型MVVM框架，在Html5技術(shù)發(fā)展初期，MVC模型是WEB應(yīng)用的最佳模型，只因當(dāng)時(shí)WEB應(yīng)用的View層相對(duì)簡(jiǎn)單，界面所需數(shù)據(jù)基本上是通過服務(wù)器端處理，前端只用來(lái)展示，而并沒有獨(dú)立出來(lái)處理業(yè)務(wù)。隨著WEB3.0時(shí)代的到來(lái)，前端工程化開發(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層的變化都是基于其對(duì)應(yīng)的數(shù)據(jù)綁定，同樣，View層的改變頁(yè)數(shù)自動(dòng)刷新更改Model層的數(shù)據(jù)，而這當(dāng)中的最核心的樞紐就是View-Model層的邏輯構(gòu)建，自然Vue.js就是一款這樣的角色，它能夠?qū)崿F(xiàn)視圖與數(shù)據(jù)的雙向綁定，使得開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)的設(shè)計(jì)處理上來(lái)[6]。

2.2 Webpack工具

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

2.3 Vuex

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

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

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

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

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

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

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

const state = {

frameNo： ''，

…}

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

const actions = {

change_frameNo（{commit}， frameNo） {

commit（types.SET_FRAMENO， frameNo）

}…}

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

const mutations = {

[types.SET_FRAMENO]（state， frameNo） {

state.frameNo = frameNo

}，…}

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

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

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

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

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

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

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

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

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

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

樣式部分按照引入的stylus預(yù)處理工具約定的形式設(shè)計(jì)，區(qū)別于初始的CSS樣式設(shè)計(jì)，在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án)格對(duì)應(yīng)，這樣不僅能減少編寫工作量，也便于開發(fā)者快速定位到對(duì)應(yīng)元素的樣式布局設(shè)計(jì)上來(lái)。

4 總結(jié)

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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

（收稿日期： 2019.06.21）