pswqm3ot6
/
spring-boot-online-exam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Default Changelist

Browse Source
feature/qzw
秦泽旺 2 months ago
parent 57d4bd7794
commit 90f47d711d
6 changed files with 258 additions and 137 deletions
Show Stats Download Patch File Download Diff File

2
doc/sql/exam.sql
Unescape View File

@ -1208,7 +1208,7 @@ CREATE TABLE `user` (
PRIMARY KEY (`user_id`) USING BTREE,-- 主键约束 PRIMARY KEY (`user_id`) USING BTREE,-- 主键约束
-- 唯一性约束： -- 唯一性约束：
-- 分别为`user_username`、`user_email`和`user_phone`字段设置唯一性约束，并使用B树（BTREE）索引。 -- 分别为`user_username`、`user_email`和`user_phone`字段设置唯一性约束，并使用B树（BTREE）索引。
-- 这确保了用户名、邮箱和手机号在表中是唯一的，不会出现重复值。 -- 这确保了用户名、邮箱和手机号在表中是唯一的，不会出现重复值。0
UNIQUE KEY `user_username` (`user_username`) USING BTREE, UNIQUE KEY `user_username` (`user_username`) USING BTREE,
UNIQUE KEY `user_email` (`user_email`) USING BTREE, UNIQUE KEY `user_email` (`user_email`) USING BTREE,
UNIQUE KEY `user_phone` (`user_phone`) USING BTREE UNIQUE KEY `user_phone` (`user_phone`) USING BTREE

107
frontend/public/index.html vendored
Unescape View File

@ -1,24 +1,127 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- 声明文档类型，这里是HTML5 -->
<html lang="zh-cmn-Hans"> <html lang="zh-cmn-Hans">
<!-- 开始HTML文档，指定语言为简体中文（简体，汉字） -->
<head> <head>
<!-- 文档的头部 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 设置文档的字符编码为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 告诉IE浏览器使用最新的渲染引擎 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 设置视口，以确保页面在不同设备上都能正确显示 -->
<link rel="icon" href="<%= BASE_URL %>logo.png"> <link rel="icon" href="<%= BASE_URL %>logo.png">
<!-- 设置网页的图标，图标路径使用了模板变量BASE_URL -->
<title>在线考试系统</title> <title>在线考试系统</title>
<style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style> <!-- 设置网页的标题 -->
<style>
/* 内嵌样式表 */
#loading-mask {
/* 加载遮罩层的样式 */
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #fff;
user-select: none;
z-index: 9999;
overflow: hidden;
}
.loading-wrapper {
/* 加载动画容器的样式 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%); /* 修正位置 */
}
.loading-dot {
/* 加载动画点的样式 */
animation: antRotate 1.2s infinite linear;
transform: rotate(45deg);
position: relative;
display: inline-block;
font-size: 64px;
width: 64px;
height: 64px;
box-sizing: border-box;
}
.loading-dot i {
/* 加载动画点内部的小圆圈的样式 */
width: 22px;
height: 22px;
position: absolute;
display: block;
background-color: #1890ff;
border-radius: 100%;
transform: scale(.75);
transform-origin: 50% 50%;
opacity: .3;
animation: antSpinMove 1s infinite linear alternate;
}
.loading-dot i:nth-child(1),
.loading-dot i:nth-child(2),
.loading-dot i:nth-child(3),
.loading-dot i:nth-child(4) {
/* 分别设置四个小圆圈的位置和动画延迟 */
}
@keyframes antRotate {
/* 定义旋转动画 */
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@-webkit-keyframes antRotate {
/* 为旧版WebKit浏览器定义旋转动画 */
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@keyframes antSpinMove {
/* 定义透明度变化动画 */
to {
opacity: 1;
}
}
@-webkit-keyframes antSpinMove {
/* 为旧版WebKit浏览器定义透明度变化动画 */
to {
opacity: 1;
}
}
</style>
</head> </head>
<body> <body>
<!-- 文档的主体 -->
<noscript> <noscript>
<!-- 如果浏览器禁用了JavaScript，显示此消息 -->
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"> <div id="app">
<!-- Vue应用的挂载点 -->
<div id="loading-mask"> <div id="loading-mask">
<!-- 加载遮罩层 -->
<div class="loading-wrapper"> <div class="loading-wrapper">
<span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span> <!-- 加载动画的容器 -->
<span class="loading-dot loading-dot-spin">
<!-- 加载动画，包含四个小圆圈 -->
<i></i><i></i><i></i><i></i>
</span>
</div> </div>
</div> </div>
</div> </div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<!-- 注释说明构建后的文件会自动注入，通常指Vue单页应用的JavaScript和CSS文件 -->
</body> </body>
</html> </html>

53
frontend/src/api/exam.js
Unescape View File

@ -1,16 +1,18 @@
// 考试相关的接口，包括考试、问题、选项和评分等接口 // 导入api对象，它包含了所有API端点的路径
import api from './index';
import api from './index' // 导入axios库，用于发送HTTP请求
import { axios } from '../utils/request' import { axios } from '../utils/request';
// 获取问题列表的函数
export function getQuestionList(parameter) { export function getQuestionList(parameter) {
return axios({ return axios({
url: api.ExamQuestionList, url: api.ExamQuestionList, // API端点
method: 'get', method: 'get',
params: parameter params: parameter // 查询参数
}) })
} }
// 获取所有问题的函数
export function getQuestionAll() { export function getQuestionAll() {
return axios({ return axios({
url: api.ExamQuestionAll, url: api.ExamQuestionAll,
@ -18,27 +20,30 @@ export function getQuestionAll () {
}) })
} }
// 更新问题的函数
export function questionUpdate(parameter) { export function questionUpdate(parameter) {
console.log(parameter) console.log(parameter); // 打印参数，用于调试
return axios({ return axios({
url: api.ExamQuestionUpdate, url: api.ExamQuestionUpdate,
method: 'post', method: 'post',
data: parameter data: parameter // 请求体中的数据
}) })
} }
// 获取分类选项的函数
export function getQuestionSelection() { export function getQuestionSelection() {
return axios({ return axios({
url: api.ExamQuestionSelection, url: api.ExamQuestionSelection,
method: 'get', method: 'get',
headers: { headers: {
'Content-Type': 'application/json;charset=UTF-8' 'Content-Type': 'application/json;charset=UTF-8' // 设置请求头，指定内容类型
} }
}) })
} }
// 创建新问题的函数
export function questionCreate(parameter) { export function questionCreate(parameter) {
console.log(parameter) console.log(parameter);
return axios({ return axios({
url: api.ExamQuestionCreate, url: api.ExamQuestionCreate,
method: 'post', method: 'post',
@ -46,6 +51,7 @@ export function questionCreate (parameter) {
}) })
} }
// 获取考试列表的函数
export function getExamList(parameter) { export function getExamList(parameter) {
return axios({ return axios({
url: api.ExamList, url: api.ExamList,
@ -54,6 +60,7 @@ export function getExamList (parameter) {
}) })
} }
// 获取所有考试信息的函数
export function getExamAll() { export function getExamAll() {
return axios({ return axios({
url: api.ExamAll, url: api.ExamAll,
@ -61,7 +68,7 @@ export function getExamAll () {
}) })
} }
// 获取所有问题，按照单选、多选和判断进行分类 // 获取考试类型列表的函数，按照单选、多选和判断分类
export function getExamQuestionTypeList() { export function getExamQuestionTypeList() {
return axios({ return axios({
url: api.ExamQuestionTypeList, url: api.ExamQuestionTypeList,
@ -72,6 +79,7 @@ export function getExamQuestionTypeList () {
}) })
} }
// 获取考试卡片列表的函数
export function getExamCardList() { export function getExamCardList() {
return axios({ return axios({
url: api.ExamCardList, url: api.ExamCardList,
@ -82,8 +90,9 @@ export function getExamCardList () {
}) })
} }
// 创建考试的函数
export function examCreate(parameter) { export function examCreate(parameter) {
console.log(parameter) console.log(parameter);
return axios({ return axios({
url: api.ExamCreate, url: api.ExamCreate,
method: 'post', method: 'post',
@ -91,8 +100,9 @@ export function examCreate (parameter) {
}) })
} }
// 更新考试信息的函数
export function examUpdate(parameter) { export function examUpdate(parameter) {
console.log(parameter) console.log(parameter);
return axios({ return axios({
url: api.ExamUpdate, url: api.ExamUpdate,
method: 'post', method: 'post',
@ -100,9 +110,10 @@ export function examUpdate (parameter) {
}) })
} }
// 根据考试ID获取考试详情的函数
export function getExamDetail(examId) { export function getExamDetail(examId) {
return axios({ return axios({
url: api.ExamDetail + examId, url: api.ExamDetail + examId, // 动态拼接URL
method: 'get', method: 'get',
headers: { headers: {
'Content-Type': 'application/json;charset=UTF-8' 'Content-Type': 'application/json;charset=UTF-8'
@ -110,9 +121,10 @@ export function getExamDetail (examId) {
}) })
} }
// 根据记录ID获取考试记录详情的函数
export function getExamRecordDetail(recordId) { export function getExamRecordDetail(recordId) {
return axios({ return axios({
url: api.recordDetail + recordId, url: api.recordDetail + recordId, // 动态拼接URL
method: 'get', method: 'get',
headers: { headers: {
'Content-Type': 'application/json;charset=UTF-8' 'Content-Type': 'application/json;charset=UTF-8'
@ -120,9 +132,10 @@ export function getExamRecordDetail (recordId) {
}) })
} }
// 根据问题ID获取问题详情的函数
export function getQuestionDetail(questionId) { export function getQuestionDetail(questionId) {
return axios({ return axios({
url: api.QuestionDetail + questionId, url: api.QuestionDetail + questionId, // 动态拼接URL
method: 'get', method: 'get',
headers: { headers: {
'Content-Type': 'application/json;charset=UTF-8' 'Content-Type': 'application/json;charset=UTF-8'
@ -130,18 +143,20 @@ export function getQuestionDetail (questionId) {
}) })
} }
// 提交考试并获取成绩的函数
export function finishExam(examId, answersMap) { export function finishExam(examId, answersMap) {
console.log(answersMap) console.log(answersMap); // 打印答案，用于调试
return axios({ return axios({
url: api.FinishExam + examId, url: api.FinishExam + examId, // 动态拼接URL
method: 'post', method: 'post',
headers: { headers: {
'Content-Type': 'application/json;charset=UTF-8' 'Content-Type': 'application/json;charset=UTF-8'
}, },
data: answersMap data: answersMap // 请求体中的答案数据
}) })
} }
// 获取当前用户所有考试记录的函数
export function getExamRecordList() { export function getExamRecordList() {
return axios({ return axios({
url: api.ExamRecordList, url: api.ExamRecordList,

64
frontend/src/api/index.js
Unescape View File

@ -1,38 +1,34 @@
const api = { const api = {
Login: '/auth/login', // 用户认证相关接口
Logout: '/auth/logout', Login: '/auth/login', // 用户登录接口
ForgePassword: '/auth/forge-password', Logout: '/auth/logout', // 用户登出接口
Register: '/auth/register', ForgePassword: '/auth/forge-password', // 重置密码接口
twoStepCode: '/auth/2step-code', Register: '/auth/register', // 用户注册接口
SendSms: '/account/sms', twoStepCode: '/auth/2step-code', // 双因素认证接口
SendSmsErr: '/account/sms_err', SendSms: '/account/sms', // 发送短信接口
// get my info SendSmsErr: '/account/sms_err', // 发送短信错误处理接口
UserInfo: '/user/info',
// 下面是自己的用户认证的接口 // 用户相关接口
UserRegister: '/user/register', UserRegister: '/user/register', // 用户注册接口
UserLogin: '/user/login', UserLogin: '/user/login', // 用户登录接口
// 考试的接口 // 考试相关接口
ExamQuestionList: '/exam/question/list', ExamQuestionList: '/exam/question/list', // 获取问题列表接口
ExamQuestionAll: '/exam/question/all', ExamQuestionAll: '/exam/question/all', // 获取所有问题接口
ExamQuestionUpdate: '/exam/question/update', ExamQuestionUpdate: '/exam/question/update', // 更新问题接口
ExamQuestionSelection: '/exam/question/selection', ExamQuestionSelection: '/exam/question/selection', // 获取问题分类选项接口
ExamQuestionCreate: '/exam/question/create', ExamQuestionCreate: '/exam/question/create', // 创建问题接口
ExamList: '/exam/list', ExamList: '/exam/list', // 获取考试列表接口
ExamAll: '/exam/all', ExamAll: '/exam/all', // 获取所有考试接口
// 获取问题列表，按照单选、多选和判断进行分类 ExamQuestionTypeList: '/exam/question/type/list', // 获取问题类型列表接口
ExamQuestionTypeList: '/exam/question/type/list', ExamCreate: '/exam/create', // 创建考试接口
ExamCreate: '/exam/create', ExamUpdate: '/exam/update', // 更新考试信息接口
ExamUpdate: '/exam/update', ExamCardList: '/exam/card/list', // 获取考试卡片列表接口
ExamCardList: '/exam/card/list', ExamDetail: '/exam/detail/', // 获取考试详情接口
// 获取考试详情 QuestionDetail: '/exam/question/detail/', // 获取问题详情接口
ExamDetail: '/exam/detail/', FinishExam: '/exam/finish/', // 提交考试接口
// 获取考试详情 ExamRecordList: '/exam/record/list', // 获取考试记录列表接口
QuestionDetail: '/exam/question/detail/', recordDetail: '/exam/record/detail' // 获取考试记录详情接口
// 交卷
FinishExam: '/exam/finish/',
ExamRecordList: '/exam/record/list',
recordDetail: '/exam/record/detail/'
} }
export default api
export default api;

48
frontend/src/api/login.js
Unescape View File

@ -1,62 +1,62 @@
import api from './index' // 导入api对象，它包含了所有API端点的路径
import { axios } from '../utils/request' import api from './index';
// 导入axios库，用于发送HTTP请求
import { axios } from '../utils/request';
/** /**
* login func * 用户登录函数
* parameter: { * @param {Object} parameter - 登录所需的参数对象，包含用户名、密码、记住我、验证码等属性
* username: '', * @returns {Promise} - 返回axios请求的Promise对象
* password: '',
* remember_me: true,
* captcha: '12345'
* }
* @param parameter
* @returns {*}
*/ */
export function login(parameter) { export function login(parameter) {
return axios({ return axios({
// 用户登录接口改成自己的 // 用户登录接口改成自己的登录接口
url: api.UserLogin, url: api.UserLogin, // 使用从api对象中导入的UserLogin路径
method: 'post', method: 'post',
data: parameter data: parameter // 将登录参数对象传递给服务器
}) })
} }
// 获取验证码的函数
export function getSmsCaptcha(parameter) { export function getSmsCaptcha(parameter) {
return axios({ return axios({
url: api.SendSms, url: api.SendSms, // 发送短信的API端点
method: 'post', method: 'post',
data: parameter data: parameter // 传递给服务器的参数，用于获取验证码
}) })
} }
// 获取用户信息的函数
export function getInfo() { export function getInfo() {
return axios({ return axios({
url: api.UserInfo, url: api.UserInfo, // 获取用户信息的API端点
method: 'get', method: 'get',
headers: { headers: {
'Content-Type': 'application/json;charset=UTF-8' 'Content-Type': 'application/json;charset=UTF8' // 设置请求头，指定内容类型
} }
}) })
} }
// 用户登出的函数
export function logout() { export function logout() {
return axios({ return axios({
url: api.Logout, url: api.Logout, // 登出的API端点
method: 'post', method: 'post',
headers: { headers: {
'Content-Type': 'application/json;charset=UTF-8' 'Content-Type': 'application/json;charset=UTF8' // 设置请求头，指定内容类型
} }
}) })
} }
/** /**
* get user 2step code open? * 获取用户双因素认证的第二步代码
* @param parameter {*} * @param {Object} parameter - 用于双因素认证的参数对象
* @returns {Promise} - 返回axios请求的Promise对象
*/ */
export function get2step(parameter) { export function get2step(parameter) {
return axios({ return axios({
url: api.twoStepCode, url: api.twoStepCode, // 双因素认证的第二步接口
method: 'post', method: 'post',
data: parameter data: parameter // 传递给服务器的参数，用于双因素认证
}) })
} }

31
frontend/src/api/user.js
Unescape View File

@ -1,20 +1,27 @@
// 自己的借口呀:用户的注册和登录等服务，注意所有的接口应该都现在index.js里面注册，方便统一管理 // 导入api对象，它包含了所有API端点的路径
// 这些端点应该在index.js文件中定义，以便于统一管理
import api from './index' import api from './index';
import { axios } from '../utils/request' // 导入axios库，用于发送HTTP请求
import { axios } from '../utils/request';
// 定义登录函数
// 该函数接收一个参数对象，包含登录所需的信息
export function login(parameter) { export function login(parameter) {
// 使用axios发送POST请求到用户登录的API端点
return axios({ return axios({
url: api.UserLogin, url: api.UserLogin, // 用户登录的API端点
method: 'post', method: 'post', // 请求方法为POST
data: parameter data: parameter // 发送到服务器的数据，即登录参数
}) });
} }
// 定义注册函数
// 该函数接收一个参数对象，包含注册所需的信息
export function register(parameter) { export function register(parameter) {
// 使用axios发送POST请求到用户注册的API端点
return axios({ return axios({
url: api.UserRegister, url: api.UserRegister, // 用户注册的API端点
method: 'post', method: 'post', // 请求方法为POST
data: parameter data: parameter // 发送到服务器的数据，即注册参数
}) });
} }
Write Preview
Loading…
Cancel
Save