一種汽車推送管理平臺前端實現方案

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

0 引言

隨著汽車數字化、網聯化的發展，越來越多的汽車配置了車載終端和多媒體車載娛樂系統。為了更好地為車主服務，實現車與云平臺的連接，給車主提供個性化的推送必不可少。如何定制推送內容，推送規則如何，都需要一個推送管理系統去實現。

1 推送管理系統簡介

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

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

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

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

2 方案與架構

2.1 架構介紹

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

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

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

2.2 推送結果總覽模塊

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

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

2.3 推送管理模塊

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

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

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

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

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

2.4 推送日志

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

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

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

2.5 數據請求方式

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

（1）支持Promise API。

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

（3）從 node.js創建http請求。

（4）攔截請求和響應。

（5）轉換請求和響應數據。在本項目中，創建了一個供所有網絡請求使用的axios實例，其主要配置項如下。

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

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

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

（4）interceptors.response：響應攔截器，網絡錯誤提示統一處理，數據格式轉換。

3 結束語

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