常州网站排名优化,设计网络营销方案,微信拼团小程序怎么做,在线电子印章生成器博主介绍#xff1a;专注于Java#xff08;springboot ssm springcloud等开发框架#xff09; vue .net php phython node.js uniapp小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设#xff0c;从业十五余年开发设计教学工作☆☆☆ 精彩专栏推荐订阅☆☆☆☆… 博主介绍专注于Javaspringboot 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考场信息管理界面图
主要代码 templatedivdiv classapp-containdiv classlist_search_viewel-form :modelsearchQuery classsearch_form div classsearch_viewdiv classsearch_label考场号/divdiv classsearch_boxel-input classsearch_inp v-modelsearchQuery.kaochanghao placeholder考场号clearable/el-input/div/divdiv classsearch_viewdiv classsearch_label场次/divdiv classsearch_boxel-input classsearch_inp v-modelsearchQuery.changci placeholder场次clearable/el-input/div/divdiv classsearch_btn_viewel-button classsearch_btn typeprimary clicksearchClick() sizesmall搜索/el-button/div/el-formbrdiv classbtn_viewel-button typesuccess clickaddClick v-ifbtnAuth(kaochangxinxi,新增)新增/el-buttonel-button v-if btnAuth(kaochangxinxi,查看) typeinfo :disabledselRows.length1?false:true clickinfoClick(null)详情/el-buttonel-button typeprimary :disabledselRows.length1?false:true clickeditClick v-if btnAuth(kaochangxinxi,修改)修改/el-buttonel-button typedanger :disabledselRows.length?false:true clickdelClick(null) v-ifbtnAuth(kaochangxinxi,删除)删除/el-button/div/divbrel-tablev-loadinglistLoadingborder :stripetrueselection-changehandleSelectionChange reftablev-ifbtnAuth(kaochangxinxi,查看):datalistrow-clicklistChangeel-table-column :resizabletrue alignleft header-alignleft typeselection width55 /el-table-column label序号 width70 :resizabletrue :sortabletrue alignleft header-alignlefttemplate #defaultscope{{ scope.$index 1}}/template/el-table-columnel-table-column:resizabletrue :sortabletrue alignleft header-alignleftlabel考场号template #defaultscope{{scope.row.kaochanghao}}/template/el-table-columnel-table-column:resizabletrue :sortabletrue alignleft header-alignleftlabel考场人数template #defaultscope{{scope.row.kaochangrenshu}}/template/el-table-columnel-table-column:resizabletrue :sortabletrue alignleft header-alignleftlabel场次template #defaultscope{{scope.row.changci}}/template/el-table-columnel-table-column:resizabletrue :sortabletrue alignleft header-alignleftlabel监考老师template #defaultscope{{scope.row.jiankaolaoshi}}/template/el-table-columnel-table-column label操作 width300 :resizabletrue :sortabletrue alignleft header-alignlefttemplate #defaultscopeel-button typeinfo v-if btnAuth(kaochangxinxi,查看) clickinfoClick(scope.row.id)详情/el-button/template/el-table-column/el-tableel-pagination background:layoutlayouts.join(,):totaltotal :page-sizelistQuery.limitprev-text上一页next-text下一页:hide-on-single-pagefalse:style{padding:0,margin:20px 0 0,whiteSpace:nowrap,color:#333,textAlign:center,width:100%,fontWeight:500}size-changesizeChangecurrent-changecurrentChange prev-clickprevClicknext-clicknextClick //divformModel refformRef formModelChangeformModelChange/formModel/div
/template
script setupimport axios from axiosimport {reactive,ref,getCurrentInstance,nextTick,onMounted,watch,} from vueimport {useRoute,useRouter} from vue-routerimport {ElMessageBox} from element-plusconst context getCurrentInstance()?.appContext.config.globalProperties;import formModel from ./formModel.vue//基础信息const tableName kaochangxinxiconst 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] idparams[order] descif(searchQuery.value.kaochanghaosearchQuery.value.kaochanghao!){params[kaochanghao] % searchQuery.value.kaochanghao %}if(searchQuery.value.changcisearchQuery.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 (idnull){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).length1 ? 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;chartsetUTF-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 langscss 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项目编译好之后就运行成功了 大家点赞、收藏、关注、评论啦 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作
