前端和后端?到底怎样区分
用最通俗的方式给你讲明 前端和后端的定义以及边界,不用任何技术术语晦涩化。
1️⃣ 前端是什么
直白说:用户能看到和能操作的东西,或者直接影响用户界面的代码,都算前端。
-
典型内容:
- 页面和按钮、输入框、列表、图表……(UI)
- 用户点击、滑动、表单输入的逻辑
- 保存状态、展示数据
- 调用后端接口获取数据
-
位置:运行在用户设备上(浏览器、手机、小程序)
-
特点:可直接影响用户看到的内容
比喻:前端就是“舞台上的演员”,直接和观众互动。
2️⃣ 后端是什么
直白说:用户看不到,但决定结果和数据的部分,都是后端。
-
典型内容:
- 核心业务逻辑:排队算法、订单处理、权限验证
- 数据存储和读取:数据库、文件存储
- 接口:提供数据或操作给前端
- 云函数 / 服务器逻辑
-
位置:运行在服务器或云端
-
特点:用户不能直接操作,只能通过前端调用
比喻:后端就是“幕后导演和舞台布景”,观众看不到,但决定表演结果。
3️⃣ 前后端边界
可以用几个直观原则判断:
-
运行位置
- 客户端设备 → 前端
- 服务器 / 云端 → 后端
-
作用
- 处理展示、状态、交互 → 前端
- 处理核心逻辑、数据、权限 → 后端
-
用户是否能直接影响
- 用户可以触发/看到 → 前端
- 用户只能间接调用 → 后端
4️⃣ 用我的一个cat-app 举例
| 模块 | 位置 | 类型 | 为什么 |
|---|---|---|---|
| pages/ + components/ | 用户设备 | 前端 | 直接渲染 UI、用户点击 |
| hooks/ | 用户设备 | 前端 | 管理状态、封装 API 调用 |
| services/business/ | 用户设备 | 前端 | 调用云端接口,封装 SDK,逻辑轻量 |
| adapters/ | 用户设备 | 前端 | 封装 CloudBase/COS SDK,隔离具体实现 |
| 云函数 / 数据库规则 | 云端 | 后端 | 核心逻辑、数据存储、权限控制 |
重点:即使 services/business/ 看起来像“逻辑”,但它在用户设备上运行,只是调用后端,因此还是前端。
5️⃣ 最通俗理解
- 前端 = 用户能看见或触碰的东西 + 客户端运行的代码
- 后端 = 用户看不见,负责“计算结果、存数据、验证规则”的代码
- 边界 = 谁跑在用户设备上,谁跑在服务器上 + 谁决定业务逻辑