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. Windows 下 nvm, node, npm 的下载、安装与配置

    主要解决的问题 下载安装完 nvm 和 node 后,缺失 npm 文件 执行 jasmine 等命令时提示「不是内部或外部命令...」及全局变量的设置 下载与安装 一.nvm github 下载地址 ...

  2. SVG学习之stroke-dasharray 和 stroke-dashoffset 详解

    本文适合对SVG已经有所了解,但是对stoke-dasharray和stroke-dashoffset用法有疑问的童鞋 第一:概念解释 1. stroke意思是:画短线于,在...上划线 2. str ...

  3. JavaWeb-用过滤器修改请求的返回状态码

    问题: 客户SDK对接服务,默认只识别200和非200的请求状态码.需要修改当前应用的状态码(如将201转为200) 解决方案:通过扩展HttpServletResponseWrapper,获取到每个 ...

  4. CentOS自动备份MySql

    1.确认Crontab是否安装 service crond startcrontab -l 2.编写备份脚本 cd mkdir backup cd backup vim auto.sh /usr/bi ...

  5. Unexpected token '...'. Expected a property name.

    原因:浏览器不支持 es6 扩展运算符  结论: 1.不用 ... 2. babel-polyfill对扩展运算符...搞的不是太好,要单独安装一个 plugin-proposal-object-re ...

  6. Shell中比较判断

    一.shell判断数组中是否包含某个元素:ary=(1 2 3)a=2if [[ "${ary[@]}" =~ "$a" ]] ; then    echo & ...

  7. django框架—终端命令

    创建一个虚拟环境:在虚拟环境中创建项目目录 cd到项目根目录 创建项目:django-admin startproject "项目名称" 创建app:python manage.p ...

  8. 初级文件IO——若干种文件共享操作 如何影响 文件文件描述符表

    同一进程共享操作相同的文件 在同一个进程中多次open打开同一文件时,文件描述符可能会相同吗? 答:不可能.在同一进程里面,一旦某个文件描述符被用了,在close释放之前,别人不可能使用,所以指向同一 ...

  9. web开发:javascript案例

    一.浮动与定位复习 二.小米菜单案例 三.轮播图 四.滚动轮播 一.浮动与定位复习 - 浮动与相对定位 ```js// 1.两者均参与布局// 2.主浮动布局, 相对布局辅助完成布局微调// 3.相对 ...

  10. Codeforces 1148 E - Earth Wind and Fire

    E - Earth Wind and Fire 思路: 栈模拟 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC opti ...