Lecture · Jimmy Huang's Blog

Lecture · Jimmy Huang's Blog

Express

0）起点

你打开网站。浏览器先拿到页面的 HTML/CSS/JS（静态资源可以由同一台服务器或 CDN 提供）。
前端 JS 在你的浏览器里运行，准备好与后端交互。

1）登录（POST /api/login）

你在页面输入账号密码，点“登录”。
前端把表单数据打包成一个请求，发到后端接口 /api/login（HTTP POST）。
Express 收到请求，依次做几件事：
- 中间件先处理公共事情：解析请求体、记录日志、限流、CORS 检查等。
- 路由把请求分发到“登录处理器”。
- 业务逻辑核对账号密码（去数据库查用户、做密码校验）。
- 成功后生成“登录状态”，常见两种：
  - 会话 Cookie（服务端保存会话，返回一个安全 Cookie）。
  - JWT（返回一个签名的令牌，前端后续带上它）。
- Express 返回“登录成功”的响应（状态码 200），并附带 Cookie 或令牌。
前端收到响应，页面进入“已登录”状态（显示你的昵称、退出按钮等）。

2）查看待办列表（GET /api/todos）

页面加载你的待办列表。
前端向 /api/todos 发起 GET 请求，并自动带上登录凭证（Cookie 或在请求头里带上 JWT）。
Express 做授权中间件校验：这个人是否已登录、权限是否正确。
授权通过后，处理器去数据库查询“当前用户的待办列表”，结果是若干条记录。
Express 把结果打包为 JSON 返回（状态码 200）。
前端拿到 JSON，渲染成可见的待办项列表。

3）新增一条待办（POST /api/todos）

你在输入框写“今晚跑步 30 分钟”，点“新增”。
前端向 /api/todos 发起 POST 请求，携带你的新待办内容。
Express 先走授权与校验中间件（登录状态、请求体字段是否合法）。
处理器把这条新待办写入数据库，并得到新记录的唯一 ID。
Express 返回“创建成功”（常见状态码 201），附上新纪录的数据。
前端把这条新纪录插入到页面列表里，你立刻看到它出现。

4）异常与保护（同样在这条链上发生）

失败场景：密码不对时，Express 返回 401 未授权；请求缺字段时返回 400；服务器内部错误返回 500。前端据此给出清晰提示。
安全：整站走 HTTPS；Cookie 设为 HttpOnly/SameSite；若前后端域名不同，还需要正确配置 CORS。
性能：查询可加缓存或索引；静态资源走 CDN；接口可做限流与压缩。
实时（可选）：如果希望多人协作时列表“秒同步”，可以在 Express 上挂 WebSocket（或用 Socket.IO）推送“有新待办”的事件给浏览器。

在这个案例里，Express 具体做了什么？

路由分发：把 /api/login、/api/todos 等不同 URL 和方法（GET/POST）分到对应处理函数。
中间件流水线：统一做日志、解析 JSON、鉴权/权限、参数校验、错误集中处理、CORS 等。
业务编排：组合“鉴权 → 查库/写库 → 调第三方服务（可选） → 组装返回值”。
规范响应：设置正确的状态码（200/201/400/401/403/404/500 等）与 JSON 结构，方便前端稳定处理。

你可以把整条链想成一句话

前端发出“我要干这个”的请求 → Express 负责“你是谁、能不能干、具体怎么干、干完怎么回” → 前端拿到明确结果刷新界面。