问卷考试系统设计（五）：前端引擎——渲染、状态管理与防作弊

mumu — Mon, 20 Apr 2026 00:00:00 +0000

后端写好了，接口也通了。前端要解决四个问题：怎么把后端返回的 JSON 渲染成可交互的答题界面、状态怎么管、考试场景怎么防作弊、手机上表格挤成一团怎么办。

前端答题状态要围绕一份本地快照流转，草稿和提交使用同一套校验结果：

stateDiagram-v2 [*] --> LoadingDsl LoadingDsl --> InitStore: 加载问卷 DSL InitStore --> Answering: 初始化 Pinia Answering --> RecomputeLogic: 选项变化 RecomputeLogic --> Answering: 更新跳题结果 Answering --> SavingDraft: 定时或失焦 SavingDraft --> Answering: 保存成功 Answering --> SubmitCheck: 点击提交 SubmitCheck --> Answering: 校验失败 SubmitCheck --> SubmitAnswer: 校验通过 SubmitAnswer --> SubmitSecurity: 附带质量与防作弊数据 SubmitSecurity --> Done Done --> [*]

一、注册表模式：一套 DSL 驱动所有题型渲染

硬编码的坑

直观的写法是 if-else：

        
<SingleChoice v-if="q.type === 'single_choice'" :question="q" />
<MultipleChoice v-else-if="q.type === 'multiple_choice'" :question="q" />
<LikertScale v-else-if="q.type === 'likert'" :question="q" />

每加一种题型，渲染层、校验层、状态层都得改。后面会越来越难维护。

Vue 3 - tag - 沐木

问卷考试系统设计（五）：前端引擎——渲染、状态管理与防作弊

一、注册表模式：一套 DSL 驱动所有题型渲染

硬编码的坑