-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
224 lines (119 loc) · 67 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Sanasan</title>
<link href="/atom.xml" rel="self"/>
<link href="http://sanasan.top/"/>
<updated>2020-03-13T09:38:52.118Z</updated>
<id>http://sanasan.top/</id>
<author>
<name>Zhang Yongfei</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>关于vue的双向数据绑定的简单理解和$nexttick 关于dom更新的一些理解</title>
<link href="http://sanasan.top/2020/03/13/%E5%85%B3%E4%BA%8Evue%E7%9A%84%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%92%8C$nexttick%20%E5%85%B3%E4%BA%8Edom%E6%9B%B4%E6%96%B0%E7%9A%84%E4%B8%80%E4%BA%9B%E6%80%9D%E8%80%83/"/>
<id>http://sanasan.top/2020/03/13/关于vue的双向数据绑定和$nexttick 关于dom更新的一些思考/</id>
<published>2020-03-13T04:45:54.293Z</published>
<updated>2020-03-13T09:38:52.118Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="vue的双向数据绑定"><a href="#vue的双向数据绑定" class="headerlink" title="vue的双向数据绑定"></a>vue的双向数据绑定</h1><p><strong>vue采用的方式属于数据劫持+发布订阅模式：</strong><br>通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。<br>所以实现这个过程大概需要一下以下几点:</p><pre><code>1 创建一个数据监听器 监听数据对象包含的所有属性 如果有数据变动，那就去通知订阅者2 实现一个指令解析器 对每个元素节点的指令进行扫描，根据指令替换数据(相互对应)，以及绑定相应的更新函数3 实现一个数据监听器和指令解析器之间的桥梁，让解析器收到监听器的数据变动的通知，然后去更新视图</code></pre><img src="http://sanasan.top/images/mvvm.png"><h1 id="关于Vue-this-nextTick-和DOM的更新"><a href="#关于Vue-this-nextTick-和DOM的更新" class="headerlink" title="关于Vue this.$nextTick 和DOM的更新"></a>关于Vue this.$nextTick 和DOM的更新</h1><p>官方文档说明:</p><p><strong>用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM</strong><br><strong>想法:从绑定的数据发生改变，到更新视图，这个过程是异步的？</strong></p><h2 id="关于异步"><a href="#关于异步" class="headerlink" title="关于异步"></a>关于异步</h2><p>异步运行机制:<br> (1)所有同步任务都在主线程上执行,形成一个执行栈<br> (2)主线程之外，还存在一个“任务队列”。只要异步任务有了运行结果，就在“任务队列”中放置一个事件。<br> (3)一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，看看 还有那些时间，那些对应的异步任务这时候哦就结束了等待状态，进入执行栈，开始执行。<br> (4)主线程不断重复（3）<br><img src="http://sanasan.top/images/js_event_loop.png"><br>ajax异步的过程<br><img src="http://sanasan.top/images/js_event_loop2.png"></p><p><strong>vue的响应式并不是数据改变后，DOM立即变化 而是按照一点的策略进行DOM更新</strong> 例子:</p><pre><code>//改变数据vm.message = 'changed'//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新console.log(vm.$el.textContent) // 并不会得到'changed'//这样可以，nextTick里面的代码会在DOM更新后执行Vue.nextTick(function(){console.log(vm.$el.textContent) //可以得到'changed'})</code></pre><p>简单总结下这块的过程：</p><p><strong>同步代码执行 -> 查找异步队列，推入执行栈，执行Vue.nextTick[事件循环1] ->查找异步队列，推入执行栈，执行Vue.nextTick[事件循环2]… 总之，异步是单独的一个tick，不会和同步在一个 tick 里发生，也是 DOM 不会马上改变的原因。</strong></p>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
<category term="vue" scheme="http://sanasan.top/tags/vue/"/>
</entry>
<entry>
<title></title>
<link href="http://sanasan.top/2020/03/09/gitlab%E6%90%AD%E5%BB%BAgit%E6%9C%8D%E5%8A%A1%E5%99%A8/"/>
<id>http://sanasan.top/2020/03/09/gitlab搭建git服务器/</id>
<published>2020-03-09T05:16:27.357Z</published>
<updated>2020-03-09T05:16:27.357Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
</entry>
<entry>
<title>关于使用webpack</title>
<link href="http://sanasan.top/2020/03/03/%E5%85%B3%E4%BA%8Ewebpack%E7%9A%84%E4%B8%80%E4%BA%9B%E6%80%BB%E7%BB%93%EF%BC%8Cvue%20cli3%E9%87%8C%E7%9A%84%E4%B8%80%E4%BA%9B%E9%85%8D%E7%BD%AE/"/>
<id>http://sanasan.top/2020/03/03/关于webpack的一些总结，vue cli3里的一些配置/</id>
<published>2020-03-03T06:22:01.892Z</published>
<updated>2020-03-03T06:23:11.221Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
</entry>
<entry>
<title>html元素 css选择器 css定位</title>
<link href="http://sanasan.top/2020/03/03/html%E5%85%83%E7%B4%A0%20css%E9%80%89%E6%8B%A9%E5%99%A8%20css%20%E5%AE%9A%E4%BD%8D/"/>
<id>http://sanasan.top/2020/03/03/html元素 css选择器 css 定位/</id>
<published>2020-03-03T03:11:42.550Z</published>
<updated>2020-03-04T05:47:14.500Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="标签"><a href="#标签" class="headerlink" title="标签"></a>标签</h1><p>1 块级元素 占据其父元素(容器)的整个空间 ，因此创建一个’块’</p><pre><code><h1> <h2> <h3> <h4> <h5> <h6> 标题级别 1-6<div> <form> 表单 <table> 表格<hr> 水平分隔线<ol> 有序列表<ul> 无序列表<li><p> 段落</code></pre><p>2 行内元素</p><pre><code><b> <i> <a> <img> <span> <sub> <sup> <strong> <em><input> <button> <label> <select> <textarea></code></pre><h1 id="css选择器"><a href="#css选择器" class="headerlink" title="css选择器"></a>css选择器</h1><h2 id="1基本选择器"><a href="#1基本选择器" class="headerlink" title="1基本选择器"></a>1基本选择器</h2><pre><code>.calss 类选择器#id id选择器* 通用选择器element 元素选择器</code></pre><h2 id="2组合选择器"><a href="#2组合选择器" class="headerlink" title="2组合选择器"></a>2组合选择器</h2><pre><code>E F 后代选择器E>F 直接子代选择器E+F 相邻元素选择器E~F 兄弟元素选择器</code></pre><h2 id="3属性选择器"><a href="#3属性选择器" class="headerlink" title="3属性选择器"></a>3属性选择器</h2><pre><code>E[att] 选择具有att属性的E元素E[att="val"] 选择具有att属性且属性值等于val的E元素E[att~="val"] 选择具有att属性且属性值其中一个等于val的E元素（包含只有一个值且该值等于val的情况）E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素，如果属性值仅为val，也将被选择E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素</code></pre><h2 id="4伪类选择器"><a href="#4伪类选择器" class="headerlink" title="4伪类选择器"></a>4伪类选择器</h2><pre><code>:link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :hover a:hover 把鼠标放在链接上的状态 :active a:active 选择正在活动链接 :focus input:focus 选择元素输入后具有焦点</code></pre><h2 id="5伪元素选择器"><a href="#5伪元素选择器" class="headerlink" title="5伪元素选择器"></a>5伪元素选择器</h2><pre><code>::before/:before 在被选元素前插入内容。 需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。 ::after/:after 在选被元素后插入内容 其用法和特性与:before相似。 ::first-letter/:first-letter 匹配元素中文本的首字母。 被修饰的首字母不在文档树中。 ::first-line/:first-line 匹配元素中第一行的文本。 这个伪元素只能用在块元素中，不能用在内联元素中。</code></pre><h2 id="6其他"><a href="#6其他" class="headerlink" title="6其他"></a>6其他</h2><p><strong>关于:not()的用法</strong><br>假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。<br> li:not(:last-child) {<br> border-bottom: 1px solid #ddd;<br> }<br>上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线。是不是很方便。</p><p><strong>关于:nth-child()的用法</strong><br>要使E:nth-child(n)生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。:first-child、:last-child、:only-child、:nth-last-child(n)也是一样。<br>nth-child(n)括号里的n可以是一个数字，一个关键字，或者一个公式。<br>:nth-child(length) /<em>参数是具体数字 length为整数</em>/:nth-child(n) /<em>参数是n,n从0开始计算</em>/:nth-child(n<em>length) /</em>n的倍数选择，n从0开始算<em>/:nth-child(n+length) /</em>选择大于等于length后面的元素<em>/:nth-child(-n+length) /</em>选择小于等于length前面的元素<em>/:nth-child(n</em>length+1) /<em>表示隔几选一</em>/:nth-child(2n) / :nth-child(even) /<em>表示偶数</em>/:nth-child(2n+1) / :nth-child(odd) /<em>表示奇数</em>/</p><p><strong>关于:…-child和:…-of-type的差异</strong><br>这两个系列的属性确实很相似，对于不熟悉的人可能很难区分。<br>E:first-of-type 总是能命中父元素的第1个为E的子元素，不论父元素第1个子元素是否为E；而E:first-child里的E元素必须是它的兄弟元素中的第一个元素，否则匹配失效。E:last-of-type 与E:last-child也是同理。<br>E:nth-of-type(n)总是能命中父元素的第n个为E的子元素，不论父元素第n个子元素是否为E；而E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。<br>关于:nth-child()与:nth-of-type()的区别可以看这篇文章</p><p><strong>用:empty区分空元素</strong><br>选择不包含子元素的div元素：</p><pre><code>div:empty</code></pre><p>选择包含子元素的div元素：</p><pre><code>div:not(:empty)</code></pre><h1 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h1><p><strong>文档流</strong><br>html文档流 元素是按照在html中的位置顺序进行排布的 (float 和绝对定位 会脱离文档流)</p><h2 id="static-默认"><a href="#static-默认" class="headerlink" title="static 默认"></a>static 默认</h2><pre><code>position:static</code></pre><p>定位的默认值，始终处于文档流中的位置</p><h2 id="fixed-固定"><a href="#fixed-固定" class="headerlink" title="fixed 固定"></a>fixed 固定</h2><pre><code>position:fixed</code></pre><p>相对于浏览器窗口指定位置 ps:当祖先元素中有transform 属性时，fixed不再会相对于浏览器窗口定位</p><h2 id="relative-相对定位"><a href="#relative-相对定位" class="headerlink" title="relative 相对定位"></a>relative 相对定位</h2><pre><code>position:relative</code></pre><p>相对于该元素在文档中的初始位置进行定位 通过 left top right bottom 来设置元素相对于自身位置进行偏移</p><h2 id="absolute-绝对定位"><a href="#absolute-绝对定位" class="headerlink" title="absolute 绝对定位"></a>absolute 绝对定位</h2><pre><code>position:absolute</code></pre><p>相对于最近的已定位的祖先元素进行定位，如果没有，那就相对于左上角进行定位</p>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
<category term="css" scheme="http://sanasan.top/categories/css/"/>
</entry>
<entry>
<title>One.Markdown 写文章的一些语法总结</title>
<link href="http://sanasan.top/2020/03/02/Markdown%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AF%AD%E6%B3%95/"/>
<id>http://sanasan.top/2020/03/02/Markdown的一些语法/</id>
<published>2020-03-02T06:08:45.467Z</published>
<updated>2020-03-09T07:05:45.923Z</updated>
<content type="html">< 或者 <链接地址></span><br></pre></td></tr></table></figure><p> 链接 <a href="http://www.baidu.com" target="_blank" rel="noopener">百度</a></p><p><a href="https://www.baidu.com" target="_blank" rel="noopener">https://www.baidu.com</a></p><p>##高级链接</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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">这个链接用 1 作为网址变量 [Google][1]</span><br><span class="line">这个链接用 runoob 作为网址变量 [Runoob][runoob]</span><br><span class="line">然后在文档的结尾为变量赋值（网址）</span><br><span class="line"></span><br><span class="line"> [1]: http://www.google.com/</span><br><span class="line"> [sanasan]: http://sanasan.top</span><br></pre></td></tr></table></figure><p>链接也可以用变量来代替，文档末尾附带变量地址：<br>这个链接用 1 作为网址变量 <a href="http://www.google.com/" target="_blank" rel="noopener">Google</a><br>这个链接用 runoob 作为网址变量 <a href="http://sanasan.top">sanasan</a><br>然后在文档的结尾为变量赋值（网址）</p><h1 id="Markdown-图片"><a href="#Markdown-图片" class="headerlink" title="Markdown 图片"></a>Markdown 图片</h1><p>Markdown 图片语法格式:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"> </span><br><span class="line"><img src="http://sanasan.top/images/myphoto.jpg"></span><br></pre></td></tr></table></figure><p>！<a href="http://sanasan.top/images/myphoto.jpg">myself</a><br> <img src=”<a href="http://sanasan.top/images/myphoto.jpg"">http://sanasan.top/images/myphoto.jpg"</a> width:50%></p><h1 id="Markdown-表格"><a href="#Markdown-表格" class="headerlink" title="Markdown 表格"></a>Markdown 表格</h1><p>Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">| 表头 | 表头 |</span><br><span class="line">| ---- | ---- |</span><br><span class="line">| 单元格 | 单元格 |</span><br><span class="line">| 单元格 | 单元格 |</span><br></pre></td></tr></table></figure><table><thead><tr><th>表头</th><th>表头</th></tr></thead><tbody><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr></tbody></table><p>设置表格的对齐方式</p><ul><li>-: 设置内容和标题栏居右对齐。</li><li>:- 设置内容和标题栏居左对齐。</li><li>:-: 设置内容和标题栏居中对齐。</li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">| 左对齐 | 右对齐 | 居中对齐 |</span><br><span class="line">| :-----| ----: | :----: |</span><br><span class="line">| 1 | 1 | 1 |</span><br><span class="line">| 1 | 1 | 1 |</span><br></pre></td></tr></table></figure><table><thead><tr><th align="left">左对齐</th><th align="right">右对齐</th><th align="center">居中对齐</th></tr></thead><tbody><tr><td align="left">1</td><td align="right">1</td><td align="center">1</td></tr><tr><td align="left">1</td><td align="right">1</td><td align="center">1</td></tr></tbody></table><h1 id="Markdown-高级技巧"><a href="#Markdown-高级技巧" class="headerlink" title="Markdown 高级技巧"></a>Markdown 高级技巧</h1><h2 id="支持的HTML元素"><a href="#支持的HTML元素" class="headerlink" title="支持的HTML元素"></a>支持的HTML元素</h2><p>不在Markdown涵盖范围之内的标签，都可以直接在文档里用HTML撰写。<br>目前支持的HTML元素有: <code><kdb> <b> <i> <em> <sup> <sub> <br></code></p><h2 id="转义"><a href="#转义" class="headerlink" title="转义"></a>转义</h2><p>Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符 </p><p> <code>\*</code> * 显示正常的星号</p>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
<category term="other" scheme="http://sanasan.top/categories/other/"/>
<category term="markdown" scheme="http://sanasan.top/tags/markdown/"/>
</entry>
<entry>
<title>hexo github 搭建个人博客</title>
<link href="http://sanasan.top/2020/03/02/hexo/"/>
<id>http://sanasan.top/2020/03/02/hexo/</id>
<published>2020-03-02T06:08:45.465Z</published>
<updated>2020-03-02T05:13:18.610Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="安装node-git"><a href="#安装node-git" class="headerlink" title="安装node git"></a>安装node git</h1><pre><code>安装过程略查看是否安装成功 git version node -vnpm -v</code></pre><h1 id="安装-Hexo"><a href="#安装-Hexo" class="headerlink" title="安装 Hexo"></a>安装 Hexo</h1><p>在准备好后,开始使用npm 安装 Hexo </p><pre><code>npm install -g hexo-cli</code></pre><p>安装Hexo后,新建Hexo项目,并安装依赖</p><pre><code>hexo init myblogcd myblognpm install</code></pre><p>新建完成后 文件夹目录:</p><pre><code>├── _config.yml # 网站的配置信息。 ├── package.json├── scaffolds # 模版文件夹├── source # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹| ├── _drafts # 草稿文件| └── _posts # 文章Markdowm文件 └── themes # 主题文件夹</code></pre><p>运行 hexo server 或者 hexo s 启动 然后在 <a href="http://localhost:4000" target="_blank" rel="noopener">http://localhost:4000</a> 查看效果</p><h1 id="github-静态地址"><a href="#github-静态地址" class="headerlink" title="github 静态地址"></a>github 静态地址</h1><p>首先 Github 每个用户只能使用一个同名仓库来托管一个静态站点</p><pre><code>先创建一个新的仓库 仓库名必须是 用户名.github.io</code></pre><h2 id="github部署"><a href="#github部署" class="headerlink" title="github部署"></a>github部署</h2><p>1 首先在项目根目录下的_config.yml配置文件配置参数 添加如下</p><pre><code>deploy: type:git repo: github:https://github,com/sanxiansheng/sanxiansheng.github.io.git branch:master</code></pre><p>2 安装部署插件 hexo-deployer-git –save</p><pre><code>npm install hexo-deployer-git --save</code></pre><p>3 执行部署</p><pre><code>hexo clean 清除缓存文件(db.json)和已生成的静态文件hexo g -d</code></pre><h1 id="绑定域名"><a href="#绑定域名" class="headerlink" title="绑定域名"></a>绑定域名</h1><p>在万网注册，在控制台找到购买的域名点，右侧的解析按钮进去解析列表<br>点右边的“添加记录”添加两条 CNAME 类型的记录，记录值为github地址</p><p>记录添加完后就要到 Github 设置绑定域名,博客仓库点 Setting,GitHub Pages 保存自己的域名，有时候不能save，也可以在 用户名.github.io 的仓库根目录/source 目录下手动创建一个 CNAME 文件，内容为自己的域名地址，然后再去绑定就可以了</p>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
<category term="hexo" scheme="http://sanasan.top/categories/hexo/"/>
<category term="hexo" scheme="http://sanasan.top/tags/hexo/"/>
</entry>
<entry>
<title>关于egg应用结构和内置对象</title>
<link href="http://sanasan.top/2020/03/02/egg%E5%AD%A6%E4%B9%A0%E5%BA%94%E7%94%A8%E7%BB%93%E6%9E%84%E5%92%8C%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1/"/>
<id>http://sanasan.top/2020/03/02/egg学习应用结构和内置对象/</id>
<published>2020-03-02T06:08:45.464Z</published>
<updated>2019-07-10T07:57:09.505Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="关于生命周期"><a href="#关于生命周期" class="headerlink" title="关于生命周期"></a>关于生命周期</h1><p>在应用启动阶段做的一些初始化的工作 在app.js文件中 框架提供了以下生命周期函数</p><ul><li>配置文件即将加载,动态修改配置信息的最后时机 (configWillLoad)</li><li>配置文件加载完成 (configDidLoad)</li><li>文件加载完成 (didLoad)</li><li>插件启动完毕 (willReady)</li><li>worker 准备就绪 (didReady)</li><li>应用启动完成 (serverDidReady)</li><li>应用即将关闭 (beforeClose)</li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><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">// app.js</span><br><span class="line">class AppBootHook {</span><br><span class="line"> constructor(app) {</span><br><span class="line"> this.app = app;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> configWillLoad() {</span><br><span class="line"> // 此时 config 文件已经被读取并合并，但是还并未生效</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"> this.app.config.mysql.password = decrypt(this.app.config.mysql.password);</span><br><span class="line"> // 例如：插入一个中间件到框架的 coreMiddleware 之间</span><br><span class="line"> const statusIdx = this.app.config.coreMiddleware.indexOf('status');</span><br><span class="line"> this.app.config.coreMiddleware.splice(statusIdx + 1, 0, 'limit');</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> async didLoad() {</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"> this.app.queue = new Queue(this.app.config.queue);</span><br><span class="line"> await this.app.queue.init();</span><br><span class="line"></span><br><span class="line"> // 例如：加载自定义的目录</span><br><span class="line"> this.app.loader.loadToContext(path.join(__dirname, 'app/tasks'), 'tasks', {</span><br><span class="line"> fieldClass: 'tasksClasses',</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> async willReady() {</span><br><span class="line"> // 所有的插件都已启动完毕，但是应用整体还未 ready</span><br><span class="line"> // 可以做一些数据初始化等操作，这些操作成功才会启动应用</span><br><span class="line"></span><br><span class="line"> // 例如：从数据库加载数据到内存缓存</span><br><span class="line"> this.app.cacheData = await this.app.model.query(QUERY_CACHE_SQL);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> async didReady() {</span><br><span class="line"> // 应用已经启动完毕</span><br><span class="line"></span><br><span class="line"> const ctx = await this.app.createAnonymousContext();</span><br><span class="line"> await ctx.service.Biz.request();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> async serverDidReady() {</span><br><span class="line"> // http / https server 已启动，开始接受外部请求</span><br><span class="line"> // 此时可以从 app.server 拿到 server 的实例</span><br><span class="line"></span><br><span class="line"> this.app.server.on('timeout', socket => {</span><br><span class="line"> // handle socket timeout</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">module.exports = AppBootHook;</span><br></pre></td></tr></table></figure><h1 id="关于应用config配置"><a href="#关于应用config配置" class="headerlink" title="关于应用config配置"></a>关于应用config配置</h1><p> eggjs会自动合并应用，插件，框架的配置，可根据环境维护不同的配置，合并后的配置可以从app.config里获取</p><p>1 通过修改config/env文件指定<br>2 通过EGG_SERVER_ENV=prod npm start</p><p>第二种方式比较常用，通过EGG_SERVER_ENV环境变量指定运行环境更加方便</p><p>与NODE_ENV的区别</p><p>很多 Node.js 应用会使用 NODE_ENV 来区分运行环境，但 EGG_SERVER_ENV 区分得更加精细。一般的项目开发流程包括本地开发环境、测试环境、生产环境等，除了本地开发环境和测试环境外，其他环境可统称为服务器环境，服务器环境的 NODE_ENV 应该为 production。而且 npm 也会使用这个变量，在应用部署的时候一般不会安装 devDependencies，所以这个值也应该为 production。</p><p>框架默认支持的运行环境及映射关系（如果未指定 EGG_SERVER_ENV 会根据 NODE_ENV 来匹配）</p><h1 id="内置基础对象"><a href="#内置基础对象" class="headerlink" title="内置基础对象"></a>内置基础对象</h1><h2 id="1-Application"><a href="#1-Application" class="headerlink" title="1 Application"></a>1 Application</h2><p>Application是全局应用对象，在一个应用中，只会实例化一个</p><h3 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h3><p>在框架运行时，会在Application实例上触发一些事件,在监听时也可在生命周期内进行监听(自定义启动脚本 app.js 生命周期内)</p><ul><li>server:该事件一个worker进程只会触发一次,在HTTP服务完成启动后,会将HTTP server 通过这个事件暴露出来给开发者。</li><li>error:运行是有任何的异常被onerror插件捕获后，都触发error事件，将错误对象和关联的上下文(如果有)暴露给开发者,可以进行自定义的日志记录上报的等处理。</li><li>request 和 response: 应用收到请求的响应请求时,分别会触发request和response事件,并将当前请求上下文暴露出来,开发者可以监听这两个事件进行日志记录。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">// app.js</span><br><span class="line"></span><br><span class="line">module.exports = app => {</span><br><span class="line"> app.once('server', server => {</span><br><span class="line"> // websocket</span><br><span class="line"> });</span><br><span class="line"> app.on('error', (err, ctx) => {</span><br><span class="line"> // report error</span><br><span class="line"> });</span><br><span class="line"> app.on('request', ctx => {</span><br><span class="line"> // log receive request</span><br><span class="line"> });</span><br><span class="line"> app.on('response', ctx => {</span><br><span class="line"> // ctx.starttime is set by framework</span><br><span class="line"> const used = Date.now() - ctx.starttime;</span><br><span class="line"> // log total cost</span><br><span class="line"> });</span><br><span class="line">};</span><br></pre></td></tr></table></figure></li></ul><h3 id="获取方式"><a href="#获取方式" class="headerlink" title="获取方式"></a>获取方式</h3><p>Application对象几乎可以在任何地方获取到,几乎所有被框架 Loader 加载的文件（Controller，Service，Schedule 等），都可以 export 一个函数，这个函数会被 Loader 调用，并使用 app 作为参数：</p><ul><li><p>启动自定义脚本 app.js</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><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">//app.js</span><br><span class="line">module.exports = app => {</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>controller文件 this.app || this.ctx.app</p></li><li><p>Service文件中 thia.app</p></li></ul><h2 id="Context"><a href="#Context" class="headerlink" title="Context"></a>Context</h2><p> 在每一次收到用户请求时，框架会实例化一个 Context 对象，这个对象封装了这次用户请求的信息，并提供了许多便捷的方法来获取请求参数或者设置响应信息。框架会将所有的 Service 挂载到 Context 实例上，一些插件也会将一些其他的方法和对象挂载到它上面（egg-sequelize 会将所有的 model 挂载在 Context 上）。</p><h3 id="获取方式-1"><a href="#获取方式-1" class="headerlink" title="获取方式"></a>获取方式</h3><p>最常见的 Context 实例获取方式是在 Middleware, Controller 以及 Service 中。框架的Middleware 可以直接用this 或者ctx获取context</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">// Koa v1</span><br><span class="line">function* middleware(next) {</span><br><span class="line"> // this is instance of Context</span><br><span class="line"> console.log(this.query);</span><br><span class="line"> yield next;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// Koa v2</span><br><span class="line">async function middleware(ctx, next) {</span><br><span class="line"> // ctx is instance of Context</span><br><span class="line"> console.log(ctx.query);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>除了在请求时可以获取 Context 实例之外， 在有些非用户请求的场景下我们需要访问 service / model 等 Context 实例上的对象，我们可以通过 Application.createAnonymousContext() 方法创建一个匿名 Context 实例：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><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">// app.js</span><br><span class="line">module.exports = app => {</span><br><span class="line"> app.beforeStart(async () => {</span><br><span class="line"> const ctx = app.createAnonymousContext();</span><br><span class="line"> // preload before app start</span><br><span class="line"> await ctx.service.posts.load();</span><br><span class="line"> });</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>在定时任务中的每一个 task 都接受一个 Context 实例作为参数，以便我们更方便的执行一些定时的业务逻辑：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><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">// app/schedule/refresh.js</span><br><span class="line">exports.task = async ctx => {</span><br><span class="line"> await ctx.service.posts.refresh();</span><br><span class="line">};</span><br></pre></td></tr></table></figure><h2 id="Request-amp-Response"><a href="#Request-amp-Response" class="headerlink" title="Request & Response"></a>Request & Response</h2><p>可以在Context实例上获取当前的Request和Response实例</p><p>ctx.query和ctx.request.query是等价的，但是ctx.body = ctx.response.body 而不是ctx.request.body</p><h2 id="Controller"><a href="#Controller" class="headerlink" title="Controller"></a>Controller</h2><p>框架提供一个Controller基类，这个基类包含的属性有：ctx app config service logger</p><p>基类的引入有两个方式</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><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">1 const Controller = require("egg").Controller</span><br><span class="line"> class XXXController extends Controller{</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"> module.exports=XXXController;</span><br><span class="line">---------------------------------------------------</span><br><span class="line">2 module.exports = (app) => {</span><br><span class="line"> return class XXXController extends app.Controller{</span><br><span class="line"></span><br><span class="line"> };</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><h2 id="Service"><a href="#Service" class="headerlink" title="Service"></a>Service</h2><p>框架提供了一个 Service 基类，并推荐所有的 Service 都继承于该基类实现。<br>Service 基类的属性和 Controller 基类属性一致，访问方式也类似：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">// app/service/user.js</span><br><span class="line"></span><br><span class="line">// 从 egg 上获取（推荐）</span><br><span class="line">const Service = require('egg').Service;</span><br><span class="line">class UserService extends Service {</span><br><span class="line"> // implement</span><br><span class="line">}</span><br><span class="line">module.exports = UserService;</span><br><span class="line"></span><br><span class="line">// 从 app 实例上获取</span><br><span class="line">module.exports = app => {</span><br><span class="line"> return class UserService extends app.Service {</span><br><span class="line"> // implement</span><br><span class="line"> };</span><br><span class="line">};</span><br></pre></td></tr></table></figure><h2 id="Helper"><a href="#Helper" class="headerlink" title="Helper"></a>Helper</h2><p>Helper 用来提供一些实用的 utility 函数。它的作用在于我们可以将一些常用的动作抽离在 helper.js 里面成为一个独立的函数，这样可以用 JavaScript 来写复杂的逻辑，避免逻辑分散各处，同时可以更好的编写测试用例。</p><p>Helper 自身是一个类，有和 Controller 基类一样的属性，它也会在每次请求时进行实例化，因此 Helper 上的所有函数也能获取到当前请求相关的上下文信息。</p><p>获取方式<br>可以在 Context 的实例上获取到当前请求的 Helper(ctx.helper) 实例。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><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">// app/controller/user.js</span><br><span class="line">class UserController extends Controller {</span><br><span class="line"> async fetch() {</span><br><span class="line"> const { app, ctx } = this;</span><br><span class="line"> const id = ctx.query.id;</span><br><span class="line"> const user = app.cache.get(id);</span><br><span class="line"> ctx.body = ctx.helper.formatUser(user);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>除此之外，Helper 的实例还可以在模板中获取到，例如可以在模板中获取到 security 插件提供的 shtml 方法。</p><figure class="highlight plain"><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">// app/view/home.nj</span><br><span class="line">{{ helper.shtml(value) }}</span><br></pre></td></tr></table></figure><p>自定义 helper 方法<br>应用开发中，我们可能经常要自定义一些 helper 方法，例如上面例子中的 formatUser，我们可以通过框架扩展的形式来自定义 helper 方法。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><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">// app/extend/helper.js</span><br><span class="line">module.exports = {</span><br><span class="line"> formatUser(user) {</span><br><span class="line"> return only(user, [ 'name', 'phone' ]);</span><br><span class="line"> }</span><br><span class="line">};</span><br></pre></td></tr></table></figure><h2 id="Config"><a href="#Config" class="headerlink" title="Config"></a>Config</h2><p>我们推荐应用开发遵循配置和代码分离的原则，将一些需要硬编码的业务配置都放到配置文件中，同时配置文件支持各个不同的运行环境使用不同的配置，使用起来也非常方便，所有框架、插件和应用级别的配置都可以通过 Config 对象获取到，关于框架的配置，可以详细阅读 Config 配置章节。</p><p>获取方式<br>我们可以通过 app.config 从 Application 实例上获取到 config 对象，也可以在 Controller, Service, Helper 的实例上通过 this.config 获取到 config 对象。</p><h2 id="Logger"><a href="#Logger" class="headerlink" title="Logger"></a>Logger</h2><p>框架内置了功能强大的日志功能，可以非常方便的打印各种级别的日志到对应的日志文件中，每一个 logger 对象都提供了 4 个级别的方法：</p><ul><li>logger.debug()</li><li>logger.info()</li><li>logger.warn()</li><li>logger.error()<br>在框架中提供了多个 Logger 对象，下面我们简单的介绍一下各个 Logger 对象的获取方式和使用场景。</li></ul><p>App Logger<br>我们可以通过 app.logger 来获取到它，如果我们想做一些应用级别的日志记</p>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
</entry>
<entry>
<title>egg学习 项目结构</title>
<link href="http://sanasan.top/2020/03/02/egg%E5%AD%A6%E4%B9%A0/"/>
<id>http://sanasan.top/2020/03/02/egg学习/</id>
<published>2020-03-02T06:08:45.463Z</published>
<updated>2019-07-09T04:53:51.352Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><img src="http://sanasan.top/images/egg.png"><p>绿色虚线框中的所有组件组成了一个Worker，这就是egg.js中实际执行代码逻辑的进程，是一个node服务器。</p><ul><li>request进来后，先穿过中间件，自己定义的中间件都放在projectDir/app/middleware下，并在config中启用。</li><li>egg.js内置了egg-static中间件，将静态资源放在projectDir/app/public中，只会经过egg-static中间件之前的中间件，最后egg-static直接响应给客户端，不会到达其后的中间件以及Router。</li><li>如果不是public中的资源，将会穿越所有中间件，到达路由。一般所有的路由都放在router.js中，这个文件没有任何逻辑，而是直接指向一个处理请求的controller，只起到目录和索引的作用:<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">egg-project</span><br><span class="line">├── package.json</span><br><span class="line">├── app.js (可选)</span><br><span class="line">├── agent.js (可选)</span><br><span class="line">├── app</span><br><span class="line">| ├── router.js</span><br><span class="line">│ ├── controller</span><br><span class="line">│ | └── home.js</span><br><span class="line">│ ├── service (可选)</span><br><span class="line">│ | └── user.js</span><br><span class="line">│ ├── middleware (可选)</span><br><span class="line">│ | └── response_time.js</span><br><span class="line">│ ├── schedule (可选)</span><br><span class="line">│ | └── my_task.js</span><br><span class="line">│ ├── public (可选)</span><br><span class="line">│ | └── reset.css</span><br><span class="line">│ ├── view (可选)</span><br><span class="line">│ | └── home.tpl</span><br><span class="line">│ └── extend (可选)</span><br><span class="line">│ ├── helper.js (可选)</span><br><span class="line">│ ├── request.js (可选)</span><br><span class="line">│ ├── response.js (可选)</span><br><span class="line">│ ├── context.js (可选)</span><br><span class="line">│ ├── application.js (可选)</span><br><span class="line">│ └── agent.js (可选)</span><br><span class="line">├── config</span><br><span class="line">| ├── plugin.js</span><br><span class="line">| ├── config.default.js</span><br><span class="line">│ ├── config.prod.js</span><br><span class="line">| ├── config.test.js (可选)</span><br><span class="line">| ├── config.local.js (可选)</span><br><span class="line">| └── config.unittest.js (可选)</span><br><span class="line">└── test</span><br><span class="line"> ├── middleware</span><br><span class="line"> | └── response_time.test.js</span><br><span class="line"> └── controller</span><br><span class="line"> └── home.test.js</span><br></pre></td></tr></table></figure></li></ul><p>如上，由框架约定的目录：</p><ul><li><p>app/router.js 用于配置 URL 路由规则，具体参见 Router。</p></li><li><p>app/controller/** 用于解析用户的输入，处理后返回相应的结果，具体参见 Controller。</p></li><li><p>app/service/** 用于编写业务逻辑层，可选，建议使用，具体参见 Service。</p></li><li><p>app/middleware/** 用于编写中间件，可选，具体参见 Middleware。</p></li><li><p>app/public/** 用于放置静态资源，可选，具体参见内置插件 egg-static。</p></li><li><p>app/extend/** 用于框架的扩展，可选，具体参见框架扩展。</p></li><li><p>config/config.{env}.js 用于编写配置文件，具体参见配置。</p></li><li><p>config/plugin.js 用于配置需要加载的插件，具体参见插件。</p></li><li><p>test/** 用于单元测试，具体参见单元测试。</p></li><li><p>app.js 和 agent.js 用于自定义启动时的初始化工作，可选，具体参见启动自定义。关于agent.js的作用参见Agent机制。<br>由内置插件约定的目录：</p></li><li><p>app/public/** 用于放置静态资源，可选，具体参见内置插件 egg-static。</p></li><li><p>app/schedule/** 用于定时任务，可选，具体参见定时任务。</p></li></ul><p>若需自定义自己的目录规范，参见 Loader API</p><ul><li>app/view/** 用于放置模板文件，可选，由模板插件约定，具体参见模板渲染。</li><li>app/model/** 用于放置领域模型，可选，由领域类相关插件约定，如 egg-sequelize。</li></ul>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
<category term="eggjs" scheme="http://sanasan.top/tags/eggjs/"/>
</entry>
<entry>
<title>Docker jenkins vue自动部署</title>
<link href="http://sanasan.top/2020/03/02/Docker%20Jenkins%20node%E9%A1%B9%E7%9B%AE%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2/"/>
<id>http://sanasan.top/2020/03/02/Docker Jenkins node项目自动部署/</id>
<published>2020-03-02T06:08:45.461Z</published>
<updated>2020-03-09T07:31:40.501Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="Docker"><a href="#Docker" class="headerlink" title="Docker"></a>Docker</h1><p>原本服务器长时间运行 产生的问题:<br> 1 手动部署 成本太高过程复杂，有时候项目中一个很小的改动，在服务器上部署，要去修改很多个地方<br> 2 服务器长时间的积累,内部文件 环境混乱<br> 3 重装系统成本太高 不方便迁移</p><h2 id="docker中的镜像和容器"><a href="#docker中的镜像和容器" class="headerlink" title="docker中的镜像和容器"></a>docker中的镜像和容器</h2><p>1 容器:个人理解，和虚拟机类似，但是与宿主主机共享操作系统内核，只提供一个隔离环境 或者称为沙箱</p><p>2 镜像:就像win10纯净版.rar文件，用来创建容器</p><p>以下是docker容器和虚拟机的区别</p><table><thead><tr><th align="left"></th><th align="right">Docker容器</th><th align="center">虚拟机</th></tr></thead><tbody><tr><td align="left">操作系统内核</td><td align="right">与宿主机共享操作系统内核</td><td align="center">需要在宿主的os上运行虚拟机os</td></tr><tr><td align="left">存储大小</td><td align="right">小</td><td align="center">大</td></tr><tr><td align="left">移植性</td><td align="right">灵活</td><td align="center">笨重</td></tr><tr><td align="left">部署速度</td><td align="right">快</td><td align="center">较慢</td></tr></tbody></table>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
<category term="部署" scheme="http://sanasan.top/tags/%E9%83%A8%E7%BD%B2/"/>
</entry>
</feed>