-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlocal-search.xml
1340 lines (644 loc) · 750 KB
/
local-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>React中比较轻量化的状态管理</title>
<link href="/2023/03/06/React%E4%B8%AD%E6%AF%94%E8%BE%83%E8%BD%BB%E9%87%8F%E5%8C%96%E7%9A%84%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/"/>
<url>/2023/03/06/React%E4%B8%AD%E6%AF%94%E8%BE%83%E8%BD%BB%E9%87%8F%E5%8C%96%E7%9A%84%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/</url>
<content type="html"><![CDATA[<ul><li>组件间的状态共享只能通过将state提升到公共父级解决,层级太多组件树会很复杂,每一次更新都会重新渲染整个组件</li><li>context只能存储单一值,无法将状态分散,可能需要多个context</li></ul><span id="more"></span><blockquote><p><a href="https://recoiljs.org/zh-hans/docs/introduction/installation">Recoil</a></p></blockquote><ul><li>定义一个atom</li></ul><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><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs jsx"><span class="hljs-keyword">import</span> {atom} <span class="hljs-keyword">from</span> <span class="hljs-string">"recoil"</span>;<br><br><span class="hljs-comment">// 定义一个atom</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> userState = <span class="hljs-title function_">atom</span>({<br> <span class="hljs-attr">key</span>: <span class="hljs-string">'userState'</span>, <span class="hljs-comment">// 全局唯一</span><br> <span class="hljs-attr">default</span>: {<br> <span class="hljs-attr">name</span>: <span class="hljs-string">'drew'</span>,<br> <span class="hljs-attr">age</span>: <span class="hljs-number">12</span><br> }<br>})<br></code></pre></td></tr></table></figure><ul><li>将RecoilRoot组件放置在需要使用atom的父组件</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">Index</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br><br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">RecoilRoot</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">ProCard</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Recoil状态管理"</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">ChildState</span> /></span> </span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Divider</span> /></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Another</span> /></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">ProCard</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">RecoilRoot</span>></span></span><br> );<br>};<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Index</span>;<br></code></pre></td></tr></table></figure><ul><li>useRecoilState状态更新</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;<br><span class="hljs-keyword">import</span> {useRecoilState} <span class="hljs-keyword">from</span> <span class="hljs-string">"recoil"</span>;<br><span class="hljs-keyword">import</span> {<span class="hljs-title class_">InputNumber</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">"antd"</span>;<br><span class="hljs-comment">// 引入定义的atom</span><br><span class="hljs-keyword">import</span> {userState} <span class="hljs-keyword">from</span> <span class="hljs-string">"@/pages/user/RecoilState/State"</span>;<br><br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">ChildState</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br><br> <span class="hljs-comment">// useRecoilState的使用方法和useState Hooks类似</span><br> <span class="hljs-keyword">const</span> [user, setUser] = <span class="hljs-title function_">useRecoilState</span>(userState);<br><br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">InputNumber</span> <span class="hljs-attr">width</span>=<span class="hljs-string">{200}</span> <span class="hljs-attr">defaultValue</span>=<span class="hljs-string">{user.age}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(value</span> =></span> setUser({...user, age: value || 18}))}/></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>用户状态:姓名:{user.name} 年龄:{user.age}<span class="hljs-tag"></<span class="hljs-name">h5</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">ChildState</span>;<br></code></pre></td></tr></table></figure><ul><li>useRecoilValue获取值</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">Another</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br><br> <span class="hljs-keyword">const</span> user = <span class="hljs-title function_">useRecoilValue</span>(userState);<br><br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>在其他组件中获取: 姓名:{user.name} 年龄:{user.age} <span class="hljs-tag"></<span class="hljs-name">h3</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> )<br>};<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Another</span>;<br></code></pre></td></tr></table></figure><blockquote><p><a href="https://v3.umijs.org/zh-CN/plugins/plugin-model#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8-model">@umijs/plugin-model</a> 一种基于hooks范式的简易数据管理方案</p></blockquote><p><strong>src/models目录下有 hooks model 时启用</strong>,文件名对应最终model的name</p><ul><li>定义model 路径必须为src/models/useTypeModel.ts</li></ul><figure class="highlight ts"><table><tr><td class="gutter"><pre><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><code class="hljs ts"><span class="hljs-keyword">import</span> {useCallback, useState} <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;<br><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">useTypeModel</span> = (<span class="hljs-params"></span>) => {<br> <span class="hljs-comment">// 定义状态</span><br> <span class="hljs-keyword">const</span> [userType, setUserType] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">"app"</span>);<br> <span class="hljs-comment">// 定义状态改变的方法</span><br> <span class="hljs-keyword">const</span> changeUserType = <span class="hljs-title function_">useCallback</span>(<span class="hljs-function">(<span class="hljs-params">val: <span class="hljs-built_in">string</span></span>) =></span> {<br> <span class="hljs-title function_">setUserType</span>(val);<br> }, [userType]);<br><br> <span class="hljs-comment">// 返回需要外部引用的状态、方法</span><br> <span class="hljs-keyword">return</span> {<br> userType,<br> changeUserType<br> }<br>};<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> useTypeModel;<br></code></pre></td></tr></table></figure><ul><li>使用</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ProCard</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"@ant-design/pro-card"</span>;<br><span class="hljs-keyword">import</span> {<span class="hljs-title class_">Input</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">"antd"</span>;<br><span class="hljs-keyword">import</span> {useModel} <span class="hljs-keyword">from</span> <span class="hljs-string">"@@/plugin-model/useModel"</span>;<br><br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">Index</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br><br> <span class="hljs-comment">// useModel("model文件名")</span><br> <span class="hljs-keyword">const</span> {userType, changeUserType} = <span class="hljs-title function_">useModel</span>(<span class="hljs-string">"useTypeModel"</span>);<br><br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">ProCard</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"umijs/plugin-model"</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Input</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{userType}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{event</span> =></span> changeUserType(event.target.value)}/></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>登录用户类型:{userType}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">ProCard</span>></span></span><br> )<br>};<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Index</span>;<br></code></pre></td></tr></table></figure><blockquote><p><a href="https://hox.js.org/zh/guide/quick-start">Hox</a></p></blockquote><ul><li>定义一个store</li></ul><figure class="highlight ts"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">import</span> {createStore} <span class="hljs-keyword">from</span> <span class="hljs-string">"hox"</span>;<br><span class="hljs-keyword">import</span> {useState} <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;<br><br><br><span class="hljs-comment">// createStore 会返回一个数组, 第一个参数store标识,第二个参数是引用节点名 </span><br><span class="hljs-comment">// 两个参数名称可以自定义</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> [useInfoStore, <span class="hljs-title class_">InfoStoreProvider</span>] = <span class="hljs-title function_">createStore</span>(<span class="hljs-function">() =></span> {<br><br> <span class="hljs-comment">// 状态</span><br> <span class="hljs-keyword">const</span> [users, setUsers] = useState<<span class="hljs-built_in">string</span>[]>([]);<br><br> <span class="hljs-comment">// 方法</span><br> <span class="hljs-keyword">const</span> <span class="hljs-title function_">addUser</span> = (<span class="hljs-params">user: <span class="hljs-built_in">string</span></span>) => {<br> <span class="hljs-title function_">setUsers</span>(<span class="hljs-function"><span class="hljs-params">u</span> =></span> [...u, user]);<br> }<br><br> <span class="hljs-keyword">const</span> <span class="hljs-title function_">delUser</span> = (<span class="hljs-params">user: <span class="hljs-built_in">string</span></span>) => {<br> <span class="hljs-title function_">setUsers</span>(<span class="hljs-function"><span class="hljs-params">v</span> =></span> v.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">t</span> =></span> t !== user));<br> };<br><br> <span class="hljs-keyword">return</span> {<br> users,<br> addUser,<br> delUser<br> }<br>});<br></code></pre></td></tr></table></figure><ul><li>在需要引用的父节点加入InfoStoreProvider(自定义名称)节点</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">Index</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br><br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">ProCard</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"hox状态管理"</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">InfoStoreProvider</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">ChildInfo</span> /></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">InfoStoreProvider</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">ProCard</span>></span></span><br> )<br>};<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Index</span>;<br></code></pre></td></tr></table></figure><ul><li>在子节点中使用</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, {useState} <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;<br><span class="hljs-keyword">import</span> {useInfoStore} <span class="hljs-keyword">from</span> <span class="hljs-string">"@/pages/user/HoxState/userStore"</span>;<br><span class="hljs-keyword">import</span> {<span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Col</span>, <span class="hljs-title class_">Divider</span>, <span class="hljs-title class_">Input</span>, message, <span class="hljs-title class_">Row</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">"antd"</span>;<br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">ChildInfo</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br><br> <span class="hljs-keyword">const</span> {users, addUser, delUser} = <span class="hljs-title function_">useInfoStore</span>();<br> <span class="hljs-keyword">const</span> [name, setName] = useState<<span class="hljs-built_in">any</span>>(<span class="hljs-string">"Tom"</span>);<br><br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">Row</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{12}</span>></span></span><br><span class="language-xml"> {users.map((val => (</span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Row</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{8}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>{val} <span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{8}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">{</span>"<span class="hljs-attr">primary</span>"} <span class="hljs-attr">danger</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> delUser(val)}>删除<span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Divider</span>/></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Row</span>></span></span><br><span class="language-xml"> )))}</span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{12}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Row</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{8}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Input</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{name}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{event</span> =></span> {</span><br><span class="language-xml"> setName(event.target.value);</span><br><span class="language-xml"> }}/></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{8}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> {</span><br><span class="language-xml"> if (name != null && name.length > 0) {</span><br><span class="language-xml"> addUser(name);</span><br><span class="language-xml"> setName("");</span><br><span class="language-xml"> } else {</span><br><span class="language-xml"> message.error("请输入人名");</span><br><span class="language-xml"> }</span><br><span class="language-xml"> }}>添加<span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Row</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Row</span>></span></span><br> );<br>};<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">ChildInfo</span>;<br></code></pre></td></tr></table></figure><ul><li>全局store</li></ul><p>全局store用createGlobalStore替代createStore创建,只需要在应用最外层包裹HoxRoot就可以使用所有全局store</p><figure class="highlight ts"><table><tr><td class="gutter"><pre><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><code class="hljs ts"><span class="hljs-keyword">import</span> { createGlobalStore } <span class="hljs-keyword">from</span> <span class="hljs-string">'hox'</span><br><br><span class="hljs-comment">// getXxxStore 函数,它的作用是一次性地读取 store 当前最新的值</span><br><span class="hljs-keyword">const</span> [useAccountStore, getAccountStore] = <span class="hljs-title function_">createGlobalStore</span>(<span class="hljs-function">() =></span> {<br> <span class="hljs-comment">// ...</span><br>})<br></code></pre></td></tr></table></figure><figure class="highlight tsx"><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><code class="hljs tsx"><<span class="hljs-title class_">HoxRoot</span>><br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">App</span> /></span></span><br></<span class="hljs-title class_">HoxRoot</span>><br></code></pre></td></tr></table></figure><blockquote><p><a href="https://github.com/umijs/hox/issues/58">Umi useMode和Hox差异</a></p></blockquote><ul><li><p>useModel构建时动态在你的应用根节点之上再创建一个节点,新建useModel有目录位置的限制,启动时全部创建</p></li><li><p>hox是创建跟你应用根节点同级的节点,没有被调用(一般是没有进入相应的路由)就不会创建相应节点</p></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>React</tag>
<tag>Recoli</tag>
<tag>Umi</tag>
<tag>Hox</tag>
</tags>
</entry>
<entry>
<title>秦淮新河秋日午后</title>
<link href="/2022/11/25/2022-11-24/"/>
<url>/2022/11/25/2022-11-24/</url>
<content type="html"><![CDATA[<p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00730.JPG?e=1677634706&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:2IycwI0vo3I_7KrVwhC3DJtv2e8="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00735.JPG?e=1677634797&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:djbaH8p-2myNL4eDUxoGkSXlaT4="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00744.JPG?e=1677634822&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:F-SwCZA6uERYt_U79f4BCFMh4Hs="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00750.JPG?e=1677634862&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:u5iZF4OH8Knp4ZpOfUlIygfA2C8="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00760.JPG?e=1677634880&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:jT3iciHcRCFRy-VPqFevjn4V_0o="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00761.JPG?e=1677634901&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:NiQAklJKs9vOc-3lFFsbya7IIow="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00763.JPG?e=1677634920&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:2SlppAotsJOYFvp1lZkeMm-0I5s="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00769.JPG?e=1677634937&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:S9jux2wk12RGk7pfEreetJawZNs="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00770.JPG?e=1677634961&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:ge3gI9B_BpLJA_c-esUAZBueiFw="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00771.JPG?e=1677634976&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:SreKNdNVwkc8My8GBwu7kOof9Tc="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00773.JPG?e=1677634993&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:o7KjAmAo5wL-P98tmabKreJOtqA="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00774.JPG?e=1677635013&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:ImXpMvBTsusVyn2Ran1eFJqYu0Q="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00777.JPG?e=1677635031&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:nZrBar-UuX4zVMj6dbG0hxEiTdo="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00780.JPG?e=1677635049&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:aaXKjDhA6ZqYQYWZ0GduYf7BKe8="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00781.JPG?e=1677635065&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:_4b6o0V2W1eaJx3mG7YI8wGMxgY="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00786.JPG?e=1677635081&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:lClwqu7Tpkqwz50O4yfUxqRTUug="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00789.JPG?e=1677635095&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:aDZOAe2P5jJAmdIw6B9XCdtvBAM="></p><hr><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/2022-11-24/DSC00793.JPG?e=1677635108&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:ozEZw3WWQIIL_F3FrqhY32eZU3I="></p>]]></content>
<categories>
<category>生活记录</category>
</categories>
<tags>
<tag>照片</tag>
</tags>
</entry>
<entry>
<title>React基于Ant的上传和下载组件</title>
<link href="/2022/08/13/React%E5%9F%BA%E4%BA%8EAnt%E7%9A%84%E4%B8%8A%E4%BC%A0%E5%92%8C%E4%B8%8B%E8%BD%BD%E7%BB%84%E4%BB%B6/"/>
<url>/2022/08/13/React%E5%9F%BA%E4%BA%8EAnt%E7%9A%84%E4%B8%8A%E4%BC%A0%E5%92%8C%E4%B8%8B%E8%BD%BD%E7%BB%84%E4%BB%B6/</url>
<content type="html"><![CDATA[<h5 id="调用接口完成上传"><a href="#调用接口完成上传" class="headerlink" title="调用接口完成上传"></a>调用接口完成上传</h5><p>项目中一般是将文件交给后端去处理,如果需要更换存储方式一般只需要变动接口。</p><span id="more"></span><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;<br><span class="hljs-keyword">import</span> { <span class="hljs-title class_">UploadOutlined</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ant-design/icons'</span>;<br><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, message, <span class="hljs-title class_">Upload</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;<br><br><span class="hljs-keyword">interface</span> <span class="hljs-title class_">UploadFileParams</span> {<br> <span class="hljs-attr">paramData</span>: {}, <span class="hljs-comment">// 附带参数</span><br> <span class="hljs-attr">url</span>: <span class="hljs-string">'/api/upload/xxx'</span>, <span class="hljs-comment">// 上传接口</span><br> <span class="hljs-attr">value</span>: [], <span class="hljs-comment">// 已上传文件</span><br> <span class="hljs-attr">count</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">// 限制上传数量 0 为不限制数量</span><br> <span class="hljs-attr">accept</span>: <span class="hljs-string">'*'</span>, <span class="hljs-comment">// 过滤文件后缀</span><br>}<br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">UploadFile</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-title class_">UploadFileParams</span>> = <span class="hljs-function">(<span class="hljs-params">props</span>) =></span> {<br> <span class="hljs-comment">// 组件参数</span><br> <span class="hljs-keyword">const</span> { paramData, url, count, accept, value, onChange }: <span class="hljs-built_in">any</span> = props;<br> <span class="hljs-keyword">const</span> [fileName, setFileName] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">''</span>);<br> <span class="hljs-keyword">const</span> [fileList, setFileList] = useState<<span class="hljs-built_in">any</span>[]>(<br> value.<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">v: <span class="hljs-built_in">any</span>, inx: <span class="hljs-built_in">number</span></span>) =></span> ({<br> <span class="hljs-attr">uid</span>: -inx,<br> <span class="hljs-attr">name</span>: v,<br> <span class="hljs-attr">status</span>: <span class="hljs-string">'done'</span>,<br> <span class="hljs-attr">response</span>: <span class="hljs-string">''</span>,<br> <span class="hljs-attr">url</span>: v,<br> })),<br> );<br><br> <span class="hljs-keyword">const</span> <span class="hljs-attr">upProps</span>: <span class="hljs-built_in">any</span> = {<br> <span class="hljs-attr">name</span>: <span class="hljs-string">'file'</span>,<br> accept,<br> <span class="hljs-attr">action</span>: <span class="hljs-string">`<span class="hljs-subst">${域名}</span><span class="hljs-subst">${url}</span>`</span>,<br> <span class="hljs-attr">data</span>: { ...paramData, [<span class="hljs-string">'fileName'</span>]: fileName },<br> fileList,<br> <span class="hljs-attr">withCredentials</span>: <span class="hljs-literal">false</span>,<br> <span class="hljs-attr">beforeUpload</span>: <span class="hljs-function">(<span class="hljs-params">file: <span class="hljs-built_in">any</span></span>) =></span> {<br> <span class="hljs-title function_">setFileName</span>(file.<span class="hljs-property">name</span>);<br> },<br> <span class="hljs-title function_">onChange</span>(<span class="hljs-params">info: <span class="hljs-built_in">any</span></span>) {<br> <span class="hljs-keyword">let</span> <span class="hljs-attr">newFileList</span>: <span class="hljs-built_in">any</span>[] = [...info.<span class="hljs-property">fileList</span>];<br><br> <span class="hljs-keyword">if</span> (count !== <span class="hljs-number">0</span>) {<br> newFileList = newFileList.<span class="hljs-title function_">slice</span>(-count);<br> }<br><br> newFileList = newFileList.<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">file: <span class="hljs-built_in">any</span></span>) =></span> {<br> <span class="hljs-keyword">if</span> (file.<span class="hljs-property">response</span> && file.<span class="hljs-property">response</span>.<span class="hljs-property">Success</span> && file.<span class="hljs-property">response</span>.<span class="hljs-property">Data</span>) {<br> <span class="hljs-keyword">return</span> {<br> <span class="hljs-attr">uid</span>: file.<span class="hljs-property">uid</span>,<br> <span class="hljs-attr">name</span>: file.<span class="hljs-property">name</span>,<br> <span class="hljs-attr">status</span>: <span class="hljs-string">'done'</span>,<br> <span class="hljs-attr">response</span>: <span class="hljs-string">''</span>,<br> <span class="hljs-attr">url</span>: file.<span class="hljs-property">response</span>.<span class="hljs-property">Data</span>.<span class="hljs-property">url</span>,<br> };<br> }<br> <span class="hljs-keyword">return</span> file;<br> });<br><br> <span class="hljs-title function_">setFileList</span>(newFileList);<br><br> <span class="hljs-keyword">if</span> (onChange && (info.<span class="hljs-property">file</span>.<span class="hljs-property">status</span> === <span class="hljs-string">'done'</span> || info.<span class="hljs-property">file</span>.<span class="hljs-property">status</span> === <span class="hljs-string">'removed'</span>)) {<br> <span class="hljs-keyword">if</span> (info.<span class="hljs-property">file</span>.<span class="hljs-property">status</span> === <span class="hljs-string">'done'</span>) {<br> message.<span class="hljs-title function_">success</span>(<span class="hljs-string">'文件上传成功!'</span>);<br> }<br> <span class="hljs-title function_">onChange</span>([...newFileList.<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">s: <span class="hljs-built_in">any</span></span>) =></span> s.<span class="hljs-property">url</span>).<span class="hljs-title function_">filter</span>(<span class="hljs-function">(<span class="hljs-params">s: <span class="hljs-built_in">any</span></span>) =></span> s)]);<br> }<br> },<br> };<br><br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">Upload</span> {<span class="hljs-attr">...upProps</span>}></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">{</span><<span class="hljs-attr">UploadOutlined</span> /></span>}>上传文件<span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Upload</span>></span></span><br> );<br>};<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">UploadFile</span>;<br><br></code></pre></td></tr></table></figure><p>使用</p><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><<span class="hljs-title class_">UploadFile</span> url=<span class="hljs-string">'/backstage/document/upload'</span><br> paramData={{<span class="hljs-attr">xx</span>: xx}}<br> count={<span class="hljs-number">0</span>}<br> /><br></code></pre></td></tr></table></figure><h5 id="文件或者文件流下载"><a href="#文件或者文件流下载" class="headerlink" title="文件或者文件流下载"></a>文件或者文件流下载</h5><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;<br><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, message } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;<br><span class="hljs-keyword">import</span> request <span class="hljs-keyword">from</span> <span class="hljs-string">'@/utils/request'</span>;<br><span class="hljs-keyword">import</span> {<span class="hljs-title class_">CloudDownloadOutlined</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">'@ant-design/icons'</span>;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">IExportButtonProps</span> {<br> fileName?: <span class="hljs-built_in">string</span>; <span class="hljs-comment">// 导出文件名</span><br> buttonName?: <span class="hljs-built_in">string</span>; <span class="hljs-comment">// button名称</span><br> buttonType?: <span class="hljs-built_in">any</span>; <span class="hljs-comment">// button 类型</span><br> params?: <span class="hljs-built_in">any</span>; <span class="hljs-comment">// 参数</span><br> <span class="hljs-attr">URL</span>: <span class="hljs-built_in">string</span>; <span class="hljs-comment">// 下载接口</span><br> callback?: <span class="hljs-built_in">any</span>; <span class="hljs-comment">// 导出结束回调函数</span><br> disabled?: <span class="hljs-built_in">boolean</span>; <span class="hljs-comment">// 是否禁用导出button</span><br> buttonIcon?: <span class="hljs-built_in">boolean</span>; <span class="hljs-comment">// 是否自定义icon</span><br> icon?: <span class="hljs-built_in">any</span>; <span class="hljs-comment">// 自定义icon</span><br> size?: <span class="hljs-built_in">any</span>; <span class="hljs-comment">// button 大小</span><br>}<br><br><span class="hljs-keyword">interface</span> S {<br> <span class="hljs-attr">loading</span>: <span class="hljs-built_in">boolean</span>;<br>}<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ExportFileButton</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span><<span class="hljs-title class_">IExportButtonProps</span>, S> {<br><br> <span class="hljs-keyword">static</span> defaultProps = {<br> <span class="hljs-attr">buttonName</span>: <span class="hljs-string">'导出'</span>,<br> <span class="hljs-attr">buttonType</span>: <span class="hljs-string">'link'</span>,<br> <span class="hljs-attr">buttonIcon</span>: <span class="hljs-literal">true</span>,<br> <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span>,<br> <span class="hljs-attr">icon</span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">CloudDownloadOutlined</span>/></span></span>,<br> <span class="hljs-attr">size</span>: <span class="hljs-string">'default'</span><br> };<br><br> <span class="hljs-title function_">constructor</span>(<span class="hljs-params">props: IExportButtonProps</span>) {<br> <span class="hljs-variable language_">super</span>(props);<br><br> <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span> = {<br> <span class="hljs-attr">loading</span>: <span class="hljs-literal">false</span>,<br> };<br> }<br><br> exportFile = <span class="hljs-function">() =></span> {<br> <span class="hljs-keyword">const</span> {fileName, params, <span class="hljs-variable constant_">URL</span>, callback} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>;<br> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({ <span class="hljs-attr">loading</span>: <span class="hljs-literal">true</span> });<br> request<br> .<span class="hljs-title function_">post</span>(<span class="hljs-variable constant_">URL</span>, {<br> <span class="hljs-attr">data</span>: params,<br> <span class="hljs-attr">responseType</span>: <span class="hljs-string">'arrayBuffer'</span>,<br> <span class="hljs-attr">getResponse</span>: <span class="hljs-literal">true</span>,<br> })<br> .<span class="hljs-title function_">then</span>(<br> <span class="hljs-function">(<span class="hljs-params">{ data, response }</span>) =></span> {<br> <span class="hljs-keyword">const</span> <span class="hljs-keyword">type</span> = response.<span class="hljs-property">headers</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'Content-Type'</span>);<br> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">type</span> === <span class="hljs-string">'application/json;charset=UTF-8'</span>) {<br> response<br> .<span class="hljs-title function_">clone</span>()<br> .<span class="hljs-title function_">json</span>()<br> .<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">r</span>) =></span> {<br> <span class="hljs-keyword">if</span> (r.<span class="hljs-property">code</span> !== <span class="hljs-number">10000</span> && r.<span class="hljs-property">msg</span>) {<br> message.<span class="hljs-title function_">error</span>(r.<span class="hljs-property">msg</span>);<br> } <span class="hljs-keyword">else</span> message.<span class="hljs-title function_">error</span>(<span class="hljs-string">'导出错误!'</span>);<br> });<br> } <span class="hljs-keyword">else</span> {<br> <span class="hljs-keyword">const</span> blob = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Blob</span>([data], { <span class="hljs-attr">type</span>: <span class="hljs-keyword">type</span> === <span class="hljs-literal">null</span> ? <span class="hljs-literal">undefined</span> : <span class="hljs-keyword">type</span> });<br> <span class="hljs-keyword">const</span> href = <span class="hljs-variable language_">window</span>.<span class="hljs-property">URL</span>.<span class="hljs-title function_">createObjectURL</span>(blob);<br> <span class="hljs-keyword">if</span> (fileName) {<br> <span class="hljs-keyword">const</span> downloadElement = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'a'</span>);<br> downloadElement.<span class="hljs-property">href</span> = href;<br> downloadElement.<span class="hljs-property">download</span> = <span class="hljs-string">`<span class="hljs-subst">${fileName}</span>`</span>;<br> <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">appendChild</span>(downloadElement);<br> downloadElement.<span class="hljs-title function_">click</span>();<br> <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">removeChild</span>(downloadElement);<br> <span class="hljs-variable language_">window</span>.<span class="hljs-property">URL</span>.<span class="hljs-title function_">revokeObjectURL</span>(href);<br> } <span class="hljs-keyword">else</span> {<br> <span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">href</span> = href;<br> }<br> <span class="hljs-keyword">if</span> (callback) <span class="hljs-title function_">callback</span>();<br> }<br> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({ <span class="hljs-attr">loading</span>: <span class="hljs-literal">false</span> });<br> },<br> <span class="hljs-function">() =></span> {<br> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({ <span class="hljs-attr">loading</span>: <span class="hljs-literal">false</span> });<br> },<br> );<br> };<br><br> <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>) {<br> <span class="hljs-keyword">const</span> {buttonType, buttonName, buttonIcon, disabled, icon, size} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>;<br> <span class="hljs-keyword">const</span> { loading } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>;<br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">Button</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">loading</span>=<span class="hljs-string">{loading}</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">type</span>=<span class="hljs-string">{buttonType}</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">disabled</span>=<span class="hljs-string">{disabled}</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">size</span>=<span class="hljs-string">{size}</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">icon</span>=<span class="hljs-string">{buttonIcon</span> ? <span class="hljs-attr">icon</span> <span class="hljs-attr">:</span> <span class="hljs-attr">false</span>}</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.exportFile}</span></span></span><br><span class="hljs-tag"><span class="language-xml"> ></span></span><br><span class="language-xml"> {buttonName}</span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br> );<br> }<br>}<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">ExportFileButton</span>;<br><br></code></pre></td></tr></table></figure><p>使用</p><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><<span class="hljs-title class_">ExportFileButton</span><br> buttonName=<span class="hljs-string">"下载模板"</span><br> fileName=<span class="hljs-string">"模板.xlsx"</span><br> <span class="hljs-variable constant_">URL</span>=<span class="hljs-string">"/api/upload-template"</span><br> buttonType=<span class="hljs-string">"default"</span><br> callback={<span class="hljs-function">() =></span> {<br> message.<span class="hljs-title function_">success</span>(<span class="hljs-string">'下载成功'</span>);<br> }}<br>/><br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>JS</tag>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>JS实用技巧</title>
<link href="/2022/06/28/JS%E5%AE%9E%E7%94%A8%E6%8A%80%E5%B7%A7/"/>
<url>/2022/06/28/JS%E5%AE%9E%E7%94%A8%E6%8A%80%E5%B7%A7/</url>
<content type="html"><![CDATA[<ul><li><p>二维状态匹配</p><span id="more"></span> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">Tag</span>></span>{['未开始', '进行中', '已完成'][detail.projectStatus]}<span class="hljs-tag"></<span class="hljs-name">Tag</span>></span><br></code></pre></td></tr></table></figure></li><li><p>数组去重</p></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><code class="hljs js"><span class="hljs-keyword">const</span> arr = [<span class="hljs-number">2</span>, <span class="hljs-number">2</span>, <span class="hljs-string">'abc'</span>, <span class="hljs-string">'abc'</span>, <span class="hljs-literal">true</span>,<span class="hljs-literal">undefined</span>, <span class="hljs-title class_">NaN</span>,<span class="hljs-title class_">NaN</span>]<br><br><span class="hljs-keyword">const</span> result = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>(arr))<br><span class="hljs-comment">// 简化写法</span><br><span class="hljs-keyword">const</span> result = [...<span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>[arr]]<br></code></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></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>]<br><span class="hljs-keyword">const</span> last = arr.<span class="hljs-title function_">at</span>(-<span class="hljs-number">1</span>)<br></code></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><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><code class="hljs js"><span class="hljs-comment">// 数组转对象</span><br><span class="hljs-comment">//// 展开运算符</span><br><span class="hljs-keyword">const</span> arr = [<span class="hljs-string">'a'</span>,<span class="hljs-string">'b'</span>,<span class="hljs-string">'c'</span>]<br><span class="hljs-keyword">const</span> obj = {...arr} <span class="hljs-comment">// {0: 'a',1: 'b',2: 'c'}</span><br><span class="hljs-comment">//// object.assign(target,...sources)</span><br><span class="hljs-keyword">const</span> obj = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>({}, arr) <span class="hljs-comment">// {0: 'a',1: 'b',2: 'c'}</span><br><span class="hljs-comment">//// forEach</span><br>arr.<span class="hljs-title function_">foreach</span>(<span class="hljs-function">(<span class="hljs-params">item,index</span>) =></span> {<br> obj[index] = item<br>})<br><span class="hljs-comment">//// 键值对转对象</span><br><span class="hljs-keyword">const</span> arr = [[<span class="hljs-string">'1'</span>,a],[<span class="hljs-string">'2'</span>,b]]<br><span class="hljs-keyword">const</span> obj = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">formEntries</span>(arr) <span class="hljs-comment">// {1: a, 2: b}</span><br><br><span class="hljs-comment">// 对象转数组</span><br><span class="hljs-comment">//// 键值对转数组</span><br><span class="hljs-keyword">const</span> obj = {<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>,<span class="hljs-attr">b</span>: <span class="hljs-number">2</span>,<span class="hljs-attr">c</span>: <span class="hljs-number">3</span>}<br><span class="hljs-keyword">const</span> arr = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">entries</span>(obj) <span class="hljs-comment">// [['a': 1,'b': 2,'c': 3]]</span><br><br></code></pre></td></tr></table></figure><ul><li>js深拷贝</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></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> a = {<br> <span class="hljs-attr">age</span>: <span class="hljs-number">1</span>,<br> <span class="hljs-attr">jobs</span>: {<br> <span class="hljs-attr">first</span>: <span class="hljs-string">'FE'</span><br> }<br>}<br><span class="hljs-keyword">let</span> b = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(<span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(a))<br>a.<span class="hljs-property">jobs</span>.<span class="hljs-property">first</span> = <span class="hljs-string">'native'</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(b.<span class="hljs-property">jobs</span>.<span class="hljs-property">first</span>) <span class="hljs-comment">// FE</span><br></code></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><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> a = <span class="hljs-number">1</span>;<br><span class="hljs-keyword">let</span> b = <span class="hljs-number">2</span>;<br>[a, b] = [b, a]<br><br><span class="hljs-keyword">const</span> arr = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'c'</span>]<br>arr[<span class="hljs-number">0</span>], arr[<span class="hljs-number">2</span>] = arr[<span class="hljs-number">2</span>], arr[<span class="hljs-number">0</span>]<br></code></pre></td></tr></table></figure><ul><li>排序函数 sort()</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><code class="hljs js"><span class="hljs-comment">// 通过回调函数的返回值定义排序规则</span><br>arr.<span class="hljs-title function_">sort</span>(<span class="hljs-function">(<span class="hljs-params">a,b</span>) =></span> a-b) <span class="hljs-comment">//数字升序</span><br>arr.<span class="hljs-title function_">sort</span>(<span class="hljs-function">(<span class="hljs-params">a,b</span>) =></span> a.<span class="hljs-title function_">localeCompare</span>(b)) <span class="hljs-comment">//字母升序</span><br><br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>JS</tag>
</tags>
</entry>
<entry>
<title>React实现土层分层效果</title>
<link href="/2022/06/22/React%E5%AE%9E%E7%8E%B0%E5%9C%9F%E5%B1%82%E5%88%86%E5%B1%82%E6%95%88%E6%9E%9C/"/>
<url>/2022/06/22/React%E5%AE%9E%E7%8E%B0%E5%9C%9F%E5%B1%82%E5%88%86%E5%B1%82%E6%95%88%E6%9E%9C/</url>
<content type="html"><![CDATA[<blockquote><p>场景:深度确定的一段土层,需要对土层按岩土类别进行拆分,可以手动拖动调节,需要有刻度展示。</p></blockquote><span id="more"></span><p>第三方面板分割组件: <a href="https://uiwjs.github.io/react-split/">React Split</a></p><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/blog%E5%9B%BE%E7%89%87/splitSoil.png?e=1677656690&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:fMqttU5YQ5w_i7nor7QJcLs3Hp8="></p><ul><li>确定面板的高度,定义1px高度代表实际的深度为多少,面板和刻度尺要保持一致</li><li>面板分割总高度知道,拖动事件结束时计算各个面板所占高度</li><li>计算时要特别注意小数位</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">SplitArea</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">() =></span> {<br><br> <span class="hljs-comment">// 初始化数据,百分比一般由后端计算后给到前端</span><br> <span class="hljs-keyword">const</span> [soilArr, setSoilArr] = useState<<span class="hljs-built_in">any</span>>([<br> {<br> <span class="hljs-attr">no</span>: <span class="hljs-number">0</span>,<br> <span class="hljs-attr">percent</span>: <span class="hljs-number">15</span>,<br> <span class="hljs-attr">soilName</span>: <span class="hljs-string">'黏性土'</span>,<br> <span class="hljs-attr">topDepth</span>: <span class="hljs-string">"0"</span>,<br> <span class="hljs-attr">endDepth</span>: <span class="hljs-string">"1.5"</span>,<br> <span class="hljs-attr">color</span>: <span class="hljs-string">'#87CEFA'</span><br> },<br> {<br> <span class="hljs-attr">no</span>: <span class="hljs-number">1</span>,<br> <span class="hljs-attr">percent</span>: <span class="hljs-number">25</span>,<br> <span class="hljs-attr">soilName</span>: <span class="hljs-string">'粉土'</span>,<br> <span class="hljs-attr">topDepth</span>: <span class="hljs-string">"1.5"</span>,<br> <span class="hljs-attr">endDepth</span>: <span class="hljs-string">"4.0"</span>,<br> <span class="hljs-attr">color</span>: <span class="hljs-string">'#FFB6C1'</span><br> },<br> {<br> <span class="hljs-attr">no</span>: <span class="hljs-number">2</span>,<br> <span class="hljs-attr">percent</span>: <span class="hljs-number">20</span>,<br> <span class="hljs-attr">soilName</span>: <span class="hljs-string">'黄土'</span>,<br> <span class="hljs-attr">topDepth</span>: <span class="hljs-string">"4.0"</span>,<br> <span class="hljs-attr">endDepth</span>: <span class="hljs-string">"6.0"</span>,<br> <span class="hljs-attr">color</span>: <span class="hljs-string">'#DAA520'</span><br> },<br> {<br> <span class="hljs-attr">no</span>: <span class="hljs-number">3</span>,<br> <span class="hljs-attr">percent</span>: <span class="hljs-number">40</span>,<br> <span class="hljs-attr">soilName</span>: <span class="hljs-string">'砂土'</span>,<br> <span class="hljs-attr">topDepth</span>: <span class="hljs-string">"6.0"</span>,<br> <span class="hljs-attr">endDepth</span>: <span class="hljs-string">"10.0"</span>,<br> <span class="hljs-attr">color</span>: <span class="hljs-string">'#808080'</span><br> }<br> ]);<br><br> <span class="hljs-comment">// 勘探孔深度 </span><br> <span class="hljs-keyword">const</span> [holeDepth, setHoleDepth] = useState<<span class="hljs-built_in">number</span>>(<span class="hljs-number">0</span>);<br> <span class="hljs-comment">// 土层面板展示深度换算 5px = 1mm</span><br> <span class="hljs-keyword">const</span> [holeLength, setHoleLength] = useState<<span class="hljs-built_in">number</span>>(<span class="hljs-number">0</span>);<br> <span class="hljs-comment">// 刻度尺深度</span><br> <span class="hljs-keyword">const</span> [scalePath, setScalePath] = <span class="hljs-title function_">useState</span>(<span class="hljs-number">0</span>);<br> <span class="hljs-keyword">const</span> [changePane, setChangePane] = useState<<span class="hljs-built_in">any</span>>(<span class="hljs-number">0</span>);<br><br> <span class="hljs-title function_">useEffect</span>(<span class="hljs-function">() =></span> {<br> <span class="hljs-keyword">if</span> (soilArr && <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(soilArr).<span class="hljs-property">length</span> > <span class="hljs-number">0</span>) {<br> <span class="hljs-keyword">const</span> soil = soilArr[soilArr.<span class="hljs-property">length</span> - <span class="hljs-number">1</span>];<br> <span class="hljs-title function_">setHoleLength</span>(<span class="hljs-built_in">parseFloat</span>(soil.<span class="hljs-property">endDepth</span>) * <span class="hljs-number">50</span>);<br> <span class="hljs-title function_">setHoleDepth</span>(<span class="hljs-built_in">parseFloat</span>(soil.<span class="hljs-property">endDepth</span>));<br> <span class="hljs-title function_">setScalePath</span>(<span class="hljs-built_in">parseInt</span>(soil.<span class="hljs-property">endDepth</span>));<br> }<br> }, [soilArr]);<br><br><br> <span class="hljs-keyword">const</span> <span class="hljs-title function_">computeDragDepth</span> = (<span class="hljs-params">preSize: <span class="hljs-built_in">number</span>, nextSize: <span class="hljs-built_in">number</span>, paneNumber: <span class="hljs-built_in">number</span></span>) => {<br> <span class="hljs-keyword">const</span> arr = soilArr;<br> <span class="hljs-keyword">const</span> preDepth = ((holeDepth * preSize) / <span class="hljs-number">100</span>).<span class="hljs-title function_">toFixed</span>(<span class="hljs-number">6</span>);<br> <span class="hljs-keyword">const</span> pre = arr[paneNumber - <span class="hljs-number">2</span>];<br> <span class="hljs-keyword">const</span> nex = arr[paneNumber - <span class="hljs-number">1</span>];<br> <span class="hljs-keyword">const</span> changeDepth = (<span class="hljs-built_in">parseFloat</span>(pre.<span class="hljs-property">topDepth</span>) + <span class="hljs-built_in">parseFloat</span>(preDepth)).<span class="hljs-title function_">toFixed</span>(<span class="hljs-number">1</span>);<br> <span class="hljs-keyword">const</span> newPre = {...pre, <span class="hljs-attr">endDepth</span>: changeDepth}<br> <span class="hljs-keyword">const</span> newNex = {...nex, <span class="hljs-attr">topDepth</span>: changeDepth}<br> arr[paneNumber - <span class="hljs-number">2</span>] = newPre;<br> arr[paneNumber - <span class="hljs-number">1</span>] = newNex;<br> <span class="hljs-comment">// 保存</span><br> <span class="hljs-title function_">setSoilArr</span>(arr);<br> <span class="hljs-title function_">setChangePane</span>(changeDepth);<br> <span class="hljs-title function_">setChangePane</span>(paneNumber - <span class="hljs-number">2</span>);<br> };<br><br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">ProCard</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Row</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{10}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Split</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"vertical"</span> <span class="hljs-attr">lineBar</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{height:</span> <span class="hljs-attr">holeLength</span>, <span class="hljs-attr">borderRadius:</span> <span class="hljs-attr">3</span>}}</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">onDragging</span>=<span class="hljs-string">{((preSize,</span> <span class="hljs-attr">nextSize</span>, <span class="hljs-attr">paneNumber</span>) =></span> {</span><br><span class="language-xml"> computeDragDepth(preSize, nextSize, paneNumber);</span><br><span class="language-xml"> })}</span><br><span class="language-xml"> ></span><br><span class="language-xml"> {Array.from(soilArr).map((soil: any) => (</span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{soil.no}</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">position:</span> "<span class="hljs-attr">relative</span>",</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">height:</span> `${<span class="hljs-attr">soil.percent</span>}%`,</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">width:</span> '<span class="hljs-attr">100</span>%',</span></span><br><span class="hljs-tag"><span class="language-xml"> }}</span></span><br><span class="hljs-tag"><span class="language-xml"> ></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Row</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{height:</span> '<span class="hljs-attr">100</span>%'}}></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">width:</span> '<span class="hljs-attr">100</span>%', <span class="hljs-attr">height:</span> '<span class="hljs-attr">100</span>%',</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">backgroundColor:</span> <span class="hljs-attr">soil.color</span>,</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">display:</span> "<span class="hljs-attr">flex</span>",</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">justifyContent:</span> "<span class="hljs-attr">center</span>",</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">alignItems:</span> "<span class="hljs-attr">center</span>"</span></span><br><span class="hljs-tag"><span class="language-xml"> }}></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>{soil.soilName}<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Row</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">position:</span> "<span class="hljs-attr">absolute</span>",</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">bottom:</span> <span class="hljs-attr">0</span>,</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">right:</span> <span class="hljs-attr">0</span>,</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">color:</span> "<span class="hljs-attr">red</span>",</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">fontSize:</span> "<span class="hljs-attr">12px</span>"</span></span><br><span class="hljs-tag"><span class="language-xml"> }}></span></span><br><span class="language-xml"> {parseFloat(soil.endDepth).toFixed(2)}</span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> ))}</span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Split</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{1}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Scale</span> <span class="hljs-attr">scalePath</span>=<span class="hljs-string">{scalePath}/</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Row</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">ProCard</span>></span></span><br> );<br>};<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">SplitArea</span>;<br></code></pre></td></tr></table></figure><ul><li>刻度尺</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, {useEffect, useState} <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;<br><br><span class="hljs-keyword">import</span> <span class="hljs-string">"./scale.less"</span>;<br><span class="hljs-keyword">import</span> {isInteger} <span class="hljs-keyword">from</span> <span class="hljs-string">"lodash"</span>;<br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">Scale</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{scalePath}</span>) =></span> {<br><br> <span class="hljs-keyword">const</span> [length, setLength] = useState<<span class="hljs-built_in">any</span>>(<span class="hljs-number">10</span>);<br><br> <span class="hljs-title function_">useEffect</span>(<span class="hljs-function">() =></span> {<br> <span class="hljs-keyword">if</span> (scalePath) {<br> <span class="hljs-comment">// 依据土层深度得出刻度尺深度</span><br> <span class="hljs-keyword">const</span> depth = <span class="hljs-built_in">parseFloat</span>(scalePath) * <span class="hljs-number">10</span>;<br> <span class="hljs-title function_">setLength</span>(depth);<br> }<br> }, [scalePath]);<br><br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"ruleContent"</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">'ruler'</span>></span></span><br><span class="language-xml"> {Array.from(Array(length), (e, i) => (</span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{i}</span>></span></span><br><span class="language-xml"> {i % 5 === 0 ? (</span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{height:</span> "<span class="hljs-attr">5px</span>"}} <span class="hljs-attr">className</span>=<span class="hljs-string">"cm"</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{i}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"left"</span>/></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"mid"</span>></span>{isInteger(i / 10) ? i / 10 : ''}<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"right"</span>/></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> ) : (</span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{height:</span> "<span class="hljs-attr">5px</span>"}} <span class="hljs-attr">className</span>=<span class="hljs-string">"mm"</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{i}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"left"</span>/></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"right"</span>/></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> )}</span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> ))}</span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-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> <span class="hljs-title class_">Scale</span>;<br></code></pre></td></tr></table></figure><ul><li>刻度值样式</li></ul><figure class="highlight less"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs less"><span class="hljs-selector-class">.ruleContent</span> {<br> <span class="hljs-attribute">display</span>: flex;<br> <span class="hljs-attribute">justify-content</span>: center;<br> <span class="hljs-selector-class">.ruler</span> {<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">90%</span>;<br> <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;<br><br> <span class="hljs-selector-class">.cm</span> {<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<br> <span class="hljs-attribute">display</span>: flex;<br> <span class="hljs-attribute">justify-content</span>: space-between;<br><br> <span class="hljs-selector-class">.left</span> {<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">20%</span>;<br> <span class="hljs-attribute">border-top</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#555</span>;<br> }<br><br> <span class="hljs-selector-class">.mid</span> {<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">60%</span>;<br> <span class="hljs-attribute">position</span>: relative;<br> <span class="hljs-attribute">top</span>: -<span class="hljs-number">10px</span>;<br> <span class="hljs-attribute">text-align</span>: center;<br> }<br><br> <span class="hljs-selector-class">.right</span> {<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">20%</span>;<br> <span class="hljs-attribute">border-top</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#555</span>;<br> }<br> }<br><br> <span class="hljs-selector-class">.mm</span> {<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<br> <span class="hljs-attribute">display</span>: flex;<br> <span class="hljs-attribute">justify-content</span>: space-between;<br><br> <span class="hljs-selector-class">.left</span> {<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">15%</span>;<br> <span class="hljs-attribute">border-top</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#555</span>;<br> }<br><br> <span class="hljs-selector-class">.right</span> {<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">15%</span>;<br> <span class="hljs-attribute">border-top</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#555</span>;<br> }<br> }<br> }<br>}<br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>JS</tag>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>React前端大批量文件打包压缩下载</title>
<link href="/2022/05/13/React%E5%89%8D%E7%AB%AF%E5%A4%A7%E6%89%B9%E9%87%8F%E6%96%87%E4%BB%B6%E6%89%93%E5%8C%85%E5%8E%8B%E7%BC%A9%E4%B8%8B%E8%BD%BD/"/>
<url>/2022/05/13/React%E5%89%8D%E7%AB%AF%E5%A4%A7%E6%89%B9%E9%87%8F%E6%96%87%E4%BB%B6%E6%89%93%E5%8C%85%E5%8E%8B%E7%BC%A9%E4%B8%8B%E8%BD%BD/</url>
<content type="html"><![CDATA[<h3 id="JSZip-file-saver"><a href="#JSZip-file-saver" class="headerlink" title="JSZip + file-saver"></a>JSZip + file-saver</h3><span id="more"></span><ul><li><a href="https://stuk.github.io/jszip/documentation/examples.html">JSZip</a></li><li>后端提供OSS图片路径,需要前端自行打包压缩下载,还需要对文件名进行处理</li><li>安装依赖</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><code class="hljs javascript">yarn add jszip <br><br>yarn add file-saver<br></code></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><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></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">JSZip</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'jszip'</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">FileSaver</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'file-saver'</span><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">toZip</span>(<span class="hljs-params">imgSrcList, fileName</span>) {<br> <span class="hljs-comment">//实例化一个压缩文件对象</span><br> <span class="hljs-keyword">let</span> zip = <span class="hljs-keyword">new</span> <span class="hljs-title class_">JSZip</span>();<br> <span class="hljs-comment">//新建一个图片文件夹用来存放图片,参数为文件名</span><br> <span class="hljs-keyword">let</span> imgFolder = zip.<span class="hljs-title function_">folder</span>(fileName); <br> <span class="hljs-keyword">const</span> fileList = [];<br> <span class="hljs-keyword">let</span> imgNum = imgSrcList.<span class="hljs-property">length</span>;<br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < imgSrcList.<span class="hljs-property">length</span>; i++) {<br> <span class="hljs-keyword">let</span> src = imgSrcList[i];<br> <span class="hljs-comment">// 对文件名的特殊处理</span><br> <span class="hljs-keyword">let</span> strUrl = src.<span class="hljs-title function_">match</span>(<span class="hljs-regexp">/(\S*)\?/</span>)[<span class="hljs-number">1</span>] : src;<br> <span class="hljs-keyword">let</span> name = strUrl.<span class="hljs-title function_">substring</span>(strUrl.<span class="hljs-title function_">lastIndexOf</span>(<span class="hljs-string">"/"</span>) + <span class="hljs-number">1</span>);<br> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {<br> <span class="hljs-keyword">const</span> tempImage = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Image</span>();<br> tempImage.<span class="hljs-property">src</span> = src;<br> tempImage.<span class="hljs-property">crossOrigin</span> = <span class="hljs-string">"*"</span>;<br> tempImage.<span class="hljs-property">onload</span> = <span class="hljs-function">() =></span> {<br> <span class="hljs-title function_">resolve</span>(tempImage);<br> };<br> tempImage.<span class="hljs-property">onerror</span> = <span class="hljs-function">(<span class="hljs-params">err</span>) =></span> {<br> <span class="hljs-comment">// 图片获取失败 记录实际获取的图片数量</span><br> imgNum = imgNum - <span class="hljs-number">1</span> < <span class="hljs-number">0</span> ? <span class="hljs-number">0</span> : imgNum - <span class="hljs-number">1</span>;<br> <span class="hljs-title function_">reject</span>(err);<br> };<br> }).<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">imageData</span>) =></span> {<br> <span class="hljs-keyword">const</span> url = <span class="hljs-title function_">getBase64Image</span>(imageData);<br> <span class="hljs-comment">// 截取 data:image/png;base64, 后的数据</span><br> fileList.<span class="hljs-title function_">push</span>({<span class="hljs-attr">name</span>: name, <span class="hljs-attr">img</span>: url.<span class="hljs-title function_">substring</span>(<span class="hljs-number">22</span>)}) <br> }).<span class="hljs-title function_">catch</span>(<span class="hljs-function">() =></span> {<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"获取图片异常"</span>);<br> }).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =></span> {<br> <span class="hljs-keyword">if</span> (fileList.<span class="hljs-property">length</span> === imgNum) {<br> <span class="hljs-keyword">if</span> (fileList.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>) {<br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> k = <span class="hljs-number">0</span>; k < fileList.<span class="hljs-property">length</span>; k++) {<br> <span class="hljs-comment">// 往文件夹中,添加每张图片数据</span><br> imgFolder.<span class="hljs-title function_">file</span>(fileList[k].<span class="hljs-property">name</span> + <span class="hljs-string">'.jpg'</span>, fileList[k].<span class="hljs-property">img</span>, {<span class="hljs-attr">base64</span>: <span class="hljs-literal">true</span>})<br> }<br> <span class="hljs-comment">// 可以设置压缩等级...</span><br> zip.<span class="hljs-title function_">generateAsync</span>({<span class="hljs-attr">type</span>: <span class="hljs-string">'blob'</span>}).<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">content</span> =></span> {<br> <span class="hljs-title class_">FileSaver</span>.<span class="hljs-title function_">saveAs</span>(content, fileName + <span class="hljs-string">'.zip'</span>)<br> });<br> }<br> }<br> });<br> }<br>};<br><br><span class="hljs-comment">// 获取图片流</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">getBase64Image</span>(<span class="hljs-params">img</span>) {<br> <span class="hljs-keyword">let</span> canvas = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">"canvas"</span>);<br> canvas.<span class="hljs-property">width</span> = img.<span class="hljs-property">width</span>;<br> canvas.<span class="hljs-property">height</span> = img.<span class="hljs-property">height</span>;<br> <span class="hljs-keyword">let</span> ctx = canvas.<span class="hljs-title function_">getContext</span>(<span class="hljs-string">"2d"</span>);<br> ctx.<span class="hljs-title function_">drawImage</span>(img, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, img.<span class="hljs-property">width</span>, img.<span class="hljs-property">height</span>);<br> <span class="hljs-keyword">let</span> ext = img.<span class="hljs-property">src</span>.<span class="hljs-title function_">substring</span>(img.<span class="hljs-property">src</span>.<span class="hljs-title function_">lastIndexOf</span>(<span class="hljs-string">"."</span>)+<span class="hljs-number">1</span>).<span class="hljs-title function_">toLowerCase</span>();<br> <span class="hljs-keyword">return</span> canvas.<span class="hljs-title function_">toDataURL</span>(<span class="hljs-string">"image/"</span> + ext);<br>}<br></code></pre></td></tr></table></figure><ul><li>问题:图片数量大,而且每张图片都是几M大小,压缩包每次基本都大于1G,压缩速度缓慢,且大于2G时浏览器会出现处理失败情况、可以在压缩时设置压缩等级,但是效果不明显。</li></ul><h3 id="streamsaver-js"><a href="#streamsaver-js" class="headerlink" title="streamsaver.js"></a>streamsaver.js</h3><ul><li><a href="https://github.com/jimmywarting/StreamSaver.js">StreamSaver</a></li><li>安装依赖</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">yarn add streamsaver<br></code></pre></td></tr></table></figure><ul><li>下载 zip-stream.js文件 <a href="https://jimmywarting.github.io/StreamSaver.js/examples/zip-stream.js">zip-stream.js</a>,将文件放在项目public目录下</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><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><code class="hljs javascript"><span class="hljs-comment">// 将下载的js加载到项目中</span><br><span class="hljs-keyword">const</span> script = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'script'</span>);<br>script.<span class="hljs-property">type</span> = <span class="hljs-string">'text/javascript'</span>;<br>script.<span class="hljs-property">async</span> = <span class="hljs-literal">true</span>;<br>script.<span class="hljs-property">src</span> = <span class="hljs-string">'/zip-stream.js'</span>;<br><span class="hljs-variable language_">document</span>.<span class="hljs-property">head</span>.<span class="hljs-title function_">appendChild</span>(script);<br><br><br>...<br><span class="hljs-keyword">import</span> streamSaver <span class="hljs-keyword">from</span> <span class="hljs-string">'streamsaver'</span>;<br>...<br><br> <span class="hljs-keyword">const</span> <span class="hljs-title function_">imgToZip</span> = (<span class="hljs-params">imgSrcList: any[], fileName: string</span>) => {<br> <span class="hljs-keyword">const</span> fileStream = streamSaver.<span class="hljs-title function_">createWriteStream</span>(fileName + <span class="hljs-string">'.zip'</span>);<br> <span class="hljs-comment">// window.ZIP 是zip-stream.js中的对象</span><br> <span class="hljs-keyword">const</span> readableZipStream = <span class="hljs-keyword">new</span> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">ZIP</span>(({<br> <span class="hljs-title function_">start</span>(<span class="hljs-params">ctrl</span>) {},<br> <span class="hljs-keyword">async</span> <span class="hljs-title function_">pull</span>(<span class="hljs-params">ctrl: any</span>) {<br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < imgSrcList.<span class="hljs-property">length</span>; i++) {<br> <span class="hljs-keyword">const</span> src = imgSrcList[i];<br> <span class="hljs-comment">// 对文件名的特殊处理</span><br> <span class="hljs-keyword">const</span> strUrl = src.<span class="hljs-title function_">match</span>(<span class="hljs-regexp">/(\S*)\?/</span>)[<span class="hljs-number">1</span>] : src;<br> <span class="hljs-keyword">const</span> timeName = strUrl.<span class="hljs-title function_">substring</span>(strUrl.<span class="hljs-title function_">lastIndexOf</span>(<span class="hljs-string">"/"</span>) + <span class="hljs-number">1</span>);<br> <span class="hljs-comment">// 文件夹</span><br> <span class="hljs-comment">// 文件地址是有特殊命名规则的,需要截取特殊字符然后对文件分文件夹存储</span><br> <span class="hljs-comment">// 文件路径中 使用”/“可以在压缩包中实现分文件夹存储的效果</span><br> <span class="hljs-keyword">const</span> folder = timeName.<span class="hljs-title function_">split</span>(<span class="hljs-string">"-"</span>)[<span class="hljs-number">0</span>];<br> <span class="hljs-keyword">const</span> name = fileName + <span class="hljs-string">"/"</span> + folder + <span class="hljs-string">"/"</span> + timeName + <span class="hljs-string">'.jpg'</span>;<br> <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(src);<br> <span class="hljs-keyword">const</span> <span class="hljs-title function_">stream</span> = (<span class="hljs-params"></span>) => res.<span class="hljs-property">body</span><br> ctrl.<span class="hljs-title function_">enqueue</span>({name, stream})<br> }<br> <span class="hljs-comment">// if (done adding all files)</span><br> ctrl.<span class="hljs-title function_">close</span>()<br> <span class="hljs-title function_">setLoading</span>(<span class="hljs-literal">false</span>);<br> }<br> }));<br> <span class="hljs-comment">// more optimized</span><br> <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">window</span>.<span class="hljs-property">WritableStream</span> && readableZipStream.<span class="hljs-property">pipeTo</span>) {<br> <span class="hljs-keyword">return</span> readableZipStream.<span class="hljs-title function_">pipeTo</span>(fileStream).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'done writing'</span>))<br> }<br> <span class="hljs-comment">// less optimized</span><br> <span class="hljs-keyword">const</span> writer = fileStream.<span class="hljs-title function_">getWriter</span>()<br> <span class="hljs-keyword">const</span> reader = readableZipStream.<span class="hljs-title function_">getReader</span>()<br> <span class="hljs-keyword">const</span> <span class="hljs-title function_">pump</span> = (<span class="hljs-params"></span>) => reader.<span class="hljs-title function_">read</span>().<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">res</span> =></span> res.<span class="hljs-property">done</span> ? writer.<span class="hljs-title function_">close</span>() : writer.<span class="hljs-title function_">write</span>(res.<span class="hljs-property">value</span>).<span class="hljs-title function_">then</span>(pump));<br><br> <span class="hljs-title function_">pump</span>()<br> };<br><br></code></pre></td></tr></table></figure><ul><li>streamsaver 速度快了很多,文件大小也小了很多</li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>JS</tag>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>地理坐标系</title>
<link href="/2021/08/11/%E5%9C%B0%E7%90%86%E5%9D%90%E6%A0%87%E7%B3%BB/"/>
<url>/2021/08/11/%E5%9C%B0%E7%90%86%E5%9D%90%E6%A0%87%E7%B3%BB/</url>
<content type="html"><![CDATA[<h5 id="地理坐标系"><a href="#地理坐标系" class="headerlink" title="地理坐标系"></a>地理坐标系</h5><span id="more"></span><p>国内坐标系相关政策规定必须要做偏移处理,在不同底图展示时会出现偏移,地图底图要和坐标系相对应时展示才是正常的。</p><ul><li>GCJ-02 高德地图、腾讯地图、谷歌中国区地图,也称<strong>火星坐标系</strong></li><li>BD-09 百度地图</li><li>WGS-84 世界通用坐标系,谷歌地图。一般设备获取的底层坐标都是,手机GPS等</li></ul><h5 id="JS不同坐标系间的转换"><a href="#JS不同坐标系间的转换" class="headerlink" title="JS不同坐标系间的转换"></a>JS不同坐标系间的转换</h5><blockquote><p>第三方包:<a href="https://github.com/hujiulong/gcoord">gcoord</a></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><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><code class="hljs js"><span class="hljs-comment">// 安装</span><br>yarn add gcoord<br><span class="hljs-comment">// 引用</span><br><span class="hljs-keyword">import</span> gcoord <span class="hljs-keyword">from</span> <span class="hljs-string">'gcoord'</span>;<br><span class="hljs-comment">// 使用</span><br><span class="hljs-keyword">var</span> result = gcoord.<span class="hljs-title function_">transform</span>(<br> [<span class="hljs-number">116.403988</span>, <span class="hljs-number">39.914266</span>], <span class="hljs-comment">// 经纬度坐标</span><br> gcoord.<span class="hljs-property">WGS84</span>, <span class="hljs-comment">// 当前坐标系</span><br> gcoord.<span class="hljs-property">BD09</span> <span class="hljs-comment">// 目标坐标系</span><br>);<br><span class="hljs-comment">// 转换GeoJSON坐标</span><br><span class="hljs-keyword">var</span> geojson = {<br> <span class="hljs-string">"type"</span>: <span class="hljs-string">"Point"</span>,<br> <span class="hljs-string">"coordinates"</span>: [<span class="hljs-number">123</span>, <span class="hljs-number">45</span>]<br>}<br>gcoord.<span class="hljs-title function_">transform</span>(geojson, gcoord.<span class="hljs-property">GCJ02</span>, gcoord.<span class="hljs-property">WGS84</span>);<br></code></pre></td></tr></table></figure><h5 id="JAVA实现不同坐标系之间转换"><a href="#JAVA实现不同坐标系之间转换" class="headerlink" title="JAVA实现不同坐标系之间转换"></a>JAVA实现不同坐标系之间转换</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">double</span> <span class="hljs-variable">pi</span> <span class="hljs-operator">=</span> <span class="hljs-number">3.1415926535897932384626</span>;<br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">double</span> <span class="hljs-variable">a</span> <span class="hljs-operator">=</span> <span class="hljs-number">6378245.0</span>;<br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">double</span> <span class="hljs-variable">ee</span> <span class="hljs-operator">=</span> <span class="hljs-number">0.00669342162296594323</span>;<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * WGS84--->GCJ02</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> lon</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> lat</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> Gps <span class="hljs-title function_">gps84_To_Gcj02</span><span class="hljs-params">(<span class="hljs-type">double</span> lon, <span class="hljs-type">double</span> lat)</span> {<br> <span class="hljs-keyword">if</span> (outOfChina(lon, lat)) {<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br> }<br> <span class="hljs-type">double</span> <span class="hljs-variable">dLat</span> <span class="hljs-operator">=</span> transformLat(lon - <span class="hljs-number">105.0</span>, lat - <span class="hljs-number">35.0</span>);<br> <span class="hljs-type">double</span> <span class="hljs-variable">dLon</span> <span class="hljs-operator">=</span> transformLon(lon - <span class="hljs-number">105.0</span>, lat - <span class="hljs-number">35.0</span>);<br> <span class="hljs-type">double</span> <span class="hljs-variable">radLat</span> <span class="hljs-operator">=</span> lat / <span class="hljs-number">180.0</span> * pi;<br> <span class="hljs-type">double</span> <span class="hljs-variable">magic</span> <span class="hljs-operator">=</span> Math.sin(radLat);<br> magic = <span class="hljs-number">1</span> - ee * magic * magic;<br> <span class="hljs-type">double</span> <span class="hljs-variable">sqrtMagic</span> <span class="hljs-operator">=</span> Math.sqrt(magic);<br> dLat = (dLat * <span class="hljs-number">180.0</span>) / ((a * (<span class="hljs-number">1</span> - ee)) / (magic * sqrtMagic) * pi);<br> dLon = (dLon * <span class="hljs-number">180.0</span>) / (a / sqrtMagic * Math.cos(radLat) * pi);<br> <span class="hljs-type">double</span> <span class="hljs-variable">mgLat</span> <span class="hljs-operator">=</span> lat + dLat;<br> <span class="hljs-type">double</span> <span class="hljs-variable">mgLon</span> <span class="hljs-operator">=</span> lon + dLon;<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gps</span>(mgLon, mgLat);<br>}<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * GCJ02--->WGS84</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> lon</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> lat</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> Gps <span class="hljs-title function_">gcj02_To_Gps84</span><span class="hljs-params">(<span class="hljs-type">double</span> lon, <span class="hljs-type">double</span> lat)</span> {<br> <span class="hljs-type">Gps</span> <span class="hljs-variable">gps</span> <span class="hljs-operator">=</span> transform(lon, lat);<br> <span class="hljs-type">double</span> <span class="hljs-variable">lontitude</span> <span class="hljs-operator">=</span> lon * <span class="hljs-number">2</span> - gps.getWgLon();<br> <span class="hljs-type">double</span> <span class="hljs-variable">latitude</span> <span class="hljs-operator">=</span> lat * <span class="hljs-number">2</span> - gps.getWgLat();<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gps</span>(lontitude, latitude);<br>}<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * GCJ02--->BD09</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> gg_lon</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> gg_lat</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> Gps <span class="hljs-title function_">gcj02_To_Bd09</span><span class="hljs-params">(<span class="hljs-type">double</span> gg_lon, <span class="hljs-type">double</span> gg_lat)</span> {<br> <span class="hljs-type">double</span> <span class="hljs-variable">x</span> <span class="hljs-operator">=</span> gg_lon, y = gg_lat;<br> <span class="hljs-type">double</span> <span class="hljs-variable">z</span> <span class="hljs-operator">=</span> Math.sqrt(x * x + y * y) + <span class="hljs-number">0.00002</span> * Math.sin(y * pi);<br> <span class="hljs-type">double</span> <span class="hljs-variable">theta</span> <span class="hljs-operator">=</span> Math.atan2(y, x) + <span class="hljs-number">0.000003</span> * Math.cos(x * pi);<br> <span class="hljs-type">double</span> <span class="hljs-variable">bd_lon</span> <span class="hljs-operator">=</span> z * Math.cos(theta) + <span class="hljs-number">0.0065</span>;<br> <span class="hljs-type">double</span> <span class="hljs-variable">bd_lat</span> <span class="hljs-operator">=</span> z * Math.sin(theta) + <span class="hljs-number">0.006</span>;<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gps</span>(bd_lon, bd_lat);<br>}<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * BD09--->GCJ02</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> bd_lon</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> bd_lat</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> Gps <span class="hljs-title function_">bd09_To_Gcj02</span><span class="hljs-params">(<span class="hljs-type">double</span> bd_lon, <span class="hljs-type">double</span> bd_lat)</span> {<br> <span class="hljs-type">double</span> <span class="hljs-variable">x</span> <span class="hljs-operator">=</span> bd_lon - <span class="hljs-number">0.0065</span>, y = bd_lat - <span class="hljs-number">0.006</span>;<br> <span class="hljs-type">double</span> <span class="hljs-variable">z</span> <span class="hljs-operator">=</span> Math.sqrt(x * x + y * y) - <span class="hljs-number">0.00002</span> * Math.sin(y * pi);<br> <span class="hljs-type">double</span> <span class="hljs-variable">theta</span> <span class="hljs-operator">=</span> Math.atan2(y, x) - <span class="hljs-number">0.000003</span> * Math.cos(x * pi);<br> <span class="hljs-type">double</span> <span class="hljs-variable">gg_lon</span> <span class="hljs-operator">=</span> z * Math.cos(theta);<br> <span class="hljs-type">double</span> <span class="hljs-variable">gg_lat</span> <span class="hljs-operator">=</span> z * Math.sin(theta);<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gps</span>(gg_lon, gg_lat);<br>}<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * BD09-->WGS84</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> bd_lon</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> bd_lat</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> Gps <span class="hljs-title function_">bd09_To_Gps84</span><span class="hljs-params">(<span class="hljs-type">double</span> bd_lon, <span class="hljs-type">double</span> bd_lat)</span> {<br><br> <span class="hljs-type">Gps</span> <span class="hljs-variable">gcj02</span> <span class="hljs-operator">=</span> PositionUtil.bd09_To_Gcj02(bd_lat, bd_lon);<br> <span class="hljs-type">Gps</span> <span class="hljs-variable">map84</span> <span class="hljs-operator">=</span> PositionUtil.gcj02_To_Gps84(gcj02.getWgLat(),<br> gcj02.getWgLon());<br> <span class="hljs-keyword">return</span> map84;<br><br>}<br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">boolean</span> <span class="hljs-title function_">outOfChina</span><span class="hljs-params">(<span class="hljs-type">double</span> lon, <span class="hljs-type">double</span> lat)</span> {<br> <span class="hljs-keyword">if</span> (lon < <span class="hljs-number">72.004</span> || lon > <span class="hljs-number">137.8347</span>)<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br> <span class="hljs-keyword">if</span> (lat < <span class="hljs-number">0.8293</span> || lat > <span class="hljs-number">55.8271</span>)<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>}<br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> Gps <span class="hljs-title function_">transform</span><span class="hljs-params">(<span class="hljs-type">double</span> lon, <span class="hljs-type">double</span> lat)</span> {<br> <span class="hljs-keyword">if</span> (outOfChina(lon, lat)) {<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gps</span>(lat, lon);<br> }<br> <span class="hljs-type">double</span> <span class="hljs-variable">dLat</span> <span class="hljs-operator">=</span> transformLat(lon - <span class="hljs-number">105.0</span>, lat - <span class="hljs-number">35.0</span>);<br> <span class="hljs-type">double</span> <span class="hljs-variable">dLon</span> <span class="hljs-operator">=</span> transformLon(lon - <span class="hljs-number">105.0</span>, lat - <span class="hljs-number">35.0</span>);<br> <span class="hljs-type">double</span> <span class="hljs-variable">radLat</span> <span class="hljs-operator">=</span> lat / <span class="hljs-number">180.0</span> * pi;<br> <span class="hljs-type">double</span> <span class="hljs-variable">magic</span> <span class="hljs-operator">=</span> Math.sin(radLat);<br> magic = <span class="hljs-number">1</span> - ee * magic * magic;<br> <span class="hljs-type">double</span> <span class="hljs-variable">sqrtMagic</span> <span class="hljs-operator">=</span> Math.sqrt(magic);<br> dLat = (dLat * <span class="hljs-number">180.0</span>) / ((a * (<span class="hljs-number">1</span> - ee)) / (magic * sqrtMagic) * pi);<br> dLon = (dLon * <span class="hljs-number">180.0</span>) / (a / sqrtMagic * Math.cos(radLat) * pi);<br> <span class="hljs-type">double</span> <span class="hljs-variable">mgLat</span> <span class="hljs-operator">=</span> lat + dLat;<br> <span class="hljs-type">double</span> <span class="hljs-variable">mgLon</span> <span class="hljs-operator">=</span> lon + dLon;<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gps</span>(mgLon, mgLat);<br>}<br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">double</span> <span class="hljs-title function_">transformLat</span><span class="hljs-params">(<span class="hljs-type">double</span> x, <span class="hljs-type">double</span> y)</span> {<br> <span class="hljs-type">double</span> <span class="hljs-variable">ret</span> <span class="hljs-operator">=</span> -<span class="hljs-number">100.0</span> + <span class="hljs-number">2.0</span> * x + <span class="hljs-number">3.0</span> * y + <span class="hljs-number">0.2</span> * y * y + <span class="hljs-number">0.1</span> * x * y<br> + <span class="hljs-number">0.2</span> * Math.sqrt(Math.abs(x));<br> ret += (<span class="hljs-number">20.0</span> * Math.sin(<span class="hljs-number">6.0</span> * x * pi) + <span class="hljs-number">20.0</span> * Math.sin(<span class="hljs-number">2.0</span> * x * pi)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br> ret += (<span class="hljs-number">20.0</span> * Math.sin(y * pi) + <span class="hljs-number">40.0</span> * Math.sin(y / <span class="hljs-number">3.0</span> * pi)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br> ret += (<span class="hljs-number">160.0</span> * Math.sin(y / <span class="hljs-number">12.0</span> * pi) + <span class="hljs-number">320</span> * Math.sin(y * pi / <span class="hljs-number">30.0</span>)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br> <span class="hljs-keyword">return</span> ret;<br>}<br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">double</span> <span class="hljs-title function_">transformLon</span><span class="hljs-params">(<span class="hljs-type">double</span> x, <span class="hljs-type">double</span> y)</span> {<br> <span class="hljs-type">double</span> <span class="hljs-variable">ret</span> <span class="hljs-operator">=</span> <span class="hljs-number">300.0</span> + x + <span class="hljs-number">2.0</span> * y + <span class="hljs-number">0.1</span> * x * x + <span class="hljs-number">0.1</span> * x * y + <span class="hljs-number">0.1</span><br> * Math.sqrt(Math.abs(x));<br> ret += (<span class="hljs-number">20.0</span> * Math.sin(<span class="hljs-number">6.0</span> * x * pi) + <span class="hljs-number">20.0</span> * Math.sin(<span class="hljs-number">2.0</span> * x * pi)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br> ret += (<span class="hljs-number">20.0</span> * Math.sin(x * pi) + <span class="hljs-number">40.0</span> * Math.sin(x / <span class="hljs-number">3.0</span> * pi)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br> ret += (<span class="hljs-number">150.0</span> * Math.sin(x / <span class="hljs-number">12.0</span> * pi) + <span class="hljs-number">300.0</span> * Math.sin(x / <span class="hljs-number">30.0</span><br> * pi)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br> <span class="hljs-keyword">return</span> ret;<br>}<br></code></pre></td></tr></table></figure><h5 id="JAVA计算任意两坐标点之间的距离"><a href="#JAVA计算任意两坐标点之间的距离" class="headerlink" title="JAVA计算任意两坐标点之间的距离"></a>JAVA计算任意两坐标点之间的距离</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 计算地球上任意两点(经纬度)距离</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> long1 第一点经度</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> lat1 第一点纬度</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> long2 第二点经度</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> lat2 第二点纬度</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span> 返回距离 单位:米</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">double</span> <span class="hljs-title function_">Distance</span><span class="hljs-params">(<span class="hljs-type">double</span> long1, <span class="hljs-type">double</span> lat1, <span class="hljs-type">double</span> long2, <span class="hljs-type">double</span> lat2)</span> {<br> <span class="hljs-type">double</span> a, b, R;<br> R = <span class="hljs-number">6378137</span>; <span class="hljs-comment">// 地球半径</span><br> lat1 = lat1 * Math.PI / <span class="hljs-number">180.0</span>;<br> lat2 = lat2 * Math.PI / <span class="hljs-number">180.0</span>;<br> a = lat1 - lat2;<br> b = (long1 - long2) * Math.PI / <span class="hljs-number">180.0</span>;<br> <span class="hljs-type">double</span> d;<br> <span class="hljs-type">double</span> sa2, sb2;<br> sa2 = Math.sin(a / <span class="hljs-number">2.0</span>);<br> sb2 = Math.sin(b / <span class="hljs-number">2.0</span>);<br> d = <span class="hljs-number">2</span><br> * R<br> * Math.asin(Math.sqrt(sa2 * sa2 + Math.cos(lat1)<br> * Math.cos(lat2) * sb2 * sb2));<br> <span class="hljs-keyword">return</span> d;<br>}<br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>JS</tag>
<tag>JAVA</tag>
</tags>
</entry>
<entry>
<title>解析KML文件并转换成GeoJSON格式文件</title>
<link href="/2021/07/22/%E8%A7%A3%E6%9E%90KML%E6%96%87%E4%BB%B6%E5%B9%B6%E8%BD%AC%E6%8D%A2%E6%88%90GeoJSON%E6%A0%BC%E5%BC%8F%E6%96%87%E4%BB%B6/"/>
<url>/2021/07/22/%E8%A7%A3%E6%9E%90KML%E6%96%87%E4%BB%B6%E5%B9%B6%E8%BD%AC%E6%8D%A2%E6%88%90GeoJSON%E6%A0%BC%E5%BC%8F%E6%96%87%E4%BB%B6/</url>
<content type="html"><![CDATA[<blockquote><p>KML: Kml(Keyhole Markup Language)包含xml表示法中的地理空间信息,应用于谷歌地球、谷歌地图相关的软件中。</p></blockquote><span id="more"></span><h5 id="JAVA解析KML文件"><a href="#JAVA解析KML文件" class="headerlink" title="JAVA解析KML文件"></a>JAVA解析KML文件</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">uploadProjectWithKml</span><span class="hljs-params">(MultipartFile file)</span> <span class="hljs-keyword">throws</span> IOException {<br> KmlProperty kmlProperty;<br> <span class="hljs-type">ParsingKmlUtil</span> <span class="hljs-variable">parsingKmlUtil</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">ParsingKmlUtil</span>();<br> <span class="hljs-keyword">if</span> (!file.isEmpty()) {<br> <span class="hljs-comment">// 获取文件名</span><br> <span class="hljs-type">String</span> <span class="hljs-variable">fileName</span> <span class="hljs-operator">=</span> file.getOriginalFilename();<br> <span class="hljs-comment">// 获取文件后缀</span><br> <span class="hljs-type">String</span> <span class="hljs-variable">prefix</span> <span class="hljs-operator">=</span> fileName.substring(fileName.lastIndexOf(<span class="hljs-string">"."</span>));<br> <span class="hljs-comment">// 判断 kml 还是ovkml</span><br> <span class="hljs-type">Boolean</span> <span class="hljs-variable">covertLatLon</span> <span class="hljs-operator">=</span> StrUtil.equals(prefix, <span class="hljs-string">"kml"</span>);<br> <span class="hljs-comment">// 用uuid作为文件名,防止生成的临时文件重复</span><br> <span class="hljs-keyword">final</span> <span class="hljs-type">File</span> <span class="hljs-variable">excelFile</span> <span class="hljs-operator">=</span> File.createTempFile(IdUtil.fastSimpleUUID(), prefix);<br> <span class="hljs-comment">// MultipartFile to File</span><br> file.transferTo(excelFile);<br><br> kmlProperty = parsingKmlUtil.parseKmlForJAK(excelFile);<br> <span class="hljs-keyword">assert</span> kmlProperty != <span class="hljs-literal">null</span>;<br><br> <span class="hljs-keyword">if</span> (kmlProperty.getKmlPoints().size() > <span class="hljs-number">0</span>) {<br> System.out.println(<span class="hljs-string">"==========点============>>>>>>"</span>);<br> }<br> <span class="hljs-keyword">if</span> (kmlProperty.getKmlLines().size() > <span class="hljs-number">0</span>) {<br> System.out.println(<span class="hljs-string">"==========线============>>>>>>"</span>);<br> }<br> <span class="hljs-comment">// 程序结束时,删除临时文件</span><br> deleteFile(excelFile);<br> }<br>}<br></code></pre></td></tr></table></figure><ul><li>KML数据解析类</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><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><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@create</span>: KML文件解析:先获取kml文件的根节点,依次遍历当前节点的子节点的信息, *</span><br><span class="hljs-comment"> * 如果遇到节点属于Folder、Document则继续解析其子节点;反之则解析PlaceMark节点(主要解析LineString、Point、Polygon)</span><br><span class="hljs-comment">**/</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ParsingKmlUtil</span> {<br><br> <span class="hljs-comment">// 以下三行都是自定义的KML类,用于获取名称name、所有点points、样式颜色color</span><br> <span class="hljs-keyword">private</span> List<KmlPoint> kmlPointList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span><>();<br> <span class="hljs-keyword">private</span> List<KmlLine> kmlLineList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span><>();<br> <span class="hljs-keyword">private</span> List<KmlPolygon> kmlPolygonList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span><>();<br> <span class="hljs-keyword">private</span> <span class="hljs-type">KmlProperty</span> <span class="hljs-variable">kmlProperty</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">KmlProperty</span>();<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 保存kml数据到临时表</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> file 上传的文件实体</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span> 自定义的KML文件实体</span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">public</span> KmlProperty <span class="hljs-title function_">parseKmlForJAK</span><span class="hljs-params">(File file)</span> {<br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-comment">// 去除BOM</span><br> UTF8BOMConverter.readContentAndSaveWithEncoding(file.getPath(), <span class="hljs-string">"UTF-8"</span>, <span class="hljs-string">"UTF-8"</span>);<br> } <span class="hljs-keyword">catch</span> (Exception e) {<br> <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">"无法识别文件编码格式!"</span>);<br> }<br> <span class="hljs-type">Kml</span> <span class="hljs-variable">kml</span> <span class="hljs-operator">=</span> Kml.unmarshal(file);<br> <span class="hljs-keyword">if</span> (ObjectUtil.isNull(kml)) {<br> <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">"无法识别文件编码格式!"</span>);<br> }<br><br> <span class="hljs-type">Feature</span> <span class="hljs-variable">feature</span> <span class="hljs-operator">=</span> kml.getFeature();<br> parseFeature(feature);<br> kmlProperty.setKmlPoints(kmlPointList);<br> kmlProperty.setKmlLines(kmlLineList);<br> kmlProperty.setKmlPolygons(kmlPolygonList);<br> <span class="hljs-keyword">return</span> kmlProperty;<br> }<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 解析kml节点信息</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> feature 需要解析到要素信息</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">parseFeature</span><span class="hljs-params">(Feature feature)</span> {<br> <span class="hljs-keyword">if</span> (feature != <span class="hljs-literal">null</span>) {<br> <span class="hljs-comment">// 判断根节点是否为Document</span><br> <span class="hljs-keyword">if</span> (feature <span class="hljs-keyword">instanceof</span> Document) {<br> <span class="hljs-type">String</span> <span class="hljs-variable">name</span> <span class="hljs-operator">=</span> feature.getName();<br> List<Feature> featureList = ((Document)feature).getFeature();<br> <span class="hljs-comment">// 遍历已获取的节点信息(节点信息为List),将list使用forEach进行遍历(同for、while)</span><br> featureList.forEach(documentFeature -> {<br> <span class="hljs-comment">// 判断遍历节点是否为PlaceMark,否则迭代解析</span><br> <span class="hljs-keyword">if</span> (documentFeature <span class="hljs-keyword">instanceof</span> Placemark) {<br> getPlaceMark((Placemark)documentFeature);<br> } <span class="hljs-keyword">else</span> {<br> parseFeature(documentFeature);<br> }<br> });<br> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (feature <span class="hljs-keyword">instanceof</span> Folder) {<br> <span class="hljs-comment">// 原理同上</span><br> List<Feature> featureList = ((Folder)feature).getFeature();<br> featureList.forEach(documentFeature -> {<br> <span class="hljs-keyword">if</span> (documentFeature <span class="hljs-keyword">instanceof</span> Placemark) {<br> getPlaceMark((Placemark)documentFeature);<br> }<br> {<br> parseFeature(documentFeature);<br> }<br> });<br> }<br> }<br> }<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 解析PlaceMark节点下的信息</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">getPlaceMark</span><span class="hljs-params">(Placemark placemark)</span> {<br> <span class="hljs-type">Geometry</span> <span class="hljs-variable">geometry</span> <span class="hljs-operator">=</span> placemark.getGeometry();<br> <span class="hljs-type">String</span> <span class="hljs-variable">name</span> <span class="hljs-operator">=</span> placemark.getName();<br> parseGeometry(name, geometry);<br> }<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 解析PlaceMark节点下的信息</span><br><span class="hljs-comment"> *</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">parseGeometry</span><span class="hljs-params">(String name, Geometry geometry)</span> {<br> <span class="hljs-keyword">if</span> (geometry != <span class="hljs-literal">null</span>) {<br> <span class="hljs-keyword">if</span> (geometry <span class="hljs-keyword">instanceof</span> Polygon) {<br> <span class="hljs-type">Polygon</span> <span class="hljs-variable">polygon</span> <span class="hljs-operator">=</span> (Polygon)geometry;<br> <span class="hljs-type">Boundary</span> <span class="hljs-variable">outerBoundaryIs</span> <span class="hljs-operator">=</span> polygon.getOuterBoundaryIs();<br> <span class="hljs-keyword">if</span> (outerBoundaryIs != <span class="hljs-literal">null</span>) {<br> <span class="hljs-type">LinearRing</span> <span class="hljs-variable">linearRing</span> <span class="hljs-operator">=</span> outerBoundaryIs.getLinearRing();<br> <span class="hljs-keyword">if</span> (linearRing != <span class="hljs-literal">null</span>) {<br> List<Coordinate> coordinates = linearRing.getCoordinates();<br> <span class="hljs-keyword">if</span> (coordinates != <span class="hljs-literal">null</span>) {<br> outerBoundaryIs = ((Polygon)geometry).getOuterBoundaryIs();<br> addPolygonToList(kmlPolygonList, name, outerBoundaryIs);<br> }<br> }<br> }<br> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (geometry <span class="hljs-keyword">instanceof</span> LineString) {<br> <span class="hljs-type">LineString</span> <span class="hljs-variable">lineString</span> <span class="hljs-operator">=</span> (LineString)geometry;<br> List<Coordinate> coordinates = lineString.getCoordinates();<br> <span class="hljs-keyword">if</span> (coordinates != <span class="hljs-literal">null</span>) {<br> coordinates = ((LineString)geometry).getCoordinates();<br> addLineStringToList(kmlLineList, coordinates, name);<br> }<br> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (geometry <span class="hljs-keyword">instanceof</span> Point) {<br> <span class="hljs-type">Point</span> <span class="hljs-variable">point</span> <span class="hljs-operator">=</span> (Point)geometry;<br> List<Coordinate> coordinates = point.getCoordinates();<br> <span class="hljs-keyword">if</span> (coordinates != <span class="hljs-literal">null</span>) {<br> coordinates = ((Point)geometry).getCoordinates();<br> addPointToList(kmlPointList, coordinates, name);<br> }<br> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (geometry <span class="hljs-keyword">instanceof</span> MultiGeometry) {<br> List<Geometry> geometries = ((MultiGeometry)geometry).getGeometry();<br> <span class="hljs-keyword">for</span> (Geometry geometryToMult : geometries) {<br> Boundary outerBoundaryIs;<br> List<Coordinate> coordinates;<br> <span class="hljs-keyword">if</span> (geometryToMult <span class="hljs-keyword">instanceof</span> Point) {<br> coordinates = ((Point)geometryToMult).getCoordinates();<br> addPointToList(kmlPointList, coordinates, name);<br> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (geometryToMult <span class="hljs-keyword">instanceof</span> LineString) {<br> coordinates = ((LineString)geometryToMult).getCoordinates();<br> addLineStringToList(kmlLineList, coordinates, name);<br> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (geometryToMult <span class="hljs-keyword">instanceof</span> Polygon) {<br> outerBoundaryIs = ((Polygon)geometryToMult).getOuterBoundaryIs();<br> addPolygonToList(kmlPolygonList, name, outerBoundaryIs);<br> }<br> }<br> }<br> }<br> }<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 将kml中所有面添加到一个list</span><br><span class="hljs-comment"> *</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">addPolygonToList</span><span class="hljs-params">(List<KmlPolygon> kmlPolygonList, String name, Boundary outerBoundaryIs)</span> {<br> LinearRing linearRing;<br> List<Coordinate> coordinates;<br> linearRing = outerBoundaryIs.getLinearRing();<span class="hljs-comment">// 面</span><br> coordinates = linearRing.getCoordinates();<br> <span class="hljs-type">KmlPolygon</span> <span class="hljs-variable">kmlPolygon</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">KmlPolygon</span>();<br> kmlPolygon.setPoints(coordinates);<br> kmlPolygon.setName(name);<br> kmlPolygonList.add(kmlPolygon);<br> }<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 将kml中所有线添加到一个list</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">addLineStringToList</span><span class="hljs-params">(List<KmlLine> kmlLineList, List<Coordinate> coordinates, String name)</span> {<br> <span class="hljs-type">KmlLine</span> <span class="hljs-variable">kmlLine</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">KmlLine</span>();<br> kmlLine.setPoints(coordinates);<br> kmlLine.setName(name);<br> kmlLineList.add(kmlLine);<br> }<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 将kml中所有点添加到一个list</span><br><span class="hljs-comment"> *</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">addPointToList</span><span class="hljs-params">(List<KmlPoint> kmlPointList, List<Coordinate> coordinates, String name)</span> {<br> <span class="hljs-type">KmlPoint</span> <span class="hljs-variable">kmlPoint</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">KmlPoint</span>();<br> kmlPoint.setName(name);<br> kmlPoint.setPoints(coordinates);<br> kmlPointList.add(kmlPoint);<br> }<br><br>}<br></code></pre></td></tr></table></figure><h5 id="KML解析的坐标点转换成GeoJSON文件"><a href="#KML解析的坐标点转换成GeoJSON文件" class="headerlink" title="KML解析的坐标点转换成GeoJSON文件"></a>KML解析的坐标点转换成GeoJSON文件</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">KmlPoint</span> {<br> <span class="hljs-keyword">private</span> List<Coordinate> points;<br> <span class="hljs-keyword">private</span> String name;<br>}<br><br><span class="hljs-keyword">public</span> JSONObject <span class="hljs-title function_">createPointJsonAndChangeLatLon</span><span class="hljs-params">(List<KmlPoint> pointList, Boolean covertLatLon)</span> {<br> <span class="hljs-type">JSONObject</span> <span class="hljs-variable">object</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">JSONObject</span>();<br> Object[] objectList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>[pointList.size()];<br> <span class="hljs-keyword">if</span> (pointList.size() > <span class="hljs-number">0</span>) {<br> objectList = convertPoint(pointList, covertLatLon);<br> }<br> object.put(<span class="hljs-string">"list"</span>, objectList);<br> <span class="hljs-keyword">return</span> object;<br> }<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * kml坐标点</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> pointList</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> covertLatLon 是否坐标转换</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">private</span> Object[] convertPoint(List<KmlPoint> pointList, Boolean covertLatLon) {<br> List<JSONObject> updateList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>();<br> <span class="hljs-comment">// 初始化线程池, 参数一定要一定要一定要调好!!!!</span><br> <span class="hljs-type">ThreadPoolExecutor</span> <span class="hljs-variable">threadPool</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">ThreadPoolExecutor</span>(<span class="hljs-number">20</span>, <span class="hljs-number">50</span>,<br> <span class="hljs-number">4</span>, TimeUnit.SECONDS, <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayBlockingQueue</span><>(<span class="hljs-number">10</span>), <span class="hljs-keyword">new</span> <span class="hljs-title class_">ThreadPoolExecutor</span>.AbortPolicy());<br> <span class="hljs-comment">// 大集合拆分成N个小集合, 这里集合的size可以稍微小一些(这里我用100刚刚好), 以保证多线程异步执行, 过大容易回到单线程</span><br> List<List<KmlPoint>> splitNList = SplitListUtils.split(pointList, <span class="hljs-number">100</span>);<br> <span class="hljs-comment">// 记录单个任务的执行次数</span><br> <span class="hljs-type">CountDownLatch</span> <span class="hljs-variable">countDownLatch</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">CountDownLatch</span>(splitNList.size());<br> <span class="hljs-comment">// 对拆分的集合进行批量处理, 先拆分的集合, 再多线程执行</span><br> <span class="hljs-keyword">for</span> (List<KmlPoint> singleList : splitNList) {<br> <span class="hljs-comment">// 线程池执行</span><br> threadPool.execute(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Thread</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Runnable</span>() {<br> <span class="hljs-meta">@Override</span><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">run</span><span class="hljs-params">()</span> {<br> <span class="hljs-keyword">for</span> (KmlPoint point : singleList) {<br> <span class="hljs-type">JSONObject</span> <span class="hljs-variable">item</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">JSONObject</span>();<br> List<Coordinate> coordinateList = point.getPoints();<br> <span class="hljs-keyword">if</span> (coordinateList.size() > <span class="hljs-number">0</span>) {<br> <span class="hljs-type">Coordinate</span> <span class="hljs-variable">coordinate</span> <span class="hljs-operator">=</span> coordinateList.get(<span class="hljs-number">0</span>);<br> <span class="hljs-keyword">if</span> (covertLatLon) {<br> <span class="hljs-comment">// kml 坐标点</span><br> <span class="hljs-type">Gps</span> <span class="hljs-variable">gps</span> <span class="hljs-operator">=</span> PositionUtil.gps84_To_Gcj02(coordinate.getLongitude(), coordinate.getLatitude());<br> <span class="hljs-keyword">if</span> (ObjectUtil.isNotNull(gps)) {<br> item.put(<span class="hljs-string">"lon"</span>, gps.getWgLon());<br> item.put(<span class="hljs-string">"lat"</span>, gps.getWgLat());<br> item.put(<span class="hljs-string">"code"</span>, point.getName());<br> }<br> } <span class="hljs-keyword">else</span> {<br> <span class="hljs-comment">// ovkml 不需要转坐标</span><br> item.put(<span class="hljs-string">"lon"</span>, coordinate.getLongitude());<br> item.put(<span class="hljs-string">"lat"</span>, coordinate.getLatitude());<br> item.put(<span class="hljs-string">"code"</span>, point.getName());<br> }<br> }<br> updateList.add(item);<br> }<br> }<br> }));<br> <span class="hljs-comment">// 任务个数 - 1, 直至为0时唤醒await()</span><br> countDownLatch.countDown();<br> }<br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-comment">// 让当前线程处于阻塞状态,直到锁存器计数为零</span><br> countDownLatch.await();<br> } <span class="hljs-keyword">catch</span> (InterruptedException e) {<br> <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">"转换kml点失败"</span>);<br> }<br><br> <span class="hljs-keyword">if</span> (ArrayUtil.isNotEmpty(updateList)) {<br> <span class="hljs-keyword">return</span> updateList.toArray();<br> } <span class="hljs-keyword">else</span> {<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>[pointList.size()];<br> }<br> }<br><br></code></pre></td></tr></table></figure><h5 id="KML解析的线转换为GeoJSON格式文件"><a href="#KML解析的线转换为GeoJSON格式文件" class="headerlink" title="KML解析的线转换为GeoJSON格式文件"></a>KML解析的线转换为GeoJSON格式文件</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">KmlLine</span> {<br> <span class="hljs-keyword">private</span> List<Coordinate> points;<br> <span class="hljs-keyword">private</span> String name;<br>}<br><br><span class="hljs-keyword">public</span> JSONObject <span class="hljs-title function_">createGeoJsonLineAndChangeLatLon</span><span class="hljs-params">(List<KmlLine> lineList, Boolean covertLatLon)</span> {<br> Object[] objectList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>[lineList.size()];<br> <span class="hljs-keyword">if</span> (lineList.size() > <span class="hljs-number">0</span>) {<br> objectList = convertLine(lineList, covertLatLon);<br> }<br> <span class="hljs-type">JSONObject</span> <span class="hljs-variable">jsonObject</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">JSONObject</span>();<br> jsonObject.put(<span class="hljs-string">"type"</span>, <span class="hljs-string">"FeatureCollection"</span>);<br> jsonObject.put(<span class="hljs-string">"features"</span>, objectList);<br> <span class="hljs-keyword">return</span> jsonObject;<br>}<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * kml线数据转换geoJson</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> lineList</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> covertLatLon</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">private</span> Object[] convertLine(List<KmlLine> lineList, Boolean covertLatLon) {<br> List<JSONObject> updateList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>();<br> <span class="hljs-comment">// 初始化线程池, 参数一定要一定要一定要调好!!!!</span><br> <span class="hljs-type">ThreadPoolExecutor</span> <span class="hljs-variable">threadPool</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">ThreadPoolExecutor</span>(<span class="hljs-number">20</span>, <span class="hljs-number">50</span>,<br> <span class="hljs-number">4</span>, TimeUnit.SECONDS, <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayBlockingQueue</span><>(<span class="hljs-number">10</span>), <span class="hljs-keyword">new</span> <span class="hljs-title class_">ThreadPoolExecutor</span>.AbortPolicy());<br> <span class="hljs-comment">// 大集合拆分成N个小集合, 这里集合的size可以稍微小一些(这里我用100刚刚好), 以保证多线程异步执行, 过大容易回到单线程</span><br> List<List<KmlLine>> splitNList = SplitListUtils.split(lineList, <span class="hljs-number">100</span>);<br> <span class="hljs-comment">// 记录单个任务的执行次数</span><br> <span class="hljs-type">CountDownLatch</span> <span class="hljs-variable">countDownLatch</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">CountDownLatch</span>(splitNList.size());<br> <span class="hljs-comment">// 对拆分的集合进行批量处理, 先拆分的集合, 再多线程执行</span><br> <span class="hljs-keyword">for</span> (List<KmlLine> singleList : splitNList) {<br> <span class="hljs-comment">// 线程池执行</span><br> threadPool.execute(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Thread</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Runnable</span>() {<br> <span class="hljs-meta">@Override</span><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">run</span><span class="hljs-params">()</span> {<br> <span class="hljs-keyword">for</span> (KmlLine line : singleList) {<br> Object[] item = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>[line.getPoints().size()];<br> <span class="hljs-type">int</span> <span class="hljs-variable">index</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>;<br> List<Coordinate> coordinateList = line.getPoints();<br> <span class="hljs-keyword">if</span> (coordinateList.size() > <span class="hljs-number">0</span>) {<br> <span class="hljs-keyword">for</span> (Coordinate point : coordinateList) {<br> <span class="hljs-comment">// kml是WGS84坐标系 ovkml是GCJ02坐标系</span><br> <span class="hljs-keyword">if</span> (covertLatLon) {<br> <span class="hljs-type">Gps</span> <span class="hljs-variable">gps</span> <span class="hljs-operator">=</span> PositionUtil.gps84_To_Gcj02(point.getLongitude(), point.getLatitude());<br> <span class="hljs-keyword">if</span> (ObjectUtil.isNotNull(gps)) {<br> Double[] value = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Double</span>[<span class="hljs-number">2</span>];<br> value[<span class="hljs-number">0</span>] = gps.getWgLon();<br> value[<span class="hljs-number">1</span>] = gps.getWgLat();<br> item[index] = value;<br> index += <span class="hljs-number">1</span>;<br> }<br> } <span class="hljs-keyword">else</span> {<br> Double[] value = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Double</span>[<span class="hljs-number">2</span>];<br> value[<span class="hljs-number">0</span>] = point.getLongitude();<br> value[<span class="hljs-number">1</span>] = point.getLatitude();<br> item[index] = value;<br> index += <span class="hljs-number">1</span>;<br> }<br> }<br> }<br><br> <span class="hljs-type">JSONObject</span> <span class="hljs-variable">lineObject</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">JSONObject</span>();<br> lineObject.put(<span class="hljs-string">"type"</span>, <span class="hljs-string">"LineString"</span>);<br> lineObject.put(<span class="hljs-string">"coordinates"</span>, item);<br> <span class="hljs-comment">// 线</span><br> <span class="hljs-type">JSONObject</span> <span class="hljs-variable">object</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">JSONObject</span>();<br> object.put(<span class="hljs-string">"type"</span>, <span class="hljs-string">"Feature"</span>);<br><br> <span class="hljs-type">JSONObject</span> <span class="hljs-variable">nameObject</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">JSONObject</span>();<br> nameObject.put(<span class="hljs-string">"name"</span>, line.getName());<br> nameObject.put(<span class="hljs-string">"title"</span>, line.getName());<br><br> object.put(<span class="hljs-string">"properties"</span>, nameObject);<br> object.put(<span class="hljs-string">"geometry"</span>, lineObject);<br> updateList.add(object);<br> }<br> }<br> }));<br> <span class="hljs-comment">// 任务个数 - 1, 直至为0时唤醒await()</span><br> countDownLatch.countDown();<br> }<br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-comment">// 让当前线程处于阻塞状态,直到锁存器计数为零</span><br> countDownLatch.await();<br> } <span class="hljs-keyword">catch</span> (InterruptedException e) {<br> <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">"转换kml线失败"</span>);<br> }<br><br> <span class="hljs-keyword">if</span> (ArrayUtil.isNotEmpty(updateList)) {<br> <span class="hljs-keyword">return</span> updateList.toArray();<br> } <span class="hljs-keyword">else</span> {<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>[lineList.size()];<br> }<br> }<br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>GeoJSON</tag>
<tag>JAVA</tag>
<tag>KML</tag>
</tags>
</entry>
<entry>
<title>React拖动排序实现</title>
<link href="/2021/07/02/React%E6%8B%96%E5%8A%A8%E6%8E%92%E5%BA%8F%E5%AE%9E%E7%8E%B0/"/>
<url>/2021/07/02/React%E6%8B%96%E5%8A%A8%E6%8E%92%E5%BA%8F%E5%AE%9E%E7%8E%B0/</url>
<content type="html"><![CDATA[<h5 id="单列元素实现拖动排序"><a href="#单列元素实现拖动排序" class="headerlink" title="单列元素实现拖动排序"></a>单列元素实现拖动排序</h5><span id="more"></span><p><img src="http://rqtidfx1b.hd-bkt.clouddn.com/blog%E5%9B%BE%E7%89%87/dragSort.png?e=1677722266&token=vHmXGI2PsS0WmpqdAyO3PU6IZz49k2gRejtkvmp7:Gvx7yUrEMbB2rPPfQv3vWbp1AN8="></p><blockquote><p>第三方组件: <a href="https://github.com/atlassian/react-beautiful-dnd">react-beautiful-dnd</a></p></blockquote><ul><li>代码</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> grid = <span class="hljs-number">4</span>;<br><span class="hljs-comment">// 样式</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">getItemStyle</span> = (<span class="hljs-params">isDragging: <span class="hljs-built_in">any</span>, draggableStyle: <span class="hljs-built_in">any</span></span>) => ({<br> <span class="hljs-attr">userSelect</span>: <span class="hljs-string">'none'</span>,<br> <span class="hljs-attr">padding</span>: grid * <span class="hljs-number">2</span>,<br> <span class="hljs-attr">margin</span>: <span class="hljs-string">`0 0 <span class="hljs-subst">${grid}</span>px 0`</span>,<br> <span class="hljs-attr">background</span>: isDragging ? <span class="hljs-string">'lightgreen'</span> : <span class="hljs-string">'#fff'</span>,<br> ...draggableStyle,<br>});<br><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">getListStyle</span> = (<span class="hljs-params">isDraggingOver: <span class="hljs-built_in">any</span></span>) => ({<br> <span class="hljs-attr">background</span>: isDraggingOver ? <span class="hljs-string">'lightblue'</span> : <span class="hljs-string">'#f9f9f9'</span>,<br> <span class="hljs-attr">padding</span>: grid,<br> <span class="hljs-attr">width</span>: <span class="hljs-string">'90%'</span>,<br>});<br><br><span class="hljs-comment">// 拖动结束元素重新排序</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">reorder</span> = (<span class="hljs-params">list: <span class="hljs-built_in">any</span>[], startIndex: <span class="hljs-built_in">any</span>, endIndex: <span class="hljs-built_in">any</span></span>) => {<br> <span class="hljs-keyword">const</span> result = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(list);<br> <span class="hljs-keyword">const</span> [removed] = result.<span class="hljs-title function_">splice</span>(startIndex, <span class="hljs-number">1</span>);<br> result.<span class="hljs-title function_">splice</span>(endIndex, <span class="hljs-number">0</span>, removed);<br> <span class="hljs-keyword">return</span> result;<br>};<br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">TestDrag</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span> = <span class="hljs-function">() =></span> {<br><br> <span class="hljs-comment">// 初始化数据</span><br> <span class="hljs-keyword">const</span> [terms, setTerms] = useState<<span class="hljs-built_in">any</span>[]>([<br> {<br> <span class="hljs-attr">sort</span>: <span class="hljs-number">0</span>,<br> <span class="hljs-attr">termName</span>: <span class="hljs-string">'含水率'</span>,<br> },<br> {<br> <span class="hljs-attr">sort</span>: <span class="hljs-number">1</span>,<br> <span class="hljs-attr">termName</span>: <span class="hljs-string">'比重'</span>,<br> },<br> {<br> <span class="hljs-attr">sort</span>: <span class="hljs-number">2</span>,<br> <span class="hljs-attr">termName</span>: <span class="hljs-string">'饱和度'</span>,<br> },<br> {<br> <span class="hljs-attr">sort</span>: <span class="hljs-number">3</span>,<br> <span class="hljs-attr">termName</span>: <span class="hljs-string">'湿密度'</span>,<br> },<br> {<br> <span class="hljs-attr">sort</span>: <span class="hljs-number">4</span>,<br> <span class="hljs-attr">termName</span>: <span class="hljs-string">'干密度'</span>,<br> }<br> ]);<br><br> <span class="hljs-keyword">const</span> <span class="hljs-title function_">onDragEnd</span> = (<span class="hljs-params">result: <span class="hljs-built_in">any</span></span>) => {<br> <span class="hljs-comment">// 拖动到元素列表之外</span><br> <span class="hljs-keyword">if</span> (!result.<span class="hljs-property">destination</span>) {<br> <span class="hljs-keyword">return</span>;<br> }<br> <span class="hljs-keyword">const</span> arr = <span class="hljs-title function_">reorder</span>(terms, result.<span class="hljs-property">source</span>.<span class="hljs-property">index</span>, result.<span class="hljs-property">destination</span>.<span class="hljs-property">index</span>);<br> <span class="hljs-title function_">setTerms</span>(arr);<br> };<br> <br> <span class="hljs-comment">// 移出元素</span><br> <span class="hljs-keyword">const</span> <span class="hljs-title function_">handleDel</span> = (<span class="hljs-params">index: <span class="hljs-built_in">number</span></span>) => {<br> <span class="hljs-keyword">const</span> arr = [...terms];<br> arr.<span class="hljs-title function_">splice</span>(index, <span class="hljs-number">1</span>);<br> <span class="hljs-title function_">setTerms</span>(arr);<br> };<br><br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">DragDropContext</span> <span class="hljs-attr">onDragEnd</span>=<span class="hljs-string">{onDragEnd}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Droppable</span> <span class="hljs-attr">droppableId</span>=<span class="hljs-string">"droppable"</span>></span></span><br><span class="language-xml"> {(provided: any, snapshot: any) => (</span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span></span></span><br><span class="hljs-tag"><span class="language-xml"> {<span class="hljs-attr">...provided.droppableProps</span>}</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">ref</span>=<span class="hljs-string">{provided.innerRef}</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">style</span>=<span class="hljs-string">{getListStyle(snapshot.isDraggingOver)}</span></span></span><br><span class="hljs-tag"><span class="language-xml"> ></span></span><br><span class="language-xml"> {terms</span><br><span class="language-xml"> .map((v: any, inx: number) => ({...v, id: `item${inx}`}))</span><br><span class="language-xml"> .map((item: any, index: number) => (</span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Draggable</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{item.id}</span> <span class="hljs-attr">draggableId</span>=<span class="hljs-string">{item.id}</span> <span class="hljs-attr">index</span>=<span class="hljs-string">{index}</span>></span></span><br><span class="language-xml"> {(provided2: any, snapshot2: any) => (</span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">ref</span>=<span class="hljs-string">{provided2.innerRef}</span></span></span><br><span class="hljs-tag"><span class="language-xml"> {<span class="hljs-attr">...provided2.draggableProps</span>}</span></span><br><span class="hljs-tag"><span class="language-xml"> {<span class="hljs-attr">...provided2.dragHandleProps</span>}</span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">style</span>=<span class="hljs-string">{getItemStyle(snapshot2.isDragging,</span> <span class="hljs-attr">provided2.draggableProps.style</span>)}</span></span><br><span class="hljs-tag"><span class="language-xml"> ></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Row</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{textAlign:</span> '<span class="hljs-attr">center</span>'}} <span class="hljs-attr">gutter</span>=<span class="hljs-string">{8}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{2}</span>></span>{index + 1}<span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{18}</span>></span>{item.termName}<span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{4}</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Space</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Popconfirm</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">title</span>=<span class="hljs-string">"确定删除?"</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =></span> handleDel(index)}</span><br><span class="language-xml"> okText="确定"</span><br><span class="language-xml"> cancelText="取消"</span><br><span class="language-xml"> ></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">a</span>></span>删除<span class="hljs-tag"></<span class="hljs-name">a</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Popconfirm</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Space</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Col</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Row</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> )}</span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Draggable</span>></span></span><br><span class="language-xml"> ))}</span><br><span class="language-xml"> {provided.placeholder}</span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> )}</span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">Droppable</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">DragDropContext</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">TestDrag</span>;<br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>JS</tag>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>GeoJSON基础知识</title>
<link href="/2021/05/05/GeoJSON%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/"/>
<url>/2021/05/05/GeoJSON%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/</url>
<content type="html"><![CDATA[<blockquote><p>GeoJSON是一种对各种地理书结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型:点、线、面、多点、多线、多面和几何集合。</p><p>一个完整的GeoJSON数据结构总是一个JSON对象。</p></blockquote><span id="more"></span><ul><li>示例</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><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><code class="hljs json"><span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"FeatureCollection"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"features"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Feature"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"geometry"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Point"</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">102.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.5</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"properties"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-attr">"prop0"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"value0"</span><span class="hljs-punctuation">}</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Feature"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"geometry"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"LineString"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-punctuation">[</span><span class="hljs-number">102.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">103.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">104.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">105.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"properties"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"prop0"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"value0"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"prop1"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0.0</span><br> <span class="hljs-punctuation">}</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Feature"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"geometry"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Polygon"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-punctuation">[</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span><br> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"properties"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"prop0"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"value0"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"prop1"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-attr">"this"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"that"</span><span class="hljs-punctuation">}</span><br> <span class="hljs-punctuation">}</span><br> <span class="hljs-punctuation">}</span><br> <span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><ul><li>type成员</li></ul><figure class="highlight ada"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ada"><span class="hljs-keyword">type</span>成员的值必须是下面之一:<span class="hljs-string">"Point"</span>, <span class="hljs-string">"MultiPoint"</span>, <span class="hljs-string">"LineString"</span>, <span class="hljs-string">"MultiLineString"</span>, <span class="hljs-string">"Polygon"</span>, <span class="hljs-string">"MultiPolygon"</span>, <span class="hljs-string">"GeometryCollection"</span>, <span class="hljs-string">"Feature"</span>, 或者 <span class="hljs-string">"FeatureCollection"</span><br></code></pre></td></tr></table></figure><ul><li>coordinates</li></ul><figure class="highlight 1c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs 1c">除了“GeometryCollection”外的其他任何类型的GeoJSON几何对象必须由一个名字为<span class="hljs-string">"coordinates"</span>的成员。coordinates成员的值总是数组。这个数组里的元素的结构由几何类型来确定<br></code></pre></td></tr></table></figure><ul><li>点 【点坐标是按照x,y顺序的(投影坐标的东向、北向,地理坐标的长度、高度)】</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><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><code class="hljs json"><span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Point"</span><br><span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> 必须是一个单独的位置<br><br><span class="hljs-comment">// 示例</span><br><span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Point"</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><ul><li>多点</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><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><code class="hljs json"><span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"MultiPoint"</span><br><span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> 必须是位置数组<br><br><span class="hljs-comment">// 示例</span><br><span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"MultiPoint"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">]</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><ul><li>线</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><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><code class="hljs json"><span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"LineString"</span><br><span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> 必须是两个或者多个位置的数组<br><br><span class="hljs-comment">// 示例</span><br><span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Point"</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"LineString"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">]</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><ul><li>多线</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><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><code class="hljs json"><span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"MultiLineString"</span><br><span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> 必须是一个线坐标数组的数组<br><br><span class="hljs-comment">// 示例</span><br><span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"MultiLineString"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-punctuation">[</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span><br> <span class="hljs-punctuation">[</span> <span class="hljs-punctuation">[</span><span class="hljs-number">102.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">2.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">103.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">3.0</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">]</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><ul><li>面【面的坐标是线性环坐标数组的数组。这个数组的第一个元素表示的是外部环。其他后续的元素表示的内部环(或者孔)】</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><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><code class="hljs json"><span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Polygon"</span><br><span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> 必须是一个线性环坐标数组的数组。对拥有多个环的的面来说,第一个环必须是外部环,其他的必须是内部环或者孔。<br><br><span class="hljs-comment">// 有孔示例</span><br><span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Polygon"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-punctuation">[</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span><br> <span class="hljs-punctuation">[</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.2</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.2</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.8</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.2</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.8</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.8</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.2</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.8</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.2</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.2</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">}</span><br><br><span class="hljs-comment">// 无孔示例</span><br><span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Polygon"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-punctuation">[</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">]</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><ul><li>多面</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><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><code class="hljs json"><span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"MultiPlygon"</span><br><span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> 必须是面坐标数组的数组。<br><br><span class="hljs-comment">// 示例</span><br><span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"MultiPolygon"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-punctuation">[</span><span class="hljs-punctuation">[</span><span class="hljs-punctuation">[</span><span class="hljs-number">102.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">2.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">103.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">2.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">103.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">3.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">102.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">3.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">102.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">2.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span><br> <span class="hljs-punctuation">[</span><span class="hljs-punctuation">[</span><span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span><br> <span class="hljs-punctuation">[</span><span class="hljs-punctuation">[</span><span class="hljs-number">100.2</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.2</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.8</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.2</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.8</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.8</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.2</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.8</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.2</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.2</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">]</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><ul><li>几何集合【几何集合的几何数组里的每个元素都是上面所描述的几何对象之一】</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><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><code class="hljs json"><span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"GeometryCollection"</span><br><span class="hljs-comment">// 类型为"GeometryCollection"的GeoJSON对象是一个集合对象,它表示几何对象的集合。几何集合必须有一个名字为"geometries"的成员。与"geometries"相对应的值是一个数组。这个数组中的每个元素都是一个GeoJSON几何对象</span><br><br><span class="hljs-comment">// 示例</span><br><span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"GeometryCollection"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"geometries"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Point"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">100.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-punctuation">{</span> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"LineString"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"coordinates"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span> <span class="hljs-punctuation">[</span><span class="hljs-number">101.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">[</span><span class="hljs-number">102.0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1.0</span><span class="hljs-punctuation">]</span> <span class="hljs-punctuation">]</span><br> <span class="hljs-punctuation">}</span><br> <span class="hljs-punctuation">]</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><blockquote><p>在线查看和绘制、修改GeoJSON数据:<a href="https://geojson.io/">geojson.io</a></p></blockquote><blockquote><p>在线查看,简化GeoJSON数据:<a href="%5Bhttps://mapshaper.org%5D(https://mapshaper.org/)">mapshaper</a></p></blockquote><blockquote><p>全国行政区域GeoJSON数据下载:<a href="http://datav.aliyun.com/portal/school/atlas/area_selector">DataV.GeoAtlas</a></p></blockquote>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>GeoJSON</tag>
</tags>
</entry>
<entry>
<title>React Hooks组件间通信</title>
<link href="/2020/04/01/React%20Hooks%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1/"/>
<url>/2020/04/01/React%20Hooks%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1/</url>
<content type="html"><![CDATA[<h5 id="父传子"><a href="#父传子" class="headerlink" title="父传子"></a>父传子</h5><span id="more"></span><ul><li>父组件</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">Father</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br> <span class="hljs-keyword">const</span> [count, setCount] = useState<<span class="hljs-built_in">number</span>>(<span class="hljs-number">0</span>);<br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>父组件<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}>父组件计数:{count}<span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Son</span> <span class="hljs-attr">fatherCount</span>=<span class="hljs-string">{count}/</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Father</span>;<br></code></pre></td></tr></table></figure><ul><li><p>子组件</p><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">Son</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{fatherCount}</span>) =></span> {<br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>子组件<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>子组件收到计数:{fatherCount}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Son</span>;<br></code></pre></td></tr></table></figure></li></ul><h5 id="子传父"><a href="#子传父" class="headerlink" title="子传父"></a>子传父</h5><ul><li>父组件</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">Father</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br> <span class="hljs-keyword">const</span> [count, setCount] = useState<<span class="hljs-built_in">number</span>>(<span class="hljs-number">0</span>);<br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>父组件<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}>父组件计数:{count}<span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Son</span> <span class="hljs-attr">fatherCount</span>=<span class="hljs-string">{count}</span> <span class="hljs-attr">sonChange</span>=<span class="hljs-string">{(val:</span> <span class="hljs-attr">number</span>) =></span> setCount(val)}/></span><br><span class="language-xml"> {/*或者直接将setCount作为函数传入也可以*/}</span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Son</span> <span class="hljs-attr">fatherCount</span>=<span class="hljs-string">{count}</span> <span class="hljs-attr">sonChange</span>=<span class="hljs-string">{setCount}/</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Father</span>;<br></code></pre></td></tr></table></figure><ul><li>子组件</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">Son</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{fatherCount, sonChange}</span>) =></span> {<br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>子组件<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>子组件收到计数:{fatherCount}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> sonChange(fatherCount + 1)}>子组件修改<span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Son</span>;<br></code></pre></td></tr></table></figure><h5 id="useCallback优化"><a href="#useCallback优化" class="headerlink" title="useCallback优化"></a>useCallback优化</h5><ul><li><p>父组件更新,子组件不需要重新渲染的时候,可使用useCallback优化,主要是第二个参数的使用</p></li><li><p>父组件</p></li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">Father</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br> <span class="hljs-keyword">const</span> [count, setCount] = useState<<span class="hljs-built_in">number</span>>(<span class="hljs-number">0</span>);<br> <span class="hljs-comment">// 第一个参数函数,第二个参数为触发状态</span><br> <span class="hljs-keyword">const</span> changeCount = <span class="hljs-title function_">useCallback</span>(<span class="hljs-function">(<span class="hljs-params">val: <span class="hljs-built_in">number</span></span>) =></span> <span class="hljs-title function_">setCount</span>(val), []);<br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>父组件<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}>父组件计数:{count}<span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Son</span> <span class="hljs-attr">fatherCount</span>=<span class="hljs-string">{count}</span> <span class="hljs-attr">sonChange</span>=<span class="hljs-string">{changeCount}/</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Father</span>;<br></code></pre></td></tr></table></figure><ul><li>子组件</li></ul><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">Son</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{fatherCount, sonChange}</span>) =></span> {<br> <span class="hljs-keyword">const</span> sonClick = <span class="hljs-title function_">useCallback</span>(<span class="hljs-function">() =></span> <span class="hljs-title function_">sonChange</span>(fatherCount + <span class="hljs-number">1</span>), [fatherCount]);<br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>子组件<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>子组件收到计数:{fatherCount}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{sonClick}</span>></span>子组件修改<span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Son</span>;<br></code></pre></td></tr></table></figure><h5 id="useContext跨组件传值"><a href="#useContext跨组件传值" class="headerlink" title="useContext跨组件传值"></a>useContext跨组件传值</h5><blockquote><p>父组件</p></blockquote><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> defaultInfo = {<br> <span class="hljs-attr">name</span>: <span class="hljs-string">'Drew'</span>,<br> <span class="hljs-attr">age</span>: <span class="hljs-number">0</span><br>}<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">ParentContext</span> = <span class="hljs-title function_">createContext</span>(defaultInfo);<br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">Father</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br> <span class="hljs-keyword">const</span> [count, setCount] = useState<<span class="hljs-built_in">number</span>>(<span class="hljs-number">0</span>);<br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>父组件<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}>父组件计数:{count}<span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Divider</span> /></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">ParentContext.Provider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{{...defaultInfo,</span> <span class="hljs-attr">age:</span> <span class="hljs-attr">count</span>}}></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Son</span> <span class="hljs-attr">fatherCount</span>=<span class="hljs-string">{count}</span> <span class="hljs-attr">sonChange</span>=<span class="hljs-string">{(val:</span> <span class="hljs-attr">number</span>) =></span> setCount(val)}/></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">ParentContext.Provider</span>></span></span><br><span class="language-xml"></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Father</span>;<br></code></pre></td></tr></table></figure><blockquote><p>子组件</p></blockquote><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">Son</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{fatherCount, sonChange}</span>) =></span> {<br> <span class="hljs-keyword">const</span> info = <span class="hljs-title function_">useContext</span>(<span class="hljs-title class_">ParentContext</span>);<br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>子组件<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>子组件收到计数:{fatherCount}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> (sonChange(fatherCount + 1))}>子组件修改<span class="hljs-tag"></<span class="hljs-name">Button</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>name: {info.name}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>age: {info.age}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Divider</span>/></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">GrandSon</span> /></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Son</span>;<br></code></pre></td></tr></table></figure><blockquote><p>孙子组件</p></blockquote><figure class="highlight tsx"><table><tr><td class="gutter"><pre><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><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title class_">GrandSon</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-built_in">any</span>> = <span class="hljs-function">(<span class="hljs-params">{}</span>) =></span> {<br> <span class="hljs-keyword">const</span> info = <span class="hljs-title function_">useContext</span>(<span class="hljs-title class_">ParentContext</span>);<br> <span class="hljs-keyword">return</span> (<br> <span class="language-xml"><span class="hljs-tag"><></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>孙子组件<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>name: {info.name}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>age: {info.age}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></></span></span><br> );<br>};<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">GrandSon</span>;<br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>JS</tag>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>Spring-Boot JPA pom依赖错误记录</title>
<link href="/2019/05/16/spring-boot-jpa-pom%E4%BE%9D%E8%B5%96%E9%94%99%E8%AF%AF%E8%AE%B0%E5%BD%95/"/>
<url>/2019/05/16/spring-boot-jpa-pom%E4%BE%9D%E8%B5%96%E9%94%99%E8%AF%AF%E8%AE%B0%E5%BD%95/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/gratisography-skate-face.jpg"></p><p>Spring-Boot中使用JPA做持久层的的时候启动出现报错</p><span id="more"></span><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs json">控制台- <span class="hljs-number">2019</span><span class="hljs-number">-05</span><span class="hljs-number">-16</span> <span class="hljs-number">17</span><span class="hljs-punctuation">:</span><span class="hljs-number">04</span><span class="hljs-punctuation">:</span><span class="hljs-number">43</span> <span class="hljs-punctuation">[</span>restartedMain<span class="hljs-punctuation">]</span> WARN o.s.b.w.s.c.AnnotationConfigServletWebServerApplicationContext - Exception encountered during context initialization - cancelling refresh attempt<span class="hljs-punctuation">:</span> org.springframework.beans.factory.UnsatisfiedDependencyException<span class="hljs-punctuation">:</span> Error creating bean with name 'orderController'<span class="hljs-punctuation">:</span> Unsatisfied dependency expressed through field 'tokenRepository'; nested exception is org.springframework.beans.factory.BeanCreationException<span class="hljs-punctuation">:</span> Error creating bean with name 'tokenRepository'<span class="hljs-punctuation">:</span> Post-processing of merged bean definition failed; nested exception is java.lang.NoClassDefFoundError<span class="hljs-punctuation">:</span> javax/persistence/SynchronizationType<br></code></pre></td></tr></table></figure><p>原因是依赖文件版本冲突引起的,我在pom中引入了</p><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>org.hibernate<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>hibernate-core<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>4.1.4.Final<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br><br><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>org.springframework.boot<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>spring-boot-starter-data-jpa<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure><p>spring-boot-starter-data-jpa查看包依赖即可看到依赖的是如下版本</p><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>org.hibernate<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>hibernate-core<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">version</span>></span>5.2.17.Final<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">scope</span>></span>compile<span class="hljs-tag"></<span class="hljs-name">scope</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">exclusions</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">exclusion</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>jboss-transaction-api_1.2_spec<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>org.jboss.spec.javax.transaction<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">exclusion</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">exclusions</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure><p>而我又在pom中引入了4.1.4.Final,引起了版本冲突,删掉引入的4.1.4.Final版本即可</p>]]></content>
<categories>
<category>错误记录</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
<tag>JPA</tag>
</tags>
</entry>
<entry>
<title>Spring-Boot中的配置文件</title>
<link href="/2019/05/10/spring-boot%E4%B8%AD%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6/"/>
<url>/2019/05/10/spring-boot%E4%B8%AD%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/negative-space.jpg"></p><h5 id="Value"><a href="#Value" class="headerlink" title="@Value()"></a>@Value()</h5><span id="more"></span><ul><li><p>在application.properties配置文件中添加配置</p><figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">drew.email</span>=<span class="hljs-string">[email protected]</span><br></code></pre></td></tr></table></figure></li><li><p>在代码中引用</p><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@Value("${drew.email}")</span><br><span class="hljs-keyword">private</span> String email;<br><br><span class="hljs-meta">@GetMapping("/env/email")</span><br><span class="hljs-keyword">public</span> String <span class="hljs-title function_">getEmail</span><span class="hljs-params">()</span> {<br> <span class="hljs-keyword">return</span> email;<br>}<br></code></pre></td></tr></table></figure></li></ul><h5 id="创建配置类"><a href="#创建配置类" class="headerlink" title="创建配置类"></a>创建配置类</h5><ul><li><p>在application.properties配置文件中添加配置</p><figure class="highlight properties"><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><code class="hljs properties"><span class="hljs-attr">redis.host</span>=<span class="hljs-string">127.0.0.1</span><br><span class="hljs-attr">redis.user</span>=<span class="hljs-string">root</span><br><span class="hljs-attr">redis.pass</span>=<span class="hljs-string">123456</span><br></code></pre></td></tr></table></figure></li><li><p>新建RedisConfig配置类</p><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@Data</span><br><span class="hljs-meta">@Component</span><br><span class="hljs-meta">@ConfigurationProperties(prefix = "redis")</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">RedisConfig</span> {<br><br> <span class="hljs-meta">@NotEmpty</span><br> <span class="hljs-keyword">private</span> String host;<br> <span class="hljs-keyword">private</span> String pass;<br> <span class="hljs-keyword">private</span> String user;<br><br>}<br><span class="hljs-comment">//@NotEmpty会在项目启动时检查,配置为空时会报错</span><br></code></pre></td></tr></table></figure></li><li><p>在代码中引用</p><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@Autowired</span><br><span class="hljs-keyword">private</span> RedisConfig redisConfig;<br><br><span class="hljs-meta">@GetMapping</span><br><span class="hljs-keyword">public</span> Object <span class="hljs-title function_">getConfig</span><span class="hljs-params">()</span> {<br> <span class="hljs-keyword">return</span> redisConfig;<br>}<br></code></pre></td></tr></table></figure></li></ul><h5 id="自定义配置文件"><a href="#自定义配置文件" class="headerlink" title="自定义配置文件"></a>自定义配置文件</h5><ul><li><p>在resources下新建drew.properties配置文件</p><figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">drew.username</span>=<span class="hljs-string">Andrew</span><br><span class="hljs-attr">drew.nickname</span>=<span class="hljs-string">Drew</span><br></code></pre></td></tr></table></figure></li><li><p>新建配置类</p><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@Data</span><br><span class="hljs-meta">@Configuration</span><br><span class="hljs-meta">@ConfigurationProperties(prefix = "drew")</span><br><span class="hljs-meta">@PropertySource("classpath:drew.properties")</span><br><span class="hljs-meta">@Component</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">DrewConfig</span> {<br><br> <span class="hljs-keyword">private</span> String username;<br> <span class="hljs-keyword">private</span> String nickname;<br><br>}<br><span class="hljs-comment">//二选一</span><br><span class="hljs-comment">//①可以直接添加@Component--@Component被用在要被自动扫描和装配的类上</span><br><span class="hljs-comment">//②或者在启动类添加@EnableConfigurationProperties(DrewConfig.class)</span><br></code></pre></td></tr></table></figure></li><li><p>在代码中引用</p><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><br><span class="hljs-meta">@Autowired</span><br><span class="hljs-keyword">private</span> DrewConfig drewConfig;<br><br><span class="hljs-meta">@GetMapping("/drew")</span><br><span class="hljs-keyword">public</span> Object <span class="hljs-title function_">getRedisConfig</span><span class="hljs-params">()</span> {<br> <span class="hljs-type">DrewConfig</span> <span class="hljs-variable">config</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">DrewConfig</span>();<br> BeanUtils.copyProperties(drewConfig, config);<br> <span class="hljs-keyword">return</span> config;<br>}<br></code></pre></td></tr></table></figure></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
</tags>
</entry>
<entry>
<title>mybatis中使用mysql函数实现子集查询</title>
<link href="/2019/04/29/mybatis%E4%B8%AD%E4%BD%BF%E7%94%A8mysql%E5%87%BD%E6%95%B0%E5%AE%9E%E7%8E%B0%E5%AD%90%E9%9B%86%E6%9F%A5%E8%AF%A2/"/>
<url>/2019/04/29/mybatis%E4%B8%AD%E4%BD%BF%E7%94%A8mysql%E5%87%BD%E6%95%B0%E5%AE%9E%E7%8E%B0%E5%AD%90%E9%9B%86%E6%9F%A5%E8%AF%A2/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/annie-spratt.jpg"></p><ul><li>实现效果<br> 存在树形分类的项目中,点击左侧的树形分类,会查询出父类和父类所有子类的包含的结果集,之前的项目都是在service层<br> 去做数据查询封装,用mysql函数会大大提升查询效率</li></ul><span id="more"></span><ul><li><p>分类表设计(主要字段)</p><ul><li>id(主键)</li><li>parentId(父级分类id,一级分类约定为0)</li></ul></li><li><p>查询传值</p><ul><li>查询传值parentCategoryId(实际值为分类id,参数名为parentCategoryId)</li></ul></li><li><p>xml查询语句处理</p> <figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">if</span> <span class="hljs-attr">test</span>=<span class="hljs-string">"parentCategoryId!=null"</span>></span>And FIND_IN_SET(categoryId,getQuestionCategoryChildLst(#{parentCategoryId}))<br><span class="hljs-tag"></<span class="hljs-name">if</span>></span><br></code></pre></td></tr></table></figure><ul><li>FIND_IN_SET(needle,haystack)<ul><li>第一个参数needle是要查找的字符串</li><li>第二个参数haystack是要搜索的逗号分隔的字符串列表</li></ul></li><li>FIND_IN_SET()函数根据参数的值返回一个整数或一个NULL值<ul><li>如果needle或haystack为NULL,则函数返回NULL值</li><li>如果needle不在haystack中,或者haystack是空字符串,则返回零</li><li>如果needle在haystack中,则返回一个正整数</li></ul></li><li>getQuestionCategoryChildLst()函数会返回它的子类的所有categoryId的字符串如:(“1,2,3,4”),最终实现的效果是<br>只要表中categoryId在这个字符串中则会返回</li></ul></li><li><p>getQuestionCategoryChildLst(int rootId)</p><ul><li>传参int parentCategoryId</li><li>返回值 varchar</li></ul></li></ul><pre><code class="sql"> CREATE DEFINER=`root`@`%` FUNCTION `getCategoryChildLst`(`rootId` int(11)) RETURNS varchar(1000) CHARSET utf8mb4 BEGIN DECLARE sTemp VARCHAR(1000); DECLARE sTempChd VARCHAR(1000); SET sTemp = ''; SET sTempChd =rootId; WHILE sTempChd is not null DO SET sTemp = concat(sTemp,',',sTempChd); SELECT group_concat(id) INTO sTempChd FROM category where FIND_IN_SET(parentId,sTempChd) > 0; END WHILE; RETURN concat(sTemp,','); END</code></pre><ul><li>category分类表</li><li>id 分类表的主键</li><li>parentId 分类表父级分类id</li><li>group_concat(id)<br> 会返回category表中id的字符串如(1,2,3,4…)<blockquote><p><a href="https://www.yiibai.com/mysql/find_in_set.html">MySQL的FIND_IN_SET()函数</a><br><a href="https://www.jianshu.com/p/447eb01eebb2">MySQL的GROUP_CONCAT()函数</a></p></blockquote></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>MySQL</tag>
<tag>Mybatis</tag>
</tags>
</entry>
<entry>
<title>在静态方法中使用自定义配置类</title>
<link href="/2019/04/26/%E5%9C%A8%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95%E4%B8%AD%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E9%85%8D%E7%BD%AE%E7%B1%BB/"/>
<url>/2019/04/26/%E5%9C%A8%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95%E4%B8%AD%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E9%85%8D%E7%BD%AE%E7%B1%BB/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/evie-shaffer.jpg"><br><em>已使用阿里云短信服务为例</em></p><span id="more"></span><ul><li>添加pom文件 <figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>com.aliyun<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>aliyun-java-sdk-core<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">version</span>></span>4.1.0<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure></li><li>添加配置项 <figure class="highlight yaml"><table><tr><td class="gutter"><pre><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><code class="hljs yaml"><span class="hljs-attr">alisms:</span><br> <span class="hljs-attr">REGION_ID:</span> <span class="hljs-string">cn-hangzhou</span><br> <span class="hljs-attr">ACCESS_KEY:</span> <span class="hljs-string">**************</span><br> <span class="hljs-attr">SECRET:</span> <span class="hljs-string">***************</span><br></code></pre></td></tr></table></figure></li><li>编写配置类 <figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@Data</span><br><span class="hljs-meta">@ConfigurationProperties(prefix = "alisms")</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">AliyunSmsConfig</span> {<br><br> <span class="hljs-keyword">private</span> String region_id;<br><br> <span class="hljs-keyword">private</span> String access_key;<br><br> <span class="hljs-keyword">private</span> String secret;<br><br>}<br></code></pre></td></tr></table></figure></li><li>创建方法类 <figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Configuration</span><br><span class="hljs-meta">@EnableConfigurationProperties(AliyunSmsConfig.class)</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">AliyunSendSms</span> {<br><br> <span class="hljs-meta">@Autowired</span><br> <span class="hljs-keyword">private</span> AliyunSmsConfig smsConfig;<br><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> AliyunSendSms infoUtil;<br><br> <span class="hljs-meta">@PostConstruct</span><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">init</span><span class="hljs-params">()</span> {<br> infoUtil = <span class="hljs-built_in">this</span>;<br> }<br><br><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">sendSms</span><span class="hljs-params">(String phone, String sign, String template, String param)</span> {<br> <span class="hljs-type">DefaultProfile</span> <span class="hljs-variable">profile</span> <span class="hljs-operator">=</span> DefaultProfile.getProfile(infoUtil.smsConfig.getRegion_id(), infoUtil.smsConfig.getAccess_key(), infoUtil.smsConfig.getSecret());<br> <span class="hljs-type">IAcsClient</span> <span class="hljs-variable">client</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">DefaultAcsClient</span>(profile);<br><br> <span class="hljs-type">CommonRequest</span> <span class="hljs-variable">request</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">CommonRequest</span>();<br> request.setMethod(MethodType.POST);<br> request.setDomain(<span class="hljs-string">"dysmsapi.aliyuncs.com"</span>);<br> request.setVersion(<span class="hljs-string">"2017-05-25"</span>);<br> request.setAction(<span class="hljs-string">"SendSms"</span>);<br> request.putQueryParameter(<span class="hljs-string">"PhoneNumbers"</span>, phone);<br> request.putQueryParameter(<span class="hljs-string">"SignName"</span>, sign);<br> request.putQueryParameter(<span class="hljs-string">"TemplateCode"</span>, template);<br> request.putQueryParameter(<span class="hljs-string">"TemplateParam"</span>, param);<br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-type">CommonResponse</span> <span class="hljs-variable">response</span> <span class="hljs-operator">=</span> client.getCommonResponse(request);<br> System.out.println(response.getData());<br> } <span class="hljs-keyword">catch</span> (ServerException e) {<br> e.printStackTrace();<br> } <span class="hljs-keyword">catch</span> (ClientException e) {<br> e.printStackTrace();<br> }<br> }<br><br>}<br></code></pre></td></tr></table></figure> <strong>主要是@PostConstruct注解的使用</strong></li><li>@PostConstruct注解介绍<br> <a href="https://blog.csdn.net/wo541075754/article/details/52174900">注解@PostConstruct与@PreDestroy详解及实例</a><blockquote><p>PostConstruct 注释用于在依赖关系注入完成之后需要执行的方法上,以执行任何初始化。此方法必须在将类放入服务之前调用。支持依赖关系注入的所有类都必须支持此注释。即使类没有请求注入任何资源,用 PostConstruct 注释的方法也必须被调用。只有一个方法可以用此注释进行注释。应用 PostConstruct 注释的方法必须遵守以下所有标准:该方法不得有任何参数,除非是在 EJB 拦截器 (interceptor) 的情况下,根据 EJB 规范的定义,在这种情况下它将带有一个 InvocationContext 对象 ;该方法的返回类型必须为 void;该方法不得抛出已检查异常;应用 PostConstruct 的方法可以是 public、protected、package private 或 private;除了应用程序客户端之外,该方法不能是 static;该方法可以是 final;如果该方法抛出未检查异常,那么不得将类放入服务中,除非是能够处理异常并可从中恢复的 EJB。</p></blockquote></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
<tag>Java</tag>
</tags>
</entry>
<entry>
<title>Game of Thrones (season 8)</title>
<link href="/2019/04/12/Game-of-Thrones-season-8/"/>
<url>/2019/04/12/Game-of-Thrones-season-8/</url>
<content type="html"><![CDATA[<hr><p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/power.jpg" alt="明日回归" title="明日回归"></p><hr>]]></content>
<categories>
<category>剧集</category>
</categories>
<tags>
<tag>drew life</tag>
</tags>
</entry>
<entry>
<title>spring-boot Excel map数据的导入导出</title>
<link href="/2019/02/20/spring-boot-Excel-map%E6%95%B0%E6%8D%AE%E7%9A%84%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA/"/>
<url>/2019/02/20/spring-boot-Excel-map%E6%95%B0%E6%8D%AE%E7%9A%84%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/hands.jpg"></p><h5 id="引入依赖"><a href="#引入依赖" class="headerlink" title="引入依赖"></a>引入依赖</h5><span id="more"></span><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>cn.afterturn<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>easypoi-base<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>3.2.0<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>cn.afterturn<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>easypoi-web<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>3.2.0<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>cn.afterturn<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>easypoi-annotation<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>3.2.0<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure><h5 id="导出-构建导出的对象"><a href="#导出-构建导出的对象" class="headerlink" title="导出 构建导出的对象"></a>导出 构建导出的对象</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java">List<ExcelExportEntity> entity = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span><ExcelExportEntity>();<br><span class="hljs-comment">//构造对象等同于@Excel</span><br><span class="hljs-type">ExcelExportEntity</span> <span class="hljs-variable">excelentity</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">ExcelExportEntity</span>(<span class="hljs-string">"学号"</span>, <span class="hljs-string">"card"</span>);<br><span class="hljs-comment">//设置不需要合并</span><br>excelentity.setNeedMerge(<span class="hljs-literal">false</span>);<br>excelentity.setWidth(<span class="hljs-number">20</span>);<br>entity.add(excelentity);<br><span class="hljs-comment">//一个excelentity代表一列 可以添加多个 </span><br><span class="hljs-comment">// 还可在一个excelentity嵌套一个excelentity(实现表格嵌套)</span><br><br><span class="hljs-comment">//填充数据</span><br>List<Map<String, Object>> list = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span><Map<String, Object>>();<br><span class="hljs-comment">//从数据库获得cardList 循环插入</span><br><span class="hljs-keyword">for</span> (String card : cardIdList) {<br> <span class="hljs-comment">//写入卡号</span><br> Map<String, Object> map = <span class="hljs-keyword">new</span> <span class="hljs-title class_">HashMap</span><>();<br> map.put(<span class="hljs-string">"cardId"</span>, cardId);<br> list.add(map);<br>}<br><br><span class="hljs-comment">//把我们构造好的bean对象放到params就可以了</span><br><span class="hljs-type">Workbook</span> <span class="hljs-variable">workbook</span> <span class="hljs-operator">=</span> ExcelExportUtil.exportExcel(<span class="hljs-keyword">new</span> <span class="hljs-title class_">ExportParams</span>(<span class="hljs-string">"表标题"</span>, <span class="hljs-string">"sheet1"</span>), entity, list);<br><span class="hljs-type">String</span> <span class="hljs-variable">fileName</span> <span class="hljs-operator">=</span> <span class="hljs-string">"学号表.xls"</span>;<br><span class="hljs-type">FileOutputStream</span> <span class="hljs-variable">fos</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">FileOutputStream</span>(fileName);<br>workbook.write(fos);<br>fos.close();<br><span class="hljs-comment">//此函数主要实现可以在浏览器中实现弹出下载(可感知)</span><br><span class="hljs-built_in">this</span>.buildExcelDocument(fileName, workbook, response);<br></code></pre></td></tr></table></figure><ul><li>buildExcelDocument函数<figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">buildExcelDocument</span><span class="hljs-params">(String filename, Workbook workbook, HttpServletResponse response)</span> <span class="hljs-keyword">throws</span> Exception{<br> response.setContentType(<span class="hljs-string">"application/vnd.ms-excel"</span>);<br> response.setHeader(<span class="hljs-string">"Content-Disposition"</span>, <span class="hljs-string">"attachment;filename="</span>+ URLEncoder.encode(filename, <span class="hljs-string">"utf-8"</span>));<br> <span class="hljs-type">OutputStream</span> <span class="hljs-variable">outputStream</span> <span class="hljs-operator">=</span> response.getOutputStream();<br> workbook.write(outputStream);<br> outputStream.flush();<br> outputStream.close();<br>}<br></code></pre></td></tr></table></figure></li></ul><h5 id="map导入"><a href="#map导入" class="headerlink" title="map导入"></a>map导入</h5><ul><li>将MultipartFile 转成 File<figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-comment">// input 上传文件一般是将MultipartFile 而处理上传文件需要的是File格式 </span><br><span class="hljs-keyword">private</span> File <span class="hljs-title function_">convertFile</span><span class="hljs-params">(MultipartFile file)</span><br> {<br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-type">File</span> <span class="hljs-variable">convFile</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">File</span>(file.getOriginalFilename());<br> convFile.createNewFile();<br> <span class="hljs-type">FileOutputStream</span> <span class="hljs-variable">fos</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">FileOutputStream</span>(convFile);<br> fos.write(file.getBytes());<br> fos.close();<br> <span class="hljs-keyword">return</span> convFile;<br> } <span class="hljs-keyword">catch</span> (Exception e) {<br> <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">RequestException</span>(e.getMessage());<br> }<br> }<br></code></pre></td></tr></table></figure></li><li>获得上传数据<figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java">List<Map<String, Object>> list = ExcelImportUtil.importExcel(convertFile(multipartFile), Map.class, params);<br><span class="hljs-comment">//遍历数据</span><br><span class="hljs-keyword">for</span> (Map<String, Object> map : list) {<br> <span class="hljs-comment">//遍历map</span><br> Set<Map.Entry<String, Object>> entries = map.entrySet();<br> <span class="hljs-keyword">for</span> (Map.Entry<String, Object> entry : entries) {<br> <span class="hljs-comment">// map key value</span><br> System.out.println(entry.getKey()+<span class="hljs-string">":"</span>+entry.getValue());<br> <span class="hljs-comment">//将数据添加至数据库</span><br> }<br> }<br></code></pre></td></tr></table></figure></li></ul><blockquote><p>使用<a href="http://easypoi.mydoc.io/">EasyPoi</a>插件</p></blockquote>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
</tags>
</entry>
<entry>
<title>docker swarm 集群部署wordpress</title>
<link href="/2018/12/27/docker-swarm-%E9%9B%86%E7%BE%A4%E9%83%A8%E7%BD%B2wordpress/"/>
<url>/2018/12/27/docker-swarm-%E9%9B%86%E7%BE%A4%E9%83%A8%E7%BD%B2wordpress/</url>
<content type="html"><![CDATA[<p><img src="http://drewlife.oss-cn-shanghai.aliyuncs.com/%E7%91%9E%E7%A7%8B.jpg"></p><h5 id="测试环境说明"><a href="#测试环境说明" class="headerlink" title="测试环境说明"></a>测试环境说明</h5><span id="more"></span><p>测试环境基于VirtualBox和Vagrant搭建,可根据如下Vagrantfile文件构建环境</p><ul><li>创建Vagrantfile文件</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><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></pre></td><td class="code"><pre><code class="hljs bash"><br>Vagrant.require_version <span class="hljs-string">">= 1.6.0"</span><br><br>boxes = [<br> {<br> :name => <span class="hljs-string">"swarm-manager"</span>,<br> :eth1 => <span class="hljs-string">"192.168.205.10"</span>,<br> :mem => <span class="hljs-string">"1024"</span>,<br> :cpu => <span class="hljs-string">"1"</span><br> },<br> {<br> :name => <span class="hljs-string">"swarm-worker1"</span>,<br> :eth1 => <span class="hljs-string">"192.168.205.11"</span>,<br> :mem => <span class="hljs-string">"1024"</span>,<br> :cpu => <span class="hljs-string">"1"</span><br> },<br> {<br> :name => <span class="hljs-string">"swarm-worker2"</span>,<br> :eth1 => <span class="hljs-string">"192.168.205.12"</span>,<br> :mem => <span class="hljs-string">"1024"</span>,<br> :cpu => <span class="hljs-string">"1"</span><br> }<br>]<br><br>Vagrant.configure(2) <span class="hljs-keyword">do</span> |config|<br><br> config.vm.box = <span class="hljs-string">"centos/7"</span><br><br> boxes.each <span class="hljs-keyword">do</span> |opts|<br> config.vm.define opts[:name] <span class="hljs-keyword">do</span> |config|<br> config.vm.hostname = opts[:name]<br> config.vm.provider <span class="hljs-string">"vmware_fusion"</span> <span class="hljs-keyword">do</span> |v|<br> v.vmx[<span class="hljs-string">"memsize"</span>] = opts[:mem]<br> v.vmx[<span class="hljs-string">"numvcpus"</span>] = opts[:cpu]<br> end<br><br> config.vm.provider <span class="hljs-string">"virtualbox"</span> <span class="hljs-keyword">do</span> |v|<br> v.customize [<span class="hljs-string">"modifyvm"</span>, :<span class="hljs-built_in">id</span>, <span class="hljs-string">"--memory"</span>, opts[:mem]]<br> v.customize [<span class="hljs-string">"modifyvm"</span>, :<span class="hljs-built_in">id</span>, <span class="hljs-string">"--cpus"</span>, opts[:cpu]]<br> end<br><br> config.vm.network :private_network, ip: opts[:eth1]<br> end<br> end<br><br> config.vm.provision <span class="hljs-string">"shell"</span>, privileged: <span class="hljs-literal">true</span>, path: <span class="hljs-string">"./setup.sh"</span><br><br>end<br></code></pre></td></tr></table></figure><ul><li>setup.sh文件(用于在虚拟机中安装docker环境)</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><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><code class="hljs bash"><br><br><span class="hljs-comment"># install some tools</span><br>sudo yum install -y git vim gcc glibc-static telnet bridge-utils<br><br><span class="hljs-comment"># install docker</span><br>curl -fsSL get.docker.com -o get-docker.sh<br>sh get-docker.sh<br><br><span class="hljs-comment"># start docker service</span><br>sudo groupadd docker<br>sudo gpasswd -a vagrant docker<br>sudo systemctl start docker<br><br><span class="hljs-built_in">rm</span> -rf get-docker.sh<br></code></pre></td></tr></table></figure><ul><li>确保安装VirtualBox和Vagrant,在当前目录下执行vagrant up(可能需要一段时间)</li><li>vagrant status 查看状态<br> 会创建swarm-manager、swarm-worker1、swarm-worker2三个虚拟机</li><li>进入虚拟机</li></ul><figure class="highlight crystal"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs crystal"><span class="hljs-variable">$ </span>vagrant ssh swarm-manager<br></code></pre></td></tr></table></figure><h5 id="创建manager节点"><a href="#创建manager节点" class="headerlink" title="创建manager节点"></a>创建manager节点</h5><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><code class="hljs bash"><span class="hljs-comment"># 进入swarm-manager执行</span><br>$ docker swarm init --advertise-addr=192.168.0.11<br><span class="hljs-comment"># ip换成自己虚拟机的IP 执行 ip a 可查看</span><br></code></pre></td></tr></table></figure><h5 id="创建worker节点"><a href="#创建worker节点" class="headerlink" title="创建worker节点"></a>创建worker节点</h5><ul><li>创建manager节点,之后会输出加入加入manager节点的命令 如:<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-comment"># 分别进入swarm-worker1、swarm-worker2虚拟机执行 注意换成自己的</span><br>$ docker swarm <span class="hljs-built_in">join</span> --token SWMTKN-1-0nr8bllbsbwxp7kbopyfd3zibvs1jpq1f1hskjaektyevs0d87-6nfkla17lljk06nmd8t5vhjdm 192.168.0.11:2377<br></code></pre></td></tr></table></figure></li><li>在manager节点查看节点状态</li></ul><figure class="highlight crmsh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs crmsh">$ docker <span class="hljs-keyword">node</span> <span class="hljs-title">ls</span><br></code></pre></td></tr></table></figure><h5 id="创建overlay网络"><a href="#创建overlay网络" class="headerlink" title="创建overlay网络"></a>创建overlay网络</h5><ul><li>在manager节点执行<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><code class="hljs bash">$ docker network create -d overlay press<br><span class="hljs-comment"># 查看</span><br>$ docker network <span class="hljs-built_in">ls</span><br></code></pre></td></tr></table></figure></li></ul><h5 id="创建mysql-service"><a href="#创建mysql-service" class="headerlink" title="创建mysql service"></a>创建mysql service</h5><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></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-comment"># 在manager节点执行</span><br>$ docker service create --name mysql --<span class="hljs-built_in">env</span> MYSQL_ROOT_PASSWORD=root --<span class="hljs-built_in">env</span> MYSQL_DATABASE=wordpress --network press --mount <span class="hljs-built_in">type</span>=volume,<span class="hljs-built_in">source</span>=mysql-data,destination=/var/lib/mysql mysql:5.7<br><span class="hljs-comment"># --network press 指定为刚才创建的网络</span><br><span class="hljs-comment"># 查看service</span><br>$ docker service <span class="hljs-built_in">ls</span><br><span class="hljs-comment"># 3z8gl8svu4zg mysql replicated 1/1 mysql:5.7</span><br><span class="hljs-comment"># 查看service详情</span><br>$ docker service ps mysql<br><span class="hljs-comment"># 8j5hwwp8j121 mysql.1 mysql:5.7 swarm-worker2 Running Running 2 hours ago</span><br><span class="hljs-comment"># 依据swarm-worker2 可知mysql创建在swarm-worker2节点</span><br><span class="hljs-comment"># 在swarm-worker2节点查看</span><br>$ docker ps<br><span class="hljs-comment"># d8fe5bbb84da mysql:5.7 "docker-entrypoint.s…" 2 hours ago Up 2 hours 3306/tcp, 33060/tcp mysql.1.8j5hwwp8j121atr7ryn53y21h</span><br></code></pre></td></tr></table></figure><h5 id="创建wordpress-service"><a href="#创建wordpress-service" class="headerlink" title="创建wordpress service"></a>创建wordpress service</h5><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><code class="hljs bash"><span class="hljs-comment"># 在manager节点执行</span><br>$ docker service create --name wordpress -p 80:80 --<span class="hljs-built_in">env</span> WORDPRESS_DB_PASSWORD=root --<span class="hljs-built_in">env</span> WORDPRESS_DB_HOST=mysql --network demo wordpress<br><span class="hljs-comment"># docker service ls 查看</span><br></code></pre></td></tr></table></figure><ul><li>创建成功后用三个虚拟机的ip都可以访问,mysql和wordpress service都可以横向扩展<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></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-comment"># 横向扩展wordpress</span><br>$ docker service scale wordpress=5<br><span class="hljs-comment"># 即可将wordpress service增加至5个</span><br>$ docker service <span class="hljs-built_in">ls</span><br><span class="hljs-comment"># 9kab4c4finog wordpress replicated 5/5 wordpress:latest *:80->80/tcp</span><br><span class="hljs-comment"># 可以看到已经增加至5个</span><br>$ docker service ps wordpress<br><span class="hljs-comment"># 可以看到wordpress 分布在不同的节点中</span><br><span class="hljs-comment"># 如果有一个节点服务当掉都会自动重启一个,保持服务总数不变</span><br></code></pre></td></tr></table></figure></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Docker</tag>
<tag>Docker Swarm</tag>
</tags>
</entry>
<entry>
<title>centos用docker-compose部署前後端分離項目</title>
<link href="/2018/12/26/centos%E7%94%A8docker-compose%E9%83%A8%E7%BD%B2%E5%89%8D%E5%BE%8C%E7%AB%AF%E5%88%86%E9%9B%A2%E9%A0%85%E7%9B%AE/"/>
<url>/2018/12/26/centos%E7%94%A8docker-compose%E9%83%A8%E7%BD%B2%E5%89%8D%E5%BE%8C%E7%AB%AF%E5%88%86%E9%9B%A2%E9%A0%85%E7%9B%AE/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/frandmusic.jpg"></p><h5 id="安装docker"><a href="#安装docker" class="headerlink" title="安装docker"></a>安装docker</h5><span id="more"></span><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><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ sudo yum remove docker \<br> docker-client \<br> docker-client-latest \<br> docker-common \<br> docker-latest \<br> docker-latest-logrotate \<br> docker-logrotate \<br> docker-selinux \<br> docker-engine-selinux \<br> docker-engine<br>$ sudo yum install -y yum-utils \<br> device-mapper-persistent-data \<br> lvm2<br>$ sudo yum-config-manager \<br> --add-repo \<br> https://download.docker.com/linux/centos/docker-ce.repo<br>$ sudo yum install docker-ce<br>$ sudo systemctl start docker<br></code></pre></td></tr></table></figure><h5 id="安装docker-compose"><a href="#安装docker-compose" class="headerlink" title="安装docker-compose"></a>安装docker-compose</h5><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><code class="hljs bash">$ sudo curl -L <span class="hljs-string">"https://github.com/docker/compose/releases/download/1.23.1/docker-compose-<span class="hljs-subst">$(uname -s)</span>-<span class="hljs-subst">$(uname -m)</span>"</span> -o /usr/local/bin/docker-compose<br>$ sudo <span class="hljs-built_in">chmod</span> +x /usr/local/bin/docker-compose<br>$ docker-compose --version<br></code></pre></td></tr></table></figure><h5 id="docker-compose-yml配置文件"><a href="#docker-compose-yml配置文件" class="headerlink" title="docker-compose.yml配置文件"></a>docker-compose.yml配置文件</h5> <figure class="highlight yaml"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">DB:</span><br> <span class="hljs-attr">image:</span> <span class="hljs-string">mysql:5.7</span><br> <span class="hljs-attr">ports:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">"3306:3306"</span><br> <span class="hljs-attr">volumes:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./db/my.cnf:/etc/mysql/my.cnf</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./db/data:/var/lib/mysql</span><br> <span class="hljs-attr">environment:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">MYSQL_ROOT_PASSWORD=123456</span><br><span class="hljs-attr">Cache:</span><br> <span class="hljs-attr">image:</span> <span class="hljs-string">redis:3.2</span><br> <span class="hljs-attr">ports:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">"6379:6379"</span><br> <span class="hljs-attr">volumes:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./cache/redis.conf:/usr/local/etc/redis/redis.conf</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./cache/data:/data</span><br> <span class="hljs-attr">command:</span> <span class="hljs-string">redis-server</span> <span class="hljs-string">/usr/local/etc/redis/redis.conf</span> <span class="hljs-string">--appendonly</span> <span class="hljs-literal">yes</span> <span class="hljs-string">--requirepass</span> <span class="hljs-string">mypass</span><br><span class="hljs-attr">Tomcat1:</span><br> <span class="hljs-attr">image:</span> <span class="hljs-string">hub.c.163.com/hcwilliam/tomcat-docker:latest</span><br> <span class="hljs-attr">links:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">Cache:Cache</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">DB:DB</span><br> <span class="hljs-attr">ports:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">"8080:8080"</span><br> <span class="hljs-attr">volumes:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./logs/tomcat1:/opt/tomcat9/logs</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./tomcat-root1:/opt/tomcat9/webapps/ROOT</span><br><span class="hljs-attr">Tomcat2:</span><br> <span class="hljs-attr">image:</span> <span class="hljs-string">hub.c.163.com/hcwilliam/tomcat-docker:latest</span><br> <span class="hljs-attr">links:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">Cache:Cache</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">DB:DB</span><br> <span class="hljs-attr">ports:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">"8081:8080"</span><br> <span class="hljs-attr">volumes:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./logs/tomcat2:/opt/tomcat9/logs</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./tomcat-root2:/opt/tomcat9/webapps/ROOT</span><br><span class="hljs-attr">Web:</span><br> <span class="hljs-attr">image:</span> <span class="hljs-string">docker.io/nginx:latest</span><br> <span class="hljs-attr">links:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">Cache:Cache</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">Tomcat1:Tomcat1</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">Tomcat2:Tomcat2</span><br> <span class="hljs-attr">ports:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">"80:80"</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">"443:443"</span><br> <span class="hljs-attr">volumes:</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./conf:/etc/nginx/conf.d</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./cert:/etc/nginx/cert/</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./logs/nginx:/etc/nginx/logs/</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./nginx-root:/opt/nginx-root</span><br> <span class="hljs-bullet">-</span> <span class="hljs-string">./nginx.conf:/etc/nginx/nginx.conf</span><br></code></pre></td></tr></table></figure><h5 id="两个nginx配置文件"><a href="#两个nginx配置文件" class="headerlink" title="两个nginx配置文件"></a>两个nginx配置文件</h5><ul><li>./conf下的web.conf配置文件,配置443.端口代理<figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-attr">server</span> <span class="hljs-string">{</span><br> <span class="hljs-attr">listen</span> <span class="hljs-string">80;</span><br> <span class="hljs-attr">server_name</span> <span class="hljs-string">sales.bebeplus.cn;</span><br> <span class="hljs-attr">rewrite</span> <span class="hljs-string">^(.*)$ https://${server_name}$1 permanent;</span><br> <span class="hljs-attr">}</span><br><span class="hljs-attr">server</span> <span class="hljs-string">{</span><br> <span class="hljs-attr">listen</span> <span class="hljs-string">443;</span><br> <span class="hljs-attr">server_name</span> <span class="hljs-string">sales.bebeplus.cn;</span><br> <span class="hljs-attr">ssl</span> <span class="hljs-string">on;</span><br> <span class="hljs-attr">ssl_certificate</span> <span class="hljs-string">/etc/nginx/cert/1660878_xxxxxxxx.pem;</span><br> <span class="hljs-attr">ssl_certificate_key</span> <span class="hljs-string">/etc/nginx/cert/1660878_xxxxxx.key;</span><br> <span class="hljs-attr">ssl_session_timeout</span> <span class="hljs-string">5m;</span><br> <span class="hljs-attr">ssl_ciphers</span> <span class="hljs-string">ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;</span><br> <span class="hljs-attr">ssl_protocols</span> <span class="hljs-string">TLSv1 TLSv1.1 TLSv1.2;</span><br> <span class="hljs-attr">ssl_prefer_server_ciphers</span> <span class="hljs-string">on;</span><br><br> <span class="hljs-attr">location</span> <span class="hljs-string">/{</span><br> <span class="hljs-attr">root</span> <span class="hljs-string">/opt/nginx-root;</span><br> <span class="hljs-attr">index</span> <span class="hljs-string">index.html index.htm index.php;</span><br> <span class="hljs-attr">}</span><br> <span class="hljs-attr">location</span> <span class="hljs-string">/api {</span><br> <span class="hljs-attr">proxy_pass</span> <span class="hljs-string">http://multi-web/api;</span><br> <span class="hljs-attr">}</span><br> <span class="hljs-attr">}</span><br></code></pre></td></tr></table></figure></li><li>./nginx.conf,配置负载均衡<figure class="highlight properties"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">worker_processes</span> <span class="hljs-string">4;</span><br><span class="hljs-attr">worker_rlimit_nofile</span> <span class="hljs-string">65535;</span><br><span class="hljs-attr">user</span> <span class="hljs-string">root root;</span><br><br><span class="hljs-attr">events</span> <span class="hljs-string">{</span><br> <span class="hljs-attr">use</span> <span class="hljs-string">epoll;</span><br> <span class="hljs-attr">worker_connections</span> <span class="hljs-string">65535;</span><br><span class="hljs-attr">}</span><br><span class="hljs-attr">http</span> <span class="hljs-string">{</span><br> <span class="hljs-attr">include</span> <span class="hljs-string">mime.types;</span><br> <span class="hljs-attr">default_type</span> <span class="hljs-string">application/octet-stream;</span><br> <span class="hljs-attr">server_tokens</span> <span class="hljs-string">off;</span><br><br> <span class="hljs-attr">log_format</span> <span class="hljs-string">main '$remote_addr - $remote_user [$time_local] "$request" '</span><br> <span class="hljs-attr">'$status</span> <span class="hljs-string">$body_bytes_sent "$http_referer" '</span><br> <span class="hljs-attr">'"$http_user_agent"</span> <span class="hljs-string">"$http_x_forwarded_for"';</span><br><br> <span class="hljs-attr">access_log</span> <span class="hljs-string">logs/access.log main;</span><br><br> <span class="hljs-attr">sendfile</span> <span class="hljs-string">on;</span><br> <span class="hljs-attr">keepalive_timeout</span> <span class="hljs-string">60;</span><br> <span class="hljs-attr">client_header_buffer_size</span> <span class="hljs-string">128k;</span><br> <span class="hljs-attr">large_client_header_buffers</span> <span class="hljs-string">4 128k;</span><br> <span class="hljs-attr">fastcgi_intercept_errors</span> <span class="hljs-string">on;</span><br> <span class="hljs-attr">client_max_body_size</span> <span class="hljs-string">1024m;</span><br><span class="hljs-comment"> #proxy_send_timeout 7200;</span><br> <span class="hljs-attr">proxy_read_timeout</span> <span class="hljs-string">7200;</span><br> <span class="hljs-attr">upstream</span> <span class="hljs-string">multi-web {</span><br> <span class="hljs-attr">hash</span> <span class="hljs-string">$request_uri;</span><br> <span class="hljs-attr">server</span> <span class="hljs-string">Tomcat1:8080 weight=4; #tomcat 1</span><br> <span class="hljs-attr">server</span> <span class="hljs-string">Tomcat2:8080 weight=4; #tomcat 2</span><br> <span class="hljs-attr">}</span><br> <span class="hljs-attr">include</span> <span class="hljs-string">conf.d/*.conf;</span><br> <span class="hljs-attr">server</span> <span class="hljs-string">{</span><br> <span class="hljs-attr">server_name</span> <span class="hljs-string">_;</span><br> <span class="hljs-attr">return</span> <span class="hljs-string">404;</span><br><span class="hljs-comment"> #access_log on;</span><br> <span class="hljs-attr">}</span><br> <span class="hljs-attr">}</span><br></code></pre></td></tr></table></figure></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Docker</tag>
<tag>Docker Compose</tag>
</tags>
</entry>
<entry>
<title>爬蟲框架Scrapy的學習--爬取豆瓣電影排行榜</title>
<link href="/2018/10/16/%E7%88%AC%E8%9F%B2%E6%A1%86%E6%9E%B6Scrapy%E7%9A%84%E5%AD%B8%E7%BF%92-%E7%88%AC%E5%8F%96%E8%B1%86%E7%93%A3%E9%9B%BB%E5%BD%B1%E6%8E%92%E8%A1%8C%E6%A6%9C/"/>
<url>/2018/10/16/%E7%88%AC%E8%9F%B2%E6%A1%86%E6%9E%B6Scrapy%E7%9A%84%E5%AD%B8%E7%BF%92-%E7%88%AC%E5%8F%96%E8%B1%86%E7%93%A3%E9%9B%BB%E5%BD%B1%E6%8E%92%E8%A1%8C%E6%A6%9C/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/lishangan.jpg"></p><h5 id="运行环境准备(Windows-10)"><a href="#运行环境准备(Windows-10)" class="headerlink" title="运行环境准备(Windows 10)"></a>运行环境准备(Windows 10)</h5><span id="more"></span><ul><li>安装python环境,直接在python.org官网下载相应的版本,注意安装时勾选安装pip选项,勾选添加环境变量</li><li>环境校验 在cmd中执行</li></ul><figure class="highlight livescript"><table><tr><td class="gutter"><pre><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><code class="hljs livescript"><span class="hljs-comment"># λ 是我本地cmd标识</span><br>λ python -V<br>Python <span class="hljs-number">3.7</span>.<span class="hljs-number">0</span><br><span class="hljs-comment"># 如果安装的是python 2.x版本 执行 pip -V, </span><br><span class="hljs-comment"># python 3.x 执行 pip3 -V</span><br>λ pip3 -V<br>pip <span class="hljs-number">18.1</span> <span class="hljs-keyword">from</span> f:<span class="hljs-string">\python\lib\site-packages\pip</span> (python <span class="hljs-number">3.7</span>)<br><span class="hljs-comment"># 若不能正常返回 首先检验是否添加了环境变量,确保安装时勾选pip模块</span><br></code></pre></td></tr></table></figure><ul><li>安装scrapy框架</li></ul><figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs cmake">pip3 <span class="hljs-keyword">install</span> scrapy<br></code></pre></td></tr></table></figure><ul><li>如果报 Microsoft Visual C++ 14.0 is required 安装错误</li></ul><ol><li>到<a href="https://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted">teisted</a>网站下载自己相应版本的whl文件<br>cp后面是python版本,amd64代表64位,注意自己安装的python是32位的还是64位的</li><li>cmd切换到下载的whl文件目录执行<figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">pip3</span> <span class="hljs-string">install Twisted‑18.9.0‑cp37‑cp37m‑win32.whl</span><br></code></pre></td></tr></table></figure></li><li>再次执行 pip3 install scrapy</li></ol><ul><li>查看scrapy安装是否正常<figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">λ</span> <span class="hljs-string">scrapy -V</span><br><span class="hljs-attr">Scrapy</span> <span class="hljs-string">1.5.1 - no active project</span><br></code></pre></td></tr></table></figure></li></ul><h5 id="创建项目"><a href="#创建项目" class="headerlink" title="创建项目"></a>创建项目</h5><figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-attr">scrapy</span> <span class="hljs-string">startproject douban</span><br><span class="hljs-comment"># cmd进入spriders目录生成spider文件</span><br><span class="hljs-attr">scrapy</span> <span class="hljs-string">genspider douban_spider movie.douban.com</span><br><span class="hljs-comment"># movie.douban.com 是要抓取网站的域名</span><br></code></pre></td></tr></table></figure><h5 id="定义抓取目标"><a href="#定义抓取目标" class="headerlink" title="定义抓取目标"></a>定义抓取目标</h5><p>在items.py中定义一下内容</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><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><code class="hljs py"><span class="hljs-keyword">class</span> <span class="hljs-title class_">DoubanItem</span>(scrapy.Item):<br> <span class="hljs-comment"># define the fields for your item here like:</span><br> <span class="hljs-comment"># name = scrapy.Field()</span><br> <span class="hljs-comment"># 序号</span><br> serial_number = scrapy.Field()<br> <span class="hljs-comment"># 电影名称</span><br> movie_name = scrapy.Field()<br> <span class="hljs-comment"># 電影介紹</span><br> introduce = scrapy.Field()<br> <span class="hljs-comment"># 星级</span><br> star = scrapy.Field()<br> <span class="hljs-comment"># 评论数</span><br> evaluate = scrapy.Field()<br> <span class="hljs-comment"># 电影描述</span><br> describe = scrapy.Field()<br> <span class="hljs-keyword">pass</span><br></code></pre></td></tr></table></figure><h5 id="爬虫文件的编写-douban-spider-py"><a href="#爬虫文件的编写-douban-spider-py" class="headerlink" title="爬虫文件的编写 douban_spider.py"></a>爬虫文件的编写 douban_spider.py</h5><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><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></pre></td><td class="code"><pre><code class="hljs py"><span class="hljs-comment"># -*- coding: utf-8 -*-</span><br><span class="hljs-keyword">import</span> scrapy<br><span class="hljs-keyword">from</span> douban.items <span class="hljs-keyword">import</span> DoubanItem<br><br><span class="hljs-comment"># 注意头部引用定义的item</span><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">DoubanSpiderSpider</span>(scrapy.Spider):<br> <span class="hljs-comment"># 爬虫名</span><br> name = <span class="hljs-string">'douban_spider'</span><br> <span class="hljs-comment"># 允许的域名</span><br> allowed_domains = [<span class="hljs-string">'movie.douban.com'</span>]<br> <span class="hljs-comment"># 入口url</span><br> start_urls = [<span class="hljs-string">'https://movie.douban.com/top250'</span>]<br><br><br> <span class="hljs-comment"># 默认的解析方法</span><br> <span class="hljs-comment"># 其中最主要的是xapth规则</span><br> <span class="hljs-keyword">def</span> <span class="hljs-title function_">parse</span>(<span class="hljs-params">self, response</span>):<br> move_list = response.xpath(<span class="hljs-string">"//div[@class='article']//ol[@class='grid_view']//li"</span>)<br> <span class="hljs-keyword">for</span> i_item <span class="hljs-keyword">in</span> move_list:<br> douban_item = DoubanItem()<br> douban_item[<span class="hljs-string">'serial_number'</span>] = i_item.xpath(<span class="hljs-string">".//div[@class='item']//em/text()"</span>).extract_first()<br> <span class="hljs-comment"># extract_first() 拿到第一个数据</span><br> <span class="hljs-comment"># 注意循环内的xpath规则头部的 . ,他表示此xapth规则会拼接在循环外的xpath规则之后</span><br> douban_item[<span class="hljs-string">'movie_name'</span>] = i_item.xpath(<span class="hljs-string">".//div[@class='info']//div[@class='hd']//a//span[1]/text()"</span>).extract_first()<br> content = i_item.xpath(<span class="hljs-string">".//div[@class='info']//div[@class='bd']//p[1]/text()"</span>).extract()<br> <span class="hljs-comment"># 拿到的数据带有空格和换行,处理掉这些空格</span><br> <span class="hljs-keyword">for</span> i_content <span class="hljs-keyword">in</span> content:<br> content_s = <span class="hljs-string">""</span>.join(i_content.split())<br> douban_item[<span class="hljs-string">'introduce'</span>] = content_s<br> douban_item[<span class="hljs-string">'star'</span>] = i_item.xpath(<span class="hljs-string">".//span[@class='rating_num']//text()"</span>).extract_first()<br> douban_item[<span class="hljs-string">'evaluate'</span>] = i_item.xpath(<span class="hljs-string">".//div[@class='star']//span[4]/text()"</span>).extract_first()<br> douban_item[<span class="hljs-string">'describe'</span>] = i_item.xpath(<span class="hljs-string">".//p[@class='quote']//span/text()"</span>).extract_first()<br> <span class="hljs-keyword">yield</span> douban_item<br> <span class="hljs-comment"># 解析下一页规则</span><br> next_link = response.xpath(<span class="hljs-string">"//span[@class='next']/link/@href"</span>).extract()<br> <span class="hljs-keyword">if</span> next_link:<br> next_link = next_link[<span class="hljs-number">0</span>]<br> <span class="hljs-keyword">yield</span> scrapy.Request(<span class="hljs-string">"https://movie.douban.com/top250"</span> + next_link,callback=self.parse)<br><br></code></pre></td></tr></table></figure><h5 id="user-agent设置"><a href="#user-agent设置" class="headerlink" title="user-agent设置"></a>user-agent设置</h5><figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-comment"># seetings.py中打开注释 设置user-agent</span><br><span class="hljs-attr">USER_AGENT</span> = <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36'</span><br></code></pre></td></tr></table></figure><h5 id="创建执行文件"><a href="#创建执行文件" class="headerlink" title="创建执行文件"></a>创建执行文件</h5><p>在seetings.py同级目录下创建mian.py文件</p><figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">from</span> <span class="hljs-string">scrapy import cmdline</span><br><span class="hljs-attr">cmdline.execute('scrapy</span> <span class="hljs-string">crawl douban_spider'.split())</span><br></code></pre></td></tr></table></figure><h5 id="执行爬虫项目"><a href="#执行爬虫项目" class="headerlink" title="执行爬虫项目"></a>执行爬虫项目</h5><ul><li><p>直接执行mian.py文件</p></li><li><p>在cmd执行</p></li></ul><figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-attr">scrapy</span> <span class="hljs-string">crawl douabn_spider</span><br><span class="hljs-comment"># 正常会输出爬虫信息和解析后的爬去文件 如:</span><br><span class="hljs-attr">...</span><br><span class="hljs-attr">2018-10-16</span> <span class="hljs-string">14:29:53 [scrapy.core.scraper] DEBUG: Scraped from <200 https://movie.douban.com/top250?start=225&filter=></span><br><span class="hljs-attr">{'describe'</span>: <span class="hljs-string">'青春的窃窃私语。 ',</span><br> <span class="hljs-attr">'evaluate'</span>: <span class="hljs-string">'292506人评价',</span><br> <span class="hljs-attr">'introduce'</span>: <span class="hljs-string">'2002/台湾法国/剧情爱情同性',</span><br> <span class="hljs-attr">'movie_name'</span>: <span class="hljs-string">'蓝色大门',</span><br> <span class="hljs-attr">'serial_number'</span>: <span class="hljs-string">'250',</span><br> <span class="hljs-attr">'star'</span>: <span class="hljs-string">'8.3'}</span><br><span class="hljs-attr">2018-10-16</span> <span class="hljs-string">14:29:53 [scrapy.core.engine] INFO: Closing spider (finished)</span><br><span class="hljs-attr">...</span><br><br></code></pre></td></tr></table></figure><h5 id="数据导出"><a href="#数据导出" class="headerlink" title="数据导出"></a>数据导出</h5><figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-comment">#在cmd执行 注意一定要在项目目录</span><br><span class="hljs-attr">scrapy</span> <span class="hljs-string">crawl douabn_spider -o douban.json</span><br><span class="hljs-attr">scrapy</span> <span class="hljs-string">crawl douabn_spider -o douban.csv</span><br><span class="hljs-comment">#csv格式打开可能出现乱码,可先用编辑器打开将编码格式改为UTF-8-BOM</span><br></code></pre></td></tr></table></figure><h5 id="保存到MongoDB中"><a href="#保存到MongoDB中" class="headerlink" title="保存到MongoDB中"></a>保存到MongoDB中</h5><ul><li><p>在seetings.py中定义数据库连接变量</p><figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-attr">mongo_host</span> = <span class="hljs-string">'127.0.0.1'</span><br><span class="hljs-attr">mongoo_port</span> = <span class="hljs-string">27017</span><br><span class="hljs-attr">mongo_db_name</span> = <span class="hljs-string">'douban'</span><br><span class="hljs-attr">mongo_db_collection</span> = <span class="hljs-string">'douban_movie'</span><br></code></pre></td></tr></table></figure></li><li><p>在pipelines.py中编写导入代码</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><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><code class="hljs py"><span class="hljs-comment"># -*- coding: utf-8 -*-</span><br><span class="hljs-keyword">import</span> pymongo<br><span class="hljs-keyword">from</span> douban.settings <span class="hljs-keyword">import</span> mongo_host,mongo_db_name,mongoo_port,mongo_db_collection<br><span class="hljs-comment">#导入定义的数据库连接变量</span><br><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">DoubanPipeline</span>(<span class="hljs-title class_ inherited__">object</span>):<br> <span class="hljs-keyword">def</span> <span class="hljs-title function_">__init__</span>(<span class="hljs-params">self</span>):<br> host = mongo_host<br> port = mongoo_port<br> dbname = mongo_db_name<br> sheetname = mongo_db_collection<br> client = pymongo.MongoClient(host=host,port=port)<br> mydb = client[dbname]<br> self.post=mydb[sheetname]<br><br> <span class="hljs-keyword">def</span> <span class="hljs-title function_">process_item</span>(<span class="hljs-params">self, item, spider</span>):<br> data = <span class="hljs-built_in">dict</span>(item)<br> self.post.insert(data)<br> <span class="hljs-keyword">return</span> item<br> <br><span class="hljs-comment"># 环境中pymongo不存在时安装即可 pip3 install pymongo</span><br></code></pre></td></tr></table></figure></li><li><p>在seetings.py中开启pipelines</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><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs py"><span class="hljs-comment"># 只有开启此选项数据才会保存到数据库</span><br>ITEM_PIPELINES = {<br> <span class="hljs-string">'douban.pipelines.DoubanPipeline'</span>: <span class="hljs-number">300</span>,<br>}<br></code></pre></td></tr></table></figure></li></ul><h5 id="保存到mysql中"><a href="#保存到mysql中" class="headerlink" title="保存到mysql中"></a>保存到mysql中</h5><ul><li>在seetings.py中定义数据库连接变量<figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-attr">mysql_host</span> = <span class="hljs-string">'127.0.0.1'</span><br><span class="hljs-attr">mysql_port</span> = <span class="hljs-string">3306</span><br><span class="hljs-attr">mysql_db_name</span> = <span class="hljs-string">'douban'</span><br><span class="hljs-attr">mysql_user</span> = <span class="hljs-string">'root'</span><br><span class="hljs-attr">mysql_passwd</span> = <span class="hljs-string">'root'</span><br><br></code></pre></td></tr></table></figure></li><li>在pipelines.py中编写导入代码<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><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></pre></td><td class="code"><pre><code class="hljs py"><span class="hljs-keyword">import</span> pymysql.cursors<br><span class="hljs-keyword">from</span> douban.settings <span class="hljs-keyword">import</span> mysql_db_name,mysql_host,mysql_passwd,mysql_port,mysql_user<br><span class="hljs-comment"># pymysql 模块不存在安装即可 pip3 install pymysql</span><br><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">MysqlPipeline</span>(<span class="hljs-title class_ inherited__">object</span>):<br> <span class="hljs-keyword">def</span> <span class="hljs-title function_">__init__</span>(<span class="hljs-params">self</span>):<br> self.connect = pymysql.connect(<br> host = mysql_host,<br> port = mysql_port,<br> db = mysql_db_name,<br> user = mysql_user,<br> passwd = mysql_passwd,<br> charset = <span class="hljs-string">'utf8'</span>,<br> use_unicode = <span class="hljs-literal">True</span><br> )<br> self.cursor = self.connect.cursor()<br><br> <span class="hljs-keyword">def</span> <span class="hljs-title function_">process_item</span>(<span class="hljs-params">self, item, spider</span>):<br> self.cursor.execute(<br> <span class="hljs-string">"""insert into douban(serial_number,movie_name,introduce,star,evaluate,des)</span><br><span class="hljs-string"> value (%s,%s,%s,%s,%s,%s)"""</span>,<br> [item[<span class="hljs-string">'serial_number'</span>],item[<span class="hljs-string">'movie_name'</span>],item[<span class="hljs-string">'introduce'</span>],item[<span class="hljs-string">'star'</span>],item[<span class="hljs-string">'evaluate'</span>],item[<span class="hljs-string">'describe'</span>]]<br> )<br> self.connect.commit()<br> <span class="hljs-keyword">return</span> item<br></code></pre></td></tr></table></figure></li></ul><h6 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h6><ol><li>导入mysql时没法指定表名,默认为项目名称</li><li>表要提前建好,注意如果字段类型错误也可能导致导入出错</li><li>我在导入时字段describe一直出错,好像是关键字,我换成des可以正常那个导入</li></ol><ul><li>在seetings.py中开启pipelines<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><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs py"> <span class="hljs-comment"># 只有开启此选项数据才会保存到数据库</span><br>ITEM_PIPELINES = {<br> <span class="hljs-comment"># 'douban.pipelines.DoubanPipeline': 300,</span><br> <span class="hljs-string">'douban.pipelines.MysqlPipeline'</span>: <span class="hljs-number">300</span>,<br>}<br></code></pre></td></tr></table></figure></li></ul><h5 id="设置代理ip"><a href="#设置代理ip" class="headerlink" title="设置代理ip"></a>设置代理ip</h5><ul><li>在middlewares.py中创建代理类<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><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><code class="hljs py"><span class="hljs-comment"># 代理IP设置</span><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">my_proxy</span>(<span class="hljs-title class_ inherited__">object</span>):<br> <span class="hljs-keyword">def</span> <span class="hljs-title function_">process_request</span>(<span class="hljs-params">self,request,spider</span>):<br> request.meta[<span class="hljs-string">'proxy'</span>] = <span class="hljs-string">'http-cla.abuyun.com:9030'</span><br> proxy_name_pass = <span class="hljs-string">b'xxxxxxxxxxxxx:xxxxxxxxxxxx'</span><br> <span class="hljs-comment"># b'用户名:密码'</span><br> encode_pass_name = base64.b64decode(proxy_name_pass)<br> request.headers[<span class="hljs-string">'Proxy-Authorization'</span>] = <span class="hljs-string">'Basic '</span> + encode_pass_name.decode()<br> <span class="hljs-comment"># decode() 只有转成字符串才可以相加</span><br></code></pre></td></tr></table></figure></li><li>将代理类添加到seetings.py中<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><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs py">DOWNLOADER_MIDDLEWARES = {<br> <span class="hljs-comment"># 'douban.middlewares.DoubanDownloaderMiddleware': 543,</span><br> <span class="hljs-string">'douban.middlewares.my_proxy'</span>: <span class="hljs-number">543</span>,<br><span class="hljs-comment">#数字越小优先级越高</span><br>}<br></code></pre></td></tr></table></figure></li></ul><h5 id="设置随机user-agent"><a href="#设置随机user-agent" class="headerlink" title="设置随机user-agent"></a>设置随机user-agent</h5><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><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><code class="hljs py">- 在middlewares.py中新建类<br><span class="hljs-comment">#user-agent</span><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">my_useragent</span>(<span class="hljs-title class_ inherited__">object</span>):<br> <span class="hljs-keyword">def</span> <span class="hljs-title function_">process_request</span>(<span class="hljs-params">self,request,spider</span>):<br> USER_AGENT_LIST = [<br> <span class="hljs-string">"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 "</span><br> <span class="hljs-string">"(KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.1"</span>,<br> <span class="hljs-string">"Mozilla/5.0 (X11; CrOS i686 2268.111.0) AppleWebKit/536.11 "</span><br> <span class="hljs-string">"(KHTML, like Gecko) Chrome/20.0.1132.57 Safari/536.11"</span>,<br> <span class="hljs-string">"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.6 "</span><br> <span class="hljs-string">"(KHTML, like Gecko) Chrome/20.0.1092.0 Safari/536.6"</span>,<br> <span class="hljs-string">"Mozilla/5.0 (Windows NT 6.2) AppleWebKit/536.6 "</span><br> <span class="hljs-string">"(KHTML, like Gecko) Chrome/20.0.1090.0 Safari/536.6"</span>,<br> <span class="hljs-string">"Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.1 "</span><br> <span class="hljs-string">"(KHTML, like Gecko) Chrome/19.77.34.5 Safari/537.1"</span>,<br> <span class="hljs-string">"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.5 "</span><br> ]<br> agent = random.choice(USER_AGENT_LIST)<br> request.headers[<span class="hljs-string">'User_Agent'</span>] = agent<br><span class="hljs-comment"># 记得导入random模块</span><br></code></pre></td></tr></table></figure><ul><li>将代理类添加到seetings.py中<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><code class="hljs js"><span class="hljs-variable constant_">DOWNLOADER_MIDDLEWARES</span> = {<br> # <span class="hljs-string">'douban.middlewares.DoubanDownloaderMiddleware'</span>: <span class="hljs-number">543</span>,<br> <span class="hljs-string">'douban.middlewares.my_proxy'</span>: <span class="hljs-number">543</span>,<br> <span class="hljs-string">'douban.middlewares.my_useragent'</span>: <span class="hljs-number">544</span>,<br> #数字优先级不能相同<br>}<br></code></pre></td></tr></table></figure></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Python</tag>
<tag>Scrapy</tag>
</tags>
</entry>
<entry>
<title>docker mysql的备份与恢复</title>
<link href="/2018/09/27/docker-mysql%E7%9A%84%E5%A4%87%E4%BB%BD%E4%B8%8E%E6%81%A2%E5%A4%8D/"/>
<url>/2018/09/27/docker-mysql%E7%9A%84%E5%A4%87%E4%BB%BD%E4%B8%8E%E6%81%A2%E5%A4%8D/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/StockSnap_94ZCJIRAW4.jpg"></p><h5 id="docker-mysql持久化"><a href="#docker-mysql持久化" class="headerlink" title="docker mysql持久化"></a>docker mysql持久化</h5><span id="more"></span><ul><li>拉取镜像 <figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">docker</span> <span class="hljs-string">pull mysql:5.7</span><br></code></pre></td></tr></table></figure> 最好指定版本</li><li>启动镜像<figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"> <span class="hljs-attr">docker</span> <span class="hljs-string">run -it -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 --name mymysql -v /home/mysql/data:/var/lib/mysql mysql:5.7</span><br><span class="hljs-comment"># -p 3306:3306 指定端口</span><br><span class="hljs-comment"># -e MYSQL_ROOT_PASSWORD=123456 指定root密码</span><br><span class="hljs-comment"># --name mymysql 指定名称</span><br><span class="hljs-comment"># -v /home/mysql/data:/var/lib/mysql 映射目录,MySQL运行的数据都会保存在data下面</span><br></code></pre></td></tr></table></figure></li><li>数据导出 <figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">docker</span> <span class="hljs-string">exec -it mymysql mysqldump -uroot -p123456 gp_webserver > /home/gp_webserver.sql</span><br><span class="hljs-comment"># 关键字 mysqldump </span><br></code></pre></td></tr></table></figure></li><li>数据导入<figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-comment">#进入docker镜像</span><br><span class="hljs-attr">docker</span> <span class="hljs-string">exec -it mymysql mysql -uroot –proot</span><br><span class="hljs-comment">#创建数据库</span><br><span class="hljs-attr">create</span> <span class="hljs-string">database test_db;</span><br><span class="hljs-comment">#exit 退出镜像</span><br><span class="hljs-comment">#执行导入 若存在外键约束注意建表顺序</span><br><span class="hljs-attr">docker</span> <span class="hljs-string">exec -i mymysql mysql -uroot -p123456 test_db < /home/gp_webserver.sql</span><br></code></pre></td></tr></table></figure></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Docker</tag>
<tag>MySQL</tag>
</tags>
</entry>
<entry>
<title>构建tomcat-docker部署环境镜像</title>
<link href="/2018/09/26/%E6%9E%84%E5%BB%BAtomcat-docker%E9%83%A8%E7%BD%B2%E7%8E%AF%E5%A2%83%E9%95%9C%E5%83%8F/"/>
<url>/2018/09/26/%E6%9E%84%E5%BB%BAtomcat-docker%E9%83%A8%E7%BD%B2%E7%8E%AF%E5%A2%83%E9%95%9C%E5%83%8F/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/yiyi.jpg"></p><h5 id="环境介绍"><a href="#环境介绍" class="headerlink" title="环境介绍"></a>环境介绍</h5><span id="more"></span><p>镜像基于docker centos构建,需要事先在服务器准备tomcat和jdk,镜像构建后可上传到私人仓库下次使用时直接pull,一般情况下一个镜像一般只部署一个项目,保持独立,可以使用自己熟悉或者稳定的的centos、tomcat、jdk版本,便于长期维护和排查错误。</p><ul><li>在服务器home目录下新建文件夹,将tomcat和jdk上传到该文件夹,解压</li><li>新建Dockerfile文件<br> <img src="http://omt7mlk6g.bkt.clouddn.com/Snipaste_2018-09-26_16-38-09.png" alt="avatar"></li><li>docker pull centos </li><li>编辑Dockerfile文件<figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-comment">#基础镜像 这里可以拉取固定版本或者拉取自己仓库的镜像</span><br><span class="hljs-attr">FROM</span> <span class="hljs-string">docker.io/centos</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">#镜像维护者</span><br><span class="hljs-attr">MAINTAINER</span> <span class="hljs-string">Andrew</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">#复制jre文件夹到镜像中</span><br><span class="hljs-comment">#./jdk1.8.0_121 物理机中文件位置,必须为相对当前Dockerfile的相对路径</span><br><span class="hljs-comment">#/opt/jdk8 镜像中的位置,docker会自动创建目录</span><br><span class="hljs-attr">COPY</span> <span class="hljs-string">./jdk1.8.0_121 /opt/jdk8</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">#配置JAVA环境变量</span><br><span class="hljs-attr">ENV</span> <span class="hljs-string">JAVA_HOME /opt/jdk8</span><br><span class="hljs-attr">ENV</span> <span class="hljs-string">CLASSPATH $JAVA_HOME/lib</span><br><span class="hljs-attr">ENV</span> <span class="hljs-string">PATH $PATH:$JAVA_HOME/bin</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">#复制tomcat文件夹到镜像中</span><br><span class="hljs-attr">COPY</span> <span class="hljs-string">./apache-tomcat-9.0.1 /opt/tomcat9</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">#配置tomcat环境变量</span><br><span class="hljs-attr">ENV</span> <span class="hljs-string">CATALINA_HOME /opt/tomcat9</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">#加上这句话,启动会变快,但是不知道有没有其他影响</span><br><span class="hljs-attr">RUN</span> <span class="hljs-string">echo -e \\nJAVA_OPTS="-Djava.security.egd=file:/dev/./urandom" >> /opt/tomcat9/bin/setclasspath.sh</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">#启动tomcat命令</span><br><span class="hljs-attr">CMD</span> <span class="hljs-string">opt/tomcat9/bin/catalina.sh run</span><br><br></code></pre></td></tr></table></figure></li><li>构建镜像<figure class="highlight properties"><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><code class="hljs properties"><span class="hljs-attr">docker</span> <span class="hljs-string">build -t docker/tomcat .</span><br><span class="hljs-comment"># -t 是将构建的镜像命名</span><br><span class="hljs-comment"># 最后的 . 是指当前路径下 所有必须要在该文件夹下执行</span><br></code></pre></td></tr></table></figure><img src="http://omt7mlk6g.bkt.clouddn.com/Snipaste_2018-09-26_16-52-33.png" alt="avatar"></li><li>查看镜像,可以看到生成的docker/tomcat镜像<br> <img src="http://omt7mlk6g.bkt.clouddn.com/Snipaste_2018-09-26_16-55-35.png" alt="avatar"></li><li>启动镜像,将本地文件映射到tomcat的webapps目录下 <figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-attr">docker</span> <span class="hljs-string">run -it -d -p 8080:8080 --name docker-tomcat-test -v /home/tomcat-root:/opt/tomcat9/webapps/ROOT docker/tomcat</span><br><span class="hljs-comment"># -d 后台启动</span><br><span class="hljs-comment"># -i 以交互模式运行容器</span><br><span class="hljs-comment"># -t为容器重新分配一个伪输入终端 -it一般同时使用</span><br><span class="hljs-comment"># -p 将本机的8080端口映射到容器中的8080端口</span><br><span class="hljs-comment"># --name 命名</span><br><span class="hljs-comment"># -v /home/tomcat-root:/opt/tomcat9/webapps/ROOT 将本机的tomcat-root目录映射到容器中tomcat的webapps/ROOT目录</span><br><span class="hljs-comment"># 容器启动时tomcat的根目录其实是本机的tomcat-root目录 只需要将需要部署war包放在本机的tomcat-root目录即可</span><br></code></pre></td></tr></table></figure></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Docker</tag>
<tag>Tomcat</tag>
</tags>
</entry>
<entry>
<title>docker部署vue前端项目并设置负载均衡</title>
<link href="/2018/08/30/docker%E9%83%A8%E7%BD%B2vue%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E5%B9%B6%E8%AE%BE%E7%BD%AE%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/"/>
<url>/2018/08/30/docker%E9%83%A8%E7%BD%B2vue%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E5%B9%B6%E8%AE%BE%E7%BD%AE%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/StockSnap_VTDSKKSBWH.jpg"></p><h5 id="docker-环境准备"><a href="#docker-环境准备" class="headerlink" title="docker 环境准备"></a>docker 环境准备</h5><span id="more"></span><ul><li><p>之前用spring-boot开发的项目都是将前端项目作为静态资源放在static下,最后一起打<br>成war包部署在tomcat中。这样灵活度很低,也失去了前后端分离的意义。spring-boot可以<br>单独打成jar包,用内置的tomcat直接启动服务,而前端项目则可以直接部署在docker中。</p></li><li><p>安装docker</p></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><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><code class="hljs bash"><span class="hljs-comment"># step 1: 安装必要的一些系统工具</span><br>sudo yum install -y yum-utils device-mapper-persistent-data lvm2<br><span class="hljs-comment"># Step 2: 添加软件源信息</span><br>sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo<br><span class="hljs-comment"># Step 3: 更新并安装Docker-CE</span><br>sudo yum makecache fast<br>sudo yum -y install docker-ce<br><span class="hljs-comment"># Step 4: 开启Docker服务</span><br>sudo service docker start<br><span class="hljs-comment"># 检查docker安装是否正常</span><br>docker version<br></code></pre></td></tr></table></figure><ul><li>拉去nginx镜像(直接从网易镜像中心拉取速度会快些)<figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">docker</span> <span class="hljs-string">pull hub.c.163.com/public/nginx:1.2.1</span><br></code></pre></td></tr></table></figure>闲名字太长可以打个标签<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs bash">docker tag hub.c.163.com/public/nginx:1.2.1 nginx<br><span class="hljs-comment">#docker images 查看会有两个镜像,可以删除名字长的那个了</span><br></code></pre></td></tr></table></figure></li></ul><h5 id="部署前端项目"><a href="#部署前端项目" class="headerlink" title="部署前端项目"></a>部署前端项目</h5><p>我们前端项目打算部署3个冗余节点,然后再部署一个nginx作为负载均衡服务器,前端<br>项目打包后只有一个入口文件和几个样式文件js文件,用docker部署的时候只需要将这些<br>文件映射到docker容器中,还需要准备相应的nginx配置文件映射到容器中。</p><ul><li>在/home路径下新建三个文件夹f1,f2,f3,以f1为例部署第一个节点</li><li>在f1下新建vue文件夹,将前端打包项目上传到vue文件夹中</li><li>在f1下新建nginx.conf配置文件(内容如下)<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><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></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-comment">#设置root权限,需要映射nginx.conf配置文件,权限不足无法启动</span><br>user root root;<br>worker_processes 1;<br><br>error_log /var/log/nginx/error.log warn;<br>pid /var/run/nginx.pid;<br><br><br>events {<br> worker_connections 1024;<br>}<br><br><br>http {<br> include /etc/nginx/mime.types;<br> default_type application/octet-stream;<br><br> log_format main <span class="hljs-string">'$remote_addr - $remote_user [$time_local] "$request" '</span><br> <span class="hljs-string">'$status $body_bytes_sent "$http_referer" '</span><br> <span class="hljs-string">'"$http_user_agent" "$http_x_forwarded_for"'</span>;<br><br> access_log /var/log/nginx/access.log main;<br><br> sendfile on;<br> <span class="hljs-comment">#tcp_nopush on;</span><br><br> keepalive_timeout 65;<br><br> <span class="hljs-comment">#gzip on;</span><br><br>proxy_redirect off;<br>proxy_set_header Host <span class="hljs-variable">$host</span>;<br>proxy_set_header X-Real-IP <span class="hljs-variable">$remote_addr</span>;<br>proxy_set_header X-Forwarded-For <span class="hljs-variable">$proxy_add_x_forwarded_for</span>;<br>client_max_body_size 10m;<br>client_body_buffer_size 128k;<br>proxy_connect_timeout 5s;<br>proxy_send_timeout 5s;<br>proxy_read_timeout 5s;<br>proxy_buffer_size 4k;<br>proxy_buffers 4 32k;<br>proxy_busy_buffers_size 64k;<br>proxy_temp_file_write_size 64k;<br><br>server {<br><span class="hljs-comment">#抛出一个端口</span><br>listen 6501;<br><span class="hljs-comment">#设置服务器域名</span><br>server_name 192.168.88.60;<br>location / {<br><span class="hljs-comment">#设置项目目录</span><br>root /home/f1/vue;<br>index index.html;<br>}<br>}<br>}<br></code></pre></td></tr></table></figure></li><li>创建容器<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></pre></td><td class="code"><pre><code class="hljs bash"> docker run -it -d -p 6501:6501 --name f1 -v /home/f1/nginx.conf:/etc/nginx/nginx.conf -v /home/fn1/vue:/home/f1/vue --privileged nginx<br><span class="hljs-comment"># -v /home/f1/nginx.conf:/etc/nginx/nginx.conf 将f1下的nginx.conf映射的容器中的nginx目录下</span><br><span class="hljs-comment"># -v /home/f1/vue:/home/f1/vue 映射项目目录,我这里本地目录和容器目录一致</span><br><span class="hljs-comment"># --privileged 给权限</span><br></code></pre></td></tr></table></figure></li><li>创建另外两个f2,f3节点,配置文件只需更改listen端口和root目录<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><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><code class="hljs bash"><span class="hljs-comment">#f2</span><br>server {<br><span class="hljs-comment">#抛出一个端口</span><br>listen 6502;<br><span class="hljs-comment">#设置服务器域名</span><br>server_name 192.168.88.60;<br>location / {<br><span class="hljs-comment">#设置项目目录</span><br>root /home/f2/vue;<br>index index.html;<br>}<br>}<br><span class="hljs-comment">#f3</span><br>server {<br><span class="hljs-comment">#抛出一个端口</span><br>listen 6503;<br><span class="hljs-comment">#设置服务器域名</span><br>server_name 192.168.88.60;<br>location / {<br><span class="hljs-comment">#设置项目目录</span><br>root /home/f3/vue;<br>index index.html;<br>}<br>}<br></code></pre></td></tr></table></figure></li><li>f2,f3创建容器命令,记得将配置文件个项目都上传到相应的文件下<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></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-comment">#f2</span><br>docker run -it -d -p 6502:6502 --name f2 -v /home/f2/nginx.conf:/etc/nginx/nginx.conf -v /home/fn2/vue:/home/f2/vue --privileged nginx<br><span class="hljs-comment">#f3</span><br>docker run -it -d -p 6503:6503 --name f3 -v /home/f3/nginx.conf:/etc/nginx/nginx.conf -v /home/fn3/vue:/home/f3/vue --privileged nginx<br></code></pre></td></tr></table></figure></li><li>查看启动容器<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs bash">docker ps <br><span class="hljs-comment">#此时应该有三个容器启动</span><br></code></pre></td></tr></table></figure></li></ul><h5 id="创建负载均衡nginx容器"><a href="#创建负载均衡nginx容器" class="headerlink" title="创建负载均衡nginx容器"></a>创建负载均衡nginx容器</h5><ul><li>只需要创建一个nginx.conf配置文件映射到容器,主要设置都在配置文件中</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><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></pre></td><td class="code"><pre><code class="hljs bash">user nginx;<br>worker_processes 1;<br><br>error_log /var/log/nginx/error.log warn;<br>pid /var/run/nginx.pid;<br><br><br>events {<br> worker_connections 1024;<br>}<br><br><br>http {<br> include /etc/nginx/mime.types;<br> default_type application/octet-stream;<br><br> log_format main <span class="hljs-string">'$remote_addr - $remote_user [$time_local] "$request" '</span><br> <span class="hljs-string">'$status $body_bytes_sent "$http_referer" '</span><br> <span class="hljs-string">'"$http_user_agent" "$http_x_forwarded_for"'</span>;<br><br> access_log /var/log/nginx/access.log main;<br><br> sendfile on;<br> <span class="hljs-comment">#tcp_nopush on;</span><br><br> keepalive_timeout 65;<br><br> <span class="hljs-comment">#gzip on;</span><br><br>proxy_redirect off;<br>proxy_set_header Host <span class="hljs-variable">$host</span>;<br>proxy_set_header X-Real-IP <span class="hljs-variable">$remote_addr</span>;<br>proxy_set_header X-Forwarded-For <span class="hljs-variable">$proxy_add_x_forwarded_for</span>;<br>client_max_body_size 10m;<br>client_body_buffer_size 128k;<br>proxy_connect_timeout 5s;<br>proxy_send_timeout 5s;<br>proxy_read_timeout 5s;<br>proxy_buffer_size 4k;<br>proxy_buffers 4 32k;<br>proxy_busy_buffers_size 64k;<br>proxy_temp_file_write_size 64k;<br><br><span class="hljs-comment">#主要负载均衡配置</span><br>upstream fn {<br>server 192.168.88.60:6501;<br>server 192.168.88.60:6502;<br>server 192.168.88.60:6503;<br>}<br>server {<br> listen 6601;<br> server_name 192.168.88.60; <br> location / { <br> proxy_pass http://fn;<br> index index.html index.htm; <br> } <br><br> }<br>}<br></code></pre></td></tr></table></figure><ul><li>启动负载均衡容器<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">docker run -it -d -p 8080:6601 --name ff1 -v /home/ff1/nginx.conf:/etc/nginx/nginx.conf --privileged nginx<br></code></pre></td></tr></table></figure></li><li>此时访问192.168.88.60:8080会将请求分发到6501,6502,6503三个端口中<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><code class="hljs bash"><span class="hljs-comment">#可以执行 docker pause f1 f2 暂停掉f1 f2节点看访问是否正常</span><br><span class="hljs-comment"># 可以暂停任意节点节点检验,或者暂停掉三个节点看是否能访问</span><br><span class="hljs-comment"># docker unpause f1 启动暂停节点</span><br></code></pre></td></tr></table></figure></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Docker</tag>
<tag>Vue</tag>
</tags>
</entry>
<entry>
<title>spring boot 多模块开发和使用docker部署</title>
<link href="/2018/07/12/spring-boot-%E5%A4%9A%E6%A8%A1%E5%9D%97%E5%BC%80%E5%8F%91%E5%92%8Cdocker%E9%83%A8%E7%BD%B2/"/>
<url>/2018/07/12/spring-boot-%E5%A4%9A%E6%A8%A1%E5%9D%97%E5%BC%80%E5%8F%91%E5%92%8Cdocker%E9%83%A8%E7%BD%B2/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/yehaizi.jpg"></p><h5 id="多模块的开发"><a href="#多模块的开发" class="headerlink" title="多模块的开发"></a>多模块的开发</h5> <span id="more"></span><ul><li><p>多模块的开发只是将原先的代码分模块存放,一般是将公共类或者独立业务作为单独<br> 模块存放,例如一些常用的工具类,权限控制模块等</p></li><li><p>新建项目spring-boot 项目,和平创建spring-boot项目一样</p></li><li><p>创建模块<br><img src="http://omt7mlk6g.bkt.clouddn.com/Snipaste_2018-08-30_16-32-50.png" alt="创建步骤"><br><img src="http://omt7mlk6g.bkt.clouddn.com/Snipaste_2018-08-30_16-33-29.png" alt="创建步骤"><br><img src="http://omt7mlk6g.bkt.clouddn.com/Snipaste_2018-08-30_16-33-55.png" alt="创建步骤"></p></li></ul><p>创建模块的时候选择的是maven项目</p><ul><li>主要变化的事pom文件,根目录下会有一个pom文件,可以将公共包的依赖都放在<br> 这里 <figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"> <span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>com.basic<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>paginate<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">version</span>></span>0.0.1-SNAPSHOT<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">modules</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">module</span>></span>common<span class="hljs-tag"></<span class="hljs-name">module</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">module</span>></span>core<span class="hljs-tag"></<span class="hljs-name">module</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">modules</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">packaging</span>></span>pom<span class="hljs-tag"></<span class="hljs-name">packaging</span>></span><br><span class="hljs-comment"><!--可以看出本项目由两个子模块--></span><br></code></pre></td></tr></table></figure></li><li>子模块之间的相互引用,和普通的包引用类似<figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>com.basic<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>common<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">version</span>></span>0.0.1-SNAPSHOT<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure></li></ul><h5 id="docker部署"><a href="#docker部署" class="headerlink" title="docker部署"></a>docker部署</h5><ul><li>打包配置 <figure class="highlight xml"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs xml"> <span class="hljs-tag"><<span class="hljs-name">build</span>></span><br><span class="hljs-tag"><<span class="hljs-name">plugins</span>></span><br><span class="hljs-tag"><<span class="hljs-name">plugin</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>org.springframework.boot<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>spring-boot-maven-plugin<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"></<span class="hljs-name">plugin</span>></span><br><span class="hljs-comment"><!-- Docker maven plugin --></span><br><span class="hljs-tag"><<span class="hljs-name">plugin</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>com.spotify<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>docker-maven-plugin<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>1.0.0<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"><<span class="hljs-name">configuration</span>></span><br><span class="hljs-tag"><<span class="hljs-name">imageName</span>></span>{project.artifactId}<span class="hljs-tag"></<span class="hljs-name">imageName</span>></span><br><span class="hljs-tag"><<span class="hljs-name">dockerDirectory</span>></span>src/main/basic<span class="hljs-tag"></<span class="hljs-name">dockerDirectory</span>></span><br><span class="hljs-tag"><<span class="hljs-name">resources</span>></span><br><span class="hljs-tag"><<span class="hljs-name">resource</span>></span><br><span class="hljs-tag"><<span class="hljs-name">targetPath</span>></span>/<span class="hljs-tag"></<span class="hljs-name">targetPath</span>></span><br><span class="hljs-tag"><<span class="hljs-name">directory</span>></span>${project.build.directory}<span class="hljs-tag"></<span class="hljs-name">directory</span>></span><br><span class="hljs-tag"><<span class="hljs-name">include</span>></span>${project.build.finalName}.jar<span class="hljs-tag"></<span class="hljs-name">include</span>></span><br><span class="hljs-tag"></<span class="hljs-name">resource</span>></span><br><span class="hljs-tag"></<span class="hljs-name">resources</span>></span><br><span class="hljs-tag"></<span class="hljs-name">configuration</span>></span><br><span class="hljs-tag"></<span class="hljs-name">plugin</span>></span><br><span class="hljs-comment"><!-- Docker maven plugin --></span><br><span class="hljs-tag"></<span class="hljs-name">plugins</span>></span><br><span class="hljs-tag"></<span class="hljs-name">build</span>></span><br></code></pre></td></tr></table></figure></li><li>在src/main/basic下新建Dockerfile 文件<figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-attr">FROM</span> <span class="hljs-string">openjdk:8-jdk-alpine</span><br><span class="hljs-attr">VOLUME</span> <span class="hljs-string">/tmp</span><br><span class="hljs-attr">ADD</span> <span class="hljs-string">Basic-0.0.1-SNAPSHOT.jar app.jar</span><br><span class="hljs-attr">ENTRYPOINT</span> <span class="hljs-string">["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]</span><br></code></pre></td></tr></table></figure></li><li>将整个项目上传到服务器,执行以下操作<figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-comment"># 打包项目</span><br><span class="hljs-attr">mvn</span> <span class="hljs-string">package</span><br><span class="hljs-comment"># 构建镜像</span><br><span class="hljs-attr">mvn</span> <span class="hljs-string">package docker:build</span><br><span class="hljs-comment"># docker images 就可以查看生成的镜像</span><br><span class="hljs-comment"># 启动镜像 然后在8080端口查看</span><br><span class="hljs-attr">docker</span> <span class="hljs-string">run -it -d -p 8080:8080 xxxxx</span><br></code></pre></td></tr></table></figure></li><li>可以将生成的镜像上传到镜像仓库(例如网易镜像仓库,需要先注册)<figure class="highlight properties"><table><tr><td class="gutter"><pre><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><code class="hljs properties"><span class="hljs-attr">docker</span> <span class="hljs-string">login -u {登录账号} -p {你的网易云密码} hub.c.163.com</span><br><span class="hljs-comment">#Attention:登录账号可前往网易云控台,点击右上角用户名- 基本信息里查看。</span><br><span class="hljs-comment">#返回「Login Succeded」即为登录成功。</span><br><span class="hljs-attr">docker</span> <span class="hljs-string">tag {镜像名或ID} hub.c.163.com/{你的用户名}/{标签名}</span><br><span class="hljs-comment">#你的网易云镜像仓库推送地址为 hub.c.163.com/{你的用户名}/{标签名}</span><br><span class="hljs-comment"># 此处为你的用户名,不是你的邮箱帐号或者手机号码 登录网易云控制台,页面右上角头像右侧即为「用户名」</span><br><span class="hljs-attr">docker</span> <span class="hljs-string">push hub.c.163.com/{你的用户名}/{标签名}</span><br><span class="hljs-comment"># 推送成功后别人就可以pull你的镜像了</span><br><span class="hljs-attr">docker</span> <span class="hljs-string">pull hub.c.163.com/qiufeng05life/spring-boot.docker-test:latest</span><br></code></pre></td></tr></table></figure></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
</tags>
</entry>
<entry>
<title>spring-boot处理订单合同的解决方案</title>
<link href="/2018/06/27/spring-boot%E5%A4%84%E7%90%86%E8%AE%A2%E5%8D%95%E5%90%88%E5%90%8C%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/"/>
<url>/2018/06/27/spring-boot%E5%A4%84%E7%90%86%E8%AE%A2%E5%8D%95%E5%90%88%E5%90%8C%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/shunini3.jpg"></p><h5 id="准备合同模板"><a href="#准备合同模板" class="headerlink" title="准备合同模板"></a>准备合同模板</h5><span id="more"></span><ul><li><p>最主要功能是有新的保单时,提交一份用户的保单信息,然后根据保单信息生成一份合同,合同是PDF的,模板是固定的,而且带有公司的公章。</p></li><li><p>用word制作合同模板,将固定该信息全部写入word,公章也是,只预留一些会改变的信息的位置,</p></li><li><p>另存为PDF</p></li><li><p>用Adobe Acrobat DC打开pdf文件</p></li><li><p>点击 工具–>准备表单 </p></li><li><p>然后在需要填入信息的地方添加文本域<br> <img src="http://omt7mlk6g.bkt.clouddn.com/Snipaste_2018-06-27_16-58-19.png" alt="Alt text"></p></li></ul><h5 id="在pom文件中添加包"><a href="#在pom文件中添加包" class="headerlink" title="在pom文件中添加包"></a>在pom文件中添加包</h5><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"> <span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>com.itextpdf<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>layout<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>7.0.3<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br><br><span class="hljs-comment"><!-- only needed for forms --></span><br><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>com.itextpdf<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>forms<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>7.0.3<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br><br><span class="hljs-comment"><!-- only needed for Asian fonts --></span><br><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>com.itextpdf<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>font-asian<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>7.0.3<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure><h5 id="创建pdf处理类"><a href="#创建pdf处理类" class="headerlink" title="创建pdf处理类"></a>创建pdf处理类</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">PDFUtils</span> {<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> contract 用户保单信息的model</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> filePath 生成合同的pdf模板文件</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> String <span class="hljs-title function_">contractTranPdf</span><span class="hljs-params">(Contract contract,String filePath)</span> {<br><br> <span class="hljs-type">String</span> <span class="hljs-variable">fileNewName</span> <span class="hljs-operator">=</span> contract.getContractNo(); <span class="hljs-comment">//文件名</span><br> <span class="hljs-type">String</span> <span class="hljs-variable">path</span> <span class="hljs-operator">=</span> <span class="hljs-string">"src/main/resources/pdf"</span>;<br> <span class="hljs-type">String</span> <span class="hljs-variable">toPath</span> <span class="hljs-operator">=</span> path +<span class="hljs-string">"/"</span> + fileNewName + <span class="hljs-string">".pdf"</span>; <span class="hljs-comment">//生成保单的本地临时地址</span><br> <span class="hljs-keyword">try</span> {<br> System.out.println(filePath);<br> <span class="hljs-type">PdfDocument</span> <span class="hljs-variable">pdfDoc</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">PdfDocument</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">PdfReader</span>(filePath), <span class="hljs-keyword">new</span> <span class="hljs-title class_">PdfWriter</span>(toPath));<br> <span class="hljs-type">PdfAcroForm</span> <span class="hljs-variable">pdfAcroForm</span> <span class="hljs-operator">=</span> PdfAcroForm.getAcroForm(pdfDoc, <span class="hljs-literal">true</span>);<br> <span class="hljs-type">PdfFont</span> <span class="hljs-variable">font</span> <span class="hljs-operator">=</span> PdfFontFactory.createFont(<span class="hljs-string">"STSongStd-Light"</span>, <span class="hljs-string">"UniGB-UCS2-H"</span>, <span class="hljs-literal">false</span>);<br> pdfAcroForm.getField(<span class="hljs-string">"name"</span>).setValue(contract.getName()).setFont(font); <span class="hljs-comment">//setFont(font)解决中文显示问题</span><br> pdfAcroForm.getField(<span class="hljs-string">"phone"</span>).setValue(contract.getPhone());<br> pdfAcroForm.getField(<span class="hljs-string">"code"</span>).setValue(contract.getCode());<br> pdfAcroForm.getField(<span class="hljs-string">"email"</span>).setValue(contract.getEmail());<br> <span class="hljs-keyword">if</span> (Verification.verificationString(contract.getAddress())) {<br> pdfAcroForm.getField(<span class="hljs-string">"address"</span>).setValue(contract.getAddress()).setFont(font);<br> }<br><br> pdfAcroForm.flattenFields();<br> pdfDoc.close();<br> <span class="hljs-comment">//上传到七牛</span><br> <span class="hljs-type">String</span> <span class="hljs-variable">uploadPath</span> <span class="hljs-operator">=</span> QiniuUtil.uploadFile(toPath,fileNewName);<br> log.info(<span class="hljs-string">"七牛预览地址:{}"</span>, uploadPath);<br> <span class="hljs-comment">//删除本地临时文件</span><br> <span class="hljs-type">boolean</span> <span class="hljs-variable">success</span> <span class="hljs-operator">=</span> (<span class="hljs-keyword">new</span> <span class="hljs-title class_">File</span>(toPath)).delete();<br> <span class="hljs-keyword">if</span> (success) {<br> log.info(<span class="hljs-string">"删除本地上传文件成功"</span>);<br> }<br> <span class="hljs-keyword">return</span> uploadPath;<br> } <span class="hljs-keyword">catch</span> (Exception e) {<br> <span class="hljs-type">boolean</span> <span class="hljs-variable">success</span> <span class="hljs-operator">=</span> (<span class="hljs-keyword">new</span> <span class="hljs-title class_">File</span>(toPath)).delete();<br> e.printStackTrace();<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br> }<br> }<br>}<br></code></pre></td></tr></table></figure><p>如果有多个合同模板,可以创建不同function对应的不同的模板,也可以传入不同的模板文件解决,可以根据具体项目解决</p><h5 id="生成合同的存储问题"><a href="#生成合同的存储问题" class="headerlink" title="生成合同的存储问题"></a>生成合同的存储问题</h5><p>因为合同要提供预览和下载,所以讲生成合同上传到七牛,在数据库直接存储七牛的地址即可</p><ul><li>spring-boot七牛的依赖包</li></ul><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"> <span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>com.qiniu<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>qiniu-java-sdk<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>[7.2.0, 7.2.99]<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure><ul><li>分装的上传类</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Component</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">QiniuUtil</span> {<br><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-type">String</span> <span class="hljs-variable">ACCESSKEY</span> <span class="hljs-operator">=</span> <span class="hljs-string">"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"</span>;<br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-type">String</span> <span class="hljs-variable">SECRETKEY</span> <span class="hljs-operator">=</span> <span class="hljs-string">"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"</span>;<br><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String BUCKET= <span class="hljs-string">"contract"</span>; <span class="hljs-comment">//bucket</span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-type">String</span> <span class="hljs-variable">DOMAIN_OF_BUCKET</span> <span class="hljs-operator">=</span> <span class="hljs-string">"http://xxxxxxx.xxx.clouddn.com"</span>; <span class="hljs-comment">//空间绑定的域名 bucket不同 域名不同</span><br><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> Auth <span class="hljs-title function_">QiniuUtilInit</span><span class="hljs-params">()</span> {<br> <span class="hljs-keyword">return</span> Auth.create(ACCESSKEY,SECRETKEY);<br> }<br><br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 上传文件 返回文件访问路径</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> localFilePath</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> filename</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> * <span class="hljs-doctag">@throws</span> Exception</span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> String <span class="hljs-title function_">uploadFile</span><span class="hljs-params">(String localFilePath, String filename)</span> <span class="hljs-keyword">throws</span> Exception{<br> <span class="hljs-comment">//构造一个带指定Zone对象的配置类</span><br> <span class="hljs-type">Configuration</span> <span class="hljs-variable">cfg</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Configuration</span>(Zone.zone0());<br><br> <span class="hljs-type">String</span> <span class="hljs-variable">domainOfBucket</span> <span class="hljs-operator">=</span> DOMAIN_OF_BUCKET; <span class="hljs-comment">//空间绑定的域名 bucket不同 域名不同</span><br><br> <span class="hljs-type">UploadManager</span> <span class="hljs-variable">uploadManager</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">UploadManager</span>(cfg);<br> <span class="hljs-comment">//...生成上传凭证,然后准备上传</span><br> <span class="hljs-type">String</span> <span class="hljs-variable">bucket</span> <span class="hljs-operator">=</span> BUCKET;<br><br> <span class="hljs-comment">//默认不指定key的情况下,以文件内容的hash值作为文件名</span><br> <span class="hljs-type">String</span> <span class="hljs-variable">key</span> <span class="hljs-operator">=</span> filename;<br> <span class="hljs-type">Auth</span> <span class="hljs-variable">auth</span> <span class="hljs-operator">=</span> QiniuUtilInit();<br> <span class="hljs-type">String</span> <span class="hljs-variable">upToken</span> <span class="hljs-operator">=</span> auth.uploadToken(bucket);<br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-type">Response</span> <span class="hljs-variable">response</span> <span class="hljs-operator">=</span> uploadManager.put(localFilePath, key, upToken);<br> <span class="hljs-comment">//解析上传成功的结果</span><br> <span class="hljs-type">DefaultPutRet</span> <span class="hljs-variable">putRet</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gson</span>().fromJson(response.bodyString(), DefaultPutRet.class);<br> System.out.println(putRet.key);<br> System.out.println(putRet.hash);<br> <span class="hljs-keyword">return</span> domainOfBucket + <span class="hljs-string">"/"</span> +putRet.key;<br> } <span class="hljs-keyword">catch</span> (QiniuException ex) {<br> <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Exception</span>();<br> }<br> }<br><br>}<br></code></pre></td></tr></table></figure><ul><li>直接调用uploadFile方法,上传成功后会返回访问地址 </li><li>注意上传时如果指定文件名,同一个bucket下不能有重名文件</li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
</tags>
</entry>
<entry>
<title>laravel小知识点记录</title>
<link href="/2018/05/05/laravel%E5%B0%8F%E7%9F%A5%E8%AF%86%E7%82%B9%E8%AE%B0%E5%BD%95/"/>
<url>/2018/05/05/laravel%E5%B0%8F%E7%9F%A5%E8%AF%86%E7%82%B9%E8%AE%B0%E5%BD%95/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/erwan-hesry.jpg"></p><h5 id="表单方式伪造"><a href="#表单方式伪造" class="headerlink" title="表单方式伪造"></a>表单方式伪造</h5><span id="more"></span><p>对于在Html模板中请求PUT PATCH DELETE类型的路由,Laravel提供了表单伪造方式</p><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></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/foo/bar"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"POST"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"_method"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"PUT"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"_token"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ csrf_token() }}"</span>></span><br><span class="hljs-tag"></<span class="hljs-name">form</span>></span><br>//还可以使用{{ method_field('PUT') }},类似于token的传递方式<br></code></pre></td></tr></table></figure><h5 id="部分资源路由"><a href="#部分资源路由" class="headerlink" title="部分资源路由"></a>部分资源路由</h5><p>在使用资源控制器时,我们不一定都会使用到全部资源路由,我们可以通过only和except关键字限制</p><figure class="highlight php"><table><tr><td class="gutter"><pre><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><code class="hljs php"><span class="hljs-title class_">Route</span>::<span class="hljs-title function_ invoke__">resource</span>(<span class="hljs-string">'photo'</span>, <span class="hljs-string">'PhotoController'</span>, [<span class="hljs-string">'only'</span> => [<br> <span class="hljs-string">'index'</span>, <span class="hljs-string">'show'</span><br>]]);<br><span class="hljs-title class_">Route</span>::<span class="hljs-title function_ invoke__">resource</span>(<span class="hljs-string">'photo'</span>, <span class="hljs-string">'PhotoController'</span>, [<span class="hljs-string">'except'</span> => [<br> <span class="hljs-string">'create'</span>, <span class="hljs-string">'store'</span>, <span class="hljs-string">'update'</span>, <span class="hljs-string">'destroy'</span><br>]]);<br></code></pre></td></tr></table></figure><h5 id="对已存在数据库的字段操作"><a href="#对已存在数据库的字段操作" class="headerlink" title="对已存在数据库的字段操作"></a>对已存在数据库的字段操作</h5><p>在开发中我们经常会遇到对原有数据库的修改操作,有时我们想给表中添加新的字段但并不想破坏已存在的数据,<br>我们可以使用一下方法</p><ul><li>新建迁移文件<figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">php</span> <span class="hljs-string">artisan make:migration add_avatar_and_introduction_to_users_table --table=users</span><br></code></pre></td></tr></table></figure><code>add_avatar_and_introduction_to_users_table</code>这只是命名规范,有助于理解<br><code>--tables=users</code> 指定的是要修改的表</li><li>修改迁移文件(和新建表是的操作基本一致)<figure class="highlight php"><table><tr><td class="gutter"><pre><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><code class="hljs php"><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">up</span>(<span class="hljs-params"></span>)</span><br><span class="hljs-function"></span>{<br> <span class="hljs-title class_">Schema</span>::<span class="hljs-title function_ invoke__">table</span>(<span class="hljs-string">'users'</span>, function (Blueprint <span class="hljs-variable">$table</span>) {<br> <span class="hljs-variable">$table</span>-><span class="hljs-keyword">string</span>(<span class="hljs-string">'avatar'</span>)-><span class="hljs-title function_ invoke__">nullable</span>();<br> <span class="hljs-variable">$table</span>-><span class="hljs-keyword">string</span>(<span class="hljs-string">'introduction'</span>)-><span class="hljs-title function_ invoke__">nullable</span>();<br> });<br>}<br><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">down</span>(<span class="hljs-params"></span>)</span><br><span class="hljs-function"></span>{<br> <span class="hljs-title class_">Schema</span>::<span class="hljs-title function_ invoke__">table</span>(<span class="hljs-string">'users'</span>, function (Blueprint <span class="hljs-variable">$table</span>) {<br> <span class="hljs-variable">$table</span>-><span class="hljs-title function_ invoke__">dropColumn</span>(<span class="hljs-string">'avatar'</span>);<br> <span class="hljs-variable">$table</span>-><span class="hljs-title function_ invoke__">dropColumn</span>(<span class="hljs-string">'introduction'</span>);<br> });<br>}<br></code></pre></td></tr></table></figure></li><li>执行php artisan migrate 就可以在原先的users表中新添加两个字段</li><li>laravel还支持修改现有表的字段,比如字段名称,属性,当然还可以删除,只不过是多了操作关键字,但是最常用的还是向现有表中添加新字段</li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Laravel</tag>
</tags>
</entry>
<entry>
<title>laravel中富文本编辑器上传图片的处理</title>
<link href="/2018/04/17/laravel%E4%B8%AD%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E7%9A%84%E5%A4%84%E7%90%86/"/>
<url>/2018/04/17/laravel%E4%B8%AD%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E7%9A%84%E5%A4%84%E7%90%86/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/deniel-fazekas-1504431-unsplash.jpg"></p><h5 id="封装公用的图片上传类"><a href="#封装公用的图片上传类" class="headerlink" title="封装公用的图片上传类"></a>封装公用的图片上传类</h5><span id="more"></span><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">class</span> <span class="hljs-title class_">ImageUpload</span><br>{<br> <span class="hljs-type">protected</span> <span class="hljs-variable">$allowed_ext</span> <span class="hljs-operator">=</span> [<span class="hljs-string">"png"</span>, <span class="hljs-string">"jpg"</span>, <span class="hljs-string">"gif"</span>, <span class="hljs-string">'jpeg'</span>];<br> <span class="hljs-keyword">public</span> function <span class="hljs-title function_">save</span><span class="hljs-params">($file, $folder, $file_prefix, $max_width = <span class="hljs-literal">false</span>)</span><br> {<br> <span class="hljs-comment">// 构建存储的文件夹规则,值如:uploads/images/avatars/201709/21/</span><br> <span class="hljs-comment">// 文件夹切割能让查找效率更高。</span><br> $folder_name = <span class="hljs-string">"uploads/images/$folder/"</span> . date(<span class="hljs-string">"Ym/d"</span>, time());<br> <span class="hljs-comment">// 文件具体存储的物理路径,`public_path()` 获取的是 `public` 文件夹的物理路径。</span><br> <span class="hljs-comment">// 值如:/home/vagrant/Code/larabbs/public/uploads/images/avatars/201709/21/</span><br> $upload_path = public_path() . <span class="hljs-string">'/'</span> . $folder_name;<br> <span class="hljs-comment">// 获取文件的后缀名,因图片从剪贴板里黏贴时后缀名为空,所以此处确保后缀一直存在</span><br> $extension = strtolower($file->getClientOriginalExtension()) ?: <span class="hljs-string">'png'</span>;<br> <span class="hljs-comment">// 拼接文件名,加前缀是为了增加辨析度,前缀可以是相关数据模型的 ID</span><br> <span class="hljs-comment">// 值如:1_1493521050_7BVc9v9ujP.png</span><br> $filename = $file_prefix . <span class="hljs-string">'_'</span> . time() . <span class="hljs-string">'_'</span> . str_random(<span class="hljs-number">10</span>) . <span class="hljs-string">'.'</span> . $extension;<br> <span class="hljs-comment">// 如果上传的不是图片将终止操作</span><br> <span class="hljs-keyword">if</span> ( ! in_array($extension, $<span class="hljs-built_in">this</span>->allowed_ext)) {<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br> }<br> <span class="hljs-comment">// 将图片移动到我们的目标存储路径中</span><br> $file->move($upload_path, $filename);<br> <span class="hljs-comment">// 如果限制了图片宽度,就进行裁剪</span><br> <span class="hljs-keyword">if</span> ($max_width && $extension != <span class="hljs-string">'gif'</span>) {<br> <span class="hljs-comment">// 此类中封装的函数,用于裁剪图片</span><br> $<span class="hljs-built_in">this</span>->reduceSize($upload_path . <span class="hljs-string">'/'</span> . $filename, $max_width);<br> }<br> <span class="hljs-keyword">return</span> [<br> <span class="hljs-string">'path'</span> => config(<span class="hljs-string">'app.url'</span>) . <span class="hljs-string">"/$folder_name/$filename"</span><br> ];<br> }<br>}<br></code></pre></td></tr></table></figure><h5 id="安装图片裁剪扩展包"><a href="#安装图片裁剪扩展包" class="headerlink" title="安装图片裁剪扩展包"></a>安装图片裁剪扩展包</h5><figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">composer</span> <span class="hljs-string">require intervention/image</span><br></code></pre></td></tr></table></figure><h5 id="发布配置文件"><a href="#发布配置文件" class="headerlink" title="发布配置文件"></a>发布配置文件</h5><figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">php</span> <span class="hljs-string">artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"</span><br></code></pre></td></tr></table></figure><p>默认会生成config/image.php文件,不用做修改</p><h5 id="在封装的ImageUpload类中新添加图片裁剪方法"><a href="#在封装的ImageUpload类中新添加图片裁剪方法" class="headerlink" title="在封装的ImageUpload类中新添加图片裁剪方法"></a>在封装的ImageUpload类中新添加图片裁剪方法</h5><figure class="highlight php"><table><tr><td class="gutter"><pre><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><code class="hljs php"><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">reduceSize</span>(<span class="hljs-params"><span class="hljs-variable">$file_path</span>, <span class="hljs-variable">$max_width</span></span>)</span><br><span class="hljs-function"></span>{<br> <span class="hljs-comment">// 先实例化,传参是文件的磁盘物理路径</span><br> <span class="hljs-variable">$image</span> = <span class="hljs-title class_">Image</span>::<span class="hljs-title function_ invoke__">make</span>(<span class="hljs-variable">$file_path</span>);<br> <span class="hljs-comment">// 进行大小调整的操作</span><br> <span class="hljs-variable">$image</span>-><span class="hljs-title function_ invoke__">resize</span>(<span class="hljs-variable">$max_width</span>, <span class="hljs-literal">null</span>, function (<span class="hljs-variable">$constraint</span>) {<br> <span class="hljs-comment">// 设定宽度是 $max_width,高度等比例双方缩放</span><br> <span class="hljs-variable">$constraint</span>-><span class="hljs-title function_ invoke__">aspectRatio</span>();<br> <span class="hljs-comment">// 防止裁图时图片尺寸变大</span><br> <span class="hljs-variable">$constraint</span>-><span class="hljs-title function_ invoke__">upsize</span>();<br> });<br> <span class="hljs-comment">// 对图片修改后进行保存</span><br> <span class="hljs-variable">$image</span>-><span class="hljs-title function_ invoke__">save</span>();<br>}<br></code></pre></td></tr></table></figure><h5 id="集成Simditor编辑器到项目中"><a href="#集成Simditor编辑器到项目中" class="headerlink" title="集成Simditor编辑器到项目中"></a>集成Simditor编辑器到项目中</h5><ul><li>开始之前,先 下载 <a href="https://github.com/mycolorway/simditor/releases/download/v2.3.6/simditor-2.3.6.zip">Simditor</a></li><li>将下载的 simditor.css 放置于 resources/assets/editor/css 文件夹,将 hotkeys.js, module.js, simditor.js, uploader.js 四个文件放置于 resources/assets/editor/js 文件夹中</li><li>修改webpack.mix.js文件,将以上文件拷贝到public目录下 <figure class="highlight php"><table><tr><td class="gutter"><pre><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><code class="hljs php">let mix = <span class="hljs-keyword">require</span>(<span class="hljs-string">'laravel-mix'</span>);<br><br>mix.<span class="hljs-title function_ invoke__">js</span>(<span class="hljs-string">'resources/assets/js/app.js'</span>, <span class="hljs-string">'public/js'</span>)<br> .<span class="hljs-title function_ invoke__">sass</span>(<span class="hljs-string">'resources/assets/sass/app.scss'</span>, <span class="hljs-string">'public/css'</span>)<br> .<span class="hljs-title function_ invoke__">copyDirectory</span>(<span class="hljs-string">'resources/assets/editor/js'</span>, <span class="hljs-string">'public/js'</span>)<br> .<span class="hljs-title function_ invoke__">copyDirectory</span>(<span class="hljs-string">'resources/assets/editor/css'</span>, <span class="hljs-string">'public/css'</span>);<br></code></pre></td></tr></table></figure></li><li>在模板文件中引入 <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><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><code class="hljs html">@section('styles')<br> <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"{{ asset('css/simditor.css') }}"</span>></span><br>@stop<br>@section('scripts')<br> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ asset('js/module.js') }}"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ asset('js/hotkeys.js') }}"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ asset('js/uploader.js') }}"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ asset('js/simditor.js') }}"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"></span><br><span class="language-javascript"> $(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">ready</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){</span><br><span class="language-javascript"> <span class="hljs-keyword">var</span> editor = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Simditor</span>({</span><br><span class="language-javascript"> <span class="hljs-attr">textarea</span>: $(<span class="hljs-string">'#editor'</span>),</span><br><span class="language-javascript"> });</span><br><span class="language-javascript"> });</span><br><span class="language-javascript"> </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br>@stop<br></code></pre></td></tr></table></figure></li></ul><h5 id="编辑器上传图片-官方文档"><a href="#编辑器上传图片-官方文档" class="headerlink" title="编辑器上传图片 官方文档"></a>编辑器上传图片 <a href="http://simditor.tower.im/docs/doc-config.html#anchor-upload">官方文档</a></h5><ul><li>实例化设置 <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></pre></td><td class="code"><pre><code class="hljs js"><script><br> $(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">ready</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){<br> <span class="hljs-keyword">var</span> editor = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Simditor</span>({<br> <span class="hljs-attr">textarea</span>: $(<span class="hljs-string">'#editor'</span>),<br> <span class="hljs-attr">upload</span>: {<br> <span class="hljs-attr">url</span>: <span class="hljs-string">'{{ route('</span>topics.<span class="hljs-property">upload_image</span><span class="hljs-string">') }}'</span>,<br> <span class="hljs-attr">params</span>: { <span class="hljs-attr">_token</span>: <span class="hljs-string">'{{ csrf_token() }}'</span> },<br> <span class="hljs-attr">fileKey</span>: <span class="hljs-string">'upload_file'</span>,<br> <span class="hljs-attr">connectionCount</span>: <span class="hljs-number">3</span>,<br> <span class="hljs-attr">leaveConfirm</span>: <span class="hljs-string">'文件上传中,关闭此页面将取消上传。'</span><br> },<br> <span class="hljs-attr">pasteImage</span>: <span class="hljs-literal">true</span>,<br> });<br> });<br></script><br></code></pre></td></tr></table></figure>参数解释</li><li>pasteImage —— 设定是否支持图片黏贴上传,这里我们使用 true 进行开启;</li><li>url —— 处理上传图片的 URL;</li><li>params —— 表单提交的参数,Laravel 的 POST 请求必须带防止 CSRF 跨站请求伪造的 _token 参数;</li><li>fileKey —— 是服务器端获取图片的键值,我们设置为 upload_file;</li><li>connectionCount —— 最多只能同时上传 3 张图片;</li><li>leaveConfirm —— 上传过程中,用户关闭页面时的提醒。</li><li>服务端设置<br> 服务端需要返回的响应格式 <figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java">{<br> <span class="hljs-string">"success"</span>: <span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>,<br> <span class="hljs-string">"msg"</span>: <span class="hljs-string">"error message"</span>, # optional<br> <span class="hljs-string">"file_path"</span>: <span class="hljs-string">"[real file path]"</span><br>}<br></code></pre></td></tr></table></figure></li><li>服务端方法 <figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-keyword">public</span> function <span class="hljs-title function_">uploadImage</span><span class="hljs-params">(Request $request, ImageUploadHandler $uploader)</span><br> {<br> <span class="hljs-comment">// 初始化返回数据,默认是失败的</span><br> $data = [<br> <span class="hljs-string">'success'</span> => <span class="hljs-literal">false</span>,<br> <span class="hljs-string">'msg'</span> => <span class="hljs-string">'上传失败!'</span>,<br> <span class="hljs-string">'file_path'</span> => <span class="hljs-string">''</span><br> ];<br> <span class="hljs-comment">// 判断是否有上传文件,并赋值给 $file</span><br> <span class="hljs-keyword">if</span> ($file = $request->upload_file) {<br> <span class="hljs-comment">// 保存图片到本地</span><br> $result = $uploader->save($request->upload_file, <span class="hljs-string">'topics'</span>, \Auth::id(), <span class="hljs-number">1024</span>);<br> <span class="hljs-comment">// 图片保存成功的话</span><br> <span class="hljs-keyword">if</span> ($result) {<br> $data[<span class="hljs-string">'file_path'</span>] = $result[<span class="hljs-string">'path'</span>];<br> $data[<span class="hljs-string">'msg'</span>] = <span class="hljs-string">"上传成功!"</span>;<br> $data[<span class="hljs-string">'success'</span>] = <span class="hljs-literal">true</span>;<br> }<br> }<br> <span class="hljs-keyword">return</span> $data;<br> }<br></code></pre></td></tr></table></figure>ImageUploadHandler $uploader是注入封装的图片上传类</li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Laravel</tag>
</tags>
</entry>
<entry>
<title>spring-boot和vue前后端分离项目整合部署</title>
<link href="/2018/03/16/spring-boot%E5%92%8Cvue%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%A1%B9%E7%9B%AE%E6%95%B4%E5%90%88%E9%83%A8%E7%BD%B2/"/>
<url>/2018/03/16/spring-boot%E5%92%8Cvue%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%A1%B9%E7%9B%AE%E6%95%B4%E5%90%88%E9%83%A8%E7%BD%B2/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/ivan-stern-1072150-unsplash.jpg"></p><h5 id="vue和spring-boot的本地开发调试"><a href="#vue和spring-boot的本地开发调试" class="headerlink" title="vue和spring-boot的本地开发调试"></a>vue和spring-boot的本地开发调试</h5><span id="more"></span><h6 id="项目是前后台分离开发,后端spring-boot只提供api接口,前端vue通过vue-axios请求后端接口获得数据,spring-boot项目初始化后更改port端口号"><a href="#项目是前后台分离开发,后端spring-boot只提供api接口,前端vue通过vue-axios请求后端接口获得数据,spring-boot项目初始化后更改port端口号" class="headerlink" title="项目是前后台分离开发,后端spring-boot只提供api接口,前端vue通过vue-axios请求后端接口获得数据,spring-boot项目初始化后更改port端口号"></a>项目是前后台分离开发,后端spring-boot只提供api接口,前端vue通过vue-axios请求后端接口获得数据,spring-boot项目初始化后更改port端口号</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">server.<span class="hljs-property">port</span>=<span class="hljs-number">8989</span><br></code></pre></td></tr></table></figure><h6 id="更改vue项目config文件下的index-js文件"><a href="#更改vue项目config文件下的index-js文件" class="headerlink" title="更改vue项目config文件下的index.js文件"></a>更改vue项目config文件下的index.js文件</h6><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><code class="hljs javascript"><span class="hljs-attr">dev</span>: {<br><br> <span class="hljs-comment">// Paths</span><br> <span class="hljs-attr">assetsSubDirectory</span>: <span class="hljs-string">'static'</span>,<br> <span class="hljs-attr">assetsPublicPath</span>: <span class="hljs-string">'/back'</span>,<br> <span class="hljs-attr">proxyTable</span>: {<br> },<br><br> <span class="hljs-comment">// Various Dev Server settings</span><br> <span class="hljs-attr">host</span>: <span class="hljs-string">'localhost'</span>, <span class="hljs-comment">// can be overwritten by process.env.HOST</span><br> <span class="hljs-attr">port</span>: <span class="hljs-number">8080</span>, <span class="hljs-comment">// can be overwritten by process.env.PORT, if port is in use, a free one will be determined</span><br> },<br></code></pre></td></tr></table></figure><h6 id="更改以下三项"><a href="#更改以下三项" class="headerlink" title="更改以下三项"></a>更改以下三项</h6><ul><li><p>assetsPublicPath:/后端项目名</p></li><li><p>host:localhost</p></li><li><p>port:8080 这个端口号与spring-boot设置启动的端口号不同就可以</p></li></ul><h6 id="封装axios请求接口文件"><a href="#封装axios请求接口文件" class="headerlink" title="封装axios请求接口文件"></a>封装axios请求接口文件</h6><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></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span><br><br>axios.<span class="hljs-property">defaults</span>.<span class="hljs-property">headers</span>.<span class="hljs-property">post</span>[<span class="hljs-string">'Content-Type'</span>] = <span class="hljs-string">'application/x-www-form-urlencoded'</span><br><br><span class="hljs-comment">// 请求拦截器</span><br>axios.<span class="hljs-property">interceptors</span>.<span class="hljs-property">request</span>.<span class="hljs-title function_">use</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">config</span>) {<br> <span class="hljs-keyword">return</span> config;<br>}, <span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) {<br> <span class="hljs-keyword">return</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>(error);<br>})<br><span class="hljs-comment">// 响应拦截器</span><br>axios.<span class="hljs-property">interceptors</span>.<span class="hljs-property">response</span>.<span class="hljs-title function_">use</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">response</span>) {<br> <span class="hljs-keyword">return</span> response;<br>}, <span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) {<br> <span class="hljs-keyword">return</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>(error);<br>})<br><br><br><span class="hljs-keyword">var</span> beforeUrl = <span class="hljs-string">'http://localhost:8989/'</span>;<br><span class="hljs-comment">// 封装axios请求</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">axiosFun</span>(<span class="hljs-params">url,params,method = <span class="hljs-string">'post'</span></span>) {<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {<br> <span class="hljs-title function_">axios</span>({<br> <span class="hljs-attr">method</span>: method,<br> <span class="hljs-attr">url</span>: beforeUrl + url,<br> <span class="hljs-attr">data</span>: params<br> }).<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">response</span> =></span> {<br> <span class="hljs-title function_">resolve</span>(response.<span class="hljs-property">data</span>);<br> }).<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">error</span>) =></span> {<br> <span class="hljs-title function_">reject</span>(error);<br> })<br> })<br>}<br><br><span class="hljs-comment">// 封装axios的get请求</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">get</span>(<span class="hljs-params">url</span>) {<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {<br> axios.<span class="hljs-title function_">get</span>(beforeUrl + url)<br> .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">response</span> =></span> {<br> <span class="hljs-title function_">resolve</span>(response.<span class="hljs-property">data</span>);<br> })<br> .<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">error</span>) =></span> {<br> <span class="hljs-title function_">reject</span>(error);<br> })<br> })<br>}<br><br><span class="hljs-comment">// 封装axios的put请求</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">put</span>(<span class="hljs-params">url, params</span>) {<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {<br> axios.<span class="hljs-title function_">put</span>(beforeUrl + url + params)<br> .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">response</span> =></span> {<br> <span class="hljs-title function_">resolve</span>(response.<span class="hljs-property">data</span>);<br> })<br> .<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">error</span>) =></span> {<br> <span class="hljs-title function_">reject</span>(error);<br> })<br> })<br>}<br><span class="hljs-comment">// 封装axios的del请求</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">del</span>(<span class="hljs-params">url,params</span>) {<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {<br> axios.<span class="hljs-title function_">delete</span>(beforeUrl + url + params)<br> .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">response</span> =></span> {<br> <span class="hljs-title function_">resolve</span>(response.<span class="hljs-property">data</span>);<br> })<br> .<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">error</span>) =></span> {<br> <span class="hljs-title function_">reject</span>(error);<br> })<br> })<br>}<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {<br> <span class="hljs-comment">// 获取省份列表</span><br> <span class="hljs-title function_">getProvince</span>(<span class="hljs-params"></span>) {<br> <span class="hljs-keyword">return</span> <span class="hljs-title function_">get</span>(<span class="hljs-string">'address/province'</span>);<br> },<br> ...<br>}<br><br></code></pre></td></tr></table></figure><h6 id="在vue文件中调用封装的api接口文件"><a href="#在vue文件中调用封装的api接口文件" class="headerlink" title="在vue文件中调用封装的api接口文件"></a>在vue文件中调用封装的api接口文件</h6><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><code class="hljs javascript"><script><br> <span class="hljs-keyword">import</span> api <span class="hljs-keyword">from</span> <span class="hljs-string">'../../api/api'</span><br> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {<br> data () {<br> <span class="hljs-keyword">return</span> {<br> <span class="hljs-attr">provinceList</span>: []<br> }<br> },<br> created () {<br> api.<span class="hljs-title function_">getProvince</span>()<br> .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {<br> <span class="hljs-variable language_">this</span>.<span class="hljs-property">provinceList</span> = res.<span class="hljs-property">data</span><br> })<br> }<br> }<br></script><br></code></pre></td></tr></table></figure><h6 id="解决请求接口跨域问题"><a href="#解决请求接口跨域问题" class="headerlink" title="解决请求接口跨域问题"></a>解决请求接口跨域问题</h6><p>在spring-boot中新建配置类</p><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@Configuration</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">CORSConfig</span> {<br><br> <span class="hljs-meta">@Bean</span><br> <span class="hljs-keyword">public</span> WebMvcConfigurer <span class="hljs-title function_">corsConfigurer</span><span class="hljs-params">()</span> {<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">WebMvcConfigurerAdapter</span>() {<br> <span class="hljs-meta">@Override</span><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">addCorsMappings</span><span class="hljs-params">(CorsRegistry registry)</span> {<br> registry.addMapping(<span class="hljs-string">"/**"</span>)<br> .allowedOrigins(ALL)<br> .allowedMethods(ALL)<br> .allowedHeaders(ALL)<br> .allowCredentials(<span class="hljs-literal">true</span>);<br> }<br> };<br> }<br>}<br></code></pre></td></tr></table></figure><h5 id="整合部署"><a href="#整合部署" class="headerlink" title="整合部署"></a>整合部署</h5><h6 id="更改API接口请求文件的请求头"><a href="#更改API接口请求文件的请求头" class="headerlink" title="更改API接口请求文件的请求头"></a>更改API接口请求文件的请求头</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> beforeUrl = <span class="hljs-string">'/'</span>;<br></code></pre></td></tr></table></figure><h6 id="更改vue项目config文件下index-js文件"><a href="#更改vue项目config文件下index-js文件" class="headerlink" title="更改vue项目config文件下index.js文件"></a>更改vue项目config文件下index.js文件</h6><p>更改assetsPublicPath一项即可,替换为你的spring-boot的项目名</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><code class="hljs javascript"><span class="hljs-attr">build</span>: {<br> <span class="hljs-comment">// Template for index.html</span><br> <span class="hljs-attr">index</span>: path.<span class="hljs-title function_">resolve</span>(__dirname, <span class="hljs-string">'../dist/index.html'</span>),<br><br> <span class="hljs-comment">// Paths</span><br> <span class="hljs-attr">assetsRoot</span>: path.<span class="hljs-title function_">resolve</span>(__dirname, <span class="hljs-string">'../dist'</span>),<br> <span class="hljs-attr">assetsSubDirectory</span>: <span class="hljs-string">'static'</span>,<br> <span class="hljs-attr">assetsPublicPath</span>: <span class="hljs-string">'/back'</span>,<br> }<br></code></pre></td></tr></table></figure><h6 id="执行npm-run-build-打包vue项目"><a href="#执行npm-run-build-打包vue项目" class="headerlink" title="执行npm run build 打包vue项目"></a>执行npm run build 打包vue项目</h6><p>项目打包后在dist文件下生成一个static文件夹和index.html文件,将这两个拷贝到spring-boot项目的resources文件夹下,若已经存在static文件替换即可</p><h6 id="在spring-boot中新添加文件防止访问接口出现乱码"><a href="#在spring-boot中新添加文件防止访问接口出现乱码" class="headerlink" title="在spring-boot中新添加文件防止访问接口出现乱码"></a>在spring-boot中新添加文件防止访问接口出现乱码</h6><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Configuration</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">WebMvcConfig</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">WebMvcConfigurerAdapter</span>{<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 配置静态文件路径</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> registry</span><br><span class="hljs-comment"> */</span><br> <span class="hljs-meta">@Override</span><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">addResourceHandlers</span><span class="hljs-params">(ResourceHandlerRegistry registry)</span> {<br> registry.addResourceHandler(<span class="hljs-string">"/static/**"</span>).addResourceLocations(<span class="hljs-string">"classpath:/static/"</span>);<br> }<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 防止出现乱码</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-meta">@Bean</span><br> <span class="hljs-keyword">public</span> HttpMessageConverter<String> <span class="hljs-title function_">responseBodyConverter</span><span class="hljs-params">()</span> {<br> <span class="hljs-type">StringHttpMessageConverter</span> <span class="hljs-variable">converter</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">StringHttpMessageConverter</span>(<br> Charset.forName(<span class="hljs-string">"UTF-8"</span>));<br> <span class="hljs-keyword">return</span> converter;<br> }<br><br> <span class="hljs-meta">@Override</span><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">configureMessageConverters</span><span class="hljs-params">(List<HttpMessageConverter<?>> converters)</span> {<br> <span class="hljs-built_in">super</span>.configureMessageConverters(converters);<br> converters.add(responseBodyConverter());<br> }<br><br> <span class="hljs-meta">@Override</span><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">configureContentNegotiation</span><span class="hljs-params">(ContentNegotiationConfigurer configurer)</span> {<br> configurer.favorPathExtension(<span class="hljs-literal">false</span>);<br> }<br>}<br></code></pre></td></tr></table></figure><h6 id="在application中添加配置项"><a href="#在application中添加配置项" class="headerlink" title="在application中添加配置项"></a>在application中添加配置项</h6><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><code class="hljs javascript">spring.<span class="hljs-property">thymeleaf</span>.<span class="hljs-property">prefix</span>=<span class="hljs-attr">classpath</span>:/<br>spring.<span class="hljs-property">thymeleaf</span>.<span class="hljs-property">mode</span> =<span class="hljs-title class_">HTML5</span><br>spring.<span class="hljs-property">thymeleaf</span>.<span class="hljs-property">cache</span>=<span class="hljs-literal">true</span><br>spring.<span class="hljs-property">thymeleaf</span>.<span class="hljs-property">content</span>-type=text/html<br>spring.<span class="hljs-property">http</span>.<span class="hljs-property">encoding</span>.<span class="hljs-property">force</span>=<span class="hljs-literal">true</span><br>spring.<span class="hljs-property">http</span>.<span class="hljs-property">encoding</span>.<span class="hljs-property">charset</span>=<span class="hljs-variable constant_">UTF</span>-<span class="hljs-number">8</span><br>spring.<span class="hljs-property">http</span>.<span class="hljs-property">encoding</span>.<span class="hljs-property">enabled</span>=<span class="hljs-literal">true</span><br>server.<span class="hljs-property">tomcat</span>.<span class="hljs-property">uri</span>-encoding=<span class="hljs-variable constant_">UTF</span>-<span class="hljs-number">8</span><br></code></pre></td></tr></table></figure><p><em>将spring-boot项目打包部署即可,之前看有文章说还需要写一个访问index.html的根路由,但是我操作之后一直访问不了index.html文件,我将index.html文件直接移到static文件下面,启动spring-boot项目访问根路由直接进入了index.html文件</em></p><p><a href="http://sparkgis.com/java/2017/12/vue2spring-boot%E5%BC%80%E5%8F%91%E5%92%8C%E9%83%A8%E7%BD%B2-%E5%8E%9F-vue2spring-boot%E5%BC%80%E5%8F%91%E5%92%8C%E9%83%A8%E7%BD%B2-%E8%B5%B7%E9%A3%8E%E4%BA%86426/">参考文章</a></p>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
<tag>Vue</tag>
</tags>
</entry>
<entry>
<title>spring-boot项目中快速接入支付宝</title>
<link href="/2017/12/29/spring-boot%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BF%AB%E9%80%9F%E6%8E%A5%E5%85%A5%E6%94%AF%E4%BB%98%E5%AE%9D/"/>
<url>/2017/12/29/spring-boot%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BF%AB%E9%80%9F%E6%8E%A5%E5%85%A5%E6%94%AF%E4%BB%98%E5%AE%9D/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/mpumelelo-macu.jpg"></p><h5 id="添加maven依赖"><a href="#添加maven依赖" class="headerlink" title="添加maven依赖"></a>添加maven依赖</h5><span id="more"></span><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>net.guerlab<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>sdk-alipay-starter<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>1.0.3<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure><h5 id="在proprties配置文件中添加支付宝相关配置"><a href="#在proprties配置文件中添加支付宝相关配置" class="headerlink" title="在proprties配置文件中添加支付宝相关配置"></a>在proprties配置文件中添加支付宝相关配置</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java">sdk.alipay.dev=<span class="hljs-literal">true</span> 默认<span class="hljs-literal">false</span>,为<span class="hljs-literal">true</span>表示使用沙箱环境<br>sdk.alipay.sign-type=RSA2 签名算法 <br>sdk.alipay.app-id= appid<br>sdk.alipay.<span class="hljs-keyword">private</span>-key= 创建的应用私钥<br>sdk.alipay.alipay-<span class="hljs-keyword">public</span>-key= 支付宝公钥<br></code></pre></td></tr></table></figure><h5 id="创建AlipayService处理主要支付逻辑"><a href="#创建AlipayService处理主要支付逻辑" class="headerlink" title="创建AlipayService处理主要支付逻辑"></a>创建AlipayService处理主要支付逻辑</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.demo.service;<br><br><br><span class="hljs-keyword">import</span> com.alibaba.fastjson.JSONObject;<br><span class="hljs-keyword">import</span> com.alipay.api.AlipayClient;<br><span class="hljs-keyword">import</span> com.alipay.api.request.AlipayTradePagePayRequest;<br><span class="hljs-keyword">import</span> com.alipay.api.request.AlipayTradePayRequest;<br><span class="hljs-keyword">import</span> com.alipay.api.request.AlipayTradeWapPayRequest;<br><span class="hljs-keyword">import</span> com.demo.enums.OrderStatusEnum;<br><span class="hljs-keyword">import</span> com.demo.mappers.OrderMapper;<br><span class="hljs-keyword">import</span> com.demo.model.Order;<br><span class="hljs-keyword">import</span> lombok.extern.slf4j.Slf4j;<br><span class="hljs-keyword">import</span> net.guerlab.sdk.alipay.controller.AlipayAbstractController;<br><span class="hljs-keyword">import</span> org.springframework.beans.factory.annotation.Autowired;<br><span class="hljs-keyword">import</span> org.springframework.stereotype.Service;<br><br><span class="hljs-keyword">import</span> javax.servlet.http.HttpServletRequest;<br><span class="hljs-keyword">import</span> javax.servlet.http.HttpServletResponse;<br><span class="hljs-keyword">import</span> java.io.PrintWriter;<br><br><span class="hljs-meta">@Service</span><br><span class="hljs-meta">@Slf4j</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">AlipayService</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">AlipayAbstractController</span>{<br><br> <span class="hljs-meta">@Autowired</span><br> <span class="hljs-keyword">private</span> AlipayClient client;<br><br> <span class="hljs-meta">@Autowired</span><br> <span class="hljs-keyword">private</span> OrderMapper orderMapper;<br><br><br> <span class="hljs-keyword">public</span> String <span class="hljs-title function_">alipay</span><span class="hljs-params">(String orderId, HttpServletResponse httpResponse)</span>{<br> <span class="hljs-type">Order</span> <span class="hljs-variable">order</span> <span class="hljs-operator">=</span> orderMapper.selectByPrimaryKey(orderId);<br> <span class="hljs-type">JSONObject</span> <span class="hljs-variable">data</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">JSONObject</span>();<br> data.put(<span class="hljs-string">"out_trade_no"</span>,order.getOrderId()); <span class="hljs-comment">//商户订单号</span><br> data.put(<span class="hljs-string">"product_code"</span>,<span class="hljs-string">"FAST_INSTANT_TRADE_PAY"</span>); <span class="hljs-comment">//产品码, APP支付 QUICK_MSECURITY_PAY, PC支付 FAST_INSTANT_TRADE_PAY, 移动H5支付 QUICK_WAP_PAY</span><br> data.put(<span class="hljs-string">"total_amount"</span>,order.getOrderAccount()); <span class="hljs-comment">//订单金额</span><br> data.put(<span class="hljs-string">"subject"</span>,<span class="hljs-string">"education order test"</span>); <span class="hljs-comment">//订单标题</span><br> log.info(<span class="hljs-string">"data = {}"</span>,data.toJSONString());<br><br> <span class="hljs-comment">//app支付</span><br><span class="hljs-comment">// AlipayTradePayRequest request = new AlipayTradePayRequest();</span><br> <span class="hljs-comment">//pc支付</span><br> <span class="hljs-type">AlipayTradePagePayRequest</span> <span class="hljs-variable">request</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">AlipayTradePagePayRequest</span>();<br> <span class="hljs-comment">//移动h5支付</span><br><span class="hljs-comment">// AlipayTradeWapPayRequest request = new AlipayTradeWapPayRequest();</span><br><br> request.setNotifyUrl(<span class="hljs-string">"http://127.0.0.1:8080/order/notify/"</span>+orderId); <span class="hljs-comment">//异步通知地址,必须为外网可以访问的地址 </span><br> request.setBizContent(data.toJSONString()); <span class="hljs-comment">//业务参数</span><br><br> <span class="hljs-comment">//APP支付</span><br><span class="hljs-comment">// return client.sdkExecute(request).getBody();</span><br><br><span class="hljs-comment">// pc支付</span><br> <span class="hljs-keyword">try</span>{<br> <span class="hljs-type">PrintWriter</span> <span class="hljs-variable">writer</span> <span class="hljs-operator">=</span> httpResponse.getWriter();<br> httpResponse.setContentType(<span class="hljs-string">"text/html;charset=UTF-8"</span>);<br> writer.write(client.pageExecute(request).getBody());<br> writer.flush();<br> writer.close();<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br> }<span class="hljs-keyword">catch</span> (Exception e){<br> <span class="hljs-keyword">return</span> <span class="hljs-string">"创建订单失败"</span>;<br> }<br> }<br><br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 异步请求处理</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> orderId</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> request</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">public</span> String <span class="hljs-title function_">notify</span><span class="hljs-params">( String orderId, HttpServletRequest request)</span>{<br> log.error(<span class="hljs-string">"orderId={}"</span>,orderId);<br> log.error(<span class="hljs-string">"request={}"</span>,request);<br> <span class="hljs-keyword">if</span> (!notify0(request.getParameterMap())){<br> <span class="hljs-comment">//处理签名失败</span><br> }<br><br> request.getParameter(<span class="hljs-string">"trade_no"</span>); <span class="hljs-comment">//获取请求参数中的商户订单号</span><br><br> <span class="hljs-type">Order</span> <span class="hljs-variable">order</span> <span class="hljs-operator">=</span> orderMapper.selectByPrimaryKey(orderId);<br> order.setOrderStatus(OrderStatusEnum.SUCCESS.getCode());<br> <span class="hljs-keyword">try</span> {<br> orderMapper.updateByPrimaryKey(order);<br> <span class="hljs-keyword">return</span> <span class="hljs-string">"success"</span>;<br> }<span class="hljs-keyword">catch</span> (Exception e){<br> log.error(<span class="hljs-string">"【订单支付修改订单状态错误】 orderId={}"</span>,orderId);<br> <span class="hljs-keyword">return</span> <span class="hljs-string">"pay error"</span>;<br> }<br> }<br>}<br></code></pre></td></tr></table></figure><ul><li><p>调用service方法alipay方法传入orderId即可发起支付</p></li><li><p>异步回调地址必须是外网可以访问的地址,否则签名会出错</p></li><li><p>在设置订单标题时填中文的时候有时候也会出现签名报错,在打印出的签名中显示中文乱码,改用英文或者设置字符集,但是我设置了gb2312字符集好像没用</p></li><li><p>如果遇到权限、或者其他问题可设置沙箱环境测试,只需将应用公钥上传到沙箱环境,然后在配置中设置sdk.alipay.dev=true,更改沙箱appid,如果沙箱测试没问题,应该是应用权限不足,可在蚂蚁金服开放平台查看相关文档。</p></li></ul><blockquote><p><a href="https://gitee.com/guerlab_net/sdk-alipay?utm_source=tuicool&utm_medium=referral">原项目地址</a></p></blockquote>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
<tag>Alipay</tag>
</tags>
</entry>
<entry>
<title>spring-boot中的redis</title>
<link href="/2017/12/23/spring-boot%E4%B8%AD%E7%9A%84redis/"/>
<url>/2017/12/23/spring-boot%E4%B8%AD%E7%9A%84redis/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/jonathan-chai-1503195-unsplash.jpg"></p><h5 id="添加maven依赖"><a href="#添加maven依赖" class="headerlink" title="添加maven依赖"></a>添加maven依赖</h5><span id="more"></span><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>redis.clients<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>jedis<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>2.9.0<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure><h5 id="添加配置文件"><a href="#添加配置文件" class="headerlink" title="添加配置文件"></a>添加配置文件</h5><ul><li>添加实例化配置</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.demo.tools.redisdb;<br><br><span class="hljs-keyword">import</span> java.io.FileInputStream;<br><span class="hljs-keyword">import</span> java.io.FileNotFoundException;<br><span class="hljs-keyword">import</span> java.io.IOException;<br><span class="hljs-keyword">import</span> java.io.InputStream;<br><span class="hljs-keyword">import</span> java.util.ArrayList;<br><span class="hljs-keyword">import</span> java.util.List;<br><span class="hljs-keyword">import</span> java.util.Properties;<br><br><span class="hljs-keyword">import</span> lombok.extern.slf4j.Slf4j;<br><span class="hljs-keyword">import</span> org.apache.log4j.Logger;<br><span class="hljs-keyword">import</span> redis.clients.jedis.Jedis;<br><span class="hljs-keyword">import</span> redis.clients.jedis.JedisPool;<br><span class="hljs-keyword">import</span> redis.clients.jedis.JedisPoolConfig;<br><span class="hljs-keyword">import</span> redis.clients.jedis.JedisShardInfo;<br><span class="hljs-keyword">import</span> redis.clients.jedis.ShardedJedis;<br><span class="hljs-keyword">import</span> redis.clients.jedis.ShardedJedisPool;<br><br><span class="hljs-meta">@Slf4j</span><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">RedisManager</span><br>{<br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-type">JedisPool</span> <span class="hljs-variable">pool</span> <span class="hljs-operator">=</span> <span class="hljs-literal">null</span>;<br><span class="hljs-keyword">private</span> <span class="hljs-type">String</span> <span class="hljs-variable">redisHost</span> <span class="hljs-operator">=</span> <span class="hljs-string">"127.0.0.1"</span>;<br><span class="hljs-keyword">private</span> <span class="hljs-type">String</span> <span class="hljs-variable">redisAuth</span> <span class="hljs-operator">=</span> <span class="hljs-string">""</span>;<br><span class="hljs-keyword">private</span> <span class="hljs-type">int</span> <span class="hljs-variable">redisPort</span> <span class="hljs-operator">=</span> <span class="hljs-number">6379</span>;<br><span class="hljs-keyword">private</span> <span class="hljs-type">int</span> <span class="hljs-variable">redisIndex</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>;<br><span class="hljs-keyword">private</span> <span class="hljs-type">int</span> <span class="hljs-variable">timeout</span> <span class="hljs-operator">=</span> <span class="hljs-number">2000</span>;<br><br><span class="hljs-comment">//可用连接实例的最大数目,默认值为8; </span><br> <span class="hljs-comment">//如果赋值为-1,则表示不限制;如果pool已经分配了maxActive个jedis实例,则此时pool的状态为exhausted(耗尽)。 </span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-type">int</span> <span class="hljs-variable">MAX_ACTIVE</span> <span class="hljs-operator">=</span> <span class="hljs-number">1024</span>;<br> <span class="hljs-comment">//控制一个pool最多有多少个状态为idle(空闲的)的jedis实例,默认值也是8。 </span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-type">int</span> <span class="hljs-variable">MAX_IDLE</span> <span class="hljs-operator">=</span> <span class="hljs-number">2000</span>;<br> <span class="hljs-comment">//等待可用连接的最大时间,单位毫秒,默认值为-1,表示永不超时。如果超过等待时间,则直接抛出JedisConnectionException; </span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-type">int</span> <span class="hljs-variable">MAX_WAIT</span> <span class="hljs-operator">=</span> <span class="hljs-number">10000</span>; <br><br> <span class="hljs-comment">//在borrow一个jedis实例时,是否提前进行validate操作;如果为true,则得到的jedis实例均是可用的; </span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-type">boolean</span> <span class="hljs-variable">TEST_ON_BORROW</span> <span class="hljs-operator">=</span> <span class="hljs-literal">true</span>;<br><br><br><span class="hljs-keyword">public</span> <span class="hljs-title function_">RedisManager</span><span class="hljs-params">()</span> {}<br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">initPool</span><span class="hljs-params">(String host,<span class="hljs-type">int</span> port, String auth,<span class="hljs-type">int</span> index,<span class="hljs-type">int</span> timeout)</span>{<br><br> <span class="hljs-keyword">if</span>(<span class="hljs-literal">null</span> == pool){<br> <span class="hljs-keyword">synchronized</span> (JedisPool.class) {<br> <span class="hljs-keyword">if</span>(<span class="hljs-literal">null</span> == pool){<br><span class="hljs-built_in">this</span>.redisAuth = auth;<br><span class="hljs-built_in">this</span>.redisHost = host;<br><span class="hljs-built_in">this</span>.redisPort = port;<br><span class="hljs-built_in">this</span>.redisIndex = index;<br><span class="hljs-built_in">this</span>.timeout = timeout;<br><br> <span class="hljs-type">JedisPoolConfig</span> <span class="hljs-variable">config</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">JedisPoolConfig</span>();<br> config.setMaxTotal(MAX_ACTIVE); <br> config.setMaxIdle(MAX_IDLE); <br> config.setMaxWaitMillis(MAX_WAIT); <br> config.setTestOnBorrow(TEST_ON_BORROW); <br> pool = <span class="hljs-keyword">new</span> <span class="hljs-title class_">JedisPool</span>(config, <span class="hljs-built_in">this</span>.redisHost, <span class="hljs-built_in">this</span>.redisPort, <span class="hljs-built_in">this</span>.timeout, <span class="hljs-built_in">this</span>.redisAuth, <span class="hljs-built_in">this</span>.redisIndex);<br> }<br> }<br> }<br>}<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 获取Jedis实例</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">synchronized</span> <span class="hljs-keyword">static</span> Jedis <span class="hljs-title function_">getJedis</span><span class="hljs-params">()</span> {<br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-keyword">if</span> (pool != <span class="hljs-literal">null</span>) {<br> <span class="hljs-type">Jedis</span> <span class="hljs-variable">resource</span> <span class="hljs-operator">=</span> pool.getResource();<br><span class="hljs-keyword">return</span> resource;<br> } <span class="hljs-keyword">else</span> {<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br> }<br> } <span class="hljs-keyword">catch</span> (Exception e) {<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br> }<br>}<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 回收Jedis对象资源</span><br><span class="hljs-comment"> *</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> jedis</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">synchronized</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">returnResource</span><span class="hljs-params">(Jedis jedis)</span> {<br><span class="hljs-keyword">if</span> (jedis != <span class="hljs-literal">null</span>) {<br><span class="hljs-comment">//pool.returnResource(jedis);</span><br>jedis.close();<br>}<br>}<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * Jedis对象出异常的时候,回收Jedis对象资源</span><br><span class="hljs-comment"> * 主要是将pool还回到链接池中,避免创建链接时的耗时和链接不够用</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> jedis</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">synchronized</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">returnBrokenResource</span><span class="hljs-params">(Jedis jedis)</span> {<br><span class="hljs-keyword">if</span> (jedis != <span class="hljs-literal">null</span>) {<br><span class="hljs-comment">//pool.returnBrokenResource(jedis);</span><br>jedis.close();<br>}<br>}<br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">synchronized</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">destroy</span><span class="hljs-params">()</span> {<br> pool.destroy();<br>}<br><br>}<br></code></pre></td></tr></table></figure><ul><li>在resources添加redisdb.properties配置文件,也可以直接添加到application配置文件文件中</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"># redis服务器地址 <br>redisdb.host=<span class="hljs-number">127.0</span><span class="hljs-number">.0</span><span class="hljs-number">.1</span><br># redis映射端口号<br>redisdb.port=<span class="hljs-number">6379</span><br># redis数据库索引(默认为<span class="hljs-number">0</span>)<br>redisdb.index=<span class="hljs-number">2</span><br># redis链接超时时间<br>redisdb.timeout=<span class="hljs-number">2000</span><br></code></pre></td></tr></table></figure><ul><li>添加常用方法调用类</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.demo.tools.redisdb;<br><br><br><span class="hljs-keyword">import</span> java.io.IOException;<br><span class="hljs-keyword">import</span> java.io.InputStream;<br><span class="hljs-keyword">import</span> java.util.List;<br><span class="hljs-keyword">import</span> java.util.Properties;<br><br><span class="hljs-keyword">import</span> lombok.extern.slf4j.Slf4j;<br><span class="hljs-keyword">import</span> org.apache.ibatis.io.Resources;<br><span class="hljs-keyword">import</span> org.springframework.stereotype.Component;<br><br><span class="hljs-keyword">import</span> com.demo.tools.obj.SerializeUtil;<br><br><span class="hljs-keyword">import</span> redis.clients.jedis.Jedis;<br><br><span class="hljs-meta">@Component</span><br><span class="hljs-meta">@Slf4j</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">RedisUtil</span> {<br><span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-type">RedisManager</span> <span class="hljs-variable">redisManager</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">RedisManager</span>();<br><br><span class="hljs-keyword">public</span> <span class="hljs-title function_">RedisUtil</span><span class="hljs-params">()</span> {<br><span class="hljs-built_in">super</span>();<br><br> <span class="hljs-type">Properties</span> <span class="hljs-variable">prop</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Properties</span>();<br><span class="hljs-type">InputStream</span> <span class="hljs-variable">in</span> <span class="hljs-operator">=</span> <span class="hljs-literal">null</span>;<br><span class="hljs-keyword">try</span> {<br>in = Resources.getResourceAsStream(<span class="hljs-string">"redisdb.properties"</span>);<span class="hljs-comment">//new FileInputStream("redisdb.properties");</span><br>prop.load(in);<br><span class="hljs-type">String</span> <span class="hljs-variable">redisHost</span> <span class="hljs-operator">=</span> prop.getProperty(<span class="hljs-string">"redisdb.host"</span>); <br><span class="hljs-type">int</span> <span class="hljs-variable">redisPort</span> <span class="hljs-operator">=</span> Integer.valueOf(prop.getProperty(<span class="hljs-string">"redisdb.port"</span>)); <br><span class="hljs-type">String</span> <span class="hljs-variable">redisAuth</span> <span class="hljs-operator">=</span> prop.getProperty(<span class="hljs-string">"redisdb.auth"</span>);<br><span class="hljs-type">int</span> <span class="hljs-variable">redisTimeout</span> <span class="hljs-operator">=</span> Integer.valueOf(prop.getProperty(<span class="hljs-string">"redisdb.timeout"</span>));<br><span class="hljs-type">int</span> <span class="hljs-variable">index</span> <span class="hljs-operator">=</span> Integer.valueOf(prop.getProperty(<span class="hljs-string">"redisdb.index"</span>));<br>redisManager.initPool(redisHost, redisPort, redisAuth,index,redisTimeout);<br>} <span class="hljs-keyword">catch</span> (IOException e) {<br><span class="hljs-comment">// TODO Auto-generated catch block</span><br>log.error(<span class="hljs-string">"【redis链接错误】"</span>);<br>e.printStackTrace();<br>}<br>}<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 字符串存储</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> key</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> value</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> expire</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">boolean</span> <span class="hljs-title function_">set</span><span class="hljs-params">(String key, String value, <span class="hljs-type">int</span> expire)</span> {<br><br><span class="hljs-type">Jedis</span> <span class="hljs-variable">jedis</span> <span class="hljs-operator">=</span> RedisManager.getJedis();<br><span class="hljs-keyword">if</span>(<span class="hljs-literal">null</span> == jedis) {<br><span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>}<br><span class="hljs-keyword">try</span> {<br>jedis.set(key, value);<br><span class="hljs-comment">//System.out.print("redis port" + redisManager.getRedisPort());</span><br>log.info(<span class="hljs-string">"【set pool={}】"</span>,jedis);<br>jedis.expire(key, expire);<br><span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>}<span class="hljs-keyword">catch</span> (Exception e){<br>log.error(<span class="hljs-string">"redis error{}"</span>,e.getCause());<br>RedisManager.returnBrokenResource(jedis);<br><span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>}<span class="hljs-keyword">finally</span> {<br>RedisManager.returnResource(jedis);<br>}<br>}<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 获取字符串</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> key</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> String <span class="hljs-title function_">get</span><span class="hljs-params">(String key)</span> {<br><span class="hljs-type">Jedis</span> <span class="hljs-variable">jedis</span> <span class="hljs-operator">=</span> RedisManager.getJedis();<br><span class="hljs-keyword">if</span>(<span class="hljs-literal">null</span> == jedis) {<br><span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>}<br><span class="hljs-keyword">try</span> {<br><span class="hljs-type">String</span> <span class="hljs-variable">value</span> <span class="hljs-operator">=</span> jedis.get(key);<br>log.info(<span class="hljs-string">"【get pool={}】"</span>,jedis);<br><span class="hljs-keyword">return</span> value;<br>}<span class="hljs-keyword">catch</span> (Exception e){<br>log.error(<span class="hljs-string">"redis error{}"</span>,e.getCause());<br>RedisManager.returnBrokenResource(jedis);<br><span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>}<span class="hljs-keyword">finally</span> {<br>RedisManager.returnResource(jedis);<br>}<br>}<br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">boolean</span> <span class="hljs-title function_">del</span><span class="hljs-params">(String key)</span> {<br><span class="hljs-type">Jedis</span> <span class="hljs-variable">jedis</span> <span class="hljs-operator">=</span> RedisManager.getJedis();<br><span class="hljs-keyword">if</span>(<span class="hljs-literal">null</span> == jedis) {<br><span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>} <span class="hljs-keyword">else</span> {<br>jedis.del(key);<br>RedisManager.returnResource(jedis);<br><span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>}<br>}<br><br><span class="hljs-comment">/** </span><br><span class="hljs-comment"> * 设置对象 </span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> key </span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> obj </span><br><span class="hljs-comment"> */</span> <br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">boolean</span> <span class="hljs-title function_">setObject</span><span class="hljs-params">(String key ,Object obj)</span>{<br> <span class="hljs-type">Jedis</span> <span class="hljs-variable">jedis</span> <span class="hljs-operator">=</span> RedisManager.getJedis();<br> <span class="hljs-keyword">if</span>(<span class="hljs-literal">null</span> == jedis) {<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br> }<br> <span class="hljs-keyword">try</span> {<br> obj = obj == <span class="hljs-literal">null</span> ? <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>():obj;<br> jedis.set(key.getBytes(), SerializeUtil.serialize(obj));<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br> } <span class="hljs-keyword">catch</span> (Exception e) {<br> log.error(<span class="hljs-string">"redis error{}"</span>,e.getCause());<br> RedisManager.returnBrokenResource(jedis);<br> e.printStackTrace();<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br> }<span class="hljs-keyword">finally</span> {<br> RedisManager.returnResource(jedis);<br> }<br>} <br> <br> <span class="hljs-comment">/** </span><br><span class="hljs-comment"> * 获取对象 </span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> key </span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span> Object </span><br><span class="hljs-comment"> */</span> <br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> Object <span class="hljs-title function_">getObject</span><span class="hljs-params">(String key)</span>{<br><span class="hljs-type">Jedis</span> <span class="hljs-variable">jedis</span> <span class="hljs-operator">=</span> RedisManager.getJedis();<br> <span class="hljs-keyword">if</span>( jedis == <span class="hljs-literal">null</span> || ! jedis.exists(key)){<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>; <br> } <br><br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-type">byte</span>[] value = jedis.get(key.getBytes());<br><span class="hljs-type">Object</span> <span class="hljs-variable">obj</span> <span class="hljs-operator">=</span> SerializeUtil.unserialize(value);<br><span class="hljs-keyword">return</span> obj;<br>}<span class="hljs-keyword">catch</span> (Exception e){<br>log.error(<span class="hljs-string">"redis error{}"</span>,e.getCause());<br>RedisManager.returnBrokenResource(jedis);<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>}<span class="hljs-keyword">finally</span> {<br>RedisManager.returnResource(jedis);<br>}<br>} <br>}<br><br></code></pre></td></tr></table></figure><h5 id="在程序中的使用"><a href="#在程序中的使用" class="headerlink" title="在程序中的使用"></a>在程序中的使用</h5><p>可以直接依赖注入直接调用</p><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@Autowired</span><br><span class="hljs-keyword">private</span> RedisUtil redisUtil;<br><br><br><span class="hljs-comment">//写入redis</span><br>redisUtil.set(key,value,expire);<br><br><span class="hljs-comment">//读取redis</span><br>redisUtil.get(key);<br><br></code></pre></td></tr></table></figure><h5 id="使用redis作为缓存"><a href="#使用redis作为缓存" class="headerlink" title="使用redis作为缓存"></a>使用redis作为缓存</h5><ul><li>可以写一个基础服务类,需要用到的缓存的service继承这个服务类</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.demo.service;<br><br><span class="hljs-keyword">import</span> com.demo.tools.obj.Verification;<br><span class="hljs-keyword">import</span> com.demo.tools.redisdb.RedisUtil;<br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">BaseService</span> {<br> <br><br> <span class="hljs-keyword">public</span> Object <span class="hljs-title function_">findObject</span><span class="hljs-params">(String key)</span><br> {<br> <span class="hljs-keyword">if</span>(Verification.verificationString(key) == <span class="hljs-literal">false</span>){<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br> }<br> <span class="hljs-keyword">return</span> RedisUtil.getObject(key);<br> }<br><br> <span class="hljs-keyword">public</span> <span class="hljs-type">boolean</span> <span class="hljs-title function_">putObject</span><span class="hljs-params">(String key,Object value)</span> {<br><br> <span class="hljs-keyword">if</span> ((Verification.verificationString(key) == <span class="hljs-literal">false</span>) ||<br> (<span class="hljs-literal">null</span> == value)) {<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br> }<br> <span class="hljs-keyword">return</span> RedisUtil.setObject(key, value);<br> }<br><br> <span class="hljs-keyword">public</span> <span class="hljs-type">boolean</span> <span class="hljs-title function_">del</span><span class="hljs-params">(String key)</span>{<br> <span class="hljs-keyword">if</span>(Verification.verificationString(key) == <span class="hljs-literal">false</span>){<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br> }<br> <span class="hljs-keyword">return</span> RedisUtil.del(key);<br> }<br><br>}<br><br></code></pre></td></tr></table></figure><ul><li>这里的Verification.verificationString(key)是检查字符串是否有效</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-comment">//检查string类型是否有效,基本检查,null,empty</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">boolean</span> <span class="hljs-title function_">verificationString</span><span class="hljs-params">(String str)</span>{<br><br><span class="hljs-keyword">if</span>((<span class="hljs-literal">null</span> == str) || (str.isEmpty())) {<br><span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>} <span class="hljs-keyword">else</span> {<br><span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>}<br>}<br></code></pre></td></tr></table></figure><ul><li>在service中使用</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-comment">//check redis 在读取前先检查redis缓存是否存在</span><br><span class="hljs-type">Object</span> <span class="hljs-variable">obj</span> <span class="hljs-operator">=</span> findObject(keys);<br><span class="hljs-keyword">if</span>(<span class="hljs-literal">null</span> != obj){<br><span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">obj</span>;<br>}<br><br><br><span class="hljs-comment">//write to redis 查询数据库之后写入redis 要保持存储key的唯一</span><br>putObject(keys,object);<br><br><br><span class="hljs-comment">//在更新和删除操作时直接将缓存删除</span><br>RedisUtil.del(keys);<br></code></pre></td></tr></table></figure><h5 id="需要注意的几点"><a href="#需要注意的几点" class="headerlink" title="需要注意的几点"></a>需要注意的几点</h5><ul><li>在object存储的时候要先将对象序列化,查询出来后在反序列化,所以对象中的任何元素都要支持序列化</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">//让model继承Serializable</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">User</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">Serializable</span>{}<br></code></pre></td></tr></table></figure><ul><li><p>object存储时如果封装的对象过于庞大,会出现序列化超时的错误,可以通过增大timeout的值解决,但是不建议timeout值过大,应该考虑将封装的对象拆分,减少多表关联查询等</p></li><li><p>在redis方法中不管是异常还是正常结束都要将pool归还到连接池中,因为创建一个连接是很耗时的,还有如果连接数超过并发数的时候连接池可以很好的解决这个问题</p></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
<tag>Redis</tag>
</tags>
</entry>
<entry>
<title>spring-boot枚举状态在查询遍历时的映射</title>
<link href="/2017/12/08/spring-boot%E6%9E%9A%E4%B8%BE%E7%8A%B6%E6%80%81%E5%9C%A8%E6%9F%A5%E8%AF%A2%E9%81%8D%E5%8E%86%E6%97%B6%E7%9A%84%E6%98%A0%E5%B0%84/"/>
<url>/2017/12/08/spring-boot%E6%9E%9A%E4%B8%BE%E7%8A%B6%E6%80%81%E5%9C%A8%E6%9F%A5%E8%AF%A2%E9%81%8D%E5%8E%86%E6%97%B6%E7%9A%84%E6%98%A0%E5%B0%84/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/lilly-rum-250927-unsplash.jpg"></p><span id="more"></span><p><em>在后台开发中为了便于维护和统一管理状态类的存储一般都是定义一个枚举类,在数据库中一般直接存储一个状态码。可以通过状态码获取枚举值添加到返回信息中,方便模板渲染。</em></p><h5 id="定义一个订单状态枚举类"><a href="#定义一个订单状态枚举类" class="headerlink" title="定义一个订单状态枚举类"></a>定义一个订单状态枚举类</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-keyword">package</span> com.demo.enums;<br><br><span class="hljs-keyword">import</span> lombok.Getter;<br><br><span class="hljs-meta">@Getter</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">enum</span> <span class="hljs-title class_">OrderStatusEnum</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">CodeEnum</span>{<br> NEW(<span class="hljs-number">0</span>,<span class="hljs-string">"新订单"</span>),<br> FINISHED(<span class="hljs-number">1</span>,<span class="hljs-string">"完结"</span>),<br> CANCEL(<span class="hljs-number">2</span>,<span class="hljs-string">"已取消"</span>)<br> ;<br><br> <span class="hljs-keyword">private</span> Integer code;<br><br> <span class="hljs-keyword">private</span> String message;<br><br> OrderStatusEnum(Integer code, String message) {<br> <span class="hljs-built_in">this</span>.code = code;<br> <span class="hljs-built_in">this</span>.message = message;<br> }<br>}<br></code></pre></td></tr></table></figure><h5 id="这里定义的枚举类继承CodeEnum接口,这个接口主要是获取枚举的code"><a href="#这里定义的枚举类继承CodeEnum接口,这个接口主要是获取枚举的code" class="headerlink" title="这里定义的枚举类继承CodeEnum接口,这个接口主要是获取枚举的code"></a>这里定义的枚举类继承CodeEnum接口,这个接口主要是获取枚举的code</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-keyword">package</span> com.demo.enums;<br><br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">CodeEnum</span> {<br> Integer <span class="hljs-title function_">getCode</span><span class="hljs-params">()</span>;<br>}<br></code></pre></td></tr></table></figure><h5 id="定义一个枚举工具类,主要功能实现传入枚举code和枚举类,返回code值对应的枚举值"><a href="#定义一个枚举工具类,主要功能实现传入枚举code和枚举类,返回code值对应的枚举值" class="headerlink" title="定义一个枚举工具类,主要功能实现传入枚举code和枚举类,返回code值对应的枚举值"></a>定义一个枚举工具类,主要功能实现传入枚举code和枚举类,返回code值对应的枚举值</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-keyword">package</span> com.demo.utils;<br><br><br><span class="hljs-keyword">import</span> com.demo.enums.CodeEnum;<br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">EnumUtil</span> {<br><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <T <span class="hljs-keyword">extends</span> <span class="hljs-title class_">CodeEnum</span>> T <span class="hljs-title function_">getByCode</span><span class="hljs-params">(Integer code, Class<T> enumClass)</span>{<br> <span class="hljs-keyword">for</span> (T each:enumClass.getEnumConstants()){<br> <span class="hljs-keyword">if</span> (code.equals(each.getCode())){<br> <span class="hljs-keyword">return</span> each;<br> }<br> }<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br> }<br>}<br></code></pre></td></tr></table></figure><p>这里注意要将方法定义为static</p><h5 id="在返回model类中添加一个返回实体"><a href="#在返回model类中添加一个返回实体" class="headerlink" title="在返回model类中添加一个返回实体"></a>在返回model类中添加一个返回实体</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@JsonIgnore</span><br> <span class="hljs-keyword">public</span> OrderStatusEnum <span class="hljs-title function_">getOrderStatusEnum</span><span class="hljs-params">()</span>{<br> <span class="hljs-keyword">return</span> EnumUtil.getByCode(orderStatus,OrderStatusEnum.class);<br> }<br></code></pre></td></tr></table></figure><p>传入订单状态code和订单状态枚举类<br><em>@JsonIgnore注解作用是–如果返回的是json并不在模板中渲染,则此字段不返回,如只返回一个数据接口</em></p><h5 id="在freemarker模板中渲染"><a href="#在freemarker模板中渲染" class="headerlink" title="在freemarker模板中渲染"></a>在freemarker模板中渲染</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">td</span>></span>${order.getOrderStatusEnum().message}<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
</tags>
</entry>
<entry>
<title>Spring Boot中使用Swagger2构建API文档</title>
<link href="/2017/11/18/Spring-Boot%E4%B8%AD%E4%BD%BF%E7%94%A8Swagger2%E6%9E%84%E5%BB%BAAPI%E6%96%87%E6%A1%A3/"/>
<url>/2017/11/18/Spring-Boot%E4%B8%AD%E4%BD%BF%E7%94%A8Swagger2%E6%9E%84%E5%BB%BAAPI%E6%96%87%E6%A1%A3/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/john-cobb-13965.jpg"></p><h5 id="添加maven依赖"><a href="#添加maven依赖" class="headerlink" title="添加maven依赖"></a>添加maven依赖</h5><span id="more"></span><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>io.springfox<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>springfox-swagger2<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>2.6.1<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>io.springfox<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>springfox-swagger-ui<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>2.6.1<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure><h5 id="新建一个java类作为Swagger2的配置文件"><a href="#新建一个java类作为Swagger2的配置文件" class="headerlink" title="新建一个java类作为Swagger2的配置文件"></a>新建一个java类作为Swagger2的配置文件</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@Configuration</span> <span class="hljs-comment">//该注解是用来让spring加载该配置</span><br><span class="hljs-meta">@EnableSwagger2</span> <span class="hljs-comment">//该配置用来启用swagger2</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Swagger2</span> {<br> <span class="hljs-meta">@Bean</span><br> <span class="hljs-keyword">public</span> Docket <span class="hljs-title function_">createRestApi</span><span class="hljs-params">()</span>{<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Docket</span>(DocumentationType.SWAGGER_2)<br> .apiInfo(apiInfo())<br> .select()<br> .apis(RequestHandlerSelectors.withMethodAnnotation(ApiOperation.class)) <span class="hljs-comment">//通过@ApiOperation注解来指定方法生成文档</span><br> <span class="hljs-comment">// .apis(RequestHandlerSelectors.basePackage("com.demo.controller")) //通过指定类来生成该类下所有API的文档</span><br> .paths(PathSelectors.any())<br> .build();<br> }<br><br><br> <span class="hljs-keyword">private</span> ApiInfo <span class="hljs-title function_">apiInfo</span><span class="hljs-params">()</span>{<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">ApiInfoBuilder</span>()<br> .title(<span class="hljs-string">"Education-Api文档"</span>) <span class="hljs-comment">//名称</span><br> .description(<span class="hljs-string">"后台接口文档详细信息"</span>) <span class="hljs-comment">//详细描述</span><br> .termsOfServiceUrl(<span class="hljs-string">"http://127.0.0.1:8989"</span>) <span class="hljs-comment">//可以填写自己的网站域名</span><br> .version(<span class="hljs-string">"1.0"</span>)<br> .build();<br> }<br>}<br></code></pre></td></tr></table></figure><h5 id="添加注解(通过注解指定生成文档个人感觉灵活度高些)"><a href="#添加注解(通过注解指定生成文档个人感觉灵活度高些)" class="headerlink" title="添加注解(通过注解指定生成文档个人感觉灵活度高些)"></a>添加注解(通过注解指定生成文档个人感觉灵活度高些)</h5><p>在需要生成Api文档的接口方法上添加注解</p><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * value 指定接口的名称</span><br><span class="hljs-comment"> * response 指定返回值类型</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@ApiOperation(value = "查询购物车列表",response = ReturnData.class)</span><br></code></pre></td></tr></table></figure><p>这里的ReturnData类是自己定义的,而且需要在类中添加注解以便Swagger2识别</p><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@ApiModel</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ReturnOne</span> {<br><br> <span class="hljs-meta">@ApiModelProperty(value = "状态码",example = "1",required = true)</span><br> <span class="hljs-keyword">private</span> String code;<br><br> <span class="hljs-meta">@ApiModelProperty(value = "描述信息",example = "请求成功",required = true)</span><br> <span class="hljs-keyword">private</span> String msg;<br><br> <span class="hljs-meta">@ApiModelProperty(value = "返回主体")</span><br> <span class="hljs-keyword">private</span> Object data;<br>}<br></code></pre></td></tr></table></figure><h5 id="添加注解限定参数类型"><a href="#添加注解限定参数类型" class="headerlink" title="添加注解限定参数类型"></a>添加注解限定参数类型</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * name 参数名</span><br><span class="hljs-comment"> * value 参数描述</span><br><span class="hljs-comment"> * dataType 参数类型</span><br><span class="hljs-comment"> * required 参数是否必选</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@ApiImplicitParam(name = "UserId",value = "用户Id",dataType = "Integer",required = true)</span><br></code></pre></td></tr></table></figure><p><strong>Swagger2生成API文档是要基于RESTful API设计规范的,所以…</strong></p><blockquote><p><a href="https://swagger.io/">Swagger</a></p></blockquote>]]></content>
<categories>
<category>开发工具</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
</tags>
</entry>
<entry>
<title>spring-boot配置log(将log按级别分别存放不同文件)</title>
<link href="/2017/11/16/spring-boot%E9%85%8D%E7%BD%AElog-%E5%B0%86log%E6%8C%89%E7%BA%A7%E5%88%AB%E5%88%86%E5%88%AB%E5%AD%98%E6%94%BE%E4%B8%8D%E5%90%8C%E6%96%87%E4%BB%B6/"/>
<url>/2017/11/16/spring-boot%E9%85%8D%E7%BD%AElog-%E5%B0%86log%E6%8C%89%E7%BA%A7%E5%88%AB%E5%88%86%E5%88%AB%E5%AD%98%E6%94%BE%E4%B8%8D%E5%90%8C%E6%96%87%E4%BB%B6/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/mahir-uysal-529531-unsplash.jpg"></p><h5 id="单独添加logback-spring-xml配置文件(这一段配置就可以解决,可以根据自己需求更改)"><a href="#单独添加logback-spring-xml配置文件(这一段配置就可以解决,可以根据自己需求更改)" class="headerlink" title="单独添加logback-spring.xml配置文件(这一段配置就可以解决,可以根据自己需求更改)"></a>单独添加logback-spring.xml配置文件(这一段配置就可以解决,可以根据自己需求更改)</h5><span id="more"></span><figure class="highlight xml"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-meta"><?xml version=<span class="hljs-string">"1.0"</span> encoding=<span class="hljs-string">"UTF-8"</span> ?></span><br><span class="hljs-tag"><<span class="hljs-name">configuration</span>></span><br> <span class="hljs-comment"><!-- 这里是配置控制台打印的log样式 --></span><br> <span class="hljs-tag"><<span class="hljs-name">appender</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"consoleLog"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ch.qos.logback.core.ConsoleAppender"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">layout</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ch.qos.logback.classic.PatternLayout"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">pattern</span>></span><br> %d{yyyy-MM-dd HH:mm:ss} %-5p %c{1}:%L - %m%n<br> <span class="hljs-tag"></<span class="hljs-name">pattern</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">layout</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">appender</span>></span><br><br> <span class="hljs-comment"><!-- 对info级别的log进行过滤然后单独存放 class里面是logback类的完整路径--></span><br> <span class="hljs-tag"><<span class="hljs-name">appender</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fileInfoLog"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ch.qos.logback.core.rolling.RollingFileAppender"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">filter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ch.qos.logback.classic.filter.LevelFilter"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">level</span>></span>INFO<span class="hljs-tag"></<span class="hljs-name">level</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">onMatch</span>></span>DENY<span class="hljs-tag"></<span class="hljs-name">onMatch</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">onMismatch</span>></span>ACCEPT<span class="hljs-tag"></<span class="hljs-name">onMismatch</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">filter</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">encoder</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">pattern</span>></span><br> %d{yyyy-MM-dd HH:mm:ss} %-5p %c{1}:%L - %m%n<br> <span class="hljs-tag"></<span class="hljs-name">pattern</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">encoder</span>></span><br> <span class="hljs-comment"><!--滚动策略--></span><br> <span class="hljs-tag"><<span class="hljs-name">rollingPolicy</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ch.qos.logback.core.rolling.TimeBasedRollingPolicy"</span>></span><br> <span class="hljs-comment"><!--存放路径--></span><br> <span class="hljs-tag"><<span class="hljs-name">fileNamePattern</span>></span>G:\java\log\tomcat\shell\info.%d.log<span class="hljs-tag"></<span class="hljs-name">fileNamePattern</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">rollingPolicy</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">appender</span>></span><br><br> <span class="hljs-comment"><!-- 过滤处理error级别的日志 --></span><br> <span class="hljs-tag"><<span class="hljs-name">appender</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fileErrorLog"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ch.qos.logback.core.rolling.RollingFileAppender"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">filter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ch.qos.logback.classic.filter.ThresholdFilter"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">level</span>></span>ERROR<span class="hljs-tag"></<span class="hljs-name">level</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">filter</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">encoder</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">pattern</span>></span><br> %d{yyyy-MM-dd HH:mm:ss} %-5p %c{1}:%L - %m%n<br> <span class="hljs-tag"></<span class="hljs-name">pattern</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">encoder</span>></span><br> <span class="hljs-comment"><!--滚动策略--></span><br> <span class="hljs-tag"><<span class="hljs-name">rollingPolicy</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ch.qos.logback.core.rolling.TimeBasedRollingPolicy"</span>></span><br> <span class="hljs-comment"><!--路径--></span><br> <span class="hljs-tag"><<span class="hljs-name">fileNamePattern</span>></span>G:\java\log\tomcat\shell\error.%d.log<span class="hljs-tag"></<span class="hljs-name">fileNamePattern</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">rollingPolicy</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">appender</span>></span><br><br> <span class="hljs-comment"><!-- 引用配置项 ref里面是上面配置的name--></span><br> <span class="hljs-tag"><<span class="hljs-name">root</span> <span class="hljs-attr">level</span>=<span class="hljs-string">"info"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">appender-ref</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"consoleLog"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">appender-ref</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"fileInfoLog"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">appender-ref</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"fileErrorLog"</span> /></span><br> <span class="hljs-tag"></<span class="hljs-name">root</span>></span><br><br><span class="hljs-tag"></<span class="hljs-name">configuration</span>></span><br></code></pre></td></tr></table></figure><h5 id="简化log操作(还是之前提到的lombok)"><a href="#简化log操作(还是之前提到的lombok)" class="headerlink" title="简化log操作(还是之前提到的lombok)"></a>简化log操作(还是之前提到的lombok)</h5><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-comment"><!-- 添加依赖 --></span><br><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>org.projectlombok<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>lombok<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure><p>在类中添加注解*@Slf4j* 注意来源是(*import lombok.extern.slf4j.Slf4j;*)<br>然后就可以使用</p><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java">log.info();<br>log.warn();<br>log.error(<span class="hljs-string">"添加订单错误, order={}"</span>,order);<br><span class="hljs-comment">/**</span><br><span class="hljs-comment">*这里在输出变量事可以先用{}做占位符,在后面输出变量,可以同时设置多个</span><br><span class="hljs-comment">*/</span><br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
</tags>
</entry>
<entry>
<title>spring-boot配置Mybatis一对一、一对多关系</title>
<link href="/2017/11/16/spring-boot%E9%85%8D%E7%BD%AEMybatis%E4%B8%80%E5%AF%B9%E4%B8%80%E3%80%81%E4%B8%80%E5%AF%B9%E5%A4%9A%E5%85%B3%E7%B3%BB/"/>
<url>/2017/11/16/spring-boot%E9%85%8D%E7%BD%AEMybatis%E4%B8%80%E5%AF%B9%E4%B8%80%E3%80%81%E4%B8%80%E5%AF%B9%E5%A4%9A%E5%85%B3%E7%B3%BB/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/malte-wingen-381978-unsplash.jpg"></p><h5 id="在model中添加保存查询到的关联数据的字段"><a href="#在model中添加保存查询到的关联数据的字段" class="headerlink" title="在model中添加保存查询到的关联数据的字段"></a>在model中添加保存查询到的关联数据的字段</h5><span id="more"></span><figure class="highlight awk"><table><tr><td class="gutter"><pre><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><code class="hljs awk"><span class="hljs-regexp">//</span>例如order表关联查询orderDetail表<br><br><span class="hljs-regexp">//</span>定义一对一关系的(一般定义一个一对多就可以了)<br>private OrderDetail detail;<br><span class="hljs-regexp">//</span>定义一个存储一对多关系的<br>private List<OrderDetail> detailList;<br></code></pre></td></tr></table></figure><h5 id="在OrderMapper-xml文件的resultMap中添加映射关系"><a href="#在OrderMapper-xml文件的resultMap中添加映射关系" class="headerlink" title="在OrderMapper.xml文件的resultMap中添加映射关系"></a>在OrderMapper.xml文件的resultMap中添加映射关系</h5><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">resultMap</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"BaseResultMap"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"com.education.model.EducationOrder"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">id</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"order_id"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"VARCHAR"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"orderId"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"order_type"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"VARCHAR"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"orderType"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"order_account"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"DECIMAL"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"orderAccount"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"order_status"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"VARCHAR"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"orderStatus"</span> /></span><br> <span class="hljs-comment"><!-- 一对一关系 这里的detail就是上面在model中定义的detail,javaType指向的是orderDetail所在的路径--></span><br> <span class="hljs-tag"><<span class="hljs-name">association</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"detail"</span> <span class="hljs-attr">javaType</span>=<span class="hljs-string">"com.education.model.OrderDetail"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"order_id"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"VARCHAR"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"orderId"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"course_id"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"INTEGER"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"courseId"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"course_price"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"DECIMAL"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"coursePrice"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"course_name"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"VARCHAR"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"courseName"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"course_score"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"DOUBLE"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"courseScore"</span> /></span><br> <span class="hljs-tag"></<span class="hljs-name">association</span>></span><br> <span class="hljs-comment"><!-- 一对多关系 detail即为上面定义的detailList--></span><br> <span class="hljs-tag"><<span class="hljs-name">collection</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"detailList"</span> <span class="hljs-attr">ofType</span>=<span class="hljs-string">"com.education.model.OrderDetail"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"order_id"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"VARCHAR"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"orderId"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"course_id"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"INTEGER"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"courseId"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"course_price"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"DECIMAL"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"coursePrice"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"course_name"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"VARCHAR"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"courseName"</span> /></span><br> <span class="hljs-tag"><<span class="hljs-name">result</span> <span class="hljs-attr">column</span>=<span class="hljs-string">"course_score"</span> <span class="hljs-attr">jdbcType</span>=<span class="hljs-string">"DOUBLE"</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"courseScore"</span> /></span><br> <span class="hljs-tag"></<span class="hljs-name">collection</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">resultMap</span>></span><br></code></pre></td></tr></table></figure><h5 id="拼接查询"><a href="#拼接查询" class="headerlink" title="拼接查询"></a>拼接查询</h5><figure class="highlight xml"><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"selectAllOrder"</span> <span class="hljs-attr">resultMap</span>=<span class="hljs-string">"BaseResultMap"</span>></span><br> SELECT o.*,d.* FROM order AS o LEFT JOIN order_detail AS d ON o.order_id = d.order_id <br><span class="hljs-tag"></<span class="hljs-name">select</span>></span><br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
<tag>Mybatis</tag>
</tags>
</entry>
<entry>
<title>spring-boot配置Mybatis</title>
<link href="/2017/11/12/spring-boot%E9%85%8D%E7%BD%AEMybatis/"/>
<url>/2017/11/12/spring-boot%E9%85%8D%E7%BD%AEMybatis/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/mahkeo.jpg"></p><h5 id="添加mvn依赖"><a href="#添加mvn依赖" class="headerlink" title="添加mvn依赖"></a>添加mvn依赖</h5><span id="more"></span><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>org.mybatis<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>mybatis-spring<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">version</span>></span>1.3.0<span class="hljs-tag"></<span class="hljs-name">version</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure><h5 id="配置数据库连接"><a href="#配置数据库连接" class="headerlink" title="配置数据库连接"></a>配置数据库连接</h5><figure class="highlight yml"><table><tr><td class="gutter"><pre><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><code class="hljs yml"><span class="hljs-attr">spring:</span><br> <span class="hljs-attr">datasource:</span><br> <span class="hljs-attr">driver-class-name:</span> <span class="hljs-string">com.mysql.jdbc.Driver</span><br> <span class="hljs-attr">username:</span> <span class="hljs-string">root</span><br> <span class="hljs-attr">password:</span> <span class="hljs-number">123456</span><br> <span class="hljs-attr">url:</span> <span class="hljs-string">jdbc:mysql://127.0.0.1:3306/dmeo?characterEncoding=utf-8&useSSL=false</span><br></code></pre></td></tr></table></figure><h5 id="配置Mybatis的配置文件,主要配置其映射关系"><a href="#配置Mybatis的配置文件,主要配置其映射关系" class="headerlink" title="配置Mybatis的配置文件,主要配置其映射关系"></a>配置Mybatis的配置文件,主要配置其映射关系</h5><figure class="highlight xml"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-meta"><?xml version=<span class="hljs-string">"1.0"</span> encoding=<span class="hljs-string">"utf-8"</span>?></span><br><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">configuration</span> <span class="hljs-keyword">PUBLIC</span> <span class="hljs-string">"-//mybatis.org//DTD Config 3.0//EN"</span></span><br><span class="hljs-meta"><span class="hljs-string">"http://mybatis.org/dtd/mybatis-3-config.dtd"</span>></span><br><span class="hljs-tag"><<span class="hljs-name">configuration</span>></span><br><br> <span class="hljs-comment"><!-- 配置mybatis的缓存,延迟加载等等一系列属性 --></span><br> <span class="hljs-tag"><<span class="hljs-name">settings</span>></span><br> <span class="hljs-comment"><!-- 全局映射器启用缓存 *主要将此属性设置完成即可--></span><br> <span class="hljs-tag"><<span class="hljs-name">setting</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cacheEnabled"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</span>/></span><br> <span class="hljs-comment"><!-- 查询时,关闭关联对象即时加载以提高性能 --></span><br> <span class="hljs-tag"><<span class="hljs-name">setting</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"lazyLoadingEnabled"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"false"</span>/></span><br> <span class="hljs-comment"><!-- 对于未知的SQL查询,允许返回不同的结果集以达到通用的效果 --></span><br> <span class="hljs-tag"><<span class="hljs-name">setting</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"multipleResultSetsEnabled"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</span>/></span><br> <span class="hljs-comment"><!-- 设置关联对象加载的形态,此处为按需加载字段(加载字段由SQL指 定),不会加载关联表的所有字段,以提高性能 --></span><br> <span class="hljs-tag"><<span class="hljs-name">setting</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"aggressiveLazyLoading"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</span>/></span><br> <span class="hljs-tag"></<span class="hljs-name">settings</span>></span><br><span class="hljs-tag"><<span class="hljs-name">typeAliases</span>></span><br><span class="hljs-comment"><!-- model的存放地址 以及添加别名,调用的时候可以直接使用--></span><br><span class="hljs-tag"><<span class="hljs-name">typeAlias</span> <span class="hljs-attr">alias</span>=<span class="hljs-string">"User"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"com.education.model.User"</span> /></span><br><span class="hljs-tag"></<span class="hljs-name">typeAliases</span>></span><br><span class="hljs-tag"><<span class="hljs-name">environments</span> <span class="hljs-attr">default</span>=<span class="hljs-string">"development"</span>></span><br><span class="hljs-tag"><<span class="hljs-name">environment</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"development"</span>></span><br><span class="hljs-tag"><<span class="hljs-name">transactionManager</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"JDBC"</span> /></span><br><span class="hljs-tag"><<span class="hljs-name">dataSource</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"POOLED"</span>></span><br><span class="hljs-tag"><<span class="hljs-name">property</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"driver"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"com.mysql.jdbc.Driver"</span> /></span><br><span class="hljs-tag"><<span class="hljs-name">property</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"url"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"jdbc:mysql://127.0.0.1:3306/demo?useUnicode=true<span class="hljs-symbol">&amp;</span>characterEncoding=utf-8<span class="hljs-symbol">&amp;</span>autoReconnect=true<span class="hljs-symbol">&amp;</span>zeroDateTimeBehavior=round"</span> /></span><br><span class="hljs-tag"><<span class="hljs-name">property</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"username"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"root"</span> /></span><br><span class="hljs-tag"><<span class="hljs-name">property</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"123456"</span> /></span><br><span class="hljs-tag"><<span class="hljs-name">property</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"poolMaximumActiveConnections"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span>/></span><br><span class="hljs-tag"><<span class="hljs-name">property</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"poolMaximumIdleConnections"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"10"</span>/></span><br><span class="hljs-tag"></<span class="hljs-name">dataSource</span>></span><br><span class="hljs-tag"></<span class="hljs-name">environment</span>></span><br><span class="hljs-tag"></<span class="hljs-name">environments</span>></span><br><span class="hljs-tag"><<span class="hljs-name">mappers</span>></span><br><span class="hljs-comment"><!-- xml文件的存放地址 注意这些配置上下都是一一对应的--></span><br><span class="hljs-tag"><<span class="hljs-name">mapper</span> <span class="hljs-attr">resource</span>=<span class="hljs-string">"com/education/model/mapper/UserMapper.xml"</span> /></span><br><span class="hljs-tag"></<span class="hljs-name">mappers</span>></span><br><span class="hljs-tag"></<span class="hljs-name">configuration</span>></span><br></code></pre></td></tr></table></figure><h5 id="在Application中添加Bean(必须添加,个人理解相当于Laravel中的autoload)"><a href="#在Application中添加Bean(必须添加,个人理解相当于Laravel中的autoload)" class="headerlink" title="在Application中添加Bean(必须添加,个人理解相当于Laravel中的autoload)"></a>在Application中添加Bean(必须添加,个人理解相当于Laravel中的autoload)</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-meta">@Bean</span><br><span class="hljs-keyword">public</span> UserMapper <span class="hljs-title function_">UserMapper</span><span class="hljs-params">()</span> {<br> <span class="hljs-type">SqlSession</span> <span class="hljs-variable">sqlSession</span> <span class="hljs-operator">=</span> MyBatisSqlSessionFactory.openSession();<br> <span class="hljs-keyword">return</span> sqlSession.getMapper(UserMapper.class);<br>}<br></code></pre></td></tr></table></figure><h5 id="涉及到的三个文件"><a href="#涉及到的三个文件" class="headerlink" title="涉及到的三个文件"></a>涉及到的三个文件</h5><ul><li>UserMapper.xml 主要是MySQL语句的存放文件</li><li>User.java model文件</li><li>UserMapper.java 存放的是调用xml文件的方法实体,在service可以通过调用此文件的方法实现相关的MySQL操作</li></ul><h5 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-comment">//首先依赖注入</span><br><span class="hljs-meta">@Autowired</span><br><span class="hljs-keyword">private</span> UserMapper userMapper;<br><br><span class="hljs-comment">//然后在方法中就可以直接调用了</span><br><span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> userMapper.selectByPrimaryKey(userId);<br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
<tag>Mybatis</tag>
</tags>
</entry>
<entry>
<title>spring-boot实现登录验证</title>
<link href="/2017/11/02/spring-boot%E5%AE%9E%E7%8E%B0%E7%99%BB%E5%BD%95%E9%AA%8C%E8%AF%81/"/>
<url>/2017/11/02/spring-boot%E5%AE%9E%E7%8E%B0%E7%99%BB%E5%BD%95%E9%AA%8C%E8%AF%81/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/josh-edgoose-1100779-unsplash.jpg"></p><h5 id="登录信息的处理"><a href="#登录信息的处理" class="headerlink" title="登录信息的处理"></a>登录信息的处理</h5><span id="more"></span><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/***</span><br><span class="hljs-comment"> * 用户登录</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> user_name</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> user_id_card</span><br><span class="hljs-comment"> */</span><br> <span class="hljs-meta">@PostMapping("/login")</span><br> <span class="hljs-keyword">public</span> InDataInfo <span class="hljs-title function_">login</span><span class="hljs-params">(<span class="hljs-meta">@RequestParam("userName")</span> String user_name, </span><br><span class="hljs-params"> <span class="hljs-meta">@RequestParam("userIdCard")</span> String user_id_card)</span>{<br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> *获取登录信息,可以是单个传值,也可以将登录信息定义一个对象</span><br><span class="hljs-comment"> *</span><br><span class="hljs-comment"> */</span><br> <span class="hljs-type">EducationUser</span> <span class="hljs-variable">educationUser</span> <span class="hljs-operator">=</span> userMapper.selectByUserName(user_name);<br> <span class="hljs-type">InDataInfo</span> <span class="hljs-variable">info</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">InDataInfo</span>(); <span class="hljs-comment">//这边是定义的一个返回对象</span><br> <span class="hljs-keyword">if</span> (educationUser == <span class="hljs-literal">null</span>){ <span class="hljs-comment">//验证登录传入用户名数据库是否存在</span><br> info.setCode(ResultEnum.ERROR.getCode()); <span class="hljs-comment">//返回的状态码和状态信息应该用枚举定义</span><br> info.setMsg(<span class="hljs-string">"用户不存在"</span>);<br> }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (!userMapperService.compareLogin(educationUser,user_id_card)){<br> <span class="hljs-comment">//这里是验证用户输入的身份证号是否与数据库一直,这里也可以是验证密码</span><br> info.setCode(ResultEnum.ERROR.getCode());<br> info.setMsg(<span class="hljs-string">"身份证号码验证错误"</span>);<br> }<span class="hljs-keyword">else</span>{<br> <span class="hljs-type">String</span> <span class="hljs-variable">token</span> <span class="hljs-operator">=</span> userMapperService.getToken(educationUser);<br><br> <span class="hljs-comment">//将token存入redis </span><br> redisUtil.set(user_id_card,token,<span class="hljs-number">7200</span>);<br> info.setCode(ResultEnum.SUCCESS.getCode());<br> info.setMsg(<span class="hljs-string">"登录成功"</span>);<br> info.setToken(token);<br> }<br> <span class="hljs-keyword">return</span> info; <span class="hljs-comment">//返回的对象应该继续封装简化</span><br> }<br></code></pre></td></tr></table></figure><h5 id="密码验证"><a href="#密码验证" class="headerlink" title="密码验证"></a>密码验证</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"> <span class="hljs-comment">/***</span><br><span class="hljs-comment"> * 验证用户登录信息</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> user</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> user_id_card</span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">public</span> <span class="hljs-type">boolean</span> <span class="hljs-title function_">compareLogin</span><span class="hljs-params">(EducationUser user,String user_id_card)</span>{<br> <span class="hljs-keyword">return</span> user_id_card.equals(user.getUserIdCard()); <span class="hljs-comment">//验证身份证号信息</span><br><span class="hljs-comment">// return passwordToHash(password).equals(user.getUserPassword()); //验证密码</span><br> }<br></code></pre></td></tr></table></figure><h5 id="密码加密函数"><a href="#密码加密函数" class="headerlink" title="密码加密函数"></a>密码加密函数</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/***</span><br><span class="hljs-comment"> * 密码hash加密</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> password</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">private</span> String <span class="hljs-title function_">passwordToHash</span><span class="hljs-params">(String password)</span> {<br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-type">MessageDigest</span> <span class="hljs-variable">digest</span> <span class="hljs-operator">=</span> MessageDigest.getInstance(<span class="hljs-string">"SHA-256"</span>);<br> digest.update(password.getBytes());<br> <span class="hljs-type">byte</span>[] src = digest.digest();<br> <span class="hljs-type">StringBuilder</span> <span class="hljs-variable">stringBuilder</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">StringBuilder</span>();<br> <span class="hljs-comment">// 字节数组转16进制字符串</span><br> <span class="hljs-comment">// https://my.oschina.net/u/347386/blog/182717</span><br> <span class="hljs-keyword">for</span> (<span class="hljs-type">byte</span> aSrc : src) {<br> <span class="hljs-type">String</span> <span class="hljs-variable">s</span> <span class="hljs-operator">=</span> Integer.toHexString(aSrc & <span class="hljs-number">0xFF</span>);<br> <span class="hljs-keyword">if</span> (s.length() < <span class="hljs-number">2</span>) {<br> stringBuilder.append(<span class="hljs-string">'0'</span>);<br> }<br> stringBuilder.append(s);<br> }<br> <span class="hljs-keyword">return</span> stringBuilder.toString();<br> } <span class="hljs-keyword">catch</span> (NoSuchAlgorithmException ignore) {<br> }<br> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br> }<br></code></pre></td></tr></table></figure><p>密码加密在用户注册时要将密码加密存入数据库,在登录时将用户输入密码加密与数据库进行比较</p><h5 id="生成token"><a href="#生成token" class="headerlink" title="生成token"></a>生成token</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><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><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 生成token</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> user</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getToken</span><span class="hljs-params">(EducationUser user)</span>{<br> <span class="hljs-type">String</span> <span class="hljs-variable">token</span> <span class="hljs-operator">=</span> <span class="hljs-string">""</span>;<br> <span class="hljs-keyword">try</span> {<br> token = JWT.create()<br> .withAudience(user.getUserId().toString())<br> .sign(Algorithm.HMAC256(user.getUserPassword()));<br> }<span class="hljs-keyword">catch</span> (UnsupportedEncodingException ignore){<br><br> }<br> <span class="hljs-keyword">return</span> token;<br> }<br>我这里使用jwt包,也可以自己定义token算法<br>需要添加JWT依赖<br><br><dependency><br><groupId>com.auth0</groupId><br><artifactId>java-jwt</artifactId><br><version><span class="hljs-number">3.0</span><span class="hljs-number">.2</span></version><br></dependency><br></code></pre></td></tr></table></figure><ul><li>lombok包可以简化get set方法,使用时直接在model类注解@@Data(get set…)或者@Getter/@Setter,model中就不用再写get set 方法了(记得在IDEA中装Lombok插件)<br><a href="https://projectlombok.org/features/all">Lombok Project</a><figure class="highlight xml"><table><tr><td class="gutter"><pre><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><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">dependency</span>></span><br><span class="hljs-tag"><<span class="hljs-name">groupId</span>></span>org.projectlombok<span class="hljs-tag"></<span class="hljs-name">groupId</span>></span><br><span class="hljs-tag"><<span class="hljs-name">artifactId</span>></span>lombok<span class="hljs-tag"></<span class="hljs-name">artifactId</span>></span><br><span class="hljs-tag"></<span class="hljs-name">dependency</span>></span><br></code></pre></td></tr></table></figure></li><li>可以将配置文件改变后缀application.yml,yml配置会简化很多,而且一目了然<figure class="highlight yml"><table><tr><td class="gutter"><pre><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><code class="hljs yml"><span class="hljs-attr">spring:</span><br> <span class="hljs-attr">datasource:</span><br> <span class="hljs-attr">driver-class-name:</span> <span class="hljs-string">com.mysql.jdbc.Driver</span><br> <span class="hljs-attr">username:</span> <span class="hljs-string">root</span><br> <span class="hljs-attr">password:</span> <span class="hljs-number">123456</span><br> <span class="hljs-attr">url:</span> <span class="hljs-string">jdbc:mysql://127.0.0.1/demo?acterEncoding=utf-8&useSSL=false</span><br> <span class="hljs-attr">jpa:</span><br> <span class="hljs-attr">show-sql:</span> <span class="hljs-literal">true</span><br><span class="hljs-attr">server:</span><br> <span class="hljs-attr">context-path:</span> <span class="hljs-string">/shell</span> <br></code></pre></td></tr></table></figure></li></ul>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Spring-Boot</tag>
<tag>Java</tag>
</tags>
</entry>
<entry>
<title>Laravel 5.5 新特性</title>
<link href="/2017/10/13/Laravel-5-5%E5%AE%9E%E7%94%A8%E6%96%B0%E7%89%B9%E6%80%A7/"/>
<url>/2017/10/13/Laravel-5-5%E5%AE%9E%E7%94%A8%E6%96%B0%E7%89%B9%E6%80%A7/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/a87o2v5353250951325.jpg"></p><h5 id="Responsable-响应接口"><a href="#Responsable-响应接口" class="headerlink" title="Responsable 响应接口"></a>Responsable 响应接口</h5><span id="more"></span><p>可以实现接口响应,一般路由请求加载视图模板,若是ajax请求时返回json数据</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs php"><span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">NewSongResponse</span>(<span class="hljs-variable">$song</span>); <span class="hljs-comment">//在返回数据加载视图是交给NewSongResponse处理</span><br><br></code></pre></td></tr></table></figure><p>NewSongResponse 会判断处理是返回json数据还是加载模板</p><figure class="highlight php"><table><tr><td class="gutter"><pre><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></pre></td><td class="code"><pre><code class="hljs php"><span class="hljs-meta"><?php</span><br><br><span class="hljs-keyword">namespace</span> <span class="hljs-title class_">App</span>\<span class="hljs-title class_">Http</span>\<span class="hljs-title class_">Responses</span>;<br><br><span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">Song</span>;<br><span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Contracts</span>\<span class="hljs-title">Support</span>\<span class="hljs-title">Responsable</span>;<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NewSongResponse</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">Responsable</span></span><br><span class="hljs-class"></span>{<br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@var</span> \App\Song</span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">protected</span> <span class="hljs-variable">$song</span>;<br> <span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> \App\Song $song</span><br><span class="hljs-comment"> */</span><br> <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">__construct</span>(<span class="hljs-params">Song <span class="hljs-variable">$song</span></span>)</span><br><span class="hljs-function"> </span>{<br> <span class="hljs-variable language_">$this</span>->song = <span class="hljs-variable">$song</span>; <br> }<br><br> <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toResponse</span>(<span class="hljs-params"><span class="hljs-variable">$request</span></span>)</span><br><span class="hljs-function"> </span>{<br> <span class="hljs-keyword">if</span> (<span class="hljs-variable">$request</span>-><span class="hljs-title function_ invoke__">wantsJson</span>()) {<br> <span class="hljs-keyword">return</span> <span class="hljs-title function_ invoke__">response</span>()<br> -><span class="hljs-title function_ invoke__">json</span>(<span class="hljs-variable">$this</span>->song)<br> -><span class="hljs-title function_ invoke__">header</span>(<span class="hljs-string">'Location'</span>, <span class="hljs-title function_ invoke__">route</span>(<span class="hljs-string">'songs.show'</span>, <span class="hljs-variable">$this</span>->song))<br> -><span class="hljs-title function_ invoke__">setStatusCode</span>(<span class="hljs-number">201</span>);<br> }<br><br> <span class="hljs-keyword">return</span> <span class="hljs-title function_ invoke__">redirect</span>()<br> -><span class="hljs-title function_ invoke__">route</span>(<span class="hljs-string">'songs.show'</span>, <span class="hljs-variable">$this</span>->song);<br> }<br>}<br></code></pre></td></tr></table></figure><h5 id="请求验证的简化"><a href="#请求验证的简化" class="headerlink" title="请求验证的简化"></a>请求验证的简化</h5><figure class="highlight php"><table><tr><td class="gutter"><pre><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><code class="hljs php"><span class="hljs-variable">$data</span> = <span class="hljs-title function_ invoke__">request</span>()-><span class="hljs-title function_ invoke__">validate</span>([<br> <span class="hljs-string">'title'</span> => <span class="hljs-string">'required'</span>,<br> <span class="hljs-string">'artist'</span> => <span class="hljs-string">'required'</span>,<br> <span class="hljs-string">'description'</span> => <span class="hljs-string">'required'</span>,<br> <span class="hljs-string">'duration'</span> => <span class="hljs-string">'required|numeric'</span>,<br> <span class="hljs-string">'released_on'</span> => <span class="hljs-string">'required|date_format:Y-m-d'</span>,<br> <span class="hljs-string">'gold'</span> => <span class="hljs-string">'boolean'</span>,<br> <span class="hljs-string">'platinum'</span> => <span class="hljs-string">'boolean'</span>,<br>]);<br><span class="hljs-comment">//只有通过验证和在validdate中存在的字段才会获取,将请求验证和获取合二而一</span><br></code></pre></td></tr></table></figure><h5 id="新添加的模板指令-关于用户验证模块"><a href="#新添加的模板指令-关于用户验证模块" class="headerlink" title="新添加的模板指令 关于用户验证模块"></a>新添加的模板指令 关于用户验证模块</h5><figure class="highlight php"><table><tr><td class="gutter"><pre><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><code class="hljs php">@auth<br> Welcome {{ <span class="hljs-title function_ invoke__">user</span>()->name }}!<br>@endauth<br><br>@guest<br> Welcome Guest!<br>@endguest<br></code></pre></td></tr></table></figure><h6 id="新添加的artisan命令"><a href="#新添加的artisan命令" class="headerlink" title="新添加的artisan命令"></a>新添加的artisan命令</h6><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs php">php artisan make:model -fm Post <span class="hljs-comment">//创建工厂文件</span><br></code></pre></td></tr></table></figure><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs php">php artisan make:model --all <span class="hljs-comment">//同时创建控制器 迁移文件 工厂文件</span><br></code></pre></td></tr></table></figure><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs php">php artisan migrate:fresh <span class="hljs-comment">//删除库中所有表并重新迁移</span><br></code></pre></td></tr></table></figure><h5 id="在collection中可以直接使用dd-和dump-打印"><a href="#在collection中可以直接使用dd-和dump-打印" class="headerlink" title="在collection中可以直接使用dd()和dump()打印"></a>在collection中可以直接使用dd()和dump()打印</h5><figure class="highlight php"><table><tr><td class="gutter"><pre><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><code class="hljs php"><span class="hljs-title function_ invoke__">collect</span>([<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>])-><span class="hljs-title function_ invoke__">map</span>(function(<span class="hljs-variable">$i</span>){<br> <span class="hljs-keyword">return</span> <span class="hljs-variable">$i</span> * <span class="hljs-number">2</span>;<br>})-><span class="hljs-title function_ invoke__">dd</span>()-><span class="hljs-title function_ invoke__">reject</span>(function(<span class="hljs-variable">$i</span>){<br> <span class="hljs-keyword">return</span> <span class="hljs-variable">$i</span> < <span class="hljs-number">3</span>;<br>});<br></code></pre></td></tr></table></figure><h5 id="resource生成資源,代替transform"><a href="#resource生成資源,代替transform" class="headerlink" title="resource生成資源,代替transform"></a>resource生成資源,代替transform</h5><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs php">php artisan make:resource User <span class="hljs-comment">//创建资源</span><br>php artisan make:resource Users --collection <span class="hljs-comment">//创建资源集合</span><br></code></pre></td></tr></table></figure><figure class="highlight php"><table><tr><td class="gutter"><pre><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><code class="hljs php"><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toArray</span>(<span class="hljs-params"><span class="hljs-variable">$request</span></span>) //在资源中处理</span><br><span class="hljs-function"> </span>{<br> <span class="hljs-keyword">return</span> [<br> <span class="hljs-string">'id'</span> => <span class="hljs-variable language_">$this</span>->id,<br> <span class="hljs-string">'name'</span> => <span class="hljs-variable language_">$this</span>->name,<br> <span class="hljs-string">'email'</span> => <span class="hljs-variable language_">$this</span>->email,<br> <span class="hljs-string">'created_at'</span> => <span class="hljs-variable language_">$this</span>->created_at,<br> <span class="hljs-string">'updated_at'</span> => <span class="hljs-variable language_">$this</span>->updated_at,<br> ];<br> }<br></code></pre></td></tr></table></figure><figure class="highlight php"><table><tr><td class="gutter"><pre><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><code class="hljs php"><span class="hljs-title class_">Route</span>::<span class="hljs-title function_ invoke__">get</span>(<span class="hljs-string">'/user'</span>, function () { <span class="hljs-comment">//数据返回时交给资源处理</span><br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">UserResource</span>(<span class="hljs-title class_">User</span>::<span class="hljs-title function_ invoke__">find</span>(<span class="hljs-number">1</span>));<br> <span class="hljs-keyword">return</span> <span class="hljs-title class_">UserResource</span>::<span class="hljs-title function_ invoke__">collection</span>(<span class="hljs-title class_">User</span>::<span class="hljs-title function_ invoke__">all</span>());<br>});<br></code></pre></td></tr></table></figure><h5 id="新的路由方法"><a href="#新的路由方法" class="headerlink" title="新的路由方法"></a>新的路由方法</h5><p>路由重定向</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs php"><span class="hljs-title class_">Route</span>::<span class="hljs-title function_ invoke__">redirect</span>(<span class="hljs-string">'/here'</span>, <span class="hljs-string">'/there'</span>, <span class="hljs-number">301</span>);<br></code></pre></td></tr></table></figure><p>返回视图 第三个参数可以返回参数</p><figure class="highlight php"><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><code class="hljs php"><span class="hljs-title class_">Route</span>::<span class="hljs-title function_ invoke__">view</span>(<span class="hljs-string">'/welcome'</span>, <span class="hljs-string">'welcome'</span>);<br><br><span class="hljs-title class_">Route</span>::<span class="hljs-title function_ invoke__">view</span>(<span class="hljs-string">'/welcome'</span>, <span class="hljs-string">'welcome'</span>, [<span class="hljs-string">'name'</span> => <span class="hljs-string">'Taylor'</span>]);<br></code></pre></td></tr></table></figure>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Laravel</tag>
</tags>
</entry>
<entry>
<title>laravel中的Excel文件导入与导出</title>
<link href="/2017/09/30/laravel%E4%B8%AD%E7%9A%84Excel%E6%96%87%E4%BB%B6%E5%AF%BC%E5%85%A5%E4%B8%8E%E5%AF%BC%E5%87%BA/"/>
<url>/2017/09/30/laravel%E4%B8%AD%E7%9A%84Excel%E6%96%87%E4%BB%B6%E5%AF%BC%E5%85%A5%E4%B8%8E%E5%AF%BC%E5%87%BA/</url>
<content type="html"><![CDATA[<p><img src="https://drewlife.oss-cn-shanghai.aliyuncs.com/devon-wilson-1500588-unsplash.jpg"></p><h5 id="主要利用第三方包完成文件上Excel上传数据与下载生成Excel"><a href="#主要利用第三方包完成文件上Excel上传数据与下载生成Excel" class="headerlink" title="主要利用第三方包完成文件上Excel上传数据与下载生成Excel"></a>主要利用第三方包完成文件上Excel上传数据与下载生成Excel</h5><blockquote><p>github 包地址<a href="https://github.com/Maatwebsite/Laravel-Excel">Maatwebsite/Laravel-Excel</a></p></blockquote><ul><li>安装</li></ul><figure class="highlight armasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs armasm"><span class="hljs-symbol">composer</span> <span class="hljs-meta">require</span> <span class="hljs-string">"maatwebsite/excel:~2.1.0"</span><br></code></pre></td></tr></table></figure><ul><li>添加ServiceProvider和aliases</li></ul><figure class="highlight angelscript"><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><code class="hljs angelscript">Maatwebsite\Excel\ExcelServiceProvider::<span class="hljs-keyword">class</span>,<br><br>'<span class="hljs-symbol">Excel</span>' => <span class="hljs-symbol">Maatwebsite</span>\<span class="hljs-symbol">Excel</span>\<span class="hljs-symbol">Facades</span>\<span class="hljs-symbol">Excel::<span class="hljs-symbol">class</span>,</span><br></code></pre></td></tr></table></figure><ul><li>生成配置文件</li></ul><figure class="highlight jboss-cli"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs jboss-cli">php artisan vendor<span class="hljs-function">:publish</span> <span class="hljs-params">--provider=</span><span class="hljs-string">"Maatwebsite\Excel\ExcelServiceProvider"</span><br></code></pre></td></tr></table></figure><h5 id="获取上传Excel数据"><a href="#获取上传Excel数据" class="headerlink" title="获取上传Excel数据"></a>获取上传Excel数据</h5><figure class="highlight awk"><table><tr><td class="gutter"><pre><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><code class="hljs awk"><span class="hljs-variable">$value</span> = Excel::load(<span class="hljs-variable">$file</span>, <span class="hljs-keyword">function</span> (<span class="hljs-variable">$reader</span>) {<br> <span class="hljs-variable">$results</span> = <span class="hljs-variable">$reader</span>->get(); <span class="hljs-regexp">//</span>获取所有<br> <span class="hljs-variable">$results</span> = <span class="hljs-variable">$reader</span>->all(); <span class="hljs-regexp">//</span>获取所有<br> <span class="hljs-variable">$row</span>->firstname; <span class="hljs-regexp">//</span>获取第一行用作属性<br> <span class="hljs-variable">$reader</span>->first(); <span class="hljs-regexp">//</span>获取第一行<br> <span class="hljs-variable">$reader</span>->getTitle(); <span class="hljs-regexp">//</span>获取工作表标题<br> <span class="hljs-variable">$reader</span>->takeRows(<span class="hljs-number">10</span>); <span class="hljs-regexp">//</span>获取某一行<br> <span class="hljs-variable">$reader</span>->limitRows(<span class="hljs-number">10</span>); <span class="hljs-regexp">//</span>获取某一行<br> <span class="hljs-variable">$reader</span>->skipRows(<span class="hljs-number">10</span>); <span class="hljs-regexp">//</span>跳过某一行<br> <span class="hljs-variable">$reader</span>->takeColumns(<span class="hljs-number">10</span>); <span class="hljs-regexp">//</span>获取某一列<br> <span class="hljs-variable">$reader</span>->skipColumns(<span class="hljs-number">10</span>); <span class="hljs-regexp">//</span>跳过某一列<br> <span class="hljs-variable">$reader</span>->toArray(); <span class="hljs-regexp">//</span>将结果转化成数组<br> <span class="hljs-variable">$reader</span>->toObject(); <span class="hljs-regexp">//</span>将结果转化成对象<br> <span class="hljs-variable">$reader</span>->each(<span class="hljs-keyword">function</span>(<span class="hljs-variable">$sheet</span>) {<br> <span class="hljs-regexp">//</span> 对所有行进行迭代<br> <span class="hljs-variable">$sheet</span>->each(<span class="hljs-keyword">function</span>(<span class="hljs-variable">$row</span>) {<br><br> });<br> });<br>});<br></code></pre></td></tr></table></figure><h5 id="生成Excel并下载到本地"><a href="#生成Excel并下载到本地" class="headerlink" title="生成Excel并下载到本地"></a>生成Excel并下载到本地</h5><figure class="highlight awk"><table><tr><td class="gutter"><pre><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><code class="hljs awk">Excel::create(<span class="hljs-variable">$name</span>,<span class="hljs-keyword">function</span>(<span class="hljs-variable">$excel</span>) use (<span class="hljs-variable">$cellData</span>){<br> <span class="hljs-variable">$excel</span>->sheet(<span class="hljs-string">'sheet1'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-variable">$sheet</span>) use (<span class="hljs-variable">$cellData</span>){<br><span class="hljs-regexp">//</span> <span class="hljs-variable">$sheet</span>->rows(<span class="hljs-variable">$cellData</span>); <span class="hljs-regexp">//</span>将数组的每一行对应些人Excel每一行<br> <span class="hljs-variable">$sheet</span>->fromArray(<span class="hljs-variable">$cellData</span>); <span class="hljs-regexp">//</span>将查询数据的数据库字段名作为表头存放在第一行<br> });<br> })->export(<span class="hljs-string">'xls'</span>);<br></code></pre></td></tr></table></figure><p>laravel中获取表的表字段</p><figure class="highlight ruby"><table><tr><td class="gutter"><pre><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><code class="hljs ruby"><span class="hljs-keyword">protected</span> function getColumns(<span class="hljs-variable">$table</span>)<br> {<br> <span class="hljs-variable">$columns</span> = <span class="hljs-title class_">Schema</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:getColumnListing</span>(<span class="hljs-variable">$table</span>);<br><span class="hljs-regexp">//</span> <span class="hljs-keyword">return</span> <span class="hljs-variable">$this</span>->selectGetColumns(<span class="hljs-variable">$columns</span>);<br> <span class="hljs-keyword">return</span> <span class="hljs-variable">$columns</span>;<br> }<br></code></pre></td></tr></table></figure><blockquote><p>详细可以看文档<a href="http://www.maatwebsite.nl/laravel-excel/docs">Laravel Excel</a>,在文件上传时一般都会验证字段或者验证上传是否为空,生成下载文件的时候选择只下载那几行,还有对数据的迭代和生成表头等等!</p></blockquote>]]></content>
<categories>
<category>开发笔记</category>
</categories>
<tags>
<tag>Laravel</tag>