diff --git a/frontend/public/index.html b/frontend/public/index.html index fd87ff4..88c44bd 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -1,24 +1,35 @@ + + + + + 在线考试系统 + + +
+
+
+
- + diff --git a/frontend/src/api/exam.js b/frontend/src/api/exam.js index c6d98b5..f903f1d 100644 --- a/frontend/src/api/exam.js +++ b/frontend/src/api/exam.js @@ -3,23 +3,30 @@ import api from './index' import { axios } from '../utils/request' +// 导出一个函数，用于获取问题列表 export function getQuestionList (parameter) { + // 使用axios发送get请求，获取问题列表 return axios({ - url: api.ExamQuestionList, - method: 'get', - params: parameter + url: api.ExamQuestionList, // 请求的URL + method: 'get', // 请求的方法 + params: parameter // 请求的参数 }) } +// 导出一个函数，用于获取所有题目 export function getQuestionAll () { + // 使用axios发送get请求，获取所有题目 return axios({ url: api.ExamQuestionAll, method: 'get' }) } +// 导出一个名为questionUpdate的函数，参数为parameter export function questionUpdate (parameter) { + // 打印参数 console.log(parameter) + // 返回一个axios请求，请求的url为api.ExamQuestionUpdate，请求方法为post，请求的数据为parameter return axios({ url: api.ExamQuestionUpdate, method: 'post', @@ -27,18 +34,26 @@ export function questionUpdate (parameter) { }) } +// 导出一个函数，用于获取题目选择 export function getQuestionSelection () { + // 使用axios发送get请求，获取题目选择 return axios({ + // 请求的URL url: api.ExamQuestionSelection, + // 请求的方法 method: 'get', + // 请求的头部信息 headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) } +// 导出一个名为questionCreate的函数，参数为parameter export function questionCreate (parameter) { + // 打印参数 console.log(parameter) + // 使用axios发送post请求，url为api.ExamQuestionCreate，参数为parameter return axios({ url: api.ExamQuestionCreate, method: 'post', @@ -46,7 +61,9 @@ export function questionCreate (parameter) { }) } +// 导出一个函数，用于获取考试列表 export function getExamList (parameter) { + // 使用axios发送get请求，获取考试列表 return axios({ url: api.ExamList, method: 'get', @@ -54,15 +71,18 @@ export function getExamList (parameter) { }) } +// 导出一个函数，用于获取所有考试 export function getExamAll () { + // 使用axios发送get请求，获取所有考试 return axios({ url: api.ExamAll, method: 'get' }) } -// 获取所有问题，按照单选、多选和判断进行分类 +// 导出一个函数，用于获取所有问题，按照单选、多选和判断进行分类 export function getExamQuestionTypeList () { + // 使用axios发送get请求，获取所有问题，按照单选、多选和判断进行分类 return axios({ url: api.ExamQuestionTypeList, method: 'get', @@ -72,7 +92,9 @@ export function getExamQuestionTypeList () { }) } +// 导出一个函数，用于获取考试卡片列表 export function getExamCardList () { + // 使用axios发送get请求，获取考试卡片列表 return axios({ url: api.ExamCardList, method: 'get', @@ -82,8 +104,11 @@ export function getExamCardList () { }) } +// 导出一个函数examCreate，用于创建考试 export function examCreate (parameter) { + // 打印传入的参数 console.log(parameter) + // 返回一个axios请求，请求的url为api.ExamCreate，请求方法为post，请求的数据为parameter return axios({ url: api.ExamCreate, method: 'post', @@ -91,36 +116,44 @@ export function examCreate (parameter) { }) } +// 导出一个函数examUpdate，用于更新考试 export function examUpdate (parameter) { + // 打印传入的参数 console.log(parameter) + // 返回一个axios请求，请求的url为api.ExamUpdate，请求方法为post，请求的数据为parameter return axios({ url: api.ExamUpdate, method: 'post', data: parameter }) } - +// 导出一个函数，用于获取考试详情 export function getExamDetail (examId) { + // 使用axios发送get请求，获取考试详情 return axios({ - url: api.ExamDetail + examId, - method: 'get', + url: api.ExamDetail + examId, // 请求的URL，拼接了examId + method: 'get', // 请求方法为get headers: { - 'Content-Type': 'application/json;charset=UTF-8' + 'Content-Type': 'application/json;charset=UTF-8' // 设置请求头，指定请求体的类型为json } }) } +// 导出一个函数，用于获取考试记录详情 export function getExamRecordDetail (recordId) { + // 使用axios发送get请求，获取考试记录详情 return axios({ - url: api.recordDetail + recordId, - method: 'get', + url: api.recordDetail + recordId, // 请求的URL，拼接了recordId + method: 'get', // 请求方法为get headers: { - 'Content-Type': 'application/json;charset=UTF-8' + 'Content-Type': 'application/json;charset=UTF-8' // 设置请求头，指定请求体的类型为json } }) } +// 导出一个函数，用于获取问题详情 export function getQuestionDetail (questionId) { + // 使用axios发送get请求，获取问题详情 return axios({ url: api.QuestionDetail + questionId, method: 'get', @@ -130,8 +163,11 @@ export function getQuestionDetail (questionId) { }) } +// 导出一个函数，用于完成考试 export function finishExam (examId, answersMap) { + // 打印答案 console.log(answersMap) + // 使用axios发送post请求，完成考试 return axios({ url: api.FinishExam + examId, method: 'post', @@ -142,7 +178,9 @@ export function finishExam (examId, answersMap) { }) } +// 导出一个函数，用于获取考试记录列表 export function getExamRecordList () { + // 使用axios发送get请求，获取考试记录列表 return axios({ url: api.ExamRecordList, method: 'get', diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js index 05423bf..ad27273 100644 --- a/frontend/src/api/index.js +++ b/frontend/src/api/index.js @@ -1,38 +1,61 @@ +// 定义一个api对象，包含各种接口的路径 const api = { + // 登录接口 Login: '/auth/login', + // 登出接口 Logout: '/auth/logout', + // 密码找回接口 ForgePassword: '/auth/forge-password', + // 注册接口 Register: '/auth/register', + // 二维码接口 twoStepCode: '/auth/2step-code', + // 发送短信接口 SendSms: '/account/sms', + // 发送短信错误接口 SendSmsErr: '/account/sms_err', - // get my info + // 获取用户信息接口 UserInfo: '/user/info', // 下面是自己的用户认证的接口 + // 用户注册接口 UserRegister: '/user/register', + // 用户登录接口 UserLogin: '/user/login', // 考试的接口 + // 获取问题列表接口 ExamQuestionList: '/exam/question/list', + // 获取所有问题接口 ExamQuestionAll: '/exam/question/all', + // 更新问题接口 ExamQuestionUpdate: '/exam/question/update', + // 选择问题接口 ExamQuestionSelection: '/exam/question/selection', + // 创建问题接口 ExamQuestionCreate: '/exam/question/create', + // 获取考试列表接口 ExamList: '/exam/list', + // 获取所有考试接口 ExamAll: '/exam/all', - // 获取问题列表，按照单选、多选和判断进行分类 + // 获取问题列表，按照单选、多选和判断进行分类接口 ExamQuestionTypeList: '/exam/question/type/list', + // 创建考试接口 ExamCreate: '/exam/create', + // 更新考试接口 ExamUpdate: '/exam/update', + // 获取考试卡片列表接口 ExamCardList: '/exam/card/list', - // 获取考试详情 + // 获取考试详情接口 ExamDetail: '/exam/detail/', - // 获取考试详情 + // 获取问题详情接口 QuestionDetail: '/exam/question/detail/', - // 交卷 + // 交卷接口 FinishExam: '/exam/finish/', + // 获取考试记录列表接口 ExamRecordList: '/exam/record/list', + // 获取考试记录详情接口 recordDetail: '/exam/record/detail/' } -export default api +// 导出api对象 +export default api \ No newline at end of file diff --git a/frontend/src/api/login.js b/frontend/src/api/login.js index 9f71d6b..499e599 100644 --- a/frontend/src/api/login.js +++ b/frontend/src/api/login.js @@ -4,15 +4,24 @@ import { axios } from '../utils/request' /** * login func * parameter: { + * * username: '', + * * password: '', + * * remember_me: true, + * + * * captcha: '12345' + * * } * @param parameter + * * @returns {*} */ +// 导出一个名为login的函数，参数为parameter export function login (parameter) { + // 使用axios发送post请求，请求地址为api.UserLogin，参数为parameter return axios({ // 用户登录接口改成自己的 url: api.UserLogin, @@ -21,7 +30,9 @@ export function login (parameter) { }) } +// 导出一个函数，用于获取短信验证码 export function getSmsCaptcha (parameter) { + // 使用axios发送post请求，请求的url为api.SendSms，参数为parameter return axios({ url: api.SendSms, method: 'post', @@ -29,20 +40,27 @@ export function getSmsCaptcha (parameter) { }) } +// 导出一个函数，用于获取用户信息 export function getInfo () { + // 使用axios发送get请求，获取用户信息 return axios({ + // 请求的URL url: api.UserInfo, + // 请求的方法 method: 'get', + // 请求的头部信息 headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) } - +// 导出一个名为logout的函数 export function logout () { + // 使用axios发送post请求，请求地址为api.Logout return axios({ url: api.Logout, method: 'post', + // 设置请求头，内容类型为application/json;charset=UTF-8 headers: { 'Content-Type': 'application/json;charset=UTF-8' } @@ -51,12 +69,15 @@ export function logout () { /** * get user 2step code open? + * * @param parameter {*} */ +// 导出一个名为get2step的函数，参数为parameter export function get2step (parameter) { + // 使用axios发送post请求，请求的url为api.twoStepCode，请求的数据为parameter return axios({ url: api.twoStepCode, method: 'post', data: parameter }) -} +} \ No newline at end of file diff --git a/frontend/src/api/user.js b/frontend/src/api/user.js index 71e361b..de93491 100644 --- a/frontend/src/api/user.js +++ b/frontend/src/api/user.js @@ -3,7 +3,9 @@ import api from './index' import { axios } from '../utils/request' +// 导出一个名为login的函数，用于用户登录 export function login (parameter) { + // 使用axios发送post请求，请求地址为api.UserLogin，请求参数为parameter return axios({ url: api.UserLogin, method: 'post', @@ -11,7 +13,9 @@ export function login (parameter) { }) } +// 导出一个名为register的函数，用于用户注册 export function register (parameter) { + // 使用axios发送post请求，请求地址为api.UserRegister，请求参数为parameter return axios({ url: api.UserRegister, method: 'post', diff --git a/frontend/src/components/DescriptionList/DescriptionList.vue b/frontend/src/components/DescriptionList/DescriptionList.vue index cb84bec..c1ad09b 100644 --- a/frontend/src/components/DescriptionList/DescriptionList.vue +++ b/frontend/src/components/DescriptionList/DescriptionList.vue @@ -1,6 +1,9 @@ - + +
{{ config[type].desc }}
+ +
+ 返回首页 +
+ + + + \ No newline at end of file diff --git a/frontend/src/components/GlobalFooter/GlobalFooter.vue b/frontend/src/components/GlobalFooter/GlobalFooter.vue index 10bee3a..2d36d27 100644 --- a/frontend/src/components/GlobalFooter/GlobalFooter.vue +++ b/frontend/src/components/GlobalFooter/GlobalFooter.vue @@ -1,20 +1,30 @@ + \ No newline at end of file diff --git a/frontend/src/components/PageHeader/PageHeader.vue b/frontend/src/components/PageHeader/PageHeader.vue index b9df938..1684e7b 100644 --- a/frontend/src/components/PageHeader/PageHeader.vue +++ b/frontend/src/components/PageHeader/PageHeader.vue @@ -1,27 +1,41 @@ + \ No newline at end of file diff --git a/frontend/src/components/tools/TwoStepCaptcha.vue b/frontend/src/components/tools/TwoStepCaptcha.vue index 01302b4..30caa71 100644 --- a/frontend/src/components/tools/TwoStepCaptcha.vue +++ b/frontend/src/components/tools/TwoStepCaptcha.vue @@ -41,6 +41,7 @@ diff --git a/frontend/src/core/bootstrap.js b/frontend/src/core/bootstrap.js index 77dd22b..88f01c0 100644 --- a/frontend/src/core/bootstrap.js +++ b/frontend/src/core/bootstrap.js @@ -15,18 +15,30 @@ import { } from '../store/mutation-types' import config from '../config/defaultSettings' +// 导出一个默认的初始化函数 export default function Initializer () { + // 从localStorage中获取SIDEBAR_TYPE，如果不存在则默认为true，并提交给store store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true)) + // 从localStorage中获取DEFAULT_THEME，如果不存在则默认为config.navTheme，并提交给store store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme)) + // 从localStorage中获取DEFAULT_LAYOUT_MODE，如果不存在则默认为config.layout，并提交给store store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout)) + // 从localStorage中获取DEFAULT_FIXED_HEADER，如果不存在则默认为config.fixedHeader，并提交给store store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader)) + // 从localStorage中获取DEFAULT_FIXED_SIDEMENU，如果不存在则默认为config.fixSiderbar，并提交给store store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar)) + // 从localStorage中获取DEFAULT_CONTENT_WIDTH_TYPE，如果不存在则默认为config.contentWidth，并提交给store store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth)) + // 从localStorage中获取DEFAULT_FIXED_HEADER_HIDDEN，如果不存在则默认为config.autoHideHeader，并提交给store store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader)) + // 从localStorage中获取DEFAULT_COLOR_WEAK，如果不存在则默认为config.colorWeak，并提交给store store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak)) + // 从localStorage中获取DEFAULT_COLOR，如果不存在则默认为config.primaryColor，并提交给store store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor)) + // 从localStorage中获取DEFAULT_MULTI_TAB，如果不存在则默认为config.multiTab，并提交给store store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab)) + // 从localStorage中获取ACCESS_TOKEN，并提交给store store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN)) - // last step + // 最后一步 } diff --git a/frontend/src/core/directives/action.js b/frontend/src/core/directives/action.js index 7ea921e..422f25a 100644 --- a/frontend/src/core/directives/action.js +++ b/frontend/src/core/directives/action.js @@ -14,16 +14,25 @@ import store from '../../store' * * @see https://github.com/sendya/ant-design-pro-vue/pull/53 */ +// 定义一个名为action的Vue指令 const action = Vue.directive('action', { + // 当被绑定的元素插入到 DOM 中时…… inserted: function (el, binding, vnode) { + // 获取指令的参数，即actionName const actionName = binding.arg + // 获取当前用户的角色 const roles = store.getters.roles + // 获取当前路由的权限 const elVal = vnode.context.$route.meta.permission + // 将权限转换为数组 const permissionId = elVal instanceof String && [elVal] || elVal + // 遍历当前用户的权限 roles.permissions.forEach(p => { + // 如果当前权限不包含在路由权限中，则返回 if (!permissionId.includes(p.permissionId)) { return } + // 如果当前权限的actionList中不包含指令的参数，则移除元素或隐藏元素 if (p.actionList && !p.actionList.includes(actionName)) { el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none') } diff --git a/frontend/src/core/lazy_use.js b/frontend/src/core/lazy_use.js index 3332a8c..215d8f8 100644 --- a/frontend/src/core/lazy_use.js +++ b/frontend/src/core/lazy_use.js @@ -11,10 +11,15 @@ import VueClipboard from 'vue-clipboard2' import PermissionHelper from '../utils/helper/permission' import './directives/action' +// 设置VueClipboard自动设置容器 VueClipboard.config.autoSetContainer = true +// 使用Viser插件 Vue.use(Viser) +// 使用VueStorage插件，并传入配置参数 Vue.use(VueStorage, config.storageOptions) +// 使用VueClipboard插件 Vue.use(VueClipboard) +// 使用PermissionHelper插件 Vue.use(PermissionHelper) diff --git a/frontend/src/core/use.js b/frontend/src/core/use.js index 10846db..8d13052 100644 --- a/frontend/src/core/use.js +++ b/frontend/src/core/use.js @@ -14,12 +14,19 @@ import PermissionHelper from '../utils/helper/permission' // import '../components/use' import './directives/action' +// 设置VueClipboard自动设置容器 VueClipboard.config.autoSetContainer = true +// 使用Antd组件库 Vue.use(Antd) +// 使用Viser组件库 Vue.use(Viser) +// 使用VueStorage插件，并传入配置参数 Vue.use(VueStorage, config.storageOptions) +// 使用VueClipboard插件 Vue.use(VueClipboard) +// 使用PermissionHelper插件 Vue.use(PermissionHelper) +// 使用VueCropper插件 Vue.use(VueCropper) diff --git a/frontend/src/layouts/BasicLayout.vue b/frontend/src/layouts/BasicLayout.vue index 336b237..bee03c4 100644 --- a/frontend/src/layouts/BasicLayout.vue +++ b/frontend/src/layouts/BasicLayout.vue @@ -1,6 +1,7 @@ -