1.课程导览与技术选型

1.1 课程概述
- 课程目标与学习路线
  管理后台系统分析
  最终项目预览
  前置知识要求
1.2 技术选型
- ThinkPHP 8 — 后端框架
  Vue 3 — 前端框架
  Pinia — 状态管理
  Vue Router — 路由管理
  Element Plus — UI 组件库
  技术栈协作关系
1.3 开发环境搭建
- PHP 环境安装（8.1+）
  Node.js 与 pnpm 安装
  MySQL / PostgreSQL 数据库
  Redis 安装与配置
  Nginx 反向代理配置
  VSCode 开发环境配置
  Composer 与 npm 镜像配置

2.ThinkPHP 8 项目初始化

2.1 项目创建
- Composer 创建 ThinkPHP 8 项目
  目录结构详解
  入口文件与多应用模式
  开发规范与命名约定
2.2 配置管理
- 配置文件体系
  环境变量（.env）
  数据库连接配置
  缓存与 Session 配置
  全局配置与动态配置
2.3 请求与响应
- Request 对象详解
  输入变量获取（GET/POST/JSON）
  文件上传处理
  响应输出（JSON/视图/下载）
  跨域请求处理
2.4 路由配置
- 路由定义与规则
  RESTful 路由设计
  路由分组与中间件
  资源路由
  路由参数与变量规则
  注解路由
  URL 生成与重定向
2.5 控制器
- 控制器定义与基础控制器
  API 控制器规范
  资源控制器
  参数绑定与依赖注入

3.中间件与数据验证

3.1 中间件
- 中间件定义与注册
  全局中间件与应用中间件
  路由中间件与控制器中间件
  前置中间件与后置中间件
  自定义认证中间件
  跨域中间件配置
  请求日志中间件
3.2 数据验证
- 验证器定义
  内置验证规则
  自定义验证规则
  验证场景与分组
  错误信息与异常处理
  表单令牌防重复提交
3.3 异常与日志
- 异常处理机制
  自定义异常类
  API 统一异常响应格式
  日志配置与写入
  独立日志通道与 JSON 日志

4.数据库与 ORM 模型

4.1 数据库连接与查询
- 数据库连接配置
  查询构造器基础
  链式操作与 Where 查询
  聚合查询与子查询
  原生 SQL 与分页查询
  事务处理
4.2 模型定义与 CRUD
- 模型定义与字段配置
  模型新增与批量新增
  模型更新与批量更新
  模型删除与软删除
  模型查询与查询范围
  获取器与修改器
  搜索器与类型转换
4.3 模型关联
- 一对一关联（hasOne/belongsTo）
  一对多关联（hasMany）
  多对多关联（belongsToMany）
  关联预载入与延迟预载入
  关联统计与嵌套关联
4.4 数据库迁移
- think-migration 安装
  创建迁移文件
  迁移操作（创建表/修改表/添加索引）
  数据填充（Seed）

5.认证与权限系统

5.1 用户认证
- JWT 认证原理
  JWT Token 签发与验证
  登录 / 注册 / 登出接口
  Token 刷新机制
  多端登录控制
5.2 RBAC 权限管理
- RBAC 模型设计（用户/角色/权限）
  角色管理接口
  权限节点管理
  菜单权限树接口
  数据权限（部门/个人）
5.3 接口安全
- 请求频率限制（Rate Limit）
  接口签名验证
  敏感数据脱敏
  操作日志记录

6.缓存、会话与队列

6.1 缓存系统
- 缓存驱动配置（Redis/File）
  缓存基本操作
  缓存标签与批量操作
  数据缓存策略
6.2 Session 与 Cookie
- Session 配置与使用
  Cookie 配置与使用
  前后端分离下的会话方案
6.3 队列与任务
- think-queue 扩展安装
  队列驱动配置（Redis/Database）
  任务投递与消费
  延迟队列与定时任务
  失败队列与重试机制

7.Vue 3 项目搭建与核心基础

7.1 项目创建
- Vite 创建 Vue 3 项目
  项目结构设计
  路径别名（@）与环境变量
  ESLint + Prettier + Husky
  Git 提交规范（Commitlint）
7.2 TypeScript 集成
- TSConfig 配置
  组合式 API 与 TypeScript
  组件 Props 与 Emits 类型
  API 接口类型定义
7.3 组合式 API 核心
- ref 与 reactive 响应式
  computed 计算属性
  watch 与 watchEffect 侦听器
  生命周期钩子
  组合式函数（Composables）
  依赖注入（Provide/Inject）
7.4 模板语法
- 文本插值与表达式
  属性绑定（v-bind/:）
  条件渲染（v-if / v-show）
  列表渲染（v-for / :key）
  事件处理（v-on/@）
  双向绑定（v-model）

8.组件系统与内置组件

8.1 组件基础
- 组件定义与注册
  Props 父传子
  Emits 子传父
  组件 v-model 双向绑定
  透传 Attributes（Fallthrough）
8.2 插槽（Slots）
- 默认插槽与具名插槽
  作用域插槽
  动态插槽
8.3 高级组件模式
- 异步组件（defineAsyncComponent）
  自定义指令
  插件系统
  递归组件
8.4 内置组件
- Transition 过渡动画
  TransitionGroup 列表过渡
  KeepAlive 缓存组件
  Teleport 传送门
  Suspense 异步加载

9.Pinia 状态管理

9.1 Pinia 入门
- Pinia 安装与配置
  Pinia vs Vuex 对比
  定义 Store（setup/option）
  Store 在组件中使用
9.2 State 状态
- State 定义与访问
  修改 State（$patch / actions）
  重置 State
  订阅 State 变化
9.3 Getters 计算属性
- Getter 定义与使用
  访问其他 Store 的 Getter
  带参数的 Getter
9.4 Actions 操作
- Action 定义与调用
  Action 中调用其他 Action
  异步 Action 与 API 请求
  订阅 Action
9.5 Pinia 高级用法
- Pinia 插件开发
  组合式 Stores
  Pinia 数据持久化（pinia-plugin-persistedstate）
  SSR 状态管理

10.Vue Router 路由管理

10.1 路由基础
- Vue Router 安装与配置
  路由定义与路由表
  router-view 与 router-link
  编程式导航（push/replace/go）
10.2 动态路由与嵌套路由
- 动态路由匹配（:param）
  嵌套路由布局
  命名路由与命名视图
  重定向与别名
  路由组件传参（props）
10.3 导航守卫
- 全局前置守卫（beforeEach）
  全局后置守卫（afterEach）
  路由独享守卫（beforeEnter）
  组件内守卫（onBeforeRouteLeave）
  认证与权限守卫实现
10.4 路由高级功能
- 路由懒加载（动态 import）
  滚动行为控制
  路由过渡动效
  动态添加与删除路由
  路由元信息（meta）
  路由类型化（TypeScript）

11.Element Plus 组件库

11.1 Element Plus 入门
- Element Plus 安装与引入
  快速上手（Hello World）
  按需引入（unplugin-vue-components）
  国际化（i18n）配置
  全局配置（ConfigProvider）
  暗黑模式
11.2 布局组件
- Container 布局容器
  Layout 布局（24栅格）
  Space 间距
  Divider 分割线
11.3 基础组件
- Button 按钮
  Icon 图标
  Link 链接
  Text 文本
  Scrollbar 滚动条
11.4 导航组件
- Menu 菜单
  Tabs 标签页
  Breadcrumb 面包屑
  Dropdown 下拉菜单
  Steps 步骤条
  Pagination 分页
11.5 表单组件
- Form 表单与验证
  Input 输入框
  InputNumber 数字输入框
  Select 选择器
  Radio 单选框
  Checkbox 多选框
  Switch 开关
  DatePicker 日期选择器
  Upload 上传器
11.6 数据展示组件
- Table 表格（含排序/筛选/分页）
  Tag 标签
  Badge 徽章
  Card 卡片
  Tree 树形控件
  Descriptions 描述列表
  Skeleton 骨架屏
  Image 图片（预览）
  Avatar 头像
11.7 反馈组件
- Dialog 对话框
  Drawer 抽屉
  Message 消息提示
  MessageBox 消息弹出框
  Notification 通知
  Loading 加载
  Popconfirm 气泡确认框
  Tooltip 文字提示
  Alert 提示
11.8 主题定制
- CSS 变量覆盖
  SCSS 变量定制
  Element Plus 主题生成器
  品牌色自定义实战

12.前后端对接基础

12.1 HTTP 请求封装
- Axios 安装与实例创建
  请求拦截器（Token 注入）
  响应拦截器（统一错误处理）
  请求取消与防重复提交
  API 接口模块化管理
12.2 统一数据格式
- API 响应格式约定
  统一错误码设计
  前端类型定义（API Types）
12.3 跨域与代理
- Vite 开发代理配置
  Nginx 生产环境代理
  CORS 策略与安全配置

13.管理后台项目框架搭建

13.1 整体架构设计
- 前后端分离架构总览
  前端目录结构规划
  后端应用目录规划
  数据库表设计概览
13.2 后端基础架构
- 统一响应 Trait（JsonResponse）
  基础控制器（BaseController）
  服务层设计（Service 层）
  基础模型（BaseModel）
  公共函数库
13.3 前端基础框架
- 整体布局设计（侧边栏+顶栏+内容区）
  封装 Layout 组件
  useTitle / useBreadcrumb Composable
  全局样式与 CSS 变量
  环境变量管理

14.登录认证与权限控制

14.1 后端认证接口
- 用户模型与数据表
  登录接口（含验证码）
  JWT Token 签发中间件
  用户信息接口
  修改密码 / 退出登录
14.2 前端登录与鉴权
- 登录页面设计与实现
  Token 存储策略（Cookie / LocalStorage）
  Pinia 用户状态管理（useUserStore）
  路由守卫（登录拦截）
  Token 过期自动刷新
  权限指令（v-permission）
14.3 RBAC 权限系统
- 后端权限管理接口
  前端动态路由生成
  动态菜单渲染
  按钮级权限控制

15.用户与角色管理模块

15.1 用户管理
- 后端用户 CRUD 接口
  用户列表页面（搜索/筛选/分页）
  用户新增/编辑弹窗
  用户头像上传
  用户导入/导出
15.2 角色管理
- 后端角色 CRUD 接口
  角色列表页面
  角色权限分配（菜单树勾选）
  数据权限配置
15.3 菜单与权限管理
- 后端菜单 CRUD 接口
  菜单管理页面（树形表格）
  菜单类型（目录/菜单/按钮）
  权限节点管理
15.4 部门管理
- 后端部门 CRUD 接口
  部门管理页面（树形结构）
  部门负责人与成员

16.系统通用功能模块

16.1 数据字典
- 字典后端接口设计
  字典管理页面
  字典数据缓存策略
16.2 文件管理
- 文件上传接口（本地/OSS/七牛）
  文件管理器页面
  图片预览与裁剪
  大文件分片上传
16.3 通知公告
- 公告发布与管理接口
  公告列表与发布页面
16.4 操作日志
- 操作日志记录中间件
  操作日志查询页面
  登录日志记录
16.5 系统配置
- 系统参数配置接口
  系统配置管理页面
  配置分组与缓存

17.高级表格与表单封装

17.1 高级表格封装
- 通用 CRUD 表格组件设计
  动态列配置
  搜索筛选栏封装
  行内编辑与批量操作
  表格数据导出（Excel）
  虚拟滚动大数据表格
17.2 高级表单封装
- 动态表单生成器
  表单联动与条件显示
  表单步骤条（向导模式）
  表单校验规则封装
  表单数据自动缓存（离开不丢失）
17.3 富文本与编辑器
- TinyMCE 富文本编辑器集成
  Markdown 编辑器集成
  代码编辑器（Monaco Editor）
  JSON 编辑器

18.数据可视化与图表

18.1 ECharts 集成
- ECharts 安装与封装
  折线图 / 柱状图 / 饼图
  地图与热力图
  图表自适应与主题
18.2 仪表盘页面
- Dashboard 数据面板设计
  统计卡片组件
  数据概览接口设计
  实时数据刷新

19.性能优化与安全加固

19.1 前端性能优化
- 路由懒加载与代码分割
  组件异步加载（defineAsyncComponent）
  图片懒加载与压缩
  虚拟列表长列表优化
  KeepAlive 页面缓存策略
  Vite 构建优化（分包/Gzip）
19.2 后端性能优化
- 数据库查询优化（索引/慢查询）
  Redis 缓存策略
  接口响应数据精简
  中间件执行顺序优化
19.3 安全加固
- SQL 注入与 XSS 防护
  CSRF 防护
  接口频率限制
  敏感信息加密存储

20.构建部署与持续集成

20.1 前端构建与部署
- Vite 生产构建配置
  环境变量与多环境构建
  Nginx 静态资源部署
  CDN 加速与版本管理
  Docker 前端容器化
20.2 后端部署
- PHP-FPM 与 Nginx 配置
  Docker 后端容器化
  Docker Compose 编排
  Supervisor 进程管理（队列 Worker）
20.3 CI/CD 自动化
- GitLab CI/CD 配置
  GitHub Actions 自动部署
  Jenkins 自动化流水线
  自动化测试集成

21.新特性与最佳实践

21.1 技术栈新特性
- ThinkPHP 8.1 新特性
  Vue 3.5 新特性（响应式解构/UseModel）
  Element Plus 最新组件更新
  Pinia 最新生态
21.2 最佳实践
- 代码规范与团队协作
  Git 分支管理策略
  API 文档自动生成
  单元测试与 E2E 测试
  错误监控与性能监控
21.3 扩展方向
- WebSocket 实时通信
  SSR 服务端渲染（Nuxt）
  移动端适配与 UniApp
  微前端架构（qiankun）

本页目录

Vue Admin

ThinkPHP8
Vue3
Vue Router
Pinia
ElementPlus
ElementPlus Icon
Axios

Pager

Next page课程目标与学习路线

Vue Admin ​

Vue Admin