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>
二、內容在總結中