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

文章目录

一、项目背景与核心目标
二、技术选型与项目结构
三、核心功能开发
- [第二级：输入岗位 + 技术栈](#第二级：输入岗位 + 技术栈)
- [第二级：调用 OpenAI 生成问题+答案+考点](#第二级：调用 OpenAI 生成问题+答案+考点)
- [第二级：问题列表展示 + 复制功能](#第二级：问题列表展示 + 复制功能)
- 第二级：可视化技术图谱（mermaid）
- [第二级：下载图谱 PDF（可选）](#第二级：下载图谱 PDF（可选）)
四、功能拓展建议（可实现）
- [✅ 选择题型偏好](#✅ 选择题型偏好)
- [✅ 收藏题库 + 标记重要题目](#✅ 收藏题库 + 标记重要题目)
- [✅ 多岗位对比面试重点](#✅ 多岗位对比面试重点)
- [✅ 一键导出题库 PDF / Word](#✅ 一键导出题库 PDF / Word)
- [✅ GPT-4 识别用户简历并推荐重点复习方向](#✅ GPT-4 识别用户简历并推荐重点复习方向)

一、项目背景与核心目标

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

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

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

🎯 功能目标：

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

二、技术选型与项目结构

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

项目结构如下：

bash 复制代码

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

三、核心功能开发

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

html 复制代码

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

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

js 复制代码

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
}

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

html 复制代码

<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）

js 复制代码

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

加载 mermaid.js：

html 复制代码

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

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

js 复制代码

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')
}

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

✅ 选择题型偏好

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

html 复制代码

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

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

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

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

js 复制代码

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 识别用户简历并推荐重点复习方向

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

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

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多篇前端实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～

创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：

点个赞❤️ 让更多人看到优质内容

关注「前端极客探险家」🚀 每周解锁新技巧

收藏文章⭐️ 方便随时查阅

📢 特别提醒：

转载请注明原文链接，商业合作请私信联系

感谢你的阅读！我们下篇文章再见～ 💕