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(拉流)