1403.vue
<template><div class="error-page"><div class="error-code">4<span>0</span>3</div><div class="error-desc">啊哦~ 你没有权限访问该页面哦</div><div class="error-handle"><router-link to="/"><el-button type="primary" size="large">返回首页</el-button></router-link><el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button></div></div>
</template><script>
export default {methods: {goBack(){this.$router.go(-1);}}
}
</script><style scoped>.error-page{display: flex;justify-content: center;align-items: center;flex-direction: column;width: 100%;height: 100%;background: #f3f3f3;box-sizing: border-box;}.error-code{line-height: 1;font-size: 250px;font-weight: bolder;color: #f02d2d;}.error-code span{color: #00a854;}.error-desc{font-size: 30px;color: #777;}.error-handle{margin-top: 30px;padding-bottom: 200px;}.error-btn{margin-left: 100px;}
</style>
2 404.vue
<template><div class="error-page"><div class="error-code">4<span>0</span>4</div><div class="error-desc">啊哦~ 你所访问的页面还未开发</div><div class="error-handle"><router-link to="/"><el-button type="primary" size="large">返回首页</el-button></router-link><el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button></div></div>
</template><script>
export default {methods: {goBack(){this.$router.go(-1);}}
}
</script><style scoped>.error-page{display: flex;justify-content: center;align-items: center;flex-direction: column;width: 100%;height: 100%;background: #f3f3f3;box-sizing: border-box;}.error-code{line-height: 1;font-size: 250px;font-weight: bolder;color: #2d8cf0;}.error-code span{color: #00a854;}.error-desc{font-size: 30px;color: #777;}.error-handle{margin-top: 30px;padding-bottom: 200px;}.error-btn{margin-left: 100px;}
</style>
3collect.vue
<template><div><div class="crumbs"><el-breadcrumb separator="/"><el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 错题管理</el-breadcrumb-item></el-breadcrumb></div><div class="container"><div class="handle-box"><el-input class="handle-input mr10" v-model="query.realName" placeholder="请输入答错人"></el-input>
<!-- <el-input class="handle-input mr10" v-model="query.content" placeholder="请输入错题"></el-input>--><el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="getCollectInfo">查询</el-button><el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button></div><el-table:data="tableData"borderclass="table"ref="multipleTable"header-cell-class-name="table-header"><el-table-column width="66" type="index" label="序号" align="center"></el-table-column><el-table-column prop="realName" label="答错人" align="center"></el-table-column><el-table-column prop="content" label="错题" align="center"></el-table-column><el-table-column prop="createTime" label="收藏时间" align="center"></el-table-column><el-table-column label="操作" width="280" align="center"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"@click="editCollectInfo(scope.row)">详情</el-button><el-buttontype="primary"icon="el-icon-delete"@click="deleteCollectInfo(scope.row)">删除</el-button></template></el-table-column></el-table><div class="pagination"><el-paginationbackgroundlayout="total, prev, pager, next":current-page="query.pageNum":page-size="query.pageSize":total="pageTotal"@current-change="handlePageChange"></el-pagination></div></div><!-- 添加弹出框 --><el-dialog title="错题信息" :modal="false" :visible.sync="addVisible" width="33%" :before-close="clearAddForm"><div class="ListCnt"><ul class="fm2"><li ><a>{{info.content}}？ {{info.type === '1'?'单选题':info.type === '2'?'多选题':info.type === '3'?'判断题':'解答题'}}<!-- 当是单选或者多选时 --><el-checkbox-group v-model="info.correctAnswers" v-if="info.type ==='1' || info.type === '2'"><div><div style="display: inline-flex"><el-checkbox label="A" disabled></el-checkbox><div style="width: 100px;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerOne}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="B" disabled></el-checkbox><div style="width: 100px;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerTwo}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="C" disabled></el-checkbox><div style="width: 100px;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerThree}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="D" disabled></el-checkbox><div style="width: 100px;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerFour}}</div></div></div></el-checkbox-group><el-checkbox-group v-model="answerList" v-if="info.type ==='3'"><div><div style="display: inline-flex"><el-checkbox label="正确" disabled></el-checkbox><div style="width: 100px;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerOne}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="错误" disabled></el-checkbox><div style="width: 100px;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerTwo}}</div></div></div></el-checkbox-group><div v-if="info.type === '4'"><div>{{info.content}}</div><el-input v-model="form.realAnswer" disabled></el-input></div><div>正确答案 {{info.realAnswer}}</div></a></li></ul></div></el-dialog></div>
</template><script>import {delCollectInfo, getCollectList, saveAndUpdateCollectInfo} from '../../api/user';export default {name: 'Collect',data() {return {active:"2",query: {pageNum:1,pageSize:10,realName:null,content:null,userId:sessionStorage.getItem('userId'),},tableData:[],addVisible: false,addVisible2:false,form:{},pageTotal: 0,answerList:[],info:{}};},created() {this.getData();},methods: {// 获取所有数组(支持分页和关键字查询)getData() {getCollectList(this.query).then(res => {if (res.code === 1){this.tableData = res.data.list;this.pageTotal = res.data.total;}else {console.log('异常');}});},//单个删除deleteCollectInfo(row){this.$confirm('确定要删除所选择的吗？', '提示', {type: 'warning'}).then(action => {if (action === 'confirm') {if (row.userType=== '1'){this.$message.warning('管理员用户无法删除');}else {this.form.id = row.id;delCollectInfo(this.form.id).then(res=>{if (res.code === 1){this.$message.success('删除成功');this.getData();}else {this.$message.error('删除失败');}})}}}).catch(() => {});},//编辑editCollectInfo(row){this.info = {...JSON.parse(JSON.stringify(row)),// 假设正确答案是以逗号分隔的字符串，如 "A,B"correctAnswers: row.realAnswer ? row.realAnswer.split(",") : []};this.addVisible = true;},lookStep(row){this.active = row.step;this.addVisible2 = true;},//重置reset(){this.query.realName= null;this.query.content= null;this.getData();},getCollectInfo(){this.getData();},//添加用户信息addCollectInfo(){this.form = {};this.form.userId = sessionStorage.getItem("userId");this.form.isBlack = "1";this.addVisible = true;},saveAndUpdateCollectInfo(){this.form.userType = '2';this.form.teacherId = sessionStorage.getItem('userId');saveAndUpdateCollectInfo(this.form).then(res =>{if (res.code === 1){this.getData();this.$message.success('操作成功');this.addVisible = false;}else {this.$message.error('操作失败')}})},clearAddForm(){this.addVisible = false;this.addVisible2 = false;},// 分页导航handlePageChange(val) {this.$set(this.query, 'pageNum', val);this.getData();},}};
</script><style scoped>.handle-box {margin-top: 20px;margin-bottom: 10px;}.handle-input {width: 300px;display: inline-block;}.table {width: 100%;font-size: 14px;}.crop-demo-btn{position: relative;width: 98px;height: 32px;line-height: 32px;padding: 0 15px;background-color: #409eff;color: #fff;font-size: 12px;border-radius: 4px;box-sizing: border-box;}.crop-input{position: absolute;width: 98px;height: 32px;left: 0;top: 0;opacity: 0;cursor: pointer;} .ListCnt ul {border-bottom: 1px solid #EBEBEB;display: block;width: 100%;margin: 15px 0 0 0;}.ListCnt ul {margin: 20px 0 0 0;padding: 0;display: block;width: 100%;}ul {margin: 0px;padding: 0px;list-style-type: none;}ul {display: block;list-style-type: disc;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;padding-inline-start: 40px;}.ListCnt ul li {display: block;color: #000;line-height: 280%;padding: 12px;margin: 0;border-top: 1px solid #EBEBEB;background: #FFF;display: inline-block;color: #555;width: 96%;font-family: "arial","Microsoft Yahei";}li {display: list-info;text-align: -webkit-match-parent;}.ListCnt ul li i {display: block;width: 50px;float: left;text-align: center;}i, em {font-style: normal;}.ListCnt ul li a {display: block;float: left;width: 720px;padding: 0;color: #333;font-size: 14px;font-family: "arial","Microsoft Yahei";}</style>
4dashboard.vue
<template><div class="action_body"> <div class="cards_space"><div class="theme_space">用户信息 </div><el-row :gutter="20" ><el-col :span="8"><div class="grid-content bg-purple card theme2 cards_tm" @click="dialogVisible1 = true">管理员权限作用意义</div><el-dialogtitle=" ":visible.sync="dialogVisible1"width="1200px"style="margin-left:190px":before-close="handleClose"><div style="height: 600px;"><img src="../../assets/img/bg1.webp" alt="背景图一下" width="1160px" height="300px" style="background-position: center;"><h2>管理员权限</h2><h3>在一个基于SpringBoot+Vue的考试管理系统中，管理员权限是系统功能和数据管理的核心。管理员拥有最高级别的访问权限，能够完全控制和配置系统中的各项功能。这包括用户账户的创建、编辑和删除，题库的管理，选题和成绩的审核及发布。管理员还能够访问和修改系统设置，保证系统的稳定运行和数据安全。</h3> <h2>管理员作用</h2><h3>管理员在考试管理系统中扮演着关键角色。他们确保系统的顺畅运行，通过对用户和权限的管理来维护考试的公正性和有效性。管理员通过对题库的精心策划和管理，保证考试内容的质量和多样性。此外，管理员对选题和成绩的监控，确保了评估过程的公正性和透明度，帮助教育机构准确评估学生的学习进展。</h3><h2>管理员意义</h2><h3>管理员权限在考试管理系统中的重要意义不仅仅体现在系统运行的技术层面。更重要的是，它对于维护教育公平、保证考试质量和提升教学效果起着至关重要的作用。管理员的有效管理能够提高系统的整体效率，减少错误和作弊的可能性，从而帮助教育机构更好地完成教育任务，提升学生的学习体验和成果。此外，良好的系统管理还能提高数据的准确性和安全性，对于遵守教育政策和法律法规具有重要意义。</h3></div></el-dialog></el-col><el-col :span="8"><div class="grid-content bg-purple card theme2 cards_tm" @click="dialogVisible2 = true">教师权限作用意义</div><el-dialogtitle=" ":visible.sync="dialogVisible2"width="1200px"style="margin-left:190px":before-close="handleClose"><div style="height: 600px;"><img src="../../assets/img/bg1.webp" alt="背景图一下" width="1160px" height="300px" style="background-position: center;"><h2>教师权限</h2><h3>教师权限是考试管理系统中非常重要的一部分。在您的系统中，教师拥有用户管理、题库管理、选题管理、成绩管理以及学生家长管理等多项权限。这些权限允许教师对学生的学习过程进行全方位的监督和管理。例如，通过题库管理，教师可以设计和调整考试题目，以适应学生的学习水平；通过成绩管理，教师可以追踪学生的学习进度和成绩变化，及时进行教学调整。</h3> <h2>教师作用</h2><h3>教师的这些权限在教学管理和学生评估中起到关键作用。通过这些工具，教师能够更有效地组织教学内容，确保教学质量。例如，选题管理功能帮助教师根据课程目标和学生的实际情况选择最合适的考试题目；学生家长管理则使教师能够与家长更好地沟通，共同关注学生的学习进度和问题。</h3><h2>教师意义</h2><h3>教师权限在促进教育公平、提高教学质量和学生学习效果方面具有重大意义。通过这些权限，教师不仅能更好地管理和评估学生的学习，还能及时发现和解决教学中的问题，从而提升教学效果。此外，这些功能还有助于建立家校之间的桥梁，使家长能够更加深入地了解孩子的学习情况，共同促进学生的全面发展。</h3></div></el-dialog></el-col><el-col :span="8"><div class="grid-content bg-purple card theme2 cards_tm" @click="dialogVisible3 = true">学生权限作用意义 </div><el-dialogtitle=" ":visible.sync="dialogVisible3"width="1200px"style="margin-left:190px":before-close="handleClose"><div style="height: 600px;"><img src="../../assets/img/bg1.webp" alt="背景图一下" width="1160px" height="300px" style="background-position: center;"><h2>学生权限</h2><h3>在这个考试管理系统中，学生用户被授予了诸如访问题库、查看成绩、管理错题集以及与家长沟通的权限。这些权限允许学生在系统中自主学习，同时保持对学习过程的全面控制。通过这些功能，学生可以有效地利用资源，自我评估学习成效，并及时调整学习策略。</h3> <h2>学生作用</h2><h3>学生权限在考试管理系统中发挥着至关重要的作用。首先，它使学生能够根据自己的学习进度和需求，灵活地访问和利用题库资源。其次，成绩管理功能帮助学生跟踪自己的学习进展，从而更好地准备考试。错题管理功能则允许学生识别和专注于他们的薄弱领域。最后，与家长的互动机制增强了家庭与学校之间的沟通，有助于共同促进学生的学术成长。</h3><h2>学生意义</h2><h3>授予学生这些权限的意义在于促进学生的自主学习和自我管理能力。这不仅有助于提高学习效率和效果，还培养了学生的责任感和自律性，这对他们未来的教育和职业生涯都是非常重要的。此外，系统提供的家长管理功能还强化了家校合作，共同关注和支持学生的全面发展，这对于学生的长期成长和发展至关重要。</h3></div></el-dialog></el-col></el-row><div class="theme_space">功能介绍 </div><el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple card2 theme2 cards_tm" @click="dialogVisible4 = true" ><div class="card2_1" >用户管理作用意义</div></div><el-dialogtitle=" ":visible.sync="dialogVisible4"width="1200px"style="margin-left:190px":before-close="handleClose"><div style="height: 600px;"><img src="../../assets/img/bg1.webp" alt="背景图一下" width="1160px" height="300px" style="background-position: center;"><h2>用户管理</h2><h3>在考试管理系统中，用户管理是一个核心功能，它涉及到对不同类型用户（如学生、教师和管理员）的注册、登录、信息维护和权限控制。通过有效的用户管理，系统能够确保每个用户都能在其权限范围内安全、高效地访问和操作所需数据。例如，教师可以创建和管理考试内容，学生可以参加考试并查看成绩，管理员则能够监控整个系统的运行并进行必要的调整。</h3> <h2>用户管理作用</h2><h3>用户管理系统的主要作用是保障考试流程的顺畅和数据的安全性。它通过分配不同的访问权限，确保用户只能访问对其工作或学习相关的信息。此外，它还负责跟踪用户活动，以便在出现问题时进行追踪和审计。例如，学生在考试过程中的作答行为可以被记录下来，以防作弊行为的发生。</h3><h2>用户管理意义</h2><h3>用户管理在考试管理系统中的意义重大。首先，它提高了系统的效率和可用性，使得不同角色的用户都能够在一个统一的平台上高效地完成各自的任务。其次，它通过确保数据安全和用户行为的透明性，增强了考试的公平性和可信度。最后，良好的用户管理也有助于提升用户体验，使得系统更加人性化，易于使用。</h3></div></el-dialog></el-col><el-col :span="8"><div class="grid-content bg-purple card2 theme2 cards_tm" @click="dialogVisible5 = true" ><div class="card2_1" >题库管理作用意义</div></div><el-dialogtitle=" ":visible.sync="dialogVisible5"width="1200px"style="margin-left:190px":before-close="handleClose"><div style="height: 600px;"><img src="../../assets/img/bg1.webp" alt="背景图一下" width="1160px" height="300px" style="background-position: center;"><h2>题库管理</h2><h3>题库管理是指在考试管理系统中，对各类试题进行收集、整理、存储和更新的过程。这个模块通常包括试题的添加、编辑、分类和难度分级等功能。题库作为考试系统的核心部分，它的完善程度和质量直接影响到整个考试系统的有效性和权威性。</h3> <h2>题库管理作用</h2><h3>题库管理的主要作用是提供一个结构化、系统化的平台，用于高效地处理大量的试题数据。它使得试题的组织和检索变得更加方便和快捷。通过对试题进行合理分类和标签化，能够极大地提高出题和组卷的效率，同时也方便了试题的复用和更新。此外，题库管理还可以支持不同难度和类型的试题，满足各种考试形式和教学需求。</h3><h2>题库管理意义</h2><h3>在教育和评估领域，题库管理承担着重要的作用。它不仅提高了教师和考试管理员的工作效率，还保证了考试的公正性和科学性。通过精确的题库管理，可以确保试题的多样性和覆盖面，使得考试更加全面地评估学生的学习情况。此外，良好的题库管理还对提升学生的学习兴趣和成效具有积极作用，有助于促进教育质量的整体提升。</h3></div></el-dialog></el-col><el-col :span="8"><div class="grid-content bg-purple card2 theme2 cards_tm" @click="dialogVisible6 = true" ><div class="card2_1" >考试管理作用意义</div></div><el-dialogtitle=" ":visible.sync="dialogVisible6"width="1200px"style="margin-left:190px":before-close="handleClose"><div style="height: 600px;"><img src="../../assets/img/bg1.webp" alt="背景图一下" width="1160px" height="300px" style="background-position: center;"><h2>考试管理</h2><h3>考试管理系统是一套集考试组织、试卷管理、在线考试、成绩分析与反馈等功能于一体的软件平台。它利用先进的信息技术，实现了从试题的录入、试卷的自动组卷，到考试的监控、成绩的评定与分析的整个过程的数字化和自动化。这样的系统在学校、培训机构以及企业培训部门中广泛应用，极大提升了考试的效率和质量。</h3> <h2>题库管理作用</h2><h3>考试管理系统的主要作用是提高考试的组织和实施效率，减轻教师和考务人员的工作负担。系统支持多种题型的在线考试和自动阅卷，能够迅速准确地完成成绩统计和分析，为教育教学提供科学的数据支持。此外，它还能有效防止考试过程中的作弊行为，确保考试的公正性。对于学习者来说，这种系统提供了便捷的在线考试和即时反馈，有利于提升学习效率。</h3><h2>题库管理意义</h2><h3>在教育信息化的背景下，考试管理系统代表了教育评估方式的现代化转变。它不仅优化了考试流程，降低了人力成本，还提高了考试的公平性和科学性。通过数据分析功能，教师和教育管理者可以更准确地把握学生的学习情况，对教学方法和内容进行及时调整。此外，系统的引入也促进了教育评价体系的创新，有助于培养适应现代社会需求的人才。</h3></div></el-dialog></el-col></el-row><div class="theme_space">关于我们</div><el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple card3 theme2 cards_tm" @click="dialogVisible7 = true" >公司简介</div><el-dialogtitle=" ":visible.sync="dialogVisible7"width="1200px"style="margin-left:190px":before-close="handleClose"><div style="height: 600px;"><img src="../../assets/img/bg1.webp" alt="背景图一下" width="1160px" height="300px" style="background-position: center;"><h2>公司起源</h2><h3>Zac软件公司，位于科技创新的前沿，专注于开发高效、可靠的软件解决方案。我们致力于为全球客户提供包括考试管理系统在内的多样化软件产品。公司自成立以来，始终保持技术领先，追求卓越，力求在变革的IT领域中稳步前行。通过不断的技术革新和服务优化，Zac软件公司已经成为业界的佼佼者，赢得了广泛的认可和信赖。</h3> <h2>价值观</h2><h3>在Zac软件公司，我们坚持以客户为中心，追求卓越品质。我们相信，创新是推动公司持续发展的核心动力。诚信与责任感是我们团队成员的基本素质，我们通过团队合作实现个人和企业的共同成长。每一项决策和行动，我们都秉持着对客户、员工和社会负责的态度，确保在快速发展的同时，持续为各方带来长远价值。</h3><h2>企业文化</h2><h3>我们的企业文化建立在尊重、包容和创新的基础上。Zac软件公司提供一个充满活力、开放且多元化的工作环境，鼓励员工发挥创造力，拓展个人职业道路。我们注重员工的个人发展和职业成长，提供多样化的培训和学习机会。同时，我们倡导健康的工作生活平衡，认为这是员工幸福和公司长期成功的关键。在Zac软件公司，每个人都是价值创造的重要一环，共同塑造着一个充满激情、创新和协作的企业氛围。</h3></div></el-dialog></el-col><el-col :span="8"><div class="grid-content bg-purple card3 theme2 cards_tm" @click="dialogVisible8 = true" >历史版本</div><el-dialogtitle=" ":visible.sync="dialogVisible8"width="1200px"style="margin-left:190px":before-close="handleClose"><div style="height: 600px;"><img src="../../assets/img/bg1.webp" alt="背景图一下" width="1160px" height="300px" style="background-position: center;"><h2>历史版本回顾</h2><h3>在早期版本的考试管理系统中，我们实现了基础的功能，如在线考试、题库管理和成绩统计。这些功能为用户提供了一个基本的在线考试环境，但在用户体验和系统性能方面还存在一些不足。例如，界面设计较为简单，对于题目类型的支持不够全面，且在大规模考试场景下的性能有待提升。</h3> <h2>功能不足的总结</h2><h3>通过用户反馈和系统使用情况分析，我们发现了几个关键的不足之处。首先，系统的稳定性和扩展性需要加强，尤其在处理高并发时的性能问题。其次，用户界面不够直观和友好，需要优化用户的交互体验。此外，对于题库的管理和考试数据分析功能较为基础，缺乏深入的个性化设置和智能化分析。</h3><h2>当前版本改进</h2><h3>针对之前版本的不足，我们在最新版本中做出了显著的改进。首先，我们优化了后端架构，提高了系统的稳定性和处理高并发的能力。在前端，我们重新设计了用户界面，使其更加现代化和易于操作。同时，增加了对多种题目类型的支持，并引入了智能化的题库管理和考试数据分析功能，使得老师和学生都能获得更为丰富和精准的考试体验。此外，我们还加强了系统的安全性，确保考试数据的安全和隐私。</h3></div></el-dialog></el-col><el-col :span="8"><div class="grid-content bg-purple card4 theme2 cards_tm" @click="dialogVisible9 = true"><div class="img"></div><h1 class="theme2">个人介绍</h1><p><a href="http://www.baidu.com" target="_blank"><i class="el-icon-search" style="font-size: 26px;"></i></a ><a href="https://gitee.com/xu-ax" target="_blank"><i class="el-icon-star-on" style="font-size: 32px;padding-left: 17px;"></i></a><a href="https://blog.csdn.net/weixin_52479647" target="_blank"><i class="el-icon-notebook-2" style="font-size: 26px;padding-left: 17px;"></i></a></p></div><el-dialogtitle=" ":visible.sync="dialogVisible9"width="1200px"style="margin-left:190px":before-close="handleClose"><div style="height: 600px;"><img src="../../assets/img/bg1.webp" alt="背景图一下" width="1160px" height="300px" style="background-position: center;"><h2>个人介绍</h2><h3>我是一名专注于SpringBoot和Vue技术栈的全栈开发工程师，拥有丰富的项目开发经验。我的专长包括构建高效、可靠的后端服务以及打造直观、用户友好的前端界面。目前，我正在致力于开发一个先进的考试管理系统，旨在提高教育行业的管理效率和质量。我对新技术充满好奇心，并不断追求技术上的创新和提升。</h3> <h2>我的Gitee</h2><h3>Gitee地址：<a href="https://gitee.com/xu-ax" target="_blank">我的Gitee主页</a><br>Gitee是一个基于Git的代码托管和协同开发平台，主要服务于中国的开发者。在我的Gitee主页上，您可以找到我所有公开的项目代码，包括考试管理系统的源代码。这个平台不仅让我能够管理和存储代码，还方便与其他开发者进行协作和交流，共同推动项目的成长。</h3><h2>CSDN地址及作用</h2><h3>CSDN地址：<a href="https://blog.csdn.net/weixin_52479647" target="_blank">我的CSDN主页</a><br>CSDN是中国最大的IT社区和服务平台，提供IT相关的技术文章、博客等内容。在我的CSDN博客中，我定期分享关于SpringBoot、Vue以及全栈开发的技术文章，包括一些编程技巧、最佳实践和项目开发的心得体会。这个平台不仅帮助我记录和总结自己的学习经历，也让我能够与更广泛的技术社区进行交流和学习。</h3></div></el-dialog></el-col></el-row></div></div>
</template><script>export default {name: 'dashboard',data() {return {dialogVisible1: false,dialogVisible2: false,dialogVisible3: false,dialogVisible4: false,dialogVisible5: false,dialogVisible6: false,dialogVisible7: false,dialogVisible8: false,dialogVisible9: false,};},methods: {handleClose(done) {done();}}};
</script><style scoped>
.action_body{background-image: url(../../assets/img/bg2.webp);position: relative;width: 100%;height: 100%;background-size: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;
}.theme2{font-size: 1rem;font-weight: 700;
}.theme_space{margin-bottom: 19px;margin-left: -61px;width: 5rem;height: 1.75rem;font-size: 1.25rem;font-weight: 700;line-height: 1.75rem;color: #f51616b9; /* 字体颜色 */opacity: 1;font-style: italic; /* 添加斜体 */text-decoration: underline #27f8ff; }.cards_space{margin-left: 80px;}
.cards_tm{opacity: 0.7;
}.el-row {margin-bottom: 20px;}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}/* 精美样式 */.card {width: 370px;height: 200px;background-color: #ffffff;border-radius: 4px;transition: all 0.4s ease-in;box-shadow: 6px 6px 12px #f8f5c2,-6px -6px 12px #f09191;
}.card:hover {transform: translateY(-1rem);border: #ff073cf0 0.8px solid;border-radius: 0 0 0 1;
}/* From www.lingdaima.com */
.card2 {width: 370px;height: 200px;padding-left: 7px;background-color: #ffffff;border-radius: 16px;transition: all .3s;box-shadow: 12px 12px 2px 1px rgba(157, 255, 206, 0.4);
}.card2_1 {background-color: rgba(255, 255, 255, 0.2);border-radius:1;transition: all .2s;
}.card2_1:hover {transform: scale(0.99);border-radius: 20px;
}.card2:hover {box-shadow: 0px 0px 30px 1px rgba(255, 1, 43, 0.8);
}.card3 {cursor: pointer;width: 370px;height: 200px;background: rgb(255, 255, 255);border-radius: 5px;border: 1px solid rgba(0, 0, 255, .2);transition: all .2s;box-shadow: 12px 12px 2px 1px rgba(0, 238, 255, 0.4);
}.card3:hover {box-shadow: -12px 12px 2px -1px rgba(255, 0, 106, 0.2);
}.card4 {
cursor: pointer;border-radius: 5px;transition: all .2s;width: 370px;height: 200px;background: #ffffff;border-radius: 5px;text-align: center;color: #000000;font-family: inherit;z-index: 1;box-shadow: 12px 12px 2px 1px rgba(0, 238, 255, 0.4);
}.img {display: flex;margin: 1px auto 1px auto;width: 65px;height: 65px;border: 2px solid #ff0022;border-radius: 50%;font-size: 11px;justify-content: center;align-items: center;transition: all 0.5s;z-index: 9;background-image: url(../../assets/img/3.jpg);background-size: cover;background-position-x: center;
}p {opacity: 0;transition: all 0.5s;
}h1 {padding: 10px;font-weight: 500;font-size: 18px;
}.card4:hover .img {transform: scale(1);border: 2px solid #02eeff;
}.card4:hover h1,
.card4:hover p {opacity: 1;}
.card4:hover{box-shadow: -12px 12px 2px -1px rgba(255, 0, 106, 0.2);
}
.icon{cursor: pointer;background-color: #000000;
}a {color: rgb(89, 89, 241); /* 链接颜色 */text-decoration: underline; /* 下划线 */font-style: italic;font-size: 15px;
}/* 可以选择设置不同状态的颜色 */a:visited {color: rgb(89, 89, 241); /* 已访问链接的颜色 */
}a:active {color: red; /* 链接激活（被点击）时的颜色 */
}</style>
5examreview.vue
<template><div><h2>试卷回顾</h2><div v-for="(item, index) in reviewData" :key="index"><p>题目 {{ index + 1 }}: {{ item.question }}</p><p>你的答案: {{ item.myAnswer }}</p><p>正确答案: {{ item.correctAnswer }}</p> <!-- 如果你想展示的话 --><p>得分: {{ item.score }}</p></div><h3>总分: {{ totalScore }}</h3><button @click="goBack">返回</button></div></template><script>export default {data() {return {reviewData: [], // 从考试页面传来的答题详情totalScore: 0 // 从考试页面传来的总分};},methods: {goBack() {// 返回到主界面或考试列表this.$router.push({ path: '/home' }); // 举例}},created() {if (this.$route.params.reviewData) {this.reviewData = this.$route.params.reviewData;this.totalScore = this.$route.params.totalScore;}}};</script>6login.vue
<template><div class="login-wrap"><div class="ms-login"><!-- <div><img width="300px" height="250px" src="https://s1.aigei.com/src/img/gif/7a/7a572e5a19fe4682be45ab84f6264473.gif?imageView2/2/w/260&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:YW8Wh7Smfmm0j8wPib5SOd6NxJY=" alt="Your GIF"></div> --><div class="ms-title">基于SpringBoot+Vue的考试系统登录页面<!-- <img width="20px" height="15px" src="https://s1.aigei.com/src/img/gif/7a/7a572e5a19fe4682be45ab84f6264473.gif?imageView2/2/w/260&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:YW8Wh7Smfmm0j8wPib5SOd6NxJY=" alt="Your GIF">--></div><el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content"><el-form-item prop="userName" class="login_input"><el-input v-model="param.userName" placeholder="请输入用户名" @keyup.enter.native="submitForm()"><el-button slot="prepend" icon="el-icon-lx-people"></el-button></el-input></el-form-item><el-form-item prop="password" class="login_input"><el-inputtype="password"placeholder="请输入密码"v-model="param.password"@keyup.enter.native="submitForm()"><el-button slot="prepend" icon="el-icon-lx-lock"></el-button></el-input></el-form-item><div class="login-btn" style="display: inline-flex"><el-button class="btn" type="primary" style="width: 120px ; height: 43px;margin-left: 50px;" @click="submitForm()">登录</el-button><el-button class="btn" type="primary" style="width: 120px; height: 43px;margin-left: 50px;" @click="register()">注册</el-button></div></el-form></div></div>
</template><script>import { Login, saveAndUpdateUserInfo } from '../../api/user';export default {data: function() {return {param: { //要和后端方法接收的参数一致userName: '',password: '',},form:{},rules: {userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 5, max: 10, message: '长度在 5到 10 个字符' }],userType: [{ required: true, message: '请选择用户类型', trigger: 'blur' }],},addVisible:false,};},methods: {submitForm() {this.$refs.login.validate(valid => {if (valid) {Login(this.param).then(res =>{if (res.code === 1){sessionStorage.setItem("userStatus","1");sessionStorage.setItem("userId",res.data.id);sessionStorage.setItem("userType",res.data.userType)this.$message.success('登录成功');sessionStorage.setItem("realName",res.data.realName);// if (res.data.userType === '1' || res.data.userType === '0'){// this.$router.push('/user');// }else{sessionStorage.setItem('teacherId',res.data.teacherId)// this.$router.push('/test');// }this.$router.push('/');}else{this.$message.error('登录失败')}})} else {this.$message.error('请输入账号和密码');return false;}});},register(){sessionStorage.setItem('userStatus',"11");this.$router.push('/register')},clearAddForm(){this.addVisible = false;},saveAndUpdateUserInfo(){this.form.userType = '1';saveAndUpdateUserInfo(this.form).then(res =>{if (res.code === 1){this.$message.success('注册成功');this.addVisible = false;}else {this.$message.error('注册失败')}})},},
};
</script><style scoped>.ms-login /deep/ .el-input__inner {height: 40px !important;line-height: 40px !important;
}.login-wrap {position: relative;width: 100%;height: 100%;background-image: url(../../assets/img/bg4.webp);background-size: 100%;/* 设置背景图的尺寸为cover，保持宽高比例并覆盖整个容器 */background-size: cover;/* 设置背景图的位置为居中 */background-position: center;/* 不要平铺背景图 */background-repeat: no-repeat;}
.ms-title {font-family: 'Your Custom Font', sans-serif;font-size: 2.5em;width: 100%;line-height: 50px;font-size: 20px;border-bottom: 1px solid #ddd;font-weight: bold;/* background-color: #3498db; */color: #464343;padding: 10px 0px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);border-radius: 5px;text-align: center;background-color: rgba(114, 201, 207, 0.3); /* 蓝色背景，透明度为 0.3 */}
.ms-login {position: absolute;left: 47%;top: 50%;width: 450px;height: 350px;margin: -190px 0 0 -175px;border-radius: 5px;background: rgba(255, 255, 255, 0.3);overflow: hidden;box-shadow: 6px 6px 12px #72eef7,-6px -6px 12px #f09191;}
.login_input{width: 350px; /* 宽度 */height: 50px; /* 高度 */line-height: 150px;border: 0px solid #ace488; /* 边框样式 */border-radius: 4px; /* 边框圆角 */padding: 1px 1px; /* 内边距 */font-size: 14px; /* 字体大小 */color: #333; /* 字体颜色 */margin-top: 2px; /* 与下一个元素的间距 */margin-left: 10px; /* 输入框向左移动 */
}
.ms-content {padding: 30px 30px;
}
.login-btn {text-align: center;
}
.login-btn button {width: 100%;height: 36px;margin-bottom: 10px;
}
.login-tips {font-size: 12px;line-height: 30px;color: #fff;
}/* 精美CSS */
/* From www.lingdaima.com */
.btn {background:rgba(255, 255, 255, 0.8);border: none;padding: 1rem;font-size: 1rem;width: 10em;border-radius: 1rem;color: rgb(0, 0, 0, 0.8);font-weight: bold;box-shadow: 6px 6px 12px #56f4ff,-6px -6px 12px #e68d8d;cursor: pointer;}.btn:active {color: white;box-shadow: 0 0.2rem #dfd9d9;transform: translateY(0.2rem);
}.btn:hover:not(:disabled) {background: lightcoral;color: white;text-shadow: 0 0.1rem #bcb4b4;
}.btn:disabled {cursor: auto;color: grey;
}</style>
7parent.vue
<template><div><div class="container"><div class="handle-box"><el-input clearable style="margin-right: 20px;" class="handle-input mr10" v-model="query.name" placeholder="请输入关键字查询"@keyup.enter.native="getUserInfo"></el-input><el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="getUserInfo">查询</el-button><el-button type="primary" icon="el-icon-refresh" @click="reset">清空</el-button></div><div class="handle-box" style="display: inline-flex;"><el-button style="margin-bottom: 10px"v-if="userType == '1'"type="primary"icon="el-icon-plus"class="handle-del mr10"@click="addParentInfo">新增</el-button></div><el-table:data="tableData"borderclass="table"ref="multipleTable"header-cell-class-name="table-header"><el-table-column width="66" type="index" label="序号" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="sex" label="性别" align="center"></el-table-column><el-table-column prop="age" label="年龄" align="center"></el-table-column><el-table-column prop="job" label="职业" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center"></el-table-column><el-table-column prop="phone" label="手机号" align="center"></el-table-column><el-table-column prop="studentName" label="所属学生" align="center"></el-table-column><el-table-column label="操作" width="280" align="center" v-if="userType !== '2'"><template slot-scope="scope"><el-buttonv-if="userType == '1'"type="primary"icon="el-icon-edit"@click="editParentInfo(scope.row)">修改</el-button><el-buttontype="primary"icon="el-icon-delete"@click="deleteParentInfo(scope.row)">删除</el-button></template></el-table-column></el-table><div class="pagination"><el-paginationbackgroundlayout="total, prev, pager, next":current-page="query.pageNum":page-size="query.pageSize":total="pageTotal"@current-change="handlePageChange"></el-pagination></div></div><!-- 模态框，用于新增和编辑 --><el-dialog :visible.sync="addVisible" title="父母信息" width="580px" @close="closeDialog"><el-form :model="form" ref="formData" :rules="rules"><el-form-item label="姓名" prop="name" style="margin-left: 100px;"><el-input style="width: 60%;margin-left: 15px;" v-model="form.name"></el-input></el-form-item><el-form-item label="手机号" prop="phone" style="margin-left: 100px;"><el-input style="width: 60%; " v-model="form.phone"></el-input></el-form-item><el-form-item label="性别" prop="sex" style="margin-left: 106px;" ><el-radio-group v-model="form.sex"><el-radio label="男">男</el-radio><el-radio label="女">女</el-radio></el-radio-group></el-form-item><el-form-item label="年龄" prop="age" style="margin-left: 100px;"><el-input-number v-model="form.age" :min="0" max="99"></el-input-number></el-form-item><el-form-item label="地址" prop="address" style="margin-left: 100px;"><el-input style="width: 60%;" v-model="form.address"></el-input></el-form-item><el-form-item label="职业" prop="job" style="margin-left: 100px;"><el-input style="width: 60%;" v-model="form.job"></el-input></el-form-item></el-form><div slot="footer"><el-button @click="addVisible = false">取消</el-button><el-button type="primary" @click="saveOrUpdateParentInfo">保存</el-button></div></el-dialog></div>
</template><script>import {getParentList, saveAndUpdateParentInfo, delParentInfo} from '../../api/parent';export default {name: 'Parent',data() {return {userType: sessionStorage.getItem("userType"),addVisible:false,query: {pageNum: 1,pageSize: 10,name: null},tableData: [],pageTotal: 0,form: {},rules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],phone: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],address: [{ required: true, message: '请输入地址', trigger: 'blur' }],job: [{ required: true, message: '请输入职业', trigger: 'blur' }]}};},created() {this.getParentData();},methods: {getParentData() {const userType = sessionStorage.getItem("userType");const userId = sessionStorage.getItem("userId");// 构建请求参数const params = {pageNum: this.query.pageNum,pageSize: this.query.pageSize,name: this.query.name};// 如果是学生用户，添加 userId 条件if (userType === '2') {params.userId = userId;}getParentList(params).then(res => {if (res.code === 1) {this.tableData = res.data.list;this.pageTotal = res.data.total;} else {console.log('异常');}});},saveOrUpdateParentInfo() {this.$refs.formData.validate((valid) => {if (valid) {saveAndUpdateParentInfo(this.form).then(res => {if (res.code === 1) {this.$message.success('操作成功');this.addVisible = false;this.getParentData();} else {this.$message.error('操作失败');}});} else {return false; // 表单校验不通过时，阻止后续操作}});},closeDialog() {this.addVisible = false;this.$nextTick(() => {this.$refs.formData.resetFields(); // 重置表单字段和清除校验信息});},deleteParentInfo(row) {this.$confirm('确定要删除所选择的吗？', '提示', {type: 'warning'}).then(() => {delParentInfo(row.id).then(res => {if (res.code === 1) {this.$message.success('删除成功');this.getParentData();} else {this.$message.error('删除失败');}});}).catch(() => {});},reset(){this.query.name = null;this.getParentData();},getUserInfo(){this.query.pageNum = 1;this.getParentData();},addParentInfo(){this.clearAddForm();this.addVisible = true;},editParentInfo(row){this.form = JSON.parse(JSON.stringify(row));this.addVisible = true;},clearAddForm(){this.form = {};},handlePageChange(val) {this.$set(this.query, 'pageNum', val);this.getParentData();}}};
</script><style scoped>
.handle-input {width: 300px;display: inline-block;}.handle-box {margin-top: 20px;margin-bottom: 10px;}
</style>8question2.vue
<template><div><div class="container"><div class="handle-box"><el-input class="handle-input mr10" v-model="query.content" placeholder="请输入题目"></el-input><el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="getSubjectInfo">查询</el-button><el-button type="primary" icon="el-icon-refresh" @click="reset">清空</el-button></div><div class="handle-box" style="display: inline-flex;" ><el-button style="margin-bottom: 10px" v-if="userType !=='0'"type="primary"icon="el-icon-plus"class="handle-del mr10"@click="addSubjectInfo">新增题目</el-button><el-button style="margin-bottom: 10px" v-if="userType !=='0'"type="primary"icon="el-icon-plus"class="handle-del mr10"@click="addTest">加入题库</el-button><el-button style="margin-bottom: 10px" type="danger"icon="el-icon-delete"class="handle-del mr10"@click="batchDelete">批量删除</el-button></div><el-table:data="tableData"borderclass="table"ref="multipleTable"header-cell-class-name="table-header"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-column type="index" label="序号" width="66px" align="center"></el-table-column><el-table-column prop="content" label="题目内容" align="center"></el-table-column><el-table-column prop="score" label="题目分数" align="center"></el-table-column><el-table-column prop="type" label="题目类型" align="center"><template slot-scope="scope"><span v-if="scope.row.type === '1'">单选题</span><span v-if="scope.row.type === '2'">多选题</span><span v-if="scope.row.type === '3'">判断题</span><span v-if="scope.row.type === '4'">解答题</span></template></el-table-column><el-table-column prop="createTime" label="添加时间" align="center"></el-table-column><el-table-column label="操作" width="280" align="center"><template slot-scope="scope"><el-buttonv-if="userType !=='0'"type="primary"icon="el-icon-edit"@click="editSubjectInfo(scope.row)">修改</el-button><el-buttontype="primary"icon="el-icon-delete"@click="deleteSubjectInfo(scope.row)">删除</el-button></template></el-table-column></el-table><div class="pagination"><el-paginationbackgroundlayout="total, prev, pager, next":current-page="query.pageNum":page-size="query.pageSize":total="pageTotal"@current-change="handlePageChange"></el-pagination></div></div><!-- 添加弹出框 --><el-dialog title="题目信息" :modal="false" :visible.sync="addVisible" width="33%" :before-close="clearAddForm"><el-form label-position="left" ref="addSubjectForm" :rules="addSubjectForm" label-width="80px" :model="form" ><el-form-item label="题目内容" prop="content"><el-input v-model="form.content"></el-input></el-form-item><el-form-item label="题目分数" prop="score"><el-input v-model="form.score"></el-input></el-form-item><el-form-item label="题目类型" prop="type"><el-select v-model="form.type" placeholder="请选择题目类型"><el-option value="1" label="单选题" ></el-option><el-option value="2" label="多选题" ></el-option><el-option value="3" label="判断题" ></el-option><el-option value="4" label="解答题" ></el-option></el-select></el-form-item><el-form-item label="答案" v-if="form.type === '3'"><el-radio v-model="form.realAnswer" label="正确">正确</el-radio><el-radio v-model="form.realAnswer" label="错误">错误</el-radio></el-form-item><el-form-item label="答案" v-if="form.type === '4'"><el-input v-model="form.realAnswer"></el-input></el-form-item><el-form-item label="答案" v-if="form.type === '1'"><el-checkbox-group v-model="answerList" :max="1" :min="0"><div style="display: inline-flex"><el-checkbox label="A"></el-checkbox><el-input v-model="form.answerOne" style="margin-left: 10px"> </el-input></div><div style="display: inline-flex"><el-checkbox label="B"></el-checkbox><el-input v-model="form.answerTwo" style="margin-left: 10px"> </el-input></div><div style="display: inline-flex"><el-checkbox label="C"></el-checkbox><el-input v-model="form.answerThree" style="margin-left: 10px"></el-input></div><div style="display: inline-flex"><el-checkbox label="D"></el-checkbox><el-input v-model="form.answerFour" style="margin-left: 10px"> </el-input></div></el-checkbox-group></el-form-item><el-form-item label="答案" v-if="form.type === '2'"><el-checkbox-group v-model="answerList"><div style="display: inline-flex"><el-checkbox label="A"></el-checkbox><el-input v-model="form.answerOne" style="margin-left: 10px"> </el-input></div><div style="display: inline-flex"><el-checkbox label="B"></el-checkbox><el-input v-model="form.answerTwo" style="margin-left: 10px"> </el-input></div><div style="display: inline-flex"><el-checkbox label="C"></el-checkbox><el-input v-model="form.answerThree" style="margin-left: 10px"></el-input></div><div style="display: inline-flex"><el-checkbox label="D"></el-checkbox><el-input v-model="form.answerFour" style="margin-left: 10px"> </el-input></div></el-checkbox-group></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="clearAddForm">取 消</el-button><el-button type="primary" @click="saveAndUpdateSubjectInfo">确 定</el-button></span></el-dialog><el-dialog title="题库" :modal="false" :visible.sync="addVisible2" width="33%" :before-close="clearAddForm"><el-form label-position="left" ref="addTestForm" :rules="addTestForm" label-width="80px" :model="form" ><el-form-item label="选择题库" prop="id"><el-select v-model="form.id" placeholder="请选择题库"><el-option v-for="(item,index) in options" :value="item.id" :label="item.name" :key="index" ></el-option></el-select></el-form-item><el-form-item label="题目"><div v-for="(item,index) in multipleSelection">{{index+1}} {{item.content}}</div></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="clearAddForm">取 消</el-button><el-button type="primary" @click="saveAndUpdateTestInfo">确 定</el-button></span></el-dialog></div>
</template><script>import {delSubjectInfo,getSubjectList,getTestList,saveAndUpdateSubjectInfo,saveAndUpdateTestInfo, saveAndUpdateTsInfo} from '../../api/user';import Test from './Test';export default {name: 'Subject',components: { Test },data() {return {active:"2",answerList:[],query: {pageNum:1,pageSize:10,},tableData:[],selectedRows: [], // 存储选中的行数据addVisible: false,addVisible2:false,form:{},pageTotal: 0,options:[],multipleSelection:[],addSubjectForm: {content: [{ required: true, message: '用户名不得为空', trigger: 'blur' }],score: [{ required: true, message: '分数不得为空', trigger: 'blur'}],type: [{ required: true, message: '类型不得为空', trigger: 'change' }],},addTestForm: {id: [{ required: true, message: '题库名不得为空', trigger: 'change' }],},};},created() {// 从sessionStorage中获取userType，并设置给userType变量this.userType = sessionStorage.getItem('userType');this.getData();},computed:{userType(){return sessionStorage.getItem('userType')}},activated() {// 当页面每次激活时，清空选中的行this.$refs.multipleTable.clearSelection();},methods: {// 获取所有数组(支持分页和关键字查询)getData() {getSubjectList(this.query).then(res => {if (res.code === 1){this.tableData = res.data.list;this.pageTotal = res.data.total;}else {console.log('异常');}});},handleSelectionChange(val){console.log(val)this.selectedRows = val;this.multipleSelection = val;},saveAndUpdateTestInfo(){this.$refs.addTestForm.validate((valid) =>{if(valid){//校验通过const arr = [];for (let i=0;i<this.multipleSelection.length;i++){arr.push(this.multipleSelection[i].id)}this.form.subjectIds = arr.join(",");saveAndUpdateTsInfo(this.form).then(res =>{if (res.code === 1){this.$message.success('操作成功');this.addVisible2 = false;}else {this.$message.error('操作失败')}})}else{//校验不通过this.$message.error('操作失败')return false;}})},addTest(){if (this.$refs.addTestForm) {this.$refs.addTestForm.resetFields(); // 重置表单验证状态}this.form = {}; // 重置表单数据getTestList({pageNum:1,pageSize:100, teacherId:sessionStorage.getItem('userId')}).then(res =>{this.options = res.data.list;});this.addVisible2 = true;},//单个删除deleteSubjectInfo(row){this.$confirm('确定要删除所选择的吗？', '提示', {type: 'warning'}).then(action => {if (action === 'confirm') {if (row.userType=== '1'){this.$message.warning('管理员用户无法删除');}else {this.form.id = row.id;delSubjectInfo(this.form.id).then(res=>{if (res.code === 1){this.$message.success('删除成功');this.getData();}else {this.$message.error('删除失败');}})}}}).catch(() => {});},//批量删除batchDelete() {if (this.selectedRows.length === 0) {this.$message.warning('请选择要删除的行');return;}this.$confirm('确定要删除所选择的项吗？', '提示', {type: 'warning'}).then(() => {const deletePromises = this.selectedRows.map(row => {return delSubjectInfo(row.id); // 假设 delSubjectInfo 是执行删除操作的方法});Promise.all(deletePromises).then(responses => {const failedDeletes = responses.filter(res => res.code !== 1);if (failedDeletes.length > 0) {this.$message.error('部分删除操作失败');} else {this.$message.success('全部删除成功');this.query.pageNum = 1;}this.getData(); // 重新获取数据this.selectedRows = []; // 清空选中项}).catch(error => {this.$message.error('删除过程中出现错误');});}).catch(() => {});},//编辑editSubjectInfo(row){this.form = JSON.parse(JSON.stringify(row));this.answerList = row.realAnswer.split(',');this.addVisible = true;},lookStep(row){this.active = row.step;this.addVisible2 = true;},//重置reset(){this.query. content= null;this.getData();},getSubjectInfo(){this.query.pageNum = 1; // 重置到第一页this.getData();},//添加题目信息addSubjectInfo(){if (this.$refs.addSubjectForm) {this.$refs.addSubjectForm.resetFields(); // 重置表单验证状态}if (this.$refs.addTestForm) {this.$refs.addTestForm.resetFields(); // 重置表单验证状态}this.form = {}; // 重置表单数据this.answerList = [];this.addVisible = true;},//新增选题的方法saveAndUpdateSubjectInfo(){this.$refs.addSubjectForm.validate((valid) => {if (valid) {//当多选的时候就会用,号拼接if (this.form.type !=='3' && this.form.type !=='4'){this.form.realAnswer = this.answerList.join(",");}saveAndUpdateSubjectInfo(this.form).then(res =>{if (res.code === 1){this.getData();this.$message.success('操作1成功');this.addVisible = false;}else {this.$message.error('操作失败')}});}else{this.$message.error('操作失败')return false;}});},clearAddForm(){if (this.$refs.addSubjectForm) {this.$refs.addSubjectForm.resetFields(); // 重置表单验证状态}if (this.$refs.addTestForm) {this.$refs.addTestForm.resetFields(); // 重置表单验证状态}this.form = {}; // 重置表单数据this.answerList = [];this.addVisible = false;this.addVisible2 = false;},// 分页导航handlePageChange(val) {this.$set(this.query, 'pageNum', val);this.getData();},}};
</script><style scoped>.handle-box {margin-top: 20px;margin-bottom: 10px;}.handle-input {width: 300px;display: inline-block;}.table {width: 100%;font-size: 14px;}.crop-demo-btn{position: relative;width: 98px;height: 32px;line-height: 32px;padding: 0 15px;background-color: #409eff;color: #fff;font-size: 12px;border-radius: 4px;box-sizing: border-box;}.crop-input{position: absolute;width: 98px;height: 32px;left: 0;top: 0;opacity: 0;cursor: pointer;}
</style>
9register.vue
<template><div class="login-wrap"><div class="ms-login"><div class="ms-title">基于SpringBoot+Vue的考试系统注册页面</div><el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content"><el-form-item prop="userName"><el-input v-model="param.userName" placeholder="请输入用户名"><el-button slot="prepend" icon="el-icon-lx-people"></el-button></el-input></el-form-item><el-form-item prop="password"><el-inputtype="password"placeholder="请输入密码"v-model="param.password"><el-button slot="prepend" icon="el-icon-lx-lock"></el-button></el-input></el-form-item><el-form-item prop="realName"><el-input v-model="param.realName" placeholder="请输入真实姓名"><el-button slot="prepend" icon="el-icon-s-custom"></el-button></el-input></el-form-item><el-form-item prop="address"><el-input v-model="param.address" placeholder="请输入地址"><el-button slot="prepend" icon="el-icon-map-location"></el-button></el-input></el-form-item><el-form-item prop="phone"><el-input v-model="param.phone" placeholder="请输入手机号"><el-button slot="prepend" icon="el-icon-mobile-phone"></el-button></el-input></el-form-item><div class="login-btn"><el-button class="btn" style="height: 45px;" @click="saveAndUpdateUserInfo">注册</el-button></div> </el-form></div></div>
</template><script>import { Login, saveAndUpdateUserInfo } from '../../api/user';
import SingleUpload from '../common/singleUpload';export default {components: { SingleUpload },data: function() {return {param: {username: '',password: '',},addVisible:false,form:{},rules: {userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }],realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],address: [{ required: true, message: '请输入地址', trigger: 'blur' }],phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],},code:'',};},methods: {saveAndUpdateUserInfo(){this.param.userType = '1';this.$refs.login.validate((valid) => {if (valid) {saveAndUpdateUserInfo(this.param).then(res =>{if (res.code === 1){this.$message.success('注册成功,现在可以去登录了');sessionStorage.setItem('userStatus',"111");setTimeout(() =>{this.$router.push('/login')},2000)}else {this.$message.error(res.msg)}})} else {this.$message.warning('请补全表单信息')return false;}});},createCode() {let code = '';//设置长度，这里看需求，我这里设置了4let codeLength = 5;//设置随机字符let random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);let random2 = ["a","b","c","d","e","f","g","h","i","j","k"];for (let i=0;i < 1;i++){let index = Math.floor(Math.random() * 9);//字符串拼接 将每次随机的字符 进行拼接code += random2[index];}for (let i = 0; i < codeLength; i++) {//设置随机数范围,这设置为0 ~ 36let index = Math.floor(Math.random() * 9);//字符串拼接 将每次随机的字符 进行拼接code += random[index];}//将拼接好的字符串赋值给展示的codethis.code = code;},},
};
</script><style scoped>.ms-login /deep/ .el-input__inner {height: 40px !important;line-height: 40px !important;
}.login-wrap {position: relative;width: 100%;height: 100%;background-image: url(../../assets/img/bg4.webp);background-size: 100%;/* 设置背景图的尺寸为cover，保持宽高比例并覆盖整个容器 */background-size: cover;/* 设置背景图的位置为居中 */background-position: center;/* 不要平铺背景图 */background-repeat: no-repeat;
}
.ms-title {font-family: 'Your Custom Font', sans-serif;font-size: 2.5em;width: 100%;line-height: 50px;font-size: 20px;border-bottom: 1px solid #ddd;font-weight: bold;/* background-color: #3498db; */color: #464343;padding: 10px 0px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);border-radius: 5px;text-align: center;background-color: rgba(114, 201, 207, 0.3); /* 蓝色背景，透明度为 0.3 */
}
.ms-login {position: absolute;left: 47%;top: 45%;width: 430px;height: 460px;margin: -190px 0 0 -175px;border-radius: 5px;background: rgba(255, 255, 255, 0.3);overflow: hidden;box-shadow: 6px 6px 12px #72eef7,-6px -6px 12px #f09191;
}
.ms-content {padding: 30px 30px;
}
.login-btn {text-align: center;}
.login-btn button {width: 100%;height: 36px;margin-bottom: 10px;
}
.login-tips {font-size: 12px;line-height: 30px;color: #fff;
}/* CSS精美样式 */
/* From www.lingdaima.com */
/* From www.lingdaima.com */
.btn {color: rgb(0, 0, 0, 0.8);font-weight: bold;width: 9em;height: 3em;border-radius: 30em;font-size: 15px;font-family: inherit;border: none;position: relative;overflow: hidden;z-index: 1;box-shadow: 6px 6px 12px #56f4ff,-6px -6px 12px #e68d8d;
}.btn::before {content: '';width: 0;height: 3em;border-radius: 30em;position: absolute;top: 0;left: 0;background-image: linear-gradient(to right, #4df2f8 20%, #db9b9b 80%);transition: .5s ease;display: block;z-index: -1;
}.btn:hover::before {width: 25em;
}
</style>
10report.vue
<template><div><div class="container"><div class="handle-box"><el-select v-model="query.userId" placeholder="请选择用户" clearable v-if="userType === '1'"><el-optionv-for="item in options":key="item.id":label="item.realName":value="item.id"></el-option></el-select><el-select v-model="query.testId" placeholder="请选择题库" clearable @change="getReportInfo"><el-optionv-for="item in options2":key="item.id":label="item.name":value="item.id"></el-option></el-select><el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="getReportInfo">查询</el-button><el-button type="primary" icon="el-icon-refresh" @click="reset">清空</el-button><el-button style="margin-bottom: 10px"type="primary"icon="el-icon-plus"class="handle-del mr10"@click="exportReport"v-if="userType === '1'">导出</el-button></div><el-table:data="tableData"borderclass="table"ref="multipleTable"header-cell-class-name="table-header"><el-table-column width="66" type="index" label="序号" align="center"></el-table-column><el-table-column prop="testName" label="题库" align="center"></el-table-column><el-table-column prop="realName" label="考生" align="center"></el-table-column><el-table-column prop="score" label="得分" align="center"></el-table-column><el-table-column label="操作" width="280" align="center"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"@click="reportDetail(scope.row)">详情</el-button><el-buttontype="primary"icon="el-icon-delete"v-if="userType === '1'"@click="deleteReportInfo(scope.row)">删除</el-button></template></el-table-column></el-table><div class="pagination"><el-paginationbackgroundlayout="total, prev, pager, next":current-page="query.pageNum":page-size="query.pageSize":total="pageTotal"@current-change="handlePageChange"></el-pagination></div></div><el-dialog title="题库信息" :modal="false" :visible.sync="addVisible" width="83%" :before-close="clearAddForm" style="margin-left: 210px;" ><div class="ListCnt" style="max-height: 500px; overflow-y: auto;"><ul class="fm2"><li v-for="(item,index) in data2"><i></i><a>{{item.content}}？ {{item.type === '1'?'单选题':item.type === '2'?'多选题':item.type==='3'?'判断题':'解答题'}}<el-checkbox-group v-model="item.studentAnswers" v-if="item.type ==='1' || item.type === '2'"><div><div style="display: inline-flex"><el-checkbox label="A" disabled></el-checkbox><div style="width: 100%px;height: 30px;font-size: 15px;margin-left: 10px">{{item.answerOne}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="B" disabled></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{item.answerTwo}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="C" disabled></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{item.answerThree}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="D" disabled></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{item.answerFour}}</div></div></div></el-checkbox-group><el-checkbox-group v-model="item.studentAnswers" v-if="item.type === '3'"><div><div style="display: inline-flex"><el-checkbox label="正确" :disabled="true"></el-checkbox></div></div><div><div style="display: inline-flex"><el-checkbox label="错误" :disabled="true"></el-checkbox></div></div></el-checkbox-group><div v-if="item.type === '4'"><el-input v-model="form.realAnswer" style="width: 400px" disabled></el-input></div><div>正确答案 {{item.realAnswer}}</div><div>学生答案 {{item.myAnswer}}</div><div style="display: inline-flex"><div v-if="item.isRight" style="color: green">正确</div><div v-else style="color: red">错误</div><div style="margin-left: 100px;margin-right: 230px;">共{{item.count}}人做错</div> 得分{{item.isRight === false?'0分':item.score}}</div></a></li><!-- <div>得分{{this.score}}</div> --></ul></div></el-dialog></div>
</template><script>import {delReportInfo,getReportList,saveAndUpdateReportInfo,exportReport, getMyExam, getUserList, getTestList} from '../../api/user';export default {name: 'Report',data() {return {active:"2",answerList:[],data2:[],query: {pageNum:1,pageSize:10,userId:null,testId:null,},options:[],options2:[],tableData:[],addVisible: false,addVisible2:false,form:{},pageTotal: 0,info:{},score:null,};},created() {this.getData();},computed:{userType(){return sessionStorage.getItem('userType')}},methods: {getData() {const userType = sessionStorage.getItem('userType');const userId = sessionStorage.getItem('userId');const teacherId = sessionStorage.getItem('teacherId');// 根据用户类型更新查询参数if (userType === '1') {// 教师：设置 teacherId，保留其它参数this.query.teacherId = userId;} else if (userType === '2') {// 学生：设置 userId，保留其它参数（如已通过下拉选择设置的 testId）this.query.userId = userId;this.query.teacherId = teacherId;} else if (userType === '0') {// 管理员：不设置特定用户的IDthis.query.teacherId = null;this.query.userId = null;}// 获取报告列表getReportList(this.query).then(res => {if (res.code === 1) {this.tableData = res.data.list;this.pageTotal = res.data.total;} else {console.log('异常');}});// 获取用户列表getUserList({teacherId: userType === '1' ? userId : teacherId}).then(res => {this.options = res.data.list;});// 获取题库列表getTestList({teacherId: userType === '0' ? null : (userType === '1' ? userId : teacherId), pageSize: 1000}).then(res => {this.options2 = res.data.list;});},reportDetail(row){getMyExam({testId:row.testId,userId:row.userId}).then(res =>{this.data2 = res.data.map(item => {return {...item,studentAnswers: item.myAnswer ? item.myAnswer.split(",") : []};});this.score = this.data2.reduce((total, currentItem) => {return total + (currentItem.isRight ? currentItem.score : 0);}, 0);});this.addVisible = true;},//单个删除deleteReportInfo(row){this.$confirm('确定要删除所选择的吗？', '提示', {type: 'warning'}).then(action => {if (action === 'confirm') {if (row.userType=== '1'){this.$message.warning('管理员用户无法删除');}else {this.form.id = row.id;delReportInfo(this.form.id).then(res=>{if (res.code === 1){this.$message.success('删除成功');this.getData();}else {this.$message.error('删除失败');}})}}}).catch(() => {});},//编辑editReportInfo(row){this.form = JSON.parse(JSON.stringify(row));this.addVisible = true;},lookStep(row){this.active = row.step;this.addVisible2 = true;},//重置reset(){this.query.testId= null;this.query.userId = null;this.getData();},getReportInfo(){this.getData();},exportReport(){const that = this;if (this.query.testId == null && this.query.userId !=null){this.$message.warning('请选择导出题库或导出人');return false;}exportReport(this.query).then(res => {that.downloadFile(res);this.$message.success('导出成功');}).catch(error => {this.$message.error('导出失败');});},downloadFile(data) {if (!data) {return;}let url = window.URL.createObjectURL(new Blob([data]));let link = document.createElement('a');link.style.display = 'none';link.href = url;link.setAttribute('download', '学生成绩表.xls');document.body.appendChild(link);link.click();URL.revokeObjectURL(link.href); // 释放URL 对象document.body.removeChild(link);},//添加用户信息addReportInfo(){this.form = {};this.form.userId = sessionStorage.getItem("userId");this.form.isBlack = "1";this.addVisible = true;},saveAndUpdateReportInfo(){saveAndUpdateReportInfo(this.form).then(res =>{if (res.code === 1){this.getData();this.$message.success('操作成功');this.addVisible = false;}else {this.$message.error('操作失败')}})},clearAddForm(){this.addVisible = false;this.addVisible2 = false;},// 分页导航handlePageChange(val) {this.$set(this.query, 'pageNum', val);this.getData();},startReport(row){sessionStorage.setItem('userStatus',"1");this.$router.push('/start/'+row.id)}}};
</script><style scoped>.handle-box {margin-top: 20px;margin-bottom: 10px;}.handle-input {width: 300px;display: inline-block;}.table {width: 100%;font-size: 14px;}.ListCnt ul {border-bottom: 1px solid #EBEBEB;display: block;width: 100%;margin: 15px 0 0 0;}.ListCnt ul {margin: 20px 0 0 0;padding: 0;display: block;width: 100%;}ul {margin: 0px;padding: 0px;list-style-type: none;}ul {display: block;list-style-type: disc;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;padding-inline-start: 40px;}.ListCnt ul li {display: block;color: #000;line-height: 280%;padding: 12px;margin: 0;border-top: 1px solid #EBEBEB;background: #FFF;display: inline-block;color: #555;width: 96%;font-family: "arial","Microsoft Yahei";}li {display: list-info;text-align: -webkit-match-parent;}.ListCnt ul li i {display: block;width: 50px;float: left;text-align: center;}i, em {font-style: normal;}.ListCnt ul li a {display: block;float: left;width: 720px;padding: 0;color: #333;font-size: 14px;font-family: "arial","Microsoft Yahei";}</style>
11startTest.vue
<template><div><div v-if="type === 1">剩余时间 {{this.times | timeFormat}}</div><div class="container"><div class="ListCnt" v-if="type === 1"><ul class="fm2"><li ><i>{{this.query.pageSize}}.</i><a>{{info.content}}？ {{info.type === '1'?'单选题':info.type === '2'?'多选题':info.type === '3'?'判断题':'解答题'}}<el-checkbox-group v-model="answerList" v-if="info.type ==='1'" :min="0":max="1"><div><div style="display: inline-flex"><el-checkbox label="A"></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerOne}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="B"></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerTwo}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="C"></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerThree}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="D"></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerFour}}</div></div></div></el-checkbox-group><el-checkbox-group v-model="answerList" v-if="info.type === '2'"><div><div style="display: inline-flex"><el-checkbox label="A"></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerOne}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="B"></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerTwo}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="C"></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerThree}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="D"></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerFour}}</div></div></div></el-checkbox-group><el-checkbox-group v-model="answerList" v-if="info.type ==='3'" :min="0":max="1"><div><div style="display: inline-flex"><el-checkbox label="正确"></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerOne}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="错误"></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{info.answerTwo}}</div></div></div></el-checkbox-group><div v-if="info.type === '4'"><div>{{info.content}}</div><el-input v-model="form.realAnswer"></el-input></div></a><el-button type="success" style="float: right" @click="nextSubject" v-if="this.total > this.query.pageSize">下一题</el-button><el-button type="success" style="float:right" @click="nextSubject2" v-if="this.query.pageSize !==1">上一题</el-button><el-button type="success" style="float: right" @click="handleExam" v-if="this.total === this.query.pageSize">交卷</el-button></li></ul></div><div class="ListCnt" v-if="type === 2"><el-button @click="toGrade" type="success">返回成绩页面</el-button><ul class="fm2"><li v-for="(item,index) in data2"><i></i><a>{{item.content}}？ {{item.type === '1'?'单选题':item.type === '2'?'多选题':item.type==='3'?'判断题':'解答题'}} 得分{{item.isRight === false?'0分':item.score}}<el-checkbox-group v-model="item.studentAnswers" v-if="item.type ==='1' || item.type === '2'"><div><div style="display: inline-flex"><el-checkbox label="A" disabled></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{item.answerOne}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="B" disabled></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{item.answerTwo}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="C" disabled></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{item.answerThree}}</div></div></div><div><div style="display: inline-flex"><el-checkbox label="D" disabled></el-checkbox><div style="width: 100%;height: 30px;font-size: 15px;margin-left: 10px">{{item.answerFour}}</div></div></div></el-checkbox-group><el-checkbox-group v-model="answerList" v-if="item.type === '3'"><div><div style="display: inline-flex"><el-checkbox label="正确"></el-checkbox></div></div><div><div style="display: inline-flex"><el-checkbox label="错误"></el-checkbox></div></div></el-checkbox-group><div v-if="item.type === '4'"><el-input v-model="form.realAnswer"></el-input></div><div>正确答案 {{item.realAnswer}}</div><div>学生答案 {{item.myAnswer}}</div><div v-if="item.isRight" style="color: green">正确</div><div v-else style="color: red">错误</div><el-button type="success" @click="addCollect(item.id)">收藏</el-button></a></li><div>得分{{this.score}}</div></ul></div></div></div>
</template><script>import {delTestInfo, getMyExam,getTestList,getTestSubject, getTsList, saveAndUpdateCollectInfo,saveAndUpdateExamInfo, saveAndUpdateReportInfo,saveAndUpdateTestInfo} from '../../api/user';export default {name: 'Test',data() {return {isSubmitting: false,count:0,query: {pageNum:1,pageSize:1,},arr:[],duration:0,data:[],info:{},addVisible: false,addVisible2:false,form:{realAnswer:null},pageTotal: 0,answerList:[],total:null,type:1,data2:[],score:0,times:null,timer:0};},watch: {times: function(newVal,oldVal){// console.log(newVal)if (newVal === this.count * 0.5){// alert("考试时间过半,请注意")this.$message.warning('考试时间已过半,请注意')}if (newVal === 0){// alert("考试时间已经结束");this.$message.warning('考试时间已经结束')for (let i=0;i<this.arr.length;i++){saveAndUpdateExamInfo(this.arr[i]).then(res =>{});}setTimeout(() =>{getMyExam({userId:sessionStorage.getItem('userId'),testId:this.$route.query.id}).then(res =>{this.data2 = res.data;for (let i=0;i<this.data2.length;i++){if (this.data2[i].isRight === true){console.log(this.data2[i].score)this.score = this.score + this.data2[i].score;}}});this.type = 2;setTimeout(() =>{saveAndUpdateReportInfo({userId:sessionStorage.getItem('userId'),testId:this.$route.query.id,score:this.score,teacherId:sessionStorage.getItem('teacherId')}).then(res =>{this.$router.push('/report')})},2000)},2000)}}},created() {this.getData(this.$route.query.id);},beforeRouteLeave(form,to,next) {console.log('离开')if (this.timer){clearInterval(this.timer);this.timer = null};next()},methods: {// 获取所有数组(支持分页和关键字查询)toGrade(){sessionStorage.setItem('userStatus','1')this.$router.push('/report')},getData(id) {this.query.id = id;getTestSubject(this.query).then(res =>{this.info =res.data;});getTsList({pageNum:1,pageSize: 100,testId:id}).then(res =>{this.total = res.data.list.length;});},get2(id) {this.query.id = id;getTestSubject(this.query).then(res => {this.info = res.data;// 加载当前题目的答案let existingAnswer = this.arr.find(item => item.subjectId === this.info.id);if (existingAnswer) {if (this.info.type !== '4') {this.answerList = existingAnswer.myAnswer.split(",");} else {this.form.realAnswer = existingAnswer.myAnswer;}} else {this.answerList = [];this.form.realAnswer = null;}});},getTime() {this.timer = setInterval(()=>{this.times--;if(this.times===0){clearInterval(this.timer)}},1000)},addCollect(id){saveAndUpdateCollectInfo({subjectId:id,userId:sessionStorage.getItem('userId')}).then(res =>{if (res.code === 1){this.$message.success('收藏成功')}else {this.$message.error(res.msg)}})},//点击上一题nextSubject2() {// 保存当前题目的答案let currentAnswer = this.info.type !== '4' ? this.answerList.join(",") : this.form.realAnswer;const answerData = {userId: sessionStorage.getItem('userId'),subjectId: this.info.id,myAnswer: currentAnswer,testId: this.$route.query.id};// 更新或添加答案到答案数组let existingAnswerIndex = this.arr.findIndex(item => item.subjectId === this.info.id);if (existingAnswerIndex !== -1) {this.arr[existingAnswerIndex] = answerData;} else {this.arr.push(answerData);}// 切换到上一题this.$set(this.query, 'pageSize', this.query.pageSize - 1);this.get2(this.$route.query.id);// 重置答案列表this.form.realAnswer = null;this.answerList = [];this.$store.commit("saveList", answerData);},// 点击下一题nextSubject() {if (this.info.type !== '4') {if (this.answerList.length < 1) {this.$message.warning('请作答');return false;}} else {if (this.form.realAnswer == null) {this.$message.warning('请作答');return false;}}// 保存当前题目的答案let s = this.info.type !== '4' ? this.answerList.sort().join(",") : this.form.realAnswer;const s2 = {userId: sessionStorage.getItem('userId'),subjectId: this.info.id,myAnswer: s,testId: this.$route.query.id};// 更新或添加答案到答案数组let existingIndex = this.arr.findIndex(item => item.subjectId === this.info.id);if (existingIndex !== -1) {this.arr[existingIndex] = s2;} else {this.arr.push(s2);}// 如果正在提交，不进行跳转if (this.isSubmitting) {return;}// 切换到下一题this.$set(this.query, 'pageSize', this.query.pageSize + 1);this.get2(this.$route.query.id);// 重置答案列表this.form.realAnswer = null;this.answerList = [];this.$store.commit("saveList", s2);console.log(this.arr);},findIsExist(arr,item){for (let i=0;i<arr.length;i++){console.log(arr[i].subjectId+'====='+item.subjectId)if (arr[i].subjectId === item.subjectId){return true;}}return false;},handleExam(){this.isSubmitting = true;if (this.timer){clearInterval(this.timer);this.timer = null}if (this.info.type !=='4') {if (this.answerList.length < 1) {this.$message.warning('请作答');return false;}}else {if (this.form.realAnswer == null){this.$message.warning('请作答');return false;}}let s = null;if (this.info.type !== '4'){s = this.answerList.join(",");}else {s = this.form.realAnswer;}this.nextSubject()for (let i=0;i<this.arr.length;i++){saveAndUpdateExamInfo(this.arr[i]).then(res =>{});}// this.answerList = [];this.$message.success('正在计算分数,请稍后');setTimeout(() => {getMyExam({userId: sessionStorage.getItem('userId'), testId: this.$route.query.id}).then(res => {this.data2 = res.data.map(item => {return {...item,studentAnswers: item.myAnswer ? item.myAnswer.split(",") : []};});for (let i = 0; i < this.data2.length; i++) {if (this.data2[i].isRight === true) {console.log(this.data2[i].score)this.score = this.score + this.data2[i].score;}}});this.type = 2;setTimeout(() =>{saveAndUpdateReportInfo({userId:sessionStorage.getItem('userId'),testId:this.$route.query.id,score:this.score,teacherId:sessionStorage.getItem('teacherId')})},2000)// 交卷结束，设置isSubmitting回falsethis.isSubmitting = false;},2000);},//单个删除deleteTestInfo(row){this.$confirm('确定要删除所选择的吗？', '提示', {type: 'warning'}).then(action => {if (action === 'confirm') {if (row.userType=== '1'){this.$message.warning('管理员用户无法删除');}else {this.form.id = row.id;delTestInfo(this.form.id).then(res=>{if (res.code === 1){this.$message.success('删除成功');this.getData();}else {this.$message.error('删除失败');}})}}}).catch(() => {});},//编辑editTestInfo(row){this.form = JSON.parse(JSON.stringify(row));this.addVisible = true;},lookStep(row){this.active = row.step;this.addVisible2 = true;},//重置reset(){this.query.realName= null;this.getData();},getTestInfo(){this.getData();},//添加用户信息addTestInfo(){this.form = {};this.form.userId = sessionStorage.getItem("userId");this.form.isBlack = "1";this.addVisible = true;},saveAndUpdateTestInfo(){saveAndUpdateTestInfo(this.form).then(res =>{if (res.code === 1){this.getData();this.$message.success('操作成功');this.addVisible = false;}else {this.$message.error('操作失败')}})},clearAddForm(){this.addVisible = false;this.addVisible2 = false;},// 分页导航handlePageChange(val) {this.$set(this.query, 'pageNum', val);this.getData();},startTest(row){// getTestSubject(row.id).then(res =>{//// })sessionStorage.setItem('userStatus',"1");this.$router.push('/start_test/'+row.id)}},mounted() {getTestList({id:this.$route.query.id}).then(res =>{this.count = res.data.list[0].time * 60;this.times = res.data.list[0].time * 60;this.timer = setInterval(() => {if (this.times > 0) this.times--console.log(this.times)}, 1000)});}};
</script><style scoped>.ListCnt ul {border-bottom: 1px solid #EBEBEB;display: block;width: 100%;margin: 15px 0 0 0;}.ListCnt ul {margin: 20px 0 0 0;padding: 0;display: block;width: 100%;}ul {margin: 0px;padding: 0px;list-style-type: none;}ul {display: block;list-style-type: disc;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;padding-inline-start: 40px;}.ListCnt ul li {display: block;color: #000;line-height: 280%;padding: 12px;margin: 0;border-top: 1px solid #EBEBEB;background: #FFF;display: inline-block;color: #555;width: 96%;font-family: "arial","Microsoft Yahei";}li {display: list-info;text-align: -webkit-match-parent;}.ListCnt ul li i {display: block;width: 50px;float: left;text-align: center;}i, em {font-style: normal;}.ListCnt ul li a {display: block;float: left;width: 720px;padding: 0;color: #333;font-size: 14px;font-family: "arial","Microsoft Yahei";}</style>
12 test.vue
<template><div><div class="container"><div class="handle-box"><el-input class="handle-input mr10" v-model="query.name" placeholder="请输入题库名称"></el-input><el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="getTestInfo">查询</el-button><el-button type="primary" icon="el-icon-refresh" @click="reset">清空</el-button></div><!-- //如果用户类型是1，才有新增题库按钮，说明只有教师能有新增题库权限 --><div class="handle-box" style="display: inline-flex;"><el-button style="margin-bottom: 10px"type="primary"icon="el-icon-plus"class="handle-del mr10"@click="addTestInfo"v-if="userType === '1'">新增</el-button><el-button style="margin-bottom: 10px" type="danger"icon="el-icon-delete"class="handle-del mr10"@click="batchDelete">批量删除</el-button></div><el-table:data="tableData"borderclass="table"ref="multipleTable"header-cell-class-name="table-header"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-column width="66" type="index" label="序号" align="center"></el-table-column><el-table-column prop="name" label="题库名称" align="center"></el-table-column><el-table-column prop="time" label="考试时间" align="center"></el-table-column><el-table-column prop="createTime" label="添加时间" align="center"></el-table-column><el-table-column label="操作" width="380" align="center"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"@click="editTestInfo(scope.row)"v-if="userType === '1'">修改</el-button><el-buttontype="primary"icon="el-icon-edit"@click="startTest(scope.row)"v-if="userType === '2'">开始考试</el-button><el-buttontype="primary"v-if="userType === '1' || userType === '0'"icon="el-icon-delete"@click="deleteTestInfo(scope.row)">删除</el-button></template></el-table-column></el-table><div class="pagination"><el-paginationbackgroundlayout="total, prev, pager, next":current-page="query.pageNum":page-size="query.pageSize":total="pageTotal"@current-change="handlePageChange"></el-pagination></div></div><!-- 添加弹出框 --><el-dialog title="题库信息" :modal="false" :visible.sync="addVisible" width="33%" :before-close="clearAddForm"><el-form label-position="left" ref="addForm" :rules="addForm" label-width="80px" :model="form" ><el-form-item label="题库名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="考试时间" prop="time"><el-input v-model="form.time" v-limitNum></el-input>单位(分钟)</el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="clearAddForm">取 消</el-button><el-button type="primary" @click="saveAndUpdateTestInfo">确 定</el-button></span></el-dialog></div>
</template><script>import {delTestInfo,getReportIsExist,getTestList,getTestSubject, getTsList,saveAndUpdateTestInfo} from '../../api/user';export default {name: 'Test',data() {return {active:"2",query: {pageNum:1,pageSize:10,},tableData:[],selectedRows: [], // 存储选中的行数据addVisible: false,addVisible2:false,form:{},pageTotal: 0,addForm: {name: [{ required: true, message: '题库名不得为空', trigger: 'blur' }],time: [{ required: true, message: '请输入考试时间', trigger: 'blur' }],},};},created() {this.userType = sessionStorage.getItem('userType');this.getData();},computed:{userType(){return sessionStorage.getItem('userType');}},activated() {// 当页面每次激活时，清空选中的行this.$refs.multipleTable.clearSelection();},methods: {// 获取所有数组(支持分页和关键字查询)getData() {if (sessionStorage.getItem('userType') === '1'){this.query.teacherId = sessionStorage.getItem('userId');}else if (sessionStorage.getItem('userType') === '2'){this.query.teacherId = sessionStorage.getItem('teacherId')}getTestList(this.query).then(res => {if (res.code === 1){this.tableData = res.data.list;this.pageTotal = res.data.total;}else {console.log('异常');}});},handleSelectionChange(val){console.log(val)this.selectedRows = val;},//单个删除deleteTestInfo(row){this.$confirm('确定要删除所选择的吗？', '提示', {type: 'warning'}).then(action => {if (action === 'confirm') {this.form.id = row.id;delTestInfo(this.form.id).then(res=>{if (res.code === 1){this.$message.success('删除成功');this.getData();}else {this.$message.error(res.msg);}})}}).catch(() => {});},//批量删除batchDelete() {if (this.selectedRows.length === 0) {this.$message.warning('请选择要删除的行');return;}this.$confirm('确定要删除所选择的项吗？', '提示', {type: 'warning'}).then(() => {const deletePromises = this.selectedRows.map(row => {return delTestInfo(row.id); // 假设 delSubjectInfo 是执行删除操作的方法});Promise.all(deletePromises).then(responses => {const failedDeletes = responses.filter(res => res.code !== 1);if (failedDeletes.length > 0) {this.$message.error('部分删除操作失败');} else {this.$message.success('全部删除成功');this.query.pageNum = 1;}this.getData(); // 重新获取数据this.selectedRows = []; // 清空选中项}).catch(error => {this.$message.error('删除过程中出现错误');});}).catch(() => {});},//编辑editTestInfo(row){this.form = JSON.parse(JSON.stringify(row));this.addVisible = true;},lookStep(row){this.active = row.step;this.addVisible2 = true;},//重置reset(){this.query.name= null;this.getData();},getTestInfo(){this.query.pageNum = 1; // 重置到第一页this.getData();},//添加用户信息addTestInfo(){if (this.$refs.addForm) {this.$refs.addForm.resetFields(); // 重置表单验证状态}this.form = {};this.form.teacherId = sessionStorage.getItem("userId");this.addVisible = true;},saveAndUpdateTestInfo(){this.$refs.addForm.validate((valid)=>{if(valid){saveAndUpdateTestInfo(this.form).then(res =>{if (res.code === 1){this.getData();this.$message.success('操作成功');this.addVisible = false;}else {this.$message.error('操作失败')}})}else{this.$message.error('操作失败');return false;}})},clearAddForm(){if (this.$refs.addForm) {this.$refs.addForm.resetFields(); // 重置表单验证状态}this.form = {}; // 重置表单数据this.addVisible = false;this.addVisible2 = false;},// 分页导航handlePageChange(val) {this.$set(this.query, 'pageNum', val);this.getData();},startTest(row){getTsList({testId:row.id}).then(res =>{if (res.data.list.length < 1){this.$message.warning('题库中没有题目')}else {getReportIsExist({testId:row.id,userId:sessionStorage.getItem('userId')}).then(res =>{if (res === true){this.$message.warning('您已经参加过该考试了!')}else {this.$message.success('请开始考试，祝你考试顺利!')sessionStorage.setItem('userStatus',"1");// this.$router.push('/start/'+row.id);this.$router.push({path:'/start',query: {id:row.id}})setTimeout(() =>{window.location.reload();},1000)}});}})}}};
</script><style scoped>.handle-box {margin-top: 20px;margin-bottom: 10px;}.handle-input {width: 300px;display: inline-block;}.table {width: 100%;font-size: 14px;}.crop-demo-btn{position: relative;width: 98px;height: 32px;line-height: 32px;padding: 0 15px;background-color: #409eff;color: #fff;font-size: 12px;border-radius: 4px;box-sizing: border-box;}.crop-input{position: absolute;width: 98px;height: 32px;left: 0;top: 0;opacity: 0;cursor: pointer;}
</style>
13user.vue
<template><div><div class="container"><div class="handle-box"><el-input clearable style="margin-right: 20px;" class="handle-input mr10" v-model="query.realName" placeholder="请输入关键字查询"@keyup.enter.native="getUserInfo"></el-input><!-- 单选下拉框 --><el-select v-model="query.userType" clearable @change="getUserInfo"placeholder="请选择用户身份"v-if="userType === '0'" ><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="getUserInfo">查询</el-button><el-button type="primary" icon="el-icon-refresh" @click="reset">清空</el-button></div><div class="handle-box" style="display: inline-flex;"><el-button style="margin-bottom: 10px"type="primary"icon="el-icon-plus"class="handle-del mr10"@click="addUserInfo">新增</el-button></div><!-- 删掉的26行 --><el-table:data="tableData"borderclass="table"ref="multipleTable"header-cell-class-name="table-header"><el-table-column width="66" type="index" label="序号" align="center"></el-table-column><el-table-column prop="userName" label="用户名" align="center"></el-table-column><el-table-column prop="password" label="密码" align="center"></el-table-column><el-table-column prop="realName" label="真实姓名" align="center"></el-table-column><el-table-column prop="phone" label="手机号" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center"></el-table-column><el-table-column prop="userType" label="身份类型" align="center"><template slot-scope="scope"><span v-if="scope.row.userType === '1'">教师</span><span v-if="scope.row.userType === '2'">学生</span><span v-if="scope.row.userType === '0'">管理员</span></template></el-table-column><el-table-column label="操作" width="280" align="center"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"@click="editUserInfo(scope.row)">修改</el-button><el-buttontype="primary"icon="el-icon-delete"@click="deleteUserInfo(scope.row)">删除</el-button></template></el-table-column></el-table><div class="pagination"><el-paginationbackgroundlayout="total, prev, pager, next":current-page="query.pageNum":page-size="query.pageSize":total="pageTotal"@current-change="handlePageChange"></el-pagination></div></div><!-- 添加弹出框 --><el-dialog title="用户信息" :modal="false" :visible.sync="addVisible" width="33%" :before-close="clearAddForm"><el-form label-position="left" ref="addForm" label-width="80px" :rules="addForm" :model="form" ><el-form-item label="用户名" prop="userName"><el-input v-model="form.userName"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password"></el-input></el-form-item><el-form-item label="真实姓名" prop="realName"><el-input v-model="form.realName"></el-input></el-form-item><el-form-item label="手机号" prop="phone"><el-input v-model="form.phone"></el-input></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="form.address"></el-input></el-form-item><el-form-item label="头像上传" prop="avatar"><el-uploadclass="avatar-uploader"action="http://localhost:9000/api/upload":on-success="handleAvatarSuccess"list-type="picture":file-list="fileList"><el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button></el-upload></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="clearAddForm">取 消</el-button><el-button type="primary" @click="saveAndUpdateUserInfo">确 定</el-button></span></el-dialog></div>
</template><script>import {delUserInfo, getUserList, saveAndUpdateUserInfo} from '../../api/user';export default {name: 'User',data() {return {fileList: [], // 用于存储上传的文件列表 active:"2",query: {pageNum:1,pageSize:10,realName:null,userType:null,},value1: null, // 用于绑定下拉框选择的值options: [{ value: '0', label: '管理员' },{ value: '1', label: '教师' },{ value: '2', label: '学生' }],tableData:[],addVisible: false,addVisible2:false,form:{},pageTotal: 0,addForm: {userName: [{ required: true, message: '用户名不得为空', trigger: 'blur' }],password: [{ required: true, message: '密码长度在5-8位之间', trigger: 'blur',min: 5, max: 8,}],// deviceName:[{ required: true, message: '设备名称不得为空', trigger: 'blur'},// { validator: checkDeviceName, trigger: 'blur' }],realName: [{ required: true, message: '真实姓名不得为空', trigger: 'blur' }],phone: [{ required: true, message: '手机号不得为空', trigger: 'blur' },{validator: this.validatePhone, trigger: 'blur'}, //自定义校验规则--正则],address: [{ required: true, message: '地址不得为空', trigger: 'blur' }],userType: [{ required: true, message: '用户身份不能为空', trigger: 'blur' }], // 添加必填校验规则},};},created() {// 从sessionStorage中获取userType，并设置给userType变量this.userType = sessionStorage.getItem('userType');this.getData();},methods: {handleAvatarSuccess(response, file) {// 假设 response 是后端返回的包含图片名称的响应this.form.avatar = response; // 存储文件名// 更新 fileList 来显示上传的图片this.fileList = [{name: file.name, url: URL.createObjectURL(file.raw)}];this.$message.success('上传成功');// 发送请求到后端以更新数据库this.updateAvatarInDatabase(this.form.avatar);},updateAvatarInDatabase(userId, avatarName) {axios.post('http://localhost:9000/api/updateAvatar', { userId: userId,avatar: avatarName }).then(response => {console.log("数据库更新成功");}).catch(error => {console.error("数据库更新失败", error);});},//自定义校验规则--手机号正则校验validatePhone(rule, value, callback) {const phoneRegex = /^1[3456789]\d{9}$/;if (!value) {return callback(new Error('手机号不得为空'));}if (!phoneRegex.test(value)) {callback(new Error('请输入有效的手机号'));} else {callback();}},// 获取所有数组(支持分页和关键字查询)getData() {if (sessionStorage.getItem('userType') === '1'){this.query.teacherId=sessionStorage.getItem('userId');}getUserList(this.query).then(res => {if (res.code === 1){this.tableData = res.data.list;this.pageTotal = res.data.total;}else {console.log('异常');}});},//单个删除deleteUserInfo(row){this.$confirm('确定要删除所选择的吗？', '提示', {type: 'warning'}).then(action => {if (action === 'confirm') {if (row.userType=== '0'){this.$message.warning('管理员用户无法删除');}else {this.form.id = row.id;delUserInfo(this.form.id).then(res=>{if (res.code === 1){this.$message.success('删除成功');this.getData();}else {this.$message.error('删除失败');}})}}}).catch(() => {});},//编辑editUserInfo(row){this.form = JSON.parse(JSON.stringify(row));this.addVisible = true;// 检查是否有头像信息，如果有，则设置到 fileList 中if (this.form.avatar) {this.fileList = [{name: 'avatar',url: 'http://localhost:9000/img/' + this.form.avatar // 本地服务器静态文件URL}];} else {this.fileList = []; // 没有头像信息时清空 fileList}},lookStep(row){this.active = row.step;this.addVisible2 = true;},//重置reset(){this.query.realName= null;this.query.userType = null;this.getData();},getUserInfo(){this.query.pageNum = 1; // 重置到第一页this.getData();},//添加用户信息addUserInfo(){this.clearAddForm(); // Reset the form and validation statethis.form = {}; // Reset the form datathis.addVisible = true; // Open the dialog},// saveAndUpdateUserInfo(){// this.$refs.addForm.validate((valid) => {// if (valid) {// if (sessionStorage.getItem('userType') === '1'){// this.form.userType = '2';// this.form.teacherId = sessionStorage.getItem('userId');// }// else {// this.form.userType = '1';// }// saveAndUpdateUserInfo(this.form).then(res =>{// if (res.code === 1){// this.getData();// this.$message.success('操作成功');// this.addVisible = false;// }else {// this.$message.error(res.msg)// }// })// } else {// return false;// }// });// },saveAndUpdateUserInfo(){this.$refs.addForm.validate((valid) => {if (valid) {// 在添加新用户时设置 userTypeif (!this.form.id) { // 假设 form 中的 id 用于标识是否是新用户（无 id 表示新用户）if (sessionStorage.getItem('userType') === '1'){this.form.userType = '2'; // 教师添加的用户默认为学生this.form.teacherId = sessionStorage.getItem('userId');} else {this.form.userType = '1'; // 非教师（管理员）添加的用户默认为教师}}// 现在 saveAndUpdateUserInfo 会保留现有用户的 userTypesaveAndUpdateUserInfo(this.form).then(res =>{if (res.code === 1){this.getData();this.$message.success('操作成功');this.addVisible = false;}else {this.$message.error(res.msg);}})} else {return false;}});},clearAddForm(){// Clear form datathis.form = {};this.fileList = [];// Reset validationif (this.$refs.addForm) {this.$refs.addForm.clearValidate();}// Close dialogsthis.addVisible = false;this.addVisible2 = false;},// 分页导航handlePageChange(val) {this.$set(this.query, 'pageNum', val);this.getData();},}};
</script><style scoped>.avatar-uploader {width: 108px;height: 128px;/* margin-left:20px ;margin-top: -20px; */
}.handle-box {margin-top: 20px;margin-bottom: 10px;}.handle-input {width: 300px;display: inline-block;}.table {width: 100%;font-size: 14px;}.crop-demo-btn{position: relative;width: 98px;height: 32px;line-height: 32px;padding: 0 15px;background-color: #409eff;color: #fff;font-size: 12px;border-radius: 4px;box-sizing: border-box;}.crop-input{position: absolute;width: 98px;height: 32px;left: 0;top: 0;opacity: 0;cursor: pointer;}
</style>
![[C语言]——分支和循环（2）](https://img-blog.csdnimg.cn/direct/86075e4722814ae686d58de83f22f674.png)
