-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
940 lines (444 loc) · 898 KB
/
search.xml
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
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Docker之容器</title>
<link href="/2022/01/06/Docker%E4%B9%8B%E5%AE%B9%E5%99%A8/"/>
<url>/2022/01/06/Docker%E4%B9%8B%E5%AE%B9%E5%99%A8/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2F581f1fdc52024d3994a5699eee607009.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644045266&t=53bf23ad024e5a2049a7877522d9c124"></p><h3 id="容器介绍"><a href="#容器介绍" class="headerlink" title="容器介绍"></a>容器介绍</h3><p>镜像（<code>Image</code>）和容器（<code>Container</code>）的关系，就像是面向对象程序设计中的<code>类</code>和<code>实例</code>一样，镜像是静态的定义，容器是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等。</p><blockquote><p>如果提示权限不足，在每行命令前添加 <code>sudo</code> ；本文中大部分命令已经自动添加。</p></blockquote><p>若不想输入 <code>sudo</code> 可配置以下内容：</p><ol><li><code>sudo groupadd docker</code> #添加名字为docker用户组 默认可能有了docker组了</li><li><code>sudo gpasswd -a $USER docker</code> #将登陆用户加入到docker用户组中</li><li><code>newgrp docker</code> #更新用户组</li><li><code>docker ps</code> #测试docker命令是否可以使用sudo正常使用</li></ol><h3 id="查看容器"><a href="#查看容器" class="headerlink" title="查看容器"></a>查看容器</h3><p>显示正在运行的容器</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker ps</span><br></pre></td></tr></table></figure><p>显示所有运行过的容器，包括已经不运行的容器</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker ps -a</span><br></pre></td></tr></table></figure><blockquote><p><strong>注意：管理docker容器可以通过名称，也可以通过ID</strong></p></blockquote><h3 id="启动容器"><a href="#启动容器" class="headerlink" title="启动容器"></a>启动容器</h3><ul><li>守护进程方式启动容器</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run [参数] docker_image [执行的命令]</span><br></pre></td></tr></table></figure><ul><li><code>-d</code> 让Docker容器在后台以守护形式运行。</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker ps -d redis</span><br></pre></td></tr></table></figure><ul><li><p><code>-t </code> 参数让Docker分配一个伪终端并绑定到容器的标准输入上</p></li><li><p><code>-i</code> 则让容器的标准输入保持打开</p></li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -i -t redis /<span class="built_in">bin</span>/bash</span><br></pre></td></tr></table></figure><ul><li><code>--name</code> 选项来给容器设置一个名字并打开运行</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run --name redis -dit redis:v1</span><br></pre></td></tr></table></figure><h5 id="常用搭配命令"><a href="#常用搭配命令" class="headerlink" title="常用搭配命令"></a>常用搭配命令</h5><ul><li>启动并直接进入容器中</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -it redis:v1 /<span class="built_in">bin</span>/bash <span class="comment"># redis:v1 为容器</span></span><br></pre></td></tr></table></figure><ul><li>启动起别名并进入容器中</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run --name 容器别名 -d redis:v1 /<span class="built_in">bin</span>/bash <span class="comment"># redis:v1 为容器</span></span><br></pre></td></tr></table></figure><h3 id="操作容器"><a href="#操作容器" class="headerlink" title="操作容器"></a>操作容器</h3><h6 id="启动已终止的容器"><a href="#启动已终止的容器" class="headerlink" title="启动已终止的容器"></a>启动已终止的容器</h6><p>在生产过程中，常常会出现运行和不运行的容器，我们使用 start 命令开起一个已关闭的容器</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker start [container_id]</span><br></pre></td></tr></table></figure><h6 id="关闭容器"><a href="#关闭容器" class="headerlink" title="关闭容器"></a>关闭容器</h6><p>在生产中，我们会以为临时情况，要关闭某些容器，我们使用 stop 命令来关闭某个容器</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker stop [container_id]</span><br></pre></td></tr></table></figure><h6 id="重启停止的容器"><a href="#重启停止的容器" class="headerlink" title="重启停止的容器"></a>重启停止的容器</h6><p>停止的容器可以通过 docker restart 重启：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker restart [container_id]</span><br></pre></td></tr></table></figure><h3 id="删除容器"><a href="#删除容器" class="headerlink" title="删除容器"></a>删除容器</h3><h5 id="正常删除容器-–-删除已经关闭的"><a href="#正常删除容器-–-删除已经关闭的" class="headerlink" title="正常删除容器 – 删除已经关闭的"></a>正常删除容器 – <code>删除已经关闭的</code></h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker rm [container_id]</span><br></pre></td></tr></table></figure><h5 id="强制删除运行容器-–-删除正在运行的"><a href="#强制删除运行容器-–-删除正在运行的" class="headerlink" title="强制删除运行容器 – 删除正在运行的"></a>强制删除运行容器 – <code>删除正在运行的</code></h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker rm -f [container_id]</span><br></pre></td></tr></table></figure><h5 id="拓展批量关闭容器"><a href="#拓展批量关闭容器" class="headerlink" title="拓展批量关闭容器"></a>拓展批量关闭容器</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker rm -f $(docker ps -a -q)</span><br></pre></td></tr></table></figure><h3 id="进入正在运行的容器"><a href="#进入正在运行的容器" class="headerlink" title="进入正在运行的容器"></a>进入正在运行的容器</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker <span class="built_in">exec</span> [选项] 容器<span class="built_in">id</span>/容器名 命令</span><br></pre></td></tr></table></figure><p>只有 <code>-i</code> 参数时，由于没有分配伪终端，没有命令提示符</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker <span class="built_in">exec</span> -i redis11 /<span class="built_in">bin</span>/bash</span><br></pre></td></tr></table></figure><p>当 <code>-i-t</code> 参数一起使用时，则可以使用 Linux 命令提示符</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker <span class="built_in">exec</span> -it redis11 /<span class="built_in">bin</span>/bash</span><br></pre></td></tr></table></figure><h3 id="查看容器详细信息"><a href="#查看容器详细信息" class="headerlink" title="查看容器详细信息"></a>查看容器详细信息</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker inspect [容器<span class="built_in">id</span>]</span><br></pre></td></tr></table></figure><h3 id="查看容器日志"><a href="#查看容器日志" class="headerlink" title="查看容器日志"></a>查看容器日志</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker logs [容器<span class="built_in">id</span>]</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Docker </tag>
</tags>
</entry>
<entry>
<title>Docker之简介与配置</title>
<link href="/2022/01/06/Docker%E4%B9%8B%E8%99%9A%E6%8B%9F%E6%9C%BA%E5%AE%89%E8%A3%85/"/>
<url>/2022/01/06/Docker%E4%B9%8B%E8%99%9A%E6%8B%9F%E6%9C%BA%E5%AE%89%E8%A3%85/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2F581f1fdc52024d3994a5699eee607009.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644045266&t=53bf23ad024e5a2049a7877522d9c124"></p><h3 id="Docker简介"><a href="#Docker简介" class="headerlink" title="Docker简介"></a>Docker简介</h3><p>Docker 是一个开源的<code>应用容器引擎</code>，可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。</p><p>容器是完全使用沙箱机制，相互之间不会有任何接口,更重要的是容器性能开销极低。</p><p>Docker三大基本概念:： <code>镜像（Image） </code> <code>容器（Container）</code> <code>仓库（Repository）</code></p><p>Docker官网：<a href="http://www.docker.com/">http://www.docker.com</a></p><p>Github Docker源码：<a href="https://github.com/docker/docker">https://github.com/docker/docker</a></p><h3 id="虚拟机安装Docker"><a href="#虚拟机安装Docker" class="headerlink" title="虚拟机安装Docker"></a>虚拟机安装Docker</h3><h4 id="安装Docker"><a href="#安装Docker" class="headerlink" title="安装Docker"></a>安装Docker</h4><ol><li><p>下载文件到虚拟机中</p><p>传输链接：<a href="https://cowtransfer.com/s/3248e7e335ed4b">https://cowtransfer.com/s/3248e7e335ed4b</a> 或 打开【奶牛快传】cowtransfer.com 使用传输口令：xhzomm 提取；</p></li><li><p>配置命令</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 源码目录（docker_sc）</span></span><br><span class="line">cd docker_sc</span><br><span class="line"></span><br><span class="line"><span class="comment"># 配置命令</span></span><br><span class="line">sudo apt-key add gpg</span><br><span class="line">sudo dpkg -i containerd.io_1<span class="number">.3</span><span class="number">.9</span>-1_amd64.deb</span><br><span class="line">sudo dpkg -i docker-ce-cli_19<span class="number">.03</span><span class="number">.15_3</span>-0_ubuntu-bionic_amd64.deb</span><br><span class="line">sudo dpkg -i docker-ce_19<span class="number">.03</span><span class="number">.15_3</span>-0_ubuntu-bionic_amd64.deb</span><br></pre></td></tr></table></figure></li><li><p>测试</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># -v 与 info 都可以运行 </span></span><br><span class="line">sudo docker -v</span><br><span class="line">sudo docker info</span><br></pre></td></tr></table></figure></li></ol><h4 id="虚拟机中配置镜像"><a href="#虚拟机中配置镜像" class="headerlink" title="虚拟机中配置镜像"></a>虚拟机中配置镜像</h4><ol><li><p>配置国内镜像加速器(如果已配置跳过第二条)</p><ul><li><a href="https://docs.docker.com/registry/recipes/mirror/#use-case-the-china-registry-mirror">Docker 官方提供的中国 registry mirror<code>https://registry.docker-cn.com</code></a></li><li><a href="https://cr.console.aliyun.com/cn-hangzhou/mirrors">阿里云加速器(需登录账号获取)</a></li><li><a href="https://kirk-enterprise.github.io/hub-docs/#/user-guide/mirror">七牛云加速器<code>https://reg-mirror.qiniu.com/</code></a></li></ul><blockquote><p>当配置某一个加速器地址之后，若发现拉取不到镜像，请切换到另一个加速器地址</p></blockquote></li><li><p>在<code>/etc/docker/daemon.json</code>中写入如下内容（如果文件不存在请新建该文件）</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="string">"registry-mirrors"</span>: [</span><br><span class="line"> <span class="string">"https://registry.docker-cn.com"</span></span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>重启服务</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ sudo systemctl daemon-reload</span><br><span class="line">$ sudo systemctl restart docker</span><br></pre></td></tr></table></figure></li></ol>]]></content>
<tags>
<tag> Docker </tag>
</tags>
</entry>
<entry>
<title>Docker之镜像</title>
<link href="/2022/01/06/Docker%E4%B9%8B%E9%95%9C%E5%83%8F/"/>
<url>/2022/01/06/Docker%E4%B9%8B%E9%95%9C%E5%83%8F/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2F581f1fdc52024d3994a5699eee607009.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644045266&t=53bf23ad024e5a2049a7877522d9c124"></p><h3 id="镜像介绍"><a href="#镜像介绍" class="headerlink" title="镜像介绍"></a>镜像介绍</h3><p>Docker 镜像是一个<strong>特殊的文件系统</strong>，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。镜像不包含任何动态数据，其内容在构建之后也不会被改变。</p><blockquote><p>如果提示权限不足，在每行命令前添加 <code>sudo</code> ；本文中大部分命令已经自动添加。</p></blockquote><p>若不想输入 <code>sudo</code> 可配置以下内容：</p><ol><li><code>sudo groupadd docker</code> #添加名字为docker用户组 默认可能有了docker组了</li><li><code>sudo gpasswd -a $USER docker</code> #将登陆用户加入到docker用户组中</li><li><code>newgrp docker</code> #更新用户组</li><li><code>docker ps</code> #测试docker命令是否可以使用sudo正常使用</li></ol><h3 id="查看镜像"><a href="#查看镜像" class="headerlink" title="查看镜像"></a>查看镜像</h3><p>命令格式：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo docker images <image_name></span><br></pre></td></tr></table></figure><p>命令演示：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo docker images ubuntu</span><br></pre></td></tr></table></figure><p>列出本地所有镜像</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">sudo docker images </span><br><span class="line"><span class="comment"># or</span></span><br><span class="line">sudo docker images -a</span><br></pre></td></tr></table></figure><h3 id="搜索镜像"><a href="#搜索镜像" class="headerlink" title="搜索镜像"></a>搜索镜像</h3><p>命令格式：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker search [image_name]</span><br></pre></td></tr></table></figure><p>命令演示：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker search redis</span><br></pre></td></tr></table></figure><h3 id="获取镜像"><a href="#获取镜像" class="headerlink" title="获取镜像"></a>获取镜像</h3><p>可自行前往官网获取想要的镜像源： <a href="https://hub.docker.com/search/?q=&type=image">点我</a></p><p>命令格式：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo docker pull [image_name]</span><br></pre></td></tr></table></figure><p>命令演示： </p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 这里用redis演示</span></span><br><span class="line">sudo docker pull redis</span><br></pre></td></tr></table></figure><h6 id="获取过程如下"><a href="#获取过程如下" class="headerlink" title="获取过程如下"></a>获取过程如下</h6><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s2.loli.net/2022/01/06/6Ia39vgoAiK2zHN.png" alt="获取成功"></p><blockquote><p><strong>如果中途加载失败可能是网络问题 多试试几次或者更换镜像源</strong></p></blockquote><h3 id="重命名镜像"><a href="#重命名镜像" class="headerlink" title="重命名镜像"></a>重命名镜像</h3><p>命令格式：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker tag [old_image]:[old_version] [new_image]:[new_version]</span><br></pre></td></tr></table></figure><p>命令演示：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker tag redis:latest redis:v1</span><br></pre></td></tr></table></figure><h6 id="重命名过程如下"><a href="#重命名过程如下" class="headerlink" title="重命名过程如下"></a>重命名过程如下</h6><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s2.loli.net/2022/01/06/AXPu5HjTnZkdh6m.png" alt="重命名镜像"></p><h3 id="删除镜像"><a href="#删除镜像" class="headerlink" title="删除镜像"></a>删除镜像</h3><p>命令格式：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker rmi [image_id/image_name:image_version]</span><br></pre></td></tr></table></figure><p>命令演示：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 这里演示删除 redis镜像 版本为 v2</span></span><br><span class="line">docker rmi redis:v2</span><br></pre></td></tr></table></figure><h6 id="删除过程如下"><a href="#删除过程如下" class="headerlink" title="删除过程如下"></a>删除过程如下</h6><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://raw.githubusercontent.com/jiaoyanxia/picgo/master/img/20220106144519.png" alt="删除镜像"></p><h3 id="导出镜像"><a href="#导出镜像" class="headerlink" title="导出镜像"></a>导出镜像</h3><p><strong>将已经下载好的镜像，导出到本地，以备后用</strong></p><p>导出镜像命令格式：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">docker save -o [包文件] [镜像]</span><br><span class="line"><span class="comment"># or</span></span><br><span class="line">docker save [镜像<span class="number">1</span>] ... [镜像n] > [包文件]</span><br></pre></td></tr></table></figure><p>命令演示：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cdocker save -o redis.tar redis</span><br></pre></td></tr></table></figure><blockquote><p><strong>注意： docker save 会保存镜像的所有历史记录和元数据信息</strong></p></blockquote><h6 id="导出过程如下"><a href="#导出过程如下" class="headerlink" title="导出过程如下"></a>导出过程如下</h6><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://raw.githubusercontent.com/jiaoyanxia/picgo/master/img/20220106150443.png" alt="导出"></p><h3 id="导入镜像"><a href="#导入镜像" class="headerlink" title="导入镜像"></a>导入镜像</h3><p>导入镜像命令格式：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">docker load < [image.tar_name]</span><br><span class="line"><span class="comment"># or</span></span><br><span class="line">docker load -i [image.tar_name]</span><br></pre></td></tr></table></figure><p>演示指令：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 这里用打包完的镜像进行导入</span></span><br><span class="line">docker load -i redisv1.tar</span><br></pre></td></tr></table></figure><h6 id="导入过程如下"><a href="#导入过程如下" class="headerlink" title="导入过程如下"></a>导入过程如下</h6><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://raw.githubusercontent.com/jiaoyanxia/picgo/master/img/20220106150713.png" alt="导入"></p><h3 id="查看镜像历史"><a href="#查看镜像历史" class="headerlink" title="查看镜像历史"></a>查看镜像历史</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker history [image_name]</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Docker </tag>
</tags>
</entry>
<entry>
<title>JavaScript 数组</title>
<link href="/2022/01/02/js%E6%95%B0%E7%BB%84/"/>
<url>/2022/01/02/js%E6%95%B0%E7%BB%84/</url>
<content type="html"><![CDATA[<h2 id="一、增删查改"><a href="#一、增删查改" class="headerlink" title="一、增删查改"></a>一、增删查改</h2><h3 id="1-1-push"><a href="#1-1-push" class="headerlink" title="1.1 push"></a>1.1 push</h3><blockquote><p><code>push()</code> 方法将一个或多个元素添加到数组的末尾，并返回新数组的长度。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.push(element1, ..., elementN)</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：数组要新增的元素（任意数据类型，一次可添加多个，用逗号隔开）</li><li><code>@return</code>：返回数组新增元素后的长度</li><li><code>是否改变原数组</code>：改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.push(<span class="number">6</span>, <span class="number">7</span>, <span class="number">8</span>); </span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// 6</span></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// 123678</span></span><br></pre></td></tr></table></figure><h3 id="1-2-unshift"><a href="#1-2-unshift" class="headerlink" title="1.2 unshift"></a>1.2 unshift</h3><blockquote><p><code>unshift()</code> 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。此方法更改数组的长度。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.unshift(element1, ..., elementN)</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：数组要新增的元素（任意数据类型，一次可添加多个，用逗号隔开）</li><li><code>@return</code>：返回数组新增元素后的长度</li><li><code>是否改变原数组</code>：改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.unshift(<span class="number">7</span>, <span class="number">8</span>); </span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// 5</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// 78 123</span></span><br></pre></td></tr></table></figure><h3 id="1-3-pop"><a href="#1-3-pop" class="headerlink" title="1.3 pop"></a>1.3 pop</h3><blockquote><p><code>pop()</code> 方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.pop()</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：无</li><li><code>@return</code>：返回数组被删除的元素</li><li><code>是否改变原数组</code>：改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.pop(); </span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// 3 </span></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// 1, 2</span></span><br></pre></td></tr></table></figure><h3 id="1-4-shift"><a href="#1-4-shift" class="headerlink" title="1.4 shift"></a>1.4 shift</h3><blockquote><p><code>shift()</code> 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.shift()</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：</li><li><code>@return</code>：</li><li><code>是否改变原数组</code>：改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.shift(); </span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// 2, 3 </span></span><br></pre></td></tr></table></figure><h3 id="1-5-splice"><a href="#1-5-splice" class="headerlink" title="1.5 splice"></a>1.5 splice</h3><blockquote><p><code>splice()</code> 方法</p><ol><li>通过删除或替换现有元素</li><li>或者原地添加新的元素来修改数组</li><li>并以数组形式返回被修改的内容。此方法会改变原数组。</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">array.splice(start[, deleteCount[, item1[, item2[, ...]]]])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：不限参数， n,m,x,…第一个参数n是必传（数组的下标，代表从第n个元素起），第二个参数（可选）代表要删除（或被替代，取决于第三个参数是否有值）的元素个数，第三个参数（可选）起，代表要添加（或替代）的元素</li><li><code>@return</code>：返回值是一个数组，里面是删除项</li><li><code>是否改变原数组</code>：改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 删除</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.splice(<span class="number">1</span>); <span class="comment">// 只传第一个参数，表示删除从下标为 1 的元素起，到最后一个元素</span></span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// [2, 3]</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// [ 1 ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// arr.splice(0)：可以清空数组，把原始数组中的内容基于新数组储存起来（有点类似于数组克隆）</span></span><br><span class="line"><span class="comment">// arr.splice(arr.length-1)：删除最后一项</span></span><br><span class="line"><span class="comment">// arr.splice(0, 1)：删除第一项</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 增加</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.splice(<span class="number">1</span>, <span class="number">0</span>, <span class="number">8</span>, <span class="number">9</span>); <span class="comment">// 第二个参数为0，表示不删除，之后的参数表示插进数组，下标从1开始，之前的元素往后挪</span></span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// [] </span></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// [1, 8,9,2,3]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 改（替代） </span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.splice(<span class="number">1</span>, <span class="number">1</span>, <span class="number">8</span>, <span class="number">9</span>); <span class="comment">// 第二个参数为1，表示替代掉下标为1的元素</span></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// [1,5,9,3]</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// </span></span><br></pre></td></tr></table></figure><h2 id="二、截取拼接"><a href="#二、截取拼接" class="headerlink" title="二、截取拼接"></a>二、截取拼接</h2><h3 id="2-1-slice-startIndex-endIndex"><a href="#2-1-slice-startIndex-endIndex" class="headerlink" title="2.1 slice [startIndex, endIndex)"></a>2.1 slice [startIndex, endIndex)</h3><blockquote><p><code>slice()</code> 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝。原始数组不会被改变。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.slice([begin[, end]])</span><br></pre></td></tr></table></figure></blockquote><p><strong>注意：复制的数组包含 start 下标元素，不包含 end 下标元素</strong></p><ul><li><code>@params</code>：起始下标 start 与结束下标 end，起始 start 必传，end 不传默认复制到数组结束位置，可使用负值从数组的尾部选取元素。</li><li><code>@return</code>：返回复制的子数组</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">6</span>, <span class="number">7</span>, <span class="number">8</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.slice(<span class="number">1</span>, <span class="number">4</span>); </span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// [2, 3, 6] </span></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// </span></span><br></pre></td></tr></table></figure><h3 id="2-2-concat"><a href="#2-2-concat" class="headerlink" title="2.2 concat"></a>2.2 concat</h3><blockquote><p><code>concat()</code> 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：多个任意项，可以是数组，可以是单个项</li><li><code>@return</code>：返回合并后的新数组</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.concat(<span class="number">1</span>, [<span class="number">0</span>, <span class="number">0</span>]); </span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// [1, 2, 3, 1, 0, 0]</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// [1, 2, 3];</span></span><br></pre></td></tr></table></figure><h2 id="三、查找判断"><a href="#三、查找判断" class="headerlink" title="三、查找判断"></a>三、查找判断</h2><h3 id="3-1-includes"><a href="#3-1-includes" class="headerlink" title="3.1 includes"></a>3.1 includes</h3><blockquote><p><code>includes()</code> 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.includes(valueToFind[, fromIndex])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：参数一必传，表示要查询的元素，参数二可选，表示从指定位置查起（若为负数，从后查起，负数超过数组长度，则置为 0）</li><li><code>@return</code>：返回布尔值</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.includes(<span class="number">2</span>); </span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// </span></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.includes(<span class="number">5</span>,-<span class="number">1</span>); </span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// </span></span><br></pre></td></tr></table></figure><h3 id="3-2-find"><a href="#3-2-find" class="headerlink" title="3.2 find"></a>3.2 find</h3><blockquote><p><code>find()</code> 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.find(function(item, index, array){}, thisArg)</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：函数，thisAr表示执行回调时this指向的对象</li><li><code>@return</code>：第一个满足条件的元素或 undefined</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> array = [<span class="number">5</span>, <span class="number">12</span>, <span class="number">8</span>, <span class="number">130</span>, <span class="number">44</span>];</span><br><span class="line"><span class="keyword">const</span> found = array.find(<span class="function"><span class="keyword">function</span>(<span class="params">item</span>) </span>{ <span class="keyword">return</span> item > <span class="number">10</span> });</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(found); <span class="comment">// 10</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(array); <span class="comment">// [5, 12, 8, 130, 44];</span></span><br></pre></td></tr></table></figure><h3 id="3-3-findIndex"><a href="#3-3-findIndex" class="headerlink" title="3.3 findIndex"></a>3.3 findIndex</h3><blockquote><p><code>findIndex()</code> 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.findIndex(callback[, thisArg])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：函数，thisAr表示执行回调时this指向的对象</li><li><code>@return</code>：第一个满足条件的索引或 -1</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> array = [<span class="number">5</span>, <span class="number">12</span>, <span class="number">8</span>, <span class="number">130</span>, <span class="number">44</span>];</span><br><span class="line"><span class="keyword">const</span> found = array.findIndex(<span class="function"><span class="params">element</span> =></span> element > <span class="number">10</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(found); <span class="comment">// 1 </span></span><br><span class="line"><span class="built_in">console</span>.log(array); <span class="comment">// [5, 12, 8, 130, 44];</span></span><br></pre></td></tr></table></figure><h3 id="3-4-indexOf"><a href="#3-4-indexOf" class="headerlink" title="3.4 indexOf"></a>3.4 indexOf</h3><blockquote><p><code>indexOf()</code> 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 -1。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.indexOf(searchElement[, fromIndex])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：参数一必传，表示要查询的元素，参数二可选，表示从指定位置查起</li><li><code>@return</code>：如若检索项存在，返回其下标，没有就返回 -1</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr.indexOf(<span class="number">2</span>)); <span class="comment">// </span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr.indexOf(<span class="number">2</span>, <span class="number">2</span>)); <span class="comment">// </span></span><br></pre></td></tr></table></figure><h3 id="3-5-lastIndexOf"><a href="#3-5-lastIndexOf" class="headerlink" title="3.5 lastIndexOf"></a>3.5 lastIndexOf</h3><blockquote><p><code>lastIndexOf()</code> 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 <code>fromIndex</code> 处开始。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.lastIndexOf(searchElement[, fromIndex])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：参数一必传，表示要查询的元素，参数二可选，表示从指定位置查起</li><li><code>@return</code>：如若检索项存在，返回其下标，没有就返回 -1</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr.lastIndexOf(<span class="number">3</span>, <span class="number">3</span>)); <span class="comment">// 2 </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr.lastIndexOf(<span class="number">3</span>, -<span class="number">2</span>)); <span class="comment">// 6</span></span><br></pre></td></tr></table></figure><h3 id="4-1-sort"><a href="#4-1-sort" class="headerlink" title="4.1 sort"></a>4.1 sort</h3><blockquote><p><code>sort()</code> 方法用原地算法对数组的元素进行排序，并返回数组。排序不一定是稳定的。默认排序顺序是根据字符串 Unicode 码点。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.sort([compareFunction])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：函数</li><li><code>@return</code>：排序后的数组</li><li><code>是否改变原数组</code>：改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">3</span>,<span class="number">9</span>,<span class="number">2</span>,<span class="number">5</span>,<span class="number">3</span>,<span class="number">7</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> res1 = arr.sort(<span class="function">(<span class="params">a, b</span>) =></span> a - b);</span><br><span class="line"><span class="built_in">console</span>.log(res1) <span class="comment">// </span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> res2 = arr.sort(<span class="function">(<span class="params">a, b</span>) =></span> b - a);</span><br><span class="line"><span class="built_in">console</span>.log(res2) <span class="comment">// ?</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// ?</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><h3 id="4-2-reverse"><a href="#4-2-reverse" class="headerlink" title="4.2 reverse"></a>4.2 reverse</h3><blockquote><p><code>reverse()</code> 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.reverse()</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：无</li><li><code>@return</code>：倒转排序后的数组</li><li><code>是否改变原数组</code>：改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">7</span>, <span class="number">9</span>]</span><br><span class="line"><span class="built_in">console</span>.log(arr.reverse()) <span class="comment">// ?</span></span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// ?</span></span><br></pre></td></tr></table></figure><h2 id="五、转字符串"><a href="#五、转字符串" class="headerlink" title="五、转字符串"></a>五、转字符串</h2><h3 id="5-1-join"><a href="#5-1-join" class="headerlink" title="5.1 join"></a>5.1 join</h3><blockquote><p><code>join()</code> 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.join([separator])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：指定的分隔符</li><li><code>@return</code>：转换后的字符串</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">3</span>, <span class="number">9</span>];</span><br><span class="line"><span class="built_in">console</span>.log(arr.join(<span class="string">'-'</span>)); <span class="comment">// 1-3-9</span></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// [1,3, 9];</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr.join()); <span class="comment">// 以,分割</span></span><br></pre></td></tr></table></figure><h3 id="5-2-toString"><a href="#5-2-toString" class="headerlink" title="5.2 toString"></a>5.2 toString</h3><blockquote><p><code>toString()</code> 返回一个字符串，表示指定的数组及其元素。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.toString()</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：无</li><li><code>@return</code>：转换后的字符串</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">7</span>, <span class="number">9</span>];</span><br><span class="line"><span class="built_in">console</span>.log(arr.toString()); <span class="comment">// 1,2,3,3,4,5,5,7,9</span></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// [1, 2, 3, 3, 4, 5, 5, 7, 9];</span></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure><h2 id="六、遍历映射"><a href="#六、遍历映射" class="headerlink" title="六、遍历映射"></a>六、遍历映射</h2><h3 id="6-1-for"><a href="#6-1-for" class="headerlink" title="6.1 for"></a>6.1 for</h3><blockquote><p>for 循环性能最佳，内部可以阻塞</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 长度一般尽量先用赋值于变量，提升性能</span></span><br><span class="line"><span class="keyword">var</span> arr = [asas];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i < len; i++) {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> <span class="keyword">continue</span>; <span class="comment">// 打断当次循环，进入下次循环</span></span><br><span class="line"> <span class="keyword">break</span>; <span class="comment">// 直接打断循环，跳出循环</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="6-2-forEach"><a href="#6-2-forEach" class="headerlink" title="6.2 forEach"></a>6.2 forEach</h3><blockquote><p><code>forEach()</code> 方法对数组的每个元素执行一次给定的函数。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.forEach(callback(currentValue [, index [, array]])[, thisArg])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：函数</li><li><code>@return</code>：无/undefined</li><li><code>是否改变原数组</code>：改变</li></ul><p><strong>注意：除了抛出异常以外，没有办法中止或跳出 forEach() 循环，即break、continue、async/await都无效</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> array1 = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</span><br><span class="line"></span><br><span class="line">array1.forEach(<span class="function"><span class="params">element</span> =></span> <span class="built_in">console</span>.log(element));</span><br><span class="line"></span><br><span class="line"><span class="comment">// expected output: "a"</span></span><br><span class="line"><span class="comment">// expected output: "b"</span></span><br><span class="line"><span class="comment">// expected output: "c"</span></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure><h3 id="6-3-map"><a href="#6-3-map" class="headerlink" title="6.3 map"></a>6.3 map</h3><blockquote><p><code>map()</code> 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var newArray = arr.map(callback(element[, index[, array]])[, thisArg])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：函数</li><li><code>@return</code>：新的数组</li><li><code>是否改变原数组</code>：不改变(数组中全是基本类别) 改变(数组中元素是引用类型)</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> array1 = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">9</span>, <span class="number">10</span>];</span><br><span class="line"><span class="keyword">const</span> map1 = array1.map(<span class="function"><span class="params">x</span> =></span> x * <span class="number">2</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(map1); <span class="comment">// ? </span></span><br></pre></td></tr></table></figure><h3 id="6-4-filter"><a href="#6-4-filter" class="headerlink" title="6.4 filter"></a>6.4 filter</h3><blockquote><p><code>filter()</code> 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：函数</li><li><code>@return</code>：满足条件的元素组成的新数组</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> nums = [<span class="number">1</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">10</span>];</span><br><span class="line"><span class="keyword">let</span> res = nums.filter(<span class="function"><span class="params">num</span> =></span> num > <span class="number">5</span>);</span><br><span class="line"><span class="built_in">console</span>.log(res); <span class="comment">// [ 6, 10 ]</span></span><br></pre></td></tr></table></figure><h3 id="6-5-every"><a href="#6-5-every" class="headerlink" title="6.5 every"></a>6.5 every</h3><blockquote><p><code>every()</code> 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.every(callback(element[, index[, array]])[, thisArg])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：函数</li><li><code>@return</code>：Boolean 值</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</span><br><span class="line"><span class="built_in">console</span>.log(arr.every(<span class="function">(<span class="params">item, index, array</span>) =></span> item > <span class="number">3</span>)) <span class="comment">// ?</span></span><br></pre></td></tr></table></figure><h3 id="6-6-some"><a href="#6-6-some" class="headerlink" title="6.6 some"></a>6.6 some</h3><blockquote><p><code>some()</code> 测试一个数组内的是不是至少有一个元素是否都能通过某个指定函数的测试。它返回一个布尔值。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.some(callback(element[, index[, array]])[, thisArg])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：函数</li><li><code>@return</code>：Boolean 值</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</span><br><span class="line"><span class="built_in">console</span>.log(arr.some(<span class="function">(<span class="params">item, index, array</span>) =></span> item > <span class="number">3</span>)) <span class="comment">// ture</span></span><br></pre></td></tr></table></figure><h3 id="6-7-reduce"><a href="#6-7-reduce" class="headerlink" title="6.7 reduce"></a>6.7 reduce</h3><blockquote><p><code>reduce()</code> 方法对数组中的每个元素执行一个由您提供的 <code>reducer</code> 函数(升序执行)，将其结果汇总为单个返回值。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：函数</li><li><code>@return</code>：函数累计处理的结果</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 数组求和</span></span><br><span class="line"><span class="keyword">let</span> sum = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].reduce(<span class="function">(<span class="params">accumulator, currentValue</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> accumulator + currentValue;</span><br><span class="line">}, <span class="number">0</span>);</span><br><span class="line"><span class="built_in">console</span>.log(sum); <span class="comment">// </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 数组去重</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'e'</span>, <span class="string">'e'</span>, <span class="string">'c'</span>, <span class="string">'d'</span>, <span class="string">'d'</span>];</span><br><span class="line"><span class="keyword">let</span> newArr = arr.reduce(<span class="function">(<span class="params">acc, current</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (acc.indexOf(current) === -<span class="number">1</span>) {</span><br><span class="line"> acc.push(current);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> acc;</span><br><span class="line">}, []);</span><br><span class="line"><span class="built_in">console</span>.log(newArr); <span class="comment">// ?</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 数组扁平化</span></span><br><span class="line"><span class="keyword">let</span> flat = [[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], [<span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>], [<span class="number">7</span>, <span class="number">8</span>, <span class="number">9</span>]].reduce(<span class="function">(<span class="params">prev, cur, index, array</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> [...prev, ...cur];</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(flat); <span class="comment">// [1, 2, 3, 4, 5, 6, 7, 8]</span></span><br></pre></td></tr></table></figure><h3 id="6-8-reduceRight"><a href="#6-8-reduceRight" class="headerlink" title="6.8 reduceRight"></a>6.8 reduceRight</h3><blockquote><p><code>reduceRight()</code> 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：函数</li><li><code>@return</code>：函数累计处理的结果</li><li><code>是否改变原数组</code>：不改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> array1 = [[<span class="number">0</span>, <span class="number">1</span>], [<span class="number">2</span>, <span class="number">3</span>], [<span class="number">4</span>, <span class="number">5</span>]].reduceRight(</span><br><span class="line"> <span class="function">(<span class="params">accumulator, currentValue</span>) =></span> accumulator.concat(currentValue)</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(array1); <span class="comment">// [4, 5, 2, 3, 0, 1]</span></span><br></pre></td></tr></table></figure><h2 id="七、获取键值"><a href="#七、获取键值" class="headerlink" title="七、获取键值"></a>七、获取键值</h2><h3 id="7-2-keys"><a href="#7-2-keys" class="headerlink" title="7.2 keys"></a>7.2 keys</h3><blockquote><p><code>keys()</code> 方法返回一个包含数组中每个索引键的 <code>Array Iterator</code> 对象。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.keys()</span><br></pre></td></tr></table></figure></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> array1 = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</span><br><span class="line"><span class="keyword">const</span> iterator = array1.keys();<span class="comment">// 返回一个迭代器对象</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">of</span> iterator) {</span><br><span class="line"> <span class="built_in">console</span>.log(key); <span class="comment">// </span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="7-3-values"><a href="#7-3-values" class="headerlink" title="7.3 values"></a>7.3 values</h3><blockquote><p><code>values()</code> 方法返回一个新的 <code>Array Iterator</code> 对象，该对象包含数组每个索引的值。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.values()</span><br></pre></td></tr></table></figure></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> array1 = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</span><br><span class="line"><span class="keyword">const</span> iterator = array1.values();<span class="comment">// 返回一个迭代器对象</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> value <span class="keyword">of</span> iterator) {</span><br><span class="line"> <span class="built_in">console</span>.log(value); <span class="comment">// </span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="八、其他方法"><a href="#八、其他方法" class="headerlink" title="八、其他方法"></a>八、其他方法</h2><h3 id="8-1-fill"><a href="#8-1-fill" class="headerlink" title="8.1 fill"></a>8.1 fill</h3><blockquote><p><code>fill()</code> 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.fill(value[, start[, end]])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：固定值，起始索引， 终止索引</li><li><code>@return</code>：指定位置被填充为固定值的原数组</li><li><code>是否改变原数组</code>：改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br><span class="line">arr.fill(<span class="number">0</span>) <span class="comment">// arr = [0, 0, 0, 0]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 多用于创建指定长度的空数组填充</span></span><br><span class="line"><span class="keyword">let</span> arr1 = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">3</span>)</span><br><span class="line">arr1.fill(<span class="number">1</span>) <span class="comment">// arr1 = [1, 1, 1]</span></span><br></pre></td></tr></table></figure><h3 id="8-2-flat"><a href="#8-2-flat" class="headerlink" title="8.2 flat"></a>8.2 flat</h3><blockquote><p><code>flat()</code> 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。不改变原数组。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var newArray = arr.flat([depth])</span><br></pre></td></tr></table></figure></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 扁平化数组</span></span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>]];</span><br><span class="line">newArr1 = arr1.flat();</span><br><span class="line"><span class="built_in">console</span>.log(newArr1); <span class="comment">// [, 2, 3, 4]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr2 = [<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>, [<span class="number">5</span>, <span class="number">6</span>]]];</span><br><span class="line">newArr2 = arr2.flat(<span class="number">2</span>);</span><br><span class="line"><span class="built_in">console</span>.log(newArr2); <span class="comment">// [1, 2, 3, 4, 5, 6]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//使用 Infinity，可展开任意深度的嵌套数组</span></span><br><span class="line"><span class="keyword">let</span> arr3 = [<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>, [<span class="number">5</span>, <span class="number">6</span>, [<span class="number">7</span>, <span class="number">8</span>, [<span class="number">9</span>, <span class="number">10</span>]]]]];</span><br><span class="line">newArr3 = arr3.flat(<span class="literal">Infinity</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr3, newArr3); <span class="comment">// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 去除空项</span></span><br><span class="line"><span class="keyword">let</span> arr4 = [<span class="number">1</span>, <span class="number">2</span>, , <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line">newArr4 = arr4.flat();</span><br><span class="line"><span class="built_in">console</span>.log(newArr4); <span class="comment">// ?</span></span><br></pre></td></tr></table></figure><h3 id="8-4-copyWithin"><a href="#8-4-copyWithin" class="headerlink" title="8.4 copyWithin"></a>8.4 copyWithin</h3><blockquote><p><code>copyWithin()</code> 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.copyWithin(target[, start[, end]])</span><br></pre></td></tr></table></figure></blockquote><ul><li><code>@params</code>：target, 为基底的索引，复制序列到该位置， start复制的起始索引，end复制的末尾索引（不包含），start默认0， end默认到最后一个</li><li><code>@return</code>：改变后的数组，长度不变</li><li><code>是否改变原数组</code>：改变</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> array = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'d'</span>, <span class="string">'e'</span>];</span><br><span class="line"><span class="built_in">console</span>.log(array.copyWithin(<span class="number">0</span>, <span class="number">3</span>, <span class="number">4</span>)); <span class="comment">// (5) ['d', 'b', 'c', 'd', 'e']</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(array.copyWithin(<span class="number">1</span>, <span class="number">3</span>)); <span class="comment">// ??? </span></span><br><span class="line"><span class="built_in">console</span>.log(array) <span class="comment">// ?</span></span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> JavaScript </tag>
</tags>
</entry>
<entry>
<title>Django 跨域CORS</title>
<link href="/2021/12/28/Django%E8%B7%A8%E5%9F%9FCORS/"/>
<url>/2021/12/28/Django%E8%B7%A8%E5%9F%9FCORS/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://img1.baidu.com/it/u=2206900918,1696468527&fm=26&fmt=auto"></p><h2 id="跨域CORS"><a href="#跨域CORS" class="headerlink" title="跨域CORS"></a>跨域CORS</h2><p>我们的前端和后端分别是两个不同的端口</p><p>这里用 <a href="http://www.baidu.com/">www.baidu.com</a> 举例子 改变的是端口</p><table><thead><tr><th align="left">位置</th><th align="left">域名</th></tr></thead><tbody><tr><td align="left">前端服务</td><td align="left"><a href="http://www.baidu.com:8080/">www.baidu.com:8080</a></td></tr><tr><td align="left">后端服务</td><td align="left"><a href="http://www.baidu.com:8000/">www.baidu.com:8000</a></td></tr></tbody></table><p><strong>现在，前端与后端分处不同的域名，这就涉及到跨域访问数据的问题，因为浏览器的同源策略，默认是不支持两个不同域间相互访问数据，而我们需要在两个域名间相互传递数据，这时我们就要为后端添加跨域访问的支持。</strong></p><blockquote><p>我们使用CORS来解决后端对跨域访问的支持。</p></blockquote><p>使用 <a href="https://github.com/ottoyiu/django-cors-headers/">django-cors-headers </a> 扩展 </p><h4 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h4><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pip install django-cors-headers</span><br></pre></td></tr></table></figure><h4 id="添加应用"><a href="#添加应用" class="headerlink" title="添加应用"></a>添加应用</h4><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">INSTALLED_APPS = (</span><br><span class="line"> ...</span><br><span class="line"> <span class="string">'corsheaders'</span>,</span><br><span class="line"> ...</span><br><span class="line">)</span><br></pre></td></tr></table></figure><h4 id="中间层设置"><a href="#中间层设置" class="headerlink" title="中间层设置"></a>中间层设置</h4><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">MIDDLEWARE = [</span><br><span class="line"> <span class="string">'corsheaders.middleware.CorsMiddleware'</span>,</span><br><span class="line"> ...</span><br><span class="line">]</span><br></pre></td></tr></table></figure><h4 id="添加白名单"><a href="#添加白名单" class="headerlink" title="添加白名单"></a>添加白名单</h4><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># CORS</span></span><br><span class="line">CORS_ORIGIN_WHITELIST = (</span><br><span class="line"> <span class="string">'http://127.0.0.1:8080'</span>, <span class="comment"># 为本地页面 8080端口</span></span><br><span class="line"> <span class="string">'http://www.baidu.com:8080'</span>, <span class="comment"># 为前端页面 8080 端口</span></span><br><span class="line">)</span><br><span class="line">CORS_ALLOW_CREDENTIALS = <span class="literal">True</span> <span class="comment"># 允许携带cookie</span></span><br></pre></td></tr></table></figure><ul><li>凡是出现在白名单中的域名，都可以访问后端接口</li><li>CORS_ALLOW_CREDENTIALS 指明在跨域访问中，后端是否支持对cookie的操作。</li></ul>]]></content>
<tags>
<tag> Django </tag>
</tags>
</entry>
<entry>
<title>Mysql创建账号时丢失或无法创建解决</title>
<link href="/2021/12/14/Mysql%E5%88%9B%E5%BB%BA%E8%B4%A6%E5%8F%B7%E6%97%B6%E4%B8%A2%E5%A4%B1%E6%88%96%E6%97%A0%E6%B3%95%E5%88%9B%E5%BB%BA%E8%A7%A3%E5%86%B3/"/>
<url>/2021/12/14/Mysql%E5%88%9B%E5%BB%BA%E8%B4%A6%E5%8F%B7%E6%97%B6%E4%B8%A2%E5%A4%B1%E6%88%96%E6%97%A0%E6%B3%95%E5%88%9B%E5%BB%BA%E8%A7%A3%E5%86%B3/</url>
<content type="html"><![CDATA[<div class="note pink icon simple"><i class="note-icon fas fa-car-crash"></i><p>本教程只适合Mysql账号遇到的问题</p></div><h3 id="场景一：创建账号后-原账户丢失"><a href="#场景一：创建账号后-原账户丢失" class="headerlink" title="场景一：创建账号后 原账户丢失"></a>场景一：创建账号后 原账户丢失</h3><h5 id="第一步：设置允许无密码登录，重启mysql"><a href="#第一步：设置允许无密码登录，重启mysql" class="headerlink" title="第一步：设置允许无密码登录，重启mysql"></a>第一步：设置允许无密码登录，重启mysql</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hadoop@ycm:~$ sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf</span><br><span class="line">hadoop@ycm:~$service mysql restart</span><br></pre></td></tr></table></figure><p><strong>在[mysqld]中添加<code>skip-grant-tables</code></strong></p><h5 id="第二步：进入mysql交互模式"><a href="#第二步：进入mysql交互模式" class="headerlink" title="第二步：进入mysql交互模式"></a>第二步：进入mysql交互模式</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql -u root -p</span><br></pre></td></tr></table></figure><p><strong>然后直接回车就行</strong></p><h5 id="第三步："><a href="#第三步：" class="headerlink" title="第三步："></a>第三步：</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql> use mysql;``mysql>flush ``privileges``;``mysql>``UPDATE` `user` `SET` `authentication_string=``<span class="string">""</span>` `WHERE` `user``=``<span class="string">"root"</span>``;//先把root密码置为空``mysql>flush ``privileges``;``mysql>``ALTER` `user` `<span class="string">'root'</span>``@``<span class="string">'localhost'</span>` `IDENTIFIED ``BY` `<span class="string">'Ycm@123nihao'</span>``;//再重置密码</span><br></pre></td></tr></table></figure><p>注意：密码格式必须符合要求，不然会报错的。mysql8貌似是要求必须包括大小写,数字和特殊字符。</p><h5 id="第四步：quit退出mysql交互模式，去掉之前加的skip-grant-tables，再重启mysql"><a href="#第四步：quit退出mysql交互模式，去掉之前加的skip-grant-tables，再重启mysql" class="headerlink" title="第四步：quit退出mysql交互模式，去掉之前加的skip-grant-tables，再重启mysql"></a>第四步：quit退出mysql交互模式，去掉之前加的skip-grant-tables，再重启mysql</h5><h5 id="第五步：这回mysql-u-root-p输入设置的正确密码就能进入mysql了"><a href="#第五步：这回mysql-u-root-p输入设置的正确密码就能进入mysql了" class="headerlink" title="第五步：这回mysql -u root -p输入设置的正确密码就能进入mysql了"></a>第五步：这回mysql -u root -p输入设置的正确密码就能进入mysql了</h5><blockquote><p>参考文章：<a href="https://www.cnblogs.com/y-c-m520/p/14060382.html">[永远的小幸运]</a></p></blockquote>]]></content>
<tags>
<tag> Mysql </tag>
</tags>
</entry>
<entry>
<title>Redis之Python操作集成</title>
<link href="/2021/12/13/Redis%E4%B9%8BPython%E6%93%8D%E4%BD%9C%E9%9B%86%E7%BE%A4/"/>
<url>/2021/12/13/Redis%E4%B9%8BPython%E6%93%8D%E4%BD%9C%E9%9B%86%E7%BE%A4/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstaticdata.yuanshihui.com%2Fdata%2FM00%2F6B%2F48%2FCIECAFtXNqyAJ117AABgsxRD-vs598.png&refer=http%3A%2F%2Fstaticdata.yuanshihui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641607439&t=3fe57771c8cbb3351a2c376bba6f5c00" alt="Redis"></p><blockquote><p>本文基于Redis配置完集成的前提下操作 <a href="https://jiaoyanxia.github.io/2021/12/13/Redis%E9%85%8D%E7%BD%AE%E9%9B%86%E6%88%90/"><code>未配置可前往配置集成</code></a></p></blockquote><h3 id="第一步-安装包"><a href="#第一步-安装包" class="headerlink" title="第一步 安装包"></a>第一步 安装包</h3><p><strong>安装集群配置包</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">pip install redis-py-cluster</span><br><span class="line"><span class="comment"># 若pip不好使就改为 pip3</span></span><br></pre></td></tr></table></figure><h3 id="第二步-使用"><a href="#第二步-使用" class="headerlink" title="第二步 使用"></a>第二步 使用</h3><ol><li><p>导包</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> rediscluster <span class="keyword">import</span> *</span><br></pre></td></tr></table></figure></li><li><p>构建所有的节点</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 构建所有的节点，Redis会使⽤CRC16算法，将键和值写到某个节点上</span></span><br><span class="line"> startup_nodes = [</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'8000'</span>},</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'8001'</span>},</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'7002'</span>},</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'7003'</span>},</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'7004'</span>},</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'7005'</span>},</span><br><span class="line"> ]</span><br></pre></td></tr></table></figure></li><li><p>构建RedisCluster对象</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 构建RedisCluster对象</span></span><br><span class="line">src = RedisCluster(startup_nodes=startup_nodes, decode_responses=<span class="literal">True</span>)</span><br></pre></td></tr></table></figure></li><li><p>测试设置与获取代码</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 设置键为name、值为itheima的数据</span></span><br><span class="line">result = src.<span class="built_in">set</span>(<span class="string">'name'</span>, <span class="string">'aaa'</span>)</span><br><span class="line"><span class="built_in">print</span>(result)</span><br><span class="line"><span class="comment"># 获取键为name</span></span><br><span class="line">name = src.get(<span class="string">'name'</span>)</span><br><span class="line"><span class="built_in">print</span>(name)</span><br></pre></td></tr></table></figure></li><li><p>再添加异常捕获</p></li></ol><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> __name__ == <span class="string">'__main__'</span>:</span><br><span class="line"> <span class="keyword">try</span>:</span><br><span class="line"> 代码...</span><br><span class="line"> </span><br><span class="line"><span class="keyword">except</span> Exception <span class="keyword">as</span> e:</span><br><span class="line"> <span class="built_in">print</span>(e)</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="文件示例"><a href="#文件示例" class="headerlink" title="文件示例"></a>文件示例</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> rediscluster <span class="keyword">import</span> *</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> __name__ == <span class="string">'__main__'</span>:</span><br><span class="line"> <span class="keyword">try</span>:</span><br><span class="line"> <span class="comment"># 构建所有的节点，Redis会使⽤CRC16算法，将键和值写到某个节点上</span></span><br><span class="line"> startup_nodes = [</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'8000'</span>},</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'8001'</span>},</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'7002'</span>},</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'7003'</span>},</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'7004'</span>},</span><br><span class="line"> {<span class="string">'host'</span>: <span class="string">'192.111.141.129'</span>, <span class="string">'port'</span>: <span class="string">'7005'</span>},</span><br><span class="line"> ]</span><br><span class="line"> <span class="comment"># 构建RedisCluster对象</span></span><br><span class="line"> src = RedisCluster(startup_nodes=startup_nodes, decode_responses=<span class="literal">True</span>)</span><br><span class="line"> <span class="comment"># 设置键为name、值为itheima的数据</span></span><br><span class="line"> result = src.<span class="built_in">set</span>(<span class="string">'name'</span>, <span class="string">'aaa'</span>)</span><br><span class="line"> <span class="built_in">print</span>(result)</span><br><span class="line"> <span class="comment"># 获取键为name</span></span><br><span class="line"> name = src.get(<span class="string">'name'</span>)</span><br><span class="line"> <span class="built_in">print</span>(name)</span><br><span class="line"> <span class="keyword">except</span> Exception <span class="keyword">as</span> e:</span><br><span class="line"> <span class="built_in">print</span>(e)</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Redis </tag>
</tags>
</entry>
<entry>
<title>Redis配置集成</title>
<link href="/2021/12/13/Redis%E9%9B%86%E7%BE%A4/"/>
<url>/2021/12/13/Redis%E9%9B%86%E7%BE%A4/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstaticdata.yuanshihui.com%2Fdata%2FM00%2F6B%2F48%2FCIECAFtXNqyAJ117AABgsxRD-vs598.png&refer=http%3A%2F%2Fstaticdata.yuanshihui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641607439&t=3fe57771c8cbb3351a2c376bba6f5c00" alt="Redis"></p><h3 id="Redis集群介绍"><a href="#Redis集群介绍" class="headerlink" title="Redis集群介绍"></a>Redis集群介绍</h3><p>集群是一组相互独立的、通过高速网络互联的计算机，它们构成了一个组，并以单一系统的模式加以管理。<strong>一个客户与集群相互作用时，集群像是一个独立的服务器。</strong></p><p>Redis集群是一个由<strong>多个主从节点群</strong>组成的分布式服务集群，它具有<strong>复制、高可用和分片</strong>特性。</p><p>Redis集群不需要sentinel哨兵也能完成节点移除和故障转移的功能。需要将每个节点设置成集群模式，这种集群模式没有中心节点，可水平扩展，据官方文档称可以线性扩展到上万个节点(官方推荐不超过1000个节点)。redis集群的性能和高可用性均优于之前版本的哨兵模式，且集群配置非常简单。</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://cdn.jsdelivr.net/gh/jiaoyanxia/picgo@master/blogimg/202112131711498.png" alt="集群执行机制"></p><h3 id="Redis集群的优点"><a href="#Redis集群的优点" class="headerlink" title="Redis集群的优点"></a>Redis集群的优点</h3><ol><li>Redis集群有多个master，可以<strong>减小访问瞬断问题的影响</strong>；</li><li>若集群中有一个master挂了，正好需要向这个master写数据，这个操作需要等待一下；但是向其他master节点写数据是不受影响的。</li><li>Redis集群有多个master，可以提供更高的并发量； </li><li>Redis集群可以分片存储，这样就可以存储更多的数据；</li></ol><h3 id="集群的配置与使用"><a href="#集群的配置与使用" class="headerlink" title="集群的配置与使用"></a>集群的配置与使用</h3><p><strong>前提：</strong> 准备<code>两台虚拟机各开3个redis</code> 或者 <code>一台虚拟机开6个redis </code></p><p><strong>其中三个为主服务器 每个主服务器配备一个从服务器</strong></p><h5 id="这里用一台虚拟机开6个redis示例"><a href="#这里用一台虚拟机开6个redis示例" class="headerlink" title="这里用一台虚拟机开6个redis示例"></a>这里用一台虚拟机开6个redis示例</h5><h4 id="第一步-清除"><a href="#第一步-清除" class="headerlink" title="第一步 清除"></a>第一步 清除</h4><ol><li><p>进入你的redis目录</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cd /etc/redis</span><br></pre></td></tr></table></figure></li><li><p>查看目录文件 把多余的文件清除(如果只是redis服务器与哨兵 则不用清除)</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 查看文件</span></span><br><span class="line">ls</span><br><span class="line"><span class="comment"># 清除文件命令</span></span><br><span class="line">sudo rm <span class="string">'文件'</span></span><br></pre></td></tr></table></figure></li></ol><h4 id="第二步-配置集群"><a href="#第二步-配置集群" class="headerlink" title="第二步 配置集群"></a>第二步 配置集群</h4><ol><li><p>在/etc/redis目录下创建6个redis 这里分别为 <strong>7000.conf 递增</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 创建文件</span></span><br><span class="line">sudo touch <span class="number">7000.</span>conf</span><br><span class="line">sudo touch <span class="number">7001.</span>conf</span><br><span class="line">sudo touch <span class="number">7002.</span>conf</span><br><span class="line">sudo touch <span class="number">7003.</span>conf</span><br><span class="line">sudo touch <span class="number">7004.</span>conf</span><br><span class="line">sudo touch <span class="number">7005.</span>conf</span><br></pre></td></tr></table></figure></li><li><p>编辑文件内容</p><p><strong>第一步：用记事本打开</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo gedit <span class="number">7000.</span>conf</span><br></pre></td></tr></table></figure><p><strong>第二步：添加文件内容</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">port <span class="number">7000</span></span><br><span class="line">bind <span class="number">172.16</span><span class="number">.179</span><span class="number">.130</span></span><br><span class="line">daemonize yes</span><br><span class="line">pidfile <span class="number">7000.</span>pid</span><br><span class="line">cluster-enabled yes</span><br><span class="line">cluster-config-file 7000_node.conf</span><br><span class="line">cluster-node-timeout <span class="number">15000</span></span><br><span class="line">appendonly yes</span><br></pre></td></tr></table></figure><ul><li>port 为当前这个的redis的端口 </li><li>bind 为你的ip地址</li><li>pidfile 同为改为当前这个的redis端口 .pid</li><li>cluster-config-file 同为改为当前这个的redis端口 _node.conf</li></ul><p><strong>后续的其他redis文件重点就配置这几样 <code>端口记得更改</code> 最简单的方法就是递增(如7001 7002)</strong></p><p><strong>总结：</strong>三个⽂件的配置区别在port、pidfile、cluster-config-file三项</p></li><li><p>使⽤配置⽂件启动redis服务</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">redis-server <span class="number">7000.</span>conf</span><br><span class="line">redis-server <span class="number">7001.</span>conf</span><br><span class="line">redis-server <span class="number">7002.</span>conf</span><br><span class="line">redis-server <span class="number">7003.</span>conf</span><br><span class="line">redis-server <span class="number">7004.</span>conf</span><br><span class="line">redis-server <span class="number">7005.</span>conf</span><br></pre></td></tr></table></figure></li><li><p>查看当前进程状态</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ps -aux|grep redis</span><br></pre></td></tr></table></figure><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://cdn.jsdelivr.net/gh/jiaoyanxia/picgo@master/blogimg/202112131622036.png" alt="进程状态"></p><blockquote><p>如果缺少或者没被添加进程 则<code>更改文件内容的端口号</code></p><p>这里我更改了几个端口号 原因是同局域网太多请求导致挂不上 更改端口号即可</p></blockquote></li><li><p>5.0以后开启集群的命令</p><p><strong>–cluster-replicas 1 这里的1 表示一个主有1个从</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 命令语法： redis-cli --cluster create ip地址: 端口 ip地址:端口 等...</span></span><br><span class="line"><span class="comment"># 示例</span></span><br><span class="line">redis-cli --cluster create <span class="number">192.168</span><span class="number">.49</span><span class="number">.128</span>:<span class="number">8000</span> <span class="number">192.168</span><span class="number">.49</span><span class="number">.128</span>:<span class="number">8001</span> <span class="number">192.168</span><span class="number">.49</span><span class="number">.128</span>:<span class="number">7002</span> <span class="number">192.168</span><span class="number">.49</span><span class="number">.140</span>:<span class="number">7003</span> <span class="number">192.168</span><span class="number">.49</span><span class="number">.140</span>:<span class="number">7004</span> <span class="number">192.168</span><span class="number">.49</span><span class="number">.140</span>:<span class="number">7005</span> --cluster-replicas <span class="number">1</span></span><br></pre></td></tr></table></figure><p>执行完后如果出现以下信息，就表示启动成功了！</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://cdn.jsdelivr.net/gh/jiaoyanxia/picgo@master/blogimg/202112131600604.png" alt="开启集群"></p></li><li><p>集群使用</p><p><strong>命令语法：</strong><code>redis-cli -h xxxx -p xxx -c</code></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://cdn.jsdelivr.net/gh/jiaoyanxia/picgo@master/blogimg/202112131632064.png" alt="集群使用"></p></li></ol><blockquote><p>参考文章：<a href="https://www.cnblogs.com/yufeng218/p/13688582.html">风止雨歇 - Redis集群</a></p></blockquote>]]></content>
<tags>
<tag> Redis </tag>
</tags>
</entry>
<entry>
<title>Redis之Python操作哨兵</title>
<link href="/2021/12/12/Redis%E4%B9%8BPython%E6%93%8D%E4%BD%9C%E5%93%A8%E5%85%B5/"/>
<url>/2021/12/12/Redis%E4%B9%8BPython%E6%93%8D%E4%BD%9C%E5%93%A8%E5%85%B5/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstaticdata.yuanshihui.com%2Fdata%2FM00%2F6B%2F48%2FCIECAFtXNqyAJ117AABgsxRD-vs598.png&refer=http%3A%2F%2Fstaticdata.yuanshihui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641607439&t=3fe57771c8cbb3351a2c376bba6f5c00" alt="Redis"></p><blockquote><p>本文基于Redis配置完哨兵的前提下操作 <a href="https://jiaoyanxia.github.io/2021/12/12/Redis%E9%85%8D%E7%BD%AE%E5%93%A8%E5%85%B5/"><code>未配置可前往配置哨兵</code></a></p></blockquote><h3 id="第一步-导包"><a href="#第一步-导包" class="headerlink" title="第一步 导包"></a>第一步 导包</h3><p>在虚拟环境中导入<code>redis</code>包</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">pip install redis</span><br><span class="line"><span class="comment"># 若pip不好使就改为 pip3</span></span><br></pre></td></tr></table></figure><h3 id="第二步-使用"><a href="#第二步-使用" class="headerlink" title="第二步 使用"></a>第二步 使用</h3><ol><li><p>导包</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> redis <span class="keyword">import</span> Redis</span><br><span class="line"></span><br><span class="line"><span class="keyword">from</span> redis.sentinel <span class="keyword">import</span> Sentinel</span><br></pre></td></tr></table></figure></li><li><p>配置哨兵地址与端口</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 你的 redis 哨兵的地址和端口</span></span><br><span class="line"> REDIS_SENTINELS = [</span><br><span class="line"> (<span class="string">'127.0.0.1'</span>, <span class="string">'27000'</span>),</span><br><span class="line"> (<span class="string">'127.0.0.1'</span>, <span class="string">'27001'</span>),</span><br><span class="line"> (<span class="string">'127.0.0.1'</span>, <span class="string">'27002'</span>),</span><br><span class="line"> ]</span><br></pre></td></tr></table></figure></li></ol><ol start="3"><li><p>获取哨兵对象</p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment"># 获取哨兵对象 存到app对象里，在视图中可以通过current_app获取到</span></span><br><span class="line">_sentinel = Sentinel(REDIS_SENTINELS)</span><br></pre></td></tr></table></figure></li></ol><ol start="4"><li><p>监控的节点名字</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 监控的节点名字 mymaster</span></span><br><span class="line"> REDIS_SENTINEL_SERVICE_NAME = <span class="string">'mymaster'</span></span><br></pre></td></tr></table></figure></li></ol><ol start="5"><li><p>再添加异常捕获</p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 通过哨兵对象 获取主节点对象 用来写入信息</span></span><br><span class="line">redis_master: Redis = _sentinel.master_for(REDIS_SENTINEL_SERVICE_NAME)</span><br><span class="line"><span class="comment"># 通过哨兵对象 获取从节点对象 用来获取信息</span></span><br><span class="line">redis_slave = _sentinel.slave_for(REDIS_SENTINEL_SERVICE_NAME)</span><br></pre></td></tr></table></figure></li><li><p>执行数据操作</p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 写入数据</span></span><br><span class="line">redis_master.hset(<span class="string">'person'</span>, <span class="string">'name'</span>, <span class="string">'xiaoming'</span>)</span><br><span class="line"><span class="comment"># 获取数据 得到的是byte类型数据 需要decode解码</span></span><br><span class="line">name = redis_slave.hget(<span class="string">'person'</span>, <span class="string">'name'</span>)</span><br><span class="line"><span class="built_in">print</span>(name.decode())</span><br></pre></td></tr></table></figure><h2 id="文件示例"><a href="#文件示例" class="headerlink" title="文件示例"></a>文件示例</h2></li></ol><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> redis <span class="keyword">import</span> Redis</span><br><span class="line"></span><br><span class="line"><span class="keyword">from</span> redis.sentinel <span class="keyword">import</span> Sentinel</span><br><span class="line"></span><br><span class="line"><span class="comment"># 你的 redis 哨兵的地址和端口</span></span><br><span class="line">REDIS_SENTINELS = [</span><br><span class="line"> (<span class="string">'127.0.0.1'</span>, <span class="string">'27000'</span>),</span><br><span class="line"> (<span class="string">'127.0.0.1'</span>, <span class="string">'27001'</span>),</span><br><span class="line"> (<span class="string">'127.0.0.1'</span>, <span class="string">'27002'</span>),</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment"># 获取哨兵对象 存到app对象里，在视图中可以通过current_app获取到</span></span><br><span class="line">_sentinel = Sentinel(REDIS_SENTINELS)</span><br><span class="line"></span><br><span class="line"><span class="comment"># 监控的节点名字 mymaster</span></span><br><span class="line">REDIS_SENTINEL_SERVICE_NAME = <span class="string">'mymaster'</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">main</span>():</span></span><br><span class="line"> <span class="comment"># 通过哨兵对象 获取主节点对象 用来写入信息</span></span><br><span class="line"> redis_master: Redis = _sentinel.master_for(REDIS_SENTINEL_SERVICE_NAME)</span><br><span class="line"> <span class="comment"># 通过哨兵对象 获取从节点对象 用来获取信息</span></span><br><span class="line"> redis_slave = _sentinel.slave_for(REDIS_SENTINEL_SERVICE_NAME)</span><br><span class="line"></span><br><span class="line"> <span class="comment"># 写入数据</span></span><br><span class="line"> redis_master.hset(<span class="string">'person'</span>, <span class="string">'name'</span>, <span class="string">'xiaoming'</span>)</span><br><span class="line"> <span class="comment"># 获取数据 得到的是byte类型数据 需要decode解码</span></span><br><span class="line"> name = redis_slave.hget(<span class="string">'person'</span>, <span class="string">'name'</span>)</span><br><span class="line"> <span class="built_in">print</span>(name.decode())</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> __name__ == <span class="string">'__main__'</span>:</span><br><span class="line"> main()</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Redis </tag>
</tags>
</entry>
<entry>
<title>Redis配置哨兵</title>
<link href="/2021/12/12/Redis%E9%85%8D%E7%BD%AE%E5%93%A8%E5%85%B5/"/>
<url>/2021/12/12/Redis%E9%85%8D%E7%BD%AE%E5%93%A8%E5%85%B5/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstaticdata.yuanshihui.com%2Fdata%2FM00%2F6B%2F48%2FCIECAFtXNqyAJ117AABgsxRD-vs598.png&refer=http%3A%2F%2Fstaticdata.yuanshihui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641607439&t=3fe57771c8cbb3351a2c376bba6f5c00" alt="Redis"></p><h3 id="Redis-sentinel（哨兵）"><a href="#Redis-sentinel（哨兵）" class="headerlink" title="Redis sentinel（哨兵）"></a>Redis sentinel（哨兵）</h3><p><strong>主从切换技术的方法是：当主服务器宕机后，需要手动把一台从服务器切换为主服务器，这就需要人工干预，费事费力，还会造成一段时间内服务不可用。</strong>这不是一种推荐的方式，更多时候，我们优先考虑<strong>哨兵模式</strong>。</p><h3 id="哨兵概论与运行机制"><a href="#哨兵概论与运行机制" class="headerlink" title="哨兵概论与运行机制"></a>哨兵概论与运行机制</h3><p>哨兵模式是一种特殊的模式，首先Redis提供了哨兵的命令，哨兵是一个独立的进程，作为进程，它会独立运行。其原理是<strong>哨兵通过发送命令，等待Redis服务器响应，从而监控运行的多个Redis实例。</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://upload-images.jianshu.io/upload_images/11320039-57a77ca2757d0924.png?imageMogr2/auto-orient/strip%7CimageView2/2/format/webp" alt="哨兵运行机制"></p><h3 id="Redis-Sentinel的主要功能"><a href="#Redis-Sentinel的主要功能" class="headerlink" title="Redis Sentinel的主要功能"></a>Redis Sentinel的主要功能</h3><p>Sentinel的主要功能包括主节点存活检测、主从运行情况检测、自动故障转移（failover）、主从切换。Redis的Sentinel最小配置是一主一从。 Redis的Sentinel系统可以用来管理多个Redis服务器，该系统可以执行以下四个任务：</p><ul><li><p><strong><code>监控</code></strong></p><p>Sentinel会不断的检查主服务器和从服务器是否正常运行。</p></li><li><p>通知</p><p>当被监控的某个Redis服务器出现问题，Sentinel通过API脚本向管理员或者其他的应用程序发送通知。</p></li><li><p><strong><code>自动故障转移</code></strong></p><p>当主节点不能正常工作时，Sentinel会开始一次自动的故障转移操作，它会将与失效主节点是主从关系的其中一个从节点升级为新的主节点， 并且将其他的从节点指向新的主节点。</p><blockquote><p>当哨兵监测到master宕机，会自动将slave切换成master，然后通过<strong>发布订阅模式</strong>通知其他的从服务器，修改配置文件，让它们切换主机</p></blockquote></li><li><p>配置提供者</p><p>在Redis Sentinel模式下，客户端应用在初始化时连接的是Sentinel节点集合，从中获取主节点的信息。</p></li></ul><h3 id="Redis配置哨兵模式"><a href="#Redis配置哨兵模式" class="headerlink" title="Redis配置哨兵模式"></a>Redis配置哨兵模式</h3><p>如图：配置3个哨兵和1主2从的Redis服务器来演示这个过程。</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://upload-images.jianshu.io/upload_images/11320039-3f40b17c0412116c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/747/format/webp" alt="Redis配置哨兵模式"></p><h4 id="第一步-配置一主两从"><a href="#第一步-配置一主两从" class="headerlink" title="第一步 配置一主两从"></a>第一步 配置一主两从</h4><p><strong>如果不会配主从的话可以去查看我之前的文章 <a href="https://jiaoyanxia.github.io/2021/12/10/Redis%E4%B8%BB%E4%BB%8E%E9%85%8D%E7%BD%AE/"><code>主从配置</code></a></strong></p><ol><li><p>在原先的从基础上再拷贝一个从</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># cp 要拷贝的文件 拷贝完的文件</span></span><br><span class="line">sudo cp redis1.conf redis2.conf</span><br></pre></td></tr></table></figure></li><li><p>更改从的配置端口</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 进入文本编辑</span></span><br><span class="line">sudo gedit /etc/redis/redis2.conf</span><br><span class="line"><span class="comment"># 找到 port 更改为 6381 # 有一个从的端口为 6380</span></span><br><span class="line">port <span class="number">6381</span></span><br></pre></td></tr></table></figure></li><li><p>测试运行</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ps -aux|grep redis</span><br></pre></td></tr></table></figure><h5 id="如果出现-默认的主从进程-就强制删除-强制删除不了强制停止"><a href="#如果出现-默认的主从进程-就强制删除-强制删除不了强制停止" class="headerlink" title="如果出现 默认的主从进程 就强制删除 强制删除不了强制停止"></a><em>如果出现 默认的主从进程 <strong>就强制删除 强制删除不了强制停止</strong></em></h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 强制停止</span></span><br><span class="line">/etc/init.d/redis-server stop</span><br><span class="line"><span class="comment"># 执行完要求你输入密码</span></span><br></pre></td></tr></table></figure><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://cdn.jsdelivr.net/gh/jiaoyanxia/picgo@master/blogimg/202112131014030.png" alt="强制停止"></p></li></ol><h4 id="第二步-配置三哨兵"><a href="#第二步-配置三哨兵" class="headerlink" title="第二步 配置三哨兵"></a>第二步 配置三哨兵</h4><p>配置3个哨兵，每个哨兵的配置都是一样的。在Redis安装目录下有一个sentinel.conf文件，copy一份进行修改。如果没有 就自行创建一个文件 (<code>sudo touch xxx</code>)在里面更改配置</p><p><strong>配置哨兵文件如下：</strong></p><h5 id="三个哨兵-分别在27000-2700127002-三个端口上"><a href="#三个哨兵-分别在27000-2700127002-三个端口上" class="headerlink" title="三个哨兵 分别在27000 2700127002 三个端口上"></a>三个哨兵 分别在27000 2700127002 三个端口上</h5><p><strong>重点更改下面 <code>第二行的的端口号</code> 以及 <code>第十七行的主服务器ip端口地址</code></strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 端口</span></span><br><span class="line">port <span class="number">27000</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 是否后台启动</span></span><br><span class="line">daemonize yes</span><br><span class="line"></span><br><span class="line"><span class="comment"># pid文件路径</span></span><br><span class="line">pidfile /var/run/redis-sentinel.pid</span><br><span class="line"></span><br><span class="line"><span class="comment"># 日志文件路径</span></span><br><span class="line">logfile <span class="string">"/var/log/redis/sentinel.log"</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># rdb数据备份的目录</span></span><br><span class="line"><span class="built_in">dir</span> /var/lib/redis</span><br><span class="line"></span><br><span class="line"><span class="comment"># 定义Redis主的别名, IP, 端口，这里的2指的是需要至少2个Sentinel认为主Redis挂了才最终会采取下一步行为</span></span><br><span class="line">sentinel monitor mymaster <span class="number">192.</span>xxx.xx<span class="number">.128</span> <span class="number">6379</span> <span class="number">2</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果mymaster 30秒内没有响应，则认为其主观失效</span></span><br><span class="line">sentinel down-after-milliseconds mymaster <span class="number">30000</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果master重新选出来后，其它slave节点能同时并行从新master同步数据的台数有多少个，显然该值越大，所有slave节点完成同步切换的整体速度越快，但如果此时正好有人在访问这些slave，可能造成读取失败，影响面会更广。最保守的设置为1，同一时间，只能有一台干这件事，这样其它slave还能继续服务，但是所有slave全部完成缓存更新同步的进程将变慢。</span></span><br><span class="line">sentinel parallel-syncs mymaster <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 该参数指定一个时间段，在该时间段内没有实现故障转移成功，则会再一次发起故障转移的操作，单位毫秒</span></span><br><span class="line">sentinel failover-timeout mymaster <span class="number">180000</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 不允许使用SENTINEL SET设置notification-script和client-reconfig-script</span></span><br><span class="line">sentinel deny-scripts-reconfig yes</span><br></pre></td></tr></table></figure><h5 id="哨兵执行命令"><a href="#哨兵执行命令" class="headerlink" title="哨兵执行命令"></a>哨兵执行命令</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 开启哨兵 文件名后面添加--sentinel</span></span><br><span class="line">sudo redis-server sentine01.conf --sentinel</span><br></pre></td></tr></table></figure><h4 id="第三步-建立连接"><a href="#第三步-建立连接" class="headerlink" title="第三步 建立连接"></a>第三步 建立连接</h4><p>用redic-cli 连接服务器后 检查主从状态</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 进入服务器后 执行命令</span></span><br><span class="line">info replication</span><br></pre></td></tr></table></figure><h5 id="主状态："><a href="#主状态：" class="headerlink" title="主状态："></a>主状态：</h5><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://cdn.jsdelivr.net/gh/jiaoyanxia/picgo@master/blogimg/202112131019794.png" alt="主状态"></p><h5 id="从状态："><a href="#从状态：" class="headerlink" title="从状态："></a>从状态：</h5><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://cdn.jsdelivr.net/gh/jiaoyanxia/picgo@master/blogimg/202112131023602.png" alt="从状态"></p><h5 id="启动主从服务器与哨兵"><a href="#启动主从服务器与哨兵" class="headerlink" title="启动主从服务器与哨兵"></a>启动主从服务器与哨兵</h5><p>这里就不演示代码了 - <strong>最后执行状态</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://cdn.jsdelivr.net/gh/jiaoyanxia/picgo@master/blogimg/202112131044085.png" alt="OwO"></p><p>可以自己尝试全部开始后去删除主服务器从服务器的**<code>自动故障转移</code>**一般都是转移到默认从服务</p><p>当**主服务器(旧)**再启动时，已经转移为当前主服务器的从服务器了。</p><p>参考文章：<a href="https://www.jianshu.com/p/06ab9daf921d">秃头哥编程之Redis哨兵</a></p>]]></content>
<tags>
<tag> Redis </tag>
</tags>
</entry>
<entry>
<title>Redis主从配置</title>
<link href="/2021/12/10/Redis%E4%B8%BB%E4%BB%8E%E9%85%8D%E7%BD%AE/"/>
<url>/2021/12/10/Redis%E4%B8%BB%E4%BB%8E%E9%85%8D%E7%BD%AE/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstaticdata.yuanshihui.com%2Fdata%2FM00%2F6B%2F48%2FCIECAFtXNqyAJ117AABgsxRD-vs598.png&refer=http%3A%2F%2Fstaticdata.yuanshihui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641607439&t=3fe57771c8cbb3351a2c376bba6f5c00" alt="Redis"></p><h3 id="本教程环境基于-Ubuntu-8-3-0-版本-linux-系统配置-Redis-主从"><a href="#本教程环境基于-Ubuntu-8-3-0-版本-linux-系统配置-Redis-主从" class="headerlink" title="本教程环境基于 Ubuntu 8.3.0 版本 linux 系统配置 Redis 主从"></a>本教程环境基于 Ubuntu 8.3.0 版本 linux 系统配置 Redis 主从</h3><h2 id="主从概念"><a href="#主从概念" class="headerlink" title="主从概念"></a>主从概念</h2><ul><li> ⼀个 master 可以拥有多个 slave，⼀个 slave ⼜可以拥有多个 slave，如此下去，形成了强⼤的多级服务器集群架构</li><li> master 用来写数据，slave 用来读数据，经统计：网站的读写比率是 10:1</li><li> 通过主从配置可以实现读写分离</li></ul><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/6ab566a17809ae78.png"></p><h2 id="主从配置"><a href="#主从配置" class="headerlink" title="主从配置"></a>主从配置</h2><p><strong>查看当前主机 IP 地址（记住你的 ip 地址）</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/59746ee4e68fb40d.png" alt="主机IP地址"></p><p>若没有联网可以前往我的<a href="https://jiaoyanxia.github.io/2021/11/15/win%E7%AB%AF%E6%93%8D%E6%8E%A7VM%E8%99%9A%E6%8B%9F%E6%9C%BA/">另一篇文章</a>配置网络</p><h4 id="删除-redis-默认执行的-ip-端口"><a href="#删除-redis-默认执行的-ip-端口" class="headerlink" title="删除 redis 默认执行的 ip 端口"></a>删除 redis 默认执行的 ip 端口</h4><blockquote><p>若不删除的话 默认会执行 彻底清除完毕再开启主从配置</p></blockquote><p>查看当前 redis 所有进程</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ps -aux|grep redis</span><br></pre></td></tr></table></figure><p>除了后缀为 <code>grep --color=auto redis</code> 其余全都删除</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># kill 删除命令 -9 强制 23131端口号</span></span><br><span class="line"><span class="comment"># 端口为你要删除的进程的第二个字段(名称后面的数字)</span></span><br><span class="line">sudo kill -<span class="number">9</span> <span class="number">23131</span></span><br></pre></td></tr></table></figure><h3 id="配置主"><a href="#配置主" class="headerlink" title="配置主"></a>配置主</h3><ol><li><p>进入 /etc/redis 文件目录修改 <code>redis.conf</code> (主)文件</p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 进入目录</span></span><br><span class="line">cd /etc/redis</span><br><span class="line"><span class="comment"># 用记事本修改文件</span></span><br><span class="line">sudo gedit redis.conf</span><br></pre></td></tr></table></figure><p> <em>修改内容如下：</em></p><p> <strong>开启第二行的 bind 修改为你本机的 ip 地址 端口不用改</strong></p><p> <img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/5c5eed97e96d9357.png"></p></li><li><p>重启 redis 服务</p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 重启主服务器</span></span><br><span class="line">sudo service redis stop</span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看对应ip及端口号的主进程是否开启</span></span><br><span class="line"><span class="comment"># 主端口号默认为(6379)</span></span><br><span class="line">ps -aux|grep redis</span><br><span class="line"></span><br><span class="line"><span class="comment"># 运行主服务器</span></span><br><span class="line">sudo redis-server /etc/redis/redis.conf</span><br></pre></td></tr></table></figure><p> <em>如果运行成功并且可以运行 redis 环境与命令 <code>主</code>就配置成功了</em></p></li></ol><h3 id="配置从"><a href="#配置从" class="headerlink" title="配置从"></a>配置从</h3><ol><li><p>进入 /etc/redis 文件目录复制 <code>redis.conf</code> (主)文件</p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 进入目录</span></span><br><span class="line">cd /etc/redis</span><br><span class="line"><span class="comment"># 复制主文件</span></span><br><span class="line">sudo cp redis.conf ./redis1.conf</span><br></pre></td></tr></table></figure><p> 现在的从文件为<code>redis1.conf</code>（从）</p></li><li><p>修改从服务器配置文件</p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 用记事本修改文件</span></span><br><span class="line">sudo gedit redis1.conf</span><br></pre></td></tr></table></figure><p> <em>修改内容如下：</em></p><p> <strong>第一步是一样的 因为需绑定一样的端口</strong></p><p> <img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/5c5eed97e96d9357.png"></p><p> <strong>第二步 <code>ctrl+f</code> 找到 port 端口配置 更改为<code>port 6380</code></strong></p><p> <img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/601f0f5931152768.png"></p><p> <strong>第三步 同样找到 slaveof 新建一行 添加从属于哪个主服务器</strong></p><p> <img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/b46f6318555c48e9.png"></p><p> <em>如果运行成功并且可以运行 redis 环境与命令 <code>主</code>就配置成功了</em></p></li></ol><h3 id="测试主从"><a href="#测试主从" class="headerlink" title="测试主从"></a>测试主从</h3><p><strong>一图解：</strong></p><p>这里我开启三个终端分别用来测试进程，主 ，从</p><ol><li><p>第一步<code>ps -aux|grep redis</code> 查看所有进程</p></li><li><p>第二步运行主从</p><p> <strong>主：</strong> <code>sudo redis-server /etc/redis/redis.conf</code></p><p> <strong>从：</strong> <code>sudo redis-server /etc/redis/1redis.conf</code></p></li><li><p>再次查看进程后，开始使用</p></li></ol><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/04cc9b187825991c.png" alt="查看进程"></p><ol start="4"><li>通过主创建从获取测试成功<br><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/0ef5a16c0f523db7.png" alt="主从"></li></ol>]]></content>
<tags>
<tag> Redis </tag>
</tags>
</entry>
<entry>
<title>Redis基本操作</title>
<link href="/2021/12/09/Redis%E5%9F%BA%E6%9C%AC%E5%91%BD%E4%BB%A4/"/>
<url>/2021/12/09/Redis%E5%9F%BA%E6%9C%AC%E5%91%BD%E4%BB%A4/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstaticdata.yuanshihui.com%2Fdata%2FM00%2F6B%2F48%2FCIECAFtXNqyAJ117AABgsxRD-vs598.png&refer=http%3A%2F%2Fstaticdata.yuanshihui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641607439&t=3fe57771c8cbb3351a2c376bba6f5c00" alt="Redis"></p><h3 id="基本命令"><a href="#基本命令" class="headerlink" title="基本命令"></a>基本命令</h3><h4 id="服务器端"><a href="#服务器端" class="headerlink" title="服务器端"></a>服务器端</h4><ul><li>启动服务端</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">redis-server</span><br></pre></td></tr></table></figure><ul><li>查看帮助手册</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">redis-server --<span class="built_in">help</span></span><br></pre></td></tr></table></figure><ul><li>查看redis服务器进程</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ps -aux|grep redis</span><br></pre></td></tr></table></figure><ul><li>杀死redis服务器</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># sudo kell 删除 -9 强制 指定服务器 (强制删除命令)</span></span><br><span class="line">sudo kell -<span class="number">9</span> pid</span><br></pre></td></tr></table></figure><ul><li>使用指定的配置文件开启redis服务</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># sudo redis-server 源路径</span></span><br><span class="line">sudo redis-server /etc/redis/redis.conf</span><br></pre></td></tr></table></figure><h4 id="客户端"><a href="#客户端" class="headerlink" title="客户端"></a>客户端</h4><ul><li>启动客户端</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">redis-cli</span><br></pre></td></tr></table></figure><ul><li>查看帮助手册</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">redis-cli --<span class="built_in">help</span></span><br></pre></td></tr></table></figure><ul><li>运行测试命令</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 客户端中</span></span><br><span class="line">ping</span><br></pre></td></tr></table></figure><ul><li>切换数据库</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># select [0-15] 默认使用第一个，共有16个数据库</span></span><br><span class="line">select <span class="number">7</span></span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Redis </tag>
</tags>
</entry>
<entry>
<title>Redis安装</title>
<link href="/2021/12/09/Redis%E5%AE%89%E8%A3%85/"/>
<url>/2021/12/09/Redis%E5%AE%89%E8%A3%85/</url>
<content type="html"><</code></p><h3 id="安装方式一"><a href="#安装方式一" class="headerlink" title="安装方式一"></a>安装方式一</h3><ul><li>使用apt，<strong>注意提前检查下apt的源</strong>，如果不对 就修改<a href="https://developer.aliyun.com/mirror/ubuntu?spm=a2c6h.13651102.0.0.3e221b11jRXX1I">镜像源</a></li><li>安装前 <code>sudo apt-get update</code></li><li>安装<code>redis</code>命令如下：</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install redis-server </span><br></pre></td></tr></table></figure><p><strong>注意：安装完后关闭终端重新开启，才能使用</strong></p><ul><li><p>安装完后检查 执行程序都在 usr/bin/下</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/9af8447f2193709e.png" alt="查看文件"></p></li><li><p>默认安装后会启动，命令如下</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">sudo service redis-server start <span class="comment"># 启动</span></span><br><span class="line">sudo service redis-server stop <span class="comment"># 停止</span></span><br><span class="line">sudo service redis-server restart <span class="comment"># 重启</span></span><br></pre></td></tr></table></figure></li><li><p>查看进程 </p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ps -aux|grep redis</span><br></pre></td></tr></table></figure><p>如果出现 *<em>redis-server <em>:6379 <code>默认端口 6379</code></em></em> ，说明redis正在运行</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/7f969644330b379d.png" alt="redis 查看进程"></p></li><li><p>进入操作环境</p><p>现在我们输入 <code>redis-cli</code> 命令进入操作环境。</p><p>127.0.0.1 是本机 IP ，6379 是 redis 服务端口。</p><p>再执行 <code>ping</code> 命令查看状态。</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/3322b60f84807863.png" alt="redis - ping"></p><p>如果出现 <code>PONG</code> ，说明已经成功安装了redis!</p></li><li><p><strong>对应的这种安装方式中出错的卸载方案</strong>：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get purge --auto-remove redis-server</span><br><span class="line">--auto-remove 删除 redis-server <span class="comment"># 软件包和不再需要的其他相关软件包</span></span><br><span class="line">purge <span class="comment"># 删除 redis-server的本地/配置文件</span></span><br></pre></td></tr></table></figure></li></ul><h3 id="安装方式二-【源码安装】"><a href="#安装方式二-【源码安装】" class="headerlink" title="安装方式二 【源码安装】"></a>安装方式二 【源码安装】</h3><p><strong>下载地址：</strong><a href="http://redis.io/download">http://redis.io/download</a>，下载最新稳定版本。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># wget http://download.redis.io/releases/redis-6.0.8.tar.gz</span></span><br><span class="line"><span class="comment"># tar xzf redis-6.0.8.tar.gz</span></span><br><span class="line"><span class="comment"># cd redis-6.0.8</span></span><br><span class="line"><span class="comment"># make</span></span><br></pre></td></tr></table></figure><p>执行完 <strong>make</strong> 命令后，redis-6.0.8 的 <strong>src</strong> 目录下会出现编译后的 redis 服务程序 redis-server，还有用于测试的客户端程序 redis-cli：</p><p>下面启动 redis 服务：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># cd src</span></span><br><span class="line"><span class="comment"># ./redis-server</span></span><br></pre></td></tr></table></figure><p>注意这种方式启动 redis 使用的是默认配置。也可以通过启动参数告诉 redis 使用指定配置文件使用下面命令启动。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># cd src</span></span><br><span class="line"><span class="comment"># ./redis-server ../redis.conf</span></span><br></pre></td></tr></table></figure><p><strong>redis.conf</strong> 是一个默认的配置文件。我们可以根据需要使用自己的配置文件。</p><p>启动 redis 服务进程后，就可以使用测试客户端程序 redis-cli 和 redis 服务交互了。 比如：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># cd src</span></span><br><span class="line"><span class="comment"># ./redis-cli</span></span><br><span class="line">redis> <span class="built_in">set</span> foo bar</span><br><span class="line">OK</span><br><span class="line">redis> get foo</span><br><span class="line"><span class="string">"bar"</span></span><br></pre></td></tr></table></figure><h2 id="Ubuntu-安装下载"><a href="#Ubuntu-安装下载" class="headerlink" title="Ubuntu 安装下载"></a>Ubuntu 安装下载</h2><p>在 Ubuntu 系统安装 Redis 可以使用以下命令:</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">sudo apt update <span class="comment"># 更新 apt </span></span><br><span class="line">sudo apt install redis-server <span class="comment"># 安装redis</span></span><br></pre></td></tr></table></figure><p><strong>如果以上出报错现镜像源，则改动镜像源操作：</strong></p><p>前提：<a href="https://mirror.tuna.tsinghua.edu.cn/help/ubuntu/">配置及更换清华镜像源</a></p><blockquote><p>编程环境为<code>Ubuntu</code>终端 (<strong>>>></strong> 为执行代码)</p></blockquote><ol><li><p>查看源目录</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 进入源文件目录 </span></span><br><span class="line"><span class="meta">>>> </span>cd /etc/apt/ </span><br><span class="line"><span class="comment"># 查看目录结构</span></span><br><span class="line"><span class="meta">>>> </span>ls </span><br><span class="line"><span class="comment"># 找到 sources.list 文件</span></span><br><span class="line">sources.<span class="built_in">list</span></span><br></pre></td></tr></table></figure></li><li><p>先把 sources.list 文件中的 <code>https</code> 后面的 <code>s</code> 去掉成(http)</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 编辑镜像源文件</span></span><br><span class="line"><span class="meta">>>> </span>sudo gedit sources.<span class="built_in">list</span></span><br><span class="line"></span><br><span class="line"><span class="string">'''弹出txt后手动更改'''</span></span><br></pre></td></tr></table></figure></li><li><p>更改后 重新更新源文件</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get update</span><br></pre></td></tr></table></figure></li><li><p>再执行命令</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install -y ca-certificates</span><br></pre></td></tr></table></figure></li><li><p>执行完以上两个命令后，回到 sources.list 文件中的把 <code>http</code> 后面加 <code>s</code> (<code>改回https</code>)</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 编辑镜像源文件</span></span><br><span class="line"><span class="meta">>>> </span>sudo gedit sources.<span class="built_in">list</span></span><br></pre></td></tr></table></figure></li><li><p>更改后 重新更新源文件</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get update</span><br></pre></td></tr></table></figure></li><li><p>重新安装 <code>redis</code></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install redis-server</span><br></pre></td></tr></table></figure></li><li><p>查看进程 </p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ps -aux|grep redis</span><br></pre></td></tr></table></figure><p>如果出现 *<em>redis-server <em>:6379 <code>默认端口 6379</code></em></em> ，说明redis正在运行</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/7f969644330b379d.png" alt="redis 查看进程"></p></li><li><p>进入操作环境</p><p>现在我们输入 <code>redis-cli</code> 命令进入操作环境。</p><p>127.0.0.1 是本机 IP ，6379 是 redis 服务端口。</p><p>再执行 <code>ping</code> 命令查看状态。</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/3322b60f84807863.png" alt="redis - ping"></p><p>如果出现 <code>PONG</code> ，说明已经成功安装了redis!</p></li></ol><h3 id="启动-Redis"><a href="#启动-Redis" class="headerlink" title="启动 Redis"></a>启动 Redis</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"># redis-server</span><br></pre></td></tr></table></figure><h3 id="查看-redis-是否启动？"><a href="#查看-redis-是否启动？" class="headerlink" title="查看 redis 是否启动？"></a>查看 redis 是否启动？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"># redis-cli</span><br></pre></td></tr></table></figure><p>以上命令将打开以下终端：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">redis 127.0.0.1:6379></span><br></pre></td></tr></table></figure><p>127.0.0.1 是本机 IP ，6379 是 redis 服务端口。现在我们输入 PING 命令。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">redis 127.0.0.1:6379> ping</span><br><span class="line">PONG</span><br></pre></td></tr></table></figure><p>以上说明我们已经成功安装了redis。</p><h3 id="其他问题"><a href="#其他问题" class="headerlink" title="其他问题"></a>其他问题</h3><h5 id="无法在-ubuntu-18-04-上安装-redis-server"><a href="#无法在-ubuntu-18-04-上安装-redis-server" class="headerlink" title="无法在 ubuntu 18.04 上安装 redis-server"></a><a href="https://stackoverflow.com/questions/50668845/cannot-install-redis-server-on-ubuntu-18-04">无法在 ubuntu 18.04 上安装 redis-server</a></h5>]]></content>
<tags>
<tag> Redis </tag>
</tags>
</entry>
<entry>
<title>Redis数据操作</title>
<link href="/2021/12/09/Redis%E6%95%B0%E6%8D%AE%E6%93%8D%E4%BD%9C/"/>
<url>/2021/12/09/Redis%E6%95%B0%E6%8D%AE%E6%93%8D%E4%BD%9C/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstaticdata.yuanshihui.com%2Fdata%2FM00%2F6B%2F48%2FCIECAFtXNqyAJ117AABgsxRD-vs598.png&refer=http%3A%2F%2Fstaticdata.yuanshihui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641607439&t=3fe57771c8cbb3351a2c376bba6f5c00" alt="Redis"></p><h2 id="数据结构"><a href="#数据结构" class="headerlink" title="数据结构"></a>数据结构</h2><p>Redis 数据类型分为：<strong>字符串类型</strong>、<strong>散列类型</strong>、<strong>列表类型</strong>、<strong>集合类型</strong>、<strong>有序集合类型</strong>。</p><p>Redis 这么火，它运行有多块？一台普通的笔记本电脑，可以在 1 秒钟内完成十万次的读写操作。</p><p>Redis 是 <code>key-value</code> 的数据结构，每条数据都是⼀个键值对键的类型是字符串，键的类型是字符串</p><p>原子操作：最小的操作单位，不能继续拆分。即最小的执行单位，不会被其他命令插入。高并发下不存在竞态条件。</p><p>KEY 的命名：一个良好的建议是 article:1:title 来存储 ID 为 1 的文章的标题。</p><p><strong>注意：键不能重复</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="http://www.freeoa.net/images/unixsupt/db/2019/redis_dt_obj.png"></p><h3 id="keys-基本命令"><a href="#keys-基本命令" class="headerlink" title="keys 基本命令"></a>keys 基本命令</h3><ul><li><p><code>Keys *</code></p><p> 该命令用于查看所有键。</p></li><li><p><code>Keys 'xx'</code></p><p> 该命令用于查看名称中包含 xx 的键</p></li><li><p><code>type key</code></p><p> 该命令用于查看键对应的 value 的类型</p></li><li><p><code>del key</code><br> 该命令用于在 key 存在时删除 key。</p></li><li><p><code>dump key</code><br> 序列化给定 key ，并返回被序列化的值。</p></li><li><p><code>exists key</code><br> 检查给定 key 是否存在。</p></li><li><p><code>expire key seconds</code><br> 为给定 key 设置过期时间，以秒计。</p></li><li><p><code>expireat key timestamp</code><br> expireat 的作用和 expire 类似，都用于为 key 设置过期时间。</p><p> 不同在于 expireat 命令接受的时间参数是 UNIX 时间戳(unix timestamp)</p></li><li><p><code>pexpire key milliseconds</code><br> 设置 key 的过期时间以毫秒计。</p></li><li><p><code>expirtae key milliseconds-timestamp</code><br> 设置 key 过期时间的时间戳(unix timestamp) 以毫秒计。</p></li><li><p><code>key pattern</code><br> 查找所有符合给定模式( pattern)的 key 。</p></li><li><p><code>move key db</code><br> 将当前数据库的 key 移动到给定的数据库 db 当中。</p></li><li><p><code>persist key</code><br> 移除 key 的过期时间，key 将持久保持。</p></li><li><p><code>pttl key</code><br> 以毫秒为单位返回 key 的剩余的过期时间。</p></li></ul><h3 id="String-类型"><a href="#String-类型" class="headerlink" title="String 类型"></a>String 类型</h3><p>字符串是 Redis 中的最基础的数据结构，我们保存到 Redis 中的 key，也就是键，就是字符串结构的。除此之外，Redis 中其它数据结构也是在字符串的基础上设计的，可见字符串结构对于 Redis 是多么重要。</p><p>Redis 中的字符串结构可以保存多种数据类型。如：简单的字符串、JSON、XML、二进制等，</p><p>但有一点要特别注意：<strong>在 Redis 中字符串类型的值最大只能保存 512 MB。</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="http://www.freeoa.net/images/unixsupt/db/2019/redis_dt_str.png" alt="String图解"></p><h4 id="保存"><a href="#保存" class="headerlink" title="保存"></a>保存</h4><p>语法： <code>set key value [EX seconds] [PX milliseconds] [NX|XX]</code></p><p>set 命令有几个非必须的选项，下面我们看一下它们的具体说明：</p><blockquote><p> EX seconds：为键设置秒级过期时间<br> PX milliseconds：为键设置毫秒级过期时间<br> NX：键必须不存在，才可以设置成功，用于添加<br> XX：键必须存在，才可以设置成功，用于更新</p></blockquote><ul><li><p><strong>设置键值</strong></p><p> 语法：<code>set key value</code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 如设置键为name 值为 alex</span></span><br><span class="line"><span class="built_in">set</span> name alex</span><br></pre></td></tr></table></figure></li><li><p><strong>设置键值及过期时间，以秒为单位</strong></p><p> 语法：<code>setex key seconds value</code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 如设置键为eat 值为 apple 过期时间为5秒的数据</span></span><br><span class="line"><span class="built_in">set</span> eat <span class="number">5</span> apple</span><br></pre></td></tr></table></figure><blockquote><p>在时间存在中可持续获取，过期后值为<strong>（nil）</strong></p></blockquote></li><li><p><strong>设置多个键值</strong></p><p> 语法：<code>mset key1 value1 key2 value2 ...</code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 如设置键多个键值</span></span><br><span class="line">mset a <span class="number">10</span> b <span class="number">20</span> c <span class="number">30</span></span><br></pre></td></tr></table></figure></li><li><p><strong>追加值</strong></p><p> 语法：<code>append key value</code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 向键为name 追加值 'Big'</span></span><br><span class="line">append name Big</span><br></pre></td></tr></table></figure></li></ul><h4 id="获取"><a href="#获取" class="headerlink" title="获取"></a>获取</h4><ul><li><p>根据键获取值，如果不存在此键则返回 nil</p><p> 语法：<code>get key </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 获取name的值</span></span><br><span class="line">get name</span><br><span class="line">--alex</span><br></pre></td></tr></table></figure></li><li><p>根据多个键获取多个值</p><p> 语法：<code>mget key1 key2... </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 获取a1,a2,a3的值</span></span><br><span class="line">get a1 a2 a3</span><br><span class="line">--<span class="number">10</span> <span class="number">20</span> <span class="number">30</span></span><br></pre></td></tr></table></figure></li></ul><h3 id="哈希类型"><a href="#哈希类型" class="headerlink" title="哈希类型"></a><strong>哈希类型</strong></h3><p><strong>Redis 中哈希类型都是键值对结构的，所以要特别注意这里的 value 并不是指 Redis 中 key 的 value，而是哈希类型中的 field 所对应的 value。</strong></p><blockquote><p>hash ⽤于存储对象，对象的结构为属性、值</p></blockquote><p><code>值的类型为string</code></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="http://www.freeoa.net/images/unixsupt/db/2019/redis_dt_hash.png"></p><h4 id="增加修改"><a href="#增加修改" class="headerlink" title="增加修改"></a>增加修改</h4><ul><li><p>设置单个属性</p><p> 语法：<code>hset key field value </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 设置键 user的属性 name 为 Shrimps</span></span><br><span class="line">hset user name Shrimps</span><br><span class="line">--(inteqer) <span class="number">1</span></span><br></pre></td></tr></table></figure></li><li><p>设置多个属性</p><p> 语法：<code>hmset key field1 value1 field2 value2 ... </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 设置键 test 的属性 name 为 mono、 属性 age 为 6</span></span><br><span class="line">hmset test name mono age <span class="number">6</span></span><br><span class="line">-OK</span><br></pre></td></tr></table></figure></li></ul><h4 id="获取-1"><a href="#获取-1" class="headerlink" title="获取"></a>获取</h4><ul><li><p>获取指定键所有的属性</p><p> 语法：<code>hkeys key </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 获取键 test 的所有属性</span></span><br><span class="line">hkeys test</span><br><span class="line">--<span class="number">1</span>) <span class="string">'name'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'age'</span></span><br></pre></td></tr></table></figure></li><li><p>获取⼀个属性的值</p><p> 语法：<code>hget key field </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># ：获取键 test 属性 'name' 的值</span></span><br><span class="line">hget test name</span><br><span class="line">-<span class="string">'mono'</span></span><br></pre></td></tr></table></figure></li><li><p>获取多个属性的值</p><p> 语法：<code>hmget key field1 field2 ... </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 获取键 test 属性 'name' 与 'age' 的值</span></span><br><span class="line">hmget tset name age</span><br><span class="line">--<span class="number">1</span>) <span class="string">'mono'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'6'</span></span><br></pre></td></tr></table></figure></li><li><p>获取所有属性的值</p><p> 语法：<code>hvals key </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># ：获取键 test 属性 'name' 的值</span></span><br><span class="line">hvals test</span><br><span class="line">--<span class="number">1</span>) <span class="string">'mono'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'6'</span></span><br></pre></td></tr></table></figure></li></ul><h4 id="删除"><a href="#删除" class="headerlink" title="删除"></a>删除</h4><ul><li><p>删除整个 hash 键及值，使⽤ del 命令</p><p> <strong>删除属性，属性对应的值会被⼀起删除</strong></p><p> 语法：<code>hdel key field1 field2 ... </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 删除键 test 的属性'age'</span></span><br><span class="line">hdel test age</span><br><span class="line">--(inteqer) <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 再次查询键test所有属性</span></span><br><span class="line"></span><br><span class="line">hkeys test</span><br><span class="line">--<span class="number">1</span>) <span class="string">'name'</span></span><br></pre></td></tr></table></figure></li></ul><h3 id="list-类型"><a href="#list-类型" class="headerlink" title="list 类型"></a>list 类型</h3><p><strong>Redis 列表类型的特点如下：</strong><br>列表中所有的元素都是有序的，所以它们是可以通过索引获取的，也就是上图中的 lindex 命令。并且在 Redis 中列表类型的索引是从 0 开始的。</p><blockquote><p>列表中的元素是可以重复的，也就是说在 Redis 列表类型中，可以保存同名元素</p></blockquote><p><code>列表的元素类型为string</code></p><p>按照插⼊顺序排序</p><p><strong>如下图所示：</strong><br><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="http://www.freeoa.net/images/unixsupt/db/2019/redis_dt_list3.png" alt="img"></p><p><strong>Redis 中列表类型的插入和弹出操作：</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="http://www.freeoa.net/images/unixsupt/db/2019/redis_dt_list1.png"></p><p><strong>Redis 中列表类型的获取与删除操作：</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="http://www.freeoa.net/images/unixsupt/db/2019/redis_dt_list2.png" alt="img"></p><h4 id="增加"><a href="#增加" class="headerlink" title="增加"></a>增加</h4><ul><li><p>在左侧插⼊数据</p><p> 语法：<code>lpush key value1 value2 ... </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 从键为 strs 的列表左侧加⼊数据 a, b, c</span></span><br><span class="line">lpush strs a b c</span><br><span class="line">-(integer) <span class="number">3</span></span><br><span class="line"></span><br><span class="line"><span class="string">'''获取查看 '''</span></span><br><span class="line">lrange test <span class="number">0</span> <span class="number">3</span></span><br><span class="line">--<span class="number">1</span>) <span class="string">'c'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'b'</span></span><br><span class="line">--<span class="number">3</span>) <span class="string">'a'</span></span><br></pre></td></tr></table></figure></li><li><p>在右侧插⼊数据</p><p> 语法：<code>rpush key value1 value2 ... </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># ：从键为 strs 的列表右侧加⼊数据 0 1</span></span><br><span class="line">rpush strs <span class="number">0</span> <span class="number">1</span></span><br><span class="line">-(integer) <span class="number">5</span></span><br><span class="line"></span><br><span class="line"><span class="string">'''获取查看 '''</span></span><br><span class="line">lrange test <span class="number">0</span> <span class="number">5</span></span><br><span class="line">--<span class="number">1</span>) <span class="string">'c'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'b'</span></span><br><span class="line">--<span class="number">3</span>) <span class="string">'a'</span></span><br><span class="line">--<span class="number">4</span>) <span class="string">'0'</span></span><br><span class="line">--<span class="number">5</span>) <span class="string">'1'</span></span><br></pre></td></tr></table></figure></li><li><p>在指定元素的前或后插⼊新元素</p><p> 语法：<code>linsert key before或after 现有元素 新元素 </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 在键为 test 的列表中元素 'a' 前加⼊ 'bb'</span></span><br><span class="line">linsert test before b aa</span><br><span class="line">--(integer) <span class="number">5</span></span><br><span class="line"></span><br><span class="line"><span class="string">'''获取查看 '''</span></span><br><span class="line">lrange test <span class="number">0</span> <span class="number">5</span></span><br><span class="line">--<span class="number">1</span>) <span class="string">'c'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'b'</span></span><br><span class="line">--<span class="number">3</span>) <span class="string">'bb'</span></span><br><span class="line">--<span class="number">4</span>) <span class="string">'a'</span></span><br><span class="line">--<span class="number">5</span>) <span class="string">'0'</span></span><br><span class="line">--<span class="number">6</span>) <span class="string">'1'</span></span><br></pre></td></tr></table></figure></li></ul><h4 id="获取-2"><a href="#获取-2" class="headerlink" title="获取"></a>获取</h4><ul><li><p>返回列表⾥指定范围内的元素</p><blockquote><p>start、stop 为元素的下标索引</p><p>索引从左侧开始，第⼀个元素为 0</p><p>索引可以是负数，表示从尾部开始计数，如-1 表示最后⼀个元素</p></blockquote><p> 语法：<code>lrange key start stop </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 获取键 test 的列表所有元素</span></span><br><span class="line">lrange test <span class="number">0</span> -<span class="number">1</span></span><br><span class="line">--<span class="number">1</span>) <span class="string">'name'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'age'</span></span><br></pre></td></tr></table></figure></li><li><p>设置指定索引位置的元素值</p><blockquote><p>索引从左侧开始，第⼀个元素为 0</p><p>索引可以是负数，表示尾部开始计数，如-1 表示最后⼀个元素</p></blockquote><p> 语法：<code>lset key index value </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 修改键为 test 的列表中下标为1的元素值为'z'</span></span><br><span class="line">lset a <span class="number">1</span> z</span><br><span class="line">-OK</span><br></pre></td></tr></table></figure></li></ul><h4 id="删除-1"><a href="#删除-1" class="headerlink" title="删除"></a>删除</h4><ul><li><p>删除指定元素</p><blockquote><p>将列表中前 count 次出现的值为 value 的元素移除</p><p><strong>count > 0:</strong> 从头往尾移除</p><p><strong>count < 0:</strong> 从尾往头移除</p><p><strong>count = 0:</strong> 移除所有</p></blockquote><p> 语法：<code>lrem key count value </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># bbc -> 'a'、'b'、'a'、'b'、'a'、'b'</span></span><br><span class="line"><span class="comment"># 从 bbc 列表右侧开始删除2个'b'</span></span><br><span class="line">lrem bbc -<span class="number">2</span> b</span><br><span class="line"><span class="comment"># 从 bbc 列表左侧开始删除2个'a'</span></span><br><span class="line">lrem bbc <span class="number">2</span> a</span><br><span class="line">--<span class="number">1</span>) <span class="string">'b'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'a'</span></span><br></pre></td></tr></table></figure></li></ul><h3 id="set-类型"><a href="#set-类型" class="headerlink" title="set 类型"></a>set 类型</h3><p>Redis 中的集合类型，也就是 set。在 Redis 中 set 也是可以保存多个字符串的，经常有人会分不清 list 与 set，下面我们重点介绍一下它们之间的不同：</p><ul><li> set 中的元素是不可以重复的，而 list 是可以保存重复元素的。</li><li> set 中的元素是无序的，而 list 中的元素是有序的。</li><li> set 中的元素不能通过索引下标获取元素，而 list 中的元素则可以通过索引下标获取元素。</li><li> 除此之外 set 还支持更高级的功能，例如多个 set 取交集、并集、差集等。</li></ul><p><code>⽆序集合 元素为string类型 元素具有唯⼀性，不重复</code></p><p><strong>说明：对于集合没有修改操作</strong></p><h4 id="增加-1"><a href="#增加-1" class="headerlink" title="增加"></a>增加</h4><ul><li><p>添加元素</p><p> 语法：<code>sadd key member1 member2 ... </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 向键 set1 的集合中添加元素 'cat','dog','bunny'</span></span><br><span class="line">sadd set1 cat dog bunny</span><br><span class="line">--(inteqer) <span class="number">3</span></span><br></pre></td></tr></table></figure></li></ul><h4 id="获取-3"><a href="#获取-3" class="headerlink" title="获取"></a>获取</h4><ul><li><p>返回所有的元素</p><p> 语法：<code>smerbers key </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 获取键 set1 的集合中所有元素</span></span><br><span class="line">smerbers set1</span><br><span class="line">--<span class="number">1</span>) <span class="string">'cat'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'dog'</span></span><br><span class="line">--<span class="number">3</span>) <span class="string">'bunny'</span></span><br></pre></td></tr></table></figure></li></ul><h4 id="删除-2"><a href="#删除-2" class="headerlink" title="删除"></a>删除</h4><ul><li><p>删除指定元素</p><p> 语法：<code>srem key </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># ：删除键 set1 的集合中元素 'bunny'</span></span><br><span class="line">srem set1 bunny</span><br><span class="line">--(inteqer) <span class="number">1</span></span><br></pre></td></tr></table></figure></li></ul><h3 id="zset-类型"><a href="#zset-类型" class="headerlink" title="zset 类型"></a>zset 类型</h3><p>Redis 有序集合和集合一样也是 string 类型元素的集合,且不允许重复的成员。</p><p>sorted set，有序集合 <code>元素为string类型</code> <code>元素具有唯⼀性，不重复</code></p><blockquote><p>不同的是每个元素都会关联一个 double 类型的分数。redis 正是通过分数来为集合中的成员进行从小到大的排序。</p><p>有序集合的成员是唯一的,但分数(score)却可以重复。</p><p>集合是通过哈希表实现的，所以添加，删除，查找的复杂度都是 O(1)。</p></blockquote><p><strong>每个元素都会关联⼀个 double 类型的 score，表示权重，通过权重将元素从⼩到⼤排序</strong></p><p><strong>说明：没有修改操作</strong></p><h4 id="增加-2"><a href="#增加-2" class="headerlink" title="增加"></a>增加</h4><ul><li><p>添加</p><p> 语法：<code>zadd key score1 member1 score2 member2 ... </code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 向键 zset1 的集合中添加元素 'kos','mogo','tre' 权重分别为 3,4,2</span></span><br><span class="line">zadd zset1 <span class="number">2</span> kos <span class="number">4</span> mogo <span class="number">3</span> tre</span><br><span class="line">--(inteqer) <span class="number">1</span></span><br></pre></td></tr></table></figure></li></ul><h4 id="获取-4"><a href="#获取-4" class="headerlink" title="获取"></a>获取</h4><p><strong>返回指定范围内的元素</strong></p><blockquote><p>start、stop 为元素的下标索引</p><p>索引从左侧开始，第⼀个元素为 0</p><p>索引可以是负数，表示从尾部开始计数，如-1 表示最后⼀个元素</p></blockquote><ul><li><p>添加元素</p><p> 语法：<code>zrange key start stop</code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment"># 获取键 zset1 的集合中所有元素</span></span><br><span class="line">zrange zset1 <span class="number">0</span> -<span class="number">1</span></span><br><span class="line">--<span class="number">1</span>) <span class="string">'tre'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'kos'</span></span><br><span class="line">--<span class="number">3</span>) <span class="string">'mogo'</span></span><br></pre></td></tr></table></figure></li><li><p>返回 score 值在 min 和 max 之间的成员</p><p> 语法：<code>zrangebyscore key min max</code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment"># 获取键 zset1 的集合中权限值在5和6之间的成员</span></span><br><span class="line">zrangebyscore zset1 <span class="number">3</span> <span class="number">4</span></span><br><span class="line">--<span class="number">1</span>) <span class="string">'kos'</span></span><br><span class="line">--<span class="number">2</span>) <span class="string">'mogo'</span></span><br></pre></td></tr></table></figure></li><li><p>返回成员 member 的 score 值</p><p> 语法：<code>zscore key member</code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment"># 获取键 zset1 的集合中元素 'kos' 的权重</span></span><br><span class="line">zscore zset1 kos</span><br><span class="line">--<span class="string">'3'</span></span><br></pre></td></tr></table></figure></li></ul><h4 id="删除-3"><a href="#删除-3" class="headerlink" title="删除"></a>删除</h4><ul><li><p>删除指定元素</p><p> 语法：<code>zrem key member1 member2 ...</code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment"># 删除集合 zset1 中元素 'tre'</span></span><br><span class="line">zrem zset1 tre</span><br><span class="line"> --(inteqer) <span class="number">1</span></span><br></pre></td></tr></table></figure></li><li><p>删除权重在指定范围的元素</p><p> 语法：<code>zremrangebyscore key min max</code></p><p> <em>示例：</em></p> <figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment"># 删除集合 zset1 中权重为2至3之间的元素</span></span><br><span class="line">zremrangebyscore zset1 <span class="number">2</span> <span class="number">3</span></span><br><span class="line"> --(integer) <span class="number">1</span></span><br></pre></td></tr></table></figure></li></ul><p>参考文章：<a href="http://www.freeoa.net/osuport/db/redis-data-structure_3278.html">Redis 主要的五种数据结构</a> <a href="https://www.runoob.com/w3cnote/redis-intro-data-structure.html">菜鸟 Redis 数据结构</a></p>]]></content>
<tags>
<tag> Redis </tag>
</tags>
</entry>
<entry>
<title>Django状态保持</title>
<link href="/2021/12/08/Django%E7%8A%B6%E6%80%81%E4%BF%9D%E6%8C%81/"/>
<url>/2021/12/08/Django%E7%8A%B6%E6%80%81%E4%BF%9D%E6%8C%81/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://img1.baidu.com/it/u=2206900918,1696468527&fm=26&fmt=auto"></p><h2 id="状态保持"><a href="#状态保持" class="headerlink" title="状态保持"></a>状态保持</h2><ul><li>浏览器请求服务器是无状态的。</li><li><strong>无状态</strong>：指一次用户请求时，浏览器、服务器无法知道之前这个用户做过什么，每次请求都是一次新的请求。</li><li><strong>无状态原因</strong>：浏览器与服务器是使用Socket套接字进行通信的，服务器将请求结果返回给浏览器之后，会关闭当前的Socket连接，而且服务器也会在处理页面完毕之后销毁页面对象。</li><li>有时需要保持下来用户浏览的状态，比如用户是否登录过，浏览过哪些商品等</li><li>实现状态保持主要有两种方式：<ul><li>在客户端存储信息使用<code>Cookie</code></li><li>在服务器端存储信息使用<code>Session</code></li></ul></li></ul><h3 id="Cookie"><a href="#Cookie" class="headerlink" title="Cookie"></a>Cookie</h3><h5 id="Cookie的工作原理"><a href="#Cookie的工作原理" class="headerlink" title="Cookie的工作原理"></a>Cookie的工作原理</h5><p>由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？</p><p><strong>就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。</strong></p><h5 id="Cookie的特点"><a href="#Cookie的特点" class="headerlink" title="Cookie的特点"></a>Cookie的特点</h5><ul><li>Cookie是由服务器生成，存储在浏览器端的一小段文本信息，以键值对方式进行存储。</li><li>通过浏览器访问一个网站时，会将本地存储的跟网站相关的所有cookie信息发送给该网站的服务器。</li><li>Cookie是基于域名安全的。</li><li>Cookie是有过期时间的，如果不指定，默认关闭浏览器之后cookie就会过期。</li></ul><h5 id="Cookie与django服务器执行流程"><a href="#Cookie与django服务器执行流程" class="headerlink" title="Cookie与django服务器执行流程"></a>Cookie与django服务器执行流程</h5><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/9dc7cbce7fa0bf23.png" alt="Cookie"></p><h4 id="配置Cookie"><a href="#配置Cookie" class="headerlink" title="配置Cookie"></a>配置Cookie</h4><p>通过 <code>HttpResponse</code> 对象中的 <strong>set_cookie</strong> 方法来设置cookie。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">HttpResponsse.set_cookit(sookie名, value=cookie值, max_age=cookie有效期)</span><br></pre></td></tr></table></figure><p>写法</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">cookie</span>(<span class="params">request</span>):</span></span><br><span class="line"> response = HttpResponse(<span class="string">'ok'</span>)</span><br><span class="line"> response.set_cookie(<span class="string">'make'</span>， <span class="string">'Golang'</span>) <span class="comment"># 临时cookie</span></span><br><span class="line"> response.set_cookie(<span class="string">'luxor'</span>， <span class="string">'PHP'</span>, max_age=<span class="number">3600</span>) <span class="comment"># 有效期一小时</span></span><br><span class="line"> <span class="comment"># max_age 单位为秒, 默认为None. 如果是临时cookie, 可将max_age设置为None.</span></span><br></pre></td></tr></table></figure><h4 id="读取Cookie"><a href="#读取Cookie" class="headerlink" title="读取Cookie"></a>读取Cookie</h4><p>可以通过 <strong>HttpResponse</strong> 对象的 <strong>COOKIES</strong> 属性来读取本次请求携带的cookie值。<strong>request.COOKIES为字典类型</strong>。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">cookie</span>(<span class="params">request</span>):</span></span><br><span class="line"> cookie1 = request.COOKIES.get(<span class="string">'make'</span>)</span><br><span class="line"> <span class="built_in">print</span>(cookie1)</span><br><span class="line"> <span class="keyword">return</span> HttpResponse(<span class="string">'OK'</span>)</span><br></pre></td></tr></table></figure><h3 id="Session"><a href="#Session" class="headerlink" title="Session"></a>Session</h3><p>Django完全支持也匿名会话，简单说就是使用跨网页之间可以进行通讯，比如显示用户名，用户是否已经发表评论。session框架让你 <strong>存储和获取访问者的数据信息</strong> ，这些信息保存在服务器上（默认是数据库中），以 <strong>cookies 的方式发送和获取</strong>一个包含 session ID的值，并不是用cookies传递数据本身。</p><h5 id="Session的特点："><a href="#Session的特点：" class="headerlink" title="Session的特点："></a>Session的特点：</h5><ul><li>在服务器端进行状态保持的方案就是Session。</li><li>session是以键值对进行存储的。</li><li>session依赖于cookie。</li><li>session也是有过期时间，如果不指定，默认两周就会过期。</li></ul><h5 id="Session与django服务器执行流程"><a href="#Session与django服务器执行流程" class="headerlink" title="Session与django服务器执行流程"></a>Session与django服务器执行流程</h5><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/faa7b58fed1e25b4.png" alt="Session与django服务器执行流程"></p><h4 id="启用Session"><a href="#启用Session" class="headerlink" title="启用Session"></a>启用Session</h4><p><strong>编辑 <code>settings.py</code> 中的一些配置</strong></p><p><strong>MIDDLEWARE_CLASSES</strong> 确保其中包含以下内容</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'django.contrib.sessions.middleware.SessionMiddleware'</span>,</span><br></pre></td></tr></table></figure><h5 id="数据库"><a href="#数据库" class="headerlink" title="数据库"></a>数据库</h5><p>存储在数据库中，如下设置可以写，也可以不写，<strong>这是默认存储方式</strong>。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SESSION_ENGINE=<span class="string">'django.contrib.sessions.backends.db'</span></span><br></pre></td></tr></table></figure><p>如果存储在数据库中，需要在项 <strong>INSTALLED_APPS</strong> 中安装Session应用。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'django.contrib.sessions'</span>,</span><br></pre></td></tr></table></figure><p><strong>这些是默认启用的。如果你不用的话，也可以关掉这个以节省一点服务器的开销。</strong></p><p><em>数据库中的表如图所示</em></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/72d8ea7f0c128e71.png"></p><p>由表结构可知，操作Session包括三个数据：键，值，过期时间。</p><h5 id="本地缓存"><a href="#本地缓存" class="headerlink" title="本地缓存"></a>本地缓存</h5><p>存储在本机内存中，如果丢失则不能找回，比数据库的方式读写更快。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SESSION_ENGINE=<span class="string">'django.contrib.sessions.backends.cache'</span></span><br></pre></td></tr></table></figure><h5 id="混合存储"><a href="#混合存储" class="headerlink" title="混合存储"></a>混合存储</h5><p>优先从本机内存中存取，如果没有则从数据库中存取。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SESSION_ENGINE=<span class="string">'django.contrib.sessions.backends.cached_db'</span></span><br></pre></td></tr></table></figure><h4 id="session使用"><a href="#session使用" class="headerlink" title="session使用"></a>session使用</h4><ol><li><p>创建模拟登录视图</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">testsession</span>(<span class="params">request</span>):</span></span><br><span class="line"> <span class="comment"># 更新数据库的session数据</span></span><br><span class="line"> request.session[<span class="string">'name'</span>] = <span class="string">'Shrimps'</span></span><br><span class="line"> request.session[<span class="string">'age'</span>] = <span class="number">22</span></span><br><span class="line"> request.session[<span class="string">'userid'</span>] = <span class="number">1024</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> HttpResponse(<span class="string">'Good'</span>)</span><br></pre></td></tr></table></figure></li><li><p>创建模拟主页视图</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> django.http <span class="keyword">import</span> HttpResponse</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">testIndex</span>(<span class="params">request</span>):</span></span><br><span class="line"><span class="comment"># 查询主页的数据</span></span><br><span class="line"> userid = request.session.get(<span class="string">'userid'</span>)</span><br><span class="line"> name = request.session.get(<span class="string">'name'</span>)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> userid:</span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'登陆过'</span>)</span><br><span class="line"> <span class="keyword">return</span> HttpResponse(<span class="string">f'Hello - <span class="subst">{name}</span> '</span>)</span><br><span class="line"> <span class="keyword">else</span>:</span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'未登录'</span>)</span><br><span class="line"> <span class="keyword">return</span> HttpResponse(<span class="string">'未登录'</span>)</span><br></pre></td></tr></table></figure></li><li><p>登录后访问主页</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/e391b18e38622c4f.png"></p></li></ol><blockquote><p>在这里我是定义时间事件 所有才会显示晚上好</p></blockquote><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 代码如下 - (在 return HttpResponse('Good') 之前执行)</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 判断当前时间</span></span><br><span class="line"> now_time = datetime.datetime.now().strftime(<span class="string">'%H'</span>)</span><br><span class="line"> now_time = <span class="built_in">int</span>(now_time)</span><br><span class="line"> <span class="keyword">if</span> now_time > <span class="number">12</span> <span class="keyword">and</span> now_time < <span class="number">18</span>:</span><br><span class="line"> now_time = <span class="string">'下午好'</span></span><br><span class="line"> <span class="keyword">elif</span> now_time < <span class="number">12</span>:</span><br><span class="line"> now_time = <span class="string">'早上好'</span></span><br><span class="line"> <span class="keyword">else</span>:</span><br><span class="line"> now_time = <span class="string">'晚上好'</span></span><br></pre></td></tr></table></figure><h4 id="Session操作"><a href="#Session操作" class="headerlink" title="Session操作"></a>Session操作</h4><p>通过HttpRequest对象的session属性进行会话的读写操作。</p><p>1） 以键值对的格式写session。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">request.session[<span class="string">'键'</span>]=值</span><br></pre></td></tr></table></figure><p>2）根据键读取值。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">request.session.get(<span class="string">'键'</span>,默认值)</span><br></pre></td></tr></table></figure><p>3）清除所有session，在存储中删除值部分。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">request.session.clear()</span><br></pre></td></tr></table></figure><p>4）清除session数据，在存储中删除session的整条数据。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">request.session.flush()</span><br></pre></td></tr></table></figure><p>5）删除session中的指定键及值，在存储中只删除某个键及对应的值。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">del</span> request.session[<span class="string">'键'</span>]</span><br></pre></td></tr></table></figure><p>6）设置session的有效期</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">request.session.set_expiry(value)</span><br></pre></td></tr></table></figure><p><strong>value规则：</strong></p><ul><li>如果value是一个整数，session将在value秒没有活动后过期。</li><li>如果value为0，那么用户 session的Cookie将在用户的浏览器关闭时过期。</li><li>如果value为None，那么session有效期将采用系统默认值， <strong>默认为两周</strong>，可以通过在 <code>settings.py</code> 中设置<strong>SESSION_COOKIE_AGE</strong>来设置全局默认值。</li></ul>]]></content>
<tags>
<tag> Django </tag>
</tags>
</entry>
<entry>
<title>Django视图</title>
<link href="/2021/12/05/Django%E8%A7%86%E5%9B%BE/"/>
<url>/2021/12/05/Django%E8%A7%86%E5%9B%BE/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://img1.baidu.com/it/u=2206900918,1696468527&fm=26&fmt=auto"></p><h2 id="视图定义"><a href="#视图定义" class="headerlink" title="视图定义"></a>视图定义</h2><ul><li><p>一个视图函数，简称视图，就是<code>应用</code>中<code>views.py</code>文件中的函数，它接受 Web 请求并且返回 Web 响应。</p></li><li><p>视图必须返回一个<code>HttpResponse对象</code>或<code>子对象</code>（<code>JsonResponse</code> <code>HttpResponseRedirect</code>）作为响应</p></li><li><p>视图负责接受Web请求<code>HttpRequest</code>，进行逻辑处理，返回Web响应<code>HttpResponse</code>给请求者</p></li><li><p>视图层中有两个重要的对象：**请求对象(request)**与 **响应对象(<code>HttpResponse</code>)**。</p></li><li><p>处理过程：</p></li></ul><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/12/03/75NXDBbUJtesIPn.png" alt="视图处理过程"></p><h2 id="视图使用"><a href="#视图使用" class="headerlink" title="视图使用"></a>视图使用</h2><ol><li><p>在项目的<code>urls.py</code>文件定位应用的<code>urls.py</code></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> django.contrib <span class="keyword">import</span> admin <span class="comment"># 默认配置</span></span><br><span class="line"><span class="keyword">from</span> django.urls <span class="keyword">import</span> path, include <span class="comment"># 导入include</span></span><br><span class="line"></span><br><span class="line">urlpatterns = [</span><br><span class="line"> path(<span class="string">'admin/'</span>, admin.site.urls), <span class="comment"># 默认配置</span></span><br><span class="line"> path(<span class="string">''</span>, include(<span class="string">'book.urls'</span>)) <span class="comment"># 配置应用的urls</span></span><br><span class="line">]</span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li><p>在应用的<code>views.py</code>中定义视图函数</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> django.http <span class="keyword">import</span> HttpResponse</span><br><span class="line"></span><br><span class="line"><span class="comment"># 这里定义index视图函数 向页面传递完成请求</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">index</span>(<span class="params">request</span>):</span> <span class="comment"># request为请求的数据</span></span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'测OwO试'</span>)</span><br><span class="line"> <span class="keyword">return</span> HttpResponse(<span class="string">'OK'</span>)</span><br><span class="line"></span><br><span class="line"><span class="string">''' 也可以通过render映射到templates指定html中 例如：'''</span></span><br><span class="line"><span class="keyword">from</span> django.shortcuts <span class="keyword">import</span> render </span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">index</span>(<span class="params">request</span>)：</span></span><br><span class="line"><span class="function"><span class="title">data</span> = {'<span class="title">text</span>':</span><span class="string">'测OwO试'</span>}</span><br><span class="line"><span class="keyword">return</span> render(request,<span class="string">'book/index.html'</span>,data)</span><br></pre></td></tr></table></figure></li><li><p>在应用的<code>urls.py</code>中配置视图函数</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> django.urls <span class="keyword">import</span> path</span><br><span class="line"><span class="keyword">from</span> book.views <span class="keyword">import</span> index <span class="comment"># 从你的应用.views中导入视图函数</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 固定写法 urlpatterns = [...]</span></span><br><span class="line">urlpatterns = [</span><br><span class="line"> <span class="comment"># 通过path('地址', 视图函数) 导入</span></span><br><span class="line"> path(<span class="string">'index/'</span>, index),</span><br><span class="line">]</span><br></pre></td></tr></table></figure></li></ol><h2 id="HttpRequest对象"><a href="#HttpRequest对象" class="headerlink" title="HttpRequest对象"></a>HttpRequest对象</h2><p>Django 使用请求和响应对象通过系统传递状态。</p><p>当请求一个页面时，Django 创建一个<a href="https://docs.djangoproject.com/en/3.0/ref/request-response/#django.http.HttpRequest"><code>HttpRequest</code></a>包含请求元数据的对象。然后 Django 加载适当的视图，将 传递<a href="https://docs.djangoproject.com/en/3.0/ref/request-response/#django.http.HttpRequest"><code>HttpRequest</code></a>给视图函数的第一个参数。每个视图负责返回一个<a href="https://docs.djangoproject.com/en/3.0/ref/request-response/#django.http.HttpResponse"><code>HttpResponse</code></a>对象。</p><h4 id="请求体"><a href="#请求体" class="headerlink" title="请求体"></a>请求体</h4><p>请求体数据格式不固定，可以是表单类型字符串 或 JSON字符串 或 XML字符串，要区别对待。</p><p>可以发送请求体数据的请求方式有<strong>POST</strong>、<strong>PUT</strong>、<strong>PATCH</strong>、<strong>DELETE</strong>。</p><p><strong>Django默认开启了CSRF防护</strong>，会对上述请求方式进行CSRF防护验证，在测试时可以关闭CSRF防护机制，方法为在项目中的settings.py文件中注释掉CSRF中间件</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s2.loli.net/2021/12/06/1hGSQLNyMU8jbWu.png" alt="请求体关闭防护验证"></p><h4 id="QueryDict"><a href="#QueryDict" class="headerlink" title="QueryDict"></a>QueryDict</h4><p><strong>数据类型是 QueryDict，一个类似于字典的对象，包含 HTTP GET 的所有参数。</strong></p><h5 id="GET"><a href="#GET" class="headerlink" title="GET"></a><code>GET</code></h5><p>有相同的键，就把所有的值放到对应的列表里。</p><p>取值格式：<strong>对象.方法</strong>。</p><p>**get()**：返回字符串，如果该键对应有多个值，取出该键的最后一个值。</p><p><code>不存在返回None</code>,可以设置默认值进行后续处理</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">get(<span class="string">'键'</span>, 默认值)</span><br><span class="line">request.GET.get()</span><br></pre></td></tr></table></figure><p><strong>getlist()：</strong>根据键获取值，值以列表返回，可以获取指定键的所有值</p><p><code>不存在返回空列表</code>,可以设置默认值进行后续处理</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">getlist(<span class="string">'键'</span>, 默认值)</span><br><span class="line">request.GET.getlist()</span><br></pre></td></tr></table></figure><h5 id="POST"><a href="#POST" class="headerlink" title="POST"></a><code>POST</code></h5><p>常用于 form 表单，form 表单里的标签 name 属性对应参数的键，value 属性对应参数的值。</p><p>取值格式： <strong>对象.方法</strong>。</p><p>**get()**：返回字符串，如果该键对应有多个值，取出该键的最后一个值。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">request.POST.get()</span><br><span class="line"></span><br><span class="line"><span class="comment"># 可在 Postman 中传递参数 发送post请求</span></span><br></pre></td></tr></table></figure><h4 id="Query-String"><a href="#Query-String" class="headerlink" title="Query String"></a>Query String</h4><p><strong>获取请求路径中的查询字符串参数，可以通过request.GET属性获取，返回QueryDict对象。</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 语法 request.GET.get/getlist(xxx)</span></span><br><span class="line"><span class="comment"># 如： /get/?a=333&b=1024</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">get</span>(<span class="params">request</span>):</span></span><br><span class="line"> a = request.GET.get(<span class="string">'a'</span>)</span><br><span class="line">b = request.GET.get(<span class="string">'b'</span>)</span><br><span class="line"><span class="built_in">print</span>(a , b) <span class="comment"># 333, 1024</span></span><br><span class="line"><span class="keyword">return</span> HttpResponse(<span class="string">'OK)</span></span><br></pre></td></tr></table></figure><h4 id="HttpRequest常用对象"><a href="#HttpRequest常用对象" class="headerlink" title="HttpRequest常用对象"></a>HttpRequest常用对象</h4><h5 id="body"><a href="#body" class="headerlink" title="body"></a>body</h5><p>数据类型是二进制字节流，是原生请求体里的参数内容，在 HTTP 中用于 POST，因为 GET 没有请求体，<strong>返回bytes类型</strong>。</p><p>在 HTTP 中不常用，而在处理非 HTTP 形式的报文时非常有用，例如：二进制图片、XML、Json 等。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xx = request.body</span><br><span class="line"><span class="built_in">print</span>(xx) <span class="comment"># 二进制的形式打印</span></span><br></pre></td></tr></table></figure><h5 id="path"><a href="#path" class="headerlink" title="path"></a>path</h5><p>获取 URL 中的路径部分，数据类型是字符串</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xx = request.path</span><br><span class="line"><span class="built_in">print</span>(xx） <span class="comment"># 路径 如：/book/ </span></span><br></pre></td></tr></table></figure><h5 id="method"><a href="#method" class="headerlink" title="method"></a>method</h5><p>表示请求使用的HTTP方法，数据类型是字符串，且结果为大写（常用值包括：’GET’、’POST’ ）</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xx = request.method</span><br><span class="line"><span class="built_in">print</span>(xx) <span class="comment"># 请求方式 如: POST</span></span><br></pre></td></tr></table></figure><h5 id="encoding"><a href="#encoding" class="headerlink" title="encoding"></a>encoding</h5><p>一个字符串，表示提交的数据的编码方式。</p><p>如果为None则表示使用浏览器的默认设置，一般为<code>utf-8</code>。</p><p>这个属性是可写的，可以通过修改它来修改访问表单数据使用的编码，接下来对属性的任何访问将使用新的encoding值。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xx = request.encoding</span><br><span class="line"><span class="built_in">print</span>(xx) <span class="comment"># None(默认设置<UTF8>)</span></span><br></pre></td></tr></table></figure><h5 id="FILES"><a href="#FILES" class="headerlink" title="FILES"></a>FILES</h5><p>一个类似于字典的对象，包含上传的文件。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xx = request.FILES</span><br><span class="line"><span class="built_in">print</span>(xx) <span class="comment"># <MultiValueDict: {}> (包含所有的上传文件)</span></span><br></pre></td></tr></table></figure><h5 id="COOKIES"><a href="#COOKIES" class="headerlink" title="COOKIES"></a>COOKIES</h5><p>一个标准的Python字典，包含所有的cookie，键和值都为字符串。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xx = request.COOKIES</span><br><span class="line"><span class="built_in">print</span>(xx) <span class="comment"># {} (默认为{})</span></span><br></pre></td></tr></table></figure><h5 id="session"><a href="#session" class="headerlink" title="session"></a>session</h5><p>一个既可读又可写的类似于字典的对象，表示当前的会话，只有当Django 启用会话的支持时才可用，详细内容见”状态保持”。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xx = request.session</span><br><span class="line"><span class="built_in">print</span>(xx) <span class="comment"># <django.contrib.sessions.backends.db.SessionStore object at 0x7f42da71beb8></span></span><br></pre></td></tr></table></figure><h4 id="From-Data-表单类型"><a href="#From-Data-表单类型" class="headerlink" title="From Data 表单类型"></a>From Data 表单类型</h4><p>前端发送的表单类型的请求体数据，可以通过request.POST属性获取，返回 <strong>QueryDict对象</strong>。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 语法 request.POST.get/getlist(xxx)</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">post</span>(<span class="params">request</span>):</span></span><br><span class="line"> a = request.POST.get(<span class="string">'a'</span>)</span><br><span class="line"> aa = request.POST.getlist(<span class="string">'a'</span>)</span><br><span class="line"> <span class="built_in">print</span>(a, b ) </span><br><span class="line"> <span class="keyword">return</span> HttpResPonse(<span class="string">'OK'</span>)</span><br></pre></td></tr></table></figure><h4 id="Non-Form-Data-非表单类型"><a href="#Non-Form-Data-非表单类型" class="headerlink" title="Non-Form Data 非表单类型"></a>Non-Form Data 非表单类型</h4><p>非表单类型的请求体数据，Django无法自动解析，可以通过<strong>request.body</strong>属性获取最原始的请求体数据，自己按照请求体格式（JSON、XML等）进行解析。<strong>request.body返回bytes类型(二进制格式)。</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 如数据 ： {'a': 1, 'b': 2}</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 1. 导包</span></span><br><span class="line"><span class="keyword">import</span> json</span><br><span class="line"></span><br><span class="line"><span class="comment"># 2. 解析程序</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">post_json</span>(<span class="params">request</span>):</span></span><br><span class="line">json_str = request.body <span class="comment"># 转换二进制格式</span></span><br><span class="line"> json_str = json_str.decode() <span class="comment"># 编码 # python3.6 无需执行此步</span></span><br><span class="line"> req_data = json.loads(json_str) <span class="comment"># 将json格式数据转换为字典</span></span><br><span class="line"> <span class="built_in">print</span>(req_data[<span class="string">'a'</span>], req_data[<span class="string">'b'</span>])</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> HttpResponse(<span class="string">'OK'</span>)</span><br></pre></td></tr></table></figure><h4 id="路径转换器"><a href="#路径转换器" class="headerlink" title="路径转换器"></a>路径转换器</h4><p>系统为我们提供了一些路由转换器位置在<code>django.urls.converters.py</code></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">DEFAULT_CONVERTERS = {</span><br><span class="line"> <span class="string">'int'</span>: IntConverter(), <span class="comment"># 匹配正整数，包含0</span></span><br><span class="line"> <span class="string">'path'</span>: PathConverter(), <span class="comment"># 匹配任何非空字符串，包含了路径分隔符</span></span><br><span class="line"> <span class="string">'slug'</span>: SlugConverter(), <span class="comment"># 匹配字母、数字以及横杠、下划线组成的字符串</span></span><br><span class="line"> <span class="string">'str'</span>: StringConverter(), <span class="comment"># 匹配除了路径分隔符（/）之外的非空字符串，这是默认的形式</span></span><br><span class="line"> <span class="string">'uuid'</span>: UUIDConverter(), <span class="comment"># 匹配格式化的uuid，如 075194d3-6885-417e-a8a8-6c931e272f00</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>我们可以通过以下形式来验证数据的类型</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">path(<span class="string">'<int:id>/<slug:username>/'</span>, login),</span><br></pre></td></tr></table></figure><h4 id="自定义转换器"><a href="#自定义转换器" class="headerlink" title="自定义转换器"></a>自定义转换器</h4><p>如果默认的路由转换器无法满足需求时，我们就需要 <strong>自定义路由转换器。</strong></p><p>在任意可以被导入的python文件中，都可以自定义路由转换器。</p><p>我们这里给他划分为5步：</p><ol><li>创建一个converters.py，在文件中定义一个类。</li><li>在类中定义一个属性regex，这个属性是用来保存url转换器规则的正则表达式。</li><li>实现to_python(self,value)方法，这个方法是先将url中的值转换，再传给视图函数的。</li><li>实现to_url(self,value)方法，这个方法是在做url反转时，将传进来的参数转换后拼接成一个正确的url。</li><li>将定义好的转换器，注册到django中。</li></ol><p>示例<三步曲> 定义一个为匹配手机号的自定义转换器 ：</p><ul><li><strong>第一步</strong> 项目根目录下，新建 <code>converters.py</code> 文件，用于自定义路由转换器</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"""自定义路由转换器：匹配手机号"""</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MobileConverter</span>:</span></span><br><span class="line"></span><br><span class="line"> <span class="comment"># 匹配手机号码的正则</span></span><br><span class="line"> regex = <span class="string">'1[3-9]\d{9}'</span></span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">to_python</span>(<span class="params">self, value</span>):</span></span><br><span class="line"> <span class="comment"># 将匹配结果传递到视图内部时使用</span></span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">int</span>(value)</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">to_url</span>(<span class="params">self, value</span>):</span></span><br><span class="line"> <span class="comment"># 将匹配结果用于反向解析传值时使用</span></span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">str</span>(value)</span><br></pre></td></tr></table></figure><ul><li><strong>第二步</strong> 在<code>总路由</code>中注册自定义路由转换器</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> django.urls <span class="keyword">import</span> register_converter</span><br><span class="line"><span class="comment"># 注册自定义路由转换器</span></span><br><span class="line"><span class="comment"># 语法: register_converter(自定义路由转换器,'别名')</span></span><br><span class="line">register_converter(MobileConverter, <span class="string">'mobile'</span>)</span><br><span class="line"></span><br><span class="line">urlpatterns = []</span><br></pre></td></tr></table></figure><ul><li><strong>第三步</strong> 使用自定义路由转换器</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 子路由使用</span></span><br><span class="line"></span><br><span class="line">path(<span class="string">'<mobile:phone>/'</span>, register)</span><br><span class="line"></span><br><span class="line"><span class="string">'''测试path()中自定义路由转换器提取路径参数：手机号(http://xxx.x.xx.x:8000/18500001111/)'''</span></span><br></pre></td></tr></table></figure><h4 id="请求头"><a href="#请求头" class="headerlink" title="请求头"></a>请求头</h4><p>可以通过 <code>request.META</code> 属性获取请求头headers中的数据，<strong>request.META为字典类型</strong>。</p><p>包含所有可用 HTTP 请求头的字典。可用的请求头取决于客户端和服务器，</p><table><thead><tr><th>常见的请求头</th><th>说明</th></tr></thead><tbody><tr><td>CONTENT_LENGTH</td><td>请求正文的长度（作为字符串）</td></tr><tr><td>CONTENT_TYPE</td><td>请求正文的 MIME 类型</td></tr><tr><td>HTTP_ACCEPT</td><td>可接受的响应内容类型</td></tr><tr><td>HTTP_ACCEPT_ENCODING</td><td>可接受的响应编码</td></tr><tr><td>HTTP_ACCEPT_LANGUAGE</td><td>可接受的响应语言</td></tr><tr><td>HTTP_HOST</td><td>客户端发送的 HTTP Host 头</td></tr><tr><td>HTTP_REFERER</td><td>引用页面 ( 如果有的话 ）</td></tr><tr><td>HTTP_USER_AGENT</td><td>客户端的用户代理字符串</td></tr><tr><td>QUERY_STRING</td><td>查询字符串，作为单个（未解析的）字符串</td></tr><tr><td>REMOTE_ADDR</td><td>客户端的IP地址</td></tr><tr><td>REMOTE_HOST</td><td>客户端的主机名</td></tr><tr><td>REMOTE_USER</td><td>Web 服务器验证的用户（如果有）</td></tr><tr><td>REQUEST_METHOD</td><td>一个字符串，例如<code>"GET"</code>or <code>"POST"</code></td></tr><tr><td>SERVER_NAME</td><td>服务器的主机名</td></tr><tr><td>SERVER_PORT</td><td>服务器的端口（作为字符串）</td></tr></tbody></table><h4 id="使用JSON传递数据"><a href="#使用JSON传递数据" class="headerlink" title="使用JSON传递数据"></a>使用JSON传递数据</h4><p><strong>路由</strong></p><p>使用应用<code>urls.py</code>视图函数</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 语法：path('路径/',视图函数)</span></span><br><span class="line">path(<span class="string">'index/'</span>, index)</span><br></pre></td></tr></table></figure><p><strong>视图</strong></p><p>定义<code>Json</code>视图函数</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">index</span>(<span class="params">request</span>):</span></span><br><span class="line"> <span class="comment"># 1. 通过 request.body 获取json数据 (为bytes类型的二进制数据)</span></span><br><span class="line"> json_str = request.body</span><br><span class="line"> </span><br><span class="line"> <span class="comment"># 2. 通过 decode 编码转为json字符串</span></span><br><span class="line"> json_str = json_str.decode()</span><br><span class="line"> <span class="built_in">print</span>(json_str, <span class="built_in">type</span>(json_str))</span><br><span class="line"> </span><br><span class="line"> <span class="comment"># 3. 把json字符串转换为字典</span></span><br><span class="line"> data_dict = json.loads(json_str)</span><br><span class="line"> </span><br><span class="line"> name = data_dict.get(<span class="string">'name'</span>)</span><br><span class="line"> user = data_dict.get(<span class="string">'user'</span>)</span><br><span class="line"> password = data_dict.get(<span class="string">'password'</span>)</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> HttpResoponse(<span class="string">f'<span class="subst">{name}</span> - <span class="subst">{user}</span> - <span class="subst">{password}</span>'</span>)</span><br></pre></td></tr></table></figure><p><strong>Postman</strong></p><p>使用Postman模拟传递数据</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/12/03/6FoMiPtB8hD7xIR.png" alt="Postman"></p><h2 id="HttpResPonse对象"><a href="#HttpResPonse对象" class="headerlink" title="HttpResPonse对象"></a>HttpResPonse对象</h2><p>视图在接收请求并处理后，<strong>必须返回HttpResponse对象或子对象</strong>。</p><p>HttpRequest对象由Django创建，HttpResponse对象由开发人员创建。</p><h4 id="HttpResponse"><a href="#HttpResponse" class="headerlink" title="HttpResponse"></a>HttpResponse</h4><p>使用<strong>django.http.HttpResponse</strong>来构造响应对象</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">HttpResponse(content=响应体, content_type=响应体数据类型, status=状态码)</span><br></pre></td></tr></table></figure><p>也可通过HttpResponse对象属性来设置响应体、响应体数据类型、状态码；</p><p>响应头可以直接将HttpResponse对象当做字典进行响应头键值对的设置。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> django.http <span class="keyword">import</span> HttpResponse <span class="comment"># 导包</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">test</span>(<span class="params">request</span>):</span></span><br><span class="line"> <span class="comment"># #content 是响应给客户端的数据,status指的是状态</span></span><br><span class="line"> <span class="keyword">return</span> HttpResponse(<span class="string">'测试一下 O-O '</span>, status= <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line"> <span class="comment"># or</span></span><br><span class="line"> </span><br><span class="line"> response = HttpResponse(<span class="string">'我是content哦'</span>) <span class="comment">#响应体</span></span><br><span class="line">response.status_code = <span class="number">400</span> <span class="comment"># 状态码</span></span><br><span class="line"> response[<span class="string">'data'</span>] = <span class="string">"I'm a String ,QWQ"</span> <span class="comment"># 响应头</span></span><br><span class="line"> <span class="keyword">return</span> response</span><br></pre></td></tr></table></figure><h4 id="HttpResponse子类"><a href="#HttpResponse子类" class="headerlink" title="HttpResponse子类"></a>HttpResponse子类</h4><p>Django提供了一系列HttpResponse的子类，可以快速设置状态码，这些类在 django.http 中。</p><table><thead><tr><th>More Actions类名</th><th>描述</th></tr></thead><tbody><tr><td>HttpResponseRedirect</td><td>构造函数的参数有一个：重定向的路径。 它可以是一个完整的URL（例如， ‘http:<a href="http://www.baidu.com&/#39;">www.baidu.com'</a> ）或者不包括域名的绝对路径（如 ‘/search/‘ ）。 注意它返回 HTTP 状态码 302。</td></tr><tr><td>HttpResponsePermanentRedirect</td><td>类似 HttpResponseRedirect ， 但是它返回一个永久转义 （HTTP状态码 301），而不是暂时性转移（状态码302）。</td></tr><tr><td>HttpResponseNotModified</td><td>构造函数没有任何参数。用它来表示这个页面在上次请求后未改变。</td></tr><tr><td>HttpResponseBadRequest</td><td>类似 HttpResponse ，但使用400状态码。</td></tr><tr><td>HttpResponseNotFound</td><td>类似 HttpResponse ，但使用404状态码。</td></tr><tr><td>HttpResponseForbidden</td><td>类似 HttpResponse ，但使用403状态码。</td></tr><tr><td>HttpResponseNotAllowed</td><td>类似 HttpResponse ，但使用405状态码。它必须有一个参数：允许方法的列表。（例如， [‘GET’, ‘POST’] ）。</td></tr><tr><td>HttpResponseGone</td><td>类似 HttpResponse ，但使用410状态码。</td></tr><tr><td>HttpResponseServerError</td><td>类似 HttpResponse ，但使用500状态码。</td></tr></tbody></table><h4 id="JsonResponse"><a href="#JsonResponse" class="headerlink" title="JsonResponse"></a>JsonResponse</h4><p><strong>若要返回json数据，可以使用JsonResponse来构造响应对象</strong></p><p>作用：帮助我们将数据转换为json字符串</p><p>设置响应头<strong>Content-Type</strong>为 <strong><code>application/json</code></strong></p><p>实例使用：</p><ol><li><p>在视图中 创建json数据</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> django.http <span class="keyword">import</span> JsonResponse <span class="comment"># 导包</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">responseJson</span>(<span class="params">request</span>):</span></span><br><span class="line"> <span class="comment"># json数据</span></span><br><span class="line"> datalist = {<span class="string">'id'</span>: <span class="number">1024</span>, <span class="string">'name'</span>: <span class="string">'Shrimps'</span>, <span class="string">'password'</span>: <span class="number">123456</span>, <span class="string">'job'</span>: <span class="string">'Front-end engineer'</span>}</span><br><span class="line"> <span class="comment"># 返回json数据</span></span><br><span class="line"> <span class="keyword">return</span> JsonResponse(datalist)</span><br></pre></td></tr></table></figure></li><li><p>在路由中 引入json</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> 应用名.views <span class="keyword">import</span> responseJson <span class="comment"># 引用</span></span><br><span class="line"></span><br><span class="line">urlpatterns = [</span><br><span class="line"> path(<span class="string">'jsonTest/'</span>, responseJson) <span class="comment"># 使用</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure></li><li><p>页面显示效果</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/4dfeb20f27efcdcd.png" alt="页面显示效果"></p></li></ol><h3 id="类视图"><a href="#类视图" class="headerlink" title="类视图"></a>类视图</h3><p>以函数的形式进行定义的视图就是<strong>函数视图</strong>,视图函数便于理解,但是遇到一个视图函数对应的路径提供了多种不同的HTTP请求方式的支持时(get,post,delete,put),需要在一个函数中写不同的业务逻辑,代码的可读性和复用性就很底, 所以,我们引入类视图进行解决.</p><h5 id="类视图的优点"><a href="#类视图的优点" class="headerlink" title="类视图的优点:"></a>类视图的优点:</h5><ul><li><strong>代码可读性好</strong></li><li><strong>类视图相对于函数视图有更高的复用性,如果其他地方需要使用到某个类的某个特定方法,直接继承该类的视图就可以了</strong></li></ul><h4 id="类视图的使用"><a href="#类视图的使用" class="headerlink" title="类视图的使用"></a>类视图的使用</h4><p>定义类视图需要继承自的<a href="https://so.csdn.net/so/search?from=pc_blog_highlight&q=Django">Django</a>提供的父类的View:</p><ul><li>导入方法：</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> django.views.generic <span class="keyword">import</span> View </span><br><span class="line"><span class="comment"># or</span></span><br><span class="line"><span class="keyword">from</span> django.views.generic.base <span class="keyword">import</span> View</span><br></pre></td></tr></table></figure><blockquote><p>配置路由时,需要使用类视图的as_view()方法来注册添加</p></blockquote><ul><li>应用中 - <code>views.py</code> 定义类视图</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 类视图方法</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">RegisterView</span>(<span class="params">View</span>):</span></span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">get</span>(<span class="params">self, request</span>):</span></span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'跳转页面'</span>)</span><br><span class="line"> name = {<span class="string">'username'</span>: request.session.get(<span class="string">'name'</span>)}</span><br><span class="line"> <span class="keyword">if</span> <span class="keyword">not</span> name[<span class="string">'username'</span>]:</span><br><span class="line"> name[<span class="string">'username'</span>] = <span class="string">'新用户'</span></span><br><span class="line"> <span class="comment"># 这里我是在模板templates下创建register.html文件 方便查看</span></span><br><span class="line"> <span class="keyword">return</span> render(request, <span class="string">'register.html'</span>, name)</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">post</span>(<span class="params">self, request</span>):</span></span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'注册逻辑'</span>)</span><br><span class="line"> <span class="keyword">return</span> HttpResponse(<span class="string">'post'</span>)</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">put</span>(<span class="params">self, request</span>):</span></span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'putput'</span>)</span><br><span class="line"> <span class="keyword">return</span> HttpResponse(<span class="string">'put'</span>)</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">delete</span>(<span class="params">self, request</span>):</span></span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'delete'</span>)</span><br><span class="line"> <span class="keyword">return</span> HttpResponse(<span class="string">'delete'</span>)</span><br></pre></td></tr></table></figure><ul><li>应用中 - <code>urls.py</code> 注册路由</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> 应用名.views <span class="keyword">import</span> RegisterView</span><br><span class="line"></span><br><span class="line"><span class="comment"># 类视图 - 注册路由</span></span><br><span class="line">path(<span class="string">'register/'</span>, RegisterView.as_view())</span><br></pre></td></tr></table></figure><ul><li>templates中 - <code>register.html</code> 映射到页面</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span> OwO <span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>你好 - {{ username }}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Django </tag>
</tags>
</entry>
<entry>
<title>Django数据库开发</title>
<link href="/2021/11/30/Django%E6%95%B0%E6%8D%AE%E5%BA%93%E5%BC%80%E5%8F%91/"/>
<url>/2021/11/30/Django%E6%95%B0%E6%8D%AE%E5%BA%93%E5%BC%80%E5%8F%91/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://img1.baidu.com/it/u=2206900918,1696468527&fm=26&fmt=auto"></p><p><strong>使用Django进行数据库开发的提示 ：</strong></p><ul><li><code>MVT</code>设计模式中的<code>Model</code>, 专门负责和数据库交互.对应<code>(models.py)</code></li><li>由于<code>Model</code>中内嵌了<code>ORM框架</code>, 所以不需要直接面向数据库编程.</li><li>而是定义模型类, 通过<code>模型类和对象</code>完成数据库表的<code>增删改查</code>.</li><li><code>ORM框架</code>就是把数据库表的行与相应的对象建立关联, 互相转换.使得数据库的操作面向对象.</li></ul><h2 id="mysql配置"><a href="#mysql配置" class="headerlink" title="mysql配置"></a>mysql配置</h2><p><strong>1. 在mysql中创建一个项目要使用的数据库</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">create database bookdb charset=utf8;</span><br></pre></td></tr></table></figure><p><strong>2. setting里修改为mysql配置</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">DATABASES = {</span><br><span class="line"> <span class="string">'default'</span>: {</span><br><span class="line"> <span class="string">'ENGINE'</span>: <span class="string">'django.db.backends.mysql'</span>,</span><br><span class="line"> <span class="string">'HOST'</span>: <span class="string">'127.0.0.1'</span>, <span class="comment"># 数据库主机(默认)</span></span><br><span class="line"> <span class="string">'PORT'</span>: <span class="number">3306</span>, <span class="comment"># 数据库端口</span></span><br><span class="line"> <span class="string">'USER'</span>: <span class="string">'你的数据库用户名'</span>, <span class="comment"># 数据库用户名</span></span><br><span class="line"> <span class="string">'PASSWORD'</span>: <span class="string">'你的密码'</span>, <span class="comment"># 数据库用户密码</span></span><br><span class="line"> <span class="string">'NAME'</span>: <span class="string">'bookdb'</span> <span class="comment"># 数据库名字</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>3. 在跟目录下配置pymysql</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pip install pymysql</span><br></pre></td></tr></table></figure><p><strong>4. 在子应用的 __ init __.py 文件中配置pymysql</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> pymysql</span><br><span class="line"></span><br><span class="line">pymysql.install_as_MySQLdb()</span><br></pre></td></tr></table></figure><h4 id="模型迁移-（建表）"><a href="#模型迁移-（建表）" class="headerlink" title="模型迁移 （建表）"></a>模型迁移 （建表）</h4><p><strong>生成迁移文件</strong>：根据模型类生成创建表的语句</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">python manage.py makemigrations</span><br></pre></td></tr></table></figure><p><strong>执行迁移</strong>：同步数据库</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">python manage.py migrate</span><br></pre></td></tr></table></figure><h2 id="站点管理"><a href="#站点管理" class="headerlink" title="站点管理"></a>站点管理</h2><ul><li><strong>站点</strong>: 分为<code>内容发布</code>和<code>公共访问</code>两部分</li><li><strong>内容发布</strong>的部分由网站的管理员负责查看、添加、修改、删除数据</li><li><code>Django</code>能够根据定义的模型类自动地生成管理模块</li><li>使用 <code>Django</code> 的管理模块, 需要按照如下步骤操作 :</li></ul><h4 id="1-管理界面本地化"><a href="#1-管理界面本地化" class="headerlink" title="1. 管理界面本地化"></a>1. 管理界面本地化</h4><p><strong>本地化是将显示的语言、时间等使用本地的习惯，这里的本地化就是进行中国化.</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/869B2uRJpf3Krs4.png" alt="界面本地化"></p><h4 id="2-创建管理员"><a href="#2-创建管理员" class="headerlink" title="2. 创建管理员"></a>2. 创建管理员</h4><p><strong>进入虚拟环境后</strong></p><p>创建管理员的命令 :</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml">python manage.py createsuperuser</span></span><br></pre></td></tr></table></figure><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/fuCmwZr5jaQphiM.png" alt="创建管理员"></p><p>重置密码命令</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml">python manager.py changepassword 用户名</span></span><br></pre></td></tr></table></figure><p>登陆站点 :<code>http://127.0.0.1:8000/admin</code></p><p>输入你的用户名与密码，即可进行编辑</p><h4 id="3-注册模型类"><a href="#3-注册模型类" class="headerlink" title="3. 注册模型类"></a>3. 注册模型类</h4><p>在<code>子应用</code>的<code>admin.py</code>文件中注册模型类</p><p>需要导入模型模块 :<code>from 你的子应用.models import 要导入的表</code>；</p><p>这里演示为子应用book.models中导入BookInfo与PeopleInfo表，例如图：</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/k2cGJH7sy3aAKit.png" alt="image.png"></p><p>注册后：</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/ubDkIxVqf6tOC4Q.png" alt="image.png"></p><p><strong>注册完成后可对其表进行<code>添加数据</code> <code>修改数据</code> <code>删除数据</code>功能</strong></p><h4 id="4-发布内容到数据库"><a href="#4-发布内容到数据库" class="headerlink" title="4.发布内容到数据库"></a>4.发布内容到数据库</h4><p>前文连接数据库后，在后台添加的数据可直接在数据库查看以及修改，两者是相互对应的</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">__str__</span>(<span class="params">self</span>):</span></span><br><span class="line"> <span class="string">"""将模型类以字符串的方式输出"""</span></span><br><span class="line"> <span class="keyword">return</span> self.name</span><br></pre></td></tr></table></figure><p>视图 与 URL</p><p><strong>用户在URL中请求的是视图，视图接收请求后进行处理 并将处理的结果返回给请求者.</strong></p><h4 id="视图-view"><a href="#视图-view" class="headerlink" title="视图 view"></a>视图 view</h4><ul><li>视图就是一个<code>Python</code>函数，被定义在<code>应用</code>的<code>views.py</code>中.</li><li>视图的第一个参数是<code>HttpRequest</code>类型的对象<code>reqeust</code>，包含了所有<code>请求信息</code>.</li><li>视图必须返回<code>HttpResponse对象</code>，包含返回给请求者的<code>响应信息</code>.</li><li>需要导入<code>HttpResponse</code>模块 :<code>from django.http import HttpResponse</code></li></ul><p>这里演示为子应用中的<strong>migrations文件下的views.py</strong>中创建发送请求函数，例如图：</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/7k3S6CfynXZV2pv.png" alt="image.png"></p><h4 id="URLconf"><a href="#URLconf" class="headerlink" title="URLconf"></a>URLconf</h4><p><strong>查找视图的过程 :</strong></p><ul><li>1.请求者在浏览器地址栏中输入URL, 请求到网站.</li><li>2.网站获取URL信息.</li><li>3.然后与编写好的URLconf逐条匹配.</li><li>4.如果匹配成功则调用对应的视图.</li><li>5.如果所有的URLconf都没有匹配成功.则返回404错误.</li></ul><p><code>URLconf</code>入口</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/Sae64i8yToLlQYk.png" alt="image.png"></p><p>需要两步完成<code>URLconf</code>配置</p><ul><li>1.在<code>项目</code>中定义<code>URLconf</code></li></ul><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/et4Lh6c7GNjRTQB.png" alt="image.png"></p><ul><li>2.在<code>应用</code>中定义<code>URLconf</code></li></ul><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/Tls1S6wIHzrJAuh.png" alt="image.png"></p><p><strong>URL匹配全过程</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/HogW8E7uTrDvfdS.png" alt="image.png"></p><h2 id="模板"><a href="#模板" class="headerlink" title="模板"></a>模板</h2><p><strong>模板是一个文本，用于分离文档的表现形式和内容。</strong></p><h3 id="模板使用步骤"><a href="#模板使用步骤" class="headerlink" title="模板使用步骤"></a>模板使用步骤</h3><ul><li>1.创建模板</li><li>2.设置模板查找路径</li><li>3.模板接收视图传入的数据</li><li>4.模板处理数据</li></ul><h4 id="1-创建模板"><a href="#1-创建模板" class="headerlink" title="1.创建模板"></a>1.创建模板</h4><ul><li>在<code>应用</code>同级目录下创建模板文件夹<code>templates</code>. 文件夹名称固定写法.</li><li>在<code>templates</code>文件夹下, 创建<code>应用</code>同名文件夹. 例, <code>Book</code></li><li>在<code>应用</code>同名文件夹下创建<code>网页模板</code>文件. 例 :<code>index.html</code></li></ul><p>如图例：</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/l8ZamhijC3MuqAS.png" alt="image.png"></p><h4 id="2-设置模板查找路径"><a href="#2-设置模板查找路径" class="headerlink" title="2.设置模板查找路径"></a>2.设置模板查找路径</h4><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/LtY71P8QESeBywl.png" alt="image.png"></p><h4 id="3-模板接收视图传入的数据"><a href="#3-模板接收视图传入的数据" class="headerlink" title="3.模板接收视图传入的数据"></a>3.模板接收视图传入的数据</h4><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/1UQkmuV7cYAnE4R.png" alt="image.png"></p><h4 id="4-模板处理数据"><a href="#4-模板处理数据" class="headerlink" title="4.模板处理数据"></a>4.模板处理数据</h4><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/26/XgaHipjCoITVUR7.png" alt="image.png"></p><h4 id="5-查看模板处理数据成果"><a href="#5-查看模板处理数据成果" class="headerlink" title="5. 查看模板处理数据成果"></a>5. 查看模板处理数据成果</h4><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/29/2bcrRChynk1Le6q.png" alt="查看模板处理数据成果"></p><h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><h4 id="DEBUG"><a href="#DEBUG" class="headerlink" title="DEBUG"></a>DEBUG</h4><p>调试模式，创建工程后初始值为<strong>True</strong>，即默认工作在调试模式下。</p><ul><li><p>修改代码文件，程序自动重启</p></li><li><p>Django程序出现异常时，向前端显示详细的错误追踪信息</p></li><li><p>而非调试模式下，仅返回Server Error (500)</p></li></ul><p><code>注意：部署线上运行的Django不要运行在调式模式下，记得修改DEBUG=False和ALLOW_HOSTS。</code></p><h4 id="静态文件"><a href="#静态文件" class="headerlink" title="静态文件"></a>静态文件</h4><p>项目中的CSS、图片、js都是静态文件。一般会将静态文件放到一个单独的目录中，以方便管理。在html页面中调用时，也需要指定静态文件的路径，Django中提供了一种解析的方式配置静态文件路径。静态文件可以放在项目根目录下，也可以放在应用的目录下，由于有些静态文件在项目中是通用的，所以推荐放在项目的根目录下，方便管理。</p><p>为了提供静态文件，需要配置两个参数：</p><ul><li><strong>STATICFILES_DIRS</strong>存放查找静态文件的目录</li><li><strong>STATIC_URL</strong>访问静态文件的URL前缀</li></ul><p>1） 在<strong>项目根目录下创建static目录</strong>来保存静态文件。</p><p>2） 在<strong>bookmanager/settings.py</strong>中修改静态文件的两个参数为</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">STATIC_URL = <span class="string">'/static/'</span></span><br><span class="line">STATICFILES_DIRS = [</span><br><span class="line"> os.path.join(BASE_DIR, <span class="string">'static'</span>),</span><br><span class="line">]</span><br></pre></td></tr></table></figure><p>3）此时在static添加的任何静态文件都可以使用网址**/static/文件在static中的路径**来访问了。</p><p>例如，我们向static目录中添加一个index.html文件，在浏览器中就可以使用127.0.0.1:8000/static/index.html来访问。</p><p>或者我们在static目录中添加了一个子目录和文件book/detail.html，在浏览器中就可以使用127.0.0.1:8000/static/book/detail.html来访问。</p><h4 id="App应用配置"><a href="#App应用配置" class="headerlink" title="App应用配置"></a>App应用配置</h4><p>在每个应用目录中都包含了apps.py文件，用于保存该应用的相关信息。</p><p>在创建应用时，Django会向apps.py文件中写入一个该应用的配置类，如</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> django.apps <span class="keyword">import</span> AppConfig</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">BookConfig</span>(<span class="params">AppConfig</span>):</span></span><br><span class="line"> name = <span class="string">'book'</span></span><br></pre></td></tr></table></figure><p>我们将此类添加到工程settings.py中的INSTALLED_APPS列表中，表明注册安装具备此配置属性的应用。</p><ul><li><p><strong>AppConfig.name</strong>属性表示这个配置类是加载到哪个应用的，每个配置类必须包含此属性，默认自动生成。</p></li><li><p><strong>AppConfig.verbose_name</strong>属性用于设置该应用的直观可读的名字，此名字在Django提供的Admin管理站点中会显示，如</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> django.apps <span class="keyword">import</span> AppConfig</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">UsersConfig</span>(<span class="params">AppConfig</span>):</span></span><br><span class="line"> name = <span class="string">'book'</span></span><br><span class="line"> verbose_name</span><br></pre></td></tr></table></figure></li></ul>]]></content>
<tags>
<tag> Django </tag>
</tags>
</entry>
<entry>
<title>sql必知必会挑战题答案</title>
<link href="/2021/11/26/Mysql%E6%8C%91%E6%88%98%E9%A2%98/"/>
<url>/2021/11/26/Mysql%E6%8C%91%E6%88%98%E9%A2%98/</url>
<content type="html"><![CDATA[<h2 id="挑战题答案"><a href="#挑战题答案" class="headerlink" title="挑战题答案"></a>挑战题答案</h2><h2 id="第-1-课-没有挑战题"><a href="#第-1-课-没有挑战题" class="headerlink" title="第 1 课 没有挑战题"></a>第 1 课 没有挑战题</h2><h2 id="第-2-课-检索数据"><a href="#第-2-课-检索数据" class="headerlink" title="第 2 课 检索数据"></a>第 2 课 检索数据</h2><h4 id="1-编写SQL语句，从Customers表中检索所有的ID（cust-id）。"><a href="#1-编写SQL语句，从Customers表中检索所有的ID（cust-id）。" class="headerlink" title="1. 编写SQL语句，从Customers表中检索所有的ID（cust_id）。"></a>1. 编写SQL语句，从Customers表中检索所有的ID（cust_id）。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_id</span><br><span class="line">FROM Customers;</span><br></pre></td></tr></table></figure><h4 id="2-OrderItems表包含了所有已订购的产品（有些已被订购多次）。编写SQL语句，检索并列出已订购产品（prod-id）的清单（不用列每个订单，只列出不同产品的清单）。提示：最终应该显示-7-行。"><a href="#2-OrderItems表包含了所有已订购的产品（有些已被订购多次）。编写SQL语句，检索并列出已订购产品（prod-id）的清单（不用列每个订单，只列出不同产品的清单）。提示：最终应该显示-7-行。" class="headerlink" title="2. OrderItems表包含了所有已订购的产品（有些已被订购多次）。编写SQL语句，检索并列出已订购产品（prod_id）的清单（不用列每个订单，只列出不同产品的清单）。提示：最终应该显示 7 行。"></a>2. OrderItems表包含了所有已订购的产品（有些已被订购多次）。编写SQL语句，检索并列出已订购产品（prod_id）的清单（不用列每个订单，只列出不同产品的清单）。提示：最终应该显示 7 行。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT DISTINCT prod_id</span><br><span class="line">FROM OrderItems;</span><br></pre></td></tr></table></figure><h4 id="3-编写SQL语句，检索Customers表中所有的列，再编写另外的SELECT语句，仅检索顾客的ID。使用注释，注释掉一条SELECT语句，以便运行另一条SELECT语句。（当然，要测试这两个语句。）"><a href="#3-编写SQL语句，检索Customers表中所有的列，再编写另外的SELECT语句，仅检索顾客的ID。使用注释，注释掉一条SELECT语句，以便运行另一条SELECT语句。（当然，要测试这两个语句。）" class="headerlink" title="3. 编写SQL语句，检索Customers表中所有的列，再编写另外的SELECT语句，仅检索顾客的ID。使用注释，注释掉一条SELECT语句，以便运行另一条SELECT语句。（当然，要测试这两个语句。）"></a>3. 编写SQL语句，检索Customers表中所有的列，再编写另外的SELECT语句，仅检索顾客的ID。使用注释，注释掉一条SELECT语句，以便运行另一条SELECT语句。（当然，要测试这两个语句。）</h4><h5 id="SELECT"><a href="#SELECT" class="headerlink" title="SELECT *"></a>SELECT *</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"># SELECT cust_id</span><br><span class="line">FROM Customers;</span><br></pre></td></tr></table></figure><h2 id="第-3-课-排序检索数据"><a href="#第-3-课-排序检索数据" class="headerlink" title="第 3 课 排序检索数据"></a>第 3 课 排序检索数据</h2><h4 id="1-编写SQL语句，从Customers中检索所有的顾客名称（cust-names），并按从Z到A的顺序显示结果。"><a href="#1-编写SQL语句，从Customers中检索所有的顾客名称（cust-names），并按从Z到A的顺序显示结果。" class="headerlink" title="1. 编写SQL语句，从Customers中检索所有的顾客名称（cust_names），并按从Z到A的顺序显示结果。"></a>1. 编写SQL语句，从Customers中检索所有的顾客名称（cust_names），并按从Z到A的顺序显示结果。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_name</span><br><span class="line">FROM Customers</span><br><span class="line">ORDER BY cust_name DESC ;</span><br></pre></td></tr></table></figure><h4 id="2-编写SQL语句，从Orders表中检索顾客-ID（cust-id）和订单号（order-num），并先按顾客ID对结果进行排序，再按订单日期倒序排列。"><a href="#2-编写SQL语句，从Orders表中检索顾客-ID（cust-id）和订单号（order-num），并先按顾客ID对结果进行排序，再按订单日期倒序排列。" class="headerlink" title="2. 编写SQL语句，从Orders表中检索顾客 ID（cust_id）和订单号（order_num），并先按顾客ID对结果进行排序，再按订单日期倒序排列。"></a>2. 编写SQL语句，从Orders表中检索顾客 ID（cust_id）和订单号（order_num），并先按顾客ID对结果进行排序，再按订单日期倒序排列。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_id, order_num</span><br><span class="line">FROM Orders</span><br><span class="line">ORDER BY cust_id, order_date DESC ;</span><br></pre></td></tr></table></figure><h4 id="3-显然，我们的虚拟商店更喜欢出售比较贵的物品，而且这类物品有很多。编写SQL语句，显示OrderItems表中的数量和价格（item-price），并按数量由多到少、价格由高到低排序。"><a href="#3-显然，我们的虚拟商店更喜欢出售比较贵的物品，而且这类物品有很多。编写SQL语句，显示OrderItems表中的数量和价格（item-price），并按数量由多到少、价格由高到低排序。" class="headerlink" title="3. 显然，我们的虚拟商店更喜欢出售比较贵的物品，而且这类物品有很多。编写SQL语句，显示OrderItems表中的数量和价格（item_price），并按数量由多到少、价格由高到低排序。"></a>3. 显然，我们的虚拟商店更喜欢出售比较贵的物品，而且这类物品有很多。编写SQL语句，显示OrderItems表中的数量和价格（item_price），并按数量由多到少、价格由高到低排序。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT quantity, item_price</span><br><span class="line">FROM OrderItems</span><br><span class="line">ORDER BY quantity DESC , item_price DESC ;</span><br></pre></td></tr></table></figure><h4 id="4-下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）"><a href="#4-下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）" class="headerlink" title="4. 下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）"></a>4. 下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT vend_name,</span><br><span class="line">FROM Vendors</span><br><span class="line">ORDER vend_name DESC;</span><br></pre></td></tr></table></figure><h5 id="vend-name后不应有逗号（逗号仅用于分隔多个列），并且ORDER后缺少了BY。"><a href="#vend-name后不应有逗号（逗号仅用于分隔多个列），并且ORDER后缺少了BY。" class="headerlink" title="vend_name后不应有逗号（逗号仅用于分隔多个列），并且ORDER后缺少了BY。"></a>vend_name后不应有逗号（逗号仅用于分隔多个列），并且ORDER后缺少了BY。</h5><h2 id="第-4-课-过滤数据"><a href="#第-4-课-过滤数据" class="headerlink" title="第 4 课 过滤数据"></a>第 4 课 过滤数据</h2><h4 id="1-编写SQL语句，从Products表中检索产品ID（prod-id）和产品名-称（prod-name），只返回价格为9-49美元的产品。"><a href="#1-编写SQL语句，从Products表中检索产品ID（prod-id）和产品名-称（prod-name），只返回价格为9-49美元的产品。" class="headerlink" title="1. 编写SQL语句，从Products表中检索产品ID（prod_id）和产品名 称（prod_name），只返回价格为9.49美元的产品。"></a>1. 编写SQL语句，从Products表中检索产品ID（prod_id）和产品名 称（prod_name），只返回价格为9.49美元的产品。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_id, prod_name</span><br><span class="line">FROM Products</span><br><span class="line">WHERE prod_price = 9.49;</span><br></pre></td></tr></table></figure><h4 id="2-编写SQL语句，从Products表中检索产品ID（prod-id）和产品名称（prod-name），只返回价格为-9-美元或更高的产品。"><a href="#2-编写SQL语句，从Products表中检索产品ID（prod-id）和产品名称（prod-name），只返回价格为-9-美元或更高的产品。" class="headerlink" title="2. 编写SQL语句，从Products表中检索产品ID（prod_id）和产品名称（prod_name），只返回价格为 9 美元或更高的产品。"></a>2. 编写SQL语句，从Products表中检索产品ID（prod_id）和产品名称（prod_name），只返回价格为 9 美元或更高的产品。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_id, prod_name</span><br><span class="line">FROM Products</span><br><span class="line">WHERE prod_price >= 9;</span><br></pre></td></tr></table></figure><h4 id="3-结合第-3-课和第-4-课编写SQL语句，从OrderItems表中检索出所有-不同订单（order-num），其中包含-100-个或更多的产品。"><a href="#3-结合第-3-课和第-4-课编写SQL语句，从OrderItems表中检索出所有-不同订单（order-num），其中包含-100-个或更多的产品。" class="headerlink" title="3. 结合第 3 课和第 4 课编写SQL语句，从OrderItems表中检索出所有 不同订单（order_num），其中包含 100 个或更多的产品。"></a>3. 结合第 3 课和第 4 课编写SQL语句，从OrderItems表中检索出所有 不同订单（order_num），其中包含 100 个或更多的产品。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT DISTINCT order_num</span><br><span class="line">FROM OrderItems</span><br><span class="line">WHERE quantity >=100;</span><br></pre></td></tr></table></figure><h4 id="4-编写SQL语句，返回Products表中所有价格在-3-美元到-6-美元之间的产品的名称（prod-name）和价格（prod-price），然后按价格对结果进行排序。（本题有多种解决方案，我们在下一课再讨论，不过你可以使用目前已学的知识来解决它。）"><a href="#4-编写SQL语句，返回Products表中所有价格在-3-美元到-6-美元之间的产品的名称（prod-name）和价格（prod-price），然后按价格对结果进行排序。（本题有多种解决方案，我们在下一课再讨论，不过你可以使用目前已学的知识来解决它。）" class="headerlink" title="4. 编写SQL语句，返回Products表中所有价格在 3 美元到 6 美元之间的产品的名称（prod_name）和价格（prod_price），然后按价格对结果进行排序。（本题有多种解决方案，我们在下一课再讨论，不过你可以使用目前已学的知识来解决它。）"></a>4. 编写SQL语句，返回Products表中所有价格在 3 美元到 6 美元之间的产品的名称（prod_name）和价格（prod_price），然后按价格对结果进行排序。（本题有多种解决方案，我们在下一课再讨论，不过你可以使用目前已学的知识来解决它。）</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_name, prod_price</span><br><span class="line">FROM products</span><br><span class="line">WHERE prod_price BETWEEN 3 AND 6</span><br><span class="line">ORDER BY prod_price;</span><br></pre></td></tr></table></figure><h2 id="第-5-课-高级数据过滤"><a href="#第-5-课-高级数据过滤" class="headerlink" title="第 5 课 高级数据过滤"></a>第 5 课 高级数据过滤</h2><h4 id="1-编写SQL语句，从Vendors表中检索供应商名称（vend-name），仅返回加利福尼亚州的供应商（这需要按国家-USA-和州-CA-进行过滤，没准其他国家也存在一个加利福尼亚州）。提示：过滤器需要匹配字符串。"><a href="#1-编写SQL语句，从Vendors表中检索供应商名称（vend-name），仅返回加利福尼亚州的供应商（这需要按国家-USA-和州-CA-进行过滤，没准其他国家也存在一个加利福尼亚州）。提示：过滤器需要匹配字符串。" class="headerlink" title="1. 编写SQL语句，从Vendors表中检索供应商名称（vend_name），仅返回加利福尼亚州的供应商（这需要按国家[USA]和州[CA]进行过滤，没准其他国家也存在一个加利福尼亚州）。提示：过滤器需要匹配字符串。"></a>1. 编写SQL语句，从Vendors表中检索供应商名称（vend_name），仅返回加利福尼亚州的供应商（这需要按国家[USA]和州[CA]进行过滤，没准其他国家也存在一个加利福尼亚州）。提示：过滤器需要匹配字符串。</h4><h3 id="4-挑战题答案"><a href="#4-挑战题答案" class="headerlink" title="4 | 挑战题答案"></a>4 | 挑战题答案</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT vend_name</span><br><span class="line">FROM Vendors</span><br><span class="line">WHERE vend_country = 'USA' AND vend_state = 'CA';</span><br></pre></td></tr></table></figure><h4 id="2-编写SQL语句，查找所有至少订购了总量-100-个的BR01、BR02或BR03的订单。你需要返回OrderItems表的订单号（order-num）、产品ID（prod-id）和数量，并按产品ID和数量进行过滤。提示：根据编写过滤器的方式，可能需要特别注意求值顺序。"><a href="#2-编写SQL语句，查找所有至少订购了总量-100-个的BR01、BR02或BR03的订单。你需要返回OrderItems表的订单号（order-num）、产品ID（prod-id）和数量，并按产品ID和数量进行过滤。提示：根据编写过滤器的方式，可能需要特别注意求值顺序。" class="headerlink" title="2. 编写SQL语句，查找所有至少订购了总量 100 个的BR01、BR02或BR03的订单。你需要返回OrderItems表的订单号（order_num）、产品ID（prod_id）和数量，并按产品ID和数量进行过滤。提示：根据编写过滤器的方式，可能需要特别注意求值顺序。"></a>2. 编写SQL语句，查找所有至少订购了总量 100 个的BR01、BR02或BR03的订单。你需要返回OrderItems表的订单号（order_num）、产品ID（prod_id）和数量，并按产品ID和数量进行过滤。提示：根据编写过滤器的方式，可能需要特别注意求值顺序。</h4><h5 id="–解法-1"><a href="#–解法-1" class="headerlink" title="–解法 1"></a>–解法 1</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT order_num, prod_id, quantity</span><br><span class="line">FROM OrderItems</span><br><span class="line">WHERE (prod_id='BR01' OR prod_id='BR02' OR prod_id='BR03')</span><br><span class="line">AND quantity >=100;</span><br></pre></td></tr></table></figure><h5 id="–解法-2"><a href="#–解法-2" class="headerlink" title="–解法 2"></a>–解法 2</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT order_num, prod_id, quantity</span><br><span class="line">FROM OrderItems</span><br><span class="line">WHERE prod_id IN ('BR01','BR02','BR03')</span><br><span class="line">AND quantity >=100;</span><br></pre></td></tr></table></figure><h4 id="3-现在，我们回顾上一课的挑战题。编写SQL语句，返回所有价格在-3美元到-6-美元之间的产品的名称（prod-name）和价格（prod-price）。使用AND，然后按价格对结果进行排序。"><a href="#3-现在，我们回顾上一课的挑战题。编写SQL语句，返回所有价格在-3美元到-6-美元之间的产品的名称（prod-name）和价格（prod-price）。使用AND，然后按价格对结果进行排序。" class="headerlink" title="3. 现在，我们回顾上一课的挑战题。编写SQL语句，返回所有价格在 3美元到 6 美元之间的产品的名称（prod_name）和价格（prod_price）。使用AND，然后按价格对结果进行排序。"></a>3. 现在，我们回顾上一课的挑战题。编写SQL语句，返回所有价格在 3美元到 6 美元之间的产品的名称（prod_name）和价格（prod_price）。使用AND，然后按价格对结果进行排序。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_name, prod_price</span><br><span class="line">FROM products</span><br><span class="line">WHERE prod_price >= 3 AND prod_price <= 6</span><br><span class="line">ORDER BY prod_price;</span><br></pre></td></tr></table></figure><h4 id="4-下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）-1"><a href="#4-下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）-1" class="headerlink" title="4. 下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）"></a>4. 下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT vend_name</span><br><span class="line">FROM Vendors</span><br><span class="line">ORDER BY vend_name</span><br><span class="line">WHERE vend_country = 'USA' AND vend_state = 'CA';</span><br></pre></td></tr></table></figure><h4 id="ORDER-BY必须跟在WHERE子句之后。"><a href="#ORDER-BY必须跟在WHERE子句之后。" class="headerlink" title="ORDER BY必须跟在WHERE子句之后。"></a>ORDER BY必须跟在WHERE子句之后。</h4><h2 id="第-6-课-用通配符进行过滤"><a href="#第-6-课-用通配符进行过滤" class="headerlink" title="第 6 课 用通配符进行过滤"></a>第 6 课 用通配符进行过滤</h2><h4 id="1-编写SQL语句，从Products表中检索产品名称（prod-name）和描述（prod-desc），仅返回描述中包含toy一词的产品。"><a href="#1-编写SQL语句，从Products表中检索产品名称（prod-name）和描述（prod-desc），仅返回描述中包含toy一词的产品。" class="headerlink" title="1. 编写SQL语句，从Products表中检索产品名称（prod_name）和描述（prod_desc），仅返回描述中包含toy一词的产品。"></a>1. 编写SQL语句，从Products表中检索产品名称（prod_name）和描述（prod_desc），仅返回描述中包含toy一词的产品。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_name, prod_desc</span><br><span class="line">FROM Products</span><br><span class="line">WHERE prod_desc LIKE '%toy%';</span><br></pre></td></tr></table></figure><h4 id="2-反过来再来一次。编写SQL语句，从Products表中检索产品名称（prod-name）和描述（prod-desc），仅返回描述中未出现toy一词的产品。这次，按产品名称对结果进行排序。"><a href="#2-反过来再来一次。编写SQL语句，从Products表中检索产品名称（prod-name）和描述（prod-desc），仅返回描述中未出现toy一词的产品。这次，按产品名称对结果进行排序。" class="headerlink" title="2. 反过来再来一次。编写SQL语句，从Products表中检索产品名称（prod_name）和描述（prod_desc），仅返回描述中未出现toy一词的产品。这次，按产品名称对结果进行排序。"></a>2. 反过来再来一次。编写SQL语句，从Products表中检索产品名称（prod_name）和描述（prod_desc），仅返回描述中未出现toy一词的产品。这次，按产品名称对结果进行排序。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_name, prod_desc</span><br><span class="line">FROM Products</span><br><span class="line">WHERE NOT prod_desc LIKE '%toy%'</span><br><span class="line">ORDER BY prod_name;</span><br></pre></td></tr></table></figure><h4 id="3-编写SQL语句，从Products表中检索产品名称（prod-name）和描述（prod-desc），仅返回描述中同时出现toy和carrots的产品。有好几种方法可以执行此操作，但对于这个挑战题，请使用AND和两个LIKE比较。"><a href="#3-编写SQL语句，从Products表中检索产品名称（prod-name）和描述（prod-desc），仅返回描述中同时出现toy和carrots的产品。有好几种方法可以执行此操作，但对于这个挑战题，请使用AND和两个LIKE比较。" class="headerlink" title="3. 编写SQL语句，从Products表中检索产品名称（prod_name）和描述（prod_desc），仅返回描述中同时出现toy和carrots的产品。有好几种方法可以执行此操作，但对于这个挑战题，请使用AND和两个LIKE比较。"></a>3. 编写SQL语句，从Products表中检索产品名称（prod_name）和描述（prod_desc），仅返回描述中同时出现toy和carrots的产品。有好几种方法可以执行此操作，但对于这个挑战题，请使用AND和两个LIKE比较。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_name, prod_desc</span><br><span class="line">FROM Products</span><br><span class="line">WHERE prod_desc LIKE '%toy%' AND prod_desc LIKE '%carrots%';</span><br></pre></td></tr></table></figure><h4 id="4-来个比较棘手的。我没有特别向你展示这个语法，而是想看看你根据目前已学的知识是否可以找到答案。编写SQL语句，从Products表中检索产品名称（prod-name）和描述（prod-desc），仅返回在描述中以先后顺序同时出现toy和carrots的产品。提示：只需要用带有三个-符号的LIKE即可。"><a href="#4-来个比较棘手的。我没有特别向你展示这个语法，而是想看看你根据目前已学的知识是否可以找到答案。编写SQL语句，从Products表中检索产品名称（prod-name）和描述（prod-desc），仅返回在描述中以先后顺序同时出现toy和carrots的产品。提示：只需要用带有三个-符号的LIKE即可。" class="headerlink" title="4. 来个比较棘手的。我没有特别向你展示这个语法，而是想看看你根据目前已学的知识是否可以找到答案。编写SQL语句，从Products表中检索产品名称（prod_name）和描述（prod_desc），仅返回在描述中以先后顺序同时出现toy和carrots的产品。提示：只需要用带有三个 % 符号的LIKE即可。"></a>4. 来个比较棘手的。我没有特别向你展示这个语法，而是想看看你根据目前已学的知识是否可以找到答案。编写SQL语句，从Products表中检索产品名称（prod_name）和描述（prod_desc），仅返回在描述中以先后顺序同时出现toy和carrots的产品。提示：只需要用带有三个 % 符号的LIKE即可。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_name, prod_desc</span><br><span class="line">FROM Products</span><br><span class="line">WHERE prod_desc LIKE '%toy%carrots%';</span><br></pre></td></tr></table></figure><h2 id="第-7-课-创建计算字段"><a href="#第-7-课-创建计算字段" class="headerlink" title="第 7 课 创建计算字段"></a>第 7 课 创建计算字段</h2><h4 id="1-别名的常见用法是在检索出的结果中重命名表的列字段（为了符合特定的报表要求或客户需求）。编写SQL语句，从Vendors表中检索vend-id、vend-name、vend-address和vend-city，将vend-name重命名为vname，将vend-city重命名为vcity，将vend-address重命名为vaddress。按供应商名称对结果进行排序（可以使用原始名称或新的名称）。"><a href="#1-别名的常见用法是在检索出的结果中重命名表的列字段（为了符合特定的报表要求或客户需求）。编写SQL语句，从Vendors表中检索vend-id、vend-name、vend-address和vend-city，将vend-name重命名为vname，将vend-city重命名为vcity，将vend-address重命名为vaddress。按供应商名称对结果进行排序（可以使用原始名称或新的名称）。" class="headerlink" title="1. 别名的常见用法是在检索出的结果中重命名表的列字段（为了符合特定的报表要求或客户需求）。编写SQL语句，从Vendors表中检索vend_id、vend_name、vend_address和vend_city，将vend_name重命名为vname，将vend_city重命名为vcity，将vend_address重命名为vaddress。按供应商名称对结果进行排序（可以使用原始名称或新的名称）。"></a>1. 别名的常见用法是在检索出的结果中重命名表的列字段（为了符合特定的报表要求或客户需求）。编写SQL语句，从Vendors表中检索vend_id、vend_name、vend_address和vend_city，将vend_name重命名为vname，将vend_city重命名为vcity，将vend_address重命名为vaddress。按供应商名称对结果进行排序（可以使用原始名称或新的名称）。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT vend_id,</span><br><span class="line">vend_name as vname,</span><br><span class="line">vend_address AS vaddress,</span><br><span class="line">vend_city AS vcity</span><br><span class="line">FROM Vendors</span><br><span class="line">ORDER BY vname;</span><br></pre></td></tr></table></figure><h4 id="2-我们的示例商店正在进行打折促销，所有产品均降价10-。编写SQL语句，从Products表中返回prod-id、prod-price和sale-price。sale-price是一个包含促销价格的计算字段。提示：可以乘以0-9，得到原价的90-（即10-的折扣）。"><a href="#2-我们的示例商店正在进行打折促销，所有产品均降价10-。编写SQL语句，从Products表中返回prod-id、prod-price和sale-price。sale-price是一个包含促销价格的计算字段。提示：可以乘以0-9，得到原价的90-（即10-的折扣）。" class="headerlink" title="2. 我们的示例商店正在进行打折促销，所有产品均降价10%。编写SQL语句，从Products表中返回prod_id、prod_price和sale_price。sale_price是一个包含促销价格的计算字段。提示：可以乘以0.9，得到原价的90%（即10%的折扣）。"></a>2. 我们的示例商店正在进行打折促销，所有产品均降价10%。编写SQL语句，从Products表中返回prod_id、prod_price和sale_price。sale_price是一个包含促销价格的计算字段。提示：可以乘以0.9，得到原价的90%（即10%的折扣）。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_id, prod_price,</span><br><span class="line">prod_price * 0.9 AS sale_price</span><br><span class="line">FROM Products;</span><br></pre></td></tr></table></figure><h2 id="第-8-课-使用函数处理数据"><a href="#第-8-课-使用函数处理数据" class="headerlink" title="第 8 课 使用函数处理数据"></a>第 8 课 使用函数处理数据</h2><h4 id="1-我们的商店已经上线了，正在创建顾客账户。所有用户都需要登录名，默认登录名是其名称和所在城市的组合。编写SQL语句，返回顾客ID（cust-id）、顾客名称（customer-name）和登录名（user-login），其中登录名全部为大写字母，并由顾客联系人的前两个字符（cust-contact）和其所在城市的前三个字符（cust-city）组成。例如，我的登录名是BEOAK（Ben-Forta，居住在Oak-Park）。提示：需要使用函数、拼接和别名。"><a href="#1-我们的商店已经上线了，正在创建顾客账户。所有用户都需要登录名，默认登录名是其名称和所在城市的组合。编写SQL语句，返回顾客ID（cust-id）、顾客名称（customer-name）和登录名（user-login），其中登录名全部为大写字母，并由顾客联系人的前两个字符（cust-contact）和其所在城市的前三个字符（cust-city）组成。例如，我的登录名是BEOAK（Ben-Forta，居住在Oak-Park）。提示：需要使用函数、拼接和别名。" class="headerlink" title="1. 我们的商店已经上线了，正在创建顾客账户。所有用户都需要登录名，默认登录名是其名称和所在城市的组合。编写SQL语句，返回顾客ID（cust_id）、顾客名称（customer_name）和登录名（user_login），其中登录名全部为大写字母，并由顾客联系人的前两个字符（cust_contact）和其所在城市的前三个字符（cust_city）组成。例如，我的登录名是BEOAK（Ben Forta，居住在Oak Park）。提示：需要使用函数、拼接和别名。"></a>1. 我们的商店已经上线了，正在创建顾客账户。所有用户都需要登录名，默认登录名是其名称和所在城市的组合。编写SQL语句，返回顾客ID（cust_id）、顾客名称（customer_name）和登录名（user_login），其中登录名全部为大写字母，并由顾客联系人的前两个字符（cust_contact）和其所在城市的前三个字符（cust_city）组成。例如，我的登录名是BEOAK（Ben Forta，居住在Oak Park）。提示：需要使用函数、拼接和别名。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">-- DB2, PostgreSQL</span><br><span class="line">SELECT cust_id, cust_name,</span><br><span class="line">UPPER ( LEFT (cust_contact, 2)) || UPPER ( LEFT (cust_city, 3)) AS</span><br><span class="line">user_login</span><br><span class="line">FROM customers;</span><br><span class="line">-- Oracle, SQLite</span><br><span class="line">SELECT cust_id, cust_name,</span><br><span class="line">UPPER ( SUBSTR (cust_contact, 1, 2)) || UPPER ( SUBSTR (cust_city, 1, 3)) AS</span><br><span class="line">user_login</span><br><span class="line">FROM customers;</span><br><span class="line">-- MySQL</span><br><span class="line">SELECT cust_id, cust_name,</span><br><span class="line">CONCAT ( UPPER ( LEFT (cust_contact, 2)), UPPER ( LEFT (cust_city, 3))) AS</span><br><span class="line">user_login</span><br><span class="line">FROM customers;</span><br><span class="line">-- SQL Server</span><br><span class="line">SELECT cust_id, cust_name,</span><br><span class="line">UPPER ( LEFT (cust_contact, 2)) + UPPER ( LEFT (cust_city, 3)) AS</span><br><span class="line">user_login</span><br><span class="line">FROM customers;</span><br></pre></td></tr></table></figure><h4 id="2-编写SQL语句，返回-2020-年-1-月的所有订单的订单号（order-num）和订单日期（order-date），并按订单日期排序。你应该能够根据目-前已学的知识来解决此问题，但也可以开卷查阅DBMS文档。"><a href="#2-编写SQL语句，返回-2020-年-1-月的所有订单的订单号（order-num）和订单日期（order-date），并按订单日期排序。你应该能够根据目-前已学的知识来解决此问题，但也可以开卷查阅DBMS文档。" class="headerlink" title="2. 编写SQL语句，返回 2020 年 1 月的所有订单的订单号（order_num）和订单日期（order_date），并按订单日期排序。你应该能够根据目 前已学的知识来解决此问题，但也可以开卷查阅DBMS文档。"></a>2. 编写SQL语句，返回 2020 年 1 月的所有订单的订单号（order_num）和订单日期（order_date），并按订单日期排序。你应该能够根据目 前已学的知识来解决此问题，但也可以开卷查阅DBMS文档。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">-- DB2, MariaDB, MySQL</span><br><span class="line">SELECT order_num, order_date</span><br><span class="line">FROM Orders</span><br><span class="line">WHERE YEAR (order_date) = 2020 AND MONTH (order_date) = 1</span><br><span class="line">ORDER BY order_date;</span><br><span class="line">-- Oracle, PostgreSQL</span><br><span class="line">SELECT order_num, order_date</span><br><span class="line">FROM Orders</span><br><span class="line">WHERE EXTRACT (year FROM order_date) = 2020 AND EXTRACT (month FROM</span><br><span class="line">order_date) = 1</span><br><span class="line">ORDER BY order_date;</span><br><span class="line">-- PostgreSQL</span><br><span class="line">SELECT order_num, order_date</span><br><span class="line">FROM Orders</span><br><span class="line">WHERE DATE_PART('year', order_date) = 2020</span><br><span class="line">AND DATE_PART('month', order_date) = 1</span><br><span class="line">ORDER BY order_num;</span><br><span class="line">-- SQL Server</span><br><span class="line">SELECT order_num, order_date</span><br><span class="line">FROM Orders</span><br><span class="line">WHERE DATEPART (yy, order_date) = 2020 AND DATEPART (mm, order_date) = 1</span><br><span class="line">ORDER BY order_date;</span><br><span class="line">-- SQLite</span><br><span class="line">SELECT order_num</span><br><span class="line">FROM Orders</span><br><span class="line">WHERE strftime('%Y', order_date) = '2020'</span><br><span class="line">AND strftime('%m', order_date) = '01';</span><br></pre></td></tr></table></figure><h2 id="第-9-课-汇总数据"><a href="#第-9-课-汇总数据" class="headerlink" title="第 9 课 汇总数据"></a>第 9 课 汇总数据</h2><h4 id="1-编写SQL语句，确定已售出产品的总数（使用OrderItems-中的quantity列）。"><a href="#1-编写SQL语句，确定已售出产品的总数（使用OrderItems-中的quantity列）。" class="headerlink" title="1. 编写SQL语句，确定已售出产品的总数（使用OrderItems 中的quantity列）。"></a>1. 编写SQL语句，确定已售出产品的总数（使用OrderItems 中的quantity列）。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT SUM (quantity) AS items_ordered</span><br><span class="line">FROM OrderItems;</span><br></pre></td></tr></table></figure><h4 id="2-修改刚刚创建的语句，确定已售出产品项（prod-item）BR01的总数。"><a href="#2-修改刚刚创建的语句，确定已售出产品项（prod-item）BR01的总数。" class="headerlink" title="2. 修改刚刚创建的语句，确定已售出产品项（prod_item）BR01的总数。"></a>2. 修改刚刚创建的语句，确定已售出产品项（prod_item）BR01的总数。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT SUM (quantity) AS items_ordered</span><br><span class="line">FROM OrderItems</span><br><span class="line">WHERE prod_id = 'BR01';</span><br></pre></td></tr></table></figure><h4 id="3-编写SQL语句，确定Products表中价格不超过-10-美元的最贵产品的价格（prod-price）。将计算所得的字段命名为max-price。"><a href="#3-编写SQL语句，确定Products表中价格不超过-10-美元的最贵产品的价格（prod-price）。将计算所得的字段命名为max-price。" class="headerlink" title="3. 编写SQL语句，确定Products表中价格不超过 10 美元的最贵产品的价格（prod_price）。将计算所得的字段命名为max_price。"></a>3. 编写SQL语句，确定Products表中价格不超过 10 美元的最贵产品的价格（prod_price）。将计算所得的字段命名为max_price。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT MAX (prod_price) AS max_price</span><br><span class="line">FROM Products</span><br><span class="line">WHERE prod_price <= 10;</span><br></pre></td></tr></table></figure><h2 id="第-10-课-分组数据"><a href="#第-10-课-分组数据" class="headerlink" title="第 10 课 分组数据"></a>第 10 课 分组数据</h2><h4 id="1-OrderItems表包含每个订单的每个产品。编写SQL语句，返回每个订单号（order-num）各有多少行数（order-lines），并按order-lines对结果进行排序。"><a href="#1-OrderItems表包含每个订单的每个产品。编写SQL语句，返回每个订单号（order-num）各有多少行数（order-lines），并按order-lines对结果进行排序。" class="headerlink" title="1. OrderItems表包含每个订单的每个产品。编写SQL语句，返回每个订单号（order_num）各有多少行数（order_lines），并按order_lines对结果进行排序。"></a>1. OrderItems表包含每个订单的每个产品。编写SQL语句，返回每个订单号（order_num）各有多少行数（order_lines），并按order_lines对结果进行排序。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT order_num, COUNT (*) as order_lines</span><br><span class="line">FROM OrderItems</span><br><span class="line">GROUP BY order_num</span><br><span class="line">ORDER BY order_lines;</span><br></pre></td></tr></table></figure><h4 id="2-编写SQL语句，返回名为cheapest-item的字段，该字段包含每个供应商成本最低的产品（使用Products表中的prod-price），然后从最低成本到最高成本对结果进行排序。"><a href="#2-编写SQL语句，返回名为cheapest-item的字段，该字段包含每个供应商成本最低的产品（使用Products表中的prod-price），然后从最低成本到最高成本对结果进行排序。" class="headerlink" title="2. 编写SQL语句，返回名为cheapest_item的字段，该字段包含每个供应商成本最低的产品（使用Products表中的prod_price），然后从最低成本到最高成本对结果进行排序。"></a>2. 编写SQL语句，返回名为cheapest_item的字段，该字段包含每个供应商成本最低的产品（使用Products表中的prod_price），然后从最低成本到最高成本对结果进行排序。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT vend_id, MIN (prod_price) AS cheapest_item</span><br><span class="line">FROM Products</span><br><span class="line">GROUP BY vend_id</span><br><span class="line">ORDER BY cheapest_item;</span><br></pre></td></tr></table></figure><h4 id="3-确定最佳顾客非常重要，请编写SQL语句，返回至少含-100-项的所有订单的订单号（OrderItems表中的order-num）。"><a href="#3-确定最佳顾客非常重要，请编写SQL语句，返回至少含-100-项的所有订单的订单号（OrderItems表中的order-num）。" class="headerlink" title="3. 确定最佳顾客非常重要，请编写SQL语句，返回至少含 100 项的所有订单的订单号（OrderItems表中的order_num）。"></a>3. 确定最佳顾客非常重要，请编写SQL语句，返回至少含 100 项的所有订单的订单号（OrderItems表中的order_num）。</h4><h3 id="10-挑战题答案"><a href="#10-挑战题答案" class="headerlink" title="10 | 挑战题答案"></a>10 | 挑战题答案</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">SELECT order_num</span><br><span class="line">FROM OrderItems</span><br><span class="line">GROUP BY order_num</span><br><span class="line">HAVING SUM (quantity) >= 100</span><br><span class="line">ORDER BY order_num;</span><br></pre></td></tr></table></figure><h4 id="4-确定最佳顾客的另一种方式是看他们花了多少钱。编写SQL语句，返回总价至少为-1000-的所有订单的订单号（OrderItems-表中的order-num）。提示：需要计算总和（item-price乘以quantity）。按订单号对结果进行排序。"><a href="#4-确定最佳顾客的另一种方式是看他们花了多少钱。编写SQL语句，返回总价至少为-1000-的所有订单的订单号（OrderItems-表中的order-num）。提示：需要计算总和（item-price乘以quantity）。按订单号对结果进行排序。" class="headerlink" title="4. 确定最佳顾客的另一种方式是看他们花了多少钱。编写SQL语句，返回总价至少为 1000 的所有订单的订单号（OrderItems 表中的order_num）。提示：需要计算总和（item_price乘以quantity）。按订单号对结果进行排序。"></a>4. 确定最佳顾客的另一种方式是看他们花了多少钱。编写SQL语句，返回总价至少为 1000 的所有订单的订单号（OrderItems 表中的order_num）。提示：需要计算总和（item_price乘以quantity）。按订单号对结果进行排序。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">SELECT order_num, SUM (item_price*quantity) AS total_price</span><br><span class="line">FROM OrderItems</span><br><span class="line">GROUP BY order_num</span><br><span class="line">HAVING SUM (item_price*quantity) >= 1000</span><br><span class="line">ORDER BY order_num;</span><br></pre></td></tr></table></figure><h4 id="5-下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）"><a href="#5-下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）" class="headerlink" title="5. 下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）"></a>5. 下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">SELECT order_num, COUNT(*) AS items</span><br><span class="line">FROM OrderItems</span><br><span class="line">GROUP BY items</span><br><span class="line">HAVING COUNT(*) >= 3</span><br><span class="line">ORDER BY items, order_num;</span><br></pre></td></tr></table></figure><h4 id="GROUP-BY项是错误的。GROUP-BY必须是实际列，而不是用于执行汇总计算的列。允许使用GROUP-BY-order-num。"><a href="#GROUP-BY项是错误的。GROUP-BY必须是实际列，而不是用于执行汇总计算的列。允许使用GROUP-BY-order-num。" class="headerlink" title="GROUP BY项是错误的。GROUP BY必须是实际列，而不是用于执行汇总计算的列。允许使用GROUP BY order_num。"></a>GROUP BY项是错误的。GROUP BY必须是实际列，而不是用于执行汇总计算的列。允许使用GROUP BY order_num。</h4><h2 id="第-11-课-使用子查询"><a href="#第-11-课-使用子查询" class="headerlink" title="第 11 课 使用子查询"></a>第 11 课 使用子查询</h2><h4 id="1-使用子查询，返回购买价格为-10-美元或以上产品的顾客列表。你需要使用OrderItems表查找匹配的订单号（order-num），然后使用Order表检索这些匹配订单的顾客ID（cust-id）。"><a href="#1-使用子查询，返回购买价格为-10-美元或以上产品的顾客列表。你需要使用OrderItems表查找匹配的订单号（order-num），然后使用Order表检索这些匹配订单的顾客ID（cust-id）。" class="headerlink" title="1. 使用子查询，返回购买价格为 10 美元或以上产品的顾客列表。你需要使用OrderItems表查找匹配的订单号（order_num），然后使用Order表检索这些匹配订单的顾客ID（cust_id）。"></a>1. 使用子查询，返回购买价格为 10 美元或以上产品的顾客列表。你需要使用OrderItems表查找匹配的订单号（order_num），然后使用Order表检索这些匹配订单的顾客ID（cust_id）。</h4><h3 id="挑战题答案-11"><a href="#挑战题答案-11" class="headerlink" title="挑战题答案 | 11"></a>挑战题答案 | 11</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_id</span><br><span class="line">FROM Orders</span><br><span class="line">WHERE order_num IN ( SELECT order_num</span><br><span class="line">FROM OrderItems</span><br><span class="line">WHERE item_price >= 10);</span><br></pre></td></tr></table></figure><h4 id="2-你想知道订购BR01产品的日期。编写SQL语句，使用子查询来确定哪些订单（在OrderItems中）购买了prod-id为BR01的产品，然后从Orders表中返回每个产品对应的顾客ID（cust-id）和订单日期（order-date）。按订购日期对结果进行排序。"><a href="#2-你想知道订购BR01产品的日期。编写SQL语句，使用子查询来确定哪些订单（在OrderItems中）购买了prod-id为BR01的产品，然后从Orders表中返回每个产品对应的顾客ID（cust-id）和订单日期（order-date）。按订购日期对结果进行排序。" class="headerlink" title="2. 你想知道订购BR01产品的日期。编写SQL语句，使用子查询来确定哪些订单（在OrderItems中）购买了prod_id为BR01的产品，然后从Orders表中返回每个产品对应的顾客ID（cust_id）和订单日期（order_date）。按订购日期对结果进行排序。"></a>2. 你想知道订购BR01产品的日期。编写SQL语句，使用子查询来确定哪些订单（在OrderItems中）购买了prod_id为BR01的产品，然后从Orders表中返回每个产品对应的顾客ID（cust_id）和订单日期（order_date）。按订购日期对结果进行排序。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_id, order_date</span><br><span class="line">FROM orders</span><br><span class="line">WHERE order_num IN ( SELECT order_num</span><br><span class="line">FROM OrderItems</span><br><span class="line">WHERE prod_id = 'BR01')</span><br><span class="line">ORDER BY order_date;</span><br></pre></td></tr></table></figure><h4 id="3-现在我们让它更具挑战性。在上一个挑战题，返回购买prod-id为BR01的产品的所有顾客的电子邮件（Customers表中的cust-email）。提示：这涉及SELECT语句，最内层的从OrderItems表返回order-num，中间的从Customers表返回cust-id。"><a href="#3-现在我们让它更具挑战性。在上一个挑战题，返回购买prod-id为BR01的产品的所有顾客的电子邮件（Customers表中的cust-email）。提示：这涉及SELECT语句，最内层的从OrderItems表返回order-num，中间的从Customers表返回cust-id。" class="headerlink" title="3. 现在我们让它更具挑战性。在上一个挑战题，返回购买prod_id为BR01的产品的所有顾客的电子邮件（Customers表中的cust_email）。提示：这涉及SELECT语句，最内层的从OrderItems表返回order_num，中间的从Customers表返回cust_id。"></a>3. 现在我们让它更具挑战性。在上一个挑战题，返回购买prod_id为BR01的产品的所有顾客的电子邮件（Customers表中的cust_email）。提示：这涉及SELECT语句，最内层的从OrderItems表返回order_num，中间的从Customers表返回cust_id。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_email FROM Customers</span><br><span class="line">WHERE cust_id IN ( SELECT cust_id</span><br><span class="line">FROM Orders</span><br><span class="line">WHERE order_num IN ( SELECT order_num</span><br><span class="line">FROM OrderItems</span><br><span class="line">WHERE prod_id = 'BR01'));</span><br></pre></td></tr></table></figure><h4 id="4-我们需要一个顾客ID列表，其中包含他们已订购的总金额。编写SQL-语句，返回顾客ID（Orders表中的cust-id），并使用子查询返回total-ordered以便返回每个顾客的订单总数。将结果按金额从大到小排序。提示：你之前已经使用SUM-计算订单总数。"><a href="#4-我们需要一个顾客ID列表，其中包含他们已订购的总金额。编写SQL-语句，返回顾客ID（Orders表中的cust-id），并使用子查询返回total-ordered以便返回每个顾客的订单总数。将结果按金额从大到小排序。提示：你之前已经使用SUM-计算订单总数。" class="headerlink" title="4. 我们需要一个顾客ID列表，其中包含他们已订购的总金额。编写SQL 语句，返回顾客ID（Orders表中的cust_id），并使用子查询返回total_ordered以便返回每个顾客的订单总数。将结果按金额从大到小排序。提示：你之前已经使用SUM()计算订单总数。"></a>4. 我们需要一个顾客ID列表，其中包含他们已订购的总金额。编写SQL 语句，返回顾客ID（Orders表中的cust_id），并使用子查询返回total_ordered以便返回每个顾客的订单总数。将结果按金额从大到小排序。提示：你之前已经使用SUM()计算订单总数。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_id,</span><br><span class="line">( SELECT SUM (item_price*quantity)</span><br><span class="line">FROM OrderItems</span><br><span class="line">WHERE Orders.order_num = OrderItems.order_num) AS total_ordered</span><br><span class="line">FROM Orders</span><br><span class="line">ORDER BY total_ordered DESC ;</span><br></pre></td></tr></table></figure><h4 id="5-再来。编写SQL语句，从Products表中检索所有的产品名称（prod-name），以及名为quant-sold的计算列，其中包含所售产品的总数（在OrderItems表上使用子查询和SUM-quantity-检索）。"><a href="#5-再来。编写SQL语句，从Products表中检索所有的产品名称（prod-name），以及名为quant-sold的计算列，其中包含所售产品的总数（在OrderItems表上使用子查询和SUM-quantity-检索）。" class="headerlink" title="5. 再来。编写SQL语句，从Products表中检索所有的产品名称（prod_ name），以及名为quant_sold的计算列，其中包含所售产品的总数（在OrderItems表上使用子查询和SUM(quantity)检索）。"></a>5. 再来。编写SQL语句，从Products表中检索所有的产品名称（prod_ name），以及名为quant_sold的计算列，其中包含所售产品的总数（在OrderItems表上使用子查询和SUM(quantity)检索）。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_name,</span><br><span class="line">( SELECT Sum(quantity)</span><br><span class="line">FROM OrderItems</span><br><span class="line">WHERE Products.prod_id=OrderItems.prod_id) AS quant_sold</span><br><span class="line">FROM Products;</span><br></pre></td></tr></table></figure><h2 id="第-12-课-联结表"><a href="#第-12-课-联结表" class="headerlink" title="第 12 课 联结表"></a>第 12 课 联结表</h2><h4 id="1-编写SQL语句，返回Customers表中的顾客名称（cust-name）和"><a href="#1-编写SQL语句，返回Customers表中的顾客名称（cust-name）和" class="headerlink" title="1. 编写SQL语句，返回Customers表中的顾客名称（cust_name）和"></a>1. 编写SQL语句，返回Customers表中的顾客名称（cust_name）和</h4><p>Orders表中的相关订单号（order_num），并按顾客名称再按订单号<br>对结果进行排序。实际上是尝试两次，一次使用简单的等联结语法，<br>一次使用INNER JOIN。</p><h5 id="–-等值连接语法"><a href="#–-等值连接语法" class="headerlink" title="– 等值连接语法"></a>– 等值连接语法</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_name, order_num</span><br><span class="line">FROM Customers, Orders</span><br><span class="line">WHERE Customers.cust_id = Orders.cust_id</span><br><span class="line">ORDER BY cust_name, order_num;</span><br><span class="line">-- ANSI INNER JOIN语法</span><br><span class="line">SELECT cust_name, order_num</span><br><span class="line">FROM Customers INNER JOIN Orders</span><br><span class="line">ON Customers.cust_id = Orders.cust_id</span><br><span class="line">ORDER BY cust_name, order_num;</span><br></pre></td></tr></table></figure><h4 id="2-我们来让上一题变得更有用些。除了返回顾客名称和订单号，添加第三列OrderTotal，其中包含每个订单的总价。有两种方法可以执行此操作：使用OrderItems表的子查询来创建OrderTotal列，或者将OrderItems表与现有表联结并使用聚合函数。提示：请注意需要使用完全限定列名的地方。"><a href="#2-我们来让上一题变得更有用些。除了返回顾客名称和订单号，添加第三列OrderTotal，其中包含每个订单的总价。有两种方法可以执行此操作：使用OrderItems表的子查询来创建OrderTotal列，或者将OrderItems表与现有表联结并使用聚合函数。提示：请注意需要使用完全限定列名的地方。" class="headerlink" title="2. 我们来让上一题变得更有用些。除了返回顾客名称和订单号，添加第三列OrderTotal，其中包含每个订单的总价。有两种方法可以执行此操作：使用OrderItems表的子查询来创建OrderTotal列，或者将OrderItems表与现有表联结并使用聚合函数。提示：请注意需要使用完全限定列名的地方。"></a>2. 我们来让上一题变得更有用些。除了返回顾客名称和订单号，添加第三列OrderTotal，其中包含每个订单的总价。有两种方法可以执行此操作：使用OrderItems表的子查询来创建OrderTotal列，或者将OrderItems表与现有表联结并使用聚合函数。提示：请注意需要使用完全限定列名的地方。</h4><h5 id="–-使用子查询的解法"><a href="#–-使用子查询的解法" class="headerlink" title="– 使用子查询的解法"></a>– 使用子查询的解法</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_name,</span><br><span class="line">order_num,</span><br><span class="line">( SELECT Sum(item_price*quantity)</span><br><span class="line">FROM OrderItems</span><br><span class="line">WHERE Orders.order_num=OrderItems.order_num) AS OrderTotal</span><br><span class="line">FROM Customers, Orders</span><br><span class="line">WHERE Customers.cust_id = Orders.cust_id</span><br><span class="line">ORDER BY cust_name, order_num;</span><br><span class="line">-- 使用联结的解法</span><br><span class="line">SELECT cust_name,</span><br><span class="line">Orders.order_num,</span><br><span class="line">Sum(item_price*quantity) AS OrderTotal</span><br><span class="line">FROM Customers, Orders, OrderItems</span><br><span class="line">WHERE Customers.cust_id = Orders.cust_id</span><br><span class="line">AND Orders.order_num = OrderItems.order_num</span><br><span class="line">GROUP BY cust_name, Orders.order_num</span><br><span class="line">ORDER BY cust_name, order_num;</span><br></pre></td></tr></table></figure><h4 id="3-我们重新看一下第-11-课的挑战题-2-。编写SQL语句，检索订购产品BR01的日期，这一次使用联结和简单的等联结语法。输出应该与第11-课的输出相同。"><a href="#3-我们重新看一下第-11-课的挑战题-2-。编写SQL语句，检索订购产品BR01的日期，这一次使用联结和简单的等联结语法。输出应该与第11-课的输出相同。" class="headerlink" title="3. 我们重新看一下第 11 课的挑战题 2 。编写SQL语句，检索订购产品BR01的日期，这一次使用联结和简单的等联结语法。输出应该与第11 课的输出相同。"></a>3. 我们重新看一下第 11 课的挑战题 2 。编写SQL语句，检索订购产品BR01的日期，这一次使用联结和简单的等联结语法。输出应该与第11 课的输出相同。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_id, order_date</span><br><span class="line">FROM Orders, OrderItems</span><br><span class="line">WHERE Orders.order_num = OrderItems.order_num</span><br><span class="line">AND prod_id = 'BR01'</span><br><span class="line">ORDER BY order_date;</span><br></pre></td></tr></table></figure><h3 id="14-挑战题答案4-很有趣，我们再试一次。重新创建为第-11-课挑战题-3-编写的SQL语句，这次使用ANSI的INNER-JOIN语法。在之前编写的代码中使用了两个嵌套的子查询。要重新创建它，需要两个INNER-JOIN语句，每个语句的格式类似于本课讲到的INNER-JOIN示例，而且不要忘记-WHERE子句可以通过prod-id进行过滤。"><a href="#14-挑战题答案4-很有趣，我们再试一次。重新创建为第-11-课挑战题-3-编写的SQL语句，这次使用ANSI的INNER-JOIN语法。在之前编写的代码中使用了两个嵌套的子查询。要重新创建它，需要两个INNER-JOIN语句，每个语句的格式类似于本课讲到的INNER-JOIN示例，而且不要忘记-WHERE子句可以通过prod-id进行过滤。" class="headerlink" title="14 | 挑战题答案4. 很有趣，我们再试一次。重新创建为第 11 课挑战题 3 编写的SQL语句，这次使用ANSI的INNER JOIN语法。在之前编写的代码中使用了两个嵌套的子查询。要重新创建它，需要两个INNER JOIN语句，每个语句的格式类似于本课讲到的INNER JOIN示例，而且不要忘记 WHERE子句可以通过prod_id进行过滤。"></a>14 | 挑战题答案4. 很有趣，我们再试一次。重新创建为第 11 课挑战题 3 编写的SQL语句，这次使用ANSI的INNER JOIN语法。在之前编写的代码中使用了两个嵌套的子查询。要重新创建它，需要两个INNER JOIN语句，每个语句的格式类似于本课讲到的INNER JOIN示例，而且不要忘记 WHERE子句可以通过prod_id进行过滤。</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_email</span><br><span class="line">FROM Customers</span><br><span class="line">INNER JOIN Orders ON Customers.cust_id = Orders.cust_id</span><br><span class="line">INNER JOIN OrderItems ON Orders.order_num = OrderItems.order_num</span><br><span class="line">WHERE prod_id = 'BR01';</span><br></pre></td></tr></table></figure><h4 id="5-再让事情变得更加有趣些，我们将混合使用联结、聚合函数和分组。准备好了吗？回到第-10-课，当时的挑战是要求查找值等于或大于-1000的所有订单号。这些结果很有用，但更有用的是订单数量至少达到这个数的顾客名称。因此，编写SQL语句，使用联结从Customers表返回顾客名称（cust-name），并从OrderItems表返回所有订单的总价。-提示：要联结这些表，还需要包括Orders表（因为Customers表与OrderItems表不直接相关，Customers表与Orders表相关，而Orders表与OrderItems表相关）。不要忘记GROUP-BY和HAVING，并按顾客名称对结果进行排序。你可以使用简单的等联结或ANSI的-INNER-JOIN语法。或者，如果你很勇敢，请尝试使用两种方式编写。"><a href="#5-再让事情变得更加有趣些，我们将混合使用联结、聚合函数和分组。准备好了吗？回到第-10-课，当时的挑战是要求查找值等于或大于-1000的所有订单号。这些结果很有用，但更有用的是订单数量至少达到这个数的顾客名称。因此，编写SQL语句，使用联结从Customers表返回顾客名称（cust-name），并从OrderItems表返回所有订单的总价。-提示：要联结这些表，还需要包括Orders表（因为Customers表与OrderItems表不直接相关，Customers表与Orders表相关，而Orders表与OrderItems表相关）。不要忘记GROUP-BY和HAVING，并按顾客名称对结果进行排序。你可以使用简单的等联结或ANSI的-INNER-JOIN语法。或者，如果你很勇敢，请尝试使用两种方式编写。" class="headerlink" title="5. 再让事情变得更加有趣些，我们将混合使用联结、聚合函数和分组。准备好了吗？回到第 10 课，当时的挑战是要求查找值等于或大于 1000的所有订单号。这些结果很有用，但更有用的是订单数量至少达到这个数的顾客名称。因此，编写SQL语句，使用联结从Customers表返回顾客名称（cust_name），并从OrderItems表返回所有订单的总价。 提示：要联结这些表，还需要包括Orders表（因为Customers表与OrderItems表不直接相关，Customers表与Orders表相关，而Orders表与OrderItems表相关）。不要忘记GROUP BY和HAVING，并按顾客名称对结果进行排序。你可以使用简单的等联结或ANSI的 INNER JOIN语法。或者，如果你很勇敢，请尝试使用两种方式编写。"></a>5. 再让事情变得更加有趣些，我们将混合使用联结、聚合函数和分组。准备好了吗？回到第 10 课，当时的挑战是要求查找值等于或大于 1000的所有订单号。这些结果很有用，但更有用的是订单数量至少达到这个数的顾客名称。因此，编写SQL语句，使用联结从Customers表返回顾客名称（cust_name），并从OrderItems表返回所有订单的总价。 提示：要联结这些表，还需要包括Orders表（因为Customers表与OrderItems表不直接相关，Customers表与Orders表相关，而Orders表与OrderItems表相关）。不要忘记GROUP BY和HAVING，并按顾客名称对结果进行排序。你可以使用简单的等联结或ANSI的 INNER JOIN语法。或者，如果你很勇敢，请尝试使用两种方式编写。</h4><h5 id="–-等值连接语法-1"><a href="#–-等值连接语法-1" class="headerlink" title="– 等值连接语法"></a>– 等值连接语法</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_name, SUM (item_price*quantity) AS total_price</span><br><span class="line">FROM Customers, Orders, OrderItems</span><br><span class="line">WHERE Customers.cust_id = Orders.cust_id</span><br><span class="line">AND Orders.order_num = OrderItems.order_num</span><br><span class="line">GROUP BY cust_name HAVING SUM (item_price*quantity) >= 1000</span><br><span class="line">ORDER BY cust_name;</span><br></pre></td></tr></table></figure><h5 id="–-ANSI-INNER-JOIN-语法"><a href="#–-ANSI-INNER-JOIN-语法" class="headerlink" title="– ANSI INNER JOIN 语法"></a>– ANSI INNER JOIN 语法</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_name, SUM (item_price*quantity) AS total_price</span><br><span class="line">FROM Customers</span><br><span class="line">INNER JOIN Orders ON Customers.cust_id = Orders.cust_id</span><br><span class="line">INNER JOIN OrderItems ON Orders.order_num = OrderItems.order_num</span><br><span class="line">GROUP BY cust_name</span><br><span class="line">HAVING SUM (item_price*quantity) >= 1000</span><br><span class="line">ORDER BY cust_name;</span><br></pre></td></tr></table></figure><h2 id="第-13-课-创建高级联结"><a href="#第-13-课-创建高级联结" class="headerlink" title="第 13 课 创建高级联结"></a>第 13 课 创建高级联结</h2><h4 id="1-使用INNER-JOIN编写SQL语句，以检索每个顾客的名称（Customers表中的cust-name）和所有的订单号（Orders表中的order-num）。"><a href="#1-使用INNER-JOIN编写SQL语句，以检索每个顾客的名称（Customers表中的cust-name）和所有的订单号（Orders表中的order-num）。" class="headerlink" title="1. 使用INNER JOIN编写SQL语句，以检索每个顾客的名称（Customers表中的cust_name）和所有的订单号（Orders表中的order_num）。"></a>1. 使用INNER JOIN编写SQL语句，以检索每个顾客的名称（Customers表中的cust_name）和所有的订单号（Orders表中的order_num）。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_name, order_num</span><br><span class="line">FROM Customers</span><br><span class="line">JOIN Orders ON Customers.cust_id = Orders.cust_id</span><br><span class="line">ORDER BY cust_name;</span><br></pre></td></tr></table></figure><h4 id="2-修改刚刚创建的SQL语句，仅列出所有顾客，即使他们没有下过订单。"><a href="#2-修改刚刚创建的SQL语句，仅列出所有顾客，即使他们没有下过订单。" class="headerlink" title="2. 修改刚刚创建的SQL语句，仅列出所有顾客，即使他们没有下过订单。"></a>2. 修改刚刚创建的SQL语句，仅列出所有顾客，即使他们没有下过订单。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_name, order_num</span><br><span class="line">FROM Customers</span><br><span class="line">LEFT OUTER JOIN Orders ON Customers.cust_id = Orders.cust_id</span><br><span class="line">ORDER BY cust_name;</span><br></pre></td></tr></table></figure><h4 id="3-使用OUTER-JOIN联结Products表和OrderItems表，返回产品名称（prod-name）和与之相关的订单号（order-num）的列表，并按商品名称排序。"><a href="#3-使用OUTER-JOIN联结Products表和OrderItems表，返回产品名称（prod-name）和与之相关的订单号（order-num）的列表，并按商品名称排序。" class="headerlink" title="3. 使用OUTER JOIN联结Products表和OrderItems表，返回产品名称（prod_name）和与之相关的订单号（order_num）的列表，并按商品名称排序。"></a>3. 使用OUTER JOIN联结Products表和OrderItems表，返回产品名称（prod_name）和与之相关的订单号（order_num）的列表，并按商品名称排序。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_name, order_num</span><br><span class="line">FROM Products LEFT OUTER JOIN OrderItems</span><br><span class="line">ON Products.prod_id = OrderItems.prod_id</span><br><span class="line">ORDER BY prod_name;</span><br></pre></td></tr></table></figure><h4 id="4-修改上一题中创建的SQL语句，使其返回每一项产品的总订单数（不是订单号）。"><a href="#4-修改上一题中创建的SQL语句，使其返回每一项产品的总订单数（不是订单号）。" class="headerlink" title="4. 修改上一题中创建的SQL语句，使其返回每一项产品的总订单数（不是订单号）。"></a>4. 修改上一题中创建的SQL语句，使其返回每一项产品的总订单数（不是订单号）。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_name, COUNT (order_num) AS orders</span><br><span class="line">FROM Products LEFT OUTER JOIN OrderItems</span><br><span class="line">ON Products.prod_id = OrderItems.prod_id</span><br><span class="line">GROUP BY prod_name</span><br><span class="line">ORDER BY prod_name;</span><br></pre></td></tr></table></figure><h4 id="5-编写SQL语句，列出供应商（Vendors表中的vend-id）及其可供产品的数量，包括没有产品的供应商。你需要使用OUTER-JOIN和COUNT-聚合函数来计算Products表中每种产品的数量。注意：vend-id列会显示在多个表中，因此在每次引用它时都需要完全限定它。"><a href="#5-编写SQL语句，列出供应商（Vendors表中的vend-id）及其可供产品的数量，包括没有产品的供应商。你需要使用OUTER-JOIN和COUNT-聚合函数来计算Products表中每种产品的数量。注意：vend-id列会显示在多个表中，因此在每次引用它时都需要完全限定它。" class="headerlink" title="5. 编写SQL语句，列出供应商（Vendors表中的vend_id）及其可供产品的数量，包括没有产品的供应商。你需要使用OUTER JOIN和COUNT()聚合函数来计算Products表中每种产品的数量。注意：vend_id列会显示在多个表中，因此在每次引用它时都需要完全限定它。"></a>5. 编写SQL语句，列出供应商（Vendors表中的vend_id）及其可供产品的数量，包括没有产品的供应商。你需要使用OUTER JOIN和COUNT()聚合函数来计算Products表中每种产品的数量。注意：vend_id列会显示在多个表中，因此在每次引用它时都需要完全限定它。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT Vendors.vend_id, COUNT (prod_id)</span><br><span class="line">FROM Vendors</span><br><span class="line">LEFT OUTER JOIN Products ON Vendors.vend_id = Products.vend_id</span><br><span class="line">GROUP BY Vendors.vend_id;</span><br></pre></td></tr></table></figure><h2 id="第-14-课-组合查询"><a href="#第-14-课-组合查询" class="headerlink" title="第 14 课 组合查询"></a>第 14 课 组合查询</h2><h4 id="1-编写SQL语句，将两个SELECT语句结合起来，以便从OrderItems表中检索产品ID（prod-id）和quantity。其中，一个SELECT语句过滤数量为-100-的行，另一个SELECT语句过滤ID以BNBG开头的产品。按产品ID对结果进行排序。"><a href="#1-编写SQL语句，将两个SELECT语句结合起来，以便从OrderItems表中检索产品ID（prod-id）和quantity。其中，一个SELECT语句过滤数量为-100-的行，另一个SELECT语句过滤ID以BNBG开头的产品。按产品ID对结果进行排序。" class="headerlink" title="1. 编写SQL语句，将两个SELECT语句结合起来，以便从OrderItems表中检索产品ID（prod_id）和quantity。其中，一个SELECT语句过滤数量为 100 的行，另一个SELECT语句过滤ID以BNBG开头的产品。按产品ID对结果进行排序。"></a>1. 编写SQL语句，将两个SELECT语句结合起来，以便从OrderItems表中检索产品ID（prod_id）和quantity。其中，一个SELECT语句过滤数量为 100 的行，另一个SELECT语句过滤ID以BNBG开头的产品。按产品ID对结果进行排序。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_id, quantity FROM OrderItems</span><br><span class="line">WHERE quantity = 100</span><br><span class="line">UNION</span><br><span class="line">SELECT prod_id, quantity FROM OrderItems</span><br><span class="line">WHERE prod_id LIKE 'BNBG%'</span><br><span class="line">ORDER BY prod_id;</span><br></pre></td></tr></table></figure><h4 id="2-重写刚刚创建的SQL语句，仅使用单个SELECT语句。"><a href="#2-重写刚刚创建的SQL语句，仅使用单个SELECT语句。" class="headerlink" title="2. 重写刚刚创建的SQL语句，仅使用单个SELECT语句。"></a>2. 重写刚刚创建的SQL语句，仅使用单个SELECT语句。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_id, quantity FROM OrderItems</span><br><span class="line">WHERE quantity = 100 OR prod_id LIKE 'BNBG%'</span><br><span class="line">ORDER BY prod_id;</span><br></pre></td></tr></table></figure><h4 id="3-我知道这有点荒谬，但这节课中的一个注释提到过。编写SQL语句，组合Products表中的产品名称（prod-name）和Customers表中的顾客名称（cust-name）并返回，然后按产品名称对结果进行排序。"><a href="#3-我知道这有点荒谬，但这节课中的一个注释提到过。编写SQL语句，组合Products表中的产品名称（prod-name）和Customers表中的顾客名称（cust-name）并返回，然后按产品名称对结果进行排序。" class="headerlink" title="3. 我知道这有点荒谬，但这节课中的一个注释提到过。编写SQL语句，组合Products表中的产品名称（prod_name）和Customers表中的顾客名称（cust_name）并返回，然后按产品名称对结果进行排序。"></a>3. 我知道这有点荒谬，但这节课中的一个注释提到过。编写SQL语句，组合Products表中的产品名称（prod_name）和Customers表中的顾客名称（cust_name）并返回，然后按产品名称对结果进行排序。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT prod_name</span><br><span class="line">FROM Products</span><br><span class="line">UNION</span><br><span class="line">SELECT cust_name</span><br><span class="line">FROM Customers</span><br><span class="line">ORDER BY prod_name;</span><br></pre></td></tr></table></figure><h4 id="4-下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）-2"><a href="#4-下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）-2" class="headerlink" title="4. 下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）"></a>4. 下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">SELECT cust_name, cust_contact, cust_email</span><br><span class="line">FROM Customers</span><br><span class="line">WHERE cust_state = 'MI'</span><br><span class="line">ORDER BY cust_name;</span><br><span class="line">UNION</span><br><span class="line">SELECT cust_name, cust_contact, cust_email</span><br><span class="line">FROM Customers</span><br><span class="line">WHERE cust_state = 'IL'ORDER BY cust_name;</span><br></pre></td></tr></table></figure><h4 id="第一个SELECT语句后的-不应该出现，它将终止该语句。同样，如果将结合UNION的SELECT语句进行排序，则只能使用一个ORDER-BY，并且它必须跟在最后一个SELECT之后。"><a href="#第一个SELECT语句后的-不应该出现，它将终止该语句。同样，如果将结合UNION的SELECT语句进行排序，则只能使用一个ORDER-BY，并且它必须跟在最后一个SELECT之后。" class="headerlink" title="第一个SELECT语句后的;不应该出现，它将终止该语句。同样，如果将结合UNION的SELECT语句进行排序，则只能使用一个ORDER BY，并且它必须跟在最后一个SELECT之后。"></a>第一个SELECT语句后的;不应该出现，它将终止该语句。同样，如果将结合UNION的SELECT语句进行排序，则只能使用一个ORDER BY，并且它必须跟在最后一个SELECT之后。</h4><h2 id="第-15-课-插入数据"><a href="#第-15-课-插入数据" class="headerlink" title="第 15 课 插入数据"></a>第 15 课 插入数据</h2><h4 id="1-使用INSERT和指定的列，将你自己添加到Customers表中。明确列出要添加哪几列，且仅需列出你需要的列。"><a href="#1-使用INSERT和指定的列，将你自己添加到Customers表中。明确列出要添加哪几列，且仅需列出你需要的列。" class="headerlink" title="1. 使用INSERT和指定的列，将你自己添加到Customers表中。明确列出要添加哪几列，且仅需列出你需要的列。"></a>1. 使用INSERT和指定的列，将你自己添加到Customers表中。明确列出要添加哪几列，且仅需列出你需要的列。</h4><h5 id="–-显然要用你自己的内容替换。"><a href="#–-显然要用你自己的内容替换。" class="headerlink" title="– 显然要用你自己的内容替换。"></a>– 显然要用你自己的内容替换。</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">INSERT INTO Customers(cust_id,</span><br><span class="line">cust_name,</span><br><span class="line">cust_address,</span><br><span class="line">cust_city,</span><br><span class="line">cust_state,</span><br><span class="line">cust_zip,</span><br><span class="line">cust_country,</span><br><span class="line">cust_email)</span><br><span class="line">VALUES (1000000042,</span><br><span class="line">'Ben''s Toys',</span><br><span class="line">'123 Main Street',</span><br><span class="line">'Oak Park',</span><br><span class="line">'MI',</span><br><span class="line">'48237',</span><br><span class="line">'USA',</span><br><span class="line">'[email protected]');</span><br></pre></td></tr></table></figure><h4 id="2-备份Orders表和OrderItems表。"><a href="#2-备份Orders表和OrderItems表。" class="headerlink" title="2. 备份Orders表和OrderItems表。"></a>2. 备份Orders表和OrderItems表。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">-- MySQL, MariaDB, Oracle, PostgreSQL, SQLite</span><br><span class="line">CREATE TABLE OrdersBackup AS SELECT * FROM Orders;</span><br><span class="line">CREATE TABLE OrderItemsBackup AS SELECT * FROM OrderItems;</span><br><span class="line">-- SQL Server</span><br><span class="line">SELECT * INTO OrdersBackup FROM Orders;</span><br><span class="line">SELECT * INTO OrderItemsBackup FROM OrderItems;</span><br></pre></td></tr></table></figure><h2 id="第-16-课-更新和删除数据"><a href="#第-16-课-更新和删除数据" class="headerlink" title="第 16 课 更新和删除数据"></a>第 16 课 更新和删除数据</h2><h4 id="1-美国各州的缩写应始终用大写。编写SQL语句来更新所有美国地址，包括供应商状态（Vendors表中的vend-state）和顾客状态（Customers-表中的cust-state），使它们均为大写。"><a href="#1-美国各州的缩写应始终用大写。编写SQL语句来更新所有美国地址，包括供应商状态（Vendors表中的vend-state）和顾客状态（Customers-表中的cust-state），使它们均为大写。" class="headerlink" title="1. 美国各州的缩写应始终用大写。编写SQL语句来更新所有美国地址，包括供应商状态（Vendors表中的vend_state）和顾客状态（Customers 表中的cust_state），使它们均为大写。"></a>1. 美国各州的缩写应始终用大写。编写SQL语句来更新所有美国地址，包括供应商状态（Vendors表中的vend_state）和顾客状态（Customers 表中的cust_state），使它们均为大写。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">UPDATE Vendors</span><br><span class="line">SET vend_state = UPPER (vend_state)</span><br><span class="line">WHERE vend_country = 'USA';</span><br><span class="line">UPDATE Customers</span><br><span class="line">SET cust_state = UPPER (cust_state)</span><br><span class="line">WHERE cust_country = 'USA';</span><br></pre></td></tr></table></figure><h4 id="2-第-15-课的挑战题-1-要求你将自己添加到Customers表中。现在请删除自己。确保使用WHERE子句（在DELETE中使用它之前，先用SELECT对其进行测试），否则你会删除所有顾客！"><a href="#2-第-15-课的挑战题-1-要求你将自己添加到Customers表中。现在请删除自己。确保使用WHERE子句（在DELETE中使用它之前，先用SELECT对其进行测试），否则你会删除所有顾客！" class="headerlink" title="2. 第 15 课的挑战题 1 要求你将自己添加到Customers表中。现在请删除自己。确保使用WHERE子句（在DELETE中使用它之前，先用SELECT对其进行测试），否则你会删除所有顾客！"></a>2. 第 15 课的挑战题 1 要求你将自己添加到Customers表中。现在请删除自己。确保使用WHERE子句（在DELETE中使用它之前，先用SELECT对其进行测试），否则你会删除所有顾客！</h4><h5 id="–-首先测试WHERE，确保它仅选择你要删除的内容。"><a href="#–-首先测试WHERE，确保它仅选择你要删除的内容。" class="headerlink" title="– 首先测试WHERE，确保它仅选择你要删除的内容。"></a>– 首先测试WHERE，确保它仅选择你要删除的内容。</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM Customers</span><br><span class="line">WHERE cust_id = 1000000042;</span><br><span class="line">-- 那就做吧！</span><br><span class="line">DELETE Customers</span><br><span class="line">WHERE cust_id = 1000000042;</span><br></pre></td></tr></table></figure><h2 id="第-17-课-创建和操纵表"><a href="#第-17-课-创建和操纵表" class="headerlink" title="第 17 课 创建和操纵表"></a>第 17 课 创建和操纵表</h2><h4 id="1-在Vendors表中添加一个网站列（vend-web）。你需要一个足以容纳URL的大文本字段。"><a href="#1-在Vendors表中添加一个网站列（vend-web）。你需要一个足以容纳URL的大文本字段。" class="headerlink" title="1. 在Vendors表中添加一个网站列（vend_web）。你需要一个足以容纳URL的大文本字段。"></a>1. 在Vendors表中添加一个网站列（vend_web）。你需要一个足以容纳URL的大文本字段。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ALTER TABLE Vendors</span><br><span class="line">ADD vend_web CHAR (100);</span><br></pre></td></tr></table></figure><h4 id="2-使用UPDATE语句更新Vendor记录，以便加入网站（你可以编造任-何地址）。"><a href="#2-使用UPDATE语句更新Vendor记录，以便加入网站（你可以编造任-何地址）。" class="headerlink" title="2. 使用UPDATE语句更新Vendor记录，以便加入网站（你可以编造任 何地址）。"></a>2. 使用UPDATE语句更新Vendor记录，以便加入网站（你可以编造任 何地址）。</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">UPDATE Vendors</span><br><span class="line">SET vend_web = 'https://google.com/'</span><br><span class="line">WHERE vend_id = 'DLL01';</span><br></pre></td></tr></table></figure><h2 id="第-18-课-使用视图"><a href="#第-18-课-使用视图" class="headerlink" title="第 18 课 使用视图"></a>第 18 课 使用视图</h2><h4 id="1-创建一个名为CustomersWithOrders的视图，其中包含Customers-表中的所有列，但仅仅是那些已下订单的列。提示：可以在Orders-表上使用JOIN来仅仅过滤所需的顾客，然后使用SELECT来确保拥有正确的数据。"><a href="#1-创建一个名为CustomersWithOrders的视图，其中包含Customers-表中的所有列，但仅仅是那些已下订单的列。提示：可以在Orders-表上使用JOIN来仅仅过滤所需的顾客，然后使用SELECT来确保拥有正确的数据。" class="headerlink" title="1. 创建一个名为CustomersWithOrders的视图，其中包含Customers 表中的所有列，但仅仅是那些已下订单的列。提示：可以在Orders 表上使用JOIN来仅仅过滤所需的顾客，然后使用SELECT来确保拥有正确的数据。"></a>1. 创建一个名为CustomersWithOrders的视图，其中包含Customers 表中的所有列，但仅仅是那些已下订单的列。提示：可以在Orders 表上使用JOIN来仅仅过滤所需的顾客，然后使用SELECT来确保拥有正确的数据。</h4><h3 id="20-挑战题答案"><a href="#20-挑战题答案" class="headerlink" title="20 | 挑战题答案"></a>20 | 挑战题答案</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">CREATE VIEW CustomersWithOrders AS</span><br><span class="line">SELECT Customers.cust_id,</span><br><span class="line">Customers.cust_name,</span><br><span class="line">Customers.cust_address,</span><br><span class="line">Customers.cust_city,</span><br><span class="line">Customers.cust_state,</span><br><span class="line">Customers.cust_zip,</span><br><span class="line">Customers.cust_country,</span><br><span class="line">Customers.cust_contact,</span><br><span class="line">Customers.cust_email</span><br><span class="line">FROM Customers</span><br><span class="line">JOIN Orders ON Customers.cust_id = Orders.cust_id;</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM CustomersWithOrders;</span><br></pre></td></tr></table></figure><h4 id="2-下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）"><a href="#2-下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）" class="headerlink" title="2. 下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）"></a>2. 下面的SQL语句有问题吗？（尝试在不运行的情况下指出。）</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">CREATE VIEW OrderItemsExpanded AS</span><br><span class="line">SELECT order_num,</span><br><span class="line">prod_id,</span><br><span class="line">quantity,</span><br><span class="line">item_price,</span><br><span class="line">quantity*item_price AS expanded_price</span><br><span class="line">FROM OrderItems</span><br><span class="line">ORDER BY order_num;</span><br></pre></td></tr></table></figure><blockquote><p>视图中不允许使用ORDER BY。如果你想在从视图检索数据的SELECT</p><p>中使用ORDER BY对数据进行排序，则视图的使用方式与表相同。</p></blockquote>]]></content>
<tags>
<tag> Mysql </tag>
</tags>
</entry>
<entry>
<title>Django模型</title>
<link href="/2021/11/25/Django%E6%A8%A1%E5%9E%8B/"/>
<url>/2021/11/25/Django%E6%A8%A1%E5%9E%8B/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://img1.baidu.com/it/u=2206900918,1696468527&fm=26&fmt=auto"></p><h3 id="定义模型类"><a href="#定义模型类" class="headerlink" title="定义模型类"></a>定义模型类</h3><p><strong>1） 数据库表名</strong></p><p>模型类如果未指明表名，Django默认以<strong>小写app应用名_小写模型类名</strong>为数据库表名。</p><p>可通过<strong>db_table</strong>指明数据库表名。</p><p><strong>2） 关于主键</strong></p><p>django会为表创建自动增长的主键列，每个模型只能有一个主键列，如果使用选项设置某属性为主键列后django不会再创建自动增长的主键列。</p><p>默认创建的主键列属性为id，可以使用pk代替，pk全拼为primary key。</p><p><strong>3） 属性命名限制</strong></p><ul><li><p>不能是python的保留关键字。</p></li><li><p>不允许使用连续的下划线，这是由django的查询方式决定的。</p></li><li><p>定义属性时需要指定字段类型，通过字段类型的参数指定选项，语法如下：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">属性=models.字段类型(选项)</span><br></pre></td></tr></table></figure></li></ul><p><strong>4）字段类型</strong></p><table><thead><tr><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>AutoField</td><td>自动增长的IntegerField，通常不用指定，不指定时Django会自动创建属性名为id的自动增长属性</td></tr><tr><td>BooleanField</td><td>布尔字段，值为True或False</td></tr><tr><td>NullBooleanField</td><td>支持Null、True、False三种值</td></tr><tr><td>CharField</td><td>字符串，参数max_length表示最大字符个数</td></tr><tr><td>TextField</td><td>大文本字段，一般超过4000个字符时使用</td></tr><tr><td>IntegerField</td><td>整数</td></tr><tr><td>DecimalField</td><td>十进制浮点数， 参数max_digits表示总位数， 参数decimal_places表示小数位数</td></tr><tr><td>FloatField</td><td>浮点数</td></tr><tr><td>DateField</td><td>日期， 参数auto_now表示每次保存对象时，自动设置该字段为当前时间，用于”最后一次修改”的时间戳，它总是使用当前日期，默认为False； 参数auto_now_add表示当对象第一次被创建时自动设置当前时间，用于创建的时间戳，它总是使用当前日期，默认为False; 参数auto_now_add和auto_now是相互排斥的，组合将会发生错误</td></tr><tr><td>TimeField</td><td>时间，参数同DateField</td></tr><tr><td>DateTimeField</td><td>日期时间，参数同DateField</td></tr><tr><td>FileField</td><td>上传文件字段</td></tr><tr><td>ImageField</td><td>继承于FileField，对上传的内容进行校验，确保是有效的图片</td></tr></tbody></table><p><strong>5） 选项</strong></p><table><thead><tr><th>选项</th><th>说明</th></tr></thead><tbody><tr><td>null</td><td>如果为True，表示允许为空，默认值是False</td></tr><tr><td>blank</td><td>如果为True，则该字段允许为空白，默认值是False</td></tr><tr><td>db_column</td><td>字段的名称，如果未指定，则使用属性的名称</td></tr><tr><td>db_index</td><td>若值为True, 则在表中会为此字段创建索引，默认值是False</td></tr><tr><td>default</td><td>默认</td></tr><tr><td>primary_key</td><td>若为True，则该字段会成为模型的主键字段，默认值是False，一般作为AutoField的选项使用</td></tr><tr><td>unique</td><td>如果为True, 这个字段在表中必须有唯一值，默认值是False</td></tr></tbody></table><p><strong>null是数据库范畴的概念，blank是表单验证范畴的</strong></p><p><strong>6） 外键</strong></p><p>在设置外键时，需要通过<strong>on_delete</strong>选项指明主表删除数据时，对于外键引用表数据如何处理，在django.db.models中包含了可选常量：</p><ul><li><strong>CASCADE</strong>级联，删除主表数据时连通一起删除外键表中数据</li><li><strong>PROTECT</strong>保护，通过抛出<strong>ProtectedError</strong>异常，来阻止删除主表中被外键应用的数据</li><li><strong>SET_NULL</strong>设置为NULL，仅在该字段null=True允许为null时可用</li><li><strong>SET_DEFAULT</strong>设置为默认值，仅在该字段设置了默认值时可用</li><li>**SET()**设置为特定值或者调用特定方法</li><li><strong>DO_NOTHING</strong>不做任何操作，如果数据库前置指明级联性，此选项会抛出<strong>IntegrityError</strong>异常</li></ul><h5 id="例如"><a href="#例如" class="headerlink" title="例如"></a>例如</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">BookInfo</span>(<span class="params">models.Model</span>):</span></span><br><span class="line"> <span class="comment"># 创建字段，字段类型...</span></span><br><span class="line"> name = models.CharField(max_length=<span class="number">20</span>, verbose_name=<span class="string">'名称'</span>)</span><br><span class="line"> pub_date = models.DateField(verbose_name=<span class="string">'发布日期'</span>,null=<span class="literal">True</span>)</span><br><span class="line"> readcount = models.IntegerField(default=<span class="number">0</span>, verbose_name=<span class="string">'阅读量'</span>)</span><br><span class="line"> commentcount = models.IntegerField(default=<span class="number">0</span>, verbose_name=<span class="string">'评论量'</span>)</span><br><span class="line"> is_delete = models.BooleanField(default=<span class="literal">False</span>, verbose_name=<span class="string">'逻辑删除'</span>)</span><br><span class="line"></span><br><span class="line"> <span class="class"><span class="keyword">class</span> <span class="title">Meta</span>:</span></span><br><span class="line"> db_table = <span class="string">'bookinfo'</span> <span class="comment"># 指明数据库表名</span></span><br><span class="line"> verbose_name = <span class="string">'图书'</span> <span class="comment"># 在admin站点中显示的名称</span></span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">__str__</span>(<span class="params">self</span>):</span></span><br><span class="line"> <span class="string">"""定义每个数据对象的显示信息"""</span></span><br><span class="line"> <span class="keyword">return</span> self.name</span><br></pre></td></tr></table></figure><h3 id="shell工具"><a href="#shell工具" class="headerlink" title="shell工具"></a>shell工具</h3><p>Django的manage工具提供了<strong>shell</strong>命令，帮助我们配置好当前工程的运行环境（如连接好数据库等），以便可以直接在终端中执行测试python语句。</p><p><strong>通过如下命令进入shell</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">python manage.py shell</span><br></pre></td></tr></table></figure><p><strong>导入模型类，以便后续使用</strong></p><ul><li>模型类被定义在”应用/models.py”文件中。</li><li>模型类必须继承自Model类，位于包django.db.models中。</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 例如:</span></span><br><span class="line"><span class="keyword">from</span> book.models <span class="keyword">import</span> BookInfo,PeopleInfo</span><br></pre></td></tr></table></figure><h3 id="查看MySQL数据库日志-结果集特性使用"><a href="#查看MySQL数据库日志-结果集特性使用" class="headerlink" title="查看MySQL数据库日志(结果集特性使用)"></a>查看MySQL数据库日志(结果集特性使用)</h3><ol><li><p>查看mysql数据库日志可以查看对数据库的操作记录。 mysql日志文件默认没有产生，需要做如下配置：</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml">sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf</span></span><br></pre></td></tr></table></figure></li><li><p>把68，69行前面的#去除，然后保存并使用如下命令重启mysql服务。</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml">sudo service mysql restart</span></span><br></pre></td></tr></table></figure></li><li><p>使用如下命令打开mysql日志文件。</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">tail -f /var/log/mysql/mysql.log <span class="comment"># 可以实时查看数据库的日志内容</span></span><br><span class="line"><span class="comment"># 如提示需要sudo权限，执行</span></span><br><span class="line"><span class="comment"># sudo</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="数据的增删改"><a href="#数据的增删改" class="headerlink" title="数据的增删改"></a><strong>数据的增删改</strong></h3><blockquote><p>增:<code>book = BookInfo() book.save()</code> 和<code>BookInfo.objects.create()</code></p><p>删:<code>book.delete()</code> 和<code>BookInfo.objects.get().delete()</code></p><p>改:<code>book.name='xxx' book.save()</code> 和 <code>BookInfo.objects.get().update(name=xxx)</code></p></blockquote><hr><ol><li><p><strong>增加</strong></p><p>增加数据有<code>save</code> 与 <code>create</code> 两种方法</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># save</span></span><br><span class="line"><span class="comment"># 通过创建模型类对象，执行对象的save()方法保存到数据库中。</span></span><br><span class="line"><span class="meta">>>> </span>book = BookInfo(</span><br><span class="line"><span class="meta">>>> </span> name=<span class="string">'python入门'</span>,</span><br><span class="line"><span class="meta">>>> </span> pub_date=<span class="string">'2010-1-1'</span></span><br><span class="line"><span class="meta">>>> </span>)</span><br><span class="line"><span class="meta">>>> </span>book.save()</span><br><span class="line">book = <BookInfo: python入门></span><br><span class="line"></span><br><span class="line"><span class="comment"># create</span></span><br><span class="line"><span class="comment"># 通过模型类.objects.create()保存</span></span><br><span class="line"><span class="meta">>>> </span>bookInfo.objects.create(name=<span class="string">'Mysql必知必会'</span>,book=book)</span><br><span class="line"><BookInfo: Mysql必知必会></span><br></pre></td></tr></table></figure></li><li><p><strong>修改</strong></p><p>修改更新有 <code>save</code> 与 <code>update</code> 两种方法</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># save</span></span><br><span class="line"><span class="comment"># 修改模型类对象的属性，然后执行save()方法</span></span><br><span class="line"><span class="meta">>>> </span>books = bookInfo.objects.get(name=<span class="string">'海子的诗'</span>)</span><br><span class="line"><span class="meta">>>> </span>books.name = <span class="string">'时间简史'</span></span><br><span class="line"><span class="meta">>>> </span>books.save()</span><br><span class="line"><bookInfo: 时间简史></span><br><span class="line"></span><br><span class="line"><span class="comment"># update</span></span><br><span class="line"><span class="comment"># 使用模型类.objects.filter().update()，会返回受影响的行数</span></span><br><span class="line"><span class="meta">>>> </span>bookinfo.objects.<span class="built_in">filter</span>(name=<span class="string">'时间简史'</span>).update(name=<span class="string">'空间相对论'</span>)</span><br><span class="line"><span class="number">1</span></span><br></pre></td></tr></table></figure></li><li><p><strong>删除</strong></p><p>删除 <code>delete</code> 有两种方法</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># delete (1) 模型类对象delete</span></span><br><span class="line"><span class="meta">>>> </span>book = bookInfo.objects.get(name=<span class="string">'算法图解'</span>)</span><br><span class="line"><span class="meta">>>> </span>book.delete()</span><br><span class="line">(<span class="number">1</span>, {<span class="string">'book.bookInfo'</span>: <span class="number">1</span>})</span><br><span class="line"></span><br><span class="line"><span class="comment"># delete (2）模型类.objects.filter().delete()</span></span><br><span class="line"><span class="meta">>>> </span>bookInfo.objects.<span class="built_in">filter</span>(name=<span class="string">'算法图解'</span>).delete()</span><br><span class="line">(<span class="number">1</span>, {<span class="string">'book.BookInfo'</span>: <span class="number">1</span>, <span class="string">'book.PeopleInfo'</span>: <span class="number">0</span>})</span><br></pre></td></tr></table></figure></li></ol><h3 id="数据查询"><a href="#数据查询" class="headerlink" title="数据查询"></a>数据查询</h3><h4 id="基本查询"><a href="#基本查询" class="headerlink" title="基本查询"></a>基本查询</h4><p><strong>get</strong> 查询单一结果，如果不存在会抛出 <strong>模型类.DoesNotExist</strong> 异常。</p><p>语法：<code>模型类.objects.get(条件)</code></p><p><strong>all</strong> 查询多个结果。</p><p>语法：<code>模型类.objects.all()</code></p><p>**count ** 查询结果数量。</p><p>语法：<code>模型类.objects.count()</code></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># get (true)</span></span><br><span class="line"><span class="meta">>>> </span>bookInfo.objects.get(<span class="built_in">id</span> = <span class="number">1</span>) </span><br><span class="line"><bookInfo: 海子的诗></span><br><span class="line"></span><br><span class="line"><span class="comment"># get (false)</span></span><br><span class="line"><span class="meta">>>> </span>bookInfo.objects.get(<span class="built_in">id</span> =xxxx)</span><br><span class="line">File <span class="string">"<console>"</span>, line <span class="number">1</span>, <span class="keyword">in</span> <module></span><br><span class="line">File <span class="string">"/home/python/.virtualenvs/py3_django_1.11/lib/python3.5/site-</span></span><br><span class="line"><span class="string">.......</span></span><br><span class="line"><span class="string">book.models.DoesNotExist: BookInfo matching query does not exist</span></span><br><span class="line"><span class="string"> </span></span><br><span class="line"><span class="string"># all</span></span><br><span class="line"><span class="string">>>> bookInfo.objects.all()</span></span><br><span class="line"><span class="string"><QuerySet [<BookInfo: 海子的诗>, <BookInfo: 算法图解>, <BookInfo: 梵·高>]></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"># count</span></span><br><span class="line"><span class="string">>>> bookInfo.objects.count()</span></span><br><span class="line"><span class="string">3</span></span><br></pre></td></tr></table></figure><h4 id="过滤查询"><a href="#过滤查询" class="headerlink" title="过滤查询"></a>过滤查询</h4><p><strong>filter</strong>过滤出多个结果</p><p><strong>exclude</strong>排除掉符合条件剩下的结果</p><p><strong>get</strong>过滤单一结果</p><p>对于过滤条件的使用，上述三个方法相同，故仅以<strong>filter</strong>进行讲解</p><p>过滤条件的表达语法如下：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">属性名称__比较运算符=值</span><br><span class="line"></span><br><span class="line"><span class="comment"># 属性名称和比较运算符间使用两个下划线，所以属性名不能包括多个下划线</span></span><br></pre></td></tr></table></figure><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">查询编号为<span class="number">1</span>的图书</span><br><span class="line">查询书名包含<span class="string">'湖'</span>的图书</span><br><span class="line">查询书名以<span class="string">'诗'</span>结尾的图书</span><br><span class="line">查询书名为空的图书</span><br><span class="line">查询编号为<span class="number">1</span>或<span class="number">3</span>或<span class="number">5</span>的图书</span><br><span class="line">查询编号大于<span class="number">3</span>的图书</span><br><span class="line">查询<span class="number">1980</span>年发表的图书</span><br><span class="line">查询<span class="number">1990</span>年<span class="number">1</span>月<span class="number">1</span>日后发表的图书</span><br></pre></td></tr></table></figure><p><strong>1）相等</strong></p><p><strong>exact：表示判等。</strong></p><p>例：查询编号为1的图书。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">BookInfo.objects.<span class="built_in">filter</span>(id__exact=<span class="number">1</span>)</span><br><span class="line"><span class="comment"># 可简写为：</span></span><br><span class="line">BookInfo.objects.<span class="built_in">filter</span>(<span class="built_in">id</span>=<span class="number">1</span>)</span><br></pre></td></tr></table></figure><p><strong>2）模糊查询</strong></p><p><strong>contains：是否包含。</strong></p><blockquote><p>说明：如果要包含%无需转义，直接写即可。</p></blockquote><p>例：查询书名包含’传’的图书。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(name__contains=<span class="string">'诗'</span>)</span><br><span class="line"><QuerySet [<BookInfo: 海子的诗>]></span><br></pre></td></tr></table></figure><p><strong>startswith、endswith：以指定值开头或结尾。</strong></p><p>例：查询书名以’部’结尾的图书</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(name__endswith=<span class="string">'史'</span>)</span><br><span class="line"><QuerySet [<BookInfo: 时间简史>]></span><br></pre></td></tr></table></figure><blockquote><p>以上运算符都区分大小写，在这些运算符前加上i表示不区分大小写，如iexact、icontains、istartswith、iendswith.</p></blockquote><p><strong>3） 空查询</strong></p><p><strong>isnull：是否为null。</strong></p><p>例：查询书名为空的图书。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(name__isnull=<span class="literal">True</span>)</span><br><span class="line"><QuerySet []></span><br></pre></td></tr></table></figure><p><strong>4） 范围查询</strong></p><p><strong>in：是否包含在范围内。</strong></p><p>例：查询编号为1或3的图书</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(id__in=[<span class="number">1</span>,<span class="number">3</span>])</span><br><span class="line"><QuerySet [<BookInfo: 海子的诗>, <BookInfo: 梵·高>]></span><br></pre></td></tr></table></figure><p><strong>5）比较查询</strong></p><ul><li><strong>gt</strong>大于 (greater then)</li><li><strong>gte</strong>大于等于 (greater then equal)</li><li><strong>lt</strong>小于 (less then)</li><li><strong>lte</strong>小于等于 (less then equal)</li></ul><p>例：查询编号大于2的图书</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(id__gt=<span class="number">2</span>)</span><br><span class="line"><QuerySet [<BookInfo: 梵·高>]></span><br></pre></td></tr></table></figure><p><strong>不等于的运算符，使用exclude()过滤器。</strong></p><p>例：查询编号不等于3的图书</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(id__gt=<span class="number">3</span>)</span><br><span class="line"><QuerySet [<BookInfo: >]></span><br></pre></td></tr></table></figure><p><strong>6）日期查询</strong></p><p><strong>year、month、day、week_day、hour、minute、second：对日期时间类型的属性进行运算。</strong></p><p>例：查询2009年发表的图书。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(pub_date__year=<span class="number">2009</span>)</span><br><span class="line"><QuerySet [<BookInfo: 海子的诗>]></span><br></pre></td></tr></table></figure><p>例：查询1990年1月1日后发表的图书。</p><h4 id="F和Q对象"><a href="#F和Q对象" class="headerlink" title="F和Q对象"></a>F和Q对象</h4><h5 id="1-F对象"><a href="#1-F对象" class="headerlink" title="1.F对象"></a>1.F对象</h5><p>之前的查询都是对象的属性与常量值比较，两个属性怎么比较呢？ </p><p>答：使用F对象，被定义在django.db.models中。</p><p>语法： <code>F(属性名)</code></p><p>例：查询阅读量大于等于评论量的图书。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span><span class="keyword">from</span> django.db.models <span class="keyword">import</span> F</span><br><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(readcount__gt=F(<span class="string">'commentcount'</span>))</span><br><span class="line"><QuerySet [<BookInfo: 海子的诗>, <BookInfo: 时间简史>]></span><br></pre></td></tr></table></figure><p>可以在F对象上使用算数运算。</p><p>例：查询阅读量大于2倍评论量的图书。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(readcount__gt=F(<span class="string">'commentcount'</span>)*<span class="number">2</span>)</span><br><span class="line"><QuerySet [<BookInfo: 时间简史>]></span><br></pre></td></tr></table></figure><h5 id="2-Q对象"><a href="#2-Q对象" class="headerlink" title="2.Q对象"></a>2.Q对象</h5><p><strong>多个过滤器逐个调用表示逻辑与关系，同sql语句中where部分的and关键字。</strong></p><p>例：查询阅读量大于20，并且编号小于3的图书。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(readcount__gt=<span class="number">20</span>,id__lt=<span class="number">3</span>)</span><br><span class="line"><QuerySet [<BookInfo: 梵·高>]></span><br><span class="line"></span><br><span class="line"><span class="comment"># or</span></span><br><span class="line"></span><br><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(readcount__gt=<span class="number">20</span>).<span class="built_in">filter</span>(id__lt=<span class="number">3</span>)</span><br><span class="line"><QuerySet [<BookInfo: 梵·高>]></span><br></pre></td></tr></table></figure><p><strong>如果需要实现逻辑或or的查询，需要使用Q()对象结合|运算符</strong>，Q对象被义在django.db.models中。</p><p>语法：<code>Q(属性名__运算符=值)</code></p><p>例：查询阅读量大于20的图书，改写为Q对象如下。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">BookInfo.objects.<span class="built_in">filter</span>(Q(readcount__gt=<span class="number">20</span>))</span><br></pre></td></tr></table></figure><p>Q对象可以使用&、|连接，&表示逻辑与，|表示逻辑或。</p><p>例：查询阅读量大于20，或编号小于3的图书，只能使用Q对象实现</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(Q(readcount__gt=<span class="number">20</span>)|Q(id__lt=<span class="number">3</span>))</span><br><span class="line"><QuerySet [<BookInfo: 海子的诗>, <BookInfo: 时间简史>, <BookInfo: 梵·高>]></span><br></pre></td></tr></table></figure><p>Q对象前可以使用~操作符，表示非not。</p><p>例：查询编号不等于3的图书。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">filter</span>(~Q(<span class="built_in">id</span>=<span class="number">3</span>))</span><br><span class="line"><QuerySet [<BookInfo: 海子的诗>, <BookInfo: 时间简史>]></span><br></pre></td></tr></table></figure><h4 id="聚合函数和排序函数"><a href="#聚合函数和排序函数" class="headerlink" title="聚合函数和排序函数"></a>聚合函数和排序函数</h4><h5 id="聚合函数"><a href="#聚合函数" class="headerlink" title="聚合函数"></a>聚合函数</h5><ul><li>使用aggregate()过滤器调用聚合函数。</li><li><code>aggregate</code>不会返回一个<code>QuerySet</code>对象，而是返回一个字典。</li><li>聚合函数不能单独执行，需放在可以执行聚合函数的<code>aggregate</code>与<code>annotate</code>方法中去执行。</li><li>聚合函数包括：<strong>Avg</strong>平均，<strong>Count</strong>数量，<strong>Max</strong>最大，<strong>Min</strong>最小，<strong>Sum</strong>求和，被定义在django.db.models中。</li></ul><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">BookInfo.objects.aggregate(my_avg=AVG(<span class="string">'price'</span>))</span><br></pre></td></tr></table></figure><p>注意aggregate的返回值是一个字典类型，格式如下：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{<span class="string">'属性名__聚合类小写'</span>:值}</span><br><span class="line"></span><br><span class="line">如:{<span class="string">'readcount__sum'</span>: <span class="number">126</span>}</span><br></pre></td></tr></table></figure><p>使用count时一般不使用aggregate()过滤器。</p><p>例：查询图书总数。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">BookInfo.objects.count()</span><br></pre></td></tr></table></figure><p>注意count函数的返回值是一个数字。</p><h5 id="排序"><a href="#排序" class="headerlink" title="排序"></a>排序</h5><p>使用<strong>order_by</strong>对结果进行排序</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 默认升序</span></span><br><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">all</span>().order_by(<span class="string">'readcount'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment"># 降序</span></span><br><span class="line"><span class="meta">>>> </span>BookInfo.objects.<span class="built_in">all</span>().order_by(<span class="string">'-readcount'</span>)</span><br></pre></td></tr></table></figure><h4 id="级联查询"><a href="#级联查询" class="headerlink" title="级联查询"></a>级联查询</h4><h5 id="1-关联查询"><a href="#1-关联查询" class="headerlink" title="1.关联查询"></a>1.关联查询</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">查询书籍为<span class="number">1</span>的所有人物信息</span><br><span class="line">查询人物为<span class="number">1</span>的书籍信息</span><br></pre></td></tr></table></figure><p><strong>由一到多的访问语法</strong>：</p><p>一对应的模型类对象.多对应的模型类名小写_set 例：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>book = BookInfo.objects.get(<span class="built_in">id</span>=<span class="number">1</span>)</span><br><span class="line"><span class="meta">>>> </span>book.peopleinfo_set.<span class="built_in">all</span>()</span><br></pre></td></tr></table></figure><p><strong>由多到一的访问语法</strong>:</p><p>多对应的模型类对象.多对应的模型类中的关系类属性名 例：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>person = PeopleInfo.objects.get(<span class="built_in">id</span>=<span class="number">1</span>)</span><br><span class="line"><span class="meta">>>> </span>person.book</span><br><span class="line"><BookInfo: 海子的诗></span><br></pre></td></tr></table></figure><p>访问一对应的模型类关联对象的id语法:</p><p>多对应的模型类对象.关联类属性_id</p><p>例：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>person = PeopleInfo.objects.get(<span class="built_in">id</span>=<span class="number">1</span>)</span><br><span class="line"><span class="meta">>>> </span>person.book_id</span><br><span class="line"><span class="number">1</span></span><br></pre></td></tr></table></figure><h4 id="2-关联过滤查询"><a href="#2-关联过滤查询" class="headerlink" title="2.关联过滤查询"></a>2.关联过滤查询</h4><p><strong>由多模型类条件查询一模型类数据</strong>:</p><p>语法：<code>关联模型类名小写__属性名__条件运算符=值</code></p><blockquote><p><strong>注意：如果没有”__运算符”部分，表示等于。</strong></p></blockquote><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">查询图书，要求图书人物为"梵高"</span><br><span class="line">查询图书，要求图书中人物的描述包含"绘画"</span><br></pre></td></tr></table></figure><p>例：查询图书，要求图书人物为”梵高”</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>book = BookInfo.objects.<span class="built_in">filter</span>(peopleinfo__name=<span class="string">'梵高'</span>)</span><br><span class="line"><span class="meta">>>> </span>book</span><br><span class="line"><QuerySet [<BookInfo: 梵·高>]></span><br></pre></td></tr></table></figure><p>查询图书，要求图书中人物的描述包含”绘画”</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>book = BookInfo.objects.<span class="built_in">filter</span>(peopleinfo__description__contains=<span class="string">'绘画'</span>)</span><br><span class="line"><span class="meta">>>> </span>book</span><br><span class="line"><QuerySet [<BookInfo: 梵·高>]></span><br></pre></td></tr></table></figure><p><strong>由一模型类条件查询多模型类数据</strong>:</p><p>语法如下：<code>一模型类关联属性名__一模型类属性名__条件运算符=值</code></p><blockquote><p><strong>注意：如果没有”__运算符”部分，表示等于。</strong></p></blockquote><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">查询书名为“时间简史”的所有人物</span><br><span class="line">查询图书阅读量大于30的所有人物</span><br></pre></td></tr></table></figure><p>例：查询书名为“时间简史”的所有人物。</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>people = PeopleInfo.objects.<span class="built_in">filter</span>(book__name=<span class="string">'时间简史'</span>)</span><br></pre></td></tr></table></figure><p>查询图书阅读量大于30的所有人物</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>people = PeopleInfo.objects.<span class="built_in">filter</span>(book__readcount__gt=<span class="number">30</span>)</span><br></pre></td></tr></table></figure><h4 id="查询集QuerySet"><a href="#查询集QuerySet" class="headerlink" title="查询集QuerySet"></a>查询集QuerySet</h4><h5 id="1-概念"><a href="#1-概念" class="headerlink" title="1 概念"></a>1 概念</h5><p>Django的ORM中存在查询集的概念。</p><p>查询集，也称查询结果集、QuerySet，表示从数据库中获取的对象集合。</p><p>当调用如下过滤器方法时，Django会返回查询集（而不是简单的列表）：</p><ul><li>all()：返回所有数据。</li><li>filter()：返回满足条件的数据。</li><li>exclude()：返回满足条件之外的数据。</li><li>order_by()：对结果进行排序。</li></ul><p>对查询集可以再次调用过滤器进行过滤，如</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>books = BookInfo.objects.<span class="built_in">filter</span>(readcount__gt=<span class="number">30</span>).order_by(<span class="string">'pub_date'</span>)</span><br><span class="line"><span class="meta">>>> </span>books</span><br><span class="line"><QuerySet [<BookInfo: 海子的诗>, <BookInfo: 时间简史>]></span><br></pre></td></tr></table></figure><p>也就意味着查询集可以含有零个、一个或多个过滤器。过滤器基于所给的参数限制查询的结果。</p><p><strong>从SQL的角度讲，查询集与select语句等价，过滤器像where、limit、order by子句。</strong></p><p><strong>判断某一个查询集中是否有数据</strong>：</p><ul><li>exists()：判断查询集中是否有数据，如果有则返回True，没有则返回False。</li></ul><h5 id="2-两大特性"><a href="#2-两大特性" class="headerlink" title="2 两大特性"></a>2 两大特性</h5><h6 id="2-1惰性执行"><a href="#2-1惰性执行" class="headerlink" title="2.1惰性执行"></a>2.1惰性执行</h6><p>创建查询集不会访问数据库，直到调用数据时，才会访问数据库，调用数据的情况包括迭代、序列化、与if合用</p><p>例如，当执行如下语句时，并未进行数据库查询，只是创建了一个查询集books</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">books = BookInfo.objects.<span class="built_in">all</span>()</span><br></pre></td></tr></table></figure><p>继续执行遍历迭代操作后，才真正的进行了数据库的查询</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> book <span class="keyword">in</span> books:</span><br><span class="line"> <span class="built_in">print</span>(book.name)</span><br></pre></td></tr></table></figure><h5 id="2-2缓存"><a href="#2-2缓存" class="headerlink" title="2.2缓存"></a>2.2缓存</h5><p>使用同一个查询集，第一次使用时会发生数据库的查询，然后Django会把结果缓存下来，再次使用这个查询集时会使用缓存的数据，减少了数据库的查询次数。</p><p><strong>情况一</strong>：如下是两个查询集，无法重用缓存，每次查询都会与数据库进行一次交互，增加了数据库的负载。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> book.models <span class="keyword">import</span> BookInfo</span><br><span class="line"></span><br><span class="line"> [book.<span class="built_in">id</span> <span class="keyword">for</span> book <span class="keyword">in</span> BookInfo.objects.<span class="built_in">all</span>()]</span><br><span class="line"></span><br><span class="line"> [book.<span class="built_in">id</span> <span class="keyword">for</span> book <span class="keyword">in</span> BookInfo.objects.<span class="built_in">all</span>()]</span><br></pre></td></tr></table></figure><p><strong>情况二</strong>：经过存储后，可以重用查询集，第二次使用缓存中的数据。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">books=BookInfo.objects.<span class="built_in">all</span>()</span><br><span class="line"></span><br><span class="line">[book.<span class="built_in">id</span> <span class="keyword">for</span> book <span class="keyword">in</span> books]</span><br><span class="line"></span><br><span class="line">[book.<span class="built_in">id</span> <span class="keyword">for</span> book <span class="keyword">in</span> books]</span><br></pre></td></tr></table></figure><h5 id="3-限制查询集"><a href="#3-限制查询集" class="headerlink" title="3 限制查询集"></a>3 限制查询集</h5><p>可以对查询集进行取下标或切片操作，等同于sql中的limit和offset子句。</p><blockquote><p>注意：不支持负数索引。</p></blockquote><p><strong>对查询集进行切片后返回一个新的查询集，不会立即执行查询。</strong></p><p>如果获取一个对象，直接使用[0]，等同于[0:1].get()，但是如果没有数据，[0]引发IndexError异常，[0:1].get()如果没有数据引发DoesNotExist异常。</p><p>示例：获取第1、2项，运行查看。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">>>> </span>books = BookInfo.objects.<span class="built_in">all</span>()[<span class="number">0</span>:<span class="number">2</span>]</span><br><span class="line"><span class="meta">>>> </span>books</span><br><span class="line"><QuerySet [<BookInfo: 海子的诗>, <BookInfo: 时间简史>]></span><br></pre></td></tr></table></figure><h5 id="4-分页"><a href="#4-分页" class="headerlink" title="4.分页"></a>4.分页</h5><p>Django提供了一个新的类来帮助你管理分页数据，这个类存放在<code>django/core/paginator.py</code>.它可以接收列表、元组或其它可迭代的对象。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#查询数据</span></span><br><span class="line">books = BookInfo.objects.<span class="built_in">all</span>()</span><br><span class="line"><span class="comment">#导入分页类</span></span><br><span class="line"><span class="keyword">from</span> django.core.paginator <span class="keyword">import</span> Paginator</span><br><span class="line"><span class="comment">#创建分页实例</span></span><br><span class="line">paginator=Paginator(books,<span class="number">2</span>)</span><br><span class="line"><span class="comment">#获取指定页码的数据</span></span><br><span class="line">page_books = paginator.page(<span class="number">1</span>)</span><br><span class="line"><span class="comment">#获取分页数据</span></span><br><span class="line">total_page=paginator.num_pages</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Django </tag>
</tags>
</entry>
<entry>
<title>Django搭建</title>
<link href="/2021/11/22/Django%E6%90%AD%E5%BB%BA/"/>
<url>/2021/11/22/Django%E6%90%AD%E5%BB%BA/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://img1.baidu.com/it/u=2206900918,1696468527&fm=26&fmt=auto"></p><h1 id="Django简介与安装"><a href="#Django简介与安装" class="headerlink" title="Django简介与安装"></a>Django简介与安装</h1><hr><p>Django 是一个开放源代码的 Web 应用框架，由 Python 写成，<a href="https://docs.djangoproject.com/en/3.2/">点此查看Django官方文档</a></p><blockquote><p>官网说法： <em>Django makes it easier to build better web apps more quickly and with less code.</em></p></blockquote><p>适合有Python基础的人学习 <a href="https://docs.djangoproject.com/en/3.2/">跳转点击学习python</a></p><p>如果你已经具备基本的Python开发使用,接下来可以开始安装你的Django了</p><p><strong>本文使用搭配Win10配置</strong></p><h3 id="MVT模型"><a href="#MVT模型" class="headerlink" title="MVT模型"></a>MVT模型</h3><p>Django 采用了 <strong>MVT</strong> 的软件设计模式，即模型（Model），视图（View）和模板（Template）</p><ul><li>M 表示模型（Model）：编写程序应有的功能，负责业务对象与数据库的映射(ORM)。</li><li>T 表示模板 (Template)：负责如何把页面(html)展示给用户。</li><li>V 表示视图（View）：负责业务逻辑，并在适当时候调用 Model和 Template。</li></ul><p><strong>通过URL分发器将一个个URL的页面请求分发给不同的View处理,View再调用相应的Model 和Templte</strong></p><p>MTV 的响应模式如下所示：</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://www.runoob.com/wp-content/uploads/2020/05/MTV-Diagram.png" alt="MVT"></p><h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><p><strong>前提是有Python的环境</strong>，如没安装,可前往官网安装</p><h4 id="搭建虚拟环境"><a href="#搭建虚拟环境" class="headerlink" title="搭建虚拟环境"></a>搭建虚拟环境</h4><p><code>虚拟环境</code>可以搭建独立的<code>python运行环境</code>, 使得单个项目的运行环境与其它项目互不影响.</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># win端</span></span><br><span class="line">pip install django==<span class="number">2.2</span><span class="number">.5</span></span><br><span class="line"><span class="comment"># 如果是VM虚拟机或linux则在前面加sudo</span></span><br><span class="line">sudo pip install django==<span class="number">2.2</span><span class="number">.5</span></span><br></pre></td></tr></table></figure><h5 id="安装虚拟环境"><a href="#安装虚拟环境" class="headerlink" title="安装虚拟环境"></a>安装虚拟环境</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># virtualenv 虚拟环境的包</span></span><br><span class="line">pip install virtualenv </span><br><span class="line"> </span><br><span class="line"><span class="comment"># virtualenv 虚拟环境辅助工具包</span></span><br><span class="line">pip install virtualenvwrapper</span><br><span class="line"> </span><br><span class="line"><span class="comment"># 虚拟环境辅助工具包有对应的windows版本</span></span><br><span class="line">pip install virtualenvwrapper-win</span><br></pre></td></tr></table></figure><h5 id="使用虚拟环境"><a href="#使用虚拟环境" class="headerlink" title="使用虚拟环境"></a>使用虚拟环境</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">''' 如 创建一个虚拟环境 叫django_new'''</span></span><br><span class="line"></span><br><span class="line">mkvirtualenv 虚拟环境名称</span><br><span class="line">-- 例 ：</span><br><span class="line">mkvirtualenv django_new</span><br><span class="line"></span><br><span class="line"><span class="comment"># 展示所有的虚拟环境 </span></span><br><span class="line">workon </span><br><span class="line"></span><br><span class="line"><span class="comment"># 进入虚拟环境</span></span><br><span class="line">workon 虚拟环境的名字 </span><br><span class="line">-- 例 ：</span><br><span class="line">workon django_new</span><br><span class="line"> </span><br><span class="line"><span class="comment"># 退出虚拟环境</span></span><br><span class="line">deactivate</span><br><span class="line"></span><br><span class="line"><span class="comment"># 删除虚拟环境</span></span><br><span class="line">rmvirtualenv 虚拟环境名称</span><br><span class="line"></span><br><span class="line"><span class="number">1.</span>先退出：deactivate</span><br><span class="line"><span class="number">2.</span>再删除：rmvirtualenv django_new</span><br></pre></td></tr></table></figure><h5 id="在虚拟环境中安装工具包"><a href="#在虚拟环境中安装工具包" class="headerlink" title="在虚拟环境中安装工具包"></a>在虚拟环境中安装工具包</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">pip install 包名称</span><br><span class="line"></span><br><span class="line"><span class="comment"># 例 : 安装django-2.2.5的包</span></span><br><span class="line">pip install django==<span class="number">2.2</span><span class="number">.5</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看虚拟环境中安装的包</span></span><br><span class="line">pip <span class="built_in">list</span></span><br></pre></td></tr></table></figure><h4 id="创建Django项目"><a href="#创建Django项目" class="headerlink" title="创建Django项目"></a>创建Django项目</h4><p>例如创建一个名为 bookmanager 的项目</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">django-admin starproject bookmanager</span><br></pre></td></tr></table></figure><p><strong>切记：</strong>Pycharm中的运行解释器切换到虚拟环境中的解释器</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 运行开发服务器</span></span><br><span class="line"><span class="comment"># 可以不写IP和端口，默认IP是127.0.0.1，默认端口为8000。</span></span><br><span class="line">python manage.py runserver</span><br><span class="line">-- 或：</span><br><span class="line">python manage.py runserver ip:端口</span><br></pre></td></tr></table></figure><p><strong>django默认工作在调式Debug模式下，如果增加、修改、删除文件，服务器会自动重启。</strong></p><p><em><strong>按ctrl+c停止服务器</strong></em></p><h4 id="创建子应用"><a href="#创建子应用" class="headerlink" title="创建子应用"></a>创建子应用</h4><p>在django中，创建子应用模块目录仍然可以通过命令来操作，例:</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml">python manage.py startapp 子应用名称</span></span><br></pre></td></tr></table></figure><p><strong>manage.py</strong>为上述创建工程时自动生成的管理文件</p><h5 id="子应用目录说明"><a href="#子应用目录说明" class="headerlink" title="子应用目录说明"></a>子应用目录说明</h5><ul><li><strong>admin.py</strong>文件跟网站的后台管理站点配置相关。</li><li><strong>apps.py</strong>文件用于配置当前子应用的相关信息。</li><li><strong>migrations</strong>目录用于存放数据库迁移历史文件。</li><li><strong>models.py</strong>文件用户保存数据库模型类。</li><li><strong>tests.py</strong>文件用于开发测试用例，编写单元测试。</li><li><strong>views.py</strong>文件用于编写Web应用视图。</li></ul><h6 id="注册子应用"><a href="#注册子应用" class="headerlink" title="注册子应用"></a>注册子应用</h6><blockquote><p>在apps.py中的Config类添加到<strong>INSTALLED_APPS列表中</strong>。</p><p>如：INSTALLED_APPS = [ ……. , ‘我添加的一个应用’]</p></blockquote>]]></content>
<tags>
<tag> Django </tag>
</tags>
</entry>
<entry>
<title>Mysql视图·事务·索引</title>
<link href="/2021/11/18/Mysql%E8%A7%86%E5%9B%BE/"/>
<url>/2021/11/18/Mysql%E8%A7%86%E5%9B%BE/</url>
<content type="html"><![CDATA[<h2 id="视图"><a href="#视图" class="headerlink" title="视图"></a>视图</h2><p>视图是一种虚拟表 ，本身是 不具有数据 的，占用很少的内存空间，它是 SQL 中的一个重要概念。 </p><blockquote><p><strong>视图建立在已有表的基础上</strong>, 视图赖以建立的这些表称为<strong>基表</strong>。</p><p>视图的<strong>创建和删除</strong>只影响视图本身，不影响对应的基表。</p><p>但是当对视图中的数据进行<strong>增加、删除和修改</strong>操作时，数据表中的数据会相应地发生变化。</p></blockquote><h4 id="视图操作"><a href="#视图操作" class="headerlink" title="视图操作"></a>视图操作</h4><p><strong>创建视图语法：</strong> <code>CREATE VIEW 视图名 AS 查询语句</code></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># 如 将教师与学生的查询结果存放为一张视图</span><br><span class="line"># 其中 newview 就是视图，你可以将表的操作去使用</span><br><span class="line">CREATE VIEW newview AS</span><br><span class="line">SELECT a.name,a.age,b.name from student as a left join teacher as b on a.tea = b.stu;</span><br></pre></td></tr></table></figure><p><em>当我们创建好一张视图之后，还可以在它的基础上继续创建视图</em></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">CREATE VIEW newtwoview AS</span><br><span class="line">select name from newview where name = '罗小黑';</span><br></pre></td></tr></table></figure><h4 id="基本语法"><a href="#基本语法" class="headerlink" title="基本语法"></a>基本语法</h4><ul><li>创建视图</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">CREATE VIEW 视图名 AS 查询语句</span><br></pre></td></tr></table></figure><ul><li>查看视图结构</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">DESC/ DESCRIBE 视图名称;</span><br></pre></td></tr></table></figure><ul><li>查看视图的属性信息</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">#查看视图信息（显示数据表的存储引擎、版本、数据行数和数据大小等）</span><br><span class="line">SHOW TABLE STATUS LIKE '视图名称'\G</span><br></pre></td></tr></table></figure><ul><li>查看视图的详细定义信息</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SHOW CREATE VIEW 视图名称</span><br></pre></td></tr></table></figure><ul><li>修改视图</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ALTER VIEW 视图名称 AS 查询语句</span><br></pre></td></tr></table></figure><ul><li>删除视图</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"># 删除视图只是删除视图的定义，并不会删除基表的数据</span><br><span class="line">DROP VIEW IF EXISTS 视图名称;</span><br></pre></td></tr></table></figure><h4 id="视图优点"><a href="#视图优点" class="headerlink" title="视图优点"></a>视图优点</h4><h6 id="1-操作简单"><a href="#1-操作简单" class="headerlink" title="1.操作简单"></a>1.操作简单</h6><p>将经常使用的查询操作定义为视图，可以使开发人员不需要关心视图对应的数据表的结构、表与表之间</p><p>的关联关系，也不需要关心数据表之间的业务逻辑和查询条件，而只需要简单地操作视图即可，极大简</p><p>化了开发人员对数据库的操作。 </p><h6 id="2-减少数据冗余"><a href="#2-减少数据冗余" class="headerlink" title="2.减少数据冗余"></a>2.减少数据冗余</h6><p>视图跟实际数据表不一样，它存储的是查询语句。所以，在使用的时候，我们要通过定义视图的查询语</p><p>句来获取结果集。而视图本身不存储数据，不占用数据存储的资源，减少了数据冗余。 </p><h6 id="3-数据安全"><a href="#3-数据安全" class="headerlink" title="3.数据安全"></a>3.数据安全</h6><p>MySQL将用户对数据的访问限制在某些数据的结果集上，而这些数据的结果集可以使用视图来实现。用户不必直接查询或操作数据表。这也可以理解为视图具有隔离性。视图相当于在用户和实际的数据表之间加了一层虚拟表。同时，MySQL可以根据权限将用户对数据的访问限制在某些视图上，用户不需要查询数据表，可以直接通过视图获取数据表中的信息。这在一定程度上保障了数据表中数据的安全性。</p><h6 id="4-适应灵活多变的需求"><a href="#4-适应灵活多变的需求" class="headerlink" title="4.适应灵活多变的需求"></a>4.适应灵活多变的需求</h6><p>当业务系统的需求发生变化后，如果需要改动数据表的结构，则工作量相对较 </p><p>大，可以使用视图来减少改动的工作量。这种方式在实际工作中使用得比较多。 </p><h6 id="5-能够分解复杂的查询逻辑"><a href="#5-能够分解复杂的查询逻辑" class="headerlink" title="5.能够分解复杂的查询逻辑"></a>5.能够分解复杂的查询逻辑</h6><p>数据库中如果存在复杂的查询逻辑，则可以将问题进行分解，创建多个视图</p><p>获取数据，再将创建的多个视图结合起来，完成复杂的查询逻辑。</p><h2 id="事务"><a href="#事务" class="headerlink" title="事务"></a>事务</h2><h4 id="事务四大特性-简称ACID"><a href="#事务四大特性-简称ACID" class="headerlink" title="事务四大特性(简称ACID)"></a>事务四大特性(简称ACID)</h4><ul><li>原子性（atomicity）</li></ul><blockquote><p>一个事务必须被视为一个不可分割的最小工作单元，整个事务中的所有操作要么全部提交成功，要么全部失败回滚，对于一个事务来说，不可能只执行其中的一部分操作，这就是事务的原子性</p></blockquote><ul><li>一致性（consistency）</li></ul><blockquote><p>数据库总是从一个一致性的状态转换到另一个一致性的状态。（在前面的例子中，一致性确保了，即使在执行第三、四条语句之间时系统崩溃，支票账户中也不会损失200美元，因为事务最终没有提交，所以事务中所做的修改也不会保存到数据库中。）</p></blockquote><ul><li>隔离性（isolation）</li></ul><blockquote><p>通常来说，一个事务所做的修改在最终提交以前，对其他事务是不可见的。（在前面的例子中，当执行完第三条语句、第四条语句还未开始时，此时有另外的一个账户汇总程序开始运行，则其看到支票帐户的余额并没有被减去200美元。）</p></blockquote><ul><li>持久性（durability）</li></ul><blockquote><p>一旦事务提交，则其所做的修改会永久保存到数据库。（此时即使系统崩溃，修改的数据也不会丢失。）</p></blockquote><h4 id="语法："><a href="#语法：" class="headerlink" title="语法："></a>语法：</h4><ul><li><p>查看表的创建语句</p><p><em>表的引擎类型必须是innodb类型才可以使用事务，这是mysql表的默认引擎</em></p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">show create table goods;</span><br></pre></td></tr></table></figure><ul><li>开启事务</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">begin;</span><br><span class="line"># or</span><br><span class="line">start transaction;</span><br></pre></td></tr></table></figure><ul><li>提交事务</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">commit;</span><br></pre></td></tr></table></figure><ul><li>回滚事务</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">rollback;</span><br></pre></td></tr></table></figure><h2 id="索引"><a href="#索引" class="headerlink" title="索引"></a>索引</h2><p>索引是一个单独的、存储在磁盘上的数据库结构，它们包含着对数据表里所有记录的引用指针。</p><ol><li><strong>Primary Key（聚集索引）</strong>：InnoDB存储引擎的表会存在主键（唯一非null），如果建表的时候没有指定主键，则会使用第一非空的唯一索引作为聚集索引，否则InnoDB会自动帮你创建一个不可见的、长度为6字节的row_id用来作为聚集索引。</li><li><strong>单列索引</strong>：单列索引即一个索引只包含单个列</li><li><strong>组合索引</strong>：组合索引指在表的多个字段组合上创建的索引，只有在查询条件中使用了这些字段的左边字段时，索引才会被使用。使用组合索引时<strong>遵循最左前缀集合</strong></li><li><strong>Unique（唯一索引）</strong>：索引列的值必须唯一，但允许有空值。若是组合索引，则列值的组合必须唯一。主键索引是一种特殊的唯一索引，不允许有空值</li><li><strong>Key（普通索引）</strong>：是MySQL中的基本索引类型，允许在定义索引的列中插入重复值和空值</li><li><strong>FULLTEXT（全文索引）</strong>：全文索引类型为FULLTEXT，在定义索引的列上支持值的全文查找，允许在这些索引列中插入重复值和空值。全文索引可以在CHAR、VARCHAR或者TEXT类型的列上创建</li><li><strong>SPATIAL（空间索引）</strong>：空间索引是对空间数据类型的字段建立的索引，MySQL中的空间数据类型有4种，分别是GEOMETRY、POINT、LINESTRING和POLYGON。MySQL使用SPATIAL关键字进行扩展，使得能够用于创建正规索引类似的语法创建空间索引。创建空间索引的列必须声明为NOT NULL</li></ol><h4 id="语法：-1"><a href="#语法：-1" class="headerlink" title="语法："></a>语法：</h4><ul><li>查看索引</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">show index from 表名;</span><br></pre></td></tr></table></figure><ul><li>创建事务</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">create index 索引名称 on 表名(字段名称(长度))</span><br></pre></td></tr></table></figure><ul><li>删除索引</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">drop index 索引名称 on 表名;</span><br></pre></td></tr></table></figure><ul><li>查看执行的时间：</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">show profiles;</span><br></pre></td></tr></table></figure><blockquote><p>要注意的是，建立太多的索引将会影响更新和插入的速度，因为它需要同样更新每个索引文件。对于一个经常需要更新和插入的表格，就没有必要为一个很少使用的where字句单独建立索引了，对于比较小的表，排序的开销不会很大，也没有必要建立另外的索引。</p><p><strong>建立索引会占用磁盘空间</strong></p></blockquote>]]></content>
<tags>
<tag> Mysql </tag>
</tags>
</entry>
<entry>
<title>win端操控ubuntu虚拟机</title>
<link href="/2021/11/15/win%E7%AB%AF%E6%93%8D%E6%8E%A7VM%E8%99%9A%E6%8B%9F%E6%9C%BA/"/>
<url>/2021/11/15/win%E7%AB%AF%E6%93%8D%E6%8E%A7VM%E8%99%9A%E6%8B%9F%E6%9C%BA/</url>
<content type="html"><![CDATA[<h4 id="第一步：确保VM虚拟机已连接网络"><a href="#第一步：确保VM虚拟机已连接网络" class="headerlink" title="第一步：确保VM虚拟机已连接网络"></a>第一步：确保VM虚拟机已连接网络</h4><p><strong>在VM虚拟机终端输入</strong></p><ol><li><p>进入环境</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cat /var/lib/NetworkManager/NetworkManager.state</span><br></pre></td></tr></table></figure></li><li><p>进行验证 （过程有三次输入密码）</p><p><strong>全程使用VM账号密码 第二次为隐藏输入</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">service NetworkManager stop</span><br><span class="line"></span><br><span class="line">sudo rm /var/lib/NetworkManager/NetworkManager.state</span><br><span class="line"></span><br><span class="line">service NetworkManager start</span><br></pre></td></tr></table></figure><p><code>三次输入完成后 右上角弹出网络logo或者用浏览器测试是否接通网络</code></p></li></ol><ul><li><p>第一步查看两端IP地址前三位一不一致</p><p>本机服务端查看 <code>ipconfig</code><br>虚拟机服务端查看 <code>ifconfig</code></p><blockquote><p>如： VM ： 192.168.44.111 与 win： 192.168.44.222 两者是可以互通的</p><p>可以使用 <code>ping </code> 测试</p></blockquote></li></ul><h4 id="第二步：控制虚拟机终端"><a href="#第二步：控制虚拟机终端" class="headerlink" title="第二步：控制虚拟机终端"></a>第二步：控制虚拟机终端</h4><h5 id="在win端输入"><a href="#在win端输入" class="headerlink" title="在win端输入"></a><strong>在win端输入</strong></h5><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ssh 你的VM名字@你的VM端IP地址 </span><br><span class="line">如:ssh [email protected]</span><br></pre></td></tr></table></figure><ol><li>输入后会提示 YES/NO 输入<strong>YES</strong></li><li>再次输入你的密码</li></ol><p><em>以上操作执行完成之后如果出现：</em></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">----------</span><br><span class="line">Welcome to Ubuntu 18.10 (GNU/Linux 4.18.0-25-generic x86<span class="emphasis">_64)</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis"> * Documentation: https://help.ubuntu.com</span></span><br><span class="line"><span class="emphasis"> * Management: https://landscape.canonical.com</span></span><br><span class="line"><span class="emphasis"> * Support: https://ubuntu.com/advantage</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">167 packages can be updated.</span></span><br><span class="line"><span class="emphasis">0 updates are security updates.</span></span><br><span class="line"><span class="emphasis">----------</span></span><br></pre></td></tr></table></figure><p><strong>就成功啦~~</strong></p>]]></content>
</entry>
<entry>
<title>Mysql命令</title>
<link href="/2021/10/20/Mysql%E5%91%BD%E4%BB%A4/"/>
<url>/2021/10/20/Mysql%E5%91%BD%E4%BB%A4/</url>
<content type="html"><![CDATA[<h1 id="Mysql"><a href="#Mysql" class="headerlink" title="Mysql"></a>Mysql</h1><hr><p><a href="">基于前文没安装的可以差看我之前的文章</a></p><h2 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h2><h6 id="win端"><a href="#win端" class="headerlink" title="win端"></a>win端</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"># --- 管理员命令行 ----</span><br><span class="line"># 1. 启动mysql服务</span><br><span class="line">net start mysql</span><br><span class="line"></span><br><span class="line"># 2. 输入你的账号密码</span><br><span class="line">mysql -uxxx -pxxxxx</span><br><span class="line"></span><br><span class="line"># or</span><br><span class="line"></span><br><span class="line"># --- 直接在文件目录开启 ---</span><br><span class="line"># 输入你的账号密码</span><br><span class="line">mysql -uxxx -pxxxxx</span><br></pre></td></tr></table></figure><h6 id="linux端"><a href="#linux端" class="headerlink" title="linux端"></a>linux端</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"># 1. 进入顶层目录 /</span><br><span class="line">cd /</span><br><span class="line"># 2. 进入mysql目录</span><br><span class="line">cd /etc/mysql</span><br><span class="line"># 3. 输入你的账号密码</span><br><span class="line">mysql -uxxx -pxxxxx</span><br></pre></td></tr></table></figure><h6 id="启动与停止"><a href="#启动与停止" class="headerlink" title="启动与停止"></a>启动与停止</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># 启动mysql服务</span><br><span class="line">net start mysql</span><br><span class="line"></span><br><span class="line"># 停止mysql服务</span><br><span class="line">net start mysql</span><br></pre></td></tr></table></figure><p><code>注意，如果是连接到另外的机器上，则需要加入一个参数-h机器IP</code></p><h2 id="基本操作"><a href="#基本操作" class="headerlink" title="基本操作"></a>基本操作</h2><p>注意 <strong>mysql 语法</strong> 后面必须跟着 <code>;</code>号</p><h3 id="库操作"><a href="#库操作" class="headerlink" title="库操作"></a>库操作</h3><h6 id="查看所有数据库"><a href="#查看所有数据库" class="headerlink" title="查看所有数据库"></a>查看所有数据库</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">show databases;</span><br></pre></td></tr></table></figure><h6 id="使用数据库"><a href="#使用数据库" class="headerlink" title="使用数据库"></a>使用数据库</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">use 数据库名;</span><br></pre></td></tr></table></figure><h6 id="查看当前使用的数据库"><a href="#查看当前使用的数据库" class="headerlink" title="查看当前使用的数据库"></a>查看当前使用的数据库</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select database();</span><br></pre></td></tr></table></figure><h6 id="创建数据库"><a href="#创建数据库" class="headerlink" title="创建数据库"></a>创建数据库</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># 意为：创建 数据库 xxx 字符集为uf8格式;</span><br><span class="line">create database 数据库名 charset=utf8;</span><br><span class="line"># 例如:</span><br><span class="line">create database Mydb charset=utf8;</span><br></pre></td></tr></table></figure><h6 id="删除数据库"><a href="#删除数据库" class="headerlink" title="删除数据库"></a>删除数据库</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">drop 数据库名;</span><br><span class="line"># or </span><br><span class="line">drop table 数据库名;</span><br></pre></td></tr></table></figure><h3 id="表操作"><a href="#表操作" class="headerlink" title="表操作"></a>表操作</h3><h4 id="表基本操作"><a href="#表基本操作" class="headerlink" title="表基本操作"></a>表基本操作</h4><h6 id="查看当前数据库中的所有表"><a href="#查看当前数据库中的所有表" class="headerlink" title="查看当前数据库中的所有表"></a>查看当前数据库中的所有表</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">show tables;</span><br></pre></td></tr></table></figure><h6 id="查看表结构"><a href="#查看表结构" class="headerlink" title="查看表结构"></a>查看表结构</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">desc 表名;</span><br></pre></td></tr></table></figure><h6 id="创建表"><a href="#创建表" class="headerlink" title="创建表"></a>创建表</h6><p>创建Mysql数据表需要有：<code>表名</code>，<code>表字段名</code>，<code>定义每个表字段</code>。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">CREATE [TEMPORARY] TABLE [IF NOT EXISTS] [database_name] <table_name></span><br><span class="line">（</span><br><span class="line"><column_name> <data_type> [[not null]...]</span><br><span class="line">）</span><br></pre></td></tr></table></figure><p><strong>解注:</strong></p><table><thead><tr><th>语法</th><th>释意</th></tr></thead><tbody><tr><td>TEMPORARY</td><td>创建临时表</td></tr><tr><td>IF NOT EXISTS</td><td>如果要创建的表已经存在，强制不显示错误消息</td></tr><tr><td>database_name</td><td>数据库名</td></tr><tr><td>table_name</td><td>表面</td></tr><tr><td>column_name</td><td>列名</td></tr><tr><td>data_type</td><td>数据类型</td></tr></tbody></table><p><strong>例子:</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"># 创建一个名为 student 的表</span><br><span class="line">create table students(</span><br><span class="line"> # ID列为无符号整型，该列值不可以为空，并不可以重复，而且自增。</span><br><span class="line"> id int unsigned primary key auto_increment not null,</span><br><span class="line"> # name列单个最大字符长度为20 默认为空</span><br><span class="line"> name varchar(20) default '',</span><br><span class="line"> # age列为无符号整型 单个范围为(0,255) 默认为0</span><br><span class="line"> age tinyint unsigned default 0,</span><br><span class="line"> # height列最多存储5位数字，小数位为2位。 范围为:（-999.99 , 999.99）</span><br><span class="line"> height decimal(5,2), </span><br><span class="line"> # gender列里面的字段只能为男或女，若新添加的一行不为这两个数据则报错</span><br><span class="line"> gender enum('男','女'),</span><br><span class="line"> # 自己思考下面列意</span><br><span class="line"> cls_id int unsigned default 0</span><br><span class="line">)</span><br></pre></td></tr></table></figure><h6 id="修改表-添加列"><a href="#修改表-添加列" class="headerlink" title="修改表 - 添加列"></a>修改表 - 添加列</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">alter table 表名 add 列名 类型；</span><br><span class="line"># 如:</span><br><span class="line">alter table student add birthday datetime;</span><br></pre></td></tr></table></figure><h6 id="修改表-列重命名"><a href="#修改表-列重命名" class="headerlink" title="修改表 - 列重命名"></a>修改表 - 列重命名</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">alter table 表名 change 原名 新名 类型及约束;</span><br><span class="line"># 如:</span><br><span class="line">alter table student change birthday birth datetime not null;</span><br></pre></td></tr></table></figure><h6 id="修改表-列不重命名"><a href="#修改表-列不重命名" class="headerlink" title="修改表 - 列不重命名"></a>修改表 - 列不重命名</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">alter table 表名 modify 列名 类型与约束;</span><br><span class="line"># 如:</span><br><span class="line">alter table student modify birthday date not null;</span><br></pre></td></tr></table></figure><h6 id="修改表-删除列"><a href="#修改表-删除列" class="headerlink" title="修改表 - 删除列"></a>修改表 - 删除列</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">alter table 表名 drop 列名;</span><br><span class="line"># 如:</span><br><span class="line">alter table student drop birthday;</span><br></pre></td></tr></table></figure><h6 id="删除表"><a href="#删除表" class="headerlink" title="删除表"></a>删除表</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">drop table 表名;</span><br><span class="line"># 如:</span><br><span class="line">drop table student;</span><br></pre></td></tr></table></figure><h6 id="清空表中记录"><a href="#清空表中记录" class="headerlink" title="清空表中记录"></a>清空表中记录</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">delete * from 表名;</span><br></pre></td></tr></table></figure><h6 id="查看表中记录"><a href="#查看表中记录" class="headerlink" title="查看表中记录"></a>查看表中记录</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from 表名;</span><br></pre></td></tr></table></figure><h6 id="查看表的创建语句"><a href="#查看表的创建语句" class="headerlink" title="查看表的创建语句"></a>查看表的创建语句</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">show create table 表名;</span><br><span class="line"># 如:</span><br><span class="line">show create table student;</span><br></pre></td></tr></table></figure><h4 id="增删改查e"><a href="#增删改查e" class="headerlink" title="增删改查e"></a>增删改查e</h4><h5 id="查询"><a href="#查询" class="headerlink" title="查询"></a>查询</h5><h6 id="查看所有列"><a href="#查看所有列" class="headerlink" title="查看所有列"></a>查看所有列</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">select * from 表名;</span><br><span class="line"># 如:</span><br><span class="line">select * from student;</span><br></pre></td></tr></table></figure><h6 id="查询指定列"><a href="#查询指定列" class="headerlink" title="查询指定列"></a>查询指定列</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">select 列1,列2 form 表名;</span><br><span class="line"># 如:</span><br><span class="line">select id,name from student;</span><br></pre></td></tr></table></figure><h5 id="增加"><a href="#增加" class="headerlink" title="增加"></a>增加</h5><p><code>语法格式: INSERT [INTO] tb_name [(col_name,...)] {VALUES | VALUE} ({expr | DEFAULT},...),(...),...;</code></p><p><strong>说明：</strong>主键列是自动增长，但是在全列插入时需要占位，通常使用0或者 default 或者 null 来占位，插入成功后以实际数据为准</p><h6 id="全列插入-值的顺序与表中字段的顺序对应"><a href="#全列插入-值的顺序与表中字段的顺序对应" class="headerlink" title="全列插入 - 值的顺序与表中字段的顺序对应"></a>全列插入 - 值的顺序与表中字段的顺序对应</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">insert into 表名 values(...)</span><br><span class="line"># 如:</span><br><span class="line">insert into student values(0,'小黑')</span><br></pre></td></tr></table></figure><h6 id="部分列插入-值的顺序与给出的列顺序对应"><a href="#部分列插入-值的顺序与给出的列顺序对应" class="headerlink" title="部分列插入 - 值的顺序与给出的列顺序对应"></a>部分列插入 - 值的顺序与给出的列顺序对应</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">insert into 表名(列1,...) values(值1,...)</span><br><span class="line"># 如:</span><br><span class="line">insert into student(name,hometown,birthday) values('小黑','深林','2010-9-1')</span><br></pre></td></tr></table></figure><h6 id="全列多行插入-值的顺序与给出的列顺序对应"><a href="#全列多行插入-值的顺序与给出的列顺序对应" class="headerlink" title="全列多行插入 - 值的顺序与给出的列顺序对应"></a>全列多行插入 - 值的顺序与给出的列顺序对应</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">insert into 表名(列1,...) values(值1,...),(值1,...)...;</span><br><span class="line"># 如:</span><br><span class="line">insert into student(name) values('小黑'),('小兔'),('小龙');</span><br></pre></td></tr></table></figure><h5 id="修改"><a href="#修改" class="headerlink" title="修改"></a>修改</h5><p><code>语法格式: UPDATE tbname SET col1={expr1|DEFAULT} [,col2={expr2|default}]...[where 条件判断]</code></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># UPDATE 更新修改 || set 获取想要修改的列更改对应的值 || where 设定查询条件</span><br><span class="line">update 表名 set 列1=值1, 列2=值2... where 条件;</span><br><span class="line"># 如:</span><br><span class="line">update student set gender=0,hometown='南京' where id=5;</span><br></pre></td></tr></table></figure><h5 id="删除"><a href="#删除" class="headerlink" title="删除"></a>删除</h5><p><code>语法格式: DELETE FROM tbname [where 条件判断]</code></p><h6 id="基本删除"><a href="#基本删除" class="headerlink" title="基本删除"></a>基本删除</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">delete from 表名 where 条件;</span><br><span class="line"># 如:</span><br><span class="line">delete from student where id=5;</span><br></pre></td></tr></table></figure><h6 id="逻辑删除"><a href="#逻辑删除" class="headerlink" title="逻辑删除"></a>逻辑删除</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">update student set isdelete=1 where id=1;</span><br></pre></td></tr></table></figure><h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><p>MySQL 中定义数据字段的类型对你数据库的优化是非常重要的。</p><p>MySQL 支持多种类型，大致可以分为三类：<code>数值、日期/时间和字符串</code>(字符)类型。</p><p>整数类型：BIT、BOOL、TINY INT、SMALL INT、MEDIUM INT、 INT、 BIG INT</p><p>浮点数类型：FLOAT、DOUBLE、DECIMAL</p><p>字符串类型：CHAR、VARCHAR、TINY TEXT、TEXT、MEDIUM TEXT、LONGTEXT、TINY BLOB、BLOB、MEDIUM BLOB、LONG BLOB</p><p>日期类型：Date、DateTime、TimeStamp、Time、Year</p><p>其他数据类型：BINARY、VARBINARY、ENUM、SET、Geometry、Point、MultiPoint、LineString、MultiLineString、Polygon、GeometryCollection等</p><p><a href="https://www.cnblogs.com/-xlp/p/8617760.html">点击可查看具体参考博文</a></p><p><a href="https://www.runoob.com/mysql/mysql-data-types.html">菜鸟Mysql数据类型</a></p>]]></content>
<tags>
<tag> Mysql </tag>
</tags>
</entry>
<entry>
<title>MySql</title>
<link href="/2021/10/15/MySQL/"/>
<url>/2021/10/15/MySQL/</url>
<content type="html"><![CDATA[<h1 id="MySQL"><a href="#MySQL" class="headerlink" title="MySQL"></a>MySQL</h1><p>本地登录：进入bin目录看到mysql.exe 后打开bin目录的命令行</p><p>输入： mysql -uroot -p123456</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1622363577463.png" alt="1622363577463"></p><p>退出命令：exit</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1622363740431.png" alt="1622363740431"></p><p>隐藏密码登录：mysql -uroot -p</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1622363897343.png" alt="1622363897343"></p><h2 id="mysql常用命令"><a href="#mysql常用命令" class="headerlink" title="mysql常用命令"></a>mysql常用命令</h2><p>查看mysql中有哪些命令 ： show databases; </p><p>选择某个数据库：use test</p><p>创建一个数据库：create database newtest;</p><p>展示本地数据库：show databases;</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1622364340400.png" alt="1622364340400"></p><p>查看表：show tables; 返回几个表</p><p>9、关于8L语句的分类?</p><p>soL语句有很多，最好进行分门别类，这样更容易记忆分为</p><p>数据查语言(凡是带有seet关键字的都是查语句) select。</p><p> DME 数据操语言(凡是对表当中的数据进行增删改的都是DL)</p><p> insert delete update insert增</p><p> delete</p><p> update改</p><p>这个主要是操作表中的数据data。</p><p> DDL: 数据定义语言</p><p>凡是带有 create、drop、 alter的都是DDL</p><p>DDL主要操作的是表的结构。不是表中的数据</p><p> create:新建，等同于增</p><p>drop:删除</p><p> alter:修改</p><p>这个增改和不同，这个主要是对表结构进行操作</p><p> TCL：是事务控制语</p><p>包括：事务提交：commit;</p><p> 事务回滚：rollback;</p><p>DCL：是数据控制语言。</p><p>例如：授权grant，撤销权限revoke</p><p>导入表：source D:\mysqltool\document\bjpowernode.sql</p><p>查看表：</p><p>mysql> show tables;<br>+——————-+<br>| Tables_in_newtest |<br>+——————-+<br>| dept | dept：部门表<br>| emp | emp：员工表<br>| salgrade | salgrade：是工资等级表<br>+——————-+<br>3 rows in set (0.00 sec)</p><h3 id="简单查询"><a href="#简单查询" class="headerlink" title="简单查询"></a><code>简单查询</code></h3><p>查看表中看所有数据/字段： select * from 表；</p><p>（ /*/效率低 ，建议把所有字段写上）</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1622366942505.png" alt="1622366942505"></p><p>查询指定个字段：select 指定 from 表；</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1622367837498.png" alt="1622367837498"></p><p>查看表的结构：desc 表；（describe ）</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1622367259165.png" alt="1622367259165"></p><p>查询列中起别名：select 字段 as 新别名 form 表;</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1622368187183.png" alt="1622368187183"></p><p>注意事项：</p><ul><li>所有sql语言分号结尾；sql语句不区分大小写</li><li>数据库中的字符串采用单引号 </li></ul><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1622367582850.png" alt="1622367582850"></p><h2 id="条件查询"><a href="#条件查询" class="headerlink" title="条件查询"></a>条件查询</h2><p>语法格式： select <code>字段1</code> ,<code>字段2</code> from <code>表名</code> where <code>条件</code>；</p><ul><li><p>= 等于 select empno,ename from emp where sal<code>=</code>3000; </p></li><li><p><> / ！= 不等于 select empno,ename from emp where sal <code>!=/<></code> 3000;</p></li><li><p>＞大于/＜小于：select sal,ename from emp where sal <code></>/<=/>=</code> 3000;</p></li><li><p>between…and… ：两值之间，等同于 >= and <=</p><p>select sal,ename from emp where sal <code>>=</code> 3000 <code>and</code> <code><=</code>4000;</p><p>select sal,ename from emp where sal <code>between</code> 3000 <code>and</code> 4000;(左小右大)</p></li><li><p>and并且：select 字段 from 表 where job=’clerk’ <code>and</code> sal < 2000;</p></li><li><p>or或者：select 字段 from 表 where job=’clerk’ <code>or</code> job = ‘salesman’;</p></li><li><p>and与or 合并用：</p><p><code>and和or同时出现，and优先级较高；or加小括号提升优先级；</code></p><p>select 字段 from 表 where sal > 2000 <code>and</code> <code>(</code>deptno = 10 <code>or</code> deptno = 20<code>)</code>;</p></li><li><p> is nul1为nul( is not null不为空)</p></li><li><p>in包含，相当于多个or( not in不在这个范围中)</p><p>select 字段 from 表 where sal <code>in</code> (800,5000) ; <code>找出800 与 5000；</code></p></li><li><p> not nott可以取非，主要用在is或in中</p></li><li><p>1ike：称为模糊查询，支持%或下划线。<code>%匹配配任意多个字符</code></p><p>下划线：表示任意一个字符 (%是一个特殊的符号，_也是一个特殊符号)</p><p>找出名字有o的：select 字段from 表 where ename <code>like '%o%</code>‘;</p><p>‘’%n%’含义n的; ‘%n’以n开头的； ‘n%’ 以n结尾的；</p><p>‘_A%’找出第二个字母是A的；</p><p>如：select name from t_student where name like <code>'%\_%';</code></p><p>（找出名字中有下划线的）</p><h2 id="排序查询"><a href="#排序查询" class="headerlink" title="排序查询"></a>排序查询</h2><p>正序：select ename,job,sal from emp <code>order by</code> sal;</p><p>：select ename,job,sal from emp order by sal asc，ename asc;</p><p>（如果出现工资相同，则按名字字母排序）</p><p>：select ename,job,sal from emp order by 2;（按照第二列排）</p><p>降序：select ename,job,sal from emp <code>order by</code> sal <code>desc;</code></p><p>select 字段l from 表 <code>where sal between 1250 and 3000 order by sal ;</code> (指定数字之间向正序排列)</p><p>关键字排序：select … from … where …order by</p><h2 id="当行处理函数"><a href="#当行处理函数" class="headerlink" title="当行处理函数"></a>当行处理函数</h2><p>转大写：select lower(字段) from 表;</p><p>转小写：select upper(字段) from 表;</p><p>substr：截取字符串，起始下标，截取的长度</p><p>select 字段 from 表 where substr(ename,1,1)</p></li></ul>]]></content>
</entry>
<entry>
<title>Mysql查询</title>
<link href="/2021/10/13/Mysql%E6%9F%A5%E8%AF%A2/"/>
<url>/2021/10/13/Mysql%E6%9F%A5%E8%AF%A2/</url>
<content type="html"><![CDATA[<h1 id="Mysql-查询"><a href="#Mysql-查询" class="headerlink" title="Mysql 查询"></a>Mysql 查询</h1><hr><h3 id="基本查询"><a href="#基本查询" class="headerlink" title="基本查询"></a>基本查询</h3><ul><li> 查询所有字段</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from 表名;</span><br></pre></td></tr></table></figure><ul><li> 查询指定路段</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">select 列1,列2,... from 表名;</span><br><span class="line"># 如:</span><br><span class="line">select name from students;</span><br></pre></td></tr></table></figure><ul><li> 起别名</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">-- 如果是单表查询 可以省略表明</span><br><span class="line">select id, name, gender from students;</span><br><span class="line"></span><br><span class="line">-- 表名.字段名</span><br><span class="line">select students.id,students.name,students.gender from students;</span><br><span class="line"></span><br><span class="line">-- 可以通过 as 给表起别名</span><br><span class="line">select s.id,s.name,s.gender from students as s;</span><br></pre></td></tr></table></figure><ul><li> 消除重复行(去重)</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">select distinct 列1,... from 表名;</span><br><span class="line"># 如:</span><br><span class="line">select distinct name from studetns;</span><br></pre></td></tr></table></figure><h3 id="运算优先级"><a href="#运算优先级" class="headerlink" title="运算优先级"></a>运算优先级</h3><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/11/18/UzQOslGnpMHLKWC.png" alt="image.png"></p><h3 id="条件"><a href="#条件" class="headerlink" title="条件"></a>条件</h3><h5 id="使用-where-子句对表中的数据筛选，并将筛选结果为符合的输出。"><a href="#使用-where-子句对表中的数据筛选，并将筛选结果为符合的输出。" class="headerlink" title="使用 where 子句对表中的数据筛选，并将筛选结果为符合的输出。"></a><strong>使用 where 子句对表中的数据筛选，并将筛选结果为符合的输出。</strong></h5><blockquote><p>where 支持多种运算符进行条件处理，如:</p><p>比较运算符 逻辑运算符 模糊查询 范围查询 空判断</p><p><strong>优先级由高到低的顺序为：小括号，not，比较运算符，逻辑运算符</strong></p></blockquote><h5 id="比较运算符"><a href="#比较运算符" class="headerlink" title="比较运算符"></a><strong>比较运算符</strong></h5><p><code>等于: =</code> || <code>大于: ></code> || <code>大于等于: >=</code> || <code>小于: <</code> || <code>小于等于: <=</code> || <code>不等于: != 或 <></code></p><p><strong>– 基本语法 –</strong></p><p><code>SELECT 字段 FROM 表 WHERE 某字段 比较运算符 条件</code></p><ul><li> 查询大于</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from student where id > 3;</span><br></pre></td></tr></table></figure><ul><li> 查询不等于</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">select * from student where id != 3;</span><br><span class="line"># or</span><br><span class="line">select * from student where id <> 3;</span><br></pre></td></tr></table></figure><ul><li> 查询姓名</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from student where name = '罗小黑';</span><br></pre></td></tr></table></figure><ul><li> 查询未被删除</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"># is_delete=1未被删除 =0则为已删除</span><br><span class="line">select * from student where is_delete=1;</span><br></pre></td></tr></table></figure><h5 id="逻辑运算符"><a href="#逻辑运算符" class="headerlink" title="逻辑运算符"></a><strong>逻辑运算符</strong></h5><p><code>and</code> || <code>or</code> || <code>not</code></p><p><strong>– 基本语法 –</strong></p><p><code>SELECT 字段 FROM 表 WHERE 条件 逻辑运算符 条件</code></p><ul><li> 查询版本是 AFC8 类型为华为的电脑</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from conputers where acg = 'AFC8' and types = '华为';</span><br></pre></td></tr></table></figure><ul><li> 查询版本是 AFC8 的电脑 或 类型为华为的电脑</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from conputers where acg = 'AFC8' or types = '华为';</span><br></pre></td></tr></table></figure><ul><li> 查询类型不为苹果的电脑</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from conputers where not types = '苹果';</span><br></pre></td></tr></table></figure><h5 id="模糊查询"><a href="#模糊查询" class="headerlink" title="模糊查询"></a><strong>模糊查询</strong></h5><p><strong>使用 like 搭配通配符</strong></p><p><code>'_' ：</code>表示匹配任意一个字符,常用与充当占位符.</p><p><code>'%'：</code>表示匹配 0 个或多个任意字符.</p><p><code>[ ] ：</code>表示括号内所列字符中的一个（类似正则表达式).</p><p><code>[^ ] ：</code>表示不在括号所列之内的单个字符。</p><p><code>escape：</code> 取消%或_字符的通配符特性</p><p><strong>– 基本语法 –</strong><br><code>SELECT 字段 FROM 表 WHERE 某字段 Like 条件</code></p><ul><li> 使用’_‘</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"># 查询姓名为朱开头两个字的数据</span><br><span class="line">select * from students where name like '朱_';</span><br></pre></td></tr></table></figure><ul><li> 使用’%’</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"> # 查询姓名为尘结尾的数据</span><br><span class="line">select * from students where name like '%尘';</span><br></pre></td></tr></table></figure><ul><li> 使用 escape</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"># 查询姓名中含有'%'的数据</span><br><span class="line">select * from students where name like '%P%%' escape 'P';</span><br></pre></td></tr></table></figure><h5 id="范围查询"><a href="#范围查询" class="headerlink" title="范围查询"></a><strong>范围查询</strong></h5><p><code>in</code> ：表示查询在一个非连续的范围内</p><p><code>between...and...</code> ：表示查询在一个连续的范围内</p><p><strong>– 基本语法 –</strong></p><p>in：<code> SELECT 字段 FROM 表 WHERE 某字段 in(value1,value2...)</code></p><p>between…and…：<code>SELECT 字段 FROM 表 WHERE 某字段 between value1 and value2</code></p><ul><li> 查询编号是 1 或 3 或 8 的学生</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from students where id in(1,3,8);</span><br></pre></td></tr></table></figure><ul><li><p>查询编号为 3 至 8 的学生</p><p> <em>between 可以连接多个 and，即可以添加多个判断条件</em></p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from students where id between 3 and 8;</span><br></pre></td></tr></table></figure><ul><li> 搭配操作</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from WST where (AID between 1 and 20) and areas not in ('USA', 'CNA');</span><br></pre></td></tr></table></figure><ul><li><p>小技巧</p><p> <em>and 比 or 的优先级高，如果同时出现并希望先运算 or，可以运用()小括号使用。</em></p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from WST where (AID between 1 and 20) or areas = 'CNA';</span><br></pre></td></tr></table></figure><h5 id="空判断"><a href="#空判断" class="headerlink" title="空判断"></a><strong>空判断</strong></h5><p><code>null 为空</code> <strong>-></strong> <code>is null判空</code> || <code>is not null 判非空</code></p><p><strong>– 基本语法 –</strong></p><p><code>SELECT 字段 FROM 表 WHERE 某字段 is null </code></p><ul><li> 查询上午没有签到的学生</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from conputers where openpick is null;</span><br></pre></td></tr></table></figure><ul><li> 查询上午签到的学生</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from conputers where openpick is not null;</span><br></pre></td></tr></table></figure><h3 id="排序"><a href="#排序" class="headerlink" title="排序"></a>排序</h3><p>使用 <strong><code>ORDER BY</code></strong> 子句来设定你想按哪个字段哪种方式来进行排序 ，再返回搜索结果</p><p><strong>在指定 <code>ORDER BY</code> 子句时，要把它放在最后（即最后一条子句）</strong></p><p>使用 <code>ASC</code> 或 <code>DESC</code> 关键字来设置查询结果是按<strong>升序</strong>或<strong>降序</strong>排列 ，默认升序[DESC]</p><p><code>DESC</code>是<code>DESCENDING</code>的缩写，这两个关键字都可以使用</p><p><strong>– 基本语法 –</strong></p><p><strong>原：</strong><code>SELECT 字段 FROM 表 ORDER BY 某字段; </code></p><p><strong>搭配关键字：</strong><code>SELECT 字段 FROM 表 ORDER BY 某字段 [ASC [DESC][默认 ASC]]; </code></p><ul><li> 排序查询学生 id 与姓名</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select sid,sname from students order by sid,sname</span><br></pre></td></tr></table></figure><ul><li> 按指定列进行排序</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"># 这里指的是先按3即sage排序</span><br><span class="line">select sname,sheight,sage from students order by 3,2;</span><br></pre></td></tr></table></figure><ul><li> 降序查询分数及格的学生</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from students where fration > 60 order by id desc;</span><br></pre></td></tr></table></figure><ul><li> 查询所有学生，先按年龄排序，后按身高排序</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">select * from students order by age desc,height desc;</span><br></pre></td></tr></table></figure><h3 id="聚合函数"><a href="#聚合函数" class="headerlink" title="聚合函数"></a>聚合函数</h3><p><strong>聚合函数在数据库数据的查询分析中，应用十分广泛</strong></p><ul><li> AVG() - 平均函数</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">语法: AVG([DISTINCT] expr)</span><br><span class="line">返回值: 返回expr的值</span><br><span class="line">取反: DISTINCT为返回expr的不同值的平均值</span><br><span class="line">如果没有匹配的行，AVG()返回null。</span><br><span class="line">定义: 表示求此列的平均值</span><br></pre></td></tr></table></figure><ul><li> MAX() / MIN() - 最大/ 最小函数</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">语法：select max(age)/min(age) from;</span><br><span class="line">定义: 求此列的最大或最小值</span><br></pre></td></tr></table></figure><ul><li> SUM() - 求和函数</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">语法：select sum(age) from student;</span><br><span class="line">定义: 求此列的和</span><br></pre></td></tr></table></figure><ul><li> COUNT() - 总数函数</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">语法：select count(*) from student;</span><br><span class="line">定义: count(*)表示计算总行数，括号中写星与列名，结果是相同的</span><br></pre></td></tr></table></figure><ul><li> CONCAT() - 合并函数</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">语法：CONCAT(sal * 12 + 200);</span><br><span class="line">定义: 拼接数据</span><br></pre></td></tr></table></figure><h3 id="分组"><a href="#分组" class="headerlink" title="分组"></a>分组</h3><h4 id="Group-By"><a href="#Group-By" class="headerlink" title="Group By"></a><strong>Group By</strong></h4><p><code>将查询结果按照1个或多个字段进行分组，字段值相同的为一组</code></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">SELECT column_name, function(column_name)</span><br><span class="line">FROM table_name</span><br><span class="line">GROUP BY column_name;</span><br></pre></td></tr></table></figure><h5 id="group-by-group-concat"><a href="#group-by-group-concat" class="headerlink" title="group by + group_concat()"></a><strong>group by + group_concat()</strong></h5><p>表示分组之后，根据分组结果，使用 group_concat(<strong>字段</strong>)来放置每一组的某字段的值的集合</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">select gender,group_concat(id) from students group by gender;</span><br><span class="line"></span><br><span class="line">'''</span><br><span class="line">+--------+------------------+</span><br><span class="line">| gender | group_concat(id) |</span><br><span class="line">+--------+------------------+</span><br><span class="line">| 男 | 3,4,8,9,14 |</span><br><span class="line">| 女 | 1,2,5,7,10,12,13 |</span><br><span class="line">+--------+------------------+</span><br><span class="line">'''</span><br></pre></td></tr></table></figure><h5 id="group-by-集合函数"><a href="#group-by-集合函数" class="headerlink" title="group by + 集合函数"></a><strong>group by + 集合函数</strong></h5><p>可以通过集合函数来对这个<code>分组完值的集合</code>做一些操作</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">select gender,count(*) from students group by gender;</span><br><span class="line"></span><br><span class="line">'''</span><br><span class="line">+--------+----------+</span><br><span class="line">| gender | count(*) |</span><br><span class="line">+--------+----------+</span><br><span class="line">| 男 | 5 |</span><br><span class="line">| 女 | 7 |</span><br><span class="line">+--------+----------+</span><br><span class="line">'''</span><br></pre></td></tr></table></figure><h5 id="group-by-with-rollup"><a href="#group-by-with-rollup" class="headerlink" title="group by + with rollup"></a><strong>group by + with rollup</strong></h5><p>在最后新增一行，来记录<strong>当前列里所有记录的总和</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">select gender,count(*) from students group by gender with rollup;</span><br><span class="line"></span><br><span class="line">'''</span><br><span class="line">+--------+----------+</span><br><span class="line">| gender | count(*) |</span><br><span class="line">+--------+----------+</span><br><span class="line">| 男 | 5 |</span><br><span class="line">| 女 | 7 |</span><br><span class="line">| NULL | 12 |</span><br><span class="line">+--------+----------+</span><br><span class="line">'''</span><br></pre></td></tr></table></figure><h5 id="group-by-having"><a href="#group-by-having" class="headerlink" title="group by + having**"></a>group by + having**</h5><ol><li>having 条件表达式：用来分组查询后指定一些条件来输出查询结果</li><li>having 作用和 where 一样，但<code>having只能用于group by</code></li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">select gender,count(*) from students group by gender having count(*)<7;</span><br><span class="line"></span><br><span class="line">'''</span><br><span class="line">+--------+----------+</span><br><span class="line">| gender | count(*) |</span><br><span class="line">+--------+----------+</span><br><span class="line">| 男 | 5 |</span><br><span class="line">+--------+----------+</span><br><span class="line">'''</span><br></pre></td></tr></table></figure><p><strong><code>having使用规范</code></strong></p><p><strong>1.having 只能用在 group by 之后，对分组后的结果进行筛选(即使用 having 的前提条件是分组)。</strong></p><p><strong>2.where 肯定在 group by 之前。</strong></p><p><strong>3.where 后的条件表达式里不允许使用聚合函数，而 having 可以。</strong></p>]]></content>
<tags>
<tag> Mysql </tag>
</tags>
</entry>
<entry>
<title>anync / await</title>
<link href="/2021/10/05/async%20-%20await/"/>
<url>/2021/10/05/async%20-%20await/</url>
<content type="html"><![CDATA[<h1 id="anync-await-原理"><a href="#anync-await-原理" class="headerlink" title="anync / await 原理"></a>anync / await 原理</h1><hr><h2 id="知识点"><a href="#知识点" class="headerlink" title="知识点"></a>知识点</h2><ul><li>await只能在async函数中使用，不然会报错</li><li>async函数返回的是一个状态为fuifilled的Promise对象，有无值看有无return值</li><li>await后面只有接了Promise才能实现排队效果</li><li>async/await作用是<strong>用同步方式，执行异步操作</strong></li></ul><h2 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h2><ul><li>在 async 方法中， 第一个 await 之前的代码会同步执行， await 之后的代码会异步执行</li></ul><h1 id="EventLoop"><a href="#EventLoop" class="headerlink" title="EventLoop"></a>EventLoop</h1><hr><p>为了防止某个 <strong>耗时任务</strong> 导致 <strong>程序假死</strong> 的问题 ，JavaScript 把待执行的任务分为两类：</p><ul><li><p>同步任务( synchronous )</p><p>又叫非耗时任务 ， 指的是在主线程上排队执行的那些任务</p><p><strong>只有前一个任务执行完毕，才能执行后一个任务</strong></p></li><li><p>异步任务 ( asychronous )</p><p>又叫做耗时任务，异步任务由JavaScript 委托给宿主环境进行执行</p><p><strong>当异步任务执行完成后，会通知JavaScript主线程执行异步任务的回调函数</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/09/27/WwmuyF8K2YHa3JO.png" alt="Snipaste_2021-09-27_18-08-47.png"></p><p><strong>JavaScript 主线程从 “任务队列” 中读取异步任务的回调函数，放到执行栈中依次执行。</strong></p><p>这个过程是循环不断的，所以整个的这种运行机制又称为 <strong>EventLoop</strong></p></li></ul><h1 id="宏任务与微任务"><a href="#宏任务与微任务" class="headerlink" title="宏任务与微任务"></a>宏任务与微任务</h1><hr><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 循环机制</span></span><br><span class="line"><span class="string">` 宏任务 --> 渲染 --> 宏任务 --> 渲染 --> 渲染．`</span></span><br></pre></td></tr></table></figure><p><a href="https://juejin.cn/post/6994265017595985956">https://juejin.cn/post/6994265017595985956</a></p><p>当 宏任务执行完，会在渲染前，将执行期间所产生的所有 微任务都执行完**</p><p><strong>在当前的微任务没有执行完成时，是不会执行下一个宏任务的。</strong></p><h3 id="宏任务"><a href="#宏任务" class="headerlink" title="宏任务"></a>宏任务</h3><table><thead><tr><th align="center">#</th><th>浏览器</th></tr></thead><tbody><tr><td align="center">I/O</td><td>✅</td></tr><tr><td align="center">setTimeOut</td><td>✅</td></tr><tr><td align="center">setInterval</td><td>✅</td></tr><tr><td align="center">setImmediate</td><td></td></tr><tr><td align="center">requestAnimationFrame</td><td>✅</td></tr></tbody></table><h3 id="微任务"><a href="#微任务" class="headerlink" title="微任务"></a>微任务</h3><table><thead><tr><th align="center">#</th><th>浏览器</th></tr></thead><tbody><tr><td align="center">process.nextTick</td><td>❌</td></tr><tr><td align="center">MutationObserver</td><td>✅</td></tr><tr><td align="center">Promise.then catch finally</td><td>✅</td></tr></tbody></table>]]></content>
<tags>
<tag> 前端技术 </tag>
</tags>
</entry>
<entry>
<title>nextTick</title>
<link href="/2021/10/04/Vue%20-%20nexttick/"/>
<url>/2021/10/04/Vue%20-%20nexttick/</url>
<content type="html"><![CDATA[<h1 id="nextTick"><a href="#nextTick" class="headerlink" title="nextTick"></a>nextTick</h1><ul><li><h4 id="nexttick官方定义"><a href="#nexttick官方定义" class="headerlink" title="nexttick官方定义"></a>nexttick官方定义</h4></li></ul><blockquote><p>Vue.nextTick([callback, context])</p><p>参数：<br> {Function} [callback]<br> {Object} [context]</p><p><code>在下次DOM更新循环结束之后执行延迟回调.</code><br><code> 在修改数据之后立即使用这个方法， 获取更新之后的DOM</code></p></blockquote><blockquote><p><code>Vue.nextTick</code>用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调函数，那么将返回<code>promise</code>对象。</p></blockquote><ul><li><h4 id="代码示例"><a href="#代码示例" class="headerlink" title="代码示例"></a>代码示例</h4></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 修改数据</span></span><br><span class="line">vm.msg = <span class="string">'Hello world'</span></span><br><span class="line"><span class="comment">// DOM 还没有更新</span></span><br><span class="line">Vue.nextTick( <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作为一个 Promise 使用 </span></span><br><span class="line">Vue.nextTick()</span><br><span class="line"> .then(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// DOM 更新了</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>Linux命令</title>
<link href="/2021/09/30/Linux%E5%91%BD%E4%BB%A4/"/>
<url>/2021/09/30/Linux%E5%91%BD%E4%BB%A4/</url>
<content type="html"><![CDATA[<h1 id="Linux命令"><a href="#Linux命令" class="headerlink" title="Linux命令"></a>Linux命令</h1><hr><p><strong>Linux命令大全</strong>：<a href="https://www.runoob.com/linux/linux-command-manual.html">https://www.runoob.com/linux/linux-command-manual.html</a></p><h3 id="终端快捷键"><a href="#终端快捷键" class="headerlink" title="终端快捷键"></a>终端快捷键</h3><blockquote><p>Ctrl + Alt + t 打开终端命令行</p><p>Ctrl + Shift + t </p><p>Ctrl + Shift + = 放大终端窗口的字体显示</p><p>Ctrl + - 缩小终端窗口的字体显示</p></blockquote><h3 id="查看目录命令"><a href="#查看目录命令" class="headerlink" title="查看目录命令"></a>查看目录命令</h3><table><thead><tr><th align="center">命令</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">ls</td><td align="center">查看当前目录信息</td></tr><tr><td align="center">ls -l</td><td align="center">以列表方式显示</td></tr><tr><td align="center">ls -h</td><td align="center">以大小单位显示，默认是字节</td></tr><tr><td align="center">ls -a</td><td align="center">显示隐藏文件和隐藏目录</td></tr><tr><td align="center">tree</td><td align="center">以树状方式显示目录信息</td></tr><tr><td align="center">pwd</td><td align="center">查看当前目录路径</td></tr><tr><td align="center">clear</td><td align="center">清除终端内容</td></tr><tr><td align="center">which</td><td align="center">查看命令位置 which [命令]</td></tr></tbody></table><p>ls -l 命令目录信息详情:</p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/10/29/uhqSNLQXC9v5OpY.png" alt="image.png"></p><h3 id="切换目录命令的使用"><a href="#切换目录命令的使用" class="headerlink" title="切换目录命令的使用"></a>切换目录命令的使用</h3><table><thead><tr><th align="center">命令</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">cd 目录</td><td align="center">切换到指定目录</td></tr><tr><td align="center">cd ~</td><td align="center">切换到当前用户的主目录</td></tr><tr><td align="center">cd ..</td><td align="center">切换到上一级目录</td></tr><tr><td align="center">cd .</td><td align="center">切换到当前目录</td></tr><tr><td align="center">cd -</td><td align="center">切换到上一次目录</td></tr></tbody></table><h3 id="创建、删除文件及目录命令的使用-基本使用"><a href="#创建、删除文件及目录命令的使用-基本使用" class="headerlink" title="创建、删除文件及目录命令的使用(基本使用)"></a>创建、删除文件及目录命令的使用(基本使用)</h3><table><thead><tr><th align="center">命令</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">touch 文件名</td><td align="center">创建指定文件</td></tr><tr><td align="center">mkdir 目录名</td><td align="center">创建目录(文件夹)</td></tr><tr><td align="center">rm 文件名 or rm -r 目录</td><td align="center">删除指定文件或者目录</td></tr><tr><td align="center">rmdir 目录名</td><td align="center">删除空目录</td></tr></tbody></table><h3 id="rm【删除】"><a href="#rm【删除】" class="headerlink" title="rm【删除】"></a>rm【删除】</h3><table><thead><tr><th align="center">命令选项</th><th align="center">说明</th><th align="center">语法</th></tr></thead><tbody><tr><td align="center">rm</td><td align="center">删除文件、删除目录</td><td align="center">rm 文件</td></tr><tr><td align="center">-i</td><td align="center">交互式提示</td><td align="center">rm 文件 -i</td></tr><tr><td align="center">-r</td><td align="center">递归删除目录及其内容</td><td align="center">rm 目录 -r</td></tr><tr><td align="center">-f</td><td align="center">强制删除，忽略不存在的文件，无需提示</td><td align="center">rm 文件 -f</td></tr><tr><td align="center">-d</td><td align="center">删除空目录</td><td align="center">rm 目录 -d</td></tr></tbody></table><h3 id="cp【拷贝】"><a href="#cp【拷贝】" class="headerlink" title="cp【拷贝】"></a>cp【拷贝】</h3><table><thead><tr><th align="center">命令选项</th><th align="center">说明</th><th align="center">语法</th></tr></thead><tbody><tr><td align="center">cp</td><td align="center">拷贝文件、拷贝目录</td><td align="center">cp 要拷贝的文件 拷贝完的文件</td></tr><tr><td align="center">-i</td><td align="center">交互式提示</td><td align="center">cp -i oldcopy.txt new.txt</td></tr><tr><td align="center">-r</td><td align="center">递归拷贝目录及其内容</td><td align="center">cp -r oldcopy.txt new.txt</td></tr><tr><td align="center">-v</td><td align="center">显示拷贝后的路径描述</td><td align="center">cp -v oldcopy.txt new.txt</td></tr><tr><td align="center">-a</td><td align="center">保留文件的原有权限</td><td align="center">cp -a oldcopy.txt new.txt</td></tr></tbody></table><h3 id="mv【移动，重命名】"><a href="#mv【移动，重命名】" class="headerlink" title="mv【移动，重命名】"></a>mv【移动，重命名】</h3><table><thead><tr><th align="center">命令选项</th><th align="center">说明</th><th align="center">语法</th></tr></thead><tbody><tr><td align="center">mv</td><td align="center">移动文件、移动目录、重命名</td><td align="center"></td></tr><tr><td align="center">-i</td><td align="center">交互式提示</td><td align="center">cp -i oldcopy.txt new.txt</td></tr><tr><td align="center">-v</td><td align="center">显示移动后的路径描述</td><td align="center">cp -v oldcopy.txt new.txt</td></tr></tbody></table><h3 id="重定向"><a href="#重定向" class="headerlink" title="重定向"></a>重定向</h3><h5 id="输出重定向命令：-gt"><a href="#输出重定向命令：-gt" class="headerlink" title="输出重定向命令：>"></a>输出重定向命令：></h5><p>Linux允许将命令执行结果重定向到一个文件，本应显示在终端上的内容保存到指定文件中</p><p>注意： <code>>输出重定向会覆盖原来的内容，>>输出重定向则会追加到文件的尾部。</code></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/10/29/8to6uQ3UgWHrd9D.png" alt="image.png"></p><h3 id="grep【文本搜索】"><a href="#grep【文本搜索】" class="headerlink" title="grep【文本搜索】"></a>grep【文本搜索】</h3><p>Linux系统中grep命令是一种强大的文本搜索工具，grep允许对文本文件进行模式查找。如果找到匹配模式， grep打印包含模式的所有行。</p><p>可以在字符中启用正则的方式去查找. 如: grep -n ‘m$’ test.txt</p><table><thead><tr><th align="center">选项</th><th align="center">含义</th></tr></thead><tbody><tr><td align="center">grep</td><td align="center">grep [-选项] ‘搜索内容串’文件名</td></tr><tr><td align="center">-v</td><td align="center">显示不包含匹配文本的所有行（相当于求反）</td></tr><tr><td align="center">-n</td><td align="center">显示匹配行及行号</td></tr><tr><td align="center">-i</td><td align="center">忽略大小写</td></tr></tbody></table><p><strong>演习:</strong></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/10/29/gT69Qu8pGYNrMdo.png" alt="image.png"></p><h3 id="find【查找文件】"><a href="#find【查找文件】" class="headerlink" title="find【查找文件】"></a>find【查找文件】</h3><p>find命令功能非常强大，通常用来在特定的目录下搜索符合条件的文件，也可以用来搜索特定用户属主的文件。</p><table><thead><tr><th align="center">命令</th><th align="center">含义</th></tr></thead><tbody><tr><td align="center">find ./ -name test.sh</td><td align="center">查找当前目录下所有名为test.sh的文件</td></tr><tr><td align="center">find ./ -name ‘*.sh’</td><td align="center">查找当前目录下所有后缀为.sh的文件</td></tr><tr><td align="center">find ./ -name “[A-Z]*”</td><td align="center">查找当前目录下所有以大写字母开头的文件</td></tr><tr><td align="center">find /tmp -size 2M</td><td align="center">查找在/tmp 目录下等于2M的文件</td></tr><tr><td align="center">find /tmp -size +2M</td><td align="center">查找在/tmp 目录下大于2M的文件</td></tr><tr><td align="center">find /tmp -size -2M</td><td align="center">查找在/tmp 目录下小于2M的文件</td></tr><tr><td align="center">find ./ -size +4k -size -5M</td><td align="center">查找当前目录下大于4k，小于5M的文件</td></tr><tr><td align="center">find ./ -perm 777</td><td align="center">查找当前目录下权限为 777 的文件或目录</td></tr></tbody></table><h3 id="chmod【修改文件权限】"><a href="#chmod【修改文件权限】" class="headerlink" title="chmod【修改文件权限】"></a>chmod【修改文件权限】</h3><table><thead><tr><th align="center">文件权限</th><th align="center">含义</th></tr></thead><tbody><tr><td align="center">r</td><td align="center">read 表示可读取，对于一个目录，如果没有r权限，那么就意味着不能通过ls查看这个目录的内容。</td></tr><tr><td align="center">w</td><td align="center">write 表示可写入，对于一个目录，如果没有w权限，那么就意味着不能在目录下创建新的文件。</td></tr><tr><td align="center">x</td><td align="center">excute 表示可执行，对于一个目录，如果没有x权限，那么就意味着不能通过cd进入这个目录。</td></tr></tbody></table><p>chmod 修改文件权限有两种使用格式：字母法与数字法。</p><h4 id="字母法：chmod-u-g-o-a-rwx-文件"><a href="#字母法：chmod-u-g-o-a-rwx-文件" class="headerlink" title="字母法：chmod u/g/o/a +/-/= rwx 文件"></a>字母法：chmod u/g/o/a +/-/= rwx 文件</h4><table><thead><tr><th>[ u/g/o/a ]</th><th>含义</th></tr></thead><tbody><tr><td>u</td><td>user 表示该文件的所有者</td></tr><tr><td>g</td><td>group 表示与该文件的所有者属于同一组( group )者，即用户组</td></tr><tr><td>o</td><td>other 表示其他以外的人</td></tr><tr><td>a</td><td>all 表示这三者皆是</td></tr></tbody></table><table><thead><tr><th>[ +-= ]</th><th>含义</th></tr></thead><tbody><tr><td>+</td><td>增加权限</td></tr><tr><td>-</td><td>撤销权限</td></tr><tr><td>=</td><td>设定权限</td></tr></tbody></table><h4 id="数字法：“rwx”-这些权限也可以用数字来代替"><a href="#数字法：“rwx”-这些权限也可以用数字来代替" class="headerlink" title="数字法：“rwx” 这些权限也可以用数字来代替"></a>数字法：“rwx” 这些权限也可以用数字来代替</h4><table><thead><tr><th>字母</th><th>说明</th></tr></thead><tbody><tr><td>r</td><td>读取权限，数字代号为 “4”</td></tr><tr><td>w</td><td>写入权限，数字代号为 “2”</td></tr><tr><td>x</td><td>执行权限，数字代号为 “1”</td></tr><tr><td>-</td><td>不具任何权限，数字代号为 “0”</td></tr></tbody></table><p>如执行：chmod u=rwx,g=rx,o=r filename 就等同于：chmod u=7,g=5,o=4 filename</p><p>chmod <code>751</code> file：</p><ul><li>文件所有者：<strong>读、写、执行权限</strong></li><li>同组用户：<strong>读、执行的权限</strong></li><li>其它用户：<strong>执行的权限</strong></li></ul><blockquote><p>注意：如果想递归所有目录加上相同权限，需要加上参数“ -R ”。 如：chmod 777 test/ -R 递归 test 目录下所有文件加 777 权限</p></blockquote><h3 id="打包"><a href="#打包" class="headerlink" title="打包"></a>打包</h3><h6 id="打包命令："><a href="#打包命令：" class="headerlink" title="打包命令："></a>打包命令：</h6><p>tar [-cvf] 解压后的文件名 解压后的路径</p><h6 id="解包命令："><a href="#解包命令：" class="headerlink" title="解包命令："></a>解包命令：</h6><p>tar [-xvf] 需解包的文件名 </p><p><code>tar</code> 选项说明</p><p>注意：<code>f</code> 选项必须放在最后，其他选项顺序可以随意</p><table><thead><tr><th align="center">含义</th><th align="center">选项</th></tr></thead><tbody><tr><td align="center">生成档案文件，创建打包文件</td><td align="center">c</td></tr><tr><td align="center">解开档案文件</td><td align="center">x</td></tr><tr><td align="center">列出归档解档的详细过程，显示进度</td><td align="center">v</td></tr><tr><td align="center">指定档案文件名称，f 后面一定是 .tar 文件，所以必须放选项最后</td><td align="center">f</td></tr></tbody></table><h3 id="压缩-解压缩"><a href="#压缩-解压缩" class="headerlink" title="压缩 / 解压缩"></a>压缩 / 解压缩</h3><h4 id="gzip"><a href="#gzip" class="headerlink" title="gzip"></a>gzip</h4><p>tar与gzip命令结合可以使用实现文件打包和压缩</p><p>用 <code>gzip</code> 压缩 <code>tar</code> 打包后的文件，其扩展名一般用 <code>xxx.tar.gz</code></p><p>在 <code>tar</code> 命令中有一个选项 <strong>-z</strong> 可以调用 <code>gzip</code>，从而可以方便的实现压缩和解压缩的功能</p><h6 id="压缩文件"><a href="#压缩文件" class="headerlink" title="压缩文件"></a>压缩文件</h6><p>tar -zcvf 打包文件.tar.gz 被压缩的文件／路径…</p><h6 id="解压缩文件"><a href="#解压缩文件" class="headerlink" title="解压缩文件"></a>解压缩文件</h6><p>tar -zxvf 打包文件.tar.gz</p><h6 id="解压缩到指定路径"><a href="#解压缩到指定路径" class="headerlink" title="解压缩到指定路径"></a>解压缩到指定路径</h6><p>tar -zxvf 打包文件.tar.gz -C 目标路径</p><table><thead><tr><th align="center">选项</th><th align="center">含义</th></tr></thead><tbody><tr><td align="center">-C</td><td align="center">解压缩到指定目录，注意：要解压缩的目录必须存在</td></tr></tbody></table><h4 id="bzip2"><a href="#bzip2" class="headerlink" title="bzip2"></a>bzip2</h4><p><code>tar</code> 与 <code>bzip2</code> 命令结合可以使用实现文件 <strong>打包和压缩</strong>（用法和 <code>gzip</code> 一样）</p><p>在 <code>tar</code> 命令中有一个选项 <strong>-j</strong> 可以调用 <code>bzip2</code>，从而可以方便的实现压缩和解压缩的功能</p><h6 id="压缩文件-1"><a href="#压缩文件-1" class="headerlink" title="压缩文件"></a>压缩文件</h6><p>tar -jcvf 打包文件.tar.bz2 被压缩的文件／路径…</p><h6 id="解压缩文件-1"><a href="#解压缩文件-1" class="headerlink" title="解压缩文件"></a>解压缩文件</h6><p>tar -jxvf 打包文件.tar.bz2</p><h3 id="zip与unzip【文件压缩】"><a href="#zip与unzip【文件压缩】" class="headerlink" title="zip与unzip【文件压缩】"></a>zip与unzip【文件压缩】</h3><p>通过zip压缩文件的目标文件不需要指定扩展名，默认扩展名为zip。</p><h6 id="压缩文件："><a href="#压缩文件：" class="headerlink" title="压缩文件："></a>压缩文件：</h6><p>zip [-r] 目标文件(没有扩展名) 源文件</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">zip pyfile *.py</span><br></pre></td></tr></table></figure><h6 id="解压文件："><a href="#解压文件：" class="headerlink" title="解压文件："></a>解压文件：</h6><p>unzip -d 解压后目录文件 压缩文件</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">unzip pyfile.zip -d 指定目录</span><br></pre></td></tr></table></figure><h3 id="用户命令"><a href="#用户命令" class="headerlink" title="用户命令"></a>用户命令</h3><h5 id="切换到管理员账号"><a href="#切换到管理员账号" class="headerlink" title="切换到管理员账号"></a>切换到管理员账号</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo -s</span><br></pre></td></tr></table></figure><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/10/29/tmYIbveaynwxHkO.png" alt="image.png"></p><h5 id="设置用户密码：passwd"><a href="#设置用户密码：passwd" class="headerlink" title="设置用户密码：passwd"></a>设置用户密码：passwd</h5><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/10/29/Qz7wrItZX2Edyob.png" alt="image.png"></p><h5 id="退出用户exit"><a href="#退出用户exit" class="headerlink" title="退出用户exit"></a>退出用户exit</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">exit</span><br></pre></td></tr></table></figure><h5 id="查看登录用户：who"><a href="#查看登录用户：who" class="headerlink" title="查看登录用户：who"></a>查看登录用户：who</h5><table><thead><tr><th>选项</th><th>含义</th></tr></thead><tbody><tr><td>-q或–count</td><td>只显示用户的登录账号和登录用户的数量</td></tr><tr><td>-u或–heading</td><td>显示列标题</td></tr></tbody></table><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/10/29/82YP9oSIANpd4lD.png" alt="image.png"></p><h3 id="关机重启：reboot、shutdown、init"><a href="#关机重启：reboot、shutdown、init" class="headerlink" title="关机重启：reboot、shutdown、init"></a>关机重启：reboot、shutdown、init</h3><table><thead><tr><th>命令</th><th>含义</th></tr></thead><tbody><tr><td>reboot</td><td>重新启动操作系统</td></tr><tr><td>shutdown –r now</td><td>重新启动操作系统，shutdown会给别的用户提示</td></tr><tr><td>shutdown -h now</td><td>立刻关机，其中now相当于时间为0的状态</td></tr><tr><td>shutdown -h 20:25</td><td>系统在今天的20:25 会关机</td></tr><tr><td>shutdown -h +10</td><td>系统再过十分钟后自动关机</td></tr></tbody></table><h3 id="虚拟机磁盘满的问题"><a href="#虚拟机磁盘满的问题" class="headerlink" title="虚拟机磁盘满的问题"></a>虚拟机磁盘满的问题</h3><table><thead><tr><th align="center">命令</th><th align="center">含义</th></tr></thead><tbody><tr><td align="center">df -lh</td><td align="center">查看磁盘命令</td></tr><tr><td align="center">sudo apt-get install gparted</td><td align="center">安装管理虚拟机磁盘容量工具</td></tr></tbody></table>]]></content>
<tags>
<tag> Linux </tag>
</tags>
</entry>
<entry>
<title>man手册</title>
<link href="/2021/09/29/Linux%E5%91%BD%E4%BB%A4%E4%B9%8Bman%E6%89%8B%E5%86%8C/"/>
<url>/2021/09/29/Linux%E5%91%BD%E4%BB%A4%E4%B9%8Bman%E6%89%8B%E5%86%8C/</url>
<content type="html"><![CDATA[<h2 id="查看命令帮助方式-man手册"><a href="#查看命令帮助方式-man手册" class="headerlink" title="查看命令帮助方式(man手册)"></a>查看命令帮助方式(man手册)</h2><p><strong>man命令</strong>是Linux下的帮助指令，通过man指令可以查看Linux中的指令帮助、配置文件帮助和编程帮助等信息。</p><p><code>使用man ls 进入命令查看</code></p><p>详情原文档:<a href="https://www.linuxidc.com/Linux/2017-03/142407.htm">https://www.linuxidc.com/Linux/2017-03/142407.htm</a></p><h5 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">man(选项)(参数) 选项可有可无，但参数必须有。</span><br></pre></td></tr></table></figure><h6 id="选项"><a href="#选项" class="headerlink" title="选项"></a>选项</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">-a：在所有的man帮助手册中搜索；</span><br><span class="line">-f：等价于whatis指令，显示给定关键字的简短描述信息；</span><br><span class="line">-P：指定内容时使用分页程序；</span><br><span class="line">-M：指定man手册搜索的路径。</span><br></pre></td></tr></table></figure><h6 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">- 数字：指定从哪本man手册中搜索帮助；</span><br><span class="line">- 关键字：指定要搜索帮助的关键字。</span><br></pre></td></tr></table></figure><h5 id="说明格式"><a href="#说明格式" class="headerlink" title="说明格式:"></a><strong>说明格式:</strong></h5><blockquote><p> <strong>NAME</strong> 命令名称及功能简要说明</p><p> <strong>SYNOPSIS</strong> 用法说明，包括可用的选项</p><p> <strong>DESCRIPTION</strong> 命令功能的详细说明，可能包括每一个选项的意义</p><p> <strong>OPTIONS</strong> 说明每一项的意义</p><p> <strong>FILES</strong> 此命令相关的配置文件 </p><p> <strong>BUGS</strong> </p><p> <strong>EXAMPLES</strong> 使用示例</p><p> <strong>SEE ALSO</strong> 另外参照 </p></blockquote><table><thead><tr><th>操作键</th><th>说明</th></tr></thead><tbody><tr><td>空格</td><td>显示下一屏信息</td></tr><tr><td>回车</td><td>显示下一行信息</td></tr><tr><td>b</td><td>显示上一屏信息</td></tr><tr><td>f</td><td>显示下一屏信息</td></tr><tr><td>q</td><td>退出</td></tr></tbody></table>]]></content>
<tags>
<tag> Linux </tag>
</tags>
</entry>
<entry>
<title>linux系统安装Mysql</title>
<link href="/2021/09/25/linux%E5%AE%89%E8%A3%85mysql/"/>
<url>/2021/09/25/linux%E5%AE%89%E8%A3%85mysql/</url>
<content type="html"><![CDATA[<h1 id="linux安装mysql"><a href="#linux安装mysql" class="headerlink" title="linux安装mysql"></a>linux安装mysql</h1><hr><p>查阅文献：<a href="https://blog.csdn.net/qq_42468130/article/details/88595418">https://blog.csdn.net/qq_42468130/article/details/88595418</a></p><p><strong>前提 ： 如果有mysql环境 先行卸载之前的版本</strong></p><h3 id="卸载"><a href="#卸载" class="headerlink" title="卸载"></a>卸载</h3><ol><li><p>查看mysql的依赖项</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">dpkg --<span class="built_in">list</span>|grep mysql</span><br></pre></td></tr></table></figure></li><li><p>卸载</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get remove mysql-common</span><br></pre></td></tr></table></figure></li><li><p>卸载( 最后的版本数字根据自己具体的版本进行相应的修改 )</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get autoremove --purge mysql-server-<span class="number">5.7</span></span><br></pre></td></tr></table></figure></li><li><p>清除残留数据</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">dpkg -l|grep ^rc|awk <span class="string">'{print$2}'</span>|sudo xargs dpkg -P</span><br></pre></td></tr></table></figure></li><li><p>再次查看依赖项 <code>如果打印为空 说明依赖完全删除</code></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">dpkg --<span class="built_in">list</span>|grep mysql</span><br></pre></td></tr></table></figure><p><strong>若仍有其他残留内容，则继续清除剩余依赖项</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get autoremove --purge mysql-apt-config</span><br></pre></td></tr></table></figure></li><li><p>再次查看依赖项与目录文件</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 1.查看依赖项为空</span></span><br><span class="line">dpkg --<span class="built_in">list</span>|grep mysql</span><br><span class="line"><span class="comment"># 2.进入etc/mysql 目录查看是否有mysql这个文件内容</span></span><br><span class="line">cd /</span><br><span class="line">cd /etc/mysql </span><br></pre></td></tr></table></figure><p><strong>如果为空或没有这个文件 则已经完全删除</strong></p></li></ol><h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><ol><li><p>使用命令下载软件包</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install mysql-server</span><br></pre></td></tr></table></figure></li><li><p>查找默认用户名密码</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">cd /</span><br><span class="line">cd /etc/mysql</span><br><span class="line">sudo cat debian.cnf</span><br><span class="line"><span class="comment"># 其中的 user = xxxx 与 password = xxx 分别为你的账号与密码</span></span><br></pre></td></tr></table></figure></li><li><p>登录</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 语法： mysql -uxxx -pxxx </span></span><br><span class="line"><span class="comment"># xxx为上述查看到的用户与密码 如:</span></span><br><span class="line">mysql -umyname -p123456</span><br><span class="line"></span><br></pre></td></tr></table></figure><p><strong>登录成功后输入环境为 ：</strong> <code>mysql></code></p></li><li><p>修改密码</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 1. 使用mysql</span></span><br><span class="line">use mysql;</span><br><span class="line"><span class="comment"># 2. 修改密码（密码为括号引号包裹的区域 在里面更改你的密码）账号为最后的字符串'root'</span></span><br><span class="line">update user <span class="built_in">set</span> authentication_string = PASSWORD (<span class="string">' 密码 '</span>) where User=<span class="string">'root'</span>;</span><br><span class="line"><span class="comment"># 3. 更新密码</span></span><br><span class="line">update user <span class="built_in">set</span> plugin=<span class="string">'mysql_native_password'</span>;</span><br><span class="line"><span class="comment"># 4. 更新权限</span></span><br><span class="line">flush privileges;</span><br><span class="line"><span class="comment"># 5. 退出mysql</span></span><br><span class="line">quit;</span><br></pre></td></tr></table></figure></li><li><p>重启mysql</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo service mysql restart;</span><br></pre></td></tr></table></figure></li><li><p>重新登录</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql -u你的账号 -p你的密码</span><br></pre></td></tr></table></figure><p><strong>进入 <code>mysql></code> 环境后， 就可以开始你的mysql世界了~~</strong></p></li></ol><h3 id="问题解析"><a href="#问题解析" class="headerlink" title="问题解析"></a>问题解析</h3><h5 id="apt源出问题"><a href="#apt源出问题" class="headerlink" title="apt源出问题:"></a>apt源出问题:</h5><ol><li><p>进入 /etc/apt目录</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd /</span><br><span class="line">cd /etc/apt</span><br></pre></td></tr></table></figure></li><li><p>进入sources.list.d目录</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cd sources.<span class="built_in">list</span>.d</span><br></pre></td></tr></table></figure></li><li><p>把里面目录里的内容清空</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo rm *</span><br></pre></td></tr></table></figure></li><li><p>返回到apt目录</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cd..</span><br></pre></td></tr></table></figure></li><li><p>打开sources.list</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">sudo gedit sources.<span class="built_in">list</span></span><br><span class="line"></span><br><span class="line"><span class="comment">#输入密码</span></span><br><span class="line"><span class="comment">#OP</span></span><br></pre></td></tr></table></figure></li><li><p>把里面的文件替换</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic main restricted universe multiverse # deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic main restricted universe multiverse deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse # deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse # deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-security main restricted universe multiverse # deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse # deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse</span></span><br></pre></td></tr></table></figure><p>保存关闭。 </p><p>然后关闭终端 </p><p>重新打开终端 执行sudo apt-get update 就成功了</p></li></ol><p>**如果遇到Certifificate verifification failed: The certifificate is NOT trusted.错误 **</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 把sources.<span class="built_in">list</span>里的所有请求地址 改为http 然后再sudo apt-get update</span><br><span class="line"><span class="number">2.</span> 安装ca-certificates</span><br><span class="line"><span class="number">3.</span> 改为https 再sudo apt-get update</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Mysql </tag>
</tags>
</entry>
<entry>
<title>Linux目录结构</title>
<link href="/2021/09/22/Linux%E7%B3%BB%E7%BB%9F%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84/"/>
<url>/2021/09/22/Linux%E7%B3%BB%E7%BB%9F%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84/</url>
<content type="html"><![CDATA[<h1 id="Linux目录结构"><a href="#Linux目录结构" class="headerlink" title="Linux目录结构"></a>Linux目录结构</h1><hr><h4 id="linux中ls目录结构解释"><a href="#linux中ls目录结构解释" class="headerlink" title="linux中ls目录结构解释"></a>linux中ls目录结构解释</h4><p><strong>系统启动必须：</strong></p><ul><li><p><strong>/boot：</strong>存放的启动Linux 时使用的内核文件，包括连接文件以及镜像文件。</p></li><li><p><strong>/etc：</strong>存放<strong>所有</strong>的系统需要的<strong>配置文件</strong>和<strong>子目录列表，</strong>更改目录下的文件可能会导致系统不能启动。</p></li><li><p><strong>/lib</strong>：存放基本代码库（比如c++库），其作用类似于Windows里的DLL文件。几乎所有的应用程序都需要用到这些共享库。</p></li><li><p><strong>/sys</strong>： 这是linux2.6内核的一个很大的变化。该目录下安装了2.6内核中新出现的一个文件系统 sysfs 。sysfs文件系统集成了下面3种文件系统的信息：针对进程信息的proc文件系统、针对设备的devfs文件系统以及针对伪终端的devpts文件系统。该文件系统是内核设备树的一个直观反映。当一个内核对象被创建的时候，对应的文件和目录也在内核对象子系统中</p></li></ul><p><strong>指令集合：</strong></p><ul><li><p><strong>/bin：</strong>存放着最常用的程序和指令</p></li><li><p><strong>/sbin：</strong>只有系统管理员能使用的程序和指令。</p></li></ul><p><strong>外部文件管理：</strong></p><ul><li><p><strong>/dev ：</strong>Device(设备)的缩写, 存放的是Linux的外部设备。<strong>注意：</strong>在Linux中访问设备和访问文件的方式是相同的。</p></li><li><p><strong>/media</strong>：类windows的<strong>其他设备，</strong>例如U盘、光驱等等，识别后linux会把设备放到这个目录下。</p></li><li><p><strong>/mnt</strong>：临时挂载别的文件系统的，我们可以将光驱挂载在/mnt/上，然后进入该目录就可以查看光驱里的内容了。</p></li></ul><p><strong>临时文件：</strong></p><ul><li><p><strong>/run</strong>：是一个临时文件系统，存储系统启动以来的信息。当系统重启时，这个目录下的文件应该被删掉或清除。如果你的系统上有 /var/run 目录，应该让它指向 run。</p></li><li><p><strong>/lost+found</strong>：一般情况下为空的，系统非法关机后，这里就存放一些文件。</p></li><li><p><strong>/tmp</strong>：这个目录是用来存放一些临时文件的。</p></li></ul><p><strong>账户：</strong></p><ul><li><p><strong>/root</strong>：系统管理员的用户主目录。</p></li><li><p><strong>/home</strong>：用户的主目录，以用户的账号命名的。</p></li><li><p><strong>/usr</strong>：用户的很多应用程序和文件都放在这个目录下，类似于windows下的program files目录。</p></li><li><p><strong>/usr/bin：</strong>系统用户使用的应用程序与指令。</p></li><li><p><strong>/usr/sbin：</strong>超级用户使用的比较高级的管理程序和系统守护程序。</p></li><li><p><strong>/usr/src：</strong>内核源代码默认的放置目录。</p></li></ul><p><strong>运行过程中要用：</strong></p><ul><li><p><strong>/var</strong>：存放经常修改的数据，比如程序运行的日志文件（/var/log 目录下）。</p></li><li><p><strong>/proc</strong>：管理<strong>内存空间！</strong>虚拟的目录，是系统内存的映射，我们可以直接访问这个目录来，获取系统信息。这个目录的内容不在硬盘上而是在内存里，我们也可以直接修改里面的某些文件来做修改。</p></li></ul><p><strong>扩展用的：</strong></p><ul><li><p><strong>/opt</strong>：默认是空的，我们安装额外软件可以放在这个里面。</p></li><li><p><strong>/srv</strong>：存放服务启动后需要提取的数据<strong>（不用服务器就是空）</strong></p></li></ul><p>菜鸟教程原文章: <a href="https://www.runoob.com/linux/linux-system-contents.html">https://www.runoob.com/linux/linux-system-contents.html</a></p>]]></content>
<tags>
<tag> Linux </tag>
</tags>
</entry>
<entry>
<title>Axios语法</title>
<link href="/2021/09/11/axios/"/>
<url>/2021/09/11/axios/</url>
<content type="html"><![CDATA[<h1 id="AXIOS"><a href="#AXIOS" class="headerlink" title="AXIOS"></a>AXIOS</h1><p><code>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，向服务器发送AJAX请求进行数据交换</code></p><hr><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>使用 npm:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install axios</span><br></pre></td></tr></table></figure><p>使用 bower:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ bower install axios</span><br></pre></td></tr></table></figure><p>使用 cdn:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><script src=<span class="string">"https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"</span>></script></span><br></pre></td></tr></table></figure><h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><h5 id="默认发送"><a href="#默认发送" class="headerlink" title="默认发送"></a><em>默认发送</em></h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> axios({<span class="attr">url</span>:<span class="string">'https://www.fastmock.site/mock/a62b6007be40808b2edb8a8a3fb54c6a/api/book'</span>})</span><br><span class="line"> .then(<span class="function"><span class="params">res</span> =></span>{ <span class="built_in">console</span>.log(res.data.data.list);})</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h5 id="使用get发送无参请求"><a href="#使用get发送无参请求" class="headerlink" title="使用get发送无参请求"></a><em>使用get发送无参请求</em></h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><script> axios({<span class="attr">url</span>:<span class="string">'https://www.fastmock.site/mock/a62b6007be40808b2edb8a8a3fb54c6a/api/book'</span>,</span><br><span class="line"> <span class="attr">method</span>:<span class="string">'get'</span>})</span><br><span class="line"> .then(<span class="function"><span class="params">res</span> =></span>{ <span class="built_in">console</span>.log(res.data.data.list);})</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h5 id="通过axios使用get发送有参请求"><a href="#通过axios使用get发送有参请求" class="headerlink" title="通过axios使用get发送有参请求"></a><em>通过axios使用get发送有参请求</em></h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.url地址后添加格式 ？查询键:'键值'</span></span><br><span class="line"> <script> axios({<span class="attr">url</span>:<span class="string">'https://www.fastmock.site/mock/a62b6007be40808b2edb8a8a3fb54c6a/api/book?id:999'</span>, })</span><br><span class="line"> .then(<span class="function"><span class="params">res</span>=></span><span class="built_in">console</span>.log(res))</span><br><span class="line"> </script></span><br><span class="line"><span class="comment">// 2.通过axios内置参数 params</span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span> axios({url:'https://www.fastmock.site/mock/a62b6007be40808b2edb8a8a3fb54c6a/api/book,</span></span><br><span class="line"><span class="xml"> params:{ id:1002 }</span></span><br><span class="line"><span class="xml"> }).then(res=>console.log(res))</span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><h5 id="使用post发送无参请求"><a href="#使用post发送无参请求" class="headerlink" title="使用post发送无参请求"></a><em>使用post发送无参请求</em></h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> axios({<span class="attr">url</span>:<span class="string">'https://www.fastmock.site/mock/5130d2d2fbd00f0defbe3da6e10cd169/books/serach'</span>,</span><br><span class="line"> <span class="attr">method</span>:<span class="string">'post'</span>})</span><br><span class="line"> .then(<span class="function"><span class="params">res</span> =></span>{ <span class="built_in">console</span>.log(res.data.data);})</span><br><span class="line"> </script></span><br></pre></td></tr></table></figure><h5 id="使用axios发送post发送有参请求"><a href="#使用axios发送post发送有参请求" class="headerlink" title="使用axios发送post发送有参请求"></a><em>使用axios发送post发送有参请求</em></h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> axios({<span class="attr">url</span>:<span class="string">'https://www.fastmock.site/mock/a62b6007be40808b2edb8a8a3fb54c6a/api/tests'</span>,</span><br><span class="line"> <span class="attr">method</span>:<span class="string">'post'</span>, </span><br><span class="line"> <span class="attr">data</span>:<span class="string">'忽如寄'</span>})</span><br><span class="line"> .then(<span class="function"><span class="params">res</span> =></span>{ <span class="built_in">console</span>.log(res.data.data);})</span><br><span class="line"> </script></span><br></pre></td></tr></table></figure><h2 id="axios基本使用"><a href="#axios基本使用" class="headerlink" title="axios基本使用"></a>axios基本使用</h2><h5 id="使用axios-get发送无参请求"><a href="#使用axios-get发送无参请求" class="headerlink" title="使用axios.get发送无参请求"></a>使用axios.get发送无参请求</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><script> axios.get(<span class="string">'https://www.fastmock.site/mock/a62b6007be40808b2edb8a8a3fb54c6a/api/book'</span>)</span><br><span class="line"> .then(<span class="function"><span class="params">res</span> =></span> <span class="built_in">console</span>.log(res.data.desc))</span><br><span class="line"> .catch(<span class="function"><span class="params">err</span> =></span> <span class="built_in">console</span>.warn(<span class="string">'失败了'</span> +err))</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h5 id="使用axios-get发送有参请求"><a href="#使用axios-get发送有参请求" class="headerlink" title="使用axios.get发送有参请求"></a><em>使用axios.get发送有参请求</em></h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// get的第二个参数为对象 同时使用params查询的参数也要为对象形式</span></span><br><span class="line"><script></span><br><span class="line"> axios.get(<span class="string">'https://www.fastmock.site/mock/a62b6007be40808b2edb8a8a3fb54c6a/api/book'</span>,</span><br><span class="line"> {<span class="attr">params</span>:{<span class="attr">id</span>:<span class="number">1002</span>}})</span><br><span class="line"> .then(<span class="function"><span class="params">res</span> =></span> <span class="built_in">console</span>.log(res.data.desc))</span><br><span class="line"> .catch(<span class="function"><span class="params">err</span> =></span> <span class="built_in">console</span>.warn(<span class="string">'失败了'</span> +err))</span><br><span class="line"> </script></span><br></pre></td></tr></table></figure><h5 id="使用axios-post发送有参请求-–-只修改前端代码"><a href="#使用axios-post发送有参请求-–-只修改前端代码" class="headerlink" title="使用axios.post发送有参请求 – 只修改前端代码"></a><em>使用axios.post发送有参请求</em> <strong>– 只修改前端代码</strong></h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用post用这种方式比较安全，多个参数之间用 && 隔开</span></span><br><span class="line"><script></span><br><span class="line"> axios.post(<span class="string">'https://www.fastmock.site/mock/5130d2d2fbd00f0defbe3da6e10cd169/books/serach'</span>,</span><br><span class="line"> <span class="string">"id:1002&&bookname:'Web前端开发实战"</span>)</span><br><span class="line"> .then(<span class="function"><span class="params">res</span> =></span> {<span class="built_in">console</span>.log(res.data.data.list)})</span><br><span class="line"> .catch(<span class="function"><span class="params">err</span> =></span> <span class="built_in">console</span>.log(err))</span><br><span class="line"> </script></span><br></pre></td></tr></table></figure><h5 id="使用data传递数据-后台需要将axios自动装换的json数据转换为java对象-–-修改后台代码"><a href="#使用data传递数据-后台需要将axios自动装换的json数据转换为java对象-–-修改后台代码" class="headerlink" title="使用data传递数据 后台需要将axios自动装换的json数据转换为java对象 – 修改后台代码"></a>使用data传递数据 后台需要将axios自动装换的json数据转换为java对象 <strong>– 修改后台代码</strong></h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> axios.post(<span class="string">'https://www.fastmock.site/mock/5130d2d2fbd00f0defbe3da6e10cd169/books/serach'</span>,{<span class="attr">bookname</span>:<span class="string">'Web前端开发实战'</span>})</span><br><span class="line"> .then(<span class="function"><span class="params">res</span> =></span> {<span class="built_in">console</span>.log(res.data.data.list)})</span><br><span class="line"> .catch(<span class="function"><span class="params">err</span> =></span> <span class="built_in">console</span>.log(err))</span><br><span class="line"> </script></span><br><span class="line"><span class="string">` 接收参数添加 @requestBody 注解`</span></span><br></pre></td></tr></table></figure><h2 id="axios并发请求"><a href="#axios并发请求" class="headerlink" title="axios并发请求"></a>axios并发请求</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 并发同时返回多个接口参数</span></span><br><span class="line"> <script></span><br><span class="line"> axios.all([</span><br><span class="line"> axios.get(<span class="string">'https://www.escook.cn/api/cart'</span>),</span><br><span class="line"> axios.get(<span class="string">'https://www.escook.cn/api/cart'</span>, { <span class="attr">params</span>: { <span class="attr">id</span>: <span class="number">2</span> } }),</span><br><span class="line"> ])</span><br><span class="line"> .then(<span class="function"><span class="params">res</span> =></span> <span class="built_in">console</span>.log(res[<span class="number">0</span>], res[<span class="number">1</span>]))</span><br><span class="line"> .catch(<span class="function"><span class="params">err</span> =></span> <span class="built_in">console</span>.log(err))</span><br><span class="line"> </script></span><br><span class="line"></span><br><span class="line"><span class="comment">// 在then中使用 axios.spread 方法，可让返回的数据分开易看</span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> axios.all([</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> axios.get(<span class="string">'https://www.escook.cn/api/cart'</span>),</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> axios.get(<span class="string">'https://www.escook.cn/api/cart'</span>, { <span class="attr">params</span>: { <span class="attr">id</span>: <span class="number">2</span> } }),</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> ])</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> .then(</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> axios.spread(<span class="function">(<span class="params">res1, res2</span>) =></span> {</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="built_in">console</span>.log(res1);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="built_in">console</span>.log(res2);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> })</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> ).catch(<span class="function"><span class="params">err</span> =></span> <span class="built_in">console</span>.log(err))</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> </span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><h2 id="axios全局配置"><a href="#axios全局配置" class="headerlink" title="axios全局配置"></a>axios全局配置</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"> <script></span><br><span class="line"> <span class="comment">// 配置全局属性</span></span><br><span class="line"> axios.defaults.baseURL = <span class="string">"https://www.escook.cn/api"</span>;</span><br><span class="line"><span class="comment">// 设置超时返回指定</span></span><br><span class="line"> axios.defaults.timeout = <span class="number">5000</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在全局配置的基础上进行网络请求 -> get</span></span><br><span class="line"> axios.get(<span class="string">'cart'</span>)</span><br><span class="line"> .then(<span class="function"><span class="params">res</span>=></span><span class="built_in">console</span>.log(res))</span><br><span class="line"><span class="comment">// 在全局配置的基础上进行网络请求 -> post</span></span><br><span class="line"> axios.post(<span class="string">'***'</span>)</span><br><span class="line"> .then(<span class="function"><span class="params">res</span>=></span><span class="built_in">console</span>.log(res))</span><br><span class="line"> .catch(<span class="function"><span class="params">err</span>=></span><span class="built_in">console</span>.log(err))</span><br><span class="line"> </script></span><br></pre></td></tr></table></figure><h2 id="axios实例"><a href="#axios实例" class="headerlink" title="axios实例"></a>axios实例</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> <span class="comment">// 创建axios实例</span></span><br><span class="line"> <span class="keyword">let</span> newVar = axios.create({</span><br><span class="line"> <span class="attr">baseURL</span>:<span class="string">'https://www.escook.cn/api'</span>,</span><br><span class="line"> <span class="attr">timeout</span>: <span class="number">5000</span></span><br><span class="line"> })</span><br><span class="line"> newVar({</span><br><span class="line"> <span class="attr">url</span>:<span class="string">'cart'</span></span><br><span class="line"> }).then(<span class="function"><span class="params">res</span>=></span><span class="built_in">console</span>.log(res))</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h2 id="axios拦截器"><a href="#axios拦截器" class="headerlink" title="axios拦截器"></a>axios拦截器</h2><p><strong>拦截器的作用：用于我们在网络请求的时候发起请求或者响应时对操作进行响应的处理</strong></p><p>场景：发起请求时可以添加页面加载的动画 强制登录 响应时进行相应的数据处理</p><p>axios提供了两大类拦截器</p><p>请求方向的拦截( 成功请求，失败请求 ) </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> axios.interceptors.request.use(<span class="function"><span class="params">config</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'进入拦截器'</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(config);</span><br><span class="line"> <span class="keyword">return</span> config; <span class="comment">// 放行请求</span></span><br><span class="line"> }),<span class="function"><span class="params">err</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.warn(<span class="string">'请求拦截失败'</span>);</span><br><span class="line"> <span class="built_in">console</span>.warn(err);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> axios.get(<span class="string">'https://www.escook.cn/api/cart'</span>)</span><br><span class="line"> .then(<span class="function"><span class="params">res</span>=></span><span class="built_in">console</span>.log(res))</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p>请求响应的拦截( 成功的, 失败的)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> axios.interceptors.response.use(<span class="function"><span class="params">config</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'进入响应截器'</span>);</span><br><span class="line"> <span class="keyword">return</span> config.data.list;</span><br><span class="line"> }), <span class="function"><span class="params">err</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.warn(<span class="string">'响应方向失败'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> axios.get(<span class="string">'https://www.escook.cn/api/cart'</span>)</span><br><span class="line"> .then(<span class="function"><span class="params">res</span> =></span> <span class="built_in">console</span>.log(res))</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h2 id="axios在vue中的模块封装"><a href="#axios在vue中的模块封装" class="headerlink" title="axios在vue中的模块封装"></a>axios在vue中的模块封装</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 通过封装者配置</span></span><br><span class="line"></span><br><span class="line"><span class="string">`封装的位置`</span> </span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">config, success, fail</span>) </span>{</span><br><span class="line"> axios({</span><br><span class="line"> <span class="attr">url</span>: config</span><br><span class="line"> }).then(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> success(res)</span><br><span class="line"> }).catch(<span class="function"><span class="params">err</span> =></span> {</span><br><span class="line"> fail(err)</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="string">`调用的位置`</span></span><br><span class="line"><span class="keyword">import</span> { request } <span class="keyword">from</span> <span class="string">"./network/request"</span>;</span><br><span class="line">request(<span class="string">'https://www.escook.cn/api/cart'</span>,</span><br><span class="line"> <span class="function"><span class="params">res</span> =></span> <span class="built_in">console</span>.log(res),</span><br><span class="line"> <span class="function"><span class="params">err</span> =></span> <span class="built_in">console</span>.log(err),</span><br><span class="line">)</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2.通过调用者配置</span></span><br><span class="line"></span><br><span class="line"><span class="string">`封装的位置`</span> </span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">config</span>) </span>{</span><br><span class="line"> axios.defaults.baseURL = <span class="string">"https://www.escook.cn/api/cart"</span></span><br><span class="line"> axios(config.url)</span><br><span class="line"> .then(</span><br><span class="line"> <span class="function"><span class="params">res</span> =></span> config.success(res)</span><br><span class="line"> )</span><br><span class="line"> .catch(</span><br><span class="line"> <span class="function"><span class="params">err</span> =></span> config.fail(err)</span><br><span class="line"> )</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="string">`调用的位置`</span></span><br><span class="line"><span class="keyword">import</span> { request } <span class="keyword">from</span> <span class="string">"./network/request"</span>;</span><br><span class="line">request({</span><br><span class="line"> <span class="attr">url</span>: <span class="string">'https://www.escook.cn/api/cart'</span>,</span><br><span class="line"> <span class="attr">success</span>: <span class="function"><span class="params">res</span> =></span> { <span class="built_in">console</span>.log(res) },</span><br><span class="line"> <span class="attr">fail</span>: <span class="function"><span class="params">err</span> =></span> { <span class="built_in">console</span>.log(err) }</span><br><span class="line">})</span><br></pre></td></tr></table></figure> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 3.使用Promise配置</span></span><br><span class="line"></span><br><span class="line"><span class="string">`封装的位置`</span> </span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">config</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>) =></span> {</span><br><span class="line"> <span class="keyword">let</span> newVar = axios.create({</span><br><span class="line"> <span class="attr">baseURL</span>: <span class="string">'https://www.escook.cn/api'</span>,</span><br><span class="line"> <span class="attr">timeout</span>: <span class="number">5000</span></span><br><span class="line"> });</span><br><span class="line"> newVar(config).then(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> resolve(res);</span><br><span class="line"> }).catch(<span class="function"><span class="params">err</span> =></span> {</span><br><span class="line"> reject(err)</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="string">`调用的位置`</span></span><br><span class="line"><span class="keyword">import</span> { request } <span class="keyword">from</span> <span class="string">'./network/request'</span></span><br><span class="line">request({</span><br><span class="line"> <span class="attr">url</span>:<span class="string">'cart'</span></span><br><span class="line">}).then(<span class="function"><span class="params">res</span> =></span> {<span class="built_in">console</span>.log(res)</span><br><span class="line">}).catch(<span class="function"><span class="params">err</span> =></span> <span class="built_in">console</span>.log(err))</span><br></pre></td></tr></table></figure><h5 id="终极方案-lt-推荐-gt"><a href="#终极方案-lt-推荐-gt" class="headerlink" title="终极方案<推荐>"></a>终极方案<推荐></h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`封装的位置`</span> </span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">config</span>)</span>{</span><br><span class="line"> <span class="keyword">let</span> newVar = axios.create({</span><br><span class="line"> <span class="attr">baseURL</span>:<span class="string">'https://www.escook.cn/api'</span>,</span><br><span class="line"> <span class="attr">timeout</span>: <span class="number">5000</span></span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">return</span> newVar(config)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="string">`调用的位置`</span></span><br><span class="line"><span class="keyword">import</span> { request } <span class="keyword">from</span> <span class="string">'./network/request'</span></span><br><span class="line">request({</span><br><span class="line"> <span class="attr">url</span>: <span class="string">'cart'</span></span><br><span class="line">}).then(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(res)</span><br><span class="line">}).catch(<span class="function"><span class="params">err</span> =></span> <span class="built_in">console</span>.log(err))</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> 前端技术 </tag>
</tags>
</entry>
<entry>
<title>Flow.js</title>
<link href="/2021/07/28/Js-Flow/"/>
<url>/2021/07/28/Js-Flow/</url>
<content type="html"><![CDATA[<h1 id="Flow"><a href="#Flow" class="headerlink" title="Flow"></a>Flow</h1><hr><p>参考文献：<a href="https://www.cnblogs.com/zhuzhenwei918/p/7150762.html">https://www.cnblogs.com/zhuzhenwei918/p/7150762.html</a></p><p>最全的手册：<a href="https://www.saltycrane.com/cheat-sheets/flow-type/latest/#builtins">https://www.saltycrane.com/cheat-sheets/flow-type/latest/#builtins</a></p><p>Flow.js是FaceBook发布的开源Javascript静态类型检查器。他给JavaScript提供了静态类型来提高开发人员的生产力和代码质量。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//查看全局安装的npm包</span></span><br><span class="line">npm list -g --depth <span class="number">0</span></span><br></pre></td></tr></table></figure><h4 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 第一步 安装初始化package.json文件</span></span><br><span class="line">yarn init --yes</span><br><span class="line"><span class="comment">// 第二步 安装flow依赖包</span></span><br><span class="line">yarn add flow-bin --dev</span><br><span class="line"><span class="comment">// 第三步 创建flow配置文件</span></span><br><span class="line">yarn flow init</span><br><span class="line"><span class="comment">// 第四步 启动flow服务</span></span><br><span class="line">yarn flow start</span><br><span class="line"><span class="comment">// 第五步 服务启动后，后续即可使用flow命令检查项目文件</span></span><br><span class="line">yarn flow</span><br><span class="line"><span class="comment">// 停止flow服务</span></span><br><span class="line">yarn flow stop</span><br><span class="line"><span class="comment">// 直接用flow check命令可以不启动服务做文件检查。</span></span><br><span class="line">yarn flow check</span><br></pre></td></tr></table></figure><h3 id="类型标注"><a href="#类型标注" class="headerlink" title="类型标注"></a>类型标注</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// @flow</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">square</span>(<span class="params">n: number</span>): <span class="title">number</span> </span>{</span><br><span class="line"> <span class="comment">//意为参数与返回值都必须为number类型</span></span><br><span class="line"><span class="keyword">return</span> n * n;</span><br><span class="line">}</span><br><span class="line">square(<span class="string">"2"</span>); <span class="comment">// Error!</span></span><br></pre></td></tr></table></figure><h3 id="完成编码过后自动移除类型注解"><a href="#完成编码过后自动移除类型注解" class="headerlink" title="完成编码过后自动移除类型注解"></a>完成编码过后自动移除类型注解</h3><h5 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a>方法一</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 安装模块</span></span><br><span class="line">yarn add flow-remove-types --dev</span><br><span class="line"><span class="comment">// 使用模块的命令行工具</span></span><br><span class="line">yarn flow-remove-types . -d dist <span class="comment">// .(当前目录[一般用src]) -d(转换) dist(指定目录) </span></span><br></pre></td></tr></table></figure><h5 id="方法二"><a href="#方法二" class="headerlink" title="方法二"></a>方法二</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.安装命令</span></span><br><span class="line">yarn add @babel/core @babel/cli @babel/preset-flow -dev</span><br><span class="line"><span class="comment">// @bable/core = bable的核心模块</span></span><br><span class="line"><span class="comment">// @babel/cli = babel工具，可以在命令行中直接使用命令完成编译</span></span><br><span class="line"><span class="comment">// @babel/preset-flow = 包含了转换flow类型注解的插件</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.项目根目录新建 <.babelrc> 文件</span></span><br><span class="line"><span class="comment">// 输入：</span></span><br><span class="line">{</span><br><span class="line"> <span class="string">"presets"</span>:[<span class="string">"@babel/preset-flow"</span>]</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 转换命令</span></span><br><span class="line">yarn babel src -d dist </span><br><span class="line"><span class="comment">// 意为把src中的所有文件转换到dist文件当中</span></span><br></pre></td></tr></table></figure><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><h4 id="基础变量"><a href="#基础变量" class="headerlink" title="基础变量"></a><code>基础变量</code></h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a: <span class="built_in">string</span> = <span class="string">'Hey'</span></span><br><span class="line"><span class="keyword">const</span> b: <span class="built_in">number</span> = <span class="number">100</span> <span class="comment">// NAN // Infinity</span></span><br><span class="line"><span class="keyword">const</span> c: <span class="built_in">boolean</span> = <span class="literal">true</span> <span class="comment">// false</span></span><br><span class="line"><span class="keyword">const</span> d: <span class="literal">null</span> = <span class="literal">null</span></span><br><span class="line"><span class="keyword">const</span> e: <span class="built_in">void</span> = <span class="literal">undefined</span></span><br><span class="line"><span class="keyword">const</span> f: symbol = <span class="built_in">Symbol</span>()</span><br></pre></td></tr></table></figure><h4 id="数组类型限制"><a href="#数组类型限制" class="headerlink" title="数组类型限制"></a><code>数组类型限制</code></h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.表示创建一个每一项值只能为数字的数组</span></span><br><span class="line"><span class="keyword">const</span> arr: <span class="built_in">Array</span><number> = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="comment">// or</span></span><br><span class="line"><span class="keyword">const</span> arr1: number[] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 表示固定长度的指定类型数组</span></span><br><span class="line"><span class="keyword">const</span> foo: [string,number] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br></pre></td></tr></table></figure><h3 id="对象类型限制"><a href="#对象类型限制" class="headerlink" title="对象类型限制"></a><code>对象类型限制</code></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个对象变量 里面存放对应的键值类型</span></span><br><span class="line"><span class="keyword">const</span> obj1: { <span class="attr">foo</span>: string, <span class="attr">bar</span>: number } = { <span class="attr">foo</span>: <span class="string">'string'</span>, <span class="attr">bar</span>: <span class="number">100</span> }</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在键后加 ？ 为可选可不选</span></span><br><span class="line"><span class="keyword">const</span> obj2: { foo?: string, <span class="attr">bar</span>: number } = { <span class="attr">bar</span>: <span class="number">100</span> }</span><br><span class="line"></span><br><span class="line"><span class="comment">// 可新建变量，后续再存放键值</span></span><br><span class="line"><span class="keyword">const</span> obj3 = {}</span><br><span class="line">obj3.key1 = <span class="string">'value1'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 新建变量规定键值后再存放</span></span><br><span class="line"><span class="keyword">const</span> obj3： { [number]: number} = {}</span><br><span class="line">obj3.key1 = <span class="number">100</span></span><br></pre></td></tr></table></figure><h4 id="函数类型限制"><a href="#函数类型限制" class="headerlink" title="函数类型限制"></a><code>函数类型限制</code></h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 指定实参必须为数字类型</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span> (<span class="params">a:number,b:number</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> a*b</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// ：number定义函数返回值只能为number类型</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>):<span class="title">number</span></span>{ </span><br><span class="line"> <span class="keyword">return</span> (<span class="keyword">typeof</span> number)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ：void定义函数返回值只能为undefined类型</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>): <span class="title">void</span></span>{ </span><br><span class="line"> <span class="keyword">return</span> (<span class="keyword">typeof</span> <span class="literal">undefined</span>)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置回调函数限制</span></span><br><span class="line"><span class="comment">// function foo(callback:(类型) => 返回值)</span></span><br><span class="line"><span class="comment">// 表示必须填入两个类型相对应的实参，返回值为undefined(不可有返回值)</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">callback:(string,number) => <span class="keyword">void</span></span>)</span>{</span><br><span class="line"> <span class="comment">// 回调函数所传入的实参</span></span><br><span class="line"> callback(<span class="string">'who am i'</span>, <span class="number">42</span>)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 调用回调函数</span></span><br><span class="line">foo(<span class="function"><span class="keyword">function</span>(<span class="params">str,n</span>)</span>{</span><br><span class="line"> <span class="comment">// str => string</span></span><br><span class="line"> <span class="comment">// n = number</span></span><br><span class="line"> <span class="string">`不可有返回值`</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><h4 id="特殊类型"><a href="#特殊类型" class="headerlink" title="特殊类型"></a><code>特殊类型</code></h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`字面量类型`</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 普通字面量，必须一一对应</span></span><br><span class="line"><span class="keyword">const</span> a: <span class="string">'Hey'</span> = <span class="string">'Hey'</span> </span><br><span class="line"><span class="comment">// 联合(或)类型 </span></span><br><span class="line"><span class="comment">// 选其一(值)</span></span><br><span class="line"><span class="keyword">const</span> b: <span class="string">'Hey'</span> | <span class="string">'Hello'</span> | <span class="string">'Hi'</span> = <span class="string">'Hello'</span></span><br><span class="line"><span class="comment">// 选其一(类型)</span></span><br><span class="line"><span class="keyword">const</span> c: string | number = <span class="string">'string'</span></span><br><span class="line"><span class="keyword">const</span> d: StringOrNumber = string | number</span><br><span class="line"></span><br><span class="line"><span class="string">`meybe`</span></span><br><span class="line"><span class="comment">// 问号为特定给予的undefined与null</span></span><br><span class="line"><span class="keyword">const</span> gender: ?number = <span class="literal">undefined</span> <span class="comment">// null // number </span></span><br><span class="line"><span class="comment">// 等同于</span></span><br><span class="line"><span class="keyword">const</span> gender: number | <span class="keyword">void</span> | <span class="literal">null</span> = <span class="literal">undefined</span> </span><br><span class="line"></span><br><span class="line"><span class="string">`mixed与any`</span></span><br><span class="line"><span class="comment">// 意为所有类型</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">passMixed</span>(<span class="params">value: mixed | any</span>)</span>{</span><br><span class="line"> passMixde(<span class="string">'可以是所有类型如：string number'</span>)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 区别:mixed为强类型 ，any为弱类型</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// --- any</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">passAny</span>(<span class="params">value: mixed</span>)</span>{</span><br><span class="line"> <span class="comment">// 可以直接使用如字符串的substr方法</span></span><br><span class="line"> value.substr(<span class="number">1</span>)</span><br><span class="line"> <span class="comment">// 也可以做算法运算</span></span><br><span class="line"> value. * value</span><br><span class="line">}</span><br><span class="line">PassAny(<span class="string">'string'</span>)；</span><br><span class="line">PassAny(<span class="number">100</span>)；</span><br><span class="line"></span><br><span class="line"><span class="comment">// --- mixed</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">passMixed</span>(<span class="params">value: mixed</span>)</span>{</span><br><span class="line"> <span class="comment">// 不可直接运算及使用方法</span></span><br><span class="line"> <span class="comment">// value. * value => X 在编译时报错</span></span><br><span class="line"> </span><br><span class="line"> <span class="comment">//必须先明确标注类型，才可使用对应方法`</span></span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">'string'</span> ){</span><br><span class="line"> value.substr(<span class="number">1</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">PassMixed(<span class="string">'string'</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 建议使用Mixed进行编译</span></span><br></pre></td></tr></table></figure><h4 id="环境API"><a href="#环境API" class="headerlink" title="环境API"></a>环境API</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">如： <span class="keyword">const</span> element：HTMLElement | <span class="literal">null</span> = <span class="built_in">document</span>.getElementById(<span class="string">'app'</span>)</span><br><span class="line"><span class="comment">// HTMlElement为flow下载时的临时文件（包）</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 环境API对应的声明文件</span></span><br><span class="line"><span class="attr">https</span>:<span class="comment">//github.com/facebook/flow/blob/main/lib/core.js</span></span><br><span class="line">https:<span class="comment">//github.com/facebook/flow/blob/main/lib/dom.js</span></span><br><span class="line">https:<span class="comment">//github.com/facebook/flow/blob/main/lib/bom.js</span></span><br><span class="line">https:<span class="comment">//github.com/facebook/flow/blob/main/lib/cssorm.js</span></span><br><span class="line">https:<span class="comment">//github.com/facebook/flow/blob/main/lib/node.js</span></span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title>Redis - Python交互</title>
<link href="/2021/07/11/Redis%E4%B8%8EPython%E4%BA%A4%E4%BA%92/"/>
<url>/2021/07/11/Redis%E4%B8%8EPython%E4%BA%A4%E4%BA%92/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstaticdata.yuanshihui.com%2Fdata%2FM00%2F6B%2F48%2FCIECAFtXNqyAJ117AABgsxRD-vs598.png&refer=http%3A%2F%2Fstaticdata.yuanshihui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641607439&t=3fe57771c8cbb3351a2c376bba6f5c00" alt="Redis"></p><h3 id="先导"><a href="#先导" class="headerlink" title="先导"></a>先导</h3><h4 id="Python导包"><a href="#Python导包" class="headerlink" title="Python导包"></a>Python导包</h4><p>进⼊虚拟环境py_django，联⽹安装包redis</p><blockquote><p><code>pip install redis</code></p><p><strong>如果pip不成功则用下面easy</strong></p><p><code>easy_install redis</code></p></blockquote><h4 id="文件中调用模块"><a href="#文件中调用模块" class="headerlink" title="文件中调用模块"></a><strong>文件中调用模块</strong></h4><p>引⼊模块</p><blockquote><p><code>from redis import *</code></p><p>本章主要用的是 redis模块中的 <code>StrictRedis对象</code></p></blockquote><h3 id="StrictRedis对象⽅法"><a href="#StrictRedis对象⽅法" class="headerlink" title="StrictRedis对象⽅法"></a>StrictRedis对象⽅法</h3><p><strong>通过init创建对象，指定参数host、port与指定的服务器和端⼝连接，<code>host默认为localhost</code>，<code>port默认为6379</code>，<code>db默认为0</code></strong></p><p><strong>语法：</strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 标准写法</span></span><br><span class="line">sr = StrictRedis(host=<span class="string">'localhost'</span>, port=<span class="number">6379</span>, db=<span class="number">0</span>)</span><br><span class="line"><span class="comment"># 简写</span></span><br><span class="line">sr = StrictRedis()</span><br></pre></td></tr></table></figure><p><em>根据不同的类型，拥有不同的实例⽅法可以调⽤，与redis命令对应，⽅法需要的参数与命令的参数⼀致</em></p><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/e059ca7725b3d8d3.png" alt="类型"></p><blockquote><p>本文基于Redis配置完集成的前提下操作 <a href="https://jiaoyanxia.github.io/2021/12/13/Redis%E9%85%8D%E7%BD%AE%E5%93%A8%E5%85%B5/"><code>未配置可前往配置哨兵</code></a></p></blockquote><h3 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h3><ul><li><input disabled="" type="checkbox"> <strong>前提是电脑或虚拟机的Redis得开启 不然无法访问</strong></li></ul><p><strong>可以在 StrictRedis 对象中添加 <code>decode_responses=True</code></strong> </p><p><strong>decode_responses=True属性可以把返回的数据 <code>自动decode处理 变成字符串</code></strong></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 第一步 导入StrictRedis对象</span></span><br><span class="line"><span class="keyword">from</span> redis <span class="keyword">import</span> StrictRedis</span><br><span class="line"></span><br><span class="line"><span class="comment"># 配置 StrictRedis 对象</span></span><br><span class="line">sr = StrictRedis(host=<span class="string">'localhost'</span>, port=<span class="number">6379</span>, db=<span class="number">0</span>, decode_responses=<span class="literal">True</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment"># 保存一个string类型的键为tname 值为 Shrimps 的数据</span></span><br><span class="line">result = sr.<span class="built_in">set</span>(<span class="string">'tname'</span>, <span class="string">'Shrimps'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看返回的结果</span></span><br><span class="line"><span class="built_in">print</span>(result) <span class="comment"># OK</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 获取tname的值</span></span><br><span class="line">name = sr.get(<span class="string">'tname'</span>)</span><br><span class="line"><span class="built_in">print</span>(<span class="string">f'tname is <span class="subst">{name}</span>'</span>) <span class="comment"># tname is Shrimps</span></span><br><span class="line"></span><br><span class="line"><span class="string">''' 获取我本地redis的第一个数据库的数据 '''</span></span><br><span class="line">one = sr.key()</span><br><span class="line"><span class="built_in">print</span>(one) <span class="comment"># 如：tsex, tage, tname</span></span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Redis </tag>
</tags>
</entry>
<entry>
<title>Python协程</title>
<link href="/2021/06/12/Python%E5%8D%8F%E7%A8%8B/"/>
<url>/2021/06/12/Python%E5%8D%8F%E7%A8%8B/</url>
<content type="html"><![CDATA[<h1 id="协程"><a href="#协程" class="headerlink" title="协程"></a>协程</h1><hr><p><strong>协程是python个中另外一种实现多任务的方式</strong>。在一个线程中的某个函数，可以在任何地方保存当前函数的一些临时变量等信息，然后切换到另外一个函数中执行，注意不是通过调用函数的方式做到的，并且切换的次数以及什么时候再切换到原来的函数都由开发者自己确定</p><h4 id="简单实现协程"><a href="#简单实现协程" class="headerlink" title="简单实现协程"></a>简单实现协程</h4><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> time</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">work1</span>():</span></span><br><span class="line"> <span class="keyword">while</span> <span class="literal">True</span>:</span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'--111--'</span>)</span><br><span class="line"> <span class="keyword">yield</span></span><br><span class="line"> time.sleep(<span class="number">3</span>)</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">work2</span>():</span></span><br><span class="line"> <span class="keyword">while</span> <span class="literal">True</span>:</span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'--222--'</span>)</span><br><span class="line"> <span class="keyword">yield</span></span><br><span class="line"> time.sleep(<span class="number">3</span>)</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">main</span>():</span></span><br><span class="line"> w1 = work1()</span><br><span class="line"> w2 = work2()</span><br><span class="line"> <span class="keyword">while</span> <span class="literal">True</span>:</span><br><span class="line"> <span class="built_in">next</span>(w1)</span><br><span class="line"> <span class="built_in">next</span>(w2)</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> __name__ == <span class="string">'__main__'</span>:</span><br><span class="line"> main()</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> Python </tag>
</tags>
</entry>
<entry>
<title>Python多任务多进程</title>
<link href="/2021/06/10/Python%E5%A4%9A%E8%BF%9B%E7%A8%8B/"/>
<url>/2021/06/10/Python%E5%A4%9A%E8%BF%9B%E7%A8%8B/</url>
<content type="html"><![CDATA[<h3 id="多任务"><a href="#多任务" class="headerlink" title="多任务"></a>多任务</h3><p><strong>多任务</strong>处理是指用户可以在同一时间内运行多个应用程序,每个应用程序被称作一个任务.</p><p>Linux、windows就是支持多任务的操作系统,比起单任务系统它的功能增强了许多。</p><h5 id="多任务的执行方式"><a href="#多任务的执行方式" class="headerlink" title="多任务的执行方式"></a>多任务的执行方式</h5><ul><li>并发：在一段时间内<strong>交替</strong>去执行任务。</li><li>并行：指的是任务数小于等于cpu核数，即任务真的是一起执行的</li></ul><h3 id="多进程"><a href="#多进程" class="headerlink" title="多进程"></a>多进程</h3><h4 id="进程的概念"><a href="#进程的概念" class="headerlink" title="进程的概念"></a>进程的概念</h4><p>一个正在运行的程序或者软件就是一个进程，<strong>它是操作系统进行资源分配的基本单位</strong>。</p><p><strong>一个程序运行后至少有一个进程，一个进程默认有一个线程</strong>，进程里面可以创建多个线程，<strong>线程是依附在进程里面的，没有进程就没有线程</strong>。</p><h4 id="进程的使用"><a href="#进程的使用" class="headerlink" title="进程的使用"></a>进程的使用</h4><p>Python在 multiprocessing 模块下提供了Process老创建新进程；与Thread类似</p><h5 id="使用Process进程也要两种方式："><a href="#使用Process进程也要两种方式：" class="headerlink" title="使用Process进程也要两种方式："></a>使用Process进程也要两种方式：</h5><ol><li>以指定函数作为target， 创建Process对象即可创建新进程</li><li>继承Process类，重写它的run() 方法来创建进程类，程序创建Process子类的实例作为进程</li></ol><ul><li><p><strong>Process进程类的说明</strong></p><p><strong>语法参数:</strong> Process( [group [, target [, name [, args [, kwargs ]]]])</p><ul><li>group：指定进程组，目前只能使用None</li><li>target：执行的目标任务名</li><li>name：进程名字</li><li>args：以元组方式给执行任务传参</li><li>kwargs：以字典方式给执行任务传参</li></ul><p><strong>Process创建的实例对象的常用方法:</strong></p><ul><li>start()：启动子进程实例（创建子进程）</li><li>run()：重写该方法可实现进程的执行体</li><li>join()：等待子进程执行结束 </li><li>is_alive()：判断进程是否还活着 （是否在执行）</li><li>terminate()：不管任务是否完成，立即终止子进程（中断该进程）</li></ul><p><strong>Process创建的实例对象的常用属性:</strong></p><ul><li><p>name：该属性用于设置或访问进程的名字。（默认为Process-N）</p></li><li><p>daemon：该属性用于判断或设置后台状态。</p></li><li><p>authkey：返回进程的授权key</p></li></ul></li></ul><h5 id="具体使用"><a href="#具体使用" class="headerlink" title="具体使用"></a>具体使用</h5><blockquote><p>1.导入进程包</p><p>import multiprocessing</p><p>2.创建子进程并指定执行的任务</p><p>sub_process = multiprocessing.Process(target = 任务名)</p><p>3.启动进程执行任务</p><p>sub_process.start()</p></blockquote><h5 id="代码示例"><a href="#代码示例" class="headerlink" title="代码示例"></a>代码示例</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> time <span class="comment"># 导入时间包</span></span><br><span class="line"><span class="keyword">import</span> multiprocessing <span class="comment"># 导入进程包</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">dance</span>():</span></span><br><span class="line"> <span class="keyword">while</span> <span class="literal">True</span>:</span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'跳舞'</span>)</span><br><span class="line"> time.sleep(<span class="number">1</span>) <span class="comment"># 延迟1秒输出</span></span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">song</span>():</span></span><br><span class="line"> <span class="keyword">while</span> <span class="literal">True</span>:</span><br><span class="line"> <span class="built_in">print</span>(<span class="string">'唱歌'</span>)</span><br><span class="line"> time.sleep(<span class="number">1</span>) <span class="comment"># 延迟1秒输出</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 一边唱歌一边跳舞~~</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">mian</span>():</span></span><br><span class="line"> <span class="comment"># 创建跳舞进程</span></span><br><span class="line"> process_dance = multiprocessing.Process(target=dance)</span><br><span class="line"> <span class="comment"># 开启跳舞进程</span></span><br><span class="line"> process_dance.start()</span><br><span class="line"> </span><br><span class="line"> <span class="comment"># 创建唱歌进程</span></span><br><span class="line"> process_song = multiprocessing.Process(target=song)</span><br><span class="line"> <span class="comment"># 开启唱歌进程</span></span><br><span class="line"> process_song.start()</span><br><span class="line"> </span><br><span class="line"><span class="comment"># 当模块被直接运行时，以下代码块将被运行; 当模块是被导入时，代码块不被运行。</span></span><br><span class="line"><span class="keyword">if</span> __name__ = <span class="string">'__main__'</span>:</span><br><span class="line"> main()</span><br></pre></td></tr></table></figure><h4 id="获取进程编号-PID"><a href="#获取进程编号-PID" class="headerlink" title="获取进程编号(PID)"></a>获取进程编号(PID)</h4><p>获取进程编号的目的是验证主进程和子进程的关系，可以得知子进程是由那个主进程创建出来的。</p><p>获取进程编号的两种操作</p><ul><li><p>os.getpid() 表示获取当前进程编号</p></li><li><p>os.getppid() 表示获取当前父进程编号</p></li></ul><p>本文参考文献：</p><p>Process:<a href="https://www.cnblogs.com/jzxs/p/11428467.html">https://www.cnblogs.com/jzxs/p/11428467.html</a></p>]]></content>
<tags>
<tag> Python </tag>
</tags>
</entry>
<entry>
<title>你不知道的Array.from</title>
<link href="/2021/06/09/Array.from%20es6/"/>
<url>/2021/06/09/Array.from%20es6/</url>
<content type="html"><![CDATA[<h1 id="Array-from"><a href="#Array-from" class="headerlink" title="Array.from"></a>Array.from</h1><p>可参考 MDN 里的 Array.from</p><blockquote><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from</a></p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = { <span class="number">0</span>:<span class="number">1</span>, <span class="number">1</span>:<span class="number">2</span>, <span class="number">2</span>:<span class="number">3</span>,</span><br><span class="line"> <span class="attr">length</span>:<span class="number">3</span>, <span class="comment">// 1</span></span><br><span class="line"> <span class="attr">length</span>:<span class="number">4</span>, <span class="comment">// 2</span></span><br><span class="line"> <span class="attr">length</span>:<span class="number">0</span>, <span class="comment">// 3</span></span><br><span class="line"> <span class="attr">push</span>:[].push <span class="comment">//可在对象中定义数组方法</span></span><br><span class="line"> };</span><br><span class="line">obj -> 伪类 ->类似于数组的一种伪类型 -> 不是JS类型</span><br><span class="line"><span class="keyword">var</span> newArr = <span class="built_in">Array</span>.from(obj);</span><br><span class="line"><span class="built_in">console</span>.log(newArr);</span><br><span class="line"><span class="comment">// 1: [1,2,3]; 2:[1,2,3,unfeined]; 3: []</span></span><br><span class="line"><span class="comment">//length决定了Array.from最终返回的新数组的长度，剪裁掉或补齐 (undiefined)</span></span><br><span class="line"><span class="built_in">console</span>.log(newArr.length);</span><br><span class="line">obj.push(<span class="number">4</span>);</span><br><span class="line"><span class="built_in">console</span>.log(obj);<span class="comment">// [1,2,3,4]</span></span><br></pre></td></tr></table></figure><h2 id="Funny-reference-val"><a href="#Funny-reference-val" class="headerlink" title="Funny reference val"></a>Funny reference val</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`function Array Object -> 引用值 ->Object.prototype`</span>;</span><br><span class="line"><span class="keyword">var</span> obj1 = {};</span><br><span class="line">obj1.a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> newObj = <span class="keyword">new</span> <span class="built_in">Object</span>(obj1); <span class="comment">// newObj = obj1;</span></span><br><span class="line"><span class="built_in">console</span>.log(newObj === obj1); <span class="comment">//true | {a:1} - {a:1}</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Object</span>(arr1)); <span class="comment">// [1,2,3,4]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = [];</span><br><span class="line">arr.a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> newarr = <span class="keyword">new</span> <span class="built_in">Array</span>(arr);</span><br><span class="line"><span class="built_in">console</span>.log(newarr == arr); <span class="comment">//false | [a:1] - [Array(0)] : 0-> [a:1]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'123'</span>; <span class="comment">// 原始值</span></span><br><span class="line"><span class="built_in">console</span>.log(str.__proto__); <span class="comment">//原始类型</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>; <span class="comment">// 原始值</span></span><br><span class="line"><span class="keyword">var</span> newA = <span class="keyword">new</span> <span class="built_in">Number</span>(a); <span class="comment">//引用值</span></span><br><span class="line"><span class="built_in">console</span>.log(a == newA); <span class="comment">//true | 隐式类型转换</span></span><br><span class="line"><span class="built_in">console</span>.log(a === newA); <span class="comment">//false | 1 - Number{1}</span></span><br></pre></td></tr></table></figure><h2 id="Object"><a href="#Object" class="headerlink" title="Object"></a>Object</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj ={</span><br><span class="line"> <span class="attr">a</span>:<span class="number">1</span>,</span><br><span class="line"> <span class="attr">b</span>:<span class="number">2</span>,</span><br><span class="line"> <span class="attr">c</span>:<span class="number">3</span></span><br><span class="line">}</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(obj,<span class="string">'b'</span>{</span><br><span class="line"> <span class="attr">enumerable</span>:<span class="literal">false</span></span><br><span class="line">})</span><br><span class="line"><span class="comment">// 应用场景不一样</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.keys(obj));</span><br><span class="line"><span class="comment">// 忽略描述符 -enumerable:false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyNames(obj));</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> JS-ES6 </tag>
</tags>
</entry>
<entry>
<title>CSS3 - flex</title>
<link href="/2021/05/02/flex%E5%B8%83%E5%B1%80/"/>
<url>/2021/05/02/flex%E5%B8%83%E5%B1%80/</url>
<content type="html"><![CDATA[<h1 id="Flex"><a href="#Flex" class="headerlink" title="Flex"></a>Flex</h1><p>Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。</p><p><code>任何一个容器都可以指定为Flex布局。</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box{</span><br><span class="line"> <span class="attr">display</span>:flex;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="容器的属性"><a href="#容器的属性" class="headerlink" title="容器的属性"></a>容器的属性</h3><ul><li><p><strong>flex-direction</strong></p><p>flex-direction属性决定主轴的方向</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">.box {</span><br><span class="line"> flex-direction: row | row-reverse | column | column-reverse;</span><br><span class="line">}</span><br><span class="line">· row（默认值）：主轴为水平方向，起点在左端。</span><br><span class="line">· row-reverse：主轴为水平方向，起点在右端。</span><br><span class="line">· column：主轴为垂直方向，起点在上沿。</span><br><span class="line">· column-reverse：主轴为垂直方向，起点在下沿。</span><br></pre></td></tr></table></figure></li><li><p><strong>flex-wrap</strong></p><p>felx-warp属性是决定换行</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.box{</span><br><span class="line"> flex-wrap: nowrap | wrap | wrap-reverse;</span><br><span class="line">}</span><br><span class="line">nowrap（默认）：不换行。</span><br><span class="line">wrap：换行，第一行在上方。</span><br><span class="line">wrap-reverse：换行，第一行在下方。</span><br></pre></td></tr></table></figure></li><li><p><strong>flex-flow</strong></p><p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box {</span><br><span class="line"> flex-flow: <flex-direction> || <flex-wrap>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p><strong>justify-content</strong></p><p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.box {</span><br><span class="line"> justify-content: flex-start | flex-end | center | space-between | space-around;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">· flex-start（默认值）：左对齐</span><br><span class="line">· flex-end：右对齐</span><br><span class="line">· center： 居中</span><br><span class="line">· space-between：两端对齐，项目之间的间隔都相等。</span><br><span class="line">· space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</span><br></pre></td></tr></table></figure></li><li><p><strong>align-items</strong></p><p>align-items属性定义项目在交叉轴上如何对齐。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.box {</span><br><span class="line"> align-items: flex-start | flex-end | center | baseline | stretch;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">· flex-start：交叉轴的起点对齐。</span><br><span class="line">· flex-end：交叉轴的终点对齐。</span><br><span class="line">· center：交叉轴的中点对齐。</span><br><span class="line">· baseline: 项目的第一行文字的基线对齐。</span><br><span class="line">· stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</span><br></pre></td></tr></table></figure></li><li><p><strong>align-content</strong></p><p>align-content属性定义了多根轴线的对齐方式</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">.box {</span><br><span class="line"> align-content: flex-start | flex-end | center | space-between | space-around | stretch;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">· flex-start：与交叉轴的起点对齐。</span><br><span class="line">· flex-end：与交叉轴的终点对齐。</span><br><span class="line">· center：与交叉轴的中点对齐。</span><br><span class="line">· space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</span><br><span class="line">· space-around：每根轴线两侧的间隔都相等。</span><br><span class="line">· stretch（默认值）：轴线占满整个交叉轴。</span><br></pre></td></tr></table></figure></li><li><p>order属性</p><p>order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item {</span><br><span class="line"> <span class="attr">order</span>: <integer>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>flex-grow属性</p><p>flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item {</span><br><span class="line"> flex-grow: <number>; <span class="comment">/* default 0 */</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>flex-shrink属性</p><p>flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item {</span><br><span class="line"> flex-shrink: <number>; <span class="comment">/* default 1 */</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>flex-basis属性</p><p>flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。默认值为auto</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item {</span><br><span class="line"> <span class="attr">flex</span>: none | [ <<span class="string">'flex-grow'</span>> <<span class="string">'flex-shrink'</span>>? || <<span class="string">'flex-basis'</span>> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>align-self属性</p><p>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。auto</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item {</span><br><span class="line"> align-self: auto | flex-start | flex-end | center | baseline | stretch;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul>]]></content>
</entry>
<entry>
<title>AJAX</title>
<link href="/2021/03/25/ajax/"/>
<url>/2021/03/25/ajax/</url>
<content type="html"><![CDATA[<h1 id="AJAX"><a href="#AJAX" class="headerlink" title="AJAX"></a>AJAX</h1><h4 id="概念："><a href="#概念：" class="headerlink" title="概念："></a><code>概念</code>：</h4><h4 id="Asynchronous-JavaScript-And-XML-异步的JavaSrcipt和XML"><a href="#Asynchronous-JavaScript-And-XML-异步的JavaSrcipt和XML" class="headerlink" title="Asynchronous JavaScript And XML 异步的JavaSrcipt和XML"></a>Asynchronous JavaScript And XML 异步的JavaSrcipt和XML</h4><p>简说：Ajax通过在<strong>后台与服务器进行少量数据交换</strong>，使网页实现异步更新；</p><p>特点：可以实现<strong>页面无刷新更新数据</strong>，提高用户浏览网站应用的体验；</p><ul><li>同步 or 异步</li></ul><p>同步：客户端必须等待程序的响应；在等待的期间客户端不能做其他操作。</p><p>异步：客户端不需要等待程序的响应；在服务器处理请求的过程中，客户端可以进行其他的操作</p><h2 id="实现方法"><a href="#实现方法" class="headerlink" title="实现方法"></a>实现方法</h2><h4 id="1-创建核心对象"><a href="#1-创建核心对象" class="headerlink" title="1.创建核心对象"></a>1.创建核心对象</h4><ul><li>创建 <code>XMLHttpRequest</code> 对象</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> iable= <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line"><span class="comment">//老版本的IE5~6 使用ActiveX 对象： if 上述用不了用下述</span></span><br><span class="line"><span class="keyword">var</span> iablet = <span class="keyword">new</span> ActiveXObject(<span class="string">'Microsoft.XMLHTTP'</span>)</span><br></pre></td></tr></table></figure><h2 id="2-建起连接"><a href="#2-建起连接" class="headerlink" title="2.建起连接"></a>2.建起连接</h2><ul><li>步骤：向服务器发送请求 ，接收服务器响应，处理数据</li></ul><ol><li>向服务器发送请求</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">Xmlhttp.open(<span class="string">'Get'</span>,<span class="string">'textl.txt'</span>,<span class="literal">true</span>);</span><br><span class="line"><span class="comment">//open(method,url,async);</span></span><br><span class="line"><span class="comment">//method:请求的类型：GET 或 POST</span></span><br><span class="line"><span class="comment">//url:文件在服务器上的位置</span></span><br><span class="line"><span class="comment">//async: true（异步）或false（同步）</span></span><br><span class="line">xmlhttp.send();</span><br><span class="line"><span class="comment">//send(string);</span></span><br><span class="line"><span class="comment">//string:仅用于POST请求</span></span><br></pre></td></tr></table></figure><h2 id="3-请求方式"><a href="#3-请求方式" class="headerlink" title="3.请求方式"></a>3.请求方式</h2><ul><li><h5 id="GET与POST"><a href="#GET与POST" class="headerlink" title="GET与POST"></a>GET与POST</h5></li></ul><p>get方法：请求参数在URL后边拼接。send方法为空参数</p><p>post方法：请求参数在send方法中定义</p><p><strong>GET更简单也更快，POST在以下情况下使用</strong></p><ol><li>无法使用缓存文件（更新服务器上的文件或数据库）</li><li>向服务器发送大量数据（POST 没有数据量限制）</li><li>发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠</li></ol><ul><li><p>GET 请求方式</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xhr.open(<span class="string">'get'</span>, <span class="string">'http://www.example.com?name=zhangsan&age=20'</span>);</span><br></pre></td></tr></table></figure></li><li><p>POST 请求方式</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xhr.setRequestHeader(<span class="string">'Content-Type'</span>, <span class="string">'application/x-www-form-urlencoded'</span>) xhr.send(<span class="string">'name=zhangsan&age=20'</span>);</span><br></pre></td></tr></table></figure><p>（POST要设置请求头：xhr.setRequestHeader）</p><p>“Content-Type”:作用是告知服务器，浏览器提交的数据类型</p><p>值为：application/x-www-form-urlencoded（需要自己指定） ，表示客户端提交的是<code>查询字符串</code>。<br>值为：application/json（需要自己指定） ，表示客户端提交的是 <code>JSON 字符串</code>。<br>值为：multipart/form-data（浏览器会自动设置），表示客户端提交的是 <code>FormData 对象</code>。</p><p><code>GET</code><br>GET方法请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据。<br>通俗的讲，获取数据应该使用GET方式的请求。<br><code>POST</code><br>POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用。<br>添加、修改都可以使用POST请求，因为此类操作都会改变服务器上的资源<br><code>PUT</code><br>PUT方法用请求有效载荷替换目标资源的所有当前表示。<br>修改操作可以选择使用PUT方式<br><code>DELETE</code><br>DELETE方法删除指定的资源。<br>删除操作可以使用DELETE方式</p><h5 id="Ajax-状态码"><a href="#Ajax-状态码" class="headerlink" title="Ajax 状态码"></a>Ajax 状态码</h5><p>在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">0：请求未初始化(还没有调用open())</span><br><span class="line">1：请求已经建立，但是还没有发送(还没有调用send())</span><br><span class="line">2：请求已经发送</span><br><span class="line">3：请求正在处理中，通常响应中已经有部分数据可以用了</span><br><span class="line">4：响应已经完成，可以获取并使用服务器的响应了</span><br><span class="line"></span><br><span class="line">xhr.readyState // 获取Ajax 状态码</span><br></pre></td></tr></table></figure><h4 id="status属性"><a href="#status属性" class="headerlink" title="status属性"></a>status属性</h4><p>status 属性表示 http 状态码，是一个数字，代码指示特定 HTTP 请求是否已成功完成。<br>响应分为五类：<br>信息响应(100–199)，<br>成功响应(200–299)，<br>重定向(300–399)，<br>客户端错误(400–499)<br>服务器错误 (500–599)。<br>常用状态码<br>200 OK - 请求成功<br>400 Bad Request - 1、语义有误，当前请求无法被服务器理解。2、请求参数有误。<br>401 Unauthorized - 当前请求需要用户验证。<br>404 Not Found - 请求失败，请求所希望得到的资源未被在服务器上发现。<br>500 Internal Server Error - 服务器遇到了不知道如何处理的情况。</p><h5 id="onreadystatechange-事件"><a href="#onreadystatechange-事件" class="headerlink" title="onreadystatechange 事件"></a>onreadystatechange 事件</h5><p>当 Ajax 状态码发生变化时将自动触发该事件</p><p>在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 当Ajax状态码发生变化时</span></span><br><span class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// 判断当Ajax状态码为4时</span></span><br><span class="line"> <span class="keyword">if</span> (xhr.readyState == <span class="number">4</span>) {</span><br><span class="line"> <span class="comment">// 获取服务器端的响应数据</span></span><br><span class="line"> <span class="built_in">console</span>.log(xhr.responseText);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h5 id="原生JS实现请求参考代码："><a href="#原生JS实现请求参考代码：" class="headerlink" title="原生JS实现请求参考代码："></a>原生JS实现请求参考代码：</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.创建xhr对象</span></span><br><span class="line"><span class="keyword">let</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line"><span class="comment">// 2.事件监听</span></span><br><span class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//判断页面加载完成再执行</span></span><br><span class="line"> <span class="keyword">if</span>(xhr.readyState == <span class="number">4</span>){</span><br><span class="line"> <span class="built_in">console</span>.log(xhr.responseText);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">xhr.open(<span class="string">'post'</span>,<span class="string">'http://www.liulongbin.top:3006/api/addbook'</span>);<span class="comment">//请求方式与请求地址</span></span><br><span class="line">xhr.setRequestHeader(<span class="string">'Content-Type'</span>,<span class="string">'application/x-www-form-urlencoded'</span>);<span class="comment">//请求头</span></span><br><span class="line">xhr.send(<span class="string">'bookname=海子的诗&author=海子&publisher=自由与遐想出版社'</span>);<span class="comment">//需要添加的值</span></span><br></pre></td></tr></table></figure></li></ul><h4 id="原生JS进行封装"><a href="#原生JS进行封装" class="headerlink" title="原生JS进行封装"></a>原生JS进行封装</h4><p>分析：</p><p>①：函数只有一个参数，是一个对象<br>对象里包括 type、url、data、success四个属性<br>②：GET和POST请求，都需要创建xhr对象，都需要设置 onreadystatechange 事件<br>③：当得到响应结果后，调用 success 函数，把结果传递给 success 函数<br>④：需要把对象形式的请求参数，转换成查询字符串<br>⑤：由于GET和POST的 “open”和 “send”不一样，所以判断，然后分开写<br>⑥：优化（默认GET、大小写等等）；</p><p>参考代码：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> <span class="comment">//获取的数据转换为字符串格式</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">toStr</span>(<span class="params">data</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> list = [];</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> data){</span><br><span class="line"> list.push(<span class="string">`<span class="subst">${key}</span>=<span class="subst">${data[key]}</span>`</span>);</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">return</span> list.join(<span class="string">'&'</span>);</span><br><span class="line"> };</span><br><span class="line"> <span class="comment">//事件监听</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">ajax</span>(<span class="params">option</span>)</span>{</span><br><span class="line"> <span class="keyword">let</span> preat = toStr(option.data); <span class="comment">//所有data数据</span></span><br><span class="line"> <span class="keyword">let</span> type = option.type; <span class="comment">//获取方式类型 </span></span><br><span class="line"> <span class="keyword">let</span> xhr = <span class="keyword">new</span> XMLHttpRequest(); <span class="comment">//固定创建XML</span></span><br><span class="line"> xhr.onreadystatechange= <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(xhr.readyState == <span class="number">4</span> && xhr.status == <span class="number">200</span>){ <span class="comment">//页面完成时正确输出执行</span></span><br><span class="line"> option.success(<span class="built_in">JSON</span>.parse(xhr.responseText)); <span class="comment">//回调数据转换为数组</span></span><br><span class="line"> }};</span><br><span class="line"> <span class="keyword">if</span>(type = <span class="string">'get'</span>){ <span class="comment">//判断方式类型</span></span><br><span class="line"> xhr.open(type,<span class="string">`<span class="subst">${option.url}</span>?<span class="subst">${preat}</span>`</span>); <span class="comment">//get是写在open()</span></span><br><span class="line"> xhr.send();</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> xhr.open(type,oprion.url);</span><br><span class="line"> xhr.send(preat); <span class="comment">//post写在send()</span></span><br><span class="line"> }};</span><br><span class="line"> <span class="comment">// 构造函数实参</span></span><br><span class="line"> ajax({</span><br><span class="line"> <span class="attr">url</span>:<span class="string">'http://www.liulongbin.top:3006/api/getbooks'</span>, <span class="comment">//请求地址</span></span><br><span class="line"> <span class="attr">type</span>:<span class="string">'get'</span>, <span class="comment">//请求方式</span></span><br><span class="line"> <span class="attr">data</span>:{ <span class="comment">//添加数据</span></span><br><span class="line"> <span class="attr">id</span>:<span class="number">5996</span>,</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'zhangsan'</span>,</span><br><span class="line"> <span class="attr">age</span>:<span class="number">22</span>,</span><br><span class="line"> <span class="attr">IdPrice</span>:<span class="number">888888</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">success</span>:<span class="function">(<span class="params">res</span>)=></span><span class="built_in">console</span>.log(res) <span class="comment">//回调数据</span></span><br><span class="line"> });</span><br></pre></td></tr></table></figure><h3 id="编码与解码"><a href="#编码与解码" class="headerlink" title="编码与解码"></a>编码与解码</h3><ul><li>乱码产生的原因:</li></ul><p>所有浏览器提供的AJAX对象请求参数默认使用 UTF-8 进行编码；而服务器端默认使用 ISO-8859-1 去解码，编码与解码方式不一致导致了乱码的产生。</p><ul><li>解决方式:</li></ul><p>服务器端使用 request.setCharacterEncoding(“UTF-8”); 来明确指明服务器端使用 UTF-8 进行解码;</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">编码：<span class="built_in">encodeURIComponent</span>(<span class="string">'椒盐虾'</span>); <span class="comment">//编码： %E6%A4%92%E7%9B%90%E8%99%BE</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">解码：<span class="built_in">decodeURIComponent</span>(变量); <span class="comment">// 解码： 椒盐虾</span></span><br></pre></td></tr></table></figure><h2 id="XHR2"><a href="#XHR2" class="headerlink" title="XHR2"></a>XHR2</h2><h3 id="新增事件"><a href="#新增事件" class="headerlink" title="新增事件"></a>新增事件</h3><ol><li><strong>请求超时</strong></li></ol><p>timeout：用于设置请求的超时时间，单位是毫秒</p><p>ontimeout：如果请求超时了，会触发 ontimeout 事件</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xhr.timeout = <span class="number">30</span>;</span><br><span class="line">xhr.ontimeout = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{alert(<span class="string">'请求超时，请刷新重试'</span>)}</span><br></pre></td></tr></table></figure><ol start="2"><li><strong>onload事件</strong></li></ol><p>onload事件,在请求成功完成时触发；即 readyState为4时触发。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//可使用onload事件替代之前的onreadystatechange事件</span></span><br><span class="line">xhr.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">if</span>(xhr.stuaus == <span class="number">200</span>){<span class="built_in">console</span>.log(<span class="built_in">this</span>.responseText);}}</span><br></pre></td></tr></table></figure><p> 3.<strong>onerror事件</strong>，在请求失败时触发</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xhr.onerror = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="built_in">console</span>.log(请求失败了);}；</span><br><span class="line">xhr.open(<span class="string">'GET'</span>,<span class="string">'http://xxxxxxxxxxx.com'</span>); <span class="comment">//错误地址</span></span><br></pre></td></tr></table></figure><ol start="4"><li><strong>onprogress事件</strong>，获取数据接收速度，readyState为3时触发。</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">xhr.onprogress = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>{ </span><br><span class="line"> event.loaded; <span class="comment">// 已传输的数据量</span></span><br><span class="line"> event.total; <span class="comment">//总共的数据量</span></span><br><span class="line">};</span><br></pre></td></tr></table></figure><ol start="5"><li><strong>onloadstart事件</strong> 与 <strong>onloadend事件</strong></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">xhr.onloadstart = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'即将开始下载数据'</span>) <span class="comment">//开始传输数据</span></span><br><span class="line">};</span><br><span class="line">xhr.onloadend = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ </span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'请求已经结束了'</span>); <span class="comment">// 已传输的数据量</span></span><br><span class="line">};</span><br></pre></td></tr></table></figure><h4 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h4><ol><li><p>load，请求成功时触发</p></li><li><p>error，失败时触发</p></li><li><p>loadstart，开始传送数据时触发</p></li><li><p>loadend，请求完成（成功或失败）时触发</p></li><li><p>progress，分块接收大量数据时，周期性触发</p></li><li><p>timeout，超时后触发</p></li></ol><h2 id="FormData"><a href="#FormData" class="headerlink" title="FormData"></a>FormData</h2><ul><li>FormData的作用和 jQuery中的 serialize() 作用一样，用于快速收集表单数据，并且可以将结果直接提交给接口。<br>创建的FormData对象，可直接通过 xhr.send(FormData对象) 提交给服务器的接口</li></ul><h4 id="语法："><a href="#语法：" class="headerlink" title="语法："></a>语法：</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 获取 form 标签的 DOM对象</span></span><br><span class="line"><span class="keyword">let</span> form = <span class="built_in">document</span>.querySelector(<span class="string">'form'</span>);</span><br><span class="line"><span class="comment">// 2. 实例化 FormData 对象，传入 form</span></span><br><span class="line"><span class="keyword">let</span> fd = <span class="keyword">new</span> FormData(form);</span><br><span class="line"><span class="comment">// 3. 其他代码 略</span></span><br><span class="line"><span class="comment">// 4. 提交数据</span></span><br><span class="line">xhr.send(fd);</span><br></pre></td></tr></table></figure><h4 id="FromData注意事项："><a href="#FromData注意事项：" class="headerlink" title="FromData注意事项："></a>FromData注意事项：</h4><ul><li>new FormData() 后，得到一个对象；</li><li>form参数可选</li><li>FormData 对象里包括所有的表单数据，但是无法通过打印对象查看，可以通过forEach方法遍历查看。</li><li>数据不需要转换成查询字符串格式，直接提交FormData对象即可</li><li>提交FormData对象，只能使用<code>POST方式</code></li><li>提交FormData对象，对应的Content-Type由浏览器自动设置，不需要程序员自己设置</li></ul><h2 id="J-S-O-N"><a href="#J-S-O-N" class="headerlink" title="J S O N"></a>J S O N</h2><ul><li>JSON作为一种通用的格式 在传输数据时当做数据的载体</li></ul><p>JSON的本质是<code>字符串</code>（如果在JS中写，一定要写成字符串形式）<br>JSON字符串，也是有结构的，样子和 JS 数据结构基本一样<br>JSON字符串中，允许出现的类型有 null number string bool array object<br>注释、函数、undefined等其他所有类型都不能出现在JSON字符串中<br><code>所有的字符串必须使用双引号</code><br>一个完整的JSON字符串，前后的括号必须对应，且不能有其他内容</p><p>JSON字符串与JS数据转换</p><ul><li>JS -> JSON(序列化)</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> jsonStr = <span class="built_in">JSON</span>.stringify(JS数据);</span><br></pre></td></tr></table></figure><ul><li>JSON -> JS (反序列化)</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> JS数据 = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>字符串);</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> 前端技术 </tag>
</tags>
</entry>
<entry>
<title>JS - Math.random()</title>
<link href="/2021/02/24/JS%E9%9A%8F%E6%9C%BA%E6%95%B0/"/>
<url>/2021/02/24/JS%E9%9A%8F%E6%9C%BA%E6%95%B0/</url>
<content type="html"><![CDATA[<h1 id="JS-Math-random-随机数"><a href="#JS-Math-random-随机数" class="headerlink" title="JS - Math.random() 随机数"></a>JS - Math.random() 随机数</h1><h3 id="1-Math-random-：-随机获取范围内的一个数-（-精确到小数点后14位-）"><a href="#1-Math-random-：-随机获取范围内的一个数-（-精确到小数点后14位-）" class="headerlink" title="1. Math.random() ： 随机获取范围内的一个数 （ 精确到小数点后14位 ）"></a>1. Math.random() ： 随机获取范围内的一个数 （ 精确到小数点后14位 ）</h3><h4 id="生成0-60间的数"><a href="#生成0-60间的数" class="headerlink" title="生成0~60间的数"></a>生成0~60间的数</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 语法: Math.random()\*m [表示生成0~m之间的随机数]</span></span><br><span class="line"><span class="built_in">Math</span>.random() * <span class="number">60</span> </span><br></pre></td></tr></table></figure><h4 id="生成0-60间的整数"><a href="#生成0-60间的整数" class="headerlink" title="生成0~60间的整数"></a>生成0~60间的整数</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random()*<span class="number">60</span>)</span><br></pre></td></tr></table></figure><h4 id="向下取整整数"><a href="#向下取整整数" class="headerlink" title="向下取整整数"></a>向下取整整数</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(<span class="number">60</span>+<span class="number">1</span>))</span><br></pre></td></tr></table></figure><h4 id="生成1-60间的整数"><a href="#生成1-60间的整数" class="headerlink" title="生成1~60间的整数"></a>生成1~60间的整数</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*<span class="number">60</span>)+<span class="number">1</span></span><br></pre></td></tr></table></figure><h3 id="2-表示生成两个数之间的随机数"><a href="#2-表示生成两个数之间的随机数" class="headerlink" title="2. 表示生成两个数之间的随机数"></a>2. 表示生成两个数之间的随机数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 语法: Math.random()*m+n [表示生成n~m+n之间的随机数]</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.random()*<span class="number">10</span>+<span class="number">8</span>); <span class="comment">// 8~18 </span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 语法: Math.random()*m-n [表示生成-n~m+n之间的随机数]</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.random()*<span class="number">10</span>-<span class="number">8</span>); <span class="comment">// -8~2</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 语法: Math.random()*m-m [表示生成-m~0之间的随机数]</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.random()*<span class="number">10</span>-<span class="number">10</span>); <span class="comment">//-10-0</span></span><br></pre></td></tr></table></figure><h3 id="-3-生成n-m之间的随机整数（包括n与m）"><a href="#-3-生成n-m之间的随机整数（包括n与m）" class="headerlink" title=" 3. 生成n~m之间的随机整数（包括n与m）"></a> 3. 生成n~m之间的随机整数（包括n与m）</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 语法: Math.floor(Math.random()\*(m-n+1))+n</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(<span class="number">8</span>-<span class="number">100</span>+<span class="number">1</span>))+<span class="number">100</span>); *<span class="comment">// 8~100*</span></span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> JavaScript </tag>
</tags>
</entry>
<entry>
<title>Vuex的核心概念</title>
<link href="/2021/01/05/Vuex%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5/"/>
<url>/2021/01/05/Vuex%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5/</url>
<content type="html"><![CDATA[<p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://s3.bmp.ovh/imgs/2021/12/999b31bf5d1bcb85.png" alt="Vue"></p><p><strong>What is vuex？</strong></p><ul><li>vuex 是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间的数据共享.</li><li>只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。</li><li>官网：<a href="https://vuex.vuejs.org/zh/">https://vuex.vuejs.org/zh/</a></li></ul><h2 id="state"><a href="#state" class="headerlink" title="state"></a>state</h2><p><strong>State</strong> 提供唯一的公共数据源，<code>所有共享的数据都要统一存放到Store的State中进行存储</code></p><p>定义 State：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// 初始化vuex对象 const store = new Vuex.Store({ state: { // 管理数据 num: 0 }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>组件访问 State 中数据的方法：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">this.$store.state.全局数据名称 若是在template中使用免去this前缀</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// 从vuex中导入 mapStare 函数 import { mapState } from 'vuex' //</span><br><span class="line">将全局数据映射为当前组件的计算属性 computed:{ ...mapState([ 'count' ]) }</span><br></pre></td></tr></table></figure><h2 id="Mutations"><a href="#Mutations" class="headerlink" title="Mutations"></a>Mutations</h2><p><strong>Mutations</strong>用于<code>变更Store中的数据</code>，同步地修改状态</p><p><code>组件中语法</code>：$store.commit(‘方法名称’,params)；</p><p><strong>注：</strong>只有 mutations 里的函数有权修改 state 中的数据</p><p><strong>注：</strong> mutations 里不能包含异步操作</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">// --- store-> index.js const store = new Vuex.Store({ state: { count:0 },</span><br><span class="line">mutations:{ add(state,step){ //参数为 state数据源与自定义参数 //变更状态</span><br><span class="line">state.count += step } } }) // --- 需要引用的组件 `方法一`：methods:{</span><br><span class="line">方法(){this.$store.commit('方法名称如：(add)',3)} } `方法二`： //</span><br><span class="line">从vuex中按需导入 mapMutations函数 // 映射为当前组件的methods函数 import {</span><br><span class="line">mapMutations } from 'vuex' methods:{ ...mapMutation(['sub','subN']) }</span><br></pre></td></tr></table></figure><h2 id="Action"><a href="#Action" class="headerlink" title="Action"></a>Action</h2><p>Action 用于处理异步任务</p><p><code>组件中语法</code>：$store.dispath(‘方法名’)</p><p><strong>注：</strong>在 Actions 中不能直接修改 state 中的数据，必须通过 context.commit 中触发才行</p><p><strong>注：</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">// --- store-> index.js const store = new Vuex.Store({ state: { count:0 },</span><br><span class="line">mutations:{ add(state,step){ state.count += step } }, actions:{</span><br><span class="line">addAsync(context,step){ context.commit('mutatioins中的方法名',parems); } } }) //</span><br><span class="line">--- 需要引用的组件 `方法一`： 用 this.$store.dispatch('方法') 使用方法</span><br><span class="line">`方法二`： //从vuex中按需引入 mapActions函数 // 映射为当前组件的methods函数</span><br><span class="line">import { mapActions } from 'vuex' methods:{ ...mapActions(['sub','subN']) }</span><br></pre></td></tr></table></figure><h2 id="Getter"><a href="#Getter" class="headerlink" title="Getter"></a>Getter</h2><p><strong>Getter</strong>用于对 Store 中的数据获取之前进行加工处理，可以理解为 state 的计算属性</p><p><code>组件中语法</code>：$store.getters.方法()</p><ul><li><pre><code class="vue">// --- store-> index.js const store = new Vuex.Store({ state: {listX:['H','e','l','l','o'] }, mutations:{...}, actions:{...}, getters:{getList(state,step){ //方法名 return state.listX.reverse();//这里state指向state数据源 } } }) // --- 需要引用的组件 `方法一`： 用this.$store.getters.getlist() 使用方法 `方法二`： //从vuex中按需引入mapGetters 函数 // 映射为当前组件的methods函数 import { mapGetters } from'vuex' methods:{ ...mapGetters(['getList']) }</code></pre></li></ul>]]></content>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>JavaScript - DOM</title>
<link href="/2020/11/28/Js-Dom/"/>
<url>/2020/11/28/Js-Dom/</url>
<content type="html"><![CDATA[<h1 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h1><p>DOM文档树：</p><p>文档：一个页面就是一个文档，DOM中使用document表示节点； 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示标签节点； 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示</p><h1 id="获取元素"><a href="#获取元素" class="headerlink" title="获取元素"></a>获取元素</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>,根据id获取元素：<span class="built_in">document</span>.getElementById(<span class="string">'id'</span>)；<span class="comment">//返回值：元素对象 或 null</span></span><br><span class="line"><span class="number">2</span>,根据标签获取元素：<span class="built_in">document</span>.getElementsByTagName(<span class="string">'标签'</span>)或element.getElementsByTagName(<span class="string">'标签名'</span>)； <span class="comment">//返回值：元素对象集合</span></span><br><span class="line"><span class="number">3</span>,<span class="built_in">document</span>.getElementsByClassName(<span class="string">'类名'</span>) <span class="comment">//根据类名返回元素对象集合;</span></span><br><span class="line"><span class="number">4</span>,<span class="built_in">document</span>.querySelector(<span class="string">'选择器'</span>)<span class="comment">//根据指定选择器返回第一个元素对象;</span></span><br><span class="line"><span class="number">5</span>,<span class="built_in">document</span>.querySelectorAll(<span class="string">'选择器'</span>)<span class="comment">//根据指定选择器返回;</span></span><br><span class="line"></span><br><span class="line">· 特殊元素 ·</span><br><span class="line"><span class="number">1</span>,<span class="built_in">document</span>.body; <span class="comment">//返回元素对象</span></span><br><span class="line"><span class="number">2</span>,<span class="built_in">document</span>.documentElement <span class="comment">//返回html元素对象</span></span><br><span class="line"></span><br><span class="line">· 操作元素 ·</span><br><span class="line"><span class="number">1</span>,element.innerText:从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉</span><br><span class="line"><span class="number">2</span>,element.innerHTML:起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行</span><br><span class="line"></span><br><span class="line"><span class="number">1</span>，· 元素属性操作 ·</span><br><span class="line">innerText不会识别html，而innerHTML会识别</span><br><span class="line"><span class="number">2</span>, · innerText innerHTML src href id alt title ·</span><br><span class="line">获取属性的值 ： 元素对象.属性名</span><br><span class="line">设置属性的值 ： 元素对象.属性名 = 值</span><br><span class="line"><span class="number">3</span>，· 利用DOM可以操作如下表单元素的属性·</span><br><span class="line">type value checked selected disabled </span><br><span class="line">设置属性的值 ： 元素对象.属性名 = 值</span><br><span class="line">表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型</span><br><span class="line"><span class="number">4</span>，· 样式属性操作</span><br><span class="line">element.style 行内样式操作</span><br><span class="line">element.className 类名样式操作</span><br><span class="line"></span><br><span class="line"><span class="comment">// console.dir : 打印返回的元素对象，更好的查看里面的属性和方法 </span></span><br></pre></td></tr></table></figure><h1 id="鼠标事件"><a href="#鼠标事件" class="headerlink" title="鼠标事件"></a>鼠标事件</h1><table><thead><tr><th align="left">鼠标事件</th><th>触发条件</th></tr></thead><tbody><tr><td align="left">onclick</td><td>鼠标点击左键触发</td></tr><tr><td align="left">onmouseover</td><td>鼠标经过触发</td></tr><tr><td align="left">onmouseout</td><td>鼠标离开触发</td></tr><tr><td align="left">onfocus</td><td>获得鼠标焦点触发</td></tr><tr><td align="left">onblur</td><td>失去鼠标焦点触发</td></tr><tr><td align="left">onmousemove</td><td>鼠标移动触发</td></tr><tr><td align="left">onmouseup</td><td>鼠标弹起触发</td></tr><tr><td align="left">onmousedown</td><td>鼠标按下触发</td></tr></tbody></table>]]></content>
<tags>
<tag> JavaScript </tag>
</tags>
</entry>
<entry>
<title>Promise简述</title>
<link href="/2020/11/05/Promise%E7%AE%80%E8%BF%B0/"/>
<url>/2020/11/05/Promise%E7%AE%80%E8%BF%B0/</url>
<content type="html"><![CDATA[<!-- <div id="posts-calendar"></div> --><h1 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a><strong>Promise</strong></h1><hr><h3 id="Promise是JS中进行异步编程的新的解决方案"><a href="#Promise是JS中进行异步编程的新的解决方案" class="headerlink" title="Promise是JS中进行异步编程的新的解决方案"></a><strong>Promise是JS中进行异步编程的新的解决方案</strong></h3><ul><li>promise： 是一个<strong>构造函数</strong></li><li>Promise的构造函数接收一个参数，是函数，并且传入两个参数：<strong>resolve，reject</strong>，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。</li><li>new 出来的 Promise 实例对象，代表一个<strong>异步操作</strong></li><li>每一次 new Promise() 构造函数得到的实例对象，都可以<strong>通过原型链</strong>的方法访问到.then方法</li><li>.then() 方法用来<strong>预先指定成功和失败的回调函数</strong></li><li>调用 .then() 方法时，<strong>成功的回调函数是必选的</strong>，失败的回调函数是可选的</li><li>catch() 方法用来<strong>捕获与处理错误</strong></li></ul><h2 id="Promise-的状态改变"><a href="#Promise-的状态改变" class="headerlink" title="Promise 的状态改变"></a>Promise 的状态改变</h2><p>pending –> resolved</p><p>pending –> rejected </p><p>说明: 只有这 2 种, 且一个 promise 对象只能改变一次 </p><p><strong>无论变为成功还是失败, 都会有一个结果数据</strong> </p><p>成功的结果数据一般称为 vlaue, 失败的结果数据一般称为 reason</p><h2 id="流程图"><a href="#流程图" class="headerlink" title="流程图"></a>流程图</h2><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/09/27/RAEBhIFUeSvQnm3.png" alt="Snipaste_2021-09-27_14-59-26.png"></p><h2 id="为什么要用Promise"><a href="#为什么要用Promise" class="headerlink" title="为什么要用Promise"></a>为什么要用Promise</h2><ol><li>指定回调函数的方法更加灵活</li><li>支持链式调用 ，可以解决回调函数问题</li></ol><h2 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> <span class="built_in">Promise</span> 构造函数: <span class="built_in">Promise</span> (excutor) {} </span><br><span class="line">excutor 函数: 同步执行 (resolve, reject) => {} </span><br><span class="line">resolve 函数: 内部定义成功时我们调用的函数 value => {} </span><br><span class="line">reject 函数: 内部定义失败时我们调用的函数 reason => {} </span><br><span class="line">说明: excutor 会在 <span class="built_in">Promise</span> 内部立即同步回调,异步操作在执行器中执行 </span><br><span class="line"></span><br><span class="line"><span class="number">2.</span> <span class="built_in">Promise</span>.prototype.then 方法: <span class="function">(<span class="params">onResolved, onRejected</span>) =></span> {} </span><br><span class="line">onResolved 函数: 成功的回调函数 (value) => {} </span><br><span class="line">onRejected 函数: 失败的回调函数 (reason) => {} </span><br><span class="line">说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调 返回一个新的 promise 对象 </span><br><span class="line"></span><br><span class="line"><span class="number">3.</span> <span class="built_in">Promise</span>.prototype.catch 方法: <span class="function">(<span class="params">onRejected</span>) =></span> {} </span><br><span class="line">onRejected 函数: 失败的回调函数 (reason) => {} </span><br><span class="line">说明: then()的语法糖, 相当于: then(<span class="literal">undefined</span>, onRejected) </span><br><span class="line"></span><br><span class="line"><span class="number">4.</span> <span class="built_in">Promise</span>.resolve 方法: <span class="function">(<span class="params">value</span>) =></span> {} </span><br><span class="line"><span class="attr">value</span>: 成功的数据或 promise 对象 说</span><br><span class="line">明: 返回一个成功/失败的 promise 对象 </span><br><span class="line"></span><br><span class="line"><span class="number">5.</span> <span class="built_in">Promise</span>.reject 方法: <span class="function">(<span class="params">reason</span>) =></span> {} </span><br><span class="line"><span class="attr">reason</span>: 失败的原因 </span><br><span class="line">说明: 返回一个失败的 promise 对象 </span><br><span class="line"></span><br><span class="line"><span class="number">6.</span> <span class="built_in">Promise</span>.all 方法: <span class="function">(<span class="params">promises</span>) =></span> {} </span><br><span class="line"><span class="attr">promises</span>: 包含 n 个 promise 的数组 </span><br><span class="line">说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一 个失败了就直接失败 </span><br><span class="line"></span><br><span class="line"><span class="number">7.</span> <span class="built_in">Promise</span>.race 方法: <span class="function">(<span class="params">promises</span>) =></span> {} </span><br><span class="line"><span class="attr">promises</span>: 包含 n 个 promise 的数组 </span><br><span class="line">说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的 结果状态</span><br></pre></td></tr></table></figure><h2 id="Promise关键问题"><a href="#Promise关键问题" class="headerlink" title="Promise关键问题"></a>Promise关键问题</h2><ol><li><strong>如何改变 promise 的状态?</strong> </li></ol><p>(1) resolve(value): 如果当前是 pendding 就会变为 resolved </p><p>(2) reject(reason): 如果当前是 pendding 就会变为 rejected </p><p>(3) 抛出异常: 如果当前是 pendding 就会变为 rejected </p><ol start="2"><li><strong>一个 promise 指定多个成功/失败回调函数, 都会调用吗?</strong> </li></ol><p>当 promise 改变为对应状态时都会调用 </p><ol start="3"><li><strong>改变 promise 状态和指定回调函数谁先谁后?</strong> </li></ol><p>(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调 </p><p>(2) 如何先改状态再指定回调? </p><p>1 在执行器中直接调用 resolve()/reject() </p><p>2 延迟更长时间才调用 then() </p><p>(3) 什么时候才能得到数据? </p><p>1 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据 </p><p>2 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据 </p><ol start="4"><li><strong>promise.then()返回的新 promise 的结果状态由什么决定?</strong> </li></ol><p>(1) 简单表达: 由 then()指定的回调函数执行的结果决定</p><p>(2) 详细表达: </p><p>1 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常 </p><p>2 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值 </p><p>3 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果 </p><ol start="5"><li><strong>promise 如何串连多个操作任务?</strong> </li></ol><p>(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用 </p><p>(2) 通过 then 的链式调用串连多个同步/异步任务 </p><ol start="6"><li><strong>promise 异常传透?</strong> </li></ol><p>(1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调, </p><p>(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理 </p><ol start="7"><li><strong>中断 promise 链?</strong> </li></ol><p>(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数 </p><p>(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象 </p>]]></content>
<tags>
<tag> 前端技术 </tag>
</tags>
</entry>
<entry>
<title>你不知道的undefined</title>
<link href="/2020/10/05/undefined/"/>
<url>/2020/10/05/undefined/</url>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>本文讲述了 JavaScript 中 <code>undefined</code>的规范定义与一些场景下的小知识，以及 <code>void()</code>与的它的区别</p><h1 id="什么是-undefined"><a href="#什么是-undefined" class="headerlink" title="什么是 undefined"></a>什么是 undefined</h1><p><code>undefined</code> 既是一个原始数据类型，也是一个原始值数据</p><p><code>undefined</code> 属性表示变量没有被赋值，或者根本没有被声明</p><p><code>undefined</code> 是全局对象上的一个属性 <strong>window.undefined</strong></p><h1 id="undefined-四大不"><a href="#undefined-四大不" class="headerlink" title="undefined 四大不"></a>undefined 四大不</h1><ol><li><code>不可写 writable:false</code></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.undefined == <span class="number">1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.undefined); <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure><ol start="2"><li><code>不可配置 configurable:false;</code></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">delete</span> <span class="built_in">window</span>.undefined;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.undefined); <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure><ol start="3"><li><code>不可枚举 enumerable:false</code></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> k <span class="keyword">in</span> <span class="built_in">window</span>) {</span><br><span class="line"><span class="keyword">if</span> (k === <span class="literal">undefined</span>) {</span><br><span class="line"><span class="built_in">console</span>.log(k); <span class="comment">//undefined</span></span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ol start="4"><li><code>不可重新定义</code></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">window</span>, <span class="string">'undefined'</span>, {</span><br><span class="line"><span class="attr">enumerable</span>: <span class="literal">true</span>,</span><br><span class="line"><span class="attr">writable</span>: <span class="literal">true</span>,</span><br><span class="line"><span class="attr">configurable</span>: <span class="literal">true</span>,</span><br><span class="line"><span class="comment">// Cannot redefine property:undefined</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><h1 id="作用域下的-undefined"><a href="#作用域下的-undefined" class="headerlink" title="作用域下的 undefined"></a>作用域下的 undefined</h1><p>虽然全局作用域下的 <code>undefined</code> 是不可写，打印出来还是 undefined，但是局部作用域下的 <code>undefined</code> 相对于一个变量，它在局部作用域下<strong>不被识别为 JavaScript 中的保留字与关键字</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`全局`</span>;</span><br><span class="line"><span class="built_in">window</span>.undefined == <span class="number">1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.undefined); <span class="comment">// undefined</span></span><br><span class="line"></span><br><span class="line"><span class="string">`作用域`</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>{</span><br><span class="line"><span class="keyword">var</span> <span class="literal">undefined</span> = <span class="number">1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span>);</span><br><span class="line">}</span><br><span class="line">test(); <span class="comment">// 1</span></span><br><span class="line"></span><br><span class="line"><span class="meta">'use strict'</span><span class="string">`严格模式下 函数内外也是如此`</span>;</span><br></pre></td></tr></table></figure><h1 id="未定义的-undefined-小知识"><a href="#未定义的-undefined-小知识" class="headerlink" title="未定义的 undefined (小知识)"></a>未定义的 undefined (小知识)</h1><h3 id="funny-one"><a href="#funny-one" class="headerlink" title="funny one"></a><strong>funny one</strong></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">a</span>) </span>{</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> a); <span class="comment">//undefined</span></span><br><span class="line"><span class="keyword">return</span> a; <span class="comment">//undefined</span></span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(test());</span><br></pre></td></tr></table></figure><p><code>log1:</code> 形参没有传递相应的值 就为 undefined</p><p><code>log2:</code> 类型返回值 同为 undefined</p><h3 id="funny-two"><a href="#funny-two" class="headerlink" title="funny two"></a><strong>funny two</strong></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="literal">null</span>;</span><br><span class="line"><span class="built_in">console</span>.log(a == <span class="literal">undefined</span>); <span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(a === <span class="literal">undefined</span>); <span class="comment">//false</span></span><br></pre></td></tr></table></figure><p><code>log1:</code> null == undefined，因为 undefined 值是由 null 值派生而来的</p><p><code>log2:</code> null !=== undefined， 因为严格判断 undefined 只等于本身</p><h3 id="funny-three"><a href="#funny-three" class="headerlink" title="funny three"></a><strong>funny three</strong></h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(b); <span class="comment">// b is not defined</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> b); <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure><p><code>log1:</code> b 未声明 报错</p><p><code>log2:</code> 因为未声明未赋值 b 类型为 undefined</p><h3 id="funny-four"><a href="#funny-four" class="headerlink" title="funny four"></a><strong>funny four</strong></h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.all == <span class="literal">undefined</span>; <span class="comment">//true</span></span><br></pre></td></tr></table></figure><p><code>log1:</code> 根据文档说明 document.all()可以查阅 IE 浏览器版本； 不为 IE 浏览器的其他浏览器，类型均为 undefined。 ƪ(˘⌣˘)ʃ</p><h3 id="funny-five"><a href="#funny-five" class="headerlink" title="funny five"></a><strong>funny five</strong></h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"><span class="keyword">if</span> (<span class="string">'a'</span> <span class="keyword">in</span> <span class="built_in">window</span>) {</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">true</span>);</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">false</span>);</span><br><span class="line">} <span class="comment">// true</span></span><br></pre></td></tr></table></figure><p><code>log1:</code> 虽然 a 的类型为 undefined，但 a 并不在 window 中</p><h1 id="void-expression"><a href="#void-expression" class="headerlink" title="void (expression)"></a>void (expression)</h1><p><strong>void()不管输入什么 始终返回 undefined</strong></p><p>ps：void 不会像 undefined 一样被局部作用域而改动，类型与返回值始终为 undefined</p><h3 id="funny-one-1"><a href="#funny-one-1" class="headerlink" title="funny one"></a><strong>funny one</strong></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a, b, c;</span><br><span class="line">a = <span class="keyword">void</span> ((b = <span class="number">1</span>), (c = <span class="number">2</span>));</span><br><span class="line"><span class="built_in">console</span>.log(a, b, c);</span><br><span class="line"><span class="comment">//log1:</span></span><br></pre></td></tr></table></figure><p><code>log1:</code> undefined 1 2；</p><h3 id="funny-two-1"><a href="#funny-two-1" class="headerlink" title="funny two"></a><strong>funny two</strong></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><a href=<span class="string">"JavaScript:void(0)"</span>> or <a href=<span class="string">"JavaScript:；"</span>></span><br></pre></td></tr></table></figure><p><code>log1:</code> return: undefined</p><p><code>log2:</code> 这种写法称为阻止 伪协议；也叫无效链</p><h3 id="funny-three-1"><a href="#funny-three-1" class="headerlink" title="funny three"></a><strong>funny three</strong></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="keyword">void</span> <span class="number">0</span> === <span class="built_in">window</span>.undefined); <span class="comment">// true</span></span><br></pre></td></tr></table></figure><p><code>log1: </code> void(0) 等同与 undefined</p><h3 id="funny-four（重点）"><a href="#funny-four（重点）" class="headerlink" title="funny four（重点）"></a><strong>funny four（重点）</strong></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>{</span><br><span class="line"><span class="keyword">var</span> <span class="literal">undefined</span> = <span class="number">1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span>); <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">void</span> <span class="number">0</span> === <span class="keyword">void</span> <span class="number">999</span>); <span class="comment">// undefined</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> === <span class="keyword">void</span> <span class="number">0</span>); <span class="comment">// false</span></span><br><span class="line">}</span><br><span class="line">test();</span><br></pre></td></tr></table></figure><p><code>log1:</code> undefined 被声明为局部变量</p><p><code>log2:</code> 不管 void() 数值多少 始终等于 undefined</p><p><code>log3:</code> undefined 已为局部变量，值并不为 undefined</p><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><ul><li> undefined 的禁忌规范 <strong>不可写</strong>，<strong>不可配置</strong>，<strong>不可枚举</strong>，<strong>不可重新定义</strong></li><li> 全局作用域下与局部作用域的 <code>undefined</code></li><li> void 的好处就是在需要定义 undefined 时候可<strong>灵活性</strong>比 undefined 本身要好</li><li> 用<code>void(0)</code>来代替<code>undefined</code>进行赋值<strong>更安全</strong></li></ul>]]></content>
<tags>
<tag> 前端技术 </tag>
</tags>
</entry>
<entry>
<title>VUE脚手架</title>
<link href="/2020/08/17/Vue/"/>
<url>/2020/08/17/Vue/</url>
<content type="html"><![CDATA[<h1 id="VUE"><a href="#VUE" class="headerlink" title="VUE"></a>VUE</h1><p><code>Vue 是一套用于构建用户界面的**渐进式框架**。</code></p><p>官方文档：<a href="https://v3.cn.vuejs.org/guide/introduction.html#vue-js-%E6%98%AF%E4%BB%80%E4%B9%88">https://v3.cn.vuejs.org/guide/introduction.html#vue-js-%E6%98%AF%E4%BB%80%E4%B9%88</a></p><h4 id="1-把-vue-cli模块包按到全局-电脑拥有vue命令-才能创建脚手架工程"><a href="#1-把-vue-cli模块包按到全局-电脑拥有vue命令-才能创建脚手架工程" class="headerlink" title="1.把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程"></a>1.把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程</h4><ul><li>全局安装命令</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">yarn global add @vue/cli</span><br><span class="line"><span class="comment"># OR</span></span><br><span class="line">npm install -g @vue/cli</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">vue -V <span class="comment">//查看vue版本</span></span><br><span class="line">yarn add @vue/cli <span class="comment">//创建项目启动服务</span></span><br><span class="line"><span class="string">`项目名不能带大写字母，中文和特殊符号`</span></span><br><span class="line">yarn create <span class="string">`项目名`</span> <span class="comment">//创建脚手架</span></span><br><span class="line"><span class="string">`进入脚手架项目下, 启动内置的热更新本地服务器`</span></span><br><span class="line"></span><br><span class="line">cd <span class="string">`项目名`</span></span><br><span class="line"><span class="comment">// 启动</span></span><br><span class="line">npm run serve </span><br><span class="line"># 或 </span><br><span class="line">yarn serve</span><br></pre></td></tr></table></figure><h3 id="1-1-vue-cli自定义配置"><a href="#1-1-vue-cli自定义配置" class="headerlink" title="1.1@vue/cli自定义配置"></a><code>1.1@vue/cli自定义配置</code></h3><p>src并列处新建vue.config.js</p><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 覆盖webpack的配置 */</span></span><br><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line"> <span class="attr">devServer</span>: { <span class="comment">// 自定义服务配置</span></span><br><span class="line"> <span class="attr">open</span>: <span class="literal">true</span>, <span class="comment">// 自动打开浏览器</span></span><br><span class="line"> <span class="attr">port</span>: <span class="number">3000</span> <span class="comment">//自定义配置端口地址</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="2-vue-cli-目录和代码分析"><a href="#2-vue-cli-目录和代码分析" class="headerlink" title="2. @vue/cli 目录和代码分析"></a><code>2. @vue/cli 目录和代码分析</code></h3><blockquote><p>目标: 讲解重点文件夹, 文件的作用, 以及文件里代码的意思</p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">vuecil-demo <span class="comment"># 项目目录</span></span><br><span class="line"> ├── node_modules <span class="comment"># 项目依赖的第三方包</span></span><br><span class="line"> ├── public <span class="comment"># 静态文件目录</span></span><br><span class="line"> ├── favicon.ico<span class="comment"># 浏览器小图标</span></span><br><span class="line"> └── index.html <span class="comment"># 单页面的html文件(网页浏览的是它)</span></span><br><span class="line"> ├── src <span class="comment"># 业务文件夹</span></span><br><span class="line"> ├── assets <span class="comment"># 静态资源</span></span><br><span class="line"> └── logo.png <span class="comment"># vue的logo图片</span></span><br><span class="line"> ├── components <span class="comment"># 组件目录</span></span><br><span class="line"> └── HelloWorld.vue <span class="comment"># 欢迎页面vue代码文件 </span></span><br><span class="line"> ├── App.vue <span class="comment"># 整个应用的根组件</span></span><br><span class="line"> └── main.js <span class="comment"># 入口js文件</span></span><br><span class="line"> ├── .gitignore <span class="comment"># git提交忽略配置</span></span><br><span class="line"> ├── babel.config.js <span class="comment"># babel配置</span></span><br><span class="line"> ├── package.json <span class="comment"># 依赖包列表</span></span><br><span class="line"> ├── README.md <span class="comment"># 项目说明</span></span><br><span class="line">└── yarn.lock <span class="comment"># 项目包版本锁定和缓存地址</span></span><br></pre></td></tr></table></figure><ul><li>主要文件及含义</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">node_modules下都是下载的第三方包</span><br><span class="line">public/index.html – 浏览器运行的网页</span><br><span class="line">src/main.js – webpack打包的入口文件</span><br><span class="line">src/App.vue – vue项目入口页面</span><br><span class="line">package.json – 依赖包列表文件</span><br></pre></td></tr></table></figure><h3 id="3-el-挂载点"><a href="#3-el-挂载点" class="headerlink" title="3.el:挂载点"></a><code>3.el:挂载点</code></h3><blockquote><p>必须在el命中的元素内部定义 （建议使用id选择器><br>无法挂载到html 与 body 上</p></blockquote><h3 id="4-vue-cli-单vue文件讲解"><a href="#4-vue-cli-单vue文件讲解" class="headerlink" title="4._@vue/cli 单vue文件讲解"></a><code>4._@vue/cli 单vue文件讲解</code></h3><blockquote><p>推荐采用.vue文件来开发项目-单vue文件独立模块, 作用域互不影响</p><p>template里只能有一个根标签</p><p>style配合scoped属性, 保证样式只针对当前template内标签生效</p><p>vue文件配合webpack, 把他们打包起来插入到index.html</p></blockquote><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 --></span><br><span class="line"><template></span><br><span class="line"> <div>欢迎使用vue</div></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><!-- js相关 --></span><br><span class="line"><script></span><br><span class="line">export default {</span><br><span class="line"> name: 'App'</span><br><span class="line">}</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 --></span><br><span class="line"><style scoped></span><br><span class="line"></style></span><br><span class="line"></span><br></pre></td></tr></table></figure><ul><li><p>最终: Vue文件配合webpack, 把以上打包起来插入到index.html, 才可在浏览器运行</p></li><li><p>assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)</p></li></ul>]]></content>
<tags>
<tag> VUE </tag>
</tags>
</entry>
<entry>
<title>JS-字符字面量</title>
<link href="/2020/06/25/JS-%E5%AD%97%E7%AC%A6%E5%AD%97%E9%9D%A2%E9%87%8F/"/>
<url>/2020/06/25/JS-%E5%AD%97%E7%AC%A6%E5%AD%97%E9%9D%A2%E9%87%8F/</url>
<content type="html"><![CDATA[<h1 id="字符字面量"><a href="#字符字面量" class="headerlink" title="字符字面量"></a>字符字面量</h1><table><thead><tr><th align="center">字面量</th><th align="center">含义</th></tr></thead><tbody><tr><td align="center">\n</td><td align="center">换行</td></tr><tr><td align="center">\t</td><td align="center">制表</td></tr><tr><td align="center">\b</td><td align="center">退格</td></tr><tr><td align="center">\r</td><td align="center">回车</td></tr><tr><td align="center">\f</td><td align="center">换页</td></tr><tr><td align="center">\</td><td align="center">反斜杠（\）</td></tr><tr><td align="center">'</td><td align="center">单引号（’）</td></tr><tr><td align="center">"</td><td align="center">双引号（”）</td></tr><tr><td align="center">`</td><td align="center">反引号（`）</td></tr><tr><td align="center">\xnn</td><td align="center">以十六进制编码nn表示的字符</td></tr><tr><td align="center">\unnnn</td><td align="center">以十六进制编码nnnn表示的Unicode字符</td></tr></tbody></table>]]></content>
<tags>
<tag> JavaScript </tag>
</tags>
</entry>
<entry>
<title>JQuery</title>
<link href="/2020/05/26/JQuery/"/>
<url>/2020/05/26/JQuery/</url>
<content type="html"><![CDATA[<p>jQuery的官网地址： <a href="https://jquery.com/">https://jquery.com</a></p><blockquote><p>优先引入引入jQuery文件；</p></blockquote><h2 id="jQuery中的顶级对象：-使用-jQuery-代替"><a href="#jQuery中的顶级对象：-使用-jQuery-代替" class="headerlink" title="jQuery中的顶级对象：$ (使用 jQuery 代替)"></a>jQuery中的顶级对象：$ (使用 jQuery 代替)</h2><h2 id="jQuery-的入口函数"><a href="#jQuery-的入口函数" class="headerlink" title="jQuery 的入口函数"></a>jQuery 的入口函数</h2><p><code>jQuery中常见的两种入口函数</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第一种（简易）</span></span><br><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> ... <span class="comment">//此处是页面 DOM 加载完成的入口 </span></span><br><span class="line">});</span><br><span class="line"><span class="comment">//第二种（繁琐）</span></span><br><span class="line">$(docuemnt).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> ... </span><br><span class="line">})</span><br><span class="line"><span class="string">`好处：等着 DOM 结构渲染完毕即可执行内部代码，</span></span><br><span class="line"><span class="string"> 相当于原生 js 中的 DOMContentLoaded 。`</span></span><br></pre></td></tr></table></figure><h2 id="jQuery对象与DOM对象转换"><a href="#jQuery对象与DOM对象转换" class="headerlink" title="jQuery对象与DOM对象转换"></a>jQuery对象与DOM对象转换</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`1，DOM对象转换成jQuery对象`</span></span><br><span class="line"><span class="keyword">var</span> box = <span class="built_in">document</span>.getElementById(<span class="string">'box'</span>);<span class="comment">//获取DOM对象</span></span><br><span class="line"><span class="keyword">var</span> jQueryObject = $(box); <span class="comment">//把DOM对象转换为 jQuery 对象</span></span><br><span class="line"><span class="string">`2，jQuery对象转换为 DOM 对象有两种方法：`</span></span><br><span class="line"><span class="comment">//2.1 jQuery 对象[索引值]</span></span><br><span class="line"><span class="keyword">var</span> domObjOne = $(<span class="string">'div'</span>)[<span class="number">0</span>]</span><br><span class="line"><span class="comment">//2.2</span></span><br><span class="line"><span class="keyword">var</span> domObjTwo = $(<span class="string">'div'</span>).get(<span class="number">0</span>)</span><br></pre></td></tr></table></figure><h2 id="JQuery-选择器"><a href="#JQuery-选择器" class="headerlink" title="JQuery 选择器"></a>JQuery 选择器</h2><ul><li><h4 id="基础选择器"><a href="#基础选择器" class="headerlink" title="基础选择器"></a>基础选择器</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'选择器'</span>) <span class="comment">//里面选择器总结写CSS选择器即可（加引导）</span></span><br></pre></td></tr></table></figure></li><li><h4 id="层级选择器之子代与后代"><a href="#层级选择器之子代与后代" class="headerlink" title="层级选择器之子代与后代"></a>层级选择器之子代与后代</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log($(<span class="string">'ul li'</span>)); <span class="comment">//子代选择器</span></span><br><span class="line"><span class="built_in">console</span>.log($(<span class="string">'ul>li'</span>)); <span class="comment">//后代选择器</span></span><br></pre></td></tr></table></figure></li><li><h4 id="筛选选择器"><a href="#筛选选择器" class="headerlink" title="筛选选择器"></a>筛选选择器</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//（：first） 修改第一个元素的样式</span></span><br><span class="line"> $(<span class="string">"ul li:first"</span>).css(<span class="string">"color"</span>,<span class="string">"blue"</span>);</span><br><span class="line"> <span class="comment">//（eq（index））修改第index的元素的样式</span></span><br><span class="line"> $(<span class="string">"ul li:eq(2)"</span>).css(<span class="string">"color"</span>,<span class="string">"blue"</span>);</span><br><span class="line"> <span class="comment">//（：odd）修改当前所有偶数元素的样式</span></span><br><span class="line"> $(<span class="string">"ul li:odd"</span>).css(<span class="string">"color"</span>,<span class="string">"blue"</span>);</span><br><span class="line"> <span class="comment">//（：even）修改当前所有奇数元素的样式</span></span><br><span class="line"> $(<span class="string">"ul li:even"</span>).css(<span class="string">"color"</span>,<span class="string">"blue"</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h2 id="jQuery小方法"><a href="#jQuery小方法" class="headerlink" title="jQuery小方法"></a>jQuery小方法</h2><ul><li><p>隐式迭代</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。</span></span><br><span class="line">$(<span class="string">'div'</span>).hide(); <span class="comment">// 页面中所有的div全部隐藏，不用循环操作</span></span><br></pre></td></tr></table></figure></li><li><p>排他思想</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。</span></span><br><span class="line">$(<span class="built_in">this</span>).css(“color”,”red”);</span><br><span class="line">$(<span class="built_in">this</span>).siblings(). css(“color”,””);</span><br></pre></td></tr></table></figure></li><li><p>链式编程</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 链式编程是为了节省代码量，看起来更优雅。</span></span><br><span class="line">$(<span class="built_in">this</span>).css(<span class="string">'color'</span>, <span class="string">'red'</span>).sibling().css(<span class="string">'color'</span>, <span class="string">''</span>); </span><br></pre></td></tr></table></figure><h2 id="操作CSS样式方法"><a href="#操作CSS样式方法" class="headerlink" title="操作CSS样式方法"></a>操作CSS样式方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`1.参数只写属性名，则是返回属性值`</span></span><br><span class="line"><span class="keyword">var</span> strColor = $(<span class="built_in">this</span>).css(<span class="string">'color'</span>);</span><br><span class="line"></span><br><span class="line"><span class="string">`2. 参数是属性名，属性值，逗号分隔，是设置一组样式，</span></span><br><span class="line"><span class="string">属性必须加引号，值如果是数字可以不用跟单位和引号`</span></span><br><span class="line">$(<span class="built_in">this</span>).css(<span class="string">''</span>color<span class="string">''</span>, <span class="string">''</span>red<span class="string">''</span>);</span><br><span class="line"></span><br><span class="line"><span class="string">` 3. 参数可以是对象形式，方便设置多组样式。</span></span><br><span class="line"><span class="string">属性名和属性值用冒号隔开， 属性可以不用加引号`</span></span><br><span class="line">$(<span class="built_in">this</span>).css({ <span class="string">"color"</span>:<span class="string">"white"</span>,<span class="string">"font-size"</span>:<span class="string">"20px"</span>});</span><br></pre></td></tr></table></figure></li></ul></li></ul><h2 id="设置类样式方法"><a href="#设置类样式方法" class="headerlink" title="设置类样式方法"></a>设置类样式方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.添加类</span></span><br><span class="line">$(<span class="string">"div"</span>).addClass(<span class="string">"current"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.删除类</span></span><br><span class="line">$(<span class="string">"div"</span>).removeClass(<span class="string">"current"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3.切换类</span></span><br><span class="line">$(<span class="string">"div"</span>).toggleClass(<span class="string">"current"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4.查询类</span></span><br><span class="line">$(<span class="string">"div"</span>).find(<span class="string">"current"</span>);</span><br></pre></td></tr></table></figure><h2 id="jQuery效果"><a href="#jQuery效果" class="headerlink" title="jQuery效果"></a>jQuery效果</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">- 显示隐藏：show(显示) / hide(隐藏) / toggle(切换) ;</span><br><span class="line">- 滑入滑出：slideDown(下滑) / slideUp(上滑) / slideToggle(滑动切换) ; </span><br><span class="line">- 淡入淡出：fadeIn(淡入) / fadeOut(淡出) / fadeToggle(切换) / fadeTo(调整透明度) ; </span><br><span class="line">- 自定义动画：animate() ;</span><br><span class="line">- 停止动画：stop();</span><br></pre></td></tr></table></figure><p> </p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`显示隐藏代码格式`</span></span><br><span class="line"> $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">"button"</span>).eq(<span class="number">0</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// show() / hide() / toggole()</span></span><br><span class="line"> $(<span class="string">"div"</span>).show(<span class="number">1000</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="number">1</span>);</span><br><span class="line"> });</span><br><span class="line"> })</span><br><span class="line"><span class="string">`滑入滑出代码格式`</span></span><br><span class="line"> $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">"button"</span>).eq(<span class="number">0</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// 下滑动 slideDown() / 上滑动 slideUp() / 滑动切换 slideToggle()</span></span><br><span class="line"> $(<span class="string">"div"</span>).slideDown();</span><br><span class="line"> })</span><br><span class="line"><span class="string">`淡出淡入代码格式`</span></span><br><span class="line"> $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">"button"</span>).eq(<span class="number">0</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// 淡入 fadeIn() / 淡出 fadeOut() / 淡入淡出切换 fadeToggle()</span></span><br><span class="line"> $(<span class="string">"div"</span>).fadeIn(<span class="number">1000</span>);</span><br><span class="line"> <span class="comment">// 修改透明度 fadeTo() 这个速度和透明度要必须写</span></span><br><span class="line"> $(<span class="string">"div"</span>).fadeTo(<span class="number">1000</span>, <span class="number">0.5</span>);</span><br><span class="line"> })</span><br><span class="line"><span class="string">`自定义动画代码格式`</span></span><br><span class="line"> $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">"button"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">"div"</span>).animate({</span><br><span class="line"> <span class="attr">left</span>: <span class="number">500</span>,</span><br><span class="line"> <span class="attr">top</span>: <span class="number">300</span>,</span><br><span class="line"> <span class="attr">opacity</span>: <span class="number">.4</span>,</span><br><span class="line"> <span class="attr">width</span>: <span class="number">500</span></span><br><span class="line"> }, <span class="number">500</span>);</span><br><span class="line"> })</span><br><span class="line"> })</span><br></pre></td></tr></table></figure><h2 id="jQuery属性操作"><a href="#jQuery属性操作" class="headerlink" title="jQuery属性操作"></a>jQuery属性操作</h2><p>==<strong>jQuery 常用属性操作有三种：prop() / attr() / data()</strong>==</p><ol><li><h5 id="元素固有属性值-prop"><a href="#元素固有属性值-prop" class="headerlink" title="元素固有属性值 prop()"></a>元素固有属性值 prop()</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 获取属性语法： prop(<span class="string">"属性"</span>)</span><br><span class="line"><span class="number">2.</span> 设置属性语法： prop(<span class="string">"属性"</span>,<span class="string">"属性值"</span>)</span><br></pre></td></tr></table></figure></li><li><h5 id="元素自定义属性值-attr"><a href="#元素自定义属性值-attr" class="headerlink" title="元素自定义属性值 attr()"></a>元素自定义属性值 attr()</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>attr(<span class="string">"属性"</span>) <span class="comment">//类似原生getAttribute</span></span><br><span class="line"><span class="number">2.</span>attr(<span class="string">"属性"</span>,<span class="string">"属性值"</span>) <span class="comment">//类似原生setAttribute</span></span><br></pre></td></tr></table></figure></li><li><h5 id="数据缓存-data"><a href="#数据缓存-data" class="headerlink" title="数据缓存 data()"></a>数据缓存 data()</h5></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>data(<span class="string">"name"</span>,<span class="string">"value"</span>) <span class="comment">//向被选元素附加数据</span></span><br><span class="line"><span class="number">2.</span>data(<span class="string">"name"</span>) <span class="comment">//向被选元素获取数据</span></span><br><span class="line">·还可以读取 HTML5 自定义属性 data-index ，得到的是数字型·</span><br></pre></td></tr></table></figure><h2 id="jQuery文本属性值"><a href="#jQuery文本属性值" class="headerlink" title="jQuery文本属性值"></a>jQuery文本属性值</h2><p>==<strong>jQuery的文本属性值常见操作有三种：html() / text() / val()</strong>==</p><p> <strong>分别对应JS中的 innerHTML 、innerText 和 value 属性</strong>==</p><ol><li><h5 id="普通元素获取-html-（相当于原生-innerHTML）"><a href="#普通元素获取-html-（相当于原生-innerHTML）" class="headerlink" title="普通元素获取 html() （相当于原生 innerHTML）"></a>普通元素获取 html() （相当于原生 innerHTML）</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">html() <span class="comment">//获取元素的内容</span></span><br><span class="line">html(<span class="string">"内容"</span>) <span class="comment">//设置元素的内容</span></span><br></pre></td></tr></table></figure></li><li><h5 id="普通元素文本内容text-（相当与原生-innerHTML）"><a href="#普通元素文本内容text-（相当与原生-innerHTML）" class="headerlink" title="普通元素文本内容text() （相当与原生 innerHTML）"></a>普通元素文本内容text() （相当与原生 innerHTML）</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">text() <span class="comment">//获取元素的文本内容</span></span><br><span class="line">text(<span class="string">"文本内容"</span>) <span class="comment">//设置元素的文本内容</span></span><br></pre></td></tr></table></figure></li><li><h5 id="表单的值-val-（相当与原生-value）"><a href="#表单的值-val-（相当与原生-value）" class="headerlink" title="表单的值 val() （相当与原生 value）"></a>表单的值 val() （相当与原生 value）</h5></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">val() <span class="comment">//获取表单的值 </span></span><br><span class="line">val(<span class="string">"内容"</span>) <span class="comment">//设置表单的值</span></span><br></pre></td></tr></table></figure><h2 id="jQuery元素操作"><a href="#jQuery元素操作" class="headerlink" title="jQuery元素操作"></a>jQuery元素操作</h2><p>==<strong>jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。</strong>==</p><h5 id="！-遍历-jQuery-对象中的每一项，回调函数中元素为-DOM-对象，想要使用-jQuery-方法需要转换"><a href="#！-遍历-jQuery-对象中的每一项，回调函数中元素为-DOM-对象，想要使用-jQuery-方法需要转换" class="headerlink" title="！ 遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换"></a>！ 遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换</h5><ol><li><h5 id="遍历元素"><a href="#遍历元素" class="headerlink" title="遍历元素"></a>遍历元素</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`方法一`</span></span><br><span class="line">$(<span class="string">"div"</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"> index ,domEle</span>)</span>{方法...})</span><br><span class="line"><span class="number">1.</span> each()方法遍历匹配每一个元素。主要用DOM处理</span><br><span class="line"><span class="number">2.</span> 回调函数有<span class="number">2</span>个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jquery对象</span><br><span class="line"></span><br><span class="line"><span class="string">`方法二`</span></span><br><span class="line">$.each(<span class="built_in">Object</span>,<span class="function"><span class="keyword">function</span>(<span class="params">index , element</span>)</span>{方法...})</span><br><span class="line"><span class="number">1.</span> $.each 可用于遍历任何对象。主要用于数据处理，比如数组，对象</span><br><span class="line"><span class="number">2.</span> 里面的函数有<span class="number">2</span>个参数：index 是每个元素的索引号；element 遍历内容</span><br></pre></td></tr></table></figure></li><li><p>创建，添加，删除</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 创建</span><br><span class="line">$(<span class="string">"<li></li>"</span>)</span><br><span class="line"><span class="number">2.</span>内部添加 </span><br><span class="line">element.append(<span class="string">"内容"</span>) <span class="comment">//把内容放入匹配元素内部最后面，类似原生appendChild</span></span><br><span class="line">element.prepend(<span class="string">"内容"</span>) <span class="comment">//把内容放入匹配元素内部最前面</span></span><br><span class="line"><span class="number">3.</span>外部添加 </span><br><span class="line">element.after(<span class="string">"内容"</span>) <span class="comment">//把内容放入目标元素后面</span></span><br><span class="line">element.before(<span class="string">"内容"</span>) <span class="comment">//把内容放入目标元素前面</span></span><br><span class="line"><span class="string">`内部添加元素，生成之后，他们是父子关系`</span></span><br><span class="line"><span class="string">`外部添加元素，生成之后，他们是兄弟关系`</span></span><br><span class="line"><span class="number">4.</span>删除元素</span><br><span class="line">element.remove() <span class="comment">//删除匹配的元素(本身)</span></span><br><span class="line">element.empty() <span class="comment">//删除匹配的元素集合中所有的子节点</span></span><br><span class="line">element.html() <span class="comment">//清空匹配的元素内容</span></span><br><span class="line"><span class="string">`remove删除元素本身`</span></span><br><span class="line"><span class="string">`empt() 和 html("")作用等价，都可以删除元素里面的内容，只不过html还可以设置内容`</span></span><br></pre></td></tr></table></figure></li></ol><h2 id="jQuery尺寸-位置操作"><a href="#jQuery尺寸-位置操作" class="headerlink" title="jQuery尺寸 位置操作"></a>jQuery尺寸 位置操作</h2><table><thead><tr><th>语法</th><th>用法（取得匹配元素宽度和高度值）</th></tr></thead><tbody><tr><td>width() / height()</td><td>只算width / height</td></tr><tr><td>innerWidth() / innerHeight</td><td>包含 padding</td></tr><tr><td>outerWidth() / outerHeight</td><td>包含 padding ， border</td></tr><tr><td>outerWidth(true) / outerHeight</td><td>包含 padding ，border，margin</td></tr></tbody></table><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小 `</span></span><br><span class="line"><span class="built_in">console</span>.log($(<span class="string">"div"</span>).outerWidth()); </span><br><span class="line"><span class="string">`outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin`</span></span><br><span class="line"><span class="built_in">console</span>.log($(<span class="string">"div"</span>).outerWidth(<span class="literal">true</span>));</span><br><span class="line"><span class="comment">//以上参数为空 ，则是获取相应值，返回的是数字型</span></span><br><span class="line"><span class="comment">//如果参数为数字，则是修改相应值 </span></span><br><span class="line"><span class="comment">//参数可以不必写单位</span></span><br></pre></td></tr></table></figure><h2 id="jQuery位置操作"><a href="#jQuery位置操作" class="headerlink" title="jQuery位置操作"></a>jQuery位置操作</h2><p>==<strong>jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft()</strong> ==</p><ul><li><h5 id="offset-设置或获取元素偏移"><a href="#offset-设置或获取元素偏移" class="headerlink" title="offset() 设置或获取元素偏移"></a>offset() 设置或获取元素偏移</h5></li></ul><ol><li><p>offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。</p></li><li><p>offset().top 用于获取距离文档顶部的距离， offset().left 用于获取距离文档左侧的距离</p></li><li><p>可以设置元素的偏移量：offset({left：10，left：30})</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取设置距离文档的位置（偏移）</span></span><br><span class="line"><span class="built_in">console</span>.log($(<span class="string">".son"</span>).offset());</span><br><span class="line"><span class="built_in">console</span>.log($(<span class="string">".son"</span>).offset().top);</span><br></pre></td></tr></table></figure></li></ol><ul><li><h5 id="position-获取元素偏移"><a href="#position-获取元素偏移" class="headerlink" title="position() 获取元素偏移"></a>position() 获取元素偏移</h5></li></ul><ol><li><p>position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。</p></li><li><p>offset().top 用于获取距离文档顶部的距离， offset().left 用于获取距离文档左侧的距离</p></li><li><p>该方法只能获取</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，</span></span><br><span class="line"><span class="comment">//则以文档为准 ; 这个方法只能获取不能设置偏移</span></span><br><span class="line"><span class="built_in">console</span>.log($(<span class="string">".son"</span>).position());</span><br></pre></td></tr></table></figure></li></ol><ul><li><h5 id="scrollTop-scrollLeft-设置或获取元素被卷去的头部和左侧"><a href="#scrollTop-scrollLeft-设置或获取元素被卷去的头部和左侧" class="headerlink" title="scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧"></a>scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧</h5></li></ul><ol><li>scrollTop()方法设置或返回被选元素被卷去的头部</li><li>不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()</span></span><br><span class="line">$(<span class="built_in">document</span>).scrollTop(<span class="number">100</span>);</span><br></pre></td></tr></table></figure><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="D:\学习资料\Jquery课件\day02\teach\images\总结.png"></p><h2 id="jQuery事件注册"><a href="#jQuery事件注册" class="headerlink" title="jQuery事件注册"></a>jQuery事件注册</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ <span class="comment">// 单个事件注册</span></span><br><span class="line"> $(<span class="string">"div"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="built_in">this</span>).css(<span class="string">"background"</span>, <span class="string">"purple"</span>);</span><br><span class="line"> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h3 id="jQuery事件基础"><a href="#jQuery事件基础" class="headerlink" title="jQuery事件基础"></a>jQuery事件基础</h3><ul><li><h4 id="页面事件"><a href="#页面事件" class="headerlink" title="页面事件"></a>页面事件</h4><ol><li><p>onload事件</p><p>onload表示文档加载完成后再执行的一个事件</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">语法：</span><br><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</span><br><span class="line"><span class="string">`在JavaScript中window.onload只能调用一次`</span></span><br></pre></td></tr></table></figure></li><li><p><code>ready事件</code></p><p>ready表示文档加载完成后再执行的一个事件</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">语法：<span class="number">4</span>种写法；</span><br><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{...});</span><br><span class="line">jQuery(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{...});</span><br><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{...}); 🉑推荐</span><br><span class="line">jQuery(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{...});</span><br><span class="line"><span class="string">`$(document).ready()可以多次调用`</span></span><br></pre></td></tr></table></figure></li><li><p>select事件</p><p>当我们选中’单行文本框‘或‘多行文本框’的内容时，就会触发select事件；</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">语法：</span><br><span class="line">$(<span class="string">'#text'</span>).select(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{alert(<span class="string">'你选中了单(多)行文本框的内容'</span>)})；</span><br></pre></td></tr></table></figure></li><li><p>change事件</p><p>change事件常用与‘具有多个选项的表单元素’中change事件在以下3种情况下触发；</p><ul><li><p>单选框选择某一项时触发</p></li><li><p>复选框选择某一项时触发</p></li><li><p>下拉列表选择某一项时触发</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"> </span><br></pre></td></tr></table></figure></li></ul></li><li><p>contextmenu事件</p><p>常用的编辑事件只有一种，那就是contextmenu事件</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">场景：禁用鼠标右键</span><br><span class="line">$(<span class="string">'body'</span>).contextmenu(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">return</span> <span class="literal">false</span>;})</span><br><span class="line"></span><br><span class="line">场景：点击鼠标右键切换背景颜色</span><br><span class="line">$(<span class="string">'div'</span>).contextmenu(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{$(<span class="built_in">this</span>).css(<span class="string">'background-color'</span>,<span class="string">'skyblue'</span>)})</span><br></pre></td></tr></table></figure></li><li><p>sroll()滚动事件</p><p>scroll()常和scrollTop()方法一起</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">语法：</span><br><span class="line">$().scroll(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{...})</span><br></pre></td></tr></table></figure></li><li></li><li></li></ol></li></ul><h3 id="jQuery事件处理"><a href="#jQuery事件处理" class="headerlink" title="jQuery事件处理"></a>jQuery事件处理</h3><ul><li><h5 id="on-用于事件绑定，目前最好用的事件绑定方法"><a href="#on-用于事件绑定，目前最好用的事件绑定方法" class="headerlink" title="on(): 用于事件绑定，目前最好用的事件绑定方法"></a>on(): 用于事件绑定，目前最好用的事件绑定方法</h5></li><li><h5 id="off-事件解绑"><a href="#off-事件解绑" class="headerlink" title="off(): 事件解绑"></a>off(): 事件解绑</h5></li><li><h5 id="trigger-triggerHandler-事件触发"><a href="#trigger-triggerHandler-事件触发" class="headerlink" title="trigger() / triggerHandler(): 事件触发"></a>trigger() / triggerHandler(): 事件触发</h5><h4 id="事件处理-on-绑定事件"><a href="#事件处理-on-绑定事件" class="headerlink" title="==事件处理 on() 绑定事件=="></a>==事件处理 on() 绑定事件==</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`on 可绑定多个事件，多个事件处理程序`</span></span><br><span class="line"><span class="comment">//事件</span></span><br><span class="line">$(<span class="string">'div'</span>).on({ </span><br><span class="line"> <span class="attr">mouseover</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{},</span><br><span class="line"> <span class="attr">click</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{},</span><br><span class="line"> <span class="attr">blur</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}</span><br><span class="line">})；</span><br><span class="line"><span class="comment">//如果事件处理程序相同 可以套用</span></span><br><span class="line">$(<span class="string">'div'</span>).on(<span class="string">'mouseover mouseout'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="built_in">this</span>).toggleClass(<span class="string">'current'</span>);</span><br><span class="line">});</span><br><span class="line"><span class="comment">//可以事件委派操作</span></span><br><span class="line">（把原来加给子元素身上的事件绑盯定在父元素身上，就是把事件委派给父元素）</span><br><span class="line">$(<span class="string">'ul'</span>).on(<span class="string">'click'</span>,<span class="string">'li'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="string">'Hello World!'</span>)</span><br><span class="line">})</span><br><span class="line"><span class="comment">//on可以给未来动态的元素绑定事件</span></span><br><span class="line">$(<span class="string">'ol'</span>).on(<span class="string">'click'</span>,<span class="string">'li'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line">})</span><br><span class="line"><span class="keyword">var</span> li = $(<span class="string">'<li>我可以被替换哦</li>'</span>)</span><br><span class="line">$(<span class="string">'ol'</span>).append(li);</span><br></pre></td></tr></table></figure><h3 id="事假处理-off-解绑事件"><a href="#事假处理-off-解绑事件" class="headerlink" title="==事假处理 off() 解绑事件=="></a>==事假处理 off() 解绑事件==</h3></li></ul><h4 id="off-的方法可以移除通过-on-方法添加的事件处理程序"><a href="#off-的方法可以移除通过-on-方法添加的事件处理程序" class="headerlink" title="off() 的方法可以移除通过 on() 方法添加的事件处理程序"></a>off() 的方法可以移除通过 on() 方法添加的事件处理程序</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'p'</span>).off() <span class="comment">//解绑p元素首映事件处理程序</span></span><br><span class="line">$(<span class="string">'p'</span>).off(<span class="string">'click'</span>) <span class="comment">//解绑p元素上面的点击事件 后面的foo 是侦听函数名</span></span><br><span class="line">$(<span class="string">'ul'</span>).off(<span class="string">'click'</span>,<span class="string">'li'</span>) <span class="comment">//解绑事件委托</span></span><br><span class="line"></span><br><span class="line">如果有的事件只想触发一次，可以使用 one() 来绑定事件</span><br><span class="line"> <span class="comment">// one() 但是它只能触发事件一次</span></span><br><span class="line"> $(<span class="string">"p"</span>).one(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line"> })</span><br></pre></td></tr></table></figure><h3 id="事件处理trigger-自动触发事件"><a href="#事件处理trigger-自动触发事件" class="headerlink" title="==事件处理trigger()自动触发事件=="></a>==事件处理trigger()自动触发事件==</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 第一种：trigger()</span></span><br><span class="line">element.click() <span class="comment">//第一种简写模式 </span></span><br><span class="line">element.trigger(<span class="string">'type'</span>) <span class="comment">//第二种自动触发模式</span></span><br><span class="line"><span class="comment">// 第二种：triggerHandler()</span></span><br><span class="line">element.triggerHandler(type) <span class="comment">//第三种自动触发模式</span></span><br></pre></td></tr></table></figure><h3 id="jQuery事件对象"><a href="#jQuery事件对象" class="headerlink" title="==jQuery事件对象=="></a>==jQuery事件对象==</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">语法： element.on(events,[selector],<span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>{})</span><br><span class="line">阻止默认行为：event.preventDefault() 或者 <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">阻止冒泡：event.stopPropagation()</span><br></pre></td></tr></table></figure><h2 id="jQuery-拷贝对象"><a href="#jQuery-拷贝对象" class="headerlink" title="jQuery 拷贝对象"></a>jQuery 拷贝对象</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">语法： $.extend([deep],target,object1,[objectN])</span><br></pre></td></tr></table></figure><ol><li>deep：如果设为true 为深拷贝 ，默认为false 浅拷贝</li><li>target：要拷贝的目标对象</li><li>object1：待拷贝第一个对象的对象</li><li>objectN：待拷贝第N个对象的对象</li><li>浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象==会影响==被拷贝对象</li><li>深拷贝，前面加true，完全克隆，修改目标对象==不会影响==被拷贝对象</li></ol><h3 id="jQuery多库共存"><a href="#jQuery多库共存" class="headerlink" title="==jQuery多库共存=="></a>==jQuery多库共存==</h3><p>==保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存==</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">语法：jQuery解决方案：</span><br><span class="line"><span class="number">1.</span> 把里面的$符号 统一改成jQuery。 比如jQuery(<span class="string">'div'</span>)</span><br><span class="line"><span class="number">2.</span> jQuery 变量规定新的名称：$.noConflict() <span class="keyword">var</span> xx = $.noConflict();</span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title>eslintrc.js文件配置</title>
<link href="/2020/04/22/eslintrc.js%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE/"/>
<url>/2020/04/22/eslintrc.js%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE/</url>
<content type="html"><![CDATA[<h1 id="eslintrc-js文件配置"><a href="#eslintrc-js文件配置" class="headerlink" title="eslintrc.js文件配置"></a>eslintrc.js文件配置</h1><hr><p> 常见报错的默认eslint规则：</p><ul><li>代码末尾不能加分号 <code>;</code></li><li>代码中不能存在多行空行；</li><li>tab键不能使用，必须换成两个空格；</li><li>代码中不能存在声明了但未使用的变量；</li></ul><h4 id="可直接关闭eslint规则-注释文件中的-rules配置即可"><a href="#可直接关闭eslint规则-注释文件中的-rules配置即可" class="headerlink" title="可直接关闭eslint规则 注释文件中的 rules配置即可"></a>可直接关闭eslint规则 注释文件中的 rules配置即可</h4><h3 id="配置参数"><a href="#配置参数" class="headerlink" title="配置参数"></a>配置参数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">rules: {</span><br><span class="line"> <span class="string">"规则名"</span>: [规则值, 规则配置]</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="string">`规则值`</span></span><br><span class="line"><span class="string">"off"</span>或者<span class="number">0</span> <span class="comment">//关闭规则关闭</span></span><br><span class="line"><span class="string">"warn"</span>或者<span class="number">1</span> <span class="comment">//在打开的规则作为警告（不影响退出代码）</span></span><br><span class="line"><span class="string">"error"</span>或者<span class="number">2</span> <span class="comment">//把规则作为一个错误（退出代码触发时为1）</span></span><br></pre></td></tr></table></figure><h3 id="常见规则列表"><a href="#常见规则列表" class="headerlink" title="常见规则列表"></a>常见规则列表</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"no-alert"</span>: <span class="number">0</span>,<span class="comment">//禁止使用alert confirm prompt</span></span><br><span class="line"><span class="string">"no-array-constructor"</span>: <span class="number">2</span>,<span class="comment">//禁止使用数组构造器</span></span><br><span class="line"><span class="string">"no-bitwise"</span>: <span class="number">0</span>,<span class="comment">//禁止使用按位运算符</span></span><br><span class="line"><span class="string">"no-caller"</span>: <span class="number">1</span>,<span class="comment">//禁止使用arguments.caller或arguments.callee</span></span><br><span class="line"><span class="string">"no-catch-shadow"</span>: <span class="number">2</span>,<span class="comment">//禁止catch子句参数与外部作用域变量同名</span></span><br><span class="line"><span class="string">"no-class-assign"</span>: <span class="number">2</span>,<span class="comment">//禁止给类赋值</span></span><br><span class="line"><span class="string">"no-cond-assign"</span>: <span class="number">2</span>,<span class="comment">//禁止在条件表达式中使用赋值语句</span></span><br><span class="line"><span class="string">"no-console"</span>: <span class="number">2</span>,<span class="comment">//禁止使用console</span></span><br><span class="line"><span class="string">"no-const-assign"</span>: <span class="number">2</span>,<span class="comment">//禁止修改const声明的变量</span></span><br><span class="line"><span class="string">"no-constant-condition"</span>: <span class="number">2</span>,<span class="comment">//禁止在条件中使用常量表达式 if(true) if(1)</span></span><br><span class="line"><span class="string">"no-continue"</span>: <span class="number">0</span>,<span class="comment">//禁止使用continue</span></span><br><span class="line"><span class="string">"no-control-regex"</span>: <span class="number">2</span>,<span class="comment">//禁止在正则表达式中使用控制字符</span></span><br><span class="line"><span class="string">"no-debugger"</span>: <span class="number">2</span>,<span class="comment">//禁止使用debugger</span></span><br><span class="line"><span class="string">"no-delete-var"</span>: <span class="number">2</span>,<span class="comment">//不能对var声明的变量使用delete操作符</span></span><br><span class="line"><span class="string">"no-div-regex"</span>: <span class="number">1</span>,<span class="comment">//不能使用看起来像除法的正则表达式/=foo/</span></span><br><span class="line"><span class="string">"no-dupe-keys"</span>: <span class="number">2</span>,<span class="comment">//在创建对象字面量时不允许键重复 {a:1,a:1}</span></span><br><span class="line"><span class="string">"no-dupe-args"</span>: <span class="number">2</span>,<span class="comment">//函数参数不能重复</span></span><br><span class="line"><span class="string">"no-duplicate-case"</span>: <span class="number">2</span>,<span class="comment">//switch中的case标签不能重复</span></span><br><span class="line"><span class="string">"no-else-return"</span>: <span class="number">2</span>,<span class="comment">//如果if语句里面有return,后面不能跟else语句</span></span><br><span class="line"><span class="string">"no-empty"</span>: <span class="number">2</span>,<span class="comment">//块语句中的内容不能为空</span></span><br><span class="line"><span class="string">"no-empty-character-class"</span>: <span class="number">2</span>,<span class="comment">//正则表达式中的[]内容不能为空</span></span><br><span class="line"><span class="string">"no-empty-label"</span>: <span class="number">2</span>,<span class="comment">//禁止使用空label</span></span><br><span class="line"><span class="string">"no-eq-null"</span>: <span class="number">2</span>,<span class="comment">//禁止对null使用==或!=运算符</span></span><br><span class="line"><span class="string">"no-eval"</span>: <span class="number">1</span>,<span class="comment">//禁止使用eval</span></span><br><span class="line"><span class="string">"no-ex-assign"</span>: <span class="number">2</span>,<span class="comment">//禁止给catch语句中的异常参数赋值</span></span><br><span class="line"><span class="string">"no-extend-native"</span>: <span class="number">2</span>,<span class="comment">//禁止扩展native对象</span></span><br><span class="line"><span class="string">"no-extra-bind"</span>: <span class="number">2</span>,<span class="comment">//禁止不必要的函数绑定</span></span><br><span class="line"><span class="string">"no-extra-boolean-cast"</span>: <span class="number">2</span>,<span class="comment">//禁止不必要的bool转换</span></span><br><span class="line"><span class="string">"no-extra-parens"</span>: <span class="number">2</span>,<span class="comment">//禁止非必要的括号</span></span><br><span class="line"><span class="string">"no-extra-semi"</span>: <span class="number">2</span>,<span class="comment">//禁止多余的冒号</span></span><br><span class="line"><span class="string">"no-fallthrough"</span>: <span class="number">1</span>,<span class="comment">//禁止switch穿透</span></span><br><span class="line"><span class="string">"no-floating-decimal"</span>: <span class="number">2</span>,<span class="comment">//禁止省略浮点数中的0 .5 3.</span></span><br><span class="line"><span class="string">"no-func-assign"</span>: <span class="number">2</span>,<span class="comment">//禁止重复的函数声明</span></span><br><span class="line"><span class="string">"no-implicit-coercion"</span>: <span class="number">1</span>,<span class="comment">//禁止隐式转换</span></span><br><span class="line"><span class="string">"no-implied-eval"</span>: <span class="number">2</span>,<span class="comment">//禁止使用隐式eval</span></span><br><span class="line"><span class="string">"no-inline-comments"</span>: <span class="number">0</span>,<span class="comment">//禁止行内备注</span></span><br><span class="line"><span class="string">"no-inner-declarations"</span>: [<span class="number">2</span>, <span class="string">"functions"</span>],<span class="comment">//禁止在块语句中使用声明（变量或函数）</span></span><br><span class="line"><span class="string">"no-invalid-regexp"</span>: <span class="number">2</span>,<span class="comment">//禁止无效的正则表达式</span></span><br><span class="line"><span class="string">"no-invalid-this"</span>: <span class="number">2</span>,<span class="comment">//禁止无效的this，只能用在构造器，类，对象字面量</span></span><br><span class="line"><span class="string">"no-irregular-whitespace"</span>: <span class="number">2</span>,<span class="comment">//不能有不规则的空格</span></span><br><span class="line"><span class="string">"no-iterator"</span>: <span class="number">2</span>,<span class="comment">//禁止使用__iterator__ 属性</span></span><br><span class="line"><span class="string">"no-label-var"</span>: <span class="number">2</span>,<span class="comment">//label名不能与var声明的变量名相同</span></span><br><span class="line"><span class="string">"no-labels"</span>: <span class="number">2</span>,<span class="comment">//禁止标签声明</span></span><br><span class="line"><span class="string">"no-lone-blocks"</span>: <span class="number">2</span>,<span class="comment">//禁止不必要的嵌套块</span></span><br><span class="line"><span class="string">"no-lonely-if"</span>: <span class="number">2</span>,<span class="comment">//禁止else语句内只有if语句</span></span><br><span class="line"><span class="string">"no-loop-func"</span>: <span class="number">1</span>,<span class="comment">//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）</span></span><br><span class="line"><span class="string">"no-mixed-requires"</span>: [<span class="number">0</span>, <span class="literal">false</span>],<span class="comment">//声明时不能混用声明类型</span></span><br><span class="line"><span class="string">"no-mixed-spaces-and-tabs"</span>: [<span class="number">2</span>, <span class="literal">false</span>],<span class="comment">//禁止混用tab和空格</span></span><br><span class="line"><span class="string">"linebreak-style"</span>: [<span class="number">0</span>, <span class="string">"windows"</span>],<span class="comment">//换行风格</span></span><br><span class="line"><span class="string">"no-multi-spaces"</span>: <span class="number">1</span>,<span class="comment">//不能用多余的空格</span></span><br><span class="line"><span class="string">"no-multi-str"</span>: <span class="number">2</span>,<span class="comment">//字符串不能用\换行</span></span><br><span class="line"><span class="string">"no-multiple-empty-lines"</span>: [<span class="number">1</span>, {<span class="string">"max"</span>: <span class="number">2</span>}],<span class="comment">//空行最多不能超过2行</span></span><br><span class="line"><span class="string">"no-native-reassign"</span>: <span class="number">2</span>,<span class="comment">//不能重写native对象</span></span><br><span class="line"><span class="string">"no-negated-in-lhs"</span>: <span class="number">2</span>,<span class="comment">//in 操作符的左边不能有!</span></span><br><span class="line"><span class="string">"no-nested-ternary"</span>: <span class="number">0</span>,<span class="comment">//禁止使用嵌套的三目运算</span></span><br><span class="line"><span class="string">"no-new"</span>: <span class="number">1</span>,<span class="comment">//禁止在使用new构造一个实例后不赋值</span></span><br><span class="line"><span class="string">"no-new-func"</span>: <span class="number">1</span>,<span class="comment">//禁止使用new Function</span></span><br><span class="line"><span class="string">"no-new-object"</span>: <span class="number">2</span>,<span class="comment">//禁止使用new Object()</span></span><br><span class="line"><span class="string">"no-new-require"</span>: <span class="number">2</span>,<span class="comment">//禁止使用new require</span></span><br><span class="line"><span class="string">"no-new-wrappers"</span>: <span class="number">2</span>,<span class="comment">//禁止使用new创建包装实例，new String new Boolean new Number</span></span><br><span class="line"><span class="string">"no-obj-calls"</span>: <span class="number">2</span>,<span class="comment">//不能调用内置的全局对象，比如Math() JSON()</span></span><br><span class="line"><span class="string">"no-octal"</span>: <span class="number">2</span>,<span class="comment">//禁止使用八进制数字</span></span><br><span class="line"><span class="string">"no-octal-escape"</span>: <span class="number">2</span>,<span class="comment">//禁止使用八进制转义序列</span></span><br><span class="line"><span class="string">"no-param-reassign"</span>: <span class="number">2</span>,<span class="comment">//禁止给参数重新赋值</span></span><br><span class="line"><span class="string">"no-path-concat"</span>: <span class="number">0</span>,<span class="comment">//node中不能使用__dirname或__filename做路径拼接</span></span><br><span class="line"><span class="string">"no-plusplus"</span>: <span class="number">0</span>,<span class="comment">//禁止使用++，--</span></span><br><span class="line"><span class="string">"no-process-env"</span>: <span class="number">0</span>,<span class="comment">//禁止使用process.env</span></span><br><span class="line"><span class="string">"no-process-exit"</span>: <span class="number">0</span>,<span class="comment">//禁止使用process.exit()</span></span><br><span class="line"><span class="string">"no-proto"</span>: <span class="number">2</span>,<span class="comment">//禁止使用__proto__属性</span></span><br><span class="line"><span class="string">"no-redeclare"</span>: <span class="number">2</span>,<span class="comment">//禁止重复声明变量</span></span><br><span class="line"><span class="string">"no-regex-spaces"</span>: <span class="number">2</span>,<span class="comment">//禁止在正则表达式字面量中使用多个空格 /foo bar/</span></span><br><span class="line"><span class="string">"no-restricted-modules"</span>: <span class="number">0</span>,<span class="comment">//如果禁用了指定模块，使用就会报错</span></span><br><span class="line"><span class="string">"no-return-assign"</span>: <span class="number">1</span>,<span class="comment">//return 语句中不能有赋值表达式</span></span><br><span class="line"><span class="string">"no-script-url"</span>: <span class="number">0</span>,<span class="comment">//禁止使用javascript:void(0)</span></span><br><span class="line"><span class="string">"no-self-compare"</span>: <span class="number">2</span>,<span class="comment">//不能比较自身</span></span><br><span class="line"><span class="string">"no-sequences"</span>: <span class="number">0</span>,<span class="comment">//禁止使用逗号运算符</span></span><br><span class="line"><span class="string">"no-shadow"</span>: <span class="number">2</span>,<span class="comment">//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名</span></span><br><span class="line"><span class="string">"no-shadow-restricted-names"</span>: <span class="number">2</span>,<span class="comment">//严格模式中规定的限制标识符不能作为声明时的变量名使用</span></span><br><span class="line"><span class="string">"no-spaced-func"</span>: <span class="number">2</span>,<span class="comment">//函数调用时 函数名与()之间不能有空格</span></span><br><span class="line"><span class="string">"no-sparse-arrays"</span>: <span class="number">2</span>,<span class="comment">//禁止稀疏数组， [1,,2]</span></span><br><span class="line"><span class="string">"no-sync"</span>: <span class="number">0</span>,<span class="comment">//nodejs 禁止同步方法</span></span><br><span class="line"><span class="string">"no-ternary"</span>: <span class="number">0</span>,<span class="comment">//禁止使用三目运算符</span></span><br><span class="line"><span class="string">"no-trailing-spaces"</span>: <span class="number">1</span>,<span class="comment">//一行结束后面不要有空格</span></span><br><span class="line"><span class="string">"no-this-before-super"</span>: <span class="number">0</span>,<span class="comment">//在调用super()之前不能使用this或super</span></span><br><span class="line"><span class="string">"no-throw-literal"</span>: <span class="number">2</span>,<span class="comment">//禁止抛出字面量错误 throw "error";</span></span><br><span class="line"><span class="string">"no-undef"</span>: <span class="number">1</span>,<span class="comment">//不能有未定义的变量</span></span><br><span class="line"><span class="string">"no-undef-init"</span>: <span class="number">2</span>,<span class="comment">//变量初始化时不能直接给它赋值为undefined</span></span><br><span class="line"><span class="string">"no-undefined"</span>: <span class="number">2</span>,<span class="comment">//不能使用undefined</span></span><br><span class="line"><span class="string">"no-unexpected-multiline"</span>: <span class="number">2</span>,<span class="comment">//避免多行表达式</span></span><br><span class="line"><span class="string">"no-underscore-dangle"</span>: <span class="number">1</span>,<span class="comment">//标识符不能以_开头或结尾</span></span><br><span class="line"><span class="string">"no-unneeded-ternary"</span>: <span class="number">2</span>,<span class="comment">//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;</span></span><br><span class="line"><span class="string">"no-unreachable"</span>: <span class="number">2</span>,<span class="comment">//不能有无法执行的代码</span></span><br><span class="line"><span class="string">"no-unused-expressions"</span>: <span class="number">2</span>,<span class="comment">//禁止无用的表达式</span></span><br><span class="line"><span class="string">"no-unused-vars"</span>: [<span class="number">2</span>, {<span class="string">"vars"</span>: <span class="string">"all"</span>, <span class="string">"args"</span>: <span class="string">"after-used"</span>}],<span class="comment">//不能有声明后未被使用的变量或参数</span></span><br><span class="line"><span class="string">"no-use-before-define"</span>: <span class="number">2</span>,<span class="comment">//未定义前不能使用</span></span><br><span class="line"><span class="string">"no-useless-call"</span>: <span class="number">2</span>,<span class="comment">//禁止不必要的call和apply</span></span><br><span class="line"><span class="string">"no-void"</span>: <span class="number">2</span>,<span class="comment">//禁用void操作符</span></span><br><span class="line"><span class="string">"no-var"</span>: <span class="number">0</span>,<span class="comment">//禁用var，用let和const代替</span></span><br><span class="line"><span class="string">"no-warning-comments"</span>: [<span class="number">1</span>, { <span class="string">"terms"</span>: [<span class="string">"todo"</span>, <span class="string">"fixme"</span>, <span class="string">"xxx"</span>], <span class="string">"location"</span>: <span class="string">"start"</span> }],<span class="comment">//不能有警告备注</span></span><br><span class="line"><span class="string">"no-with"</span>: <span class="number">2</span>,<span class="comment">//禁用with</span></span><br><span class="line"><span class="string">"array-bracket-spacing"</span>: [<span class="number">2</span>, <span class="string">"never"</span>],<span class="comment">//是否允许非空数组里面有多余的空格</span></span><br><span class="line"><span class="string">"arrow-parens"</span>: <span class="number">0</span>,<span class="comment">//箭头函数用小括号括起来</span></span><br><span class="line"><span class="string">"arrow-spacing"</span>: <span class="number">0</span>,<span class="comment">//=>的前/后括号</span></span><br><span class="line"><span class="string">"accessor-pairs"</span>: <span class="number">0</span>,<span class="comment">//在对象中使用getter/setter</span></span><br><span class="line"><span class="string">"block-scoped-var"</span>: <span class="number">0</span>,<span class="comment">//块语句中使用var</span></span><br><span class="line"><span class="string">"brace-style"</span>: [<span class="number">1</span>, <span class="string">"1tbs"</span>],<span class="comment">//大括号风格</span></span><br><span class="line"><span class="string">"callback-return"</span>: <span class="number">1</span>,<span class="comment">//避免多次调用回调什么的</span></span><br><span class="line"><span class="string">"camelcase"</span>: <span class="number">2</span>,<span class="comment">//强制驼峰法命名</span></span><br><span class="line"><span class="string">"comma-dangle"</span>: [<span class="number">2</span>, <span class="string">"never"</span>],<span class="comment">//对象字面量项尾不能有逗号</span></span><br><span class="line"><span class="string">"comma-spacing"</span>: <span class="number">0</span>,<span class="comment">//逗号前后的空格</span></span><br><span class="line"><span class="string">"comma-style"</span>: [<span class="number">2</span>, <span class="string">"last"</span>],<span class="comment">//逗号风格，换行时在行首还是行尾</span></span><br><span class="line"><span class="string">"complexity"</span>: [<span class="number">0</span>, <span class="number">11</span>],<span class="comment">//循环复杂度</span></span><br><span class="line"><span class="string">"computed-property-spacing"</span>: [<span class="number">0</span>, <span class="string">"never"</span>],<span class="comment">//是否允许计算后的键名什么的</span></span><br><span class="line"><span class="string">"consistent-return"</span>: <span class="number">0</span>,<span class="comment">//return 后面是否允许省略</span></span><br><span class="line"><span class="string">"consistent-this"</span>: [<span class="number">2</span>, <span class="string">"that"</span>],<span class="comment">//this别名</span></span><br><span class="line"><span class="string">"constructor-super"</span>: <span class="number">0</span>,<span class="comment">//非派生类不能调用super，派生类必须调用super</span></span><br><span class="line"><span class="string">"curly"</span>: [<span class="number">2</span>, <span class="string">"all"</span>],<span class="comment">//必须使用 if(){} 中的{}</span></span><br><span class="line"><span class="string">"default-case"</span>: <span class="number">2</span>,<span class="comment">//switch语句最后必须有default</span></span><br><span class="line"><span class="string">"dot-location"</span>: <span class="number">0</span>,<span class="comment">//对象访问符的位置，换行的时候在行首还是行尾</span></span><br><span class="line"><span class="string">"dot-notation"</span>: [<span class="number">0</span>, { <span class="string">"allowKeywords"</span>: <span class="literal">true</span> }],<span class="comment">//避免不必要的方括号</span></span><br><span class="line"><span class="string">"eol-last"</span>: <span class="number">0</span>,<span class="comment">//文件以单一的换行符结束</span></span><br><span class="line"><span class="string">"eqeqeq"</span>: <span class="number">2</span>,<span class="comment">//必须使用全等</span></span><br><span class="line"><span class="string">"func-names"</span>: <span class="number">0</span>,<span class="comment">//函数表达式必须有名字</span></span><br><span class="line"><span class="string">"func-style"</span>: [<span class="number">0</span>, <span class="string">"declaration"</span>],<span class="comment">//函数风格，规定只能使用函数声明/函数表达式</span></span><br><span class="line"><span class="string">"generator-star-spacing"</span>: <span class="number">0</span>,<span class="comment">//生成器函数*的前后空格</span></span><br><span class="line"><span class="string">"guard-for-in"</span>: <span class="number">0</span>,<span class="comment">//for in循环要用if语句过滤</span></span><br><span class="line"><span class="string">"handle-callback-err"</span>: <span class="number">0</span>,<span class="comment">//nodejs 处理错误</span></span><br><span class="line"><span class="string">"id-length"</span>: <span class="number">0</span>,<span class="comment">//变量名长度</span></span><br><span class="line"><span class="string">"indent"</span>: [<span class="number">2</span>, <span class="number">4</span>],<span class="comment">//缩进风格</span></span><br><span class="line"><span class="string">"init-declarations"</span>: <span class="number">0</span>,<span class="comment">//声明时必须赋初值</span></span><br><span class="line"><span class="string">"key-spacing"</span>: [<span class="number">0</span>, { <span class="string">"beforeColon"</span>: <span class="literal">false</span>, <span class="string">"afterColon"</span>: <span class="literal">true</span> }],<span class="comment">//对象字面量中冒号的前后空格</span></span><br><span class="line"><span class="string">"lines-around-comment"</span>: <span class="number">0</span>,<span class="comment">//行前/行后备注</span></span><br><span class="line"><span class="string">"max-depth"</span>: [<span class="number">0</span>, <span class="number">4</span>],<span class="comment">//嵌套块深度</span></span><br><span class="line"><span class="string">"max-len"</span>: [<span class="number">0</span>, <span class="number">80</span>, <span class="number">4</span>],<span class="comment">//字符串最大长度</span></span><br><span class="line"><span class="string">"max-nested-callbacks"</span>: [<span class="number">0</span>, <span class="number">2</span>],<span class="comment">//回调嵌套深度</span></span><br><span class="line"><span class="string">"max-params"</span>: [<span class="number">0</span>, <span class="number">3</span>],<span class="comment">//函数最多只能有3个参数</span></span><br><span class="line"><span class="string">"max-statements"</span>: [<span class="number">0</span>, <span class="number">10</span>],<span class="comment">//函数内最多有几个声明</span></span><br><span class="line"><span class="string">"new-cap"</span>: <span class="number">2</span>,<span class="comment">//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用</span></span><br><span class="line"><span class="string">"new-parens"</span>: <span class="number">2</span>,<span class="comment">//new时必须加小括号</span></span><br><span class="line"><span class="string">"newline-after-var"</span>: <span class="number">2</span>,<span class="comment">//变量声明后是否需要空一行</span></span><br><span class="line"><span class="string">"object-curly-spacing"</span>: [<span class="number">0</span>, <span class="string">"never"</span>],<span class="comment">//大括号内是否允许不必要的空格</span></span><br><span class="line"><span class="string">"object-shorthand"</span>: <span class="number">0</span>,<span class="comment">//强制对象字面量缩写语法</span></span><br><span class="line"><span class="string">"one-var"</span>: <span class="number">1</span>,<span class="comment">//连续声明</span></span><br><span class="line"><span class="string">"operator-assignment"</span>: [<span class="number">0</span>, <span class="string">"always"</span>],<span class="comment">//赋值运算符 += -=什么的</span></span><br><span class="line"><span class="string">"operator-linebreak"</span>: [<span class="number">2</span>, <span class="string">"after"</span>],<span class="comment">//换行时运算符在行尾还是行首</span></span><br><span class="line"><span class="string">"padded-blocks"</span>: <span class="number">0</span>,<span class="comment">//块语句内行首行尾是否要空行</span></span><br><span class="line"><span class="string">"prefer-const"</span>: <span class="number">0</span>,<span class="comment">//首选const</span></span><br><span class="line"><span class="string">"prefer-spread"</span>: <span class="number">0</span>,<span class="comment">//首选展开运算</span></span><br><span class="line"><span class="string">"prefer-reflect"</span>: <span class="number">0</span>,<span class="comment">//首选Reflect的方法</span></span><br><span class="line"><span class="string">"quotes"</span>: [<span class="number">1</span>, <span class="string">"single"</span>],<span class="comment">//引号类型 `` "" ''</span></span><br><span class="line"><span class="string">"quote-props"</span>:[<span class="number">2</span>, <span class="string">"always"</span>],<span class="comment">//对象字面量中的属性名是否强制双引号</span></span><br><span class="line"><span class="string">"radix"</span>: <span class="number">2</span>,<span class="comment">//parseInt必须指定第二个参数</span></span><br><span class="line"><span class="string">"id-match"</span>: <span class="number">0</span>,<span class="comment">//命名检测</span></span><br><span class="line"><span class="string">"require-yield"</span>: <span class="number">0</span>,<span class="comment">//生成器函数必须有yield</span></span><br><span class="line"><span class="string">"semi"</span>: [<span class="number">2</span>, <span class="string">"always"</span>],<span class="comment">//语句强制分号结尾</span></span><br><span class="line"><span class="string">"semi-spacing"</span>: [<span class="number">0</span>, {<span class="string">"before"</span>: <span class="literal">false</span>, <span class="string">"after"</span>: <span class="literal">true</span>}],<span class="comment">//分号前后空格</span></span><br><span class="line"><span class="string">"sort-vars"</span>: <span class="number">0</span>,<span class="comment">//变量声明时排序</span></span><br><span class="line"><span class="string">"space-after-keywords"</span>: [<span class="number">0</span>, <span class="string">"always"</span>],<span class="comment">//关键字后面是否要空一格</span></span><br><span class="line"><span class="string">"space-before-blocks"</span>: [<span class="number">0</span>, <span class="string">"always"</span>],<span class="comment">//不以新行开始的块{前面要不要有空格</span></span><br><span class="line"><span class="string">"space-before-function-paren"</span>: [<span class="number">0</span>, <span class="string">"always"</span>],<span class="comment">//函数定义时括号前面要不要有空格</span></span><br><span class="line"><span class="string">"space-in-parens"</span>: [<span class="number">0</span>, <span class="string">"never"</span>],<span class="comment">//小括号里面要不要有空格</span></span><br><span class="line"><span class="string">"space-infix-ops"</span>: <span class="number">0</span>,<span class="comment">//中缀操作符周围要不要有空格</span></span><br><span class="line"><span class="string">"space-return-throw-case"</span>: <span class="number">2</span>,<span class="comment">//return throw case后面要不要加空格</span></span><br><span class="line"><span class="string">"space-unary-ops"</span>: [<span class="number">0</span>, { <span class="string">"words"</span>: <span class="literal">true</span>, <span class="string">"nonwords"</span>: <span class="literal">false</span> }],<span class="comment">//一元运算符的前/后要不要加空格</span></span><br><span class="line"><span class="string">"spaced-comment"</span>: <span class="number">0</span>,<span class="comment">//注释风格要不要有空格什么的</span></span><br><span class="line"><span class="string">"strict"</span>: <span class="number">2</span>,<span class="comment">//使用严格模式</span></span><br><span class="line"><span class="string">"use-isnan"</span>: <span class="number">2</span>,<span class="comment">//禁止比较时使用NaN，只能用isNaN()</span></span><br><span class="line"><span class="string">"valid-jsdoc"</span>: <span class="number">0</span>,<span class="comment">//jsdoc规则</span></span><br><span class="line"><span class="string">"valid-typeof"</span>: <span class="number">2</span>,<span class="comment">//必须使用合法的typeof的值</span></span><br><span class="line"><span class="string">"vars-on-top"</span>: <span class="number">2</span>,<span class="comment">//var必须放在作用域顶部</span></span><br><span class="line"><span class="string">"wrap-iife"</span>: [<span class="number">2</span>, <span class="string">"inside"</span>],<span class="comment">//立即执行函数表达式的小括号风格</span></span><br><span class="line"><span class="string">"wrap-regex"</span>: <span class="number">0</span>,<span class="comment">//正则表达式字面量用小括号包起来</span></span><br><span class="line"><span class="string">"yoda"</span>: [<span class="number">2</span>, <span class="string">"never"</span>]<span class="comment">//禁止尤达条件</span></span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> 配置文件 </tag>
</tags>
</entry>
<entry>
<title>JacaScript解刨</title>
<link href="/2020/03/22/JS%E9%AB%98%E7%BA%A7/"/>
<url>/2020/03/22/JS%E9%AB%98%E7%BA%A7/</url>
<content type="html"><![CDATA[<h1 id="JavaScript-高级"><a href="#JavaScript-高级" class="headerlink" title="JavaScript - 高级"></a>JavaScript - 高级</h1><h2 id="this"><a href="#this" class="headerlink" title="this"></a>this</h2><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1616466039075.png" alt="1616466039075"></p><p>==call==</p><p>call()方法调用一个对象。可立即调用函数与改变this指向；</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure><p>==apply==</p><p>apply()方法调用一个函数，可以立即调用函数与改变this指向；</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure><p>==bind==</p><p>bind()方法不会调用函数，但可以改变函数内部this指向，返回的是原函数改变this之后产生的新函数。</p><ul><li><p>共同点：都可以改变this指向；</p></li><li><p>不同点：call 和 apply 会调用函数，并且改变函数内部this指向；</p></li><li><p>call传递参数使用逗号，apply使用数组传递；</p></li><li><p>bind 不会调用函数，可以改变函数内部this指向；</p></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure><p> —— 应用场景</p><ul><li> call 经常做继承；</li><li>apply 经常跟数组有关系；比如借助于数学实现数组最大值与最大值</li><li>bind 不调用函数，可以改变this指向；比如改变定时器内部的this指向</li></ul><h2 id="严格模式"><a href="#严格模式" class="headerlink" title="严格模式"></a>严格模式</h2><p>1 · 为脚本开启严格模式</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>，(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//当前这个自调函数中开启严格模式，函数之外还是普通模式</span></span><br><span class="line"><span class="meta"> "use strict"</span></span><br><span class="line"> }</span><br><span class="line"> )()</span><br><span class="line"><span class="number">2</span>, <span class="xml"><span class="tag"><<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"> //当前的script标签开启了严格模式</span></span><br><span class="line"><span class="xml"> "use strict </span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><h2 id="高阶函数"><a href="#高阶函数" class="headerlink" title="高阶函数"></a>高阶函数</h2><p>map() : 接收一个函数参数的数组对象，遍历这个数组；</p><p>reduce() : 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值；</p><p>filter() : 接收一个函数参数的数组对象，返回满足条件的数组对象；</p><p>forEach() : 调用数组中的每个元素，并将元素传递給回调函数；</p><p>some() : 判断是否含有符合条件的元素，返回布尔值；</p><p>every() : 判断是否全部元素符合条件，返回布尔值；</p><h2 id="对象原型链"><a href="#对象原型链" class="headerlink" title="对象原型链"></a>对象原型链</h2><ul><li><h3 id="prototype"><a href="#prototype" class="headerlink" title="prototype"></a>prototype</h3></li></ul><p>每个函数都有prototype原型属性；这是一个对象所有函数的属性和方法都被构造函数所拥有</p><p>==好处：==可以把不变的方法直接定义在prototype对象上，直下的所有对象实例都可以 （共享）这些方法。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Star.prototype.sing = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'唱歌'</span>);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> BOB = <span class="keyword">new</span> Star(<span class="string">""</span>);</span><br><span class="line">BOB.sing();<span class="comment">//唱歌</span></span><br></pre></td></tr></table></figure><ul><li><h3 id="对象原型"><a href="#对象原型" class="headerlink" title="对象原型"></a>对象原型</h3></li></ul><p>对象都会有一个属性__ prpto __ 指向构造函数的prototype原型对象； __ porto__ 对象原型和原型对象prototype是等价的；</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Star.__proto__sing = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}</span><br></pre></td></tr></table></figure><ul><li><h3 id="constructor构造函数"><a href="#constructor构造函数" class="headerlink" title="constructor构造函数"></a>constructor构造函数</h3></li></ul><p>对象原型（__ proto __）和构造函数（prototype）原型对象里面都有一个属性constructor属性的构造函数，它指回构造函数本身；</p><p>它可以让原型对象重新指向原来的构造函数。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//如果修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动利用constructor指回原 来的构造函数</span></span><br><span class="line"> <span class="attr">constructor</span> : OBJ,</span><br></pre></td></tr></table></figure><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="C:\Users\97830\AppData\Roaming\Typora\typora-user-images\1616746783081.png" alt="1616746783081"></p><h2 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h2><ol><li>闭包（closure）指有权访问另一个函数作用域中变量的函数；</li><li>一个作用域可以访问另一个函数的局部变量</li><li>我们fn 外面得作用域可以访问fn 内部的局部变量</li><li>闭包的主要作用：延伸了变量的作用范围</li></ol><h2 id="递归"><a href="#递归" class="headerlink" title="递归"></a>递归</h2>]]></content>
<tags>
<tag> JavaScript </tag>
</tags>
</entry>
<entry>
<title>JavaScript 总结</title>
<link href="/2020/02/24/JS/"/>
<url>/2020/02/24/JS/</url>
<content type="html"><![CDATA[<h1 id="JavaScript-总结"><a href="#JavaScript-总结" class="headerlink" title="JavaScript 总结"></a>JavaScript 总结</h1><h4 id="JavaScript组成"><a href="#JavaScript组成" class="headerlink" title="JavaScript组成"></a>JavaScript组成</h4><p>$$<br>1，ECMAScript 核心语法<br>2，DOM 文档对象模型<br>3，BOM 浏览器对象模型<br>$$</p><hr><h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">概念：容器，用来存储数据</span><br><span class="line">语法: <span class="keyword">var</span> 变量名 = 数据；</span><br><span class="line"></span><br><span class="line">变量名命名规则：</span><br><span class="line"><span class="number">1.</span> a-zA-Z,_ $ 数字<span class="number">0</span>-<span class="number">9</span> 组成</span><br><span class="line"><span class="number">2.</span> 不能以数字开头</span><br><span class="line"><span class="number">3.</span> 不能以关键字(<span class="keyword">var</span>,<span class="keyword">for</span> <span class="keyword">if</span> ),保留字(<span class="class"><span class="keyword">class</span>)作为变量名</span></span><br><span class="line"><span class="class">4. 命名有意义</span></span><br><span class="line"><span class="class">5. 对于变量 <span class="title">user_name</span> 由于函数 <span class="title">getName</span>(了解) 驼峰命名</span></span><br></pre></td></tr></table></figure><h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>，基本数据类型：</span><br><span class="line"><span class="built_in">Number</span>（数字型），<span class="built_in">Boolean</span>（布尔），<span class="built_in">String</span>（字符串），Undefined（未定义），<span class="literal">null</span>（空）；</span><br><span class="line"></span><br><span class="line"><span class="number">2</span>，复杂数据类型：</span><br><span class="line"><span class="built_in">Object</span>（对象） <span class="built_in">Array</span>（数组） <span class="function"><span class="keyword">function</span>（函数）；</span></span><br><span class="line"><span class="function"></span></span><br><span class="line"><span class="function">数据类型判断：</span></span><br><span class="line"><span class="function"><span class="title">typeof</span> 数据 ； <span class="title">typeof</span> (<span class="params">数据</span>)</span></span><br><span class="line"><span class="function"><span class="title">typeof</span> <span class="title">null</span> -> <span class="title">object</span></span></span><br></pre></td></tr></table></figure><h2 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>算数运算符</span><br><span class="line">+ - * / %</span><br><span class="line"></span><br><span class="line">隐式装换：</span><br><span class="line">·<span class="number">1</span>，确定数据类型</span><br><span class="line">·<span class="number">2</span>，算数运算符的类型</span><br><span class="line">+ <span class="number">1</span>，number + string -> 拼接 （number 转 string） </span><br><span class="line"> <span class="number">2</span>，number + boolean -> 加运算 （boolean 转 number）</span><br><span class="line">- <span class="number">1</span>，number - string -> 减运算 （string 转 number）</span><br><span class="line"> <span class="number">2</span>，number - boolean -> 减运算 （boolean 转 number）</span><br><span class="line"><span class="number">2.</span>逻辑运算符</span><br><span class="line">·<span class="number">1</span>，！： 非</span><br><span class="line">·<span class="number">2</span>，&& ： 与</span><br><span class="line">·<span class="number">3</span>，|| ：或</span><br><span class="line"><span class="number">3.</span>赋值运算符</span><br><span class="line">· += </span><br><span class="line">· -= </span><br><span class="line">· *= </span><br><span class="line">· /=</span><br><span class="line">· %=</span><br><span class="line"><span class="number">4.</span>比较运算符</span><br><span class="line">· > （大于）</span><br><span class="line">· < （小于）</span><br><span class="line">· >=（大于并等于）</span><br><span class="line">· <=（小于并等于）</span><br><span class="line">· = (赋值)</span><br><span class="line">· ==（判断数据是否相同）</span><br><span class="line">· ===（全等判断（ <span class="number">1</span>，数据类型相同 <span class="number">2</span>，数据内容相同））</span><br><span class="line">· !=（不等）</span><br><span class="line">· !==（不等（严格判断））</span><br><span class="line"><span class="number">5.</span> 自增自减</span><br><span class="line">· 前置++</span><br><span class="line">· 后置++</span><br><span class="line">· 前置--</span><br><span class="line">· 后置--</span><br></pre></td></tr></table></figure><h2 id="数据类型装换"><a href="#数据类型装换" class="headerlink" title="数据类型装换"></a>数据类型装换</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">转数字</span><br><span class="line"><span class="number">1</span>,<span class="built_in">Number</span> <span class="string">'100'</span> => <span class="number">100</span> 但是<span class="string">'100a'</span> -> <span class="literal">NaN</span></span><br><span class="line"><span class="number">2</span>,<span class="built_in">parseInt</span> <span class="string">'100a'</span> -> 但是 <span class="string">'100.97a'</span> -> <span class="number">100</span></span><br><span class="line"><span class="number">3</span>,<span class="built_in">parseFloat</span> <span class="string">'100.97a'</span> -> <span class="number">100.97</span></span><br><span class="line"><span class="number">4</span>,+ * / % +<span class="string">'100'</span> -> <span class="number">100</span> </span><br><span class="line">注意：只要以非数字开头，结果都是<span class="literal">NaN</span></span><br></pre></td></tr></table></figure><h2 id="条件表达式"><a href="#条件表达式" class="headerlink" title="条件表达式"></a>条件表达式</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>，<span class="keyword">if</span> 语句</span><br><span class="line">语法： <span class="keyword">if</span>(条件表达式){</span><br><span class="line"> 语句块，只有条件成立，才会执行语句块</span><br><span class="line">}<span class="keyword">else</span>{}</span><br><span class="line"><span class="number">2</span>，<span class="keyword">if</span> <span class="keyword">else</span> <span class="keyword">if</span>多条件分支</span><br><span class="line"><span class="keyword">if</span>(表达式<span class="number">1</span>){语句<span class="number">1</span>}</span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span>(表达式<span class="number">2</span>){语句<span class="number">2</span>}</span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span>(表达式<span class="number">3</span>){语句<span class="number">3</span>}</span><br><span class="line">....</span><br><span class="line"><span class="keyword">else</span>{}</span><br><span class="line"><span class="number">3</span>,<span class="keyword">switch</span> 语句</span><br><span class="line"><span class="keyword">switch</span>(表达式){</span><br><span class="line"> <span class="keyword">case</span> 值 <span class="number">1</span>:</span><br><span class="line"> 语句 <span class="number">1</span>:</span><br><span class="line"> <span class="keyword">break</span>:</span><br><span class="line"> <span class="keyword">case</span> 值 <span class="number">2</span>:</span><br><span class="line"> 语句 <span class="number">2</span>:</span><br><span class="line"> <span class="keyword">break</span>:</span><br><span class="line"> <span class="keyword">case</span> 值 <span class="number">3</span>:</span><br><span class="line"> 语句 <span class="number">1</span>:</span><br><span class="line"> <span class="keyword">break</span>:</span><br><span class="line"> ....</span><br><span class="line"> <span class="attr">default</span>:</span><br><span class="line"> 默认语句;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line">}</span><br><span class="line"><span class="number">4</span>,三元表达式</span><br><span class="line"></span><br><span class="line">表达<span class="number">1</span> ？ 语句<span class="number">1</span> : 语句<span class="number">2</span> ；</span><br></pre></td></tr></table></figure><h1 id="循环"><a href="#循环" class="headerlink" title="循环"></a>循环</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>， <span class="keyword">for</span> 循环</span><br><span class="line">语法： <span class="keyword">for</span>(初始化变量;条件表达式;操作表达式){</span><br><span class="line"> <span class="comment">//循环体</span></span><br><span class="line">}</span><br><span class="line"><span class="number">1.2</span> 双重 <span class="keyword">for</span> 循环</span><br><span class="line">语法： <span class="keyword">for</span>(外循环的初始;外循环的条件;外循环的操作表达式){</span><br><span class="line"> <span class="keyword">for</span>(内循环的初始;内循环的条件;内循环的操作表达式){</span><br><span class="line"> <span class="comment">//需执行的代码</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="number">2</span>， <span class="keyword">while</span> 循环</span><br><span class="line">(循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为<span class="literal">true</span>，则会继续执行循环体，直到循环条件为 <span class="literal">false</span> 时，整个循环过程才会结束)</span><br><span class="line">语法： <span class="keyword">while</span>(条件表达式){</span><br><span class="line"> <span class="comment">//循环体代码</span></span><br><span class="line"> }</span><br><span class="line"><span class="number">3</span>， <span class="keyword">do</span> <span class="keyword">while</span> 循环(先执行一次循环体代码)</span><br><span class="line"><span class="keyword">do</span>{</span><br><span class="line"> <span class="comment">//循环体代码 - 条件表达式为true 时重复执行循环体代码</span></span><br><span class="line">}<span class="keyword">while</span>(条件表达式);</span><br><span class="line">· 跳出循环</span><br><span class="line"><span class="attr">continue</span>:用于立即跳出本次循环，继续下一次循环</span><br><span class="line"><span class="attr">break</span>:用于立即跳出整个循环(循环结束)</span><br></pre></td></tr></table></figure><h2 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>，作用：保存多份任意数据</span><br><span class="line"></span><br><span class="line"><span class="number">2</span>，语法：</span><br><span class="line"> <span class="number">1</span>，字面量创建数组</span><br><span class="line"> <span class="keyword">var</span> arr = [数据<span class="number">1</span>，数据<span class="number">2</span>，数据<span class="number">3</span>，...数据n]<span class="comment">// arr数组名字</span></span><br><span class="line"> <span class="number">2</span>，构造函数创建数组</span><br><span class="line"> <span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>()(了解)</span><br><span class="line">注意： <span class="number">1</span>， <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">10</span>) <span class="comment">//创建一个长度为10的空数组</span></span><br><span class="line"> <span class="number">2</span>， <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>)<span class="comment">//创建一个长度为3的数组</span></span><br><span class="line"></span><br><span class="line"><span class="number">3</span>，数组长度： 数组名.length</span><br><span class="line"></span><br><span class="line"><span class="number">4</span>，下标/索引</span><br><span class="line"> <span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]数组下标从<span class="number">0</span>开始</span><br><span class="line"> </span><br><span class="line"><span class="number">5</span>，获取数组中数据</span><br><span class="line"> <span class="number">1</span>，数组名[下标]</span><br><span class="line"> <span class="number">2</span>，数组最后一项:[数组名.length - <span class="number">1</span>]<span class="comment">//从下标0开始所以减一</span></span><br><span class="line"></span><br><span class="line"><span class="number">6</span>，新增数据</span><br><span class="line"><span class="number">1</span>， <span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>] -> arr[<span class="number">5</span>] = 数据</span><br><span class="line">数组名[下标] = 数据 数组名[数组名.length] = 数据</span><br><span class="line"></span><br><span class="line"><span class="number">7</span>，修改数据</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>] arr[下标] = 新数据</span><br><span class="line"></span><br><span class="line"><span class="number">8</span>，删除数据</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">'张三'</span>,<span class="string">'李四'</span>] 数组名.length = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"><span class="number">9</span>，数组的遍历</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i < arr.length; i++){</span><br><span class="line"> <span class="built_in">console</span>.log(arr[i])</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="number">10</span>,多维数组</span><br><span class="line">二维数组[[<span class="number">1</span>,<span class="number">2</span>],[<span class="number">3</span>,<span class="number">4</span>]]</span><br><span class="line">三维数组[[[<span class="number">11</span>,<span class="number">22</span>],[<span class="number">33</span>,<span class="number">44</span>]]]</span><br><span class="line">... 多维数组</span><br><span class="line"></span><br><span class="line"><span class="number">11</span>，flat() 可以把 n维数组转一堆数组</span><br><span class="line">语法 ： 数组名.flat(<span class="number">5</span>)</span><br></pre></td></tr></table></figure><h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">作用：封装代码，代码复用</span><br><span class="line"></span><br><span class="line">语法：</span><br><span class="line"><span class="function"><span class="keyword">function</span> 函数名 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span></span><br><span class="line"><span class="function"> //函数体</span></span><br><span class="line"><span class="function">}</span></span><br><span class="line"><span class="function">注意: 函数名建议动词开头，驼峰命名 <span class="title">getSum</span> <span class="title">getNum</span>...</span></span><br><span class="line"><span class="function"></span></span><br><span class="line"><span class="function">调用函数： 函数名(<span class="params"></span>)</span>;</span><br><span class="line"></span><br><span class="line">实参： 函数名(实参<span class="number">1</span>，实参<span class="number">2</span>，实参<span class="number">3</span> ..... 实参n);</span><br><span class="line"></span><br><span class="line">注意： <span class="number">1</span>,函数的形参和实参是一一对应的</span><br><span class="line"></span><br><span class="line"><span class="built_in">arguments</span> (伪数组)</span><br><span class="line">解决的问题:当函数的形参个数不确定</span><br><span class="line">通过<span class="built_in">arguments</span> 拿到所有参数</span><br><span class="line"><span class="built_in">arguments</span> 是伪数组，可以遍历，可以通过下标访问数据</span><br><span class="line"></span><br><span class="line">函数的返回值： <span class="keyword">return</span></span><br><span class="line"><span class="number">1</span>， <span class="keyword">return</span> 任意数据类型</span><br><span class="line"><span class="number">2</span>， <span class="keyword">return</span> 语句后面的代码都不执行</span><br><span class="line"></span><br><span class="line">函数四要素：</span><br><span class="line"><span class="comment">//1.参数 2.返回值 3.功能 4.何时调用</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> 函数名(<span class="params">形参<span class="number">1</span>，形参<span class="number">2</span></span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> 数据；</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">作用： 保存多个信息</span><br><span class="line"></span><br><span class="line">语法：</span><br><span class="line"> <span class="number">1</span>，字面量创建对象</span><br><span class="line"> <span class="keyword">var</span> 对象名 = {</span><br><span class="line"> 键名<span class="number">1</span>：值<span class="number">1</span>,</span><br><span class="line"> 键名<span class="number">2</span>：值,</span><br><span class="line"> ....</span><br><span class="line"> 键名n：值n;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"><span class="number">2</span>，构造函数创建对象</span><br><span class="line"> <span class="keyword">var</span> 对象名 = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line"> 对象名.属性名<span class="number">1</span> = 值<span class="number">1</span></span><br><span class="line"> 对象名.属性名<span class="number">2</span> = 值<span class="number">2</span></span><br><span class="line"></span><br><span class="line"><span class="number">3</span>，工厂函数创建对象</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">参数<span class="number">1</span>，参数<span class="number">2</span></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> o = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line"> o.属性<span class="number">1</span> = 参数<span class="number">1</span>；</span><br><span class="line"> o.属性<span class="number">2</span> = 参数<span class="number">2</span>；</span><br><span class="line"> <span class="keyword">return</span> o；</span><br><span class="line">}</span><br><span class="line">工厂函数：解决重复创建对象的问题，但是带来新问题，违法通过instancof来效验谁创建出的对象</span><br><span class="line"></span><br><span class="line"><span class="number">4</span>，自定义构造函数创建对象</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Creator</span>(<span class="params">形参<span class="number">1</span>，形参<span class="number">2</span></span>)</span>{</span><br><span class="line"> <span class="built_in">this</span>.属性<span class="number">1</span> = 形参<span class="number">1</span>;</span><br><span class="line"> <span class="built_in">this</span>.属性n = 形参n</span><br><span class="line">}</span><br><span class="line">自定义构造函数解决了 </span><br><span class="line">通过<span class="keyword">instanceof</span>效验对象实例是谁创建的</span><br><span class="line"></span><br><span class="line">注意： 值可以是任意数据类型，可以是函数</span><br><span class="line"></span><br><span class="line">访问对象属性：</span><br><span class="line"> <span class="number">1</span>，对象名.属性名</span><br><span class="line"> <span class="number">2</span>，对象名[<span class="string">'属性名'</span>]</span><br><span class="line"> <span class="number">3</span>，对象名[变量]</span><br><span class="line"></span><br><span class="line">拓展：对象解构</span><br><span class="line"><span class="keyword">var</span> {属性名<span class="number">1</span>，属性名<span class="number">2.</span>...属性名n} = 对象名</span><br></pre></td></tr></table></figure><h2 id="内置对象"><a href="#内置对象" class="headerlink" title="内置对象"></a>内置对象</h2><h3 id="Math对象"><a href="#Math对象" class="headerlink" title="Math对象"></a>Math对象</h3><table><thead><tr><th align="center">属性</th><th align="center">功能</th></tr></thead><tbody><tr><td align="center">Math.Pl</td><td align="center">圆周率</td></tr><tr><td align="center">Math.floor()</td><td align="center">向下取整</td></tr><tr><td align="center">Math.ceil()</td><td align="center">向上取整</td></tr><tr><td align="center">Math.round()</td><td align="center">四舍五入 （-3.5取-3）</td></tr><tr><td align="center">Math.abs()</td><td align="center">绝对值</td></tr><tr><td align="center">Math.max() / Math.min()</td><td align="center">求最大和最小值</td></tr><tr><td align="center">Math.random()</td><td align="center">获取范围在[0，1]内的随机值</td></tr></tbody></table><p>注意：上面的方法使用时必须带括号</p><h3 id="日期对象"><a href="#日期对象" class="headerlink" title="日期对象"></a>日期对象</h3><ul><li>使用Date实例化日期对象</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> now = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br></pre></td></tr></table></figure><ul><li><p>Date实例的属性与方法</p><table><thead><tr><th>方法名</th><th align="left">说明</th><th align="center"></th></tr></thead><tbody><tr><td>getFullYear（）</td><td align="left">获取当年</td><td align="center"></td></tr><tr><td>getMonth（）</td><td align="left">获取当月（0-11）</td><td align="center"></td></tr><tr><td>getDate（）</td><td align="left">获取当天日期</td><td align="center"></td></tr><tr><td>getDay（）</td><td align="left">获取星期（周0到周6）</td><td align="center"></td></tr><tr><td>getHours（）</td><td align="left">获取当前小时</td><td align="center"></td></tr><tr><td>getMinutes（）</td><td align="left">获取当前分钟</td><td align="center"></td></tr><tr><td>getSeconds（）</td><td align="left">获取当前秒钟</td><td align="center"></td></tr></tbody></table><p>毫秒数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> Data();</span><br><span class="line"></span><br><span class="line">*<span class="comment">// 1,通过valueOf() 或 getTime();*</span></span><br><span class="line"></span><br><span class="line"> <span class="built_in">console</span>.log(date.valueOf());*<span class="comment">//就是我们现在的时间*</span></span><br><span class="line"></span><br><span class="line"> <span class="built_in">console</span>.log(date.getTime());</span><br><span class="line"></span><br><span class="line">*<span class="comment">// 2,简单的写法 (最常用的写法)*</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> date1 = +<span class="keyword">new</span> Data();*<span class="comment">// +new Data() 返回的就是总的毫秒数*</span></span><br><span class="line"></span><br><span class="line">*<span class="comment">// 3，新方法*</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> Data());</span><br></pre></td></tr></table></figure></li></ul><h2 id="数组常用方法"><a href="#数组常用方法" class="headerlink" title="数组常用方法"></a>数组常用方法</h2><blockquote><ul><li><input disabled="" type="checkbox"> ```javascript<br>增加数据：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line">```</span><br><span class="line"></span><br><span class="line">1，从前加</span><br><span class="line">var r =数组名.unshift(数据);</span><br><span class="line">2，从后加</span><br><span class="line">var r =数组名.push(数据)；</span><br><span class="line"></span><br><span class="line">共性：</span><br><span class="line">1，返回值r都是数组最新的长度</span><br><span class="line"></span><br><span class="line">区别：</span><br><span class="line">1，unshift()从前加数据</span><br><span class="line">2，push()从后添加数据（添加数据）</span><br><span class="line"></span><br><span class="line">注意：</span><br><span class="line">1，push 可以从后添加多条数据</span><br><span class="line">2，unshift 可以从前添加多条数据</span><br><span class="line"></span><br><span class="line">删除数据</span><br><span class="line">1，从前删</span><br><span class="line">var r = 数组名.shift()</span><br><span class="line">2，从后删</span><br><span class="line">var r = 数组名.pop()</span><br><span class="line"></span><br><span class="line">共性：</span><br><span class="line">1，返回值是删除的数据</span><br><span class="line"></span><br><span class="line">区别：</span><br><span class="line"> 1，shift() 从数组最前面删除一项数据</span><br><span class="line"> 2，pop() 从数组最后一项删除数据</span><br><span class="line"> </span><br><span class="line">splice：实现增删改</span><br><span class="line"></span><br><span class="line">新增：数组名.splice(参数1开始操作的下标,0，参数3是新增数据)； </span><br><span class="line">删除：数组名.splice(参数1开始操作下标，大于0的正数)；</span><br><span class="line">修改：数组名.splice(参数1开始操作的下标，大于0的正数，参数3新增的数据)；</span><br><span class="line"></span><br><span class="line">注意：</span><br><span class="line"> 1，splice 会修改原数组</span><br><span class="line"> 2，返回值是空数组（一般用不到）</span><br><span class="line"> </span><br><span class="line">slice:截取数组中的数据</span><br><span class="line">数组名.slice(参数1，参数2)；</span><br><span class="line">注意：</span><br><span class="line">1,slice(参数)，下标从参数开始截取到数组最后一项</span><br><span class="line">2,slice(参数1，参数2)截取数组，[参数，end] 包头不包尾</span><br><span class="line">3,slice 不会修改原数组</span><br><span class="line"></span><br><span class="line">4，数组排序</span><br><span class="line">1，reverse():颠倒数组中元素的顺序，无参数（翻转数组）</span><br><span class="line">2，sort():对数组的元素进行排序</span><br><span class="line">（以上方法会改变原来的数组，返回新数组）</span><br><span class="line">`arr.sort = [1,12,3,77,5];</span><br><span class="line">return a - b; //升序排序</span><br><span class="line">return b - a; //降序 `</span><br><span class="line"></span><br><span class="line">5，数组转换为字符串</span><br><span class="line">1，toString()：把数组装换成字符串，逗号分隔每一项</span><br><span class="line">2， join('分隔符')：方法用于把数组中的所有元素转换为一个字符串</span><br><span class="line">（返回一个字符串）</span><br><span class="line">3，concat（）：连接两个或多个数组，不影响原数组（返回一个新的数组）</span><br><span class="line"></span><br><span class="line">6，获取数组元素索引号 //如果有返回下标，没有则 返回-1；</span><br><span class="line">从前查找：indexOf（'元素'）；</span><br><span class="line">从后查找：lastIndexOf('元素')；</span><br></pre></td></tr></table></figure></li></ul></blockquote><h2 id="字符串对象"><a href="#字符串对象" class="headerlink" title="字符串对象"></a>字符串对象</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">· 字符串的不可变：</span><br><span class="line"> 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。</span><br><span class="line"> </span><br><span class="line"><span class="number">1</span>，根据字符返回位置</span><br><span class="line"> <span class="number">1</span>，indexOf（<span class="string">'要查找的字符'</span>,开始的位置）：返回指定内容在元字符串中的位置，如果找不到就返回 - <span class="number">1</span>，开始的位置是index的索引号</span><br><span class="line"> <span class="number">2</span>，lastindexOf：从后往前找，只找到一个匹配</span><br><span class="line"> </span><br><span class="line"><span class="number">2</span>，根据位置返回字符</span><br><span class="line"> <span class="number">1</span>，charAt(index)：返回指定位置的字符（index字符串的索引号）</span><br><span class="line"> <span class="number">2</span>，charCodeAt(index):获取指定位置打处字符的ASCLL码（index索引号）</span><br><span class="line"> <span class="number">3</span>，str[index]：获取指定位置处字符</span><br><span class="line"> </span><br><span class="line"> <span class="number">3</span>，字符串操作方法</span><br><span class="line"> <span class="number">1</span>，concat(str1,str2,str3..):concat()方法用于连接两个或多个字符串。</span><br><span class="line"> 拼接字符串，等效于+，+更常用。</span><br><span class="line"> <span class="number">2</span>，substr(start,length):从start位置开始（索引号），length取的个数</span><br><span class="line"> <span class="number">3</span>，slice(start,end):从start位置开始，截取到end位置，end取不到（他们俩都是索 引号）</span><br><span class="line"> <span class="number">4</span>,subString(start,end):从start位置开始，截取到end位置，end取不到 ，基本和 slice相同 都是不接受负值</span><br><span class="line"> <span class="number">5</span>，replace(<span class="string">'原'</span>,<span class="string">'替'</span>);<span class="comment">//把第一个参数替换为第二个参数；</span></span><br><span class="line"> <span class="number">6</span>，split(<span class="string">'( 隔开的东西 数组用,)'</span>);<span class="comment">//字符串装换为数组</span></span><br><span class="line"> <span class="number">7</span>，toUpperCase();<span class="comment">//将所有的英文字符转换为大写字母</span></span><br><span class="line"> <span class="number">8</span>，toLowerCase();<span class="comment">//将所有的大小字母转换为英文字符</span></span><br><span class="line"></span><br><span class="line">get 获得 element 元素 by通过</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> JavaScript </tag>
</tags>
</entry>
<entry>
<title>TypeScript简述</title>
<link href="/2018/01/05/TypeScript%E7%AE%80%E8%BF%B0/"/>
<url>/2018/01/05/TypeScript%E7%AE%80%E8%BF%B0/</url>
<content type="html"><![CDATA[<h1 id="TypeScript"><a href="#TypeScript" class="headerlink" title="TypeScript"></a>TypeScript</h1><hr><ul><li><p>TypeScript 是<code>静态类型</code></p><p> 静态类型是指编译阶段就能确定每个变量的类型<br> 这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先 为 JavaScript，而在编译阶段就会进行类型检查</p></li><li><p>强类型：语言层面限制函数的实参类型必须与形参类型相同</p><p> 注 ：<code>强类型</code>中不予许随意的数据隐式类型装换，而<code>弱类型</code>允许；</p> <!-- 动态类型：允许随时修改变量的类型 --></li></ul><h2 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h2><h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.使用yarn配置package.json</span></span><br><span class="line">yarn init --yes</span><br><span class="line"><span class="comment">// 2.安装typescript开放依赖</span></span><br><span class="line">yarn add typescript --dev</span><br><span class="line"><span class="string">`这时node_modules/bin目录中会有tsc文件, 用来编译typescript文件`</span></span><br></pre></td></tr></table></figure><h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 添加tsconfig.json配置</span></span><br><span class="line">yarn tsc --init</span><br><span class="line"></span><br><span class="line"><span class="comment">// * 提前配置</span></span><br><span class="line"><span class="string">"sourceMap"</span>: <span class="literal">true</span>, <span class="comment">// 存储源代码与编译代码对应位置映射</span></span><br><span class="line"><span class="string">"outDir"</span>: <span class="string">"dist"</span>, <span class="comment">// 编译后存放的目录</span></span><br><span class="line"><span class="string">"rootDir"</span>: <span class="string">"src"</span>, <span class="comment">// 从这个文件编译</span></span><br></pre></td></tr></table></figure><h3 id="常用语法"><a href="#常用语法" class="headerlink" title="常用语法"></a>常用语法</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 快速编译（编译后放在同目录）</span></span><br><span class="line">yarn tsc test.ts(需要编译的ts文件)</span><br><span class="line"><span class="comment">// 快速编译（ * 提前配置 - 从指定目录编译到指定目录）</span></span><br><span class="line">yarn tsc</span><br><span class="line"><span class="comment">// 显示中文</span></span><br><span class="line">yarn tsc --locale zh-CN</span><br></pre></td></tr></table></figure><h3 id="作用域问题"><a href="#作用域问题" class="headerlink" title="作用域问题"></a>作用域问题</h3><p>因为ts的变量设计是面向全局的，所以相同文件目录下的ts文件变量名称相等会照成冲突<br><strong>解决办法</strong></p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建立即执行函数</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">const</span> a = <span class="number">123</span></span><br><span class="line">})()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 以一个包的形式导出</span></span><br><span class="line"><span class="keyword">export</span> {}</span><br></pre></td></tr></table></figure><h2 id="基础数据类型"><a href="#基础数据类型" class="headerlink" title="基础数据类型"></a>基础数据类型</h2><p><strong>JS的八种内置类型</strong></p><p>变量的类型由后面声明的类型决定</p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str: <span class="built_in">string</span> = <span class="string">"Shrimps"</span>;</span><br><span class="line"><span class="keyword">let</span> num: <span class="built_in">number</span> = <span class="number">22</span>;</span><br><span class="line"><span class="keyword">let</span> bool: <span class="built_in">boolean</span> = <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">let</span> u: <span class="literal">undefined</span> = <span class="literal">undefined</span>;</span><br><span class="line"><span class="keyword">let</span> n: <span class="literal">null</span> = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">let</span> obj: <span class="built_in">object</span> = {<span class="attr">x</span>: <span class="number">1</span>,<span class="attr">y</span>: <span class="number">2</span>};</span><br><span class="line"><span class="keyword">let</span> big: bigint = <span class="number">100n</span>;</span><br><span class="line"><span class="keyword">let</span> sym: symbol = <span class="built_in">Symbol</span>(<span class="string">"hey"</span>);</span><br></pre></td></tr></table></figure><h2 id="类型限制"><a href="#类型限制" class="headerlink" title="类型限制"></a>类型限制</h2><h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个对象变量</span></span><br><span class="line"><span class="keyword">const</span> foo: <span class="built_in">object</span> = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{} <span class="comment">//[] //{}</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建一个对象变量 里面存放对应的键值类型</span></span><br><span class="line"><span class="keyword">const</span> obj: { <span class="attr">foo</span>: <span class="built_in">number</span>, <span class="attr">bar</span>:<span class="built_in">string</span> } = { <span class="attr">foo</span>: <span class="number">123</span>, <span class="attr">bar</span>: <span class="string">'Hey'</span>}</span><br></pre></td></tr></table></figure><h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`两种创建方式`</span></span><br><span class="line"><span class="comment">// 创建一个数组 （只能存放string类型）</span></span><br><span class="line"><span class="keyword">const</span> arr1: <span class="built_in">Array</span><<span class="built_in">string</span>> = [<span class="string">'七'</span>,<span class="string">'里'</span>,<span class="string">'香'</span>]</span><br><span class="line"><span class="comment">// or 两种创建方式</span></span><br><span class="line"><span class="keyword">const</span> arr2: <span class="built_in">number</span>[] = [<span class="number">12</span>,<span class="number">54</span>,<span class="number">123</span>,<span class="number">342</span>,<span class="number">1</span>]</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 高效定义一个传递返回的数组 (减少类型判断)</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">...args: <span class="built_in">number</span>[]</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> args.reduce( prev, current ) => prev * current, <span class="number">0</span>)</span><br><span class="line">}</span><br><span class="line">sum(<span class="number">2</span>,<span class="number">33</span>,<span class="number">12</span>,<span class="number">41</span>,<span class="number">91</span>)</span><br></pre></td></tr></table></figure><h3 id="元组"><a href="#元组" class="headerlink" title="元组"></a>元组</h3><p><code>列表是可以修改的数据结构，而元组是固定长度，不能被修改元素值的数据结构。</code></p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个元组 键值类型必须与值对应</span></span><br><span class="line"><span class="keyword">const</span> str: [<span class="built_in">number</span>,<span class="built_in">string</span>] = [<span class="number">22</span>,<span class="string">'KOS'</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 也可以解构提取数值</span></span><br><span class="line"><span class="keyword">const</span> [ age,name ] = str</span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.entries({</span><br><span class="line"> <span class="attr">foo</span>:<span class="number">123</span>,</span><br><span class="line"> <span class="attr">bar</span>:<span class="string">'sad'</span></span><br><span class="line">})</span><br><span class="line"></span><br></pre></td></tr></table></figure><h3 id="枚举"><a href="#枚举" class="headerlink" title="枚举"></a>枚举</h3><p><code>枚举enum是一种特殊的类(但枚举是类)，使用枚举可以很方便的定义常量</code></p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 模拟枚举</span></span><br><span class="line"><span class="built_in">enum</span> PostStatus {</span><br><span class="line"> Draft = <span class="number">1</span>,</span><br><span class="line"> Unpublished = <span class="number">1</span>,</span><br><span class="line"> Published = <span class="number">2</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>这种通过等号的显式赋值称为 <code>initializer</code>。如果枚举中某个成员的值使用显式方式赋值，但后续成员未显示赋值， TypeScript 会基于当前成员的值加 1 作为后续成员的值</p><p><strong>这种方式编译后对应文件会显示编译代码</strong></p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 建议使用常量枚举， 就不会显示编译代码 如：</span></span><br><span class="line"><span class="keyword">const</span> <span class="built_in">enum</span> PostStatus {</span><br><span class="line"> <span class="comment">// 可以省略等号，会自动从头开始按照顺序排序</span></span><br><span class="line"> Draft,</span><br><span class="line"> Unpublished, <span class="comment">// 2</span></span><br><span class="line"> Published = <span class="number">8</span>,</span><br><span class="line"> testStr, <span class="comment">// 9</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数类型显示</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func1</span> (<span class="params">a: <span class="built_in">number</span>,b?: numebr = <span class="number">10</span> </span>): <span class="title">string</span></span>{</span><br><span class="line"> <span class="comment">// ( ...rest:number[] ) -- 选择传入任意个数的参数</span></span><br><span class="line"> <span class="comment">// b?: number -- 为number类型b参数可选可不选</span></span><br><span class="line"> <span class="comment">// = 10 -- 默认参数值, b 可以不用传参数了 </span></span><br><span class="line"> <span class="comment">// : string --- 返回值必须为string类型</span></span><br><span class="line"> <span class="keyword">return</span> <span class="string">'Who am i'</span></span><br><span class="line">}</span><br><span class="line">func1(<span class="number">100</span>,<span class="number">33</span>) <span class="comment">// 形实对应类型一致</span></span><br></pre></td></tr></table></figure><h3 id="任意"><a href="#任意" class="headerlink" title="任意"></a>任意</h3><p>any可以接收任意类型参数</p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">stringify</span>(<span class="params">value: <span class="built_in">any</span></span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">JSON</span>.stringify(value)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 因为有可能会存放任意类型的值，所以ts不会对这个类型做检查</span></span><br><span class="line"><span class="comment">// 在语法上不会报错 存在安全隐患 不建议用</span></span><br><span class="line">stringify(<span class="string">'string'</span>)</span><br><span class="line">stringify(<span class="literal">true</span>)</span><br><span class="line">stringify(<span class="number">100</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// * Unknow 类型和 any 一样可以容纳任意类型比 any 安全</span></span><br></pre></td></tr></table></figure><h3 id="类型别名"><a href="#类型别名" class="headerlink" title="类型别名"></a>类型别名</h3><p>使用 type 给类型取别名</p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> test = <span class="built_in">number</span></span><br><span class="line"><span class="keyword">let</span> counts ：test = <span class="number">124</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> tit = <span class="built_in">string</span> | <span class="built_in">boolean</span></span><br><span class="line"><span class="keyword">let</span> str ：tit = <span class="string">'hey'</span></span><br><span class="line"><span class="keyword">let</span> str1 : tit = <span class="literal">true</span></span><br></pre></td></tr></table></figure><h3 id="交叉类型"><a href="#交叉类型" class="headerlink" title="交叉类型"></a>交叉类型</h3><p>用 <code>&</code> 进行连接</p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 把类型都组合起来，变量赋值必须满足 交叉类型</span></span><br><span class="line"><span class="keyword">interface</span> Itest {</span><br><span class="line"> <span class="attr">key</span>: <span class="built_in">string</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> test = Itest & { <span class="attr">value</span>: <span class="built_in">string</span> }</span><br><span class="line"><span class="keyword">let</span> mytest: test = { key：<span class="string">'No.1'</span>，value：<span class="string">'苦瓜柠檬'</span> }</span><br></pre></td></tr></table></figure><h3 id="隐式类型推断"><a href="#隐式类型推断" class="headerlink" title="隐式类型推断"></a>隐式类型推断</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//因为typescript是静态类型 不可轻易改值</span></span><br><span class="line"><span class="keyword">let</span> age = <span class="number">18</span></span><br><span class="line">age = <span class="string">'string'</span> <span class="comment">// X 报错</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 可预定义变量 后再添类型</span></span><br><span class="line"><span class="keyword">let</span> test </span><br><span class="line">test = <span class="literal">false</span> <span class="comment">// typeoof boolean</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 跟any同个性质 也会造成安全隐患</span></span><br><span class="line"><span class="comment">// 建议在ts编译时给每一个变量都要加上类型</span></span><br></pre></td></tr></table></figure><h3 id="类型断言"><a href="#类型断言" class="headerlink" title="类型断言"></a>类型断言</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 明确指定类型 - 两种写法</span></span><br><span class="line"><span class="keyword">const</span> num1 = res <span class="keyword">as</span> <span class="built_in">number</span> <span class="comment">// 建议</span></span><br><span class="line"><span class="comment">// or</span></span><br><span class="line"><span class="keyword">const</span> num2 = <<span class="built_in">number</span>>res <span class="comment">// JSX 下不能使用</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 类型断言 并不是 类型转换</span></span><br><span class="line"><span class="comment">// 类型转换是在代码编译后的概念 </span></span><br><span class="line"><span class="comment">// 类型断言是在代码编译中的概念，编译后这个断言就不会存在了</span></span><br></pre></td></tr></table></figure><h2 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 接口 interface : 将有结构的数据约束的结构</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义接口</span></span><br><span class="line"><span class="keyword">interface</span> Post {</span><br><span class="line"> <span class="attr">title</span>: <span class="built_in">string</span></span><br><span class="line"> <span class="attr">content</span>: <span class="built_in">string</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">// 使用接口参数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printPost</span>(<span class="params">post: Post</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(post.title);</span><br><span class="line"> <span class="built_in">console</span>.log(post.content);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 使用实参</span></span><br><span class="line">printPost({</span><br><span class="line"> <span class="attr">title</span>: <span class="string">'Hello World'</span>,</span><br><span class="line"> <span class="attr">content</span>: <span class="string">'Welcome my faveion firend'</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="接口成员"><a href="#接口成员" class="headerlink" title="接口成员"></a>接口成员</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`可选成员与只读成员`</span></span><br><span class="line"><span class="keyword">interface</span> Post {</span><br><span class="line"> <span class="attr">title</span>: <span class="built_in">string</span></span><br><span class="line"> <span class="comment">// 可选成员 </span></span><br><span class="line"> subtitle?: srtring <span class="comment">// ? 在这里的意思是 string | undefined </span></span><br><span class="line"> <span class="comment">// 只读成员</span></span><br><span class="line"> <span class="keyword">readonly</span> summary: <span class="built_in">string</span> <span class="comment">// 在初始化完成后，就不能进行修改了</span></span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="string">`动态成员`</span></span><br><span class="line"><span class="comment">//新建一个接口</span></span><br><span class="line"><span class="keyword">interface</span> Cache {</span><br><span class="line"> <span class="comment">// 储存一个合集 键与值都要为string</span></span><br><span class="line"> [prop: <span class="built_in">string</span>]: <span class="built_in">string</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">// 引用Cache的规则</span></span><br><span class="line"><span class="keyword">const</span> cache: Cache = {}</span><br><span class="line"><span class="comment">// 键值都得为string</span></span><br><span class="line">cache.foo = <span class="string">'i am string'</span></span><br><span class="line">cache.bar = <span class="string">'我是字符串鸭'</span></span><br></pre></td></tr></table></figure><h2 id="类"><a href="#类" class="headerlink" title="类"></a>类</h2><h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><ul><li><strong>父类</strong>称为（超类），<strong>子类</strong>被称为（派生类）</li><li>派生类如果包含一个构造函数constructor，则必须在构造函数中调用 super() 方法 !</li></ul><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>{</span><br><span class="line"> <span class="comment">// 声明变量 与 属性的初始值</span></span><br><span class="line"> <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line"> <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line"> <span class="comment">// 从以声明的变量中使用</span></span><br><span class="line"> <span class="function"><span class="title">constructor</span>(<span class="params">name: <span class="built_in">string</span>,age: <span class="built_in">number</span></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.name = name</span><br><span class="line"> <span class="built_in">this</span>.age = age</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 函数声明变量</span></span><br><span class="line">sayHi(msg: <span class="built_in">string</span>): <span class="built_in">void</span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`I am <span class="subst">${<span class="built_in">this</span>.name}</span>,<span class="subst">${msg}</span>`</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="类的访问修饰符"><a href="#类的访问修饰符" class="headerlink" title="类的访问修饰符"></a>类的访问修饰符</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">OneLine</span> </span>{</span><br><span class="line"> <span class="comment">// 公用成员</span></span><br><span class="line"> <span class="keyword">public</span> name: <span class="built_in">string</span>;</span><br><span class="line"> <span class="comment">// 私有成员</span></span><br><span class="line"> <span class="keyword">private</span> age: <span class="built_in">number</span>;</span><br><span class="line"> <span class="comment">// 收保护的</span></span><br><span class="line"> <span class="keyword">protected</span> gender: <span class="built_in">boolean</span>;</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span> , age:<span class="built_in">number</span></span>)</span>{</span><br><span class="line"> <span class="built_in">this</span>.name = name,</span><br><span class="line"> <span class="built_in">this</span>.age = age,</span><br><span class="line"> <span class="built_in">this</span>.gender = <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> oneli = <span class="keyword">new</span> OneLine(<span class="string">"Shrimps"</span>, <span class="number">20</span>);</span><br><span class="line"><span class="built_in">console</span>.log(oneli.name); <span class="comment">// 可以使用</span></span><br><span class="line"><span class="built_in">console</span>.log(oneli.age); <span class="comment">// error</span></span><br><span class="line"><span class="built_in">console</span>.log(oneli.gender); <span class="comment">// error</span></span><br><span class="line"><span class="comment">// 因为age定义private 与 gender定义protected 所以不能在外界引用</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 区别在于 protected 可以在类的子类中使用 如：</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TwoLine</span> <span class="keyword">extends</span> <span class="title">OneLine</span> </span>{</span><br><span class="line"> <span class="function"><span class="title">constructor</span>(<span class="params">name: <span class="built_in">string</span> , age: <span class="built_in">number</span></span>)</span>{</span><br><span class="line"> <span class="built_in">super</span>(name, age)</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>.age); <span class="comment">//private // error</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>.gender); <span class="comment">// protected</span></span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><img src= "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-lazy-src="https://i.loli.net/2021/08/26/FdhGsgnDouatAV8.png"></p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 构造函数 constructor 的事件修饰符默认是public</span></span><br><span class="line"><span class="comment">// 也可以变换 private | protected 规则方法大同小异</span></span><br><span class="line">provate <span class="function"><span class="title">constructor</span>(<span class="params">...</span>)</span>{ ... } </span><br><span class="line"></span><br><span class="line"><span class="string">`只读属性 readonly `</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Test</span> </span>{</span><br><span class="line"> <span class="comment">// 设置为只读的属性，实例只能读取这个属性值，但不能修改</span></span><br><span class="line"> <span class="keyword">readonly</span> test: <span class="built_in">void</span></span><br><span class="line"> <span class="comment">// 如果只读修饰符和可见性修饰符同时出现，需要将只读修饰符写在可见修饰符后面</span></span><br><span class="line"> <span class="keyword">protected</span> <span class="keyword">readonly</span> test: <span class="built_in">void</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="类类型接口"><a href="#类类型接口" class="headerlink" title="类类型接口"></a>类类型接口</h3><ul><li>使用接口可以强制一个类的定义必须包含某些内容</li><li> 要使用接口，需要使用关键字<code>implements</code></li><li><strong>implements</strong> 关键字用来指定一个类要继承的接口，如果是接口和接口、类和类直接的继承，使用<code>extends</code>，如果是类继承接口，则用<code>implements</code>。</li></ul><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 要求使用该接口的值必须有一个对应属性 如：eat</span></span><br><span class="line"><span class="keyword">interface</span> Eat {</span><br><span class="line"> eat (food: <span class="built_in">string</span>): <span class="built_in">void</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">// 建议单独接口写单独规则 不会冲突</span></span><br><span class="line"><span class="keyword">interface</span> Run {</span><br><span class="line"> run (run: <span class="built_in">string</span>): <span class="built_in">void</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过 implement 继承 对应两个接口</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span> <span class="title">implements</span> <span class="title">Eat</span>,<span class="title">Run</span></span>{</span><br><span class="line"> eat (food: <span class="built_in">string</span>): <span class="built_in">void</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'人类的吃法'</span>);</span><br><span class="line"> }</span><br><span class="line"> run (run: <span class="built_in">string</span>): <span class="built_in">void</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'直立行走'</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">animal</span> <span class="title">implements</span> <span class="title">Eat</span>,<span class="title">Run</span> </span>{</span><br><span class="line"> eat (eat: <span class="built_in">string</span>): <span class="built_in">void</span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'动物的吃法'</span>);</span><br><span class="line"> }</span><br><span class="line"> run (run: <span class="built_in">string</span>): <span class="built_in">void</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'爬行'</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="抽象类"><a href="#抽象类" class="headerlink" title="抽象类"></a>抽象类</h3><ul><li><p>抽象类一般用来被其他类继承，而不直接用它创建实例。</p></li><li><p>抽象类和类内部定义抽象方法，使用<code>abstract</code>关键字：</p></li></ul><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">abstract</span> <span class="class"><span class="keyword">class</span> <span class="title">Animals</span> </span>{</span><br><span class="line"> eat (eat: <span class="built_in">string</span>): <span class="built_in">void</span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'动物们的吃法'</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 定义抽象方法 // * 不需要方法体</span></span><br><span class="line"> <span class="keyword">abstract</span> run (distance: <span class="built_in">number</span>): <span class="built_in">void</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dog</span> <span class="keyword">extends</span> <span class="title">Animals</span> </span>{</span><br><span class="line"> <span class="comment">// 可在子类中添加方法</span></span><br><span class="line"> run (distance: <span class="built_in">number</span>): <span class="built_in">void</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'四脚爬行'</span>, distance);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> dogs = <span class="keyword">new</span> Dog()</span><br><span class="line"><span class="comment">// 同时拥有父类及自身的实现方法</span></span><br><span class="line">dogs.eat(<span class="string">'来福'</span>)</span><br><span class="line">dogs.run(<span class="number">999</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// * 抽象方法和抽象存取器都不能包含实际的代码块。</span></span><br></pre></td></tr></table></figure><h3 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h3><p><code>泛型</code>就像一个占位符一个变量，在使用的时候我们可以将定义好的类型像参数一样传入，原封不动的输出</p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 一般类型</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createNumberArray</span> (<span class="params">length: <span class="built_in">number</span>, value: <span class="built_in">number</span></span>): <span class="title">number</span>[] </span>{</span><br><span class="line"> <span class="keyword">const</span> arr = <span class="built_in">Array</span><<span class="built_in">number</span>>(length).fill(value)</span><br><span class="line"> <span class="keyword">return</span> arr</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> res = createNumberArray(<span class="number">3</span>,<span class="number">77</span>)</span><br><span class="line"><span class="comment">// res => 77 77 77</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 泛型就是把我们定义时不能够明确的类型变成参数</span></span><br><span class="line"><span class="comment">// 类型参数一般用 <T> 定义 </span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createArray</span><<span class="title">T</span>> (<span class="params">length: <span class="built_in">number</span>, value: T</span>): <span class="title">T</span>[] </span>{</span><br><span class="line"> <span class="keyword">const</span> arr = <span class="built_in">Array</span><<span class="built_in">number</span>>(length).fill(value)</span><br><span class="line"> <span class="keyword">return</span> arr</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 需使用时再去传递这个类型参数</span></span><br><span class="line"><span class="keyword">const</span> res = createArray<<span class="built_in">string</span>>(<span class="number">3</span>,<span class="string">'hey'</span>)</span><br><span class="line"><span class="comment">// res => hey hey hey</span></span><br></pre></td></tr></table></figure><!-- > 参考文档 [Typescript-2w字总结]() -->]]></content>
</entry>
</search>