HTTP 与 RESTful

HTTP 是前端和后端之间的"共同语言"。理解 HTTP，联调时就不会瞎猜。

一、一次请求长什么样

POST /api/order HTTP/1.1                 ← 请求行：方法 + 路径 + 协议版本
Host: api.mall.com                       ← 请求头
Authorization: Bearer eyJhbGci...        ← 认证令牌（JWT）
Content-Type: application/json           ← 告诉后端发的是 JSON

{"productId": 1, "count": 2}             ← 请求体（body）

后端返回：

HTTP/1.1 200 OK                          ← 状态行
Content-Type: application/json

{"code": 0, "message": "下单成功", "data": {"orderId": 1024}}

二、请求方法（动词）

方法	语义	商城中的例子
GET	查数据（不改变服务器状态）	查商品列表
POST	新增数据	注册、登录、下单
PUT	整体更新	修改商品（全量替换）
PATCH	部分更新	修改购物车数量
DELETE	删除	删除购物车条目

幂等性（面试点）

GET/PUT/DELETE 是幂等的——调用一次和调用一百次结果一样。POST 不是。这也是为什么"扣库存"这类操作一般不直接用 POST 重复调用。

三、状态码（必背）

状态码	含义	典型场景
200	成功	正常返回
201	已创建	下单成功
400	请求参数错误	缺字段、格式不对
401	未认证	没登录 / token 过期
403	无权限	普通用户访问管理接口
404	资源不存在	商品 id 不存在
500	服务器内部错误	后端异常（看日志排查）

前端联调的第一件事：看状态码定位问题在谁。401/403 多半是前端没带 token；400 是参数问题；500 是后端代码问题。

四、RESTful 风格设计接口

REST 主张"用 URL 表示资源，用方法表示操作"，本教程商城 API 全部遵循：

资源	操作	接口
商品	查询列表	GET /api/product/list?keyword=&page=1&size=10
商品	查询详情	GET /api/product/{id}
购物车	查询我的	GET /api/cart
购物车	新增	POST /api/cart
购物车	删除条目	DELETE /api/cart/{cartItemId}
订单	下单	POST /api/order

设计要点：

• 用名词复数表示资源：/products、/orders。
• 查询参数用于过滤/分页：?page=1&size=10&keyword=手机。
• 嵌套关系用路径层级：/api/order/{id}。
• 版本前缀：/api/v1/...，本教程用 /api。

五、前后端统一返回结构（企业标配）

后端所有接口返回统一 JSON 结构，前端才能统一处理：

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

• code === 0 表示成功（很多公司用 0 而不是 200 做业务码）。
• 失败时 code !== 0，message 给出人类可读的错误。
• data 是业务数据，类型随接口变化。

前端封装请求时，统一在返回层拦截错误并提示：

// 伪代码：前端 axios 请求拦截
const res = await http.get('/api/product/list')
if (res.code === 0) {
  return res.data
} else {
  ElMessage.error(res.message)   // 提示后端返回的错误信息
}

六、跨域（CORS）

浏览器有个安全限制：同源策略——默认情况下 http://localhost:5173 的前端页面，不能直接请求 http://localhost:8080 的后端接口（端口不同即跨域）。

解决方案（后端开 CORS）：

// Spring Boot 全局跨域配置（第 6 部分详讲）

// 开发阶段也可以用 Vite 代理，第 4 部分会配置
server: {
  proxy: { '/api': 'http://localhost:8080' }
}

本章小结

联调时你只需要三件事：看请求方法对不对、看状态码、看返回结构 code/message/data。其余都在框架里帮你封装好了。