基于 Vue 与 SpringBoot 框架的学生成绩分析 和弱项辅助系统设计

摘   要

针对相关学科考试中遇到的学生弱项管理情况，设计了一套基于 B/S 架构的学生弱项辅助系统。系统采用前后端分离开发，前端使用 VUE 框架，后端使用 SpringBoot 框架实现，使用mysql 数据库来进行数 据持久层的搭建。前后端通过 Axios 库进行数据交互。系统在数据管理和权限安全的基础上实现考生测试智能分析弱项并提供弱项帮扶功能，为学生提供了不同于传统练习的智能补弱服务。从运行结果来看，该系统通过智能化的自主分析和针对性的弱项辅导，较为完善的实现了对日常学习中知识薄弱点 的发现、管理、分析和帮扶。

关键词：Vue；SpringBoot；MySql；学生成绩分析；教育平台；弱项辅助

1  引言

1.1  项目背景

近年来，随着教育竞争愈发激烈，网络教育行业需求猛 增，伴随着各种网络应用开发技术和网络应用开发工具的更 新迭代，基于各种技术体系的网络教育平台软件被开发出来，相比较于同质化的基础教育资源管理平台，很少有能够自主 分析学生弱点并提供智能帮扶的平台，为解决这一需求，在 分析已有的教育资源管理平台，基于已有项目原型基础下， 设计并实现了一套学生成绩分析和弱项辅助系统，希望通过 系统的智能化自主分析和针对性弱项辅导，帮助老师和学生 摸清学习中遇到的知识薄弱点。

1.2  Vue.js 框架

Vue 是一套用于构建用户界面的渐进式javascript 框架 [1]，Vue 的主要特点在于自底向上逐层应用。视图层是它的核心 ,  当Vue 与现代化的开发工具以及各种支持类库等结合使用时， 它能够支撑起功能丰满的单页面网络应用 [2]。

1.3  SpringBoot 框架

SpringBoot 是 Spring 项目中的一个子工程，其优势在于  简化了配置繁琐的基于 Spring 的应用开发，它为 Spring 平台 以及第三库提供了很多开箱即用的设置，通过启动器就可以  即刻使用默认配置进行开发 [3-4]。除了配置上的减少外，它还  提供了诸多大型项目中常见的非功能性特性，如内嵌服务器、 安全、指标等等。

2  用户权限与功能分析

本系统根据实际设计需求参考基于角色的访问控制模 型 [5] ，设计了三类权限的用户：学生、教师、管理员。

2.1  学生

学生为本系统的主要服务对象，在与教师用户的相互配 合下能够更好地使用本系统的各类分析补弱功能。学生用户 应当能登录账号并访问功能前台，进行考试测试，练习试题 训练，查看考试分数记录。学生用户在公共留言板内可以和 其他学生用户交流讨论学习心得或反馈系统问题，在个人错 题集管理功能面板内可以进行个人错题信息的管理，并查看 错题相关知识链接推送。若需要修改个人账号登录信息，可 于账号管理页面修改。

2.2  教师

教师用户是本系统主要的数据分析报告使用者，次要的 数据管理者。教师用户应当能登录账号并访问管理后台。进 行考试、题库、学生、错题集的管理，在错题集分析、成绩 分析功能的帮助下，获取学生某课程知识点掌握情况后，可 以根据教学计划需要，在智能组卷功能的帮助下，拟定针对 性训练试卷，帮助学生更好的进行弱项辅助。

2.3  管理员

管理员用户是本系统主要的数据管理者，同时承担一定 程度上的系统数据运行维护的责任。管理员用户除了拥有教  师用户全部的权限以外，还可以对教师，全局数据进行管理。 在需要大批量数据如用户信息，试卷试题导入的时候，管理  员需要严格按照格式使用脚本将数据录入系统，若有学生、  教师用户反馈数据问题，管理员应当利用权限修复坏数据以 延长系统生命周期。

3  系统功能分析与设计

3.1  总体设计模式

系统在总体设计上采用前后端分离模式设计，前后端 分离且使用先进集成式框架进行软件开发已经逐渐成为软件 开发主流，在代码层面上，先进的框架使得项目代码逻辑清 晰可读性高，维护和部署得到简化，能够帮助更好实现高内 聚低耦合的项目架构。前后端分离式的开发使得项目团队得以分工明确，精简沟通成本，提高开发效率。此外，使用者 越多越主流的技术有着更好的生态，这让可以花更少的成本 开发出更优质的功能。下面进行总体设计模式介绍：前端使 用 MVVM 模式设计 [6] ，将视图 UI 与业务逻辑分开，不允许 数据和视图直接通信，所有的通信由连接 View 和 Model 的 ViewModel 中间件完成。后端采用 SpringBoot+MybatisPlus  开发设计模式，分别运用 Controller 层，Service 层，Mapper 层， Model 层实现功能交互，业务逻辑处理，数据持久化操作与 实体表映射，总体设计模式如图 1 所示。

图 1  总体设计模式示意图

3.2   系统功能模块设计

系统分为用户前台和管理后台，共有 11 个大小功能模 块组成，系统总体功能模块结构图如图 2。

图 2  系统总体功能模块结构图

3.3   数据库设计

本系统使用 Mysql 数据库实现数据持久层，使用 Navicat 进行可视化管理，共有 22 张表，各数据库表信息详见表 1。

表 1   数据库表信息

表 1( 续）

3.4   项目界面设计

本项目总体上采用 Element ui 进行前端组件库的搭建， 参考了 vue-admin-template 框架，功能前台采用顶端导航和中 央路由界面的设计方法，管理后台采用顶端导航，左侧功能 菜单，中央路由界面的设计方法，采用了 el-menu 、el-bread- crumb 等element ui 内置标签等实现。同时， 在迭代版本中， 通过 el-row 、el-col 布局和 v-if 搭配使用实现了全系统包括手 机端的多设备显示适配 [7]。

4  系统功能实现

4.1  系统开发环境

系统于本地电脑开发测试，并部署于阿里云服务器上。 详细系统环境见表 2。

表 2   项目环境

系统共有 11 个大小功能模块，系统技术核心主要在于 实现了权限登录与安全验证功能，试卷组成与考试功能，成 绩、错题集自动分析与弱项辅助，错题知识有关链接推送与 系统后台数据管理这五大功能集合，下面将依次介绍。

4.2  权限登录与安全验证功能实现

用户登录时系统将输入的用户名传回后端，利用加盐加 密方法对传回的密码进行验证并生成 token，使用jwt 令牌存 入 token 并调用 SecurityUtils 进行登录验证，验证成功后将 token 返回前端并使用localstorage 进行存储。同时在后端用 @RequiresAuthentication 和 @RequiresPermissions 进行模块调 用的权限验证，验证失败则返回登录界面。存储于 localstor-  age 的 token 权限验证使得用户只能访问权限允许路径，由此， 系统权限安全得以保证 [8]。

此处加盐（salt）加密算法是一种对系统登录口令的加密 方式，它通过将每一个口令同一个名为“salt”的 n（n 根据需要取任意自然数）位随机数相关联，支持口令改变随机数 的实时变动，随机数存储于口令文件里，未加密，让所有人 都可以读取。但加盐加密算法将口令和随机数连接起来进行 加密，并把加密后结果存于口令文件中 [9]。

图 3  权限登录与安全验证功能流程示意图

4.3  试卷组成与考试功能实现

一张呈现在学生用户面前的考试试卷的构成逻辑如下： 在获取到具体试卷 ID 后，依次调用 Service 层findByIdAn-  dType 方法实现各类型题库的搜索，随后将获取到的数值 按 List 存储，题目提取完毕后，将三个 List 数据 put 进一个 map 里并返回给前端，前端通过接口获取到试卷全部信息后， 根据用户与界面的交互显示具体试卷数据，试卷组成界面实 现效果如图 4 所示。

图 4   学生用户考试界面

用户可以自由在选择试卷界面进行要做试卷的搜索与选 择，在用户在选择完毕确认无误后，进入考试模式。系统将创建三个二维数组用来存储用户不同类型试题作答，用户每 次作答状态使用 JavaScript 函数实时获取，左侧题目状态栏 根据数组值变动实时变动以便于用户明晰考试答题状态。

在用户确认结束考试后，前端会将试卷数据中答案与 用户答案做正确判断。正确判断逻辑为：选择题，判断题严 格等于答案为正确，否为错误，填空题根据空格拆分答题输 入字符串，并把各个填空空格内答案与总正确答案做包含关 系判断。若所有填空输入都被包含于总正确答案中， 则正确， 否为错误。系统用一个 sum 变量存储考试总分，一题在被 判断正确后，将获取到此题分数加入 sum 中。自动批卷结 束后，显示成绩数据，并将错题数据存入数据库以便后续数 据分析。

4.4  成绩、错题集自动分析与弱项辅助实现

学生用户可以随时查看自己所有的考试成绩记录，并根 据考试日期，考试名称等搜索条件定位到具体考试记录以供 查看。在整个系统的学生用户进行了一定量的考试训练后， 教师和管理员用户可以于后台查看考生成绩变动折线图，学 科考试成绩分布图。相关图表的展示可供教师管理员用户参 考以改变教学计划，调整教学细节。

在错题集分析中，于数据库设计时，每条错题数据记录 除了错题本身的基础信息以外都包含 score 、section 、level 三 个属性，其分别是题目分数、题目所属章节（知识点）、题 目难度三个维度。在采集了一定量的错题数据后，系统可以 根据这三个维度的数据进行加权计算（本系统目前采取的是 直接相乘计算加权值，若用户有特殊需求，可联系管理员进 行参数修正），并对教师给出某科目中学生对具体薄弱知识 点的掌握情况的报告以供教师出卷参考。

饼图，折线图的展示使用一种javascript 实现的可视化库 Echarts[10]  来实现数据可视化，其无需数据格式转换，使用方 便快捷，数据填充后即插即用，具体显示效果图 5 所示。

图 5   错题集分析示意图

在获取了足够量的数据和数据分析报告以后，老师可以 根据实际情况结合本系统智能出卷功能进行反复的针对性练 习训练，直到训练效果满意为止。