Swoole_loader扩展安装图文教程 Swoole扩展文件下载 此教程以宝塔面板为例1 - 下载Swoole Loader请下载兼容PHP7.2和非线程安全的Swoole Loader扩展 点击下载2 - 安装Swoole Loader将刚才下载的Swoole Loader扩展文件（Swoole_loader.dll或swoole_loader.so）上传到当前PHP的扩展安装目录中：3 - 修改php.ini配置（如已修改配置，请忽略此步骤，不必重复添加）编辑此PHP配置文件：/www/server/php/72/etc/php.ini，在此文件底部结尾处加入如下配置extension=swoole_loader.so注意：需要名称和刚才上传到当前PHP的扩展安装目录中的文件名一致4 - 重启服务重启或重载PHP配置

几行代码，优雅的避免接口重复请求！ 如何避免接口重复请求防抖节流方式（不推荐）使用防抖节流方式避免重复操作是前端的老传统了，不多介绍了{mtitle title="防抖实现"/}<template> <div> <button @click="debouncedFetchData">请求</button> </div> </template><script setup> import { ref } from 'vue'; import axios from 'axios'; const timeoutId = ref(null); function debounce(fn, delay) { return function(...args) { if (timeoutId.value) clearTimeout(timeoutId.value); timeoutId.value = setTimeout(() => { fn(...args); }, delay); }; } function fetchData() { axios.get('http://api/gcshi) // 使用示例API .then(response => { console.log(response.data); }) } const debouncedFetchData = debounce(fetchData, 300); </script>「防抖（Debounce）」 ：在setup函数中，定义了timeoutId用于存储定时器ID。debounce函数创建了一个闭包，清除之前的定时器并设置新的定时器，只有在延迟时间内没有新调用时才执行fetchData。debouncedFetchData是防抖后的函数，在按钮点击时调用。{mtitle title="节流实现"/}<template> <div> <button @click="throttledFetchData">请求</button> </div> </template><script setup> import { ref } from 'vue'; import axios from 'axios'; const lastCall = ref(0); function throttle(fn, delay) { return function(...args) { const now = new Date().getTime(); if (now - lastCall.value < delay) return; lastCall.value = now; fn(...args); }; } function fetchData() { axios.get('http://api/gcshi') // .then(response => { console.log(response.data); }) } const throttledFetchData = throttle(fetchData, 1000); </script>「节流（Throttle）」 ：在setup函数中，定义了lastCall用于存储上次调用的时间戳。throttle函数创建了一个闭包，检查当前时间与上次调用时间的差值，只有大于设定的延迟时间时才执行fetchData。throttledFetchData是节流后的函数，在按钮点击时调用。节流防抖这种方式感觉用在这里不是很丝滑，代码成本也比较高，因此，很不推荐！请求锁定（加laoding状态）请求锁定非常好理解，设置一个laoding状态，如果第一个接口处于laoding中，那么，我们不执行任何逻辑！<template> <div> <button @click="fetchData">请求</button> </div> </template> <script setup> import { ref } from 'vue'; import axios from 'axios'; const laoding = ref(false); function fetchData() { // 接口请求中，直接返回，避免重复请求 if(laoding.value) return laoding.value = true axios.get('http://api/gcshi') // .then(response => { laoding.value = fasle }) } const throttledFetchData = throttle(fetchData, 1000); </script>这种方式简单粗暴，十分好用！「但是也有弊端，比如我搜索A后，接口请求中；但我此时突然想搜B，就不会生效了，因为请求A还没响应」！因此，请求锁定这种方式无法取消原先的请求，只能等待一个请求执行完才能继续请求。axios.CancelToken取消重复请求{mtitle title="基本用法"/}axios其实内置了一个取消重复请求的方法： axios.CancelToken ，我们可以利用 axios.CancelToken 来取消重复的请求，爆好用！首先，我们要知道，aixos有一个config的配置项，取消请求就是在这里面配置的。<template> <div> <button @click="fetchData">请求</button> </div> </template> <script setup> import { ref } from 'vue'; import axios from 'axios'; let cancelTokenSource = null; function fetchData() { if (cancelTokenSource) { cancelTokenSource.cancel('取消上次请求'); cancelTokenSource = null; } cancelTokenSource = axios.CancelToken.source(); axios.get('http://api/gcshi',{cancelToken: cancelTokenSource.token}) // .then(response => { laoding.value = fasle }) } </script>我们测试下，如下图：可以看到，重复的请求会直接被终止掉！ {mtitle title="CancelToke"/}官网使用方法传送门：https://www.axios-http.cn/docs/cancellationconst CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function (thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理错误 } }); axios.post('/user/12345', { name: 'new name' }, { cancelToken: source.token }) // 取消请求（message 参数是可选的） source.cancel('Operation canceled by the user.');也可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // executor 函数接收一个 cancel 函数作为参数 cancel = c; }) }); // 取消请求 cancel();注意: 可以使用同一个 cancel token 或 signal 取消多个请求。在过渡期间，您可以使用这两种取消 API，即使是针对同一个请求：const controller = new AbortController(); const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token, signal: controller.signal }).catch(function (thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理错误 } }); axios.post('/user/12345', { name: 'new name' }, { cancelToken: source.token }) // 取消请求 (message 参数是可选的) source.cancel('Operation canceled by the user.'); // 或 controller.abort(); // 不支持 message 参数

网页主题自动适配：网页跟随系统自动切换主题 CSS主题切换有多种方式实现，这里就简单描述下，不是本文重点方式1：通过自定义标签属性来实现主题切换 /* 默认主题样式 */ body { background-color: white; color: black; } /* 深色主题样式 */ body[data-theme="dark"] { background-color: black; color: white; }:root { --body-background: rgb(248, 244, 212); --text-color: #000; } html[data-theme="dark"] { --body-background: rgb(58, 70, 90); --text-color: #eee; }方式2：运行时动态地修改CSS变量的值，从而实现主题切换的效果:root { --primary-color: #007bff; --secondary-color: #6c757d; --background-color: white; --text-color: black; } body { background-color: var(--background-color); color: var(--text-color); }document.documentElement.style.setProperty('--background-color', 'black'); document.documentElement.style.setProperty('--text-color', 'white');方式3：使用类名切换，通过对顶层节点设置不同的类名，然后定义不同类名的CSS样式，切换主题时修改类名即可.theme-light { background-color: white; color: black; } .theme-dark { background-color: black; color: white; } function switchTheme() { const bodyElement = document.body; if (bodyElement.classList.contains('theme-light')) { bodyElement.classList.remove('theme-light'); bodyElement.classList.add('theme-dark'); } else { bodyElement.classList.remove('theme-dark'); bodyElement.classList.add('theme-light'); } }方式4：link标签动态引入function switchTheme(theme) { const linkElement = document.createElement('link'); linkElement.rel = 'stylesheet'; if (theme === 'light') { linkElement.href = 'theme-light.css'; // 切换为浅色主题 } else { linkElement.href = 'theme-dark.css'; // 切换为深色主题 } document.head.appendChild(linkElement); }CSS媒体查询CSS媒体查询是实现响应式网页设计的重要工具，它允许根据设备的特定特性来应用不同的样式规则。使用 @media 规则可以实现这一功能，通过这个规则可以定义一个或多个条件，当这些条件满足时，相应的样式代码块将会被应用到文档上。例如，在屏幕宽度小于或等于768像素时，背景颜色可以设置为浅蓝色 /* 基础样式 */ body { background-color: lightblue; color: white; font-size: 16px; padding: 20px; } /* 当屏幕宽度小于或等于768像素时，应用以下样式 */ @media (max-width: 768px) { body { background-color: red; color: black; font-size: 14px; padding: 10px; } }CSS媒体查询还可以检测用户是否有将系统的主题色设置为两色或者暗色light：表示用户已告知系统选择使用浅色主题界面dark：表示用户已告知系统选择使用暗色主题界面.day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } }这种方式的确可以实现主题跟随系统的变换而变换，但是存在以下缺点：增加工作量：开发者需要编写更多的CSS代码，这可能会导致工作效率降低加载时间延长：随着CSS代码量的增加，页面的加载时间可能会变长，尤其是对于那些包含大量媒体查询的复杂样式表用户无法自定义：样式固定，用户无法自定义设置主题样式JS媒体查询JS同样拥有媒体查询的方法 matchMedia() 。传入一个被用于媒体查询解析的字符串，返回一个用来媒体查询新的 MediaQueryList 对象，其中的 matchs 属性值就是匹配结果。// 如果视口的宽度小于或等于600像素，则输出为true const mql = window.matchMedia('(max-width: 600px)'); console.log(mql.matchs)同样的也可以用来查询系统是否使用了暗色主题 const osThemeIsDark = matchMedia("(prefers-color-scheme: dark)").matches;接下来就采用上面方式1的主题切换方案，结合JS媒体查询来实现跟随系统主题切换的功能。:root { --body-background: rgb(248, 244, 212); --text-color: #000; } html[data-theme="dark"] { --body-background: rgb(58, 70, 90); --text-color: #eee; } body { padding-top: 200px; height: 100vh; width: 100vw; margin: 0; background: var(--body-background); text-align: center; color: var(--text-color); }<body> <div> <select> <option value="light">白天模式</option> <option value="dark">黑夜模式</option> <option value="os">跟随系统</option> </select> </div> <h1>老K博客</h1> <p>laokbk.cn</p> </body>const select = document.querySelector('select'); const html = document.querySelector("html"); // 获取用户设置的主题，默认是跟随系统 const localTheme = localStorage.getItem('theme') || 'os'; settingTheme(localTheme); // 设置select选中的值 select.value = localTheme; select.onchange = (e) => { const theme = e.target.value; settingTheme(theme); localStorage.setItem('theme', theme) } function settingTheme(theme) { // 如果是跟随系统，就获取系统的主题 if (theme === 'os') { const osThemeIsDark = matchMedia("(prefers-color-scheme: dark)").matches; html.dataset.theme = osThemeIsDark ? 'dark' : 'light'; } else { html.dataset.theme = theme; } }监听媒体变化现在还有一个问题，如果页面已经打开的情况下，再去修改系统主题，是否能检测到系统主题的变化，使得网页在不刷新的情况下自动切换。答案是可以的，可以通过监听 MediaQueryList 的 change 事件，当 matches 的值发生变化时会触发。 matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => { html.dataset.theme = event.matches ? 'dark' : 'light'; })利用媒体查询还可以检测很多内容，比如：浏览器可视区域尺寸、设备尺寸、设备目前处于横向还是纵向、检测设备宽高比、设备颜色位数等

Linux ufw(防火墙)使用指南，解决ufw和docker冲突问题，保护你的服务器/VPS UFW 是 “简单防火墙” 的缩写，是更复杂的 iptables 实用程序的前端。它旨在使管理防火墙变得像设置端口打开和关闭以及调节允许通过的流量一样简单。ufw 可以在 Debian 和 Ubuntu 系统中使用，是默认的防火墙配置工具，默认 ufw 是禁用状态，支持 IPv4 和 IPv6。国内的服务器，一般都会有安全组，如果有安全组，则无须使用 ufw国外的服务器，一般端口全都是放行的，所以有必要使用 ufw如果是 CentOS 系统，可以使用 firewalld，强烈建议弃用 CentOS 系统，官方早已经不维护了，会有很多漏洞无法修复。推荐系统：Debian > Ubuntu >>>>> CentOSUbuntu 官网 Firewall 介绍 Ubuntu 官网 UFW 介绍 提示：以下所有命令默认在 root 环境下运行，如果是非 root 环境，则命令需要加前缀： sudoufw 使用更新软件包：apt update apu upgrade 安装# 安装 apt-get install ufw # 帮助命令 ufw --help 推荐配置如果要开启防火墙的话，建议先拒绝所有入站流量，然后逐一打开需要的端口。# 默认阻止入站（不会立即切断你的 SSH 连接，因为防火墙尚未启用） ufw default deny incoming # 默认允许出站 ufw default allow outgoing # 拒绝所有访问（如果配置了入站/出战，这个可以不配置） ufw default deny # 根据需求开启端口 ufw allow 22 ⚠注意确保在修改 SSH 端口后，不要关闭当前 SSH 窗口，尝试使用新的端口进行 SSH 登录，以确保没有防火墙或其他网络配置问题，以免被自己锁定出服务器。启用禁用# 启用 ufw enable # 查看状态 ufw status verbose # 禁用 ufw disable # 防火墙规则存放位置 # /etc/ufw 中的规则文件（后缀名：.rules） 允许拒绝allow 例子：# 接受 97 端口的 tcp/udp 流量 ufw allow 97 # 接受 97 端口的 tcp/udp 流量，并添加备注 ufw allow 97 comment 'open 97 port' # 接受 97 端口的 tcp 流量 ufw allow 97/tcp # 接受 97 端口的 udp 流量 ufw allow 97/udp # 通过服务名来处理, 会从 /etc/services 中查找端口 ufw allow ssh # 允许特定IP访问 ufw allow from 1.2.3.4 # 允许特定子网访问 ufw allow from 1.2.3.4/97 # 允许特定IP使用任何协议访问22端口 ufw allow from 1.2.3.4 to any port 22 # 允许特定IP使用任何TCP协议访问22端口 ufw allow from 1.2.3.4 to any port 22 proto tcp deny 例子：# 拒绝 97 端口的 tcp/udp 流量 ufw deny 97 # 拒绝 97 端口的 tcp 流量 ufw deny 97/tcp # 拒绝 97 端口的 udp 流量 ufw deny 97/udp # 通过服务名来处理, 会从 /etc/services 中查找端口 ufw deny ssh # 拒绝特定IP访问 ufw deny from 1.2.3.4 # 同allow ufw deny from 1.2.3.4 to any port 22 ufw deny from 1.2.3.4 to any port 22 ufw allow from 1.2.3.4/97 to any port 22 proto tcp 删除# 要删除规则，只需在原始规则前加上删除，删除 80 端口的 tcp 配置 ufw delete deny 80/tcp # 显示规则的顺序和ID号 ufw status numbered # 删除编号规则（删除规则，规则将向上移动以填充列表） ufw delete 1 日志# 启用日志 ufw logging on # 禁用日志 ufw logging off Docker不遵守ufw规则如果你在服务端使用 Docker 映射了某个宿主机端口，然后公网访问这个端口的话，你会发现仍然可以访问，即使 ufw 禁用了这个端口，却不起效果。因为默认状态下的 Docker 并不遵守 ufw 的防火墙规则，如下图：解决ufw和docker的问题解决方案：https://github.com/chaifeng/ufw-docker目前新的解决方案只需要修改一个 UFW 配置文件即可，Docker 的所有配置和选项都保持默认。修改 UFW 的配置文件 /etc/ufw/after.rules ，在最后添加上如下规则：# BEGIN UFW AND DOCKER *filter :ufw-user-forward - [0:0] :ufw-docker-logging-deny - [0:0] :DOCKER-USER - [0:0] -A DOCKER-USER -j ufw-user-forward -A DOCKER-USER -j RETURN -s 10.0.0.0/8 -A DOCKER-USER -j RETURN -s 172.16.0.0/12 -A DOCKER-USER -j RETURN -s 192.168.0.0/16 -A DOCKER-USER -p udp -m udp --sport 53 --dport 1024:65535 -j RETURN -A DOCKER-USER -j ufw-docker-logging-deny -p tcp -m tcp --tcp-flags FIN,SYN,RST,ACK SYN -d 192.168.0.0/16 -A DOCKER-USER -j ufw-docker-logging-deny -p tcp -m tcp --tcp-flags FIN,SYN,RST,ACK SYN -d 10.0.0.0/8 -A DOCKER-USER -j ufw-docker-logging-deny -p tcp -m tcp --tcp-flags FIN,SYN,RST,ACK SYN -d 172.16.0.0/12 -A DOCKER-USER -j ufw-docker-logging-deny -p udp -m udp --dport 0:32767 -d 192.168.0.0/16 -A DOCKER-USER -j ufw-docker-logging-deny -p udp -m udp --dport 0:32767 -d 10.0.0.0/8 -A DOCKER-USER -j ufw-docker-logging-deny -p udp -m udp --dport 0:32767 -d 172.16.0.0/12 -A DOCKER-USER -j RETURN -A ufw-docker-logging-deny -m limit --limit 3/min --limit-burst 10 -j LOG --log-prefix "[UFW DOCKER BLOCK] " -A ufw-docker-logging-deny -j DROP COMMIT # END UFW AND DOCKER 或者使用 ufw-docker 工具下载脚本，修改 after.rules 文件配置：# 下载脚本 wget -O /usr/local/bin/ufw-docker https://github.com/chaifeng/ufw-docker/raw/master/ufw-docker # 赋予权限 chmod +x /usr/local/bin/ufw-docker # 修改配置文件 ufw-docker install ufw-docker install 命令做了以下事情：备份文件 /etc/ufw/after.rules 把 UFW 和 Docker 的相关规则添加到文件 after.rules 的末尾然后重启 UFW，systemctl restart ufw。现在外部就已经无法访问 Docker 发布出来的任何端口了，但是容器内部以及私有网络地址上可以正常互相访问，而且容器也可以正常访问外部的网络。可能由于某些未知原因，重启 UFW 之后规则也无法生效，请重启服务器。如果希望允许外部网络访问 Docker 容器提供的服务，比如有一个容器的服务端口是 80。那就可以用以下命令来允许外部网络访问这个服务：ufw route allow proto tcp from any to any port 80 这个命令会允许外部网络访问所有用 Docker 发布出来的并且内部服务端口为 80 的所有服务。请注意，这个端口 80 是容器的端口，而非使用 -p 0.0.0.0:8080:80 选项发布在服务器上的 8080 端口。如果有多个容器的服务端口为 80 ，但只希望外部网络访问某个特定的容器。比如该容器的私有地址为 172.17.0.2 ，就用类似下面的命令：ufw route allow proto tcp from any to 172.17.0.2 port 80 如果一个容器的服务是 UDP 协议，假如是 DNS 服务，可以用下面的命令来允许外部网络访问所有发布出来的 DNS 服务：ufw route allow proto udp from any to any port 53 同样的，如果只针对一个特定的容器，比如 IP 地址为 172.17.0.2 ：ufw route allow proto udp from any to 172.17.0.2 port 53 ufw-docker 也是支持 Docker Swarm的，详细教程及配置参考文章：https://github.com/chaifeng/ufw-docker

js定义对象什么意思 JavaScript 中的“定义对象”是什么意思？JavaScript 中的“定义对象”指的是创建一个包含属性（键值对）的复杂数据结构。对象用于组织和存储相关数据，使其易于访问和处理。如何定义对象？有三种主要方法可以在 JavaScript 中定义对象：对象字面量：使用大括号（{}）定义键值对的集合。const person = { name: "John", age: 30, occupation: "Software Engineer" };new Object() 构造函数：使用 new 关键字和 Object 构造函数来创建新对象。const person = new Object(); person.name = "John"; person.age = 30; person.occupation = "Software Engineer";Object.create() 方法：创建具有指定原型的新对象。const personPrototype = { greet: function() { console.log("Hello!"); } }; const person = Object.create(personPrototype); person.name = "John";对象属性对象属性是键值对的集合，其中键是属性名称，而值是该属性的值。可以使用属性语法（对象名称.属性名称）访问属性。对象方法对象方法是附加在对象上的函数，可以执行特定任务。可以通过属性语法（对象名称.方法名称）调用方法。对象在 JavaScript 中的重要性对象在 JavaScript 中非常重要，因为它：提供了一种组织和存储相关数据的结构化方式。允许创建自定义数据类型，反映现实世界的实体和概念。可以通过原型继承轻松扩展功能。对于创建动态和交互式 Web 应用程序至关重要。