基于Vue.js 框架实现移动终端数据可视化研究与实践

2020-06-19吴志霞叶根梅周凌燕

通化师范学院学报 2020年6期

吴志霞，叶根梅，甘丽，周凌燕

随着数字化校园建设工作的快速推进，以及移动网络终端的普及，使得智能手机等移动终端成为校园信息发布和获取的最主要工具［1］，应用程序的开发既要提供PC 端也要提供移动端（包括不同操作系统平台的移动终端）成为一种趋势，而移动终端的开发方案不外乎原生开发模式（Native App）、Web 开发模式（Web APP）以及混合开发模式（Hybrid App）当中的一种.本研究以校园管理系统移动端的新闻数据可视化模块为实例，采用Web 开发模式，运用Vue.js 框架进行程序的二次开发，实现数据的可视化.文中详细描述了实现步骤，并阐述了Vue 项目的前端组件化的设计思想.

1 开发实例及平台对外开放API接口介绍

1.1 开发实例介绍

开发实例是针对校园管理系统，该系统后台服务器端采用Spring+SpringMVC+MyBatis框架技术实现，对外提供的数据是JSON 格式的数据，但移动终端是采用原生态开发模式，只提供了基于Android 平台的移动客户端，其中Android 版的移动终端校园新闻列表如图1所示.现针对校园管理系统移动终端的新闻数据可视化模块，采用Web 开发模式，运用Vue.js框架进行程序的二次开发，实现数据在不同移动终端的可视化.

图1 Android 版校园新闻列表

1.2 有关后台服务器端开放的JSON API接口介绍

校园管理系统后台服务器端对外提供能够返回JSON 格式数据的API 接口，开发者可以根据后台服务器对外提供的URL 地址去获取JSON 格式的数据.当前校园管理系统后台服务器的URL配置路径为：http：//192.168.1.102：8088/ssmNews/，开发者可以根据配置路径去访问不同的数据资源.

（1）图片资源.如涉及访问图片，则使用服务器路径+字符串拼接方式获取，请求地址为：

http：//192.168.1.102：8088/ssmNews/upload/article/images/2f/e2/8311c8105373.jpg

（2）数据资源.如要获取校园新闻，向后台服务器请求的地址为：

http：//192.168.1.102： 8088/ssmNews/client/news/getTopNews.action

请求如果成功，后台服务器返回JSON 数据格式的数据，有关JSON数据的说明，如表1所示.

表1 获取新闻API

2 Vue.js 简介

Vue（读音/vjuː/，类似于view）是一套构建用户界面的渐进式MVVM（Model-View-View-Model）模式的JavaScript 框架，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计，以数据驱动和组件化的思想构建［2］.MVVM 衍生于MVC 开发模式，其本质是通过View-Model 的数据绑定连接View 和Model，让数据的更新自动映射为视图的变化［3］.Vue.js的MVVM 架构图如图2 所示［4］，不同于原有的手动操作DOM 节点方式，Vue.js 是响应式的，是采用将DOM 和数据绑定起来的方法，而这种绑定是一种双向的绑定，一旦创建了绑定，DOM 将会与数据保持同步，数据一旦更新，相应的DOM 节点也会同步更新，反之亦然.

图2 Vue.js 的MVVM 架构图

3 采用Vue.js 框架实现数据可视化

3.1 路由配置

编辑src/router 下的index.js 文件，进行路由的设置，明确访问新闻列显（Home）组件的访问路径.有关路由配置文件index.js 的核心配置代码如下：

3.2 父组件的定义

通过下方Home 组件的定义，可知Home组件使用了两个子组件，分别是轮播图组件（HomeSwiper）与推荐新闻组件（HomeRecommend）.通过父组件的定义，明确前端组件化的设计思想，每一个组件就是Vue 的一个实例，一个Vue 项目由多个组件组成，即一个Vue项目是由多个Vue 实例拼装组合而成，Vue 实例自动结合模版及数据生成最终要展示的内容，并将内容放到挂载点处.有关父组件——Home 组件的核心代码如下：