打造一个 AI 面试助手：输入岗位 + 技术栈 → 自动生成面试问题 + 标准答案 + 技术考点图谱

一、项目背景与核心目标

在求职过程中，很多开发者都会面临：

• 不知道某岗位常见面试题有哪些？
• 不清楚哪些知识点会被重点考察？
• 想提前准备，但苦于资料太散乱？

因此，本文将带你打造一个「AI 面试助手」：

🎯 功能目标：

• 用户输入岗位名称 + 技术栈关键词
• 自动生成该岗位的：
  • ✅ 常见面试问题（基础 + 场景 + 思维）
  • ✅ 标准参考答案（GPT 自动生成）
  • ✅ 技术考点知识图谱（可视化）
• 一键复制 / 下载 / 收藏备份

二、技术选型与项目结构

技术	用途
Vue 3 + Composition API	前端构建
Tailwind CSS	快速 UI 布局
OpenAI GPT-4 API	生成问答内容
mermaid.js	绘制知识图谱
html2canvas + jsPDF	下载图谱 PDF
localStorage	存储历史岗位和问题记录

项目结构如下：

src/
├── views/Interview.vue
├── components/PromptInput.vue
├── components/QuestionList.vue
├── components/KnowledgeMap.vue
└── utils/openai.js

三、核心功能开发

第二级：输入岗位 + 技术栈

<template><input v-model="role" placeholder="如：前端工程师" class="input" /><input v-model="stack" placeholder="如：Vue、TypeScript、Vite" class="input" /><button @click="generateQuestions">生成面试问题</button>
</template>

第二级：调用 OpenAI 生成问题+答案+考点

async function generateQuestions() {const prompt = `
你是一个专业的${role}面试官，请基于以下技术栈：${stack}
帮我生成 5 道常见面试题，并附带每道题的详细参考答案。同时，请提取这些问题所涉及的技术知识点并绘制一份结构化的知识图谱。输出格式：
1. 面试题及答案列表
2. 知识点结构（可转化为思维导图）
`const res = await axios.post('https://api.openai.com/v1/chat/completions', {model: 'gpt-4',messages: [{ role: 'user', content: prompt }],}, {headers: {Authorization: `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`,}})result.value = res.data.choices[0].message.content
}

第二级：问题列表展示 + 复制功能

<div v-for="(q, i) in questionList" :key="i" class="border p-4 mb-2"><h4>问题 {{ i+1 }}：</h4><p class="font-semibold">{{ q.question }}</p><p class="mt-2 text-gray-700">{{ q.answer }}</p><button @click="copyToClipboard(q.question + '\n' + q.answer)">复制</button>
</div>

第二级：可视化技术图谱（mermaid）

<div class="bg-white p-4"><pre class="mermaid">
graph TDVue --> 响应式原理Vue --> 组件通信TypeScript --> 类型系统类型系统 --> 泛型Vite --> 热更新机制...</pre>
</div>

加载 mermaid.js：

<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });
</script>

第二级：下载图谱 PDF（可选）

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'async function downloadPDF() {const canvas = await html2canvas(document.querySelector('.mermaid'))const pdf = new jsPDF()const img = canvas.toDataURL('image/png')pdf.addImage(img, 'PNG', 10, 10, 180, 160)pdf.save('interview-knowledge-map.pdf')
}

四、功能拓展建议（可实现）

✅ 选择题型偏好

让用户选择“算法题 / 项目经验 / 系统设计”题型偏向：

<select v-model="preference"><option value="基础">基础知识</option><option value="项目">项目类题</option><option value="架构">系统设计</option>
</select>

将选择项融入 prompt 中控制 GPT 输出。

✅ 收藏题库 + 标记重要题目

使用 localStorage 或 indexedDB 实现题目收藏 + 标签分类：

function saveQuestion(q) {const list = JSON.parse(localStorage.getItem('favorites') || '[]')list.push(q)localStorage.setItem('favorites', JSON.stringify(list))
}

✅ 多岗位对比面试重点

输入多个岗位，生成对比分析图谱（如：前端 vs 后端）

✅ 一键导出题库 PDF / Word

将 GPT 返回内容转 Markdown → PDF → 提供下载。

✅ GPT-4 识别用户简历并推荐重点复习方向

粘贴简历后结合岗位智能筛题：

• 你缺少的知识点有哪些？
• 哪些项目细节值得拓展？

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕