Vue.js技術(shù)在移動(dòng)應(yīng)用可視化平臺網(wǎng)頁設(shè)計(jì)中的應(yīng)用

沈皎佶

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

關(guān)鍵詞：Vue.js技術(shù) ?移動(dòng)應(yīng)用 ?可視化平臺網(wǎng)頁設(shè)計(jì)

引言

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

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

1.1前端框架

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

1.2后端框架

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

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

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

2 Vue.js技術(shù)的模塊應(yīng)用方法

2.1解析平臺研究

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

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

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

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

3.1系統(tǒng)需求

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

3.2用戶通道管理

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

3.3頁面編輯模塊

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

3.4組建配置視圖

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

4 結(jié)語

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

參考文獻(xiàn)

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

[2]縣小平，馬國俊.學(xué)習(xí)分析技術(shù)在網(wǎng)頁設(shè)計(jì)與制作課程中的應(yīng)用實(shí)踐[J].甘肅高師學(xué)報(bào)， 2019，24（02）：96-98.

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