<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[saber_H的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/saber_H</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; saber_H]]></copyright><item><title><![CDATA[macos M1 pro 使用 drupal 慢]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/127592878</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/127592878</guid><author>saber_H</author><pubDate>Sat, 29 Oct 2022 22:01:41 +0800</pubDate><description><![CDATA[macos M1 pro 使用 drupal 慢，卡顿]]></description><category></category></item><item><title><![CDATA[vue 中添加全局轮询消息刷新]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/125520834</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/125520834</guid><author>saber_H</author><pubDate>Wed, 29 Jun 2022 14:13:58 +0800</pubDate><description><![CDATA[场景：后台有消息更新，但不会主动推送给前端，需要前端实时刷新，获取最新的消息提示 思路：后台每个页面通常都会有 layout 组件，我这里写在 header.vue 中，只要登录成功，进入 header 相关页面，就开始执行定时器，退出登录，清除定时器，上代码


在 mounted 中编写代码，采用 hook 写法，在同一个地方编写，逻辑较为清晰，完毕......]]></description><category></category></item><item><title><![CDATA[防抖和节流]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/122171840</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/122171840</guid><author>saber_H</author><pubDate>Mon, 27 Dec 2021 14:59:11 +0800</pubDate><description><![CDATA[1.防抖

简单理解，用户频繁点击某个按钮，重复触发点击事件（用户手抖了），这时我们要防止

这种无意义的点击，需要进行防抖处理

2.节流

简单理解，字面意思，控制水流，通过一个节流阀，控制一定时间内开关阀门

区别：





防抖和节流都是降低频率，但是也有区别，核心都是通过 setTimeOut 去实现



应用场景：

防抖可以用于搜索框，当用户输入停下来的时候，才进行搜索，而不是用户一直输入，一直搜索

节流可以用于鼠标 icon 定位等，鼠标在移动中，鼠标的 icon 不停进行相关定位，.]]></description><category></category></item><item><title><![CDATA[vue 生命周期疏理]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/118599557</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/118599557</guid><author>saber_H</author><pubDate>Fri, 09 Jul 2021 10:18:01 +0800</pubDate><description><![CDATA[目录

创建生命周期

beforeCreate

created

beforeMount

mounted

运行生命周期

beforeUpdate

updated

销毁生命周期

beforeDestroy

destroyed

创建生命周期

创建期间有四个生命周期钩子

beforeCreate


第一个钩子函数，此时只是 init 了一些基本的钩子函数， data 属性和 methods 里面的方法都还未初始化


created


第二个钩子函数，此时是最早可以调用 data 和 ]]></description><category></category></item><item><title><![CDATA[背景处理 background]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/118383413</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/118383413</guid><author>saber_H</author><pubDate>Thu, 01 Jul 2021 12:00:24 +0800</pubDate><description><![CDATA[目录

背景图片

背景重复

背景滚动

背景位置

背景尺寸

背景图片


可以使用 png| gif |jpeg 等图片做为背景使用

background-image: url(icon-s.jpg);


背景重复


background-repeat: repeat-y



			选项
			
			
			说明
			
		
			repeat
			
			
			水平、垂直重复
			
		
			repeat-x
			
			
			水平重复
			
		
			repeat-y]]></description><category></category></item><item><title><![CDATA[flex-grow、flex-shrink、flex-basis]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/118382732</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/118382732</guid><author>saber_H</author><pubDate>Thu, 01 Jul 2021 11:34:09 +0800</pubDate><description><![CDATA[目录

flex-basis

flex-grow

flex-shrink

flex

在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。

(注意：这三个属性都是在子元素上设置的，下面讲的是父元素，指以flex布局的元素(display:flex))

快速记住这三个属性：



flex-basis


首先是flex-basis，basis英文意思是&lt;主要成分&gt;，所以他和 width 放在一起时,肯定把 width 干掉，basis 遇到 width 时就会说我...]]></description><category></category></item><item><title><![CDATA[a 链接多种用法]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/118382142</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/118382142</guid><author>saber_H</author><pubDate>Thu, 01 Jul 2021 11:13:32 +0800</pubDate><description><![CDATA[&lt;a href="http://www.baidu.com" target="_blank"&gt;网站&lt;/a&gt;
  &lt;a href="mailto:28660@qq.com"&gt;邮箱&lt;/a&gt;
  &lt;a href="tel:13183888888"&gt;电话&lt;/a&gt;

可以分别打开 网站，邮箱，电话


]]></description><category></category></item><item><title><![CDATA[行级和块级、行内块元素的区别]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/118381932</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/118381932</guid><author>saber_H</author><pubDate>Thu, 01 Jul 2021 11:10:32 +0800</pubDate><description><![CDATA[行级元素


不能设置宽高
	默认不换行，从左到右排列


块级元素


可以设置宽高
	默认换行，从上到下排列


行内块元素


可以设置宽高
	默认不换行，从左到右排列


总结：


带有行字的，就是从左到右排列
	带有块字的，就是可以设置宽高
	例（行内块元素，就是可以设置宽高，从左到右排列）
	三种类型是可以互相转换的，使用 display 属性

...]]></description><category></category></item><item><title><![CDATA[块级元素和内联元素]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/118381632</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/118381632</guid><author>saber_H</author><pubDate>Thu, 01 Jul 2021 11:02:45 +0800</pubDate><description><![CDATA[目录

常见块级元素(block element)

常见内联元素(inline element)

常见块级元素(block element)




h1-h6
table
tr
form
div
p
ol
ul
li
pre
menu
address

常见内联元素(inline element)




a
b
i
u
img
span
label
input
textarea
em
strong


...]]></description><category></category></item><item><title><![CDATA[echarts-demo]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/118188689</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/118188689</guid><author>saber_H</author><pubDate>Thu, 24 Jun 2021 15:08:45 +0800</pubDate><description><![CDATA[项目地址：https://heyuanjun.github.io/

练习 demo，欢迎参观

有疑问可以提出来，大家交流交流
]]></description><category></category></item><item><title><![CDATA[cellpadding 和 cellspacing]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/117958080</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/117958080</guid><author>saber_H</author><pubDate>Wed, 16 Jun 2021 15:08:30 +0800</pubDate><description><![CDATA[这两个参数都是html中table标签的参数。

cellpadding 是边框与其内容的间隙大小；

cellspacing 是边框与边框之间的间隙大小；





]]></description><category></category></item><item><title><![CDATA[滚动条 overflow]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/117958052</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/117958052</guid><author>saber_H</author><pubDate>Wed, 16 Jun 2021 14:48:07 +0800</pubDate><description><![CDATA[div {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  overflow: scroll;
}

// overflow: hidden; 超出隐藏
// overflow: scroll; 添加滚动条
// overflow: auto; 超出滚动条，不超出自动显示


]]></description><category></category></item><item><title><![CDATA[字符溢出省略 ellipsis]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/117958016</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/117958016</guid><author>saber_H</author><pubDate>Wed, 16 Jun 2021 14:46:56 +0800</pubDate><description><![CDATA[div {
  width: 200px;
  height: 50px;
  border: 1px solid;
  white-space: nowrap; // 不换行
  overflow: hidden; // div 溢出隐藏
  text-overflow: ellipsis; // 文本省略加点
}

a {
  text-decoration: none;
}


]]></description><category></category></item><item><title><![CDATA[CSS 选择器]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/117957720</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/117957720</guid><author>saber_H</author><pubDate>Wed, 16 Jun 2021 14:42:55 +0800</pubDate><description><![CDATA[元素选择器

h1, h2, div { color: red; } ＊直接写上标签元素的名称，逗号表示作用于多个元素



类选择器

&lt;div class="box"&gt; &lt;div&gt;1&lt;/div&gt; &lt;div&gt;2&lt;/div&gt; &lt;div&gt;3&lt;/div&gt; &lt;div&gt;4&lt;/div&gt; &lt;div&gt;5&lt;/div&gt; &lt;div&gt;6&lt;/div&gt; &lt;div&gt;7.]]></description><category></category></item><item><title><![CDATA[Grid 网格布局疏理学习]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/116751294</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/116751294</guid><author>saber_H</author><pubDate>Thu, 13 May 2021 17:55:28 +0800</pubDate><description><![CDATA[网格线


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...]]></description><category></category></item><item><title><![CDATA[子 div 在父 div 中完全居中]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/116718368</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/116718368</guid><author>saber_H</author><pubDate>Thu, 13 May 2021 10:29:50 +0800</pubDate><description><![CDATA[1.Flexbox 布局

a.第一种，justify-content（横轴居中），align-items（元素容器居中）


&lt;form action=""&gt;
  &lt;div id="div1"&gt;
    &lt;div id="div2"&gt;
      
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;


#div1 {
  border: 1px solid;
  width: 100px;
  height: 100px;
  ]]></description><category></category></item><item><title><![CDATA[Flexbox 疏理学习]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/116706675</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/116706675</guid><author>saber_H</author><pubDate>Wed, 12 May 2021 14:53:17 +0800</pubDate><description><![CDATA[原文链接: [教程](http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html)

1.Flexbox（弹性布局）


a.使用弹性布局默认不会改变元素的宽度

b.弹性布局默认左对齐

c.弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度


2.flex-grow


a.拉伸元素宽度，默认为 0，不拉伸，设置为 1 表示占据当前行的所有剩余宽度

b.可以设置为 0-1 之间的小数


3.]]></description><category></category></item><item><title><![CDATA[laradock php多版本容器共存]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/113584690</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/113584690</guid><author>saber_H</author><pubDate>Wed, 03 Feb 2021 15:41:19 +0800</pubDate><description><![CDATA[场景：不同项目需要用到不同版本的 php，这里以 php5.6 举例

1.进入到 laradock 目录，执行如下命令


cp -r php-fpm php-fpm-56

2.进入到 docker-compose.yml 文件，复制一份 php-fpm



3.修改 nginx/site 中项目配置文件，在 laradock 目录下，cd nginx/sites，我这里以自己创建的 basis.conf 举例



4.docker-compose stop &amp;&amp; docker-co]]></description><category></category></item><item><title><![CDATA[laravel8+dingo+jwt 完整使用记录]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/112781849</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/112781849</guid><author>saber_H</author><pubDate>Fri, 22 Jan 2021 10:14:35 +0800</pubDate><description><![CDATA[全手打，给自己加深印象，用到的朋友点个赞支持下

1.安装配置 jwt


composer require dingo/api:1.0.x@dev

a.引入成功后，在 config/app.php 的 providers 中配置 provider


        /*
         * Package Service Providers...
         */
        Tymon\JWTAuth\Providers\LaravelServiceProvider::class,

b]]></description><category></category></item><item><title><![CDATA[Mac 下面 laradock + phpstorm x-debug 完整记录]]></title><link>https://blog.youkuaiyun.com/saber_H/article/details/109596112</link><guid>https://blog.youkuaiyun.com/saber_H/article/details/109596112</guid><author>saber_H</author><pubDate>Thu, 24 Dec 2020 14:09:10 +0800</pubDate><description><![CDATA[电脑：macbook pro

php 版本：7.3

环境：laradock

步骤如下：

1.根据 laradock 官网指导

1-首先安装xDebug在Workspace和PHP-FPM容器中：
a）打开.env文件
b）WORKSPACE_INSTALL_XDEBUG在Workspace容器下搜索参数
c）将其设置为true
d）PHP_FPM_INSTALL_XDEBUG在PHP-FPM容器下搜索参数
e）设置它至true

2-重建容器docker-compose build worksp.]]></description><category></category></item></channel></rss>