前端与管理员端
核心问题
为什么同样都是网页，有的页面是给用户用的，有的页面是给管理员用的？前端项目目录为什么还要拆成页面、组件和资源？
前端不只是“好看的页面”
在项目营里，前端通常负责三件事：
- 展示内容
- 响应用户操作
- 把结果更清楚地呈现出来
用户端和管理员端的区别
| 对比点 | 用户端 | 管理员端 |
|---|---|---|
| 面向对象 | 普通用户 | 老师、管理员、运营者 |
| 目标 | 好用、易懂、愿意继续用 | 快速查看、修改、管理 |
| 常见页面 | 首页、表单页、结果页 | 列表页、状态页、统计页 |
| 关注重点 | 体验和表达 | 效率和管理 |
一个项目里的常见前端结构
text
project/
pages/ 页面
components/ 可复用区块
assets/ 图片和静态资源
styles/ 样式
utils/ 工具函数为什么要这么拆
- 页面是整页，组件是可以反复用的小块
- 图片、按钮、卡片、导航栏都不适合每页重复写
- 目录清楚以后，Codex 更容易理解项目结构，也更方便多人协作
前端常见技术栈
| 层次 | 常见选择 | 适合场景 |
|---|---|---|
| 基础页面 | HTML / CSS / JavaScript | 简单项目、展示页 |
| 工程化前端 | Vue / React | 多页面、状态较多的项目 |
| 构建工具 | Vite | 本地开发和打包 |
课堂练习
- 把你们项目中的页面分成“用户端页面”和“管理员端页面”
- 说出你们项目里最适合拆成组件的 3 个部分
- 看一眼当前项目目录，标出哪个文件夹最像页面、组件和资源
给讲师的提醒
- 不要求所有组都做管理员端，但要让学生知道它是另一类角色页面
- 如果学生把所有代码都堆在一个文件里，可以借这个模块讲“为什么目录结构重要”
- 很适合在第 4 课页面开发前插入