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

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

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

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

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

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

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

2.1 SpringBoot介紹

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

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

2.2 Vue.js介紹

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

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

2.3 uni-APP介紹

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 學(xué)科競賽管理系統(tǒng)技術(shù)實現(xiàn)

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

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

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

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 結(jié)語

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