如果你已经能写 PHP 接口，也能用 Vue 拼出几个页面，但一提到「前后端分离」就心里没底——不知道 token 该存哪、跨域到底谁配、订单状态该由谁说了算——那这门课正好卡在这个缺口上。它不讲语法入门，而是拿一个视频电商网站当靶子，把 Vue 和 PHP 在分离架构下怎么对接、怎么分工、怎么收尾，一件件摆出来做。

先确认你缺的是哪一块

这门课默认你手上已经有两样东西：PHP 能写增删改查、能连数据库；JavaScript 能看懂组件、会发请求。缺了这两样，跟起来会吃力，因为它不会回头补语法。

真正要补的是中间那层「胶水」：前端拿到的 JSON 怎么渲染成可交互的列表和详情页；后端返回的状态码和数据格式怎么约定；用户登录后，前端凭什么相信「这个人已经登录了」。这些在写单页面小 demo 时能糊弄过去，一旦上电商场景——尤其是涉及钱和权限的视频购买——就糊弄不了。

视频电商这个题材，逼你解决哪些真问题

选视频站而不是普通商品站，是因为它多压了几层难度：

  • 视频文件不是一张图片，上传有分片、有进度、有格式和大小的限制，前端要能感知进度，后端要能接住大文件。
  • 购买之后才有观看权。这意味着权限判断不能只放在前端「藏按钮」，后端每个取流地址都得校验这个人买没买、有没有过期。
  • 订单和支付状态会变。前端页面展示的「已购买」必须以后端为准，不能靠本地一个变量记着。
  • 列表、详情、播放、下单几条链路都要走一遍接口，正好把前后端分离的典型交互模式跑全。

换句话说，它不是让你照着敲一遍就完事，而是每推进一步都会撞上一个「这里到底该谁做」的判断，做完你就记住了。

跟着做的时候，建议你带着这几个问题

看视频最怕的是「看懂了但自己写不出来」。这门课更适合边看边停，在每一段结束后问自己：

  • 这个接口的入参和返回，是前端定还是后端定？如果两边理解不一致，最先崩的是哪一步？
  • 登录凭证放在哪、怎么带上、过期了怎么办？刷新页面后它还活着吗？
  • 上传视频时，进度条的数据从哪来？是前端定时问，还是后端推？
  • 用户直接改地址栏访问一个没买的视频，会看到什么？后端在哪一行拦住的？
  • 下单接口被重复点了两次，会发生什么？这是前端该防还是后端该防？

这些问题没有唯一答案，但你要能说出自己的选择和理由。说不出来，说明那一段还得再看一遍。

配套练习怎么做才不白学

课程里的代码是可以跑通的，但跑通不等于会。比较有效的做法是：功能做完之后，自己改一个需求再实现一遍。比如把「购买后才能看」改成「购买后限时观看」，后端加一个到期时间，前端加一个倒计时和过期提示——不用多，改一个点，就能看出你是否真的理解了数据是怎么在两端口流动的。

另一个值得做的练习是故意制造错误：把 token 删掉、把接口地址写错、把返回字段名改一个字母，然后观察报错出在哪一层。能快速定位是前端问题还是后端问题，是前后端分离里最实用的能力之一。

学完之后，你应该能回答

  • 一个前后端分离项目从零到能跑，有哪些必须两边一起约定好的东西？
  • 视频上传、播放、购买这三条链路，各自的关键接口和校验点在哪里？
  • 权限和订单这类敏感逻辑，为什么不能交给前端判断？
  • 如果要把这个项目换成别的品类，哪些部分能直接复用，哪些必须重写？

能答上来，说明你缺的那块已经补上了；答不上来，回头对照着再走一遍流程，比刷下一个课程更有用。

VUE.JS+PHP前后端分离实战视频电商网站

课程详情

课程详情

课程名称：VUE.JS+PHP前后端分离实战视频电商网站

课程简介：本课程以实战为导向，深入讲解VUE.JS和PHP在前后端分离架构下的应用。通过开发一个视频上传、观看、购买的全功能电商网站，让学生掌握项目开发的实际流程和技巧。

适合人群

  • 有基础的PHP和JavaScript开发者
  • 希望学习前后端分离架构的学员
  • 对视频电商网站开发感兴趣的编程爱好者

学习收获

  • 掌握VUE.JS和PHP在前后端分离架构下的应用
  • 熟悉视频上传、观看、购买等电商网站功能实现
  • 提升项目开发实战能力

课程亮点

  • 实战导向：从实际项目入手，边学边练
  • 深入浅出：讲解清晰，易于理解
  • 案例丰富：涵盖多个实战案例，提升实战能力

课程目录

第一章：预热 cplist.push('第一章：预热');
  第1讲:本课程开张：实战即套路
  第2讲:预热:浅谈web开发中的"前后端分离"
  第3讲:预热:Composer难理解？那么说明你对PHP这些功能不了解
  第4讲:预热:传说中的RESTful API是什么鬼？
第二章:YII2折腾速学篇 cplist.push('第二章:YII2折腾速学篇');
  第5讲:开启YII2折腾之路:玩弄
  第6讲:折腾一下框架请求的姿势
  第7讲:框架的数据库操作:主动学习还是被动学习
  第8讲:折腾一下YII2中的RESTful开发(上)
  第9讲:框架中的RESTful api快速领悟(中):token认证
  第10讲:框架中的RESTful api快速领悟(下):token的设置
第三章:VueJS2速学折腾篇(基于NodeJS+WebPack) cplist.push('第三章:VueJS2速学折腾篇(基于NodeJS+WebPack)');
  第12讲:开张:结合nodejs+webpack+vuejs开启时尚学习套路
  第13讲:直接上手组件化开发:寻求"刺激"的”学习方法
  第14讲:利用webpack"热"运行vuejs+html初步和关键步骤
  第15讲:父子组件学习入门套路:让知识点跟着你的思维走
  第16讲:带着实例继续学习(1):组件式登录页面-点击事件、组件通讯
  第17讲:带着实例继续学习(2):父子组件通信之自定义事件
  第18讲:带着实例继续学习(3):路由原理入门、v-if指令
  第19讲:带着实例继续学习(4):下拉框数据填充、组件生命周期、动态绑定事件
  第20讲:带着实例继续学习(5):模拟搜索框动态提示效果之计算属性
  第21讲:模拟搜索框动态提示效果(课后作业代码）
  第22讲:vuejs路由学习(1)
  第23讲:趁热打铁:ajax请求插件vue-resource的学习
  第24讲:路由学习(2):动态加载新闻详细页
  第25讲:路由学习(3):组件的异步加载和webpack代码
  第26讲:自己写个vue.js插件(1):自定义指令的妙用
  第27讲:自己写个vue.js插件(2):手动挂载子组件
  第28讲:自己写个vue.js插件(3):插件里面包含子组件
  第29讲:Vuex速学篇:(1)基本套路
  第30讲:Vuex速学篇:(2)利用state保存新闻数据
  第31讲:Vuex速学篇:(3)利用vuex模拟实现新闻点赞功能
  第32讲:Vuex速学篇:(4)把我们的业务按模块分类
  第33讲:vue.js的UI框架体验篇:饿了么Element框架之看文档大法
  第34讲:ElementUI案例演示:导航、布局、加载动画
  第35讲:实例演示:ElementUI之表单、验证、数据绑定、路由跳转
  第36讲:阶段性总结、vue其他UI介绍、后续实战课程预告
第四章:实战篇(用户后台) cplist.push('第四章:实战篇(用户后台)');
  第37讲:实战准备、项目配置和观影要求
  第38讲:开始编写会员中心脚手架代码
  第39讲:逐步完善代码结构、动态加载导航栏
  第40讲:侧边栏菜单、整个后台的布局、路由配置
  第41讲:构建视频提交页面(上):数据表、页面布局、赚钱的头脑
  第42讲:构建视频提交页面:视频封面上传(上)
  第43讲:穿插课:纯手工集成YII+七牛SDK:上传一张图片
  第44讲:上传视频封面并传到七牛云中
  第45讲:视频上传:标签编辑框效果快速实现
  第46讲:视频上传准备:vue.js+七牛JSSDK集成(1)排坑
  第47讲:视频上传准备:vue+七牛JSSDK集成(2)上传视频时显示进度条
  第48讲:vue+七牛JSSDK集成(3)上传视频时暂停和续传
  第49讲:附加课:上传视频封面后的七牛云回调
  第50讲:"上传视频"功能总结课:视频数据入库、排坑、用户功能预习