Web 与 HTTP 基础

作者: luote (luote) · 个人主页 luote996.cn

浏览器里发生了什么

用户在地址栏输入 http://localhost:5173/login 并回车后，浏览器会向服务器发起一次 HTTP 请求。服务器处理完后返回 HTTP 响应，浏览器根据响应内容渲染页面。

create-luote 是典型的 前后端分离：前端只负责页面，后端只负责接口，二者通过 HTTP + JSON 通信。

URL 结构

以 http://localhost:8080/api/users?page=1&size=10 为例：

部分	含义
http	协议
localhost:8080	主机与端口（后端默认 8080，前端 dev 默认 5173）
/api/users	路径，对应后端 Controller 上的路由
?page=1&size=10	查询参数，分页常用

常见 HTTP 方法

方法	典型用途	luote 示例
GET	查询数据	获取当前用户信息
POST	新增或提交	登录、注册、上传
PUT	全量更新	修改用户资料
DELETE	删除	软删除用户

REST 风格约定：用名词表示资源（如 /users），用 HTTP 方法表示操作。脚手架的 Controller 基本遵循这一习惯。

请求与响应长什么样

请求头（Header）

常见字段：

Header	作用
Content-Type	告诉服务器 body 格式，JSON 多为 application/json
Authorization	携带 JWT，格式 Bearer <token>

登录成功后，前端会在后续请求的 Header 里带上 Token，后端过滤器校验通过才允许访问受保护接口。

请求体（Body）

POST 登录示例：

{
  "username": "admin",
  "password": "admin123",
  "captchaKey": "uuid",
  "captchaCode": "abcd"
}

响应体（Body）

luote 统一使用 Result 包装：

{
  "code": 200,
  "message": "success",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIs...",
    "user": { "id": 1, "username": "admin" }
  }
}

前端 request.ts 会解析 code，非 200 则提示错误并中断流程。

状态码

状态码	含义	常见场景
200	成功	业务 code 也可能在 body 里表示失败
401	未认证	Token 缺失或过期
403	无权限	角色不足
404	路径不存在	接口写错
500	服务器错误	未捕获异常

JSON 是什么

JSON（JavaScript Object Notation）是前后端交换数据的通用格式。键必须是双引号字符串，值可以是字符串、数字、布尔、数组、对象或 null。

Java 里用 DTO/VO 类对应 JSON 字段；TypeScript 里用 interface 或 type 描述结构，编译期能发现字段拼写错误。

跨域 CORS

前端 http://localhost:5173 请求后端 http://localhost:8080 属于 不同源（端口不同）。浏览器默认会拦截，需要后端配置 CORS 白名单。脚手架在 SecurityConfig 中已处理开发环境跨域，生产环境需在配置里填写真实前端域名。

与 luote 脚手架的关系

概念	在脚手架中的位置
登录 POST	AuthController + src/api/auth.ts
统一响应	common/result/Result.java
携带 Token	JwtAuthenticationFilter + request.ts 拦截器
跨域	SecurityConfig

下一章：SQL 与 MySQL