OG-Liu's Blog

　MacOS 使用命令行执行【创建文件】、【创建文件夹】，【npm install】等操作时，如果带了 sudo，会将它们的【所属用户】改成 root。 踩坑记录根据官网文档，一步一步启动运行 Egg.js1234mkdir svg-vuejs-backend && cd svg-vuejs-backendnpm init egg --type=tssudo npm installnpm run dev 报错如下:大概意思就是我们运行项目的时候， node_modules 需要打开某个文件夹去干某些事情，但是没有打开文件夹的权限，所以报错提示权限不足 查看 node_modules 文件夹的权限可以看到【所属用户】是 root，而 npm 出于安全考虑不支持以 root 用户运行，即使你用 root 用户身份运行了，npm 会自动转成一个叫 nobody 的用户来运行，而这个用户几乎没有任何权限。这样的话如果脚本里有一些需要权限的操作，比如写文件，就会崩掉。 解决方案更改 node_modules 所属用户 1sudo chown -R liukun:st ...

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 在 JavaScript ES6 中，export 与 export default 均可用于导出常量、函数、文件、模块等。 export 命令模块功能主要由两个命令构成：export 和 import。export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。 下面是一个 js 文件，里面使用 export 命令来输出变量，函数或类（class） 12345678// a.jsexport const str = 'export 的内容'export const year = 2022export funct ...

导入功能组件重制版 由于后台弹窗导入功能使用过于复杂，源码维护困难，每次使用都需要做很多重复的事情，后端也是如此，于是秉着“使用简单”、“可维护性强”、“性能合理提升”的原则，前后端通力合作重新封装了导入功能组件。 源码位置源码可以研究探讨，但是为了组件的可维护性，请勿随意修改源码 1/src/components/ImportDialogUpgrade 首次提交 git 分支1feature/vDOE-qa4-1006368 组件的引入避免每次使用都需要引入一次，在 plugins 里进行了全局组件注册，它将被 main.js 引入，即在项目中任何地方都可以直接使用组件 123// 专门用于引入组件、插件的文件: /src/pluginsimport ImportDialogUpgrade from '@/components/ImportDialogUpgrade'Vue.component('ImportDialogUpgrade', ImportDialogUpgrade) 使用示例在页面底 ...

网上有很多文章讲解 JS 的运行机制，宏任务、微任务、事件循环等，但是很少有讲得很清晰明白的，我个人总结了一下，主要原因应该有以下几种: 专业词汇过多，且没有解释 由于这个内容属于 JS 相对比较高阶的底层知识，所以默认认为读者很多东西都清楚，所以背景交代不全，讲解顺序混乱 从读者方面来说，JS 的异步操作已存在固有印象，会认为是 JS 的一部分，而不能理解它与单线程、多线程的关系 大部分文章都会配图，而绘制的图上文字描述或者走线的顺序交代不够清楚就很容易看不懂 所以提升了这个部分，也就是 JS 运行机制的相关知识的难度，实际上它并不是很难，于是我便尝试着写这篇文章，希望以最全面的方式梳理清楚整个 JS 的运行机制，欢迎大家留言探讨、交流。 JavaScript 是一门单线程的语言，它多线程的实现是通过 Event Loop （事件循环）机制来实现的。 什么是单线程?首先我们要知道 JavaScript 的一个语言特性就是单线程，也就是说，同一个时间只能做一件事，当有多个任务时，只能按照顺序上一个任务完成了再执行下一个，上一个任务未完成则会一直等待。 123console.lo ...

脚手架开发流程 创建 npm 项目 创建脚手架入口文件, 最上方添加: 1#!/usr/bin/env node 配置 package.json, 添加 bin 属性 编写脚手架代码 将脚手架发布到 npm 脚手架使用流程 安装脚手架 1npm install -g your-cli 使用脚手架 1your-cli 脚手架开发难点 分包: 将复杂的系统拆分成若干个模块 命令注册: 123vue createvue addvue invoke 参数解析: 1vue command [options] <params> options 全称: –version、–help options 简写: -v、 -h 带 params 的 options: --path /Users/ogliu/Desktop/vue-test 帮助文档: global help Usage Options Commands command help Usage Options 命令行交互 日志打印 命令行文字变色 ...

第一步: 查看 GitHub 的 IP 地址进入网址 https://github.com.ipaddress.com 第二步: 查看 GitHub 的 域名 IP进入网址 https://fastly.net.ipaddress.com/github.global.ssl.fastly.net 第三步: 查看 GitHub 的 静态资源 IP进入网址 https://github.com.ipaddress.com/assets-cdn.github.com 第四步: 修改 Hosts 配置文件将上面三步所得的 IP 写进 hosts 文件里 macOS hosts 文件路径: /etc/hosts Windows hosts 文件路径: C:\Windows\System32\drivers\etc\hosts 1234567# GitHub140.82.114.4 github.com199.232.69.194 github.global.ssl.fastly.net185.199.108.153 assets-cdn.github.com185.199. ...

购买免费证书 路径: 菜单 => 产品与服务 => 安全 => 云安全 => SSL证书（应用安全） 创建证书 申请证书 下载证书 服务器类型选择下载 检查证书 上传证书至服务器12scp ./6291212_ogliu.com.pem root@***.***.***.***:/etc/nginx/certscp ./6291212_ogliu.com.key root@***.***.***.***:/etc/nginx/cert Nginx 配置证书 ssl_certificate、ssl_certificate_key 对应证书 1234567891011121314151617181920212223242526272829server { listen 80; server_name ogliu.com; root /*/ogliu/; location / { index ...

什么是 ESlint编码规范每个程序员都有自己的编码习惯，最常见的莫过于: 有的人写代码一行代码结尾必须加分号 ;，有的人觉得不加分号 ; 更好看 有的人写代码一行代码不会超过 80 个字符，认为这样看起来简洁明了，有的人喜欢把所有逻辑都写在一行代码上，觉得别人看不懂的代码很厉害 有的人使用变量必然会先定义 var a = 10;，而粗心的人写变量可能没有定义过就直接使用 b = 10; Lint 的含义如果你写自己的项目怎么折腾都没关系，但是在公司中老板希望每个人写出的代码都要符合一个统一的规则，这样别人看源码就能够看得懂，因为源码是符合统一的编码规范制定的。 那么问题来了，总不能每个人写的代码老板都要一行行代码去检查吧，这是一件很蠢的事情。凡是重复性的工作，都应该被制作成工具来节约成本。这个工具应该做两件事情: 提供编码规范； 提供自动检验代码的程序，并打印检验结果：告诉你哪一个文件哪一行代码不符合哪一条编码规范，方便你去修改代码。 Lint 因此而诞生。 Eslint 的含义Lint 是检验代码格式工具的一个统称，具体的工具有 Jslint 、 Eslint 等等 …… ...

什么是选择排序选择排序 Selection sort 是一种简单直观的排序算法。它的工作原理是：第一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，然后再从剩余的未排序元素中寻找到最小（大）元素，然后放到已排序的序列的末尾。以此类推，直到全部待排序的数据元素的个数为零。 选择排序思路先将数组中最小（大）的元素找到并且标记，即记录最小（大）数据的下标，将找到的最小元素移动到最左侧，也就是目前的下标最小（大）的位置，下次比较就除去上次找到并且移动的最小（大）值，对剩下数据继续重复上述操作，直到排序结束。 选择排序其实可以算是对冒泡排序的一个优化，区别就是冒泡排序每次比较完立刻将大小不对数据进行交换，选择排序跟冒泡的对比时间复杂度是一样的，只是每次内循环都将数据最小的角标标记，一轮比较结束之后再交换数据，所以选择排序的数据交换时间复杂度是低于冒泡排序。 图解 这是第二轮的比较流程图解（升序），黄色表示已排序，也就是说第一轮已经结束，最小的 10 已经被找出来了。 第二轮排序比较，首先红色的就是本轮起始元素，去掉已排序的 10，从 20 开始，所以 20 用红色表 ...

BUG 描述登录页面，选择微信扫码登录，如果是没有绑定企业的微信账号，在微信扫码页面跳转回来的时候，登录页请求接口会返回 400 状态码，然后刷新页面再次请求接口返回 400 状态码，无限循环。 代码分析前端所有的 http 请求全部封装在 request.js 内，每次请求都会走一遍这里面的代码，这里根据不同的 状态码 做了一些处理，经过长时间多人的反复修改，里面穿插了很多 业务处理, 这个 BUG 就是由这部分代码所引起的。 // … 注释部分为与本次 BUG 分析无关的上下文相关代码 123456789101112131415// request.js 修复前代码if (status === 401) { // ...} else if (status === 400) { if (error.response.data.error.message === '当前账户没有绑定企业') { Notification.error({ title: '当前账户没有绑定企业, 请重新登 ...