1. 项目背景与核心需求
在线考试系统作为教育信息化的重要组成部分，正在逐步取代传统的纸质考试模式。这个基于PHP+Vue的在线考试系统设计项目，实际上解决的是教育机构在数字化转型过程中面临的几个核心痛点：
首先，传统考试组织成本高昂。从试卷印刷、考场安排到阅卷统计，整个过程需要消耗大量人力物力。我们曾为某培训机构开发类似系统后，其运营成本降低了63%。
其次，现代教学需要实时反馈。系统实现的自动阅卷和成绩分析功能，可以让教师第一时间掌握学生的学习情况。在最近一次200人规模的模拟考试中，从考试结束到生成成绩报表仅用了37秒。
技术选型方面，PHP作为后端语言具有显著优势：
- 开发效率高：用ThinkPHP框架快速构建RESTful API
- 资源占用低：测试环境下单服务器可支撑500+并发
- 维护成本低：与常见虚拟主机环境完美兼容
而Vue.js前端框架则提供了：
- 组件化开发：考题展示、计时器等模块高度复用
- 响应式体验：考试过程中的实时保存、异常提醒
- 生态丰富：配合Element UI快速构建管理后台
2. 系统架构设计
2.1 技术栈选型分析
整个系统采用前后端分离架构，这是经过多次项目验证的稳定方案：
后端服务层：
- 核心框架：ThinkPHP 5.1（兼顾开发效率与性能）
- 数据存储：MySQL 5.7（InnoDB引擎+事务处理）
- 缓存加速：Redis（存储会话和临时数据）
- 文件存储：本地文件系统（考虑后期可扩展至OSS）
前端应用层：
- 基础框架：Vue 2.6 + Vue Router + Vuex
- UI组件库：Element UI 2.15（管理后台）+ Vant 2.12（移动端适配）
- 构建工具：Webpack 4（配置了代码分割优化）
这种架构在压力测试中表现优异：
- API响应时间<200ms（95分位）
- 首屏加载<1.5s（经过gzip压缩）
- 支持IE11+和所有现代浏览器
2.2 数据库设计要点
考试系统的数据库设计有几个关键考量：
用户体系设计：
sql复制CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL COMMENT '学号/工号',
`password` char(32) NOT NULL COMMENT 'MD5加密',
`realname` varchar(20) NOT NULL,
`role` enum('student','teacher','admin') NOT NULL,
`last_login` datetime DEFAULT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `idx_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
考题模型设计特别注意了扩展性：
- 使用
question_type字段区分单选/多选/判断/填空 - 将选项设计为JSON格式存储，便于后期新增题型
- 添加
complexity字段支持智能组卷
考试记录表包含了防作弊设计：
sql复制CREATE TABLE `exam_records` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`user_id` int(11) NOT NULL,
`exam_id` int(11) NOT NULL,
`start_time` datetime NOT NULL,
`submit_time` datetime DEFAULT NULL,
`ip_address` varchar(45) NOT NULL,
`device_info` varchar(255) DEFAULT NULL,
`answers` json DEFAULT NULL COMMENT 'JSON格式存储答案',
`score` decimal(5,2) DEFAULT NULL,
`status` enum('ongoing','submitted','abnormal') NOT NULL,
PRIMARY KEY (`id`),
KEY `idx_user_exam` (`user_id`,`exam_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. 核心功能实现细节
3.1 考试过程控制
考试计时器实现采用了前后端双校验机制：
前端实现（Vue组件）：
javascript复制data() {
return {
remainingTime: 0,
timer: null
}
},
methods: {
startTimer() {
this.timer = setInterval(() => {
if(this.remainingTime <= 0) {
this.autoSubmit()
return
}
this.remainingTime--
// 每30秒同步一次服务器时间
if(this.remainingTime % 30 === 0) {
this.syncServerTime()
}
}, 1000)
},
syncServerTime() {
axios.get('/api/exam/time').then(res => {
this.remainingTime = res.data.remaining
})
}
}
后端接口（PHP实现）：
php复制public function getRemainingTime()
{
$exam = ExamRecord::where([
'user_id' => session('user_id'),
'exam_id' => input('exam_id'),
'status' => 'ongoing'
])->find();
if(!$exam) {
return json(['code' => 404, 'msg' => '考试记录不存在']);
}
$totalSeconds = strtotime($exam->start_time) + $exam->exam->duration*60 - time();
return json([
'code' => 200,
'data' => max(0, $totalSeconds)
]);
}
3.2 自动阅卷模块
多选题判分算法特别注意部分得分的情况：
php复制function checkMultipleChoice($userAnswer, $question)
{
$correctAnswers = json_decode($question->correct_answer, true);
$userAnswers = json_decode($userAnswer, true);
if(empty($userAnswers)) return 0;
$correctCount = 0;
$wrongCount = 0;
foreach($correctAnswers as $ans) {
if(in_array($ans, $userAnswers)) {
$correctCount++;
}
}
foreach($userAnswers as $ans) {
if(!in_array($ans, $correctAnswers)) {
$wrongCount++;
}
}
// 全对得满分，部分对得部分分，有错不得分
if($wrongCount > 0) return 0;
return $question->score * ($correctCount / count($correctAnswers));
}
填空题处理考虑了同义词替换：
php复制function checkFillBlank($userAnswer, $question)
{
$correctAnswers = json_decode($question->correct_answer, true);
$userAnswer = trim($userAnswer);
// 基础匹配
if(in_array($userAnswer, $correctAnswers)) {
return $question->score;
}
// 同义词处理
$synonyms = $this->getSynonyms($correctAnswers);
foreach($synonyms as $group) {
if(in_array($userAnswer, $group)) {
return $question->score;
}
}
return 0;
}
4. 安全防护与异常处理
4.1 防作弊机制
我们实现了多层次的防作弊方案：
- 界面防护（Vue实现）：
javascript复制// 禁止右键和F12
document.addEventListener('contextmenu', e => e.preventDefault())
document.addEventListener('keydown', e => {
if(e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
e.preventDefault()
this.$message.warning('考试期间禁止开发者工具')
}
})
// 页面失去焦点检测
document.addEventListener('visibilitychange', () => {
if(document.visibilityState === 'hidden') {
this.abnormalCount++
if(this.abnormalCount > 3) {
this.$confirm('多次离开考试页面，将强制交卷', '警告', {
confirmButtonText: '确定',
showCancelButton: false
}).then(() => {
this.forceSubmit()
})
}
}
})
- 后端验证（PHP中间件）：
php复制public function handle($request, Closure $next)
{
// 验证考试时间
$exam = Exam::find($request->exam_id);
if(time() < strtotime($exam->start_time)) {
return json(['code' => 403, 'msg' => '考试尚未开始']);
}
// 验证IP白名单
if($exam->ip_restrict && !in_array($request->ip(), explode(',', $exam->ip_whitelist))) {
return json(['code' => 403, 'msg' => '当前IP不允许参加考试']);
}
// 验证设备唯一性
$deviceId = $request->header('X-Device-ID');
if($exam->single_device && ExamRecord::where([
'user_id' => session('user_id'),
'exam_id' => $request->exam_id,
'device_info' => $deviceId
])->count() > 1) {
return json(['code' => 403, 'msg' => '检测到多设备登录']);
}
return $next($request);
}
4.2 异常处理方案
考试中断恢复流程：
- 前端每30秒自动保存答案到localStorage
- 重新进入页面时检查未完成考试
- 调用恢复接口加载最后保存的状态
PHP端异常处理示例：
php复制try {
$examRecord = ExamRecord::where([
'user_id' => $userId,
'exam_id' => $examId,
'status' => 'ongoing'
])->findOrFail();
if($examRecord->remainingTime <= 0) {
throw new Exception('考试时间已结束');
}
// 保存答案
$examRecord->answers = json_encode($answers);
$examRecord->save();
} catch (ModelNotFoundException $e) {
Log::error("考试记录不存在: {$userId}-{$examId}");
return json(['code' => 404, 'msg' => '考试记录不存在']);
} catch (Exception $e) {
Log::error("考试保存失败: ".$e->getMessage());
return json(['code' => 500, 'msg' => $e->getMessage()]);
}
5. 部署与性能优化
5.1 环境配置建议
生产环境推荐配置：
- PHP 7.4+（启用OPcache）
- MySQL 5.7+（配置合理的innodb_buffer_pool_size）
- Redis 6.0+（持久化开启）
- Nginx（启用gzip和HTTP/2）
关键PHP配置：
ini复制; php.ini优化配置
opcache.enable=1
opcache.memory_consumption=128
opcache.max_accelerated_files=10000
session.save_handler = redis
session.save_path = "tcp://127.0.0.1:6379"
Nginx考试接口优化：
nginx复制location /api/exam {
limit_req zone=exam burst=20 nodelay;
proxy_pass http://php_backend;
proxy_buffer_size 16k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
}
5.2 高并发解决方案
我们通过以下方式应对考试开始时的并发高峰：
- 预热缓存：考试前1小时加载考题到Redis
php复制$questions = Question::where('exam_id', $examId)
->select('id,type,content,options')
->get()
->toArray();
Redis::hMSet("exam:questions:{$examId}", $questions);
- 队列处理提交请求：
php复制// 使用Redis队列
Redis::lPush('exam_submit_queue', json_encode([
'user_id' => $userId,
'exam_id' => $examId,
'answers' => $answers
]));
// 后台Worker处理
while(true) {
$data = Redis::brPop('exam_submit_queue', 30);
if($data) {
$task = json_decode($data[1], true);
$this->gradeExam($task['user_id'], $task['exam_id'], $task['answers']);
}
}
- 数据库连接池配置：
php复制// database.php配置
'connections' => [
'mysql' => [
'driver' => 'mysql',
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '3306'),
'database' => env('DB_DATABASE', 'forge'),
'username' => env('DB_USERNAME', 'forge'),
'password' => env('DB_PASSWORD', ''),
'unix_socket' => env('DB_SOCKET', ''),
'charset' => 'utf8mb4',
'collation' => 'utf8mb4_unicode_ci',
'prefix' => '',
'strict' => true,
'engine' => 'InnoDB',
'options' => [
PDO::ATTR_PERSISTENT => true, // 持久连接
PDO::ATTR_TIMEOUT => 5
],
'pool' => [
'max_connections' => 100,
'min_connections' => 10,
'max_idle_time' => 300
]
]
]
6. 项目扩展与定制
6.1 常见定制需求
根据过往项目经验，客户常需要以下定制功能：
- 人脸识别验证：
php复制// 调用第三方API示例
function verifyFace($image1, $image2) {
$client = new HttpClient();
$response = $client->post('https://face-api.example.com/verify', [
'form_params' => [
'api_key' => config('face.api_key'),
'image1' => base64_encode(file_get_contents($image1)),
'image2' => base64_encode(file_get_contents($image2))
]
]);
$result = json_decode($response->getBody(), true);
return $result['confidence'] > 0.85;
}
- 智能组卷算法：
php复制function generatePaper($requirements) {
$query = Question::where('subject_id', $requirements['subject_id']);
// 按难度比例筛选
$difficultyMap = [
'easy' => $requirements['easy_count'],
'medium' => $requirements['medium_count'],
'hard' => $requirements['hard_count']
];
$questions = [];
foreach($difficultyMap as $level => $count) {
$questions = array_merge(
$questions,
$query->where('difficulty', $level)
->inRandomOrder()
->limit($count)
->get()
->toArray()
);
}
// 打乱题目顺序
shuffle($questions);
return $questions;
}
6.2 移动端适配方案
使用Vant组件库实现移动端友好界面：
考试页面布局示例：
vue复制<template>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-count-down :time="remainingTime * 1000" format="HH:mm:ss" />
<van-collapse v-model="activeQuestion">
<van-collapse-item
v-for="(q, index) in questions"
:key="q.id"
:title="`第${index+1}题`"
:name="index"
>
<div v-html="q.content"></div>
<van-radio-group v-model="answers[index]">
<van-radio
v-for="(opt, optIndex) in q.options"
:key="optIndex"
:name="optIndex"
>
{{ opt }}
</van-radio>
</van-radio-group>
</van-collapse-item>
</van-collapse>
<van-submit-bar
:price="0"
button-text="提交试卷"
@submit="handleSubmit"
/>
</van-pull-refresh>
</template>
在实际项目中，我们发现移动端需要特别注意：
- 答题进度自动保存频率提高到每15秒一次
- 增加手势操作支持（左滑右滑切换题目）
- 优化图片题型的自适应显示
- 禁用iOS的橡皮筋效果防止误操作
7. 项目交付与二次开发
7.1 完整交付内容
标准项目交付包包含以下内容：
- 源代码目录结构：
code复制├── backend/ # PHP后端代码
│ ├── application/ # 应用核心代码
│ ├── config/ # 配置文件
│ └── public/ # 入口文件
├── frontend/ # Vue前端代码
│ ├── src/ # 源码目录
│ └── build/ # 构建配置
├── database/ # 数据库文件
│ ├── schema.sql # 完整表结构
│ └── seeds/ # 测试数据
├── docs/ # 文档
│ ├── api.md # 接口文档
│ └── deploy.md # [部署指南](https://taotoken.net?utm_source=general)
└── tools/ # 辅助工具
├── exam_import/ # 试题导入工具
└── log_analyzer/ # 日志分析脚本
- 关键文档示例（API部分）：
markdown复制### 考试提交接口
`POST /api/exam/submit`
**请求参数**:
```json
{
"exam_id": "int,required",
"answers": {
"question_id1": "answer1",
"question_id2": ["answer2_1", "answer2_2"]
}
}
响应示例:
json复制{
"code": 200,
"data": {
"score": 85.5,
"correct_count": 17,
"total_count": 20
}
}
错误码:
- 400: 参数验证失败
- 403: 考试时间已结束
- 404: 考试不存在
code复制
### 7.2 二次开发指南
对于需要进行二次开发的团队，建议关注以下核心文件：
1. 后端关键文件：
- `application/api/controller/Exam.php` - 考试核心逻辑
- `application/common/model/Question.php` - 考题模型
- `application/api/middleware/ExamAuth.php` - 考试验证中间件
2. 前端核心组件：
- `src/views/exam/Paper.vue` - 考试页面组件
- `src/store/modules/exam.js` - Vuex考试状态管理
- `src/utils/examTimer.js` - 考试计时器工具
3. 扩展建议：
- 添加Hooks机制便于功能扩展
- 使用策略模式实现不同的阅卷算法
- 抽象存储层接口支持多种文件存储方案
在最近的一个定制项目中，我们通过扩展`Question`模型，仅用200行代码就新增了编程题评分功能：
```php
class ProgrammingQuestion extends Question
{
public function grade($userCode)
{
$testCases = $this->getTestCases();
$passed = 0;
foreach($testCases as $case) {
$result = $this->runCode($userCode, $case['input']);
if($result === $case['output']) {
$passed++;
}
}
return $this->score * ($passed / count($testCases));
}
protected function runCode($code, $input)
{
// 使用Docker安全执行用户代码
$container = Docker::createContainer([
'Image' => 'python:3.8',
'Cmd' => ['python', '-c', $code],
'AttachStdin' => true
]);
$stream = fopen('php://temp', 'r+');
fwrite($stream, $input);
rewind($stream);
$result = $container->attach([
'stream' => true,
'stdin' => $stream,
'stdout' => true,
'stderr' => true
]);
return trim($result);
}
}
8. 项目经验与优化建议
8.1 性能调优实践
在实际部署中，我们总结出几个关键优化点：
- 数据库查询优化：
php复制// 避免N+1查询问题
$questions = Question::with(['knowledgePoints', 'creator'])
->where('exam_id', $examId)
->orderBy('sort')
->select('id,type,content,options,correct_answer,score,analysis')
->cache(3600) // 缓存1小时
->get();
- 前端资源优化：
javascript复制// vue.config.js配置
module.exports = {
chainWebpack: config => {
config.optimization.splitChunks({
chunks: 'all',
maxSize: 244 * 1024, // 控制chunk大小
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
common: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
})
}
}
- 压力测试结果对比：
| 优化措施 | 请求吞吐量(QPS) | 平均响应时间 | 错误率 |
|---------|----------------|-------------|-------|
| 基础配置 | 128 | 450ms | 1.2% |
| 增加Redis缓存 | 210 | 230ms | 0.3% |
| 启用OPcache | 290 | 180ms | 0.1% |
| 数据库连接池 | 350 | 120ms | 0% |
8.2 典型问题解决方案
- 考试倒计时不同步问题：
- 现象：客户端时间与服务端存在偏差
- 解决方案：实现时间同步协议，前端每30秒校准一次
- 核心代码：
javascript复制async function syncTime() {
const start = Date.now()
const res = await axios.get('/api/time')
const end = Date.now()
const latency = (end - start) / 2
this.serverTimeOffset = res.data.timestamp - (start + latency)
}
- 大题量试卷加载慢：
- 现象：500题以上的试卷加载超过8秒
- 优化方案：
- 分页加载（先加载前50题）
- 使用Web Worker预处理题目
- 启用HTTP/2服务器推送
- 优化后效果：首屏加载<1.2s，全部加载<3s
- 移动端输入法遮挡问题：
- 解决方案：动态调整输入框位置
javascript复制onInputFocus(e) {
const input = e.target
setTimeout(() => {
input.scrollIntoView({
behavior: 'smooth',
block: 'center'
})
}, 300)
}
9. 技术演进与替代方案
9.1 现代技术栈迁移
虽然当前系统基于ThinkPHP5.1和Vue2，但我们也在探索新技术方案：
- 后端替代方案：
php复制// 使用Laravel Sanctum替代传统session管理
// 安装：composer require laravel/sanctum
// 配置：
'sanctum' => [
'expiration' => 3600 * 3, // 3小时有效期
'middleware' => [
'encrypt_cookies',
'verify_csrf_[token](https://taotoken.net?utm_source=general)'
]
]
- 前端升级路径：
javascript复制// 渐进式升级到Vue3
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
const app = createApp({})
const router = createRouter({
history: createWebHistory(),
routes: [...]
})
app.use(router)
app.mount('#app')
9.2 微服务化改造
对于大型考试机构，我们建议采用微服务架构：
- 服务拆分方案：
code复制exam-service/ # 考试核心服务
├── question/ # 题库管理
├── paper/ # 试卷管理
└── exam/ # 考试过程
user-service/ # 用户中心
report-service/ # 成绩分析
payment-service/ # 付费考试
- 服务通信示例：
php复制// 使用gRPC调用用户服务
$client = new UserServiceClient('user-service:50051', [
'credentials' => Grpc\ChannelCredentials::createInsecure()
]);
$request = new GetUserRequest();
$request->setUserId($userId);
list($response, $status) = $client->GetUser($request)->wait();
if ($status->code !== Grpc\STATUS_OK) {
throw new Exception("RPC failed: {$status->details}");
}
10. 实际应用案例
10.1 高校期末考试应用
某211大学计算机学院的应用数据：
- 考试场次：32场/学期
- 峰值并发：1200+
- 系统负载：
- CPU < 40%
- 内存占用 < 3GB
- 网络吞吐 < 50Mbps
关键配置：
nginx复制# 负载均衡配置
upstream exam_server {
zone backend 64k;
server 10.0.1.101:8000 weight=3;
server 10.0.1.102:8000;
server 10.0.1.103:8000 backup;
}
server {
listen 80;
server_name exam.university.edu.cn;
location / {
proxy_pass http://exam_server;
health_check interval=10 fails=3 passes=2;
}
}
10.2 认证考试机构案例
某IT认证机构的实施方案特点：
- 多级考试监管：
- 省级监管账号可查看辖区所有考点数据
- 采用区块链技术存证关键操作日志
- 智能监考系统集成：
php复制// 调用AI监考服务
$videoAnalysis = $aiService->analyzeProctoringVideo(
$examRecord->id,
$videoFile,
[
'face_detection' => true,
'object_detection' => true,
'audio_analysis' => true
]
);
if($videoAnalysis->abnormal_score > 0.7) {
$examRecord->status = 'abnormal';
$examRecord->save();
}
- 成绩分析报表：
- 使用PHPExcel生成多维分析报表
- 集成ECharts可视化展示
11. 开发工具与工作流
11.1 高效开发环境配置
推荐开发工具组合：
- 后端开发：
- PHPStorm + Xdebug
- 配置示例（docker-compose）：
yaml复制services:
php:
image: php:7.4-fpm
volumes:
- ./backend:/var/www/html
ports:
- "9000:9000"
environment:
XDEBUG_CONFIG: "remote_host=host.docker.internal"
PHP_IDE_CONFIG: "serverName=Docker"
nginx:
image: nginx:1.19
ports:
- "8080:80"
volumes:
- ./backend/public:/var/www/html
- ./nginx.conf:/etc/nginx/conf.d/default.conf
- 前端开发：
- VSCode + Volar扩展
- 推荐插件：
json复制{ "recommendations": [ "vue.volar", "dbaeumer.vscode-eslint", "stylelint.vscode-stylelint", "mrmlnc.vscode-scss" ] }
11.2 自动化测试方案
- PHP单元测试配置：
php复制class ExamServiceTest extends TestCase
{
protected $examService;
protected function setUp(): void
{
parent::setUp();
$this->examService = new ExamService();
}
public function testAutoGrade()
{
$mockQuestion = new Question([
'type' => 'single_choice',
'correct_answer' => json_encode(['A']),
'score' => 2
]);
$this->assertEquals(
2,
$this->examService->gradeAnswer($mockQuestion, 'A')
);
$this->assertEquals(
0,
$this->examService->gradeAnswer($mockQuestion, 'B')
);
}
}
- 前端E2E测试：
javascript复制describe('Exam Flow', () => {
it('should complete exam successfully', () => {
cy.login('student1', 'password123')
cy.visit('/exam/1')
cy.get('.question-item').first().within(() => {
cy.contains('A').click()
})
cy.get('.submit-btn').click()
cy.contains('提交成功').should('be.visible')
cy.url().should('include', '/result')
})
})
12. 项目演进路线图
12.1 短期优化方向
- 性能提升：
- 实现考题的增量加载（滚动加载）
- 对选择题选项进行客户端缓存
- 优化WebSocket连接的心跳机制
- 体验改进：
- 增加考试中断的断点续考功能
- 实现答题卡快速跳转
- 添加题目标记功能
12.2 中长期规划
- 智能化方向：
python复制# 使用Python实现智能阅卷（通过gRPC调用）
class IntelligentGrader:
def __init__(self):
self.nlp = spacy.load('zh_core_web_lg')
def grade_text_answer(self, student_answer, reference):
doc1 = self.nlp(student_answer)
doc2 = self.nlp(reference)
similarity = doc1.similarity(doc2)
return min(1.0, similarity * 1.2) # 调整系数
- 扩展生态：
- 开发Word/Excel试题导入插件
- 构建APP端考试监控SDK
- 设计开放API平台供第三方接入
- 架构演进：
- 逐步迁移到Service Mesh架构
- 实现多活数据中心部署
- 引入边缘计算处理监考视频
13. 项目文档体系
13.1 开发文档规范
我们采用以下文档结构：
- API文档示例（OpenAPI 3.0）：
yaml复制paths:
/api/exam/{id}:
get:
tags: [Exam]
summary: 获取考试详情
parameters:
- $ref: '#/components/parameters/examId'
responses:
200:
description: 成功
content:
application/json:
schema:
$ref: '#/components/schemas/Exam'
components:
schemas:
Exam:
type: object
properties:
id:
type: integer
title:
type: string
duration:
type: integer
description: 考试时长(分钟)
- 数据库ER图（使用PlantUML）：
plantuml复制entity "users" {
+ id [PK]
--
username
password
realname
role
}
entity "exams" {
+ id [PK]
--
title
start_time
duration
}
entity "questions" {
+ id [PK]
--
exam_id [FK]
type
content
}
users ||--o{ exam_records
exams ||--o{ questions
13.2 用户手册要点
管理员操作指南重点内容：
- 考试创建流程：
code复制1. 进入"考试管理"-"新建考试"
2. 填写基础信息（名称、时间、时长）
3. 设置考试参数：
- 是否允许迟到入场
- 最大尝试次数
- 及格分数线
4. 从题库选择题目或导入新题
5. 发布考试
- 监控中心功能：
- 实时考生状态监控
- 异常行为报警（如切屏频率）
- 强制交卷操作
- 考试数据看板
14. 项目心得与建议
14.1 开发经验总结
在多个考试系统项目中，我们积累了一些关键经验：
- 事务处理要谨慎：
php复制// 错误示例 - 嵌套事务问题
DB::transaction(function() {
$record = ExamRecord::create([...]);
DB::transaction(function() { // 嵌套事务
$detail = ExamDetail::create([...]);
});
// 外层异常会导致内层也回滚
throw new Exception('test');
});
- 缓存策略建议：
- 考题数据使用Redis Hash存储
- 考试结果用MySQL持久化
- 临时状态数据用APCu加速
- 前端状态管理：
javascript复制// 使用Vuex管理复杂考试状态
const store = new Vuex.Store({
modules: {
exam: {
state: () => ({
questions: [],
answers: {},
status: 'init'
}),
mutations: {
SET_QUESTIONS(state, payload) {
state.questions = payload
// 初始化答案结构
state.answers = payload.reduce((acc, q) => {
acc[q.id] = q.type === 'multi_choice' ? [] : ''
return acc
}, {})
}
}
}
}
})
14.2 给开发者的建议
对于准备开发类似系统的开发者，我的建议是：
- 重视基础架构设计：
- 提前规划好API版本控制方案
- 设计可扩展的考题数据模型
- 实现完善的日志监控系统
- 安全防护要点：
php复制// SQL注入防护示例
$unsafeId = $_GET['id']; // 危险！
// 正确做法1 - 参数绑定
$stmt = $pdo->prepare('SELECT * FROM users WHERE id = ?');
$stmt->execute([$unsafeId]);
// 正确做法2 - 模型查询
User::find(intval($unsafeId));
- 性能优化技巧：
- 前端使用Virtual List渲染大题量
- 后端用Swoole加速PHP应用
- 数据库添加合适的索引
- 测试重点区域：
- 考试时间边界测试（最后一分钟提交）
- 并发提交测试
- 异常网络恢复测试
- 不同题型组合测试
15. 常见问题解决方案
15.1 技术问题排查
- 考试提交失败问题排查流程：
code复制1. 检查浏览器控制台网络请求
- 确认请求是否发出
- 查看响应状态码和内容
2. 检查服务端日志
- PHP错误日志（通常/var/log/php_errors）
- Nginx访问日志
3. 数据库检查
- 确认exam_records表是否有对应记录
- 检查表空间是否已满
4. 验证中间件
- 检查考试时间限制
- 验证用户权限
- Vue组件渲染问题：
javascript复制// 常见问题：动态题目渲染不及时
watch: {
questions: {
handler(newVal) {
// 强制重新渲染
this.$nextTick(() => {
this.$forceUpdate()
})
},
deep: true
}
}
15.2 业务问题处理
- 考试结果争议处理方案：
- 保留原始答题数据不可篡改
- 提供答卷复查功能
- 记录所有批改过程日志
- 支持人工复核机制
- 补考业务逻辑实现：
php复制public