基于Echarts的學(xué)分預(yù)警系統(tǒng)研究與實(shí)現(xiàn)

摘 要：近年來高校學(xué)生的數(shù)量增多，隨之帶來的對學(xué)生信息管理困難的問題亟待解決。現(xiàn)有的人工管理手段已不足以應(yīng)對如此龐大的信息量，在人工處理學(xué)生學(xué)分、成績等信息的過程中難免會(huì)產(chǎn)生錯(cuò)漏現(xiàn)象。基于此問題，本文通過對高校學(xué)生學(xué)習(xí)信息的分析，考察了學(xué)生管理人員現(xiàn)有管理需求，對學(xué)分預(yù)警系統(tǒng)進(jìn)行了研究。在Spring Boot技術(shù)的基礎(chǔ)上搭建學(xué)分預(yù)警系統(tǒng)，前端采用Vue技術(shù)進(jìn)行開發(fā)，根據(jù)設(shè)定的學(xué)分預(yù)警閾值顯示Echarts的數(shù)據(jù)分析圖形。旨在直觀快速地分析每個(gè)學(xué)生的學(xué)業(yè)信息，減少管理人員工作量的同時(shí)，便于學(xué)生對學(xué)業(yè)的自我管理，順利完成學(xué)業(yè)。

關(guān)鍵詞：學(xué)分預(yù)警；Echarts；SpringBoot；Vue

一、引言

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

本文是基于ECharts的學(xué)分預(yù)警系統(tǒng)，依托于ECharts的特點(diǎn)和多樣性，基于對學(xué)習(xí)過程形成性評價(jià)的學(xué)業(yè)預(yù)警系統(tǒng)進(jìn)行深入的研究和實(shí)現(xiàn)。

二、研究背景分析

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

在學(xué)分預(yù)警系統(tǒng)中，首先需要設(shè)置具體的預(yù)警規(guī)則，根據(jù)預(yù)警級別，將相關(guān)的預(yù)警信息反饋給學(xué)生班主任，輔導(dǎo)員，學(xué)生管理人員，以便及時(shí)干預(yù)[1]。在預(yù)警結(jié)束后，需收集學(xué)生班主任，輔導(dǎo)員等管理人員的反饋，對學(xué)生預(yù)警系統(tǒng)的規(guī)則漏洞進(jìn)行改正。通過將預(yù)警內(nèi)容可視化，給出直接、生動(dòng)有趣、可互動(dòng)的表格，讓學(xué)生更加重視這些信息，減少學(xué)校輔導(dǎo)員和班主任的工作量。

三、系統(tǒng)框架選擇

（一）Spring框架

Spring是一款開源的 Java EE輕量級框架，它在Java世界中廣受歡迎，因?yàn)樗哂锌刂品崔D(zhuǎn)、面向切面和依賴注入等功用，可以有效減少代碼相互之間的耦合性。SpringBoot是一款基于Spring框架的開發(fā)框架，它不僅傳承了Spring架構(gòu)的各種功能特點(diǎn)，而且大大簡化了配置過程，以約定優(yōu)先的原則，使得開發(fā)人員可以輕松地開發(fā)出基于Spring架構(gòu)的應(yīng)用，并且已經(jīng)成為業(yè)界的主流開發(fā)框架[2]。

（二）Vue框架

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

（三）MyBatis框架

MyBatis是一款強(qiáng)大的持久層框架，它能夠支撐通用SQL查找、儲(chǔ)存流程和高級映射，它使用簡單方便，與Spring框架完全融合，支援創(chuàng)建動(dòng)態(tài)SQL語言，并且能夠?qū)ο笈c數(shù)據(jù)庫的ORM字段關(guān)聯(lián)映射，成為業(yè)界最受歡迎的持久層框架之一。

四、系統(tǒng)總體設(shè)計(jì)

系統(tǒng)設(shè)計(jì)旨在通過管理員登錄來實(shí)現(xiàn)對整個(gè)系統(tǒng)的有效控制和管理，以確保其正常運(yùn)行。采取前后端分離式設(shè)計(jì)，前端進(jìn)行頁面互動(dòng)和信息顯示，而后端則進(jìn)行管理操作邏輯并提供相關(guān)數(shù)據(jù)。這種設(shè)計(jì)模型不但提高了設(shè)計(jì)質(zhì)量，還大大降低了維修生產(chǎn)成本。

系統(tǒng)采用MVVM架構(gòu)設(shè)計(jì)，前端采取B/S結(jié)構(gòu)，后端采取最新的SpringBoot框架，MyBatis訪問MySQL數(shù)據(jù)庫，Redis作為數(shù)據(jù)緩存，以達(dá)到更加高效的數(shù)據(jù)處理。利用Vue3作為前端框架，Vue-Router用于頁面路徑管理工作，VueX+SessionStorage用于存儲(chǔ)用戶登錄狀態(tài)，使用Axios請求和響應(yīng)技術(shù)與后端監(jiān)控層完成數(shù)據(jù)交互。基于RESTful架構(gòu)，通過POST、GET、PUT、DELETE等要求完成對服務(wù)器端資源的有效管理工作。通過Ant Design Vue和ECharts科技，前端UI界面可以提供更加精致的用戶體驗(yàn)，更加清晰地展示數(shù)據(jù)分析，并且能夠更有效地實(shí)現(xiàn)頁面交互和邏輯分析。

系統(tǒng)管理可確保系統(tǒng)的正常運(yùn)行，分為用戶管理，權(quán)限管理，安全管理三部分，多方面保證用戶權(quán)限和系統(tǒng)安全性。

（1）用戶管理：系統(tǒng)由三個(gè)不同的權(quán)限組成：學(xué)生、教務(wù)處管理人員和系統(tǒng)管理人員。

（2）權(quán)限管理：根據(jù)登錄人身份的不同，設(shè)置不同的使用權(quán)限和功能。

（3）安全管理：可以對登錄系統(tǒng)人員的個(gè)人信息以及密碼進(jìn)行管理，也可以對系統(tǒng)的數(shù)據(jù)庫進(jìn)行備份處理。

五、系統(tǒng)技術(shù)實(shí)現(xiàn)

（一）數(shù)據(jù)庫設(shè)計(jì)

在對數(shù)據(jù)庫設(shè)計(jì)時(shí)，應(yīng)當(dāng)遵循職責(zé)分離原則，即確保系統(tǒng)之間的獨(dú)立性，避免任何形式的干預(yù)，以確保數(shù)據(jù)表和系統(tǒng)之間的關(guān)聯(lián)性[4]。

在命名數(shù)據(jù)庫時(shí)，應(yīng)遵守一定的規(guī)范，避免混淆。出于確保信息的統(tǒng)一性，字段名應(yīng)盡量與表名相似。

成績管理模塊旨在管理學(xué)生在校期間的學(xué)習(xí)成績，包括錄入平時(shí)成績、緩考成績以及提供成績顯示。它為學(xué)生提供了一個(gè)全面的成績管理系統(tǒng)，以便學(xué)生能夠更好地完成學(xué)業(yè)。

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

（2）緩考成績錄入：每個(gè)學(xué)期中，會(huì)有個(gè)別同學(xué)無法在考試時(shí)間參加考試，此功能錄入緩考成績。

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

（二）后端功能設(shè)計(jì)

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

系統(tǒng)是基于前后端分離的架構(gòu)進(jìn)行開發(fā)，后端向前端返回通用接口數(shù)據(jù)CommonResp，" （下轉(zhuǎn)第126頁）

（上接第124頁）后臺(tái)接口封裝請求參數(shù)和響應(yīng)參數(shù)，制作CopyUtil工具類封裝BeanUtils，快速完成數(shù)據(jù)庫查詢實(shí)體對象和返回對象之間的數(shù)據(jù)拷貝。

（三）前端功能設(shè)計(jì)

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

前端訪問后端接口數(shù)據(jù)時(shí)集成了HTTP庫Axios，完成前后端數(shù)據(jù)的交互，VueCLI多環(huán)境的配置以實(shí)現(xiàn)開發(fā)和生產(chǎn)環(huán)境的無縫切換，通過設(shè)置Axios的默認(rèn)baseURL可以設(shè)置統(tǒng)一的接口請求域前綴。

登錄教師管理員頁面，管理員可以根據(jù)需要?jiǎng)?chuàng)建和更新學(xué)生課程成績，并且可以對個(gè)人中心、學(xué)生管理、教師管理、學(xué)院信息、班級信息、學(xué)科信息、成績信息、預(yù)警信息、補(bǔ)考預(yù)約、掛科統(tǒng)計(jì)以及公告信息等進(jìn)行有效管理，從而更好地滿足學(xué)生的需求[6]。

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

六、結(jié)語

本文旨在探討基于ECharts的學(xué)分預(yù)警系統(tǒng)的設(shè)計(jì)，首先對其背景和目的進(jìn)行了深入的探討，接著結(jié)合文獻(xiàn)資料，詳細(xì)分析了學(xué)生成績分析與預(yù)警系統(tǒng)的需求，并對國內(nèi)外研究現(xiàn)狀進(jìn)行了全面的比較，以期更好地理解學(xué)分預(yù)警系統(tǒng)的基礎(chǔ)知識(shí)。通過使用ECharts控件，我們研發(fā)了基于B/S構(gòu)架，將學(xué)生學(xué)習(xí)成果以表格的方式展示出來，實(shí)現(xiàn)數(shù)據(jù)分析可視化的系統(tǒng)設(shè)計(jì)，更方便用戶進(jìn)行查看分析。

參考文獻(xiàn)：

[1]萬芳，江維，秦艷珊，周鵬.高校學(xué)生預(yù)警系統(tǒng)的研究和實(shí)現(xiàn)[J].計(jì)算機(jī)光盤軟件與應(yīng)用，2011，（13）209

[2]王偉，常慶麗，吳朝霞.基于Springboot+Vue的精準(zhǔn)幫扶系統(tǒng)研究與實(shí)現(xiàn)[J].河南科技，2021，40（27）：12-14.

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

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

[5]張海軍，陳映輝.高校學(xué)生管理預(yù)警系統(tǒng)的研究與設(shè)計(jì).電腦知識(shí)與技術(shù)，2010，（6）：6765-6766

[6] 陳文，錢萌.高校學(xué)位預(yù)警系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn).安慶師范學(xué)院學(xué)報(bào)（自然科學(xué)版），2010，（3）：57-60