一種汽車推送管理平臺前端實現(xiàn)方案

中圖分類號：U469.7 文獻標識碼：A

0 引言

隨著汽車數(shù)字化、網(wǎng)聯(lián)化的發(fā)展，越來越多的汽車配置了車載終端和多媒體車載娛樂系統(tǒng)。為了更好地為車主服務，實現(xiàn)車與云平臺的連接，給車主提供個性化的推送必不可少。如何定制推送內(nèi)容，推送規(guī)則如何，都需要一個推送管理系統(tǒng)去實現(xiàn)。

1 推送管理系統(tǒng)簡介

在推送管理系統(tǒng)中，推送管理者可以根據(jù)自己的要求，在web 頁面上創(chuàng)建不同的推送內(nèi)容，定制推送的時間段、受眾等相應推送規(guī)則，為實現(xiàn)個性化推送服務奠定基礎，幫助公司營銷團隊完成車機推送的持續(xù)化運營。在推送管理系統(tǒng)中，設有推送結(jié)果總覽、推送管理和推送日志等相關模塊，方便推送管理者及時了解推送情況，方便對推送進行調(diào)整（圖1）。

（1）推送結(jié)果總覽：此模塊可以使用時間、車型作為篩選條件，按統(tǒng)計粒度查看對應的監(jiān)控數(shù)據(jù)統(tǒng)計分析圖表。該模塊支持圖表及數(shù)據(jù)下載，包括推送的車輛總數(shù)、推送總次數(shù)、每日推送次數(shù)、資源拉取數(shù)量以及主題拉取次數(shù)等業(yè)務統(tǒng)計模塊。

（2）推送管理：包括了推送主題創(chuàng)建與修改、推送主題受眾管理以及推送主題發(fā)布推送等管理功能。其中主題的創(chuàng)建修改可以定義消息標題、推送時間和推送類型等相關推送參數(shù);受眾管理則可以對車輛的VIN碼與車型進行配置，支持單個輸入，也支持批量導入配置。

（3）推送日志：支持根據(jù)推送時間、推送標題、車型、VIN碼、推送狀態(tài)和客戶端ID進行查詢并導出推送日志。

2 方案與架構(gòu)

2.1 架構(gòu)介紹

本文中報表系統(tǒng)前端使用Vue 為基礎框架，Vuex為狀態(tài)管理工具，antdv為基礎組件庫，echarts為圖表庫。使用Vue.js漸進式框架進行組件化開發(fā)。Vue.js是一個輕巧、高性能、可組件化的MVVM 庫，也是一個構(gòu)建數(shù)據(jù)驅(qū)動的Web界面的庫，擁有非常容易上手的API。

Vuex 為此專門為Vue.js設計了狀態(tài)管理庫，利用Vue.js的細粒度數(shù)據(jù)響應機制來進行高效的狀態(tài)更新。它采用集中式存儲管理應用的所有組件狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。

antdv 是Ant Design 的Vue 實現(xiàn)，Ant Design 是螞蟻集團創(chuàng)建的一個服務于企業(yè)級產(chǎn)品的設計體系。其基于自然、確定性、意義感和生長性這4 大設計價值觀，通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設計者專注于更好的用戶體驗。

2.2 推送結(jié)果總覽模塊

推送結(jié)果總覽模塊分為兩部分：篩選項與結(jié)果展示（圖2）。該模塊在默認情況下會展示近1 周所有車型的資源推送統(tǒng)計結(jié)果，用戶可以自主選擇日期范圍、車型與推送類型來切換統(tǒng)計展示項。各個數(shù)據(jù)圖表切換使用的是antdv的Tabs組件，通過修改組件的activeName屬性來控制圖表的切換。

總覽模塊的曲線圖由echarts實現(xiàn)，在使用axios獲取數(shù)據(jù)后，將其拼接為圖表的配置項與數(shù)據(jù)集合option，包括標題title、圖例legeng、坐標屬性xAxis與yAxis、數(shù)據(jù)系列項series和圖表下載及原始數(shù)據(jù)查看等功能項屬性toolbox。

2.3 推送管理模塊

推送管理模塊主要由推送主題編輯、推送主題列表和受眾管理組成（圖3）。當新增或修改推送主題時，會進入主題編輯組件。圖1平臺頁面結(jié)構(gòu)在此組件中，可以對推送主題的各項主題信息進行編輯，包括但不限于標題、推送時間、到期時間和推送類型等。其中每個信息輸入項都為單獨的組件，可以在不同主題類型中復用。

編輯組件的結(jié)構(gòu)為一個由Modal包裹的Form 表單，通過visible屬性控制Modal的顯示或隱藏。Form表單中包含了用于收集推送主題信息各個表單項，其由Input、Select和Radio等組件構(gòu)成。表單項使用Row、Col組件進行柵格布局，可以根據(jù)屏幕的分辨率自動調(diào)整控件寬度，解決了樣式匹配的困擾。其數(shù)據(jù)使用v-decorator方式與表單綁定，在v-decorator中，使用initialValue屬性配置默認值，以此減少重復內(nèi)容輸入量。使用rules 屬性配置表單項的校驗規(guī)則，這樣做的優(yōu)勢是，當此表單項修改或失去焦點時便對其數(shù)據(jù)進行校驗，防止數(shù)據(jù)項被漏填或錯填。

不同的推送主題具有不同的推送內(nèi)容數(shù)據(jù)項，若給每一個推送主題都編寫一個Form表單，那么將增加重復代碼，工程的可讀性和可維護性也大大降低。對此我們的解決方案為編寫一個通用的Form表單組件，將所有推送主題需要用到的信息項都加入其中。用主題類型的參數(shù)綁定在下拉菜單Select 組件上。下拉菜單選項為各個可選的主題，當下拉菜單選擇改變時，同時改變主題類型參數(shù)。然后根據(jù)主題參數(shù)使用v-if 方法控制信息輸入控件的展示與銷毀，從而實現(xiàn)不同主題類型對應不同主題信息的需求。這樣將每一個輸入項與其過濾規(guī)則組成輸入控件，通過主題參數(shù)生成對應信息填寫項，則可增加代碼復用性，提高工作效率。

受眾管理組件具有對應受眾列表展示、受眾添加刪除等功能，其中受眾添加支持手動錄入與文件導入。受眾列表使用antdv的Table組件與Pagination組件實現(xiàn)，Table組件負責列表顯示，Pagination組件負責列表翻頁。列表默認一頁顯示20項受眾信息，若受眾總數(shù)小于20，需使用v-if方法將Pagination組件隱藏，以此減少頁面的冗余程度。

受眾的批量導入，需首先使用xlsx 插件將上傳的文件解析為JavaScript的數(shù)組類型數(shù)據(jù)，再按照與后端預定的數(shù)據(jù)格式轉(zhuǎn)換數(shù)組中的受眾類型數(shù)據(jù)，最后將數(shù)據(jù)圖案導入接口，完成受眾文件導入。在文件導入完成后需再次請求列表數(shù)據(jù)，以便將導入結(jié)果呈現(xiàn)至列表中。

2.4 推送日志

推送日志模塊的主體為推送日志列表（圖4）。日志列表可以由篩選項控制，并支持導出功能。日志篩選組件是一個Form表單，其表單項由antd 的RangePicker、Input、Select和Button組件構(gòu)成。該組件與推送管理相同，也使用Row、Col組件來控制表單樣式。

日志列表與受眾管理列構(gòu)成相同。需要注意的是，在每次篩選結(jié)果返回前，要將列表設置為第一頁，避免篩選后數(shù)據(jù)量不足導致非首頁數(shù)據(jù)為空的情況。

日志導出功能實現(xiàn)方式為：導出接口請求前將其responseType設置為blob;當文件流傳輸完成后，從響應的headers 中的content-disposition讀取出導出文件名;最后將文件名和響應數(shù)據(jù)傳入Javascript File Download生成下載文件，完成日志導出。

2.5 數(shù)據(jù)請求方式

JavaScript語言中已具備了ajax（異步JavaScript 和XML）的能力。但在本項目中，往往不只是請求一個數(shù)據(jù)那么簡單，往往還需要請求前進行參數(shù)檢查，以及請求響應后的錯誤處理和數(shù)據(jù)檢查。由此我們選擇使用axios來進行網(wǎng)絡數(shù)據(jù)請求，其為Vue官方推薦的網(wǎng)絡請求解決方案，是一個基于Promise用于瀏覽器和nodejs 的http客戶端，它本身具有以下特征。

（1）支持Promise API。

（2）客戶端支持防止CSRF。

（3）從 node.js創(chuàng)建http請求。

（4）攔截請求和響應。

（5）轉(zhuǎn)換請求和響應數(shù)據(jù)。在本項目中，創(chuàng)建了一個供所有網(wǎng)絡請求使用的axios實例，其主要配置項如下。

（1）baseURL：基礎鏈接，為接口的域名，可以減少編寫請求時的代碼量。

（2）timeout：請求的超時時間，提高系統(tǒng)相應速度，避免用戶一直等待。

（3）interceptors.request：請求攔截器，檢查請求cookies，去除無效請求。

（4）interceptors.response：響應攔截器，網(wǎng)絡錯誤提示統(tǒng)一處理，數(shù)據(jù)格式轉(zhuǎn)換。

3 結(jié)束語

文本介紹了一種基于Vue的車機推送平臺前端設計與實現(xiàn)，能夠幫助公司的營銷團隊搭建車機推送基礎，完成車機推送的持續(xù)化運營。該平臺能夠搭建起營銷團隊與用戶溝通的橋梁，針對不同用戶，定時推送有趣好玩的內(nèi)容，有利于提升用戶的產(chǎn)品體驗和產(chǎn)品的品牌價值。