外贸营销网站建站,设计制作实践活动,好的国内网站建设公司,施工企业安全生产资金使用记录模板登录页面设计 登录页面设计思路-分为三个角色进行登录#xff0c;分别为学生#xff0c;教师#xff0c;管理员。 前端将登录设计为表单形式#xff0c;通过选项组件绑定角色参数#xff0c;向后端传递角色信息#xff0c;通过表单绑定向后端传递登录者所有信息 div …登录页面设计 登录页面设计思路-分为三个角色进行登录分别为学生教师管理员。 前端将登录设计为表单形式通过选项组件绑定角色参数向后端传递角色信息通过表单绑定向后端传递登录者所有信息 div styledisplay: flex; gap: 20px;vs-radio colorrgb(59,222,200) v-modelform.type val学生学生/vs-radiovs-radio v-modelform.type val教师教师/vs-radiovs-radio danger v-modelform.type val管理员管理员/vs-radio/div PostMapping(/user/login)public MapString,Object Login(RequestBody User user){MapString,Object map new HashMap();User u userService.LoginByUserName(user.getUserNumber());MapString,Stringpayload new HashMap();if(u!null){if(user.getPassword().equals(u.getPassword()) user.getType().equals(u.getType())){if (u.getType().equals(学生)){String className userService.FindClassNameByClassId(u.getClassid());map.put(className,className);}payload.put(id,u.getId().toString());payload.put(username,u.getUserNumber());String token JWTUtil.createToken(payload);System.out.println(token为token);map.put(UserInfo,u);map.put(userId,u.getId());map.put(code,200);map.put(status,token);map.put(msg,登陆成功);}else {map.put(msg,密码错误);map.put(status,0);}}else{map.put(msg,不存在该用户);map.put(status,0);}return map;} 通过在数据库中存入type字段实现与后台对接并实现特定角色登录 考试系统设计
附一张设计手稿随笔字丑请忽略 设计思路可结合下面数据表进行理解 1.试卷表每一张试卷都对应一个特有的PaperId并且在表中存有PaperName试卷名PaperTime考试时间PaperImageSrc考试封面图后续可以自信添加字段丰富考卷所具有的信息。 2.题目表每一道题目都有一个PaperId可以以此将隶属与对应试卷的题目信息读取每一道题目含有独有的QuestionId题目IDQuestionContent题目内容QuestionScore题目的得分可以通过组卷时设置对应分数实现灵活组卷QuestionType题目类型通过这个字段可以定义题目对应的不同类型。 3.题目细节表每一条数据都有一个独有的QuestionId可以让它属于对应的题目QuesitonOption题目选项表设置ABCD等类型的选项内容可以通过读取对应细节有几条数据来设置它为单选题还是填空题QuestionCorrect选项是否正确通过此字段判断选项正确与否。 4.题目商店表用于老师的组卷功能QuestionIdQuestionContentQuestionTypeQuestionTheme问题主题方便用于搜索但是VueSax搜索不需要后端数据即可实现。 思路串联 一、用户对应考卷的设计通过UserNumber字段从f_exam_userneedexam表中查询该用户对应的所有PaperId然后通过此PaperId查询f_exam_paper表中考卷具体信息即可展示用户对应所需的考试信息。 二、考卷的设计一张试卷对应独特的PaperId一道题目衔接对应的PaperId衔接试卷表题目选项衔接对应的QuestionId衔接题目表。 //把试卷组好GetMapping(/exam/SelectAllQustionByPaperIdUpdate)public ListQuestionWithOptions SelectAllQustionByPaperIdUpdate(RequestParam Integer PaperId){ListQuestionWithOptions questionsWithOptions new ArrayList();ListQuestions allQuestions userExamService.SelectAllQustionByPaperIdUpdate(PaperId);for (Questions question : allQuestions) {ListOptions options userExamService.SelectAllQustionByQuestionId(question.getQuestionId());QuestionWithOptions questionWithOptions new QuestionWithOptions(question, options);questionsWithOptions.add(questionWithOptions);}// System.out.println(第一组数据测试获取问题列表questionsWithOptions.get(0).getQuestion());
// System.out.println(第一组数据测试获取选项列表questionsWithOptions.get(0).getOptions());
// System.out.println(第一组数据测试获取选项列表的第一个选项内容questionsWithOptions.get(0).getOptions().get(0));
// System.out.println(第一组数据测试获取选项列表的第二个选项内容questionsWithOptions.get(0).getOptions().get(1));
// System.out.println(第一组数据questionsWithOptions.get(0));
// System.out.println(返回的最终数据questionsWithOptions);return questionsWithOptions;}
Data
public class QuestionWithOptions {private Questions question;private ListOptions options;
} vs-dialog scroll overflow-hidden auto-width blur not-close :prevent-closetrue full-screen v-modelExamActivedivh1考卷/h1div v-for(questionWithOptions, index) in examQuestions :keyindexh2{{ questionWithOptions.question.questionContent }}/h2div v-for(option, i) in questionWithOptions.options :keyilabel
!-- vs-checkbox :valueoption v-modelselectedOptions[index]--
!-- {{ option.questionOption }}--
!-- /vs-checkbox--input typeradio :valueoption v-modelselectedOptions[index]{{ option.questionOption }}/label/div/divvs-button gradient clicksubmitExam提交/vs-button/div/vs-dialog
export default {data(){return{UserNumber:,UserName:,examInfo:[],active: false,input1: ,input2: ,checkbox1: false,ExamActive: false,examQuestions: [], // 包含问题和选项的数组selectedOptions: [], // 用户选择的答案// JSON格式理解//// 数组和对象// LJL:[ ExamRecord:{// PaperId: ,// ExamUserNumber: ,// ExamUserName: ,// },, ExamRecord1:{// PaperId: ,// ExamUserNumber: ,// ExamUserName: ,// },]ExamRecord:{paperId: ,examUserNumber: ,examUserName: ,},UserAnswer:{Answers:,UserNumber:,UserName:,PaperId:,},PaperId:}},methods:{StartExam(){this.active !this.active;this.ExamActive !this.ExamActive;this.ExamRecord {paperId: this.PaperId,examUserNumber: this.UserNumber,examUserName: this.UserName};//插入开考记录this.$ExamApi.insertRecordFromStartExam(this.ExamRecord).then(res{console.log(this.ExamRecord)}).catch(errconsole.log(err))},SelectExamByPaperId(paperId) {this.active !this.activethis.PaperId paperIdthis.$ExamApi.SelectAllQustionByPaperIdUpdate(paperId).then(res{this.examQuestions res.dataconsole.log(res.data)// 初始化选项this.selectedOptions new Array(this.examQuestions.length).fill();console.log(this.selectedOptions)}).catch(errconsole.log(err))// 这里可以根据 paperId 执行你需要的逻辑比如打开对应考试的详情页面等},submitExam() {this.UserAnswer{Answers: this.selectedOptions,UserName: this.UserName,UserNumber: this.UserNumber,PaperId: this.PaperId}this.$ExamApi.insertUserAnswerAndSubmitExamToAddScore(this.UserAnswer).then(res{console.log(this.UserAnswer)this.openNotification(top-center, #7d33ff, i classbx bx-bell /i)this.ExamActive !this.ExamActive})// 这里可以将用户的答案发送给后端进行处理},//获取当前用户所需要的考试信息UserNeedExamByUserNumber(){// this.$loginApi.UserLogin(this.loginData).then(res{this.$ExamApi.UserNeedExamByUserNumber(this.UserNumber).then(res{this.examInfo res.data.dataobjectconsole.log(查询到的考试信息为)console.log(this.examInfo)}).catch(errconsole.log(err))},getCoverUrl(coverUrl) {return this.$config.getBaseUrl()coverUrl;},//消息通知框openNotification(position null, color, icon) {const noti this.$vs.notification({icon,color,position,title: 恭喜您顺利完成了测试,text: 您将可以在考试查询界面查询到自己的成绩以及答题情况})}},mounted() {this.UserNumber sessionStorage.getItem(userNumber);this.UserName sessionStorage.getItem(userName);this.UserNeedExamByUserNumber();}
} 三、点击开考的设计向f_exam_record考试记录表中插入考试人员信息ExamUserNumberExamUserName开考时间ExamStartTime对应试卷PaperId。此时每条数据对应的ExamScore和ExamEndTime为空通过交卷执行Update操作进行记录。 四、点击交卷的设计 将用户所选的选项进行遍历分别插入f_exam_user_answer用户答题内容表用于查看用户答题具体情况即生成一份用户答题内容卷记录用户所答题的具体信息。 通过以下代码获取此用户所作的卷子记录通过用户学号开考时间的降序排序限制为一条数据获取用户当前所考的最新试卷用于插入交卷时间和总分 !-- 获得记录Id--select idSelectRecordId parameterTypeString resultTypeIntegerSELECT * from f_exam_record where ExamUserNumber #{ExamUserNumber} ORDER BY ExamStartTime DESC LIMIT 1/select 通过遍历questionCorrect字段以获取哪条记录为正确选项如果questionCorrect为true通过此记录的QuestionId和PaperId在f_exam_question表中查找此题对应的QuestionScore值然后在此时定义Score对象进行计算总分避免了异步冲突然后将总分以及交卷时间插入记录表格。 PostMapping(/exam/insertUserAnswerAndSubmitExamToAddScore)public void insertUserAnswer(RequestBody MapString, Object requestData) {ListMapString, Object answersMapList (ListMapString, Object) requestData.get(Answers);String userName (String) requestData.get(UserName);String userNumber (String) requestData.get(UserNumber);Integer recordId userExamService.SelectRecordId(userNumber);Integer PaperId (Integer) requestData.get(PaperId);int score 0;for (MapString, Object answerMap : answersMapList) {UserAnswer userAnswer new UserAnswer();userAnswer.setId((int) answerMap.get(id));userAnswer.setQuestionId((int) answerMap.get(questionId));userAnswer.setQuestionOption((String) answerMap.get(questionOption));userAnswer.setQuestionCorrect((boolean) answerMap.get(questionCorrect));userAnswer.setExamUserNumber(userNumber);userAnswer.setExamUserName(userName);userAnswer.setRecordId(recordId);userExamService.insertUserAnswer(userAnswer);if((Boolean) answerMap.get(questionCorrect)true){ExamRequestScore examRequestScore new ExamRequestScore();examRequestScore.setPaperId(PaperId);examRequestScore.setQuestionId(userAnswer.getQuestionId());Integer s userExamService.selectScoreFromStoreByQuestionIdAndPaperId(examRequestScore);score sscore;System.out.println(编号为userAnswer.getQuestionId()的问题回答正确并且正确答案的分数为:s);System.out.println(总分为score);}}ExamRecord examRecord new ExamRecord();examRecord.setPaperId(PaperId);examRecord.setExamUserNumber(userNumber);examRecord.setExamScore(score);System.out.println(examRecordexamRecord);userExamService.updateRecordFromEndExam(examRecord);} 数据库分为 题目所对应的数据表 试卷表 题目表 题目细节表选项表 题目商店表题库表 用户考试对应的表 用户所需考试表 用户考试记录表 用户答题记录表 附一些界面设计截图
