打造一个 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 TD
  Vue --> 响应式原理
  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 后端）

前端

Vue

响应式

后端

Node

IO性能

✅ 一键导出题库 PDF / Word

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

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

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

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

---

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