“科目一離開(kāi)的太快就像龍卷風(fēng)”我會(huì)想你的——這句話最近經(jīng)常出現(xiàn)在駕考相關(guān)的討論里?？荚嚠?dāng)天緊張地刷完題目交卷電子屏幕上彈出“合格”然后一切就像被風(fēng)卷走一樣迅速結(jié)束。這段經(jīng)歷很多人都經(jīng)歷過(guò)但站在技術(shù)開(kāi)發(fā)者的角度看“科目一”不只是駕考中的一個(gè)科目它代表了一類非常典型的產(chǎn)品場(chǎng)景題庫(kù)管理、隨機(jī)抽題、在線答題、自動(dòng)判分、錯(cuò)題回顧。這類場(chǎng)景開(kāi)發(fā)門檻不高但想做得穩(wěn)定、順手、抗造并不像簡(jiǎn)單寫一個(gè)靜態(tài)頁(yè)面那么容易。這篇文章先從一個(gè)最小可用的“科目一模擬考試系統(tǒng)”說(shuō)起使用 Vue 3 在瀏覽器里直接跑通整個(gè)流程再?gòu)臓顟B(tài)管理、數(shù)據(jù)存儲(chǔ)、隨機(jī)算法、防作弊邊界這些角度把在線測(cè)評(píng)類項(xiàng)目的工程化思路一并講清楚。如果你正在做刷題 App、在線考試后臺(tái)、面試復(fù)盤工具或者單純想給自己的項(xiàng)目加一個(gè)“模擬測(cè)試”模塊這篇文章應(yīng)該能幫你避開(kāi)不少?gòu)澛贰?. 這篇文章真正要解決的問(wèn)題很多開(kāi)發(fā)者在接到“做一個(gè)在線答題/刷題功能”的需求時(shí)第一反應(yīng)是這有什么難的不就是展示題目、點(diǎn)擊選項(xiàng)、最后算個(gè)分。實(shí)際做起來(lái)會(huì)發(fā)現(xiàn)真正的問(wèn)題遠(yuǎn)不止這些。一次完整的在線測(cè)評(píng)至少要回答下面幾個(gè)問(wèn)題題庫(kù)題目從哪里加載前端寫死還是后端接口下發(fā)每次進(jìn)入考試的題目順序是否一致如果不一致用什么方式打亂用戶答題中途刷新頁(yè)面會(huì)不會(huì)丟進(jìn)度要不要自動(dòng)保存交卷后成績(jī)存在哪里錯(cuò)題記錄如何保留如果同時(shí)有很多人考試怎么避免重復(fù)提交和成績(jī)異常前端直接暴露題庫(kù)怎么防止有人抓包把答案爬走這些看起來(lái)是“細(xì)節(jié)”的東西恰恰決定了這個(gè)模塊能不能上線、能不能維護(hù)、能不能扛住并發(fā)?；氐綐?biāo)題那句話“科目一離開(kāi)的太快就像龍卷風(fēng)”。從產(chǎn)品體驗(yàn)來(lái)說(shuō)考試結(jié)束意味著一次練習(xí)的結(jié)束但從技術(shù)系統(tǒng)角度來(lái)看用戶剛才產(chǎn)生的答題行為、時(shí)間消耗、錯(cuò)題數(shù)據(jù)、成績(jī)記錄都應(yīng)該被沉淀下來(lái)。哪怕界面瞬間關(guān)閉數(shù)據(jù)依然有跡可循。這也正是“在線測(cè)評(píng)系統(tǒng)”和“一個(gè)普通表單頁(yè)面”的本質(zhì)區(qū)別前者關(guān)注狀態(tài)流轉(zhuǎn)和數(shù)據(jù)留存后者只關(guān)心當(dāng)下提交。這篇文章適合三類讀者剛?cè)腴T的前端或全棧開(kāi)發(fā)者想了解答題類交互的完整實(shí)現(xiàn)路徑。正在維護(hù)刷題類產(chǎn)品的開(kāi)發(fā)者想梳理出更好的架構(gòu)和排查問(wèn)題的方法。希望把“半成品Demo”升級(jí)成“可上線模塊”的技術(shù)負(fù)責(zé)人。接下來(lái)我們先用最小成本把系統(tǒng)跑起來(lái)再逐步深入。2. 基礎(chǔ)概念與核心原理在寫代碼之前先理清幾個(gè)在線考試系統(tǒng)里的基礎(chǔ)概念。這些概念不限于“科目一模擬考試”所有答題、測(cè)評(píng)、問(wèn)卷類產(chǎn)品都會(huì)遇到。2.1 題庫(kù)Question Bank題庫(kù)是所有題目的集合。通常一條題目包含題干、選項(xiàng)、正確答案、解析、題型、難度等字段。在真實(shí)項(xiàng)目中題庫(kù)一般存儲(chǔ)在數(shù)據(jù)庫(kù)里通過(guò)接口按需加載。但在演示階段可以把題庫(kù)放在前端 JS 文件中方便快速驗(yàn)證。題庫(kù)設(shè)計(jì)的關(guān)鍵不是“能放多少題”而是“字段是否可擴(kuò)展”。比如以后要增加多選、判斷題、圖片題、音頻題當(dāng)初只設(shè)計(jì)了“答案”一個(gè)字段的項(xiàng)目就要大改表結(jié)構(gòu)。2.2 抽題與亂序Sampling and Shuffle模擬考試為了降低重復(fù)率通常會(huì)做兩件事打亂題目順序。有可能打亂選項(xiàng)順序。實(shí)現(xiàn)上最常用的是洗牌算法Fisher-Yates Shuffle。它的時(shí)間復(fù)雜度是 O(n)而且能保證每個(gè)排列出現(xiàn)的概率相等。這里需要注意一個(gè)容易出錯(cuò)的地方如果同時(shí)打亂題目和選項(xiàng)那么“答案字段”必須同步跟著選項(xiàng)移動(dòng)否則會(huì)出現(xiàn)“選的是對(duì)的但判分邏輯對(duì)不上”的問(wèn)題。2.3 判分Scoring判分有兩種常見(jiàn)方式前端判分簡(jiǎn)單直接適合演示、局域網(wǎng)考試、低并發(fā)場(chǎng)景。后端判分生產(chǎn)環(huán)境更推薦。用戶的答案提交到服務(wù)端之后由后端統(tǒng)一計(jì)算得分避免前端代碼被篡改導(dǎo)致分?jǐn)?shù)異常。前端判分并不是不能用而是要清楚它的邊界它只適合“非監(jiān)管型”場(chǎng)景。如果考試結(jié)果有公信力要求后端判分是底線。2.4 答題狀態(tài)Session State答題狀態(tài)包括當(dāng)前做到第幾題、每一題選了哪個(gè)選項(xiàng)、哪些題被標(biāo)記了、剩余時(shí)間是多少。這些狀態(tài)可以是內(nèi)存變量也可以是持久化數(shù)據(jù)。如果用戶刷新頁(yè)面內(nèi)存變量會(huì)全部丟失。為了體驗(yàn)更好需要把“未完成的考試進(jìn)度”保存到 localStorage 或者服務(wù)端 Session 中。2.5 答題記錄與錯(cuò)題本Record and Wrong Question交卷之后用戶通常會(huì)看到成績(jī)頁(yè)并且期望以后能重新查看錯(cuò)題。所以系統(tǒng)需要把“本次考試的答題快照”保存下來(lái)而不是只保存一個(gè)總分。只保存總分的話用戶以后想復(fù)盤錯(cuò)題什么都看不到。下表總結(jié)了不同模塊在演示版和生產(chǎn)版中的常見(jiàn)做法模塊演示版做法生產(chǎn)版做法題庫(kù)存儲(chǔ)前端 JS 文件數(shù)據(jù)庫(kù) 接口緩存抽題邏輯前端洗牌后端抽題 前端控制順序判分邏輯前端計(jì)算后端計(jì)算 審計(jì)日志答題進(jìn)度localStorage服務(wù)端 Session / Redis成績(jī)保存localStorage數(shù)據(jù)庫(kù) 防重復(fù)提交錯(cuò)題回顧保存題目快照錯(cuò)題表關(guān)聯(lián)原題這個(gè)對(duì)比清晰地說(shuō)明了一個(gè)“能用”的考試系統(tǒng)和一個(gè)“能上線”的考試系統(tǒng)差別不在 UI 多好看而在數(shù)據(jù)安全、狀態(tài)穩(wěn)定和結(jié)果可信。3. 環(huán)境準(zhǔn)備與前置條件為了讓文章可以跟著操作這里選擇一套最輕量的環(huán)境。3.1 運(yùn)行環(huán)境操作系統(tǒng)Windows 10/11、macOS、Linux 均可。瀏覽器Chrome、Edge、Firefox 等現(xiàn)代瀏覽器。網(wǎng)絡(luò)需要能夠訪問(wèn) Vue 3 的 CDN 地址。如果你的電腦上沒(méi)有安裝 Node.js也不影響因?yàn)槲覀兊氖纠褂?Vue 3 的瀏覽器全局構(gòu)建版本直接在 HTML 文件中引入即可。如果你希望使用 Vite 做工程化可以提前裝好 Node.js 18命令如下node -v npm -v只要能輸出版本號(hào)就說(shuō)明環(huán)境可用。但這不是本示例的前置條件。3.2 項(xiàng)目文件結(jié)構(gòu)我們只需要兩個(gè)文件question-one-exam/ ├── index.html └── question-bank.js其中index.html頁(yè)面結(jié)構(gòu)、樣式、Vue 應(yīng)用邏輯。question-bank.js模擬題庫(kù)。這樣的結(jié)構(gòu)足夠簡(jiǎn)單適合先跑通流程。生產(chǎn)項(xiàng)目再根據(jù)實(shí)際情況拆分目錄。3.3 引入方式說(shuō)明在index.html中會(huì)先引入question-bank.js讓題庫(kù)掛載到window.QUESTION_BANK然后引入 Vue 3 的全局包script src./question-bank.js/script script srchttps://unpkg.com/vue3/dist/vue.global.js/script這里要注意question-bank.js必須放在 Vue 引入之前否則應(yīng)用初始化時(shí)題庫(kù)還不存在。4. 核心流程拆解在線考試系統(tǒng)的業(yè)務(wù)流程并不復(fù)雜拆開(kāi)后其實(shí)只有六步。把這六步理順后面寫代碼就不會(huì)亂。4.1 加載題庫(kù)應(yīng)用啟動(dòng)時(shí)讀取window.QUESTION_BANK得到題目數(shù)組。為了演示效果我們會(huì)準(zhǔn)備幾條和“安全駕駛常識(shí)”相關(guān)的題目。題目本身故意選擇通用性較強(qiáng)的表述不作為科目一備考依據(jù)。這一步容易出現(xiàn)的問(wèn)題是題庫(kù)文件路徑寫錯(cuò)或者引入順序反了導(dǎo)致頁(yè)面提示“題目為空”。4.2 初始化考試會(huì)話點(diǎn)擊“開(kāi)始考試”后系統(tǒng)需要?jiǎng)?chuàng)建一個(gè)新的考試會(huì)話。會(huì)話包含打亂后的題目數(shù)組。當(dāng)前題號(hào)。每道題的用戶答案。標(biāo)記數(shù)組標(biāo)記哪些題用戶不確定。剩余時(shí)間。會(huì)話初始化完成后再進(jìn)入答題界面。4.3 渲染題目與選項(xiàng)根據(jù)當(dāng)前題號(hào)從題目數(shù)組中取出對(duì)應(yīng)的題目渲染到頁(yè)面。用戶點(diǎn)擊某個(gè)選項(xiàng)后把該選項(xiàng)索引保存到答案數(shù)組。如果用戶切換題目再切回來(lái)答案應(yīng)該還在。這里的關(guān)鍵是答案數(shù)組要和打亂后的題目索引一一對(duì)應(yīng)不能按原題號(hào)存儲(chǔ)。4.4 切換題目與標(biāo)記提供“上一題”“下一題”“標(biāo)記本題”三個(gè)操作。標(biāo)記功能看起來(lái)小但對(duì)用戶體驗(yàn)影響很大用戶可以在不確定的題目上打個(gè)記號(hào)交卷前集中檢查。4.5 交卷與判分用戶點(diǎn)擊“交卷”后系統(tǒng)遍歷所有題目比較用戶答案和正確答案得出總分和錯(cuò)題列表。此時(shí)頁(yè)面切換到結(jié)果視圖展示得分和逐題解析。在生產(chǎn)系統(tǒng)中交卷動(dòng)作必須考慮“重復(fù)提交”問(wèn)題。按鈕點(diǎn)擊后應(yīng)立即禁用同時(shí)通過(guò)接口冪等機(jī)制兜底。4.6 保存記錄與錯(cuò)題回顧交卷后把本次考試的成績(jī)、答錯(cuò)題目、答題時(shí)間保存到 localStorage。以后用戶可以查看歷史成績(jī)也可以重新進(jìn)入錯(cuò)題回顧。如果只是用一個(gè)總分變量保存刷新頁(yè)面后歷史記錄就沒(méi)了這是很多初級(jí)實(shí)現(xiàn)容易忽略的點(diǎn)。5. 完整示例與代碼實(shí)現(xiàn)下面直接給出完整示例。為了降低運(yùn)行門檻我使用“原生 HTML Vue 3 CDN”的寫法文件結(jié)構(gòu)簡(jiǎn)單復(fù)制到本地就能運(yùn)行。5.1 題庫(kù)文件文件路徑question-one-exam/question-bank.jswindow.QUESTION_BANK [ { id: 1, type: single, question: 駕駛過(guò)程中使用手機(jī)以下哪種做法是正確的, options: [ 查看導(dǎo)航并快速操作, 佩戴藍(lán)牙耳機(jī)接打電話, 停在安全地點(diǎn)后再使用, 讓副駕幫忙拿著自己繼續(xù)開(kāi)車 ], answer: 2, explain: 駕駛中使用手機(jī)會(huì)分散注意力必須停到安全地點(diǎn)后再使用。 }, { id: 2, type: single, question: 車輛起步前最合理的動(dòng)作是什么, options: [ 直接掛擋起步, 調(diào)整座椅、系好安全帶、檢查后視鏡, 先按喇叭再起步, 踩油門再觀察 ], answer: 1, explain: 起步前應(yīng)先檢查座椅、安全帶和后視鏡這是安全駕駛的基本習(xí)慣。 }, { id: 3, type: single, question: 車輛發(fā)生輕微剮蹭事故后更穩(wěn)妥的第一步做法是, options: [ 讓車輛保持原位等待交警, 下車與對(duì)方爭(zhēng)執(zhí), 拍照固定現(xiàn)場(chǎng)后盡快撤離并按規(guī)定處理, 直接駕車離開(kāi) ], answer: 2, explain: 輕微事故應(yīng)先拍照固定現(xiàn)場(chǎng)再按流程處理避免引發(fā)交通擁堵。具體處理方式以官方規(guī)則為準(zhǔn)。 }, { id: 4, type: single, question: 雨天行車最容易導(dǎo)致的風(fēng)險(xiǎn)是, options: [ 制動(dòng)距離變長(zhǎng), 發(fā)動(dòng)機(jī)溫度過(guò)低, 輪胎磨損加快, 油耗明顯降低 ], answer: 0, explain: 雨天路面濕滑輪胎抓地力下降制動(dòng)距離會(huì)變長(zhǎng)應(yīng)降低車速并拉大跟車距離。 }, { id: 5, type: single, question: 連續(xù)駕駛較長(zhǎng)時(shí)間后最正確的做法是, options: [ 堅(jiān)持開(kāi)到目的地再休息, 進(jìn)入服務(wù)區(qū)休息并適當(dāng)活動(dòng), 喝大量咖啡繼續(xù)行駛, 打開(kāi)車窗繼續(xù)駕駛 ], answer: 1, explain: 疲勞駕駛風(fēng)險(xiǎn)很高正確做法是進(jìn)入服務(wù)區(qū)休息靠咖啡只能短暫提神不能替代休息。 }, { id: 6, type: single, question: 夜間行駛時(shí)遇到對(duì)向車輛一直開(kāi)著遠(yuǎn)光燈怎么辦, options: [ 也打開(kāi)遠(yuǎn)光燈回?fù)? 減速并交替變換燈光提示對(duì)方, 靠邊停車等對(duì)方通過(guò), 加速超越前方車輛 ], answer: 1, explain: 夜間會(huì)車遇到對(duì)方未切換近光應(yīng)減速并交替變化燈光提示不要斗氣開(kāi)遠(yuǎn)光。 }, { id: 7, type: single, question: 駕駛機(jī)動(dòng)車行經(jīng)人行橫道時(shí)遇到行人正在通過(guò)應(yīng)該怎么做, options: [ 鳴喇叭提醒行人讓路, 減速讓行, 從行人身后繞行, 加速通過(guò) ], answer: 1, explain: 行經(jīng)人行橫道遇行人正在通過(guò)時(shí)應(yīng)當(dāng)停車讓行這是安全原則。 }, { id: 8, type: single, question: 關(guān)于安全帶下列說(shuō)法正確的是, options: [ 只有在高速公路上需要系, 后排乘客不需要系, 所有乘員都應(yīng)按規(guī)定系好安全帶, 市區(qū)低速行駛可以不系 ], answer: 2, explain: 無(wú)論前排后排無(wú)論在什么道路行駛都應(yīng)按規(guī)定系好安全帶。 } ];這里特意把題目控制在 8 條方便演示。實(shí)際項(xiàng)目中題庫(kù)應(yīng)該由接口下發(fā)并且配置一個(gè)合理的題量比如 100 道題中隨機(jī)抽取 50 道。5.2 HTML 頁(yè)面與 Vue 應(yīng)用邏輯文件路徑question-one-exam/index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title科目一模擬考試系統(tǒng)Vue 3 演示版/title script src./question-bank.js/script script srchttps://unpkg.com/vue3/dist/vue.global.js/script style * { box-sizing: border-box; } body { margin: 0; font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif; background-color: #f3f5f9; color: #333; } .exam-box { max-width: 860px; margin: 32px auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); padding: 28px; } .exam-box h1 { margin-top: 0; font-size: 24px; text-align: center; } .meta { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 14px; color: #666; } .question { margin: 24px 0; } .q-text { font-size: 18px; font-weight: 600; line-height: 1.6; } .options { margin-top: 16px; } .option { border: 1px solid #e1e4e8; border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease; } .option:hover { border-color: #4f8cff; background: #f6f9ff; } .option.selected { border-color: #4f8cff; background: #e8f0ff; color: #165dff; font-weight: 600; } .option-mark { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: #f0f2f5; text-align: center; line-height: 24px; font-size: 13px; color: #444; margin-right: 8px; } .option.selected .option-mark { background: #165dff; color: #fff; } .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .actions button { border: 1px solid #ccd3dc; border-radius: 6px; padding: 8px 18px; background: #fff; cursor: pointer; font-size: 14px; } .actions button:hover { border-color: #165dff; color: #165dff; } .actions button:disabled { color: #aaa; cursor: not-allowed; border-color: #e1e4e8; } .result-panel { margin-top: 20px; } .result-panel h2 { text-align: center; color: #165dff; } .result-panel ul { list-style: none; padding: 0; } .result-panel li { border: 1px solid #e1e4e8; border-radius: 8px; padding: 14px; margin-bottom: 12px; } .result-panel li.wrong { border-color: #ff6b6b; background: #fff8f8; } .result-panel .explain { margin-top: 8px; color: #b54708; font-size: 14px; } .restart-btn { display: block; margin: 16px auto 0; border: none; border-radius: 6px; padding: 10px 32px; background: #165dff; color: #fff; font-size: 16px; cursor: pointer; } .mark-tip { color: #b54708; font-size: 13px; margin-left: 8px; } /style /head body div idapp div classexam-box h1科目一模擬考試演示版/h1 div classmeta span已答 {{ answeredCount }} / {{ questions.length }}/span span剩余時(shí)間{{ formattedTime }}/span span v-ifcurrentQuestion第 {{ current 1 }} / {{ questions.length }} 題/span /div div v-if!finished currentQuestion div classquestion div classq-text {{ currentQuestion.question }} span v-ifmarked[current] classmark-tip已標(biāo)記/span /div div classoptions div v-for(opt, index) in currentQuestion.options :keyindex classoption :class{ selected: answers[current] index } clickchooseOption(index) span classoption-mark{{ optionChar(index) }}/span {{ opt }} /div /div /div div classactions button clickprev :disabledcurrent 0上一題/button button clicktoggleMark{{ marked[current] ? 取消標(biāo)記 : 標(biāo)記本題 }}/button button clicknext :disabledcurrent questions.length - 1下一題/button button clicksubmit交卷/button /div /div div v-else-iffinished classresult-panel h2最終得分{{ score }} / {{ questions.length }}/h2 p錯(cuò)題數(shù){{ questions.length - score }}/p ul li v-for(q, i) in questions :keyi :class{ wrong: answers[i] ! q.answer } strong{{ i 1 }}. {{ q.question }}/strong div你的答案{{ formatAnswer(answers[i]) }}正確答案{{ formatAnswer(q.answer) }}/div div v-ifanswers[i] ! q.answer classexplain解析{{ q.explain }}/div /li /ul button classrestart-btn clickrestart再考一次/button /div div v-else p題庫(kù)為空請(qǐng)先檢查 question-bank.js 文件。/p /div /div /div script const { createApp, ref, reactive, computed, onMounted, onUnmounted } Vue; const STORAGE_KEY question-one-records; const EXAM_SECONDS 45 * 60; function shuffle(source) { const arr source.slice(); for (let i arr.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [arr[i], arr[j]] [arr[j], arr[i]]; } return arr; } const app createApp({ setup() { const questions ref(shuffle(window.QUESTION_BANK || [])); const current ref(0); const answers ref([]); const marked ref([]); const timeLeft ref(EXAM_SECONDS); const finished ref(false); const score ref(0); let timer null; const currentQuestion computed(() questions.value[current.value]); const answeredCount computed(() { return answers.value.filter((item) item ! undefined).length; }); const formattedTime computed(() { const minutes Math.floor(timeLeft.value / 60); const seconds timeLeft.value % 60; return ${String(minutes).padStart(2, 0)}:${String(seconds).padStart(2, 0)}; }); function optionChar(index) { return String.fromCharCode(65 index); } function chooseOption(index) { if (finished.value) return; answers.value[current.value] index; } function next() { if (current.value questions.value.length - 1) { current.value; } } function prev() { if (current.value 0) { current.value--; } } function toggleMark() { marked.value[current.value] !marked.value[current.value]; } function formatAnswer(answerIndex) { if (answerIndex undefined || answerIndex null) { return 未作答; } const item currentQuestion.value || questions.value[0]; return item.options[answerIndex]; } function calcScore() { let s 0; questions.value.forEach((q, index) { if (answers.value[index] q.answer) { s; } }); return s; } function saveRecord() { const wrongQuestions questions.value .map((q, index) ({ q, index })) .filter(({ index }) answers.value[index] ! q.answer) .map(({ q, index }) ({ question: q.question, options: q.options, userAnswer: answers.value[index], correctAnswer: q.answer, explain: q.explain })); const record { time: new Date().toISOString(), score: score.value, total: questions.value.length, wrongCount: wrongQuestions.length, wrongQuestions: wrongQuestions }; const records JSON.parse(localStorage.getItem(STORAGE_KEY) || []); records.push(record); localStorage.setItem(STORAGE_KEY, JSON.stringify(records)); } function submit() { if (finished.value) return; finished.value true; score.value calcScore(); saveRecord(); } function restart() { current.value 0; answers.value []; marked.value []; finished.value false; score.value 0; timeLeft.value EXAM_SECONDS; questions.value shuffle(window.QUESTION_BANK || []); } onMounted(() { timer setInterval(() { if (finished.value) return; if (timeLeft.value 0) { timeLeft.value--; } else { submit(); } }, 1000); }); onUnmounted(() { if (timer) { clearInterval(timer); } }); return { questions, current, answers, marked, timeLeft, finished, score, currentQuestion, answeredCount, formattedTime, optionChar, chooseOption, next, prev, toggleMark, formatAnswer, submit, restart }; } }); app.mount(#app); /script /body /html這段代碼里需要注意幾個(gè)細(xì)節(jié)第一formatAnswer函數(shù)在結(jié)果頁(yè)渲染時(shí)需要通過(guò)題目對(duì)象獲取選項(xiàng)文本。但在我的實(shí)現(xiàn)里formatAnswer使用了currentQuestion或questions.value[0]來(lái)取選項(xiàng)列表這在結(jié)果頁(yè)切換到不同題目時(shí)會(huì)取錯(cuò)。正確的做法是讓formatAnswer接收題目和答案索引兩個(gè)參數(shù)。下面是修正后的寫法function formatAnswer(question, answerIndex) { if (answerIndex undefined || answerIndex null) { return 未作答; } return question.options[answerIndex]; }模板中對(duì)應(yīng)的位置也要改div你的答案{{ formatAnswer(q, answers[i]) }}正確答案{{ formatAnswer(q, q.answer) }}/div這是一個(gè)典型的“看起來(lái)順眼但實(shí)際會(huì)取錯(cuò)上下文”的低級(jí) bug。評(píng)審代碼時(shí)尤其要留意這類函數(shù)它們依賴了隱式的上下文狀態(tài)很容易在列表渲染中踩坑。第二question-bank.js使用window.QUESTION_BANK掛載全局變量。這樣做的好處是簡(jiǎn)單但只適合演示。真實(shí)項(xiàng)目中不要污染全局作用域應(yīng)該使用 ES Module 導(dǎo)入。第三頁(yè)面上的計(jì)時(shí)器是 45 分鐘倒計(jì)時(shí)。倒計(jì)時(shí)歸零后自動(dòng)交卷這個(gè)邏輯本身沒(méi)問(wèn)題但要小心定時(shí)器在頁(yè)面隱藏時(shí)仍然運(yùn)行導(dǎo)致的誤差。真實(shí)系統(tǒng)應(yīng)該以服務(wù)端時(shí)間或倒計(jì)時(shí)結(jié)束時(shí)間戳為準(zhǔn)。6. 運(yùn)行結(jié)果與效果驗(yàn)證完成以上兩個(gè)文件后在question-one-exam目錄下啟動(dòng)任意靜態(tài)服務(wù)器或者在瀏覽器中直接雙擊index.html即可看到效果。如果直接在本地打開(kāi)沒(méi)有任何跨域問(wèn)題。建議使用靜態(tài)服務(wù)器方式命令如下cd question-one-exam python3 -m http.server 8080然后在瀏覽器訪問(wèn)http://localhost:8080頁(yè)面會(huì)顯示“科目一模擬考試演示版”左側(cè)是答題進(jìn)度右側(cè)是倒計(jì)時(shí)。點(diǎn)擊選項(xiàng)后選項(xiàng)會(huì)高亮。再點(diǎn)擊“下一題”可以繼續(xù)作答。交卷后頁(yè)面顯示總分、錯(cuò)題數(shù)以及每道題你的答案和正確答案。驗(yàn)證是否成功可以從三個(gè)層面確認(rèn)6.1 功能層面所有題目可以正常展示。選擇答案后切換再切回來(lái)答案仍然保留。交卷后得分正確。6.2 數(shù)據(jù)層面打開(kāi)瀏覽器開(kāi)發(fā)者工具在 Console 中執(zhí)行const records JSON.parse(localStorage.getItem(question-one-records) || []); console.log(records);如果交卷過(guò)這里可以看到一條完整記錄包含考試時(shí)間、得分、總題數(shù)、錯(cuò)題詳情。執(zhí)行下面這條命令可以確認(rèn)記錄結(jié)構(gòu)是否完整const record JSON.parse(localStorage.getItem(question-one-records) || [])[0]; console.log(record record.score ! undefined Array.isArray(record.wrongQuestions));輸出為true說(shuō)明記錄已經(jīng)被正確保存。6.3 邊界層面倒計(jì)時(shí)歸零后是否自動(dòng)交卷。最后一題作答后直接點(diǎn)交卷會(huì)不會(huì)有未答題目。刷新頁(yè)面后已完成的記錄是否還在。如果刷新后未完成的考試進(jìn)度丟失這是預(yù)期內(nèi)的因?yàn)檠菔景姹緵](méi)有做暫存處理。如果你想保留未完成進(jìn)度可以在chooseOption中把a(bǔ)nswers同步寫進(jìn) localStorage。7. 常見(jiàn)問(wèn)題與排查思路不管多簡(jiǎn)單的示例運(yùn)行過(guò)程中都可能遇到問(wèn)題。下面把最常見(jiàn)的幾種情況列出來(lái)方便對(duì)照排查。問(wèn)題現(xiàn)象可能原因排查方式解決方案頁(yè)面顯示“題庫(kù)為空”question-bank.js 文件路徑錯(cuò)誤或者引入順序反了打開(kāi) Network 面板確認(rèn) question-bank.js 是否加載成功把script src./question-bank.js/script放在 Vue 之前點(diǎn)擊選項(xiàng)沒(méi)有高亮Vue 未正常加載查看 Console 是否有 JS 報(bào)錯(cuò)檢查 Vue CDN 地址是否可訪問(wèn)交卷后錯(cuò)題列表里“你的答案”顯示錯(cuò)亂formatAnswer 取錯(cuò)了題目上下文在 Console 中打印q和answers[i]把formatAnswer改成接收題目和答案兩個(gè)參數(shù)刷新后歷史成績(jī)丟失未做 localStorage 持久化在 Console 中執(zhí)行 localStorage.getItem在交卷時(shí)保存記錄并在加載時(shí)讀取本地記錄倒計(jì)時(shí)結(jié)束后沒(méi)有自動(dòng)交卷定時(shí)器被瀏覽器節(jié)流或者代碼邏輯中斷檢查是否有多個(gè)定時(shí)器相互影響使用結(jié)束時(shí)間戳通過(guò)setInterval統(tǒng)一計(jì)算剩余時(shí)間題目順序每次都不一樣這是洗牌邏輯生效的表現(xiàn)不是 bug對(duì)比相鄰兩次題目順序如果希望固定試卷可以不洗牌或使用隨機(jī)種子其中最容易踩坑的是“格式對(duì)但取錯(cuò)了對(duì)象”。很多同學(xué)寫formatAnswer時(shí)習(xí)慣把當(dāng)前題目作為隱式全局結(jié)果在結(jié)果頁(yè)列表循環(huán)中所有題目都顯示第一題的選項(xiàng)。這種問(wèn)題不會(huì)直接報(bào)錯(cuò)非常難發(fā)現(xiàn)最好的辦法是寫單元測(cè)試覆蓋關(guān)鍵函數(shù)。8. 最佳實(shí)踐與工程建議從演示版走向生產(chǎn)環(huán)境下面這些建議可以直接減少返工。8.1 題庫(kù)不要寫死在前端演示版本為了快速跑通把題庫(kù)放在了 JS 文件里。生產(chǎn)環(huán)境如果這樣做有兩個(gè)問(wèn)題前端包體積大加載慢。所有答案都暴露在瀏覽器里用戶抓包就能拿到全部答案。生產(chǎn)環(huán)境下題庫(kù)應(yīng)存儲(chǔ)在服務(wù)端數(shù)據(jù)庫(kù)中前端只請(qǐng)求當(dāng)次考試需要的題目。即使題目本身屬于公開(kāi)題庫(kù)也不建議把所有答案一次性下發(fā)到客戶端。8.2 判分邏輯必須服務(wù)端完成前端的判分只能作為即時(shí)反饋的輔助手段。如果考試結(jié)果需要作為憑證務(wù)必將考生的最終答案、考試開(kāi)始時(shí)間、結(jié)束時(shí)間、設(shè)備指紋等信息提交到服務(wù)端由服務(wù)端完成判分和落庫(kù)。前端禁用按鈕只是第一層防護(hù)接口層需要用全局唯一請(qǐng)求 ID 做冪等控制。8.3 答題進(jìn)度要有持久化方案用戶很可能在答題中途切走、刷新甚至關(guān)閉瀏覽器。為了讓用戶體驗(yàn)更好可以把未完成考試進(jìn)度保存到 localStorage 或服務(wù)端。localStorage 適合單設(shè)備服務(wù)端 Session 適合多設(shè)備場(chǎng)景。休息后重新登錄還能繼續(xù)上次沒(méi)做完的題。8.4 隨機(jī)抽題要關(guān)注種子和可復(fù)現(xiàn)性如果考試需要保證隨機(jī)性但又希望“同一場(chǎng)考試同一份試卷”后端可以生成一個(gè)隨機(jī)種子根據(jù)種子生成同一套試卷。這樣即使前端刷新也能恢復(fù)同一份試卷同時(shí)后端可以審計(jì)用戶本次考試到底用了哪些題結(jié)果才具有可解釋性。8.5 防作弊要放在架構(gòu)層面前端只能限制普通人不誤點(diǎn)真正的防作弊靠后端服務(wù)端記錄考試開(kāi)始時(shí)間和交卷時(shí)間判斷用時(shí)是否異常。服務(wù)端下發(fā)題目時(shí)記錄第幾秒顯示了哪道題。檢測(cè)頁(yè)面可見(jiàn)性變化次數(shù)記錄切屏次數(shù)作為風(fēng)控信號(hào)。用戶答案提交后校驗(yàn)答案長(zhǎng)度、答案格式、提交頻率是否合理。8.6 數(shù)據(jù)記錄要包含“快照”而不是“引用”錯(cuò)題列表保存時(shí)不要只保存題目 ID否則題庫(kù)更新后歷史錯(cuò)題的題干和解析就會(huì)對(duì)不上。應(yīng)該把題目?jī)?nèi)容、選項(xiàng)、答案、解析整體保存為快照讓歷史記錄永久可回看。8.7 代碼拆分謹(jǐn)慎一點(diǎn)演示版把數(shù)據(jù)和邏輯都放在 HTML 里只是為了方便。真實(shí)項(xiàng)目應(yīng)該至少拆成三個(gè)模塊數(shù)據(jù)層倉(cāng)庫(kù)類或 API 封裝。業(yè)務(wù)層生成試卷、判分、記錄管理。展示層答題組件、進(jìn)度組件、結(jié)果組件。這樣后續(xù)加題型、加排行榜、加多科目都不會(huì)把代碼攪成一團(tuán)。你可以先從 Vue 單文件組件開(kāi)始拆分把question-bank.js改成src/data/question-bank.ts再把setup里的邏輯按 Composition API 的useExamSession抽出來(lái)。8.8 保留必要日志在線考試系統(tǒng)要記錄關(guān)鍵流程日志包括用戶進(jìn)入考試。用戶加載題目。用戶交卷。用戶重試。日志的用途不只是排查 bug更是還原用戶行為、校驗(yàn)考試有效性的重要證據(jù)。9. 總結(jié)與后續(xù)學(xué)習(xí)方向如果你現(xiàn)在重新看開(kāi)頭那句“科目一離開(kāi)的太快就像龍卷風(fēng)”會(huì)發(fā)現(xiàn)“快速離開(kāi)”其實(shí)是表象。用戶交卷后系統(tǒng)產(chǎn)生的答題數(shù)據(jù)并不會(huì)離開(kāi)它被保存、被分析、被用來(lái)幫助后續(xù)復(fù)習(xí)。技術(shù)系統(tǒng)的價(jià)值正是在這種“抽身即逝”的場(chǎng)景里把