-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
383 lines (264 loc) · 13.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>羽痕爱编程</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="羽痕爱编程">
<meta property="og:url" content="http://yuhenabc.com/index.html">
<meta property="og:site_name" content="羽痕爱编程">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="yuhenabc">
<meta name="twitter:card" content="summary">
<link rel="stylesheet" href="/css/style.css">
<!-- <link href='//fonts.useso.com/css?family=Titillium+Web:300,400,600' rel='stylesheet' type='text/css'>-->
<!-- <link href="//fonts.useso.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">-->
<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
<meta name="generator" content="Hexo 6.3.0"></head>
<body>
<div id="wrap">
<header id="header">
<div id="header-outer" class="outer">
<div class="container">
<div class="container-inner">
<div id="header-title">
<h1 class="logo-wrap">
<a href="/" class="logo"></a>
</h1>
</div>
<div id="header-inner" class="nav-container">
<a id="main-nav-toggle" class="nav-icon fa fa-bars"></a>
<div class="nav-container-inner">
<ul id="main-nav">
</ul>
<nav id="sub-nav">
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="搜索"><input type="hidden" name="sitesearch" value="http://yuhenabc.com"></form>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="main-body container-inner">
<div class="main-body-inner">
<section id="main">
<div class="main-body-header">
<h1 class="header"><em class="page-title-link" data-url="home">主页</em></h1>
</div>
<div class="main-body-content">
<div class="article-row">
<article class="article article-summary">
<div class="article-summary-inner">
<div class="article-meta">
<p class="category"><a class="article-category-link" href="/categories/%E7%9F%A5%E8%AF%86%E5%A4%87%E5%BF%98/">知识备忘</a></p>
<p class="date"><time datetime="2024-11-25T14:53:11.000Z" itemprop="datePublished">2024-11-25</time></p>
</div>
<h2 class="article-title">
<a href="/2024/11/25/use-client-or-server/" class="title">"use-client" 和 "use server" 的使用场景</a>
</h2>
<p class="article-excerpt">
在现代前端开发中，特别是在使用 Solid.js 和 Next.js 这样的框架时，"use server" 和 "use client" 指令用于明确区分服务器端和客户端的代码执行上下文。这些指令帮助开发者更好地管理应用的性能、安全性和用户体验。以下是这两个指令的具体使用场景和详细解释。
use client用途: 明确指定某个模块或组件仅在客户端执行。
</p>
</div>
</article>
<article class="article article-summary">
<div class="article-summary-inner">
<div class="article-meta">
<p class="category"><a class="article-category-link" href="/categories/%E6%8E%A2%E7%B4%A2%E5%8F%91%E7%8E%B0/">探索发现</a></p>
<p class="date"><time datetime="2024-08-02T14:51:45.000Z" itemprop="datePublished">2024-08-02</time></p>
</div>
<h2 class="article-title">
<a href="/2024/08/02/mysql-shell-vs-mongo-shell/" class="title">MySQL 8.0 和 MongoDB 在 NoSQL 方面的差异对比</a>
</h2>
<p class="article-excerpt">
MySQL 8.0 开始也支持 NoSQL 了，那么和 MongoDB 相比较，体验是否一样呢？让我们来看一看！
MySQL 8.0 (使用 MySQL Shell 和 X DevAPI)1. 创建 Schemamysqlsh --uri user@host:33060 --mysqlx
// 创建一个新的 schemavar demo = session.createSchema('d
</p>
</div>
</article>
</div>
<div class="article-row">
<article class="article article-summary">
<div class="article-summary-inner">
<div class="article-meta">
<p class="category"><a class="article-category-link" href="/categories/%E5%8A%A8%E6%89%8B%E8%83%BD%E5%8A%9B/">动手能力</a></p>
<p class="date"><time datetime="2024-07-12T02:46:01.000Z" itemprop="datePublished">2024-07-12</time></p>
</div>
<h2 class="article-title">
<a href="/2024/07/12/publish-jsr/" class="title">怎么发布 jsr 包？有哪些注意点？</a>
</h2>
<p class="article-excerpt">
JavaScript Registry (JSR) 是 JavaScript 和 TypeScript 的现代化软件包仓库。JSR 适用于许多运行时（Node.js、Deno、浏览器等），并且向后兼容 npm。
那么，怎么发布 jsr 包？1. 访问官网并使用 Github 授权登录官网：https://jsr.io/
2. 通过官网新发布一个包，填写 Scope 和 Package name
3
</p>
</div>
</article>
<article class="article article-summary">
<div class="article-summary-inner">
<div class="article-meta">
<p class="category"><a class="article-category-link" href="/categories/%E6%8E%A2%E7%B4%A2%E5%8F%91%E7%8E%B0/">探索发现</a></p>
<p class="date"><time datetime="2024-06-18T13:54:45.000Z" itemprop="datePublished">2024-06-18</time></p>
</div>
<h2 class="article-title">
<a href="/2024/06/18/auth-server/" class="title">实现一个最简单的单点登录（SSO）系统</a>
</h2>
<p class="article-excerpt">
一个最简单的单点登录（SSO）系统，包括认证中心（auth-server）、登录页（login-page）、资源服务端（resource-erver）和客户端（sso-client）四个部分，以下是详细的实现步骤。
1. 认证中心（Auth Server）认证中心负责用户认证，并在成功认证后生成一个 JWT token。
安装依赖mkdir auth-servercd auth-servernpm
</p>
</div>
</article>
</div>
<div class="article-row">
<article class="article article-summary">
<div class="article-summary-inner">
<div class="article-meta">
<p class="category"><a class="article-category-link" href="/categories/%E7%9F%A5%E8%AF%86%E5%A4%87%E5%BF%98/">知识备忘</a></p>
<p class="date"><time datetime="2024-05-16T02:55:17.000Z" itemprop="datePublished">2024-05-16</time></p>
</div>
<h2 class="article-title">
<a href="/2024/05/16/ansible/" class="title">Ansible 命令及其使用指南</a>
</h2>
<p class="article-excerpt">
Ansible 是一个强大的自动化工具，用于配置管理、应用部署和任务自动化。以下是一些常见的 Ansible 命令及其使用指南，帮助你更好地管理和自动化你的基础设施。
1. 安装 Ansible在大多数 Linux 发行版中，你可以使用包管理器来安装 Ansible。例如，在 Ubuntu 上：
sudo apt updatesudo apt install ansible
在 CentOS 上：
</p>
</div>
</article>
<article class="article article-summary">
<div class="article-summary-inner">
<div class="article-meta">
<p class="category"><a class="article-category-link" href="/categories/%E7%9F%A5%E8%AF%86%E5%A4%87%E5%BF%98/">知识备忘</a></p>
<p class="date"><time datetime="2024-04-30T10:58:59.000Z" itemprop="datePublished">2024-04-30</time></p>
</div>
<h2 class="article-title">
<a href="/2024/04/30/typescript-type-interface/" class="title">Typescript 中 Type 和 Interface 的区别</a>
</h2>
<p class="article-excerpt">
在 TypeScript 中，interface 和 type 都可以用来定义类型，但它们有一些关键的区别。了解这些区别有助于你在不同的场景中选择合适的方式。
1. 基本语法Interfaceinterface Person { name: string; age: number;}
Typetype Person = { name: string; age:
</p>
</div>
</article>
</div>
<div class="article-row">
<article class="article article-summary">
<div class="article-summary-inner">
<div class="article-meta">
<p class="category"><a class="article-category-link" href="/categories/%E7%9F%A5%E8%AF%86%E5%A4%87%E5%BF%98/">知识备忘</a></p>
<p class="date"><time datetime="2024-04-01T01:29:31.000Z" itemprop="datePublished">2024-04-01</time></p>
</div>
<h2 class="article-title">
<a href="/2024/04/01/typescript-generics/" class="title">Typescript 泛型的定义和使用范围</a>
</h2>
<p class="article-excerpt">
在 TypeScript 中，你可以在定义类型时使用泛型。泛型允许你创建可重用的类型定义，这些类型定义可以根据传入的类型参数进行调整。这使得类型定义更加灵活和强大。
泛型类型定义1. 基本语法你可以使用 <T>（或其他任何标识符）来定义泛型类型参数。例如：
type Box<T> = { value: T;};const boxNumber: Box&
</p>
</div>
</article>
<article class="article article-summary">
<div class="article-summary-inner">
<div class="article-meta">
<p class="category"><a class="article-category-link" href="/categories/%E7%9F%A5%E8%AF%86%E5%A4%87%E5%BF%98/">知识备忘</a></p>
<p class="date"><time datetime="2024-03-11T04:53:29.000Z" itemprop="datePublished">2024-03-11</time></p>
</div>
<h2 class="article-title">
<a href="/2024/03/11/support-both-esm-and-cjs/" class="title">让我们的 npm 包同时支持 CommonJS 和 ES modules</a>
</h2>
<p class="article-excerpt">
随着 JavaScript 生态系统的不断发展，ES Modules (ESM) 已经逐渐成为现代 JavaScript 项目的标准模块系统。然而，许多现有的项目仍然依赖于 CommonJS (CJS) 模块系统。为了确保我们的 npm 包能够兼容这两种模块系统，我们需要进行一些配置和代码调整。
本文将详细介绍如何让你的 npm 包同时支持 CommonJS 和 ES Modules。
1. 项目
</p>
</div>
</article>
</div>
<div class="article-row">
<article class="article article-summary">
<div class="article-summary-inner">
<div class="article-meta">
<p class="category"><a class="article-category-link" href="/categories/%E5%8E%9F%E5%88%9B%E8%AE%A8%E8%AE%BA/">原创讨论</a></p>
<p class="date"><time datetime="2024-02-14T13:14:11.000Z" itemprop="datePublished">2024-02-14</time></p>
</div>
<h2 class="article-title">
<a href="/2024/02/14/async-function-profit/" class="title">Async 函数哪些地方优于 Promise？</a>
</h2>
<p class="article-excerpt">
async 函数是 JavaScript 中处理异步操作的一种高级语法糖，它基于 Promise，但提供了更简洁和易读的语法。以下是我在工作过程中总结的 async 函数相对于 Promise 的一些优势：
1. 串联地执行多个异步操作async function getArticleList() { const articles = [] let i = 0 while (i++
</p>
</div>
</article>
<article class="article article-summary">
<div class="article-summary-inner">
<div class="article-meta">
<p class="category"><a class="article-category-link" href="/categories/%E7%9F%A5%E8%AF%86%E5%A4%87%E5%BF%98/">知识备忘</a></p>
<p class="date"><time datetime="2024-01-14T00:51:16.000Z" itemprop="datePublished">2024-01-14</time></p>
</div>
<h2 class="article-title">
<a href="/2024/01/14/hexo/" class="title">Hexo 常用命令备忘</a>
</h2>
<p class="article-excerpt">
Hexo 是一个快速、简单且功能强大的博客框架，使用 Node.js 编写。以下是一些常用的 Hexo 命令，帮助你管理和发布你的博客。
1. 初始化新博客hexo init foldercd foldernpm install
在指定的文件夹中初始化一个新的 Hexo 博客，并进入初始化的文件夹，安装 Hexo 及其依赖。
2. 生成静态文件hexo generate
生成静态文件到 publi
</p>
</div>
</article>
</div>
<nav id="page-nav">
<span class="pages">第 1 页，共 3 页</span>
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/2/">▶</a>
</nav>
</div>
</section>
<aside id="sidebar">
<a class="sidebar-toggle" title="Expand Sidebar"><i class="toggle icon"></i></a>
<div class="sidebar-top">
<p>关注我 :</p>
<ul class="social-links">
</ul>
</div>
<div class="widgets-container">
</div>
</aside>
</div>
</div>
</div>
<footer id="footer">
<div class="container">
<div class="container-inner">
<a id="back-to-top" href="javascript:;"><i class="icon fa fa-angle-up"></i></a>
<div class="credit">
<h1 class="logo-wrap">
<a href="/" class="logo"></a>
</h1>
<p>© 2024 yuhenabc</p>
<p>Powered by <a href="//hexo.io/" target="_blank">Hexo</a>. Theme by <a href="//github.com/ppoffice" target="_blank">PPOffice</a></p>
</div>
</div>
</div>
</footer>
<script src="/js/jquery.min.js"></script>
<script src="/js/html-patch.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>