search

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

laravel通用后台-视频管理系统开发

我是郭富城
我是郭富城原创
2020年06月20日 06:07:591571浏览

1. 创建路由

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

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

利用laravel的artisan命令轻松创建

  1. php artisan make:controller admins/Video
  2. php artisan make:controller Douyin

3. 后台控制器代码

  1. <?php
  3. namespace App\Http\Controllers\admins;
  5. use App\Http\Controllers\Controller;
  6. use Illuminate\Http\Request;
  7. use Illuminate\Support\Facades\DB;
  8. use Illuminate\Support\Facades\Auth;
  10. // 视频管理
  11. class Video extends Controller
  12. {
  13.     //视频列表
  14.     public function index(Request $request) {
  15.         $data['cates']=DB::table('video_cate')->cates('vcid');
  16.         $data['auth']=DB::table('new_admin')->cates('id');
  17.         $data['area']=DB::table('areas')->where('pid',0)->cates('code');
  18.         $data['page']=(int)$request->page;
  19.         $data['pageSize']=5;
  20.         $pages= DB::table('video')->orderBy('id','desc')->pages($data['pageSize']);
  21.         // 列表
  22.         $data['video_list']=$pages['lists'];
  23.         // 总数
  24.         $data['total']=$pages['total'];
  25.         // echo '<pre>';
  26.         // print_r($data);
  27.         // return;
  28.         return view('admins/video/index',$data);
  29.     }
  30.     //视频增加
  31.     public function add(Request $request){ 
  32.         $vid=(int)$request->vid;
  33.         $data['video']=DB::table('video')->where('id',$vid)->item();
  34.         $data['cates']=DB::table('video_cate')->lists();
  35.         $data['areas']=DB::table('areas')->where('pid',0)->lists();
  36.         // echo '<pre>';
  37.         // print_r($data);
  38.         // return;
  39.         return view('admins/video/add',$data);
  40.     }
  41.     // 视频保存
  42.     public function save(Request $request)
  43.     {
  44.         $vid=(int)$request->vid;//视频的id
  45.         $admin=Auth::user();
  46.         $data['vcid']=(int)$request->vcid;
  47.         $data['title']=trim($request->title);
  48.         $data['area']=(int)$request->area;
  49.         $data['thumb']=trim($request->preview_img);
  50.         $data['video_url']=trim($request->video_url);
  51.         $data['auther_id']=$admin->id;
  52.         $data['pv']=0;
  53.         $data['status']=(int)$request->status;
  55.         // echo '<pre>';
  56.         // echo $vid;
  57.   //       print_r($data);
  58.   //       print_r($admin);
  59.   //       return;
  60.         if ($data['title']==='') {
  61.             exit(json_encode(['code'=>1,'message'=>'视频标题怎么可以没有呢？']));
  62.         }
  64.         if ($vid===0) {
  65.             $data['add_time']=time();
  66.             DB::table('video')->insert($data);
  67.         } else {
  68.             DB::table('video')->where('id',$vid)->update($data);
  69.         }
  71.         exit(json_encode(['code'=>0,'message'=>'保存视频成功']));
  73.     }
  75.     // 删除视频
  76.     public function del(Request $request) {
  77.         $vid=(int)$request->vid;
  78.         // echo $aid;
  79.         // exit;
  80.         DB::table('video')->where('id',$vid)->delete();
  81.         exit(json_encode(['code'=>0,'message'=>'删除视频成功']));
  82.     }
  83. }

4. 前端控制器代码

  1. <?php
  3. namespace App\Http\Controllers;
  5. use App\Http\Controllers\Controller;
  6. use Illuminate\Http\Request;
  7. use Illuminate\Support\Facades\DB;
  8. use Illuminate\Support\Facades\Auth;
  10. class Douyin extends Controller
  11. {
  12.     //仿抖音首页
  13.     public function index() {
  14.         $data['video_list']=DB::table('video')->where('status',1)->limit(6)->orderBy('id','desc')->lists();
  15.         // echo '<pre>';
  16.         // print_r($data);
  17.         // return;
  18.         $data['area']=DB::table('areas')->where('pid',0)->cates('code');
  19.         return view('douyin/index',$data);
  20.     }
  21. }

5 后台视频列表页

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>视频列表</title>
  8.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  9.     <script src="/static/plugins/layui/layui.js"></script>
  10.     <link rel="stylesheet" href="/static/css/admin_index.css">
  11. </head>
  13. <body style="padding: 20px">
  14.     <div class="article_add">
  15.         <button class="layui-btn" onclick="add()">添加视频</button>
  16.     </div>
  18.     <table class="layui-table">
  19.         @csrf
  20.         <thead>
  21.             <tr>
  22.                 <th>ID</th>
  23.                 <th>视频分类</th>
  24.                 <th>缩略图</th>
  25.                 <th>视频标题</th>
  26.                 <th>视频作者</th>
  27.                 <th>地区</th>
  28.                 <th>播放量</th>
  29.                 <th>发布时间</th>
  30.                 <th>状态</th>
  31.                 <th>操作</th>
  32.             </tr>
  33.         </thead>
  34.         <tbody>
  35.             @foreach ($video_list as $item)
  36.             <tr>
  37.                 <td>{{$item['id']}}</td>
  38.                 <td>{{$cates[$item['vcid']]['title']}}</td>
  39.                 <td><img src="{{$item['thumb']}}" /></td>
  40.                 <td>{{$item['title']}}</td>
  41.                 <td>{{$auth[$item['auther_id']]['name']}}</td>
  42.                 <td>{{$area[$item['area']]['name']}}</td>
  43.                 <td>{{$item['pv']}}</td>
  44.                 <td>{{date('Y-m-d H:i:s',$item['add_time'])}}</td>
  45.                 <td>{{$item['status']==0?'未上架':'已上架'}}</td>
  46.                 <td>
  47.                     <button class="layui-btn layui-btn-xs" onclick="add({{$item['id']}})">编辑</button>
  48.                     <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({{$item['id']}})">删除</button>
  49.                 </td>
  50.             </tr>
  51.             @endforeach
  52.         </tbody>
  53.     </table>
  54.     <div id="pages"></div>
  55. </body>
  57. </html>
  59. <script>
  60. layui.use(['layer', 'laypage'], function() {
  61.     var layer = layui.layer;
  62.     var laypage = layui.laypage;
  63.     $ = layui.jquery;
  64.     //执行一个laypage实例
  65.     laypage.render({
  66.         limit: {{$pageSize}},
  67.         elem: 'pages', //注意，这里的 test1 是 ID，不用加 # 号
  68.         count: {{$total}}, //数据总数，从服务端得到
  69.         curr:{{$page}},
  70.         layout:['count','prev', 'page', 'next','skip'],
  71.         jump: function(obj, first){
  72.             //obj包含了当前分页的所有参数，比如：
  73.             //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
  74.             //console.log(obj.limit); 得到每页显示的条数
  76.             //首次不执行
  77.             if(!first){
  78.               //do something
  79.               window.location.href='?page='+obj.curr;
  80.             }
  81.           }
  82.     });
  83. });
  85. // 添加、修改视频
  86. function add(vid) {
  87.     //iframe层
  88.     layer.open({
  89.         type: 2,
  90.         title: vid>0?'修改视频':'添加视频',
  91.         shadeClose: true,
  92.         shade: 0.8,
  93.         area: ['80%', '60%'],
  94.         content: '/admins/video/add?vid='+vid, //iframe的url
  95.         btn: ['保存'],
  96.         yes: function(index, layero) {
  97.             var body = layer.getChildFrame('body', index);
  98.             var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
  99.             iframeWin.save();
  100.         }
  101.     });
  103. }
  105. //删除文章
  106. function del(vid) {
  107.     //询问框
  108.     layer.confirm('是否确定删除？', {
  109.         icon: 3,
  110.         btn: ['确定', '取消'] //按钮
  111.     }, function() {
  112.         var _token = $('input[name="_token"]').val();
  113.         $.post('/admins/video/del', {
  114.             vid: vid,
  115.             _token: _token
  116.         }, function(res) {
  117.             if (res.code > 0) {
  118.                 return layer.alert(res.message, {
  119.                     icon: 2
  120.                 });
  121.             }
  122.             layer.msg('删除视频成功');
  123.             setTimeout(function() {
  124.                 window.location.reload();
  125.             }, 1000)
  126.         }, 'json');
  127.     });
  128. }
  130. </script>

6 新增发布视频代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>添加视频</title>
  6.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  7.     <script src="/static/plugins/layui/layui.js"></script>
  8.     <link rel="stylesheet" href="/static/css/admin_index.css">
  9. </head>
  10. <body style="padding: 20px">
  11.     <div class="layui-form">
  12.         @csrf
  13.         <input type="hidden" name="vid" value="{{$video['id']}}">
  14.         <div class="layui-form-item">
  15.             <label class="layui-form-label">视频标题</label>
  16.             <div class="layui-input-block">
  17.                 <input type="text" name="title" class="layui-input" value="{{$video['title']}}">
  18.             </div>
  19.         </div>
  20.         <div class="layui-form-item">
  21.             <label class="layui-form-label">视频分类</label>
  22.             <div class="layui-input-block">
  23.                 <select name="vcid">
  24.                     <option value="0">请选择视频的分类</option>
  25.                     @foreach ($cates as $cate)
  26.                     <option value="{{$cate['vcid']}}" {{$cate['vcid']===$video['vcid']?'selected':''}}>{{$cate['title']}}</option>
  27.                     @endforeach
  28.                 </select>
  29.             </div>
  30.         </div>
  32.         <div class="layui-form-item">
  33.             <label class="layui-form-label">地区</label>
  34.             <div class="layui-input-block">
  35.                 <select name="area">
  36.                     <option value="0">请选择地区</option>
  37.                     @foreach ($areas as $area)
  38.                     <option value="{{$area['code']}}" {{$area['code']===$video['area']?'selected':''}}>{{$area['name']}}</option>
  39.                     @endforeach
  41.                 </select>
  42.             </div>
  43.         </div>
  44.         <div class="layui-form-item">
  45.             <label class="layui-form-label">封面图</label>
  46.             <div class="layui-input-block">
  47.                 <img id="preview_img" src="{{$video['thumb']}}" style="height: 30px">
  48.                 <button type="button" class="layui-btn" id="img_upload">
  49.                       <i class="layui-icon"></i>上传图片
  50.                 </button>
  51.             </div>
  52.         </div>
  54.         <div class="layui-form-item">
  55.             <label class="layui-form-label">视频地址</label>
  56.             <div class="layui-input-block">
  57.                 <input type="text" name="video_url" class="layui-input" value="{{$video['video_url']}}">
  58.             </div>
  59.         </div>
  61.         <div class="layui-form-item">
  62.             <label class="layui-form-label">状态</label>
  63.             <div class="layui-input-block">
  64.                 <input type="checkbox" name="status" {{$video['status']===1?'checked':''}}  lay-skin="primary" title="发布">
  65.             </div>
  66.         </div>
  67.     </div>
  68. </body>
  69. </html>
  70. <script>
  71.     layui.use(['upload','form'], function(){
  72.       var upload = layui.upload;
  73.       var form = layui.form;
  74.       $ = layui.jquery;
  75.       var _token=$('input[name="_token"]').val();
  76.       //执行实例
  77.       var uploadInst = upload.render({
  78.         elem: '#img_upload' //绑定元素
  79.         ,url: '/admins/files/upload_img' //上传接口
  80.         ,data: {_token:_token}
  81.         ,done: function(res){
  82.           //上传完毕回调
  83.           // console.log('success');
  84.           $('#preview_img').attr('src',res.data.src);
  85.         }
  86.         ,error: function(){
  87.           //请求异常回调
  88.         }
  89.       });
  90.     });
  92.     // 视频保存
  93.     function save() {
  94.         var data={};
  95.         data.vid=$('input[name="vid"]').val();//编辑的视频id
  96.         data.title=$.trim($('input[name="title"]').val());
  97.         data.vcid=parseInt($('select[name="vcid"]').val());//视频分类id
  98.         data.preview_img=$('#preview_img').attr('src');
  99.         data.video_url=$('input[name="video_url"]').val();
  100.         data.status=$('input[name="status"]').is(':checked')?1:0;
  101.         data._token=$('input[name="_token"]').val();
  102.         data.area=parseInt($('select[name="area"]').val());
  104.         if (data.title==='') {
  105.             return layer.alert('填写视频标题',{icon:2});
  106.         }
  107.         if (isNaN(data.vcid) || data.vcid<=0) {
  108.             return layer.alert('请勾选视频分类',{icon:2});
  109.         }
  110.         $.post('/admins/video/save',data,function(res){
  111.             if (res.code > 0) {
  112.                 return layer.alert(res.message, {
  113.                     icon: 2
  114.                 });
  115.             }
  116.             layer.msg('添加视频成功');
  117.             setTimeout(function() {
  118.                 parent.window.location.reload();
  119.             }, 1000)
  120.         },'json');
  121.     }
  122. </script>

7 前端仿抖音代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7.     <title>播放广场</title>
  8.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  9.     <script src="/static/plugins/layui/layui.js"></script>
  10.     <link rel="stylesheet" href="/static/css/douyin.css">
  11. </head>
  13. <body>
  14.     <!-- 头部导航 -->
  15.     <div class="header_title">
  16.         <span class="layui-icon layui-icon-left"></span>
  17.         <span>播放广场</span>
  18.         <span class="layui-icon layui-icon-set-fill"></span>
  19.     </div>
  20.     <!-- 幻灯片 -->
  21.     <div class="layui-carousel" id="carousel">
  22.         <div carousel-item>
  23.             <div><img src="/static/images/douyin/banner.jpg" alt="幻灯片1"></div>
  24.             <div><img src="/static/images/douyin/banner.jpg" alt="幻灯片2"></div>
  25.             <div><img src="/static/images/douyin/banner.jpg" alt="幻灯片3"></div>
  26.             <div><img src="/static/images/douyin/banner.jpg" alt="幻灯片4"></div>
  27.             <div><img src="/static/images/douyin/banner.jpg" alt="幻灯片5"></div>
  28.         </div>
  29.     </div>
  30.     <!-- 视频列表 -->
  31.     <div class="video_list">
  32.         @foreach ($video_list as $video)
  33.         <div class="video_item">
  34.             <img src="{{$video['thumb']}}" alt="">
  35.             <div class="descs">
  36.                 <div class="area">{{$area[$video['area']]['name']}}</div>
  37.                 <div class="title">{{$video['title']}}</div>
  38.             </div>
  39.         </div>
  40.         @endforeach
  41.     </div>
  43. </body>
  45. </html>
  46. <script>
  47. layui.use(['carousel'], function() {
  48.     var carousel = layui.carousel;
  49.     //建造实例
  50.     carousel.render({
  51.         elem: '#carousel',
  52.         width: '100%', //设置容器宽度
  53.         height: '20vh', //设置容器高度
  54.         arrow: 'none' //始终显示箭头
  55.         //,anim: 'updown' //切换动画方式
  56.     });
  57. });
  58. </script>

8 演示地址

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

9 总结

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

上一条：小白成为全栈工程师所必备的工具使用和插件下一条：laravel通用后台-新闻文章系统开发
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多