基于springboot vue3 在线考试系统设计与实现 源码数据库 文档

系统设计是将被设计对象划分为单个模块进行构建，各个模块相互支持，相互制约，它们的组合是一个完整的系统。通过系统设计，可以最大限度地满足系统的预期目标，明确软件开发的目的。

数据表是用来保存多种数据的表，它是所有数据库的核心对象，且对于软件开发有着不可替代的作用。其相关数据表如下：

表4-1菜单

表4-2：考试信息

表4-3：考场信息

表4-4：教师

表4-5：配置文件

表4-6：成绩信息

表4-7：token表

表4-8：公告资讯

表4-9：考试记录

表4-10：试题管理

表4-11：试卷管理

表4-12：学生

表4-13：管理员

通过本章针对在线考试系统功能的总体结构、E-R属性图和数据表的大概介绍，对在开发系统时所要涉及到的数据库进行简单设计，为下一章系统的实现做好铺垫。

系统实现章节的主要内容主要是将系统分析和系统设计方案进行实现，按照各个系统角色进行功能介绍，系统实现就是一个真正开始编写的阶段，将前面的分析结果以及设计方案进行实现，最终做出一个符合用户需求的软件系统。

当游客打开系统的网址后，首先看到的就是首页界面。在这里，游客能够看到在线考试系统的导航条显示首页、考试信息、考场信息、公告资讯、个人中心等。系统首页界面如图5-1所示：

图5-1系统首页界面

在注册流程中，学生在Vue前端填写必要信息（如学生名、密码等）并提交。前端将这些信息通过HTTP请求发送到Java后端。后端处理这些信息，检查学生名是否唯一，并将新学生数据存入MySQL数据库。完成后，后端向前端发送注册成功的确认，前端随后通知学生完成注册。这个过程实现了新学生的数据收集、验证和存储。如图5-2 所示：

图5-2 学生注册界面

在登录流程中，学生首先在Vue前端界面输入学生名和密码。这些信息通过HTTP请求发送到Java后端。后端接收请求，通过与MySQL数据库交互验证学生凭证。如果认证成功，后端会返回给前端，允许学生访问系统。这个过程涵盖了从学生输入到系统验证和响应的全过程。如图5-3所示：

图5-3 学生登录界面

点击考试信息，学生在考试信息页面搜索栏输入考试名称，进行搜索，查看考试名称、考试科目、考试时间、考试年级等信息，如图5-4所示。

图5-4考试信息界面图

点击考场信息，学生在考场信息页面搜索栏输入考场号、场次，进行搜索，查看考场号、考场人数、场次、监考老师等信息，如图5-5所示。

图5-5考场信息界面图

学生点击个人中心，在个人中心页面可以更新个人详细信息，还可以对修改密码、考试管理进行详细操作；如图5-6所示：

图5-6个人中心界面

管理员登录，在登录页面选择需要登录的角色，在正确输入用户名和密码后，点击登录操作；如图5-7所示。                               

图5-7管理员登录界面

管理员进入主页面，主要功能包括首页、用户管理、考试信息管理、考场信息管理、试卷管理、试题管理、考试管理、系统管理等进行操作。管理员主页面如图5-8所示：

图5-8管理员功能主界面

教师信息功能在视图层（view层)进行交互，比如点击“新增”按钮或填写教师信息表单。这些教师信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如搜索、新增、更新或删除教师信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便教师信息功能可以看到最新的信息或相应的操作反馈。在教师信息页面的输入栏中输入教师工号进行搜索，可以查看到教师详细信息，并根据需要进行改动或者删除等操作；如图5-9所示。

图5-9教师界面图

学生信息功能在视图层（view层)进行交互，比如点击“新增”按钮或填写学生信息表单。这些学生信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如搜索、新增、更新或删除学生信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便学生信息功能可以看到最新的信息或相应的操作反馈。在学生信息页面的输入栏中输入学号进行搜索，可以查看到学生详细信息，并根据需要进行改动或者删除等操作；如图5-10所示。

图5-10学生界面图

管理员点击考试信息管理；在考试信息管理页面通过对考试名称、考试科目、考试时间、考试年级等信息，进行搜索或新增、修改、删除考试信息等操作；如图5-11所示。

图5-11考试信息管理界面图

管理员点击考场信息管理；在考场信息管理页面通过对考场号、考场人数、场次、监考老师等信息，进行搜索、新增或删除考场信息等操作；如图5-12所示。

图5-12考场信息管理界面图

主要代码

<template><div><div class="app-contain"><div class="list_search_view"><el-form :model="searchQuery" class="search_form" ><div class="search_view"><div class="search_label">考场号：</div><div class="search_box"><el-input class="search_inp" v-model="searchQuery.kaochanghao" placeholder="考场号"clearable></el-input></div></div><div class="search_view"><div class="search_label">场次：</div><div class="search_box"><el-input class="search_inp" v-model="searchQuery.changci" placeholder="场次"clearable></el-input></div></div><div class="search_btn_view"><el-button class="search_btn" type="primary" @click="searchClick()" size="small">搜索</el-button></div></el-form><br><div class="btn_view"><el-button type="success" @click="addClick" v-if="btnAuth('kaochangxinxi','新增')">新增</el-button><el-button  v-if=" btnAuth('kaochangxinxi','查看')" type="info"  :disabled="selRows.length==1?false:true" @click="infoClick(null)">详情</el-button><el-button type="primary" :disabled="selRows.length==1?false:true" @click="editClick" v-if=" btnAuth('kaochangxinxi','修改')">修改</el-button><el-button type="danger" :disabled="selRows.length?false:true" @click="delClick(null)"  v-if="btnAuth('kaochangxinxi','删除')">删除</el-button></div></div><br><el-tablev-loading="listLoading"border :stripe='true'@selection-change="handleSelectionChange" ref="table"v-if="btnAuth('kaochangxinxi','查看')":data="list"@row-click="listChange"><el-table-column :resizable='true' align="left" header-align="left" type="selection" width="55" /><el-table-column label="序号" width="70" :resizable='true' :sortable='true' align="left" header-align="left"><template #default="scope">{{ scope.$index + 1}}</template></el-table-column><el-table-column:resizable='true' :sortable='true' align="left" header-align="left"label="考场号"><template #default="scope">{{scope.row.kaochanghao}}</template></el-table-column><el-table-column:resizable='true' :sortable='true' align="left" header-align="left"label="考场人数"><template #default="scope">{{scope.row.kaochangrenshu}}</template></el-table-column><el-table-column:resizable='true' :sortable='true' align="left" header-align="left"label="场次"><template #default="scope">{{scope.row.changci}}</template></el-table-column><el-table-column:resizable='true' :sortable='true' align="left" header-align="left"label="监考老师"><template #default="scope">{{scope.row.jiankaolaoshi}}</template></el-table-column><el-table-column label="操作" width="300" :resizable='true' :sortable='true' align="left" header-align="left"><template #default="scope"><el-button type="info" v-if=" btnAuth('kaochangxinxi','查看')" @click="infoClick(scope.row.id)">详情</el-button></template></el-table-column></el-table><el-pagination background:layout="layouts.join(',')":total="total" :page-size="listQuery.limit"prev-text="上一页"next-text="下一页":hide-on-single-page="false":style='{"padding":"0","margin":"20px 0 0","whiteSpace":"nowrap","color":"#333","textAlign":"center","width":"100%","fontWeight":"500"}'@size-change="sizeChange"@current-change="currentChange" @prev-click="prevClick"@next-click="nextClick"  /></div><formModel ref="formRef" @formModelChange="formModelChange"></formModel></div>
</template>
<script setup>import axios from 'axios'import {reactive,ref,getCurrentInstance,nextTick,onMounted,watch,} from 'vue'import {useRoute,useRouter} from 'vue-router'import {ElMessageBox} from 'element-plus'const context = getCurrentInstance()?.appContext.config.globalProperties;import formModel from './formModel.vue'//基础信息const tableName = 'kaochangxinxi'const formName = '考场信息'const route = useRoute()//基础信息onMounted(()=>{})//列表数据const list = ref(null)const table = ref(null)const listQuery = ref({page: 1,limit: 20,sort: 'id',order: 'desc'})const searchQuery = ref({})const selRows = ref([])const listLoading = ref(false)const listChange = (row) =>{nextTick(()=>{table.value.clearSelection()table.value.toggleRowSelection(row)})}//列表const getList = () => {listLoading.value = truelet params = JSON.parse(JSON.stringify(listQuery.value))params['sort'] = 'id'params['order'] = 'desc'if(searchQuery.value.kaochanghao&&searchQuery.value.kaochanghao!=''){params['kaochanghao'] = '%' + searchQuery.value.kaochanghao + '%'}if(searchQuery.value.changci&&searchQuery.value.changci!=''){params['changci'] = '%' + searchQuery.value.changci + '%'}context?.$http({url: `${tableName}/page`,method: 'get',params: params}).then(res => {listLoading.value = falselist.value = res.data.data.listtotal.value = Number(res.data.data.total)})}//删const delClick = (id) => {let ids = ref([])if (id) {ids.value = [id]} else {if (selRows.value.length) {for (let x in selRows.value) {ids.value.push(selRows.value[x].id)}} else {return false}}ElMessageBox.confirm(`是否删除选中${formName}`, '提示', {confirmButtonText: '是',cancelButtonText: '否',type: 'warning',}).then(() => {context?.$http({url: `${tableName}/delete`,method: 'post',data: ids.value}).then(res => {context?.$toolUtil.message('删除成功', 'success',()=>{getList()})})})}//多选const handleSelectionChange = (e) => {selRows.value = e}//列表数据//分页const total = ref(0)const layouts = ref(["prev","pager","next"])const sizeChange = (size) => {listQuery.value.limit = sizegetList()}const currentChange = (page) => {listQuery.value.page = pagegetList()}const prevClick = () => {listQuery.value.page = listQuery.value.page - 1getList()}const nextClick = () => {listQuery.value.page = listQuery.value.page + 1getList()}//分页//权限验证const btnAuth = (e,a)=>{return context?.$toolUtil.isAuth(e,a)}//搜索const searchClick = () => {listQuery.value.page = 1getList()}//表单const formRef = ref(null)const formModelChange=()=>{searchClick()}const addClick = ()=>{formRef.value.init()}const editClick = ()=>{if(selRows.value.length){formRef.value.init(selRows.value[0].id,'edit')}}const infoClick = (id=null)=>{if(id){formRef.value.init(id,'info')}else if(selRows.value.length){formRef.value.init(selRows.value[0].id,'info')}}// 表单// 预览文件const preClick = (file) =>{if(!file){context?.$toolUtil.message('文件不存在','error')}window.open(context?.$config.url + file)// const a = document.createElement('a');// a.style.display = 'none';// a.setAttribute('target', '_blank');// file && a.setAttribute('download', file);// a.href = context?.$config.url + file;// document.body.appendChild(a);// a.click();// document.body.removeChild(a);}// 下载文件const download = (file) => {if(!file){context?.$toolUtil.message('文件不存在','error')}let arr = file.replace(new RegExp('file/', "g"), "")axios.get((location.href.split(context?.$config.name).length>1 ? location.href.split(context?.$config.name)[0] :'') + context?.$config.name + '/file/download?fileName=' + arr, {headers: {token: context?.$toolUtil.storageGet('Token')},responseType: "blob"}).then(({data}) => {const binaryData = [];binaryData.push(data);const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf;chartset=UTF-8'}))const a = document.createElement('a')a.href = objectUrla.download = arr// a.click()// 下面这个写法兼容火狐a.dispatchEvent(new MouseEvent('click', {bubbles: true,cancelable: true,view: window}))window.URL.revokeObjectURL(data)})}//初始化const init = () => {getList()}init()
</script>
<style lang="scss" scoped>// 操作盒子.list_search_view {margin: 0 0 20px;display: flex;justify-content: space-between;flex-wrap: wrap;// 搜索盒子.search_form {display: flex;align-items: center;// 子盒子.search_view {margin: 0 10px 0 0;display: flex;align-items: center;// 搜索label.search_label {margin: 0 10px 0 0;color: #666;background: none;font-weight: 500;display: inline-block;width: auto;font-size: 14px;line-height: 40px;text-align: right;min-width: 100px;height: 40px;}// 搜索item.search_box {display: inline-block;width: auto;// 输入框:deep(.search_inp) {border: 1px solid #139666;border-radius: 0px;padding: 0 10px;background: #fff;width: auto;line-height: 34px;box-sizing: border-box;//去掉默认样式.el-input__wrapper{border: none;box-shadow: none;background: none;border-radius: 0;height: 100%;padding: 0;}.is-focus {box-shadow: none !important;}}}}// 搜索按钮盒子.search_btn_view {width: 20%;display: flex;padding: 0 20px;// 搜索按钮.search_btn {border: 1px solid #19a97b;cursor: pointer;border-radius: 0px;padding: 0 24px;color: #fff;background: #19a97b;width: auto;font-size: 14px;height: 36px;}// 搜索按钮-悬浮.search_btn:hover {border: 1px solid #19a97b;background: #19a97b;}}}//头部按钮盒子.btn_view {margin: 0;display: flex;// 其他:deep(.el-button--default){border: 1px solid #139666;cursor: pointer;border-radius: 0px;padding: 0 24px;margin: 0 10px 0 0;outline: none;color: #fff;background: #19a97b;width: auto;font-size: 14px;height: 36px;}// 其他-悬浮:deep(.el-button--default:hover){background: #11a274;}// 新增:deep(.el-button--success){border: 1px solid #139666;cursor: pointer;border-radius: 0px;padding: 0 24px;margin: 0 10px 0 0;outline: none;color: #fff;background: #19a97b;width: auto;font-size: 14px;height: 36px;}// 新增-悬浮:deep(.el-button--success:hover){background: #11a274;}// 修改:deep(.el-button--primary){border: 1px solid #139666;cursor: pointer;border-radius: 0px;padding: 0 24px;margin: 0 10px 0 0;outline: none;color: #fff;background: #19a97b;width: auto;font-size: 14px;height: 36px;}// 修改-悬浮:deep(.el-button--primary:hover){background: #11a274;}// 详情:deep(.el-button--info){border: 1px solid #139666;cursor: pointer;border-radius: 0px;padding: 0 24px;margin: 0 10px 0 0;outline: none;color: #fff;background: #19a97b;width: auto;font-size: 14px;height: 36px;}// 详情-悬浮:deep(.el-button--info:hover){background: #11a274;}// 删除:deep(.el-button--danger){border: 1px solid #139666;cursor: pointer;border-radius: 0px;padding: 0 24px;margin: 0 10px 0 0;outline: none;color: #fff;background: #19a97b;width: auto;font-size: 14px;height: 36px;}// 删除-悬浮:deep(.el-button--danger:hover){background: #11a274;}// 统计:deep(.el-button--warning){border: 1px solid #139666;cursor: pointer;border-radius: 0px;padding: 0 24px;margin: 0 10px 0 0;outline: none;color: #fff;background: #19a97b;width: auto;font-size: 14px;height: 36px;}// 统计-悬浮:deep(.el-button--warning:hover){background: #11a274;}}}// 表格样式.el-table {border-radius: 0px;padding: 0;background: #fff;width: 100%;border-color: #d2d2d2;border-width: 1px 0 0 1px;border-style: solid;:deep(.el-table__header-wrapper) {thead {color: #999;font-weight: 500;width: 100%;tr {background: #f8f8f8;th {padding: 4px 0;background: none;border-color: #d2d2d2;border-width: 0 1px 1px 0;border-style: solid;text-align: left;.cell {padding: 0 0 0 10px;word-wrap: normal;white-space: normal;font-weight: bold;display: flex;vertical-align: middle;font-size: 14px;line-height: 24px;text-overflow: ellipsis;word-break: break-all;width: 100%;align-items: center;position: relative;}}}}}:deep(.el-table__body-wrapper) {tbody {width: 100%;tr {background: #fff;td {padding: 6px 0;color: #555;background: #fff;border-color: #d2d2d2;border-width: 0 1px 1px 0;border-style: solid;text-align: left;.cell {padding: 0 10px;overflow: hidden;word-break: break-all;white-space: normal;line-height: 24px;text-overflow: ellipsis;// 编辑.el-button--primary {border: 0;cursor: pointer;border-radius: 4px;padding: 0 10px 0 20px;margin: 0 6px 6px 0;color: #1aa97b;background: url(http://clfile.zggen.cn/20231117/bd0ca9e6647a451391dd73561b741f07.png) no-repeat left center;width: auto;font-size: 14px;height: 20px;}// 编辑-悬浮.el-button--primary:hover {}// 详情.el-button--info {border: 0;cursor: pointer;border-radius: 4px;padding: 0 10px 0 20px;margin: 0 6px 6px 0;color: #1aa97b;background: url(http://clfile.zggen.cn/20231117/28f773099efd42f49628480b3b8136dd.png) no-repeat left center;width: auto;font-size: 14px;line-height: 22px;height: 20px;}// 详情-悬浮.el-button--info:hover {}// 删除.el-button--danger {border: 0;cursor: pointer;border-radius: 0px;padding: 0 10px 0 20px;margin: 0 6px 6px 0;color: #1aa97b;background: url(http://clfile.zggen.cn/20231117/018a8ed10a554e859786507cd78b1558.png) no-repeat left center;width: auto;font-size: 14px;height: 20px;}// 删除-悬浮.el-button--danger:hover {}// 跨表.el-button--success {border: 0;cursor: pointer;border-radius: 4px;padding: 0 10px 0 20px;margin: 0 6px 6px 0;color: #1aa97b;background: url(http://clfile.zggen.cn/20231117/e9d3ef05d1a34d9982eab7a176b193b5.png) no-repeat left center;width: auto;font-size: 14px;height: 24px;}// 跨表-悬浮.el-button--success:hover {}// 操作.el-button--warning {border: 0;cursor: pointer;border-radius: 4px;padding: 0 10px 0 20px;margin: 0 6px 6px 0;color: #1aa97b;background: url(http://clfile.zggen.cn/20231117/df2bdb7409984be2bc70f7f4a4aaa5e2.png) no-repeat left center;width: auto;font-size: 14px;height: 20px;}// 操作-悬浮.el-button--warning:hover {}}}}tr.el-table__row--striped {td {background: #f8f8f8;}}tr:hover {td {padding: 6px 0;color: #555;background: #f8f8f8;border-color: #d2d2d2;border-width: 0 1px 1px 0;border-style: solid;text-align: left;}}}}}// 分页器.el-pagination {// 总页码:deep(.el-pagination__total) {margin: 0 10px 0 0;color: #666;font-weight: 400;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;height: 28px;}// 上一页:deep(.btn-prev) {border: none;border-radius: 0px;padding: 0 5px;margin: 0 5px;color: #fff;background: #19a97b90;display: inline-block;vertical-align: top;font-size: 13px;line-height: 26px;min-width: 35px;height: 26px;}// 下一页:deep(.btn-next) {border: none;border-radius: 0px;padding: 0 5px;margin: 0 5px;color: #fff;background: #19a97b90;display: inline-block;vertical-align: top;font-size: 13px;line-height: 26px;min-width: 35px;height: 26px;}// 上一页禁用:deep(.btn-prev:disabled) {border: none;cursor: not-allowed;border-radius: 0px;padding: 0 5px;margin: 0 5px;color: #fff;background: #19a97b90;display: inline-block;vertical-align: top;font-size: 13px;line-height: 26px;height: 26px;}// 下一页禁用:deep(.btn-next:disabled) {border: none;cursor: not-allowed;border-radius: 0px;padding: 0 5px;margin: 0 5px;color: #fff;background: #19a97b90;display: inline-block;vertical-align: top;font-size: 13px;line-height: 26px;height: 26px;}// 页码:deep(.el-pager) {padding: 0;margin: 0;display: inline-block;vertical-align: top;// 数字.number {cursor: pointer;padding: 0 4px;margin: 0 5px;color: #fff;display: inline-block;vertical-align: top;font-size: 13px;line-height: 26px;border-radius: 0px;background: #19a97b90;text-align: center;min-width: 30px;height: 26px;}// 数字悬浮.number:hover {cursor: pointer;padding: 0 4px;margin: 0 5px;color: #fff;display: inline-block;vertical-align: top;font-size: 13px;line-height: 26px;border-radius: 0px;background: #11a274;text-align: center;min-width: 30px;height: 26px;}// 选中.number.is-active {cursor: default;padding: 0 4px;margin: 0 5px;color: #fff;display: inline-block;vertical-align: top;font-size: 13px;line-height: 26px;border-radius: 0px;background: #11a274;text-align: center;min-width: 30px;height: 26px;}}// sizes:deep(.el-pagination__sizes) {display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;height: 28px;.el-select {border: 1px solid #DCDFE6;cursor: pointer;padding: 0;color: #606266;display: inline-block;font-size: 13px;line-height: 28px;border-radius: 3px;outline: 0;background: #FFF;width: 100%;text-align: center;height: 28px;}}// 跳页:deep(.el-pagination__jump) {margin: 0 0 0 24px;color: #606266;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;height: 28px;// 输入框.el-input {border: 1px solid #DCDFE6;cursor: pointer;padding: 0 3px;color: #606266;display: inline-block;font-size: 14px;line-height: 28px;border-radius: 3px;outline: 0;background: #FFF;width: 100%;text-align: center;height: 28px;//去掉默认样式.el-input__wrapper{border: none;box-shadow: none;background: none;border-radius: 0;height: 100%;padding: 0;}.is-focus {box-shadow: none !important;}}}}
</style>

所用技术
后端技术栈：

Springboot
mybatisPlus
Mysql
Maven
前端技术栈：

Vue3
Vue-router
axios
elementPlus
微信小程序
三、环境介绍
基础环境 :IDEA, JDK1.8, Mysql5.7及以上, Maven3.6, node14, navicat,微信开发者工具

所有项目以及源代码本人均调试运行无问题 可支持远程调试运行
五、浏览地址
用户账号密码：用户账号1/123456

后台地址：http://localhost:8081

管理员账户密码：admin/admin

六、部署教程
使用Navicat或者其它工具，在mysql中创建对应名称的数据库，并执行项目的sql文件

使用IDEA/Eclipse导入server_code项目，若为maven项目请选择maven，等待依赖下载完成
  
修改application.yml里面的数据库配置,src/main/java/com/SpringbootSchemaApplication.java启动后端项目

vscode或idea打开manage_code后台项目
 
在编译器中打开terminal，执行npm install 依赖下载完成后执行 npm run serve,执行成功后会显示访问地址

微信小程序打开wechat_code项目，编译好之后就运行成功了

大家点赞、收藏、关注、评论啦  其他的定制服务  下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作