義務教育資源數字化管理系統的設計與實現

區家瑋，馮國韜，吳愷軒，古潤豪，李思彤，張立敏

（嶺南師范學院計算機與智能教育學院，湛江 524048）

0 引言

黨的二十大報告指出，要加快建設高質量教育體系，推動義務教育優質均衡發展，優化區域教育資源配置，促進教育公平［1］。2022 年2月，教育部頒布《2022年工作要點》，指出要實施教育數字化行動［2］。國家對數字化轉型的高度重視，標志著我國教育信息化已經進入數字化轉型的重要時期。在此背景下，項目開發了一款義務教育資源數字化管理系統，涵蓋了2011 年以來全國各省份宏觀義務教育資源各類層面的指標數據，并在線上平臺為用戶提供數據可視化服務?？梢暬瘮祿笃撩嫦蛴脩舫尸F各省宏觀義務教育資源的發展情況，系統管理員可動態化實時更新數據，為教育評價提供數字化支撐，促進教育數字化轉型。

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 結語

基于大屏數據可視化等技術，打造了一個界面精美、數據詳實、方便快捷的義務教育資源數字化管理系統，極大程度滿足數據巡視、指標監控、信息分析等多種業務的需求，為推進新型教育基礎設施建設提供了高質量的教育支撐平臺，推動了教育數字轉型、智能升級和融合創新。