← FC Coder · HomePhase 03 · Lesson 28 · 60 min
Lesson28
Phase Three · Fullstack · Matchday 28 · The Front Desk
第一个 API
Route Handler
Today's 3 Jobs · 今天这三件事
- 01新建 app/api/players/route.ts · GET返回 JSON
- 02动态 /api/players/[name] · 404 兜底找不到返 404
- 03🌟 curl + 浏览器访问看 JSONAPI 是接待处
浏览器 / curl / 别的网站发请求 · 服务器回答 JSON —— HTTP 是问答(骨架 plan Phase 3 本质点)。`app/api/.../route.ts` 导出 GET/POST。200 OK · 404 Not Found。比喻:球队前台 —— 按门铃 · 递东西。
Concept · API endpoint
服务器接待处
// app/api/players/route.ts
export async function GET() {
return NextResponse.json(players);
}
export async function GET() {
return NextResponse.json(players);
}
GET
问数据 · 不改服务器
POST
送数据 · 服务器收下
状态
200 / 404 / 500
page.tsx 给人看 HTML · route.ts 给程序看 JSON。两类文件 · 两个用途。
Half 2 · 在屏幕上
GET / 动态 / 404 / AI 写 POST
01第一个 GET 端点
01Min
Cursor + pnpm dev
老三件套。
02Min
新建 app/api/players/route.ts · 导出 GET
import { NextResponse } from 'next/server'; import { players } from '@/lib/players'; export async function GET() { return NextResponse.json(players); }
03Min
浏览器访问 localhost:3000/api/players
看到 JSON 数组 22 人。这是给程序看的 · 不是 HTML。
04Min
终端 curl localhost:3000/api/players | head
用 curl(任何 HTTP 客户端)拿到同一份数据。这就是 API 的意义。
02动态参数 + 404
05Min
新建 app/api/players/[name]/route.ts
GET 接收 { params } · await params 拿 name · players.find · 找不到 NextResponse.json({error:'未找到'}, { status: 404 })。
06Min
访问 /api/players/哈兰德
看哈兰德档案 · 状态 200。Network 标签确认。
07Min
访问 /api/players/不存在
看 { error: '未找到' } · Network 显示 404。
03AI 写 POST /api/squads
08Min
AI Supervised:加 /api/squads POST 接收 squad 返回它
Cmd+K · '加 POST · 接收 JSON body · 返回它'。爸爸陪坐 · 看 Request.json() / NextResponse.json 这些 API。
09Min
📸 截图
浏览器 JSON + Network 状态码 200/404 两张。Phase 3 第三张战利品。
讲给爸爸听
4 题 · API 基础
01Route Handler 文件名约定?Hint ↓
route.ts(不是 page)。GET/POST 大写导出。
02/api/players 和 /players 差在哪?Hint ↓
route.ts 返 JSON 给程序 · page.tsx 返 HTML 给人。
03404 什么时候返?Hint ↓
找不到资源(球员名不存在)。手动设 status: 404。
04谁能访问你的 API?Hint ↓
任何人(目前没鉴权)。第 35 课 baby auth 后才能保护。
温度计
给「API 进场」打分
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
服务器接待处开门 —— 任何程序都能问你拿数据。
还有 9 步没打勾。Step 3 浏览器看到 JSON = 算过。