<?xml version="1.0" encoding="utf-8"?>
<search>
  <entry>
    <title>markdown常用格式一览</title>
    <url>/2020/07/27/md%E6%A0%BC%E5%BC%8F/</url>
    <content><![CDATA[<h1 id="常用markdown语法一览"><a href="#常用markdown语法一览" class="headerlink" title="常用markdown语法一览"></a>常用markdown语法一览</h1><blockquote>
<p>记录一些常用的markdown文档书写格式，以便于博客的书写，有使用到的新的语法即会更新此博客。</p>
</blockquote>
<h2 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h2><pre><code class="hljs clean"># h1
## h2
...
###### h6</code></pre>
<h2 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h2><ol>
<li><p>无序列表</p>
<pre><code class="hljs applescript">- <span class="hljs-built_in">list</span>
- <span class="hljs-built_in">list</span></code></pre></li>
<li><p>有序列表</p>
<pre><code class="hljs angelscript"><span class="hljs-number">1.</span> xxx
<span class="hljs-number">2.</span> xxx</code></pre>
<h2 id="多选框"><a href="#多选框" class="headerlink" title="多选框"></a>多选框</h2><pre><code class="hljs asciidoc"><span class="hljs-bullet">- </span>[] xxx</code></pre>
<h2 id="超链接"><a href="#超链接" class="headerlink" title="超链接"></a>超链接</h2><pre><code class="hljs markdown">[<span class="hljs-string">xxx</span>](<span class="hljs-link">https://www.baidu.com</span>)</code></pre>
<h2 id="图片"><a href="#图片" class="headerlink" title="图片"></a>图片</h2></li>
<li><p>可以使用html进行插入图片，附加内嵌css进行修饰</p>
<pre><code class="hljs routeros">&lt;img <span class="hljs-attribute">src</span>=<span class="hljs-string">""</span> <span class="hljs-attribute">style</span>=<span class="hljs-string">""</span> <span class="hljs-attribute">alt</span>=<span class="hljs-string">""</span>&gt;&lt;/ img&gt;</code></pre></li>
<li><p>md格式</p>
<pre><code class="hljs markdown">![<span class="hljs-string">文字说明</span>](<span class="hljs-link">图片链接</span>)</code></pre>
<h2 id="引用"><a href="#引用" class="headerlink" title="引用"></a>引用</h2><pre><code class="hljs markdown"><span class="hljs-quote">&gt; 这是一段引用</span></code></pre>
<h2 id="代码段"><a href="#代码段" class="headerlink" title="代码段"></a>代码段</h2><p>```</p>
<p> 这里是一段代码</p>
<p> 这里是一段代码</p>
<p> ```</p>
 <pre><code class="hljs arcade"><span class="hljs-string">`这里是单行代码`</span></code></pre>



</li>
</ol>
]]></content>
      <categories>
        <category>blog</category>
        <category>markdown</category>
      </categories>
      <tags>
        <tag>markdown</tag>
      </tags>
  </entry>
  <entry>
    <title>博客模版</title>
    <url>/2020/01/01/%E6%A8%A1%E7%89%88/</url>
    <content><![CDATA[<h1 id="博客模版"><a href="#博客模版" class="headerlink" title="博客模版"></a>博客模版</h1><blockquote>
<p>记录下写博客的一般顺序以及博客基本格式</p>
</blockquote>
<h2 id="写博客"><a href="#写博客" class="headerlink" title="写博客"></a>写博客</h2><pre><code class="hljs yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">首页显示的大标题</span>
<span class="hljs-attr">date:</span> <span class="hljs-number">2020</span><span class="hljs-string">/01/01（可选，不设置会自动生成）</span>
<span class="hljs-attr">index_img:</span> <span class="hljs-string">/img/xxx.jpg(可选，首页左侧配图)</span>
<span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/xxx.jpg(文章页顶部大图)</span>
<span class="hljs-attr">categories:</span>
<span class="hljs-bullet">-</span> <span class="hljs-string">分类1</span>
<span class="hljs-attr">tags:</span>
<span class="hljs-bullet">-</span> <span class="hljs-string">标签1</span>
<span class="hljs-attr">excerpt:</span> <span class="hljs-string">首页显示博客内容简介（添加简介方式1）</span>
<span class="hljs-meta">---</span></code></pre>
<blockquote>
<p>添加简介方式2:在需要在简介中显示的内容后添加<code>&lt;!-- more --&gt;</code>即可</p>
</blockquote>
<h2 id="博客部署"><a href="#博客部署" class="headerlink" title="博客部署"></a>博客部署</h2><p>一步到位：<code>hexo g -d</code></p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="https://hexo.fluid-dev.com/docs/guide/#%E9%A6%96%E9%A1%B5" target="_blank" rel="noopener">fluid配置文档</a></p>
]]></content>
      <categories>
        <category>blog</category>
      </categories>
  </entry>
  <entry>
    <title>更换电脑后博客的相关设置</title>
    <url>/2020/08/07/%E6%9B%B4%E6%8D%A2%E7%94%B5%E8%84%91%E5%90%8E%E5%8D%9A%E5%AE%A2%E8%AE%BE%E7%BD%AE/</url>
    <content><![CDATA[<h1 id="博客迁移"><a href="#博客迁移" class="headerlink" title="博客迁移"></a>博客迁移</h1><blockquote>
<p>有原来的文件，只需要在新电脑上进行部署即可</p>
</blockquote>
<h2 id="大概步骤"><a href="#大概步骤" class="headerlink" title="大概步骤"></a>大概步骤</h2><ol>
<li>生成并添加ssh部署密钥</li>
</ol>
<ul>
<li>Macos<ul>
<li>打开终端输入<code>ls -al ~/.ssh</code>,查看目录下是否有id_rsa和id_rsa.pub文件，如果有则说明已经存在ssh密钥，直接打开文件进行复制即可</li>
<li>上面步骤如果没有两个文件，则需要进行生成，在终端中输入<code>ssh-keygen -t rsa -C &quot;自己的Email地址&quot;</code></li>
<li>生成后，在终端中输入<code>cat ~/.ssh/id_rsa.pub</code>查看ssh密钥</li>
<li>最后打开github&gt;setting&gt;ssh中进行添加部署密钥即可</li>
</ul>
</li>
</ul>
<ol start="2">
<li>配置hexo、git、node等</li>
</ol>
<ul>
<li>在本地博客文件夹下打开终端，在终端中依次输入<code>npm install hexo</code>、<code>npm install</code>、<code>npm install hexo-deployer-git</code><blockquote>
<p>npm速度可能较慢，可以进行换源，也可以下载cnpm代替npm进行下载</p>
</blockquote>
</li>
</ul>
<ol>
<li>部署完成，之后就可以进行<code>hexo g -d</code>进行部署博文了</li>
</ol>
]]></content>
      <categories>
        <category>blog</category>
      </categories>
  </entry>
  <entry>
    <title>ajax前后端数据交互</title>
    <url>/2020/09/05/ajax%E5%89%8D%E5%90%8E%E7%AB%AF%E6%95%B0%E6%8D%AE%E4%BA%A4%E4%BA%92/</url>
    <content><![CDATA[<h1 id="ajax前后端数据交互"><a href="#ajax前后端数据交互" class="headerlink" title="ajax前后端数据交互"></a>ajax前后端数据交互</h1><blockquote>
<p>通过一次和后端的对接，记录一下学习到的知识点，项目中我使用的是jquery，原因会在后面说到。</p>
</blockquote>
<h2 id="使用原生js来设置ajax"><a href="#使用原生js来设置ajax" class="headerlink" title="使用原生js来设置ajax"></a>使用原生js来设置ajax</h2><pre><code class="javascript">var xhr = null;
if(window.XMLHttpRequest){//判断当前浏览器是否支持XMLHttpRequest()
  xhr = window.XMLHttpRequest();
}else{//IE5,IE6
  xhr = window.ActiveXObject(&#39;Microsoft.XMLHttp&#39;);
}
xhr.open(&#39;get&#39;,&#39;xxx&#39;,false);//设置请求信息
xhr.setRequestHeader(&quot;Content-Type&quot;,&quot;application/x-www-form-urlencoded&quot;);//设置请求头信息
xhr.send();//发送请求（可以添加参数）
xhr.onreadystatechange = function(){//检测响应状态码
  if(xhr.readystate === 4 &amp;&amp; xhr.status === 200){//响应成功
    var result = xhr.responseText; //获取服务器的响应内容
  }
}</code></pre>
<blockquote>
<p>ps：</p>
<p>一、readystate:状态值（0～4）表示的是ajax请求过程到了哪一步的标志，与是否请求成功无关</p>
<p>0:初始化</p>
<p>1:开始发送请求</p>
<p>2:请求发送成功</p>
<p>3:开始接受服务端响应</p>
<p>4:完成响应</p>
<p>二、Status:Http状态码</p>
<p>1xx：信息响应类</p>
<p>2xx：处理成功类</p>
<p>3xx：重定向响应类</p>
<p>4xx：客户端错误</p>
<p>5xx：服务端错误</p>
<p>Eg：以下列举一些常见的响应状态码：</p>
<p>200：交易成功 </p>
<p>403：请求不允许</p>
<p>404：在当前url未找到资源</p>
<p>500:服务器内部错误</p>
</blockquote>
<h2 id="jquery中的ajax"><a href="#jquery中的ajax" class="headerlink" title="jquery中的ajax"></a>jquery中的ajax</h2><pre><code class="javascript">$(function(){
    $.ajax({
        url: &quot;xxx&quot;,//后端提供的接口地址
    async: true,//是否异步（主要看请求的资源是否会影响后面的操作来进行选择）
    dataType: &quot;json&quot;,//前端传给后端数据的格式，一般来说都会是一个json格式的数据
    data: user,//前端传给后端的数据
    success: function(data){//这里的success是在ajax请求完成后触发的，function参数里的data是后端返回的数据
      if(data == &#39;false&#39;){//用于判断这一次的ajax请求是否成功
        alert(&#39;失败&#39;);
      }else{
        alert(&#39;成功&#39;);
      }
    }
  })
})</code></pre>
<p>jquery对于ajax进行了很好的封装，可以从使用上可以看得出，上手很快，参数也是一目了然，接下来可以一起来看看jquery是如何封装ajax的。</p>
<h3 id="jquery封装下的ajax"><a href="#jquery封装下的ajax" class="headerlink" title="jquery封装下的ajax"></a>jquery封装下的ajax</h3><blockquote>
<p>待更新</p>
</blockquote>
]]></content>
      <categories>
        <category>ajax</category>
        <category>后端</category>
      </categories>
      <tags>
        <tag>ajax</tag>
      </tags>
  </entry>
  <entry>
    <title>在hexo博客中嵌入codepen</title>
    <url>/2020/07/27/hexo+codepen/</url>
    <content><![CDATA[<h1 id="在hexo博客中嵌入codepen"><a href="#在hexo博客中嵌入codepen" class="headerlink" title="在hexo博客中嵌入codepen"></a>在hexo博客中嵌入codepen</h1><blockquote>
<p>在以往记录时，使用的都是纯代码加上效果图，但是不怎么方便好用，这里尝试使用codepen进行代码的演示。</p>
</blockquote>
<h2 id="方式一"><a href="#方式一" class="headerlink" title="方式一"></a>方式一</h2><p>一、在<a href="www.codepen.io">codepen</a>中创建一个账户</p>
<p>二、创建一个Pen，编写完成后进行保存</p>
<p>三、在右下角找到<code>Embed</code>，点击后拉到最下面选择<code>iframe</code>，<code>html</code>都可以（一定要保存后才会出现）</p>
<p>四、直接将代码粘贴到hexo博客中即可显示</p>
<p>这是使用iframe进行渲染的：</p>
<iframe height="265" style="width: 100%;" scrolling="no" title="LYNegXE" src="https://codepen.io/cactus1949/embed/LYNegXE?height=265&theme-id=light&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/cactus1949/pen/LYNegXE' target="_blank" rel="noopener">LYNegXE</a> by cactus1949
  (<a href='https://codepen.io/cactus1949' target="_blank" rel="noopener">@cactus1949</a>) on <a href='https://codepen.io' target="_blank" rel="noopener">CodePen</a>.
</iframe>
这是html代码进行渲染的：

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="cactus1949" data-slug-hash="LYNegXE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="LYNegXE">
  <span>See the Pen <a href="https://codepen.io/cactus1949/pen/LYNegXE" target="_blank" rel="noopener">
  LYNegXE</a> by cactus1949 (<a href="https://codepen.io/cactus1949" target="_blank" rel="noopener">@cactus1949</a>)
  on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<h2 id="方式二"><a href="#方式二" class="headerlink" title="方式二"></a>方式二</h2><blockquote>
<p>安装官方的插件，用官方提供的语法进行插入</p>
</blockquote>
<p>一、安装官方的插件<br><code>npm install hexo-codepen --save</code><br><code>yarn add hexo-codepen</code></p>
<blockquote>
<p>如果运行完<code>yarn add hexo-codepen</code>报错，可能是没有安装yarn包管理的插件，可以运行<code>npm install yarn -g</code>进行安装</p>
</blockquote>
<p><img src="https://s1.ax1x.com/2020/09/07/wuynCd.png" alt="wuynCd.png"> </p>
<p>二、用法待更新</p>
<blockquote>
<p>感觉直接使用生成的代码就可以，官方的插件还不会使用，见谅，如果有使用过的可以教教我具体的操作。</p>
</blockquote>
]]></content>
      <categories>
        <category>blog</category>
        <category>hexo</category>
        <category>codepen</category>
      </categories>
      <tags>
        <tag>hexo</tag>
        <tag>codepen</tag>
      </tags>
  </entry>
  <entry>
    <title>正则表达式自测及总结</title>
    <url>/2020/09/07/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</url>
    <content><![CDATA[<h1 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h1><blockquote>
<p>以下测试使用的网站为：<a href="https://regex101.com/" target="_blank" rel="noopener">regex101</a></p>
</blockquote>
<h2 id="前文"><a href="#前文" class="headerlink" title="前文"></a>前文</h2><p>正则表达式在处理文件，验证表单信息时常常使用，你是否也在使用它的时候不管它的意思，只要百度到能用的就用了，虽然在使用上可能不会遇到什么问题，但是当你理解了其中的意思，在看现成的代码时可以进行学习以及修改，让他可以无限的符合自己的需求，何乐而不为呢。</p>
<h2 id="正则表达式-1"><a href="#正则表达式-1" class="headerlink" title="正则表达式"></a>正则表达式</h2><p>在js中使用的是RegExp类型来支持正则表达式</p>
<p>语法：var expression = /pattern/flags</p>
<p>flags(标志)：一个表达式可以包含一个或多个flags</p>
<p>pattern(模式)：可以包含字符、限定符、分组、反向引用、向前查找</p>
<h3 id="flags"><a href="#flags" class="headerlink" title="flags"></a>flags</h3><ol>
<li>/g：全局模式</li>
<li>/m：多行模式</li>
<li>/i：不区分大小写</li>
</ol>
<h3 id="pattern："><a href="#pattern：" class="headerlink" title="pattern："></a>pattern：</h3><ol>
<li>/xxx/: 直接匹配<code>xxx</code></li>
<li>/[0-9]/: 可以匹配0-9的某个数字（[]方括号内是某个范围匹配例如[0-9]、[a-z]）</li>
<li>/[0-9]*/: 可以匹配零个或多个数字（星号表示零个或多个）</li>
<li>/^[0-9]/: 可以匹配非数字（^表示非，否定）</li>
<li>/[1|2]/: 可以匹配1或者2（｜表示或者）</li>
<li>/./: 可以匹配单个任意字符</li>
<li>/a?/: 可以匹配零个或一个a</li>
<li>/[0-9]+/: 可以匹配一个或者多个数字（+表示一个或多个）</li>
<li>/3{4}/: 可以匹配四个连续的3</li>
<li>/3{4,}/: 可以匹配四个或者四个以上的3</li>
<li>/3{4,6}/: 可以匹配四个到六个连续的3</li>
<li>/^xxx$/: 开头^ 结尾$</li>
<li>/aaa(?=bbb)/: 正向肯定预查，匹配aaabbb中的aaa</li>
<li>/aaa(?!bbb)/: 正向否定预查，匹配除了aaabbb中的aaa其余的aaa</li>
<li>/(?&lt;=aaa)bbb/: 反向肯定预查，匹配aaabbb中的bbb</li>
<li>/(?&lt;!aaa)bbb/: 反向否定预查，匹配除了aaabbb中的bbb其余bbb</li>
</ol>
<p>一下是一些常见的替换的字符：</p>
<ol>
<li>\s：空白    \S：非空白</li>
<li>\d：阿拉伯数字    \D：非阿拉伯数字</li>
<li>\w：字母、数字或下划线    \W：非字母、数字或下划线</li>
<li>\b：字符边界    \B：非字符边界</li>
</ol>
<h3 id="小测试"><a href="#小测试" class="headerlink" title="小测试"></a>小测试</h3><p>这里有几个需求，可以进行学习的检测，在输入框内输入设计好的正则表达式，在后面的测试框内输入想要测试的数据，判断是否正确。（以下方法都不唯一，也可以自己在测试网站<a href="https://regex101.com/" target="_blank" rel="noopener">regex101</a>上测试）</p>
<ol>
<li>在一群妖怪中救出唐僧(1.直接匹配唐僧2.匹配除唐僧外所有的妖怪，这里不要忘记“妖怪”后面带的字母或者数字)<ol>
<li>测试数据：妖怪A妖怪A妖怪1妖怪A妖怪A妖怪C妖怪A妖怪A妖怪A妖怪A妖怪A妖怪A妖怪A妖怪Y妖怪A妖怪Y妖怪T妖怪R妖怪E妖怪A妖怪A妖怪B妖怪D唐僧妖怪A妖怪C妖怪A妖怪A妖怪A妖怪A妖怪G妖怪A妖怪A妖怪V妖怪A妖怪A妖怪A妖怪U妖怪A妖怪A妖怪A妖怪A妖怪A妖怪C妖怪A妖怪C妖怪A妖怪A妖怪A妖怪A妖怪A</li>
</ol>
</li>
<li>换源，下面有一段视频链接，需要将其中的CN进行更换为HK，对于需要更换的CN进行匹配，请设计出相对应的正则表达式使之成功换源<ol>
<li>原链接（目前没有找到可以换源的测试链接，这个是个假链接）：<a href="https://log2.musical.ly/service/2/app_log/?version_code=10.8.1&amp;pass-region=1&amp;pass-route=1&amp;language=zh&amp;app.name=musical_ly&amp;vid=37111EC4-2618-4BD3-BD30-39324B52F6FB&amp;app_version=10.8.1&amp;carrier_region=CN&amp;is_,my_cn=1&amp;channel=App%20Store&amp;mcc_,mnc=46000&amp;device_id=6645470638472295942&amp;tz_,offset=288,00&amp;account_region=KR&amp;sys_region=CN&amp;aid=1233&amp;screen._width=750&amp;uoo=0&amp;openudid=4a5bbbd1eCN9c660f3a793f2cada5f315309571e&amp;os_,api=18&amp;ac=WIFI&amp;os_version=12.1.4&amp;app,_language=zh-Hant&amp;tz_name=Asia/CNShanghai&amp;device_platform=iphone&amp;build_CN,number=108101&amp;device_,type=iPhone9,1&amp;iid=6679029519735613909&amp;idfa=DB32F26F-616F-1264-9674-D6ED5119A072&amp;mas=01a2346c93daaf7f7ff09020c0aabd6fc9b6ed007d5fb843130f" target="_blank" rel="noopener">https://log2.musical.ly/service/2/app_log/?version_code=10.8.1&amp;pass-region=1&amp;pass-route=1&amp;language=zh&amp;app.name=musical_ly&amp;vid=37111EC4-2618-4BD3-BD30-39324B52F6FB&amp;app_version=10.8.1&amp;carrier_region=CN&amp;is_,my_cn=1&amp;channel=App%20Store&amp;mcc_,mnc=46000&amp;device_id=6645470638472295942&amp;tz_,offset=288,00&amp;account_region=KR&amp;sys_region=CN&amp;aid=1233&amp;screen._width=750&amp;uoo=0&amp;openudid=4a5bbbd1eCN9c660f3a793f2cada5f315309571e&amp;os_,api=18&amp;ac=WIFI&amp;os_version=12.1.4&amp;app,_language=zh-Hant&amp;tz_name=Asia/CNShanghai&amp;device_platform=iphone&amp;build_CN,number=108101&amp;device_,type=iPhone9,1&amp;iid=6679029519735613909&amp;idfa=DB32F26F-616F-1264-9674-D6ED5119A072&amp;mas=01a2346c93daaf7f7ff09020c0aabd6fc9b6ed007d5fb843130f</a></li>
<li>提示：不是所有CN都要替换，只有以_region=开头以&amp;结尾的CN需要更换</li>
</ol>
</li>
<li>设计一个电话号码的正则表达式，用于测试用户是否输入了正确的电话号码格式<ol>
<li>要求：手机号大家应该都了解，这里不过多介绍</li>
</ol>
</li>
<li>设计一个邮箱账号的正则表达式，用于测试用户是否输入了正确的邮箱账号格式<ol>
<li>同手机号</li>
</ol>
</li>
</ol>
<p>好啦，到这里，百分之八十的正则表达式就已经可以看懂了，网上还有很多大佬写的正则表达式可以更好的匹配以及在实际应用中使用，多学多看。</p>
]]></content>
      <categories>
        <category>FE</category>
        <category>正则</category>
      </categories>
      <tags>
        <tag>正则</tag>
      </tags>
  </entry>
  <entry>
    <title>移动端输入法和底部的冲突解决</title>
    <url>/2020/09/08/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%BE%93%E5%85%A5%E6%B3%95%E5%92%8C%E5%BA%95%E9%83%A8%E7%9A%84%E5%86%B2%E7%AA%81%E8%A7%A3%E5%86%B3/</url>
    <content><![CDATA[<h1 id="移动端输入法和底部的冲突解决"><a href="#移动端输入法和底部的冲突解决" class="headerlink" title="移动端输入法和底部的冲突解决"></a>移动端输入法和底部的冲突解决</h1><blockquote>
<p>在用原生写一个移动端的app时，遇到了一个问题，在设置了一个搜索栏的同时页面底部有导航栏，并且点击搜索栏输入并没有跳转到其他页面，结果在测试输入时发现底部导航栏出现在了输入法的上方</p>
</blockquote>
<h2 id="分析原因"><a href="#分析原因" class="headerlink" title="分析原因"></a>分析原因</h2><p>我猜想是窗口大小改变了，从原来的大视图缩小为小视图+键盘大小，给导航栏设置的<code>position: fixed;bottom: 0;</code>也确实还生效，只不过显示屏大小改变了。</p>
<h2 id="尝试解决"><a href="#尝试解决" class="headerlink" title="尝试解决"></a>尝试解决</h2><p><code>window.onresize</code>可以监听窗口大小变化，如果窗口大小变化则调用函数，示例如下：</p>
<pre><code class="javascript">window.onresize = function(){
    alert(1);
}</code></pre>
<p>如果只是判断窗口大小改变可能还不足够确定是不是输入法的出现导致的，为了确保是，那么还需要加一个判断，判断当前的视图高度比之前的低即可</p>
<pre><code class="javascript">var oldHeight = window.screen.height;
window.onresize = function(){
    var currentHeight = window.screen.height;
    if(currentHeight&lt;oldHeight){
        alert(1);
    }
}</code></pre>
<p>现在可以判断出，此时输入法导致了屏幕视图大小的改变，那么如何修改导航栏呢，这里需要重新看一看<code>position</code>的各个值的含义：</p>
<p><img src="https://s1.ax1x.com/2020/09/08/wKI8J0.jpg" alt="positon属性值" style="width:80%;"></img></p>
<p>在上面可以看出，此时其实只要把导航栏移出我们的视线即可，这样方法就变多了，你可以使用<code>absolute</code>定位或者<code>fixed</code>将它移出视图外，也可以把<code>position</code>的属性改为<code>static</code>、<code>relative</code>都可以</p>
<h2 id="结论"><a href="#结论" class="headerlink" title="结论"></a>结论</h2><p>解决方法：</p>
<p>检测到视图大小变化了后，</p>
<ol>
<li>使用<code>absolute</code>定位或者<code>fixed</code>将它移出视图外</li>
<li>或者直接将<code>position</code>的属性改为<code>static</code>或者<code>relative</code></li>
</ol>
<blockquote>
<p>ps：这让我想起了之前学习建网站时，logo图标是显示在视图内的，但logo图标的文字是设置在了视图之外，好像是为了搜索此网站时，增加匹配值。</p>
</blockquote>
]]></content>
      <categories>
        <category>FE</category>
      </categories>
      <tags>
        <tag>移动端</tag>
        <tag>前端</tag>
      </tags>
  </entry>
  <entry>
    <title>node的修行--第一天</title>
    <url>/2020/09/18/node%E7%9A%84%E4%BF%AE%E8%A1%8C--%E7%AC%AC%E4%B8%80%E5%A4%A9/</url>
    <content><![CDATA[<h1 id="node的修行–第一天"><a href="#node的修行–第一天" class="headerlink" title="node的修行–第一天"></a>node的修行–第一天</h1><blockquote>
<p>运行环境：macOS Catalina</p>
<p>遇到的问题：nvm、node、npm等安装后，重新打开terminal执行时报command not found<a href="#deal">解决方法</a></p>
</blockquote>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
<p>补充一些新姿势，可以</p>
</blockquote>
<h3 id="nvm"><a href="#nvm" class="headerlink" title="nvm"></a>nvm</h3><p>nvm（nodejs version manger），nodejs的版本管理，可以很轻松的下载、切换不同版本的nodejs，对于不同的项目需求可以进行快速切换运行项目。</p>
<h3 id="npm"><a href="#npm" class="headerlink" title="npm"></a>npm</h3><p>npm（nodejs package manger），nodejs包管理器，方便使用者对于一些包的下载使用。</p>
<h3 id="shell"><a href="#shell" class="headerlink" title="shell"></a>shell</h3><p>Shell是linux系统下的交互式工具，可以帮助用户启动程序，管理文件以及运行的进程。</p>
<p>在mac中可以打开terminal使用shell命令</p>
<p>可以在terminal中输入<code>echo $SHELL</code>查看系统默认shell是什么版本（在最新的catalina上，shell版本为zsh），如果需要更换可以参考<a href="https://support.apple.com/zh-cn/HT208050" target="_blank" rel="noopener">官网链接</a>。</p>
<h2 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h2><p>在跟着教程安装配置好nvm后，当我重新打开一个terminal准备开始第一个练手项目时发现，输入nvm、node、npm等都直接给出<code>command not found: xxx</code>，这让我有点摸不着头脑，明明安装成功了，为什么无法使用呢，经过查找后才了解到，这里缺失了很重要的一步，那就是配置环境，没有配置环境是无法找到对应的文件的，网上有着不同的说法:</p>
<p>第一种是在~/.bash_prifile中添加以下两行内容（如果没有此文件，新建一个），保存后执行<code>source ~/.bash_profile</code> </p>
<pre><code>export NVM_DIR=&quot;/Users/yourname/.nvm&quot;
[ -s &quot;$NVM_DIR/nvm.sh&quot; ] &amp;&amp; . &quot;$NVM_DIR/nvm.sh&quot; # This loads nvm</code></pre><p>第二种是在~/.bash_profile中添加以下内容：</p>
<pre><code>export NVM_DIR=&quot;/Users/yourname/.nvm&quot;
[ -s &quot;$NVM_DIR/nvm.sh&quot; ] &amp;&amp; \. &quot;$NVM_DIR/nvm.sh&quot;  # This loads nvm
[ -s &quot;$NVM_DIR/bash_completion&quot; ] &amp;&amp; \. &quot;$NVM_DIR/bash_completion&quot;  # This loads nvm bash_completion</code></pre><p>有趣的是我在第一遍尝试时，直接将给出的代码复制粘贴了进去，结果依然是不行，回过头查看给出的几行代码中才发现，有路径是写的默认路径，作者也没有明确给出提示更换路径，这里将第一行中的路径更改为<code>&quot;$HOME/.nvm&quot;</code>即可，再执行文件后，可以使用了，但是当我重新打开一个terminal时，问题又一次出现了，那么现在问题好解决了，只要每次都自动执行<code>source ~/.bash_profile</code>这行代码就可以了，那么方法就是，在~/.zshrc文件中，添加一行<code>source ~/.bash_profile</code>即可解决。</p>
<h2 id="解决方法："><a href="#解决方法：" class="headerlink" title="解决方法："></a>解决方法：<span id="deal"></span></h2><ul>
<li><p>打开~/.bash_profile添加以下代码：</p>
<pre><code>export NVM_DIR=&quot;$HOME/.nvm&quot;
[ -s &quot;$NVM_DIR/nvm.sh&quot; ] &amp;&amp; \. &quot;$NVM_DIR/nvm.sh&quot;  # This loads nvm</code></pre></li>
<li><p>在terminal中输入<code>source ~/.bash_profile</code></p>
</li>
<li><p>打开~/.zshrc添加一行<code>source ~/.bash_profile</code></p>
</li>
</ul>
<blockquote>
<p>ps:如果没有上述的两个文件，新建即可</p>
</blockquote>
]]></content>
      <categories>
        <category>FE</category>
        <category>node</category>
      </categories>
      <tags>
        <tag>node</tag>
      </tags>
  </entry>
  <entry>
    <title>在Mac上配置apache，mysql，php的环境</title>
    <url>/2020/09/27/%E5%9C%A8mac%E4%B8%AD%E9%85%8D%E7%BD%AEapache%E3%80%81mysql%E3%80%81php%20/</url>
    <content><![CDATA[<h1 id="在Mac上配置apache，mysql，php的环境"><a href="#在Mac上配置apache，mysql，php的环境" class="headerlink" title="在Mac上配置apache，mysql，php的环境"></a>在Mac上配置apache，mysql，php的环境</h1><blockquote>
<p>版本：MacOS Catalina 10.15.6</p>
</blockquote>
<p>mac系统一般自带apache和php，只需要简单命令开启即可</p>
<h2 id="apache"><a href="#apache" class="headerlink" title="apache"></a>apache</h2><pre><code>sudo apachectl start; //开启apahce服务
sudo apachectl restart; //重启apache服务
sudo  apahcectl stop; //关闭apache服务</code></pre><p>当开启apache服务后，打开浏览器输入：<code>localhost</code>如果出现<code>It Works!</code>表示成功开启服务。</p>
<p><img src="https://s1.ax1x.com/2020/09/27/0FL1Gn.jpg" alt="0FL1Gn.jpg"></p>
<h2 id="php"><a href="#php" class="headerlink" title="php"></a>php</h2><p>开启php，需要修改apache的配置文件，将php模块启用</p>
<ol>
<li>在终端中输入<code>sudo vim /etc/apahce2/httpd.conf</code></li>
<li>查找以<code>LoadModule php...</code>开头的一句，去掉前面的#（#为注释作用）</li>
<li>修改完后保存退出（esc&gt;<code>:wq</code>&gt;回车）</li>
</ol>
<p>这里我们需要修改默认的apahce文件夹目录，原来默认的文件夹在<code>/Library/WebServer/Documents</code>，该目录是隐藏的，操作不方便，自定义一个文件夹，修改默认路径指向</p>
<ol>
<li><p>在终端中输入<code>sudo vim /etc/apache2/httpd.conf</code></p>
</li>
<li><p>找到以下两行</p>
<ol>
<li><pre><code>DocumentRoot &quot;Library/WebServer/Documents&quot;
&lt;Directory &quot;Library/WebServer/Documents&quot;&gt;</code></pre></li>
</ol>
</li>
<li><p>将上述两行中双引号中的路径修改为自定文件夹的路径并保存</p>
</li>
<li><p>重启apache服务（<code>sudo apacheclt restart</code>）</p>
</li>
</ol>
<p>在自定义文件夹中新建文件index.php，内容如下：</p>
<pre><code class="php">&lt;?php phpinfo()?&gt;</code></pre>
<p>打开浏览器，输入localhost/index.php，如果出现的是php的相关信息页面，恭喜成功。</p>
<h2 id="mysql"><a href="#mysql" class="headerlink" title="mysql"></a>mysql</h2><p>最后我们开始mysql的安装配置</p>
<p>在终端中输入<code>brew install mysql</code>,坐等安装完成即可</p>
<p>成功安装后，在终端中输入<code>mysql -u root</code>，初始状态默认是没有密码的</p>
<p>进入后可以通过以下命令来进行设置root用户密码</p>
<pre><code class="mysql">use mysql;
alter user &#39;root&#39;@&#39;localhost&#39; identified with mysql_native_password by &#39;你的密码&#39;;
flush privileges;</code></pre>
<p>设置完成后<code>quit</code>，重新登陆测试是否成功</p>
<h2 id="phpmyadmin"><a href="#phpmyadmin" class="headerlink" title="phpmyadmin"></a>phpmyadmin</h2><p>安装好mysql后，在<a href="https://www.phpmyadmin.net/downloads/" target="_blank" rel="noopener">phpMyAdmin官网</a>中下载，下载好后解压，重命名为phpmyadmin，移动到自定义文件夹下，在浏览器中输入<code>localhost/phpadmin/</code>可以看到以下登陆界面，使用root用户登陆即可</p>
<p><img src="https://s1.ax1x.com/2020/09/27/0FLRde.png" alt="0FLRde.png"></p>
<p>如果登陆不进去有可能是配置文件的问题，打开phpmyadmin文件夹下的config.inc.php文件，如果有相似的文件重命名为config.inc.php，在文件中找到以下几行并进行设置</p>
<pre><code class="php">$cfg[&#39;Servers&#39;][$i][&#39;host&#39;] = &#39;127.0.0.1&#39;;
$cfg[&#39;Servers&#39;][$i][&#39;controluser&#39;] = &#39;root&#39;;（这里的用户名必须为root）
$cfg[&#39;Servers&#39;][$i][&#39;controlpass&#39;] = &#39;你自定的密码&#39;;</code></pre>
]]></content>
      <categories>
        <category>FE</category>
        <category>Mac</category>
      </categories>
      <tags>
        <tag>mac</tag>
      </tags>
  </entry>
  <entry>
    <title>api+vutrl服务器搭建</title>
    <url>/2020/10/07/api%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%90%AD%E5%BB%BA/</url>
    <content><![CDATA[<h1 id="api-vutrl服务器搭建"><a href="#api-vutrl服务器搭建" class="headerlink" title="api+vutrl服务器搭建"></a>api+vutrl服务器搭建</h1><blockquote>
<p>在最近学习过程中，找到了个好玩的网站，他会提供免费的api进行测试练习（ <a href="https://jsonplaceholder.typicode.com/" target="_blank" rel="noopener">跳转查看</a>），在后来要个可以获取到歌曲的接口，在查找后，发现了<a href="https://binaryify.github.io/NeteaseCloudMusicApi/#/" target="_blank" rel="noopener">网易云音乐api</a>、<a href="https://jsososo.github.io/QQMusicApi/#/" target="_blank" rel="noopener">QQ音乐api</a>，在下面演示中使用到的是qq音乐api</p>
</blockquote>
<h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><p>需要有一个服务器，当然任何平台的都可以，这里我使用的是<a href="https://my.vultr.com/" target="_blank" rel="noopener">vutrl</a>。</p>
<ol>
<li>购买服务器</li>
<li>下载一个ftp软件，用来连接远程服务器并互传文件</li>
<li>下载xshell等可以连接远程服务器的软件，用来通过命令对服务器进行操作</li>
</ol>
<h2 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h2><ol>
<li><p>使用git下载项目，解压</p>
<pre><code class="git">git clone git@github.com:jsososo/QQMusicApi.git</code></pre>
</li>
<li><p>通过ftp软件连接远程服务器</p>
</li>
<li><p>将整个项目放入根文件夹下（/root/）</p>
</li>
<li><p>使用xshell进行连接远程服务器，执行以下命令</p>
<ol>
<li>首先运行项目需要先安装node<pre><code>sudo yum install epel-release
sudo yum install nodejs</code></pre></li>
<li>进入到项目文件夹下运行项目<pre><code>ls //通过ls查看当前目录下文件
cd QQMusicapi //转到api项目下
npm install //下载依赖
npm start //运行项目</code></pre></li>
</ol>
</li>
</ol>
<p>到这里大部分的部署工作已经完成，但是当访问时还是不行，这是因为虽然对应端口开启了服务，但是对外并没有开启服务，需要以下步骤进行开启端口</p>
<blockquote>
<p>这里需要注意，修改后端口开关状态后，一定要重启防火墙，一定要重启防火墙，一定要重启防火墙</p>
</blockquote>
<pre><code>//查看3300端口是否开启（yes/no）
firewall-cmd --query-port=3300/tcp --zone=public 
//开启3300端口
firewall-cmd --zone=public --add-port=3300/tcp --permanent
//重启防火墙
firewall-cmd --reload</code></pre><p>开启对应的端口，并重启防火墙后，进行开启服务，此时可以正常使用了</p>
<h2 id="后台运行"><a href="#后台运行" class="headerlink" title="后台运行"></a>后台运行</h2><p>前面实现了手动运行，但是断开连接后，接口就无法使用了，这时就需要后台一直运行这个进程</p>
<p>这里使用到screen</p>
<p>连接远程服务器后，输入screen命令，如果找不到命令的话需要下载</p>
<pre><code>yum install screen</code></pre><p>安装好后，输入<code>screen -S yourname</code>，这时会打开一个窗口，在这里进入到项目文件夹下，通过<code>npm start</code>运行项目，此时关闭连接即可</p>
]]></content>
      <categories>
        <category>FE</category>
        <category>api</category>
        <category>node&#39;s</category>
      </categories>
      <tags>
        <tag>api</tag>
      </tags>
  </entry>
</search>