前端：
跳转到/后端 得到输入的账号和密码 接下来就是把输入的帐号和密码根据查询在管理员表 教师表 学生表中是否存在 如果存在的话结束函数传回前端的接收对象 如果接收对象为空的话就说明没有查到也就是账号或密码错误。
考试中心的试卷列表显示：
前端：
跳转到后端 根据分页页数和分页大小来显示然后就会去返回全部的试卷 然后一个一个遍历将其输出。
搜索试卷：
前端：
跳转到后端 其实它是查询了全部的试卷 但是呢它会在前端做一个逻辑判断 找寻是否有输入的this.key进行筛选。
考试科目显示：
前端
跳转到后端 根据网页路由得到的考试编号来查询 然后查询后注意我们是不是得到了一个paperId 然后我们上去看一下前端代码 它根据paperId得到试题题目消息 所以我们再来看一下paper controller 我们会发现它是调用了3个mapper ：判断题 选择题 填空题 但是为什么它可以知道哪些选择题判断题是它的呢 所以我们又创建一个表 进行PaperId 和 QuentionId 然后根据Id进行查询 然后显示出来 然后就是简单的循环算出总分，存入score并返回到网页显示。
查看试卷详情：
其实就是和上面的一个一样 查询完了之后不是会放到一个score数组吗直接显示就好了
前端：
开始考试：（可以把它和试卷练习放在一起）
为什么说可以和试卷练习放在一起呢 因为都是在同一个前端文件中 但是利用了一个逻辑判断就会出现不同的结果。
例：意思就是根据IsPractice判断是否是练习 如果是练习就会弹出正确答案和解析。
那么我们接下来讨论一下如何实现题目的显示以及最后它是如何进行改卷和将分数存储到数据库。
1.（以选择题的显示为例）
前端：
因为我们这个界面是从考试科目显示的前端处于同一个前端文件 我们在考试科目显示的那段执行代码已经做到了从后端根据Mapper查询语句将试卷查询出来，所以我们早就得到了试卷里面的试题，原理上面也有说过。便将其显示 如果是练习的话也就是多加一个回答完后显示正确答案。
2.改卷功能（还是以选择题为例 如果是填空题的话逻辑相同 但是利用的是二维数组 用于保存答案）
前端：先是利用以下的方法将我们的作答保存进数组当中
然后在下面遍历进行判断是否正确，然后累加到总分当中。
当然如果是练习的话就不会提交到数据库当中。
简单的后端调用 将其传输到数据库。
倒计时结束自动交卷的逻辑实现。
前端：
首先，使用创建一个定时器，每 60 秒（1000 * 60 毫秒）触发一次回调函数。在回调函数中，每次将减 1，表示剩余时间减少 1 分钟。当等于 10 时，通过显示一个提示消息，提醒考生还剩 10 分钟。当小于等于 0 时，再次显示提示消息，并调用方法提交试卷。
我的分数：
前端：
分页获取成绩数据。将设为，意味着数据加载完成，隐藏页面上用于提示正在加载的遮罩效果 把后端返回的成绩数据（）赋值给数组，用于后续在表格中显示具体的成绩信息。同时，接下来，通过函数遍历数组，对每个成绩对象中的字段进行提取，构建一个新的数组，其元素为包含和属性且值都为的对象，目的是为后续构建筛选参数做准备。再使用函数对数组进行去重操作，将去重后的结果存储在中，并赋值给，这个将用于表格组件中的筛选功能，使得可以按照考试日期进行数据筛选。
交流区：
查询留言：
前端：
前端：
转到后端在后端获取后存入到数据库当中。创建一个对象获取当前时间，然后通过判断和的长度是否为来进行非空验证，如果留言标题或内容为空，弹出错误提示框告知用户 “留言标题或内容不能为空”若输入验证通过，将用户输入的留言标题（）、留言内容（）以及当前时间（）作为请求数据提交到后端，用于保存留言信息。最后将和重新置为空字符串，方便用户进行下一次留言输入。
回复功能：
前端：
后端：
设置了确认和取消按钮的文本、输入内容的验证正则表达式（要求回复不能为空）以及对应的错误提示信息。当用户点击确定输入回复内容后，获取当前时间以及用户输入的回复内容（），并准备提交到后端。将回复内容、回复时间以及对应的留言作为请求数据提交到后端，用于保存回复信若请求成功，然后调用方法重新获取留言数据，使得页面上对应的留言能够及时显示新的回复内容如果用户点击取消输入，则通过弹出 “取消输入” 的提示框告知用户操作已取消。
考试管理 → 考试查询功能
前端：
这里使用 this.$axios向 /api/exams/ 后面跟上当前页码（this.pagination.current）和每页大小（this.pagination.size）所组成的 API 接口地址发送请求。这个请求旨在获取对应分页条件下的试卷信息数据。并且通过 .then 方法注册了一个回调函数，用于处理请求成功后返回的响应数据（res）。当请求成功后，从响应数据（res.data）中取出 data 属性的值，并直接赋值给 this.pagination。通过这样的赋值操作，将服务器返回的最新分页数据更新过来，以便后续页面能根据这些准确的数据进行试卷信息展示以及分页导航等相关操作。
后端
用于处理 HTTP GET 请求，目的是实现分页查询 ExamManage 相关数据，并将查询结果以特定格式进行封装返回给客户端，告知客户端请求的执行情况以及返回相应的数据内容。它们的值会从请求的 URL 路径中提取出来，并传递到方法的参数中，findAll 是方法名，直观地表示这个方法的功能是查询所有相关的数据。
考试管理 → 考试查询功能→试题详情
前端：
showExamDetail: false：
同样是布尔类型属性，用于判断是否展示试卷详情信息。初始化为 false，表示一开始不会展示试卷的详细内容，当满足特定条件（例如用户点击查看试卷详情的按钮等情况）时，可以将其值修改为 true，使得相关的试卷详细信息在页面上呈现给用户，实现试卷详情展示的控制功能。
activeName: '0'：
它的值是一个字符串类型，初始值为 '0'，用于表示默认打开试卷包含部分的内容
后端：
前端：
使用 this.$/confirm/i弹出一个提示框，询问用户是否确认从试卷中移除指定的试题，用户需要在弹出框中进行确认操作，当用户在确认框中点击 “确定” 按钮后，会进入这个 .then 回调函数内。这里使用 this.$axios向 /api/paper/delete/ 加上试卷 ID（paperId）、试题类型（type）以及试题 ID（questionId）组成的 API 接口地址发送请求，目的是向服务器请求删除指定的试题，其中 type 和 questionId 作为参数传入方法，用于明确要删除的是哪种类型以及具体是哪一道试题。在发送删除请求并接收到响应后，调用 this.getExamDetail 方法，并传入当前的 examDetailCode（考试编码）和 paperId（试卷 ID）作为参数，这样做是为了在试题删除成功后，重新获取试卷的详细信息，使得页面展示的试卷内容能及时更新，反映出试题已经被移除的状态。
使用 this.$axios 向 /api/exam/ 加上传入的考试编码（examCode）组成的 API 接口地址发送请求，以获取考试相关的详细信息。然后使用对象展开语法将处理后的 res.data.data 中的属性复制到组件内的 examData 对象中，这样 examData 对象就存储了完整的经过格式化后的考试相关信息，用于在页面上展示考试的基本情况，如考试名称、考试时间等内容。
后端：
前端：
发送 PUT 请求更新试卷信息：使用 this.$axios来发起一个 HTTP 请求，比如试卷名称、试卷总分、包含的题目等相关属性，这些数据会被发送到服务器，以便服务器根据接收到的数据来更新对应的试卷记录。
后端：
考试管理 → 添加考试
前端：
首先使用 date.getMonth 方法获取当前日期的月份，需要注意的是，该方法返回的月份是从 0 开始计数的（0 表示一月，11 表示十二月），所以这里要加上 1 才是实际的月份数。然后通过三元表达式进行判断，如果获取到的月份数小于 10，就在前面拼接一个 "0"，使其格式化为两位数字的字符串（例如 01 表示一月，09 表示九月等），如果月份数大于等于 10，就直接使用该月份数，最终将格式化后的月份值赋给 month 变量。其他也类似
后端：
题库管理 → 所有题库
前端：
这里首先通过 typeof 操作符检查传入的 size 参数是否为数字类型，并且使用 !isNaN(size) 进一步确认它不是非数字的值（例如 NaN）。如果满足这两个条件，就将 this.pagination.size 设置为传入的 size 值，先将 this.subject 的值赋给局部变量 subject，然后使用 trim 方法去除 this.subject 两端的空白字符后，检查其是否为空字符串。如果是空的，就将 subject 变量赋值为 "@"
后端：
这几个参数注解用于将请求路径中对应的路径变量绑定到方法的参数上。@PathVariable 注解表示从请求的 URL 路径中获取相应名称（这里就是 page、size、subject、section 和 question）的变量值，并将其转换为相应的类型（Integer 类型的 page 和 size，String 类型的 subject、section、question），分别赋值给对应的参数
题库管理 → 增加题库
前端：
后端：
题库管理 → 增加题库 → 添加试题
前端：
使用 this.$axios 发起一个 POST 请求，请求的接口地址是 /api/paperManage，方法同样是 Post，将 this.postPaper 对象通过对象展开语法展开作为请求的数据体发送给服务器，目的是将这道选择题与试卷进行关联存储（比如记录这道题在哪些试卷中出现等相关管理信息），整体上是在完成选择题数据入库后进一步的关联操作，完善整个数据管理流程。
后端：
题库管理 → 增加题库 → 在线组卷
前端：
url: "/api/item"：指定请求要发送到的 API 接口地址为 /api/item，根据接收到的数据创建相关的题目资源等。getParams 方法主要用于从当前路由的查询参数中获取试卷名称（subject）和试卷 ID（paperId），并将这些获取到的值赋值给组件内相应的变量以及与试卷管理相关的数据对象中的对应属性，以便后续在组件的其他操作中使用这些参数
后端：
multiQuestionService 的服务的 findBySubject 方法，传入学科（item.getSubject()）和选择题数量（changeNumber）两个参数，目的是从数据库中按照指定学科查找出指定数量的选择题相关的数据，并将查询结果赋值给 changeNumbers 变量。fillQuestionService和udgeQuestionService与之类似。对于选择题部分，如果 changeNumbers 为 null（表示没有从数据库获取到相应题目数据）或者 changeNumbers 列表的大小不等于前面获取到的要求的选择题数量（changeNumber），就意味着选择题的题目数量不满足组卷要求，填空题和判断题部分的验证逻辑类似
学生管理 → 学生管理
前端：
查询功能与题库管理 → 所有题库的查询功能是相同的
前端：
发送 PUT 请求更新试卷信息：使用 this.$axios来发起一个 HTTP 请求，比如试卷名称、试卷总分、包含的题目等相关属性，这些数据会被发送到服务器，以便服务器根据接收到的数据来更新对应的试卷记录。
后端：
学生管理 → 添加学生
前端：
在onSubmit方法内，使用this.$axios发起了一个 HTTP POST 请求。请求的url设置为'/api/student'，意味着会向项目后端对应的/api/student这个接口地址发送请求，请求方法明确指定为'post'，表明这是一个向服务器提交数据的操作。要提交的数据来源于组件内的this.form对象，通过扩展运算符...将this.form的所有属性展开作为请求体的数据发送给后端。例如，如果this.form包含{name: '张三', age: 20}这样的数据，那么就会把这些数据以合适的格式发送给后端接口。
通过this.$router.push({path: '/studentManage'})进行页面路由跳转，将用户导航到'/studentManage'这个路径对应的页面，可能是数据管理相关的展示页面之类的，实现操作完成后跳转到相应功能页面的逻辑。
后端：
首先对用户输入的各查询条件（、、、、、）进行预处理。如果输入框中的内容为空字符串（通过方法去除两端空白字符后判断），以此确保向后端准确传达查询的意图和条件。依据当前页码、每页条数以及处理后的各个查询条件，从后端获取相应分页的学生信息数据。当后端返回数据后，将返回的数据对象（）整体赋值给对象，这样就更新了分页相关的所有信息。
其实都是基于这段代码实现的分页查询以及条件查询。
点击进去之后：
前端：
后端返回为 200 表示成功拿到成绩数据，就遍历这些数据。对于每个成绩记录里的科目名称，用函数每隔几个字符（代码里设为 3 个）插入换行符，处理好后放数组（作为图表 x 轴数据），对应成绩分数放数组（作 y 轴数据）通过拿到页面上图表容器元素，用它初始化实例。配置图表选项，设为类目轴，用数组当数据；设为数值轴，放成绩分数；里定义折线图系列，让数据点显示数值标签。最后把配置应用到实例上展示图表。另外，还给图表绑事件，鼠标悬停数据点时，控制台会打印对应数据值，方便后续扩展交互功能。
成绩分段查询：
前端：
后端：
其实就是查询考试库里的所有试卷然后显示在前端，这个相比学生就简单很多 因为不用进行查询。
点击进去：
前端：
获取数据：在组件创建时就调用方法。这个方法先从路由获取考试编号和考试名称，接着用发请求拿此次考试的学生成绩数据。处理数据与展示图表（有成绩时）：如果获取到了成绩数据（数据长度大于 0），就遍历这些成绩，按照成绩除以 10 的结果来划分到不同分数段，相应分数段的人数就加 1。然后用初始化图表容器，配置图表选项，像设置标题是考试名称相关的，图表类型是饼图，展示各分数段人数占比等信息，最后把配置应用到图表实例上展示出来。要是没获取到成绩数据（长度为 0），就把设为，让页面显示提示信息。
后端：