从零构建AI面试助手：Spring Boot 3 + Vue 3 全栈架构实战
一、前言
1.1 传统面试准备的痛点
在当前的就业市场中，面试准备一直是求职者和HR面临的共同难题。根据调研数据显示，超过70%的求职者在面试前感到焦虑，主要原因包括：
- 信息不对称：不了解目标公司的面试风格和考察重点
- 缺乏实战演练：传统刷题方式无法模拟真实面试场景
- 反馈不及时：自我练习时难以获得专业的改进建议
- 简历匹配度低：简历与岗位JD匹配度不高，导致简历筛选通过率低下
- 面试经验难以沉淀：每次面试都是独立事件，无法形成知识积累
1.2 AI赋能面试的新机遇
随着大语言模型（LLM）技术的快速发展，AI正在重塑面试准备的各个环节。AI面试助手可以：
- 智能模拟面试：基于岗位JD生成针对性面试问题，模拟真实面试官
- 简历智能优化：分析简历与岗位匹配度，提供优化建议
- 语音交互能力：支持语音面试，还原真实面试场景
- 多模型支持：根据不同场景选择最优AI模型
- 数据驱动决策：记录面试表现，提供量化分析报告
本文将详细介绍如何从零构建一个完整的AI面试助手系统，涵盖技术选型、架构设计、开发实践等全流程。
二、项目背景与需求分析
2.1 项目定位
AI面试助手是一个面向求职者和HR的全栈应用系统，核心定位包括：
| 维度 | 描述 |
|---|---|
| 目标用户 | 求职者（初级到高级）、HR、猎头 |
| 核心场景 | 简历优化、模拟面试、笔试题库、面试复盘 |
| 技术特色 | 多模型LLM、语音交互、向量检索、智能推荐 |
| 商业模式 | 免费基础版 + 付费高级版 + 企业定制版 |
2.2 功能需求分析
2.2.1 核心功能模块
┌─────────────────────────────────────────────────────────────┐
│ AI面试助手系统 │
├─────────────┬─────────────┬─────────────┬───────────────────┤
│ 用户中心 │ 简历管理 │ 面试中心 │ 笔试题库 │
├─────────────┼─────────────┼─────────────┼───────────────────┤
│ • 注册登录 │ • 简历上传 │ • AI模拟面试 │ • 分类题库 │
│ • 套餐管理 │ • 智能解析 │ • 语音面试 │ • 智能组卷 │
│ • 积分系统 │ • 版本管理 │ • 面试记录 │ • 错题本 │
│ • 通知中心 │ • JD匹配分析 │ • 能力评估 │ • 知识点图谱 │
└─────────────┴─────────────┴─────────────┴───────────────────┘2.2.2 非功能性需求
- 性能要求：接口响应时间 < 500ms，支持并发用户 1000+
- 可用性：系统可用性 99.9%，支持故障自动恢复
- 安全性：JWT认证、敏感数据加密、API限流防刷
- 扩展性：支持水平扩展，新模型接入零代码改动
- 可维护性：模块化设计，完善的日志和监控体系
三、技术架构总览
3.1 系统架构图
┌─────────────────────────────────────────────────────────────────────────┐
│ 前端层 (Frontend) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │
│ │ Vue 3 │ │ Element Plus│ │ Pinia │ │ Vue Router │ │
│ │ Composition│ │ UI组件库 │ │ 状态管理 │ │ 路由管理 │ │
│ │ API │ │ │ │ │ │ │ │
│ └──────┬──────┘ └─────────────┘ └─────────────┘ └─────────────────┘ │
│ │ │
│ │ HTTP/WebSocket │
│ ▼ │
└─────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────┐
│ 网关层 (Gateway) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │
│ │ Nginx │ │ 负载均衡 │ │ SSL终结 │ │ 静态资源缓存 │ │
│ │ 反向代理 │ │ │ │ │ │ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────┐
│ 后端层 (Backend) │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Spring Boot 3.4.0 Application │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │ │
│ │ │Controller│ │ Service │ │ Repository│ │ Entity │ │ Config│ │ │
│ │ │ 控制层 │ │ 业务层 │ │ 数据访问 │ │ 实体层 │ │ 配置 │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └────────┘ │ │
│ │ │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │ │
│ │ │Spring AI │ │Spring Sec│ │ JWT │ │ Redis │ │PostgreSQL│ │ │
│ │ │ AI集成 │ │ 安全框架 │ │ 认证 │ │ 缓存 │ │ 数据库 │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
│
┌───────────────┼───────────────┐
▼ ▼ ▼
┌───────────────────────┐ ┌─────────────────┐ ┌─────────────────────┐
│ 数据存储层 │ │ 缓存层 │ │ 外部服务层 │
│ ┌─────────────────┐ │ │ ┌─────────────┐│ │ ┌───────────────┐ │
│ │ PostgreSQL │ │ │ │ Redis ││ │ │ OpenAI API │ │
│ │ 关系型数据库 │ │ │ │ 缓存/队列 ││ │ │ GPT-4/GPT-3.5│ │
│ │ + pgvector │ │ │ │ 限流/会话 ││ │ └───────────────┘ │
│ └─────────────────┘ │ │ └─────────────┘│ │ ┌───────────────┐ │
│ │ │ │ │ │ DeepSeek API │ │
│ │ │ │ │ │ 深度求索 │ │
│ │ │ │ │ └───────────────┘ │
│ │ │ │ │ ┌───────────────┐ │
│ │ │ │ │ │ MiniMax API │ │
│ │ │ │ │ │ 海螺AI │ │
│ │ │ │ │ └───────────────┘ │
└───────────────────────┘ └─────────────────┘ └─────────────────────┘3.2 数据流向设计
用户请求流程：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. 用户操作 → Vue 3前端 → Axios请求 → Nginx网关 → Spring Boot后端
2. 认证流程：
登录请求 → JWT生成 → Token返回 → 前端存储 → 后续请求携带Token
3. AI调用流程：
面试请求 → 模型选择 → Prompt构建 → LLM API调用 → 流式响应 → 前端展示
4. 数据持久化流程：
业务操作 → Service处理 → Repository持久化 → PostgreSQL存储
5. 缓存使用场景：
- 用户会话：Redis Hash存储
- 热点数据：Redis String缓存
- 限流控制：Redis Lua脚本实现滑动窗口
- 消息队列：Redis List实现异步任务四、核心技术选型详解
4.1 后端技术栈选型
4.1.1 Spring Boot 3.4 核心优势
Spring Boot 3.x 是基于 Spring Framework 6 和 Java 17+ 的重大升级版本，我们选择 3.4.0 的主要原因：
| 特性 | 说明 | 本项目收益 |
|---|---|---|
| GraalVM原生镜像 | 支持AOT编译生成原生可执行文件 | 启动时间从秒级降至毫秒级，内存占用降低50% |
| 虚拟线程支持 | Project Loom虚拟线程正式集成 | 高并发场景下线程资源利用率大幅提升 |
| Observability增强 | Micrometer 1.12+ 统一可观测性 | 链路追踪、指标监控开箱即用 |
| Spring AI集成 | 官方AI框架支持 | LLM调用标准化，多模型切换无缝衔接 |
| ** Jakarta EE 9** | 包名从javax迁移到jakarta | 与新一代Java生态保持一致 |
4.1.2 Spring AI vs LangChain4j 对比分析
在Java生态中，Spring AI和LangChain4j是两个主要的LLM集成框架，我们最终选择Spring AI：
java
// Spring AI 调用示例 - 简洁直观
@Autowired
private ChatClient chatClient;
public String chat(String message) {
return chatClient.prompt()
.user(message)
.call()
.content();
}
// LangChain4j 调用示例 - 相对复杂
ChatLanguageModel model = OpenAiChatModel.builder()
.apiKey("your-api-key")
.modelName("gpt-4")
.build();
String response = model.generate(UserMessage.from(message)).content().text();| 对比维度 | Spring AI | LangChain4j | 本项目选择 |
|---|---|---|---|
| 生态整合 | 与Spring生态深度集成 | 独立框架，需额外配置 | Spring AI |
| 配置方式 | application.yml声明式配置 | 代码式配置 | Spring AI |
| 自动配置 | 支持Spring Boot Starter | 需手动配置 | Spring AI |
| 多模型支持 | 官方支持10+模型提供商 | 社区支持较广 | Spring AI |
| 流式响应 | 原生支持Flux流式输出 | 支持但需额外处理 | Spring AI |
| Prompt管理 | PromptTemplate模板引擎 | 类似功能 | 相当 |
| 向量存储 | 集成PgVector、Redis等 | 集成较多向量数据库 | Spring AI |
| 社区活跃度 | Spring官方维护，更新快 | 社区驱动 | Spring AI |
结论：对于已经使用Spring Boot的项目，Spring AI是更自然的选择，配置简洁、生态完善、官方支持有保障。
4.2 前端技术栈选型
4.2.1 Vue 3 + Element Plus 技术组合
typescript
// Vue 3 Composition API 示例 - 面试页面逻辑
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useInterviewStore } from '@/stores/interview'
import { ElMessage } from 'element-plus'
const interviewStore = useInterviewStore()
const currentQuestion = ref('')
const isRecording = ref(false)
const messages = ref<Array<{role: string, content: string}>>([])
// 开始语音面试
const startVoiceInterview = async () => {
try {
await interviewStore.initVoiceSession()
isRecording.value = true
ElMessage.success('语音面试已开始')
} catch (error) {
ElMessage.error('初始化失败')
}
}
// 发送消息
const sendMessage = async (content: string) => {
messages.value.push({ role: 'user', content })
const response = await interviewStore.sendMessage(content)
messages.value.push({ role: 'assistant', content: response })
}
</script>4.2.2 Vue 3 vs React 技术选型对比
| 对比维度 | Vue 3 | React | 本项目选择 |
|---|---|---|---|
| 学习曲线 | 平缓，模板语法直观 | 较陡，需掌握JSX和Hooks | Vue 3 |
| 性能表现 | 响应式系统，渲染优化好 | Virtual DOM，需手动优化 | Vue 3 |
| TypeScript支持 | 原生支持，类型推导完善 | 需额外配置，生态成熟 | 相当 |
| 组件库生态 | Element Plus、Ant Design Vue | Ant Design、Material UI | Vue 3 |
| 企业级后台 | Element Plus成熟稳定 | Ant Design功能丰富 | Vue 3 |
| 团队熟悉度 | 国内使用广泛 | 大厂使用较多 | Vue 3 |
| AI应用案例 | 快速开发，迭代效率高 | 生态更丰富 | Vue 3 |
Element Plus 核心优势：
- 企业级中后台UI组件库，组件丰富度国内第一
- 与Vue 3深度整合，Composition API友好
- 主题定制能力强，支持暗黑模式
- 文档完善，中文社区活跃
4.3 数据库选型
4.3.1 PostgreSQL + pgvector 向量存储
sql
-- pgvector 扩展启用
CREATE EXTENSION IF NOT EXISTS vector;
-- 创建带向量字段的简历表
CREATE TABLE resumes (
id BIGSERIAL PRIMARY KEY,
user_id BIGINT NOT NULL,
content TEXT NOT NULL,
embedding VECTOR(1536), -- OpenAI text-embedding-ada-002维度
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- 创建向量索引 - 支持相似度搜索
CREATE INDEX idx_resumes_embedding ON resumes
USING ivfflat (embedding vector_cosine_ops)
WITH (lists = 100);
-- 相似简历检索查询
SELECT id, content,
1 - (embedding <=> query_embedding) AS similarity
FROM resumes
WHERE 1 - (embedding <=> query_embedding) > 0.8
ORDER BY embedding <=> query_embedding
LIMIT 10;PostgreSQL选型理由：
| 特性 | MySQL | PostgreSQL | 本项目选择 |
|---|---|---|---|
| JSON支持 | JSON类型，功能有限 | JSONB类型，索引、查询强大 | PostgreSQL |
| 向量扩展 | 不支持原生向量 | pgvector插件成熟 | PostgreSQL |
| 全文检索 | 基础支持 | 高级全文检索，多语言支持 | PostgreSQL |
| 复杂查询 | 优化器较简单 | 优化器强大，复杂查询性能好 | PostgreSQL |
| AI应用生态 | 社区方案较少 | 与LLM生态整合更好 | PostgreSQL |
| ACID合规 | 部分存储引擎不完全 | 完全ACID合规 | PostgreSQL |
4.3.2 pgvector 向量检索原理
向量相似度计算流程：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. 文本向量化
简历文本 → OpenAI Embedding API → 1536维向量
2. 向量存储
向量 + 元数据 → PostgreSQL + pgvector → 建立IVFFlat索引
3. 相似度检索
查询文本 → 向量化 → 余弦相似度计算 → 返回Top-K结果
索引算法选择：
- IVFFlat：平衡查询速度和召回率，适合百万级数据
- HNSW：查询速度更快，内存占用更高，适合千万级数据4.4 缓存层设计
4.4.1 Redis 多场景应用架构
java
/**
* Redis 多场景配置类
*/
@Configuration
public class RedisConfig {
// 场景1：缓存 - 热点数据缓存，TTL 5-30分钟
@Bean("cacheRedisTemplate")
public RedisTemplate<String, Object> cacheRedisTemplate(
RedisConnectionFactory factory) {
RedisTemplate<String, Object> template = new RedisTemplate<>();
template.setConnectionFactory(factory);
// 配置序列化...
return template;
}
// 场景2：分布式锁 - 防止并发问题
public boolean tryLock(String key, String value, long expireTime) {
Boolean result = redisTemplate.opsForValue()
.setIfAbsent(key, value, expireTime, TimeUnit.SECONDS);
return Boolean.TRUE.equals(result);
}
// 场景3：限流 - 滑动窗口算法
public boolean rateLimit(String key, int maxRequests, int windowSeconds) {
long now = System.currentTimeMillis();
long windowStart = now - windowSeconds * 1000;
redisTemplate.opsForZSet().removeRangeByScore(key, 0, windowStart);
Long current = redisTemplate.opsForZSet().zCard(key);
if (current != null && current >= maxRequests) {
return false; // 限流触发
}
redisTemplate.opsForZSet().add(key, String.valueOf(now), now);
redisTemplate.expire(key, windowSeconds, TimeUnit.SECONDS);
return true;
}
// 场景4：消息队列 - 异步任务处理
public void enqueue(String queueName, Object message) {
redisTemplate.opsForList().rightPush(queueName, message);
}
public Object dequeue(String queueName) {
return redisTemplate.opsForList().leftPop(queueName, 5, TimeUnit.SECONDS);
}
}4.4.2 Redis 应用场景矩阵
| 应用场景 | 数据结构 | 实现方案 | 业务价值 |
|---|---|---|---|
| 用户会话 | Hash | JWT Token黑名单 + 用户状态 | 支持登出、多端管理 |
| 热点数据缓存 | String | 面试题库、配置信息 | 降低DB压力，提升响应速度 |
| 分布式锁 | String + Lua | SET NX EX + 唯一标识 | 防止重复提交、并发问题 |
| API限流 | Sorted Set | 滑动窗口算法 | 防止恶意刷接口 |
| 异步队列 | List | LPUSH/BRPOP | 简历解析、消息通知异步化 |
| 排行榜 | Sorted Set | ZADD/ZREVRANGE | 面试能力排行榜 |
| 布隆过滤器 | RedisBloom | 防止缓存穿透 | 提升缓存命中率 |
五、项目模块划分
5.1 后端模块结构
ai-interview-guide-backend/
├── pom.xml # 父POM，统一管理依赖版本
├── src/
│ └── main/
│ ├── java/com/aiinterview/
│ │ ├── AInterviewApplication.java # 启动类
│ │ ├── config/ # 配置类
│ │ │ ├── SecurityConfig.java # Spring Security配置
│ │ │ ├── RedisConfig.java # Redis配置
│ │ │ ├── WebConfig.java # Web跨域配置
│ │ │ └── AiConfig.java # Spring AI配置
│ │ ├── controller/ # 控制层
│ │ │ ├── AuthController.java # 认证接口
│ │ │ ├── ResumeController.java # 简历接口
│ │ │ ├── InterviewController.java # 面试接口
│ │ │ ├── QuestionController.java # 题库接口
│ │ │ └── UserController.java # 用户接口
│ │ ├── service/ # 业务层
│ │ │ ├── impl/ # 实现类
│ │ │ ├── AuthService.java
│ │ │ ├── ResumeService.java
│ │ │ ├── InterviewService.java
│ │ │ └── LlmService.java # LLM统一调用服务
│ │ ├── repository/ # 数据访问层
│ │ │ ├── UserRepository.java
│ │ │ ├── ResumeRepository.java
│ │ │ └── InterviewRepository.java
│ │ ├── entity/ # 实体类
│ │ │ ├── User.java
│ │ │ ├── Resume.java
│ │ │ └── InterviewSession.java
│ │ ├── dto/ # 数据传输对象
│ │ │ ├── request/ # 请求DTO
│ │ │ └── response/ # 响应DTO
│ │ ├── vo/ # 视图对象
│ │ ├── enums/ # 枚举类
│ │ │ ├── ModelProvider.java # 模型提供商枚举
│ │ │ └── UserRole.java # 用户角色枚举
│ │ ├── exception/ # 异常处理
│ │ ├── utils/ # 工具类
│ │ │ ├── JwtUtils.java # JWT工具
│ │ │ └── SecurityUtils.java # 安全工具
│ │ └── interceptor/ # 拦截器
│ │ └── JwtAuthenticationFilter.java
│ └── resources/
│ ├── application.yml # 主配置
│ ├── application-dev.yml # 开发环境
│ ├── application-prod.yml # 生产环境
│ └── prompts/ # AI Prompt模板
│ ├── interview-system.prompt
│ ├── resume-optimize.prompt
│ └── question-generate.prompt5.2 前端模块结构
ai-interview-guide-frontend/
├── package.json # 项目依赖
├── vite.config.ts # Vite配置
├── tsconfig.json # TypeScript配置
├── index.html # 入口HTML
├── src/
│ ├── main.ts # 入口文件
│ ├── App.vue # 根组件
│ ├── api/ # API接口封装
│ │ ├── auth.ts # 认证相关
│ │ ├── resume.ts # 简历相关
│ │ ├── interview.ts # 面试相关
│ │ └── request.ts # Axios封装
│ ├── components/ # 公共组件
│ │ ├── common/ # 通用组件
│ │ ├── interview/ # 面试相关组件
│ │ └── resume/ # 简历相关组件
│ ├── views/ # 页面视图
│ │ ├── auth/ # 认证页面
│ │ │ ├── LoginView.vue
│ │ │ └── RegisterView.vue
│ │ ├── resume/ # 简历管理
│ │ │ ├── ResumeListView.vue
│ │ │ ├── ResumeUploadView.vue
│ │ │ └── ResumeOptimizeView.vue
│ │ ├── interview/ # 面试中心
│ │ │ ├── InterviewHomeView.vue
│ │ │ ├── InterviewChatView.vue
│ │ │ └── InterviewVoiceView.vue
│ │ ├── question/ # 笔试题库
│ │ └── dashboard/ # 个人中心
│ ├── stores/ # Pinia状态管理
│ │ ├── auth.ts # 用户认证状态
│ │ ├── interview.ts # 面试状态
│ │ └── resume.ts # 简历状态
│ ├── router/ # 路由配置
│ │ └── index.ts
│ ├── utils/ # 工具函数
│ │ ├── storage.ts # 本地存储
│ │ ├── validate.ts # 表单验证
│ │ └── format.ts # 格式化
│ ├── types/ # TypeScript类型
│ │ ├── auth.ts
│ │ ├── resume.ts
│ │ └── interview.ts
│ └── assets/ # 静态资源
│ ├── images/
│ ├── styles/
│ └── icons/5.3 核心业务模块详解
5.3.1 用户认证模块
用户认证流程：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
注册流程：
用户输入 → 参数校验 → 用户名查重 → BCrypt加密密码 → 写入DB → 返回成功
登录流程：
用户输入 → 参数校验 → 查询用户 → 密码比对 → 生成JWT → 返回Token
Token验证：
请求携带Token → JWT拦截器 → 解析验证 → 注入用户上下文 → 放行/拒绝
权限控制：
方法注解 @PreAuthorize("hasRole('PREMIUM')") → 角色校验 → 执行/拒绝5.3.2 简历管理模块
简历处理流程：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
上传流程：
PDF/Word上传 → 文件校验 → 文本提取(PDFBox/POI) → 内容存储 → 向量化 → 写入PgVector
优化流程：
选择简历 → 输入目标JD → 构建Prompt → LLM分析 → 生成优化建议 → 保存版本
匹配分析：
简历向量化 ←→ JD向量化 → 余弦相似度计算 → 匹配度评分 → 生成匹配报告5.3.3 面试中心模块
AI面试流程：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
初始化：
选择岗位类型 → 加载Prompt模板 → 创建Session → 初始化ChatHistory
面试进行：
用户输入 → 上下文组装 → 模型调用 → 流式响应 → 前端展示 → 记录对话
语音面试：
语音输入 → WebRTC采集 → STT识别 → 文本处理 → LLM响应 → TTS合成 → 语音播放
面试评估：
对话结束 → 分析回答质量 → 生成能力雷达图 → 输出改进建议 → 保存面试记录六、开发环境搭建
6.1 环境要求
| 组件 | 版本要求 | 说明 |
|---|---|---|
| JDK | 21 LTS | Spring Boot 3.4最低要求Java 17，推荐21 |
| Node.js | 20 LTS | Vue 3开发推荐版本 |
| Maven | 3.9+ | 依赖管理 |
| PostgreSQL | 16+ | 关系型数据库 |
| Redis | 7.0+ | 缓存服务 |
| IDE | IntelliJ IDEA 2023.3+ | 推荐IDE |
6.2 后端环境搭建步骤
bash
# 1. 克隆项目
git clone https://github.com/your-repo/ai-interview-guide.git
cd ai-interview-guide-backend
# 2. 配置数据库
# 创建PostgreSQL数据库
createdb ai_interview_db
# 启用pgvector扩展
psql ai_interview_db -c "CREATE EXTENSION IF NOT EXISTS vector;"
# 3. 配置Redis
# 启动Redis服务
redis-server
# 4. 配置环境变量
cp .env.example .env
# 编辑.env文件，配置数据库连接、Redis连接、API密钥等
# 5. 编译运行
./mvnw clean install
./mvnw spring-boot:run
# 6. 验证启动
curl http://localhost:8080/actuator/health6.3 前端环境搭建步骤
bash
# 1. 进入前端目录
cd ai-interview-guide-frontend
# 2. 安装依赖
npm install
# 3. 配置环境
# .env.development 文件
VITE_API_BASE_URL=http://localhost:8080/api
VITE_WS_URL=ws://localhost:8080/ws
# 4. 启动开发服务器
npm run dev
# 5. 访问应用
# 浏览器打开 http://localhost:51736.4 Docker 一键部署
yaml
# docker-compose.yml 配置
version: '3.8'
services:
postgres:
image: ankane/pgvector:latest
environment:
POSTGRES_DB: ai_interview_db
POSTGRES_USER: postgres
POSTGRES_PASSWORD: password
ports:
- "5432:5432"
volumes:
- postgres_data:/var/lib/postgresql/data
redis:
image: redis:7-alpine
ports:
- "6379:6379"
volumes:
- redis_data:/data
backend:
build: ./ai-interview-guide-backend
ports:
- "8080:8080"
environment:
- SPRING_PROFILES_ACTIVE=dev
- SPRING_DATASOURCE_URL=jdbc:postgresql://postgres:5432/ai_interview_db
- SPRING_REDIS_HOST=redis
depends_on:
- postgres
- redis
frontend:
build: ./ai-interview-guide-frontend
ports:
- "80:80"
depends_on:
- backend
volumes:
postgres_data:
redis_data:七、总结与下篇预告
7.1 本文总结
本文详细介绍了AI面试助手项目的整体架构设计和技术选型过程，核心要点包括：
- 技术栈选择：Spring Boot 3.4 + Vue 3 + PostgreSQL + Redis，全栈现代化技术组合
- Spring AI优势：相比LangChain4j更适合Spring生态，配置简洁、官方支持
- 向量数据库：pgvector扩展让PostgreSQL具备向量检索能力，满足AI应用需求
- Redis多场景应用：缓存、锁、限流、队列，一个组件解决多个问题
- 模块化设计：清晰的模块划分，便于团队协作和后续扩展
7.2 项目亮点
- 多模型支持：OpenAI、DeepSeek、MiniMax等10+模型一键切换
- 语音交互：完整的语音面试流程，支持STT和TTS
- 向量检索：基于pgvector的简历智能匹配
- 企业级安全：JWT认证 + RBAC权限控制 + API限流
7.3 下篇预告
下一篇文章：《Spring Boot 3 项目初始化：从0到1搭建企业级后端框架》
将重点讲解：
- Spring Boot 3.4 项目初始化配置
- Maven多模块架构设计
- 统一返回结果封装
- 日志与监控配置
- 项目结构规范与代码示例
敬请期待！
参考资料
- Spring Boot 3.4 官方文档
- Spring AI 参考文档
- Vue 3 官方文档
- Element Plus 组件库
- pgvector 向量扩展
- PostgreSQL 16 文档
- Redis 7.0 文档
下篇预告：《Spring Boot 3 项目初始化：从0到1搭建企业级后端框架》
如果本文对你有帮助，欢迎点赞、收藏、评论交流！关注专栏获取更多AI应用开发实战内容。