-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
234 lines (116 loc) · 238 KB
/
Copy pathatom.xml
File metadata and controls
234 lines (116 loc) · 238 KB
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Kevin'Blog</title>
<subtitle>code builds word !</subtitle>
<link href="http://example.com/atom.xml" rel="self"/>
<link href="http://example.com/"/>
<updated>2023-07-27T08:09:19.884Z</updated>
<id>http://example.com/</id>
<author>
<name>Kevin</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>设计模式-单例模式</title>
<link href="http://example.com/posts/69e7b86f.html"/>
<id>http://example.com/posts/69e7b86f.html</id>
<published>2023-07-27T06:18:58.000Z</published>
<updated>2023-07-27T08:09:19.884Z</updated>
<content type="html"><![CDATA[<h1 id="单例模式"><a href="#单例模式" class="headerlink" title="单例模式"></a>单例模式</h1><p><code>单例-保证一个类的具体的实例在整个应用程序中只有唯一的一个</code></p><ol><li>构造私有化</li><li>提供这个类的唯一(静态)实例</li><li>提供一个公开的静态方法来返回这个实例</li></ol><h3 id="1-饿汉式"><a href="#1-饿汉式" class="headerlink" title="1. 饿汉式"></a>1. 饿汉式</h3><p><strong>单线程/多线程场景下都是安全的</strong></p><div class="highlight-container" data-rel="Java"><figure class="iseeu 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></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> tech.aistar.design.Singleton.v1;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Description</span> 饿汉式单例</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Author</span>: kevin</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Date</span>: 2023-07-27</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">Singleton</span> {</span><br><span class="line"> <span class="comment">//提供唯一的一个实例</span></span><br><span class="line"> <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">final</span> <span class="type">Singleton</span> <span class="variable">singleton</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">Singleton</span>();</span><br><span class="line"></span><br><span class="line"> <span class="comment">//1. 构造私有化</span></span><br><span class="line"> <span class="keyword">private</span> <span class="title function_">Singleton</span><span class="params">()</span> {</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">//提供一个接口</span></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> Singleton <span class="title function_">getInstance</span><span class="params">()</span> {</span><br><span class="line"> <span class="keyword">return</span> singleton;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">SingletonTest</span> {</span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span> {</span><br><span class="line"> <span class="type">Singleton</span> <span class="variable">singleton</span> <span class="operator">=</span> Singleton.getInstance();</span><br><span class="line"> <span class="type">Singleton</span> <span class="variable">singleton2</span> <span class="operator">=</span> Singleton.getInstance();</span><br><span class="line"> System.out.println(singleton2 == singleton);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure></div><h3 id="2-懒汉式"><a href="#2-懒汉式" class="headerlink" title="2. 懒汉式"></a>2. 懒汉式</h3><p><strong>单线程下是ok的,多线程下是不ok的 <em>无法在多线程下保证这个实例是唯一的</em></strong></p><div class="highlight-container" data-rel="Java"><figure class="iseeu 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></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> tech.aistar.design.Singleton.v2;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Description</span> 懒汉式</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Author</span>: kevin</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Date</span>: 2023-07-27</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">Singleton</span> {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">private</span> <span class="keyword">static</span> Singleton singleton;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 构造私有化</span></span><br><span class="line"> <span class="keyword">private</span> <span class="title function_">Singleton</span><span class="params">()</span> {</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 懒汉式,当getSingleton第一次被调用的时候才去创建实例</span></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> Singleton <span class="title function_">getSingleton</span><span class="params">()</span> {</span><br><span class="line"> <span class="keyword">return</span> singleton == <span class="literal">null</span> ? singleton = <span class="keyword">new</span> <span class="title class_">Singleton</span>() : singleton;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">SingletonTest</span> {</span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span> {</span><br><span class="line"> <span class="type">Singleton</span> <span class="variable">singleton</span> <span class="operator">=</span> Singleton.getSingleton();</span><br><span class="line"> <span class="type">Singleton</span> <span class="variable">singleton2</span> <span class="operator">=</span> Singleton.getSingleton();</span><br><span class="line"> System.out.println(singleton2 == singleton);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure></div><h3 id="3-剖析线程不安全"><a href="#3-剖析线程不安全" class="headerlink" title="3. 剖析线程不安全"></a>3. 剖析线程不安全</h3><div class="highlight-container" data-rel="Java"><figure class="iseeu 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><span class="line"><span class="keyword">package</span> tech.aistar.design.Singleton.v2;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Description</span> 懒汉式</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Author</span>: kevin</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Date</span>: 2023-07-27</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">Singleton</span> {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">private</span> <span class="keyword">static</span> Singleton instance;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">private</span> <span class="title function_">Singleton</span><span class="params">()</span> {</span><br><span class="line"> System.out.println(<span class="string">"构造块"</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 懒汉式,当getSingleton第一次被调用的时候才去创建实例</span></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> Singleton <span class="title function_">getInstance</span><span class="params">()</span> {</span><br><span class="line"> <span class="keyword">return</span> instance == <span class="literal">null</span> ? instance = <span class="keyword">new</span> <span class="title class_">Singleton</span>() : instance;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">SingletonTest</span> {</span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span> {</span><br><span class="line"><span class="comment">//模拟一个多线程的场景</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="type">int</span> <span class="variable">i</span> <span class="operator">=</span> <span class="number">0</span>; i < <span class="number">100</span>; i++) {</span><br><span class="line"> <span class="type">Thread</span> <span class="variable">t</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">Thread</span>(() -> {</span><br><span class="line"> <span class="type">Singleton</span> <span class="variable">s1</span> <span class="operator">=</span> Singleton.getInstance();</span><br><span class="line"> });</span><br><span class="line"> t.start();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure></div><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">构造块</span><br><span class="line">构造块</span><br><span class="line">构造块</span><br><span class="line">构造块</span><br><span class="line">构造块</span><br><span class="line">构造块</span><br><span class="line">构造块</span><br></pre></td></tr></table></figure></div><h3 id="4-懒汉式-线程安全"><a href="#4-懒汉式-线程安全" class="headerlink" title="4. 懒汉式-线程安全"></a>4. 懒汉式-线程安全</h3><p><em><strong>使用同步锁</strong></em>– <code>synchronized</code></p><div class="highlight-container" data-rel="Java"><figure class="iseeu 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></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> tech.aistar.design.Singleton.v2;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Description</span> 懒汉式</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Author</span>: kevin</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Date</span>: 2023-07-27</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">Singleton</span> {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">private</span> <span class="keyword">static</span> Singleton singleton;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 构造私有化</span></span><br><span class="line"> <span class="keyword">private</span> <span class="title function_">Singleton</span><span class="params">()</span> {</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 懒汉式,当getSingleton第一次被调用的时候才去创建实例</span></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">synchronized</span> Singleton <span class="title function_">getSingleton</span><span class="params">()</span> {</span><br><span class="line"> <span class="keyword">return</span> singleton == <span class="literal">null</span> ? singleton = <span class="keyword">new</span> <span class="title class_">Singleton</span>() : singleton;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">SingletonTest</span> {</span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span> {</span><br><span class="line"> <span class="type">Singleton</span> <span class="variable">singleton</span> <span class="operator">=</span> Singleton.getSingleton();</span><br><span class="line"> <span class="type">Singleton</span> <span class="variable">singleton2</span> <span class="operator">=</span> Singleton.getSingleton();</span><br><span class="line"> System.out.println(singleton2 == singleton);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><h3 id="5-饿汉式-懒汉式的区别"><a href="#5-饿汉式-懒汉式的区别" class="headerlink" title="5. 饿汉式/懒汉式的区别"></a>5. 饿汉式/懒汉式的区别</h3><ol><li><p>线程安全性方面</p><pre><code>饿汉模式 - 单线程/多线程 - 都是线程安全的 - 因为类加载的时候(线程对象还不存在!),就会初始化那个单例的实例.懒汉模式 - 需要通过加锁的方式,来实现多线程安全.</code></pre></li><li><p>效率方面 - 懒汉模式通常是需要加锁的,所以涉及到频繁加锁和释放锁的动作,而”锁”也是一个比较昂贵的资源对象[占内存]</p><p>效率不如饿汉模式.</p></li><li><p>占内存方面 - 饿汉模式比较占内存 - 类加载的时候,它在内存中就存在了. 懒汉模式是你需要使用它实例的时候,它才会第一次实例化.</p></li></ol><h3 id="6-双重检测锁-笔试-面试"><a href="#6-双重检测锁-笔试-面试" class="headerlink" title="6. 双重检测锁-笔试/面试"></a>6. 双重检测锁-笔试/面试</h3><div class="highlight-container" data-rel="Java"><figure class="iseeu 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></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> tech.aistar.design.Singleton.v5;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Description</span> 懒汉式- 正真开发中使用的 volatile关键字 禁止指令重排</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Author</span>: kevin</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@Date</span>: 2023-07-27</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">Singleton</span> {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">volatile</span> Singleton instance;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">private</span> <span class="title function_">Singleton</span><span class="params">()</span> {</span><br><span class="line"> System.out.println(<span class="string">"构造块"</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> Singleton <span class="title function_">getInstance</span><span class="params">()</span> {</span><br><span class="line"></span><br><span class="line"> <span class="comment">//创建对象的标准的流程 - "自认为的"</span></span><br><span class="line"> <span class="comment">//①申请空间,②初始化,调用构造方法(是一个完整的对象),③将对象在堆空间的内存地址赋值给引用变量</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">//TODO... 实际的顺序,jvm会进行指令重排,重排后的顺序①-③-②</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">//N=100个线程</span></span><br><span class="line"> <span class="comment">//假设10个线程可以同时判断为null</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">//等第一个线程执行①-③之后,另外90个线程进来了,判断不为null,直接return instance</span></span><br><span class="line"> <span class="comment">//但是这个90个线程拿到的是一个不完整对象的引用,然后可能就去使用这个不完整的对象 - 造成不可预期的结果.</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (instance == <span class="literal">null</span>) {</span><br><span class="line"></span><br><span class="line"> <span class="comment">//10个线程竞争锁资源</span></span><br><span class="line"> <span class="keyword">synchronized</span> (Singleton.class) {<span class="comment">//skip</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">//其中的一个线程进入...</span></span><br><span class="line"> <span class="keyword">if</span> (instance == <span class="literal">null</span>) {</span><br><span class="line"></span><br><span class="line"> <span class="comment">//按照指令重排后的顺序, 第一个线程进入之后按照①-③ , instance已经不为null</span></span><br><span class="line"> <span class="comment">//此时instance指向的那个对象仍然是一个不完整的对象,因为还没有来得及执行完构造.</span></span><br><span class="line"> instance = <span class="keyword">new</span> <span class="title class_">Singleton</span>();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//抢到锁的线程会立即释放锁资源</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> instance;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">SingletonTest</span> {</span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span> {</span><br><span class="line"><span class="comment">//模拟一个多线程的场景</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="type">int</span> <span class="variable">i</span> <span class="operator">=</span> <span class="number">0</span>; i < <span class="number">100</span>; i++) {</span><br><span class="line"> <span class="type">Thread</span> <span class="variable">t</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">Thread</span>(() -> {</span><br><span class="line"> <span class="type">Singleton</span> <span class="variable">s1</span> <span class="operator">=</span> Singleton.getInstance();</span><br><span class="line"> });</span><br><span class="line"> t.start();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure></div>]]></content>
<summary type="html"><h1 id="单例模式"><a href="#单例模式" class="headerlink" title="单例模式"></a>单例模式</h1><p><code>单例-保证一个类的具体的实例在整个应用程序中只有唯一的一个</code></p>
<ol>
<li>构造私有化<</summary>
<category term="java" scheme="http://example.com/tags/java/"/>
</entry>
<entry>
<title>java笔记</title>
<link href="http://example.com/posts/f9093ac3.html"/>
<id>http://example.com/posts/f9093ac3.html</id>
<published>2023-07-18T12:29:09.000Z</published>
<updated>2023-07-27T07:17:34.387Z</updated>
<content type="html"><![CDATA[<blockquote><p>本文主要对Java基础知识点进行总结。 @lsmallice</p></blockquote><h3 id="Java基础知识"><a href="#Java基础知识" class="headerlink" title="Java基础知识"></a>Java基础知识</h3><h3 id="HelloWord案例"><a href="#HelloWord案例" class="headerlink" title="HelloWord案例"></a><strong>HelloWord案例</strong></h3><p><code>HelloWord.java文件</code></p><div class="highlight-container" data-rel="Java"><figure class="iseeu 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><span class="line"><span class="comment">//定义一个类</span></span><br><span class="line"><span class="keyword">public</span> Class HelloWord{</span><br><span class="line"> <span class="comment">//类中定义主方法main()</span></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">mian</span><span class="params">(String[] args)</span>{</span><br><span class="line"> <span class="comment">//向控制台输出Hello Word!</span></span><br><span class="line"> System.out.println(<span class="string">"Hello Word!"</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><h4 id="Q-A"><a href="#Q-A" class="headerlink" title="Q&A"></a>Q&A</h4><ul><li><p>Q:为什么定义类的方式是这样的</p><p>Java语法规定类的定义是如下格式</p><div class="highlight-container" data-rel="Java"><figure class="iseeu 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><span class="line"><span class="comment">// 类修饰符 Class 类名 {}</span></span><br><span class="line"><span class="keyword">public</span> Class HelloWord {}</span><br></pre></td></tr></table></figure></div></li><li><p>Q:为什么要定义一个主方法(main)</p><p>在Java中main方法是程序的主入口,程序会执行mian方法中的代码</p></li><li><p>程序中是否可以有多个main方法?</p><p>可以,但是作为主入口的main方法必须按照以下格式</p><div class="highlight-container" data-rel="Java"><figure class="iseeu 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><span class="line"><span class="keyword">public</span> staic <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span></span><br><span class="line"> <span class="keyword">public</span> staic <span class="keyword">void</span> <span class="title function_">mian</span><span class="params">(String... args)</span></span><br><span class="line"> <span class="comment">// args可以用其他变量代替</span></span><br><span class="line"> <span class="comment">//String...是可以接收多个String类型的参数==String[]</span></span><br></pre></td></tr></table></figure></div></li><li><p>为什么使用 System.out.println(“Hello Word!”)可以在控制台打印出HelloWord!</p><p>这是Java内置的方法,只需要会使用即可.</p><p>其中”Hello Word!”处可以替换为:</p><ul><li>“字符串内容”</li><li>字面量/常量/变量+”字符串” 拼接而成的内容</li><li>表达式->将表达式的结果打印出来</li><li>任意的</li><li>变量</li></ul><h3 id="基本数据类型"><a href="#基本数据类型" class="headerlink" title="基本数据类型"></a>基本数据类型</h3></li></ul>]]></content>
<summary type="html"><blockquote>
<p>本文主要对Java基础知识点进行总结。 @lsmallice</p>
</blockquote>
<h3 id="Java基础知识"><a href="#Java基础知识" class="headerlink" title="Java基础知识"><</summary>
<category term="java" scheme="http://example.com/tags/java/"/>
</entry>
<entry>
<title>Vue学习笔记</title>
<link href="http://example.com/posts/71513ccb.html"/>
<id>http://example.com/posts/71513ccb.html</id>
<published>2023-07-15T08:50:43.000Z</published>
<updated>2023-07-17T13:47:26.325Z</updated>
<content type="html"><![CDATA[<h3 id="0-Vue简介"><a href="#0-Vue简介" class="headerlink" title="0. Vue简介"></a>0. Vue简介</h3><h4 id="1-Vue是什么"><a href="#1-Vue是什么" class="headerlink" title="1. Vue是什么?"></a>1. Vue是什么?</h4><blockquote><p>是一套用于构建用户界面的<strong>渐进式框架</strong>。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与<a class="link" href="https://v2.cn.vuejs.org/v2/guide/single-file-components.html" >现代化的工具链 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>以及各种<a class="link" href="https://github.com/vuejs/awesome-vue#libraries--plugins" >支持类库 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p><ul><li><code>构建用户界面:将手中的数据通过某种方法, 变成用户可以看到的界面</code></li><li><code>渐进式:Vue是可以自底向上逐层的应用.如果为简单应用,只需要一个轻量小巧的核心库,如果为复杂应用,可以引用各式各样的 Vue插件. 也就是从一个轻量小巧的核心库,逐渐递进到Vue插件库</code></li></ul></blockquote><h4 id="2-由谁开发"><a href="#2-由谁开发" class="headerlink" title="2.由谁开发?"></a>2.由谁开发?</h4><p><code>沈雨溪</code></p><h4 id="3-Vue的特点"><a href="#3-Vue的特点" class="headerlink" title="3. Vue的特点"></a>3. Vue的特点</h4><blockquote><ol><li><p>采用组件化模式, 提高代码复用率,且让代码更好维护.</p><p><code>组件化:一个页面中可能有多个模块,可将模块分成不同的XXX.Vue页面书写,封装成组件</code></p><img lazyload src="/images/loading.svg" data-src="/posts/71513ccb/%E7%BB%84%E4%BB%B6%E5%BC%8F.png" class="" > </li><li><p>声明式编码,让编码人员无需直接操作DOM, 提高开放效率</p></li><li><p>使用虚拟DOM+优秀的DIff算法,尽量复用DOM节点</p><img lazyload src="/images/loading.svg" data-src="/posts/71513ccb/Diff.png" class="" ></li></ol></blockquote><h4 id="4-Vue2官网指南使用"><a href="#4-Vue2官网指南使用" class="headerlink" title="4. Vue2官网指南使用"></a>4. Vue2官网指南使用</h4><blockquote><p> <a class="link" href="https://v2.cn.vuejs.org/" >https://v2.cn.vuejs.org/ <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p><p>顶部导航——学习——教程&API：最重要的两个部分（API相当于是Vue的字典）；</p><p>顶部导航——学习——风格指南：写出更加优雅的代码，有优先级A（必要的）、B（强烈推荐）、C（推荐）等；</p><p>顶部导航——学习——Cookbook：Vue的使用技巧；</p><p>顶部导航——生态系统——帮助&信息：不重要，可不看；</p><p>顶部导航——生态系统——工具&插件：重要，后期需要，如脚手架、路由等:</p></blockquote><h4 id="5-搭建Vue开发环境"><a href="#5-搭建Vue开发环境" class="headerlink" title="5. 搭建Vue开发环境"></a>5. 搭建Vue开发环境</h4><ol><li><strong>下载引入开发版本的Vue.js</strong></li></ol><p><code>最开始使用Vue不推荐Vue-cli的方式，开始使用的是在.html中引入Vue。</code></p><ol start="2"><li>安装开发者工具</li></ol><p><a class="link" href="https://gitee.com/link?target=https://devtools.vuejs.org/guide/installation.html" >https://devtools.vuejs.org/guide/installation.html <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p><p>关闭提示</p><p><code>全局配置vue.config，去除提示</code></p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Vue.config.productionTip=false</span><br></pre></td></tr></table></figure></div><p><code>未必生效,若不生效,直接修改vue.js源码即可</code></p><h3 id="1-Vue基础部分"><a href="#1-Vue基础部分" class="headerlink" title="1. Vue基础部分"></a>1. Vue基础部分</h3><h4 id="1-1-Vue程序初体验"><a href="#1-1-Vue程序初体验" class="headerlink" title="1.1 Vue程序初体验"></a>1.1 Vue程序初体验</h4><h5 id="01-第一个Vue程序"><a href="#01-第一个Vue程序" class="headerlink" title="01-第一个Vue程序"></a>01-<strong>第一个Vue程序</strong></h5><p><code>hello Word!示例代码</code></p><div class="highlight-container" data-rel="Html"><figure class="iseeu 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><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh-CN"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>第一个Vue程序<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="comment"><!-- 安装vue：当你使用script进行Vue安装之后，上下文中就注册了一个全局变量：Vue --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../js/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- 指定Vue实例的挂载位置。 --></span></span><br><span class="line"> <span class="comment"><!-- <div id="app"></div> --></span></span><br><span class="line"> <span class="tag"><<span class="name">hr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">/* </span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 第一步：创建Vue实例</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 1. 为什么要new Vue()，直接调用Vue()函数不行吗？</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 不行，因为直接调用Vue()函数，不创建实例的话，会出现以下错误：</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> Vue is a constructor and should be called with the `new` keyword</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 2. 关于Vue构造函数的参数：options？</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> option翻译为选项</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> options翻译为多个选项</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> Vue框架要求这个options参数必须是一个纯粹的JS对象：{}</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 在{}对象中可以编写大量的key:value对。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 一个key:value对就是一个配置项。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 主要是通过options这个参数来给Vue实例指定多个配置项。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 3. 关于template配置项：</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> template翻译为：模板。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> template配置项用来指定什么？用来指定模板语句，模板语句是一个字符串形式的。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 什么是模板语句？</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> Vue框架自己制定了一些具有特殊含义的特殊符号。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> Vue的模板语句是Vue框架自己搞的一套语法规则。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 我们写Vue模板语句的时候，不能乱写，要遵守Vue框架的模板语法规则。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 模板语句可以是一个纯粹的HTML代码，也可以是Vue中的特殊规则。也可以是HTML代码 + Vue的特殊规则。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> template后面的模板语句会被Vue框架的编译器进行编译，转换成浏览器能够识别的HTML代码。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> */</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> template : <span class="string">'<h1>Hello Vue!!!!!</h1>'</span></span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">/* </span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 第二步：将Vue实例挂载到id='app'的元素位置。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 1. Vue实例都有一个$mount()方法，这个方法的作用是什么？</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 将Vue实例挂载到指定位置。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 2. #app 显然是ID选择器。这个语法借鉴了CSS。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> */</span></span></span><br><span class="line"><span class="language-javascript"> myVue.$mount(<span class="string">'#app'</span>)</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//myVue.$mount(document.getElementById('app'))</span></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div><h5 id="02-模版语句的数据来源"><a href="#02-模版语句的数据来源" class="headerlink" title="02-模版语句的数据来源"></a>02-模版语句的数据来源</h5><p>模版语句的数据来源 :</p><ol><li><p>谁可以给模版语句提供数据支持呢? <code>data选项</code></p></li><li><p>data选项的类型是什么? <code>Object</code> | <code> Function</code> (对象或者函数)</p></li><li><p>data配置项的专业叫法: Vue实例的数据对象. (data实际上是给整个Vue实例提供数据来源的.)</p></li><li><p>如果data是对象的话,对象必须是纯粹的对象 (含零个或者多个的 Key /value 对)</p></li><li><p>data数据是如何插入到模版语句当中的?</p></li></ol><p><code>{{}}</code>这是Vue框架自己搞得一套语法,别的框架看不懂的浏览器也是不能识别的. </p><p>Vue框架自己能够看懂的,这种语法在Vue框架中被称为: 模版语法中的插值语法.(有人把他叫做胡子语法)</p><p>怎么用?</p><div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{{data的key}}</span><br></pre></td></tr></table></figure></div><p>插值语法的小细节</p><p>{<code>这个位置不能够包含其他字符包括空格</code>{}<code>这个位置不能够包含其他字符包括空格</code>}</p><div class="highlight-container" data-rel="Html"><figure class="iseeu 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><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><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>模板语句的数据来源<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="comment"><!-- 安装Vue --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../js/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- 指定挂载位置 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- vue程序 --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-handlebars"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> new Vue({</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> template : `<span class="tag"><<span class="name">h1</span>></span>最近非常火爆的电视剧</span><span class="template-variable">{{<span class="name">name</span>}}</span><span class="language-xml">，它的上映日期是</span><span class="template-variable">{{<span class="name">releaseTime</span>}}</span><span class="language-xml">。主角是</span><span class="template-variable">{{<span class="name">lead.name</span>}}</span><span class="language-xml">，年龄是</span><span class="template-variable">{{<span class="name">lead.age</span>}}</span><span class="language-xml">岁。</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> 其他演员包括：</span><span class="template-variable">{{<span class="name">actors</span>[0].name}}</span><span class="language-xml">(</span><span class="template-variable">{{<span class="name">actors</span>[0].age}}</span><span class="language-xml">岁)，</span><span class="template-variable">{{<span class="name">actors</span>[1].name}}</span><span class="language-xml">(</span><span class="template-variable">{{<span class="name">actors</span>[1].age}}</span><span class="language-xml">岁)。</span><span class="template-variable">{{<span class="name">a.b.c.d.e.name</span>}}</span><span class="language-xml"></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> <span class="tag"></<span class="name">h1</span>></span>`,</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> data : {</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> name : '狂飙!!!',</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> releaseTime : '2023年1月2日',</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> lead : {</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> name : '高启强',</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> age : 41</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> },</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> actors : [</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> {</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> name : '安欣',</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> age : 41</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> },</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> {</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> name : '高启兰',</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> age : 29</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> }</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> ],</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> a : {</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> b : {</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> c : {</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> d : {</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> e : {</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> name : '呵呵'</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> }</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> }</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> }</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> }</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> }</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> }</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> }).$mount('#app')</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> </span></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div><h5 id="03-template配置项详解"><a href="#03-template配置项详解" class="headerlink" title="03-template配置项详解"></a>03-template配置项详解</h5><p>关于template配置项:</p><ol><li>template 后面指定的是模版语句,但是模版语句中只有一个根节点.</li><li>只有data中的数据发生变化,模版语句一定会重新编译. (只要data变,template就会重新编译,重新渲染)</li><li>如果使用template配置项额话,指定挂载位置的元素会被替换.</li><li>好消息: 目前我们可以不使用template来编写模版语句. 这些模版语句可以直接写到html标签中.Vue框架能够找到并编译,然后渲染.</li><li>如果直接将模版语句先写到HTML标签中,指定的挂载位置就不会被替换了.</li></ol><p>关于$mount(‘#app’)?</p><p>也可以不使用$mount(“#app”)的方式进行挂载了.</p><p>在Vue中有一个配置项: el</p><p>el配置项和$mount()可以达到同样的效果.</p><p>el配置项的作用?</p><p>告诉Vue实例去接管哪个容器.</p><p>el: ‘#app’,表示让Vue实例去接管id=’app’的容器</p><p>el其实是element的缩写.翻译为元素.</p><div class="highlight-container" data-rel="Html"><figure class="iseeu 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><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>template配置项详解<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="comment"><!-- 安装Vue --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../js/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- 指定挂载位置 --></span></span><br><span class="line"> <span class="comment"><!-- 注意：以下代码就是只有Vue框架能够看懂的代码了。下面的代码就是一个模板语句。这个代码是需要Vue框架编译，然后渲染的。 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{msg}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{name}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-handlebars"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> new Vue({</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> // 错误的</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> //template : '<span class="tag"><<span class="name">h1</span>></span></span><span class="template-variable">{{<span class="name">msg</span>}}</span><span class="language-xml"><span class="tag"></<span class="name">h1</span>></span><span class="tag"><<span class="name">h1</span>></span>动力节点老杜<span class="tag"></<span class="name">h1</span>></span>',</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> template : `</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> <span class="tag"><<span class="name">div</span>></span></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> <span class="tag"><<span class="name">h1</span>></span></span><span class="template-variable">{{<span class="name">msg</span>}}</span><span class="language-xml"><span class="tag"></<span class="name">h1</span>></span></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> <span class="tag"><<span class="name">h1</span>></span></span><span class="template-variable">{{<span class="name">name</span>}}</span><span class="language-xml"><span class="tag"></<span class="name">h1</span>></span></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> <span class="tag"></<span class="name">div</span>></span></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> `, </span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> data : {</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> msg : 'Hello Vue!!!!!!!',</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> name : 'a动力节点老杜!!!!!!'</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> },</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> el : '#app'</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> //el : document.getElementById('app')</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> })</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> //}).$mount('#app')</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> </span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> </span></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div><h5 id="Vue实例和容器是一夫一妻制"><a href="#Vue实例和容器是一夫一妻制" class="headerlink" title="Vue实例和容器是一夫一妻制"></a>Vue实例和容器是一夫一妻制</h5><div class="highlight-container" data-rel="Html"><figure class="iseeu 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><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Vue实例 和 容器 的关系是：一夫一妻制<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="comment"><!-- 安装Vue --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../js/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- 准备容器 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{msg}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{msg}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 准备容器 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app2"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{name}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- vue程序 --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">/* </span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 验证：一个Vue实例可以接管多个容器吗？</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 不能。一个Vue实例只能接管一个容器。一旦接管到容器之后，即使后面有相同的容器，Vue也是不管的。因为Vue实例已经“娶到媳妇”了。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> */</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> el : <span class="string">'.app'</span>,</span></span><br><span class="line"><span class="language-javascript"> data : {</span></span><br><span class="line"><span class="language-javascript"> msg : <span class="string">'Hello Vue!'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> el : <span class="string">'#app2'</span>,</span></span><br><span class="line"><span class="language-javascript"> data : {</span></span><br><span class="line"><span class="language-javascript"> name : <span class="string">'zhangsan'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 这个Vue实例想去接管 id='app2'的容器，但是这个容器已经被上面那个Vue接管了。他只能“打光棍”了。</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> el : <span class="string">'#app2'</span>,</span></span><br><span class="line"><span class="language-javascript"> data : {</span></span><br><span class="line"><span class="language-javascript"> name : <span class="string">'jackson'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div><h4 id="1-2-Vue核心技术"><a href="#1-2-Vue核心技术" class="headerlink" title="1.2 Vue核心技术"></a>1.2 Vue核心技术</h4><h5 id="01-模版语法之插值语法"><a href="#01-模版语法之插值语法" class="headerlink" title="01-模版语法之插值语法"></a>01-模版语法之插值语法</h5><p> 主要研究：<br> 1. 在data中声明的变量、函数等都可以。<br> 2. 常量都可以。<br> 3. 只要是合法的javascript表达式，都可以。<br> 4. 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 等。<br> ‘Infinity,undefined,NaN,isFinite,isNaN,’<br> ‘parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,’<br> ‘Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,’<br> ‘require’</p><div class="highlight-container" data-rel="Html"><figure class="iseeu 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><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>模板语法之插值语法{{}}<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="comment"><!-- 安装Vue --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../js/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- 准备容器 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="comment"><!-- 在data中声明的 --></span></span><br><span class="line"> <span class="comment"><!-- 这里就可以看做在使用msg变量。 --></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{msg}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{sayHello()}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="comment"><!-- <h1>{{i}}</h1> --></span></span><br><span class="line"> <span class="comment"><!-- <h1>{{sum()}}</h1> --></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 常量 --></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{100}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{'hello vue!'}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{3.14}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- javascript表达式 --></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{1 + 1}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{'hello' + 'vue'}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{msg + 1}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{'msg' + 1}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{gender ? '男' : '女'}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{number + 1}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{'number' + 1}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{msg.split('').reverse().join('')}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 错误的：不是表达式，这是语句。 --></span></span><br><span class="line"> <span class="comment"><!-- <h1>{{var i = 100}}</h1> --></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 在白名单里面的 --></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{Date}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{Date.now()}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{Math}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{Math.ceil(3.14)}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- vue程序 --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 用户自定义的一个全局变量</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> i = <span class="number">100</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 用户自定义的一个全局函数</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'sum.....'</span>);</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> el : <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> data : {</span></span><br><span class="line"><span class="language-javascript"> number : <span class="number">1</span>,</span></span><br><span class="line"><span class="language-javascript"> gender : <span class="literal">true</span>,</span></span><br><span class="line"><span class="language-javascript"> msg : <span class="string">'abcdef'</span>, <span class="comment">// 为了方便沟通，以后我们把msg叫做变量。（这行代码就可以看做是变量的声明。）</span></span></span><br><span class="line"><span class="language-javascript"> sayHello : <span class="keyword">function</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'hello vue!'</span>);</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div><h5 id="02-模版语法之指令"><a href="#02-模版语法之指令" class="headerlink" title="02-模版语法之指令"></a>02-模版语法之指令</h5><p>指令语法:</p><ol><li><p>指令是什么</p><p>指令的指着是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 Demo</p></li><li><p>Vue框架中的所以指令的名字都以”v-“开始.</p></li><li><p>插值是写在标签体当中的,那么指令写在哪里呢?</p><p>Vue框架中所以得指令都是以HTML标签的属性形式存在的,例如:</p><p><code><span 指令是写在这里的></code><code></span></code></p><p>注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。</p><p> 是需要先让Vue框架进行编译的，编译之后的内容浏览器是可以看懂的。</p></li><li><p>指令的语法规则：</p></li></ol><p> 指令的一个完整的语法格式：</p><p> <HTML标签 v-指令名:参数=”javascript表达式”></HTML标签></p><p> 表达式：</p><p> 之前在插值语法中，那么指令中的表达式就可以写什么。实际上是一样的。</p><p> 但是需要注意的是：在指令中的表达式位置不能外层再添加一个<code>{{}}</code></p><p> 不是所有的指令都有参数和表达式：</p><p> 有的指令，不需要参数，也不需要表达式，例如：v-once</p><p> 有的指令，不需要参数，但是需要表达式，例如：v-if=”表达式”</p><p> 有的指令，既需要参数，又需要表达式，例如：v-bind:参数=”表达式”</p><ol start="5"><li>v-once 指令</li></ol><p> 作用：只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 </p><ol start="6"><li>v-if=”表达式” 指令</li></ol><p> 作用：表达式的执行结果需要是一个布尔类型的数据：true或者false</p><p> true：这个指令所在的标签，会被渲染到浏览器当中。</p><p> false：这个指令所在的标签，不会被渲染到浏览器当中。</p><div class="highlight-container" data-rel="Html"><figure class="iseeu 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><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>模板语法之指令语法 v-??? <span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="comment"><!-- 安装Vue --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../js/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- 准备一个容器 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{msg}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">v-once</span>></span>{{msg}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">v-if</span>=<span class="string">"a > b"</span>></span>v-if测试：{{msg}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- vue程序 --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> el : <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> data : {</span></span><br><span class="line"><span class="language-javascript"> msg : <span class="string">'Hello Vue!'</span>,</span></span><br><span class="line"><span class="language-javascript"> a : <span class="number">10</span>,</span></span><br><span class="line"><span class="language-javascript"> b : <span class="number">11</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div><h5 id="03-v-bind指令详解"><a href="#03-v-bind指令详解" class="headerlink" title="03-v-bind指令详解"></a>03-v-bind指令详解</h5><p> v-bind指令详解</p><ol><li><p>这个指令是干啥的？<br> 它可以让HTML标签的某个属性的值产生动态的效果。</p></li><li><p>v-bind指令的语法格式：</p> <div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">HTML标签</span> <span class="attr">v-bind:参数</span>=<span class="string">"表达式"</span>></span><span class="tag"></<span class="name">HTML标签</span>></span></span><br></pre></td></tr></table></figure></div></li><li><p>v-bind指令的编译原理？<br> 编译前：</p><pre><code> <div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">HTML标签</span> <span class="attr">v-bind:参数</span>=<span class="string">"表达式"</span>></span><span class="tag"></<span class="name">HTML标签</span>></span></span><br></pre></td></tr></table></figure></div></code></pre><p> 编译后：<br> <div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">HTML标签</span> <span class="attr">参数</span>=<span class="string">"表达式的执行结果"</span>></span><span class="tag"></<span class="name">HTML标签</span>></span></span><br></pre></td></tr></table></figure></div><br> 注意两项：<br> 第一：在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”<br> 第二：表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化。<br> 所以，连带的就会产生动态效果。</p></li><li><p>v-bind因为很常用，所以Vue框架对该指令提供了一种简写方式：<br> 只是针对v-bind提供了以下简写方式：</p><pre><code> <div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><img:src="imgPath"></span><br></pre></td></tr></table></figure></div></code></pre></li><li><p>什么时候使用插值语法？什么时候使用指令？<br> 凡是标签体当中的内容要想动态，需要使用插值语法。<br> 只要向让HTML标签的属性动态，需要使用指令语法。</p></li></ol><div class="highlight-container" data-rel="Html"><figure class="iseeu 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><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>v-bind指令详解（它是一个负责动态绑定的指令）<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="comment"><!-- 安装Vue --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../js/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- 准备一个容器 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="comment"><!-- 注意：以下代码中 msg 是变量名。 --></span></span><br><span class="line"> <span class="comment"><!-- 注意：原则上v-bind指令后面的这个参数名可以随便写。 --></span></span><br><span class="line"> <span class="comment"><!-- 虽然可以随便写，但大部分情况下，这个参数名还是需要写成该HTML标签支持的属性名。这样才会有意义。 --></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-bind:xyz</span>=<span class="string">"msg"</span>></span><span class="tag"></<span class="name">span</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 这个表达式带有单引号，这个'msg'就不是变量了，是常量。 --></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-bind:xyz</span>=<span class="string">"'msg'"</span>></span><span class="tag"></<span class="name">span</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- v-bind实战 --></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"../img/1.jpg"</span>></span> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">v-bind:src</span>=<span class="string">"imgPath"</span>></span> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- v-bind简写形式 --></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">:src</span>=<span class="string">"imgPath"</span>></span> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 这是一个普通的文本框 --></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"username"</span> <span class="attr">value</span>=<span class="string">"zhangsan"</span>></span> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="comment"><!-- 以下文本框可以让value这个数据变成动态的：这个就是典型的动态数据绑定。 --></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"username"</span> <span class="attr">:value</span>=<span class="string">"username"</span>></span> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 使用v-bind也可以让超链接的地址动态 --></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://www.baidu.com"</span>></span>走起<span class="tag"></<span class="name">a</span>></span> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">:href</span>=<span class="string">"url"</span>></span>走起2<span class="tag"></<span class="name">a</span>></span> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 不能采用以下写法吗？ --></span></span><br><span class="line"> <span class="comment"><!-- </span></span><br><span class="line"><span class="comment"> 不能这样，报错了，信息如下：</span></span><br><span class="line"><span class="comment"> Interpolation inside attributes has been removed. </span></span><br><span class="line"><span class="comment"> Use v-bind or the colon shorthand instead. For example, </span></span><br><span class="line"><span class="comment"> instead of <div id="{{ val }}">, use <div :id="val"></span></span><br><span class="line"><span class="comment"> </span></span><br><span class="line"><span class="comment"> 属性内部插值这种语法已经被移除了。（可能Vue在以前的版本中是支持这种写法的，但是现在不允许了。）</span></span><br><span class="line"><span class="comment"> 请使用v-bind或冒号速记来代替。</span></span><br><span class="line"><span class="comment"> 请使用 <div :id="val"> 来代替 <div id="{{ val }}"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> --></span></span><br><span class="line"> <span class="comment"><!-- <a href="{{url}}">走起3</a> --></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{msg}}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- vue程序 --></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 赋值的过程就可以看做是一种绑定的过程。</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//let i = 100</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> el : <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> data : {</span></span><br><span class="line"><span class="language-javascript"> msg : <span class="string">'Hello Vue!'</span>,</span></span><br><span class="line"><span class="language-javascript"> imgPath : <span class="string">'../img/1.jpg'</span>,</span></span><br><span class="line"><span class="language-javascript"> username : <span class="string">'jackson'</span>,</span></span><br><span class="line"><span class="language-javascript"> url : <span class="string">'https://www.baidu.com'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div>]]></content>
<summary type="html"><h3 id="0-Vue简介"><a href="#0-Vue简介" class="headerlink" title="0. Vue简介"></a>0. Vue简介</h3><h4 id="1-Vue是什么"><a href="#1-Vue是什么" class="header</summary>
<category term="vue" scheme="http://example.com/tags/vue/"/>
</entry>
<entry>
<title>hexo博客部署云服务器</title>
<link href="http://example.com/posts/a27e2ba2.html"/>
<id>http://example.com/posts/a27e2ba2.html</id>
<published>2023-07-14T05:50:50.000Z</published>
<updated>2023-07-17T00:59:41.692Z</updated>
<content type="html"><![CDATA[<h2 id="步骤一：本地电脑部署"><a href="#步骤一：本地电脑部署" class="headerlink" title="步骤一：本地电脑部署"></a>步骤一：本地电脑部署</h2><p><strong>1、安装nodeJS</strong></p><p>浏览器进入NodeJS 官网，安装 LTS（Long Term Support）版本。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/bbbbasdas.png" class="" > <p>验证nodeJS是否安装成功：</p><p>按住win+R，输入cmd，进入 cmd 命令行工具，输入node -v查看 node 版本，若出现版本信息（如下图示），则说明 node 安装成功。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/4e2cbd0d0fd849028e53115b790fdb30.png" class="" > <p><strong>2.、安装Hexo</strong></p><p><strong>i. 安装Hexo</strong></p><p>在 cmd 命令行中输入npm install hexo-cli -g，安装 hexo。完成后输入hexo -v查看版本信息，确认安装成功。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/418900ecfc924968967b40adee7263c1.png" class="" > <p><strong>ii. 初始化根目录</strong></p><p>创建文件夹Hexo-Blog，在 cmd 命令行中进入该目录，输入hexo init初始化根目录。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/0fde1dba8163455da0dbbfb981028021.png" class="" > <p><strong>iii. 本地查看</strong></p><p>输入hexo g&&hexo s（生成静态文件，并开启本地服务器）</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/b551a8442ba54d5a979f1f8ae63f5c5e.png" class="" > <p>根据提示，在浏览器中打开<a href="http://localhost:4000，即可看到初始的博客页面。">http://localhost:4000，即可看到初始的博客页面。</a></p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/c.png" class="" > <p><strong>iv. 美化博客</strong></p><p>对自己的博客进行更改样式、美化、增删功能、发布文章等操作，就不展开介绍了。</p><h2 id="步骤二：购买域名"><a href="#步骤二：购买域名" class="headerlink" title="步骤二：购买域名"></a>步骤二：购买域名</h2><p>本教程后续涉及域名处，以test.top为例进行演示；读者在自己学习部署时，应将此域名替换为自己网站的域名。</p><p><strong>1、购买域名</strong></p><p>在阿里云/腾讯云/华为云上可以购买域名，.com/.cn/.top/.xyz/.store等域名一应俱全.</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/al.jpeg" class="" > <p><strong>2、域名备案</strong></p><p>域名绑定国内的服务器，必须要进行备案操作，否则将无法访问。从提交备案信息，到管局审核通过，备案号下来一共花了不到 10 天的时间。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/5d5ebc1f0d70482599739fd3038eee33.png" class="" > <p><strong>3、域名解析</strong></p><p>域名解析是把域名指向网站空间 IP，让人们通过注册的域名可以方便地访问到网站的一种服务。IP 地址是网络上标识站点的数字地址，为了方便记忆，采用域名来代替 IP 地址标识站点地址。</p><p><img lazyload src="/images/loading.svg" data-src="https://ucc.alicdn.com/pic/developer-ecology/eb41537ce04b4d9db7f94f208b97c0ec.png" alt="image017-打码.png" ></p><p><strong>说明</strong>：</p><p>◾ 主机记录中，www代表域名前加www.，如<a class="link" href="http://www.test.top%EF%BC%8C@就代表test.top,这样两个地址都能访问到服务器了/" >www.test.top，@就代表test.top，这样两个地址都能访问到服务器了 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p><p>◾ 记录类型A是指，将域名指向一个IPV4地址</p><p>◾ 记录值就是服务器的公网 IP</p><h2 id="步骤三：服务器端配置"><a href="#步骤三：服务器端配置" class="headerlink" title="步骤三：服务器端配置"></a>步骤三：服务器端配置</h2><p><strong>1、购买服务器</strong></p><p>为了让其他用户在自己的客户端访问到自己的博客，就需要将博客部署到服务器上，其他用户通过访问服务器的公网 IP 来访问到服务器上的资源。若绑定了域名，还可以通过域名访问。</p><p>在华为云上购买了云耀云服务器。在系统的选择上，作为服务器系统，CentOS 稳定、强大，所以系统镜像选择了 Linux 系统的 CentOS 7.5 版本。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/llllll.png" class="" title="image-20230714144308634" > <p><strong>2、配置端口</strong></p><p>点击云服务器管理页面的安全组，确保22端口 与 80 端口是开放的 ,没有就点配置规则,然后添加进去.</p><p>使用 HTTP 协议访问服务器，需要在服务器端监听 80 端口，因为 80 端口是服务器的默认端口号。而华为云服务器默认开启80 端口，则不需要需要我们手动打开监听 80 端口。另外，服务器端配置 Git 时需要使用 SSH 协议进行本地与服务器的连接，需要服务器监听 22 端口，也是默认开启,也不需要手动打开。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/WX20230714-144457@2x.png" class="" > <img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/WX20230714-144644@2x.png" class="" > <p><strong>3、服务器环境搭建</strong></p><p>此步骤需要在<strong>轻量应用服务器</strong>上完成。具体方法可以使用远程登陆（如下图示），也可以使用 Xshell 客户端进行连接。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/WX20230714-145005@2x.png" class="" > <p><strong>i. 安装 nginx</strong></p><p>①切换到 root 帐号，输入命令：</p><div class="highlight-container" data-rel="Ebnf"><figure class="iseeu highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">sudo su root</span></span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/cf7151aefbdc4087b7b6cd0780a182d5.png" class="" title="image027.png" > <p>②需要使用 nginx 作为 Web 服务器，所以我们首先要安装 nginx。可以使用 yum 命令直接进行安装：</p><div class="highlight-container" data-rel="Cmake"><figure class="iseeu highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yum <span class="keyword">install</span> -y nginx</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/e0c0dd5cf55e401aa79a8beb6f3c8d09.png" class="" title="image028.png" > <p>③安装完成后启动 nginx 服务器，命令如下：</p><div class="highlight-container" data-rel="Nsis"><figure class="iseeu highlight nsis"><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="params">system</span>ctl start nginx</span><br><span class="line"><span class="params">system</span>ctl enable nginx</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/7d6ed2eebaf944c3b45f6ab0adddf160.png" class="" title="image030.png" > <p><strong>ii. 建立博客根目录</strong></p><p>将博客的页面文件放在/home/www/website/路径下，需要先创建这些文件。</p><div class="highlight-container" data-rel="Bash"><figure class="iseeu 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"><span class="built_in">cd</span> /home</span><br><span class="line"><span class="built_in">mkdir</span> www</span><br><span class="line"><span class="built_in">cd</span> www</span><br><span class="line"><span class="built_in">mkdir</span> website</span><br></pre></td></tr></table></figure></div><p>查看创建的文件：</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/cd4d98edc0d64dfa9eb7c6bb872ef2b4.png" class="" title="image032.png" > <p><strong>iii. 配置 nginx 路由</strong></p><p>建立了博客的根目录后，需要将 nginx 服务器指向这个根目录地址，才能访问到博客页面，所以需要修改 nginx 的配置文件。</p><p>阿里云默认的库下载的是基于 fedora 的 nginx，查阅资料发现，默认配置文件位于etc/nginx/下的nginx.conf。</p><p>查看 nginx 的默认配置文件：</p><div class="highlight-container" data-rel="Bash"><figure class="iseeu 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"><span class="built_in">cd</span> ~</span><br><span class="line"><span class="built_in">cd</span> /etc/nginx</span><br><span class="line"><span class="built_in">ls</span></span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/f1f1d7f1504643c691a8bda76d415cd6.png" class="" title="image034.png" > <p>文件中的nginx.conf就是默认配置文件。</p><p>但不采用直接修改 nginx 配置文件的方式，而是新建一个文件夹，将自己的配置写在新建的文件夹中。再利用include，在配置文件nginx.conf中将文件夹引入进来即可。</p><p>这样若有新的需求时，只需在文件夹中添加新需求的配置文件即可，不会再次修改配置文件nginx.conf，提高效率。</p><p>切换/etc/nginx/目录，在此目录下创建一个文件夹vhost：</p><div class="highlight-container" data-rel="Bash"><figure class="iseeu 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"><span class="built_in">cd</span> /etc/nginx</span><br><span class="line"><span class="built_in">mkdir</span> vhost</span><br><span class="line"><span class="built_in">cd</span> vhost</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/23861111c24f47a0a35be73fee40a2ac.png" class="" title="image036.png" > <p>输入vim blog.conf新建blog.conf文件并编辑内容：</p><div class="highlight-container" data-rel="Abnf"><figure class="iseeu highlight abnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">server{</span><br><span class="line">listen <span class="number">80</span><span class="comment">;</span></span><br><span class="line">root /home/www/website<span class="comment">;</span></span><br><span class="line">server_name test.top<span class="comment">;</span></span><br><span class="line">location /{ </span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/9688269c399b49d2927958d35720c191.png" class="" title="image037-打码.png" > <p>其中，listen代表监听 80 端口。root是博客的根目录，页面存放的地址。server_name是服务器名称，填域名test.top，将域名和博客的页面根目录绑定。</p><p>为了让<a class="link" href="http://www.test.top/?spm=a2c6h.12873639.article-detail.4.1fd01076P6ZqNg" >http://www.test.top/ <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>也能访问到博客页面，再新建一个配置文件wwwblog.conf，将server_name设置为<a href="http://www.test.top：">www.test.top：</a></p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/1fdbdf1962d24e64b7df3e976af8cb14.png" class="" title="image038-打码.png" > <p>这样，/etc/nginx/vhost目录下就有两个配置文件，blog.conf和wwwblog.conf：</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/05e6f7dbcf5141ae8a3abe75cbdcb973.png" class="" title="image039.png" > <p>打开/etc/nginx/目录下的nginx.conf文件，添加下面一行代码，将刚才新建的配置文件引入进来。*.conf的意思是将vhost文件夹下的所有.conf后缀的文件都引入了进来。注意：要写在http{}的里面。</p><p>include /etc/nginx/vhost/*.conf;</p><p>至此，完成了 nginx 路由的配置，将域名和云服务器指定路径进行了绑定。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/0d59a1a13e4a41f2b00286447ee285af.png" class="" title="image040.png" > <p><strong>4、安装nodeJS</strong></p><p>输入输入命令：</p><div class="highlight-container" data-rel="Armasm"><figure class="iseeu highlight armasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">curl</span> -<span class="built_in">sL</span> https:<span class="comment">//rpm.nodesource.com/setup_10.x | bash - yum install -y nodejs</span></span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/025f262b83034293bc84dff4c3df2ae8.png" class="" title="image042.png" > <img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/8821fb7a9e3a49c6a42f2ab4d67aa5af.png" class="" title="image044.png" > <img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/531dfc8e3a9b4178b25788b52011b2c1.png" class="" title="image046.png" > <img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/1eab8e3b93ad4c82a5bf38242d2f75e5.png" class="" title="image048.png" > <p>安装完成后执行 node -v 和 npm -v ，如果打印版本号则安装成功。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/f0b6296bd26d4c7db7ba11a2814dfcfa.png" class="" title="image049.png" > <h2 id="步骤四：配置服务端Git"><a href="#步骤四：配置服务端Git" class="headerlink" title="步骤四：配置服务端Git"></a>步骤四：配置服务端Git</h2><p>这一部分主要目的是本地电脑可以通过ssh方式连接到云服务器，然后就可以通过命令行方式将博客传到云服务器上。</p><p><strong>1、安装Git</strong></p><p>输入命令：</p><div class="highlight-container" data-rel="Cmake"><figure class="iseeu highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yum <span class="keyword">install</span> git</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/7d1a1c9e731748159df6c3e3a9673011.png" class="" title="image050.png" > <img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/fad66988870e451aa1d8a18f38f16044.png" class="" title="image052.png" > <p><strong>2、配置Git用户</strong></p><p>输入以下命令添加 Git 用户：</p><div class="highlight-container" data-rel="Ebnf"><figure class="iseeu highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">adduser git</span></span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/d06a8a2f288340248edbf04d42f4171d.png" class="" title="image055.png" > <p>修改用户权限命令：</p><div class="highlight-container" data-rel="Awk"><figure class="iseeu highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">chmod <span class="number">740</span> <span class="regexp">/etc/</span>sudoers</span><br></pre></td></tr></table></figure></div><p>打开/etc/sudoers命令：</p><div class="highlight-container" data-rel="Awk"><figure class="iseeu highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vi <span class="regexp">/etc/</span>sudoers</span><br></pre></td></tr></table></figure></div><p>在这个位置添加语句：</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git ALL=(ALL) ALL</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/3121de144827421b8868e51602cc6bcb.png" class="" title="image056.png" > <p>保存退出后，将sudoers文件权限改回原样：</p><div class="highlight-container" data-rel="Awk"><figure class="iseeu highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">chmod <span class="number">400</span> <span class="regexp">/etc/</span>sudoers</span><br></pre></td></tr></table></figure></div><p>设置 Git 用户的密码：</p><div class="highlight-container" data-rel="Ebnf"><figure class="iseeu highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">sudo passwd git</span></span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/205a99bb425f463482667db8f72d621d.png" class="" title="image058.png" > <p>切换到 git 用户，然后在~目录下创建.ssh文件夹，命令：</p><div class="highlight-container" data-rel="Jboss-cli"><figure class="iseeu highlight jboss-cli"><table><tr><td class="gutter"><pre><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">su git</span><br><span class="line"><span class="keyword">cd</span> ~</span><br><span class="line">mkdir <span class="string">.ssh</span></span><br><span class="line"><span class="keyword">cd</span> <span class="string">.ssh</span></span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/4a351860c4e54afd941cd8b33984b8af.png" class="" title="image060.png" > <p><strong>3、配置Git密钥</strong></p><p>生成公钥密钥文件命令：</p><div class="highlight-container" data-rel="Ebnf"><figure class="iseeu highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">ssh-keygen</span></span><br></pre></td></tr></table></figure></div><p>输入后都按回车即可！！！</p><p>此时在目录下就会有两个文件，分别是id_rsa和id_rsa.pub，其中id_rsa.pub就是公钥文件，复制一份：</p><div class="highlight-container" data-rel="Avrasm"><figure class="iseeu highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">cp</span> id_rsa.pub authorized_keys</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/668f5b52c959499aa03947aa0b8b094c.jpg" class="" title="image062.jpg" > <p>这样目录下就会有一个authorized_keys文件，修改它的权限：</p><div class="highlight-container" data-rel="Bash"><figure class="iseeu 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="built_in">chmod</span> 600 ~/.ssh/authorized_keys</span><br><span class="line"><span class="built_in">chmod</span> 700 ~/.ssh</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/75e7d213c50b42d2ae55e6a8e8170ca6.png" class="" title="image063.png" > <p><strong>客户端生成密钥：</strong></p><p>在本地电脑的CMD命令行工具中输入ssh-keygen -t rsa，都按回车即可！会在本地电脑的用户文件夹下生成密钥：</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/5dfc531f745c469b869a25787345be0e.png" class="" title="image065.png" > <p>接着，将本地电脑的id_rsa.pub文件的内容拷贝到云服务器的authorized_keys文件的末尾！！！！可采用的方法有：</p><p> • 直接复制内容</p><p> • 通过Xftp文件传输工具，先将本地电脑的id_rsa.pub文件传输到云服务器某位置，再在云服务器上该位置执行cat id_rsa.pub >> ~/.ssh/authorized_keys即可</p><p>然后我们在本地电脑上，打开 cmd，使用ssh方式连接云服务器，输入：</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -v git@云服务器的公网IP</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/2523983583564e0a9a0aa63559128c5f.png" class="" title="image068-打码.png" > <p>最后提示**Welcome to Alibaba Cloud Elastic Compute Service !**，说明不用输入密码也登录成功了，即配置 Git 密钥成功，以后更新博客部署的时候不用输入 Git 密码了！</p><p><strong>如果你之前配置过git，可能你会出现以下这种错误。</strong></p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/WX20230714-145426@2x.png" class="" > <p>可以看到</p><div class="highlight-container" data-rel="Awk"><figure class="iseeu highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Offending ECDSA key <span class="keyword">in</span> <span class="regexp">/c/</span>Users<span class="regexp">/jonty/</span>.ssh/known_hosts:<span class="number">2</span></span><br></pre></td></tr></table></figure></div><p>是.ssh/known_hosts 这个文件第二行出现冲突了。只要用笔记本打开，将这个文件的第二行删掉即可。</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/WX20230714-145557@2x.png" class="" > <p>重新执行刚刚的命令</p><div class="highlight-container" data-rel="Angelscript"><figure class="iseeu highlight angelscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -v <span class="symbol">git@</span>你的服务器ip</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/12-2019-11-30-16-30-12.png" class="" > <p>这说明已经连接成功了。</p><p><strong>4、创建Git仓库</strong></p><p>创建一个 Git 的仓库，并且新建一个post-receive文件</p><div class="highlight-container" data-rel="Bash"><figure class="iseeu 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"><span class="built_in">cd</span> ~</span><br><span class="line"><span class="built_in">cd</span> /home/git/</span><br><span class="line">git init --bare blog.git</span><br><span class="line"><span class="built_in">cd</span> blog.git/hooks/</span><br><span class="line">vim post-receive</span><br></pre></td></tr></table></figure></div><p>输入以下内容：</p><div class="highlight-container" data-rel="Awk"><figure class="iseeu highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git --work-tree=<span class="regexp">/home/</span>www<span class="regexp">/website --git-dir=/</span>home<span class="regexp">/git/</span>blog.git checkout -f</span><br></pre></td></tr></table></figure></div><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/06eb1c12927e4d84b9ea3b96ad14d086.png" class="" title="image072.png" > <p>保存退出并授予该文件可执行权限，命令：</p><div class="highlight-container" data-rel="Bash"><figure class="iseeu 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"><span class="built_in">chmod</span> +x post-receive</span><br><span class="line">sudo <span class="built_in">chown</span> -R git:git /home/www/website</span><br><span class="line">sudo <span class="built_in">chown</span> -R git:git /home/git/</span><br></pre></td></tr></table></figure></div><p>到此服务器端配置完成。</p><h2 id="步骤五：配置Hexo并部署发布"><a href="#步骤五：配置Hexo并部署发布" class="headerlink" title="步骤五：配置Hexo并部署发布"></a>步骤五：配置Hexo并部署发布</h2><p><strong>1、安装插件</strong></p><p>本地电脑和服务器端配置都完成后，在本地电脑的 Hexo 根目录下，输入以下命令安装插件：</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><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">npm install hexo-deployer-git --save</span><br><span class="line"></span><br><span class="line">npm install hexo-server</span><br></pre></td></tr></table></figure></div><p><strong>2、修改参数</strong></p><p>打开_config.yml文件，修改deploy项目如下：</p><div class="highlight-container" data-rel="Yaml"><figure class="iseeu 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></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"></span><br><span class="line"> <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line"></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">git@云服务器公网IP:/home/git/blog.git</span></span><br><span class="line"></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">master</span></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure></div><p>其中，type项表示部署类型为git，仓库repo地址为git@云服务器公网IP:/home/git/blog.git，分支branch为master主分支。</p><p><strong>3、远程部署</strong></p><p>对博客进行的美化、功能添加、文章拟写等完毕后，命令行输入hexo clean清除本地缓存，输入hexo g -d生成静态文件，并部署到远程仓库。</p><p>此时本地的博客页面已经部署到了服务器的/home/www/website目录下：</p><img lazyload src="/images/loading.svg" data-src="/posts/a27e2ba2/bf1357375faa40659f058c889223031b.png" class="" title="image076.png" > <p><strong>注意</strong>：</p><p>部署完成后，若打开页面没变化，可以在云服务器输入以下重启nginx即可：</p><p>nginx -s reload</p><p>到此，通过 hexo 搭建博客并部署到华为云云耀云服务器总算完成啦~ </p><p>最后在云服务器控制台解析一下域名就可以通过域名访问了.</p>]]></content>
<summary type="html"><h2 id="步骤一：本地电脑部署"><a href="#步骤一：本地电脑部署" class="headerlink" title="步骤一：本地电脑部署"></a>步骤一：本地电脑部署</h2><p><strong>1、安装nodeJS</strong></p>
<p>浏览器</summary>
<category term="hexo" scheme="http://example.com/tags/hexo/"/>
<category term="云服务器" scheme="http://example.com/tags/%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8/"/>
</entry>
<entry>
<title>IntelliJ IDEA 2022.1永久破解激活教程</title>
<link href="http://example.com/posts/75da42b1.html"/>
<id>http://example.com/posts/75da42b1.html</id>
<published>2023-07-12T08:04:00.000Z</published>
<updated>2023-07-14T10:42:06.352Z</updated>
<content type="html"><![CDATA[<h1 id="软件介绍"><a href="#软件介绍" class="headerlink" title="软件介绍"></a>软件介绍</h1><p>JetBrains 是一家专注于创建智能开发工具的前沿软件公司,包括:行业中领头的 Java IDE – IntelliJ IDEA,以及 Kotlin 编程语言。旗下常用的软件有<strong>IntelliJ IDEA、PhpStorm、RubyMine、Rider、WebStorm、goland、CLion、Pycharm，本安装包集成以上8款软件</strong>，用户可根据自己的需求选择安装一款或多款。</p><h1 id="安装步骤"><a href="#安装步骤" class="headerlink" title="安装步骤"></a>安装步骤</h1><blockquote><p><strong>温馨提示</strong>：JetBrains2022压缩包里包含JetBrains旗下8个软件（IntelliJ IDEA、PhpStorm、RubyMine、Rider、WebStorm、goland、CLion、Pycharm），您可以根据自己的需求选择安装一款或多款，8个软件的安装、激活、汉化步骤完全相同，其它产品可完全参考本步骤！</p><p>软件下载:<br> 链接:<code> https://pan.baidu.com/s/1E3wLRkdCtwTWJQ9-JoBMuQ</code><br> 提取码: <code>edvr</code></p><p>如果你已经有了2022.1的IDEA ,可以直接下载破解程序:<br> 链接: <code>https://pan.baidu.com/s/15WMzfmJvD0BkuquFtm35jw</code><br> 提取码: <code>z8t3</code></p></blockquote><h2 id="第一部分：JetBrains软件通用安装步骤"><a href="#第一部分：JetBrains软件通用安装步骤" class="headerlink" title="第一部分：JetBrains软件通用安装步骤"></a><strong>第一部分：JetBrains软件通用安装步骤</strong></h2><ol><li><p>鼠标右击【IntelliJ IDEA2022】压缩包（win11及以上系统需先点击“显示更多选项”）选择【解压到 IntelliJ IDEA2022】。</p><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/asdasldjasdsdasd.png" class="" > </li><li><p>打开解压后的文件夹，鼠标右击需要安装的软件【如：InteaIU-2022.1.3】选择【以管理员身份运行】。</p></li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/asdasd.png" class="" > <ol start="3"><li><p>点击【Next】。</p><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/innpjpo.png" class="" > </li><li><p>修改路径地址中的首字符C可更改安装位置（如：将C改为D表示安装到D盘），点击【Next】。</p><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/nnnn.png" class="" > </li><li><p>勾选所以项目，点击【Next】。</p></li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/adasdl.png" class="" > <ol start="6"><li>点击【Install】。</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/vvvv.png" class="" > <ol start="7"><li>安装中……</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/asdaksdlk.png" class="" > <ol start="8"><li>点击【Finish】。</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/lllll.png" class="" > <h2 id="第二部分：JetBrains软件通用激活步骤"><a href="#第二部分：JetBrains软件通用激活步骤" class="headerlink" title="第二部分：JetBrains软件通用激活步骤"></a><strong>第二部分：JetBrains软件通用激活步骤</strong></h2><ol start="9"><li>打开安装包解压后的【IntelliJ IDEA2023】文件夹，鼠标右击【Crack】选择【解压到当前文件夹】。</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/adasdasdsvv.png" class="" > <ol start="10"><li>双击解压出来的【安装】。</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/oooop.png" class="" > <ol start="11"><li>点击确定.</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/yyyy.png" class="" > <ol start="12"><li>点击确定.</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/hhhhhjjj.png" class="" > <ol start="13"><li><p>双击桌面【IntelliJ IDEA 2022.1.3】图标启动软件。</p></li><li><p>勾选【I confirm……】，点击【Continue】。</p></li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/ssssd.png" class="" > <ol start="15"><li>点击【Don’t Send】。</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/scscscs.png" class="" > <ol start="16"><li>选择【Activation code】（不要关闭该界面继续后面的步骤）。</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/aajskhfoai.png" class="" > <p>17.打开安装包解压后的【Carck】文件夹，将【激活码】拖到软件界面（如下图所示）。</p><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/asdasdjasdl.png" class="" > <ol start="18"><li>点击【Activate】。</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/laksdasdascc.png" class="" > <ol start="19"><li>点击【Close】（若无法点击“Close”重复步骤13-20，英文版安装成功，中文版继续后面的步骤）。</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/asdhahdoaisdsa.png" class="" > <h2 id="第三部分：JetBrains通用软件汉化步骤"><a href="#第三部分：JetBrains通用软件汉化步骤" class="headerlink" title="第三部分：JetBrains通用软件汉化步骤"></a><strong>第三部分：JetBrains通用软件汉化步骤</strong></h2><ol start="20"><li>程序员谁用汉化啊</li><li>安装成功！（禁止更新，否则软件无法运行）</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/75da42b1/asdasdh.png" class="" > ]]></content>
<summary type="html"><h1 id="软件介绍"><a href="#软件介绍" class="headerlink" title="软件介绍"></a>软件介绍</h1><p>JetBrains 是一家专注于创建智能开发工具的前沿软件公司,包括:行业中领头的 Java IDE – IntelliJ </summary>
<category term="IDEA" scheme="http://example.com/tags/IDEA/"/>
<category term="JetBrains" scheme="http://example.com/tags/JetBrains/"/>
</entry>
<entry>
<title>mysql练习</title>
<link href="http://example.com/posts/c1d94981.html"/>
<id>http://example.com/posts/c1d94981.html</id>
<published>2023-07-11T12:21:58.000Z</published>
<updated>2023-07-14T10:42:13.096Z</updated>
<content type="html"><![CDATA[<p>用于熟悉mysql的基本知识</p><h3 id="导入数据库脚本"><a href="#导入数据库脚本" class="headerlink" title="导入数据库脚本"></a>导入数据库脚本</h3><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><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></pre></td><td class="code"><pre><span class="line">/*</span><br><span class="line"> Navicat Premium Data Transfer</span><br><span class="line"></span><br><span class="line"> Source Server : ali</span><br><span class="line"> Source Server Type : MySQL</span><br><span class="line"> Source Server Version : 80026 (8.0.26)</span><br><span class="line"> Source Schema : kd</span><br><span class="line"></span><br><span class="line"> Date: 11/07/2023 20:44:05</span><br><span class="line">*/</span><br><span class="line"></span><br><span class="line">SET NAMES utf8mb4;</span><br><span class="line">SET FOREIGN_KEY_CHECKS = 0;</span><br><span class="line"></span><br><span class="line">-- ----------------------------</span><br><span class="line">-- Table structure for dept</span><br><span class="line">-- ----------------------------</span><br><span class="line">DROP TABLE IF EXISTS `dept`;</span><br><span class="line">CREATE TABLE `dept` (</span><br><span class="line"> `deptno` int NOT NULL,</span><br><span class="line"> `dname` varchar(20) NOT NULL,</span><br><span class="line"> `loc` varchar(20) DEFAULT NULL,</span><br><span class="line"> PRIMARY KEY (`deptno`),</span><br><span class="line"> UNIQUE KEY `dname` (`dname`)</span><br><span class="line">) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;</span><br><span class="line"></span><br><span class="line">-- ----------------------------</span><br><span class="line">-- Records of dept</span><br><span class="line">-- ----------------------------</span><br><span class="line">BEGIN;</span><br><span class="line">INSERT INTO `dept` (`deptno`, `dname`, `loc`) VALUES (10, 'ACCOUNTING', 'NEW YORK');</span><br><span class="line">INSERT INTO `dept` (`deptno`, `dname`, `loc`) VALUES (20, 'RESEARCH', 'shanghai');</span><br><span class="line">INSERT INTO `dept` (`deptno`, `dname`, `loc`) VALUES (30, 'SALES', 'beijing');</span><br><span class="line">INSERT INTO `dept` (`deptno`, `dname`, `loc`) VALUES (40, 'OPERATIONS', 'suzhou');</span><br><span class="line">INSERT INTO `dept` (`deptno`, `dname`, `loc`) VALUES (50, 'ADMIN', 'suzhou');</span><br><span class="line">COMMIT;</span><br><span class="line"></span><br><span class="line">-- ----------------------------</span><br><span class="line">-- Table structure for emp</span><br><span class="line">-- ----------------------------</span><br><span class="line">DROP TABLE IF EXISTS `emp`;</span><br><span class="line">CREATE TABLE `emp` (</span><br><span class="line"> `empno` int NOT NULL,</span><br><span class="line"> `ename` varchar(10) DEFAULT NULL,</span><br><span class="line"> `job` varchar(9) DEFAULT NULL,</span><br><span class="line"> `mgr` int DEFAULT NULL,</span><br><span class="line"> `hiredate` date DEFAULT NULL,</span><br><span class="line"> `salary` float DEFAULT NULL,</span><br><span class="line"> `comm` float DEFAULT NULL,</span><br><span class="line"> `deptno` int DEFAULT NULL,</span><br><span class="line"> PRIMARY KEY (`empno`),</span><br><span class="line"> KEY `fk_emp_dept` (`deptno`),</span><br><span class="line"> CONSTRAINT `fk_emp_dept` FOREIGN KEY (`deptno`) REFERENCES `dept` (`deptno`)</span><br><span class="line">) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;</span><br><span class="line"></span><br><span class="line">-- ----------------------------</span><br><span class="line">-- Records of emp</span><br><span class="line">-- ----------------------------</span><br><span class="line">BEGIN;</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7369, 'SMITH', 'CLERK', 7902, '1980-12-17', 800, NULL, 20);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7499, 'ALLEN', 'SALESMAN', 7698, '1981-02-20', 1600, 300, 30);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7521, 'WARD', 'SALESMAN', 7698, '1981-02-22', 1250, 500, 30);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7566, 'JONES', 'MANAGER', 7839, '1981-04-02', 2975, NULL, 20);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7654, 'MARTIN', 'SALESMAN', 7698, '1981-05-01', 1250, 1400, 30);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7698, 'BLAKE', 'MANAGER', 7839, '1981-06-09', 2850, NULL, 30);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7782, 'CLARK', 'MANAGER', 7839, '1987-07-01', 2450, NULL, 10);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7788, 'SCOTT', 'ANALYST', 7566, '1981-11-17', 3000, NULL, 20);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7839, 'KING', 'PRESIDENT', NULL, '1987-12-03', 5000, NULL, 10);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7844, 'TURNER', 'SALESMAN', 7698, '1981-03-12', 1500, 0, 30);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7876, 'ADAMS', 'CLERK', 7788, '1981-02-13', 1100, NULL, 20);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7900, 'JAMES', 'CLERK', 7698, '1981-12-03', 950, NULL, 30);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7902, 'FORD', 'ANALYST', 7566, '1981-09-08', 3000, NULL, 20);</span><br><span class="line">INSERT INTO `emp` (`empno`, `ename`, `job`, `mgr`, `hiredate`, `salary`, `comm`, `deptno`) VALUES (7934, 'MILLER', 'CLERK', 7782, '1981-06-02', 1300, NULL, 10);</span><br><span class="line">COMMIT;</span><br><span class="line"></span><br><span class="line">SET FOREIGN_KEY_CHECKS = 1;</span><br><span class="line"></span><br></pre></td></tr></table></figure></div><h3 id="题目"><a href="#题目" class="headerlink" title="题目"></a>题目</h3><h4 id="【0-简单查询】"><a href="#【0-简单查询】" class="headerlink" title="【0. 简单查询】"></a>【0. 简单查询】</h4><ol><li><p>查出在10部门的员工名字,工资</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">ename,</span><br><span class="line">salary </span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">WHERE</span><br><span class="line">deptno = 10;</span><br></pre></td></tr></table></figure></div></li><li><p>找出工资大于1200元的员工全名、工资、职称</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">ename,</span><br><span class="line">salary,</span><br><span class="line">job </span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">WHERE</span><br><span class="line">salary > 1200;</span><br></pre></td></tr></table></figure></div></li><li><p>查出在10，30部门的员工名,薪水</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">ename,</span><br><span class="line">salary </span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">WHERE</span><br><span class="line">deptno IN ( 10, 30 );</span><br></pre></td></tr></table></figure></div></li><li><p>找出工资大于1500并且没有提成的员工</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">ename </span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">WHERE</span><br><span class="line">salary > 1500 </span><br><span class="line">AND comm IS NULL;</span><br></pre></td></tr></table></figure></div></li><li><p>查出名字是以M打头的员工</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">ename </span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">WHERE</span><br><span class="line">SUBSTR( ename, 1, 1 ) = 'M';</span><br></pre></td></tr></table></figure></div></li><li><p>查出姓名中第三个字母是e的员工</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">ename </span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">WHERE</span><br><span class="line">SUBSTR( ename, 3, 1 ) = 'e';</span><br></pre></td></tr></table></figure></div></li><li><p>找出没有提成率的员工</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">ename </span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">WHERE</span><br><span class="line">comm IS NULL;</span><br></pre></td></tr></table></figure></div></li><li><p>找出工资在950(含)至1200(含)元的员工姓名、职称</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">ename,</span><br><span class="line">job </span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">WHERE</span><br><span class="line">salary BETWEEN 950 </span><br><span class="line">AND 1200;</span><br></pre></td></tr></table></figure></div></li><li><p>找出2月份入职的员工名、入职时间、工资</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">ename,</span><br><span class="line">hiredate,</span><br><span class="line">salary</span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">WHERE</span><br><span class="line">MONTH(hiredate) = 2;</span><br></pre></td></tr></table></figure></div></li><li><p>查询出所有员工的职位，不重复</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">DISTINCT job</span><br><span class="line">FROM</span><br><span class="line">emp ;</span><br></pre></td></tr></table></figure></div></li><li><p>查询出各个部门的员工数量</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">SELECT</span><br><span class="line">COUNT( ename ) 员工数量,</span><br><span class="line">dept.dname 部门</span><br><span class="line">FROM</span><br><span class="line">emp</span><br><span class="line">LEFT JOIN dept ON dept.deptno = emp.deptno</span><br><span class="line">GROUP BY</span><br><span class="line">dept.deptno;</span><br></pre></td></tr></table></figure></div></li><li><p>查询出各年份入职的员工情况（年份，员工人数）</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT </span><br><span class="line">YEAR( hiredate ) 年份,</span><br><span class="line">COUNT( empno ) </span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">GROUP BY 年份;</span><br></pre></td></tr></table></figure></div></li><li><p>查询出每年每月入职的员工情况（年份月份，员工人数）</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SELECT </span><br><span class="line">DATE_FORMAT(hiredate,'%Y年%m月')年份,</span><br><span class="line">COUNT( empno ) </span><br><span class="line">FROM</span><br><span class="line">emp </span><br><span class="line">GROUP BY 年份;</span><br></pre></td></tr></table></figure></div></li></ol><h4 id="【1-字符函数】"><a href="#【1-字符函数】" class="headerlink" title="【1. 字符函数】"></a>【1. 字符函数】</h4><ol><li><p>获得’goodmorning’ 的字符长度</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT CHAR_LENGTH('goodmorning');</span><br></pre></td></tr></table></figure></div></li><li><p>将Hello全部转换成小写字母</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT LOWER('Hello');</span><br></pre></td></tr></table></figure></div></li><li><p>将Hello全部转换成大写字母</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT UPPER('Hello');</span><br></pre></td></tr></table></figure></div></li><li><p>将hello首字母变为大写字母 </p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT INSERT('hello',1,1,UPPER(SUBSTR('hello',1,1)));</span><br></pre></td></tr></table></figure></div></li><li><p>将’hello’ 与 ‘tom’ ,’good’拼接成一个单词</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT CONCAT('hello','tom','good');</span><br></pre></td></tr></table></figure></div></li><li><p>获得’goodmorning’ 的第4 个字母 </p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT SUBSTR('goodmorning',4,1);</span><br></pre></td></tr></table></figure></div></li><li><p>截取’goodmorning’ 的monring 单词</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT SUBSTR('goodmorning',POSITION('morning' IN 'goodmorning'),CHAR_LENGTH('morning'));</span><br></pre></td></tr></table></figure></div></li><li><p>截取’Good morning ！I’m Tom ‘ 中的’o’ 用’A’来替代</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT REPLACE('Good morning ！I\'m Tom','o','A')</span><br></pre></td></tr></table></figure></div></li></ol><h4 id="【2-日期函数】"><a href="#【2-日期函数】" class="headerlink" title="【2. 日期函数】"></a>【2. 日期函数】</h4><ol><li><p>获得当前日期</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT NOW()</span><br></pre></td></tr></table></figure></div></li><li><p>获得某一个日期的年份，月份，日期</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT YEAR(NOW()),MONTH(NOW()), DAY(NOW());</span><br></pre></td></tr></table></figure></div></li><li><p>获得某一个日期的星期</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT DAYOFWEEK(NOW())-1;</span><br></pre></td></tr></table></figure></div></li><li><p>获得当前日期的时分秒</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT DATE_FORMAT(NOW(),'%H:%i:%s');</span><br></pre></td></tr></table></figure></div></li><li><p>获得2天后的日期</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT DATE_ADD(NOW(),interval 2 day);</span><br></pre></td></tr></table></figure></div></li><li><p>获得前2天的日期</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT DATE_SUB(NOW(),interval 2 day);</span><br></pre></td></tr></table></figure></div></li><li><p>获得两个日期相差的年份，月份，天数</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT timestampdiff(YEAR,'2000-11-28',NOW()),timestampdiff(MONTH,'2000-11-28',NOW()),timestampdiff(DAY,'2000-11-28',NOW());</span><br></pre></td></tr></table></figure></div></li></ol><h4 id="【3-数值函数】"><a href="#【3-数值函数】" class="headerlink" title="【3. 数值函数】"></a>【3. 数值函数】</h4><ol><li><p>获得38934.4383的整数部分</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT truncate(38934.4383,0)</span><br></pre></td></tr></table></figure></div></li><li><p>将38934.4387的保留2位小数，不需要四舍五入</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT truncate(38934.4383,2)</span><br></pre></td></tr></table></figure></div></li><li><p>将38934.4387的保留2位小数，需要四舍五入</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT ROUND(38934.4383,2);</span><br></pre></td></tr></table></figure></div></li><li><p>获得不小于38934.4383的最小正整数</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT ceiling(38934.4383);</span><br></pre></td></tr></table></figure></div></li><li><p>获得不大于38934.4383的最大的正整数</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT floor(38934.4383);</span><br></pre></td></tr></table></figure></div></li></ol>]]></content>
<summary type="html"><p>用于熟悉mysql的基本知识</p>
<h3 id="导入数据库脚本"><a href="#导入数据库脚本" class="headerlink" title="导入数据库脚本"></a>导入数据库脚本</h3><div class="highlight-container</summary>
<category term="mysql" scheme="http://example.com/tags/mysql/"/>
</entry>
<entry>
<title>mysql的安装和配置</title>
<link href="http://example.com/posts/14d76352.html"/>
<id>http://example.com/posts/14d76352.html</id>
<published>2023-07-11T07:51:56.000Z</published>
<updated>2023-07-14T10:42:10.180Z</updated>
<content type="html"><![CDATA[<h1 id="1-MySQL介绍"><a href="#1-MySQL介绍" class="headerlink" title="1. MySQL介绍"></a>1. MySQL介绍</h1><blockquote><ol><li>mysql属于瑞典的Mysql AB公司的,隶属于Oracle(甲骨文,主打的产品oracle数据库)旗下产品.</li><li>mysql特点 - 体积小,速度快,特别适合中小型企业,开源,免费的.分成社区版和商业版.</li><li>市面上主流的<strong>关系型数据库</strong> - mysql,oracle,sqlserver(MS-微软)</li><li>mysql软件也是采用c/c++编写的.</li></ol><img lazyload src="/images/loading.svg" data-src="/posts/14d76352/mysql.png" class="" ></blockquote><h1 id="2-专业术语"><a href="#2-专业术语" class="headerlink" title="2. 专业术语"></a>2. 专业术语</h1><blockquote><ol><li><p>DB - database 数据库 - 将数据按照一定的<em><strong>数据结构</strong></em>来进行存储,管理和组织的.</p><p>数据的仓库</p></li><li><p>DBMS - database management system - 数据库管理系统.用于操纵和控制数据库的系统.</p><p>用于建立,使用和维护我们的db. 用户通过dbms来访问db中的数据,dba通过dbms来管理和维护</p><p>我们的db. 使用dbms来保证db的安全性和完整性.</p></li><li><p>RDBMS - relational database management system关系型数据库管理系统 - 负责管理关系型数据库</p></li><li><p>关系型数据库 - 数据呈现的方式是一张二维表[行和列] - 表格型数据库</p></li><li><p>非关系型数据库[nosql] - 键值对数据库redis,文档型数据库mongodb</p></li><li><p>DBS - 数据库系统 - 类似”生态概念</p><p>DBS = DB + DBA[数据库管理员] + DBMS</p></li></ol></blockquote><h1 id="3-安装MySQL"><a href="#3-安装MySQL" class="headerlink" title="3. 安装MySQL"></a>3. 安装MySQL</h1><blockquote><ol><li><p>访问MySQL官网下载: <a class="link" href="https://dev.mysql.com/downloads/mysql/" >https://dev.mysql.com/downloads/mysql/ <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p></li><li><blockquote><p>下载压缩包,并解压在一个 非C盘、非中文、非特殊符号的路径下,例如:</p><div class="highlight-container" data-rel="Apache"><figure class="iseeu highlight apache"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">D</span>:\\soft\\mysql-<span class="number">8</span>.<span class="number">0</span>.<span class="number">30</span>-winx64</span><br></pre></td></tr></table></figure></div></blockquote></li><li><p><strong>进行一个环境变量的配置</strong></p><blockquote><ol><li><p>右击计算机 - 属性 - 高级系统设置 - 环境变量 - 系统变量</p></li><li><p>定位到默认的自带的内置的变量名Path - 编辑 - 新建</p><p>然后将mysql的bin目录的绝对地址拷贝进去即可.</p></li><li><p><strong>以后只要环境变量进行了设置 - 应用 - 确定 - 关闭所有的设置窗口</strong></p><p><strong>一定要重启cmd窗口</strong></p></li><li><p>重新打开cmd - 输入mysql看是否生效</p></li></ol></blockquote></li><li><p>在mysql-8.0.30-winx64下新建一个文件,必须是my.ini</p></li><li><p>my.ini文件中的配置如下</p><p><code>唯一需要修改的只有basedir,把它修改成自己的mysql-8.0.32-winx64的绝对地址</code></p><div class="highlight-container" data-rel="Ini"><figure class="iseeu highlight ini"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">[client]</span></span><br><span class="line"><span class="comment"># 设置mysql客户端默认字符集</span></span><br><span class="line"><span class="attr">default-character-set</span>=utf8</span><br><span class="line"> </span><br><span class="line"><span class="section">[mysqld]</span></span><br><span class="line"><span class="comment"># 设置3306端口</span></span><br><span class="line"><span class="attr">port</span> = <span class="number">3306</span></span><br><span class="line"><span class="comment"># 设置mysql的安装目录</span></span><br><span class="line"><span class="attr">basedir</span>=D:\\soft\\mysql-<span class="number">8.0</span>.<span class="number">32</span>-winx64</span><br><span class="line"><span class="comment"># 设置 mysql数据库的数据的存放目录，MySQL 8+ 不需要以下配置，系统自己生成即可，否则有可能报错</span></span><br><span class="line"><span class="comment"># datadir=C:\\web\\sqldata</span></span><br><span class="line"><span class="comment"># 允许最大连接数</span></span><br><span class="line"><span class="attr">max_connections</span>=<span class="number">20</span></span><br><span class="line"><span class="comment"># 服务端使用的字符集默认为8比特编码的latin1字符集</span></span><br><span class="line"><span class="attr">character-set-server</span>=utf8</span><br><span class="line"><span class="comment"># 创建新表时将使用的默认存储引擎</span></span><br><span class="line"><span class="attr">default-storage-engine</span>=INNODB</span><br></pre></td></tr></table></figure></div></li><li><p>用<strong>管理员的身份</strong>打开cmd</p></li><li><p>从cmd利用dos命令进入到mysql-8.0.30-winx64\bin目录</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">C:\<span class="title">WINDOWS</span>\><span class="title">d</span>:</span></span><br></pre></td></tr></table></figure></div><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">D:\><span class="title">cd</span> <span class="title">soft</span></span></span><br><span class="line"><span class="function"><span class="title">D</span>:\<span class="title">soft</span>><span class="title">cd</span> <span class="title">mysql</span>-8.0.30-<span class="title">winx64</span></span></span><br><span class="line"><span class="function"><span class="title">D</span>:\<span class="title">soft</span>\<span class="title">mysql</span>-8.0.30-<span class="title">winx64</span>><span class="title">cd</span> <span class="title">bin</span></span></span><br><span class="line"><span class="function"><span class="title">D</span>:\<span class="title">soft</span>\<span class="title">mysql</span>-8.0.30-<span class="title">winx64</span>\<span class="title">bin</span>></span></span><br></pre></td></tr></table></figure></div></li><li><p>初始化DB</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">D:\<span class="title">soft</span>\<span class="title">mysql</span>-8.0.30-<span class="title">winx64</span>\<span class="title">bin</span>> <span class="title">mysqld</span> --<span class="title">initialize</span> --<span class="title">console</span></span></span><br></pre></td></tr></table></figure></div><ol><li><strong>分配一个默认的密码</strong></li><li><strong>mysql-8.0.32-winx64是否自动生成了data目录</strong></li></ol></li><li><p>安装</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">D:\<span class="title">soft</span>\<span class="title">mysql</span>-8.0.30-<span class="title">winx64</span>\<span class="title">bin</span>> <span class="title">mysqld</span> <span class="title">install</span></span></span><br></pre></td></tr></table></figure></div><p><code>检测一下mysql的服务是否安装成功</code> - 右击计算机 - 管理 - 服务 - 服务和应用程序 - 右边的窗口 - MYSQL</p><p>只有mysql服务处于正在执行的状态,那么mysql才能够正常使用,建议右击MYSQL属性 - 设置成开机自动启动.</p></li><li><p>启动mysql</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">D:\<span class="title">soft</span>\<span class="title">mysql</span>-8.0.30-<span class="title">winx64</span>\<span class="title">bin</span>> <span class="title">net</span> <span class="title">start</span> <span class="title">mysql</span></span></span><br></pre></td></tr></table></figure></div><p><code>mysql服务的运行状态 - 正在运行中</code></p></li><li><p>重新开一个cmd窗口</p><p>登陆mysql</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">D:\<span class="title">soft</span>\<span class="title">mysql</span>-8.0.30-<span class="title">winx64</span>\<span class="title">bin</span>> <span class="title">mysql</span> -<span class="title">uroot</span> -<span class="title">p</span>临时密码</span></span><br></pre></td></tr></table></figure></div><p>如果登陆失败:</p><ol><li><p>关闭mysql服务 </p><p>重新以<strong>管理员身份</strong>打开cmd</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">C:\<span class="title">User</span>\<span class="title">admin</span>><span class="title">net</span> <span class="title">stop</span> <span class="title">mysql</span></span></span><br></pre></td></tr></table></figure></div></li><li><p>删除data目录</p></li><li><p>重第八步重新开始</p></li></ol></li><li><p>直接修改密码即可</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alter user 'root'@'localhost' identified by 'root';</span><br></pre></td></tr></table></figure></div></li><li><p>退出mysql登录</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql><span class="keyword">exit</span></span><br></pre></td></tr></table></figure></div></li><li><p>重新登录即可</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql -uroot -proot</span><br></pre></td></tr></table></figure></div></li></ol></blockquote><h1 id="4-SQL分类"><a href="#4-SQL分类" class="headerlink" title="4. SQL分类"></a>4. SQL分类</h1><blockquote><p>它同时也是我们的脚本文件的后缀.</p></blockquote><blockquote><p>structured query language结构化查询语言…</p><p>按照功能来划分</p><ol><li>DDL - Data Definition Language - 数据定义语言</li></ol><p>create,drop,alter等等…</p><ol><li><p>DCL - Data Control Language - 数据控制语言</p><p>grant(授权),revoke(取消权限)等等…</p></li><li><p>DQL - Data Query Languge - 数据查询语言</p><p><strong>select - 查询</strong></p></li><li><p>DML - Data Manipution Language - 数据操纵语言</p><p><strong>insert,delete,update</strong></p></li><li><p>TCL - Transaction Control Languge - 事务控制语言</p><p>commit,rollback,savepoint等等…</p></li></ol></blockquote>]]></content>
<summary type="html"><h1 id="1-MySQL介绍"><a href="#1-MySQL介绍" class="headerlink" title="1. MySQL介绍"></a>1. MySQL介绍</h1><blockquote>
<ol>
<li>mysql属于瑞典的Mysql AB公司的</summary>
<category term="mysql" scheme="http://example.com/tags/mysql/"/>
</entry>
<entry>
<title>Hello World</title>
<link href="http://example.com/posts/4a17b156.html"/>
<id>http://example.com/posts/4a17b156.html</id>
<published>2023-07-10T00:44:42.000Z</published>
<updated>2023-07-14T10:42:19.015Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a class="link" href="https://hexo.io/" >Hexo <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>! This is your very first post. Check <a class="link" href="https://hexo.io/docs/" >documentation <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a> for more info. If you get any problems when using Hexo, you can find the answer in <a class="link" href="https://hexo.io/docs/troubleshooting.html" >troubleshooting <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a> or you can ask me on <a class="link" href="https://github.com/hexojs/hexo/issues" >GitHub <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure></div><p>More info: <a class="link" href="https://hexo.io/docs/writing.html" >Writing <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure></div><p>More info: <a class="link" href="https://hexo.io/docs/server.html" >Server <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure></div><p>More info: <a class="link" href="https://hexo.io/docs/generating.html" >Generating <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure></div><p>More info: <a class="link" href="https://hexo.io/docs/one-command-deployment.html" >Deployment <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>]]></content>
<summary type="html"><p>Welcome to <a class="link" href="https://hexo.io/" >Hexo <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>! This is yo</summary>
<category term="Hexo" scheme="http://example.com/tags/Hexo/"/>
</entry>
<entry>
<title>Hello Hexo+GIthub搭建博客服务器</title>
<link href="http://example.com/posts/50238e86.html"/>
<id>http://example.com/posts/50238e86.html</id>
<published>2023-07-09T00:44:42.000Z</published>
<updated>2023-07-14T10:42:15.693Z</updated>
<content type="html"><![CDATA[<h1 id="hexo-github搭建博客服务器"><a href="#hexo-github搭建博客服务器" class="headerlink" title="hexo+github搭建博客服务器"></a>hexo+github搭建博客服务器</h1><blockquote><ol><li>csdn,简书,有道笔记 - <strong>广告比较多</strong></li><li>hexo+github[比较慢,魔法]/gitee[Git pages服务器 - 维护]/<strong>阿里云服务器</strong></li></ol></blockquote><h1 id="安装nodejs"><a href="#安装nodejs" class="headerlink" title="安装nodejs"></a>安装nodejs</h1><blockquote><ol><li>非中文的非特殊字符的目录中[目录中不要出现空格或者带有特殊符号的]</li><li>D:/node-v14.17.3-win-x64</li></ol></blockquote><h2 id="环境变量的配置"><a href="#环境变量的配置" class="headerlink" title="环境变量的配置"></a>环境变量的配置</h2><blockquote><ol><li><p>桌面计算机 - 右击 - 属性 - 高级系统设置 - 环境变量(N)</p></li><li><p>定位到下方的系统变量</p></li><li><p>定位到变量名 - Path - 编辑 - 新建</p></li><li><p>D:/node-v14.17.3-win-x64</p></li><li><p>一定要关闭所有的环境变量配置的窗口 - 确定</p></li><li><p>打开终端[如果终端已经打开了,关闭 - 重新打开]</p><p>win[微软图标]+r - 输入cmd - 输入如下指令检测nodejs是否配置成功</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><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">npm -v</span><br><span class="line"><span class="number">6</span>.<span class="number">14</span>.<span class="number">5</span> 出现版本号,则说明配置成功</span><br><span class="line"> </span><br><span class="line">如果出现了不是内部或者外部的命令的同学,请检查自己的nodejs解压缩之后的路径是否</span><br><span class="line">成功配置到了<span class="built_in">path</span>中</span><br></pre></td></tr></table></figure></div></li></ol></blockquote><h2 id="简单认识npm"><a href="#简单认识npm" class="headerlink" title="简单认识npm"></a>简单认识npm</h2><blockquote><p>npm是javascript的一个**包[前端框架]**管理工具,并且是nodejs平台默认的包管理工具.</p><p>通过npm可以安装,共享,分发代码,管理项目依赖关系.</p><p>类似于java中的maven或者gradle[强大的项目构建工具以及项目依赖管理工具]</p></blockquote><h2 id="npm简单使用"><a href="#npm简单使用" class="headerlink" title="npm简单使用"></a>npm简单使用</h2><h3 id="修改镜像"><a href="#修改镜像" class="headerlink" title="修改镜像"></a>修改镜像</h3><blockquote><p>为了下载速度变快,修改npm的镜像</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config <span class="built_in">set</span> registry https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure></div><p>验证一下,镜像是否成功修改了</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><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">npm config get registry</span><br><span class="line"><span class="function"></span></span><br><span class="line"><span class="function">https://<span class="title">registry.npm.taobao.org</span>/</span></span><br></pre></td></tr></table></figure></div></blockquote><h2 id="简单使用-不需要操作"><a href="#简单使用-不需要操作" class="headerlink" title="简单使用 - 不需要操作"></a>简单使用 - 不需要操作</h2><blockquote><ol><li><p>下载bootstrap</p><p>npm install 框架名称 - 默认下载的是最新的版本</p><div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install bootstrap@<span class="number">3</span></span><br></pre></td></tr></table></figure></div></li></ol></blockquote><h1 id="Hexo官网"><a href="#Hexo官网" class="headerlink" title="Hexo官网"></a>Hexo官网</h1><blockquote><p><a class="link" href="https://hexo.io/zh-cn/docs/" >https://hexo.io/zh-cn/docs/ <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p></blockquote><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><blockquote><ol><li><p>假设你在D盘根目录下新建了一个文件夹hello-hexo[博客项目的根目录]</p></li><li><p>win+r - 打开终端</p></li><li><p>通过dos命令进入到hello-hexo目录中</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">C:/<span class="title">User</span>/<span class="title">admin</span>><span class="title">d</span>:</span></span><br><span class="line"><span class="function"><span class="title">D</span>:><span class="title">cd</span> <span class="title">hello</span>-<span class="title">hexo</span></span></span><br><span class="line"><span class="function"><span class="title">D</span>:/<span class="title">hello</span>-<span class="title">hexo</span>><span class="title">npm</span> <span class="title">install</span> <span class="title">hexo</span>-<span class="title">cli</span> -<span class="title">g</span></span></span><br></pre></td></tr></table></figure></div></li></ol></blockquote><h2 id="创建真正的博客目录"><a href="#创建真正的博客目录" class="headerlink" title="创建真正的博客目录"></a>创建真正的博客目录</h2><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">D:/<span class="title">hello</span>-<span class="title">hexo</span>><span class="title">hexo</span> <span class="title">init</span> <span class="title">hello</span>-<span class="title">blog</span></span></span><br></pre></td></tr></table></figure></div><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> hello-blog</span><br><span class="line"><span class="function">D:/<span class="title">hello</span>-<span class="title">hexo</span>/<span class="title">hello</span>-<span class="title">blog</span>><span class="title">npm</span> <span class="title">install</span></span></span><br></pre></td></tr></table></figure></div><h2 id="测试-启动博客服务器"><a href="#测试-启动博客服务器" class="headerlink" title="测试 - 启动博客服务器"></a>测试 - 启动博客服务器</h2><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">D:/<span class="title">hello</span>-<span class="title">hexo</span>/<span class="title">hello</span>-<span class="title">blog</span>><span class="title">hexo</span> <span class="title">s</span></span></span><br></pre></td></tr></table></figure></div><p><code>关闭服务器</code></p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ctrl+c</span><br></pre></td></tr></table></figure></div><p><em><strong>打开浏览器输入:localhost:4000</strong></em></p><h2 id="常用主题模板"><a href="#常用主题模板" class="headerlink" title="常用主题模板"></a>常用主题模板</h2><blockquote><p><a class="link" href="https://blog.csdn.net/zgd826237710/article/details/99671027" >https://blog.csdn.net/zgd826237710/article/details/99671027 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p><p>使用git命令来进行克隆,需要提前安装好git,检测git是否安装成功,<strong>重新打开终端</strong></p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git --version</span><br></pre></td></tr></table></figure></div></blockquote><h2 id="注册码云账号"><a href="#注册码云账号" class="headerlink" title="注册码云账号"></a>注册码云账号</h2><blockquote><p>推荐用QQ注册一下</p><p>本地配置码云账号信息 - 配置文件 - 位置windows的用户主目录下</p><p>C:/User/计算机用户名 - 观察是否存在**.gitconfig**文件,添加如下内容</p><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">[user]</span><br><span class="line">email = 码云的QQ邮箱</span><br><span class="line">name = 用户名</span><br></pre></td></tr></table></figure></div></blockquote><h2 id="安装模板"><a href="#安装模板" class="headerlink" title="安装模板"></a>安装模板</h2><blockquote><p>通过cmd进入到hello-blog目录中的themes目录中</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><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="function">D:/<span class="title">hello</span>-<span class="title">hexo</span>/<span class="title">hello</span>-<span class="title">blog</span>><span class="title">cd</span> <span class="title">themes</span></span></span><br><span class="line"><span class="function"><span class="title">D</span>://<span class="title">hello</span>-<span class="title">hexo</span>/<span class="title">hello</span>-<span class="title">blog</span>/<span class="title">themes</span>><span class="title">git</span> <span class="title">clone</span> <span class="title">https</span>://<span class="title">gitee.com</span>/<span class="title">guancg</span>/<span class="title">hexo</span>-<span class="title">theme</span>-<span class="title">pure.git</span></span></span><br></pre></td></tr></table></figure></div></blockquote><p>或者直接从github上直接clone</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure></div><p>以下是一些可供选择的主题</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">hexo-theme-bamboo</span><br><span class="line">hexo-theme-zhaoo</span><br><span class="line">hexo-theme-keep</span><br><span class="line">hexo-theme-matery</span><br><span class="line">hexo-theme-stun</span><br><span class="line">hexo-theme-apolloZ</span><br><span class="line">hexo-theme-raytaylorism</span><br><span class="line">hexo-theme-spfk</span><br><span class="line">hexo-theme-ochuunn</span><br><span class="line">cactus-dark</span><br><span class="line">cactus-white-cn</span><br><span class="line">hexo-theme-yilia</span><br><span class="line">hexo-theme-even</span><br><span class="line">hexo-theme-random</span><br><span class="line">hexo-theme-volantis</span><br><span class="line">hexo-theme-Cards</span><br><span class="line">Hexo-Theme-Life</span><br><span class="line">hexo-theme-Anisina</span><br><span class="line">hexo-theme-pure</span><br><span class="line">hexo-theme-typing</span><br><span class="line">hexo-theme-pln</span><br><span class="line">hexo-theme-landscape</span><br><span class="line">fexo</span><br><span class="line">hexo-theme-indigo</span><br><span class="line">hexo-theme-Anatole</span><br><span class="line">maupassant-hexo</span><br><span class="line">hexo-theme-mdui</span><br><span class="line">hexo-theme-next</span><br><span class="line">hexo-theme-material</span><br><span class="line">hexo-theme-hueman</span><br><span class="line">hexo-theme-magnetic</span><br><span class="line">hexo-theme-snippet</span><br><span class="line">hexo-theme-casper</span><br><span class="line">hexo-theme-adagio</span><br><span class="line">hexo-theme-fluid</span><br><span class="line">hexo-theme-freemind.bithack</span><br><span class="line">hexo-theme-yun</span><br><span class="line">hexo-theme-arknights</span><br><span class="line">Kratos-Rebirth</span><br><span class="line">hexo-theme-melody</span><br><span class="line">Hexo-Theme-MengD</span><br></pre></td></tr></table></figure></div><h1 id="更新主题配置"><a href="#更新主题配置" class="headerlink" title="更新主题配置"></a>更新主题配置</h1><blockquote><ol><li><p>指定新的主题</p><p>hello-blog目录下的_config.yml文件</p><div class="highlight-container" data-rel="Yml"><figure class="iseeu highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">theme:</span> <span class="string">hexo-theme-pure</span></span><br></pre></td></tr></table></figure></div></li></ol></blockquote><blockquote><ol start="2"><li>重启服务器hexo s</li></ol></blockquote><h1 id="个人信息"><a href="#个人信息" class="headerlink" title="个人信息"></a>个人信息</h1><p>hexo-theme-pure/_config.yml文件</p><div class="highlight-container" data-rel="Yml"><figure class="iseeu 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></pre></td><td class="code"><pre><span class="line"><span class="string">overriden</span></span><br><span class="line"> <span class="attr">author:</span> <span class="string">亲爱的管管</span></span><br><span class="line"> <span class="attr">author_title:</span> <span class="string">高级打字员</span></span><br><span class="line"> <span class="attr">author_description:</span> <span class="string">个人简介。</span></span><br><span class="line"> <span class="attr">location:</span> <span class="string">SuZhou,</span> <span class="string">China</span></span><br></pre></td></tr></table></figure></div><h1 id="Markdown语法"><a href="#Markdown语法" class="headerlink" title="Markdown语法"></a>Markdown语法</h1><blockquote><p>语法的编辑器 - <a class="link" href="https://typora.io/" >https://typora.io/ <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p><p>文件的后缀是md</p><div class="highlight-container" data-rel="Txt"><figure class="iseeu highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">常用语法如下:</span><br><span class="line"></span><br><span class="line">1. 标题的语法:</span><br><span class="line">1~6标题 - # 一级标题 ## 二级标题 </span><br><span class="line"></span><br><span class="line">2. 代码块 - java,js,mysql...</span><br><span class="line"></span><br><span class="line">~~~java 敲enter键</span><br><span class="line"></span><br><span class="line">3. 列表</span><br><span class="line">3-1. 无序列表</span><br><span class="line"> * 列表名称</span><br><span class="line"> </span><br><span class="line"> 有序列表</span><br><span class="line"> 1. 列表名称</span><br><span class="line"> </span><br><span class="line">4. 高亮显示</span><br><span class="line"> `高亮显示内容`</span><br><span class="line"> </span><br><span class="line">5. 加粗字体</span><br><span class="line"> **粗体**</span><br><span class="line"> </span><br><span class="line">6. 斜体</span><br><span class="line"> *斜体*</span><br><span class="line"> </span><br><span class="line">7. 粗+斜</span><br><span class="line"> ***粗斜***</span><br><span class="line"> </span><br><span class="line">8. 段落</span><br><span class="line"> > 空格</span><br><span class="line"> </span><br><span class="line">9. 引入外部图片</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">10. 表格</span><br></pre></td></tr></table></figure></div></blockquote><h1 id="新建博文"><a href="#新建博文" class="headerlink" title="新建博文"></a>新建博文</h1><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">D://<span class="title">hello</span>-<span class="title">hexo</span>/<span class="title">hello</span>-<span class="title">blog</span>><span class="title">hexo</span> <span class="title">n</span> <span class="title">java</span></span></span><br></pre></td></tr></table></figure></div><p>效果:hello-blog目录下的source/_ports/自动生成一个java.md文件</p><p>重启blog服务器</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">D://<span class="title">hello</span>-<span class="title">hexo</span>/<span class="title">hello</span>-<span class="title">blog</span>><span class="title">hexo</span> <span class="title">s</span></span></span><br></pre></td></tr></table></figure></div><h1 id="主题的侧边栏"><a href="#主题的侧边栏" class="headerlink" title="主题的侧边栏"></a>主题的侧边栏</h1><blockquote><p>侧边栏的链接生效</p><p>将/hello-blog/themes/hexo-theme-pure/_source/下的除了_data文件夹,其余文件夹</p><p>拷贝一份放入到hello-blog目录下的source目录中即可</p></blockquote><h1 id="文章的分类和标签"><a href="#文章的分类和标签" class="headerlink" title="文章的分类和标签"></a>文章的分类和标签</h1><blockquote><p>只需要在文章的.md文件的自动生成的头部添加</p><div class="highlight-container" data-rel="Txt"><figure class="iseeu highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><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">title: java</span><br><span class="line">date: 2021-07-13 08:44:42</span><br><span class="line">categories: java</span><br><span class="line">tags: </span><br><span class="line">- java</span><br></pre></td></tr></table></figure></div></blockquote><h1 id="博客的语言环境设置"><a href="#博客的语言环境设置" class="headerlink" title="博客的语言环境设置"></a>博客的语言环境设置</h1><blockquote><p>设置中文</p><p>hello-blog下的_config.yml文件中</p><p>language: zh-CN</p></blockquote><h1 id="图片显示问题"><a href="#图片显示问题" class="headerlink" title="图片显示问题"></a>图片显示问题</h1><blockquote><ol><li><p>安装插件 -</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-asset-img --save</span><br></pre></td></tr></table></figure></div></li><li><p>需要到hello-blog/_config.yml文件中进行配置</p></li></ol><div class="highlight-container" data-rel="Yml"><figure class="iseeu 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></pre></td><td class="code"><pre><span class="line"><span class="comment">#修改post_asset_folder</span></span><br><span class="line"><span class="attr">post_asset_folder:</span> <span class="literal">true</span></span><br><span class="line"><span class="comment">#添加或者重新以下内容</span></span><br><span class="line"><span class="attr">marked:</span></span><br><span class="line"> <span class="attr">prependRoot:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">postAsset:</span> <span class="literal">true</span></span><br><span class="line"></span><br></pre></td></tr></table></figure></div></blockquote><blockquote><ol start="3"><li>hexo n mysql</li></ol><p><code>效果就是除了生成了mysql.md还有一个mysql文件夹,那么这篇文章的所有的图片就可以存储在mysql文件夹中</code></p><p>想要Typora和博客上均能显示图片,必须以以下格式: 两个都试试</p><div class="highlight-container" data-rel="Markdown"><figure class="iseeu highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">#macOS</span></span><br><span class="line">![](<span class="link">mysql/mysql.png</span>)</span><br><span class="line"><span class="code"> </span></span><br><span class="line"><span class="code">#win</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="code"></span></span><br><span class="line">Bug: 图片设置缩放后,插件失效.</span><br><span class="line"></span><br><span class="line">原因:md文件中的图片 变成了<span class="language-xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"mysql/mysql.peng"</span> <span class="attr">....</span>/></span></span></span><br><span class="line"></span><br><span class="line"><span class="bullet">4.</span> hexo s</span><br></pre></td></tr></table></figure></div></blockquote><h1 id="内置搜索的功能"><a href="#内置搜索的功能" class="headerlink" title="内置搜索的功能"></a>内置搜索的功能</h1><blockquote><div class="highlight-container" data-rel="Yml"><figure class="iseeu 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><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#主题配置文件中</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">#站点配置文件中</span></span><br><span class="line"><span class="attr">search:</span></span><br><span class="line"><span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line"><span class="attr">field:</span> <span class="string">post</span></span><br><span class="line"><span class="attr">format:</span> <span class="string">html</span></span><br><span class="line"><span class="attr">limit:</span> <span class="number">10000</span></span><br><span class="line"></span><br></pre></td></tr></table></figure></div><p>安装内置搜索插件</p><p>npm install hexo-generator-searchdb –save</p></blockquote><h1 id="评论"><a href="#评论" class="headerlink" title="评论"></a>评论</h1><blockquote><p>不需要本地数据库进行存储的,用的是第三方的.</p><p>LeanCloud - 官网地址 - <a class="link" href="https://www.leancloud.cn/" >https://www.leancloud.cn/ <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p><p>需要选择国际版</p><p>注册 - 登录 - 控制台 - 创建应用 - 右下设置 - 应用凭证</p><p>appId - sljUq97vUAdLAo7XQdf13aFR-gzGzoHsz</p><p>appKey - 3hn4ijEgSzJeRV4nkmXThmGV</p></blockquote><p><code>在hexo-theme-pure\_config.yml文件中配置</code></p><blockquote><div class="highlight-container" data-rel="Yml"><figure class="iseeu 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><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">valine:</span> <span class="comment"># Valine. https://valine.js.org</span></span><br><span class="line"> <span class="attr">appid:</span> <span class="string">sljUq97vUAdLAo7XQdf13aFR-gzGzoHsz</span> <span class="comment"># your leancloud application appid</span></span><br><span class="line"> <span class="attr">appkey:</span> <span class="string">3hn4ijEgSzJeRV4nkmXThmGV#</span> <span class="string">your</span> <span class="string">leancloud</span> <span class="string">application</span> <span class="string">appkey</span></span><br><span class="line"> <span class="attr">notify:</span> <span class="literal">false</span> <span class="comment"># mail notifier , https://github.com/xCss/Valine/wiki</span></span><br><span class="line"> <span class="attr">verify:</span> <span class="literal">false</span> <span class="comment"># Verification code</span></span><br><span class="line"> <span class="attr">placeholder:</span> <span class="string">Just</span> <span class="string">go</span> <span class="string">go</span> <span class="comment"># comment box placeholder</span></span><br><span class="line"> <span class="attr">avatar:</span> <span class="string">mm</span> <span class="comment"># gravatar style</span></span><br><span class="line"> <span class="attr">meta:</span> <span class="string">nick,mail,link</span> <span class="comment"># custom comment header</span></span><br><span class="line"> <span class="attr">pageSize:</span> <span class="number">10</span> <span class="comment"># pagination size</span></span><br><span class="line"> <span class="attr">visitor:</span> <span class="literal">true</span> <span class="comment"># Article reading statistic https://valine.js.org/visitor.html</span></span><br><span class="line"> <span class="attr">serverURLs:</span> <span class="string">https://appID前八位.api.lncldglobal.com</span></span><br></pre></td></tr></table></figure></div></blockquote><p>#字数统计&阅读时长</p><blockquote><ol><li><p>npm i -S hexo-wordcount</p></li><li><p>hexo-theme-pure_config.yml文件中配置</p><div class="highlight-container" data-rel="Yml"><figure class="iseeu 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></pre></td><td class="code"><pre><span class="line"><span class="attr">postCount:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">wordcount:</span> <span class="literal">true</span> <span class="comment"># 文章字数统计</span></span><br><span class="line"> <span class="attr">min2read:</span> <span class="literal">true</span> <span class="comment"># 阅读时长预计 </span></span><br></pre></td></tr></table></figure></div></li></ol></blockquote><p>也可以使用 busuanzi,具体自己csdn</p><h1 id="附件-优秀插件"><a href="#附件-优秀插件" class="headerlink" title="附件-优秀插件"></a>附件-优秀插件</h1><blockquote><ol><li><p>显示图片</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-asset-img --save</span><br></pre></td></tr></table></figure></div></li><li><p>内置搜索</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-searchdb --save</span><br></pre></td></tr></table></figure></div></li><li><p>字数统计&阅读时长</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><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">npm i -S hexo-wordcount</span><br><span class="line"> </span><br></pre></td></tr></table></figure></div></li></ol></blockquote><blockquote><ol start="4"><li><p>github部署</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure></div></li></ol></blockquote><h1 id="配置host访问github"><a href="#配置host访问github" class="headerlink" title="配置host访问github"></a>配置host访问github</h1><blockquote><ol><li><p>按照路径<strong>C:/Windows/System32/etc/HOSTS</strong>，找到<a class="link" href="https://so.csdn.net/so/search?q=HOSTS%E6%96%87%E4%BB%B6&spm=1001.2101.3001.7020" >HOSTS文件 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>（System32可能会直接看不到etc文件夹，可以在右上角搜索etc文件夹再双击打开</p></li><li><p>站长工具: <a class="link" href="https://ping.chinaz.com/github.com" >https://ping.chinaz.com/github.com <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a> ping一下github </p><p>选择一个延迟低的站点: 例如 <a class="link" href="https://ip.tool.chinaz.com/20.248.137.48" >20.248.137.48 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p><p>a .在终端中 执行</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><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">ping</span> <span class="number">20</span>.<span class="number">248</span>.<span class="number">137</span>.<span class="number">48</span></span><br></pre></td></tr></table></figure></div><p>b.如果能够ping 通就在host文件中添加</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">20</span>.<span class="number">248</span>.<span class="number">137</span>.<span class="number">48</span> github.com</span><br></pre></td></tr></table></figure></div><p>c.释放ip</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><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">ipconfig</span>/release</span><br></pre></td></tr></table></figure></div><p>d. 尝试ping github.com</p><div class="highlight-container" data-rel="Autoit"><figure class="iseeu highlight autoit"><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">ping</span> github.com</span><br></pre></td></tr></table></figure></div><p>a步骤超时的话换一个节点继续重复abcd.</p><p>至此就可以访问github,如果有魔法就不用这么弄了.</p></li></ol></blockquote><h1 id="部署github"><a href="#部署github" class="headerlink" title="部署github"></a>部署github</h1><blockquote><p> 首先要安装了git,并且注册了Github.</p></blockquote><blockquote><p>在本地终端执行</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><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">git config --global user.name "github用户名" </span><br><span class="line"></span><br><span class="line">git config --global user.email "github邮箱"</span><br></pre></td></tr></table></figure></div></blockquote><blockquote><p>新建的仓库</p><p>名称必须是<strong>Github用户名.github.io</strong></p><p>需要添加README.md</p></blockquote><blockquote><p>安装github部署插件</p><p>在hexo-log目录下执行以下命令</p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure></div></blockquote><blockquote><p>获取一个“Tokens”</p><p>在Github找的 <code>Settings</code> –> 左边栏最下方<code>Developer settings</code> —> 左边栏<code>Personal access tokens</code> 中选择<code>Tokens(classic)</code> </p><p>新建一个token: 选择<code>Generate new token </code> 选择第二个 </p></blockquote><blockquote><p>note 任意填写, 勾选<code>repo</code> 然后直接创建</p><p>完成后复制创建出来的<code>key</code></p></blockquote><blockquote><p>hello-blog/_config.yml文件</p><div class="highlight-container" data-rel="Yml"><figure class="iseeu 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></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">https://key@github.com/Github用户名/Github用户名.github.io.git</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">mian</span></span><br></pre></td></tr></table></figure></div></blockquote><p><code>hexo三连操作</code></p><div class="highlight-container" data-rel="Cmd"><figure class="iseeu highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo cl && hexo g && hexo d</span><br></pre></td></tr></table></figure></div><p>浏览器输入 - Github用户名.github.io</p>]]></content>
<summary type="html"><h1 id="hexo-github搭建博客服务器"><a href="#hexo-github搭建博客服务器" class="headerlink" title="hexo+github搭建博客服务器"></a>hexo+github搭建博客服务器</h1><blockquo</summary>
<category term="Hexo" scheme="http://example.com/tags/Hexo/"/>
<category term="Github" scheme="http://example.com/tags/Github/"/>
<category term="Git" scheme="http://example.com/tags/Git/"/>
</entry>
</feed>