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-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前端模块化开发的更多相关文章
- JavaScript学习总结(六)——前端模块化开发
早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模 ...
- 前端模块化开发学习之gulp&browserify篇
随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...
- [整理]前端模块化开发AMD CMD
前端模块化开发的价值 AMD (中文版) CMD 模块定义规范 标准构建 http://seajs.org http://chaoskeh.com/blog/why-seajs.html http:/ ...
- JAVAScript:前端模块化开发
目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asy ...
- 前端模块化开发篇之grunt&webpack篇
几个月前写了一篇有关gulp和browserify来做前端构建的博客,因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候),所以这里再强烈推荐一款js打包工具-webp ...
- web前端学习路线:HTML5教程之前端模块化开发
1. 命名冲突 首先从一个简单的习惯开始. 由于以前一直做 JavaEE 开发的缘故,在 JavaScript 开发中,我已经习惯将项目中的一些通用功能抽象出来,形成一个个的独立函数,以便于实现代码复 ...
- 前端模块化开发的价值(seaJs)
随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...
- 【PC网站前端架构探讨系列】结合公司网站首页,谈前端模块化开发与网站性能优化实践
说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sy ...
- 前端模块化开发的规范:AMD与CDM
AMD, 异步模块定义. CMD,通用模块规范.
随机推荐
- html-proload
对基础与初始化进行预加载 加载顺序 document > preload > 正常加载 media 属性 不同设备时的响应式加载 - media="(max-width: 600 ...
- docker 第四篇 网络
安装docker以后自动添加三种网络方式 bridge: 表示桥接网络 (在本地自动创建一个软交换机) host: 表示让容器使用宿主机的网络名称空间 none: 表示没有网络 不能执行网络通信. 创 ...
- sql从n月到m月数据汇总,没有数据,当月显示0
做个备份 -- 按月份统计select date1, MONTHS, createtime, nvl(count2, 0)+count1 from ( SELECT TO_CHAR(ADD_MONTH ...
- ubuntu16.04中不能连接无线网络
安装完ubuntu desktop版之后,无线网络连接中没有出现当前可以连接的wifi列表. 直接插上网线之后,是可以上网的.但是还是不是很方便, 可以点击右上角的齿轮-->system set ...
- string::crbegin string::crend
const_reverse_iterator crbegin() const noexcept;功能:crbegin是最后一个字符,crend第一个字符的前一个.迭代器向左移动是“+”,向右移动是“- ...
- fiddler save files
使用fiddler 保存访问到的文件 使用jscript Fiddler Script 是用JScript.NET语言写的 JScript.NET 此语言可以调用C# api 参考地址:http:// ...
- intellij idea gradle 导入 spring 问题记录
环境: windows 7 oracle jdk 1.8 intellij idea 2019.3.1 spring-framework 5.1.22.RELEASE 步骤: 1: 下载解压sprin ...
- @WebServlet @WebListener @WebListener
- springboot的@Configuration文件读取static静态文件
错误 正确
- BZOJ 4562: [Haoi2016]食物链 拓扑排序
建反图,跑一个拓扑排序dp即可. Code: #include <bits/stdc++.h> #define ll long long #define N 100005 #define ...