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

（嶺南師范學(xué)院計算機(jī)與智能教育學(xué)院，湛江 524048）

0 引言

黨的二十大報告指出，要加快建設(shè)高質(zhì)量教育體系，推動義務(wù)教育優(yōu)質(zhì)均衡發(fā)展，優(yōu)化區(qū)域教育資源配置，促進(jìn)教育公平［1］。2022 年2月，教育部頒布《2022年工作要點(diǎn)》，指出要實(shí)施教育數(shù)字化行動［2］。國家對數(shù)字化轉(zhuǎn)型的高度重視，標(biāo)志著我國教育信息化已經(jīng)進(jìn)入數(shù)字化轉(zhuǎn)型的重要時期。在此背景下，項(xiàng)目開發(fā)了一款義務(wù)教育資源數(shù)字化管理系統(tǒng)，涵蓋了2011 年以來全國各省份宏觀義務(wù)教育資源各類層面的指標(biāo)數(shù)據(jù)，并在線上平臺為用戶提供數(shù)據(jù)可視化服務(wù)?？梢暬瘮?shù)據(jù)大屏面向用戶呈現(xiàn)各省宏觀義務(wù)教育資源的發(fā)展情況，系統(tǒng)管理員可動態(tài)化實(shí)時更新數(shù)據(jù)，為教育評價提供數(shù)字化支撐，促進(jìn)教育數(shù)字化轉(zhuǎn)型。

1 系統(tǒng)需求概要

目前，在宏觀義務(wù)教育評價方面的數(shù)字化轉(zhuǎn)型平臺仍有很大的空白。當(dāng)前研究中，微觀層面的資源管理平臺探索較為豐富，例如教學(xué)情況的可視化平臺［3-4］、數(shù)字資源的整合共享平臺［5］等，但用于宏觀層面的義務(wù)教育評價平臺探索較少。夏道勛等［6］開發(fā)一款義務(wù)教育優(yōu)質(zhì)均衡發(fā)展數(shù)據(jù)分析平臺，可展示義務(wù)教育優(yōu)質(zhì)均衡發(fā)展的進(jìn)程狀態(tài)，是宏觀義務(wù)教育評價平臺的生動例證與參考。

為此，義務(wù)教育資源數(shù)字化管理系統(tǒng)的功能設(shè)計主要面向管理部門與相關(guān)領(lǐng)域研究者用戶，提供線上應(yīng)用服務(wù)，用戶注冊登錄系統(tǒng)后可查看全國宏觀義務(wù)教育信息資源數(shù)據(jù)，以及義務(wù)教育資源數(shù)字化各項(xiàng)指標(biāo)的歷年發(fā)展情況，了解各省份義務(wù)教育資源構(gòu)成，實(shí)現(xiàn)了用戶與系統(tǒng)可視化大屏服務(wù)交互平臺。系統(tǒng)前臺界面通過圖表、分布示意圖等方式展示全國指標(biāo)信息，并根據(jù)數(shù)據(jù)對省份資源數(shù)進(jìn)行智能排序、分類，以便用戶更好地把握數(shù)據(jù)的趨勢和規(guī)律。管理員在系統(tǒng)后臺登入可擁有更多的權(quán)限，對數(shù)據(jù)庫內(nèi)指標(biāo)數(shù)據(jù)進(jìn)行及時的修改與更新，以便對系統(tǒng)進(jìn)行動態(tài)管理與維護(hù)。

2 系統(tǒng)設(shè)計

2.1 系統(tǒng)總體架構(gòu)設(shè)計

系統(tǒng)采用前后端分離技術(shù)，遵從高內(nèi)聚低耦合的設(shè)計原則，系統(tǒng)的架構(gòu)如圖1所示。系統(tǒng)前端使用Vue 框架實(shí)現(xiàn)數(shù)據(jù)展示和圖表展示，以Nginx 服務(wù)器進(jìn)行部署，實(shí)現(xiàn)反向代理，并直接提供CSS，Javascript 等靜態(tài)資源的訪問。數(shù)據(jù)可視化部分使用ECharts框架實(shí)現(xiàn)多樣化的圖表樣式展示。后端使用Springboot框架提供RestFul接口，以SpringMVC 框架實(shí)現(xiàn)控制層，使用MyBatis-Plus 框架實(shí)現(xiàn)持久層對數(shù)據(jù)庫進(jìn)行數(shù)據(jù)的增刪查改，使用Spring 框架實(shí)現(xiàn)業(yè)務(wù)層具體的數(shù)據(jù)處理邏輯。以MySQL 作為數(shù)據(jù)庫與持久層進(jìn)行交互，Vue 前端通過Axios 工具發(fā)送Http請求到后端Springboot 服務(wù)，Springboot 服務(wù)接收到請求后處理請求，并將結(jié)果以JSON 格式返回給Vue 前端，Vue 前端解析JSON 數(shù)據(jù)并動態(tài)更新前端界面。

圖1 系統(tǒng)架構(gòu)

2.2 系統(tǒng)詳細(xì)設(shè)計

2.2.1 功能模塊設(shè)計

根據(jù)系統(tǒng)需求的分析，本系統(tǒng)分為普通用戶與管理員兩個用戶角色，不同用戶具有不同功能模塊的需求。義務(wù)教育資源數(shù)字化管理系統(tǒng)功能框圖如圖2所示。

圖2 系統(tǒng)功能模塊設(shè)計

義務(wù)教育資源數(shù)字化管理系統(tǒng)的用戶端主要有登錄注冊模塊、首頁儀表盤模塊、大屏展示模塊、個人信息模塊等功能模塊，管理員端則主要有資源信息管理模塊、用戶管理模塊、權(quán)限管理模塊等功能模塊。在登錄注冊模塊中，用戶需要提供一些必要的個人基礎(chǔ)信息注冊一個賬號，登錄時用戶可通過多種方式登錄，有利于提高用戶使用舒適度。首頁儀表盤模塊用于在首頁展示網(wǎng)站的流量和訪問情況，同時它在頁面上以排行榜的形式展示教育資源排名，并展示全國義務(wù)教育資源分布的重點(diǎn)情況。大屏展示模塊擁有多種可視化圖表模式，如折線圖、柱狀圖、餅圖、詞云圖等，用戶可以通過多層級聯(lián)查詢分省份、分階段、分類型篩選自己感興趣的數(shù)據(jù)。在個人信息管理模塊中，用戶可設(shè)置和修改個人資料，如姓名、性別、郵箱等個人信息，系統(tǒng)提供用戶個性化體驗(yàn)。在資源信息管理模塊中管理員可以按照省份、階段、類型等進(jìn)行多層級聯(lián)查詢并修改管理，也可選擇需要的基礎(chǔ)信息字段導(dǎo)出為Excel 表格，方便查看。用戶信息管理模塊可以讓管理員管理用戶的賬號和密碼等信息。而在權(quán)限管理模塊，管理員可進(jìn)行權(quán)限管理，使得不同的用戶有不同的使用權(quán)限。

2.2.2 數(shù)據(jù)庫設(shè)計

系統(tǒng)數(shù)據(jù)庫將數(shù)據(jù)按區(qū)域劃分為城區(qū)、鎮(zhèn)區(qū)、鄉(xiāng)村3 個區(qū)域類別，對31 個省份進(jìn)行分類，提供百生均和校均兩種均分方式供用戶篩選義務(wù)教育資源指標(biāo)。其中，表area、表province、表avg 分別記錄區(qū)域、省份、均分方式等三種類型的編號信息；表area_resource、表pro_resource、表avg_resource 分別記錄按區(qū)域分類、按省份分類、按均分方式分類的資源信息；表rescource記錄三類信息的具體資源細(xì)節(jié)；表user 記錄用戶信息；表user_role 記錄用戶角色信息。各表之間的關(guān)系如圖3所示。

圖3 系統(tǒng)數(shù)據(jù)庫ER圖

3 系統(tǒng)實(shí)現(xiàn)

3.1 主要界面展示

義務(wù)教育資源數(shù)字化管理系統(tǒng)頁面精美、數(shù)據(jù)翔實(shí)。圖4為首頁儀表盤，其中包含各種實(shí)時更新的可視化圖表，實(shí)現(xiàn)與數(shù)據(jù)的雙向綁定，全方位地展示各省的義務(wù)教育資源配置情況。

圖4 首頁儀表盤展示

點(diǎn)擊左側(cè)導(dǎo)航欄的Vue3 大屏可以打開圖5的可視化數(shù)字大屏頁面，頁面中部借助分布示意圖宏觀展示了各省份義務(wù)教育水平，頁面左右側(cè)用條形圖、餅狀圖、詞云圖、水波圖等圖表詳細(xì)展示了各省義務(wù)教育資源指標(biāo)的歷年發(fā)展情況等數(shù)據(jù)。點(diǎn)擊底部居中的時間軸可選擇2011 年以來的時間，大屏?xí)鶕?jù)實(shí)際選擇動態(tài)渲染數(shù)據(jù)。

圖5 數(shù)字大屏可視化展示

點(diǎn)擊左側(cè)導(dǎo)航欄的后臺管理，用戶可以打開如圖6所示的數(shù)字化管理界面，管理員可根據(jù)權(quán)威信息對數(shù)據(jù)庫內(nèi)指標(biāo)數(shù)據(jù)進(jìn)行實(shí)時的修改與更新，以便對系統(tǒng)進(jìn)行動態(tài)管理與維護(hù)，保存修改后，可視化數(shù)據(jù)大屏等相關(guān)頁面的展示將隨之動態(tài)更新。

圖6 數(shù)字化管理展示

點(diǎn)擊左側(cè)導(dǎo)航欄的角色管理，用戶可以打開如圖7所示的權(quán)限管理界面，超級管理員可以根據(jù)不同的用戶類型，設(shè)置其有不同的用戶權(quán)限。如圖7所示，超級管理員可以設(shè)置普通用戶具有首頁、Vue3大屏、個人設(shè)置三個權(quán)限，當(dāng)標(biāo)簽為普通用戶的用戶登錄時，它的導(dǎo)航欄僅有上述三個內(nèi)容，從而實(shí)現(xiàn)了管理員的權(quán)限管理。

圖7 權(quán)限管理模塊展示

3.2 基于EChhaarrttss和Springgbboooott框架的數(shù)字大屏可視化展示的算法實(shí)現(xiàn)

3.2.1 多層級聯(lián)查詢的算法實(shí)現(xiàn)

用戶可以根據(jù)Cascader 級聯(lián)選擇器以及年份時間軸兩種方法，使系統(tǒng)個性化展示動態(tài)渲染出用戶想要的信息。使用級聯(lián)選擇器時，用戶可以根據(jù)年份、省份、學(xué)習(xí)階段、均分類型、具體資源多層級聯(lián)進(jìn)行信息篩選。

多層級聯(lián)查詢的具體實(shí)現(xiàn)思路是前端設(shè)置監(jiān)聽器監(jiān)聽Cascader 級聯(lián)選擇器組件中值的變化，一旦值發(fā)生改變，將其作為參數(shù)向后端API發(fā)送數(shù)據(jù)查詢請求，后端控制器將攔截請求并將參數(shù)解析放入Mybatis-plus 框架的MPJQuery-Wrapper條件構(gòu)造器中，從MySQL數(shù)據(jù)庫中查詢到對應(yīng)數(shù)據(jù)后將其放入Result 類中返回給前端頁面。其中采用MPJQueryWrapper 條件構(gòu)造器的原因是它適用于需要多表查詢的復(fù)雜業(yè)務(wù)。

多層級聯(lián)查詢的后端關(guān)鍵代碼如下：

3.2.2 多樣化圖表展示的算法實(shí)現(xiàn)

本系統(tǒng)采用ECharts 框架實(shí)現(xiàn)多樣化圖表展示。ECharts 框架中可以高度個性化制定條形圖、柱狀圖、折線圖、水滴圖、環(huán)狀圖等多樣化的圖表，各類圖表的實(shí)現(xiàn)原理類似，先創(chuàng)建可視化模版，再將要展示的具體圖表類型與數(shù)據(jù)以代碼的形式輸入。以環(huán)形圖為例，ECharts框架需要先調(diào)用getPieData（）函數(shù)使用select-TypeData 接口獲取數(shù)據(jù)，而后使用initEcharts（）函數(shù)初始化ECharts 實(shí)例。在initEcharts（）函數(shù)內(nèi)部，循環(huán)遍歷數(shù)據(jù)數(shù)組，并將數(shù)據(jù)的name和value 分別作為ECharts 實(shí)例的data.name 和data.value 屬性值，從而生成餅圖。生成其他類型的圖表與上文的思路類似。

使用ECharts 庫設(shè)置餅圖圖表的關(guān)鍵代碼如下：

3.2.3 大屏動態(tài)實(shí)時更新的算法實(shí)現(xiàn)

前端Vue 框架提供頁面動態(tài)實(shí)時更新的服務(wù)。具體來說，通過computed 函數(shù)創(chuàng)建了abcode、year、types、parentInfo 和sum 這些計算屬性，它們都依賴于store 中的state 對象的一些屬性。當(dāng)store中的state對象的屬性發(fā)生變化時，這些計算屬性會自動重新計算，同時使用了Vue Router 和Vuex 里面的commit 函數(shù)，可以在組件中進(jìn)行路由跳轉(zhuǎn)和修改Vuex 中的state 狀態(tài)。通過調(diào)用store.commit 函數(shù)，組件可以觸發(fā)Vuex 中的mutation 來更新state 中的數(shù)據(jù)。因?yàn)閂uex 中的state 是響應(yīng)式的，當(dāng)其發(fā)生變化時，相關(guān)的組件也會自動更新視圖，據(jù)此，管理員在更新后臺數(shù)據(jù)的同時，前臺數(shù)字化大屏?xí)討B(tài)實(shí)時更新。

大屏動態(tài)實(shí)時更新的關(guān)鍵代碼如下：

4 結(jié)語

基于大屏數(shù)據(jù)可視化等技術(shù)，打造了一個界面精美、數(shù)據(jù)詳實(shí)、方便快捷的義務(wù)教育資源數(shù)字化管理系統(tǒng)，極大程度滿足數(shù)據(jù)巡視、指標(biāo)監(jiān)控、信息分析等多種業(yè)務(wù)的需求，為推進(jìn)新型教育基礎(chǔ)設(shè)施建設(shè)提供了高質(zhì)量的教育支撐平臺，推動了教育數(shù)字轉(zhuǎn)型、智能升級和融合創(chuàng)新。