基于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项目，编译好之后就运行成功了