基于Spring Boot+Vue的學(xué)生評獎評優(yōu)系統(tǒng)的設(shè)計與實現(xiàn)

王 瑾 呂太之

（江蘇海事職業(yè)技術(shù)學(xué)院信息工程學(xué)院，江蘇 南京 211170）

1 引言

評獎評優(yōu)是我國普通高等職業(yè)技術(shù)學(xué)校根據(jù)黨和國家的教育方針，激勵學(xué)生勤奮學(xué)習(xí)、潛心科研、勇于創(chuàng)新、積極進取的一項重要措施[1]。它不僅是學(xué)校常規(guī)工作之一，也是非常關(guān)鍵的一個環(huán)節(jié)，是加強校園文明建設(shè)的重要手段。如今，在信息化迅速普及的校園中，江蘇海事職業(yè)技術(shù)學(xué)院這項工作仍然依靠輔導(dǎo)員采用手工作業(yè)方式，根據(jù)學(xué)生手冊和學(xué)生成績綜合評定標(biāo)準(zhǔn)進行一一比對，增加了教師的工作負擔(dān)，降低了工作效率與準(zhǔn)確率。

為了提高學(xué)校管理水平，很多高校都開始智慧化校園的建設(shè)，學(xué)生信息管理是其中一個重要的組成。作為學(xué)生評價的重要環(huán)節(jié)，高校也開始采用信息化的手段來管理學(xué)生評優(yōu)評獎。浙江工商職業(yè)技術(shù)學(xué)院學(xué)生評獎評優(yōu)管理系統(tǒng)采用B/S軟件體系結(jié)構(gòu)，依托Windows XP操作系統(tǒng)，使用Java語言，基于J2EE架構(gòu)技術(shù)，以MySQL5.0為數(shù)據(jù)庫實現(xiàn)Web應(yīng)用系統(tǒng)[2]。哈爾濱工業(yè)大學(xué)采用Java語言，基于J2EE架構(gòu)技術(shù)，使用JPA2.0標(biāo)準(zhǔn)開發(fā)的教育評優(yōu)系統(tǒng)，運用于高校教育評優(yōu)中[3]。魯東大學(xué)的獎優(yōu)評定管理信息系統(tǒng)，采用Java語言，以J2EE作為開發(fā)環(huán)境，利用Spring和Hibernate技術(shù)，以MySQL作為后臺數(shù)據(jù)庫，開發(fā)出適合學(xué)校學(xué)生管理工作的Web管理系統(tǒng)[4]。

為了提高江蘇海事職業(yè)技術(shù)學(xué)院學(xué)生評優(yōu)評價的效率和可靠性，本著數(shù)據(jù)準(zhǔn)確、評價客觀的基本原則，本文設(shè)計并實現(xiàn)了學(xué)生評獎評優(yōu)系統(tǒng)。基于存儲的數(shù)據(jù)量、開發(fā)成本以及技術(shù)成熟度等綜合因素，系統(tǒng)采用MySQL數(shù)據(jù)庫存儲學(xué)生評獎評優(yōu)的數(shù)據(jù)。隨著Web應(yīng)用開發(fā)技術(shù)的發(fā)展，前后端分離技術(shù)已經(jīng)成為Web應(yīng)用開發(fā)的事實標(biāo)準(zhǔn)。系統(tǒng)基于Java語言，采用Spring Boot后端框架和Vue前端框架實現(xiàn)前后端分離。為了提高開發(fā)效率，使用IntelliJIDEA作為IDE（集成開發(fā)環(huán)境）進行后端代碼的編寫工作，使用WebStorm進行前端代碼的編寫。系統(tǒng)運行驗證了其能滿足學(xué)校學(xué)工部門管理學(xué)生評優(yōu)評獎的工作，提高了工作效率，減少了出錯率。

2 需求分析

管理員（學(xué)生辦公室）、教師、學(xué)生是本系統(tǒng)用戶的組成部分。其中管理員（學(xué)生辦公室）擁有最高權(quán)限，可以對所有學(xué)生、教師以及班級、專業(yè)等信息進行各種操作，包括查詢、修改用戶信息，添加、刪除學(xué)生、教師和班級，同時可以新增獎項以供學(xué)生申報，制定或修改評獎標(biāo)準(zhǔn)便于教師分析獲獎結(jié)果。管理員的主要功能如圖1所示。

圖1 管理員用例圖

教師登錄后能修改自己的登錄密碼和基本信息，可以將學(xué)生的成績表格導(dǎo)入經(jīng)過分析下載評定結(jié)果報表，查看本班學(xué)生申報信息并結(jié)合評定結(jié)果及時審核，及時答復(fù)學(xué)生的反饋消息。教師的功能如圖2所示。

圖2 教師用例圖

學(xué)生登錄后能修改登錄密碼和基本信息，可以根據(jù)自身成績申報獎項，查詢申報信息和歷史獲獎記錄，同時亦可以對評定結(jié)果向教師反饋信息。學(xué)生的主要功能如圖3所示。

圖3 學(xué)生用例圖

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

3.1 功能設(shè)計

管理員登錄后，可以操作功能包括學(xué)院管理、專業(yè)管理、班級管理、學(xué)生管理、教師管理。獎評管理模塊中管理員可根據(jù)《學(xué)生手冊》相關(guān)信息增設(shè)或修改獎項信息和評獎標(biāo)準(zhǔn)，亦可刪除已有獎項。教師登錄后可修改自己的登錄密碼和基本信息，可查看審核本班學(xué)生獎項申報信息并予以通過或不通過，可以查看本班學(xué)生的反饋信息，及時回復(fù)學(xué)生信息。教師在獎評管理模塊中可以按學(xué)年導(dǎo)入班級學(xué)年綜合測評表格文件，參考已設(shè)置獎項的評定標(biāo)準(zhǔn)分析文件產(chǎn)生該學(xué)年評定結(jié)果并下載結(jié)果報表。學(xué)生登錄后僅可修改自己的登錄密碼和基本信息，申報獎項，查看申報信息和審核流程，查看歷史獲獎記錄，并可向教師反饋信息。經(jīng)過以上分析與功能模塊設(shè)計，作系統(tǒng)結(jié)構(gòu)如圖4所示。

圖4 系統(tǒng)功能模塊圖

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

數(shù)據(jù)庫中的數(shù)據(jù)是該系統(tǒng)的信息來源，數(shù)據(jù)庫的設(shè)計不僅決定著信息的獲取與處理是否可行，也會對該系統(tǒng)的穩(wěn)定性、功能的完整性甚至后續(xù)編碼工作效率產(chǎn)生巨大影響，因此合理的數(shù)據(jù)庫設(shè)計是一項十分重要的工作。

本系統(tǒng)采用MySQL數(shù)據(jù)庫進行數(shù)據(jù)存儲，用戶、學(xué)生、教師、班級、專業(yè)、學(xué)院、獎項以及獎項等各個實體之間的關(guān)系如圖5所示。

圖5 實體關(guān)系圖

3.3 技術(shù)架構(gòu)設(shè)計

系統(tǒng)圍繞前后端分離模式進行技術(shù)架構(gòu)設(shè)計。系統(tǒng)采用前后端分離模式，后端通過接口的方式提供JSON格式的數(shù)據(jù)，前端通過Ajax異步技術(shù)獲取JSON格式數(shù)據(jù)。

后端采用MVC模式（Model-View-Controller），用戶調(diào)用后臺接口請求，Controller負責(zé)映射請求執(zhí)行相應(yīng)的方法，調(diào)用Service層然后執(zhí)行Model層逐層返回數(shù)據(jù)交給Controller，然后渲染到View層呈現(xiàn)給用戶。后端基于Spring Boot框架實現(xiàn)后端MVC模式。Spring Boot是目前主流接口開發(fā)框架，簡化Spring應(yīng)用的開發(fā)過程[5]。對比SSH(Struts2,Spring,Hibernate)，SSM（Spring MVC，Spring，MyBatis）等MVC框架，Spring Boot簡化了配置和版本依賴，并且將Tomcat集成在項目中，只需要啟動一個啟動類就可以啟動項目。

前端采用MVVM模式（Model-View-ViewModel），其核心是邏輯代碼中不對View進行直接操作，而是通過View-Model將View與Model綁定起來，且具有內(nèi)置的互相同步的機制。在這種模式下，系統(tǒng)里的View和Model不可以直接進行通信，通過ViewModel作為橋梁，當(dāng)用戶操作View層的時候，ViewModel會察覺到變化，通知Model發(fā)生相應(yīng)的改變，反之亦然，ViewModel向上與View進行雙向綁定，向下與Model通過接口請求數(shù)據(jù)交互，起到橋梁的作用。

4 系統(tǒng)實現(xiàn)

4.1 后端實現(xiàn)

系統(tǒng)開發(fā)以Java語言為基礎(chǔ)，使用Maven構(gòu)建項目，使用Spring Boot實現(xiàn)后端接口，使用MyBatis實現(xiàn)數(shù)據(jù)庫記錄與Java對象之間的映射，使用Druid實現(xiàn)數(shù)據(jù)庫連接池，使用PageHelper組件實現(xiàn)記錄分頁，使用Redis緩存臨時數(shù)據(jù)。在Spring Boot中引入注解，集成大量的框架，簡化了Web框架的配置和開發(fā)流程，避免了因第三方依賴包而引起的版本沖突問題[6]。MyBatis是基于Java的持久層框架，是一個支持對象映射的框架，內(nèi)置JDBC，只關(guān)注SQL[7]。通過Spring Boot框架實現(xiàn)前后端數(shù)據(jù)交互，應(yīng)用三層架構(gòu)模型Controller、Service、Dao層。

圖6 系統(tǒng)開發(fā)架構(gòu)

（1）Controller層實現(xiàn)

對于前后端分離的項目而言，后端只負責(zé)提供數(shù)據(jù)，因此@Controller注解的類中的所有方法都是返回數(shù)據(jù)的，都需要轉(zhuǎn)換成json格式。若在每個方法的前面添加注解@ResponseBody，過于煩瑣，故將@Controller和@ResponseBody合并寫成@RestController。核心代碼如下：

（2）Service層實現(xiàn)

該層作為服務(wù)層，完成系統(tǒng)的業(yè)務(wù)邏輯和數(shù)據(jù)的包裝操作。該層調(diào)用Dao層的方法，從數(shù)據(jù)庫獲取數(shù)據(jù)。如IAwardService定義了學(xué)生評優(yōu)的服務(wù)層接口，在該接口下定義評優(yōu)申報、審核、查詢等接口，AwardServiceImpl是其實現(xiàn)類，通過@Autowired注解映入Dao對象，通過@Override注解實現(xiàn)相應(yīng)接口。

（3）Dao層實現(xiàn)

該層實現(xiàn)數(shù)據(jù)的讀寫操作，基于MyBatis，采用注解的方式實現(xiàn)。通過mapper注解實現(xiàn)動態(tài)生成Bean后注入到對象中，簡化了mapper映射文件。通過repository注解將實現(xiàn)類交給Spring管理。

圖7 學(xué)生評價申報信息

4.2 前端實現(xiàn)

系統(tǒng)采用Vue前端框架，利用Vue-cli腳手架來快速創(chuàng)建項目，并且通過npm安裝項目所需要的第三方組件。前端布局采用Element UI組件式開發(fā)，整個頁面的布局通過安裝Bootstrap的依賴來實現(xiàn)。Element UI是一個響應(yīng)式的前端框架，可以讓頁面適應(yīng)瀏覽器的大小。局部的頁面布局采用Flex技術(shù)，同樣可以自適應(yīng)瀏覽器的大小。

以學(xué)生申報信息界面為例，用戶通過router路由文件訪問該功能，然后通過模板文件渲染該頁面，頁面加載的時候通過AJAX調(diào)用后端接口獲取數(shù)據(jù)，數(shù)據(jù)被渲染到頁面上。

5 結(jié)語

評優(yōu)評獎是高校學(xué)生管理工作的重要組成部分，事關(guān)學(xué)生的切身利益。隨著高校招生人數(shù)的快速增長，傳統(tǒng)方式下學(xué)生評優(yōu)評獎成為學(xué)工管理者的一個難題。隨著新一代信息技術(shù)的發(fā)展，越來越多的行業(yè)運用信息技術(shù)來提高自身的競爭力。基于此，本文結(jié)合江蘇海院的特色，開發(fā)了學(xué)生評優(yōu)評獎系統(tǒng)，目的是為學(xué)生管理部門提供優(yōu)質(zhì)、高效的信息化手段，提高工作效率，減少人為的錯誤。功能上，系統(tǒng)分為管理員、學(xué)工教師和學(xué)生三個角色，具備信息管理與獎評管理等模塊。技術(shù)上，系統(tǒng)采用前后端分離的技術(shù)實現(xiàn)。后端使用Spring Boot框架提供數(shù)據(jù)，前端通過AJAX獲取數(shù)據(jù)，通過Vue綁定數(shù)據(jù)顯示在頁面上。系統(tǒng)已經(jīng)在江蘇海事職業(yè)技術(shù)學(xué)院得到了試運行，達到了預(yù)期效果，有效減輕教師工作負擔(dān)，節(jié)省人力，讓評獎評優(yōu)工作更加系統(tǒng)、更加人性、更加公平公正，更加有效地提高學(xué)生的學(xué)習(xí)熱情和教師的工作熱情。