搜索到
107
篇与
的结果
-
【react-dnd使用总结一】拖放完成后获取放置元素在drop容器中的相对位置 工具函数-根据元素的起始位置和最终位置，计算相对于某元素的位置export interface IPosition { left: number; top: number; } /** * 根据元素的其实位置和最终位置，计算相对于某元素的位置 * @param initialPosition 拖动元素相对于屏幕左上角的起始位置（偏移量） * @param finalPosition 拖放完成后当前节点相对于屏幕左上角的位置 * @param containerEle 目标容器元素 * @returns */ export const getCorrectDroppedOffsetValue = ( initialPosition: any, finalPosition: any, containerEle: HTMLDivElement, ): IPosition => { // 获取容器的位置信息 rect 信息包含left top width height const dropTargetPosition = containerEle.getBoundingClientRect(); const { y: finalY, x: finalX } = finalPosition; const { y: initialY, x: initialX } = initialPosition; // 计算当前位置相对于drop容器的位置. // finalY > initialY, 则视为向下拖拽, 否则是向上拖拽 const newYposition = finalY > initialY ? initialY + (finalY - initialY) - dropTargetPosition.top : initialY - (initialY - finalY) - dropTargetPosition.top; const newXposition = finalX > initialX ? initialX + (finalX - initialX) - dropTargetPosition.left : initialX - (initialX - finalX) - dropTargetPosition.left; return { left: newXposition, top: newYposition, }; }; 在drop回调函数中drop(target: any, monitor: DropTargetMonitor) { console.log(target, monitor); const position = getCorrectDroppedOffsetValue( monitor.getInitialSourceClientOffset(), // 拖动元素相对于屏幕左上角的起始位置（偏移量） monitor.getSourceClientOffset(), // 拖放完成后当前节点相对于屏幕左上角的位置 document.querySelector('#container') as HTMLDivElement, ); console.log(position); }, -
Nginx限制IP访问频率 最近网站经常出现假死的状态，重启nginx可恢复，但是短时间后又出现，经过排查日志发现，有一个 IP 存在过度频繁请求的情况，十分钟左右的时间请求了12000次左右，导致了服务器资源无法释放，所以产生了假死现象。应急处理：在服务器安全组策略里禁止这个 ip 地址入站一开始想通过程序控制访问频率，但是发现不能从根本解决问题，因为程序还是得要响应用户请求，所以想到了通过nginx来控制，于是在网上找到了如下解决方案。主要用到了nginx的ngx_http_limit_conn_module和ngx_http_limit_req_module两个配置：ngx_http_limit_conn_module：限制并发连接数；ngx_http_limit_req_module：限制一段时间内同一IP的访问频率；首先，我们为了防止别人来攻击，或者访问量异常过高导致服务器崩掉，就需限制访问量，如果是一瞬间的并发访问，那么我们就需要限制一秒之内的并发连接数，此时就需要用到第一个配置http { limit_conn_zone $binary_remote_addr zone=addr：10m; #定义一个名为addr的limit_req_zone用来存储session，大小是10M内存， #以$binary_remote_addr 为key #nginx 1.18以后用limit_conn_zone替换了limit_conn, #且只能放在http{}代码段． ... server { ... location / { limit_conn addr 10; #连接数限制 #设置给定键值的共享内存区域和允许的最大连接数。超出此限制时，服务器将返回503（服务临时不可用）错误. #如果区域存储空间不足，服务器将返回503（服务临时不可用）错误 } } }上面的配置能达到的效果就是，一瞬间访问的时候，只会有10个IP能得到响应，后面的IP直接就返回503状态。其次，如果一个IP能访问到服务器，那么它如果疯狂的调用接口，如：页面上写个for循环一直刷请求，且不说数据会错乱，最后可能导致将服务器的带宽耗尽，从而导致服务器假死崩溃，此时就需要用到第二个配置http{ # ...其他配置 #定义一个名为allips的limit_req_zone用来存储session，大小是10M内存， #以$binary_remote_addr 为key,限制平均每秒的请求为20个， #1M能存储16000个状态，rete的值必须为整数， #如果限制两秒钟一个请求，可以设置成30r/m limit_req_zone $binary_remote_addr zone=allips:10m rate=20r/s; ... server{ ... location / { ... #限制每ip每秒不超过20个请求，漏桶数burst为5 #brust的意思就是，如果第1秒、2,3,4秒请求为19个， #第5秒的请求为25个是被允许的。 #但是如果你第1秒就25个请求，第2秒超过20的请求返回503错误。 #nodelay，如果不设置该选项，严格使用平均速率限制请求数， #第1秒25个请求时，5个请求放到第2秒执行， #设置nodelay，25个请求将在第1秒执行。 limit_req zone=allips burst=5 nodelay; ... } ... } ... }此时能达到的效果，同一个ip在一秒钟只能获得20个访问，超过20个请求，后面的也是直接返回503。上面的两个配置加在一起就可以做到：一秒只有10个连接，每个连接只能发送20个请求。注意：对request的访问限制，大家一定要注意数量的配置，否则一不小心就会 503（ERR_ABORTED 503 (Service Temporarily Unavailable)）
-
Nginx 配置按日期单独生成日志文件 1、http 配置增加下面代码定义当前日期的变量# ... http { # ... map $time_iso8601 $logdate { '~^(?<ymd>\d{4}-\d{2}-\d{2})' $ymd; default 'date-not-found'; } }2、对应站点的server里增加日志文件位置配置server { # ... location / { proxy_pass http://127.0.0.1:3000; limit_req zone=allips burst=20 nodelay; #limit_conn one 40; #连接数限制 #带宽限制,对单个连接限数，如果一个ip两个连接，就是500x2k limit_rate 500k; } access_log /usr/lcoal/nginx/logs/xxx.com/access-$logdate.log; error_log /usr/lcoal/nginx/logs/xxx.com/error.log; }注：日志文件目录一定要有读写权限
-
使用ES6模板字符串时怎么不带换行符换行代码避免eslint报max-len错误 在现代前端开发中，es6的模板字符串可以说是除了let const之外我们使用得最多的es6新特性了。然而，我们经常会遇到一个问题就是代码换行问题，以前写字符串换行时，我们都是通过 + 拼接字符串的，这样最后的拼接结果也是正常的字符串，例如var str = 'hello' + ' world' consle.log(str); // 结果为 hello world当我们使用模板字符串时，如果我们这样写const str = `hello world`; consle.log(str);那上面的打印结果会是helloworld这显然不是我们希望的结果。解决方案如下const str = `hello \ world`; consle.log(str);官方文档说明 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals这也是unix shell脚本的历史性解决方案)是使用转义字符 \ 来转义回车
-
-
-
fastmock 支持不同格式数据返回 Content-Type 数据格式应许多用户的要求，现不断加入不同的数据格式支持，使用方式很简单，在请求头中加入 Content-Type 字段来告诉 fastmock 您需要返回什么格式的内容即可：如：使用 axios 作为 ajax 库时axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';录入数据时，还是录入 json 数据，还是可以正常使用 mockjs 模拟一切数据现已支持的数据类型数据类型Content-Type 值jsonapplication/jsonxmltext/xml使用示例录入规则{ data: [{ name: '张三' },{ name: 'lisi' }] }postman 请求 jsonpostman 请求 xml
-
jsplumb 开发文档收集 jsplumb基本概念https://www.jianshu.com/p/0e7bb5c081c8https://www.jianshu.com/p/0e7bb5c081c8jsplumb 阅读笔记（英文文档翻译）https://www.cnblogs.com/ysx215/p/7615677.html拓扑图编辑器-jsplumb基本配置https://www.jianshu.com/p/d68a8e61ff2d【原英文文档】https://docs.jsplumbtoolkit.com/community/current/articles/connections.html#detachinggithub 中文文档https://github.com/MarvenGong/jsplumb-chinese-tutorial
-
MySql连接和状态查看方法 怎么进入mysql命令行呢？ mysql的安装目录下面有个bin目录，先用命令行进入该目录，然后用 mysql -uroot -p123456 来登录（注意：用户名和密码不用包含“”）命令： show processlist;如果是root帐号，你能看到所有用户的当前连接。如果是其它普通帐号，只能看到自己占用的连接。show processlist;只列出前100条，如果想全列出请使用show full processlist;mysql> show processlist;命令： show status;命令：show status like '%下面变量%';Aborted_clients 由于客户没有正确关闭连接已经死掉，已经放弃的连接数量。Aborted_connects 尝试已经失败的MySQL服务器的连接的次数。Connections 试图连接MySQL服务器的次数。Created_tmp_tables 当执行语句时，已经被创造了的隐含临时表的数量。Delayed_insert_threads 正在使用的延迟插入处理器线程的数量。Delayed_writes 用INSERT DELAYED写入的行数。Delayed_errors 用INSERT DELAYED写入的发生某些错误(可能重复键值)的行数。Flush_commands 执行FLUSH命令的次数。Handler_delete 请求从一张表中删除行的次数。Handler_read_first 请求读入表中第一行的次数。Handler_read_key 请求数字基于键读行。Handler_read_next 请求读入基于一个键的一行的次数。Handler_read_rnd 请求读入基于一个固定位置的一行的次数。Handler_update 请求更新表中一行的次数。Handler_write 请求向表中插入一行的次数。Key_blocks_used 用于关键字缓存的块的数量。Key_read_requests 请求从缓存读入一个键值的次数。Key_reads 从磁盘物理读入一个键值的次数。Key_write_requests 请求将一个关键字块写入缓存次数。Key_writes 将一个键值块物理写入磁盘的次数。Max_used_connections 同时使用的连接的最大数目。Not_flushed_key_blocks 在键缓存中已经改变但是还没被清空到磁盘上的键块。Not_flushed_delayed_rows 在INSERT DELAY队列中等待写入的行的数量。Open_tables 打开表的数量。Open_files 打开文件的数量。Open_streams 打开流的数量(主要用于日志记载）Opened_tables 已经打开的表的数量。Questions 发往服务器的查询的数量。Slow_queries 要花超过long_query_time时间的查询数量。Threads_connected 当前打开的连接的数量。Threads_running 不在睡眠的线程数量。Uptime 服务器工作了多少秒。
-
Parallels Desktop 16 在最新版 Mac 系统 Big Sur （11.x）中 无法联网终极解决方案 如果已经打开了 Parallels Desktop。先退出，最好是去“活动监视器”退出。打开目录：/Library/Preferences/Parallels 或 /资源库/Preferences/Parallels找到 network.desktop.xml文件，打开（用 vim 打开，或者用 vscode 打开，保存的时候，要用sudo权限保存）找到-1默认值是 -1 将其值改为 0如果没有，直接将<UseKextless>0</UseKextless>复制放到对应位置保存即可。<?xml version="1.0" encoding="UTF-8"?> <ParallelsNetworkConfig dyn_lists="VirtualNetworks 1" schemaVersion="1.0"> <SystemFlags></SystemFlags> <IPv6Enabled>1</IPv6Enabled> <UseKextless>0</UseKextless> <StartNaptd>-1</StartNaptd> <NATDAllowEtcHostsWrite>1</NATDAllowEtcHostsWrite> <UDPSendBufSize>4106</UDPSendBufSize> <VirtualNetworks id="0" dyn_lists="VirtualNetwork 2"> <!-- 省略内容 --> </VirtualNetworks> </ParallelsNetworkConfig>然后，直接打开 Parallels Desktop 即可，无需终端打开。
