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

博主介绍：专注于Java（springboot ssm springcloud等开发框架） vue .net php phython node.js uniapp小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟

我的博客空间发布了1000+毕设题目 方便大家学习使用

感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人

更多项目地址 介绍 翰文编程-CSDN博客

系统实现预览

第4章　系统设计

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

4.1　系统基本结构设计

本次系统采用springboot框架进行开发，springboot框架是一款企业界主流的软件开发技术，其简化了开发流程，大大缩减了软件开发所需的时间提高了软件的响应速度。系统总体结构图如图4-1所示。

图4-1　系统总体结构图

4.2　数据库设计

数据库结构设计的好坏直接影响到在线考试系统的效率和实现的效果。本系统的数据库采用MySQL数据库，MySQL是一种开放源代码的关系型数据库管理系统，使用最常见的数据库管理语言SQL进行数据库管理。

4.2.1　数据库E-R图设计

E-R图也可称为实体-联系图，其可以清楚的显示实体与实体之间的关系，是描述概念模型的有效方式，通过各实体间的关系方便数据库结构的设计。以下是本系统主要的实体属性图如下所示。

考试信息E-R图如图4-2所示。

图4-2考试信息E-R图

考场信息E-R图如图4-3所示。

图4-3考场信息E-R图

教师信息E-R图如图4-4所示。

图4-4教师信息E-R图

学生信息E-R图如图4-5所示。

图4-5学生信息E-R图

在线考试系统总体E-R图如图4-6所示。

图4-6在线考试系统总体E-R图

4.2.2 数据库表设计

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

表4-1菜单

|----------|-----------|------------|------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| menujson | longtext | 4294967295 | 菜单 | | |

表4-2：考试信息

|-----------------|-----------|-----|------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| kaoshimingcheng | varchar | 200 | 考试名称 | | |
| kaoshikemu | varchar | 200 | 考试科目 | | |
| kaoshishijian | datetime | | 考试时间 | | |
| kaoshinianji | varchar | 200 | 考试年级 | | |

表4-3：考场信息

|----------------|-----------|-----|------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| kaochanghao | varchar | 200 | 考场号 | | |
| kaochangrenshu | varchar | 200 | 考场人数 | | |
| changci | varchar | 200 | 场次 | | |
| jiankaolaoshi | varchar | 200 | 监考老师 | | |

表4-4：教师

|-----------------|-----------|------------|------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| jiaoshigonghao | varchar | 200 | 教师工号 | | |
| jiaoshimima | varchar | 200 | 教师密码 | | |
| jiaoshixingming | varchar | 200 | 教师姓名 | | |
| xingbie | varchar | 200 | 性别 | | |
| tupian | longtext | 4294967295 | 图片 | | |
| lianxifangshi | varchar | 200 | 联系方式 | | |

表4-5：配置文件

|-------|---------|-----|--------|----|-----|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| name | varchar | 100 | 配置参数名称 | | |
| value | varchar | 100 | 配置参数值 | | |

表4-6：成绩信息

|------------------|-----------|-----|------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| shijuanmingcheng | varchar | 200 | 试卷名称 | | |
| xuehao | varchar | 200 | 学号 | | |
| xueshengxingming | varchar | 200 | 学生姓名 | | |
| banji | varchar | 200 | 班级 | | |
| kaoshichengji | int | | 考试成绩 | | |

表4-7：token表

|---------------|-----------|-----|------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| userid | bigint | | 用户id | | |
| username | varchar | 100 | 用户名 | | |
| tablename | varchar | 100 | 表名 | | |
| role | varchar | 100 | 角色 | | |
| token | varchar | 200 | 密码 | | |
| addtime | timestamp | | 新增时间 | | CURRENT_TIMESTAMP |
| expiratedtime | timestamp | | 过期时间 | | CURRENT_TIMESTAMP |

表4-8：公告资讯

|--------------|-----------|------------|------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| title | varchar | 200 | 标题 | | |
| introduction | longtext | 4294967295 | 简介 | | |
| picture | longtext | 4294967295 | 图片 | | |
| content | longtext | 4294967295 | 内容 | | |

表4-9：考试记录

|--------------|-----------|------------|------------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| username | varchar | 200 | 用户名 | | |
| paperid | bigint | | 试卷id（外键） | | |
| papername | varchar | 200 | 试卷名称 | | |
| questionid | bigint | | 试题id（外键） | | |
| questionname | varchar | 200 | 试题名称 | | |
| options | longtext | 4294967295 | 选项，json字符串 | | |
| score | bigint | | 分值 | | |
| answer | varchar | 200 | 正确答案 | | |
| analysis | longtext | 4294967295 | 答案解析 | | |
| myscore | bigint | | 试题得分 | | |
| myanswer | varchar | 200 | 考生答案 | | |
| userid | bigint | | 用户id | | |

表4-10：试题管理

|--------------|-----------|------------|--------------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| paperid | bigint | | 试卷id（外键） | | |
| papername | varchar | 200 | 试卷名称 | | |
| questionname | varchar | 200 | 试题名称 | | |
| options | longtext | 4294967295 | 选项，json字符串 | | |
| score | bigint | | 分值 | | |
| answer | varchar | 200 | 正确答案 | | |
| analysis | longtext | 4294967295 | 答案解析 | | |
| type | bigint | | 试题类型 | | |
| sequence | bigint | | 试题排序，值越大排越前面 | | |

表4-11：试卷管理

|---------|-----------|-----|----------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| name | varchar | 200 | 试卷名称 | | |
| time | int | | 考试时长(分钟) | | |
| status | varchar | 200 | 试卷状态 | | |

表4-12：学生

|-------------------|-----------|------------|-------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| xuehao | varchar | 200 | 学号 | | |
| mima | varchar | 200 | 密码 | | |
| xueshengxingming | varchar | 200 | 学生姓名 | | |
| touxiang | longtext | 4294967295 | 头像 | | |
| xingbie | varchar | 200 | 性别 | | |
| banji | varchar | 200 | 班级 | | |
| lianxifangshi | varchar | 200 | 联系方式 | | |
| shenfenzhenghaoma | varchar | 200 | 身份证号码 | | |

表4-13：管理员

|----------|-----------|-----|------|----|-------------------|
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | | 主键 | 主键 | |
| addtime | timestamp | | 创建时间 | | CURRENT_TIMESTAMP |
| username | varchar | 200 | 用户名 | | |
| password | varchar | 200 | 密码 | | |
| role | varchar | 200 | 角色 | | |

4.3　本章小结

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

第5章　系统实现

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

5. 1前台学生 功能实现

当游客打开系统的网址后，首先看到的就是首页界面。在这里，游客能够看到在线考试系统的导航条显示首页、考试信息、考场信息、公告资讯、个人中心等。系统首页界面如图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. 2后台 管理员功能 模块实现

管理员登录，在登录页面选择需要登录的角色，在正确输入用户名和密码后，点击登录操作；如图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-table
				v-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 = true
		let 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 = false
			list.value = res.data.data.list
			total.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 = size
		getList()
	}
	const currentChange = (page) => {
		listQuery.value.page = page
		getList()
	}
	const prevClick = () => {
		listQuery.value.page = listQuery.value.page - 1
		getList()
	}
	const nextClick = () => {
		listQuery.value.page = listQuery.value.page + 1
		getList()
	}
	//分页
	//权限验证
	const btnAuth = (e,a)=>{
		return context?.$toolUtil.isAuth(e,a)
	}
	//搜索
	const searchClick = () => {
		listQuery.value.page = 1
		getList()
	}
	//表单
	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 = objectUrl
			a.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项目，编译好之后就运行成功了

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