-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
827 lines (542 loc) · 69.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cappuccino的博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description">
<meta property="og:type" content="website">
<meta property="og:title" content="Cappuccino的博客">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Cappuccino的博客">
<meta property="og:description">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Cappuccino的博客">
<meta name="twitter:description">
<link rel="alternative" href="/atom.xml" title="Cappuccino的博客" type="application/atom+xml">
<link rel="icon" href="https://raw.githubusercontent.com/thomasyxy/thomasyxy.github.io/master/img/blogicon.png">
<link rel="stylesheet" href="/css/style.css" type="text/css">
</head>
<body>
<div id="container">
<div class="left-col">
<div class="overlay"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img lazy-src="https://raw.githubusercontent.com/thomasyxy/thomasyxy.github.io/master/img/headportrait.jpg" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/">Cappuccino</a></h1>
</hgroup>
<div class="switch-btn">
<div class="icon">
<div class="icon-ctn">
<div class="icon-wrap icon-house" data-idx="0">
<div class="birdhouse"></div>
<div class="birdhouse_holes"></div>
</div>
<div class="icon-wrap icon-ribbon hide" data-idx="1">
<div class="ribbon"></div>
</div>
<div class="icon-wrap icon-link hide" data-idx="2">
<div class="loopback_l"></div>
<div class="loopback_r"></div>
</div>
<div class="icon-wrap icon-me hide" data-idx="3">
<div class="user"></div>
<div class="shoulder"></div>
</div>
</div>
</div>
<div class="tips-box hide">
<div class="tips-arrow"></div>
<ul class="tips-inner">
<li>菜单</li>
<li>标签</li>
<li>友情链接</li>
<li>关于我</li>
</ul>
</div>
</div>
<div class="switch-area">
<div class="switch-wrap">
<section class="switch-part switch-part1">
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">所有文章</a></li>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/thomasyxy" title="github">github</a>
<a class="weibo" target="_blank" href="/#" title="weibo">weibo</a>
<a class="zhihu" target="_blank" href="http://www.zhihu.com/people/qia-bu-qi-nuo-82-19" title="zhihu">zhihu</a>
<a class="mail" target="_blank" href="mailto:[email protected]" title="mail">mail</a>
</div>
</nav>
</section>
<section class="switch-part switch-part2">
<div class="widget tagcloud" id="js-tagcloud">
</div>
</section>
<section class="switch-part switch-part3">
<div id="js-friends">
<a target="_blank" class="main-nav-link switch-friends-link" href="http://www.zhangxinxu.com/wordpress/">张鑫旭的个人博客</a>
<a target="_blank" class="main-nav-link switch-friends-link" href="http://www.ruanyifeng.com/blog/">阮一峰的网络日志</a>
<a target="_blank" class="main-nav-link switch-friends-link" href="http://www.cnblogs.com/TomXu/">汤姆大叔的博客</a>
<a target="_blank" class="main-nav-link switch-friends-link" href="http://www.cnblogs.com/dolphinX/">Samaritans的博客</a>
<a target="_blank" class="main-nav-link switch-friends-link" href="http://ued.taobao.org/blog/category/bowen/frontend/">TaoBaoUED</a>
<a target="_blank" class="main-nav-link switch-friends-link" href="https://developer.mozilla.org/zh-CN/">Mozilla开发者网络</a>
</div>
</section>
<section class="switch-part switch-part4">
<div id="js-aboutme">让那些虚伪的小丑~惶恐躲在阴暗角落~瑟瑟发抖！无论你躲到那里！总有一双眼睛在注视着你！</div>
</section>
</div>
</div>
</header>
</div>
</div>
<div class="mid-col">
<nav id="mobile-nav">
<div class="overlay">
<div class="slider-trigger"></div>
<h1 class="header-author js-mobile-header hide">Cappuccino</h1>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img lazy-src="https://raw.githubusercontent.com/thomasyxy/thomasyxy.github.io/master/img/headportrait.jpg" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author">Cappuccino</h1>
</hgroup>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">所有文章</a></li>
<div class="clearfix"></div>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/thomasyxy" title="github">github</a>
<a class="weibo" target="_blank" href="/#" title="weibo">weibo</a>
<a class="zhihu" target="_blank" href="http://www.zhihu.com/people/qia-bu-qi-nuo-82-19" title="zhihu">zhihu</a>
<a class="mail" target="_blank" href="mailto:[email protected]" title="mail">mail</a>
</div>
</nav>
</header>
</div>
</nav>
<div class="body-wrap">
<article id="post-review3" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/26/review3/" class="article-date">
<time datetime="2015-11-26T14:08:37.860Z" itemprop="datePublished">2015-11-26</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/26/review3/">回顾总结：CSS多列布局</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>多列布局是网站开发中常用的技巧，总结一下几种常用的布局方式。</p>
<h2 id="多列等高布局">多列等高布局</h2><p>这种布局即每一列的高度保持一致，高度与最高的一列相同。等高布局是为了维护边框线条的完整性，在有些地方则可能是为了维护背景的完整性，达到整体一致不缺失的效果。</p>
<p>最常用的方法为padding补偿法：<br><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></pre></td><td class="code"><pre><span class="line">.container{</span><br><span class="line"> overflow:hidden;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.item{</span><br><span class="line"> <span class="built_in">float</span>:left;</span><br><span class="line"> width:<span class="number">100</span>px;</span><br><span class="line"> margin-right:<span class="number">10</span>px;</span><br><span class="line"> padding-bottom:<span class="number">10000</span>px;</span><br><span class="line"> margin-bottom:-<span class="number">10000</span>px;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"><div class=<span class="string">"container"</span>></span><br><span class="line"> <div class=<span class="string">"item"</span>></span><br><span class="line"> <span class="number">123</span></span><br><span class="line"> </div></span><br><span class="line"> <div class=<span class="string">"item"</span>></span><br><span class="line"> <span class="number">123</span><br/></span><br><span class="line"> <span class="number">456</span><br/></span><br><span class="line"> <span class="number">123</span></span><br><span class="line"> </div></span><br><span class="line"> <div class=<span class="string">"item"</span>></span><br><span class="line"> <span class="number">456</span></span><br><span class="line"> </div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151126204355546-857716313.png" alt="图review3.1" title="图review3.1"></p>
<p>这种方法的原理是设置子列的padding-bottom的值足够大，此时父容器也会被撑开，接下来再把子列的margin-bottom的值设成与padding-bottom相等的负值，子列的高度会被抵消，但内容高度却不会减少，较短的列会用padding-bottom来弥补内容高度，最后就是设置父容器over-flow:hidden; 将超出的部分隐藏，就实现了多列等高的效果。</p>
<p>优点：简单易操作，CSS实现，兼容性较好，适用于各版本浏览器。</p>
<p>缺点：当给子列设置border:3px red solid; 会出现以下问题：</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151126205817515-442854008.png" alt="图review3.2" title="图review3.2"></p>
<p>由于超出父容器部分被隐藏，有部分边框将无法显示。</p>
<h2 id="利用负边距">利用负边距</h2><hr>
<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></pre></td><td class="code"><pre><span class="line">.container{</span><br><span class="line"> overflow: hidden;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.wrap{</span><br><span class="line"> <span class="built_in">float</span>: left;</span><br><span class="line"> width:<span class="number">100</span>%;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.left{</span><br><span class="line"> <span class="built_in">float</span>:left;</span><br><span class="line"> width:<span class="number">120</span>px;</span><br><span class="line"> margin-left: -<span class="number">100</span>%;</span><br><span class="line"> background: red;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.right{</span><br><span class="line"> <span class="built_in">float</span>:left;</span><br><span class="line"> width: <span class="number">150</span>px;</span><br><span class="line"> margin-left: -<span class="number">150</span>px;</span><br><span class="line"> background: green;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.main{</span><br><span class="line"> margin-left: <span class="number">120</span>px;</span><br><span class="line"> margin-right: <span class="number">150</span>px;</span><br><span class="line"> background: blue;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"><div class=<span class="string">"container"</span>></span><br><span class="line"> <div class=<span class="string">"wrap"</span>></span><br><span class="line"> <div class=<span class="string">"main"</span>>center</div></span><br><span class="line"> </div></span><br><span class="line"> <div class=<span class="string">"left"</span>>left</div></span><br><span class="line"> <div class=<span class="string">"right"</span>>right</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151126211236390-461403904.png" alt="图review3.3" title="图review3.3"></p>
<p>这种方法的原理是：开始时.wrap的width:100%，单独占一整行，此时.left和.right都在第二行</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151126211437749-851582666.png" alt="图review3.4" title="图review3.4"></p>
<p>然后设置.left的margin-left: -100%; 相当于向上平移了一行，而他原来的位置则变成了.right，设置.right的margin-left:-150px; 相当于来到了第一行的尾部</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151126212023515-1430221958.png" alt="图review3.5" title="图review3.5"></p>
<p>最后给.wrap中的.main设置margin-left: 120px; margin-right: 150px; 就实现了多列布局的效果。</p>
<p>优点：CSS实现，控制比较容易。</p>
<p>缺点：当列数较多时会显得很麻烦。</p>
<h2 id="CSS3多列布局">CSS3多列布局</h2><hr>
<p>CSS3新增了多列布局特性，可以让浏览器确定何时结束一列和开始下一列，通过设置CSS属性即可实现。可以设置以下几个属性：</p>
<p>column-width: 每列宽度</p>
<p>column-count: 元素应该被分隔的列数。</p>
<p>column-gap: 列之间的间隔。</p>
<p>column-rule: 列之间的宽度、样式和颜色规则。</p>
<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></pre></td><td class="code"><pre><span class="line">.container{</span><br><span class="line"> -moz-column-count:<span class="number">3</span>; /* Firefox */</span><br><span class="line"> -webkit-column-count:<span class="number">3</span>; /* Safari and Chrome */</span><br><span class="line"> column-count:<span class="number">3</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><div class=<span class="string">"container"</span>></span><br><span class="line"> 一个人的进步并不是自己说了算的，自我感觉良好的时候容易迷失自己，这时你需要别人的评价，别人的意见，才能让你更加清晰的认识自己。</span><br><span class="line">人都是在错误中成长的，错误能让你更清晰的认识自己，知道自己的不足，这样能更好的对症下药，进而挑战自己，几近完美。</span><br><span class="line">学习固然很重要，但是事后的思考更加重要，重另一个角度审视自己会有意想不到的收获。</span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151126214217609-1565154145.png" alt="图review3.6" title="图review3.6"></p>
<p>优点：使用方便，控制简单</p>
<p>缺点：只适用于文本，并且从下图可以看出不支持IE9，为了兼容其他浏览器需要添加浏览器前缀。</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151126214941187-1980464247.png" alt="图review3.7" title="图review3.7"></p>
<h2 id="flex布局">flex布局</h2><hr>
<p>CSS3还提供了一个额外的布局系统。在这个新的框模型中，框的子代采用水平或垂直布局，而且可将未使用的空间分配给特定的子代，或者通过“弹性”分配给应展开的子代，在各子代间进行分配。这些框的嵌套（水平嵌套在垂直中，或垂直嵌套在水平中）可用于在两个维度中构建布局。</p>
<p>Flexbox 为 display 属性赋予了一个新的值box，还为我们提供了8个新的属性：</p>
<p>box-orient<br>box-pack<br>box-align<br>box-flex<br>box-flex-group<br>box-ordinal-group<br>box-direction<br>box-lines<br>优点：变化多，使用上更加灵活，功能强大</p>
<p>缺点：较复杂，兼容性也不是很好，IE9不兼容，为了兼容IE10和其他浏览器需要添加浏览器前缀。</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151126215605609-1223010344.png" alt="图review3.8" title="图review3.8"></p>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-review2" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/25/review2/" class="article-date">
<time datetime="2015-11-25T13:00:47.146Z" itemprop="datePublished">2015-11-25</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/25/review2/">回顾总结：CSS语法</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>CSS由多组规则组成，每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：</p>
<p>选择器（Selector）:多个选择器可以半角逗号（,）隔开。<br>属性（property）:CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。<br>值（value）:指属性接受的设置值，多个关键字时大都以空格隔开。<br>属性和值之间用半角冒号：隔开，属性和值合称为“特性”。多个特性间用；隔开，前后用{}括起来</p>
<h2 id="优先级">优先级</h2><p>CSS优先级规则：越接近目标的样式定义优先级越高，高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义<br>就是当目标为同一元素时，样式优先级排序：<br>1.元素标签内定义的样式<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><div style=<span class="string">"color:#fff"</span>></div></span><br></pre></td></tr></table></figure></p>
<p>2.写在style标签内的样式<br><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></pre></td><td class="code"><pre><span class="line"><style <span class="built_in">type</span>=<span class="string">"text/css"</span>></span><br><span class="line"> <span class="comment">#div1{</span></span><br><span class="line"> color:<span class="comment">#fff;</span></span><br><span class="line"> }</span><br><span class="line"></style></span><br></pre></td></tr></table></figure></p>
<p>3.在style中使用@import导入的CSS样式（尽量少用）<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><style <span class="built_in">type</span>=<span class="string">"text/css"</span>></span><br><span class="line"> @import<span class="string">"style.css"</span>;</span><br><span class="line"></style></span><br></pre></td></tr></table></figure></p>
<p>4.在head内用link标签引入的样式<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><link href=”style.css” rel=”stylesheet” <span class="built_in">type</span>=”text/css” /></span><br></pre></td></tr></table></figure></p>
<h2 id="浏览器前缀">浏览器前缀</h2><p>有些新式的CSS样式并不是所有的浏览器都支持，一些浏览器率先支持了，或者不是所有的浏览器支持情况都一样，我们需要前缀写法<br><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><span class="line">Firefox: -moz-</span><br><span class="line">Safari/Chrome: -webkit-</span><br><span class="line">Opera: -o-</span><br><span class="line">IE: -ms-</span><br></pre></td></tr></table></figure></p>
<p>如果对该样式的浏览器支持不确定，可以前往<a href="http://caniuse.com/" title="caniuse" target="_blank" rel="external">caniuse</a>查找</p>
<h2 id="CSS缩写">CSS缩写</h2><p>1.尺寸缩写：如margin、padding、border等，可以设置四个值，依次表示top，right，bottom，left<br>2.属性缩写：如font、background、border可以写成以下的形式<br><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></pre></td><td class="code"><pre><span class="line">//font</span><br><span class="line">font-weight: bold;</span><br><span class="line">font-size: <span class="number">15</span>px;</span><br><span class="line">line-height: <span class="number">30</span>px;</span><br><span class="line">font-family: SimHei;</span><br><span class="line"></span><br><span class="line">font:bold <span class="number">15</span>px/<span class="number">30</span>px SimHei;</span><br><span class="line"></span><br><span class="line">//background</span><br><span class="line">background-color: <span class="comment">#000;</span></span><br><span class="line">background-image: url(/img/bg.jqg);</span><br><span class="line">background-repeat: no-repeat;</span><br><span class="line">background-attachment: fixed;//背景图片是否固定，默认为scroll</span><br><span class="line">background-position: <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">background:<span class="comment">#000 url(/img/bg.jpg) no-repeat fixed 0 0;</span></span><br><span class="line"></span><br><span class="line">//border</span><br><span class="line">border-width: <span class="number">1</span>px;</span><br><span class="line">border-style: solid;</span><br><span class="line">border-color: <span class="comment">#000;</span></span><br><span class="line"></span><br><span class="line">border:<span class="number">1</span>px solid <span class="comment">#000;</span></span><br></pre></td></tr></table></figure></p>
<p>3.数值缩写：#000000可以缩写为#000或者直接用英文black表示</p>
<h2 id="大小写">大小写</h2><p>CSS中一般不区分大小写，但是选择器的id和class名称中大小写会被区分开来</p>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-review1" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/25/review1/" class="article-date">
<time datetime="2015-11-25T07:46:41.914Z" itemprop="datePublished">2015-11-25</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/25/review1/">回顾总结：HTML标签</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>HTML 为由一对尖括号（<>）所括起来的内容以特定含义. 这样的标识称为一个 标签 开始标签可能包含一些信息，这些信息叫做元素的属性，包括两部分:<br>属性名<br>属性值</p>
<h2 id="doctype">doctype</h2><p>首先当然是所有遵循html5标准的页面都要有的一个标签<!DOCTYPE html>，这个超简单的 doctype 会让浏览器进入到标准渲染模式，即使是那些现在还不支持 HTML5 的浏览器，它们会以固有的模式解析 HTML 内容，并忽略不支持的HTML5 特性。</p>
<h2 id="段落与区块">段落与区块</h2><p>以div和p标签为例，二者有什么区别？<br>1.div就是普通的块标签，多用于布局；p是语义化的段落标签，用于文章分段<br>2.div默认没有边距，p标签为了表示文章分段，有默认的间距</p>
<h2 id="table">table</h2><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></pre></td><td class="code"><pre><span class="line">//代码示例：</span><br><span class="line"><table cellpadding=<span class="string">"4"</span> cellspacing=<span class="string">"10"</span> border=<span class="string">"1"</span> width=<span class="string">"100%"</span>></span><br><span class="line"> <thead></span><br><span class="line"> <caption>Table</caption></span><br><span class="line"> <colgroup></span><br><span class="line"> <col span=<span class="string">"2"</span> align=<span class="string">"left"</span>></span><br><span class="line"> <col align=<span class="string">"right"</span>></span><br><span class="line"> </colgroup></span><br><span class="line"> <th>A</th></span><br><span class="line"> <th>B</th></span><br><span class="line"> <th>C</th></span><br><span class="line"> </thead></span><br><span class="line"> <tbody></span><br><span class="line"> <tr></span><br><span class="line"> <td align=<span class="string">"right"</span>><span class="number">00</span></td></span><br><span class="line"> <td valign=<span class="string">"bottom"</span>><span class="number">01</span></td></span><br><span class="line"> <td><span class="number">02</span></td></span><br><span class="line"> </tr></span><br><span class="line"> <tr></span><br><span class="line"> <td><span class="number">10</span></td></span><br><span class="line"> <td><span class="number">11</span></td></span><br><span class="line"> <td><span class="number">12</span></td></span><br><span class="line"> </tr></span><br><span class="line"> </tbody></span><br><span class="line"> <tfoot></span><br><span class="line"> <td><span class="number">20</span></td></span><br><span class="line"> <td><span class="number">21</span></td></span><br><span class="line"> <td><span class="number">22</span></td></span><br><span class="line"> </tfoot></span><br><span class="line"></table></span><br></pre></td></tr></table></figure>
<p>table标签的格式大致就是这样，HTML中table标签 ( table ) 用来展示多行的数据</p>
<p>table的主要属性<br>1.border：边框<br>2.cellpadding：单元的内边距<br>3.cellspacing：单元的外边距<br>4.width：table宽度<br>5.bgcolor：表格的背景颜色<br>6.align：表格相对周围元素的对其方式</p>
<p>如今table已经很少用于布局，多用于展示数据和提交表单</p>
<h2 id="a标签">a标签</h2><p>作用：定义超链接，用于从一个页面链接到另一个页面。</p>
<p>这是一种最常用的方式，但a标签不仅仅只有这种用法<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><a target=<span class="string">"_blank"</span> href=<span class="string">"http://www.baidu.com/"</span>>百度</a></span><br></pre></td></tr></table></figure></p>
<p>将href属性的值设成 mailto:邮箱地址，点击时可以让浏览器自动调用系统默认的邮件客户端程序，同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址，而其他的内容都是空白，留给访问者自行填写<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><a href=<span class="string">"mailto:[email protected]"</span>>写信</a></span><br></pre></td></tr></table></figure></p>
<p>将href属性的值设成一个标签的id名，点击时可以让页面回到该标签所在的位置<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><a href=<span class="string">"#div"</span>>toWhere</a></span><br></pre></td></tr></table></figure></p>
<p>target属性<br>_self： 默认，在当前选项卡打开，替换当前页面<br>_blank：新的选项卡打开<br>_parent：在父框架中打开<br>_top: 在最顶层打开<br>framename：在指定的框架中打开被链接文档</p>
<h2 id="button">button</h2><p>name：button的名称，与表单数据一起提交</p>
<p>type：button的类型<br>1.submit: 此按钮提交表单数据给服务器。未指定时，此值为默认值，或者如果此属性动态变为空值或无效值<br>2.reset: 此按钮重置所有组件为初始值<br>3.button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发</p>
<p>value：button的初始值</p>
<h2 id="input">input</h2><p>作用：用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等<br><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></pre></td><td class="code"><pre><span class="line"><form action=<span class="string">"getform.php"</span> method=<span class="string">"get"</span>></span><br><span class="line"> <label>First name: <input <span class="built_in">type</span>=<span class="string">"text"</span> name=<span class="string">"first_name"</span> /></label><br /></span><br><span class="line"> <label>Last name: <input <span class="built_in">type</span>=<span class="string">"text"</span> name=<span class="string">"last_name"</span> /></label><br /></span><br><span class="line"> <label>E-mail: <input <span class="built_in">type</span>=<span class="string">"email"</span> name=<span class="string">"user_email"</span> /></label><br /></span><br><span class="line"><input <span class="built_in">type</span>=<span class="string">"submit"</span> value=<span class="string">"Submit"</span> /></span><br><span class="line"></form></span><br></pre></td></tr></table></figure></p>
<p>type：控件类型的显示. 默认的类型是text<br>1.button: 无缺省行为按钮<br>2.checkbox: 复选框。必须使用 value 属性定义此控件被提交时的值。使用checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态 (大多数平台上，显示为一条穿过复选框的水平线）<br>3.file: 此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型<br>4.hidden：不显示在页面上的控件，但它的值会被提交到服务器<br>5.image: 图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小<br>6.password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度<br>7.radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择<br>8.reset: 用于将表单所内容设置为缺省值的按钮<br>9.submit: 提交表单按钮<br>10.text: 单行字段；换行会将自动从输入的值中移除</p>
<p>另外在html5中input标签的type新增了许多种，例如email、date、color、search、url……<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input" title="input" target="_blank" rel="external">了解更多</a></p>
<h2 id="img">img</h2><p>代表文档中的一个图像<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><img width=<span class="string">"60%"</span> src=<span class="string">"xxx.jpg"</span> alt=<span class="string">"图片替代文案"</span>/></span><br></pre></td></tr></table></figure></p>
<p>属性<br>src：图片地址<br>alt： 图片因为网络等原因未成功加载时候的显示文案内容<br>width/height：可以是像素值或者相对于父容器的百分比，两个属性仅设置一个，另外一个值会按相应等比缩放</p>
<p>name、hspace、border、align等属性已经被废弃，但是html5新增了crossorigin、sizes、srcset等<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img" title="img" target="_blank" rel="external">了解更多</a></p>
<p>img标签是最常用的标签之一，几乎所有网站中都会用到，他支持几乎所有的图片格式</p>
<h2 id="h1~h6">h1~h6</h2><p>作用：可定义标题，</p><h1> h1:定义最大的标题<h6> h6:定义最小的标题<br>h1~h6标签原先是用于设置标题，但是随着搜索引擎进化，有了额外的作用，如h1标签，对于搜索引擎而言，他的重要性仅次于title标签和keywords<p></p>
</h6></h1>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-jquery1" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/22/jquery1/" class="article-date">
<time datetime="2015-11-22T12:36:57.904Z" itemprop="datePublished">2015-11-22</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/22/jquery1/">jquery之.outerWidth()</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>.outerWidth( [includeMargin ] )中文API文档中是这样解释的：<br>获取元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。（愚人码头注：返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。）</p>
<p>它有一个可选参数，且该参数只能为布尔值，当传入的参数为ture时，他返回的宽度值为元素的width+padding+border+margin，但是当传入的参数为false时，他返回的宽度值为元素的width+padding+border，相当于元素在IE盒子模型中的宽度，如果不传参数相当于默认为false。</p>
<p>.outerHeight()与.outerWidth()用法基本一致</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151104202623461-1273049679.png" alt="图jquery1.1" title="图jquery1.1"></p>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-css1" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/22/css1/" class="article-date">
<time datetime="2015-11-22T12:34:13.978Z" itemprop="datePublished">2015-11-22</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/22/css1/">CSS ::selection 选中文字效果</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>::selection伪元素，用来定义用户鼠标已选择内容的样式</p>
<h2 id="测试代码：">测试代码：</h2><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></pre></td><td class="code"><pre><span class="line">p::selection{ </span><br><span class="line"> background: <span class="comment">#45caaf; </span></span><br><span class="line"> color: <span class="comment">#fff;</span></span><br><span class="line">} </span><br><span class="line">p::-moz-selection{ </span><br><span class="line"> background: <span class="comment">#45caaf; </span></span><br><span class="line"> color: <span class="comment">#fff;</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="效果图：">效果图：</h2><p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151103135351336-211621706.png" alt="图css1.1" title="图css1.1"></p>
<hr>
<p>从下面可以看出兼容性上还是比较好的，各大主流浏览器都支持，需要注意的是不支持IE8以下的版本，firefox浏览器下需要添加-moz-前缀，chrome浏览器无须添加前缀。</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151103135830071-1766029761.png" alt="图css1.2" title="图css1.2"></p>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-nodejs2" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/22/nodejs2/" class="article-date">
<time datetime="2015-11-22T12:29:10.669Z" itemprop="datePublished">2015-11-22</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/22/nodejs2/">Node.js下Mysql数据库连接</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>MySQL是一个关系型数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有的数据放在一个大仓库内，这样就增加了速度并提高了灵活性。</p>
<h2 id="创建mysql连接">创建mysql连接</h2><p>与其他模块一样，需要在项目根目录下安装mysql模块</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># vim /etc/profile</span></span><br></pre></td></tr></table></figure>
<hr>
<p>MYSQL有server和client两个模块，client是用来连接server的。关于两者的区别，mysql-server相当于服务器，管理数据库运行并处理数据，mysql-client相当于客户端，帮助用户访问和操作数据库。</p>
<p>在相对应的js文件中创建mysql连接对象</p>
<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></pre></td><td class="code"><pre><span class="line">var mysql = require(<span class="string">'mysql'</span>);</span><br><span class="line">var con = mysql.createConnection({</span><br><span class="line"> host:<span class="string">'localhost'</span>, //mysql服务器，本地为localhost</span><br><span class="line"> user:<span class="string">'admin'</span>, //连接mysql的用户名</span><br><span class="line"> password:<span class="string">'123456'</span>, //连接mysql的密码</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">//判断是否成功链接</span><br><span class="line">connection.connect(<span class="keyword">function</span>(err){</span><br><span class="line"> console.log(<span class="string">'connection success'</span>);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">//关闭数据库连接</span><br><span class="line">connection.end(<span class="keyword">function</span>(err){</span><br><span class="line"> console.log(<span class="string">'connection close'</span>);</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h2 id="数据库连接">数据库连接</h2><p>首先建立一个Node.js的MySQL操作基类BaseModel，其中包含数据库连接、插入、修改、删除、条件获取数据列表和数据转义等操作方法。</p>
<p>创建一个js文件，命名为basemodel.js。</p>
<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></pre></td><td class="code"><pre><span class="line">module.exports = <span class="function"><span class="title">function</span></span>(){</span><br><span class="line"> //数据查询接口</span><br><span class="line"> this.findOneById = <span class="keyword">function</span>(tableName,id,callback){};</span><br><span class="line"></span><br><span class="line"> //数据插入接口</span><br><span class="line"> this.insert = <span class="keyword">function</span>(tableName,rowInfo,acllback){};</span><br><span class="line"></span><br><span class="line"> //数据修改接口</span><br><span class="line"> this.modify = <span class="keyword">function</span>(tableName,id,rowInfo,callback){};</span><br><span class="line"></span><br><span class="line"> //数据删除接口</span><br><span class="line"> this.remove = <span class="keyword">function</span>(table,id,callback){};</span><br><span class="line"></span><br><span class="line"> //数据条件查询接口</span><br><span class="line"> this.find = <span class="keyword">function</span>(tableName,<span class="built_in">where</span>Json,orderByJson,<span class="built_in">limit</span>Arr,fieldsArr,callback){};</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="function"><span class="title">__constructor</span></span>(){};</span><br><span class="line"></span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<hr>
<p>再创建一个名为util.js工具类用于存放一些公有方法，包含json配置文件解析的方法。</p>
<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><span class="line">var fs = require(<span class="string">'fs'</span>),</span><br><span class="line">util = require(<span class="string">'util'</span>);</span><br><span class="line">exports.get = <span class="keyword">function</span>(fileName,key){</span><br><span class="line"> var configJson = {};</span><br><span class="line"> try{</span><br><span class="line"></span><br><span class="line"> //以utf8格式同步读取配置文件信息</span><br><span class="line"> var str = fs.readFileSync(fileName,<span class="string">'utf8'</span>);</span><br><span class="line"></span><br><span class="line"> //将读取后的配置文件内容转化为json对象</span><br><span class="line"> configJson = JSON.parse(str);</span><br><span class="line"> }catch(e){</span><br><span class="line"> sys.debug(<span class="string">'JSON parse fail'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> //返回需要的配置信息的值</span><br><span class="line"> <span class="built_in">return</span> configJson[key];</span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<hr>
<p>创建一个名为config.json的配置文件，存放数据库配置信息。</p>
<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><span class="line">{</span><br><span class="line"> <span class="string">"db"</span>:{</span><br><span class="line"> <span class="string">"host"</span>:<span class="string">"localhost"</span>,</span><br><span class="line"> <span class="string">"port"</span>:<span class="string">"3306"</span>,</span><br><span class="line"> <span class="string">"user"</span>:<span class="string">"root"</span>,</span><br><span class="line"> <span class="string">"password"</span>:<span class="string">"password"</span>,</span><br><span class="line"> <span class="string">"dbName"</span>:<span class="string">"dbname"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<hr>
<p>然后在创建的项目文件中进行操作，例如在app.js中，先声明变量Util和dbClient。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var Util = require(<span class="string">'./util'</span>),//引入util.js工具类</span><br><span class="line">mysql = require(<span class="string">'mysql'</span>),//获取mysql模块对象</span><br><span class="line">dbClient;//全局的mysql连接句柄</span><br></pre></td></tr></table></figure>
<hr>
<p>实例化BaseModel对象。</p>
<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><span class="line">var BaseModel = require(<span class="string">'./base_model'</span>);//引入base_model基类</span><br><span class="line">var baseModel = new BaseModel();//实例化baseModel对象</span><br></pre></td></tr></table></figure>
<hr>
<p>应用util工具类模块，实现BaseModel的构造函数。</p>
<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><span class="line"><span class="keyword">function</span> <span class="function"><span class="title">__constructor</span></span>(){</span><br><span class="line"> //读取config.json配置文件，并获取其中db的配置信息</span><br><span class="line"> var dbConfig = Util.get(<span class="string">'config.json'</span>,<span class="string">'db'</span>);</span><br><span class="line"></span><br><span class="line"> client = {};//获取mysql的配置信息</span><br><span class="line"> client.host = dbConfig[<span class="string">'host'</span>];//读取配置文件中mysql的host值</span><br><span class="line"> client.port = dbConfig[<span class="string">'port'</span>];//读取配置文件中mysql的port值</span><br><span class="line"> client.user = dbConfig[<span class="string">'user'</span>];//读取配置文件中mysql的数据库用户名</span><br><span class="line"> client.password = dbConfig[<span class="string">'password'</span>];//读取配置文件中mysql的数据库密码</span><br><span class="line"></span><br><span class="line"> //创建mysql连接</span><br><span class="line"> dbClient = mysql.createConnection(client);//创建mysql连接对象</span><br><span class="line"> dbClient.connect();//连接mysql服务器</span><br><span class="line"></span><br><span class="line"> //连接mysql服务器指定的数据库</span><br><span class="line"> dbClient.query(<span class="string">'USE '</span> + dbConfig[<span class="string">'dbName'</span>],<span class="keyword">function</span>(error,results){</span><br><span class="line"> <span class="keyword">if</span>(error){</span><br><span class="line"> console.log(<span class="string">'ClientConnectionReady Error: '</span> + error.message);</span><br><span class="line"> dbClient.end();</span><br><span class="line"> }</span><br><span class="line"> console.log(<span class="string">'connection local mysql success'</span>);</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line">__constructor();</span><br></pre></td></tr></table></figure>
<hr>
<p>测试数据库连接</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># node app.js</span></span><br></pre></td></tr></table></figure>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151119110043811-402406524.png" alt="图2.1" title="图2.1"></p>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-nodejs1" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/22/nodejs1/" class="article-date">
<time datetime="2015-11-22T12:16:20.624Z" itemprop="datePublished">2015-11-22</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/22/nodejs1/">LINUX下用Nginx和Node.js构建一个简单的项目</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>由于我之前租了一个阿里云服务器，最近又开始学学Node.js，因此准备写点东西把过程记录一下。至于服务器上的Web环境安装阿里云有十分详细的安装说明，这里就略过了。。。</p>
<p>以下是我的Web环境：</p>
<p>服务器系统为LINUX 64位</p>
<p>Web:nginx</p>
<p>Nginx:1.4.4</p>
<p>Php:5.3.29</p>
<p>Mysql:5.1.73</p>
<h2 id="安装Nodejs">安装Nodejs</h2><p>首先需要查看系统的Python和Make版本信息是否符合Node.js的安装环境。指令如下：</p>
<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><span class="line"><span class="comment"># python</span></span><br><span class="line"><span class="comment"># make -v</span></span><br></pre></td></tr></table></figure>
<hr>
<p>在官网下载<a href="https://nodejs.org/en/" target="_blank" rel="external">nodejs</a>的压缩包，我的系统是LINUX64位于是下载如图对应的文件</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151102211749602-70810128.png" alt="图1.1" title="图1.1"></p>
<hr>
<p>下载完成后得到一个文件名为node-v4.2.1-linux-x64.tar.gz的压缩文件，将该文件传到服务器上，输入</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># tar xvf node-v4.2.1-linux-x64.tar.gz</span></span><br></pre></td></tr></table></figure>
<hr>
<p>解压后得到如图所示的文件夹</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151102211841383-1803123096.png" alt="图1.2" title="图1.2"></p>
<hr>
<p>由于下载的是已经编译好的文件，bin文件夹中已经存在node以及npm，不过不是全局的，所以将这个设置为全局就好了。</p>
<p>设置全局变量：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># vim /etc/profile</span></span><br></pre></td></tr></table></figure>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151102212001258-2017079884.png" alt="图1.3" title="图1.3"></p>
<hr>
<p>在最后添加一句</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> PATH=<span class="string">"/root/node-v4.2.1-linux-x64/bin:<span class="variable">$PATH</span>"</span></span><br></pre></td></tr></table></figure>
<hr>
<p>按esc ，输入:wq，回车，这样就保存了</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># source /etc/profile</span></span><br></pre></td></tr></table></figure>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151102212036008-379952505.png" alt="图1.4" title="图1.4"></p>
<hr>
<p>没有报错则输入</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># echo $PATH</span></span><br></pre></td></tr></table></figure>
<hr>
<p>如果如图有了添加的那一句就成功了</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151102212135274-722429969.png" alt="图1.4" title="图1.4"></p>
<hr>
<p>这样就把bin文件夹下的node 和 npm模块设为全局了</p>
<p>在任意位置输入，显示如下</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># node -v</span></span><br></pre></td></tr></table></figure>
<hr>
<p>到这里，Node.js就成功装到LINUX下了。</p>
<h2 id="安装express">安装express</h2><p>在装完Node.js后，接下来就开始安装Express框架</p>
<p>Express是一个Node.js的Web开源框架，适合入门学习的开发者</p>
<p>主要集成了Web的http服务器的创建、静态文件管理、服务器url请求处理、GET和POST请求分发、Session处理等功能</p>
<p>使用NodeJS几乎是必装express框架，使用下面命令即可安装：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># npm install express -gd</span></span><br></pre></td></tr></table></figure>
<hr>
<p>安装成功后，会在本路径下生成一个node_modules，里面包含了express框架代码并且其中会存放需要安装的NPM模块</p>
<p>至此，Express安装完毕，我们可以在网站目录下建一个基于express的应用：</p>
<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><span class="line"><span class="comment"># express app</span></span><br><span class="line"><span class="comment"># cd app</span></span><br></pre></td></tr></table></figure>
<hr>
<p>在app文件夹内新建一个名为hello.js的文件，输入</p>
<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><span class="line">var http = require(<span class="string">"http"</span>);</span><br><span class="line">http.createServer(<span class="keyword">function</span>(request, response) {</span><br><span class="line"> response.writeHead(<span class="number">200</span>, {</span><br><span class="line"> <span class="string">"Content-Type"</span> : <span class="string">"text/plain"</span> // 输出类型</span><br><span class="line"> });</span><br><span class="line"> response.write(<span class="string">"Hello World"</span>);// 页面输出</span><br><span class="line"> response.end();</span><br><span class="line">}).listen(<span class="number">8000</span>); // 监听端口号</span><br><span class="line">console.log(<span class="string">"nodejs start listen 8000 port!"</span>);</span><br></pre></td></tr></table></figure>
<hr>
<p>保存后输入下面指令运行</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># node hello.js</span></span><br></pre></td></tr></table></figure>
<hr>
<p>我到这里的时候报错</p>
<p>Error: Cannot find module ‘xxxx’</p>
<p>解决方案：<br>确定package.json里有添加相应的jade依赖配置，使用</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># npm install -d</span></span><br></pre></td></tr></table></figure>
<hr>
<p>可以自动配置package.json，并安装所有需要依赖的包，安装完成后再次运行</p>
<p>在浏览器地址中输入<a href="http://（服务器地址或域名）：8000" target="_blank" rel="external">http://（服务器地址或域名）：8000</a></p>
<p>浏览器显示如下</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151103095321633-1508683765.png" alt="图1.5" title="图1.5"></p>
<h2 id="配置文件">配置文件</h2><p>下面配置Nginx,需要在Nginx中添加一个监听server来转发url请求，编辑Nginx的配置文件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># vi /alidata/server/nginx-1.4.4/conf/nginx.conf</span></span><br></pre></td></tr></table></figure>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151103095630649-285247574.png" alt="图1.6" title="图1.6"></p>
<hr>
<p>在http大括号内添加一个server信息，监听启动端口80</p>
<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></pre></td><td class="code"><pre><span class="line">server {</span><br><span class="line"> listen <span class="number">80</span>;//监听<span class="number">80</span>端口</span><br><span class="line"> server_name (服务器或域名，前面不加http://);</span><br><span class="line"> <span class="comment">#charset koi8-r;</span></span><br><span class="line"> <span class="comment">#access_log logs/host.access.log main;</span></span><br><span class="line"> location / {</span><br><span class="line"> proxy_pass http://（服务器或域名）:<span class="number">8000</span>;//设置转发的请求url</span><br><span class="line"> <span class="comment">#root html;</span></span><br><span class="line"> <span class="comment">#index index.html index.htm;</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<hr>
<p>重启nginx服务器</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># /etc/init.d/nginx restart</span></span><br></pre></td></tr></table></figure>
<hr>
<p>运行hello.js文件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># node hello.js</span></span><br></pre></td></tr></table></figure>
<hr>
<p>在浏览器地址中输入<a href="http://（服务器地址或域名）" target="_blank" rel="external">http://（服务器地址或域名）</a></p>
<p>浏览器中显示与之前一样</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151103095630649-285247574.png" alt="图1.7" title="图1.7"></p>
<hr>
<p>到此，就已经用Nginx和Node.js构建出了一个简单的项目。</p>
<h2 id="Forever模块">Forever模块</h2><p>发现了一个问题，就是每次启动都需要输入一遍</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># node hello.js</span></span><br></pre></td></tr></table></figure>
<hr>
<p>这样很麻烦 而且一旦关闭控制台就停止运行，网站就无法打开，这是就需要使用forever模块</p>
<p>安装forever模块</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># npm install forever -gd</span></span><br></pre></td></tr></table></figure>
<hr>
<p>通过下面的命令判断安装是否成功</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># forever --help</span></span><br></pre></td></tr></table></figure>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151103095905289-46673837.png" alt="图1.8" title="图1.8"></p>
<hr>
<p>使用forever运行hello.js项目</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># forever start hello.js</span></span><br></pre></td></tr></table></figure>
<hr>
<p>这样即使关闭控制台浏览器也能正常访问</p>
<p>另外也可以用下面的命令运行项目</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># forever start -l forever.logo -o out.log -e err.log hello.js</span></span><br></pre></td></tr></table></figure>
<hr>
<p>-l 指定forever运行日志，-o指定脚本流水日志，-e指定脚本运行错误日志，启动后会生成out.log、err.log文件，运行成功后，使用如下指令查看进程是否启动运行：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># netstat -nap|grep node</span></span><br></pre></td></tr></table></figure>
<hr>
<p>如下图所示，8000端口正在运行</p>
<p><img src="http://images2015.cnblogs.com/blog/758352/201511/758352-20151103095931930-1299544122.png" alt="图1.9" title="图1.9"></p>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info">
<div class="footer-left">
© 2015 Cappuccino
</div>
<div class="footer-right">
<a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
</div>
</div>
</div>
</footer>
</div>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css">
<script>
var yiliaConfig = {
fancybox: true,
mathjax: true,
animate: true,
isHome: true,
isPost: false,
isArchive: false,
isTag: false,
isCategory: false,
open_in_new: false
}
</script>
<script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</div>
</body>
</html>