vue实现考试中心
Vue实现考试中心功能
使用Vue.js构建考试中心功能需要结合前端框架、状态管理和后端API交互。以下是实现考试中心的关键步骤和代码示例。
项目结构设计
src/
├── components/
│ ├── ExamList.vue # 考试列表
│ ├── ExamDetail.vue # 考试详情
│ ├── QuestionCard.vue # 题目卡片
│ └── Timer.vue # 计时器组件
├── store/
│ └── exam.js # Vuex状态管理
├── router/
│ └── index.js # 路由配置
└── views/
├── ExamCenter.vue # 考试中心主页面
└── Result.vue # 考试成绩页面核心功能实现
考试列表展示
<template>
<div class="exam-list">
<div v-for="exam in exams" :key="exam.id" class="exam-card">
<h3>{{ exam.title }}</h3>
<p>考试时间: {{ exam.duration }}分钟</p>
<button @click="startExam(exam.id)">开始考试</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
exams: []
}
},
async created() {
const response = await axios.get('/api/exams')
this.exams = response.data
},
methods: {
startExam(examId) {
this.$router.push(`/exam/${examId}`)
}
}
}
</script>考试计时器组件
<template>
<div class="timer">
剩余时间: {{ formattedTime }}
</div>
</template>
<script>
export default {
props: {
duration: Number // 分钟数
},
data() {
return {
timeLeft: this.duration * 60
}
},
computed: {
formattedTime() {
const minutes = Math.floor(this.timeLeft / 60)
const seconds = this.timeLeft % 60
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
}
},
mounted() {
this.interval = setInterval(() => {
if (this.timeLeft > 0) {
this.timeLeft--
} else {
clearInterval(this.interval)
this.$emit('timeout')
}
}, 1000)
},
beforeDestroy() {
clearInterval(this.interval)
}
}
</script>题目组件
<template>
<div class="question">
<h4>{{ question.text }}</h4>
<div v-if="question.type === 'single'">
<div v-for="option in question.options" :key="option.id">
<input
type="radio"
:id="`option-${option.id}`"
:value="option.id"
v-model="selectedAnswer"
>
<label :for="`option-${option.id}`">{{ option.text }}</label>
</div>
</div>
<!-- 其他题型处理 -->
</div>
</template>
<script>
export default {
props: {
question: Object
},
data() {
return {
selectedAnswer: null
}
},
watch: {
selectedAnswer(newVal) {
this.$emit('answer', {
questionId: this.question.id,
answer: newVal
})
}
}
}
</script>状态管理(Vuex)
// store/exam.js
export default {
state: {
currentExam: null,
answers: {},
isSubmitted: false
},
mutations: {
SET_EXAM(state, exam) {
state.currentExam = exam
},
SAVE_ANSWER(state, { questionId, answer }) {
state.answers[questionId] = answer
},
SUBMIT_EXAM(state) {
state.isSubmitted = true
}
},
actions: {
async fetchExam({ commit }, examId) {
const response = await axios.get(`/api/exams/${examId}`)
commit('SET_EXAM', response.data)
},
submitAnswers({ commit, state }) {
return axios.post('/api/submit', {
examId: state.currentExam.id,
answers: state.answers
})
}
}
}路由配置
// router/index.js
export default new Router({
routes: [
{
path: '/exam-center',
component: () => import('@/views/ExamCenter.vue'),
children: [
{
path: '',
component: () => import('@/components/ExamList.vue')
},
{
path: ':id',
component: () => import('@/components/ExamDetail.vue'),
props: true
}
]
},
{
path: '/result/:id',
component: () => import('@/views/Result.vue'),
props: true
}
]
})考试提交处理
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState('exam', ['currentExam', 'answers'])
},
methods: {
...mapActions('exam', ['submitAnswers']),
async handleSubmit() {
try {
await this.submitAnswers()
this.$router.push(`/result/${this.currentExam.id}`)
} catch (error) {
console.error('提交失败:', error)
}
}
}
}
</script>关键注意事项
防作弊措施
- 使用全屏API监控窗口切换
- 禁止右键菜单和文本选择
- 定期保存答题进度
document.addEventListener('contextmenu', e => e.preventDefault())
document.addEventListener('selectstart', e => e.preventDefault())性能优化
- 使用虚拟滚动处理大量题目
- 实现自动保存功能
- 添加加载状态和错误处理
移动端适配
- 使用响应式布局
- 添加手势操作支持
- 优化触摸反馈
通过以上实现方案，可以构建一个功能完善的Vue.js考试中心系统，包含考试列表、计时功能、题目展示和答案提交等核心功能。
