laravel通用后台-视频管理系统开发 - PHP11期学习

首页 > 博客列表 > laravel通用后台-视频管理系统开发

博主信息

博文 62

粉丝 7

访问量 74118

专题推荐

更多>

1. 创建路由

 // 视频中心
    Route::get('/admins/video/index','Video@index');//视频列表
    Route::get('/admins/video/add','Video@add');//视频添加
    Route::post('/admins/video/save','Video@save');//视频保存
    Route::post('/admins/video/del','Video@del');//视频保存
// 仿抖音
    Route::get('/douyin/index','Douyin@index');//抖音首页

2. 创建后台和前端控制器

利用laravel的artisan命令轻松创建

php artisan make:controller admins/Video
php artisan make:controller Douyin

3. 后台控制器代码

<?php
namespace App\Http\Controllers\admins;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Auth;
// 视频管理
class Video extends Controller
{
    //视频列表
    public function index(Request $request) {
        $data['cates']=DB::table('video_cate')->cates('vcid');
        $data['auth']=DB::table('new_admin')->cates('id');
        $data['area']=DB::table('areas')->where('pid',0)->cates('code');
        $data['page']=(int)$request->page;
        $data['pageSize']=5;
        $pages= DB::table('video')->orderBy('id','desc')->pages($data['pageSize']);
        // 列表
        $data['video_list']=$pages['lists'];
        // 总数
        $data['total']=$pages['total'];
        // echo '<pre>';
        // print_r($data);
        // return;
        return view('admins/video/index',$data);
    }
    //视频增加
    public function add(Request $request){ 
        $vid=(int)$request->vid;
        $data['video']=DB::table('video')->where('id',$vid)->item();
        $data['cates']=DB::table('video_cate')->lists();
        $data['areas']=DB::table('areas')->where('pid',0)->lists();
        // echo '<pre>';
        // print_r($data);
        // return;
        return view('admins/video/add',$data);
    }
    // 视频保存
    public function save(Request $request)
    {
        $vid=(int)$request->vid;//视频的id
        $admin=Auth::user();
        $data['vcid']=(int)$request->vcid;
        $data['title']=trim($request->title);
        $data['area']=(int)$request->area;
        $data['thumb']=trim($request->preview_img);
        $data['video_url']=trim($request->video_url);
        $data['auther_id']=$admin->id;
        $data['pv']=0;
        $data['status']=(int)$request->status;
        // echo '<pre>';
        // echo $vid;
  //       print_r($data);
  //       print_r($admin);
  //       return;
        if ($data['title']==='') {
            exit(json_encode(['code'=>1,'message'=>'视频标题怎么可以没有呢？']));
        }
        if ($vid===0) {
            $data['add_time']=time();
            DB::table('video')->insert($data);
        } else {
            DB::table('video')->where('id',$vid)->update($data);
        }
        exit(json_encode(['code'=>0,'message'=>'保存视频成功']));
    }
    // 删除视频
    public function del(Request $request) {
        $vid=(int)$request->vid;
        // echo $aid;
        // exit;
        DB::table('video')->where('id',$vid)->delete();
        exit(json_encode(['code'=>0,'message'=>'删除视频成功']));
    }
}

4. 前端控制器代码

<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Auth;
class Douyin extends Controller
{
    //仿抖音首页
    public function index() {
        $data['video_list']=DB::table('video')->where('status',1)->limit(6)->orderBy('id','desc')->lists();
        // echo '<pre>';
        // print_r($data);
        // return;
        $data['area']=DB::table('areas')->where('pid',0)->cates('code');
        return view('douyin/index',$data);
    }
}

5 后台视频列表页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频列表</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <script src="/static/plugins/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/css/admin_index.css">
</head>
<body style="padding: 20px">
    <div class="article_add">
        <button class="layui-btn" onclick="add()">添加视频</button>
    </div>
    <table class="layui-table">
        @csrf
        <thead>
            <tr>
                <th>ID</th>
                <th>视频分类</th>
                <th>缩略图</th>
                <th>视频标题</th>
                <th>视频作者</th>
                <th>地区</th>
                <th>播放量</th>
                <th>发布时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($video_list as $item)
            <tr>
                <td>{{$item['id']}}</td>
                <td>{{$cates[$item['vcid']]['title']}}</td>
                <td><img src="{{$item['thumb']}}" /></td>
                <td>{{$item['title']}}</td>
                <td>{{$auth[$item['auther_id']]['name']}}</td>
                <td>{{$area[$item['area']]['name']}}</td>
                <td>{{$item['pv']}}</td>
                <td>{{date('Y-m-d H:i:s',$item['add_time'])}}</td>
                <td>{{$item['status']==0?'未上架':'已上架'}}</td>
                <td>
                    <button class="layui-btn layui-btn-xs" onclick="add({{$item['id']}})">编辑</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({{$item['id']}})">删除</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    <div id="pages"></div>
</body>
</html>
<script>
layui.use(['layer', 'laypage'], function() {
    var layer = layui.layer;
    var laypage = layui.laypage;
    $ = layui.jquery;
    //执行一个laypage实例
    laypage.render({
        limit: {{$pageSize}},
        elem: 'pages', //注意，这里的 test1 是 ID，不用加 # 号
        count: {{$total}}, //数据总数，从服务端得到
        curr:{{$page}},
        layout:['count','prev', 'page', 'next','skip'],
        jump: function(obj, first){
            //obj包含了当前分页的所有参数，比如：
            //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            //console.log(obj.limit); 得到每页显示的条数
            //首次不执行
            if(!first){
              //do something
              window.location.href='?page='+obj.curr;
            }
          }
    });
});
// 添加、修改视频
function add(vid) {
    //iframe层
    layer.open({
        type: 2,
        title: vid>0?'修改视频':'添加视频',
        shadeClose: true,
        shade: 0.8,
        area: ['80%', '60%'],
        content: '/admins/video/add?vid='+vid, //iframe的url
        btn: ['保存'],
        yes: function(index, layero) {
            var body = layer.getChildFrame('body', index);
            var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
            iframeWin.save();
        }
    });
}
//删除文章
function del(vid) {
    //询问框
    layer.confirm('是否确定删除？', {
        icon: 3,
        btn: ['确定', '取消'] //按钮
    }, function() {
        var _token = $('input[name="_token"]').val();
        $.post('/admins/video/del', {
            vid: vid,
            _token: _token
        }, function(res) {
            if (res.code > 0) {
                return layer.alert(res.message, {
                    icon: 2
                });
            }
            layer.msg('删除视频成功');
            setTimeout(function() {
                window.location.reload();
            }, 1000)
        }, 'json');
    });
}
</script>

6 新增发布视频代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加视频</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <script src="/static/plugins/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/css/admin_index.css">
</head>
<body style="padding: 20px">
    <div class="layui-form">
        @csrf
        <input type="hidden" name="vid" value="{{$video['id']}}">
        <div class="layui-form-item">
            <label class="layui-form-label">视频标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" class="layui-input" value="{{$video['title']}}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频分类</label>
            <div class="layui-input-block">
                <select name="vcid">
                    <option value="0">请选择视频的分类</option>
                    @foreach ($cates as $cate)
                    <option value="{{$cate['vcid']}}" {{$cate['vcid']===$video['vcid']?'selected':''}}>{{$cate['title']}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地区</label>
            <div class="layui-input-block">
                <select name="area">
                    <option value="0">请选择地区</option>
                    @foreach ($areas as $area)
                    <option value="{{$area['code']}}" {{$area['code']===$video['area']?'selected':''}}>{{$area['name']}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">封面图</label>
            <div class="layui-input-block">
                <img id="preview_img" src="{{$video['thumb']}}" style="height: 30px">
                <button type="button" class="layui-btn" id="img_upload">
                      <i class="layui-icon"></i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频地址</label>
            <div class="layui-input-block">
                <input type="text" name="video_url" class="layui-input" value="{{$video['video_url']}}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" {{$video['status']===1?'checked':''}}  lay-skin="primary" title="发布">
            </div>
        </div>
    </div>
</body>
</html>
<script>
    layui.use(['upload','form'], function(){
      var upload = layui.upload;
      var form = layui.form;
      $ = layui.jquery;
      var _token=$('input[name="_token"]').val();
      //执行实例
      var uploadInst = upload.render({
        elem: '#img_upload' //绑定元素
        ,url: '/admins/files/upload_img' //上传接口
        ,data: {_token:_token}
        ,done: function(res){
          //上传完毕回调
          // console.log('success');
          $('#preview_img').attr('src',res.data.src);
        }
        ,error: function(){
          //请求异常回调
        }
      });
    });
    // 视频保存
    function save() {
        var data={};
        data.vid=$('input[name="vid"]').val();//编辑的视频id
        data.title=$.trim($('input[name="title"]').val());
        data.vcid=parseInt($('select[name="vcid"]').val());//视频分类id
        data.preview_img=$('#preview_img').attr('src');
        data.video_url=$('input[name="video_url"]').val();
        data.status=$('input[name="status"]').is(':checked')?1:0;
        data._token=$('input[name="_token"]').val();
        data.area=parseInt($('select[name="area"]').val());
        if (data.title==='') {
            return layer.alert('填写视频标题',{icon:2});
        }
        if (isNaN(data.vcid) || data.vcid<=0) {
            return layer.alert('请勾选视频分类',{icon:2});
        }
        $.post('/admins/video/save',data,function(res){
            if (res.code > 0) {
                return layer.alert(res.message, {
                    icon: 2
                });
            }
            layer.msg('添加视频成功');
            setTimeout(function() {
                parent.window.location.reload();
            }, 1000)
        },'json');
    }
</script>

7 前端仿抖音代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>播放广场</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <script src="/static/plugins/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/css/douyin.css">
</head>
<body>
    <!-- 头部导航 -->
    <div class="header_title">
        <span class="layui-icon layui-icon-left"></span>
        <span>播放广场</span>
        <span class="layui-icon layui-icon-set-fill"></span>
    </div>
    <!-- 幻灯片 -->
    <div class="layui-carousel" id="carousel">
        <div carousel-item>
            <div><img src="/static/images/douyin/banner.jpg" alt="幻灯片1"></div>
            <div><img src="/static/images/douyin/banner.jpg" alt="幻灯片2"></div>
            <div><img src="/static/images/douyin/banner.jpg" alt="幻灯片3"></div>
            <div><img src="/static/images/douyin/banner.jpg" alt="幻灯片4"></div>
            <div><img src="/static/images/douyin/banner.jpg" alt="幻灯片5"></div>
        </div>
    </div>
    <!-- 视频列表 -->
    <div class="video_list">
        @foreach ($video_list as $video)
        <div class="video_item">
            <img src="{{$video['thumb']}}" alt="">
            <div class="descs">
                <div class="area">{{$area[$video['area']]['name']}}</div>
                <div class="title">{{$video['title']}}</div>
            </div>
        </div>
        @endforeach
    </div>
</body>
</html>
<script>
layui.use(['carousel'], function() {
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
        elem: '#carousel',
        width: '100%', //设置容器宽度
        height: '20vh', //设置容器高度
        arrow: 'none' //始终显示箭头
        //,anim: 'updown' //切换动画方式
    });
});
</script>

8 演示地址

http://www.php520.vip/
测试账号：admin 密码：123456 权限：超管
测试账号：ceshi 密码：123456 权限：普管

9 总结

Laravel的语法优雅，很多方法都不用看文档直接就能推算出来；而且是全栈，该有的都有了，方便快速构建原型；扩展齐全，大量的扩展包，有 WordPress 的感觉；

批改老师：

WJ

批改状态：合格

老师批语：写的很认真仔细，非常不错！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

字体属性学习总结

2020-04-08 19:31:23