-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
479 lines (336 loc) · 37.3 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
470
471
472
473
474
475
476
477
478
479
<!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.0, maximum-scale=1.0, user-scalable=no"><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="向往自由，追求自由，找寻自由"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://metabo6.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'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><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: false,
post: false
},
runtime: '',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'fancybox',
Snackbar: undefined,
source: {
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
}
},
isPhotoFigcaption: false,
islazyload: true,
isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: '随时奉陪',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2022-11-24 11:44:23'
}</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 detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><meta name="generator" content="Hexo 5.4.2"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/img/butterfly/index.jpeg" 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">30</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">22</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><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-tags"></i><span> 仿 win10</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 导航</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-folder-open"></i><span> 学习资料</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-archive"></i><span> 时间线</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-fish"></i><span> 摸鱼</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-gamepad"></i><span> 游戏</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-tools"></i><span> 工具</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-anchor"></i><span> 动画</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-place-of-worship"></i><span> 摸鱼大军</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-link"></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" id="page-header" style="background-image: url('/img/butterfly/index.jpeg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">随时奉陪</a></span><div id="menus"><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-tags"></i><span> 仿 win10</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 导航</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-folder-open"></i><span> 学习资料</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-archive"></i><span> 时间线</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-fish"></i><span> 摸鱼</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-gamepad"></i><span> 游戏</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-tools"></i><span> 工具</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-anchor"></i><span> 动画</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-place-of-worship"></i><span> 摸鱼大军</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-link"></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"><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"><a href="/posts/a5ae354f.html" title="数组、字符串常用方法"><img class="post_bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/js.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="数组、字符串常用方法"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/a5ae354f.html" title="数组、字符串常用方法">数组、字符串常用方法</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="2022-11-24T02:24:11.000Z" title="发表于 2022-11-24 10:24:11">2022-11-24</time></span></div><div class="content">数组常用方法1. push: 末尾添加元素
往数组最后面添加元素,参数可以是多个,依次添加
12const arr = [10,20,30]arr.push(40,50,60) // [10,20,30,40,50,60]
2. unshift: 开头添加元素
往数组开头添加元素, 参数也是可以是多个,依次添加
12const arr = [10,20,30]arr.unshift(40,50,60) // [40,50,60,10,20,30]
3. pop: 移除末尾元素
移除数组的最后一个元素,并返回该元素。pop() 方法会改变数组的长度,填写参数无效
12const arr = [10, 20, 30]arr.pop() // [10,20]
4. shift: 移除开头元素
移除数组的开头第一个元素,并返回该元素. shift () 方法会改变数组的长度,填写参数无效
12const arr = [10, 20, 30]arr.shift() // [20,30]
5. indexof: 查找元素
返回数组中某个指定的元素位置。将从头到尾地检索数组， ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/b0de96e1.html" title="CSS 总结"><img class="post_bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/css.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="CSS 总结"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/b0de96e1.html" title="CSS 总结">CSS 总结</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="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></span></div><div class="content">CSS 总结1. 基本概念css 中文名层叠样式表, 用来给页面中的 html 标签设置样式,有三种引入方式
123// 行内式, 写在标签的 style 属性中, 作用范围仅限于当前标签// 外联式, 写在单独 css 文件中, 通过 link 标签引入,可以作用于多个页面// 内嵌式, 写在 style 标签中, 作用范围为当前页面
2. 选择器
选择器名
特点
说明
span {}
设置后当前页面的所有同类标签都会生效
标签选择器
.box {}
通过类名,找到页面中所有带有该类名的标签,设置样式
类选择器
#box {}
通过id 属性值 找到页面中与之匹配的标签设置样式
id 选择器
* {}
页面中所有标签设置样式
通配符选择器
ul li {}
选择父元素中满足条件的后代元素,包括儿子/孙子/重孙子
后代选择器
div>h3
选择父元素子代中满足条件的元素,只包括子代
子代选择器
.box1, .box2 {}
同时选择多组标签设置相同样式,用逗号分隔
并集选择器
box1box2
选中同时满足多个选择器的 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/posts/f1991798.html" title="Git 总结"><img class="post_bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/git.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Git 总结"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/f1991798.html" title="Git 总结">Git 总结</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="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></span></div><div class="content">Git 总结是什么？
分布式版本管理工具
SVN：集中式版本管理工具
分布式 VS 集中式分布式：
每个用户都在本地拥有一个完整的仓库
优点：
如果任意服务器崩溃了，可以立即从用户手中 clone 一份完全一样的代码仓库出来，不用担心服务器崩溃
可以本地提交
集中式：
由一个代码服务器集中管理代码
优点：
代码必须存储在服务器上，如果没有服务器则无法提交和更新，代码安全性高
缺点：
如果服务器崩了，就废了
结论：前端领域更多的使用 Git 而不是 SVN。
Git 基本操作初始化仓库到推送至远程
初始化仓库
在当前目录下生成一个 .git 目录
当前目录下所有的文件都处于 Untracked 未追踪的
1git init
添加至暂存区
将当前目录所有文件都添加到暂存区
1git add .
提交至本地仓库
1git commit -m "提交日志"
推送至远程仓库
在 Gitee 或 Github 等平台创建一个远程仓库
配置 SSH Keys
关联远程仓库
123456# 添加关联远程仓库git remote a ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/50b39724.html" title="HTML 总结"><img class="post_bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/HTML.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="HTML 总结"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/50b39724.html" title="HTML 总结">HTML 总结</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="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></span></div><div class="content">HTML 总结htmlhtml 超文本标记语言, 专门用于网页的开发,主要是通过 html 标签对网页中的文本/图片/视频/音频等内容进行描述.
标签名
特点
说明
h1-h6
独占一行, 文字都有变大
标题标签, 一个页面只能有一个 h1 标签
独占一行, 段落之间有缝隙, 会自动换行
段落标签, 用于分段显示
单标签, 让文字强制换行,不会有缝隙
换行标签
单标签, 在页面中显示一条水平线
水平线标签, 分隔不同主题内容的水平线
/
加粗文字
strong 语义化更强烈
/
给文字添加下划线
ins 语义化更强烈
倾斜文字
em 语义化更强烈
给文字添加删除线
del 语义化更强烈
图片标签
属性名
特点
说明
src
指定需要展示的图片路径
alt
替换文本, 当图片加载失败时才显示的提示文本
title
提示文本, 鼠标悬停时显示的文本
width
图片宽度
只设置宽高中的一个, 另一个会等比例缩放
height
图片高度
如果同时设置可 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/posts/588ad959.html" title="JS 基础总结"><img class="post_bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/js.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS 基础总结"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/588ad959.html" title="JS 基础总结">JS 基础总结</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="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></span></div><div class="content">JS 基础总结1. 浏览器 JS 组成部分
ECMAScript : js 的核心 , 定义了 js 的语言规范 , 描述了基本语法和数据类型等
DOM : 文档对象模型, 通过起提供的 API 可以对页面节点进行移动 , 大小 , 添加删除等操作
BOM : 浏览器对象模型 , 通过BOM可以操作浏览器，比如：弹出框转、获取分辨率等
2. 常用输入与输出语句
alert() 弹出提示框
document.write() 页面输出
console.log() 控制台输出
prompt() 弹出输入框
comfirm() 弹出确认框
3. 变量 其原理是在内存中开辟一块存储数据的空间,将数据存储在内存中
只能以下划线/字母/$ 开头, 后面可以接任意数字/下划线/字母/$,
不能以JS的关键字作为变量名
严格区分大小写
起名要有意义，最好用英语名词作为变量名
4. 数据类型 当计算机在执行js代码的时候，会进行各种运算从而产生不同的数据。而不同数据的处理与存储方式都不一样，所以计算机会对 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/cac7ea72.html" title="NODE常见第三方包"><img class="post_bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/npm.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NODE常见第三方包"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/cac7ea72.html" title="NODE常见第三方包">NODE常见第三方包</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="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></span></div><div class="content">NODE 常见第三方包1. MySQL使用步骤 详见官网在Node中使用MySQL模块一共需要5个步骤：
加载 MySQL 模块
创建 MySQL 连接对象
连接 MySQL 服务器
执行SQL语句
关闭链接
123456789101112131415161718192021222324252627// 1. 加载mysql模块const mysql = require('mysql');// 2. 创建连接对象（设置连接参数）const conn = mysql.createConnection({ // 属性：值 host: 'localhost', user: 'root', password: '密码', database: '数据库名'});// 3. 连接到MySQL服务器conn.connect();// 4. 完成查询（增删改查）// 4. 完成增删改查let sql = 's ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/posts/4f68be61.html" title="React 总结"><img class="post_bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/react.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="React 总结"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/4f68be61.html" title="React 总结">React 总结</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="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></span></div><div class="content">React 总结1. 基本概念React 是用于构建用户界面的 js 库, react 全家桶才是框架.全家桶包括
react : 核心库
react-dom : dom 操作
react-router : 路由管理
redux: 集中状态管理
全球范围内 react 使用范围最广,使用人数最多,下载量也最大.附上三大框架下载趋势
react, vue, angular的下载趋势
react 特点:
声明式: 只需要描述 UI 的样子,就跟写 html 一样. 用类似 html 的语法定义页面,通过数据驱动视图, 高效更新数据并渲染 DOM
组件化: 组件用于表示页面中的部分内容, 是 react 中最重要的内容,组合复用多个组件就能实现完整页面功能
使用广: 使用 react/react-dom 可以开发 web 应用, 使用 react/react-native 可以开发移动端应用,还可以使用 react/react360 开发 VR 等.一次学习多次使用.众多大厂都在用
2. React 脚手架
官方开发的脚手架 create-react- ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/cd25c3da.html" title="React 移动端总结"><img class="post_bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/react.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="React 移动端总结"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/cd25c3da.html" title="React 移动端总结">React 移动端总结</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="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></span></div><div class="content">React 移动端总结该项目主要使用 react、redux、antd-mobile、axios、react-router、sass、ts、ahooks 库、lodash、websocket 等
antd-mobileantd-mobile 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。
使用：
下包
1yarn add antd-mobile
按需导入即可使用
1234567import { Button } from 'antd-mobile'const Login = () => ( <div> <Button color="primary">Button</Button> </div>)
antd-mobile主题定制antd-mobile 主题
src/index.scss 中：
123456789101112:root:root { --adm-color-primary: ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/posts/206a9599.html" title="React 项目总结"><img class="post_bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/react.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="React 项目总结"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/206a9599.html" title="React 项目总结">React 项目总结</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="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></span></div><div class="content">React 项目总结
该项目使用 react、axios、react-router-dom、sass、antd、react-quill 、Eslint 等
antd 使用
antd 是用于研发企业中后台产品的 React UI 库
使用步骤：下包 => 导入样式文件 => 组件内引入使用
使用小结：
Button 组件通过 htmlType 属性设置为 submit 按钮
Button 组件可以配合 useState 设置 loading 状态效果
表单组件中每项使用 block 属性设置 Input/Button 大小
表单校验需给 Form 设置 validateTrigger,给 Form.Item 设置 name 和 rules 属性
自定义校验规则，给 rules 属性设置 validator 函数， 值为 true 表示通过
收集表单数据：给 Form 添加 onFinish，给 Form.Item 添加 name，给 htmlType设为 submit
表单默认值：使用 initalValues 设置，只有初始化以及重置时 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/f2e91a06.html" title="TypeScript 总结"><img class="post_bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/ts.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="TypeScript 总结"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/f2e91a06.html" title="TypeScript 总结">TypeScript 总结</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="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></span></div><div class="content">TypeScript 总结1 . 基本概念概念
TS 是 JS 的超集 ， JS 所有的语法 TS 都支持，而且还额外添加了类型系统
TS 属于静态类型（指编译后执行）的编程语言，JS 属于动态类型（边编译边执行）的编程语言
使用原因
JS 类型系统存在一定历史缺陷，导致很多错误都是类型错误（type Error），且代码运行后才能发现，增加了 发现和查找 Bug 的时间，降低了开发效率
引入 TS 后，借助开发工具能在编写代码阶段就发现错误，降低和减少了 Bug 的出现，极大提升开发效率
使用方法
由于浏览器和 Node 不能直接识别 TS 代码，需使用编译工具将 TS 代码编译成 JS 代码
下包： yarn add global typescript / npm i typescript -g
将文件由 .js => .ts ，并为文件中变量添加 类型注解
运行命令 tsc 文件名 ，将 TS 文件转换为 JS 文件
执行转换后的 JS 文件
也可以使用 ts-node 包来简化使用步骤，详见官网
类型注解
在变量后面加上 ：类型 为变量 ...</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><a class="page-number" href="/page/3/#content-inner">3</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= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/img/butterfly/index.jpeg" 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 site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">30</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">22</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/metabo6"><i class="fab fa-github"></i><span>Follow Me</span></a></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">This is my Blog</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="/posts/a5ae354f.html" title="数组、字符串常用方法"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/js.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="数组、字符串常用方法"/></a><div class="content"><a class="title" href="/posts/a5ae354f.html" title="数组、字符串常用方法">数组、字符串常用方法</a><time datetime="2022-11-24T02:24:11.000Z" title="发表于 2022-11-24 10:24:11">2022-11-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/b0de96e1.html" title="CSS 总结"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/css.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="CSS 总结"/></a><div class="content"><a class="title" href="/posts/b0de96e1.html" title="CSS 总结">CSS 总结</a><time datetime="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/f1991798.html" title="Git 总结"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/git.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Git 总结"/></a><div class="content"><a class="title" href="/posts/f1991798.html" title="Git 总结">Git 总结</a><time datetime="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/50b39724.html" title="HTML 总结"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/HTML.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="HTML 总结"/></a><div class="content"><a class="title" href="/posts/50b39724.html" title="HTML 总结">HTML 总结</a><time datetime="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/588ad959.html" title="JS 基础总结"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/../../../../img/React%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%80%BB%E7%BB%93/js.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS 基础总结"/></a><div class="content"><a class="title" href="/posts/588ad959.html" title="JS 基础总结">JS 基础总结</a><time datetime="2022-11-24T02:22:36.000Z" title="发表于 2022-11-24 10:22:36">2022-11-24</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/CSS/" style="font-size: 1.1em; color: #999">CSS</a> <a href="/tags/Canvas/" style="font-size: 1.1em; color: #999">Canvas</a> <a href="/tags/Chrome/" style="font-size: 1.1em; color: #999">Chrome</a> <a href="/tags/Git/" style="font-size: 1.1em; color: #999">Git</a> <a href="/tags/HTML/" style="font-size: 1.1em; color: #999">HTML</a> <a href="/tags/Hexo/" style="font-size: 1.1em; color: #999">Hexo</a> <a href="/tags/Node/" style="font-size: 1.3em; color: #99a1ac">Node</a> <a href="/tags/React/" style="font-size: 1.1em; color: #999">React</a> <a href="/tags/React-%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 1.1em; color: #999">React 移动端</a> <a href="/tags/React%E9%A1%B9%E7%9B%AE/" style="font-size: 1.1em; color: #999">React项目</a> <a href="/tags/SVN/" style="font-size: 1.1em; color: #999">SVN</a> <a href="/tags/TypeScript/" style="font-size: 1.1em; color: #999">TypeScript</a> <a href="/tags/Vue2/" style="font-size: 1.1em; color: #999">Vue2</a> <a href="/tags/Vue3/" style="font-size: 1.1em; color: #999">Vue3</a> <a href="/tags/WEB-API/" style="font-size: 1.1em; color: #999">WEB API</a> <a href="/tags/WeChat/" style="font-size: 1.5em; color: #99a9bf">WeChat</a> <a href="/tags/jQuery/" style="font-size: 1.1em; color: #999">jQuery</a> <a href="/tags/javascript/" style="font-size: 1.1em; color: #999">javascript</a> <a href="/tags/js/" style="font-size: 1.5em; color: #99a9bf">js</a> <a href="/tags/react-%E6%8A%A5%E9%94%99/" style="font-size: 1.1em; color: #999">react 报错</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/" style="font-size: 1.1em; color: #999">数据可视化</a> <a href="/tags/%E7%A7%BB%E5%8A%A8-web/" style="font-size: 1.1em; color: #999">移动 web</a></div></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/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">22</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/10/"><span class="card-archive-list-date">十月 2022</span><span class="card-archive-list-count">8</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">30</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">93k</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="2022-11-24T03:44:23.568Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2020 - 2022 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></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="回到顶部"><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.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script>function panguFn () {
if (typeof pangu === 'object') pangu.autoSpacingPage()
else {
getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
.then(() => {
pangu.autoSpacingPage()
})
}
}
function panguInit () {
if (false){
GLOBAL_CONFIG_SITE.isPost && panguFn()
} else {
panguFn()
}
}
document.addEventListener('DOMContentLoaded', panguInit)</script><div class="js-pjax"><script>function subtitleType () {
if (true) {
window.typed = new Typed("#subtitle", {
strings: ["你在抱怨什么呢","为明天到来的事，说人生像是没有意义","没有选择会是唯一的路","这不是你自己的问题，人终归要好好去生活"],
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 src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script><script src="/js/weather.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>