![](\"https://img.kuizuo.cn/image_deb0_lGYRA.png\")
![](\"https://deno.land/logo.svg\"){kind=logo}
Deno 是一个安全的 JavaScript 和 TypeScript 运行时，作者是 Ryan Dahl（也是 Node.js 的原作者）。Deno 的诞生之初是为了解决 2009 年首次设计 Node.js 时的一些疏忽。我认为这种改造动机很有道理，因为我相信每个程序员都希望有机会能重写他们已有 10 年历史的代码。
deno 刚出的时候就听闻了，传言 deno 是下一代 node.js。不过如今看来，还革不了 node.js 的命。如果要说两者字面上的区别，Deno 的来源是 Node 的字母重新组合（Node = no + de），表示\"拆除 Node.js\"（de = destroy, no = Node.js）。
趁着假期学了一段时间的 deno（指文档刷了一遍），想分享本人作为 node 开发者在学习 deno 时认为的一些亮点，以及个人对 deno 与 node 见解。
默认情况下 deno 会根据不同的系统，选择相应的安装目录，以及依赖目录，你可以配置环境变量来改变 deno 的默认行为。
这里我选用 vscode 进行开发，安装deno 官方插件。此时创建一个项目工程文件夹，打开 vscode，并创建 .vscode/settings.json 内容如下
{
\"deno.enable\": true,
\"deno.lint\": true,
\"editor.formatOnSave\": true,
\"[typescript]\": {\"editor.defaultFormatter\": \"denoland.vscode-deno\"}
}
在 vscode 中默认会将 ts 代码认为是 node 运行时环境，因此需要在项目工程下手动配置并启用 deno，让 vscode 以 deno 运行时环境来语法解析 ts 代码。
因为 deno 与 node 一样，都是 javascript 运行时（deno 合理来说是 typescript 运行时）。所以在 javascript 的部分就没什么好说的了，主要对比 deno 相比与 node 的优势，或说我个人觉得一些使用亮点。
以下是官方所介绍的亮点，我对其做了翻译
提供web 平台功能，采用网络平台标准。例如，使用 ES 模块、Web worker 和支持 fetch()。
默认安全。除非显式启用，否则无法访问文件、网络或环境。
支持开箱即用的 TypeScript。
提供单个可执行文件 （deno）。
为编辑器提供内置的开发工具，如代码格式化程序 （deno fmt）、linter （deno lint）、测试运行程序（deno test）和语言服务器。
拥有一组经过审查（审核）的标准模块，保证与 Deno 一起使用。
支持使用现有的 npm 模块
以下会针对部分亮点，进行个人的见解。
deno 则是自带代码格式化（deno fmt）、代码风格（deno lint）、代码测试（deno test）、依赖检查器（deno info）等等的功能。而这些在 node 中，你需要通过第三方的库，如 eslint，jest 才能实现。
你可以在项目工程中添加配置文件 deno.json来定制化代码风格（rust 中也有类似的功能），但在 node 中必须要借助第三方的库，或是 IDE 才能实现。
不过也能理解，在当时的编程环境背景下，javascript 还主要作为前端的脚本语言使用，又怎能让 node 来做相关规范呢？（这句话可能有点不妥）
这点我认为对开发者是否选用你这门语言的一个加分项，并且这些功能也应该作为编程语言所自带的，有官方的背书（保证），对代码风格才更有所保障。
这里有份 官方小抄 可以知道通过deno xxx等命令能够做到 node 原本需要通过第三方库才能实现的功能。
| Node.js | Deno |
|---|---|
node file.js | deno run file.js |
ts-node file.ts | deno run file.ts |
npm i -g | deno install |
npm i / npm install | n/a |
npm run | deno task |
eslint | deno lint |
prettier | deno fmt |
rollup / webpack / etc | deno bundle |
package.json | deno.json / deno.jsonc / import_map.json |
tsc | deno check |
typedoc | deno doc |
jest / ava / mocha / tap / etc | deno test |
nodemon | deno run/lint/test --watch |
nexe / pkg | deno compile |
npm explain | deno info |
nvm / n / fnm | deno upgrade |
tsserver | deno lsp |
nyc / c8 / istanbul | deno coverage |
benchmarks | deno bench |
与 node 不同，使用 node 通常需要从 npm 官方包来下载并导，有 npm 这样的包管理器来统一管理这些包（package），我们通常称这种为中心化，而 deno 与 go 的做法很像，你可以将你的封装好的代码定义成一个包，并将其放在任何网络可访问的地方，比如 github，或是私有地址，然后通过网络读取文件的方式来导入，这种称为去中心化。
node 也不一定要用 npm 来下载模块，也可以本地模块或者私有模块。
关于中心化与去中心化管理，各有优缺，这里不做细致讨论。
以下是 deno 官方远程导入的代码示例：
Command: deno run ./remote.ts
import {add, multiply} from 'https://x.nest.land/ramda@0.27.0/source/index.js';
function totalCost(outbound: number, inbound: number, tax: number): number {
return multiply(add(outbound, inbound), tax);
}
console.log(totalCost(19, 31, 1.2));
console.log(totalCost(45, 27, 1.15));
/**
* Output
*
* 60
* 82.8
*/
而这里的 https://x.nest.land/ramda@0.27.0/source/index.js 可以替换成任何 ES module 特性（import/export）的模块。
既然都能通过 http（cdn）远程导入模块，那远程运行文件自然也不成大问题。有时候像快捷体验一下别人的代码，或是想要在浏览器中运行一下代码，这时候就可以通过 http 的方式来运行代码。
这里我准备了一段代码，并部署到我的站点上，你可以通过如下命令得到该代码的执行结果（如果你有安装 deno 的话），放心这段代码并无危害，就是一段简单的 console.log 输出。
deno run https://deno.kuizuo.cn/main.ts
在第一次使用时下载并缓存代码，你可以通过
deno info http://deno.kuizuo.cn/main.ts
来查看文件信息，如下
deno info 还可以查看 deno 的相关配置，默认缓存都设置在 C 盘，你也可以设置DENO_DIR 环境变量来更改 deno 目录，可以到 Set Up Your Environment 查看 deno 相关环境变量。
经常使用 node 的开发者应该对 node 的依赖感到无比厌烦，关于这部分强烈建议看 node_modules 困境，你就能知道 node 的 node_modules 设计的是有多少问题。看完你也就能知道为啥越来越多的 node 项目都使用 pnpm 作为包管理。
虽然 node 有了 pnpm 包管理器这种情况会好一些，但本质在项目目录还是需要 node_modules 文件。也许你用过其他语言的包管理器，你会发现基本都是将所有用到的依赖全局缓存起来，当不同的项目工程需要用到依赖时，直接去全局缓存中找，而不是像 npm 一样，下载到项目工程目录下，存放在 node_modules 里。
而 deno 也是采用这种这种方式，no npm install，no package.json，no node_modules/ ，使用 npm 包可以像下面这样，当你使用 deno run 时便会下载好依赖置全局缓存中。
// @deno-types=\"npm:@types/express@^4.17\"
import express from 'npm:express@^4.17';
const app = express();
app.get('/', (req, res) => {
res.send('Hello World');
});
app.listen(3000);
console.log('listening on http://localhost:3000/');
deno 刚发布的时候，甚至还不支持 NPM 软件包，这无非是要告诉用户 deno 社区没有轮子，要求用户自己去造一个。不过 deno 团队还是做出了比较正确的选择，支持 npm 软件包，并且还非常友好。
不过如果你在 deno 中使用了 npm 包，可能会存在一些兼容性问题，万一遇到了，也可以通过添加 --node-modules-dir 标识，在当前运行目录下创建 node_modules 文件夹。详见 --node-modules-dir flag
在 2022 年 npm 出现过一些恶性的库，如 lodash-utils, faker.js, chalk-next。万一你不小心安装了上面，轻则项目无法运行，输出无意义乱码，重则删除本地文件。
又因为 npm 几乎没有代码审计的机制，任何开发者只需要有一个 npm 的账号就能在上面随意发布他想发布的包。通常来说电脑病毒都是通过随意读取与写入本地文件来达到病毒的目的，但在 deno 中，代码如果尝试写入与读入文件，都需要询问开发者是否允许操作。并且在 linux 系统，你可以指定像 /usr /etc 这样非 root 角色来操作该文件，避免真是病毒文件导致删除不该删除的文件。
此外像命令执行，网络访问，环境变量这些极易危害电脑的权限，deno 都会检测到，并做出提示告诫开发者是否允许执行。总之你能想到的电脑安全隐患，deno 都为你做好了。
这是我认为 deno 最大的亮点。
总所周知，浏览器的 js 代码有很大概率是无法直接在 node 中跑起来的，原因就是 node 的全局对象中没有浏览器的对象，如 window，document，甚至连localStorage 都有！
这说明什么，往常如果你从别的网站扣了一段代码下来，想在 node 运行会发现什么 window is not defined，xxx is not defined。如果想在 node 运行，你必须需要补齐浏览器的环境，此外可以借助 js-dom，happy-dom 等 npm 包。而 window，xxx 这些全局只有浏览器才定义的全局对象在 deno 的运行时同样定义了，可以到这里查看支持的 Web 平台 API。
虽说与真实浏览器全局对象有些许差异，但这也足够让开发者少做很多工作。比如 Web 逆向者通常要扣取浏览器的 js 代码，并补齐环境使其能够在 node 中运行，而有了 deno 这将变得非常轻松！
与其说是 javascript/typescript 运行时，我更愿意说是浏览器运行时！
你可以在 Web Frameworks 中看到 deno 官方所推荐的 Web 框架，其中 Fresh 也是最为推荐使用的（后续我也会尝试使用该框架）。
而在 node 社区中，你会看到像 express，koa，nestjs 等等这种非 Node 官方或大背景的 web 框架（而且还很多），而这时对于初学者而言，就有点不知道该如何做出抉择。
而像 java 中你完全可以不用担心该学什么，说学 spring 就是在学 java 这可一点都不为过。可能这也是国内 java，尤其是 spring 的开发者尤为诸多的原因。
吐槽归吐槽，但我想表明的是在有官方的支持下，用户和开发者能够统一使用某个框架，一起维护与使用一个更好的框架。而不是个个 Web 框架的都有各自的优缺点，让使用者去选择，搞得这个框架是另一个框架的轮子一般。
所以我认为这种支持是很有必要。
deno 像 vercel/netfily 一样提供了一个代码托管服务，可以将你的 deno 应用部署上去。对，目前来看还无法部署前端应用，因为要指明一个入门文件（main.ts）。
你可以通过 https://kuizuo.deno.dev/ 来访问我使用 deno Deploy 所创建的一个在线项目。将会输出一个Hello World! 的页面。
提供一个免费的线上环境体验，对开发者而言尤为重要，尤其是在将自己的项目成果分享给他人展示时，成就感油然而生。
deno 相关的亮点我也差不多介绍完了，也许你对 deno 已经有一丝兴趣想尝试一番，以下我整理的对你也许有所帮助。
如果你是一个 Node 用户，考虑切换到 Deno，这里有一个官方小抄来帮助你。
如果你不想刷 deno 文档，想快速上手 deno 的话，这里我建议推荐看看 deno 官方所推荐的deno 代码例子 ，能够非常快速有效了直接了解 deno 标准库以及依赖导入导出。
deno 是集成了 node 与 npm 的，也就是说允许直接使用 npm 包与 node 标准库，如果你想用 deno 来写 node，也行，详看Interoperating with Node.js and npm。
想要在 deno 中连接数据库，可看Connecting to Databases。
如果想看 deno 如何使用 deno 生态的 Web 框架创建一个 Web 服务，推荐fresh框架，并查看该例子fresh/examples/counter
关于 deno 就暂且落下笔墨，不妨思考一个问题，node 火吗。
作为 node 开发者，我肯定会说 node 火，不过更多是对 javascript 来说火。
2022 也结束了，不妨查看 2022 State of JS 数据报告统计，看看 JavaScript 在 2022 年是如何发展的吧。
如今 typescript 大势所趋，说 javascript 就等同于说 typescript，而 javascript 和 node 绑定已成事实，而前端也与 javascript 所绑定，如今的前端工程师要是不会 node，都不好意思说自己是个前端工程师。就现阶段看，没了 nodejs，前端技术得倒退十年（不夸张）。
如果是在 Web 前端，Node 确实已经火的一塌糊涂了，然而它的诞生并不是为了 Web 前端，而是希望将 javascript 作为服务器端语言发展。只是后来没有想到的是 Node.js 在前端领域却大放异彩，造就了如今大前端的盛世。
所以在 Web 后端的领域，Node 确实是不温不火，更多的公司都宁可选主流的后端开发语言，而不是优先考虑 Node。不过倒是在 Serverless 领域中，Node 有着一席之地。
所以我想 deno 的出现，不仅是针对 Node.js 的缺陷，更是针对 Node.js 后端开发的不足。至于说 deno 能否完成原先 node 的使命，只有时间能给我们答案。
从上述看来，你应该会发现 deno 并不和 node 一样是一个纯运行时环境。因为他不仅仅做了 javascript/typescript 运行时环境，还做了很多开发者好评的功能，一个为 javascript/typescript 提供更好的开发支持的产品。
但好评并不能直接决定销量，这些功能看似可有可无，没有激起用户从 Node.js 切换过来的杰出之处。就我体验完发现，好像 deno 能做的东西 node 大部分也能做，只是相对繁琐重复一些而已。但人们更倾向于做一件繁琐重复的事情，而不是做一个新的事情。
扪心自问，我真的很希望 deno 能火，就开发体验而言，比 node 好用太多了，但好用的东西代表不了用的人就多，这个领域中，生态尤为重要。想要让 node 用户转到 deno 开发还有很长一段路要走。
再来反问自己，我现在会将 deno 作为 node 替代品吗，我想我和多数 node 开发者一样，都不会将 deno 作为主力语言(因为有很多项目都已经使用node来进行开发与推动)。但作为个人开发者，尤其是 node 开发者，我认为还是非常有必要去尝试一番 deno，亲手目睹\"下一代Node\"。
希望本文能对你了解 deno 有所帮助。
Deno vs. Node.js 哪个更好 - 掘金 (juejin.cn)
为什么 Deno 没有众望所归？超越 Node.js 还要做些什么？ - 掘金 (juejin.cn)
连发明人都抛弃 node.js 了，还有前途吗？ - 知乎 (zhihu.com)
已经 2022 年了 Deno 现在怎么样了? - 知乎 (zhihu.com)
", "url": "https://kuizuo.cn/deno-is-not-only-a-javascript-runtime", "title": "Deno不只是个Javascript运行时", "summary": "Deno 是一个安全的 JavaScript 和 TypeScript 运行时，作者是 Ryan Dahl（也是 Node.js 的原作者）。Deno 的诞生之初是为了解决 2009 年首次设计 Node.js 时的一些疏忽。我认为这种改造动机很有道理，因为我相信每个程序员都希望有机会能重写他们已有 10 年历史的代码。", "date_modified": "2023-01-20T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "deno", "node", "javascript", "typescript" ] }, { "id": "rust-wasm-md5", "content_html": "![](\"https://img.kuizuo.cn/wasm-ferris.png\")
我初识 WebAssembly 是当初想要分析某个网站的加密算法，最终定位到了一个 .wasm 文件，没错，这个就是 WebAssembly 的构建产物，能够直接运行在浏览器中。在我当时看来这门技术很先进，不过如今看来绝大多数的 web 应用貌似都没使用上，迄今为止我也只在这个网站中看到使用 WebAssembly 的（也许有很多，只是没实质分析过）。
恰好最近正在接触 Rust，而 Rust 开发 WebAssembly 也非常方便，因此本文算是我对 Rust + WebAssembly 的初探。
有关 WebAssembly 不做过多介绍，你可以到 MDN 中查看相关介绍。本文重点于 Rust + WebAssembly 实践与相关工具，在 Rust and WebAssembly (github.com) 或 https://github.com/rwasm 中查看 rustwasm 相关生态。
下载 wasm-pack，用于将 rust 代码打包成 .wasm 文件
cargo install wasm-pack
使用 cargo 有可能无法安装 wasm-pack（笔者就安装不了 openssl-sys），可以到 wasm-pack 官网下载对应的二进制文件进行安装。
cargo new --lib hello-wasm
将会创建 rust 库工程，并创建 src/lib.rs。修改为以下内容（先不必在意代码）
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern {
pub fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet(name: &str) {
alert(&format!(\"Hello, {}!\", name));
}
接着在 Cargo.toml 文件中添加 wasm-bindgen 依赖，wasm-bindgen 来提供 JavaScript 和 Rust 类型之间的桥梁，允许 JavaScript 使用字符串调用 Rust API，或调用 Rust 函数来捕获 JavaScript 异常。
[package]
name = \"hello-wasm\"
version = \"0.1.0\"
[lib]
crate-type = [\"cdylib\"]
[dependencies]
wasm-bindgen = \"0.2\"
wasm-pack build
WebAssembly 构建产物将会输出在 pkg 目录下，如下
├─pkg
| ├─.gitignore
| ├─hello_wasm.d.ts
| ├─hello_wasm.js
| ├─hello_wasm_bg.js
| ├─hello_wasm_bg.wasm
| └─hello_wasm_bg.wasm.d.ts
如果想当 npm 包发布的话，可以添加 —scope 参数，将会在 pkg 下生成 package.json 文件用于发布或当做一个 npm 包来使用，这样也可以在前端工程中直接当做一个模块来导入使用。
wasm-pack build --scope mynpmusername
借助 wasm-pack 可以非常轻松的将 rust 打包成 wasm，同时还提供了 js 相关支持。直接打包成 js 可导入的 npm 包，而不是让用户导入 wasm 文件然后通过浏览器 WebAssembly 对象来加载 WebAssembly 代码，其他语言的 WebAssembly 开发也是如此。
此外 rustwasm 还提供了对应的模板 rustwasm/wasm-pack-template，可以帮你省去上面的一系列配置操作，专注于你的 wasm 开发。
由于上面我们已经将其打包成了一个 npm 包，只需要将配置好 package.json 的依赖即可，本地的话可通过下方格式，将 pkg 目录更改为 hello-wasm，并放置在根目录下。
\"dependencies\": {
\"hello-wasm\": \"file:./hello-wasm\"
},
这时候就可以通过 js 直接导入使用
const js = import(\"./hello-wasm/hello_wasm.js\");
js.then(js => {
js.greet(\"WebAssembly\");
});
在 vite 生态中有个 rwasm/vite-plugin-rsw 插件，能够在 vite 中快速使用 wasm-pack。下文中的一个应用示例也将采用该插件进行开发。
回到一开始的标题，在实现这个功能我一般会想 js 如何实现 MD5 算法，通常来说 MD5 算法是个比较流行的加密算法，通过搜索引擎能够快速帮我找到一份 js 的 MD5 算法。不过我更习惯通过包管理器导入的加密库，如crypto-js。
同理，在 rust 中可以到 crates.io 中也可以找到你想要的库，如 digest，不过我这里主要是实现 MD5 算法便使用的是 md-5。以下是我的封装代码。
use md5::{Digest, Md5};
fn md5(input: &str) -> String {
let mut hasher = Md5::new();
hasher.update(input.as_bytes());
let result = hasher.finalize();
format!(\"{:x}\", result)
}
fn main() {
let result = md5(\"123456\");
println!(\"{}\", result);
}
然后将这一部分的代码替换到一开始的示例中。
extern crate wasm_bindgen;
extern crate md5;
use wasm_bindgen::prelude::*;
use md5::{Digest, Md5};
#[wasm_bindgen]
pub fn md5(input: &str)-> String {
let mut hasher = Md5::new();
hasher.update(input.as_bytes());
let result = hasher.finalize();
format!(\"{:x}\", result)
}
此时通过 wasm-pack 将上述代码打包成 npm 包形式即可在 js 中调用 rust 提供的 md5 函数，至此就已经完成了本标题的内容了。
这里我所借用 rwasm/vite-plugin-rsw 插件，在 vite 中配合 wasm-pack 进行开发的一个实例。代码部分就不做解读了，有兴趣可自行到翻阅源码：kuizuo/rust-wasm-md5
在线地址：http://rust-wasm-md5.kuizuo.cn （不保证地址长期可用）
![](\"https://img.kuizuo.cn/image__XHPNCbC-B.png\")
众所周知，你在浏览器中按下 F12 打开 DevTools，并选择源代码面板中就可以看到当前访问的网站的所有代码。
![](\"https://img.kuizuo.cn/image_6019y_U19n.png\")
而对于一些具有熟练度的逆向分析者中，如果不经过任何处理的代码被打包到生产环境中能够快速的定位出某个功能的具体代码位置。
而通过 wasm 就能很有效的将代码隐藏起来，不让逆向分析者查看，就像下面这样
![](\"https://img.kuizuo.cn/image_BbA3n6wFws.png\")
![](\"https://img.kuizuo.cn/image_81tgfDE_P7.png\")
这里我并没有将 md5 更改成不易猜测的名字，你也可自行下断点尝试一番，定位代码。当你定位到具体代码后，就会得到上图的二进制代码格式，几乎无法解读其意思。
不过虽说解读不出 wasm 的原代码（至少目前来说很难反编译成原始代码），但可以通过扣代码的方式来调用 wasm 对外提供的函数（这里为 md5 函数）。
这里仅是 wasm 的一种实际用例，更多情况下应该还是用 Wasm 来提高 web 应用性能的。
编译 Rust 为 WebAssembly - WebAssembly | MDN (mozilla.org)
前端入门 ｜ Rust 和 WebAssembly - Rust 精选
rwasm/vite-plugin-rsw: 🦞 wasm-pack plugin for Vite (github.com)
", "url": "https://kuizuo.cn/rust-wasm-md5", "title": "Rust实现MD5加密并打包成WebAssembly调用", "summary": "我初识 WebAssembly 是当初想要分析某个网站的加密算法，最终定位到了一个 .wasm 文件，没错，这个就是 WebAssembly 的构建产物，能够直接运行在浏览器中。在我当时看来这门技术很先进，不过如今看来绝大多数的 web 应用貌似都没使用上，迄今为止我也只在这个网站中看到使用 WebAssembly 的（也许有很多，只是没实质分析过）。", "date_modified": "2023-01-04T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "rust", "wasm" ] }, { "id": "2022-year-end-summary", "content_html": "距离上一篇博文有一个月之久了，距离上次编写代码也有一周之久了，由于疫情的全面放开，加上福建省教育厅通知的提前返乡，反而让我感到有些不适。往常这个时间点我忙于期末考试，会把代码的事情放一边，等到彻底放假后，开始闭关潜心学习。然而剩余的半个月变成了线上形式，课还是要上，考试还是要考，虽说身在家乡，但心不在焉的 😂。
12 月已过半，也是时候该写年终总结了。迄今为止，我已学习了 3 年半的编程。（还好不是两年半），当下的技术不再是当初只会易语言的小伙了。只是当下已没有当初如此强烈的热情与精力了，我称之为老了。
现在回头回顾学习编程时间，用一个成语对自己做个评价——差强人意。在这些时间段，我其实荒废过一段时间，厌倦过，贪玩过，荒废过，从我的 Github 热力图 中其实就能看得出来。就导致欠下技术的，都需要后续花时间去弥补。
要让自己保持每天都处于学习状态真的太难了 😩，生活总有源源不断的琐事打扰着你。在忙碌的时候总是感觉时间不够用，哪怕有时一天花费了数十个小时，也总感觉做的事情太少了；哪怕每天计划都规划得好好的，但总是有一半还未完成。生活中大量的碎片化时间，而编程学习最不需要的就是这些碎片化时间。
回顾整个编程生涯有太多可感慨的，整个旅途几乎是一个人走完的，期间遇到的坎坷就只得依靠搜索引擎来解决，搜索引擎是我再生父母都不为过。没有人给我指引明确的道路，只依靠心中对技术的憧憬不断前行。走过低谷，登过山峰，而如今站稳身子就足矣。
感叹的话语也就是说到这。今年主要总结我为何从逆向转 Web 开发，并明确我未来所要走的方向，也是本文的主题。仅作为个人感悟，不作为建议参考。
先回答一个问题，为什么要写年终总结？
我从高中开始，每年都会记录这一年所发生的比较有印象的事情并写下自己的感悟。所以写年终算是个人习惯，并且我希望能够一直坚持下去，写到不能写为止。
写年终总结是个非常好的自我总结与反思的方式，总结这一年自身的变化，有哪些精彩与满足，有哪些遗憾和不足。同时定制明年的规划，以该目标不断前行，而不是漫无目的地活着，就失去了很多人生的意义。
同时也算是自我评价与建议，很多时候我们会收到很多别人有关自己的评价与建议，可人总会对他人有莫名的排斥感，就难以虚心听从他人的建议，从而犯错许多（说的是我就对了）。年终总结还有个作用就是弥补自己对某件事情未来可能要发生的情况，要如何做到不犯错，预先有个明确的预防意识。
即便可能要花数天的周期去回顾与总结，我也很愿意去总结，我常说回顾过去，就是在仰望未来。写年终所做的也就是这个过程。
写年终总结也算是种分享，分享自己的开发经历，当他人阅读时或许有所启发。
过去的，就过去了，别将当下的遗憾留到未来，这就是年终的最大意义。
今年大部分的开发时间都花在 Web 开发上，在此期间也接触到许多技术，并通过博客笔记的方式记录下来。
我很庆幸我的 Web 开发从一个 Beginner 到 Intermediate，现在回忆整个学习路程，一路学得都很野很随意，从未系统学习过，总是学到一半，就自认为已经掌握了，便开始进行实战项目，可以说很多知识都是在实战探索中了解的。
虽然很多人都直称我为大佬，但我离 Advanced 还有一大段的路途要走，而这段路途是无比的艰难与漫长。不过好在路不歪，只要肯走终会到达终点 👨🦲。
而带我入门的逆向技术，在今年没有丝毫的长进，说得过分点，就是弃坑了。也正如标题所说，至于缘由，细看下文。
熟悉我的人应该知道我之前是做爬虫与逆向分析，但是为何今年的技术栈彻底转型到 Web 开发上。
我常常和别人说起我的技术栈转型（从逆向转到开发），不过比较多的都会比较好奇我为什么不继续深造下去。
在此我也回顾了我从逆向转变到 Web 开发的过程，顺带也回答这个问题。不过在这里先说说我个人对逆向的看法：
就我接触逆向的过程来说，接触了易语言，JavaScript，Python，Java，Php 等等编程语言。
使用过了一堆的逆向工具，如 Frida、IDA、JEB、jadx 等等（我目前能想到比较有名的）。此外还有一堆知识，包括但不限于以下技术：自动化脚本、TCP/HTTP 协议、抓包、爬虫、加密学、图像识别（验证码、滑块位置）、汇编、反编译、AST 反混淆。
要我说我在逆向中学到的不是如何使用这些工具或掌握某个技能，而是锻炼出一定的阅读与分析代码能力。工具与技能总是瞬息万变，但阅读与分析代码能力却是实实在在，一成不变的，也是逆向中最值得学习的。
有接触过 CTF 想必再熟悉不过逆向工程的技术面广了。
逆向分析，说白话就是去看别人的代码，进行一些修改手段，达到自己想要的目的。比如修改某个软件的标题或作者信息、将别人的代码“偷”过来用、爬取某些网站或软件的数据。
但是随着现在越来越多潜在的安全问题，很多框架底层，服务厂商，都会对一些可能有安全问题的代码进行警告或者底层处理。比如使用 ORM 框架能够有效防止 SQL 注入，前端框架中涉及 XSS 攻击也会有相应的错误提示与处理，再如浏览器跨域以及跨站点 cookie 不共享，都是为了用户的安全而去考虑的。这样的例子有太多了。
简单说说安卓逆向的过程：拿到一个 Apk，发现有加壳（给代码加固让逆向者不易于看到源代码），这时候就需要通过脱壳才能查看到源代码；此时就算脱完了壳，接下来可能将面对经过混淆过的代码，这份代码难以用人眼去阅读，不调试运行，单靠静态分析很难分析出东西，这时候可能就要借助 AST 对代码进行还原；还原完了配合动静分析将代码给扣出来，而在分析的时候可能又有各种检测，比如抓包，反调试以阻碍逆向进度；最后就算逆向工作都做完了，代码也扣下来了，还要尝试运行扣完的代码，这时候极大可能还不一定能运行，然后又要回头看看到底那一步做错了。
可以说逆向的工作就是不断地调试，不断分析，最终拿到想要的结果。整个过程可以说非常耗时且折磨人，心智如果不够强大，真的容易劝退（我当下耐心也早不如当初了）。但是得到最终的目的，将非常爽，成就感爆棚，相当于一个解了几小时的题，最终被攻克的感觉。
前阵子在逆向圈中，看到过一张图，大致也把我的逆向学习流程也表达了出来，最终我的逆向学习也确实止步在 Flutter 上。
![](\"https://img.kuizuo.cn/1cd67d5812e3061e_zy9LIkXWIM.jpg\")
上面所说到的逆向技术中，例如加壳，代码混淆，反调试，风控等等，都是阻碍逆向手段。同样对于爬虫而已，通常会采取反爬措施，包括但不限于封 IP、封账号、JS 参数加密、代码混淆、浏览器指纹、TLS 指纹、验证等。而且防护手段可以说是越来越多，逆向的难度也就越来越大。并且在服务开发那边只需要修改一点东西，逆向可能就需要从头再来一遍。
未来逆向的难度只增不减，但薪资可不一定保证这趋势。
从上面也不难看出逆向常常与安全挂钩，如果一个网站或软件不是那么好被逆向，那么间接说明安全性是比较高的。可一旦涉及到安全，同时又是互联网，就免不了网络安全与法律相关的风险。
在大多数逆向的对象（网站，软件）中，多数都是他人的劳动产物，当你未经他人允许的情况下，去爬取他人的数据，或是修改一些版权信息再次发布出来，就属于非法行为。本质和未经他人允许，偷人家的东西性质是一个样的。并且在有防护措施的情况下，绕过网站防护措施获取数据属于违背权利人意愿读取、收集数据，将有较大可能被认定为对计算机信息系统的 “侵入”。
要知道在逆向的行业中，有很多都是擦边灰产，至少我所在的逆向圈是这样的，抱着【仅供学习为参考，请勿用于非法用途】的想法做逆向工程。路子极易走歪，很少能够正常去走安全岗位的。相信你应该能看到许多类似的案件，如【某某程序员因非法侵入 xx 网站，获刑 x 年】。这不是危言耸听，目前国家对网络安全以及非法数据获取的打击力度，也将决定了这些案件将会越来越多，爬虫逆向也将会越来越邢。
简单介绍完我认为爬虫和逆向的看法后，再来说说自身因素。
我是很享受写代码的过程，一份高质量的代码会让人赏心悦目。我为此特意学习下设计模式、重构技巧以及 TDD 测试。这些在逆向中基本难以涉及，但是这些对开发的体验和代码的健壮性都是非常重要的，也是让我个人觉得技术有所提升的技能点。
在逆向分析中，大部分时间都不是在写代码而是在看（分析）代码，而反编译出来的代码，很有可能是带有混淆过的代码，而你想要分析这一块代码的作用，只能去一步步调试，将代码啃下来，从而推断运行时某变量的值，或是某个函数的作用。
虽然说开发岗位中，有很多情况下也是在看代码的日子中度过的，但相比反编译阅读代码而言，至少不至于那么晦涩难懂。
其次，在逆向分析中，遇到的网站或软件所用的技术一般都是较为稳定成熟的技术，而这些技术往往不是很新，因此需要去了解很多旧的技术，但这些旧技术仅仅只对逆向分析有用，甚至过段时间很有可能就会遗忘。并且要了解的旧技术还不少，学得将会特别杂。
而我又是一个喜新厌旧的人，对任何新鲜事物都抱有好奇尝试的态度。我终将认为旧的技术被淘汰是迟早的问题，新技术的出现肯定不是无缘无故的出现，必然是为了解决某些问题而诞生的，如性能，开发体验，安全等等。
这里有篇我对新技术的看法，推荐阅读一番。[深谈个人对新技术的看法 - 愧怍的小站 (kuizuo.cn)](https://kuizuo.cn/talk-new-technologies-opinion'深谈个人对新技术的看法 - 愧怍的小站 (kuizuo.cn)')
在逆向开发，不，是在灰产开发中，有很多代码是别指望开源出来的，这背后会涉及到商业利益或是版权等问题。一旦代码放出来，将意味着你的代码将有很大的可能被别人利用做坏事，最终甚至祸及到自己。所以大多数情况下，你多半只能将自己的应用发布出去，而不是将源码开源，通常也就带有商业化的性质。
我想任何开发者肯定是希望自己的代码走的更远，走的正规，而不是被拿来做违背自身意愿的事情。
开源不仅能为自己提升一些技术知名度，展现自身技术的一面，同时代码被他人使用与认可，这番成就感就足够继续坚持开源下去。因为我有很多技术都是通过开源项目中学到的，所以我能感受到开源带来的魅力，也是对于前人的崇拜，想走开源的原因。
因为淋过雨，所以很想为别人撑把伞
其实在今年出头我还特意复习了一波安卓逆向，为了更深入了解了更底层的知识与工具（当然现在忘得也差不多了），因一些特殊原因我的电子设备不在了，别问，问就是坏了到现在还没修好。就导致我的编程语言环境，逆向工具，虚拟机配置，代码等数据直接灰飞烟灭，也让我停滞了 1 个月的学习。
我想这才是我从逆向转 Web 开发的最重要的理由了。
逆向的学习对我开发有很大的帮助。例如开发中的安全问题，我在开发中都会时刻考虑去考虑该问题。如加壳、SQL 注入、代码混淆、接口限流、接口幂等性（Fiddle R 包）等等安全性问题。
我庆幸我学过逆向，让我学到很多在开发中比较难学到的技能，如调试，阅读源码，而这些也是绝大多数 Web 开发者都欠缺的能力。
逆向应该就暂以告终，未来会有很长的一段时间，甚至以后不再接触深入专研逆向。
每当回想，【当时那么难的加密算法都能搞得定，开发一个功能还能有多难】，保持着这种心态，也让我保持着开发。
也是逆向激起我对编程的兴趣，可以说没有接触逆向开发，我也不太可能会接触到 Web 开发。
上面对逆向的看法仅个人分析而言，但是 Web 开发就一定好吗？我不敢下绝对的肯定，不同人不一定适合相同的技术，但是我特别看好 Web 技术（尤其是 JavaScript，偏前端向），以下是我看好的点。
目前仍有很多人还停留在 JavaScript 只能编写前端页面的水平，自从 Node.js 问世，目前绝大多数的应用都可以使用 JavaScript 进行编写。
换句话说，只要你会 JavaScript 就可以编写很多应用了。有个在国外经常被应用的一条和 JavaScript 有关系的著名定律：
Atwood 定律：任何可以用 JavaScript 编写的应用程序，最终都会用 JavaScript 编写
Web 前端开发不用多说，目前还得用 JavaScript 来编写。而后端开发通过 Node.js 也有一己之力。近几年特别流行跨平台开发，也就是一份代码，多端运行。
使用 React Native 或是 Uniapp 这样的前端应用框架，顺带去了解一下相应平台的 API，就能够编写出安卓或 IOS 应用，做过小程序开发肯定知道小程序的技术栈就使用到前端开发的技术栈，如果你会前端开发，就能很轻松的上手小程序开发了。
并且越来越多的软件都是网页版优先，然后再通过 Electron 这样的跨平台解决方案，实现不同平台间的程序。诸如 Vscode，Typeorm 等等便是其中的佼佼者。
不过本质上都是在不同应用的平台上套浏览器的壳，然后接入一些该平台的接口，因此普遍应用的体积与内存都相对比较大，与原生相比自然是略逊与原生，不过这点性能上的差异在如今硬件升级如此普遍的物质生活也显得微不足道了。
但借助浏览器自带的跨平台性，你所编写的应用能够非常轻松的让他人访问，只需要用户有个浏览器，并且通过上述跨平台的解决方案，也能够有效的将你的 web 应用转成其他平台的应用，而不是在耗费时间与精力去编写另一套代码。
在一些技术文档上，会有 API/SDK 的支持，而绝大多数都支持使用 JavaScript/Node.js，也许该功能本身并不是使用 JavaScript 来编写的，但完全可以通过 JavaScript 来轻松调用该功能。并且如今 JavaScript 生态如此庞大，你不必担心库/包的问题，npm 作为世界上最大的开放源代码的生态系统（包管理器），在这里你几乎找得到你所想要的库/包。
此外有越来越多的第三方服务平台（通常称 Fass，函数即服务），专门提供数据接口与用户鉴权，如 firebase/supabase 或是国产的云开发产品（如小程序）。前端程序员只需要专注与业务代码，借助第三方开发平台，就能够编写一个高可用的应用。反而也映衬了，Web 开发好像可以没有后端，但必须要有前端的观念。
这句话的意思可能有点加班那味道，但我所要表明的是可以做的事情多了，意味着你的工作量增加了，同时你的编码价值也就提升了，不过实际价值（工资）的话不一定提升，因为这主要看老板和地区。
怎么理解呢，我举几个例子。
现在大部分的 web 应用都采用前后端分离的形式，但在曾经则是由后端通过模板语言渲染成 HTML 直接返回，通过前后端分离的形式，前端只需要专注页面交互的编写，而后端只需要保证接口可靠性。并且前后端分离也有一个特别显著的特点，能非常有效的节省服务器的资源，原本服务器的渲染动作迁移至客户端来做。也许有人会说，那这样 SEO 优化该怎么办，这不就有了 Next.js、Nuxt.js 这样的 SSR（服务端渲染） 框架，而这些工作，也是前端要做的。
并且越到后面你越能感觉到客户端（前端）远比服务端（后端）做的东西来的多，比如开发阶段的数据 Mock，前端国际化，设计原型等等。之所以会有这种感觉，也许是因为我的大部分开发都是前端，这里你也可以回想当下的工作量与往年相比是多了还是不变。
前端真的是每隔一段时间，必定会出一些新的技术，也不由让不少前端学习者感叹真的学不动。但伴随着新的技术出现，必然会有新的岗位与机会，这也是我看好前端的一个点。
不过这种机会在国内不太多见，反而在国外特别普遍。 多的不说，自行体会。
忘记从哪看到的一句话：“前端工程师的一大焦虑：永远能（且必须要）看到大量前沿的技术，但自己手上的活儿跟不上，导致眼高手低。”
不只是前端，做技术这行的，必须要跟着技术发展的角度，并且要时刻关注最新，主流的技术。
有关 Web 开发的一些想法与感悟就写到这，其实还有蛮多可写的，比如选择 Vue 与 React？为什么是 JavaScript？有太多自我审问的话题了，不过由于当下时间相对紧迫，有机会的话再续写吧。
综上，也就是我看好 Web 技术的几个点，也回答了我未来的方向。希望这些能够帮助一些不知抉择方向的伙伴。
回顾整个技术栈，基本都是在项目实践中不断学习。也许是因为逆向的缘故，因为逆向基本上都是靠实战出来的，导致我的学习路线也趋于实践。
不过在我看来，写项目是最直接能体现出所想学的技术。我在学习一门新技术时，我通常会用项目或者博文的形式来总结我的学习过程。我也乐意花时间在这上面，并将其分享出来。当有其他人也在学习这门技术时，看到该项目或博文，我就认为非常有意义。
我在学任何一门技术，会使用该技术写点东西；换言之是为了写点东西，而去学点不一样技术。
如今来看，确实没那么想写代码，尤其是那种工作量大，重复性强的代码，而编写这些代码，其实与搬砖无任何区别，本质也是重复性与劳动性的任务。
曾经可能是因为接触得比较少，对于很多软件背后的原理及实现一概不知，所以看到啥就都想写写看，最终很多项目都成为半成品。
而随着越深入的学习，反而自己所想实现的东西，前人都已经帮我们实现好了。完全可以借用前人的代码，在此基础上学习与使用，而不必从头再来，耗费很多不必要的时间。
到最后为了实现一开始所想实现的东西，不用再费尽心思，去开源社区搜寻一番，总能找到与自己所要实现的类似的产品，此时只需要会看，会改，总能达到自己最终要实现的东西，有时候自己也称为了别人口中的 CV 工程师。
也正因如此，写代码的欲望就不再那么强烈。很多自认为无意义的代码或者是以后都不一定用得上的代码就少写了许多。于是乎缺少了很多自我思考与专研的时间，虽说也确实节省了很多不必要的时间，加快最终功能的实现，但这就是自己想要的编程生活吗？或者说这就是绝大多数人的编程生活。
现在回想，是什么驱使我学习，我心中的答案是无能。
当你什么都不会时，或者是目前的能力还不足够将某件事情做好，你就会不断地焦虑，犹如热锅上的蚂蚁，想做但又怕做不好。
我有很多社会技能是欠缺的，比如人际交往，谈话技巧，合作行为等等，并且我本身也不愿去学习这些技能。正因如此，只有不断发挥自身长处，用自己所擅长的领域弥补自己的短板，以提升自我在社会的竞争力，以至于不那么容易被淘汰。
今年也是我重归学校的一年，倘若，去年没有休学一年的话，如今我可能已经在外实习了，转瞬一年就过去了，如今的我还沉浸在当初休学和别人创业工作的日子。
也是因为当时休学急迫，后事做得并未完善，学校的一些课程并未申请缓考，最终视为缺考，即挂科。然后此前对大学的课程也是抱着可有可无的心态，也挂了几门课程，如果不是辅导员告知，我还有 34 学分要补（20 学分为严重预警，40 学分为退学或降级处理），我都不曾了解自己在学校挂了这么多科 😂。最离谱的是有个同班同学正好就被降级处理了，不过好在今年上半年并未挂科，加上下半年也重修了一些课程，还不至于离本科毕业证书越走越远。
回到学校后，就感觉如同坐牢一般，只不过环境相对舒适一番，尤其是在疫情当下更是如此，我这一年出校玩乐的次数好像不超过 10 次。当我仔细回想一下大学的真正意义是什么？貌似就是混个日子，混个证书。我也想不出大学能够有什么实质性的作用，也许是因为我所处的学校不行，换个好一点的大学或许都不是这样了。
不过今年回学校反而去参加了曾经都不怎么看上的社团（虽然现在也差不了多少），给社团写了些项目，主要也为了给自己重返学校带点个人知名度。但因为学校不是那么有名（臭名可能有），所以这里就不便放上相关信息。
明年的话我就大三下了，面对我的有条熟知的考研路。说实话，从目前来看，我对考研不抱有太大的希望，我是属于实践派的那种，我坚信没有什么是试不出来。背理论，刷八股，我很反感。
不知道由于什么原因，总感觉一段时间不写代码，真的就不会写代码。仿佛与自己写的代码成为了陌生人一般（所以写注释的重要性就体现出来了）
倘若读研的话，必然将会有数个月的时间重心不在代码上，到时候回来编写代码时，又发现自己好像又重新学了一遍似的。加之万一上岸失败的心理落差，会让自我觉得这几个月的努力都白费。而我又恰好是一位结果论者，即只在意结果，不在意过程如何。在别人的眼中，是难以看到你考研备战努力的过程，只会在意你上没上岸。这便是我不想考研因素之一。
但今年在互联网上所认识伙伴中挺多给我过于高的评价，都认为我作为一个学生，能有这水平是不是在某某牛逼的高校读书。然而并不是，我甚至都不好意思述说自己的高校，感觉是当下的污点。也正因如此反而让我有点过于焦虑，就从身份上，这不得让我萌生读研的一丝丝想法，也不至于死绝考研。
自我认为离真正的大佬还差很长的一段距离，我只是靠着三分钟热度，加上爱折腾，才维系下去，而那些真正的大佬是肯花费大量时间去编写他们所认为有意义的代码。
如果可以的话，在下方的留下你对我的评价与建议。我尽可能的争取在明年这时候完成你心目中我的样子。
今年的年终就告一段落，与之前的年终总结相比，篇幅缩减了许多，主要感觉之前写的挺多流水账的，废话挺多的。也有一点是因为时间相对紧迫，其实 12 月我还没放假，都处于线上上课，线上考试的状态，而线上考试的方式我就不得吐槽了，提前打印给定的答题纸，题目以电脑的方式展示，最终将答案手写到答题纸上并通过手机扫描（扫描全能王）成 PDF 的格式提交，当然摄像头必然也是有的。总之麻烦事还是有的，还没到彻底闲下来闭关学习的时候。
按往常可能还有明年的规划，但我现在认为很多时候都难以依照自身意愿做事，而规划正好自己所设想美好的计划，很容易事与愿违。因为回顾过往的规划，有太多美好的计划，但在实际分析下也将变得不堪一击。不止项目需要可行性分析，人生计划同样需要，一些天马行空幻想，其实就不再有意义去记录了。
坚持做自己想做的事情，而不是逼自己做不愿做的事情。这是我编程学习中座右铭，也是给予他人编程学习的建议。
写于2022年12月22日 By 愧怍
", "url": "https://kuizuo.cn/2022-year-end-summary", "title": "2022年终总结——从逆向转Web开发", "summary": "距离上一篇博文有一个月之久了，距离上次编写代码也有一周之久了，由于疫情的全面放开，加上福建省教育厅通知的提前返乡，反而让我感到有些不适。往常这个时间点我忙于期末考试，会把代码的事情放一边，等到彻底放假后，开始闭关潜心学习。然而剩余的半个月变成了线上形式，课还是要上，考试还是要考，虽说身在家乡，但心不在焉的 😂。", "date_modified": "2022-12-22T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "年终总结", "summary" ] }, { "id": "graphql-practice", "content_html": "![](\"https://img.kuizuo.cn/320f3e5a66900d68e93de38154989948.png\")
GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。
大概率你听说过 GraphQL，知道它是一种与 Rest API 架构属于 API 接口的查询语言。但大概率你也与我一样没有尝试过 GraphQL。
事实上从 2012 年 Facebook 首次将 GraphQL 应用于移动应用，到 GraphQL 规范于 2015 年实现开源。可如今现状是 GraphQL 不温不火，时不时又有新的文章介绍，不知道的还以为是什么新技术。
本文将上手使用 GraphQL，并用 Nestjs 与 Strapi 这两个 Node 框架搭建 GraphQL 服务。
关于 GraphQL 介绍，详见官网 GraphQL | A query language for your API 或相关介绍视频 GraphQL 速览：React/Vue 的最佳搭档
![](\"https://img.kuizuo.cn/9a7412200a062646b729c8419be28b35.jpeg\")
Restful 架构的设计范式侧重于分配 HTTP 请求方法（GET、POST、PUT、PA TCH、DELETE）和 URL 端点之间的关系。如下图
![](\"https://img.kuizuo.cn/17fc41e2de8d829dc2d41e31a0775df3.png\")
但是实际复杂的业务中，单靠 Restful 接口，需要发送多条请求，例如获取博客中某篇博文数据与作者数据
GET /blog/1
GET /blog/1/author
要么单独另写一个接口，如getBlogAndAuthor，这样直接为调用方“定制”一个接口，请求一条就得到就调用方想要的数据。但是另写一个getBlogAndAuthor 就破坏了 Restful API 接口风格，并且在复杂的业务中，比如说还要获取博文的评论等等，后端就要额外提供一个接口，可以说非常繁琐了。
有没有这样一个功能，将这些接口做一下聚合，然后将结果的集合返回给前端呢？在目前比较流行微服务架构体系下，有一个专门的中间层专门来处理这个事情，这个中间层叫 BFF（Backend For Frontend）。可以参阅 BFF——服务于前端的后端
![](\"https://img.kuizuo.cn/image_Y4u9tNpZwR.png\")
但这些接口一般来说都比较重，里面有很多当前页面并不需要的字段，那还有没有一种请求：客户端只需要发送一次请求就能获取所需要的字段
有，也就是接下来要说的 GraphQL
![](\"https://img.kuizuo.cn/8a141ec5fa73781d66fb2e1b60f9b49d.jpg\")
REST API 构建在请求方法（method）和端点（endpoint）之间的连接上，而 GraphQL API 被设计为只通过一个端点，即 /graphql，始终使用 POST 请求进行查询，其集中的 API 如 http://localhost:3000/graphql，所有的操作都通过这个接口来执行，这会在后面的操作中在展示到。
但是想要一条请求就能得到客户端想要的数据字段，那么服务端必然要做比较多的任务😟（想想也是，后端啥都不干，前端就啥都能获取，怎么可能嘛）。
而服务端要做的就是搭建一个 GraphQL 服务，这在后面也会操作到，也算是本文的重点。
接下来便会在客户端中体验下 GraphQL，看看 GraphQL 究竟有多好用。
可以到 官网 中简单尝试入门一下，在 Studio 可在线体验 GraphQL，也可以到 SWAPI GraphQL API 中体验。
下面以 apollographql 为例，并查询 People 对象。
查询所有 People 并且只获取 name、gender、height 字段
![](\"https://img.kuizuo.cn/image_kvWUNtlUbf.png\")
查询 personID 为 1 的 Person 并且只获取 name，gender，height 字段
![](\"https://img.kuizuo.cn/image_Msg9xwWFrl.png\")
查询 personID 为 2 的 Person 并且只获取 name，eyeColor、skinColor、hairColor 字段
![](\"https://img.kuizuo.cn/image_hX0l36Acme.png\")
从上面查询案例中其实就可以发现，我只需要在 person 中写上想要获取的字段，GraphQL 便会返回带有该字段的数据。避免了返回结果中不必要的数据字段。
{
person{
# 写上想获取的字段
}
}
如果你不想要 person 数据或者想要其他其他的数据，不用像 Restful API 那样请求多条接口，依旧请求/graphql，如
![](\"https://img.kuizuo.cn/image_Z0b6ya-auG.png\")
无论你想要什么数据，一次请求便可满足。
GraphQL 的大部分讨论集中在数据获取（也是它的强项），但是任何完整的数据平台也都需要一个改变服务端数据的方法。即 CRUD。
GraphQL 提供了 变更(Mutations) 用于改变服务端数据，不过 apollographql 在线示例中并没有如 createPeople 字段支持 。这个片段在线体验中就无法体验到，后在后文中展示到。这里你只需要知道 GraphQL 能够执行基本的 CRUD 即可。
此外还有 fragment 与 subscription 就不做介绍。
尝试完上面这些操作后，可以非常明显的感受到 GraphQL 的优势与便利，本来是需要请求不同的 url，现在只需要请求 /graphql，对调用方（前端）来说非常友好，香是真的香。
可目前只是使用了别人配置好的 GraphQL 服务，让前端开发用了特别友好的 API。但是，对于后端开发而言，想要提供 GraphQL 服务可就不那么友善了。因为它不像传统的 restful 请求，需要专门配置 GraphQL 服务，而整个过程是需要花费一定的工作量（定义 Schema，Mutations 等等），前面也提到想要一条请求就能得到客户端想要的数据字段，那服务端必然需要额外的工作量。
不仅需要在后端中配置 GraphQL 服务，用于接收 GraphQL 查询并验证和执行，此外前端通常需要 GraphQL 客户端，来方便使用 GraphQL 获取数据，目前实用比较多的是Apollo Graph，不过本文侧重搭建GraphQL 服务，因此前端暂不演示如何使用 GraphQL。
你可能听过一句话是，graphql 大部分时间在折磨后端，并且要求比较严格的数据字段，但是好处都是前端。把工作量基本都丢给了后端，所以在遇到使用这门技术的公司，尤其是后端岗位就需要考虑有没有加班的可能了。
以下便会开始实际搭建 GraphQL 服务，这里会用 Nest.js 与 Strapi 分别实践演示。
官方文档：GraphQL + TypeScript | NestJS
仓库本文实例代码仓库： kuizuo/nest-graphql-demo
创建项目
nest new nest-graphql-demo
安装依赖
npm i @nestjs/graphql @nestjs/apollo graphql apollo-server-express
修改 app.module.ts
import {Module} from '@nestjs/common';
import {GraphQLModule} from '@nestjs/graphql';
import {ApolloDriver, ApolloDriverConfig} from '@nestjs/apollo';
@Module({
imports: [
GraphQLModule.forRoot<ApolloDriverConfig>({
driver: ApolloDriver,
autoSchemaFile: true,
}),
],
})
export class AppModule {}
设置了autoSchemaFile: true ，nest.js 将会自动搜索整个项目所有以 .resolver.ts 为后缀的文件，将其解析为 schema.gql 比如说创建app.resolver.ts
import {Resolver, Query} from '@nestjs/graphql';
@Resolver()
export class AppResolver {
@Query(() => String) // 定义一个查询,并且返回字符类型
hello() {
return 'hello world';
}
}
在 graphql 中 resolver 叫解析器，与 service 类似（也需要在 @Module 中通过 providers 导入）。resolver主要包括query(查询数据)、mutation(增、删、改数据)、subscription(订阅，有点类型 socket)，在 graphql 项目中我们用 resolver 替换了之前的控制器。
这时候打开http://127.0.0.1:3000/graphql，可以在右侧中看到自动生成的 Schema，这个 Schema 非常关键，决定了你客户端能够请求到什么数据。
尝试输入 GraphQL 的 query 查询（可以按 Ctrl + i 触发代码建议（Trigger Suggest），与 vscode 同理）
![](\"https://img.kuizuo.cn/image_a3yl4oVtSU.png\")
此时点击执行，可以得到右侧结果，即app.resolver.ts 中 hello 函数所定义的返回体。
![](\"https://img.kuizuo.cn/image_bK9bvZ3QMm.png\")
在 nestjs 中有 Code first 与 Schema first 两种方式来生成上面的 Schema，从名字上来看，前者是优先定义代码会自动生成 Schema，而后者是传统方式先定义Schema。
在上面一开始的例子中是 Code First 方式，通常使用该方式即可，无需关心 Schema 是如何生成的。下文也会以 Code First 方式来编写 GraphQL 服务。
也可到官方示例仓库中 nest/sample/31-graphql-federation-code-first 和 nest/sample/32-graphql-federation-schema-first 查看两者代码上的区别。
nest 提供 cli 的方式来快速生成 GraphQL 模块
nest g resource <name>
![](\"https://img.kuizuo.cn/image_L9yYAn78Dw.png\")
比如创建一个 blog 模块
nest g resource blog --no-spec
? What transport layer do you use? GraphQL (code first)
? Would you like to generate CRUD entry points? Yes
CREATE src/blog/blog.module.ts (217 bytes)
CREATE src/blog/blog.resolver.ts (1098 bytes)
CREATE src/blog/blog.resolver.spec.ts (515 bytes)
CREATE src/blog/blog.service.ts (623 bytes)
CREATE src/blog/blog.service.spec.ts (446 bytes)
CREATE src/blog/dto/create-blog.input.ts (196 bytes)
CREATE src/blog/dto/update-blog.input.ts (243 bytes)
CREATE src/blog/entities/blog.entity.ts (187 bytes)
UPDATE src/app.module.ts (643 bytes)
便会生成如下文件
![](\"https://img.kuizuo.cn/image_XemqTcfz_D.png\")
import {Resolver, Query, Mutation, Args, Int} from '@nestjs/graphql';
import {BlogService} from './blog.service';
import {Blog} from './entities/blog.entity';
import {CreateBlogInput} from './dto/create-blog.input';
import {UpdateBlogInput} from './dto/update-blog.input';
@Resolver(() => Blog)
export class BlogResolver {
constructor(private readonly blogService: BlogService) {}
@Mutation(() => Blog)
createBlog(@Args('createBlogInput') createBlogInput: CreateBlogInput) {
return this.blogService.create(createBlogInput);
}
@Query(() => [Blog], {name: 'blogs'})
findAll() {
return this.blogService.findAll();
}
@Query(() => Blog, {name: 'blog'})
findOne(@Args('id', {type: () => Int}) id: number) {
return this.blogService.findOne(id);
}
@Mutation(() => Blog)
updateBlog(@Args('updateBlogInput') updateBlogInput: UpdateBlogInput) {
return this.blogService.update(updateBlogInput.id, updateBlogInput);
}
@Mutation(() => Blog)
removeBlog(@Args('id', {type: () => Int}) id: number) {
return this.blogService.remove(id);
}
}
此时 Schema 如下
![](\"https://img.kuizuo.cn/image_sJCQpllOXK.png\")
不过nest cli创建的blog.service.ts 只是示例代码，并没有实际业务的代码。
此外blog.entity.ts也不为数据库实体类，因此这里引入typeorm，并使用sqlite3
安装依赖
pnpm install @nestjs/typeorm typeorm sqlite3
import {Module} from '@nestjs/common';
import {AppController} from './app.controller';
import {AppService} from './app.service';
import {GraphQLModule} from '@nestjs/graphql';
import {ApolloDriver, ApolloDriverConfig} from '@nestjs/apollo';
import {AppResolver} from './app.resolver';
import {BlogModule} from './blog/blog.module';
import {TypeOrmModule} from '@nestjs/typeorm';
@Module({
imports: [
TypeOrmModule.forRoot({
type: 'sqlite',
database: 'db.sqlite3',
entities: [__dirname + '/**/*.entity{.ts,.js}'],
synchronize: true,
}),
GraphQLModule.forRoot<ApolloDriverConfig>({
driver: ApolloDriver,
autoSchemaFile: true,
playground: true,
}),
AppModule,
BlogModule,
],
controllers: [AppController],
providers: [AppService, AppResolver],
})
export class AppModule {}
将 blog.entity.ts 改成实体类，代码为
import {ObjectType, Field} from '@nestjs/graphql';
import {
Column,
Entity,
PrimaryGeneratedColumn,
CreateDateColumn,
UpdateDateColumn,
} from 'typeorm';
@ObjectType()
@Entity()
export class Blog {
@Field(() => Int)
@PrimaryGeneratedColumn()
id: number;
@Field()
@Column()
title: string;
@Field()
@Column({type: 'text'})
content: string;
@Field()
@CreateDateColumn({name: 'created_at', comment: '创建时间'})
createdAt: Date;
@Field()
@UpdateDateColumn({name: 'updated_at', comment: '更新时间'})
updatedAt: Date;
}
其中 @ObjectType() 装饰器让 @nestjs/graphql 自动让其视为一个 type Blog
而 @Field() 则是作为可展示的字段，比如 password 字段无需返回，就不必要加该装饰器。
如果你认为 添加 @Field() 是件繁琐的事情（nest 官方自然也想到），于是提供了 GraphQL + TypeScript - CLI Plugin 用于省略 @Field() 等其他操作。（类似于语法糖）
借用官方的话:
Thus, you won't have to struggle with @Field decorators scattered throughout the code.
因此，您不必为分散在代码中的@Field 装饰符而烦恼。
@nestjs/graphql 会将 typescript 的 number 类型视为 Float，所以需要转成 Int 类型，即 @Field(() => Int)
为 BlogService 编写 CRUD 数据库业务代码，并在 dto 编写参数效验代码，这里简单暂时部分代码。
import {Injectable} from '@nestjs/common';
import {InjectRepository} from '@nestjs/typeorm';
import {Repository} from 'typeorm';
import {CreateBlogInput} from './dto/create-blog.input';
import {UpdateBlogInput} from './dto/update-blog.input';
import {Blog} from './entities/blog.entity';
@Injectable()
export class BlogService {
constructor(
@InjectRepository(Blog)
private blogRepository: Repository<Blog>,
) {}
create(createBlogInput: CreateBlogInput) {
return this.blogRepository.save(createBlogInput);
}
findAll() {
return this.blogRepository.find();
}
findOne(id: number) {
return this.blogRepository.findOneBy({id});
}
async update(id: number, updateBlogInput: UpdateBlogInput) {
const blog = await this.blogRepository.findOneBy({id});
const item = {...blog, ...updateBlogInput};
return this.blogRepository.save(item);
}
remove(id: number) {
return this.blogRepository.delete(id);
}
}
import {InputType, Field} from '@nestjs/graphql';
@InputType()
export class CreateBlogInput {
@Field()
title: string;
@Field()
content: string;
}
此时
![](\"https://img.kuizuo.cn/image_7-twN56Aym.png\")
下面将演示 graphql 的 Mutation。
![](\"https://img.kuizuo.cn/image_NPqShDN3Pl.png\")
![](\"https://img.kuizuo.cn/image_c4ycwRs-po.png\")
![](\"https://img.kuizuo.cn/image_xpkHhpS1-K.png\")
Query 就不在演示。
至此，在 Nest.js 中配置 GraphQL 服务的就演示到此，从这里来看，Nest.js 配置 GraphQL 服务还算比较轻松，但是做了比较多的工作量，创建 resolver，创建 modal（或在已有实体添加装饰器），不过本文案例中只演示了基本的 CRUD 操作，实际业务中还需要涉及鉴权，限流等等。
Strapi 官方提供 GraphQL 插件 免去了配置的繁琐。更具体的配置参见 GraphQL - Strapi Developer Documentation
这里我就选用 kuizuo/vitesse-nuxt-strapi 作为演示，并为其提供 graphQL 支持。
strapi 安装
npm install @strapi/plugin-graphql
接着启动 strapi 项目，并在浏览器打开 graphql 控制台 http://localhost:1337/graphql，以下将演示几个应用场景。
![](\"https://img.kuizuo.cn/image_4GFUs8CmQJ.png\")
![](\"https://img.kuizuo.cn/image_NMM4e3L_y8.png\")
![](\"https://img.kuizuo.cn/image_E1eWrzjaEs.png\")
![](\"https://img.kuizuo.cn/image_pclR7Zb6TE.png\")
![](\"https://img.kuizuo.cn/image_g3RJL7RQWR.png\")
![](\"https://img.kuizuo.cn/image_m7s17q2TG0.png\")
由于 Nuxt Strapi 提供 useStrapiGraphQL 可以非常方便是在客户端调用 GraphQL 服务。
<script setup lang=\"ts\">
const route = useRoute();
const graphql = useStrapiGraphQL();
// Option 1: use inline query
const restaurant = await graphql(`
query {
restaurant(id: ${route.params.id}) {
data {
id
attributes {
name
}
}
}
}
`);
// Option 2: use imported query
const restaurant = await graphql(query, {id: route.params.id});
</script>
对于 Strapi 来说，搭建 GraphQL 服务基本没有配置的负担，安装一个插件，即可配合 Strapi 的 content-type 来提供 GraphQL 服务。
GraphQL 翻译过来为 图表 Query Language，我所理解的理念是通过 json 数据格式的方式去写 SQL，而且有种前端人员在写 sql 语句。在我看来 GraphQL 更多是业务数据特别复制的情况下使用，往往能够事半功倍。但对于本文中示例的代码而言，GraphQL 反倒有点过于先进了。
如今看来，GraphQL 还处于不温不火的状态，目前更多的站点主流还是使用 Restful API 架构。我不过我猜测，主要还是大多数业务没有 API 架构的升级的需求，原有的 Restful API 虽说不够优雅，但是也能够满足业务的需求，反而 GraphQL 是一个新项目 API 架构的选择，但不是一个必须的选择。
至于如何选择，可以参阅官方 GraphQL 最佳实践，至于说有没有必要学 GraphQL，这篇文章 都快 2022 年了 GraphQL 还值得学吗 能给你答案。我的建议是了解即可，新项目可以考虑使用，就别想着用 GraphQL 来重构原有的 API 接口，工作量将会十分巨大，并且还可能是费力不讨好的事。反正我认为这门技术不像 Git 这种属于必学的技能，我的五星评分是⭐⭐
但多了解一门技术，就是工作面试的资本。回想我为何尝试 GraphQL，就是因为我无意间看到了一份 ts 全栈的远程面试招聘，在这份招聘单中写到 【会 graphql 编写是加分项】。所以抱着这样的态度去尝试了一番，说不准未来就是因为 graphql 让我拿到该 offer。当然也是因为很早之前就听闻 GraphQL，想亲手目睹下是否有所谓的那么神奇。
", "url": "https://kuizuo.cn/graphql-practice", "title": "GraphQL 实践与服务搭建", "summary": "有关 GraphQL 介绍及上手实践，并在 Nest.js 和 Strapi 中搭建 GraphQL 服务", "date_modified": "2022-11-24T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "api", "graphql", "nest", "strapi" ] }, { "id": "refactor-kz-admin", "content_html": "![](\"https://img.kuizuo.cn/logo_irKdpu5Epv.png\"){kind=logo}
kz-admin 使用 NestJs + TypeScript + TypeORM + Redis + MySql + Vben Admin\n等技术栈，并采用 monorepo 管理项目，希望这个项目在 ts 全栈的路上能够帮助到你。
详细介绍可以参见 kz-admin后台管理系统
前段时间基于我的 kz-admin\n模板写了一个link-admin的项目（可以访问 link.kuizuo.cn 在线体验，账号 admin，密码a123456），是一个“一次性”充值链接管理系统，具体自行体验即可（项目未开源）。
该项目有前端管理页面，后端服务，和一个链接使用页面，共三个项目。
每次启动时候，都需要进入到对应项目下，打开终端，输入命令。要么使用npm-run-all 来批量执行 dev 与 build 命令。
想到后续项目的应用场景大概率也可能是多项目的，于是就准备使用 turborepo 将项目重构为 monorepo 管理，将前后端项目都统一放到一个仓库中，并且将 nestjs 版本升级到 v9，顺便在完善一下api接口文档，并提供 ApiFox 文档。
monorepo的重构相对简单，首先使用 Turborepo 新建一个 monorepo 的仓库，目录结构如下
![](\"https://img.kuizuo.cn/image_Svd1WZKBdf.png\")
将 packages 与 apps 下的文件清空，然后把原 kz-admin 的前端项目与后端项目放到 apps 下。修改下 README.md 与 package.json 其启动命令即可。
![](\"https://img.kuizuo.cn/image_eYL2rKrakb.png\")
我原先的nestjs依赖是8.0.0，但是技术发展太快，nestjs\n9.0.0都已经发布了，所以这次更新属于大版本更新，通常属于破坏性更新，可能会导致原代码失效，所以更新依赖要慎重。
我使用的是antfu/taze 来更新依赖，也可以使用 yarn upgrade-interactive -- latest。
npx taze -r
由于此次属于大版本更新，所以使用taze major，小版本则使用 taze minor。
![](\"https://img.kuizuo.cn/image_xJ_Bh1NZih.png\")
npx taze major -r -w 将更新依赖写入到package.json下，接着执行pnpm i更新依赖即可。
既然都将nestjs更新了，那么nestjs相关生态的库自然也是要更新的，于是就遇到的typeorm 0.2.0 → 0.3.0用法的问题，主要是将findOne等方法改写，如 findOne(id) → findOneBy({ id }) 。整个过程还算顺利，
在原项目中我Swagger写的其实够完善，但是在代码协同上只给前端一个Swagger地址不是很友好。但直到我接触并体验一段时间ApiFox后，让我更想去编写Swagger，给前端同事一个良好的Api接口测试体验，因为我自身也作为前端开发者，我太清楚API接口文档的重要性了。
其实早听闻ApiFox，但当时我还在用ApiPost，觉得ApiPost足够好用就没有更换的欲望。直到看到别人给我分享用ApiFox编写的接口文档时，让我眼前一亮，至于有多好用，可以参阅官方的介绍视频21分钟学会Apifox。发自使用者内心的好用，下面会有些实际接口案例来说明到底有多好用。
你可以访问 https://admin.kuizuo.cn/swagger-ui 来查看kz-admin的Swagger文档
json格式为https://admin.kuizuo.cn/swagger-ui/json，用于导入ApiFox中。
ApiFox在线链接: https://www.apifox.cn/apidoc/shared-7a07def2-5b82-4c71-bf57-915514f61f25 访问密码: kz-admin
本次重构对于数据实体花费的时间比较多，主要就是数据实体重命名，如
CreateUserDto → UserCreateDto
UpdateUserDto → UserUpdateDto
DeleteUserDto → UserDeleteDto
PageUserDto→ UserPageDto
...
将操作动词后置，这样做好处就是不用从一堆CreatxxxxDto中找一个CreateUserDto，而是转变成从几个UserxxxxDto找UserCreateDto，就像下图这样，左侧Swagger，右侧ApiFox，在数据实体比较多的时候显示的会更加直观。
![](\"https://img.kuizuo.cn/image_a4g_9OfyUw.png\")
![](\"https://img.kuizuo.cn/image_avg9_2fE5G.png\")
当然在ApiFox中可以通过搜索来筛选模型，但在开发体验方面，我认为此次重命名重构还是非常有必要的。
定义数据实体（Schemas）非常重要，这样我们就能知道该请求接口应该传递什么参数，会接收到什么样的数据。
Apifox是以文档作为驱动的，可以说把Swagger文档写好，Apifox就会好用。直接上例子
以用户新增和分页查询用户为例，直接上效果图（左侧是ApiFox，右侧为Swagger代码）
![](\"https://img.kuizuo.cn/image_Zs3cEmA7KD.png\")
![](\"https://img.kuizuo.cn/image_WLjlJRNBlH.png\")
在定义完Swagger并通过ApiFox导入后，不用修改ApiFox就能得到上述效果。这里强烈建议将ApiFox接口问题，与nestjs的Swagger代码进行对比，就能体会到写好Swagger就能得到一份如此优雅的Api文档。
做前端和做后端看到这文档，这不得发自内心的赞美。
此外 ApiFox 的好处远远不止于此，篇幅有限，好东西不是一句两句就能说明白的东西，建议自行体验一番，绝对会有不一样的收获。
Vben admin 是我21年6月当时接触 Vue3 的第一个项目，在当时Vue3测试版已经发布，而vue-element-admin都早已烂大街了，也有点审美疲劳了。想给自己换一个后台管理系统的模板，恰好无意间刷到了 Vben Admin，管理面板的效果让我眼前一亮，迄今为止我都认为非常耐看。
但是Vben Admin仅仅只是前端模板与mock数据，并无后端数据，于是就正好利用我使用的 Node 后端框架 Nestjs 来编写后端服务。但当时项目并不完善，在我编写了几个相似的后端管理的项目后，将核心部分抽离出来，并将其封装出来，kz-admin也就此诞生。
鸣谢 hackycy/sf-nest-admin，我的后端 nestjs 架构与部分代码都借鉴该项目。
最后也要感谢 Vben 项目，在当时让我进一步了解到 Vite + Vue + TypeScript 等最新前端相关技术。
", "url": "https://kuizuo.cn/refactor-kz-admin", "title": "重构kz-admin", "summary": "kz-admin 是一个基于 NestJs + TypeScript + TypeORM + Redis + MySql + Vben Admin 编写的一款前后端分离的权限管理系统", "date_modified": "2022-11-07T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "project", "admin" ] }, { "id": "protocol-template", "content_html": "![](\"https://api.kuizuo.cn/api/icon/carbon:api.svg\"){kind=icon}
Artwork from Nuxt3
🧪 一个用于快速复现请求协议的 Web 开发模板。
我曾经是做 API 请求的，经常要模拟某些请求（协议复现）。所以写过比较多的 api 请求代码，在此期间尝试编写过许多代码方式和软件形态。但都不令我满意，不是过于繁琐，就是开发太慢，都达不到我想要的预期。尤其是开发体验，可以说是苦不堪言。
就在前段时间接触了 SSR 框架（Nuxt3）与 Serverless Function，并用其写了一些项目，如 api-service 。而某了个羊刷次数的网站的实现，则让我意外发现这貌似就是我理想中的的协议复现最佳实现？于是我立马开启了 VSCode，将我的这一想法用代码的方式来实现出来，在经历了两周几乎不间断的开发，最终达到了我的预期效果！
在 模拟请求|协议复现方案 这篇文章中我对协议复现的一些方案总结，而这篇就是对 SSR 框架方案的一个具体实践。
这个模板基于Nuxt3开发的，该框架拥有全栈开发能力（即全栈框架），并有诸多模块，即装即用。同时由于采用Serverless Function 方式来定义 api 接口，可以轻易地部署在自有服务器或Vercel， Netlify这样的平台上。由于要做到敏捷开发，该模板集成了Naive UI 组件库，组件库的质量足够胜任常规前端业务开发。此外还封装了一些我个人的所用到的工具库以提高开发效率。
为此我给这个模板起名 Protocol，即协议，也可以认为是礼仪。一个用于快速复现请求协议的 Web 开发模板。
废话不多数，就正式来介绍下 Protocol。
![\"GitHub](\"https://img.shields.io/github/stars/kuizuo/protocol?style=social\")
![](\"https://developer.stackblitz.com/img/open_in_stackblitz.svg\")
protocol
├── assets # 前端静态资源文件
├── components # 组件
├── composables # 组合式API
├── content # content 模块
│ ├── changelog.md # 更新日志
│ └── help.md # 帮助说明
├── data # 持久化数据
│ └── db
├── layouts # 布局
├── nuxt.config.ts # nuxt 配置文件
├── package.json # 依赖包
├── pages # 页面
├── plugins # 插件
├── public # 服务端静态资源文件
│ └── logo.svg
├── server # 服务端文件
│ ├── api # 后端接口
│ └── protocol # 协议请求逻辑代理
├── stores # pinia 状态管理
│ └── user.ts # 用户状态
├── types # 类型定义
│ └── user.d.ts # 用户类型声明文件
├── ecosystem.config.js # pm2 配置文件
├── nitro.config.ts # nitro 配置文件
├── app.config.ts # 前端配置文件
└── app.vue # 入口文件
从这个项目的目录结构中其实就可以看出，本项目是集成了全栈能力，并且使用 Vue 与 Node 来编写前端与后端，并不会产生前后端分离的分割感，只需要打开一个项目即可开始工作。这得益于Nuxt3 与 Nitro。
由于是基于 Nuxt3 开发的，所以使用该项目是需要一些 SSR 开发经验。如果你还没有接触 SSR，可以根据你熟悉的前端框架选择对应的 SSR 框架来尝试体验一番。都要 2023 年了，不会还有前端程序员没用过 SSR 框架吧。
这里我不想过多介绍 Nuxt3 的基本功能与使用，在我的一个 基于 Nuxt3 的 API 接口服务网站 的项目中，有简单介绍过 Nuxt3，有兴趣可以去看看。
这里你只需要知道 Nuxt3 具有全栈开发的能力，如果你想，完成可以基于 Nuxt3 这个技术栈来实现 Web 开发的前端后端工作。
首先，最重要的就是类型提示，对于大多数 api 请求而言，类型往往常被忽略。这就导致不知道这个请求的提交参数、响应结果有什么数据字段。举个例子
![](\"https://img.kuizuo.cn/image_75GsdEZuLK.png\")
这是一个 post 请求用于实现登录的，但是这个响应数据 data 没有任何具体提示（这里的提示是 vscode 记录用户常输入的提示），这时候如果一旦拼接错误，就会导致某个数据没拿到，从而诱发 bug。同理提交的请求体 body 不做约束，万一这个请求还有验证码 code 参数，但是我没写上，那请求就会失败，这是就需要通过调试输出，甚至需要抓包比对原始数据包才能得知。
最主要的是没有类型约束的情况下，非常容易出现出现访问的对象属性不存在，做 js 开发的肯定经常遇到如下错误提示。
Uncaught TypeError: Cannot read properties of undefined (reading 'data')
有太多很多时候就是因为没有类型，无形间诱发 bug。就极易造成开发疲惫，不愿维护代码，这也是很多做 api 接口都常常忽视的一点。包括我之前也是同样如此。
对于 js 而言，上述情况自然是解决不了，但这种场景对于 ts 来说在适合不过了。所以 Protocol 自然是集成了 ts，并且有良好的类型提示。下面展示几张开发时的截图就能体会到，当然你前提是得会 ts 或者看的懂 ts。
![](\"https://img.kuizuo.cn/image_VbEuizLRfz.png\")
上面的类型提示演示代码仅仅作为体现类型的好处，将类型定义（interface，type 等）和核心逻辑都在同一个文件自然不好，容易造成代码冗余。实际开发中，更多使用命名空间，将类型写到 ts 声明文件.d.ts 中。比如将上面的改写后如下
![](\"https://img.kuizuo.cn/image_48-YSpYd1g.png\")
![](\"https://img.kuizuo.cn/image_9b9ns2BM67.png\")
就在我写这篇文章做代码演示的时候，又发生了拼写错误，如下图。由于使用 ts 类型与 eslint，所以在开发时的问题我就能立马发现，而不是到了运行时才提示错误。
![](\"https://img.kuizuo.cn/image_PfpxCKZomB.png\")
有了类型提示能非常有效的避免上述问题。同时 ts 并不像 java 那样的强类型语言，你完全可以选择是否编写 ts 的类型（type 或 interfere），这由你决定，你乐意都可以将 typescript 写成 anyscript，因为确实有些人确实不喜欢写类型。
ts 的类型提示仅是其次，此外还配置了 eslint 对代码检查，让代码在 2 个空格缩进，无分号，单引号等代码规范下。保证代码质量，而不会出现这边一个分号，那边来个双引号的情况。
要想在实际项目中使用，还需要做很多功课，例如数据格式转换，编码，加解密，cookie 存储，IP 代理等等。这段时间也特此对常用工具封装成 npm 包，也就是 @kuizuo/http 与 @kuizuo/utils。
大部分的代码我都会采用最新的 ECMAScript 标准来编写，目的也是为了简化代码，减少不必要的负担。
既然是全栈框架，那么必然少不了数据库的存取，nitro 自然是提供了数据存储选择，即 unjs/unstorage。使用特别简单：
await useStorage().setItem('test:foo', {hello: 'world'});
await useStorage().getItem('test:foo');
不指定则使用内存，当然了想要持久化配置，nitro 也提供了相关配置
// nitro.config.ts
import {defineNitroConfig} from 'nitropack';
export default defineNitroConfig({
storage: {
redis: {
driver: 'redis',
/* redis connector options */
},
db: {
driver: 'fs',
base: './data/db',
},
},
});
并根据不同前缀（根据 nitro.config.ts 中的 storage 对象的属性）存储在不同存储位置，如
// 存内存缓存中
await useStorage().setItem('cache:foo', {hello: 'world'});
await useStorage().getItem('cache:foo');
// 存db中
await useStorage().setItem('db:foo', {hello: 'world'});
await useStorage().getItem('db:foo');
// 存redis中
await useStorage().setItem('redis:foo', {hello: 'world'});
await useStorage().getItem('redis:foo');
从目前来看，unjs/unstorage并没有提供 sql 数据库的方案。不过对于这类项目而言，似乎也没有上 sql 数据库的必要，文件和 redis 就足以了。如果需要也可以自定义 drivers。
由于 Vercel 是不支持文件读写的，所以想要文件方式数据存储功能就行不通，需要更换存储方案，比如远程 redis 数据库。
如果是部署到自由的服务器（通常是 Linux 系统），则需要分配相应的读写权限。
通常来说，有两种用户凭证，Cookie 和 Token，有了上述数据存储的方案，存取用户凭证并不是什么难题。不过用户凭证更多的是用来鉴权的，这时候就需要配置前端Middleware 和后端 Middleware，至于选择哪种，根据实际网站情况来选择即可。
我提供了两个 md 页面，更新日志（ChangeLog）和帮助说明（Usage），如果需要更新内容，在根目录下 content 文件夹中找到对应文件修改即可。
如果你想在创建新的 md 页面只需要在 content 中新建一个文件（如test.md），在页面路由创建同名vue文件(test.vue)，将下方的 path 修改相应文件名即可。
<script setup lang=\"ts\">
definePageMeta({
layout: 'markdown',
});
</script>
<template>
<div>
<ContentDoc class=\"prose text-left\" path=\"/test\" />
</div>
</template>
传统的 node 后端框架，通常需要将原文件或者打包后的文件放到服务器上，执行 npm i 下载 package.json 里的依赖文件，然后执行运行命令启动。这一步骤的下载依赖就尤为致命，因为通常下载依赖将会特别耗时。
但 Nuxt3 则是会将前后端的资源文件，打包到 .output 文件夹下，以本项目为例，打包的大小为 14.6MB,gzip 压缩为 3.11MB（写本章时的记录），如果不使用Content 模块体积将会更小。打包完成提示如下
Σ Total size: 14.6 MB (3.11 MB gzip)
√ You can preview this build using node .output/server/index.mjs
然后你只需要将 .output 整个文件夹放到服务器上，并且安装好 node 环境，输入 node .output/server/index.mjs 即可启动项目，默认端口为 3000。当然也可以通过 pm2 的配置文件来启动，配置文件如下
module.exports = {
apps: [
{
name: 'Protocol',
exec_mode: 'cluster',
instances: '1',
env: {
NITRO_PORT: 8010,
NITRO_HOST: 'localhost',
NODE_ENV: 'production',
},
script: './.output/server/index.mjs',
},
],
};
接着执行 pm2 start ecosystem.config.js --env production 即可运行。相比传统需要手动下载依赖的方式，Nuxt3 则是直接将 web 项目实际所需要的依赖都打包在一起，只需要在有 node 环境下机器中就可以立马运行，无需等待依赖下载。
如果部署在 Vercel 或 Netlify 就更轻松了，根据官方的步骤即可做到一键部署。
介绍完工具库，如果不介绍下开发流程，很多人都不知道该如何起手，这里我会用 Github 的 api 作为案例演示，也就是模板源代码中所演示的那样。当然，后续我会根据一些实战项目考虑弄个案例展示（在写中），以来方便使用与完善该模板。毕竟如果开发者自己都不愿意用，又怎么去说服他人来使用呢。
如何修改某文字内容或某图标，这里就不再赘述了，Ctrl + Shift + F 搜索你想修改的内容并修改即可。大部分能修改的配置都写在了 app.config.ts 下。
export default defineAppConfig({ title: 'Protocol', description:
'一个用于快速复现请求协议的Web开发模板。', author: { name: 'kuizuo', link:
'https://github.com/kuizuo', qq: 'https://im.qq.com/', wx: 'https://wx.qq.com/',
}, })
通过 const appConfig = useAppConfig() 获取配置对象数据。
这里以调用 Github 的 api 为例，因为业务相对简单，所以使用的是静态方法来调用，简单展示一下代码
import { AHttp } from '@kuizuo/http'
const http = new AHttp({ baseURL: 'https://api.github.com' })
export class Github {
static async getUser(username: string) {
const { data } = await http.get<API.User>(`/users/${username}`)
return data
}
static async getRepos(username: string) {
const { data } = await http.get<API.Repo[]>(`/users/${username}/repos`)
return data
}
}
我个人是习惯也喜欢将逻辑部分用 class 的方式来编写，也推荐用这种去定义这些业务逻辑代码。这里我举个例子来说明，假设现在有一个博客网站，有登陆、获取博文列表、评论等功能。那么我会这么写
import { AHttp } from '@kuizuo/http'
interface User {
username: string
password: string
}
export class Blog {
public http: AHttp
public user: User
constructor(user: User) {
this.http = new AHttp({ baseURL: 'https://blog.kuizuo.cn' })
this.user = User
}
async login() {
// login logic code
}
async getBlogList() {
// getBlogList logic code
}
async comment(id: number) {
// comment logic code
}
}
定义完这些后，我只需要实例化一个对象 account，调用 login 方法即可登录，后续的获取博文列表与评论操作我只需要拿这个 account 来操作即可。
const account = new Blog({username: 'kuizuo', password: '123456'});
await account.login();
const blogList = await account.getBlogList();
await account.comment(1);
如果想换一个账号操作，就需要重新按照上面的方式实例化一个新的对象，拿这个对象操作即可。
并且这种方式在迁移代码的时候尤为方便，可以直接将这份代码放到不同的 Node 项目中来运行。
通常也是在这一流程中，会编写大量的类型代码，来完善整个项目，保证代码的健壮。通常我会在同文件下或者在 types 下定义 .d.ts 声明文件，通过声明文件与命名空间，无需导入即可全局使用类型。
定义完复现协议的逻辑代码后，那么就到前后端数据交互部分了，首先定义后端的接口，由于上面我们已经定义好了协议复现逻辑代码，这边只需要导入使用即可。就像下面这样
import { Github } from '~~/server/protocol/github'
import { ResOp } from '~~/server/utils'
export default defineEventHandler(async (event) => {
const { username } = event.context.params
const user = await Github.getUser(username)
if (!user.login)
return ResOp.error(404, user.message ?? 'User not found')
await useStorage().setItem(`db:github:user:${username}`, user)
return ResOp.success(user)
})
这一部分的代码建立在 Serverless Function 上，每一个接口都是以函数的方式对外暴露出去。这些代码会根据文件位置生成对应的路由，比如说上面的文件为 server/api/user/[username].ts，就映射为 /api/user/:username，前端请求 /api/user/kuizuo 通过event.context.params.username 便可以拿到 username 的值为 kuizuo。
至此后端部分就暂以告告落。
对于前端而言，肯定是需要全局管理一些数据状态的，这样能够在不同的组件间共享数据，并且需要持久化这些数据，以保证下次用户再次打开网页的时候无需向后台请求数据，pinia 持久化使用到了 pinia-plugin-persistedstate 插件。
同时在状态管理中，会定义一些方法来调用后端接口。如下演示
import { useMessage } from 'naive-ui'
export const useUserStore = definePiniaStore('user', () => {
const user = ref<API.User | null>(null)
const repos = ref<API.Repo[]>([])
const message = useMessage()
async function getUser(username: string) {
const { data } = await http.get<API.User>(`/api/user/${username}`)
if (data.login) {
user.value = data
message.success('获取成功')
}
else {
message.error(data.message)
}
}
async function getRepos() {
const username = user.value?.login
const { data } = await http.get<API.Repo[]>(`/api/repo/${username}`)
repos.value = data
}
async function reset() {
user.value = null
repos.value = []
}
return {
user,
repos,
getUser,
getRepos,
reset,
}
}, {
persist: {
key: 'user',
},
})
这里的 http 是经过封装的，因为返回数据格式如：{\"code\":200,\"data\":{},\"message\":\"success\"} ，但对于业务逻辑而言，我们通常只需要关注 data 里面的数据，而请求的状态 code 与信息 message 则不是所要着重关系的对象。
至于想要返回原数据，还是带有 code, message 的数据，因人而异，我更喜欢后者将数据格式规范化，这样我就能知道本次请求的状态结果，在响应拦截器中就能够进行预先处理。
在 vue 组件中只需要使用演示如下
<script setup lang=\"ts\">
let username = $ref('kuizuo');
let loading = $ref(false);
const userStore = useUserStore();
const user = $computed(() => userStore.user);
async function getUser() {
loading = true;
try {
await userStore.getUser(username);
} finally {
loading = false;
}
}
</script>
这一部分自由发挥即可了，这里我是集成了 NaiveUI 与 Unocss，足够应对大部分的前端开发需求。没什么过多要说的了。
整个开发流程就是这样的，如果我想要添加一个功能，用于获取 Github 用户已点的 Star 项目列表，那么按照上面流程将会清晰的实现出来。
这里仅举调用 Github api 为例，想调用其他第三方的 api 都不成问题，本模板只提供一个这样的开发流程（形态）能够帮助快速实现 Web 站点开发，同时极易部署，做到敏捷开发。
对比传统前后端分离的开发流程，这种开发流程可以说更加清晰，更加规范，更加高效。
我的做法相对比较简单粗暴，直接在图片中添加referrerpolicy='no-referrer' 就像下面这样。
<img src=\"src\" referrerpolicy=\"no-referrer\" />
如果你想要集成到 HTML 或者 CSS ，可以直接在 <head> 标签下添加如下代码.
<meta name=\"referrer\" content=\"no-referrer\" />
参阅Referrer-Policy - HTTP | MDN (mozilla.org)
几乎不会遇到跨域问题，因为所有的接口都相当于转发过一遍，不是由前端直接发送，而是后端接收到后，通过服务器来进行发送，然后将数据在返还给前端。
这个模板如果要实现鉴权是相对比较简单的，前后端配置Middleware 即可实现。使用 cookie 和 token 都随意，甚至第三方的登录。
但这时数据多了，难免需要去管理数据，不如专门为此编写一个后台管理系统，同时提供一个鉴权相关的功能。主要还是借助 ntrio 来开发，毕竟提供全栈开发能力，要实现只是时间开发的问题。
编译成跨平台程序有一个好处，就是所有的流量请求与接收都是存放在用户的机器中，就相当于传统的桌面应用开发。而部署在 Web 端请求流量的压力都将会来到服务器上，就避免不了用户量大，导致请求缓慢，甚至 ip 被封禁的问题。
由于我暂且还不会 tauri 开发，也还不会 rust，所以这个功能估计得到寒假才有可能去实现了。electron 占用比较大的资源空间，不作为跨平台框架优先选择。
这种开发形态自打我接触协议复现到前端开发我就考虑过，但奈何在没接触 ssr 框架之前，这种开发形态多半是需要前后端分离，要么使用模板语言，这样接口交互方面将会十分繁琐，开发效率过于低效。
因此当我发觉 ssr框架的可行性后，我几乎整整花费了两周的时间在不断的探索与完善中，希望将其编写成一个我日后随时都会用到的模板，即写即用，极速上线。因为这样的开发场景对我来说太过于常见了，而很多时间就是因为没有一个相应的模板与工具库，代码总是东凑西凑，后续维护与测试总是花费不小的时间去解决。
目前这种方案已有初步雏形，由于一些特殊的因素，我并未将已经写过的站点作为案例放在这上面作为演示，而将 Github api 作为演示，后续大概率会弄个案例展示供参考学习。
后续我还是会不断去完善与维护该项目，并基于该项目去重构我的一些项目。
本模板仅仅是 web 模板，任何开发者用该模板做什么样的站点都与本人无关。仅作为个人技术专研，仅供学习参考。
", "url": "https://kuizuo.cn/protocol-template", "title": "Protocol 协议复现模板", "summary": "一个用于快速复现请求协议的 Web 开发模板。基于 Nuxt3 开发，并集成了NaiveUI，Unocss，等相关工具库封装。", "date_modified": "2022-10-30T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "project", "protocol", "template", "nuxt3" ] }, { "id": "rollup-js-experience", "content_html": "![\"rollup.js\"](\"https://img.kuizuo.cn/rollupjs.png\")
近期准备写一个工具包 @kuizuo/utils，由于要将其发布到npm上，必然就要兼容不同模块（例如 CommonJS 和 ESModule），通过打包器可以很轻松的将代码分别编译成这不同模块格式。
恰好 rollup 3 正式发布，也算是来体验一下。
rollup 的特色是 ES6 模块和代码 Tree-shaking，这些 webpack 同样支持，除此之外 webpack 还支持热模块替换、代码分割、静态资源导入等更多功能。
当开发应用时当然优先选择的是 webpack，但是若你项目只需要打包出一个简单的 bundle 包，并是基于 ES6 模块开发的，可以考虑使用 rollup。
rollup 相比 webpack，它更少的功能和更简单的 api，是我们在打包类库时选择它的原因。例如本次要编写的工具包就是这类项目。
目前常见的模块规范有：
IFFE：使用立即执行函数实现模块化 例：(function(){})()
CJS：基于 CommonJS 标准的模块化
AMD：使用 Require 编写
ESM：ES 标准的模块化方案 ( ES6 标准提出 )
UMD：兼容 CJS 与 AMD、IFFE 规范
以上 Rollup 都是支持的。
官方有一篇文章 创建你的第一个bundle ，不过英文文档比较难啃，同时通过命令方式+选项的方式来打包肯定不是工程化想要的。
所以这里所演示的是通过 rollup.config.js 文件，通过rollup -c 来打包。
一个示例文件如下
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
}
};
执行 rollup -c 就会将main.js 中所引用到的js代码，通过commonjs的方式编写到bundle.js，就像这样。
'use strict';
var foo = 'hello world!';
function main () {
console.log(foo);
}
module.exports = main;
但是更多的情况下，是需要同时打包多个模块格式的包，就可以在output传入数组，例如
export default {
input: 'src/main.js',
output: [{
file: 'bundle.cjs',
format: 'cjs'
}, {
file: 'bundle.mjs',
format: 'esm'
}]
};
便会生成 bundle.cjs, bundle.mjs 两种不同的模块格式的文件。同时在 package.json 中，指定对应模块路径，在引入时，便会根据当前的项目环境去选择导入哪个模块。
{
\"main\": \"bundle.cjs\",
\"module\": \"bundle.mjs\"
}
不过更多情况下，rollup需要配置插件来使用。官方插件地址：rollup/plugins: 🍣 The one-stop shop for official Rollup plugins (github.com)
比如使用 rollup-plugin-esbuild 插件来使用esbuild（也是一个打包器，并且构建非常快）来加快打包速度。可以使用 @rollup/plugin-babel 借助babel，编译成兼容性更强的js代码或者代码转换等等。
以下是rollup+插件的配置示例，来源 antfu/utils/rollup.config.js ，也作为本次工具包的配置。
import esbuild from 'rollup-plugin-esbuild'
import dts from 'rollup-plugin-dts'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import alias from '@rollup/plugin-alias'
const entries = [
'src/index.ts',
]
const plugins = [
alias({
entries: [
{ find: /^node:(.+)$/, replacement: '$1' },
],
}),
resolve({
preferBuiltins: true,
}),
json(),
commonjs(),
esbuild({
target: 'node14',
}),
]
export default [
...entries.map(input => ({
input,
output: [
{
file: input.replace('src/', 'dist/').replace('.ts', '.mjs'),
format: 'esm',
},
{
file: input.replace('src/', 'dist/').replace('.ts', '.cjs'),
format: 'cjs',
},
],
external: [],
plugins,
})),
...entries.map(input => ({
input,
output: {
file: input.replace('src/', '').replace('.ts', '.d.ts'),
format: 'esm',
},
external: [],
plugins: [
dts({ respectExternal: true }),
],
})),
]
以下是对应的npm 安装命令
pnpm i -D rollup @rollup/plugin-alias @rollup/plugin-commonjs @rollup/plugin-json @rollup/plugin-node-resolve rollup-plugin-esbuild rollup-plugin-dts
关于rollup更多使用，不妨参见 rollup官方文档，以及一些使用 rollup 来打包的开源项目。
类似的工具还有 webpack.js, esbuild, parceljs
不过就打包类库而言，并不要求过强的性能，有个相对简单的配置就足以，而 rollup 正是这样的打包工具。
目前技术圈的发展速度可谓是有目共睹，尤其是前端，每隔一段时间就出新的技术，可以说让很多初学者非常畏惧，没有一个明确的方向不知道从何学起。
同时也有很多人，只局限于使用手头已掌握的技术，而不愿去尝试新技术。举个例子，如今 vue3 都已经正式发布，但仍还有停留在 vue2 不愿尝试 vue3 的开发者。而 java 都发布 18 版本了，可还有很多人都还使用着 java8，这种现象可以说是非常常见了。
这里说说我个人编码经验与看法，仅作为个人观点，没别的意思。
熟悉我的人应该都知道，我对很多新鲜的技术有一种难以用言语表达的情感，又哭又笑。属于是那种看到感兴趣的就会开始尝试，在之前也许更强烈。
驱使我去接触的原因无非就以下几点：
首先要知道一点，在任何的软件开发迭代中都没有最终形态的代码。说白话就是代码都是不断更新的，永远写不出最好的代码。
你能看到如今很多开源项目或者商业项目都在不断新增代码或者功能，除非作者不维护了，不然这份代码可以说写到世界末日。
究其原因还是因为社会不断在发展，硬件升级，性能提升，不断的业务需求。毕竟人都在进步，社会难道还不能进步。所以必然会有新的技术出现，只是出现的时间快慢，与技术难点突破。
毋庸置疑，在购买方面，肯定是买新不买旧，同样的在技术（软件更新）方面也是则从用新不用旧。驱使软件和框架更新的原因也就是新增了某些功能（特性），对用户（开发者）的体验有所提升。一般而言比较少的会存在反向更新的操作，这里除了某些国产软件（如某信，某 Q 等等）
就我对此的看法也是如此，假设一个开发工具启动花费了 5s 钟启动，而在它的最新版只需要 1s 钟就能够启动，你会选择更新尝试吗？。再比如一个框架原先的代码需要 10 行代码才能实现的功能，由于新版本提供一个语言级别的语法糖，使该功能只需一行。
并且我对开发体验非常在意，尤其是不好用，或者不好配置的东西，我基本秉持能不用就不用的原则，像 vue2 与 webpack 就是这样，我跟愿意使用 vue3 或 vite。诸如此类的替换有非常多，便不一一列举。
要我肯定毫不犹豫的更新去使用，但有些人可能对此提升不是很在意，又或者是升级的成本相对较高，也可能是因为这个开发工具（框架）他用的比较少，更新的意义自然就不大。
我写代码时常处于三分钟热度的状态，有些东西可能也就一开始的时候感觉比较新奇，然后就不了了之了。我对此的看法主要还是容易对代码产生厌倦感，不想写代码，不愿意学习。当厌倦感产生了，自然而然就放弃编写，也就是三分钟热度的状态。不过也能侧重体验一点，那就是肯定我对此不是那么感兴趣，既然不是那么感兴趣的东西，又何必在写下去呢？
接着过段时间又遇到了一个新的技术，冲击了我的好奇心，开始尝试。 如此重复，就会发现啥都学了一点，但实际是啥都没学到。但至少，让我肯去学习，而不是在原地踏步。而从心底里就想接触的新鲜事物，每次接触到就能满足自己内心的好奇心，就这一点我便知足了。
如果回头看看自己 1，2 年前写的代码，会发现原来自己也曾写过丑陋不堪的代码，也成为过自己所讨厌的样子。如果这份代码我将来还会用到，那么我就尝试去重构，也许在当时还不支持某种特性，代码就无法简化。基于现有的水平，便会发现很多代码都有可改善的地方，可以化繁为简。代码重构属于将杂乱摆放的东西，收拾的整整齐齐的样子。重构是在提升观赏度和舒适度的同时，还减少 bug 的诱发概率。
在编程语言级别水平上，也就是我为什么会想去使用最新的版本（ES2022，TypeScript 4.9），即便是兼容性的问题，我也会去使用，就是因为能够满足我对代码的舒适度，这便足以。
我是很感谢新技术的出现，他实实在在的解决了一些我已有的痛点，提升了我的开发体验。当然它也让我踩了无数的坑，也折磨过我。但不可否认的是，我的自我解决问题的能力也在不断提升，如果我学的是一门比较流行的技术，那么我所遇到的问题，很有可能别人也遇到过，并将他的解决方案分享出来。而我就很容易根据报错描述找他的解决方案来解决我的问题。但在新技术下，用的人自然而然就少了，所分享的问题解决方案也就少了，所以在这种环境下，我就需要自行翻看源码，查阅文档，提出 issues 才能够解决问题。自然而然解决问题的能力也就有所提升。
像流行框架能有这么有问题解决方案，就是因为强大的生态，同时这也是生态好处之一。
因此也有很多人顾忌使用新技术，就是因为遇到问题不知如何解决。包括我也是，但通常我会观察一段时间，等成熟了我才去尝试，而不是直接上手，避免踩一些不必要且耗时的坑。
在圈内有着熟悉的环境，与认识的人相处，做自己会做的事，所以会感到很轻松、很自在。但是当踏出这个圈子的界限的时候，就马上会面对不熟悉的变化与挑战，因而感到不舒适，很自然的想要退回到舒适圈内。
我在阅读英文博客的时候，我也时常感到不舒适，阅读不下去。我也很想回到舒适圈，使用翻译软件来翻译但是这样就会导致我非常依赖翻译软件，就间接失去了一次英文环境与英语能力的提升。
长时间待在舒适圈，会让自己过得很舒服，但是却很难提升自己。不过想想也是，提升的过程不就是苦尽甘来。
以目前来看有一种这样的学习趋势，别人学什么，当下什么技术火，就去学什么。我其实特别反感这种现象，也不推崇这种学习理念。我会做出我的解释：
首先，什么技术会火就学什么，这固然没什么问题，如果一门技术没有热度，没有生态，那么学了的意义不大，一是难有长久稳定的技术发展，二是不能将技术变现。而绝大多数人之所以选择火的技术，有很大一点是因为有前人给他铺了很多“路”，如学习指南，思维导图，视频教程仿佛跟着学就能成为编程大牛似的。可一旦没有这些，就不知道该如何下手。始终都是跟着别人步伐学习，思维很难扩散出去。
并且这种现象必然会导致内卷，首先看看国内的技术，Vue 和 Spring boot 的可以说 10 个 web 开发程序员中有 8 个技术栈是这套，比麻花还是卷了，可薪资呢？
这里我并不想贴相关的薪资图片，你完全可以自行去了解，但是我可以肯定且直接告诉你，React 的薪资普遍会比 Vue 高上一截，而 Java 后端开发，如果技术只停留在 CRUD 的层面，工资普遍也高不了多少。
如果你不去拓展自身的技术栈，不多去了解一些未来的可能会火的技术，还停留在当下，活在舒适圈。那么薪资大概率不变，并且自身会有很大被劝退的概率。
与时俱进，这是我认为不断学习新技术，提升自身技术栈，非常重要的一点。过得舒服，反而过得难受
技术更新迭代越来，也带来越多的机会，这对于接触前端的我感到尤为明显。假设当下又出了某某技术，那么必然会引起软件开发者的关注，于此同时就带来了维护者，贡献者，甚至是一些金主投资商。像 Tailwind CSS 与 Vercel 就是一个很好的例子，两个前端明星项目，有兴趣可以了解它们的故事。
不过这种机会在国内不太多见，反而在国外特别普遍。
但必须要承认的一个事实，如今技术发展过于迅猛，加上目前就业行情不容乐观，当别人了解过的东西，你却不了解，那么别人所能遇到的机会自然就比你多。说的难听点也就是没有对技术提升的想法，今后项目迭代的过程中使用到一些前沿技术就难以胜任。
没有一个明确的目标，学任何（新）技术都是乱学，充其量也就只比不学好一点。
这在我初学阶段尤为明显，我一开始也不清楚我以后会从事什么行业，可以说是什么都乱学一顿。在我的一篇年终总结 2019.7-2020.7 编程年记 中可以说是尤为明显，尤其是在 定一下明年的目标 的段落中，最后我真正深入学习的也就是只有 Web 开发。
我相信很多初学者也会遇到类似的问题，不知道学什么，想学好找工作的但是薪资不高，想学感兴趣的但又不知如何下手。说实话，要我回到当初，我也难以抉择。也有可能处于摆烂状态或是乱学一同，到头来啥都会一点点，但是又好像啥也不会的样子。
这里我是奉劝先定一个短期的目标，为了这个目标我要去学习哪些技术知识。这里就说我未来一年的目标为例：我未来一年想写开源项目，为开源社区做一份微薄贡献，乃至从事开源行业。那么我就需要了解写开源我需要那些预备知识，例如 Github 的使用，项目规范，英文交流等对应开源项目的技能知识，这才是我所该学的，并且能够实实在在用到的，且对我未来有用的。
当你了解的技术越多，你就越能知道自己适合哪些技术。并且当你去尝试过后，更能加深你对某个技术的信仰。
在未来技术只会越来越多，因为当下要解决太多问题，有太多的业务需求开发。只要不断有需求，就不断会有技术更新。但技术更新必然是朝着好的方向去发展，即技术趋势方向。而了解的越多，能看到技术趋势也就更远，方向就更难偏移。
像我目前就比较看好未来 js/ts 的发展，这也是使我从逆向和爬虫转到 Web 开发行业上，并且将会长期发展下去。
但很多程序员就缺乏这种对技术的认可，甚至眼光比较浅薄，认为自己当下所学的就足以，可没却从未到真正的”外面”去看过。
当有了对未来技术趋势的了解，自身就有相对明确的目标学习，而不是漫无目的学习，跟风学习。
也许有些人并不在意新技术是否学习，而是好奇我是如何知道这些技术的。这个问题非常好，我自己简单总结通过那些途径来获取到这些相关技术的新闻。
主要有以下几种来源：
没啥技巧，就靠刷技术文章，自然而然的了解也就越来越多了。
尤其是第二点，也是我了解这些新技术的最直接途径。与其自己去主动了解新的技术，将刷抖音的时间改成刷技术文章，了解新技术就是分分钟的事情。可以说我写博客是因为这个契机，记录自己用到的技术的开发过程，并分享个人的开发体验，让更多人了解到这些新技术。
其实更多时候是比较在意如何去学一门新技术，而不是找一门新技术，当阅历多了，技术自然就了解的多。这里我分享下我对于新技术是如何起步与学习的。
首先我会列举出我近期感兴趣的技术，这一步很关键，我当然不可能每个技术都去尝试一遍，时间精力根本不够。通常在我了解到这个技术的时候，比如文章与视频中，都会介绍到这个的优点与用法，这就足以了。
但想要进一步的学习，还是得依靠实战项目（至少我都是通过实战项目来学习的），这时候我会看看手头的项目，看看有没有能够基于上面所列举出的新技术升级的想法，如果有的话，那正好就当重构与新技术的学习，这是最好的，也是相对比较节省时间的。
但如果没有的话，我通常是会考虑另写一个项目，而这个项目可能是某个灵感的实现，也可能是久违想写的项目，或者是复刻某个感兴趣的站点，总之从上面所列举出来的技术中去选择一个来进行实践。在项目实践中去尝试使用这些新技术，哪怕只是实现一个简单的demo，也总比单纯的刷文档，看代码来的有效。
在项目实践中学习，永远是最直接也是最有效的。回想你编写课设或者工作的项目，是不是在项目开发中进步的最快？如果这时候还有点时间紧迫感，进步反而会更快。（当然焦虑和压力也会随之提升）
关于本文，必然有引来一些不同看法与见解，每个人都有对不同事物的理解，我只是将我对新技术的看法，以文章的方式输出出来。本文并未带有任何的技术的偏见，我对任何技术都保持一视同仁，并且愿意去尝试学习。
不必抱怨新技术发展的过快，自己来不及学，学不完。或者担心自己学的东西在未来将会淘汰，等同于白学。学习过程就是一个非常好的经验总结，当你回顾整个学习过程，其实都没有白学。反而多一次的学习过程，在未来学习新的东西时，学习的成效也会显著提升。保持不断学习，就永远来的及学习。
更多时候，不应该只学如何使用，而是该想想这东西是在什么样的契机下如何被创造出来的，解决了什么问题。而这个问题在未来有没有什么更好的解决方案可替代，如果有更好的解决方案，那么必将又将发展出新的技术来更好的解决这个问题。这在我曾经的学习中，我是从未考虑到的，只专注于学习，而没去了解为什么。
我是希望越来越多的新技术出现，无论它是为了解决什么，必然能解决某些人的一些需求，那么它的出现就很有意义。至于未来该技术和相关生态发展如何，不得而知。也没人敢笃定未来这个技术必定会火，就去学这门技术。绝大大多情况下都是比较看好这门技术，认为未来可期，同时又感兴趣，就开始学习并使用。
", "url": "https://kuizuo.cn/talk-new-technologies-opinion", "title": "深谈个人对新技术的看法", "summary": "目前技术圈的发展速度可谓是有目共睹，尤其是前端，每隔一段时间就出新的技术，可以说让很多初学者非常畏惧，没有一个明确的方向不知道从何学起。", "date_modified": "2022-10-15T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "随笔", "杂谈", "感悟" ] }, { "id": "frontend-automated-testing", "content_html": "![\"v2-45d641f2191559d4eff581d0607efd61_1440w\"](\"https://img.kuizuo.cn/v2-45d641f2191559d4eff581d0607efd61_1440w.jpg\")
如果你的项目要长期使用并维护的话，那么代码自动测试就非常有必要使用。因为没人能保证在修改代码后，不会引发其他额外 bug（功能失效，渲染失败），而在修改完代码后，跑一遍测试就能很大程度让开发者发现自己所修改的代码是否存在问题，是否会导致原有功能失效。
尤其是在其他人接手这个项目时，诱发 bug 的概率自然也就更高（因为他有很大的可能不知道这部分代码的上下文的功能用途），所以这也就是为什么很多开源项目与大型企业的公司都会使用自动化测试，以及要求一定的代码覆盖率。
当然如果项目不是长期维护的，那么完全没必要编写测试代码，这么做无疑是在浪费开发者的时间。
提前简单总结下适合引入自动化测试的场景（优点）：
中长期项目迭代/重构（需要频繁的修改代码）
准确定位代码问题，提高代码质量
引用了不可控的第三方依赖，极易发生 bug（例：beta 版相关的包）
测试的目的在于，及时发现错误，提高代码质量和开发效率，避免存在 BUG 的代码发布上线造成损失。
自动化测试要注意的点
并不是所有项目都适合引入自动化测试，反而会增加一定代码成本
如果项目开发阶段还不稳定，那么手动测试效率会比自动化测试更好
有些代码可能这辈子都不会在碰第二次，就没有编写自动化测试的意义
在代码编写阶段，建议只对重点功能进行测试，没必要一定追求过高的测试覆盖率。注意，是编写阶段
测试类型有以下几种：
单元测试（Unit Testing）
代码中多个组件共用的工具类库、多个组件共用的子组件等。通常情况下，在公共函数/组件中一定要有单元测试来保证代码能够正常工作。单元测试也应该是项目中数量最多、覆盖率最高的。
集成测试（Integration Testing）
测试经过单元测试后的各个模块组合在一起是否能正常工作。会对组合之后的代码整体暴露在外接口进行测试，查看组合后的代码工作是否符合预期。集成测试是安全感较高的测试，能很大程度提升开发者的信心，集成测试用例设计合理且测试都通过能够很大程度保证产品符合预期。
UI 测试 （UI Testing）
对于前端的测试，是脱离真实后端环境的，仅仅只是将前端放在真实环境中运行，而后端和数据都应该使用 Mock 的。
端对端测试（End-to-End Testing）
将整个应用放到真实的环境中运行，包括数据在内也是需要使用真实的。
关于测试框架，我主要使用 Vitest 与 Cypress。这两个作为测试框架都相对比较新，并且性能与开发上会比 Jest，Puppeteer 来的好。本文的一些测试示例也是基于这两类框架之上。
其实还有个接口测试，不过这就不是前端要关心的内容了，所以就没列举在这上面。
自动化测试和普通说的测试是有些不大一样的，有很多测试，其实都不能归类为前端自动化测试。这里我会举个例子来说明一下。
在自动化测试来说有个要求：自动化测试要的不是某次测试执行的是否通过，而是每次执行都必须通过。
怎么理解这句话呢：比方说我要测试获取博客列表的函数，假设实际的接口失效了，那么就会导致结果与预期不一致，就会导致代码测试不通过。既然不通过，那我就要去查看为什么不通过。当我点击这个单元测试的时，发现原来是后端接口失效了。可万一哪天这个接口突然好了，又或者发现刚刚原来没插网线导致的请求失败导致测试不通过。像这些 不稳定因素 在前端自动化测试中就会使用 mock 的方式，强制返回一定格式的数据给测试框架。到这里你可能会好奇，为什么要这么做？
想想看，如果因为接口失效导致测试失败，是因为测试代码的问题吗？那跟测试代码有毛关系，明显是后端或者服务器的问题。我们要测试的是获取博客列表的函数，而不是在测试接口（接口自动化测试）。测试接口不应该是前端要做的事情。确保后端返回正确的响应结果，前端能够对这些数据进行处理渲染，这才是我们要做的。
每次测试都存在不可控的因素，就会导致每次测试结果都有可能不同，这就违背测试的意义了。 所以这也就是为什么要数据 mock 的原因了。
给测试输入的值，在经过测试后，要保证输出的值与我们预期想要结果的值相同。
其实目前前端有个尴尬的点，目前绝大部分实际业务项目里，前端的单元测试都没啥鸟用，UI 自动测试又太难搞。
这就导致很多开发者不清楚到底要测试什么，导致对测试特别不重视，包括我一开始也是如此。看到很多文章都是在演示测试 1+1 =2，介绍测试框架，很少从实际项目中出发进行测试。不过原因无非就是实际项目写的少，就别说测试代码了。再不然就是写过的代码都不怎么维护（重构，阅读），自然的就不会去写测试了。
不过确实没什么好举例的，因为太多东西可以写成单元测试了，比方说formatTime.test.ts, param2Obj.test.ts,validate.test.ts，从文件名就知道在测试什么了，就看开发者想不想写的问题了。
可以到 vitest-dev/vitest / facebook/jest 等测试框架中的 example 中查看测试案例。
关于 UI 测试和 e2e 测试，我非常推荐看看 cypress 的Todo 示例，测试的特别清楚，这里放张官方测试结果供参考。
![](\"https://img.kuizuo.cn/image_a_B5FPFfJI.png\")
这里补充一句，vitest 是能做 UI 测试的，可以通过 vuejs/test-utils 库来实现，但是 vitest 的运行环境是 nodejs，通过 jsdom 等库来模拟浏览器环境，而 cypress 是实实在在的运行在浏览器上，而且有可视化页面操作。这两者的区别也就是运行时环境的区别，有些实际场景对真实环境是有需求的，所以针对 UI 测试更多会选择像 cypress 这种直接运行在浏览器的测试框架。
在之前我根本不会在意测试，就连已有的测试代码我都不会尝试运行。就在前段时间我正重构我的一个项目时，但当我写了一大部分的代码后，我尝试运行发现有些功能失效了。于是我进一步的排查，终于找到我修改代码并还原成我原来的代码。
假设一开始有份完整的测试代码，当我修改一部分代码后，跑一遍测试查看测试情况。发现没问题后，再开始下一步的代码工作，反复测试，直到最终重构完毕。与其浪费代码的时间，不如将这些时间去用来完善测试代码。不仅自己后续使用需要，到时候项目交付给别人的时，别人也不至于修改你的代码时兢兢业业。
究其原因是为了保证代码质量。
当然，虽说重视，但我也不会立马为已有的项目增加测试.耗时且费力不讨好。更多时候只会在准备重构的项目，或者是新项目上去增加测试代码。
编写这篇文章主要解惑我自己对往常对测试的看法，也借此机会养成 TDD 模式的开发的习惯。
试试前端自动化测试！（基础篇） - 掘金 (juejin.cn)
", "url": "https://kuizuo.cn/frontend-automated-testing", "title": "前端自动化测试", "summary": "v2-45d641f2191559d4eff581d0607efd611440w", "date_modified": "2022-10-06T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "frontend", "test" ] }, { "id": "gitea-drone-practice", "content_html": "之前搭建过 Gitlab，但是就只是搭建而已，并未实际使用，因为我大部分的代码还是存放在 Github 上。
并且大部分项目都是在 Vercel 上运行的（Vercel 是真好用），但是最近国内访问 vercel 情况不容乐观，貌似被墙了呜呜。然后 Gitlab 的资源占用非常严重，几乎占用了一半的服务器性能，可 点我 查看运行状态。与此同时，随着很多私有项目越来越多，使用 git 私有仓库以及 Vercel 部署，肯定不如自建私有 git 服务和自有服务器部署使用体验来好。
于是就想搭建一个轻量级仓库，同时支持 CI/CD。经过一番的调研，决定使用 Gitea 和 Drone 作为解决方案。
Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证.
你可以在 横向对比 Gitea 与其它 Git 托管工具 查看 gitea 与其他 git 工具的优势与缺陷。
这里我选用 Docker 进行安装，安装文档可在官方文档中查看其他安装方式
version: '3'
networks:
gitea:
external: false
volumes:
gitea:
driver: local
services:
server:
image: gitea/gitea:1.17.1
container_name: gitea
environment:
- USER_UID=1000
- USER_GID=1000
restart: always
networks:
- gitea
volumes:
- gitea:/data
- /etc/timezone:/etc/timezone:ro
- /etc/localtime:/etc/localtime:ro
ports:
- '10800:3000'
- '2221:22'
根据自身需求配置 docker-compose.yml 内容。运行 docker-compose up 等待部署
服务器防火墙与云服务安全组都需要开放端口才可访问，服务器ip:10800，将会出现如下界面
![](\"https://img.kuizuo.cn/image_8ix-AMvt3t.png\")
因为修改配置相对比较麻烦，所以在首次安装的时候，请根据实际需求进行配置安装。
假设要修改其中的配置的话，gitea 的后台管理面板是无法直接修改的。需要到 /data/gitea/conf/app.ini 中修改，具体修改的配置 参阅 自定义 Gitea 配置 - Docs
必须完全重启 Gitea 以使配置生效。
从其他第三方 git 仓库迁移到 gitea，可以访问https://git.kuizuo.cn/repo/migrate 来迁移仓库
![](\"https://img.kuizuo.cn/image_sRQV5hAKUh.png\")
稍等片刻，取决于访问 github 仓库的速度。有可能还会迁移失败，就像下面这样。
![](\"https://img.kuizuo.cn/image_X9IpG2q36n.png\")
所以可以申请访问令牌（Access Token），在 New Personal Access Token 处创建。迁移成功后，如下图所示
![](\"https://img.kuizuo.cn/image_Rug0AmD8GE.png\")
很大部分时间，gitea 只能作为我的副仓库，或者说 github 的镜像仓库。
gitea 也提供镜像仓库的方案，官方文档Repository Mirror
![](\"https://img.kuizuo.cn/image_Q5IaHnKCYJ.png\")
由于 Gitea 并没有内置 CI/CD（持续集成/持续部署） 的解决方案，所以需要配置第三方的，这里推荐使用 Drone CI。
Drone 是面向繁忙开发团队的自助服务持续集成平台。相对于常见的Jenkins，选中 Drone 的原因在于它非常简洁，不像 Jenkins 那样复杂，同时它拥有可以满足基本需求的能力，并且提供了许多实用的插件，如GitHub，Email，微信，钉钉等
由于我们使用了 gitea，所以 drone 中选择 gitea 来安装，这是官方文档 Gitea | Drone，照着操作即可。
需要安装 Server 和 Runner，一个是 Drone 的服务，另一个用于检测 Git 记录，以重新构建项目。
这里贴下 drone 的 docker 配置（根据文档和自己部署的 git 服务配置来替换）。
docker run \\
--volume=/var/lib/drone:/data \\
--env=DRONE_GITEA_SERVER=https://try.gitea.io \\
--env=DRONE_GITEA_CLIENT_ID=05136e57d80189bef462 \\
--env=DRONE_GITEA_CLIENT_SECRET=7c229228a77d2cbddaa61ddc78d45e \\
--env=DRONE_RPC_SECRET=super-duper-secret \\
--env=DRONE_SERVER_HOST=drone.company.com \\
--env=DRONE_SERVER_PROTO=https \\
--publish=80:80 \\
--publish=443:443 \\
--restart=always \\
--detach=true \\
--name=drone \\
drone/drone:2
docker run --detach \\
--volume=/var/run/docker.sock:/var/run/docker.sock \\
--env=DRONE_RPC_PROTO=https \\
--env=DRONE_RPC_HOST=drone.company.com \\
--env=DRONE_RPC_SECRET=super-duper-secret \\
--env=DRONE_RUNNER_CAPACITY=2 \\
--env=DRONE_RUNNER_NAME=my-first-runner \\
--publish=3000:3000 \\
--restart=always \\
--name=runner \\
drone/drone-runner-docker:1
查看连接情况
docker logs runner
执行完毕后，然后访问线上的 drone 服务，点击 CONTINUE 将会跳转到你的 Git 授权页面
![](\"https://img.kuizuo.cn/image_rUdNHPlB73.png\")
点击应用授权，再次回到 drone，此时页面 Dashboard 列出了 gitea 的所有仓库（如果没有的话，可以点击右上角的 SYNC 来同步）。
![](\"https://img.kuizuo.cn/image_TXWZgDOhrQ.png\")
上述只是安装了，我们还需要编写 .drone.yml 配置文件来告诉 drone 我们要做什么，编写过程与 Github Action类似。相关文档: Pipeline | Drone
这里就选用 antfu/vitesse 作为演示。这里省略 clone 仓库的步骤。进入到自己的 gitea 仓库，然后添加 .drone.yml 文件，内容如下：
kind: pipeline
type: docker
name: ci
steps:
- name: install & build
image: node
commands:
- npm config set registry http://mirrors.cloud.tencent.com/npm/
- npm i -g pnpm
- pnpm i
- pnpm run build
- name: upload
image: appleboy/drone-scp
settings:
host:
from_secret: host
username:
from_secret: username
password:
from_secret: password
port: 22
command_timeout: 2m
target: /www/wwwroot/${DRONE_REPO_OWNER}/${DRONE_REPO_NAME}
source:
- ./dist
这里对 .drone.yml 配置进行详解：
其中 build 这个不用多说，与 node 构建相关的，不过多介绍。
upload 则使用appleboy/drone-scp插件，可以将构建出来的文件通过发送到服务器指定位置。在这里 source 对应就是构建的文件，target 则是要移动的位置，这里的 /www/wwwroot/${DRONE_REPO_OWNER}/${DRONE_REPO_NAME} 对应本项目为 /www/wwwroot/kuizuo/vitesse。此外 ssh 的 host，username，password 或 key，都作为环境变量（私有变量的方式传递，这在 drone 的控制台中可以设置）。
由于每次构建可能需要删除原有的已部署的资源文件，那么可以使用 appleboy/drone-ssh 插件来执行终端命令来删除，例如
kind: pipeline
name: default
steps:
- name: deploy
image: appleboy/drone-ssh
environment:
DEPLOY_PATH:
from_secret: /www/wwwroot/${DRONE_REPO_OWNER}/${DRONE_REPO_NAME}
settings:
host:
from_secret: host
username:
from_secret: username
password:
from_secret: password
port: 22
command_timeout: 2m
envs: [DEPLOY_PATH]
script:
- rm -rf $${DEPLOY_PATH}
具体就因人而异了，这里我仅作为演示。
大致介绍完毕（其实已经介绍差不多了），有关更多插件可以参阅 drone 插件。这里开始演示，进入 drone 页面，找到仓库，默认情况下，所有仓库都处于未激活状态。
![](\"https://img.kuizuo.cn/image_6XBrsAY8VE.png\")
点击 ACTIVATE REPOSITORY 根据选项选择，点击右上角的NEW BUILD选择分支，添加 drone 环境变量（私有变量），即上面的 from_secret 后面的内容（host，username，password），即可开始运行。
![](\"https://img.kuizuo.cn/image_PAM6QQS1V_.png\")
静等 PIPELINE 执行完毕，结果如下
![\"image-20220928152635955\"](\"https://img.kuizuo.cn/image-20220928152635955.png\")
此时打开宝塔，跳转到指定目录下，就可以看到构建的内容都已经放到指定位置了
![\"image-20220928152725853\"](\"https://img.kuizuo.cn/image-20220928152725853.png\")
这时候只需要配置下 nginx，就能将页面展示到公网上，这里就不在这里赘述。当完成上述配置完毕后，每次只需要 pull request，drone 就会自动拉取 gitea 的代码，并开始执行.drone.yml中的任务。
TODO。。。
【CI/CD】搭建 drone 服务，构建前端 cicd 工作流，实现博客的自动化打包并部署 - 掘金 (juejin.cn)
单机部署 CI/CD 进阶版：宝塔+gitea+drone | Laravel China 社区 (learnku.com)
", "url": "https://kuizuo.cn/gitea-drone-practice", "title": "Gitea 与 Drone 实践", "summary": "使用 Gitea 搭建一个轻量级 git 私有仓库，并配置 Drone CI 来实现自动构建与部署。", "date_modified": "2022-09-28T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "git", "gitea", "drone" ] }, { "id": "request-protocol-scheme", "content_html": "前段时间看了别人的一个写了羊了个羊刷次数网页版，但是 js 代码做了混淆，然后我的那个解混淆的工具还没适配上，短时间内还原不了。但由于是网页版，所以抓包数据还是能看到的，于是就准备复刻了一个（其实就没有也照样能写出来，因为确实没啥难度）。
可在此体验：7y8y.vercel.app （当然由于官方改动，现在功能已经失效了，但看看页面到不成问题，可能需要科学上网）
原本我是不考虑写的，但是这背后所涉及到的技术以及技术框架我是特别想聊聊，加之以后我也有很大的可能会再写一个类似的刷 xx 的网页版，所以就考虑写一个类似的模板以便后续应用需求。
相关模板：https://github.com/kuizuo/protocol
与此同时，我也快有半年的时间没碰协议复现（网络通信协议重新实现，后文都简称协议复现）。我更喜欢说这个词，也有的人会说模拟请求，对应的关键词可能有 post 请求，抓包，发包，爬虫等等，但大致的意思是抓取请求数据包，然后脱离宿主机（浏览器，手机），将抓取的数据包重新发送一遍。
你也可以理解成爬虫，但和爬虫相比，要做的不只是爬取数据，而是要基于某些请求包（或者说调用他人不提供的 api 接口，即爬取），来实现一定的功能。比如登录协议，签到协议，抢购协议，游戏封包等等，然后不依靠宿主机（即不用登录浏览器或者应用设备）就能实现诸如登录，签到等功能（在后台记录是有的）。因为这些都是基于网络通信协议的，只要抓包（抓取数据包），然后使用编程提供的网络请求模块来模拟请求，达到重新发包，重新请求的目的。在网页中有 http 协议，websocket 协议，而游戏中有相应的与游戏服务器对应的协议，邮件短信文件又是不同的协议（这里的协议都叫网络通信协议），所以我个人更倾向于称之为协议复现。
所以要做协议复现，那基本上有一定的逆向功底和爬虫能力，还有网络通信协议相关的知识了。此次的开发也算是回顾下这些相关技术了。
注：本项目仅用于学习研究使用，请勿将本项目的任何内容用于商业或非法目的，否则后果自负。
在这里容我多废话几句，讲一个我之前的开发经历，可以说这个开发经历算是这篇文章的由来。
在之前住的一个小区，有个门禁系统，需要安装一个开门的 app（后文都称开门 app），然后注册一个账号到物业那边登记为户主或家庭成员。
每次开门的时候，都需要打开这个开门 app，然后点击你要的开的门，接着门就打开了。或者叫保安开个门，总之就是特别麻烦，还不提供创建应用快捷方式。
于是我想的是将接口数据“偷”了过来，将大门列表展示在前端上，然后点击对应的大门，然后将大门 id 转发给原 app 的服务器，就实现了开门的效果，也就是这个小区开门的网页版的核心逻辑。
大致界面如下，展示小区的大门，点击即可开门（远程）
![](\"https://img.kuizuo.cn/image_Zv0hXU8h1j.png\")
因为是网页版的，所以只需要在浏览器打开对应的网址，点击大门即可（主要还是这个 app 不提供桌面快捷方式，点击这个 app 还需要观看首屏广告，手机网页浏览器提供某个网站的快捷打开） 。此外他人也不用到物业登记，就能开门，对于一些朋友或者住户来说，省去了物业登记的繁琐。
不过这个软件还是有挺多要注意的点：首先就是鉴权了，由于我当时主要目的是为了我自己和身边朋友，网站也没有特意发布到互联网上，所以就没做鉴权相关的，不然正常情况下是一定要做鉴权和调用记录的，以及 ip 白名单的。否则搞不好登录原 app 的账号直接因为调用过于频繁直接给禁用了；最主要的安全问题，这里的安全可不只是网站的安全，而是现实的安全。想想如果有一个可以随意进出小区大门的程序，那么任何人都可以进入这个小区，小区的公共设施，业主生活质量安全等等谁来保障？而且最主要所绑定的账号还是我的，万一小区真出了事，那么我的责任将会非常大。
综合考量，这个应用是绝对不可能大肆发布到网上的。个人自用问题还是不大，因为这种调用量对服务器几乎没有什么压力。
我的初衷也仅仅只是因为作为开发者的我，降低了我点击开门的频率，免去登记的繁琐。
在当时我甚至想基于手机的 GPS 定位，来实现靠近小区自动开门。真羡慕当时我的一堆想法，但也遗憾当时没有去尝试实现这一个想法。
这个应用就大致初衷就说到这了，接下来我要说说开发，这也就是本文说要的重点内容了。下面是我当时的项目结构：
![](\"https://img.kuizuo.cn/image_7J7PhsdaQy.png\")
不难看出，这是一个前后端分离的项目，其中前端使用 uniapp 来开发一套代码多端运行，并且使用的是 Hbuilder 编辑器来开发。而后端就是常规的 Node 后端服务，使用的是 Express 框架。
技术栈就介绍完毕，这里我要介绍整个流程。
就说说获取大门列表和开门的两个接口请求：
后端接口：http://localhost:3000/api/list
这个接口主要的作用就是获取原开门 app 的大门列表，这里简单介绍下代码
router.get('/list', async (req, res, next) => {
// 模拟请求获取所有大门数据
let url = `https://xxx.com/api/getDoorList`
let data = {
xxx: {}
}
let json = await (await axios.post(url, data)).data
return json // [{...},{...},{...}]
})
然后前端请求后，将列表数据渲染到页面上。
后端接口：http://localhost:3000/api/open
router.get('/open', async (req, res, next) => {
let { id } = req.query
// 模拟请求开门
let url = `https://xxx.com/api/openDoorControl`
let data = {
id: id
}
let json = await (await axios.post(url, data)).data
return json // { \"code\": 0 ,\"msg\": \"success\" }
})
这里的代码也仅仅只是作为演示，实际代码可不止这么简单，因为还需要涉及到登录，加密等等环节。
我的前端页面访问地址是 http://localhost:5000，我需要 http://localhost:3000/api/list 和 http://localhost:3000/api/openDoor。
可能有些人会问，为啥要后端服务，不直接在前端向开门 app 的服务器发送请求，然后将响应直接渲染到前端上。比如直接在前端代码中写 openopenDoor 函数
async function openDoor(id) => {
// 模拟请求开门
let url = `https://xxx.com/api/openDoorControl`
let data = {
id: id
}
let json = await (await axios.post(url, data)).data
return json // { \"code\": 0 ,\"msg\": \"success\" }
})
这个疑惑在我初次想使用 web 端来实现协议复现的时候也考虑过，但浏览器不支持。这也是我下面所要说的
一般用户的浏览器是有非常强的页面安全策略的，这里要说的就是同源策略，更细分点就是跨域，比如说 kuizuo.cn 这个站点，想要向 baidu.com 发送请求，请求是能够正常发送过去的，但是 kuizuo.cn 这个站点是接收不到任何数据。因为 kuizuo.cn 和 baidu.com 根本不是同一个网址，专业点说就是不同源，这种不同源的请求在浏览器，称为跨域请求。
![](\"https://img.kuizuo.cn/image_QLEJFPTkb6.png\")
跨域请求如果请求的服务端不允许跨域，即响应协议头没有如下内容
access-control-allow-credentials: true
access-control-allow-headers: Content-Type, Authorization, X-Requested-With
access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS
access-control-allow-origin: *
浏览器会直接拒绝接收响应，但浏览器确实将请求发送给了服务端（打开控制台中的网络是看不到该请求的响应结果的）。
跨域限制只存在于浏览器端，在其他环境下是不存在，请求都是能够发送出去，并且是可以接收到的。所以说为什么不在前端直接向原应用程序的服务器发送请求，罪魁祸首也就是同源策略。
像 origin，reference，user-agents 等协议头是无法修改的
origin: https://xxx.com
referer: https://xxx.com/api/test
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.42
而有些请求是会效验你的设备信息，来源地址，这些内容在浏览器中都写在协议头中，且浏览器不支持修改。使用浏览器来发送数据，无疑就是告诉服务器我是浏览器发送的。服务器判断来源不是自家的域名，那就直接拒绝响应。像防盗链就是检测 referer 。
正是因为同源策略的限制，导致做协议复现时往往都会选择在本地中直接运行，比如使用易语言，python 等语言，将应用打包成 exe，然后跑在 window 系统上。
![](\"https://img.kuizuo.cn/image_hyjd395YGI.png\")
这样的应用会有以下几点缺陷：
易破解：由于你的大部分核心逻辑最终都会进行编译打包成 exe，如果会些破解技术，恰好你不做任何防护手段，要破解你的程序非常容易。所以也就为什么很多 exe 程序（尤其是易语言）会带有 .vmp.exe 也就是 vmp 加壳，让程序很难被分析与破解。并且我就可以开启系统抓包，就可以看到应用程序模拟发送的请求数据包是什么。
不易跨平台：大多数的协议复现都是 exe 桌面应用程序，虽然也有安卓，但一般比较少。对于非 windows 用户或者说手头不方便用电脑的用户就很难体验到，并且还要特意安装一个应用，应用程序更新也需要重新安装。
其实我说的这些，也算是绝大部分都是桌面应用程序的一个“通病”，但也不是没有优点，这在后面介绍后端应用开发的会做一个比较。
另一种方式就是我自行搭建一个后端服务，然后将我要模拟的请求封装成一个接口供外部调用。只要我的这个后端服务允许跨域请求，那么我在浏览器或者在桌面端应用都能调用该接口。这样做调用者根本不可能知到你这个接口返回的数据的核心代码（除非他能渗透你的服务器）。
![](\"https://img.kuizuo.cn/image_pVEHwQk1AJ.png\")
别人像要复现一个相同的协议请求的话，就必须自行抓包分析原站点的数据。而原站点可能做了一定的防护手段，例如验证码 浏览器指纹等风控手段。对于一般人而言，非常难破解。但是假设你能复现该请求的话，又非常不想让别人复现，那么自行搭建一个后端服务封装是最好的手段。而在此基础上，你可以做一些限制，比如接口封装，调用收费等等。
这里我就不细说太多了，但也不是说没有缺点，甚至可以说这个缺点不比桌面端应用好到哪里：
部署后端服务：由于搭建了一个后端服务，那么就需要将后端服务部署到服务器上，部署后端服务是小事（但其实也很麻烦，有些写协议复现也不一定会后端开发），但是需要考虑用户的访问量，可能并发量大，那么请求就可能会阻塞导致响应速度变慢。
请求限制：从上流程图也不难看出，由于后端应用是部署在自己的服务器上，同时需要承载多个接口请求，然后模拟的请求都是由自己后端应用服务器发送的，这和桌面端应用不同。桌面端模拟的请求发送是用户自己的电脑，即用户自己电脑的 ip 地址，而后端应用服务器是服务器的 ip。一旦发送的请求多了，必然是会限制请求的，说白了就是将 ip 黑了，无法访问。要解决的最有效的办法就是换 ip，使用一些 ip 代理服务商，在请求 xx 服务器的时候使用动态 ip 来请求，检测被黑 ip 之后就换另一个 ip 来请求，但是这样就需要额外支付一些 ip 的费用。
如果你需要跨平台（web 端，桌面端，手机端）并且想要保护好你的模拟请求的代码，那么就要考虑选择后端应用开发方案。
像我一开始所介绍的小区开门网页版就是属于这一范围，这里就不再赘述其实现过程了。
假设你手头已经有了某个网站的大部分协议复现的代码接口，但是不想搭建一个后端应用，却想要在前端中使用。有没有解决方案，这也是有的。
一种就是通过浏览器插件来允许任何请求跨域，或者本地开启 http 响应替换，将允许跨域的协议头加到响应中。但这些手段都需要使用者有一定的开发能力，对于普通用户而言就无能为力。
目前绝大多数的网站应该都属于前后端分离的形式，后端只提供服务与接口的，提供的接口一般都带有 /api/ 或 /v1/ 等请求前缀。那么就可以将前端的请求，通过反向代理，转发到原应用服务器。
反向代理其实也需要服务器，但是和后端应用相比，只需要配置一个 nginx，例如
location /api/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://要转发的服务器域名/api/;
index index.html index.htm index.jsp;
}
举个例子，原后端应用通过 http://target.com/api/user/me 来获取目标服务器用户信息，如果我的前端应用 http://example.com 想要请求该接口必然会有跨域限制。但是通过反向代理，我的前端应用可以请求 http://example.com/api/user/methods，nginx 会判断 url 是否为 /api/ 前缀，将请求转发给 http://target.com/API。说白了请求 http://example.com/api/user/me 就是在请求 http://target.com/api，同时还不会触发跨域，反向代理也是解决跨域的常用方法之一。
![](\"https://img.kuizuo.cn/image_PO82fF6A5E.png\")
由于请求还是通过服务器发送的，所以后端应用开发有的限制，在反向代理也同样是有的。还有就是对于限制设备请求的服务器，使用这种方案就不行。。。
同时这种开发方案对于多域名的应用来说可能就不是那么友好，因为就需要配置比较多的反向代理，同时只是将接口转发，接口的定制化就不是那么好。只不过你可以原封不动的将原有的请求迁移到前端，假设有了某个网站的大部分协议复现的代码接口，那么这样迁移将会特别方便。
提一嘴，如果使用跨平台开发的，如使用前端技术栈去编写桌面端应用（electron），编写安卓，小程序（uniapp，taro）的话，除了小程序外，其他都没有跨域限制的（具体还要看相应跨平台技术的限制）。
最终选择那种开发方式还是取决对应的应用场景，没有绝对的方案，具体考虑哪种方案是需要考虑用户，代码安全，请求量，是否维护来考量了。
写到这，可能对大多数人而言还是不懂，也很正常，因为这些内容都不算属于传统开发的范畴，甚至可以说是做 hui 产的利。
我非常希望使用到浏览器的跨平台性，即多端运行，用户的设备只需要有一个浏览器能打开网页就能体验到。（这其实也算是我为什么学 web 开发的初衷了）
但是在一开始所介绍的小区开门应用中，这样的开发体验其实并不友好。因为我既要编写前端应用还要编写后端服务，相当于两个项目。同时部署应用和传统部署没有特别大的区别，都需要一台服务器，很多时候都是浪费在部署上。
而 SSR 框架可以算是后端应用开发和前端应用开发结合。能很好的解决上述存在的问题，并且也易于部署，下面我会细细道来。
这里我选用的 Nuxt3 框架，羊了个羊刷次数网页版就是基于 Nuxt3 框架来开发的，并且使用 vercel 来进行部署。我手头还写过一个项目 api-service。
首先在 SSR 框架，是有对应的后端服务引擎。像 Nuxt3 使用的是 Nitro，而 Next.js 使用的是 koa。都提供了后端服务 API 的解决方案，同时这些都是服务都算是 serverless function（无服务函数），所以在编写与调用非常方便。
此外基于 Netlify 和 Vercel 这些 serverless development 平台，可以非常方便的部署 SSR 框架。同时内置 CI/CD，只需要提交 git commit 就能实现自动构建自动部署。
最主要是的我恰好使用 Node.js 来做爬虫与api接口，因此后端复现接口也使用 js 来实现。
为此我特意编写了一个 Protocol 协议复现模板 ，这里我就不在过多介绍该模板。
协议复现能写非常多的程序，因为协议复现的大多数案例都是基于已有的应用服务上去实现的，而很多人的日常生活都使用这些已有的服务上。有些已有的服务可能对于一些人而言，体验不好，或者是有其他限制。因此就有人对这些已有的服务来进行“扩展”，来实现自己所定制化的需求。
这里我需要谨言慎行，因为大多数的协议复现所请求的站点都是他人的站点，如果你的程序或人为控制不当，导致他人服务器崩溃，又或者是非法访问本不属于你所该访问的数据。因此很有可能会触发相关的法律，这里我就不细说了。
![](\"https://img.kuizuo.cn/github_copilot_ready.jpg\")
我个人是非常讨厌这些认证提交手续的，例如疫情健康报告，请假申请表等等，当然也包括这次 Github 学生认证。
这也就是我为什么迟迟不认证 Github 学生的原因，其实说白了就是没必要。但就在前段时间 github copilot 不是内测结束了，然后要开始收费了，收费标准 一个月 $10 / 一年 $100。这费用对于我本不富裕的生活雪上加霜。而 coplot 对教育认证有免费资格使用，于是乎就有了此次较为艰辛的 github 学生认证。
介绍完故事背景后，就要开始认证了。
能看到这篇的估计也是想要学生认证的，这里就将我的认证过程总结出来。
如果开启科学上网的话，提交时 github 会根据 ip 来判断所提交的学校位置和 ip 地址是否相近，如果差的很远的话是直接认证失败，并提示
You appear not to be near any campus location for the school you have selected. If you are a distance learner then your school-provided academic affiliation documentation must state so.
大致意思：您没有出现在您所选择的学校的任何校园附近。如果你是远程学习者，那么你的学校提供的学术联系文件必须说明这一点。
也就是这一点，让我放弃我在老家认证学生认证的想法，而到开学才重新认证
但如果不开启科学上网就有可能获取不了 Google 地图与最终提交，我的做法是修改 host，然后需要 Google 地图的时候开启科学上网，然后获取定位信息后再关闭，最后提交的时候没开启科学上网。
有的大学是没有教育邮箱的，就比如我的大学。但不用教育邮箱也是能认证成功的。（当然有的话反而更好通过）
学生证学生卡这些都可以作为学生 ID 来认证的，不过在拍学生证之前一定要保证照片清晰，看情况决定时间水印，因为有可能会提示如下信息
Your document does not appear to include a date demonstrating current academic affiliation. For countries utilizing non-standard calendars, you may need to capture the original document beside one with a converted date. You may include multiple documents in your image, so long as they are legible.
大致意思就是提交的资料没有当前时间认证，所以加个时间水印主要是为了这个。
但不过我有个同学是新号，5 月 github 注册的时候提示要他学生认证，然后他就随手拍了一下学生证的照片提交上去就认证通过了。据他回忆当时认证的信息填的很随意，然后第一次就通过了。而反倒是我提交了好多次学生证都失败了，怎么说呢，可能看账号吧。
假设你拍照提交学生证一直失败（我就是这样），那么还可以通过 学信网 的学信档案 申请教育部学籍在线验证报告
这个报告默认是中文的，但是 github 不一定认中文的，所以会拒绝。这时候就需要翻译成英文，但是在学信网申请英文在线报告需要额外 30 元，有效期 1 年。当然如果不想花这些钱，就想着是学生认证白嫖的话，也可以使用网页在线翻译，将内容翻译成英文，就得到了一份英文版的在线验证报告。而这个份报告是能通过的，我就是这样操作的。
每次提交的文件都要求不同，因为 github 后台会对文件做认证，所以就需要多拍照，多截图，做到图片相似，但不相同。
如果你按照上面的操作提交了，但还是不通过，并且只有下面一条提示信息的话
You are significantly more likely to be verified if you have completed your GitHub user profile with your full name and a short bio.
大致意思是，完善你的 github 个人账号信息（头像，昵称，简介），像我做的就是把昵称改成了我的真实姓名，简介就写我来自什么学校，热爱开源。就差最后大招把头像改成我的自拍照，背景是学校门口。当然 github 还算仁慈，最终还是没让我放出“大招”。
然后我修改了个人信息，并又提交了几次后，就终于成功了！
所以只出现了上面的一条提示，那么说明已经快要成功了，只不过 github 还要考核你的坚持程度，看你会不会放弃（我猜的）
按照以上的步骤，我将演示一遍我的认证过程。
1、登录 github education ，选择学生那个按钮。
![\"image-20221010134753749\"](\"https://img.kuizuo.cn/image-20221010134753749.png\")
2、首次表单填写邮箱，学校，以及使用Github的目的。表单所提交内容全都要使用英文
![\"image-20221010134942952\"](\"https://img.kuizuo.cn/image-20221010134942952.png\")
3、再次填写一个表单，首先是照片证明，也就是学生认证资料。这里是使用的是学信网的在线证明英文翻译，Proof Type 选择 Other (Example: Screenshot of school portal)，备注内容填写证明来源，例如：这份证明来自中国高等教育学生信息网（学信网），以下是在线证明地址。。。
![\"image-20221010135500357\"](\"https://img.kuizuo.cn/image-20221010135500357.png\")
其次第二个表单，根据你的学校信息填写即可。切记到这一步的时候请不要使用科学上课，最好使用学校的网络来提交。
![\"image-20221010135949606\"](\"https://img.kuizuo.cn/image-20221010135949606.png\")
4、点击Process my application 提交，等待结果即可。
最终 Github 在今早发送邮箱告知我认证成功了！
![](\"https://img.kuizuo.cn/github_eduction_success.jpg\")
只要你提供的学生信息真实有效，不断提交最终肯定是会成功的。在这认证期间我一共提交了 11 次请求。
![](\"https://img.kuizuo.cn/image_n3x8Cm8kMv.png\")
期间收到的 Gtihub Education 邮箱信息如下：
![](\"https://img.kuizuo.cn/github_eduction_eamil.jpg\")
最终也不负众望，在收到 github 通知的时候的，我就立马编写了这篇文章，记录了自己 github 学生认证的过程。
如果你有幸看到这篇文章，并想要认证 github 学生资格，希望这篇文章有帮到你。
最终也是要感谢 Github 为广大开发者提供平台，让一群志同道合的人在上面分享并创造想法，同时也感谢这些默默为开源做出贡献的前人，不断为这个世界增添一丝色彩。
", "url": "https://kuizuo.cn/github-student-certification", "title": "记 Github 学生认证", "summary": "记录本人 Github 学生认证艰辛过程与经验分享。", "date_modified": "2022-09-06T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "随笔", "github" ] }, { "id": "strapi-user-register-and-login", "content_html": "在官方博客 Registration and Login (Authentication) with Vue.js and Strapi 中演示如何实现注册与登录。实际重点部分是 Strapi 的角色和权限插件，可以说这个插件让开发者不用再为项目考虑的用户登录注册与鉴权相关。
此外这里有个在线示例可供体验：Vitesse Nuxt 3 Strapi
这里省略创建 strapi 项目创建过程，具体可到 Quick Start Guide 中查看。创建完项目，并注册管理员账号后，打开管理面板，根据自己需求创建数据。下面会介绍下管理面板的一些操作（以下针对中文面板）
打开 设置 => 用户及权限插件 => 角色列表
![\"image-20220825131929320\"](\"https://img.kuizuo.cn/image-20220825131929320.png\")
默认有两个角色 Authenticated 与 Pubilc，都不可删除，其中还有一个 Admin 是我自己创建的角色，用于分配管理员的权限。
Authenticated 对应的也就是登录后的角色，即携带 Authorization 协议头携带 jwt 的用户。
另一个 Pubilc 则是未授权用户，默认权限如下
![\"image-20220825132235027\"](\"https://img.kuizuo.cn/image-20220825132235027.png\")
双击角色可以到权限分配页面，比方说我想给 Authenticated 角色分配 Restaurant 表中查询数据，就可以按照如下选项中勾选，并且勾选其中一个权限（增删改查）可以在右侧看到对应的请求 api 接口（路由）
![\"image-20220825132716257\"](\"https://img.kuizuo.cn/image-20220825132716257.png\")
可以在 设置 => 用户及权限插件 => 高级设置 中分配默认角色，此外这里还可以配置注册，重置密码等操作。对于这些功能而言，传统开发就需要编写相当多的代码了，而 Strapi 的 角色和权限 插件能省去开发这一部分功能的时间。
![\"image-20220825132948740\"](\"https://img.kuizuo.cn/image-20220825132948740.png\")
在 设置 => 管理员权限 也可以看到角色列表与用户列表，不过这个只针对登录 strapi 仪表盘的用户，与实际业务的用户毫不相干。通俗点说就是数据库系统的用户与后台管理系统用户的区别。
一开始登录面板创建的用户在 设置 => 管理员权限 => 用户列表 中可以看到，而通过api http://localhost:1337/api/auth/local/register 注册的用户则是在 内容管理 => User 中查看。
这里先给出官方提供的注册和登录地址，分别是：
http://localhost:1337/api/auth/local/register
http://localhost:1337/api/auth/local
分别可在 Login 与 Register 中查看官方演示例子，例如
import axios from 'axios';
// Request API.
axios.post('http://localhost:1337/api/auth/local', {
identifier: 'user@strapi.io',
password: 'strapiPassword',
})
.then((response) => {
// Handle success.
console.log('Well done!');
console.log('User profile', response.data.user);
console.log('User token', response.data.jwt);
})
.catch((error) => {
// Handle error.
console.log('An error occurred:', error.response);
});
import axios from 'axios';
// Request API.
axios.post('http://localhost:1337/api/auth/local/register', {
username: 'Strapi user',
email: 'user@strapi.io',
password: 'strapiPassword',
})
.then((response) => {
// Handle success.
console.log('Well done!');
console.log('User profile', response.data.user);
console.log('User token', response.data.jwt);
})
.catch((error) => {
// Handle error.
console.log('An error occurred:', error.response);
});
除了登录外，还有几个api可能还会用到如获取个人信息，重置密码，修改密码，发送邮箱验证等等。更多可到 Roles & Permissions 中查看
通过 HTTP 这种方案可以说是最通用的了，不过有些框架还提供相应的模块来调用 Strapi。
官方 Nuxt3 提供了 hooks 方案使用 Strapi。具体可看 Nuxt Strapi Module。Nuxt2 可看这里
通过相应的 hooks 就可以实现登录注册以及数据增删改查的功能，演示例子可看 Usage
这里有一份我创建的预设模板 kuizuo/vitesse-nuxt3-strapi，一开始的示例也是基于这个模板来搭建的。不过目前 Strapi 对 TypeScript 支持不是那么友好，尤其在 window 下会出现无法运行的情况，详看这个 pr。所以目前 backend 使用 js 创建，然后增加 ts 相关支持的，所以有些 ts 支持可能不是那么友好。
原本我考虑的是使用 starter 方式来创建nuxt3 strapi项目，但是就在我创建完 starter 与 template 准备使用 yarn create strapi-starter strapi-nuxt3 https://github.com/kuizuo/strapi-starter-nuxt3 下载模板时，不出意外又出意外的报错了，由于这个报错也不好排查就暂时放弃了。
总之又是一趟白折腾的经过。
Next 我暂未找到相关库可以像 Nuxt 提供 Strapi 的服务。不过 Strapi 官方有提供 sdk的方案来调用 strapi 服务，而不用发送 http 请求的形式来调用，具体可以到官方提供的 sdk 查看如何使用，这里不做演示。有如下两个SDK可供选择：
strapi/strapi-sdk-javascript 官网
Strapi SDK (strapi-sdk-js.netlify.app) 社区
", "url": "https://kuizuo.cn/strapi-user-register-and-login", "title": "Strapi 实现用户注册与登录", "summary": "Strapi 实现用户注册与登录", "date_modified": "2022-09-03T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "strapi", "nuxt", "next" ] }, { "id": "pnpm-monorepo-practice", "content_html": "老早老早之前就听过 monorepo（单一代码库） 这个名词，也大致了解其出现的意义与功能。但奈何自己的一些小项目中暂时还用不上多项目存储库，所以迟迟没有尝试使用。
但随着越来越多的开源项目使用 monorepo，现在不实践到时候也肯定是要实践的，这次实践也算是为以后的技能先做个铺垫了。
前言铺垫这么多，就举个例子介绍下 monorepo 的应用场景，比如现在有个 UI 组件库的开源项目。
既然是组件库，首先肯定要有组件库的代码吧，此外可能还有脚手架（CLI）或是工具库（utils）或者是插件要作为 npm 包发布，等等。
如果是传统的开发，每个项目都作为单独的 npm 项目来发布引用，就需要创建多个代码仓库，即多代码库（multirepos）。很显然这样在开发以及代码仓库的协同上肯定有弊端，而 monorepo 正是解决这种问题，将所有的项目在一个代码仓库中，即单一代码库（monorepos）。
这只是 monorepo 的一个应用场景例子，这里有一个更好的例子 前端工程化：如何使用 monorepo 进行多项目的高效管理，更多可以参考使用 monorepo 的开源项目来了解。在 这里 可查看使用了 pnpm 工作空间功能的最受欢迎的开源项目。
有篇文章推荐阅读 5 分钟搞懂 Monorepo - 简书 (jianshu.com)
这里还有份手册可供阅读 What is a Monorepo? | Turborepo
你可以 clone https://github.com/kuizuo/monorepo-demo 来查看本文示例代码仓库
这里使用 pnpm 的 workspace 来创建 monorepo 代码仓库，此外目前主流的还有 yarn workspace + lerna，nx，turborepo等等。
pnpm 内置了对单一存储库（也称为多包存储库、多项目存储库或单体存储库）的支持， 你可以创建一个 workspace 以将多个项目合并到一个仓库中。
pnpm 要使用 monorepo 的话，需要创建 pnpm-workspace.yaml 文件，其内容如下
packages:
- 'packages/*'
其中 packages 为多项目的存放路径（一般为公共代码），pnpm 将 packages 下的子目录都视为一个项目。此外如果项目还有文档或在线演示的项目（这些不作为核心库），放在 packages 有些许不妥，就可以像下面这样来配置 workspace
packages:
- packages/*
- docs
- play
像一开始所举例的代码仓库的项目结构如下
monorepo-demo
├── package.json
├── packages
│ ├── components # 组件库
│ │ ├── index.js
│ │ └── package.json
│ ├── cli # CLI
│ │ ├── index.js
│ │ └── package.json
│ ├── plugins # 插件
│ │ ├── index.js
│ │ └── package.json
│ ├── utils # 工具
│ │ ├── index.js
│ │ └── package.json
├── docs # 文档
│ │ ├── index.js
│ │ └── package.json
├── play # 在线演示
│ │ ├── index.js
│ │ └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
其中 packages 下存放的就是多个项目代码库，假设项目就叫 demo（因为到时候这些包是有可能要发布的，而名字就要保证唯一），那么项目的 package.json 如下演示：
{
\"name\": \"@demo/components\",
\"version\": \"1.0.0\",
\"description\": \"\",
\"main\": \"index.js\",
\"scripts\": {
\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"
},
\"keywords\": [],
\"author\": \"\",
\"type\": \"module\",
\"license\": \"ISC\",
\"dependencies\": {
\"@packages/utils\": \"workspace:^1.0.0\"
}
}
执行pnpm install 会自动安装所有依赖（包括 packages 下），所以我们肯定不会傻傻 cd 到每个目录下，然后执行pnpm install 来一个个安装依赖。
假设现在我要为某个项目添加依赖，例如为 utils 模块添加 lodash 的话，按之前可能会 cd 到 utils 目录执行pnpm add loadsh ，其实完全不用，pnpm 提供 --filter 选项来指定包安装依赖，命令如下
pnpm --filter <package_selector> <command>
例如：
pnpm -F @demo/utils add lodash
-F等价于--filter
假设现在写好了 utils 模块，@demo/components准备使用 utils 模块，可以按照如下操作
pnpm -F @demo/components add @demo/utils@*
这个命令表示在@demo/components安装@demo/utils，其中的@*表示默认同步最新版本，省去每次都要同步最新版本的问题。
使用node packages/component （默认执行 index.js 文件）
node packages/components
更好的选择是编写 npm scripts 就像下面这样：
\"scripts\": {
\"test\": \"vitest\",
\"dev\": \"pnpm -C play dev\",
\"docs:dev\": \"pnpm run -C docs dev\",
\"docs:build\": \"pnpm run -C docs build\",
\"docs:serve\": \"pnpm run -C docs serve\",
},
其中 -C \\<path> 表示 在 path 下运行 npm 脚本 而不是在当前工作路径下。例如根目录下执行 npm run docs:dev 便会执行 docs/package.json dev脚本，同理build和serve也是一样。
此外更多的可能会在根目录下创建 script 脚本，然后编写（编译，发布）脚本。
在上面只是介绍了使用 pnpm workspace 来搭建一个 monorepo 的仓库，但很多时候还需要搭配适当的工具来扩展 monorepo， Turborepo 就是其中之一，利用先进的构建技术和思想来加速开发，构建了无需配置复杂的工作。
这里就不做介绍，这篇 🚀Turborepo：发布当月就激增 3.8k Star，这款超神的新兴 Monorepo 方案，你不打算尝试下吗？ - 掘金 (juejin.cn) 就非常值得推荐阅读。
搭建一个 monorepo 的仓库其实挺简单的，但也并不是什么项目使用 monorepo 就好，想想看，所有项目和依赖都堆积在一起，那么项目启动速度必然不如单项目启动来的快。就比如一个博客项目，就完全不至于将博客细分为文章/评论/搜索等等划分，还不如统一将代码都直接写到 src 目录下。
可以说当使用 monorepo 作为项目管理时，每个模块就相当于按照一个 npm 包发布的方式创建，而不是像 src/utils 那么随便了，而开源项目大部分都是要作为 npm 包的方式发布的，使用 monorepo 来管理多个项目自然也就再合适不过了。
5 分钟搞懂 Monorepo - 简书 (jianshu.com)
前端工程化：如何使用 monorepo 进行多项目的高效管理
🚀Turborepo：发布当月就激增 3.8k Star，这款超神的新兴 Monorepo 方案，你不打算尝试下吗？ - 掘金 (juejin.cn)
", "url": "https://kuizuo.cn/pnpm-monorepo-practice", "title": "pnpm monorepo实践", "summary": "使用 pnpm monorepo 实践", "date_modified": "2022-08-29T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "pnpm", "monorepo" ] }, { "id": "patience-wearing-out", "content_html": "在以前，我可以花费 4，5 个小时的时间专注于一件事情上，并且丝毫没有不耐烦的意思。而且这种状态能持续个好几天。例如拼个积木，拼个拼图，写个代码等等。专注个半天根本不成问题。
当然有很大一部分是因为兴趣，要让我做一件乏味的事，别说坚持了，开始可能都成一个问题。但现在的我对很多东西都难以提起兴趣，要是放在以往，都能让我兴奋个数天。可现在，很难。
不知为何，感觉专注一件事变得特别困难，总沉不下心来。总感觉一切东西不咋那么美好，都很乏味，难以提起内心仅留的一丝兴趣，总感觉自我内心好像变了个特别无趣的人。这也间接导致我的耐心也不在像之前那样，现在的我遇到一些繁琐的事情，比如写报告，办手续，做核酸等等，我都会感到十分厌烦。
像之前如果有人问我代码相关的问题，即便是我没接触过的知识方面，我都愿意去尝试了解学习为他解答。可现在，问我不知道的东西，我张口就是不知道。就算我知道，我的回复也往往是丢给他一个相关链接，让他自己研究琢磨，仿佛在告诉他我极不耐烦的样子（当然也有可能是这类问题问的太多了）。之前打车哪怕师傅晚个 10 分钟来接送我都能接受，现在 3 分钟我就已经有点坐立不安了。
对于这种耐心的转变，我自己都认为有点不太思议。我不知道是不是由于之前太过于耐心，然后种种环境下不断磨练中，导致耐心值不断的下降，最终导致在很多事情都感觉不耐烦，难以平静。
自我分析了耐心值下降的可能原因：
说到兴趣，这可就不得不提起 5 年级开始就接触手部极限运动中的转笔，那也算是我第一个对其感兴趣的东西。期间不断在尝试其他的手指极限运动并持续坚持了整整 8 年，直到高考结束便退坑了。至于为何不再坚持下去，有很大原因是因为 QQ 被永久冻结导致一些社交圈失联，再加上当时假期一直在学习编程。可以说没有这些意外，我依旧会坚持我这持续这份爱好，并且会将其爱好当做一个我的吃饭的本事。
目前仅余的手指极限运动也就只有转手机了。同样的对于游戏也不再有新鲜感去尝试，偶尔还会下载英雄联盟玩上熟悉的英雄回忆当年的高(下)光(饭)时刻（当然游戏方面也和 QQ 冻结连同游戏账号一并冻结有关）。
在回到目前主业的编程在我接触了进 3 年内，期间踩的无数的坑，做着重复的业务需求，尤其是所感兴趣，但到头来却又不可完成。渐渐地不再有当初以往的热情，不再乐此不疲。即便完成了一个自我认为成就感爆满的事情，也容易在接下来几天的时间内消磨下去。
当所感兴趣的东西太多，对于新事物就不再容易提起兴趣。
人的耐心都是被一些自己感兴趣，但是又不可能完成的事，一点一点消磨殆尽的。
现在技术发展是真的快，有很多新的突破和发现。生活质量也在不断变好，但这也间接导致生活节奏过快，社会更加内卷。变化太快。现在的生活总让我感觉一天好像什么事情都没干，一从座位起来就已经是第二天的凌晨。前一秒还在想着吃什么晚饭，后一秒就到了吃夜宵的时刻。看视频也不再是原速播放，而是更快的 1.5 倍，甚至 2 倍速。原本可能要 2 个小时完成的东西，硬是被压缩到 1 个小时内完成。
在这样的快节奏生活工作下，耐心值怎能不下降？又怎能静的下心来去完成任务？
在写代码任务的时候，有时候一个准备实现的功能好像之前实现过，然后去翻看之前的代码，然后就发现写的还不够好，虽然能用，但总归少些什么，于是就开始重构，然后慢慢的就偏离原本的工作流，导致大部分的时间都在重构该功能，而不是在原本的任务。不过这样也确实完善了该部分的代码，至少不是一次无意义的重构。
有时候看到一些推荐类的文章或者视频，可能看到中间有一个之前没遇到过的新鲜玩意，然后就开始打开官网，然后去看相关示例。刷着刷着浏览器网页打开多了，哪里还会在意每个标签页的标题，早都给慢慢的标签挤的只剩 logo 了，这时候我大概率是直接整个浏览器关闭，在打开新窗口，而一开始的所推荐的内容，可能早已忘得一干二净了。
但这样也确实加深了我中途对这玩意的印象和认知，但却让我也忘了一开始的本意。不过一生中要接触许许多多的新的美食，普通人哪里有精力和时间去一遍遍的尝试，要做的只是将自己能够吃到吃进嘴里，体会其中的美味这就足够了。对于任何新鲜事物的尝试也应如此。（有点扯远了）
所以久而久之，往往越想专注的时候，越容易被细微的东西吸引注意力。专注不下去了，耐心也随之消磨下去。
可能是因为经历太多耐心的过程，耐心在无形之间被不断磨灭，最终在不断消磨下导致原本不厌其烦🙂的样子变的极其厌烦😣。
在这过程中，耐心也实实在在的告诉我正在成长，也在警示我不该松懈。即便内心再怎么烦躁，所表现的也应心照不宣。
消磨耐心的过程不妨是在打磨工具，将一个钝器打磨成一个利器。绝大多数人一开始的耐心与容忍程度都是非常高的，但随之不断的经历。而多数人的耐心自然也在不断地下降，往往成长的也就越多。
慢慢磨练一个人的耐心，才更能考验一个人的心智。
", "url": "https://kuizuo.cn/patience-wearing-out", "title": "正被消磨殆尽的耐心", "summary": "在以前，我可以花费 4，5 个小时的时间专注于一件事情上，并且丝毫没有不耐烦的意思。而且这种状态能持续个好几天。例如拼个积木，拼个拼图，写个代码等等。专注个半天根本不成问题。", "date_modified": "2022-08-15T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "随笔", "杂谈", "感悟" ] }, { "id": "vite-webworker", "content_html": "准备给我的一个 Vite 项目进行重构，其中一个功能(函数)要花费 JS 主线程大量时间，会导致主线程画面卡死，无法正常点击，直到该功能(函数)执行完毕而言。这样的用户体验非常差，于是就准备使用 WebWorker 对该功能封装。
（1）同源限制
分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
（2）DOM 限制
Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。
（3）通信联系
Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。
（4）脚本限制
Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
（5）文件限制
Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。
综合以上限制，我所要重构的功能面临以下问题
worker.postMessage与self.addEventListener来发送与监听数据。所以在考虑使用 Worker 的时候就要考虑这个功能是否值得使用 Worker，能否使用 Worker 实现
这里先给出我的最优解，在 Vite 中静态资源处理 ，其中可以导入脚本作为 Worker
import Worker from './test.worker.js?worker'
const worker = new Worker()
这个 worker 就是所要的 Worker 对象，接着就可以对象的 postMessage 与 onmessage 来数据通信，如
worker.onmessage = (e) => {
console.log('main.js', e.data)
}
worker.postMessage('hello from main')
self.addEventListener(
'message',
function (e) {
console.log('test.worker.js', e.data)
self.postMessage('hello from worker')
},
false,
)
不过 Vite 还有其他方式导入 Worker
const worker = new Worker(new URL('./worker.js', import.meta.url))
这种方式相对更加标准，但是如果worker并不是一个js文件，而是ts文件，并且还夹杂一些第三方的包，这种方式是有可能会失败，本人测试是这样的，所以推荐一开始的方式，也就是带有查询后缀的导入。
在打包的时候将其实所用到引入的依赖合并成一个文件，如果打开开发者工具，可以在源代码面板的右侧线程中看到主线程，以及worker线程。
使用 Web Workers - Web API 接口参考 | MDN (mozilla.org)
Web Worker 使用教程 - 阮一峰的网络日志 (ruanyifeng.com)
", "url": "https://kuizuo.cn/vite-webworker", "title": "Vite使用WebWorker", "summary": "准备给我的一个 Vite 项目进行重构，其中一个功能(函数)要花费 JS 主线程大量时间，会导致主线程画面卡死，无法正常点击，直到该功能(函数)执行完毕而言。这样的用户体验非常差，于是就准备使用 WebWorker 对该功能封装。", "date_modified": "2022-07-26T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "vite", "webworker" ] }, { "id": "use-nuxt3-build-api-server", "content_html": "挺早之前就想写个 api 接口服务，封装下自己收集的一些 api 接口，以便调用，正好最近在接触 SSR 框架，所以就使用 Nuxt3 来编写该项目。
在线地址: KZ API
开源地址: kuizuo/api-service
![\"KZ](\"https://img.kuizuo.cn/KZ%20API.png\")
如果你已经了解过 Nuxt3 与运行过程，那么可以直接跳转至 实战
npx nuxi init nuxt3-app
可能会安装不上 会提示 could not fetch remote https://github.com/nuxt/starter，大概率就是本地电脑无法访问 github，这时候科学上网都不一定好使，这里建议尝试更换下网络或设置 host 文件。
安装完毕后，根据提示安装依赖与启动项目
![\"image-20220714005704602\"](\"https://img.kuizuo.cn/image-20220714005704602.png\")
初始的 nuxt3 项目及其简单，甚至没有 page、components、assets 等目录。
![\"image-20220714003726413\"](\"https://img.kuizuo.cn/image-20220714003726413.png\")
关于 nuxt3 本文不做过多介绍，本文只对部分进行介绍。nuxt 已经发布快 1 年了，相信外面很多相关介绍文章。
nuxt.js 与 next.js 极其相像，但 nuxt 却精简许多，这归功于 nuxt 的自动导入，这可以让你无需导入像 vue 中的 ref 等等函数，导入组件等操作，不过前提是代码文件位置要符合 nuxt 规范。如果你尝试使用过 vite 的一些自动导入插件，其效果是一样的，只不过 nuxt 都已经配置好，开箱即用。
pages 为 nuxt 中页面所存放的位置，会将 pages 目录下的文件(.vue, .js, .jsx, .ts or .tsx) 与路由映射，像pages/index.vue 映射为 /，然后在 app.vue 中通过<NuxtPage/> 来展示 pages。
要注意，pages 下的文件一定要有根节点，不然在路由切换的时候可能会出现问题（事实上建议所以的 vue 组件都有根节点，虽说 vue3 允许多个根节点，但或多或少存在一定问题）
至于动态路由与嵌套路由，文档说明的比较详细了，这里就不费口舌了
Nuxt3 中的的 api 接口服务引擎使用的是⚗️ Nitro 的 JavaScript 服务，使用的是h3的 http 框架（相当于 hook 版的 http 框架），不过文档不是特别详细，很多东西都要琢磨。（这个框架是真的相对冷门，之前都未曾听闻过）
关于 Nuxt3 的服务具体可以看 Nuxt 3 - Server Routes，这里演示部分代码
创建一个服务，创建文件server/api/hello.ts
export default defineEventHandler((event) => {
return 'hello nuxt'
})
请求 http://localhost/api/hello 便可得到hello nuxt，在 event 可以得到 req 与 res 对象。不过在 req 身上是获取不到 query 和 body 的，这里需要使用 h3 提供的 hooks，如useMethod(),useQuery(),useBody()来获取，例如。
export default eventHandler(async (event) => {
const body = await useBody(event)
return `User updated!`
})
这与传统的 node 的 http 框架不同点就是 query,body 这些参数不是从函数的上下文(context)取，而是通过 hook 来获取，所以这就是我为什么我说这相当于 hook 版的框架。关于这些 api，可以点我查看
定义完了接口，那必然是要获取数据的，nuxt.js 有四种方式来获取数据，不过主要就二种useFetch与useAsyncData，另外两种是其懒加载形式。
像上面定义了 helloworld 接口就可以像下面这样使用
<script setup>
const { data } = await useFetch('/api/hello')
console.log(data) // hello nuxt
</script>
<template>
{{ data }}
</template>
useAsyncData
<script setup>
const { data } = await useAsyncData('hello', () => $fetch('/api/hello'))
console.log(data) // hello nuxt
</script>
<template>
{{ data }}
</template>
至于 useAsyncData 与 useFetch 有什么区别的话，如果请求的是 url 资源，那么建议使用 useFetch，如果请求的是其他来源的资源，就使用 useAsyncData。可以说在请求 url 资源时，两者是等价的，如下
useFetch(url) <==> useAsyncData(url, () => $fetch(url))
那么如何 SSR(服务端渲染)呢？ nuxt3 默认是全 SSR 的渲染模式，也就是说在上面的数据请求后就是 SSR 渲染，客户端接受到的也就是带有数据页面。
如果要使用传统的客户端渲染只需要填加一个 options 的 server 参数为 false 即可，如
const { data } = await useFetch('/api/hello', { server: false })
自己尝试下将 server 切换，然后打开控制台->网络中查看 Fetch/XHR 中是否有和数据相关的请求便可知道是在服务端发送的请求数据，还是客户端发送的数据。
这个项目所使用的模板是 Vitesse for Nuxt 3
![\"vitesse-nuxt3\"](\"https://img.kuizuo.cn/vitesse-nuxt3.png\")
该模板中集成了一些 vue 生态的相关模块(vueuse, pinia, unocss)，开发者可以不必自行封装这些模块。
页面设计的话其实没啥好说的，主要使用到了原子类的一个框架unocss。
这里我会以通过每日一言的 api 例子来给你演示其功能实现，请求该 api 可以得到
{
\"id\": 5233,
\"uuid\": \"9504a2a2-bab7-4c7d-b643-a6642ed5c55e\",
\"hitokoto\": \"人间没有单纯的快乐，快乐总夹带着烦恼和忧虑。\",
\"type\": \"d\",
\"from\": \"杨绛\",
\"from_who\": \"我们仨\",
\"creator\": \"a632079\",
\"creator_uid\": 1044,
\"reviewer\": 4756,
\"commit_from\": \"web\",
\"created_at\": \"1583786494\",
\"length\": 22
}
这里创建server/api/one.ts文件
export default defineEventHandler(async (event) => {
const { type = 'text' } = useQuery(event)
const data = await (await fetch('https://v1.hitokoto.cn/')).json()
if (type = 'json') {
return data
}
else {
event.res.setHeader('Content-Type', 'text/html;charset=utf-8')
return data.hitokoto
}
}
这样，这个接口就已经定义完毕了，此时访问 /api/one 所得到的就是一句短语。默认状态下返回文本，如需要 json 数据等额外信息，则可添加type=json。例请求/api/one?type=json，得到的完整数据如下
{
\"id\": 7173,
\"uuid\": \"49eff9ca-7145-4c5f-8e62-d3dca63537fa\",
\"hitokoto\": \"即使人生是一场悲剧，也应该笑着把人生演完。\",
\"type\": \"k\",
\"from\": \"查拉图斯特如是说\",
\"from_who\": \"尼采\",
\"creator\": \"Kyanite\",
\"creator_uid\": 8042,
\"reviewer\": 1,
\"commit_from\": \"web\",
\"created_at\": \"1614946509\",
\"length\": 21
}
而这整个过程也就是其实也就是接口转发，将访问 /api/one 的请求转发给目标 url https://v1.hitokoto.cn/ 的过程，然后对其数据进行抽取和封装，最终展示给调用方。
然而这只是完成了接口的转发，那么接口的文档又该如何实现呢？
要存储接口文档的数据，就需要使用 CMS(内容管理系统)或者 Database(数据库)，一开始我原本打算使用strapi来作为 CMS，毕竟没尝试过strapi，而且 SSR 框架也会搭配strapi来使用，不需再自建后端。但就在我刷官方模块的时候，无意间发现个官方模块 content。简单了解了一下，发现这个模块有点意思，并且能很简单的满足我当下的需求，于是就选择使用它。也可以使用官方提供的codesandbox来尝试
不过content能实现的功能比较有限，没有strapi那么丰富，有多有限呢，基本的 CURD 只能实现查，无法增删改（至少官方文档是没有提供相应的函数）。不过content也不用像strapi那样自建一个服务，可以说是贼简洁了。
这里省略模块的导入的步骤，在根目录下创建 content 目录，目录下的文件可以是markdonw，json，yaml，csv。和 pages 一样，这里的文件都会映射对应的路由，不过这里需要映射的路由前缀是/api/_content/query/。举个例子
{
\"title\": \"Hello Content v2!\",
\"description\": \"The writing experience for Nuxt 3\",
\"category\": \"announcement\"
}
{
_path: '/hello',
_draft: false,
_partial: false,
title: 'Hello Content v2!',
description: 'The writing experience for Nuxt 3',
category: 'announcement',
_id: 'content:hello.json',
_type: 'json',
_source: 'content',
_file: 'hello.json',
_extension: 'json'
}
访问/api/_content/query/hello所得到的就是 output 的内容。
这里只演示 json 数据，是因为该项目主要用到 json 数据来渲染，如果是 markdown 的话，还有一些自带的组件 ContentDoc 来展示 markdown 数据。所提供的功能可以说非常适合用于文档类，或者博客类的站点。
回到该实战本身，来说明实际数据及其如何请求，上面的例子所对应的 api 文档数据如下
{
\"id\": \"one\",
\"name\": \"一言\",
\"desc\": \"一言指的就是一句话，可以是动漫中的台词，也可以是网络上的各种小段子\",
\"path\": \"/api/one\",
\"method\": \"GET\",
\"params\": [
{
\"name\": \"type\",
\"value\": \"json\",
\"type\": \"string\",
\"desc\": \"数据格式(text,json,img)\",
\"required\": false
}
],
\"dataType\": \"text\",
\"example\": \"/api/one\"
}
然后这些数据通过 content 提供的queryContent()来获取，这里来看其渲染页面pages/apidoc/[id].vue的部分代码
<script setup lang=\"ts\">
const { data } = await useAsyncData(id, () => queryContent(id).findOne())
const { name, desc, params, path, method, returnType, example } = data.value
// ...
</script>
获取到数据，然后渲染到 vue 上，这些就不过多叙述了。
假设现在上线了这些接口，但是不做任何限制，那么调用方就可以无限次调用获取接口，这对服务器压力来说是十分巨大的，所以就需要对接口进行限流。
一般要做限流操作都需要涉及到中间件，在 Nuxt 中有路由中间件，和服务中间件 ，这里由于是要处理后端接口的，所以就需要使用服务中间。
创建server/middleware/limit.ts 文件
export default defineEventHandler(async (event) => {
console.log(`limit`)
})
这时候，只要是 Fetch 请求都将打印limit，既然请求能拦截到，那限流就简单了（其实并不简单，因为这个 h3 的文档与相关库实在是少的可怜）。
不过由于没有使用到用户鉴权等功能（在这个项目中也没打算上），所以限流的操作只有从 IP 的手段下手。这里我选用的是node-rate-limiter-flexible这个库，下面是实现代码
import { RLWrapperBlackAndWhite, RateLimiterMemory } from 'rate-limiter-flexible'
const rateLimiter = new RLWrapperBlackAndWhite({
limiter: new RateLimiterMemory({
points: 1,
duration: 1,
}),
})
function getIP(req) {
return (
(req.headers['x-forwarded-for'] as string) || (req.socket?.remoteAddress as string)
).replace('::ffff:', '')
}
export default defineEventHandler(async (event) => {
const { req, res } = event
if (/^\\/api\\/[A-Za-z0-9].*/.test(req.url || '')) {
const ip = getIP(req)
try {
await rateLimiter.consume(ip)
} catch (error) {
res.statusCode = 429
return { statusCode: 429, statusMessage: '请求太快了,请稍后再试' }
}
}
})
自行阅读代码即可，设置的限制是 1 秒内只能请求 1 条接口。
除了接口限流外，对于实时性不高的接口可以开启缓存，这样可以防止过度调用导致接口匮乏。并且对于重复调用的接口响应速度更快，性能更佳。
可 nuxt 的中间件好像只能拦截用户端发送的请求数据，而服务端发送的给用户端的数据貌似无法拦截，也就无法在中间件中获取到数据或者处理数据了？
是的，nuxt 的服务层并不像nest有 Middleware(中间件),Guards(守卫),Interceptors(拦截器)，而这里所要拦截的部分也就是 nest 中的 Interceptors。
![\"img\"](\"https://docs.nestjs.com/assets/Interceptors_1.png\")
不过 nuxt 只提供了中间件，这够实现接口缓存的功能了，不过需要一些“技巧”，关于这个技巧我写过的一篇文章 JS 函数 hook 比较详细的介绍该技巧，这里简单说下。
假设有个 add 函数，我并不想破坏 add 的参数与内部代码结果，但是我又像在调用 add 函数时，查看传入的参数，以及计算的结果，那该如何做？来看下面代码
function add(a, b) {
return a + b
}
let original_add = add
add = function () {
console.log('arguments', arguments)
let result = original_add.apply(this, arguments)
console.log('result', result)
return result
}
首先重新定义了与 add 相同作用的函数，名为 original_add，然后将 add 修改，同时修改像成上面的代码。这时尝试调用 add 就可以发现输出了传入的参数及计算后的结果。
知道了这个修改 add 函数的技巧，要拦截 nuxt 的服务端数据也就不难了。只需要将这里的 add 函数替换成 http 框架的返回函数即可，也就是res.end()。大致逻辑如下
export default defineEventHandler(async (event) => {
const { req, res } = event
const original_res_end = res.end
res.end = function (...args: any) {
// 这里的args的第一个参数就是 res.end 调用的参数，即返回给客户端的数据
console.log(args)
// 最后可别忘了调用原始的 res.end，不然客户端一直处于等待状态
return original_res_end.apply(this, args)
}
})
这里所使用到的缓存库是lru-cache，其实现代码如下
import type { ServerResponse } from 'h3'
import { defaultContentType } from 'h3'
import LRU from 'lru-cache'
const options = {
max: 500,
ttl: 1000 * 60 * 1, // 缓存1min
allowStale: false,
updateAgeOnGet: false,
updateAgeOnHas: false,
}
const cache = new LRU(options)
export default defineEventHandler(async (event) => {
defaultContentType(event, 'text/plain; charset=utf-8')
const { req, res } = event
if (/^\\/api\\/[A-Za-z0-9].*/.test(req.url || '')) {
const key = req.url
const cached = cache.get(key)
if (cached) return res.end(cached)
const original_res_end = res.end
res.end = function (...args: any): ServerResponse {
const data = args?.[0]
if (data) {
cache.set(key, data)
}
return original_res_end.apply(this, args)
}
}
})
现在缓存是实现了，但所有的接口都被强行缓存 1 分钟，像有些接口（如随机图片）要是也这样设定，那就失去了这个接口的实时性了（我明明要随机，你却偏偏返回都是同一张图片）。所以就要对不同的接口进行不同的接口缓存处理，这里就可以使用到上下文 context。
定义接口代码
export default defineEventHandler(async (event) => {
event.context.cache = { ttl: 1000 * 5 } // 缓存5s
// ... 其他代码 ...
})
定义缓存代码
// ... 其他代码 ...
if (data) {
if (context.cache) {
const options = context.cache
cache.set(key, data, options)
} else {
cache.set(key, data)
}
}
这样就可以为不同的接口，设置不同的缓存配置。（不过这样还是不够优雅，其实可以上装饰器的，但是想了想这也非 AOP 设计，于是就没尝试了）
这个功能主要用途是有些接口可能失效了，就需要捕获这些异常接口信息然后停止或者修改该接口。如果要在每个接口上都定义 try catch，接口数量一多将难以维护，所以需要一个服务端全局异常捕获。
不过目前 Nuxt3 还不支持捕获服务端的异常，这里是官网说明。所以该功能暂时未实现，后续也有可能通过 Test 来测试接口可靠性，而不是全局捕获异常接口。
不过 Nuxt3 对客户端的错误处理做得比较好，有个演示示例。
由于 content 模块，以及 Nuxt3 后端服务的一些限制，导致一些功能就暂未实现，后续再考虑引入其他方案来实现
就此整个项目的核心功能就已经实现完毕了，接下来要做的就是收集 api 接口，写 api 文档了。然而这部分也是最头疼的部分，因为在互联网上很难有免费的资源。
像大部分的 api 接口，如果数据来源不是自己的，名义上“免费”的，那大概率就是有限制，例如一天只能 100 条，1 分钟只能请求几次等等，而且这类接口多半是需要填写一个 app_ey 的参数。而需要登录才能获取，当然，你可以选择加钱来增加限额，那么就不再是免费的了。总之就是各种不方便
如果真想实现免费无限制，那么数据来源只能在自己身上，至于数据来源如何转化成自己的，懂得都懂好吧。
所以在本项目仅可能的收集一手文档的资源接口或是自行封装的功能接口，但也会存在一些调用别人封装过的接口，服务端的接口信息可自行在server/api中查看，由于一些接口的安全性而言，线上的部分接口代码并未公布，这很正常，因为我并不想泄露一些关键数据。
如果接口调用有涉及侵权相关的还请直接联系作者删除。
本地打包
npm run build
等待打包完毕，将打包后生成的.output 文件夹放到服务器上（依赖都无需安装，.output 文件里有 node_modules），执行
node .output/server/index.mjs
即可运行项目，或者也可以使用 pm2，总之和常见的 node 部署没什么差异。
此外也可部署到云提供商，像 AWS，Netlify，Vercel 等，所支持的服务商
cherrio中的parse5包无法打包至生成环境，提示如下
WARN Could not resolve import \"parse5/lib/parser/index.js\" in ~\\.pnpm\\hast-util-raw@7.2.1\\node_modules\\hast-util-raw\\lib\\index.js using exports defined in ~\\parse5\\package.json.
我猜测是因为hast-util-raw包和cheerio的parse5冲突，而nuxt服务端的nitro在用rollup打包时没有将两者冲突部分合并，而是选择前者，这就导致生产环境下cheerio无法使用。我尝试搜索没有得到一个很好结果，而我的解决方案是降级cherrio版本至0.22.0，因为这个版本中没有引入parse5。
在我最终准备上线的时候，发现nuxt又有新版本了，于是我将项目从rc.4升级到rc.6，然后再次测试的时候，发现在动态路由页面切换的时候，无法正常的向后端发送请求，甚至都监听不到路由变化，相当于页面被缓存了。
其实这也侧面说明了，目前 Nuxt3 的兼容性是比较差的。
实际上还有一些，不过解决相对比较迅速，就没写上。
体验了一周的 Nuxt3，整个的开发过程不敢说特别顺利，因为存在一定的兼容和Bug。目前 Nuxt3 的目前还处于 rc 版，实际项目还得考虑上线。不过个人还是非常推荐 Nuxt 这个框架，在代码编写与开发体验上实在是太香了，不出意外后续的 web 项目都会采用 Nuxt3 来构建，期待正式版的发布。
", "url": "https://kuizuo.cn/use-nuxt3-build-api-server", "title": "KZ-API接口服务", "summary": "基于 Nuxt3 的 API 接口服务网站，易于封装，调用，部署。", "date_modified": "2022-07-20T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "nuxt", "vite", "vue", "ssr" ] }, { "id": "next.js-build-and-deploy", "content_html": "官方文档 Getting Started | Next.js (nextjs.org)
npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts
运行
npm run dev
访问 http://localhost:3000
![\"image-20220712030637300\"](\"https://img.kuizuo.cn/image-20220712030637300.png\")
| 文件 | 内容 |
|---|---|
| pages | 页面文件 |
| pages/api | api 数据接口 |
| public | 静态资源文件 |
| styles | 样式文件 |
| next-env.d.ts | 确保 typescript 支持 |
| next.config.ts | next 配置文件 |
nextjs 有一个基于页面概念的文件系统路由器，存放在 pages 下.js, .jsx, .ts, .tsx 文件都将作为组件，即文件路径 → 页面路由，例如这里的 index.tsx 映射为 index，pages/about.js 将映射为 /about。
同时还支持动态路由，创建pages/user/[id].tsx文件，然后访问user/1，user/2
import { useRouter } from 'next/router'
const User = () => {
const router = useRouter()
const { id } = router.query
return <div>User id:{id} </div>
}
export default User
此时访问 http://localhost:3000/user/1 便可得到 User ID: 1
在 router 对象下没有 param 属性，都是存放在 query 参数中，例如访问 user/1?username=kuizuo，此时的 query 值为 {username: 'kuizuo', id: '2'}
不过这里有个比较有意思的点，如果你在上方代码中使用 console.log 打印 query 的话，在 vscode 中会打印出空对象{}，而在浏览器中会打印一次空对象，一次真实的 query 对象（并且打印两遍）
![\"image-20220712191356587\"](\"https://img.kuizuo.cn/image-20220712191356587.png\")
如果你打开控制台，查看所返回的页面，你会发现响应中只有 User id:，这不就和 react 的 CSR(客户端)渲染没有区别吗，是的，确实是这样。因为上一部分的代码，并且从输出 query 也可以看的出来而不是 SSR(服务端)渲染。首先我要展示一下两者渲染的代码
import { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
const User = () => {
const router = useRouter()
const { id } = router.query
const [data, setData] = useState({
username: '',
email: '',
})
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then((res) => res.json())
.then((data) => {
setData(data)
})
.catch((err) => {})
}, [id])
return (
<div>
<p>username:{data.username} </p>
<p>email:{data.email} </p>
</div>
)
}
export default User
经常写 react 的肯定对上面的代码不陌生，前端向后端发送数据请求，接受到数据后赋值给 data，然后渲染出来。因为请求数据是需要耗时的，所以在页面显示完之后，会停顿一会在显示出数据（主要是我这边没写 loadding），并且由于 id 并不是第一时间获取到的（从上面的 id）。
![\"image-20220712193009186\"](\"https://img.kuizuo.cn/image-20220712193009186.png\")
从这里来看，客户端渲染不仅要获取页面组件，还要请求数据，最终再通过 js 渲染出来
next 中服务端渲染需要用到 getServerSideProps 函数，而后端的数据获取都是在该函数内来获取，并通过 prop 传入给前端组件中，来看实际代码
const User = ({ data }: { data: any }) => {
return (
<div>
<p>username:{data.username} </p>
<p>email:{data.email} </p>
</div>
)
}
export default User
export async function getServerSideProps(context: { query: { id: any } }) {
const { id } = context.query // 这里context.param也能获取到id
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
const data = await res.json()
return {
props: {
data,
},
}
}
如果从页面显示来看，确实没什么区别，但如果打开控制台就能发现诸多不同。
首先就是请求的页面，是直接包含数据，相当于返回你一个页面，而在客户端渲染则是返回一个组件，需要自己去请求数据来展示。
![\"image-20220712192713634\"](\"https://img.kuizuo.cn/image-20220712192713634.png\")
同时查看控制台中的 Fetch/XHR 的是看不到请求的数据，因为这些数据并不是由前端发送的,而是由后端发送的（故不受跨域请求的限制）。
从这就能看出客户端渲染与服务端渲染的的区别了。
不过还没完，还有一个静态生成，先来看看代码。
const User = ({ data }: { data: any }) => {
return (
<div>
<p>username:{data.username} </p>
<p>email:{data.email} </p>
</div>
)
}
export default User
export async function getStaticProps(context: { params: { id: any } }) {
const { id } = context.params
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
const data = await res.json()
return {
props: {
data,
},
}
}
export async function getStaticPaths() {
return {
paths: new Array(20).fill(0).map((a, i) => ({ params: { id: String(i + 1) } })),
fallback: 'blocking',
}
}
主要是 getServerSideProps 替换成 getStaticProps，同时增加了一个 getStaticPaths 用于生成静态页面的，而上面的 getStaticPaths 表示生成 id 1 到 20 的页面，那假设如果我访问 id 为 21 的 user 呢？由于这里设置fallback: 'blocking'，所以还是会走服务端渲染的那一部分。但如果设置fallback: fasle，访问 user/21 就会提示 404。
通俗点来说就就是生成一系列静态页面，不需要服务端处理，所以返回的速度更快，其缺点其实也比较明显，数据的任何更改都需要在服务端重新构建，而服务端渲染则是可以动态处理数据，不需要完全重建。
不做过多介绍，详看文档 Data Fetching: Incremental Static Regeneration | Next.js (nextjs.org)
上面的数据都是调用 JSONPlaceholder 所提供的虚拟数据，在 next 中要提供数据接口的话，只需要在 pages/api 下编写即可，生成的路由规则和组件一样。例如 pages/api/hello.ts 映射为 api/hello，浏览器访问http://localhost:3000/api/hello 就可以得到{\"name\": \"John Doe\"}
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
name: string
}
export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
res.status(200).json({ name: 'John Doe' })
}
这里的 req、res 就是同大部分 node 后端框架一样，而这里的写法与 serverless 一致（这里应该就是 serverless）。
上述是 get 请求，那 post 请求呢？无论什么 http 请求方法都将在 handler 处理，通过 req.method 来获取请求方法，要区分的话可以通过如下代码。
export default function handler(req, res) {
if (req.method === 'POST') {
// Process a POST request
} else {
// Handle any other HTTP method
}
}
既然知道了上述的一些作用，不妨来个熟悉的 CRUD。这里以文章 post 为例
这里数据端使用的时 sqlite，配置不做展示，只展示主要核心功能
import type { NextApiRequest, NextApiResponse } from 'next'
import db from '../../../lib/db'
export default function handler(req: NextApiRequest, res: NextApiResponse) {
try {
switch (req.method) {
case 'GET':
db.all(`select * from post`, (err, rows) => {
res.status(200).json(rows)
})
break
case 'POST':
const { title, content } = req.body
db.get(`insert into post(title, content) values(?, ?)`, [title, content], (err, rows) => {
res.status(200).json(rows)
})
break
}
} catch (error) {
res.status(500).end()
}
}
import type { NextApiRequest, NextApiResponse } from 'next'
import db from '../../../lib/db'
export default function handler(req: NextApiRequest, res: NextApiResponse) {
const { id } = req.query
const { title, content } = req.body
try {
switch (req.method) {
case 'GET':
db.get(`select * from post where id=$id`, { $id: id }, (err, rows) => {
res.status(200).json(rows)
})
break
case 'Put':
db.get(`update post set title=?,content=? where id=?`, [title, content, id], (err, rows) => {
res.status(200).json(rows)
})
case 'DELETE':
db.get(`delete from post where id=$id`, { $id: id }, (err, rows) => {
res.status(200).json(rows)
})
}
} catch (error) {
res.status(500).end()
}
}
这里为了符合 RESTFUL 风格，所以 post 下编写了两个文件，这时候请求http://localhost:3000/api/post 就能获取到所有文章数据，基本的 CRUD 也就实现了。
这里写 sql 是真滴繁琐，没使用 str 或是 typeorm 主要是不想把这个 demo 搞得太复杂，实际项目还是用上比较好。
当然这里只是作为后端 api 接口的演示，至于前端的展示与编写就和普通前端开发没啥大的区别。基本后端框架能做的，next 能做后端很多事情，更多的使用还是作为接口转发，中间件等，毕竟 Next 主要的强项还是服务端渲染的能力。
既然说到部署，那肯定离不开 nextjs 的母公司Vercel了，关于 Vercel 之前也写过相关文章，关于 Vercel 就不过多介绍。
nextjs 部署到 vercel 实在简单，将项目推送到 github 仓库中，然后在 vercel 中 New Project，接着选择 nextjs 的仓库，点击 Deploy，静等部署即可。关于部署可以看这篇文章 Vercel 部署个人博客
现在你可以通过访问 kz-next-app-demo.vercel.app 来访问该项目，并尝试访问/api/post，user/1来看看。
只能说不愧是母公司。
至于其他部署？既然都用 nextjs 了，还考虑自建服务器来部署吗？
这次的整体过程比较简单，后续应该会使用 nextjs 编写一个完整的项目（也有可能是 nuxt.js)。
自从使用过 VSCode 后就再也离不开 VSCode，其轻量的代码编辑器与诸多插件让多数开发者爱不释手。同样我也不例外，一年前的我甚至还特意买本《Visual Studio Code 权威指南》的书籍，来更进一步了解与使用。
在购买这本书时就想写一个 vscode 插件（扩展），奈何当时事务繁忙加之不知做何功能，就迟迟未能动手。如今有时间了，就顺带体验下 vscode 扩展开发，并记录整个开发过程。
扩展地址：VSCode-extension
开源地址：kuizuo/vscode-extension (github.com)
![\"vscode-extension\"](\"https://img.kuizuo.cn/image-20220711195038039.png\")
关于 Vscode 及其插件就不过多介绍，相信这篇文章 VSCode 插件开发全攻略（一）概览 - 我是小茗同学 - 博客园能告诉你 Vscode 插件的作用。
在开发前，建议关闭所有功能性扩展，以防止部分日志输出与调试效率。
vscode 提供插件开发的脚手架 vscode-generator-code 来生成项目结构，选择要生成的类型
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
New Language Pack (Localization)
New Web Extension (TypeScript)
New Notebook Renderer (TypeScript)
根据指示一步步选择，这里省略勾选过程，最终生成的项目结果如下
![](\"https://img.kuizuo.cn/image_StiMqQrFCi.png\")
既然创建好了工程，那必然是要运行的。由于我这里选择的 ts ＋ webpack 进行开发（视情况勾选webpack），所以是需要打包，同时脚手架已经生成好了对应.vscode 的设置。只需要按下 F5 即可开始调试，这时会打开一个新的 vscode 窗口，Ctrl+Shift+P打开命令行，输入Hello World，右下角弹出提示框Hello World from kuizuo-plugin!
注意: 由于是 webpack 开发，在调用堆栈中可以看到有两个进程，一个是 webpack，另一个是新开的插件窗口的，同时在该调试窗口也能查看调试输出信息。
![](\"https://img.kuizuo.cn/image_Yv4X32qLE5.png\")
切记一定要等到第二个调试进程加载完毕（时间根据电脑性能而定），再打开命令行输入 Hello World 才会有命令，否则会提示 没有匹配命令。
至此，一个 vscode 的开发环境就已经搭建完毕，接下来就是了解项目结构，以及 vscode 插件的 api 了。
import * as vscode from 'vscode'
export function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand('kuizuo-plugin.helloWorld', () => {
vscode.window.showInformationMessage('Hello World from kuizuo-plugin!')
})
context.subscriptions.push(disposable)
}
export function deactivate() {}
vscode.commands.registerCommand用于注册命令，kuizuo-plugin.helloWorld 为命令 ID，在后续package.json中要与之匹配。第二个参数为一个回调函数，当触发该命令时，弹出提示框。
在 package.json 中关注 activationEvents 与 contributes
{
\"activationEvents\": [\"onCommand:kuizuo-plugin.helloWorld\"],
\"contributes\": {
\"commands\": [
{
\"command\": \"kuizuo-plugin.helloWorld\",
\"title\": \"Hello World\"
}
]
}
}
activationEvents 激活事件，onCommand:kuizuo-plugin.helloWorld中kuizuo-plugin是插件 ID 要与 extension.ts 中的注册命令匹配，helloWorld则是命令标识，而 onCommand 则是监听的类型，此外还有onView、onUri、onLanguage等等。
contributes 则是配置那些地方来显示命令，像官方的例子中，就是在 Ctrl + Shift + P 命令行中输入 Hello World 来调用kuizuo-plugin.helloWorld 命令。此外还可以设置按键与菜单
\"keybindings\": [
{
\"command\": \"kuizuo-plugin.helloWorld\",
\"key\": \"ctrl+f10\",
\"mac\": \"cmd+f10\",
\"when\": \"editorTextFocus\"
}
],
\"menus\": {
\"editor/context\": [
{
\"when\": \"editorFocus\",
\"command\": \"kuizuo-plugin.helloWorld\",
\"group\": \"navigation\"
}
]
}
设置完毕后，可以按 Ctrl + Alt + O 或者命令行中键入 reload 来重启 vscode
这里也要注意，如果重启后并无生效，请查看 package.json 是否配置正确（多一个逗号都不行），或者尝试重新调试。如果还不行，那么很有可能就是代码报错，但日志输出并没有，那么在弹出的新窗口中打开开发人员工具（Ctrl+Alt+I 或帮助 → 切换开发人员工具），这里有报错相关的提示信息。
先说首次启动弹窗的实现，要实现该功能，肯定要保证插件在 VSCode 一打开就运行，而这取决于 vscode 触发插件的时机，也就是 activationEvents，所以activationEvents需要设置成onStartupFinished。想要更高的优先级，可以选择 * （但官方不建议，除非其他事件无法实现的前提下），这里为了演示就使用*。
其实现代码主要调用 vscode.window.showInformationMessage 函数如下
import * as vscode from 'vscode'
import { exec } from 'child_process'
export function activate(context: vscode.ExtensionContext) {
vscode.window.showInformationMessage('是否要打开愧怍的小站？', '是', '否', '不再提示').then((result) => {
if (result === '是') {
exec(`start 'https://kuizuo.cn'`)
} else if (result === '不再提示') {
// 其他操作 后文会说
}
})
}
此时重启窗口，就会有如下弹窗显示
![](\"https://img.kuizuo.cn/image_9oqLzZl-wE.png\")
但如果你是 mac 用户的话，你会发现无法打开，其原因是 window 下打开链接的指令是 start，而 mac 则是 open，所以需要区分不同的系统。要区分系统就可以使用 node 中的 os 模块的 platform 方法获取系统，如下（省略部分代码）
import * as os from 'os'
const commandLine = os.platform() === 'win32' ? `start https://kuizuo.cn` : `open https://kuizuo.cn`
exec(commandLine)
当然了，当用户选择不再提示的时候，下次再打开 vscode 就别提示了，不然大概率就是卸载插件了。这里就需要设置全局参数了，在 package.json 中 contributes 设置 configuration，具体如下，注意kuizuoPlugin.showTip 为全局参数之一
\"contributes\": {
\"configuration\": {
\"title\": \"kuizuo-plugin\",
\"properties\": {
\"kuizuoPlugin.showTip\": {
\"type\": \"boolean\",
\"default\": true,
\"description\": \"是否在每次启动时显示欢迎提示！\"
}
}
}
}
该参数可以在设置 → 扩展中找到kuizuo-plugin插件来手动选择，也可以是通过 api 来修改
![](\"https://img.kuizuo.cn/image_teNrxe9D9O.png\")
然后读取vscode.workspace.getConfiguration().get(key)和设置该参数vscode.workspace.getConfiguration().update(key, value)
export async function activate(context: vscode.ExtensionContext) {
const key = 'kuizuoPlugin.showTip'
const showTip = vscode.workspace.getConfiguration().get(key)
if (showTip) {
const result = await vscode.window.showInformationMessage('是否要打开愧怍的小站？', '是', '否', '不再提示')
if (result === '是') {
const commandLine = os.platform() === 'win32' ? `start https://kuizuo.cn` : `open https://kuizuo.cn`
exec(commandLine)
} else if (result === '不再提示') {
//最后一个参数，为true时表示写入全局配置，为false或不传时则只写入工作区配置
await vscode.workspace.getConfiguration().update(key, false, true)
}
}
}
即便是调试状态下，重启也不会影响全局参数。最终封装完整代码查看源码，这里不再做展示了。
我日常开发中写的最多的文件就是 js/ts 了，有时候就会在目录下创建 demo.js 来简单测试编写 js 代码，那么我就要点击资源管理器，然后右键新建文件，输入 demo.js。于是我想的是将该功能封装成快捷键的方式，当然右键也有新建测试文件这一选项。
![](\"https://img.kuizuo.cn/image_3SRybBGaF1.png\")
功能其实挺鸡肋的，也挺高不了多少效率，这里可以说为了演示和测试这个功能而实现。
总之前面这么多废话相当于铺垫了，具体还是看功能实现吧。
首先就是注册命令，具体就不解读代码了，其逻辑就是获取调用vscode.window.showQuickPick弹出选择框选择 js 还是 ts 文件（自定义），接着获取到其目录，判断文件是否存在，创建文件等操作。
import * as vscode from 'vscode'
import * as fs from 'fs'
export async function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand('kuizuo-plugin.newFile', (uri: vscode.Uri) => {
vscode.window.showQuickPick(['js', 'ts'], {}).then(async (item) => {
if (!uri?.fsPath) {
return
}
const filename = `${uri.fsPath}/demo.${item}`
if (fs.existsSync(filename)) {
vscode.window.showErrorMessage(`文件${filename}已存在`)
return
}
fs.writeFile(filename, '', () => {
vscode.window.showInformationMessage(`demo.${item}已创建`)
vscode.window.showTextDocument(vscode.Uri.file(filename), {
viewColumn: vscode.ViewColumn.Two, // 显示在第二个编辑器窗口
})
})
})
})
context.subscriptions.push(disposable)
}
export function deactivate() {}
然后再 keybindins 中添加一条
\"keybindings\": [
{
\"command\": \"kuizuo-plugin.newFile\",
\"key\": \"shift+alt+n\",
}
],
然后就当我实现完功能的时候，我在想自带的新建文件是不是就是个 command？只是没有绑定快捷键？ 于是我到键盘快捷方式中找到答案
![](\"https://img.kuizuo.cn/image_nQu3Y8DWSw.png\")
图中的explorer.newFile就是资源管理器右键新建文件的命令，只是没有键绑定。所以我只需要简单的加上shift + alt + n即可实现我一开始想要的快捷键功能，此时再次右键资源管理器新建文件右侧就有对应的快捷键。
此时的我不知该哭该笑，折腾半天的功能其实只是设置个快捷键的事情。
这些命令在 vscode 中作为内置命令Built-in Commands。要查看 vscode 所有命令的话，也可以通过vscode.commands.getCommands 来获取所有命令 ID，要在插件中执行也只需要调用vscode.commands.executeCommand(id)
接着我就在想，既然很多 vscode 功能都是命令的形式，那是不是在插件级别就能做键盘映射，而不用让用户在 vscode 设置，很显然是可以的。只需要在 package.json 中 contributes 的 keybindings 中设置，就可以实现组合键来进行光标的移动。下面是我给出的答案
\"keybindings\": [
{
\"command\": \"cursorUp\",
\"key\": \"shift+alt+i\",
\"when\": \"textInputFocus\"
},
{
\"command\": \"cursorDown\",
\"key\": \"shift+alt+k\",
\"when\": \"textInputFocus\"
},
{
\"command\": \"cursorLeft\",
\"key\": \"shift+alt+j\",
\"when\": \"textInputFocus\"
},
{
\"command\": \"cursorRight\",
\"key\": \"shift+alt+l\",
\"when\": \"textInputFocus\"
},
{
\"command\": \"cursorHome\",
\"key\": \"shift+alt+h\",
\"when\": \"textInputFocus\"
},
{
\"command\": \"cursorEnd\",
\"key\": \"shift+alt+;\",
\"when\": \"textInputFocus\"
}
]
![](\"https://img.kuizuo.cn/image_SnnPUABJN5.png\")
仔细看右侧来源就可以知道是没问题的，第一个为我之前设置的，而扩展则是通过上面的方法。
在 vscode 中有几个地方可以用于扩展，具体可看Extending Workbench | Visual Studio Code Extension API
![](\"https://code.visualstudio.com/assets/api/extension-capabilities/extending-workbench/workbench-contribution.png\")
左侧图标（活动栏）：主要有资源管理器、搜索、调试、源代码管理、插件
编辑器右上角：代码分栏、code runner 的运行图标
底部（状态栏）：git、消息、编码等等
在 contributes 添加 viewsContainers 与 views，注意，views 的属性要与 viewsContainers 的 id 对应。
\"viewsContainers\": {
\"activitybar\": [
{
\"id\": \"demo\",
\"title\": \"愧怍\",
\"icon\": \"public/lollipop.svg\"
}
]
},
\"views\": {
\"demo\": [
{
\"id\": \"view1\",
\"name\": \"视图1\"
},
{
\"id\": \"view2\",
\"name\": \"视图2\"
}
]
}
编辑器右上角是在 menus 中设置 editor/title，图标则是对应命令下设置，不然就是显示文字
\"commands\": [
{
\"command\": \"kuizuo-plugin.helloWorld\",
\"title\": \"Hello World\",
\"icon\": {
\"light\": \"public/lollipop.svg\",
\"dark\": \"public/lollipop.svg\"
}
}
],
\"menus\": {
\"editor/title\": [
{
\"when\": \"resourceLangId == javascript\",
\"command\": \"kuizuo-plugin.helloWorld\",
\"group\": \"navigation\"
}
],
}
至于底部状态栏，这里借用官方例子vscode-extension-samples/statusbar-sample at main · microsoft/vscode-extension-samples (github.com)，最终效果如下
![](\"https://img.kuizuo.cn/image_yQRsMkT6f5.png\")
那个 🍭 就是所添加的图标，不过并不实际功能，这里只是作为展示。
在 vscode 中分别有三部分的主题可以设置
| 主题 | 范围 | 推荐 |
|---|---|---|
| 文件图标主题 | 资源管理器内的文件前的图标 | Material Icon Theme |
| 颜色主题 | 代码编辑器以及整体颜色主题 | One Dark Pro |
| 产品图标主题 | 左侧的图标 | Carbon Product Icons |
不过关于主题美化就不做深入研究，上面所推荐的就已经足够好看，个人目前也在使用。
代码片段，也叫snippets，相信大家都不陌生，就是输入一个很简单的单词然后一回车带出来很多代码。平时大家也可以直接在 vscode 中创建属于自己的snippets
代码片段相对比较简单，这里就简单跳过了
功能描述：在一个变量后使用.log，即可转化为 console.log(变量)的形式就像 xxx.log => console.log('xxx', xxx) 有点像 idea 中的.sout
这里我把 jaluik/dot-log 这个插件的实现逻辑给简化了，这里先给出基本雏形
import * as vscode from 'vscode'
class MyCompletionItemProvider implements vscode.CompletionItemProvider {
constructor() {}
// 提供代码提示的候选项
public provideCompletionItems(document: vscode.TextDocument, position: vscode.Position) {
const snippetCompletion = new vscode.CompletionItem('log', vscode.CompletionItemKind.Operator)
snippetCompletion.documentation = new vscode.MarkdownString('quick console.log result')
return [snippetCompletion]
}
// 光标选中当前自动补全item时触发动作
public resolveCompletionItem(item: vscode.CompletionItem) {
return null
}
}
export function activate(context: vscode.ExtensionContext) {
const disposable = vscode.languages.registerCompletionItemProvider(
['html', 'javascript', 'javascriptreact', 'typescript', 'typescriptreact', 'vue'],
new MyCompletionItemProvider(),
'.', // 注册代码建议提示，只有当按下“.”时才触发
)
context.subscriptions.push(disposable)
}
在 vscode 插件中通过vscode.languages.registerCompletionItemProvider提供像补全，代码提示等功能，第一个参数为所支持的语言，第二个参数为提供的服务vscode.CompletionItemProvider\n这里只是封装成类的形式，目的是为了保存一些属性，例如光标位置 position，也可以传递对象形式\n{ provideCompletionItems, resolveCompletionItem } ，第三个参数则是触发的时机。
provideCompletionItems\n需返回一个数组，成员类型为vscode.CompletionItem，可通过new vscode.CompletionItem()来创建。
当你尝试运行上述代码时，会发现在任何值后面输入.都会有log提示。
![](\"https://img.kuizuo.cn/image_-ZCy88xVyq.png\")
但是点击后只是满足了代码补全的功能，而选择 log 选项后所要执行的操作则是在 resolveCompletionItem 中实现，这里仅仅只是返回一个\nnull，即只有简单的补全功能，这里对整个过程进行描述（可以自行下个断点调试查看）：。
当输入.时，程序进入到provideCompletionItems\n函数内，这里可以获取到当前正在编辑的代码文档（文件名，代码内容）对应第一个参数，以及光标所在位置也就是第二个参数。还有其他参数，但这里用不到。具体可看CompletionItemProvider
选择完毕后，便会进入到 resolveCompletionItem 里面，这里可以获取到用户所选的选项内容，然后执行一系列的操作。
要做代码替换的话就需要注册文本编辑命令vscode.commands.registerTextEditorCommand ，内容如下
const commandId = 'kuizuo-plugin.log'
const commandHandler = (editor: vscode.TextEditor, edit: vscode.TextEditorEdit, position: vscode.Position) => {
const lineText = editor.document.lineAt(position.line).text
// match case name.log etc.
const matchVarReg = new RegExp(`\\(\\[^\\\\s\\]*\\[^\\'\\\"\\`\\]\\).${'log'}$`)
// match case 'name'.log etc. /(['\"`])([^'\"])\\1.log/
const matchStrReg = new RegExp(`\\(\\[\\'\\\"\\`\\]\\)\\(\\[^\\'\\\"\\`\\]*\\)\\\\1\\.${'log'}$`)
let matchFlag: 'var' | 'str' = 'var'
let text,
key,
quote = \"'\",
insertVal = ''
;[text, key] = lineText.match(matchVarReg) || []
if (!key) {
;[text, quote, key] = lineText.match(matchStrReg) || []
matchFlag = 'str'
}
// if matched
if (key) {
const index = lineText.indexOf(text)
edit.delete(new vscode.Range(position.with(undefined, index), position.with(undefined, index + text.length)))
if (matchFlag === 'var' && key.includes(\"'\")) {
quote = '\"'
}
// format like console.log(\"xxx\", xxx)
if (matchFlag === 'var') {
// only console.log(xxx)
insertVal = `${'console.log'}(${key})`
}
// if key is string format like console.log(\"xxx\")
if (matchFlag === 'str') {
insertVal = `${'console.log'}(${quote}${key}${quote})`
}
edit.insert(position.with(undefined, index), insertVal)
}
return Promise.resolve([])
}
context.subscriptions.push(vscode.commands.registerTextEditorCommand(commandId, commandHandler))
registerTextEditorCommand不同于registerCommand，它只针对编辑器的命令，例如可以删除代码中的某个片段，增加代码等等。上面的代码就是为了找到.log\n前（包括.log）匹配的代码，进行正则提取，然后调用 edit.delete 删除指定范围，再调用 edit.insert\n来插入要替换的代码，以此达到替换的效果。
命令注册完毕了就需要调用了，也就到了 resolveCompletionItem 的时机
public resolveCompletionItem(item: vscode.CompletionItem) {
const label = item.label
if (this.position && typeof label === 'string') {
item.command = {
command: 'kuizuo-plugin.log',
title: 'refactor',
arguments: [this.position.translate(0, label.length + 1)], // 这里可以传递参数给该命令
}
}
return item
}
将命令赋值给 item.command，会自动调用其 command 命令，同时把 arguments 参数传入给 command。最终达到替换的效果。
这里要说下 vscode 编辑器中的 Position，了解这个对代码替换、代码定位、代码高亮有很大帮助。
position 有两个属性line和character，对应的也就是行号和列号（后文以line和character\n为称），**和**都是从 0 开始算起，而在 vscode 自带的状态栏提示中则是从 1 开始算起，这两者可别混淆了。
其中 position 有如下几个方法
position.translate
根据当前坐标计算，例如当前 position 的 line 0，character1。position.translate(1, 1) 得到 line\n1，character 2，这不会改变远 position，这很好理解。但如果计算后得到的 line 与 character 有一个为负数则直接报错。
position.with
从自身创建一个新的 postion 对象
知道了坐标信息，那么就可以获取范围了。可以通过 new vscode.Range() 来截取两个 position 之间的内容，得到的是一个 对象，有\nstart 与 end 属性，分别是传入的两个 position。
同样的 Range 和 Postion 方法都一致，这里就不多叙述了，可查看其声明文件。\n知道范围就可以通过 editor 来获取范围内的代码或是 edit 来删除代码等操作。
知道了这些内容，再看上面的代码也不难理解了。
这里在补充一个功能：选中一个变量的时候，按下快捷键在下方添加console.log(变量)，相关插件 Turbo Console Log
补：只有编辑器有光标的情况下会传入当前光标属性 position，选中状态下是不会传入 postion\n属性，而是要通过editor.selection来获取选中内容，是一个 Selection 对象。
context.subscriptions.push(
vscode.commands.registerTextEditorCommand(
'kuizuo-plugin.insertLog',
(editor: vscode.TextEditor, edit: vscode.TextEditorEdit) => {
// 获取选中代码 在其下方插入 console.log(xxx)
const { selection, selections } = editor
// 选中多个代码时
if (selections.length > 1) {
return
}
// 如果不是当行代码
if (!selection.isSingleLine) {
return
}
const value = editor.document.getText(selection)
const insertVal = `${os.EOL}${'console.log'}('${value}', ${value})`
edit.insert(editor.selection.end, insertVal)
editor.selection = new vscode.Selection(editor.selection.end, editor.selection.end) // 重置选中区域
return Promise.resolve([])
},
),
)
这里也一笔带过，具体可看 hover.ts 中的代码。只要在 json 文件中，将鼠标悬停在kuizuo这个词中即可触发，试试看看。
![](\"https://img.kuizuo.cn/image_RUIjdDI90l.png\")
使用 webView 可以在 vscode 内显示自定义的网页内容，丰富 vscode 功能，但所消耗的性能是肯定有的，就有可能影响 vscode\n的运行速度。官方给出的建议是：
这个功能真的需要放在VSCode中吗？作为单独的应用程序或网站会不会更好呢？
webview 是实现这个功能的唯一方法吗？可以使用常规 VS Code API 吗？
您的 webview 是否会带来足够的用户价值以证明其高资源成本？
不过这里还只是作为一个演示，点击右上角的 logo 图标便可在 vscode 中打开网页。
![](\"https://img.kuizuo.cn/image_nVO_YmRit4.png\")
不过要注意一点。新开的 webview 的背景是对应主题颜色的背景，如果网站有黑白模式的话，那么可能会导致颜色不对，故这里设置了 webview 的背景为白色。
至于消息通信就不尝试了。
大部分常用的 vscode 插件实现就此完毕，实际上有很多 api 还没尝试过，篇幅有限，就不一一列举了，后续若有开发实际作用插件再研究。具体可自行安装尝试一番，既然要让别人安装，这里就需要介绍发布了。
这里在打包前重构下命令 ID，从 kuizuo-plugin → vscode-extension，同时把 package.json 的 name 改成了 vscode-extension-sample，因为发布的时候这个 id 必须唯一，不能与已有重名，到时候生成的为 kuizuo.vscode-extension-sample。（demo 给取了，不然我也不想起名为 sample）
无论是本地打包还是发布到应用市场都需要借助vsce这个工具。
安装
npm i vsce -g
打包成vsix文件：
vsce package
如果使用pnpm的话，有可能会打包失败，提示：npm ERR! missing: xxxxxx
在打包时会提示一些信息，例如修改 README.md ，添加 LICENSE 等等，根据提示来操作即可。
生成好的 vsix 文件不能直接拖入安装，只能从扩展的右上角选择Install from VSIX安装：
1、注册账号获取 token
因为 Visual Studio Code 使用 Azure DevOps作为其 Marketplace 服务。所以需要登录一下Azure。登录后，如果之前没用过的话会要求创建一个组织，默认为邮箱前缀，这里如下点击
![](\"https://img.kuizuo.cn/token1_JNXknLPQyJ.png\")
2、新建一个 token
![\"image-20220831152146541\"](\"https://img.kuizuo.cn/image-20220831152146541.png\")
根据图片选择，注意其中 Organization 选择 All aaccessible organizations，Scopes 选择：Full access，否则登录会失败。生成后会得到一个 token，保存它，当你关闭时便不再显示。
3、创建一个发布者
先使用网页版创建发布账号：https://marketplace.visualstudio.com/manage填写一些基本信息，然后在使用
vsce login <publisher name>
这里的 publisher name 根据 package.json 中的 publisher，会要求你输入 Personal Access Token，把刚刚创建的 token 的值粘贴过来即可
提示\nThe Personal Access Token verification succeeded for the publisher 'kuizuo'.\n就说明验证成功
4、发布应用
vsce publish
这里要保证 package.json 的 name 在插件市场中唯一，否则会提示 The Extension Id already exist in the Marketplace. Please use the different Id。
运行完毕后，最终提示Published kuizuo.vscode-extension-sample v1.0.0. 就说明发布完毕，发布和 npm 包一样，都无需审核，但要求包名唯一。
可以在 Manage Extensions | Visual Studio Marketplace 中管理已发布的插件
![](\"https://img.kuizuo.cn/image_HssaMdar8f.png\")
这时在 vscode 扩展商店中搜索 vscode-extension-sample就能找到该插件VSCode-extension，也可以通过publisher:\"kuizuo\"来找到我的所有 vscode 插件。
整个开发过程的体验还是非常不错的，调试和代码提示都做得特别到位。不过有一点体验不好的，是大部分的配置信息都要写在 package.json 中，而在这里就不像 ts 那样有没有很好的代码提示了。不过当你填错命令 id 的时，vscode 还会提示命令 id 不存在，而不是不知道报错点。
浅浅吐槽下：说真的 vscode 插件开发相关的文章与教程少之又少，有时候一个功能的一个 api 实现只能去查阅文档，而不像 chrome 插件，通过搜索引擎就能很快得出结果，而 vscode 插件往往得到的是推荐...但这也说明 chrome 插件开发的人远多于 vscode 插件，或者说远多于 IDE 插件的开发，也很正常，大部分编程好用的功能，已有大牛实现了对应的插件，多数开发者没有一些特别的需求完全就没必要接触 vscode 插件开发。就如我一年前就想写 vscode 插件，但却迟迟拖到现在，其原因可能就这。
不过这类应用本就如此，就是不断翻阅文档，阅读前人的代码实现，再结合自身思路以完成最终目标。
VSCode 插件开发全攻略（一）概览 - 我是小茗同学 - 博客园 (cnblogs.com)
Extension API | Visual Studio Code Extension API
", "url": "https://kuizuo.cn/vscode-extension", "title": "写一个VSCode扩展", "summary": "编写一个属于个人定制化的 VSCode 扩展，并将其发布到应用商店中", "date_modified": "2022-07-11T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "vscode", "plugin", "extension", "develop" ] }, { "id": "autohotkey", "content_html": "当我使用笔记本的时候，每次移动光标，都要大费周章，同时由于笔记本的缘故，导致键入Home与End都需要搭配Fn功能键来实现。所以我希望在任何情况下（敲代码，写文章）都可以将某些组合键绑定为上下左右键，在代码编辑器上有键盘映射可以设置，但脱离代码编辑器就不起作用了，在window下有个神器 AutoHotkey 可以实现我想要的功能。
打开官网，点击Download，安装即可。
安装完成后，右键新建会AutoHotKey Srcipt后缀为ahk。例如创建demo.ahk，其内容如下
<+<!I::Send {Up}
<+<!K::Send {Down}
<+<!J::Send {Left}
<+<!L::Send {Right}
<+<!H::Send {Home}
<+<!;::Send {End}
然后保存双击该文件，即可运行autohotkey，此时打开任意文本，键入Shift + Ctrl + [HIJKL;] 就可以看到光标上下左右移动。
这里对上面语法进行讲解
| 键名 | 热键标识 |
|---|---|
| Ctrl | ^ |
| Shift | + |
| Alt | ! |
| Win | # |
如果要针对左右Ctrl或Shfit只需要在前面添加< > 。::则作为映射关系，左边的按键作用于何种指令，而右侧则是左侧按键所对应的指令，这里的指令相对简单，只是发送键盘上下左右的关系，指令还可以实现信息框MsgBox 启动应用等等。具体还有更多键盘与鼠标热键详情可在AutoHotkey Help手册中查看，非常详细，不过是英文。
具体要映射的快捷键可自行发挥，但要切记不建议与常用快捷键冲突，例如上面为何是IJKL而不是WASD，其原因会导致快捷键冲突。
此外AutoHotkey不仅能做键盘映射，实现宏定义，一键启动任务也不成问题，篇幅有限，就不做过多演示，有兴趣可自行研究。
", "url": "https://kuizuo.cn/autohotkey", "title": "AutoHotkey键盘映射", "summary": "当我使用笔记本的时候，每次移动光标，都要大费周章，同时由于笔记本的缘故，导致键入Home与End都需要搭配Fn功能键来实现。所以我希望在任何情况下（敲代码，写文章）都可以将某些组合键绑定为上下左右键，在代码编辑器上有键盘映射可以设置，但脱离代码编辑器就不起作用了，在window下有个神器 AutoHotkey 可以实现我想要的功能。", "date_modified": "2022-07-08T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "工具", "keyMap" ] }, { "id": "learning-style", "content_html": "临近考试周，又要开始准备复习，顺带总结下自己平常的学习方式与一些感慨。
我个人主要的两种学习方式，主动学习与被动学习
通常来说，主动学习往往是一件痛苦的事情。就如考试周，平常的课该去在课堂上睡觉，该不去的在宿舍睡觉，到考试周，一学期的课没听，但一想到不复习就有可能面临挂科，或多或少都会复习。考试摆烂，挂科惨淡。
除了上面是会导致坏结果而去学习，那么还有一种则是与之相反，也就是所需，所感兴趣的去学习。
例如我想要实现一个酷炫功能，或者是一个需求时，而其中需要的知识点便会去了解与学习。
对于前者而言，其过程并不舒服，甚至可以说是逼自己学习不喜欢的东西，通常我是不如不学的，即便学了在以后也难以记起，除非不学的结果比较严重（如挂科）。而后者情况便不同，兴趣是最好的老师，甚至都不需要借助外界因素去激励，便能有一个很好的学习成果。
如果没有兴趣或需求的情况下，那么主动学习一定要定制一系列的目标，如果没有明确的目标，学习将会显得十分迷茫。我有很多时候便是这样，想去主动去学习诸多技术栈，不知从何下手。
其实可以说是利用业余时间学习的一个方式，首先我会想我一天主要做的事情（通常是与学习无关），比如刷各个平台（b 站，抖音）的视频，刷知乎，qq 群闲聊等等，这里只是以我一天的大部分日常举例。
此事不妨关注一些与学习类的账号，包括但不限于加入一些技术交流群， up 主，公众号，博主等等，当你每次刷这类平台时，系统很自然就会给你推送相关内容，比方说 b 站，我日常会在上面刷一些鬼畜视频，生活娱乐视频，但也会关注一些技术类的账号，在娱乐的同时，还能不经意间刷到一些编程知识（知乎，微信公众号同理），这送上门的知识不香吗？
再比如 watch 一些开源项目，订阅一些博客文章，定时推送Hacker News周刊等等，在他们发布一些重要内容的时候能及时通知到你。虽然这样每天邮箱时常处于未读状态，但如果打开某一条邮箱查看其中的内容，说不定又是一次不错的收获。
当然，这样学习肯定有一定弊端。首先所摄取的知识过于笼统，一般都是由别人推荐的，甚至有可能会浪费你人生中的几分钟，因为这些知识点可能你已经掌握了，或者这些知识确实没什么干货。其次所获取到的知识往往是整个知识面的冰上一角，或者是某些新型技术，但想要深入去学习还是得按上面的主动学习。
被动学习主要的作用能让你在不学习的状态下，还能获取相对应的知识。听起来可能觉得很卷，无时无刻的在学习，但我认为在娱乐中学习往往不会显得像主动学习那般有种疲惫感。
我在被动学习中就间接了解到许多的前沿的技术栈，以及了解到许多之前没使用过的语言、框架特性，而这些都是直接送上门的知识点，而我要做的只是关注一些账号，订阅一些文章或站点，而不用自己去茫茫知识海洋中去寻求。
我时常处于这类被动学习状态，因为我对很多技术点都很感兴趣，但又不知道从何下手，而当我刷到我所感兴趣的东西时，我才会开始转为主动学习。之所以会出现这样的学习状态转型，有很大一部分是因为兴趣感已经没有一开始所学的那么强烈，甚至可以说有些许乏味。
在一开始接触时，我是抱着强烈的兴趣感去学的，处于一种非常积极的主动学习状态，当时所获取的知识是无法用现在同等时间所堪比。然而在兴趣感消散，这种状态都为浮云。主动学习的频率减弱，每天都在做着与学习无关的事情，这期间与知识没有任何的往来。
直到将每天所要做的事情，间接的转为被动学习的方式，至少有在学习，而不是在停步，即便是行走 1 厘米，那也是米。
最好是对感兴趣的方面学习，这样即有动力去学习，有不会感到厌烦，并且兴趣是能陪伴很久的，也往往能坚持下去。
无论是任何事情在任何时候下都应该保持的是一种不断坚持的状态，打游戏也好，学习也好。
一段时间不打游戏，手感生疏，再次接触就没状态。\n一段时间不学知识，容易忘记，再次使用就没印象。
大部分人都是如此，可谁又不希望保持一种不断坚持的状态。毕竟不是每个人都有充裕的个人资源与时间资源，很多时候这些资源并不是由自己分配的，有可能是亲朋好友，也有可能是上司老板，最有可能是生活所迫。。。
唯愿此生，岁月静好
", "url": "https://kuizuo.cn/learning-style", "title": "浅谈个人学习方式", "summary": "临近考试周，又要开始准备复习，顺带总结下自己平常的学习方式与一些感慨。", "date_modified": "2022-06-10T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "随笔", "杂谈" ] }, { "id": "vercel-deploy-serverless", "content_html": "Vercel 除了能部署静态站点外，还能运行 Serverless Functions，也是本次的主题
To deploy Serverless Functions without any additional configuration, you can put files with extensions matching supported languages and exported functions in the
/apidirectory at your project's root.
vercel 约定在目录下 api 下创建接口路径，这里创建 api/hello.js 文件，当然也支持 ts 以及 ESmodule 写法
export default function handler(request, response) {
const { name } = request.query
response.status(200).send(`Hello ${name}!`)
}
此时通过vc --prod生产环境部署后，在浏览器请求 vercel 提供的二级域名/api/hello?name=vercel 便可得到文本Hello vercel，而其函数写法与 express 类似
接口信息可以在 Functions 中查看
![\"image-20220512155341109\"](\"https://img.kuizuo.cn/image-20220512155341109.png\")
不过上面是使用 js 写法，vercel 更推荐使用 TypeScript
安装 @vercel/node
npm i -D @vercel/node
将上面的 hello.js 改为 hello.ts，内容为
import type { VercelRequest, VercelResponse } from '@vercel/node'
export default (request: VercelRequest, response: VercelResponse) => {
const { name } = request.query
response.status(200).send(`Hello ${name}!`)
}
此外还可以使用其他语言，这里为 Vercel 所支持的语言
上面创建的例子是在生产环境下进行的，vercel 官方非常贴心的提供了 vercel dev 来用于开发环境（本地调试）。
vercel dev
执行后，将会默认开启 3000 端口来启动服务，此时访问 http://localhost:3000/api/hello 就可调用该接口
在根目录创建vercel.json，用于设置 Vercel 项目配置 ，其配置结构与 Nextjs 的 next.config.js 大体一致。
vercel 允许响应携带自定义的协议头，例如设置允许跨域的协议头。
{
\"headers\": [
{
\"source\": \"/(.*)\",
\"headers\": [
{
\"key\": \"Access-Control-Allow-Origin\",
\"value\": \"*\"
},
{
\"key\": \"Access-Control-Allow-Headers\",
\"value\": \"content-type\"
},
{
\"key\": \"Access-Control-Allow-Methods\",
\"value\": \"DELETE,PUT,POST,GET,OPTIONS\"
}
]
}
]
}
Vercel 支持路由重写功能，因此我们可以实现反向代理。
例如将前缀为/proxy 的所有请求都代理到 http://127.0.0.1:5000，其写法如下
{
\"rewrites\": [{ \"source\": \"/proxy/:match*\", \"destination\": \"http://127.0.0.1:5000/:match*\" }]
}
请求/proxy/hello 将会请求到 http://127.0.0.1:5000/hello（不带有/proxy）
注意无法代理前缀为/api 的接口，即使设置了也无效。
除了 rewrites 还有一个 redirects，也就是重定向，response 返回 3xx 的状态码和 location 头信息。
而 rewrites 重写内部转发了请求，地址栏不会发生改变，并且状态码由转发的请求决定。
并且 redirects 是先被调用的，而 rewrites 是后被调用的。
可以设置指定接口分配的内存以及最大执行时间。默认下
个人用户接口超时时间最长为 5 秒。
可以使用 vercel.json 配置来覆盖 vercel 默认行为，也就能使用 Vercel 部署 Node 项目。
假设要部署一个 Express 项目，则配置如下
{
\"builds\": [
{
\"src\": \"app.js\",
\"use\": \"@vercel/node\"
}
]
}
安装 @vercel/node包
npm i @vercel/node -D
然后运行 vercel，而不是vercel --prod
这里有个部署 Nest.js 项目的教程 基于 Vercel+Github Action 部署 Nest.js 项目 - 掘金 (juejin.cn)
其 vercel.json 如下
{
\"builds\": [
{
\"src\": \"dist/main.js\",
\"use\": \"@vercel/node\"
}
],
\"routes\": [
{
\"src\": \"/(.*)\",
\"dest\": \"dist/main.js\"
}
]
}
然后执行 vercel --prod（因为 nest 项目需要 build 打包）
Vercel 十分良心，为个人用户提供了免费的爱好者计划，每个月提供 100G 流量，构建时间是 100 小时，50 个根域名绑定。
", "url": "https://kuizuo.cn/vercel-deploy-serverless", "title": "Vercel部署Serverless", "summary": "使用 Vercel 部署 serverless 过程记录", "date_modified": "2022-05-12T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "vercel", "serverless" ] }, { "id": "use-github-action-to-auto-deploy", "content_html": "如果有写过项目的经历，就免不了将代码上传到服务器上，安装依赖，然后输入启动命令的步骤。但是有的项目往往需要经常性的改动，如果还是照着上面的方式进行部署的话。先不说这样操作的效率，操作个几次就想罢工了。并且上面这样操作的往往容易误操作。而 Github Actions 正是该问题的良药。
Github Actions 是 Github 提供的免费自动化构建实现，特别适用于持续集成和持续交付的场景，它具备自动化完成许多不同任务的能力，例如构建、测试和部署等等。
在进行操作前，先对 Github Actions 基础知识进行补充，具体可查看 GitHub Actions 入门教程 阮一峰
可以在 GitHub Marketplace · Actions to improve your workflow 中找到所有的 Actions。
第一步：创建一个 Vite 工程，可在官网中查看如何安装
pnpm create vite
选择对应的项目名（vite-project）与模板（vue-ts）
第二步：打开package.json文件，加一个homepage字段，表示该应用发布后的根目录（参见官方文档）。
\"homepage\": \"https://[username].github.io/vite-project\",
上面代码中，将[username]替换成你的 GitHub 用户名。
第三步：在这个仓库的.github/workflows目录，生成一个 workflow 文件，名字可以随便取，这个示例是ci.yml。
workflow 文件如下
name: Build and Deploy
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Install and Build
run: |
yarn install
yarn run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{ secrets.ACCESS_TOKEN }}
publish_dir: ./dist
上面这个 workflow 文件的要点如下
master分支发生push事件时触发。job，运行在虚拟机环境ubuntu-latest。actions/checkout。yarn install和yarn run build第四步：将项目上传置 Github 仓库中，
该 peaceiris/actions-gh-pages 支持三种 Token，这里使用 personal_token，其生成教程在官方文档中有详细图文，这里就不贴其生成的图了。不过记得权限过期以及勾选上 workflow
token 只会在生成的时候显示一次，如需要再次显示，则可以点击，但使用此令牌的任何脚本或应用程序都需要更新！
然后在Settings -> Secrets -> Actions 中 New repository secret中便可添加 secret。
![\"image-20220511122017247\"](\"https://img.kuizuo.cn/image-20220511122017247.png\")
这时候只要一调用 git push，就会触发对应的 workflows 文件配置。点击 Actions 便可看到 jobs 工作。
![\"image-20220511122420135\"](\"https://img.kuizuo.cn/image-20220511122420135.png\")
此时访问https://kuizuo.github.io/vite-project就可呈现vite项目（不过我已经把仓库给关闭了），但进入会白屏，控制台提示
![\"image-20220511122914534\"](\"https://img.kuizuo.cn/image-20220511122914534.png\")
很显然，需要静态资源请求的路径错了，正确的应该是https://kuizuo.github.io/vite-project/assets/index.2435d274.js，根据Vite中的[构建生产版本](https://www.vitejs.net/guide/build.html#public-base-path) 通过命令行参数 --base=/vite-project/
稍加操作在 Install and Build 加上 base 参数
- name: Install and Build
run: |
yarn install
yarn run build --base=/vite-project/
git push 后，稍等片刻再次访问便可得到如下页面
![\"image-20220511125536189\"](\"https://img.kuizuo.cn/image-20220511125536189.png\")
那么现在在 Github Page 上搭建好了，但还要将编译后的文件还可以通过 FTP 协议添加自己的服务器上，这里我就以我的博客为例。
在服务器中开启 FTP，并添加一个用户名,密码以及根目录(这里我问选择为项目目录)
workflow 要做的就是新建一个 steps，这里选用 FTP-Deploy-Action，以下是我的完整配置内容
name: FTP Deploy
on: [push]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Use Node.js 16
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Build Project
run: |
yarn install
yarn run build
- name: FTP Deploy
uses: SamKirkland/FTP-Deploy-Action@4.0.0
with:
server: ${{ secrets.ftp_server }}
username: ${{ secrets.ftp_user }}
password: ${{ secrets.ftp_pwd }}
local-dir: ./build/
server-dir: ./
相信第一个实例中的 workflow 应该已经明白了，其中 ftp_server，ftp_user，ftp_pwd 都是私密信息，所以需要 New repository secret 设置这三个变量。
但由于 build 下存在大量文件夹与文件，所以 FTP 速度上传速度堪忧，最终耗时 17 minutes 38.4 seconds。这里只是作为 FTP 演示。
FTP 传输文件着实过慢，所以可以通过 SCP 的方式来传输文件，这里用到了ssh deploy · Actions，以下是示例
name: ci
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Use Node.js 16
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Build Project
run: |
yarn install
yarn run build
- name: SSH Deploy
uses: easingthemes/ssh-deploy@v2.2.11
env:
SSH_PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
ARGS: '-avzr --delete'
SOURCE: 'build'
REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
REMOTE_USER: 'root'
TARGET: '/www/wwwroot/blog'
其中 PRIVATE_KEY 为服务器SSH登录的私钥，REMOTE_HOST 就是服务器的ip地址。当然，这些参数也都作为私密信息，也是要通过New repository secret来设置的。
从上面的演示便可看出 Github Actions 的强大，但其实我挺早之前就了解到它能做这些事情，但迟迟没有动手尝试一番，因为这些自动化操作用人工也是能完成的。也许当时的我认为，用人工所花费的时间远比自动化操作的学习时间来的长，可又随着自己的个人应用增加，每次都需要手动发布，而此时前者的时间已远远大于后者，所以才会想去学习。
明知该技术是一定会接触的，为何不趁现在去了解学习呢？
", "url": "https://kuizuo.cn/use-github-action-to-auto-deploy", "title": "使用Github Action自动化部署", "summary": "如果有写过项目的经历，就免不了将代码上传到服务器上，安装依赖，然后输入启动命令的步骤。但是有的项目往往需要经常性的改动，如果还是照着上面的方式进行部署的话。先不说这样操作的效率，操作个几次就想罢工了。并且上面这样操作的往往容易误操作。而 Github Actions 正是该问题的良药。", "date_modified": "2022-05-11T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "github", "git" ] }, { "id": "vercel-deploy-blog", "content_html": "![\"image-20220511170700075\"](\"https://img.kuizuo.cn/image-20220511170700075.png\")
Vercel 部署静态资源网站极其简单方便，并且有可观的访问速度，最主要的是免费部署。
如果你还没有尝试的话，强烈建议去使用一下。
与之相似的产品 Netfily，如果你想部署私有化，推荐 Coolify
如果你想搭建一个类似这样的站点，不妨参考我的 Docusaurus 主题魔改
由于某些原因，vercel.app 被 DNS 污染（即被墙），目前在国内已经无法打开，除非你有自己的域名，通过 CNAME 解析访问你的域名。
因此想要在国内访问，建议不要使用 Vercel 部署了，最好选用 Netlify。
进入 Vercel 官网，先去注册一个账号，建议注册一个 Github 账号后，使用 Github 账号来登录 Vercel。
进入 Dashboard
![\"image-20220511170233559\"](\"https://img.kuizuo.cn/image-20220511170233559.png\")
点击 New Project
![\"image-20220511165902993\"](\"https://img.kuizuo.cn/image-20220511165902993.png\")
这里可以从已有的 git repository 中导入，也可以选择一个模板。
这里登录我的 Github 账号选择仓库，然后点击 blog 仓库旁的 Import 即可。当然，你也可以直接拉取我的仓库，仓库地址：kuizuo/blog
![\"image-20220511165513526\"](\"https://img.kuizuo.cn/image-20220511165513526.png\")
点击 Deploy，然后静等网站安装依赖以及部署，稍后将会出现下方页面。
此时网站已经成功搭建完毕了，点击图片即可跳转到 vercel 所提供的二级域名访问。
是不是极其简单？甚至不需要你输入任何命令，便可访问构建好的网站。
如果有自己的域名，还可以在 vercel 中进行设置。
首先进入 blog 的控制台，在 Settings -> Domains 添加域名。
![\"image-20220511171144240\"](\"https://img.kuizuo.cn/image-20220511171144240.png\")
接着提示域名需要 DNS 解析到 vercel 提供的记录值
![\"image-20220511171359148\"](\"https://img.kuizuo.cn/image-20220511171359148.png\")
登录所在的域名服务商，根据 Vercel 提供的记录值 cname.vercel-dns.com，添加两条记录
![\"image-20220511172741663\"](\"https://img.kuizuo.cn/image-20220511172741663.png\")
此时回到 Vercel，可以看到记录值成功生效。
![\"image-20220511172027570\"](\"https://img.kuizuo.cn/image-20220511172027570.png\")
此时访问自己的域名，同样也能访问到页面，同时还有可观的访问速度。
默认状态下，Vercel 将会颁发并自动更新 SSL 证书。（着实方便，不用自己手动去申请证书，配置证书）
![\"image-20220511172240999\"](\"https://img.kuizuo.cn/image-20220511172240999.png\")
To update your Production Deployment, push to the \"main\" branch.
当主分支有代码被推送，Vercel 将会重新拉取代码，并重新构建进行单元测试与部署（构建速度可观）
![\"image-20220511173442694\"](\"https://img.kuizuo.cn/image-20220511173442694.png\")
同时 vercel 还支持 serverless，也就是说，不仅能部署静态站点，还能部署后端服务，不过肯定有一定的限制。
翻译过来叫边缘函数，你可以理解为在 Vercel 的 CDN 上运行的函数，可以在 Vercel 的 CDN 上运行代码，而不需要在服务器上运行。
由于这类函数和静态资源一样，都通过 CDN 分发，因此它们的执行速度非常快。
官网介绍：Edge Functions
有时候并不想登录网页，然后新建项目，选择仓库，拉取部署，而是希望直接在项目下输入命令来完成部署。vercel 自然肯定提供相对应的脚手架 CLI 供开发者使用。
安装
npm i -g vercel
在项目根目录中输入
vercel --prod
第一次将进行登录授权，选择对应平台，将会自动打开浏览器完成授权，接着将会确认一些信息，一般默认回车即可，下为执行结果
Vercel CLI 24.2.1
? Set up and deploy “F:\\Project\\React\\online-tools”? [Y/n] y
? Which scope do you want to deploy to? kuizuo
? Link to existing project? [y/N] n
? What’s your project’s name? online-tools
? In which directory is your code located? ./
Auto-detected Project Settings (Create React App):
- Build Command: react-scripts build
- Output Directory: build
- Development Command: react-scripts start
? Want to override the settings? [y/N] n
🔗 Linked to kuizuo12/online-tools (created .vercel and added it to .gitignore)
🔍 Inspect: https://vercel.com/kuizuo12/online-tools/6t8Vt8rG3waGVHTKU7ZzJuGc6Hoq [2s]
✅ Production: https://online-tools-phi.vercel.app [copied to clipboard] [2m]
📝 Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡 To change the domain or build command, go to https://vercel.com/kuizuo12/online-tools/settings
执行完毕后，将会在根目录创建.vercel 文件夹，其中 project.json 中存放 orgId 和 projectId，下面将会用到。此时在dashboard中也能看到该项目被部署了。
不过这样部署上去的代码，并不会连接 git 仓库，需要到控制台中选择仓库即可。
如果想在 github actions 中使用，则新建一个 steps，设置好对应的变量。
- name: Deploy to Vercel
run: npx vercel --token ${{VERCEL_TOKEN}} --prod
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
还有一个 VERCEL_TOKEN 需要到 Vercel Settings Tokens 新建一个 Token。
没什么好总结，直接上手使用，相信你会爱上 Vercel，以及他旗下的产品，Next.js 和 Turbo 等等。
", "url": "https://kuizuo.cn/vercel-deploy-blog", "title": "Vercel部署个人博客", "summary": "使用 Vercel 部署个人博客过程记录，简单方便、访问快、免费部署。", "date_modified": "2022-05-11T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "vercel", "blog" ] }, { "id": "kz-admin", "content_html": "当时初学 Web 开发的时候，除了写一个网页博客外，第二个选择无非就是一个后台管理系统，可以应用于多种需要数据管理类项目中。
基于NestJs + TypeScript + TypeORM + Redis + MySql + Vben Admin编写的一款前后端分离的权限管理系统
演示地址：KzAdmin 管理员账号：admin 密码：123456
![\"image-20220505171231754\"](\"https://img.kuizuo.cn/image-20220505171231754.png\")
基于Vben Admin开发，使用 Vue3、Vite、TypeScript 等最新技术栈，内置常用功能组件、权限验证、动态路由。
仓库地址：https://github.com/kuizuo/kz-vue-admin
├── build # 打包脚本相关
│ ├── config # 配置文件
│ ├── generate # 生成器
│ ├── script # 脚本
│ └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│ ├── api # 接口文件
│ ├── assets # 资源文件
│ │ ├── icons # icon sprite 图标文件夹
│ │ ├── images # 项目存放图片的文件夹
│ │ └── svg # 项目存放svg图片的文件夹
│ ├── components # 公共组件
│ ├── design # 样式文件
│ ├── directives # 指令
│ ├── enums # 枚举/常量
│ ├── hooks # hook
│ │ ├── component # 组件相关hook
│ │ ├── core # 基础hook
│ │ ├── event # 事件相关hook
│ │ ├── setting # 配置相关hook
│ │ └── web # web相关hook
│ ├── layouts # 布局文件
│ │ ├── default # 默认布局
│ │ ├── iframe # iframe布局
│ │ └── page # 页面布局
│ ├── locales # 多语言
│ ├── logics # 逻辑
│ ├── main.ts # 主入口
│ ├── router # 路由配置
│ ├── settings # 项目配置
│ │ ├── componentSetting.ts # 组件配置
│ │ ├── designSetting.ts # 样式配置
│ │ ├── encryptionSetting.ts # 加密配置
│ │ ├── localeSetting.ts # 多语言配置
│ │ ├── projectSetting.ts # 项目配置
│ │ └── siteSetting.ts # 站点配置
│ ├── store # 数据仓库
│ ├── utils # 工具类
│ └── views # 页面
├── test # 测试
│ └── server # 测试用到的服务
│ ├── api # 测试服务器
│ ├── upload # 测试上传服务器
│ └── websocket # 测试ws服务器
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件
建议使用 pnpm 包管理器来管理 node 项目，使用npm install -g pnpm即可安装。
pnpm install
pnpm run dev
运行结果
vite v2.9.5 dev server running at:
> Network: https://192.168.184.1:3100/
> Local: https://localhost:3100/
ready in 5057ms.
注: 开发环境下首次载入项目会稍慢(Vite 在动态解析依赖)
更多关于前端项目规范可直接参考 Vben Admin 文档 ，非常详细了。
基于 NestJs + TypeScript + TypeORM + Redis + MySql 编写的前后端分离权限管理系统
仓库地址：https://github.com/kuizuo/kz-nest-admin
|─setup-swagger.ts # Swaager文档配置
|─main.ts # 主入口
|─config # 配置文件
|─shared
| |─redis # redisModule
| | |─redis.module.ts
| | |─redis.interface.ts
| | |─redis.constants.ts
| |─shared.module.ts
| |─services # 全局通用Provider
|─app.module.ts
|─mission
| |─mission.module.ts
| |─mission.decorator.ts # 任务装饰器，所有任务都需要定义该装饰器，否则无法运行
| |─jobs # 后台定时任务定义
|─common # 系统通用定义
| |─dto # 通用DTO定义
| |─contants
| | |─error-code.contants.ts # 系统错误码定义
| | |─decorator.contants.ts # 装饰器常量
| |─filters # 通用过滤器定义
| |─interceptors # 通用拦截器定义
| |─decorators # 通用装饰器定义
| |─exceptions # 系统内置通用异常定义
| |─class # Class Model 不使用Interface定义，使用Interface无法让Swagger识别
|─modules
| |─admin
| | |─core # 核心功能
| | | |─interceptors # 后台管理拦截器定义
| | | |─decorators # 后台管理注解定义
| | | |─provider # 后台管理提供者定义
| | | |─guards # 后台管理守卫定义
| | |─system # 系统模块定义
| | |─account # 用户账户模块定义
| | |─login # 登录模块定义
| | |─admin.module.ts # 后台管理模块
| | |─admin.constants.ts # 后台管理模块通用常量
| | |─admin.interface.ts # Admin通用interface定义
| |─ws # Socket模块
|─entities # TypeORM 实体文件定义
依赖安装与执行打包命令前端与后端一致，但需要提前修改.env.development 中数据库相关配置，并执行 sql/init.sql 来初始化数据。
项目中大部分的目录结构设计参照与sf-nest-admin，但主要为了贴合自我的代码风格修改部分数据字段名，接口方法，接口响应格式等等。
同时对于大部分这类后台管理的 demo，通常都会定义用户，角色，菜单，部门。而我将部门相关代码删除，因为对于我后续项目大概率用不上这些部分，然后删了一些不相关的模块，主要写的这套模板还是用作自己后续的管理类项目。
这套系统中最为重要的一部分便是权限管理，不过在这套后台管理系统中这里的权限与菜单共用，前端路由渲染菜单，后端鉴权。后文的菜单表也就作为权限表而言。
在这三张表中关系如下（这里使用外键与数据库模型为例，实际项目并未用到外键，也不推荐使用）
![\"image-20220508235534026\"](\"https://img.kuizuo.cn/image-20220508235534026.png\")
用户-角色 与 角色-权限都采用的多对多的关系，即新创建一个表用于映射两表关系。这些都属于 mysql 基础，不做过多赘述。
在权限管理中，最为重要的便是权限表了，由于这套后台管理系统中还涉及到前端的左侧菜单，所以将这里的 permission 表替换为 menu 表，字段 permission 表示权限值。数据库中的 menu 表如下
![\"image-20220508234343594\"](\"https://img.kuizuo.cn/image-20220508234343594.png\")
对于主要字段介绍：
parent：对于有父子关系的表，会创建一个 parent_id(这里为 parent)字段用于表示父节点，无则为顶级节点。
permission：权限标识，根据后端接口而定，比如新增用户的 url 为sys/user/add，那么权限标识通常将/替换成:，也就是sys:user:add（主要防止和接口的 url 混淆）。
type：0 目录 1 菜单(前端组件) 2 权限，由于是菜单与权限混用，所以用 type 来区分。
icon：左侧菜单图标
order_no：左侧菜单排序
component：组件，目录为 LAYOUT，菜单则为对应组件，权限则无
有了这些数据，要做的是将他们拼接为前端菜单管理，根据角色获取所有菜单，根据用户的所有权限的树结构数据。
获取所有的菜单列表数据，通过递归生成对应的菜单树结构，具体递归代码在src/modules/core/permission/index.ts中的generatorMenu方法中。
具体拼接数据过多，可自行打开控制台(F12)->网络 到菜单管理页中获取数据可得，这里便不做展示（后文拼接数据同理）。
首先根据用户 id 找到该用户的所有角色 id，然后通过联表找到角色 id 所对应的菜单数据。
/**
* 根据角色获取所有菜单
*/
async getMenus(uid: number): Promise<string[]> {
const roleIds = await this.roleService.getRoleIdByUser(uid);
let menus: SysMenu[] = [];
if (includes(roleIds, this.rootRoleId)) {
menus = await this.menuRepository.find({ order: { orderNo: 'ASC' } });
} else {
menus = await this.menuRepository
.createQueryBuilder('menu')
.innerJoinAndSelect('sys_role_menu', 'role_menu', 'menu.id = role_menu.menu_id')
.andWhere('role_menu.role_id IN (:...roldIds)', { roldIds: roleIds })
.orderBy('menu.order_no', 'ASC')
.getMany();
}
const menuList = generatorRouters(menus);
return menuList;
}
同样generatorRouters函数也在src/modules/core/permission/index.ts中。
与上例一样，不过这里主要获取的是 permission 字段，所以在条件上添加了menu.type = 2与menu.permission IS NOT NULL，将 permission 拼接为一个数组。
/**
* 获取当前用户的所有权限
*/
async getPerms(uid: number): Promise<string[]> {
const roleIds = await this.roleService.getRoleIdByUser(uid);
let permission: any[] = [];
let result: any = null;
if (includes(roleIds, this.rootRoleId)) {
result = await this.menuRepository.find({
permission: Not(IsNull()),
type: 2,
});
} else {
result = await this.menuRepository
.createQueryBuilder('menu')
.innerJoinAndSelect('sys_role_menu', 'role_menu', 'menu.id = role_menu.menu_id')
.andWhere('role_menu.role_id IN (:...roldIds)', { roldIds: roleIds })
.andWhere('menu.type = 2')
.andWhere('menu.permission IS NOT NULL')
.getMany();
}
if (!isEmpty(result)) {
result.forEach((e) => {
permission = concat(permission, e.permission.split(','));
});
permission = uniq(permission);
}
return permission;
}
permission 的值如
[\"sys:user:add\", \"sys:user:delete\", \"sys:user:update\", \"sys:user:list\", \"sys:user:info\"]
然后在 auth.guard.ts 守卫中获取 permission，然后每次请求需要鉴权的接口时，将权限标识转为接口 url，判断是否包含该 url，不包含则无访问权限。
在菜单管理页中可操作菜单，具体可自测。
至此，菜单表的数据被拆分为这 3 部分数据，以实现权限管理，动态路由的目的。
你可以访问 https://admin.kuizuo.cn/swagger-ui 来查看kz-admin的Swagger文档
json格式为 https://admin.kuizuo.cn/swagger-ui/json，用于导入ApiFox中。
ApiFox在线链接: https://www.apifox.cn/apidoc/shared-7a07def2-5b82-4c71-bf57-915514f61f25 访问密码: kz-admin
其实一年多前我就想写一套相对完善的后台管理系统的模板，供自己后续的一些项目中使用。然而迟迟没有动手写套模板，而是不断根据业务需求，修修改改写了一套乱七八糟的代码，以至于维护的时候究极痛苦。就在不久前正好也用到，然而也是把之前写的屎山一样的代码拿来修改。
我所遇到的问题：项目结构乱，代码风格乱，维护代码极其折磨
所以今年寒假于是准备完善这套模板，然而当时只是创建完工程结构，到现在才正式把功能实现以及测试相关，部署搞定。说真的，非常拖延，甚至都快让我放弃写这个模板的打算。但拖也对我有一定的好处，为什么这么说？因为当时有这个想法时，市面上关于这套技术栈的实现还很少，而等我寒假再去搜索相关实现的时候，却有相关开源的代码，而这便可供我学习，使项目更加完善。
回顾整体项目的编写过程，所花费的时间可能一个月不到，甚至更少，但往往就是各种各样的拖延导致项目逾期，或者是学习某个技术栈。难以将精力集中起来完成任务，至于原因，也许是目标过于庞大，或许是日常生活中的各种琐事，不过我想多半是自我的懒惰。
", "url": "https://kuizuo.cn/kz-admin", "title": "kz-admin后台管理系统", "summary": "基于 NestJs + TypeScript + TypeORM + Redis + MySql + Vben Admin 编写的一款前后端分离的权限管理系统", "date_modified": "2022-05-08T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "project", "admin", "vue", "nest" ] }, { "id": "about-open-source-license", "content_html": "虽然知道开源有个许可证 LICENSE，但一直没给自己写的一些开源项目选择开源许可证。于是准备系统了解一下开源许可证，以及如何为 Github 项目添加 LICENSE。
即开发源代码组织，是一个旨在推动开源软件发展的非盈利组织。可以在 Open Source Initiative 中查看所有的开源协议。
关于开源许可证的简单区别
![\"img\"](\"https://www.ruanyifeng.com/blogimg/asset/201105/bg2011050101.png\")
至于如何选择，下图更加通俗易懂
![\"快速选择协议\"](\"https://img.kuizuo.cn/2019-04-29-072557.png\")
其中开源许可证可分为两大类
宽松式许可证（permissive license）是最基本的类型，对用户几乎没有限制。用户可以修改代码后闭源。
它有三个基本特点。
（1）没有使用限制
用户可以使用代码，做任何想做的事情。
（2）没有担保
不保证代码质量，用户自担风险。
（3）披露要求（notice requirement）
用户必须披露原始作者。
常见的宽松式许可证有四种。它们都允许用户任意使用代码，区别在于要求用户遵守的条件不同。
（1）BSD（二条款版）
分发软件时，必须保留原始的许可证声明。
（2） BSD（三条款版）
分发软件时，必须保留原始的许可证声明。不得使用原始作者的名字为软件促销。
（3）MIT
分发软件时，必须保留原始的许可证声明，与 BSD（二条款版）基本一致。
（4）Apache 2
分发软件时，必须保留原始的许可证声明。凡是修改过的文件，必须向用户说明该文件修改过；没有修改过的文件，必须保持许可证不变。
不难看出这类许可证要求相对宽松，市面上大部分的开源项目主要以 MIT 和 Apache 两者为主。使用 MIT 协议开源项目如 vue，react，bootstrap，vscode，electron，axios，terminal 等等，作为大多数开发者而言，MIT 无法是最好的选择。
Copyleft 是理查德·斯托曼发明的一个词，作为 Copyright （版权）的反义词。
Copyright 直译是\"复制权\"，这是版权制度的核心，意为不经许可，用户无权复制。作为反义词，Copyleft 的含义是不经许可，用户可以随意复制。
但是，它带有前提条件，比宽松式许可证的限制要多。
- 如果分发二进制格式，必须提供源码
- 修改后的源码，必须与修改前保持许可证一致
- 不得在原始许可证以外，附加其他限制
上面三个条件的核心就是：修改后的 Copyleft 代码不得闭源。
常见的 Copyleft 许可证也有四种（对用户的限制从最强到最弱排序）。
（1）Affero GPL (AGPL)
如果云服务（即 SAAS）用到的代码是该许可证，那么云服务的代码也必须开源。
（2）GPL
如果项目包含了 GPL 许可证的代码，那么整个项目都必须使用 GPL 许可证。
（3）LGPL
如果项目采用动态链接调用该许可证的库，项目可以不用开源。
（4）Mozilla（MPL）
只要该许可证的代码在单独的文件中，新增的其他文件可以不用开源。
参考文章
开源许可证教程 - 阮一峰的网络日志 (ruanyifeng.com)
Github 官方专门制作了一个网站 Choose a License 帮助大家选择合适的开源，License。中文版也有 选择一个开源许可证。不过我更推荐下面在 Github 仓库页中来新增 LICENSE。
在仓库页中，Add file-> Create new file
![\"image-20220505190634653\"](\"https://img.kuizuo.cn/image-20220505190634653.png\")
输入 LICENSE（建议大写），右侧将会弹出 Choose a license template，这里我选择 MIT 协议
![\"image-20220505190758791\"](\"https://img.kuizuo.cn/image-20220505190758791.png\")
![\"image-20220505191409696\"](\"https://img.kuizuo.cn/image-20220505191409696.png\")
点击 Review and submit，此时就会回到添加文件的地方，并且自动为你填写好 Message，接着点击 Commit new file 即可
![\"image-20220505200951047\"](\"https://img.kuizuo.cn/image-20220505200951047.png\")
整个许可证内容如下
MIT License
Copyright (c) 2022 kuizuo
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the \"Software\"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
再次刷新便可看到效果
![\"image-20220505201138476\"](\"https://img.kuizuo.cn/image-20220505201138476.png\")
前段时间因为笔记本不在身边，导致一些本地磁盘代码数据没法直接同步过来。于是就准备把这些年写的代码重新整理一下，谈谈常用备份手段以及我的最佳手段
大多数代码的存储方式，方便存取，我通常会新建一个驱动器 代码 (F:) 来将所有代码放在此处，可能还会自备一个移动硬盘来存储代码。
无需网络，保存时间久，读写数据快。
数据同步不方便，难以做到跨端跨设备共享。万一硬盘出了点问题，代码将难以恢复。
例如某度网盘，Onedrive 等等，这类备份通常有一定的限制，例如下载限速严重，空间限制，保存期限等等，具体以实际使用网盘为例。
在某度网盘中，选择你的想备份的文件夹，是可以做到文件夹自动备份，但对于你项目中的依赖文件（例如 Node 的 node_module）那不小的空间也将备份，但有文件夹数量以及大小限制，如下图，这里只是简单一提，不作为备用手段。
![\"image-20220502153823417\"](\"https://img.kuizuo.cn/image-20220502153823417.png\")
相比本地硬盘而已，网盘更易分享，在其他设备中只需要登录网盘账号或访问网盘所分享的链接。
有些免费的网盘，必然有一定的限制，例如空间限制，下载限制，远不如本地硬盘。如果不付费的话，体验效果堪忧。
代码托管平台有很多，例如 Github、Gitee 等等，甚至可以自建一个像 GItLab 的代码托管平台。
代码实时性强，并且基于 Git 版本管理工具可以很方便查看代码的历史操作，对于项目类的而言非常方便。
对于一些公有项目而言，一些私密信息（密码）不易于上传，在其他设备拉取代码就不存在这部分数据。同时对于大量代码就束手无策。
介绍完上面的几种代码备份手段，各自都有优缺点，至于如何选择就因人而异，这里就说说我是如何备份代码的。
对于全部代码而言，肯定是多备份远优于不备份的。所以我通常会在本地电脑硬盘中备份两份代码，一份就正常放在固态硬盘上，另一份则放在机械硬盘，同时再备份一份代码在网盘上。
但机械硬盘与网盘的备份时间一致，都是定期或阶段性的备份（甚至可能会忘记备份），所以这种对代码的实时性要求不高，通常这类代码为学习代码以及工具类相关代码。
对于项目代码而言，我是毫不犹豫的选择代码托管平台，使用到版本管理工具 Git，可以很好的查看代码的全部历史记录以及修改追踪能力。易于维护的同时，代码分享与同步也比网盘来的高效。设置好.gitignore 也不会将非必要的文件（依赖文件，打包后的文件，生产环境下的配置文件）上传上去。而 Github 便是我最好的选择，里面存放了或多或少的开源与私有项目，每次在其他设备上只需要登录 github，然后 clone 项目，便可开始 coding。
通常来说备份项目代码就已经足够了，毕竟这类代码往往会有一定的价值性。
但这还不够，因为放在别人的网站上的代码，万一人家网站停用，或者是你的代码有点风险给你代码仓库封了，那么这时候你想找回代码都无法找回！所以为了做好备份代码的万全准备，一般是推荐搭建私有 git 服务，然后自动同步 github 的账号下的所有仓库。
除了代码备份外，此外笔记也十分重要，毕竟有时候自己写的代码，自己甚至都不一定明白。对于文章数据以及笔记，我通常会使用云端协作平台，这类产品有 wolai，notion，语雀等等，不过我个人还是相对倾向于使用 wolai。可多端设备查看，实时编辑等等，体验还算 ok。
此外一些博客文章，就会同步在个人博客以及掘金上，当然博客的静态站点的代码仓库也是存放在Github上。
其实对于很多代码都没备份的必要，例如我在安卓学习的时候，涉及到的刷机包（少说 2 个 g），以及各种 apk。完全可以直接备份其下载地址，而不是选择备份。
像临时用脚手架创建的工程文件或是下载别人的代码，这类通常就临时使用（甚至不会再打开第二次），完全没有必要备份理由。
如果不压缩文件夹，备份时将逐个读取文件特别耗时，同时压缩完代码还可以节省一定的空间。也许在一开始备份时会相对麻烦，但在上传与下载以及多次备份时就一举两便。
永远不要嫌备份麻烦，当你辛辛苦苦写的代码丢失时，那才是真正的麻烦。
养成定期备份代码的习惯，因为你永远不知道什么突发情况会导致代码丢失。
", "url": "https://kuizuo.cn/code-backup", "title": "代码备份方案", "summary": "前段时间因为笔记本不在身边，导致一些本地磁盘代码数据没法直接同步过来。于是就准备把这些年写的代码重新整理一下，谈谈常用备份手段以及我的最佳手段", "date_modified": "2022-05-02T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "随笔", "code" ] }, { "id": "gitlab-code-management-environment", "content_html": "![\"image-20220414235645607\"](\"https://img.kuizuo.cn/image-20220414235645607.png\")
我只要有代码的项目，都会放到 Github 上，无论公开还是私有项目。一是相当于在云端备份了一份代码，二是可以很方便的分享给别人。但对于私有项目而言存放在别人那总归不好，而且Github 时常会出现无法访问的情况（即使搭了梯子）。所以就打算搭建一个私有的仓库，基于GitLab。
可以访问 kuizuo · GitLab 来查看搭建效果。
![\"image-20220415013028002\"](\"https://img.kuizuo.cn/image-20220415013028002.png\")
一台服务器，系统 Linux，内存 >=4g
我的轻量应用服务器配置如下
![\"image-20220414210129510\"](\"https://img.kuizuo.cn/image-20220414210129510.png\")
服务器我选择安装宝塔面板，对于个人项目，还是很推荐安装的，集成了一些软件商店，包括本次的主角，同时提供可视化页面操作，能省下很多敲命令的时间，同时也会增加忘记命令的记忆。
进入宝塔面板，点击软件商店，找到GitLab 最新社区版，点击安装
![\"image-20220414204808143\"](\"https://img.kuizuo.cn/image-20220414204808143.png\")
实测等了 8 分钟，安装完毕即可查看 GitLab 的访问地址，账号密码。默认端口号 8099，记得在防火墙开放下该端口
![\"image-20220414213002293\"](\"https://img.kuizuo.cn/image-20220414213002293.png\")
进入访问地址就可以看到 GitLab 的登录页面了。
Reset a user's password | GitLab
进入控制台（进入要稍等一段时间）
sudo gitlab-rails console
显示页面如下
[root@VM-4-5-centos ~]# sudo gitlab-rails console
--------------------------------------------------------------------------------
Ruby: ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [x86_64-linux]
GitLab: 14.9.3 (ec11aba56f1) FOSS
GitLab Shell: 13.24.0
PostgreSQL: 12.7
------------------------------------------------------------[ booted in 29.71s ]
Loading production environment (Rails 6.1.4.6)
irb(main):001:0>
输入如下代码
u=User.find(1)
u.password='a12345678'
u.password_confirmation = 'a12345678'
u.save!
输出结果
irb(main):001:0> u=User.find(1)
=> #<User id:1 @root>
irb(main):002:0> u.password='a12345678'
=> \"a12345678\"
irb(main):003:0> u.password_confirmation = 'a12345678'
=> \"a12345678\"
irb(main):004:0> u.save!
=> true
irb(main):005:0>
最后输入exit退出控制台，然后输入下方代码重启 gitlab，密码就设置完毕了
gitlab-ctl restart
若重启或修改端口等操作后出现 502 错误，您可能需要等待 3-5 分钟才能正常访问 GitLab
点击右上角的头像->Preferences 进入到设置，找到语言设置为简体中文，然后点击左小角的 Save changes。刷新网页语言就设置完毕了
![\"image-20220414215528543\"](\"https://img.kuizuo.cn/image-20220414215528543.png\")
gitlab内部集成了letsencrypt，因此，这里只需要启用letsencrypt，并进行一些必要的配置
打开/opt/gitlab/etc/gitlab.rb.template，修改以下内容
在32行左右，将external_url前面的#删掉，并在单引号中填写gitlab服务器的https地址，例如https://gitlab.kuizuo.cn
external_url 'https://gitlab.kuizuo.cn'
gitlab默认占用nginx80端口，所以需要更改下
nginx['listen_port'] = 8100
在2434行左右（可通过搜索letsencrypt定位），修改下面几项
letsencrypt['enable'] = true #删除前面的#号，并将值修改为true
letsencrypt['contact_emails'] = ['kuizuo12@gmail.com'] #删除前面的#号,修改为自己的邮箱
letsencrypt['auto_renew'] = true #删除前面的#号 自动更新
然后重载配置（需要一点时间）
gitlab-ctl reconfigure
然后重启gitlab使配置生效
gitlab-ctl restart
gitlab就会通过letsencrypt自动签发免费的HTTPS证书，等证书签发成功，就可以通过上面指定的域名访问代码仓库了。
其实也可以在nginx创建一个站点，然后该站点配置ssl，通过反向代理到127.0.0.1:8099 也是能实现配置HTTPS的。（推荐）
如果上面的操作的话，可能会导致gitlab的nginx无法启动（原因应该是修改了gitlab自带的nginx服务，或者与自带的冲突）。修改/opt/gitlab/sv/nginx/run
exec chpst -P /opt/gitlab/embedded/sbin/nginx -p /var/opt/gitlab/nginx
# 改为
exec chpst -P /opt/gitlab/embedded/sbin/gitlab-web -p /var/opt/gitlab/nginx
重启gitlab
gitlab-ctl start
点击左上角的菜单选择管理员，可在管理中心设置GitLab的相关设置。例如
在设置->通用->注册限制，取消勾选 已启动注册功能，这样就可以禁止注册（页面无注册按钮）。当然也可以允许，然后需要批准以及确认邮箱。
![\"image-20220415004207174\"](\"https://img.kuizuo.cn/image-20220415004207174.png\")
在概览->用户中可以查看相关用户信息。
![\"image-20220415012817311\"](\"https://img.kuizuo.cn/image-20220415012817311.png\")
至于其他设置自行研究了。
点击新建项目，这里就导入我的 blog 项目。
![\"image-20220414220221480\"](\"https://img.kuizuo.cn/image-20220414220221480.png\")
选择 Github 后，会提示使用 GitHub 身份验证，这里需要拿到 Github 的Token
![\"image-20220414220333437\"](\"https://img.kuizuo.cn/image-20220414220333437.png\")
访问https://github.com/settings/tokens，新建一个Token，选择token有效期，以及相关权限（我这边选择全选，token不过期）
![\"image-20220414220507016\"](\"https://img.kuizuo.cn/image-20220414220507016.png\")
![\"image-20220414220738714\"](\"https://img.kuizuo.cn/image-20220414220738714.png\")
生成完毕后复制该 Token 到 GitLab 上，就可以看到该 Github 账号下的所有仓库了，这里我选择 blog 进行导入（导入需要一点时间）。
![\"image-20220414220858379\"](\"https://img.kuizuo.cn/image-20220414220858379.png\")
导入完毕后与原仓库无特别区别
![\"image-20220414224639573\"](\"https://img.kuizuo.cn/image-20220414224639573.png\")
点击项目中设置->仓库，找到镜像仓库。在 Git 仓库 URL 中填写格式如下
// 原仓库git
https://github.com/kuizuo/blog
// 在https://后加上username@
https://kuizuo@github.com/kuizuo/blog
密码为上面的 Token（如果忘记的话，可以在 Github 的 Token 页中 Regenerate token），如下图所示
![\"image-20220414232028397\"](\"https://img.kuizuo.cn/image-20220414232028397.png\")
基本上github能实现的操作gitlab也都能实现。
![\"image-20220415001914123\"](\"https://img.kuizuo.cn/image-20220415001914123.png\")
放几张图
![\"image-20220414233435739\"](\"https://img.kuizuo.cn/image-20220414233435739.png\")
输入 top 命令，按 M 按内存排序。
![\"image-20220414233416223\"](\"https://img.kuizuo.cn/image-20220414233416223.png\")
还是挺吃内存的，毕竟安装的时候就要求 4g 内存以上。
有个轻量级的项目管理器 gitea 不妨也是一种选择，但功能上没有Gitlab这么丰富。
对于自建git服务的选择，这里有篇文章推荐阅读 自建 Git 服务器：Gitea 与 Gitlab 部署踩坑经历与对比总结 - 知乎 (zhihu.com)
其实回到一开始的问题，既然Github有可能访问不了，为啥不要迁移到国内的Gitee上。
除了瞎玩瞎折腾外，对于一些公司而言，他们不一定会使用这类开源的代码托管平台，而是自建一个像GitLab这样的代码仓库管理系统。此外别人的东西，多半都会有一定的限制，例如项目成员数量等等，所以才会有这次的尝试，整体体验感觉可玩性很大。
![\"uniapp\"](\"https://img.kuizuo.cn/uniapp.png\")
最近想搞个移动端或小程序的 Vue3 项目，所以选择跨端开发平台就显得十分重要。在业内主要有两个跨端开发平台，Taro 与 uniapp，但 uniapp 貌似对 vue3 的支持不是特别友好。所以让我在 Taro 和 uniapp 之间抉择了一段时间，最终还是尝试选择相对熟悉的 uniapp 来进行开发。
目前 uniapp 对 Vue3 的支持还处于 alpha 版，即开发阶段，大概率是会遇到很多问题的。
建议安装 HBuilderX，主要是 uni cli 在 APP 平台仅支持生成离线打包的 wgt 资源包，不支持云端打包生成 apk/ipa，并且也不便配置一些打包后的参数。
这里建议安装 Alpha 版，后文会说明缘由。
在 HBuilderX 正式版中是无法直接创建 Vue3 项目的，而 Alpha 版有 Vue2 和 3 可供选择，但创建的自带的模板大部分的写法还是 vue2 的写法（无 setup 语法糖），所以这时候要么改代码自建，要么使用官方所提供的 Vue3 模板
![\"image-20220327000608783\"](\"https://img.kuizuo.cn/image-20220327000608783.png\")
# 创建以 javascript 开发的工程
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
# 创建以 typescript 开发的工程
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
当然，有可能会下载失败，可以直接访问 gitee下载模板。
|-- src
|-- App.vue
|-- env.d.ts
|-- main.ts
|-- manifest.json
|-- pages.json
|-- uni.scss
|-- pages
| |-- index
| |-- index.vue
|-- static
|-- logo.png
|-- index.html
|-- package-lock.json
|-- package.json
|-- postcss.config.js
|-- tsconfig.json
|-- vite.config.ts
下载完毕，开始安装依赖，接着就可以开始测试了。
在运行之前，首先将vuex包给移除，不然将会有如下提示，总之就是不推荐使用的意思，而且要使用状态管理也推荐使用 pinia。所以执行 yarn remove vuex 吧
(node:26968) [DEP0148] DeprecationWarning: Use of deprecated folder mapping \"./\" in the \"exports\" field module resolution of the package at F:\\Uniapp\\my-vue3-project1\\node_modules\\vuex\\package.json.
Update this package.json to use a subpath pattern like \"./*\".
运行编译都正常
使用npm run dev:app后就会发现，终端一直卡在如下界面无法继续。（后面测试发现，除了 H5 能正常运行，其他都会卡住）
编译器版本：3.4.3（vue3）
请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式
。
正在编译中...
vite v2.8.6 building for development...
DONE Build complete. Watching for changes...
ready in 1554ms.
然后呢？？？
算了，就用 HBuilderX 的 cli 先运行到手机或模拟器，然后后打开 app 的时候提示如下错误，点击忽略后发现应用无法正常运行。
![\"image-20220326224649953\"](\"https://img.kuizuo.cn/image-20220326224649953.png\")
查看了下我本地的 HBuilderX 版本是正式版 v3.3.13，而该 Vue3 的模板的 Alpha 版 v3.4.3
![\"image-20220326225748608\"](\"https://img.kuizuo.cn/image-20220326225748608.png\")
好家伙，官方提供的模板都直接使用 Alpha 版，无奈只好点击 查看详情 后问题解决办法。最终测试后，建议是使用最新版，即 Alpha 版本，于是替换了本地正式版的 HbuilderX，应用便能正常运行了。
既然开发环境下能正常运行，那就试下打包。由于 uniapp 打包安卓应用只能打包成 APP 资源，要打包成 apk，要么创建一个 Android Studio 工程，然后将 APP 资源放入并打包成 apk，要么使用云打包（而云打包又是只有 HBuilder 才有的功能）。如果本地没有 Android Studio 相关环境，建议还是使用云打包（简单方便），这里就不演示下打包过程了。
这里只测试了微信小程序，在上面 app 的处理完之后，微信小程序也是正常运行，不过至于与上面 Vue3 模板和 HbuilderX 正式版有无关系我就不得而知了，也懒得重装测试了。不过猜测应该与上面无关，毕竟是与手机的 SDK 有关。
uniapp 官方中提供了一个 uni-ui 的组件库，但有一个 uniapp 相对知名的组件库 uview，并且相对前者来说更易上手实用，但当我尝试用 HBuilderX 导入时，却出现下方提示。
![\"image-20220327002827115\"](\"https://img.kuizuo.cn/image-20220327002827115.png\")
很显然，uview 并不支持 vue3，但在社区中找到了份同时支持 Vue3.0 和 Vue2.0 的uView，但测试后最终已失败告终。
在社区中也搜到了 ThorUI 组件库 但貌似需要会员收费，果断放弃且没有测试。
然后想到 Taro 中还有 nutui，于是我便开始尝试了一下，不出所料，支持 Vue3 组件库，肯定是支持的。演示如下
![\"image-20220327005629618\"](\"https://img.kuizuo.cn/image-20220327005629618.png\")
但很遗憾，这里的支持也只是局限于 h5 开发。官方也有声明只能开发 h5
@nutui/nutui@next 基于 Vue3 视觉风格 JD APP 10.0 规范 ，只能开发 h5\n@nutui/nutui-taro 基于 Vue3 视觉风格 JD APP 10.0 规范 ，必须基于 taro + vue3 框架 进行开发多端（多端指一套代码 部署多端环境 微信小程序 h5、等第三方小程序）
而且想要多端开发，也必须基于 taro + vue3 框架，所以在 uniapp 上的 app 与小程序上自然无法运行（已测试）
所以说一开始在 uniapp 和 taro 中的选择中，为啥不使用 Taro 呢？而且还支持 Vue3（相比 uniapp 而言）？
最终组件库的选择是 uniapp 官方的 uni-ui。
HBuilder 给我代码编写体验并不友好，所以将 uniapp 的项目转 vscode 进行开发，并且使用到 npm 包。
首先创建一个 vite+vue3 项目（或者使用一开始介绍的官方提供的 Vue3 模板，主要是有 cli，需要自行在安装），然后将原 src 目录给删除，替换成 uniapp 创建的项目根目录。但还需要做以下操作
vite 要支持 sass 只需要安装 sass 的依赖即可
npm install sass
由于使用了 ts，如果项目中存在 js 文件，将会警告，可以在 tsconfig.json 中添加\"allowJs\": true即可
npm i @dcloudio/uni-helper-json @types/uni-app @types/html5plus -D
但发现对于 uni-ui 组件库的代码提示并不友好，大概率是需要局部引用组件，我这里并未使用npm 包的方式导入，而是采用官方的 uni_modules，不过组件库的代码提示的问题不是很大，查阅文档即可解决。
uni-app 代码块（vscode） (github.com)
在 src 目录下创建env.d.ts文件，填入以下内容即可
/// <reference types=\"vite/client\" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
然后就是把一些#ifndef VUE3不是 vue3 的代码块，以及部分 js 文件改写成 ts 文件即可。这里把我修改后的模板上传到 github 上，有需要的可自行下载：kuizuo/vite-vue3-uniapp (github.com)
如果不想使用官方的 vue3 模板，这里也有篇文章介绍如何迁移
迁移 HbuilderX 的 uniapp 项目到主流的前端 IDE 开发（支持 VS Code 等编辑器/IDE）
不过最终如果要在 app 或小程序端运行，还是得打开 HBuilder。
整个过程下来，其实还是 uniapp 对 Vue3 支持不够友好，加上生态没能及时更新。并且官方提供的 Vue3 模板也存在一定问题。
但最终还是使用 uniapp 来进行开发，一是对 Vue3 足够了解加上使用过 uniapp，二是 Taro 对 Vue3 是支持了，但是又该如何编译成 App 这是我主要需求的，最主要还是不想踩一遍 Taro 的坑了。
", "url": "https://kuizuo.cn/vite-vue3-build-uniapp-environment", "title": "vite+vue3搭建uniapp开发环境", "summary": "使用 vite vue3 搭建 uniapp 开发环境", "date_modified": "2022-03-27T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "vue", "vite", "uniapp", "develop" ] }, { "id": "remove-ts-code-type", "content_html": "在短时间内有一个需求，原项目代码是 js，而我手里头的功能代码是 ts 的，需要将其合并。
按照以往，我通常会将 js 改写成 ts，但时间方面有限，就采取js的方式。因此希望将 ts 代码转换为存 js 代码，只需要把 ts 中的类型直接删除即可，也就是标题所表明的意思。以下在线转化工具能够做到。
TypeScript to plain JavaScript (transform.tools)
可以肯定的是 ts 有选项能够去除类型，于是这次就准备深入了解 TypeScript 的编译配置，也顺带复习一下 tsconfig.json 的相关参数。
毕竟会写代码，不会编译可就...
要编写 ts 代码，肯定要先安装其工具
npm i -g typescript ts-node
其中typescript自带的 tsc 命令并不能直接运行 typescript 代码，而ts-node可以直接运行 ts 代码的能力，省去编译阶段。
但不代表ts-node等于 ts 版的 Node.js，本质上 Node.js 只是 JavaScript 的运行时环境，而 Deno 确实可以直接运行 TypeScript。
不过本次的主题不在 ts-node 与 deno，而在于将 TypeScript 代码编译到 JavaScript 代码。
安装完毕，编写一个demo.ts的文件，在里面编写如下代码
const add = (a: number, b: number): number => {
return a + b
}
let c = add(1, 2)
使用命令 tsc demo.ts，将会在同级目录下生成demo.js，内容如下（默认是 ES5 标准）
var add = function (a, b) {
return a + b
}
var c = add(1, 2)
可以发现上面转化的代码是 ES5 标准的，然而现在都已经步入到 ES6 阶段了，同时如果有大量 ts 文件需要编译，将十分繁琐，所以就有了 tsconfig.json 用于描述将 TypeScript 转为 JavaScript 代码的配置文件。
终端使用tsc --init，会在目录下生成 tsconfig.json 文件，默认配置如下（已删除原注释）。
{
\"compilerOptions\": {
\"target\": \"es5\", // 编译
\"module\": \"commonjs\", // 模块导入与导出
\"esModuleInterop\": true, // 支持合成模块的默认导入
\"forceConsistentCasingInFileNames\": true, // 看不懂
\"strict\": true, // 严格模式
\"skipLibCheck\": true // 跳过.d.ts
}
}
假设我要编译 ES6 语法的，只需要将 es5 改为 es6，然后在终端输入tsc，生成的 js 代码就是 es6 规范的代码。
如果想要单纯的取出 ts 的类型，可以设置\"target\": \"ESNext\"，除了 ts 的一些特殊标准，如 enum，那么生成的 js 代码基本就是原 ts 代码移除类型的代码。（基本上就已经满足了我一开始的需求）
更多配置 => TypeScript: TSConfig Reference - Docs on every TSConfig option (typescriptlang.org)
更多相关 TS 编译配置和使用说明可以通过 tsc -h 查看。
这里有份 tsconfig.json 全解析 内容如下
{
\"compilerOptions\": {
/* 基本选项 */
\"target\": \"es6\", // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
\"module\": \"commonjs\", // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
\"lib\": [], // 指定要包含在编译中的库文件
\"allowJs\": true, // 允许编译 javascript 文件
\"checkJs\": true, // 报告 javascript 文件中的错误
\"jsx\": \"preserve\", // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
\"declaration\": true, // 生成相应的 '.d.ts' 文件
\"declarationDir\": \"./dist/types\", // 生成的 '.d.ts' 文件保存文件夹
\"sourceMap\": true, // 生成相应的 '.map' 文件
\"outFile\": \"./\", // 将输出文件合并为一个文件
\"outDir\": \"./dist\", // 指定输出目录
\"rootDir\": \"./\", // 用来控制输出目录结构 --outDir.
\"removeComments\": true, // 删除编译后的所有的注释
\"noEmit\": true, // 不生成输出文件
\"importHelpers\": true, // 从 tslib 导入辅助工具函数
\"isolatedModules\": true, // 将每个文件做为单独的模块 （与 'ts.transpileModule' 类似）.
/* 严格的类型检查选项 */
\"strict\": true, // 启用所有严格类型检查选项
\"noImplicitAny\": true, // 在表达式和声明上有隐含的 any类型时报错
\"strictNullChecks\": true, // 启用严格的 null 检查
\"noImplicitThis\": true, // 当 this 表达式值为 any 类型的时候，生成一个错误
\"alwaysStrict\": true, // 以严格模式检查每个模块，并在每个文件里加入 'use strict'
/* 额外的检查 */
\"noUnusedLocals\": true, // 有未使用的变量时，抛出错误
\"noUnusedParameters\": true, // 有未使用的参数时，抛出错误
\"noImplicitReturns\": true, // 并不是所有函数里的代码都有返回值时，抛出错误
\"noFallthroughCasesInSwitch\": true, // 报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿）
/* 模块解析选项 */
\"moduleResolution\": \"node\", // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
\"baseUrl\": \"./\", // 用于解析非相对模块名称的基础目录
\"paths\": {}, // 模块名到基于 baseUrl 的路径映射的列表
\"rootDirs\": [], // 根文件夹列表，其组合内容表示项目运行时的结构内容
\"typeRoots\": [], // 包含类型声明的文件列表
\"types\": [], // 需要包含的类型声明文件名列表
\"allowSyntheticDefaultImports\": true, // 允许从没有设置默认导出的模块中默认导入。
\"esModuleInterop\": true, // 支持合成模块的默认导入
/* Source Map Options */
\"sourceRoot\": \"./\", // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
\"mapRoot\": \"./\", // 指定调试器应该找到映射文件而不是生成文件的位置
\"inlineSourceMap\": true, // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
\"inlineSources\": true, // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性
/* 其他选项 */
\"experimentalDecorators\": true, // 启用装饰器
\"emitDecoratorMetadata\": true // 为装饰器提供元数据的支持
},
/* 指定编译文件或排除指定编译文件 */
\"include\": [\"src/**/*\"],
\"exclude\": [\"node_modules\", \"**/*.spec.ts\"],
\"files\": [\"index.ts\", \"test.ts\"],
// 从另一个配置文件里继承配置
\"extends\": \"@tsconfig/recommended\",
// 让 IDE 在保存文件的时候根据 tsconfig.json 重新生成文件
\"compileOnSave\": true // 支持这个特性需要Visual Studio 2015， TypeScript 1.8.4 以上并且安装 atom-typescript 插件
}
原本想自己总结一遍，但刷到了下面这篇文章，总结的太好了，以至于我都不是很想再写一遍主要的配置 🤩
会写 TypeScript 但你真的会 TS 编译配置吗？ - 掘金 (juejin.cn)
话虽说，但一些主要的功能还是得写一下
在一些项目中经常能看到导入模块不是使用相对路径./，而是像@/，其中@表示 src，也就是项目的原代码目录下，也就是路径别名。要实现这样的配置，项目的脚手架肯定是需要修改的。这里我就以 vite 为例。
import { defineConfig } from 'vite'
import { resolve } from 'path'
export default defineConfig {
resolve: {
alias: {
\"@\": resolve(__dirname, 'src'), // 路径别名
},
extensions: ['.js', '.json', '.ts'] // 使用路径别名时想要省略的后缀名
}
// ...
}
{
\"compilerOptions\": {
\"baseUrl\": \".\", // 必写，用于设置解析非相对模块名称的基本目录
\"paths\": {
\"@/*\": [\"src/*\"] // 用于设置模块名到基于baseUrl的路径映射
}
// ...
}
}
在使用 ESM（ES module） 编写代码的时候，引入 CJS（CommonJS）的模块，通常需要写成 import * as React from 'react'的形式，若写成 import React from 'react' 将会提示 模块“\"http\"”没有默认导出。，如果将esModuleInterop设置为 true，同时allowSyntheticDefaultImports 也会自动设置为 true，则可以写成后者的形式。
这里有篇文章详细的说明缘由 esModuleInterop 到底做了什么？
所以，尽量不要用 default 导出。 ——借评论区的一条评论
在代码中使用到浏览器的对象，如 window、document，这些对于TypeScript Complier 来说是不能识别。可以通过在 lib 字段中设置\"DOM\"
{
\"compilerOptions\": {
\"target\": \"ES5\",
\"lib\": [\"ES5\", \"ES6\", \"DOM\"]
}
}
{
\"compilerOptions\": {
\"declaration\": true, // 生成相应的`.d.ts`文件
\"declarationDir\": \"./dist/types\" 生成的 '.d.ts' 文件保存文件夹
}
}
![\"image-20220316204205165\"](\"https://img.kuizuo.cn/image-20220316204205165.png\")
之前用 electron-vue 写过一个半成品的桌面端应用，但是是基于 Vue2 的，最近又想重写点桌面端应用，想要上 Vue3+TypeScript，于是便有了这篇文章总结下具体的搭建过程。
Vue CLI 有一个插件vue-cli-plugin-electron-builder，可以非常方便的搭建 electron 环境。
npm i @vue/cli -g
vue create my-app
根据自己项目的需求选择对应的依赖（例如 Babel，TS，Vuex 等等）
Vue CLI v5.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
Vue CLI v5.0.3
✨ Creating project in F:\\Electron\\my-app.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
Vue CLI Plugin Electron Builder (nklayman.github.io)
cd my-app
vue add electron-builder
安装过程中会提示你选择 Electron 的版本，选择最新版本即可
npm run electron:serve
参考文章：Electron + Vue3 开发跨平台桌面应用【从项目搭建到打包完整过程】 - 掘金 (juejin.cn)
error in ./src/background.ts
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
我测试的时候，@vue/cli-plugin-typescript版本为~5.0.0，就会导致编译类型出错，将 package.json 中改为\"@vue/cli-plugin-typescript\": \"~4.5.15\"，即可正常运行（但还是会有 DeprecationWarning）
上面是使用 Vue Cli 脚手架进行开发，如果想上 Vite 的话，就需要用 Vite 来构建项目，然后安装 electron 的相关依赖。
这个不是作为重点，因为很多大佬都已经写了现成的模板，完全可以自行借鉴学习，就贴几个阅读过的几篇文章
Vite + Vue 3 + electron + TypeScript - DEV Community
2021 年最前卫的跨平台开发选择！vue3 + vite + electron - 知乎 (zhihu.com)
均可在 github 上搜索到
当然也可以使用脚手架，可选择 React 与 Vue，实际上也就是创建上面的前两个模板
npm create electron-vite
TODO...
因为 Electron 本质上还是一个浏览器，无论是 Vue 还是 React 开发也好，在传统网页开发的时候都有对应的调试地址，如http://127.0.0.1:3000，而electron的做法无非就是开启一个浏览器，然后和正常的网页开发一样，并提供桌面端的api使用。
目前社区两大 Vue+Electron 的脚手架主要是electron-vue和vue-cli-plugin-electron-builder，更多 electron 的开源项目都遵循着前者的项目结构，像上面的模板也就是。
以上就是我所使用 Vue3 来开发 Electron 的环境搭建过程，总体来说从 Electron 除了应用体积过大，对于前端开发者来说是非常友好的，既然环境配置完，那么现在就可以开始好好的编写桌面端应用了。
", "url": "https://kuizuo.cn/electron-vue3-development-environment", "title": "搭建Electron+Vue3开发环境", "summary": "搭建 Electron Vue3 的开发环境，用于编写跨平台应用", "date_modified": "2022-03-17T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "electron", "vue", "vite" ] }, { "id": "sse-server-send-event", "content_html": "先放一张 gif 图展示下效果
![\"sse\"](\"https://img.kuizuo.cn/sse.gif\")
实现上面这个效果之前，先补充点前置知识
众所周知，在 HTTP 协议中，服务器无法向浏览器推送信息，可以使用 WebSocket 来实现两者双向通信。而在这里所要介绍的是 SSE（Server-Sent Events），在浏览器向服务器请求后，服务器每隔一段时间向客户端发送流数据（是单向的），来实现接收服务器的数据，例如在线视频播放，和像上面所演示的效果。
![\"img\"](\"https://www.ruanyifeng.com/blogimg/asset/2017/bg2017052702.jpg\")
关于 SSE 标准文档 MDN 文档
服务器向浏览器发送的 SSE 数据，必须是 UTF-8 编码的文本，具有如下的 HTTP 头信息。
Content-Type: text/event-stream; charset=utf-8
Cache-Control: no-cache
Connection: keep-alive
使用 Node 实现的代码如下
var http = require('http')
http
.createServer(function (req, res) {
var fileName = '.' + req.url
if (fileName === './stream') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
Connection: 'keep-alive',
'Access-Control-Allow-Origin': '*',
})
res.write('retry: 10000\\n')
res.write('event: connecttime\\n')
res.write('data: ' + new Date() + '\\n\\n')
res.write('data: ' + new Date() + '\\n\\n')
interval = setInterval(function () {
res.write('data: ' + new Date() + '\\n\\n')
}, 1000)
req.connection.addListener(
'close',
function () {
clearInterval(interval)
},
false,
)
}
})
.listen(8844, '127.0.0.1')
通过 node server.js 运行服务端，此时浏览器访问 http://127.0.0.1:8844/stream 得到的效果就是开头的 gif 所演示的。
像上面是直接向服务器请求，浏览器有EventSource对象，比如监听 SSE 连接，以及主动关闭 SSE 连接，具体的演示代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\" />
<meta name=\"viewport\" content=\"width=device-width\" />
<title>JS Bin</title>
</head>
<body>
<div id=\"example\"></div>
<script>
var source = new EventSource('http://127.0.0.1:8844/stream')
var div = document.getElementById('example')
source.onopen = function (event) {
div.innerHTML += '<p>Connection open ...</p>'
}
source.onerror = function (event) {
div.innerHTML += '<p>Connection close.</p>'
}
source.addEventListener(
'connecttime',
function (event) {
div.innerHTML += '<p>Start time: ' + event.data + '</p>'
},
false,
)
source.onmessage = function (event) {
div.innerHTML += '<p>Ping: ' + event.data + '</p>'
}
</script>
</body>
</html>
并且由于是调用浏览器 API，在开发者工具的网络面板上还能看到对应的 EventStream，像下面这样
![\"image-20220316134321431\"](\"https://img.kuizuo.cn/image-20220316134321431.png\")
", "url": "https://kuizuo.cn/sse-server-send-event", "title": "SSE 服务器发送事件", "summary": "先放一张 gif 图展示下效果", "date_modified": "2022-03-16T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "http" ] }, { "id": "online-tools", "content_html": "
之前学习的时候，都会看到网络上一些在线工具的网站，比如获取时间戳，编码转化，正则表达式等等，这些对于一些初学者在电脑上没有安装相对应的工具，往往就会百度搜索在线工具，然后就能实现自己所要完成的目的。
这些工具很是方便，或多或少都会用到。但一些在线工具并不能满足我日常开发中的个别需求，于是乎我也准备自己写一个这样的在线工具网站。不过这里肯定不会像其他网站那种搞得花里胡哨的，同时也不会去重复的造轮子，这样很没有意义。
顺便也记录下这类工具的编写以及用途
有一段时间没怎么写 React 了，同时对 mui 组件库感兴趣，于是这次的使用 React 和 material 设计风格的组件库来进行编写，使用到 create-react-app 脚手架进行开发，同时使用 TypeScript 进行编写。
该纯前端，无任何后端交互部分。
不做代码分析与演示，可自行在网站上测试与 clone 源码进行查看。
如果是在协议复现的话，有些包的请求体是通过查询字符串来拼接的，也就是协议头Content-Type：application/x-www-form-urlencoded，请求体如 username=kuizuo&password=a123456，一般情况下都不会采取字符串来进行替换，而是转成 json 格式，如 { \"username\":\"kuizuo\",\"password\",\"a123456\"} 然后使用一些库（querystring）将 json 转成查询字符串的形式。
但是编写代码的时候，需要把抓包得到的查询字符串转成 json，而这也就是这部分的主要功能。
不过 js 本身是不支持 gbk 编码的，遇到使用 gbk 进行 url 编码的网站就需要自定义先将原文本进行 gbk 编码或解码然后才进行转化操作。
和查询字符串与 json 转化功能类似，只不过是将 cookie 文本与 json 互转。
有些国内网站上可能会使用 GBK 编码，但大多数语言默认都是 UTF8 编码，如果编码格式错误，后端接收到的请求必定失败。在这里我是使用到gbk-nice这个库，可以达到 gbk 版的encodeURIComponent与decodeURIComponent，与 js 自带的encodeURIComponent和decodeURIComponent也就是 gbk 与 utf-8 编码的区别。
上面所介绍的都是作为一个工具库的功能，我只是将其封装成一个在线工具使用，并非主要重点。而主要是对一些网站的功能实现，例如复制与下载等等。
在网页上展示代码，并有代码高亮的功能，首选的组件就是 codemirror 了，也是很多在线工具都使用的，我这里也不例外。
复制的话其实是可以使用 npm 包的，但是之前在写其他项目的时候，看到封装过一个 copyToClipboard 的功能，这里也就是将其拷贝置 utils 下供外部使用。
interface Options {
target?: HTMLElement
}
export function copyTextToClipboard(input: string, { target = document.body }: Options = {}) {
const element = document.createElement('textarea')
const previouslyFocusedElement = document.activeElement
element.value = input
element.setAttribute('readonly', '')
;(element.style as any).contain = 'strict'
element.style.position = 'absolute'
element.style.left = '-9999px'
element.style.fontSize = '12pt'
const selection = document.getSelection()
let originalRange
if (selection && selection.rangeCount > 0) {
originalRange = selection.getRangeAt(0)
}
target.append(element)
element.select()
element.selectionStart = 0
element.selectionEnd = input.length
let isSuccess = false
try {
isSuccess = document.execCommand('copy')
} catch (e: any) {
throw new Error(e)
}
element.remove()
if (originalRange && selection) {
selection.removeAllRanges()
selection.addRange(originalRange)
}
if (previouslyFocusedElement) {
;(previouslyFocusedElement as HTMLElement).focus()
}
return isSuccess
}
主要使用浏览器中的document.execCommand('copy')
在需要这个需求的时候，我一开始是懵的，因为之前我是没有写过原生的浏览器下载事件，都是使用外有已经封装好的的接口直接调用即可，于是这次我也是毫不意外的通过搜索引擎找到了个复制的代码
type BlobPart = BufferSource | Blob | string
export function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
const blobData = typeof bom !== 'undefined' ? [bom, data] : [data]
const blob = new Blob(blobData, { type: mime || 'application/octet-stream' })
const blobURL = window.URL.createObjectURL(blob)
const tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = blobURL
tempLink.setAttribute('download', filename)
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)
window.URL.revokeObjectURL(blobURL)
}
原理的话是创建Blob对象（类文件对象），将数据写入，然后创建一个 a 标签（隐藏任何样式），然后并点击创建后的 a 标签，最终移除 a 标签，已达到类似点击下载按钮来下载文件的目的。
我一开始实现这个功能是想使用自定义 hooks 的，但是在我编写的过程中，发现切换主题的组件与 codemirror 展示的组件，并不属于在一个组件内。也就是说，我如果写了个 useTheme（实际上我也真写了），我相当于在这两个组件内都使用了独立的状态，互不影响，也就是我点击了切换主题的按钮，但影响不到展示组件的代码。也算是加深了我对 hooks 的理解。
然后我就在想 Vue 的话是如何实现主题切换的，然后翻看了一些 vue 相关的代码，不出所料，使用到全局状态管理，也就是 Store。react 状态管理有 redux，还有官方提供的 useReducer，但我感觉都太繁琐了，于是我另寻其路。
我博客不是就是用 React 写的吗，我直接看源码是如何实现的，发现使用到了 React 的 useContext，也就是接下来我所要写的。
首先要明确的是，theme 的状态应该是放在全局配置或者说最顶层的组件（当做父组件），然后子组件接收父组件的相关数据进行重新渲染组件。如果只是父子两层之间的关系还相对简单些，直接通过 props 传参即可，但是对于大部分组件关系，基本都是祖孙级别的关系，所以也就有了 Context。
并且 官方文档 中也是用主题切换作为 context 作为演示例子。而对于应用程序中许多组件都需要的属性，Context 无法是一个很好的选择。
首先我创建了一个 Context
import { createContext } from 'react'
export const ThemeContext = createContext<any>({})
然后在顶层组件中使用（Demo 仅作为演示），其中 value 需要是需要传入给子孙组件所要使用的状态或函数，比方这里 theme 和 toggleTheme。
import { ThemeContext } from '../contexts/theme-context'
;<ThemeContext.Provider value={{ theme, toggleTheme }}>
<Demo></Demo>
</ThemeContext.Provider>
在子孙组件的话就可以使用 useContext(ThemeContext) 来获取父级传入的数据，在这里也就是 { theme, toggleTheme }
import { ThemeContext } from '../contexts/theme-context'
export default function SwitchTheme() {
const { theme, toggleTheme } = useContext(ThemeContext)
// ...
}
接着就是切换主题的按钮点击，然后更改 theme，就会渲染对应的组件，至此切换主题的功能也就完成了
在使用 mui 的 Tabs 组件库时，来回切换 Tab 会导致上一个页面的组件重新渲染，状态返回初始状态。这肯定不是我所希望的，由于我之前又有接触过 Vue，所以自然而然就联想到 keep-alive，然后我就去搜索 react 的 keep-alive 解决方案，找到了个react-activation，并解决了的需求。
想做到的目的就是能把 Demo 组件缓存起来，像下面这样的写法
<KeepAlive>
<Demo></Demo>
</KeepAlive>
由于我使用的是 React17+，所以需要使用放置<AliveScope>外层，也就是上面的代码要改写成
<AliveScope>
<KeepAlive>
<Demo></Demo>
</KeepAlive>
</AliveScope>
不过要注意: 当与react-router或react-redux一起使用时，你需要将<AliveScope>放在<Router>或<Provider>内
这些在官方文档中也有介绍，这里就不细说了。
由于使用的 create-react-app，就使用到了 Webpack5，但是 Webpack5 是不支持 Node 自带的一些库，例如我所需要使用到的 Buffer，所以就需要 npm run eject 把 webpack 配置暴露出来。
如果是要配置 Node 相关库是有一个插件 NodePolyfillPlugin，将会把 Node 的系统库的函数注册到 webpack 中供前端使用，相对简单，而且方便。但相对打包体积肯定有所提升，这里只是提提。
在 webpack5 官方有个测试 兼容性 的，就有提到 Buffer: false
module.exports = {
// ...
node: {
Buffer: false,
process: false,
},
}
要解决 Buffer 也比较简单，直接通过如下代码即可
module.exports = {
// ...
plugins: {
...new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
},
}
也有可能需要在 resolve 中设置下 fallback
resolve: {
fallback: {
buffer: require.resolve('buffer')
}
}
实际编写过程其实并不轻松，但是好在很多坑与开发难点都有前人的遇到，所以搜索就已经帮我解决了很多问题。不过这期间也是不断的尝试，编译，最终实现结果是符合我一开始的期望的。
不过目前所编写的几个功能主要为我目前写协议复现所需要的，而对于大部分像时间戳，正则，加解密相关这些外面都有现成的，何必又要花费时间去造轮子呢。
后续的话应该还是会添加一些额外的功能，例如搞个代码框的配置页面，可供选择语言，代码框的高度，可视化表格的增删改。同时对代码进行一定的重构，对一些组件复用，已经完善持久化的配置。
最主要还是希望能成为我日常开发中常用的在线工具类，而不是简简单单 Demo 学习。
", "url": "https://kuizuo.cn/online-tools", "title": "在线工具", "summary": "基于 React 与 MUI 组件库搭建在线工具网站", "date_modified": "2022-03-16T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "project", "react", "tool" ] }, { "id": "http-config-client-ssl-certificate", "content_html": "在学习安卓逆向的时候，遇到一个 APP，服务端检测请求的 SSL 证书，需要提交 SSL 证书上去才能正常发送请求。而在开启抓包和协议复现的时候，请求是能正常发出去，但是服务器会返回 400 错误。于是便有了这篇文章来记录下。
由于是服务端效验客户端发送的证书，所以使用代理服务器（FD，Charles 等）抓包是会替换本地证书，当服务器效验客户端发送的证书与服务器内的证书不一致，那么就直接返回 400 错误，实际上请求还是能够发送出去，只是被服务器给拒绝了。俗称双向认证
所以解决办法就是在请求的时候，将正确的证书也一同发送过去，这样服务端效验时就会将正常的响应结果返回给客户端，也就是配置自定义证书。
APP 例子：隐约
具体如何拉取证书，就是安卓逆向相关的部分了，这里我也只提供证书文件，不提供 app。
贴上下载地址及密码
证书: https://img.kuizuo.cn/cert.p12
密码: xinghekeji888.x
SSL 在线工具-在线证书格式转换-证书在线合并-p12、pfx、jks 证书在线合成解析-SSLeye 官网
也可使用 OpenSSL 工具来进行转化证书
const axios = require('axios').default
const fs = require('fs')
const https = require('https')
axios
.post(
`https://app.yyueapp.com/api/passLogin`,
{
mobile: '15212345678',
password: 'a123456',
},
{
httpsAgent: new https.Agent({
cert: fs.readFileSync('./cert.cer'),
key: fs.readFileSync('./cert.key'),
// pfx: fs.readFileSync('./cert.p12'),
// passphrase: 'xinghekeji888.x,
}),
},
)
.then((res) => {
console.log(res.data)
})
.catch((error) => {
console.log(error.response.data)
})
如果没有配置 httpsAgent，也就是没有配置证书，那么返回 400 错误 400 No required SSL certificate was sent。
配置成功将会得到正确的响应结果
{ code: 998, msg: '系统维护中...', data: null }
requests 不支持 p12 格式的证书，所以需要使用其他的证书格式，如下
import requests
r = requests.post('https://app.yyueapp.com/api/passLogin', data={
'mobile': '15212345678', 'password': 'a123456'}, cert=('./cert.cer', './cert.key'))
print(r.status_code)
print(r.text)
博客正准备写一个项目展示的功能，其中 Docusaurus 中的案例展示就很适合改写成项目展示页面，然后无意间刷到我当时搭建博客所参考的博主峰华的博客也在展示页面。
![\"image-20220124214558772\"](\"https://img.kuizuo.cn/20220124214558.png\")
于是脑海中就想：要不然提交一下我的博客试试看？然后便有了下文的故事
当时具体提交的Pull requests
展示页面中有个很明显的按钮 Please add your site，点击后就跳转到 Github 的编辑页面了，不过浏览器不方便操作代码，所以我就 clone 了项目，根据提示，修改了两份代码（一个是添加背景图片，一个是添加博客的 json 数据）提交了 PR（Pull requests）。
![\"image-20220124215841410\"](\"https://img.kuizuo.cn/20220124215841.png\")
一开始我是怀着尝试的态度去提交的，所以我不小心将代码格式化（也就是第 10 行 sortBy 两边的空格，原本代码风格是没有的），直到我已经提交上去的时候才发现 😂，甚至提交的时候我连 description 都没写（所以我当时真是怀着尝试的态度去提交的）。虽然这是我第二次提交 PR，但也告诉我以后 commit 提交，一定一定一定要比对前后代码变动的地方，不然就会像上面这样。
提交完之后，很快就有机器人给我回复
![\"image-20220124220731250\"](\"https://img.kuizuo.cn/20220124220731.png\")
大致的意思：首先很感谢你为社区提交请求，但是呢，为了合并你的代码，我们必须要贡献者签署我们的贡献者许可协议
很显然我并没有签署过，于是它就把解决方案也告诉了我，叫我访问https://code.facebook.com/cla，去签署CLA签名（贡献者许可协议），像下面这样，点击Submit就可以提交。
![\"image-20220124221203894\"](\"https://img.kuizuo.cn/20220124221203.png\")
当时我看签署完毕后，返回 PR 页面还是提交要签署，所以我打算关掉这个 pr，准备重新提交一个新的 PR。（这种做法是真的愚蠢，尤其是在一个大型的开源项目）
就正当我关闭 pr 的时候，这时 Reviewers（审核人）给我回复了一条信息
![\"image-20220124221555614\"](\"https://img.kuizuo.cn/20220124221555.png\")
Hey, please don't close your PR if just because of the CLA. The bot will update your status soon after you signed it.
意思就是：请不要在签署 CLA 签名前关闭 PR，机器人会自动在你签署后自动为你更改状态
然后我就灰溜溜的重新开放 PR，那时候感觉我是真小白，太尴尬了 😅。
然后等待了差不多有半个小时左右，机器人给了回复
![\"image-20220124222432479\"](\"https://img.kuizuo.cn/20220124222432.png\")
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!
意思：感谢您签署我们的贡献者许可协议。我们现在可以接受您的代码为这个(和任何)元开放源码项目。谢谢!
然后审核人为我的错误 commit 标题进行了修改docs: Add Kuizuo's Personal Website to showcase page docs: add Kuizuo's Personal Website to showcase，第一个单词 Add 不应该首字母大写，不符合规范。
然后为我提交的代码做了一些小调整 minor tweaks，也就是上面所提到的 sortBy 空格，然后为我提供的展示图裁剪成标准尺寸。
![\"image-20220124222739483\"](\"https://img.kuizuo.cn/20220124222739.png\")
审核人批准了我这两项修改，然后等待系统审核，具体审核的图我当时没截，现在没显示了，把已提交后的代码重新部署到 preview(预览)下，整个过程大约 5 分钟这样，接着审核人对我回复了一句 Great site, thanks! (很好的网站,谢谢)，然后这个 PR 状态就变成了 merged(合并)状态。
然后我犹豫了几分钟，不知道该怎么回复了，加上我英文表达不行，所以我原本中文是
谢谢,希望 Docusaurus 做的更好,一起努力 用软件翻译后 Thank you, Hope Docusaurus can do better. Let's go
![\"image-20220124222926032\"](\"https://img.kuizuo.cn/20220124222926.png\")
虽然才过去两个小时，但是我现在回想起来都感觉贼丢人。
首先，我这个回复不是指定为他回复，而是相当于全体评论，贼不礼貌，然后这个蹩脚的英文翻译，我真像把 Let‘s go 改成 Let's work together，就算改了，感觉这个回复也太不礼貌了，这就已经不是英文表达能力，而是中文的表达能力了。
总之最后的结果是好的，我提交的 PR 已经成功合并到了 main 分支上，并且在下一个发布的版本中，案例展示中将会有我的博客显示在上面，现在访问preview 网站，搜索 kuizuo 也能看到（B 格瞬间就上来了）
![\"image-20220124223506489\"](\"https://img.kuizuo.cn/20220124223506.png\")
整个过程下来，审核员给我的印象太好了，我这小白式的 PR，现在回看下来都感觉太丢人了。然后我一看审核员的Github 账号，好家伙，竟然是一名在中国上海的高中生！还是团队的核心人员！太牛了！
![\"image-20220124225625869\"](\"https://img.kuizuo.cn/20220124225625.png\")
![\"image-20220124225830338\"](\"https://img.kuizuo.cn/20220124225830.png\")
![\"image-20220124231207662\"](\"https://img.kuizuo.cn/20220124231207.png\")
很难想象的到一位高中生竟能为默默的为开源项目做出贡献，而我的这次 PR 能提交成功，也与这位热心的国内学生有很大关系。（再次对我一开始报着尝试提交 PR 的态度表示抱歉）
但又回到我这边，这次提交 PR 的经过也让我学到了很多，commit 时一定要仔细对比更改前后的代码，提交的 commit 标题的规范，不必要的 closed，以及最重要的开源精神，让我看到一个实实在在开源者的样子，也是我梦寐以求的样子。
最后也祝 Docusaurus 能越做越好，也感谢这些默默为开源做出贡献的人们，正因为有你们世界才会变得更好。
", "url": "https://kuizuo.cn/github-pr-experience", "title": "记一次Github提交PR过程", "summary": "故事起因", "date_modified": "2022-01-25T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "随笔", "github", "blog" ] }, { "id": "js-binary-data", "content_html": "在我编写 js 代码中，关于处理二进制数据了解甚少，好像都是用数组表示，但是成员又很模糊。尤其是在遇到一些 http 的 post 请求或 websocket，发送二进制数据（字节）时，还有一些算法的翻译，数据的转化，协议的复现，都需要不断的从网络上查阅，并未系统的从文档教程中入手。于是写这篇的目的就是为了加固对二进制数据的理解，以及 JavaScript 中如何操作二进制数据的。
其他语言 java，易所表示的是字节数组，字节集，而在 js 中则称二进制数组（都是用来表示二进制数据的），要注意的是这里的二进制数组并不是真正的数组，而是类似数组的对象。（后文会提到）
存储二进制数据用到的就是ArrayBuffer，但 ArrayBuffer不能直接读写，只能存储，需要通过视图来进行操作。
例如存储二进制数据的则是 ArrayBuffer 对象，例如请求图片时，就会指定参数 responseType: 'arraybuffer'表示返回二进制数据，也就是图片数据。
ArrayBuffer也是一个构造函数，可以分配一段可以存放数据的连续内存区域。
const buffer = new ArrayBuffer(8)
ArrayBuffer {
[Uint8Contents]: <00 00 00 00 00 00 00 00>,
byteLength: 8
}
这里的 buffer.byteLength 属性用于获取字节长度（返回 32），直接打印 buf 的结果
其中还有一个slice方法，允许将内存区域的一部分，拷贝生成一个新的ArrayBuffer对象。下面代码拷贝buffer对象的前 3 个字节（从 0 开始，到第 3 个字节前面结束）
const buffer = new ArrayBuffer(8)
const newBuffer = buffer.slice(0, 3)
除了slice方法，ArrayBuffer对象不提供任何直接读写内存的方法，只允许在其上方建立视图，然后通过视图读写。
不过只有空数据可没用，肯定需要操作ArrayBuffer，也就要介绍下TypedArray。
ArrayBuffer对象作为内存区域，可以存放多种类型的数据。同一段内存，不同数据有不同的解读方式，这就叫做“视图”（view），ArrayBuffer有两种视图，一种是TypedArray视图，另一种是DataView视图。这里只介绍TypedArray
TypedArray视图一共包括 9 种类型，每一种视图都是一种构造函数通过 9 个构造函数，可以生成 9 种数据格式的视图，比如Uint8Array（无符号 8 位整数，表示一个字节）数组视图，具体如下
| 数据类型 | 字节长度 | 含义 | 对应的 C 语言类型 |
|---|---|---|---|
| Int8 | 1 | 8 位带符号整数 | signed char |
| Uint8 | 1 | 8 位不带符号整数 | unsigned char |
| Uint8C | 1 | 8 位不带符号整数（自动过滤溢出） | unsigned char |
| Int16 | 2 | 16 位带符号整数 | short |
| Uint16 | 2 | 16 位不带符号整数 | unsigned short |
| Int32 | 4 | 32 位带符号整数 | int |
| Uint32 | 4 | 32 位不带符号的整数 | unsigned int |
| Float32 | 4 | 32 位浮点数 | float |
| Float64 | 8 | 64 位浮点数 | double |
视图的构造函数可以接受三个参数：
ArrayBuffer对象。演示
不妨给它写入字符串 abc，对应的十进制 ASCII 码为 97,98,99，由于 ASCII 码占用一个字节存储，所以这里选择 Uint8Array 用于表示
const buffer = new ArrayBuffer(8);
const buf = new Uint8Array(buffer);
buf.set([97, 98, 99]);
console.log(buf.buffer);
// 输出结果
ArrayBuffer {
[Uint8Contents]: <61 62 63 00 00 00 00 00>,
byteLength: 8
}
可以看到 abc 确实存入了，并用十六进制的形式表示，为了验证，这里使用 NodeJS 中的 Buffer 来演示，当然也可以使用原生的TextEncoder
Buffer.from(buf.buffer).toString() // abc
你也可以直接通过数组下标的形式，来访问数据，如buf[0]返回的就是 97，但 buf 又有 length 与其他的属性方法，这种数组就统称为类数组。
buf 还有一些方法，无非就是操作字节复制，偏移就不做过多介绍与演示了，具体可查看文档
buffer 缓冲区 | Node.js API 文档 (nodejs.cn)
在 Nodejs 中有专门的操作ArrayBuffer 的对象Buffer，Buffer 类是 JavaScript Uint8Array 类的子类
所以Uint8Array有的属性方法 Buffer 也有，不过 Nodejs 对 Buffer 增加了额外的方法供开发者调用。
上面的代码 Buffer.from(buf.buffer).toString()，也就是将ArrayBuffer 数据转为 utf8 编码文本。其中 toString 还能转为以下编码（toString 默认 utf8）
type BufferEncoding = 'ascii' | 'utf8' | 'utf-8' | 'utf16le' | 'ucs2' | 'ucs-2' | 'base64' | 'base64url' | 'latin1' | 'binary' | 'hex'
不过 Nodejs 不支持 gbk 编码，所以需要使用第三方包，如 iconv-lite
Buffer.from()有多个方法实现，第一个参数可以传入 ArrayBuffer | Uint8Array | string，如果是 string 类型，第二个参数为编码格式，例如实现编码转化
// base64
Buffer.from(str).toString('base64') // 将str转base64编码
Buffer.from(str, 'base64').toString() // 将base64编码转str
// hex
Buffer.from(str).toString('hex') // 将str转hex编码
Buffer.from(str, 'hex').toString() // 将hex编码转str
封装 Base64 编码与解码
const Base64 = {
encode: (str) => {
return Buffer.from(str).toString('base64')
},
decode: (str) => {
return Buffer.from(str, 'base64').toString()
},
}
将会得到 buf 的视图类型，与二进制数组。
// let buf = Buffer.from('abc');
let buf = Buffer.from([97, 98, 99])
console.log(buf) // <Buffer 61 62 63>
buf.toJSON() // { type: 'Buffer', data: [ 97, 98, 99 ] }
// 效果等同于 JSON.stringify(buf);
buf.values() // [ 97, 98, 99 ] 可以直接得到二进制数据
官方文档: buffer 缓冲区 | Node.js API 文档 (nodejs.cn)
上述对这两者进行了介绍，这里总结一下
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区，是一个字节数组，可读但不可直接写。
Buffer 是 Node.JS 中用于操作 ArrayBuffer 的视图，继承自Uint8Array，是 TypedArray 的一种。
通俗点来说（对我而言），ArrayBuffer相当于其他语言的字节数组、字节集，但不可写，而Buffer 对象则是操作ArrayBuffer的。
与二进制数据有关的地方就有应用
axios
.get('图片url地址', {
responseType: 'arraybuffer',
})
.then((res) => {
let base64Img = res.data.toString('base64')
console.log(base64Img)
})
在 axios 请求图片数据的时候，指定responseType: 'arraybuffer'，返回的 data 就是一个 buffer 对象。（当时写成这样的代码 Buffer.from(res.data).buffer，不过不妨碍）
axios.post('http://example.com', Buffer.from('abc')).then((res) => {
console.log(res.data)
})
let socket = new WebSocket('ws://127.0.0.1:8081')
socket.binaryType = 'arraybuffer'
// Wait until socket is open
socket.addEventListener('open', function (event) {
// Send binary data
const typedArray = new Uint8Array(4)
socket.send(typedArray.buffer)
})
// Receive binary data
socket.addEventListener('message', function (event) {
const arrayBuffer = event.data
// ···
})
等等。。。
", "url": "https://kuizuo.cn/js-binary-data", "title": "JavaScript中的二进制数据", "summary": "在我编写 js 代码中，关于处理二进制数据了解甚少，好像都是用数组表示，但是成员又很模糊。尤其是在遇到一些 http 的 post 请求或 websocket，发送二进制数据（字节）时，还有一些算法的翻译，数据的转化，协议的复现，都需要不断的从网络上查阅，并未系统的从文档教程中入手。于是写这篇的目的就是为了加固对二进制数据的理解，以及 JavaScript 中如何操作二进制数据的。", "date_modified": "2022-01-24T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "javascript" ] }, { "id": "docusaurus-gitalk-plugin", "content_html": "
之前使用 vuepress 的时候，使用的评论系统是Valine，可是匿名用户也能直接评论，虽说会过滤垃圾信息，但是后台查看评论与通知总感觉没有那么实在。
然后换到了 docusaurus，并没有内置评论相关的，原本是打算自己写一个评论系统，MongoDB 存储评论数据相对方便些。然后这一拖就是拖到了过年前。。。无意间发现有一个插件Gitalk，基于 Github Issue 的，而我平常又经常刷 github，加上需要 github 账号才能评论，所以就使用Gitalk 来作为博客的评论（注：Gitalk 是基于 react 编写的）。
首先需要 github 账号，创建一个仓库用于存放评论，由于我的博客是同步上传到github上，所以就无需新建仓库
默认开启，可在 Settings -> Features -> Issues 中设置
![\"image-20220122141447919\"](\"https://img.kuizuo.cn/20220122141447.png\")
点击此处创建或在 github 右上角路径 settings -> Developer settings -> OAuth Apps
![\"image-20220121225059192\"](\"https://img.kuizuo.cn/20220121225106.png\")
创建成功后，就可以获取到 Client ID 和 Client Secret 了，保存下来。
![\"image-20220122130221871\"](\"https://img.kuizuo.cn/20220122130222.png\")
<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css\" />
<script src=\"https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js\"></script>
<!-- or -->
<link rel=\"stylesheet\" href=\"https://unpkg.com/gitalk/dist/gitalk.css\" />
<script src=\"https://unpkg.com/gitalk/dist/gitalk.min.js\"></script>
npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
<div id=\"gitalk-container\"></div>
用下面的 Javascript 代码来生成 gitalk 插件：
const gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id: location.pathname, // Ensure uniqueness and length less than 50
distractionFreeMode: false, // Facebook-like distraction free mode
})
gitalk.render('gitalk-container')
导入 Gitalk 组件与样式
import 'gitalk/dist/gitalk.css'
import GitalkComponent from 'gitalk/dist/gitalk-component'
使用组件与配置参数
<GitalkComponent
options={{
clientID: '...',
// ...
// options below
}}
/>
我的配置
const options = {
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'blog',
owner: 'kuizuo',
admin: ['kuizuo'],
id: title,
title: title,
labels: labels,
distractionFreeMode: false,
}
具体参数gitalk
options 有个选项 repo，填写的是仓库名称，不是链接，像上面我所填写的就是blog，而不是填写https://github.com/kuizuo/blog
这里的 xxxxx 就是选项 admin 的内容，首次载入文章的话需要用管理员账号登录初始化一下（也就是新建一个 issues），否则其他人访问也将会提示该信息。
目前暂时没找到有效办法一键加载所有博客的 issues，只要用登录 github 的管理员账号去访问每一篇博客。
其中在第 3 步的 Authorization callback URL 地址一定要填写成现在博客线上环境 https://kuizuo.cn ，否则也无法正常使用
原因是 id 参数不能超过 50 个字符，但是默认是 location.href，有可能会导致长度超过。所以我的做法是 id: title，同时访问页面的时候，会自动为仓库创建一个 issue，标题为文章的标题。
也有可能是请求过于频繁，触发了 Github 的限流机制，需要等待几分钟后恢复。
插件中会使用到浏览器的 window 对象，开发时正常，但是编译就会报错（提示 window is not defined），这边引用了 docusaurus 的BrowserOnly，将代码封装成如下便可正常编译
<BrowserOnly fallback={<div></div>}>{() => <GitalkComponent options={options} />}</BrowserOnly>
通过 github api 还可以获取 issues 列表
访问 https://api.github.com/repos/kuizuo/blog/issues，返回结果如下
[
{
\"url\": \"https://api.github.com/repos/kuizuo/blog/issues/24\",
\"repository_url\": \"https://api.github.com/repos/kuizuo/blog\",
\"labels_url\": \"https://api.github.com/repos/kuizuo/blog/issues/24/labels{/name}\",
\"comments_url\": \"https://api.github.com/repos/kuizuo/blog/issues/24/comments\",
\"events_url\": \"https://api.github.com/repos/kuizuo/blog/issues/24/events\",
\"html_url\": \"https://github.com/kuizuo/blog/issues/24\",
\"id\": 1111300101,
\"node_id\": \"I_kwDOF7NJDM5CPRgF\",
\"number\": 24,
\"title\": \"Docusaurus配置Gitalk评论插件\",
\"user\": {
\"login\": \"kuizuo\",
\"id\": 61005888,
\"node_id\": \"MDQ6VXNlcjYxMDA1ODg4\",
\"avatar_url\": \"https://avatars.githubusercontent.com/u/61005888?v=4\",
\"gravatar_id\": \"\",
\"url\": \"https://api.github.com/users/kuizuo\",
\"html_url\": \"https://github.com/kuizuo\",
\"followers_url\": \"https://api.github.com/users/kuizuo/followers\",
\"following_url\": \"https://api.github.com/users/kuizuo/following{/other_user}\",
\"gists_url\": \"https://api.github.com/users/kuizuo/gists{/gist_id}\",
\"starred_url\": \"https://api.github.com/users/kuizuo/starred{/owner}{/repo}\",
\"subscriptions_url\": \"https://api.github.com/users/kuizuo/subscriptions\",
\"organizations_url\": \"https://api.github.com/users/kuizuo/orgs\",
\"repos_url\": \"https://api.github.com/users/kuizuo/repos\",
\"events_url\": \"https://api.github.com/users/kuizuo/events{/privacy}\",
\"received_events_url\": \"https://api.github.com/users/kuizuo/received_events\",
\"type\": \"User\",
\"site_admin\": false
},
\"labels\": [
{
\"id\": 3754161267,
\"node_id\": \"LA_kwDOF7NJDM7fw_Rz\",
\"url\": \"https://api.github.com/repos/kuizuo/blog/labels/Gitalk\",
\"name\": \"Gitalk\",
\"color\": \"ededed\",
\"default\": false,
\"description\": null
},
{
\"id\": 3754411279,
\"node_id\": \"LA_kwDOF7NJDM7fx8UP\",
\"url\": \"https://api.github.com/repos/kuizuo/blog/labels/blog\",
\"name\": \"blog\",
\"color\": \"ededed\",
\"default\": false,
\"description\": null
},
{
\"id\": 3754517867,
\"node_id\": \"LA_kwDOF7NJDM7fyWVr\",
\"url\": \"https://api.github.com/repos/kuizuo/blog/labels/Docusaurus%E9%85%8D%E7%BD%AEGitalk%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6\",
\"name\": \"Docusaurus配置Gitalk评论插件\",
\"color\": \"ededed\",
\"default\": false,
\"description\": null
}
],
\"state\": \"open\",
\"locked\": false,
\"assignee\": null,
\"assignees\": [],
\"milestone\": null,
\"comments\": 0,
\"created_at\": \"2022-01-22T06:47:34Z\",
\"updated_at\": \"2022-01-22T06:47:34Z\",
\"closed_at\": null,
\"author_association\": \"OWNER\",
\"active_lock_reason\": null,
\"body\": \"https://kuizuo.cn/develop/Docusaurus配置Gitalk评论插件\\n前言\",
\"reactions\": {
\"url\": \"https://api.github.com/repos/kuizuo/blog/issues/24/reactions\",
\"total_count\": 0,
\"+1\": 0,
\"-1\": 0,
\"laugh\": 0,
\"hooray\": 0,
\"confused\": 0,
\"heart\": 0,
\"rocket\": 0,
\"eyes\": 0
},
\"timeline_url\": \"https://api.github.com/repos/kuizuo/blog/issues/24/timeline\",
\"performed_via_github_app\": null
}
]
相关 api 文档 => github docs
也许后续可能考虑使用octokit.js来编写一个后台查询与删除的管理页。
![\"image-20220122164034147\"](\"https://img.kuizuo.cn/20220122164034.png\")
![\"image-20220122163957435\"](\"https://img.kuizuo.cn/20220122163957.png\")
pom.xml 中在加入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
<scope>true</scope>
</dependency>
然后再<build>下添加如下依赖。
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork>
</configuration>
</plugin>
</plugins>
</build>
（1）打开设置勾选自动构建项目
![\"image-20220506130419248\"](\"https://img.kuizuo.cn/image-20220506130419248.png\")
（2）高级设置中勾选自动 make，老版 IDEA 需要ctrl + shift + alt + /，选择注册表，勾上 Compiler autoMake allow when app running，但新版中移到高级设置中。
![\"image-20220506130533312\"](\"https://img.kuizuo.cn/image-20220506130533312.png\")
接着启动项目，修改文件即可自动热加载，无需手动重新运行。
", "url": "https://kuizuo.cn/springboot-hot-update", "title": "SpringBoot热更新", "summary": "步骤一", "date_modified": "2022-01-10T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "java", "springboot" ] }, { "id": "why-use-pnpm", "content_html": "在一个 node 项目中免不了 node_modules 依赖，假设项目 A 用的了 Express 依赖，同时项目 B 也用到了 Express，并且两者所存放的位置不同，那么磁盘空间将会多出两份 Express 依赖，假设有 100 个项目，那么将会有有 100 倍的空间被浪费。这些空间还可以用磁盘空间来弥补，但是这 100 个项目如果都使用 npm i 去下载同样版本依赖，则是实实在在耗费网络资源去下载。
pnpm 能解决以下两点问题
而这些问题是一个 node 项目中常有的。相信此时的你都有点蠢蠢欲动了，而安装也很简单
请查阅你的 node 版本与 pnpm 是否匹配 安装 | pnpm
npm install -g pnpm
pnpm add -g pnpm
此时 pnpm 就已经安装完了，与 yarn 安装一样，都感觉没安装似的。
pnpm 命令几乎与 npm 一样，设置配置的方式也与 npm 相同，这里不妨尝试通过 pnpm 去下载 express 依赖，打开 CMD，将路径改成你平时写 js 代码的地方，切记不要在 C 盘路径下，不然将会在C:\\Users\\{userDir}\\.pnpm-store\\v3去管理你的所有依赖，至于为什么后文会说，这里选择 F 盘进行安装，安装结果如下。
![\"image-20220108040813223\"](\"https://img.kuizuo.cn/20220108040813.png\")
不难看出，它将依赖存放至F:\\.pnpm-store\\v3下，但此时查看项目目录的 node_modules 文件夹
![\"image-20220108041030618\"](\"https://img.kuizuo.cn/20220108041030.png\")
发现express与mime-types的右侧带了回车符，而这两个文件夹实际上是 window 的硬链接，而读取的就是存放在F:\\.pnpm-store\\v3下的依赖。虽然查看 node_modules 属性会发现显示的空间貌似和原始的链接所占用的空间一样，但其实是同一个位置，官方中常用问题中也有介绍到 常见问题 | pnpm，所以真不用担心磁盘空间的问题。
这时候去查看 F:\\.pnpm-store\\v3\\files 会发现都是一堆数字与字母命名的文件夹，而依赖都存放至这些杂乱无章的文件名之中。同时.pnpm-store 是根据你所在驱动器（这里是 F 盘）下创建的，可以通过 pnpm store path查看，也就是上文为什么说不要在 C 盘路径（包括桌面）去安装依赖了，所以不用担心 C 盘空间会越来越小（如果你的代码是在 C 盘编写的话，那当我没说）。
不过还是要提醒一句，即便 pnpm 能解决磁盘问题，但还是存在一定的兼容性，如果一个项目是用 npm 或者 yarn 进行构建的，使用 pnpm 是绝对免不了一些问题，小问题暂时想不到，大问题无法运行，所以请三思再考虑对已有项目是否尝试升级 pnpm。
但我认为还是有必要尝试尝试下，不尝试，怎么能发现新大陆呢。
", "url": "https://kuizuo.cn/why-use-pnpm", "title": "为什么使用pnpm", "summary": "pnpm 文档", "date_modified": "2022-01-08T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "node", "pnpm" ] }, { "id": "springboot-project-structure", "content_html": "参考链接：关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn? - 掘金 (juejin.cn)
演示代码地址：kuizuo/spring-boot-demo (github.com)
![](\"https://img.kuizuo.cn/20220108011921.png\")
controller 目录下对应的也就是控制器，用于接收用户的请求（get，post 等），如下面代码
@RestController
@RequestMapping(\"/user\")
public class UserController {
@Resource
private UserService userService;
@GetMapping(\"list\")
public List<User> list() {
return userService.findAll();
}
}
用户请求http://127.0.0.1:8080/user/list 将会调用 userService.findAll 方法，当然这个方法事先定义好，用于获取所有用户。
这里数据库连接方式以 JPA（一个 ORM 框架）为例，可以安装一个 IDEA 插件 JPA Buddy 新建文件时可以直接创建 Entity(实体)或 Repository(仓库)
![\"image-20220506115207717\"](\"https://img.kuizuo.cn/image-20220506115207717.png\")
在 domain 目录下创建实体类，大致如下（lombok 因人而异选择使用，相对不展示 get 与 set 会好一些）
import lombok.Getter;
import lombok.Setter;
import javax.persistence.*;
@Entity
@Getter
@Setter
@Table(name = \"user\")
public class User implements Serializable {
@Id
@GeneratedValue
@ApiModelProperty(value = \"ID\", hidden = true)
private Long id;
@Column(nullable = false, unique = true)
private String username;
@Column(nullable = false)
private String password;
@Column(nullable = false)
private String email;
}
User.java 用于定义 user 实体，在 ORM 中，数据库表中的字段都可以通过实体类中的属性来定义的，如果定义好 user 实体，并且在 resources/application.yml 中设置了spring.jpa.hibernate.ddl-auto: update 那么启动项目后，数据库将会自动创建 user 表且其表中字段自动为@Column注解的字段。
创建完实体后，还需要定义数据接口访问层 DAO，在 JPA 中则是在 repository 目录下创建。
public interface UserRepository extends JpaRepository<User, Long> , JpaSpecificationExecutor<User> {
User findByUsername(String username);
}
一般情况下该接口无需定义额外方法，如有需要还可以定义属于自己的查询语句，比如上面的 findByUsername，这时候就注入后的 userRepository 对象就可以使用userRepository.findByUsername(\"kuizuo\"); ，将会返回数据库中该用户名的数据。
@Service
public class UserService {
@Autowired
private UserRepository userRepository;
public List<User> findAll(){
return userRepository.findAll();
}
}
@Autowired 可能不建议使用字段注入，可以在类添加@RequiredArgsConstructor 注解，表明 userRepository 不为空，总之目的就是将 userRepository 注入，供服务可用。
import com.kuizuo.demo.domain.User;
import com.kuizuo.demo.repository.UserRepository;
import com.kuizuo.demo.service.UserService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
@RequiredArgsConstructor
public class UserService {
private final UserRepository userRepository;
@Override
public List<User> findAll() {
return userRepository.findAll();
}
}
接着就可以使用 userRepository 下的方法，如 userRepository.findAll命令相当于 select * from user，返回所有的用户列表。
此外 service 服务还可以有另一种写法，在 service 中添加一个 impl 目录，通过对 userService 接口进行实现的服务。\n在上面所写的 UserService 是一个类，这边将其改为一个接口，代码如下
public interface UserService {
List<User> findAll();
User findOne(Long id);
}
同时只保留 UserService 所要提供的方法，然后在 service/impl 中创建文件 UserServiceImpl.java，具体代码如下
@Service
@RequiredArgsConstructor
public class UserServiceImpl implements UserService {
private final UserRepository userRepository;
@Override
public List<User> findAll() {
return userRepository.findAll();
}
@Override
public User findOne(Long id) {
return userRepository.findById(id).orElseThrow(() -> new BadRequestException(\"用户不存在\"));
}
}
调用并无差异，对 service 进一步的封装，相对更规范些（我看外面都这么写的，所以就这么写了）。
POJO、PO、DTO、DAO、BO、VO 需要搞清楚的概念\n此外还可能对不同层的数据进行命令
PO ：DAO：DTO：dto 目录VO：vo 目录其中前两种在上文中 jpa 的例子中已经介绍了，简单介绍下后两者
DTO 经过处理后的 PO，在传输数据对象中可能增加或者减少 PO 的属性
VO 在控制层与视图层进行传输交换
对于后两者而言，可能还需要提供 Mapper 类用于数据转化，如 DTO 转 PO，PO 转 DTO。
<dependency>
<groupId>org.modelmapper</groupId>
<artifactId>modelmapper</artifactId>
<version>2.3.5</version>
</dependency>
同时在启动类下配置为一个 Bean 才能被注入使用
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
@Bean
public ModelMapper modelMapper() {
return new ModelMapper();
}
}
还是上面那个 user 实体，但是返回的数据中不需要将 user 的 password 展示出来。在 service/dto 中创建一个 UserDTO
@Getter
@Setter
public class UserDto {
private Long id;
private String username;
private String email;
}
如果要转化，通常要一个个字段转化，如下
@Override
public UserDto findOne(Long id) {
User user = userRepository.findById(id).orElseThrow(() -> new BadRequestException(\"用户不存在\"));
UserDto userDto = new UserDto();
userDto.setId(user.getId());
userDto.setUsername(user.getUsername());
userDto.setEmail(user.getEmail());
return userDto;
}
结果肯定是没问题的，但是代码写的很丑陋且不易于维护。就可以使用 modelMapper 来转化（前提已经注入）
private final ModelMapper modelMapper;
@Override
public UserDto findOne(Long id) {
User user = userRepository.findById(id).orElseThrow(() -> new BadRequestException(\"用户不存在\"));
UserDto userDto = modelMapper.map(user, UserDto.class);
return userDto;
}
不过这样使用可能还是不大规范，同时还需要手动传入对象及其 Class 对象。所以可能还会创建 service/mapstruct，然后创建 UserMapper，这里就不举例了。
此外还有个文件 resources/templates/user.html 用于返回页面，不过这些都属于模板语言的内容，就不细说了（针对前后端分离的项目而言，后端主要提供数据便可）
大致的流程便可总结为 Controller 接收请求 → 调用 service 服务 → 调用数据接口服务 dao 提供数据 → 将数据(页面)返回给用户
此外，该目录结构仅仅本人所选用的 springboot 项目结构，实际情况还需额外考虑。
回到开头，其中提供业务服务（数据）的也就是 service 所做的事情，控制接口的则是 controller，还有一个视图层 view 介绍的比较少（反正就是返回数据或页面）。其中最为复杂的也就是 service 所提供的服务，相对 controller 和 view 而言会繁琐许多。
", "url": "https://kuizuo.cn/springboot-project-structure", "title": "SpringBoot项目结构", "summary": "演示代码地址：kuizuo/spring-boot-demo (github.com)", "date_modified": "2022-01-08T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "java", "springboot", "develop" ] }, { "id": "why-i-turn-night-into-day-to-code", "content_html": "其实我很早就想写这个话题了。因为我是一个熬夜大户，经常动不动就是 3,4 点睡觉，甚至有时候是日夜颠倒的作息习惯，如同过美国时间般，在 0 点到 6 点这时间段几乎是我的 coding time。但与常人想法不同，我巴不得在保持这种作息状态。我会分以下几点来阐述我这一不正常的行为，相对于我而言的好点。
夜生活过的人应该最清楚了，那种静可以算上是幽静了，加上黑夜的承托与屏幕前的微光，如果恰好此时耳机还播放着音乐，好了，直接进入自我境界。
这种安静与图书馆的安静是根本无法相比的，图书馆可能还有走动声，而凌晨你唯独只能听见自己的脚步声（不排除有上厕所的室友，有时候可能被其吓得一跳），最主要还是黑，你的视野中除了屏幕的信息外几乎很难有其他东西去干涉你。
你问我用的什么键盘？程序员不都用静电容的键盘吗？机械键盘的声音在晚上敲怕不是给室友去世器。(tips: 室友包括我)
安静也许远远还不够，想要达到与世隔绝的地步，在互联网这个时间段最简单的办法就是断网。如果事情都与你毫不相干，那也差不多已经与这个世界说拜拜了，但在白天你还是有一定的存在感，会有一些莫名的琐事干涉你当前正在进行的状态。
我就说一个最简单的例子，假如你正在编写一个功能的时候，此时手机正好弹出一条信息（通常为广告），此时大多数人基本上就去看手机去了，意志力好一点的可能看完直接回到手头的任务上，差一点的可能就是几十分钟的短视频，也许很夸张，但确实如此。
所以我一般都会在 0~6 点开启勿扰模式（睡眠模式），但在白天却又不能错过很多重要的信息。
可能对我而言，灵感通常是在睡前（准确说是夜深时）产生的，同时脑子里想的东西也会比白天而言多，想的多自然写的东西也就多，所以也就是我为什么很多代码 Commit 与博客编写时间都是在 0~6 点这个时间，就连这篇文章也都是在夜间写的，白天实在是想不出什么点来写。
也许与静也有相关，白天普遍嘈杂的声音，说实话很难让人能静下来去冥想，但在夜晚，静确实它唯一的资本。
唯有夜深人静，才有自我深思。
在我亲身体验下来，可以毫不夸张的说，我在夜晚的工作效率可以是白天的 3，4 倍，没错就是这么恐怖。
至于原因，大概率（99%）是由上面几点导致的，所以也就是为什么我巴不得在夜深人静的时候开始 doing，导致这异于常人的作息规律。尤其在夜晚，是很难感受到时间的存在，有时候可能天亮了才知道。这时才发觉自己又熬了一个晚上。
但回想 1 小时抵 3 小时，怎么想都是赚，换做你，会考虑这样的作息吗？
不过导致这种规律的原因，与当天任务未完成，要到凌晨加班加点完成。或者是一时上头，忘记了时间的存在，手头的任务打消了睡意。久而久之，作息时间点不断延后，就导致现在现在的生物钟。
其实坏处都不用写，是个正常作息的一眼就能看出来，我也不细说了。
但往往事与愿违，上面的这种作息行为都有点压榨白天的时间，因为白天总要上学，上班，周末又不可能一次性就调整成这样的作息，所以我这种情况一般也都发生在长假期，例如寒暑假（包括这次的寒假）。但其实日常生活中大多时间还都是夜间做事，只是假期的夜间时间相对延后那么亿点。
与好处相比，除了猝死其他都还能接受。原本标题我是起为什么喜欢熬夜，但后来我并不认为我是在熬夜，只是时间相对错乱，每天睡觉的时间与正常作息并没有差别，唯一的差别估计就是天亮了我睡了，天暗了我醒了。主要还是强调作息，所以便有了这个标题。
当然我写这篇文章也不是想要倡导夜间做事有多好，每个人都有属于自己适应的时间段，比方说有些人就喜欢早晨背单词，而有些选择在睡前，道理都是同样的。我只是觉得我这种习惯比较异类，也许也有人的作息习惯和我臭味相投。
:::danger ⚠️ 非专业人士，请勿模仿！ :::
", "url": "https://kuizuo.cn/why-i-turn-night-into-day-to-code", "title": "为何我选择日夜颠倒敲代码", "summary": "其实我很早就想写这个话题了。因为我是一个熬夜大户，经常动不动就是 3,4 点睡觉，甚至有时候是日夜颠倒的作息习惯，如同过美国时间般，在 0 点到 6 点这时间段几乎是我的 coding time。但与常人想法不同，我巴不得在保持这种作息状态。我会分以下几点来阐述我这一不正常的行为，相对于我而言的好点。", "date_modified": "2022-01-03T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "随笔", "杂谈" ] }, { "id": "2021-year-end-summary", "content_html": "距离上篇记录过去了 1 年半时间，以后应该也会在每年的 12 月 31 号发布年终总结。
不过在总结的时候还是要唠嗑唠嗑，其实说实话，今年没去年那么想写年终总结，一是感觉去年过得没有前年那么充实，尤其是在学习方面；二是因为 21 年这年休学出去工作(创业)；三是感觉很多时候过于迷茫，尤其是 2021 年后半年，浪费了太多本该提升自我的时间；最后加上 2022 年 1 月闭关安卓逆向学习，所以便没有抽出时间来完善年终总结。
所以说要写年终前一定要趁早，否则将会越来越拖，这次就整整拖了半年才最终完善。平常也要时刻保持记录的习惯，这样年终总结的时候思路才清醒，看到平时记录的点滴就能一时刻地回忆起所有细节。
每次写年终总结时不时也会潸然泪下，写的时候就需要不断的回忆过去，而往往过去的某些时刻的做法会让自己觉得是不是有个更优解？常常会回忆起过去这一年所经历的往往，难以忘怀，不知从何写起。
话虽说，但总归还是学到了点东西，所以还是得总结一下，不记录可能这段经历就消逝在时间的烟海之中。
在这过去的中时间内，我已经从一位逆向爱好者的转到 Web 开发行业上。在上次的记录中我也仅仅只是搭建了一个博客，还是基于Vuepress，不过由于拖更过久，于是就索性使用Docusaurus做为未来的博客。像一些主流前端框架(Vue,React)以及 Vite 和 webpack 构建工具使用过，期间也不断尝试新的技术栈，了解其新特性，所以实现些基本的前端页面或功能倒是不成问题。
但 Web 开发可不仅仅只是由前端页面构成的，虽然对于上面静态站点的博客而言，那确实够。不过想要做到一些页面阅读量，以及评论相关的，就必须涉及到数据交互，也就是后端服务。后端服务所选用的语言可就多了，例如 nodejs、java、php、python、go 等等，虽说都有接触过(尝试搭建过后端服务与部署)，但 node 还是我的后端开发首选， JavaScript/TypeScript 是我目前用的最多的编程语言，这其中就使用到Nest.js这类 Node.js 版的 Spring 框架，同时也接触到TypeORM这个 ORM 框架，操作数据就如操作对象一样，可以不用写 sql 就能完成基本的 CRUD。同时也接触到 Java 的Spring、Php 的ThinkPHP、Go 的Gin、Python 的FastAPI，这些语言中的后端框架。同时数据库方面也学习与使用到Mysql、MongoDB、Redis、Elasticsearch，这些 SQL 与 NoSQL 数据库以及搜索和数据分析引擎。
可以肯定是的未来的编程日子里有一大段时间估计也与 Web 开发息息相关。
不过在年终这并不想介绍在学习期间所涉及的项目，因为这太啰嗦了，导致有挺大一部分时间都是在介绍，而不是在总结，违背年终总结的意义。(学习的)过程往往不是人们所在意的，人们往往在意的是所导致的结果。
也是在今天开始去看书，看文章，加固对已有技术的理解，基本上每天凌晨 0-2 点的时间段都在看技术相关的书籍。主要都是针对 JS 相关的书籍与一些其他书籍，例如
相比学习记录而言，我反倒是想总结个人的一些机遇与所做（缺点与不足），以及未来遇到这类情景能否有改进的地方。
反思我当时面对这种情况，我当时的做法是否合理？是否为最优解？是否有考虑他人感受？是否有考虑这么做未来有什么不利？是否...?
事情发生后能否做到不后悔？能否想过如何挽回？能否总结下次遇到这种情况又该如何做？...(语塞片刻) 还能有下一次吗？
很显然，在这一年当中我并没有很好的反思与总结，而是直到出现一些严重性的结果，我才会开始考虑此后果与弥补。
而休学便是我当时面对情景中的做法之一。
当时的我没有思考我休学后所会给我带来的不利，如后续学校课程的变化能否顺便完成毕业，是否想过休学后的生活，复学手续的办理，等等太多要思考的了，然而当时的我只思考到学校课程的无聊，不如出去工作闯闯，这可不比学校每天枯燥的生活来的丰富。我甚至还幻想着我休学出去，技术特别厉害，是不是回去就能直接免修课程，直接当大三来读。然而这种想法的天真程度不亚于一个三岁小孩问父母我为什么不能像鸟儿一样在天空中遨游，而现实生活是你只能在地面上爬行。
在学校跟着校方的课程，修满学分，遵守学校规定，完成日常内务卫生，方可毕业。而休学就是休学，休学期间学校只保留你的学籍，你在休学期间外面所发生的一切都与学校无关，如果在休学期结束后还未办理休学手续，则视为退学处理。
到了复学的日子，当时的早上我回到学校办理复学手续，准备重归校园生活。但由于疫情的缘故，学校是不让正常进出，需要使用学校 app 上申报进出码，在当时的我无论怎么申请都无法通过，提示找不到辅导员，因为我休学期间的又重新分配了新的辅导员，也就导致我无法申报进出码，当时的保安无论如何都要学生凭进出码才可进出学校，哪怕我把学生证，以及我休学时的手续，保安与辅导员的沟通，都不允许我进去学校。即便我家属陪同的情况下，依旧等了越 10 来分钟才方可放我进入学校。
现在回想当时如果我的家属没有陪同，也许这一天这个保安都可能不放我进去，保安估计是因为不希望家属在门口等候太久，同时也因为我复学的情况，所以破例放我进入学校，办理复学手续。
扯了这么多，也该说说休学的原因了。
当时（2020 年 12 月），我写了一个软件，并将其发布到我的 QQ 空间上供他人免费使用。有人加了我微信，简单咨询下，机缘很巧，他们的工作地点离我学校仅有 5 公里，于是线下交谈了下，问我有没有兴趣开发一个软件，并提供了一些想法和规划，当然，功能和需求与我所编写的大致。加之那段时间我已经厌烦学校所教的课程，与他们不谋而合，于是伴着辍学的心态办理休学手续，在 2021 这一整年“大展身手”。
这也就是为什么我 2021 年上半年没继续学习前端，没写博客的原因。在这期间，我基本上都是在忙着对该软件的更新维护。至于说为何要休学，明明离校那么近，可以边远程边线下办公。这主要还是与我的生活态度有关，我不希望我在做任何事情的时候，突然有其他的事情来打断我现有的阶段任务，哪怕只是一点小事，都有可能导致我难以进入工作状态。我忌惮的是在同时兼顾学业与工作，到头来很有可能两者都干得一塌糊涂（不过最主要我当时的内心是非常不情愿在上课的）。于是在学业与工作上两者无法兼顾到于是就休学专心工作。
说这么多，最主要是当时的我确实不是很想在校园里呆在，与其听着学校老师教的，不如自己出去社会闯荡一番来的实在。但最终的事实告诉我，还是出来太早了，社会的经验是不断磨练学习，而不是凭自己短暂实践与猜想的，只有切身体会才能悟出真谛。
又有点扯远了，总之简单交代下休学的缘由。而在今后的未来也会有一大堆这样的例子，而所发生过的甚至能写一天。能做的仅有是保持一颗善良的心，与权衡自己内心的真实
有很多种结果，并不是由自己所能考虑到的，哪有该如何是好。
如果之前的话，我确实不知道该如何，但现在我多半会把我所遇到的情况告诉身边的人(父母、朋友)，让他们帮我出谋划策。
他们所能给的也是建议，最终的决定权还是归咎于自己。事情的最终发展走向，也是看自己的表现。
在没休学前，我的情商可以说是低的离谱，一点人情世故都不会有的那种。遇到一些情况我都很直面的揭穿，没有留有一定的台阶给他人下，没有思考这样做的情况对长期利益下的影响。这里我有一个亲身例子。
当时在工作中有位用户 A 反馈了一个网站的充值系统的 bug，这个 bug 可以导致随意给任意用户充值任意金额（没听错，这个 bug 的严重程度就是如此。不过当然不是我写的，这部分核心是由当时的一个外包公司搞得）。用户 A 交代了这个 bug 是由其他用户 B 告诉他的，并没有指名 B 的真实身份，原本 B 是想告诉 A 一起薅这个网站的漏洞，但 A 觉得不妥，想和我们长期合作，并将这个 bug 反馈给了我们。如果换做你的话，你又该如何处理这种事情。
当时的我第一想法就是找到漏洞，并将该漏洞修复了，但是是否有想过，在 B 告诉 A 没多久后，网站就把这个漏洞修复了，这不就明摆告诉 B，A 把这个 bug 反馈给了网站所有者，并且出卖了他。到时候 A 和 B 的关系又会如何发展？A 是否又会认为这个网站很没有格局？最终不打算长期合作？
而这些显然不是我当时所能想到的，而是我的同事所告诉我的。接着再来说说最终这件事情是如何处理的。首先我们第一时间肯定不是修复这个 bug，而是尝试去查询一些异常数据，例如大额充值，余额异常，对比真实流水与网站流水，尽快的确保找到这个 B 用户。不过这个 B 用户做事非常小心，这些数据与真实的几乎难以排查。于是我们尝试给这个 bug 加个暗桩，只要有用户触发这个 bug 就会将数据上报，最终找到 B 用户，也就是在赌这个 B 用户还会利用这个漏洞来进行充值。
果不其然，这个 B 用户还是抱着侥幸心理触发了这个 bug，然后项目的负责人直接联系到 B，然后暗示 B 用户，说他最近账号的活跃度这么高，金额有点异常。人总是有做贼心虚的时候，和 B 用户说了一大堆道理啥的，也说明 B 的这种行为是直接利用网站漏洞来盈利，其行为是有可能构成犯罪的。可能是把 B 说怕了，也是让 B 自己说出自己利用过 Bug，也说自己把这个 Bug 告诉了几个同伙 A，C 等人。最终，修复了这个 Bug，并一一联系这些并将其获利的金额给补齐，也就没在追究。（但实际上是有一定的损失的，只要这个 bug 被发现，能做的也只有弥补损失）
现在一回想，如果不是 A 主动告诉我们，也许这 Bug 可能在长时间都无法发现。最终这个 A 也成为了我们网站的合伙人。如果当时直接修复这个 bug，失去的金额是有可能找的回来的，但 A 这个用户却再也成为不了合作伙伴。但要说 B 会知道是 A 说的吗，他也许不知道，因为自始至终都未提及过 A，但他们之间的关系会有影响吗？与直接修复 bug 的相比，我看微不足道。
身边有太多为人处世的方法、道理和经验。
有些人说他不想拘泥于生活的小节，想活得无拘无束。然而绝大多数情况下是不可能的，就像上面所举的例子而言，很多小节就有很大程度决定事情最终的发展。
人活着务必要懂的人情世故，合理的为人处世往往会名利兼收，而不是狼狈不堪。
人在外面，要尽可能保持低调，不要展现自己过多的储备与能力。
就当我而言，我复学回学校正常上课的期间，很多学校老师所教的与所问的我都悉知，但我并不会第一时间回答，甚至是不回答。因为我知道如果我一旦回答，就会显得我很专业，他人会认为我的知识面比较广，可能就会来问我问题，交流技术。这本质是好的，一是能给同学一个相对好的印象，二是对班级同学学习氛围都有一定影响。但如果我不回答，对我有害吗？并不会。但回答就有优吗？也不见得。因为随着越来越多人询问，就可能会导致本该属于我的时间，却因为这些问答所耽搁。
至于是否回答与导致的结果，就需要权衡自身当下的言语行为是否对你有利，就比如对于新室友而言，我反倒第一时间说明自己有一定的技术水平，也在外面工作过，并给他们展示一些个人项目。因为我知道他们身边有个大佬，一些技术问题就有个大腿可抱，对于人际关系与求人办事来说都是对我非常有利。
不要泄露自身的“底”，这里的“底”对于上面的例子就是技术而言，而实际生活中，“底”有可能财富，背景，智慧等等。要知道社会处处是勾心斗角，越是让他人知道你的情况，往往是对自己不利。即便此刻的他对你所述的并无兴趣，但当他需要的时候，第一时间想到的就很有可能就是你。
“财不外露”是古人总结的经验教训，低调就是最好的自我保护。这是社会上的生存法则。
一时的得意洋洋会换来以后的肠子悔青，一时的众星捧月会招来以后的众人愤恨。
我是属于那种说几句话，就容易滔滔不绝的那种。平常聊天中，也许对方只是想问下我银行卡号是多少，而我可能已经把银行卡密码告诉他（夸张点）。直白点意思就是话很多，非常容易说出一些本不应该说的东西。像以前如果有个人偷偷告诉我一个秘密，叫我千万不要说出去，而有时候不经意间就成为了告密者。然而我本意并不想泄密，但就是因为交际中，过度不必要的话语就往往。
当然，如果说的是自己的一些事情的话，对于他人来说，可能就听听就忘了。但有很多时候说着说着就说到他人去了，这时候一些过多的言语，就可能导致一些不恰当的词语加在他人身上。
我也许做不到沉默是金的实践，但我一定明白存在的意义。不善言，那就不必言。我之前就很喜欢给别人安利些东西，具体点如技术框架这些，但大部分情况下没成功安利，哪怕我对他当下的情况进行一定的分析，并告诉他使用了对自己的提升等等。而结果往往是将我的话语当做耳边风一般，也许是我的言语没有那么说服力，又或者是他不愿尝试新事物。所以这也就是为什么我现在不喜欢安利，不想多说些什么。即便说得再多，对我来说几乎没有任何利益可言，反倒是不说，没有任何亏损。
能沉默寡言就不必口若悬河
当一个人突然对你特别好，那么这时候就需要谨慎了，很有可能自己沉浸在好处之中，而忘记所在的风险。
就比如陌生人给小孩子糖果的例子，小孩子往往容易沉浸在得到甜味之中，而不会去想陌生人会将自己处于何种地步，当然这也和小孩子没有明确的自我辨别善恶的能力有关。但换到成人年身上不妨是同一道理，只是将这里的糖果换成了其他的好处而已。
这里我想强调的是，人一旦处于高兴的状态下就容易忘记一些行为。就如酒后吐真言，在喝酒兴奋的状态，是难以有任何的危险警觉，在喝醉的情况下，可能会把自己的一切说出去，而醒后根本难以想到当时兴奋的时候竟说过这般话语。
而多数人往往容易处于这种状态，对我来说可能就是别人夸我几句，我感觉非常得意，然后又和对方说起无关该话题的内容。然后这就回到上一个口若悬河话题。
也许可能会说，为啥要如此盯防这些潜在危险，因为坏人多数都是利用这种得意忘形的状态去坑害受害者。而能做的只有时刻预防危险，因为你永远不清楚危险的来临，当危险真正来临之时，就以措手不及。
就如这次休学，我就巴不得早点工作，早点实现财富自由。但过早的发育，往往会迷失方向。
其实我日常编写代码的时候也是如此，有时候就是为了快点实现功能需求，就会去寻找相关功能库，就容易忽视底层实现逻辑。久而久之就成为了 CV（复制粘贴）工程师，导致一些学习本该了解的知识点，就因此忽视，直到别人的库无法实现自己的功能的，到自己实现起来可谓是愁眉苦脸的。
所以我现在心态也相对以前平坦了许多，没有之前的那种激情劲，或者说更加稳重，走一步都要稳一步。
有时候有些东西就应该顺从时间的发展，强行去改变它的发展方向有可能就得不偿失。还有，为何要急于去创造成功，而不是成功去找寻你呢？
顺其自然，不失一个生活态度。
楚门的世界中有一句台词对我印象特别深刻。
外面的世界跟我给你的世界一样的虚假，有一样的谎言一样的欺诈。
外面的世界即现实，亦或者是社会。确实，这里存在太多虚伪的内容，多数人对他人的表现与自身内心存在极大差异。举个例子，一个非常普通的人，面对领导时展现积极主动，面对朋友时展现情同手足，面对亲人时展现情同骨肉，对不同的人，都有不同的表现形式，而真实的他却只有自己最清楚。可以说人本就是很虚伪的，只是这种形式在交际中被放大。
除了虚伪外，很多的还是谎言。这里举一个不那么黑暗的谎言，多数人都喜欢装逼，吹嘘自己如何如何的。将自己包装得有多么厉害，地位多么显赫。其目的也只有自己最清楚，在被这种表面所影响下，就认为他事情都相对可靠，其实不然的。
所以言语上，并不能以百分之百的确信。再好比目前互联网的新闻内容或者是短视频，我都不会去对其真实性保持绝对，至少肯定不会是完整的。因为太清楚这些内容多数是以博人眼球为目的，也许会歪曲一定的事实，营造一个绝对火爆的效果。没置身于此地，又怎敢下一断言呢。
俗话说得好眼见为实，不要轻信传闻，看到的才是事实。
不要轻易的他言，越是真诚的人，越是容易被欺骗。
这些就是我这一年的大部分社会感悟，然而事实上这仅仅只是皮毛中的皮毛，有很多不是那么友好的面我并没有用言语去展现，也难以展示。
但最终想说的是出门在外，保护好自己才是最重要的。无论是身体还是精力，起码活着是为自己而活。
同时时刻当心生活中的风险，无论大火小火最终都有可能酿成不可挽回的伤害。能做的也只有提防，警惕。
与社会相比，校园生活也确实安全多了。与你相龄的同学，很多都没有经过社会，做事处事都不会搞得如此复杂，但或多或少肯定还是存在的，只是相比社会而言没那么复杂。倒是可以说大学校园就是步入社会的一个缓冲区，缓冲区有多大，就决定在社会中你的发展效率。
办理完复学手续，接触了新室友，新班级，依旧还是熟悉的校园，但此时此刻却感受不到校园的气息。内心也许还停留在休学一年的风光，可身体可却要老老实实在待上两年。
每日起床，打开屏幕，查看邮件信息，吃饭，能旷的课就旷，不能旷的课就尽量去，坐下敲代码，一天的日子就这样过去了。这半年里至少有百分之 80 的日子是处于这种状态。
要说枯燥，其实也有一些乐趣，要说充实，其实也会摸点鱼。不过，这不就是大部分人的生活方式吗？以混日子的方式做着重复的事，在重复中寻求一丝不同。
在学校也没啥特殊的要求，别挂科，在读两年拿到毕业证与学位证即可。还有两年的时间发展，也许这两年是程序生涯中仅存可自由分配的时间。
要说我这一年的总结，一切行为都一定要留后路。
人生要做太多的后退路，才能够走出自己的路。过去的自己的很多决定都是不留活路，可以说是大部分的情况连后悔的机会都没有。当时的我为何要做得如此绝呢？仅仅只是鲁莽吗。不，所突显的是一个真诚的态度。如果做得任何事情都留有后路，只能说你是一个警惕的人，但不是一个真诚的人。但这个社会往往就是不需要真诚老实的人，在结果面前，这些都一文不值。越是真诚，越容易被欺骗。到头来，伤的还是真诚的人。
我高中因为一些特殊原因换过班，换完之后有一段时间非常后悔，失去(永别)日常课上课下与要好的同学。可结果已经发生了，很多东西就难以还原成最初的模样。上了大学第一学期结束，我就从数学专业转到软件工程专业，只为毕业时有个科班的资格，而现在科班在我看来一文不值，还要面临补修原专业没有的课程。但相关手续都已经办理完毕，即便撕毁手续，也无济于事。每一次的选择，都总让我觉得不值，失去的远比得到的多。
不过话也不能说的这么绝对，我高中换班让我远离那些特意”针对”我的老师（我高中学习表现特别差，属于那种差生不爱学习的，虽然现在也差不多）。我转专业也认识到一些志同道合都热爱编程的伙伴，我要是不转专业也许在这个学校里可能都难以有交集。同样的休学也让我收获了不少，社会经验与做人处事有了个质的提升。
所以高中的我特别渴求大学，在大学里不断的提升自我，也就是为什么高考一结束，我就沉浸在电脑面前，不是游戏电影，而是可创造一切的代码上。在上一学期后，想去软件工程软件。并且当我有了一定的代码基础水平，我觉得有能力去应付实际任务需求，也就办理休学手续，去完成一番“事业”。现在回到校园，同样的，我也非常渴求毕业，只为能够更早做出一番事情来。
如果有个选择让你在 40 岁前平平无奇，但在 40 岁后一鸣惊人成就一番事业，我想我肯定不会选择。我已经经历了比同龄人多的多的经历，我完全认为 30 岁就能达到 40 岁时的目标。有一个梦想叫别人 30 岁有的东西我 20 岁就要，这也是我的梦想。
为什么会休学，想必已经有了一个很明确的答案。而且我也很清楚，谁都劝不动当年的我。即便休学让我晚毕业的一年，同时还带来了各种琐事。在明知道结果的前提我依然还是会决定。
做技术写程序的不应该只有技术上的进步，更应该在友好的交互方面，这里的交互不单单是人与机的交互，而是生活中人与人，人与事之间的交互。
一个应用程序的实用性如何，很大一部分取决于交互。生活中圈子同样与他人的交互有很大牵连。代码写的再好，功能再强大，但是没有一个好的交互，用户同样不会使用。生活中，即使能力再强大，但对他人不友好、对工作不上进，也难被认可。
愿来年提升自我的同时，能够辨别是非，待人处世。修正自身缺点，发挥自有特长。不要高傲自大，不要妄自菲薄。不要只沉浸做事，而不去做人。保持原有的心态，不被大起大落所失衡。不断经历，不断收获。
愿一切安好，愿前程似锦。
", "url": "https://kuizuo.cn/2021-year-end-summary", "title": "2021年终总结（休学一年）", "summary": "距离上篇记录过去了 1 年半时间，以后应该也会在每年的 12 月 31 号发布年终总结。", "date_modified": "2021-12-31T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "年终总结", "summary" ] }, { "id": "js-code-deobfuscator", "content_html": "基于 Babel 对 JS 代码进行混淆与还原操作的网站 JS 代码混淆与还原 (kuizuo.cn)
![\"js-de-obfuscator\"](\"https://img.kuizuo.cn/20220131193110.png\")
AST 仅仅只是静态分析，但可以将还原出来的代码替换原来的代码，以便更好的动态分析找出相关点。在还原时，并不是所有的代码都能还原成一眼就识破代码执行逻辑的，ast 也并非万能，如果你拥有强大的 js 逆向能力，有时候动态调试甚至比 AST 静态分析来的事半功倍。
标识符是可以随便定义的，只要变量不冲突，我可以随意定义，那么就已经决定我们还原不出源代码的变量名，所以能还原的只有一些花指令，使其代码变好看，方便调试。
混淆的方式有很多，与之对应还原的方式也有很多，上面那套混淆的还原可能只针对那一套混淆的代码，如果拿另一份混淆过的代码，然后执行这个还原程序的话，那程序多半有可能报错。所以绝对没有万能的还原代码，所有的还原程序，都需要针对不同的混淆手段来进行处理的。
我只是将我所遇到的混淆手段整合到一套代码上，而非所有的混淆手段都能进行还原处理的。
同时也别过于追求还原，因为还原很容易破坏原有代码，导致一些未知 bug。
如需要定制化还原，也可联系。（还是要说下，绝对无法还原出最原始代码）
下文将会针对主流的一些混淆手段（至少是在我遇到的混淆中相对比较好还原的），并会附上对应代码供参考（不放置代码出处）。
接下来我将要演示一个混淆代码是如何还原的，这个例子是我第一次接触混淆的例子，也可以说是我玩的最溜的一次还原了，反正折腾了也有 4,5 来次。
贴上代码 git 地址 js-de-obfuscator/example/deobfuscator/cx
注：该 js 文件是通过工具JavaScript Obfuscator Tool进行混淆处理的。
首先一定一定要将混淆的代码解析成 AST 树结构，任何混淆的还原都是如此。首先简单随便看看代码，不难发现这些代码中都有'\\x6a\\x4b\\x71\\x4b'这样的十六进制编码字符，可以使用现成的工具，格式化便会限制编码前的结果，不过这边使用 ast 来进行操作
通过 AST 查看 node 节点，可以发现value正是我们想要的数据，但这里确显示的是extra.raw，实际上只需要遍历到相应的节点，然后 extra 属性给删除即可，同样的 Unicode 编码也是按上述方式显示。
![\"image-20211224202108279\"](\"https://img.kuizuo.cn/image-20211224202108279.png\")
具体遍历的代码如下
// 将所有十六进制编码与Unicode编码转为正常字符
hexUnicodeToString() {
traverse(this.ast, {
StringLiteral(path) {
var curNode = path.node;
delete curNode.extra;
},
NumericLiteral(path) {
var curNode = path.node;
delete curNode.extra;
}
})
}
然后将遍历后处理过的代码与 demo.js 替换一下，方便接下来的还原处理。不过处理完还是有大部分未知的字符串需要解密，当然也有一些没处理过的代码。
如果你尝试过静态分析该代码，会发现一些参数都通过_0x3028 来调用，像这样
_0x3028['nfkbEK']
_0x3028('0x0', 'jKqK')
_0x3028('0x1', ')bls')
不过认真查看会发现像成员表达式MemberExpression语句_0x3028[\"nfkbEK\"]，但在第三条语句却定义函数_0x3028。其实是 js 的特性，比方说下面的代码就可以给函数添加一个自定义属性
let add = function (a, b) {
add['abc'] = 123
return a + b
}
console.log(add(1, 2))
console.log(add['abc'])
// 3
// 123
不过不影响，这里只是提一嘴，并不是代码的问题。而其中_0x3028就是解密函数，且遍历_0x3028调用表达式，且参数为两个的 CallExpression。
那么接下来就要着重查看前三个语句，因为这三条语句便是这套混淆的关键所在。
var _0x34ba = [\"JcOFw4ITY8KX\", \"EHrDoHNfwrDCosO6Rkw=\",...]
(function(_0x2684bf, _0x5d23f1) {
// 这里只是定义了一个数组乱序的函数,但是调用是在后面
var _0x20d0a1 = function(_0x17cf70) {
while (--_0x17cf70) {
_0x2684bf['push'](_0x2684bf['shift']());
}
};
var _0x1b4e1d = function() {
var _0x3dfe79 = {
'data': {
'key': 'cookie',
'value': 'timeout'
},
\"setCookie\": function (_0x41fad3, _0x155a1e, _0x2003ae, _0x48bb02) {
...
},
\"removeCookie\": function () {
return \"dev\";
},
\"getCookie\": function (_0x23cc41, _0x5ea286) {
_0x23cc41 = _0x23cc41 || function (_0x20a5ee) {
return _0x20a5ee;
};
// 在这里定义了一个花指令函数调用来调用
var _0x267892 = function (_0x51e60d, _0x57f223) {
_0x51e60d(++_0x57f223);
};
// 实际调用的地方
_0x267892(_0x20d0a1, _0x5d23f1);
return _0x1c1cc3 ? decodeURIComponent(_0x1c1cc3[1]) : undefined;
}
}
};
};
_0x1b4e1d();
}(_0x34ba, 296));
var _0x3028 = function (_0x2308a4, _0x573528) {
_0x2308a4 = _0x2308a4 - 0;
var _0x29a1e7 = _0x34ba[_0x2308a4];
// 省略百行代码...
return _0x29a1e7;
};
其中省略的代码没必要细读，因为后续都只将这三条语句写入到 node 内存中（eval），然后来调用。接下来分析每一个语句都是干嘛的。
基本 99%的混淆第一条语句都是一个大数组，存放这所有加密过的字符串，而我们要做的就是找到所有加密过的字符串，将其还原。
然后接着第二条语句一般都是自调用函数，将大数组与数组乱序数量作为参数，其中的作用是将数组进行乱序，也就是上面代码中加亮的地方，但这里只是定义了一个函数_0x20d0a1，而实际调用的地方 _0x1b4e1d 中_0x3dfe79.getCookie中调用的，上述代码中有注释。如果你是正常一步步分析还真不一定的分析的出来，这就是混淆恶心的地方。
不吹混淆了，总之只要知道第二条语句是用作数组乱序，而具体无论怎么混淆，我们都可以通过 eval 来调用一遍，详看后文代码。
第三条语句就是加密函数，实际上就是传入大数组的索引，然后返回数组对应的成员，只是这边将其封装成函数，相当于原本 _0x34ba[0] 变为_0x3028(\"0x0\", \"jKqK\") 形式来获取原本的字符串（这里只是举例，实际还涉及到第二个参数）。
上面说了那么多，实际上具体混淆逻辑其实根本没必要去理解，像传入的第二个参数做了啥根本无需了解，因为我们最终的目的是将 _0x3028(\"0x0\", \"jKqK\")转为原本字符串，然后替换的当前节点的。所有只需要遍历到_0x3028(\"0x0\", \"jKqK\")，然后执行一遍解密函数得到解密后的结果，然后替换即可。所以如何执行解密函数便是重点了。
首先要将三条语句运行一遍，js 中要在运行时运行字符串的代码，就可以使用 eval，但 eval 有作用域的问题，eval 运行的代码作用范围都是局部的，如果脱离当前作用域，eval 运行的代码就相当于无效了，所有可以使用window.eval或global.eval，将其写入置全局作用域下，由于这里是 node 环境，便用global.eval。
截取前三条语句，使用 eval 写入内存
// 拿到解密函数所在节点
let stringDecryptFuncAst = this.ast.program.body[2]
// 拿到解密函数的名字 也就是_0x3028
let DecryptFuncName = stringDecryptFuncAst.declarations[0].id.name
let newAst = parser.parse('')
newAst.program.body.push(this.ast.program.body[0])
newAst.program.body.push(this.ast.program.body[1])
newAst.program.body.push(stringDecryptFuncAst)
// 把这三部分的代码转为字符串，由于存在格式化检测，需要指定选项，来压缩代码
let stringDecryptFunc = generator(newAst, { compact: true }).code
// 将字符串形式的代码执行，这样就可以在 nodejs 中运行解密函数了
global.eval(stringDecryptFunc)
这时候，就可以使用_0x3028(\"0x0\", \"jKqK\") 来输出解密后的结果，不过要一个个手动输入还是太麻烦了，完全可以找到_0x3028调用的所有地方，然后判断是否为调用表达式 CallExpression，然后使用eval('_0x3028(\"0x0\", \"jKqK\")') 获取解密结果。这边就举一个遍历的例子。
traverse(this.ast, {
VariableDeclarator(path) {
// 当变量名与解密函数名相同
if (path.node.id.name == DecryptFuncName) {
let binding = path.scope.getBinding(DecryptFuncName)
// 通过referencePaths可以获取所有引用的地方
binding &&
binding.referencePaths.map((p) => {
// 判断父节点是调用表达式，且参数为两个
if (p.parentPath.isCallExpression()) {
// 输出参数与解密后的结果
let args = p.parentPath.node.arguments.map((a) => a.value).join(' ')
let str = eval(p.parentPath.toString())
console.log(args, str)
p.parentPath.replaceWith(t.stringLiteral(str))
}
})
}
},
})
在混淆的时候就提及到 binding 可以获取当前变量的作用域，而binding.referencePaths就可以获取到所有调用的地方，那么只需要判断是否为调用表达式，且参数是两个的情况下，然后通过 eval 执行一遍整个节点，也就是eval('_0x3028(\"0x0\", \"jKqK\")')，然后通过 replaceWith，替换节点即可。传入的参数与加密后的结果大致展示如下，可自行运行一遍程序中decStringArr()
0x0 jKqK PdAlB
0x1 )bls jtvLV
0x2 M10H SjQMk
0x3 2Q@E length
0x4 [YLR length
0x5 QvlS charCodeAt
0x6 YvHw IrwYd
0x7 iLkl ClOby
0x8 DSlT console
...
原先代码与处理后的代码对比(部分)
var _0x505b30 = (function () {
if (_0x3028('0x0', 'jKqK') !== _0x3028('0x1', ')bls')) {
var _0x104ede = !![]
return function (_0x3d32a2, _0x35fd15) {
if ('bKNqX' === _0x3028('0x2', 'M10H')) {
var _0x46992c,
_0x1efd4e = 0,
_0x5cae2b = d(f)
if (0 === _0xb2c58f[_0x3028('0x3', '2Q@E')]) return _0x1efd4e
for (_0x46992c = 0; _0x46992c < _0xb2c58f[_0x3028('0x4', '[YLR')]; _0x46992c++)
(_0x1efd4e = (_0x1efd4e << (_0x5cae2b ? 5 : 16)) - _0x1efd4e + _0xb2c58f[_0x3028('0x5', 'QvlS')](_0x46992c)), (_0x1efd4e = _0x5cae2b ? _0x1efd4e : ~_0x1efd4e)
return 2147483647 & _0x1efd4e
} else {
var _0x45a8ce = _0x104ede
? function () {
if (_0x3028('0x6', 'YvHw') === _0x3028('0x7', 'iLkl')) {
that[_0x3028('0x8', 'DSlT')]['log'] = func
that[_0x3028('0x9', 'YW6h')][_0x3028('0xa', '&12i')] = func
that[_0x3028('0xb', '1jb4')]['debug'] = func
that[_0x3028('0xc', 'k9U[')][_0x3028('0xd', 'nUsA')] = func
that[_0x3028('0xe', ')bls')][_0x3028('0xf', 'PZDB')] = func
that['console'][_0x3028('0x10', 'r8Qx')] = func
that[_0x3028('0x11', 'AIMj')][_0x3028('0x12', '[YLR')] = func
} else {
if (_0x35fd15) {
if (_0x3028('0x13', 'r8Qx') !== _0x3028('0x14', 'YLF%')) {
var _0x1fa1e3 = _0x35fd15[_0x3028('0x15', 'sLdn')](_0x3d32a2, arguments)
_0x35fd15 = null
return _0x1fa1e3
} else {
_0x142a1e()
}
}
}
}
: function () {}
_0x104ede = ![]
return _0x45a8ce
}
}
} else {
;(function () {
return ![]
}
[_0x3028('0x16', 'Yp5j')](_0x3028('0x17', ']R4I') + _0x3028('0x18', 'M10H'))
[_0x3028('0x19', '%#u0')]('stateObject'))
}
})()
var _0x505b30 = (function () {
if ('PdAlB' !== 'jtvLV') {
var _0x104ede = !![]
return function (_0x3d32a2, _0x35fd15) {
if ('bKNqX' === 'SjQMk') {
var _0x46992c,
_0x1efd4e = 0,
_0x5cae2b = d(f)
if (0 === _0xb2c58f['length']) return _0x1efd4e
for (_0x46992c = 0; _0x46992c < _0xb2c58f['length']; _0x46992c++)
(_0x1efd4e = (_0x1efd4e << (_0x5cae2b ? 5 : 16)) - _0x1efd4e + _0xb2c58f['charCodeAt'](_0x46992c)), (_0x1efd4e = _0x5cae2b ? _0x1efd4e : ~_0x1efd4e)
return 2147483647 & _0x1efd4e
} else {
var _0x45a8ce = _0x104ede
? function () {
if ('IrwYd' === 'ClOby') {
that['console']['log'] = func
that['console']['warn'] = func
that['console']['debug'] = func
that['console']['info'] = func
that['console']['error'] = func
that['console']['exception'] = func
that['console']['trace'] = func
} else {
if (_0x35fd15) {
if ('WuEjf' !== 'qpuuN') {
var _0x1fa1e3 = _0x35fd15['apply'](_0x3d32a2, arguments)
_0x35fd15 = null
return _0x1fa1e3
} else {
_0x142a1e()
}
}
}
}
: function () {}
_0x104ede = ![]
return _0x45a8ce
}
}
} else {
;(function () {
return ![]
}
['constructor']('debu' + 'gger')
['apply']('stateObject'))
}
})()
可以发现处理过的代码至少无需动态调用出解密后的结果，并且像if (\"PdAlB\" !== \"jtvLV\")这种语句都可以直接一眼看出必定为 true，但混淆后if (_0x3028(\"0x0\", \"jKqK\") !== _0x3028(\"0x1\", \")bls\"))却无法看出，这就是 AST 静态分析的优势所在。
在执行完字符串解密后，其实大数组与解密函数都已经用不到了，那么就可以通过 shift 将前三条语句给删除。
// 将源代码中的解密代码给移除
this.ast.program.body.shift()
this.ast.program.body.shift()
this.ast.program.body.shift()
但一般不推荐删除，因为我们有可能是需要将我们还原后的代码与网站内混淆过的代码进行替换，然后再进行动态调试分析，但如果删除了这三条混淆语句，有可能会导致代码执行出错。我之前习惯删除，但直到我遇到了一个网站。。。
最终整个完成的代码在类方法decStringArr
在上面的代码中有一段这样的代码
// 当变量名与解密函数名相同
if (path.node.id.name == DecryptFuncName) {
// ...
其中这里的 DecryptFuncName 对应的是解密函数的函数名_0x3028，是通过人为定义，同时载入的是前三条语句，万一解密函数在第四条语句，或者有多个解密函数的情况下，就需要去改动代码
// 拿到解密函数所在节点
let stringDecryptFuncAst = this.ast.program.body[2]
// 拿到解密函数的名字 也就是_0x3028
let DecryptFuncName = stringDecryptFuncAst.declarations[0].id.name
let newAst = parser.parse('')
newAst.program.body.push(this.ast.program.body[0])
newAst.program.body.push(this.ast.program.body[1])
newAst.program.body.push(stringDecryptFuncAst)
// 把这三部分的代码转为字符串，由于存在格式化检测，需要指定选项，来压缩代码
let stringDecryptFunc = generator(newAst, { compact: true }).code
无意间翻看代码的时候，灵光一现，解密函数调用的这么频繁，我直接把所有函数都遍历一遍，并将它们的引用referencePaths从高到低排序，不就知道那个是解密函数了吗，于是便有了findDecFunctionArr方法
一般而言，解密函数通常是在大数组与数组乱序后定义的，在上面代码中，可以看到是通过制定下标来定位解密函数 this.ast.program.body[2];，所以只要能截取到这个 2 即可，具体代码
/**
* 根据函数调用次数寻找到解密函数
*/
findDecFunction() {
let decFunctionArr = [];
let index = 0; // 定义解密函数所在语句下标
// 先遍历所有函数(作用域在Program)，并根据引用次数来判断是否为解密函数
traverse(this.ast, {
Program(p) {
p.traverse({
'FunctionDeclaration|VariableDeclarator'(path) {
if (!(t.isFunctionDeclaration(path.node) || t.isFunctionExpression(path.node.init))) {
return;
}
let name = path.node.id.name;
let binding = path.scope.getBinding(name);
if (!binding) return;
// 调用超过100次多半就是解密函数,具体可根据实际情况来判断
if (binding.referencePaths.length > 100) {
decFunctionArr.push(name);
// 根据最后一个解密函数来定义解密函数所在语句下标
let binding = p.scope.getBinding(name);
if (!binding) return;
let parent = binding.path.findParent((_p) => _p.isFunctionDeclaration() || _p.isVariableDeclaration());
if (!parent) return;
let body = p.scope.block.body;
for (let i = 0; i < body.length; i++) {
const node = body[i];
if (node.start == parent.node.start) {
index = i + 1;
break;
}
}
// 遍历完当前节点,就不再往子节点遍历
path.skip();
}
},
});
},
});
let newAst = parser.parse('');
// 插入解密函数前的几条语句
newAst.program.body = this.ast.program.body.slice(0, index);
// 把这部分的代码转为字符串，由于可能存在格式化检测，需要指定选项，来压缩代码
let code = generator(newAst, { compact: true }).code;
// 将字符串形式的代码执行，这样就可以在 nodejs 中运行解密函数了
global.eval(code);
this.decFunctionArr = decFunctionArr;
}
同时增加 decFunctionArr 属性，用于表示解密函数数组供 decStringArr 使用，就可以免去判断解密函数的步骤了。
就此，还原后的代码基本就能静态分析出大概，接下来都是对这份代码进行细微的优化还原。
与混淆对象属性相反，但其实没必要，只是代码相对而言好看一点，影响不大。具体代码如下
changeObjectAccessMode() {
traverse(this.ast, {
MemberExpression(path) {
if (t.isStringLiteral(path.node.property)) {
let name = path.node.property.value
path.node.property = t.identifier(name)
path.node.computed = false
}
}
})
}
在还原后的代码还存在!![]与 ![]或者是!0与!1，而这对应 js 中也就是true与false，所以也可以遍历这部分的代码，然后将其还原成 Boolean，像这种表达式就不细说了（有点类似 jsfuck），ast 结构自行分析。具体代码如下
traverseUnaryExpression() {
traverse(this.ast, {
UnaryExpression(path) {
if (path.node.operator !== '!') return // 避免判断成 void
// 判断第二个符号是不是!
if (t.isUnaryExpression(path.node.argument)) {
if (t.isArrayExpression(path.node.argument.argument)) { // !![]
if (path.node.argument.argument.elements.length == 0) {
path.replaceWith(t.booleanLiteral(true))
path.skip()
}
}
} else if (t.isArrayExpression(path.node.argument)) { // ![]
if (path.node.argument.elements.length == 0) {
path.replaceWith(t.booleanLiteral(false))
path.skip()
}
} else if (t.isNumericLiteral(path.node.argument)) { // !0 or !1
if (path.node.argument.value === 0) {
path.replaceWith(t.booleanLiteral(true))
} else if (path.node.argument.value === 1) {
path.replaceWith(t.booleanLiteral(false))
}
} else {
}
}
})
}
还原后的代码中还存在[\"constructor\"](\"debu\" + \"gger\")[\"call\"](\"action\");这样的语句，其中debugger 特意给拆分成两部分，而这同样可以通过 ast 来进行还原成完整字符串，同样类似的 1 + 2 这种字面量 都可以合并。还原程序代码如下
traverseLiteral() {
traverse(this.ast, {
BinaryExpression(path) {
let { left, right } = path.node
// 判断左右两边是否为字面量
if (t.isLiteral(left) && t.isLiteral(right)) {
let { confident, value } = path.evaluate() // 计算二项式的值
confident && path.replaceWith(t.valueToNode(value))
path.skip()
}
}
});
}
其中 confident 表示是否为可计算，比如说一个变量 + 1，由于程序不知道这变量此时的值，所以就不可计算，confident 也就是为 false。
同时这个计算二项式字面量可以还原一些相对简单的混淆，比方说数字异或混淆 706526 ^ 706516计算为 10 就可以直接替换原节点。所以这步的遍历需要相对其他还原提前一些。
有些变量可能赋值过一次就不在进行改变，就如同常量，如下面代码。
let a = 100
console.log(a)
那么完全可以替换成console.log(100) ，最终输出的效果一样，但是前提是 a 只赋值过一次，也可以说 a 必须要是变量，否则这样还原是有可能导致原有执行结果失败，而通过 binding 就能查看变量 a 的赋值历史。
traverseStrNumValue() {
traverse(this.ast, {
'AssignmentExpression|VariableDeclarator'(path) {
let _name = null;
let _initValue = null;
if (path.isAssignmentExpression()) {
_name = path.node.left.name;
_initValue = path.node.right;
} else {
_name = path.node.id.name;
_initValue = path.node.init;
}
if (t.isStringLiteral(_initValue) || t.isNumericLiteral(_initValue)) {
let binding = path.scope.getBinding(_name);
if (binding && binding.constant && binding.constantViolations.length == 0) {
for (let i = 0; i < binding.referencePaths.length; i++) {
binding.referencePaths[i].replaceWith(_initValue);
}
}
}
},
});
}
上面说了有些字符串与数值常量替换，针对是只赋值过一遍的变量，但还可能存在变量未使用过的情况，遇到这种情况，我们可以判断 constantViolations 成员是否为空，然后将其删除。
removeUnusedValue() {
traverse(this.ast, {
VariableDeclarator(path) {
const { id, init } = path.node;
if (!(t.isLiteral(init) || t.isObjectExpression(init))) return;
const binding = path.scope.getBinding(id.name);
if (!binding || binding.constantViolations.length > 0) return
if (binding.referencePaths.length > 0) return
path.remove();
},
FunctionDeclaration(path){
const binding = path.scope.getBinding(path.node.id.name);
if (!binding || binding.constantViolations.length > 0) return
if (binding.referencePaths.length > 0) return
path.remove();
}
});
}
同时还有一些无用代码块，比如
function test() {
if (true) {
return '123'
} else {
return Math.floor(10 * Math.random())
}
}
test()
第二条语句是绝对不会执行到的，那么就可以将其移除。虽然说代码编辑器会将其标暗，表示不会执行到，但在混淆中巴不得代码量少一下，所有还是有必要通过 AST 进行操作。
removeUnusedBlockStatement() {
traverse(this.ast, {
IfStatement(path) {
if (t.isBooleanLiteral(path.node.test)) {
let testValue = path.node.test.value
if (testValue === true) {
path.replaceInline(path.node.consequent)
} else if (testValue === false) {
path.replaceInline(path.node.alternate)
}
}
},
});
}
虽然说这种只针对 if 条件为 Boolean，如果条件为if(1===1)的情况也是可以，因为在前面还原中 计算二项式字面量，就已经将if(1===1) 替换成了 if(true)，所以这里只需要判断isBooleanLiteral即可。最终还原后的结果会将 if 代码块去除，同时保留 BlockStatement，代码如下
function test() {
{
return \"123\";
}
}
test();
有些关键的代码会隐藏在 debugger，setTimeout，setInterval 等，在调试的时候都需要额外注意下是否有关键代码，所以这时候就可以添加一个注释来进行添加一个标签如 TOLOOK 来进行定位。具体根据要指定的标识符来定位，下列代码做为演示，将会在这些地方添加注释 // TOLOOK
addComments() {
traverse(this.ast, {
DebuggerStatement(path) {
path.addComment('leading', ' TOLOOK', true);
},
CallExpression(path) {
if (!['setTimeout', 'setInterval'].includes(path.node.callee.name)) return;
path.addComment('leading', ' TOLOOK', true);
},
StringLiteral(path) {
if (path.node.value === 'debugger') {
path.addComment('leading', ' TOLOOK', true);
}
}
});
}
在一开始还原的时候就调用过这个方法，不过这里要特意在说一遍，因为这套混淆十六进制是最后处理，也就是说我们一开始直接使用还原是没问题的，但如果加密的字符串中存在十六进制编码字符，而这步操作确实在解密字符串前的话，那么可能就有部分字符串还是以十六进制形式显示，所有把这个方法特意放到较后文的地方，同时这个方法也可以最后调用。
hexUnicodeToString() {
traverse(this.ast, {
StringLiteral(path) {
var curNode = path.node;
delete curNode.extra;
},
NumericLiteral(path) {
var curNode = path.node;
delete curNode.extra;
},
});
}
大部分的混淆标识符都为_0x123456 这种，但有些却很另类，比如 OOOO0o 这种，相比前面这种更容易看花眼，很容易看错代码，那么就可以将标识符都统一重命名一下。
renameIdentifier() {
let code = this.code
let newAst = parser.parse(code);
traverse(newAst, {
'Program|FunctionExpression|FunctionDeclaration'(path) {
path.traverse({
Identifier(p) {
path.scope.rename(p.node.name, path.scope.generateUidIdentifier('_0xabc').name);
}
})
}
});
this.ast = newAst;
}
但想知道源代码的标识符是根本不可能的，所以就无法通过代码语义来理解代码了。
不过还有一些可以特定的替换，比如 for i
for (var _0x1e5665 = 0, _0x3620b9 = this['JIyEgF']['length']; _0x1e5665 < _0x3620b9; _0x1e5665++) {
this['JIyEgF']['push'](Math['round'](Math['random']()))
_0x3620b9 = this['JIyEgF']['length']
}
像这种代码，就完全可以将_0x1e5665替换成i，不过对整体阅读影响基本不大。
还有一些还原的手段就不细说了（这里例子中并未用到），比如说
等等，总之你想咋优化都完全可以优化，但还原完的代码就不一定能看懂了。与解密字符串那个相比，如果搞不定字符串解密，那这些都是徒劳。
具体的实例可通过 源码例子 中查看对 AST 的操作。
最终整个还原后的代码可以在newCode.js中查看，但到目前为止还没有测试还原后的代码到底能否正常运行，或者是替换节点导致语法错误，所有就需要将还原后的代码与混淆过的代码替换运行这样才能测试的出来。这里就不放具体执行过程了（因为真的懒得在处理这个 js 文件了。。。）
针对上述还原操作其实还不够明显，于是就编写了一个在线对 JS 代码混淆与还原的网站（主要针对还原）– JS 代码混淆与还原 (kuizuo.cn)
其实也就是对上述的还原代码进行封装成工具使用。
", "url": "https://kuizuo.cn/js-code-deobfuscator", "title": "JS代码之还原", "summary": "基于 Babel 对 JS 代码进行混淆与还原操作的网站 JS 代码混淆与还原 (kuizuo.cn)", "date_modified": "2021-12-25T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "javascript", "ast", "reverse", "project" ] }, { "id": "js-code-obfuscator", "content_html": "AST 在线解析 AST explorer
js 在线混淆工具 JavaScript Obfuscator Tool
书籍 《反爬虫 AST 原理与还原混淆实战》
相关混淆代码 kuizuo/js-de-obfuscator
自写在线混淆与还原网站 JS 代码混淆与还原 (kuizuo.cn)
抽象语法树（Abstract Syntax Tree），简称 AST，初识 AST 是在一门网页逆向的课程，该课程讲述了 js 代码中混淆与还原的对抗，而所使用的技术便是 AST，通过 AST 能很轻松的将 js 源代码混淆成难以辨别的代码。同样的，也可以通过 AST 将其混淆的代码 还原成执行逻辑相对正常的代码。
例如下面的代码（目的是当天时间格式化）
Date.prototype.format = function (formatStr) {
var str = formatStr
var Week = ['日', '一', '二', '三', '四', '五', '六']
str = str.replace(/yyyy|YYYY/, this.getFullYear())
str = str.replace(/MM/, (this.getMonth() + 1).toString().padStart(2, '0'))
str = str.replace(/dd|DD/, this.getDate().toString().padStart(2, '0'))
return str
}
console.log(new Date().format('yyyy-MM-dd'))
通过 AST 混淆的结果为
const OOOOOO = [
'eXl5eS1NTS1kZA==',
'RGF0ZQ==',
'cHJvdG90eXBl',
'Zm9ybWF0',
'5pel',
'5LiA',
'5LqM',
'5LiJ',
'5Zub',
'5LqU',
'5YWt',
'cmVwbGFjZQ==',
'Z2V0RnVsbFllYXI=',
'Z2V0TW9udGg=',
'dG9TdHJpbmc=',
'cGFkU3RhcnQ=',
'MA==',
'Z2V0RGF0ZQ==',
'bG9n',
]
;(function (OOOOOO, OOOOO0) {
var OOOOOo = function (OOOOO0) {
while (--OOOOO0) {
OOOOOO.push(OOOOOO.shift())
}
}
OOOOOo(++OOOOO0)
})(OOOOOO, 115918 ^ 115930)
window[atob(OOOOOO[694578 ^ 694578])][atob(OOOOOO[873625 ^ 873624])][atob(OOOOOO[219685 ^ 219687])] = function (OOOOO0) {
function OOOO00(OOOOOO, OOOOO0) {
return OOOOOO + OOOOO0
}
var OOOOOo = OOOOO0
var OOOO0O = [
atob(OOOOOO[945965 ^ 945966]),
atob(OOOOOO[298561 ^ 298565]),
atob(OOOOOO[535455 ^ 535450]),
atob(OOOOOO[193006 ^ 193000]),
atob(OOOOOO[577975 ^ 577968]),
atob(OOOOOO[428905 ^ 428897]),
atob(OOOOOO[629582 ^ 629575]),
]
OOOOOo = OOOOOo[atob(OOOOOO[607437 ^ 607431])](/yyyy|YYYY/, this[atob(OOOOOO[799010 ^ 799017])]())
OOOOOo = OOOOOo[atob(OOOOOO[518363 ^ 518353])](
/MM/,
OOOO00(this[atob(OOOOOO[862531 ^ 862543])](), 671347 ^ 671346)
[atob(OOOOOO[822457 ^ 822452])]()
[atob(OOOOOO[974597 ^ 974603])](741860 ^ 741862, atob(OOOOOO[544174 ^ 544161])),
)
OOOOOo = OOOOOo[atob(OOOOOO[406915 ^ 406921])](
/dd|DD/,
this[atob(OOOOOO[596004 ^ 596020])]()
[atob(OOOOOO[705321 ^ 705316])]()
[atob(OOOOOO[419232 ^ 419246])](318456 ^ 318458, atob(OOOOOO[662337 ^ 662350])),
)
return OOOOOo
}
console[atob(OOOOOO[490983 ^ 490998])](new window[atob(OOOOOO[116866 ^ 116866])]()[atob(OOOOOO[386287 ^ 386285])](atob(OOOOOO[530189 ^ 530207])))
将上述代码复制到浏览器控制台内执行，将会输出当天的年月日。
除了上述的混淆代码，很多文本编辑器中也会使用到，例如：
elint、pretiier 对代码错误或风格的检查；webpack 通过 babel 转译 javascript 语法；不过本篇并非介绍 AST 的基本概念，看本篇你只需要知道如何通过 babel 编译器生成 AST 并完成上述的混淆操作即可。
如果作为 JS 开发者并且想要深入了解 V8 编译，那么 AST 基本是必修课之一，像 Vue,React 主流的前端框架都使用到 AST 对代码进行编译，在 ast 学习中定能让你对 JS 语法有一个更深入的了解。
AST 本质上是静态分析，静态分析是在不需要执行代码的前提下对代码进行分析的处理过程，与动态分析不同，静态分析的目的是多种多样的， 它可用于语法检查，编译，代码高亮，代码转换，优化，压缩等等场景。即便你的程序也许在运行时报错，但都不会影响 AST 解析（除非语法错误），在 js 逆向中，通过静态分析还原出相对容易看的出的代码有对于代码分析，而对于一些需要知道某一变量执行后的结果静态分析是做不到的。
首先需要 Node 环境，这就不介绍了，其次工具 Babel 编译器可通过 npm 安装
npm i @babel/core -S-D
安装代码提示
npm i @types/node @types/babel__traverse @types/babel__generator -D
新建 js 文件，导入相关模块（也可使用 ES module 导入），大致代码如下
const fs = require('fs')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const t = require('@babel/types')
const generator = require('@babel/generator').default
let jscode = fs.readFileSync(__dirname + \"/demo.js\", {
encoding: \"utf-8\"
})
// 解析为AST
let ast = parser.parse(jscode)
// 转化特征代码
traverse(ast, {
...
})
// 生成转化后的代码
let code = generator(ast).code
babel 的编译过程主要有三个阶段
在进行编译前，首先需要了解 Babel 的一些相关 API，这边所选择的是 babel/parser 库作为解析，还有一个在线 ast 解析网站AST explorer 能帮助我们有效的了解 AST 中的树结构。
同时 Babel 手册(中文版) babel-handbook强烈建议反复阅读，官方的例子远比我所描述来的详细。
![\"image-20211212151620278\"](\"https://img.kuizuo.cn/image-20211212151620278.png\")
这边就举一个非常简单的例子，混淆变量名（或说标识符混淆）感受一下。引用网站代码例子
/**
* Paste or drop some JavaScript here and explore
* the syntax tree created by chosen parser.
* You can use all the cool new features from ES6
* and even more. Enjoy!
*/
let tips = [
\"Click on any AST node with a '+' to expand it\",
'Hovering over a node highlights the \\
corresponding location in the source code',
'Shift click on an AST node to expand the whole subtree',
]
function printTips() {
tips.forEach((tip, i) => console.log(`Tip ${i}:` + tip))
}
比如说，我要将这个 tips 标识符更改为_0xabcdef ，那么肯定是需要找到这个要 tips，在 Babel 中要找到这个则可以通过遍历特部位（如函数表达式，变量声明等等）。
鼠标点击这个 tips 查看 tips 变量在树节点中的节点。
![\"image-20211212170832228\"](\"https://img.kuizuo.cn/image-20211212170832228.png\")
这边可以看到有两个蓝色标记的节点，分别是VariableDeclaration和VariabelDeclarator，翻译过来便是变量声明与变量说明符，很显然整个let tips = [ ] 是VariableDeclaration，而tips则是VariabelDeclarator。
所以要将tips更改为_0xabcdef就需要遍历VariabelDeclarator并判断属性name是否为tips，大致代码如下。（后文代码将会省略模块引入、js 代码读取、解析与生成的代码）
const fs = require('fs')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const t = require('@babel/types')
const generator = require('@babel/generator').default
let jscode = fs.readFileSync(__dirname + '/demo.js', { encoding: 'utf-8' })
let ast = parser.parse(jscode)
traverse(ast, {
VariableDeclarator(path) {
let name = path.node.id.name
if (name === 'tips') {
let binding = path.scope.getOwnBinding(name)
binding.scope.rename(name, '_0xabcdef')
}
},
})
let code = generator(ast).code
生成的代码如下，成功的将tips更改为_0xabcdef，并且是tips的所有作用域（printTips 函数下）都成功替换了。
/**
* Paste or drop some JavaScript here and explore
* the syntax tree created by chosen parser.
* You can use all the cool new features from ES6
* and even more. Enjoy!
*/
let _0xabcdef = [\"Click on any AST node with a '+' to expand it\", \"Hovering over a node highlights the \\
corresponding location in the source code\", \"Shift click on an AST node to
expand the whole subtree\"];
function printTips() {
_0xabcdef.forEach((tip, i) => console.log(`Tip ${i}:` + tip));
}
简单描述下上述代码的过程
1、遍历所有VariableDeclarator节点，也就是tips变量说明符（标识符）
2、获取当前遍历到的标识符的 name，也就是path.node.id.name，在树节点是对应的也是id.name
3、判断 name 是否等于 tips，是的话，通过path.scope.getOwnBinding(name)，获取当前标识符（tips）的作用域，scope 的意思就是作用域，如果只是赋值操作的话如path.node.id.name = '_0xabcdef'，那只修改的let tips = 的 tips，而后面的对 tips 进行forEach操作的 tips 并不会更改，所以这里才需要使用binding来获取 tips 的作用域，并调用提供好的rename方法来进行更改。
4、调用binding.scope.rename(name, '_0xabcdef')，将旧名字 name（tips）更改为_0xabcdef，就此整个遍历就结束，此时的 ast 已经发生了变化，所以只需要根据遍历过的 ast 生成代码便可得到修改后的代码。
如果在仔细观察的话，其实Identifier（标识符）也是蓝色表示的，说明Identifier也同样可以遍历，甚至比上面的效果更好（后续替换所有的标识符也是遍历这个）
traverse(ast, {
Identifier(path) {
let name = path.node.name
console.log(name)
if (name === 'tips') {
let binding = path.scope.getOwnBinding(name)
binding.scope.rename(name, '_0xabcdef')
}
},
})
并尝试输出所有的标识符，输出的 name 结果为
tips
printTips
_0xabcdef
forEach
tip
i
console
log
i
tip
这个例子也许有点啰嗦，但我认为是有必要的，同时想说的是某种混淆（还原）的实现往往可以有好几种方法遍历，会懂得融会贯通，AST 混淆与还原才能精通。
前者用于将 js 代码解析成 AST，后者则是将 AST 转为 js 代码，两者的具体参数可通过 babel 手册查看，这就不做过多介绍了。
babel-handbook #babel-generator
整个 ast 混淆还原最关键的操作就是遍历，而 visitor 则是根据特定标识（函数声明，变量订阅）来进行遍历各个节点，而非无意义的全部遍历。
traverse 一共有两个参数，第一个就是 ast，第二个是 visitor，而 visitor 本质是一个对象如下(分别有 JavaScript 和 TypeScript 版本，区别就是在于这样定义的 visitor 是否有代码提示)
const visitor = {
FunctionDeclaration(path) {
console.log(path.node.id.name) // 输出函数名
},
}
let visitor: Visitor = {
FunctionDeclaration(path) {
console.log(path.node.id.name) // 输出函数名
},
}
一般来说，都是直接写到写到 traverse 内。个人推荐这种写法，因为能有 js 的代码提示，如果是 TypeScript 效果也一样。
traverse(ast, {
FunctionDeclaration(path) {
console.log(path.node.id.name) // 输出函数名
},
})
如果我想遍历函数声明与二项式表达式的话，还可以这么写
traverse(ast, {
'FunctionDeclaration|BinaryExpression'(path) {
let node = path.node
if (t.isFunctionDeclaration(node)) {
console.log(node.id.name) // 输出函数名 printTips
} else if (t.isBinaryExpression(node)) {
console.log(node.operator) // 输出操作符 +
}
},
})
不过要遍历不同类型的代码，那么对应的 node 属性肯定大不相同，其中这里使用了 t（也就是@babel/types库）来进行判断 node 节点是否为该属性，来进行不同的操作，后文会提到 types。
上述操作将会输出 printTips 与 + 因为 printTips 函数中代码有 Tip ${i}: + tip ，这就是一个二项式表达式。
此外 visitor 中的属性中，还对应两个生命周期函数 enter(进入节点)和 exit(退出节点)，可以在这两个周期内进行不同的处理操作，演示代码如下。
traverse(ast, {
FunctionDeclaration: {
enter(path) {
console.log('进入函数声明')
},
exit(path) {
console.log('退出函数声明')
},
},
})
其中 enter 与 exit 还可以是一个数组（当然基本没怎么会用到），比如
traverse(ast, {
FunctionDeclaration: {
enter: [
(path) => {
console.log('1')
},
(path) => {
console.log('2')
},
],
},
})
path 对象下还有一种方法，针对当前 path 进行遍历 path.traverse，比如下面代码中，我遍历到了 printTips，我想输出函数内的箭头函数中的参数，那么就可以使用这种遍历。
function printTips() {
tips.forEach((tip, i) => console.log(`Tip ${i}:` + tip))
}
此时的 path.traverse 的第一个参数便不是 ast 对象了，而是一个 visitor 对象
traverse(ast, {
FunctionDeclaration(path) {
path.traverse({
ArrowFunctionExpression(path) {
console.log(path.node.params)
},
})
},
})
输出的结果如下
[
Node {
type: 'Identifier',
start: 40,
end: 43,
loc: SourceLocation {
start: [Position],
end: [Position],
filename: undefined,
identifierName: 'tip'
},
name: 'tip'
},
Node {
type: 'Identifier',
start: 45,
end: 46,
loc: SourceLocation {
start: [Position],
end: [Position],
filename: undefined,
identifierName: 'i'
},
name: 'i'
}
]
该库主要的作用是判断节点类型与生成新的节点。判断节点类型上面已经演示过了，比如判断 node 节点是否是为标识符t.isIdentifier(path.node)，等同于path.node.type === \"Identifier\"
判断节点类型是很重要的一个环节，有时候混淆需要针对很多节点进行操作，但并不是每个节点都有相同的属性，判断节点才不会导致获取到的节点属性出错，甚至可以写下面的代码（将输出所有函数声明与箭头函数的参数）。
traverse(ast, {
enter(path) {
t.isFunctionDeclaration(path.node) && console.log(path.node.params)
t.isArrowFunctionExpression(path.node) && console.log(path.node.params)
}
})
types 的主要用途还是构造节点，或者说写一个 Builders（构建器），例如我要生成 let a = 100 这样的变量声明原始代码，通过 types 能轻松帮我们生成。
不过先别急着敲代码，把let a = 100代码进行 ast 解析，看看每个代码的节点对应的 type 都是什么，这样才有助于生成该代码。
![\"image-20211216131627955\"](\"https://img.kuizuo.cn/image-20211216131627955.png\")
body 内的第一个节点便是我们整条的代码，输入t.variableDeclaration()，鼠标悬停在 variableDeclaration 上，或者按 Ctrl 跳转只.d.ts 类型声明文件 查看该方法所需几个参数
declare function variableDeclaration(kind: 'var' | 'let' | 'const', declarations: Array<VariableDeclarator>): VariableDeclaration
可以看到第一个参数就是关键字，而第二个则一个数组，其中节点为VariableDeclarator，关于variableDeclaration与 VariableDeclarator 在前面已经提及过一次了，就不在赘述了。由于我们这里只是声明一个变量 a，所有数组成员只给一个便可，如果要生成 b，c 这些变量，就传入对应的VariableDeclarator即可
这时候在查看下 VariableDeclarator 方法参数
declare function variableDeclarator(id: LVal, init?: Expression | null): VariableDeclarator
第一个参数 id 很显然就是标识符了，不过这里的 id 不能简简单单传入一个字符串 a，而需要通过t.identifier('a')生成该节点，在上图中 id 就是对应Identifier节点。然后就是第二个参数了，一个表达式，其中这个Expression是 ts 中的联合类型（Union Types），可以看到有很多表达式
declare type Expression =
| ArrayExpression
| AssignmentExpression
| BinaryExpression
| CallExpression
| ConditionalExpression
| FunctionExpression
| Identifier
| StringLiteral
| NumericLiteral
| NullLiteral
| BooleanLiteral
| RegExpLiteral
| LogicalExpression
| MemberExpression
| NewExpression
| ObjectExpression
| SequenceExpression
| ParenthesizedExpression
| ThisExpression
| UnaryExpression
| UpdateExpression
| ArrowFunctionExpression
| ClassExpression
| MetaProperty
| Super
| TaggedTemplateExpression
| TemplateLiteral
| YieldExpression
| AwaitExpression
| Import
| BigIntLiteral
| OptionalMemberExpression
| OptionalCallExpression
| TypeCastExpression
| JSXElement
| JSXFragment
| BindExpression
| DoExpression
| RecordExpression
| TupleExpression
| DecimalLiteral
| ModuleExpression
| TopicReference
| PipelineTopicExpression
| PipelineBareFunction
| PipelinePrimaryTopicReference
| TSAsExpression
| TSTypeAssertion
| TSNonNullExpression
其中我们所要赋值的数值 100，对应的节点类型NumericLiteral也在其中。在查看 numericLiteral 中的参数，就只给一个数值，那么便传入 100。
declare function numericLiteral(value: number): NumericLiteral;
最后整个代码如下，将 t.variableDeclaration 结果赋值为一个变量var_a，这里的 var_a 便是一个 ast 对象，通过 generator(var_a).code 就可以获取到该 ast 的代码，也就是 let a = 100;，默认还会帮你添加分号
let var_a = t.variableDeclaration('let', [t.variableDeclarator(t.identifier('a'), t.numericLiteral(100))])
let code = generator(var_a).code
// let a = 100;
这边再列举一个生成函数声明代码的例子（不做解读），要生成的代码如下
function b(x, y) {
return x + y
}
types 操作
let param_x = t.identifier('x')
let param_y = t.identifier('y')
let func_b = t.functionDeclaration(t.identifier('b'), [param_x, param_y], t.blockStatement([t.returnStatement(t.binaryExpression('+', param_x, param_y))]))
let code = generator(func_b).code
大致步骤可以总结成一下几点
1、将要生成的 js 代码进行 ast Explorer 查看树结构，理清所要构造的代码节点（很重要）
2、找到最顶层的结果，如 variableDeclaration，查看该代码所对应的参数
3、进一步的分析内层节点结构，构造出最终的原始代码。
types 还有一个方法valueToNode，先看演示
let arr_c = t.valueToNode([1, 2, 3, 4, 5])
console.log(arr_c)
{
type: 'ArrayExpression',
elements: [
{ type: 'NumericLiteral', value: 1 },
{ type: 'NumericLiteral', value: 2 },
{ type: 'NumericLiteral', value: 3 },
{ type: 'NumericLiteral', value: 4 },
{ type: 'NumericLiteral', value: 5 }
]
}
如果使用numericLiteral来生成这些字面量的话那要写的话代码可能就要像下面这样
let arr_c = t.arrayExpression([t.numericLiteral(1), t.numericLiteral(2), t.numericLiteral(3), t.numericLiteral(4), t.numericLiteral(5)])
而valueToNode能很方便地生成各种基本类型，甚至是一些对象类型（RegExp，Object 等）。不过像函数这种就不行。
t.valueToNode(function b(x, y) {
return x + y
})
// throw new Error(\"don't know how to turn this value into a node\");
写到着，其实不难发现，每个 node 节点其实就是一个 json 对象，而 types 只是将其封装好方法，供使用者调用，像下面这样方式定义 arr_c，同样也能生成数组 [1, 2, 3, 4, 5]
let arr_c = {
type: 'ArrayExpression',
elements: [
{ type: 'NumericLiteral', value: 1 },
{ type: 'NumericLiteral', value: 2 },
{ type: 'NumericLiteral', value: 3 },
{ type: 'NumericLiteral', value: 4 },
{ type: 'NumericLiteral', value: 5 },
],
}
let code = generator(arr_c).code
至于生成其他的语句，原理与上述一致，篇幅有限不在做其他例子演示了，Babel 中的 API 很多，最主要的是懂得善用手册与代码提示，没有什么生成不了的语句，更没有还原不了的代码。
上述讲了基本的库操作，不难发现，使用到最多的还是 traverse，并且都会传入一个参数 path，并且path.node使用到的频率很多，能理解请两个的区别（Node 与 NodePath），基本上你想遍历到的地方就没有遍历不到的。
先说说 path 能干嘛，能停止遍历当前节点 （path.stop），能跳过当前节点（path.skip），还可以获取父级 path（path.parentPath ），替换当前节点（path.replaceWith），移除当前节点（path.remove）等等。
path.node 也就是当前节点所在的 Node 对象，比如loc、id、init，param、name等，这些都是在 node 对象下都是能直接获取到的。
不过获取到的是 node 对象，就无法使用 path 对象的方法了，如果要获取该属性的 path，就可以使用path.get('name')，获取到的就是 path 对象。不过对于一些特定的属性（name，operator）获取 path 对象就多此一举了。
一共有两种类型 Node 与 NodePath，记住有Path则是path，如path就属于NodePath，而path.node 属于Node。
![\"image-20211213021420326\"](\"https://img.kuizuo.cn/image-20211213021420326.png\")
有时候遍历到一系列的代码，想输出一下原始代码，那么有以下两种方式。
traverse(ast, {
FunctionDeclaration(path) {
console.log(generator(path.node).code)
console.log(path.toString())
},
})
与获取节点属性相同，比如我需要修改函数的第一个参数，那么我只要获取到第一个参数，并且将值赋值为我想修改值（node 对象）便可。
traverse(ast, {
FunctionDeclaration(path) {
path.node.params[0] = t.identifier('x')
},
})
替换的相关方法有
replaceWith 一对一替换当前节点，且严格替换。
path.replaceWith(t.valueToNode('kuizuo'))
replaceWithMultiple 则是一对多，将多个节点替换到一个节点上。
traverse(ast, {
ReturnStatement(path) {
path.replaceWithMultiple([t.expressionStatement(t.callExpression(t.memberExpression(t.identifier('console'), t.identifier('log')), [t.stringLiteral('kuizuo')])), t.returnStatement()])
path.stop()
},
})
要注意的是，替换节点要非常谨慎，就比如上述代码，如果我遍历 return 语句，同时我又替换成了 return 语句，替换后的节点同样是可以进入到遍历里，如果不进行停止，将会造成死循环，所以这里才使用了path.stop完全停止当前遍历，直到下一条 return 语句。
path.skip()跳过遍历当前路径的子路径。path.stop()完全停止当前遍历
relaceInline 接收一个参数，如果不为数组相当于replaceWith，如果是数组相当于replaceWithMultiple
replaceWithSoureString 该方式将字符串源码与节点进行替换，例如
// 要替换的函数
function add(a, b) {
return a + b
}
traverse(ast, {
FunctionDeclaration(path) {
path.replaceWithSourceString(`function mult(a, b){
return a * b
}`)
path.stop()
},
})
// 替换后的结果
// (function mult(a, b) {
// return a * b;
// });
traverse(ast, {
EmptyStatement(path) {
path.remove()
},
})
EmptyStatement指空语句，也就是多余的分号。
insertBefore与insertAfter分别在当前节点前后插入语句
traverse(ast, {
ReturnStatement(path) {
path.insertBefore(t.expressionStatement(t.stringLiteral('before')))
path.insertAfter(t.expressionStatement(t.stringLiteral('after')))
},
})
path.parent 表示父级的 node
path.parentPath 表示父级的 path，也就是 NodePath
path.parentPath.node === path.parent 两者效果一样，都是获取 Node 对象。
此外还有一些方法也可以获取父级 Path
path.findParent 向上遍历每一个父级 Path 并根据条件返回，与数组 find 方式类型。
traverse(ast, {
BinaryExpression(path) {
let parent = path.findParent((p) => p.isFunctionDeclaration())
console.log(parent.toString())
},
})
path.find 与 findParent 方式类似，不过 find 方法不包括当前节点，而 findParent 不包括。
path.getFunctionParent 向上查找与当前节点最接近的父函数，返回的是 Path 对象。
path.getStatementParent 遍历语法树，直到找到语句节点（带有 Statement），如 return 语句（ReturnStatement），if 语句（IfStatement），块级语句（BlockStatement）
path 有一个属性 container，表示当前节点所处于的那个节点下，共有那些同级节点，而 listKey 表示容器名。key 表示索引或是是容器对象的属性名
traverse(ast, {
ReturnStatement(path) {
console.log(path.key)
console.log(path.listKey)
console.log(path.container)
},
})
// 输出结果
0
body
[
Node {
type: 'ReturnStatement',
start: 24,
end: 36,
loc: SourceLocation {
start: [Position],
end: [Position],
filename: undefined,
identifierName: undefined
},
argument: Node {
type: 'BinaryExpression',
start: 31,
end: 36,
loc: [SourceLocation],
left: [Node],
operator: '+',
right: [Node]
}
}
]
在 ast 树结构中框中所表示
![\"image-20211216200502122\"](\"https://img.kuizuo.cn/image-20211216200502122.png\")
也并不是说所有节点都有同级节点，也并不是所有的 container 都是一个数组，例如下面这个例子
let obj = {
name: 'kuizuo',
}
init
undefined
Node {
type: 'VariableDeclarator',
start: 4,
end: 30,
loc: SourceLocation {
start: Position { line: 1, column: 4 },
end: Position { line: 3, column: 1 },
filename: undefined,
identifierName: undefined
},
id: Node {
type: 'Identifier',
start: 4,
end: 7,
loc: SourceLocation {
start: [Position],
end: [Position],
filename: undefined,
identifierName: 'obj'
},
name: 'obj'
},
init: Node {
type: 'ObjectExpression',
start: 10,
end: 30,
loc: SourceLocation {
start: [Position],
end: [Position],
filename: undefined,
identifierName: undefined
},
properties: [ [Node] ]
}
}
对应 AST 树结构中所框选
![\"image-20211216201242257\"](\"https://img.kuizuo.cn/image-20211216201242257.png\")
也就是说该节点并没有同级节点
其中关于同级节点有以下几种方法。
path.inList 判断 container 属性是否为数组
path.getSibling(index) 获取当前节点所在容器中索引对应的同级节点，index 可通过 path.key 获取。
其中还有unshiftContainer与pushContainer，在容器前与后添加节点，与Array.unshift和Array.push方法类似，不过基本没怎么用过，便不做实例了。
path.scope 字面名意思为作用域，可以方便查找标识符的引用。如当前变量的哪里被调用了，标识符为参数还是变量。
演示代码
function test() {
let obj = {
name: 'kuizuo',
}
return obj
}
scope.block 返回 Node 对象，使用方法分为两种情况，变量与函数。
traverse(ast, {
ObjectExpression(path) {
let block = path.scope.block
console.log(generator(block).code)
},
})
// function test() {
// let obj = {
// name: 'kuizuo'
// };
// return obj;
// }
返回的是整个函数体代码
traverse(ast, {
ObjectExpression(path) {
let block = path.scope.block
console.log(generator(block).code)
},
})
// function test() {
// let obj = {
// name: 'kuizuo'
// };
// return obj;
// }
由于scope.block返回的是 Node 对象，将就无法使用 path.toString()转为原始代码了。
scope.getBinding() 接收一个参数，可用于获取标识符的绑定，这里的 binding 可能会有些抽象，在一开始的例子中初次接触到
traverse(ast, {
VariableDeclarator(path) {
let name = path.node.id.name
if (name === 'tips') {
let binding = path.scope.getOwnBinding(name)
console.log(binding)
binding.scope.rename(name, '_0xabcdef')
}
},
})
其中这里的 binding 是属性相对较多，下面会一一介绍
Binding {
identifier: Node {type: 'Identifier', name: 'tips'},
scope: <ref *1> Scope {
path: NodePath {...},
kind: 'let',
constantViolations: [],
constant: true,
referencePaths: [
NodePath {...}
],
referenced: true,
references: 1,
hasDeoptedValue: false,
hasValue: false,
value: null
}
要注意的是，getBinding 中传的值必须是当前节点能够引用到的标识符，如果当前标识符不存在，那么返回 undefined。
identifier 是标识符 tips 的 Node 的对象，path 则是标识符 Path 对象，constant 为布尔值，表示当前标识符是否为常量，referenced 表示当前节点是否被引用。references 表示引用的次数。
binding 中的 scope 等同于 path 中的 scope，作用域范围相同。
scope.getOwnBinding() 获取当前节点下的绑定，不包含其他父级中定义的标识符，会包含子函数中定义的标识符绑定。
假如标识符被引用，referencePaths 中会存放所有引用该标识的 path 对象数组。像下面这样
referencePaths: [
NodePath {
contexts: [],
state: [Object],
opts: [Object],
_traverseFlags: 0,
skipKeys: null,
parentPath: [NodePath],
container: [Node],
listKey: undefined,
key: 'object',
node: [Node],
type: 'Identifier',
parent: [Node],
hub: undefined,
data: null,
context: [TraversalContext],
scope: [Scope]
}
],
而 constantViolations 则是存放所有修改标识符的 Path 对象。
这在一开始的例子中就简单介绍过了，使用的是 rename 方法，能将该标识符中所有引用的地方重命名，不过上面的例子只是重命名 tips，想要重命名所有标识符的话，就需要遍历 Identifier。不过重命名标识符不能都重命名为相同字符，有一个 api path.scope.generateUidIdentifier 用于生成唯一不重复标识符。
traverse(ast, {
Identifier(path) {
path.scope.rename(path.node.name, path.scope.generateUidIdentifier('_0xabcdef').name)
},
})
最终生成的代码如下
**
* Paste or drop some JavaScript here and explore
* the syntax tree created by chosen parser.
* You can use all the cool new features from ES6
* and even more. Enjoy!
*/
let _0xabcdef11 = [\"Click on any AST node with a '+' to expand it\", \"Hovering over a node highlights the \\
corresponding location in the source code\", \"Shift click on an AST node to expand the whole subtree\"];
function _0xabcdef2() {
_0xabcdef11.forEach((_0xabcdef10, _0xabcdef9) => console.log(`Tip ${_0xabcdef9}:` + _0xabcdef10));
}
scope.hasBinding('a') 查询是否有标识符 a 的绑定
scope.getAllBindings() 获取当前节点下所有绑定，返回一个对象，以标识符名作为属性名，值为 binding。
scope.hasReference('a') 查询当前节点是否有标识符 a 的引用。
当然大部分的 api 还需要自行翻阅文档，或通过代码提示与动态调试查看方法，举一反三，来达到所想要的目的。
关于混淆实战的代码都已贴到 Githubkuizuo/AST-obfuscator，在src/obfuscated中便可看到完整的混淆程序。其中也包括一些实战还原的例子，大部分的写法都采用了 ES6 的类来写，方便编写理解。
大部分混淆的例子在这本书《反爬虫 AST 原理与还原混淆实战》中都有，例如常量混淆，数组混淆与乱序，标识符混淆等等就不细说了，上传的代码中有，不过书中有一些 es6 的代码是没提及到的。
与StringLiteral不同，模板字符串的 type 是TemplateLiteral，所以是遍历不到模板字符串的。下文将用代码来实现将模板字符串转为字符串拼接
演示代码
let a = 'kuizuo'
;`${a}nb${12}3${'456'}`
分析 AST 树结构
![\"image-20211217161958075\"](\"https://img.kuizuo.cn/image-20211217161958075.png\")
不难观察出，parser 将其成两部分expressions与quasis。而所要转为的最终代码应该是'' + a + 'nb' + 12 + '3' + '456'+ ''，并且quasis成员个数始终比expressions多一位，所以只需要将expressions插入置quasis成员内，然后通过 binaryExpression 进行拼接即可。大致的思路有了，那么就开始用代码来进行拼接。
traverse(ast, {
TemplateLiteral(path) {
let { expressions, quasis } = path.node
// 将expressions节点逐个插入到quasis节点上
for (const i in expressions) {
let e = expressions[i]
quasis.splice(i * 2 + 1, 0, e)
}
let newExpressions = quasis
// 循环新的表达式节点构造出二项式表达式
let binary
for (let i = 0; i < newExpressions.length; i++) {
let left = binary
let right = newExpressions[i]
if (i === 0) {
left = t.valueToNode(right.value.raw)
binary = left
continue
}
if (t.isTemplateElement(right)) {
// if (right.value.raw === '') continue
right = t.valueToNode(right.value.raw)
}
binary = t.binaryExpression('+', left, right)
}
path.replaceWith(binary)
},
})
最终输出 \"\" + a + \"nb\" + 12 + \"3\" + \"456\" + \"\"
同样，类名与类方法名同样也是可以混淆的，演示代码如下
class Test {
age = 20
constructor(name) {
this.name = name
}
run() {
return this.name + this.age
}
}
let test = new Test('kuizuo')
console.log(test.run())
复制上述代码，观察 AST 树结构（图就不放了）
不难发现，其实就是 type ClassDeclaration、ClassProperty、ClassMethod，通过标识符混淆的方法renameIdentifier，将Program|FunctionExpression|FunctionDeclaration新增这两个 type 即可
traverse(ast, {
'Program|FunctionExpression|FunctionDeclaration|ClassDeclaration|ClassProperty|ClassMethod'(path) {
renameOwnBinding(path)
},
})
但混淆完的代码并没有把属性名与方法名给混淆到
class OOOOO0 {
age = 399100 ^ 399080
constructor(OOOOO0) {
this[atob(OOOOOO[226019 ^ 226019])] = OOOOO0
}
run() {
return this[atob(OOOOOO[255772 ^ 255772])] + this[atob(OOOOOO[982314 ^ 982315])]
}
}
不过这样混淆肯定远远不够的，方法可是类中很重要的属性，同时类方法与属性还能这么编写（constructor 不行），然后将下面的代码通过混淆程序执行一遍就能成功混淆变量名。
class Test {
['age'] = 20
constructor(name) {
this.name = name
}
['run']() {
return this.name + this.age
}
}
所以将run() 转为[‘run’]()便成为了关键。而实现起来也相对简单（与改变对象访问方式一样）
traverse(ast, {
'ClassProperty|ClassMethod'(path) {
if (t.isIdentifier(path.node.key)) {
let name = path.node.key.name
if (name === 'constructor') return
path.node.key = t.stringLiteral(name)
}
path.node.computed = true
},
})
最终运行混淆程序，执行混淆后的代码，成功输出kuizuo20
后续有时间再补充。。。
不改变原有代码的执行过程与结果，并不是随便混淆都行了，比如let c = a + b ，总不能混淆成 let OO = Oo - oO吧。其次要懂得利用 js 语法的特性来进行混淆，比如高阶函数，函数传参，jsfuck 等等。
混淆始终是混淆，只是将代码相对变得难以阅读，但不代表不可阅读。只要程序能运行，那么我就能调试，能调试还能有什么解决不了的（毕竟 bug 都是调试出来）。如果真想保全你的代码，那我的建议是编译成二进制文件，或采用远程调用的形式将执行后的结果返回。
通常来说，混淆会使你的代码数量增大至 2,3 倍，与加密壳同理，但程序的执行速度也会稍慢下，当然只要不是特别 ex 的混淆，如将函数调用封装至，3,4 层的调用导致调用堆栈过大，那么这种执行效率基本可以忽略不计。
既然混淆是通过 AST 来进行混淆的，那么还原也同样可以，不过还原就不可能还原出原始开发者所编写的，就如同一些打包工具打包后的代码，比如将 name 压缩成 n，age 压缩成 a，那么就无法推断出 n 为 name，a 为 age，而混淆也是同理，像代码let OOOOOO = atob('a3VpenVv')，能还原的也只能是let OOOOOO = ‘kuizuo’或者是将标识符重新命名let _0x123456 = ‘kuizuo’，相对好看些。大部分的还原工作都只是将代码变得好读一些，比如atob('a3VpenVv')就可以变为‘kuizuo’，这便是基本的还原之一，关于还原还会另出一篇文章来记录，就不在这多废笔舌了。
整个混淆的过程来看，无非就是多了门技能，对 js 有了更进一步的了解，略懂 js 编译过程中的语法分析，此外也感叹 Babel 提供如此强大的 api。同时也能尝试使用最新的 ECMAScript 语法特性，无需考虑兼容问题，babel 统统都能处理。就如同 babel 官网所说的：
现在就开始使用下一代 JavaScript 语法吧。
", "url": "https://kuizuo.cn/js-code-obfuscator", "title": "JS代码之混淆", "summary": "AST 在线解析 AST explorer", "date_modified": "2021-12-21T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "javascript", "ast", "reverse", "project" ] }, { "id": "js-function-hook", "content_html": "我在阅读《JavaScript 设计模式与开发实践》的第 15 章 装饰者模式，突然发现 JS 逆向中 hook 函数和 js 中的装饰者模式有点像，仔细阅读完全篇后更是对装饰器与 hook 有了更深的理解于是便有了这篇文章来记录一下该操作。
hook 直译的意思为钩子，在逆向领域通常用来针对某些参数，变量进行侦听，打印输出，替换等操作。
function add(a, b) {
return a + b
}
这是一个很简单加法函数，通过 Hook 能获取到这两个参数的值，相当于在 return 之前添加了一句代码console.log(a,b)，这样便能输出这两个的值便于分析。那么可以使用如下的方式来复写改函数，而这个方式在 javascript 也就是装饰者模式
let _add = add
add = function () {
console.log('arguments', arguments)
let result = _add.apply(this, arguments)
console.log('result', result)
return result // 如果不需要result 则可直接return _add()
}
完整代码
function add(a, b) {
return a + b
}
let _add = add
add = function () {
console.log('arguments', arguments)
let result = _add.apply(this, arguments)
console.log('result', result)
return result
}
add(1, 2)
再次调用add(1,2)便会输出 arguments 参数以及结果 3，一个很简单 HOOK 就实现了。
不过这个例子可能过于简单，我所要表达的意思是，通过 Hook，定位到我们想 Hook 的函数与变量，通过一系列操作（函数复写，元编程），只要触发该函数或使用（取值，修改）该变量，便能将我们想要的结果（前后的结果（如 加密前，加密后））获取到。这才是我们的目的。
书中给的例子想说明的，想为某个原函数(比如这里的 add)添加一些功能，但该原函数可能是由其他开发者所编写的，那么直接修改原函数本身将可能导致未知 BUG，于是便可以用上面的方式进行复写原函数的同时，还不破坏原函数。
但并不是什么函数都能这样操作，或者说这样操作会导致原本函数可能执行不了，比如 this 指向，虽说没有修改原函数，但是原函数的 this 已经给我们更改成当前环境下（如window），但有些函数比如document.getElementById() 的内部this指向为document，不妨尝试将下面代码直接复制到控制台中查看会报什么错
let _getElementById = document.getElementById
getElementById = function (id) {
console.log(1)
return _getElementById(id)
}
let div = getElementById('div')
报错:
Uncaught TypeError: Illegal invocation
at getElementById (<anonymous>:4:9)
at <anonymous>:7:11
解决办法:
只需要将 this 指向设置为 document 即可，代码改写如下
let _getElementById = document.getElementById
getElementById = function () {
console.log(1)
return _getElementById.apply(document, arguments)
}
let div = getElementById('div')
但这样做略显麻烦，且有些函数你可能都不知道 this 的指向，但又想要复写该函数，书中也提及到用 AOP 装饰函数
先给出 Function.prototype.before 和 Function.prototype.after方法
Function.prototype.before = function (beforefn) {
let __self = this
return function () {
beforefn.apply(this, arguments)
return __self.apply(this.arguments)
}
}
Function.prototype.after = function (afterfn) {
let __self = this
return function () {
let ret = __self.apply(this, arguments)
afterfn.apply(this, [ret])
return ret
}
}
注：这里 after 与书中略有不同，书中的是将arguments 传入afterfn.apply(this, arguments)，而我的做法则是将运行后的结果传入 afterfn.apply(this, [ret])
那么将我们一开始的加法例子便可以替换为
function add(a, b) {
return a + b
}
add = add
.before(function () {
console.log('arguments', arguments)
})
.after(function (result) {
console.log('result', result)
})
// 切记 这里不能写箭头函数 不然会指向的不是执行中的this 而是代码环境下的this
add(1, 2)
// arguments Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// result 3
注：这种装饰方式叠加了函数的作用域，如果装饰的链条过长，性能上也会受到一定的影响
但该方法是直接修改原型方法，有些不喜欢污染原型的方式（用原型方式是真的好写），那么做一些变通，将原函数和新函数作为参数传入，代码如下
let before = function (fn, beforefn) {
return function () {
beforefn.apply(this, arguments)
return fn.apply(this, arguments)
}
}
add 函数修改如下
add = before(add, function () {
console.log('arguments', arguments)
})
add(1, 2)
同样也能达到所要的目的。
add = function () {
console.log('arguments', arguments)
let result = _add.apply(this, arguments)
console.log('result', result)
return result
}
add = add
.before(function () {
console.log('arguments', arguments)
})
.after(function (result) {
console.log('result', result)
})
对比两者方法，前者是对函数进行替换，而后者通过函数原型链将参数与结果通过回调函数的形式进行使用。在不考虑 this 指向，我个人更偏向第一种写法，而第二种写法也确实让我眼前一亮，很巧妙的使用 js 的原型链，从而避免 this 指向的问题。
", "url": "https://kuizuo.cn/js-function-hook", "title": "JS函数hook", "summary": "前言", "date_modified": "2021-11-22T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "javascript", "hook" ] }, { "id": "remote-call-browser-function", "content_html": "早闻 RPC（Remote Procedure Call）远程过程调用，这一词了，应该是在安卓逆向的时候听闻的，当时吹嘘的意思是这样的，通过另一个远端服务器来调用安卓代码中的函数，并将执行后的结果返回。比如有一个加密算法，如果要实现脱机（脱离当前环境）运行的话，就需要扣除相对应的代码，补齐对应的环境（模块，上下文，语言），然而要在补齐该加密算法的环境可不好实现，而通过 RPC 则可以免除扣代码，通过数据通信来达到远程调用的目的，听起来是挺牛逼的，实际上也确实挺骚的。这里我将以浏览器与本地搭建一个 websocket 来实现调用浏览器内的函数。
这里我所采用的是百度登录的密码加密算法，具体逆向实现就不细写了，借用视频教程志远 2021 全新 js 逆向 RPC
通过关键词password: 便可找到对应的加密地点，找到加密调用的函数所出现的位置（loginv5.js 8944 行），发现通过调用e.RSA.encrypt(s)（其中 s 为明文 a123456），便可得到加密后的结果。
![\"image-20211008042148653\"](\"https://img.kuizuo.cn/image-20211008042148653.png\")
![\"image-20211008041300534\"](\"https://img.kuizuo.cn/image-20211008041300534.png\")
e.RSA.encrypt(s)
'Zhge9q9jkiMA0UTfHxwNeyafnuUG8rcAh/gKfQpZiOQq8EYI/tJO83lKr52c4Im3cew3wVcINf2jEGEqH5EimnMI3g6eOjcdqduGyqynA4JjMJ0wltGdL8VUTTJsknsHUQlJXHOm/7zqx4NaBvOzhWzdDBk5cAOJ2DXgPaqoygg='
按照往常的做法，需要将e.RSA.encrypt(s)所用的代码处单独抠出来，放在 V8 引擎上测试或使用现有的加密库 如 CryptoJS，找到对应的密钥来进行加密。不过这里使用 RPC 来实现该算法的调用。
目前调用的环境有了（浏览器环境），只要我们这个浏览器不停止（使用无头浏览器运行），控制台便能一直输出我们想要的加密后结果。所以要实现的目的很简单，就是其他窗口（指其他语言所实现的程序），能远程调用e.RSA.encrypt(s)并将结果输出到其他窗口。
那么就需要建立通信协议了，这里我所采用的是浏览器自带的 Websocket 客户端与 Nodejs 搭建的 Websocket 服务端来进行通信，众所周知 HTTP 请求是无法双向传输的。所以使用 websocket 这样服务端就可以主动向浏览器发送请求，同时 websocket 在当前这个环境下好实现。
npm install ws -S
npm install @types/ws -D
这里之所以选 ws，是因为 ws 对于 Websocket 协议而已，实现方便，且速度最快，并且浏览器可以通过let ws = new Websocket()来创建客户端直接连接，而使用 socket.io 的话，浏览器则需要载入 socket.io 客户端文件，繁琐。
import WebSocket, { WebSocketServer } from 'ws'
let ws = new WebSocketServer({
port: 8080,
})
ws.on('connection', (socket) => {
function message(msg) {
console.log('接受到的msg: ' + msg)
socket.send('我接受到你的数据: ' + msg)
}
socket.on('message', message)
})
使用 WebSocket 在线测试网站websocket 在线测试 (websocket-test.com)
测试结果如下
![\"image-20211008043925753\"](\"https://img.kuizuo.cn/image-20211008043925753.png\")
上面代码写的很简陋，尤其是数据交互的地方，这里可以使用 json 来改进一下。像这样，至于为啥用 try 是防止 json 数据不对导致解析错误（具体代码就不解读了）
import WebSocket, { WebSocketServer } from 'ws'
let ws = new WebSocketServer({ port: 8080 })
ws.on('connection', (socket) => {
console.log('有人连接了')
function message(data) {
try {
let json = JSON.parse(data) // data: {\"type\":\"callbackPasswordEnc\",\"value\":\"a123456\"}
let { type, value } = json
switch (type) {
case 'callbackPasswordEnc':
// doSomething()
console.log('得到的加密密文为:' + value)
break
}
} catch (error) {
console.error(error)
}
}
socket.on('message', message)
// 浏览器通信1秒后向浏览器调用加密算法
setTimeout(() => {
let jsonStr = JSON.stringify({
type: 'getPasswordEnc',
value: 'a123456',
})
socket.send(jsonStr)
}, 1000)
})
既然要实现我们的代码，那么就需要将我们的代码注入到原来的代码上，这里我使用的是 Chrome 的开发者工具中的覆盖功能，选择一个本地文件夹，并允许权限。
![\"image-20211008054918531\"](\"https://img.kuizuo.cn/image-20211008054918531.png\")
选择要替换代码的文件，选择保存以备替换（前提得开启覆盖）
![\"image-20211008055032125\"](\"https://img.kuizuo.cn/image-20211008055032125.png\")
接着在覆盖中找到文件，找到加密的代码块，添加如下代码
!(function () {
let url = 'ws://127.0.0.1:8080'
let ws = new WebSocket(url)
// 浏览器连接后告诉服务端是浏览器
ws.onopen = function (event) {
ws.send(JSON.stringify({ type: 'isBrowser', value: true }))
}
ws.onmessage = function (event) {
let json = JSON.parse(event.data)
let { type, value } = json
switch (type) {
case 'getPasswordEnc':
let passwordEnc = e.RSA.encrypt(value)
let jsonStr = JSON.stringify({
type: 'callbackPasswordEnc',
value: passwordEnc,
})
console.log(jsonStr)
ws.send(jsonStr)
break
}
}
})()
![\"image-20211008201809446\"](\"https://img.kuizuo.cn/image-20211008201809446.png\")
然后就是最关键的地方了，触发加密函数，并将结果返回。触发加密函数只需要向浏览器发送指定数据{\"type\":\"getPasswordEnc\",\"value\":\"a123456\"}，浏览器接受到对应的类型与数据，便调用相应的函数，并将结果{\"type\":\"callbackPasswordEnc\",\"value\":\"FM6SK3XiL5X0RF9NZi7qhIsu7Pd46mfKnn6YkWUNSGrJO+XXhiXyoG8huaqQW4BnmYuo0JVVQj28C+BK/r6NTNbLcV4gMSREB2hYU/oIYedCJsZ9sbZQ89p1aI9kVcDeRlXBhjNUxkcS9Rh+vKzyNApwpbPcAuGTCSZhKst8vVo=\"}返回即可。
服务端的效果如下图
![\"image-20211008204247104\"](\"https://img.kuizuo.cn/image-20211008204247104.png\")
实现是实现了，但是代码貌似很不优雅，甚至有点别扭。按理来说因为是浏览器作为 websocket 服务端，我们作为客户端，客户端向服务器获取数据才合理，但在这里浏览器当不了 websocket 服务端这个角色，所以只能使用如此别扭的方式来调用。像上面例子的话，如果我的程序要实现一个某度登录的话，那么我这个程序就需要搭建一个 ws 服务器来进行两者的通信，有没有好的办法又不太依赖于 ws 服务端，就像 http 那样，程序只需要发送一个请求，给定类型和数值进行加密处理后返回即可。于是我处理的思路是这样的。
我的做法是将 websocket 服务端当个中转站，而浏览器的 websocket 客户端作为一个加密算法的服务，再添加一个登录算法实现的客户端简称为用户调用的，所以现在一共有三份代码（websocket 服务端，浏览器端，用户调用端）。这里我还是以 nodejs 为例。
浏览器 websocket 客户端的代码，在初次连接的时候，告诉 websocket 服务端是不是浏览器。并将于浏览器连接的 socket 句柄存入全局对象，以便用户获取加密参数的时候向浏览器调用。
ws.onopen = function (event) {
ws.send(JSON.stringify({ type: 'isBrowser', value: true }))
}
import WebSocket from 'ws'
async function getPasswordEnc(password) {
return new Promise((resolve, reject) => {
const ws = new WebSocket('ws://127.0.0.1:8080')
ws.on('open', () => {
let jsonStr = JSON.stringify({
type: 'getPasswordEnc',
value: password,
})
ws.send(jsonStr)
})
ws.on('message', (message) => {
let json = JSON.parse(message)
let { type, value } = json
switch (type) {
case 'callbackPasswordEnc':
ws.close()
resolve(value)
break
}
})
})
}
async function run() {
let passwordEnc = await getPasswordEnc('a123456')
console.log(passwordEnc)
}
run()
这里对代码进行解读一下，我自行封装了一个函数，其中函数返回的是一个 Promise 对象，值则是对应的加密后的密文。如果我这边不采用 promise 来编写的话，那么获取到的数据将十分不好返回给我们的主线程。这里对于 js 的 Promise 使用需要花费点时间去理解。总而言之，通过 promise，以及 async await 语法糖，能很轻松的等待 websocket 连接与接收数据。但还是用 websocket 协议
同时 websocket 服务端肯定要新增一个类型用于判断是登录算法实现的客户端。同时又新的用户要调用，所以这里使用了 uuid 这个模块来生成唯一的用户 id，同时还定义一个变量 clients 记录所连接过的用户（包括浏览器），完整代码如下
import WebSocket, { WebSocketServer } from 'ws'
import { v4 as uuidv4 } from 'uuid'
let ws = new WebSocketServer({ port: 8080 })
let browserWebsocket = null
let clients = []
ws.on('connection', (socket) => {
let client_id = uuidv4()
clients.push({
id: client_id,
socket: socket,
})
socket.on('close', () => {
for (let i = 0; i < clients.length; i++) {
if (clients[i].id == client_id) {
clients.splice(i, 1)
break
}
}
})
socket.on('message', (message) => {
try {
let json = JSON.parse(message)
let { id, type, value } = json
switch (type) {
case 'isBrowser':
if (value) {
browserWebsocket = socket
}
console.log('浏览器已初始化')
break
// 发送给浏览器 让浏览器来调用并返回
case 'callbackPasswordEnc':
// 根据id找到调用用户的socket,并向该用户发送加密后的密文
let temp_socket = clients.find((c) => c.id == id).socket
temp_socket.send(message)
break
// 用户发送过来要加密的明文
case 'getPasswordEnc':
let jsonStr = JSON.stringify({
id: client_id,
type: type,
value: value,
})
// 这里一定要是浏览器的websocket句柄发送，才能调用
browserWebsocket.send(jsonStr)
break
}
} catch (error) {
console.log(error.message)
}
})
})
最终演示效果如下视频（浏览器代码是提前注入进去的）
其实还是一些是要完善的，这里的 Websocket 只是实现了连接，还有心跳包异常断开，浏览器异常关闭导致 websocket 断开无法调用函数等等，以及浏览器的代码还需要手动注入很不优化，后续如果使用 Chrome 插件开发一个实现注入 js 代码的功能也许会好一些。（正准备编写 Chrome 插件）
但是，以上都是基于 WebSocket 协议，就连用户端调用也是，然而用户调用没必要保持长连接且不利于调用（相对一些语言而言），有没有能直接使用 http 协议，通过 POST 请求来实现获取参数，这才是我所要实现的。
其实要实现也很简单，我只要把用户调用的 getPasswordEnc 这个函数 弄到 node 创建的一个 http 服务端就行了，我这里的做法也是如此。像下面这样
async function getPasswordEnc(password) {
return new Promise((resolve, reject) => {
const ws = new WebSocket('ws://127.0.0.1:8080')
ws.on('open', () => {
let jsonStr = JSON.stringify({
type: 'getPasswordEnc',
value: password,
})
ws.send(jsonStr)
})
ws.on('message', (message) => {
let json = JSON.parse(message)
let { type, value } = json
switch (type) {
case 'callbackPasswordEnc':
ws.close()
resolve(value)
break
}
})
})
}
// 创建http服务
const app = http.createServer(async (request, response) => {
let { pathname, query } = url.parse(request.url, true)
if (pathname == '/getPasswordEnc') {
let passwordEnc = await getPasswordEnc(query.password)
response.end(passwordEnc)
}
})
app.listen(8000, () => {
console.log(`服务已运行 http://127.0.0.1:8000/`)
})
发送 GET 请求 URL 为 http://127.0.0.1:8000/getPasswordEnc?password=a123456 实现效果如图
![\"image-20211009040704534\"](\"https://img.kuizuo.cn/image-20211009040704534.png\")
对于用户调用来说相对友好了不少（其实是很好），不用在创建 websocket 客户端，只需要发送 HTTP 请求（GET 或 POST），不过我这边使用的是 Node 自带的 http 模块来搭建的一个 http 服务器，实际使用中将会采用 express 来编写路由提高开发效率和代码可读性，这里只是作为演示。
至于说我为什么要在 http 内在新建一个 ws 客户端，主要原因还是 websocket 服务端向浏览器发送调用的算法，但只能在 websocket 服务端中的通过 onmessage 接受，无法在 http 服务端接受到，就别说向用户端返回了。这里其实只是不让用户来进行连接 websocket，而是我们本地（服务器）在接受到 getPasswordEnc 请求，复现了一遍上面用户连接 websocket 的例子，并将其转为 http 请求返回给用户而已。
其实也就是多了一个调用的 HTTP 服务器，而这里将 http 服务器与 websocket 服务器写到一起而已
https://github.com/kuizuo/rpc-browser.git
运行方式请查看 README.md
", "url": "https://kuizuo.cn/remote-call-browser-function", "title": "RPC远程调用浏览器函数", "summary": "早闻 RPC（Remote Procedure Call）远程过程调用，这一词了，应该是在安卓逆向的时候听闻的，当时吹嘘的意思是这样的，通过另一个远端服务器来调用安卓代码中的函数，并将执行后的结果返回。比如有一个加密算法，如果要实现脱机（脱离当前环境）运行的话，就需要扣除相对应的代码，补齐对应的环境（模块，上下文，语言），然而要在补齐该加密算法的环境可不好实现，而通过 RPC 则可以免除扣代码，通过数据通信来达到远程调用的目的，听起来是挺牛逼的，实际上也确实挺骚的。这里我将以浏览器与本地搭建一个 websocket 来实现调用浏览器内的函数。", "date_modified": "2021-10-09T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "javascript", "rpc", "browser" ] }, { "id": "thinkphp-deploy", "content_html": "用户花了几百块购买了一份 ThinkPHP 一个后台管理的网站源码，要求更换下部分失效接口，或是重写一个类似这样的网站。我想既然都有源码了，我改改不就完事了，这不比重写一个来的省事。虽说我不是主学 PHP 的，但至少我学过一丢丢的 PHP，接触过 ThinkPHP 项目的。不过层面都是局限在本地，部署到生产环境与本地还是有比较大的差别的，于是便有了这篇文章来记录一下自己部署 ThinkPHP 所遇到的一些坑。
也可理解为本地部署，本地部署就相对比较简单的了。不过需要一个工具，PHPStudy，来帮助我们配置本地的环境（Apache、Nginx、PHP、Mysql）
小皮面板(phpstudy) - 让天下没有难配的服务器环境！ (xp.cn)
下载安装打开界面，选择网站，创建网站
![\"image-20210925143601530\"](\"https://img.kuizuo.cn/image-20210925143601530.png\")
由于是本机，所以域名就填写 localhost 或 127.0.0.1，端口的话这边所填写的是 4200，别和其他端口冲突即可。
由于 ThinkPHP 的根目录要选择的是根目录下的 public 目录，不然找不到 index.php 这个文件，所以这里根目录自己指定一下源码的位置，点击确认即可。
这时候访问 http://localhost:4200 提示如下
![\"image-20210925143752775\"](\"https://img.kuizuo.cn/image-20210925143752775.png\")
本着不会就百度的原则，很快就找到了解决办法
ThinkPHP 报错 The requested URL /index/index/xxx.html was not found on this server
在入口文件夹 public 下查看.htaccess 是否存在。不存在则新建，存在的话，那内容替换为下面这串代码 就可以解决 Not Fund 问题
#<IfModule mod_rewrite.c>
# Options +FollowSymlinks -Multiviews
# RewriteEngine On
#
# RewriteCond %{REQUEST_FILENAME} !-d
# RewriteCond %{REQUEST_FILENAME} !-f
# RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]
#</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]
</IfModule>
上面配置完毕后，再次打开出现如下提示。
![\"image-20210925144143248\"](\"https://img.kuizuo.cn/image-20210925144143248.png\")
遇到错误是很正常的，现在要做的就是输出报错信息，而不是简短的文字。到根目录下 config/app.php 中，将调试更改为 true（切记，生产环境中一定要更改为 false，不然用户就能查看报错详情以及对应代码）
![\"image-20210925144424361\"](\"https://img.kuizuo.cn/image-20210925144424361.png\")
再次访问页面提示
![\"image-20210925144620953\"](\"https://img.kuizuo.cn/image-20210925144620953.png\")
报错信息倒是很全，不过要关注的是报错行和提示，大致意思就是没有定义数据库用户名 ml 以及密码，毕竟数据库啥的都好像没配置，要是能启动起来那估计就真是一个 bug 了，那就先找到配置文件，看看原本的账号密码是多少，数据库配置文件位置config/database.php
![\"image-20210925145740851\"](\"https://img.kuizuo.cn/image-20210925145740851.png\")
不过 PHPstudy 用户名和密码长度都要在 6 位以上（Linux 倒是不用），所以勉为其难，把用户名和密码都改成 ml1234，接着 Mysql 导入源码给定的数据库文件(sql 文件)，什么，你说源码没有给数据库文件，那我建议直接删源码，并且接下来的内容也可以不用看了。
数据库导入完毕后，再次访问便能看到正常的首页了，就此就算部署完毕了，这里就不放首页图了。
Linux 部署和 Windows 部署是有一丢丢差别的，这里我也列举一下，环境是 CentOS 7.6，安装了宝塔面板
在宝塔面板出网站，添加网站，如同 PHPstudy，配置大致相同。
![\"image-20210926050508693\"](\"https://img.kuizuo.cn/image-20210926050508693.png\")
情况 1，如图
![\"image-20210925155027023\"](\"https://img.kuizuo.cn/image-20210925155027023.png\")
解决办法：点击网站，设置，将防跨站攻击关闭并保持，如下
![\"image-20210925155445084\"](\"https://img.kuizuo.cn/image-20210925155445084.png\")
接着再次访问网站会出现 404 页面不存在报错，在设置中找到伪静态，添加一个 thinkphp 的配置，如下
![\"image-20210925155705573\"](\"https://img.kuizuo.cn/image-20210925155705573.png\")
再次访问后，出现的就是数据库配置的问题，配置一下数据库，导入数据，然后再次访问便可。
再次提醒，生产环境下，请将app_debug设置为 false，不然非法用户可以通过人为试错，查询对应报错代码。
之前学习爬虫的时候，如果是 HTML 的数据，通过 xpath 或是 css 选择器，就能很快的获取我们想要的数据，如果是 json 有没有类似 xpath 这种，能够直接根据条件定位数据，而不需要自行 json 解析在遍历获取。答案是有的，也就是 JSONPath。
在线测试网址 JSONPath 在线验证
所选用的环境是 Node + JavaScript，用到 jsonpath 这个包 jsonpath - npm (npmjs.com)
| JSONPath | 描述 |
|---|---|
| $ | 根对象或元素. |
| @ | 当前对象或元素. |
| . or [] | 子元素操作符. |
| .. | 递归匹配所有子元素. |
| * | 通配符. 匹配所有对象或元素. |
| [] | 下标运算符，JsonPath 索引从 0 开始. |
| [,] | 连接运算符，将多个结果拼成数组返回，JSONPath 允许使用别名. |
| [start:end1:step] | 数组切片运算符. |
| ?() | 过滤器（脚本）表达式. |
| () | 脚本表达式. |
| || | 表达式 或 |
| && | 表达式 且 |
通常的表达式格式为：[?(@.age > 18)] 表示当前节点属性 age 大于 18
| 操作符 | 描述 |
|---|---|
| == | 等于符号，但数字 1 不等于字符 1(note that 1 is not equal to ‘1’) |
| != | 不等于符号 |
| < | 小于符号 |
| <= | 小于等于符号 |
| > | 大于符号 |
| >= | 大于等于符号 |
| =~ | 判断是否符合正则表达式，例如[?(@.name =~ /foo.*?/i)] |
| in | 所属符号，例如[?(@.size in [‘S’, ‘M’])] |
| nin | 排除符号 |
| size | size of left (array or string) should match right |
| empty | 判空 Null 符号 |
语法就这些，不过单单有语法，不实践肯定是不够的。下面就是一些官方简单例子操作，还有一个终极实战
var jp = require('jsonpath')
var cities = [
{ name: 'London', population: 8615246 },
{ name: 'Berlin', population: 3517424 },
{ name: 'Madrid', population: 3165235 },
{ name: 'Rome', population: 2870528 },
]
var names = jp.query(cities, '$..name')
// [ \"London\", \"Berlin\", \"Madrid\", \"Rome\" ]
如果使用 js 来遍历的话，也简单
let names = cities.map((c) => c.name)
这个数据可能还没那么复杂，在看看下面这个例子，代码来源于https://goessner.net/articles/JsonPath
{
\"store\": {
\"book\": [
{
\"category\": \"reference\",
\"author\": \"Nigel Rees\",
\"title\": \"Sayings of the Century\",
\"price\": 8.95
},
{
\"category\": \"fiction\",
\"author\": \"Evelyn Waugh\",
\"title\": \"Sword of Honour\",
\"price\": 12.99
},
{
\"category\": \"fiction\",
\"author\": \"Herman Melville\",
\"title\": \"Moby Dick\",
\"isbn\": \"0-553-21311-3\",
\"price\": 8.99
},
{
\"category\": \"fiction\",
\"author\": \"J. R. R. Tolkien\",
\"title\": \"The Lord of the Rings\",
\"isbn\": \"0-395-19395-8\",
\"price\": 22.99
}
],
\"bicycle\": {
\"color\": \"red\",
\"price\": 19.95
}
}
}
| JsonPath | Result |
|---|---|
$.store.book[*].author | 所有 book 的 author 节点 |
$..author | 所有 author 节点 |
$.store.* | store 下的所有节点，book 数组和 bicycle 节点 |
$.store..price | store 下的所有 price 节点 |
$..book[2] | 匹配第 3 个 book 节点 |
$..book[(@.length-1)]，或 $..book[-1:] | 匹配倒数第 1 个 book 节点 |
$..book[0,1]，或 $..book[:2] | 匹配前两个 book 节点 |
$..book[?(@.isbn)] | 过滤含 isbn 字段的节点 |
$..book[?(@.price<10)] | 过滤price<10的节点 |
$..* | 递归匹配所有子节点 |
对应的语法可直接到在 JSONPath 在线验证网站上进行测试。要提一点的是，jsonpath 是支持使用 || 与 && 进行过滤的，比如上面要获取 category 为 fiction，price 大于 10 的语法为$..book[?(@.price>10 && @.category==\"fiction\")] 结果如下
[
{
\"category\": \"fiction\",
\"author\": \"Evelyn Waugh\",
\"title\": \"Sword of Honour\",
\"price\": 12.99
},
{
\"category\": \"fiction\",
\"author\": \"J. R. R. Tolkien\",
\"title\": \"The Lord of the Rings\",
\"isbn\": \"0-395-19395-8\",
\"price\": 22.99
}
]
也许你会觉得上面的例子太过简单了，可能没达到你预期所想要的效果，甚至还不如使用 json 遍历呢，下面我列举一个是我实战中遇到的例子（实际上这样的例子特别多），我先把部分数据展示出来（删除部分没用到的参数，实际参数远比这多），然后通过 js 遍历，以及 jsonpath 来获取我想要的数据。
![\"image-20210919194116296\"](\"https://img.kuizuo.cn/image-20210919194116296.png\")
{
\"role\": \"unit\",
\"children\": [
{
\"role\": \"section\",
\"children\": [
{
\"role\": \"node\",
\"children\": [
{
\"summary\": \"{\\\"indexMap\\\": {}, \\\"questionsList\\\": []}\",
\"role\": \"group\",
\"tab_type\": \"text\",
\"name\": \"Learning objectives\",
\"scoreDetail\": [],
\"id\": \"u1g2\",
\"url\": \"u1g2\",
\"tags\": []
}
],
\"suggestedDuration\": \"0\",
\"name\": \"1-1 Learning objectives\",
\"block_id\": \"90ed499f91084e2aa1b7032d2e4ecd76\",
\"url\": \"u1g1\",
\"tags\": []
}
],
\"name\": \"Learning objectives\",
\"tags\": []
},
{
\"role\": \"section\",
\"children\": [
{
\"role\": \"node\",
\"children\": [
{
\"role\": \"node\",
\"children\": [
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"Practice-1\",
\"scoreDetail\": [0],
\"id\": \"u1g6\",
\"url\": \"u1g6\",
\"tags\": []
},
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"Practice-2\",
\"scoreDetail\": [1, 1, 1, 1],
\"id\": \"u1g7\",
\"url\": \"u1g7\",
\"tags\": []
},
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"Practice-3\",
\"scoreDetail\": [1, 1, 1, 1, 1],
\"id\": \"u1g544\",
\"url\": \"u1g544\",
\"tags\": []
},
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"Practice-4\",
\"scoreDetail\": [1, 1, 1, 1, 1],
\"id\": \"u1g9\",
\"url\": \"u1g9\",
\"tags\": []
}
],
\"name\": \"Practice\",
\"block_id\": \"f6768dc9474746b9ba071e7f211534d9\",
\"url\": \"u1g5\",
\"tags\": []
}
],
\"suggestedDuration\": \"0\",
\"name\": \"1-2 Sharing\",
\"block_id\": \"1c97a87a9feb4a8aa7d6ed39482d866d\",
\"url\": \"u1g3\",
\"tags\": []
},
{
\"role\": \"node\",
\"children\": [
{
\"role\": \"group\",
\"tab_type\": \"video\",
\"name\": \"Get the skills\",
\"scoreDetail\": [],
\"id\": \"u1g16\",
\"url\": \"u1g16\",
\"tags\": []
},
{
\"role\": \"node\",
\"children\": [
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"Use the skills-1\",
\"scoreDetail\": [0, 0],
\"id\": \"u1g615\",
\"url\": \"u1g615\",
\"tags\": []
},
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"Use the skills-2\",
\"scoreDetail\": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
\"id\": \"u1g18\",
\"url\": \"u1g18\",
\"tags\": []
},
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"Use the skills-3\",
\"scoreDetail\": [0, 0, 0, 0, 0, 0, 0],
\"id\": \"u1g19\",
\"url\": \"u1g19\",
\"tags\": []
}
],
\"name\": \"Use the skills\",
\"block_id\": \"2d8a81799bcc44ccab2646b613557b2b\",
\"url\": \"u1g17\",
\"tags\": []
},
{
\"role\": \"node\",
\"children\": [
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"Think and speak\",
\"scoreDetail\": [0],
\"id\": \"u1g21\",
\"url\": \"u1g21\",
\"tags\": []
}
],
\"name\": \"Think and speak\",
\"block_id\": \"5833925c8c5e4ddab7a114b15d610983\",
\"url\": \"u1g20\",
\"tags\": []
}
],
\"suggestedDuration\": \"0\",
\"name\": \"1-3 Listening\",
\"block_id\": \"681817aaf75845468e464e1a8d82f2c8\",
\"url\": \"u1g14\",
\"tags\": []
},
{
\"role\": \"node\",
\"children\": [
{
\"role\": \"node\",
\"children\": [
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"Get a clue\",
\"scoreDetail\": [0, 0, 0],
\"id\": \"u1g25\",
\"url\": \"u1g25\",
\"tags\": []
}
],
\"name\": \"Get a clue\",
\"block_id\": \"b332335ab3554dffb92afcae5f815b5a\",
\"url\": \"u1g24\",
\"tags\": []
},
{
\"role\": \"node\",
\"children\": [
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"View it-1\",
\"scoreDetail\": [1, 1, 1, 1],
\"id\": \"u1g27\",
\"url\": \"u1g27\",
\"tags\": []
},
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"View it-2\",
\"scoreDetail\": [1, 1, 1, 1, 1, 1, 1],
\"id\": \"u1g545\",
\"url\": \"u1g545\",
\"tags\": []
},
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"View it-3\",
\"scoreDetail\": [1, 1, 1, 1, 1, 1, 1, 1],
\"id\": \"u1g29\",
\"url\": \"u1g29\",
\"tags\": []
}
],
\"name\": \"View it\",
\"block_id\": \"a2ecf6464d5f480e98242ebe4431a73b\",
\"url\": \"u1g26\",
\"tags\": []
},
{
\"role\": \"node\",
\"children\": [
{
\"role\": \"group\",
\"tab_type\": \"task\",
\"name\": \"Think and speak\",
\"scoreDetail\": [0, 0],
\"id\": \"u1g31\",
\"url\": \"u1g31\",
\"tags\": []
}
],
\"name\": \"Think and speak\",
\"block_id\": \"120d0784e63c414793f5e648c416144b\",
\"url\": \"u1g30\",
\"tags\": []
}
],
\"suggestedDuration\": \"0\",
\"name\": \"1-4 Viewing\",
\"block_id\": \"765a1be83ac5437aaca8fa150ad5af2e\",
\"url\": \"u1g22\",
\"tags\": []
}
],
\"name\": \"Listening to the world\",
\"tags\": []
}
]
}
可以看到数据比一开始的例子复杂了可不是一点，不过先别管这些数据是干啥的，说说需求，从结构上也能看出来，是有很多children嵌套的，而需求就是获取role为group的children节点数据
先说说 js 如何实现的，我贴一下对应的代码（当时项目的代码，稍微修改的一点），可自己粘贴运行一下。
let groupList = []
for (const node of json.children ?? []) {
if (node.role == 'group') groupList.push({ ...node })
for (const group of node.children ?? []) {
if (group.role == 'group') groupList.push({ ...group })
for (const child of group.children ?? []) {
if (child.role == 'group') groupList.push({ ...child })
let children4 = child.children ?? []
for (const child of children4) {
if (child.role == 'group') groupList.push({ ...child })
}
}
}
}
console.log(groupList)
因为这些数据中，是存在不确定性的，也就是在当前节点下，二级节点可能有children，而其他节点下的二级很可能没有 children，所以我在这边就加上 ?? [] （Typescript 中的??语法，你可以把 ?? 当做 || ）来判断是否有children节点，有些读者可能会思考，为啥不用递归呢。说的是挺轻松的，但是递归是很容易出问题的，万一爬取到后台数据进行了一些修改，很有可能对于的递归算法将失效，甚至导致堆栈溢出，所以我这边值循环 4 级chilren节点（实际遇到的貌似也只有 4 级，谁又能保证爬取到数据就一定只有 4 级呢）。
于是了解到 jsonpath 后，我第一个时间就开始分析这样的数据，果不其然，得到了我想要的结果 ⬇️
![\"image-20210919200826079\"](\"https://img.kuizuo.cn/image-20210919200826079.png\")
语法：$..children[?(@.role==\"group\")]
语法意思很明确，根节点下遍历所有children节点，同时role等于group，呈现的效果如上图。
而回到需求，就是获取role为group的children节点数据，而 jsonpath 就帮我轻松实现我想要的效果。
实际上这样的需求我已经不止遇到一次，二次了，然而我寻求百度与群友的时候，给我的结果都不尽人意。但都没有提及到 jsonpath 来进行获取。也许是我的搜索方式有问题，但千篇一律都是 js 如何解析多层 json，以及遍历所有的子元素，虽然这些办法确实能解决我的问题，但每次遇到这种数据，都需要花上长时间去编写对应的逻辑。
在回想起当时爬取 HTML 页面数据的时候（数据与上面展示的差不多，都是树结构多层），而我只接触到了正则表达式，没了解过 CSS 选择器与 xpath。怎么办，为了实现目的，只好用现有的技术去实现，于是编写一个正则表达式就花费了近一个下午的时间，而使用 CSS 选择器 10 分钟不到就达到目的。没想到竟然有这么好用的方法，早知道多去了解点技术了。可能现在的心情和当时一样，只不过 HTML 换成了 JSON，编辑器还是那个编辑器，而我依旧还是我
也许这就是编程，也许这就是人生。
", "url": "https://kuizuo.cn/use-jsonpath-to-parse-json-data", "title": "使用JSONPath解析json数据", "summary": "jsonpath 能够帮助我们快速的从json数据中提取想要的数据", "date_modified": "2021-09-20T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "javascript", "json", "node" ] }, { "id": "vue-chrome-extension", "content_html": "![\"mini\"](\"https://img.kuizuo.cn/mini.jpg\")
我当时学习开发 Chrome 插件的时候，还不会 Vue，更别说 Webpack 了，所以使用的都是原生的 html 开发，效率就不提了，而这次就准备使用 vue-cli 来进行编写一个某 B 站获取视频信息,评论的功能（原本是打算做自动回复的），顺便巩固下 chrome 开发（快一年没碰脚本类相关技术了），顺便写套模板供自己后续编写 Chrome 插件做铺垫。
相关代码开源github 地址
Vue Web-Extension - A Web-Extension preset for VueJS (vue-web-extension.netlify.app)
npm install -g @vue/cli
npm install -g @vue/cli-init
vue create --preset kocal/vue-web-extension my-extension
cd my-extension
npm run server
会提供几个选项，如 Eslint，background.js，tab 页，axios，如下图
![\"image-20210916142751129\"](\"https://img.kuizuo.cn/image-20210916142751129.png\")
选择完后，将会自动下载依赖，通过 npm run server 将会在根目录生成 dist 文件夹，将该文件拖至 Chrome 插件管理便可安装，由于使用了 webpack，所以更改代码将会热更新，不用反复的编译导入。
├─src
| ├─App.vue
| ├─background.js
| ├─main.js
| ├─manifest.json
| ├─views
| | ├─About.vue
| | └Home.vue
| ├─store
| | └index.js
| ├─standalone
| | ├─App.vue
| | └main.js
| ├─router
| | └index.js
| ├─popup
| | ├─App.vue
| | └main.js
| ├─override
| | ├─App.vue
| | └main.js
| ├─options
| | ├─App.vue
| | └main.js
| ├─devtools
| | ├─App.vue
| | └main.js
| ├─content-scripts
| | └content-script.js
| ├─components
| | └HelloWorld.vue
| ├─assets
| | └logo.png
├─public
├─.browserslistrc
├─.eslintrc.js
├─.gitignore
├─babel.config.js
├─package.json
├─vue.config.js
├─yarn.lock
根据所选的页面，并在 src 与 vue.config.js 中配置页面信息编译后 dist 目录结构如下
├─devtools.html
├─favicon.ico
├─index.html
├─manifest.json
├─options.html
├─override.html
├─popup.html
├─_locales
├─js
├─icons
├─css
整体的开发和 vue2 开发基本上没太大的区别，不过既然是用 vue 来开发的话，那肯定少不了组件库了。
要导入 Element-ui 也十分简单，Vue.use(ElementUI); Vue2 中怎么导入 element，便怎么导入。演示如下
![\"image-20210916150154078\"](\"https://img.kuizuo.cn/image-20210916150154078.png\")
不过我没有使用 babel-plugin-component 来按需引入，按需引入一个按钮打包后大约 1.6m，而全量引入则是 5.5 左右。至于为什么不用，因为我需要在 content-scripts.js 中引入 element 组件，如果使用 babel-plugin-component 将无法按需导入组件以及样式（应该是只支持 vue 文件按需引入，总之就是折腾了我一个晚上的时间）
不过官方提供了如何使用 TailwindCSS，这里就演示一下
在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档
推荐安装低版本，最新版有兼容性问题
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
创建 postcss.config.js 文件
// postcss.config.js
module.exports = {
plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'), // if you have installed `autoprefixer`
// ...
],
}
创建 tailwind.config.js 文件
// tailwind.config.js
module.exports = {
purge: {
// Specify the paths to all of the template files in your project
content: ['src/**/*.vue'],
// Whitelist selectors by using regular expression
whitelistPatterns: [
/-(leave|enter|appear)(|-(to|from|active))$/, // transitions
/data-v-.*/, // scoped css
],
},
// ...
}
在 src/popup/App.vue 中导入样式，或在新建 style.css 在 mian.js 中import \"../style.css\";
<style>
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;
</style>
从官方例子导入一个登陆表单，效果如下
![\"image-20210916152633247\"](\"https://img.kuizuo.cn/image-20210916152633247.png\")
页面搭建就没什么好说的了，因为使用的是 element-ui，所以页面很快就搭建完毕了，效果如图
![\"image-20210918115438700\"](\"https://img.kuizuo.cn/image-20210918115438700.png\")
悬浮窗其实可有可无，不过之前写 Chrome 插件的时候就写了悬浮窗，所以 vue 版的也顺带写一份。
要注意的是悬浮窗是内嵌到网页的（且在 document 加载前载入，也就是\"run_at\": \"document_start\"），所以需要通过 content-scripts.js 才能操作页面 Dom 元素，首先在配置清单 manifest.json 与 vue.confing.js 中匹配要添加的网站，以及注入的 js 代码，如下
\"content_scripts\": [
{
\"matches\": [\"https://www.bilibili.com/video/*\"],
\"js\": [\"js/jquery.js\", \"js/content-script.js\"],
\"css\": [\"css/index.css\"],
\"run_at\": \"document_start\"
},
{
\"matches\": [\"https://www.bilibili.com/video/*\"],
\"js\": [\"js/jquery.js\", \"js/bilibili.js\"],
\"run_at\": \"document_end\"
}
]
contentScripts: {
entries: {
'content-script': ['src/content-scripts/content-script.js'],
bilibili: ['src/content-scripts/bilibili.js'],
},
},
由于是用 Vue，但又要在 js 中生成组件，就使用document.createElement来进行创建元素，Vue 组件如下（可拖拽）
![\"image-20210917142340863\"](\"https://img.kuizuo.cn/image-20210917142340863.png\")
如果使用babel-plugin-component按需引入，组件的样式将无法载入，同时自定义组件如果编写了 style 标签，那么也同样无法载入，报错：Cannot read properties of undefined (reading 'appendChild')
大致就是 css-loader 无法加载对应的 css 代码，如果执意要写 css 的话，直接在 manifest.json 中注入 css 即可
// 注意，这里引入的vue是运行时的模块，因为content是插入到目标页面，对组件的渲染需要运行时的vue， 而不是编译环境的vue （我也不知道我在说啥，反正大概意思就是这样）
import Vue from 'vue/dist/vue.esm.js'
import ElementUI, { Message } from 'element-ui'
Vue.use(ElementUI)
// 注意，必须设置了run_at=document_start此段代码才会生效
document.addEventListener('DOMContentLoaded', function () {
console.log('vue-chrome扩展已载入')
insertFloat()
})
// 在target页面中新建一个带有id的dom元素，将vue对象挂载到这个dom上。
function insertFloat() {
let element = document.createElement('div')
let attr = document.createAttribute('id')
attr.value = 'appPlugin'
element.setAttributeNode(attr)
document.getElementsByTagName('body')[0].appendChild(element)
let link = document.createElement('link')
let linkAttr = document.createAttribute('rel')
linkAttr.value = 'stylesheet'
let linkHref = document.createAttribute('href')
linkHref.value = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
link.setAttributeNode(linkAttr)
link.setAttributeNode(linkHref)
document.getElementsByTagName('head')[0].appendChild(link)
let left = 0
let top = 0
let mx = 0
let my = 0
let onDrag = false
var drag = {
inserted: function (el) {
;(el.onmousedown = function (e) {
left = el.offsetLeft
top = el.offsetTop
mx = e.clientX
my = e.clientY
if (my - top > 40) return
onDrag = true
}),
(window.onmousemove = function (e) {
if (onDrag) {
let nx = e.clientX - mx + left
let ny = e.clientY - my + top
let width = el.clientWidth
let height = el.clientHeight
let bodyWidth = window.document.body.clientWidth
let bodyHeight = window.document.body.clientHeight
if (nx < 0) nx = 0
if (ny < 0) ny = 0
if (ny > bodyHeight - height && bodyHeight - height > 0) {
ny = bodyHeight - height
}
if (nx > bodyWidth - width) {
nx = bodyWidth - width
}
el.style.left = nx + 'px'
el.style.top = ny + 'px'
}
}),
(el.onmouseup = function (e) {
if (onDrag) {
onDrag = false
}
})
},
}
window.kz_vm = new Vue({
el: '#appPlugin',
directives: {
drag: drag,
},
template: `
<div class=\"float-page\" ref=\"float\" v-drag>
<el-card class=\"box-card\" :body-style=\"{ padding: '15px' }\">
<div slot=\"header\" class=\"clearfix\" style=\"cursor: move\">
<span>悬浮窗</span>
<el-button style=\"float: right; padding: 3px 0\" type=\"text\" @click=\"toggle\">{{ show ? '收起' : '展开'}}</el-button>
</div>
<transition name=\"ul\">
<div v-if=\"show\" class=\"ul-box\">
<span> {{user}} </span>
</div>
</transition>
</el-card>
</div>
`,
data: function () {
return {
show: true,
list: [],
user: {
username: '',
follow: 0,
title: '',
view: 0,
},
}
},
mounted() {},
methods: {
toggle() {
this.show = !this.show
},
},
})
}
因为只能在 js 中编写 vue 组件，所以得用 template 模板，同时使用了 directives，给组件添加了拖拽的功能（尤其是window.onmousemove，如果是元素绑定他自身的鼠标移动事件，那么拖拽鼠标将会十分卡顿），还使用了 transition 来进行缓慢动画效果其中注入的 css 代码如下
.float-page {
width: 400px;
border-radius: 8px;
position: fixed;
left: 50%;
top: 25%;
z-index: 1000001;
}
.el-card__header {
padding: 10px 15px !important;
}
.ul-box {
height: 200px;
overflow: hidden;
}
.ul-enter-active,
.ul-leave-active {
transition: all 0.5s;
}
.ul-enter,
.ul-leave-to {
height: 0;
}
相关逻辑可自行观看，这里不在赘述了，并不复杂。
也顺带是复习一下 HTML 中鼠标事件和 vue 自定义命令了
主要功能
检测视频页面，输出对应 up 主，关注数以及视频标题播放（参数过多就不一一显示了）
监控关键词根据内容判断是否点赞，例如文本出现了下次一定，那么就点赞。
这个其实只要接触过一丢丢爬虫的肯定都会知道如何实现，通过右键审查元素，像这样
![\"image-20210918104907148\"](\"https://img.kuizuo.cn/image-20210918104907148.png\")
然后使用 dom 操作，选择对应的元素，输出便可
> document.querySelector(\"#v_upinfo > div.up-info_right > div.name > a.username\").innerText
< '老番茄'
当然使用 JQuery 效果也是一样的。后续我都会使用 JQuery 来进行操作
在 src/content-script/bilibili.js 中写下如下代码
window.onload = function () {
console.log('加载完毕')
function getInfo() {
let username = $('#v_upinfo > div.up-info_right > div.name > a.username').text()
let follow = $(`#v_upinfo > div.up-info_right > div.btn-panel > div.default-btn.follow-btn.btn-transition.b-gz.following > span > span > span`).text()
let title = $(`#viewbox_report > h1 > span`).text()
let view = $('#viewbox_report > div > span.view').attr('title')
console.log(username, follow, title, view)
}
getInfo()
}
重新加载插件，然后输出查看结果
加载完毕
bilibili.js:19 老番茄 1606.0万 顶级画质 总播放数2368406
这些数据肯定单纯的输出肯定是没什么作用的，要能显示到内嵌悬浮窗口，或者是 popup 页面上（甚至发送 ajax 请求到远程服务器上保存）
对上面代码微改一下
window.onload = function () {
console.log('加载完毕')
function getInfo() {
let username = $('#v_upinfo > div.up-info_right > div.name > a.username').text().trim()
let follow = $(`#v_upinfo > div.up-info_right > div.btn-panel > div.default-btn.follow-btn.btn-transition.b-gz.following > span > span > span`).text()
let title = $(`#viewbox_report > h1 > span`).text()
let view = $('#viewbox_report > div > span.view').attr('title')
//console.log(username, follow, title, view);
window.kz_vm.user = {
username,
follow,
title,
view,
}
}
getInfo()
}
其中window.kz_vm是通过window.kz_vm = new Vue() 初始化的，方便我们操作 vm 对象，就需要通过 jquery 选择元素在添加属性了。如果你想的话也可以直接在 content-script.js 上编写代码，这样就无需使用 window 对象，但这样导致一些业务逻辑都堆在一个文件里，所以我习惯分成 bilibili.js 然后注入方式为 document_end，然后在操作 dom 元素吗，实现效果如下
![\"image-20210918110958104\"](\"https://img.kuizuo.cn/image-20210918110958104.png\")
如果像显示到 popup 页面只需要通过页面通信就行了，不过前提得先 popup 打开才行，所以一般都是通过 background 来进行中转，一般来说很少 content –> popup（因为操作 popup 的前提都是 popup 要打开），相对更多的是 content –> background 或 popup –> content
content-script 主动发消息给后台 我是小茗同学 - 博客园 (cnblogs.com)
这边简单编写了一下页面，通过 popup 给 content，让 content 输入评论内容，与点击发送，先看效果
![\"bilibili_comment\"](\"https://img.kuizuo.cn/bilibili_comment.gif\")
同样的，找到对应元素位置
// 评论文本框
$('#comment > div > div.comment > div > div.comment-send > div.textarea-container > textarea').val('要回复的内容')
// 评论按钮
$('#comment > div > div.comment > div > div.comment-send > div.textarea-container > button').click()
接着就是写页面通信的了，可以看到是 popup 向 content 发送请求
window.onload = function () {
console.log('content加载完毕')
function comment() {
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
let { cmd, message } = request
if (cmd === 'addComment') {
$('#comment > div > div.comment > div > div.comment-send > div.textarea-container > textarea').val(message)
$('#comment > div > div.comment > div > div.comment-send > div.textarea-container > button').click()
}
sendResponse('我收到了你的消息！')
})
}
comment()
}
<template>
<div>
<el-container>
<el-header height=\"24\">B站小工具</el-header>
<el-main>
<el-row :gutter=\"5\">
<el-input type=\"textarea\" :rows=\"2\" placeholder=\"请输入内容\" v-model=\"message\" class=\"mb-5\"> </el-input>
<div>
<el-button @click=\"addComment\">评论</el-button>
</div>
</el-row>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: '',
list: [],
open: false,
}
},
created() {
chrome.storage.sync.get('list', (obj) => {
this.list = obj['list']
})
},
mounted() {
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
console.log('收到来自content-script的消息：')
console.log(request, sender, sendResponse)
sendResponse('我是后台，我已收到你的消息：' + JSON.stringify(request))
})
},
methods: {
sendMessageToContentScript(message, callback) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
if (callback) callback(response)
})
})
},
addComment() {
this.sendMessageToContentScript({ cmd: 'addComment', message: this.message }, function () {
console.log('来自content的回复：' + response)
})
},
},
}
</script>
代码就不解读了，调用 sendMessageToContentScript 方法即可。相关源码可自行下载查看
实现类似点赞功能也是同理的。
当时写 Chrome 插件的效率不能说慢，反正不快就是了，像一些 tips，都得自行封装。用过 Vue 的都知道写网页很方便，写 Chrome 插件未尝不是编写一个网页，当时的我在接触了 Vue 后就萌发了使用 vue 来编写 Chrome 的想法，当然肯定不止我一个这么想过，所以我在 github 上就能搜索到相应的源码，于是就有了这篇文章。
如果有涉及到爬取数据相关的，我肯定是首选使用 HTTP 协议，如果在搞不定我会选择使用 puppeteerjs，不过 Chrome 插件主要还是增强页面功能的，可以实现原本页面不具备的功能。
本文仅仅只是初步体验，简单编写了个小项目，后期有可能会实现一个百度网盘一键填写提取码，Js 自吐 Hooke 相关的。（原本是打算做 pdd 商家自动回复的，客户说要用客户端而不是网页端（客户端可以多号登陆），无奈，这篇博客就拿 B 站来演示了）
", "url": "https://kuizuo.cn/vue-chrome-extension", "title": "使用Vue开发Chrome插件", "summary": "使用 Vue2 开发一个 Chrome 插件", "date_modified": "2021-09-18T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "chrome", "plugin", "vue", "develop" ] }, { "id": "try-to-cloud-develop", "content_html": "在接触一个开源项目的时候，项目的后端采用的是云开发的模式（云函数，云数据库等等），本人又没接触过云开发，于是便有了这篇文章。
本文使用是的腾讯云的产品，官方文档（很详细） 云开发 CloudBase - 一站式后端云服务
开通环境 | 云开发 CloudBase - 一站式后端云服务
使用 NPM
npm i -g @cloudbase/cli
或使用 Yarn
yarn global add @cloudbase/cli
测试是否安装成功
tcb -v
在您的终端中输入下面的命令
tcb login
CloudBase CLI 会自动打开云开发控制台获取授权，您需要点击同意授权按钮允许 CloudBase CLI 获取授权。如您没有登录，您需要登录后才能进行此操作。
![\"image-20210905085929546\"](\"https://img.kuizuo.cn/image-20210905085929546.png\")
登录方式 | 云开发 CloudBase - 一站式后端云服务
首先您需要到腾讯云官网获取云 API 密钥 (opens new window)，然后在终端中输入下面的命令：
tcb login --key
回车后，请按提示输入云 API 密钥的 SecretId 和 SecretKey 既可完成登录。
在 CI（持续集成）构建中，您可以使用下面的方式通过 API 秘钥直接登录，避免交互式输入
tcb login --apiKeyId xxx --apiKey xxx
通过腾讯云临时秘钥登录，可以在某些比较敏感的场景下使用，使用短期有效的秘钥
tcb login --apiKeyId xxx --apiKey xxx --token xxx
所采用的是Nodejs SDK API进行体验
npm install --save @cloudbase/node-sdk
// 初始化示例
const tcb = require('@cloudbase/node-sdk')
// 初始化资源
//云函数下使用默认环境
const app = tcb.init()
创建一个项目，在项目的根目录创建 functions 文件夹。在 functions 下创建 hello_world 文件夹，包含 index.js 与 package.json 两个文件。
此时目录结构如下：
└── functions
└── hello_world
├── index.js
└── package.json
index.js 内容如下：
exports.main = async function () {
return 'Hello World!'
}
package.json 内容如下：
{
\"name\": \"hello_world\",
\"version\": \"1.0.0\",
\"main\": \"index.js\"
}
通过前面安装的 CLI 工具，在项目根目录运行以下命令，并且使用默认配置：
cloudbase fn deploy hello_world -e <env-id>
<env-id>为环境 id，可在云开发 CloudBase 中环境查看，部署结果如下
![\"image-20210905093035131\"](\"https://img.kuizuo.cn/image-20210905093035131.png\")
在控制面板中也能看到对应的云函数列表
![\"image-20210905093757875\"](\"https://img.kuizuo.cn/image-20210905093757875.png\")
后台也是能完整看到对应的代码的
![\"image-20210905094146730\"](\"https://img.kuizuo.cn/image-20210905094146730.png\")
执行以下命令创建一条 HTTP 服务路由，路径为 /hello，指向的云函数为 hello_world：
cloudbase service create -p hello -f hello_world -e <env-id>
随后便可以通过 https://<env-id>.service.tcloudbase.com/hello 调用云函数，并获得返回结果。如下图
![\"image-20210905093505618\"](\"https://img.kuizuo.cn/image-20210905093505618.png\")
const tcb = require('@cloudbase/node-sdk')
const app = tcb.init({
secretId: 'xxxxxx',
secretKey: 'xxxxxx',
env: 'env-id',
})
app
.callFunction({
// 云函数名称
name: 'hello_world',
// 传给云函数的参数
data: {
a: 1,
},
})
.then((res) => {
console.log(res)
})
.catch(console.error)
输出
{
result: 'Hello World!',
requestId: 'xxxxx‘
}
const tcb = require('@cloudbase/node-sdk')
const app = tcb.init({
secretId: 'xxxxx',
secretKey: 'xxxxx',
env: 'env-id',
})
let db = app.database()
async function run() {
// 创建集合
let res = await db.createCollection('books')
console.log(res)
// // 插入一条数据
let res1 = await db.collection('books').add({
category: 'Computer',
name: 'Thinking in Java',
onSale: true,
sales: 100,
})
console.log(res1)
// 获取数据库中的数据
let res2 = await db.collection('books').get()
console.log(res2)
}
run()
运行结果如下
{ requestId: '17bb3e26ecb_1', message: 'success' }
{ id: '14139e12613431c809b949933c3209de', requestId: '17bb3e27010_2' }
{
data: [
{
_id: '14139e12613431c809b949933c3209de',
category: 'Computer',
name: 'Thinking in Java',
onSale: true,
sales: 100
}
],
requestId: '17bb3e270ca_3'
}
暂时用不到，就没体验
暂时用不到，就没体验
除了要钱外，我目前是找不到第二个缺点，我个人体验下来，整体流程可以说是非常爽的那种。因为部署项目是一件特别折腾的一件事情，而使用云开发门槛瞬间减少一半，只要会写 js 函数，会调用数据库，就足够搞定一个后端服务了。如果是搞小程序的，又要搞服务这些，直接上手云开发，微信用户，微信支付直接一条龙服务。
当然了如果要搞什么分布式，集群啥的，那还是老老实实的用后端框架吧。
", "url": "https://kuizuo.cn/try-to-cloud-develop", "title": "尝试云开发", "summary": "在接触一个开源项目的时候，项目的后端采用的是云开发的模式（云函数，云数据库等等），本人又没接触过云开发，于是便有了这篇文章。", "date_modified": "2021-09-06T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "develop", "cloud" ] }, { "id": "mongodb-time-grouping", "content_html": "需求是这样的，要统计每一周的各个商品的销售记录，使用 echarts 图表呈现，如下图
![\"image-20210830214556262\"](\"https://img.kuizuo.cn/image-20210830214556262.png\")
说实话，一开始听到这个需求的时候，我是有点慌的，因为 MongoDB 的分组玩的比较少（Mysql 也差不多），又要按照对应的星期来进行分组，这在之前学习 MongoDB 的时候还没接触过，于是就准备写了这篇文章，来记录下我是如何进行分组的
时间操作符（专业术语应该不是这个，后文暂且使用这个来描述），后面会用到的
$dayOfYear: 返回该日期是这一年的第几天。（全年366天）
$dayOfMonth: 返回该日期是这一个月的第几天。（1到31）
$dayOfWeek: 返回的是这个周的星期几。（1：星期日，7：星期六）
$year: 返回该日期的年份部分
$month： 返回该日期的月份部分（between 1 and 12.）
$week： 返回该日期是所在年的第几个星期（between 0 and 53）
$hour： 返回该日期的小时部分
$minute: 返回该日期的分钟部分
$second: 返回该日期的秒部分（以0到59之间的数字形式返回日期的第二部分，但可以是60来计算闰秒。）
$millisecond：返回该日期的毫秒部分（between 0 and 999.）
$dateToString：{ $dateToString: { format: <formatString>, date: <dateExpression> } }
关于日期分组的话，我是借鉴了这篇文章，也确实带我解惑了下如何按照日期分组。这里贴下我的代码
let list = await this.goodsModel
.aggregate([
{ $project: { date: { $dateToString: ['$created_at', 0, 10] } } },
{ $group: { _id: '$date', count: { $sum: 1 } } },
{ $project: { date: '$_id', _id: 0, count: 1 } }, // 再使用$project将_id改名为date
{ $sort: { date: -1 } }, // 根据日期倒序
])
.exec();
或者使用时间操作符（更准确一点）
let list = await this.goodsModel
.aggregate([
{
$project: { date: { $dateToString: { format: '%Y-%m-%d', date: '$created_at' } } },
},
{ $group: { _id: '$date', count: { $sum: 1 } } },
{ $project: { date: '$_id', _id: 0, count: 1 } }, // 再使用$project将_id改名为date
{ $sort: { date: -1 } }, // 根据日期倒序
])
.exec();
通过
要注意的是，$group 里的属性必须为_id，不然无法分组
获取到的数据如下（这里只显示一周）
[
{ \"count\": 54, \"date\": \"2021-08-30\" },
{ \"count\": 29, \"date\": \"2021-08-29\" },
{ \"count\": 16, \"date\": \"2021-08-28\" },
{ \"count\": 17, \"date\": \"2021-08-27\" },
{ \"count\": 12, \"date\": \"2021-08-26\" },
{ \"count\": 6, \"date\": \"2021-08-25\" },
{ \"count\": 0, \"date\": \"2021-08-24\" }
]
如果只是日期和总商品的话，上面就足以显示对应的数据了，可我要根据星期进行分组的话，就需要替换 MongoDB 的时间转化函数了
星期分组的话，其实也挺简单的，只需要把上面的
$project: { day: { $dateToString: { format: \"%Y-%m-%d\", date: \"$created_at\" } } }
替换成
$project: {
week: {
$dayOfWeek: {
date: '$created_at';
}
}
}
完整代码如下
// 要获取的是一周前的零点时间
let lastweekDay = dayjs(dayjs().add(-7, 'day').format('YYYY-MM-DD')).valueOf();
let list = await this.goodsModel
.aggregate([
{ $match: { created_at: { $gte: new Date(lastweekDay) } } }, //范围时间
{ $project: { week: { $dayOfWeek: { date: '$created_at' } } } },
{ $group: { _id: '$week', count: { $sum: 1 } } },
{ $project: { week: '$_id', _id: 0, count: 1 } }, // 再使用$project将_id改名为week
{ $sort: { week: 1 } }, // 根据星期正序
])
.exec();
获取的结果如下
[
{ count: 29, week: 1 }, // 星期七(日)
{ count: 54, week: 2 }, // 星期一
{ count: 1, week: 3 }, // 星期二
{ count: 9, week: 4 }, // 星期三
{ count: 12, week: 5 }, // 星期四
{ count: 17, week: 6 }, // 星期五
{ count: 16, week: 7 }, // 星期六
];
但是，细心的你可能会发现，貌似数据对不上，注当天时间为 2021-08-30，星期一
[
{ \"count\": 54, \"date\": \"2021-08-30\" }, // 星期一
{ \"count\": 29, \"date\": \"2021-08-29\" }, // 星期七(日)
{ \"count\": 16, \"date\": \"2021-08-28\" }, // 星期六
{ \"count\": 17, \"date\": \"2021-08-27\" }, // 星期五
{ \"count\": 12, \"date\": \"2021-08-26\" }, // 星期四
{ \"count\": 9, \"date\": \"2021-08-25\" }, // 星期三
{ \"count\": 1, \"date\": \"2021-08-24\" } // 星期二
]
其实只需要把星期向后排序一位就行，因为星期本来就是将星期日作为第一天的，至此，按照星期分组总商品就算完毕了。同理，要按照月份，年份，甚至小时，分钟，都可以直接利用时间操作符转化时间来进行分组。
上述只是获取了总商品了，要细分为多个商品的话，就需要再次利用聚合函数来进行分组了。
这里先演示分组多个商品先，就和正常分组一样
let list = await this.goodsModel.aggregate([
{ $group: { _id: \"$type\", count: { $sum: 1 } } },
]).exec()
结果如下（这里输出_id，是因为没有进行$project 改别名，商品所采用的是数字表示）
[
{ \"_id\": 1, \"count\": 111 },
{ \"_id\": 2, \"count\": 18 },
{ \"_id\": 4, \"count\": 2 },
{ \"_id\": 3, \"count\": 16 }
]
可以看到统计的是直接是所有商品的总和。
但问题来了，怎么样能分组星期的同时，又对每个商品所在星期进行分组，并且到底是优先分组星期期呢，还是优先分组商品呢，这让我陷入深深的思考。
首先，绝对不可能使用两次$group，要么没有星期分组，要么没有商品分组，于是我就把思路放在$project与$group内，看看内部是否有其他方法可以实现。
其中$group可以将属性添加为数组，注意 goods: { $push: \"$goods\" }
let list = await this.goodsModel
.aggregate([
{ $match: { created_at: { $gte: new Date(lastweekDay) } } },
{ $project: { week: { $dayOfWeek: { date: '$created_at' } }, goods: 1 } },
{ $group: { _id: '$week', goods: { $push: '$goods' } } },
{ $project: { week: '$_id', _id: 0, goods: 1 } },
{ $sort: { week: 1 } },
])
.exec();
可得到的数据却是这样的
[
{
\"goods\": [4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1],
\"week\": 1
},
{
\"goods\": [1, 1, 1, 1, 5, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 1, 1, 1, 4, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
\"week\": 2
},
{
\"goods\": [1],
\"week\": 3
},
{
\"goods\": [3, 3, 3, 3, 3, 3, 3, 3, 4],
\"week\": 4
},
{
\"goods\": [3, 1, 1, 1, 3, 4, 1, 1, 1, 1, 1, 1],
\"week\": 5
},
{
\"goods\": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 1, 1, 1, 1, 1],
\"week\": 6
},
{
\"goods\": [4, 3, 1, 1, 3, 3, 3, 3, 3, 1, 1, 1, 1, 1, 1, 1],
\"week\": 7
}
]
数据很接近了，如果我能把对应的商品总和算起来就行了，但问题是怎么合起来。。。
待会，goods 既然是数组的话，那我能不能$unwind全部展开，然后我再来一次聚合，说干就干！
let list = await this.goodsModel
.aggregate([
{ $match: { created_at: { $gte: new Date(lastweekDay) } } },
{ $project: { week: { $dayOfWeek: { date: '$created_at' } }, goods: 1 } },
{ $group: { _id: '$week', goods: { $push: '$goods' } } },
{ $project: { week: '$_id', _id: 0, goods: 1 } },
{ $sort: { week: 1 } },
{ $unwind: '$goods' },
])
.exec();
得到的数据（省略一堆）
[
{ \"goods\": 4, \"week\": 1 },
{ \"goods\": 4, \"week\": 1 },
{ \"goods\": 1, \"week\": 1 },
{ \"goods\": 1, \"week\": 1 },
{ \"goods\": 1, \"week\": 2 },
{ \"goods\": 1, \"week\": 3 },
{ \"goods\": 1, \"week\": 4 }
]
然后我就卡住了，因为我无论如何都无法分组一个字段的时候，又加以限制条件，要么分组商品的时候，统计的是一周各商品总数据，要么就是分组星期的时候，统计的是总的商品数据。在搜索大量资料后，查看官方一些文档也未果，于是我决定自行写一个 js 函数来进行排序（实在是折腾不动了，能力有限 🥱）
最终完整代码
let lastweekDay = dayjs(dayjs().add(-7, 'day').format('YYYY-MM-DD')).valueOf();
let list = await this.goodsModel
.aggregate([
{ $match: { created_at: { $gte: new Date(lastweekDay) } } },
{ $project: { week: { $dayOfWeek: { date: '$created_at' } }, goods: 1 } },
{ $group: { _id: '$week', goods: { $push: '$goods' } } },
{ $project: { week: '$_id', _id: 0, goods: 1 } },
{ $sort: { week: 1 } },
// { $unwind: \"$goods\" },
])
.exec();
function getEleNums(data) {
var map = {};
data.forEach((e) => {
if (map[e]) {
map[e] += 1;
} else {
map[e] = 1;
}
});
return map;
}
list = list.map((l) => {
l.goods = getEleNums(l.goods);
return l;
});
cosnole.log(list);
运行后的 list 结果为
[
{ \"goods\": { \"1\": 26, \"4\": 3 }, \"week\": 1 },
{ \"goods\": { \"1\": 53, \"4\": 3, \"5\": 1 }, \"week\": 2 },
{ \"goods\": { \"1\": 1 }, \"week\": 3 },
{ \"goods\": { \"3\": 8, \"4\": 1 }, \"week\": 4 },
{ \"goods\": { \"1\": 9, \"3\": 2, \"4\": 1 }, \"week\": 5 },
{ \"goods\": { \"1\": 15, \"3\": 2 }, \"week\": 6 },
{ \"goods\": { \"1\": 9, \"3\": 6, \"4\": 1 }, \"week\": 7 }
]
如果是要 goods 为分组的话，只需要把上面聚合代码中 week 和 goods 替换一下便可。
专门新建一个表，用于统计每天的销售记录，然后分组的时候就根据该表就行了，具体代码就实现了，思路是挺简单的，但是需要新建一个表，增加记录的时候有需要增加代码，如果业务复杂的话。。。
", "url": "https://kuizuo.cn/mongodb-time-grouping", "title": "MongoDB按时间分组", "summary": "需求", "date_modified": "2021-08-30T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "mongodb" ] }, { "id": "axios-http-class-library", "content_html": "一个基于 Axios 封装 HTTP 类库
源代码 kz-http
npm 安装
npm i kz-http -S
import Http from 'kz-http'
let http = new Http()
http.get('https://www.example.com').then((res) => {
console.log(res)
})
axios 明明那么好用，为啥又要基于 axios 重新造一个轮子。首先不得否认的是 axios 确实好用，Github 能斩获近 90k 的 star，且基本已成为前端作为数据交互的必备工具。但是它对我所使用的环境下还是存在一定的问题，也就是我为什么要重新造一个轮子。
如果 axios 是运行在浏览器那还好说，就算你无论怎么请求，浏览器都会自动将你的所有请求中的响应包含 set-cookie 参数，提供给下一次同域下的请求。但是，Node 环境并不是浏览器环境，在 Node 环境中运行并不会自动保存 Cookie，还需要手动保存，并将 Cookie 添加至协议头给下一个请求。（如果是 Python 的话，request 有个 session 方法可以自动保存 cookie，十分方便）
一开始我是自行封装，将响应中的 set-cookie 全都存在实例对象 http.cookies 上，但封装的不彻底，如果有的网站
间请求存在跨域，那么会将携带不该属于该域下的 Cookies。于是乎，我在 github 仓库找到了一个库可达到我的目的
3846masa/axios-cookiejar-support: Add tough-cookie support to axios. (github.com)
具体安装可以直接点击链接查看，这里贴下我之前的封装代码
const tough = require('tough-cookie');
const axiosCookieJarSupport = require('axios-cookiejar-support').default;
axiosCookieJarSupport(axios);
class Http {
public cookieJar;
public instance: AxiosInstance;
construction() {
this.cookieJar = new tough.CookieJar(null, { allowSpecialUseDomain: true });
this.instance = axios.create({
jar: this.cookieJar,
ignoreCookieErrors: false,
withCredentials: true,
});
}
}
这样 axios 就会自动将响应中的 set-cookie 封装起来，供下次使用
但是正是由于导入了这个包，导致每次请求都需要处理，就会导致请求速度变慢，实测大约是在 100ms 左右，同时导入这个包之后，实例化的对象都将会携带对应 cookies，想要删除又得对应 Url，于是决定自行封装相关代码可查看 request 方法，实测下来大约有 10ms 左右的差距（前提都通过创建实例来请求），不过有个缺陷，我封装的代码是不进行同源判断的，如何你当前站点请求的是 api1.test.com，获取到 cookie1，那么请求 api2.test.com 的时候也会将 cookie1 携带，这边不做判断是不想在请求的时候耗费时间，比如网页与手机协议，一般这种情况建议实例化两个对象，如
let http_api1 = new Http()
let http_api2 = new Http()
在高并发的情况下，偶尔会出现请求超时，请求拒绝的情况，但是默认下 axios 是不支持自动重试请求的，不过可以借助插件axios-retry来达到这个目的
const axiosRetry = require('axios-retry')
class Http {
constructor(retryConfig?) {
this.instance = axios.create()
if (retryConfig) {
axiosRetry(this.instance, {
retries: retryConfig.retry, // 设置自动发送请求次数
retryDelay: (retryCount) => {
return retryCount * retryConfig.delay // 重复请求延迟
},
shouldResetTimeout: true, // 重置超时时间
retryCondition: (error) => {
if (axiosRetry.isNetworkOrIdempotentRequestError(error)) {
return true
}
if (error.code == 'ECONNABORTED' && error.message.indexOf('timeout') != -1) {
return true
}
if (['ECONNRESET', 'ETIMEDOUT'].includes(error.code)) {
// , 'ENOTFOUND'
return true
}
return false
},
})
}
}
}
这边判断重新发送请求条件是连接拒绝，连接重置，和连接超时的情况。
有时候一个网站的协议是这样的，每一条 Post 都自动将所有参数进行拼接，然后进行 MD5 加密，并添加为 sign 参数，于是，不得不给每一条请求都进行这样的操作，那么有没有什么能在每次请求的时候，都自动的对参数进行 MD5 加密。如果使用过 axios 来配置过 JWT 效验，那自然就会熟悉给每条请求协议头都携带 JWT 数值。同样的，这里的加密例子同样使用，具体配置实例对象 http 的请求拦截器即可，如
let http = new Http()
// axios实例instance是公开的
http.instance.interceptors.request.use(
(config) => {
// 执行每条请求都要处理的操作
return config
},
(error) => {},
)
同样的，响应拦截器也同理，例如请求返回的响应都进行加密处理，那么就可以通过响应拦截器进行统一解密，这里就不做过多描述，具体场景具体分析。
比如设置伪造 IP（setFakeIP），自动补全 referer 和 orgin 参数，禁止重定向等等，更详细的查看源码便可
如果要让别人使用的话，总不可能让他去下载源码然后编译吧，这里就借助 npm。
在使用 npm 之前，请先使用npm install -g npm@latest升级为最新版，否则可能会提示 ERR! 426 Upgrade Required。原文 The npm registry is deprecating TLS 1.0 and TLS 1.1 | The GitHub Blog
创建 npm 账号，创建 package.json
{
\"name\": \"kz-http\",
\"version\": \"0.1.0\",
\"description\": \"An HTTP class library based on axios\",
\"main\": \"dist/index.js\",
\"scripts\": {
\"build\": \"tsc\"
},
\"author\": \"kuizuo\",
\"license\": \"ISC\",
\"dependencies\": {
\"axios\": \"^0.21.1\",
\"axios-retry\": \"^3.1.9\"
},
\"devDependencies\": {
\"typescript\": \"^4.3.5\"
},
\"repository\": {
\"type\": \"git\",
\"url\": \"git+https://github.com/kuizuo/kz-http.git\"
},
\"keywords\": [\"node\", \"axios\", \"http\"]
}
然后通过npm login登录 npm 账号，接着输入npm publish --access public发布即可
发布的是要注意以下几点
如果 npm 镜像必须是官方的，否则无法登录，镜像还原
npm config set registry https://registry.npmjs.org/
查看镜像配置地址
npm get registry
如果包有重名，那么就无法发布，就必须要要改名
邮箱必须要验证（会接受一条下图邮箱），不然就会发布失败\n![\"image-20210826212258752\"](\"https://img.kuizuo.cn/image-20210826212258752.png\")
请勿随意删包，否则同名的包将需要 24 小时后才能发布（亲测）
npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/kz-http - kz-http cannot be republished until 24 hours have passed.
发布完成后，别人只需要通过npm i kz-http就可成功将模块下载至本地 node_modules 文件夹下
博客地址: 愧怍的小站
源码地址：kuizuo/blog
时隔近半年没好好整理文章，博客也写的不像个人样。😂
大半年没更新博客，一直忙着写项目（写到手软的那种），然后无意间在 B 站看到一个 Up 主 峰华前端工程师 基于 React 驱动的静态网站生成器搭建的个人博客。第一眼看到该站点的时候惊艳到我了，于是也想着搭建一个，作为个人站点使用。
不过国内 docusaurus 的使用者是真的少。Vuepress 都快烂大街了...
关于主题魔改可以看 Docusaurus 主题魔改
下载代码，根据相应命令运行即可，在本地运行还是相对比较容易的。
修改了下个人信息，然后将之前的博客文章迁移过来即可。
![\"image-20220804052418993\"](\"https://img.kuizuo.cn/image-20220804052418993.png\")
![\"image-20220804052016538\"](\"https://img.kuizuo.cn/image-20220804052016538.png\")
![\"image-20220804052746803\"](\"https://img.kuizuo.cn/image-20220804052746803.png\")
相关文章: Docusaurus 配置 Gitalk 评论插件
![\"image-20220804052117492\"](\"https://img.kuizuo.cn/image-20220804052117492.png\")
由于我是有个人的域名和服务器，所以之前部署项目都是直接将编译后的文件直接上传至服务器上，然后通过 nginx 就可以直接通过域名访问了，优点的话就是方便，但缺点很明显，每次更新一篇博客的话，就需要重新编译，然后重新拉去文件，并不能做到自动化编译部署。于是就想着采用第三方服务进行部署。
这里推荐使用 Vercel，我写过一篇 Vercel 部署个人博客 的文章，部署十分简单。
我个人是比较满意该博客的，搜索，SEO，暗黑模式，博客列表，没有其他博客系统那么花里胡哨的，该有的整洁都有了，最主要是我个人不喜欢文章配背景图，尤其是那种与文章毫不相干的图，图片也许能减少阅读疲倦感，但欣赏的是内容的，而不是背景。
而且又是基于 Docusaurus，到时候是用来做一个项目的文档也方便许多。
还是要感谢下所开源的代码，同时 B 站视频教程也非常好，让我学到了一些前沿的前端技术。😄
也就不多浪费口舌了，博客既然搭建好了，那么接下来就可以专心的编写文章了。
", "url": "https://kuizuo.cn/second-blog-is-docusaurus", "title": "第二个博客搭建之Docusaurus", "summary": "博客地址: 愧怍的小站", "date_modified": "2021-08-20T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "blog", "docusaurus", "project" ] }, { "id": "lost-code-find-by-git", "content_html": "今晚，我和往常一样对着电脑撸着代码，这时候我灵光一现，想到了一个好的功能，于是乎我就开始增加代码文件，更改之前已有的问题，当我实现完这个功能的时候，觉得可有可无，我想通过 Git 直接回退到我没有这个新功能的版本，把新增的文件和更改的文件全都给还原回去，然而在编写新功能的时候我忘记 Commit 了！！！（正常操作应该是新建一个分支，在新分支编写新功能），于是乎我点了如图操作（这里仅作为事件发生展示，并不为实际丢失个数）
![\"image-20210815141808996\"](\"https://img.kuizuo.cn/image-20210815141808996.png\")
没错，清空所有更改过的代码。导致这些文件直接丢失（并不在回收站），包括写新功能前的代码和写新功能后的代码全都丢失了 😭！！！
庆幸的时候，写新功能前的代码我成功 add 到了暂存区，只是未 Commit 而已，那么就能找回对应的文件（仅仅只是文件，并且没有文件名，项目结构都无法还原 ）。如果有 Commit 的话非常好找回，直接回退上一个版本即可，如果连 add 操作都没有的话，除非像 VScode 插件 Local History 或一些 IDE 有记录本地文件，不然恐怕是真的找不回了。。。
故，此次目的是找回 add 过而未 commit 的文件，首先打开 git bash 输入
git fsck --lost-found
![\"image-20210815150520759\"](\"https://img.kuizuo.cn/image-20210815150520759.png\")
进入.git\\lost-found\\other
![\"image-20210815153556495\"](\"https://img.kuizuo.cn/image-20210815153556495.png\")
然后通过文本编辑器打开即可，如果是代码的话重命名对应的后缀，如果是图片这些就得对应删除前所对应的文件链接。名字是找不回来了，只能手动重命名。
可能这次丢失的仅仅只是几十个文件，下次丢失的可能就是一个项目了。所以在每次更改代码前做好备份才是首要做的，同时也感谢 git 这么好用的版本控制系统，不然这篇博客可能也不存在。
", "url": "https://kuizuo.cn/lost-code-find-by-git", "title": "记一次git丢失代码找回", "summary": "记录 git 操作失误导致代码丢失与找回的过程", "date_modified": "2021-08-15T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "git", "code" ] }, { "id": "redis-get-six-digit-number-invitation-code", "content_html": "针对每一个用户（用户量在 10w 以下）随机生成的邀请码（仅限六位数字），且不重复
如果能把这个不重复条件去除，那么只需要使用Math.random然后取小数点后六位就行了，但可惜要求就是不能重复， 要是重复还得了，到时候注册的时候都不知道奖励给那个邀请码账号。同时还要求邀请码在六位且数字，这就导致即使随机生成的，会有一定的可能出现相同的邀请码。
先随机生成一个六位随机数字，然后在存的时候判断数据库是否存在该邀请码，如果存在那么就重新生成一个，直到该邀请码不存在，便存入。
优点：方便，如果用户量不大，完全可以\n缺点：用户量上来的情况下，判断邀请码是否存在有可能需要一段时间，并且由于需要判断，故性能欠缺
利用 redis 的 set 数据类型，先将所有的邀请码存入到 set 中，然后通过 srandmember 随机获取一个数值，在通过 srem 删除该元素即可。
或者也可以通过 list 队列，将预先随机生成的六位不重复数字的所有集合统统添加到队列中，然后获取的时候通过 rpop 或 lpop 获取
优点：相当于空间换时间，无需判断，后期即便用户量上来的，也完全可以重新生成一批（七位或字母）重新导入
缺点：过于依赖 Redis，redis 服务一旦停止，便无法正常获取数据。
既然想都想了，那怎么能不实现呢。我这边仅仅是一个测试 Demo，利用的是方案 2，通过 set 数据类型进行获取相关代码如下
let key = 'code';
function genCode() {
let num = 999999;
for (let i = 100000; i < num; i++) {
client.sadd(key, i, function (err, data) {});
}
console.log('数据导入完毕');
}
genCode();
// 输出所有成员
client.smembers(key, function (err, data) {
console.log(data);
});
// 随机获取一个数据
client.srandmember(key, function (err, data) {
console.log(data);
client.srem(key, data, function (err, data) {});
});
整体耗时不会超过 3 分钟
通过console.time()获取数据耗时如下
default: 0.174ms
前后端数据交互，经常要和 Api 打交道，于是关于 Api 接口的设计，有必要好好写一写
首先还是得说一下REST 是设计风格而不是标准，也就是在写 api 接口的时候，喜欢就遵循。
这里举一个常见的 api 接口设计
常见的 CRUD 操作
POST /user/list // 获取列表
POST /user/get // 获取用户
POST /user/add // 添加用户
POST /user/edit // 编辑用户
POST /user/delete // 删除用户
与之对应 Restful Api 风格
GET / user // 获取列表
GET / user / { id } // 获取用户
POST / user // 添加用户
PUT / user / { id } // 编辑用户
DELETE / user / { id } // 删除用户
// {id} 通过后端路由 参数Params可以获取到
可以看到 Restful 风格相比于正常的 POST 而言，少了请求的路径，而同时使用请求方法字段（GET,POST,PUT,DELETE） 要与之表明的意思也很明确（前提：在增删改查的时候），也就只是增删改查而已。
这里我要说说我个人使用情况下，如果单单只是增删改查的话，我会使用 Restful 风格，好用是一方面，不必在修改数据的还要在 body 中添加 id 这个字段。其次 restful 确实也算广泛，但也仅仅只是在增删改查中。
实际业务中复杂情况太多了，有的时候仅仅这四个请求方法不能很明确的表达所要的意思，例如下面一些业务逻辑
POST user/login 发送登录请求
POST user/register 发送注册请求
POST user/info 获取个人信息
POST user/forget 忘记个人密码
POST user/getCode 获取验证码
此外还有充值，获取消费记录、登录记录等等就不一一列举了，总之这时候我毫不犹豫会使用 POST，可能有人会好奇，为啥获取信息和获取验证码的时候要使用 POST 请求，用 GET 不好吗？好，但后文会说为什么。
实际上，采用了 Restful 风格，几乎一猜就能猜到对应的 api。比如商品管理，无非就是获取商品列表，添加商品，编辑商品，删除商品。同时又传入的是对应的 ID，这要是 Mysql，ID 基本都是按顺序的，万一 api 鉴权没做好，都不知道数据怎么变动的。当然这种情况一般都是比较少见的了。
上文不是说到为啥都要使用 POST 请求，原因也挺简单的，就是加密，GET 请求一般都不会携带过多参数，针对数据效验的话最多也就一个 MD5 效验，然而是远远不够的，而 POST 所能携带的数据不仅仅是 MD5 效验，还能携带风控算法，二次效验，浏览器指纹算法等等，能保证一定的防破解性。一些看似用 GET 请求方便的接口，但实际都要考虑所包含的风险，就如上面那个发送验证码的接口，如果不加以加密，特别容易仿造出与之对应的协议请求，再次仿造发送也不难。当然，对于这种限制类的业务，还是得要后端进行限制，例如 1 分钟只能发送一条，一天一号只能发送 10 条。
其实可以发现绝大多数的网站基本上都不是采用 Restful 风格（貌似用的最多的也就是管理系统了），因为所涉及的业务逻辑实在是太复杂了，不单单只能使用请求方法来表明意思，有时候 Url 路径更能表达明确意思。
Restful 风格想的太美好了，然而实际业务中 很多时候并不能单纯的通过 get post put delete 这四种请求发送来表明真实意义，所以我在增删改查的时候才会使用 Restful api 风格。
在我写项目中遇到一些复杂业务逻辑，我是毫不犹豫使用 Post 请求的，然后通过 url 路径表明 api 所要请求的路径，同时编写 Swagger Api 文档。什么样的风格都因人而异，主要自己用的习惯就行，毕竟 api 接口只是风格，并不作为标准来衡量。
", "url": "https://kuizuo.cn/api-style", "title": "Api接口风格", "summary": "前后端数据交互，经常要和 Api 打交道，于是关于 Api 接口的设计，有必要好好写一写", "date_modified": "2021-08-06T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "随笔", "api" ] }, { "id": "why-i-dont-use-qiniu-cloud", "content_html": "七牛云是国内鲜有的免费提供对象存储服务的一个云服务商，和腾讯云，阿里云一样，但这两者收费，而七牛云不收费，当然也不是绝对免费，对象存储免费空间 10g，每个月还有 10g 的 cdn 加速服务（多数人基本用不完），超出部分额外收费，此外 https 收费。
我之前使用七牛云的主要原因，就是业内太多人推荐了，免费还带加速，存储博客图片好的不行，然而发生了如下的事情：
让我不用七牛云的罪魁祸首其实是 Chrome 浏览器，先看一张图片。
![\"image-20201214211848873\"](\"https://img.kuizuo.cn/image-20201214211848873.png\")
What？图片呢？第一时间毫不犹豫打开控制台查看问题所在，有这样几行报错
![\"image-20201214212056058\"](\"https://img.kuizuo.cn/image-20201214212056058.png\")
关注第一行
Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure element '<URL>'. This request was automatically upgraded to HTTPS, For more information see <URL>
翻译过来就是：网页混合内容:页面是通过 HTTPS 加载，但却请求一个不安全元素 HTTP。该请求被自动升级为 HTTPS，更多信息请参见。
管他啥意思，先百度，然后才了解到，在 Chrome 浏览器高版本中（具体多少忘了），如果当前站点是 https，那么会自动将页面请求的 http 升级为 https，也就是说，我当前站点是 https 协议，访问不了 http 的资源，然而这可坑惨我了，我的图片全都放在七牛云上，然而七牛云的 HTTPS 是收费的，那时候我也抱着白嫖的心态，去嫖了七牛云的对象存储来做图床，现在我将http://kzcode.cn 升级为https://kzcode.cn 的时候，就意味这我不能白嫖了？也就是出现了如上画面，然后又去相关了一些百度相关的知道，看看有没有解决办法，如下
这个问题只有 Chrome 浏览器内才有，在 https 站点会将 http 请求自动升级为 https，在其他浏览器不会，上面的图片也会正常显示。
http 站点去请求 https 资源会不安全，而 https 站点去请求 http 会自动升级为 https，而这没有很好的有效方法去让两者兼容。
既然搜到解决办法后，我心想，这网站怎么能不上 HTTPS，怎么能让左上角的锁不安全呢。用了 HTTPS 是不可能回去的了，同时怎么能保证别人用的浏览器不是 Chrome 浏览器呢，于是毅然决然的将所有将图片升级为 HTTPS 了，然而在对比后各家的对象存储服务，我选择了腾讯云，先放一张比对图：
| 运营商 | 价格(元/GB) | 活动 |
|---|---|---|
| 阿里云 | HTTP 0.24 HTTPS 需要额外加一点请求费 | 无 |
| 腾讯云 | HTTP 和 HTTPS 统一 0.21 | 前 6 个月每个月送 20GB 国内流量 |
| 七牛云 | HTTP 0.24 (超出免费 10GB) HTTPS 0.28 | 每个月送 10GB HTTP 流量 (国内外均可使用) 以及 5 万次动态加速请求数 |
可以看到如果你每个月的请求流量都在 10GB 以内，且不用 HTTPS，七牛云肯定是最好的选择，然而我目前的站点是需要 HTTPS 的，并且七牛的 HTTPS 费用高出其他两家，甚至可以说，用了 HTTPS，就没必要选择七牛云！一没优势，速度优化不到哪里去，二是你完全可以相信大厂，三是服务费用还比两者贵。同时我云服务器也是腾讯云的，肯定优先选择腾讯，于是把对象存储换为了腾讯云，早知道就一开始就直接用腾讯的对象存储服务，果然还是花钱实在，白嫖太麻烦了。
参考链接 阿里云、腾讯云、七牛云 CDN 对比
本文的标题并不是说七牛云不好，而是我所遇到的情形让我放弃了使用七牛云，相信你看完了上面所说的，能对你的网站有个存储有个明确的配置，你在哪买服务器了，还是在哪去买其他相关的业务，没必要花费时间去折腾，说到底还是花钱实在。并且价格实际上对一个小网站来说，已经是可以非常低了（当然还是有些人会想着白嫖）
总结下来其实就是，如果你的网站不准备挂 SSL 证书，也就是通过 http 请求访问，那么白嫖七牛云，没问题，好用，但如果你的网站一旦挂了 SSL 证书，我的建议是直接删了七牛云的对象存储。
", "url": "https://kuizuo.cn/why-i-dont-use-qiniu-cloud", "title": "为什么我不用七牛云", "summary": "七牛云是国内鲜有的免费提供对象存储服务的一个云服务商，和腾讯云，阿里云一样，但这两者收费，而七牛云不收费，当然也不是绝对免费，对象存储免费空间 10g，每个月还有 10g 的 cdn 加速服务（多数人基本用不完），超出部分额外收费，此外 https 收费。", "date_modified": "2020-12-23T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "随笔", "cloud-service" ] }, { "id": "tencent-cloud-cdn-and-ssl", "content_html": "如题，本人所购买的服务器，以及对象存储，CDN，和 SSL 都是腾讯云的。
在这篇文章我会简单明细的讲一下我花了一个整个晚上都在腾讯云-控制台做了些什么，也助于自己到时候忘记腾讯云服务器相关操作做个笔记。
先看看我的云服务器配置
![\"image-20201215004521965\"](\"https://img.kuizuo.cn/image-20201215004521965.png\")
腾讯云那时候做活动，花了 298 块买了 3 年 1 核 2g 内存 1m 带宽，够了，这里我要提一点，如果了解过云服务器的话，可能还会看到轻量应用服务器，而且这个轻量应用服务器竟然配置和云服务器差不多，并且价格还便宜，我先放两张图看看
![\"image-20201215005635518\"](\"https://img.kuizuo.cn/image-20201215005635518.png\")
![\"image-20201215005553889\"](\"https://img.kuizuo.cn/image-20201215005553889.png\")
可以看到云服务器可以安装 Window，Linux 系统，而轻量应用服务器则是这些的分支，就这么说的，如果我的服务端只涉及到 nodejs 相关的，那么我大可购买轻量应用服务器，然而多数都是去买云服务器，毕竟可拓展高。两者价格在不是新用户的情况下，云服务器 1g1h1m 一年 662 元，而轻量应用服务器才 408 元。没错，不是新用户服务器就是这么贵。。。
说了这么多题外话，说下云服务器有一个重要的地方就是安全组![\"image-20201215011238478\"](\"https://img.kuizuo.cn/image-20201215011238478.png\")
这里在宝塔面板中，设置了放行端口，此外腾讯云安全组也要设置，不过这里我是入站和出站都设置一键放通，主要方便，也懒得设置了。
此外云服务器大致就如此，基本上宝塔安装后，就没腾讯云的云服务器面板什么事情了，有关云服务器与域名备案我在另一篇文章也写到过 云服务器与域名备案
关于 CDN 的介绍，本人不敢多言，怕讲不好。简单来说，挂了 CDN，你的网站就能加速，然而实际原理没这么简单，就不过多叙述这些了，外面也有很多关于 CDN 的相关资料，可以自行翻阅。
首先，你需要开通 CDN，进入内容分发网络页面会有提示开启。此外到腾讯云有个优惠，新用户 6 个月每个月免费送 20g 回溯流量，此外付费的流量包中，一年也才 19 块，不说，先买了。
在腾讯云-控制台中，主要关注两个点
![\"image-20201215013943201\"](\"https://img.kuizuo.cn/image-20201215013943201.png\")
一个是要加速网站的域名，还有一个就是网站的 SSL 证书，这在下文会说到。
在这里可以添加一个域名，比如test.kzcode.cn（后文也会以这个二级域名为例）
![\"image-20201215014206851\"](\"https://img.kuizuo.cn/image-20201215014206851.png\")
根据相应的业务需求来填写，点击下方的确认提交即可。
![\"image-20201215014459988\"](\"https://img.kuizuo.cn/image-20201215014459988.png\")
接着点击 DNS 解析页面，将 CNAME 的值复制到对应的 DNS 解析，如
![\"image-20201215014619557\"](\"https://img.kuizuo.cn/image-20201215014619557.png\")
点击保存，然后回到 CDN 页面（内容分发网络），可以看到此时的状态已变为已启动。这时候你的网站就成功加速了，而不是用那 1m 的带宽去从服务器内拉去大的一笔的静态资源。
现在你的网站能访问速度得到了提升，但是出现了下面的这样警告（原谅我实在不想用 test.kzcode.cn 来测试）
![\"image-20201215012031362\"](\"https://img.kuizuo.cn/image-20201215012031362.png\")
如果你不希望你的网站出现像这样的不安全警告，那么就很有必要设置 SSL 证书，请求的时候就是 https 而不是 http，好在 SSL 证书不算太难，并且上面 CDN 加速你也弄了，这里我把腾讯云的 SSL 证书简单复刻一遍。
在 SSL 证书，点击申请免费证书
![\"image-20201215012211483\"](\"https://img.kuizuo.cn/image-20201215012211483.png\")
点击确定，输入要绑定的域名，如test.kzcode.cn，和正常注册一样，默认下一步，下一步，接着稍等片刻，等待免费证书签发。SSL 证书有效期一年，一年后就需要重新部署了。然后返回到我的证书，看到成功添加了一条证书
![\"image-20201215013035429\"](\"https://img.kuizuo.cn/image-20201215013035429.png\")
先点击下载，下载到桌面，后面会用到的，不然待会还要回来下载。然后点击右边的部署。
![\"image-20210808150559353\"](\"https://img.kuizuo.cn/image-20210808150559353.png\")
部署类型选择内容分发网络（CDN），点击确定\n随后会跳转到证书配置页面，刚刚设置的域名 test.kzcode.cn 还有申请的免费 SSL 证书 test，选择腾讯云托管证书，向下图这样提交
![\"image-20201215015319153\"](\"https://img.kuizuo.cn/image-20201215015319153.png\")
提示配置成功，这时候打开宝塔面板。添加一个站点
![\"image-20201215015549597\"](\"https://img.kuizuo.cn/image-20201215015549597.png\")
点击设置，在左侧侧边栏中的 SSL 中的选其他证书，上面叫你下载的证书下了吧，好的，打开它，其中一个文件为 Nginx，将里面的两个文件通过文本来打开（是通过文本，而不是双击直接打开），将.key 文件的内容放到密钥上，将.crt 文件的内容放到证书上，然后点击保存，顺便把右上角强制 HTTPS 勾选上
![\"image-20201215020231348\"](\"https://img.kuizuo.cn/image-20201215020231348.png\")
打开网页，现在你访问test.kzcode.cn，就能得到如下结果
![\"image-20201215020429502\"](\"https://img.kuizuo.cn/image-20201215020429502.png\")
连接是安全的，证书有效，恭喜，站点创建成功！
至此，一个二级域名 test.kzcode.cn，并带有 SSL 证书与 CDN 加速的站点便成功部署！
整个过程写下来，其实给我的感受就是写给未来某一时刻去重新折腾腾讯云的一篇文章，从头到尾，我也只是把这些操作重新复刻一遍，然后写成这篇文章。
在折腾了一晚上的云服务器，腾讯云给我的一大特点就是好用，并且文档详细。果然这就是大厂的资本吗，爱了爱了。并且新用户所涉及的金额并不多，甚至我都没感觉到我到底有没有花钱在网站部署上（等到时候网站人流量来的，估计就要花大价钱了）。并且执行了上面的操作，我的网站确实有所提高速度，不过还没完，云服务中还有一个挺重要的一部分还没讲到，也就是对象存储，留个小坑，有时间在写。
", "url": "https://kuizuo.cn/tencent-cloud-cdn-and-ssl", "title": "腾讯云之CDN与SSL配置", "summary": "如题，本人所购买的服务器，以及对象存储，CDN，和 SSL 都是腾讯云的。", "date_modified": "2020-12-15T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "cloud-services" ] }, { "id": "content-type-of-http-request", "content_html": "先看一条 HTTP 请求
POST https://xxx.kuizuo.cn/v2/login HTTP/1.1
Host: xxx.kuizuo.cn
Connection: keep-alive
Content-Length: 121
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
// Content-Type: application/json;charset=UTF-8
Accept: application/json, text/plain, */*
{\"username\":\"kuizuo\",\"password\":\"a12345678\"}
上面那个请求发送到我的服务器，服务器却接收到的是这样一串值
{ \"{\\\"username\\\":\\\"kuizuo\\\",\\\"password\\\":\\\"a12345678\\\"}\": \"\" }
很显然，它把 json 格式解析成了 x-www-form-urlencoded。
一个很简单的登录请求，注意一个协议头Content-Type，它决定了你的数据发送到服务端上会是什么格式。
类型格式：type/subtype(;parameter)?
type 主类型，任意的字符串，如text，如果是*号代表所有；
subtype 子类型，任意的字符串，如html，如果是*号代表所有；
parameter 可选，一些参数，如Accept请求头的q参数， Content-Type的charset参数。
常见的媒体格式类型如下：
text/html ： HTML 格式
text/plain ：纯文本格式
text/xml ： XML 格式
image/gif ：gif 图片格式
image/jpeg ：jpg 图片格式
image/png：png 图片格式
以 application 开头的媒体格式类型：
application/xhtml+xml ：XHTML 格式
application/xml ： XML 数据格式
application/atom+xml ：Atom XML 聚合格式
application/json ： JSON 数据格式
application/pdf ：pdf 格式
application/msword ： Word 文档格式
application/octet-stream ： 二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ： form 表单数据被编码为 key/value 格式（通过=与&拼接）发送到服务器（表单默认的提交数据的格式）格式如: username=kuizuo&password=a12345678
另外一种常见的媒体格式是上传文件之时使用的：
multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式
实际上遇到最多的也就是 text/html，text/plain，application/json，application/x-www-form-urlencoded 这几个。
这是在我帮别人分析登录算法的时候，由于协议头中少添加了一个Content-Type，导致我发送的数据，服务端解析不了，收到了这样的响应
{ \"code\": 500001, \"message\": \"亲，我们的系统目前忙碌中或无法回应，请将此问题回报给我们的客服人员。 错误代碼(68523)\", \"data\": null }
然而实际响应应该是这样的
{ \"code\": 400020, \"message\": \"密码错误\", \"data\": \"验证码错误\" }
原因就是因为协议头没有添加Content-Type: application/json;charset=UTF-8所导致的。因为这个，坑了我近一个小时，还一直以为是数据错误，没想到仅仅只是少加了一些协议头导致的请求数据格式错误。
一个印象很深刻的教训，模拟 HTTP 请求的时候，一定不要吝啬补全协议头，不然坑的就是自己了。我已经给坑过两次了，所以在特意想借此记录一下，免得下次又是一番折腾。写个注意，醒目一点。
发送的是 JSON 格式数据，切记一定要添加上协议头Content-Type: application/json;charset=UTF-8！！！
记录一下自己在 nodejs 中使用 http 请求库 axios 中的一些坑（针对 Cookie 操作）
不敢说和别人封装的 axios 相比有多好，但绝对是你能收获到 axios 的一些知识，话不多说，开始
一般而言，很少有裸装使用 axios 的，就我涉及的项目来说，我都会将 axios 的 request 封装成一个函数使用，接着在 api 目录下，引用该文件。项目结构一般是这样的：
|-- src
|-- api
|-- user.js
|-- goods.js
|-- utils
|-- request.js
import axios from 'axios'
var instance = axios.create({
baseURL: process.env.API, // node环境变量获取的Api地址
withCredentials: true, // 跨域携带Cookies
timeout: 5000,
})
// 设置请求拦截器
instance.interceptors.request.use(
(config) => {
// 在config可以添加自定义协议头 例如token
config.headers['x-token'] = 'xxxxxxxx'
return config
},
(error) => {
Promise.error(error)
},
)
instance.interceptors.response.use(
(response) => {
const res = response.data
// 根据对应的业务代码 对返回数据进行处理
return res
},
(error) => {
const { response } = error
// 状态码为4或5开头则会报错
// 根据根据对应的错误,反馈给前端显示
if (response) {
if (response.status == 404) {
console.log('请求资源路径不存在')
}
return Promise.reject(response)
} else {
// 断网......
}
},
)
export default instance
实际上，上面那样的封装就够了，相对于的业务代码就不补充了，如果你的宿主环境是浏览器的话，很多东西你就没必要在折腾的，甚至下面的文章都没必要看（不过还是推荐你看看，会有帮助的）。不过没完，再看看 api 里怎么使用的
import request from '@/utils/request'
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data,
})
}
export function info() {
return request({
url: '/user/info',
method: 'get',
})
}
export function logout() {
return request({
url: '/user/logout',
method: 'post',
})
}
看来很简单，没错，就是这么简单，由于是运行在浏览器内的，所以像 cookies，headers 等等都没必要设置，浏览器会自行携带该有的设置，其实想设置也设置不了，主要就是浏览器内置跨域问题。XMLHttpRequest
就这？感觉你写的跟别人没什么区别啊
别急，下面才是重头戏。也是我为啥标题只写 axios，而不写 vue-axios 或者 axios 封装的原因。
运行环境在浏览器中，axios 是无法设置与获取 cookie，获取不到 set-cookies 这个协议头的（即使服务器设置了也没用），先看代码与输出
instance.interceptors.request.use((config) => {
config.headers['cookie'] = 'cookie=this_is_cookies;username=kuizuo;'
console.log('config.headers', config.headers)
return config
})
instance.interceptors.response.use((response) => {
console.log('response.headers', response.headers)
return res
})
控制台结果：
![\"image-20201210060704240\"](\"https://img.kuizuo.cn/image-20201210060704240.png\")
首先，就是圈的这个，浏览器是不许允许设置一些不安全的协议头，例如 Cookie，Orgin，Referer 等等，即便你看到控制台 config.headers 确实有刚刚设置 cookie，但我们输出的也只是 headers 对象，在 Network 中找到这个请求，也同样看不到 Cookie 设置的（这就不放图了）。
同样的，通过响应拦截器中输出的 headers 中也没有 set-cookies 这个字样。网络上很多都是说，添加这么一行代码 withCredentials: true，确实，但是没说到重点，都没讲述到怎么获取 cookies 的，因为在浏览器环境中 axios 压根就获取不到 set-cookies 这个协议头，实际上 axios 就没必要，因为浏览器会自行帮你获取服务器返回的 Cookies，并将其写入在 Storage 里的 Cookies 中，再下次请求的时候根据同源策略携带上对应的 Cookie。
![\"image-20201210061627824\"](\"https://img.kuizuo.cn/image-20201210061627824.png\")
要获取也很简单，vue 中通过js-cookie模块即可，而在 electron 中通过const { session } = require('electron').remote （electron 可以设置允许跨域，好用）有关更多可以自行查看文档。
那我就是想要设置 Cookies，来跳过登录等等咋办，我的建议是别用浏览器来伪装 http 请求。跨域是浏览器内不可少的一部分，并且要允许跨域过于麻烦。有关跨域，我推一篇文章10 种跨域解决方案（附终极大招）
::: details 查看代码
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
withCredentials: true,
timeout: 5000,
})
service.interceptors.request.use(
(config) => {
if (store.getters.token) {
config.headers['x-token'] = getToken()
}
return config
},
(error) => {
Message.error(error)
return Promise.reject(error)
},
)
service.interceptors.response.use(
(response) => {
const res = response.data
if (res.code !== 200) {
Message.error(res.msg || 'Error')
return Promise.reject(new Error(res.msg || '未知错误'))
} else {
return res
}
},
(error) => {
if (error.response) {
let res = error.response
switch (res.status) {
case 400:
Message.error(res.msg || '非法请求')
break
case 401:
MessageBox.alert('当前登录已过期，请重新登录', '提示', {
confirmButtonText: '重新登录',
type: 'warning',
}).then(() => {
store.dispatch('user/logout').then(() => {
location.reload()
})
})
case 403:
Message.error(res.msg || '非法请求')
router.push('/401')
case 404:
Message.error(res.msg || '请求资源不存在')
break
case 500:
Message.error(res.msg || '服务器开小差啦')
break
default:
Message.error(res.msg || res.statusText)
}
} else {
Message.error(res.msg || '请检查网络连接状态')
}
return Promise.reject(error)
},
)
export default service
:::
作为 nodejs 的主流 http 框架怎么能只用在浏览器上，nodejs 自然而然可以，不过 nodejs 需要配置的可就多了，在 nodejs 环境中，自然没有浏览器的同源策略，像上面设置不了的 Cookie，现在随便设置，先看看我是怎么封装的：
import axios from 'axios'
import * as http from 'http'
import * as https from 'https'
export async function request(opt) {
let { url, method = 'get', headers = {}, cookies, data = null } = opt
headers['User-Agent'] = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36'
headers['Referer'] = url
if (typeof cookies === 'object') {
headers['Cookie'] = Object.keys(cookies)
.map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(cookies[k]))
.join('; ')
} else if (typeof cookies === 'string') {
headers['Cookie'] = cookies
}
let options = {
url: url,
method: method,
headers: headers,
data: queryString.stringify(data),
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({
keepAlive: true,
rejectUnauthorized: false,
}),
timeout: 5000,
}
try {
let res = await this.axios.request(options)
return res
} catch (e) {
console.log(e)
return e.message
}
}
// test.js
const request = require('./request');
function test() {
let url = 'https://passport2.chaoxing.com/fanyalogin';
let data = {
fid: '-1',
uname: '15212345678',
password: 'a12345678',
refer: 'http%253A%252F%252Fi.mooc.chaoxing.com',
t: 'true',
};
let headers = {};
let cookies = 'username=kuizuo;uid=123;';
let res = await request({
url: url,
data,
headers,
cookies,
});
console.log('test -> res.headers', res.headers);
return res.data;
}
test();
测试一下，顺便抓一下包，看看请求包
GET /fanyalogin HTTP/1.1
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
Referer: https://passport2.chaoxing.com/fanyalogin
Cookie: username=kuizuo;uid=123;
Host: passport2.chaoxing.com
Connection: keep-alive
Content-Length: 100
....
有我们自定义的 Cookie，在看看响应的协议头
test -> res.headers {
server: 'Tengine',
date: 'Thu, 10 Dec 2020 00:24:15 GMT',
'content-type': 'text/html',
'content-length': '1852',
connection: 'keep-alive',
vary: 'Accept-Encoding',
'set-cookie': [
'JSESSIONID=4365A6B9FD8E0CBADDBDD7E7DA468F7E; Path=/; HttpOnly',
'route=b2eda164bddd148142a54809ef404926;Path=/'
],
'accept-ranges': 'bytes',
etag: 'W/\"1852-1606444212000\"',
}
同样能获取到 set-cookie，设置与获取都是这么 so easy ，不同于上面浏览器的配置。
这里我要说明一些东西，在封装代码中有个 httpAgent 与 httpsAgent，你可以字面翻译就是 http 代理，设置它用来干嘛呢，其中有这么个属性 keepAlive: true ，如果设置了协议头中的将会有 Connection: keep-alive，而不设置则 Connection: close，这里也不想过多说明 http 相关知识，如果只是请求一次,那么两者没有太大区别
然而如果我请求一次,过一会(几秒内)又要请求了,那么 keep-alive 一次连接就可以处理多个请求，而 close 则是一次请求后就断开，下次就需要再次连接。说白了就是快一点，而 close 需要不断连接，断开，自然而然就慢。一般来说设置 keep-alive 就对了。
其中在 httpsAgent 中，还有一个属性rejectUnauthorized: false，说简单点，就是不抛出验证错误，在抓 nodejs 包的时候，如果不通过设置代理服务器（Fiddler，Charles），而是通过网卡（HTTP Analyzer，Wireshark）就会抛出异常，一般就会出现这种错误。
Error: unable to verify the first certificate
然而问题就来了，服务端的返回的 set-cookie 该怎么保存。如果只是涉及客户端层面的，想写一个模拟 http 请求的，直接将获取到的 cookies 与原有的 cookie 合并即可。我那时候的代码就是这样：
let newCookie = res.header['set-cookie']
? res.header['set-cookie']
.map((a) => {
return a.split(';')[0]
})
.join('; ')
: ''
// mergeCookie 就是将两者cookie 拼接而成
let newCookies = mergeCookie(cookies, newCookie)
res[cookie] = newCookies
return res
然后返回响应中携带 res.cookies 即可，下次请求的时候再将其在带上。
如果只是，利用 nodejs 来实现类似爬虫，模拟登录，然后利用登录后的 cookie，来获取用户信息。如果不希望手动处理 cookies 的话，我其实还是推荐一个 http 模块，superagent，做一些小爬虫和模拟请求挺好用的，就不做过多介绍了。不过由于 nestjs 中自带 axios 模块，加上需要转发 http 请求，于是我就自行封装了一个 axios。
实际上，axios 会根据当前环境，来创建 xhr 对象（浏览器）还是 http 对象（nodejs），在我那时候都以为 axios 是两个共用的，初学 electron 的时候，一直卡在 http 请求的配置
// `adapter` allows custom handling of requests which makes testing easier.
// Return a promise and supply a valid response (see lib/adapters/README.md).
adapter: function (config) {
/* ... */
},
在 axios 中也有这么一段配置，翻看了 lib/adapters 下目录我才瞬间醒悟过来，两者环境是不同的。
![\"image-20201210214055696\"](\"https://img.kuizuo.cn/image-20201210214055696.png\")
就我使用而言，在浏览器环境下 axios 处理的特别好，允许设置拦截器处理请求与响应，但在 nodejs 下在处理模拟请求确实不如 Python 的 request 模块，奈何 axios 最大的便携就是能直接在浏览器中，尤大推荐的 http 请求库也是 axios。
实际上还涉及到了 nodejs 中转发请求的，再给自己留一个坑。
在写这篇文章的时候，我其实都没读过 axios 的源码，说实话，那时候遇到问题，就不应该愚昧的去搜索，去不断尝试，有时候直接通过翻看底层代码，可以一目了然自己所面临问题的解决方式。
", "url": "https://kuizuo.cn/cookie-of-node-and-browser", "title": "node与浏览器中的cookie", "summary": "前言", "date_modified": "2020-12-10T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "node", "axios", "cookie" ] }, { "id": "server-and-domain-beian", "content_html": "服务器说白就是全天 24 小时不停歇的运行一台电脑，同时分配一个公网 IP 给这个电脑，你只需要把你要的资源放置到这台电脑上，别人通过访问该 IP 就能访问到这台电脑的资源，比如你放一个网页部署在这台服务器上，别人访问 这个IP就能访问到网页的内容。
你可以根据需求来安装服务器的系统，这些在云服务厂商中都是可以选择的。
一般来说，一些提供云服务器的厂商都会给新用户一个新用户价，差不多也就是 100 左右一年的云服务器,配置一般都是 2g 内存,1 核,1m 带宽,50g 硬盘说实话对于没有特殊需求的服务器够用了。而不是新用户的价格，这样的配置一个月差不多 70 元，算一下一年打折后 700 元，这还算便宜的了，服务器贵这很正常，全天不间断运行，电费，网费和一些服务费用，其实就已经非常值了。
其他几个配置没什么可说的，如果要说服务器哪个配置最贵的话，无疑就是带宽了。1M 的带宽理论上传速度为 128kB/s，也就是我从服务器中下载一个 10m 的软件，需要 80 秒，这还只是理论速度，我实测过平均速度不到 100kB/s。如果搭建网站的话 1m 有些慢，虽说一个页面一般都不会超过 100kb，但背后加载的图片 css js资源可就不只是kb大小了，用户访问网页就需要花费一定时间等待加载，体验非常不好。个人建议带宽5m起步，否则就不建议购买。
关于服务器的选择很多人不知道云服务器和轻量应用服务的区别，这里两种服务器我都买过，且目前都在役。主要区别和优势请参考下表（腾讯云文档）
![](\"https://img.kuizuo.cn/image_CO_V_ghsyo.png\")
更具体的可以查看对应云服务商的介绍
阿里云ECS云服务器和轻量应用服务有什么区别及选择方法-阿里云开发者社区 (aliyun.com)
轻量应用服务器 与云服务器 CVM 对比-产品简介-文档中心-腾讯云 (tencent.com)
总结：买轻量应用服务器是最实惠的
如果你不想花钱买一个服务器的话，可以考试github学生认证，会送你一个服务器。具体可到官方中查看 https://education.github.com/experiences/virtual_event_kit
![](\"https://img.kuizuo.cn/image_Rsh8Y_TBfe.png\")
这里可能会说的不对，毕竟我接触服务器相关等配置也没太多时间，但是我觉得有必要说一下，我那时候用 windows 服务器的时候，只要通过 windows专业版（一定要专业版才能远程连接别人的电脑）自带的远程桌面（cmd 中输入mstsc即可），然后输入 ip 地址，接着在输入相应的账号密码即可，但有可能无法连接，原因是防火墙和 ip 白名单没有配置好，服务器不允许连接。
而对于 Linux，用的最多的就是宝塔面板了，但是连接不是通过 windows 远程桌面，而是通过像终端那样连接登录，我一般是用 Xshell 来连接。但是连接完就开始输入命令安装宝塔面板，然后会有对应的面板地址和登录宝塔面板的账号密码，只要访问给定的面板地址加上用户密码即可登录。像对应的界面如下
![\"image-20200918141519472\"](\"https://img.kuizuo.cn/image-20200918141519472.png\" "\\"image-20200918141519472\\"")
目前市场上主要有阿里云和腾讯云的服务器，这两者的服务器质量和操作体验上都属于大厂级别。不分上下，都可以选择购买，不过最好有个原则，你域名在哪购买，服务器就买哪一家的，因为到时候备案是需要服务器才能备案的。
正常来说你访问你一个网站肯定不是访问一个ip地址，而是一个域名，比方说访问kuizuo.cn，baidu.com。但其实访问域名就相当于访问这个ip，过程如下：首先访问域名会经过DNS解析，DNS（域名系统）会找到你要访问的域名所解析的ip，然后访问这个ip。
但有遗憾的地方就是很多时候想要注册自己想要的域名非常难，因为已经被别人现行注册了。比如我的现在的kuizuo.cn这个域名是从他人手里购买而来的。所以域名这东西请优先准备好，备案解析啥的完全不急，一年也就是几十块钱，但是你不先买就很有可能给别人先注册，到时候想买都没得买，要不然就要花大价格购买，因此也有很多人去做域名买卖的生意。
一般一个域名够用了，需要的话在域名解析中去添加域名的子域名（二级，三级等等），比如我的一些个人项目就是使用二级域名来访问的，这里我也就不在列举了。
首先备案要提交负责人的身份信息（身份证正反，手持，人脸，手机号，住址等），记录你这个域名内的网站的负责人和单位，主要为了防止在网上从事非法的网站经营活动，打击不良互联网信息的传播，能给予警告和封禁。（网站备案只针对国内服务器）
总之不要去搞违规违法行为，天网恢恢疏而不漏，网警要找总归有方法。
9 月 3 号购买的腾讯云与域名，然后进行初步的服务器简单部署配置，第二天开始域名实名认证，接着实名后需要 3 天时间才可以进行开始域名备案，等了 3 天开始域名备案提交网站的用途信息等等，然后拍身份证，人脸，手持，接着到 9 月 9 日腾讯云服务器的客服打电话给我要我修改一些信息，比如网站详情写的不行，资料不全，过不了备案等等，然后修改重新提交一次，最终等待收到腾讯云助手的通知，直到 9 月 18 号，如下结果
![\"image-20200918113449612\"](\"https://img.kuizuo.cn/image-20200918113449612.png\" "\\"image-20200918113449612\\"")
至此 ICP 备案就搞定了，ICP 还算轻松，身份信息真实，来访电话及时接听，等就行了。
只要ICP 备案，就可以通过域名 kuizuo.cn 访问到我的个人博客。(当然前提需要到域名管理中的DNS解析添加)
![](\"https://img.kuizuo.cn/image_nuVA2RTh_b.png\")
但还有一个公安备案，虽说不是强制的，但一般都是建议去公安备案一下。我之前的域名kzcode.cn就有公安备案，但现在的kuizuo.cn 并没有。主要原因还是太过于繁琐，比ICP备案复杂多了。
首先需要登录 http://www.beian.gov.cn 注册并且登录填写的信息也比上面的多，如下图
![\"image-20201119191204222\"](\"https://img.kuizuo.cn/image-20201119191204222.png\" "\\"image-20201119191204222\\"")
填写资料折腾了半小时左右的时间，才提交上去，而且过了快两周后，我收到了如下的短信
【公安网站服务平台】尊敬的用户:您开办的网站(互联网技术文章分享:kzcode.cn)审核未通过，原因：网站信息检查有误，审核不通过，请尽快登录www.beian.gov.cn网站，在草稿中修改并重新提交网站备案申请，如有疑问可在工作日（上午8:30-11:30、下午14:00-17:00）联系网警，联系电话：059xxxxxxxx，谢谢您的配合。
工作人员电话和我联系是说我户籍转了，需要在我转入地去申请，于是又重新提交改数据，反正就是照着腾讯云的帮助文档填写自己的个人信息，中途有几次就这么磨着磨着到了 11 月 17 号，短信收到了这一条
【公安网站服务平台】尊敬的用户:您的开办主体已经审核通过，如果存在自动关联的待备案或待认领网站，请尽快核对归属，进行新网站备案以及已备案网站认领的申请。如有疑问可在工作时间（周一至周五上午 9:00-12:00、下午 14:00-17:00）联系网警，联系电话：059xxxxxxxx，谢谢您的配合。
然而，我登录了网站却没有看到已备案的网站，于是联系工作人员 ，然后叫我重新提交一次，这次不到半小时就搞定，最终短信结果如下
【公安网站服务平台】尊敬的用户:您开办的网站(互联网技术文章分享:kzcode.cn)已经审核通过，请尽快登录www.beian.gov.cn网站,下载备案号码，附在网站底部，如有疑问可在工作日（上午9:00-12:00、下午14:00-17:00）联系网警，联系电话：059xxxxxxxx，谢谢您的配合。
然后登录公安备案网站，查看备案结果如下图，帅的不谈！
![\"image-20201117152619474\"](\"https://img.kuizuo.cn/image-20201117152619474.png\" "\\"image-20201117152619474\\"")
如果上面都已经弄好了也别太高兴，要在网页源代码将公安联网备案信息放置在网页底部。简单的说完成两项备案后都需要在网站页面底部显示备案号，并指明转到链接。在我的个人博客页面最下方，就会看到如下图这样。
![\"image-20201117153209037\"](\"https://img.kuizuo.cn/image-20201117153209037.png\" "\\"image-20201117153209037\\"")
工信部原文 第十三条和第二十五条
第十三条 非经营性互联网信息服务提供者应当在其网站开通时在主页底部的中央位置标明其备案编号，并在备案编号下方按要求链接信息产业部备案管理系统网址，供公众查询核对。
第二十五条 违反本办法第十三条的规定，未在其备案编号下方链接信息产业部备案管理系统网址的，或未将备案电子验证标识放置在其网站指定目录下的，由住所所在地省通信管理局责令改正，并处5千元以上1万元以下罚款。
当然也有很多网站并没有这么做，具体还是需要看网站的性质，是否经营性网站。像个人博客这种，只需要悬挂一个ICP备案号即可，但对于绝大多数的国内网站是肯定悬挂公安备案，并且除了备案信息外，还有一堆相关证件，如营业执照，许可证，资格证等等，国内的网站监管非常严格的。
", "url": "https://kuizuo.cn/server-and-domain-beian", "title": "服务器与域名备案", "summary": "云服务器", "date_modified": "2020-11-17T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "server", "cloud" ] }, { "id": "easy-language", "content_html": "好歹自己学习易语言也快有一年了，也用易语言写了一些软件，特此记录一下以及对易语言的个人看法。
该文章有可能过于啰嗦，可吐槽的点太多了，也正有感悟才能写的这么多。
补: 2021 年 3 月，也就是我最后一次编写易语言项目，因为我已经好久不写 exe 项目了。
还是简单介绍一些易语言吧，毕竟肯定有很多即使学过编程也没听过易语言的，易语言是一门以中文作为程序代码编程语言，简称 E 语言，创始人吴涛，2000 年一个人独立开发。有关易语言的特点如下：
不像主流的编程语言 C，Java，Python 等是开源的，易语言是一款纯正的商业编程软件，易语言正版加密狗 618 元，不过有破解版，不然多数人都不会去接触易语言了。但不开源就已经注定了易语言的在整个生态就不行，并且易语言已不在维护了，也就是很久很久没更新过，或者说不会再更新了，作者也已不再管易语言了，目前也就一些易友去开发一些相关的插件模块库这些。
我这里放几张图展示一下
![\"image-20200914010759872\"](\"https://img.kuizuo.cn/image-20200914010759872.png\")
![\"image-20200914011112087\"](\"https://img.kuizuo.cn/image-20200914011112087.png\")
首先要吐槽一下，2000 年的页面与 2020 年的页面可以说是完全一模一样的。开发界面是真的丑，但有一点是，页面的语言命令都是全中文的，比如if所对应的的就是如果，MessageBox所对的就是信息框，很多命令都中文化就再举例了，并且每个函数都是以表格似的填写，也就是代码的格式都定死死的了，如果你学过其他的编程语言在来和易语言比对，你多半会学的够呛，很难理解为啥要这样。不过也正是填表式声明，导致易语言过于简单，后文也会提及。
在比对一些 C#的开发界面
![\"image-20200924125428023\"](\"https://img.kuizuo.cn/20200924135324.png\")
![\"image-20200924125907216\"](\"https://img.kuizuo.cn/20200924135325.png\")
可以看到页面肯定比易语言好看 100 倍，但是随之而来的就是难度的提升，先不说好写与不好写，你让一个没学过编程的看，多半看的云里雾里，这时候就会劝退很多人瞬间不想学了，相信很多学编程的都有这样的经历。
接着再来说一下上手学习，正是由于有上面那个前提，易语言可以做到上手特别快，可以说会用电脑，有逻辑，会识中文，易语言好学的一批，基本上学个几天自行写个软件完全没问题。对于国人一点编程基础都没有的新手，并且英语还不好的话来说，易语言可能是真的好上手，我当初学易就有一部分就是给英文劝退了。
首先我要提的是可视化界面设计，你只需要将旁边的组件拖拽至窗口页面上即可，相对于的属性，例如内容，宽高，颜色在旁边显而易见，要修改只需要点击修改对应的数值即可，而对于其他的 IDE 来说，如果英文不咋好，并且还是第一次用，找可能都要找几分钟。而正是这个可视化界面，让我当初有信心学下去易语言，如果你学过 C 或者其他编程语言，一开始都是在那黑不溜秋的控制台显示，我就只是想写个软件用用，你给我讲那么多理论知识，甚至我还听不懂的那种有个嘚用。
同时还可以直接打包成 exe 文件，直接在 windows 上运行，发给别人也能运行，哇，瞬间感觉到写软件的牛逼之处了，直接小有成就一波。这里我放几张我当初学易语言写的一些界面吧：
例如写一个骗骗小学生的 2020 年最新刷 Q 币软件（用到了浏览器的填表功能改了 q 币的值）
![\"demo\"](\"https://img.kuizuo.cn/20200924135326.gif\")
在比如做一个音乐播放器（是有声音的，只是我录制的是 gif）
![\"demo1\"](\"https://img.kuizuo.cn/20200927031909.gif\")
在比如一些自动添加好友的
![\"image-20200924191526221\"](\"https://img.kuizuo.cn/20200927031910.png\")
在比如写一个注册机模板
![\"image-20200924192403210\"](\"https://img.kuizuo.cn/20200927031911.png\")
网络验证
![\"image-20210819233054879\"](\"https://img.kuizuo.cn/image-20210819233054879.png\")
![\"image-20210819232928124\"](\"https://img.kuizuo.cn/image-20210819232928124.png\")
还有特别特别多的例子我就不举例了，这些用其他的编程语言肯定能写，但是与之对应的就是学习成本，很多人学其他编程语言，甚至还没学到界面设计就开始放弃了，原因很简单，没兴趣学呗，易语言界面好设计，但是基本都是原生 windows 组件，对于新手来说这完全足够设计出自己的软件了。
要是没能在最想学习的时候，满足自我的成就感，那很有可能就会学不下去。
我当初学易语言也是这样的，暑假学了两个月，其中第一个月学基础到还没什么，也就开始学习易语言的基本语法和编写一些程序来玩玩，但这些说实话没什么可看的，或者说没什么可用的，就想上面那个骗骗小学生的刷 q 币软件有用吗，没用呗。初学的一个月就都开始写这些可以说毫无软用的东西，直到我照着视频一个字一个字的模仿着敲一遍扫雷一键秒杀的代码，没错，就是这个激起了我对编程，让我感受到编程的魅力。放上一张 gif 图片。
![\"demo2\"](\"https://img.kuizuo.cn/20200927031912.gif\")
当初照着视频一步一步来最终完成了该软件，但那时候的我其实根本不知道为什么可以这样，直到后续了解到汇编与游戏内存相关的知识，我才算真正懂的当初扫雷外挂的原理。
也正是因这个扫雷的外挂，让我接下来的几个天疯狂的学习，去写其他的游戏外挂，比如连连看的一键秒杀，消消乐，植物大战僵尸等等。这里我也放一张图吧（还特意去下载 qq 游戏）
![\"demo3\"](\"https://img.kuizuo.cn/20200927031913.gif\")
不过后面就没怎么学习游戏外挂相关的，一是所看的教程是 11 年的，中途没更新了，二是目前热门游戏以我目前能力写不出来，只要加上了检测，就过不了，并且容易封号（注：我 QQ 可不是开外挂给搞封了，就算开外挂最多也只是封游戏账号），最近接触的也就是 CF 越南服的外挂，有教程于是就学了点皮毛，不过教程又教到一半，就没深入去学习。这里提醒一句，写游戏外挂并销售是可是会给抓的。
不过有点扯远了，就凭这一手界面设计，易语言其实就足以容易上手写出个软件出来。在叙述几点易语言容易上手的地方，自带提示，全中文文档，比如下图
![\"image-20200924220413124\"](\"https://img.kuizuo.cn/20200927031914.png\")
只要你鼠标选到对应的函数上，按下 F1 或者点击提示，就有对应的函数提示，对应其他语言也有，但是纯英文的，门槛就高一个档次。
如果没有这个模块也就易语言跟其他语言的区别可能就是一个是中文一个是英文了。我就举我用的最多的一个命令文本_取出中间文本
![\"image-20200924220908502\"](\"https://img.kuizuo.cn/20200927031915.png\")
而对于其他的编程语言，这类语言还需要自行编写一个函数来调用，而精易模块则是直接封装好好的供你使用。你都没必要去了解底层的函数，直接把门槛降了一个大档次。
至于相关的程序编写我也不多概述，下面就是易语言的缺点。
我说说我用易语言的缺点，也是我最不推荐别人学易语言的了
我上面也说到过 2000 年的页面与 2020 年的页面可以说是完全一模一样的。虽然有易友开发了仿 VS 界面的，但启动起来影响运行速度，我就没安装了。虽说我不是强迫症，但用多了 vscode 与其他的 IDE 相比，看到易语言就能想到是几年前的软件了。
易语言毕竟还是一种封装过的语言，带来的方便，同时也牺牲了性能空间，与原生的桌面级开发相比易语言是无法比的。就比如用 C#开发的所占用空间肯定比易语言少，相关的性能优化更好，这里我就不放图了。
这里我有必要说说关于易语言的一段故事，这里我放几个链接，可以去了解一番 刷枪改图强登游戏 CF 外挂
如果你在 2010 年左右接触过网络游戏，你肯定遇到过各种各样的外挂，而这类外挂多数都是出自易语言之手，甚至你现在在外面遇到的很多游戏脚本外挂，易语言也能占据多数。你随便百度一些易语言，相关的评论都是有关外挂这些。但事实上你只会易语言是根本不够写外挂的，我学过相关外挂制作，虽然学的浅，但至少学过。是需要汇编这类基础，但又为什么会很多外挂是用易语言写,，而且都是些水平不是特别高的人，原因很简单，因为那些写挂的很多都不会真正写挂，只是调用别人封装好了的库，甚至就连易语言自身都带了外挂库这些。让他们写一款新游戏的外挂，他们多半是写不出来了，原因就是他们不懂汇编这些，但是调用写好的库就 6 的飞起。当然这其中还是有些利益相关的方面，我也不多提了。
如我上面所的我一个初中同学，要不是我接触了编写外挂这些，我还真信了他当初能写的，实际上都是修改外面的源码，或者是直接调用写好的库，直接偷源码用。
因为外挂行业的崛起，导致一些厂商不得不进行一定的处理。总之，目前易语言写过的项目，多数是会报毒的，即便没毒，也已经给杀毒软件的厂商给拉入黑名单了，所以可以说没公司要易语言的程序员，即使软件没毒，但是还是报毒，你是信杀毒软件还是易语言？
我在做一些网页数据获取的时候，竟然连个 DOM 对象都没有提供，当时没接触前端，不知道有 DOM 对象，还是用正则去匹配，那时候是真的 nc。接触了前端，发现易语言竟然没提供 DOM 对象操作，我还是用别人封装的 DOM 类，并且还有可能出现匹配不到情况。
其次是调试的时候，对于变量值长度过长竟然无法直接查看，还需要保存为文本才能查看，并且我调试的时候常常崩溃，导致我每次找一个 bug 的时候都需要重启易语言好几遍才行。
由于是类似表格式的填写变量，参数与类型，也就导致了无法在其他编辑器上进行编写易语言代码比如我复制一个函数，给我的结果是
.版本 2
.子程序 子程序1, 整数型
.参数 参数1, 文本型
.局部变量 变量1, 整数型
变量1 ＝ 到整数 (参数1)
返回 (变量1)
而在易语言所对的是
![\"image-20200924222319462\"](\"https://img.kuizuo.cn/20200927031916.png\")
在易语言中的引号\"\"，只能通过常量#引号，或者通过常量表，就比如下面这个 jsoin 字符串 {\"a\"=\"123\",\"b\"=\"321\"}，而易语言的写法就是，\"{”+#引号+“a”+#引号+“=”+#引号+“123”+#引号+“,”+#引号+“b”+#引号+“=”+#引号+“321”+#引号+“}\"，一个个通过字符串来拼接，巨麻烦，也是我最想吐槽易语言的，不过也可以通过常量表来替换，但依旧很麻烦。
还有易语言自身是不支持 utf-8 编码显示，原因很简单，当初只是为了给国人用，gbk 显然是更好的选择。但有时需要 utf-8 的，这时候就莫得办法。
几乎没有公司招聘易语言程序员，实际上上面所说的就足以证明易语言不行了。并且很多人都不看好易语言，黑易语言，至于为什么黑，百度或者知乎想必会有更好的答案，这里我也就不再赘述了。
写到这，我其实有点想把介绍易语言的一部分给删了， 我不推荐新手去学易语言，因为易语言相比于其他语言，它还是太弱了。但如果没有这半年的易语言学习，让我天真的以为编程的简单，又怎么鼓舞真正入坑，让我去学习更多更深奥的知识。
不过就目前而已，我已经很少用易语言写东西了，但如果要写桌面级软件，我还是会首选易语言（因为只会易语言），毕竟写了也有半年了，开发效率也高。如果有机会的话，会深入学一下 C#还有 Qt，不过也不知道是什么时候才会有机会。
关于英语方面的话，我是挺惧怕英语的，我高中英语就没怎么及格过，甚至我大学英语还挂科了，但易语言给我带来了编程希望。就我目前学习来说，编程还真的不怎么吃英语，看不懂英语文档，翻译成中文文档不就完事，而且学多了就会发现太多都是死代码，需要的时候翻阅文档直接 Ctrl C V 使用即可。英语对编程来说只是为辅，英语好并不能提高编程的上限，同时也决定不了下限，就这么说吧，你让一个学英语专业的人来看一份几百行的代码，基本注释写得在详细，他没学过编程，能看的懂吗？但有很多开源的项目都是英文的，会英文固然是好，但不会就不行了吗，看不懂英文文档，我翻译还不行吗？说这些，就是希望别用自己的短处来阻劝自己的目标，很多时候都是学了才知道这个有没有用，没学有锤子用！
易语言是我接触过的第一款编程语言。那时候曾是我最喜欢的编程语言，也是最能让我感到成就感的编程语言，不过在这行学多了，还是不得不放弃易语言开发，原因就是因为易语言不够强大，但也莫得办法，如今易语言的生态就是如此。
如果易语言不是我的第一门编程语言，那么其他编程语言就是最后一门。
", "url": "https://kuizuo.cn/easy-language", "title": "易语言", "summary": "好歹自己学习易语言也快有一年了，也用易语言写了一些软件，特此记录一下以及对易语言的个人看法。", "date_modified": "2020-10-08T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "随笔", "easy-language" ] }, { "id": "2019.7-2020.7-log", "content_html": "写篇年记，记录一下自己这一年的所学。
能有幸在这个行业有两点关键因素
QQ 永久冻结
易语言
有些认识我的人可能会知道我的 QQ804493238 给永久冻结了，可以说这个号码是不可能再搞回来的。一个幸幸苦苦养了十年的 QQ ，说没就没的那种，与之相对应的就是游戏账号没了，没了游戏能干嘛，当然不能干嘛，生活还是得过的，但又要有个东西来打发时间，没错就是编程。于是高中毕业后的暑假，就开始了学习编程。不过这里要先介绍一下易语言，作为我的第一门编程语言。
初识易语言的时候还是在初中，那时候有个同学给我讲诉了他用易语言刷 CF 永久枪，用易语言写游戏外挂的故事，也是那时候我也才刚接触网络游戏，一把永久枪 888 还免费刷，别说有多牛逼了好吧。可以说从那时候开始，下了个目标，以后有时间一定要学易语言！（不过那时候没条件学或者说是给游戏耽搁了）果不其然，在高中毕业后，就开始了易语言的学习（最主要的原因就是号没了，完全没有心思再玩游戏）。
有关易语言的详细介绍我划分在另一篇文章 易语言
这里我需要简单说一下这门技术，就是因为这门技术才能让我能写上软件，并且是有实质性用处的。有关这个介绍可以点击文章 浅谈 HTTP
在开学军训一个月期间，也没有放弃学习易语言，不过那一个月应该不算学易语言这个语言，而是在学一个网络协议 HTTP，在这行的术语应该叫 POST 与 JS 逆向（基于易语言），这里我需要放一个我当时学习的链接 零基础易语言 POST 入门到精通，导师教的非常好，是真心推荐，我从他的课程学到了非常多的知识，就凭我听了他的这一期课，就能自行写出超星刷课软件，我觉得这就足够我去报他的班。
非常可惜之前写了一段时间的 qq 机器人代码无法使用了，相关文章 纪念 QQ 机器人业黑暗的一天
我用的是酷 Q 框架，用易语言写的代码，花了也有半个月的时间去写![\"image-20200926164358137\"](\"https://img.kuizuo.cn/image-20200926164358137.png\")
那时候封装了好几个功能，最终就因为腾讯的封杀，导致自己辛辛苦苦写了半个月的代码灰飞烟灭。这时候的心情与当初 QQ 被永久冻结一样，不过现在也看淡了，就算回来说实话也高兴不到哪里去，也就在以前群在多吹吹牛逼罢了。（泽宇是我之前玩网的一个艺名）
这个 qq 机器人算是我手机端和电脑端一个变通的交互方式，以下是一些相关的菜单图，有些功能不方便展示，仅作为个人使用。
![\"image-20220517010245349\"](\"https://img.kuizuo.cn/image-20220517010245349.png\")
![\"image-20200928204705890\"](\"https://img.kuizuo.cn/image-20200928204705890.png\")
只要你想，然后给上对应的代码就行了，那时候也是沉迷于 qq 机器人花了很多时间写这些接口。这里的话我说说那时候我用机器人来写一个学校的用手机进行超星线下考试。
事情是这样的，这个考试是用手机考试的，但只能带一部手机，同时老师提供了题库，允许带资料，差不多就是开卷考。而且用于考试的软件（超星学习通）是不允许切换的后台来进行搜题的（或者说切换到后台会扣分），有些手机是无法分屏的（但是有悬浮窗）。这时候该怎么办，难不成真的去把题库打印一遍？还真有，十几张来着，先不说好不好，找一题都要找半天，有没有更有效的办法，有，我那时候就是通过机器人。
首先，将老师发的题库，存入文件（那时候的我还不会数据库，就只好读文件），然后通过则匹配，将对应的题目，将答案全部都记录到数组里面去。接着在通过给机器人发送对应的命令如 查题+关键词即可搜到相关的题目。这里就放一个我当初录制的一个视频，（其他人操作也就是通过悬浮窗来）
![\"demo6\"](\"https://img.kuizuo.cn/demo6.gif\")
即便眼睛再也好，也比不过可靠的搜索，搜索可靠也不及关键词筛选，当初考试就是通过这样方式来通过这场用手机的考试，但是也有缺点，只能说当初写软意识不好，没考虑周全，像这个搜题我还要再打一遍【查题】这个关键词，很傻，而不是发送【搜题模式】，然后直接发送题目获取就行，再发送【退出搜题】（那时候花了一天时间去写）。并且对于这样的搜题还要切换特别麻烦，好一点的办法，有，自写安卓悬浮窗，不过现在也没这样的考试了，也是我后面学了点安卓后随手写的，悬浮窗大致如下。
![\"搜题悬浮窗\"](\"https://img.kuizuo.cn/floating.png\")
qq 机器人算是我特别想写的一个东西，但很可惜腾讯封杀外面大部分 qq 机器人框架，我使用的同样框架无疑避免，同时腾讯自己的机器人又不给开发者提供合适的开发接口，这就是腾讯吗，这本来就是腾讯的作风。
至于后续如果有时间，或者要发展 qq 群的话，肯定会重新再写一份 qq 机器人，到时候想要实现功能可就多了。
上一阶段学习期间，从 7 月到下半年 1 个月，这一阶段主要就是易语言与脚本开发，相关也就是上述了，而下一阶段，也就是从 1 月中旬到开学（5 月 23 号），也就是差不多这期间，开始了逆向初步学习和 Web 开发方面，而这段时间，可以说除了编程，就只有编程了。
先说下生物钟，晚上 6 点左右起来，然后早上 9 点左右睡觉，没错，这 4 个月基本上是这么熬过来的。（其中期间调整了两次作息习惯），因为疫情的因素，开不了学，又不方便出去，加上我本来也不喜欢出去，所以这阶段对我来说无疑是最好不过的，而这一阶段，也是我学习最多的时候，见识最多的时候，让我再一次感觉到编程的魅力，但同时让我感受到真正的编程和难。下面则会按时间顺序简单介绍下我学了什么。
首先要提一个这个学习论坛，因为我在这个论坛上找到的很多教程，可以说没有这个论坛，我视频教程都不好找，先放个论坛链接 资源共享吧，首先这个论坛从名字上应该可以知道是资源共享的，是关于编程相关技术方面的资源，可不是那啥，我先放一张图片，看看到底都有啥资源。
![\"image-20201005025855844\"](\"https://img.kuizuo.cn/image-20201005025855844.png\")
别说，基本上有关编程的你在这都能看到，当然肯定不是免费了，是需要交 VIP 的，但只要 199 元，终身高级 VIP 会员，别提有多值了，你知道外面一套培训有多贵吗，这我就不提了，自己搜一搜就知道了，我在写超星刷课不是提过一个讲师，我报了它的班，4000 安卓 VIP+3000 网页逆向 VIP 来着，而这里你只需要 199 元，并且在该论坛你也能看到他的一些相关课程。当然，和培训相比还是有一定的区别，但在这里的教程真不差。
关于付费学习，可能有些人不解，为啥要收费，没为啥，就是你听付费的课程，能比别人学的快，能少走点坑路，很多免费课程要么就是为了推荐他的付费课程，要么就是为了推荐他写的书，总之，免费之中必有付费，单纯的免费课程能学，但想要走个捷径，付费应该是最快捷的方法。
是真心推荐这个论坛，一点广告费都没收，因为在这个论坛上我下载了特别多有关编程相关的知识，奈何时间不允许，不然我真的都学了。正是因为我在这个论坛上学习到特别多的知识，这就是我推荐的理由之一。
下面的大多数学习都是基于这个论坛上的视频教程。
这上半年，我也只会网页端的数据分析与 JS 逆向，很多时候并没有网页版的，只有安卓应用，这时候想要偷其中的 api 接口，找到对应的加密点，该咋办，学呗。就必须要会安卓逆向，并且这个不比网页端简单。
在我开始提笔写的时候，已经有半年没怎么碰过安卓方面的了，我都快忘记了我安卓逆向的好多知识，而且当初还没有写笔记的习惯，就连我一开始怎么入门的都没什么印象了，总之就是看了教程，然后一步步照抄，视频教程怎做就怎么仿，就完事了。
同时也正是因为安卓，花了 10 天左右用 2.5 倍速度把毕向东的 java25 天速成教程看完了，而 java 才算是我真正第一门主流的编程语言，之前的 javascript 我是连 ES6 语法都不会的，甚至很多基本的语法我都不知道。但学完了 Java 的基础语法，但对于安卓逆向或者开发来说还是差太多了，虽说对于当时的我看的明白，但实际上整个安卓的项目结构我依旧不明白，不会点开发去搞逆向是真的折腾。
合理来说我安卓逆向压根就没学完，或者说我只学到了 java 层的源码分析（java 是真的好反编译了），我还没什么能拿的出手的东西，没有破解过安卓软件，只是分析了跟网页端差不多的 HTTP 请求，差不多的加密算法，在这方面我还真的不知道该说写什么，即使说了，很多没了解过安卓逆向人也不懂，后续的话会再学安卓这方面，从开发到逆向，到时候会这方面的知识在进行一个分类总结。（主要是我真的忘了太多了）
我先简单介绍一下这个是什么，这个也就是专门针对安卓端的无 root 脚本操作，看到后缀名你应该能想到 js，正是用 JavaScript 作为脚本语言。可以说用这个开发工具也能开发些安卓软件，但主要还是针对脚本操作，比如做一个 qq 自动点赞的， 贴吧签到脚本，抖音自动刷视频，双十一用过淘宝叠过猫猫吧，用 Auto.js 也能写个自动浏览商品，刷金币的，此外有太多例子了。
在之前的脚本操作，我也只会电脑端的，而对手机端无奈只好投屏到电脑，通过电脑的鼠标操作来实现脚本，而现在有了这个软件，则就不用在连接电脑，直接将写好的脚本打包成安装包安装，点击运行即可。但对比原生安卓开发，这个开发工具还是略显下风，不过对于安卓的自动化操作已经足够了，我也只说说我用这个写了个什么软件。
像抖音自动刷视频和贴吧签到这些我就不多举例，主要还是这个软件，听名字就知道是钉钉签到的，有些在疫情期间，学校老师又要求同学使用钉钉，并且签到，但是有的同学就是会忘记签到或者没起来（说的是我），怎么办，记旷课？这不写个脚挂在那边时间到了自动签到呗。
![\"ddqd1\"](\"https://img.kuizuo.cn/ddqd1.png\")
这是我当时写的页面，只需要填写对应的课程名和开始的时间即可，时间一到，手机自动亮屏，开始签到。主要的代码就下面这一个函数
function ddSign(courseName) {
launchApp('钉钉')
waitForActivity('android.widget.FrameLayout')
let course = text(courseName).findOne()
if (course.parent() != null) {
course.parent().parent().click()
}
let sign = text('群签到').findOne()
if (sign.parent() != null) {
sign.parent().parent().click()
}
sleep(3000)
if (desc('群签到')) {
sleep(3000)
let btn_sign = className('android.view.View').desc('签到').findOne()
let result = btn_sign.click()
Log('签到结果' + result)
} else {
toastLog('不在群签到页面')
}
}
启动钉钉，等待钉钉启动完毕，找到对应的课程名，点击课程名，找到群签到按钮，点击群签到按钮，进入群签到找签到按钮，点击签到，签到成功。就这么完事了，脚本就是这样的。
不过最终有个缺点，对于一些没有 root 的手机，需要每次运行就要不断的打开无障碍服务，特别繁琐，但没办法，这是安卓的机制问题。
这里要提及的一句是为啥不用 HTTP 发送请求要来签到，而是要这种脚本方式，对比一下你就会发现，用脚本写基本无压力，就是简单判断一些字或者图在哪，然后点击对应的坐标，而通过 HTTP 请求的话，一是要过钉钉登录，二是要处理各种加密算法。不过钉钉登录算法难不难我就不知道了，我也懒得分析，加上正好学了 Auto.js，索性就写一个这样的签到脚本得了。但说实话签到就不应该这样用这种定时脚本，而是应该选择协议更好。
可以去了解一些深度学习，颠覆我对机器的认知，至少让我又觉得编程的强大，重拾学下去的信心。首先，先看张图片
![\"QQ图片20201004030419\"](\"https://img.kuizuo.cn/QQ%E5%9B%BE%E7%89%8720201004030419.png\")
看图也能看明白，这个就是识别一个缺口的图片软件，可能对没接触过这行业的人觉得这并没有什么软用，这个滑块的意义主要还是防止人为操作和机器操作。对于人而已，自然而然知道缺口的位置，但是对于机器而言要怎么知道这个缺口的位置，就针对上面这类图片，可以通过图片颜色深度来定位到缺口的地方，同时也可以使用深度学习，简单来说深度学习就是 AI，不过这里的 AI 是用来让它识别这个缺口，至于怎么让它识别和对应的算法我就没过多了解了，我接触这个主要还是用现成的模型来训练识别的。说一下我是怎么让机器训练的。
这个过程其实就跟教小孩一样，现在有一个小孩，他不知道这个缺口的位置，这时候我告诉它缺口的位置在那，对应的操作也就是标注，如下
![\"image-20201004031417625\"](\"https://img.kuizuo.cn/image-20201004031417625.png\")
我把缺口的地方标注一下，并记录对应的坐标，然后告诉这个小孩，缺口是我标注的地方，你下次遇到的时候记得是缺口这样的，但是小孩毕竟是小孩，这是我换一张类似的图片，这时候他可能就蒙了，所以就需要不断的给他标注好的缺口图片，让这个小孩一直看，一直记，直到下一次看到一张陌生的图片，但是它已经把之前训练的给记住了，很快他就能找到缺口的位置，这整个过程其实就是告诉小孩，然后让小孩一直训练，这就达到了我们想要的目的，这个小孩也会知道缺口的位置了。现在把这个小孩换成机器，那么这就是深度学习，并且机器是机器，可以封装的“记忆”远比人类可比，人是会感到疲惫的，而机器不会。再比如下面这张图片
![\"image-20201004033445666\"](\"https://img.kuizuo.cn/image-20201004033445666.png\")
对于我们来说显示屏，键盘等等这些在常见不过了，深度学习就可以做到识别图片对应的物体分别是什么，不过这要的训练量就比上面那个滑块大多了。我这里简单说说主要的通途，现在我想拍一张人脸照，还有风景照，但是时间旧了，我想找可能就要一定的时间，这时候就可以通过识别图片，进行分类，例如头像照，风景照，食物照等等，现在大多数相册都有上述图片分类的功能，不止如此，通过训练还可以识别文字，快递单号，车牌号，识别人脸等等，总之想训练的东西，都能训练，不过就是吃训练量和显卡，一般来说都是用现成的模型直接用就完事了。对我目前而言，我深度学习学的是非常浅了，也只会用用模型，跑个显卡训练训练。
此外，既然图片训练是这样的，能不能训练其他的，当然，语音识别，模拟一些明星的声音，游戏 AI，甚至让机器自己去学习怎么打游戏，游戏内的人机也就如此，通过训练满分作文，实现写一篇条理清晰的作文等等，太多例子都能看到人工智能。
关于这方面我也不敢做过多讲述，毕竟也还没开始从事这方面的真正学习。但确实，惊艳到我了，也让我想去学习这方面的知识。想自己写一个属于自己的语音 AI 助手，训练出一个能自己玩小游戏的模型，总之想学的太多了。
关于这个的话可以查看我写过的一篇文章 Chrome 插件开发，我总结了一下我那时候学习的插件，和自写的一些模板，不在这做过多赘述了。
疫情这期间说句闭关学习应该不成问题，不过学的东西远不止于此，主要其他的没写出啥玩意，而且学的很浅很浅，比如汇编基础（不过应该已经忘得差不多了），又深入学习了编写游戏外挂，TCP 协议（和 HTTP 一样），还有就是一些开发工具的使用。期间也写过一些东西，例如疫情填表，网课签到等等，不过都是临时写来自用的，也懒得放图了，原理基本和超星刷课一样，有时间再整理一下。
在进入了这个阶段，我就很久没再用易语言开发新的软件了。到目前为止也真的快半年没怎么动易语言的代码了（也快半年没怎么写项目了），就那个超星刷课而言，没想到半年后还能用。而这一阶段主要接触的也就是 Web 开发方面。
实际上，我在接触易语言就已经接触了一些 Web 方面，因为要针对网页的一些操作就不得不接触这些，比如 HTTP 协议，DOM 解析，CSS 选择器，JS。不过那时候这对真正的 Web 开发远远不够。当然要说一下为什么会想学习 Web，在学 Web 之前，实际上还接触了一些 js 高端操作，例如 AST 语法树（混淆 js 代码），WebSocket，但发现有点没学明白，用都有点没用明白，然后就是想搞明白这些操作，于是进阶学习 js。
其实决定性的也就是一门编程语言——JavaScript，那时候感觉到易语言的不足，恰好手头在学的一门编程也就是 JavaScript，于是就开始了 JavaScript 的学习，可以说不是 JavaScript，Web 想都没带想的。js 作为我目前的主力语言，就目前而言，基本屏幕上，必有 vscode 的痕迹，而且还是 js。js 吸引我的一个地方就是其他语言都能调用，加上语法清晰，不过要我硬说 js 哪里好，我也说不清楚，可能这就是对一件事物的热爱吧。
于是改变了当初原有的想法——搞安卓开发与深度学习，转行到 Web 开发去了，和学习其他技术一样，找教程，跟教程做一遍，自己在举一反三一波才不多就明了。
Web 学习确实比逆向轻松，并且学完 Web 能写的东西也算比较多。也算可以自己动手设计出一个界面或者功能出来，上手特别容易。这里我就不献丑了，之前前端写的那些代码真没脸丢出来。就连当初的笔记我都不敢看，写的是什么玩意，竟然还是在 js 文件上用注释来记录笔记。
就这样学习了几周，然后收到了开学通知，没错是开学通知，疫情的时候，开学一个月，于是就停滞了学习近一个月了，前面也说到，生物钟的问题，开学了就不得不强行调整生物钟，把我学习节奏给打乱了。其次突然开学，心态是真崩了，开学各种繁琐的事情搞得压根学不进去。原本不出意外在保持这样的学习状态一直学下去，暑假结束前就能把 Web 大部分知识都能搞完，然而却拖到现在。
不过也不能说开学不好，从 1 月 10 号放假，到 5 月 23 号开学，在家好像也就出门了 2 次，要是再这样拖到暑假估计身体可真要出问题。停滞了学习，但保住了身体，是赚是亏，对我来说血亏吧。
然而暑假由于学车的因素，加上外出玩了一波，整个暑假并没有像去年那样全身心投入去学习，不过业余时间会去摄取有关这行的知识与科普，也就是刷刷知乎，公众号，博客文章等等。而也就是在这段了解到了 Nodejs 与 Vue，暑假开始学习。
不过学前端，Nodejs 基本是必接触，基本可以说只要是个前端开发者，就肯定会 Nodejs，关于 Nodejs 不做过多介绍，我能推荐的也只是一些 npm 包，总之在这期间 也就是只学了点 Nodejs 的基本使用，还有 npm (Node 包管理器)。
主要接触两个 Web 框架 Puppeteer 与 Express，关于这两个我在 Node 的那个目录内有简单说明到，这里也就不放链接了。这里简单说说 Express
学 node 大多数就是为了搞服务端，那么肯定也有对应的服务端框架，Express 就是其中之一。
在此之前，我是写过点后端的，也就是一个网络验证的系统，不过那时候是基于易语言和 HP-Socket 的库，但有一个很大缺陷，就是我这个后端服务器编译出来的是 exe 文件，也就是只能在 windows 上运行，这对 Linux 系统服务器很不友好，于是乎就想搞一个基于 Express 的网络验证服务端。
而这期间才算学会用 Mysql，之前易语言写的网络验证时连 Sql 语句都不会，还都是用易语言自带命令帮我封装好来进行增删改查。也简单的将易语言写的网络验证接口全都搬运至 Express 中，然而有个问题来了，我要怎么查看数据？难不成直接打开数据库查，怎么可能，而这就开始了 vue-element-admin 开发，后文会说到，因为这里要涉及到一个新的技能——Vue。
可以说没有 Vue，我多半不会去继续学习前端（怎么感觉这句话好像说过了），和大多数人学 Web 一样，都是从基本的 HTML CSS JS 这前端三件套开始学起，然而在学到一半的时候，想写一写 Web 小项目的时候，就需要在一个 HTML 上写上大量代码，并且页面还不好设计，并且在用了 Express 一段时间后，发现如果要做动态网站的时候，就需要将数据渲染到对应的模板语言上（如 ejs），于是想知道有没有啥能解决这上述问题，于是便开始搜索有关前端的一些相关知识扩展，果不其然，困惑了我一段时间是否继续学习前端，因 Vue 而解惑。
如果要我评价一句 Vue，我只能说后悔学 Vue，后悔学晚了。我花了挺多时间在原生的前端开发，在了解到 Vue 时，还在用着 Jquery。Vue 让我继续学前端并不是数据交互方面，而是模块化，在我接触原生前端开发的时候，这个问题尤为困扰我，每次写一个页面都需要重复大量相同代码，即便是复制粘贴也觉得烦躁，而 Vue 组件化就不一样。例如我当前的博客页面，你会看到导航栏，侧边栏，与正文，评论系统，乃至打赏按钮都是一个个组件拼接而成，只需要在单个 Vue 文件中，引入对应的组件，然后想 html 标签那样直接写在视图层上即可显示，当然，相关代码也展示了，有关 Vue 的我也都放在 Vue 这个目录下。
然后就是基于 Vue 而开发的组件库，在 Web 开发难免不了页面设计，然而并非所有程序员又兼设计师，想要设计出一个好看的按钮或其他组件并非容易的事情，而组件库便提供了一个好看的组件供开发者使用，例如通过引入 element 的样式与组件库
<!-- 引入样式 -->
<link rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\" />
<!-- 引入组件库 -->
<script src=\"https://unpkg.com/element-ui/lib/index.js\"></script>
然后在官网中找到需要的组件，如下按钮
而对于的代码也就是
<el-button type=\"primary\" plain>主要按钮</el-button>
只需要简单修改一下参数就能生成相应的组件。哪里还需要花费大量时间去写 css，不断改参数，上手即用，快速成型。
Vue 模板语法也是，显示后端传递的数据也简单，比如下面这行
<h1>标题: {{ title }}</h1>
只要接收到后端发送来的标题，即可渲染在{{title}}内，此外还有数据的双向绑定，关于这些等等不在这细说了，需要的话可以自行翻阅 Vue 文档。
而且就这么说吧，前端框架如果不学 Vue 和 React 其中之一，面试都不给你面试的。甚至可以说，Vue 和 React 是前端开发必学之一，不学就跟不学前端没两样。
同时 Vue 还是国人尤大大（尤雨溪）开发的，在国内生态好，社区活跃高。基本上目前国内的大部分 Web 项目都有 Vue 的身影，同时 Vue 不止于前端，小程序的开发等等也有它的身影，如 uniapp 就是使用 Vue.js 所开发的。
Vue 能做的太多了，如果你恰好准备学 Web 方面，尤其是前端，毫不犹豫，直接学 Vue，Vue 在 github 上排名第三，star 高达 175k，凭这，就足以去学习一番。
Vuepress 一个 Vue 驱动的静态网站生成器，可以用 Vuepress 来写文档，写博客，而我目前这个博客便是通过 Vuepress 实现而成。关于这个博客搭建过程就不在这花费口舌了。我有一篇文章专门讲述这个博客的搭建过程。
可以说没有前半年易语言学习所接触到的 Web 知识，就别说 Web 开发了，JS 估计都不会了解到，也因 JS，误打误撞闯进了 Web 开发的坑，让我领略到更多知识。
我算是作为 JS 语言的粉丝，听说过一句名言：凡是能用 JS 实现的最终都将用 JS 实现。即便不理解这句话的意思，但依旧这句话很喜欢，也许这就是对 JS 语言的一种爱吧。
![\"javascript\"](\"https://img.kuizuo.cn/javascript.jpg\")
写到这，其实 Web 开发真就要告一段落了，实在是不想在折腾 Web 了，主要就两点
在页面设计方面，有组件库很方便，但是不知道要写什么好，就那个网络验证而言，我已经绞尽脑汁想添加写功能，但是奈何后端写的折磨，很多我都写不下去，就比如用户-角色-权限 这三者关系，我只写了用户-角色 还有权限没写，还有积分，与 nodejs 模拟数据这些写的都特别鸡肋，实在是写不动了（甚至说实在不想写了）。想转型写点其他的，后续有时间才把这个在做过多优化。
目前把博客和网络验证基本搭建好，现在脑子只想好好写写博客，把这一年要学过的东西好好巩固一番，尤其是这一段 Vue 的学习，收获到太多知识，都有点来不及消化。后续会将这些都部署在该博客上（不妨点个收藏收藏个书签呗）
不过我目前的 Web 开发还有很多没学到，而关于 Web 后续的学习的话，以目前的话应该是不会在花费大量时间去学了，学了也有半年了，自我感觉 Web 这方面还是不适合我，但确实这半年的 Web 学习挺充实的，不会接着深入学习,会用已学过的知识去写一些东西出来。（主要还是太想学习其他技术了）
这一年学的确实多，相比于刚接触这行一年的人来说的话，我挺知足这一年能花费大量心思在这上面，同时还能坚持学下去，并爱上编程，于是乎从数学系转到了计算机系，但学还是自己学自己的，在我看来学校老师能教的，不如我课下自己学习的，况且编程单靠别人教是教不出什么玩意的，还真没听说过什么大神是另一个大神教出来了。
不过正是因为这种心态，也导致如今我连学校的课基本也都不会去上，能旷的课尽可能旷，旷课补觉，或者是宅在宿舍，坐在电脑前，盯着这赏心悦目的代码，和平时分相比它不香吗。既然旷课，那怎么能不挂科，虽然都是公共课，不过挺无所谓了。说件好玩事情，我大学英语挂了，没错，我英语说实在话就是不行，甚至我都没打算过四级考试，但这影响编写代码吗？不言而喻。
专业课的话，有的老师一般会认可我的能力，允许不去上课只考试就行，或者是不去也不会记名字，甚至和老师说一声不去就完事了。至少在我看来有时间在学校拿个文凭，不如直接用自己写过的项目去面试，至于看学历还是看能力，面试官一般都不看，因为只看简历呗。目前的话除了有关编程的事啥也不想干，估摸着在学一段时间就说不定真就辍学了呗，不，说不准还是给学校开除。
早已习惯了凌晨晚睡晚起，早上的课基本也都是旷了的那种，就已经习惯了旷课。再看看下午的课，不出意外的话，一般就是坐在电脑前到，到点了吃个饭，接着到凌晨 3,4 点，每天反复这样。我都不敢说我在这方面有天赋，我只觉得我每天花费在这方面的时间是别人的几倍罢了。
哪有什么天生，一切不过是摧残出来罢了。
说实在话，挺享受整天在电脑前办公的生活（相比于躺在床上玩游戏而言），不过熬夜，久坐，与长时间盯着屏幕，甚至是掉发，身体难免有些遭不住，并且我是能感受到，身体一天不如一天了。但它改变了我原有枯燥的生活，成天的游戏与娱乐，迷茫到不知所措， 如果没有 QQ 冻结，还有易语言，JS 这些，说真的，我现在极有可能还在某个床角玩着游戏，还对着屏幕傻笑（现在就特别想笑）。即使都是宅在家的生活，但编程能成为我养家糊口的资本，而游戏，它不行！甚至还可能成为我颓废的资本。
就在 9 月初，参加了一场网络安防（CTF）的比赛，真的是小巫见大巫，瞬间觉得自己还有很多要学的，虽然其他选手都很强，但也印衬了自己在这方面就是技不如人。说白就是自己菜，就是学的不够多，要是能在多学一点，说不定就多解一道题，多拿一点分，说不准就苟一波，吃个烂分。而事实是这是场没拿奖的比赛，而我是这场比赛的失败者。
不过有参与必有收获，确实让我学到了 Web 的一些渗透知识与一些工具的使用，也让我更加觉得外面的大佬是真的多，自己离他们还需要更加努力一把，这场比赛值了。
我也仅能给别人一些我学习上的建议，也仅仅是当前，毕竟我接触这样也才一年多。我其实都不推荐去学编程这玩意，但我常常和别人说多花点时间在这上面，能写出些东西来。话是这么说，但真正肯去学的又有几个，即便学了坚持下去的又有几个，即便花费口舌去和他们介绍，但多数觉得难，但你说这个东西难吗，很难，但你说学不进去吗，也不至于，如今网络上生态这么好，学习编程的人越来越多，相互帮助的人也多，只要肯学，肯下功夫，随便一百度就有的结果，怎么可能学不会。
我这一年学习中，基本上就是看视频跟着视频教程一步一步照做，我一开始学习的时候也会在群里问过别人，也私下问过别人，但是有用吗？压根就没用，基本就没什么人会去鸟你的。百度它解决不了吗，如今强大搜索引擎会是你解决问题的最好选择（甚至我帮别人解决问题还是我将百度结果链接给别人）。有两句话，百度 5 分钟，问人 2 小时。百度能解决你百分之 99 的问题，但问人并不一定解决其中的百分之 1。
![\"006ARE9vgy1fwntelg0mlj30b40b4gm1\"](\"https://img.kuizuo.cn/006ARE9vgy1fwntelg0mlj30b40b4gm1.jpg\")
没点自行解决问题的能力真心劝别碰这行。
我现在都有点反感那些没自行尝试，就直接问人的那种，有什么好问的，要么你学的不够多看不懂呗，要么就是你那里少做了什么步骤，大不了重新卸载安装重启来一遍嘛。主要没点自行解决问题的能力，到时候项目一来，出了一个 bug，或者开发环境与生产环境有问题，你问谁去？问了会回复你吗？能不能先自行看看是不是哪里少改的，或者版本的问题。说太多就是想强调一点，自行解决很重要，决定你适不适合干这行。
话也不能说的这么绝对，有时候搜索引擎确实不能有效的给到你想要的答案，比如我所用过的一个博客主题，是有交流群的，但有时候我百度了半天就是得不到我想要的结果，然后一问群，可能会一些热心伙伴会给你正确的答案，但往往是在你实在解决不了的情况问。毕竟，问了不一定答，但是不问一定不答。
别觉得偷别人代码有什么丢脸了，有的人甚至连偷都不会偷，而你早早就把项目给搞定了，别人会认可你的过程还是认可你的结果，必定是结果好吧，而且干这行的，基本上你见不到一个程序员是真的每一行每一行开始写起，而用的最多的三个键 Ctrl C V，不会真有程序员一行一行的敲吧，不会吧，不会吧。
![\"7280a4701a0daf98\"](\"https://img.kuizuo.cn/7280a4701a0daf98.jpg\")
当然，上面也只是说笑了，只是现在都是模块化编程，什么意思呢，就比如我要实现一个自动发送邮件的功能，怎么办，直接搜索，比如 nodejs 中实现发送邮箱，于是就搜索到了 nodemailer 这个模块，二话不说，直接运行官方的 demo 案例，发现可以运行，能达到我想要的目的，接着就是自己简单的封装一下，直接给项目来使用，这不就成了吗？
然而要从 0 开始写一个发送邮件的服务端，别有这种想法，大概率不会想写的。就我目前而言吧，除了一开始学习新的技术外，会跟着敲一遍磨磨手感，到后面基本上都是从网络上偷各种源码，然后自己看一遍主要的地方是怎么实现的，然后对源码进行修改来达到我需要的目的。如今网络环境这么好，想要的功能随便一搜就有了，如果你能做到改别人的代码，那么别人这份代码你肯定也学进去了不少。为啥还要自己造轮子，尽可能利用别人已经写好的代码，而不是自己在手动写一份类似功能。
到目前为止，我还有好多想写的东西没写，好多好多都写了一半由于一些某某原因没继续写下去。同时还有好多想学的技术，好多都是之前学到一半卡着就没接着学下去了。至于能学多少，尽力而为吧，希望明年的这个时候，在回头看看自己所写的一些代码，都能感到一些惬意。
Vue 才学了点皮毛，很多 HTML5 特性都没玩明白，CSS 也只会基本样式，就别说设计网页特效啥的，能看的过去就不错了，如果有时间的话一定会去接触写 React，毕竟和 Vue 一样，都属于人气爆棚的前端框架，很多大厂都使用 React 作为前端框架使用。
像 Webpack，Eslint 等等前端工具库，再如 JavaScript 的超集 Typescript，这些肯定都会去学习一番。
学过点 Python，但并非精通，有特别多的库都还没用过。主要说说为什么想学 Python，最主要的就是深度学习这方面，在前面我也写过，深度识别之图象识别，其次就是模拟数据请求这些，如果知道 Python，说到爬虫自然不陌生，不过爬虫对我来说并不敢兴趣，主要是 Python 好做模拟请求，http 协议这些，在易语言这些操作都是乱写，基本没啥难度，当然，http 协议难得不是模拟数据请求，而是在逆向分析数据加密，风控算法，所以网页逆向的基本功还是要有的。
当然，如果有可能还会接触一些 Python 的后端框架 Djongo 和 Flask，看看会不会符合自己的编程风格，再考虑是否要重写一些后端接口，当然最主要的还是想学习 tensorflow，我本地环境都搭建好了，然而却没有花大量时间去在这方面学习！
干这行前，我就是个重度手机使用者，或者说是玩机者。对于手机特别感兴趣，刷过机，拆修过手机，手头目前就有 5 台手机，对于电子设备可以说是又爱又恨了。用过的 APP 多，然而有些 APP 并不能达到我想要的目的，或者说有限制，于是就想尝试利用逆向技术去修改，奈何那时学了皮毛的安装逆向，根本不够用，也感到困难，于是就没继续学习，一开始的本心还是想搞安卓这方面。
如果可以的话，我更希望的是当一个安卓开发人员或者逆向分析工程师，而不是一个 Web 开发人员或者网络安全工程师。至于最后能如何，谁又能说的准呢。
就目前而言，git 还有很多没玩明白，主要手头也没啥好开源的玩意，明年，一定多刷 github，当然最想的还是搞一个开源项目，还能在 github 上小有知名，那干这行真就无悔了。有点小野心，但以目前能力估计是够呛，想想就好，到时候技术上来的指不定就真成了呢。
这不才学了一年，才 20 出头，留给我的时间还多着很，在学个十年不成问题吧。但话是这么说，自己心里很清楚，已经有点学不进去了，就我写 Web 项目的这段时间，写着写着就去搞其他东西去了，实在是写的憋屈。总之已经没有一开始那么想学，那么有想法与灵感，那么肯于去学习新的技术，估摸着在学几年也许就会停滞于学习。
本以为年轻有的是精力，还曾妄想把好几门技术都学进去，但事实告诉我，能精通一个就不错了，学那么多意义又在哪，只是为了满足当初高中不认真学习的而又渴望学习的心吧。
总之，能学就尽量学，明年，理应更强。
最后还是要感谢互联网的前辈们，与当下互联网的环境，不然的话我还可能在迷茫中四处摸索人生的真正意图，耗费着年轻所带来的资本。往着曾经写过的代码，眼角不禁也会湿润起来（绝不是熬夜太困），感叹当初为啥会去学这东西呢，也许这就是编程所带来的魅力吧。
写于2020年11月18日 By 愧怍
", "url": "https://kuizuo.cn/2019.7-2020.7-log", "title": "2019.7-2020.7编程年记", "summary": "前言", "date_modified": "2020-10-08T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "年终总结", "summary" ] }, { "id": "brief-talk-http", "content_html": "关于 HTTP 我不讲理论，只讲一下具体的用途。
首先我举一个例子，收过短信验证码吧，一般来说在你注册账号的时候就会用到，会有一个点击发送验证码的按钮，这里以 网址 114 预约挂号 为例
![\"image-20200928234944932\"](\"https://img.kuizuo.cn/image-20200928234944932.png\")
输入完手机号，点击获取验证码就能收到验证码，但这背后的原理又是啥，服务器那边怎么知道我要验证码，并且我输入正确的验证码就进入，错误的就不行。而这正是网络协议 HTTP（关于 HTTP 相关的这里不做过多讲述，希望读者能自行百度了解），我先说下点击了获取验证码发生了什么，通过抓包工具可以获取到如下请求
GET https://www.114yygh.com/web/common/verify-code/get?_time=1601308153790&mobile=15212345678&smsKey=LOGIN HTTP/1.1
Host: www.114yygh.com
Connection: keep-alive
Accept: application/json, text/plain, */*
Request-Source: PC
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3775.400 QQBrowser/10.6.4208.400
Content-Type: application/json;charset=UTF-8
Referer: https://www.114yygh.com/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
首先我们向服务器发送了一个如上的请求，这是一个 GET 请求，同时请求的链接（url）为https://www.114yygh.com/web/common/verify-code/get?_time=1601308153790&mobile=15212345678&smsKey=LOGIN
如果你会点英文的话，可能会理解其中的含义，主要就这几个参数verify-code验证码，_time=1601308153790时间戳（时间戳是一个记录时间的东西，用当前时间减去1970-01-01 08:00:00即可得到，你可以通过这个工具时间戳在线转化，这里的1601308153790所对应的时间为2020-09-28 23:58:06）还有一个mobile=15212345678，这个15212345678是我刚刚输入的手机号。这是向服务器请求的数据，那在来看看服务器返回给我们的是什么
HTTP/1.1 200
Date: Mon, 28 Sep 2020 15:49:15 GMT
Content-Type: application/json;charset=UTF-8
Content-Length: 57
Connection: keep-alive
Set-Cookie: hyde_session=Kd10cra3X4yNBePaaQTKUkuYgX9J6Hfx_5337693
Set-Cookie: hyde_session_tm=1601308154470; Domain=.114yygh.com; Path=/; HttpOnly
Content-Security-Policy: : default-src *.114yygh.com *.qq.com *.baidu.com; font-src * data:
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
X-Via-JSL: d8c5e31,-
X-Cache: bypass
{\"resCode\":0,\"msg\":null,\"data\":{\"endMilliseconds\":59997}}
只需要关注最后一行即可，其中 resCode 为 0，同时手机号15212345678也收到了验证码，貌似 resCode 为 0 就决定了服务器是否有给手机号发送短信，事实上也是的，那么说了这么多，有什么用呢，用处可大了。
既然这样，我知道了发送上面的那个请求服务器就能给对应的手机号发送验证码，那么我能不能将上面那个请求的手机号给改一下，改成15287654321，事实上是完全没问题的，这里我就放一张 HTTP 测试工具的截图。
![\"image-20200929001306474\"](\"https://img.kuizuo.cn/image-20200929001306474.png\")
那么是不是我多请求这样像服务器请求，我就能源源不断的收到验证码，现实很美好，人家服务器也不傻，我再一次向服务器发送请求，服务器给我的结果是
{\"resCode\":10000,\"msg\":\"请58秒后重试\",\"data\":null}
没错，就需要等，而且这里的 resCode 也不为 0，那么既然要等一分钟的话，我能不能写个定时脚本，每隔一分钟发送一次，人家服务器也不傻，一般来说，一个手机号最多也就收 5 次验证码，多了就会提示明天再重试，或者今天收到的验证码过多等等。而外面的炸则是通过收集几百个这样的请求，然后将手机号替换成要轰炸的，即可实现多平台验证码轰炸一个手机号。
现在你可能已经知道了初步了解 HTTP 请求，但一般的网站都不会像这个这么简单的，明文标码，通常都会进行效验，例如图片验证码，滑块，点字，点图等等，并且还会进行加密操作处理，而这才算真正的难点。
既然发验证码是这样，那如果是登录呢，下面就用网站 万创帮 为例，首先进入登录界面
![\"image-20200929003119277\"](\"https://img.kuizuo.cn/image-20200929003119277.png\")
输入手机号和密码，点击登录，同样的我们可以通过抓包工具获取到对应的 HTTP 请求，如下
POST https://m.wcbchina.com/api/login/login?rnd=0.6463111465399551 HTTP/1.1
Host: m.wcbchina.com
Connection: keep-alive
Content-Length: 149
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/javascript, */*; q=0.01
Origin: https://m.wcbchina.com
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Mobile Safari/537.36
Content-Type: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
{\"auth\":{\"timestamp\":1601312429287,\"sign\":\"777473FB2A1838DBD64BA7A11C98911B\"},\"username\":\"15212345678\",\"password\":\"E9BC0E13A8A16CBB07B175D92A113126\"}
貌似比上面那个发验证码的复杂，确实，这是一个 POST 请求，你在链接上看不出什么有效信息，在最后一行才是关键。这里的timestamp也就是时间戳，记录时间的，username 是我们输入的手机号（账号）没什么问题，这里的 sign 和 password 的内容又是啥？这就是加密，让你不能简单单纯的通过替换文本来实现登录，这就来分析一下他到底怎么加密的。
通过在浏览器按下 F12 键，打开控制台面板，接着点击 Network，这里会将我们发送的请求记录下来
![\"image-20200929004247182\"](\"https://img.kuizuo.cn/image-20200929004247182.png\")
同时鼠标停在 Initiator 上有如下结果
![\"image-20200929004449660\"](\"https://img.kuizuo.cn/image-20200929004449660.png\")
不管三七二十一，点击跳转到对应的代码先，然后在左边下一个断点
![\"image-20200929004628978\"](\"https://img.kuizuo.cn/image-20200929004628978.png\")
这时候我们在点击登录按钮看看
![\"image-20200929004713733\"](\"https://img.kuizuo.cn/image-20200929004713733.png\")
没错，浏览器这时候停了下来，停在了我下断点的地方，通过函数名也可以猜到这个是发送的，对应的肯定在上面，通过右边的 Call Stack 函数调用栈即可追随上一函数
![\"image-20200929004943674\"](\"https://img.kuizuo.cn/image-20200929004943674.png\")
在这里我看到了原文的信息，这是通过 Jquery 通过 id 获取元素的值，也就是这里的手机号和密码，在这里还都是原文，点到下一个函数则变成了密文，那么肯定是上一个函数做了手脚。
认真观察，N 这个是我们的密码，但对 N 进行了一个操作也就是 a.hex_md5(N)，没错，这就是 md5 加密。有关加密的可以看看我写过的 浅谈加密算法
那么通过加密工具将 md5 加密是否能得到我们要的加密结果，如下
![\"image-20200929005711500\"](\"https://img.kuizuo.cn/image-20200929005711500.png\")
E9BC0E13A8A16CBB07B175D92A113126在看看 Password 的值，一模一样，看来已经解决了一个参数，那么还有一个sign呢。貌似右边的函数调用栈都不好使，我试试搜索字符串 sign 看看
![\"image-20200929005911119\"](\"https://img.kuizuo.cn/image-20200929005911119.png\")
好家伙，直接定位到了，那么同样的在这里下一个断点，查看一下到底发生了什么（实际上 js 静态分析就完事了，这个网站太简单了）
这里的 N 看来就决定了 sign，而 N 也是通过 md5 加密的，不过原文我还不知道，让代码执行到这一行看看结果
![\"image-20200929010417525\"](\"https://img.kuizuo.cn/image-20200929010417525.png\")
这里的 c 就是时间戳，而 token 和 password 都是未定义，那么就好办了。这里明文也就是 c 1601312429287，那么用加密工具即可得到777473FB2A1838DBD64BA7A11C98911B，那么参数都搞定好了， 只需要替换一下账号，然后将正确的密码通过加密算法（这里为 md5）生成，同时对 sign 也生成出来，然后提交给服务器就能收到我们登录的请求，就认定为我们登录了，记录为在线用户。
如果我用的加密算法错了，或者我分析错了，提交给服务器会是怎么样的
![\"image-20200929011055451\"](\"https://img.kuizuo.cn/image-20200929011055451.png\")
例如我这里的 sign 算法是错了（将结尾的 B 改成了 A），发送给服务器，服务器返回给我们则是失败的结果，原因很简单，就是为了防止别人恶意登录所添加的效验，提交的数据伪成败，就决定了服务器给我们结果是成败。
通过上面的一些例子，只要能伪造请求，发送给服务器，就能获取我们想要的结果或者目的，事实上也是如此，但伪造数据的难易则要由所对应的网站而定，有的网站压根就没没什么难度，而有的你搞一天都未必能搞的出来。如今的网站在这方面也都下足了功夫，想要轻松的伪造请求可不是件容易的事情了。
也正是因为我学了 HTTP 请求与 JS 逆向分析，我能做的也就更多，而正是基于 HTTP 协议下，其中一个就是有关于超星刷课软件的例子，如果我没有学过这些，我就不可能写出来。
后续会有关 HTTP 请求这方面都会放在逆向这个分类下，比如一些网站的加密算法和常见的坑等等。
", "url": "https://kuizuo.cn/brief-talk-http", "title": "浅谈HTTP", "summary": "记录 git 操作失误导致代码丢失与找回的过程", "date_modified": "2020-09-29T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "http" ] }, { "id": "chrome-plugin-development", "content_html": "相关文章 谷歌官方文档 (需翻墙)
Chrome 插件开发全攻略 （强烈推荐看这一篇！）
你只需要看完上面那篇文章和掌握一些前端开发基础，就足以自行编写一个 Chrome 插件。本文也是基于上面文章加上自己之前写的插件所记。
如果你用过 Chrome 浏览器的话，也许会用到过一些插件，其中比较知名的就是油猴插件，通过这些插件能够帮你例如自动完成一些功能，屏蔽广告，相当于一个浏览器内置的脚本。应该来说这是 Chrome 扩展开发，不过说 Chrome 插件更顺口，后文也会说成 Chrome 插件。
首先打开 Chrome，如下图即可进入插件的管理页面
![\"image-20200922225606159\"](\"https://img.kuizuo.cn/image-20200922225606159.png\")
这时候记得把右上角的开发者模式给勾上，如果不勾上的话你无法直接将文件夹拖入 Chrome 进行安装，就只能安装.crx格式的文件。Chrome 要求插件必须从它的 Chrome 应用商店（需要翻墙）安装，其它任何网站下载的都无法直接安装，所以可以把crx文件解压，然后通过开发者模式直接加载。
然后将写好的 Chrome 插件文件夹拖入到刚刚打开的插件管理页面即可。
是manifest.json切记不要英文单词打错字，一定要有这个文件，且需要放在根目录上，否则就会出现未能成功加载扩展程序的错误。
可以理解为后台，同时这个页面会一直常驻在浏览器中，而主要 background 权限非常高，几乎可以调用所有的 Chrome 扩展 API（除了 devtools），基本很多操作都是放在 background 执行，返回给 content，而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置CORS。这对我们后面要在 content 中发送跨域请求至关重要！
我习惯的做法是通过”page”：\"background.html\"来导入background.js或其他 js 代码，如下
// manifest.json
\"background\": {
\"page\": \"background.html\",
},
<!-- background.html -->
<!DOCTYPE html>
<html>
<head>
<title>背景页</title>
<meta charset=\"utf-8\" />
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
</head>
<body>
<script type=\"text/javascript\" src=\"js/jquery.js\"></script>
<script type=\"text/javascript\" src=\"js/background.js\"></script>
</body>
</html>
如果是 scripts 方式导入 js 文件则需要反复修改manifest.json文件。
有时候你在编写代码中出现了中文可能会出现了如下的乱码，
![\"image-20200923214834081\"](\"https://img.kuizuo.cn/image-20200923214834081.png\")
我遇到的原因是就是我原先的background.html代码写成如下的情况
<script type=\"text/javascript\" src=\"js/jquery.js\"></script>
<script type=\"text/javascript\" src=\"js/background.js\"></script>
没错，就只写了这两个行，就出现乱码（将 UTF-8 的编码变为了 windows1252），而只需要把 background.html 代码修改成正常的 HTML 结构，也就是上上面的那个代码即可解决该乱码情况。
我们主要的向页面注入脚本就依靠这个文件，相当于给页面添加了一个 js 文件，但是content和原始页面共享 DOM，但是不共享 JS，如要访问页面 JS（例如某个 JS 变量），只能通过injected js来实现（后文会提到）。并且content不能访问绝大部分chrome.xxx.api，除了下面这 4 种：
这些 API 绝大部分时候都够用了，非要调用其它 API 的话，你还可以通过通信来实现让 background 来帮你调用。
上文也说到了content是无法访问页面中的 JS，可以操作 DOM，但是 DOM 却不能调用它，也就是无法在 DOM 中通过绑定事件的方式调用content中的代码（包括直接写onclick和addEventListener2 种方式都不行），但是，在页面上添加一个按钮并调用插件的扩展 API是一个很常见的需求，那该怎么办呢？这时候就需要注入 inject.js 这个文件
document.addEventListener('DOMContentLoaded', function () {
injectCustomJs()
})
// 向页面注入JS
function injectCustomJs(jsPath) {
jsPath = jsPath || 'js/inject.js'
var temp = document.createElement('script')
temp.setAttribute('type', 'text/javascript')
// 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
temp.src = chrome.extension.getURL(jsPath)
temp.onload = function () {
// 放在页面不好看，执行完后移除掉
this.parentNode.removeChild(this)
}
document.head.appendChild(temp)
}
还没有完，因为注入有权限，所以需要在 manifest.json 声明一下这个文件。也就是下面的这行代码
{
// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
\"web_accessible_resources\": [\"js/inject.js\"],
}
这样你就能调用
Chrome 插件主要就 4 个部分组成，injected，content，popup，background，但这 4 个部分所对应的权限，应用都有可能各自不一，这时候就需要通过消息通信，将对应的数据发送到对应的文件，主要也就如下四种通信方式：
popup 可以直接调用 background 中的 JS 方法，也可以直接访问 background 的 DOM：
// background.js
function test() {
alert('我是background！')
}
// popup.js
var bg = chrome.extension.getBackgroundPage()
bg.test() // 访问bg的函数
alert(bg.document.body.innerHTML) // 访问bg的DOM
background访问popup如下（前提是popup已经打开）：
var views = chrome.extension.getViews({ type: 'popup' })
if (views.length > 0) {
console.log(views[0].location.href)
}
//background.js或popup.js：
function sendMessageToContentScript(message, callback) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
if (callback) callback(response)
})
})
}
sendMessageToContentScript({ cmd: 'test', value: '你好，我是popup！' }, function (response) {
console.log('来自content的回复：' + response)
})
content.js通过监听事件接收：
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
// console.log(sender.tab ?\"from a content script:\" + sender.tab.url :\"from the extension\");
if (request.cmd == 'test') alert(request.value)
sendResponse('我收到了你的消息！')
})
// content.js
chrome.runtime.sendMessage({ greeting: '你好，我是content呀，我主动发消息给后台！' }, function (response) {
console.log('收到来自后台的回复：' + response)
})
//background.js 或 popup.js：
// 监听来自content的消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
console.log('收到来自content的消息：')
console.log(request, sender, sendResponse)
sendResponse('我是后台，我已收到你的消息：' + JSON.stringify(request))
})
注意：
popup主动发消息的前提是 popup 必须打开！否则需要利用 background 作中转；主要就是injected向content发送，injected无需监听。
content和页面内的脚本（injected自然也属于页面内的脚本）之间唯一共享的东西就是页面的 DOM 元素，有 2 种方法可以实现二者通讯，：
window.postMessage和window.addEventListener来实现二者消息通讯；（推荐）injected中：
window.postMessage({ test: '你好！' }, '*')
content script中：
window.addEventListener(
'message',
function (e) {
console.log(e.data)
},
false,
)
injected无法直接和popup通信，必须借助content作为中间人。不过一般这种都少，直接和 bg 通信即可。
关于 Chrome 的主要内容也就这些，实际开发如果有个模板就能大大方便开发，在原文章中该作者已经分享了有对应的源代码，这里放上我自写的 Chrome 模板编写过程。
![\"image-20210820004414785\"](\"https://img.kuizuo.cn/image-20210820004414785.png\")
当然，这里需要提几点地方：
首先是配置方面，有时候插件的内的选项是要记录，以便下一次在启动插件的时候还是上一次的配置。先看代码
<!-- popup.js -->
<div class=\"config-item\">
<input type=\"checkbox\" id=\"config1\" class=\"box configs\" />
<label class=\"hand\" for=\"config1\" title=\"配置1\">配置1</label>
</div>
<div class=\"config-item\">
<input type=\"checkbox\" id=\"config2\" class=\"box configs\" />
<label class=\"hand\" for=\"config2\" title=\"配置2\">配置2</label>
</div>
// popup.js
$(function () {
let configs = document.getElementsByClassName('configs')
for (let i = 0; i < configs.length; i++) {
let type = configs[i].type
if (type == 'checkbox') {
configs[i].onchange = function () {
chrome.storage.sync.set({
[this.id]: this.checked,
})
}
chrome.storage.sync.get(configs[i].id, function (items) {
configs[i].checked = items[configs[i].id] || false
})
} else if (type == 'text' || type == 'password') {
configs[i].onblur = function () {
chrome.storage.sync.set({ [this.id]: this.value })
}
chrome.storage.sync.get(configs[i].id, function (items) {
configs[i].value = items[configs[i].id] || ''
})
}
}
})
可能需要多花点时间才能理解上面代码的意思，首先我在需要记录配置的地方添加了一个类configs，然后通过 js 代码遍历类名为configs，接着判断是多选框，还是输入框，input 的 id 为键名，value 为键值，来 set 或 get chrome.storage的值，然后进行事件绑定为修改配置后在记录一下配置。这里需要注意一下，写配置的时候{ [this.id]: this.value }这里的this.id是加了中括号的，原因就是这个 this.id 是变量，如果不加的话默认为字符串，但在这里有.所以是会报错的。
强烈不建议用 localStorage，我当初第一遍学的时候没学明白，我还通过消息通信将配置信息发给content，然后还用 localStorage 记录一遍，现在才发现chrome.storage是针对插件全局的，即使你在background或者popup中保存的数据，在content也能获取到。
当然这种读写配置的也算麻烦了，不像桌面级开发的读写配置。
首先，一般对于网页端的插件，能提供的页面最好方式就是悬浮窗了，这里我也是通过 DOM 创建元素生成对象。而这个悬浮窗是针对页面的，而不是像 popup 那样。相关的页面初始化代码如下，
var view = {
show: true,
cache: {
count: 0,
type: 0,
mouse_x: -1,
mouse_y: -1,
},
}
function initView() {
view.float = $(`
<div id=\"box\"
style=\"position: fixed;border: 1px double rgb(0,0,0); width: 300px; top: 30px; right: 1%; z-index: 999999; font-size: 15px; background-color: rgb(255,255,255); color: #000000;user-select:none;\">
<div style=\"position: relative;\">
<button name=\"show\"
style=\"position: absolute;top: 50%;right:1%; margin-top: 7px; line-height: 18px;overflow:hidden;border: 0px double rgb(0,0,0);cursor:pointer;font-size: 18px;background-color: rgb(255,255,255);\">－
</button>
</div>
<div id=\"kz_title\" style=\"height: auto; margin: 5px; font-size: 16px;\">日志</div>
<div id=\"kz_main\">
<hr>
<form>
<div style=\"margin-top: 5px;overflow-y: auto;\">
<button id=\"kz_id1\" name=\"cleanlog\"
style=\"margin-left: 10px;float:left;border-radius:0em;overflow:hidden;border: 1px double rgb(0,0,0);background-color: rgb(255,255,255);\">功能按钮</button>
<button id=\"kz_id2\" name=\"cleanlog\"
style=\"margin-left: 10px;float:left;border-radius:0em;overflow:hidden;border: 1px double rgb(0,0,0);background-color: rgb(255,255,255);\">功能按钮</button>
</div>
</form><br>
<div id=\"logList\"></div>
</div>
</div>
`)
view.info = view.float.find('#info')
view.kz_title = view.float.find('#kz_title')
view.kz_main = view.float.find('#kz_main')
view.float.appendTo('body').delegate('button', 'click', function (e) {
e.stopImmediatePropagation()
e.stopPropagation()
e.preventDefault()
let name = $(this).attr('name')
if (name == 'show') {
$(this).html(view.show ? '＋' : '－')
view.show = !view.show
view.kz_main.slideToggle()
}
})
addViewMouseListener()
log('日志输出1')
log('日志输出2')
log('日志输出3')
}
function addViewMouseListener() {
view.float.bind('mousedown', function (event) {
view.cache.x = $(this).position().left
view.cache.y = $(this).position().top
view.cache.mouse_x = event.originalEvent.clientX
view.cache.mouse_y = event.originalEvent.clientY
//console.log(view.cache.mouse_x, view.cache.mouse_y, view.cache.x, view.cache.y)
})
$(document).bind('mousemove', function (event) {
//计算出现在的位置是多少
if (view.cache.mouse_x == -1) return
if (view.cache.mouse_y - view.cache.y > view.kz_title.height()) return
let new_position_left = event.originalEvent.clientX - view.cache.mouse_x + view.cache.x,
new_position_top = event.originalEvent.clientY - view.cache.mouse_y + view.cache.y
//加上边界限制
if (new_position_top < 0) {
//当上边的偏移量小于0的时候，就是上边的临界点，就让新的位置为0
new_position_top = 0
}
//如果向下的偏移量大于文档对象的高度减去自身的高度，就让它等于这个高度
if (new_position_top > $(document).height() - view.float.height() && $(document).height() - view.float.height() > 0) {
new_position_top = $(document).height() - view.float.height()
}
//右限制
if (new_position_left > $(document).width() - view.float.width()) {
new_position_left = $(document).width() - view.float.width()
}
if (new_position_left < 0) {
//左边的偏移量小于0的时候设置 左边的位置为0
new_position_left = 0
}
view.float.css({
left: new_position_left + 'px',
top: new_position_top + 'px',
})
})
$(document).bind('mouseup', function (event) {
view.cache.mouse_x = -1
view.cache.mouse_y = -1
})
}
function log(msg, color) {
let date = new Date()
let t = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
msg = t + ' ' + msg
let div = $('<div class=\"log\"></div>').css({ 'border-color': 'rgba(121, 187, 255, 0.2)', 'background-color': 'rgba(121, 187, 255, 0.2)' })
let log = $('<p><span style=\"color: ' + (color || '#409EFF') + '\">' + msg + '</span></p>')
if ($('.log').length > 15) {
for (let i = 0; $('.log').length - 15; i++) {
$('.log')[i].remove()
}
}
$('#logList').append(div.append(log))
}
然后在 content.js 内容的对页面 url 判断是否需要初始化悬浮窗即可
document.addEventListener('DOMContentLoaded', function () {
if (location.host.indexOf('chaoxing') != -1) {
initView()
}
})
如何发挥就看各位了。
关于跨域请求，我当初在学习 Chrome 插件的时候，就是卡在了跨域这个地方，那时候前端学的浅，对跨域都不知道处理，然后放弃学习了 Chrome 插件一段时间，后来有时间了，想在补一补之前没写完的 Chrome 扩展搞完。然而跨域请求非常简单，而我那时候之所以卡住就是因为没好好看文档，搞不定的地方就多看几遍说不准就搞定了。
首先要使 Chrome 插件访问跨域资源，需要在 manifest.json 文件中声明要访问的域如下：
{
\"permissions\": [\"http://www.google.com/\", \"http://*.google.com/\", \"https://*.google.com/\", \"http://*/\"]
}
建议直接直接暴力点写上
{
\"permissions\": [\"http://*/*\", \"https://*/*\"]
}
然后封装一下对应的 ajax 请求，因为在 content 内进行 ajax 请求，是会在控制台输出跨域请求拦截，或者是 HTTPS 访问 HTTP 不安全等问题，这时候就需要通过消息通信，将 content 要发送的请求发送给 bg，让 bg 请求，然后等 bg 请求完毕，再将数据返回到 content 即可。下面是我对应的封装代码
// background.js
chrome.runtime.onMessage.addListener(function (req, sender, sendResponse) {
console.log(req, sender, sendResponse)
if (req.cmd == 'ajax') {
$.ajax({
url: req.url,
type: req.type,
data: req.data,
async: false,
success: function (res) {
sendResponse(res)
},
})
}
})
// content.js
function sendAjaxToBg(url, type, data, callback) {
chrome.runtime.sendMessage({ cmd: 'ajax', url: url, type: type, data: data }, function (response) {
callback(response)
})
}
这里的话我通信发送的是 js 对象，其中 cmd 决定了我要的操作，后台通过判断 cmd 来执行对应的操作。比较不好理解的是回调函数，由于 JS 自身语言的因素与浏览器的问题，很多事件都是先挂着，后做完在回调，所以我这里就封装成这种形式，例如
sendAjaxToBg(\"http://...\", \"GET\", null, function(response){
console.log(response)
...code
})
这只是一个简单的 http 封装发送，如果要更复杂的话还可以添加协议头和 cookies，这里就不在补充了。
实际上已经写过一些 Chrome 插件了，奈何写的比较烂或没搞完，也就暂时先不发，有时间会再整理一下自己所写的。
一个验证码识别，有时候在登录的时候需要输入验证码是件非常痛苦的事情。于是乎我就通过调用打码 Api 接口写了个自动识别验证码并填写的。也提供了非常方便的右键识别验证码的功能。具体效果如图（实际上还是得第一次先确认要识别的图片框与输入框，下次加载的时候需要手动点击验证码才会自动生效，还是不够智能的，不过成就感十足）
![\"image-20210820001938051\"](\"https://img.kuizuo.cn/image-20210820001938051.png\")
![\"wydm\"](\"https://img.kuizuo.cn/wydm.gif\")
另一个是基于某布大佬的 WebHook 工具，所更改的，不过一直停滞着，有空将其完善一下。
", "url": "https://kuizuo.cn/chrome-plugin-development", "title": "Chrome插件开发", "summary": "前言", "date_modified": "2020-09-28T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "chrome", "plugin", "develop" ] }, { "id": "first-blog-is-vuepress", "content_html": "感谢 vuepress-theme-reco主题与一篇博客使用文章使用 vuepress 构建个人博客
在写这篇文章前，本人非前端专业人士，只是一时兴起想开始搭建一个博客，在该博客上记录与分享一下自己所学的一切内容。（然后现在都在往前端这方向走了😂）
不打算破坏之前所写的一些内容，将一些补充的内容写在开头，目前访问 kzcode.cn 依旧能访问到该站，不过文章都保留原有未变动，图片都是直接跟随 MD 文档下，加上服务器又比较拉，所以访问会稍带卡顿。这篇合理来说也算我的第一篇博客，所以还是有必要记录一下的。
在接触软件行业的这一年里，也学到了很多很多很多的知识，也让我感受到代码的魅力与强大。在这学习过程中，百度到了各种相关学习文章，而这些正式前辈们所分享的学习经历，倘若没有这些，我可能早已停下学习的步伐。一时兴起，萌生了搭建博客的想法，然后开始搜索搭建博客的知识，于是乎就有了这篇文章。
写博客是为了记录自己，记录自己学习中的过程，知识，遇到的坑，写成一篇文章，也许过了几个月后的自己脑子不好使，忘记是如何解决的，回过头来看，瞬间焕然大悟。同时也能巩固自己所学的，在如今这个时代，技术更新换代是真的快，而要求学的东西也就越来越多。有时候学过的一项技术，过了几个月真的说忘就忘，不时常记录一下当初写的笔记，翻看之前写过的代码，那真的就和重新学习没什么两样了。
在此期间曾遇到许多坑，而解决最好的办法就是百度。在百度搜索过程中看到了许许多多的学习者分享自己那时候与我遇到一样的问题，说明他是如何解决的，并写文章。有时运气好可能他的解决办法同样也是我的解决办法，但往往总是不尽人意，这时需要再看下一个相关搜索或者下下个才能解决我的问题，这在学习过程中是必不可少的一个环节。而他们所分享的内容，就是一篇篇的博客。正是这一篇篇博客解惑学习者学习中的问题，让他们有自信再去学习下去！
于是就萌生的一种想法，利用自己所学的 Web 知识开始搭建属于自己的个人博客，分享自己所遇到的坑，希望能解决遇到同样问题的人。
要展示给别人看，就必须得搞前端 UI 界面，同时为了快速开发，我又百度了相关的前端 UI 框架，其中决定用 layui，界面风格布局可以接受，于是乎在搜索用过 layui 框架搭建的个人博客，成功找到一篇博主燕十三一个人的江湖分享的模板源码，然后开始大改，最终花了几个小时修改了大致页面
![\"image-20200901012343086\"](\"https://img.kuizuo.cn/image-20200901012343086.png\")
然后问题来了，前端大致界面设计好了，我最关心的文章要怎么写。。。而这份源码是没有给后端这些的（此时的我刚入前端，后端毛也不会），就一个纯前端页面，连文章模板都没有，可能是真的没什么可整理的，于是就放弃了自己手动搭建，主要还是那时候太菜了。
就在想用纯静态页面，还是用动态页面，对于动态页面获取文章数据的技能并不熟练。然后发现这种想法并不行，还是得借助外界提供现有的博客系统来写，于是乎停滞了一段时间，去搜索一系列相关的博客系统（合理来说应该是静态文件生成器），如 Hexo 或 WordPress，不过为啥选择 vuepress，因为我那时候正好在学 Vue，于是乎又开始新的一番折腾。不过也好，如果以后写技术文档，vuepress 也是一个非常推荐的选择。后续的话可能会去接触一下 Hexo 的 butterfly 主题，希望学到点东西，能给自己的博客在增添几份美感。
我所用的主题是vuepress-theme-reco 也非常推荐用这个主题来写博客，下面会简单介绍这款主题
一款简洁而优雅的 vuepress 博客 & 文档 主题。官方文档立即前往
![\"image-20200515152702435\"](\"https://img.kuizuo.cn/152702-539475.png\")
#全局安装vuepress-reco
npm install @vuepress-reco/theme-cli -g
# 初始化 (blog改成你要的文件名) 然后填写项目标题等等
theme-cli init blog
# 进入项目目录
cd blog
#安装依赖包
npm install
# 运行
npm run dev
# 编译
npm run build
执行完npm run dev运行后，点击控制台的对应地址 你就能看到
![\"image-20200901191643031\"](\"https://img.kuizuo.cn/image-20200901191643031.png\")
当然，可能标题和一些会不一样，因为我更改了两处地方一处是blog下的README.md文件，文件结构如下
---
home: true
heroText: 愧怍的个人空间
tagline: 我是愧怍,沉迷于代码无法自拔
...
这个是决定首页的样式，具体要什么背景，内容就因人而异。
另一处是.vuepress\\config.js里的内容，内容有点多，我依次来讲
首先是开头几行的，title 决定你网站的标题，description 则是一开始出场界面的描述
module.exports = {
title: '愧怍的小站',
description: '如果代码都解决不了的话,那可能真的解决不了',
}
随后你要关注的就是 themeConfig 下的 author，也就是作者名，改成你的名字就行
\"logo\": \"/logo.png\",
\"search\": true,
\"searchMaxSuggestions\": 10,
\"lastUpdated\": \"Last Updated\",
\"author\": \"愧怍\",
\"authorAvatar\": \"/logo.png\",
\"record\": \"xxxx\",
\"startYear\": \"2017\"
其余的一些，比如logo.png与avatar.png啊，你换成你的想要的头像就行，他们都存放在.vuepress\\public下,然后就是修改标题栏，他们都放在themeConfig下的nav里，这里你想修改哪个导航栏，就改哪个导航栏与标题，文末我会放上我的全部代码。
\"themeConfig\": {
\"nav\": [
{
\"text\": \"Home\",
\"link\": \"/\",
\"icon\": \"reco-home\"
},
{
\"text\": \"TimeLine\",
\"link\": \"/timeline/\",
\"icon\": \"reco-date\"
},
{
\"text\": \"Docs\",
\"icon\": \"reco-message\",
\"items\": [
{
\"text\": \"vuepress-reco\",
\"link\": \"/docs/theme-reco/\"
}
]
},
{
\"text\": \"Contact\",
\"icon\": \"reco-message\",
\"items\": [
{
\"text\": \"GitHub\",
\"link\": \"https://github.com/recoluan\",
\"icon\": \"reco-github\"
}
]
}
],
还有一个是主题自带的导航栏配置，这里你只需要更改 text 与 location 即可，其余不建议更改，你到时候写的文章都在依靠这两个
\"blogConfig\": {
\"category\": {
\"location\": 2,
\"text\": \"Category\"
},
\"tag\": {
\"location\": 3,
\"text\": \"Tag\"
}
},
zhuyi 你每次修改修改 config 的内容，就需要重新npm run dev vuepress 不支持热更新，也就是文件内容给修改了你需要重新编译运行，这是初学接触会遇到的坑。
现在有了一个页面风格不错，同时还是响应式页面，就差文章了。这时候你就需要了解 vuepress 的Markdown 拓展，我这里简单叙述一下，你该怎么写文章，下面是你要写文章的模板，你只需要关注几个内容就行了，
---
title: 笔记模板
date: 2020-08-21
tags:
- 笔记
categories:
- 个人学习笔记
author: 愧怍
keys:
- 'e9bc0e13a8a16cbb07b175d92a113126'
publish: false
isShowComments: false
---
::: tip
这是 tip
:::
<!--more -->
## 这是你的文章内容
正文内容
--- 所包裹的内容就文章简述像下面这样
![\"image-20200901034715126\"](\"https://img.kuizuo.cn/image-20200901034715126.png\")
要更改标题，日期外，你还需要更改的是分类 categories 和标签 tags，举个例子，现在我想写一篇文章，标题是 ES6 语法，那么我可以这么写
tags:
- ES6
- javascript
- js
categories:
- JavaScript
分类只写一个，可以写JavaScript（分类建议大写），标签写多个，然后你把你写的这篇文章，切记放在blogs目录下(以后写的博客都放在这里)，同时建一个文件夹名为JavaScript，的然后把文章放在这个目录下，文章名随意，建议和标题一样，如 ES6 语法.md。便于你以后分类，请按这样的方式归类文章。
万一我不小心- JavaScript 写成了 - Java，而并没有文件夹是Java的，没关系，也就是你在分类上看到 Java，文章分类不取决于文件夹名，而取决于categories 只是文件夹名和categories名一致便于分类罢了。
在标签页上，就能看到 ES6，javascript，与 js 的标签，方便定位相关文章
接着把要写的文章内容全都在写在下即可，这里要注意一下，正文内容的标题，从二级标题开始，一级标题就已经是 title 了，在写也没用。
其余相关的 key 和 publish 等相关参数还请读者查看 reco 主题的官方文档立即前往与 vuepress 官网立即前往
可能你会局限于 reco 主题的默认样式，这里就说下如何修改样式。如果你会点前端，这应该来说非常简单。
node_modules里的vuepress-theme-reco这个主题文件夹整个放在.vuepress\\theme\\下，因为有些时候我们是要修改源码来更改样式的，如果你不这样做的话，而是直接修改node_modules里面的文件，你npm install就会覆盖你修改后的，所以要这一步操作。.vuepress/styles/ 来创建文件index.styl来方便地添加额外样式（还有一个默认样式，不推荐修改），然后把你要修改的样式代码写在index.styl文件里即可，例如我要修改首页的字体颜色，右键检查找到对应的 css 选择器，然后在index.styl添加就行，如.home-blog .hero h1 {
color: #fff;
}
关于部署到服务器上，如果只是为了让别人能看到你搭建的博客，而不是要购买域名和服务器这些，直接参考文章使用 vuepress 构建个人博客即可，如果有服务器和域名我这里简单说下怎么个部署法。
npm run bulid
首先执行上一行代码，然后在目录下会生成public文件夹，这个文件夹就是你所有的网站静态文件，这时候你需要你的服务器开启一个 web 服务，我这里用的是腾讯云 CentOS 与宝塔面板（至于这两个怎么搞，外面教程太多了），这里我就用 Nginx。然后如下图添加站点
![\"image-20200918194540550\"](\"https://img.kuizuo.cn/image-20200918194540550.png\")
因个人情况填写域名，FTP，数据库等等，然后通过 ftp 工具直接传文件至站点对应的目录下，然后访问服务器对应的 ip 地址或者个人域名解析就行了。
不过这个还要手动部署特别麻烦，有没有什么命令能一键部署的，有，这里我推荐一篇文章一键部署到服务器，解决了我当初一直用 ftp 的痛点。不过有个更简单的自动部署脚本，scp2，有兴趣可以自行查阅。
首先就是 markdown 图片相对路径的坑，在写文章的话，如果涉及的本地图片引入，那么默认不操作的，也就是需要配置一下，默认在当前同级文件下，在创建一个文件名相同的文件夹来存放图片，我这里就以 Typora 为例，如图
![\"image-20200901180754412\"](\"https://img.kuizuo.cn/image-20200901180754412.png\")
其次，Typora 的路径是不带./，在 vuepress 会被编译成绝对路径。需要在前面添加上./，不过主题内已自带插件markdown-it，这个问题无需担心。
但常常我们的 md 文件名是中文的，这时候相对路径带有中文，但是 vuepress 会将中文路径进行 url 编码，
不会将你的这些图片编译到静态文件上，所以需要做一些操作
npm i markdown-it-disable-url-encode
markdown: {
extendMarkdown: md => {
md.use(require(\"markdown-it-disable-url-encode\"));
}
},
现在你用 Typora 就引用本地图片就可以在 vuepress 中完美显示了。
参考 Vuepress 图片资源中文路径问题 完美解决上述问题
如果你在该主题使用其他 UI 组件库，如 element，ant design，那么你很有可能会编译失败，官方解释
![\"image-20201223042921876\"](\"https://img.kuizuo.cn/image-20201223042921876.png\")
解决办法很简单，先删除 node_modules，然后再安装 ui 组件库依赖后，再安装其他依赖就行了。
放一些自己搭建这个博客过程中用到的一些链接地址，主要针对插件安装这些
就此，就可以好好的编写文章，主题固然方便，快捷搭建博客同时也别光顾这美化博客，注重分享文章，这才是博客的真正意义。reco 的主题也是希望帮助更多的人花更多的时间在内容创作上，而不是博客搭建上。
在使用 Vuepress 的一段时间，发现他更适合写的是文档，写博客可以，但花里胡哨的点少，比较简约，对于我这种又爱折腾的人来说，后续有可能会借鉴 Hexo 博客的一款主题 butterfly，将其源码复制到目前这个博客上，顺便巩固下自己的前端设计基础。
但还是要说的，要看自己到底要不要搭建博客，记录与分享文章，别盲目跟从。同时如果搭建博客，请把重心放在创作和笔记上，反复去美化主题对技术的提升远不如一篇有技术性的文章总结。
最后，希望我所分享的所有内容，正是你目前所遇到的难题，能为你排坑，便足矣。
", "url": "https://kuizuo.cn/first-blog-is-vuepress", "title": "第一个博客搭建之Vuepress", "summary": "感谢 vuepress-theme-reco主题与一篇博客使用文章使用 vuepress 构建个人博客", "date_modified": "2020-08-30T00:00:00.000Z", "author": { "name": "愧怍", "url": "https://github.com/kuizuo" }, "tags": [ "blog", "vuepress", "project" ] } ] }