- 博客(35)
- 收藏
- 关注
RSS订阅原创 解决 TextArea 文本域使用 text-align: justify 在 ios safari 不生效的问题
解决 TextArea 文本域使用 text-align:justity 在 ios safari 不生效的问题
2023-09-13 17:02:09
351
原创 Chrome 插件 onRequestFinished addListener removeListener 事件踩坑指南
Chrome 插件 onRequestFinished addListener removeListener 事件踩坑指南
2022-09-04 18:14:00
1128
原创 移动端键盘唤醒时 antd Modal 和 position: fixed； bottom: 0； 吸底按钮的处理方案
移动端键盘唤醒时 antd Modal 和 position: fixed； bottom: 0； 吸底按钮的处理方案
2022-08-18 10:04:59
505
原创 oauth2.0 单点登录——授权码模式
本文主要介绍了 oauth2.0 单点登录 中的最完整的授权码模式期望一个授权平台处于登录状态的时候，访问其他受信任的平台都可以跳过登录直接访问，其实是使用授权平台的身份信息进行的登录，即我们生活中常见的第三方软件微信登录这种。Oauth2.0概念：OAuth 就是一种授权机制。数据的所有者告诉系统，同意授权第三方应用进入系统，获取这些数据。系统从而产生一个短期的进入令牌（token），用来代替密码，供第三方应用使用。角色：服务提供方（微信），用户使用服务提供方来存储受保护的资源，如照片，视频
2022-03-26 17:41:37
5170
原创 CSP-XSS 风险问题解决
问题在 chrome 中使用 lighthouse 跑分的时候发现有比较高风险的漏洞，从 lightHouse 建议 入手研究了一番前言定义：CSP（ Content-Security-Policy ）从字面意思来讲是“内容 - 安全 - 政策”。解释：通俗的讲就是该网页内容的一个安全策略，可以自定义资源的加载规则和资源所在地址源的白名单，用来限制资源是否被允许加载，即当受到 XSS 攻击时，攻击的资源文件所在的地址源不满足 CSP 配置的规则，即攻击资源会加载失败，以此达到防止 XSS 攻击的
2022-03-26 16:56:24
1524
原创 egg 客户端使用原生 grpc 调用 grpc 接口，并支持在请求中添加 header
客户端调用参考写法本文主要是对 grpc 客户端的写法进行描述，并有在请求中添加 header 的写法proto 定义，务必要和服务端定义的一致syntax = "proto3"; package grpcPackage; service grpcServiceName { rpc grpcFunction (grpcFunctionInterface) returns (grpcFunctionReplyInterface){}} message grpcFunctionInt
2022-03-26 15:58:50
1281
原创 antd Modal 结合 Form 使用有时 resetFields 不生效
现象Form 配合 Modal 使用时 destroyOnClose 会影响 useEffect 的执行，相应的 useEffect 中的一些操作如 resetFields 可能会不生效原因有 destroyOnClose 先执行 useEffect，没有 destroyOnClose 后执行 useEffect复现示例demo代码import React, { useState, useEffect } from 'react';import ReactDOM from 'react-do
2022-03-26 15:19:04
2409
原创 Antd Form onFinish 提交时 setState 非批量执行（batch update）
Antd Form onFinish 提交时 setState 非批量执行（batch update）参考 issue复现示例import React, { useState, useEffect } from 'react';import ReactDOM from 'react-dom';import 'antd/dist/antd.css';import './index.css';import { Button, Form } from 'antd';const useSearc
2021-11-25 17:38:28
1370
原创 Antd Form表单使用 Upload 上传 FormData 数据文件至后端
Antd Form表单使用 Upload 上传 FormData 数据文件至后端Upload 通过 beforeUpload 拦截const normFile = (e: any) => { return e?.fileList;};const handleFinish = (value: any) => { const { file } = value; const formData = new FormData(); file.forEach((it
2021-11-16 10:01:13
6627
原创 egg 文件上传报错 nodejs.Error: Invalid filename
egg 文件上传报错 nodejs.Error: Invalid filename官方资料默认只支持一部分文件，即 txt pdf 的不在默认里边配置的会报错，配置完即可正常接收
2021-11-05 17:46:56
1156
原创 企业微信小程序 windows 使用 vconsole 调试
官方说明步骤ctrl + shift + alt + d 组合按键开启调试，如下图所示左下角可以找到 debug 窗口搜索小程序打开小程序可以看到 vConsole点击即可进入调试
2021-11-05 17:30:00
2944
原创 Your Flutter application is created using an older version of the Android embedding. 问题解决
问题描述github 新 down 下来的项目执行 flutter package get 时报错Your Flutter application is created using an older version of the Android embedding. It’s being deprecated in favor of Android embedding v2.解决办法将下方标签添加至 AndroidManifest.xml 文件的 activity 标签下<meta-data
2021-03-05 16:56:24
3586
原创 Chrome devtools自定义设置接口请求延时时间
Chrome devtools自定义设置接口请求延时时间如下图所示，自定义添加请求延时时间，设置30秒延时后，网络请求会在30秒后响应，用于接口超时时间的测试
2021-03-05 14:57:34
5515
原创 antd table 使用的列使用 ellipsis: true 自动省略属性 + Tooltip 导致位置弹窗错位
antd table 使用的列使用 ellipsis: true 自动省略属性 + Tooltip 导致位置弹窗错位复现示例具体现象使用 antd 的 table 的 ellipsis: true 实现自动省略展示内容由于被省略需要通过 tooltip 查看全部tooltip 并不在对应列的统一位置上，而是根据长度不同位置不同，导致出现在其他列上的现象问题原因使用 ellipsis: true 时，列中 span 的宽度为实际宽度只是视觉上进行的省略操作，导致 tooltip 按照上述
2021-02-22 10:02:08
7175
1
原创 vscode 插件踩坑指南
vscode 插件指南1. 添加子菜单最终效果相关 issue代码配置2. 使用 when 时相关关键字逻辑操作符关键字（太多了，截图只是一部分，详情看看官方链接）3. 设置 vscode setting 配置配置使用1. 添加子菜单最终效果相关 issue10172 和 9827代码配置explorerResourceIsFolder 代表该菜单仅在文件夹右键时展示config.fileTemplate.ts.active 代表读取本地 setting 中的配置，true 时展示/
2021-02-20 14:38:55
1109
1
原创 Chrome 插件卡顿问题处理
Chrome 插件卡顿问题处理问题具体描述问题原因解决办法具体操作如下问题具体描述chrome 插件在 Mac 的外接显示器上 css 渲染出现巨大延时导致卡顿（仅 css 渲染延时，dom 结构数据流均已正常改变）拖拽到原生屏幕上没有问题问题原因chromium 内核有 bug 具体原因不明issue 链接 链接不能访问的请看下图解决办法issue 截止 2021年2月20日已经存在将近21和月了，还没解决issue 的评论中有一个临时的解决办法如下（链接需要翻墙，无法访问的
2021-02-20 10:00:17
1179
原创 好用的网站合集
好用的网站地图数据（数据来源于高德开放平台且定时更新）各种免费的图标下载Mac应用下载正则解释器CDN 搜索查看前端第三方包资源体积png 压缩npm 下载对比
2021-01-19 09:53:11
229
原创 vscode 设置保存时只格式化修改的部分
1.49.0 vscode 版本设置保存时只格式化修改的部分（1.49.0新增功能）找到设置并打开输入 format 搜索找到 Format On Save Mode 设置为 modifications搞定
2020-09-11 11:29:32
4138
1
原创 前端好用的第三方功能库
前端好用的第三方功能库npm 地址pixelmatch 图片对比库最小、最简单和最快的JavaScript像素级图像比较库，最初创建用于在测试中比较屏幕截图。react-viewer 图片拖动、放大、缩小展示库husky 代码提交的钩子函数(yorkie 是基于 husky 封装的一个)nanoid、uuid 随机唯一 idlint-staged "gitHooks": { "pre-commit": "lint-staged" }, "lint-stage
2020-09-09 14:38:36
883
原创 iconfont.cn 选择图标生成 scriptUrl 链接
iconfont.cn 选择图标生成 scriptUrl 链接iconfont.cn 地址：https://www.iconfont.cn/，登录啥的就不多说了，没账号的自己注册一个首先新建一个项目，在资源管理，我的项目中然后点击右侧的文件夹，新建项目（这里不太好的是鼠标放上去没有功能提示，不知道每个按钮是干嘛用的） 然后输入所要求的内容就行，这个时候项目就新建完成了然后在图表库中搜索你需要的图标，鼠标悬浮上去的时候回弹出操作栏，点击购物车这个按钮，将图标添加入库选好所需
2020-09-05 16:44:04
3661
原创 antdv4 Icon 的使用
antdv4 Icon 的使用正常使用，按需导入这个就不多说了，需要单独从@ant-design/icons导入，官方都是例子，例如import { MenuUnfoldOutlined } from '@ant-design/icons';<MenuUnfoldOutlined />类型可变，动态设置主要是想说一下提前不知道需要哪个图标，type 是存在后端或者配置文件中的使用场景，这个时候前端没办法知道需要导入哪些图标比如这样的场景，菜单栏的图表是路由表中配置的route
2020-09-05 16:26:32
7879
原创 各种问题解决方案积累
1、Unexpected lexical declaration in case block正如字面意思一样:case块中意外的词法声明，是一个eslint(no-case-declarations)的报错例如：下面代码就会报错switch (name) { case 'zhangsan': const tem = '张三' break; case 'Search': const tem = '李四' break; default： break;解决办法：两种添加块级
2020-08-21 17:14:11
5452
原创 git 合并多个 commit
git 合并多个 commit使用命令git rebase -i commit的hash值步骤最一开始是这样的 5 个 commit ，message 分别是 1 2 3 4 5我们想将 2 3 4 5 这 4 个合并执行 git rebase -i 417b75258e088be649fad163701207049e11acbe 得到下图把 pick 改为 s 或者 squash（具体 s 的含义看 Commands 中每一条的解释，已经很清楚了），怎么改看 vim 的用法（ i 编
2020-08-14 21:19:58
253
原创 开发知识杂记
知识杂记vim 批量替换： %s/username/login_name/ggit 创建附注 tag ： git tag -a v0.1.2 -m “0.1.2版本”git 推送本地 tag 到远端：git push --tags
2020-08-14 18:47:45
163
原创 formily自定义组件开发
自定义组件仅需要支持标准的 onChange 和 value 即可本例子采用 formily + antd + react 实现sandbox参考例子// Form 部分import React from "react";import ReactDOM from "react-dom";import { SchemaForm, SchemaMarkupField as Field, FormButtonGroup, Submit} from "@formily/antd";i
2020-07-30 16:10:05
4352
原创 TS 开发 chrome 插件时第三方声明文件 DefinitelyTyped 的使用
以chrome插件为例，当开发插件时使用 DefinitelyTyped 中的 chrome 类型定义在这个地方搜索所需的第三方类型声明yarn add @types/chrome -D 安装到 devDependencies 中查看 node_modules/@types 中有没有chrome，有的话就可以在全局用了需要在 .eslintrc.js 中添加 chrome 全局定义module.exports = { globals: { chrome: 'readonly', }
2020-07-28 15:17:33
1002
原创 常用工具
生成各种尺寸的图片sips -z 16 16 source.png --out result.png上述命令即可基于 source.png 生成一张 16*16 分辨率的名为 result.png 的图片，可以大生小，小生大png 转 .ico 或者 .icns.ico 是windows用的图标，png 转 ico.icns 是 Mac 用用的图标，png转icns...
2020-07-27 17:41:11
87
原创 immer_1.enableAllPlugins is not a function 问题修复
在 umi 中设置 immer:true 后使用 formily 报错问题解决解决办法使用 npm install 或者 yarn add 在 node_modules 目录下安装高版本 immer，使 node_modules 目录下的 immer是高版本的即可需要知道的前置知识umi2 的 umi-plugin-react 插件设置 immer:true 即开启 umi 内置 immer ，可以更好地操作 reducerformily 使用了 immer ，且使用了 enableAllPl
2020-07-27 16:20:56
717
原创 四舍五入详解
四舍五入详解（这不是你认知的四舍五入）很详细，有很多Demo并提供了在线运行地址。想搞明白得自己多试试三种规则标准四舍五入四舍五基础上正负不一样银行家算法一、标准四舍五入代表工具go语言的decimal运算库numbro库的format（v2.3.1版本后），PR详情描述和名字一样，就是我们大部分人认知的四舍五入例子10.5 ==> 11-10.5 ==> -1110.885 ==> 10.89 (保留两位)-10.885 ==> -10.89
2020-07-16 11:05:08
6417
1
原创 create-react-app 构建chrome插件 TS版
create-react-app 构建浏览器插件项目TS版初始化项目添加less配置，并使用 less module 的样式方式由于creat react app 没有内置对 less 的支持，所以需要自己添加添加 antd 并配置样式修改 manifest.json 并添加插件使用的图标修改配置使 build 完的 index.html 没有 script 脚本友情链接初始化项目yarn create react-app 项目文件名 --typescript，执行yarn eject暴露webpac
2020-07-13 10:03:32
691
4
原创 CSS中用 opacity、visibility、display对比总结
display：none visibility：hidden opacity:0 回流 是 否 否 重绘 是 是 不一定 是否存在 否 是 是 是否占空间 否 是 是 子元素能否设置显示 否 可以 不可以 绑定事件 否 不可以 可以 ...
2019-07-20 21:13:57
442
原创 通俗易懂的 三次握手 && 四次挥手
先贴一张图：红框握手，蓝框挥手，那些具体传输消息什么的我就不细说了，可以参考https://blog.csdn.net/qq_38950316/article/details/81087809下面说一下我的通俗的理解，有错误还请更正三次握手：客户端：我想给你发数据（第一次）服务端：我能收到，你发吧（第二次）客户端：那我发了啊（第三次）四次挥手：客户端：我发完了，我想...
2019-07-04 22:13:54
88
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人