/
index.html
419 lines (332 loc) · 84.5 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
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
<!DOCTYPE html><html lang="zh-CN" data-theme="light" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>online阳光-专注于大前端行业领域 - 一个专注于大前端的技术博客</title><meta name="author" content="Genglin Zheng,kbmjj123@gmail.com"><meta name="copyright" content="Genglin Zheng"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="format-detection" content="address=no"><meta name="wap-font-scale" content="no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="keywords" content="online阳光, 郑耿林的博客, zhenggl blog, 阳光online, javascript基础加强, css布局新思路, html模版渲染引擎的工作原理, vue实战与工作原理, react, android, ios, react-native, grunt底层分析, Node.js, webpack实战与原理分析, gulp"><meta name="description" itemprop="description" content="online阳光, 专注于大前端行业领域的学习, javascript, css, html, vue, react, android, ios, react-native, grunt, Node.js, webpack, gulp, 小程序, 一个都不能少"><meta name="description" content="online阳光, 专注于大前端行业领域的学习, javascript, css, html, vue, react, android, ios, react-native, grunt, Node.js, webpack, gulp, 小程序, 一个都不能少">
<meta property="og:type" content="website">
<meta property="og:title" content="online阳光-专注于大前端行业领域">
<meta property="og:url" content="https://www.91temaichang/index.html">
<meta property="og:site_name" content="online阳光-专注于大前端行业领域">
<meta property="og:description" content="online阳光, 专注于大前端行业领域的学习, javascript, css, html, vue, react, android, ios, react-native, grunt, Node.js, webpack, gulp, 小程序, 一个都不能少">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://www.91temaichang/img/user-head-img.png">
<meta property="article:author" content="Genglin Zheng">
<meta property="article:tag" content="online阳光, 郑耿林的博客, zhenggl blog, 阳光online, javascript基础加强, css布局新思路, html模版渲染引擎的工作原理, vue实战与工作原理, react, android, ios, react-native, grunt底层分析, Node.js, webpack实战与原理分析, gulp">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://www.91temaichang/img/user-head-img.png"><link rel="shortcut icon" href="/img/favicon.ico"><link rel="canonical" href="https://www.91temaichang/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//hm.baidu.com"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="360-site-verification" content="2d7b06c140d91a7743cb2c697e59f8a5"/><meta name="bytedance-verification-code" content="3t3T+QeGj84i9NhoCCiC"/><meta name="shenma-site-verification" content="8a98e42574efd6993cf6ed2589dfa56b_1694703851"/><meta name="sogou_site_verification" content="ooLFjoVsfF"/><script type="application/ld+json">{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "online阳光-专注于大前端行业领域",
"publisher": {
"@type": "Person",
"@id": "https://91temaichang.com",
"name": "online阳光",
"logo": {
"@type": "ImageObject",
"@id": "https://www.91temaichang.com/images/banner.jpg",
"url": "https://www.91temaichang.com/images/banner.jpg",
"width": "600",
"height": "60"
}
},
"image": "https://www.91temaichang.com/images/banner.jpg",
"keywords": "online阳光, 郑耿林的博客, zhenggl blog, 阳光online, javascript基础加强, css布局新思路, html模版渲染引擎的工作原理, vue实战与工作原理, react, android, ios, react-native, grunt底层分析, Node.js, webpack实战与原理分析, gulp",
"url": "https://www.91temaichang",
"description": "online阳光, 专注于大前端行业领域的学习, javascript, css, html, vue, react, android, ios, react-native, grunt, Node.js, webpack, gulp, 小程序, 一个都不能少",
"articleBody": "online阳光是郑耿林个人开发者的技术内容分享平台,专注于大前端领域,通过技术文章的分析,来对相关的开源框架进行深入的了解,更懂得自己编写的代码,沉淀见解思维",
"author": {
"@type": "Person",
"name": "Genglin Zheng",
"url": "https://www.91temaichang.com/about/",
"jobTitle": "Programmer",
"email": "kbmjj123@gmail.com",
"image": {
"@type": "ImageObject",
"@id": "https://secure.gravatar.com/avatar/40041fb63116f0207c65083f47f32ddb?s=96&d=mm&r=g",
"url": "https://secure.gravatar.com/avatar/40041fb63116f0207c65083f47f32ddb?s=96&d=mm&r=g",
"height": "96",
"width": "96"
}
}
}</script><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?ea1e17cf6caa0f77798bde507393cb94";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: undefined,
translate: undefined,
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: true,
post: true
},
runtime: '天',
dateSuffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: {"limitCount":50,"languages":{"author":"作者: Genglin Zheng","link":"链接: ","source":"来源: online阳光-专注于大前端行业领域","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
lightbox: 'fancybox',
Snackbar: undefined,
infinitegrid: {
js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
buttonText: '加载更多'
},
isPhotoFigcaption: true,
islazyload: true,
isAnchor: false,
percent: {
toc: true,
rightside: false,
},
autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: 'online阳光-专注于大前端行业领域',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2024-03-04 05:49:15'
}</script><script>(win=>{
win.saveToLocal = {
set: (key, value, ttl) => {
if (ttl === 0) return
const now = Date.now()
const expiry = now + ttl * 86400000
const item = {
value,
expiry
}
localStorage.setItem(key, JSON.stringify(item))
},
get: key => {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = Date.now()
if (now > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
Object.keys(attr).forEach(key => {
script.setAttribute(key, attr[key])
})
document.head.appendChild(script)
})
win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onerror = reject
link.onload = link.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
link.onload = link.onreadystatechange = null
resolve()
}
document.head.appendChild(link)
})
win.activateDarkMode = () => {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = () => {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><meta name="generator" content="Hexo 6.3.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; } .github-emoji > span { position: relative; z-index: 10; } .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; } .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "/img/loading.gif" data-lazy-src="/img/user-head-img.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">159</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">132</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">110</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page fixed" id="page-header" style="background-image: url('/img/banner.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="online阳光-专注于大前端行业领域"><img class="site-icon" src= "/img/loading.gif" data-lazy-src="/img/logo.png" alt="online阳光-专注于大前端行业领域"/><span class="site-name">online阳光-专注于大前端行业领域</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">online阳光-专注于大前端行业领域</h1><div id="site_social_icons"><a class="social-icon" href="https://github.com/kbmjj123" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:kbmjj123@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #24292e;"></i></a><a class="social-icon" href="https://twitter.com/kbmjj123" target="_blank" title="Twitter"><i class="fab fa-twitter" style="color: #49b1f5;"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/2024/01/22/db-query-and-aggregation-in-mongodb/" title="mongodb中的query查询以及聚合管道查询" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2024/01/22/db-query-and-aggregation-in-mongodb/mongodb%E4%B8%AD%E7%9A%84query%E6%9F%A5%E8%AF%A2%E4%BB%A5%E5%8F%8A%E8%81%9A%E5%90%88%E7%AE%A1%E9%81%93%E6%9F%A5%E8%AF%A2%E5%B0%81%E9%9D%A2.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="mongodb中的query查询以及聚合管道查询"></a></div><div class="recent-post-info"><a class="article-title" href="/2024/01/22/db-query-and-aggregation-in-mongodb/" title="mongodb中的query查询以及聚合管道查询" target="_blank">mongodb中的query查询以及聚合管道查询</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-01-22T15:31:46.000Z" title="发表于 2024-01-22 23:31:46">2024-01-22</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%90%8E%E7%AB%AF/" target="_blank">后端</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%90%8E%E7%AB%AF/%E6%95%B0%E6%8D%AE%E5%BA%93/" target="_blank">数据库</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%90%8E%E7%AB%AF/%E6%95%B0%E6%8D%AE%E5%BA%93/mongodb/" target="_blank">mongodb</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/mongodb/" target="_blank">mongodb</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/mongoose/" target="_blank">mongoose</a></span></div><div class="content">前言
在看完mongodb的官方文档之后，还是有点一头雾水，对于一些相关的查询以及聚合管道很多不能够信手拈来，而且查询文档的时候也发现难以入手，本文主要针对相关的查询选择器以及聚合管道操作进行分类筛选，让自己对mongodb所提供的操作 🈶 一定的概念，然后通过这个分类来进行查询使用，加深理解印象！
mongodb中的查询语句分类
一切以db.collections.find()方法入手，mongodb给我们抽象出来了这个统一的查询入口⚠ 在mongodb中，我们可以通过mongosh程序，通过db.collections.method不带括号的方式来查看一个方法的描述，如下图所示；🌟 通过这种方式，可以查看到该方法的定义与返回值等相关信息
在开始详细介绍这个查询过滤器分类之前，先看一下 👇 的一个分类结构图:👽 从上图可以看出，针对不同的查询筛选操作，进行了以下对应类目的分类：
比较/范围筛选
逻辑操作
属性匹配
数组匹配
地理位置运算匹配
数学运算匹配
投影相关
位运算匹配
其他匹配操作
比较/范围筛选
主要用来筛选某个字段是否满足大于、小于、相等、不等于、大于 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2024/01/07/the-difference-between-mongodb-and-mongoose/" title="Mongodb与Mongoose关于schemaType的差异性" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2024/01/07/the-difference-between-mongodb-and-mongoose/%E5%9C%A8mongodb%E4%B8%8Emongoose%E4%B8%AD%E7%9A%84SchemaType%E5%B0%81%E9%9D%A2.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Mongodb与Mongoose关于schemaType的差异性"></a></div><div class="recent-post-info"><a class="article-title" href="/2024/01/07/the-difference-between-mongodb-and-mongoose/" title="Mongodb与Mongoose关于schemaType的差异性" target="_blank">Mongodb与Mongoose关于schemaType的差异性</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-01-06T23:47:22.000Z" title="发表于 2024-01-07 07:47:22">2024-01-07</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%90%8E%E7%AB%AF/" target="_blank">后端</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%90%8E%E7%AB%AF/%E6%95%B0%E6%8D%AE%E5%BA%93/" target="_blank">数据库</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%90%8E%E7%AB%AF/%E6%95%B0%E6%8D%AE%E5%BA%93/mongodb/" target="_blank">mongodb</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/mongodb/" target="_blank">mongodb</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/mongoose/" target="_blank">mongoose</a></span></div><div class="content">前言
mongodb是一个机遇分布式文件存储的开源数据库系统，使用的非关系型数据库的设计，其提供了一种高性能、高可用一集易扩展的数据库解决方案。其主要的特点有：文档导向、无模式、索引支持、复制与高可用性、自动分片、丰富的查询语言、聚合工具等特性。mongoose是一个开源的对象文档映射器(ODM)库，主要为node.js提供了一种高效的方式来管理mongodb数据库中的数据，其通过模型定义(Schema definition)、数据验证(Data validation)、查询构建(Query building)、中间件(Middleware)、插件体系(Plugins)等功能，极大的简化了使用mongodb的复杂性！schema作为mongodb与mongoose的抽象单元，提供了基础的抽象服务！
什么是schemaType？它有什么作用？
在mongodb中最基本单元是文档(doc)，而文档则由一个个的字段构成，mongodb中采用schema的抽象概念来对文档进行抽象化，而schemaType则是对schema中每一个字段的属性的描述，理解了mongodb与mongoose中关于 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2024/01/07/hello-world/" title="Hexo安装与配置服务升级" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2024/01/07/hello-world/default-cover.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Hexo安装与配置服务升级"></a></div><div class="recent-post-info"><a class="article-title" href="/2024/01/07/hello-world/" title="Hexo安装与配置服务升级" target="_blank">Hexo安装与配置服务升级</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-01-06T23:30:42.308Z" title="发表于 2024-01-07 07:30:42">2024-01-07</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/npm/" target="_blank">npm</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Hexo/" target="_blank">Hexo</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Node-js/" target="_blank">Node.js</a></span></div><div class="content">Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/12/07/how-to-add-algolia-lib/" title="如何给你的CMS项目添加搜索服务" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/12/07/how-to-add-algolia-lib/hexo%E9%9B%86%E6%88%90algolia%E5%B0%81%E9%9D%A2.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="如何给你的CMS项目添加搜索服务"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/12/07/how-to-add-algolia-lib/" title="如何给你的CMS项目添加搜索服务" target="_blank">如何给你的CMS项目添加搜索服务</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-12-07T10:56:18.000Z" title="发表于 2023-12-07 18:56:18">2023-12-07</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%B7%A5%E5%85%B7%E6%8F%92%E4%BB%B6/" target="_blank">工具插件</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%B7%A5%E5%85%B7%E6%8F%92%E4%BB%B6/algolia/" target="_blank">algolia</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E5%B7%A5%E5%85%B7%E6%8F%92%E4%BB%B6/" target="_blank">工具插件</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/cms/" target="_blank">cms</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/algolia/" target="_blank">algolia</a></span></div><div class="content">前言
😕 我们平时在浏览一些开源的在线文档的时候，经常会使用到这个搜索功能，方便自己快速检索到感兴趣的信息，本文将具体带一把，关于如何在自己的文章管理系统中加入此服务，先瞄一眼以下的一个集成后的效果：
是不是觉得也很好用，想要在自己的文档中使用这个吗？下面将一步一步带你进入algolia搜索的世界！！
什么是algolia
algolia 是一家提供搜索和发现解决方案的公司。他们的主要产品是 algolia search，这是一个用于网站、移动应用和其他应用程序的搜索引擎服务。algolia 的搜索引擎旨在提供快速、可定制和易于集成的搜索体验。
algolia 的搜索引擎基于分布式架构，利用了云计算和搜索算法来提供高性能的搜索服务。它支持全文搜索、模糊搜索、过滤、排序和其他高级搜索功能，使开发人员能够创建强大的搜索体验，提高用户在应用程序中找到所需信息的效率。
如何集成algolia
这里以我的hexo博客文档为例，在当前项目中集成三方库 hexo-algoliasearch，通过借助于这个库，可以快速地在我们的项目中集成这个文档搜索服务
😕 这里假定我们已经注册好了 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/09/25/the-use-of-nuxt3/" title="Nuxt3.0的学习与使用" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/09/25/the-use-of-nuxt3/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93%E6%A1%86%E6%9E%B6Nuxt%E5%B0%81%E9%9D%A2.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nuxt3.0的学习与使用"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/09/25/the-use-of-nuxt3/" title="Nuxt3.0的学习与使用" target="_blank">Nuxt3.0的学习与使用</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-09-24T22:16:35.000Z" title="发表于 2023-09-25 06:16:35">2023-09-25</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/ssr/" target="_blank">ssr</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/vue/" target="_blank">vue</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/nuxt/" target="_blank">nuxt</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/ssr/" target="_blank">ssr</a></span></div><div class="content">前言
之前已经学习过关于Nuxt2.0Nuxt2.0知识文档的相关知识点，也在实际的该框架下进行过对应的项目开发，现在迁移至Nuxt3.0的学习(本文简称Nuxt)，并在此框架上进行对应的项目实战，在实战之前，很有必要进行关于Nuxt的使用文档简单的说明!!之前已经针对2.0版本进行一个详细的分析过了，因此本文仅针对3.0的使用特性进行一些补充说明。在开始进行该框架的介绍时，这边想先抛出几个关键词：自动导入(auto-imported)、模块集成、插件集成！！
目录与文件介绍
👇 将进行额外的目录与文件介绍，阐述关于Nuxt在使用上 🈶 什么不同之处
.nuxt
.nuxt目录将是Nuxt运行时的产物，一旦我们run这个命令的时候，将自动生成对应的资源文件。生成的文件内容如下： 从上面的截图我们可以解答这个问题：为什么在Nuxt环境中，可以免导入来直接使用全局组件以及全局API， 👉 因为自动导入的原因！！
components
该目录是放置所有的SFC组件的地方，所有的组件将会被自动注册到全局中，在实际的项目业务开发过程中，可以无需导入来直接使用！默认情况下，该目录的配 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/09/14/how-to-use-tailwindcss/" title="如何使用tailwindcss来管理项目的样式" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/09/14/how-to-use-tailwindcss/tailwindcss%E5%B0%81%E9%9D%A2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="如何使用tailwindcss来管理项目的样式"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/09/14/how-to-use-tailwindcss/" title="如何使用tailwindcss来管理项目的样式" target="_blank">如何使用tailwindcss来管理项目的样式</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-09-14T14:25:32.000Z" title="发表于 2023-09-14 22:25:32">2023-09-14</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/css/" target="_blank">css</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/css/tailwindcss/" target="_blank">tailwindcss</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/css/" target="_blank">css</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/tailwindcss/" target="_blank">tailwindcss</a></span></div><div class="content">前言😕 大家可以看到之前我们项目(比如使用vue全家桶+某个UI库)中打包出来的结果css内容，可以发现，我们在项目中经常使用的那就那么些样式，但是打包出来的最终效果确是像 ☝ 的一样，将有关的和无关的样式都给怼进来了，搞得整个css样式表非常的大。 更 🐶 的是如果我们要做响应式的交互效果，我们基本上都得一个个媒体查询都得用起来，并维护一套套的不同的样式表，来确保在对应的屏幕上能够按照既定的目标来展示对应的效果。 还有更 🐕 的是作为开发者，还必须想好每个样式的名字，如果按照 css中的BEM命名规范 的话，还得去想好每个样式的名称。当然在实际的coding过程中还有其他比较繁琐的事情，让我们从css样式代码管理工作中释放出来！
👉 因此，tailwindcss 官网 应运而生，就是为了解决上述提及到的相关问题，以及根据更多的使用业务应用场景来管理项目中的样式！！
什么是tailwindcss?
tailwind css的工作原理就是扫描所有的HTML文件、JavaScript组件以及任何其他模版来获取其中出现的类型，生成对应的样式，然后将它们写入到静态的css文件中，也 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/09/11/migrating-vue3-from-vue2/" title="从vue2迁移到vue3的编码实战思考" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/09/11/migrating-vue3-from-vue2/vue2%E5%BE%80vue3%E7%9A%84%E8%BF%81%E7%A7%BB%E4%B9%8B%E8%B7%AF.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="从vue2迁移到vue3的编码实战思考"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/09/11/migrating-vue3-from-vue2/" title="从vue2迁移到vue3的编码实战思考" target="_blank">从vue2迁移到vue3的编码实战思考</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-09-11T14:12:28.000Z" title="发表于 2023-09-11 22:12:28">2023-09-11</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/vue3/" target="_blank">vue3</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/vue/" target="_blank">vue</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/vue3/" target="_blank">vue3</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/typescript/" target="_blank">typescript</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/vite/" target="_blank">vite</a></span></div><div class="content">前言
习惯了vue2全家桶项目的开发，突然转向vue3，如果单纯的使用选项式的模式来编写vue3的项目的话，与vue2并没有太大的差别，无非是将data从原本的data(){}函数中转移到了setup()函数中而已，但在vue3中提供了另外一种组合式编程的模式，让我们能够以函数调用的方式来编写对应的项目，下面将通过实际的项目编码方式上的对比，来进行整理两者之间的一个区别，加深对vue3项目的理解！
项目实战
👇 基于 1⃣ 开源的项目进行学习与分析:☝ 是对应的项目的源码目录，主要 🈶 api、assets、components、hooks、icons、locates、plugins、router、store、styles、utils、views，下面将一一分析每个文件夹中都代表着什么意义，以及以下都有哪些文件资源，都有各自对应的什么内容！
1、api
一般是前端项目中与业务相关的接口定义，可根据实际业务场景情况进行定义，一般是通过调用公共的axios工具类，来对外暴露业务本地化调用的接口，但是在以前我们所编写的方法中，我们一般是通过接收url+params的方式，来发起的接口 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/08/30/vue3-study/" title="vue3全家桶学习" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/08/30/vue3-study/vue3%E5%85%A8%E5%AE%B6%E6%A1%B6%E5%B0%81%E9%9D%A2.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue3全家桶学习"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/08/30/vue3-study/" title="vue3全家桶学习" target="_blank">vue3全家桶学习</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-08-30T00:02:22.000Z" title="发表于 2023-08-30 08:02:22">2023-08-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/vue3/" target="_blank">vue3</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/vue/" target="_blank">vue</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/vue3/" target="_blank">vue3</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/typescript/" target="_blank">typescript</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/vite/" target="_blank">vite</a></span></div><div class="content">前言
在从以前vue2项目中转向vue3的领域，据网上说好像有很大的性能以及编码速度的提升空间，感觉已经迫不及待要来接触这个领域，看看vue3是如何“征服”vue2的开发者的，它与之前使用vue2所开发出来的项目 🈶 什么区别？ 🈶 什么优势？？？
在通读了一遍vue3的官方文档 vue3官方文档 之后，感觉编码习惯 🈶 一定的区别，虽然vue3支持“选项式(与vue2编码方式类似)”与“组合式”的编码方式，但在经过简单的练手之后发现，组合式的编码方式能够在一定程度上减少代码量，而且更多地是以函数的思维来编写代码，而且与vue3的其他框架能够无缝衔接！！
😕 但是，这边也 🈶 几个问题，结合以前所开发的项目来进行提问，并在后续的学习过程中将来分析解决这些问题：
vue3中通过import语法来引入vue3的相关API方法(比如ref)，然后直接调用，在以前vue2中是直接在data函数中返回的对象中声明，其他API方法也是如此，因为在编写vue3的SFC组件的时候，这些API应该都会被直接调用，那么是否可以将这个import给去掉，然后直接来调用呢？
vue3中通 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/07/27/koa-middleware-jwt/" title="验证json-web-token的koa中间件：koa-jwt" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/07/27/koa-middleware-jwt/koa-jwt%E5%B0%81%E9%9D%A2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="验证json-web-token的koa中间件：koa-jwt"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/27/koa-middleware-jwt/" title="验证json-web-token的koa中间件：koa-jwt" target="_blank">验证json-web-token的koa中间件：koa-jwt</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-27T01:27:57.000Z" title="发表于 2023-07-27 09:27:57">2023-07-27</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/koa/" target="_blank">koa</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/koa/middleware/" target="_blank">middleware</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/koa/" target="_blank">koa</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/middleware/" target="_blank">middleware</a></span></div><div class="content">前言
JSON Web Token（以下简称JWT）是一个开放标准，它定义了一种紧凑且自包含的方式，用于作为JSON对象在各方之间安全地传输信息。此信息可以被验证和信任，因为它是数字签名的。JWT可以使用秘密（使用HMAC算法）或使用RSA或ECDSA的公钥/私钥对来签名。简而言之，就是使用一个加密的以及base64编码组成的字符串，用于解决跨域认证问题的一个机制！
传统的用户认证流程
传统的用户认证流程一般如下：
用户想服务器端发送用户名以及密码；
服务器端认证通过后，将用户信息存储于当前会话(session)中，比如有用户信息、登录时间等等；
服务器端向用户返回一个sessionId，写入到用户的cookie中；
随后用户的每一次请求，都会通过cookie来携带上sessionId，传回给服务器，告知已认证通过，并进行认证通过许可后的资源访问；
服务器从cookie中捞到sessionId之后，认证通过后，放行继续往下执行；
😕 这里方式是拥有一定的弊端的，加入是单机的，一般没有什么太大的问题，但是如果是集群或者是跨域多服务的情况下，就需要将sessionId来进行共享， ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/07/19/koa-middleware-userauth/" title="koa用户认证抽象层中间件" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/07/19/koa-middleware-userauth/koa-userauth%E5%B0%81%E9%9D%A2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="koa用户认证抽象层中间件"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/19/koa-middleware-userauth/" title="koa用户认证抽象层中间件" target="_blank">koa用户认证抽象层中间件</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-19T08:35:02.000Z" title="发表于 2023-07-19 16:35:02">2023-07-19</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/koa/" target="_blank">koa</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/koa/middleware/" target="_blank">middleware</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/koa/" target="_blank">koa</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/middleware/" target="_blank">middleware</a></span></div><div class="content">前言
koa-userauth用户认证抽象层中间件，主要用于在某些场景下，某些资源是必须授权(一般是登录)通过之后才能够访问的，当未登录去访问需要的资源时，由于该资源是需要授权才能够访问到的(可选择从session中获取)，因此将自动重定向到，再重定向到原本目标资源的访问
如何使用123456789101112131415161718const koa = require('koa');const userauth = require('koa-userauth');const session = require('koa-generic-session');const app = new koa();app.keys['I am secret'];app.use(session());app.use(userauth({ match: '/user', loginURLFormatter: (url) => { return '即将重定向的登录页面?redirect=' + url }， getUser: async ctx => { const t ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/07/18/koa-middleware-multer/" title="文件上传中间件：koa-multer" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/07/18/koa-middleware-multer/koa-multer%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%B0%81%E9%9D%A2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="文件上传中间件：koa-multer"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/18/koa-middleware-multer/" title="文件上传中间件：koa-multer" target="_blank">文件上传中间件：koa-multer</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-18T00:00:24.000Z" title="发表于 2023-07-18 08:00:24">2023-07-18</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/koa/" target="_blank">koa</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/koa/middleware/" target="_blank">middleware</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/koa/" target="_blank">koa</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/middleware/" target="_blank">middleware</a></span></div><div class="content">前言
文件上传，应该是web应用开发中最常见的动作了，一般有单文件上传、多文件上传、文件与数据一同上传等方式，而koa中使用了koa-multer来进行文件的上传服务，下面让我们来了解一波关于文件上传服务的使用！
如何使用123456789101112131415161718192021222324252627const Koa = require('koa');const Router = require('@koa/router');const multer = require('@koa/multer');const app = new Koa();const router = new Router();const upload = multer({}); // 这里可以通过传递参数来控制文件上传的配置// 以下是定义的文件上传路由router.post('/upload-multiple-files', upload.fields([ { name: 'avatar', maxCount: 1 }, { name: 'boop', maxCount: 2 }]), ct ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/07/14/koa-middleware-generic-session/" title="外部存储会话管理：koa-generic-session" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/07/14/koa-middleware-generic-session/koa-generic-session%E5%B0%81%E9%9D%A2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="外部存储会话管理：koa-generic-session"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/14/koa-middleware-generic-session/" title="外部存储会话管理：koa-generic-session" target="_blank">外部存储会话管理：koa-generic-session</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-14T13:55:07.000Z" title="发表于 2023-07-14 21:55:07">2023-07-14</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/koa/" target="_blank">koa</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/koa/middleware/" target="_blank">middleware</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/koa/" target="_blank">koa</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/middleware/" target="_blank">middleware</a></span></div><div class="content">前言
之前我们介绍了关于koa-session的简单运用，了解了其中关于内存缓存级别(cookies)控制的客户端会话管理，现在我们来了解一波关于外部存储(koa-redis)的相关运用，来以免服务重启导致缓存数据丢失的问题！这里的koa-generic-session其实就是针对原本的koa-session进行一个一层包装，通过追加的固定的配置以及对应额外的属性来丰富这个session原本提供的功能！这里可以简单的理解是将原本应该存储在内存中的数据，现在都存储到了数据库，而且数据结构就是以简单的key: value键值对的方式来存储的，如下图所示
如何使用12345678910111213141516171819202122232425const session = require('koa-generic-session');const redisStore = require('koa-redis');const koa = require('koa');const app = new koa();app.keys = ['自定义keys'];app.use(session({ ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/07/13/koa-middleware-session/" title="会话管理中间件：koa-session" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/07/13/koa-middleware-session/koa-session%E5%B0%81%E9%9D%A2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="会话管理中间件：koa-session"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/13/koa-middleware-session/" title="会话管理中间件：koa-session" target="_blank">会话管理中间件：koa-session</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-13T00:19:41.000Z" title="发表于 2023-07-13 08:19:41">2023-07-13</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/koa/" target="_blank">koa</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/koa/middleware/" target="_blank">middleware</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/koa/" target="_blank">koa</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/middleware/" target="_blank">middleware</a></span></div><div class="content">前言koa-session官网
对于浏览器端的session，通常会使用cookie来存储session标识。在用户首次访问服务端时，服务端会生成一个唯一的session标识，并将其存储在cookie中返回给浏览器。随后，每次浏览器发送请求到服务端时，会自动携带上一次存储在cookie中的session标识。服务端通过解析请求中的session标识，可以识别出当前请求属于哪个session。服务端会根据session标识来查找相应的session数据，并进行相应的处理。在处理完请求之后，服务端会更新session数据，并将最新的session标识返回给浏览器，以便下次请求使用。这种基于cookie的session机制可以确保同一个浏览器在一次会话中持续保持与服务端的连接，并共享会话数据。通过每次请求携带最新的session标识，可以保证同一个session会话的持续性和一致性。此外，为了防止篡改或伪造session标识，可以结合使用签名（sig）等方式，增加session的安全性。Koa简单的会话管理中间件，基于cookie机制，并支持外部存储(比如redis、db数据库等存储方式) ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/07/12/koa-middleware-router/" title="路由配置中间件：koa-router" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/07/12/koa-middleware-router/koa-router%E5%B0%81%E9%9D%A2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="路由配置中间件：koa-router"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/12/koa-middleware-router/" title="路由配置中间件：koa-router" target="_blank">路由配置中间件：koa-router</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-11T21:04:07.000Z" title="发表于 2023-07-12 05:04:07">2023-07-12</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/koa/" target="_blank">koa</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/koa/middleware/" target="_blank">middleware</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/koa/" target="_blank">koa</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/middleware/" target="_blank">middleware</a></span></div><div class="content">前言koa-router官网
Koa自身并没有提供关于对于不同的path、不同的method的处理中间件配置，假如我们在程序中采用一系列if判断，来识别不同的路径、不同的请求方式对应于不同的中间件函数的话，那么随着项目的迭代，产生的结果将会是毁灭性的！！因此，需要 🈶 那么一个中间件，能够帮助我们管理好不同的路径、不同的请求方式下对应的中间件：koa-router，通过koa-router，可以满足这个情况的同时，还能够满足路由的叠加、嵌套，下面让我们来一一剖析一波！
如何使用12345678910const Koa = require('koa');const Router = require('@koa/router');const app = new Koa();const router = new Router();router.get('/', (ctx, next) => { // ctx.router available});app .use(router.routes()) .use(router.allowedMethods());
这里我们 � ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/07/11/koa-middleware-bodyparser/" title="解析请求body中间件：koa-bodyparser" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/07/11/koa-middleware-bodyparser/koa-bodyparser%E5%B0%81%E9%9D%A2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="解析请求body中间件：koa-bodyparser"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/11/koa-middleware-bodyparser/" title="解析请求body中间件：koa-bodyparser" target="_blank">解析请求body中间件：koa-bodyparser</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-11T00:25:31.000Z" title="发表于 2023-07-11 08:25:31">2023-07-11</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/koa/" target="_blank">koa</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/koa/middleware/" target="_blank">middleware</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/koa/" target="_blank">koa</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/middleware/" target="_blank">middleware</a></span></div><div class="content">前言bodyparser官网
作为消息请求体(body)的解析器，基于co-body进行的body的解析，可支持json、form、text、xml类型的body的解析！在处理程序之前，在中间件中解析传入的请求体，解析完成后，将在Koa上下文ctx.request中追加body参数，使得后续所有的中间件可以通过ctx.request.body属性来访问到解析后的参数，从而获取请求参数！！
如何使用12345678const Koa = require('koa');const bodyParser = require('@koa/bodyparser');const app = new Koa();app.use(bodyParser({}));app.use(ctx => { ctx.body = ctx.request.body console.info(ctx.request.rowBody)})
🌠 上述代码是bodyparser的简单运用，通过bodyParser函数的运行结果(应该是接收ctx+next作为参数的函数)，来作为响应的中间，这里bodyPars ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/07/10/the-usage-of-koa/" title="koa的使用与常用中间件一览" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/07/10/the-usage-of-koa/koa%E5%B0%81%E9%9D%A2.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="koa的使用与常用中间件一览"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/10/the-usage-of-koa/" title="koa的使用与常用中间件一览" target="_blank">koa的使用与常用中间件一览</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-10T05:49:22.000Z" title="发表于 2023-07-10 13:49:22">2023-07-10</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/nodejs/" target="_blank">nodejs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/nodejs/koa/" target="_blank">koa</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/nodejs/" target="_blank">nodejs</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/koa/" target="_blank">koa</a></span></div><div class="content">前言Koa官网
Koa，基于Node.js平台的下一代web开发框架!致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa`` 帮你丢弃回调函数，并有力地增强错误处理。 Koa`` 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。
koa是什么?
Koa 应用程序是一个包含一组中间件函数的对象，它是按照类似堆栈的方式组织和执行的。Koa 类似于你可能遇到过的许多其他中间件系统，例如 Ruby 的 Rack ，Connect 等，然而，一个关键的设计点是在其低级中间件层中提供高级“语法糖”。这提高了互操作性，稳健性，并使书写中间件更加愉快。这包括诸如内容协商，缓存清理，代理支持和重定向等常见任务的方法。尽管提供了相当多的有用的方法 Koa 仍保持了一个很小的体积，因为没有捆绑中间件。
如何使用koa?123456const Koa = require('koa');const app = new Koa();app.use(async ctx => { ctx.bo ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/06/19/study-of-vue-code-3/" title="vue源码学习与分析(三)：vue指令" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/06/19/study-of-vue-code-3/vue%E6%8C%87%E4%BB%A4%E5%B0%81%E9%9D%A2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue源码学习与分析(三)：vue指令"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/06/19/study-of-vue-code-3/" title="vue源码学习与分析(三)：vue指令" target="_blank">vue源码学习与分析(三)：vue指令</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-06-19T15:37:00.000Z" title="发表于 2023-06-19 23:37:00">2023-06-19</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/" target="_blank">前端</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/vue/" target="_blank">vue</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/vue/" target="_blank">vue</a></span></div><div class="content">前言
在编写vue项目的过程中，指令应该是相当的熟悉的了Vue 指令是一种特殊的 HTML 属性，具有 v- 前缀，用于在模板中声明性地绑定数据并对 DOM 进行操作。指令可以被绑定到 HTML 元素、组件和相应的模板语法中。在 Vue 中，指令本质上就是实现了一个自定义操作的 JS 函数，该函数接受两个参数：绑定元素 (el) 和指令对象 (binding)。指令对象包含了一些指令相关的信息，例如指令名称、表达式、修饰符等。
官方的v指令都有哪些
官方指令一览
指令
描述
条件指令
用于做条件渲染，包括整个if家庭(v-if、v-else、v-else-if)
v-text
用于对整个节点赋值文本内容
v-html
用于更新元素的innerHTML
v-show
用于切换一个元素的显示与隐藏
v-for
类似于array.map()，用于将一个列表数据转换为元素列表
v-on
缩写：@，用于捆绑事件监听
v-bind
缩写：:，用于将变量与属性进行捆绑，使得属性参数化
v-model
在表单控件或者组件上创建双向绑定
v-slot
缩写 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/06/09/study-of-vue-router-code/" title="vue-router的用法与源码学习" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/06/09/study-of-vue-router-code/vue-router%E5%B0%81%E9%9D%A2.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue-router的用法与源码学习"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/06/09/study-of-vue-router-code/" title="vue-router的用法与源码学习" target="_blank">vue-router的用法与源码学习</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-06-09T10:49:51.000Z" title="发表于 2023-06-09 18:49:51">2023-06-09</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/" target="_blank">前端</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/vuex/" target="_blank">vuex</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/vue-router/" target="_blank">vue-router</a></span></div><div class="content">前言
在之前vue全家桶项目中，对于vue-router的使用，爽得不要不要的，😕 那么，我们是否有思考过，这个vue-router的工作过程是怎样的？它是如何设计的？为什么我们简单通过配置一张“路由表”，就可以实现整个web应用的路由控制功能？在路由表中它与component组件的关联是如何被建立起来的？懒加载机制是如何实现的？为什么在任意组件中通过watcher $route就可以自动检测到路由发生了变化，并触发监听函数的？这个RouterView究竟是何方神圣，凭什么它能够“装载”component，并让component按照自身的钩子函数去执行？👇 将通过分析vue-router的源码执行过程，顺带resolve这些问题！
Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/06/07/study-of-vuex-code/" title="Vuex的用法与源码学习" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/06/07/study-of-vuex-code/Vuex%E5%B0%81%E9%9D%A2.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vuex的用法与源码学习"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/06/07/study-of-vuex-code/" title="Vuex的用法与源码学习" target="_blank">Vuex的用法与源码学习</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-06-06T21:24:36.000Z" title="发表于 2023-06-07 05:24:36">2023-06-07</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/" target="_blank">前端</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/vuex/" target="_blank">vuex</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/vuex/" target="_blank">vuex</a></span></div><div class="content">前言
在使用vue全家桶来开发前端站点的时候，对于vue组件间通信，有那么一种方式(也是普遍使用的方式)，就是使用vuex来实现跨组件间的通讯，本文章旨在通过使用vuex解决实际项目的同时，从源码层面解析关于vuex是如何做到远程触发的相关原理的！Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。🌠 从上面可以看出这个vuex的工作流是单向的，主要包含有3个元素：
状态(state): 驱动应用的数据源；
视图(view): 以声明方式将状态映射到视图；
操作(action): 响应在视图上的用户输入导致的状态变化
🌠 而实际在使用过程中，vuex的设计理念是：把组件的共享状态抽取出来，以一个全局单例模式管理，组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为
Vuex的一般用法
😕 这里的一般流程如下：
源码分析
😕 这个Store对象是如何被“植入到”vue实例中的呢？为什么可以在vue实例中就 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/05/15/study-of-vue-code-5/" title="vue源码学习与分析(五)：业界关于vue使用过程中提升性能的编码习惯" target="_blank"><img class="post-bg" src= "/img/loading.gif" data-lazy-src="/2023/05/15/study-of-vue-code-5/vue%E5%B8%B8%E7%94%A8%E6%8A%80%E5%B7%A7%E5%B0%81%E9%9D%A2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue源码学习与分析(五)：业界关于vue使用过程中提升性能的编码习惯"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/05/15/study-of-vue-code-5/" title="vue源码学习与分析(五)：业界关于vue使用过程中提升性能的编码习惯" target="_blank">vue源码学习与分析(五)：业界关于vue使用过程中提升性能的编码习惯</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-05-15T14:53:43.000Z" title="发表于 2023-05-15 22:53:43">2023-05-15</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/" target="_blank">前端</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/vue/" target="_blank">vue</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" target="_blank">开发框架</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/vue/" target="_blank">vue</a></span></div><div class="content">前言
业界网络上关于提升vue编程 🈶 不少的编程技巧，而且之前自己更多的是拿来就直接用了，也不清楚为什么需要这样子写？在学习了关于vue的源码之后，觉得很有必要来针对这些优化技巧提供适当、合理的一个解释！
👇 是关于网络上所提及的关于提升vue编程性能的一些小技巧：
在使用v-for指令进行循环的时候，需要针对每一个item提供对应唯一的key作为属性，这样子可以提供渲染的性能；
合理使用 v-if 和 v-show：v-if 在条件为 false 时会完全销毁元素及其事件监听器和子组件，而v-show 只是简单地隐藏元素。因此，在频繁切换一个元素的显示状态时，应该使用 v-show;
避免在模板中使用复杂表达式：复杂的表达式会增加渲染的时间，可以把计算逻辑放到 computed 或者 methods 中;
合理使用计算属性和 watch：计算属性具有缓存机制，只有在依赖的变量发生变化的时候才会重新计算，而 watch 监听变量的变化，当变量发生变化时就会触发函数执行;
采用异步组件和路由懒加载：将一个大型应用拆分成小块，并根据需要动态加载可以提高应用的性能;
合理使用 v- ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/#content-inner">2</a><span class="space">…</span><a class="page-number" href="/page/8/#content-inner">8</a><a class="extend next" rel="next" href="/page/2/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "/img/loading.gif" data-lazy-src="/img/user-head-img.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Genglin Zheng</div><div class="author-info__description">原来从事安卓开发，后转从事 WEB 开发，主要开发语言 java, javascript, 熟悉使用 vue2、vue3、typescript、nuxt2、nuxt3、tailwindcss、react、react-native、nodejs 等主流框架语言</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">159</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">132</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">110</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/kbmjj123"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/kbmjj123" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:kbmjj123@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #24292e;"></i></a><a class="social-icon" href="https://twitter.com/kbmjj123" target="_blank" title="Twitter"><i class="fab fa-twitter" style="color: #49b1f5;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">欢迎您阅读我的博客～</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2024/01/22/db-query-and-aggregation-in-mongodb/" title="mongodb中的query查询以及聚合管道查询"><img src= "/img/loading.gif" data-lazy-src="/2024/01/22/db-query-and-aggregation-in-mongodb/mongodb%E4%B8%AD%E7%9A%84query%E6%9F%A5%E8%AF%A2%E4%BB%A5%E5%8F%8A%E8%81%9A%E5%90%88%E7%AE%A1%E9%81%93%E6%9F%A5%E8%AF%A2%E5%B0%81%E9%9D%A2.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="mongodb中的query查询以及聚合管道查询"/></a><div class="content"><a class="title" href="/2024/01/22/db-query-and-aggregation-in-mongodb/" title="mongodb中的query查询以及聚合管道查询" target="_blank">mongodb中的query查询以及聚合管道查询</a><time datetime="2024-01-22T15:31:46.000Z" title="发表于 2024-01-22 23:31:46">2024-01-22</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2024/01/07/the-difference-between-mongodb-and-mongoose/" title="Mongodb与Mongoose关于schemaType的差异性"><img src= "/img/loading.gif" data-lazy-src="/2024/01/07/the-difference-between-mongodb-and-mongoose/%E5%9C%A8mongodb%E4%B8%8Emongoose%E4%B8%AD%E7%9A%84SchemaType%E5%B0%81%E9%9D%A2.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Mongodb与Mongoose关于schemaType的差异性"/></a><div class="content"><a class="title" href="/2024/01/07/the-difference-between-mongodb-and-mongoose/" title="Mongodb与Mongoose关于schemaType的差异性" target="_blank">Mongodb与Mongoose关于schemaType的差异性</a><time datetime="2024-01-06T23:47:22.000Z" title="发表于 2024-01-07 07:47:22">2024-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2024/01/07/hello-world/" title="Hexo安装与配置服务升级"><img src= "/img/loading.gif" data-lazy-src="/2024/01/07/hello-world/default-cover.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Hexo安装与配置服务升级"/></a><div class="content"><a class="title" href="/2024/01/07/hello-world/" title="Hexo安装与配置服务升级" target="_blank">Hexo安装与配置服务升级</a><time datetime="2024-01-06T23:30:42.308Z" title="发表于 2024-01-07 07:30:42">2024-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/12/07/how-to-add-algolia-lib/" title="如何给你的CMS项目添加搜索服务"><img src= "/img/loading.gif" data-lazy-src="/2023/12/07/how-to-add-algolia-lib/hexo%E9%9B%86%E6%88%90algolia%E5%B0%81%E9%9D%A2.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="如何给你的CMS项目添加搜索服务"/></a><div class="content"><a class="title" href="/2023/12/07/how-to-add-algolia-lib/" title="如何给你的CMS项目添加搜索服务" target="_blank">如何给你的CMS项目添加搜索服务</a><time datetime="2023-12-07T10:56:18.000Z" title="发表于 2023-12-07 18:56:18">2023-12-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/09/25/the-use-of-nuxt3/" title="Nuxt3.0的学习与使用"><img src= "/img/loading.gif" data-lazy-src="/2023/09/25/the-use-of-nuxt3/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93%E6%A1%86%E6%9E%B6Nuxt%E5%B0%81%E9%9D%A2.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nuxt3.0的学习与使用"/></a><div class="content"><a class="title" href="/2023/09/25/the-use-of-nuxt3/" title="Nuxt3.0的学习与使用" target="_blank">Nuxt3.0的学习与使用</a><time datetime="2023-09-24T22:16:35.000Z" title="发表于 2023-09-25 06:16:35">2023-09-25</time></div></div></div></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/" style="font-size: 1.32em; color: rgb(43, 80, 135)">开发框架</a><a href="/tags/vue/" style="font-size: 1.42em; color: rgb(13, 26, 184)">vue</a><a href="/tags/webpack/" style="font-size: 1.4em; color: rgb(22, 127, 162)">webpack</a><a href="/tags/plugin/" style="font-size: 1.35em; color: rgb(176, 23, 25)">plugin</a><a href="/tags/%E6%80%BB%E7%BB%93/" style="font-size: 1.15em; color: rgb(92, 54, 181)">总结</a><a href="/tags/%E5%A4%8D%E7%9B%98/" style="font-size: 1.15em; color: rgb(11, 154, 162)">复盘</a><a href="/tags/css/" style="font-size: 1.4em; color: rgb(114, 130, 126)">css</a><a href="/tags/%E8%A7%84%E8%8C%83/" style="font-size: 1.15em; color: rgb(54, 57, 85)">规范</a><a href="/tags/javascript/" style="font-size: 1.45em; color: rgb(50, 114, 159)">javascript</a><a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 1.38em; color: rgb(167, 27, 72)">设计模式</a><a href="/tags/%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1/" style="font-size: 1.27em; color: rgb(14, 183, 7)">创建对象</a><a href="/tags/%E7%BB%93%E6%9E%84%E6%80%A7%E6%A8%A1%E5%BC%8F/" style="font-size: 1.22em; color: rgb(50, 13, 66)">结构性模式</a><a href="/tags/%E5%B7%A5%E5%85%B7/" style="font-size: 1.2em; color: rgb(53, 128, 143)">工具</a><a href="/tags/git/" style="font-size: 1.15em; color: rgb(26, 83, 51)">git</a><a href="/tags/%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98/" style="font-size: 1.15em; color: rgb(45, 42, 191)">微信支付</a><a href="/tags/%E5%BE%AE%E4%BF%A1%E5%95%86%E6%88%B7/" style="font-size: 1.15em; color: rgb(45, 133, 173)">微信商户</a><a href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" style="font-size: 1.3em; color: rgb(84, 172, 190)">浏览器</a><a href="/tags/background/" style="font-size: 1.15em; color: rgb(100, 184, 169)">background</a><a href="/tags/%E8%B0%83%E8%AF%95/" style="font-size: 1.17em; color: rgb(156, 3, 99)">调试</a><a href="/tags/ejs/" style="font-size: 1.17em; color: rgb(113, 161, 151)">ejs</a><a href="/tags/%E5%B7%A5%E5%85%B7%E6%8F%92%E4%BB%B6/" style="font-size: 1.2em; color: rgb(45, 62, 52)">工具插件</a><a href="/tags/grunt/" style="font-size: 1.2em; color: rgb(19, 173, 155)">grunt</a><a href="/tags/handlebars/" style="font-size: 1.2em; color: rgb(139, 145, 70)">handlebars</a><a href="/tags/assemble/" style="font-size: 1.17em; color: rgb(130, 67, 195)">assemble</a><a href="/tags/nodejs/" style="font-size: 1.2em; color: rgb(134, 39, 63)">nodejs</a><a href="/tags/express/" style="font-size: 1.15em; color: rgb(100, 24, 50)">express</a><a href="/tags/bootstrap/" style="font-size: 1.15em; color: rgb(3, 81, 78)">bootstrap</a><a href="/tags/%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" style="font-size: 1.2em; color: rgb(110, 75, 34)">编码规范</a><a href="/tags/codepen/" style="font-size: 1.15em; color: rgb(142, 166, 159)">codepen</a><a href="/tags/%E6%8A%80%E5%B7%A7/" style="font-size: 1.15em; color: rgb(56, 114, 187)">技巧</a><a href="/tags/eslint/" style="font-size: 1.15em; color: rgb(131, 115, 166)">eslint</a><a href="/tags/stylelint/" style="font-size: 1.17em; color: rgb(12, 125, 61)">stylelint</a><a href="/tags/prettier/" style="font-size: 1.17em; color: rgb(1, 6, 95)">prettier</a><a href="/tags/husky/" style="font-size: 1.17em; color: rgb(92, 6, 154)">husky</a><a href="/tags/commitlint/" style="font-size: 1.15em; color: rgb(81, 180, 1)">commitlint</a><a href="/tags/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" style="font-size: 1.22em; color: rgb(103, 63, 70)">读书笔记</a><a href="/tags/%E4%B8%AA%E4%BA%BA%E6%8F%90%E5%8D%87/" style="font-size: 1.25em; color: rgb(152, 86, 130)">个人提升</a><a href="/tags/%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6/" style="font-size: 1.15em; color: rgb(141, 151, 95)">自定义组件</a><a href="/tags/npm/" style="font-size: 1.22em; color: rgb(154, 168, 192)">npm</a><a href="/tags/function/" style="font-size: 1.17em; color: rgb(66, 120, 175)">function</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
<i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/12/"><span class="card-archive-list-date">十二月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/09/"><span class="card-archive-list-date">九月 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/07/"><span class="card-archive-list-date">七月 2023</span><span class="card-archive-list-count">8</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/06/"><span class="card-archive-list-date">六月 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/05/"><span class="card-archive-list-date">五月 2023</span><span class="card-archive-list-count">5</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">6</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">159</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2021-10-01T00:00:00.000Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">258.2k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-03-03T21:49:11.875Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('/img/banner.jpg')"><div id="footer-wrap"><div class="copyright">©2020 - 2024 By Genglin Zheng</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a><span class="footer-separator">|</span><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/">粤ICP备14102113号-1</a></div><div class="framework-info"><span>友情链接: </span><a target="_blank" rel="noopener" href="https://nodejs.91temaichang.com/">像java一样来思考nodejs</a><span class="footer-separator">|</span><a target="_blank" rel="noopener" href="https://sass.91temaichang.com/">像编写javascript一样来编写样式</a><span class="footer-separator">|</span><a target="_blank" rel="noopener" href="https://www.jhelp.net/">技术知识堂</a><span class="footer-separator">|</span><a target="_blank" rel="noopener" href="http://tech.jasonsoso.com/">Jason技术流水账</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><div class="js-pjax"></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="true"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css/dist/style.min.css"/><script src="https://cdn.jsdelivr.net/npm/@docsearch/js/dist/umd/index.min.js"></script><script>(() => {
docsearch(Object.assign({
appId: 'DAIJFFR2MZ',
apiKey: '35e7678a0ac8d9edd03d77d11a0e4b50',
indexName: '91temaichang',
container: '#docsearch',
}, ))
const handleClick = () => {
document.querySelector('.DocSearch-Button').click()
}
const searchClickFn = () => {
btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', handleClick)
}
searchClickFn()
window.addEventListener('pjax:complete', searchClickFn)
})()</script></div></div><script>"use strict";if("serviceWorker"in navigator){navigator.serviceWorker.register("service-worker.js").then((function(reg){reg.onupdatefound=function(){var installingWorker=reg.installing;installingWorker.onstatechange=function(){switch(installingWorker.state){case"installed":if(navigator.serviceWorker.controller){console.log("New or updated content is available.")}else{console.log("Content is now available offline!")}break;case"redundant":console.error("The installing service worker became redundant.");break}}}}))["catch"]((function(e){console.error("Error during service worker registration:",e)}))}</script></body></html>