Vue.js技术在移动应用可视化平台网页设计中的应用

沈皎佶

摘要：移动应用本身是现代互联网产业的重要组成部分，且智能终端的出现让移动应用的空间得到了广泛扩展，与移动应用相关的产业也呈现出稳定的增长趋势。在此社会背景之下越来越多的移动应用程序开始出现并深入社会生活的各个领域当中，并影响到了人们的现实生活。Vue.js作为一种重要的移动业务分析技术可以实现对应用和业务流程的管控，满足人们的数据需求，例如在可视化平台网页设计层面。

关键词：Vue.js技术  移动应用  可视化平台网页设计

引言

在现代社会的业务需求当中，新的移动应用平台开始出现，且大数据时代下的数据膨胀特点显著。Vue.js技术的应用就是为了了解新时期的业务流量特征和交互过程相关的关键信息，而如何在这种情况下减少需求开发成本保障開发效率也成为了重要课题。对于开发人员来说，以可视化方式开发出的平台网页也能更好地适应不断扩张的业务需求。

1 Vue.js涉及到的开发框架与数据库

1.1前端框架

整个可视化平台所选择的是前后端分离的开发模式，前端负责对界面进行开发，后端则负责对数据信息展开处理。这种技术模式有几个方面的显著优势，一是让全段JS可以完成大多数的数据处理工作并减少服务器的压力，二是不会因为后端产生的错误影响到前端的正常工作;三是原有工作模式下后台很难完成前端页面的查询分析，但通过JS可以直接完成这项工作，让前后台各司其职地完成各项内容。Vue.js作为一种轻量级框架，其主要特征在于灵活性突出具有良好的使用性能。传统模式下数据绑定是前端工作的核心内容，而现有的工作模式下我们可以更加专注于数据本身，而不是对DOM进行的微观管理。Vue借助双向响应数据功能将状态中的不同变量进行规划，添加了一些setter和getter，以便于实现对DOM的自动更新和跟踪信息调整。反之，Vue提供了Vuex，是满足Vue工作要求的“库”，每个组间都包含自身的HTML和CSS，用于渲染网页当中的某些关键内容，也让代码的复用性得到提高，后续界面要进行扩展时也可以降低学习成本，显然此类前端框架的技术优势比较突出。

1.2后端框架

后端框架则是基于Node.js的Web应用框架，同样是一种轻量级框架，我们可以以此为基础创造各种Web应用，完成路由控制、模板分析、静态文件管理工作等。同时我们还可以使用插件或其它模块来整合创建各种类型的Web移动设备应用方案，支持多种模板并创设一个功能全面的网站平台。当今时代下个性化服务成为了未来网络平台和交互设计的必然发展趋势，这些内容数据本身不能在前端服务器进行缓存。不过后端数据的计算过程则可以完美地解决这一问题，用户不会因为计算而产生明显的延迟感。总体而言后端框架的和新特点在于可以通过中间件来响应HTTP请求，并且通过不同路由执行HTTP请求动作，直接通过模板参数规划就可以完成对于HTML页面的渲染工作。

1.3数据库

数据库选择非关系型数据库，通过简单的数据模型可以实现大数据下的信息挑战。以Mongo DB为例，作为一种分布式文件存储数据库，既可以支持比较松散的数据结构也可以支持更加复杂的数据类型，包括数据索引和查询语言管理等。

2 Vue.js技术的模块应用方法

2.1解析平台研究

整个解析平台划分为三个层次，第一层是对于信息的提取，同时利用抓包工具提取那些需要进行分析的信息内容。基础的信息是flow的协议信息、流量信息等，而控制信息则包含了其它层面的关键内容。例如对于DNS来说，包括DNS请求在内的域名、结果和响应时间等应用层信息都可以进行良好分析。例如要进行视频文件的应用，就需要了解到视频文件的分辨率、帧数和码率等信息。业务所采取的流媒体协议和编码方式等也可以被作为可视化系统的主要框架内容。在默认情况下我们能够直接在移动端对IP数据包进行解析，也可以通过过滤器选择指定的应用内容来对流量信息进行监控。在数据的存储方面，对数据进行处理后再进行文本解析则可以提取出关键信息内容并展开统计分析，以便于展开合理的数据可视化展示工作。

2.2数据可视化管理

我们可以安装node并输入命令完成安装过程，选择项目的存放路径后，新建项目并配置好与之对应的参数内容。例如在一个完整的文件夹当中，config文件夹是配置项目的主要目录，其中涉及到分析的部分可以直接地被抽取出来设置为组件，以便于在其它界面中进行应用。整个页面也可以被分为三个部分，内容展示区域有着不同的模块，模块内部通过具体类别来选择相应的应用名称，并根据选择的应用获取抓包名，最终通过查询按钮来进行可视化的显示。而Vue框架内部的指令也可以将类别、应用和抓包信息等进行展示。我们在项目当中可以分析一些比较常见的移动端应用内容，每一类型的应用端应用内容也可包括不同的应用名称。如果要直观地对单词业务的流量数据进行分析，那么就需要在现有的PC和移动设备上提供更加直观清晰和内容丰富的可视化图表内容。

3 系统实现

3.1系统需求

需求分析是产品设计时的核心环节，我们在对于产品的需求进行假设分析之后就可以将模块划分为不同的功能类型，然后再依次对相应的模块展开需求分析。而表单的可视化系统当中的用户角色是位移的，web前端的开发人员在进行分析后就可以确定系统中的用户信息，包括用户管理、通道管理、组建管理等多个方面的内容。

3.2用户通道管理

用户和通道管理作为web服务提供给yoghurt，因此具备用户系统的特点。另外为了便于开发人员进行协同开发工作，系统本身可以通过通道机制来完成业务规划，所构建出的页面并不会进行较差应用。即便是不同团队内部的开发人员，只需要在自己的通道下进行操作等，系统的组件和页面来源于不同的通道，页面负责对通道下的组件进行调用。在系统内部用户可以完成对通道、组件、页面的管理和控制，系统会设置相应的权限机制。

3.3页面编辑模块

页面编辑模块包括页面的属性配置、组件树导航、组件属性构建等。可用的组件列表从后端获取组件信息并进行渲染之后，系统完成对于内置组件和信息的编写。而对于某些自定义的组件内容，用户在上传自定义组件后获取信息，生成的json会被保存在数据库之内。

3.4组建配置视图

组建配置中包含组件的多种配置类型，包括预设属性、自定义属性和其它样式内容等。组件的配置本身以对象的形式包含在组件树的节点当中。其中预设属性、自定义属性和样式分别对应的是对象列表，每个配置对应每个对象，以双向绑定配置的单元组件渲染成为实际页面。

4 结语

基于Vue.js展开的移动应用可视化平台设计对于未来的大规模用于需求而言具有明确的现实作用。整个系统在可视化构建系统下进行整体规划，然后展开需求假设，就可以让系统内部具有可视化构建能力并以此为基础进行系统的需求分析。我们将系统划分为多个模块后进行相应的内容分析，也可以对前端、后端、数据库等进行综合分层设计，完成对需求的相应。

参考文献

[1]冯传波，彭章友，张钟浩.基于Vue.js的移动应用可视化平台的研究[J].工业控制计算机， 2019，32（05）：106-107.

[2]县小平，马国俊.学习分析技术在网页设计与制作课程中的应用实践[J].甘肃高师学报， 2019，24（02）：96-98.

[3]陈永红，郭莉莉，张士兵.SystemVue在电子信息类课程中的应用[J].现代电子技术，2015， （03）：152-154.