legend3---11、php前端模块化开发

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- 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; 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>

二、内容在总结中