一、引言

• 介绍 AI 编程工具在前端开发中的应用场景。

• 为什么选择“答题/测验系统”作为案例：功能完整、贴近生活、互动性强。

• 本文目标：使用 AI 编程工具 + JSON 模拟接口，快速实现一个在线答题系统。

二、系统功能设计

1. 题库形式

   • JSON 文件模拟题库（题目、选项、答案）。

   • 示例：

     [ { "id": 1, "type": "single", "question": "以下哪个是JavaScript的基本数据类型？", "options": ["Number", "Integer", "Character", "Double"], "answer": ["Number"] }, { "id": 2, "type": "multi", "question": "下列哪些属于前端框架？", "options": ["Vue", "Spring", "React", "Angular"], "answer": ["Vue", "React", "Angular"] } ]

2. 基本功能点

   • 题目渲染（单选、多选）。

   • 用户提交答案。

   • 系统自动判分。

   • 展示得分和正确答案。

三、使用 AI 编程工具生成代码

1. 提示词设计

   • 示例 prompt：

     “帮我用 Vue3 + Tailwind CSS 实现一个答题系统，题目来源于 JSON 文件，支持单选和多选，提交后自动判分并显示成绩。”

2. 代码生成过程

   • 展示 AI 工具生成的前端页面代码（Vue/HTML）。

   • 展示 AI 工具生成的判分逻辑函数。

   • （可加截图对比：AI 生成的 vs 手写的差别）。

四、系统展示效果

1. JSON 题库示例（questions.json）

[ { "id": 1, "type": "single", "question": "以下哪个是 JavaScript 的基本数据类型？", "options": ["Number", "Integer", "Character", "Double"], "answer": ["Number"] }, { "id": 2, "type": "multi", "question": "下列哪些属于前端框架？", "options": ["Vue", "Spring", "React", "Angular"], "answer": ["Vue", "React", "Angular"] }, { "id": 3, "type": "single", "question": "HTML 的全称是？", "options": [ "HyperText Markup Language", "HighText Machine Language", "Hyperlinks Text Management Language", "Home Tool Markup Language" ], "answer": ["HyperText Markup Language"] } ]

2. Vue3 示例代码（App.vue）

<template> <div class="p-6 max-w-2xl mx-auto"> <h1 class="text-2xl font-bold mb-6">在线答题系统</h1> <div v-for="(q, index) in questions" :key="q.id" class="mb-6 p-4 border rounded-lg shadow"> <p class="font-semibold mb-2">{{ index + 1 }}. {{ q.question }}</p> <div v-for="option in q.options" :key="option" class="flex items-center mb-1"> <input :type="q.type === 'single' ? 'radio' : 'checkbox'" :name="'q' + q.id" :value="option" v-model="answers[q.id]" class="mr-2" /> <label>{{ option }}</label> </div> </div> <button @click="submitAnswers" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" > 提交答案 </button> <div v-if="score !== null" class="mt-6 p-4 border rounded bg-green-100"> <h2 class="text-lg font-bold mb-2">答题结果</h2> <p>得分：<span class="font-semibold">{{ score }}</span> / {{ questions.length }}</p> </div> </div> </template> <script setup> import { ref, onMounted } from "vue"; const questions = ref([]); const answers = ref({}); const score = ref(null); onMounted(async () => { // 模拟加载 JSON 题库 const res = await fetch("./questions.json"); questions.value = await res.json(); // 初始化答案存储结构 questions.value.forEach((q) => { answers.value[q.id] = q.type === "single" ? "" : []; }); }); const submitAnswers = () => { let total = 0; questions.value.forEach((q) => { const userAnswer = Array.isArray(answers.value[q.id]) ? [...answers.value[q.id]].sort() : [answers.value[q.id]]; const correctAnswer = [...q.answer].sort(); if (JSON.stringify(userAnswer) === JSON.stringify(correctAnswer)) { total++; } }); score.value = total; }; </script> <style> body { font-family: Arial, sans-serif; } </style>

3. 使用方式

1. 新建一个 Vue3 项目（npm init vue@latest）。

2. 把 questions.json 放到 public 目录下。

3. 替换 src/App.vue 内容为上面的代码。

4. 启动项目：

   npm install npm run dev

5. 浏览器打开后即可看到答题系统效果。

   • 答题页面（单选、多选）。

   • 点击提交后显示得分和正确答案。

• 说明交互体验，突出“AI 生成代码速度快”。

五、经验总结

1. AI 工具的优势

   • 快速生成页面骨架。

   • 自动生成判分逻辑。

   • 大幅减少手工编码时间。

2. 需要人工介入的部分

   • 提示词（Prompt）要清晰。

   • 对生成代码进行小范围调试。

   • 优化交互体验。

3. 延伸思考

   • 可以扩展为：用户登录、错题本、排行榜。

   • 结合后端或数据库，形成真正的在线学习系统。