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

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

资源

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

业务

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

 

源码

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

 

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119116793