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

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

资源

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

业务

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

源码

Exam.vue

>
  
class="exam">
    
class="main">
      
class="header-wrapper">
        
class="inner">
          >
            :span="18">
              
class="grid-content bg-purple ovf left">
                
class="logo">
                  to="/">
                    src="../../assets/images/logo.png" />
                  >
                >
                
class="index">{{title}}>
              >
            >
            :span="6">
              
class="grid-content bg-purple right ovf">
                
class="esc" @click="esc">退出>
                
class="name">{{name}}>
              >
            >
          >
        >
      >
      
class="mian-body">
        
class="main-side">
          
class="title">
            
class="title_border">>
            
class="title_content">答题卡>
          >
          
class="card-content-list">
            
class="card-content">
              
class="card-content-title">单选题(共{{examinationData.length}}题，合计{{full_score}}分)>
              
class="box-list">
                
class="box normal-box question_cbox"
                  v-for="(item,index) in examinationData"
                  :key="index"
                >
                  
class="checki"
                    :class="{'checked':radio[index]}"
                    v-show="!checkResult"
                  >{{index+1}}>