Nodejs调用浏览器登录获取Cookie方案
前言 在日常开发的时候为了减少重复的工作，一般会实现一些自动化的操作来解决开发者频繁的操作；使用命令行程序是比较常见的一种实现方式，可以自动化调用API实现批处理等操作。 例如下面的场景，我们做一个清理僵尸用户的自动化程序： 登录某个社交网站 获取关注的人 筛选关注的人里面已经被销号的人 逐个调用取消关注接口 如果我们是手动点击操作，将会是下面的步骤 登录某个社交网站 找到我的关注列表 观察关注的…
备份恢复docker中数据库的数据
一、备份恢复mysql数据 1. 备份数据 直接使用docker执行容器中的mysqldump程序，将其输出重定向到宿主机sql文件，下面的命令导出了以时间为格式的sql文件，例如202301271023.sql。 执行命令的格式如下： docker exec -it <containerName> mysqldump <dbName> > <sqlFilePa…
微信&QQ二次分享
二次分享： 用户打开网页之后点击右上角…选择分享给好友或者分享到朋友圈的过程。 一、展示样例 开发网页的时候涉及到微信二次分享，需要在朋友圈显示一些数据，如下图所示： 需要显示：标题、描述、小图像、跳转链接。 我们可以调用微信的API设置，但是也不能随意设置，需要一切签名数据以保证跟踪防止网络出现不良信息无法追责； 二、微信具体实现 在h5端可以使用jssdk去调用，这里查看官方文档。…
YAPI配置Gitlab登录
YAPI 作为优秀的接口管理工具，尤其是可以在内网部署，是很多小公司的选择； YAPI内置一套用户系统，虽然可以配置LDAP授权，但是很多企业并没有相关的用户中心可以对接，所以我们这里选择接入gitlab授权； gitlab授权是使用插件接入的，这里使用的gitlab版本是 GitLab Community Edition 8.11.3 插件地址： https://github.com/cyj01…
windows11共享的文件问题
windows11共享的文件，其他的windows无法访问的问题，保证下面的条件 1、防火墙允许“文件和打印机共享” 2、高级网络共享设置，打开共享开关 3、修改本地安全策略 开始共享文件夹，选择用户并且设置权限
Webpack加载markdown文件内容
前言 本文适合使用create-react-app（下文称之为cra）创建的项目，是react官方脚手架，内部由react-scripts支持； markdown是一种轻量级的富文本文件类型，按照惯例，加载不同类型的文件，我们需要在webpack中配置对应的loader实现； 因为cra默认是将所有的配置都封装在react-scripts中，默认没有给我们提供对应的修改入口，要是我们修改的话有两个…
H5页面中PNG图片优化
活动页面中例如页面背景等图片的尺寸都是很大的，png的尺寸一般是的100+kb，导致加载比较慢； 现在我们的方案就是在支持webp的浏览器中使用webp作为背景图减少体积，虽然webp是有损压缩，但是还可以接受； 实现方案 转换之前的png先使用tinypng (https://tinypng.com) 做一次压缩，再去转换；（为了减少转换次数，因为转换网站要排队比较慢，当然这里我们也可以在 ht…
SSH使用常见问题和技巧
一、Bad owner or permissions on .ssh/config 为了在终端免密码登录服务器，一般情况会在.ssh文件夹下面创建config文件来映射一些服务器别名，方便登录；但是创建以后，使用ssh登录远程机器时报了上面的错误。 根据错误应该是权限的问题，进行下面的处理即可 sudo chmod 600 ~/.ssh/config 详细配置：https://www.ssh.co…
React高阶组件中使用ref
react中forwardRef是用来解决HOC组件使用ref的问题的，所谓HOC就是Higher Order Component，比如使用redux的时候，我们用connect来给组件绑定需要的state，这其中其实就是给我们的组件在外部包了一层组件，然后通过…props的方式把外部的props传入到实际组件。forwardRef的使用方法如下： const TargetCompon…
macOS使用常见技巧
软件下载：https://www.torrentmac.net/ 1、某些进程CPU占用高 Mac系统mds、mds_stores、mdworker疯狂工作的问题； 有时候发现, MacOS中, 有个叫做mds_stores的进程占了好多CPU, 这个进程是为Spotlight创建索引的，只要把这个索引的关掉就好了，但是关掉之后Spotlight就不能用了，所以注意取舍 下面的命令是关闭索引 su…
JS计算输入框输入的长度
需求来源 开发的时候有时候会有这样的需求： 给一个输入框，在提交的时候需要校验输入的内容的长度不能超过20，详细校验规则如下： 中文算一个字 英文字母和数字两个算一个字 因为在视觉上，英文字母和数字占用的空间比较小，所以上面的要求也是合理的。 实现方案 很明显，我们现在就不能通过字符串的length属性来判断这个值的长度，因为length属性不管是中文、英文、数字都算是一个字符； 其实实现方案也比…
H5字体加载策略优化
随着网页内容的丰富化，我们使用自定义字体来处理漂亮个性化的网页呈现，所以我们会在网页中使用自定义字体，但是也伴随着给我们带来了一些问题，那就是自定义字体比较大，尤其是中文字体，随便就是好几兆，会给用户一种网页加载很慢的感觉，所以针对上述的问题需要做一部分优化： 下面是我项目使用的一些字体的大小： 1、设置 font-display: swap 我们需要在美观和性能之间做一个取舍和平衡点，查看MDN…
H5移动端视频以及音乐播放器
一、视频播放 支持的格式：https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Video_codecs webm,mp4,3gp,quicktime,ogg 体验优化 显示封面：有些浏览器不支持poster，我们需要使用div模拟一个层遮罩上去，点击的时候隐藏； 自动播放：大多数浏览器都是将自动播放禁用的，除非你使用的静音状态； 设…
Antd3中动态校验规则踩坑
场景描述 下图所示表单有三个字段，“跳转文案”和“跳转链接”只要填写了其中一个这两个字段就要变成必填，反之，两个都为空的时候两个字段都变成非必填；简单描述就是要吗都填写，要吗都不填写。 如下图所示，校验规则是要基于两个字段的值动态的生成的；也就包含了自己修改了也要动态的修改自己是否为必填； 解决方案 尝试过使用下面的方案 在state存储上面的两个字段的值，然后计算是否必填然后赋值给表单的校验规则…
前端两种方式获取视频基本信息
前言 在前端获取视频资源的信息有下面的两种方式： 1、使用FileReader读取为base64，然后赋值给视频的src属性； 2、使用URL.createObjectURL创建一个临时的url地址给视频的src属性； FileReader实现 对比上面的两种方式，FileReader随着读取文件的变大会导致读取到的base64是空的，也比较慢（因为需要完成整个文件的读取，尤其是在低配置的电脑更加…
前端工程师使用Linux服务器小技巧
一、快速连接服务器 我们要连接服务器时需要提供 服务器IP、端口、用户名、密码，下面是我们连接服务器的常规流程。 # 说明 # host --- 服务器IP或者域名 # username --- 服务器用户名 # port --- 服务器端口号，平时我们不写，是因为使用的是默认端口 22 # password --- 服务器密码 ssh username@host -p port # 上述命令回…
从Popconfirm的实现学习React cloneElement用法
一直在使用antd（Ant Design），因为其丰富的组件库给管理后台开发带来了很多的便利性，让我们只需要关注业务。里面也有很多实现方案值得借鉴，本文就以Popconfirm的实现做个介绍。 我们先看是如何使用的，下面是官方给出的例子： import { Popconfirm, message } from 'antd'; function confirm(e) { cons…
前端截取视频指定帧为封面的3种方法
一、使用本地canvas截取 我们在网页上传视频后，如果能给视频设置一个封面图，用户体验会比较好，但是如果使用video标签的默认实现，部分浏览器会显示视频的第一帧，有些浏览器则怎么都不会展示； 通过创建canvas标签，利用其context.drawImage() 方法在画布上绘制该视频，然后运用canvas.toDataURL方法转换canvas上的图片为base64格式，并将base64格式…
实用css样式汇总（持续更新）
1、禁止一个容器上所有的鼠标事件 例如我们不想删除事件重新注册事件的时候很有用； .box{ pointer-events: none; } 2、禁止用户选择某个容器下的文本； .box{ user-select: none; } 3、设置非absolute的元素的z-index 如果相同父容器下面还有absolute的元素，可以设置比较大的z-index，放在absolute上层展示； .box…
为scrollTo添加平滑滚动降级方案
Element.scrollTo 是一个dom元素上的方法，可以将元素滚动到指定的坐标位置，使用方法如下： element.scrollTo(x-coord, y-coord)element.scrollTo(options) 参数说明： x-coord 是期望滚动到位置水平轴上距元素左上角的像素。 y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。 options 是一个ScrollT…