---

🔥 个人主页：铁皮哥（欢迎关注）
📌 作者简介：28届校招生，后端开发/Agent 方向在学
📚 学习内容：Java、Python、计算机视觉、大语言模型、Agent开发
📝 专栏内容：从零开始的Claude Code零代码生活（持续更新中）
✨不只背八股，更想搞懂为什么这样设计

---

前言

本文是系列文章【从零开始的Claude Code零代码生活】的第四篇，从 Mock 到真实数据：让 JobLens 接上后端接口。
上礼拜断更了，主要是眼睛有些不舒服，看电脑屏幕超过十分钟就很难受，主要都在休息，这礼拜恢复更新。

一、让 Claude Code 阅读文档，建立项目上下文

在前面的文章里，我们已经完成了需求拆解、页面设计和原型生成。现在项目目录里不只有代码，还有一组围绕 JobLens 准备好的设计文档：顶层需求、功能设计、数据设计、API 设计、页面需求和实现计划。

这些文档就是这次开发的“施工图”。

Claude Code 在动手写代码之前，必须先理解这些文档。否则它虽然也能生成代码，但很容易按自己的习惯补字段、改接口、换命名，最后写出来的东西看似能跑，却和我们前面定下来的设计不一致。

---

1.1 把项目文档放进 Claude Code 的上下文里

我先把前面准备好的几份文档放在项目目录中：

joblens-design-doc.md
joblens-feature-design.md
joblens-data-design.md
joblens-api-design.md
joblens-ui-requirement.md
joblens-implementation-plan.md

这些文档各自负责不同层面的约束。

joblens-design-doc.md 负责说明 JobLens 的产品定位：它是一个面向校招生的岗位收集与投递进度管理工具，聚焦“岗位快速录入 + 投递状态管理”。文档里也明确了技术栈是 Python + FastAPI + MySQL + React。

joblens-data-design.md 负责定义核心数据结构。比如岗位记录 JobPosition 中，company_name、job_title、status 是关键字段，其中 status 默认是 TODO_APPLY。

joblens-api-design.md 负责规定接口格式。比如本篇要用到的两个接口：创建岗位 POST /api/jobs，以及获取岗位列表 GET /api/jobs。接口返回格式也统一为 code、message、data。

joblens-implementation-plan.md 则负责告诉 Claude Code：项目应该分阶段推进。完整计划里有岗位基础管理、状态流转、JD 解析、提醒统计等多个阶段。

下一步是先让 Claude Code 阅读并复述项目上下文。

我给它的第一段提示词是：

请先阅读 JobLens 项目中的所有设计文档，不要修改任何代码。

重点关注：
1. 项目定位；
2. 技术栈；
3. MVP 范围；
4. 岗位数据模型；
5. 岗位相关 API；
6. 前端页面结构；
7. 实现计划中的阶段划分。

阅读后请输出：
1. 你对 JobLens 的理解；
2. 本次开发需要遵守的关键约束；
3. 文档之间是否存在冲突；
4. 哪些内容属于本次范围，哪些内容不应该现在做。

这一步看起来只是“让 AI 读一遍文档”，但它非常关键。

因为后面所有开发动作，都要基于 Claude Code 对这些文档的理解来展开。

---

1.2 先让 Claude Code 复述它理解到的内容

Claude Code 阅读文档后，先看它的总结。

我重点检查四件事。

第一，它有没有理解 JobLens 的定位。

它应该知道 JobLens 不是普通后台管理系统，而是一个校招投递工作台。用户的核心动作是发现岗位、录入岗位、管理投递状态、查看提醒和统计。页面需求文档里也明确强调，JobLens 的视觉应该是“校招投递工作台”，不是密密麻麻的后台表格。

第二，它有没有记住技术栈。

这个项目已经在文档里确定为：

Python + FastAPI + MySQL + React

所以这里不需要再让 Claude Code 自由选择 Spring Boot、Node.js 或其他方案。

第三，它有没有抓住核心数据模型。

本篇后端开发围绕 JobPosition 展开。岗位记录是 JobLens 的核心实体，对应用户录入的每一个岗位。文档里已经给出了字段设计、必填字段、默认状态和时间字段。

第四，它有没有识别出本次开发边界。

完整的实现计划很长，但这次只做两个功能：

新增岗位
查询岗位列表

如果 Claude Code 的总结里出现了明显偏差，比如主动提出要做登录、权限、JD 大模型解析、自动爬虫，我会先纠正它，再进入下一步。

---

1.3 明确本篇只推进两个功能

等 Claude Code 复述完项目上下文后，我会继续把本篇范围压到最小。

这次只做两个后端功能示例：

POST /api/jobs    新增岗位
GET  /api/jobs    查询岗位列表

对应到前端，也只接两个地方：

快速录入弹窗 → 调用新增岗位接口
岗位列表页面 → 调用岗位列表接口

这样刚好形成一条最小数据链路：

用户填写岗位信息
        ↓
前端提交新增接口
        ↓
后端保存到数据库
        ↓
前端请求岗位列表
        ↓
页面展示真实数据

这一章我会明确告诉 Claude Code，本篇暂时不碰这些内容：

登录注册
多用户
JD 解析
Kanban 拖拽
状态流转
提醒统计
部署上线

然后给出第二段提示词：

这次只开发两个功能：

1. 新增岗位；
2. 查询岗位列表。

请严格按照已有文档，输出最小开发计划。

要求：
1. 先不要写代码；
2. 分别说明后端要改哪些内容；
3. 前端要改哪些内容；
4. 每一步的验收方式是什么；
5. 不要加入本次范围外的功能。

让 Claude Code 在写代码之前，先给出一份开发计划。

我会重点看它的计划里有没有三类内容：

第一，后端是否围绕 JobPosition、POST /api/jobs、GET /api/jobs 展开。

第二，前端是否只涉及快速录入弹窗、岗位列表数据源和 API 请求封装。

第三，有没有混入本篇不需要的功能。

如果计划是干净的，再进入第二章，让 Claude Code 正式开始写后端代码。

---

二、开发两个后端示例功能，并让 Claude Code 自查代码质量

2.1 先生成岗位数据模型

后端开发的第一步，是让 Claude Code 根据数据设计文档生成岗位模型。

在 JobLens 里，岗位记录是最核心的实体。用户每录入一个岗位，后端都要保存一条岗位记录。数据设计文档里已经定义好了 JobPosition 的字段，包括公司名、岗位名、城市、岗位方向、技术栈、来源平台、岗位链接、JD 原文、投递状态、截止日期、备注和时间字段等。

所以这里不能让 Claude Code 自己发挥字段名。

我给它的提示词是：

请根据 joblens-data-design.md 中的 JobPosition 设计，实现岗位数据模型。

要求：
1. 字段名严格使用文档中的 snake_case；
2. company_name 和 job_title 必填；
3. status 默认值为 TODO_APPLY；
4. created_at、updated_at、status_updated_at 自动维护；
5. 只实现岗位基础数据模型，不要实现其他实体。

这一段提示词的重点是 字段对齐。

因为前后端联调时，最容易出现的问题就是字段名不一致。比如后端写成 companyName，前端按 company_name 读取；或者文档里叫 job_title，代码里生成了 position_name。这种错误不一定会让项目直接报错，但会让页面拿不到数据。

所以我在这里明确要求：

字段名严格使用文档中的 snake_case

同时，我也限制了它只实现岗位基础模型。

数据设计文档里还设计了 ApplicationEvent、Reminder、AttachmentLink 等实体，但这一章暂时不需要。ApplicationEvent 是为了记录状态变化，Reminder 是为了后续提醒能力，AttachmentLink 是为了扩展资料链接，这些都可以留到后面的开发。

---

2.2 让 Claude Code 生成数据库表和初始化脚本

先让 Claude Code 根据 joblens-data-design.md 生成数据库表结构。

这里同样不能让它自由发挥。

如果模型字段叫一套，数据库字段叫另一套，接口返回时再转换一套，后面前后端联调会非常痛苦。既然数据设计文档里已经规定了字段，那数据库表也应该沿用同一套命名。

我给它的提示词是：

请根据 joblens-data-design.md 中的 JobPosition 字段设计，生成 MySQL 建表 SQL 和数据库初始化脚本。

要求：
1. 只生成岗位表，不要生成 ApplicationEvent、Reminder、AttachmentLink；
2. 表名使用 job_position；
3. 字段名严格使用文档中的 snake_case；
4. company_name 和 job_title 必填；
5. status 必填，默认值为 TODO_APPLY；
6. created_at、updated_at、status_updated_at 使用 DATETIME；
7. created_at 默认当前时间；
8. updated_at 在更新时自动刷新；
9. status_updated_at 默认当前时间；
10. 给出脚本保存位置，例如 backend/sql/init.sql；
11. 不要修改接口代码。

这一步的重点是把“代码模型”和“数据库表”对齐。

JobLens 的数据设计文档里，岗位记录是核心实体，用户每录入一个岗位，就对应一条 JobPosition 记录。表里至少要包含公司名、岗位名、城市、岗位方向、技术栈、来源平台、岗位链接、JD 原文、投递状态、截止时间、备注和几个时间字段。

生成出来的 SQL 大概会是这样：

CREATE TABLE job_position (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    company_name VARCHAR(200) NOT NULL,
    job_title VARCHAR(200) NOT NULL,
    city VARCHAR(100) NULL,
    job_direction VARCHAR(100) NULL,
    tech_stack VARCHAR(500) NULL,
    source_platform VARCHAR(100) NULL,
    source_url VARCHAR(1000) NULL,
    jd_text TEXT NULL,
    jd_summary VARCHAR(500) NULL,
    status VARCHAR(30) NOT NULL DEFAULT 'TODO_APPLY',
    deadline DATE NULL,
    written_exam_time DATETIME NULL,
    interview_time DATETIME NULL,
    next_action VARCHAR(500) NULL,
    notes TEXT NULL,
    tags VARCHAR(500) NULL,
    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    status_updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
);

生成建表语句之后，我还会继续让 Claude Code 补上本地初始化说明。

提示词如下：

请继续说明如何在本地 MySQL 中执行这个初始化脚本。

要求：
1. 给出创建数据库的 SQL；
2. 给出执行 init.sql 的命令；
3. 说明如何检查 job_position 表是否创建成功；
4. 说明如何清空测试数据；
5. 不要继续开发接口代码。

这里我希望 Claude Code 给出的是可以直接执行的步骤，比如：

CREATE DATABASE joblens DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

以及类似这样的命令：

mysql -u root -p joblens < backend/sql/init.sql

数据库初始化完成后，还需要确认表真的创建成功。

可以进入 MySQL 后执行：

USE joblens;
SHOW TABLES;
DESC job_position;

如果能看到 job_position 表，并且字段和 joblens-data-design.md 保持一致，说明数据库这一层已经准备好了。

2.3 实现新增岗位接口

有了岗位模型之后，下一步就是实现新增岗位接口。

API 设计文档里已经规定，创建岗位的接口是：

POST /api/jobs

请求参数中，company_name 和 job_title 是必填字段，status 如果不传，默认应该是 TODO_APPLY。接口成功后，需要返回创建出来的完整岗位对象。

我给 Claude Code 的提示词是：

请根据 joblens-api-design.md，实现 POST /api/jobs 新增岗位接口。

要求：
1. 请求字段必须和 API 文档一致；
2. 响应格式必须统一为 code、message、data；
3. company_name 为空时返回明确错误；
4. job_title 为空时返回明确错误；
5. 创建成功后返回完整岗位对象；
6. 不要实现登录、权限、JD 解析、状态流转等功能。

这里我重点控制了三件事。

第一，接口字段必须和文档一致。

API 文档里使用的是 company_name、job_title、source_url、jd_text 这样的字段名。后端不能在这里改成另一套命名方式。

第二，响应格式必须统一。

JobLens 的 API 文档里已经规定了统一响应格式：

{
  "code": 0,
  "message": "success",
  "data": {}
}

这个格式很重要。因为前端后面会按照这个结构读取 data。如果某个接口直接返回岗位对象，另一个接口又包了一层 data，前端处理起来就会混乱。

第三，先不加入额外能力。

新增岗位接口只负责新增岗位。它不负责登录校验，不负责自动解析 JD，也不负责状态流转。状态默认进入 TODO_APPLY 就可以了。

如果 Claude Code 在这里顺手写了用户表、权限中间件、JWT 登录，那就说明它又开始扩展范围了，需要立刻打断。

这一节开发完成后，我会先用接口工具或 curl 测试一次新增。

例如：

curl -X POST http://localhost:8000/api/jobs \
  -H "Content-Type: application/json" \
  -d '{
    "company_name": "字节跳动",
    "job_title": "后端开发实习生",
    "city": "北京",
    "job_direction": "后端",
    "tech_stack": "Python,FastAPI,MySQL",
    "source_platform": "牛客",
    "source_url": "https://example.com/job/1",
    "status": "TODO_APPLY",
    "deadline": "2026-06-30",
    "notes": "朋友推荐，优先投递"
  }'

预期返回应该类似这样：

{
  "code": 0,
  "message": "success",
  "data": {
    "id": 1,
    "company_name": "字节跳动",
    "job_title": "后端开发实习生",
    "city": "北京",
    "job_direction": "后端",
    "tech_stack": "Python,FastAPI,MySQL",
    "source_platform": "牛客",
    "source_url": "https://example.com/job/1",
    "status": "TODO_APPLY",
    "deadline": "2026-06-30",
    "notes": "朋友推荐，优先投递"
  }
}

如果不传 company_name 或 job_title，后端应该返回明确错误，而不是直接数据库报错。

---

2.4 实现岗位列表查询接口

新增岗位接口解决的是“写入数据”。

接下来要实现的是“读取数据”。

API 设计文档里规定，获取岗位列表的接口是：

GET /api/jobs

这个接口支持分页，并且返回结构里要包含 list、total、page、page_size。文档里还预留了关键词、状态、城市、方向、技术栈、来源平台和排序参数。

但这篇文章里，我不会让 Claude Code 一次性实现所有筛选条件。

我给它的提示词是：

请根据 joblens-api-design.md，实现 GET /api/jobs 岗位列表接口。

要求：
1. 返回分页结构；
2. data 中包含 list、total、page、page_size；
3. 默认按 created_at 倒序；
4. 第一版只保证基础列表查询可用；
5. 搜索、筛选、复杂排序可以先预留，不要展开实现；
6. 响应格式必须和文档保持一致。

这里有一个细节：虽然 API 文档里列出了很多查询参数，但本篇只需要保证基础列表能查出来。

因为这一篇的主线是让前端从后端拿到真实岗位数据。至于复杂筛选、排序、状态过滤，可以后续继续扩展。

此时接口返回结构应该类似这样：

{
  "code": 0,
  "message": "success",
  "data": {
    "list": [
      {
        "id": 1,
        "company_name": "字节跳动",
        "job_title": "后端开发实习生",
        "city": "北京",
        "job_direction": "后端",
        "tech_stack": "Python,FastAPI,MySQL",
        "source_platform": "牛客",
        "status": "TODO_APPLY",
        "deadline": "2026-06-30",
        "created_at": "2026-05-24 10:00:00",
        "updated_at": "2026-05-24 10:00:00"
      }
    ],
    "total": 1,
    "page": 1,
    "page_size": 20
  }
}

我会重点检查 data.list。

因为第三章接前端时，岗位列表页面就是从这里取数据。如果这里的结构没有按文档返回，前端很容易出现“接口明明请求成功了，但页面没数据”的情况。

---

2.5 让 Claude Code 给出本地测试步骤

这一步先让 Claude Code 帮我整理后端测试步骤。

提示词如下：

请给出本地测试这两个接口的步骤。

要求：
1. 如何启动 FastAPI 后端；
2. 如何初始化数据库；
3. 如何测试 POST /api/jobs；
4. 如何测试 GET /api/jobs；
5. 给出 curl 示例；
6. 说明每一步预期返回什么。

如果 Claude Code 给不出清晰的启动步骤，说明项目结构可能还没有整理好。

如果数据库初始化步骤说不清楚，说明建表 SQL 或迁移脚本可能还缺失。

如果 curl 示例跑不通，说明接口实现还没到可以联调的程度。

我一般会按下面这个顺序检查：

启动后端服务
        ↓
确认 /docs 可以打开
        ↓
初始化 MySQL 数据表
        ↓
调用 POST /api/jobs 创建一条岗位
        ↓
调用 GET /api/jobs 查询岗位列表
        ↓
确认刚才创建的数据能查出来

只有这个流程走通，才说明后端两个示例功能真正完成了。

---

2.6 让 Claude Code 对照文档自查后端代码

代码能跑，只能说明它暂时没有明显报错。

但这还不够。

这一章的重点，是让 Claude Code 在生成代码之后，再回到文档里检查一次。

我给它的提示词是：

请对照 joblens-data-design.md 和 joblens-api-design.md，检查刚才实现的后端代码。

重点检查：
1. 数据字段是否和文档一致；
2. 必填校验是否和文档一致；
3. 默认状态是否正确；
4. 响应格式是否统一；
5. 分页结构是否正确；
6. 是否实现了本次范围外的功能；
7. 是否存在明显代码质量问题。

只输出检查报告，不要直接修改代码。

这里我特意要求它“只输出检查报告”。

因为如果让 Claude Code 一边检查一边修改，它可能会顺手重构一堆文件。这样虽然看起来更主动，但也更容易引入新的不确定性。

我希望它先给出类似这样的结果：

检查结果：

1. 字段一致性
   - company_name、job_title、city、status 等字段与文档一致。
   - source_url 字段与文档一致。
   - 未发现额外命名风格混用。

2. 必填校验
   - company_name 已校验。
   - job_title 已校验。

3. 默认状态
   - status 未传时，默认值为 TODO_APPLY。

4. 响应格式
   - POST /api/jobs 返回 code、message、data。
   - GET /api/jobs 返回 code、message、data。
   - 列表 data 中包含 list、total、page、page_size。

5. 范围控制
   - 未实现登录、权限、JD 解析、状态流转等功能。

6. 发现的问题
   - created_at 返回格式需要统一为字符串。

如果检查报告里发现问题，再继续给它一个更窄的修复指令：

请只修复检查报告中提到的 created_at 返回格式问题。

要求：
1. 不要重构项目；
2. 不要新增功能；
3. 不要修改接口路径；
4. 不要修改前端代码。

这样可以把修改范围控制住。

使用 Claude Code 开发时，一个很实用的节奏是：

生成代码
    ↓
运行测试
    ↓
对照文档自查
    ↓
小范围修复
    ↓
再次测试

这个循环比一次性让它“帮我做完后端”稳定得多。

---

三、接入前端，并让 Claude Code 对照文档验收

第二章里，我们已经让 Claude Code 完成了两个后端接口：

POST /api/jobs    新增岗位
GET  /api/jobs    查询岗位列表

后端接口单独测试通过后，接下来就可以把它们接到前端页面里。

---

3.1 接前端前，先让 Claude Code 找到 Mock 数据

我没有直接对 Claude Code 说“帮我把前端接上后端”。

前端项目通常会有很多组件：页面组件、弹窗组件、卡片组件、列表组件、Mock 数据文件、状态管理文件。如果直接让它接接口，它可能会一口气改很多地方，甚至把原本已经做好的 UI 结构打乱。

所以我先让它做一件更小的事：

只阅读前端项目，找出数据从哪里来。

提示词如下：

请先阅读前端项目，不要修改代码。

请找出：
1. 快速录入岗位弹窗在哪个组件；
2. 岗位列表页面在哪个组件；
3. 当前 Mock 岗位数据在哪里；
4. 当前新增岗位的保存逻辑在哪里；
5. 当前列表数据的来源是什么；
6. 接入 POST /api/jobs 和 GET /api/jobs 最小需要修改哪些文件。

只输出分析结果，不要写代码。

这一步的重点是“定位”。

因为前端接后端，其实不是简单地写一个 fetch 请求。真正要先搞清楚的是：

用户在哪里点击保存？
保存函数现在做了什么？
列表页面现在渲染的是哪份数据？
这些数据是写死在组件里，还是从 mock 文件导入？
新增成功后，列表有没有刷新机制？

如果这些位置没有找准，后面很容易出现一种情况：接口已经写了，按钮也点了，但页面仍然在渲染旧的 Mock 数据。

JobLens 的页面需求文档里已经明确，首页需要有快速录入入口，岗位列表页需要展示岗位数据，并支持搜索、筛选、排序等能力。
这一篇只接入最基础的数据来源，搜索、筛选、排序暂时不展开。

等 Claude Code 输出分析结果后，我会先看它有没有找到三个关键点：

快速录入弹窗组件
岗位列表组件
Mock 数据来源

只要这三个位置找准了，前端接入就不会大范围跑偏。

---

3.2 先封装前端 API 请求

定位完 Mock 数据后，应该先封装一个岗位相关的 API 文件。

比如：

jobApi.js

里面只放两个方法：

createJob()
getJobList()

提示词如下：

请封装岗位相关 API 请求。

要求：
1. 新建 jobApi.js 文件；
2. 提供 createJob 方法，对应 POST /api/jobs；
3. 提供 getJobList 方法，对应 GET /api/jobs；
4. 字段名保持和后端一致，使用 snake_case；
5. 不要在组件里到处直接写 fetch；
6. 不要改动 UI。

这里有两个细节需要控制。

第一个细节是字段名。

后端 API 文档中使用的是 company_name、job_title、source_platform、source_url、jd_text 这一套字段。
如果前端表单里使用的是 companyName、jobTitle，那就需要在提交前做一次字段转换。

这一步可以让 Claude Code 自己处理，但必须提醒它：

最终发给后端的请求字段，必须以 API 文档为准。

第二个细节是响应结构。

后端接口返回的是统一结构：

{
  "code": 0,
  "message": "success",
  "data": {}
}

所以前端不能直接把整个响应当岗位数据用，而是要读取里面的 data。岗位列表接口还要继续读取 data.list 和 data.total。

如果这里处理错，后面页面就会出现“请求成功，但列表为空”的问题。

---

3.3 接入快速录入弹窗

API 请求封装好之后，先接第一个功能：新增岗位。

在第三篇里，快速录入弹窗已经作为重点页面做过示例。现在它要从“前端假保存”变成“调用后端保存”。

我给 Claude Code 的提示词是：

请把快速录入弹窗的保存逻辑改为调用 createJob。

要求：
1. 用户点击保存时调用 POST /api/jobs；
2. 保存成功后关闭弹窗；
3. 保存成功后触发岗位列表刷新；
4. 保存失败时展示错误提示；
5. 保存过程中按钮显示 loading；
6. 不要改变弹窗样式；
7. 不要实现 JD 解析。

这一段指令里，最关键的是第 3 点：

保存成功后触发岗位列表刷新

因为新增岗位接口只解决了“数据写进去”的问题。

如果前端保存成功后没有重新请求列表，用户仍然看不到刚刚新增的岗位，就会以为保存失败了。

所以这里的理想流程应该是：

用户填写岗位信息
        ↓
点击保存
        ↓
按钮进入 loading
        ↓
调用 createJob
        ↓
后端保存成功
        ↓
关闭弹窗
        ↓
重新调用 getJobList
        ↓
页面显示新岗位

这一步完成后，重点检查两个结果。

第一，数据库里是否真的新增了一条岗位记录。

第二，页面上是否能看到这条记录。

只有这两个结果都成立，快速录入弹窗才算真正接入后端。

---

3.4 接入岗位列表查询

接下来是第二个功能：岗位列表查询。

这个功能负责把后端的 GET /api/jobs 接到前端列表页面。

我给 Claude Code 的提示词是：

请把岗位列表的数据来源改为 getJobList。

要求：
1. 页面加载时调用 GET /api/jobs；
2. 使用接口返回的 data.list 渲染列表；
3. 使用接口返回的 total 展示总数；
4. 增加 loading、empty、error 状态；
5. 新增岗位成功后重新请求列表；
6. 不要实现复杂筛选；
7. 不要改动不相关页面。

这里我会特别要求保留三种基础状态：

loading：正在请求岗位数据
empty：当前没有岗位数据
error：请求失败

这三个状态看起来不复杂，但它们是前端从 Mock 数据走向真实接口时必须补上的东西。

使用 Mock 数据时，数据永远都在本地，页面几乎不会遇到加载失败。

接入真实接口后，情况就变了：

后端可能没有启动
接口地址可能写错
数据库可能没有数据
跨域可能没有配置
返回字段可能不符合预期

如果没有 loading、empty、error，页面一旦请求失败，用户只能看到一个空白区域，很难判断到底发生了什么。

岗位列表接口在 API 文档中规定了分页结构，返回的 data 中包含 list、total、page、page_size。
所以前端渲染时，至少要正确使用：

data.list   渲染岗位列表
data.total  展示岗位总数

这一节完成后，页面应该满足三个效果：

打开岗位列表页面，会自动请求后端接口；
没有数据时，页面显示空状态；
新增岗位成功后，列表能显示刚刚新增的数据。

到这里，新增和查询就连起来了。

---

3.5 联调时，让 Claude Code 只检查问题，不急着重构

前后端一接起来，最容易出现各种小问题。

比如接口地址不一致、请求字段不一致、跨域报错、返回结构读取错误、保存成功后列表没有刷新。

这时候我不会让 Claude Code 直接“大修一下”。

我会先让它只做联调检查。

提示词如下：

现在请检查前后端联调是否完整。

重点检查：
1. 前端请求地址是否正确；
2. 请求字段是否和后端一致；
3. 响应 data.list 是否正确使用；
4. 新增成功后列表是否刷新；
5. 错误提示是否能展示；
6. 是否还有旧的 Mock 保存逻辑；
7. 是否还有列表依赖 Mock 数据。

只输出检查结果，不要修改代码。

这一步的好处是，可以先把问题摊开。

如果 Claude Code 发现接口字段不一致，我会让它只修字段映射。

如果它发现保存成功后没有刷新列表，我会让它只补刷新逻辑。

如果它发现组件里还有旧的 Mock 保存逻辑，我会让它只删除那一段。

修复指令也要尽量窄，比如：

请只修复“新增成功后列表没有刷新”的问题。

要求：
1. 不要重构组件；
2. 不要修改 UI；
3. 不要新增功能；
4. 只补充保存成功后的刷新逻辑。

这个阶段最忌讳的是让 Claude Code 一次性“优化一下前端结构”。

因为联调问题往往很小，可能只是一个字段名、一个回调、一个请求地址。如果让它顺手优化结构，原本能跑的页面反而可能被改乱。

---

3.6 让 Claude Code 对照文档做最终验收

最后一步，是让 Claude Code 回到文档里做一次验收。

提示词如下：

请根据项目文档，对本次前后端接入做最终验收。

本次只验收两个功能：
1. 新增岗位；
2. 查询岗位列表。

请输出：
1. 已完成项；
2. 未完成但属于本次范围的项；
3. 没做但不属于本次范围的项；
4. 是否偏离 joblens-api-design.md；
5. 是否偏离 joblens-data-design.md；
6. 是否偏离 joblens-ui-requirement.md；
7. 下一步如果继续扩展，最小应该做什么。

不要修改代码，只输出验收报告。

我希望看到的结果大概是：

已完成：
- POST /api/jobs 可以创建岗位；
- GET /api/jobs 可以查询岗位列表；
- 快速录入弹窗已调用 createJob；
- 岗位列表页面已调用 getJobList；
- 新增成功后可以刷新列表；
- 前端已处理 loading、empty、error 状态。

未完成但不属于本次范围：
- JD 文本解析；
- 状态流转；
- Kanban 拖拽；
- 提醒统计；
- 登录和多用户。

需要注意：
- 筛选和排序接口目前只是预留；
- 岗位详情、编辑、删除还没有接入；
- 后续可以优先接状态更新接口。

---

写在文后

期待您的一键三连！如果有什么问题或建议欢迎在评论区交流！