后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 项目src文件夹下的main.js入口文件中 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' V…

后盾网lavarel视频项目---4.lavarel和vue都是{{}}表示变量,如何解决冲突 一.总结 一句话总结: @{{videos}}:@符号表示lavarel不处理:textarea name="" id="" cols="30" rows="10">@{{videos}}</textarea 1.homestead如何查看php扩展? php -m 2.lavarel模型操作数据库表时哪些方法可以使用?…

后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',path:''}],增加操作:this.videos.push({title:'',path:''});,删除操作:this.videos.splice(k,1); 本质是:通过[控制变量中元素的个数来控制页面中元素的个数],增加删除操作都是[通过操作变量中元素的个数] 1.向vue中的videos变量增…

后盾网lavarel视频项目---5.淘宝镜像cnpm的原理及如何使用 一.总结 一句话总结: 原理:把npm上面的所有软件copy过来 使用:npm install -g cnpm --registry=https://registry.npm.taobao.org : cnpm install vue 1.phpstorm如何安装插件(比如主题,bootstrap的那种快捷引入元素等)? File>settings>Plugins:在这个界面搜索想要的主题即可,然后安装,非常方便 2.ph…

后盾网lavarel视频项目---lavarel多表关联一对多操作实例 一.总结 一句话总结: 1.一对多中多那个部分的数据前端通过json弄到服务器 2.所有通过一操作多的时候,都要用上模型中定义的那个方法:$lesson->videos()->create($video); 1.页面直接通过一对多中的一找到多的数量? 控制器中:$data=Lesson::get(); 视图中:{{$d->videos()->count()}} 控制器中 public function inde…

后盾网lavarel视频项目---vue-axios基本用法 一.总结 一句话总结: 都是npm安装,然后import引入vue,然后按手册使用就好了,很简单 二.vue-axios基本用法 转自或参考:vue-axios基本用法https://www.cnblogs.com/silent007/p/8603367.html 首先安装axios: 1):npm install 2):npm install vue-axios --save 3):npm install qs.js --save…

后盾网lavarel视频项目---1.数据迁移 一.总结 一句话总结: 1.lavarel的数据迁移比较简单,就是用php来创建数据表 2.创建迁移文件:php artisan make:migration create_hd_table --create=hd 3.将迁移文件创建为表:php artisan migrate 1.安装barryvdh/laravel-ide-helper增加代码提示:https://packagist.org中搜barryvdh? 1.composer requ…

后盾网lavarel视频项目---phpstorm 配置ftp, 自动更新同步代码 一.总结 一句话总结: 1.在phpstorm中设置:路径Tools/Deployment/Configuration 2.是将代码同步到远程的ftp服务器上面去:配置ftp 3.还可以在option里面设置Automatic Upload(always) 1.phpstorm 配置ftp自动更新同步代码的作用? 方便代码更新,方便多人同步开发 二.phpstorm 配置ftp, 自动更新同步代码 (亲测完美)…

后盾网lavarel视频项目---lavarel中的tinker是什么 一.总结 一句话总结: 是用来调试laravel,可以打印变量或对象信息,显示函数代码,对数据库写入和查询数据 laravel中tinker命令的作用是用来调试laravel,可以打印变量或对象信息,显示函数代码,对数据库写入和查询数据 1.tinker命令的启动方式是什么? php artisan tinker,运行后出现的提示符为tinker的提示符 2.tinker中查看帮助命令? php artisan tinker…

后盾网lavarel视频项目---lavarel用户认证实例 一.总结 一句话总结: 主要是用的Auth认证,所以配置是配置的auth(config/auth.php),控制器中调用也是用的Auth(use Auth;) 控制器核心代码 //用户认证 $status=Auth::guard('admin')->attempt([ 'username'=>$request->input('username'), 'password'=>$request->input('pass…

后盾网lavarel视频项目---模型一对多关联简单实例 一.总结 一句话总结: 在模型中定义一个方法来设置一对多关联:return $this->hasMany(Video::class); <?php namespace App\Model; use Illuminate\Database\Eloquent\Model; class Lesson extends Model { /** * 与视频表模型的一对多关联 * @return \Illuminate\Database\Eloque…

后盾网lavarel视频项目---图片上传 一.总结 一句话总结: 前端还是普通的前端操作,前端上传图片的地址就是图片上传的路由,后端代码也很简单 public function uploader(Request $request){ $upload = $request->file; if ($upload->isValid()) { $path = $upload->store(date('ym'), 'attachment'); //message是上传成功的url地址 retur…

后盾网lavarel视频项目---3.lavarel中子控制器继承父控制器以判断是否登录 一.总结 一句话总结: 在common控制器的构造方法中验证登录中间件,其它的控制器继承common控制器 public function __construct() { //验证用户是否登录 $this->middleware('admin.auth'); } 1.jquery自动传递csrf的token字段? 在页头创建csrf-token的meta标签,在页尾用ajaxSetup设置token的值 X…

后盾网lavarel视频项目---lavarel使用模型进行增删改查操作 一.总结 一句话总结: 使用模型操作常用方法 查一条:$model=Tag::find($id); 删一条:Tag::destroy($id); 查全部:$data=Tag::get(); 增加:$model->create($request->all()); 1.资源路由器操作处理的动作.URL.行为.路由名称? 看手册喽,修改和增加用的是两个,一个是get显示界面,一个是处理逻辑 动作 URI 行为 路由名称 GET…

后盾网lavarel视频项目---Laravel 安装代码智能提示扩展「laravel-ide-helper」 一.总结 一句话总结: laravel-ide-helper作用是:代码提示 laravel-ide-helper安装:github项目里面怎么使用说的很详细 1.安装barryvdh/laravel-ide-helper:https://packagist.org中搜barryvdh? 1.composer require --dev barryvdh/laravel-ide-hel…

后盾网lavarel视频项目---laravel 使用laracasts/flash插件提示信息 一.总结 一句话总结: laracasts/flash插件的效果就是一个弹出的boostrap模块框,你自己也可以写,只不过他给你做好了 使用的话就照着github上面的文档示例结合搜索的实例,还是比较简单的 1.控制器中如何使用laracasts/flash插件? flash方法和overlay方法:flash('密码修改成功')->overlay(); //修改密码 public functio…

后盾网lavarel视频项目---2.phpstorm显示类中的方法快捷键 一.总结 一句话总结: ctrl + f12 1.npm安装js插件? npm install hdjs 2.phpstorm文档注释快捷键? *生成注释,输入”/**“,按”enter“键即可出现对应注释内容. 3.phpstorm打开最近文件快捷键(非常好用)? ctrl+e 4.phpstorm中ctrl+f12(非常好用)? 显示类中的方法 5.return redirect('/admin/login')->w…

后盾网lavarel视频项目---页面post方式提交之后动态弹出错误信息 一.总结 一句话总结: 1.思路和我想的一样,有错误的时候弹出提示错误消息的模态框就好,没有错误的时候不管它 2.把模态框的弹出放在页面加载完之后:$(function(){ $('#model_message').modal('show'); }); 1.在一个视图中引入另外一个视图用什么方法? 在一个视图中引入另外一个视图就是include方法:@include('admin.layout.message') 2.自…

后盾网lavarel视频项目---lavarel中间件(使用中间件拦截没登录的用户) 一.总结 一句话总结: 1.中间件中验证用户是否登录:if(!Auth::guard('admin')->check()){ 2.注册中间件(在kernel的路由中间件中注册):protected $routeMiddleware = ['admin.auth'=>AdminMiddleware::class, 3.控制器中使用中间件(控制器的构造方法中):$this->middleware('admi…

问题概览: 有一个小型单页应用项目,嫌用组件式调用vue-swiper麻烦,因此以CDN的方式调用swiper,结果轮播的图不动了! 爬了半天百度和谷歌都无解决方案,最后曲线救国的方式解决了问题. 解决方法: 在创建swiper时为其设置一个定时器即可解决问题! bottleLineMove = () => { setTimeout(() => { this.bottleSwiperOne = new Swiper('#bottleLineOne', { loop: true, slidesP…

主要原因:dom解析准备完成后,开始执行$(document).ready(); 而vue是在window.onload(页面加载完后才执行):所以会导致owlCarousel插件失效. 解决方案:数据渲染后,更新dom:再调用插件.(vue的 this.$nextTick可以更新dom) 1.引入owlCarousel插件,vue,jq (function ($) { new Vue({ el: '#owl-demo1', data:{ aboutData:[], getRouteUrl: '…

有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div c…

网上找了很多,最后还是官网最完整. https://github.com/surmon-china/vue-awesome-swiper 安装: 1.npm install vue-awesome-swiper --save 2.全局安装 在main.js中 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper…

项目需求介绍: 1.页面图文混排, 2.点击图片后全屏展示图片,并在底部显示文字,如果没有则不显示 3.关闭全屏后依然停留在上次浏览的位置 4.浏览图片时,不管点击的哪张图片,全屏展示的时候也要显示这一张 以下是所有需要引用的文件,其中只有 reset.css,swiperM.css,swiperVue.js  是自己写的 <link rel="stylesheet" href="reset.css"><link rel="stylesh…

关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便各位可以快速看懂实现方式. 一.看看功能效果(动态图): 二.案例需要实现的效果 提供一段视频信息的json数据,Js根据数据,动态生成swiper的视频轮播(一般功能性比较强的碎片区块,比较建议使用json+js来动态生成dom) 视频处在未播放时,每4秒进行一次从右向左轮播一屏,自动切换视频.…

首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.github.io/vip.github.io/index.html 目前视频网站已经实现了前台页面所有数据从后台数据库的读取,由于Github上面只能查看到静态的页面,对于动态网站还是不支持的,这个等待后期网站全部写完后,会把所有代码一并上传,如果觉得不错的话,可以到Github上面支持一下. 声明:前台页…

https://surmon-china.github.io/vue-awesome-swiper/ 第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper)   在组件中使用插件 <swiper :options="swiperOpti…

效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-certify{ /*上下左右居中*/ height: 100%; width: 100%; .centerPosition { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -o-transform:…

本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和资源分享. 写在前面 每一篇文章都希望您有所收获,每一篇文章都希望您能静下心来浏览.阅读.每一篇文章都是作者精心打磨的作品. 如果您觉得杨戬这个小白还有点东西的话,杨戬希望正在看文章的您可以帮忙点亮那个点赞的按钮(效果更加),对于杨戬这个暖男来说,真的真的非常重要,这将是我持续写作的动力. 前言 写…

广告轮播条播放 if (mHandler == null) {//在此初始化mHandler , 保证消息不重复发送 mHandler = new Handler() { public void handleMessage(android.os.Message msg) { int currentItem = mViewPager.getCurrentItem(); if (currentItem < mTopNewsList.size() - 1) { currentItem++; } els…