Community Learn Tools Library Leisure
search
English
Home > List of blog posts > laravel通用后台-视频管理系统开发
Blogger Information
Blog 62
fans 7
comment 2
visits 58230
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
laravel通用后台-视频管理系统开发
我是郭富城
Original
1568 people have browsed it

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 的感觉；

Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：写的很认真仔细，非常不错！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post