沈皎佶

摘要：移動應用本身是現(xiàn)代互聯(lián)網產業(yè)的重要組成部分，且智能終端的出現(xiàn)讓移動應用的空間得到了廣泛擴展，與移動應用相關的產業(yè)也呈現(xiàn)出穩(wěn)定的增長趨勢。在此社會背景之下越來越多的移動應用程序開始出現(xiàn)并深入社會生活的各個領域當中，并影響到了人們的現(xiàn)實生活。Vue.js作為一種重要的移動業(yè)務分析技術可以實現(xiàn)對應用和業(yè)務流程的管控，滿足人們的數(shù)據(jù)需求，例如在可視化平臺網頁設計層面。

關鍵詞：Vue.js技術 ?移動應用 ?可視化平臺網頁設計

引言

在現(xiàn)代社會的業(yè)務需求當中，新的移動應用平臺開始出現(xiàn)，且大數(shù)據(jù)時代下的數(shù)據(jù)膨脹特點顯著。Vue.js技術的應用就是為了了解新時期的業(yè)務流量特征和交互過程相關的關鍵信息，而如何在這種情況下減少需求開發(fā)成本保障開發(fā)效率也成為了重要課題。對于開發(fā)人員來說，以可視化方式開發(fā)出的平臺網頁也能更好地適應不斷擴張的業(yè)務需求。

1 Vue.js涉及到的開發(fā)框架與數(shù)據(jù)庫

1.1前端框架

整個可視化平臺所選擇的是前后端分離的開發(fā)模式，前端負責對界面進行開發(fā)，后端則負責對數(shù)據(jù)信息展開處理。這種技術模式有幾個方面的顯著優(yōu)勢，一是讓全段JS可以完成大多數(shù)的數(shù)據(jù)處理工作并減少服務器的壓力，二是不會因為后端產生的錯誤影響到前端的正常工作;三是原有工作模式下后臺很難完成前端頁面的查詢分析，但通過JS可以直接完成這項工作，讓前后臺各司其職地完成各項內容。Vue.js作為一種輕量級框架，其主要特征在于靈活性突出具有良好的使用性能。傳統(tǒng)模式下數(shù)據(jù)綁定是前端工作的核心內容，而現(xiàn)有的工作模式下我們可以更加專注于數(shù)據(jù)本身，而不是對DOM進行的微觀管理。Vue借助雙向響應數(shù)據(jù)功能將狀態(tài)中的不同變量進行規(guī)劃，添加了一些setter和getter，以便于實現(xiàn)對DOM的自動更新和跟蹤信息調整。反之，Vue提供了Vuex，是滿足Vue工作要求的“庫”，每個組間都包含自身的HTML和CSS，用于渲染網頁當中的某些關鍵內容，也讓代碼的復用性得到提高，后續(xù)界面要進行擴展時也可以降低學習成本，顯然此類前端框架的技術優(yōu)勢比較突出。

1.2后端框架

后端框架則是基于Node.js的Web應用框架，同樣是一種輕量級框架，我們可以以此為基礎創(chuàng)造各種Web應用，完成路由控制、模板分析、靜態(tài)文件管理工作等。同時我們還可以使用插件或其它模塊來整合創(chuàng)建各種類型的Web移動設備應用方案，支持多種模板并創(chuàng)設一個功能全面的網站平臺。當今時代下個性化服務成為了未來網絡平臺和交互設計的必然發(fā)展趨勢，這些內容數(shù)據(jù)本身不能在前端服務器進行緩存。不過后端數(shù)據(jù)的計算過程則可以完美地解決這一問題，用戶不會因為計算而產生明顯的延遲感。總體而言后端框架的和新特點在于可以通過中間件來響應HTTP請求，并且通過不同路由執(zhí)行HTTP請求動作，直接通過模板參數(shù)規(guī)劃就可以完成對于HTML頁面的渲染工作。

1.3數(shù)據(jù)庫

數(shù)據(jù)庫選擇非關系型數(shù)據(jù)庫，通過簡單的數(shù)據(jù)模型可以實現(xiàn)大數(shù)據(jù)下的信息挑戰(zhàn)。以Mongo DB為例，作為一種分布式文件存儲數(shù)據(jù)庫，既可以支持比較松散的數(shù)據(jù)結構也可以支持更加復雜的數(shù)據(jù)類型，包括數(shù)據(jù)索引和查詢語言管理等。

2 Vue.js技術的模塊應用方法

2.1解析平臺研究

整個解析平臺劃分為三個層次，第一層是對于信息的提取，同時利用抓包工具提取那些需要進行分析的信息內容。基礎的信息是flow的協(xié)議信息、流量信息等，而控制信息則包含了其它層面的關鍵內容。例如對于DNS來說，包括DNS請求在內的域名、結果和響應時間等應用層信息都可以進行良好分析。例如要進行視頻文件的應用，就需要了解到視頻文件的分辨率、幀數(shù)和碼率等信息。業(yè)務所采取的流媒體協(xié)議和編碼方式等也可以被作為可視化系統(tǒng)的主要框架內容。在默認情況下我們能夠直接在移動端對IP數(shù)據(jù)包進行解析，也可以通過過濾器選擇指定的應用內容來對流量信息進行監(jiān)控。在數(shù)據(jù)的存儲方面，對數(shù)據(jù)進行處理后再進行文本解析則可以提取出關鍵信息內容并展開統(tǒng)計分析，以便于展開合理的數(shù)據(jù)可視化展示工作。

2.2數(shù)據(jù)可視化管理

我們可以安裝node并輸入命令完成安裝過程，選擇項目的存放路徑后，新建項目并配置好與之對應的參數(shù)內容。例如在一個完整的文件夾當中，config文件夾是配置項目的主要目錄，其中涉及到分析的部分可以直接地被抽取出來設置為組件，以便于在其它界面中進行應用。整個頁面也可以被分為三個部分，內容展示區(qū)域有著不同的模塊，模塊內部通過具體類別來選擇相應的應用名稱，并根據(jù)選擇的應用獲取抓包名，最終通過查詢按鈕來進行可視化的顯示。而Vue框架內部的指令也可以將類別、應用和抓包信息等進行展示。我們在項目當中可以分析一些比較常見的移動端應用內容，每一類型的應用端應用內容也可包括不同的應用名稱。如果要直觀地對單詞業(yè)務的流量數(shù)據(jù)進行分析，那么就需要在現(xiàn)有的PC和移動設備上提供更加直觀清晰和內容豐富的可視化圖表內容。

3 系統(tǒng)實現(xiàn)

3.1系統(tǒng)需求

需求分析是產品設計時的核心環(huán)節(jié)，我們在對于產品的需求進行假設分析之后就可以將模塊劃分為不同的功能類型，然后再依次對相應的模塊展開需求分析。而表單的可視化系統(tǒng)當中的用戶角色是位移的，web前端的開發(fā)人員在進行分析后就可以確定系統(tǒng)中的用戶信息，包括用戶管理、通道管理、組建管理等多個方面的內容。

3.2用戶通道管理

用戶和通道管理作為web服務提供給yoghurt，因此具備用戶系統(tǒng)的特點。另外為了便于開發(fā)人員進行協(xié)同開發(fā)工作，系統(tǒng)本身可以通過通道機制來完成業(yè)務規(guī)劃，所構建出的頁面并不會進行較差應用。即便是不同團隊內部的開發(fā)人員，只需要在自己的通道下進行操作等，系統(tǒng)的組件和頁面來源于不同的通道，頁面負責對通道下的組件進行調用。在系統(tǒng)內部用戶可以完成對通道、組件、頁面的管理和控制，系統(tǒng)會設置相應的權限機制。

3.3頁面編輯模塊

頁面編輯模塊包括頁面的屬性配置、組件樹導航、組件屬性構建等。可用的組件列表從后端獲取組件信息并進行渲染之后，系統(tǒng)完成對于內置組件和信息的編寫。而對于某些自定義的組件內容，用戶在上傳自定義組件后獲取信息，生成的json會被保存在數(shù)據(jù)庫之內。

3.4組建配置視圖

組建配置中包含組件的多種配置類型，包括預設屬性、自定義屬性和其它樣式內容等。組件的配置本身以對象的形式包含在組件樹的節(jié)點當中。其中預設屬性、自定義屬性和樣式分別對應的是對象列表，每個配置對應每個對象，以雙向綁定配置的單元組件渲染成為實際頁面。

4 結語

基于Vue.js展開的移動應用可視化平臺設計對于未來的大規(guī)模用于需求而言具有明確的現(xiàn)實作用。整個系統(tǒng)在可視化構建系統(tǒng)下進行整體規(guī)劃，然后展開需求假設，就可以讓系統(tǒng)內部具有可視化構建能力并以此為基礎進行系統(tǒng)的需求分析。我們將系統(tǒng)劃分為多個模塊后進行相應的內容分析，也可以對前端、后端、數(shù)據(jù)庫等進行綜合分層設計，完成對需求的相應。

參考文獻

[1]馮傳波，彭章友，張鐘浩.基于Vue.js的移動應用可視化平臺的研究[J].工業(yè)控制計算機， 2019，32（05）：106-107.

[2]縣小平，馬國俊.學習分析技術在網頁設計與制作課程中的應用實踐[J].甘肅高師學報， 2019，24（02）：96-98.

[3]陳永紅，郭莉莉，張士兵.SystemVue在電子信息類課程中的應用[J].現(xiàn)代電子技術，2015， （03）：152-154.