基于Echarts的學分預警系統研究與實現

摘 要：近年來高校學生的數量增多，隨之帶來的對學生信息管理困難的問題亟待解決。現有的人工管理手段已不足以應對如此龐大的信息量，在人工處理學生學分、成績等信息的過程中難免會產生錯漏現象?；诖藛栴}，本文通過對高校學生學習信息的分析，考察了學生管理人員現有管理需求，對學分預警系統進行了研究。在Spring Boot技術的基礎上搭建學分預警系統，前端采用Vue技術進行開發，根據設定的學分預警閾值顯示Echarts的數據分析圖形。旨在直觀快速地分析每個學生的學業信息，減少管理人員工作量的同時，便于學生對學業的自我管理，順利完成學業。

關鍵詞：學分預警；Echarts；SpringBoot；Vue

一、引言

ECharts是一款采用JavaScript的數據分析可視化圖示庫，它實現了一種直接清晰、生動有趣、可互動、可人性化訂制的數據分析可視化圖示，它最初由百度集團研發，并于2018年初捐獻給Apache基金會，作為ASF孵化級建設項目，為用戶帶來了一種更加便捷、高效的數據分析可視化服務。ECharts為我們提供了一系列簡單、生動有趣、可互動的數字可視化圖形，它們能夠滿足用戶的多樣化需要。包含折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達圖、和弦圖、力導向布局圖、數據庫、儀表盤、漏斗圖、事件河流圖等十二類圖表類形，而且增加了七個可交互模塊，如目標、圖例、值域、數字范圍、時間軸和工具箱，實現支持多圖形和軟件的互動和混搭表現。

本文是基于ECharts的學分預警系統，依托于ECharts的特點和多樣性，基于對學習過程形成性評價的學業預警系統進行深入的研究和實現。

二、研究背景分析

學分管理是各個大學的主要日常管理工作之一。隨著我國高等教育的快速發展，運用信息化手段管理已成為高校教育改革發展的必要趨勢。由于高校學生數量的逐年增多，高校學生信息量也變得越來越巨大，學分制為學生提供了一個多元化、個性化的求學環境，但同時也帶來了一些問題：高校學生們在日常學習生活中缺乏理性思考，極少思考自身的未來發展目標，以至于產生考試并不重要，不合格就補考和重修的錯誤心理。而管理人員在對掛科太多而面臨無法正常畢業問題的學生進行學業預警時，可能會經常出現漏發或錯發的情況，因此，應該采取有效措施，以及時確保學生的學習品質，提高學習效率，幫助學生的成長。為了降低錯誤的風險，我們需要一個信息化管理系統來對學生進行管理。

在學分預警系統中，首先需要設置具體的預警規則，根據預警級別，將相關的預警信息反饋給學生班主任，輔導員，學生管理人員，以便及時干預[1]。在預警結束后，需收集學生班主任，輔導員等管理人員的反饋，對學生預警系統的規則漏洞進行改正。通過將預警內容可視化，給出直接、生動有趣、可互動的表格，讓學生更加重視這些信息，減少學校輔導員和班主任的工作量。

三、系統框架選擇

（一）Spring框架

Spring是一款開源的 Java EE輕量級框架，它在Java世界中廣受歡迎，因為它具有控制反轉、面向切面和依賴注入等功用，可以有效減少代碼相互之間的耦合性。SpringBoot是一款基于Spring框架的開發框架，它不僅傳承了Spring架構的各種功能特點，而且大大簡化了配置過程，以約定優先的原則，使得開發人員可以輕松地開發出基于Spring架構的應用，并且已經成為業界的主流開發框架[2]。

（二）Vue框架

Vue是一種適合于搭建用戶的漸進式框架，它不僅注重視圖層，而且支持雙向數據綁定，并且使用簡單的API實現了有效的數據信息捆綁，同時還推出了組件管理系統[3]，使用起來更加得心應手。

（三）MyBatis框架

MyBatis是一款強大的持久層框架，它能夠支撐通用SQL查找、儲存流程和高級映射，它使用簡單方便，與Spring框架完全融合，支援創建動態SQL語言，并且能夠將對象與數據庫的ORM字段關聯映射，成為業界最受歡迎的持久層框架之一。

四、系統總體設計

系統設計旨在通過管理員登錄來實現對整個系統的有效控制和管理，以確保其正常運行。采取前后端分離式設計，前端進行頁面互動和信息顯示，而后端則進行管理操作邏輯并提供相關數據。這種設計模型不但提高了設計質量，還大大降低了維修生產成本。

系統采用MVVM架構設計，前端采取B/S結構，后端采取最新的SpringBoot框架，MyBatis訪問MySQL數據庫，Redis作為數據緩存，以達到更加高效的數據處理。利用Vue3作為前端框架，Vue-Router用于頁面路徑管理工作，VueX+SessionStorage用于存儲用戶登錄狀態，使用Axios請求和響應技術與后端監控層完成數據交互?；赗ESTful架構，通過POST、GET、PUT、DELETE等要求完成對服務器端資源的有效管理工作。通過Ant Design Vue和ECharts科技，前端UI界面可以提供更加精致的用戶體驗，更加清晰地展示數據分析，并且能夠更有效地實現頁面交互和邏輯分析。

系統管理可確保系統的正常運行，分為用戶管理，權限管理，安全管理三部分，多方面保證用戶權限和系統安全性。

（1）用戶管理：系統由三個不同的權限組成：學生、教務處管理人員和系統管理人員。

（2）權限管理：根據登錄人身份的不同，設置不同的使用權限和功能。

（3）安全管理：可以對登錄系統人員的個人信息以及密碼進行管理，也可以對系統的數據庫進行備份處理。

五、系統技術實現

（一）數據庫設計

在對數據庫設計時，應當遵循職責分離原則，即確保系統之間的獨立性，避免任何形式的干預，以確保數據表和系統之間的關聯性[4]。

在命名數據庫時，應遵守一定的規范，避免混淆。出于確保信息的統一性，字段名應盡量與表名相似。

成績管理模塊旨在管理學生在校期間的學習成績，包括錄入平時成績、緩考成績以及提供成績顯示。它為學生提供了一個全面的成績管理系統，以便學生能夠更好地完成學業。

（1）普通成績的錄入：任課教師通過對成績的錄入和學生信息的管理，可以管理學生的一般考試成績。

（2）緩考成績錄入：每個學期中，會有個別同學無法在考試時間參加考試，此功能錄入緩考成績。

（3）成績提示：對學生成績優秀和不合格的學生，給予提示或預警，分別用不同顏色表示[5]。

（二）后端功能設計

數據庫設計完成后，在項目中集成MyBatis實現數據庫持久層操作。利用MyBatis Generator插件自動生成持久層代碼，簡化開發過程，提高代碼編寫效率。使用Spring AOP面向切面編程完成請求參數、返回結果和接口耗時的日志信息顯示，在日志中增加日志跟蹤號，以方便生產運維。在后端數據訪問接口中使用PageHelper插件實現分頁技術。使用雪花算法實現實體類ID自增操作，使用Validation完成參數的校驗。在前后端訪問時可能會存在跨域問題，通過在后端配置跨域請求允許前端訪問后端接口。

系統是基于前后端分離的架構進行開發，后端向前端返回通用接口數據CommonResp，" （下轉第126頁）

（上接第124頁）后臺接口封裝請求參數和響應參數，制作CopyUtil工具類封裝BeanUtils，快速完成數據庫查詢實體對象和返回對象之間的數據拷貝。

（三）前端功能設計

在前端首頁功能左側，學生可以填寫用戶名和密碼，登錄網頁，查看個人學業情況，并使用Echarts圖表可視化展示該生的個人成績，預警信息，預約記錄等。如圖1所示。

前端訪問后端接口數據時集成了HTTP庫Axios，完成前后端數據的交互，VueCLI多環境的配置以實現開發和生產環境的無縫切換，通過設置Axios的默認baseURL可以設置統一的接口請求域前綴。

登錄教師管理員頁面，管理員可以根據需要創建和更新學生課程成績，并且可以對個人中心、學生管理、教師管理、學院信息、班級信息、學科信息、成績信息、預警信息、補考預約、掛科統計以及公告信息等進行有效管理，從而更好地滿足學生的需求[6]。

在學期末，輔導員可查看到本年級課程的掛科占比分析表，直觀的了解到學生所學情況。如圖2所示。對一些掛科兩門及以上的學生，輔導員通過彈框的形式接收到學生預警信息，提醒輔導員要多關注該生，并且輔導員可具體查看該生每一門成績對該生做出具體分析，將自己的分析情況通過預警消息發送給學生，學生可通過郵件的方式接收到本人預警信息，也可登錄到本系統中具體查看預警信息。如圖3所示。學生可根據預警消息內容和自身情況相結合，制定好自己的相關規劃，更順利的完成自己的學業。

六、結語

本文旨在探討基于ECharts的學分預警系統的設計，首先對其背景和目的進行了深入的探討，接著結合文獻資料，詳細分析了學生成績分析與預警系統的需求，并對國內外研究現狀進行了全面的比較，以期更好地理解學分預警系統的基礎知識。通過使用ECharts控件，我們研發了基于B/S構架，將學生學習成果以表格的方式展示出來，實現數據分析可視化的系統設計，更方便用戶進行查看分析。

參考文獻：

[1]萬芳，江維，秦艷珊，周鵬.高校學生預警系統的研究和實現[J].計算機光盤軟件與應用，2011，（13）209

[2]王偉，常慶麗，吳朝霞.基于Springboot+Vue的精準幫扶系統研究與實現[J].河南科技，2021，40（27）：12-14.

[3]劉博文.深入淺出Vue.js[M].北京：人民郵電出版社，2019.

[4]王珊，薩師煊.數據庫系統概論（第5版）[M].北京：高等教育出版社，2018：205-240

[5]張海軍，陳映輝.高校學生管理預警系統的研究與設計.電腦知識與技術，2010，（6）：6765-6766

[6] 陳文，錢萌.高校學位預警系統的設計與實現.安慶師范學院學報（自然科學版），2010，（3）：57-60