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>

二、内容在总结中