基于Vue+SpringBoot的分类学科竞赛管理系统设计

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

(南京邮电大学 自动化学院、人工智能学院，江苏 南京 210023)

1 开放式学科竞赛管理系统设计的必要性

当下，“互联网+”创新创业大赛、挑战杯、电子设计大赛等学科竞赛在各大高校兴起，然而我国绝大多数高校尚未建立符合本校学科竞赛的综合管理系统，宣传、报名、审核、评分、报销等流程依然采用线下的方式进行，不仅消耗了组织人员的精力，在一定程度上也影响了学生对于学科竞赛的关注率和参与度。打造一套高效、完善的开放式学科竞赛管理系统[1]，将混乱、烦琐的线下工作转移到线上进行统一管理，将在一定程度上提高学科竞赛的报名率，推动我国创新人才教育体制机制进一步发展。文章基于南京邮电大学A类和B类学科竞赛，设计了主流赛事的综合管理系统。

2 系统框架选用技术介绍

在学科竞赛管理系统的技术选型方面，前后端的技术栈均选用了当前在Web开发领域深受开发者及企业青睐的主流框架。其中，后端开发选用SpringBoot，主要为前端提供接口数据及服务器支撑；后台竞赛管理模块选用Vue.js，实现了数据及页面视图的双向绑定更新；小程序模块选用uni-APP框架，实现了小程序端的跨平台兼容性。

2.1 SpringBoot介绍

SpringBoot[2]是由Pivotal团队提供的开源后端框架，设计目的在于简化新Spring应用的初始搭建以及开发过程，提供了一种新的编程范式，可以更加快速、便捷地开发Spring项目。在开发过程中，可以专注于应用本身的开发，而无须纠结于Spring的配置。

SpringBoot基于Spring4进行设计，继承了Spring框架的优秀基因，具有控制反转和面向切面两大核心，框架内部能有效管理所有的对象创建，并维护着对象之间的依赖关系。SpringBoot的高内聚低耦合、声明式事务的支持、方便继承框架等特性，使其成为后端服务器应用开发的主流技术。

2.2 Vue.js介绍

Vue.js是于2014年在Github上公开的一款用于创建用户界面的渐进式JavaScript框架，也是用于创建单页应用SPA[3]的Web应用框架。Vue改变了前端开发者使用jQuery直接对页面上的DOM元素进行操作的习惯，通过数据和模板双向绑定的形式更好地组织和简化了Web开发。目前，Vue的生态链和周边工具库如vue-cli，Vuex，Vue-router等不断完善，深受越来越多开发者与企业的青睐。

Vue的核心思想基于模型视图视图模型[4](Model-View-ViewModel，MVVM)原理，使得Vue可以对页面上需要使用的数据进行统一管理，并能够很方便地获取数据的更新，实现页面视图与数据模型的交互。Vue中提供的一系列属性及指令，比如：methods，watch，v-if，@click等，都让开发者省去了获取DOM、操作DOM的过程，通过对数据的控制即可修改视图的渲染。

2.3 uni-APP介绍

近年来，微信小程序[5]依靠微信积攒下庞大的用户数量，凭借其轻巧、便捷、易于传播的特点迅速占领市场。作为一种无须下载安装便可以在微信平台上使用的轻型应用程序，微信小程序自腾讯企业于2017年1月9日推出以来，便成为H5，APP以外的一种新的开放能力。

uni-APP是一款基于Vue打造的小程序端框架，在页面文件、数据绑定及事件处理方面遵循Vue单文件组件(SFC)规范，同时，其组件标签、接口能力(JS API)又依托于小程序的规范。也就是说，uni-APP可以在开发者习惯于Vue开发H5项目的同时，平滑地过渡到小程序的开发上来。

更强大的是，作为一个前端跨平台框架，uni-APP具有让开发者做到编写一套代码，便可以全量发布到iOS，Android，H5及各种小程序平台的能力。

3 学科竞赛管理系统分析与设计

学科竞赛管理系统基于小程序端和PC后台管理端进行设计。小程序端主要用于学生查看后台发布的竞赛信息，提供在线报名及报销操作，并对学生参与竞赛相关的信息进行管理；后台管理端主要用于竞赛负责人发布相关竞赛，对学生的报名信息进行审核，并提供评奖及发放的操作，帮助教师对竞赛相关内容进行全站式管理。

2.4 小程序端系统设计

小程序端主要分为3个模块：首页、报销及我的，分别对应小程序底部Tab切换栏的3个部分。小程序端系统的设计如图1所示。

图1 学科竞赛管理系统小程序端功能模块设计

(1)“首页”模块，主要负责与竞赛信息相关的功能。学生登录成功后，进入首页落地页，主要展示后台发布的竞赛列表。列表的每一项点击均可进入竞赛详情页面，展示相关竞赛的详情信息。若该竞赛还在报名时间段内，且当前登录学生尚未对此竞赛进行报名，详情页底部显示报名按钮。点击此报名按钮，进入表单填写页面，填写报名指定信息，报名成功后，跳转到成功页面。

(2)“报销”模块，主要负责赛后学生申请报销相关的功能，简化报销申请的流程。点击进入报销列表页，展示学生所有的历史报销记录，每一项报销分为3种状态，分别为审核中、已通过及已驳回。当学生提交报销申请后状态为审核中，当后台审核后其状态会自动变为已通过或已驳回。点击列表页的添加按钮，会跳转到报销表单填写页面，学生填写完成相关报销信息后，跳转回列表页调用接口进行刷新。点击列表页中的每一项均会进入报销详情页面，展示相关报销申请的具体信息。

(3)“我的”模块，主要负责对学生个人相关信息及相关参与竞赛信息进行管理。其中，个人信息页面展示学生的各项信息，并提供修改个人信息的入口。竞赛进度页面可以让学生时刻关注自己报名过的竞赛的进行状态，提供对竞赛进度的统一管理。创新学分页面主要展示学生所有已完成的竞赛及其所获自主学分和总学分情况。关注竞赛页面展示了学生关注过的所有竞赛，并可在该页面对不再感兴趣的竞赛取消关注。

2.5 后台管理端系统设计

后台竞赛管理端主要实现了登录模块、竞赛活动发布、学生报名信息管理、竞赛成绩评定、自主化学分发放、经费报销审核等功能。

(1)后台系统为竞赛管理相关教师的手机号分配登录权限，教师通过手机号加短信验证码的形式登录。登录成功后，可以在系统页面中看到自己的个人信息，并对个人信息进行修改。

(2)在竞赛活动发布页面，进入竞赛信息填写的表单，教师可以对竞赛名称、报名时间段、竞赛组织单位、竞赛详情介绍等信息进行设置，点击发布后，可在小程序的竞赛列表中第一时间看到后台发布的竞赛信息。

(3)学生在小程序端报名相关竞赛后，教师可在后台查看报名学生列表及报名学生详情。竞赛结束后，可在后台直接对成绩进行评定并设置获得奖项，同时，可自动发放该竞赛的自主化学分到相关学生的指定账号，学生可在小程序端对上述信息进行查看。

(4)学生在小程序端提交报销申请后，后台端可以看到所有学生的所有报销申请记录，并对每一项进行审核，点击通过或不通过按钮提交审核结果，小程序端报销状态自动修改为对应结果。后台管理端的设计如图2所示。

图2 学科竞赛管理系统后台管理端功能模块设计

4 学科竞赛管理系统技术实现

后台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 结语

文章针对高校各类学科竞赛和创新创业大赛，设计了基于Vue+SpringBoot的学科竞赛管理平台，将烦琐的人力劳动转换为高效的线上操作，有利于高校竞赛组织者对学科竞赛领域进行更方便、统一的管理，也有利于参赛学生更及时、更全面地获取学科竞赛信息，提高参与学科竞赛的积极性。