Vue回炉重造之搭建考试答卷系统

痛定思痛。 2021-08-28 15:29 389阅读 0赞

> 你好，我是**Vam的金豆之路**，可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域：**前端开发**。我的微信是 **maomin9761**，有什么疑问可以加我哦，自己创建了一个微信技术交流群，可以加我邀请你一起交流学习。最后自己也创建了一个微信公众号：**前端历劫之路**，欢迎关注。

--------------------

> 欢迎阅读本博文，本博文主要讲述【Vue回炉重造之搭建考试答卷系统】，文字通俗易懂，如有不妥，还请多多指正。

本篇章主要讲述系统搭建逻辑，有疑问的可以加微信联系我。

## 考试系统 ##

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70_pic_center]

## 资源 ##

--------------------

*  Vue.js
 *  Element UI
 *  第三方数据接口

## 业务 ##

--------------------

1.  答题过程中，防止用户中途退出或者其他不可抗力因素阻碍答题，在每次选择都要请求下接口（接口状态为**未交卷**，只是保存用户的答题进度）。
2.  选择答题区与答题卡必须同步，另外右侧的进度条也是同步的。
3.  剩余时间的计算方法（ `begin.getTime() + duration * 1000 - serverTime.getTime()`），  
    即开始考试时间+考试时间-服务器时间，首次进入开始考试时间为空。
4.  考试时间到或者主动交卷都是置为已交卷。

## 源码 ##

--------------------

**Exam.vue**

<template>
      <div class="exam">
        <div class="main">
          <div class="header-wrapper">
            <div class="inner">
              <el-row>
                <el-col :span="18">
                  <div class="grid-content bg-purple ovf left">
                    <div class="logo">
                      <router-link to="/">
                        <img src="../../assets/images/logo.png" />
                      </router-link>
                    </div>
                    <div class="index">{
       {title}}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple right ovf">
                    <div class="esc" @click="esc">退出</div>
                    <div class="name">{
       {name}}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="mian-body">
            <div class="main-side">
              <div class="title">
                <div class="title_border"></div>
                <div class="title_content">答题卡</div>
              </div>
              <div class="card-content-list">
                <div class="card-content">
                  <div class="card-content-title">单选题(共{
       {examinationData.length}}题，合计{
       {full_score}}分)</div>
                  <div class="box-list">
                    <div class="box normal-box question_cbox" v-for="(item,index) in examinationData" :key="index" >
                      <div class="checki" :class="{ 'checked':radio[index]}" v-show="!checkResult" >{
       {index+1}}</div>
                      <div class="checki checked" :class="{ 'check-error':radio[index]}" v-show="checkResult" >{
       {index+1}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="main-center">
              <div class="body-wrapper">
                <div class="questions">
                  <div class="questions-title">单选题(共{
       {examinationData.length}}题，合计{
       {full_score}}分)</div>
                  <div class="questions-content">
                    <div class="question-content" v-for="(item,i) in examinationData" :key="i">
                      
                      <div v-if="item.type=='radiogroup'">
                        <div class="exam-question">
                          <span class="question-index ellipsis">{
       {i+1}}.</span>
                          {
       {item.title}}
                        </div>
                        <div v-if="!checking">
                          <div class="answers" v-for="(son,index) in item.choices" :key="index">
                            <el-radio-group v-model="radio[i]">
                              <el-radio v-model="radio[i]" :label="son.value" :name="son.text" @change="getIputValue(i)" >{
       {son.text}}</el-radio>
                            </el-radio-group>
                          </div>
                        </div>
                        <div v-else>
                          <div class="answers" v-for="(son,index) in item.choices" :key="index">
                            <el-radio-group v-model="checkData[i].value">
                              <el-radio v-model="radio[i]" :label="son.value" :name="son.text" @change="getIputValue(i)" >{
       {son.text}}</el-radio>
                            </el-radio-group>
                          </div>
                        </div>
                      </div>
    
                      <div v-if="item.type=='imagepicker'">
                        <div class="exam-question">
                          <span class="question-index ellipsis">{
       {i+1}}.</span>
                          {
       {item.title}}
                        </div>
                        <div v-if="!checking">
                          <div class="answers" v-for="(son,index) in item.choices" :key="index">
                            <el-radio-group v-model="radio[i]">
                              <el-radio v-model="radio[i]" :label="son.value" :name="son.value" @change="getIputValue(i)" >
                                <img :src="son.imageLink" alt />
                              </el-radio>
                            </el-radio-group>
                          </div>
                        </div>
                        <div v-else>
                          <div class="answers" v-for="(son,index) in item.choices" :key="index">
                            <el-radio-group v-model="checkData[i].value">
                              <el-radio v-model="radio[i]" :label="son.value" :name="son.value" @change="getIputValue(i)" >
                                <img :src="son.imageLink" alt />
                              </el-radio>
                            </el-radio-group>
                          </div>
                        </div>
                      </div>
                      
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="main-right">
              <div class="nav">
                <ul v-show="!checkResult">
                  <li class="menu-item">
                    <div class="item-label">剩余时间</div>
                    <div class="item-data">
                      <Time @show="handInHand" :status="submitView" :examtime="examtime" v-if="examtime!=''" ></Time>
                    </div>
                  </li>
                  <li class="menu-item">
                    <div class="item-label">当前进度</div>
                    <div class="item-press">
                      <span>{
       {radio.filter(v=>v).length}}</span>
                      <span>{
       {examinationData.length}}</span>
                    </div>
                    <div class="percentage">
                      <el-progress :percentage="percentage" :color="customColor"></el-progress>
                    </div>
                  </li>
                </ul>
                
              </div>
              <div class="btn" v-show="!checkResult" @click="submit">提交</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script> import axios from "axios"; import { saveAnswers } from "../../request/api"; import { mapGetters } from "vuex"; import Time from "../../components/module/Time"; // 倒计时组件 export default { name: "Exam", data() { return { checkData: [], checking: false, name: "", examtime: "", title: "", customColor: "#55b6da", percentage: 0, submitView: false, full_score: "", signView: false, // 正确与错误 passView: false, // 通过或者未通过 checkResult: false, // 左侧栏、右侧栏、答题结果栏 options: [ { value: "0", label: "全部" }, { value: "1", label: "答对" }, { value: "2", label: "答错" } ], checkVal: "0", examinationData: "", allRadio: [], //提交给后台的真题数据 radio: [], //单选真题答案, checkLen: [], obj: { value: "" }, answersData: [] }; }, computed: { ...mapGetters(["getInfo"]) }, methods: { // 退出考试系统 esc() { this.$router.push({ path: "/" }); }, // 主动交卷 submit() { this.$confirm("确定交卷吗?", "提示", { distinguishCancelAndClose: true, confirmButtonText: "交卷", cancelButtonText: "不交卷", type: "warning" }) .then(() => { if (this.checking === false) { this.answersData.value = this.radio || ""; this.upAnswer(1, JSON.stringify(this.answersData)); //提交答案 } else { this.upAnswer(1, JSON.stringify(this.checkData)); //提交答案 } this.submitView = true; // 提示已提交 }) .catch(err => { console.log(err); }); }, // 自动交卷（时间到） handInHand() { // this.signView = true; // 正确与错误 // this.passView = true; // 通过或者未通过 // this.checkResult = true; // 左侧栏、右侧栏、答题结果栏 if (this.checking === false) { this.answersData.value = this.radio || ""; this.upAnswer(1, JSON.stringify(this.answersData)); //提交答案 } else { this.upAnswer(1, JSON.stringify(this.checkData)); //提交答案 } }, // 提交答案接口 upAnswer(finish, answers) { let postData = { exam_id: Number(this.$route.params.id), finish: finish, answers: answers }; saveAnswers(postData) .then(res => { if (res.code == 0) { console.log("提交/保存答案成功") } else if (res.code == 201) { this.$message.success({ message: res.msg, offset: 380, duration: 1000 }); } else { this.$message.warning({ message: res.msg, offset: 380, duration: 1000 }); } }) .catch(err => { console.log(err); }); }, // 获取考试题 get() { if (this.$route.params.id != "" && this.$route.params.id != undefined) { axios .get("/api/exams/" + this.$route.params.id) .then(res => { if (res.data.code == 0) { let data = res.data.data.item.exercise; this.title = res.data.data.item.name; this.examtime = this.toHHmmss( this.madeTime( res.data.serverTime, res.data.data.userExam.begin_at, res.data.data.item.duration ) ); this.examinationData = data.pages[0].elements; this.examinationData.forEach((item, i) => { this.answersData[i] = { value: "" }; }); if (res.data.data.userExam.answer != null) { let fobj = JSON.parse(res.data.data.userExam.answer); this.checkData = JSON.parse(res.data.data.userExam.answer); fobj.forEach((item, i) => { if (item.value != "") { this.radio[i] = item; } }); this.checking = true; let len = (this.radio.filter(v => v).length / this.examinationData.length) * 100; this.percentage = len; } this.full_score = res.data.data.item.full_score; } }) .catch(err => { console.log(err); }); } }, // 倒计时处理 madeTime(serverTime1, begin1, duration1) { var serverTime = new Date(serverTime1); // 系统时间 var duration = duration1; //考试时间 if (begin1 != null) { var begin = new Date(begin1); //开始时间 var residue = begin.getTime() + duration * 1000 - serverTime.getTime(); // 倒计时 } else { // eslint-disable-next-line no-redeclare var residue = duration * 1000 - serverTime.getTime(); // 倒计时 } return residue; }, // 时间戳时分秒 toHHmmss(data) { let date = { }; let hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60)); let seconds = (data % (1000 * 60)) / 1000; date.hours = hours; date.minutes = minutes; date.seconds = seconds; return date; }, // 选择操作 getIputValue(index) { this.allRadio[index] = this.radio[index]; // 将数据存入提交给后台的数据中 let len = (this.radio.filter(v => v).length / this.examinationData.length) * 100; this.percentage = len; if (this.checking === false) { this.answersData[index].value = this.radio[index] || ""; this.upAnswer(0, JSON.stringify(this.answersData)); //提交答案 } else { this.upAnswer(0, JSON.stringify(this.checkData)); //提交答案 } } }, beforeRouteEnter(to, from, next) { next(() => { // 改变html背景 document.querySelector("html").style.cssText = ` background: #ecf1f6; `; }); }, beforeRouteLeave(to, from, next) { // 消除html背景 document.querySelector("html").style.cssText = `background: #fff;`; // 中途退出提示 this.$confirm("确定中途退出吗, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { next(); }) .catch(); }, components: { Time }, created() { this.get(); }, mounted() { this.name = this.getInfo.name; } }; </script>
    
    
    <style scoped lang="scss"> /deep/ .el-progress__text { display: none; } /deep/ .el-select .el-input__inner:focus { border-color: #55b6da; } /deep/ .el-select { border: none; } /deep/ .el-select-dropdown__item.selected { color: #55b6da !important; font-weight: bold; } /deep/ .el-radio__input.is-checked + .el-radio__label { color: #55b6da; } /deep/ .el-radio__input.is-checked .el-radio__inner { border-color: #55b6da; background: #55b6da; } /deep/ .el-radio__inner:hover { border-color: #55b6da; } /deep/ .el-radio { display: block; margin: 20px 0; } .inner { padding: 0px 90px; } .exam { background: #ecf1f6; height: 100%; min-height: 100%; } .main { .header-wrapper { height: 80px; width: 100%; line-height: 80px; background: #ffffff; box-shadow: 0 2px 4px 0 rgba(153, 153, 153, 0.1); position: fixed; top: 0; left: 0; z-index: 1040; .left { display: flex; align-items: center; font-size: 18px; .logo { width: 150px; margin-right: 120px; img { width: 100%; } } } .right { div { float: right; font-size: 16px; } .esc { width: 120px; height: 38px; line-height: 38px; margin: 21px 0; color: #fff; background: #55b6da; border-radius: 30px; text-align: center; cursor: pointer; user-select: none; &:hover { filter: brightness(80%); } &:active { filter: brightness(60%); } } .name { margin-right: 55px; font-weight: bold; } } } .mian-body { .main-side { display: inline-block; height: calc(100% - 140px); position: fixed; top: 120px; width: 240px; left: 90px; background: #fff; box-shadow: 0 1px 4px 0 rgba(58, 62, 81, 0.1); .title { position: relative; text-align: left; margin: 23px 0px 0px 12px; .title_border { display: inline-block; width: 4px; height: 26px; background: #33394b; border-radius: 15px; position: absolute; top: 0; bottom: 0; margin: auto; } .title_content { margin-left: 14px; font-size: 18px; font-weight: 600; color: #27274a; } } .card-content-list { height: calc(100% - 38px); overflow: auto; .card-content { padding: 0 12px 0 12px; position: relative; .card-content-title { font-size: 14px; color: #27274a; font-weight: 600; padding-bottom: 12px; padding-top: 20px; } .box-list { padding-bottom: 0; position: relative; left: -5px; font-size: 0; margin-right: -15px; .box { height: auto; line-height: unset; position: relative; margin-bottom: 15px; font-size: 14px; width: 35px; margin-top: unset; margin-right: unset; display: inline-block; .checki { border: 1px solid #dcdfe6; color: #dcdfe6; width: 27px; height: 27px; text-align: center; display: inline-block; line-height: 27px; background: #fff; border-radius: 50%; cursor: pointer; } .checked { color: #fff; background: #55b6da; } .check-error { color: #fff; background: #ec6941; } } } } } } .main-center { margin: 120px 230px 0px 360px; height: 100vh; .body-wrapper { color: #27274a; width: 100%; background: #ffffff; border: 1px solid #dedede; border-radius: 4px; .questions-title { font-size: 18px; line-height: 25px; padding: 18px 20px; background: #fafafa; border-bottom: 1px solid #dedede; } .questions-content { padding-left: 30px; padding-right: 75px; } .question-content { border-bottom: 1px solid #dedede; padding: 30px 0; position: relative; &:last-child { border: none; } .exam-question { font-size: 16px; line-height: 22px; margin-bottom: 10px; padding-left: 20px; position: relative; .question-index { color: #55b6da; position: absolute; left: -25px; top: 0; display: inline-block; width: 40px; line-height: 22px; text-align: right; } } .analysis { overflow: auto; background: rgba(222, 222, 222, 0.2); border-radius: 4px; padding: 15px 20px; line-height: 24px; margin-top: 10px; position: relative; .question-icon-wrapper { position: absolute; right: 10px; top: 14px; .sign { width: 48px; height: 28px; position: absolute; color: #fff; top: 10px; right: 0; font-size: 14px; border-radius: 2px; line-height: 28px; text-align: center; font-style: normal; } .icon-error { background: #ec6941; } .icon-right { background: #55b6da; } } .analysis-row { font-size: 14px; margin-top: 10px; min-height: 24px; padding-left: 80px; padding-right: 60px; position: relative; .analysis-title { position: absolute; width: 80px; left: 0; top: 0; } .question-analysis { text-align: justify; } .error { color: #f72a3a; font-weight: bold; } } } } } } .main-right { right: 90px; bottom: 20px; position: fixed; top: 120px; width: 120px; .nav { color: #27274a; line-height: 20px; padding: 0 10px; background: #ffffff; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); border-radius: 4px; margin-bottom: 10px; text-align: center; .menu-item { padding: 14px 0; border-bottom: 1px solid #dedede; } .menu-item:last-child { border: none; } .pass { color: #55b6da; } .item-result, .unpass { color: rgb(236, 105, 65); } .item-label { margin-bottom: 6px; } .item-data { font-size: 18px; line-height: 22px; color: #ff0000; font-weight: 400; } .item-press { line-height: 17px; margin-bottom: 7px; color: #27274a; font-size: 14px; & span:nth-child(1)::after { content: "/"; margin: 0 5px; } } } .btn { bottom: -10px; position: absolute; width: 100%; margin-bottom: 10px; cursor: pointer; text-align: center; height: 38px; line-height: 38px; border-radius: 20px; color: #fff; background: #33394b; user-select: none; &:hover { filter: brightness(120%); } &:active { filter: brightness(60%); } } } } } </style>

**Time.vue**

<template>
      <div class="time">
        <p>{
       {timerHours}}:{
       {timerMinutes}}:{
       {timerSeconds}}</p>
      </div>
    </template>
    
    <script> export default { name: "Time", props: ["status", "examtime"], data() { return { hours: "", seconds: "", minutes: "", timer: null }; }, watch: { status(v) { if (v) { clearInterval(this.timer); this.$emit("show"); } } }, methods: { // 倒计时 timing() { this.timer = setInterval(() => { if (this.seconds == 0&this.minutes>0) { this.seconds = 59; this.minutes--; } else if (this.minutes == 0&&this.hours>0) { this.minutes=59; this.hours--; } else if (this.minutes == 0 && this.seconds == 0 && this.hours == 0) { this.seconds = 0; clearInterval(this.timer); this.$emit("show"); this.$message.warning({ message: "考试时间到，自动交卷！", offset: 380, duration: 1000 }); } else { this.seconds--; } }, 1000); } }, created() { this.minutes = this.examtime.minutes; this.seconds = this.examtime.seconds; this.hours = this.examtime.hours; }, mounted() { this.timing(); }, computed: { timerSeconds() { return this.seconds < 10 ? "0" + this.seconds : "" + this.seconds; }, timerMinutes() { return this.minutes < 10 ? "0" + this.minutes : "" + this.minutes; }, timerHours() { return this.hours < 10 ? "0" + this.hours : "" + this.hours; } }, destroyed() { // 退出后清除计时器 if (this.timer) { clearInterval(this.timer); } } }; </script>
    
    
    <style scoped lang="scss"> </style>

> 谢谢阅读，如果觉得有感触，麻烦帮忙点个赞，关个注吧！

## 广告时间 ##

--------------------

豆哥打广告啦！有兴趣的同学可以看看哦，**CSDN官方出品**，质量没得说。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/6e6a3f1a642644c189df2d6d6579100d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/f6ba0a51cc5544bdab1e9b8c95d69da4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]: /images/20210813/309f8ca6437d41739ed02a68f667fc9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]: /images/20210813/3ccd46d889c74655b1468cf2b781632c.png