-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
2318 lines (1955 loc) · 226 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
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>超级好用的 git 可视化软件</title>
<url>/hexo-blog/2021/01/14/%20git%20%E5%8F%AF%E8%A7%86%E5%8C%96%E8%BD%AF%E4%BB%B6/</url>
<content><</p>
<p></p>
]]></content>
<tags>
<tag>git</tag>
</tags>
</entry>
<entry>
<title>how to create a new post in hexo</title>
<url>/hexo-blog/2020/10/12/%20how%20to%20create%20a%20new%20post%20in%20hexo/</url>
<content><![CDATA[<p>把以下路径放到系统变量中，就可以直接用以下命令创建新的博客内容啦。<br>路径以这个为结尾的 ….\hexo\node_modules.bin<br>[好像不行]</p>
<p>hexo n “blog名”<br><a href="https://hexo.io/docs/writing">https://hexo.io/docs/writing</a><br>打开：<br>open ./blog名</p>
]]></content>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>1～2～3 三步创建一个 Django 项目 【SOP】</title>
<url>/hexo-blog/2020/01/03/1%EF%BD%9E2%EF%BD%9E3%20%E4%B8%89%E6%AD%A5%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%20Django%20%E9%A1%B9%E7%9B%AE%20%E3%80%90SOP%E3%80%91/</url>
<content><![CDATA[<p>进入到运行 Django 的虚拟环境。workon Django_web（虚拟环境篇）</p>
<p>找一个自己喜欢的位置，比如桌面。</p>
<h2 id="1-建-Django-项目"><a href="#1-建-Django-项目" class="headerlink" title="1 建 Django 项目"></a>1 建 Django 项目</h2><p>在系统终端 或者 VScode 终端：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">django-admin startproject 项目名<br></code></pre></td></tr></table></figure>
<h2 id="2-建子应用"><a href="#2-建子应用" class="headerlink" title="2 建子应用"></a>2 建子应用</h2><p>2.1 创造</p>
<p>进到这个目录中去，<code>cd 项目名。</code></p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">django-admin startapp 应用名<br></code></pre></td></tr></table></figure>
<p>2.2 注册</p>
<p>进入到项目同名目录，里面有个 settings.py 文件。</p>
<p>找到INSTALLED_APPS，把应用名添加到这里面。</p>
<h2 id="3-启动项目"><a href="#3-启动项目" class="headerlink" title="3 启动项目"></a>3 启动项目</h2><p><code>python manage.py runserver</code></p>
<p>完成～～<br><img src="https://tva1.sinaimg.cn/large/008eGmZEly1got35wx1jbj30u00j5405.jpg"></p>
<p>导入介绍语（why need 后台管理）～～～～</p>
<p><strong>后台管理：</strong></p>
<p>首先创建一个管理员账号：</p>
<p>python manage.py createsuperuser</p>
<p>终端面板会提示你设置用户名和密码。</p>
<p>然后打开admin.py，注册一下你的模型类：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">from yourapp.models import yourModel1, yourModel2<br><br>admin.site.register(yourModel)<br>admin.site.register(yourModel2)<br></code></pre></td></tr></table></figure>
<p>通过 localhost:8000/admin 访问后台面板，就能看到自己注册的模型类的具体信息啦。</p>
]]></content>
</entry>
<entry>
<title>50 projects - draw app</title>
<url>/hexo-blog/2021/01/12/50-projects-draw-app/</url>
<content><![CDATA[<p>可以把这个js 加到我的个人网站里。</p>
]]></content>
</entry>
<entry>
<title>50 projects - to do list</title>
<url>/hexo-blog/2021/02/03/50%20proojects%20-%20to%20do%20list/</url>
<content><![CDATA[<p><img src="https://raw.githubusercontent.com/wenjialu/todolist-app/main/todo-list-demo1.gif" alt="效果展示"></p>
<h2 id="to-do-list"><a href="#to-do-list" class="headerlink" title="to do list"></a>to do list</h2><h3 id="静态样式及代码："><a href="#静态样式及代码：" class="headerlink" title="静态样式及代码："></a>静态样式及代码：</h3><img src="https://tva1.sinaimg.cn/large/008eGmZEgy1gmzxxii2xrj30k00ck0v6.jpg" />
<h3 id="动态功能："><a href="#动态功能：" class="headerlink" title="动态功能："></a>动态功能：</h3><p><strong>知识点预览：</strong></p>
<p> <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList">classList</a> 的方法 add， toggle 等</p>
<p>右键 – 检查 – application – storage – local storage</p>
<p><a href="https://developers.google.com/web/tools/chrome-devtools/storage/localstorage?utm_source=devtools">Localstorage</a> 的方法setItem, getItem.</p>
<p>Local storage.setItem(key, value)</p>
<p>js ：</p>
<h4 id="功能1-ADD"><a href="#功能1-ADD" class="headerlink" title="功能1: ADD"></a><strong>功能1: ADD</strong></h4><p>填写todo，回车后会添加到我的待办列表里面。</p>
<p><strong>实现思路：</strong>代办列表是个取名为 todosUL 的列表，</p>
<p>只有document 的 element 才能被append进去, 而 text 不能被append到 todosUL 这个列表中。</p>
<p>所以要创造一个 element，并赋值为 input.value。</p>
<p>tips: 1.要先用一个变量 todoText 存储 input.value, 对其做个简单的判断防止其为空。</p>
<ol start="2">
<li><p>todo.text todotext </p>
<p> todotext 不一定是当下输入的，也可能是之前输入的todo.text.</p>
</li>
</ol>
<p> 1 what is todo.completed?</p>
<p><del>2 why <strong>if(todo && todo.completed)</strong>{ 。。 classList.add(。。）} 才能生效啊 。A：不，不是这样的</del></p>
<p><strong>答疑：</strong>关于 classList.add(“completed”)。</p>
<p>在这个功能中不是必要的。</p>
<p>这只是打个标签，</p>
<p>后续实现保存列表内容的功能时，会依据这个标签做出相应的方法。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"># 伪代码<br><br>listen submit? <br><br>adddTodo(?){<br> #输入的文字<br> let todoText = input.value<br><br> # 1.what is ? ? 2. what is classList.add? 3 why set innerText<br> if(todoText){<br> const todoEL = document.createElement("li")<br> <br> //if( ？ && ？.completed){<br> // todoEL.classList.add("completed")<br> //}<br> <br> todoEL.innerText = todoText<br><br> todosUL.appendChild(todoEL)<br> console.log(todosUL)<br> <br> todo.value = ""<br><br> }<br><br>}<br><br></code></pre></td></tr></table></figure>
<h4 id="功能2-MARK-COMPLETE-amp-REMOVE"><a href="#功能2-MARK-COMPLETE-amp-REMOVE" class="headerlink" title="功能2: MARK COMPLETE & REMOVE"></a><strong>功能2: MARK COMPLETE & REMOVE</strong></h4><p>MARK COMPLET: 鼠标左击，待办就用（下划线划掉的方式）标记为完成</p>
<p>REMOVE: 鼠标右击，待办从列表中消失</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">todoEL.addEventListener("click",()=>todoEL.classList.toggle("completed"))<br><br>todoEL.addEventListener("contextmenu",(e)=>{<br> e.preventDefault()<br> todoEL.remove()<br>})<br><br></code></pre></td></tr></table></figure>
<h4 id="功能3：-刷新待办不会消失"><a href="#功能3：-刷新待办不会消失" class="headerlink" title="功能3： 刷新待办不会消失"></a><strong>功能3： 刷新待办不会消失</strong></h4><p>思路： 对于上述3种操作：增删改，每次操作都记录在 localstorage本地存储 中。</p>
<p>写一个 updateLS() 函数实现保存功能，并在每个方法后触发。</p>
<p>Q: 我已经写入到local storage了 ， 为啥还是一刷新就没了</p>
<p>猜想；setitem 写对，getitem写错？</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">// change string to array<br>const todos = JSON.parse(localStorage.getItem("todos"))<br><br>if (todos){<br> todos.forEach(todo => addToDo(todo))<br>}<br><br><br>方法1/2/3{<br> ...<br> updateLS()<br>}<br><br><br><br>function updateLS(){<br> todosEL = document.querySelectorAll("li")<br> <br> todosEL.forEach(todoEL =>{<br> todos.push({<br> text: todoEL.innerText,<br> completed: todoEL.classList.contains("completed")<br> })<br> })<br> // todos is an object, change it to string<br> localStorage.setItem("todos",JSON.stringify(todos))<br> }<br><br></code></pre></td></tr></table></figure>
<h4 id="知识点总结："><a href="#知识点总结：" class="headerlink" title="知识点总结："></a>知识点总结：</h4><p>Localstorage 的方法setItem, getItem.</p>
<p>每次增删改触发存储方法，把数据放到Localstorage；然后再从Localstorage里取出来的数据基础上，实现增删改</p>
<p><strong>Resources :</strong></p>
<p>Cdnjs ->font-awesome</p>
<p>Fonts.google.com</p>
]]></content>
<tags>
<tag>50 projects</tag>
</tags>
</entry>
<entry>
<title>About me</title>
<url>/hexo-blog/2020/09/20/About-me/</url>
<content><![CDATA[<p>In 1996, a little girl was born in Shanghai, China. In 2019 at her age of 23, she pursued her dream of studying NeuroPsychology and Computer Science in the University of Edinburgh. What makes her her and what would happened to her during her journey of foreign land?<br>Let’s come and have a look! </p>
]]></content>
</entry>
<entry>
<title>50 projects - netflix navigation</title>
<url>/hexo-blog/2021/01/12/50-projects-netflix-navigation/</url>
<content><![CDATA[]]></content>
</entry>
<entry>
<title>git 疑难杂症大全 （更新中）</title>
<url>/hexo-blog/2020/12/09/Git%20%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/</url>
<content><</p>
<p>纳尼，咋都没提交上呢？？？ </p>
<p>原来前一天终端的git commit 也没有成功，但是终端这个铁憨憨好像没有发现，还提示 Everything up-to-date (主人，一切都更新好了哦！), 仿佛一切安好的样子。</p>
<p></p>
<h2 id="解决问题"><a href="#解决问题" class="headerlink" title="解决问题"></a>解决问题</h2><p>工欲善其事， 必先利其器。</p>
<p>但是好像我的解决问题工具都有些问题，哭哭。</p>
<h4 id="工具-1-github-desktop-image-20201113032007246-Users-lujiawen-Library-Application-Support-typora-user-images-image-20201113032007246-png"><a href="#工具-1-github-desktop-image-20201113032007246-Users-lujiawen-Library-Application-Support-typora-user-images-image-20201113032007246-png" class="headerlink" title="工具 1 github desktop "></a>工具 1 github desktop </h4><p>曾经是个非常好用的一个应用端可视化管理git的平台。</p>
<p>直到。。。我建了那个hexo_blog加了个ssh密钥之后。</p>
<p><strong>总是有问题，不是ssh 连接失败，就是commit提交error -1.或者狂按fetch也没有反应。</strong></p>
<p>哎，先不用它了。</p>
<h4 id="工具-2-终端"><a href="#工具-2-终端" class="headerlink" title="工具 2 终端"></a>工具 2 终端</h4><p> 终端是个天真的铁憨憨，始终觉得自己同步完了，git树很干净。</p>
<p>。。。 </p>
<p>这究竟是为啥？</p>
<p>嗷呜，先不去打扰它对这个世界的美好幻想了。</p>
<p></p>
<h4 id="工具-3-我自己的手👋–手动同步"><a href="#工具-3-我自己的手👋–手动同步" class="headerlink" title="工具 3 我自己的手👋–手动同步"></a>工具 3 我自己的手👋–手动同步</h4><p>我的设想是这样，既然两个仓库冲突了，那我删掉其中一个。那不就铁定不会冲突了吗。</p>
<p>呵呵，理想很美好。现实总是。。。啪啪啪打脸呢。</p>
<p>我已经把本地仓库删光光，然后复制了远程的到本地，重新建立了他们的连接。竟然还是不行。</p>
<p>到底是哪里出问题了呢？？</p>
<p>难道是我本地空间不足，一些文件上传了云，所以本地没有，导致有冲突吗？</p>
<p>下面是疯狂提示：</p>
<p></p>
<p></p>
<p>不不不，应该不会。。。。吧</p>
<h3 id="猜想-–-为啥会出现这些问题呢？"><a href="#猜想-–-为啥会出现这些问题呢？" class="headerlink" title="猜想 – 为啥会出现这些问题呢？"></a>猜想 – 为啥会出现这些问题呢？</h3><p>应该就是远程仓库和本地仓库同步有问题，导致版本冲突。那么为啥同步会有问题呢？</p>
<h4 id="猜测-1：密钥🔑不对，远程链接不上"><a href="#猜测-1：密钥🔑不对，远程链接不上" class="headerlink" title="猜测 1：密钥🔑不对，远程链接不上"></a>猜测 1：密钥🔑不对，远程链接不上</h4><h4 id="猜测-2-本地仓库和远程仓库之间没同步好"><a href="#猜测-2-本地仓库和远程仓库之间没同步好" class="headerlink" title="猜测 2: 本地仓库和远程仓库之间没同步好"></a>猜测 2: 本地仓库和远程仓库之间没同步好</h4><h4 id="猜测-3-难道是我本地空间不够？"><a href="#猜测-3-难道是我本地空间不够？" class="headerlink" title="猜测 3: 难道是我本地空间不够？"></a>猜测 3: 难道是我本地空间不够？</h4><h3 id="验证猜想-–-来嘛，咱一个一个来"><a href="#验证猜想-–-来嘛，咱一个一个来" class="headerlink" title="验证猜想 – 来嘛，咱一个一个来"></a>验证猜想 – 来嘛，咱一个一个来</h3><p>问题总是一个一个一个一个一个一个一个…一个一个一个一被解决的嘛。</p>
<p>别怕，先来验证第一个猜想。</p>
<h4 id="是不是因为公钥的问题，去查查看"><a href="#是不是因为公钥的问题，去查查看" class="headerlink" title="是不是因为公钥的问题，去查查看"></a>是不是因为公钥的问题，去查查看</h4><ul>
<li>```bash<br>1.ssh-keygen -t rsa -C “<a href="mailto:youremail@example.com">youremail@example.com</a>” # 创建SSH-Key<br>将本地用户目录（用户目录/.ssh/id_rsa.pub）的ssh公钥添加到GitHub中<br>2.git bash中输入<br>cat ~/.ssh/id_rsa.pub<br>复制好出现的内容<br>3.打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便。<br>把刚刚复制的内容全部黏贴到框中，点击确定保存。<h1 id="以上步骤我以前已经做过了。也就是说我已经在github添加了我的ssh。我现在只要验证下是不是还连接成功。"><a href="#以上步骤我以前已经做过了。也就是说我已经在github添加了我的ssh。我现在只要验证下是不是还连接成功。" class="headerlink" title="以上步骤我以前已经做过了。也就是说我已经在github添加了我的ssh。我现在只要验证下是不是还连接成功。"></a>以上步骤我以前已经做过了。也就是说我已经在github添加了我的ssh。我现在只要验证下是不是还连接成功。</h1>（这个ssh链接是和我的整个github的）<br>4输入ssh -T <a href="mailto:git@github.com">git@github.com</a>，（ssh -T <a href="mailto:git@code.aliyun.com">git@code.aliyun.com</a> ssh -T git@<a href="https://github.com/wenjialu/wenjialu.github.io%EF%BC%89">https://github.com/wenjialu/wenjialu.github.io）</a><br>如果如下图所示，出现我的用户名，那就成功了。<br>也可以直接进行项目的克隆或提交进行测试。我的建议是，在配置完成后，对各个平台都进行一次链接测试。<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"><br>- 可以看到，我已经与我的github建立了远程联系了：<br><br>- 就是好像和仓库的ssh连接有些问题，但是git里面又已经加了这个仓库了。<br><br>- <br><br>- <br><br>暂且认为这个是没问题的吧。继续验证下一个猜想。<br><br><br><br>#### 本地仓库和远程仓库之间没同步好？<br><br>**那我就重新建立一次远程连接嘛**<br><br>```zsh<br>git init # 初始化本地仓库<br>git add ./ # 将文件添加到待提交区域<br>git commit -m “提交信息” # 提交<br>使用GitHub创建仓库（new Repository）<br>ssh-keygen -t rsa -C “[email protected]” # 创建SSH-Key<br>将本地用户目录（用户目录/.ssh/id_rsa.pub）的ssh公钥添加到GitHub中<br>git remote add origin [email protected]:XXXX.git # 将远程仓库与本地仓库建立连接<br>git pull origin master –allow-unrelated-histories # 首先将远程仓库的文件pull下来<br>#如果执行这句命令时，出现了“ couldn’t find remote ref –allow-unrelated-histories”的错误，输入如下命令即可解决：<br>```git pull --rebase origin master<br>```git push origin master<br>git push origin master # 将本地提交同步到远程仓库<br></code></pre></td></tr></table></figure></li>
</ul>
<p>注意那个绿色的代码，重大突破来咯！！！</p>
<p>当我用那行绿色代码解决error的时候，这个解决error的语句也出现了error。。</p>
<p></p>
<p>当我搜索解决方案的时候，stackoverflow[<a href="https://stackoverflow.com/questions/16064513/git-fatal-unable-to-write-new-index-file]%E4%B8%8A%E7%9A%84%E8%BF%99%E4%BD%8D%E5%93%A5%E4%BB%AC%E4%B8%80%E4%B8%8B%E9%81%93%E7%A0%B4%E4%BA%86%E9%97%AE%E9%A2%98%E7%9A%84%E5%85%B3%E9%94%AE%E3%80%82">https://stackoverflow.com/questions/16064513/git-fatal-unable-to-write-new-index-file]上的这位哥们一下道破了问题的关键。</a></p>
<p></p>
<p>喵个叽 果然和我磁盘空间脱不了关系。</p>
<h4 id="磁盘空间不足"><a href="#磁盘空间不足" class="headerlink" title="磁盘空间不足"></a>磁盘空间不足</h4><p>我感觉我快接近问题的本质了！！！</p>
<p>我再分析下其他人的回答，好像这个空间是服务器端，也就是github那边的问题。和我设想的本地空间不足好像有点不一样啊。</p>
<p>再看这位的回答：</p>
<p></p>
<p>妈呀我都快激动哭了，这么朋友也是由这个问题导致的commit不了。</p>
<p>那么我赶紧来试试这个命令</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">chmod -RN /path/to/repo <span class="hljs-comment">#别忘了把/path/to/repo改成你本地仓库的地址哦</span><br></code></pre></td></tr></table></figure>
<p>然后我们继续把刚刚中断的命令敲完：</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">git pull --rebase origin master <span class="hljs-comment">#可能会有一些小冲突，按照提示走就行了。</span><br>git push origin master<br></code></pre></td></tr></table></figure>
<p>上图！啊哈哈 虽然有些安全性上的小问题，但是我就先无视了。</p>
<p></p>
<p>完结撒花～～～～～！！</p>
<p>什么？ 你以为这就完结了，还是太天真了哦。</p>
<p>未完待续。。。。。。</p>
<p>嵌套git</p>
<p></p>
<h4 id="小插曲："><a href="#小插曲：" class="headerlink" title="小插曲："></a>小插曲：</h4><p>一开始把拉远程仓库的命令搞错了。</p>
<p>既不是 git pull, 也不是 git pull master 🙅 。</p>
<p>正确的应该是 git pull origin master 🙆 ！</p>
<p>希望大家不要和我一样犯这个傻傻的错误哦。</p>
<p></p>
]]></content>
<tags>
<tag>Writing</tag>
</tags>
</entry>
<entry>
<title>Google Cloud 部署我的网站 (附宝塔面板安装教程)</title>
<url>/hexo-blog/2021/01/23/Google-Cloud-%E9%83%A8%E7%BD%B2%E6%88%91%E7%9A%84%E7%BD%91%E7%AB%99/</url>
<content><![CDATA[<h3 id="前言："><a href="#前言：" class="headerlink" title="前言："></a>前言：</h3><p>我曾经在github 上部署过我的个人网站，不过github上的静态网页已经越来越不能满足我对网站的需求了。</p>
<p>于是，我选择把整个网站迁移到自己的云服务器上。</p>
<p>如果你对我的网站感兴趣，可以点<a href="http://wenjialu.tech/">这里</a>参观。</p>
<p>以下是我的教程。</p>
<h3 id="安装宝塔面板"><a href="#安装宝塔面板" class="headerlink" title="安装宝塔面板"></a>安装宝塔面板</h3><p><strong>vm实例</strong>右侧有个<code>ssh</code>按钮，点击就可以进入到后台。</p>
<p>1 sudo - i</p>
<p>2 脚本安装 （一整行复制哦）</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs text"># My google cloud instance is Centos<br>Centos安装脚本 <br>yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh<br> <br>#My google cloud instance-1 is Debian<br>Debian安装脚本<br>wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh<br> <br>Ubuntu/Deepin安装脚本 <br>wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh<br> <br><br>Fedora安装脚本<br> wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh<br></code></pre></td></tr></table></figure>
<p>3 安装完成后记录下自己的宝塔地址和密码</p>
<p><img src="https://tva1.sinaimg.cn/large/008eGmZEgy1gmyueb5t6pj30lk08nmyg.jpg"></p>
<p>4 浏览器登陆面板后，选择LNMP（推荐）</p>
<p>5 按照提示注册</p>
<p>安装完成～</p>
<p><img src="https://tva1.sinaimg.cn/large/008eGmZEgy1gmytc9yq07j310j0l4q69.jpg"></p>
<p>要注意将vps的临时ip设置为静态ip，不然关机重启会导致ip发生变化（设置方法：vpc网络->外部ip地址->类型）</p>
<h3 id="添加站点"><a href="#添加站点" class="headerlink" title="添加站点"></a>添加站点</h3><p>Step1: 注册域名</p>
<p>hostinger 上挑一个自己喜欢的域名。</p>
<p>我花了10块钱在hostinger 上买了一个一年的域名 wenjia.tech</p>
<p>有了域名相当于你生产的“宝宝”有了名字，</p>
<p>但是宝宝光有名字不够啊，还得去公安局登记注册身份证号，</p>
<p>同理，我们的域名也需要经过一个叫 DNS 的服务认证，才能建立起 域名和ip 的一对一联系。</p>
<p>Step2: 解析域名</p>
<p> hostinger - DNS/Nameservers</p>
<table>
<thead>
<tr>
<th>Type</th>
<th>Name</th>
<th>Points to</th>
<th>Til</th>
</tr>
</thead>
<tbody><tr>
<td>A</td>
<td>www</td>
<td>填写你的服务器 IP</td>
<td>300</td>
</tr>
</tbody></table>
<p>或者</p>
<p>打开<a href="https://help.aliyun.com/document_detail/29716.html">阿里云</a></p>
<p>DNS解析 <a href="https://dns.console.aliyun.com/?spm=5176.12901015.0.i12901015.7fc6525cUup6lY&accounttraceid=d17d9f090e29430f9e46fae5c55b8f00vsgi#/dns/setting/wenjialu.tech">https://dns.console.aliyun.com/?spm=5176.12901015.0.i12901015.7fc6525cUup6lY&accounttraceid=d17d9f090e29430f9e46fae5c55b8f00vsgi#/dns/setting/wenjialu.tech</a></p>
<p>到 hostinger - DNS/Nameservers - change nameservers</p>
<p>改成阿里云的 DNS 服务器</p>
<table>
<thead>
<tr>
<th><strong>ns1.alidns.com</strong></th>
</tr>
</thead>
<tbody><tr>
<td><strong>ns2.alidns.com</strong></td>
</tr>
</tbody></table>
<p>Step3: 宝塔 – 网站 – 添加站点</p>
<p>把域名填进去</p>
<p>保存好数据库等信息。</p>
<p>Step4: 添加 ssl 证书</p>
<p><a href="https://wenjialu.github.io/hexo_blog/2021/01/25/%E7%BB%99%E8%87%AA%E5%B7%B1%E7%9A%84%E7%BD%91%E7%AB%99%E9%85%8D%E7%BD%AEssl%E8%AF%81%E4%B9%A6/">教程地址</a></p>
<p>接下来，可以根据自己的需求，选择自己所需的教程部分。</p>
<p>如果你以前已经有了网站，想迁移到这个新服务器上的，看上传宝塔。</p>
<p>如果是建站小白或者是想要一个新网站的，到安装插件部分。</p>
<h3 id="上传宝塔"><a href="#上传宝塔" class="headerlink" title="上传宝塔"></a>上传宝塔</h3><p>先把博客所在的文件夹 打包成<strong>压缩包</strong></p>
<p>到网站的根目录 www - wwwroot </p>
<p>依次点击：文件 - 上传</p>
<p>上传完成之后再解压就可以啦。</p>
<h3 id="安装插件"><a href="#安装插件" class="headerlink" title="安装插件"></a>安装插件</h3><p>软件商店–宝塔插件 – 宝塔一键部署源码 </p>
<p>里面有很多中博客模版可以选择。</p>
<p>我推荐使用 wordpress, 口碑有保证。</p>
<h3 id="参考链接："><a href="#参考链接：" class="headerlink" title="参考链接："></a>参考链接：</h3><p>添加 ssl 证书：<a href="https://wenjialu.github.io/hexo_blog/2021/01/25/%E7%BB%99%E8%87%AA%E5%B7%B1%E7%9A%84%E7%BD%91%E7%AB%99%E9%85%8D%E7%BD%AEssl%E8%AF%81%E4%B9%A6/">https://wenjialu.github.io/hexo_blog/2021/01/25/%E7%BB%99%E8%87%AA%E5%B7%B1%E7%9A%84%E7%BD%91%E7%AB%99%E9%85%8D%E7%BD%AEssl%E8%AF%81%E4%B9%A6/</a></p>
<p>阿里云ssl： <a href="https://yq.aliyun.com/articles/637307">https://yq.aliyun.com/articles/637307</a></p>
<p>部署网站：<a href="https://www.bilibili.com/video/av57100951/">https://www.bilibili.com/video/av57100951/</a></p>
<p>ssh： <a href="https://www.vediotalk.com/archives/606">https://www.vediotalk.com/archives/606</a></p>
]]></content>
<tags>
<tag>Google Cloud</tag>
</tags>
</entry>
<entry>
<title>Google Cloud</title>
<url>/hexo-blog/2021/01/15/Google-Cloud/</url>
<content><![CDATA[<p>What I want to do:<br>I need a server to depoly my applications, such as websites.<br>I used to depoly my websites on Github Pages, but that only works for static pages and it has many limitations.</p>
<p>Why I use Google Cloud:<br>I now there are many companies could provide server service, such as Aliyun, HuaweiCloud, AWS, etc.<br>Most of they only provide 30-day trail.<br>Google Cloud, on the other hand, not only allows me to use it for free for a year but also give me 300 $ for trial, so I choose it.</p>
<p>How to use it:<br>It is quite easy as long as you have a Visa.</p>
<ol>
<li>Wisit its <a href="https://cloud.google.com/">website</a>. </li>
<li>Find “VM instance” from the left sidebar and click it.</li>
<li>Fill the information of your bill.</li>
<li>Select the configuration of your server.</li>
<li>Done!</li>
</ol>
]]></content>
<tags>
<tag>Server</tag>
</tags>
</entry>
<entry>
<title>Growth Hacking -- ins 篇</title>
<url>/hexo-blog/2021/01/05/Growth%20Hacking%20--%20ins%20%E7%AF%87/</url>
<content><![CDATA[<p>Ins 是个很多元的公域流量平台。 只要有一技之长/自己的特色，无论高矮胖瘦，都有可能成为红人。</p>
<p>我有朋友就通过持续在 ins 上输出高质量图片 而获得找上门的广告机会。</p>
<p>这就激发了我在 ins 上分享图片的想法。</p>
<p>因为我最近也是个热爱生活，喜欢拍照分享的人 ～ </p>
<p>与其只能让自己的私域流量圈子里的人看到，何不顺便分享给全世界？</p>
<p>于是随手打开 ins 逛了 一圈， 无论是朋友还是关注的名人，他们分享的照片都很出彩啊。</p>
<p>看来想脱颖而出不是那么简单的，还需要一些 growth hacking 的技巧。</p>
<p>以下是我根据达人分享总结的 ins 涨粉攻略: </p>
<p>step1.1: 确立自己的主题 ⭐️<br>最好是垂直领域的<br>“If you can’t be first in a category, set up a new category you can be first in.” 如果你无法成为某个细分领域的第一名，那就创造一个新的细分领域并尝试成为第一名。</p>
<p>step1.2: 写profile<br>明确告诉大家，我的主题是什么？ 能给关注者带来什么价值？</p>
<p>step2: <strong>每日</strong>更新照片。有时可以发发以前的老照片保持活跃度。</p>
<p>Tricks:<br>说在前面：<br>tricks 虽能带来流量，但能留住关注靠的是高质量内容！<br>如果自己的账号内容太少，很难做增长。建议至少有2-3页高质量、风格一致的内容后，再开始使用增长策略。</p>
<p>trick 1: 加热门 hashtag。<br>类似 Focalmark 的app。</p>
<p>可以非常轻松地为自己的照片加上相关主题的热门 hashtag，最大化照片的曝光度。</p>
<p>trick 2: 短时间内关注尽可能多的相同主题的优质账号。（会突然有很多粉丝）</p>
<p>tips：1）每小时不要超过 100 个</p>
<p>2）由于关注人数有上限</p>
<p>超过上限后，可以用类似“Followers Assistant” 的免费 APP（Android平台）分析关注的人有没有回关我，从而选择取消关注的对象。</p>
<p>trick 3: F4F ( follow for follow)<br>follow的人群要有针对性<br>@superkakarotto 用的最多、效果最好、且不会被Action Block(暂时没有遇到)的两个方式是「F4F和点赞评论粉丝主页。他一般的操作是打开与我相似的博主最近一条post，点开点赞列表，一口气关注30~50个点赞者，然后开始往下进入列表里其他用户的主页，点赞或发表评论。以我的经验，回关的效果是 关注>评论>点赞，成本是 评论>点赞>关注，因为关注连进入用户首页都不需要，只要在点赞列表就能一键关注，所以成本最低，效果最好，不会被封，这就是他认为F4F仍然是2020冷启动最好策略的原因」</p>
<p>trick 4：发 story<br>trick 5: 使用 ins 新功能<br>trick 6: 开通 insights</p>
<p>trick 7秘密武器–Telegram</p>
<p>telegram是ins增长神器。telegram上有很多特定主题的群聊，我们可以用搜群助手找到跟我们自身主题相关的群，然后在里面发言，推荐我们自己的ins。实测效果极佳！<br><a href="https://t.me/hao1234bot">https://t.me/hao1234bot</a><br>更新：欢迎大家加入基于Telegram的INS涨粉互助群：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs text">https://t.me/joinchat/Ep0gbQ9FGJeMRCokb_Sb8A<br></code></pre></td></tr></table></figure>
<p>加入方法：完整复制上方链接到telegram内打开即可。</p>
<p>3k - 4k 以上粉后可以实现自然增长。</p>
<p>资料💾：1. <a href="https://jarodise.com/instagram-600-followers-in-6-days-follow-unfollow-regrann/">https://jarodise.com/instagram-600-followers-in-6-days-follow-unfollow-regrann/</a><br>2. <a href="https://zhuanlan.zhihu.com/p/140049624">https://zhuanlan.zhihu.com/p/140049624</a> @superkakarotto </p>
]]></content>
<tags>
<tag>growth hacking</tag>
</tags>
</entry>
<entry>
<title></title>
<url>/hexo-blog/2021/01/06/Growth%20Hacking%20/</url>
<content><![CDATA[<p>-–</p>
<p>title: Growth Hacking – general 篇</p>
<p>date: 2021-01-05 22:30:48</p>
<p>tags: growth hacking</p>
<p>-–</p>
<p>我在大理参加了自由职业者大会，参会者有旅行分享的头部大V，B站最火法语博主，大理好在的运营者，有400 万用户的独立软件开发者，清华大学新闻学毕业生等等。</p>
<p>一个内容创业者在创业初期最重要的工作有且只有三个：</p>
<p><strong>1.持续创作自己所选内容niche相关的高质量内容。</strong></p>
<p>2.将自己创作的内容通过广撒网的形式分发到各个内容平台和渠道，并通过受众反馈来确认自己内容受众最为集中的2-3个平台。</p>
<p>3.持续创作的同时要重视与受众的互动与反馈链，通过建立社群的方式增加粉丝粘性，慢慢地将路人转化成普通粉，并将普通粉转化成铁杆粉。**</p>
<p>这可能是一个非常漫长的过程，而且无法略过。我们不排除有些人会因为运气因素，在经历这个过程之前就实现爆红，但是如果没有<a href="https://mp.weixin.qq.com/s?__biz=MzIyMjAwNzAzNg==&mid=2650207361&idx=1&sn=19351e1cced0f629b6ebe2d13b34b5d8&chksm=f0364f12c741c604e2c26c5572110a2f40a1cadddc1aa0b97ee37b9fdc24bb5d13c357f3c14f&scene=21#wechat_redirect">1000个铁杆粉</a>作为根基，那么这种爆红也终将是昙花一现，</p>
<p>资源：<a href="https://jarodise.com/ultimate-guide-for-content-startup-in-2020/">https://jarodise.com/ultimate-guide-for-content-startup-in-2020/</a></p>
]]></content>
</entry>
<entry>
<title>Intro Of the Sidebar Widgets</title>
<url>/hexo-blog/2020/09/23/Intro-Of-the-Sidebar-Widgets/</url>
<content><![CDATA[<p>Hey, this is actually a blog for reminding myself of the usage of the Sidebar Widgets.</p>
<p>The sidebar widgets are shown on the right side of my website. They includes “About”, “Tag”, “Tagcloud”, “archives” and “recent_posts”.</p>
<p>Please do not confused sidebar widgets with article types.</p>
]]></content>
<tags>
<tag>trail</tag>
</tags>
</entry>
<entry>
<title>How I build this website with Hexo</title>
<url>/hexo-blog/2020/09/23/How-I-build-this-website-with-Hexo/</url>
<content><![CDATA[<p>折腾的来源：好看但是难搞的 the Space Cadet theme<br>npm install bootstrap@next<br>本模版灵感来源于 bootstrap ： <a href="https://getbootstrap.com/docs/4.0/examples/blog/">https://getbootstrap.com/docs/4.0/examples/blog/</a><br>npm install hexo-tag-bootstrap –save</p>
<p>渲染策略：<a href="https://blog.csdn.net/kinggoZhang/article/details/96192344">https://blog.csdn.net/kinggoZhang/article/details/96192344</a></p>
<p>主题排名：<br>我挑出来好看的<br><a href="https://github.com/huan-qiu/lemon-lime">https://github.com/huan-qiu/lemon-lime</a><br>Simple<br><a href="https://github.com/philippkeller/hexo-theme-twbootstrap">https://github.com/philippkeller/hexo-theme-twbootstrap</a><br>这个简约又好看，和我简历系列也很搭：<a href="https://www.iguan7u.cn/">https://www.iguan7u.cn/ </a> 下载地址 <a href="https://github.com/iGuan7u/Acetolog">https://github.com/iGuan7u/Acetolog</a></p>
<p><a href="http://www.swig.org/tutorial.html">http://www.swig.org/tutorial.html</a></p>
<p>这个有点bbc的风格，看上去很专业，而且侧边文章目录结构看的很清楚 <a href="https://itimetraveler.github.io/hexo-theme-hiero/">https://itimetraveler.github.io/hexo-theme-hiero/</a> 下载地址<a href="https://github.com/iGuan7u/Acetolog">https://github.com/iGuan7u/Acetolog</a><br> Hiker主题预览</p>
<p>类似Twitter 和bootstrap适应的最好 <a href="https://github.com/wzpan/hexo-theme-freemind/">https://github.com/wzpan/hexo-theme-freemind/</a><br>geek 风格啊哈哈哈，就是文章不好看 <a href="https://geek.lc/">https://geek.lc/</a><br>这个首页好看， 但是太白了 <a href="https://siricee.github.io/hexo-theme-Chic/">https://siricee.github.io/hexo-theme-Chic/</a></p>
]]></content>
<tags>
<tag>tutorial</tag>
</tags>
</entry>
<entry>
<title></title>
<url>/hexo-blog/2020/11/18/LISP/</url>
<content><![CDATA[<h1 id="LISP"><a href="#LISP" class="headerlink" title="LISP"></a>LISP</h1><p>Physics: limitation of really world</p>
<p>cs: just limitation of our mind</p>
<p><strong>techniques for controlling complexity</strong></p>
<p>Black-box abstraction:</p>
<p>不用管黑箱里面发生了什么</p>
<p>Conventional Interfaces 约定接口</p>
<p>元语言抽象</p>
<h2 id="rules"><a href="#rules" class="headerlink" title="rules"></a>rules</h2><h2 id="如何运用"><a href="#如何运用" class="headerlink" title="如何运用"></a>如何运用</h2>]]></content>
</entry>
<entry>
<title>Mac顺滑启动Node.js项目指南</title>
<url>/hexo-blog/2021/01/28/Mac%E9%A1%BA%E6%BB%91%E5%90%AF%E5%8A%A8Node.js%E9%A1%B9%E7%9B%AE%E6%8C%87%E5%8D%97/</url>
<content><![CDATA[<p><strong>可视化</strong></p>
<p>建议可以用一个仪表盘来可视化管理vue项目</p>
<p>1 启动</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">vue ui<br></code></pre></td></tr></table></figure>
<p>tip：如果遇到报错：getaddrinfo ENOTFOUND localhost错误。</p>
<p>则：</p>
<p>sudo vim /etc/hosts , 并在 host里面加上 127.0.0.1 localhost</p>
<p>2 导入/新建项目 </p>
<p>如果项目已经有雏形的话，可以直接导入。然后点击右边的“在编辑器中打开”按钮，就会自动在 vscode 中打开你的项目代码，非常的方便好用。</p>
<p><img src="https://tva1.sinaimg.cn/large/008eGmZEly1gn9qohguo4j30yo09xaay.jpg"></p>
<p>3 管理项目</p>
<p>使用仪表盘，可以非常直观的管理项目的依赖、插件、配置等等。</p>
<p><img src="https://tva1.sinaimg.cn/large/008eGmZEly1gn9qshw2l0j311z0juwh8.jpg"></p>
<p>4 编译/发布项目</p>
<p>点开任务栏，甚至能帮助直接编译启动你的项目。</p>
<p>启动成功后，还会有详细的数据分析，如速度统计，资源占比分配是否合理等等，并给出具体的建议。</p>
<p><img src="https://tva1.sinaimg.cn/large/008eGmZEly1gn9qvx87smj31240j9adn.jpg"></p>
<p>原理：</p>
<p>-</p>
<p>api.js</p>
<p>Crud.js</p>
<p>index.vue</p>
<p>-</p>
<p>Router – index.vue</p>
<p><strong>配置：</strong></p>
<p>需要解决2个问题</p>
<p>1 Proxy问题：</p>
<p><strong>process.env</strong></p>
<blockquote>
<p>Nodejs 提供了 process.env API，它返回一个包含用户环境信息的对象。当我们给 Nodejs 设置一个环境变量，并且把它挂载在 process.env 返回的对象上，便可以在代码中进行相应的环境判断。</p>
</blockquote>
<p>windows下你要这样：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">#node中常用的到的环境变量是NODE_ENV，首先查看是否存在 <br>set NODE_ENV <br>#如果不存在则添加环境变量 <br>set NODE_ENV=production <br>#环境变量追加值 set 变量名=%变量名%;变量内容 <br>set path=%path%;C:\web;C:\Tools <br>#某些时候需要删除环境变量 <br>set NODE_ENV=<br></code></pre></td></tr></table></figure>
<p><strong>永久配置</strong><br>右键(此电脑) -> 属性(R) -> 高级系统设置 -> 环境变量(N)…</p>
<p>mac下你要这个：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">#node中常用的到的环境变量是NODE_ENV，首先查看是否存在<br>echo $NODE_ENV<br>#如果不存在则添加环境变量<br>export NODE_ENV=production<br>#环境变量追加值<br>export path=$path:/home/download:/usr/local/<br>#某些时候需要删除环境变量<br>unset NODE_ENV<br>#某些时候需要显示所有的环境变量<br>env<br></code></pre></td></tr></table></figure>
<p><strong>Mac必须要写 <a href="http://127.0.0.1/">http://127.0.0.1</a> 而不是 localhost ！！！</strong></p>
<p>即使host文件里面配置过 DNS 的关系也得这样写。</p>
<p>For windows:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><code class="hljs js"><span class="hljs-string">"proxy"</span>: {<br> <span class="hljs-string">"/auth/google"</span>: {<br> <span class="hljs-string">"target"</span>: <span class="hljs-string">"localhost:8830/m"</span><br> }<br>}<br></code></pre></td></tr></table></figure>
<p>For Mac:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><code class="hljs js"><span class="hljs-string">"proxy"</span>: {<br> <span class="hljs-string">"/auth/google"</span>: {<br> <span class="hljs-string">"target"</span>: <span class="hljs-string">"http://127.0.0.1:8830/m"</span><br> }<br>}<br></code></pre></td></tr></table></figure>
<p>2 请求超时：</p>
<p>请求超时，首先判断接口服务器是否启动，再去判断接口地址、端口、路径是否正确</p>
<p>我这些都没问题。</p>
<p>然后查看 axios：</p>
<p>scr - utils - request.js的文件</p>
<p>打开文件，在里面如下图所示更改一个地方即可，即把timeout的时间改长一些（比如 5000 改 90000），再重新打开项目获取数据会发现成功获取并且不报超时～</p>
<p>3页面直接显示空白<br>修改vue.config.js中publicPath为**’ ./ ‘**即可注意这里的publicPath 为build下</p>
<p>4 表单不显示</p>
<p>当后台服务器启动，其他表单能显示，唯独我自己写的表单加载不出来。</p>
<p>当后端服务器没有开启的时候，所有表单都是加载不出来的，因为请求找不到相应资源。</p>
<p>由此推断，是没有找到相应的路径，问题就出现在url上！</p>
<p>解决方案：</p>
<p>1 把后端Controller的访问url改成Round_Dict</p>
<p> api 和 user 间有循环应用，在pom中注释掉其中一个依赖就行了。</p>
<p>Q: SpringCloud启动出现 Could not locate PropertySource: I/O error on GET request for 解决](<a href="https://my.oschina.net/PTOldDriver/blog/3016037">https://my.oschina.net/PTOldDriver/blog/3016037</a>)</p>
<p>1.检测配置文件里是否有如果没有请加上</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs \">spring:<br> cloud:<br> config:<br> enabled: false<br></code></pre></td></tr></table></figure>
<p>2.如果是application.yml(application.properties)改为 bootstrap.yml（bootstrap.properties）即可.</p>
<p>Q</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">java.lang.IllegalStateException: Service id not legal hostname (poi_portrait_service)<br></code></pre></td></tr></table></figure>
<p>解决办法：</p>
<p>application.yml文件中的</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">spring:<br> application:<br> name: poi_portrait_service<br></code></pre></td></tr></table></figure>
<p>资料：</p>
<p>环境变量process.env： <a href="https://github.com/frmachao/blog/issues/4">https://github.com/frmachao/blog/issues/4</a></p>
<p>element_ui: <a href="https://cloud.tencent.com/developer/section/1489884">https://cloud.tencent.com/developer/section/1489884</a></p>
]]></content>
</entry>
<entry>
<title>My first flutter app</title>
<url>/hexo-blog/2021/10/13/My%20first%20flutter%20app/</url>
<content><![CDATA[<p>可以把我之前的卡片web版做成app</p>
<p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gvvqgncfx6j30xb0n0aau.jpg"></p>
<p>ref - <a href="https://flutter.dev/docs/get-started/test-drive#create-app">https://flutter.dev/docs/get-started/test-drive#create-app</a></p>
]]></content>
<categories>
<category>tech</category>
</categories>
<tags>
<tag>app</tag>
<tag>flutter</tag>
</tags>
</entry>
<entry>
<title>React 简易教程</title>
<url>/hexo-blog/2020/12/09/React%20%E6%95%99%E7%A8%8B/</url>
<content><![CDATA[<p>先做 react 介绍</p>
<p>亮点 和 局限。<br>优化：<br>PureComponent 是优化 React 应用程序最重要的方法之一，易于实施，只要把继承类从 Component 换成 PureComponent 即可，可以减少不必要的 render 操作的次数，从而提高性能，而且可以少写 shouldComponentUpdate 函数，节省了点代码。</p>
<p>和 vue区别</p>
<p>然后案例 smartbrain</p>
<h1 id="react-简易教程"><a href="#react-简易教程" class="headerlink" title="react 简易教程"></a>react 简易教程</h1><p>Component : 不仅包含html css 还有功能，可以之后被复用</p>
<p>就像搭乐高一样搭 Component</p>
<p>自上而下渲染，一个Component 节点修改，只有他孩子节点知道，父母节点不会知道。</p>
<p>具体啥prop在主js里设定，</p>
<p>组件js 的函数里面，prop只是个穿传去的参数 （所以具体prop是啥不知道，他只是个参数啊。具体的在主js里面定义），里面调用 this.prop.prop名</p>
<p>export</p>
<p>但凡要被import的文件 都要export</p>
<h2 id="Lifecycle-hooks"><a href="#Lifecycle-hooks" class="headerlink" title="Lifecycle hooks"></a>Lifecycle hooks</h2><p><a href="https://reactjs.org/docs/react-component.html">https://reactjs.org/docs/react-component.html</a></p>
<p>component </p>
<p>every time auto triggered</p>
<h3 id="mounting"><a href="#mounting" class="headerlink" title="mounting"></a>mounting</h3><ul>
<li><a href="https://reactjs.org/docs/react-component.html#constructor"><strong>constructor()</strong></a></li>
<li><a href="https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops"><code>static getDerivedStateFromProps()</code></a></li>
<li><a href="https://reactjs.org/docs/react-component.html#render"><strong>render()</strong></a></li>
<li><a href="https://reactjs.org/docs/react-component.html#componentdidmount"><strong>componentDidMount()</strong></a></li>
<li>render()</li>
</ul>
<h3 id="updating"><a href="#updating" class="headerlink" title="updating"></a>updating</h3><h3 id="Unmounting"><a href="#Unmounting" class="headerlink" title="Unmounting"></a>Unmounting</h3><h2 id="Chirdren"><a href="#Chirdren" class="headerlink" title="Chirdren"></a>Chirdren</h2><scroll>
<p> 内部的内容就是它的chirldren</p>
</scroll>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">function Scroll( props ) {<br> return (<br> <div style ={ {overflowY:"scroll", border: "1px solid black", height: "500px"} }><br> {props.children}<br> </div><br> )<br> };<br></code></pre></td></tr></table></figure>
<h2 id="代码框架"><a href="#代码框架" class="headerlink" title="代码框架"></a>代码框架</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{<br> <span class="hljs-comment">// 设置状态初始值（创参）</span><br> <span class="hljs-title">constructor</span> (<span class="hljs-params"></span>){<br> <span class="hljs-built_in">super</span>();<br> <span class="hljs-built_in">this</span>.state = initialStatexxx;<br> }<br><br> <span class="hljs-comment">// 给状态赋值的函数 (形参)</span><br> <span class="hljs-comment">// 都是函数, 设定完了之后在组件里面使用 （用参），最后在 render 里面被调用 （实参）</span><br> onRouteChange = <span class="hljs-function">() =></span>{<br> <span class="hljs-built_in">this</span>.setState({<span class="hljs-attr">route</span>: route});<br> }<br><br> onXXX = <span class="hljs-function">() =></span>{<br> <br> }<br> <br><span class="hljs-function"><span class="hljs-title">render</span>(<span class="hljs-params"></span>)</span>{<br> <span class="hljs-keyword">const</span> {route, ...} = <span class="hljs-built_in">this</span>.state;<br> <span class="hljs-keyword">return</span>(<br> )<br>}<br> <br>}<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App;<br></code></pre></td></tr></table></figure>
]]></content>
<tags>
<tag>react</tag>
</tags>
</entry>
<entry>
<title>node.js</title>
<url>/hexo-blog/2020/12/09/Server%20%E7%AE%80%E4%BB%8B%20%20(node.js)/</url>
<content><</p>
<h3 id="用http-三行建立连接-（之后就不用http了，用express）"><a href="#用http-三行建立连接-（之后就不用http了，用express）" class="headerlink" title="用http 三行建立连接 （之后就不用http了，用express）"></a>用http 三行建立连接 （之后就不用http了，用express）</h3><p>测试连接</p>
<p></p>
<p>ps。要打开本地浏览器 <strong>访问localhost:3000.才会出现hear you。</strong></p>
<p><strong>访问一次出现一次</strong></p>
<h3 id="接受与响应"><a href="#接受与响应" class="headerlink" title="接受与响应"></a>接受与响应</h3><p></p>
<h3 id="响应返回json"><a href="#响应返回json" class="headerlink" title="响应返回json"></a>响应返回json</h3><p>传json回去</p>
<p></p>
<h2 id="新轮子：express-⭐️"><a href="#新轮子：express-⭐️" class="headerlink" title="新轮子：express ⭐️"></a>新轮子：express ⭐️</h2><p>19年最流行的server library： express</p>
<p>详情可以去看官方文档</p>
<pre><code>npm install express
</code></pre>
<h3 id="一样还是三行搭建好服务器。"><a href="#一样还是三行搭建好服务器。" class="headerlink" title="一样还是三行搭建好服务器。"></a>一样还是三行搭建好服务器。</h3><pre><code>const express = require("express");
const app = express();
app.listen(3000)
</code></pre>
<h3 id="middleware-中间件"><a href="#middleware-中间件" class="headerlink" title="middleware 中间件"></a>middleware 中间件</h3><h4 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h4><p> 写在响应前</p>
<pre><code>app.use((req, res, next) => {
console.log("hi")
next();
}
)
</code></pre>
<h4 id="常用中间件"><a href="#常用中间件" class="headerlink" title="常用中间件"></a>常用中间件</h4><h5 id="Body-parser-（新版本这个中间件被写进去了，就不用了）"><a href="#Body-parser-（新版本这个中间件被写进去了，就不用了）" class="headerlink" title="Body parser （新版本这个中间件被写进去了，就不用了）"></a>Body parser （新版本这个中间件被写进去了，就不用了）</h5><p>解析json的</p>
<pre><code>const bodyParse = require("body-parser")
const app = express();
// 中间件
app.use(bodyParse.json());
</code></pre>
<h3 id="返回响应"><a href="#返回响应" class="headerlink" title="返回响应"></a>返回响应</h3><pre><code>app.get("/",(req, res) => {
res.send("hellooo, get root")
}
);
</code></pre>
<p>对比之前的，不需要设置相应头之类的了</p>
<p></p>
<h4 id="返回-json"><a href="#返回-json" class="headerlink" title="返回 json"></a>返回 json</h4><p></p>
<h4 id="返回静态页面-如html，-css"><a href="#返回静态页面-如html，-css" class="headerlink" title="返回静态页面 如html， css"></a>返回静态页面 如html， css</h4><pre><code>app.use( express.static(__dirname + "/静态文件夹"))
</code></pre>
<h4 id="Get-post-delete"><a href="#Get-post-delete" class="headerlink" title="Get post delete"></a>Get post delete</h4><p>然后用postman 测</p>
<h3 id="文件系统-fs"><a href="#文件系统-fs" class="headerlink" title="文件系统 fs"></a>文件系统 fs</h3><p>先下载 fs</p>
<p>fs 能读取文件</p>
<pre><code>const fs = requore("fs");
const file = fs.readFileSync("./hello.txt");
console.log(file.toString());
</code></pre>
<p></p>
<p>fs 能写文件</p>
<p>appendFile(“.txt”,” “ )</p>
<p>writeFile( “ .txt”, “ “)</p>
<p>删除</p>
<p>Unlink</p>
<h2 id="Postman-测试"><a href="#Postman-测试" class="headerlink" title="Postman 测试"></a>Postman 测试</h2><p>query, params 请求可以在URL里面直接加 eg。localhost:3000/?name=xxx&age=xx. /:id</p>
<p>Server 里面能 get 到 req.query</p>
<p>header等就要在 postman 里面模拟了</p>
<h2 id="Restful"><a href="#Restful" class="headerlink" title="Restful"></a>Restful</h2><p>/名词</p>
<p>彩蛋：</p>
<p>Johnny-Five （用来做robot的 js 库）❤️</p>
]]></content>
<tags>
<tag>backend</tag>
</tags>
</entry>
<entry>
<title>SpringBoot 数据库操作指南</title>
<url>/hexo-blog/2021/01/20/SpringBoot-%E6%95%B0%E6%8D%AE%E5%BA%93/</url>
<content><![CDATA[<p>[toc]</p>
<h2 id="SpringBoot-连接数据库"><a href="#SpringBoot-连接数据库" class="headerlink" title="SpringBoot 连接数据库"></a>SpringBoot 连接数据库</h2><h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><p>Spring中，数据从数据库到前端的流程：</p>
<p><strong>Jdbc配置（pom.xml，application.yml，cofig工程中：cof-dev.yal: spring.datasource:url?useSSL=false usrname password ） –> <del>model</del> HandlerMapping –> service(interface -> impl(继承接口+@Override方法 ： 调用RoundDictExample（增删改查，验证）)) –> controller –> @responsebodey (包装响应 ResultStatus设置响应) –> [swagger(/v2/api-docs)] 怎么返回实体类？？？–> 前端</strong></p>
<p>ps. 我后期会画波脑图来更详细精确的分析。</p>
<p>Controller –> service –> mapper</p>
<p> 其中： DispatcherServlet收到请求调用HandlerMapping处理器映射器。</p>
<p> 处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">model （HandlerMapping ）<br><br> -- domain: RoundDictExample (连接sql的增删改查，验证等功能, 里面的id统统要改成dict_id 或 dict_uuid); <br><br> --persistence: RoundDictMapper.xml, RoundDictMapper (建立数据库与java代码的映射)<br><br></code></pre></td></tr></table></figure>
<p>【可以对照着这张图来康】</p>
<p><img src="https://tva1.sinaimg.cn/large/008eGmZEgy1gn0cadg3yjj30jn0a2gq6.jpg"></p>
<h3 id="Tips"><a href="#Tips" class="headerlink" title="Tips:"></a>Tips:</h3><ul>
<li>本地远程连接数据库<br>注意: 使用远程连接时,使用的连接用户和该用户现在的ip地址应该是远程数据库中允许的用户和允许的ip,否则是不允许连接的.<ul>
<li><code>终端：mysql -Pxx -hxxx -uroot -p</code></li>
<li>图形化界面：Navicat / SQLyog</li>
</ul>
</li>
</ul>
<h3 id="测试："><a href="#测试：" class="headerlink" title="测试："></a>测试：</h3><h4 id="原理-1"><a href="#原理-1" class="headerlink" title="原理"></a><strong>原理</strong></h4><p>理清楚从发送请求到数据被处理的流程：</p>
<p>发送请求 –> DispatcherServlet （–doDispatc）—–。。。controller –> <strong>responseMessage类</strong> (各种方法)—></p>
<p> controller –> coreController (各种方法)</p>
<figure class="highlight java"><table><tr><td class="code"><pre><code class="hljs java">... 省略部分代码....<br><span class="hljs-comment">// Actually invoke the handler.</span><br>mv = ha.handle(processedRequest, response, mappedHandler.getHandler());<br>... 省略部分代码<br></code></pre></td></tr></table></figure>
<p>Spring MVC会根据请求URL的不同，配置的RequestMapping的不同，为请求匹配不同的HandlerAdapter。</p>
<p>比如对于请求地址：<a href="http://127.0.0.1:8888/hello/test1?id=98%E5%8C%B9%E9%85%8D%E5%88%B0%E7%9A%84HandlerAdapter%E6%98%AFHttpRequestHandlerAdapter%E3%80%82">http://127.0.0.1:8888/hello/test1?id=98匹配到的HandlerAdapter是HttpRequestHandlerAdapter。</a></p>
<p>我们直接进入到HttpRequestHandlerAdapter中看下这个类的handle方法。</p>
<figure class="highlight java"><table><tr><td class="code"><pre><code class="hljs java">Copy<span class="hljs-meta">@Override</span><br><span class="hljs-meta">@Nullable</span><br><span class="hljs-function"><span class="hljs-keyword">public</span> ModelAndView <span class="hljs-title">handle</span><span class="hljs-params">(HttpServletRequest request, HttpServletResponse response, Object handler)</span></span><br><span class="hljs-function"> <span class="hljs-keyword">throws</span> Exception </span>{<br> ((HttpRequestHandler) handler).handleRequest(request, response);<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">null</span>;<br>}<br></code></pre></td></tr></table></figure>
<h4 id="工具"><a href="#工具" class="headerlink" title="工具"></a>工具</h4><h5 id="postman"><a href="#postman" class="headerlink" title="postman"></a>postman</h5><h5 id="吹爆-Swagger-超好用"><a href="#吹爆-Swagger-超好用" class="headerlink" title="吹爆 Swagger 超好用"></a>吹爆 Swagger 超好用</h5><p>List： 返回的是分页的结果！！！！！！</p>
<p>action可能在父类里面，娃娃它的父类。</p>
<p>**getDocumentation()**方法，发现其实就是返回了一个Swagger对象（参数信息都存在Swagger对象的definitions属性里</p>
<p> [org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping] </p>
<ul>
<li><p>Mapped “{[/m/add],methods=[POST]}” onto public com.jj.api.vo.ResponseMessage<java.lang.Integer> com.jj.red.packet.user.admin.controller.RoundDictController.add(com.jj.red.packet.user.mybatis.domain.RoundDict)</p>
</li>
<li><p>.定义统一返回数据格式</p>
<ul>
<li>```<br>public class ResponseFormat {<pre><code>private static Map<Integer,String> messageMap = Maps.newHashMap();
//初始化状态码与文字说明
static {
/* 成功状态码 */
messageMap.put(200, "成功");
/* 服务器错误 */
messageMap.put(1000,"服务器错误");
/* 参数错误：10001-19999 */
</code></pre>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"><br><br><br> <br><br><br><br><br><br><br><br><br><br>#### 问题：<br><br>##### 访问获得404 <br><br>* 根据原理可知：我调用的接口不存在/没找到，Spring直接将Response的errorStatus状态设置成1，将http响应码设置为500或者404。 -- 继承BasicErrorController 就可以覆盖原有的错误处理方式。<br><br>* 根据报错也可以验证：<br><br></code></pre></td></tr></table></figure>
java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986<pre><code> at org.apache.coyote.http11.Http11InputBuffer.parseRequestLine(Http11InputBuffer.java:479)
at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:684)
</code></pre>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"><br> 可能性：<br><br>1 TestCase测试Impl类的方法没有问题，但是Swgger和前端调用接口就会报404错误：<br><br>这是因为我之前把接口的注解@RestController 改成了@Controller。<br><br>改回来就好了。<br><br></code></pre></td></tr></table></figure>
import org.springframework.web.bind.annotation.RestController;<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"><br>**@RestController** （相当于@Controller + @ResponseBody 后者是方法级的注解）<br><br>tips：1 如果使用@RestResultController，如果返回值是String类型就存在指向性问题，返回String类型，指向的地址是String字符串的地址，因此前端http访问我的接口会报404.<br><br> 2 也可以尝试在接收参数里加上 HttpServletResponse response<br><br>2<br><br>可能是jar包的问题<br><br>Artificial -- lib<br><br> 新手在刚接触springboot的时候，可能会出现访问请求404的情况，代码怎么看都是对的，但就是404。<br><br> 在十分确定代码没问题的时候，可以看下自己的包是不是出问题了，什么意思么？<br><br> 答案：SpringBoot 注解 @SpringBootApplication 默认扫描当前类的同包以及子包下的类； 如：启动程序在包名 com.yang.test.ymkribbonconsumer下，则会查找所有 com.yang.test.ymkribbonconsumer下的文件以及 com.yang.test.ymkribbonconsumer 下的所有子包里面的文件。<br><br>* x<br><br> * xxMapper.xml 里面应该写的表名而不是数据库名。<br><br>* ~~JDBC Connection XXX will not be managed by Spring~~和SqlSession was not registered for synchronization because synchronization is not active<br><br> 意思是相关操作没有被事务管理起来，虽不影响项目功能正常使用，可每次启动看到这堆警告，导致强迫证又犯了，有一种非除之而后快件的冲动，于是检查配置文件中事务配置的部分，又上网搜索，经过一番测试，终于消除这些警告，下面是解决的过程。<br><br> 可看 https://www.codenong.com/cs106354150/<br><br>在db.properties里配置的username和passowrd是以前的一个项目的账户，那个账户的权限只有一个sms数据库，而那个账户没有我当前测试的xzl数据库的权限。<br><br>## <br><br>新建了一个有当前测试库权限的数据库用户，或者直接用root来测试。<br>链接：https://www.jianshu.com/p/259ce2ec91d3<br><br>##### 发出请求：连接数据库，响应：连接成功啦，却返回null，而没有返回实体类。<br><br>## <br><br><br><br>* Error parsing HTTP request header<br><br></code></pre></td></tr></table></figure>
o.apache.coyote.http11.Http11Processor:Error parsing HTTP request header</li>
</ul>
</li>
</ul>
<p>Note: further occurrences of HTTP request parsing errors will be logged at DEBUG level.</p>
<p>java.lang.IllegalArgumentException: Invalid character found in the request target. </p>
<p>The valid characters are defined in RFC 7230 and RFC 3986</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"><br>目前，可以确定的是，该报错是由于url中有非法字符导致的，解决方法有<br><br>> - 请求url中别有奇奇怪怪的字符，老老实实不好吗 使用了不安全字符，他们直接放在Url中的时候，可能会引起解析程序的歧义。如<br>><br></code></pre></td></tr></table></figure>
<blockquote>
<p> { } | \ ^ [ ] ` ~ % # 等<br> <figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"><br>- 使用tomcat7.0.69以前的版本，这些版本不对请求头进行检验<br><br>- 不想降低tomcat版本？那就对特殊字符进行转义，嗯确实有点麻烦<br><br>- if you are not accidentally requesting with HTTPS protocol instead of HTTP protocol. If you don't configure SSL on Tomcat and you send HTTPS request, it will result to this weird message..<br><br>## SpringMVC 架构<br><br>### what：<br><br><br><br><br><br>**M：model**<br><br>jojo 建数据库<br><br>dao (vo value object 拆的更细的的实体类)增删改查<br><br>servive<br><br>**V：view**<br><br>**C：controller**<br><br>接收用户请求，交给模型处理，把模型处理完的数据返回给视图。<br><br>一般来说是java类<br><br><br><br><br><br>后端项目结构主要是MC，即 Model + Controller。<br><br>举例：<br><br><img src="https://tva1.sinaimg.cn/large/008eGmZEgy1gmyudci33oj307b05dq3l.jpg" /><br><br><br><br>admin文件夹: 管理员用户 - VO + -Controller<br><br>整个文件夹：-( mybatis + service ) + -Controller<br><br><br><br><br><br><br><br>### how：<br><br>Spring的核心：servlet<br><br><br><br>只有红框部分需要自己写，其他spring都帮忙做掉了。<br><br>234 找请求url对应的类处理器<br><br>5678 找并返回了数据库的数据。<br><br>91011 拿到数据库数据，拼接url，去找对应的前端视图。<br><br></code></pre></td></tr></table></figure><br>SpringMVC流程：<br>1、 用户发送请求至前端控制器 DispatcherServlet。<br>2、 DispatcherServlet收到请求调用HandlerMapping处理器映射器。<br>3、 处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。<br>4、 DispatcherServlet调用HandlerAdapter处理器适配器。<br>5、 HandlerAdapter经过适配调用具体的处理器(Controller，也叫后端控制器)。<br>6、 Controller执行完成返回ModelAndView。<br>7、 HandlerAdapter将controller执行结果ModelAndView返回给DispatcherServlet。<br>8、 DispatcherServlet将ModelAndView传给ViewReslover视图解析器。<br>9、 ViewReslover解析后返回具体View。<br>10、DispatcherServlet根据View进行渲染视图（即将模型数据填充至视图中）。<br>11、 DispatcherServlet响应用户。</p>
</blockquote>
<p>```</p>
<p>====</p>
<p>Selevlet</p>
<p><img src="https://tva1.sinaimg.cn/large/008eGmZEgy1gn0be8se1mj30gd0e277r.jpg"></p>
<p>dispatcherservlet</p>
<p></p>
<p><img src="https://tva1.sinaimg.cn/large/008eGmZEgy1gn0bidh5swj30ov0c0q8d.jpg"></p>
<p>鼻祖：selvelet</p>
<p>实现 xxx（request, response)</p>
<p><img src="https://tva1.sinaimg.cn/large/008eGmZEgy1gn0bk36cdoj30pd0bc44a.jpg"></p>
<p>资源：</p>
<p>DispatcherServlet : <a href="https://blog.csdn.net/xyx_hfut/article/details/104914200">https://blog.csdn.net/xyx_hfut/article/details/104914200</a> ⭐️</p>
<p>Spring自动注解原理：<a href="https://juejin.cn/post/6844904009577267207">https://juejin.cn/post/6844904009577267207</a></p>
<p>Spring后端到数据库操作：<a href="https://segmentfault.com/a/1190000010208184">https://segmentfault.com/a/1190000010208184</a></p>
<p>Springboot集成Mybatis全流程: <a href="https://blog.csdn.net/weixin_42322648/article/details/105063601?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242">https://blog.csdn.net/weixin_42322648/article/details/105063601?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242</a></p>
<p>从404讲起发送请求返回请求的过程：<a href="https://www.cnblogs.com/54chensongxia/p/14007696.html">https://www.cnblogs.com/54chensongxia/p/14007696.html</a> ⭐️</p>
<p>404注解： <a href="https://blog.csdn.net/weixin_40160720/article/details/86601556">https://blog.csdn.net/weixin_40160720/article/details/86601556</a></p>
<p>写不好就会引起 404 的注解们的剖析大全： <a href="https://juejin.cn/post/6844903893734785037">https://juejin.cn/post/6844903893734785037</a> ⭐️</p>
<p>uuid 设为long会带来什么问题： <a href="https://www.jianshu.com/p/d7d63696eb89">https://www.jianshu.com/p/d7d63696eb89</a></p>
<p>Swagger: <a href="https://www.codenong.com/cs107102063/">https://www.codenong.com/cs107102063/</a></p>
]]></content>
<tags>
<tag>SpringBoot</tag>
</tags>
</entry>
<entry>
<title>Tomcat on Google Cloud</title>
<url>/hexo-blog/2021/01/15/Tomcat%20on%20Google%20Cloud/</url>
<content><![CDATA[<p>What I want to do:<br>To deploy my webiste which is written by Jave, I also need to install jdk and tomcat on the Cloud.</p>
<p>What is Tomcat:</p>
<p>How to do it:<br>ssh<br><a href="https://www.jianshu.com/p/1a7ee8cbf665">https://www.jianshu.com/p/1a7ee8cbf665</a></p>
<p>Improvment:<br>use a visualable interface： 宝塔, which is easier to use.<br><a href="https://zhuanlan.zhihu.com/p/124133187">https://zhuanlan.zhihu.com/p/124133187</a></p>
]]></content>
<tags>
<tag>Server</tag>
</tags>
</entry>
<entry>
<title>about 50 projects</title>
<url>/hexo-blog/2021/01/11/about-50-projects/</url>
<content><![CDATA[<p>I am going to build 50 interesting fontend projects and update the tutorials of them.<br>All those projects would be used in my personal websites to make it greater.<br>LOL</p>
]]></content>
<tags>
<tag>blog</tag>
</tags>
</entry>
<entry>
<title>electron</title>
<url>/hexo-blog/2020/12/09/electron/</url>
<content><![CDATA[<p>Electron 是一个框架，可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序。 然后这些应用程序可以打包在macOS、Windows和Linux上直接运行，或者通过Mac App Store或微软商店分发。</p>
<p>通常，您使用每个操作系统特定的本地应用程序框架为操作系统 (OS)创建一个桌面应用程序。 Electron 可以在使用您已经知道的技术后写入您的应用程序。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><code class="hljs js">sudo npm install -g electron --unsafe-perm=<span class="hljs-literal">true</span> --allow-root<br></code></pre></td></tr></table></figure>
<p>> <a href="mailto:electron@9.4.0">electron@9.4.0</a> postinstall /usr/local/lib/node_modules/react-devtools/node_modules/electron</p>
<p>> node install.js</p>
<p>官方文档：</p>
<p><a href="https://www.electronjs.org/docs/tutorial/quick-start#create-a-basic-application">https://www.electronjs.org/docs/tutorial/quick-start#create-a-basic-application</a></p>
]]></content>
<tags>
<tag>JavaScript</tag>
</tags>
</entry>
<entry>
<title>liunx服务器 上的各种操作</title>
<url>/hexo-blog/2021/01/16/liunx%E6%9C%8D%E5%8A%A1%E5%99%A8%20%E4%B8%8A%E7%9A%84%E5%90%84%E7%A7%8D%E6%93%8D%E4%BD%9C/</url>
<content><</p>
<p>详见 <a href="https://zhuanlan.zhihu.com/p/94010951">https://zhuanlan.zhihu.com/p/94010951</a></p>
<p>ok, jdk装好了，</p>
<p>接下来配置环境变量。</p>
<p>2 配置环境变量</p>
<p>2.1 找到相应的文件</p>
<p>在.bashrc 或者 .bash_profile 里面配置，由于不知道具体叫啥名字</p>
<p>cd ~</p>
<p>ls -a显示全部文件，包括隐藏文件</p>
<p>2.2 添加环境变量</p>
<p>注意啦，这里 open 是打不开的，要用vim编辑器</p>
<p>Vim .bashrc</p>
<p>输入以下内容（ps：JAVA_HOME 路径写你自己的java安装路径 ）</p>
<figure class="highlight java"><table><tr><td class="code"><pre><code class="hljs java">#set java environment<br>JAVA_HOME=/root/usr/java/jdk1<span class="hljs-number">.8</span><span class="hljs-number">.0_131</span><br>CLASS_PATH=.:$JAVA_HOME/lib/<br>PATH=$PATH:$JAVA_HOME/bin<br>export JAVA_HOME CLASS_PATH PATH<br></code></pre></td></tr></table></figure>
<figure class="highlight java"><table><tr><td class="code"><pre><code class="hljs java">export JAVA_HOME=/root/usr/java/jdk1<span class="hljs-number">.8</span><span class="hljs-number">.0_131</span><br>export JRE_HOME=${JAVA_HOME}/jre <br>export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib <br>export PATH=${JAVA_HOME}/bin:$PATH<br></code></pre></td></tr></table></figure>
<p></p>
<p>关于vim的使用：打开后按i就可以进入编辑模式，在文件最后加上环境变量配置内容按exit退出编辑模式返回命令模式输入:wq保存并退出vim</p>
<p>2.3 刷新一下使它生效</p>
<p>source ~/.bashrc</p>
<h2 id="打开-jar-包"><a href="#打开-jar-包" class="headerlink" title="打开 jar 包"></a>打开 jar 包</h2><p>假设Linux服务上已经有了打好的jar包，下面介绍几种常用的部署方式：</p>
<p><strong>1、java -jar启动方式。</strong></p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">java -jar *.jar<br>复制代码<br></code></pre></td></tr></table></figure>
<p>此中方式只会运行在当前窗口，当关闭窗口或断开连接，jar程序就会结束。</p>
<p></p>
<p><strong>2、nohup启动方式。（推荐）</strong></p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"># nohup: 不挂断的运行命令<br># &：后台运行<br># >: 日志重定向输出到<br>nohup java -jar *.jar >jarLog.txt &<br>复制代码<br></code></pre></td></tr></table></figure>
<p><strong>3、注册为Linux服务（推荐）</strong></p>
<ul>
<li>首先需要现修改pom中spring-boot-maven-plugin配置，其实spring boot 打成jar包以后，是可以直接像shell脚本一样直接运行的，要实现这样可以直接运行，pom.xml 的build节点需要增加这样的配置：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"><br></code></pre></td></tr></table></figure>
<p>作者：BothEyes1993<br>链接：<a href="https://juejin.cn/post/6844904052153647111">https://juejin.cn/post/6844904052153647111</a><br>来源：掘金<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
<h2 id="问题："><a href="#问题：" class="headerlink" title="问题："></a>问题：</h2><p>I am trying to run java command in linux server when I tried to run java I got some error-</p>
<blockquote>
<p>Error occurred during initialization of VM</p>
<p>Could not reserve enough space for object heap</p>
<p>Could not create the Java virtual machine.</p>
</blockquote>
<p>memory space is -</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">free -m<br></code></pre></td></tr></table></figure>
<p>Increase the amount of system resources in /etc/security/limits.conf, and then issue the “ulimit” command to check that the new resource limit has been changed to “unlimited”.</p>
]]></content>
<tags>
<tag>服务器</tag>
</tags>
</entry>
<entry>
<title></title>
<url>/hexo-blog/2021/01/09/nvm%20%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E5%A4%A7%E5%85%A8/</url>
<content><![CDATA[<p>nvm</p>
<p>What:</p>
<p><code>nvm</code> as a mechanism for managing node versions</p>
<p>官方文档： <a href="https://github.com/nvm-sh/nvm">https://github.com/nvm-sh/nvm</a></p>
<p>To switch Node.js from <code>[email protected]</code> to <code>[email protected]</code> i have used following command:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><code class="hljs js">nvm install v8<span class="hljs-number">.9</span><span class="hljs-number">.1</span><br>nvm use v8<span class="hljs-number">.9</span><span class="hljs-number">.1</span><br></code></pre></td></tr></table></figure>
<p>Problems:</p>
<p>-bash: nvm: command not found</p>
<ol>
<li>Before installing <code>nvm</code>, run this in terminal: <code>touch ~/.bash_profile</code></li>
<li>After, run this in terminal:<br><code>curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash</code></li>
<li><strong>Important…</strong> - DO NOT forget to <em>Restart</em> your terminal <strong>OR</strong> use command <strong><code>source ~/.nvm/nvm.sh</code></strong> (this will refresh the available commands in your system path).</li>
<li>In the terminal, use command <code>nvm --version</code> and you should see the version</li>
</ol>
<p>nvm ls 出错</p>
<p>在终端输入：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">export NVM_DIR="$HOME/.nvm"<br>[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm<br></code></pre></td></tr></table></figure>
<p>Q：不识别es6 中的 … 语法</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"># 代码举例<br>const opts = {<br><br> binary: typeof data !== 'string',<br><br> mask: !this._isServer,<br><br> compress: true,<br><br> fin: true,<br><br> ...options<br><br> };<br></code></pre></td></tr></table></figure>
<p>A：安装 babel 转换插件</p>
<p>babel-transform-object-rest-spread</p>
<p> npm install –save-dev babel-cli babel-preset-es2015 babel-preset-es2017</p>
<figure class="highlight js"><table><tr><td class="code"><pre><code class="hljs js">npm install babel-preset-stage-<span class="hljs-number">0</span> --save-dev<br></code></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext">npm install @babel/core @babel/register @babel/preset-env --save-dev<br></code></pre></td></tr></table></figure>
<p>资源：</p>
<p><a href="https://stackoverflow.com/questions/16904658/node-version-manager-install-nvm-command-not-found">https://stackoverflow.com/questions/16904658/node-version-manager-install-nvm-command-not-found</a></p>
<p><a href="https://www.cnblogs.com/kengsan/p/6399858.html">https://www.cnblogs.com/kengsan/p/6399858.html</a></p>
<p><a href="https://segmentfault.com/q/1010000012941070">https://segmentfault.com/q/1010000012941070</a></p>
]]></content>
</entry>
<entry>
<title>【手把手教学】用前端 react 来做一个机器人🤖️网站</title>
<url>/hexo-blog/2021/12/13/react%20%20%E5%BB%BA%E9%80%A0%E6%9C%BA%E5%99%A8%E4%BA%BA%F0%9F%A4%96%EF%B8%8F%E7%BD%91%E7%AB%99/</url>
<content><"></a></h1><h3 id="装好了之后的界面是这样的-Happy-hacking"><a href="#装好了之后的界面是这样的-Happy-hacking" class="headerlink" title="装好了之后的界面是这样的 Happy hacking~"></a>装好了之后的界面是这样的 Happy hacking~</h3><p></p>
<h3 id="在终端：进入到刚刚装好的-robofriend-文件夹，可以看到相关依赖都装好啦～～"><a href="#在终端：进入到刚刚装好的-robofriend-文件夹，可以看到相关依赖都装好啦～～" class="headerlink" title="在终端：进入到刚刚装好的 robofriend 文件夹，可以看到相关依赖都装好啦～～"></a>在终端：进入到刚刚装好的 robofriend 文件夹，可以看到相关依赖都装好啦～～</h3><h2 id="启动"><a href="#启动" class="headerlink" title="启动"></a>启动</h2><p>桌面上用你喜欢的idea打开整个文件夹，我用的是vscode（打开vscode直接拖动文件夹进去就好了）。</p>
<p>打开pakeage.json ， </p>
<p>看到 ”start“ 对应的就是“ react-scripts start” 启动脚本。</p>
<p>所以 ， 在终端运行 npm start 就能启动整个项目啦。</p>
<p></p>
<p>如果自动跳转到 localhost:3000 （见下图）</p>
<p>就是启动成功啦～</p>
<p></p>
<h2 id="项目结构初探"><a href="#项目结构初探" class="headerlink" title="项目结构初探"></a>项目结构初探</h2><p>来继续通过idea来看这个最初始的项目文件夹，</p>
<p>node_modules是自动帮我们下好的包，先不用去关心它。</p>
<p>public 里面有index.html，</p>
<p>src （source）文件夹就是一切 “魔法” 发生的地方啦，</p>
<p>我们会把最重要的js 还有 css 文件等放在这个文件夹里。</p>
<p><em>打开里面的 index.js。</em></p>
<p><em>ReactDom 这行代码 渲染了组件或者任何你写的东东到你指定的Dom上。</em></p>
<p><em>在这里我们渲染的是id为root的dom，可以去index.html里看，这是我们主体部分唯一的dom节点。</em></p>
<p><em></em></p>
<h2 id="写模块"><a href="#写模块" class="headerlink" title="写模块"></a>写模块</h2><h4 id="Demo-–-先做个小测试-～"><a href="#Demo-–-先做个小测试-～" class="headerlink" title="Demo – 先做个小测试 ～"></a>Demo – 先做个小测试 ～</h4><p><strong>这里先介绍个好玩的机器人api</strong></p>
<p>Robohash <a href="https://robohash.org/">https://robohash.org/</a></p>
<p>在这个网站 url 中，输入任意字符，就能帮你随机生成一个小机器人，这个想法是不是超级可爱呢！！！</p>
<p>好啦， 我们的网站就要利用到这个功能，来生成我们自己的机器人小卡片。</p>
<p>首先，在 src 文件夹里新建 Card.js 文件, 把这个网站随机生成的图片 url 放到代码里。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Card</span>(<span class="hljs-params"></span>) </span>{<br> <span class="hljs-keyword">return</span> (<br> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"Card"</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Hello, I am a Robot<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://robohash.org/irina"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"robots"</span> /></span> </span><br><span class="xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br> );<br>}<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Card;<br></code></pre></td></tr></table></figure>
<p>在 index.js 中，导入 Robot.js, 并且把 <App /> 替换为 <Card /></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 新增以及替换的代码</span><br><span class="hljs-keyword">import</span> Card <span class="hljs-keyword">from</span> <span class="hljs-string">'./Card'</span>;<br><br>ReactDOM.render(<br> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">React.StrictMode</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">Card</span> /></span></span><br><span class="xml"> <span class="hljs-tag"></<span class="hljs-name">React.StrictMode</span>></span></span>,<br> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>)<br>);<br><br></code></pre></td></tr></table></figure>
<p>刷新下我们的本地页面，哈哈 机器人就出现和你打招呼啦🙋。</p>
<p>测试成功～</p>
<p></p>
<h4 id="机器人卡片制作"><a href="#机器人卡片制作" class="headerlink" title="机器人卡片制作"></a>机器人卡片制作</h4><p>1 首先，可以在 Card.js 中美化下卡片的 css 样式。 </p>
<p>先安装一个 依赖包</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">npm install tachyons<br></code></pre></td></tr></table></figure>
<p>在 Card.js 中通过 className 调用它的样式～ </p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-string">"tachyons"</span><br><div className=<span class="hljs-string">"bg-light-green dib br3 pa3 na2 grow bw2 shadow-5"</span>> <br></code></pre></td></tr></table></figure>
<p>2 然后做很多卡片：</p>
<p>因为 <Card /> 就是一个 component 了， 所以可以不断复用它。</p>
<p>直接复制就好了。</p>
<p>3 但是所有卡片里面的机器人名字和图像都是一模一样的， 我想让里面的信息是不一样的。</p>
<p>于是制作机器人对象：</p>
<p>用一个常量 robot 来存所有的机器人的信息。</p>
<p></p>
<p>在 index.js 中依次取出他们的信息 当作参数。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> {robots} <span class="hljs-keyword">from</span> <span class="hljs-string">'./robots'</span>;<br>ReactDOM.render(<br> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">React.StrictMode</span>></span></span><br><span class="xml"> {/* <span class="hljs-tag"><<span class="hljs-name">App</span> /></span> */}</span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">Card</span> <span class="hljs-attr">id</span> = <span class="hljs-string">{robots[0].id}</span> <span class="hljs-attr">name</span>=<span class="hljs-string">{robots[0].name}</span> <span class="hljs-attr">email</span> =<span class="hljs-string">{robots[0].email}/</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">Card</span> <span class="hljs-attr">id</span> = <span class="hljs-string">{robots[1].id}</span> <span class="hljs-attr">name</span>=<span class="hljs-string">{robots[1].name}</span> <span class="hljs-attr">email</span> =<span class="hljs-string">{robots[1].email}/</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">Card</span> <span class="hljs-attr">id</span> = <span class="hljs-string">{robots[2].id}</span> <span class="hljs-attr">name</span>=<span class="hljs-string">{robots[2].name}</span> <span class="hljs-attr">email</span> =<span class="hljs-string">{robots[2].email}/</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">Card</span> <span class="hljs-attr">id</span> = <span class="hljs-string">{robots[3].id}</span> <span class="hljs-attr">name</span>=<span class="hljs-string">{robots[3].name}</span> <span class="hljs-attr">email</span> =<span class="hljs-string">{robots[3].email}/</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">Card</span> <span class="hljs-attr">id</span> = <span class="hljs-string">{robots[4].id}</span> <span class="hljs-attr">name</span>=<span class="hljs-string">{robots[4].name}</span> <span class="hljs-attr">email</span> =<span class="hljs-string">{robots[4].email}/</span>></span></span><br><span class="xml"> <span class="hljs-tag"></<span class="hljs-name">React.StrictMode</span>></span></span>,<br> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>)<br>);<br></code></pre></td></tr></table></figure>
<p>在 Card.js 中传入指定好的参数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Card</span>(<span class="hljs-params">props</span>) </span>{<br> <span class="hljs-keyword">return</span> (<br> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"bg-light-green"</span>></span> </span><br><span class="xml"> {/* dib br3 pa3 na2 grow bw2 shadow-5*/}</span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://robohash.org/irina?200*200"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"robots"</span> /></span> </span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">div</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>{props.name}<span class="hljs-tag"></<span class="hljs-name">h2</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>{props.email}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br> );<br>}<br></code></pre></td></tr></table></figure>
<p>哈哈，别忘了把它们的样子也改一下。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><img src={<span class="hljs-string">`https://robohash.org/<span class="hljs-subst">${props.id}</span>?200x200`</span>} alt=<span class="hljs-string">"robots"</span> /> <br></code></pre></td></tr></table></figure>
<p>tips: 1. ⚠️注意这里要把引号改为 ` 哦！！！</p>
<p> 2. 所有的 js expression， 比如 props.name， 都要加大括号。</p>
<ul>
<li><p>Js experssion</p>
</li>
<li><p>```javascript<br>const cardsArray = robots.map( </p>
<pre><code> (uesr, i) =>
{return <Card key={i} id = {robots[i].id} name={robots[i].name} email ={robots[i].email}/>
})
</code></pre>
<p>// cardsArray, i 都是 Js experssion 要加大括号。<br>// 换句话说， 要想在 react 里面写 js 只要加上大括号就行了。 </p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs plaintext"><br> <br><br> 酱酱！完成后就是下面👇这个样子，是不是还蛮酷的内～<br><br> 至此，我们的机器人小网站的雏形就有啦。<br><br> <br><br><br><br>#### 实现搜索功能<br><br>*动态可变的State --> props*<br><br>*模块长这样：*<br><br>*app*<br><br>*cardList. searchBox*<br><br>*Card*<br><br><br><br>##### 思路：<br><br>要让 searchBox 和 cardList 能通过父节点互动。<br><br>可以通过 React 中的 State 来实现：<br><br>State 的动态可以被当作props 传送到 searchBox 和 cardList 中。<br><br>这里可以设置 2 个state，一个是搜索关键词，起名为searchfield， 一个是被搜到的 robots，起名为 robots 。<br><br> <br><br>##### 实现：<br><br>searchBox 传一个参数 searchChange<br><br></code></pre></td></tr></table></figure>
<p>function SearchBox(searchChange) {<br> return (</p>
<div className="pa2">
<input
className = "pa3 ba b--green bg-lightest-blue"