搜索到
102
篇与
的结果
-
vscode配置备份 { "editor.fontFamily": "'Courier New', Menlo, Monaco, monospace", "editor.tabSize": 2, "editor.fontSize": 14, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "javascriptreact", "html", "vue", "typescript", "typescriptreact"], "explorer.compactFolders": false, "workbench.tree.indent": 12, "workbench.editor.enablePreview": false, "sync.gist": "ac382393a32ea171d130f70b8ed60f4b", "typescript.updateImportsOnFileMove.enabled": "always", "javascript.updateImportsOnFileMove.enabled": "always", "prettier.eslintIntegration": true, "window.zoomLevel": 1, "workbench.iconTheme": "material-icon-theme" } -
使用webpack打包对外lib时import取到的是空对象或undefined 首先，webpack默认认为你现在正在开发的是一个应用而不是一个对外使用的库，所以默认打包结构是一个闭包，然后模块是作为闭包的参数列表，是个数组，每一项也是个匿名函数也就是说，你在代码中 export 暴露出的对象，都在闭包中，所以也就不会对外暴露对象。解决方案：修改webpack配置文件，在 output 配置中加入如下配置library: 'libName', // libName 为对外暴露的库名称 libraryTarget: 'umd' // 定义模块运行的方式，将它的值设为umd参考官方文档：Output | webpack我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=24299ll4gdokg
-
使用docker搭建一个简单的nginx服务 操作步骤1、在任意目录位置创建Dockerfile 文件，输入如下内容FROM ubuntu/nginx COPY ./index.html /var/www/html/index.html CMD ["nginx", "-g", "deamon off;"]2、 在当前目录新建一个html文件作为静态页面3、 在当前目录执行 docker build -t test:v0.1 . 等待构建完成4、 执行docker images 查看镜像是否构建成功5、 执行docker run -d -p 8082:80 test:v0.16、 在浏览器访问 127.0.0.1：8082 验证是否能访问到上面新建的那个html内容涉及到的内容解释1、 Dockerfile 文件中a、 FROM 指定构建的基础镜像 b、 COPY 将当前空间（Dockerfile所在目录）的文件拷贝到镜像内容中，此处拷贝的是nginx的默认的静态页面地址 c、 CMD 指定执行docker run 指令时默认执行的命令，这里启动nginx2、 Docker 命令a、 docker build -t 指定镜像的tag信息，后续使用镜像的时候讲作为name使用 b、 docker run -d 表示在后台运行docker c、 docker run -p 指定端口映射，这里表示外部端口 8082 映射到当前启动后的容器（container）的80 端口（也就是上面启动的nginx）
-
js复制和粘贴内容 复制-将指定内容添加到粘贴板/** * copyToClip * @param content * @param callback */ export const copyToClip = (content: string, callback?: () => void) => { var aux = document?.createElement?.('input'); aux?.setAttribute?.('value', content); document?.body?.appendChild?.(aux); aux?.select(); document?.execCommand('copy'); document?.body?.removeChild?.(aux); return callback?.(); };粘贴 js不能直接读取粘贴板内容，下面的代码在多数环境下不生效const text = await navigator?.clipboard?.readText?.();我们采取变通的方案来处理。1、在页面中添加一个input输入框，将其绝对定位到页面中不可见的位置<input type='text' id='text-all' key='text-all' onPaste={(e) => handlePaste(e)} style={{ position: 'absolute', top: -10000, zIndex: 10000 }} />监听到ctrl-v事件时，先让上面的input获得焦点，再手动触发他的paste事件，这时input会填充粘贴板中的内容const hideInput: HTMLInputElement = document.getElementById('text-all') as any; hideInput?.focus(); hideInput?.dispatchEvent(new Event('paste', { bubbles: true }));给这个input添加onPaste事件，在事件处理函数中获取input的内容，或者获取粘贴板的内容const clipboardData = e?.clipboardData || e.originalEvent?.clipboardData;
-
-
【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脚本的历史性解决方案)是使用转义字符 \ 来转义回车
-
