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

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

资源

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

业务

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

源码

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

更多请见：http://www.mark-to-win.com/tutorial/50762.html