当前位置：首页 > news >正文

【附源码】考试报名系统设计与实现+SpringBoot + Vue (前后端分离)

news 来源：原创 2025/6/24 11:49:36

大家好，今天给大家带来一个超级简单的 考试报名系统。大家可用学习下系统的设计和源码风格。

视频演示

考试报名系统

图片演示

技术栈

后端

技术框架：JDK8+SpringBoot + Mybatis-Plus

数据库：Mysql8

前端

- Vue.js 2.6.12 - 主要的前端框架
- Vue Router 3.4.8 - 单页面应用路由管理
- Vuex 3.5.1 - 状态管理
- Vue CLI 4.5.8 - 项目脚手架和构建工具

UI组件库

- Ant Design Vue 1.7.2 - 主要的UI组件库，提供丰富的企业级组件
- Element UI 2.14.0 - 辅助UI组件库，补充部分组件功能

HTTP请求处理

- Axios 0.21.0 - HTTP客户端，用于API请求
- Day.js 1.9.4 - 轻量级日期处理库
- Vue Cookies 1.7.4 - Cookie管理

系统功能概述

整个系统分为 “管理员” ， “老师”，“学生” 三大角色。管理员可以管理老师和学生账号。还可以管理考试信息，学生成绩，学生报名信息等。老师可以查看自己管辖的考试信息，对报名考试的学生进行审核，发放准考证。学生可以参加考试报名，下载准考证，还可以查看自己的成绩。

考试报名的整体流程

1. 首先由管理员新增一个考试信息，描述考试的内容，场地，时间，还需要选择一个老师账号，这个老师就是管理这趟考试的监考老师。

2. 老师登录后，可以查看到自己监考的考试（别的老师的是看不到的）。还可以查看这个考试的报考学生，现在这个步骤还没有。

3. 学生在前端登录后，可以看到所有的考试信息，然后选择一个进行报名考试，此时，这个报名还是待审核状态。

4. 老师此时就可以看到由学生报名了考试，然后此时看到报名还是未支付状态，可以联系学生进行沟通支付。

5. 学生登录学生端后台，可以找到报名，进行支付，此时老师那边就看到报名是支付状态。

6. 老师进行审核通过，然后点击准考证，上传关于当前报名学生的一个准考证pdf文件（别的类型也可以）。

7. 学生登录学生端后台，就可以进行准考证下载了。拿着准考证，学生就可以在考试那天去考试了。

8. 在考试成绩出来后，管理员就可以录入成绩单。老师和学生那边都可以查看到相关的成绩信息。老师还可以对成绩进行修改和完善。学生只可以查看自己的成绩。

管理员核心功能

用户管理模块

- 学生管理：学生信息的增删改查，包含学号、姓名、性别、手机、邮箱、头像等字段
- 教师管理：教师信息的增删改查，包含教师账号、姓名、年龄、性别、联系方式、头像等字段

考试信息管理

- 考试信息管理：考试的基本信息维护，包含：考试编号、科目名称、考试时间、考试地点、报名费用、注意事项监、考教师信息等
- 权限控制：管理员可进行完整的增删改查，教师只能查看。

考试报名管理

- 报名功能：学生可以报名参加考试
- 审核流程：教师/管理员可以审核报名申请
- 状态管理：包含待审核、通过、未通过等状态
- 批量操作：支持批量审核、批量删除等操作

准考证管理

- 准考证生成：审核通过后可生成准考证
- 准考证查看：学生可查看自己的准考证
- 成绩录入：教师可通过准考证模块录入考试成绩

考试成绩管理

- 成绩管理：管理员可以录入学生的考试成绩

系统管理模块

- 新闻资讯管理：发布考试相关新闻和通知
- 轮播图管理：首页轮播图的配置和管理
- 关于我们：系统介绍页面内容管理
- 系统简介：系统功能介绍页面管理
- 论坛管理：用户交流论坛的管理功能

教师核心功能

考试报名管理

- 报名功能：查看学生报名的考试
- 审核流程：教师可以审核报名申请
- 准考证操作：教师可以给学生发送考试用的准考证

考试报名管理

查看当前老师监考的考试信息

准考证管理

查看自己发放的准考证

考试成绩管理

查看管理员录入的学生成绩，并且可以修改成绩

学生核心功能

考试报名：学生可以进入到考试前端，查看到所有的考试信息，然后进行考试报名。

前端功能：查看到网站的资讯文章，文章评论等。还有论坛，发布论坛帖子。

准考证：学生登录后端，可以查看到老师发放的准考证，可以下载准考证进行考试。

成绩查看：查看自己考试的成绩。

系统部署

执行sql

用户需要自己安装好mysql数据库，注意，必须是mysql8 ，否则代码运行会出错。

然后用navicate等连接工具，连接到mysql服务，然后新建一个 aaa-kaoshi 数据库，然后执行 “aaa-kaoshi.sql” 里面的表创建和数据导入。

前端部署

vue项目部署

前端的项目必须没有中文，否则启动会报错！！

安装node ，版本：v14.21.3 (14的大版本号对应就可以了) ，安装完成后。进入到项目 hadluo-vue-admin 目录下，这个项目是vue管理后台端，右键，运行cmd，运行下面命令：

cnpm install cnpm run serve

运行成功图例：

进入到项目 hadluo-vue 目录下，这个项目是vue学生前端，右键，运行cmd，运行下面命令：

cnpm install cnpm run serve

运行成功图例：

启动后端项目

将maven设置的settings.xml改成你自己的配置。

然后刷新maven，等待项目下载依赖包完成。。。。。

然后部署后端，打开idea，导入maven工程 hadluo-server。

打开resources目录，修改 application.properties 配置文件，主要修改下面几个信息：

数据库信息（注意改成你的地址）

spring:datasource:driverClassName: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://192.168.200.131:3306/aaa-kaoshi?useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8username: rootpassword: qq123456

然后启动 main 启动类：SpringbootSchemaApplication.class