基于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-7token表

字段名称

类型

长度

字段说明

主键

默认值

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/439675.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于元神操作系统实现NTFS文件操作(六)

1. 背景 本文主要介绍$Root元文件属性的解析。先介绍元文件各属性的属性体构成&#xff0c;然后结合读取到的元文件内容&#xff0c;对测试磁盘中目标分区的根目录进行展示。 2. $Root元文件属性的解析 使用每个属性头偏移0x04-0x07处的值可以从第一个属性开始依次定位下一个…

一款基于 Java 的可视化 HTTP API 接口快速开发框架,干掉 CRUD,效率爆炸(带私活源码)

平常我们经常需要编写 API&#xff0c;但其实常常只是一些简单的增删改查&#xff0c;写这些代码非常枯燥无趣。 今天给大家带来的是一款基于 Java 的可视化 HTTP API 接口快速开发框架&#xff0c;通过 UI 界面编写接口&#xff0c;无需定义 Controller、Service、Dao 等 Jav…

在线教育的未来:SpringBoot技术实现

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理微服务在线教育系统的相关信息成为必然。开…

【可答疑】基于51单片机的PWM控制智能台灯设计(含仿真、代码、报告、演示视频等)

✨哈喽大家好&#xff0c;这里是每天一杯冰美式oh&#xff0c;985电子本硕&#xff0c;大厂嵌入式在职0.3年&#xff0c;业余时间做做单片机小项目&#xff0c;有需要也可以提供就业指导&#xff08;免费&#xff09;~ &#x1f431;‍&#x1f409;这是51单片机毕业设计100篇…

什么软件能指定usb端口禁用?五款电脑USB端口禁用软件!(热门分享)

什么软件能指定usb端口禁用&#xff1f; USB端口&#xff0c;作为电脑与外部设备连接的重要接口&#xff0c;其安全性日益受到企业的重视。 为了有效防止数据泄露和未经授权的设备接入&#xff0c;指定USB端口禁用成为了许多企业的迫切需求。 本文&#xff0c;将介绍五款热门…

MySQL 用户管理

一.用户信息 MySQL中的用户&#xff0c;都存储在系统数据库mysql的user表中。 host&#xff1a; 表示这个用户可以从哪个主机登陆&#xff0c;如果是localhost&#xff0c;表示只能从本机登陆user&#xff1a; 用户名authentication_string&#xff1a; 用户密码通过password函…

Python | Leetcode Python题解之第457题环形数组是否存在循环

题目&#xff1a; 题解&#xff1a; class Solution:def circularArrayLoop(self, nums: List[int]) -> bool:n len(nums)def next(cur: int) -> int:return (cur nums[cur]) % n # 保证返回值在 [0,n) 中for i, num in enumerate(nums):if num 0:continueslow, fas…

中小企业做网站需要考虑哪些因素?

中小企业在建设网站时&#xff0c;需要考虑的因素有很多。以下是一些主要考虑因素的介绍&#xff1a; 明确建站目的&#xff1a;中小企业需要明确自己建立网站的目的。是为了展示企业形象、推广产品&#xff0c;还是提供客户服务&#xff1f;不同的目的将决定网站的设计和功能…

MOELoRA —— 多任务医学应用中的参数高效微调方法

人工智能咨询培训老师叶梓 转载标明出处 在医疗场景中&#xff0c;LLMs可以应用于多种不同的任务&#xff0c;如医生推荐、诊断预测、药物推荐、医学实体识别、临床报告生成等。这些任务的输入和输出差异很大&#xff0c;给统一模型的微调带来了挑战。而且LLMs的参数众多&…

微信朋友圈实况照片需要注意隐私

微信朋友圈现在可以发实况了。 一直不怎么发朋友圈&#xff0c;就这几天发现朋友圈可以发实况照片了。 实况照片可让用户在声音和动作丰富的互动体验中捕捉美好瞬间&#xff0c;为传统的静态照片增添活力感。 当实况照片可用时&#xff0c;“相机” App 可在用户拍照之前和之…

服务器数据恢复—raid磁盘故障导致数据库文件损坏的数据恢复案例

服务器存储数据恢复环境&故障&#xff1a; 存储中有一组由3块SAS硬盘组建的raid。上层win server操作系统层面划分了3个分区&#xff0c;数据库存放在D分区&#xff0c;备份存放在E分区。 RAID中一块硬盘的指示灯亮红色&#xff0c;D分区无法识别&#xff1b;E分区可识别&a…

Pytorch基础:网络层

文章目录 1.卷积层-Convolution Layers1.1 1d/2d/3d卷积1.2卷积--nn.Conv2d1.3转置卷积(实现上采样) 2.池化层3.线性层—Linear Layer4.激活函数层—Activate Layer 1.卷积层-Convolution Layers 卷积运算:卷积运算在输入信号(图像)上滑动,相应位置上进行乘加. 卷积核:又称过滤…

开源AI智能名片链动2+1模式S2B2C商城小程序的内容营销易读性策略

摘要&#xff1a;在数字化时代&#xff0c;内容营销已成为企业吸引用户、促进转化的关键手段。然而&#xff0c;面对“懒”这一普遍的人性弱点&#xff0c;如何使内容更加易读、减少用户思考负担&#xff0c;成为提升营销效果的重要议题。本文基于“别让我思考”的可用性设计原…

Jupyter Notebook 更换主题

1、安装 Jupyter 主题 pip install jupyterthemes 2、更新 Jupyter 主题 &#xff08;可选&#xff09; pip install --upgrade jupyterthemes 3、查看可用的 Jupyter 主题 jt -l 4、更换 Jupyter 主题 选择你喜欢的主题后&#xff0c;可以使用以下命令来应用它。更换主题后…

html+css+js实现step进度条效果

实现效果 代码实现 HTML部分 <div class"box"><ul class"step"><li class"circle actives ">1</li><li class"circle">2</li><li class"circle">3</li><li class&quo…

MySQL 表的操作

温馨提示&#xff1a;非特殊情况不要修改和删除表 创建表 第一种方式 第二种方式 第三种方式 简单查看 查看表 查询当前数据库&#xff1a;select database(); 查询当前数据库中具有的表&#xff1a;show tables; 查看表的简略信息&#xff1a;desc 表名1&#xff1b; 查看表的…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-05

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-04 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-04目录1. LLM-Augmented Symbolic Reinforcement Learning with Landmark-Based Task Decomposition摘要研究背景问题与挑战如何…

Junit和枚举ENUM

断言机制&#xff0c;JAVA中的断言机制是一种用于检查程序中某个条件是否为真的机制。它可以在程序运行时检查某个条件是否满足&#xff0c;如果不满足则会抛出AssertionError异常。 在java中,断言机制默认是关闭的。所以会输出u。 断言机制只是为了用来吃调试程序的&#xff0…

Windows 11将新增基于AI的搜索、生成式填充和其它AI功能

微软正在扩展 Windows 11 的内置 AI 功能列表&#xff0c;增加了几项新功能&#xff0c;例如由 AI 支持的 Windows 搜索、“Click to Do”、生成填充和擦除以及照片中的超级分辨率等功能。 Click to Do 在您按下 Windows 键并单击鼠标时触发。 它可以扫描屏幕上显示的内容&…

【复习】JS中的数据类型

文章目录 数据类型UndefinedNullBooleanNumberStringSymbolBigIntObjectArrayFunctionDateRegExp 数据类型 其实就两种&#xff0c;原始数据类型&#xff08;Primitive Types&#xff09;和引用数据类型&#xff08;Reference Types&#xff09; JS将数据分为七种数据类型&…