legend3---11、php前端模块化开发
一、总结
一句话总结：
把常用的前端块（比如课程列表，比如评论列表）放进模块列表里面，通过外部php变量给数据，可以很好的实现复用和修改
页面调用 @php $lesson_list=$lessons; @endphp @include('home.module.lesson_list') lesson_list模块 {{--1、用php变量接收外部变量，在外部要把lesson数据赋值给$lesson_list--}} <div class="row"> @foreach($lesson_list as $lesson) <div class="col-md-3 col-xs-6"> <div class="choose_lesson_box" > <div class="choose_lesson_imgbox"> <a href="/lesson/{{$lesson['l_id']}}"> <img src="{{$lesson['l_preview']}}" style="max-width: 100%;" alt=""> </a> <a href="/lesson/{{$lesson['l_id']}}" class="choose_lesson_start_learn"> <span class="choose_lesson_start_learn_content"> 开始学习 </span> </a> </div> <div class="choose_lesson_info_box"> <div class="choose_lesson_info_box_author"> <span class="label label-info">范仁义</span> </div> <div class="choose_lesson_info_box_time"> <span class="label label-info">36课时</span> </div> </div> <div class="choose_lesson_title" style="text-align: center;margin-top: 5px;"> <a class="choose_lesson_title_a font_cut" style="display: inline-block;" href="/lesson/{{$lesson['l_id']}}"> {{$lesson['l_title']}} </a> <div style="display: none;">会员优惠：8元 <del><i>10元</i></del></div> <div class="video_interaction_box font_cut" style="font-size: 12px;width: 100%;"> {{--点赞--}} <div class="video_interaction_box_like" style="margin-right: 3px;"> <span style="@if(in_array($lesson['l_id'],$likeLessons_l_ids)) display:none; @endif" l_id="{{$lesson['l_id']}}" class="fa_like"> <i class="fa fa-thumbs-o-up fa-fw" aria-hidden="true"></i> <span>@if(in_array($lesson['l_id'],$likeLessons_l_ids)) {{$lesson['l_like']-1}} @else {{$lesson['l_like']}} @endif </span> </span> <span style="color: red;@if(!in_array($lesson['l_id'],$likeLessons_l_ids)) display:none; @endif" l_id="{{$lesson['l_id']}}" class="fa_like_no"> <i class="fa fa-thumbs-up fa-fw" aria-hidden="true"></i> <span>@if(in_array($lesson['l_id'],$likeLessons_l_ids)) {{$lesson['l_like']}} @else {{$lesson['l_like']+1}} @endif</span> </span> </div> {{--收藏--}} <div class="video_interaction_box_collect" style="margin-right: 3px;"> <span style="@if(in_array($lesson['l_id'],$collectLessons_l_ids)) display:none; @endif" l_id="{{$lesson['l_id']}}" class="fa_collect"> <i class="fa fa-heart-o fa-fw " aria-hidden="true"></i> <span>@if(in_array($lesson['l_id'],$collectLessons_l_ids)) {{$lesson['l_collect_num']-1}} @else {{$lesson['l_collect_num']}} @endif </span> </span> <span style="color: red;@if(!in_array($lesson['l_id'],$collectLessons_l_ids)) display:none; @endif" l_id="{{$lesson['l_id']}}" class="fa_collect_no"> <i class="fa fa-heart fa-fw" aria-hidden="true"></i> <span>@if(in_array($lesson['l_id'],$collectLessons_l_ids)) {{$lesson['l_collect_num']}} @else {{$lesson['l_collect_num']+1}} @endif </span> </span> </div> {{--浏览--}} <div class="video_interaction_box_click" style="margin-right: 0;"> <i class="fa fa-play-circle-o fa-fw" aria-hidden="true"></i> <span>{{$lesson['l_click']}}</span> </div> </div> <a href="/lesson/{{$lesson['l_id']}}"> <span class="splay" style="opacity: 0; margin-top: 105px;display: none;">开始学习</span> </a> </div> </div> </div> @endforeach </div> <script> //课程的点赞操作 $('.fa_like').click(function () { let l_id=$(this).attr('l_id'); let _this=$(this); //console.log(l_id); $.post("/like_lesson", {'l_id':l_id,'_token':'{{csrf_token()}}'} ,function (data) { console.log(data); if(parseInt(data.valid)==1){ _this.hide(); _this.parent().find('.fa_like_no').show(); layer_alert_success(data.message); }else{ layer_alert_fail(data.message); } }); }); //取消课程点赞操作 $('.fa_like_no').click(function () { let l_id=$(this).attr('l_id'); let _this=$(this); //console.log(l_id); $.post("/cancel_like_lesson", {'l_id':l_id,'_token':'{{csrf_token()}}'} ,function (data) { console.log(data); if(parseInt(data.valid)==1){ _this.hide(); _this.parent().find('.fa_like').show(); layer_alert_success(data.message); }else{ layer_alert_fail(data.message); } }); }); //课程的收藏操作 $('.fa_collect').click(function () { let l_id=$(this).attr('l_id'); let _this=$(this); //console.log(l_id); $.post("/collect_lesson", {'l_id':l_id,'_token':'{{csrf_token()}}'} ,function (data) { console.log(data); if(parseInt(data.valid)==1){ _this.hide(); _this.parent().find('.fa_collect_no').show(); layer_alert_success(data.message); }else{ layer_alert_fail(data.message); } }); }); //课程的取消收藏操作 $('.fa_collect_no').click(function () { let l_id=$(this).attr('l_id'); let _this=$(this); //console.log(l_id); $.post("/cancel_collect_lesson", {'l_id':l_id,'_token':'{{csrf_token()}}'} ,function (data) { console.log(data); if(parseInt(data.valid)==1){ _this.hide(); _this.parent().find('.fa_collect').show(); layer_alert_success(data.message); }else{ layer_alert_fail(data.message); } }); }); </script>
1、vue如何和jquery配合？
用vue给元素增加属性，jquery操作元素的时候根据属性来确定状态
2、为何在元素中的onclick方法要把this传到函数里面去？
不然默认函数里面的this指的是windows对象：button type="button" onclick="recent_not_do(this)" :question_return_state="question.bq_has_return" class="btn btn-warning recent_not_do"
3、vue的缺点？
交互操作反应有点慢，blade模板加上jquery的方式交互要快很多
4、字符串'false'的值是true还是false？
是true，所以这样写有问题：$has_no_cache=$question_list_box?'false':'true';
5、php中round和number_format保留指定小数位数的区别？
number_format一定会保留指定位的小数，小数位不够会补0
return number_format(200*100/1000,2);//结果20.00 return round(200*100/1000,2);//结果20.0
6、有些css不好实现的东西用js非常好实现？
转换思维非常重要：怎么简单怎么来
7、lavarel数据库查找别名操作？
$question_list=DB::table('user_questions as uq')->whereIn('uq_id', $userQuestions_ids)->select('uq.*')->get();
8、php中将对象转成数组？
直接利用json_encode加上json_decode方法即可
$question_list=json_encode($question_list); $question_list=json_decode($question_list,true);
9、同步和异步？
同步就是一个做完另外的才能做
异步就是多个可以同时一起做
10、页面加载的文件后面带版本是怎么回事？
其实就是在加载资源的时候给文件加上版本
require.config({ baseUrl: 'js/', paths: { jquery: 'lib/jquery-2.1.4', mCustomScrollbar:'lib/jquery.mousewheel', }, shim: { }, urlArgs: "v=" + (new Date()).getTime() }); 应该是js文件外面加 <script id="main"></script> <script type="text/javascript"> var js = document.getElementById('main'); js.src = 'main.js?v='+ new Date().getTime(); </script>
二、内容在总结中