search.xml

<?xml version="1.0" encoding="utf-8"?>
<search>
  <entry>
    <title>IIS部署cesium文档</title>
    <url>/2022/12/07/cesium/da39cf3f3db8/</url>
    <content><![CDATA[<h1 id="部署效果"><a href="#部署效果" class="headerlink" title="部署效果"></a>部署效果</h1><p><a id="DeploymentEffect">部署效果</a></p>
<p><img src="https://files.catbox.moe/7iosdt.png" alt="IIS部署cesium文档"></p>
<h1 id="IIS"><a href="#IIS" class="headerlink" title="IIS"></a>IIS</h1><p>  <img src="https://files.catbox.moe/kng7w5.png" alt="iis界面截图"></p>
<p>  IIS，全称Internet infomation services、是微软官方的一款网站管理工具。</p>
<h1 id="cesium文件"><a href="#cesium文件" class="headerlink" title="cesium文件"></a>cesium文件</h1><p>前端开发需要用到cesium.js库文件的话、可以通过<a href="https://github.com/CesiumGS/cesium/releases/download/1.100/Cesium-1.100.zip">官方链接：https://github.com/CesiumGS/cesium/releases/download/1.100/Cesium-1.100.zip</a>进行下载。</p>
<p>当然会存在网速较慢的情况导致下载失败、你也可以通过百度网盘链接进行下载：</p>
<div class="note danger modern"><p> <a href="https://pan.baidu.com/s/1TckAoWkY1s7-58QbPIQKRQ?pwd=yozo">链接：https://pan.baidu.com/s/1TckAoWkY1s7-58QbPIQKRQ?pwd=yozo</a><br>提取码：yozo </p>
</div>



<p>下载文件解压缩之后、主要文件内容如下：<br><img src="https://files.catbox.moe/uiw3dt.png" alt="下载解压缩文件目录截图"></p>
<p>我们需要部署的文件夹路径为：<strong>Cesium-1.100/Build/Documentation</strong></p>
<p>其中包含的即为cesium官方文档的全部文件。我们可以将它放置到一个自定义文件夹中，方便后续引入。<br><img src="https://files.catbox.moe/mbok9m.png" alt="cesium官方文档documention文件夹"></p>
<h1 id="win11系统基本配置"><a href="#win11系统基本配置" class="headerlink" title="win11系统基本配置"></a>win11系统基本配置</h1><p>所有文件、准备就绪以后，我们首先需要打开IIS服务。</p>
<ol>
<li>在win11电脑上找到：<strong>Windows功能</strong></li>
<li>按图勾选对应功能：<br><img src="https://files.catbox.moe/sdeogh.png" alt="IIS所需Windows系统功能配置"></li>
<li>安装完毕后、就可以通过IIS新建网站了。</li>
</ol>
<h1 id="新建网站"><a href="#新建网站" class="headerlink" title="新建网站"></a>新建网站</h1><ul>
<li><p>通过Windows搜索框，搜索IIS即可出现IIS应用、管理员模式打开后，于左侧“网站”字样上点击鼠标右键<br><img src="https://files.catbox.moe/8yza23.png" alt="IIS、新建网站、鼠标右键截图"></p>
</li>
<li><p><img src="https://files.catbox.moe/g2bely.png" alt="IIS添加网站配置"></p>
</li>
</ul>
<p>之后启动、会出现503的情况：<br><img src="https://files.catbox.moe/f6ionn.png" alt="503的情况"></p>
<p>解决方案：<br><img src="https://files.catbox.moe/cui8fq.png" alt="503解决方案"></p>
<h1 id="访问"><a href="#访问" class="headerlink" title="访问"></a>访问</h1><p><a href="http://localhost:8088/">http://localhost:8088</a></p>
<p><a href="#DeploymentEffect">部署效果</a></p>
]]></content>
      <categories>
        <category>cesium</category>
      </categories>
      <tags>
        <tag>cesium</tag>
      </tags>
  </entry>
  <entry>
    <title>TypeScript入门教程(一)</title>
    <url>/2021/09/24/TypeScript/854698b90236/</url>
    <content><![CDATA[<h1 id="TypeScript学习"><a href="#TypeScript学习" class="headerlink" title="TypeScript学习"></a>TypeScript学习</h1><p>  TypeScript 的发展已经深入到前端社区的方方面面了，任何规模的项目都或多或少得到了 TypeScript 的支持。同时vue3在经过vue2之后的发展过程中采用了TypeScript进行了重构，也让使用vue作为主力开发框架的开发者们，需要学习TypeScript来适应日常的开发过程。</p>
<p>  同时也有赖于TypeScript这门语言的优点:</p>
<ol>
<li>完全兼容于JavaScript</li>
<li>适用于任何规模</li>
</ol>
<p>  使得我们的开发的代码能够更加严谨和健壮！</p>
<span id="more"></span>
<h2 id="学习内容及教程推荐"><a href="#学习内容及教程推荐" class="headerlink" title="学习内容及教程推荐"></a>学习内容及教程推荐</h2><ol>
<li><a href="https://ts.xcatliu.com/introduction/what-is-typescript.html">TypeScript入门教程</a>  中文文档，很容易阅读和理解，对于新手十分友好</li>
<li><a href="https://www.typescriptlang.org/docs/handbook/intro.html">typescript中文官网–手书</a> 英文文档，阅读体验对国人不是很友好</li>
<li><a href="https://www.tslang.cn/docs/home.html">typescript中文文档教程</a>   当前最新typescript版本为 “typescript”: “^4.3.2”,文档最新版本只更新到v3.1版本，是有滞后的。</li>
</ol>
<h2 id="除了实现-ECMAScript-标准之外，TypeScript-团队也推进了诸多语法提案"><a href="#除了实现-ECMAScript-标准之外，TypeScript-团队也推进了诸多语法提案" class="headerlink" title="除了实现 ECMAScript 标准之外，TypeScript 团队也推进了诸多语法提案"></a>除了实现 ECMAScript 标准之外，TypeScript 团队也推进了诸多语法提案</h2><h3 id="可选链操作符（-）"><a href="#可选链操作符（-）" class="headerlink" title="可选链操作符（?.）"></a>可选链操作符（?.）</h3><pre><code>  参考链接: https://zh.javascript.info/optional-chaining
</code></pre>
<h3 id="空值合并操作符"><a href="#空值合并操作符" class="headerlink" title="空值合并操作符"></a>空值合并操作符</h3><pre><code>  参考链接: https://zh.javascript.info/nullish-coalescing-operator
</code></pre>
<h3 id="throw表达式"><a href="#throw表达式" class="headerlink" title="throw表达式"></a>throw表达式</h3><pre><code>  throw 语句抛出一个错误。
</code></pre>
<p>当错误发生时， JavaScript 会停止执行并抛出错误信息。</p>
<p>描述这种情况的技术术语是：JavaScript 将抛出一个错误。</p>
<p>throw 语句创建自定义错误。</p>
<p>技术术语是： 抛出异常。</p>
<p>异常可以是 JavaScript 字符串、数字、逻辑值或对象：</p>
<h3 id="正则匹配索引"><a href="#正则匹配索引" class="headerlink" title="正则匹配索引"></a>正则匹配索引</h3><h2 id="typescript的安装"><a href="#typescript的安装" class="headerlink" title="typescript的安装"></a>typescript的安装</h2><h3 id="使用命令行工具"><a href="#使用命令行工具" class="headerlink" title="使用命令行工具"></a>使用命令行工具</h3><figure class="highlight cmake"><table><tr><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> -g typescript<br></code></pre></td></tr></table></figure>
<h3 id="hello-ts"><a href="#hello-ts" class="headerlink" title="hello.ts"></a>hello.ts</h3><p>  1.新建一个简单函数：hello.ts</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript">  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params">person: <span class="hljs-built_in">string</span></span>) </span>&#123;<br>  <span class="hljs-keyword">return</span> <span class="hljs-string">&#x27;hello,&#x27;</span>+ person;<br><br>&#125;<br><span class="hljs-keyword">let</span> user = <span class="hljs-string">&#x27;tom&#x27;</span>;<br><span class="hljs-built_in">console</span>.log(sayHello(user));<br></code></pre></td></tr></table></figure>
<p>  2.安装好typescript后，在命令行终端键入以下命令： <strong>tsc hello.ts</strong></p>
<p>  即可看到显示的hello.js文件</p>
<p>  <img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20210924160047d.png" alt="hello.ts"><br>  <img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20210924160612hellojs.png" alt="hello.js"></p>
<blockquote>
<p>TypeScript 只会在编译时对类型进行静态检查，如果发现有错误，编译的时候就会报错。而在运行时，与普通的 JavaScript 文件一样，不会对类型进行检查。</p>
</blockquote>
<p>  简单来说，typescript主要是在编译过程中检查错误的存在，在没有进行其他设置的情况下，即使错误，也会继续生成相应的js文件，当然这对于使用typescript的用户来说是需要避免的，开发着需要在ts编译阶段报错时终止(ts文件→js文件)这一过程，需要进行以下<strong><strong>配置</strong></strong></p>
<p>  可以在 tsconfig.json 中配置 noEmitOnError 即可。关于 tsconfig.json，<a href="https://segmentfault.com/a/1190000021421461?utm_source=tag-newest">参考思否教程</a>。</p>
<h1 id="typescript基础"><a href="#typescript基础" class="headerlink" title="typescript基础"></a>typescript基础</h1><h2 id="原始数据类型"><a href="#原始数据类型" class="headerlink" title="原始数据类型"></a>原始数据类型</h2><p>   原始数据类型现今总共有：  7种 = 5种 + 2种<br>   5种： 布尔值，数值，字符串，null, undefined<br>   2种： Symbol (ES6新类型)； BigInt(ES10新类型) </p>
<h3 id="布尔值"><a href="#布尔值" class="headerlink" title="布尔值"></a>布尔值</h3><figure class="highlight lasso"><table><tr><td class="code"><pre><code class="hljs lasso"><span class="hljs-keyword">let</span> isDone: <span class="hljs-built_in">boolean</span> = <span class="hljs-literal">false</span>;<br></code></pre></td></tr></table></figure>

<p>  很明显可以正常编译,那么采用构造函数的形式呢？</p>
<figure class="highlight lasso"><table><tr><td class="code"><pre><code class="hljs lasso"><span class="hljs-keyword">let</span> createdByNewBoolean: <span class="hljs-built_in">boolean</span> = <span class="hljs-literal">new</span> <span class="hljs-built_in">Boolean</span>(<span class="hljs-number">1</span>);<br></code></pre></td></tr></table></figure>

<p><a href="https://www.typescriptlang.org/zh/play#code/DYUwLgBAxgTiCGYQBMBCBPAciA7qg9vqPAHYBcEARocSRALwQm4QFEIkAUAjAJQDcQA">代码预览—布尔值</a></p>
<blockquote>
<p> error TS2322: Type ‘Boolean’ is not assignable to type ‘boolean’.<br>  ‘boolean’ is a primitive, but ‘Boolean’ is a wrapper object. Prefer using ‘boolean’ when possible.</p>
</blockquote>
<blockquote>
<p>Boolean 是对应布尔值的引用类型。要创建一个 Boolean 对象，就使用 Boolean 构造函数并传入<br>true 或 false</p>
</blockquote>
<p>即通过构造函数new Boolean(1)的结果实际是布尔值对象，而不是布尔值，所以会出现类型错误，理解原始布尔值和 Boolean 对象之间的区别非常重要，强烈建议永远不要使用后者.</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> createdByNewBoolean: <span class="hljs-built_in">Boolean</span> = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Boolean</span>(<span class="hljs-number">1</span>);<br></code></pre></td></tr></table></figure>

<p><a href="https://www.typescriptlang.org/zh/play#code/DYUwLgBAxgTiCGYQBMBCBPAciA7qg9vqPAHYBcEBRCJEAvBCbpYcSQBQCMAlANxA">代码预览—布尔对象</a></p>
<h3 id="数字"><a href="#数字" class="headerlink" title="数字"></a>数字</h3><figure class="highlight maxima"><table><tr><td class="code"><pre><code class="hljs maxima"><span class="hljs-built_in">let</span> decLiteral: number = <span class="hljs-number">6</span>;<br><span class="hljs-built_in">let</span> hexLiteral: number = <span class="hljs-number">0xf00d</span>;<br>// ES6 中的二进制表示法<br><span class="hljs-built_in">let</span> binaryLiteral: number = <span class="hljs-number">0b1010</span>;<br>// ES6 中的八进制表示法<br><span class="hljs-built_in">let</span> octalLiteral: number = <span class="hljs-number">0o744</span>;<br><span class="hljs-built_in">let</span> notANumber: number = NaN;<br>...<br></code></pre></td></tr></table></figure>

<p><a href="https://www.typescriptlang.org/zh/play#code/DYUwLgBAJiDGAyBLMIBOBDYAuCA7ArgLYBGaEAvBAGwDcAsAFCiQAWIAHkihtnkaagoQADOwBmw4VHoMA9LIgBRAMpUIgWjlAIW6AYuUDb8YDYlQBYRgLk9AqzaNmEYolzpUATy5pMOAiTKVhxAIzDfM+SVVDU1Aa0UDE3MmcAgAe1gwTCceV34PEViAdgAWbJlLXFiwAEEAOTTUVPdBSlL0UvyYmzEbZHty6qqBIQBJXBbcNpogA">代码预览—数字</a></p>
<h3 id="void-null-undfined"><a href="#void-null-undfined" class="headerlink" title="void \ null \ undfined"></a>void \ null \ undfined</h3><pre><code>在typescript中没有空值的概念，遇到这种情况可以采用void来标识没有返回值的函数   （划重点：没有返回值的函数）
</code></pre>
<figure class="highlight actionscript"><table><tr><td class="code"><pre><code class="hljs actionscript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">alertName</span><span class="hljs-params">()</span>: void </span>&#123;<br>    alert(<span class="hljs-string">&#x27;My name is Tom&#x27;</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<pre><code>声明一个void类型的变量是没有什么用处的，因为之后你只能将它赋值为null或者undfined（只在 --strictNullChecks 未指定时）：
注意是变量，对于没有返回值的函数还是有必要的
</code></pre>
<blockquote>
<p>undefined 和 null 两个空类型的设计，使用上不方便，所以 通过strictNullChecks严格校验类型，让代码更安全</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript">  <span class="hljs-comment">// 两个空类型</span><br>  <span class="hljs-keyword">let</span> u: <span class="hljs-literal">undefined</span> = <span class="hljs-literal">undefined</span><br>  <span class="hljs-keyword">let</span> n: <span class="hljs-literal">null</span> = <span class="hljs-literal">null</span><br><br>  <span class="hljs-comment">// 常见区别</span><br><span class="hljs-built_in">Number</span>(<span class="hljs-literal">null</span>)            <span class="hljs-comment">// 0</span><br><span class="hljs-built_in">Number</span>(<span class="hljs-literal">undefined</span>)      <span class="hljs-comment">// NaN</span><br><br><span class="hljs-keyword">let</span> age: <span class="hljs-built_in">number</span> = <span class="hljs-literal">null</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">5</span> + age)      <span class="hljs-comment">//5</span><br><br>age = und...<br></code></pre></td></tr></table></figure>

<p><a href="https://www.typescriptlang.org/zh/play#code/PTAEhI5QqOULy9G8fRo9QLACgA2BTALqArgLlwDsATdAMwEtD1jQBeI0y64lDbQgwnVVe0brxQoQoQBx6gQcjAXMqBqJRQA5HAFsARugBOACkGoAlKAOGjB0QAYFytVpwlyVGvuOj5AQ3nC0WUC4Dm6LpYa-DooAMYA9oQAzuEYAHSo4T6aAKygANTefo5GICkevuj8Nkz2rMgR0bHoCUmpGVnoOYYgru7IYZEx8YnJJXYs9Aw6+qKY6jjoQA">空值校验预览</a></p>
<p>注意：<br>1.与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：<br>2.而 void 类型的变量不能赋值给 number 类型的变量：</p>
<h3 id="any"><a href="#any" class="headerlink" title="any"></a>any</h3><p>  如果是一个普通类型，在赋值过程中改变类型是不被允许的：但如果是 any 类型，则允许被赋值为任意类型。在任意值上访问任何属性都是允许的：也允许调用任何方法：变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型</p>
<h2 id="类型推论"><a href="#类型推论" class="headerlink" title="类型推论"></a>类型推论</h2><ul>
<li>类型推论: 字面意思即使，当类型没有被明确指定的时候，那么 TypeScript 会依照类* 型推论（Type Inference）的规则推断出一个类型。</li>
<li>如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查。</li>
</ul>
<h2 id="联合类型"><a href="#联合类型" class="headerlink" title="联合类型"></a>联合类型</h2><ul>
<li>即在定义类型时可以拥有多种类型，联合类型使用 | 分隔每个类型。</li>
<li>当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：</li>
</ul>
<figure class="highlight crmsh"><table><tr><td class="code"><pre><code class="hljs crmsh">function getLength(something: <span class="hljs-keyword">string</span> | <span class="hljs-keyword">number</span>): <span class="hljs-keyword">number</span> &#123;<br>    return something.length;<br>&#125;<br><br>// index.ts(<span class="hljs-number">2</span>,<span class="hljs-number">22</span>): error TS2339: <span class="hljs-keyword">Property</span><span class="hljs-title"> </span>&#x27;length&#x27; does not exist on <span class="hljs-keyword">type</span> &#x27;<span class="hljs-keyword">string</span> | <span class="hljs-keyword">number</span>&#x27;.<br>//   <span class="hljs-keyword">Property</span><span class="hljs-title"> </span>&#x27;length&#x27; does not exist on <span class="hljs-keyword">type</span> &#x27;<span class="hljs-keyword">number</span>&#x27;.<br><br></code></pre></td></tr></table></figure>

<p>当访问的不是共有属性或者方法的时候，就会报错。联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型：</p>
<figure class="highlight sas"><table><tr><td class="code"><pre><code class="hljs sas">let myFavoriteNumber: string | number;<br>myFavoriteNumber = <span class="hljs-string">&#x27;seven&#x27;</span>;<br>console<span class="hljs-meta">.log(</span>myFavoriteNumber.<span class="hljs-meta">length</span>); // 5<br>myFavoriteNumber = 7;<br>console<span class="hljs-meta">.log(</span>myFavoriteNumber.<span class="hljs-meta">length</span>); // 编译时报错<br><br>// <span class="hljs-meta">index</span>.ts(5,30): <span class="hljs-meta">error</span> TS2339: Property <span class="hljs-string">&#x27;length&#x27;</span> does <span class="hljs-meta">not</span> exist <span class="hljs-meta">on</span> type <span class="hljs-string">&#x27;number&#x27;</span>.<br></code></pre></td></tr></table></figure>

<blockquote>
<p>上例中，第二行的 myFavoriteNumber 被推断成了 string，访问它的 length 属性不会报错。而第四行的 myFavoriteNumber 被推断成了 number，访问它的 length 属性时就报错了。</p>
</blockquote>
<h2 id="接口-（给对象准备的自定义类型）"><a href="#接口-（给对象准备的自定义类型）" class="headerlink" title="接口  （给对象准备的自定义类型）"></a>接口  （给对象准备的自定义类型）</h2><p>实例代码：</p>
<figure class="highlight xquery"><table><tr><td class="code"><pre><code class="hljs xquery">interface Person &#123;<br>   <span class="hljs-built_in"> name</span>:<span class="hljs-built_in"> string</span>;<br>    age:<span class="hljs-built_in"> number</span>;<br>&#125;<br><br><span class="hljs-keyword">let</span> tom: Person = &#123;<br>   <span class="hljs-built_in"> name</span>: <span class="hljs-string">&#x27;Tom&#x27;</span>,<br>    age: <span class="hljs-number">25</span><br>&#125;;<br></code></pre></td></tr></table></figure>
<h3 id="形状得一样"><a href="#形状得一样" class="headerlink" title="形状得一样"></a>形状得一样</h3><p>赋值的时候需要保证接口的形状必须和其指定的类型一样。</p>
<h3 id="可选属性（形状可以不一样，得加条件）"><a href="#可选属性（形状可以不一样，得加条件）" class="headerlink" title="可选属性（形状可以不一样，得加条件）"></a>可选属性（形状可以不一样，得加条件）</h3><p>当然在开发需求中也会有需要其中某一个或者某几个，不要限制的那么死板，于是就有了 <strong>可选属性</strong>，通过在“:”前添加一个“？”来表示属性的可选性，这样也可以使得限制变得宽松，形状也可以有不一致。</p>
<p>可选属性可以实现已定义属性的有或无，但是对于未定义的属性，则产生了限制，因为它有严格的形状限制，而有时候我们希望一个接口允许有任意的属性，可以使用如下方式：</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">interface</span> Person &#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>;<br>    age?: <span class="hljs-built_in">number</span>;<br>    [propName: <span class="hljs-built_in">string</span>]: <span class="hljs-built_in">any</span>;<br>&#125;<br><br><span class="hljs-keyword">let</span> tom: Person = &#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Tom&#x27;</span>,<br>    <span class="hljs-attr">gender</span>: <span class="hljs-string">&#x27;male&#x27;</span><br>&#125;;<br></code></pre></td></tr></table></figure>

<h3 id="一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集："><a href="#一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：" class="headerlink" title="一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集："></a>一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：</h3><p>在上面的例子中，我们将任意属性的类型指定为any，则name指定的字符串类型和age指定的数字类型都是any类型的子集，所以是符合要求的。</p>
<p>下面来测试一个不属于其子集的例子：</p>
<figure class="highlight xquery"><table><tr><td class="code"><pre><code class="hljs xquery">interface Person &#123;<br>   <span class="hljs-built_in"> name</span>:<span class="hljs-built_in"> string</span>;<br>    age?:<span class="hljs-built_in"> number</span>;<br>    [propName:<span class="hljs-built_in"> string</span>]:<span class="hljs-built_in"> string</span>;<br>&#125;<br><br><span class="hljs-keyword">let</span> tom: Person = &#123;<br>   <span class="hljs-built_in"> name</span>: <span class="hljs-string">&#x27;Tom&#x27;</span>,<br>    age: <span class="hljs-number">25</span>,<br>    gender: <span class="hljs-string">&#x27;male&#x27;</span><br>&#125;;<br></code></pre></td></tr></table></figure>

<p><a href="https://www.typescriptlang.org/zh/play#code/JYOwLgpgTgZghgYwgAgArQM4HsTIN4CwAUMqciHALYQBcyGYUoA5gNzFnJzMQD8dIAK6UARtHYkyAbQAOULDIByVWvUYsAunQZMQbYgF9ixADYQwyMFkp10UbLgC8+DmQrU6AcgAq1zwBpXUm5VACYAVkDJUh4QABNoL0o4M09DViA">非其子集*–预览</a></p>
<h3 id="只读属性（readonly）"><a href="#只读属性（readonly）" class="headerlink" title="只读属性（readonly）"></a>只读属性（readonly）</h3><p> 在一些情况下，我们需要值是只读属性，当它被赋值一次以后，不能再对其进行赋值，此时可以采用readonly属性来指定。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs tsx">interface Person &#123;<br>    readonly id: number;<br>    name: string;<br>    age?: number;<br>    [propName: string]: any;<br>&#125;<br><br>let tom: Person = &#123;<br>    id: 89757,<br>    name: &#x27;Tom&#x27;,<br>    gender: &#x27;male&#x27;<br>&#125;;<br><br>tom.id = 9527;<br><br>// index.ts(14,5): error TS2540: Cannot assign to &#x27;id&#x27; because it is a constant or a read-only property.<br></code></pre></td></tr></table></figure>

<p> 使用readonly属性的时候，需要在定义的时候即赋值，在其拥有readonly属性之后再通过对象操作的方式进行赋值也会报错。</p>
 <figure class="highlight xquery"><table><tr><td class="code"><pre><code class="hljs xquery">interface Person &#123;<br>    readonly<span class="hljs-built_in"> id</span>:<span class="hljs-built_in"> number</span>;<br>   <span class="hljs-built_in"> name</span>:<span class="hljs-built_in"> string</span>;<br>    age?:<span class="hljs-built_in"> number</span>;<br>    [propName:<span class="hljs-built_in"> string</span>]: any;<br>&#125;<br><br><span class="hljs-keyword">let</span> tom: Person = &#123;<br>   <span class="hljs-built_in"> name</span>: <span class="hljs-string">&#x27;Tom&#x27;</span>,<br>    gender: <span class="hljs-string">&#x27;male&#x27;</span><br>&#125;;<br><br>tom<span class="hljs-built_in">.id</span> = <span class="hljs-number">89757</span>;<br><br>// index.ts(<span class="hljs-number">8</span>,<span class="hljs-number">5</span>):<span class="hljs-built_in"> error</span> TS2322: Type <span class="hljs-string">&#x27;&#123; name: string; gender: string; &#125;&#x27;</span> <span class="hljs-literal">is</span><span class="hljs-built_in"> not</span> assignable <span class="hljs-keyword">to</span> type <span class="hljs-string">&#x27;Person&#x27;</span>.<br>//   Property <span class="hljs-string">&#x27;id&#x27;</span> <span class="hljs-literal">is</span> missing <span class="hljs-keyword">in</span> type <span class="hljs-string">&#x27;&#123; name: string; gender: string; &#125;&#x27;</span>.<br>// index.ts(<span class="hljs-number">13</span>,<span class="hljs-number">5</span>):<span class="hljs-built_in"> error</span> TS254<span class="hljs-number">0</span>: Cannot assign <span class="hljs-keyword">to</span> <span class="hljs-string">&#x27;id&#x27;</span> because it <span class="hljs-literal">is</span> a constant <span class="hljs-keyword">or</span> a read-only property.<br></code></pre></td></tr></table></figure>

<h2 id="数组类型"><a href="#数组类型" class="headerlink" title="数组类型"></a>数组类型</h2><p>  数组是日常开发中遇到的最多的数据结构之一，从它的基本方法的多样性也可以看出它的使用度是极高的。那么在typescript世界中对于数组类型的定义又会有哪些实用方式呢？</p>
<h3 id="类型-方括号-表示法"><a href="#类型-方括号-表示法" class="headerlink" title="类型+方括号  表示法"></a>类型+方括号  表示法</h3><p>  数组字面量是非常普遍的数组定义方法，在typescript中则采用了  类型+方括号的组成，一方面能够非常方便得表示数组，另一方面可以限制数组内元素得类型。</p>
  <figure class="highlight inform7"><table><tr><td class="code"><pre><code class="hljs inform7">let fibonacci: number<span class="hljs-comment">[]</span> = <span class="hljs-comment">[1, 1, 2, 3, 5]</span>;<br></code></pre></td></tr></table></figure>
<blockquote>
<p>1.数组的项中不允许出现其他的类型，且数组的一些方法也会根据数组在定义时候的类型加以限制。</p>
</blockquote>
<figure class="highlight xquery"><table><tr><td class="code"><pre><code class="hljs xquery"><span class="hljs-keyword">let</span> fibonacci:<span class="hljs-built_in"> number</span>[] = [<span class="hljs-number">1</span>, <span class="hljs-string">&#x27;1&#x27;</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>];<br><br>// Type <span class="hljs-string">&#x27;string&#x27;</span> <span class="hljs-literal">is</span><span class="hljs-built_in"> not</span> assignable <span class="hljs-keyword">to</span> type <span class="hljs-string">&#x27;number&#x27;</span>.<br><br></code></pre></td></tr></table></figure>
<figure class="highlight xquery"><table><tr><td class="code"><pre><code class="hljs xquery"><span class="hljs-keyword">let</span> fibonacci:<span class="hljs-built_in"> number</span>[] = [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>];<br>fibonacci.push(<span class="hljs-string">&#x27;8&#x27;</span>);<br><br>// Argument <span class="hljs-keyword">of</span> type <span class="hljs-string">&#x27;&quot;8&quot;&#x27;</span> <span class="hljs-literal">is</span><span class="hljs-built_in"> not</span> assignable <span class="hljs-keyword">to</span> parameter <span class="hljs-keyword">of</span> type <span class="hljs-string">&#x27;number&#x27;</span>.<br><br></code></pre></td></tr></table></figure>

<p>定义一个任意类型的数组：</p>
<figure class="highlight prolog"><table><tr><td class="code"><pre><code class="hljs prolog">let list: any[] = [<span class="hljs-string">&#x27;xcatliu&#x27;</span>, <span class="hljs-number">25</span>, &#123; website: <span class="hljs-string">&#x27;http://xcatliu.com&#x27;</span> &#125;];<br></code></pre></td></tr></table></figure>
<h3 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h3><p>我们也可以使用数组泛型（Array Generic） Array&lt;类型&gt; 来表示数组：</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> fibonacci: <span class="hljs-built_in">Array</span>&lt;<span class="hljs-built_in">number</span>&gt; = [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>];<br></code></pre></td></tr></table></figure>

<p><a href="http://ts.xcatliu.com/basics/type-of-array.html#%E6%95%B0%E7%BB%84%E6%B3%9B%E5%9E%8B">更加复杂的数组类型表示方式</a></p>
<h3 id="用接口表示数组"><a href="#用接口表示数组" class="headerlink" title="用接口表示数组"></a>用接口表示数组</h3>  <figure class="highlight fortran"><table><tr><td class="code"><pre><code class="hljs fortran">  <span class="hljs-keyword">interface</span> NumberArray &#123;<br>    [<span class="hljs-built_in">index</span>: <span class="hljs-keyword">number</span>]: <span class="hljs-keyword">number</span>;<br>&#125;<br>let fibonacci: NumberArray = [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>];<br></code></pre></td></tr></table></figure>

<p>  结合数组的特点，首先索引值必须是数字，在上述的例子中规定了属性值也为数字，所以可以将[1,1,2,3,5]赋值给fibonacci.</p>
<p>  与前两种比较而言，此种方法是比较复杂的，当然它的主要用处是用来表示<font color="red">类数组</font>。</p>
<h3 id="类数组"><a href="#类数组" class="headerlink" title="类数组"></a>类数组</h3><h4 id="类数组的概念"><a href="#类数组的概念" class="headerlink" title="类数组的概念"></a>类数组的概念</h4><p>  想要理解为什么多用比较复杂的接口来定义类数组？ 首先需要了解类数组的基本概念。</p>
<blockquote>
<p><font color=plum>类数组不是数组，它的原型是对象</font></p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">let</span> args: &#123;<br>        [index: <span class="hljs-built_in">number</span>]: <span class="hljs-built_in">number</span>;<br>        length: <span class="hljs-built_in">number</span>;<br>        callee: <span class="hljs-built_in">Function</span>;<br>    &#125; = <span class="hljs-built_in">arguments</span>;<br>&#125;<br><br></code></pre></td></tr></table></figure>

<p>事实上常用的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">let</span> args: IArguments = <span class="hljs-built_in">arguments</span>;<br>&#125;<br><br></code></pre></td></tr></table></figure>

<p>其中 IArguments 是 TypeScript 中定义好了的类型，它实际上就是：<font color=seagreen><a href="http://ts.xcatliu.com/basics/built-in-objects.html">内置对象</a></font></p>
<figure class="highlight fortran"><table><tr><td class="code"><pre><code class="hljs fortran"><span class="hljs-keyword">interface</span> IArguments &#123;<br>    [<span class="hljs-built_in">index</span>: <span class="hljs-keyword">number</span>]: <span class="hljs-built_in">any</span>;<br>    length: <span class="hljs-keyword">number</span>;<br>    callee: <span class="hljs-function"><span class="hljs-keyword">Function</span></span>;<br>&#125;<br></code></pre></td></tr></table></figure>


<h2 id="函数的类型"><a href="#函数的类型" class="headerlink" title="函数的类型"></a>函数的类型</h2><p>前面提到过可以用void来表示没有返回值的函数类型，这一节，我们将学习到对于有返回值的函数应该怎么表示，函数作为编程语言里不可缺少的部分，能够利用其灵活性，给我们的代码开发过程中带来效率的提升。首先，需要重温一下原生JavaScript中对于<font color=seagreen>函数的声明方式</font>：函数声明（Function Declaration）和函数表达式（Function Expression）：</p>
<figure class="highlight ada"><table><tr><td class="code"><pre><code class="hljs ada">// 函数声明（<span class="hljs-keyword">Function</span> <span class="hljs-title">Declaration）</span><br><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(x, y) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-type">x</span> + y;<br>&#125;<br><br>// 函数表达式（<span class="hljs-keyword">Function</span> <span class="hljs-title">Expression）</span><br>let mySum = <span class="hljs-keyword">function</span> <span class="hljs-title"></span>(x, y) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-type">x</span> + y;<br>&#125;;<br></code></pre></td></tr></table></figure>

<blockquote>
<p><font color=seagreen>一个函数有输入和输出，要在typescript中对其进行约束，需要把输入和输出都考虑到</font></p>
</blockquote>
<figure class="highlight fortran"><table><tr><td class="code"><pre><code class="hljs fortran"><span class="hljs-function"><span class="hljs-keyword">function</span></span> <span class="hljs-built_in">sum</span>(x:<span class="hljs-keyword">number</span>,y:<span class="hljs-keyword">number</span>): <span class="hljs-keyword">number</span> &#123;<br>  <span class="hljs-keyword">return</span> x+y;<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>注意：<font color=chocolate>输入多余的（或者少于要求的）参数，是不被允许的：</font></p>
</blockquote>
<ul>
<li><font color=seagreen>多输入参数:</font><figure class="highlight fortran"><table><tr><td class="code"><pre><code class="hljs fortran"><span class="hljs-function"><span class="hljs-keyword">function</span></span> <span class="hljs-built_in">sum</span>(x: <span class="hljs-keyword">number</span>, y: <span class="hljs-keyword">number</span>): <span class="hljs-keyword">number</span> &#123;<br>    <span class="hljs-keyword">return</span> x + y;<br>&#125;<br><span class="hljs-built_in">sum</span>(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>);<br><br>// <span class="hljs-built_in">index</span>.ts(<span class="hljs-number">4</span>,<span class="hljs-number">1</span>): error TS2346: Supplied parameters <span class="hljs-keyword">do</span> not match <span class="hljs-built_in">any</span> signature of <span class="hljs-keyword">call</span> <span class="hljs-keyword">target</span>.<br></code></pre></td></tr></table></figure></li>
<li><font color=purple>少输入参数:</font><figure class="highlight fortran"><table><tr><td class="code"><pre><code class="hljs fortran"><span class="hljs-function"><span class="hljs-keyword">function</span></span> <span class="hljs-built_in">sum</span>(x: <span class="hljs-keyword">number</span>, y: <span class="hljs-keyword">number</span>): <span class="hljs-keyword">number</span> &#123;<br>    <span class="hljs-keyword">return</span> x + y;<br>&#125;<br><span class="hljs-built_in">sum</span>(<span class="hljs-number">1</span>);<br><br>// <span class="hljs-built_in">index</span>.ts(<span class="hljs-number">4</span>,<span class="hljs-number">1</span>): error TS2346: Supplied parameters <span class="hljs-keyword">do</span> not match <span class="hljs-built_in">any</span> signature of <span class="hljs-keyword">call</span> <span class="hljs-keyword">target</span>.<br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="函数表达式的类型加注"><a href="#函数表达式的类型加注" class="headerlink" title="函数表达式的类型加注"></a>函数表达式的类型加注</h3><p> 函数表达式相较于函数声明式是比较复杂的，首先是因为在赋值表达式两边都有字符，实际上如果在函数表达式左侧不对类型加以约束，在编译过程是可以通过的。 为了严谨，需要在函数左侧也加以类型约束。 通过类似于ES6中的箭头函数的样式，来表示函数左侧的样式，当然其本质还是不同的，在 TypeScript 的类型定义中，=&gt; 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。</p>
 <figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> mySum: <span class="hljs-function">(<span class="hljs-params">x: <span class="hljs-built_in">number</span>, y: <span class="hljs-built_in">number</span></span>) =&gt;</span> <span class="hljs-built_in">number</span> = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x: <span class="hljs-built_in">number</span>, y: <span class="hljs-built_in">number</span></span>): <span class="hljs-title">number</span> </span>&#123;<br>    <span class="hljs-keyword">return</span> x + y;<br>&#125;;<br></code></pre></td></tr></table></figure>

<p> 当然为了代码的可读性，也可以采用接口的方式定义函数</p>
 <figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">interface</span> SearchFunc &#123;<br>  (source: <span class="hljs-built_in">string</span>,<span class="hljs-attr">subString</span>: <span class="hljs-built_in">string</span>): <span class="hljs-built_in">boolean</span>;<br>&#125;<br><br><span class="hljs-keyword">let</span> mySrarch: SearchFunc;<br><br>mySearch = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source: <span class="hljs-built_in">string</span>, subString: <span class="hljs-built_in">string</span></span>) </span>&#123;<br>  <span class="hljs-keyword">return</span> source.search(subString) !== -<span class="hljs-number">1</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p><font color=tomato>难点：用接口定义函数的理解</font><br>   <strong><font color=orange>怎么理解用typescript接口定义函数</font></strong><br>  <a href="https://www.cnblogs.com/wjaaron/p/12851994.html">typescript定义函数类型</a></p>
</blockquote>
<blockquote>
<p>个人理解：在定义接口的时候，因为是应用于函数的接口定义，所以左侧是函数的参数类型，通过冒号连接右侧的，实际是表示函数的类型的值，相当于用  “=&gt;” 在函数表达式中的实现方式，应该是一种约定的方式。</p>
</blockquote>
<p>前文提到：在没有使用可选参数的情况下，对于函数而言，在输入端多输入参数或者是少输入参数都会产生错误，在使用<strong>可选参数</strong>时，可以放松一些对于函数输入的要求，但是也有限制。</p>
<figure class="highlight nginx"><table><tr><td class="code"><pre><code class="hljs nginx"><span class="hljs-attribute">function</span> buildName(firstName: string, <span class="hljs-literal">last</span>Name?: string) &#123;<br>    <span class="hljs-attribute">if</span> (<span class="hljs-literal">last</span>Name) &#123;<br>        <span class="hljs-attribute">return</span> firstName + <span class="hljs-string">&#x27; &#x27;</span> + <span class="hljs-literal">last</span>Name;<br>    &#125; <span class="hljs-section">else</span> &#123;<br>        <span class="hljs-attribute">return</span> firstName;<br>    &#125;<br>&#125;<br><span class="hljs-attribute">let</span> tomcat = buildName(<span class="hljs-string">&#x27;Tom&#x27;</span>, <span class="hljs-string">&#x27;Cat&#x27;</span>);<br><span class="hljs-attribute">let</span> tom = buildName(<span class="hljs-string">&#x27;Tom&#x27;</span>);<br></code></pre></td></tr></table></figure>


<p><font color=#d76b26 >可选参数后面不允许再出现必需参数了：</font></p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">buildName</span>(<span class="hljs-params">firstName?: <span class="hljs-built_in">string</span>, lastName: <span class="hljs-built_in">string</span></span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (firstName) &#123;<br>        <span class="hljs-keyword">return</span> firstName + <span class="hljs-string">&#x27; &#x27;</span> + lastName;<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-keyword">return</span> lastName;<br>    &#125;<br>&#125;<br><span class="hljs-keyword">let</span> tomcat = buildName(<span class="hljs-string">&#x27;Tom&#x27;</span>, <span class="hljs-string">&#x27;Cat&#x27;</span>);<br><span class="hljs-keyword">let</span> tom = buildName(<span class="hljs-literal">undefined</span>, <span class="hljs-string">&#x27;Tom&#x27;</span>);<br><br><span class="hljs-comment">// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.</span><br></code></pre></td></tr></table></figure>

<h3 id="参数默认值"><a href="#参数默认值" class="headerlink" title="参数默认值"></a>参数默认值</h3><p>在ES6中允许给函数的参数设置默认值，在typescript会将具有默认值的参数识别为可选参数，</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs tsx">function buildName(firstName: string, lastName: string = &#x27;Cat&#x27;) &#123;<br>    return firstName + &#x27; &#x27; + lastName;<br>&#125;<br>let tomcat = buildName(&#x27;Tom&#x27;, &#x27;Cat&#x27;);<br>console.log(tomcat);<br>let tom = buildName(&#x27;Tom&#x27;);<br>...<br></code></pre></td></tr></table></figure>

<p><a href="https://www.typescriptlang.org/zh/play?ssl=7&ssc=17&pln=1&pc=1#code/GYVwdgxgLglg9mABAIxDANgEwHIEMC2ApgBTAwBOAzlHkQFyLXkxgDmANIurtbYQ0xatEAXkQByAMK4o4gJSIA3gFgAUIg2JyhKCHJIyVGgUKIA1BMsXuvEwG41AXzXodiKHHwQZolGix8xOIAKp7inFIy8g6qEAiUcK4AdOhwrMQeXjJyMa5Q7p6+qBg4JkGh+NFqcWAJyanpmXJAA">可选参数在后</a></p>
<p>此时就不受「<font color=purple>可选参数必须接在必需参数后面</font>」的限制了：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs tsx">function buildName(firstName: string = &#x27;Tom&#x27;, lastName: string) &#123;<br>    return firstName + &#x27; &#x27; + lastName;<br>&#125;<br>let tomcat = buildName(&#x27;Tom&#x27;, &#x27;Cat&#x27;);<br>console.log(tomcat);<br>let cat = buildName(undefined, &#x27;Cat&#x27;);<br>console.log(cat);<br></code></pre></td></tr></table></figure>

<p><a href="https://www.typescriptlang.org/zh/play?ssl=7&ssc=18&pln=1&pc=1#code/GYVwdgxgLglg9mABAIxDANgEwHIEMC2ApgBTAwBOAzlHkQFyLXkxgDmiAvIgOQAqc+bgBpE6XNVqEGTFqwCUiAN4BYAFCINicoSghySMlRoFCiANQ9LFsRJMBuNQF816HYigCIuKJxRosksR8AsI8AMLe3HIOqhAIlHCuAHTocKzEHvheUNEubtm+qBg4JsTgmIRkYISYItwRUFExcWAJyanp2dFAA">可选参数在前</a></p>
<h3 id="剩余参数"><a href="#剩余参数" class="headerlink" title="剩余参数"></a><font color=tomato>剩余参数</font></h3><p>剩余参数，rest后面不能再有其他参数了，表示除了之前的参数外的其余的所有参数。<a href="https://es6.ruanyifeng.com/#docs/function#rest-%E5%8F%82%E6%95%B0">ES6-剩余参数</a></p>
<figure class="highlight actionscript"><table><tr><td class="code"><pre><code class="hljs actionscript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">push</span><span class="hljs-params">(array: any[], <span class="hljs-rest_arg">...items</span>: any[])</span> </span>&#123;<br>    items.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(item)</span> </span>&#123;<br>        array.push(item);<br>    &#125;);<br>&#125;<br><br>let a:any[]= [];   <span class="hljs-comment">// 在这里，a元素在被赋值为[]时，隐式的具有any[]类型.</span><br>push(a, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>);<br>console.log(a)<br></code></pre></td></tr></table></figure>

<p>它定义了一个push函数，能将其参数加入到一个数组中。</p>
<h3 id="重载"><a href="#重载" class="headerlink" title="重载"></a><a href="http://ts.xcatliu.com/basics/type-of-function.html"><font color=chocolate>重载</font></a></h3><pre><code> 对于文章中的重载不是很理解，因为JavaScript是没有重载这一概念的，
</code></pre>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs tsx">function reverse(x: number): number;<br>function reverse(x: string): string;<br>function reverse(x: number | string): number | string | void &#123;<br>    if (typeof x === &#x27;number&#x27;) &#123;<br>        return Number(x.to...<br></code></pre></td></tr></table></figure>

<p><a href="https://www.typescriptlang.org/zh/play#code/GYVwdgxgLglg9mABAJwKYDdXIM6oBQAeAXImCALYBGWAlCWVVgNwCwAUKJLAihlroRLYoyGGADmdRMNETWHcNHhI0mHPmKkK1ZIgA+0kWMn1tWfYdniL6ODAAmiAN7tEbxDGCI8UAJ4AHVDgvAkQAXgjEAHIGHSiaZ1d3ZLQoEGQkADkzZEIAOig4AGUjCTwaPOx-ABsYKDwo+LzVfnwKgCs7MAb4mnlkgF9EVGrcDy8fAKCQ8MiomWN4xLZklNQ0jMQCSpq6noqW9XK8zrF9-vcB9gGgA">Playground Link</a></p>
]]></content>
      <categories>
        <category>TypeScript</category>
      </categories>
      <tags>
        <tag>TypeScript</tag>
      </tags>
  </entry>
  <entry>
    <title>TypeScript入门教程二</title>
    <url>/2021/09/26/TypeScript/4d8aa16bcb6b/</url>
    <content><![CDATA[<h1 id="typescript学习：第二部分"><a href="#typescript学习：第二部分" class="headerlink" title="typescript学习：第二部分"></a>typescript学习：第二部分</h1><p>  → <a href="http://wakeweb.cloud/2021/09/24/TypeScript/854698b90236/">第一部分跳转链接</a></p>
<p>经过第一部分的学习，我们已经了解到了typescript的基本用法，同时对于其在代码健壮性，以及编译过程中即出现错误提示的有点有了更一步的了解，接下来，我们将进一步学习新的知识，体会typescript更加高级的用法。</p>
<h2 id="类型断言"><a href="#类型断言" class="headerlink" title="类型断言"></a>类型断言</h2><p>  在学习类型断言之前，需要先了解断言的具体概念，针对node语言里面也有相关断言的概念，有以下的问题：<br>  <font color=orange>1.断言是一个广泛的概念吗？</font><br>  <font color=seagreen>2.node断言与typescript类型断言分别都是什么？</font><br>  <span id="more"></span></p>
<p> 首先可以回答第一个问题： 是，那么第二个问题就没有必要再纠结了。</p>
<p> <a href="https://www.runoob.com/w3cnote/c-assert.html">菜鸟教程–asserts断言的用法</a>.</p>
<p><font color=amber> 可以这么说:断言assert 是仅在Debug 版本起作用的宏，它用于检查”不应该”发生的情况。</font></p>
<p><font color=yellowgreen>需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误：</font></p>
<blockquote>
<p>以下是使用断言的几个原则：<br>（1）使用断言捕捉不应该发生的非法情况。不要混淆非法情况与错误情况之间的区别，后者是必然存在的并且是一定要作出处理的。<br>（2）使用断言对函数的参数进行确认。<br>（3）在编写函数时，要进行反复的考查，并且自问：”我打算做哪些假定？”一旦确定了的假定，就要使用断言对假定进行检查。<br>（4）一般教科书都鼓励程序员们进行防错性的程序设计，但要记住这种编程风格会隐瞒错误。当进行防错性编程时，如果”不可能发生”的事情的确发生了，则要使用断言进行报警。</p>
</blockquote>
<h3 id="类型断言的用法"><a href="#类型断言的用法" class="headerlink" title="类型断言的用法"></a>类型断言的用法</h3><p>前文提到，对于断言的使用是需要慎重的。这节我们将学习断言（assert）的具体用法：<br>方法1: <font color=purple>值 as 类型</font><br>方法2: <font color=seagreen>&lt;类型&gt;值</font></p>
<p>由于第二种方法在使用过程中可能会产生<font color=purple>歧义</font>，因为</p>
<blockquote>
<p>在 tsx 语法（React 的 jsx 语法的 ts 版）中必须使用前者，即 值 as 类型。形如 <Foo> 的语法在 tsx 中表示的是一个 ReactNode，在 ts 中除了表示类型断言之外，也可能是表示一个泛型。故建议大家在使用类型断言时，统一使用 值 as 类型 这样的语法，本书中也会贯彻这一思想。</p>
</blockquote>
<h3 id="类型断言的用途"><a href="#类型断言的用途" class="headerlink" title="类型断言的用途"></a>类型断言的用途</h3><h4 id="将一个联合类型推断为其中一个类型"><a href="#将一个联合类型推断为其中一个类型" class="headerlink" title="将一个联合类型推断为其中一个类型"></a>将一个联合类型推断为其中一个类型</h4><p>在<a href="http://wakeweb.cloud/2021/09/24/TypeScript/854698b90236/">第一部分</a>提到过，在不确定一个具有联合类型的变量具体是哪一种类型时，只能访问此联合类型的所有类型中共有的属性和方法：</p>
<figure class="highlight php"><table><tr><td class="code"><pre><code class="hljs php"><span class="hljs-class"><span class="hljs-keyword">interface</span> <span class="hljs-title">Cat</span> </span>&#123;<br>    name: <span class="hljs-keyword">string</span>;<br>    run(): <span class="hljs-keyword">void</span>;<br>&#125;<br><span class="hljs-class"><span class="hljs-keyword">interface</span> <span class="hljs-title">Fish</span> </span>&#123;<br>    name: <span class="hljs-keyword">string</span>;<br>    swim(): <span class="hljs-keyword">void</span>;<br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getName</span>(<span class="hljs-params">animal: Cat | Fish</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> animal.name;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>而当我们确实需要在不确定类型的时候就访问其中一个类型所特有的属性或方法，比如：</p>
<figure class="highlight pgsql"><table><tr><td class="code"><pre><code class="hljs pgsql">interface Cat &#123;<br>    <span class="hljs-type">name</span>: string;<br>    run(): <span class="hljs-type">void</span>;<br>&#125;<br>interface Fish &#123;<br>    <span class="hljs-type">name</span>: string;<br>    swim(): <span class="hljs-type">void</span>;<br>&#125;<br><br><span class="hljs-keyword">function</span> isFish(animal: Cat | Fish) &#123;<br>    <span class="hljs-keyword">if</span> (typeof animal.swim === <span class="hljs-string">&#x27;function&#x27;</span>) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">true</span>;<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">false</span>;<br>&#125;<br><br>// <span class="hljs-keyword">index</span>.ts:<span class="hljs-number">11</span>:<span class="hljs-number">23</span> - error TS2339: Property <span class="hljs-string">&#x27;swim&#x27;</span> does <span class="hljs-keyword">not</span> exist <span class="hljs-keyword">on</span> <span class="hljs-keyword">type</span> <span class="hljs-string">&#x27;Cat | Fish&#x27;</span>.<br>//   Property <span class="hljs-string">&#x27;swim&#x27;</span> does <span class="hljs-keyword">not</span> exist <span class="hljs-keyword">on</span> <span class="hljs-keyword">type</span> <span class="hljs-string">&#x27;Cat&#x27;</span>.<br></code></pre></td></tr></table></figure>
<p>上面的例子中，获取 animal.swim 的时候会报错。</p>
<p>此时可以使用类型断言，将 animal 断言成 Fish：</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">interface</span> Cat &#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>;<br>    run(): <span class="hljs-built_in">void</span>;<br>&#125;<br><span class="hljs-keyword">interface</span> Fish &#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>;<br>    swim(): <span class="hljs-built_in">void</span>;<br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">isFish</span>(<span class="hljs-params">animal: Cat | Fish</span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> (animal <span class="hljs-keyword">as</span> Fish).swim === <span class="hljs-string">&#x27;function&#x27;</span>) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>&#125;<br></code></pre></td></tr></table></figure>
<p>需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误：</p>
<figure class="highlight pgsql"><table><tr><td class="code"><pre><code class="hljs pgsql">interface Cat &#123;<br>  <span class="hljs-type">name</span>: string;<br>  run(): <span class="hljs-type">void</span>;<br>&#125;<br>interface Fish &#123;<br>  <span class="hljs-type">name</span>: string;<br>  swim(): <span class="hljs-type">void</span>;<br>&#125;<br><span class="hljs-keyword">function</span> swim(animal: Cat | Fish) &#123;<br>  (animal <span class="hljs-keyword">as</span> Fish).swim();<br>&#125;<br><br>const tom: Cat = &#123;<br>  <span class="hljs-type">name</span>: <span class="hljs-string">&#x27;Tom&#x27;</span>,<br>  run() &#123; console.log(<span class="hljs-string">&#x27;run&#x27;</span>)&#125;<br>&#125;;<br>swim(tom);<br>// <span class="hljs-keyword">index</span>.ts:<span class="hljs-number">11</span>:<span class="hljs-number">23</span> - error TS2339: Property <span class="hljs-string">&#x27;swim&#x27;</span> does <span class="hljs-keyword">not</span> exist <span class="hljs-keyword">on</span> <span class="hljs-keyword">type</span> <span class="hljs-string">&#x27;Cat | Fish&#x27;</span>.<br>//   Property <span class="hljs-string">&#x27;swim&#x27;</span> does <span class="hljs-keyword">not</span> exist <span class="hljs-keyword">on</span> <span class="hljs-keyword">type</span> <span class="hljs-string">&#x27;Cat&#x27;</span>.<br></code></pre></td></tr></table></figure>
<p><a href="https://www.typescriptlang.org/zh/play#code/JYOwLgpgTgZghgYwgAgMJzMg3gWAFDLIhwC2EAXMgM5hSgDmA3PoVAK4gAUAlJQG4B7YABNmeAL75QkWIhQAxYFQAW2FkVIVqtBmMJUA7sBI9+Q0fkl4YHBGGACQ1IybghjcADaV0mAD7IiircagTInG4enshwVIFKytwAdIbGPGJW+AiONMhgAiQ+GMgAvKGExGSUAOQAKgXVADTq7FzcWMjZIFQCnhBJngL0nNWt1dxW4mKpJvkk3IxAA">错误预览</a></p>
<p>首先理解一下函数 siwm函数传递参数animal,然后参数调用该类型的属性和方法。不太理解的地方可以查看上方的错误预览。</p>
<p>原因是 (animal as Fish).swim() 这段代码隐藏了 animal 可能为 Cat 的情况，将 animal 直接断言为 Fish 了，而 TypeScript 编译器信任了我们的断言，故在调用 swim() 时没有编译错误。</p>
<p>可是 swim 函数接受的参数是 Cat | Fish，一旦传入的参数是 Cat 类型的变量，由于 Cat 上没有 swim 方法，就会导致运行时错误了。</p>
<p>总之，使用类型断言时一定要格外小心，尽量避免断言后调用方法或引用深层属性，以减少不必要的运行时错误。</p>
<h4 id="将一个父类断言为更加具体的子类"><a href="#将一个父类断言为更加具体的子类" class="headerlink" title="将一个父类断言为更加具体的子类"></a>将一个父类断言为更加具体的子类</h4><p>  当类之间有继承关系时，类型断言也是常见的。</p>
<figure class="highlight scala"><table><tr><td class="code"><pre><code class="hljs scala"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ApiError</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Error</span> </span>&#123;<br>  code: number = <span class="hljs-number">0</span>;<br>&#125;<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HttpError</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Error</span> </span>&#123;<br>  statusCode: number = <span class="hljs-number">200</span>;<br>&#125;<br><br>function isApiError(error: <span class="hljs-type">Error</span>) &#123;<br>  <span class="hljs-keyword">if</span>(typeof (error as <span class="hljs-type">ApiError</span>).code === <span class="hljs-symbol">&#x27;numbe</span>r&#x27;) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>  &#125;<br><br><span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>&#125;<br></code></pre></td></tr></table></figure>
<p>在<font color=red>isApiError函数</font>中，它用于实现传入的错误是不是ApiError类型。</p>
<p>有的情况下 ApiError 和 HttpError 不是一个真正的类，而只是一个 TypeScript 的接口（interface），接口是一个类型，不是一个真正的值，它在编译结果中会被删除，当然就无法使用 instanceof 来做运行时判断了：</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">interface</span> ApiError <span class="hljs-keyword">extends</span> Error &#123;<br>    <span class="hljs-attr">code</span>: <span class="hljs-built_in">number</span>;<br>&#125;<br><span class="hljs-keyword">interface</span> HttpError <span class="hljs-keyword">extends</span> Error &#123;<br>    <span class="hljs-attr">statusCode</span>: <span class="hljs-built_in">number</span>;<br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">isApiError</span>(<span class="hljs-params">error: <span class="hljs-built_in">Error</span></span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (error <span class="hljs-keyword">instanceof</span> ApiError) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>&#125;<br><br><span class="hljs-comment">// index.ts:9:26 - error TS2693: &#x27;ApiError&#x27; only refers to a type, but is being used as a value here.</span><br></code></pre></td></tr></table></figure>
<p>需要学习巩固一下: <a href="https://zh.javascript.info/class-inheritance">类与继承</a>。</p>
<h4 id="将任何一个类型断言为any类型"><a href="#将任何一个类型断言为any类型" class="headerlink" title="将任何一个类型断言为any类型"></a>将任何一个类型断言为any类型</h4><p>在 any 类型的变量上，访问任何属性都是允许的。</p>
<p>需要注意的是，将一个变量断言为 any 可以说是解决 TypeScript 中类型问题的最后一个手段。</p>
<p>它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。</p>
<p>上面的例子中，我们也可以通过[扩展 window 的类型（TODO）][]解决这个错误，不过如果只是临时的增加 foo 属性，as any 会更加方便。</p>
<p>总之，一方面不能滥用 as any，另一方面也不要完全否定它的作用，我们需要在类型的严格性和开发的便利性之间掌握平衡（这也是 TypeScript 的设计理念之一），才能发挥出 TypeScript 最大的价值。</p>
<h4 id="将-any-断言为一个具体的类型"><a href="#将-any-断言为一个具体的类型" class="headerlink" title="将 any 断言为一个具体的类型"></a>将 any 断言为一个具体的类型</h4><p>  在日常的开发中，我们不可避免的需要处理 any 类型的变量，它们可能是由于第三方库未能定义好自己的类型，也有可能是历史遗留的或其他人编写的烂代码，还可能是受到 TypeScript 类型系统的限制而无法精确定义类型的场景。</p>
<p>遇到 any 类型的变量时，我们可以选择无视它，任由它滋生更多的 any。</p>
<p>我们也可以选择改进它，通过类型断言及时的把 any 断言为精确的类型，亡羊补牢，使我们的代码向着高可维护性的目标发展。</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getCacheData</span>(<span class="hljs-params">key: <span class="hljs-built_in">string</span></span>): <span class="hljs-title">any</span> </span>&#123;<br>    <span class="hljs-keyword">return</span> (<span class="hljs-built_in">window</span> <span class="hljs-keyword">as</span> <span class="hljs-built_in">any</span>).cache[key];<br>&#125;<br><br><span class="hljs-keyword">interface</span> Cat &#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>;<br>    run(): <span class="hljs-built_in">void</span>;<br>&#125;<br><br><span class="hljs-keyword">const</span> tom = getCacheData(<span class="hljs-string">&#x27;tom&#x27;</span>) <span class="hljs-keyword">as</span> Cat;<br>tom.run();<br></code></pre></td></tr></table></figure>
<p>上面的例子，这个函数调用完后的类型为any，我们可以采用接口的方式将它断言为具体的cat类型，后续对参数的访问就会有相应的代码补全了，能够提高代码的可维护性。</p>
<p><a href="http://ts.xcatliu.com/basics/type-assertion.html#%E5%B0%86-any-%E6%96%AD%E8%A8%80%E4%B8%BA%E4%B8%80%E4%B8%AA%E5%85%B7%E4%BD%93%E7%9A%84%E7%B1%BB%E5%9E%8B">后续参考链接：类型断言、类型转换、类型声明、泛型</a></p>
<h2 id="泛型（generics）"><a href="#泛型（generics）" class="headerlink" title="泛型（generics）"></a>泛型（generics）</h2><p>泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。</p>
]]></content>
      <categories>
        <category>TypeScript</category>
      </categories>
      <tags>
        <tag>TypeScript</tag>
      </tags>
  </entry>
  <entry>
    <title>VUE2.X学习</title>
    <url>/2021/04/24/uncategorized/6eb6cb2ab58d/</url>
    <content><![CDATA[<h1 id="vue2-x教程学习"><a href="#vue2-x教程学习" class="headerlink" title="vue2.x教程学习"></a>vue2.x教程学习</h1><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><h3 id="兼容性"><a href="#兼容性" class="headerlink" title="兼容性"></a>兼容性</h3><p>Vue <strong>不支持</strong> IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有<a href="https://caniuse.com/#feat=es5">兼容 ECMAScript 5 的浏览器</a>。</p>
<h3 id="语义化版本控制"><a href="#语义化版本控制" class="headerlink" title="语义化版本控制"></a>语义化版本控制</h3><p>Vue 在其所有项目中公布的功能和行为都遵循<a href="https://semver.org/lang/zh-CN/">语义化版本控制</a>。对于未公布的或内部暴露的行为，其变更会描述在<a href="https://github.com/vuejs/vue/releases">发布说明</a>中。</p>
<h3 id="更新日志"><a href="#更新日志" class="headerlink" title="更新日志"></a>更新日志</h3><p>最新稳定版本：2.6.12<br>每个版本的更新日志见 <a href="https://github.com/vuejs/vue/releases">GitHub</a>。</p>
<span id="more"></span>
<h3 id="Vue-Devtools"><a href="#Vue-Devtools" class="headerlink" title="Vue Devtools"></a>Vue Devtools</h3><ul>
<li>在使用 Vue 时，我们推荐在你的浏览器上安装 <a href="https://github.com/vuejs/vue-devtools#vue-devtools">Vue Devtools</a>。它允许你在一个更友好的界面中审查和调试 Vue 应用。</li>
<li> 在Chrome浏览器中可以直接到Chrome网上商店搜索下载</li>
<li> 在edge浏览器中可以打开 <a href="https://chrome.google.com/webstore/category/extensions">Chrome 扩展商店</a>，在搜索栏搜索 <strong>vue.js devtools</strong><br>选择提供方为：<a href="https://vuejs.org/">https://vuejs.org</a> 的扩展，添加成功后，进入扩展设置页面，找到 Vue.js devtools 扩展，点击详细信息，勾选允许访问文件 URL和收集错误选项.<br><img src="https://gitee.com/mhist/hexo-image/raw/master/img/VueDevToolSet-20210424164242.png" alt="vue.js devtools"><h3 id="直接用script标签引用"><a href="#直接用script标签引用" class="headerlink" title="直接用script标签引用"></a>直接用script标签引用</h3>直接下载并用 script 标签引入，Vue会被注册为全局变量。</li>
<li>在开发环境下不要使用压缩版本，不然会失去所有常见错误的相关警告。</li>
<li><a href="https://cn.vuejs.org/js/vue.js">开发版本</a>包含完整的警告和调试模式</li>
<li><a href="https://cn.vuejs.org/js/vue.min.js">压缩版本/生产版本</a>删除了警告，33.30KB min+gzip<h4 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h4>对于制作原型或学习，你可以这样使用最新版本：<figure class="highlight applescript"><table><tr><td class="code"><pre><code class="hljs applescript">&lt;<span class="hljs-keyword">script</span> src=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;<span class="hljs-keyword">script</span>&gt;<br></code></pre></td></tr></table></figure>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：<figure class="highlight applescript"><table><tr><td class="code"><pre><code class="hljs applescript">&lt;<span class="hljs-keyword">script</span> src=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/vue@2.6.12&quot;</span>&gt;<span class="hljs-keyword">script</span>&gt;<br></code></pre></td></tr></table></figure>
如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：<figure class="highlight xml"><table><tr><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js&#x27;</span> script&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<p>你可以在 <a href="https://cdn.jsdelivr.net/npm/vue/">cdn.jsdelivr.net/npm/vue</a> 浏览 NPM 包的源代码。</p>
<p>Vue 也可以在 <a href="https://unpkg.com/vue@2.6.12/dist/vue.js">unpkg</a> 和 <a href="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js">cdnjs</a> 上获取 (cdnjs 的版本更新可能略滞后)。</p>
<p>请确认了解<a href="https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A">不同构建版本</a>并在你发布的站点中使用<strong>生产环境版本</strong>，把 <code>vue.js</code> 换成 <code>vue.min.js</code>。这是一个更小的构建，可以带来比开发环境下更快的速度体验。</p>
<h3 id="NPM"><a href="#NPM" class="headerlink" title="NPM"></a>NPM</h3><p>在用 Vue 构建大型应用时推荐使用 NPM 安装<a href="https://cn.vuejs.org/v2/guide/installation.html#footnote-1">[1]</a>。NPM 能很好地和诸如 <a href="https://webpack.js.org/">webpack</a> 或 <a href="http://browserify.org/">Browserify</a> 模块打包器配合使用。同时 Vue 也提供配套工具来开发<a href="https://cn.vuejs.org/v2/guide/single-file-components.html">单文件组件</a>。</p>
<figure class="highlight cmake"><table><tr><td class="code"><pre><code class="hljs cmake"><span class="hljs-comment"># 最新稳定版</span><br>$ npm <span class="hljs-keyword">install</span> vue<br></code></pre></td></tr></table></figure>
<h2 id="命令行工具-CLI"><a href="#命令行工具-CLI" class="headerlink" title="命令行工具 (CLI)"></a><a href="https://cli.vuejs.org/zh/">命令行工具 (CLI)</a></h2><p>Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：</p>
<p>通过 @vue/cli 实现的交互式的项目脚手架。<br>通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。<br>一个运行时依赖 (@vue/cli-service)，该依赖：<br>可升级；<br>基于 webpack 构建，并带有合理的默认配置；<br>可以通过项目内的配置文件进行配置；<br>可以通过插件进行扩展。<br>一个丰富的官方插件集合，集成了前端生态中最好的工具。<br>一套完全图形化的创建和管理 Vue.js 项目的用户界面。<br>Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。</p>
]]></content>
      <tags>
        <tag>vue</tag>
      </tags>
  </entry>
  <entry>
    <title>Hello World</title>
    <url>/2024/01/22/hexo/435244c26d39/</url>
    <content><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><span id="more"></span>

<h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">$ hexo new <span class="hljs-string">&quot;My New Post&quot;</span><br></code></pre></td></tr></table></figure>

<p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">$ hexo server<br></code></pre></td></tr></table></figure>

<p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">$ hexo generate<br></code></pre></td></tr></table></figure>

<p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">$ hexo deploy<br></code></pre></td></tr></table></figure>

<p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>
]]></content>
      <categories>
        <category>hexo</category>
      </categories>
      <tags>
        <tag>hexo</tag>
      </tags>
  </entry>
  <entry>
    <title>git</title>
    <url>/2021/11/01/git/0e5e66b4b6b0/</url>
    <content><![CDATA[<h2 id="git是什么？"><a href="#git是什么？" class="headerlink" title="git是什么？"></a>git是什么？</h2><p> Git是一种分布式的版本控制软件， 它像是把数据看作是对小型文件系统的一系列快照。 在 Git 中，每当你提交更新或保存项目状态时，它基本上就会对当时的全部文件创建一个快照并保存这个快照的索引。 为了效率，如果文件没有修改，Git 不再重新存储该文件，而是只保留一个链接指向之前存储的文件。 Git 对待数据更像是一个 <font color=amber>快照流</font>。</p>
<h2 id="git的特点"><a href="#git的特点" class="headerlink" title="git的特点"></a>git的特点</h2><ol>
<li>直接记录快照，而非差异比较</li>
<li>近乎所有操作都是本地执行</li>
<li>Git 保证完整性 （Git 数据库中保存的信息都是以文件内容的哈希值来索引，而不是文件名。）</li>
<li>Git 一般只添加数据</li>
</ol>
<div class="note default modern"><p> Git 用以计算校验和的机制叫做 SHA-1 散列（hash，哈希）。 这是一个由 40 个十六进制字符（0-9 和 a-f）组成的字符串，基于 Git 中文件的内容或目录结构计算出来。 SHA-1 哈希看起来是这样：</p>
<figure class="highlight dns"><table><tr><td class="code"><pre><code class="hljs dns"><span class="hljs-number">24</span>b9da6552252987aa493b52f8696cd<span class="hljs-number">6d3b00373</span><br></code></pre></td></tr></table></figure></div>

<h2 id="git的三种区域划分"><a href="#git的三种区域划分" class="headerlink" title="git的三种区域划分"></a>git的三种区域划分</h2><ul>
<li><p> 已修改（modified）：表示修改了文件，但还没保存到数据库中。</p>
</li>
<li><p>已暂存（staged）： 表示对一个已修改文件的当前版本做了标记，使之包含在下次提交的快照中。</p>
</li>
<li><p>已提交（committed）：表示数据已经安全地保存在本地数据库中。</p>
</li>
</ul>
<p><img src="https://git-scm.com/book/en/v2/images/areas.png" alt="git三种区域"></p>
<h2 id="初次运行-Git-前的配置"><a href="#初次运行-Git-前的配置" class="headerlink" title="初次运行 Git 前的配置"></a>初次运行 Git 前的配置</h2><h3 id="用户信息"><a href="#用户信息" class="headerlink" title="用户信息"></a>用户信息</h3><p>安装完 Git 之后，要做的第一件事就是设置你的用户名和邮件地址。 这一点很重要，因为每一个 Git 提交都会使用这些信息，它们会写入到你的每一次提交中，不可更改：</p>
<figure class="highlight verilog"><table><tr><td class="code"><pre><code class="hljs verilog">git <span class="hljs-keyword">config</span> --<span class="hljs-keyword">global</span> user<span class="hljs-variable">.name</span> <span class="hljs-string">&quot;John Doe&quot;</span><br>git <span class="hljs-keyword">config</span> --<span class="hljs-keyword">global</span> user<span class="hljs-variable">.email</span> johndoe@example<span class="hljs-variable">.com</span><br></code></pre></td></tr></table></figure>

<div class="note default modern"><p>再次强调，如果使用了 –global 选项，那么该命令只需要运行一次，因为之后无论你在该系统上做任何事情， Git 都会使用那些信息。 当你想针对特定项目使用不同的用户名称与邮件地址时，可以在那个项目目录下运行没有 –global 选项的命令来配置。</p>
</div>

<h3 id="文本编辑器"><a href="#文本编辑器" class="headerlink" title="文本编辑器"></a>文本编辑器</h3><p>在 Windows 系统上，如果你想要使用别的文本编辑器，那么必须指定可执行文件的完整路径。 它可能随你的编辑器的打包方式而不同。</p>
<figure class="highlight brainfuck"><table><tr><td class="code"><pre><code class="hljs brainfuck"><span class="hljs-comment">git</span> <span class="hljs-comment">config</span> --<span class="hljs-comment">global</span> <span class="hljs-comment">core</span><span class="hljs-string">.</span><span class="hljs-comment">editor</span> <span class="hljs-comment">&quot;&#x27;C:/Program</span> <span class="hljs-comment">Files/Notepad</span>++<span class="hljs-comment">/notepad</span>++<span class="hljs-string">.</span><span class="hljs-comment">exe&#x27;</span> <span class="hljs-literal">-</span><span class="hljs-comment">multiInst</span> <span class="hljs-literal">-</span><span class="hljs-comment">notabbar</span> <span class="hljs-literal">-</span><span class="hljs-comment">nosession</span> <span class="hljs-literal">-</span><span class="hljs-comment">noPlugin&quot;</span><br></code></pre></td></tr></table></figure>

<h3 id="检查配置信息"><a href="#检查配置信息" class="headerlink" title="检查配置信息"></a>检查配置信息</h3><figure class="highlight lua"><table><tr><td class="code"><pre><code class="hljs lua">git <span class="hljs-built_in">config</span> <span class="hljs-comment">--list</span><br></code></pre></td></tr></table></figure>
<pre>
PS C:\Users\starry\Desktop\hexo-new> git config --list
diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge -- %f
filter.lfs.process=git-lfs filter-process
filter.lfs.required=true
http.sslbackend=openssl
http.sslcainfo=D:/dev/git/Git/mingw64/ssl/certs/ca-bundle.crt
core.autocrlf=true
core.fscache=true
core.symlinks=false
pull.rebase=false
credential.helper=manager-core
credential.https://dev.azure.com.usehttppath=true
:...skipping...
diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge -- %f
filter.lfs.process=git-lfs filter-process
filter.lfs.required=true
http.sslbackend=openssl
http.sslcainfo=D:/dev/git/Git/mingw64/ssl/certs/ca-bundle.crt    
core.autocrlf=true
core.fscache=true
core.symlinks=false
pull.rebase=false
credential.helper=manager-core
credential.https://dev.azure.com.usehttppath=true
init.defaultbranch=master
core.editor="D:\dev\vscode\Microsoft VS Code\bin\code.cmd" --wait
user.email=18827637106@163.com
user.name=mhist
http.sslverify=false
http.postbuffer=524288000
</pre>

<p>使用该命令后，你会获得如上的键值对形式的文件，当然你也可以使用命令，通过键来获得你需要得键值</p>
<figure class="highlight arduino"><table><tr><td class="code"><pre><code class="hljs arduino">git config &lt;key&gt;<br></code></pre></td></tr></table></figure>
<pre>
PS C:\Users\starry\Desktop\hexo-new> git config core.fscache
true
</pre>

<h2 id="获取帮助和官方手册"><a href="#获取帮助和官方手册" class="headerlink" title="获取帮助和官方手册"></a>获取帮助和官方手册</h2><figure class="highlight arduino"><table><tr><td class="code"><pre><code class="hljs arduino">git help config<br></code></pre></td></tr></table></figure>
<p>输入命令后会在浏览器打开手册，通过html文件来展示。实际在安装git软件的时候会在相应的文件夹中，博主的文件对应路径为：</p>
<figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">file:<span class="hljs-regexp">//</span><span class="hljs-regexp">/D:/</span>dev<span class="hljs-regexp">/git/</span>Git<span class="hljs-regexp">/mingw64/</span>share<span class="hljs-regexp">/doc/gi</span>t-doc/git-config.html<br></code></pre></td></tr></table></figure>

<h2 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h2><table>
<thead>
<tr>
<th align="center">命令</th>
<th align="center">效果</th>
<th align="center">场景</th>
</tr>
</thead>
<tbody><tr>
<td align="center">git clone url</td>
<td align="center">在本地创建相应的仓库</td>
<td align="center">用于克隆目标链接的文件</td>
</tr>
<tr>
<td align="center">git init</td>
<td align="center">在已存在目录中初始化仓库</td>
<td align="center">用于初始化</td>
</tr>
<tr>
<td align="center">git status</td>
<td align="center">显示文件分支和文件提交情况和工作区情况</td>
<td align="center">用于检测当前仓库文件状态</td>
</tr>
<tr>
<td align="center">git add</td>
<td align="center">使用文件或目录的路径作为参数，目录路径下所有文件会被追踪</td>
<td align="center">用于跟踪新文件，将文件放到暂存区</td>
</tr>
<tr>
<td align="center">git diff</td>
<td align="center">本身只显示尚未暂存的改动，而不是自上次提交以来所做的所有改动</td>
<td align="center">用于查看已暂存和未暂存的修改</td>
</tr>
<tr>
<td align="center">git commit</td>
<td align="center">将暂存区的文件提交,可通过<font color=camel>git commit -m “添加描述信息”</font></td>
<td align="center">用于提交更新</td>
</tr>
<tr>
<td align="center">git rm</td>
<td align="center">若文件不在暂存区 <font color=tomato>git rm 文件名 </font>；否则，使用<font color=camel>git rm -f 文件名</font></td>
<td align="center">用于移除文件，<a href="https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E8%AE%B0%E5%BD%95%E6%AF%8F%E6%AC%A1%E6%9B%B4%E6%96%B0%E5%88%B0%E4%BB%93%E5%BA%93">其他删除细节参照链接</a></td>
</tr>
<tr>
<td align="center">git mv 原文件名 新文件名</td>
<td align="center">实质：<code>mv README.md README；git rm README.md；git add README</code></td>
<td align="center">用于移动文件或者修改文件名</td>
</tr>
<tr>
<td align="center">git log</td>
<td align="center">在控制台输入命令后会显示以哈希值版本，作者，提交时间组成的内容</td>
<td align="center">用于查看提交历史</td>
</tr>
</tbody></table>
<div class="note default modern"><p>如果文件已被跟踪，然后再后续过程中被修改，则该跟踪文件的内容发生了变化，但还没有放到暂存区。 要暂存这次更新，需要运行 git add 命令。 这是个多功能命令：可以用它开始跟踪新文件，或者把已跟踪的文件放到暂存区，还能用于合并时把有冲突的文件标记为已解决状态等。 将这个命令理解为“精确地将内容添加到下一次提交中”</p>
</div>

<h3 id="git-log-配置"><a href="#git-log-配置" class="headerlink" title="git log 配置"></a>git log 配置</h3><p><a href="https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E6%9F%A5%E7%9C%8B%E6%8F%90%E4%BA%A4%E5%8E%86%E5%8F%B2">配置例子具体链接</a></p>
<p>例子：将提交版本的哈希值用简短形式展示</p>
<pre>
PS C:\Users\starry\Desktop\hexo-new\blog> git log --pretty=format:"%h"
0f2dda8
40f740a
668fc87
2b7da17
418255c
7601831
f89d8a5
</pre>

<h3 id="撤销操作"><a href="#撤销操作" class="headerlink" title="撤销操作"></a>撤销操作</h3><ol>
<li><p>它一般用于解决在开发过程中因为细微的操作导致的问题，比如在提交完成后发现有些文件忘记更新到缓存区，导致文件没有提交，而文件又不是很多，如果再次提交，会增多提交历史中的事件轴，为了解决这一问题可以使用以下命令，它会提交第二次的修改，从效果上来说，就像是旧有的提交从未存在过一样，它并不会出现在仓库的历史中。</p>
<figure class="highlight pgsql"><table><tr><td class="code"><pre><code class="hljs pgsql">git <span class="hljs-keyword">commit</span> <span class="hljs-comment">--amend</span><br></code></pre></td></tr></table></figure></li>
<li><p>取消暂存</p>
<figure class="highlight sas"><table><tr><td class="code"><pre><code class="hljs sas">git <span class="hljs-meta">reset</span> HEAD &lt;<span class="hljs-meta">file</span>&gt;...<br></code></pre></td></tr></table></figure></li>
</ol>
<h2 id="远程仓库"><a href="#远程仓库" class="headerlink" title="远程仓库"></a>远程仓库</h2><h3 id="查看远程仓库"><a href="#查看远程仓库" class="headerlink" title="查看远程仓库"></a>查看远程仓库</h3><figure class="highlight ebnf"><table><tr><td class="code"><pre><code class="hljs ebnf"><span class="hljs-attribute">git remote</span><br></code></pre></td></tr></table></figure>
<figure class="highlight ebnf"><table><tr><td class="code"><pre><code class="hljs ebnf"><span class="hljs-attribute">git remote -v</span><br></code></pre></td></tr></table></figure>
<h3 id="添加远程仓库"><a href="#添加远程仓库" class="headerlink" title="添加远程仓库"></a>添加远程仓库</h3><figure class="highlight vim"><table><tr><td class="code"><pre><code class="hljs vim">git remote <span class="hljs-built_in">add</span> <span class="hljs-symbol">&lt;shortname&gt;</span> <span class="hljs-symbol">&lt;url&gt;</span><br></code></pre></td></tr></table></figure>
<h3 id="从远程仓库拉取"><a href="#从远程仓库拉取" class="headerlink" title="从远程仓库拉取"></a>从远程仓库拉取</h3><figure class="highlight xml"><table><tr><td class="code"><pre><code class="hljs xml">git fetch <span class="hljs-tag">&lt;<span class="hljs-name">remote</span>&gt;</span><br></code></pre></td></tr></table></figure>
<h3 id="推送到远程仓库"><a href="#推送到远程仓库" class="headerlink" title="推送到远程仓库"></a>推送到远程仓库</h3><figure class="highlight maxima"><table><tr><td class="code"><pre><code class="hljs maxima">git <span class="hljs-built_in">push</span> <span class="hljs-built_in">origin</span> master<br></code></pre></td></tr></table></figure>
<h3 id="查看某个远程仓库"><a href="#查看某个远程仓库" class="headerlink" title="查看某个远程仓库"></a>查看某个远程仓库</h3><figure class="highlight xml"><table><tr><td class="code"><pre><code class="hljs xml">git remote show <span class="hljs-tag">&lt;<span class="hljs-name">remote</span>&gt;</span> <br></code></pre></td></tr></table></figure>
<h3 id="远程仓库的重命名"><a href="#远程仓库的重命名" class="headerlink" title="远程仓库的重命名"></a>远程仓库的重命名</h3><p>例如，想要将 pb 重命名为 paul，可以用 git remote rename 这样做：</p>
<figure class="highlight coq"><table><tr><td class="code"><pre><code class="hljs coq">git remote <span class="hljs-built_in">rename</span> pb paul<br></code></pre></td></tr></table></figure>
<h3 id="远程仓库的删除"><a href="#远程仓库的删除" class="headerlink" title="远程仓库的删除"></a>远程仓库的删除</h3><figure class="highlight routeros"><table><tr><td class="code"><pre><code class="hljs routeros">git remote <span class="hljs-builtin-name">remove</span> 远程仓库名<br></code></pre></td></tr></table></figure>

<h2 id="git分支与合并"><a href="#git分支与合并" class="headerlink" title="git分支与合并"></a>git分支与合并</h2><ol>
<li><p>查看分支 </p>
<figure class="highlight ebnf"><table><tr><td class="code"><pre><code class="hljs ebnf"><span class="hljs-attribute">git branch</span><br></code></pre></td></tr></table></figure></li>
<li><p>创建分支</p>
<figure class="highlight mipsasm"><table><tr><td class="code"><pre><code class="hljs mipsasm">git <span class="hljs-keyword">branch </span>分支名称<br></code></pre></td></tr></table></figure></li>
<li><p>切换分支</p>
<figure class="highlight nginx"><table><tr><td class="code"><pre><code class="hljs nginx"><span class="hljs-attribute">git</span> checkout 分支名称<br></code></pre></td></tr></table></figure></li>
<li><p>分支合并<br>假设现在有两个分支，分别为master和test分支，当前你在master分支上，可以使用以下命令将test分支上的内容合并到master分支上。</p>
<figure class="highlight stata"><table><tr><td class="code"><pre><code class="hljs stata">git <span class="hljs-keyword">merge</span> <span class="hljs-keyword">test</span><br></code></pre></td></tr></table></figure></li>
</ol>
<p>合并冲突：</p>
<ol start="5">
<li>删除分支<figure class="highlight mipsasm"><table><tr><td class="code"><pre><code class="hljs mipsasm">git <span class="hljs-keyword">branch </span>-d 分支名称<br></code></pre></td></tr></table></figure></li>
</ol>
]]></content>
      <categories>
        <category>git</category>
      </categories>
      <tags>
        <tag>git</tag>
      </tags>
  </entry>
  <entry>
    <title>hexo （mixed-content）</title>
    <url>/2024/06/24/hexo/006b45bc9237/</url>
    <content><![CDATA[<h1 id="遇到mixed-content"><a href="#遇到mixed-content" class="headerlink" title="遇到mixed-content"></a>遇到mixed-content</h1><p>最新、在学习Java代码的过程中有图片上传的需求、于是开始研究起了MINIO、在存储服务器搭建成功之后、也能够生成浏览器能够直接访问的图片链接、但是在记录博客的时候、想将云存储的图片直接作为图床图片用于markdown文档、 发现被屏蔽了。</p>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/mixed-content.png" alt="被屏蔽"></p>
<h1 id="问题原因"><a href="#问题原因" class="headerlink" title="问题原因"></a>问题原因</h1><p>经过网络查询、发现是因为协议的不同、导致无法将http协议自动升级为https, 于是发现可以使用</p>
<p>Adding this to your HTML header looks like this:</p>
<figure class="highlight routeros"><table><tr><td class="code"><pre><code class="hljs routeros">&lt;meta <span class="hljs-attribute">http-equiv</span>=<span class="hljs-string">&quot;Content-Security-Policy&quot;</span> <span class="hljs-attribute">content</span>=<span class="hljs-string">&quot;upgrade-insecure-requests&quot;</span> /&gt;<br></code></pre></td></tr></table></figure>

<p>内容安全策略（Content-Security-Policy, CSP）：这是网页开发中引入的一项关键安全特性，旨在通过为浏览器定义一套关于哪些内容来源可信任的规则，帮助防止跨站脚本（XSS）攻击及其他代码注入攻击。它使网页开发者能够为脚本、样式表、图片和其他资源指定合法的来源。</p>
<p>升级不安全请求（upgrade-insecure-requests）：这是内容安全策略头中的一项具体指令。当包含此指令时，它要求浏览器将所有不安全的请求（即使用HTTP的请求）视为通过HTTPS发出的请求。实际上，这意味着只要服务器支持HTTPS，浏览器就会尝试在发起网络请求之前，将请求URL从http://重写为https://。此指令通过减少在整个网站上更新硬编码URL的需求，简化了向HTTPS迁移的过程。</p>
<p>需要注意的是，尽管此指令通过鼓励使用HTTPS来提升安全性，但它本身并不是一个全面的解决方案。一个完整的内容安全策略实施通常还包括明确指定各种类型内容的允许来源。此外，仅依赖于upgrade-insecure-requests可能无法涵盖应用程序资源或脚本中存在显式协议引用的所有情况。因此，在实施此类更改后彻底测试您的网站至关重要，以确保一切如预期般正常运行。</p>
<h1 id="博客配置文件定位"><a href="#博客配置文件定位" class="headerlink" title="博客配置文件定位"></a>博客配置文件定位</h1><p>themes/butterfly/_config.yml</p>
<figure class="highlight routeros"><table><tr><td class="code"><pre><code class="hljs routeros"><span class="hljs-comment"># Inject</span><br><span class="hljs-comment"># Insert the code to head (before &#x27;&lt;/head&gt;&#x27; tag) and the bottom (before &#x27;&lt;/body&gt;&#x27; tag)</span><br><span class="hljs-comment"># 插入代码到头部 &lt;/head&gt; 之前 和 底部 &lt;/body&gt; 之前</span><br>inject:<br>  head:<br>    # - &lt;link <span class="hljs-attribute">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attribute">href</span>=<span class="hljs-string">&quot;/xxx.css&quot;</span>&gt;<br>    &lt;meta <span class="hljs-attribute">http-equiv</span>=<span class="hljs-string">&quot;Content-Security-Policy&quot;</span> <span class="hljs-attribute">content</span>=<span class="hljs-string">&quot;upgrade-insecure-requests&quot;</span> /&gt;<br>  bottom:<br>    # - &lt;script <span class="hljs-attribute">src</span>=<span class="hljs-string">&quot;xxxx&quot;</span>&gt;&lt;/script&gt;<br><br></code></pre></td></tr></table></figure>

<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/CSP%20preview.png" alt="加入后的效果"></p>
<h1 id="加入上述但是还是无法访问"><a href="#加入上述但是还是无法访问" class="headerlink" title="加入上述但是还是无法访问"></a>加入上述但是还是无法访问</h1><p>最后是将minio服务升级为https</p>
<p><a href="https://www.elibaron.com/arch/minio/minio-https.html#_3-3-docker%E5%90%AF%E5%8A%A8">参考学习</a></p>
<p><a href="https://min.io/docs/minio/linux/operations/network-encryption.html?ref=docs-redirect#enabling-tls">minio官方文档： tls</a></p>
<p><a href="https://github.com/minio/certgen">A dead simple tool to generate self signed certificates for MinIO TLS deployments</a></p>
<p>使用命令行下载：Linux    amd64 (我的环境是Linux系统)</p>
<figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">wget https:<span class="hljs-regexp">//gi</span>thub.com<span class="hljs-regexp">/minio/</span>certgen<span class="hljs-regexp">/releases/</span>latest<span class="hljs-regexp">/download/</span>certgen-linux-amd64<br></code></pre></td></tr></table></figure>


<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/minio-https.png" alt="minio-https"></p>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/minio-https-api.png" alt="minio-https-api"></p>
]]></content>
      <categories>
        <category>hexo</category>
      </categories>
      <tags>
        <tag>hexo</tag>
      </tags>
  </entry>
  <entry>
    <title>关于开始搭建hexo博客这件事</title>
    <url>/2021/04/20/hexo/5fcb7dadb6f9/</url>
    <content><![CDATA[<h1 id="hexo个人博客搭建"><a href="#hexo个人博客搭建" class="headerlink" title="hexo个人博客搭建"></a>hexo个人博客搭建</h1><h2 id="为什么会搭建hexo博客"><a href="#为什么会搭建hexo博客" class="headerlink" title="为什么会搭建hexo博客"></a>为什么会搭建hexo博客</h2><p>  原因：<br>    1.用于前端学习记录、且便于复习，因为经过加工一次的比外来搜索的资料来说更容易让大脑快速识别与利用。<br>    2.阿里云轻量级WordPress服务器对非在校生的优惠终止，且个人网站将于2021年5月份到期，这是我的个人WordPress博客链接 <a href="http://www.codetotoro.cn/">www.codetotoro.cn</a>，同时因为服务器类型的缘故，按照提交工单时工作人员的说法，相关的数据迁移是无法进行的，除非是继续续费。<br>    3.部署方便且相关的学习教程更多，且官方的教程及相应的主题教程很全面，同时社区活跃，搭建博客的相关配置包括hexo editor都很容易找到，最重要的是部署方便，且bug很少，即使是使用外置主题，而且配置的修改采用注释/取消注释的方式进行，方便日后修改，而不用每次都需要根据官方文档再去配置，省去了很多麻烦。<br>  <span id="more"></span></p>
<h2 id="搭建博客的相关教程"><a href="#搭建博客的相关教程" class="headerlink" title="搭建博客的相关教程"></a>搭建博客的相关教程</h2><h3 id="视频教程"><a href="#视频教程" class="headerlink" title="视频教程"></a>视频教程</h3><p>  来自哔哩哔哩up-codesheep的视频教程，讲解细致全面<br>  <a href="https://www.bilibili.com/video/BV1Yb411a7ty/?spm_id_from=333.788.recommend_more_video.0">手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo</a><br>  学习笔记<br>  <pre><br>  ---    #安装Nodejs<br>node -v    #查看node版本<br>npm -v    #查看npm版本<br>npm install -g cnpm --registry=<a href="http://registry.npm.taobao.org/">http://registry.npm.taobao.org</a>    #安装淘宝的cnpm 管理器<br>cnpm -v    #查看cnpm版本<br>cnpm install -g hexo-cli    #安装hexo框架<br>hexo -v    #查看hexo版本<br>mkdir blog    #创建blog目录<br>cd blog     #进入blog目录<br>sudo hexo init     #生成博客 初始化博客<br>hexo s    #启动本地博客服务<br><a href="http://localhost:4000/">http://localhost:4000/</a>    #本地访问地址<br>hexo n 我的第一篇文章 #创建新的文章<br>#返回blog目录<br>hexo clean #清理<br>hexo g #生成<br>#Github创建一个新的仓库 YourGithubName.github.io<br>#在blog目录下安装git部署插件<br>   cnpm install --save hexo-deployer-git </p>
<hr>
<h2 id="配置-config-yml"><a href="#配置-config-yml" class="headerlink" title="#配置_config.yml "></a>#配置_config.yml </h2><pre><code># Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
      type: git
     repo: https://github.com/YourGithubName/YourGithubName.github.io.git
      branch: master
</code></pre>
<hr>
<p>hexo d    #部署到Github仓库里<br><a href="https://yourgithubname.github.io/">https://YourGithubName.github.io/</a>  #访问这个地址可以查看博客</p>
<p> git clone <a href="https://github.com/litten/hexo-theme-yilia.git">https://github.com/litten/hexo-theme-yilia.git</a> themes/yilia  #下载yilia主题到本地</p>
<p>#修改hexo根目录下的 _config.yml 文件 ： theme: yilia</p>
<p>hexo c    #清理一下<br>hexo g    #生成<br>hexo s    #启动本地博客服务<br><a href="http://localhost:4000/">http://localhost:4000/</a>    #本地访问地址<br>hexo d    #部署到远程Github仓库<br><a href="https://yourgithubname.github.io/">https://YourGithubName.github.io/</a>  #查看博客<br>  </pre></p>
<hr>
<h3 id="官方文档及next主题官方文档"><a href="#官方文档及next主题官方文档" class="headerlink" title="官方文档及next主题官方文档"></a>官方文档及next主题官方文档</h3><p> 1.<a href="https://hexo.io/zh-cn/docs/">hexo文档</a><br> 2.<a href="http://theme-next.iissnan.com/getting-started.html">hexo-next主题文档</a></p>
<h2 id="博客的后续配置"><a href="#博客的后续配置" class="headerlink" title="博客的后续配置"></a>博客的后续配置</h2><p>  博客中有很多可用于拓展的地方，暂时还有很多不太了解，但是可以满足日常的写作需求以及部署，此处用于记录对于配置方面的自己的一些理解。</p>
<h3 id="配置-config-yml，gitee-github简单修改实现双部署"><a href="#配置-config-yml，gitee-github简单修改实现双部署" class="headerlink" title="配置_config.yml，gitee/github简单修改实现双部署"></a>配置_config.yml，gitee/github简单修改实现双部署</h3><pre><code>#配置_config.yml 
</code></pre>
<hr>
<pre><code># Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
      type: git
     repo: 
        gitee: https://gitee.com/mhist/mhist.git
    #https://github.com/Mhist/Mhist.github.io.git 
    #github
      branch: master
</code></pre>
<p>—–以上代码是我在实践过程中发现的一点，因为在github上是可以做到自动部署的，可是因为防火墙的原因导致访问经常失败，而gitee作为国内的github，访问速度是很快的，只是部署的时候需要手动更新，因为自动更新部署是要收费的。<br>    以上代码的使用方式是在repo中：<br>    1.部署到gitee时，按照hexo c; hexo g; hexo s; hexo d，然后到码云的位置点击更新即可。<img src="https://gitee.com/mhist/hexo-image/raw/master/img/20210421013409-giteePagesUpdateButton.png" alt="gitee pages update button">，然后可访问域名：<a href="https://mhist.gitee.io/">https://mhist.gitee.io/</a><br>    2.部署到github时，将gitee所在行用#注释掉即可，同时取消gitee下一行的#注释，按照hexo c; hexo g; hexo s; hexo d即可。然后可访问域名：<a href="https://mhist.github.io/">https://mhist.github.io/</a></p>
<h2 id="图床的设置"><a href="#图床的设置" class="headerlink" title="图床的设置"></a>图床的设置</h2><p>  作为使用Markdown来编辑文档的人来说，拥有一个好的图床是非常必要的。通过图床我们可以很好的管理我们的博客图片，同时能在多方正确显示。</p>
<h3 id="图床分类"><a href="#图床分类" class="headerlink" title="图床分类"></a>图床分类</h3><p>  现在比较流行的图床有很多，包括SM.MS图床、腾讯云cos、github图床、七牛云图床、Imgur图床、阿里云COS、又拍云图床、gitee。但同时具有安全、经济、使用方便、访问高速等多种优点的解决方案还是要数基于picgo+gitee的解决方案.</p>
<h3 id="picgo"><a href="#picgo" class="headerlink" title="picgo"></a>picgo</h3><p>  picgo是一款基于桌面端图床工具，方便我们对接本地和远程仓库，同时快速获取链接，同时支持链接的Markdown、HTML、URL、UBB、Custom等五种格式的选择，同时可以支持插件以丰富软件功能。<br>  推荐两个配置教程：</p>
<ol>
<li><a href="https://blog.csdn.net/disILLL/article/details/103962241?utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control&dist_request_id=1332024.918.16189409573562535&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control">配置教程1</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/128014135">配置教程2—插件</a></li>
<li><a href="https://github.com/Molunerfinn/PicGo/releases">picgo的github链接</a></li>
<li>picgo Windows <a href="https://pan.baidu.com/s/1y_yn9dl5aEAGHBX2c2KDPA">PicGo-Setup-2.3.0-beta.5.exe</a> 提取码：hexo</li>
</ol>
<h1 id="处理"><a href="#处理" class="headerlink" title="处理"></a>处理</h1>]]></content>
      <categories>
        <category>hexo</category>
      </categories>
      <tags>
        <tag>hexo</tag>
      </tags>
  </entry>
  <entry>
    <title>hexo样式修改汇总</title>
    <url>/2021/09/28/hexo/371af6f33ab0/</url>
    <content><![CDATA[<h1 id="hexo样式汇总"><a href="#hexo样式汇总" class="headerlink" title="hexo样式汇总"></a>hexo样式汇总</h1><h1 id="更改超链接格式（文字颜色）"><a href="#更改超链接格式（文字颜色）" class="headerlink" title="更改超链接格式（文字颜色）"></a>更改超链接格式（文字颜色）</h1><div class="note primary modern"><p><a href="https://vonsdite.github.io/posts/13afd8d4.html">参考链接:Von</a> </p>
</div>

<h2 id="插图编号-醒目文字"><a href="#插图编号-醒目文字" class="headerlink" title="插图编号| 醒目文字"></a>插图编号| 醒目文字</h2><figure class="highlight django"><table><tr><td class="code"><pre><code class="hljs django"><span class="xml"></span><br><span class="xml"></span><span class="hljs-template-tag">&#123;% <span class="hljs-name">note</span> default %&#125;</span><span class="xml"> 默认样式 </span><span class="hljs-template-tag">&#123;% <span class="hljs-name">endnote</span> %&#125;</span><span class="xml"></span><br><span class="xml"></span><span class="hljs-template-tag">&#123;% <span class="hljs-name">note</span> primary %&#125;</span><span class="xml"> 主要样式 </span><span class="hljs-template-tag">&#123;% <span class="hljs-name">endnote</span> %&#125;</span><span class="xml"></span><br><span class="xml"></span><span class="hljs-template-tag">&#123;% <span class="hljs-name">note</span> success %&#125;</span><span class="xml"> 成功样式 </span><span class="hljs-template-tag">&#123;% <span class="hljs-name">endnote</span> %&#125;</span><span class="xml"></span><br><span class="xml"></span><span class="hljs-template-tag">&#123;% <span class="hljs-name">note</span> info %&#125;</span><span class="xml"> 信息样式 </span><span class="hljs-template-tag">&#123;% <span class="hljs-name">endnote</span> %&#125;</span><span class="xml"></span><br><span class="xml"></span><span class="hljs-template-tag">&#123;% <span class="hljs-name">note</span> warning %&#125;</span><span class="xml"> 警告样式  </span><span class="hljs-template-tag">&#123;% <span class="hljs-name">endnote</span> %&#125;</span><span class="xml"></span><br><span class="xml"></span><span class="hljs-template-tag">&#123;% <span class="hljs-name">note</span> danger %&#125;</span><span class="xml"> 危险样式  </span><span class="hljs-template-tag">&#123;% <span class="hljs-name">endnote</span> %&#125;</span><span class="xml"></span><br><span class="xml"></span><br><span class="xml"></span><br></code></pre></td></tr></table></figure>
<div class="note default modern"><p>默认样式 </p>
</div>
<div class="note primary modern"><p>主要样式 </p>
</div>
<div class="note success modern"><p>成功样式 </p>
</div>
<div class="note info modern"><p>信息样式 </p>
</div>
<div class="note warning modern"><p>警告样式  </p>
</div>
<div class="note danger modern"><p>危险样式  </p>
</div>


<h2 id="使用选项卡"><a href="#使用选项卡" class="headerlink" title="使用选项卡"></a>使用选项卡</h2><figure class="highlight django"><table><tr><td class="code"><pre><code class="hljs django"><span class="hljs-template-tag">&#123;% <span class="hljs-name">tabs</span> tab,1 %&#125;</span><span class="xml"> 名字为tab，默认在第1个选项卡，如果是-1则隐藏</span><br><span class="xml"><span class="hljs-comment">&lt;!-- tab --&gt;</span></span><br><span class="xml">**选项卡 1** </span><br><span class="xml"><span class="hljs-comment">&lt;!-- endtab --&gt;</span></span><br><span class="xml"><span class="hljs-comment">&lt;!-- tab --&gt;</span></span><br><span class="xml">**选项卡 2**</span><br><span class="xml"><span class="hljs-comment">&lt;!-- endtab --&gt;</span></span><br><span class="xml"><span class="hljs-comment">&lt;!-- tab A --&gt;</span></span><br><span class="xml">**选项卡 3** 名字为A</span><br><span class="xml"><span class="hljs-comment">&lt;!-- endtab --&gt;</span></span><br><span class="xml"></span><span class="hljs-template-tag">&#123;% <span class="hljs-name">endtabs</span> %&#125;</span><br></code></pre></td></tr></table></figure>
<p>效果展示：</p>
<div class="tabs" id="tab"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tab-1">tab 1</button></li><li class="tab"><button type="button" data-href="#tab-2">tab 2</button></li><li class="tab"><button type="button" data-href="#tab-3">A</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tab-1"><p><strong>选项卡 1</strong> </p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tab-2"><p><strong>选项卡 2</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tab-3"><p><strong>选项卡 3</strong> 名字为A</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>
<h2 id="自动生成目录（hexo-toc）"><a href="#自动生成目录（hexo-toc）" class="headerlink" title="自动生成目录（hexo-toc）"></a>自动生成目录（hexo-toc）</h2><p>  主题自带的配置项，生成的目录是不能够点击到文章目录自动滑动到页面指定位置的。<br>  <figure class="highlight yaml"><table><tr><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># Table Of Contents in the Sidebar</span><br><span class="hljs-attr">toc:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">false</span><br><br>  <span class="hljs-comment"># Automatically add list number to toc.</span><br>  <span class="hljs-attr">number:</span> <span class="hljs-literal">true</span><br><br>  <span class="hljs-comment"># If true, all words will placed on next lines if header width longer then sidebar width.</span><br>  <span class="hljs-attr">wrap:</span> <span class="hljs-literal">false</span><br></code></pre></td></tr></table></figure><br>  通过hexo-toc生成的目录可以实现点击调转到指定页面位置，同时可以支持目录级别选择。</p>
<div class="note danger modern"><p><a href="https://www.dazhuanlan.com/bassd/topics/1055823">参考链接:hexo-toc，但是此链接还是无法解决目录的生成问题</a> </p>
</div>
<p>所以，重点是解决hexo-next主题自带的toc目录，锚点失效的原因：</p>
<div class="note success modern"><p><a href="https://blog.csdn.net/qq_42009500/article/details/116129303?utm_medium=distribute.pc_relevant.none-task-blog-2~default~OPENSEARCH~default-8.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~OPENSEARCH~default-8.no_search_link">参考链接:hexo-toc锚点失效—有效解决办法</a> </p>
</div>

<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20210928152335tocPostDetails.png" alt="目录锚点失效的原因"></p>
<p>报错文件路径: <font color=chocolate>themes/next/source/js/post-details.js</font></p>
<figure class="highlight reasonml"><table><tr><td class="code"><pre><code class="hljs reasonml"><span class="hljs-comment">// TOC item animation navigate &amp; prevent #item selector in adress bar.</span><br>  <span class="hljs-constructor">$(&#x27;.<span class="hljs-params">post</span>-<span class="hljs-params">toc</span> <span class="hljs-params">a</span>&#x27;)</span>.on(&#x27;click&#x27;, <span class="hljs-keyword">function</span> (e) &#123;<br>    e.prevent<span class="hljs-constructor">Default()</span>;<br>    var targetSelector = <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">NexT</span>.</span></span>utils.escape<span class="hljs-constructor">Selector(<span class="hljs-params">this</span>.<span class="hljs-params">getAttribute</span>(&#x27;<span class="hljs-params">href</span>&#x27;)</span>);<br><br>    &lt;!-- 添加下面这行代码, 重新解析 URL -&gt;<br>    targetSelector = decode<span class="hljs-constructor">URI(<span class="hljs-params">this</span>.<span class="hljs-params">getAttribute</span>(&#x27;<span class="hljs-params">href</span>&#x27;)</span>)<br><br>    var offset = <span class="hljs-constructor">$(<span class="hljs-params">targetSelector</span>)</span>.offset<span class="hljs-literal">()</span>.top;<br><br>    hasVelocity ?<br>      html.velocity(&#x27;stop&#x27;).velocity(&#x27;scroll&#x27;, &#123;<br>        offset: offset  + &#x27;px&#x27;,<br>        mobileHA: <span class="hljs-literal">false</span><br>      &#125;) :<br>      <span class="hljs-constructor">$(&#x27;<span class="hljs-params">html</span>, <span class="hljs-params">body</span>&#x27;)</span>.stop<span class="hljs-literal">()</span>.animate(&#123;<br>        scrollTop: offset<br>      &#125;, <span class="hljs-number">500</span>);<br>  &#125;);<br></code></pre></td></tr></table></figure>
<p>  经过上面的处理自动生成的目录可以正常跳转了，但是会根据页面的滑动区域自适应目录的展示，这对于需要根据目录直达指定内容的访客来说，很不方便，于是在css样式中对代码进行以下修改：  修改文件目录: <font color=camel>themes/next/source/css/_common/components/sidebar/sidebar-toc.styl</font></p>
<p>  找到如下的代码<br>  <figure class="highlight stylus"><table><tr><td class="code"><pre><code class="hljs stylus"><span class="hljs-selector-class">.post-toc</span> <span class="hljs-selector-class">.nav</span> <span class="hljs-selector-class">.nav-child</span> &#123; <span class="hljs-attribute">display</span>: none; &#125;<br></code></pre></td></tr></table></figure><br>  修改为</p>
<figure class="highlight stylus"><table><tr><td class="code"><pre><code class="hljs stylus"><span class="hljs-selector-class">.post-toc</span> <span class="hljs-selector-class">.nav</span> <span class="hljs-selector-class">.nav-child</span> &#123; <span class="hljs-attribute">display</span>: block; &#125;<br><br></code></pre></td></tr></table></figure>


<h2 id="next主题添加代码块一键复制功能"><a href="#next主题添加代码块一键复制功能" class="headerlink" title="next主题添加代码块一键复制功能"></a>next主题添加代码块一键复制功能</h2><div class="note success modern"><p><a href="https://blog.csdn.net/Awt_FuDongLai/article/details/107466848">参考链接:hexo-next代码块复制粘贴—成功复现</a> </p>
</div>

]]></content>
      <categories>
        <category>hexo</category>
      </categories>
      <tags>
        <tag>hexo</tag>
      </tags>
  </entry>
  <entry>
    <title>minio （一）</title>
    <url>/2024/06/22/minio/4dbfabd1f48a/</url>
    <content><![CDATA[<h1 id="minio"><a href="#minio" class="headerlink" title="minio"></a>minio</h1><p>minio的安装：</p>
<p><a href="https://www.minio.org.cn/download.shtml#/linux">以Linux系统安装为例</a></p>
<figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">wget https:<span class="hljs-regexp">//</span>dl.minio.org.cn<span class="hljs-regexp">/server/mi</span>nio<span class="hljs-regexp">/release/</span>linux-amd64/minio<br>chmod +x minio<br>MINIO_ROOT_USER=admin MINIO_ROOT_PASSWORD=password .<span class="hljs-regexp">/minio server /m</span>nt/data --console-address <span class="hljs-string">&quot;:9001&quot;</span><br></code></pre></td></tr></table></figure>

<div class="note warning modern"><p>其他：MINIO_ROOT_USER=mhist MINIO_ROOT_PASSWORD=mhist0129 ./minio server /mnt/data –console-address “:9001”</p>
<p> 运行以上命令的结果：<br> <img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/WechatIMG138.jpg"></p>
</div>


<ul>
<li>设置数据存放位置：/root/mhist/soft/minioFloder/data</li>
</ul>
<figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">MINIO_ROOT_USER=mhist MINIO_ROOT_PASSWORD=mhist0129 .<span class="hljs-regexp">/minio server /</span>root<span class="hljs-regexp">/mhist/</span>soft<span class="hljs-regexp">/minioFloder/</span>data --console-address <span class="hljs-string">&quot;:9000&quot;</span> --address <span class="hljs-string">&quot;:9001&quot;</span><br><br></code></pre></td></tr></table></figure>
<ul>
<li>修改公网ip</li>
</ul>
<p>查看是否正常启动</p>
<figure class="highlight vim"><table><tr><td class="code"><pre><code class="hljs vim"><span class="hljs-keyword">ps</span> -ef|<span class="hljs-keyword">grep</span> minio<br></code></pre></td></tr></table></figure>

<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20240622170157.png"></p>
<figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">腾讯云端口安全组放开<br>https:<span class="hljs-regexp">//</span>console.cloud.tencent.com<span class="hljs-regexp">/lighthouse/i</span>nstance/detail?rid=<span class="hljs-number">1</span>&amp;id=lhins-qf8lj47h&amp;tab=firewall<br></code></pre></td></tr></table></figure>

<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/minioStartSuccess.png" alt="启动成功"></p>
<p>但是这种方式会在关闭终端的时候自动关闭、以至于无法访问、所以需要配置自动启动服务。</p>
<p>参考链接：<a href="https://juejin.cn/post/7172092483197730823">CentOS下安装Minio、搭建Minio集群、SpringBoot整合Minio</a></p>
<figure class="highlight ini"><table><tr><td class="code"><pre><code class="hljs ini"><span class="hljs-section">[Unit]</span><br><span class="hljs-attr">Description</span>=Minio Service<br><br><span class="hljs-section">[Service]</span><br><span class="hljs-attr">Environment</span>=<span class="hljs-string">&quot;MINIO_ROOT_USER=mhist&quot;</span><br><span class="hljs-attr">Environment</span>=<span class="hljs-string">&quot;MINIO_ROOT_PASSWORD=mhistxxxx&quot;</span><br><span class="hljs-attr">ExecStart</span>=/home/minio/minio server /home/minio/data --console-address <span class="hljs-string">&quot;:9001&quot;</span> --address <span class="hljs-string">&quot;:9000&quot;</span><br><span class="hljs-attr">ExecReload</span>=/bin/kill -s HUP <span class="hljs-variable">$MAINPID</span><br><span class="hljs-attr">ExecStop</span>=/bin/kill -s QUIT <span class="hljs-variable">$MAINPID</span><br><span class="hljs-attr">StandardOutput</span>=/home/minio/minio.log<br><span class="hljs-attr">PrivateTmp</span>=<span class="hljs-literal">true</span><br><br><span class="hljs-section">[Install]</span><br><span class="hljs-attr">WantedBy</span>=multi-user.target<br><br></code></pre></td></tr></table></figure>


<h3 id="开机自启"><a href="#开机自启" class="headerlink" title="开机自启"></a>开机自启</h3><figure class="highlight vala"><table><tr><td class="code"><pre><code class="hljs vala"><span class="hljs-meta"># 重新刷新</span><br>systemctl daemon-reload<br><span class="hljs-meta"># 启动</span><br>systemctl start minio.service<br><span class="hljs-meta"># 查看状态</span><br>systemctl status minio -l<br><span class="hljs-meta"># 开机自启</span><br>systemctl enable minio.service<br></code></pre></td></tr></table></figure>

<h3 id="其他命令"><a href="#其他命令" class="headerlink" title="其他命令"></a>其他命令</h3><figure class="highlight dsconfig"><table><tr><td class="code"><pre><code class="hljs dsconfig"><span class="hljs-comment"># 启动minio</span><br><span class="hljs-string">systemctl</span> <span class="hljs-string">start</span> <span class="hljs-string">minio</span><br> <br><span class="hljs-comment">#设置开机自启动</span><br><span class="hljs-string">systemctl</span> <span class="hljs-string">enable</span> <span class="hljs-string">minio</span> <br> <br><span class="hljs-comment">#停止开机自启动</span><br><span class="hljs-string">systemctl</span> <span class="hljs-string">disable</span> <span class="hljs-string">minio</span><br> <br><span class="hljs-comment">#查看服务当前状态 </span><br><span class="hljs-string">systemctl</span> <span class="hljs-string">status</span> <span class="hljs-string">minio</span><br> <br><span class="hljs-comment">#重新启动服务</span><br><span class="hljs-string">systemctl</span> <span class="hljs-string">restart</span> <span class="hljs-string">minio</span>　  <br> <br><span class="hljs-comment">#查看所有已启动的服务 </span><br><span class="hljs-string">systemctl</span> <span class="hljs-built_in">list-units</span> <span class="hljs-built_in">--type=service</span> <br><br></code></pre></td></tr></table></figure>

<h3 id="指定的后台API-（9000）-以及前端控制页面（9001）"><a href="#指定的后台API-（9000）-以及前端控制页面（9001）" class="headerlink" title="指定的后台API （9000） 以及前端控制页面（9001）"></a>指定的后台API （9000） 以及前端控制页面（9001）</h3><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20240622220709.png" alt="启动完成、得到指定的后台API （9000） 以及前端控制页面（9001）"></p>
<h1 id="图片用于markdown"><a href="#图片用于markdown" class="headerlink" title="图片用于markdown"></a>图片用于markdown</h1><p><img src="https://119.91.213.59:9001/api/v1/buckets/mhist/objects/download?preview=true&prefix=WX20240623-204304@2x.png&version_id=4153bbe5-aed9-4016-b17a-4bcc0c65b79e" alt="启动完成、得到指定的后台API （9000） 以及前端控制页面（9001）"></p>
<img src="https://119.91.213.59:9001/api/v1/buckets/mhist/objects/download?preview=true&prefix=WX20240623-204304@2x.png&version_id=4153bbe5-aed9-4016-b17a-4bcc0c65b79e"/>


<h1 id="升级minio服务为https"><a href="#升级minio服务为https" class="headerlink" title="升级minio服务为https"></a>升级minio服务为https</h1><h2 id="通过接口调用的时候报错"><a href="#通过接口调用的时候报错" class="headerlink" title="通过接口调用的时候报错"></a>通过接口调用的时候报错</h2><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/errorHttps.png" alt="本地没有证书报错"></p>
<h2 id="使用keytool需要Java环境"><a href="#使用keytool需要Java环境" class="headerlink" title="使用keytool需要Java环境"></a>使用keytool需要Java环境</h2><p>对于zsh用户<br>macOS Catalina及以后，默认使用的是zsh。你需要编辑 ~/.zshrc 文件。同样，如果文件不存在则创建。使用以下命令编辑：</p>
<figure class="highlight arduino"><table><tr><td class="code"><pre><code class="hljs arduino">open -e ~/.zshrc<br></code></pre></td></tr></table></figure>
<p>在文件末尾添加与bash类似的行：</p>
<figure class="highlight routeros"><table><tr><td class="code"><pre><code class="hljs routeros"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">JAVA_HOME</span>=<span class="hljs-string">&quot;/Users/jiangyadong/dev/jdk/jdk17/Contents/Home&quot;</span><br><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$JAVA_HOME</span>/bin:$PATH<br></code></pre></td></tr></table></figure>
<p>保存并关闭文件后，运行以下命令使更改生效：</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash"><span class="hljs-built_in">source</span> ~/.zshrc<br></code></pre></td></tr></table></figure>


<p>检验配置<br>最后，重启终端或新开一个终端窗口，运行 java -version 和 javac -version 来验证配置是否成功。如果一切设置正确，你应该能看到它们的版本信息。<br><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/%E6%88%AA%E5%B1%8FJavaVersion.png" alt="javaVersion"></p>
<h2 id="安装证书"><a href="#安装证书" class="headerlink" title="安装证书"></a>安装证书</h2><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/keyTool%E5%AE%89%E8%A3%85%E8%AF%81%E4%B9%A6.png" alt="通过keytool 安装证书 (保持与线上服务器自生成证书一致)"></p>
<h2 id="调用接口发现还是报错"><a href="#调用接口发现还是报错" class="headerlink" title="调用接口发现还是报错"></a>调用接口发现还是报错</h2><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20240624211315.png" alt="报错信息"></p>
<h2 id="重新生成证书"><a href="#重新生成证书" class="headerlink" title="重新生成证书"></a>重新生成证书</h2><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20240624211421.png" alt="重新生成证书"></p>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20240624211549.png" alt="alt text"></p>
<h2 id="重新生成、重新安装证书、重启idea"><a href="#重新生成、重新安装证书、重启idea" class="headerlink" title="重新生成、重新安装证书、重启idea"></a>重新生成、重新安装证书、重启idea</h2><h3 id="调用接口"><a href="#调用接口" class="headerlink" title="调用接口"></a>调用接口</h3><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20240624212019.png" alt="成功上传"></p>
<h3 id="验证结果"><a href="#验证结果" class="headerlink" title="验证结果"></a>验证结果</h3><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20240624212218.png" alt="验证上传结果"></p>
<h3 id="返回预览文件链接"><a href="#返回预览文件链接" class="headerlink" title="返回预览文件链接"></a>返回预览文件链接</h3><p><a href="https://119.91.213.59:9001/api/v1/buckets/mhist/objects/download?preview=true&prefix=certgen-linux-amd64&version_id=9e562776-7b5e-4480-af1f-199d956a59b3">文件链接</a></p>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20240624212450.png" alt="接口调用演示"></p>
<p>验证服务器图片是否能够访问：</p>
<p><img src="https://119.91.213.59:9001/api/v1/buckets/mhist/objects/download?preview=true&prefix=keyTool%E5%AE%89%E8%A3%85%E8%AF%81%E4%B9%A6.png&version_id=ab781a5d-a159-4487-a462-ac7c27aec162" alt="证书"></p>
]]></content>
      <categories>
        <category>minio</category>
      </categories>
      <tags>
        <tag>minio</tag>
      </tags>
  </entry>
  <entry>
    <title>learn react</title>
    <url>/2021/04/24/uncategorized/c98970b16c20/</url>
    <content><![CDATA[<h1 id="react-入门"><a href="#react-入门" class="headerlink" title="react 入门"></a>react 入门</h1><h2 id="react框架基本介绍"><a href="#react框架基本介绍" class="headerlink" title="react框架基本介绍"></a>react框架基本介绍</h2><p>   <a href="https://reactjs.org/">react官方</a></p>
<h2 id="开发环境及脚手架安装"><a href="#开发环境及脚手架安装" class="headerlink" title="开发环境及脚手架安装"></a>开发环境及脚手架安装</h2><ul>
<li>查看node版本<figure class="highlight crmsh"><table><tr><td class="code"><pre><code class="hljs crmsh"><span class="hljs-keyword">node</span> <span class="hljs-title">-v</span><br></code></pre></td></tr></table></figure>
v14.16.0</li>
<li>查看npm版本<figure class="highlight crmsh"><table><tr><td class="code"><pre><code class="hljs crmsh"><span class="hljs-keyword">node</span> <span class="hljs-title">-v</span><br></code></pre></td></tr></table></figure>
6.14.11</li>
<li>安装脚手架<figure class="highlight cmake"><table><tr><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> -g create-react-app<br></code></pre></td></tr></table></figure>
cmd控制台反馈如下：<pre>
C:\Users\18827\AppData\Roaming\npm\create-react-app -> C:\Users\18827\AppData\Roaming\npm\node_modules\create-react-app\index.js</li>
</ul>
<p><a href="mailto:&#43;&#99;&#114;&#x65;&#x61;&#x74;&#101;&#45;&#x72;&#101;&#97;&#x63;&#x74;&#45;&#97;&#112;&#112;&#x40;&#x34;&#x2e;&#x30;&#46;&#51;">&#43;&#99;&#114;&#x65;&#x61;&#x74;&#101;&#45;&#x72;&#101;&#97;&#x63;&#x74;&#45;&#97;&#112;&#112;&#x40;&#x34;&#x2e;&#x30;&#46;&#51;</a><br>added 67 packages from 25 contributors in 22.805s<br> </pre></p>
<h2 id="创建项目文件夹，并开启demo"><a href="#创建项目文件夹，并开启demo" class="headerlink" title="创建项目文件夹，并开启demo"></a>创建项目文件夹，并开启demo</h2><ul>
<li><p>在电脑桌面同时按下Windows+R进入输入cmd,按enter</p>
</li>
<li><p>进入某个盘   例如  M:</p>
<figure class="highlight avrasm"><table><tr><td class="code"><pre><code class="hljs avrasm"><span class="hljs-symbol">m:</span><br></code></pre></td></tr></table></figure></li>
<li><p>创建文件夹</p>
   <figure class="highlight arduino"><table><tr><td class="code"><pre><code class="hljs arduino">mkdir ReactDemo<br></code></pre></td></tr></table></figure></li>
<li><p>进入文件夹  </p>
<figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash"><span class="hljs-built_in">cd</span> ReactDemo<br></code></pre></td></tr></table></figure></li>
<li><p>创建demo01</p>
<figure class="highlight dsconfig"><table><tr><td class="code"><pre><code class="hljs dsconfig"><span class="hljs-built_in">create-react-app</span> <span class="hljs-string">demo01</span><br></code></pre></td></tr></table></figure></li>
<li><p>控制台反馈</p>
<span id="more"></span>
<figure class="highlight sql"><table><tr><td class="code"><pre><code class="hljs sql"> Microsoft Windows [版本 <span class="hljs-number">10.0</span><span class="hljs-number">.19042</span><span class="hljs-number">.928</span>]<br>(c) Microsoft Corporation。保留所有权利。<br><br>C:\Users\<span class="hljs-number">18827</span><span class="hljs-operator">&gt;</span>m:<br><br>M:\<span class="hljs-operator">&gt;</span>mkdir ReactDemo<br><br>M:\<span class="hljs-operator">&gt;</span>cd ReactDemo<br><br>M:\ReactDemo<span class="hljs-operator">&gt;</span><span class="hljs-keyword">create</span><span class="hljs-operator">-</span>react<span class="hljs-operator">-</span>app demo01<br><br>Creating a <span class="hljs-keyword">new</span> React app <span class="hljs-keyword">in</span> M:\ReactDemo\demo01.<br><br>Installing packages. This might take a couple <span class="hljs-keyword">of</span> minutes.<br>Installing react, react<span class="hljs-operator">-</span>dom, <span class="hljs-keyword">and</span> react<span class="hljs-operator">-</span>scripts <span class="hljs-keyword">with</span> cra<span class="hljs-operator">-</span>template...<br><br>yarn <span class="hljs-keyword">add</span> v1<span class="hljs-number">.22</span><span class="hljs-number">.10</span><br>[<span class="hljs-number">1</span><span class="hljs-operator">/</span><span class="hljs-number">4</span>] Resolving packages...<br>[<span class="hljs-number">2</span><span class="hljs-operator">/</span><span class="hljs-number">4</span>] Fetching packages...<br>info fsevents<span class="hljs-variable">@1</span><span class="hljs-number">.2</span><span class="hljs-number">.13</span>: The platform &quot;win32&quot; <span class="hljs-keyword">is</span> incompatible <span class="hljs-keyword">with</span> this module.<br>info &quot;fsevents@1.2.13&quot; <span class="hljs-keyword">is</span> an optional dependency <span class="hljs-keyword">and</span> failed compatibility check. Excluding it <span class="hljs-keyword">from</span> installation.<br>info fsevents<span class="hljs-variable">@2</span><span class="hljs-number">.3</span><span class="hljs-number">.2</span>: The platform &quot;win32&quot; <span class="hljs-keyword">is</span> incompatible <span class="hljs-keyword">with</span> this module.<br>info &quot;fsevents@2.3.2&quot; <span class="hljs-keyword">is</span> an optional dependency <span class="hljs-keyword">and</span> failed compatibility check. Excluding it <span class="hljs-keyword">from</span> installation.<br>[<span class="hljs-number">3</span><span class="hljs-operator">/</span><span class="hljs-number">4</span>] Linking dependencies...<br>warning &quot;react-scripts &gt; @typescript-eslint/eslint-plugin &gt; tsutils@3.20.0&quot; has unmet peer dependency &quot;typescript@&gt;=2.8.0 || &gt;= 3.2.0-dev || &gt;= 3.3.0-dev || &gt;= 3.4.0-dev || &gt;= 3.5.0-dev || &gt;= 3.6.0-dev || &gt;= 3.6.0-beta || &gt;= 3.7.0-dev || &gt;= 3.7.0-beta&quot;.<br>[<span class="hljs-number">4</span><span class="hljs-operator">/</span><span class="hljs-number">4</span>] Building fresh packages...<br>success Saved lockfile.<br>success Saved <span class="hljs-number">7</span> <span class="hljs-keyword">new</span> dependencies.<br>info Direct dependencies<br>├─ cra<span class="hljs-operator">-</span>template<span class="hljs-variable">@1</span><span class="hljs-number">.1</span><span class="hljs-number">.2</span><br>├─ react<span class="hljs-operator">-</span>dom<span class="hljs-variable">@17</span><span class="hljs-number">.0</span><span class="hljs-number">.2</span><br>├─ react<span class="hljs-operator">-</span>scripts<span class="hljs-variable">@4</span><span class="hljs-number">.0</span><span class="hljs-number">.3</span><br>└─ react<span class="hljs-variable">@17</span><span class="hljs-number">.0</span><span class="hljs-number">.2</span><br>info <span class="hljs-keyword">All</span> dependencies<br>├─ cra<span class="hljs-operator">-</span>template<span class="hljs-variable">@1</span><span class="hljs-number">.1</span><span class="hljs-number">.2</span><br>├─ immer<span class="hljs-variable">@8</span><span class="hljs-number">.0</span><span class="hljs-number">.1</span><br>├─ react<span class="hljs-operator">-</span>dev<span class="hljs-operator">-</span>utils<span class="hljs-variable">@11</span><span class="hljs-number">.0</span><span class="hljs-number">.4</span><br>├─ react<span class="hljs-operator">-</span>dom<span class="hljs-variable">@17</span><span class="hljs-number">.0</span><span class="hljs-number">.2</span><br>├─ react<span class="hljs-operator">-</span>scripts<span class="hljs-variable">@4</span><span class="hljs-number">.0</span><span class="hljs-number">.3</span><br>├─ react<span class="hljs-variable">@17</span><span class="hljs-number">.0</span><span class="hljs-number">.2</span><br>└─ scheduler<span class="hljs-variable">@0</span><span class="hljs-number">.20</span><span class="hljs-number">.2</span><br>Done <span class="hljs-keyword">in</span> <span class="hljs-number">241.60</span>s.<br><br>Initialized a git repository.<br><br>Installing template dependencies <span class="hljs-keyword">using</span> yarnpkg...<br>yarn <span class="hljs-keyword">add</span> v1<span class="hljs-number">.22</span><span class="hljs-number">.10</span><br>[<span class="hljs-number">1</span><span class="hljs-operator">/</span><span class="hljs-number">4</span>] Resolving packages...<br>[<span class="hljs-number">2</span><span class="hljs-operator">/</span><span class="hljs-number">4</span>] Fetching packages...<br>info fsevents<span class="hljs-variable">@2</span><span class="hljs-number">.3</span><span class="hljs-number">.2</span>: The platform &quot;win32&quot; <span class="hljs-keyword">is</span> incompatible <span class="hljs-keyword">with</span> this module.<br>info &quot;fsevents@2.3.2&quot; <span class="hljs-keyword">is</span> an optional dependency <span class="hljs-keyword">and</span> failed compatibility check. Excluding it <span class="hljs-keyword">from</span> installation.<br>info fsevents<span class="hljs-variable">@1</span><span class="hljs-number">.2</span><span class="hljs-number">.13</span>: The platform &quot;win32&quot; <span class="hljs-keyword">is</span> incompatible <span class="hljs-keyword">with</span> this module.<br>info &quot;fsevents@1.2.13&quot; <span class="hljs-keyword">is</span> an optional dependency <span class="hljs-keyword">and</span> failed compatibility check. Excluding it <span class="hljs-keyword">from</span> installation.<br>[<span class="hljs-number">3</span><span class="hljs-operator">/</span><span class="hljs-number">4</span>] Linking dependencies...<br>warning &quot;react-scripts &gt; @typescript-eslint/eslint-plugin &gt; tsutils@3.20.0&quot; has unmet peer dependency &quot;typescript@&gt;=2.8.0 || &gt;= 3.2.0-dev || &gt;= 3.3.0-dev || &gt;= 3.4.0-dev || &gt;= 3.5.0-dev || &gt;= 3.6.0-dev || &gt;= 3.6.0-beta || &gt;= 3.7.0-dev || &gt;= 3.7.0-beta&quot;.<br>warning &quot; &gt; @testing-library/user-event@12.8.3&quot; has unmet peer dependency &quot;@testing-library/dom@&gt;=7.21.4&quot;.<br>[<span class="hljs-number">4</span><span class="hljs-operator">/</span><span class="hljs-number">4</span>] Building fresh packages...<br>success Saved lockfile.<br>success Saved <span class="hljs-number">17</span> <span class="hljs-keyword">new</span> dependencies.<br>info Direct dependencies<br>├─ <span class="hljs-variable">@testing</span><span class="hljs-operator">-</span>library<span class="hljs-operator">/</span>jest<span class="hljs-operator">-</span>dom<span class="hljs-variable">@5</span><span class="hljs-number">.12</span><span class="hljs-number">.0</span><br>├─ <span class="hljs-variable">@testing</span><span class="hljs-operator">-</span>library<span class="hljs-operator">/</span>react<span class="hljs-variable">@11</span><span class="hljs-number">.2</span><span class="hljs-number">.6</span><br>├─ <span class="hljs-variable">@testing</span><span class="hljs-operator">-</span>library<span class="hljs-operator">/</span><span class="hljs-keyword">user</span><span class="hljs-operator">-</span>event<span class="hljs-variable">@12</span><span class="hljs-number">.8</span><span class="hljs-number">.3</span><br>├─ react<span class="hljs-operator">-</span>dom<span class="hljs-variable">@17</span><span class="hljs-number">.0</span><span class="hljs-number">.2</span><br>├─ react<span class="hljs-variable">@17</span><span class="hljs-number">.0</span><span class="hljs-number">.2</span><br>└─ web<span class="hljs-operator">-</span>vitals<span class="hljs-variable">@1</span><span class="hljs-number">.1</span><span class="hljs-number">.1</span><br>info <span class="hljs-keyword">All</span> dependencies<br>├─ <span class="hljs-variable">@testing</span><span class="hljs-operator">-</span>library<span class="hljs-operator">/</span>dom<span class="hljs-variable">@7</span><span class="hljs-number">.30</span><span class="hljs-number">.4</span><br>├─ <span class="hljs-variable">@testing</span><span class="hljs-operator">-</span>library<span class="hljs-operator">/</span>jest<span class="hljs-operator">-</span>dom<span class="hljs-variable">@5</span><span class="hljs-number">.12</span><span class="hljs-number">.0</span><br>├─ <span class="hljs-variable">@testing</span><span class="hljs-operator">-</span>library<span class="hljs-operator">/</span>react<span class="hljs-variable">@11</span><span class="hljs-number">.2</span><span class="hljs-number">.6</span><br>├─ <span class="hljs-variable">@testing</span><span class="hljs-operator">-</span>library<span class="hljs-operator">/</span><span class="hljs-keyword">user</span><span class="hljs-operator">-</span>event<span class="hljs-variable">@12</span><span class="hljs-number">.8</span><span class="hljs-number">.3</span><br>├─ <span class="hljs-variable">@types</span><span class="hljs-operator">/</span>aria<span class="hljs-operator">-</span>query<span class="hljs-variable">@4</span><span class="hljs-number">.2</span><span class="hljs-number">.1</span><br>├─ <span class="hljs-variable">@types</span><span class="hljs-operator">/</span>jest<span class="hljs-variable">@26</span><span class="hljs-number">.0</span><span class="hljs-number">.22</span><br>├─ <span class="hljs-variable">@types</span><span class="hljs-operator">/</span>testing<span class="hljs-operator">-</span>library__jest<span class="hljs-operator">-</span>dom<span class="hljs-variable">@5</span><span class="hljs-number">.9</span><span class="hljs-number">.5</span><br>├─ css.escape<span class="hljs-variable">@1</span><span class="hljs-number">.5</span><span class="hljs-number">.1</span><br>├─ css<span class="hljs-variable">@3</span><span class="hljs-number">.0</span><span class="hljs-number">.0</span><br>├─ dom<span class="hljs-operator">-</span>accessibility<span class="hljs-operator">-</span>api<span class="hljs-variable">@0</span><span class="hljs-number">.5</span><span class="hljs-number">.4</span><br>├─ lz<span class="hljs-operator">-</span>string<span class="hljs-variable">@1</span><span class="hljs-number">.4</span><span class="hljs-number">.4</span><br>├─ min<span class="hljs-operator">-</span>indent<span class="hljs-variable">@1</span><span class="hljs-number">.0</span><span class="hljs-number">.1</span><br>├─ react<span class="hljs-operator">-</span>dom<span class="hljs-variable">@17</span><span class="hljs-number">.0</span><span class="hljs-number">.2</span><br>├─ react<span class="hljs-variable">@17</span><span class="hljs-number">.0</span><span class="hljs-number">.2</span><br>├─ redent<span class="hljs-variable">@3</span><span class="hljs-number">.0</span><span class="hljs-number">.0</span><br>├─ strip<span class="hljs-operator">-</span>indent<span class="hljs-variable">@3</span><span class="hljs-number">.0</span><span class="hljs-number">.0</span><br>└─ web<span class="hljs-operator">-</span>vitals<span class="hljs-variable">@1</span><span class="hljs-number">.1</span><span class="hljs-number">.1</span><br>Done <span class="hljs-keyword">in</span> <span class="hljs-number">22.61</span>s.<br>Removing template package <span class="hljs-keyword">using</span> yarnpkg...<br><br>yarn remove v1<span class="hljs-number">.22</span><span class="hljs-number">.10</span><br>[<span class="hljs-number">1</span><span class="hljs-operator">/</span><span class="hljs-number">2</span>] Removing <span class="hljs-keyword">module</span> cra<span class="hljs-operator">-</span>template...<br>[<span class="hljs-number">2</span><span class="hljs-operator">/</span><span class="hljs-number">2</span>] Regenerating lockfile <span class="hljs-keyword">and</span> installing missing dependencies...<br>info fsevents<span class="hljs-variable">@2</span><span class="hljs-number">.3</span><span class="hljs-number">.2</span>: The platform &quot;win32&quot; <span class="hljs-keyword">is</span> incompatible <span class="hljs-keyword">with</span> this module.<br>info &quot;fsevents@2.3.2&quot; <span class="hljs-keyword">is</span> an optional dependency <span class="hljs-keyword">and</span> failed compatibility check. Excluding it <span class="hljs-keyword">from</span> installation.<br>info fsevents<span class="hljs-variable">@1</span><span class="hljs-number">.2</span><span class="hljs-number">.13</span>: The platform &quot;win32&quot; <span class="hljs-keyword">is</span> incompatible <span class="hljs-keyword">with</span> this module.<br>info &quot;fsevents@1.2.13&quot; <span class="hljs-keyword">is</span> an optional dependency <span class="hljs-keyword">and</span> failed compatibility check. Excluding it <span class="hljs-keyword">from</span> installation.<br>warning &quot; &gt; @testing-library/user-event@12.8.3&quot; has unmet peer dependency &quot;@testing-library/dom@&gt;=7.21.4&quot;.<br>warning &quot;react-scripts &gt; @typescript-eslint/eslint-plugin &gt; tsutils@3.20.0&quot; has unmet peer dependency &quot;typescript@&gt;=2.8.0 || &gt;= 3.2.0-dev || &gt;= 3.3.0-dev || &gt;= 3.4.0-dev || &gt;= 3.5.0-dev || &gt;= 3.6.0-dev || &gt;= 3.6.0-beta || &gt;= 3.7.0-dev || &gt;= 3.7.0-beta&quot;.<br>success Uninstalled packages.<br>Done <span class="hljs-keyword">in</span> <span class="hljs-number">11.76</span>s.<br><br>Created git commit.<br><br>Success<span class="hljs-operator">!</span> Created demo01 <span class="hljs-keyword">at</span> M:\ReactDemo\demo01<br>Inside that directory, you can run several commands:<br><br>  yarn <span class="hljs-keyword">start</span><br>    Starts the development server.<br><br>  yarn build<br>    Bundles the app <span class="hljs-keyword">into</span> <span class="hljs-keyword">static</span> files <span class="hljs-keyword">for</span> production.<br><br>  yarn test<br>    Starts the test runner.<br><br>  yarn eject<br>    Removes this tool <span class="hljs-keyword">and</span> copies build dependencies, configuration files<br>    <span class="hljs-keyword">and</span> scripts <span class="hljs-keyword">into</span> the app directory. If you do this, you can’t go back<span class="hljs-operator">!</span><br><br>We suggest that you <span class="hljs-keyword">begin</span> <span class="hljs-keyword">by</span> typing:<br><br>  cd demo01<br>  yarn <span class="hljs-keyword">start</span><br><br>Happy hacking<span class="hljs-operator">!</span><br></code></pre></td></tr></table></figure>
<h3 id="记录一下yarn相关指令"><a href="#记录一下yarn相关指令" class="headerlink" title="记录一下yarn相关指令"></a>记录一下yarn相关指令</h3><p>Inside that directory, you can run several commands:</p>
<figure class="highlight crmsh"><table><tr><td class="code"><pre><code class="hljs crmsh">yarn <span class="hljs-literal">start</span><br></code></pre></td></tr></table></figure>
<p>Starts the development server.</p>
<figure class="highlight ebnf"><table><tr><td class="code"><pre><code class="hljs ebnf"><span class="hljs-attribute">yarn build</span><br></code></pre></td></tr></table></figure>
<p>Bundles the app into static files for production.</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">yarn <span class="hljs-built_in">test</span><br></code></pre></td></tr></table></figure>
<p>Starts the test runner.</p>
<figure class="highlight ebnf"><table><tr><td class="code"><pre><code class="hljs ebnf"><span class="hljs-attribute">yarn eject</span><br></code></pre></td></tr></table></figure>
<p>Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!</p>
<h2 id="按照提示指令启动项目"><a href="#按照提示指令启动项目" class="headerlink" title="按照提示指令启动项目"></a>按照提示指令启动项目</h2><figure class="highlight dos"><table><tr><td class="code"><pre><code class="hljs dos"><span class="hljs-built_in">cd</span> demo01<br>  yarn <span class="hljs-built_in">start</span><br></code></pre></td></tr></table></figure></li>
<li><p>控制台反馈<br>Compiled successfully!</p>
</li>
</ul>
<p>You can now view demo01 in the browser.</p>
<p>  Local:            <a href="http://localhost:3000/">http://localhost:3000</a><br>  On Your Network:  <a href="http://192.168.5.23:3000/">http://192.168.5.23:3000</a></p>
<p>Note that the development build is not optimized.<br>To create a production build, use yarn build.</p>
<ul>
<li>点击上述任一链接即可看到、即说明项目demo搭建成功！<br><img src="https://gitee.com/mhist/hexo-image/raw/master/img/ReactDemo-20210424120256.gif" alt="ReactDemo"></li>
</ul>
]]></content>
      <tags>
        <tag>react</tag>
      </tags>
  </entry>
  <entry>
    <title>mysql-多表</title>
    <url>/2021/11/14/mysql/6220192bee46/</url>
    <content><![CDATA[<h1 id="聚合函数"><a href="#聚合函数" class="headerlink" title="聚合函数"></a>聚合函数</h1><pre>
# 1.聚合函数的使用        所有数据当作一组
# 求所有手机的价格的总和
SELECT SUM(price) FROM `product`;
# 求所有华为手机的价格的总和
SELECT SUM(price) FROM `product` WHERE brand = '华为'；
# 求所有华为手机的平均价格
SELECT AVG(price) FROM `product` WHERE brand = '华为'；
# 求手机的最高价格
SELECT MAX(price) FROM `product`；
SELECT MIN(price) FROM `product`；

# 1.求华为手机的个数
SELECT COUNT(*) FROM `product` WHERE brand = '华为';
SELECT COUNT(*) FROM `product` WHERE brand = '苹果';    
SELECT COUNT(url) FROM `product` WHERE brand = '苹果';


SELECT COUNT(price) FROM `product`;
SELECT COUNT(DISTINCT price) FROM `product`;   #多个相同的价格只计算入一个

# 2. GROUP BY 分组： 华为、苹果、小米、vivo各自一组
SELECT brand , AVG(price),COUNT(*),AVG(score) FROM `product` GROUP BY brand;

# 3. 在上条的基础上加上：平均价格>2000d的手机 HAVING的使用
SELECT brand , AVG(price)  avgprice ,COUNT(*),AVG(score) FROM `product` GROUP BY brand HAVING avgprice > 2000 ;


# 分组后查结果用having，它作用于GGROUP BY，分组前查询结果用WHERE,WHERE作用于表

# 4.评分大于7.5的手机的平均价格
SELECT AVG(price) FROM `product` WHERE score > 7.5;

# 5.求所有手机 评分7.5以上,然后按照品牌分类，求出各自的平均价格
SELECT brand,AVG(price) FROM `product` WHERE score > 7.5 GROUP BY brand;
</pre>

<h2 id="多表查询"><a href="#多表查询" class="headerlink" title="多表查询"></a>多表查询</h2><p>我们如果是希望在查询到产品时，显示对应的品牌的相关信息，因为数据是存放在两张表中，所以这个时候就需要进行多表查询。</p>
<p>如果我们直接通过查询语句希望在多张表中查询到数据，这个时候是什么效果呢？</p>
<p>例如：现在又两张表</p>
<figure class="highlight n1ql"><table><tr><td class="code"><pre><code class="hljs n1ql"><span class="hljs-keyword">SELECT</span> * <span class="hljs-keyword">FROM</span> <span class="hljs-symbol">`product`</span>, <span class="hljs-symbol">`brand`</span>;<br></code></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20211114171128moreTableQuery.png" alt="多表查询"></p>
<p>可见，在这样子进行多表查询时，其数据量是两表数量的乘积，笛卡尔乘积。</p>
<figure class="highlight n1ql"><table><tr><td class="code"><pre><code class="hljs n1ql"><span class="hljs-keyword">SELECT</span> * <span class="hljs-keyword">FROM</span> <span class="hljs-symbol">`product`</span>, <span class="hljs-symbol">`brand`</span> <span class="hljs-keyword">WHERE</span> product.brand_id = brand.id;<br></code></pre></td></tr></table></figure>

<p>真实开发中，常用连接 join的方式，进行多表之间的连接  sql-join</p>
<ol>
<li>左连接</li>
<li>右连接</li>
<li>内连接</li>
<li>全连接</li>
</ol>
<p>具体语句可参考 <a href="https://www.runoob.com/sql/sql-join.html">菜鸟教程</a></p>
]]></content>
      <categories>
        <category>mysql</category>
      </categories>
      <tags>
        <tag>mysql</tag>
      </tags>
  </entry>
  <entry>
    <title>mysql-语句</title>
    <url>/2021/11/12/mysql/de9d27f5d5d1/</url>
    <content><![CDATA[<h1 id="终端操作缺陷"><a href="#终端操作缺陷" class="headerlink" title="终端操作缺陷"></a>终端操作缺陷</h1><p><a href="http://wakeweb.cloud/2021/11/12/mysql/ab03683a0789/">参考终端进行数据库操作文章</a></p>
<ol>
<li>语句无高亮，并且无任何提示</li>
<li>复杂的语句分成多行，格式不美观，且输入容易出错</li>
<li>终端查看所有的数据库和数据时不方便</li>
</ol>
<h1 id="GUI工具"><a href="#GUI工具" class="headerlink" title="GUI工具"></a>GUI工具</h1><p>为了解决上述问题，可以采用以下几款：</p>
<ol>
<li>Navicat: 推荐使用，不过需要付费，但是又免费的试用时间，应付学习足够了。</li>
<li>SQLYog: 一款免费的SQL工具</li>
<li>TablePlus:常用功能都可以使用，但是会有一些限制（例如：只能开两个标签页）</li>
</ol>
<h1 id="mysql-语句"><a href="#mysql-语句" class="headerlink" title="mysql 语句"></a>mysql 语句</h1><p>sql(structured Query Language) —结构化查询语言</p>
<h2 id="sql语句的常用规范"><a href="#sql语句的常用规范" class="headerlink" title="sql语句的常用规范"></a>sql语句的常用规范</h2><ol>
<li><p>通常关键字是大写的，比如CREATE,TABLE,SHOW等等。</p>
</li>
<li><p>一条语句结束后，需要以“；”结尾。</p>
</li>
<li><p>如果遇到关键字作为表明或者字段名称，可以用 <code> </code> 包裹。(类似es6中的模板字符串)</p>
</li>
</ol>
<h2 id="sql语句分类"><a href="#sql语句分类" class="headerlink" title="sql语句分类"></a>sql语句分类</h2><ol>
<li>DDL (Data Definition language) —数据定义语言</li>
</ol>
<ul>
<li>可以通过DDL语句对数据库或者表进行： 创建，删除，修改操作.</li>
</ul>
<ol start="2">
<li>DML(Data Manipulation Language): 数据操作语言</li>
</ol>
<ul>
<li>可以通过DML语句对表进行： 添加、删除、修改等操作.</li>
</ul>
<ol start="3">
<li>DQL(Data Query Language): 数据查询语言</li>
</ol>
<ul>
<li>可以通过DQL语句对表进行查询操作.</li>
</ul>
<ol start="4">
<li>DCL(Data Control Language): 数据权限语言</li>
</ol>
<ul>
<li>可以通过DCL语句对表权限等操作.</li>
</ul>
<h3 id="DDL数据库的操作—实践"><a href="#DDL数据库的操作—实践" class="headerlink" title="DDL数据库的操作—实践"></a>DDL数据库的操作—实践</h3><pre># 查看所有的数据
SHOW DATABASES;

# 选择某一个数据
USE bili;

#查看当前正在使用的数据库
SELECT DATABASE();

# 创建一个新的数据库
-- CREATE DATABASE douyu;
-- CREATE DATABASE IF NOT EXISTS douyu;

CREATE DATABASE IF NOT EXISTS huya DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci;


# 删除数据库
DROP DATABASE IF EXISTS douyu;

# 修改数据库的编码

ALTER DATABASE huya CHARACTER SET = utf8 COLLATE = utf8_unicode_ci;
</pre>

<h3 id="DDL-数据表的操作—实践"><a href="#DDL-数据表的操作—实践" class="headerlink" title="DDL-数据表的操作—实践"></a>DDL-数据表的操作—实践</h3><pre># 查看数据表
SHOW TABLES;

# 查看某一个表结构
DESC users;

# 创建数据表
CREATE TABLE IF NOT EXISTS `test` (
  `name` VARCHAR(20),
    age INT,
    height DOUBLE
    );
    
# 删除表
DROP TABLE IF EXISTS `test`;


# 查看某一个表结构
DESC students;
</pre>

<h3 id="DML-对数据库进行增删改—实践"><a href="#DML-对数据库进行增删改—实践" class="headerlink" title="DML-对数据库进行增删改—实践"></a>DML-对数据库进行增删改—实践</h3><pre>
# 插入数据
INSERT INTO `user` VALUES (110, 'why', '020-123456', '2020-10-20', '2020-11-11');


-- INSERT INTO `user` (`name`, `telPhone`,`createTime`,`updateTime`)
--                         VALUES ('paike','000-1111112','2020-10-10','2030-10-20');

# 需求： createTime和updateTime可以自动设置值
ALTER TABLE `user` MODIFY `createTime` TIMESTAMP DEFAULT CURRENT_TIMESTAMP;
ALTER TABLE `user` MODIFY `updateTime` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
ON UPDATE CURRENT_TIMESTAMP;

 INSERT INTO `user`    (`name`, `telPhone`)
                    VALUES ('lilei3','000-1111116');
                    
                    
# 删除数据
# 删除所有数据
DELETE FROM `user`;

# 删除符合条件的数据
DELETE FROM `user` WHERE id = 110;

# 更新数据
# 更新所有数据
UPDATE `user` SET `name` = 'lily',telPhone = '010-110110';

# 更新符合条件的数据
UPDATE `user` SET `name` = 'lily',telPhone = '010-110110' WHERE id = 115;
</pre>


<h3 id="DQL-对数据库进行查询—实践"><a href="#DQL-对数据库进行查询—实践" class="headerlink" title="DQL-对数据库进行查询—实践"></a>DQL-对数据库进行查询—实践</h3><pre>

</pre>

<h4 id="分页查询"><a href="#分页查询" class="headerlink" title="分页查询"></a>分页查询</h4><p>当数据库中的数据非常多时，一次性查询到所有的将结果进行显示是不现实的；</p>
<ol>
<li><p>在真实开发中，我们都会要求用户传入offset、limit、或者page等字段</p>
</li>
<li><p>它们的目的是让我们可以在数据库中进行分页查询</p>
</li>
<li><p>它的用法有[LIMIT{[offset, row_count | row_count OFFSET offset]}]</p>
</li>
</ol>
<h2 id="sql数据类型"><a href="#sql数据类型" class="headerlink" title="sql数据类型"></a><a href="https://dev.mysql.com/doc/refman/8.0/en/data-types.html">sql数据类型</a></h2><p><a href="https://www.runoob.com/mysql/mysql-data-types.html">开发可参考—菜鸟教程—数据类型及其范围</a></p>
<h1 id="表约束"><a href="#表约束" class="headerlink" title="表约束"></a>表约束</h1><h2 id="主键：PRIMARY-KEY"><a href="#主键：PRIMARY-KEY" class="headerlink" title="主键：PRIMARY KEY"></a>主键：PRIMARY KEY</h2><p>一张表中，我们为了区分每一条记录的唯一性，必须有一个字段是永远不会重复，并且不为空的，这个字段我们通常会把它设置为主键：</p>
<ul>
<li><p>主键是表中唯一的索引；</p>
</li>
<li><p>并且必须是NOT NULL的，如果没有设置NOT NULL,那么MySQL也会隐式的设置为NOT NULL;</p>
</li>
<li><p>主键也可以是多列索引，PRIMARY KEY(key_part,…),我们一般称之为联合主键</p>
</li>
<li><p>建议：开发中主键字段应该是和业务无关的，尽量不要使用业务字段来作为主键。</p>
</li>
</ul>
<h2 id="唯一：UNIQUE"><a href="#唯一：UNIQUE" class="headerlink" title="唯一：UNIQUE"></a>唯一：UNIQUE</h2><ul>
<li>某些字段再开发过程中，我们希望是唯一的，不回重复的，比如手机号，身份证号，这个字段我们可以使用UNIQUE来约束。</li>
<li>使用UNIQUE约束的字段在表中必须是不同的</li>
<li>对于所有引擎，UNIQUE索引允许NULL包含的多个值NULL.</li>
</ul>
<h2 id="不能为空-NOT-NULL"><a href="#不能为空-NOT-NULL" class="headerlink" title="不能为空 NOT NULL"></a>不能为空 NOT NULL</h2><ul>
<li>某些字段我们要求用户必须插入值，不可以为空，这个时候我们可以使用NOT NULL来约束</li>
</ul>
<h2 id="默认值-DEFAULT"><a href="#默认值-DEFAULT" class="headerlink" title="默认值 DEFAULT"></a>默认值 DEFAULT</h2><p>某些字段我们希望在没有设置值时给予一个默认值，这个时候我们可以使用DEFAULT来完成。</p>
<h2 id="自动递增：-AUTO-INCREMENT"><a href="#自动递增：-AUTO-INCREMENT" class="headerlink" title="自动递增： AUTO_INCREMENT"></a>自动递增： AUTO_INCREMENT</h2><p>某些字段我们希望不设置值时可以进行递增，比如用户的id,这个时候我们可以使用Auto_INCREMENT来完成。<br>一般用于数字类型的描述。</p>
<h2 id="外键约束（用于多表关系）"><a href="#外键约束（用于多表关系）" class="headerlink" title="外键约束（用于多表关系）"></a>外键约束（用于多表关系）</h2> <pre>
CREATE TABLE IF NOT EXISTS `brand` (
 id INT PRIMARY KEY AUTO_INCREMENT,
 name VARCHAR(20) NOT NULL,
 website VARCHAR(100),
 phoneRank INT
);

INSERT INTO `brand` (name, website, phoneRank) VALUES('华为','www.huawei.com',2);
INSERT INTO `brand` (name, website, phoneRank) VALUES('苹果','www.apple.com',10);
INSERT INTO `brand` (name, website, phoneRank) VALUES('小米','www.mi.com',5);
INSERT INTO `brand` (name, website, phoneRank) VALUES('OPPO','www.oppo.com',12);
INSERT INTO `brand` (name, website, phoneRank) VALUES('京东','www.jd.com',8);
INSERT INTO `brand` (name, website, phoneRank) VALUES('GOOGLE','www.google.com',9);


# 如果在一张表中需要添加一个的字段，这个字段对应另外一张表的字段，并且想要对字段有所限制的时候，可以用外键  
ALTER table `product` add `brand_id` int;
ALTER TABLE `product` DROP  `brand_id`;
# 真实开发会在建表的时候就将xxx设置为外键

# 手动修改brand_id为外键
ALTER TABLE `product` ADD FOREIGN KEY(brand_id) REFERENCES brand(id);

# 设置brand_id的值
UPDATE `product` SET `brand_id` = 1 WHERE brand = '华为';
UPDATE `product` SET `brand_id` = 1 WHERE brand = '苹果'；
UPDATE `product` SET `brand_id` = 1 WHERE brand = '小米'；
UPDATE `product` SET `brand_id` = 1 WHERE brand = 'oppo'；

# 3. 修改和删除外键引用的id
UPDATE `brand` SET `id` = 100 WHERE `id` = 1;


# 4. 修改brand_id关联外键时的action
# 4.1 获取到目前的外键的名称
SHOW CREATE TABLE `product`;

-- CREATE TABLE `product` (
--   `id` int NOT NULL AUTO_INCREMENT,
--   `brand` varchar(20) DEFAULT NULL,
--   `title` varchar(100) NOT NULL,
--   `price` double NOT NULL,
--   `score` decimal(2,1) DEFAULT NULL,
--   `voteCnt` int DEFAULT NULL,
--   `url` varchar(100) DEFAULT NULL,
--   `pid` int DEFAULT NULL,
--   `brand_id` int DEFAULT NULL,
--   PRIMARY KEY (`id`),
--   KEY `brand_id` (`brand_id`),
--   CONSTRAINT `product_ibfk_1` FOREIGN KEY (`brand_id`) REFERENCES `brand` (`id`)
-- ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci


# 4.2 根据名称将外键删除掉
ALTER TABLE `product` DROP FOREIGN KEY product_ibfk_5;

# 4.3 重新添加外键约束
ALTER TABLE `product` ADD FOREIGN KEY (brand_id) REFERENCES brand(id)
             ON UPDATE CASCADE
                         ON DELETE RESTRICT;
</pre>

<h2 id="完整的数据表—实践"><a href="#完整的数据表—实践" class="headerlink" title="完整的数据表—实践"></a>完整的数据表—实践</h2><pre>
# 创建完整数据表
CREATE TABLE IF NOT EXISTS `users`(
   `id` INT PRIMARY KEY AUTO_INCREMENT,
   `name` VARCHARACTER(20) NOT NULL,
   `age` INT DEFAULT 0,
   `height` DECIMAL(10,2),
     `phoneNum` VARCHAR(20) UNIQUE DEFAULT '',
     `createTime` TIMESTAMP
);

# 修改表
# 1.修改表的名字
ALTER TABLE `users` RENAME TO `user`;

# 2. 添加一个新的列
ALTER TABLE `user` ADD `updateTime` TIMESTAMP;

# 3. 修改字段名称
ALTER TABLE `user` CHANGE `phoneNum` `telPhone` VARCHAR(20);

# 4. 修改字段类型值
ALTER TABLE `user` MODIFY `name` VARCHARACTER(30);


# 5. 删除某个字段
ALTER TABLE `user` DROP `age`;
</pre>

]]></content>
      <categories>
        <category>mysql</category>
      </categories>
      <tags>
        <tag>mysql</tag>
      </tags>
  </entry>
  <entry>
    <title>js面试题</title>
    <url>/2022/02/20/js%E9%9D%A2%E8%AF%95%E9%A2%98/e6e33b6aaa60/</url>
    <content><![CDATA[<script src=/js/crypto-js.js></script>
<script>
function doDecrypt (pwd, onError) {
	console.log('in doDecrypt');
	const txt = document.getElementById('enc_content').innerHTML;
	let plantext;
	try {
		const bytes = CryptoJS.AES.decrypt(txt, pwd);
		var plaintext = bytes.toString(CryptoJS.enc.Utf8);
	} catch(err) {
		if(onError) {
			onError(err);
		}
		return;
	}
	document.getElementById('enc_content').innerHTML = plaintext;
	document.getElementById('enc_content').style.display = 'block';
	document.getElementById('enc_passwd').style.display = 'none';
	if(typeof MathJax !== 'undefined') {
		MathJax.Hub.Queue(
			['resetEquationNumbers', MathJax.InputJax.TeX],
			['PreProcess', MathJax.Hub],
			['Reprocess', MathJax.Hub]
		);
	}
}
</script>
<div id="enc_content" style="display:none">U2FsdGVkX1+0k5OAXWQ1JaGtC+1BUfTXOlD8ZNcrQ1hnW0hwpBMbUqOhAB8nBo7BiwjYTXZy9MzeiinNoyLUonVbBWOiKhHI33sBzWSMzFsppC2xYN5y0gPTi/jydTQ1A4Y1JnAlpBlxjgjK37kq7Ku5JTXjS6y0jSYkfRxiV8f5bs/B4YTTvr9swyMTek9eUThOCJ7BBAwbCe6ITGYciN8tdfKrpZNxFlqgjlSzhaBCCfjo6HJV/NTJbllZowu1SuILrl0v2Z9sJciQZKOyzho/iz07lkb0RPLotroq794C/3TVz3cQu9b0X5Op7liW7IHmwE8k0WiCgJKvqbVe3MCkBp9s5kyaMaCeUGn82aoAjmBDdlwpOz7PiaFqIr8sqUn/iaTsa8RIpt6PY4PiM/jOt4WoN55t+1i85RVA2xJ6iTVWna5T8cd5WTvk0RsF+tqaHasQ5GYDz8eycjkSYK5ZjuD4bJq9iEnOVPFq/jfsIQ3NWokpyjVQ9x54ZUAMpx1OmIP3ciZcLPweInpqVdl5q/vwcbgzDigb4NlkGQprs7RyMFTEw8BaOGMmoiUV2cvecSIV+ZeK59J4jer5KNThKRaJGvZcz+I7LU32zSWgZfvOI/WAPx7/0B0d1GCxJ/8tp5xGMOb2Go64XxdpUMBlb6wQDeXae2WxTpJZwSC6uwsmdVKmJTOYxhERZ+rX7N028y290wluNBDjyljagk7iWQlLzW2Z9XBhSQonrcWEAOyLLSdpLUGS560TrkoDkdEhAmJWx2vsZt3bBRQcwSfGkdjeS7U9C5ehrTXrMAr3VCHWt+s06/VKeNfoS8ITcf92IziTTQHT79ASQnddbGMln3gUm6aeql51HNZBzbcQnu09kpKRm5Mc67mLNB/HpbAD0gt0atk2dkWXEPiVyPBOFPUwp4lQg/O0UYQuG4sCgLsN4lci53ry7ZqeGIYjPmdTzehsdP3nTYtbtHZ52+B2HIMLKiGM4Ll8D5DJeJblP1Wkltbf0rN0sTln7pMrqYFU603I9L2NdJ2MoWQ/rwibqxHd5ut8oP2QjcD8KxCxurmPAaOwIGh3XXpT2ddu78ZWNAWwfWDI9GpFcDCLLJKkXFzcbivPvTBYyL8+RUFe8jy3ITfvIaLotMbAEvRa8JJ03IthcZ0ooxdtIId9vb6ua6DkAIl1icTsrjSwJcjLgaxolIc+RS7A+vw4w4IUNtxIW58a0dlEGddVjBT01hDZ5fD/jFVpdlf97CfLrH4BkP32qn7ate4OVYB9woI+taj58lDyc9nNRtLkoFyFQpBknRBVq24x34eqMyMZu09IzLkapD3+2KYxv+nJ8Irw0ayD/kXUouJVXa+UBrdlwJ1PQdq2JAJIFi8sDNm5I0rz/WWlbthclGgrIcpgwDzNx4fvzj73vLkY5J870OdWfuBWdT6YaLkbzP9reTRroJZgoDHdlUZlvQ2xNBeCy/cHQ4u1ju911jMpkWYe6O6I59PlPQSlUF9b2NY1NGxijmOGofY5ydgV0Erg9efJfznPPcuJ1SJefm5potz8sfg854tu+LAldSytyzrw1CfORpl0jWbbrxl53PjY54dEYbmO90n32d6f1dEw5jGDEbQjTNajJhXCQzMaXx35+JvRXPzwqhYhzZFijmlZ5bKWTQPp7QEgC0jeVfk3cBJ/OA1Bizdv+IfUNQd56M4OI6RDA1zNOFMy+dqNNZTAb+fd4OCmQ+2UeLYJ0kEray29wCnCtwfSNOFG4J0Ejh52WBCnpwG6yfaWdYelRzxN7HdQparlKJXvoN/tUV2oVGv4RGiAhUgh39MxVY2jaFJiE2n9w17CYD2hrVvTWjVzHQTniALZDAHjC47bpJqG0L7TTPziemzGw92ncbF1VCO9Oc0ZVgtfygNJQdP57C8LMWVyxYGqJietZHVBjAk30KYFrsJHXMJuqOiW/0t+IdgScwRueWTnkkwAdTv5yv4X07jXJkV8CCanuZqYgTkIGohfGNoZ2EOzbS8zquixK9UcyKD7orjWB5GVOrPf/lB8/l9OliFxpkXiIqJwoNX1GZ2kawt+xg==</div>
<div id="enc_passwd"> <input id="enc_pwd_input" type="password" style="border-radius: 5px;border-style: groove;height: 30px;width: 50%;cursor: auto;font-size: 102%;color: currentColor;outline: none;text-overflow: initial;padding-left: 5px;" onkeydown="if (event.keyCode == 13) { decrypt(); return false;}"> <input type="submit" value="解&nbsp;密" onclick="decrypt()" style="width: 58px;height: 34px;border-radius: 5px;background-color: white;border-style: solid;color: currentColor;"><div id="enc_error" style="display: inline-block;color: #d84527;margin-left: 10px"></div>
<script>
var onError = function(error) {
	document.getElementById("enc_error").innerHTML = "password error!"
};
function decrypt() {
var passwd = document.getElementById("enc_pwd_input").value;
console.log(passwd);
doDecrypt(passwd, onError);
}
</script>
</div>]]></content>
      <categories>
        <category>js面试题</category>
      </categories>
      <tags>
        <tag>面试</tag>
      </tags>
  </entry>
  <entry>
    <title>nginx部署</title>
    <url>/2023/04/28/nginx/cc389d1d1416/</url>
    <content><![CDATA[<h1 id="nginx部署"><a href="#nginx部署" class="headerlink" title="nginx部署"></a>nginx部署</h1><p>基于腾讯云服务器centos系统：</p>
<p>云服务登录用户名：urz9g98m<br>云服务登录密码：********</p>
<h1 id="nginx配置文件"><a href="#nginx配置文件" class="headerlink" title="nginx配置文件"></a>nginx配置文件</h1><h1 id="基于宝塔可视化面板"><a href="#基于宝塔可视化面板" class="headerlink" title="基于宝塔可视化面板"></a>基于宝塔可视化面板</h1><h2 id="1-登录云服务进入首页、进入nginx"><a href="#1-登录云服务进入首页、进入nginx" class="headerlink" title="1.登录云服务进入首页、进入nginx"></a>1.登录云服务进入首页、进入nginx</h2><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20230428153359%E5%AE%9D%E5%A1%94%E9%9D%A2%E6%9D%BFnginx.png" alt="宝塔面板nginx"></p>
<h2 id="2-进行配置文件修改"><a href="#2-进行配置文件修改" class="headerlink" title="2.进行配置文件修改"></a>2.进行配置文件修改</h2><figure class="highlight nginx"><table><tr><td class="code"><pre><code class="hljs nginx"><span class="hljs-attribute">user</span>  www www;<br><span class="hljs-attribute">worker_processes</span> auto;<br><span class="hljs-attribute">error_log</span>  /www/wwwlogs/nginx_error.log  <span class="hljs-literal">crit</span>;<br><span class="hljs-attribute">pid</span>        /www/server/nginx/logs/nginx.pid;<br><span class="hljs-attribute">worker_rlimit_nofile</span> <span class="hljs-number">51200</span>;<br><br><span class="hljs-section">events</span><br>    &#123;<br>        <span class="hljs-attribute">use</span> <span class="hljs-literal">epoll</span>;<br>        <span class="hljs-attribute">worker_connections</span> <span class="hljs-number">51200</span>;<br>        <span class="hljs-attribute">multi_accept</span> <span class="hljs-literal">on</span>;<br>    &#125;<br><br><span class="hljs-section">http</span><br>    &#123;<br>        <span class="hljs-attribute">include</span>       mime.types;<br>		<span class="hljs-comment">#include luawaf.conf;</span><br><br>		<span class="hljs-attribute">include</span> proxy.conf;<br><br>        <span class="hljs-attribute">default_type</span>  application/octet-stream;<br><br>        <span class="hljs-attribute">server_names_hash_bucket_size</span> <span class="hljs-number">512</span>;<br>        <span class="hljs-attribute">client_header_buffer_size</span> <span class="hljs-number">32k</span>;<br>        <span class="hljs-attribute">large_client_header_buffers</span> <span class="hljs-number">4</span> <span class="hljs-number">32k</span>;<br>        <span class="hljs-attribute">client_max_body_size</span> <span class="hljs-number">50m</span>;<br><br>        <span class="hljs-attribute">sendfile</span>   <span class="hljs-literal">on</span>;<br>        <span class="hljs-attribute">tcp_nopush</span> <span class="hljs-literal">on</span>;<br><br>        <span class="hljs-attribute">keepalive_timeout</span> <span class="hljs-number">60</span>;<br><br>        <span class="hljs-attribute">tcp_nodelay</span> <span class="hljs-literal">on</span>;<br><br>        <span class="hljs-attribute">fastcgi_connect_timeout</span> <span class="hljs-number">300</span>;<br>        <span class="hljs-attribute">fastcgi_send_timeout</span> <span class="hljs-number">300</span>;<br>        <span class="hljs-attribute">fastcgi_read_timeout</span> <span class="hljs-number">300</span>;<br>        <span class="hljs-attribute">fastcgi_buffer_size</span> <span class="hljs-number">64k</span>;<br>        <span class="hljs-attribute">fastcgi_buffers</span> <span class="hljs-number">4</span> <span class="hljs-number">64k</span>;<br>        <span class="hljs-attribute">fastcgi_busy_buffers_size</span> <span class="hljs-number">128k</span>;<br>        <span class="hljs-attribute">fastcgi_temp_file_write_size</span> <span class="hljs-number">256k</span>;<br>		<span class="hljs-attribute">fastcgi_intercept_errors</span> <span class="hljs-literal">on</span>;<br><br>        <span class="hljs-attribute">gzip</span> <span class="hljs-literal">on</span>;<br>        <span class="hljs-attribute">gzip_min_length</span>  <span class="hljs-number">1k</span>;<br>        <span class="hljs-attribute">gzip_buffers</span>     <span class="hljs-number">4</span> <span class="hljs-number">16k</span>;<br>        <span class="hljs-attribute">gzip_http_version</span> <span class="hljs-number">1</span>.<span class="hljs-number">1</span>;<br>        <span class="hljs-attribute">gzip_comp_level</span> <span class="hljs-number">2</span>;<br>        <span class="hljs-attribute">gzip_types</span>     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;<br>        <span class="hljs-attribute">gzip_vary</span> <span class="hljs-literal">on</span>;<br>        <span class="hljs-attribute">gzip_proxied</span>   expired <span class="hljs-literal">no</span>-cache <span class="hljs-literal">no</span>-store private auth;<br>        <span class="hljs-attribute">gzip_disable</span>   <span class="hljs-string">&quot;MSIE [1-6]\.&quot;</span>;<br><br>        <span class="hljs-attribute">limit_conn_zone</span> $binary_remote_addr zone=perip:<span class="hljs-number">10m</span>;<br>		<span class="hljs-attribute">limit_conn_zone</span> $server_name zone=perserver:<span class="hljs-number">10m</span>;<br><br>        <span class="hljs-attribute">server_tokens</span> <span class="hljs-literal">off</span>;<br>        <span class="hljs-attribute">access_log</span> <span class="hljs-literal">off</span>;<br><br><span class="hljs-section">server</span><br>    &#123;<br>        <span class="hljs-attribute">listen</span> <span class="hljs-number">80</span>;<br>        <span class="hljs-attribute">server_name</span> localhost;<br>        <span class="hljs-attribute">index</span> index.html index.htm index.php;<br>        <span class="hljs-attribute">root</span>  /www/server/phpmyadmin;<br>            <span class="hljs-attribute">location</span> \\x7e /tmp/ &#123;<br>                <span class="hljs-attribute">return</span> <span class="hljs-number">403</span>;<br>            &#125;<br><br>        <span class="hljs-comment">#error_page   404   /404.html;</span><br>        <span class="hljs-attribute">include</span> enable-php.conf;<br>        <br>        <span class="hljs-attribute">location</span> / &#123;<br>          <span class="hljs-attribute">proxy_pass</span> http://localhost:8666;<br>        &#125;<br>        <br>        <span class="hljs-attribute">location</span> \x7e .*\.(gif|jpg|jpeg|png|bmp|swf)$<br>        &#123;<br>            <span class="hljs-attribute">expires</span>      <span class="hljs-number">30d</span>;<br>        &#125;<br><br>        <span class="hljs-attribute">location</span> <span class="hljs-regexp">~ .*\.(js|css)?$</span><br>        &#123;<br>            <span class="hljs-attribute">expires</span>      <span class="hljs-number">12h</span>;<br>        &#125;<br><br>        <span class="hljs-attribute">location</span> <span class="hljs-regexp">~ /\.</span><br>        &#123;<br>            <span class="hljs-attribute">deny</span> all;<br>        &#125;<br><br>        <span class="hljs-attribute">access_log</span>  /www/wwwlogs/access.log;<br>    &#125;<br>    <br><span class="hljs-attribute">include</span> /www/server/panel/vhost/nginx/<span class="hljs-regexp">*.conf</span>;<br>&#125;<br></code></pre></td></tr></table></figure>
<h1 id="基于文件夹寻找nginx存储的文件夹命名"><a href="#基于文件夹寻找nginx存储的文件夹命名" class="headerlink" title="基于文件夹寻找nginx存储的文件夹命名"></a>基于文件夹寻找nginx存储的文件夹命名</h1><p>上述nginx配置文件中，可以包含某个文件夹所有的conf文件，所以可以根据不同的部署项目进行区分，防止一个文件过于耦合。</p>
<p>nginx文件夹默认的存储位置为：/www/server/panel/vhost/nginx</p>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20230428154513nginx%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6.png" alt="nginx配置文件"></p>
<figure class="highlight gradle"><table><tr><td class="code"><pre><code class="hljs gradle">server &#123;<br>    listen <span class="hljs-number">82</span>;<br>    location / &#123;<br>        root <span class="hljs-regexp">/www/</span>wwwroot<span class="hljs-regexp">/element-plus/</span>doc-archive-main; # 将 <span class="hljs-regexp">/www/</span>wwwroot<span class="hljs-regexp">/element-plus/</span>doc-archive-main 替换为您部署文档静态资源的目录<br>        index index.html;<br>    &#125;<br>    <br>&#125;<br>server &#123;<br>    listen <span class="hljs-number">84</span>;<br>    location / &#123;<br>        root <span class="hljs-regexp">/www/</span>wwwroot<span class="hljs-regexp">/hexo-new/</span><span class="hljs-keyword">public</span>; # 将 <span class="hljs-regexp">/www/</span>wwwroot<span class="hljs-regexp">/hexo-new/</span><span class="hljs-keyword">public</span> 替换为您部署文档静态资源的目录<br>        index index.html;<br>    &#125;<br>    <br>&#125;<br><br><br></code></pre></td></tr></table></figure>

<h2 id="松耦合的配置方式"><a href="#松耦合的配置方式" class="headerlink" title="松耦合的配置方式"></a>松耦合的配置方式</h2><p>正常情况下，应该是区分成 element-plus.conf , hexo-new.conf, 此处文件比较简单，暂时未分开。<br><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20230428155236%E6%9D%BE%E8%80%A6%E5%90%88nginx%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6.png" alt="整合起来的conf文件"></p>
<h2 id="重启nginx，项目依然可以正常运行"><a href="#重启nginx，项目依然可以正常运行" class="headerlink" title="重启nginx，项目依然可以正常运行"></a>重启nginx，项目依然可以正常运行</h2><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20230428155838nginx%E9%83%A8%E7%BD%B2element-plus.png" alt="nginx部署element-plus"></p>
]]></content>
      <categories>
        <category>nginx</category>
      </categories>
      <tags>
        <tag>nginx</tag>
      </tags>
  </entry>
  <entry>
    <title>mysql</title>
    <url>/2021/11/12/mysql/ab03683a0789/</url>
    <content><![CDATA[<h1 id="mysql下载地址"><a href="#mysql下载地址" class="headerlink" title="mysql下载地址"></a><a href="https://dev.mysql.com/downloads/file/?id=508936">mysql下载地址</a></h1><h1 id="mysql管理"><a href="#mysql管理" class="headerlink" title="mysql管理"></a>mysql管理</h1><ol>
<li>可以使用命令行工具管理MySQL数据库（命令mysql和mysqladmin），也可以从MySQL的网站下载图形管理工具MySQL Workbench[12][13]。</li>
<li>Navicat是一套专为MySQL设计的强大数据库管理及开发工具。它可以用于任何版本的MySQL数据库，并支持大部分MySQL的功能，包括触发器、索引、查看等。</li>
<li>phpMyAdmin是由PHP写成的MySQL数据库系统管理程序，让管理者可用Web接口管理MySQL数据库。借由此Web接口可以成为一个简易方式输入繁杂SQL语法的较佳途径，尤其要处理大量资料的导入及导出更为方便。其中一个更大的优势在于由于phpMyAdmin跟其他PHP程序一样在网页服务器上执行，但是您可以在任何地方使用这些程序产生的HTML页面，也就是于远程管理你的MySQL数据库。使用phpMyAdmin您就可以方便的创建、修改、删除数据库及资料表。</li>
<li>phpMyBackupPro[14]也是由PHP写成的，可以通过Web接口创建和管理数据库。它可以创建伪cronjobs，可以用来自动在某个时间或周期备份MySQL数据库。</li>
</ol>
<h1 id="添加环境变量"><a href="#添加环境变量" class="headerlink" title="添加环境变量"></a>添加环境变量</h1><p>用于解决mysql命令无法使用的问题。</p>
<p>如何判断呢？ 首先打开终端，在命令行输入： mysql –version</p>
<p>此时会提示 “MySQL”不是内部或外部命令，也不是可运行的程序或批处理文件，那么就是需要添加环境变量了。</p>
<p>在Windows系统中找到环境变量的设置，找到path,在其中添加</p>
<figure class="highlight taggerscript"><table><tr><td class="code"><pre><code class="hljs taggerscript">C:<span class="hljs-symbol">\P</span>rogram Files<span class="hljs-symbol">\M</span>ySQL<span class="hljs-symbol">\M</span>ySQL Server 8.0<span class="hljs-symbol">\b</span>in<br></code></pre></td></tr></table></figure>
<p>这是你安装mysql的位置，复制地址到环境变量中，然后输入mysql –version进行确认。</p>
<pre>C:\Windows\system32>mysql --version
mysql  Ver 8.0.27 for Win64 on x86_64 (MySQL Community Server - GPL)</pre>


<h1 id="连接MySQL"><a href="#连接MySQL" class="headerlink" title="连接MySQL"></a>连接MySQL</h1><ol>
<li>mysql -uroot -p密码</li>
<li>mysql -uroot -p<br>回车后会显示Enter password，输入即可，更加安全。</li>
</ol>
<h1 id="默认数据库"><a href="#默认数据库" class="headerlink" title="默认数据库"></a>默认数据库</h1><p>sql语句规范常用形式为大写，此时是为了方便阅读。</p>
<p>连接后输入语句：show databases;注意不要忘了”;”</p>
<pre>mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sakila             |
| sys                |
| world              |
+--------------------+
6 rows in set (0.01 sec)</pre>

<h1 id="创建数据库"><a href="#创建数据库" class="headerlink" title="创建数据库"></a>创建数据库</h1><figure class="highlight n1ql"><table><tr><td class="code"><pre><code class="hljs n1ql"><span class="hljs-keyword">create</span> <span class="hljs-keyword">database</span> coderhub;<br></code></pre></td></tr></table></figure>

<p>coderhub是自拟的数据库名称。</p>
<pre>mysql> create database coderhub;
Query OK, 1 row affected (0.01 sec)</pre>


<h1 id="查看当前所在数据库"><a href="#查看当前所在数据库" class="headerlink" title="查看当前所在数据库"></a>查看当前所在数据库</h1><figure class="highlight csharp"><table><tr><td class="code"><pre><code class="hljs csharp"><span class="hljs-function"><span class="hljs-keyword">select</span> <span class="hljs-title">database</span>(<span class="hljs-params"></span>)</span>;<br><br></code></pre></td></tr></table></figure>
<p>表示现在没有使用任何数据库</p>
<pre>mysql> select database();
+------------+
| database() |
+------------+
| NULL       |
+------------+
1 row in set (0.00 sec)</pre>

<h1 id="选择（指定）要使用的的数据库"><a href="#选择（指定）要使用的的数据库" class="headerlink" title="选择（指定）要使用的的数据库"></a>选择（指定）要使用的的数据库</h1><figure class="highlight abnf"><table><tr><td class="code"><pre><code class="hljs abnf">use coderhub<span class="hljs-comment">;</span><br></code></pre></td></tr></table></figure>
<p>use + 数据库名称</p>
<pre>mysql> use coderhub;
Database changed</pre>

<p>选择玩数据库后，再次查看当前在使用的数据库，发现刚才的NUll值，已经变为自定义的coderhub了。</p>
<pre>mysql> select database();
+------------+
| database() |
+------------+
| coderhub   |
+------------+
1 row in set (0.00 sec)</pre>

<h1 id="查表"><a href="#查表" class="headerlink" title="查表"></a>查表</h1><figure class="highlight pgsql"><table><tr><td class="code"><pre><code class="hljs pgsql"><span class="hljs-keyword">show</span> <span class="hljs-keyword">tables</span>;<br></code></pre></td></tr></table></figure>
<pre>mysql> show tables;
Empty set (0.01 sec)
</pre>

<h1 id="建表"><a href="#建表" class="headerlink" title="建表"></a>建表</h1><pre>mysql> create table users(
    -> name varchar(10),
    -> age int,
    -> height double);
Query OK, 0 rows affected (0.05 sec)</pre>

<p>其中users是表名，name,age,height是字段名，后面分别对应的是各自的字段类型。</p>
<h1 id="显示表"><a href="#显示表" class="headerlink" title="显示表"></a>显示表</h1><figure class="highlight pgsql"><table><tr><td class="code"><pre><code class="hljs pgsql"><span class="hljs-keyword">show</span> <span class="hljs-keyword">tables</span>;<br></code></pre></td></tr></table></figure>

<pre>mysql> show tables;
+--------------------+
| Tables_in_coderhub |
+--------------------+
| users              |
+--------------------+
1 row in set (0.00 sec)
</pre>

<h1 id="再建表"><a href="#再建表" class="headerlink" title="再建表"></a>再建表</h1><pre>
mysql> create table moment(title varchar(20), content varchar(512));
Query OK, 0 rows affected (0.02 sec)
</pre>

<pre>mysql> show tables;
+--------------------+
| Tables_in_coderhub |
+--------------------+
| moment             |
| users              |
+--------------------+
2 rows in set (0.00 sec)
</pre>

<h1 id="查看表数据"><a href="#查看表数据" class="headerlink" title="查看表数据"></a>查看表数据</h1><figure class="highlight axapta"><table><tr><td class="code"><pre><code class="hljs axapta"><span class="hljs-keyword">select</span> * <span class="hljs-keyword">from</span> users;<br></code></pre></td></tr></table></figure>
<p>users是表名。</p>
<pre>
mysql> select * from users;
Empty set (0.01 sec)
</pre>

<h1 id="插入数据"><a href="#插入数据" class="headerlink" title="插入数据"></a>插入数据</h1><figure class="highlight apache"><table><tr><td class="code"><pre><code class="hljs apache"><span class="hljs-attribute">mysql</span>&gt; insert into users (name,age,height) value (&#x27;coder&#x27;,<span class="hljs-number">18</span>,<span class="hljs-number">1</span>.<span class="hljs-number">88</span>);<br><span class="hljs-attribute">Query</span> OK, <span class="hljs-number">1</span> row affected (<span class="hljs-number">0</span>.<span class="hljs-number">00</span> sec)<br></code></pre></td></tr></table></figure>

<pre>mysql> insert into users (name,age,height) value ('coder',18,1.88);
Query OK, 1 row affected (0.00 sec)
</pre>

<p>插入三条这样的数据，后使用</p>
<figure class="highlight axapta"><table><tr><td class="code"><pre><code class="hljs axapta"><span class="hljs-keyword">select</span> * <span class="hljs-keyword">from</span> users;<br></code></pre></td></tr></table></figure>
<pre>mysql> select * from users;
+---------+------+--------+
| name    | age  | height |
+---------+------+--------+
| coder   |   18 |   1.88 |
| xiaobai |   19 |      2 |
| xiaohu  |   23 |   1.78 |
+---------+------+--------+
3 rows in set (0.00 sec)</pre>]]></content>
      <categories>
        <category>mysql</category>
      </categories>
      <tags>
        <tag>mysql</tag>
      </tags>
  </entry>
  <entry>
    <title>node常见内置模块</title>
    <url>/2021/11/07/node/41601c7205c1/</url>
    <content><![CDATA[<h1 id="path模块"><a href="#path模块" class="headerlink" title="path模块"></a><a href="http://nodejs.cn/learn/the-nodejs-path-module">path模块</a></h1><p>主要对路径和文件相关的进行处理。</p>
<p>在开发过程中，我们可以用字符串拼接的方式来指定路径，但是考虑到不同操作系统对于路径分隔符的差异，可能导致的兼容性问题，我们采用path模块中的resolve方法来对路径进行处理，它会根据操作系统，来指定适配的路径分隔符。</p>
<pre>
const path = require('path');

const basePath = 'User/why';
const filename = 'abc.txt';

const filepath = path.resolve(basePath, filename)

console.log(filepath)

</pre>

<pre>
PS C:\Users\starry\Desktop\total\node\04_node内置模块\02_path> node 01_路径的演练.js   
C:\Users\starry\Desktop\total\node\04_node内置模块\02_path\User\why\abc.txt
</pre>


<h2 id="可以采用同步、异步、promise方式来加载文件信息。"><a href="#可以采用同步、异步、promise方式来加载文件信息。" class="headerlink" title="可以采用同步、异步、promise方式来加载文件信息。"></a>可以采用同步、异步、promise方式来加载文件信息。</h2><figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">const fs = require(<span class="hljs-string">&#x27;fs&#x27;</span>);<br>const filepath = <span class="hljs-string">&#x27;./abc.txt&#x27;</span>;<br><span class="hljs-regexp">//</span> 案例 读取文件信息   同步方式<br><br><br><span class="hljs-regexp">//</span> const info = fs.statSync(filepath);<br><br><span class="hljs-regexp">//</span> console.log(info);<br><span class="hljs-regexp">//</span> console.log(<span class="hljs-string">&#x27;后续执行的代码&#x27;</span>)<br><br><span class="hljs-regexp">//</span> 方式二  异步操作<br><br><span class="hljs-regexp">//</span> fs.stat(filepath, (err,info) =&gt; &#123;<br><span class="hljs-regexp">//</span>     <span class="hljs-keyword">if</span>(err) &#123;<br><span class="hljs-regexp">//</span>         console.log(err);<br><span class="hljs-regexp">//</span>         return;<br><span class="hljs-regexp">//</span>     &#125;<br><span class="hljs-regexp">//</span>     console.log(info);<br><span class="hljs-regexp">//</span> &#125;)<br><span class="hljs-regexp">//</span> console.log(<span class="hljs-string">&quot;后续需要执行的代码&quot;</span>);<br><br><br><span class="hljs-regexp">//</span> 方式三  promise<br><br>fs.promises.stat(filepath).then(info =&gt; &#123;<br>    console.log(info);<br>&#125;).catch(err =&gt; &#123;<br>    console.log(err)<br>&#125;)<br><br>console.log(<span class="hljs-string">&quot;后面需要执行的代码&quot;</span>)<br></code></pre></td></tr></table></figure>

<p>第一种方式因为同步会阻塞，会先打印info信息，后两种方式则会先打印 <font color=red>后续需要执行的代码</font> 这一段内容。</p>
<h2 id="文件描述符"><a href="#文件描述符" class="headerlink" title="文件描述符"></a>文件描述符</h2><p>在node的文件系统中可以通过传递文件描述符，来对文件进行操作。</p>
<pre>
// 文件描述符
fs.open("./abc.txt",(err, fd) => {
    if(err){
        console.log(err);
        return;
    }
   // 通过描述符去获取文件的信息

fs.fstat( fd , (err,info) => {
    if(err){
        console.log(err);
        return;
    }
    console.log(info);
    
})
})

</pre>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20211107165552FSinfo.png" alt="文件信息"></p>
<h2 id="文件的读写"><a href="#文件的读写" class="headerlink" title="文件的读写"></a>文件的读写</h2><pre>const fs = require('fs')

const content = "你好啊，前端程序员";
const filePath = "./abc.txt";
fs.writeFile(filePath, content, (err) => {
    console.log(err)
})


fs.readFile(filePath, {encoding: 'utf-8'}, (err, data) => {
    console.log(data);
});</pre>

<h2 id="文件夹的操作"><a href="#文件夹的操作" class="headerlink" title="文件夹的操作"></a>文件夹的操作</h2><ol>
<li>创建文件夹</li>
<li>读取文件夹中的所有文件夹</li>
<li>文件夹的命名</li>
</ol>
<p><a href="http://nodejs.cn/learn/working-with-folders-in-nodejs/#%E6%A3%80%E6%9F%A5%E6%96%87%E4%BB%B6%E5%A4%B9%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8">文件夹的相关操作</a></p>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20211107175920fileMoreName.png"></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;fs&#x27;</span>);<br><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;path&#x27;</span>);<br><span class="hljs-keyword">const</span> dirname = <span class="hljs-string">&#x27;./why&#x27;</span><br><span class="hljs-comment">// try &#123;</span><br><span class="hljs-comment">//   if (!fs.existsSync(dirname)) &#123;</span><br><span class="hljs-comment">//     fs.mkdirSync(dirname);</span><br><span class="hljs-comment">//   &#125;</span><br><span class="hljs-comment">// &#125; catch (err) &#123;</span><br><span class="hljs-comment">//   console.error(err)</span><br><span class="hljs-comment">// &#125;</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getFiles</span>(<span class="hljs-params">dirname</span>) </span>&#123;<br>    fs.readdir(dirname, &#123;<span class="hljs-attr">withFileTypes</span>: <span class="hljs-literal">true</span>&#125;, <span class="hljs-function">(<span class="hljs-params">err, files</span>) =&gt;</span> &#123;<br>        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> file <span class="hljs-keyword">of</span> files) &#123;<br>            <span class="hljs-keyword">if</span>(file.isDirectory())&#123;<br>                <span class="hljs-keyword">const</span> filepath = path.resolve(dirname,file.name);<br>                getFiles(filepath);<br>            &#125;<br>            <span class="hljs-keyword">else</span> &#123;<br>                <span class="hljs-built_in">console</span>.log(file.name);<br>            &#125;<br>        &#125;<br>    &#125;)<br>&#125;<br>getFiles(dirname);<br><br><br></code></pre></td></tr></table></figure>

<h1 id="事件触发器"><a href="#事件触发器" class="headerlink" title="事件触发器"></a><a href="http://nodejs.cn/api/events.html">事件触发器</a></h1>]]></content>
      <categories>
        <category>node</category>
      </categories>
      <tags>
        <tag>node</tag>
      </tags>
  </entry>
  <entry>
    <title>npm常用命令</title>
    <url>/2023/12/18/npm/8cca0075206a/</url>
    <content><![CDATA[<h1 id="针对于-npm-install卡在sill-idealTree-buildDeps-没有反应，安装失灵"><a href="#针对于-npm-install卡在sill-idealTree-buildDeps-没有反应，安装失灵" class="headerlink" title="针对于  npm install卡在sill idealTree buildDeps 没有反应，安装失灵"></a>针对于  npm install卡在sill idealTree buildDeps 没有反应，安装失灵</h1><figure class="highlight routeros"><table><tr><td class="code"><pre><code class="hljs routeros">npm<span class="hljs-built_in"> config </span><span class="hljs-builtin-name">get</span><span class="hljs-built_in"> proxy</span><br><span class="hljs-built_in"></span>npm<span class="hljs-built_in"> config </span>rm<span class="hljs-built_in"> proxy</span><br><span class="hljs-built_in"></span>npm<span class="hljs-built_in"> config </span>rm https-proxy<br></code></pre></td></tr></table></figure>
]]></content>
      <categories>
        <category>npm</category>
      </categories>
      <tags>
        <tag>npm</tag>
      </tags>
  </entry>
  <entry>
    <title>node学习</title>
    <url>/2021/11/05/node/d7430acb4af2/</url>
    <content><![CDATA[<h1 id="什么是node"><a href="#什么是node" class="headerlink" title="什么是node"></a>什么是node</h1><p>“Node全称NodeJS，是一个基于Chrome V8引擎的JavaScript运行环境；一个让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl等服务端语言平起平坐的脚本语言。”</p>
<h1 id="node版本管理工具"><a href="#node版本管理工具" class="headerlink" title="node版本管理工具"></a>node版本管理工具</h1><p><strong>NVM</strong>  <a href="https://github.com/coreybutler/nvm-windows/releases">下载链接</a> 选择<font color=red>nvm-setup.zip</font>下载解压即可运行可执行文件<br><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20211105192106-nvm-url.png" alt="nvm url"></p>
<h2 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h2><ol>
<li><p>nvm list 是查找本电脑上所有的node版本</p>
<ul>
<li>nvm list 查看已经安装的版本</li>
<li>nvm list installed 查看已经安装的版本</li>
<li>nvm list available 查看网络可以安装的版本</li>
</ul>
</li>
<li><p>nvm install 安装最新版本nvm</p>
</li>
<li><p>nvm use <version> ## 切换使用指定的版本node</p>
</li>
<li><p>nvm ls 列出所有版本</p>
</li>
<li><p>nvm current显示当前版本</p>
</li>
<li><p>nvm alias <name> <version> ## 给不同的版本号添加别名</p>
</li>
<li><p>nvm unalias <name> ## 删除已定义的别名</p>
</li>
<li><p>nvm reinstall-packages <version> ## 在当前版本node环境下，重新全局安装指定版本号的npm包</p>
</li>
<li><p>nvm on 打开nodejs控制</p>
</li>
<li><p>nvm off 关闭nodejs控制</p>
</li>
<li><p>nvm proxy 查看设置与代理</p>
</li>
<li><p>nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror，如果不设置的默认是 <a href="https://nodejs.org/dist/">https://nodejs.org/dist/</a><br>　　nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是： <a href="https://github.com/npm/npm/archive/">https://github.com/npm/npm/archive/</a>.</p>
</li>
<li><p>nvm uninstall <version> 卸载制定的版本</p>
</li>
<li><p>nvm use [version] [arch] 切换制定的node版本和位数</p>
</li>
<li><p>nvm root [path] 设置和查看root路径</p>
</li>
<li><p>nvm version 查看当前的版本</p>
</li>
</ol>
<h1 id="node程序传递参数"><a href="#node程序传递参数" class="headerlink" title="node程序传递参数"></a>node程序传递参数</h1><p>在终端可以通过node运行js文件，一般命令为<font color=chocolate>node 文件名.js</font> ，但是在有些情况下需要传递参数的时候可以在该命令后添加相关参数，则参数会传递到程序内部。那么怎么获取呢？可以使用全局对象 process（进程）</p>
<p>在控制终端输入命令</p>
<figure class="highlight crmsh"><table><tr><td class="code"><pre><code class="hljs crmsh"><span class="hljs-keyword">node</span> <span class="hljs-title">index</span>.js 简单点<br></code></pre></td></tr></table></figure>
<p>效果图如下：<br><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20211105204044nodeSendParams.png" alt="node传递参数"></p>
<h1 id="node中常用的打印输出方式"><a href="#node中常用的打印输出方式" class="headerlink" title="node中常用的打印输出方式"></a>node中常用的打印输出方式</h1><table>
<thead>
<tr>
<th>命令</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td>console.log()</td>
<td>最常用的输入内容的方式</td>
</tr>
<tr>
<td>console.clear()</td>
<td>清空控制台</td>
</tr>
<tr>
<td>console.trace()</td>
<td>打印函数的调用栈</td>
</tr>
</tbody></table>
<p>其他的方法，<a href="https://nodejs.org/dist/latest-v14.x/docs/api/console.html">参考链接</a></p>
<h1 id="常见的全局对象"><a href="#常见的全局对象" class="headerlink" title="常见的全局对象"></a><a href="https://nodejs.org/dist/latest-v16.x/docs/api/globals.html">常见的全局对象</a></h1><h2 id="特殊的全局对象"><a href="#特殊的全局对象" class="headerlink" title="特殊的全局对象"></a>特殊的全局对象</h2><ul>
<li>这些全局对象实际上是模块中的变量，只是每个模块中都有，看起来像是全局变量</li>
<li>在命令行交互中是不可以使用的</li>
<li>包括： __dirname（目录名称）、__filename（文件名称）、exports、module、require（）</li>
</ul>
<figure class="highlight sqf"><table><tr><td class="code"><pre><code class="hljs sqf">console.<span class="hljs-built_in">log</span>(<span class="hljs-variable">__dirname</span>);<br>console.<span class="hljs-built_in">log</span>(<span class="hljs-variable">__filename</span>);<br></code></pre></td></tr></table></figure>
<pre>
PS C:\Users\starry\Desktop\total\node\02_nodeGlobalObject\01_specialGlobalObject> node specialGlobalObject.js
C:\Users\starry\Desktop\total\node\02_nodeGlobalObject\01_specialGlobalObject
C:\Users\starry\Desktop\total\node\02_nodeGlobalObject\01_specialGlobalObject\specialGlobalObject.js</pre>

<h2 id="常见的全局对象-1"><a href="#常见的全局对象-1" class="headerlink" title="常见的全局对象"></a>常见的全局对象</h2><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20211105234455setTimeOut.png" alt="常见的定时器对象"></p>
<div class="note success modern"><p>问题1：为什么执行的顺序不一样？<br>问题2：为什么process.nextTick比setImmediate还快？
 </p>
</div>

<h2 id="global全局对象"><a href="#global全局对象" class="headerlink" title="global全局对象"></a>global全局对象</h2><figure class="highlight sql"><table><tr><td class="code"><pre><code class="hljs sql">console.<span class="hljs-built_in">log</span>(<span class="hljs-keyword">global</span>)<br></code></pre></td></tr></table></figure>

<pre><ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
  },
  queueMicrotask: [Function: queueMicrotask],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
  }
}</pre>


<h1 id="JavaScript的模块化"><a href="#JavaScript的模块化" class="headerlink" title="JavaScript的模块化"></a>JavaScript的模块化</h1><p>为了让Node.js的文件可以相互调用，Node.js提供了一个简单的模块系统。</p>
<p>模块是Node.js 应用程序的基本组成部分，文件和模块是一一对应的。换言之，一个 Node.js 文件就是一个模块，这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。</p>
<h2 id="立即执行函数实现的模块化"><a href="#立即执行函数实现的模块化" class="headerlink" title="立即执行函数实现的模块化"></a>立即执行函数实现的模块化</h2><figure class="highlight actionscript"><table><tr><td class="code"><pre><code class="hljs actionscript"><span class="hljs-keyword">var</span> moduleFoo = (<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>&#123;<br>    <span class="hljs-keyword">return</span> &#123;<br>        age,<br>        name<br>    &#125;<br>&#125;)()<br><br></code></pre></td></tr></table></figure>

<p>如果模块化同名也会产生冲突。</p>
<h2 id="COMMON-JS规范"><a href="#COMMON-JS规范" class="headerlink" title="COMMON.JS规范"></a>COMMON.JS规范</h2><p>我们需要知道common.js是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS, 后来为了体现它的广泛性，修改为CommonJS,平时我们也会简称为CJS.</p>
<ul>
<li>NODE是commonJs在服务器端一个具有代表性的实现。</li>
<li>Browserify是COMMON.JS在浏览器中的实现。</li>
<li>webpack打包工具具备对CommonJs的支持与转换。</li>
</ul>
<h2 id="exports"><a href="#exports" class="headerlink" title="exports"></a>exports</h2><p>每个模块都有一个为exports的对象，其默认值为空对象。</p>
<p>node中实现common.js的方式就是对象的引用赋值。</p>
<div class="note info modern"><p>问题3：对象的引用赋值与深拷贝，浅拷贝实际是三种东西？
 </p>
</div>

<h2 id="module-exports"><a href="#module-exports" class="headerlink" title="module.exports"></a>module.exports</h2><p>会创建新的地址空间，默认为空的对象。<br>exports只能使用语法来向外暴露内部变量：如<a href="http://exports.xxx/">http://exports.xxx</a> = xxx;<br>module.exports既可以通过语法，也可以直接赋值一个对象。</p>
<h2 id="require"><a href="#require" class="headerlink" title="require"></a>require</h2><p>require是一种函数，可以帮助我们引入一个文件（模块）中导入的对象。</p>
<h3 id="require的查找规则"><a href="#require的查找规则" class="headerlink" title="require的查找规则"></a>require的查找规则</h3><p><a href="https://nodejs.org/dist/latest-v16.x/docs/api/modules.html#requireid">官方文档</a></p>
<p>一、require的加载规则<br>1、优先从缓存加载<br>2、判断模块标识符</p>
<p>核心模块<br>自己写的模块（路径形式的模块）</p>
<p>第三方模块（node_modules）:</p>
<ul>
<li>第三方模块的标识就是第三方模块的名称（不可能有第三方模块和核心模块的名字一致）；</li>
<li>开发人员可以把写好的框架库发布到npm上；</li>
<li>使用者通过npm命令来下载，使用式：var 名称 = require(‘npm install【下载包】 的包名’)；node_modules/express/package.json main；如果package.json或者main不成立，则查找被选择项：index.js；如果以上条件都不满足，则继续进入上一级目录中的node_modules按照上面的规则依次查找，直到当前文件所属此盘根目录都找不到最后报错.</li>
</ul>
<h3 id="require加载文件的顺序"><a href="#require加载文件的顺序" class="headerlink" title="require加载文件的顺序"></a>require加载文件的顺序</h3><ol>
<li><p>在当前文件中，有通过require加载的文件，同时本文件有其他操作时，会先同步加载前面所导入的文件</p>
</li>
<li><p>require在嵌套调用的时候，有的文件可能会被引入多次，但是执行时，同样的代码只会执行一次，因为在内部进行了缓存。在下方打印module的时候有一个loaded属性，如果是true就代表已经加载过，需要缓存；反之，就是没有加载过。</p>
</li>
<li><p>循环引用的加载顺序：深度优先</p>
</li>
</ol>
<h2 id="打印module"><a href="#打印module" class="headerlink" title="打印module"></a>打印module</h2><figure class="highlight sql"><table><tr><td class="code"><pre><code class="hljs sql">console.<span class="hljs-built_in">log</span>(<span class="hljs-keyword">module</span>)<br></code></pre></td></tr></table></figure>

<pre>PS C:\Users\starry\Desktop\total\node\03_JavaScript_module\02_commonjs> node bar.js
Module {
  id: '.',
  path: 'C:\\Users\\starry\\Desktop\\total\\node\\03_JavaScript_module\\02_commonjs',        
  exports: { name: 'jiang', age: 23 },
  parent: null,
  filename: 'C:\\Users\\starry\\Desktop\\total\\node\\03_JavaScript_module\\02_commonjs\\bar.js',
<font color=amber>  loaded: false,</font>
  children: [],
  paths: [
    'C:\\Users\\starry\\Desktop\\total\\node\\03_JavaScript_module\\02_commonjs\\node_modules',
    'C:\\Users\\starry\\Desktop\\total\\node\\03_JavaScript_module\\node_modules',
    'C:\\Users\\starry\\Desktop\\total\\node\\node_modules',
    'C:\\Users\\starry\\Desktop\\total\\node_modules',
    'C:\\Users\\starry\\Desktop\\node_modules',
    'C:\\Users\\starry\\node_modules',
    'C:\\Users\\node_modules',
    'C:\\node_modules'
  ]
}</pre>

<p><img src="https://img1.sycdn.imooc.com/598ad54700010efc03400430.png"></p>
<h2 id="AMD规范"><a href="#AMD规范" class="headerlink" title="AMD规范"></a><a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD规范</a></h2><p>全称是Asynchronous Module Definition，即异步模块加载机制。从它的规范描述页面看，AMD很短也很简单，但它却完整描述了模块的定义，依赖关系，引用关系以及加载机制。从它被requireJs，Dojo，JQuery使用也可以看出它具有很大的价值，没错，JQuery近期也采用了AMD规范。</p>
<p><a href="http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html">AMD与COMMON.JS阮一峰博客</a></p>
<p><a href="https://requirejs.org/docs/node.html#3">require.js in node</a></p>
<h2 id="CMD规范"><a href="#CMD规范" class="headerlink" title="CMD规范"></a><a href="https://github.com/seajs/seajs/issues/242">CMD规范</a></h2><p>CMD 即Common Module Definition通用模块定义,CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同</p>
<p><a href="https://github.com/seajs/seajs/issues/277">SEA.JS</a><br><a href="https://www.zhihu.com/question/20351507/answer/14859415">知乎：AMD与CMD的区别</a></p>
<h2 id="ES6导出方式"><a href="#ES6导出方式" class="headerlink" title="ES6导出方式"></a>ES6导出方式</h2><h3 id="方式一："><a href="#方式一：" class="headerlink" title="方式一："></a>方式一：</h3><p>一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。</p>
<figure class="highlight dart"><table><tr><td class="code"><pre><code class="hljs dart"><span class="hljs-keyword">export</span> <span class="hljs-keyword">var</span> firstName = <span class="hljs-string">&#x27;Michael&#x27;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">var</span> lastName = <span class="hljs-string">&#x27;Jackson&#x27;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">var</span> year = <span class="hljs-number">1958</span>;<br></code></pre></td></tr></table></figure>

<h3 id="方式二：列表方式，大括号"><a href="#方式二：列表方式，大括号" class="headerlink" title="方式二：列表方式，大括号"></a>方式二：列表方式，大括号</h3><p>是大括号，不是对象，一定要注意，在大括号中统一导出。<br>通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">v1</span>(<span class="hljs-params"></span>) </span>&#123; ... &#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">v2</span>(<span class="hljs-params"></span>) </span>&#123; ... &#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">v3</span>(<span class="hljs-params"></span>) </span>&#123; ... &#125;<br><br><span class="hljs-keyword">export</span> &#123;<br>  v1 <span class="hljs-keyword">as</span> streamV1,<br>  v2 <span class="hljs-keyword">as</span> streamV2,<br>  v3 <span class="hljs-keyword">as</span> streamLatestVersion<br>&#125;;<br></code></pre></td></tr></table></figure>
<h2 id="ES6导入方式"><a href="#ES6导入方式" class="headerlink" title="ES6导入方式"></a>ES6导入方式</h2><p>foo.js文件内容：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> name = <span class="hljs-string">&quot;coderwhy&quot;</span>;<br><span class="hljs-keyword">const</span> age = <span class="hljs-number">18</span>;<br><span class="hljs-keyword">const</span> sayHello = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">name</span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello&quot;</span> + name)<br>&#125;<br><br><span class="hljs-comment">//</span><br><span class="hljs-keyword">export</span> &#123;<br>    name,<br>    age,<br>    sayHello<br>&#125;<br></code></pre></td></tr></table></figure>

<p>index.js文件内容：</p>
<h3 id="最普通的导入方式"><a href="#最普通的导入方式" class="headerlink" title="最普通的导入方式"></a>最普通的导入方式</h3><p>import {name,age,sayHello} from “./modules/foo.js”</p>
<h3 id="第二种，导入变量后可以起别名"><a href="#第二种，导入变量后可以起别名" class="headerlink" title="第二种，导入变量后可以起别名"></a>第二种，导入变量后可以起别名</h3><p>import {name as vName,age as vAge,sayHello as vSayHello} from “./modules/foo.js”</p>
<p>import {streamV1 as vName,streamV2 as vAge,streamLatestVersion as vSayHello} from “./modules/foo.js”</p>
<h3 id="第三种-as-foo"><a href="#第三种-as-foo" class="headerlink" title="第三种  * as foo"></a>第三种  * as foo</h3><p>import * as foo from ‘./modules/foo.js’</p>
<p>console.log(foo.name);<br>console.log(foo.age)<br>foo.sayHello(“coderwhy”)</p>
<div class="note info modern"><p>本质是 将导入的 {name as vName,age as vAge,sayHello as vSayHello} 对象给foo对象，作为它的属性，然后在后方调用。
 </p>
</div>


<h2 id="export与from的使用"><a href="#export与from的使用" class="headerlink" title="export与from的使用"></a>export与from的使用</h2><p>—相当于从指定的js文件，导出需要导出的内容<br>foo.js文件内容：</p>
<pre>const name = "coderwhy";
const age = 18;
const sayHello = function(name){
    console.log("hello" + name)
}</pre>

<pre>
export {name,age,sayHello} from "./modules/foo.js"

<figure class="highlight sql"><table><tr><td class="code"><pre><code class="hljs sql">console.<span class="hljs-built_in">log</span>(name);<br>console.<span class="hljs-built_in">log</span>(age);<br>sayHello(&quot;coderwhy&quot;);<br></code></pre></td></tr></table></figure>
</pre>

<h2 id="default导出"><a href="#default导出" class="headerlink" title="default导出"></a>default导出</h2><p>默认导出，可以不给导出的文件加名字。</p>
<p>从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。</p>
<p>为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。</p>
<p>export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。</p>
<pre>// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;</pre>


<h2 id="动态加载"><a href="#动态加载" class="headerlink" title="动态加载"></a>动态加载</h2><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20211107001630Eimport%EF%BC%88%EF%BC%89.png" alt="import（）函数动态加载"></p>
<div class="note info modern"><figure class="highlight applescript"><table><tr><td class="code"><pre><code class="hljs applescript">&lt;<span class="hljs-keyword">script</span> src=<span class="hljs-string">&quot;./index.js&quot;</span> type=<span class="hljs-string">&quot;module&quot;</span>&gt;&lt;/<span class="hljs-keyword">script</span>&gt;<br>该<span class="hljs-keyword">script</span>标签加载是异步的，不回阻塞后面代码的执行。<br></code></pre></td></tr></table></figure>
</div>

<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20211107004522exportRecord.png"></p>
<p>可以在左侧修改值，不能在右侧改变变量的值。</p>
]]></content>
      <categories>
        <category>node</category>
      </categories>
      <tags>
        <tag>node</tag>
      </tags>
  </entry>
  <entry>
    <title>picgo （一）</title>
    <url>/2024/06/22/picgo/ed3131c5123b/</url>
    <content><![CDATA[<h1 id="插曲-macOS安装picgo报错、需要进入废纸篓"><a href="#插曲-macOS安装picgo报错、需要进入废纸篓" class="headerlink" title="插曲 macOS安装picgo报错、需要进入废纸篓"></a>插曲 macOS安装picgo报错、需要进入废纸篓</h1><p>下载链接：<a href="https://picgo-release.molunerfinn.com/2.4.0-beta.7/PicGo-2.4.0-beta.7-arm64.dmg">Picgo 2.4.0-beta.7-arm64</a></p>
<figure class="highlight stylus"><table><tr><td class="code"><pre><code class="hljs stylus">sudo xattr -d com<span class="hljs-selector-class">.apple</span><span class="hljs-selector-class">.quarantine</span> <span class="hljs-string">&quot;/Applications/PicGo.app&quot;</span><br></code></pre></td></tr></table></figure>]]></content>
      <categories>
        <category>picgo</category>
      </categories>
      <tags>
        <tag>picgo</tag>
      </tags>
  </entry>
  <entry>
    <title>spring 学习 （一）</title>
    <url>/2024/06/05/spring/e8190f123a53/</url>
    <content><![CDATA[<h1 id="一、spring是什么？"><a href="#一、spring是什么？" class="headerlink" title="一、spring是什么？"></a>一、spring是什么？</h1><p> <a href="https://spring.io/projects/spring-framework">spring是什么</a></p>
<p>Spring 即是(Spring Framework)为现代基于Java的企业应用程序提供了一个全面的编程和配置模型-在任何类型的部署平台上。</p>
<p>Spring的一个关键元素是应用程序级别的基础设施支持：Spring专注于企业应用程序的“管道”，以便团队可以专注于应用程序级别的业务逻辑，而无需与特定的部署环境进行不必要的联系。</p>
<div class="note default modern"><p>我们在golang等编程语言中也曾听说过”管道”一词，它在编程领域到底是怎么的一种编程理念呢？ 按照我本身的理解应该是程序语言专注于在底层将基础功能实现、而使得程序员能够更加专注于业务领域的发展，类似于现实世界中的地下输水管道、地下电缆管道、地下光纤管道等等… </p>
</div>

<h1 id="Spring框架版本"><a href="#Spring框架版本" class="headerlink" title="Spring框架版本"></a>Spring框架版本</h1><h2 id="支持的版本"><a href="#支持的版本" class="headerlink" title="支持的版本"></a>支持的版本</h2><ul>
<li>6.2.x 是即将推出的功能分支（2024 年 11 月）。</li>
<li>自 2023 年 11 月起，6.1.x 为主要生产线。</li>
<li>6.0.x 是上一个生产线，自 2022 年 11 月起上市。这一新框架一代配备了 JDK 17 和 Jakarta EE 9 基线。</li>
<li>5.3.x 是第五代的最后一个功能分支，在 JDK 8、JDK 11、JDK 17、JDK 21 和 Java EE 8 级别提供长期支持。</li>
<li>4.3.x 于 2020 年 12 月 31 日达到其官方 EOL（生命周期终止）。该系列中没有计划进一步的维护和安全补丁。</li>
<li>3.2.x 于 2016 年 12 月 31 日达到其官方 EOL（使用寿命终止）。该系列中没有计划进一步的维护和安全补丁。</li>
</ul>
<h2 id="JDK版本范围"><a href="#JDK版本范围" class="headerlink" title="JDK版本范围"></a>JDK版本范围</h2><ul>
<li>Spring Framework 6.2.x：JDK 17-25（预期）</li>
<li>Spring Framework 6.1.x：JDK 17-23</li>
<li>Spring Framework 6.0.x：JDK 17-21</li>
<li>Spring Framework 5.3.x：JDK 8-21（截至 5.3.26）</li>
</ul>
<div class="note default modern"><p>假设当前所在项目jdk为11，spring boot 版本为2.7.8 则Spring的最低版本应该为5.3.x ; 且spring boot 2 的最高版本为2.7.18 </p>
</div>

<h1 id="Spring核心内容"><a href="#Spring核心内容" class="headerlink" title="Spring核心内容"></a>Spring核心内容</h1><ul>
<li>依赖注入 (dependency injection)</li>
</ul>
<ul>
<li><p>事件 (events)</p>
</li>
<li><p>资源 (resources)</p>
</li>
<li><p>i18n (国际化)</p>
</li>
<li><p>验证 (validation)</p>
</li>
<li><p>数据绑定  (data binding)</p>
</li>
<li><p>类型转换 (type conversion)</p>
</li>
<li><p>SpEL</p>
</li>
<li><p>AOP</p>
</li>
</ul>
<h1 id="使用Spring-Initializr引导应用程序。"><a href="#使用Spring-Initializr引导应用程序。" class="headerlink" title="使用Spring Initializr引导应用程序。"></a><a href="https://start.spring.io/">使用Spring Initializr引导应用程序。</a></h1><h1 id="当前不在支持在线生成基于spring-boot2-版本"><a href="#当前不在支持在线生成基于spring-boot2-版本" class="headerlink" title="当前不在支持在线生成基于spring boot2 版本"></a>当前不在支持在线生成基于spring boot2 版本</h1><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20240606231545.png" alt="当前不在支持在线生成基于spring boot2 版本"></p>
<div class="note default modern"><p>Spring Boot 2.x 版本已经停止维护，这意味着官方不再提供更新或支持。这个决定是由于 Spring Boot 3.x 版本的推出，该版本带来了许多新特性和改进，以及对 Java 17 及更高版本的 Java 开发环境的支持。因此，Spring Boot 官方的 Spring Initializr 不再提供 2.x 版本的选项，转而全力维护 3.x 版本。 </p>
</div>

<h1 id="对于需要继续使用-Spring-Boot-2-x-版本的项目，可以考虑以下解决方案"><a href="#对于需要继续使用-Spring-Boot-2-x-版本的项目，可以考虑以下解决方案" class="headerlink" title="对于需要继续使用 Spring Boot 2.x 版本的项目，可以考虑以下解决方案"></a>对于需要继续使用 Spring Boot 2.x 版本的项目，可以考虑以下解决方案</h1><ul>
<li><p>使用阿里云提供的镜像服务：你可以通过更改 IDEA 的 Server URL 为阿里云提供的镜像服务地址来创建基于 Java 8 的 Spring Boot 2.x 项目</p>
</li>
<li><p>手动修改版本号：你也可以直接从 Spring Initializr 创建任意 Spring Boot 和 Java 版本的 Spring Boot 项目，然后手动修改 pom.xml 或 build.gradle 中的版本配置，以匹配所需的 2.x 版本和 Java 8</p>
</li>
</ul>
<h1 id="基于Spring-Initializr建立基础项目"><a href="#基于Spring-Initializr建立基础项目" class="headerlink" title="基于Spring Initializr建立基础项目"></a>基于Spring Initializr建立基础项目</h1><ol>
<li>基础的数据库连接</li>
</ol>
<p>建立mysql数据库的基础排序规则一般是什么？</p>
<p>MySQL数据库的基础排序规则通常指的是字符集（character set）和排序规则（collation）。字符集定义了数据库可以存储的字符集，而排序规则定义了字符的比较和排序方式。</p>
<p>对于MySQL数据库，最常见的字符集是utf8mb4，它支持UTF-8编码，并且可以存储任何Unicode字符，包括表情符号。utf8mb4是utf8的扩展，因为原始的utf8只支持最多三个字节的UTF-8编码，而utf8mb4支持最多四个字节的UTF-8编码。</p>
<p>对于排序规则，utf8mb4字符集的默认排序规则通常是utf8mb4_general_ci，这意味着它是以大小写不敏感的方式比较字符的。如果你的应用需要大小写敏感的比较，你可能需要使用utf8mb4_bin排序规则，它使用二进制比较，或者utf8mb4_unicode_ci，它提供了更好的多语言支持。</p>
<p>在创建MySQL数据库时，你可以指定字符集和排序规则，例如：</p>
<figure class="highlight pgsql"><table><tr><td class="code"><pre><code class="hljs pgsql"><span class="hljs-keyword">CREATE</span> <span class="hljs-keyword">DATABASE</span> mydatabase<br><span class="hljs-type">CHARACTER</span> <span class="hljs-keyword">SET</span> utf8mb4<br><span class="hljs-keyword">COLLATE</span> utf8mb4_general_ci;<br><br></code></pre></td></tr></table></figure>

<p>这将创建一个使用utf8mb4字符集和utf8mb4_general_ci排序规则的数据库。</p>
<p>在选择排序规则时，你应该考虑你的应用的需求，比如是否需要大小写敏感的搜索，是否需要支持多语言等。通常，utf8mb4_general_ci是一个很好的默认选择，因为它适用于大多数情况，并且在大小写不敏感的比较上有较好的性能。如果你有特殊的需求，你可能需要选择一个不同的排序规则</p>
<ol start="2">
<li>错误信息处理、没有正确配置application.propertie或者yml</li>
</ol>
<div class="note default modern"><p>Error creating bean with name ‘dataSource’ defined in class path resource [org/springframework/boot/autoconfigure/jdbc/DataSourceConfiguration$Hikari.class]: Failed to instantiate [com.zaxxer.hikari.HikariDataSource]: Factory method ‘dataSource’ threw exception with message: Failed to determine a suitable driver class</p>
</div>

 <figure class="highlight ini"><table><tr><td class="code"><pre><code class="hljs ini"><span class="hljs-attr">spring.datasource.url</span>=jdbc:mysql://localhost:<span class="hljs-number">3306</span>/mydatabase?useSSL=<span class="hljs-literal">false</span>&amp;serverTimezone=UTC<br><span class="hljs-attr">spring.datasource.username</span>=myuser<br><span class="hljs-attr">spring.datasource.password</span>=mypassword<br><span class="hljs-attr">spring.datasource.driver-class-name</span>=com.mysql.cj.jdbc.Driver<br></code></pre></td></tr></table></figure>

<p>或者是</p>
<figure class="highlight dts"><table><tr><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">spring:</span><br><span class="hljs-symbol">  datasource:</span><br><span class="hljs-symbol">    url:</span> jdbc:mysql:<span class="hljs-comment">//localhost:3306/mydatabase?useSSL=false&amp;serverTimezone=UTC</span><br><span class="hljs-symbol">    username:</span> myuser<br><span class="hljs-symbol">    password:</span> mypassword<br>    driver-class-name: com.mysql.cj.jdbc.Driver<br><br></code></pre></td></tr></table></figure>

<ol start="3">
<li>controller最佳实践</li>
</ol>
<p>在Spring框架中，控制器的命名通常遵循以下最佳实践：</p>
<ul>
<li>命名规范：使用驼峰式命名法，以大写字母开头，每个单词的首字母大写。例如，UserController、OrderController、ProductViewController。</li>
<li>明确性：控制器的名称应该清晰地反映其职责和管理的资源。如果控制器处理的是特定的域对象，通常以该对象的名称结尾，如User、Order等。</li>
<li>复数形式：如果控制器管理的是一组资源，通常使用复数形式命名，如UsersController、OrdersController。</li>
<li>避免冗余：如果已经在包名中包含了上下文信息，如com.example.users，则控制器名称中可以省略这部分信息，直接命名为UserController。</li>
<li>简洁性：尽量保持控制器名称的简洁，同时确保其描述性。</li>
<li>一致性：在整个项目中保持一致的命名规则，这有助于其他开发者快速理解代码结构和功能。<br>例如，如果你正在构建一个电商应用，你可能会有以下控制器：</li>
</ul>
<p>UserController：处理与用户相关的请求。<br>ProductController：处理与产品相关的请求。<br>OrderController：处理与订单相关的请求。<br>记住，这些只是建议，并不是强制规则。最重要的是在你的团队和项目中保持一致性和可读性。</p>
<p>下次继续：</p>
<ul>
<li><p><a href="https://docs.spring.io/spring-framework/reference/core/beans/basics.html">https://docs.spring.io/spring-framework/reference/core/beans/basics.html</a></p>
</li>
<li><p><a href="https://pdai.tech/md/spring/springboot/springboot-x-interface-response.html">https://pdai.tech/md/spring/springboot/springboot-x-interface-response.html</a></p>
</li>
<li><p><a href="http://localhost:8888/">http://localhost:8888/</a></p>
</li>
<li><p><a href="http://localhost:4000/2024/06/05/spring/e8190f123a53/#%E5%9F%BA%E4%BA%8ESpring-Initializr%E5%BB%BA%E7%AB%8B%E5%9F%BA%E7%A1%80%E9%A1%B9%E7%9B%AE">http://localhost:4000/2024/06/05/spring/e8190f123a53/#%E5%9F%BA%E4%BA%8ESpring-Initializr%E5%BB%BA%E7%AB%8B%E5%9F%BA%E7%A1%80%E9%A1%B9%E7%9B%AE</a></p>
</li>
</ul>
]]></content>
      <categories>
        <category>spring</category>
      </categories>
      <tags>
        <tag>spring</tag>
      </tags>
  </entry>
  <entry>
    <title>spring 学习 （二）</title>
    <url>/2024/06/13/spring/36ea81e50a30/</url>
    <content><![CDATA[<h1 id="yml配置文件"><a href="#yml配置文件" class="headerlink" title="yml配置文件"></a>yml配置文件</h1><ul>
<li>一般的配置格式</li>
</ul>
<figure class="highlight dts"><table><tr><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">spring:</span><br><span class="hljs-symbol">  application:</span><br><span class="hljs-symbol">    name:</span> studyJava<br><span class="hljs-symbol">    user:</span> jyd<br></code></pre></td></tr></table></figure>

<ul>
<li>使用方式</li>
</ul>
<ol>
<li><p>@Value(“${spring.application.name}”)</p>
</li>
<li><p>@ConfigurationProperties(prefix=”spring”)</p>
</li>
</ol>
<figure class="highlight less"><table><tr><td class="code"><pre><code class="hljs less"><span class="hljs-variable">@ConfigurationProperties</span>(prefix=<span class="hljs-string">&quot;spring&quot;</span>)<br><span class="hljs-variable">@Component</span><br>public class EmailProperties &#123;<br>  <span class="hljs-variable">@Value</span>(<span class="hljs-string">&quot;$&#123;spring.application.user&#125;&quot;</span>)<br>  public String user;<br>  <span class="hljs-selector-tag">public</span> <span class="hljs-selector-tag">String</span> <span class="hljs-selector-tag">code</span>;<br>  <span class="hljs-selector-tag">public</span> <span class="hljs-selector-tag">String</span> <span class="hljs-selector-tag">host</span>;<br>  <span class="hljs-selector-tag">private</span> <span class="hljs-selector-tag">boolean</span> <span class="hljs-selector-tag">auth</span><br><br>&#125;<br><br></code></pre></td></tr></table></figure>

<div class="note default modern"><p>@Component一般用在什么地方呢？ </p>
</div>

<p>在Spring Boot中，@Component注释可以用来自动配置类。自动配置是通过Spring Boot的启动类上标注的@EnableAutoConfiguration或@SpringBootApplication（后者包含了@EnableAutoConfiguration）来实现的。</p>
<p>以下是一个简单的示例，展示如何使用@Component来自动配置一个简单的服务类。</p>
<p>首先，假设我们有一个服务类，它提供了一个简单的功能：</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> org.springframework.stereotype.Component;<br><br><span class="hljs-meta">@Component</span><br><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyAutoConfiguredService</span> </span>&#123;<br><br>    <span class="hljs-keyword">public</span> <span class="hljs-built_in">String</span> <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"><span class="hljs-built_in">String</span> name</span>)</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Hello, &quot;</span> + name + <span class="hljs-string">&quot;!&quot;</span>;<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></figure>

<p>@SpringBootApplication是一个方便的注解，它包含了@EnableAutoConfiguration，这意味着Spring Boot将尝试自动配置项目。自动配置发生的过程是：</p>
<p>Spring Boot会扫描classpath下的所有@Component、@Service、@Repository等注解的类。<br>它会在启动时查找所有符合条件的类，并将它们注册为Spring组件。<br>如果MyAutoConfiguredService类中有任何依赖未被满足，Spring Boot会尝试根据类路径下的jar包、配置文件等来猜测并自动配置这些依赖。</p>
<h1 id="整合mybatis"><a href="#整合mybatis" class="headerlink" title="整合mybatis"></a>整合mybatis</h1><h2 id="1-导入依赖"><a href="#1-导入依赖" class="headerlink" title="1.导入依赖"></a>1.导入依赖</h2><figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs <dependency>"> &lt;groupId&gt;com.mysql&lt;/groupId&gt;<br> &lt;artifactId&gt;mysql-connector-j&lt;/artifactId&gt;<br>&lt;/dependency&gt;<br>&lt;dependency&gt;<br> &lt;groupId&gt;org.mybatis.spring.boot&lt;/groupId&gt;<br> &lt;artifactId&gt;mybatis-spring-boot-starter&lt;/artifactId&gt;<br> &lt;version&gt;3.0.1&lt;/version&gt;<br>&lt;/dependency&gt;<br></code></pre></td></tr></table></figure>

<h2 id="2-配置文件"><a href="#2-配置文件" class="headerlink" title="2.配置文件"></a>2.配置文件</h2><figure class="highlight dts"><table><tr><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">spring:</span><br><span class="hljs-symbol">  application:</span><br><span class="hljs-symbol">    name:</span> studyJava<br><span class="hljs-symbol">  datasource:</span><br><span class="hljs-symbol">    url:</span> jdbc:mysql:<span class="hljs-comment">//localhost:3306/studyJava?useSSL=false&amp;serverTimezone=UTC</span><br><span class="hljs-symbol">    username:</span> root<br><span class="hljs-symbol">    password:</span> xxxxxx<br>    driver-class-name: com.mysql.cj.jdbc.Driver<br><br></code></pre></td></tr></table></figure>

<h2 id="3-书写实体类"><a href="#3-书写实体类" class="headerlink" title="3.书写实体类"></a>3.书写实体类</h2><p>@Data 是 Lombok 库提供的一个注解，它用于自动生成 getters、setters、equals、canEqual、hashCode、toString 方法。当你在 Lombok 版本为 1.18.12 或更高版本时使用 @Data，它还会包含无参构造方法（如果不存在的话）和一个全参构造方法。</p>
<p>无参构造方法是一个没有参数的构造器，它用于创建对象实例。<br>全参构造方法是一个带有所有属性作为参数的构造器，它允许你在创建对象时提供所有属性的值。<br>在 Lombok 版本 1.18.12 之前，@Data 注解只生成 getters 和 setters，不包括构造方法。如果你的 Lombok 版本低于 1.18.12，那么你需要手动添加构造方法。</p>
<p>从 Lombok 1.18.13 开始，@Data 注解默认包括一个无参构造方法，即使你的类中已经有其他的构造方法。如果你想保留现有的构造方法，你可以使用 @Data 注解的 init 属性，如下所示：</p>
<figure class="highlight java"><table><tr><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Data(init = false)</span><br><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyClass</span> </span>&#123;<br>    <span class="hljs-comment">// ...</span><br>&#125;<br><br></code></pre></td></tr></table></figure>

<figure class="highlight xml"><table><tr><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">dependency</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>org.projectlombok<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>lombok<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">version</span>&gt;</span>1.18.32<span class="hljs-tag">&lt;/<span class="hljs-name">version</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">optional</span>&gt;</span>true<span class="hljs-tag">&lt;/<span class="hljs-name">optional</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">dependency</span>&gt;</span><br><br></code></pre></td></tr></table></figure>

<ul>
<li>文件路径为：com/mhist/studyJava/pojo/User.java<figure class="highlight fortran"><table><tr><td class="code"><pre><code class="hljs fortran"><br><br>package com.mhist.studyJava.pojo;<br><br><span class="hljs-keyword">import</span> lombok.<span class="hljs-keyword">Data</span>;<br><br>@<span class="hljs-keyword">Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> User &#123;<br>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">Integer</span> id;<br>    <span class="hljs-keyword">private</span> String <span class="hljs-keyword">name</span>;<br>    <span class="hljs-keyword">private</span> Short age;<br>    <span class="hljs-keyword">private</span> Short gender;<br>    <span class="hljs-keyword">private</span> String phone;<br>&#125;<br><br></code></pre></td></tr></table></figure></li>
</ul>
<h2 id="4-创建mapper"><a href="#4-创建mapper" class="headerlink" title="4. 创建mapper"></a>4. 创建mapper</h2><figure class="highlight java"><table><tr><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.mhist.studyJava.mapper;<br><br><span class="hljs-keyword">import</span> com.mhist.studyJava.pojo.User;<br><span class="hljs-keyword">import</span> org.apache.ibatis.annotations.Mapper;<br><span class="hljs-keyword">import</span> org.apache.ibatis.annotations.Select;<br><br><span class="hljs-keyword">import</span> java.util.List;<br><br><span class="hljs-meta">@Mapper</span><br><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">interface</span> <span class="hljs-title">UserMapper</span> </span>&#123;<br>    <span class="hljs-meta">@Select(&quot;select * from user where  id = #&#123;id&#125;&quot;)</span><br>    <span class="hljs-function"><span class="hljs-keyword">public</span> User <span class="hljs-title">findById</span><span class="hljs-params">(Integer id)</span></span>;<br><br>    <span class="hljs-meta">@Select(&quot;select * from user&quot;)</span><br>    <span class="hljs-function">List&lt;User&gt; <span class="hljs-title">findAll</span><span class="hljs-params">()</span></span>;<br>&#125;<br><br><br><br></code></pre></td></tr></table></figure>
<h2 id="5-service"><a href="#5-service" class="headerlink" title="5. service"></a>5. service</h2><figure class="highlight java"><table><tr><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.mhist.studyJava.service;<br><br><span class="hljs-keyword">import</span> com.mhist.studyJava.pojo.User;<br><br><span class="hljs-keyword">import</span> java.util.List;<br><br><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">interface</span> <span class="hljs-title">UserService</span> </span>&#123;<br><br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> id</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function">User <span class="hljs-title">findById</span><span class="hljs-params">(Integer id)</span></span>;<br><br>    <span class="hljs-function">List&lt;User&gt; <span class="hljs-title">findAll</span><span class="hljs-params">()</span></span>;<br>&#125;<br><br></code></pre></td></tr></table></figure>


<h2 id="6-serviceImpl"><a href="#6-serviceImpl" class="headerlink" title="6.serviceImpl"></a>6.serviceImpl</h2><figure class="highlight java"><table><tr><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.mhist.studyJava.service.impl;<br><br><span class="hljs-keyword">import</span> com.mhist.studyJava.mapper.UserMapper;<br><span class="hljs-keyword">import</span> com.mhist.studyJava.pojo.User;<br><span class="hljs-keyword">import</span> com.mhist.studyJava.service.UserService;<br><span class="hljs-keyword">import</span> org.springframework.beans.factory.annotation.Autowired;<br><span class="hljs-keyword">import</span> org.springframework.stereotype.Service;<br><br><span class="hljs-keyword">import</span> java.util.List;<br><br><span class="hljs-meta">@Service</span><br><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserServiceImpl</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">UserService</span> </span>&#123;<br>    <span class="hljs-keyword">private</span> UserMapper userMapper;<br><br>    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-title">UserServiceImpl</span><span class="hljs-params">(UserMapper userMapper)</span> </span>&#123;<br>        <span class="hljs-keyword">this</span>.userMapper = userMapper;<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> id</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-function"><span class="hljs-keyword">public</span> User <span class="hljs-title">findById</span><span class="hljs-params">(Integer id)</span> </span>&#123;<br>        <span class="hljs-keyword">return</span> userMapper.findById(id);<br>    &#125;<br><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-function"><span class="hljs-keyword">public</span> List&lt;User&gt; <span class="hljs-title">findAll</span><span class="hljs-params">()</span></span>&#123;<br>        <span class="hljs-keyword">return</span> userMapper.findAll();<br>    &#125;<br>&#125;<br><br><br></code></pre></td></tr></table></figure>


<h2 id="7-controller"><a href="#7-controller" class="headerlink" title="7.controller"></a>7.controller</h2><figure class="highlight kotlin"><table><tr><td class="code"><pre><code class="hljs kotlin"><span class="hljs-keyword">package</span> com.mhist.studyJava.controller;<br><span class="hljs-keyword">import</span> com.mhist.studyJava.pojo.User;<br><span class="hljs-keyword">import</span> com.mhist.studyJava.service.UserService;<br><span class="hljs-keyword">import</span> org.springframework.beans.factory.<span class="hljs-keyword">annotation</span>.Autowired;<br><span class="hljs-keyword">import</span> org.springframework.web.bind.<span class="hljs-keyword">annotation</span>.GetMapping;<br><span class="hljs-keyword">import</span> org.springframework.web.bind.<span class="hljs-keyword">annotation</span>.RestController;<br><br><span class="hljs-keyword">import</span> java.util.List;<br><br><span class="hljs-meta">@RestController</span><br><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserController</span> </span>&#123;<br>    <span class="hljs-keyword">private</span> UserService userService;<br><br>    <span class="hljs-keyword">public</span> UserController(UserService userService) &#123;<br>        <span class="hljs-keyword">this</span>.userService = userService;<br>    &#125;<br><br>    <span class="hljs-meta">@GetMapping(<span class="hljs-meta-string">&quot;/findById&quot;</span>)</span><br>    <span class="hljs-keyword">public</span> User findById(Integer id) &#123;<br>        <span class="hljs-keyword">return</span> userService.findById(id);<br>    &#125;<br><br>    <span class="hljs-meta">@GetMapping(<span class="hljs-meta-string">&quot;/findAll&quot;</span>)</span><br>    <span class="hljs-keyword">public</span> List&lt;User&gt; findAll() &#123;<br>        <span class="hljs-keyword">return</span> userService.findAll();<br>    &#125;<br><br>&#125;<br><br></code></pre></td></tr></table></figure>

<div class="note warning modern"><p> 由于jdk17环境下不推荐使用@Autowired ,所以在controller中导入service、以及在service实现类中导入mapper的时候、需要使用有参构造</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">private</span> UserService userService;<br><br>  <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-title">UserController</span>(<span class="hljs-params">UserService userService</span>)</span> &#123;<br>      <span class="hljs-built_in">this</span>.userService = userService;<br>  &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">private</span> UserMapper userMapper;<br><br><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-title">UserServiceImpl</span>(<span class="hljs-params">UserMapper userMapper</span>)</span> &#123;<br>    <span class="hljs-built_in">this</span>.userMapper = userMapper;<br>&#125;<br><br></code></pre></td></tr></table></figure>

</div>]]></content>
      <categories>
        <category>spring</category>
      </categories>
      <tags>
        <tag>spring</tag>
      </tags>
  </entry>
  <entry>
    <title>uni-app实战（一）</title>
    <url>/2021/10/26/uni-app/4132b17f6755/</url>
    <content><![CDATA[<h1 id="项目的构建"><a href="#项目的构建" class="headerlink" title="项目的构建"></a>项目的构建</h1><ol>
<li>开发工具采用uni-app官方的开发工具<a href="https://www.dcloud.io/hbuilderx.html">HbuilderX</a></li>
<li>构建项目选择基础模板</li>
<li>引入样式库 <ul>
<li>uni.css 官方ui库</li>
<li>animate.css css动画库</li>
<li>icon.css 图标库</li>
<li>common.css 公共样式</li>
</ul>
</li>
</ol>
]]></content>
      <categories>
        <category>uni-app</category>
      </categories>
      <tags>
        <tag>uni-app</tag>
      </tags>
  </entry>
  <entry>
    <title>vue2一些原理</title>
    <url>/2022/03/08/vue/9eb91058fc40/</url>
    <content><![CDATA[<h2 id="一、MVVM"><a href="#一、MVVM" class="headerlink" title="一、MVVM"></a>一、MVVM</h2><p>vue 中的 MVVM 模型，其本质即 M,V,VM 等组成的数据与视图模型<br><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/%20img/20220308141504.png"></p>
<h2 id="二、数据代理"><a href="#二、数据代理" class="headerlink" title="二、数据代理"></a>二、数据代理</h2><pre><code>深入理解响应式原理：https://cn.vuejs.org/v2/guide/reactivity.html#ad

用法：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法：Object.defineProperty(obj, prop, descriptor)

第一个参数：要定义属性的对象。
第二个参数：要定义或修改的属性的名称或 Symbol
第三个参数：要定义或修改的属性描述符。
</code></pre>
<figure class="highlight reasonml"><table><tr><td class="code"><pre><code class="hljs reasonml"><span class="hljs-keyword">let</span> number = <span class="hljs-number">18</span>；<br><span class="hljs-keyword">let</span> person= &#123;<br>    name:<span class="hljs-string">&quot;张三&quot;</span>，<br>    sex: <span class="hljs-string">&quot;男&quot;</span>，<br>   <span class="hljs-comment">// age:18       //方式一</span><br>&#125;<br><br><br>方式二：<br><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">Object</span>.</span></span>define<span class="hljs-constructor">Property(<span class="hljs-params">person</span>,&#x27;<span class="hljs-params">age</span>&#x27;)</span>,&#123;<br>    value:<span class="hljs-number">18</span><br>&#125;<br><br><br>console.log(<span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">Object</span>.</span></span>keys<span class="hljs-literal">()</span>)<br><br></code></pre></td></tr></table></figure>

<p>通过方式二定义的age值，默认是是不能遍历的。<br>如果需要属性可枚举，可以在其中配置属性enumerable<br>如果需要属性可被修改，可以在其中配置属性writable<br>如果需要属性可被修改，可以在其中配置属性configurable<br>高级的配置：</p>
<figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">Object.defineProperty(person,<span class="hljs-string">&#x27;age&#x27;</span>),&#123;<br>    <span class="hljs-regexp">//</span>value:<span class="hljs-number">18</span>，<br>   <span class="hljs-regexp">//</span> enumerable:true,<span class="hljs-regexp">//</span> 控制属性是否可以枚举，默认值是false<br>    <span class="hljs-regexp">//</span>writeable:true, <span class="hljs-regexp">//</span> 控制对象的属性是否可以被修改，默认值是false<br>    <span class="hljs-regexp">//</span> configurable:true, <span class="hljs-regexp">//</span> 控制对象的属性是否可以被删除，默认值是false<br>    <br><br>    <span class="hljs-regexp">//</span> 当有人读取person的age属性时，get函数（一般被称为getter）就会被调用，且返回值就是age的值<br>     get：<span class="hljs-keyword">function</span>() &#123;<br>         return number<br>     &#125;<br>      <br>    <span class="hljs-regexp">//</span> 当有人读取person的age属性时，set函数（一般被称为setter）就会被调用，且返回值就是age的值<br>     set：<span class="hljs-keyword">function</span>(value) &#123;<br>         number = value<br>         return value<br>     &#125;<br>&#125;<br><br></code></pre></td></tr></table></figure>


<p>数据代理的定义：通过一个对象对另一个对象中属性的操作（读，写）</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj = &#123;<span class="hljs-attr">x</span>:<span class="hljs-number">100</span>&#125;;<br><span class="hljs-keyword">let</span> obj2 = &#123;<span class="hljs-attr">y</span>:<span class="hljs-number">200</span>&#125;;<br><span class="hljs-built_in">Object</span>.defineProperty(obj2,<span class="hljs-string">&#x27;x&#x27;</span>,&#123;<br>    <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-keyword">return</span> obj.x<br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">value</span>)</span> &#123;<br>       obj.x = value<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<p>Vue中的数据代理<br><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/%20img/20220308153043.png"></p>
<p> 在定义好的Vue实例vm中有 _data 属性对象，实例化过程中data对象中预先定义的name，address会加入到 _data 中，即_data可以代理data中的属性值，获取data.name,也可以通过data.name =  “123”<br> 触发_data.name的值发生改变</p>
<p> 即现在有两个对象   _data,  data</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">Object</span>.defineProperty(_data,<span class="hljs-string">&#x27;name&#x27;</span>,&#123;<br>    <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-keyword">return</span> data.name<br>    &#125;<br><br>    <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">value</span>)</span> &#123;<br>         data.name = value<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>


<p>_data中的会触发页面的数据实时更新，所以当实例化过程中的定义的data对象中的属性值发生变化时，需要监听，来修改_data从而触发视图层的更新。</p>
<h2 id="Vue更新数据遇到的问题"><a href="#Vue更新数据遇到的问题" class="headerlink" title="Vue更新数据遇到的问题"></a>Vue更新数据遇到的问题</h2><p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/%20img/20220308220947.png"></p>
<p>Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。</p>
<p><a href="https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E5%AF%B9%E8%B1%A1">https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E5%AF%B9%E8%B1%A1</a></p>
]]></content>
      <categories>
        <category>vue</category>
      </categories>
      <tags>
        <tag>vue</tag>
      </tags>
  </entry>
  <entry>
    <title>vue3</title>
    <url>/2021/10/11/vue3/583a6ec9ccd6/</url>
    <content><![CDATA[<h1 id="vue3"><a href="#vue3" class="headerlink" title="vue3"></a>vue3</h1><p>   新一代的前端框架，基于typescript开发，具有更加优越的性能和更加安全的代码机制。</p>
<span id="more"></span>]]></content>
      <categories>
        <category>vue3</category>
      </categories>
      <tags>
        <tag>vue3</tag>
      </tags>
  </entry>
  <entry>
    <title>vue3 基础文档学习</title>
    <url>/2021/09/23/vue3/22ee434cee21/</url>
    <content><![CDATA[<h1 id="基础文档网址"><a href="#基础文档网址" class="headerlink" title="基础文档网址"></a>基础文档网址</h1><p><a href="https://v3.cn.vuejs.org/">vue3官方文档学习</a></p>
<span id="more"></span>
]]></content>
      <categories>
        <category>vue3</category>
      </categories>
      <tags>
        <tag>TypeScript</tag>
        <tag>vue3</tag>
        <tag>vite</tag>
      </tags>
  </entry>
  <entry>
    <title>webpack基本配置（二）</title>
    <url>/2021/10/18/webpack/eb2dff5fc128/</url>
    <content><![CDATA[<h1 id="webpack基本配置-入口、出口"><a href="#webpack基本配置-入口、出口" class="headerlink" title="webpack基本配置(入口、出口)"></a>webpack基本配置(入口、出口)</h1><p>配置方式：</p>
<ul>
<li>第一种方式</li>
</ul>
<p>通过在命令行直接指定,但是在操作的时候容易输错命令，且在需要重复重复操作时，需要再次输入很长的命令，显然是非常影响开发效率的。</p>
<figure class="highlight jboss-cli"><table><tr><td class="code"><pre><code class="hljs jboss-cli">webpack <span class="hljs-params">--entry</span> <span class="hljs-string">./src/main.js</span> <span class="hljs-params">--output-path</span> <span class="hljs-string">./build</span><br></code></pre></td></tr></table></figure>

<ul>
<li>第二种方式</li>
</ul>
<p>通过在项目的<font color=chocolate>package.json</font>文件中的scripts对象中，将命令指定为相应的值y，通过在命令行，输入npm run + x 。也可以完成相应的操作，    (其中x表示y相对应的键) </p>
<figure class="highlight ada"><table><tr><td class="code"><pre><code class="hljs ada"><span class="hljs-string">&quot;scripts&quot;</span> : &#123;<br>    <span class="hljs-string">&quot;build&quot;</span>: <span class="hljs-string">&quot;webpack --entry ./src/main.js --output-path ./build&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure>
<p>但是可以明显的考虑到，当右边的命令很长时，是非常不便于阅读和维护的。</p>
<ul>
<li>第三种方式</li>
</ul>
<p>通过在项目package.json统计目录新建 <font color=royalblue>webpack.config.js</font>  文件</p>
<figure class="highlight lua"><table><tr><td class="code"><pre><code class="hljs lua"><br>const <span class="hljs-built_in">path</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;path&#x27;</span>);<br><br><span class="hljs-built_in">module</span>.exports = &#123;<br>   entry: <span class="hljs-string">&#x27;./src/main.js&#x27;</span>, //可以相对路径<br>   <span class="hljs-built_in">output</span>:&#123;<br>     filename: <span class="hljs-string">&quot;bundle.js&quot;</span>,<br>     <span class="hljs-built_in">path</span>: <span class="hljs-built_in">path</span>.resolve(__dirname,<span class="hljs-string">&quot;./build&quot;</span>)          //只能绝对绝对路径  <br>   &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>输出文件只能是绝对路径，可以通过path.resolve指定项目文件夹的所在路径。否则会报以下错误<blockquote>
<p>[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.- configuration.output.path: The provided value “./build” is not an absolute path!-&gt; The output directory as <strong>absolute path</strong> (required).</p>
</blockquote>
</li>
</ul>
<h1 id="为什么采用module-export形式"><a href="#为什么采用module-export形式" class="headerlink" title="为什么采用module.export形式"></a>为什么采用<font color=green>module.export</font>形式</h1><p><a href="http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html">webpack读取文件的时候是采用的common，js的方式，因为webpack配置需要在node环境下运行</a></p>
<hr>
<div class="note warning modern"><p>如果在新建文件时，不将webpack配置文件命名为webpack.config.json命令为这样，在运行命令时就会报错，因为这是webpack配置的默认值，如果想要指定文件名，则可以在package.json的scripts文件中</p>
<figure class="highlight ada"><table><tr><td class="code"><pre><code class="hljs ada"><span class="hljs-string">&quot;scripts&quot;</span> : &#123;<br>    <span class="hljs-string">&quot;build&quot;</span>: <span class="hljs-string">&quot;webpack --config 自定义文件名（英文）.config,js&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure></div>

<hr>
<h1 id="理解webpack打包机制与依赖关系"><a href="#理解webpack打包机制与依赖关系" class="headerlink" title="理解webpack打包机制与依赖关系"></a>理解webpack打包机制与依赖关系</h1><p>   在webpack的打包过程中实际上就是通过文件之间的引入，导出等形成各种的依赖关系，并且依赖于这种关系，将多方的资源进行打包，有点类似于 中国当下的公路建设，可以连接到各地的城市和乡村，对于我们在js文件中，通过依赖进行打包发现是畅通无阻的，但是在给一些js文件中引入css文件时，再进行打包的时候就会出现以下问题，这就像是各地的桥梁来完成公路间的链接，这也就是loader的基本认识。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-string">&quot;../css/index.css&quot;</span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">component</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">const</span> element = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&quot;div&quot;</span>);<br><br>    element.innerHTML = [<span class="hljs-string">&quot;hello&quot;</span>, <span class="hljs-string">&quot;webpack&quot;</span>].join(<span class="hljs-string">&quot; &quot;</span>);<br><br>    element.className = <span class="hljs-string">&quot;content&quot;</span>;<br><br>    <span class="hljs-keyword">return</span> element;<br>&#125;<br><br><span class="hljs-built_in">document</span>.body.appendChild(component());<br></code></pre></td></tr></table></figure>

<p>在以上的代码中我们引入了css样式文件，然后输入命令进行打包时：</p>
<div class="note danger modern"><pre>
ERROR in ./src/css/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 
See https://webpack.js.org/concepts#loaders
> .content {
|     color: aquamarine;
| }
</pre></div>

<h1 id="loader"><a href="#loader" class="headerlink" title="loader"></a>loader</h1><h2 id="loader的基本概念"><a href="#loader的基本概念" class="headerlink" title="loader的基本概念"></a>loader的基本概念</h2><p><font color=red>loader</font> 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。</p>
<p>本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。</p>
<h2 id="css-loader的安装"><a href="#css-loader的安装" class="headerlink" title="css-loader的安装"></a>css-loader的安装</h2><figure class="highlight cmake"><table><tr><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> css-loader -D<br></code></pre></td></tr></table></figure>

<p>当前版本为：<font color=amber><a href="mailto:&#x63;&#115;&#115;&#x2d;&#108;&#x6f;&#97;&#x64;&#x65;&#114;&#64;&#54;&#x2e;&#52;&#46;&#48;">&#x63;&#115;&#115;&#x2d;&#108;&#x6f;&#97;&#x64;&#x65;&#114;&#64;&#54;&#x2e;&#52;&#46;&#48;</a></font></p>
<p>安装完css-loader后，在package.json的<font color=red>devDependencies</font>中即可看到对应的版本号，但是现在桥梁的材料准备好了，还需要将公路与桥梁进行以下安装处理，使得其可以稳固通行，也就是代码能够正常运行。要想达到目的，有以下几种方式：</p>
<div class="tabs" id="tab"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tab-1">配置方式 推荐</button></li><li class="tab"><button type="button" data-href="#tab-2">CLI方式（webpack5版本中不再使用）</button></li><li class="tab"><button type="button" data-href="#tab-3">内联方式</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tab-1"><figure class="highlight yaml"><table><tr><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">module:</span> &#123;<br>   <span class="hljs-attr">rules:</span> [<br>     &#123;<br>       <span class="hljs-attr">test:</span> <span class="hljs-string">/\.css$/</span>,               <br>       <span class="hljs-attr">use:</span> [<br>         &#123; <span class="hljs-attr">loader:</span> <span class="hljs-string">&#x27;style-loader&#x27;</span> &#125;,<br>         &#123;<br>           <span class="hljs-attr">loader:</span> <span class="hljs-string">&#x27;css-loader&#x27;</span>,<br>           <span class="hljs-attr">options:</span> &#123;<br>             <span class="hljs-attr">modules:</span> <span class="hljs-literal">true</span><br>           &#125;<br>         &#125;<br>       ]<br>     &#125;<br>   ]<br> &#125;<br></code></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tab-2"><figure class="highlight fortran"><table><tr><td class="code"><pre><code class="hljs fortran">webpack --<span class="hljs-keyword">module</span>-<span class="hljs-keyword">bind</span> jade-loader --<span class="hljs-keyword">module</span>-<span class="hljs-keyword">bind</span> <span class="hljs-string">&#x27;css=style-loader!css-loader&#x27;</span><br></code></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tab-3"><p>通过loader名字和”!” 将css文件分隔开，当然也可以同时写多个 import “xxx-loader!css-loader../css/index.css”;</p>
<figure class="highlight abnf"><table><tr><td class="code"><pre><code class="hljs abnf">import <span class="hljs-string">&quot;css-loader!../css/index.css&quot;</span><span class="hljs-comment">;</span><br></code></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>


<p>-在配置模式中，webpack会按照代码从下方到上方的方向进行loader的解析或者代码在同一行时，从右方向左方使用loader进行加载。当然，可以在自定义loader时，指定解析顺序，不过是后面的内容了。<br><font color=royalblue> 注意编写顺序  从下到上，从右往左，本质 从后往前</font></p>
<p>在前面我们已经了解到，处理css文件需要css-loader,style-loader等来处理，那么在开发过程中如果需要处理不同的文件，则需要不同的loader来实现代码功能。</p>
<p>但是，以less文件举例子，则需要用到less工具</p>
<figure class="highlight cmake"><table><tr><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">less</span> -D<br></code></pre></td></tr></table></figure>
<p>当前版本：<font color=camel> <a href="mailto:&#x6c;&#x65;&#x73;&#x73;&#64;&#x34;&#46;&#x31;&#x2e;&#50;">&#x6c;&#x65;&#x73;&#x73;&#64;&#x34;&#46;&#x31;&#x2e;&#50;</a></font></p>
<p>安装完成后，可以通过npx来操作node_modules中的less，来进行处理：</p>
<figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">npx less .<span class="hljs-regexp">/src/</span>css/component.less &gt; component.css<br></code></pre></td></tr></table></figure>
<p>它可以将less文件转为正常的css文件</p>
<div class="tabs" id="tab"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tab-1">less文件 （转化前）</button></li><li class="tab"><button type="button" data-href="#tab-2">css文件（转化后）</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tab-1"><figure class="highlight less"><table><tr><td class="code"><pre><code class="hljs less"><span class="hljs-variable">@fontSize:</span><span class="hljs-number">50px</span>;<br><span class="hljs-variable">@fontWeight:</span> <span class="hljs-number">700</span>;<br><br><span class="hljs-selector-class">.content</span> &#123;<br>    <span class="hljs-attribute">font-size</span>: <span class="hljs-variable">@fontSize</span>;<br>    <span class="hljs-attribute">font-weight</span>: <span class="hljs-variable">@fontWeight</span>;<br>&#125;<br> <br></code></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tab-2"><figure class="highlight css"><table><tr><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.content</span> &#123;<br>  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">50px</span>;<br>  <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">700</span>;<br>&#125;<br></code></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h1 id="less-loader"><a href="#less-loader" class="headerlink" title="less-loader"></a>less-loader</h1><p>从上面的处理过程中，我们能够体会到less工具的快捷，但是在中大型项目中，当有大量的less文件需要处理时，想要通过命令行完成less文件的转化显然是不现实的，于是可以采用less-loader来进行处理，当然<font color=seagreen>less-loader是基于less工具</font>的，所以使用less-loader时，需要保证提前安装了less工具。</p>
<figure class="highlight cmake"><table><tr><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">less</span> -D<br></code></pre></td></tr></table></figure>
<p>当前版本：<font color=camel> <a href="mailto:&#x6c;&#x65;&#x73;&#115;&#64;&#x34;&#46;&#49;&#x2e;&#50;">&#x6c;&#x65;&#x73;&#115;&#64;&#x34;&#46;&#49;&#x2e;&#50;</a></font></p>
<figure class="highlight cmake"><table><tr><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">less</span>-loader -D<br></code></pre></td></tr></table></figure>
<p>当前版本： <font color=amber><a href="mailto:&#108;&#101;&#115;&#115;&#45;&#x6c;&#111;&#x61;&#x64;&#101;&#114;&#64;&#49;&#x30;&#x2e;&#50;&#x2e;&#x30;">&#108;&#101;&#115;&#115;&#45;&#x6c;&#111;&#x61;&#x64;&#101;&#114;&#64;&#49;&#x30;&#x2e;&#50;&#x2e;&#x30;</a></font></p>
<figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">module: &#123;<br>   <span class="hljs-regexp">//</span> rules数组里面都是rule对象<br>  rules: [<br>    &#123;<br>      test: <span class="hljs-regexp">/\.css$/</span>,    <span class="hljs-regexp">//</span> 匹配以css结尾的文件<br>      use: [<br>        <span class="hljs-regexp">//</span>  注意编写顺序  从下到上，从右往左，本质 从后往前<br>        &#123; loader: <span class="hljs-string">&#x27;style-loader&#x27;</span> &#125;,<br>        &#123;<br>          loader: <span class="hljs-string">&#x27;css-loader&#x27;</span>,<br>        &#125;<br>      ]<br>    &#125;,<br>    &#123;<br>      test: <span class="hljs-regexp">/\.less$/</span>,    <span class="hljs-regexp">//</span> 匹配以css结尾的文件<br>      use: [<br>        <span class="hljs-regexp">//</span>  注意编写顺序  从下到上，从右往左，本质 从后往前<br>        &#123; loader: <span class="hljs-string">&#x27;style-loader&#x27;</span> &#125;,<br>        &#123; loader: <span class="hljs-string">&#x27;css-loader&#x27;</span> &#125;,<br>        &#123;<br>          loader: <span class="hljs-string">&#x27;less-loader&#x27;</span>,<br>        &#125;<br>      ]<br>    &#125;<br>  ]<br>&#125;<br></code></pre></td></tr></table></figure>

<h1 id="浏览器兼容性"><a href="#浏览器兼容性" class="headerlink" title="浏览器兼容性"></a>浏览器兼容性</h1><p>在开发中，我们会遇到浏览器的兼容性问题，不是指屏幕大小的变化适配，主要是针对于不同的浏览器所支持的特性之间的问题，比如CSS特性，js语法之间的兼容性，同时市面上存在着的浏览器，包括chrome、safari、IE、Edge、chrome for Android、UC Browser、QQ Browser等等，有着不同的市场占有率，是不是都需要兼容呢？</p>
<h2 id="市场占有率与browserslist工具"><a href="#市场占有率与browserslist工具" class="headerlink" title="市场占有率与browserslist工具"></a>市场占有率与browserslist工具</h2><p> 浏览器的市场占有率，可以通过<a href="https://caniuse.com/usage-table">网站 can i use</a>在线查询。</p>
<p>前端工具举例：autoprefixer , babel , postcss-preset-env</p>
<p><a href="https://www.cnblogs.com/both-eyes/p/10151272.html">通过browserslist，在不同的前端工具之间，共享目标浏览器和Node.js版本的配置。</a></p>
<p>基本写法,可以参考以下方式：</p>
<div class="tabs" id="tab"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tab-1">在package.json中添加</button></li><li class="tab"><button type="button" data-href="#tab-2">package.json同级目录创建 .browserslistrc文件</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tab-1"><figure class="highlight prolog"><table><tr><td class="code"><pre><code class="hljs prolog"><span class="hljs-string">&quot;browserslist&quot;</span>: [<br>    <span class="hljs-string">&quot;&gt;1%&quot;</span>,<br>    <span class="hljs-string">&quot;last 2 version&quot;</span>,<br>    <span class="hljs-string">&quot;not dead&quot;</span><br>] <br></code></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tab-2"><figure class="highlight applescript"><table><tr><td class="code"><pre><code class="hljs applescript">&gt;<span class="hljs-number">1</span>%<br><span class="hljs-keyword">last</span> <span class="hljs-number">2</span> <span class="hljs-built_in">version</span><br><span class="hljs-keyword">not</span> dead<br></code></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<p>在不设置时，会有默认的基础配置</p>
<figure class="highlight ini"><table><tr><td class="code"><pre><code class="hljs ini"><span class="hljs-attr">browserslist.defaults</span> = [<br>  <span class="hljs-string">&#x27;&gt; 0.5%&#x27;</span>,<br>  <span class="hljs-string">&#x27;last 2 versions&#x27;</span>,<br>  <span class="hljs-string">&#x27;Firefox ESR&#x27;</span>,<br>  <span class="hljs-string">&#x27;not dead&#x27;</span><br>]<br></code></pre></td></tr></table></figure>

<h1 id="postcss工具"><a href="#postcss工具" class="headerlink" title="postcss工具"></a>postcss工具</h1><p> <a href="https://www.postcss.com.cn/">PostCSS</a> 利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。</p>
<p> 可以使用命令：<br> <figure class="highlight mipsasm"><table><tr><td class="code"><pre><code class="hljs mipsasm">npx <span class="hljs-keyword">browserslist </span><span class="hljs-string">&quot;&gt;1%,last 2 version,not dead&quot;</span><br></code></pre></td></tr></table></figure><br> 来查询根据条件查询出需要适配的浏览器，在Windows环境下，会在项目的src目录下生成一个名为1%的文件。如果出现这种情况可以用</p>
 <figure class="highlight mipsasm"><table><tr><td class="code"><pre><code class="hljs mipsasm">npx <span class="hljs-keyword">browserslist </span><span class="hljs-string">&quot;&quot;</span><br></code></pre></td></tr></table></figure>
<p>它会根据你的package.json中的”browserslist”条件或者是package.json同级目录创建的.browserslistrc文件中的条件来输出浏览器的名字及对应的版本。</p>
<h2 id="通过JavaScript转换css样式"><a href="#通过JavaScript转换css样式" class="headerlink" title="通过JavaScript转换css样式"></a>通过JavaScript转换css样式</h2><ul>
<li>完成css的转换与匹配</li>
<li>完成css样式的重置</li>
</ul>
<p>需要借助于PostCss插件。</p>
<h2 id="使用postcss的步骤"><a href="#使用postcss的步骤" class="headerlink" title="使用postcss的步骤"></a>使用postcss的步骤</h2><p>第一步：查找postCss在构建工具中的扩展，比如webpack中的postcss-loader;<br>第二步： 选择可以添加你需要的postCss相关的插件</p>
<p>如果是在终端直接使用，需要单独安装postcss-cli。</p>
<figure class="highlight avrasm"><table><tr><td class="code"><pre><code class="hljs avrasm">npm i -D postcss postcss-<span class="hljs-keyword">cli</span><br></code></pre></td></tr></table></figure>
<p><font color=chocolate>+ <a href="mailto:&#112;&#x6f;&#115;&#116;&#99;&#x73;&#115;&#64;&#56;&#46;&#51;&#46;&#x39;">&#112;&#x6f;&#115;&#116;&#99;&#x73;&#115;&#64;&#56;&#46;&#51;&#46;&#x39;</a></font><br><font color=yellowgreen>+ <a href="mailto:&#112;&#111;&#x73;&#x74;&#x63;&#115;&#115;&#x2d;&#x63;&#108;&#x69;&#64;&#57;&#x2e;&#48;&#x2e;&#49;">&#112;&#111;&#x73;&#x74;&#x63;&#115;&#115;&#x2d;&#x63;&#108;&#x69;&#64;&#57;&#x2e;&#48;&#x2e;&#49;</a></font></p>
<p>在css开发过程中，会写到很多属性和样式，让我们遇到不熟悉的属性的时候，不清楚需要对哪些浏览器进行适配的时候，可以到<a href="http://autoprefixer.github.io/">Autoprefixer CSS online</a>,它是一个postcss插件，可以通过它解析CSS并添加供应商前缀。</p>
<p>自动添加前缀插件： autopreFixer</p>
<figure class="highlight angelscript"><table><tr><td class="code"><pre><code class="hljs angelscript">npm install <span class="hljs-built_in">auto</span>prefixer -D<br></code></pre></td></tr></table></figure>
<p>当前版本：<font color=blue><a href="mailto:&#97;&#x75;&#x74;&#x6f;&#x70;&#x72;&#101;&#x66;&#x69;&#120;&#x65;&#x72;&#64;&#x31;&#48;&#x2e;&#x33;&#x2e;&#x37;">&#97;&#x75;&#x74;&#x6f;&#x70;&#x72;&#101;&#x66;&#x69;&#120;&#x65;&#x72;&#64;&#x31;&#48;&#x2e;&#x33;&#x2e;&#x37;</a></font></p>
<div class="tabs" id="tab"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tab-1">webpack使用方式  post-cssloader</button></li><li class="tab"><button type="button" data-href="#tab-2">命令行使用方式：</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tab-1"><figure class="highlight cmake"><table><tr><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> postcss-loader -D<br></code></pre></td></tr></table></figure>
<p><font color=royalblue>+ <a href="mailto:&#x70;&#111;&#115;&#x74;&#99;&#115;&#x73;&#x2d;&#x6c;&#111;&#97;&#100;&#x65;&#114;&#x40;&#x36;&#46;&#x32;&#46;&#48;">&#x70;&#111;&#115;&#x74;&#99;&#115;&#x73;&#x2d;&#x6c;&#111;&#97;&#100;&#x65;&#114;&#x40;&#x36;&#46;&#x32;&#46;&#48;</a></font><br>它可以自动检测并通过postcss来进行css的自动化处理。</p>
<figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">module: &#123;<br>     <span class="hljs-regexp">//</span> rules数组里面都是rule对象<br>    rules: [<br>      &#123;<br>        test: <span class="hljs-regexp">/\.css$/</span>,    <span class="hljs-regexp">//</span> 匹配以css结尾的文件<br>        use: [<br>          <span class="hljs-regexp">//</span>  注意编写顺序  从下到上，从右往左，本质 从后往前<br>          &#123; loader: <span class="hljs-string">&#x27;style-loader&#x27;</span> &#125;,<br>          &#123;<br>            loader: <span class="hljs-string">&#x27;css-loader&#x27;</span>,<br>          &#125;,<br>          &#123;<br>            loader: <span class="hljs-string">&#x27;postcss-loader&#x27;</span>,<br>            options: &#123;<br>              postcssOptions: &#123;<br>                plugins: [<br>                  require(<span class="hljs-string">&quot;autoprefixer&quot;</span>)<br>                ]<br>              &#125;<br>            &#125;<br>          &#125;<br>        ]<br>      &#125;<br>    ]<br>  &#125;<br><br></code></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20211019213331autoPreFixerExample.png" alt="自动加前缀实验"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tab-2"><figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">npx postcss --use autoprefixer -o result.css .<span class="hljs-regexp">/src/</span>css/test.css<br></code></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>
]]></content>
      <categories>
        <category>webpack</category>
      </categories>
      <tags>
        <tag>webpack</tag>
      </tags>
  </entry>
  <entry>
    <title>webpack（一）</title>
    <url>/2021/04/28/webpack/a052f112cdb6/</url>
    <content><![CDATA[<h1 id="网络问题影响提交"><a href="#网络问题影响提交" class="headerlink" title="网络问题影响提交"></a>网络问题影响提交</h1><p>问题1：fatal: unable to access ‘<a href="https://github.com/Mhist/Mhist.github.io.git/&#39;">https://github.com/Mhist/Mhist.github.io.git/&#39;</a>: OpenSSL SSL_read: Connection was reset, errno 10054</p>
<figure class="highlight tcl"><table><tr><td class="code"><pre><code class="hljs tcl">git config --<span class="hljs-keyword">global</span> <span class="hljs-keyword">http</span>.sslVerify <span class="hljs-string">&quot;false&quot;</span><br></code></pre></td></tr></table></figure>
<p>问题2 ：Failed to connect to github.com port 443: Timed out</p>
<figure class="highlight tcl"><table><tr><td class="code"><pre><code class="hljs tcl">git config --<span class="hljs-keyword">global</span> --<span class="hljs-keyword">unset</span> <span class="hljs-keyword">http</span>.proxy<br></code></pre></td></tr></table></figure>

<h1 id="前言—带着问题学习webpack"><a href="#前言—带着问题学习webpack" class="headerlink" title="前言—带着问题学习webpack"></a>前言—带着问题学习webpack</h1><ul>
<li>1.什么是webpack?</li>
<li>2.为什么要学习webpack?</li>
<li>3.webpack有哪些基本概念，应该怎么高效学习webpack?</li>
</ul>
<h1 id="webpack基本概念"><a href="#webpack基本概念" class="headerlink" title="webpack基本概念"></a>webpack基本概念</h1><ul>
<li><a href="https://www.webpackjs.com/">webpack中文官网</a></li>
<li><a href="https://createapp.dev/webpack/no-library">webpack在线配置</a></li>
</ul>
<p>  在官网中，给出了webpack的基本解释，也就是网页的打包工具。它能够将项目的文件资源、图片、样式、脚本等通过 webpack 递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（包）。</p>
<h1 id="学习webpack有什么作用"><a href="#学习webpack有什么作用" class="headerlink" title="学习webpack有什么作用"></a>学习webpack有什么作用</h1><ol>
<li>给某些目录结构起别名</li>
<li>让项目支持sass、less等预处理器</li>
<li>添加配置让项目支持TypeScript</li>
<li>安装性能分析工具</li>
<li>使用Gzip压缩代码</li>
<li>引用cdn的资源</li>
<li>公共代码的抽取</li>
<li>编写定制化的loader和plugin</li>
<li>其他定制化配置，使得模块化开发和高级特性在低级浏览器也能正常显示</li>
</ol>
<h1 id="webpack的安装"><a href="#webpack的安装" class="headerlink" title="webpack的安装"></a>webpack的安装</h1><p>最新版本为：<img src="https://img.shields.io/npm/v/webpack.svg?label=webpack&style=flat-square&maxAge=3600" alt="webpack最新版本"></p>
<ul>
<li>依赖node环境，最低的node版本要求 <strong>v10.13.0</strong></li>
<li>博主当前node版本：v14.16.1 </li>
<li><a href="https://nodejs.org/en/">node官网及版本，最新稳定版本 v14.18.1</a></li>
</ul>
<hr>
<h2 id="安装方式"><a href="#安装方式" class="headerlink" title="安装方式"></a>安装方式</h2><p>1.本地安装（推荐）</p>
<ul>
<li>对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 npm scripts，会在本地 node_modules 目录中查找安装的 webpack：</li>
<li>方式1<figure class="highlight 1c"><table><tr><td class="code"><pre><code class="hljs 1c"><span class="hljs-string">&quot;scripts&quot;</span>: &#123;<br>    <span class="hljs-string">&quot;start&quot;</span>: <span class="hljs-string">&quot;webpack --config webpack.config.js&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure></li>
<li>方式2<figure class="highlight awk"><table><tr><td class="code"><pre><code class="hljs awk">.<span class="hljs-regexp">/node_modules/</span>.bin/webpack <br></code></pre></td></tr></table></figure></li>
<li>方式3<br>或者使用npx,它可以直接访问node_modules中的命令<figure class="highlight ebnf"><table><tr><td class="code"><pre><code class="hljs ebnf"><span class="hljs-attribute">npx webpack</span><br></code></pre></td></tr></table></figure></li>
</ul>
<p>当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。</p>
<ul>
<li>安装最新版本<figure class="highlight q"><table><tr><td class="code"><pre><code class="hljs q">npm install --<span class="hljs-built_in">save</span>-<span class="hljs-built_in">dev</span> webpack<br></code></pre></td></tr></table></figure></li>
<li>安装指定版本<figure class="highlight angelscript"><table><tr><td class="code"><pre><code class="hljs angelscript">npm install --save-dev <span class="hljs-symbol">webpack@<span class="hljs-keyword">&lt;version&gt;</span></span><br></code></pre></td></tr></table></figure></li>
</ul>
<p>2.全局安装(不推荐)</p>
<figure class="highlight coffeescript"><table><tr><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-built_in">npm</span> install --<span class="hljs-built_in">global</span> webpack<br></code></pre></td></tr></table></figure>

<ul>
<li>原因是：这会将项目中的webpack的版本锁定为全局安装时的版本，当因为开发时段和开发需求的不同而导致项目中依赖不同版本的webpack来构建时，可能会造成构建失败。</li>
</ul>
<h2 id="WEBPACK-CLI"><a href="#WEBPACK-CLI" class="headerlink" title="WEBPACK-CLI"></a>WEBPACK-CLI</h2><p> 对于webpack4可能需要安装webpack-cli,提供一下命令：</p>
<ul>
<li>全局安装</li>
</ul>
<figure class="highlight avrasm"><table><tr><td class="code"><pre><code class="hljs avrasm">npm install webpack-<span class="hljs-keyword">cli</span> -g<br></code></pre></td></tr></table></figure>

<ul>
<li>本地安装</li>
</ul>
<figure class="highlight avrasm"><table><tr><td class="code"><pre><code class="hljs avrasm">npm install webpack-<span class="hljs-keyword">cli</span> -D<br></code></pre></td></tr></table></figure>




]]></content>
      <categories>
        <category>webpack</category>
      </categories>
      <tags>
        <tag>webpack</tag>
      </tags>
  </entry>
  <entry>
    <title>为项目收集图标</title>
    <url>/2024/09/03/uncategorized/04a5cd962871/</url>
    <content><![CDATA[<h1 id="为项目收集图标"><a href="#为项目收集图标" class="headerlink" title="为项目收集图标"></a>为项目收集图标</h1><p>在日常的项目开发中、一些文字描述需要相应的图标来使得界面更加直观和美观、如何快速找到适合项目的图标是令人很困扰的一件事，这个网站给了我们很多选择、有完善的搜索机智、同时涵盖了很多种图标库、能够让你快速找到自己需要的图标、同时可以批量下载到本地。</p>
<p><a href="https://icones.js.org/" title=" Icon Explorer with Instant searching, powered by Iconify"> Icon Explorer with Instant searching, powered by Iconify</a></p>
<p><a href="https://icones.js.org/" title="icons网站截图"><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20240903101643-icons.png" alt="icons网站截图" title="icons网站截图"></a></p>
<h1 id="具体使用方式"><a href="#具体使用方式" class="headerlink" title="具体使用方式"></a>具体使用方式</h1><ul>
<li>参考链接：</li>
</ul>
<p><a href="https://blog.csdn.net/qq_27575627/article/details/138135490?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-138135490-blog-135137440.235%5Ev43%5Econtrol&spm=1001.2101.3001.4242.1&utm_relevant_index=1" title=" 本文介绍了如何在若依ruoyi-vue项目中使用全局SvgIcon组件，包括组件注册、路径引用、颜色设置以及针对iconfont下载图标时的尺寸调整建议。"> 本文介绍了如何在若依ruoyi-vue项目中使用全局SvgIcon组件，包括组件注册、路径引用、颜色设置以及针对iconfont下载图标时的尺寸调整建议。</a></p>
<h1 id="项目需求"><a href="#项目需求" class="headerlink" title="项目需求"></a>项目需求</h1><table>
<thead>
<tr>
<th>中文</th>
<th>英文</th>
<th>图标名称</th>
<th>图标搜索链接</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>静态风速</td>
<td>Static wind speed</td>
<td>wind-toy</td>
<td><a href="https://icones.js.org/collection/svg-spinners?s=wind">https://icones.js.org/collection/svg-spinners?s=wind</a></td>
<td></td>
</tr>
<tr>
<td>大气温度</td>
<td>Atmospheric temperature</td>
<td>outdoor-motion-sensor-temperature</td>
<td><a href="https://icones.js.org/collection/all?s=temperature">https://icones.js.org/collection/all?s=temperature</a></td>
<td>户外温度计</td>
</tr>
<tr>
<td>大气湿度</td>
<td>Atmospheric humidity</td>
<td>humidity-fill</td>
<td><a href="https://icones.js.org/collection/all?s=humidity">https://icones.js.org/collection/all?s=humidity</a></td>
<td>带百分号的水滴</td>
</tr>
<tr>
<td>大气波导等级</td>
<td>Atmospheric waveguide class</td>
<td>waves</td>
<td><a href="https://icones.js.org/collection/all?s=wave">https://icones.js.org/collection/all?s=wave</a></td>
<td>无</td>
</tr>
<tr>
<td>大气压力</td>
<td>atmospheric pressure</td>
<td>pressure-light</td>
<td><a href="https://icones.js.org/collection/all?s=pressure">https://icones.js.org/collection/all?s=pressure</a></td>
<td></td>
</tr>
<tr>
<td>大气折射率</td>
<td>Atmospheric refractive index</td>
<td>refraction</td>
<td><a href="https://icones.js.org/collection/all?s=refraction">https://icones.js.org/collection/all?s=refraction</a></td>
<td>折射</td>
</tr>
<tr>
<td>天气情况</td>
<td>Weather conditions</td>
<td>weather-map</td>
<td><a href="https://icones.js.org/collection/all?s=weather-map">https://icones.js.org/collection/all?s=weather-map</a></td>
<td>天气地图</td>
</tr>
<tr>
<td>降雨强度</td>
<td>Rainfall intensity</td>
<td>rain</td>
<td><a href="https://icones.js.org/collection/all?s=Rain">https://icones.js.org/collection/all?s=Rain</a></td>
<td></td>
</tr>
<tr>
<td>雨区中心经度</td>
<td>Longitude of the center of the rain zone</td>
<td>world-longitude</td>
<td><a href="https://icones.js.org/collection/all?s=Longitude">https://icones.js.org/collection/all?s=Longitude</a></td>
<td></td>
</tr>
<tr>
<td>雨区中心纬度</td>
<td>Latitude of the center of the rain zone</td>
<td>world-latitude</td>
<td><a href="https://icones.js.org/collection/all?s=Latitude">https://icones.js.org/collection/all?s=Latitude</a></td>
<td></td>
</tr>
<tr>
<td>雨区半径</td>
<td>Radius of the rain zone</td>
<td>radius</td>
<td><a href="https://icones.js.org/collection/all?s=Radius">https://icones.js.org/collection/all?s=Radius</a></td>
<td></td>
</tr>
<tr>
<td>雨区顶高</td>
<td>The rain area is high</td>
<td>arrow-autofix-height-in-20-regular</td>
<td><a href="https://icones.js.org/collection/all?s=hign+area">https://icones.js.org/collection/all?s=hign+area</a></td>
<td>顶高</td>
</tr>
<tr>
<td>降雨量</td>
<td>rainfall</td>
<td>accumulation</td>
<td><a href="https://icones.js.org/collection/all?s=rain">https://icones.js.org/collection/all?s=rain</a></td>
<td></td>
</tr>
<tr>
<td>降雪强度</td>
<td>Snowfall intensity</td>
<td>Snowfall+intensity</td>
<td><a href="https://icones.js.org/collection/all?s=Snowfall+intensity">https://icones.js.org/collection/all?s=Snowfall+intensity</a></td>
<td></td>
</tr>
<tr>
<td>降雪量</td>
<td>snowfall</td>
<td>accumulation-snow</td>
<td><a href="https://icones.js.org/collection/all?s=Snow">https://icones.js.org/collection/all?s=Snow</a></td>
<td></td>
</tr>
<tr>
<td>雾等级</td>
<td>Fog level</td>
<td>cloud-fog-light</td>
<td><a href="https://icones.js.org/collection/all?s=Fog">https://icones.js.org/collection/all?s=Fog</a></td>
<td></td>
</tr>
<tr>
<td>日期</td>
<td>date</td>
<td>calendar-dots-light</td>
<td><a href="https://icones.js.org/collection/all?s=date">https://icones.js.org/collection/all?s=date</a></td>
<td></td>
</tr>
<tr>
<td>时间</td>
<td>time</td>
<td>alarm-smart-wake-outline</td>
<td><a href="https://icones.js.org/collection/all?s=time">https://icones.js.org/collection/all?s=time</a></td>
<td></td>
</tr>
<tr>
<td>气象站</td>
<td>weather station</td>
<td>weather-front-stationary</td>
<td><a href="https://icones.js.org/collection/all?s=station">https://icones.js.org/collection/all?s=station</a></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>海水温度</td>
<td>Seawater temperature</td>
<td>temperature-max</td>
<td><a href="https://icones.js.org/collection/all?s=temperature">https://icones.js.org/collection/all?s=temperature</a></td>
<td></td>
</tr>
<tr>
<td>海水盐度</td>
<td>Sea salinity</td>
<td>temperature-water</td>
<td><a href="https://icones.js.org/collection/all?s=temperature">https://icones.js.org/collection/all?s=temperature</a></td>
<td></td>
</tr>
<tr>
<td>浪高</td>
<td>wave high</td>
<td>wave-height</td>
<td><a href="https://icones.js.org/collection/all?s=wave+high">https://icones.js.org/collection/all?s=wave+high</a></td>
<td></td>
</tr>
<tr>
<td>浪向</td>
<td>wave direction</td>
<td>wave-direction</td>
<td><a href="https://icones.js.org/collection/all?s=wave+direction">https://icones.js.org/collection/all?s=wave+direction</a></td>
<td></td>
</tr>
<tr>
<td>能见度</td>
<td>visibility</td>
<td>visibility-outline</td>
<td><a href="https://icones.js.org/collection/all?s=visibility">https://icones.js.org/collection/all?s=visibility</a></td>
<td></td>
</tr>
<tr>
<td>海水深度</td>
<td>The depth of the sea</td>
<td>depth</td>
<td><a href="https://icones.js.org/collection/all?s=depth">https://icones.js.org/collection/all?s=depth</a></td>
<td></td>
</tr>
<tr>
<td>海水密度</td>
<td>Density of sea water</td>
<td>low-density-rounded</td>
<td><a href="https://icones.js.org/collection/all?s=Density">https://icones.js.org/collection/all?s=Density</a></td>
<td></td>
</tr>
<tr>
<td>流速</td>
<td>Flow velocity</td>
<td>traffic-flow</td>
<td><a href="https://icones.js.org/collection/all?s=flow">https://icones.js.org/collection/all?s=flow</a></td>
<td></td>
</tr>
<tr>
<td>流向</td>
<td>Flow</td>
<td>flow-modeler</td>
<td><a href="https://icones.js.org/collection/all?s=flow">https://icones.js.org/collection/all?s=flow</a></td>
<td></td>
</tr>
<tr>
<td>波高</td>
<td>Wave height</td>
<td>cosine-01</td>
<td><a href="https://icones.js.org/collection/all?s=wave">https://icones.js.org/collection/all?s=wave</a></td>
<td></td>
</tr>
<tr>
<td>波峰周期</td>
<td>Peak period</td>
<td>wave-period</td>
<td><a href="https://icones.js.org/collection/all?s=wave">https://icones.js.org/collection/all?s=wave</a></td>
<td></td>
</tr>
<tr>
<td>波长</td>
<td>wave length</td>
<td>waves</td>
<td><a href="https://icones.js.org/collection/all?s=wave">https://icones.js.org/collection/all?s=wave</a></td>
<td></td>
</tr>
<tr>
<td>风向</td>
<td>wind direction</td>
<td>direction-adjustment-two</td>
<td><a href="https://icones.js.org/collection/all?s=wind">https://icones.js.org/collection/all?s=wind</a></td>
<td></td>
</tr>
<tr>
<td>发射天线增益</td>
<td>Antenna gain</td>
<td>internet-antenna</td>
<td><a href="https://icones.js.org/collection/all?s=Antenna">https://icones.js.org/collection/all?s=Antenna</a></td>
<td></td>
</tr>
<tr>
<td>频率上限</td>
<td>Frequency capping</td>
<td>lightning-frequency</td>
<td><a href="https://icones.js.org/collection/all?s=Frequency">https://icones.js.org/collection/all?s=Frequency</a></td>
<td></td>
</tr>
<tr>
<td>频率下限</td>
<td>Frequency lower limit</td>
<td>frequency-generator</td>
<td><a href="https://icones.js.org/collection/all?s=Frequency">https://icones.js.org/collection/all?s=Frequency</a></td>
<td></td>
</tr>
<tr>
<td>工作频率</td>
<td>Operating frequency</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>工作带宽</td>
<td>Working bandwidth</td>
<td>fit-width-rounded</td>
<td><a href="https://icones.js.org/collection/all?s=bind+Width">https://icones.js.org/collection/all?s=bind+Width</a></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
<figure class="highlight json"><table><tr><td class="code"><pre><code class="hljs json">[<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;arcticons:frequency-generator&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 48 48\&quot;&gt;&lt;rect width=\&quot;37\&quot; height=\&quot;37\&quot; x=\&quot;5.5\&quot; y=\&quot;5.5\&quot; fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; rx=\&quot;4\&quot; ry=\&quot;4\&quot;/&gt;&lt;path fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; d=\&quot;M24 32V16m4 11.5v-7m4 4.5v-2m4 1h2m-18 3.5v-7M16 25v-2m-4 1h-2\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;arcticons:waves&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 48 48\&quot;&gt;&lt;circle cx=\&quot;24\&quot; cy=\&quot;24\&quot; r=\&quot;21.5\&quot; fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot;/&gt;&lt;path fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; d=\&quot;M2.56 22.4c5.31 0 5.33 3.2 10.69 3.2s5.37-3.2 10.75-3.2s5.38 3.2 10.76 3.2s5.37-3.18 10.69-3.2M5.17 13.61c2.92.82 3.78 2.87 8.08 2.87c5.37 0 5.37-3.2 10.74-3.2s5.38 3.2 10.76 3.2c4.3 0 5.16-2.05 8.08-2.87M3.88 31.6c4 .5 4.5 3.12 9.37 3.12c5.37 0 5.37-3.2 10.74-3.2s5.38 3.2 10.76 3.2c4.87 0 5.33-2.63 9.37-3.12\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:accumulation-rain&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M28 4a2 2 0 0 0-2 2v2h-2a3.44 3.44 0 0 1-3.051-2.316A1.01 1.01 0 0 0 20 5a.99.99 0 0 0-.947.679A3.44 3.44 0 0 1 16 8a3.44 3.44 0 0 1-3.051-2.316A1.01 1.01 0 0 0 12 5a.97.97 0 0 0-.947.679A3.44 3.44 0 0 1 8 8H6V6a2 2 0 0 0-2-2H2v2h2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6h2V4ZM6 26v-4h4v-2H6v-4h4v-2H6v-4h2a4.93 4.93 0 0 0 4-1.987a5.02 5.02 0 0 0 8 0A4.93 4.93 0 0 0 24 10h2v16Z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:accumulation-snow&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M12 2h2v2h-2zm2 2h2v2h-2zm2 2h2v2h-2zm0-4h2v2h-2zm-4 4h2v2h-2zm2 12h2v2h-2zm2 2h2v2h-2zm2 2h2v2h-2zm0-4h2v2h-2zm-4 4h2v2h-2zm4-12h2v2h-2zm2 2h2v2h-2zm2 2h2v2h-2zm0-4h2v2h-2zm-4 4h2v2h-2z\&quot;/&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M28 4a2 2 0 0 0-2 2v20H6v-4h4v-2H6v-4h4v-2H6v-4h4V8H6V6a2 2 0 0 0-2-2H2v2h2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6h2V4Z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:flow-modeler-reference&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M30 30h-8v-8h8zm-6-2h4v-4h-4zM4 20v2h4.586L2 28.586L3.414 30L10 23.414V28h2v-8zm15-9h-6l-3 4l6 6l6-6z\&quot;/&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M24 17v-2a4 4 0 0 0 0-8H12V5h12a6 6 0 0 1 0 12m-14-7H2V2h8zM4 8h4V4H4z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:rain&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M23.5 22h-15A6.5 6.5 0 0 1 7.2 9.14a9 9 0 0 1 17.6 0A6.5 6.5 0 0 1 23.5 22M16 4a7 7 0 0 0-6.94 6.14L9 11h-.86a4.5 4.5 0 0 0 .36 9h15a4.5 4.5 0 0 0 .36-9H23l-.1-.82A7 7 0 0 0 16 4m-2 26a.93.93 0 0 1-.45-.11a1 1 0 0 1-.44-1.34l2-4a1 1 0 1 1 1.78.9l-2 4A1 1 0 0 1 14 30m6 0a.93.93 0 0 1-.45-.11a1 1 0 0 1-.44-1.34l2-4a1 1 0 1 1 1.78.9l-2 4A1 1 0 0 1 20 30M8 30a.93.93 0 0 1-.45-.11a1 1 0 0 1-.44-1.34l2-4a1 1 0 1 1 1.78.9l-2 4A1 1 0 0 1 8 30\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:temperature-max&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M20 10h7v2h-7zm0 6h10v2H20zm0 6h7v2h-7zm-10-1.816V7H8v13.184a3 3 0 1 0 2 0\&quot;/&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M30 4H12.974A4.983 4.983 0 0 0 4 7v11.11a7 7 0 1 0 10 0V7a5 5 0 0 0-.101-1H30ZM9 28a4.993 4.993 0 0 1-3.332-8.718L6 18.983V7a3 3 0 0 1 6 0v11.983l.332.299A4.993 4.993 0 0 1 9 28\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:temperature-water&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M14 9a4.93 4.93 0 0 0 4-1.987a5.02 5.02 0 0 0 8 0A4.93 4.93 0 0 0 30 9V7a3.44 3.44 0 0 1-3.051-2.316A1.01 1.01 0 0 0 26 4a.99.99 0 0 0-.947.679A3.44 3.44 0 0 1 22 7a3.44 3.44 0 0 1-3.051-2.316A1.01 1.01 0 0 0 18 4a.97.97 0 0 0-.947.679A3.44 3.44 0 0 1 14 7h-1V6a4 4 0 0 0-8 0v11.262a7.013 7.013 0 1 0 8.874.738H14a4.93 4.93 0 0 0 4-1.987a5.02 5.02 0 0 0 8 0A4.93 4.93 0 0 0 30 18v-2a3.44 3.44 0 0 1-3.051-2.316A1.01 1.01 0 0 0 26 13a.99.99 0 0 0-.947.679A3.44 3.44 0 0 1 22 16a3.44 3.44 0 0 1-3.051-2.316A1.01 1.01 0 0 0 18 13a.97.97 0 0 0-.947.679A3.44 3.44 0 0 1 14 16h-1V9ZM7 6a2 2 0 0 1 4 0v6H7Zm2 22a4.997 4.997 0 0 1-2.499-9.325l.499-.29V14h4v4.386l.499.289A4.997 4.997 0 0 1 9 28\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:traffic-flow&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;m26 8l-4-4l-4 4l1.41 1.42L21 7.83V18h2V7.83l1.58 1.58zM12.59 22.58L11 24.17V14H9v10.17l-1.58-1.58L6 24l4 4l4-4zM2 2h2v28H2zm26 0h2v28h-2zM15 2h2v4h-2zm0 8h2v4h-2zm0 8h2v4h-2zm0 8h2v4h-2z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:wave-direction&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M22 30h-5a7.01 7.01 0 0 1-7-7a6.68 6.68 0 0 1 2.024-4.697A6.7 6.7 0 0 0 10.01 18C5.043 18.047 4 24.551 4 30H2c0-11.51 4.345-13.966 7.99-14a10.1 10.1 0 0 1 4.48 1.117a1 1 0 0 1 .06 1.73A4.877 4.877 0 0 0 17 28h5Z\&quot;/&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M18 24v-2a8 8 0 1 0-8-8H8a10 10 0 1 1 10 10\&quot;/&gt;&lt;circle cx=\&quot;18\&quot; cy=\&quot;8\&quot; r=\&quot;1\&quot; fill=\&quot;currentColor\&quot;/&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;m23 17.586l-2.3-2.3A3 3 0 0 0 21 14a3.003 3.003 0 0 0-3-3a2.96 2.96 0 0 0-1.285.3l-2.3-2.3L13 10.414l2.3 2.3A3 3 0 0 0 15 14a3.003 3.003 0 0 0 3 3a2.96 2.96 0 0 0 1.285-.3l2.3 2.3ZM17 14a1 1 0 1 1 1 1a1 1 0 0 1-1-1\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:wave-height&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M24 2h6v2h-6zm0 6h4v2h-4zm0 6h6v2h-6zm0 6h4v2h-4z\&quot;/&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M30 28h-6a10.035 10.035 0 0 1-6.927-17.262a12 12 0 0 0-4.08-.738a6.9 6.9 0 0 0-6.03 3.42C4.997 16.435 4 21.34 4 28H2c0-7.054 1.106-12.327 3.287-15.673A8.9 8.9 0 0 1 12.994 8H13a14.76 14.76 0 0 1 6.461 1.592a1 1 0 0 1 .087 1.722A8.025 8.025 0 0 0 24 26h6Z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:wave-period&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M22 30h-5a7.01 7.01 0 0 1-7-7a6.68 6.68 0 0 1 2.024-4.697A6.8 6.8 0 0 0 10.01 18C5.043 18.047 4 24.551 4 30H2c0-11.51 4.345-13.966 7.99-14a10.1 10.1 0 0 1 4.48 1.117a1 1 0 0 1 .06 1.73A4.877 4.877 0 0 0 17 28h5zM17 8h2v8h-2z\&quot;/&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M28 5.414L26.586 4l-2.262 2.262A9.95 9.95 0 0 0 19 4.05V2h-2v2.05A10.013 10.013 0 0 0 8 14h2a8 8 0 1 1 8 8v2a9.993 9.993 0 0 0 7.738-16.324Z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;carbon:weather-front-stationary&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 32 32\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M28.166 2a13 13 0 0 0-8.408 3.107a3.995 3.995 0 1 0-4.175 6.621l-1.136 4.167q-.11.397-.25.781a3.986 3.986 0 0 0-5.154 6.006A10.95 10.95 0 0 1 3.835 24H2v2h1.834c.298 0 .592-.017.886-.037l7.929 2.974A1 1 0 0 0 14 28v-6.908a13 13 0 0 0 .912-1.313l6.363-1.818a1 1 0 0 0 .506-1.586l-3.997-4.995a11 11 0 0 1 1.152-2.347l5.748 1.916A1 1 0 0 0 26 10V4.225A11 11 0 0 1 28.166 4H30V2zM17 6a1.98 1.98 0 0 1 1.324.53a13 13 0 0 0-2.084 3.318A1.999 1.999 0 0 1 17 6m-7 14a1.988 1.988 0 0 1 3.337-1.472a11 11 0 0 1-2.595 3.015A2 2 0 0 1 10 20m-1.665 5.183A13 13 0 0 0 12 23.094v3.463zm7.74-7.816q.168-.465.302-.946l.732-2.685l2.171 2.715zM24 8.612l-3.741-1.247A11.1 11.1 0 0 1 24 4.831zM22 22v2h4.586L22 28.586L23.414 30L28 25.414V30h2v-8zM2 2v2h4.586L2 8.586L3.414 10L8 5.414V10h2V2z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;cbi:outdoor-motion-sensor-temperature&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M3.55 2.01c-1.01 0-1.82.83-1.82 1.86v7.43c0 1.02.82 1.86 1.82 1.86h7.28c1.01 0 1.82-.83 1.82-1.86V3.86c0-1.02-.82-1.86-1.82-1.86H3.55zM7.19 3.4c2.26 0 4.1 1.87 4.1 4.18s-1.84 4.18-4.1 4.18s-4.1-1.87-4.1-4.18S4.93 3.4 7.19 3.4m0 .81c-1.58 0-2.92 1.08-3.15 2.54c-.01.07.02.14.08.18s.13.05.2.02c.92-.35 1.9-.53 2.9-.52c.98-.01 1.95.16 2.85.51c.07.03.14.02.2-.02s.09-.11.08-.18c-.24-1.45-1.58-2.53-3.16-2.53m9.64 10.46V8.32c0-.28-.22-.5-.5-.5s-.5.22-.5.5v6.35a2.553 2.553 0 0 0 .52 5.05a2.548 2.548 0 0 0 .48-5.05m-.48 4.05c-.86 0-1.55-.7-1.55-1.55s.7-1.55 1.55-1.55s1.55.7 1.55 1.55s-.69 1.55-1.55 1.55m5.16-11.34c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-2.44v-.47h.89c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-.89v-.46h2.47c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-2.66a2.72 2.72 0 0 0-2.53-1.75c-1.5 0-2.72 1.22-2.72 2.72v9.14a4.41 4.41 0 0 0-1.83 3.61c0 2.51 2.04 4.55 4.55 4.55s4.55-2.04 4.55-4.55c0-1.47-.67-2.77-1.83-3.62v-.29h2.44c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-2.44v-.47h.88c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-.88v-.47h2.44c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-2.44v-.47h.89c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-.89v-.47zm-1.61 9.79a3.55 3.55 0 0 1-7.1 0c0-1.21.58-2.28 1.6-2.94l.03-.03c.03-.02.05-.05.08-.07c.02-.02.04-.05.05-.07c.02-.03.03-.06.04-.09s.02-.07.02-.1c0-.02.01-.03.01-.05v-9.4a1.72 1.72 0 1 1 3.44 0v9.38c0 .02.01.03.01.05c0 .04.01.07.02.1s.02.06.04.08c.02.03.03.05.05.08s.04.05.07.07c.01.01.02.03.04.04c1.01.65 1.6 1.72 1.6 2.95\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;fluent:arrow-autofit-height-in-20-regular&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 20 20\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;m14.854 7.854l2-2a.5.5 0 0 0-.708-.708L15 6.293V2.5a.5.5 0 0 0-1 0v3.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0M3 5a2 2 0 0 1 2-2h4.5a.5.5 0 0 1 0 1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h4.5a.5.5 0 0 1 0 1H5a2 2 0 0 1-2-2zm13.854 9.146l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 .708.708L14 13.707V17.5a.5.5 0 0 0 1 0v-3.793l1.146 1.147a.5.5 0 0 0 .708-.708\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;game-icons:lightning-frequency&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 512 512\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M33.125 19.406L135.5 128.22l81-23.157l18.72-5.344l-7.564 17.936l-46.125 109.78l134.282-70l26.157-13.655L328.436 170L256.5 309.25l91.25-57.125l22.97-14.375l-9.22 25.47l-34.625 95.624l71-36.375l21.188-10.845L410.906 334l-33.937 93.063l45.124-6.688l4.53-.656l3.313 3.155l64.313 61.47l-30.5-80.5l23.313-46.908l-72.5 39.532l51.062-141.158l-91.188 47.47l72.344-142.813l-128.217 82.81L421.875 70.063L239.03 168.69l30.44-99.563l-103.845 25.25zM18.155 30.78l77.876 108.25l-31.124 75.532l94.125-46.78l-98.905 166.812l190.25-99.656l-101.03 185.406l140.25-79.063l-46.94 102.22l106.5-53l-45.655 92.28l86.5-14.467l93.47 31.562l-63.158-60.344l-56.125 8.314l-15.53 2.312l5.374-14.75l31.158-85.437l-70.907 36.31l-21.124 10.814l8.094-22.313l33.47-92.436l-97.22 60.875l-28.938 18.092L224.22 331l74.06-143.344l-131.06 68.313l-22.97 12l10.03-23.908l48.626-115.687l-67.75 19.375l-5.5 1.563l-3.875-4.157L18.157 30.78z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;gis:weather-map&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 100 100\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M2.5 12.5A2.5 2.5 0 0 0 0 15v70a2.5 2.5 0 0 0 2.5 2.5h95A2.5 2.5 0 0 0 100 85V15a2.5 2.5 0 0 0-2.5-2.5zm2.5 5h72.066c-3.48 1.554-6.828 3.507-10.025 5.742c-9.537 6.667-17.823 15.814-24.639 24.356l-.015.02l-.016.019C32.274 61.179 20.148 68.395 5 71.057zm81.447 0H95v13.598c-12.444-1.557-21.873.893-28.824 4.302l-.008.004l-.01.004c-13.24 6.71-17.638 16.772-21.726 26.25c-3.34 7.743-6.488 15.087-14.248 20.842H5v-8.451c16.007-2.72 29.157-10.397 39.746-24.58c6.726-8.43 14.866-17.373 24.014-23.768c5.567-3.892 11.476-6.834 17.687-8.201m-62.324 2.586a2 2 0 0 0-1.969 2.027v5.067a10.3 10.3 0 0 0-3.71 1.533l-3.58-3.58a2 2 0 0 0-1.436-.606a2 2 0 0 0-1.395 3.434l3.578 3.578a10.3 10.3 0 0 0-1.539 3.715H9.014a2 2 0 1 0 0 4h5.066a10.3 10.3 0 0 0 1.535 3.709l-3.582 3.582a2 2 0 1 0 2.83 2.828l3.578-3.578a10.3 10.3 0 0 0 3.713 1.539v5.059a2 2 0 1 0 4 0v-5.067a10.3 10.3 0 0 0 3.711-1.533l3.58 3.58a2 2 0 1 0 2.828-2.828l-3.578-3.578a10.3 10.3 0 0 0 1.54-3.713h5.058a2 2 0 1 0 0-4h-5.064a10.3 10.3 0 0 0-1.538-3.711l3.582-3.582a2 2 0 0 0-1.453-3.434a2 2 0 0 0-1.375.606l-3.578 3.578a10.3 10.3 0 0 0-3.713-1.54v-5.058a2 2 0 0 0-2.031-2.027m63.02 13.416l5.138 8.191L95 38.236V82.5H34.85a36 36 0 0 0 1.671-1.646l10.985-.463l-3.94-9.684c1.346-2.602 2.496-5.25 3.621-7.86c3.384-7.843 6.603-15.35 14.645-21.275l10.012 4.518l.812-10.147q.65-.225 1.323-.435l7.216 6.992l4.055-8.947q.93-.044 1.893-.051M69.518 52.873c-3.5 0-6.585 2.26-7.6 5.563a6.3 6.3 0 0 0-1.516-.196c-3.42 0-6.193 2.736-6.193 6.11c0 3.215 2.518 5.844 5.715 6.086a9 9 0 0 1-.067-1.018c0-4.744 3.94-8.61 8.694-8.61h.015c.027 0 .052.01.079.01c1.48-2.63 4.003-4.52 6.953-5.138a7.97 7.97 0 0 0-6.08-2.807m8.148 5.068c-3.499 0-6.585 2.26-7.6 5.563a6.3 6.3 0 0 0-1.515-.195c-3.42 0-6.193 2.735-6.194 6.109c0 3.374 2.773 6.11 6.194 6.11h15.633c2.858 0 5.174-2.285 5.173-5.104c-.002-2.279-1.537-4.28-3.76-4.903c-.139-4.223-3.647-7.577-7.931-7.58\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;hugeicons:cosine-01&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; d=\&quot;M22 20.729c-4 1.936-5.412-7.074-5.669-8.684C15.467 6.638 14.121 3 12 3c-2.12 0-3.467 3.638-4.331 9.045C7.412 13.655 6 22.665 2 20.73M2 12h2.5m15 0H22m-11.5 0h3\&quot; color=\&quot;currentColor\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;hugeicons:internet-antenna-04&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; d=\&quot;M14 8a2 2 0 1 1-4 0a2 2 0 0 1 4 0m2.959-3C17.619 5.87 18 6.898 18 8s-.381 2.13-1.041 3M7.04 5C6.381 5.87 6 6.898 6 8s.381 2.13 1.041 3m13.275-8C21.38 4.43 22 6.15 22 8s-.62 3.57-1.684 5M3.684 3C2.62 4.43 2 6.15 2 8s.62 3.57 1.684 5M11 10L7 21m10 0l-4-11m-4.5 7h7\&quot; color=\&quot;currentColor\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;icon-park-outline:direction-adjustment-two&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 48 48\&quot;&gt;&lt;g fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;4\&quot;&gt;&lt;path d=\&quot;m18 10l6-6m0 0l6 6m-6-6v10m-6 24l6 6m0 0l6-6m-6 6V34m14-16l6 6m0 0l-6 6m6-6H34m-24-6l-6 6m0 0l6 6m-6-6h10\&quot;/&gt;&lt;circle cx=\&quot;24\&quot; cy=\&quot;24\&quot; r=\&quot;4\&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;icon-park-outline:refraction&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 48 48\&quot;&gt;&lt;g fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;4\&quot;&gt;&lt;path d=\&quot;m24 9l16.454 28.5H7.545z\&quot;/&gt;&lt;path d=\&quot;m24 9l16.454 28.5H7.545zM4 22l15.5-5m8.5-1l16-3m-14 6.5L44 21m-11.3 3L44 29\&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;iconoir:depth&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; d=\&quot;M2 20h20M5 4h14M3 16.01l.01-.011m18 .011l-.01-.011M4 12.01l.01-.011m16 .011l-.01-.011M5 8.01l.01-.011m14 .011L19 7.999M12 7v10m0-10l-1.5 1.5M12 7l1.5 1.5M12 17l-3-3m3 3l3-3\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;lets-icons:pressure-light&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;g fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot;&gt;&lt;path stroke-linecap=\&quot;round\&quot; d=\&quot;M20.693 17.33a9 9 0 1 0-17.386 0\&quot;/&gt;&lt;path d=\&quot;M12.766 15.582c.487.71.144 1.792-.766 2.417c-.91.626-2.043.558-2.53-.151c-.52-.756-2.314-5.007-3.403-7.637c-.205-.495.4-.911.79-.542c2.064 1.96 5.39 5.157 5.909 5.913Z\&quot;/&gt;&lt;path stroke-linecap=\&quot;round\&quot; d=\&quot;M12 6v2m-6.364.636L7.05 10.05m11.314-1.414L16.95 10.05m3.743 7.28l-1.931-.518m-15.455.518l1.931-.518\&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;lucide:radius&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;g fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;2\&quot;&gt;&lt;path d=\&quot;M20.34 17.52a10 10 0 1 0-2.82 2.82\&quot;/&gt;&lt;circle cx=\&quot;19\&quot; cy=\&quot;19\&quot; r=\&quot;2\&quot;/&gt;&lt;path d=\&quot;m13.41 13.41l4.18 4.18\&quot;/&gt;&lt;circle cx=\&quot;12\&quot; cy=\&quot;12\&quot; r=\&quot;2\&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;lucide:waves&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;2\&quot; d=\&quot;M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1M2 12c.6.5 1.2 1 2.5 1c2.5 0 2.5-2 5-2c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1M2 18c.6.5 1.2 1 2.5 1c2.5 0 2.5-2 5-2c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;material-symbols-light:fit-width-rounded&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M4 19.385V4.615q0-.261.177-.438T4.616 4t.438.177t.177.439v14.769q0 .261-.177.438T4.615 20t-.438-.177T4 19.385m14.77 0V4.615q0-.261.176-.438q.177-.177.438-.177q.262 0 .439.177t.177.439v14.769q0 .261-.177.438t-.438.177t-.439-.177t-.177-.438M12 12.615q-.261 0-.438-.176T11.385 12t.177-.438t.438-.177t.439.177t.176.438t-.177.439t-.438.176m-3.692 0q-.262 0-.439-.177T7.692 12t.177-.438t.439-.177t.438.177t.177.438t-.177.439t-.438.176m7.384 0q-.261 0-.438-.177T15.077 12t.177-.438t.438-.177t.439.177t.177.438t-.177.439t-.439.176\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;material-symbols-light:humidity-percentage&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M14.113 17.116q.416 0 .709-.291q.294-.292.294-.707q0-.416-.292-.71q-.29-.292-.706-.292t-.71.29t-.292.707q0 .416.29.709q.291.294.707.294m-4.663.122l5.789-5.788l-.689-.708l-5.808 5.808zm.432-4.354q.416 0 .71-.29t.293-.707t-.291-.709t-.707-.294t-.709.291t-.294.707t.292.71q.29.292.706.292M11.997 21q-2.999 0-4.998-2.064T5 13.8q0-2.154 1.738-4.765T12 3.308q3.525 3.117 5.262 5.728Q19 11.646 19 13.8q0 3.073-2.002 5.137Q14.994 21 11.996 21\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;material-symbols-light:visibility-outline&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M12.005 15.154q1.524 0 2.586-1.067t1.063-2.591t-1.067-2.587t-2.591-1.063t-2.587 1.067t-1.063 2.592t1.067 2.586t2.592 1.063M12 14.2q-1.125 0-1.912-.787T9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2m.003 3.8q-3.25 0-5.922-1.768T2.077 11.5q1.33-2.964 4.001-4.732T11.998 5t5.921 1.768t4.004 4.732q-1.33 2.964-4.001 4.732T12.002 18M12 17q2.825 0 5.188-1.487T20.8 11.5q-1.25-2.525-3.613-4.012T12 6T6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;material-symbols:alarm-smart-wake-outline&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M8 14q.425 0 .713-.288T9 13t-.288-.712T8 12t-.712.288T7 13t.288.713T8 14m4 0q.425 0 .713-.288T13 13t-.288-.712T12 12t-.712.288T11 13t.288.713T12 14m4 0q.425 0 .713-.288T17 13t-.288-.712T16 12t-.712.288T15 13t.288.713T16 14m-4 8q-1.875 0-3.512-.712t-2.85-1.925t-1.925-2.85T3 13t.713-3.512t1.924-2.85t2.85-1.925T12 4t3.513.713t2.85 1.925t1.925 2.85T21 13t-.712 3.513t-1.925 2.85t-2.85 1.925T12 22M5.6 2.35L7 3.75L2.75 8l-1.4-1.4zm12.8 0l4.25 4.25l-1.4 1.4L17 3.75zM12 20q2.925 0 4.963-2.037T19 13t-2.037-4.962T12 6T7.038 8.038T5 13t2.038 4.963T12 20\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;material-symbols:low-density-rounded&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M12 9q-.425 0-.712-.288T11 8t.288-.712T12 7t.713.288T13 8t-.288.713T12 9m-4 4q-.425 0-.712-.288T7 12t.288-.712T8 11t.713.288T9 12t-.288.713T8 13m4 0q-.425 0-.712-.288T11 12t.288-.712T12 11t.713.288T13 12t-.288.713T12 13M4 5q-.425 0-.712-.288T3 4t.288-.712T4 3t.713.288T5 4t-.288.713T4 5m4 0q-.425 0-.712-.288T7 4t.288-.712T8 3t.713.288T9 4t-.288.713T8 5M4 9q-.425 0-.712-.288T3 8t.288-.712T4 7t.713.288T5 8t-.288.713T4 9m1 12q-.825 0-1.412-.587T3 19v-7q0-.425.288-.712T4 11t.713.288T5 12v7h14V5h-7q-.425 0-.712-.288T11 4t.288-.712T12 3h7q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;ph:calendar-dots-light&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 256 256\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M208 34h-26V24a6 6 0 0 0-12 0v10H86V24a6 6 0 0 0-12 0v10H48a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h160a14 14 0 0 0 14-14V48a14 14 0 0 0-14-14M48 46h26v10a6 6 0 0 0 12 0V46h84v10a6 6 0 0 0 12 0V46h26a2 2 0 0 1 2 2v34H46V48a2 2 0 0 1 2-2m160 164H48a2 2 0 0 1-2-2V94h164v114a2 2 0 0 1-2 2m-70-78a10 10 0 1 1-10-10a10 10 0 0 1 10 10m44 0a10 10 0 1 1-10-10a10 10 0 0 1 10 10m-88 40a10 10 0 1 1-10-10a10 10 0 0 1 10 10m44 0a10 10 0 1 1-10-10a10 10 0 0 1 10 10m44 0a10 10 0 1 1-10-10a10 10 0 0 1 10 10\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;ph:cloud-fog-light&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 256 256\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M120 206H72a6 6 0 0 1 0-12h48a6 6 0 0 1 0 12m64-12h-24a6 6 0 0 0 0 12h24a6 6 0 0 0 0-12m-24 32h-56a6 6 0 0 0 0 12h56a6 6 0 0 0 0-12m70-126a74.09 74.09 0 0 1-74 74H76a50 50 0 1 1 10.2-99A74.08 74.08 0 0 1 230 100m-12 0a62.06 62.06 0 0 0-124-3.65a6 6 0 0 1-12-.7a76 76 0 0 1 1.07-9A38 38 0 1 0 76 162h80a62.07 62.07 0 0 0 62-62\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;streamline:interface-weather-snow-1-cloud-snow-snowfall-overcast-weather-precipitation-meteorology&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 14 14\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M3.25 10a.75.75 0 1 0 .75.75a.76.76 0 0 0-.75-.75Zm-2 2.5a.75.75 0 1 0 .75.75a.76.76 0 0 0-.75-.75Zm6-2.5a.75.75 0 1 0 .75.75a.76.76 0 0 0-.75-.75ZM5 12.5a.75.75 0 1 0 .75.75a.76.76 0 0 0-.75-.75Zm5.75-2.5a.75.75 0 1 0 .75.75a.76.76 0 0 0-.75-.75ZM9 12.5a.75.75 0 1 0 .75.75a.76.76 0 0 0-.75-.75Zm3.75 0a.75.75 0 1 0 .75.75a.76.76 0 0 0-.75-.75Z\&quot;/&gt;&lt;path fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; d=\&quot;M11 8a2.5 2.5 0 1 0-.62-4.92a3.5 3.5 0 0 0-6.76 0A2.5 2.5 0 1 0 3 8Z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;streamline:interface-weather-windmill-windmill-velocity-weather-wind&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 14 14\&quot;&gt;&lt;path fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; d=\&quot;M7 .5h1a2 2 0 0 1 2 2V7h0h-3h0V.5h0ZM4 7h3v6.5h0h-1a2 2 0 0 1-2-2V7h0Zm9.5 0v1a2 2 0 0 1-2 2H7h0V7h6.5ZM7 4v3h0H.5h0V6a2 2 0 0 1 2-2H7Z\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;svg-spinners:wind-toy&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M20.27,4.74a4.93,4.93,0,0,1,1.52,4.61,5.32,5.32,0,0,1-4.1,4.51,5.12,5.12,0,0,1-5.2-1.5,5.53,5.53,0,0,0,6.13-1.48A5.66,5.66,0,0,0,20.27,4.74ZM12.32,11.53a5.49,5.49,0,0,0-1.47-6.2A5.57,5.57,0,0,0,4.71,3.72,5.17,5.17,0,0,1,9.53,2.2,5.52,5.52,0,0,1,13.9,6.45,5.28,5.28,0,0,1,12.32,11.53ZM19.2,20.29a4.92,4.92,0,0,1-4.72,1.49,5.32,5.32,0,0,1-4.34-4.05A5.2,5.2,0,0,1,11.6,12.5a5.6,5.6,0,0,0,1.51,6.13A5.63,5.63,0,0,0,19.2,20.29ZM3.79,19.38A5.18,5.18,0,0,1,2.32,14a5.3,5.3,0,0,1,4.59-4,5,5,0,0,1,4.58,1.61,5.55,5.55,0,0,0-6.32,1.69A5.46,5.46,0,0,0,3.79,19.38ZM12.23,12a5.11,5.11,0,0,0,3.66-5,5.75,5.75,0,0,0-3.18-6,5,5,0,0,1,4.42,2.3,5.21,5.21,0,0,1,.24,5.92A5.4,5.4,0,0,1,12.23,12ZM11.76,12a5.18,5.18,0,0,0-3.68,5.09,5.58,5.58,0,0,0,3.19,5.79c-1,.35-2.9-.46-4-1.68A5.51,5.51,0,0,1,11.76,12ZM23,12.63a5.07,5.07,0,0,1-2.35,4.52,5.23,5.23,0,0,1-5.91.2,5.24,5.24,0,0,1-2.67-4.77,5.51,5.51,0,0,0,5.45,3.33A5.52,5.52,0,0,0,23,12.63ZM1,11.23a5,5,0,0,1,2.49-4.5,5.23,5.23,0,0,1,5.81-.06,5.3,5.3,0,0,1,2.61,4.74A5.56,5.56,0,0,0,6.56,8.06,5.71,5.71,0,0,0,1,11.23Z\&quot;&gt;&lt;animateTransform attributeName=\&quot;transform\&quot; dur=\&quot;1.5s\&quot; repeatCount=\&quot;indefinite\&quot; type=\&quot;rotate\&quot; values=\&quot;0 12 12;360 12 12\&quot;/&gt;&lt;/path&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;tabler:world-latitude&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;path fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;2\&quot; d=\&quot;M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m1.6-5h14.8M3 12h18M4.6 17h14.8\&quot;/&gt;&lt;/svg&gt;&quot;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;tabler:world-longitude&quot;</span>,<br>    <span class="hljs-attr">&quot;svg&quot;</span>: <span class="hljs-string">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; width=\&quot;1em\&quot; height=\&quot;1em\&quot; viewBox=\&quot;0 0 24 24\&quot;&gt;&lt;g fill=\&quot;none\&quot; stroke=\&quot;currentColor\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;2\&quot;&gt;&lt;path d=\&quot;M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0\&quot;/&gt;&lt;path d=\&quot;M11.5 3a11.2 11.2 0 0 0 0 18m1-18a11.2 11.2 0 0 1 0 18M12 3v18\&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;&quot;</span><br>  &#125;<br>]<br><br></code></pre></td></tr></table></figure>

]]></content>
      <tags>
        <tag>icon</tag>
      </tags>
  </entry>
  <entry>
    <title>后台管理系统vue3TsElement-plusVite</title>
    <url>/2021/09/14/vue3/9e0f53e3c316/</url>
    <content><![CDATA[<h1 id="写在前面"><a href="#写在前面" class="headerlink" title="写在前面"></a>写在前面</h1><p>截止目前，工作中对于需要处理的项目需求已经基本完成，在没有新的需求产生之前，项目基本的模型基本固定，所以有时间进行项目的思考与新技术的学习，在实际的开发的项目中会技术知识点的熟练度问题导致经常需要参考网上的相关例子，但是根据教程解决完业务问题后，因为整理不及时，在遇到相同问题的时候就会花费更多的精力和时间，也不利于沉淀。正好，博客系统也能都正常上线使用，采用了比较简洁的hexo-next主题，虽然界面比较朴素，但是对于写技术博客来说，已经是非常适合不过了。当然也有其他的主题，比较好看，但是因为配置next主题也花了一些时间，同时在此阶段结合谷歌浏览器lighthouse插件，也解决了一些项目的性能优化问题，包括通过<a href="https://www.jsdelivr.com/">jsdelivr</a>对图片进行CDN优化，加快访问速度等，如图<img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20210914162406blogRateScreen.png" alt="个人博客网站评分">，同时也提出了http/1.1 http/2等的问题，可以明显的感觉到加载速度的差异，<a href="https://http2.akamai.com/demo">加载速度对比</a>,发现对于基础知识还是有许多需要学习的地方，也就是当前来说技术知识的提升比博客页面的美观更加重要一些，所以就开始先更文章了!</p>
<span id="more"></span>
<h1 id="就叫它NS吧"><a href="#就叫它NS吧" class="headerlink" title="就叫它NS吧"></a>就叫它NS吧</h1><p>  在开始文章的叙述之前，总得先定一个叙述对象，它也就是前面提及的工作项目，结合项目名称，以及便于后续称呼，就叫它NS吧，这是一个后台管理系统项目，采用了当下非常流行的vue以及elementUI作为开发的基础性框架，打包工具则以gulp为主，同时包含少量的webpack配置，对于这方面的知识还是比较欠缺，当然整个项目的业务逻辑还是在摸索了几天逐渐熟悉了。<br>  随着业务量的深入以及代码量的增多，可以很容易的发现，代码变得逐渐难以管理，同时因为初期的代码规范性问题，导致代码的可读性变差，因为缺少文档，导致在日常赶需求的时候，引入的依赖，配置项等，在维护过程中，对于一些不需要的冗余代码，不方便精简，大多采用注释的方式解决，业务中遇到的主要问题是图片的处理，包括上传和保证图片的上传顺序等，还有大文件的上传，同时是订单管理中不可缺少的导出功能，如何在前端根据列实现对表格数据的筛选，还有地图数据展示与选择过程中的循环问题，对于路由权限问题需要在新项目中搭建中熟悉动态路由表以及权限处理</p>
<h1 id="初步认识"><a href="#初步认识" class="headerlink" title="初步认识"></a>初步认识</h1><p>  问题已经大致了解了，所以在新项目的开始过程中，也算是有了“需求”，能够有效的提升学习效率了。</p>
<h2 id="官方文档"><a href="#官方文档" class="headerlink" title="官方文档"></a>官方文档</h2><p>  <a href="https://vue3js.cn/docs/zh/">vue3官方中文文档</a></p>
<p>  <a href="https://www.tslang.cn/docs/home.html">TypeScript官方文档 v3.1</a></p>
<p>  <a href="https://vitejs.cn/">Vite官方文档</a></p>
<p>  <a href="https://element-plus.org/#/zh-CN/component/installation">element-plus官方文档</a></p>
<h2 id="构建基础项目"><a href="#构建基础项目" class="headerlink" title="构建基础项目"></a>构建基础项目</h2><p>跟随着vite官方教程，我们成功的运行起来了项目，同时能够感受到页面内容的快速构建和页面快速的响应式热更新带来的流畅开发体验。</p>
<p>基础demo运行: <img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20210914180734vue3viteBaseDemo.png"></p>
<p>项目运行起来的时间为：<img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20210914180937baseDemoRate.png"></p>
<p>下面可以看下具体的项目结构：</p>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20210914181052baseDemoStrucet.png" alt="项目基本结构"><br>同时也有一些问题，<img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20210914181439demoProblem.png" alt="基础vite项目bug">对于一个元素的问题，<a href="https://stackoverflow.com/questions/64867504/vue-3-the-template-root-requires-exactly-one-element-eslint-plugin-vue">尝试用div标签包裹template内的元素，一个bug可以解决</a>但是另外一个还是会有问题，经过搜索发现有帖子有相同的错误，故保存下来。<a href="https://www.jianshu.com/p/684820d0f905">vue3+eslint遇到 The template root requires exactly one element.eslintvue/no-multiple-template-root ..</a><br>经过一番折腾，还是回到原来构建时候的代码状态，原来是因为插件的问题，<a href="https://juejin.cn/post/6875713523968802829#heading-6">参考评论区</a>,具体评论为：<img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20210914185531veturBug.png"></p>
]]></content>
      <categories>
        <category>vue3</category>
      </categories>
      <tags>
        <tag>TypeScript</tag>
        <tag>vue3</tag>
        <tag>vite</tag>
      </tags>
  </entry>
  <entry>
    <title>富文本编辑器选型</title>
    <url>/2022/12/20/editor/a972ef10f61a/</url>
    <content><![CDATA[<p>一、常见的富文本编辑器</p>
<p>种类：现有14种。</p>
<table>
<thead>
<tr>
<th>编辑器名称</th>
<th>在线网址</th>
<th>GITHUB</th>
<th>开源代码协议</th>
<th>最后更新</th>
<th>是否符合要求</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>wangEditor</td>
<td><a href="https://www.wangeditor.com/">https://www.wangeditor.com/</a></td>
<td><a href="https://github.com/wangeditor-team/wangEditor">https://github.com/wangeditor-team/wangEditor</a></td>
<td>MIT</td>
<td>2022-11-14</td>
<td></td>
<td></td>
</tr>
<tr>
<td>TinyMCE</td>
<td><a href="https://www.tiny.cloud/tinymce/">https://www.tiny.cloud/tinymce/</a></td>
<td><a href="https://github.com/tinymce/tinymce">https://github.com/tinymce/tinymce</a></td>
<td>MIT</td>
<td>2022-12-19</td>
<td></td>
<td></td>
</tr>
<tr>
<td>百度ueditor</td>
<td><a href="http://fex.baidu.com/ueditor/">http://fex.baidu.com/ueditor/</a></td>
<td><a href="https://github.com/fex-team/ueditor">https://github.com/fex-team/ueditor</a></td>
<td>MIT</td>
<td>2022-11-9</td>
<td>2022-11-9被作者存档</td>
<td></td>
</tr>
<tr>
<td>kindeditor</td>
<td><a href="http://kindeditor.net/doc.php">http://kindeditor.net/doc.php</a></td>
<td><a href="https://github.com/kindsoft/kindeditor">https://github.com/kindsoft/kindeditor</a></td>
<td>GNU</td>
<td>2021-6-22</td>
<td></td>
<td></td>
</tr>
<tr>
<td>CKEditor</td>
<td><a href="https://ckeditor.com/">https://ckeditor.com/</a></td>
<td><a href="https://github.com/ckeditor/ckeditor5">https://github.com/ckeditor/ckeditor5</a></td>
<td>GNU</td>
<td>13 hours ago</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Git stats</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="https://ckeditor.com/collaboration/demo/">https://ckeditor.com/collaboration/demo/</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>quill</td>
<td><a href="https://www.kancloud.cn/liuwave/quill/1409423">https://www.kancloud.cn/liuwave/quill/1409423</a></td>
<td><a href="https://github.com/quilljs/quill">https://github.com/quilljs/quill</a></td>
<td>BSD 3-Clause “New” or “Revised” License</td>
<td>2022-12-05</td>
<td></td>
<td></td>
</tr>
<tr>
<td>jodit</td>
<td><a href="https://xdsoft.net/jodit/">https://xdsoft.net/jodit/</a></td>
<td><a href="https://github.com/xdan/jodit">https://github.com/xdan/jodit</a></td>
<td>MIT</td>
<td>2022-12-18</td>
<td></td>
<td></td>
</tr>
<tr>
<td>eWebEditor</td>
<td><a href="http://www.ewebeditor.net/">http://www.ewebeditor.net/</a></td>
<td></td>
<td>非开源</td>
<td></td>
<td></td>
<td><a href="http://www.ewebeditor.net/demo/">http://www.ewebeditor.net/demo/</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
]]></content>
      <categories>
        <category>editor</category>
      </categories>
      <tags>
        <tag>editor</tag>
      </tags>
  </entry>
  <entry>
    <title>vue+elementUI后台管理系统</title>
    <url>/2021/04/17/uncategorized/cf07c19a06d1/</url>
    <content><![CDATA[<h1 id="关于后台管理系统开发过程中问题的解决"><a href="#关于后台管理系统开发过程中问题的解决" class="headerlink" title="关于后台管理系统开发过程中问题的解决"></a>关于后台管理系统开发过程中问题的解决</h1><h2 id="相关环境及版本号"><a href="#相关环境及版本号" class="headerlink" title="相关环境及版本号"></a>相关环境及版本号</h2><p>node -v</p>
<span id="more"></span>
]]></content>
      <tags>
        <tag>cms</tag>
      </tags>
  </entry>
  <entry>
    <title>基本引用类型-date</title>
    <url>/2021/05/03/uncategorized/37be020c9cae/</url>
    <content><![CDATA[<h1 id="基本引用类型-date"><a href="#基本引用类型-date" class="headerlink" title="基本引用类型-date"></a>基本引用类型-date</h1><p>引用类型可以理解为对象定义，通过构造函数（new 操作符）来创建。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> now = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br><br></code></pre></td></tr></table></figure>

<p>基本引用类型相对于集合引用类型可以理解为单独引用类型，因为集合引用类型这些</p>
<p>Object、Array、定型数组、Map、WeakMap、Set、WeakSet等这些可以将基本引用类型包含于其中。</p>
<span id="more"></span>
<h1 id="Date"><a href="#Date" class="headerlink" title="Date"></a>Date</h1><p>Date 类型将日期保存为自协调世界时（UTC，Universal Time Coordinated）时间 1970 年 1 月 1 日午夜（零时）至今所经过的毫秒数。使用这种存储格式， Date 类型可以精确表示 1970 年 1 月 1 日之前及之后 285 616 年的日期。</p>
<p>(<a href="https://www.cnblogs.com/xisheng/p/7634106.html">为什么计算机很多语言里的时间都是从1970年1月1日午夜开始计算？ - 希声lx - 博客园 (cnblogs.com)</a>)</p>
<h2 id="GMT日期与UTC日期"><a href="#GMT日期与UTC日期" class="headerlink" title="GMT日期与UTC日期"></a>GMT日期与UTC日期</h2><p>GMT（Greenwich Mean Time）， 格林威治平时（也称格林威治时间）。</p>
<p>它规定太阳每天经过位于英国伦敦郊区的皇家格林威治天文台的时间为中午12点。</p>
<hr>
<p>UTC（Coodinated Universal Time），协调世界时，又称世界统一时间、世界标准时间、国际协调时间。由于英文（CUT）和法文（TUC）的缩写不同，作为妥协，简称UTC。</p>
<p>UTC 是现在全球通用的时间标准，全球各地都同意将各自的时间进行同步协调。UTC 时间是经过平均太阳时（以格林威治时间GMT为准）、地轴运动修正后的新时标以及以秒为单位的国际原子时所综合精算而成。</p>
<hr>
<h2 id="不给Date构造函数传参"><a href="#不给Date构造函数传参" class="headerlink" title="不给Date构造函数传参"></a>不给Date构造函数传参</h2><p>在不给 Date 构造函数传参数的情况下，创建的对象将保存当前日期和时间。</p>
<h2 id="给Date构造函数传参"><a href="#给Date构造函数传参" class="headerlink" title="给Date构造函数传参"></a>给Date构造函数传参</h2><p>要基于其他日期和时<br>间创建日期对象，必须传入其毫秒表示（UNIX 纪元 1970 年 1 月 1 日午夜之后的毫秒数）。ECMAScript为此提供了两个辅助方法： Date.parse() 和 Date.UTC() 。</p>
<h3 id="Date-parse-应该支持的日期格式"><a href="#Date-parse-应该支持的日期格式" class="headerlink" title="Date.parse()应该支持的日期格式"></a>Date.parse()应该支持的日期格式</h3><p> “月/日/年”，如 “5/23/2019” ；<br> “月名 日, 年”，如 “May 23, 2019” ；<br> “周几 月名 日 年 时:分:秒 时区”，如 “Tue May 23 2019 00:00:00 GMT-0700” ；<br> ISO 8601 扩展格式“YYYY-MM-DDTHH:mm:ss.sssZ”，如 2019-05-23T00:00:00 （只适用于兼容 ES5 的实现）。<br><img src="https://gitee.com/mhist/hexo-image/raw/master/img/date.parse20210503213402.png" alt="图片代码演示"><br>如果传给 Date.parse() 的字符串并不表示日期，则该方法会返回 NaN 。如果直接把表示日期的字<br>符串传给 Date 构造函数，那么 Date 会在后台调用 Date.parse() 。</p>
<hr>
<h3 id="Date-UTC"><a href="#Date-UTC" class="headerlink" title="Date.UTC()"></a>Date.UTC()</h3><p>Date.UTC() 方法也返回日期的毫秒表示，但使用的是跟 Date.parse() 不同的信息来生成这个值。<br>传给 Date.UTC() 的参数是年、零起点月数（1 月是 0，2 月是 1，以此类推）、日（1-31）、时（0-23）、<br>分、秒和毫秒。<br>这些参数中，只有前两个（年和月）是必需的。<br>如果不提供日，那么默认为 1 日。其他参数的默认值都是 0。</p>
<h3 id="继承方法"><a href="#继承方法" class="headerlink" title="继承方法"></a>继承方法</h3><p>与其他类型一样， Date 类型重写了 toLocaleString() 、 toString() 和 valueOf() 方法。但与<br>其他类型不同，重写后这些方法的返回值不一样。 Date 类型的 toLocaleString() 方法返回与浏览器<br>运行的本地环境一致的日期和时间。这通常意味着格式中包含针对时间的 AM（上午）或 PM（下午），<br>但不包含时区信息（具体格式可能因浏览器而不同）。 toString() 方法通常返回带时区信息的日期和时<br>间，而时间也是以 24 小时制（0~23）表示的。<br>Date 类型的 valueOf() 方法根本就不返回字符串，这个方法被重写后返回的是日期的毫秒表示。<br>因此，操作符（如小于号和大于号）可以直接使用它返回的值。（时间在前的数值小）<br><img src="https://gitee.com/mhist/hexo-image/raw/master/img/date%E7%BB%A7%E6%89%BF%E6%96%B9%E6%B3%9520210503215105.png" alt="date继承方法"></p>
<h3 id="日期格式化方法"><a href="#日期格式化方法" class="headerlink" title="日期格式化方法"></a>日期格式化方法</h3><p>由于会因浏览器而异，因此不能用于用户界面上一致地日期显示。</p>
<h3 id="日期-时间组件方法"><a href="#日期-时间组件方法" class="headerlink" title="日期/时间组件方法"></a>日期/时间组件方法</h3><table>
<thead>
<tr>
<th align="center">方法</th>
<th align="center">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">getTime()</td>
<td align="center">返回表示日期的毫秒数；与valueOf()方法返回的值相同</td>
</tr>
<tr>
<td align="center">setTime(毫秒)</td>
<td align="center">以毫秒数设置日期，会改变整个日期</td>
</tr>
<tr>
<td align="center">getFullYear()</td>
<td align="center">取得4位数的年份（如2007而非仅07）</td>
</tr>
<tr>
<td align="center">getUTCFullYear()</td>
<td align="center">返回UTC日期的4位数年份</td>
</tr>
<tr>
<td align="center">setFullYear(年)</td>
<td align="center">设置日期的年份。传入的年份值必须是4位数字（如2007而非仅07）</td>
</tr>
<tr>
<td align="center">setUTCFullYear(年)</td>
<td align="center">设置UTC日期的年份。传入的年份值必须是4位数字（如2007而非仅07）</td>
</tr>
<tr>
<td align="center">getMonth()</td>
<td align="center">返回日期中的月份，其中0表示一月，11表示十二月</td>
</tr>
<tr>
<td align="center">getUTCMonth()</td>
<td align="center">返回UTC日期中的月份，其中0表示一月，11表示十二月</td>
</tr>
<tr>
<td align="center">setMonth(月)</td>
<td align="center">设置日期的月份。传入的月份值必须大于0，超过11则增加年份</td>
</tr>
<tr>
<td align="center">setUTCMonth(月)</td>
<td align="center">设置UTC日期的月份。传入的月份值必须大于0，超过11则增加年份</td>
</tr>
<tr>
<td align="center">getDate()</td>
<td align="center">返回日期月份中的天数（1到31）</td>
</tr>
<tr>
<td align="center">getUTCDate()</td>
<td align="center">返回UTC日期月份中的天数（1到31）</td>
</tr>
<tr>
<td align="center">setDate(日)</td>
<td align="center">设置日期月份中的天数。如果传入的值超过了该月中应有的天数，则增加月份</td>
</tr>
<tr>
<td align="center">setUTCDate(日)</td>
<td align="center">设置UTC日期月份中的天数。如果传入的值超过了该月中应有的天数，则增加月份</td>
</tr>
<tr>
<td align="center">getDay()</td>
<td align="center">返回日期中星期的星期几（其中0表示星期日，6表示星期六）</td>
</tr>
<tr>
<td align="center">getUTCDay()</td>
<td align="center">返回UTC日期中星期的星期几（其中0表示星期日，6表示星期六）</td>
</tr>
<tr>
<td align="center">getHours()</td>
<td align="center">返回日期中的小时数（0到23）</td>
</tr>
<tr>
<td align="center">getUTCHours()</td>
<td align="center">返回UTC日期中的小时数（0到23）</td>
</tr>
<tr>
<td align="center">setHours(时)</td>
<td align="center">设置日期中的小时数。传入的值超过了23则增加月份中的天数</td>
</tr>
<tr>
<td align="center">setUTCHours(时)</td>
<td align="center">设置UTC日期中的小时数。传入的值超过了23则增加月份中的天数</td>
</tr>
<tr>
<td align="center">getMinutes()</td>
<td align="center">返回日期中的分钟数（0到59）</td>
</tr>
<tr>
<td align="center">getUTCMinutes()</td>
<td align="center">返回UTC日期中的分钟数（0到59）</td>
</tr>
<tr>
<td align="center">setMinutes(分)</td>
<td align="center">设置日期中的分钟数。传入的值超过59则增加小时数</td>
</tr>
<tr>
<td align="center">setUTCMinutes(分)</td>
<td align="center">设置UTC日期中的分钟数。传入的值超过59则增加小时数</td>
</tr>
<tr>
<td align="center">getSeconds()</td>
<td align="center">返回日期中的秒数（0到59）</td>
</tr>
<tr>
<td align="center">getUTCSeconds()</td>
<td align="center">返回UTC日期中的秒数（0到59）</td>
</tr>
<tr>
<td align="center">setSeconds(秒)</td>
<td align="center">设置日期中的秒数。传入的值超过了59会增加分钟数</td>
</tr>
<tr>
<td align="center">setUTCSeconds(秒)</td>
<td align="center">设置UTC日期中的秒数。传入的值超过了59会增加分钟数</td>
</tr>
<tr>
<td align="center">getMilliseconds()</td>
<td align="center">返回日期中的毫秒数</td>
</tr>
<tr>
<td align="center">getUTCMilliseconds()</td>
<td align="center">返回UTC日期中的毫秒数</td>
</tr>
<tr>
<td align="center">setMilliseconds(毫秒)</td>
<td align="center">设置日期中的毫秒数</td>
</tr>
<tr>
<td align="center">setUTCMilliseconds(毫秒)</td>
<td align="center">设置UTC日期中的毫秒数设置UTC日期中的毫秒数</td>
</tr>
<tr>
<td align="center">getTimezoneOffset()</td>
<td align="center">返回本地时间与UTC时间相差的分钟数。例如，美国东部标准时间返回300。在某 地进入夏令时的情况下，这个值会有所变化</td>
</tr>
</tbody></table>
<h2 id="业务分析与实践总结"><a href="#业务分析与实践总结" class="headerlink" title="业务分析与实践总结"></a>业务分析与实践总结</h2><h3 id="以淘宝订单、联想乐呗订单为例"><a href="#以淘宝订单、联想乐呗订单为例" class="headerlink" title="以淘宝订单、联想乐呗订单为例"></a>以淘宝订单、联想乐呗订单为例</h3><p><img src="https://gitee.com/mhist/hexo-image/raw/master/img/%E6%B7%98%E5%AE%9D%E8%AE%A2%E5%8D%95%E5%B9%B4%E6%9C%88%E6%97%A5%E6%97%B6%E5%88%86%E7%A7%9220210504125207.jpg" alt="淘宝订单年月日时分秒"><br><img src="https://gitee.com/mhist/hexo-image/raw/master/img/%E8%81%94%E6%83%B3%E4%B9%90%E5%91%97%E8%AE%A2%E5%8D%95%E5%B9%B4%E6%9C%88%E6%97%A5%E6%97%B6%E5%88%86%E7%A7%9220210504125305.jpg" alt="联想乐呗订单年月日时分秒"><br>可以看到这种时间显示都是年月日时分秒的格式.<br><img src="https://gitee.com/mhist/hexo-image/raw/master/img/%E8%AE%A2%E5%8D%95%E6%97%A5%E6%9C%9F%E6%98%BE%E7%A4%BA20210504130504.png" alt="订单日期显示"><br>文件及文档可以访问<a href="http://momentjs.cn/">moment.js中文网</a><br><a href="http://cdn.staticfile.org/moment.js/2.24.0/moment.js">http://cdn.staticfile.org/moment.js/2.24.0/moment.js</a><br><a href="http://cdn.staticfile.org/moment.js/2.24.0/moment-with-locales.js">http://cdn.staticfile.org/moment.js/2.24.0/moment-with-locales.js</a></p>
]]></content>
      <tags>
        <tag>JavaScript</tag>
      </tags>
  </entry>
  <entry>
    <title>小结-基于JavaScript高级程序设计第四版</title>
    <url>/2021/05/16/uncategorized/5fd2568d8f67/</url>
    <content><![CDATA[<h1 id="第1章-什么是-JavaScript"><a href="#第1章-什么是-JavaScript" class="headerlink" title="第1章 什么是 JavaScript"></a>第1章 什么是 JavaScript</h1><p>JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。 ECMAScript：由 ECMA-262 定义并提供核心功能。 文档对象模型（DOM）：提供与网页内容交互的方法和接口。 浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。 JavaScript 的这三个部分得到了五大 Web 浏览器（IE、Firefox、Chrome、Safari 和 Opera）不同程度 的支持。所有浏览器基本上对 ES5（ECMAScript 5）提供了完善的支持，而对 ES6（ECMAScript 6）和 ES7（ECMAScript 7）的支持度也在不断提升。这些浏览器对 DOM 的支持各不相同，但对 Level 3 的支 持日益趋于规范。HTML5 中收录的 BOM 会因浏览器而异，不过开发者仍然可以假定存在很大一部分 公共特性</p>
<h1 id="第2章-HTML-中的-JavaScript"><a href="#第2章-HTML-中的-JavaScript" class="headerlink" title="第2章 HTML 中的 JavaScript"></a>第2章 HTML 中的 JavaScript</h1><span id="more"></span>
<p>JavaScript 是通过script元素插入到 HTML 页面中的。这个元素可用于把 JavaScript 代码嵌入到<br>HTML 页面中，跟其他标记混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重点可<br>以总结如下。<br>要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同<br>一台服务器上，也可以位于完全不同的域。<br>所&lt;script元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的<br>情况下，包含在script元素中的代码必须严格按次序解释。<br>对不推迟执行的脚本，浏览器必须解释完位于script元素中的代码，然后才能继续渲染页面<br>的剩余部分。为此，通常应该把script元素放到页面末尾，介于主内容之后及/body标签<br>之前。<br>可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出<br>的次序执行。<br>可以使用 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异<br>步脚本不能保证按照它们在页面中出现的次序执行。<br>通过使用noscript元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启<br>用脚本，则noscript元素中的任何内容都不会被渲染</p>
<h1 id="第3章-语言基础"><a href="#第3章-语言基础" class="headerlink" title="第3章 语言基础"></a>第3章 语言基础</h1><p>JavaScript 的核心语言特性在 ECMA-262 中以伪语言 ECMAScript 的形式来定义。ECMAScript 包含<br>所有基本语法、操作符、数据类型和对象，能完成基本的计算任务，但没有提供获得输入和产生输出的<br>机制。理解 ECMAScript 及其复杂的细节是完全理解浏览器中 JavaScript 的关键。下面总结一下<br>ECMAScript 中的基本元素。<br>ECMAScript 中的基本数据类型包括 Undefined、Null、Boolean、Number、String 和 Symbol。<br>与其他语言不同，ECMAScript 不区分整数和浮点值，只有 Number 一种数值数据类型。<br>Object 是一种复杂数据类型，它是这门语言中所有对象的基类。<br>严格模式为这门语言中某些容易出错的部分施加了限制。<br>ECMAScript 提供了 C 语言和类 C 语言中常见的很多基本操作符，包括数学操作符、布尔操作符、<br>关系操作符、相等操作符和赋值操作符等。<br>这门语言中的流控制语句大多是从其他语言中借鉴而来的，比如 if 语句、for 语句和 switch<br>语句等。<br>ECMAScript 中的函数与其他语言中的函数不一样。<br>不需要指定函数的返回值，因为任何函数可以在任何时候返回任何值。<br>不指定返回值的函数实际上会返回特殊值 undefined。</p>
<h1 id="第-4-章-变量、作用域与内存"><a href="#第-4-章-变量、作用域与内存" class="headerlink" title="第 4 章 变量、作用域与内存"></a>第 4 章 变量、作用域与内存</h1><p>JavaScript 变量可以保存两种类型的值：原始值和引用值。原始值可能是以下 6 种原始数据类型之<br>一：Undefined、Null、Boolean、Number、String 和 Symbol。原始值和引用值有以下特点。<br>原始值大小固定，因此保存在栈内存上。<br>从一个变量到另一个变量复制原始值会创建该值的第二个副本。<br>引用值是对象，存储在堆内存上。<br>包含引用值的变量实际上只包含指向相应对象的一个指针，而不是对象本身。<br>从一个变量到另一个变量复制引用值只会复制指针，因此结果是两个变量都指向同一个对象。<br>typeof 操作符可以确定值的原始类型，而 instanceof 操作符用于确保值的引用类型。<br>任何变量（不管包含的是原始值还是引用值）都存在于某个执行上下文中（也称为作用域）。这个<br>上下文（作用域）决定了变量的生命周期，以及它们可以访问代码的哪些部分。执行上下文可以总结<br>如下。<br>执行上下文分全局上下文、函数上下文和块级上下文。<br>代码执行流每进入一个新上下文，都会创建一个作用域链，用于搜索变量和函数。<br>函数或块的局部上下文不仅可以访问自己作用域内的变量，而且也可以访问任何包含上下文乃<br>至全局上下文中的变量。<br>全局上下文只能访问全局上下文中的变量和函数，不能直接访问局部上下文中的任何数据。<br>变量的执行上下文用于确定什么时候释放内存。<br>JavaScript 是使用垃圾回收的编程语言，开发者不需要操心内存分配和回收。JavaScript 的垃圾回收<br>程序可以总结如下。<br>离开作用域的值会被自动标记为可回收，然后在垃圾回收期间被删除。<br>主流的垃圾回收算法是标记清理，即先给当前不使用的值加上标记，再回来回收它们的内存。<br>引用计数是另一种垃圾回收策略，需要记录值被引用了多少次。JavaScript 引擎不再使用这种算<br>法，但某些旧版本的 IE 仍然会受这种算法的影响，原因是 JavaScript 会访问非原生 JavaScript 对<br>象（如 DOM 元素）。<br>引用计数在代码中存在循环引用时会出现问题。<br>解除变量的引用不仅可以消除循环引用，而且对垃圾回收也有帮助。为促进内存回收，全局对<br>象、全局对象的属性和循环引用都应该在不需要时解除引用。</p>
<h1 id="第-5-章-基本引用类型"><a href="#第-5-章-基本引用类型" class="headerlink" title="第 5 章 基本引用类型"></a>第 5 章 基本引用类型</h1><p>JavaScript 中的对象称为引用值，几种内置的引用类型可用于创建特定类型的对象。<br>引用值与传统面向对象编程语言中的类相似，但实现不同。<br>Date 类型提供关于日期和时间的信息，包括当前日期、时间及相关计算。<br>RegExp 类型是 ECMAScript 支持正则表达式的接口，提供了大多数基础的和部分高级的正则表<br>达式功能。<br>JavaScript 比较独特的一点是，函数实际上是 Function 类型的实例，也就是说函数也是对象。因<br>为函数也是对象，所以函数也有方法，可以用于增强其能力。<br>由于原始值包装类型的存在，JavaScript 中的原始值可以被当成对象来使用。有 3 种原始值包装类<br>型：Boolean、Number 和 String。它们都具备如下特点。<br>每种包装类型都映射到同名的原始类型。<br>以读模式访问原始值时，后台会实例化一个原始值包装类型的对象，借助这个对象可以操作相<br>应的数据。<br>涉及原始值的语句执行完毕后，包装对象就会被销毁。<br>当代码开始执行时，全局上下文中会存在两个内置对象：Global 和 Math。其中，Global 对象在<br>大多数 ECMAScript 实现中无法直接访问。不过，浏览器将其实现为 window 对象。所有全局变量和函<br>数都是 Global 对象的属性。Math 对象包含辅助完成复杂计算的属性和方法。</p>
<h1 id="第-6-章-集合引用类型"><a href="#第-6-章-集合引用类型" class="headerlink" title="第 6 章 集合引用类型"></a>第 6 章 集合引用类型</h1><p>JavaScript 中的对象是引用值，可以通过几种内置引用类型创建特定类型的对象。<br>引用类型与传统面向对象编程语言中的类相似，但实现不同。<br>Object 类型是一个基础类型，所有引用类型都从它继承了基本的行为。<br>Array 类型表示一组有序的值，并提供了操作和转换值的能力。<br>定型数组包含一套不同的引用类型，用于管理数值在内存中的类型。<br>Date 类型提供了关于日期和时间的信息，包括当前日期和时间以及计算。<br>RegExp 类型是 ECMAScript 支持的正则表达式的接口，提供了大多数基本正则表达式以及一些<br>高级正则表达式的能力。<br>JavaScript 比较独特的一点是，函数其实是 Function 类型的实例，这意味着函数也是对象。由于<br>函数是对象，因此也就具有能够增强自身行为的方法。<br>因为原始值包装类型的存在，所以 JavaScript 中的原始值可以拥有类似对象的行为。有 3 种原始值<br>包装类型：Boolean、Number 和 String。它们都具有如下特点。<br>每种包装类型都映射到同名的原始类型。<br>在以读模式访问原始值时，后台会实例化一个原始值包装对象，通过这个对象可以操作数据。<br>涉及原始值的语句只要一执行完毕，包装对象就会立即销毁。<br>JavaScript 还有两个在一开始执行代码时就存在的内置对象：Global 和 Math。其中，Global 对<br>象在大多数 ECMAScript 实现中无法直接访问。不过浏览器将 Global 实现为 window 对象。所有全局<br>变量和函数都是 Global 对象的属性。Math 对象包含辅助完成复杂数学计算的属性和方法。<br>ECMAScript 6 新增了一批引用类型：Map、WeakMap、Set 和 WeakSet。这些类型为组织应用程序<br>数据和简化内存管理提供了新能力。</p>
<h1 id="第-7-章-迭代器与生成器"><a href="#第-7-章-迭代器与生成器" class="headerlink" title="第 7 章 迭代器与生成器"></a>第 7 章 迭代器与生成器</h1><p>迭代是一种所有编程语言中都可以看到的模式。ECMAScript 6 正式支持迭代模式并引入了两个新的<br>语言特性：迭代器和生成器。<br>迭代器是一个可以由任意对象实现的接口，支持连续获取对象产出的每一个值。任何实现 Iterable<br>接口的对象都有一个 Symbol.iterator 属性，这个属性引用默认迭代器。默认迭代器就像一个迭代器<br>工厂，也就是一个函数，调用之后会产生一个实现 Iterator 接口的对象。<br>迭代器必须通过连续调用 next()方法才能连续取得值，这个方法返回一个 IteratorObject。这<br>个对象包含一个 done 属性和一个 value 属性。前者是一个布尔值，表示是否还有更多值可以访问；后<br>者包含迭代器返回的当前值。这个接口可以通过手动反复调用 next()方法来消费，也可以通过原生消<br>费者，比如 for-of 循环来自动消费。<br>生成器是一种特殊的函数，调用之后会返回一个生成器对象。生成器对象实现了 Iterable 接口，<br>因此可用在任何消费可迭代对象的地方。生成器的独特之处在于支持 yield 关键字，这个关键字能够<br>暂停执行生成器函数。使用 yield 关键字还可以通过 next()方法接收输入和产生输出。在加上星号之<br>后，yield 关键字可以将跟在它后面的可迭代对象序列化为一连串值。</p>
<h1 id="第-8-章-对象、类与面向对象编程"><a href="#第-8-章-对象、类与面向对象编程" class="headerlink" title="第 8 章 对象、类与面向对象编程"></a>第 8 章 对象、类与面向对象编程</h1><p>对象在代码执行过程中的任何时候都可以被创建和增强，具有极大的动态性，并不是严格定义的实<br>体。下面的模式适用于创建对象。<br>工厂模式就是一个简单的函数，这个函数可以创建对象，为它添加属性和方法，然后返回这个<br>对象。这个模式在构造函数模式出现后就很少用了。<br>使用构造函数模式可以自定义引用类型，可以使用 new 关键字像创建内置类型实例一样创建自<br>定义类型的实例。不过，构造函数模式也有不足，主要是其成员无法重用，包括函数。考虑到<br>函数本身是松散的、弱类型的，没有理由让函数不能在多个对象实例间共享。<br>原型模式解决了成员共享的问题，只要是添加到构造函数 prototype 上的属性和方法就可以共<br>享。而组合构造函数和原型模式通过构造函数定义实例属性，通过原型定义共享的属性和方法。<br>JavaScript 的继承主要通过原型链来实现。原型链涉及把构造函数的原型赋值为另一个类型的实例。<br>这样一来，子类就可以访问父类的所有属性和方法，就像基于类的继承那样。原型链的问题是所有继承<br>的属性和方法都会在对象实例间共享，无法做到实例私有。盗用构造函数模式通过在子类构造函数中调<br>用父类构造函数，可以避免这个问题。这样可以让每个实例继承的属性都是私有的，但要求类型只能通<br>过构造函数模式来定义（因为子类不能访问父类原型上的方法）。目前最流行的继承模式是组合继承，<br>即通过原型链继承共享的属性和方法，通过盗用构造函数继承实例属性。<br>除上述模式之外，还有以下几种继承模式。<br>原型式继承可以无须明确定义构造函数而实现继承，本质上是对给定对象执行浅复制。这种操<br>作的结果之后还可以再进一步增强。<br>与原型式继承紧密相关的是寄生式继承，即先基于一个对象创建一个新对象，然后再增强这个<br>新对象，最后返回新对象。这个模式也被用在组合继承中，用于避免重复调用父类构造函数导<br>致的浪费。<br>寄生组合继承被认为是实现基于类型继承的最有效方式。<br>ECMAScript 6 新增的类很大程度上是基于既有原型机制的语法糖。类的语法让开发者可以优雅地定<br>义向后兼容的类，既可以继承内置类型，也可以继承自定义类型。类有效地跨越了对象实例、对象原型<br>和对象类之间的鸿沟。</p>
<h1 id="第-9-章-代理与反射"><a href="#第-9-章-代理与反射" class="headerlink" title="第 9 章 代理与反射"></a>第 9 章 代理与反射</h1><p>代理是 ECMAScript 6 新增的令人兴奋和动态十足的新特性。尽管不支持向后兼容，但它开辟出了<br>一片前所未有的 JavaScript 元编程及抽象的新天地。<br>从宏观上看，代理是真实 JavaScript 对象的透明抽象层。代理可以定义包含捕获器的处理程序对象，<br>而这些捕获器可以拦截绝大部分 JavaScript 的基本操作和方法。在这个捕获器处理程序中，可以修改任<br>何基本操作的行为，当然前提是遵从捕获器不变式。<br>与代理如影随形的反射 API，则封装了一整套与捕获器拦截的操作相对应的方法。可以把反射 API<br>看作一套基本操作，这些操作是绝大部分 JavaScript 对象 API 的基础。<br>代理的应用场景是不可限量的。开发者使用它可以创建出各种编码模式，比如（但远远不限于）跟<br>踪属性访问、隐藏属性、阻止修改或删除属性、函数参数验证、构造函数参数验证、数据绑定，以及可<br>观察对象。</p>
<h1 id="第-10-章-函-数"><a href="#第-10-章-函-数" class="headerlink" title="第 10 章 函 数"></a>第 10 章 函 数</h1><p>函数是 JavaScript 编程中最有用也最通用的工具。ECMAScript 6 新增了更加强大的语法特性，从而<br>让开发者可以更有效地使用函数。<br>函数表达式与函数声明是不一样的。函数声明要求写出函数名称，而函数表达式并不需要。没<br>有名称的函数表达式也被称为匿名函数。<br>ES6 新增了类似于函数表达式的箭头函数语法，但两者也有一些重要区别。<br>JavaScript 中函数定义与调用时的参数极其灵活。arguments 对象，以及 ES6 新增的扩展操作符，<br>可以实现函数定义和调用的完全动态化。<br>函数内部也暴露了很多对象和引用，涵盖了函数被谁调用、使用什么调用，以及调用时传入了<br>什么参数等信息。<br>JavaScript 引擎可以优化符合尾调用条件的函数，以节省栈空间。<br>闭包的作用域链中包含自己的一个变量对象，然后是包含函数的变量对象，直到全局上下文的<br>变量对象。<br>通常，函数作用域及其中的所有变量在函数执行完毕后都会被销毁。<br>闭包在被函数返回之后，其作用域会一直保存在内存中，直到闭包被销毁。<br>函数可以在创建之后立即调用，执行其中代码之后却不留下对函数的引用。<br>立即调用的函数表达式如果不在包含作用域中将返回值赋给一个变量，则其包含的所有变量都<br>会被销毁。<br>虽然 JavaScript 没有私有对象属性的概念，但可以使用闭包实现公共方法，访问位于包含作用域<br>中定义的变量。<br>可以访问私有变量的公共方法叫作特权方法。<br>特权方法可以使用构造函数或原型模式通过自定义类型中实现，也可以使用模块模式或模块增<br>强模式在单例对象上实现。</p>
<h1 id="第-11-章-期约与异步函数"><a href="#第-11-章-期约与异步函数" class="headerlink" title="第 11 章 期约与异步函数"></a>第 11 章 期约与异步函数</h1><p>长期以来，掌握单线程 JavaScript 运行时的异步行为一直都是个艰巨的任务。随着 ES6 新增了期约<br>和 ES8 新增了异步函数，ECMAScript 的异步编程特性有了长足的进步。通过期约和 async/await，不仅<br>可以实现之前难以实现或不可能实现的任务，而且也能写出更清晰、简洁，并且容易理解、调试的代码。<br>期约的主要功能是为异步代码提供了清晰的抽象。可以用期约表示异步执行的代码块，也可以用期<br>约表示异步计算的值。在需要串行异步代码时，期约的价值最为突出。作为可塑性极强的一种结构，期<br>约可以被序列化、连锁使用、复合、扩展和重组。<br>异步函数是将期约应用于 JavaScript 函数的结果。异步函数可以暂停执行，而不阻塞主线程。无论<br>是编写基于期约的代码，还是组织串行或平行执行的异步代码，使用异步函数都非常得心应手。异步函<br>数可以说是现代 JavaScript 工具箱中最重要的工具之一。</p>
<h1 id="第-12-章-BOM"><a href="#第-12-章-BOM" class="headerlink" title="第 12 章 BOM"></a>第 12 章 BOM</h1><p>浏览器对象模型（BOM，Browser Object Model）是以 window 对象为基础的，这个对象代表了浏<br>览器窗口和页面可见的区域。window 对象也被复用为 ECMAScript 的 Global 对象，因此所有全局变<br>量和函数都是它的属性，而且所有原生类型的构造函数和普通函数也都从一开始就存在于这个对象之<br>上。本章讨论了 BOM 的以下内容。<br>要引用其他 window 对象，可以使用几个不同的窗口指针。<br>通过 location 对象可以以编程方式操纵浏览器的导航系统。通过设置这个对象上的属性，可<br>以改变浏览器 URL 中的某一部分或全部。<br>使用 replace()方法可以替换浏览器历史记录中当前显示的页面，并导航到新 URL。<br>navigator 对象提供关于浏览器的信息。提供的信息类型取决于浏览器，不过有些属性如<br>userAgent 是所有浏览器都支持的。<br>BOM 中的另外两个对象也提供了一些功能。screen 对象中保存着客户端显示器的信息。这些信息<br>通常用于评估浏览网站的设备信息。history 对象提供了操纵浏览器历史记录的能力，开发者可以确<br>定历史记录中包含多少个条目，并以编程方式实现在历史记录中导航，而且也可以修改历史记录。</p>
<h1 id="第-13-章-客户端检测"><a href="#第-13-章-客户端检测" class="headerlink" title="第 13 章 客户端检测"></a>第 13 章 客户端检测</h1><p>客户端检测是 JavaScript 中争议最多的话题之一。因为不同浏览器之间存在差异，所以经常需要根<br>据浏览器的能力来编写不同的代码。客户端检测有不少方式，但下面两种用得最多。<br>能力检测，在使用之前先测试浏览器的特定能力。例如，脚本可以在调用某个函数之前先检查<br>它是否存在。这种客户端检测方式可以让开发者不必考虑特定的浏览器或版本，而只需关注某<br>些能力是否存在。能力检测不能精确地反映特定的浏览器或版本。<br>用户代理检测，通过用户代理字符串确定浏览器。用户代理字符串包含关于浏览器的很多信息，<br>通常包括浏览器、平台、操作系统和浏览器版本。用户代理字符串有一个相当长的发展史，很<br>多浏览器都试图欺骗网站相信自己是别的浏览器。用户代理检测也比较麻烦，特别是涉及 Opera<br>会在代理字符串中隐藏自己信息的时候。即使如此，用户代理字符串也可以用来确定浏览器使<br>用的渲染引擎以及平台，包括移动设备和游戏机。<br>在选择客户端检测方法时，首选是使用能力检测。特殊能力检测要放在次要位置，作为决定代码逻<br>辑的参考。用户代理检测是最后一个选择，因为它过于依赖用户代理字符串。<br>浏览器也提供了一些软件和硬件相关的信息。这些信息通过 screen 和 navigator 对象暴露出来。<br>利用这些 API，可以获取关于操作系统、浏览器、硬件、设备位置、电池状态等方面的准确信息。</p>
<h1 id="第-14-章-DOM"><a href="#第-14-章-DOM" class="headerlink" title="第 14 章 DOM"></a>第 14 章 DOM</h1><p>文档对象模型（DOM，Document Object Model）是语言中立的 HTML 和 XML 文档的 API。DOM<br>Level 1 将 HTML 和 XML 文档定义为一个节点的多层级结构，并暴露出 JavaScript 接口以操作文档的底<br>层结构和外观。<br>DOM 由一系列节点类型构成，主要包括以下几种。<br>Node 是基准节点类型，是文档一个部分的抽象表示，所有其他类型都继承 Node。<br>Document 类型表示整个文档，对应树形结构的根节点。在 JavaScript 中，document 对象是<br>Document 的实例，拥有查询和获取节点的很多方法。<br>Element 节点表示文档中所有 HTML 或 XML 元素，可以用来操作它们的内容和属性。<br>其他节点类型分别表示文本内容、注释、文档类型、CDATA 区块和文档片段。<br>DOM 编程在多数情况下没什么问题，在涉及script和style元素时会有一点兼容性问题。因<br>为这些元素分别包含脚本和样式信息，所以浏览器会将它们与其他元素区别对待。<br>要理解 DOM，最关键的一点是知道影响其性能的问题所在。DOM 操作在 JavaScript 代码中是代价<br>比较高的，NodeList 对象尤其需要注意。NodeList 对象是“实时更新”的，这意味着每次访问它都<br>会执行一次新的查询。考虑到这些问题，实践中要尽量减少 DOM 操作的数量。<br>MutationObserver 是为代替性能不好的 MutationEvent 而问世的。使用它可以有效精准地监控<br>DOM 变化，而且 API 也相对简单。</p>
<h1 id="第-15-章-DOM-扩展"><a href="#第-15-章-DOM-扩展" class="headerlink" title="第 15 章 DOM 扩展"></a>第 15 章 DOM 扩展</h1><p>虽然 DOM 规定了与 XML 和 HTML 文档交互的核心 API，但其他几个规范也定义了对 DOM 的扩<br>展。很多扩展都基于之前的已成为事实标准的专有特性标准化而来。本章主要介绍了以下 3 个规范。<br>Selectors API 为基于 CSS 选择符获取 DOM 元素定义了几个方法：querySelector()、<br>querySelectorAll()和 matches()。<br>Element Traversal 在 DOM 元素上定义了额外的属性，以方便对 DOM 元素进行遍历。这个需求<br>是因浏览器处理元素间空格的差异而产生的。<br>HTML5 为标准 DOM 提供了大量扩展。其中包括对 innerHTML 属性等事实标准进行了标准化，<br>还有焦点管理、字符集、滚动等特性。<br>DOM 扩展的数量总体还不大，但随着 Web 技术的发展一定会越来越多。浏览器仍然没有停止对专<br>有扩展的探索，如果出现成功的扩展，那么就可能成为事实标准，或者最终被整合到未来的标准中。</p>
<h1 id="第-16-章-DOM2-和-DOM3"><a href="#第-16-章-DOM2-和-DOM3" class="headerlink" title="第 16 章 DOM2 和 DOM3"></a>第 16 章 DOM2 和 DOM3</h1><p>DOM2 规范定义了一些模块，用来丰富 DOM1 的功能。DOM2 Core 在一些类型上增加了与 XML<br>命名空间有关的新方法。这些变化只有在使用 XML 或 XHTML 文档时才会用到，在 HTML 文档中则没<br>有用处。DOM2 增加的与 XML 命名空间无关的方法涉及以编程方式创建 Document 和 DocumentType<br>类型的新实例。<br>DOM2 Style 模块定义了如何操作元素的样式信息。<br>每个元素都有一个关联的 style 对象，可用于确定和修改元素特定的样式。<br>要确定元素的计算样式，包括应用到元素身上的所有 CSS规则，可以使用getComputedStyle()<br>方法。<br>通过 document.styleSheets 集合可以访问文档上所有的样式表。<br>DOM2 Traversal and Range 模块定义了与 DOM 结构交互的不同方式。<br>NodeIterator 和 TreeWalker 可以对 DOM 树执行深度优先的遍历。<br>NodeIterator 接口很简单，每次只能向前和向后移动一步。TreeWalker 除了支持同样的行<br>为，还支持在 DOM 结构的所有方向移动，包括父节点、同胞节点和子节点。<br>范围是选择 DOM 结构中特定部分并进行操作的一种方式。<br>通过范围的选区可以在保持文档结构完好的同时从文档中移除内容，也可复制文档中相应的部分。</p>
<h1 id="第-17-章-事-件"><a href="#第-17-章-事-件" class="headerlink" title="第 17 章 事 件"></a>第 17 章 事 件</h1><p>事件是 JavaScript 与网页结合的主要方式。最常见的事件是在 DOM3 Events 规范或 HTML5 中定义<br>的。虽然基本的事件都有规范定义，但很多浏览器在规范之外实现了自己专有的事件，以方便开发者更<br>好地满足用户交互需求，其中一些专有事件直接与特殊的设备相关。<br>围绕着使用事件，需要考虑内存与性能问题。例如：<br>最好限制一个页面中事件处理程序的数量，因为它们会占用过多内存，导致页面响应缓慢；<br>利用事件冒泡，事件委托可以解决限制事件处理程序数量的问题；<br>最好在页面卸载之前删除所有事件处理程序。<br>使用 JavaScript 也可以在浏览器中模拟事件。DOM2 Events 和 DOM3 Events 规范提供了模拟方法，<br>可以模拟所有原生 DOM 事件。键盘事件一定程度上也是可以模拟的，有时候需要组合其他技术。IE8<br>及更早版本也支持事件模拟，只是接口与 DOM 方式不同。<br>事件是 JavaScript 中最重要的主题之一，理解事件的原理及其对性能的影响非常重要。</p>
<h1 id="第-18-章-动画与-Canvas-图形"><a href="#第-18-章-动画与-Canvas-图形" class="headerlink" title="第 18 章 动画与 Canvas 图形"></a>第 18 章 动画与 Canvas 图形</h1><p>requestAnimationFrame 是简单但实用的工具，可以让 JavaScript 跟进浏览器渲染周期，从而更<br>加有效地实现网页视觉动效。<br>HTML5 的canvas元素为 JavaScript 提供了动态创建图形的 API。这些图形需要使用特定上下文<br>绘制，主要有两种。第一种是支持基本绘图操作的 2D 上下文：<br>填充和描绘颜色及图案<br>绘制矩形<br>绘制路径<br>绘制文本<br>创建渐变和图案<br>第二种是 3D 上下文，也就是 WebGL。WebGL 是浏览器对 OpenGL ES 2.0 的实现。OpenGL ES 2.0<br>是游戏图形开发常用的一个标准。WebGL 支持比 2D 上下文更强大的绘图能力，包括：<br>用 OpenGL 着色器语言（GLSL）编写顶点和片段着色器；<br>支持定型数组，限定数组中包含数值的类型；<br>创建和操作纹理。<br>目前所有主流浏览器的较新版本都已经支持canvas标签。</p>
<h1 id="第-19-章-表单脚本"><a href="#第-19-章-表单脚本" class="headerlink" title="第 19 章 表单脚本"></a>第 19 章 表单脚本</h1><p>尽管 HTML 和 Web 应用自诞生以来已经发生了天翻地覆的变化，但 Web 表单几乎从来没有变过。<br>JavaScript 可以增加现有的表单字段以提供新功能或增强易用性。为此，表单字段也暴露了属性、方法<br>和事件供 JavaScript 使用。以下是本章介绍的一些概念。<br>可以使用标准或非标准的方法全部或部分选择文本框中的文本。<br>所有浏览器都采用了 Firefox 操作文本选区的方式，使其成为真正的标准。<br>可以通过监听键盘事件并检测要插入的字符来控制文本框接受或不接受某些字符。<br>所有浏览器都支持剪贴板相关的事件，包括 copy、cut 和 paste。剪贴板事件在不同浏览器中的<br>实现有很大差异。<br>在文本框只限某些字符时，可以利用剪贴板事件屏幕粘贴事件。<br>选择框也是经常使用 JavaScript 来控制的一种表单控件。借助 DOM，操作选择框比以前方便了很多。<br>使用标准的 DOM 技术，可以为选择框添加或移除选项，也可以将选项从一个选择框移动到另一个选择<br>框，或者重排选项。<br>富文本编辑通常以使用包含空白 HTML 文档的内嵌窗格来处理。通过将文档的 designMode 属性设<br>置为”on”，可以让整个页面变成编辑区，就像文字处理软件一样。另外，给元素添加 contenteditable<br>属性也可以将元素转换为可编辑区。默认情况下，可以切换文本的粗体、斜体样式，也可以使用剪贴板功<br>能。JavaScript 通过 execCommand()方法可以执行一些富文本编辑功能，通过 queryCommandEnabled()、<br>queryCommandState()和 queryCommandValue()方法则可以获取有关文本选区的信息。由于富文本编<br>辑区不涉及表单字段，因此要将富文本内容提交到服务器，必须把 HTML 从 iframe 或 contenteditable<br>元素中复制到一个表单字段。</p>
<h1 id="第-20-章-JavaScript-API"><a href="#第-20-章-JavaScript-API" class="headerlink" title="第 20 章 JavaScript API"></a>第 20 章 JavaScript API</h1><p>除了定义新标签，HTML5 还定义了一些 JavaScript API。这些 API 可以为开发者提供更便捷的 Web<br>接口，暴露堪比桌面应用的能力。本章主要介绍了以下 API。<br>Atomics API 用于保护代码在多线程内存访问模式下不发生资源争用。<br>postMessage() API 支持从不同源跨文档发送消息，同时保证安全和遵循同源策略。<br>Encoding API 用于实现字符串与缓冲区之间的无缝转换（越来越常见的操作）。<br>File API 提供了发送、接收和读取大型二进制对象的可靠工具。<br>媒体元素audio和video拥有自己的 API，用于操作音频和视频。并不是每个浏览器都会支<br>持所有媒体格式，使用 canPlayType()方法可以检测浏览器支持情况。<br>拖放 API 支持方便地将元素标识为可拖动，并在操作系统完成放置时给出回应。可以利用它创<br>建自定义可拖动元素和放置目标。<br>Notifications API 提供了一种浏览器中立的方式，以此向用户展示消通知弹层。<br>Streams API 支持以全新的方式读取、写入和处理数据。<br>Timing API 提供了一组度量数据进出浏览器时间的可靠工具。<br>Web Components API 为元素重用和封装技术向前迈进提供了有力支撑。<br>Web Cryptography API 让生成随机数、加密和签名消息成为一类特性。</p>
<h1 id="第-21-章-错误处理与调试"><a href="#第-21-章-错误处理与调试" class="headerlink" title="第 21 章 错误处理与调试"></a>第 21 章 错误处理与调试</h1><p>对于今天复杂的 Web 应用程序而言，JavaScript 中的错误处理十分重要。未能预测什么时候会发生<br>错误以及如何从错误中恢复，会导致糟糕的用户体验，甚至造成用户流失。大多数浏览器默认不向用户<br>报告 JavaScript 错误，因此在开发和调试时需要自己实现错误报告。不过在生产环境中，不应该以这种<br>方式报告错误。<br>下列方法可用于阻止浏览器对 JavaScript 错误作出反应。<br>使用 try/catch 语句，可以通过更合适的方式对错误做出处理，避免浏览器处理。<br>定义 window.onerror 事件处理程序，所有没有通过 try/catch 处理的错误都会被该事件处理<br>程序接收到（仅限 IE、Firefox 和 Chrome）。<br>开发 Web 应用程序时，应该认真考虑可能发生的错误，以及如何处理这些错误。<br>首先，应该分清哪些算重大错误，哪些不算重大错误。<br>然后，要通过分析代码预测很可能发生哪些错误。由于以下因素，JavaScript 中经常出现错误：<br> 类型转换；<br> 数据类型检测不足；<br> 向服务器发送错误数据或从服务器接收到错误数据。<br>IE、Firefox、Chrome、Opera 和 Safari 都有 JavaScript 调试器，有的内置在浏览器中，有的是作为扩<br>展，需另行下载。所有调试器都能够设置断点、控制代码执行和在运行时检查变量值。</p>
<h1 id="第-22-章-处理-XML"><a href="#第-22-章-处理-XML" class="headerlink" title="第 22 章 处理 XML"></a>第 22 章 处理 XML</h1><p>浏览器对使用 JavaScript 处理 XML 实现及相关技术相当支持。然而，由于早期缺少规范，常用的<br>功能出现了不同实现。DOM Level 2 提供了创建空 XML 文档的 API，但不能解析和序列化。浏览器为<br>解析和序列化 XML 实现了两个新类型。<br>DOMParser 类型是简单的对象，可以将 XML 字符串解析为 DOM 文档。<br>XMLSerializer 类型执行相反操作，将 DOM 文档序列化为 XML 字符串。<br>基于所有主流浏览器的实现，DOM Level 3 新增了针对 XPath API 的规范。该 API 可以让 JavaScript<br>针对 DOM 文档执行任何 XPath 查询并得到不同数据类型的结果。<br>最后一个与 XML相关的技术是 XSLT，目前并没有规范定义其 API。Firefox最早增加了 XSLTProcessor<br>类型用于通过 JavaScript 处理转换。</p>
<h1 id="第-23-章-JSON"><a href="#第-23-章-JSON" class="headerlink" title="第 23 章 JSON"></a>第 23 章 JSON</h1><p>JSON 是一种轻量级数据格式，可以方便地表示复杂数据结构。这个格式使用 JavaScript 语法的一个<br>子集表示对象、数组、字符串、数值、布尔值和 null。虽然 XML 也能胜任同样的角色，但 JSON 更简<br>洁，JavaScript 支持也更好。更重要的是，所有浏览器都已经原生支持全局 JSON 对象。<br>ECMAScript 5 定义了原生 JSON 对象，用于将 JavaScript 对象序列化为 JSON 字符串，以及将 JSON<br>数组解析为 JavaScript 对象。JSON.stringify()和 JSON.parse()方法分别用于实现这两种操作。这<br>两个方法都有一些选项可以用来改变默认的行为，以实现过滤或修改流程。</p>
<h1 id="第-24-章-网络请求与远程资源"><a href="#第-24-章-网络请求与远程资源" class="headerlink" title="第 24 章 网络请求与远程资源"></a>第 24 章 网络请求与远程资源</h1><p>Ajax 是无须刷新当前页面即可从服务器获取数据的一个方法，具有如下特点。<br>让 Ajax 迅速流行的中心对象是 XMLHttpRequest（XHR）。<br>这个对象最早由微软发明，并在 IE5 中作为通过 JavaScript 从服务器获取 XML 数据的一种手段。<br>之后，Firefox、Safari、Chrome 和 Opera 都复刻了相同的实现。W3C 随后将 XHR 行为写入 Web<br>标准。<br>虽然不同浏览器的实现有些差异，但 XHR 对象的基本使用在所有浏览器中相对是规范的，因此<br>可以放心地在 Web 应用程序中使用。<br>XHR 的一个主要限制是同源策略，即通信只能在相同域名、相同端口和相同协议的前提下完成。<br>访问超出这些限制之外的资源会导致安全错误，除非使用了正式的跨域方案。这个方案叫作跨源资源共<br>享（CORS，Cross-Origin Resource Sharing），XHR 对象原生支持 CORS。图片探测和 JSONP 是另外两种<br>跨域通信技术，但没有 CORS 可靠。<br>Fetch API 是作为对 XHR 对象的一种端到端的替代方案而提出的。这个 API 提供了优秀的基于期约<br>的结构、更直观的接口，以及对 Stream API 的最好支持。<br>Web Socket 是与服务器的全双工、双向通信渠道。与其他方案不同，Web Socket 不使用 HTTP，而<br>使用了自定义协议，目的是更快地发送小数据块。这需要专用的服务器，但速度优势明显。</p>
<h1 id="第-25-章-客户端存储"><a href="#第-25-章-客户端存储" class="headerlink" title="第 25 章 客户端存储"></a>第 25 章 客户端存储</h1><p>Web Storage 定义了两个对象用于存储数据：sessionStorage 和 localStorage。前者用于严格<br>保存浏览器一次会话期间的数据，因为数据会在浏览器关闭时被删除。后者用于会话之外持久保存数据。<br>IndexedDB 是类似于 SQL 数据库的结构化数据存储机制。不同的是，IndexedDB 存储的是对象，而<br>不是数据表。对象存储是通过定义键然后添加数据来创建的。游标用于查询对象存储中的特定数据，而<br>索引可以针对特定属性实现更快的查询。<br>有了这些存储手段，就可以在客户端通过使用 JavaScript 存储可观的数据。因为这些数据没有加密，<br>所以要注意不能使用它们存储敏感信息。</p>
<h1 id="第-26-章-模-块"><a href="#第-26-章-模-块" class="headerlink" title="第 26 章 模 块"></a>第 26 章 模 块</h1><p>模块模式是管理复杂性的永恒工具。开发者可以通过它创建逻辑彼此独立的代码段，在这些代码段<br>之间声明依赖，并将它们连接在一起。此外，这种模式也是经证明能够优雅扩展到任意复杂度且跨平台<br>的方案。<br>多年以来，CommonJS 和 AMD 这两个分别针对服务器端环境和受延迟限制的客户端环境的模块系<br>统长期分裂。两个系统都获得了爆炸性增强，但为它们编写的代码则在很多方面不一致，经常也会带有<br>冗余的样板代码。而且，这两个系统都没有在浏览器中实现。缺乏兼容导致出现了相关工具，从而让在<br>浏览器中实现模块模式成为可能。<br>ECMAScript 6 规范重新定义了浏览器模块，集之前两个系统之长于一身，并通过更简单的声明性语<br>法暴露出来。浏览器对原生模块的支持越来越好，但也提供了稳健的工具以实现从不支持到支持 ES6<br>模块的过渡。</p>
<h1 id="第-27-章-工作者线程"><a href="#第-27-章-工作者线程" class="headerlink" title="第 27 章 工作者线程"></a>第 27 章 工作者线程</h1><p>工作者线程可以运行异步 JavaScript 而不阻塞用户界面。这非常适合复杂计算和数据处理，特别是<br>需要花较长时间因而会影响用户使用网页的处理任务。工作者线程有自己独立的环境，只能通过异步消<br>息与外界通信。<br>工作者线程可以是专用线程、共享线程。专用线程只能由一个页面使用，而共享线程则可以由同源<br>的任意页面共享。<br>服务工作者线程用于让网页模拟原生应用程序。服务工作者线程也是一种工作者线程，但它们更像<br>是网络代理，而非独立的浏览器线程。可以把它们看成是高度定制化的网络缓存，它们也可以在 PWA<br>中支持推送通知。</p>
<h1 id="第-28-章-最佳实践"><a href="#第-28-章-最佳实践" class="headerlink" title="第 28 章 最佳实践"></a>第 28 章 最佳实践</h1><p>随着 JavaScript 开发日益成熟，最佳实践不断涌现。曾经的业余爱好如今也成为了正式的职业。因<br>此，前端开发也需要像其他编程语言一样，注重可维护性、性能优化和部署。<br>为保证 JavaScript 代码的可维护性，可以参考如下编码惯例。<br>其他语言的编码惯例可以作为添加注释和确定缩进的参考，但 JavaScript 作为一门适合松散类型<br>的语言也有自己的一些特殊要求。<br>由于 JavaScript 必须与 HTML 和 CSS 共存，因此各司其职尤为重要：JavaScript 负责定义行为，<br>HTML 负责定义内容，而 CSS 负责定义外观。<br>如果三者职责混淆，则可能导致难以调试的错误和可维护性问题。<br>随着 Web 应用程序中 JavaScript 代码量的激增，性能也越来越重要。因此应该牢记如下这些事项。<br>执行 JavaScript 所需的时间直接影响网页性能，其重要性不容忽视。<br>很多适合 C 语言的性能优化策略同样也适合 JavaScript，包括循环展开和使用 switch 语句而不<br>是 if 语句。<br>另一个需要重视的方面是 DOM 交互很费时间，因此应该尽可能限制 DOM 操作的数量。<br>开发 Web 应用程序的最后一步是上线部署。以下是本章讨论的相关要点。<br>为辅助部署，应该建立构建流程，将 JavaScript 文件合并为较少的（最好是只有一个）文件。<br>构建流程可以实现很多源代码处理任务的自动化。例如，可以运行 JavaScript 验证程序，确保没<br>有语法错误和潜在的问题。<br>压缩可以让文件在部署之前变得尽量小。<br>启用 HTTP 压缩可以让网络传输的 JavaScript 文件尽可能小，从而提升页面的整体性能。</p>
]]></content>
      <tags>
        <tag>JavaScript</tag>
      </tags>
  </entry>
  <entry>
    <title>开发自己的脚手架工具</title>
    <url>/2021/11/08/mhist-cli/f848dc5a8054/</url>
    <content><![CDATA[<h1 id="入口文件和基本配置文件"><a href="#入口文件和基本配置文件" class="headerlink" title="入口文件和基本配置文件"></a>入口文件和基本配置文件</h1><p>mhist-cli<br>├── index.js<br>├── package.json</p>
<p>可以通过命令创建package.json文件</p>
<figure class="highlight coffeescript"><table><tr><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-built_in">npm</span> init -y<br></code></pre></td></tr></table></figure>

<h1 id="终端命令"><a href="#终端命令" class="headerlink" title="终端命令"></a>终端命令</h1><p>需求：在终端输入指令后，会显示你所定义的相应的类似版本号之类的内容。</p>
<p>知识： #！ （#!是特殊的表示符，其后面跟的是解释此脚本的shell的路径，这个是告诉系统，应该调用哪个东西来运行他。）</p>
<p>定义路径</p>
<figure class="highlight d"><table><tr><td class="code"><pre><code class="hljs d"><span class="hljs-meta">#!/usr/bin/env node</span><br></code></pre></td></tr></table></figure>
<p>同时在package.json中添加一个对象</p>
<figure class="highlight 1c"><table><tr><td class="code"><pre><code class="hljs 1c"><span class="hljs-string">&quot;bin&quot;</span>: &#123;<br>   <span class="hljs-string">&quot;mhist-cli&quot;</span>: <span class="hljs-string">&quot;index.js&quot;</span><br> &#125;,<br></code></pre></td></tr></table></figure>
<p>这时候需要使用 <font color=red>npm link</font> 命令，将环境进行链接，之后在终端输入你指定的mhist-cli就会在终端输出你需要的相应的结果，其实也就是能够直接完成  node index.js.</p>
<p><img src="https://cdn.jsdelivr.net/gh/mhist/hexoImage@main/img/20211108182935m.png" alt="mhist-cli-001"></p>
<h1 id="自定义终端命令"><a href="#自定义终端命令" class="headerlink" title="自定义终端命令"></a>自定义终端命令</h1><p>基于commander.js </p>
<figure class="highlight cmake"><table><tr><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> commmander<br></code></pre></td></tr></table></figure>

<h2 id="版本号"><a href="#版本号" class="headerlink" title="版本号"></a>版本号</h2><p>通常情况下，在package.json中会有项目当前的版本号，我们可以通过commander中的</p>
<figure class="highlight pgsql"><table><tr><td class="code"><pre><code class="hljs pgsql">program.version(require(<span class="hljs-string">&#x27;./package.json&#x27;</span>).<span class="hljs-keyword">version</span>);<br></code></pre></td></tr></table></figure>
<p>动态获取到最新的版本号，以便于在终端进行输出。</p>
<p>在文件根目录中终端中输入 <font color=blue>脚手架名称 –version</font> 即可显示对应的版本号，例如  mhist-cli –version或者mhist-cli -V  ,其输出结果为 1.0.0    </p>
<p>#如果希望程序响应-v选项而不是-V选项，<br>#只需使用与option方法相同的语法将自定义标志传递给version方法<br>program<br>  .version(‘0.0.1’, ‘-v, –version’)</p>
<h2 id="开发过程中遇到的问题"><a href="#开发过程中遇到的问题" class="headerlink" title="开发过程中遇到的问题"></a>开发过程中遇到的问题</h2><h3 id="下载项目模板，需要自动化实现npm-install-通过自己的脚手架创建项目时，出现以下问题："><a href="#下载项目模板，需要自动化实现npm-install-通过自己的脚手架创建项目时，出现以下问题：" class="headerlink" title="下载项目模板，需要自动化实现npm install,通过自己的脚手架创建项目时，出现以下问题："></a>下载项目模板，需要自动化实现npm install,通过自己的脚手架创建项目时，出现以下问题：</h3><pre>
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: spawn npm ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn npm',
  path: 'npm',
  spawnargs: [ 'install' ]
}
</pre>

<p>解决方案：<a href="https://github.com/vitejs/vite/issues/1361">issue</a></p>
<p>按照上述issues的说法并没有解决相应的问题，在运行npm命令时需要考虑平台的问题。</p>
<figure class="highlight delphi"><table><tr><td class="code"><pre><code class="hljs delphi"><span class="hljs-comment">// 2.执行npm install</span><br>    <span class="hljs-keyword">const</span> command = process.<span class="hljs-keyword">platform</span> === <span class="hljs-string">&#x27;win32&#x27;</span> ? <span class="hljs-string">&#x27;npm.cmd&#x27;</span>: <span class="hljs-string">&#x27;npm&#x27;</span>;<br></code></pre></td></tr></table></figure>

<div class="note success modern"><p>当然在这之前，我也按照搜到的资料，设置了环境变量，然后现在成功运行之后，为了控制变量，删除了之前添加的环境变量，发现项目模板能够正确创建，同时能够自动通过npm install下载需要的依赖包。</p>
</div>]]></content>
      <categories>
        <category>mhist-cli</category>
      </categories>
      <tags>
        <tag>mhist-cli</tag>
      </tags>
  </entry>
  <entry>
    <title>有趣的前端游戏</title>
    <url>/2021/11/15/web-fun/fcf961257c62/</url>
    <content><![CDATA[<h1 id="有趣的前端资源"><a href="#有趣的前端资源" class="headerlink" title="有趣的前端资源"></a>有趣的前端资源</h1><p>[1]<br>Flex Box 冒险游戏: <a href="https://codingfantasy.com/games/flexboxadventure">https://codingfantasy.com/games/flexboxadventure</a></p>
<p>[2]<br>Flexbox 格子骑士: <a href="https://knightsoftheflexboxtable.com/">https://knightsoftheflexboxtable.com/</a></p>
<p>[3]<br>Flex Box 青蛙: <a href="https://flexboxfroggy.com/">https://flexboxfroggy.com/</a></p>
<p>[4]<br>Flex Box 打僵尸: <a href="https://geddski.teachable.com/p/flexbox-zombies">https://geddski.teachable.com/p/flexbox-zombies</a></p>
<p>[5]<br>Flex Box 保卫战: <a href="http://www.flexboxdefense.com/">http://www.flexboxdefense.com/</a></p>
<p>[6]<br>Flex语法操纵台: <a href="https://the-echoplex.net/flexyboxes/">https://the-echoplex.net/flexyboxes/</a></p>
<p>[7]<br>Grid 花园: <a href="https://cssgridgarden.com/">https://cssgridgarden.com/</a></p>
<p>[8]<br>CSS Grid 备忘清单: <a href="https://alialaa.github.io/css-grid-cheat-sheet/">https://alialaa.github.io/css-grid-cheat-sheet/</a></p>
<p>[9]<br>Grid 攻击: <a href="https://codingfantasy.com/games/css-grid-attack">https://codingfantasy.com/games/css-grid-attack</a></p>
<p>[10]<br>CSS 选择器备忘清单: <a href="https://frontend30.com/css-selectors-cheatsheet/">https://frontend30.com/css-selectors-cheatsheet/</a></p>
<p>[11]<br>CSS 动画: <a href="https://css-animations.io/">https://css-animations.io/</a></p>
<p>[12]<br>混合滤镜: <a href="https://ilyashubin.github.io/FilterBlend/">https://ilyashubin.github.io/FilterBlend/</a></p>
<p>[13]<br>CSS晚餐: <a href="https://flukeout.github.io/">https://flukeout.github.io/</a></p>
<p>[14]<br>TypeScript 练习: <a href="https://typescript-exercises.github.io/">https://typescript-exercises.github.io/</a></p>
<p>[15]<br>设计模式游戏: <a href="https://designpatternsgame.com/">https://designpatternsgame.com/</a></p>
<p>[16]<br>React 教程: <a href="https://react-tutorial.app/">https://react-tutorial.app/</a></p>
<p>[17]<br>Untrusted: <a href="https://alexnisnevich.github.io/untrusted/">https://alexnisnevich.github.io/untrusted/</a></p>
<p>[18]<br>Promisees: <a href="https://bevacqua.github.io/promisees/">https://bevacqua.github.io/promisees/</a></p>
<p>[19]<br>JSchallenger: <a href="https://www.jschallenger.com/">https://www.jschallenger.com/</a></p>
<p>[20]<br>Service Workies: <a href="https://serviceworkies.com/">https://serviceworkies.com/</a></p>
<p>[21]<br>Git分支学习: <a href="https://learngitbranching.js.org/">https://learngitbranching.js.org/</a></p>
<p>[22]<br>Select Star SQL: <a href="https://selectstarsql.com/">https://selectstarsql.com/</a></p>
<p>[23]<br>Select Star SQL: <a href="https://selectstarsql.com/">https://selectstarsql.com/</a></p>
<p>[24]<br>SQL警察局: <a href="https://sqlpd.com/">https://sqlpd.com/</a></p>
<p>[25]<br>CodinGame: <a href="https://www.codingame.com/">https://www.codingame.com/</a></p>
<p>[26]<br>CodinGame: <a href="https://www.codingame.com/">https://www.codingame.com/</a></p>
<p>[27]<br>正则填字游戏: <a href="https://regexcrossword.com/">https://regexcrossword.com/</a></p>
<p>[28]<br>RegexOne: <a href="https://regexone.com/">https://regexone.com/</a></p>
]]></content>
      <categories>
        <category>web-fun</category>
      </categories>
      <tags>
        <tag>web-fun</tag>
      </tags>
  </entry>
</search>