后盾网lavarel视频项目---lavarel多表关联一对多操作实例
一、总结
一句话总结：
1、一对多中多那个部分的数据前端通过json弄到服务器
2、所有通过一操作多的时候，都要用上模型中定义的那个方法：$lesson->videos()->create($video);
1、页面直接通过一对多中的一找到多的数量？
控制器中：$data=Lesson::get();
视图中：{{$d->videos()->count()}}
控制器中 public function index() { $data=Lesson::get(); //dd($data->toArray()); return view('admin.lesson.index',compact('data')); } 视图中 <tr> <td>{{$d['id']}}.</td> <td>{{$d['title']}}</td> <td>{{$d->videos()->count()}}</td>
2、一对多模型中多对应部分数据通过json传到服务器？
1、转成数组：$videos=json_decode($request['videos'],true);
2、所有通过一操作多的时候，都要用上模型中定义的那个方法：$lesson->videos()->create($video);
//videos数据过来的时候是json数据,true表示转成数组而非对象 $videos=json_decode($request['videos'],true); foreach ($videos as $video){ $lesson->videos()->create($video); }
二、lavarel多表关联一对多操作实例
1、模型
app/Model/Lesson.php
1 <?php 2 3 namespace AppModel; 4 5 use IlluminateDatabaseEloquentModel; 6 7 class Lesson extends Model 8 { 9 /** 10 * 与视频表模型的一对多关联 11 * @return IlluminateDatabaseEloquentRelationsHasMany 12 */ 13 public function videos(){ 14 return $this->hasMany(Video::class); 15 } 16 }
app/Model/Video.php
1 <?php 2 3 namespace AppModel; 4 5 use IlluminateDatabaseEloquentModel; 6 7 class Video extends Model 8 { 9 protected $guarded=[]; 10 }
2、控制器
app/Http/Controllers/Admin/LessonController.php
1 <?php 2 3 namespace AppHttpControllersAdmin; 4 5 use AppModelLesson; 6 use IlluminateHttpRequest; 7 use AppHttpControllersController; 8 9 class LessonController extends CommonController 10 { 11 /** 12 * Display a listing of the resource. 13 * 14 * @return IlluminateHttpResponse 15 */ 16 public function index() 17 { 18 $data=Lesson::get(); 19 //dd($data->toArray()); 20 return view('admin.lesson.index',compact('data')); 21 } 22 23 /** 24 * Show the form for creating a new resource. 25 * 26 * @return IlluminateHttpResponse 27 */ 28 public function create() 29 { 30 // $d=Lesson::find(1)->videos()->get(); 31 // dd($d->toArray()); 32 return view('admin.lesson.create'); 33 } 34 35 /** 36 * Store a newly created resource in storage. 37 * 38 * @param IlluminateHttpRequest $request 39 * @return IlluminateHttpResponse 40 */ 41 public function store(Request $request,Lesson $lesson) 42 { 43 //dd($request->toArray()); 44 $lesson['title']=$request['title']; 45 $lesson['introduce']=$request['introduce']; 46 $lesson['preview']=$request['preview']; 47 $lesson['is_commend']=$request['is_commend']; 48 $lesson['is_hot']=$request['is_hot']; 49 $lesson['click']=$request['click']; 50 $lesson->save(); 51 52 //videos数据过来的时候是json数据,true表示转成数组而非对象 53 $videos=json_decode($request['videos'],true); 54 foreach ($videos as $video){ 55 $lesson->videos()->create($video); 56 } 57 return redirect('/admin/lesson'); 58 59 60 } 61 62 /** 63 * Display the specified resource. 64 * 65 * @param int $id 66 * @return IlluminateHttpResponse 67 */ 68 public function show($id) 69 { 70 // 71 } 72 73 /** 74 * Show the form for editing the specified resource. 75 * 76 * @param int $id 77 * @return IlluminateHttpResponse 78 */ 79 public function edit($id) 80 { 81 // 82 } 83 84 /** 85 * Update the specified resource in storage. 86 * 87 * @param IlluminateHttpRequest $request 88 * @param int $id 89 * @return IlluminateHttpResponse 90 */ 91 public function update(Request $request, $id) 92 { 93 // 94 } 95 96 /** 97 * Remove the specified resource from storage. 98 * 99 * @param int $id 100 * @return IlluminateHttpResponse 101 */ 102 public function destroy($id) 103 { 104 // 105 } 106 }
44-50行：增加课程数据
53-56行：增加视频数据
第55行：所有通过一操作多的时候，都要用上模型中定义的那个方法：$lesson->videos()->create($video);
3、视图
resources/views/admin/lesson/create.blade.php
1 @extends('admin.layout.master') 2 @section('title','新增课程') 3 @section('content') 4 <!-- Content Header (Page header) --> 5 <section class="content-header"> 6 <h1> 7 Dashboard 8 <small>Control panel</small> 9 </h1> 10 <ol class="breadcrumb"> 11 <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> 12 <li class="active">Dashboard</li> 13 </ol> 14 </section> 15 16 <!-- Main content --> 17 <section class="content"> 18 <div style="padding-bottom:15px;"> 19 <div class="btn-group" role="group" aria-label="..."> 20 <a href="/admin/lesson" type="button" class="btn btn-default">课程列表</a> 21 <a href="/admin/lesson/create" type="button" class="btn btn-warning">新增课程</a> 22 </div> 23 </div> 24 25 <div class="box box-info"> 26 <div class="box-header with-border"> 27 <h3 class="box-title">Horizontal Form</h3> 28 </div> 29 <!-- /.box-header --> 30 <!-- form start --> 31 <form class="form-horizontal" action="/admin/lesson" method="post"> 32 {{csrf_field()}} 33 <div class="box-body"> 34 <div class="form-group"> 35 <label for="title" class="col-sm-2 control-label">课程标题</label> 36 37 <div class="col-sm-10"> 38 <input type="text" name="title" class="form-control" id="title" required placeholder="标题"> 39 </div> 40 </div> 41 <div class="form-group"> 42 <label for="introduce" class="col-sm-2 control-label">介绍</label> 43 <div class="col-sm-10"> 44 <textarea name="introduce" class="form-control" id="introduce" rows="5" required></textarea> 45 </div> 46 </div> 47 <div class="form-group"> 48 <label for="preview" class="col-sm-2 control-label">预览图</label> 49 <div class="col-sm-10"> 50 <div class="input-group"> 51 <input type="text" class="form-control" name="preview" readonly="" 52 value="images/nopic.jpg" required> 53 <div class="input-group-btn"> 54 <button onclick="upImage(this)" class="btn btn-default" 55 type="button">选择图片 56 </button> 57 </div> 58 </div> 59 <div class="input-group" style="margin-top:5px;"> 60 <img src="{{asset('images/nopic.jpg')}}" 61 class="img-responsive img-thumbnail" width="150"> 62 <em class="close" style="position:absolute; top: 0px; right: -14px;" 63 title="删除这张图片" onclick="removeImg(this)">×</em> 64 </div> 65 </div> 66 <script> 67 //上传图片 68 function upImage(obj) { 69 require(['util'], function (util) { 70 options = { 71 multiple: false,//是否允许多图上传 72 }; 73 util.image(function (images) { //上传成功的图片，数组类型 74 $("[name='preview']").val(images[0]); 75 $(".img-thumbnail").attr('src', images[0]); 76 }, options) 77 }); 78 } 79 80 //移除图片 81 function removeImg(obj) { 82 $(obj).prev('img').attr('src', 'resource/images/nopic.jpg'); 83 $(obj).parent().prev().find('input').val(''); 84 } 85 </script> 86 </div> 87 <div class="form-group"> 88 <label for="is_commend" class="col-sm-2 control-label">推荐</label> 89 <div class="col-sm-10"> 90 <label class="radio-inline"> 91 <input type="radio" name="is_commend" id="is_commend1" value="1"> 是 92 </label> 93 <label class="radio-inline"> 94 <input type="radio" name="is_commend" id="is_commend0" value="0" checked> 否 95 </label> 96 </div> 97 </div> 98 <div class="form-group"> 99 <label for="is_hot" class="col-sm-2 control-label">热门</label> 100 <div class="col-sm-10"> 101 <label class="radio-inline"> 102 <input type="radio" name="is_hot" id="is_hot1" value="1"> 是 103 </label> 104 <label class="radio-inline"> 105 <input type="radio" name="is_hot" id="is_hot0" value="0" checked> 否 106 </label> 107 </div> 108 </div> 109 <div class="form-group"> 110 <label for="click" class="col-sm-2 control-label">点击数</label> 111 112 <div class="col-sm-10"> 113 <input type="number" name="click" class="form-control" id="click" placeholder="点击数" value="0"> 114 </div> 115 </div> 116 117 {{--视频管理--}} 118 <div class="panel panel-info" id="app"> 119 <div class="panel-heading">视频管理</div> 120 <div class="panel-body"> 121 {{--子元素--}} 122 <div class="panel panel-default" v-for="(v,k) in videos"> 123 <div class="panel-body"> 124 <div class="form-group"> 125 <label for="v_title" class="col-sm-2 control-label">视频标题</label> 126 127 <div class="col-sm-10"> 128 <input type="text" name="v_title" class="form-control" v-model="v.title"> 129 </div> 130 </div> 131 <div class="form-group"> 132 <label for="v_path" class="col-sm-2 control-label">视频地址</label> 133 <div class="col-sm-10"> 134 <input type="text" name="v_path" class="form-control" v-model="v.path"> 135 </div> 136 </div> 137 </div> 138 <div class="panel-footer"> 139 <button class="btn btn-success btn-sm" @click.prevent="del(k)">删除视频</button> 140 </div> 141 </div> 142 {{--END-子元素--}} 143 <div class="form-group"> 144 <textarea name="videos" cols="30" rows="10">@{{videos}}</textarea> 145 </div> 146 </div> 147 <div class="panel-footer"> 148 <button class="btn btn-primary btn-sm" @click.prevent="add">添加视频</button> 149 </div> 150 151 152 </div> 153 154 </div> 155 <!-- /.box-body --> 156 157 <div class="box-footer"> 158 <button type="submit" class="btn btn-info">保存数据</button> 159 </div> 160 <!-- /.box-footer --> 161 </form> 162 </div> 163 164 <script> 165 require(['vue'],function (Vue) { 166 new Vue({ 167 el:'#app', 168 data:{ 169 videos:[{title:'',path:''}] 170 }, 171 methods:{ 172 add:function () { 173 this.videos.push({title:'',path:''}); 174 }, 175 del:function (k) { 176 this.videos.splice(k,1); 177 } 178 } 179 }); 180 }); 181 </script> 182 183 </section> 184 <!-- /.content --> 185 @endsection
第144行：一对多中多的那部分的数据是通过json到服务器的，然后添加到数据库
resources/views/admin/lesson/index.blade.php
1 @extends('admin.layout.master') 2 @section('title','课程页面') 3 @section('content') 4 <!-- Content Header (Page header) --> 5 <section class="content-header"> 6 <h1> 7 Dashboard 8 <small>Control panel</small> 9 </h1> 10 <ol class="breadcrumb"> 11 <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> 12 <li class="active">Dashboard</li> 13 </ol> 14 </section> 15 16 <!-- Main content --> 17 <section class="content"> 18 <div style="padding-bottom:15px;"> 19 <div class="btn-group" role="group" aria-label="..."> 20 <a href="/admin/lesson" type="button" class="btn btn-warning">课程列表</a> 21 <a href="/admin/lesson/create" type="button" class="btn btn-default">新增课程</a> 22 </div> 23 </div> 24 25 <div class="box box-primary"> 26 <div class="box-header with-border"> 27 <h3 class="box-title">Bordered Table</h3> 28 </div> 29 <!-- /.box-header --> 30 <div class="box-body"> 31 <div class="table-responsive" style="overflow: visible;min-height: 200px;"> 32 <table class="table table-hover"> 33 <tbody> 34 <tr class="info"> 35 <th style=" 10px">#</th> 36 <th>课程</th> 37 <th>视频数量</th> 38 <th>操作</th> 39 </tr> 40 @foreach($data as $d) 41 <tr> 42 <td>{{$d['id']}}.</td> 43 <td>{{$d['title']}}</td> 44 <td>{{$d->videos()->count()}}</td> 45 <td> 46 <div class="btn-group"> 47 <button type="button" class="btn btn-info">操作</button> 48 <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> 49 <span class="caret"></span> 50 <span class="sr-only">Toggle Dropdown</span> 51 </button> 52 <ul class="dropdown-menu" role="menu" style=""> 53 <li><a href="/admin/lesson/{{$d['id']}}/edit">编辑</a></li> 54 <li><a href="javascript:;" onclick="del({{$d['id']}})">删除</a></li> 55 </ul> 56 </div> 57 </td> 58 </tr> 59 @endforeach 60 61 </tbody> 62 </table> 63 </div> 64 65 </div> 66 <!-- /.box-body --> 67 <div class="box-footer clearfix"> 68 <ul class="pagination pagination-sm no-margin pull-right"> 69 <li><a href="#">«</a></li> 70 <li><a href="#">1</a></li> 71 <li><a href="#">2</a></li> 72 <li><a href="#">3</a></li> 73 <li><a href="#">»</a></li> 74 </ul> 75 </div> 76 </div> 77 78 </section> 79 <!-- /.content --> 80 <script> 81 function del(id){ 82 // require(['util'],function () { 83 // util.confirm('确定删除么？',function () { 84 // 85 // }); 86 // }); 87 if(confirm('确定删除么')){ 88 $.ajax({ 89 url:'/admin/lesson/'+id, 90 method:'DELETE', 91 success:function (response) { 92 location.reload(); 93 } 94 }); 95 } 96 } 97 </script> 98 @endsection
第44行：直接 {{$d->videos()->count()}}就可以得到课程视频数，毕竟$data获取的只是Lesson模型的数据：$data=Lesson::get();