网站是怎么工作的

字数

1507 字

预计阅读

7 分钟

在动手之前，先花 20 分钟弄明白一件事：你在浏览器里点一下按钮，背后到底发生了什么？ 这是理解整个项目的基础。

用"餐厅"来打比方

餐厅	网站	本项目里
菜单和餐桌：客人看到的、能操作的	前端	Vue 3 + Element Plus（apps/web）
服务员：接收点单、检查、传话	接口（API）	/api/... 这些地址
厨房：按规矩做菜	后端	NestJS（apps/server）
仓库：存放食材	数据库	MySQL
备餐台：放着马上要用的东西，拿起来很快	缓存	Redis

客人（用户）只和菜单、服务员打交道，看不到厨房。厨房要检查"这位客人能不能点这道菜"（权限），然后从仓库取食材做菜（读写数据库），最后由服务员端出去（返回数据）。

一次真实的请求

你在后台的"岗位管理"页面点了"搜索"，会发生这些事：

① 浏览器（前端）
   用户点击"搜索"
   → 向服务器发送一个请求：
     GET http://localhost:5173/api/iam/positions?page=1&code=dev

② 服务器（后端）
   → 检查：你登录了吗？
   → 检查：你有"查看岗位"的权限吗？
   → 检查：参数的格式对吗？
   → 向数据库查询

③ 数据库
   → 找到编码里包含 dev 的岗位，返回给后端

④ 后端 → 浏览器
   → 返回结果：{ "code": 0, "msg": "ok", "data": { "items": [...], "total": 1 } }

⑤ 浏览器
   → 把结果显示在表格里

整个过程通常只要几十毫秒。

几个一定要懂的词

URL（网址）

http://localhost:5173/api/iam/positions?page=1&code=dev
└┬─┘   └───┬───┘ └┬─┘└────────┬───────┘└──────┬──────┘
协议    主机名   端口      路径             查询参数

• localhost：意思是"我自己这台电脑"。开发的时候，服务器就运行在你自己的电脑上；
• 端口：一台电脑上可以同时运行很多个程序，端口号用来区分它们。本项目的前端使用 5173 端口，后端使用 3000 端口，MySQL 使用 3306 端口，Redis 使用 6379 端口；
• 查询参数：? 后面的部分，用 & 连接多个参数。

HTTP 方法

同一个地址，用不同的"方法"表示不同的动作：

方法	意思	例子
GET	查询	GET /api/iam/positions 查询岗位列表
POST	新增	POST /api/iam/positions 新增一个岗位
PUT	修改	PUT /api/iam/positions/3 修改 3 号岗位
DELETE	删除	DELETE /api/iam/positions/3 删除 3 号岗位

HTTP 状态码

服务器每次回复时都会带上一个三位数字，告诉你结果怎么样：

状态码	意思	生活中的例子
200	成功	菜上来了
400	你的请求有问题（比如必填项没填）	点单写错了
401	你还没登录	没有会员卡，不能进门
403	你没有权限	员工通道，客人不能进
404	找不到	菜单上没有这道菜
409	冲突（比如编码重复了）	这个座位已经被预订了
500	服务器内部出错了	厨房着火了

记住这张表，以后看到报错时，先看状态码，就能大概知道问题出在哪一边：4 开头的是请求的问题，5 开头的是服务器的问题。

JSON

前后端之间传递数据用的格式。它长这样：

{
  "id": 3,
  "code": "dev",
  "name": "开发工程师",
  "enabled": true,
  "tags": ["技术", "研发"]
}

• 用 { } 表示一个对象，里面是"键": 值；
• 用 [ ] 表示一个列表；
• 字符串要用双引号，数字和 true / false 不用。

数据库和表

数据库里的数据是一张张表，很像 Excel：

id	code	name	enabled
1	dev	开发工程师	1
2	qa	测试工程师	1

• 每一行是一条记录（一个岗位）；
• 每一列是一个字段，并且类型是固定的（数字、文字、时间……）；
• 每张表都有一个 id 列，用来唯一地标识每一行。

这个项目由哪些部分组成

qiwu-vue-admin/
├─ apps/
│  ├─ web/        ← 前端：你在浏览器里看到的页面
│  └─ server/     ← 后端：处理请求、检查权限、读写数据库
├─ packages/
│  └─ shared/     ← 前后端共用的代码（比如"编码最多 64 个字"这种规则）
└─ …

前端和后端都是用 TypeScript 写的。TypeScript 就是"带类型的 JavaScript"：

let name: string = '开发工程师'   // name 只能是文字
let count: number = 3            // count 只能是数字
count = '三'                     // ❌ 编辑器会马上提示错误

学会了一门语言，就能同时写前端和后端，这是这个项目的一大好处。

小测验

读完这一页，试着回答这几个问题（答案在最下面）：

1. 你在浏览器里打开 http://localhost:5173，这个页面是由哪个部分提供的？
2. 新增一个用户，应该用哪个 HTTP 方法？
3. 服务器返回了 403，是什么意思？
4. 为什么说"前端的检查可以被绕过，后端必须再检查一遍"？

点击查看答案

1. 前端（Vite 开发服务器，端口 5173）。
2. POST。
3. 你没有权限做这件事。
4. 前端代码运行在用户自己的浏览器里，懂技术的人可以修改它，或者不经过页面，直接向服务器发送请求。后端运行在服务器上，用户碰不到，所以真正的检查必须放在后端。

下一步：终端入门。

页面历史

最后编辑于 4 天前

查看完整历史

41c8d57-docs(beginner): step-by-step track for students and beginners