基于Vue.js的培训可视化系统开发与设计

摘要：随着科学技术和车联网技术的不断发展，大数据部门对于员工核心技术的掌握有了更高的要求，并为员工提供了更多技术知识拓展的培训课程，为了管理课程信息和员工信息，采用现较为流行的Vue框架，设计开发了培训可视化系统，系统中大量使用数据可视化的方式，方便员工查看学习排行情况和课程信息，更好地激发员工参加培训和增长技术知识的热情。

关键词：Element-UI;Vue.js;培训系统;

近年来，随着科学技术的不断发展，为追赶汽车技术革新的步伐，大数据部门为员工提供了许多专业知识提升的培训课程，并将学习情况纳入员工晋升考核项。但存在员工无法知晓自己的课程学习情况和存在的课程信息，不利于员工有效地参与培训学习，故培训可视化系统应运而生，采用学习数据可视化的方式[1]，直观地展现员工的学习情况，有利于员工不断地参加培训课程，提升自我的专业技能。

1 培训可视化系统简介

培训可视化系统主要分为4个页面：可视化页面、个人页面、课程总表页面和员工信息页面。系统存在管理员和普通员工两种角色，两种角色对页面的操作设置有相应的权限，管理员支持页面的所有操作，员工只拥有查看的权限。

系统为所有课程设置了青铜到王者的课程等级，也对员工的职位等级和所属科室进行了分类，学习排行将参考学习课程的总分数和学习课程的等级进行划分，以分数由高到低的形式展示个人学习排行和讲师授课排行，使整个系统具有游戏趣味性，同时激发员工的学习热情。

2 框架简介

本培训系统采用现较为流行的Vue为基础框架，Vue.js是一个轻巧、高性能、可组件化的MVVM库，也是一个构建数据驱动的Web界面的库，拥有非常容易上手的API[2]，同时为了能够快速搭建整个系统，选取Element-UI组件库，该组件库拥有许多常用的功能模块，例如按钮button、表格table、选择器select以及对话框dialog等，同时该组件库支持市面上大多数的游览器，可以让开发者减少DOM样式处理和数据绑定处理的工作量，极大地提升了开发者的工作效率。

2.1 项目目录介绍

在新建项目时，为了构建完整的Vue框架系统，采用Vue-cli工具，也称为脚手架工具，对项目文件进行配置，在进行创建时只需要选择相应的配置选项，该脚手架工具即会在框架中生成相应的文件及目录。

2.2 Vue工具简介

开发一个完整的培训系统，除了基础的Vue.js对数据和视图进行绑定，还需要运用一些Vue插件工具，常用到的工具有Vue-router,Axios和Vuex等，这3个工具的功能分别为路由管理、数据请求和状态管理。

2.2.1 Vue-router路由管理

Vue-router是Vue官方的路由管理工具，可以实现将路径与页面组件进行映射，并通过修改路径来达到组件间的跳转切换。

2.2.2 Vuex状态管理

在进行组件化项目开发中，经常遇到需要将当前组件的状态传递给其他组件的情况。一种情况是父子组件之间进行通信，当父组件传递数据给子组件时，通常会采用Props的方式实现数据传递。当子组件为父组件传递数据时，就需要使用自定义事件来实现数据传递。父组件可以像处理原生DOM事件一样通过v-on监听子组件实例的自定义事件，而子组件可以通过调用内建的$emit()方法并传入事件名称来触发自定义事件。另一种情况非父子组件之间通信，如在一些大型项目应用程序中，单页面可能包含大量组件。当通信双方不是父子组件甚至没有任何联系时，与多个组件共享一个状态将非常麻烦。为了解决这个问题，Vuex应运而生。在一般情况下，每个组件都有自己的状态。有时其他组件的状态会需要随着某个组件的状态变化而变化，此时，可以使用Vuex保存要管理的状态值，修改该值后，所有引用该值的组件都将自动更新[3]。

2.2.3 Axios数据请求

Axios是一个基于Promise的http客户端，在Vue项目开发中，一般通过其进行Ajax请求操作，它的主要特点有：

1)从浏览器中创建XMLHttp Request请求;

2)支持从node.js发出http请求;

3)支持Promise Api;

4)拦截请求和响应。

3 方案实现

基于Vue.js组件化的构建思想，一个系统可以由多个页面组件构成，同时一个页面组件也可以由许多功能模块组件构成。本培训系统基于组件化的思想进行开发。

3.1 可视化页组件

可视化页代码结构如图1所示，排行组件rank.vue是由筛选组件filter.vue和表格展示组件table.vue组成，filter.vue组件涵盖对个人学习排行、讲师授课排行和科室学习排行的筛选，table.vue组件用于展示筛选的排行结果。可视化组件show.vue，其内部有tree.vue组件和star.vue组件，tree.vue组件代表一个科室，star.vue组件代表一门课程，通过对科室数据遍历的方式，将tree.vue组件充满show.vue组件，再通过对课程数据进行遍历，将star.vue挂载到tree.vue组件上。

3.2 个人界面页组件

个人页面代码结构如图2所示，其中排行组件rank.vue是由筛选组件filter.vue和表格展示组件table.vue组成，filter.vue组件涵盖对个人学习排行、讲师授课排行和科室学习排行的筛选，table.vue组件用于展示筛选的排行结果。主组件由tree.vue组件、filter.vue组件和star.vue组件构成，其中tree.vue组件代表整个部门，star.vue代表一位员工，通过对员工数据的遍历，将star.vue组件挂载到tree.vue组件上，同时filter.vue支持时间筛选，可以查看特定时间段的员工学习数据。

3.3 课程总表页组件

课程总表代码结构如图3所示，filter.vue组件支持对课程等级，所属科室，课程名称进行筛选，筛选后的结果由table.vue进行展示。operate.vue包含上传文件的upload.vue组件和新增课程的add.vue组件，进行相关操作后，table.vue的内容也会进行同步的更新。

3.4 员工信息页组件

员工信息代码结构如图4所示，filter.vue筛选组件支持对员工姓名和员工所属课程的筛选，table.vue展示筛选后的员工信息列表。add.vue用于新增员工，当完成新增操作后，table.vue也会相应进行更新。

4 结语

随着互联网的不断发展，Web需求量和复杂度也会逐渐加大，利用业务量强大的Element-ui组件库和Vue.js轻量化的框架，可以极大地缩短Web开发者的开发时间，从而满足不同的业务开发需求。本培训系统基于此进行开发，主要用于展示部门员工学习情况、管理课程和管理员工信息，在增加趣味性的同时，更激发了员工参加学习的热情。

参考文献

[1] 刘翔宇.基于Vue的数据可视化系统的设计与实现[D].北京：北京邮电大学，2018:14-35.

[2] 刘博文.深入浅出Vue.js[M].北京：人民邮电出版社，2019.

[3] 师晓利,刘志远.Vue.js前端开发实战：慕课版[M].北京：人民邮电出版社，2020.