我爱盐酥鸡
在现实断裂的地方 梦汇成了海
2020-04-29T07:47:12.015Z
https://jwchan1996.github.io/
Jwchan
Hexo
docker 容器访问宿主机 mysql
https://jwchan1996.github.io/2020/04/28/docker容器访问宿主机mysql/
2020-04-27T16:00:00.000Z
2020-04-29T07:47:12.015Z
<h3 id="场景描述"><a href="#场景描述" class="headerlink" title="# 场景描述"></a><span style="color:#009688"># </span>场景描述</h3><p>在 <code>centos7</code> 运行 <code>docker</code> 容器应用时,需要连接宿主机的 <code>mysql</code> 的 <code>3306</code> 端口,发现连接不上,<code>docker</code> 容器无法访问宿主机的 <code>mysql</code> 数据库。但是,在容器内访问外部网络是可以 <code>ping</code> 通的。 </p>
<h3 id="原因分析"><a href="#原因分析" class="headerlink" title="# 原因分析"></a><span style="color:#009688"># </span>原因分析</h3><p>在 <code>centos7</code> 上部署 <code>docker</code> 容器,其网络模式采用的是 <code>bridge</code> 模式。<br>启动 <code>docker</code> 时,<code>docker</code> 进程会创建一个名为 <code>docker0</code> 的虚拟网桥,用于宿主机与容器之间的通信。当启动一个 <code>docker</code> 容器时,<code>docker</code> 容器将会附加到虚拟网桥上,容器内的报文通过 <code>docker0</code> 向外转发。</p>
<p>如果 <code>docker</code> 容器访问宿主机,那么 <code>docker0</code> 网桥将报文直接转发到本机,报文的源地址是 <code>docker0</code> 网段的地址。而如果 <code>docker</code> 容器访问宿主机以外的机器,<code>docker</code> 的 <code>SNAT</code> 网桥会将报文的源地址转换为宿主机的地址,通过宿主机的网卡向外发送。</p>
<p>因此,当 <code>docker</code> 容器访问宿主机时,如果宿主机服务端口会被防火墙拦截,那么就无法连通宿主机,出现 <code>No route to host</code> 的错误。</p>
<p>而访问宿主机所在局域网内的其他机器,由于报文的源地址是宿主机 <code>ip</code>,因此,不会被目的机器防火墙拦截,所以可以访问。<br>
JS 模拟实现 call、apply、bind
https://jwchan1996.github.io/2019/11/09/js_simulate_call_apply_bind/
2019-11-08T16:00:00.000Z
2019-11-09T03:42:05.771Z
<h3 id="实现call"><a href="#实现call" class="headerlink" title="实现call"></a>实现call</h3><p><code>call</code> 的参数是直接放进去的,第二第三第 <code>n</code> 个参数全部都是用逗号分割 </p>
<p>下面是 <code>call</code> 的用法形式:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">arg1, arg2</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(arg1, arg2)</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.a, <span class="keyword">this</span>.b)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">run.call(</span><br><span class="line"> {</span><br><span class="line"> a: <span class="string">"a"</span>,</span><br><span class="line"> b: <span class="string">"b"</span></span><br><span class="line"> },</span><br><span class="line"> <span class="number">1</span>,</span><br><span class="line"> <span class="number">2</span></span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<p><code>call</code> 的作用是可以改变函数的上下文对象,也就是函数里 <code>this</code> 的指向<br>👉 这是我们模拟实现 <code>call</code> 的关键 </p>
<p><strong>如果一个函数作为一个对象的属性,那么通过调用这个对象的属性调用该函数,<code>this</code> 就是该对象</strong><br>
JavaScript 中的 call()、apply()、bind() 的用法
https://jwchan1996.github.io/2019/10/21/js_call_apply_bind/
2019-10-20T16:00:00.000Z
2019-11-09T03:42:36.669Z
<h3 id="笔记"><a href="#笔记" class="headerlink" title="# 笔记"></a><span style="color:#009688"># </span>笔记</h3><p>其实是一个很简单的东西,认真看十分钟就能完全理解!<br>先看明白下面: </p>
<p><strong>例1</strong><br><img src="/images/js_call_apply_bind/01.png" alt="image"><br><figure class="highlight javascript"><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">obj.objAge; <span class="comment">//17</span></span><br><span class="line">obj.myFun(); <span class="comment">//小张年龄undefined</span></span><br></pre></td></tr></table></figure></p>
<p><strong>例2</strong><br><img src="/images/js_call_apply_bind/02.png" alt="image"><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">shows(); <span class="comment">//盲僧</span></span><br></pre></td></tr></table></figure></p>
<p>比较一下这两者 <code>this</code> 的差别,第一个打印里面的 <code>this</code> 指向 <code>obj</code>,第二个全局声明的 <code>shows()</code> 函数 <code>this</code> 是 <code>window</code>。<br>
koa-jwt 实现自定义排除动态路由的鉴权
https://jwchan1996.github.io/2019/10/18/koa_jwt_unless/
2019-10-17T16:00:00.000Z
2020-04-28T09:30:57.222Z
<h3 id="场景描述"><a href="#场景描述" class="headerlink" title="# 场景描述"></a><span style="color:#009688"># </span>场景描述</h3><p>🍭 最近在编写 <a href="https://github.com/ppap6/PPAP.server" target="_blank" rel="noopener"><code>PPAP.server</code></a> 项目,一个基于 <code>koa2</code> 的 <code>nodejs</code> 服务端接口程序。<br>由于接口采用的是 <code>RESTful API</code>,所以鉴权令牌由客户端携带发送到接口。<br>业务需求的是部分接口是需要用户登陆再进行操作,比如需要记录用户点赞的接口。<br>而不需要用户鉴权的接口,如查看帖子等不记录用户数据的接口。 </p>
<p>对于路由权限控制(鉴权),项目使用的是 <a href="https://github.com/auth0/node-jsonwebtoken" target="_blank" rel="noopener"><code>koa-jwt</code></a>,支持对 <code>token</code> 的生成与校验,还能对接口路由进行过滤排除,指定不需要鉴权的接口。 </p>
<p>如:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//配置不需要jwt验证的接口</span></span><br><span class="line">app.use(jwtKoa({ <span class="attr">secret</span>: tokenUtil.secret }).unless({</span><br><span class="line"> path: [</span><br><span class="line"> <span class="string">'/user/login'</span>,</span><br><span class="line"> <span class="string">'/user/register'</span></span><br><span class="line"> ]</span><br><span class="line">}));</span><br></pre></td></tr></table></figure></p>
<p>这样上面两个接口 <code>/user/login</code> 和 <code>/user/register</code> 都是可以跳过鉴权的,不需要携带 <code>token</code>。</p>
<p>对于本项目来说,棘手的是项目接口大多使用了动态路由,即比如 <code>/user/:id</code> 这样的接口,需要用正则表达式去进行匹配。<br>但是动态路由 <code>/user/:id</code> 的请求方法可能会有 <code>get post put delete</code> 四种,所以不仅仅要排除配置的静态路由,还需要排除配置的特定请求方法的动态路由。<br>
443 端口占用导致其他程序启动失败
https://jwchan1996.github.io/2019/09/29/https_443_port_occupy/
2019-09-28T16:00:00.000Z
2019-11-09T03:44:26.553Z
<h3 id="笔记"><a href="#笔记" class="headerlink" title="# 笔记"></a><span style="color:#009688"># </span>笔记</h3><p>🧐 由于需要编写基于 <code>go</code> 的微信公众号接口,端口限制在 <code>80</code> 端口和 <code>443</code> 端口之间,所以就只能起一个监听端口为 <code>443</code> 的 <code>https</code> 服务。<br>🧐 但是,<code>beego</code> 运行 <code>443</code> 端口的 <code>https</code> 服务,成功运行了而且并没有报错(这是个奇怪的点),但是当访问接口的时候都是返回 <code>404 not found</code>。<br>🧐 在排除 https 服务异常的情况下(除了 <code>443</code> 端口其他端口都是正常工作的),最终定位到问题应该在端口占用上。<br>🧐 于是,查看 <code>443</code> 端口的占用情况,果然有进程在占用着,是 <code>vmware-hostd.exe</code> 这个进程,然后将它 <code>kill</code> 掉,然后发现,还是不行,一样是 <code>404 not found</code>。<br>🧐 出大问题哈哈哈!一开始没注意到 <code>vmware-hostd.exe</code> 是自启动的,杀掉了还是会重新启动,还捣鼓了几个小时。<br>🧐 所以,后面只需要将 <code>vmware-hostd.exe</code> 进程设置为手动开启,然后关掉即可释放 <code>443</code> 端口。<br>
Electron 踩坑记录(二)
https://jwchan1996.github.io/2019/09/12/electron_note_2/
2019-09-11T16:00:00.000Z
2020-04-28T09:38:38.742Z
<h3 id="场景描述"><a href="#场景描述" class="headerlink" title="# 场景描述"></a><span style="color:#009688"># </span>场景描述</h3><p>– <code>2020-04-28</code> 更新:由于 <code>flash 30</code> 版本以后会出现提示“未能正确加载必要组件”(其实是广告程序),导致失效,<code>flash</code> 版本应该替换为 <code>29</code> 版本。– </p>
<p>上一篇 <code>electron</code> 踩坑(一) 说到 <code>electron</code> 加载 <code>flash</code> 的问题<br>采用的是加载系统安装好的 <code>flash</code> 插件,需要用户提前安装好 <code>flash</code> 才能正常工作<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">app.commandLine.appendSwitch(<span class="string">'ppapi-flash-path'</span>, app.getPath(<span class="string">'pepperFlashSystemPlugin'</span>));</span><br></pre></td></tr></table></figure></p>
<p>其中 <code>app.getPath('pepperFlashSystemPlugin')</code> 会自动找寻系统 <code>flash</code> 的所在路径<br>但是,如果用户没装 <code>flash</code> 就打开应用,就会提示报错,带来不好的用户体验<br>所以,我们需要将 <code>flash</code> 嵌入应用依赖,也就是插件跟着应用打包 </p>
<p><code>win</code> 下面的软件有 <code>32</code> 位和 <code>64</code> 位的说法,而且安装位置会有不同。那么 <code>flash</code> 也不例外<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">C:\Windows\System32\Macromed\Flash\pepflashplayer64_32_0_0_238.dll</span><br><span class="line">C:\Windows\SysWOW64\Macromed\Flash\pepflashplayer32_32_0_0_238.dll</span><br></pre></td></tr></table></figure></p>
<p>当然,上面版本号会变化,但是 <code>dll</code> 所在路径基本是如上所示<br>找到 <code>flash</code> 所在路径后,我们就可以提取文件放到我们的应用目录下了<br>编译后就会成为应用安装包的一部分,这样就不需要用户手动安装 <code>flash</code> 了<br>🔥 那么,在 <code>electron</code> 目录下应该如何引入呢?<br>
koa 实现 token 有效时间续期的思路
https://jwchan1996.github.io/2019/09/06/koa_token/
2019-09-05T16:00:00.000Z
2020-04-28T09:30:36.765Z
<h3 id="场景描述"><a href="#场景描述" class="headerlink" title="# 场景描述"></a><span style="color:#009688"># </span>场景描述</h3><p>🍭 在前后端的交互中,无可避免的存在一些需要验证身份的请求。<br>🍭 一般来说,使用 <code>token</code> 作为身份令牌可以实现身份验证的问题。<br>🍭 以此同时,<code>token</code> 作为自带描述信息的无状态数据,唯一的判断标准就是生成 <code>token</code> 时设置的有效期时间,当超过有效期时则作废。<br>🍭 我们在使用 <code>APP</code> 或 <code>WEB</code> 应用时,如果正在操作的时候,<code>token</code> 刚好过期了,那就出大问题了。<br>🍭 所有的数据请求都会失败,给用户带来极其糟糕的体验。<br>🍭 所以,如何才能让 <code>token</code> 进行续期呢? </p>
<h3 id="处理思路"><a href="#处理思路" class="headerlink" title="# 处理思路"></a><span style="color:#009688"># </span>处理思路</h3><p>🍤 因为 <code>token</code> 是无状态数据,一旦生成了,不能主动删除或者让它失效,唯一的就是等待有效期时间到。<br>🍤 所以,我们会想到,在 <code>token</code> 过期时客户端携带新的 <code>token</code> 来访问数据接口,是不是就可以了呢。<br>🍤 答案是的,那么现在需要解决的问题就是:<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1.怎么返回新的 token 给到客户端</span><br><span class="line">2.什么时候返回 token 使得用户登录状态得到续期</span><br></pre></td></tr></table></figure></p>
Electron 踩坑记录(一)
https://jwchan1996.github.io/2019/08/09/electron_note_1/
2019-08-08T16:00:00.000Z
2019-11-09T03:45:18.262Z
<h3 id="场景描述"><a href="#场景描述" class="headerlink" title="# 场景描述"></a><span style="color:#009688"># </span>场景描述</h3><p>构建 <code>pc</code> 客户端,采用 <code>electron-vue</code> 脚手架进行快速搭建环境。<br>功能点在 <code>web</code> 端全部正常,移植代码到 <code>electron</code> 时出现问题的功能点有:<br><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">1. rtmp 流媒体的播放 </span><br><span class="line">2. ant-design-vue UI 框架部分组件失效</span><br></pre></td></tr></table></figure></p>
<p>🔥 播放器使用的是 <code>vue-video-player</code>,播放 <code>rtmp</code> 流需要使用 <code>flash</code> 技术。 </p>
<h3 id="问题解决"><a href="#问题解决" class="headerlink" title="# 问题解决"></a><span style="color:#009688"># </span>问题解决</h3><p>简单记录问题关键<br><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">问题:pc 客户端 ant-design-vue 部分组件不能正常工作 </span><br><span class="line">原因:electron-vue 将它视为 webpack 的 externals 了,其中 UI 组件含有的 vue 文件没有被 vue-loader 正常编译,才导致功能失效</span><br><span class="line">解决:找到 .electron-vue/webpack.renderer.config.js 将 ant-design-vue 加入到白名单 whiteListedModules</span><br></pre></td></tr></table></figure></p>
<p>🧐 <a href="https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals" target="_blank" rel="noopener">electron 白名单配置</a>
vue 重新加载当前组件
https://jwchan1996.github.io/2019/07/25/vue_reload_component/
2019-07-24T16:00:00.000Z
2019-11-09T03:45:29.990Z
<h3 id="vue-重新加载当前组件"><a href="#vue-重新加载当前组件" class="headerlink" title="# vue 重新加载当前组件"></a><span style="color:#009688"># </span>vue 重新加载当前组件</h3><p>🍍 遇到问题的场景<br>需要把当前组件完全还原成初始化状态,不要页面全部刷新<br>🍍 例如:播放 <code>rtmp</code> 直播视频流的时候,点击暂停之后,想要恢复播放,需要重新载入当前播放器才行。<br>🍍 情景:使用了 <code>vue-video-player</code> 播放器,点击视频播放界面,会暂停,因为播放的是 <code>rtmp</code> 直播流,想要恢复的话必须重新加载视频流以及加载 <code>flash</code> 等插件才行,此时简单的替换播放源 <code>src</code> 是不可行的,需要的是重新初始化当前播放器。</p>
<p><img src="/images/vue_reload_component/01.png" alt="暂停"><br>
map 字符串数组/数字数组 快速转换
https://jwchan1996.github.io/2019/06/27/js_map/
2019-06-26T16:00:00.000Z
2019-11-09T03:46:12.025Z
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span
响应路由参数的变化保持功能选中状态
https://jwchan1996.github.io/2019/05/28/vue_watch_$route/
2019-05-27T16:00:00.000Z
2019-11-09T03:46:28.756Z
<h3 id="背景"><a href="#背景" class="headerlink" title="# 背景"></a><span style="color:#009688"># </span>背景</h3><p>在 <code>vue + vue-router</code> 的项目中,单页面路由的出现使得页面加载更加优雅。<br>但与此同时,也会出现一些问题。</p>
<p>比如:<br><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">1. 页面刷新如何保持功能选中状态</span><br><span class="line">2. 浏览器前进后退如何保持功能选中状态</span><br></pre></td></tr></table></figure></p>
<p>😑 关于这两个问题,我们很容易想到通过监听路由地址来解决。</p>
<h4 id="页面刷新"><a href="#页面刷新" class="headerlink" title="# 页面刷新"></a><span style="color:#009688"># </span>页面刷新</h4><p>对于问题 <code>1</code> ,解决方法就是在页面加载时根据路由地址判断当前选择的是什么,从而激活对应的选中样式。<br>
关于 ref 与 $refs 对 dom 元素的操作
https://jwchan1996.github.io/2019/05/14/vue_$refs/
2019-05-13T16:00:00.000Z
2019-11-09T03:46:42.122Z
<h3 id="如何获取-v-for-渲染的多个不同-ref-的-dom"><a href="#如何获取-v-for-渲染的多个不同-ref-的-dom" class="headerlink" title="# 如何获取 v-for 渲染的多个不同 ref 的 dom"></a><span style="color:#009688"># </span>如何获取 v-for 渲染的多个不同 ref 的 dom</h3><p>🍍 在编写 <code>vue</code> 项目过程中,遇到了获取不到正确的 <code>dom</code> 元素节点的问题。</p>
<p>功能界面如图所示:</p>
<p><img src="/images/vue_$refs/vue_$refs_01.png" alt="界面"></p>
<p>需要实现的是,点击每个播放器的右上角的关闭按钮,则关闭播放器。<br>
关于 axios 请求出现 OPTIONS
https://jwchan1996.github.io/2019/05/06/axios_options/
2019-05-05T16:00:00.000Z
2019-11-09T03:46:53.604Z
<h3 id="为什么-axios-先要请求-OPTIONS-再请求-POST"><a href="#为什么-axios-先要请求-OPTIONS-再请求-POST" class="headerlink" title="# 为什么 axios 先要请求 OPTIONS 再请求 POST"></a><span style="color:#009688"># </span>为什么 axios 先要请求 OPTIONS 再请求 POST</h3><p>🎨 最近在用 <code>vue</code> 重写一个以前的 <code>angular</code> + <code>thinkjs</code> 的项目,由于项目环境的前后端分离了,就出现了跨域问题,配置了一下 <code>CORS</code> 解决了跨域问题之后,又出现了 <code>axios</code> 请求发送两次的情况。</p>
<p>以登录功能为例,一共发送两个请求,第一个是 <code>OPTIONS</code> 请求,第二个是 <code>POST</code> 请求。</p>
<p><code>axios</code> 配置如下:
软件版本命名规则
https://jwchan1996.github.io/2019/04/17/version_number/
2019-04-16T16:00:00.000Z
2019-11-09T03:47:03.819Z
<style>
#version_number_01{
border: 0 !important;
/**设置缩放**/
-webkit-transition: 0.2s all;
-moz-transition: 0.2s all;
-ms-transition: 0.2s all;
transition: 0.2s all;
}
#version_number_01:hover{
-webkit-transform: scale(1.02,1.02);
-moz-transform: scale(1.02,1.02);
-ms-transform: scale(1.02,1.02);
transform: scale(1.02,1.02);
box-shadow: 5px 5px 30px #999;
cursor: pointer;
}
</style>
<h3 id="版本号命名规则"><a href="#版本号命名规则" class="headerlink" title="# 版本号命名规则"></a><span style="color:#009688"># </span>版本号命名规则</h3><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></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>
<p><img id="version_number_01" src="/images/version_number.png">
获取 v-html 渲染的富文本数据元素内容
https://jwchan1996.github.io/2019/03/20/vue_v-html/
2019-03-19T16:00:00.000Z
2020-06-12T02:17:10.067Z
<h3 id="场景"><a href="#场景" class="headerlink" title="# 场景"></a><span style="color:#009688"># </span>场景</h3><p>🍰 在业务中,往往有时候需要处理富文本格式的数据。</p>
<blockquote>
<p>富文本格式数据: 带有html标签的数据</p>
</blockquote>
<p>在传统的 <code>web</code> 开发下,当我们获取到数据,只要使用 <code>append</code> 或 <code>innerHtml</code> 将元素添加到 <code>dom</code> 中,再使用 <code>document.querySelector()</code> 即可获取 <code>dom</code> 元素。 </p>
<p>而在 <code>vue</code> 中,页面渲染完毕,<code>v-html</code> 并没有触发页面渲染的重新执行,所以使用 <code>document.querySelector()</code> 方式是获取不到数据的,因为 <code>dom</code> 早在第一次加载时候就渲染完毕了,也就自然获取不到。<br>
关于控制台打印点击事件目标元素的 currentTarget 为 null
https://jwchan1996.github.io/2019/02/20/currentTarget_console_log/
2019-02-19T16:00:00.000Z
2019-11-09T03:47:28.491Z
<h3 id="场景"><a href="#场景" class="headerlink" title="# 场景"></a><span style="color:#009688"># </span>场景</h3><p>JS 代码:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> target = <span class="built_in">document</span>.getElementById(<span class="string">'target'</span>);</span><br><span class="line">target.addEventListener(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(e);</span><br><span class="line"> <span class="built_in">console</span>.log(e.currentTarget);</span><br><span class="line">});</span><br></pre></td></tr></table></figure></p>
实现平滑滚动回到顶部
https://jwchan1996.github.io/2019/01/27/back_to_top/
2019-01-26T16:00:00.000Z
2020-06-12T02:16:09.440Z
<h3 id="场景"><a href="#场景" class="headerlink" title="# 场景"></a><span style="color:#009688"># </span>场景</h3><p>🍰 实现页面滚动到一定位置,出现返回顶部图标<br>🍰 点击图标实现页面平滑滚动返回顶部</p>
<h3 id="方案"><a href="#方案" class="headerlink" title="# 方案"></a><span style="color:#009688"># </span>方案</h3><p>采用 window.requestAnimationFrame( ) 实现
使用 git 向开源项目提交 pull request
https://jwchan1996.github.io/2019/01/20/git_pull_request/
2019-01-19T16:00:00.000Z
2019-11-09T03:48:00.264Z
<h3 id="Pull-Request-是什么"><a href="#Pull-Request-是什么" class="headerlink" title="#Pull Request 是什么"></a><span style="color:#009688;">#</span>Pull Request 是什么</h3><p>⛏️ <code>Pull Request</code> 是一种通知机制<br>你修改了他人的代码,将你的修改通知原来的作者,希望他合并你的修改,这就是 <code>Pull Request</code> </p>
<p>⛏️ <code>Pull Request</code> 本质上是一种软件的合作方式,是将涉及不同功能的代码,纳入主干的一种流程。这个过程中,还可以进行讨论、审核和修改代码 </p>
<p>⛏️ 简单的说是在自己本地仓库修改代码,提交到自己远程仓库,提交 <code>PR</code> 后被接受后,再会被合并到 <code>master</code>
解决 apicloud 下关闭 Win 页面失效问题
https://jwchan1996.github.io/2019/01/16/apicloud_closeWin/
2019-01-15T16:00:00.000Z
2019-11-09T03:48:13.688Z
<h3 id="场景"><a href="#场景" class="headerlink" title="#场景"></a><span style="color:#009688;">#</span>场景</h3><p>🌈 在使用 <code>apicloud</code> 开发相关应用的时候,经常会遇到打开一个新的 <code>Window</code> 页面,<br>同时需要把其他 <code>Window</code> 或 <code>Frame</code> 页面关闭的情况。<br>以下是官网 <code>api</code> 文档的描述: </p>
<blockquote>
<p><code>closeWin</code> 方法可以关闭 <code>Window</code>,但注意,若当前正在进行 <code>openWin</code>、<code>closeWin</code> 等带动画过渡的 <code>Window</code> 操作,调用此方法会失效。</p>
</blockquote>
非模块化下实现简单 vue-router 应用
https://jwchan1996.github.io/2019/01/10/vue_router_nomodular/
2019-01-09T16:00:00.000Z
2019-11-09T03:48:23.568Z
<h3 id="场景"><a href="#场景" class="headerlink" title="#场景"></a><span style="color:#009688;">#</span>场景</h3><p>一般情况下,我们使用工程化构建应用,需要的是导入 <code>Vue</code> 和 <code>VueRouter</code>,然后要调用 <code>Vue.use(VueRouter)</code><br>那么,如果是非模块化 <code>vue</code> 使用 <code>vue-router</code> 应用的实现,是怎么样的呢? </p>
<p>🍭 下面是贴代码时间: