Laravel框架实战-在线教育平台（5）
一、直播课程管理（获取推流地址、日期插件）
1、获取推流地址
步骤1：定义模型
/**
* 关联直播流模型（1:1）
* 语法：模型名::with（’role’）->first()
* @return \Illuminate\Database\Eloquent\Relations\HasOne
*/
public function stream()
{
#return $this->hasOne(关联模型名，关联模型公共字段，本模型公共字段)
return $this->hasOne(‘App\Http\Model\Stream’,’id’, ‘stream_id’);
}
步骤2：修改控制器
步骤3：修改视图
日期插件
配置手册：http://www.my97.net/demo/index.htm
图片上传【★★★】
webuploader插件介绍
说明：就是由百度团队开发的一个上传插件
地址：http://fex.baidu.com/webuploader/
使用
- 语法：
检查是否存在指定键：$request->hasFile(‘file’)
检查是否上传成功： $request->file(‘file’)->isValid()
存储文件： $request->file(‘file’)->store(‘子路径’，存储驱动器的名称);
- 实现步骤：
步骤1：将官方下载的文件移动到public目录下的webuploader文件夹中
步骤2：（视图代码）打开手册引入静态资源并复制初始化代码
<div class=”row cl”>
<label class=”form-label col-xs-4 col-sm-3″>封面</label>
<div class=”formControls col-xs-8 col-sm-9″>
<!–dom结构部分–>
<div id=”uploader-demo”>
<!–用来存放item–>
<div id=”fileList” class=”uploader-list”></div>
<div id=”filePicker”>选择图片</div>
</div>
<div id=”showimg”>
</div>
<div id=”uploading” style=”width:0%;height:20px;background: blue;”></div>
<input required type=”text” class=”input-text” value=”” placeholder=”” id=”img” name=”img”>
</div>
</div>
<!–引入CSS–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘webuploader’) }}/webuploader.css”>
<!–引入JS–>
<script type=”text/javascript” src=”{{ asset(‘webuploader’) }}/webuploader.js”></script>
<script type=”text/javascript”>
// 初始化Web Uploader
var uploader = WebUploader.create({
// 设置自定义请求数据
formData: {
_token: ‘{{ csrf_token() }}’
},
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: ‘{{ asset(“webuploader”) }}/Uploader.swf’,
// 文件接收服务端。
server: ” {{ url(‘admin/upload/file’) }}”,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: ‘#filePicker’,
// 只允许选择图片文件。
accept: {
title: ‘Images’,
extensions: ‘gif,jpg,jpeg,bmp,png’,
mimeTypes: ‘image/*’
}
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( ‘uploadSuccess’, function( file, response ) {
//file是原上传文件信息，相当于php的$_FILES数据
//response是php上传文件响应的数据
console.log(response);
$(‘#img’).val(response.info);
var imgSrc = “{{asset(‘uploads’)}}” + ‘/’ + response.info;
$(‘#showimg’).html(‘<img src=”‘+imgSrc+'” width=”120″ height=”80″ />’)
});
// 文件上传过程中创建进度条实时显示。
uploader.on( ‘uploadProgress’, function( file, percentage ) {
$(‘#uploading’).css( ‘width’, percentage * 100 + ‘%’ );
});
</script>
步骤3：定义路由，并创建控制器书写上传功能代码
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class UploadController extends Controller
{
//上传文件
public function file(Request $request)
{
//1.判断$_FILES[file键]是否存在，并且$_FILES[键][error] 等于0 （也就是没有错误）
if ($request->hasFile(‘file’) && $request->file(‘file’)->isValid()) {
//2.上传文件
//语法： request->file(‘file’)->store(‘子路径’，存储驱动器的名称);
//store是官方存储文件方法
//存储驱动器的名称：对应config/filesystems.php文件
//子路径： 指会在config/filesystems.php文件声明的上传文件夹下再创建一个文件
$filename = $request->file(‘file’)->store(‘img’, ‘upload’);
return [‘info’ => $filename];
}
}
}
更改图片上传规则到七牛云【★★★】
1）对象存储介绍
对象存储简单理解：就是用来存放静态资源的服务器
好处：减少冗余，便于维护
2）使用（zgldh/qiniu-laravel-storage）
步骤1：下载并配置根据下图文档 composer reqiure zgldh/qiniu-laravel-storage
步骤2：打开控制器方法将上传到laravel项目代码更改为上传到七牛云即可
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class UploadController extends Controller
{
//上传文件
public function file(Request $request)
{
//1.判断$_FILES[file键]是否存在，并且$_FILES[键][error] 等于0 （也就是没有错误）
if ($request->hasFile(‘file’) && $request->file(‘file’)->isValid()) {
//2.上传文件
//语法： request->file(‘file’)->store(‘子路径’，存储驱动器的名称);
//store是官方存储文件方法
//存储驱动器的名称：对应config/filesystems.php文件
//子路径： 指会在config/filesystems.php文件声明的上传文件夹下再创建一个文件
//$filename = $request->file(‘file’)->store(‘img’, ‘upload’);
###更改七牛云存储图片
//定义上传文件名称
$filename = uniqid(‘goods’.date(‘YmdHis’,time()));
//从临时文件中获取图片数据
$imgData = file_get_contents($request->file(‘file’)->getPathName());
//上传
\Storage::disk(‘qiniu’)->put($filename, $imgData); //上传文件 file_get_contents(XX.PNG)
//获取下载地址（图片地址）
$downloadUrl = \Storage::disk(‘qiniu’)->getDriver()->downloadUrl($filename);
return [‘info’ => $downloadUrl];
}
}
}
更改直播播放视图
步骤1：将直播详情页静态代码替换edu项目中的直播详情页
步骤：将直播地址更改为变量
首页点播功能
快进看视频，主要理解思路，最好自己写一写
图片懒加载：http://www.jq22.com/jquery-info390
四、总结
本项目中使用了以下几个插件/功能：
Laravel自带组件：
DebugBar（调试工具）、
laravelexcel（导出导入excel文件）、
QiniuSDK（云存储）、
GuzzleHttp（发送请求）
JQuery插件：
datatables（数据表格无刷新分页）、
webuploader（上传文件）、
validate（表单验证插件）、
layer（弹框插件）
直播内容
七牛直播云
OBS推流软件使用
视频播放器Ckplayer（拉流）
