逸尘️-CSDN博客

原创基于Electron的桌面端应用开发和实践

先简单介绍一下electron。electron是由Github开发的开源框架，现在由OpenJS基金会维护的一个开源项目。它允许开发者使用 HTML、CSS 和 JavaScript 来构建跨平台的桌面应用，而且构建出来的应用，可以很好地兼容 Mac、Windows 和 Linux 这些主流的操作系统。

2022-12-06 18:59:00 7564 1

实现思路：首先，表示目录的对象结构应该是这样的，type treeObj = { "dir": string, // 文件夹路径 "childFiles": { //子文件 "short": string; // 文件名 "full": string; // 完成路径 }[], "childDir": { //子文件夹 [string]: treeObj }}具体细节：读取给定的目标文件夹，不是文件夹的另作处理，获取所有文件和文件夹组成的数组；循环

2020-09-04 09:34:50 3063

原创 WebRTC实现实时互动AI视频应用

前言在此之前，简单介绍下前因后果。最近负责一个人脸和手势识别的可视化大屏项目，需要前端负责视频的抽帧和传输任务。起初，我们使用的是海康威视的摄像头，通过局域网来推送RTSP视频流。因为原生的video标签是不支持rtsp格式的视频的，所以前端采用了视频直播常用的JSMpeg + WebSocket的方案，即JSMpeg 从 WebSocket 服务器拉取 MPEG-TS 流进行播放。JSMpe...

2019-11-01 16:30:38 2167

原创 Chrome Extension插件开发概述

目录一、前言一、Chrome Extension还是Chrome Plugin?二、为什么选择Chrome浏览器？三、关于Chrome Extension四、开发调试1. 调试弹出页(popup)2. 调试选项页(option)3. 调试后台页(background)4. 调试内容脚本(content script)五、Manifest 文件六、content-script文件七、backgrou...

2019-02-02 16:11:42 20018 5

原创 SQL中的DML、DDL以及DCL是什么？

DDL比DML要多，主要的命令有CREATE、ALTER、DROP等，DDL主要是用在定义或改变表（TABLE）的结构，数据类型，表之间的链接和约束等初始化工作上，他们大多在建立表时使用。：它们是SELECT、UPDATE、INSERT、DELETE，就象它的名字一样，这4条命令是用来对数据库里的数据进行操作的语言。：是用来设置或更改数据库用户或角色权限的语句，包括（grant、deny、revoke等）语句。

2024-01-25 18:09:31 644

原创【Bug 解决】Error:failed to solve failed to do request:Head “https://registry-1.docker.io/v2/library/xxx

对应 -a 删除全部未使用的镜像，-f 或 --force 不经过确认强行删除。的系列命令来清理镜像缓存。一般情况下，运维清理镜像是通过命令。这里贴一下我改后的配置，两处改动，增加了国内镜像源地址。但是这条命令不会删除。执行命令，深度清除缓存。命令产生的缓存文件。先查看一下缓存情况，

2023-06-11 21:09:12 6085

原创【Bug解决】docker Desktop在macos上无法登录Post “https://login.docker.com/oauth/token“: context deadline exceed

首先想到的是众所周知的🧱的原因。根据网上的回答，似乎一致认为通过修改docker hub镜像源为国内的即可。docker Desktop更新以后无法登录，在网页中登录成功，回跳到应用中则一直停留在这个状态，需要两步，1. 开启并增加配置代理，2. 重启docker服务。经过约一分钟以后，docker Desktop会弹出提示。前提，还是要借助🪜梯子，配置代理。

2023-06-11 10:09:31 6269 4

原创 mysql循环插入库表数据

mysql循环插入库表数据，json字符串

2023-03-22 10:55:05 217 1

原创解决electron + react单页应用调用localhost服务失败

通过nodejs发送网络请求，或者通过electron的net模块发送网络请求。这两种发送请求的方式，都不受浏览器同源策略的影响。否则，你可能需要用到webSecurity属性。

2022-11-27 13:49:07 1045 2

原创 electron一键生成项目图标

electron项目快速生成所有端的图标文件

2022-09-07 13:01:42 1221

原创【Bug 解决】webpack 报错：Module not found. Did you mean xxx

bug现场：出现原因：当在 .mjs 文件或其他 .js 文件中导入模块，并且它们最近的 package.json 中包含 “type” 字段，且值为 "module"时。引用文件的时候需要包含扩展名，否则 webpack 会提示 Module not found 的错误且编译失败。解决办法：module.exports = { // ... module: { rules: [ { test: /\.m?js$/, resolve: {

2022-04-26 19:04:24 2948

原创【Bug解决】Can‘t perform a React state update on an unmounted component. This is ＞ a no-op, but it...

在 React 应用程序中我们遇到以下警告消息：Can’t perform a React state update on an unmounted component. This isa no-op, but it indicates a memory leak in your application. To fix,cancel all subscriptions and asynchronous tasks in a useEffect cleanupfunction.这是因为我们在使用

2021-11-18 16:37:23 15259 1

原创 css3 sticky不生效的原因？

sticky不生效原因有：父元素设置了overflow:hidden或者overflow:auto未指定top、right、bottom、left4个值中的任意一个父元素高度小于sticky定位的元素高度sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。sticky属性仅在以下几个条件都满足时有效：父元素不能overflow:hidden或者ov

2021-06-20 17:14:41 3118

原创 Eslint配置规则解析

前言ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：ESLint 使用 Espree 解析 JavaScript。ESLint 使用 AST 去分析代码中的模式 ESLint是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。在项目中使用了ESLint后，有些规则会让人抓破脑袋，但是我们有时会觉得某个规则完全没有意义，就想

2021-04-20 18:27:51 653

原创 mp4在线视频测试url

一、搜集一波测试视频，先来一波开箱即用的http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4http://vfx.mtime.cn/Video/2019/03/19/mp4/19

2021-03-24 14:41:04 5319

原创 css中transform的rotate方法可以使用的单位

1、deg度（Degress）。一个圆共360度90deg = 100grad = 0.25turn ≈ 1.570796326794897rad-moz-transform: rotate(2deg);-webkit-transform: rotate(2deg);transform: rotate(2deg);2、grad梯度（Gradians）。一个圆共400梯度90deg = 100grad = 0.25turn ≈ 1.570796326794897rad-moz-trans

2021-02-25 18:01:33 1133 4

原创前端schema表单配置生成方案

一、背景表单Form开发，尤其在中台项目中，是FE????的家常便饭，一般需要大量的重复性工作????：• 编写模板• 编写校验规则• 表单提交（偶尔联动）同时，Server也需要编写校验规则。然而，伴随业务变更和前后端开发同步不及时的情况，前后端校验规则可能会存在不一致的问题。所以「前后端共用校验规则」也可在范畴之内。二、目标减少重复性工作????：通过配置自动生成表单模板，同时这个配置最好还能描述表单校验相关。三、方案选型1.form-render2019年10月阿里开源，基于Rea

2021-01-04 16:22:59 8477 5

原创配置命令行打开vscode

配置方法如下：在vscode中输入command+shift+p，打开命令面板；输入Shell Command；此时会有提示“Shell Command: Install ‘code’ command in PATH”，运行即可；关闭vscode，直接在终端中输入code .，则打开vscode。...

2020-12-14 14:49:01 5408

原创 Nginx正向、反向代理区别

1、什么是正向代理，反向代理？我们常说的代理也就是指正向代理，正向代理的过程，它隐藏了真实的请求客户端，服务端不知道真实的客户端是谁，客户端请求的服务都被代理服务器代替来请求。正向代理的用途：* 访问原来无法访问的资源，如google* 可以做缓存，加速访问资源* 对客户端访问授权，上网进行认证* 代理可以记录用户访问记录（上网行为管理），对外隐藏用户信息反向代理隐藏了真实的服务端，当我们请求一个网站的时候，背后可能有成千上万台服务器为我们服务，但具体是哪一台，我们不知道，也不需要知道，我们

2020-11-19 13:18:41 1061

原创 Android Studio (version 4.1)：Flutter plugin not installed and Dart plugin not installed

问题原因今天在Mac上安装Flutter开发环境时，用 flutter doctor 命令去检测，flutter 和 dart 插件都装好了，却始终检测不到这两个插件，错误如下图所示：怀疑是Android Studio的版本问题，换了3.x的版本是可以，后来经过查阅得知。Android Studio (4.1) 的插件位置换成了~/Library/Application\ Support/Google/AndroidStudio4.1/plugins，而老版本的位置为~/Library/Applica

2020-11-09 14:36:16 3708 14

原创实现前端监控系统的胡思乱想

实现一个系统，统计前端页面性能、页面JS报错、用户操作行为、PV/UV、用户设备等信息，并进行必要的监控报警。方案你会如何设计，用什么技术点，什么样的系统架构，难点会在哪里等等？？这个问题，因为确实没有相关的项目经验，也确实了解的不多????‍♂️。仅凭平日的一些积累和调研，先记录一下个人想法吧????????。开头调研了一波发现，其实有很多成熟的前端监控框架，比如webfunny，通过向html页面中插入一段简单的JS探针代码，实现无埋点监控前端页面的用户行为。感觉有些????????，接下来就这个

2020-06-28 21:16:34 491

原创 js轮询之setInterval踩坑小记

写在开头最近负责的项目要接入计费功能，有了计费自然需要充值。说起充值，无外乎支付宝、微信和网银了，然后前端调用充值接口后，需要起一个轮询任务，去监听支付状态，根据轮询结果来进行下一步的操作（当然了，有条件的大户人家想要直接上websocket也没问题）。所以，业务场景倒是很easy，梳理完逻辑我就吭哧吭哧开搞了…发现问题然而，当我基本写完在调试时，发现每次轮询停止了，页面上的状态会刷新两次。当时的业务是需要我在支付状态时显示验证码过期的倒计时，然而倒计时结束后会重新计时一次，这里可以不关心，原因就是轮

2020-05-25 16:13:31 2689

原创 How JavaScript Works 第4章中文翻译

Chapter 4 How Big Floating Point Works第 4 章大浮点数是如何工作的Don’t be a hero, young man. There’s no percentage in it. ———— Harlan Potter年轻人，别逞英雄了。没有什么好处的。 ———— Harlan PotterA big integer system can so...

2020-05-07 10:06:34 784

原创 git 最常用的几个操作命令

今天下楼陪女朋友散步，边走边读了一篇公众号推送的文章，图文讲解了10个常用的git操作命令，读完以后感觉对这几个命令的理解加深了不少，又愉快的复习了一下git的常识，写个小记再加深一下印象。1. 合并（merge）git merge dev // 合并dev分支上的修改其实，merge分为两种类型：fast-forward 和 no-fast-forward。在当前分支相比于我们要合并的...

2020-05-05 21:52:56 454

原创等宽字体和比例字体

写在开头前段时间，某内部平台发了一条2020年以来的首篇公告，然后便出现了下图的案发现场（其实我一直都没发现@_@，还是可爱的大佬提醒了一下），事出反常必有妖！吭吭哧哧一顿操作，加宽了包裹日期的盒子的宽度修复了问题。发现 2020-02-24 和 2019-04-16 这两个日期的长度竟然不一样诶（原谅我的无知），遂勾起了我的好奇心。于是乎，才知道等宽字体和比例字体这两个概念。我们都知道...

2020-04-19 17:51:56 6355 5

原创 Unicode 和 UTF-8、GBK、GB2312的那些事儿

Unicode 和 UTF-8Unicode 是一种字符集合，现在可容纳 100 多万个字符。是统一编码，它建立了一个全世界统一的码表。每个字符（世界上的所有文字）对应一个不同的 Unicode 编码（在这张码表中都是唯一的），但是它只规定了符号的二进制代码，却没有规定这个二进制代码在计算机中如何编码传输。UTF-8 是一种对 Unicode 的编码方式，它是一种变长的编码方式，可以用 1~4...

2020-03-16 22:53:57 342

原创发布npm包到github packages

GitHub 推出 GitHub Package Registry 后，提供了软件包管理服务，开发者通过它可发布公共或私有软件包。对于开发人员来说非常的方便，目前支持许多大家都比较熟悉的包管理工具，如：npm (JavaScript)Maven (Java)RubyGems (Ruby)NuGet (.NET)Docker images （用于虚拟化 Docker 操作系统的软件）...

2020-03-01 14:12:18 2108

原创 Git配置多用户，区分你的Workspace和Personal space

在工作与学习之间，我们难免会用到两个甚至更多的git账户，为了避免账户之间的混淆，可以在本地配置不同的账户来区分。通常划分的方式有两种，按工程配置多用户按目录配置多用户这里是git的文档，长的很啊。1. 按工程配置git的配置变量可以放在三个地方：/etc/gitconfig 系统配置，对所有用户都生效。~/.gitconfig 用户配置，仅对当前用户生效。git conf...

2020-01-03 15:49:19 992

原创记一次webpack构建提速

写在开头由于业务调整需要，最近接盘了公司内部云平台的项目H。看了代码，开发了几个需求，我的第一感觉是，H项目真的好严肃，还有厚重的历史感。经过多年的开发与维护，H项目经过了数十位前端同学之手，“前任”小伙伴们在里面花费了大量的时间与精力。这里面涉及到的技术栈也错综复杂，包含了react、webpack、reflux、mobx以及不少手动封装的类库和组件，日积月累，已经包含了十几个子项目，代码体积...

2020-01-03 15:48:33 607

原创 iterm2 保存ssh账号自动连接

作为一名coder，我们经常需要连接服务器进行一些操作，然而冗长的ssh密码登录属实有些繁琐。如果你使用了终端工具iTerm2，便可以事半功倍！iTerm2具有很多优点：智能选中，双击选中，三击选中整行，四击智能选中；全文查找 command + f ；窗口垂直command + d、水平command + shift + d 拆分；command + ；自动补齐命令记录历史输入命令...

2019-12-18 15:27:57 3621

原创 webpack中hash、chunkhash和contenthash

https://www.cnblogs.com/giggle/p/9583940.htmlhttps://blog.csdn.net/bubbling_coding/article/details/81561362https://github.com/sorrycc/roadhog/issues/510https://github.com/webpack/webpack/releases/t...

2019-12-04 12:12:23 724

原创配置Prettier格式化代码

什么是Prettier？看下官方文档的说明，这里。Prettier 是一个自定义的代码格式化工具，它支持以下文件格式：JavaScript, including ES2017JSXAngularVueFlowTypeScriptCSS, Less, and SCSSHTMLJSONGraphQLMarkdown, including GFM and MDXYAML...

2019-11-18 14:50:50 8233

原创 git rebase修改commit记录

主要命令git rebase -i 命令开始假如想要修改最近三次提交信息：git rebase -i HEAD~3 //将想要修改的父提交作为参数，即`HEAD~3^`同理，修改最近第五次提交信息：git rebase -i HEAD~5 //将想要修改的父提交作为参数，即`HEAD~5^` 使用上述命令后，会出现类似的界面pick f7f3f6d 修改首页bugp...

2019-10-12 15:07:41 1329

原创 React15中组件的生命周期

生命周期的三个阶段（初始化阶段、运行中阶段、销毁阶段），三者时间是不固定的，只是在逻辑上的分类，react在不同的生命周期会触发不同的钩子函数。一、初始化阶段：　　getDefaultProps:获取实例的默认属性(即使没有生成实例，组件的第一个实例被初始化CreateClass的时候调用，只调用一次,)，作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共...

2019-10-12 14:56:31 877

原创 css hover给当前元素或其他元素添加伪元素

1. 作用于本身伪元素a:hover::after { content: ""; position: absolute; left: 16px; top: 24px; bottom: 0; right: auto; height: 2px; width: 30px; background-...

2019-10-10 11:36:22 3378

原创 Mac版vscode常用快捷键

收录一下本人常用的vscode快捷键Option + Up 向上移动行Option + Shift + Up 向上复制行Option + Shift + A 添加、移除块注释Option + Shift + F 格式化文档Command + Shift + K 删除行Command + Enter 下一行插入Command + Shift + Enter 上一行插入Command ...

2019-09-24 10:48:08 2899

原创 js中使用Clipboard API获取剪贴板内容

首先，单纯的 JavaScript 没有一个很完美的访问剪贴板（Clipboard）的方案W3C 标准下的做法（webkit/opera）：使用：Clipboard API and eventsclipboardData.getData('text/plain')IE 下的做法：IE支持的时候 W3C 标准还没有，所以只能用 Text 参数：clipboardData.getData...

2019-09-17 16:00:15 19073

转载 Common getUserMedia() Errors

在你的getUserMedia()开始运行的那一瞬间，就会遇到各种各样的错误：用户没有摄像头，只有一个麦克风用户（不小心地）拒绝了浏览器的使用摄像头请求用户在你的getUserMedia()代码已经初始化之后才将摄像头/麦克风插到电脑上媒体设备已经被其他的应用所占用了只针对Firefox：设备已经被Firefox浏览器的其他标签页所占用了为了解决这些状况，在...

2019-09-03 10:49:30 623

原创 getUserMedia video视频镜面反转

场景是这样的，我需要调用摄像头不间断地抽帧，发送给后端，后端通过调用人脸库模型进行人脸识别，手势识别。在此之前，我们尝试了使用摄像头推流的方法，把视频流通过node服务层中转（因为摄像机的ffmepg流不能直接播放），前端拉流以后抽帧。后来，因为上述方式衍生问题比较多，传输慢、视频延迟、清晰度等问题逐渐暴露，虽然后面一一解决，但是我们还是想尝试新的方案，以此达到更佳的体验效果。于是乎，我们买...

2019-09-02 16:28:12 7868 8

原创 Git常见操作教程

文章目录修改commit注释1. 已提交但并未push2. 修改已push的历史注释修改commit注释1. 已提交但并未pushgit为commit命令提供了–amend 参数git log查看最近的commit记录后，确认修改的是最新的一次commit注释。执行git commit --amend，然后利用vim来进行编辑新注释。(vim可按i键进入编辑模式，esc退出编辑模式，wq保...

2019-07-29 10:34:01 115