-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
469 lines (367 loc) · 61.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
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>满天鑫 - 有些梦想虽然遥不可及，但不是不可能实现。只要我足够的强。</title><meta name="author" content="满天鑫"><meta name="copyright" content="满天鑫"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="主要是前端技术栈的文章，涉及到了面试和源码、原理的知识，同时有一些生活类博文。">
<meta property="og:type" content="website">
<meta property="og:title" content="满天鑫">
<meta property="og:url" content="https://smanman.github.io/index.html">
<meta property="og:site_name" content="满天鑫">
<meta property="og:description" content="主要是前端技术栈的文章，涉及到了面试和源码、原理的知识，同时有一些生活类博文。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/202406071141762.jpg">
<meta property="article:author" content="满天鑫">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/202406071141762.jpg"><link rel="shortcut icon" href="https://lvxueyangboke.oss-cn-beijing.aliyuncs.com/images/20210805191028.png"><link rel="canonical" href="https://smanman.github.io/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><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'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '天',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'fancybox',
Snackbar: undefined,
source: {
jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
},
fancybox: {
js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
}
},
isPhotoFigcaption: false,
islazyload: false,
isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: '满天鑫',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2024-06-07 12:00:31'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => 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()
}
document.head.appendChild(script)
})
win.activateDarkMode = function () {
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 = function () {
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 fontSizeVal = saveToLocal.get('global-font-size')
if (fontSizeVal !== undefined) {
document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
}
const detectApple = () => {
if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LVXUEYANGTiger/blog@main/ali_icon.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LVXUEYANGTiger/blog@main/mogai.css"><link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="满天鑫" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="wizard-scene"><div class="wizard-objects"><div class="wizard-square"></div><div class="wizard-circle"></div><div class="wizard-triangle"></div></div><div class="wizard"><div class="wizard-body"></div><div class="wizard-right-arm"><div class="wizard-right-hand"></div></div><div class="wizard-left-arm"><div class="wizard-left-hand"></div></div><div class="wizard-head"><div class="wizard-beard"></div><div class="wizard-face"><div class="wizard-adds"></div></div><div class="wizard-hat"><div class="wizard-hat-of-the-hat"></div><div class="wizard-four-point-star --first"></div><div class="wizard-four-point-star --second"></div><div class="wizard-four-point-star --third"></div></div></div></div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/202406071141762.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">99</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">38</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">31</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-shouyex"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-zuixinwenzhang_huaban"></i><span> 找文章</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw iconfont icon-fenlei1"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw iconfont icon-biaoqian1"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw iconfont icon-shijianzhou"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-shenghuo"></i><span> 生活</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/timeline/"><i class="fa-fw iconfont icon-shijianzhou"></i><span> 时间轴</span></a></li><li><a class="site-page child" href="/link/"><i class="fa-fw iconfont icon-lianjie"></i><span> 友人帐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-gerenzhongxin"></i><span> 关于笔者</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">满天鑫</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><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 iconfont icon-shouyex"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-zuixinwenzhang_huaban"></i><span> 找文章</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw iconfont icon-fenlei1"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw iconfont icon-biaoqian1"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw iconfont icon-shijianzhou"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-shenghuo"></i><span> 生活</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/timeline/"><i class="fa-fw iconfont icon-shijianzhou"></i><span> 时间轴</span></a></li><li><a class="site-page child" href="/link/"><i class="fa-fw iconfont icon-lianjie"></i><span> 友人帐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-gerenzhongxin"></i><span> 关于笔者</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">满天鑫</h1><div id="site-subtitle"><span id="subtitle"></span></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_radius"><a href="/post/2c6eee95.html" title="Ajax快速入门"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211108212044.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Ajax快速入门"></a></div><div class="recent-post-info"><a class="article-title" href="/post/2c6eee95.html" title="Ajax快速入门">Ajax快速入门</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 class="post-meta-date-created" datetime="2021-12-08T07:27:00.000Z" title="发表于 2021-12-08 15:27:00">2021-12-08</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-11-27T09:16:29.828Z" title="更新于 2022-11-27 17:16:29">2022-11-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/java%E5%AD%A6%E4%B9%A0/">java学习</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/java%E5%AD%A6%E4%B9%A0/Ajax%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/">Ajax快速入门</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/Ajax/">Ajax</a></span></div><div class="content">1、Ajax快速入门1.1、AJAX介绍
AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。
一般的网页如果需要更新内容，必需重新加载个页面。
而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。
1.2、原生JS实现AJAX
代码实现
import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebSe ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/post/72d799e.html" title="Node 第 7 天笔记"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211004082041.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 7 天笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/post/72d799e.html" title="Node 第 7 天笔记">Node 第 7 天笔记</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 class="post-meta-date-created" datetime="2021-11-19T14:43:00.000Z" title="发表于 2021-11-19 22:43:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-02-14T06:21:14.278Z" title="更新于 2022-02-14 14:21:14">2022-02-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/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/Node/">Node</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Node/">Node</a></span></div><div class="content">Node 第 7 天1. 学习目标◆ 完成登录功能的开发
◆ 能够获取用户的信息并重置密码和头像
2. 登录功能2.1 实现步骤
检测表单数据是否合法
根据用户名查询用户的数据
判断用户输入的密码是否正确
生成 JWT 的 Token 字符串
2.2 检测表单数据是否合法
将 /router/user.js 中 登录 的路由代码修改进行修改
// 注册新用户router.post('/reguser', expressJoi(reg_login_schema), userHandle.regUser)// 登录功能router.post('/login', expressJoi(reg_login_schema), userHandle.login)
2.3 根据用户名查询用户的数据
接收表单的数据
// 接收表单传递过来的数据const userInfo = req.body
定义 sql 语句
// 定义 sql 语句const sql = `select * from ev_users ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/post/94d58d58.html" title="Node 第 8 天笔记"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211108212025.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 8 天笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/post/94d58d58.html" title="Node 第 8 天笔记">Node 第 8 天笔记</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 class="post-meta-date-created" datetime="2021-11-19T14:43:00.000Z" title="发表于 2021-11-19 22:43:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-11-27T09:16:38.989Z" title="更新于 2022-11-27 17:16:38">2022-11-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/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/Node/">Node</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Node/">Node</a></span></div><div class="content">Node 第 8 天1. 学习目标◆ 完成获取文章分类列表的功能◆ 完成新增文章分类的功能◆ 完成根据 ID 删除文章分类的功能◆ 完成根据 ID 获取文章分类的功能◆ 完成根据 ID 更新文章分类的功能◆ 完成发布新文章的功能
2. 新建 ev_article_cate 数据表2.1 创建表结构
2.2 新增两条初始化的数据
3. 获取文章分类列表3.1 实现步骤
初始化路由模块
初始化路由处理函数模块
获取文章分类列表数据
3.2 初始化路由模块
创建 /router/artcate.js 路由模块，并初始化如下的代码结构
// // 导入 expressconst express = require('express')// 创建路由对象const router = express.Router()// 获取文章分类的列表数据router.get('/cates', (req, res) => { res.send('ok')})// 向外共享路由对象module.exports = ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/post/c6a3a65e.html" title="Node 第 6 天笔记"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211108212035.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 6 天笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/post/c6a3a65e.html" title="Node 第 6 天笔记">Node 第 6 天笔记</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 class="post-meta-date-created" datetime="2021-11-19T14:42:00.000Z" title="发表于 2021-11-19 22:42:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-11-27T09:16:38.946Z" title="更新于 2022-11-27 17:16:38">2022-11-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/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/Node/">Node</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Node/">Node</a></span></div><div class="content">Node 第 6 天1. 学习目标◆ 前后端的身份认证
◆ 能够了解 Session 的实现原理
◆ 能够了解 JWT 的实现原理
◆ 大事件项目初始化
◆ 大事件注册新用户功能
2. web 开发模式2.1 主流的两种开发模式
基于服务端渲染的传统 Web 开发模式
基于前后端分离的新型 Web 开发模式
2.2 了解服务端渲染的概念以及优缺点
服务端渲染的概念：服务器发送给客户端的 HTML 页面，是在服务器通过字符串的拼接动态生成的。因此，客户端不需要使用 Ajax 这样的技术额外请求页面的数据
服务端渲染的优点
前端耗时少。因为服务器端负责动态生成 HTML 内容，浏览器只需要直接渲染页面即可。尤其是移动端，更省电
有利于SEO。因为服务器端响应的是完整的 HTML 页面内容，所以爬虫更容易爬取获得信息，更有利于SEO
服务端渲染的缺点
占用服务器端资源。即服务器端完成 HTML 页面内容的拼接，如果请求较多，会对服务器造成一定的访问压力
不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，尤其对于前端复杂度 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/post/5f41c05f.html" title="Node 第 5 天笔记"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211004082110.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 5 天笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/post/5f41c05f.html" title="Node 第 5 天笔记">Node 第 5 天笔记</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 class="post-meta-date-created" datetime="2021-11-19T14:41:00.000Z" title="发表于 2021-11-19 22:41:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-11-27T09:16:38.907Z" title="更新于 2022-11-27 17:16:38">2022-11-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/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/Node/">Node</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Node/">Node</a></span></div><div class="content">Node 第 5 天1. 学习目标◆ 能够知道如何配置 MySQL 数据库环境
◆ 能够认识并使用常见的 SQL 语句操作数据库
◆ 能够在项目中操作 MySQL 数据库
2. 数据库的基本概念2.1 什么是数据库
数据库（database）是用来组织、存储和管理数据的仓库
为了方便管理互联网世界中的数据，就有了数据库管理系统的概念（简称：数据库）。用户可以对数据库中的数据进行新增、查询、更新、删除等操作
2.2 常见的数据库以及分类
常见的数据库分类下面几种
MySQL 数据库（目前使用最广泛、流行度最高的开源免费数据库；Community + Enterprise）
Oracle 数据库（收费）
SQL Server 数据库（收费）
Mongodb 数据库 (Community + Enterprise)
数据库分类
传统数据库(关系型数据库或SQL数据库)
MySQL、Oracle、SQL Server，这三者的设计理念相同，用法比较类似
新型数据库(非关系数据库或NoSQL数据库)
Mongodb，它在一定程度上弥补了传统型数据库的缺陷
2.3 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/post/9ecf1f9f.html" title="Node 第 4 天笔记"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211004082121.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 4 天笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/post/9ecf1f9f.html" title="Node 第 4 天笔记">Node 第 4 天笔记</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 class="post-meta-date-created" datetime="2021-11-19T14:40:00.000Z" title="发表于 2021-11-19 22:40:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-11-27T09:16:38.867Z" title="更新于 2022-11-27 17:16:38">2022-11-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/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/Node/">Node</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Node/">Node</a></span></div><div class="content">Node 第 4 天1. 学习目标◆ 能够熟练 express 路由的使用
◆ 掌握中间件的使用方式
◆ 能够说出中间件分为哪几类
◆ 了解如何自定义中间件
◆ 能够基于 exprss 写接口
◆ 能够说出解决跨域问题的方法 cors
◆ 掌握如何实现 JSONP 接口
2. Express 路由2.1 路由的概念
路由就是映射关系
根据不同的用户 URL 请求，返回不同的内容
本质：URL 请求地址与服务器资源之间的对应关系
<img src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211119195825.png" style="zoom:67%;" />
2.2 Express 中的路由
在 Express 中，路由指的是客户端的请求与服务器处理函数之间的映射关系
Express 中的路由分 3 部分组成，分别是请求的类型、请求的 URL 地址、处理函数
Express 中的路由的例子
...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/post/40cf0c06.html" title="快来地学习canvas吧"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211004082159.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="快来地学习canvas吧"></a></div><div class="recent-post-info"><a class="article-title" href="/post/40cf0c06.html" title="快来地学习canvas吧">快来地学习canvas吧</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 class="post-meta-date-created" datetime="2021-11-19T14:39:00.000Z" title="发表于 2021-11-19 22:39:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-11-27T09:16:30.311Z" title="更新于 2022-11-27 17:16:30">2022-11-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/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/canvas/">canvas</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/canvas/">canvas</a></span></div><div class="content">Canvas概述<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。
创建Canvas<canvas>会创建一个固定大小的画布，会公开一个或多个 渲染上下文(画笔)，使用 渲染上下文来绘制和处理要展示的内容。
<canvas id="canvas" width="200" height="200"></canvas>
其中width和height并不是指canvas的真正尺寸，而是指canvas的精度，即将整个画布平分为200*200个像素点，真正指定canvas尺寸大小可以由CSS指定
#canvas { width: 500px; height: 500px;}
渲染上下文let canvas = document.getElementById('canvas') // ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/post/3d42c651.html" title="PM2一键部署"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211004082159.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="PM2一键部署"></a></div><div class="recent-post-info"><a class="article-title" href="/post/3d42c651.html" title="PM2一键部署">PM2一键部署</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 class="post-meta-date-created" datetime="2021-11-19T14:39:00.000Z" title="发表于 2021-11-19 22:39:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-11-20T14:31:03.568Z" title="更新于 2021-11-20 22:31:03">2021-11-20</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/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2/">构建部署</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2/">构建部署</a></span></div><div class="content">PM2一键部署http://pm2.keymetrics.io/
PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。
好处
无需通过手工或是ftp的方式把本地代码拷贝到服务器上
无需手工启动或是重启远程服务器的Node服务
项目的升级及迭代非常方便
具有负载均衡功能
pm2安装npm i pm2 -g
指令# 启动pm2 start xxx# 停止pm2 stop xxx# 重启pm2 restart xxx# 查看列表pm2 list...其它参考:http://pm2.keymetrics.io/docs/usage/quick-start/#cheatsheet
前提
购买阿里云服务器，生成CentOS7.x的系统
在CentOS7.x中安装必要的软件 Node、MongoDB、Apache、MySQL、FTPServer…
参考:https://github.com/Duanzihuang/linuxtutorial
本地和服务器安装pm2全局包
对阿里云服务器的安全组规则进行配置
...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/post/22cbabe6.html" title="H5新API"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211004082010.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="H5新API"></a></div><div class="recent-post-info"><a class="article-title" href="/post/22cbabe6.html" title="H5新API">H5新API</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 class="post-meta-date-created" datetime="2021-11-19T14:39:00.000Z" title="发表于 2021-11-19 22:39:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-11-20T14:16:53.382Z" title="更新于 2021-11-20 22:16:53">2021-11-20</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/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/H5/">H5</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/H5/">H5</a></span></div><div class="content">1 网络状态我们可以通过window.navigator.onLine来检测，用户当前的网络状况，返回一个布尔值， 但是不同浏览器会存在差异
所以HTML5 给我们提供了2个事件 online 和 offline
online用户网络连接时被调用
offline用户网络断开时被调用
他们监听的对象都是window
2 全屏HTML5规范允许用户自定义网页上任一元素全屏显示。
1、Node.requestFullScreen() 开启全屏显示
2、Node.cancelFullScreen() 关闭全屏显示
由于其兼容性原因，不同浏览器需要添加前缀如：
webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。
Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
ms 微软 msRequestFullscreen
3、document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.w ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/post/89c27a45.html" title="Gulp--基于流的自动化构建工具"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211004082302.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Gulp--基于流的自动化构建工具"></a></div><div class="recent-post-info"><a class="article-title" href="/post/89c27a45.html" title="Gulp--基于流的自动化构建工具">Gulp--基于流的自动化构建工具</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 class="post-meta-date-created" datetime="2021-11-19T14:39:00.000Z" title="发表于 2021-11-19 22:39:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-05-21T12:49:33.712Z" title="更新于 2022-05-21 20:49:33">2022-05-21</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/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2/">构建部署</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2/">构建部署</a></span></div><div class="content">Gulp–基于流的自动化构建工具基本概念官网: https://gulpjs.com/中文网址: https://www.gulpjs.com.cn/Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目。
工作原理以流的形式，去执行构建项目的构建工作
作用
文件压缩
文件合并
文件指纹
…
优点
易于使用
通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
构建快速
利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
插件高质
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
易于学习
通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
使用步骤1、在项目根目录创建一个 gulpfile.js的配置文件2、安装构建所需要的包 npm i @babel/core @babel/preset-env gulp gulp-babel gulp-clean ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/post/76016aa3.html" title="H5项目"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211108212120.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="H5项目"></a></div><div class="recent-post-info"><a class="article-title" href="/post/76016aa3.html" title="H5项目">H5项目</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 class="post-meta-date-created" datetime="2021-11-19T14:39:00.000Z" title="发表于 2021-11-19 22:39:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-11-27T09:16:31.455Z" title="更新于 2022-11-27 17:16:31">2022-11-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/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/H5/">H5</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/H5/">H5</a></span></div><div class="content">
学习目标:
能够说出fullpage插件的使用基本思路
能写出购物案例屏幕滚动效果及其侧边栏制作
能写出第一屏布局及其动画效果
能写出第二屏布局及其动画效果
能写出第三屏布局及其动画效果
能写出第四、五、六、七屏布局及其动画效果
能写出第八屏布局及其动画效果
能写出添加键盘滚动以及重新开始播放动画
购物网站宣传页面
案例目的：
复习—复习前面学过的HTML5+CSS3
综合—综合运用jquery完成案例
拓展—可以做宣传页面或者个人简历
fullpage 全屏插件全屏滚动效果，原生js也很好实现，主要是用 mousewheel 鼠标滚轮滚动事件， 来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效果简单，但是兼容性很差，要做很多兼容处理及比较麻烦啦！（了解一下，有兴趣的同学可以研究一下）
fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。
github 官网 https://github.com/alvarotrigo/fullPage.js
中文演示地址 http://www. ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/post/b7f40a1c.html" title="Node 第 3 天笔记"> <img class="post_bg" src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211108212104.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 3 天笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/post/b7f40a1c.html" title="Node 第 3 天笔记">Node 第 3 天笔记</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 class="post-meta-date-created" datetime="2021-11-19T14:39:00.000Z" title="发表于 2021-11-19 22:39:00">2021-11-19</time><span class="article-meta__separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-11-27T09:16:38.827Z" title="更新于 2022-11-27 17:16:38">2022-11-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/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/Node/">Node</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%89%8D%E7%AB%AF/">前端</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Node/">Node</a></span></div><div class="content">Node 第 3 天1. 学习目标◆ 能够说出 pageage.json 文件中属性的含义
◆ 知道怎么解决包下载慢的问题
◆ 了解如何开发包
◆ 了解如何发布包
◆ 熟练模块的加载机制
◆ 熟练 express基本操作
2. 包管理配置2.1 包管理配置的概念npm 规定，在项目根目录中，必须提供一个叫做 package.json 的包管理配置文件，用来记录与项目有关的一些配置信息，例如：
项目的名称、版本号、描述等
项目中都用到了哪些包
哪些包只会在开发期间会用到
哪些包在开发和部署时都需要用到
2.2 理解 package.json 配置文件的作用2.2.1 多人协作的问题
包的体积
整个项目的体积是 30.4M
第三方包的体积是 28.8M
项目源代码的体积 1.6M
遇到的问题
第三方包的体积过大，不方便团队成员之间共享项目源代码
解决方案
共享时剔除node_modules
2.2.2 如何记录项目中安装了哪些包
在项目根目录中，创建一个叫做 **package.json**的配置文件，即可用来记录项目中安装了哪些包。从而方 ...</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/9/#content-inner">9</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="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/202406071141762.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">满天鑫</div><div class="author-info__description">主要是前端技术栈的文章，涉及到了面试和源码、原理的知识，同时有一些生活类博文。</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">99</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">38</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">31</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/smanman/"><i class="fab fa-github"></i><span>我的Github</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><p>1、笔者的更多信息可以点击右上方的<a href="https://smanman.github.io/about/">关于作者</a></p><p>2、本博客的技术文章均已上传至<a target="_blank" rel="noopener" href="https://github.com/smanman/">个人项目</a> </p> <p>3、更多公告，更新日志，写作计划 请点开<a href="https://smanman.github.io/timeline/">时间轴【8月2号更新】</a>。以后公告，更新日志，写作计划均在这里发布</p></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="/post/2c6eee95.html" title="Ajax快速入门"><img src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211108212044.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Ajax快速入门"/></a><div class="content"><a class="title" href="/post/2c6eee95.html" title="Ajax快速入门">Ajax快速入门</a><time datetime="2021-12-08T07:27:00.000Z" title="发表于 2021-12-08 15:27:00">2021-12-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/72d799e.html" title="Node 第 7 天笔记"><img src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211004082041.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 7 天笔记"/></a><div class="content"><a class="title" href="/post/72d799e.html" title="Node 第 7 天笔记">Node 第 7 天笔记</a><time datetime="2021-11-19T14:43:00.000Z" title="发表于 2021-11-19 22:43:00">2021-11-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/94d58d58.html" title="Node 第 8 天笔记"><img src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211108212025.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 8 天笔记"/></a><div class="content"><a class="title" href="/post/94d58d58.html" title="Node 第 8 天笔记">Node 第 8 天笔记</a><time datetime="2021-11-19T14:43:00.000Z" title="发表于 2021-11-19 22:43:00">2021-11-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/c6a3a65e.html" title="Node 第 6 天笔记"><img src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211108212035.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 6 天笔记"/></a><div class="content"><a class="title" href="/post/c6a3a65e.html" title="Node 第 6 天笔记">Node 第 6 天笔记</a><time datetime="2021-11-19T14:42:00.000Z" title="发表于 2021-11-19 22:42:00">2021-11-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/5f41c05f.html" title="Node 第 5 天笔记"><img src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211004082110.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 5 天笔记"/></a><div class="content"><a class="title" href="/post/5f41c05f.html" title="Node 第 5 天笔记">Node 第 5 天笔记</a><time datetime="2021-11-19T14:41:00.000Z" title="发表于 2021-11-19 22:41:00">2021-11-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/9ecf1f9f.html" title="Node 第 4 天笔记"><img src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211004082121.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node 第 4 天笔记"/></a><div class="content"><a class="title" href="/post/9ecf1f9f.html" title="Node 第 4 天笔记">Node 第 4 天笔记</a><time datetime="2021-11-19T14:40:00.000Z" title="发表于 2021-11-19 22:40:00">2021-11-19</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
<i class="fas fa-folder-open"></i>
<span>分类</span>
</div>
<ul class="card-category-list" id="aside-cat-list">
<li class="card-category-list-item parent"><a class="card-category-list-link" href="/categories/java%E5%AD%A6%E4%B9%A0/"><span class="card-category-list-name">java学习</span><span class="card-category-list-count">1</span><i class="fas fa-caret-left "></i></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/java%E5%AD%A6%E4%B9%A0/Ajax%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/"><span class="card-category-list-name">Ajax快速入门</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item parent"><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/"><span class="card-category-list-name">前端</span><span class="card-category-list-count">98</span><i class="fas fa-caret-left "></i></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/CSS/"><span class="card-category-list-name">CSS</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/H5/"><span class="card-category-list-name">H5</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/HTML/"><span class="card-category-list-name">HTML</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/Node/"><span class="card-category-list-name">Node</span><span class="card-category-list-count">8</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/Node-js%E8%BF%9B%E9%98%B6/"><span class="card-category-list-name">Node.js进阶</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/Promise/"><span class="card-category-list-name">Promise</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/SASS/"><span class="card-category-list-name">SASS</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/TypeScript/"><span class="card-category-list-name">TypeScript</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/Vue/"><span class="card-category-list-name">Vue</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/Vue%E5%90%8E%E5%8F%B0%E7%94%B5%E5%95%86%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE/"><span class="card-category-list-name">Vue后台电商管理项目</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/Vue%E7%A7%BB%E5%8A%A8%E9%A1%B9%E7%9B%AE/"><span class="card-category-list-name">Vue移动项目</span><span class="card-category-list-count">10</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/WebAPI/"><span class="card-category-list-name">WebAPI</span><span class="card-category-list-count">7</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/canvas/"><span class="card-category-list-name">canvas</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/echarts/"><span class="card-category-list-name">echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/jQuery/"><span class="card-category-list-name">jQuery</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/javascript/"><span class="card-category-list-name">javascript</span><span class="card-category-list-count">12</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/sass%E4%B8%AD%E5%8F%B0%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE/"><span class="card-category-list-name">sass中台管理项目</span><span class="card-category-list-count">14</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/uniapp/"><span class="card-category-list-name">uniapp</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/webpack/"><span class="card-category-list-name">webpack</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"><span class="card-category-list-name">前端性能优化</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E5%93%81%E4%BC%98%E8%B4%AD/"><span class="card-category-list-name">品优购</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E5%A4%A7%E4%BA%8B%E4%BB%B6%E9%A1%B9%E7%9B%AE/"><span class="card-category-list-name">大事件项目</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"><span class="card-category-list-name">小程序</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/"><span class="card-category-list-name">服务端渲染</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2/"><span class="card-category-list-name">构建部署</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B7%B1%E5%85%A5Vue/"><span class="card-category-list-name">深入Vue</span><span class="card-category-list-count">5</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8web%E5%BC%80%E5%8F%91/"><span class="card-category-list-name">移动web开发</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%A1%B9%E7%9B%AE%E8%B4%A8%E9%87%8F%E7%9B%91%E6%B5%8B/"><span class="card-category-list-name">项目质量监测</span><span class="card-category-list-count">1</span></a></li></ul></li>
</ul></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/12/"><span class="card-archive-list-date">十二月 2021</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/2021/11/"><span class="card-archive-list-date">十一月 2021</span><span class="card-archive-list-count">96</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/08/"><span class="card-archive-list-date">八月 2021</span><span class="card-archive-list-count">2</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">99</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2023-01-26T16:00:00.000Z"></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">814.3k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-07T04:00:30.203Z"></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2020 - 2024 By 满天鑫</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></div><div class="framework-info"><img src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/202301132049386.png"/><span> </span><a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">晋ICP备2022012091号-1</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">简</button><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="chat_btn" type="button" title="rightside.chat_btn"><i class="fas fa-sms"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
endLoading: () => {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>function subtitleType () {
if (true) {
var typed = new Typed("#subtitle", {
strings: "这里的一切都有始有终，却能容纳所有的不期而遇和久别重逢，世界灿烂，欢迎回家。".split(","),
startDelay: 300,
typeSpeed: 150,
loop: true,
backSpeed: 50
})
} else {
document.getElementById("subtitle").innerHTML = '这里的一切都有始有终，却能容纳所有的不期而遇和久别重逢，世界灿烂，欢迎回家。'
}
}
if (true) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
}
} else {
subtitleType()
}</script></div><script defer src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script><script src="//code.tidio.co/smwivpnwumemac2wohardi3d3gpud1ag.js" async="async"></script><script>function onTidioChatApiReady() {
window.tidioChatApi.hide();
window.tidioChatApi.on("close", function() {
window.tidioChatApi.hide();
});
}
if (window.tidioChatApi) {
window.tidioChatApi.on("ready", onTidioChatApiReady);
} else {
document.addEventListener("tidioChat-ready", onTidioChatApiReady);
}
var chatBtnFn = () => {
document.getElementById("chat_btn").addEventListener("click", function(){
window.tidioChatApi.show();
window.tidioChatApi.open();
});
}
chatBtnFn()
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>