本系列记录我从 0 到 1 尽可能的复刻一个 JavaGuide 的开源 AI 智能面试平台的全过程。

技术栈：Vue3 + Spring Boot + PostgreSQL + Redis + Docker

我把原项目前端技术的React改成了我熟悉的Vue

Day 1 的目标很简单： 让项目真正跑起来，并完成前后端最小闭环。

一、Day 1 目标

今天结束时，我必须拿到这 5 个结果：

• Docker 依赖服务启动成功（PostgreSQL / Redis / MinIO）
• 前端 Vue3 项目启动成功
• 前端路由骨架可以正常切换页面
• 后端 Spring Boot 项目启动成功
• 浏览器访问 /api/health 能返回 JSON

也就是说：

项目从“空目录”，变成“可以运行的工程”。

二、项目整体结构设计

Day 1 首先确定了项目的基础目录结构：

ai-interview-platform/
  frontend/
  backend/
  docs/
  docker-compose.yml
  README.md

这一步非常重要，因为：

项目结构一旦混乱，后面开发成本会指数级上升。

三、Docker 基础环境搭建

为了保证开发环境统一，我使用 Docker 启动依赖服务。

当前项目依赖：

• PostgreSQL
• Redis
• MinIO（对象存储，可选）

执行：

docker ps

当前运行容器：

• PostgreSQL: localhost:5432
• Redis: localhost:6379
• MinIO: localhost:9000

完成标准：

• 所有容器状态为 Running
• 端口成功映射
• Docker Desktop 能看到服务

四、前端项目初始化（Vue3）

前端使用：

• Vue3
• Vue Router
• Pinia
• Axios
• Vite

安装核心依赖

npm install vue-router
npm install pinia
npm install axios

五、前端项目结构设计

Day 1 不追求复杂功能，只做 最小可运行结构。

src/
  api/
  router/
  stores/
  views/
    resume/
    interview/
  components/
  assets/

六、核心页面设计

今天创建了 5 个核心页面：

• 上传简历
• 简历库
• 简历详情
• 模拟面试
• 面试记录

对应：

• UploadView.vue
• ResumeListView.vue
• ResumeDetailView.vue
• InterviewView.vue
• InterviewHistoryView.vue

七、Layout 布局实现

今天完成了：

左侧菜单 + 右侧内容区

Layout
 ├── Sidebar
 └── Content

实现效果：

• 点击菜单
• 页面切换
• 路由正常工作

这一步意味着：

前端骨架已经完成。

八、前端验证请求能力（Axios）

为了验证前端网络请求链路，我封装了 Axios，并调用后端接口：

GET /api/health

验证内容：

• Axios 是否正常
• 代理是否正常
• CORS 是否正常

最终：

请求成功 页面成功展示结果

九、后端 Spring Boot 初始化

Day 1 的后端目标只有一个：

能启动，并能连接数据库。

使用依赖：

• Spring Web
• Validation
• Spring Data JPA
• PostgreSQL Driver
• Lombok

注意：

今天刻意不引入：

• Spring AI
• Redis
• MinIO SDK
• pgvector

原因：

Day 1 只做基础设施，不做业务。

十、数据库连接配置

配置内容：

• 端口：8080
• 数据库：PostgreSQL
• JPA：自动建表

示例：

spring:
  datasource:
    url: jdbc:postgresql://localhost:5432/interview
    username: postgres
    password: 123456

  jpa:
    hibernate:
      ddl-auto: update

完成标准：

Spring Boot 启动时没有数据库连接错误。

十一、实现健康检查接口

Day 1 唯一业务接口：

GET /api/health

返回：

{
  "status": "UP",
  "service": "ai-interview-platform"
}

作用：

• 验证后端是否正常运行
• 验证前后端通信是否成功
• 验证代理是否正确

十二、前后端联调成功

最终验证：

• 前端：http://localhost:5173
• 后端：http://localhost:8080/api/health

结果：

• 前端页面可访问
• 后端接口可访问
• Axios 请求成功
• JSON 成功展示

这一步意味着：

系统已经形成最小闭环。

十三、Day 1 最终验收清单

今天结束前，只检查这 8 条：

• 项目目录完整
• Docker 服务正常
• Vue3 项目可访问
• 前端路由骨架完成
• Spring Boot 工程可启动
• 数据库连接成功
• /api/health 可访问
• 写了 Day 1 开发记录

如果这 8 条都满足：

Day 1 就是成功的。

十四、Day 1 总结

今天没有做复杂功能，只完成了一件非常关键的事情：

把一个项目从 0 变成了一个真正可以运行的工程。

这是所有系统开发中最重要的一步。

因为：

一个跑不起来的系统，什么都不是。

十五、下一步（Day 2）

Day 2 的重点会是：

• 统一前端请求封装 request.ts
• 统一后端返回结构 Result
• 全局异常处理
• CORS 配置
• 数据库连接稳定