零基础入门 Vue3+ThinkPHP8 CMS系统开发教程,前后端分离架构实战

本课程是一套覆盖后台管理系统 + 前台用户端的全栈开发实战教程，总计 135 节视频课，以 Vue3、ThinkPHP8、Nuxt 为核心技术栈，从环境搭建、基础开发到项目部署，完整落地前后端分离与不分离两种架构的开发与上线流程，兼顾前端组件封装、后端接口开发、权限控制、跨域解决等核心痛点，零基础也能快速上手。课程分为三大核心模块，逻辑层层递进：

1. 后台管理系统（前端开发）：从环境搭建、页面编写、请求封装入手，完成登录 / 重置密码、Layout 框架、菜单 / 导航、数据面板、各类业务模块（分类 / 权限 / 管理员 / 内容管理）、权限控制（页面 / 菜单 / 按钮级）等功能开发，覆盖表单封装、Echarts 图表、图片裁剪、搜索分页等高频前端场景；

2. 后台管理系统（后端开发）：基于 ThinkPHP8 实现多应用模式、登录 / 验证码 / JWT 接口、各类业务接口（分类 / 管理员 / 内容 / 权限）、文件上传、短信验证、权限中间件等核心功能，解决跨域、自动写入时间戳等实战问题；

3. 前台用户端（Nuxt 开发）：基于 Nuxt 搭建前台项目，集成 TailwindCSS/ElementUI，实现暗黑模式、导航菜单、文章列表 / 详情、用户注册 / 登录 / 个人中心、点赞 / 头像上传等功能，完成 SEO 配置与服务器部署。

一、前端核心开发

1. 课程核心简介与学习指引

2. 开发前置准备与环境搭建实操

3. app 页面与 404 页面开发实现

4. 答疑解析：css 原生嵌套语法与 scss 应用

5. layout 框架搭建与嵌套路由配置

6. 答疑解惑：@符号在项目中的核心作用

7. 插播通知：apifox 公共网址使用说明

8. token 增删取通用方法封装技巧

9. request 请求封装与 apifox mock 接口创建

10. 请求与响应拦截器配置实战

11. 答疑指导：get 请求传参 data 兼容处理方案

12. 登录页 form 表单设计与验证规则设置

13. 登录提交功能与重置事件开发

14. 答疑修复：elform 宽度警告问题解决

15. 记住密码功能实现与端口号修改操作

16. 重置密码模块：form 表单组件封装

17. form 表单验证规则深度解析与应用

18. 验证码发送功能与表单提交实现

19. 路由配置与导航守卫实战应用

20. 基于 pinia 的用户状态管理实现

21. redirect 跳转路由功能开发

22. layout 框架构建与左侧菜单开发

23. 左侧菜单跳转逻辑与收缩动画实现

24. 左侧菜单栏颜色优化与动画效果提升

25. 顶部 header 展开按钮与面包屑导航开发

26. 顶部 header 全屏功能与用户退出逻辑实现

27. 数据面板卡片设计与滚动数字效果开发

28. echarts 曲线面积图组件封装实战

29. echarts 环形图组件封装与窗口尺寸监听

30. 分类管理模块：表格组件封装开发

31. slot 插槽应用与批量删除功能实现

32. 新增 / 修改模块：form 表单组件封装

33. select 父分类选择逻辑与表单提交实现

34. 权限管理页：列表展示与角色组下拉菜单

35. 权限树 tree 动态选中功能开发

36. 基于接口的权限树列表修改实现

37. 管理员管理页面完整开发

38. search 组件封装与列表搜索功能添加

39. 列表分页功能设计与实现

40. 登录日志列表页面开发

41. 修改密码页面设计与开发

42. 插播教学：代码片段生成器使用指南

43. 我的信息模块：图片上传功能实现

44. 裁剪图片组件初步封装开发

45. 裁剪图片组件弹窗显示效果实现

46. 我的信息页面优化与提交功能实现

47. 手机绑定功能与验证码发送实现

48. 站点信息管理与图片上传功能开发

49. 内容管理模块：列表展示功能实现

50. switch 开关状态切换功能开发

51. 图片显示与预览功能实现

52. 审核通过 / 拒绝原因功能开发

53. 搜索表单优化：新增数字区间筛选

54. 添加 / 编辑表单初步开发与实现

55. 表单内裁剪图片功能与 tags 标签组件

56. markdown 编辑器组件封装开发

57. 页面权限限制：路由导航守卫配置

58. 答疑修复：权限判断导致 404 页面无法进入问题

59. 菜单权限实现：递归函数应用开发

60. 按钮与元素级权限控制功能实现

二、TP8 后端开发

1. 开发环境安装与 TP8 项目代码准备

2. 多应用模式开启与配置实操

3. 登录接口开发、多应用路由配置与密码加密

4. 图片验证码生成功能实现

5. jwt+uuid 生成 token 与用户信息获取开发

6. 路由中间件：用户登录状态验证实现

7. 前端对接登录 / 用户信息接口与跨域问题解决

8. 补充教学：api 模式处理图片验证码无跨域方案

9. token 登录方式修改：单端 / 多端登录控制

10. 分类管理模块：分类列表接口开发

11. 分类管理模块：增删改查接口实现

12. 答疑教学：新版 TP8 自动写入时间戳问题解决

13. 分类管理优化：前端问题修复与 where 方法封装

14. 管理员页面增删改查接口开发

15. 字段限制设置与时间查询优化实现

16. 管理员密码相关功能开发与配置

17. 内容管理列表接口开发实现

18. 内容管理模块优化与 bug 修复

19. 内容新增与修改接口开发

20. 答疑修复：请求参数绑定相关问题解决

21. 图片上传至服务器与数据库存储实现

22. 修改器与获取器：图片存储处理方案

23. 多张图片上传接口开发实现

24. 表格列表排序与远程排序功能实现

25. 数据面板接口：聚合查询与分组查询开发

26. 个人信息查询与修改密码功能实现

27. 登录日志记录与退出登录功能开发

28. 阿里云短信验证码发送功能实现

29. 手机绑定与密码重置功能开发

30. 站点管理：信息保存与读取功能实现

31. 权限管理模块：树形列表接口开发

32. 超管权限限制与相关接口制作

33. 权限路由中间件开发与配置

34. 修复优化：权限树不换行显示问题

35. 系统设置页：权限管理功能实现

36. bug 修复：内容 tags 为空与 content 内容异常处理

37. 附件管理：前后端完整实现步骤演示

38. 前后端分离模式：项目服务器部署实操

39. 前后端不分离模式：项目上线部署流程

40. 前后端不分离模式：快速部署两步法（完结）

41. 管理员日志页面开发与实现

42. 安装程序 1：php 版本与 pdo 扩展兼容性判断

43. 安装程序 2：前端 html 页面开发（vue3+element）

44. 安装程序 3：数据库创建与数据表、配置项写入

45. 安装程序 4：入口文件检测与安装页跳转实现

46. 新增功能：tabs 标签切换路由菜单开发

47. 新增功能：tabs 标签路由切换与删除实现

三、Nuxt 前台用户端开发

1. 前台用户端项目核心简介

2. Nuxt 项目创建与初始化配置

3. tailwindcss 与 elementUi 依赖安装配置

4. tailwindcss 基础用法入门教学

5. dark 暗黑模式开关功能开发实现

6. 页面头部导航菜单设计与开发

7. 右侧搜索功能与暗黑模式切换实现

8. 公共组件封装与 layout 框架搭建

9. 基于 TP8 的前台 index 控制器方法编写

10. Nuxt 请求 api 接口方法封装实现

11. 首页内容列表展示功能开发

12. 首页轮播图功能添加与实现

13. 文章排行榜列表展示开发

14. 列表组件封装为公共组件实操

15. 文章列表页分页功能设计与实现

16. 列表页关键词搜索功能开发

17. 父子分类选择组件封装实现

18. 文章详情页创建与基础布局开发

19. 根据 id 渲染文章详情内容实现

20. markdown 格式内容渲染显示功能

21. 用户注册界面设计与验证码功能实现

22. 用户注册接口开发与提交实现

23. 用户登录接口与登录界面开发

24. 用户信息状态记录与更新实现

25. 用户中心页面创建与布局开发

26. 用户信息获取接口开发与对接

27. 登录过期处理与退出登录功能实现

28. 用户密码修改功能开发实现

29. 文章详情页点赞功能开发

30. 文章点赞列表展示功能实现

31. 用户头像上传功能开发与实现

32. 暗黑样式优化与媒体查询自适应布局

33. Nuxt 项目 SEO 配置实操指南

34. 基于宝塔面板的 Nuxt 项目打包部署