【摘 要】随着学校规模的扩大，学生人数的不断增加，学院教务这样一项繁琐的事更是带来了巨大的人力资源的浪费。在这种情况下，通过数据可视化的方法，借由计算机绘图，使用多种图形方法将复杂的数据生动的表达，使得数据更加易阅读，效率更高。教务管理数据分析平台基于springboot与Vue框架、利用ECharts数据可视化分析组件的模型，拥有检索迅速、查询方便、安全性好，数据更加直观等优点，对学生学分、选课和毕业情况等方面进行统计分析，极大地提高了教务信息管理的效率。
【关键词】Vue；springboot；可视化前后端分离一、简介对大学学院而言，需要有面向学生及老师的一体化教务管理交互页面，也要有能够针对学院内大量数据的处理与分析系统。当前大部分学院管理系统存在有如下问题：交互界面不够美观友好，不利于教师与学生对教务的统筹管理；许多实现方式简单的WEB页面，不能够很好地在移动端浏览器上展示；此外，使用Web端语言、进行用户端运算并不能高效方便地对数据进行综合性地处理与展示。
存在以上问题的原因有：对于非计算机相关专业的学院来说，缺乏能够很好掌握网页系统及后端数据处理系统的构架的教师；而网页前端，更是涉及到美工与设计等问题。
对学院来说，前后端的交互大部分是对象化的数据的交换，故可以采用前后端分离式。以Vue渐进式框架作为网页前端框架，支撑页面的显示以及用户的交互。Java具有较好扩展性与丰富的生态，通过Springboot框架搭建后端数据处理及分析平台，连接数据库，将表转化为Java中的实体类，数据的处理方法集成于类中。使用云服务器，并且通过热部署解决云端服务器造成运维可能的效率问题。
二、后端部分
Springboot是一个Java框架，提供具有控制反转的容器，支持热部署。而利用JPA Repository进行数据库的连接，其相比普通DAO的优点在于Repository更加面向对象，既符合Java的习惯，也更适用于学院对象化的数据参数。
后端的数据部分实现为，在Model包下的类代表数据库中表格的Entity类，其通过JPA Repository可以方便地扩展类，调用已有的方法。此方法相比于一般的定义语句查询的优点在于，能够有效地阻止XSS漏洞的产生，最大限度地保证学院信息资产的安全；且具有较高的复用性；在Tomcat服务器下，Repository能够较好地配合多线程的大量数据查询，效率极高，并且极大程度地减少的数据冗余可能造成的问题。
对于前后端交互，建立以前端为参照的Controller。迭代设计与实现的过程中，我们发现对于Controller，应与网页的设计逻辑相切合，便于更好地进行统一的功能维护。因此，我们放弃了以数据库表实体类为单独的类。对于数据库表实体类，建立对应Service接口，在实现中定义对于相应数据的单体处理方法；在Controller调用接口，进行不同表格数据的综合处理。
三、前端部分
Vue是JavaScript的渐进式MVVM框架，其优点为模块化、学习曲线平滑，十分适合前端基础较为薄弱的一线教师进行开发维护。
Vue.js框架能够很好地使用Element-ui，Echarts图表，Axios技术等。
将用户访问页面总体分为登陆页面、学生端页面、教师端页面、管理员端页面。对于不同页面建立主Component，在内部配置Vue-route，进行内部部分视图的路由跳转，以此减少资源的加载量。
使用Vuex存储整体的前端静态数据以及适用于所有模块的函数。
使用axios HTTP库，其特点为使用了Promise对ajax进行封装，并且自动转换JSON数据，如此便无需在后端部分进行繁琐的格式转换。
Echarts图表是一个使用JavaScript实现的开源可视化库，通过Echarts图表可以很好地展现数据视图，便于学生与老师对教学与科研情况进行直观的分析。Vue对于不同的浏览器平台均有着较好的适应性。在我们测试的过程中发现，不管是PC端还是移动端，Vue所呈现的网页均能保持较好的稳定性。
四、结语
Vue与Springboot都是以简化应用搭建及开发过程而诞生的，使用其作为框架，能够很好地支撑学院管理分析系统。此外，项目今后的发展方向为，通过构建快速部署式框架，能够进行快速的部署；通过接口化，加强系统的可移植性等。
参考文献：
[1]张宇国.教务管理系统的设计与实现[J].电脑知识与技术,2009[2]刘翔宇.数据可视化系统的设计与实现[D].北京邮电大学,2018[3]杨婷.基于模块化的前端开发框架的研究与实现[D].北京邮电大学,2017基金项目：
中国民航大学创新创业训练计划项目资助：“二级学院管理分析平台的设计与实现”；项目编号：201910059072。
