义务教育资源数字化管理系统的设计与实现

区家玮，冯国韬，吴恺轩，古润豪，李思彤，张立敏

（岭南师范学院计算机与智能教育学院，湛江 524048）

0 引言

党的二十大报告指出，要加快建设高质量教育体系，推动义务教育优质均衡发展，优化区域教育资源配置，促进教育公平［1］。2022 年2月，教育部颁布《2022年工作要点》，指出要实施教育数字化行动［2］。国家对数字化转型的高度重视，标志着我国教育信息化已经进入数字化转型的重要时期。在此背景下，项目开发了一款义务教育资源数字化管理系统，涵盖了2011 年以来全国各省份宏观义务教育资源各类层面的指标数据，并在线上平台为用户提供数据可视化服务。可视化数据大屏面向用户呈现各省宏观义务教育资源的发展情况，系统管理员可动态化实时更新数据，为教育评价提供数字化支撑，促进教育数字化转型。

1 系统需求概要

目前，在宏观义务教育评价方面的数字化转型平台仍有很大的空白。当前研究中，微观层面的资源管理平台探索较为丰富，例如教学情况的可视化平台［3-4］、数字资源的整合共享平台［5］等，但用于宏观层面的义务教育评价平台探索较少。夏道勋等［6］开发一款义务教育优质均衡发展数据分析平台，可展示义务教育优质均衡发展的进程状态，是宏观义务教育评价平台的生动例证与参考。

为此，义务教育资源数字化管理系统的功能设计主要面向管理部门与相关领域研究者用户，提供线上应用服务，用户注册登录系统后可查看全国宏观义务教育信息资源数据，以及义务教育资源数字化各项指标的历年发展情况，了解各省份义务教育资源构成，实现了用户与系统可视化大屏服务交互平台。系统前台界面通过图表、分布示意图等方式展示全国指标信息，并根据数据对省份资源数进行智能排序、分类，以便用户更好地把握数据的趋势和规律。管理员在系统后台登入可拥有更多的权限，对数据库内指标数据进行及时的修改与更新，以便对系统进行动态管理与维护。

2 系统设计

2.1 系统总体架构设计

系统采用前后端分离技术，遵从高内聚低耦合的设计原则，系统的架构如图1所示。系统前端使用Vue 框架实现数据展示和图表展示，以Nginx 服务器进行部署，实现反向代理，并直接提供CSS，Javascript 等静态资源的访问。数据可视化部分使用ECharts框架实现多样化的图表样式展示。后端使用Springboot框架提供RestFul接口，以SpringMVC 框架实现控制层，使用MyBatis-Plus 框架实现持久层对数据库进行数据的增删查改，使用Spring 框架实现业务层具体的数据处理逻辑。以MySQL 作为数据库与持久层进行交互，Vue 前端通过Axios 工具发送Http请求到后端Springboot 服务，Springboot 服务接收到请求后处理请求，并将结果以JSON 格式返回给Vue 前端，Vue 前端解析JSON 数据并动态更新前端界面。

图1 系统架构

2.2 系统详细设计

2.2.1 功能模块设计

根据系统需求的分析，本系统分为普通用户与管理员两个用户角色，不同用户具有不同功能模块的需求。义务教育资源数字化管理系统功能框图如图2所示。

图2 系统功能模块设计

义务教育资源数字化管理系统的用户端主要有登录注册模块、首页仪表盘模块、大屏展示模块、个人信息模块等功能模块，管理员端则主要有资源信息管理模块、用户管理模块、权限管理模块等功能模块。在登录注册模块中，用户需要提供一些必要的个人基础信息注册一个账号，登录时用户可通过多种方式登录，有利于提高用户使用舒适度。首页仪表盘模块用于在首页展示网站的流量和访问情况，同时它在页面上以排行榜的形式展示教育资源排名，并展示全国义务教育资源分布的重点情况。大屏展示模块拥有多种可视化图表模式，如折线图、柱状图、饼图、词云图等，用户可以通过多层级联查询分省份、分阶段、分类型筛选自己感兴趣的数据。在个人信息管理模块中，用户可设置和修改个人资料，如姓名、性别、邮箱等个人信息，系统提供用户个性化体验。在资源信息管理模块中管理员可以按照省份、阶段、类型等进行多层级联查询并修改管理，也可选择需要的基础信息字段导出为Excel 表格，方便查看。用户信息管理模块可以让管理员管理用户的账号和密码等信息。而在权限管理模块，管理员可进行权限管理，使得不同的用户有不同的使用权限。

2.2.2 数据库设计

系统数据库将数据按区域划分为城区、镇区、乡村3 个区域类别，对31 个省份进行分类，提供百生均和校均两种均分方式供用户筛选义务教育资源指标。其中，表area、表province、表avg 分别记录区域、省份、均分方式等三种类型的编号信息；表area_resource、表pro_resource、表avg_resource 分别记录按区域分类、按省份分类、按均分方式分类的资源信息；表rescource记录三类信息的具体资源细节；表user 记录用户信息；表user_role 记录用户角色信息。各表之间的关系如图3所示。

图3 系统数据库ER图

3 系统实现

3.1 主要界面展示

义务教育资源数字化管理系统页面精美、数据翔实。图4为首页仪表盘，其中包含各种实时更新的可视化图表，实现与数据的双向绑定，全方位地展示各省的义务教育资源配置情况。

图4 首页仪表盘展示

点击左侧导航栏的Vue3 大屏可以打开图5的可视化数字大屏页面，页面中部借助分布示意图宏观展示了各省份义务教育水平，页面左右侧用条形图、饼状图、词云图、水波图等图表详细展示了各省义务教育资源指标的历年发展情况等数据。点击底部居中的时间轴可选择2011 年以来的时间，大屏会根据实际选择动态渲染数据。

图5 数字大屏可视化展示

点击左侧导航栏的后台管理，用户可以打开如图6所示的数字化管理界面，管理员可根据权威信息对数据库内指标数据进行实时的修改与更新，以便对系统进行动态管理与维护，保存修改后，可视化数据大屏等相关页面的展示将随之动态更新。

图6 数字化管理展示

点击左侧导航栏的角色管理，用户可以打开如图7所示的权限管理界面，超级管理员可以根据不同的用户类型，设置其有不同的用户权限。如图7所示，超级管理员可以设置普通用户具有首页、Vue3大屏、个人设置三个权限，当标签为普通用户的用户登录时，它的导航栏仅有上述三个内容，从而实现了管理员的权限管理。

图7 权限管理模块展示

3.2 基于EChhaarrttss和Springgbboooott框架的数字大屏可视化展示的算法实现

3.2.1 多层级联查询的算法实现

用户可以根据Cascader 级联选择器以及年份时间轴两种方法，使系统个性化展示动态渲染出用户想要的信息。使用级联选择器时，用户可以根据年份、省份、学习阶段、均分类型、具体资源多层级联进行信息筛选。

多层级联查询的具体实现思路是前端设置监听器监听Cascader 级联选择器组件中值的变化，一旦值发生改变，将其作为参数向后端API发送数据查询请求，后端控制器将拦截请求并将参数解析放入Mybatis-plus 框架的MPJQuery-Wrapper条件构造器中，从MySQL数据库中查询到对应数据后将其放入Result 类中返回给前端页面。其中采用MPJQueryWrapper 条件构造器的原因是它适用于需要多表查询的复杂业务。

多层级联查询的后端关键代码如下：

3.2.2 多样化图表展示的算法实现

本系统采用ECharts 框架实现多样化图表展示。ECharts 框架中可以高度个性化制定条形图、柱状图、折线图、水滴图、环状图等多样化的图表，各类图表的实现原理类似，先创建可视化模版，再将要展示的具体图表类型与数据以代码的形式输入。以环形图为例，ECharts框架需要先调用getPieData（）函数使用select-TypeData 接口获取数据，而后使用initEcharts（）函数初始化ECharts 实例。在initEcharts（）函数内部，循环遍历数据数组，并将数据的name和value 分别作为ECharts 实例的data.name 和data.value 属性值，从而生成饼图。生成其他类型的图表与上文的思路类似。

使用ECharts 库设置饼图图表的关键代码如下：

3.2.3 大屏动态实时更新的算法实现

前端Vue 框架提供页面动态实时更新的服务。具体来说，通过computed 函数创建了abcode、year、types、parentInfo 和sum 这些计算属性，它们都依赖于store 中的state 对象的一些属性。当store中的state对象的属性发生变化时，这些计算属性会自动重新计算，同时使用了Vue Router 和Vuex 里面的commit 函数，可以在组件中进行路由跳转和修改Vuex 中的state 状态。通过调用store.commit 函数，组件可以触发Vuex 中的mutation 来更新state 中的数据。因为Vuex 中的state 是响应式的，当其发生变化时，相关的组件也会自动更新视图，据此，管理员在更新后台数据的同时，前台数字化大屏会动态实时更新。

大屏动态实时更新的关键代码如下：

4 结语

基于大屏数据可视化等技术，打造了一个界面精美、数据详实、方便快捷的义务教育资源数字化管理系统，极大程度满足数据巡视、指标监控、信息分析等多种业务的需求，为推进新型教育基础设施建设提供了高质量的教育支撑平台，推动了教育数字转型、智能升级和融合创新。