6点播课程
在线教育平台
在开发中很常见的一个问题，就是我们基本都是现有后台再有前台。
往往会出现一个情况就是后台的功能做完了，开始前台的功能，前端的功能做完了，后台的功能就报错了。
主要就是代码并没有进行前后台的分离。如果想要减少这种情况，其实就是把前后端的逻辑和模型彻底的分开。
1. 完善：专业的轮播图上传
使用zyuploader进行多图上传
在github，下载插件
插件的效果：
目录结构：
index.html 插件使用的demo文件
control/js/zyUpload.js 控制层插件核心js代码
core/zyFile.js 文件上传插件的核心实现代码
core/lanrenzhijia.js 初始化插件的代码
接下来，我们把这个多图上传插件引入到项目中。
首先，我们把zyupload插件放置到项目：
打开添加专业的视图 resource/views/admin/profession/create：
在使用的过程中，要先引入插件的css和js文件。
同时，这个zyupload插件是jQuery实现的，引入的时候必须在jQuery之后。
接着，我们需要创建一个div用来展示上传插件。
注意
1. 在h-ui框架中，默认附带了id=banner的样式，所以不能设置id的值为banner。
2. 在zyupload里面，上传了图片以后，默认会显示预览图在 #preview的标签中，而我们前面在baidu的webuploader插件已经使用了preview这个id值了，所以需要修改baidu的webuplader预览图的id值。
初始化上传插件：
接下来，我们需要在后台控制器创建路由和控制器方法接收图片的上传和处理。
在这里我们还是使用七牛云存储保存上传文件，我们原来已经有了一个上传文件的方法。
这里zyupload插件是逐个图片上传的，所以我们还是直接使用Admin\IndexController@upload方法来保存上传图片。
视图代码：
在控制器中接收并打印：
效果：
这就是因为我们使用post方法访问了Admin\IndexController@upload方法，但是并没有发送csrf令牌字段到控制器中， 所以报错。
解决：
给上传文件的时候，附加一个csrf的令牌字段。
在视图中，创建一个变量存储 csrf_token值
接着，修改zyupload插件的zyupload/core/zyFile.js代码：
效果：
把图片保存到七牛云存储以后，我们还要把图片的地址记录到数据表中。
我们可以把图片的地址存储到隐藏域中，通过表单的提交发送到后台控制器中。
视图代码：
效果：
上传成功了，就可以同步追加隐藏域，但是当我们在页面中进行删除时，那么隐藏域还在，并没有被同步删除。
提交数据的时候，需要把轮播图片的地址保存到数据表中，所以我们需要把banner_img字段设置为属性类型转换。
效果：
2. 点播课程和点播课时
2.1 点播课程
注意是播放视频（重播），在专业的下面的多个课程。
我们已经创建了点播课程的数据表，接下来，我们要创建点播课程的数据模型。
2.1.1 创建点播课程的数据模型
命令行：
代码：
把专业模型的代码复制一份到课程模型中，修改如下：
2.1.2 创建控制器和路由方法
命名行：
代码：
把专业资源控制器Admin\ProfessionController的代码复制到点播课程Admin\CourseController控制器，修改以下：
- 把 App\Models\Profession 修改为 App\Models\Course
- 把 ProfessionController 改为 CourseController
- 把 专业 改为 点播课程
- 把 “admin.profession” 改为 “admin.course”
- 把 “Profession $profession” 改为 Course $course
- 把 “$profession” 改为 “$course”
- 把 “unique:profession” 改为 “unique:course”
- 把 “pro_name”改为 “course_name”
- 把 “->with('professioncate')” 改为 “->with('profession')”
2.1.2.1 声明点播课程的资源路由
代码：
我们直接访问后台的点播课程列表，效果如下；
找不到视图，所以我们需要把视图复制到项目中( 直接把专业的列表视图复制过来 )
2.1.3 把视图复制到项目中
访问效果：
2.1.3.1 调整视图，显示成课程的内容
调整如下：
- 把“专业”改为“点播课程”
- 把“admin/profession” 改为“admin/course”
- 把“profession_”改为“course_”
- 修改表头数据
- 修改datatables插件中的字段列
- 修改datatables插件中字段值的设置
修改完成上面的操作以后，我们再次访问点播课程列表页面，效果如下：
上面提示，我们的控制器Admin\CourseController.php的201行，查询了未知的字段，所以修改：
考虑到后面添加点播课程，所以可以先把ajax_list后面两个方法也进行调整。
最后点播课程的列表页效果：
上面没有数据，所以我们使用数据填充种子，生成测试数据。
2.1.4 使用数据填充种子，生成测试数据
命令行：
代码：
2.1.4.1 执行数据填充种子
命令行：
效果：
我们就可以再次访问点播课程的列表页，效果如下：
2.1.5 调整显示的字段
控制器代码：
视图代码：
效果：
对于点播课程的添加、删除和修改，并没有图片的处理和复杂的逻辑，所以你们自己实现。
2.1.6 删除功能的调整
把控制器Admin\CourseController@destroy修改如下：
new Admin 改为 new Course
注意，上面的专业的控制器里面的同一位置，也要改为 new Profession
重新使用AuthTableSeeder数据填充种子，进行调整权限。
AuthTableSeeder页面中所有的删除功能对应的action全部改成 destroy。
同时，因为当时我们的Role表中的字段也会记录角色的权限，所以对应的 role表的auth_ac字段的值中的destroy也要调整过来。
2.2 点播课时
点播课时是属于点播课程下面的 内容，一个课程下有多个课时。
同时，点播课时会设计到具体的视频播放
我们前面已经创建了课时表了。
2.2.1 创建点播课时的数据模型
代码：
把点播课程的数据模型代码复制过来
2.2.2 创建控制器和路由方法
代码：
把课程控制器Admin\CourseController的代码复制过来修改以下：
- 把 App\Models\Course 修改为 App\Models\Lesson
- 把 CourseController 改为 LessonController
- 把 点播课程 改为 点播课时
- 把 “admin.course” 改为 “admin.lesson”
- 把 “Course $course” 改为 Lesson $lesson
- 把 “$course” 改为 “$lesson”
- 把 “unique:course” 改为 “unique:lesson”
- 把 “course_name”改为 “lesson_name”
- 把“new Course”改为 “new Lesson”
- 把“pro_id”改为“course_id”
- 把“with('profession')”改为 with('course')
2.2.2.1 声明点播课程的资源路由
2.2.3 把视图复制到项目中
把课程的视图列表复制过来
2.2.3.1 调整视图，显示成课时的内容
调整如下：
- 把“点播课程”改为“点播课时”
- 把“admin/course” 改为“admin/lesson”
- 把“course_”改为“lesson_”
- 修改表头数据
- 修改datatables插件中的字段列
- 修改datatables插件中字段值的设置
访问效果：
2.2.3.2 修改控制器中查询的字段信息
再次访问，不再报错，但是没有数据，效果：
2.2.4 使用数据填充种子，生成测试数据
代码：
执行数据填充种子
效果：
2.2.4.1 访问课时列表
调整下列表页数据的显示
控制器：
视图：
效果：
接下来，完善列表数据的显示
2.2.4.2 不是显示老师的ID，而是老师的姓名
模型，代码：
控制器，代码：
视图代码：
访问效果：
2.2.5 完善视频的展示
后台管理员应该是是可以预览课时的视频的，所以我们可以在列表页的时候，显示视频。
因为目前是测试数据，所以我们这里找一个视频过来。
分析：
我们可以在列表页中，展示一个视频的播放按钮，当管理员点击时,使用layer插件弹出一个视频播放的窗口。(layer弹窗 + video标签)
视图代码：
添加课时的时候需要注意两点：
1. 课时的授课老师选择，只能从当前课时的课程上面的所属专业中的老师进行选择。
2. 课时的视频上传，可以使用webuploader插件来进行，预览的时候使用video标签展示即可。
3. 课时的视频上传，因为一个视频可能会很大，所以php.ini的POST_MAX_SIZE 和 MAX_FILE_SIZE 的值必须进行调整。
浙公网安备 33010602011771号