这门课的定位比较清楚:它不是带你从零认识前端,而是用一套完整的前后端项目,把 Vue3 这一套主流技术栈真正跑通一遍。技术组合是 Vue3 + Vite + Pinia + Axios + ElementPlus + Vue-router,后端用 Laravel10,数据库是 MySQL8.0,最终产出一个可以部署上线的论坛项目。下面按"值不值得学、适合谁、学完能做什么、资料怎么用"分开说。

它解决的是什么工作场景

很多上班族和转行者卡在同一个位置:单独的技术点都看过,语法也认识,但一到真实项目就不知道怎么组织。路由怎么分层、状态放哪里、请求怎么统一封装、组件怎么拆分复用、前端和后端接口怎么对齐——这些问题在零散的教程里没人系统讲,只能自己在项目里踩一遍。

这门课选的是"前后端分离"这条主线,用论坛这种业务形态把问题串起来。论坛看着简单,实际上覆盖了列表分页、详情、发帖、登录鉴权、用户状态、评论互动等一整套典型场景,正好是大多数公司后台和内容类产品都会遇到的结构。学的不是某个 API,而是接口怎么设计、数据怎么流动、前端怎么配合后端完成一次完整交互。

学完能独立做什么

按课程设定,走完一遍后你应该能独立搭起一个前后端分离的项目骨架:用 Vite 起工程,用 Vue-router 规划页面和权限,用 Pinia 管理跨组件共享状态,用 Axios 统一处理请求和拦截,用 ElementPlus 快速拼出可用的界面,后端用 Laravel 写接口、连 MySQL 存取数据,最后把项目部署上线。这套能力对应的是中小型项目里"能自己从零撑起一摊活"的水平,而不是只会改别人写好的页面。

需要提醒的是,"独立完成"的前提是你真的跟着敲、跟着调,而不是看完视频觉得懂了。论坛项目里最容易出问题的地方恰恰是联调环节,这部分的价值也最高。

适合什么基础的人

课程明确要求有一定前端基础,并且了解后端语言和 MySQL 的基本知识。这个门槛不算低,也别被"全栈"两个字误导——它不负责从 HTML、CSS、JS 语法开始教。如果你连 JavaScript 的异步、模块、组件概念都还没理顺,直接上这门课大概率会卡住,建议先补前端基础再来。

比较合适的画像有两类:一是已经会用 Vue2 或写过一些页面、想迁移到 Vue3 组合式写法并补齐工程化能力的人;二是学过一点后端、想把前端这条链路也打通、能独立接项目的转行者。

资料怎么用效率更高

  • 先跑通再回头抠细节。第一遍跟着项目走完整流程,不求每个配置都懂;第二遍再针对 Pinia、路由守卫、Axios 封装这些薄弱点单独回看。
  • 把论坛项目当成自己的作业。不要只复制代码,改动需求(比如加个标签、加个搜索)逼自己查文档,这一步比看十遍视频有用。
  • 前后端接口对照着看。前端发什么、后端收什么、数据库存什么,理清这条线,你就抓住了全栈的核心。
  • 部署环节别跳过。能上线和只能在本地跑,是两种不同的完成度。

一点务实的判断

如果你要的是"快速上手能写业务页面",这门课的战线偏长,因为它把后端和数据库也包了进来。但如果你的目标是摆脱只会切图写静态页的状态、能独立对接接口甚至自己写接口,那这个项目型课程的方向是对的。技术栈都是当前主流,学完不容易过期,前提是别把它当成看完就过的视频合集。

课程目录

第 1 部分4 集
  • 01 前言 01 项目预览.mp4
  • 02 项目概览2.mp4
  • 03 前言--关于php和laravel.mp4
  • 04 课程简介.mp4
02 第1章-后端-环境部署22 集
  • 01 第1章-后端-环境部署--php+wamp开发环境部署.mp4
  • 02 任务1为什么要安装homestead.mp4
  • 03 任务1-1 相关工具.mp4
  • 04 任务2已安装homestead的删除.mp4
  • 05 任务3安装相关软件.mp4
  • 06 任务4-1homestead的安装.mp4
  • 07 任务4-2homestead无法启动的问题处理.mp4
  • 08 任务5安装laravel10.mp4
  • 09 任务6常见问题处理.mp4
  • 10 git公钥的正确配置.mp4
  • 11 任务7homestead地址不一样的说明.mp4
  • 12 homestead安装不成功的备选方案.mp4
  • 03 第2章-后端-本地开发环境的配置 01 指定版本号1.mp4
  • 02 指定版本号2.mp4
  • 03 第2章-后端-本地开发环境配置-任务1安装laravel10.mp4
  • 04 任务2artisan提示设置和laravel-ide-helper插件的安装.mp4
  • 05 任务3 artisan无法安装问题处理.mp4
  • 06 任务4migrate数据库的操作.mp4
  • 07 任务5本地化中文语言设置.mp4
  • 08 任务6api工具的设置.mp4
  • 09 任务7创建帮助函数文件.mp4
  • 10 任务8 telescope调试工具的安装配置.mp4
04 第3章-后端-用户相关的接口19 集
  • 01 第3章-后端-用户相关接口--任务1设计用户的数据表.mp4
  • 02 任务2阿里云账号的获取.mp4
  • 03 任务3手机短信服务控制器创建.mp4
  • 04 任务4手机短信服务的创建.mp4
  • 05 任务5手机短信服务容器的注册和调用.mp4
  • 06 任务6 阿里云手机短信SDK的配置.mp4
  • 07 任务7 阿里云手机短信环境变量的配置.mp4
  • 08 任务8 实现手机短信发送功能-1.mp4
  • 09 任务9 实现手机短信发送功能-2.mp4
  • 10 任务10缓存验证码.mp4
  • 11 任务11发送验证码调试.mp4
  • 12 任务12 自定义验证规则验证手机.mp4
  • 13 任务13 用户登录接口.mp4
  • 14 任务14 用户登录业务实现.mp4
  • 15 任务15 登录响应信息的处理.mp4
  • 16 任务16 用户注册接口.mp4
  • 17 任务17用户注册业务处理-1.mp4
  • 18 任务18用户注册业务处理-2.mp4
  • 19 任务19apiFox测试用户注册接口.mp4
05 第4章-后端-帖子大类的接口7 集
  • 01 第4章-后端-帖子大类接口--任务1帖子大类的api资源路由.mp4
  • 02 任务2:帖子大类的数据迁移和填充.mp4
  • 03 任务3:帖子大类的列表和单条显示.mp4
  • 04 任务4帖子大类的新增.mp4
  • 05 任务5策略权限设定.mp4
  • 06 任务6帖子大类的更新.mp4
  • 07 任务7帖子大类的删除.mp4
06 第5章-后端-帖子的接口7 集
  • 01 第5章-后端-帖子的接口--任务1帖子的资源接口.mp4
  • 02 任务2帖子的数据迁移.mp4
  • 03 任务3帖子的读取.mp4
  • 04 任务4帖子的关联模型和懒加载.mp4
  • 05 任务5帖子的新增.mp4
  • 06 任务6帖子的修改.mp4
  • 07 任务7帖子的删除.mp4
07 第6章-后端-上传文件接口2 集
  • 01 第6章-后端-上传文件接口--任务1创建上传接口1.mp4
  • 02 任务2上传文件接口-2.mp4
08 第7章-后端-收藏帖子接口2 集
  • 01 第7章-后端-收藏帖子接口--任务1多对多模型设计.mp4
  • 02 任务2收藏及取消收藏业务实现.mp4
09 第8章-后端-评论的接口10 集
  • 01 第8章-后端-评论的接口--任务1评论的模型.mp4
  • 02 任务2评论的表单验证.mp4
  • 03 任务3模型关联的设置.mp4
  • 04 任务4新增评论.mp4
  • 05 任务5预加载关联模型数据.mp4
  • 06 任务6完善新增方法.mp4
  • 07 任务7回复评论-1.mp4
  • 08 任务8回复评论-2.mp4
  • 09 任务9评论列表的获取.mp4
  • 10 任务10评论的删除.mp4
10 第9章-前端-环境的部署13 集
  • 01 第9章-前端-环境的部署--任务1前端的介绍和vue的介绍.mp4
  • 02 任务2前端开发准备工作-node的安装.mp4
  • 03 任务3node版本过高无法安装的问题.mp4
  • 04 任务4新建一个vue3项目.mp4
  • 05 任务5vue-router的安装和配置.mp4
  • 06 任务6vite文件别名的声明和应用.mp4
  • 07 任务7tailwindcss的安装和部署.mp4
  • 08 任务8elementplus的安装.mp4
  • 09 任务9pinia的安装和存储.mp4
  • 10 任务10项目文件目录优化及vite配置文件优化.mp4
  • 11 任务11elementplus按需引入设置和打包优化.mp4
  • 12 任务12其他按需自动加载.mp4
  • 13 任务13icon图标库的安装及权鉴路由.mp4
11 第10章-前端-用户鉴权4 集
  • 01 第10章-前端-用户鉴权--任务1用户登录页.mp4
  • 02 任务2提取input输入框和按钮组件.mp4
  • 03 任务3重置密码页面.mp4
  • 04 任务4新用户注册.mp4
12 第11章-前端-自定义组件8 集
  • 01 第11章-前端-自定义组件--任务1自定义文本编辑器组件-1.mp4
  • 02 任务2自定义文本编辑器组件-2.mp4
  • 03 任务3自定义文本编辑器组件-3.mp4
  • 04 任务4自定义文本编辑器-4.mp4
  • 05 任务5自定义队列动画组件-1.mp4
  • 06 任务6自定义队列动画组件-2.mp4
  • 07 任务7自定义队列动画组件-3.mp4
  • 08 任务8自定义队列动画组件-4.mp4
13 第12章-前端-后台系统管理界面布局6 集
  • 01 第12章-前端-系统管理界面布局--任务1后台相关路由的定义.mp4
  • 02 任务2在layouts布局组件设计后台管理界面.mp4
  • 03 任务3后台管理界面面包屑导航.mp4
  • 04 任务4后台管理界面右侧内容栏设计-浏览历史记录栏.mp4
  • 05 任务5后台管理界面-内容过多现实问题处理.mp4
  • 06 任务6后台管理界面-头像下拉菜单.mp4
14 第13章-前端-后台管理菜单10 集
  • 01 第13章-前端-后台管理菜单--任务1路由的meta.mp4
  • 02 任务2针对本地存储,增删查的方法实现.mp4
  • 03 任务3提取路由中的菜单项.mp4
  • 04 任务4遍历菜单.mp4
  • 05 任务5显示隐藏菜单栏切换.mp4
  • 06 任务6浏览历史记录业务实现.mp4
  • 07 任务7浏览历史本地化存储.mp4
  • 08 任务8历史浏览记录激活状态设置.mp4
  • 09 任务9删除历史浏览记录.mp4
  • 10 任务10设置当前激活状态菜单.mp4
15 第14章-前后端结合-用户鉴权25 集
  • 01 第14章-前后端结合-用户鉴权--任务1错误响应.mp4
  • 02 任务2axios的配置.mp4
  • 03 任务3服务代理配置.mp4
  • 04 任务4用户登录.mp4
  • 05 任务5路由守卫.mp4
  • 06 任务6存储登录用户信息.mp4
  • 07 任务7利用当前用户信息完善部分业务.mp4
  • 08 任务8超级管理员的设定.mp4
  • 09 任务9用户退出处理和错误提示组件.mp4
  • 10 任务10自定义指令.mp4
  • 11 任务11图形验证码.mp4
  • 12 任务12图像验证码的组件1.mp4
  • 13 任务13图像验证码的组件2.mp4
  • 14 任务14图像验证码的组件3.mp4
  • 15 任务15图像验证码的组件4.mp4
  • 16 任务16注册新用户1.mp4
  • 17 任务17注册新用户2.mp4
  • 18 任务18注册新用户3.mp4
  • 19 任务19注册新用户4.mp4
  • 20 任务20dayjs的安装和部署.mp4
  • 21 任务21禁止验证码连续发送1.mp4
  • 22 任务22禁止验证码连续发送2.mp4
  • 23 任务23重置用户密码1.mp4
  • 24 任务24重置用户密码2.mp4
  • 25 任务25重置用户密码3.mp4
16 第15章-前后端结合-前端交互界面65 集
  • 01 第15章前言.mp4
  • 02 任务1首页布局架构导航栏 1.mp4
  • 03 任务2首页布局架构导航栏 2.mp4
  • 04 任务3首页布局架构导航栏 3.mp4
  • 05 任务4首页布局架构导航栏 4.mp4
  • 06 任务5优化几处跳转1.mp4
  • 07 任务6优化几处跳转2.mp4
  • 08 任务7首页内容布局1.mp4
  • 09 任务8首页内容布局2.mp4
  • 10 任务9首页内容布局3.mp4
  • 11 任务10帖子大类显示.mp4
  • 12 任务11帖子动态显示.mp4
  • 13 任务12帖子大类切换的路由和接口.mp4
  • 14 任务13后端各大类帖子的接口.mp4
  • 15 任务14实现帖子大类的切换.mp4
  • 16 任务15优化显示及解决显示冲突.mp4
  • 17 任务16ElementPlus分页组件使用1.mp4
  • 18 任务17ElementPlus分页组件使用2.mp4
  • 19 任务18Config配置信息.mp4
  • 20 任务19设置和获取Config配置信息.mp4
  • 21 任务20修改Config配置信息接口.mp4
  • 22 任务21frontFooter组件的创建.mp4
  • 23 任务22修复分页的一个BUG.mp4
  • 24 任务23帖子的详情和新增组件.mp4
  • 25 任务24栅格布局和dayjs的使用.mp4
  • 26 任务25提取单个帖子项组件.mp4
  • 27 任务26优化所属类别.mp4
  • 28 任务27获取帖子详情页数据.mp4
  • 29 任务28帖子标题栏显示用户信息.mp4
  • 30 任务29帖子详情页布局1.mp4
  • 31 任务30ElementPlus按钮组的应用.mp4
  • 32 任务31ElementPuls的Form组件发布帖子.mp4
  • 33 任务32markdown编辑器提交数据.mp4
  • 34 任务33解析markdown内容.mp4
  • 35 任务34帖子的编辑.mp4
  • 36 任务35帖子的删除.mp4
  • 37 任务36ElementPlus的MessageBox删除确认提示.mp4
  • 38 任务37创建评论组件.mp4
  • 39 任务38获取帖子的评论1.mp4
  • 40 任务39获取帖子的评论2.mp4
  • 41 任务40显示评论列表.mp4
  • 42 任务41comment资源生产HTML.mp4
  • 43 任务42完成评论列表组件布局.mp4
  • 44 任务43评论的添加.mp4
  • 45 任务44提取评论组件.mp4
  • 46 任务45调用ElmentPlus的input组件处理回复业务.mp4
  • 47 任务46使用Vue3插槽显示回复列表.mp4
  • 48 任务47回复信息自动显示.mp4
  • 49 任务48删除评论.mp4
  • 50 任务49使用Laravel的观察者同步删除信息.mp4
  • 51 任务50个人空间路由和基本框架文件的创建.mp4
  • 52 任务51当前用户信息接口及跳转场景.mp4
  • 53 任务52获取指定用户信息接口创建.mp4
  • 54 任务53使用ElementPlus的avatar组件布局个人空间.mp4
  • 55 任务54改造ElementPlus的分页组件显示列表.mp4
  • 56 任务55完成个人空间评论列表.mp4
  • 57 任务56使用Laravel的ORM多对多功能实现收藏功能.mp4
  • 58 任务57Axios获取收藏帖子列表.mp4
  • 59 任务58打包排错.mp4
  • 60 任务59修改个人资料创建基本架构.mp4
  • 61 任务60从本地存储获取个人数据.mp4
  • 62 任务61完成修改个人资料的基本布局.mp4
  • 63 任务62创建修改个人资料的后端接口.mp4
  • 64 任务63完成修改个人昵称.mp4
  • 65 任务64使用ElementPlus的upload组件修改头像[本章完结].mp4
17 第16章-前后端结合-后台管理交互界面31 集
  • 01 第16章前言.mp4
  • 02 任务1使用ElemengPlus的tab组件实现切换.mp4
  • 03 任务2实现新增和编辑的切换.mp4
  • 04 任务3实现新增和编辑内容的切换.mp4
  • 05 任务4修复历史导航显示问题.mp4
  • 06 任务5显示帖子大类.mp4
  • 07 任务6添加帖子大类.mp4
  • 08 任务7编辑帖子大类.mp4
  • 09 任务8ElementPlus的Tab组件的优化.mp4
  • 10 任务9ElementPlus的中文语言设置.mp4
  • 11 任务10帖子大类的删除.mp4
  • 12 任务11帖子大类组件的提取.mp4
  • 13 任务12拖拽排序前端的实现.mp4
  • 14 任务13拖拽排序后端接口创建.mp4
  • 15 任务14用户分页数据接口.mp4
  • 16 任务15使用ElementPlus的表格组件公.mp4
  • 17 任务16完成后台用户表格的显示.mp4
  • 18 任务17后台用户相关接口开发1.mp4
  • 19 任务18后台用户相关接口开发2.mp4
  • 20 任务19登录时判断用户是否被冻结.mp4
  • 21 任务20用户相关解冻前端接口的实现.mp4
  • 22 任务21后台用户详情.mp4
  • 23 任务22后台删除用户.mp4
  • 24 任务23系统的配置控制.mp4
  • 25 任务24后台帖子列表的显示.mp4
  • 26 任务25后台编辑帖子.mp4
  • 27 任务26后台帖子的删除.mp4
  • 28 任务27评论相关的业务.mp4
  • 29 任务28搜索功能[本章完结].mp4
  • 30 任务29修复修改昵称的BUG.mp4
  • 31 任务30增补前端搜索功能.mp4
18 第17章-项目部署上线3 集
  • 01 第17章-部署上线--VMware和Linux系统的安装.mp4
  • 02 任务2宝塔面板的安装和基本使用介绍.mp4
  • 03 项目部署上线.mp4