基于Vue.js的信息管理系统前端架构

蔡泽铭 王文华

（广东海洋大学电子与信息工程学院 广东省湛江市 524088）

1 引言

信息管理是各组织日常的主要管理工作，信息作为生产力中最活跃的因子，其管理是一个十分重要的工作。而随着互联网技术和移动终端的发展，Web 信息管理系统应用的需求在不断增加，网页呈现方式也不再仅仅只是简单的文字和图片的简单呈现，近几年前端在国内外有了非常多的发展[1-4]。在早期前端发展出的框架主要是以J Query 为主的一类框架，可以称作JavaScript 的一个库，以及一些UI 框架，例如Bootstrap[5]、YUI[6]。随着前端的工作量和复杂度的增加，开发者们开始尝试以更高效的方式简化工作、提升效率，提高代码质量，因此框架应运而生。在2013年，Facebook 开源了React[5]，这是由Facebook 的一个内部项目发展出来的一个前端框架，用于代替已有的JavaScript MVC 框架，它通过尽可能减少对DOM(Document Object Model)的操作而提出了Virtual DOM 的概念。通过抽象出一个对象来描述DOM 的原本模样，而如何呈现最终是通过Virtual DOM 来更新真实的DOM。再早一些的有Angular Js，它是Google 发布的一个MVC 框架，核心思想是MVC、模块化，自动化双向数据绑定、语义化标签、依赖注入等等。

而在国内方面，由于前端框架的发展，随之出现了前后端分离的思想。为解决开发中前后端职责不清，前端开发重度依赖开发环境等问题，以及随着AJAX（Asynchronous JavaScript And XML）的出现，前后端分离这个概念才开始真正的有了实现的基础。各类开发人员能够专注于自己的领域，其通过定义接口而进行数据的交互，以及后来出现的Vue.js，其通过数据驱动，通过数据的双向绑定[6]使DOM 和数据保持同步，这也是MVVM(Model-View-ViewModel)设计模式的一个核心思想。

Vue.js 具有完善的生态圈，能够快速搭建Vue Router 和Vuex 等。本文基于Vue.js 技术实现管理系统的布局和样式，便于人机交互操作的信息管理系统，在完善数据采集和可视化展示等功能的同时使浏览器的渲染速度加快，改善信息管理系统的性能。

图1：系统的总体功能需求分析

图2：信息采集与数据展示示意图

图3：系统的整体构建流程图

2 信息管理系统的需求分析

2.1 系统的产品定位与功能分析

针对不同细分领域而产生的信息管理系统能够很好地针对性进行信息管理，从而实现有的放矢。大学生在中国是一个很大的群体，其中所需要管理的信息量巨大且种类繁多，其中的就业信息更是多种多样。本文选择从学生方面入手进行信息管理系统的前端架构开发与研究，定位于整理大学生就业信息方面，重在通过前端的图表的方式展现出来，让问题简化，易于管理。

系统的总体需求如图1所示。一个好用的信息管理系统通常层次结构会明了清晰，其逻辑结构是管理系统的各个模块构成的一个网络图，而各个功能模块的展示需要通过一个导航系统[8]来呈现。导航设计应该是既好看又兼具实用性的，层次感更加分明，用户能够通过导航栏快速找到自己想要的内容信息，本文在系统中使用的是纵向导航栏。

2.2 系统的功能需求分析

本信息管理系统主要包括四个主要功能，即登录模块、首页模块、信息采集模块、数据展示模块。用户通过登录界面进行登录，做出一个能够吸引用户的登录界面是很有必要的。一个美观有设计感的界面会让用户有兴趣去了解，去深入。从这一方面来思考，登录界面可以做得美观一些，这是很重要的一个点。首页是用户登陆后的第一交互界面，其可以告诉用户系统核心与重要的功能，通过一段介绍去了解这个系统，是用户的第一印象所在，所以在前端领域来说，就是要提升首页的交互体验，继而影响到后期用户对整个系统的后续体验。信息采集模块在前端界面上比较重要的就是信息的采集录入，因此系统专门分了一个模块用于收集采集信息，其中表单元素居多。表单是系统交互的重要工具，其能够给需要采集信息的用户提供一定的反馈及信息的重要来源。用户在浏览数据展示的时候一般都喜欢有许多图片说明的信息，这样的方式能够比较轻松直观地获取到所需的信息，而统计图表是一种很好的叙述方式。所谓统计表，就是人们将统计资料的数量关系采用表格的形式展示出来，从而达到直观地展示出数据的走向趋势，使用者能够更好地获取信息；而所谓统计图，就是将统计资料的数量关系利用某种方法和工具绘制几何图形来展示，是以图像化的方式将平时收集到的数据进行了具象化的表现，提升了人们对数据的敏感度，观察数据的走向，更好地对形势作出判断。常用的统计图有柱形图、条形图、拆线图以及饼状图等。

在信息采集模块与数据展示模块的联系如图2所示。

3 信息管理系统的设计与优化

3.1 系统的设计

构建一个站点的前端应用，重点在于整体的构建，减少各个组件之间的耦合度，因此在这次的技术选择中选用了Vue.js 进行开发。系统的整体构建如图3所示。

构建后系统的整体效果如图4所示。

其中，首页是本系统的重要功能模块，其主要功能是能够及时更新一些重要信息，用户可以通过首页的未读消息一栏看到最新发布的公告以及信息，避免错过所需的信息，并且在用户的读过消息之后会将消息转入已读消。系统通过读取数据之后，将所调取到的数据放入unread 以及read 两个数组变量中，程序将变量中的数据展示至前端界面，再通过相应的代码操作unread 以及read 数组变量的数据。当点击标为已读时，系统通过handleRead 方法将该条信息提取出来为item变量，再将item变量拼接至read变量中进行展示，从而实现标为已读功能。

而数据录入模块是信息录入的途径，主要是表单的输入与绑定，该页面的实现不需要太多复杂的样式，一切以简约为主，如图5所示，在表单的选择上选择了基本的输入框、下拉列表、单选框，以及时间选择框。对采集到的数据从数组中提取出来进行展示，如图6所示。

数据展示模块旨在对录入的数据进行可视化的展现，通过许许多多的图像技术及科学，将数据以图像的方式进行呈现出来，并表现在具体的设备上。本系统将采集到的数据使用Vue.js 封装的Vueschart 的图表组件进行逻辑化处理，最终进行可视化展示。通过使用可视化图表组件，其展示效果如图7所示。可视化的图表让用户对信息能有个快速准确的了解，发现数据信息的大体规律，省去冗余的文字叙述，简化资料，便于分析、对比和计算。另外，使用可视化组件，程序代码也会相对简单一些，通过选择图表的类型，以及具体的样式及数据，就可以通过这种方式呈现出具体的图像。

图4：系统整体效果图

图5：录入信息模块界面图

图6：信息展示界面

图7：数据展示效果

3.2 系统开发中应用的技术

本文系统开发采用了以下技术：

3.2.1 Vue.js

随着前端项目逻辑的复杂度提高以及难以维护的情况，前端引进了后端的架构思想MVC，JavaScript 框架开始受到欢迎。它们能帮助开发者书写一些逻辑代码，提高开发者的效率。Vue 取自法语中的Vue，是看见、视野、窗户的意思，这很符合Vue.js 的思想。通过双向绑定的数据流模式，解决了以往开发者需要经常操作DOM 的问题。Vue.js 这几年越来越受到前端开发者的欢迎，使用者大大增加。

3.2.2 CSS3(Cascading Style Sheets 3)

CSS3 是CSS 的一个新版本，其语言的开发是朝着模块化发展的。相比以前的版本，它被分解为了很多的模块，如盒子模型、列表模块等等，并且在其中加入了许多的动画效果供开发者使用。本系统使用了很多CSS3 的特性，如圆角border-radius、过渡动画效果transition 等，代替网页的脚本实现部分页面的交互效果。这些功能提升了系统界面美观度。另外，本文从减少HTTP 请求次数、组件复用、安全防御等方面对系统进行了优化。

4 结论

信息作为生产力中最活跃的因子之一，其管理是一个十分重要的工作，信息管理的好坏直接影响到该部门或该组织的工作效率。本文针对高校大学生就业信息方面的统计复杂繁重这项工作进行信息管理系统的前端架构开发与研究，重在将所需信息通过前端的图表方式展现出来，让问题简化，易于管理。随之对功能需求进行分析，采用Vue.js 进行人性化的开发设计，并且从减少HTTP 请求次数、组件复用、安全防御等方面对系统进行优化，使得本文的系统层次清晰、简洁明了，有一定的应用潜力。