<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>肉饼王国</title>
    <description>在电气学院学习光学的精密机械专业的毕业生是一名软件爱好者，现在在从事电路设计工作。 肉饼王的个人博客。</description>
    <link>https://robincn.com/</link>
    <atom:link href="https://robincn.com/feed.xml" rel="self" type="application/rss+xml" />
    <pubDate>Thu, 16 Jan 2025 21:59:36 +0800</pubDate>
    <lastBuildDate>Thu, 16 Jan 2025 21:59:36 +0800</lastBuildDate>
    <generator>Jekyll v4.3.4</generator>
    
      <item>
        <title>好久不见-2025新年快乐</title>
        <description>&lt;h2 id=&quot;好久不见&quot;&gt;好久不见&lt;/h2&gt;

&lt;p&gt;看了看记录，确实是好久没有更新了。。。看 VPS 的日志，居然有580多天没有管过这个 VPS 了。趁着有时间，把 VPS 重装了一遍。&lt;/p&gt;

&lt;h2 id=&quot;近年来&quot;&gt;近年来&lt;/h2&gt;

&lt;p&gt;这些年又发生了很多。。。人到中年，家里用洋垃圾折腾了个 NAS ，看了看机箱购买记录，居然已经过去一年多了，淘宝店铺都倒闭了。&lt;/p&gt;

&lt;p&gt;很多东西现在也都布置在自己的 NAS 上了，回头整理下使用过程中的记录吧。&lt;/p&gt;

&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;这次 VPS 重装用了两个晚上，搭配好了之前常用的东西，哈哈，写这个也是测试下刚重新搭建的博客的更新的 hooks 是不是正常 - -&lt;/td&gt;
      &lt;td&gt; &lt;/td&gt;
      &lt;td&gt; &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;p&gt;虽然有很多笔记的备份，感觉还是应该整理下。&lt;/p&gt;

&lt;h2 id=&quot;新年好&quot;&gt;新年好&lt;/h2&gt;

&lt;p&gt;回头有空整理下近年来的笔记，考虑做成小教程，方便之后随时查看。再记录下近年来折腾 NAS 的记录等。还有学过大半的 React ，由于不咋用，基本都忘记了。回头把日常用到的东西还没忘记的内容整理下吧，毕竟我的主业还是硬件开发，哈哈。&lt;/p&gt;

&lt;p&gt;新的一年，说一句新年快乐！&lt;/p&gt;
</description>
        <pubDate>Fri, 17 Jan 2025 05:00:00 +0800</pubDate>
        <link>https://robincn.com/life/happy-new-year-2025/</link>
        <guid isPermaLink="true">https://robincn.com/life/happy-new-year-2025/</guid>
        
        <category>Life</category>
        
        
        <category>Life</category>
        
      </item>
    
      <item>
        <title>全栈开发从入门到放弃:1.b-JavaScript基础</title>
        <description>&lt;blockquote&gt;
  &lt;p&gt;本系列介绍：《全栈开发从入门到放弃》是本人学习如何使用JavaScript开发现代Web应用程序的过程记录。课程的重点是使用ReactJS构建单页面应用程序（SPA）。&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;本系列记录了本人学习过程中的要点，不成体系。如果你想深入学习，建议寻找官方教程 😃&lt;/p&gt;
&lt;/blockquote&gt;

&lt;hr /&gt;

&lt;p&gt;JavaScript标准的正式名称是&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;ECMAScript&lt;/code&gt;。由于浏览器不能支持所有JavaScript的最新特性，所以我们需要转译到一个更旧更兼容的版本。使用&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;create-react-app&lt;/code&gt;创建的应用已配置为使用&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Babel&lt;/code&gt;自动转译。&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Node.js&lt;/code&gt;是基于谷歌的 chrome V8 引擎的&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;JavaScript&lt;/code&gt;运行时环境。代码文件以 &lt;em&gt;.js&lt;/em&gt;结尾，通过 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;node filename.js&lt;/code&gt; 命令运行文件。&lt;/p&gt;

&lt;h2 id=&quot;变量variables&quot;&gt;变量(Variables)&lt;/h2&gt;

&lt;p&gt;在JavaScript中有以下几种定义变量的方法:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;let&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;y&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;y&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;10&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;y&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;sometext&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;4&lt;/span&gt;  &lt;span class=&quot;c1&quot;&gt;// cause an error&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;const&lt;/code&gt; 实际是定义了一个常量， &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;let&lt;/code&gt;定义了一个普通变量。推荐使用&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;let&lt;/code&gt;而不是&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;var&lt;/code&gt;。&lt;/p&gt;

&lt;h2 id=&quot;数组arrays&quot;&gt;数组(Arrays)&lt;/h2&gt;

&lt;p&gt;使用数组的示例如下：&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;length&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;])&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;即使使用const定义，也可以修改数组中的内容。因为数组是一个对象，数组变量指向这同一个对象。&lt;/p&gt;

&lt;p&gt;遍历元素的一种方法是使用 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;forEach&lt;/code&gt; ，如示例所示， &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;forEach&lt;/code&gt; 接收一个函数作为入参。forEach 为数组中的每个元素调用这个函数，并将单个项作为参数传递。&lt;/p&gt;

&lt;p&gt;使用&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;push&lt;/code&gt;方法可以添加元素。但推荐使用函数式编程的技巧。函数编程范型的一个特点就是使用不可变的数据结构。在React代码中，最好使用 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;concat&lt;/code&gt; 方法。它不向数组中添加元素，而是创建一个新数组，新数组中包含旧数组和新元素。&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t2&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;concat&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;t2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;map&lt;/code&gt;方法可创建新数组。&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;m1&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;m1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;此外，还可转换为不同的内容。&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;m2&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;m2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;还可使用解构赋值方式将数组中的单个元素赋值给变量。&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;first&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;second&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;rest&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;first&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;second&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;rest&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;例子中剩余的整数被“收集”到另一个数组中，分配给rest。&lt;/p&gt;

&lt;h2 id=&quot;对象objects&quot;&gt;对象(Objects)&lt;/h2&gt;

&lt;p&gt;一个使用对象的例子：&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;object1&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;Arto Hellas&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;age&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;35&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;education&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;PhD&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;object2&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;Full Stack web application development&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;level&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;intermediate studies&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;size&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;object3&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;first&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;Dan&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;last&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;Abramov&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;grades&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;department&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;Stanford University&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;// 对象元素的访问可通过.或[]进行&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;object1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;         &lt;span class=&quot;c1&quot;&gt;// Arto Hellas is printed&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;fieldName&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;age&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt; 
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;object1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;fieldName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;])&lt;/span&gt;    &lt;span class=&quot;c1&quot;&gt;// 35 is printed&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;// 可以动态添加对象属性&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;object1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;address&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;Helsinki&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;object1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;secret number&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;12341&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;函数functions&quot;&gt;函数（Functions）&lt;/h2&gt;

&lt;p&gt;函数定义的几种方式：&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p1&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p2&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;result&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;result&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;// 只有一个参数时可省略括号&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;square&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;// 只有一个表达式时可省略大括号&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;square&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// 该方法适合操作数组&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;tSquared&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;// 或可使用function关键字定义&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;product&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;b&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;result&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;product&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;// 或使用函数表达式&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;average&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return &lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;result&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;average&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;本课程推荐使用箭头语法。&lt;/p&gt;

&lt;h2 id=&quot;对象方法和this关键字&quot;&gt;对象方法和”this”关键字&lt;/h2&gt;

&lt;p&gt;尽量避免使用this关键字以防止问题。
使用 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;setTimeOut&lt;/code&gt;方法，避免问题的方法：&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;arto&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;Arto Hellas&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;greet&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;hello, my name is &lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;nf&quot;&gt;setTimeout&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;arto&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;greet&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1000&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// 使用bind来保留原始的this&lt;/span&gt;
&lt;span class=&quot;nf&quot;&gt;setTimeout&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;arto&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;greet&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;bind&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;arto&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1000&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;类classes&quot;&gt;类(Classes)&lt;/h2&gt;

&lt;p&gt;Javascript中的类非常像Java中的类，但其实质上仍然是Object。课程建议使用&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;hooks&lt;/code&gt;特性，所以不具体使用类语法。&lt;/p&gt;
</description>
        <pubDate>Sat, 19 Jun 2021 05:00:00 +0800</pubDate>
        <link>https://robincn.com/fullstack/fullstack-part1-b-JavaScript-basic/</link>
        <guid isPermaLink="true">https://robincn.com/fullstack/fullstack-part1-b-JavaScript-basic/</guid>
        
        <category>React</category>
        
        <category>全栈开发</category>
        
        <category>学习笔记</category>
        
        
        <category>FullStack</category>
        
      </item>
    
      <item>
        <title>全栈开发从入门到放弃:1.a-React基础</title>
        <description>&lt;blockquote&gt;
  &lt;p&gt;本系列介绍：《全栈开发从入门到放弃》是本人学习如何使用JavaScript开发现代Web应用程序的过程记录。课程的重点是使用ReactJS构建单页面应用程序（SPA）。&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;本系列记录了本人学习过程中的要点，不成体系。如果你想深入学习，建议寻找官方教程 😃&lt;/p&gt;
&lt;/blockquote&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;新建react应用&quot;&gt;新建React应用&lt;/h2&gt;

&lt;p&gt;创建一个React应用可用&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;create-react-app&lt;/code&gt;，如：&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;npx create-react-app part1
&lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;part1
npm start
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;组件component&quot;&gt;组件(component)&lt;/h2&gt;

&lt;p&gt;在使用React开发时，通常将需要渲染的内容定义为React组件。一个定义组件的示例如下：&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;10&lt;/span&gt;
  &lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;b&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;20&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return &lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Hello&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;world&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/p&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;plus&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;is&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/p&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/div&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;  &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;JavaScript中大括号中的代码会被计算，计算结果将嵌入到组件生成的HTML中。可渲染动态内容。&lt;/p&gt;

&lt;h2 id=&quot;jsx&quot;&gt;JSX&lt;/h2&gt;

&lt;p&gt;JSX 是 JavaScript 的语法扩展。在底层，React 组件返回的 JSX 会被&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Babel&lt;/code&gt;编译成 JavaScript 。&lt;/p&gt;

&lt;p&gt;JSX 是类XML语言，每个标签都需要关闭。如HTML中的&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;&amp;lt;br&amp;gt;&lt;/code&gt;在JSX中，写作&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;&amp;lt;br /&amp;gt;&lt;/code&gt;。&lt;/p&gt;

&lt;h2 id=&quot;多组件multiple-component&quot;&gt;多组件(Multiple component)&lt;/h2&gt;

&lt;p&gt;使用React编写组件很容易，定义的组件可以在其他组件中使用。通常应用的组件树顶部有个root组件叫App，但这也可修改。&lt;/p&gt;

&lt;h2 id=&quot;props-向组件传递数据&quot;&gt;props: 向组件传递数据&lt;/h2&gt;

&lt;p&gt;使用&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;props&lt;/code&gt;，可将数据传递给组件。可以有多个props值传递，如果props是JavaScript表达式，则需要使用花括号。&lt;/p&gt;

&lt;h2 id=&quot;一些注意事项&quot;&gt;一些注意事项&lt;/h2&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;React组件名称首字母必须大写&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;React组件内容通常需要包含&lt;strong&gt;一个根元素&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;如果不想在Dom树中看到多余的&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;div&lt;/code&gt;元素，可使用空元素包装组件的返回内容。&lt;/li&gt;
&lt;/ol&gt;
</description>
        <pubDate>Fri, 18 Jun 2021 06:25:00 +0800</pubDate>
        <link>https://robincn.com/fullstack/fullstack-part1-a-React-basic/</link>
        <guid isPermaLink="true">https://robincn.com/fullstack/fullstack-part1-a-React-basic/</guid>
        
        <category>React</category>
        
        <category>全栈开发</category>
        
        <category>学习笔记</category>
        
        
        <category>FullStack</category>
        
      </item>
    
      <item>
        <title>全栈开发从入门到放弃:0-Web应用的基本介绍</title>
        <description>&lt;blockquote&gt;
  &lt;p&gt;本系列介绍：《全栈开发从入门到放弃》是本人学习如何使用JavaScript开发现代Web应用程序的过程记录。课程的重点是使用ReactJS构建单页面应用程序（SPA）。&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;本系列记录了本人学习过程中的要点，不成体系。如果你想深入学习，建议寻找官方教程 😃&lt;/p&gt;
&lt;/blockquote&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;必要软件安装&quot;&gt;必要软件安装&lt;/h2&gt;

&lt;ol&gt;
  &lt;li&gt;Chrome 或 Firefox 开发版。&lt;/li&gt;
  &lt;li&gt;Git 和 GitHub。&lt;/li&gt;
  &lt;li&gt;Visual Studio Code。&lt;/li&gt;
  &lt;li&gt;Node.js&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Web开发准则&lt;/strong&gt;：始终打开开发者控制台。&lt;/p&gt;

&lt;h2 id=&quot;http-get&quot;&gt;HTTP GET&lt;/h2&gt;

&lt;p&gt;服务器和浏览器使用HTTP协议相互通信， 浏览器可使用 Get 方法发送请求。&lt;/p&gt;

&lt;h2 id=&quot;传统的网络应用&quot;&gt;传统的网络应用&lt;/h2&gt;

&lt;p&gt;由于含有变量，模板字符串是可运行的字符串。&lt;/p&gt;

&lt;p&gt;课程使用 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Node.js&lt;/code&gt; 和 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Express&lt;/code&gt; 创建Web服务器。&lt;/p&gt;

&lt;p&gt;使用 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Console&lt;/code&gt; 选项卡和 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;console.log&lt;/code&gt; 命令可以方便调试。&lt;/p&gt;

&lt;h2 id=&quot;事件处理和回调函数&quot;&gt;事件处理和回调函数&lt;/h2&gt;

&lt;p&gt;调用事件处理程序的机制在 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Javascript&lt;/code&gt; 中非常常见。事件处理函数被称为回调函数。应用代码时不直接调用函数本身，而是运行时浏览器会在事件发生的适当时间调用函数。&lt;/p&gt;

&lt;h2 id=&quot;文档对象模型document-object-model-dom&quot;&gt;文档对象模型(Document Object Model, DOM)&lt;/h2&gt;

&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;DOM&lt;/code&gt; 是一个 API， 它支持对web页面对应的元素树进行编程修改。&lt;/p&gt;

&lt;h2 id=&quot;从console中操作文档对象&quot;&gt;从console中操作文档对象&lt;/h2&gt;

&lt;p&gt;html 文档 DOM 树的最顶层节点称为文档对象(&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;document&lt;/code&gt;)。可以在控制台的console中操作文档对象。例如:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;list&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;getElementsByTagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;newElement&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;newElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;textContent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;Page manipulation from console is easy.是吧&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;appendChild&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;newElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;注意，上述更改只是更改浏览器页面，并没有将更改推送到服务器。&lt;/p&gt;

&lt;h2 id=&quot;层叠样式表cascading-style-sheets-css&quot;&gt;层叠样式表(Cascading Style Sheets, CSS)&lt;/h2&gt;

&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;CSS&lt;/code&gt; 是一种用来确定web应用外观的标记语言。&lt;/p&gt;

&lt;p&gt;CSS 中的类选择器用于选择页面中的某些部分，并对它们定义样式规则。例如：&lt;/p&gt;

&lt;div class=&quot;language-css highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nc&quot;&gt;.container&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;10px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;1px&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;solid&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;类选择器的定义始终以句点 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.&lt;/code&gt; 开头，并包含类的名称。&lt;/p&gt;

&lt;p&gt;CSS 属性可以添加到 HTML 元素中，例如：&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;container&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Notes&lt;span class=&quot;nt&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;HTML 元素也可以有 class 以外的属性。例如：&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;notes&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;上述代码中包含&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;id&lt;/code&gt;属性，JavaScript 代码可使用 id 来查找元素。同样可以在控制台的&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Elements&lt;/code&gt;中更改元素样式，这也不是永久性的。&lt;/p&gt;

&lt;h2 id=&quot;表单与http-post&quot;&gt;表单与HTTP POST&lt;/h2&gt;

&lt;p&gt;表单 Form 具有属性 action 和 method，例如：&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;form&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;action=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;/new_note&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;method=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;POST&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;input&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;type=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;note&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;br&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;input&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;type=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;submit&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;value=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Save&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/form&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;上述属性定义将表单作为一个 HTTP POST 请求提交到 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/new_note&lt;/code&gt; 地址。数据作为 POST 请求的&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;body&lt;/code&gt;发送到服务器。&lt;/p&gt;

&lt;p&gt;例如，下述服务器端代码可通过访问请求对象req的body来访问发送来的数据。&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;app&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;post&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;/new_note&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;req&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;res&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;notes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;req&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;note&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;res&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;redirect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;/notes&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;ajax&quot;&gt;AJAX&lt;/h2&gt;

&lt;p&gt;异步的JavaScript和XML(Asynchronous JavaScript and XML, AJAX) 是2005年2月引入的一个术语。它描述了一种新的革命性的方法，这种方法使用包含在 HTML 中的 JavaScript 来获取网页内容，而且不需要重新渲染页面。现在已经普遍应用。&lt;/p&gt;

&lt;h2 id=&quot;单页面应用&quot;&gt;单页面应用&lt;/h2&gt;

&lt;p&gt;单页面应用 Single-page application (SPA) 只从服务器获取一个HTML页面，内容由JavaScript在浏览器中执行操作。&lt;/p&gt;

&lt;h2 id=&quot;javascript库&quot;&gt;JavaScript库&lt;/h2&gt;

&lt;p&gt;JavaScript工具库操作页面更容易。jQuery因为它所谓的跨浏览器兼容性发展开来。&lt;/p&gt;

&lt;p&gt;由于SPA的发展，几种更现代的开发方式流行开来。先是&lt;a href=&quot;https://backbonejs.org/&quot;&gt;BackboneJS&lt;/a&gt;， 然后有&lt;a href=&quot;https://angularjs.org/&quot;&gt;AngularJS&lt;/a&gt;。现在流行的有&lt;a href=&quot;https://reactjs.org/&quot;&gt;React&lt;/a&gt;和&lt;a href=&quot;https://vuejs.org/&quot;&gt;Vue.js&lt;/a&gt;。&lt;/p&gt;

&lt;p&gt;此次学习课程中使用 React 和 &lt;a href=&quot;https://github.com/reactjs/redux&quot;&gt;Redux&lt;/a&gt; 库。&lt;/p&gt;

&lt;h2 id=&quot;全栈web开发&quot;&gt;全栈web开发&lt;/h2&gt;

&lt;p&gt;课程中将关注应用的所有部分: 从前端、后端到数据库。将使用 JavaScript 编写后端代码，使用 Node.js 运行时环境。&lt;/p&gt;
</description>
        <pubDate>Tue, 15 Jun 2021 06:25:00 +0800</pubDate>
        <link>https://robincn.com/fullstack/fullstack-part0-basic/</link>
        <guid isPermaLink="true">https://robincn.com/fullstack/fullstack-part0-basic/</guid>
        
        <category>React</category>
        
        <category>全栈开发</category>
        
        <category>学习笔记</category>
        
        
        <category>FullStack</category>
        
      </item>
    
      <item>
        <title>在VPS(CentOS)上自建Bitwarden_rs密码管理服务</title>
        <description>&lt;h2 id=&quot;0-背景&quot;&gt;0. 背景&lt;/h2&gt;

&lt;p&gt;LastPass 个人用户手机端和电脑端同步要收费了。。。也一直种草 Bitwarden 很久了，想着反正有个服务器，不如自己整一个密码管理服务。上&lt;a href=&quot;https://bitwarden.com/&quot;&gt;Bitwarden官网&lt;/a&gt;一看，最小需求也比我这小破站大呀。。。&lt;/p&gt;

&lt;p&gt;不过又看见有人用 Rust 重写了一个服务端&lt;a href=&quot;https://github.com/dani-garcia/bitwarden_rs&quot;&gt;bitwraden_rs&lt;/a&gt;，用的服务器资源并不多。索性自己也整一个，记录下过程。&lt;/p&gt;

&lt;h2 id=&quot;1-安装docker&quot;&gt;1. 安装docker&lt;/h2&gt;

&lt;p&gt;由于bitwarden_rs使用Docker镜像安装，参照&lt;a href=&quot;https://docs.docker.com/engine/install/centos/&quot;&gt;Docker官方介绍&lt;/a&gt; 安装docker。&lt;/p&gt;

&lt;h3 id=&quot;11-卸载旧版本&quot;&gt;1.1 卸载旧版本&lt;/h3&gt;

&lt;p&gt;其实不需要。。。。。&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;yum remove docker &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
                  docker-client &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
                  docker-client-latest &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
                  docker-common &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
                  docker-latest &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
                  docker-latest-logrotate &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
                  docker-logrotate &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
                  docker-engine
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;12-安装docker&quot;&gt;1.2 安装docker&lt;/h3&gt;

&lt;p&gt;可自行选择一种方式安装，我选择设置 repository 的方式。&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;首先设置源。&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;yum-config-manager &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;--add-repo&lt;/span&gt; &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
    https://download.docker.com/linux/centos/docker-ce.repo
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;ul&gt;
  &lt;li&gt;安装&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;yum &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;docker-ce docker-ce-cli containerd.io
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;ul&gt;
  &lt;li&gt;启动&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;systemctl start docker
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;ul&gt;
  &lt;li&gt;测试&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;docker run hello-world
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;ul&gt;
  &lt;li&gt;添加用户到 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;docker&lt;/code&gt; 组&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;gpasswd &lt;span class=&quot;nt&quot;&gt;-a&lt;/span&gt; king docker
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;2-域名解析设置&quot;&gt;2. 域名解析设置&lt;/h2&gt;

&lt;p&gt;依据自己的实际情况，设置域名解析。&lt;/p&gt;

&lt;p&gt;如解析 https://bitwarden.robincn.com 到 server_ip。&lt;/p&gt;

&lt;h2 id=&quot;3-安装bitwarden_rs&quot;&gt;3. 安装bitwarden_rs&lt;/h2&gt;

&lt;p&gt;参照 &lt;a href=&quot;https://github.com/dani-garcia/bitwarden_rs&quot;&gt;bitwarden_rs官方介绍&lt;/a&gt; 安装。&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;docker pull bitwardenrs/server:latest
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;4-规划转发规则并设置nginx&quot;&gt;4. 规划转发规则并设置nginx&lt;/h2&gt;

&lt;p&gt;根据我的小站情况，拟将所有访问 https://bitwarden.robincn.com 的全部转发至 8080 端口。docker 容器中运行 bitwarden_rs 服务并将容器内的80端口映射到主机的8080端口，容器内的3012端口映射到主机的3012端口。&lt;/p&gt;

&lt;h3 id=&quot;41-ssl证书设置&quot;&gt;4.1 ssl证书设置&lt;/h3&gt;

&lt;p&gt;和之前一样使用 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;acme.sh&lt;/code&gt; 生成并安装证书。&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;acme.sh &lt;span class=&quot;nt&quot;&gt;--issue&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;--dns&lt;/span&gt; dns_cf &lt;span class=&quot;nt&quot;&gt;-d&lt;/span&gt; bitwarden.robincn.com &lt;span class=&quot;nt&quot;&gt;--nginx&lt;/span&gt;
acme.sh &lt;span class=&quot;nt&quot;&gt;--install-cert&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;--nginx&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-d&lt;/span&gt; bitwarden.robincn.com &lt;span class=&quot;nt&quot;&gt;--key-file&lt;/span&gt; /etc/nginx/bitwardenrobincn/key.pem &lt;span class=&quot;nt&quot;&gt;--fullchain-file&lt;/span&gt; /etc/nginx/bitwardenrobincn/cert.pem &lt;span class=&quot;nt&quot;&gt;--reloadcmd&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;service nginx force-reload&quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;42-nginx设置&quot;&gt;4.2 nginx设置&lt;/h3&gt;

&lt;p&gt;修改 nginx 配置文件，将 bitwarden.robincn.com 的访问全部转发到主机的8080端口。&lt;/p&gt;

&lt;div class=&quot;language-vim highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;# &lt;span class=&quot;k&quot;&gt;vim&lt;/span&gt; &lt;span class=&quot;sr&quot;&gt;/etc/&lt;/span&gt;nginx/nginx&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;conf&lt;/span&gt;
# http&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; # 在http段内增加如下内容server

    upstream bitwardenrs&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;default &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; server localhost&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;8080&lt;/span&gt;;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    upstream bitwardenrs&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;ws&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; server localhost&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;3012&lt;/span&gt;;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
	
	# 所有访问都走https
    server &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;	
        listen &lt;span class=&quot;m&quot;&gt;80&lt;/span&gt;;
        listen &lt;span class=&quot;p&quot;&gt;[::]:&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;80&lt;/span&gt;;
        server_name bitwarden&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;robincn&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;com&lt;/span&gt;;
        &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;301&lt;/span&gt; https&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;//&lt;/span&gt;$host$request_uri;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

	# 转发对应端口到主机&lt;span class=&quot;m&quot;&gt;8080&lt;/span&gt;和&lt;span class=&quot;m&quot;&gt;3012&lt;/span&gt;
    server &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        listen &lt;span class=&quot;m&quot;&gt;443&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;ssl&lt;/span&gt; http2;
        listen &lt;span class=&quot;p&quot;&gt;[::]:&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;443&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;ssl&lt;/span&gt; http2;
        server_name bitwarden&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;robincn&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;com&lt;/span&gt;;

        ssl_certificate &lt;span class=&quot;s2&quot;&gt;&quot;/etc/nginx/passrobincn/cert.pem&quot;&lt;/span&gt;;
        ssl_certificate_key &lt;span class=&quot;s2&quot;&gt;&quot;/etc/nginx/passrobincn/key.pem&quot;&lt;/span&gt;;
        ssl_session_cache shared&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;SSL&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;m&lt;/span&gt;;
        ssl_session_timeout  &lt;span class=&quot;m&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;m&lt;/span&gt;;
        ssl_ciphers PROFILE&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;SYSTEM;
        ssl_prefer_server_ciphers &lt;span class=&quot;k&quot;&gt;on&lt;/span&gt;;
        ssl_protocols TLSv1&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;1&lt;/span&gt; TLSv1&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;2&lt;/span&gt; TLSv1&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;3&lt;/span&gt;;

        proxy_intercept_errors &lt;span class=&quot;k&quot;&gt;on&lt;/span&gt;;  # &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; error page render
        large_client_header_buffers &lt;span class=&quot;m&quot;&gt;2&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;k&lt;/span&gt;;   # 解决 Android 客户端同步问题

        # 解决网页加载问题
        gzip off;
        proxy_max_temp_file_size &lt;span class=&quot;m&quot;&gt;0&lt;/span&gt;;

        client_max_body_size &lt;span class=&quot;m&quot;&gt;128&lt;/span&gt;M;

        location / &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                proxy_set_header Host  $host;
                proxy_set_header X&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;Real&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;IP $remote_addr;
                proxy_set_header X&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;Forwarded&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;Proto $scheme;
                proxy_set_header X&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;Forwarded&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;For $proxy_add_x_forwarded_for;

                proxy_pass http&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;//&lt;/span&gt;bitwardenrs&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;default;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        location &lt;span class=&quot;sr&quot;&gt;/notifications/&lt;/span&gt;hub/negotiate &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                proxy_set_header Host  $host;
                proxy_set_header X&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;Real&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;IP $remote_addr;
                proxy_set_header X&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;Forwarded&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;Proto $scheme;
                proxy_set_header X&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;Forwarded&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;For $proxy_add_x_forwarded_for;

                proxy_pass http&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;//&lt;/span&gt;bitwardenrs&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;default;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        location &lt;span class=&quot;sr&quot;&gt;/notifications/&lt;/span&gt;hub &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header X&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;Real&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;IP $remote_addr;
                proxy_set_header Connection $http_connection;

                proxy_pass http&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;//&lt;/span&gt;bitwardenrs&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;ws&lt;/span&gt;;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;5-启动-bitwarden-并测试&quot;&gt;5. 启动 Bitwarden 并测试&lt;/h2&gt;

&lt;h3 id=&quot;51-启动与测试&quot;&gt;5.1 启动与测试&lt;/h3&gt;

&lt;p&gt;用命令行启动 Bitwarden 并通过网页添加用户进行基础测试。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;注意&lt;/strong&gt;本人将 Bitwarden 相关数据放在用户目录下。&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;docker run &lt;span class=&quot;nt&quot;&gt;-d&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;--name&lt;/span&gt; bitwarden &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;-v&lt;/span&gt; /home/king/bitwarden/data/:/data/ &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt; 8080:80 &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt; 3012:3012 &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;-e&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;LOG_FILE&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;/data/bitwarden.log &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;-e&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;WEBSOCKET_ENABLED&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;-e&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;WEB_VAULT_ENABLED&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;-e&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;SIGNUPS_ALLOWED&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;-e&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;DOMAIN&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;https://bitwarden.robincn.com &lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;
bitwardenrs/server:latest
&lt;span class=&quot;c&quot;&gt;# 返回docker的ID&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;字段说明如下&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;WEB_VAULT_ENABLED=true&lt;/code&gt;  开启网页端&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;SIGNUPS_ALLOWED=true&lt;/code&gt; 允许用户注册&lt;/li&gt;
  &lt;li&gt;以上两字段首次使用注册用户需要，之后可改为 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;false&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;如遇到问题，可使用以下命令查看相关日志。&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;docker ps
&lt;span class=&quot;c&quot;&gt;# 成功可看到STATUS中的 healthy ，确认PORTS映射关系无误&lt;/span&gt;
docker logs &lt;span class=&quot;k&quot;&gt;*&lt;/span&gt;ID&lt;span class=&quot;k&quot;&gt;*&lt;/span&gt;  &lt;span class=&quot;c&quot;&gt;# 查看docker启动日志&lt;/span&gt;
docker stop &lt;span class=&quot;k&quot;&gt;*&lt;/span&gt;ID&lt;span class=&quot;k&quot;&gt;*&lt;/span&gt;  &lt;span class=&quot;c&quot;&gt;# 停止docker实例&lt;/span&gt;
docker &lt;span class=&quot;nb&quot;&gt;rm&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;*&lt;/span&gt;ID&lt;span class=&quot;k&quot;&gt;*&lt;/span&gt;  &lt;span class=&quot;c&quot;&gt;# 删除docker实例&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;52-新建用户与导入数据&quot;&gt;5.2 新建用户与导入数据&lt;/h3&gt;

&lt;p&gt;启动成功后用浏览器访问 https://bitwarden.robincn.com 即可新建用户使用了。&lt;/p&gt;

&lt;p&gt;参照&lt;a href=&quot;https://bitwarden.com/help/article/import-data/&quot;&gt;官方说明&lt;/a&gt;导入数据。&lt;/p&gt;

&lt;h2 id=&quot;6-安装docker-compose并启动服务&quot;&gt;6. 安装Docker Compose并启动服务&lt;/h2&gt;

&lt;h3 id=&quot;61-安装&quot;&gt;6.1 安装&lt;/h3&gt;

&lt;p&gt;参照&lt;a href=&quot;https://docs.docker.com/compose/install/&quot;&gt;官方介绍&lt;/a&gt;安装 Docker Compose.&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;curl &lt;span class=&quot;nt&quot;&gt;-L&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;https://github.com/docker/compose/releases/download/1.28.2/docker-compose-&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;$(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;uname&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-s&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;$(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;uname&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-m&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-o&lt;/span&gt; /usr/local/bin/docker-compose

&lt;span class=&quot;nb&quot;&gt;sudo chmod&lt;/span&gt; +x /usr/local/bin/docker-compose

docker-compose &lt;span class=&quot;nt&quot;&gt;--version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;62-设置&quot;&gt;6.2 设置&lt;/h3&gt;

&lt;p&gt;在 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;data&lt;/code&gt; 目录下新建 Docker Compress 服务描述文件。&lt;/p&gt;

&lt;div class=&quot;language-vim highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;# &lt;span class=&quot;k&quot;&gt;vim&lt;/span&gt; &lt;span class=&quot;sr&quot;&gt;/home/&lt;/span&gt;king&lt;span class=&quot;sr&quot;&gt;/bitwarden/&lt;/span&gt;docker&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;compose&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;yml
&lt;span class=&quot;k&quot;&gt;version&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;3&quot;&lt;/span&gt;

services&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        bitwarden&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
                image&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; bitwardenrs/server
                container_name&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; bitwardenrs
                restart&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; always
                ports&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
                        &lt;span class=&quot;p&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;8080:80&quot;&lt;/span&gt;
                        &lt;span class=&quot;p&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;3012:3012&quot;&lt;/span&gt;
                volumes&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
                        &lt;span class=&quot;p&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/bw-data:/&lt;/span&gt;data
                environment&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
                        LOG_FILE&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;/data/bitwarden.log&quot;&lt;/span&gt;
                        WEBSOCKET_ENABLED&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;true&quot;&lt;/span&gt;
                        SIGNUPS_ALLOWED&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;false&quot;&lt;/span&gt;  # 关闭用户注册 
                        WEB_VAULT_ENABLED&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;false&quot;&lt;/span&gt;  # 关闭浏览器访问
                        DOMAIN&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;https://bitwarden.robincn.com&quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;63-启动服务&quot;&gt;6.3 启动服务&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;注意：首先关闭之前启动的Bitwarden&lt;/strong&gt;&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;docker stop &lt;span class=&quot;k&quot;&gt;*&lt;/span&gt;ID&lt;span class=&quot;k&quot;&gt;*&lt;/span&gt;
docker &lt;span class=&quot;nb&quot;&gt;rm&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;*&lt;/span&gt;ID&lt;span class=&quot;k&quot;&gt;*&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;使用 Docker Compose 启动服务。&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;cd&lt;/span&gt; /home/king/bitwarden/
docker-compose up &lt;span class=&quot;nt&quot;&gt;-d&lt;/span&gt;  &lt;span class=&quot;c&quot;&gt;# 启动服务&lt;/span&gt;
docker-compose down		&lt;span class=&quot;c&quot;&gt;# 关闭服务&lt;/span&gt;
docker-compose restart  &lt;span class=&quot;c&quot;&gt;# 重启服务&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;7-安装客户端与其他设置&quot;&gt;7. 安装客户端与其他设置&lt;/h2&gt;

&lt;h3 id=&quot;71-安装客户端&quot;&gt;7.1 安装客户端&lt;/h3&gt;

&lt;p&gt;参照&lt;a href=&quot;https://bitwarden.com/download/&quot;&gt;官网下载地址&lt;/a&gt;下载安装各平台的客户端和/或插件。&lt;/p&gt;

&lt;h3 id=&quot;72-其他设置&quot;&gt;7.2 其他设置&lt;/h3&gt;

&lt;p&gt;参照&lt;a href=&quot;https://github.com/dani-garcia/bitwarden_rs/wiki&quot;&gt;bitwarden_rs/wiki&lt;/a&gt; 进行其他设置(如fail2ban设置等)。&lt;/p&gt;

</description>
        <pubDate>Fri, 19 Feb 2021 06:25:00 +0800</pubDate>
        <link>https://robincn.com/linux/vps/setting-up-bitwarden-on-centos-vps/</link>
        <guid isPermaLink="true">https://robincn.com/linux/vps/setting-up-bitwarden-on-centos-vps/</guid>
        
        <category>Lifelong learning</category>
        
        <category>Bitwarden</category>
        
        <category>VPS</category>
        
        <category>Linux</category>
        
        <category>CentOS</category>
        
        
        <category>Linux</category>
        
        <category>VPS</category>
        
      </item>
    
      <item>
        <title>使用yum-cron自动更新CentOS系统</title>
        <description>&lt;p&gt;之前（大约十年前还在读书时）因为经常更新系统所以手写过crontab文件以实现自动更新。&lt;/p&gt;

&lt;p&gt;最近时常登陆VPS去更新系统就想起这事，结果一查发现CentOS有一种简单的方法——就是使用yum-cron。&lt;/p&gt;

&lt;h2 id=&quot;安装yum-cron&quot;&gt;安装yum-cron&lt;/h2&gt;
&lt;p&gt;使用yum-cron的第一步当然毫不例外是安装 - -&lt;/p&gt;

&lt;p&gt;就像安装其他应用一样&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;yum &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;yum-cron
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;设置&quot;&gt;设置&lt;/h2&gt;

&lt;p&gt;参照说明编辑&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/etc/yum/yum-cron.conf&lt;/code&gt;。&lt;/p&gt;

&lt;div class=&quot;language-vim highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;# sudo &lt;span class=&quot;k&quot;&gt;vim&lt;/span&gt; &lt;span class=&quot;sr&quot;&gt;/etc/&lt;/span&gt;yum/yum&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;cron&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;conf&lt;/span&gt;
apply_updates &lt;span class=&quot;p&quot;&gt;=&lt;/span&gt; yes  # 确保更新被安装
exclude &lt;span class=&quot;p&quot;&gt;=&lt;/span&gt; kernel* mysql*  # 自动更新排除的软件包
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;启用&quot;&gt;启用&lt;/h2&gt;
&lt;p&gt;编辑完成后，启用服务以使自动更新生效。&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;systemctl start yum-cron
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;systemctl &lt;span class=&quot;nb&quot;&gt;enable &lt;/span&gt;yum-cron
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

</description>
        <pubDate>Thu, 08 Oct 2020 06:25:47 +0800</pubDate>
        <link>https://robincn.com/linux/configure-vps-auto-update-using-yum-cron/</link>
        <guid isPermaLink="true">https://robincn.com/linux/configure-vps-auto-update-using-yum-cron/</guid>
        
        <category>VPS</category>
        
        <category>Linux</category>
        
        <category>CentOS</category>
        
        <category>yum</category>
        
        
        <category>Linux</category>
        
      </item>
    
      <item>
        <title>ssh挂起的解决办法</title>
        <description>&lt;p&gt;最近从WSL切换到WSL2之后发现无法ssh到VPS。
使用&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;-vv&lt;/code&gt;选项查看，发现最后挂起前提示：&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;debug2: channel 0: open confirm rwindow 0 rmax 32768
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;然后Google了一下，发现这其实是路由器的问题。
具体原因就是：
当某些路由器位于NAT之后使用OpenSSH时。
在会话建立期间，在输入密码或交换密钥后，OpenSSH会在IP数据报中设置TOS（服务类型）字段。
部分路由器会被阻塞，导致SSH会话被无限期挂起。表现上来看就是ssh命令很少起作用或根本不起作用。&lt;/p&gt;

&lt;p&gt;要解决这个问题其实也简单，临时方式就是在ssh命令后加选项&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;-o IPQoS=0x00&lt;/code&gt;。&lt;/p&gt;

&lt;p&gt;长期方式就是修改配置文件，修改&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;~/.ssh/config&lt;/code&gt;或者&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/etc/ssh/ssh_config&lt;/code&gt;都行。&lt;/p&gt;

&lt;div class=&quot;language-vim highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;# &lt;span class=&quot;k&quot;&gt;vim&lt;/span&gt; &lt;span class=&quot;sr&quot;&gt;/etc/&lt;/span&gt;ssh/ssh_config
Host *
  IPQoS &lt;span class=&quot;m&quot;&gt;0&lt;/span&gt;x00
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;P.S. 另一个不推荐的做法就是使用&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;ProxyCommand nc %h %p&lt;/code&gt;。&lt;/p&gt;
</description>
        <pubDate>Fri, 20 Mar 2020 06:15:00 +0800</pubDate>
        <link>https://robincn.com/wsl/ssh-hangs-or-freezes-indefinitely/</link>
        <guid isPermaLink="true">https://robincn.com/wsl/ssh-hangs-or-freezes-indefinitely/</guid>
        
        <category>Lifelong learning</category>
        
        <category>WSL2</category>
        
        <category>ssh</category>
        
        
        <category>WSL</category>
        
      </item>
    
      <item>
        <title>新建VPS并进行一些设置</title>
        <description>&lt;p&gt;今年过了一个难忘的年。。。&lt;/p&gt;

&lt;p&gt;珠海跨年之旅受疫情影响，提前结束。&lt;/p&gt;

&lt;p&gt;回来之后天天在家，天天陪孩子玩。晚上闲下来发现去年整的profit VPS用起来太慢了，看不存在网站视频也就380p，离1080p差远了。。。&lt;/p&gt;

&lt;p&gt;想起来之前的评论系统也没整，还有个cn域名也没用，就想着整个vps自建一个静态blog。。。&lt;/p&gt;

&lt;h2 id=&quot;购买vps并进行基本设置&quot;&gt;购买VPS并进行基本设置&lt;/h2&gt;

&lt;p&gt;其实profit也是够用了，不过眼瞅着快到期了，就想着换一个试试。对比了多家之后选择了Vultr的小VPS，首充送了50美刀，但是只有一个月的有效期，所以干脆买了一堆不同地方的VPS，测试完再删吧。&lt;/p&gt;

&lt;p&gt;VPS的具体购买方式网上有很多教程了，各大主机厂商也提供了很多教程，就不赘述了。&lt;/p&gt;

&lt;p&gt;Vultr官方提供了很多镜像选择，开始的适合还是和之前一样选择了FreeBSD，后来发现他们家有CenOS 8的官方镜像，就体验了下新版，由于笔记记得都是CentOS下的操作，所以以下介绍都按照CentOS 8来。&lt;/p&gt;

&lt;h3 id=&quot;1-修改密码并更新系统&quot;&gt;1. 修改密码并更新系统&lt;/h3&gt;

&lt;p&gt;VPS建好之后，用控制面板带的Console登录root账户，进行初步设置。&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# Change root passwd&lt;/span&gt;
passwd

&lt;span class=&quot;c&quot;&gt;# Update&lt;/span&gt;
yum update
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;2-初步设置ssh并添加常用普通用户&quot;&gt;2. 初步设置SSH并添加常用普通用户&lt;/h3&gt;

&lt;p&gt;更新完系统后就要进行ssh设置以便客户端登录操作了，具体步骤如下：&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;vim /etc/ssh/sshd_config
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;首先修改了一部分配置。&lt;/p&gt;

&lt;div class=&quot;language-vim highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;# &lt;span class=&quot;sr&quot;&gt;/etc/&lt;/span&gt;ssh/sshd_config
Port SSH_PORT_NUMBER  # 修改默认ssh端口
PermitRootLogin no # 禁止root用户登录
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;注意&lt;/strong&gt; 修改端口号后需要修改对应的防火墙设置。&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# SELinux 设置&lt;/span&gt;
semanage port &lt;span class=&quot;nt&quot;&gt;-a&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-t&lt;/span&gt; ssh_port_t &lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt; tcp SSH_PORT_NUMBER &lt;span class=&quot;c&quot;&gt;#SSH_PORT_NUMBER是上一步设置的ssh端口号&lt;/span&gt;
&lt;span class=&quot;c&quot;&gt;# firewall 设置&lt;/span&gt;
firewall-cmd &lt;span class=&quot;nt&quot;&gt;--zone&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;public &lt;span class=&quot;nt&quot;&gt;--add-port&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;SSH_PORT_NUMBER/tcp &lt;span class=&quot;nt&quot;&gt;--permanent&lt;/span&gt;
&lt;span class=&quot;c&quot;&gt;# 使能firewall设置&lt;/span&gt;
firewall-cmd &lt;span class=&quot;nt&quot;&gt;--reload&lt;/span&gt;
&lt;span class=&quot;c&quot;&gt;# 重启ssh服务&lt;/span&gt;
systemctl restart sshd  &lt;span class=&quot;c&quot;&gt;#restart ssh server&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;然后添加一个普通用户并设置密码。CentOS的adduser居然和useradd是一样的，囧，还是“小恶魔”的adduser好用 - -&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# 添加用户king并添加到wheel组中&lt;/span&gt;
useradd king &lt;span class=&quot;nt&quot;&gt;-G&lt;/span&gt; wheel &lt;span class=&quot;nt&quot;&gt;-U&lt;/span&gt;
passwd king
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;由于禁止了root通过ssh登录，所以可以安装sudo以便刚才添加的用户进行日常维护。（此步骤不是必须的）&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;yum &lt;span class=&quot;nb&quot;&gt;install sudo
&lt;/span&gt;visudo
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;参照文件注释编辑sudo的配置文件&lt;/p&gt;
&lt;div class=&quot;language-vim highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;# 允许wheel用户组以root身份运行所有命令
%wheel ALL&lt;span class=&quot;p&quot;&gt;=(&lt;/span&gt;ALL&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;h3 id=&quot;3-上传ssh公钥并完善ssh设置&quot;&gt;3. 上传SSH公钥并完善SSH设置&lt;/h3&gt;

&lt;p&gt;上述设置完成后，即可从客户端上传公钥文件,并用ssh方式登录服务器。&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# 上传公钥文件&lt;/span&gt;
ssh-copy-id &lt;span class=&quot;nt&quot;&gt;-i&lt;/span&gt; .ssh/xxx.pub king@SERVER_IP_ADDRESS &lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt; SSH_PORT_NUMBER
&lt;span class=&quot;c&quot;&gt;# ssh登录至服务器&lt;/span&gt;
ssh  &lt;span class=&quot;nt&quot;&gt;-i&lt;/span&gt; .ssh/xxx.pub king@SERVER_IP_ADDRESS &lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt; SSH_PORT_NUMBER
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;上述测试成功后，即可禁用密码登录，并关闭浏览器管理面板登录的Console。&lt;/p&gt;

&lt;div class=&quot;language-vim highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;# &lt;span class=&quot;sr&quot;&gt;/etc/&lt;/span&gt;ssh/sshd_config
# 禁用密码登录
PasswordAuthentication no
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;想用密钥+密码登录方式也可自行修改，然后重启ssh服务即可。&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;systemctl restart sshd
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;到这里服务器初步设置就基本完成了，之后的所有步骤都从客户端完成。&lt;/p&gt;

&lt;h2 id=&quot;其他设置&quot;&gt;其他设置&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;再次提醒&lt;/strong&gt; 以下的所有操作均在客户端完成，ssh登录方式如下：&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;ssh  &lt;span class=&quot;nt&quot;&gt;-i&lt;/span&gt; .ssh/xxx.pub king@SERVER_IP_ADDRESS &lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt; SSH_PORT_NUMBER
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;1-安装fail2ban&quot;&gt;1. 安装fail2ban&lt;/h3&gt;
&lt;p&gt;安装fail2ban并设置把一切尝试ssh登录错的都给禁半天。&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;yum &lt;span class=&quot;nb&quot;&gt;install&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-y&lt;/span&gt; epel-release
&lt;span class=&quot;c&quot;&gt;# 安装fail2ban&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;yum &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;fail2ban
&lt;span class=&quot;c&quot;&gt;# 修改fail2ban设置&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;vim /etc/fail2ban/jail.local
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;language-vim highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;# &lt;span class=&quot;sr&quot;&gt;/etc/&lt;/span&gt;fail2ban/jail&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;local
&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;DEFAULT&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
# Ban hosts &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;12&lt;/span&gt; hour&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
bantime &lt;span class=&quot;p&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;43200&lt;/span&gt;
findtime &lt;span class=&quot;p&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;600&lt;/span&gt;
maxretry &lt;span class=&quot;p&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;2&lt;/span&gt;

# Override &lt;span class=&quot;sr&quot;&gt;/etc/&lt;/span&gt;fail2ban&lt;span class=&quot;sr&quot;&gt;/jail.d/&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;00&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;firewalld&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;conf&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
banaction &lt;span class=&quot;p&quot;&gt;=&lt;/span&gt; iptables&lt;span class=&quot;p&quot;&gt;-&lt;/span&gt;multiport

&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;sshd&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
enabled &lt;span class=&quot;p&quot;&gt;=&lt;/span&gt; true
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;启动fail2ban服务并添加默认启动。&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;systemctl start fail2ban
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;systemctl &lt;span class=&quot;nb&quot;&gt;enable &lt;/span&gt;fail2ban
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;2-安装代理软件并设置&quot;&gt;2. &lt;del&gt;安装代理软件并设置&lt;/del&gt;&lt;/h3&gt;

&lt;p&gt;该部分笔记都有记录，不便于发表在blog中，概述如下：&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;在/etc/yum.repos.d中添加源，需要注意系统版本对应的源不同&lt;/li&gt;
  &lt;li&gt;更新并安装主程序和混淆插件&lt;/li&gt;
  &lt;li&gt;修改默认配置文件&lt;/li&gt;
  &lt;li&gt;测试安装与设置（由于使用多端口设置，不能使用ss-server，应该使用ss-manager)&lt;/li&gt;
  &lt;li&gt;创建自启动服务（需要修改***.service文件中的User等字段，和ExecStart等）&lt;/li&gt;
  &lt;li&gt;添加防火墙规则&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# Update firewall rule&lt;/span&gt;
firewall-cmd &lt;span class=&quot;nt&quot;&gt;--zone&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;public &lt;span class=&quot;nt&quot;&gt;--add-port&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;xxx1-xxx3/tcp &lt;span class=&quot;nt&quot;&gt;--permanent&lt;/span&gt;
firewall-cmd &lt;span class=&quot;nt&quot;&gt;--zone&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;public &lt;span class=&quot;nt&quot;&gt;--add-port&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;xxx1-xxx3/udp &lt;span class=&quot;nt&quot;&gt;--permanent&lt;/span&gt;
firewall-cmd &lt;span class=&quot;nt&quot;&gt;--reload&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;systemctl start YOURSERVICE
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;systemctl &lt;span class=&quot;nb&quot;&gt;enable &lt;/span&gt;YOURSERVICE
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;3-添加bbr支持&quot;&gt;3. 添加BBR支持&lt;/h3&gt;

&lt;p&gt;具体是啥可自行Google，不过Vultr的CenOS 8默认已经开啦。就从之前的笔记粘贴过来啦。&lt;/p&gt;

&lt;p&gt;开启BBR详细步骤如下，如果内核版本低于4.9需要更新内核，不想编译的添加源就行，老Gentoo用户表示不想多说什么了，哈哈&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;uname&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-r&lt;/span&gt;
&lt;span class=&quot;c&quot;&gt;# 版本号低于4.9需要更新内核并重启&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;rpm &lt;span class=&quot;nt&quot;&gt;--import&lt;/span&gt; https://www.elrepo.org/RPM-GPG-KEY-elrepo.org
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;rpm &lt;span class=&quot;nt&quot;&gt;-Uvh&lt;/span&gt; http://www.elrepo.org/elrepo-release-7.0-2.el7.elrepo.noarch.rpm
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;yum &lt;span class=&quot;nt&quot;&gt;--enablerepo&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;elrepo-kernel &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;kernel-ml &lt;span class=&quot;nt&quot;&gt;-y&lt;/span&gt;
&lt;span class=&quot;c&quot;&gt;# 默认启动项（grub2）&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;egrep ^menuentry /etc/grub2.cfg | &lt;span class=&quot;nb&quot;&gt;cut&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-f&lt;/span&gt; 2 &lt;span class=&quot;nt&quot;&gt;-d&lt;/span&gt; &lt;span class=&quot;se&quot;&gt;\&apos;&lt;/span&gt;  &lt;span class=&quot;c&quot;&gt;# 确保第一行就是新版内核并且版本号高于4.9&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;reboot
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;版本号高于4.9的可直接开启，具体步骤如下：&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# sudo echo &quot;net.core.default_qdisc=fq&quot; &amp;gt;&amp;gt; /etc/sysctl.conf&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&apos;net.core.default_qdisc=fq&apos;&lt;/span&gt; | &lt;span class=&quot;nb&quot;&gt;sudo tee&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-a&lt;/span&gt; /etc/sysctl.conf
&lt;span class=&quot;c&quot;&gt;# sudo echo &quot;net.ipv4.tcp_congestion_control=bbr&quot; &amp;gt;&amp;gt; /etc/sysctl.conf&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&apos;net.ipv4.tcp_congestion_control=bbr&apos;&lt;/span&gt; | &lt;span class=&quot;nb&quot;&gt;sudo tee&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-a&lt;/span&gt; /etc/sysctl.conf
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;sysctl &lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;测试一下吧&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;sysctl net.ipv4.tcp_available_congestion_control
&lt;span class=&quot;c&quot;&gt;# output should be:&lt;/span&gt;
net.ipv4.tcp_available_congestion_control &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; reno cubic bbr

&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;sysctl &lt;span class=&quot;nt&quot;&gt;-n&lt;/span&gt; net.ipv4.tcp_congestion_control
&lt;span class=&quot;c&quot;&gt;# output should be:&lt;/span&gt;
bbr

lsmod | &lt;span class=&quot;nb&quot;&gt;grep &lt;/span&gt;bbr
&lt;span class=&quot;c&quot;&gt;#output should be&lt;/span&gt;
tcp_bbr xxxx xx
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;后记&quot;&gt;后记&lt;/h2&gt;

&lt;p&gt;此次VPS设置设置说了个七七八八，就当是个记录吧。还有在VPS部署Git服务器等部分笔记，整理整理回头再发吧。。。&lt;/p&gt;

</description>
        <pubDate>Sun, 23 Feb 2020 21:22:21 +0800</pubDate>
        <link>https://robincn.com/linux/vps/setup-a-vps-and-configration/</link>
        <guid isPermaLink="true">https://robincn.com/linux/vps/setup-a-vps-and-configration/</guid>
        
        <category>Lifelong learning</category>
        
        <category>Vultr</category>
        
        <category>CentOS</category>
        
        <category>VPS</category>
        
        <category>Linux</category>
        
        
        <category>Linux</category>
        
        <category>VPS</category>
        
      </item>
    
      <item>
        <title>测试GitHub图床功能</title>
        <description>&lt;p&gt;最近工作还是很忙碌的，晚上回来之后就想折腾一会。发现国内的多说、友言之类都已经挂了，搜索过程中看到有人在用GitHub Issue 搭建评论系统，简直是人才啊。看着看着就看到用GitHub作图床的blog了。想到前几天GitHub 对个人用户功能扩容，想来微软爸爸也是不差钱的，用GitHub作图床也不是不行啊，今天建了个Repo测试一下。&lt;/p&gt;

&lt;h3 id=&quot;测试图片链接&quot;&gt;测试图片链接&lt;/h3&gt;
&lt;p&gt;&lt;img src=&quot;https://raw.githubusercontent.com/RobinKing/image_cache/master/robincn.com/blog-logo.png&quot; alt=&quot;测试图片&quot; /&gt;&lt;/p&gt;

&lt;p&gt;想到之后可以发一些截图之类的，这样确实是不错滴。&lt;/p&gt;

&lt;p&gt;想想我的擅长，好像就是各种平台下各类软件的安装和卸载，哈哈，但是这个好像不能当正事写出来哈。回头还是写一些简单的学习记录吧。争取早日开工～～～～～～～&lt;/p&gt;

</description>
        <pubDate>Thu, 24 Jan 2019 07:22:21 +0800</pubDate>
        <link>https://robincn.com/life/test-image-files-uploaded-to-github/</link>
        <guid isPermaLink="true">https://robincn.com/life/test-image-files-uploaded-to-github/</guid>
        
        <category>Lifelong learning</category>
        
        
        <category>Life</category>
        
      </item>
    
      <item>
        <title>新年快乐</title>
        <description>&lt;p&gt;给台式机整了一个SSD，感觉台式机也飞起来啦，哈哈哈～～～&lt;/p&gt;

&lt;p&gt;笔记本和台式机之间的Synergy也连起来了，一套键鼠走天下的日子又开始了。。。默认浏览器又换回了Chrome，配合着cVim用着也挺顺手的，没想到大G+居然也要关闭了。。。今年过滴着实艰难，好在这一年总算是过去了，今年一年都是蹭着各Cloud的新用户福利1美元或者0美元体验整的科学on net，哈哈。。。过完年不那么拮据了就可以整个VPS玩了～～～&lt;/p&gt;

&lt;p&gt;家里的小鱼已经繁衍了很多代了，鱼缸里也能算是密密麻麻了，哈哈～最近晚上天天都在微软模拟飞行X，感觉荒废了很多时间啊。。。&lt;/p&gt;

&lt;p&gt;明年还是要好好学习，还有很多事情需要解决呢～～～&lt;/p&gt;

&lt;p&gt;分清主次，逐个击破，哈哈！加油咯～～～&lt;/p&gt;

</description>
        <pubDate>Tue, 01 Jan 2019 06:52:21 +0800</pubDate>
        <link>https://robincn.com/life/happy-new-year/</link>
        <guid isPermaLink="true">https://robincn.com/life/happy-new-year/</guid>
        
        <category>Life</category>
        
        
        <category>Life</category>
        
      </item>
    
  </channel>
</rss>
