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>

二、内容在总结中

 

legend3---11、php前端模块化开发的更多相关文章

  1. JavaScript学习总结(六)——前端模块化开发

    早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模 ...

  2. 前端模块化开发学习之gulp&browserify篇

     随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...

  3. [整理]前端模块化开发AMD CMD

    前端模块化开发的价值 AMD (中文版) CMD 模块定义规范 标准构建 http://seajs.org http://chaoskeh.com/blog/why-seajs.html http:/ ...

  4. JAVAScript:前端模块化开发

    目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asy ...

  5. 前端模块化开发篇之grunt&webpack篇

    几个月前写了一篇有关gulp和browserify来做前端构建的博客,因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候),所以这里再强烈推荐一款js打包工具-webp ...

  6. web前端学习路线:HTML5教程之前端模块化开发

    1. 命名冲突 首先从一个简单的习惯开始. 由于以前一直做 JavaEE 开发的缘故,在 JavaScript 开发中,我已经习惯将项目中的一些通用功能抽象出来,形成一个个的独立函数,以便于实现代码复 ...

  7. 前端模块化开发的价值(seaJs)

    随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...

  8. 【PC网站前端架构探讨系列】结合公司网站首页,谈前端模块化开发与网站性能优化实践

    说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sy ...

  9. 前端模块化开发的规范:AMD与CDM

    AMD, 异步模块定义. CMD,通用模块规范.

随机推荐

  1. react快速上手一(使用js语法,创建虚拟DOM元素)

    1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...

  2. datatable 写入excel 2007

    1 添加引用: NPOI NPOI.OOXML 2 private static void GenerateFile(DataTable dt) { DataSet ds = new DataSet( ...

  3. MFC基础笔记

    List Control // List Control初始化,下面代码需要放在OnInitDialog()函数里面// 设置扩展风格:正行选中 m_list.SetExtendedStyle(LVS ...

  4. 6.Cookie和Session

    /*会话*/ (开一个浏览器,访问几个web资源,然后关闭浏览器,这个过程为一个对话) /*保存*/会话数据的两种技术(cookie session) 1.Cookie (客户端技术)(数据保存在客户 ...

  5. java_day12_jdk1.8新特性

    1.接口的默认方法 Java 8允许我们给接口添加一个非抽象的方法实现,只需要使用default关键字即可,这个又叫做扩展方法 //Formula表示一个设计 计算公式 的接口 public inte ...

  6. 实时跟踪之TRACA

    背景: 目前,在实时跟踪领域存在着越来越多的先进方法,同时也极大地促进了该领域的发展.主要有两种不同的基于深度学习的跟踪方法:1.由在线跟踪器组成,这些跟踪器依赖网络连续的微调来学习目标的变化外观,精 ...

  7. STM32唯一ID(Unique Device ID)的读取方法

    每一个STM32微控制器都自带一个96位的唯一ID,也就是Unique Device ID或称为UID,这个唯一ID在任何情况下都是唯一的且不允许修改.    在开发过程中,可能需要用到这个UID,比 ...

  8. IntelliJ IDEA + Maven iml文件中依赖项的需求是什么?

    在Maven中,项目的依赖关系在pom.xml文件中指定.在IntelliJ IDEA中,即使对于Maven项目,相同的信息也存储在iml文件中.在两个地方有相同的信息需要什么? 当导入Maven项目 ...

  9. Vue学习日记(三)——Vue路由管理vue-router

    前言 为了给读者更好的体验,去理解vue-router和下一篇介绍vuex,决定还是来一个实战教程来带大家更加的去深入理解vue-router,在这之前,读者先自行了解和去官网下载npm和node,附 ...

  10. Java笔记(基础第一篇)

    一.初识java 1.Java是一种可以编写跨平台的.面向对象的程序设计语言. Java开发分成以下3个方向: (1). java SE:主要用于桌面程序的开发.是java EE和java ME的基础 ...