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
Vue回炉重造之搭建考试答卷系统的更多相关文章
- Vue回炉重造之封装防刷新考试倒计时组件
<!-- 考试倒计时组件 --> <template> <div class="time"> <p>00:{{timerCount2 ...
- Vue回炉重造之如何使用props、emit实现自定义双向绑定
下面我将使用Vue自带的属性实现简单的双向绑定. 下面的例子就是利用了父组件传给子组件(在子组件定义props属性,在父组件的子组件上绑定属性),子组件传给父组件(在子组件使用$emit()属性定义一 ...
- Vue回炉重造之封装一个实用的人脸识别组件
前言 人脸识别技术现在越来越火,那么我们今天教大家实现一个人脸识别组件. 资源 element UI Vue.js tracking-min.js face-min.js 源码 由于我们的电脑有的有摄 ...
- Vue回炉重造之router路由(更新中)
安装vue-router npm i vue-router -S 配置1.创建文件夹与文件 创建一个router文件夹,在文件夹中创建两个文件,分别是router.js和routes.js文件.2.编 ...
- Vue回炉重造之图片加载性能优化
前言 图片加载优化对于一个网站性能好坏起着至关重要的作用.所以我们使用Vue来操作一波.备注 以下的优化一.优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的 ...
- Vue回炉重造之三次封装axios
源码目录 在src目录下建立一个request文件夹.里面建立两个文件: http.js api.js 源码内容 http.js import axios from 'axios' // 引入axio ...
- Asp.Net SignalR 使用记录 技术回炉重造-总纲 动态类型dynamic转换为特定类型T的方案 通过对象方法获取委托_C#反射获取委托_ .net core入门-跨域访问配置
Asp.Net SignalR 使用记录 工作上遇到一个推送消息的功能的实现.本着面向百度编程的思想.网上百度了一大堆.主要的实现方式是原生的WebSocket,和SignalR,再次写一个关于A ...
- 《回炉重造 Java 基础》——集合(容器)
整体框架 绿色代表接口/抽象类:蓝色代表类. 主要由两大接口组成,一个是「Collection」接口,另一个是「Map」接口. 前言 以前刚开始学习「集合」的时候,由于没有好好预习,也没有学好基础知识 ...
- 回炉重造之重读Windows核心编程-006-线程
线程也是有两部分组成的: 线程的内核对象,操作系统用来管理线程和统计线程信息的地方. 线程堆栈,用于维护现场在执行代码的时候用到的所有函数参数和局部变量. 进程是线程的容器,如果进程中有一个以上的线程 ...
随机推荐
- 学习HTML第二天
今日内容: HTML标签:表单标签 CSS HTML标签:表单标签 表单项标签: input:可以通过type属性值,改变元素展示的样式 type属性: text:文本输入框,默认值 placehol ...
- 【技术积累】Eclipse使用系列【第一版】
Eclipse安装(Neon版本) Eclipse 最新版本 Eclipse Neon,这个首次鼓励用户使用 Eclipse Installer 来做安装,这是一种由Eclipse Oomph提供的新 ...
- 不借助 Javascript,利用 SVG 快速构建马赛克效果
之前在公众号转发了好友 Vajoy 的一篇文章 -- 巧用 CSS 把图片马赛克风格化. 核心是利用了 CSS 中一个很有意思的属性 -- image-rendering,它可以用于设置图像缩放算法. ...
- defer综合
A "defer" statement invokes a function whose execution is deferred to the moment the surro ...
- 2021.11.03 P2886 [USACO07NOV]Cow Relays G(矩阵+floyed)
2021.11.03 P2886 [USACO07NOV]Cow Relays G(矩阵+floyed) [P2886 USACO07NOV]Cow Relays G - 洛谷 | 计算机科学教育新生 ...
- Google广告批量投放脚本
该脚本文件是一个转化文件,将编辑的Google投广告模板转化成Google批量投放广告的脚本文件,实现批量投放广告,节省投广时间.PS:要与相应的模板结合使用,投广告模板在本人博客的文件中,可以下载. ...
- 【ASP.NET Core】自己编程来生成自签名的服务器证书
如果项目不大,或者是客户公司内部使用,或者不想花钱购买证书,又或者用于开发阶段测试--完全可以使用自签名证书. 所谓自签,就是自己给自己签名颁发的证书,自给自足,丰衣足食. 生成证书的方法和工具很多, ...
- XCTF练习题---MISC---stage1
XCTF练习题---MISC---stage1 flag:AlphaLab 解题步骤: 1.观察题目,下载附件 2.打开附件后发现是一张图片,初步判断是图片隐写,上Stegsolve进行转换,得到一张 ...
- Ajax简单运用(JavaScript-----jQuery-------)
首先引用 jQuery <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"> ...
- GO语言学习——切片一
切片(slice) 数组的长度的固定的.是声明之后不能变的.是类型的一部分 切片是一个引用类型 切片的定义 声明切片类型的基本语法如下: var name []T 其中, name:表示变量名 T:表 ...