基于Vue+SpringBoot的分類學科競賽管理系統(tǒng)設計

沈佳棋，倪 珊，王 杰，丁 潔

(南京郵電大學 自動化學院、人工智能學院，江蘇 南京 210023)

1 開放式學科競賽管理系統(tǒng)設計的必要性

當下，“互聯網+”創(chuàng)新創(chuàng)業(yè)大賽、挑戰(zhàn)杯、電子設計大賽等學科競賽在各大高校興起，然而我國絕大多數高校尚未建立符合本校學科競賽的綜合管理系統(tǒng)，宣傳、報名、審核、評分、報銷等流程依然采用線下的方式進行，不僅消耗了組織人員的精力，在一定程度上也影響了學生對于學科競賽的關注率和參與度。打造一套高效、完善的開放式學科競賽管理系統(tǒng)[1]，將混亂、煩瑣的線下工作轉移到線上進行統(tǒng)一管理，將在一定程度上提高學科競賽的報名率，推動我國創(chuàng)新人才教育體制機制進一步發(fā)展。文章基于南京郵電大學A類和B類學科競賽，設計了主流賽事的綜合管理系統(tǒng)。

2 系統(tǒng)框架選用技術介紹

在學科競賽管理系統(tǒng)的技術選型方面，前后端的技術棧均選用了當前在Web開發(fā)領域深受開發(fā)者及企業(yè)青睞的主流框架。其中，后端開發(fā)選用SpringBoot，主要為前端提供接口數據及服務器支撐；后臺競賽管理模塊選用Vue.js，實現了數據及頁面視圖的雙向綁定更新；小程序模塊選用uni-APP框架，實現了小程序端的跨平臺兼容性。

2.1 SpringBoot介紹

SpringBoot[2]是由Pivotal團隊提供的開源后端框架，設計目的在于簡化新Spring應用的初始搭建以及開發(fā)過程，提供了一種新的編程范式，可以更加快速、便捷地開發(fā)Spring項目。在開發(fā)過程中，可以專注于應用本身的開發(fā)，而無須糾結于Spring的配置。

SpringBoot基于Spring4進行設計，繼承了Spring框架的優(yōu)秀基因，具有控制反轉和面向切面兩大核心，框架內部能有效管理所有的對象創(chuàng)建，并維護著對象之間的依賴關系。SpringBoot的高內聚低耦合、聲明式事務的支持、方便繼承框架等特性，使其成為后端服務器應用開發(fā)的主流技術。

2.2 Vue.js介紹

Vue.js是于2014年在Github上公開的一款用于創(chuàng)建用戶界面的漸進式JavaScript框架，也是用于創(chuàng)建單頁應用SPA[3]的Web應用框架。Vue改變了前端開發(fā)者使用jQuery直接對頁面上的DOM元素進行操作的習慣，通過數據和模板雙向綁定的形式更好地組織和簡化了Web開發(fā)。目前，Vue的生態(tài)鏈和周邊工具庫如vue-cli，Vuex，Vue-router等不斷完善，深受越來越多開發(fā)者與企業(yè)的青睞。

Vue的核心思想基于模型視圖視圖模型[4](Model-View-ViewModel，MVVM)原理，使得Vue可以對頁面上需要使用的數據進行統(tǒng)一管理，并能夠很方便地獲取數據的更新，實現頁面視圖與數據模型的交互。Vue中提供的一系列屬性及指令，比如：methods，watch，v-if，@click等，都讓開發(fā)者省去了獲取DOM、操作DOM的過程，通過對數據的控制即可修改視圖的渲染。

2.3 uni-APP介紹

近年來，微信小程序[5]依靠微信積攢下龐大的用戶數量，憑借其輕巧、便捷、易于傳播的特點迅速占領市場。作為一種無須下載安裝便可以在微信平臺上使用的輕型應用程序，微信小程序自騰訊企業(yè)于2017年1月9日推出以來，便成為H5，APP以外的一種新的開放能力。

uni-APP是一款基于Vue打造的小程序端框架，在頁面文件、數據綁定及事件處理方面遵循Vue單文件組件(SFC)規(guī)范，同時，其組件標簽、接口能力(JS API)又依托于小程序的規(guī)范。也就是說，uni-APP可以在開發(fā)者習慣于Vue開發(fā)H5項目的同時，平滑地過渡到小程序的開發(fā)上來。

更強大的是，作為一個前端跨平臺框架，uni-APP具有讓開發(fā)者做到編寫一套代碼，便可以全量發(fā)布到iOS，Android，H5及各種小程序平臺的能力。

3 學科競賽管理系統(tǒng)分析與設計

學科競賽管理系統(tǒng)基于小程序端和PC后臺管理端進行設計。小程序端主要用于學生查看后臺發(fā)布的競賽信息，提供在線報名及報銷操作，并對學生參與競賽相關的信息進行管理；后臺管理端主要用于競賽負責人發(fā)布相關競賽，對學生的報名信息進行審核，并提供評獎及發(fā)放的操作，幫助教師對競賽相關內容進行全站式管理。

2.4 小程序端系統(tǒng)設計

小程序端主要分為3個模塊：首頁、報銷及我的，分別對應小程序底部Tab切換欄的3個部分。小程序端系統(tǒng)的設計如圖1所示。

圖1 學科競賽管理系統(tǒng)小程序端功能模塊設計

(1)“首頁”模塊，主要負責與競賽信息相關的功能。學生登錄成功后，進入首頁落地頁，主要展示后臺發(fā)布的競賽列表。列表的每一項點擊均可進入競賽詳情頁面，展示相關競賽的詳情信息。若該競賽還在報名時間段內，且當前登錄學生尚未對此競賽進行報名，詳情頁底部顯示報名按鈕。點擊此報名按鈕，進入表單填寫頁面，填寫報名指定信息，報名成功后，跳轉到成功頁面。

(2)“報銷”模塊，主要負責賽后學生申請報銷相關的功能，簡化報銷申請的流程。點擊進入報銷列表頁，展示學生所有的歷史報銷記錄，每一項報銷分為3種狀態(tài)，分別為審核中、已通過及已駁回。當學生提交報銷申請后狀態(tài)為審核中，當后臺審核后其狀態(tài)會自動變?yōu)橐淹ㄟ^或已駁回。點擊列表頁的添加按鈕，會跳轉到報銷表單填寫頁面，學生填寫完成相關報銷信息后，跳轉回列表頁調用接口進行刷新。點擊列表頁中的每一項均會進入報銷詳情頁面，展示相關報銷申請的具體信息。

(3)“我的”模塊，主要負責對學生個人相關信息及相關參與競賽信息進行管理。其中，個人信息頁面展示學生的各項信息，并提供修改個人信息的入口。競賽進度頁面可以讓學生時刻關注自己報名過的競賽的進行狀態(tài)，提供對競賽進度的統(tǒng)一管理。創(chuàng)新學分頁面主要展示學生所有已完成的競賽及其所獲自主學分和總學分情況。關注競賽頁面展示了學生關注過的所有競賽，并可在該頁面對不再感興趣的競賽取消關注。

2.5 后臺管理端系統(tǒng)設計

后臺競賽管理端主要實現了登錄模塊、競賽活動發(fā)布、學生報名信息管理、競賽成績評定、自主化學分發(fā)放、經費報銷審核等功能。

(1)后臺系統(tǒng)為競賽管理相關教師的手機號分配登錄權限，教師通過手機號加短信驗證碼的形式登錄。登錄成功后，可以在系統(tǒng)頁面中看到自己的個人信息，并對個人信息進行修改。

(2)在競賽活動發(fā)布頁面，進入競賽信息填寫的表單，教師可以對競賽名稱、報名時間段、競賽組織單位、競賽詳情介紹等信息進行設置，點擊發(fā)布后，可在小程序的競賽列表中第一時間看到后臺發(fā)布的競賽信息。

(3)學生在小程序端報名相關競賽后，教師可在后臺查看報名學生列表及報名學生詳情。競賽結束后，可在后臺直接對成績進行評定并設置獲得獎項，同時，可自動發(fā)放該競賽的自主化學分到相關學生的指定賬號，學生可在小程序端對上述信息進行查看。

(4)學生在小程序端提交報銷申請后，后臺端可以看到所有學生的所有報銷申請記錄，并對每一項進行審核，點擊通過或不通過按鈕提交審核結果，小程序端報銷狀態(tài)自動修改為對應結果。后臺管理端的設計如圖2所示。

圖2 學科競賽管理系統(tǒng)后臺管理端功能模塊設計

4 學科競賽管理系統(tǒng)技術實現

后臺SpringBoot采用模型-視圖-控制器(Model-View-Controller，MVC)架構，其核心思想是數據層、視圖層、控制層相互分離，各司其職。前端Vue采用MVVM架構，將數據和頁面視圖進行雙向綁定。

以獲取競賽列表為例，在SpringBoot的controller層中，接收學號和篩選類型作為參數，數字1代表進行中的競賽，數字2代表未開始的競賽，根據參數不同，返回不一樣的數據列表。結合service層中的結果，根據type類型，走不同的if路徑，進行連表查詢，并將查詢到的信息整合到DTO中通過接口的形式返回給前端展示。

前端通過wx.request方法調用查詢競賽列表的接口，得到接口的返回信息，當接口成功調用，得到的status_code為200時，將競賽列表賦值給頁面中的competition_list參數，從而驅動頁面進行視圖渲染。核心代碼如下。

SpringBoot代碼:

@GetMapping("/listCompetition")

@ApiOperation(“競賽列表”)

public Response findGame(@RequestParam String studentId,@RequestParam Integer type){

//0表示全部，1表示進行中，2表示未開始

Response response= new Response();

List gameDTOS=new ArrayList<>();

if(type==0){

signService.findNotGame().forEach(game-> {

GameDTO gameDTO=new GameDTO();

gameDTO.setGame(game);

gameDTO.setIsBegin(1); //進行中是1

gameDTOS.add(gameDTO);

});

signService.findReaGame().forEach(game-> {

GameDTO gameDTO=new GameDTO();

gameDTO.setGame(game);

gameDTO.setIsBegin(0);

gameDTOS.add(gameDTO);

});

response.setStatus(200);

response.setData(gameDTOS);

return response;

} else if (type == 1) {

signService.findNotGame().forEach(game-> {

GameDTO gameDTO=new GameDTO();

gameDTO.setGame(game);

gameDTO.setIsBegin(1);

gameDTOS.add(gameDTO);

});

response.setStatus(200);

response.setData(gameDTOS);

return response;

}else{

signService.findReaGame().forEach(game-> {

GameDTO gameDTO=new GameDTO();

gameDTO.setGame(game);

gameDTO.setIsBegin(0);//進行中是1

});

response.setStatus(200);

response.setData(gameDTOS);

return response;

}

uni-APP代碼

uni.request({

url: this.domain+′/signUp/listCompetition′,

method: ′GET′,

data: {

"studentId": this.student_id,

"type": this.type

},

success: (res) => {

if(res.data.status === 200) {

let temp_data = res.data.data;

if(this.judgeArray(temp_data)) {

this.show_page = true;

}

uni.hideLoading();

}

},

fail: (err) => {

uni.hideLoading();

console.log(err);

}

})

watch: {

type(val) {

this.type = val;

this.getCompetitionList();

}

}

5 結語

文章針對高校各類學科競賽和創(chuàng)新創(chuàng)業(yè)大賽，設計了基于Vue+SpringBoot的學科競賽管理平臺，將煩瑣的人力勞動轉換為高效的線上操作，有利于高校競賽組織者對學科競賽領域進行更方便、統(tǒng)一的管理，也有利于參賽學生更及時、更全面地獲取學科競賽信息，提高參與學科競賽的積極性。