“科目一離開(kāi)的太快就像龍卷風(fēng)”我會(huì)想你的——這句話(huà)最近經(jīng)常出現(xiàn)在駕考相關(guān)的討論里。考試當(dāng)天緊張地刷完題目交卷電子屏幕上彈出“合格”然后一切就像被風(fēng)卷走一樣迅速結(jié)束。這段經(jīng)歷很多人都經(jīng)歷過(guò)但站在技術(shù)開(kāi)發(fā)者的角度看“科目一”不只是駕考中的一個(gè)科目它代表了一類(lèi)非常典型的產(chǎn)品場(chǎng)景題庫(kù)管理、隨機(jī)抽題、在線(xiàn)答題、自動(dòng)判分、錯(cuò)題回顧。這類(lèi)場(chǎng)景開(kāi)發(fā)門(mén)檻不高但想做得穩(wěn)定、順手、抗造并不像簡(jiǎn)單寫(xiě)一個(gè)靜態(tài)頁(yè)面那么容易。這篇文章先從一個(gè)最小可用的“科目一模擬考試系統(tǒng)”說(shuō)起使用 Vue 3 在瀏覽器里直接跑通整個(gè)流程再?gòu)臓顟B(tài)管理、數(shù)據(jù)存儲(chǔ)、隨機(jī)算法、防作弊邊界這些角度把在線(xiàn)測(cè)評(píng)類(lèi)項(xiàng)目的工程化思路一并講清楚。如果你正在做刷題 App、在線(xiàn)考試后臺(tái)、面試復(fù)盤(pán)工具或者單純想給自己的項(xiàng)目加一個(gè)“模擬測(cè)試”模塊這篇文章應(yīng)該能幫你避開(kāi)不少?gòu)澛贰?. 這篇文章真正要解決的問(wèn)題很多開(kāi)發(fā)者在接到“做一個(gè)在線(xiàn)答題/刷題功能”的需求時(shí)第一反應(yīng)是這有什么難的不就是展示題目、點(diǎn)擊選項(xiàng)、最后算個(gè)分。實(shí)際做起來(lái)會(huì)發(fā)現(xiàn)真正的問(wèn)題遠(yuǎn)不止這些。一次完整的在線(xiàn)測(cè)評(píng)至少要回答下面幾個(gè)問(wèn)題題庫(kù)題目從哪里加載前端寫(xiě)死還是后端接口下發(fā)每次進(jìn)入考試的題目順序是否一致如果不一致用什么方式打亂用戶(hù)答題中途刷新頁(yè)面會(huì)不會(huì)丟進(jìn)度要不要自動(dòng)保存交卷后成績(jī)存在哪里錯(cuò)題記錄如何保留如果同時(shí)有很多人考試怎么避免重復(fù)提交和成績(jī)異常前端直接暴露題庫(kù)怎么防止有人抓包把答案爬走這些看起來(lái)是“細(xì)節(jié)”的東西恰恰決定了這個(gè)模塊能不能上線(xiàn)、能不能維護(hù)、能不能扛住并發(fā)?；氐綐?biāo)題那句話(huà)“科目一離開(kāi)的太快就像龍卷風(fēng)”。從產(chǎn)品體驗(yàn)來(lái)說(shuō)考試結(jié)束意味著一次練習(xí)的結(jié)束但從技術(shù)系統(tǒng)角度來(lái)看用戶(hù)剛才產(chǎn)生的答題行為、時(shí)間消耗、錯(cuò)題數(shù)據(jù)、成績(jī)記錄都應(yīng)該被沉淀下來(lái)。哪怕界面瞬間關(guān)閉數(shù)據(jù)依然有跡可循。這也正是“在線(xiàn)測(cè)評(píng)系統(tǒng)”和“一個(gè)普通表單頁(yè)面”的本質(zhì)區(qū)別前者關(guān)注狀態(tài)流轉(zhuǎn)和數(shù)據(jù)留存后者只關(guān)心當(dāng)下提交。這篇文章適合三類(lèi)讀者剛?cè)腴T(mén)的前端或全棧開(kāi)發(fā)者想了解答題類(lèi)交互的完整實(shí)現(xiàn)路徑。正在維護(hù)刷題類(lèi)產(chǎn)品的開(kāi)發(fā)者想梳理出更好的架構(gòu)和排查問(wèn)題的方法。希望把“半成品Demo”升級(jí)成“可上線(xiàn)模塊”的技術(shù)負(fù)責(zé)人。接下來(lái)我們先用最小成本把系統(tǒng)跑起來(lái)再逐步深入。2. 基礎(chǔ)概念與核心原理在寫(xiě)代碼之前先理清幾個(gè)在線(xiàn)考試系統(tǒng)里的基礎(chǔ)概念。這些概念不限于“科目一模擬考試”所有答題、測(cè)評(píng)、問(wèn)卷類(lèi)產(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)境更推薦。用戶(hù)的答案提交到服務(wù)端之后由后端統(tǒng)一計(jì)算得分避免前端代碼被篡改導(dǎo)致分?jǐn)?shù)異常。前端判分并不是不能用而是要清楚它的邊界它只適合“非監(jiān)管型”場(chǎng)景。如果考試結(jié)果有公信力要求后端判分是底線(xiàn)。2.4 答題狀態(tài)Session State答題狀態(tài)包括當(dāng)前做到第幾題、每一題選了哪個(gè)選項(xiàng)、哪些題被標(biāo)記了、剩余時(shí)間是多少。這些狀態(tài)可以是內(nèi)存變量也可以是持久化數(shù)據(jù)。如果用戶(hù)刷新頁(yè)面內(nèi)存變量會(huì)全部丟失。為了體驗(yàn)更好需要把“未完成的考試進(jìn)度”保存到 localStorage 或者服務(wù)端 Session 中。2.5 答題記錄與錯(cuò)題本Record and Wrong Question交卷之后用戶(hù)通常會(huì)看到成績(jī)頁(yè)并且期望以后能重新查看錯(cuò)題。所以系統(tǒng)需要把“本次考試的答題快照”保存下來(lái)而不是只保存一個(gè)總分。只保存總分的話(huà)用戶(hù)以后想復(fù)盤(pán)錯(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è)“能上線(xiàn)”的考試系統(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ò)需要能夠訪(fǎng)問(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. 核心流程拆解在線(xiàn)考試系統(tǒng)的業(yè)務(wù)流程并不復(fù)雜拆開(kāi)后其實(shí)只有六步。把這六步理順后面寫(xiě)代碼就不會(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ù)文件路徑寫(xiě)錯(cuò)或者引入順序反了導(dǎo)致頁(yè)面提示“題目為空”。4.2 初始化考試會(huì)話(huà)點(diǎn)擊“開(kāi)始考試”后系統(tǒng)需要?jiǎng)?chuàng)建一個(gè)新的考試會(huì)話(huà)。會(huì)話(huà)包含打亂后的題目數(shù)組。當(dāng)前題號(hào)。每道題的用戶(hù)答案。標(biāo)記數(shù)組標(biāo)記哪些題用戶(hù)不確定。剩余時(shí)間。會(huì)話(huà)初始化完成后再進(jìn)入答題界面。4.3 渲染題目與選項(xiàng)根據(jù)當(dāng)前題號(hào)從題目數(shù)組中取出對(duì)應(yīng)的題目渲染到頁(yè)面。用戶(hù)點(diǎn)擊某個(gè)選項(xiàng)后把該選項(xiàng)索引保存到答案數(shù)組。如果用戶(hù)切換題目再切回來(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ì)用戶(hù)體驗(yàn)影響很大用戶(hù)可以在不確定的題目上打個(gè)記號(hào)交卷前集中檢查。4.5 交卷與判分用戶(hù)點(diǎn)擊“交卷”后系統(tǒng)遍歷所有題目比較用戶(hù)答案和正確答案得出總分和錯(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。以后用戶(hù)可以查看歷史成績(jī)也可以重新進(jìn)入錯(cuò)題回顧。如果只是用一個(gè)總分變量保存刷新頁(yè)面后歷史記錄就沒(méi)了這是很多初級(jí)實(shí)現(xiàn)容易忽略的點(diǎn)。5. 完整示例與代碼實(shí)現(xiàn)下面直接給出完整示例。為了降低運(yùn)行門(mén)檻我使用“原生 HTML Vue 3 CDN”的寫(xiě)法文件結(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ī)接打電話(huà), 停在安全地點(diǎn)后再使用, 讓副駕幫忙拿著自己繼續(xù)開(kāi)車(chē) ], answer: 2, explain: 駕駛中使用手機(jī)會(huì)分散注意力必須停到安全地點(diǎn)后再使用。 }, { id: 2, type: single, question: 車(chē)輛起步前最合理的動(dòng)作是什么, options: [ 直接掛擋起步, 調(diào)整座椅、系好安全帶、檢查后視鏡, 先按喇叭再起步, 踩油門(mén)再觀(guān)察 ], answer: 1, explain: 起步前應(yīng)先檢查座椅、安全帶和后視鏡這是安全駕駛的基本習(xí)慣。 }, { id: 3, type: single, question: 車(chē)輛發(fā)生輕微剮蹭事故后更穩(wěn)妥的第一步做法是, options: [ 讓車(chē)輛保持原位等待交警, 下車(chē)與對(duì)方爭(zhēng)執(zhí), 拍照固定現(xiàn)場(chǎng)后盡快撤離并按規(guī)定處理, 直接駕車(chē)離開(kāi) ], answer: 2, explain: 輕微事故應(yīng)先拍照固定現(xiàn)場(chǎng)再按流程處理避免引發(fā)交通擁堵。具體處理方式以官方規(guī)則為準(zhǔn)。 }, { id: 4, type: single, question: 雨天行車(chē)最容易導(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)降低車(chē)速并拉大跟車(chē)距離。 }, { 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)車(chē)窗繼續(xù)駕駛 ], answer: 1, explain: 疲勞駕駛風(fēng)險(xiǎn)很高正確做法是進(jìn)入服務(wù)區(qū)休息靠咖啡只能短暫提神不能替代休息。 }, { id: 6, type: single, question: 夜間行駛時(shí)遇到對(duì)向車(chē)輛一直開(kāi)著遠(yuǎn)光燈怎么辦, options: [ 也打開(kāi)遠(yuǎn)光燈回?fù)? 減速并交替變換燈光提示對(duì)方, 靠邊停車(chē)等對(duì)方通過(guò), 加速超越前方車(chē)輛 ], answer: 1, explain: 夜間會(huì)車(chē)遇到對(duì)方未切換近光應(yīng)減速并交替變化燈光提示不要斗氣開(kāi)遠(yuǎn)光。 }, { id: 7, type: single, question: 駕駛機(jī)動(dòng)車(chē)行經(jīng)人行橫道時(shí)遇到行人正在通過(guò)應(yīng)該怎么做, options: [ 鳴喇叭提醒行人讓路, 減速讓行, 從行人身后繞行, 加速通過(guò) ], answer: 1, explain: 行經(jīng)人行橫道遇行人正在通過(guò)時(shí)應(yīng)當(dāng)停車(chē)讓行這是安全原則。 }, { 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ù)。下面是修正后的寫(xiě)法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í)尤其要留意這類(lèi)函數(shù)它們依賴(lài)了隱式的上下文狀態(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然后在瀏覽器訪(fǎng)問(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同步寫(xiě)進(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 地址是否可訪(fǎng)問(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é)寫(xiě)formatAnswer時(shí)習(xí)慣把當(dāng)前題目作為隱式全局結(jié)果在結(jié)果頁(yè)列表循環(huán)中所有題目都顯示第一題的選項(xiàng)。這種問(wèn)題不會(huì)直接報(bào)錯(cuò)非常難發(fā)現(xiàn)最好的辦法是寫(xiě)單元測(cè)試覆蓋關(guān)鍵函數(shù)。8. 最佳實(shí)踐與工程建議從演示版走向生產(chǎn)環(huán)境下面這些建議可以直接減少返工。8.1 題庫(kù)不要寫(xiě)死在前端演示版本為了快速跑通把題庫(kù)放在了 JS 文件里。生產(chǎn)環(huán)境如果這樣做有兩個(gè)問(wèn)題前端包體積大加載慢。所有答案都暴露在瀏覽器里用戶(hù)抓包就能拿到全部答案。生產(chǎn)環(huán)境下題庫(kù)應(yīng)存儲(chǔ)在服務(wù)端數(shù)據(jù)庫(kù)中前端只請(qǐng)求當(dāng)次考試需要的題目。即使題目本身屬于公開(kāi)題庫(kù)也不建議把所有答案一次性下發(fā)到客戶(hù)端。8.2 判分邏輯必須服務(wù)端完成前端的判分只能作為即時(shí)反饋的輔助手段。如果考試結(jié)果需要作為憑證務(wù)必將考生的最終答案、考試開(kāi)始時(shí)間、結(jié)束時(shí)間、設(shè)備指紋等信息提交到服務(wù)端由服務(wù)端完成判分和落庫(kù)。前端禁用按鈕只是第一層防護(hù)接口層需要用全局唯一請(qǐng)求 ID 做冪等控制。8.3 答題進(jìn)度要有持久化方案用戶(hù)很可能在答題中途切走、刷新甚至關(guān)閉瀏覽器。為了讓用戶(hù)體驗(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ì)用戶(hù)本次考試到底用了哪些題結(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)。用戶(hù)答案提交后校驗(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ù)類(lèi)或 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 保留必要日志在線(xiàn)考試系統(tǒng)要記錄關(guān)鍵流程日志包括用戶(hù)進(jìn)入考試。用戶(hù)加載題目。用戶(hù)交卷。用戶(hù)重試。日志的用途不只是排查 bug更是還原用戶(hù)行為、校驗(yàn)考試有效性的重要證據(jù)。9. 總結(jié)與后續(xù)學(xué)習(xí)方向如果你現(xiàn)在重新看開(kāi)頭那句“科目一離開(kāi)的太快就像龍卷風(fēng)”會(huì)發(fā)現(xiàn)“快速離開(kāi)”其實(shí)是表象。用戶(hù)交卷后系統(tǒng)產(chǎn)生的答題數(shù)據(jù)并不會(huì)離開(kāi)它被保存、被分析、被用來(lái)幫助后續(xù)復(fù)習(xí)。技術(shù)系統(tǒng)的價(jià)值正是在這種“抽身即逝”的場(chǎng)景里把