Web 项目全景图
核心问题
一个 Web 项目为什么不只是“做几个页面”，而会出现用户端、管理员端、接口服务和数据库？
先看一个简化全景图
text
用户端页面 / 管理员端页面
↓
API 接口
↓
服务端逻辑
↓
数据库用校园来类比
| 系统部分 | 校园类比 | 主要作用 |
|---|---|---|
| 用户端 | 同学看到的窗口 | 浏览、输入、操作 |
| 管理员端 | 老师或管理员后台 | 查看数据、修改状态、统一管理 |
| 接口服务 | 办公室接待窗口 | 接收请求、判断要做什么 |
| 数据库 | 学校档案室 | 存储和读取数据 |
每一层在做什么
用户端
- 给普通用户使用
- 强调体验、清晰度和主流程
- 常见内容：首页、输入页、结果页、个人页
管理员端
- 给老师、管理员、运营者使用
- 强调查看、管理、审核、统计
- 常见内容：数据列表、状态修改、后台设置
接口服务
- 接收前端发来的请求
- 判断是否合法
- 调用业务逻辑处理
- 返回结果给前端
数据库
- 存用户、任务、记录、状态等数据
- 让系统下次打开时还能记住之前的信息
- 让管理员端和用户端看到的是同一套数据
三种常见项目层级
| 层级 | 适合什么项目 | 结构 |
|---|---|---|
| A 级 | 展示页、活动页、个人页 | 用户端 |
| B 级 | 轻量工具、小记录工具 | 用户端 + 假数据 / 简单接口 |
| C 级 | 更完整的校园项目 | 用户端 + 管理员端 + 接口服务 + 数据库 |
课堂练习
- 判断你们的小组项目属于 A / B / C 哪一级
- 画出自己项目的系统图，至少标出用户端、接口、数据三部分
- 如果项目未来升级，下一步最可能新增哪一层
给讲师的提醒
- 不要让学生误以为“没有数据库就不是项目”
- 先让学生知道分层是为了职责清楚，不是为了显得复杂
- 路演时可以要求学生用一句话说明自己的项目结构