- 博客(55)
- 收藏
- 关注
RSS订阅
转载 laravel 使用 redis 队列推送消息
场景：人数增多，后台直接循环推送消息卡死，存储到 redis 队列中执行基础操作：查看队列信息例：keys * ->"queues:WalletReportJob" (获取 key)typequeues:WalletReportJob (获取类型) -> listlrange queues:WalletReportJob 0 12 -> 查询列表 12 条数据...
2019-05-16 11:38:01
1980
原创 vue 中添加全局轮询消息刷新
场景：后台有消息更新，但不会主动推送给前端，需要前端实时刷新，获取最新的消息提示 思路：后台每个页面通常都会有 layout 组件，我这里写在 header.vue 中，只要登录成功，进入 header 相关页面，就开始执行定时器，退出登录，清除定时器，上代码在 mounted 中编写代码，采用 hook 写法，在同一个地方编写，逻辑较为清晰，完毕......
2022-06-29 14:13:58
910
转载 防抖和节流
1.防抖简单理解，用户频繁点击某个按钮，重复触发点击事件（用户手抖了），这时我们要防止这种无意义的点击，需要进行防抖处理2.节流简单理解，字面意思，控制水流，通过一个节流阀，控制一定时间内开关阀门区别：防抖和节流都是降低频率，但是也有区别，核心都是通过 setTimeOut 去实现应用场景：防抖可以用于搜索框，当用户输入停下来的时候，才进行搜索，而不是用户一直输入，一直搜索节流可以用于鼠标 icon 定位等，鼠标在移动中，鼠标的 icon 不停进行相关定位，.
2021-12-27 14:59:11
491
原创 vue 生命周期疏理
目录创建生命周期beforeCreatecreatedbeforeMountmounted运行生命周期beforeUpdateupdated销毁生命周期beforeDestroydestroyed创建生命周期创建期间有四个生命周期钩子beforeCreate第一个钩子函数，此时只是 init 了一些基本的钩子函数， data 属性和 methods 里面的方法都还未初始化created第二个钩子函数，此时是最早可以调用 data 和
2021-07-09 10:18:01
110
原创 背景处理 background
目录背景图片背景重复背景滚动背景位置背景尺寸背景图片可以使用 png| gif |jpeg 等图片做为背景使用background-image: url(icon-s.jpg);背景重复background-repeat: repeat-y 选项 说明 repeat 水平、垂直重复 repeat-x 水平重复 repeat-y
2021-07-01 12:00:24
210
原创 flex-grow、flex-shrink、flex-basis
目录flex-basisflex-growflex-shrinkflex在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面讲的是父元素，指以flex布局的元素(display:flex))快速记住这三个属性：flex-basis首先是flex-basis，basis英文意思是<主要成分>，所以他和 width 放在一起时,肯定把 width 干掉，basis 遇到 width 时就会说我...
2021-07-01 11:34:09
781
原创 a 链接多种用法
<a href="http://www.baidu.com" target="_blank">网站</a> <a href="mailto:28660@qq.com">邮箱</a> <a href="tel:13183888888">电话</a>可以分别打开 网站，邮箱，电话
2021-07-01 11:13:32
176
原创 行级和块级、行内块元素的区别
行级元素不能设置宽高 默认不换行，从左到右排列块级元素可以设置宽高 默认换行，从上到下排列行内块元素可以设置宽高 默认不换行，从左到右排列总结：带有行字的，就是从左到右排列 带有块字的，就是可以设置宽高 例（行内块元素，就是可以设置宽高，从左到右排列） 三种类型是可以互相转换的，使用 display 属性...
2021-07-01 11:10:32
105
原创 块级元素和内联元素
目录常见块级元素(block element)常见内联元素(inline element)常见块级元素(block element)h1-h6tabletrformdivpolullipremenuaddress常见内联元素(inline element)abiuimgspanlabelinputtextareaemstrong...
2021-07-01 11:02:45
69
原创 echarts-demo
项目地址：https://heyuanjun.github.io/练习 demo，欢迎参观有疑问可以提出来，大家交流交流
2021-06-24 15:08:45
101
原创 cellpadding 和 cellspacing
这两个参数都是html中table标签的参数。cellpadding 是边框与其内容的间隙大小；cellspacing 是边框与边框之间的间隙大小；
2021-06-16 15:08:30
872
滚动条 overflow
div { border: 1px solid red; width: 300px; height: 100px; overflow: scroll;}// overflow: hidden; 超出隐藏// overflow: scroll; 添加滚动条// overflow: auto; 超出滚动条，不超出自动显示
2021-06-16 14:48:07
94
原创 字符溢出省略 ellipsis
div { width: 200px; height: 50px; border: 1px solid; white-space: nowrap; // 不换行 overflow: hidden; // div 溢出隐藏 text-overflow: ellipsis; // 文本省略加点}a { text-decoration: none;}
2021-06-16 14:46:56
90
原创 CSS 选择器
元素选择器h1, h2, div { color: red; } ＊直接写上标签元素的名称，逗号表示作用于多个元素类选择器<div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7.
2021-06-16 14:42:55
75
原创 Grid 网格布局疏理学习
网格线1.grid-column-start 蓝色网格左侧网格线起始位置2.grid-column-end 蓝色网格右侧网格线起始位置3.span 关键字（跨越）即左右边框（上下边框）之间跨越多少个网格。可以看作网格线的位置，例：grid-column-start：2；grid-column-end：5；表示起始位置为 第 2列 的垂直网格线，到第 5列的垂直网格线！如果使用 span，可以写作：grid-column-start: 2;grid-co...
2021-05-13 17:55:28
315
原创 子 div 在父 div 中完全居中
1.Flexbox 布局a.第一种，justify-content（横轴居中），align-items（元素容器居中）<form action=""> <div id="div1"> <div id="div2"> </div> </div></form>#div1 { border: 1px solid; width: 100px; height: 100px;
2021-05-13 10:29:50
620
转载 Flexbox 疏理学习
原文链接: [教程](http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html)1.Flexbox（弹性布局）a.使用弹性布局默认不会改变元素的宽度b.弹性布局默认左对齐c.弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度2.flex-growa.拉伸元素宽度，默认为 0，不拉伸，设置为 1 表示占据当前行的所有剩余宽度b.可以设置为 0-1 之间的小数3.
2021-05-12 14:53:17
93
原创 laradock php多版本容器共存
场景：不同项目需要用到不同版本的 php，这里以 php5.6 举例1.进入到 laradock 目录，执行如下命令cp -r php-fpm php-fpm-562.进入到 docker-compose.yml 文件，复制一份 php-fpm3.修改 nginx/site 中项目配置文件，在 laradock 目录下，cd nginx/sites，我这里以自己创建的 basis.conf 举例4.docker-compose stop && docker-co
2021-02-03 15:41:19
1036
原创 laravel8+dingo+jwt 完整使用记录
全手打，给自己加深印象，用到的朋友点个赞支持下1.安装配置 jwtcomposer require dingo/api:1.0.x@deva.引入成功后，在 config/app.php 的 providers 中配置 provider /* * Package Service Providers... */ Tymon\JWTAuth\Providers\LaravelServiceProvider::class,b
2021-01-22 10:14:35
1146
4
原创 Mac 下面 laradock + phpstorm x-debug 完整记录
电脑：macbook prophp 版本：7.3环境：laradock步骤如下：1.根据 laradock 官网指导1-首先安装xDebug在Workspace和PHP-FPM容器中：a）打开.env文件b）WORKSPACE_INSTALL_XDEBUG在Workspace容器下搜索参数c）将其设置为trued）PHP_FPM_INSTALL_XDEBUG在PHP-FPM容器下搜索参数e）设置它至true2-重建容器docker-compose build worksp.
2020-12-24 14:09:10
190
转载 Mysql Group by 42000(1055) 的错误
背景：将代码部署到服务器以后，点击网站搜索，遇到大量ERROR 1055 (42000): Expression #3 of SELECT list is not in GROUP BY clause and contains nonaggregated column ‘imooc.s.type_name’ which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql
2020-09-15 14:42:39
460
转载 导入/导出
一、export 导出export default 是默认导出export const 是命名导出module.exports与exports，export与export default之间的关系和区别Node应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即
2020-06-09 13:26:43
815
转载 slot 插槽
基本使用在子组件标签中插入相应代码即可<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>示例</title></head><body> <div id="app"> <child-component> <p>分发的内容<
2020-06-09 13:09:48
402
原创 组件化开发
全局组件（Vue.component）组件可以在多个 Vue 实例中使用<script> // 1.创建组件构造器对象 const cop = Vue.extend({ template: ` <div> <h2> 我是标题 </h2> <p> 我是...
2020-06-08 19:32:53
114
原创 数组中哪些方法是响应式的
.push往数组中添加元素const arr = ['a', 'b', 'c']arr.push('d');通过索引直接修改值，不能做到响应式const arr = ['a', 'b', 'c']arr[0] = 'd';// 可以通过 splicearr.splice(0, 1, 'd')// 也可以通过 vue 自带的 setVue.set(arr, 0, 'd').pop删除数组中最后一个元素const arr = ['a', 'b', 'c.
2020-06-07 23:02:05
222
原创 条件判断
v-if<span v-if="true"> 我叫</span><span v-if="false"> MT</span>v-if v-else<span v-if="true"> 我叫</span><span v-else> MT</span>v-if v-else-if v-else<span v-if="a > 1">
2020-06-07 19:47:01
166
原创 事件监听
点击事件v-on<button id="app" v-on:click="add"> 点击</button<script> let app = new Vue({ el: '#app', methods: { add() { console.log('add+'); } }})</script>语法糖替换 v-on 为 @ 即可
2020-06-07 19:40:37
116
原创 对象字面量增强写法
对象字面量const obj = {} // {} 表示字面量属性增强写法// ES5const name = 'kobe';const age = 18;const height = 1.88;const obj = { name: name, age: age, height: height}// ES6const name = 'kobe';const age = 18;const height = 1.88;const obj = {
2020-06-07 19:11:51
174
原创 let/var/const
作用域代码在什么范围内可以使用，当作用域不存在的时候，会引起很多问题，例如，变量和方法命名冲突，判断条件内，变量问题var用于定义变量，但是不存在作用域let可以看作 var 的完善，也用来定义变量，但是有块级作用域...
2020-06-07 16:42:31
124
原创 创建 Vue 时的 options
el定义元素，绑定元素data定义属性相关computed一般命名为名词，意思表示计算属性，并且计算属性多次使用只会调用一次，性能较高computed: { totalPriceL: function(){ return 1 + 2; } }methods定义各种方法，每次都会重复调用...
2020-06-07 16:11:20
178
原创 v-bind 使用
绑定属性将你要绑定的属性前面添加上 v-bind，表示这个属性会绑定一个变量<img v-bind:stc="imgURL" alt=""> <a v-bind:href="aHref">a</a>语法糖在需要绑定的属性前面加上 冒号 即可<a :href="aHref">a</a>动态绑定 classv:bind::class 等于 ngClass<h2 :class="{'active':..
2020-06-07 16:07:51
522
原创 指令
Mustache{{}} 双大括号语法，将 data 中的数据，插入到 html 中v-once模板只响应一次，后续不进行变更v-for和 ngFor 类似v-html自动转化为 html 代码，将标签展示出来v-text将 html 代码展示为文本代码，一般使用较少，不够灵活<h2 v-text="message"></h2>v-pre将内容原方不动展示出来，注意双括号也会原样展示，类似 angul...
2020-06-07 16:06:24
655
原创 第二章 - 组件
目录1.组件2.组件的生命周期1.constructor 不会初始化输入属性的值2.ngOnChanges 当一个父组件修改或者初始化子组件的输入属性时被调用2.ngOnInit 初始化组件和指令3.ngOnChanges 会在每一次变更检测以后，都会被调用，所以在使用的时候，一定需要简洁，高效4.nfAfterViewInit 会在视图初始化完毕以后，只会调用一...
2020-04-13 11:52:30
140
转载 第三章 - Subject 和 Observable 理解
1.Observable 已经有初步理解了，就是一个可观察的对象，简而言之就是可以被订阅的一个事件流，亦或是数据流2.subject 既是一个观察者，也是一个可观察的对象。网上看到一段释义觉得很贴切，在此引用一下。可以将 Subject 看作是微信公众号，Observable 是微信用户来理解，分三步拆解。1.new 一个 subject 的时候，subject 内部清单是空...
2020-04-05 12:23:02
824
原创 第二章 - Observable 的性质
next，error，complete 既是特性，也是参数任何 Observable 都有这三种状态，但是并不是所有 subscribe，这三种状态都会达到next对订阅到的数据流进行处理时的需要用到的参数error处理错误异常时需要用到的参数complete数据流结束时需要用到的参数例： this.HttpService$.getNewsList(l...
2020-04-04 21:33:03
158
原创 第一章 - 理解 RxJS 与 常见操作符
1.Rx 的关键是要把任何变化想象成事件流，也叫数据流2.Rx 加入了时间指向，将任何变化看成时间轴的流动3.Rx 是一个特殊的观察者4.Rx 会主动将数据推给你，并不像传统数据，你要去拉取。Rx 当中，你只要监听订阅就可以了map释义：1.map 在 js 和 lodash 中，是对(Array | Object) 进行遍历，并返回每个元素处理后的结果2.map 在...
2020-04-04 20:39:57
222
原创 interface & 泛型
// 接口： 只声明结构，不需要实现（有数据结构需要约束，这个时候就可以用接口）interface Person { firstName: string; lastName: string;}function greeting(person: Person) { console.log(person)}greeting({'firstName': '六', 'lastNa...
2020-03-28 13:48:21
1574
原创 typescript 特性
ts 是 js 的一个超集，兼容 js 代码，并且包含了 es6 的特性1.类型注解ts 是强类型检测，声明变量的同时，需要指定变量的类型例：let name = 'tom' // 类型推论 （如果值已经赋值，那么不需要明确指定他的类型，会根据值自动判断）let name: string；// 类型注解（指定变量类型，会通过静态类型检测检测变量）...
2020-03-28 13:45:19
314
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人