atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>图雀社区</title>
  
  <subtitle>汇集精彩的实战技术教程</subtitle>
  <link href="/atom.xml" rel="self"/>
  
  <link href="https://tuture.co/"/>
  <updated>2021-07-11T07:16:34.088Z</updated>
  <id>https://tuture.co/</id>
  
  <author>
    <name>图雀社区</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>JavaScript 测试系列实战（三）：使用 Mock 模拟模块并处理组件交互</title>
    <link href="https://tuture.co/2020/08/31/34217fa/"/>
    <id>https://tuture.co/2020/08/31/34217fa/</id>
    <published>2020-08-30T22:34:17.128Z</published>
    <updated>2021-07-11T07:16:34.088Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><img alt class="avatar" data-src="/images/avatars/tuture-dev.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><p class="nickName">@tuture-dev</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcw==" title="https://github.com/tuture-dev/javascript-test-series"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="初次尝试-Jest-Mock"><a href="#初次尝试-Jest-Mock" class="headerlink" title="初次尝试 Jest Mock"></a>初次尝试 Jest Mock</h2><p>我们的应用程序通常需要从外部的 API 获取数据。在编写测试时，外部 API 可能由于各种原因而失败。我们希望我们的测试是可靠和独立的，而最常见的解决方案就是 Mock。</p><h3 id="改写-TodoList-组件"><a href="#改写-TodoList-组件" class="headerlink" title="改写 TodoList 组件"></a>改写 TodoList 组件</h3><p>首先让我们改造组件，使其能够通过 API 获取数据。安装 axios：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install axios</span><br></pre></td></tr></table></figure><p>然后改写 <code>TodoList</code> 组件如下：</p><figure class="highlight js"><figcaption><span>src/TodoList.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzhlMzAyZThiNDY1ZWNlZmZhOTM3ODk3Y2FmNmIyMWNkYWZjM2YyZDQvc3JjL1RvZG9MaXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/8e302e8b465eceffa937897caf6b21cdafc3f2d4/src/TodoList.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="keyword">import</span> Task <span class="keyword">from</span> <span class="string">'./Task'</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">const</span> ToDoList = <span class="function">(<span class="params">props</span>) =&gt;</span> &#123;</span><br><span class="line">[tuture-del]  <span class="keyword">return</span> (</span><br><span class="line">[tuture-del]    &lt;ul&gt;</span><br><span class="line">[tuture-del]      &#123;props.tasks.map(<span class="function">(<span class="params">task</span>) =&gt;</span> (</span><br><span class="line">[tuture-del]        &lt;Task key=&#123;task.id&#125; id=&#123;task.id&#125; name=&#123;task.name&#125; /&gt;</span><br><span class="line">[tuture-del]      ))&#125;</span><br><span class="line">[tuture-del]    &lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]  );</span></span><br><span class="line"><span class="regexp">[tuture-del]&#125;;</span></span><br><span class="line"><span class="regexp">[tuture-add]const apiUrl = 'https:/</span><span class="regexp">/api.tuture.co';</span></span><br><span class="line"><span class="regexp">[tuture-add]</span></span><br><span class="line"><span class="regexp">[tuture-add]class ToDoList extends Component &#123;</span></span><br><span class="line"><span class="regexp">[tuture-add]  state = &#123;</span></span><br><span class="line"><span class="regexp">[tuture-add]    tasks: [],</span></span><br><span class="line"><span class="regexp">[tuture-add]  &#125;;</span></span><br><span class="line"><span class="regexp">[tuture-add]</span></span><br><span class="line"><span class="regexp">[tuture-add]  componentDidMount() &#123;</span></span><br><span class="line"><span class="regexp">[tuture-add]    return axios</span></span><br><span class="line"><span class="regexp">[tuture-add]      .get(`$&#123;apiUrl&#125;/</span>tasks<span class="string">`)</span></span><br><span class="line"><span class="string">[tuture-add]      .then((tasksResponse) =&gt; &#123;</span></span><br><span class="line"><span class="string">[tuture-add]        this.setState(&#123; tasks: tasksResponse.data &#125;);</span></span><br><span class="line"><span class="string">[tuture-add]      &#125;)</span></span><br><span class="line"><span class="string">[tuture-add]      .catch((error) =&gt; console.log(error));</span></span><br><span class="line"><span class="string">[tuture-add]  &#125;</span></span><br><span class="line"><span class="string">[tuture-add]</span></span><br><span class="line"><span class="string">[tuture-add]  render() &#123;</span></span><br><span class="line"><span class="string">[tuture-add]    return (</span></span><br><span class="line"><span class="string">[tuture-add]      &lt;ul&gt;</span></span><br><span class="line"><span class="string">[tuture-add]        &#123;this.state.tasks.map((task) =&gt; (</span></span><br><span class="line"><span class="string">[tuture-add]          &lt;Task key=&#123;task.id&#125; id=&#123;task.id&#125; name=&#123;task.name&#125; /&gt;</span></span><br><span class="line"><span class="string">[tuture-add]        ))&#125;</span></span><br><span class="line"><span class="string">[tuture-add]      &lt;/ul&gt;</span></span><br><span class="line"><span class="string">[tuture-add]    );</span></span><br><span class="line"><span class="string">[tuture-add]  &#125;</span></span><br><span class="line"><span class="string">[tuture-add]&#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">export default ToDoList;</span></span><br></pre></td></tr></table></figure><p><code>TodoList</code> 被改造成了一个“聪明组件”，在 <code>componentDidMount</code> 生命周期函数中通过 <code>axios</code> 模块异步获取数据。</p><h3 id="编写-axios-模块的-mock-文件"><a href="#编写-axios-模块的-mock-文件" class="headerlink" title="编写 axios 模块的 mock 文件"></a>编写 axios 模块的 mock 文件</h3><p>Jest 支持对整个模块进行 Mock，使得组件不会调用原始的模块，而是调用我们预设的 Mock 模块。按照官方推荐，我们创建 <strong>mocks</strong> 目录并把 mock 文件放到其中。创建 axios 的 Mock 文件 axios.js，代码如下：</p><figure class="highlight js"><figcaption><span>src/__mocks__/axios.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzhlMzAyZThiNDY1ZWNlZmZhOTM3ODk3Y2FmNmIyMWNkYWZjM2YyZDQvc3JjL19fbW9ja3NfXy9heGlvcy5qcw==" title="https://github.com/tuture-dev/javascript-test-series/blob/8e302e8b465eceffa937897caf6b21cdafc3f2d4/src/__mocks__/axios.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="meta">'use strict'</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="keyword">get</span>: () =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(&#123;</span><br><span class="line">      data: [</span><br><span class="line">        &#123;</span><br><span class="line">          id: <span class="number">0</span>,</span><br><span class="line">          name: <span class="string">'Wash the dishes'</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          id: <span class="number">1</span>,</span><br><span class="line">          name: <span class="string">'Make the bed'</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">      ],</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>这里的 axios 模块提供了一个 <code>get</code> 函数，并且会返回一个 Promise，包含预先设定的假数据。</p><h3 id="通过-spyOn-函数检查-Mock-模块调用情况"><a href="#通过-spyOn-函数检查-Mock-模块调用情况" class="headerlink" title="通过 spyOn 函数检查 Mock 模块调用情况"></a>通过 spyOn 函数检查 Mock 模块调用情况</h3><p>让我们开始 Mock 起来！打开 TodoList 的测试文件，首先在最前面通过 <code>jest.mock</code> 配置 axios 模块的 Mock（确保要在 <code>import TodoList</code> 之前），在 Mock 之后，无论在测试还是组件中使用的都将是 Mock 版本的 axios。然后创建一个测试用例，检查 Mock 模块是否被正确调用。代码如下：</p><figure class="highlight js"><figcaption><span>src/TodoList.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzhlMzAyZThiNDY1ZWNlZmZhOTM3ODk3Y2FmNmIyMWNkYWZjM2YyZDQvc3JjL1RvZG9MaXN0LnRlc3QuanM=" title="https://github.com/tuture-dev/javascript-test-series/blob/8e302e8b465eceffa937897caf6b21cdafc3f2d4/src/TodoList.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; shallow, mount &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]jest.mock(<span class="string">'axios'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> ToDoList <span class="keyword">from</span> <span class="string">'./ToDoList'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'ToDoList component'</span>, () =&gt; &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]  describe(<span class="string">'when rendered'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-add]    it(<span class="string">'should fetch a list of tasks'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> getSpy = jest.spyOn(axios, <span class="string">'get'</span>);</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> toDoListInstance = shallow(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> /&gt;</span></span>);</span><br><span class="line">[tuture-add]      expect(getSpy).toBeCalled();</span><br><span class="line">[tuture-add]    &#125;);</span><br><span class="line">[tuture-add]  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>测试模块中一个函数是否被调用实际上是比较困难的，但是所幸 Jest 为我们提供了完整的支持。首先通过 <code>jest.spyOn</code>，我们便可以监听一个函数的使用情况，然后使用配套的 <code>toBeCalled</code> Matcher 来判断该函数是否被调用。整体代码十分简洁，同时也保持了很好的可读性。</p><blockquote><p>如果你忘记了 Jest Matcher 的含义，推荐阅读本系列的第一篇教程。</p></blockquote><h2 id="迭代-TodoList-组件"><a href="#迭代-TodoList-组件" class="headerlink" title="迭代 TodoList 组件"></a>迭代 TodoList 组件</h2><p>一个实际的项目总会不断迭代，当然也包括我们的 TodoList 组件。对于一个待办事项应用来说，最重要的当然便是添加新的待办事项。</p><p>修改 TodoList 组件，代码如下：</p><figure class="highlight js"><figcaption><span>src/TodoList.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzk0MzgzMDk2OTMxYWRmZGEyMTVjOGQzODZhODMzOTkzZTg5MzIxMDUvc3JjL1RvZG9MaXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/94383096931adfda215c8d386a833993e8932105/src/TodoList.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">ToDoList</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  state = &#123;</span><br><span class="line">    tasks: [],</span><br><span class="line">[tuture-add]    newTask: <span class="string">''</span>,</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  componentDidMount() &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">      .catch(<span class="function">(<span class="params">error</span>) =&gt;</span> <span class="built_in">console</span>.log(error));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">[tuture-add]  addATask = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> &#123; newTask, tasks &#125; = <span class="keyword">this</span>.state;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (newTask) &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">return</span> axios</span><br><span class="line">[tuture-add]        .post(<span class="string">`<span class="subst">$&#123;apiUrl&#125;</span>/tasks`</span>, &#123; <span class="attr">task</span>: newTask &#125;)</span><br><span class="line">[tuture-add]        .then(<span class="function">(<span class="params">taskResponse</span>) =&gt;</span> &#123;</span><br><span class="line">[tuture-add]          <span class="keyword">const</span> newTasksArray = [...tasks];</span><br><span class="line">[tuture-add]          newTasksArray.push(taskResponse.data.task);</span><br><span class="line">[tuture-add]          <span class="keyword">this</span>.setState(&#123; <span class="attr">tasks</span>: newTasksArray, <span class="attr">newTask</span>: <span class="string">''</span> &#125;);</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line">[tuture-add]        .catch(<span class="function">(<span class="params">error</span>) =&gt;</span> <span class="built_in">console</span>.log(error));</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]  &#125;;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]  handleInputChange = <span class="function">(<span class="params">event</span>) =&gt;</span> &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">this</span>.setState(&#123; <span class="attr">newTask</span>: event.target.value &#125;);</span><br><span class="line">[tuture-add]  &#125;;</span><br><span class="line">[tuture-add]</span><br><span class="line">  render() &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> &#123; newTask &#125; = <span class="keyword">this</span>.state;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">[tuture-del]      &lt;ul&gt;</span><br><span class="line">[tuture-del]        &#123;<span class="keyword">this</span>.state.tasks.map(<span class="function">(<span class="params">task</span>) =&gt;</span> (</span><br><span class="line">[tuture-del]          &lt;Task key=&#123;task.id&#125; id=&#123;task.id&#125; name=&#123;task.name&#125; /&gt;</span><br><span class="line">[tuture-del]        ))&#125;</span><br><span class="line">[tuture-del]      &lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]      &lt;div&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]        &lt;h1&gt;ToDoList&lt;/</span>h1&gt;</span><br><span class="line">[tuture-add]        &lt;input onChange=&#123;<span class="keyword">this</span>.handleInputChange&#125; value=&#123;newTask&#125; /&gt;</span><br><span class="line">[tuture-add]        &lt;button onClick=&#123;<span class="keyword">this</span>.addATask&#125;&gt;Add a task&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]        &lt;ul&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]          &#123;this.state.tasks.map((task) =&gt; (</span></span><br><span class="line"><span class="regexp">[tuture-add]            &lt;Task key=&#123;task.id&#125; id=&#123;task.id&#125; name=&#123;task.name&#125; /</span>&gt;</span><br><span class="line">[tuture-add]          ))&#125;</span><br><span class="line">[tuture-add]        &lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]      &lt;/</span>div&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> ToDoList;</span><br></pre></td></tr></table></figure><p>由于我们大幅改动了 TodoList 组件，我们需要更新快照：</p><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm test -- -u</span><br></pre></td></tr></table></figure><blockquote><p>如果你不熟悉 Jest 快照测试，请回看本系列第二篇教程。</p></blockquote><p>更新后的快照文件反映了我们刚刚做的变化：</p><figure class="highlight plain"><figcaption><span>src/__snapshots__/TodoList.test.js.snap</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzk0MzgzMDk2OTMxYWRmZGEyMTVjOGQzODZhODMzOTkzZTg5MzIxMDUvc3JjL19fc25hcHNob3RzX18vVG9kb0xpc3QudGVzdC5qcy5zbmFw" title="https://github.com/tuture-dev/javascript-test-series/blob/94383096931adfda215c8d386a833993e8932105/src/__snapshots__/TodoList.test.js.snap">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; Jest Snapshot v1, https:&#x2F;&#x2F;goo.gl&#x2F;fbAQLP</span><br><span class="line"></span><br><span class="line">[tuture-del]exports[&#96;ToDoList component when provided with an array of tasks should render correctly 1&#96;] &#x3D; &#96;&lt;ul &#x2F;&gt;&#96;;</span><br><span class="line">[tuture-add]exports[&#96;ToDoList component when provided with an array of tasks should render correctly 1&#96;] &#x3D; &#96;</span><br><span class="line">[tuture-add]&lt;div&gt;</span><br><span class="line">[tuture-add]  &lt;h1&gt;</span><br><span class="line">[tuture-add]    ToDoList</span><br><span class="line">[tuture-add]  &lt;&#x2F;h1&gt;</span><br><span class="line">[tuture-add]  &lt;input</span><br><span class="line">[tuture-add]    onChange&#x3D;&#123;[Function]&#125;</span><br><span class="line">[tuture-add]    value&#x3D;&quot;&quot;</span><br><span class="line">[tuture-add]  &#x2F;&gt;</span><br><span class="line">[tuture-add]  &lt;button</span><br><span class="line">[tuture-add]    onClick&#x3D;&#123;[Function]&#125;</span><br><span class="line">[tuture-add]  &gt;</span><br><span class="line">[tuture-add]    Add a task</span><br><span class="line">[tuture-add]  &lt;&#x2F;button&gt;</span><br><span class="line">[tuture-add]  &lt;ul &#x2F;&gt;</span><br><span class="line">[tuture-add]&lt;&#x2F;div&gt;</span><br><span class="line">[tuture-add]&#96;;</span><br></pre></td></tr></table></figure><h2 id="在测试中模拟-React-组件的交互"><a href="#在测试中模拟-React-组件的交互" class="headerlink" title="在测试中模拟 React 组件的交互"></a>在测试中模拟 React 组件的交互</h2><p>在上面迭代的 TodoList 中，我们使用了 axios.post。 这意味着我们需要扩展 axios 的 mock 文件：</p><figure class="highlight js"><figcaption><span>src/__mocks__/axios.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzg5Y2JkNWFjOWM1NjgzNDAyMDQwNDg1MjhiNjI2MTg0ZDUwYTYzMDcvc3JjL19fbW9ja3NfXy9heGlvcy5qcw==" title="https://github.com/tuture-dev/javascript-test-series/blob/89cbd5ac9c568340204048528b626184d50a6307/src/__mocks__/axios.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="meta">'use strict'</span>;</span><br><span class="line"></span><br><span class="line">[tuture-add]<span class="keyword">let</span> currentId = <span class="number">2</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="keyword">get</span>: () =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(&#123;</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">      ],</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">[tuture-add]  post: <span class="function">(<span class="params">url, data</span>) =&gt;</span> &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(&#123;</span><br><span class="line">[tuture-add]      data: &#123;</span><br><span class="line">[tuture-add]        task: &#123;</span><br><span class="line">[tuture-add]          name: data.task,</span><br><span class="line">[tuture-add]          id: currentId++,</span><br><span class="line">[tuture-add]        &#125;,</span><br><span class="line">[tuture-add]      &#125;,</span><br><span class="line">[tuture-add]    &#125;);</span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><blockquote><p>可以看到上面，我们添加了一个 <code>currentId</code> 变量，因为我们需要保持每个 task 的唯一性。</p></blockquote><p>让我们开始测试吧！我们测试的第一件事是检查修改输入值是否更改了我们的状态：</p><p>我们修改 <code>app/components/TodoList.test.js</code> 如下：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; shallow &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line"><span class="keyword">import</span> ToDoList <span class="keyword">from</span> <span class="string">'./ToDoList'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'ToDoList component'</span>, () =&gt; &#123;</span><br><span class="line">  describe(<span class="string">'when the value of its input is changed'</span>, () =&gt; &#123;</span><br><span class="line">    it(<span class="string">'its state should be changed'</span>, () =&gt; &#123;</span><br><span class="line">      <span class="keyword">const</span> toDoListInstance = shallow(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> /&gt;</span></span>);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> newTask = <span class="string">'new task name'</span>;</span><br><span class="line">      <span class="keyword">const</span> taskInput = toDoListInstance.find(<span class="string">'input'</span>);</span><br><span class="line">      taskInput.simulate(<span class="string">'change'</span>, &#123; <span class="attr">target</span>: &#123; <span class="attr">value</span>: newTask &#125; &#125;);</span><br><span class="line"></span><br><span class="line">      expect(toDoListInstance.state().newTask).toEqual(newTask);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>这里要重点指出的就是 <span class="exturl" data-url="aHR0cHM6Ly9lbnp5bWVqcy5naXRodWIuaW8vZW56eW1lL2RvY3MvYXBpL1NoYWxsb3dXcmFwcGVyL3NpbXVsYXRlLmh0bWw=" title="https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/simulate.html">simulate<i class="fa fa-external-link"></i></span> 函数的调用。 这是我们几次提到的 ShallowWrapper 的功能。 我们用它来模拟事件。它第一个参数是事件的类型（由于我们在输入中使用 onChange，因此我们应该在此处使用 change），第二个参数是模拟事件对象（event）。</p><p>为了进一步说明问题，让我们测试一下用户单击按钮后是否从我们的组件发送了实际的 post 请求。我们修改测试代码如下：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; shallow &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line"><span class="keyword">import</span> ToDoList <span class="keyword">from</span> <span class="string">'./ToDoList'</span>;</span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span>;</span><br><span class="line"></span><br><span class="line">jest.mock(<span class="string">'axios'</span>);</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'ToDoList component'</span>, () =&gt; &#123;</span><br><span class="line">  describe(<span class="string">'when the button is clicked with the input filled out'</span>, () =&gt; &#123;</span><br><span class="line">    it(<span class="string">'a post request should be made'</span>, () =&gt; &#123;</span><br><span class="line">      <span class="keyword">const</span> toDoListInstance = shallow(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> /&gt;</span></span>);</span><br><span class="line">      <span class="keyword">const</span> postSpy = jest.spyOn(axios, <span class="string">'post'</span>);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> newTask = <span class="string">'new task name'</span>;</span><br><span class="line">      <span class="keyword">const</span> taskInput = toDoListInstance.find(<span class="string">'input'</span>);</span><br><span class="line">      taskInput.simulate(<span class="string">'change'</span>, &#123; <span class="attr">target</span>: &#123; <span class="attr">value</span>: newTask &#125; &#125;);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> button = toDoListInstance.find(<span class="string">'button'</span>);</span><br><span class="line">      button.simulate(<span class="string">'click'</span>);</span><br><span class="line"></span><br><span class="line">      expect(postSpy).toBeCalled();</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>感谢我们的 mock 和 simulate 事件，测试通过了！<br>现在事情会变得有些棘手。 我们将测试状态是否随着我们的新任务而更新，其中比较有趣的是请求是异步的，我们继续修改代码如下：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; shallow &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line"><span class="keyword">import</span> ToDoList <span class="keyword">from</span> <span class="string">'./ToDoList'</span>;</span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span>;</span><br><span class="line"></span><br><span class="line">jest.mock(<span class="string">'axios'</span>);</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'ToDoList component'</span>, () =&gt; &#123;</span><br><span class="line">  describe(<span class="string">'when the button is clicked with the input filled out, the new task should be added to the state'</span>, () =&gt; &#123;</span><br><span class="line">    it(<span class="string">'a post request should be made'</span>, () =&gt; &#123;</span><br><span class="line">      <span class="keyword">const</span> toDoListInstance = shallow(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> /&gt;</span></span>);</span><br><span class="line">      <span class="keyword">const</span> postSpy = jest.spyOn(axios, <span class="string">'post'</span>);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> newTask = <span class="string">'new task name'</span>;</span><br><span class="line">      <span class="keyword">const</span> taskInput = toDoListInstance.find(<span class="string">'input'</span>);</span><br><span class="line">      taskInput.simulate(<span class="string">'change'</span>, &#123; <span class="attr">target</span>: &#123; <span class="attr">value</span>: newTask &#125; &#125;);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> button = toDoListInstance.find(<span class="string">'button'</span>);</span><br><span class="line">      button.simulate(<span class="string">'click'</span>);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> postPromise = postSpy.mock.results.pop().value;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span> postPromise.then(<span class="function">(<span class="params">postResponse</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> currentState = toDoListInstance.state();</span><br><span class="line">        expect(currentState.tasks.includes(postResponse.data.task)).toBe(<span class="literal">true</span>);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>就像上面看到的，postSpy.mock.results 是 post 函数发送结果的数组，通过使用它，我们可以得到返回的 promise，我们可以从 <code>value</code> 属性中取到这个 promise。从测试返回 promise 是确保 Jest 等待其异步方法执行结束的一种方法。</p><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>在本文中，我们介绍了 mock 模块，并将其用于伪造 API 调用。 由于没有发起实际的 post 请求，我们的测试可以更可靠，更快。 除此之外，我们还在整个 React 组件中模拟了事件。 我们检查了它是否产生了预期的结果，例如组件的请求或状态变化。 为此，我们了解了 spy 的概念。</p><h2 id="尝试测试-React-Hooks"><a href="#尝试测试-React-Hooks" class="headerlink" title="尝试测试 React Hooks"></a>尝试测试 React Hooks</h2><p>Hooks 是 React 的一个令人兴奋的补充，毫无疑问，它可以帮助我们将逻辑与模板分离。 这样做使上述逻辑更具可测试性。 不幸的是，测试钩子并没有那么简单。 在本文中，我们研究了如何使用 <span class="exturl" data-url="aHR0cHM6Ly93YW5hZ28uaW8vMjAxOS8xMi8wOS9qYXZhc2NyaXB0LWRlc2lnbi1wYXR0ZXJucy1mYWNhZGUtcmVhY3QtaG9va3Mv" title="https://wanago.io/2019/12/09/javascript-design-patterns-facade-react-hooks/">react-hooks-testing-library<i class="fa fa-external-link"></i></span> 处理它。</p><p>我们创建 <code>src/useModalManagement.js</code> 文件如下：</p><figure class="highlight js"><figcaption><span>src/useModalManagement.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzMwNTQzNjg5YzNlM2FlY2ExZDcwYjQ4ZDEwYmU0NmM0MTc2ZmJhNzEvc3JjL3VzZU1vZGFsTWFuYWdlbWVudC5qcw==" title="https://github.com/tuture-dev/javascript-test-series/blob/30543689c3e3aeca1d70b48d10be46c4176fba71/src/useModalManagement.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useState &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">useModalManagement</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [isModalOpened, setModalVisibility] = useState(<span class="literal">false</span>);</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">openModal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    setModalVisibility(<span class="literal">true</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">closeModal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    setModalVisibility(<span class="literal">false</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    isModalOpened,</span><br><span class="line">    openModal,</span><br><span class="line">    closeModal,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> useModalManagement;</span><br></pre></td></tr></table></figure><p>上面的 Hooks 可以轻松地管理模式状态。 让我们开始测试它是否不会引发任何错误，我们创建 <code>useModalManagement.test.js</code></p><figure class="highlight js"><figcaption><span>src/useModalManagement.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzMwNTQzNjg5YzNlM2FlY2ExZDcwYjQ4ZDEwYmU0NmM0MTc2ZmJhNzEvc3JjL3VzZU1vZGFsTWFuYWdlbWVudC50ZXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/30543689c3e3aeca1d70b48d10be46c4176fba71/src/useModalManagement.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> useModalManagement <span class="keyword">from</span> <span class="string">'./useModalManagement'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'The useModalManagement hook'</span>, () =&gt; &#123;</span><br><span class="line">  it(<span class="string">'should not throw an error'</span>, () =&gt; &#123;</span><br><span class="line">    useModalManagement();</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>我们运行测试，得到如下的结果：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">FAIL useModalManagement.test.js</span><br><span class="line">  The useModalManagement hook</span><br><span class="line">    ✕ should not <span class="keyword">throw</span> an error按 ⌘+↩ 退出</span><br></pre></td></tr></table></figure><p>不幸的是，上述测试无法正常进行。 我们可以通过阅读错误消息找出原因：</p><blockquote><p>无效的 Hooks 调用， Hooks 只能在函数式组件的函数体内部调用。</p></blockquote><h2 id="让测试通过"><a href="#让测试通过" class="headerlink" title="让测试通过"></a>让测试通过</h2><p><span class="exturl" data-url="aHR0cHM6Ly9yZWFjdGpzLm9yZy9kb2NzL2hvb2tzLW92ZXJ2aWV3Lmh0bWw=" title="https://reactjs.org/docs/hooks-overview.html">React 文档<i class="fa fa-external-link"></i></span> 里面提到： 我们只能从函数式组件或其他 Hooks 中调用 Hooks。 我们可以使用本系列前面部分介绍的 enzyme 库来解决此问题，而且使了一点小聪明，我们创建 <code>testHook.js</code> ：</p><figure class="highlight js"><figcaption><span>src/testHook.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2FiNTQ0YmQ1M2QwNjk2M2FmNWFhN2VhOTI1OGNjOTIwMTJmZTBkOWQvc3JjL3Rlc3RIb29rLmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/ab544bd53d06963af5aa7ea9258cc92012fe0d9d/src/testHook.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; shallow &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">testHook</span>(<span class="params">hook</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> output;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">HookWrapper</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    output = hook();</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;&gt;</span><span class="tag">&lt;/&gt;</span></span>;</span><br><span class="line">  &#125;</span><br><span class="line">  shallow(<span class="xml"><span class="tag">&lt;<span class="name">HookWrapper</span> /&gt;</span></span>);</span><br><span class="line">  <span class="keyword">return</span> output;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> testHook;</span><br></pre></td></tr></table></figure><p>我们继续迭代 <code>useModalManagement.test.js</code>，修改内容如下：</p><figure class="highlight js"><figcaption><span>src/useModalManagement.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2FiNTQ0YmQ1M2QwNjk2M2FmNWFhN2VhOTI1OGNjOTIwMTJmZTBkOWQvc3JjL3VzZU1vZGFsTWFuYWdlbWVudC50ZXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/ab544bd53d06963af5aa7ea9258cc92012fe0d9d/src/useModalManagement.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> useModalManagement <span class="keyword">from</span> <span class="string">'./useModalManagement'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> testHook <span class="keyword">from</span> <span class="string">'./testHook'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'The useModalManagement hook'</span>, () =&gt; &#123;</span><br><span class="line">  it(<span class="string">'should not throw an error'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-del]    useModalManagement();</span><br><span class="line">[tuture-add]    testHook(useModalManagement);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>我们允许测试，得到如下结果：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">PASS useModalManagement.test.js</span><br><span class="line">  The useModalManagement hook</span><br><span class="line">    ✓ should not <span class="keyword">throw</span> an error</span><br></pre></td></tr></table></figure><p>好多了！ 但是，上述解决方案不是很好，并且不能为我们提供进一步测试 Hooks 的舒适方法。 这就是我们使用 <span class="exturl" data-url="aHR0cHM6Ly93YW5hZ28uaW8vMjAxOS8xMi8wOS9qYXZhc2NyaXB0LWRlc2lnbi1wYXR0ZXJucy1mYWNhZGUtcmVhY3QtaG9va3Mv" title="https://wanago.io/2019/12/09/javascript-design-patterns-facade-react-hooks/">react-hooks-testing-library<i class="fa fa-external-link"></i></span> 的原因，我们将在下一篇教程里讲解如何更加舒适的测试 React Hooks 的方法，敬请期待！</p><h2 id="开始使用-react-hooks-testing-library"><a href="#开始使用-react-hooks-testing-library" class="headerlink" title="开始使用 react-hooks-testing-library"></a>开始使用 react-hooks-testing-library</h2><figure class="highlight"><figcaption><span>package.json</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzRiYWUzM2ZlMGYxNjNkMWZlZDU2MGIxZWQzMmUyNjkyNTNjNDA5N2IvcGFja2FnZS5qc29u" title="https://github.com/tuture-dev/javascript-test-series/blob/4bae33fe0f163d1fed560b1ed32e269253c4097b/package.json">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">  "dependencies": &#123;</span><br><span class="line">    "@testing-library/jest-dom": "^4.2.4",</span><br><span class="line">    "@testing-library/react": "^9.5.0",</span><br><span class="line">[tuture-add]    "@testing-library/react-hooks": "^3.4.1",</span><br><span class="line">    "@testing-library/user-event": "^7.2.1",</span><br><span class="line">    "axios": "^0.20.0",</span><br><span class="line">    "enzyme": "^3.11.0",</span><br><span class="line">    "enzyme-adapter-react-16": "^1.15.3",</span><br><span class="line">    "jest-enzyme": "^7.1.2",</span><br><span class="line">    "react": "^16.13.1",</span><br><span class="line">    "react-dom": "^16.13.1",</span><br><span class="line">    "react-scripts": "3.4.3"</span><br><span class="line">  &#125;,</span><br><span class="line">  "scripts": &#123;</span><br><span class="line">    "start": "react-scripts start",</span><br><span class="line">    "build": "react-scripts build",</span><br><span class="line">    "test": "react-scripts test",</span><br><span class="line">    "eject": "react-scripts eject"</span><br><span class="line">  &#125;,</span><br><span class="line">  "eslintConfig": &#123;</span><br><span class="line">    "extends": "react-app"</span><br><span class="line">  &#125;,</span><br><span class="line">  "browserslist": &#123;</span><br><span class="line">    "production": [</span><br><span class="line">      "&gt;0.2%",</span><br><span class="line">      "not dead",</span><br><span class="line">      <span class="string">"not op_mini all"</span></span><br><span class="line">    ],</span><br><span class="line">    "development": [</span><br><span class="line">      "last 1 chrome version",</span><br><span class="line">      "last 1 firefox version",</span><br><span class="line">      <span class="string">"last 1 safari version"</span></span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><figcaption><span>src/useModalManagement.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzRiYWUzM2ZlMGYxNjNkMWZlZDU2MGIxZWQzMmUyNjkyNTNjNDA5N2Ivc3JjL3VzZU1vZGFsTWFuYWdlbWVudC50ZXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/4bae33fe0f163d1fed560b1ed32e269253c4097b/src/useModalManagement.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> useModalManagement <span class="keyword">from</span> <span class="string">'./useModalManagement'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> testHook <span class="keyword">from</span> <span class="string">'./testHook'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; renderHook, act &#125; <span class="keyword">from</span> <span class="string">'@testing-library/react-hooks'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'The useModalManagement hook'</span>, () =&gt; &#123;</span><br><span class="line">  it(<span class="string">'should not throw an error'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-del]    testHook(useModalManagement);</span><br><span class="line">[tuture-add]    renderHook(<span class="function"><span class="params">()</span> =&gt;</span> useModalManagement());</span><br><span class="line">[tuture-add]  &#125;);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]  it(<span class="string">'should describe a closed modal by default'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> &#123; result &#125; = renderHook(<span class="function"><span class="params">()</span> =&gt;</span> useModalManagement());</span><br><span class="line">[tuture-add]    expect(result.current.isModalOpened).toBe(<span class="literal">false</span>);</span><br><span class="line">[tuture-add]  &#125;);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]  describe(<span class="string">'when the openModal function is called'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-add]    it(<span class="string">'should describe an opened modal'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> &#123; result &#125; = renderHook(<span class="function"><span class="params">()</span> =&gt;</span> useModalManagement());</span><br><span class="line">[tuture-add]      act(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">[tuture-add]        result.current.openModal();</span><br><span class="line">[tuture-add]      &#125;);</span><br><span class="line">[tuture-add]      expect(result.current.isModalOpened).toBe(<span class="literal">true</span>);</span><br><span class="line">[tuture-add]    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h2 id="测试异步钩子"><a href="#测试异步钩子" class="headerlink" title="测试异步钩子"></a>测试异步钩子</h2><figure class="highlight js"><figcaption><span>src/useCommentsManagement.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2Y0ZjFmNTk3Y2Y2MGRjZGQxMjdlOTYyOGFhMTEyYTA0MWIxY2RlNDMvc3JjL3VzZUNvbW1lbnRzTWFuYWdlbWVudC5qcw==" title="https://github.com/tuture-dev/javascript-test-series/blob/f4f1f597cf60dcdd127e9628aa112a041b1cde43/src/useCommentsManagement.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useState &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">useCommentsManagement</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [comments, setComments] = useState([]);</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">fetchComments</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fetch(<span class="string">'https://jsonplaceholder.typicode.com/comments'</span>)</span><br><span class="line">      .then(<span class="function">(<span class="params">response</span>) =&gt;</span> response.json())</span><br><span class="line">      .then(<span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">        setComments(data);</span><br><span class="line">      &#125;);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    comments,</span><br><span class="line">    fetchComments,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> useCommentsManagement;</span><br></pre></td></tr></table></figure><figure class="highlight js"><figcaption><span>src/useCommentsManagement.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2Y0ZjFmNTk3Y2Y2MGRjZGQxMjdlOTYyOGFhMTEyYTA0MWIxY2RlNDMvc3JjL3VzZUNvbW1lbnRzTWFuYWdlbWVudC50ZXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/f4f1f597cf60dcdd127e9628aa112a041b1cde43/src/useCommentsManagement.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; renderHook, act &#125; <span class="keyword">from</span> <span class="string">'@testing-library/react-hooks'</span>;</span><br><span class="line"><span class="keyword">import</span> useCommentsManagement <span class="keyword">from</span> <span class="string">'./useCommentsManagement'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'The useCommentsManagement hook'</span>, () =&gt; &#123;</span><br><span class="line">  describe(<span class="string">'when the fetchComments function is called'</span>, () =&gt; &#123;</span><br><span class="line">    it(<span class="string">'should update the state after a successful request'</span>, <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">      <span class="keyword">const</span> &#123; result, waitForNextUpdate &#125; = renderHook(<span class="function"><span class="params">()</span> =&gt;</span></span><br><span class="line">        useCommentsManagement(),</span><br><span class="line">      );</span><br><span class="line"></span><br><span class="line">      act(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">        result.current.fetchComments();</span><br><span class="line">      &#125;);</span><br><span class="line">      <span class="keyword">await</span> waitForNextUpdate();</span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span> expect(result.current.comments.length).not.toBe(<span class="number">0</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h2 id="测试-Redux-Hooks"><a href="#测试-Redux-Hooks" class="headerlink" title="测试 Redux + Hooks"></a>测试 Redux + Hooks</h2><figure class="highlight"><figcaption><span>package.json</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2U3MWE1MGUwOWYwMzRlMjhhNDI2YWIxY2JjZDEzN2Y2YzFjYzkyNGUvcGFja2FnZS5qc29u" title="https://github.com/tuture-dev/javascript-test-series/blob/e71a50e09f034e28a426ab1cbcd137f6c1cc924e/package.json">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">    "jest-enzyme": "^7.1.2",</span><br><span class="line">    "react": "^16.13.1",</span><br><span class="line">    "react-dom": "^16.13.1",</span><br><span class="line">[tuture-del]    "react-scripts": "3.4.3"</span><br><span class="line">[tuture-add]    "react-redux": "^7.2.1",</span><br><span class="line">[tuture-add]    "react-scripts": "3.4.3",</span><br><span class="line">[tuture-add]    "redux": "^4.0.5"</span><br><span class="line">  &#125;,</span><br><span class="line">  "scripts": &#123;</span><br><span class="line">    "start": "react-scripts start",</span><br><span class="line">    "build": "react-scripts build",</span><br><span class="line">    "test": "react-scripts test",</span><br><span class="line">    "eject": "react-scripts eject"</span><br><span class="line">  &#125;,</span><br><span class="line">  "eslintConfig": &#123;</span><br><span class="line">    "extends": "react-app"</span><br><span class="line">  &#125;,</span><br><span class="line">  "browserslist": &#123;</span><br><span class="line">    "production": [</span><br><span class="line">      "&gt;0.2%",</span><br><span class="line">      "not dead",</span><br><span class="line">      <span class="string">"not op_mini all"</span></span><br><span class="line">    ],</span><br><span class="line">    "development": [</span><br><span class="line">      "last 1 chrome version",</span><br><span class="line">      "last 1 firefox version",</span><br><span class="line">      <span class="string">"last 1 safari version"</span></span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><figcaption><span>src/actions/modal.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2U3MWE1MGUwOWYwMzRlMjhhNDI2YWIxY2JjZDEzN2Y2YzFjYzkyNGUvc3JjL2FjdGlvbnMvbW9kYWwuanM=" title="https://github.com/tuture-dev/javascript-test-series/blob/e71a50e09f034e28a426ab1cbcd137f6c1cc924e/src/actions/modal.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> OPEN_MODAL = <span class="string">'OPEN_MODAL'</span>;</span><br><span class="line"><span class="keyword">const</span> CLOSE_MODAL = <span class="string">'CLOSE_MODAL'</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">openModal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    type: OPEN_MODAL,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">closeModal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    type: CLOSE_MODAL,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123; OPEN_MODAL, CLOSE_MODAL, openModal, closeModal &#125;;</span><br></pre></td></tr></table></figure><figure class="highlight js"><figcaption><span>src/reducers/index.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2U3MWE1MGUwOWYwMzRlMjhhNDI2YWIxY2JjZDEzN2Y2YzFjYzkyNGUvc3JjL3JlZHVjZXJzL2luZGV4Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/e71a50e09f034e28a426ab1cbcd137f6c1cc924e/src/reducers/index.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; combineReducers &#125; <span class="keyword">from</span> <span class="string">'redux'</span>;</span><br><span class="line"><span class="keyword">import</span> modal <span class="keyword">from</span> <span class="string">'./modal'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> rootReducer = combineReducers(&#123; modal &#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> rootReducer;</span><br></pre></td></tr></table></figure><figure class="highlight js"><figcaption><span>src/reducers/modal.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2U3MWE1MGUwOWYwMzRlMjhhNDI2YWIxY2JjZDEzN2Y2YzFjYzkyNGUvc3JjL3JlZHVjZXJzL21vZGFsLmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/e71a50e09f034e28a426ab1cbcd137f6c1cc924e/src/reducers/modal.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; OPEN_MODAL, CLOSE_MODAL &#125; <span class="keyword">from</span> <span class="string">'../actions/modal'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> initialState = &#123;</span><br><span class="line">  isOpened: <span class="literal">false</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">modal</span>(<span class="params">state = initialState, action</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (action.type == OPEN_MODAL) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123; <span class="attr">isOpened</span>: <span class="literal">true</span> &#125;;</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (action.type == CLOSE_MODAL) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123; <span class="attr">isOpened</span>: <span class="literal">false</span> &#125;;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> state;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><figcaption><span>src/store.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2U3MWE1MGUwOWYwMzRlMjhhNDI2YWIxY2JjZDEzN2Y2YzFjYzkyNGUvc3JjL3N0b3JlLmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/e71a50e09f034e28a426ab1cbcd137f6c1cc924e/src/store.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createStore &#125; <span class="keyword">from</span> <span class="string">'redux'</span>;</span><br><span class="line"><span class="keyword">import</span> rootReducer <span class="keyword">from</span> <span class="string">'./reducers'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = createStore(rootReducer);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store;</span><br></pre></td></tr></table></figure><figure class="highlight js"><figcaption><span>src/useModalManagement.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2U3MWE1MGUwOWYwMzRlMjhhNDI2YWIxY2JjZDEzN2Y2YzFjYzkyNGUvc3JjL3VzZU1vZGFsTWFuYWdlbWVudC5qcw==" title="https://github.com/tuture-dev/javascript-test-series/blob/e71a50e09f034e28a426ab1cbcd137f6c1cc924e/src/useModalManagement.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> &#123; useState &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; useDispatch, useSelector &#125; <span class="keyword">from</span> <span class="string">'react-redux'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> * <span class="keyword">as</span> modalActions <span class="keyword">from</span> <span class="string">'./actions/modal'</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">useModalManagement</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> [isModalOpened, setModalVisibility] = useState(<span class="literal">false</span>);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> isModalOpened = useSelector(<span class="function">(<span class="params">state</span>) =&gt;</span> state.modal.isOpened);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> dispatch = useDispatch();</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">openModal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-del]    setModalVisibility(<span class="literal">true</span>);</span><br><span class="line">[tuture-add]    dispatch(modalActions.openModal());</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">closeModal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-del]    setModalVisibility(<span class="literal">false</span>);</span><br><span class="line">[tuture-add]    dispatch(modalActions.closeModal());</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    isModalOpened,</span><br><span class="line">    openModal,</span><br><span class="line">    closeModal,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> useModalManagement;</span><br></pre></td></tr></table></figure><figure class="highlight js"><figcaption><span>src/useModalManagement.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iL2U3MWE1MGUwOWYwMzRlMjhhNDI2YWIxY2JjZDEzN2Y2YzFjYzkyNGUvc3JjL3VzZU1vZGFsTWFuYWdlbWVudC50ZXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/e71a50e09f034e28a426ab1cbcd137f6c1cc924e/src/useModalManagement.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-add]<span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> useModalManagement <span class="keyword">from</span> <span class="string">'./useModalManagement'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; renderHook, act &#125; <span class="keyword">from</span> <span class="string">'@testing-library/react-hooks'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; Provider &#125; <span class="keyword">from</span> <span class="string">'react-redux'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">'./store'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'The useModalManagement hook'</span>, () =&gt; &#123;</span><br><span class="line">  it(<span class="string">'should not throw an error'</span>, () =&gt; &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  it(<span class="string">'should describe a closed modal by default'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-del]    <span class="keyword">const</span> &#123; result &#125; = renderHook(<span class="function"><span class="params">()</span> =&gt;</span> useModalManagement());</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> &#123; result &#125; = renderHook(<span class="function"><span class="params">()</span> =&gt;</span> useModalManagement(), &#123;</span><br><span class="line">[tuture-add]      wrapper: <span class="function">(<span class="params">&#123; children &#125;</span>) =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">Provider</span> <span class="attr">store</span>=<span class="string">&#123;store&#125;</span>&gt;</span>&#123;children&#125;<span class="tag">&lt;/<span class="name">Provider</span>&gt;</span></span>,</span><br><span class="line">[tuture-add]    &#125;);</span><br><span class="line">    expect(result.current.isModalOpened).toBe(<span class="literal">false</span>);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  describe(<span class="string">'when the openModal function is called'</span>, () =&gt; &#123;</span><br><span class="line">    it(<span class="string">'should describe an opened modal'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-del]      <span class="keyword">const</span> &#123; result &#125; = renderHook(<span class="function"><span class="params">()</span> =&gt;</span> useModalManagement());</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> &#123; result &#125; = renderHook(<span class="function"><span class="params">()</span> =&gt;</span> useModalManagement(), &#123;</span><br><span class="line">[tuture-add]        wrapper: <span class="function">(<span class="params">&#123; children &#125;</span>) =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">Provider</span> <span class="attr">store</span>=<span class="string">&#123;store&#125;</span>&gt;</span>&#123;children&#125;<span class="tag">&lt;/<span class="name">Provider</span>&gt;</span></span>,</span><br><span class="line">[tuture-add]      &#125;);</span><br><span class="line">      act(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">        result.current.openModal();</span><br><span class="line">      &#125;);</span><br><span class="line">      expect(result.current.isModalOpened).toBe(<span class="literal">true</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>]]></content>
    
    <summary type="html">
    
      在之前的两篇教程中，我们学会了如何去测试最简单的 React 组件。在实际开发中，我们的组件经常需要从外部 API 获取数据，并且组件的交互逻辑也往往更复杂。在这篇教程中，我们将学习如何测试更复杂的组件，包括用 Mock 去编写涉及外部 API 的测试，以及通过 Enzyme 来轻松模拟组件交互
    
    </summary>
    
    
      <category term="前端" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="React" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="React" scheme="https://tuture.co/tags/React/"/>
    
      <category term="Jest" scheme="https://tuture.co/tags/Jest/"/>
    
      <category term="Enzyme" scheme="https://tuture.co/tags/Enzyme/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript 测试系列实战（二）：深层渲染和快照测试</title>
    <link href="https://tuture.co/2020/08/27/387f95a/"/>
    <id>https://tuture.co/2020/08/27/387f95a/</id>
    <published>2020-08-26T17:29:43.320Z</published>
    <updated>2021-07-11T07:16:34.088Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><img alt class="avatar" data-src="/images/avatars/tuture-dev.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><p class="nickName">@tuture-dev</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcw==" title="https://github.com/tuture-dev/javascript-test-series"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="测试组件的-Props"><a href="#测试组件的-Props" class="headerlink" title="测试组件的 Props"></a>测试组件的 Props</h2><p>在前一篇文章中，我们已经测试了传递 Props 给组件的情况。但实际上，我们可以直接测试 Props。让我们回到之前写的 ToDoList 组件，但是这次我们使用一个 Task 组件。</p><p>Task 组件的代码如下：</p><figure class="highlight js"><figcaption><span>src/Task.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzg1ZDVkNTllZTk3ZDVjMjQ1NDYzMjJkNWI0MGE1NTc3OTM3YWEzOTAvc3JjL1Rhc2suanM=" title="https://github.com/tuture-dev/javascript-test-series/blob/85d5d59ee97d5c24546322d5b40a5577937aa390/src/Task.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Task = <span class="function">(<span class="params">props</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>&#123;props.name&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Task;</span><br></pre></td></tr></table></figure><p>修改后的 TodoList 组件代码如下：</p><figure class="highlight js"><figcaption><span>src/TodoList.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzg1ZDVkNTllZTk3ZDVjMjQ1NDYzMjJkNWI0MGE1NTc3OTM3YWEzOTAvc3JjL1RvZG9MaXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/85d5d59ee97d5c24546322d5b40a5577937aa390/src/TodoList.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Task <span class="keyword">from</span> <span class="string">'./Task'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> ToDoList = <span class="function">(<span class="params">props</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">[tuture-del]      &#123;props.tasks.map(<span class="function">(<span class="params">taskName, index</span>) =&gt;</span> (</span><br><span class="line">[tuture-del]        &lt;li key=&#123;index&#125;&gt;&#123;taskName&#125;&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]      &#123;props.tasks.map((task) =&gt; (</span></span><br><span class="line"><span class="regexp">[tuture-add]        &lt;Task key=&#123;task.id&#125; id=&#123;task.id&#125; name=&#123;task.name&#125; /</span>&gt;</span><br><span class="line">      ))&#125;</span><br><span class="line">    &lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default ToDoList;</span></span><br></pre></td></tr></table></figure><p>然后我们来测试 ToDoList 组件是否能够渲染 Task 组件并传递正确的 Props：</p><figure class="highlight js"><figcaption><span>src/TodoList.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzg1ZDVkNTllZTk3ZDVjMjQ1NDYzMjJkNWI0MGE1NTc3OTM3YWEzOTAvc3JjL1RvZG9MaXN0LnRlc3QuanM=" title="https://github.com/tuture-dev/javascript-test-series/blob/85d5d59ee97d5c24546322d5b40a5577937aa390/src/TodoList.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">describe(<span class="string">'ToDoList component'</span>, () =&gt; &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">  describe(<span class="string">'when provided with an array of tasks'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-del]    it(<span class="string">'contains a matching number of &lt;li&gt; elements'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-del]      <span class="keyword">const</span> tasks = [<span class="string">'Wash the dishes'</span>, <span class="string">'Make the bed'</span>];</span><br><span class="line">[tuture-del]      <span class="keyword">const</span> toDoList = shallow(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> <span class="attr">tasks</span>=<span class="string">&#123;tasks&#125;</span> /&gt;</span></span>);</span><br><span class="line">[tuture-del]      expect(toDoList.find(<span class="string">'li'</span>).length).toEqual(tasks.length);</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> tasks = [</span><br><span class="line">[tuture-add]      &#123;</span><br><span class="line">[tuture-add]        id: <span class="number">0</span>,</span><br><span class="line">[tuture-add]        name: <span class="string">'Wash the dishes'</span>,</span><br><span class="line">[tuture-add]      &#125;,</span><br><span class="line">[tuture-add]      &#123;</span><br><span class="line">[tuture-add]        id: <span class="number">1</span>,</span><br><span class="line">[tuture-add]        name: <span class="string">'Make the bed'</span>,</span><br><span class="line">[tuture-add]      &#125;,</span><br><span class="line">[tuture-add]    ];</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    it(<span class="string">'passes them to the Task components'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> toDoListInstance = shallow(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> <span class="attr">tasks</span>=<span class="string">&#123;tasks&#125;</span> /&gt;</span></span>);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      toDoListInstance.find(<span class="string">'Task'</span>).forEach(<span class="function">(<span class="params">taskInstance</span>) =&gt;</span> &#123;</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> taskProps = taskInstance.props();</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> matchingTask = tasks.find(<span class="function">(<span class="params">task</span>) =&gt;</span> task.id === taskProps.id);</span><br><span class="line">[tuture-add]        expect(taskProps.name).toBe(matchingTask.name);</span><br><span class="line">[tuture-add]      &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>通过上面的测试代码，我们可以确定 Task 组件从 ToDoList 收到了正确的 Props。由于 <code>toDoListInstance</code>  和 <code>taskInstance</code>  都是继承自 Enzyme 浅包装器 <code>ShallowWrapper</code>，因此可以调用 <code>props</code> 方法来获取一个组件传入的 Props。不仅如此，我们还可以检查组件状态，甚至更改状态。想要查看可用函数的完整列表，可以浏览 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FpcmJuYi9lbnp5bWUvYmxvYi9tYXN0ZXIvZG9jcy9hcGkvc2hhbGxvdy5tZA==" title="https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md">Enzyme 文档<i class="fa fa-external-link"></i></span>。</p><h2 id="通过-mount-进行完全渲染测试"><a href="#通过-mount-进行完全渲染测试" class="headerlink" title="通过 mount 进行完全渲染测试"></a>通过 mount 进行完全渲染测试</h2><p>但是，如果我们想测试 Task 组件中 <code>li</code>  标签的实际内容呢？也许我们可以像下面这样写：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">toDoListInstance.find(<span class="string">'Task'</span>).forEach(<span class="function"><span class="params">taskInstance</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> taskProps = taskInstance.props();</span><br><span class="line">  <span class="keyword">const</span> matchingTask = tasks.find(<span class="function"><span class="params">task</span> =&gt;</span> task.id === taskProps.id);</span><br><span class="line">  <span class="keyword">const</span> listItem = taskInstance.first(<span class="string">'li'</span>);</span><br><span class="line">  expect(listItem.text()).toBe(matchingTask.name);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如果运行测试，我们会遇到一个错误:</p><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">FAIL app&#x2F;components&#x2F;ToDoList&#x2F;ToDoList.test.js</span><br><span class="line"></span><br><span class="line"> ● ToDoList component › when provided with array of tasks › passes them to the Task components</span><br><span class="line"></span><br><span class="line">  expect(received).toBe(expected) &#x2F;&#x2F; Object.is equality</span><br><span class="line"></span><br><span class="line">  Expected: &quot;Wash the dishes&quot;</span><br><span class="line">  Received: &quot;&lt;Task &#x2F;&gt;&quot;</span><br><span class="line"></span><br><span class="line">   23 |     const matchingTask &#x3D; tasks.find(task &#x3D;&gt; task.id &#x3D;&#x3D;&#x3D; taskProps.id);</span><br><span class="line">   24 |     const listItem &#x3D; taskInstance.first(&#39;li&#39;);</span><br><span class="line">  \&gt; 25 |     expect(listItem.text()).toBe(matchingTask.name);</span><br><span class="line">​     |                 ^</span><br><span class="line">   26 |    &#125;)</span><br><span class="line">   27 |   &#125;)</span><br><span class="line">   28 |  &#125;);</span><br></pre></td></tr></table></figure><p>这里之所以失败，是因为浅层渲染 shallow 的局限性：子组件 Task 将根本不会渲染，因此就无法判断是否渲染出正确的内容。</p><p>针对浅层渲染的局限性，Enzyme 提供了完全渲染函数 <code>mount</code>。修改 TodoList 测试文件，代码如下：</p><figure class="highlight js"><figcaption><span>src/TodoList.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzA0NGU2MDNjMDE1N2YyM2U4MTQwYmEzM2VmOTY3MTQyOGZmNjZmZGQvc3JjL1RvZG9MaXN0LnRlc3QuanM=" title="https://github.com/tuture-dev/javascript-test-series/blob/044e603c0157f23e8140ba33ef9671428ff66fdd/src/TodoList.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; shallow &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; shallow, mount &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> ToDoList <span class="keyword">from</span> <span class="string">'./ToDoList'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'ToDoList component'</span>, () =&gt; &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    it(<span class="string">'contains a matching number of &lt;li&gt; elements'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> toDoListInstance = mount(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> <span class="attr">tasks</span>=<span class="string">&#123;tasks&#125;</span> /&gt;</span></span>);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      toDoListInstance.find(<span class="string">'Task'</span>).forEach(<span class="function">(<span class="params">taskInstance</span>) =&gt;</span> &#123;</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> taskProps = taskInstance.props();</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> matchingTask = tasks.find(<span class="function">(<span class="params">task</span>) =&gt;</span> task.id === taskProps.id);</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> listItem = taskInstance.first(<span class="string">'li'</span>);</span><br><span class="line">[tuture-add]        expect(listItem.text()).toBe(matchingTask.name);</span><br><span class="line">[tuture-add]      &#125;);</span><br><span class="line">[tuture-add]    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>上面的代码会将完整的 ToDoList 和它所有子组件一起渲染。因此，之前失败的测试现在就会通过。</p><p>由于 <code>mount</code>  函数会模拟实际的 DOM，渲染成本更高，因此运行测试会花费更多的时间。通常我们会在集成测试中使用 <code>mount</code>  函数，测试组件之间如何协同工作，而不仅仅是作为独立的单元。</p><blockquote><p>如果你不了解单元测试和集成测试这两个术语，可以看下本系列第一篇教程。</p></blockquote><p>在测试与 DOM 的交互或者在处理高阶组件时，mount 函数也可以派上用场。<em>Mount 使用 DOM 实现的模拟，Jest 默认使用的是 jsdom。我们可以通过调整 **<code>testEnvironment</code></em> <em>属性更改。</em></p><h2 id="尝鲜-Jest-Snapshot-测试"><a href="#尝鲜-Jest-Snapshot-测试" class="headerlink" title="尝鲜 Jest Snapshot 测试"></a>尝鲜 Jest Snapshot 测试</h2><p>快照测试是 Jest 的一大招牌功能。所谓快照，可以简单地理解成是我们应用的一个<strong>“代码截图”</strong>。当我们运行快照测试时，Jest 将会渲染组件并创建其快照文件。这个快照文件包含渲染后组件的整个结构，并且应该与测试文件本身一起提交到代码库。当我们再次运行快照测试时，Jest 会将新的快照与旧的快照进行比较，如果两者不一致，测试就会失败，从而帮助我们确保用户界面不会发生意外改变。</p><p>在 TodoList 的测试代码中添加快照测试：</p><figure class="highlight js"><figcaption><span>src/TodoList.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzkwZjUwZTRiYzg1NDI1ZGRhNzFmYzkwZTBiOGVlODU2Zjg0ZTYwMTIvc3JjL1RvZG9MaXN0LnRlc3QuanM=" title="https://github.com/tuture-dev/javascript-test-series/blob/90f50e4bc85425dda71fc90e0b8ee856f84e6012/src/TodoList.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">describe(<span class="string">'ToDoList component'</span>, () =&gt; &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">  describe(<span class="string">'when provided with an array of tasks'</span>, () =&gt; &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    it(<span class="string">'should render correctly'</span>, () =&gt; &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> toDoListInstance = shallow(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> <span class="attr">tasks</span>=<span class="string">&#123;tasks&#125;</span> /&gt;</span></span>);</span><br><span class="line">[tuture-add]      expect(toDoListInstance).toMatchSnapshot();</span><br><span class="line">[tuture-add]    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>运行上面的代码后，就会产生 ToDoList.test.js.snap 文件，它的内容如下：</p><figure class="highlight plain"><figcaption><span>src/__snapshots__/TodoList.test.js.snap</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzkwZjUwZTRiYzg1NDI1ZGRhNzFmYzkwZTBiOGVlODU2Zjg0ZTYwMTIvc3JjL19fc25hcHNob3RzX18vVG9kb0xpc3QudGVzdC5qcy5zbmFw" title="https://github.com/tuture-dev/javascript-test-series/blob/90f50e4bc85425dda71fc90e0b8ee856f84e6012/src/__snapshots__/TodoList.test.js.snap">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; Jest Snapshot v1, https:&#x2F;&#x2F;goo.gl&#x2F;fbAQLP</span><br><span class="line"></span><br><span class="line">exports[&#96;ToDoList component when provided with an array of tasks should render correctly 1&#96;] &#x3D; &#96;</span><br><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;Task</span><br><span class="line">    id&#x3D;&#123;0&#125;</span><br><span class="line">    key&#x3D;&quot;0&quot;</span><br><span class="line">    name&#x3D;&quot;Wash the dishes&quot;</span><br><span class="line">  &#x2F;&gt;</span><br><span class="line">  &lt;Task</span><br><span class="line">    id&#x3D;&#123;1&#125;</span><br><span class="line">    key&#x3D;&quot;1&quot;</span><br><span class="line">    name&#x3D;&quot;Make the bed&quot;</span><br><span class="line">  &#x2F;&gt;</span><br><span class="line">&lt;&#x2F;ul&gt;</span><br><span class="line">&#96;;</span><br></pre></td></tr></table></figure><p>如果我们要对 ToDoList 组件进行任何更改，快照测试就会失败，并且显示当前渲染结果与快照之间的精确差异。如果我们要更新所有失败的快照，可以使用 <code>-u</code>  标志(别名为 <code>--updateSnapshot</code>) 来运行 Jest。输入以下命令，一键更新所有快照：</p><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm test -- -u</span><br></pre></td></tr></table></figure><p>实际上，目前 CRA 默认会在监听模式下运行 Jest，我们可以一个个更新冲突的快照。首先运行 <code>npm test</code> ，然后输入 <code>i</code>  以交互方式更新失败的快照。官方的 Jest 文档提供了一个动画来展示这个过程：</p><p><img alt data-src="https://static.powerformer.com/c/f40c6ff/interactiveSnapshotUpdate.gif"></p><div class="note info">            <p><strong>提示</strong></p><p>如果你的 CRA 版本比较老，可以通过 <code>npm test -- --watchAll</code> 来进入 Jest 监听模式。</p>          </div><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>在本文中，我们介绍了如何直接去测试组件的 Props，并学习了 mount 函数和浅层渲染之间的区别。除此之外，我们还介绍了 Jest 快照测试，这是一个非常强大的工具，可以追踪组件渲染方式的变化。在接下来的文章中，我们还将介绍测试中常见的 Mock 技巧——与组件的模拟交互，不见不散！</p>]]></content>
    
    <summary type="html">
    
      在上一篇教程中，我们已经介绍了使用 Enzyme 测试 React 组件的基本知识。今天，我们将更深入地挖掘并学习如何测试组件的 Props，如何（以及为什么）使用 mount 函数，以及什么是 Jest 快照测试。
    
    </summary>
    
    
      <category term="前端" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="React" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="React" scheme="https://tuture.co/tags/React/"/>
    
      <category term="Jest" scheme="https://tuture.co/tags/Jest/"/>
    
      <category term="Enzyme" scheme="https://tuture.co/tags/Enzyme/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件</title>
    <link href="https://tuture.co/2020/08/20/5e1396b/"/>
    <id>https://tuture.co/2020/08/20/5e1396b/</id>
    <published>2020-08-20T04:04:01.397Z</published>
    <updated>2021-07-11T07:16:34.125Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><img alt class="avatar" data-src="/images/avatars/tuture-dev.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><p class="nickName">@tuture-dev</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcw==" title="https://github.com/tuture-dev/javascript-test-series"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="初识-Jest-单元测试"><a href="#初识-Jest-单元测试" class="headerlink" title="初识 Jest 单元测试"></a>初识 Jest 单元测试</h2><p>测试是检查代码的代码，能够大大增强我们对应用的信心。更重要的是，测试会阻止你在修复一件事情的同时破坏另一件事情，让我们能够放开手脚进行功能的添加与大规模重构。您可以测试应用程序的许多方面，从单个函数及其返回值到在浏览器中运行的复杂应用程序。万丈高楼平地起，让我们先来了解一下有哪些测试。</p><h3 id="测试的类型"><a href="#测试的类型" class="headerlink" title="测试的类型"></a>测试的类型</h3><h4 id="单元测试"><a href="#单元测试" class="headerlink" title="单元测试"></a>单元测试</h4><p>单元测试的目标可以是一个函数，一个类，或者一个模块。单元测试应该是相互隔离和独立的。对于给定的输入，单元测试检查结果。通过及早发现问题并避免 bug 回归，它可以帮助我们确保代码的各个部分按预期工作。</p><h4 id="集成测试"><a href="#集成测试" class="headerlink" title="集成测试"></a>集成测试</h4><p>即使所有单元测试都通过了，我们的应用仍然可能会崩溃。集成测试则是用来测试跨模单元/模块的过程，可以很好地确保我们的代码能够作为一个整体运行。</p><h4 id="端到端测试-E2E"><a href="#端到端测试-E2E" class="headerlink" title="端到端测试(E2E)"></a>端到端测试(E2E)</h4><p>与其他类型的测试不同，E2E 测试总是在浏览器(或类浏览器)环境中运行。它可能是一个实际的浏览器，可以打开并在其中运行测试；也可能是一个无头（Headless）的浏览器环境，这是一个没有用户界面的浏览器。E2E 测试的重点是在我们正在运行的应用程序中模拟实际用户（例如模拟滚动、单击和键入等行为），并检查我们的应用程序是否从实际用户的角度运行良好。</p><p>在这一系列教程中，我们将会从零开始，一步步带你熟悉从单元测试到端到端测试的方方面面。我们将会在一个 React 项目中实践所学到的自动化测试技术。首先用 Create React App（CRA）搭建项目脚手架：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">create-react-app javascript-test-series</span><br></pre></td></tr></table></figure><p>然后我们删除 <code>src</code> 目录下所有预创建的文件（当然你也可以手动删除）：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">rm src/*</span><br></pre></td></tr></table></figure><p>一切准备就绪！让我们开始吧。</p><h3 id="编写第一个单元测试"><a href="#编写第一个单元测试" class="headerlink" title="编写第一个单元测试"></a>编写第一个单元测试</h3><p>编写一个单元测试实际上要比你想象得简单很多。首先创建 <code>divide.js</code> ，在其中编写一个 <code>divide</code> 函数：</p><figure class="highlight js"><figcaption><span>divide.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzBiNzEwZDFkOWVkMDNjNDY2Mzc0OGNjYzEwYjMzN2ExMWJjY2FiM2YvZGl2aWRlLmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/0b710d1d9ed03c4663748ccc10b337a11bccab3f/divide.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">divide</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> a / b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = divide;</span><br></pre></td></tr></table></figure><p>然后创建测试文件 <code>divide.test.js</code> ，代码如下：</p><figure class="highlight js"><figcaption><span>divide.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzBiNzEwZDFkOWVkMDNjNDY2Mzc0OGNjYzEwYjMzN2ExMWJjY2FiM2YvZGl2aWRlLnRlc3QuanM=" title="https://github.com/tuture-dev/javascript-test-series/blob/0b710d1d9ed03c4663748ccc10b337a11bccab3f/divide.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> divide = <span class="built_in">require</span>(<span class="string">'./divide'</span>);</span><br><span class="line"></span><br><span class="line">test(<span class="string">'dividing 6 by 3 equals 2'</span>, () =&gt; &#123;</span><br><span class="line">  expect(divide(<span class="number">6</span>, <span class="number">3</span>)).toBe(<span class="number">2</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>作为本系列教程的第一个 Jest 测试，我们来详细讲解一下：</p><ul><li>我们先导入需要测试的单元/模块</li><li><code>test</code> 函数定义了一个<strong>测试用例</strong>，第一个参数就是<strong>用例描述</strong>，一般是一句完整的描述，例如上面的 <code>dividing 6 by 3 equals 2</code> ；第二个参数则是一个待执行的<strong>测试函数</strong></li><li>在测试函数中，最重要的组成部分就是<strong>断言</strong>（Assertion），例如上面的 <code>expect(divide(6, 3)).toBe(2)</code></li><li>断言的核心是 <code>expect</code> 函数，它接受一个表达式，然后后面可以调用 Matcher 来测试该表达式是否符合条件，例如这里我们就使用了最常用的 <code>toBe</code> Matcher；Jest 还提供了大量的 Matcher，可以帮助我们写出更简洁可读的断言语句，可参考 <span class="exturl" data-url="aHR0cHM6Ly9qZXN0anMuaW8vZG9jcy96aC1IYW5zL2V4cGVjdA==" title="https://jestjs.io/docs/zh-Hans/expect">Expect API<i class="fa fa-external-link"></i></span></li></ul><p>CRA 已经为我们配置好了 Jest，这里直接运行 <code>npx jest</code> 命令，就可以看到测试结果了：</p><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">PASS  .&#x2F;divide.test.js</span><br><span class="line">  ✓ dividing 6 by 3 equals 2 (5ms)</span><br></pre></td></tr></table></figure><div class="note info">            <p><strong>提示</strong></p><p>CRA 也配置了 <code>test</code> 命令，但是提供了比较复杂的功能配置（例如 Watch 模式等），可能会让初学 Jest 的你不知所措。因此这里建议直接使用 <code>npx jest</code> 执行测试。</p>          </div><h3 id="编写第一组测试"><a href="#编写第一组测试" class="headerlink" title="编写第一组测试"></a>编写第一组测试</h3><p>每个测试文件通常有多个测试用例。Jest 允许我们通过 <code>describe</code> 函数对测试用例进行分组，它创建了一个可以组合多个测试的块。让我们对全局 <code>Math</code> 对象运行一些测试（希望浏览器工程师和 Node 开源项目维护者不要来打我），创建 <code>math.test.js</code> ，代码如下：</p><figure class="highlight js"><figcaption><span>math.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzBiNzEwZDFkOWVkMDNjNDY2Mzc0OGNjYzEwYjMzN2ExMWJjY2FiM2YvbWF0aC50ZXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/0b710d1d9ed03c4663748ccc10b337a11bccab3f/math.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">describe(<span class="string">'in the math global object'</span>, () =&gt; &#123;</span><br><span class="line">  describe(<span class="string">'the random function'</span>, () =&gt; &#123;</span><br><span class="line">    it(<span class="string">'should return a number'</span>, () =&gt; &#123;</span><br><span class="line">      expect(<span class="keyword">typeof</span> <span class="built_in">Math</span>.random()).toEqual(<span class="string">'number'</span>);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    it(<span class="string">'should return a number between 0 and 1'</span>, () =&gt; &#123;</span><br><span class="line">      <span class="keyword">const</span> randomNumber = <span class="built_in">Math</span>.random();</span><br><span class="line">      expect(randomNumber).toBeGreaterThanOrEqual(<span class="number">0</span>);</span><br><span class="line">      expect(randomNumber).toBeLessThan(<span class="number">1</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  describe(<span class="string">'the round function'</span>, () =&gt; &#123;</span><br><span class="line">    it(<span class="string">'should return a rounded value of 4.5 being 5'</span>, () =&gt; &#123;</span><br><span class="line">      expect(<span class="built_in">Math</span>.round(<span class="number">4.5</span>)).toBe(<span class="number">5</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><blockquote><p>你也许注意到了这里我们用了 <code>it</code> 函数而不是 <code>test</code> 函数，这两者实际上是完全一样的。</p></blockquote><p>这样对测试进行分组可以使我们的代码更加清晰。在关注应用程序的代码质量的同时，我们也应该确保测试代码的质量，这样我们才有足够的动力不断去维护测试代码，从而确保我们的项目能够保持健壮。</p><p>除了使代码更具可读性之外，它还有助于在出现错误时提供更好的错误消息。如果这里我们将第一条测试用例改为 <code>expect(typeof Math.random()).toEqual(&#39;string&#39;)</code> ，那么再运行 <code>npx jest</code> ，就会出现如下错误信息：</p><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">FAIL  .&#x2F;math.test.js</span><br><span class="line">  ● in the math global object › the random function › should return a number</span><br><span class="line"></span><br><span class="line">    expect(received).toEqual(expected)</span><br><span class="line"></span><br><span class="line">    Expected value to equal:</span><br><span class="line">      &quot;string&quot;</span><br><span class="line">    Received:</span><br><span class="line">      &quot;number&quot;</span><br></pre></td></tr></table></figure><p>是不是一目了然呢？</p><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>在这一小节中，我们首先了解了测试有哪些类型。然后我们在 CRA 脚手架中编写了一个简单的函数，并为之编写了第一个单元测试，熟悉了测试用例、断言、Matcher 这些关键概念，并成功地通过了测试。接着，我们又编写了一个包含多个用例的测试文件，并通过 <code>describe</code> 函数将测试用例组织得井井有条。</p><h2 id="初识-Enzyme：编写第一个-React-组件测试"><a href="#初识-Enzyme：编写第一个-React-组件测试" class="headerlink" title="初识 Enzyme：编写第一个 React 组件测试"></a>初识 Enzyme：编写第一个 React 组件测试</h2><p>很显然，我们不会仅仅满足于测试像 <code>divide</code> 那样简单的函数，我们希望能够测试一个 React 组件，但是和一个普通的 JavaScript 函数不同，测试一个 React 组件还需要两个关键的问题：1）怎么渲染待测试的组件；2）怎么测试渲染出来的组件。</p><p>所幸的是，Airbnb 作为重度使用 React 的先驱，早就提出了专门的解决方案：<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2VuenltZWpzL2VuenltZQ==" title="https://github.com/enzymejs/enzyme">Enzyme<i class="fa fa-external-link"></i></span>。</p><h3 id="安装和配置-Enzyme"><a href="#安装和配置-Enzyme" class="headerlink" title="安装和配置 Enzyme"></a>安装和配置 Enzyme</h3><p>首先安装 Enzyme 和相应的 React 适配器：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install enzyme enzyme-adapter-react-16</span><br></pre></td></tr></table></figure><p>我们需要配置一下 Enzyme，才能在 Jest 测试文件中使用它。创建 <code>src/setupTests.js</code> ，代码如下：</p><figure class="highlight js"><figcaption><span>src/setupTests.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzlmZDc2ZTIzYWU3N2RkN2MyZjQ4MTFhZTMyYzE3YTAzMjU2ZDljMjEvc3JjL3NldHVwVGVzdHMuanM=" title="https://github.com/tuture-dev/javascript-test-series/blob/9fd76e23ae77dd7c2f4811ae32c17a03256d9c21/src/setupTests.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; configure &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line"><span class="keyword">import</span> Adapter <span class="keyword">from</span> <span class="string">'enzyme-adapter-react-16'</span>;</span><br><span class="line"></span><br><span class="line">configure(&#123; <span class="attr">adapter</span>: <span class="keyword">new</span> Adapter() &#125;);</span><br></pre></td></tr></table></figure><h3 id="浅层渲染"><a href="#浅层渲染" class="headerlink" title="浅层渲染"></a>浅层渲染</h3><p>Enzyme 提供的一个重要功能便是组件的<strong>浅层渲染</strong>（Shallow Rendering）。它允许我们在运行测试时，<strong>只渲染父组件而不渲染其所有的子组件</strong>。浅层渲染十分快速，因此非常适合单元测试。</p><p>首先让我们创建一个简单的 React 组件，创建 <code>src/App.js</code> ，代码如下：</p><figure class="highlight js"><figcaption><span>src/App.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzlmZDc2ZTIzYWU3N2RkN2MyZjQ4MTFhZTMyYzE3YTAzMjU2ZDljMjEvc3JjL0FwcC5qcw==" title="https://github.com/tuture-dev/javascript-test-series/blob/9fd76e23ae77dd7c2f4811ae32c17a03256d9c21/src/App.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> App = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello world!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App;</span><br></pre></td></tr></table></figure><p>编写 <code>App</code> 组件对应的测试文件 <code>src/App.test.js</code> ，代码如下：</p><figure class="highlight js"><figcaption><span>src/App.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzlmZDc2ZTIzYWU3N2RkN2MyZjQ4MTFhZTMyYzE3YTAzMjU2ZDljMjEvc3JjL0FwcC50ZXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/9fd76e23ae77dd7c2f4811ae32c17a03256d9c21/src/App.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; shallow &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'app component'</span>, () =&gt; &#123;</span><br><span class="line">  it(<span class="string">'contains a header with the "Hello world!"'</span>, () =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> app = shallow(<span class="xml"><span class="tag">&lt;<span class="name">App</span> /&gt;</span></span>);</span><br><span class="line">    expect(app.containsMatchingElement(<span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello world!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>)).toEqual(<span class="literal">true</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>可以看到，这里我们用 <code>shallow</code> 函数来浅层渲染 <code>App</code> 组件得到 <code>app</code> ，并且调用其 <code>containsMatchingElement</code> 来判断渲染后的 <code>App</code> 组件是否包含 <code>&lt;h1&gt;Hello world!&lt;/h1&gt;</code> 元素。</p><blockquote><p>Enzyme 浅层渲染后的组件还包括其他测试方法，可参考 <span class="exturl" data-url="aHR0cHM6Ly9lbnp5bWVqcy5naXRodWIuaW8vZW56eW1lL2RvY3MvYXBpL3NoYWxsb3cuaHRtbA==" title="https://enzymejs.github.io/enzyme/docs/api/shallow.html">https://enzymejs.github.io/enzyme/docs/api/shallow.html<i class="fa fa-external-link"></i></span>。</p></blockquote><p>通过 <code>npm test</code> 命令，我们就可以看到刚才的测试通过了：</p><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">PASS  app&#x2F;App.test.js</span><br><span class="line">  app component</span><br><span class="line">    ✓ contains a header with the &quot;Hello world!&quot;</span><br></pre></td></tr></table></figure><h2 id="测试更复杂的组件"><a href="#测试更复杂的组件" class="headerlink" title="测试更复杂的组件"></a>测试更复杂的组件</h2><p>在实际的前端开发中，我们的组件要复杂很多。本着循序渐进的原则，我们稍微前进一步：来编写一个接受 <code>props</code> 的组件，并根据数据来决定渲染结果。</p><h3 id="配置-jest-enzyme"><a href="#配置-jest-enzyme" class="headerlink" title="配置 jest-enzyme"></a>配置 jest-enzyme</h3><p>你应该还记得，在刚才的测试代码中，我们还是使用了 Jest 自带的 Matcher（<code>toEqual</code>）。但实际上，社区还提供了更好的选择——专门为 Enzyme 定制的 Matcher 库：<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL0Zvcm1pZGFibGVMYWJzL2VuenltZS1tYXRjaGVycw==" title="https://github.com/FormidableLabs/enzyme-matchers">enzyme-matchers<i class="fa fa-external-link"></i></span>。这些 Matcher 使得编写断言语句更轻松、更具可读性。</p><p>我们通过 npm 来安装 jest-enzyme：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install jest-enzyme</span><br></pre></td></tr></table></figure><p>相应地在 <code>src/setupTests.js</code> 中添加相应的配置：</p><figure class="highlight js"><figcaption><span>src/setupTests.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzJlZTZiNTg0NDlmNzU3MGE0NjViMzQ5NDU1MTg2ZTU5MTYwNTgwODAvc3JjL3NldHVwVGVzdHMuanM=" title="https://github.com/tuture-dev/javascript-test-series/blob/2ee6b58449f7570a465b349455186e5916058080/src/setupTests.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; configure &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line"><span class="keyword">import</span> Adapter <span class="keyword">from</span> <span class="string">'enzyme-adapter-react-16'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> <span class="string">'jest-enzyme'</span>;</span><br><span class="line"></span><br><span class="line">configure(&#123; <span class="attr">adapter</span>: <span class="keyword">new</span> Adapter() &#125;);</span><br></pre></td></tr></table></figure><h3 id="编写-TodoList-组件"><a href="#编写-TodoList-组件" class="headerlink" title="编写 TodoList 组件"></a>编写 TodoList 组件</h3><p>这次，我们还是编写一个熟悉的 <code>TodoList</code> 组件。创建 <code>src/TodoList.js</code> ，代码如下：</p><figure class="highlight js"><figcaption><span>src/TodoList.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzJlZTZiNTg0NDlmNzU3MGE0NjViMzQ5NDU1MTg2ZTU5MTYwNTgwODAvc3JjL1RvZG9MaXN0Lmpz" title="https://github.com/tuture-dev/javascript-test-series/blob/2ee6b58449f7570a465b349455186e5916058080/src/TodoList.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> ToDoList = <span class="function">(<span class="params">props</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &#123;props.tasks.map(<span class="function">(<span class="params">taskName, index</span>) =&gt;</span> (</span><br><span class="line">        &lt;li key=&#123;index&#125;&gt;&#123;taskName&#125;&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">      ))&#125;</span></span><br><span class="line"><span class="regexp">    &lt;/u</span>l&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> ToDoList;</span><br></pre></td></tr></table></figure><p>可以看到，这个组件接受一个 <code>tasks</code> 数组，并将其渲染成一个列表。</p><h3 id="编写-TodoList-组件测试"><a href="#编写-TodoList-组件测试" class="headerlink" title="编写 TodoList 组件测试"></a>编写 TodoList 组件测试</h3><p>先思考一下，如果要测试上面的 <code>TodoList</code> 组件，要考虑哪些情况？不难想到主要是两种情况：</p><ul><li>传入的 <code>tasks</code> 数组为空</li><li>传入的 <code>tasks</code> 数组不为空</li></ul><p>对应这两种情况，我们开始编写测试。创建 <code>src/TodoList.test.js</code> ，代码如下：</p><figure class="highlight js"><figcaption><span>src/TodoList.test.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamF2YXNjcmlwdC10ZXN0LXNlcmllcy9ibG9iLzJlZTZiNTg0NDlmNzU3MGE0NjViMzQ5NDU1MTg2ZTU5MTYwNTgwODAvc3JjL1RvZG9MaXN0LnRlc3QuanM=" title="https://github.com/tuture-dev/javascript-test-series/blob/2ee6b58449f7570a465b349455186e5916058080/src/TodoList.test.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; shallow &#125; <span class="keyword">from</span> <span class="string">'enzyme'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> ToDoList <span class="keyword">from</span> <span class="string">'./ToDoList'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'ToDoList component'</span>, () =&gt; &#123;</span><br><span class="line">  describe(<span class="string">'when provided with an empty array of tasks'</span>, () =&gt; &#123;</span><br><span class="line">    it(<span class="string">'contains an empty &lt;ul&gt; element'</span>, () =&gt; &#123;</span><br><span class="line">      <span class="keyword">const</span> toDoList = shallow(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> <span class="attr">tasks</span>=<span class="string">&#123;[]&#125;</span> /&gt;</span></span>);</span><br><span class="line">      expect(toDoList).toContainReact(<span class="xml"><span class="tag">&lt;<span class="name">ul</span> /&gt;</span></span>);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    it(<span class="string">'does not contain any &lt;li&gt; elements'</span>, () =&gt; &#123;</span><br><span class="line">      <span class="keyword">const</span> toDoList = shallow(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> <span class="attr">tasks</span>=<span class="string">&#123;[]&#125;</span> /&gt;</span></span>);</span><br><span class="line">      expect(toDoList.find(<span class="string">'li'</span>).length).toEqual(<span class="number">0</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  describe(<span class="string">'when provided with an array of tasks'</span>, () =&gt; &#123;</span><br><span class="line">    it(<span class="string">'contains a matching number of &lt;li&gt; elements'</span>, () =&gt; &#123;</span><br><span class="line">      <span class="keyword">const</span> tasks = [<span class="string">'Wash the dishes'</span>, <span class="string">'Make the bed'</span>];</span><br><span class="line">      <span class="keyword">const</span> toDoList = shallow(<span class="xml"><span class="tag">&lt;<span class="name">ToDoList</span> <span class="attr">tasks</span>=<span class="string">&#123;tasks&#125;</span> /&gt;</span></span>);</span><br><span class="line">      expect(toDoList.find(<span class="string">'li'</span>).length).toEqual(tasks.length);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>可以看到在第一个测试用例中，我们使用了 <code>toContainReact</code> 这个 Matcher，它的含义十分明显，一目了然；在后面的测试用例中，我们通过 <code>todoList.find(&#39;li&#39;)</code> 来获取 <code>li</code> 元素数组，并判断它的长度是否符合要求。</p><div class="note info">            <p><strong>提示</strong></p><p>你也许发现我们并没有去验证 <code>TodoList</code> 每一项是否符合，这是因为我们用了 Enzyme 的浅层渲染，这意味着所有的 <code>children</code> 都是处于未渲染状态，当然就无法验证内容是否正确了。我们将在下一篇教程中讲解如何去更“深层”地去测试我们的组件。</p>          </div><p>运行 <code>npm test</code> ，查看测试结果，全部通过：</p><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">PASS  app&#x2F;App.test.js</span><br><span class="line">PASS  app&#x2F;components&#x2F;ToDoList&#x2F;ToDoList.test.js</span><br><span class="line"></span><br><span class="line">Test Suites: 2 passed, 2 total</span><br><span class="line">Tests:       4 passed, 4 total</span><br><span class="line">Snapshots:   0 total</span><br><span class="line">Time:        1.41s</span><br><span class="line">Ran all test suites.</span><br></pre></td></tr></table></figure><h3 id="小结-1"><a href="#小结-1" class="headerlink" title="小结"></a>小结</h3><p>在过去的两个小节中，我们了解、安装和配置了 Enzyme，并且接触了 <code>shallow</code> 浅层渲染这个单元测试利器，并且循序渐进测试了两个 React 组件。但是你应该也注意到了，有些时候浅层渲染并不能完全满足我们的需求，Enzyme 还提供了其他渲染方式以供测试。我们在下篇教程中将讲解新的渲染方式，并介绍快照测试以及 mock 数据，不见不散哦！</p>]]></content>
    
    <summary type="html">
    
      你或许早已经知道“单元测试”“端到端测试”这些名词，但从未真正付诸实践。在这一系列实战教程中，我们将手把手带你掌握 Jest、Enzyme、Cypress 等测试利器，帮助我们从 bug 的沼泽中挣脱出来，成为一个无往不利的高阶前端开发者！本篇教程是 JavaScript 测试系列实战 的第一篇教程，首先介绍了测试的类型，然后主要通过一个 React 项目教会你如何使用 Jest 编写第一个测试，然后使用 Enzyme 对 React 组件进行浅层渲染，以方便对不同层次的组件进行细粒度测试，当学习了这篇教程之后，你将对基础的测试编写、组件的测试有一个比较好的了解。
    
    </summary>
    
    
      <category term="前端" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="React" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="React" scheme="https://tuture.co/tags/React/"/>
    
      <category term="Jest" scheme="https://tuture.co/tags/Jest/"/>
    
      <category term="Enzyme" scheme="https://tuture.co/tags/Enzyme/"/>
    
  </entry>
  
  <entry>
    <title>一杯茶的时间，上手 Koa2 + MySQL 开发</title>
    <link href="https://tuture.co/2020/05/22/fac8401/"/>
    <id>https://tuture.co/2020/05/22/fac8401/</id>
    <published>2020-05-21T17:47:30.970Z</published>
    <updated>2021-07-11T07:16:33.967Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><img alt class="avatar" data-src="/images/avatars/tuture-dev.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><p class="nickName">@tuture-dev</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0" title="https://github.com/tuture-dev/koa-quickstart.git"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="起步"><a href="#起步" class="headerlink" title="起步"></a>起步</h2><p>Koa 作为 Express 原班人马打造的新生代 Node.js Web 框架，自从发布以来就备受瞩目。正如 Koa 作者们在<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2tvYWpzL2tvYS9ibG9iL21hc3Rlci9kb2NzL2tvYS12cy1leHByZXNzLm1k" title="https://github.com/koajs/koa/blob/master/docs/koa-vs-express.md">文档<i class="fa fa-external-link"></i></span>中所指出的：</p><blockquote><p>Philosophically, Koa aims to “fix and replace node”, whereas Express “augments node”.（Express 是 Node 的补强，而 Koa 则是为了解决 Node 的问题并取代之。）</p></blockquote><p>在这一篇文章中，我们将手把手带你开发一个简单的用户系统 REST API，支持用户的增删改查以及 JWT 鉴权，从实战中感受 Koa2 的精髓，它相比于 Express 做出的突破性的改变。我们将选择 <span class="exturl" data-url="aHR0cHM6Ly93d3cudHlwZXNjcmlwdGxhbmcub3JnLw==" title="https://www.typescriptlang.org/">TypeScript<i class="fa fa-external-link"></i></span> 作为开发语言，数据库选用 MySQL，并使用 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R5cGVvcm0vdHlwZW9ybQ==" title="https://github.com/typeorm/typeorm">TypeORM<i class="fa fa-external-link"></i></span> 作为数据库桥接层。</p><div class="note warning">            <p><strong>注意</strong></p><p>这篇文章不会涉及 Koa 源码级别的原理分析，重心会放在让你完全掌握如何去使用 Koa 及周边生态去开发 Web 应用，并欣赏 Koa 的设计之美。此外，<strong>这篇教程比较长</strong>，如果一杯茶不够的话可以续杯~</p>          </div><h3 id="预备知识"><a href="#预备知识" class="headerlink" title="预备知识"></a>预备知识</h3><p>本教程假定你已经具备了以下知识：</p><ul><li>JavaScript 语言基础知识（包括一些常用的 ES6+ 语法）</li><li>Node.js 基础知识，还有 npm 的基本使用，可以参考<a href="https://tuture.co/2019/12/03/892fa12/">这篇教程</a>进行学习</li><li>TypeScript 基础知识，只需了解简单的类型注解就可以了，可以参考我们的 <a href="https://tuture.co/tags/TypeScript/">TypeScript 系列教程</a></li><li><em>（非必须）</em>Express 框架基础知识，对于体验 Koa 之美大有帮助，而且在本文中我们会大量穿插和 Express 的对比，可参考<a href="https://tuture.co/2019/11/26/cd5b993/">这篇教程</a>进行学习</li></ul><h3 id="所用技术"><a href="#所用技术" class="headerlink" title="所用技术"></a>所用技术</h3><ul><li>Node.js：10.x 及以上</li><li>npm：6.x 及以上</li><li>Koa：2.x</li><li>MySQL：推荐稳定的 5.7 版本及以上</li><li>TypeORM：0.2.x</li></ul><h3 id="学习目标"><a href="#学习目标" class="headerlink" title="学习目标"></a>学习目标</h3><p>学完这篇教程，你将学会：</p><ul><li>如果编写 Koa 中间件</li><li>通过 <code>@koa/router</code> 实现路由配置</li><li>通过 TypeORM 连接和读写 MySQL 数据库（其他数据库都类似）</li><li>了解 JWT 鉴权的原理，并动手实现</li><li>掌握 Koa 的错误处理机制</li></ul><h3 id="准备初始代码"><a href="#准备初始代码" class="headerlink" title="准备初始代码"></a>准备初始代码</h3><p>我们已经为你准备好了项目的脚手架，运行以下命令克隆我们的初始代码：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> -b start-point https://github.com/tuture-dev/koa-quickstart.git</span><br></pre></td></tr></table></figure><p>如果你访问 GitHub 不流畅，可以克隆我们的 Gitee 仓库：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> -b start-point https://gitee.com/tuture/koa-quickstart.git</span><br></pre></td></tr></table></figure><p>然后进入项目，安装依赖：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">cd</span> koa-quickstart &amp;&amp; npm install</span><br></pre></td></tr></table></figure><div class="note warning">            <p><strong>注意</strong></p><p>这里我使用了 <code>package-lock.json</code> 确保所有依赖版本一致，如果你用 <code>yarn</code> 安装依赖出现问题，建议删除 <code>node_modules</code> ，重新用 <code>npm install</code> 安装。</p>          </div><h3 id="最简单的-Koa-服务器"><a href="#最简单的-Koa-服务器" class="headerlink" title="最简单的 Koa 服务器"></a>最简单的 Koa 服务器</h3><p>创建 <code>src/server.ts</code> ，编写第一个 Koa 服务器，代码如下：</p><figure class="highlight ts"><figcaption><span>src/server.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvZjFlNjc3ODg1MmE3ZDRmYjM4ZmViYTMwNGQwZTVjNGQyMGRjYzkyNy9zcmMvc2VydmVyLnRz" title="https://github.com/tuture-dev/koa-quickstart.git/blob/f1e6778852a7d4fb38feba304d0e5c4d20dcc927/src/server.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Koa <span class="keyword">from</span> <span class="string">'koa'</span>;</span><br><span class="line"><span class="keyword">import</span> cors <span class="keyword">from</span> <span class="string">'@koa/cors'</span>;</span><br><span class="line"><span class="keyword">import</span> bodyParser <span class="keyword">from</span> <span class="string">'koa-bodyparser'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 初始化 Koa 应用实例</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册中间件</span></span><br><span class="line">app.use(cors());</span><br><span class="line">app.use(bodyParser());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 响应用户请求</span></span><br><span class="line">app.use(<span class="function">(<span class="params">ctx</span>) =&gt;</span> &#123;</span><br><span class="line">  ctx.body = <span class="string">'Hello Koa'</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 运行服务器</span></span><br><span class="line">app.listen(<span class="number">3000</span>);</span><br></pre></td></tr></table></figure><p>整个流程与一个基本的 Express 服务器几乎完全一致：</p><ol><li>初始化应用实例 <code>app</code></li><li>注册相关的中间件（跨域 <code>cors</code> 和请求体解析中间件 <code>bodyParser</code>）</li><li>添加请求处理函数，响应用户请求</li><li>运行服务器</li></ol><p>定睛一看，第 3 步中的请求处理函数（Request Handler）好像不太一样。在 Express 框架中，一个请求处理函数一般是这样的：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handler</span>(<span class="params">req, res</span>) </span>&#123;</span><br><span class="line">  res.send(<span class="string">'Hello Express'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>两个参数分别对应请求对象（Request）和响应对象（Response），但是在 Koa 中，请求处理函数却只有一个参数 <code>ctx</code> （Context，上下文），然后只需向上下文对象写入相关的属性即可（例如这里就是写入到返回数据 <code>body</code> 中）：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handler</span>(<span class="params">ctx</span>) </span>&#123;</span><br><span class="line">  ctx.body = <span class="string">'Hello Koa'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>我的天，Koa 这是故意偷工减料的吗？先不用急，我们马上在下一节讲解中间件时就会了解到 Koa 这样设计的独到之处。</p><h3 id="运行服务器"><a href="#运行服务器" class="headerlink" title="运行服务器"></a>运行服务器</h3><p>我们通过 <code>npm start</code> 就能开启服务器了。可以通过 Curl （或者 Postman 等）来测试我们的 API：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ curl localhost:3000</span><br><span class="line">Hello Koa</span><br></pre></td></tr></table></figure><div class="note info">            <p><strong>提示</strong></p><p>我们的脚手架中配置好了 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3JlbXkvbm9kZW1vbg==" title="https://github.com/remy/nodemon">Nodemon<i class="fa fa-external-link"></i></span>，因此接下来无需关闭服务器，修改代码保存后会自动加载最新的代码并运行。</p>          </div><h2 id="第一个-Koa-中间件"><a href="#第一个-Koa-中间件" class="headerlink" title="第一个 Koa 中间件"></a>第一个 Koa 中间件</h2><p>严格意义上来说，Koa 只是一个中间件框架，正如它的介绍所说：</p><blockquote><p>Expressive middleware for node.js using ES2017 async functions.（通过 ES2017 async 函数编写富有表达力的 Node.js 中间件）</p></blockquote><p>下面这个表格更能说明 Koa 和 Express 的鲜明对比：</p><p><img alt data-src="https://static.powerformer.com/c/67e4c19/17255546a2ca3d46.png"></p><p>可以看到，Koa 实际上对标的是 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3NlbmNoYWxhYnMvY29ubmVjdA==" title="https://github.com/senchalabs/connect">Connect<i class="fa fa-external-link"></i></span>（Express 底层的中间件层），而不包含 Express 所拥有的其他功能，例如路由、模板引擎、发送文件等。接下来，我们就来学习 Koa 最重要的知识点：<strong>中间件</strong>。</p><h3 id="大名鼎鼎的“洋葱模型”"><a href="#大名鼎鼎的“洋葱模型”" class="headerlink" title="大名鼎鼎的“洋葱模型”"></a>大名鼎鼎的“洋葱模型”</h3><p>你也许从来没有用过 Koa 框架，但很有可能听说过“洋葱模型”，而 Koa 正是洋葱模型的代表框架之一。下面这个图你也许很熟悉了：</p><p><img alt data-src="https://static.powerformer.com/c/67e4c19/17255546ba9ee525.jpeg"></p><p>不过以个人观点，这个图实在是太像“洋葱”了，反而不太好理解。接下来我们将以更清晰直观的方式来感受 Koa 中间件的设计之美。首先我们来看一下 Express 的中间件是什么样的：</p><p><img alt data-src="https://static.powerformer.com/c/67e4c19/17255546abea03b1.jpeg"></p><p>请求（Request）直接依次贯穿各个中间件，最后通过请求处理函数返回响应（Response），非常简单。然后我们来看看 Koa 的中间件是什么样的：</p><p><img alt data-src="https://static.powerformer.com/c/67e4c19/17255546d2d5409a.jpeg"></p><p>可以看到，Koa 中间件不像 Express 中间件那样在请求通过了之后就完成了自己的使命；相反，中间件的执行清晰地分为<strong>两个阶段</strong>。我们马上来看下 Koa 中间件具体是什么样的。</p><h3 id="Koa-中间件的定义"><a href="#Koa-中间件的定义" class="headerlink" title="Koa 中间件的定义"></a>Koa 中间件的定义</h3><p>Koa 的中间件是这样一个函数：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">middleware</span>(<span class="params">ctx, next</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 第一阶段</span></span><br><span class="line">  <span class="keyword">await</span> next();</span><br><span class="line">  <span class="comment">// 第二阶段</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>第一个参数就是 Koa Context，也就是上图中贯穿所有中间件和请求处理函数的绿色箭头所传递的内容，里面<strong>封装了请求体和响应体</strong>（实际上还有其他属性，但这里暂时不讲），分别可以通过 <code>ctx.request</code> 和 <code>ctx.response</code> 来获取，以下是一些常用的属性：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">ctx.url; <span class="comment">// 相当于 ctx.request.url</span></span><br><span class="line">ctx.body; <span class="comment">// 相当于 ctx.response.body</span></span><br><span class="line">ctx.status; <span class="comment">// 相当于 ctx.response.status</span></span><br></pre></td></tr></table></figure><div class="note info">            <p><strong>提示</strong></p><p>关于所有请求和响应上面的属性及其别称，请参考 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2tvYWpzL2tvYS9ibG9iL21hc3Rlci9kb2NzL2FwaS9jb250ZXh0Lm1k" title="https://github.com/koajs/koa/blob/master/docs/api/context.md">Context API 文档<i class="fa fa-external-link"></i></span>。</p>          </div><p>中间件的第二个参数便是 <code>next</code> 函数，这个熟悉 Express 的同学一定知道它是干什么的：用来把控制权转交给下一个中间件。但是它跟 Express 的 <code>next</code> 函数本质的区别在于，<strong>Koa 的 **</strong><code>next</code>*<strong>* 函数返回的是一个 Promise</strong>，在这个 Promise 进入完成状态（Fulfilled）后，就会去执行中间件中第二阶段的代码。</p><p>那么我们不禁要问：这样把中间件的执行拆分为两个阶段，到底有什么好处吗？我们来通过一个非常经典的例子来感受一下：日志记录中间件（包括响应时间的计算）。</p><h3 id="实战：日志记录中间件"><a href="#实战：日志记录中间件" class="headerlink" title="实战：日志记录中间件"></a>实战：日志记录中间件</h3><p>让我们来实现一个简单的日志记录中间件 <code>logger</code> ，用于记录每次请求的方法、URL、状态码和响应时间。创建 <code>src/logger.ts</code> ，代码如下：</p><figure class="highlight ts"><figcaption><span>src/logger.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvZWY4NzlhNWJjM2QyMGQyMTI4MjFlYzc1YzJmYTI1YTE2M2QzYjM4Yi9zcmMvbG9nZ2VyLnRz" title="https://github.com/tuture-dev/koa-quickstart.git/blob/ef879a5bc3d20d212821ec75c2fa25a163d3b38b/src/logger.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Context &#125; <span class="keyword">from</span> <span class="string">'koa'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">logger</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">async</span> (ctx: Context, next: <span class="function"><span class="params">()</span> =&gt;</span> <span class="built_in">Promise</span>&lt;<span class="built_in">void</span>&gt;) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> start = <span class="built_in">Date</span>.now();</span><br><span class="line">    <span class="keyword">await</span> next();</span><br><span class="line">    <span class="keyword">const</span> ms = <span class="built_in">Date</span>.now() - start;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;ctx.method&#125;</span> <span class="subst">$&#123;ctx.url&#125;</span> <span class="subst">$&#123;ctx.status&#125;</span> - <span class="subst">$&#123;ms&#125;</span>ms`</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>严格意义上讲，这里的 <code>logger</code> 是一个<strong>中间件工厂函数</strong>（Factory），调用这个工厂函数后返回的结果才是真正的 Koa 中间件。之所以写成一个工厂函数，是因为我们可以通过给工厂函数传参的方式来更好地控制中间件的行为（当然这里的 <code>logger</code> 比较简单，就没有任何参数）。</p><p>在这个中间件的第一阶段，我们通过 <code>Date.now()</code> 先获取请求进入的时间，然后通过 <code>await next()</code> 让出执行权，等待下游中间件运行结束后，再在第二阶段通过计算 <code>Date.now()</code> 的差值来得出处理请求所用的时间。</p><p>思考一下，如果用 Express 来实现这个功能，中间件应该怎么写，会有 Koa 这么简单优雅吗？</p><div class="note info">            <p><strong>提示</strong></p><p>这里通过两个 <code>Date.now()</code> 之间的差值来计算运行时间其实是不精确的，为了获取更准确的时间，建议使用 <code>process.hrtime()</code> 。</p>          </div><p>然后我们在 <code>src/server.ts</code> 中把刚才的 <code>logger</code> 中间件通过 <code>app.use</code> 注册进去，代码如下：</p><figure class="highlight ts"><figcaption><span>src/server.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvZWY4NzlhNWJjM2QyMGQyMTI4MjFlYzc1YzJmYTI1YTE2M2QzYjM4Yi9zcmMvc2VydmVyLnRz" title="https://github.com/tuture-dev/koa-quickstart.git/blob/ef879a5bc3d20d212821ec75c2fa25a163d3b38b/src/server.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./logger'</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="comment">// 初始化 Koa 应用实例</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册中间件</span></span><br><span class="line">[tuture-add]app.use(logger());</span><br><span class="line">app.use(cors());</span><br><span class="line">app.use(bodyParser());</span><br><span class="line"></span><br><span class="line"><span class="comment">// ...</span></span><br></pre></td></tr></table></figure><p>这时候再访问我们的服务器（通过 Curl 或者其他请求工具），应该可以看到输出日志：</p><p><img alt data-src="https://static.powerformer.com/c/67e4c19/17255546d5929a84.png"></p><p>关于 Koa 框架本身的内容基本讲完了，但是对于一个比较完整的 Web 服务器来说，我们还需要更多的“武器装备”才能应对日常的业务逻辑。在接下来的部分，我们将通过社区的优秀组件来解决两个关键问题：路由和数据库，并演示如何结合 Koa 框架进行使用。</p><h2 id="实现路由配置"><a href="#实现路由配置" class="headerlink" title="实现路由配置"></a>实现路由配置</h2><p>由于 Koa 只是一个中间件框架，所以路由的实现需要独立的 npm 包。首先安装 <code>@koa/router</code> 及其 TypeScript 类型定义：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install @koa/router</span><br><span class="line">$ npm install @types/koa__router -D</span><br></pre></td></tr></table></figure><div class="note warning">            <p><strong>注意</strong></p><p>有些教程使用 <code>koa-router</code> ，但由于 <code>koa-router</code> 目前处于几乎无人维护的状态，所以我们这里使用维护更积极的 Fork 版本 <code>@koa/router</code>。</p>          </div><h3 id="路由规划"><a href="#路由规划" class="headerlink" title="路由规划"></a>路由规划</h3><p>在这篇教程中，我们将实现以下路由：</p><ul><li><code>GET /users</code> ：查询所有的用户</li><li><code>GET /users/:id</code> ：查询单个用户</li><li><code>PUT /users/:id</code> ：更新单个用户</li><li><code>DELETE /users/:id</code> ：删除单个用户</li><li><code>POST /users/#</code> ：登录（获取 JWT Token）</li><li><code>POST /users/register</code> ：注册用户</li></ul><h3 id="实现-Controller"><a href="#实现-Controller" class="headerlink" title="实现 Controller"></a>实现 Controller</h3><p>在 <code>src</code> 中创建 <code>controllers</code> 目录，用于存放控制器有关的代码。首先是 <code>AuthController</code> ，创建 <code>src/controllers/auth.ts</code> ，代码如下：</p><figure class="highlight ts"><figcaption><span>src/controllers/auth.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvMGE2MWNkNjUyYmY5OTJkYWU3NWM1ZmE3MjIzNzA4MDdiMzRkZGUwNy9zcmMvY29udHJvbGxlcnMvYXV0aC50cw==" title="https://github.com/tuture-dev/koa-quickstart.git/blob/0a61cd652bf992dae75c5fa722370807b34dde07/src/controllers/auth.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Context &#125; <span class="keyword">from</span> <span class="string">'koa'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> AuthController &#123;</span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> login(ctx: Context) &#123;</span><br><span class="line">    ctx.body = <span class="string">'Login controller'</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> register(ctx: Context) &#123;</span><br><span class="line">    ctx.body = <span class="string">'Register controller'</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后创建 <code>src/controllers/user.ts</code>，代码如下：</p><figure class="highlight ts"><figcaption><span>src/controllers/user.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvMGE2MWNkNjUyYmY5OTJkYWU3NWM1ZmE3MjIzNzA4MDdiMzRkZGUwNy9zcmMvY29udHJvbGxlcnMvdXNlci50cw==" title="https://github.com/tuture-dev/koa-quickstart.git/blob/0a61cd652bf992dae75c5fa722370807b34dde07/src/controllers/user.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Context &#125; <span class="keyword">from</span> <span class="string">'koa'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> listUsers(ctx: Context) &#123;</span><br><span class="line">    ctx.body = <span class="string">'ListUsers controller'</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> showUserDetail(ctx: Context) &#123;</span><br><span class="line">    ctx.body = <span class="string">`ShowUserDetail controller with ID = <span class="subst">$&#123;ctx.params.id&#125;</span>`</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> updateUser(ctx: Context) &#123;</span><br><span class="line">    ctx.body = <span class="string">`UpdateUser controller with ID = <span class="subst">$&#123;ctx.params.id&#125;</span>`</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> deleteUser(ctx: Context) &#123;</span><br><span class="line">    ctx.body = <span class="string">`DeleteUser controller with ID = <span class="subst">$&#123;ctx.params.id&#125;</span>`</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>注意到在后面三个 Controller 中，我们通过 <code>ctx.params</code> 获取到路由参数 <code>id</code> 。</p><h3 id="实现路由"><a href="#实现路由" class="headerlink" title="实现路由"></a>实现路由</h3><p>然后我们创建 <code>src/routes.ts</code>，用于把控制器挂载到对应的路由上面：</p><figure class="highlight ts"><figcaption><span>src/routes.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvMGE2MWNkNjUyYmY5OTJkYWU3NWM1ZmE3MjIzNzA4MDdiMzRkZGUwNy9zcmMvcm91dGVzLnRz" title="https://github.com/tuture-dev/koa-quickstart.git/blob/0a61cd652bf992dae75c5fa722370807b34dde07/src/routes.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Router <span class="keyword">from</span> <span class="string">'@koa/router'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> AuthController <span class="keyword">from</span> <span class="string">'./controllers/auth'</span>;</span><br><span class="line"><span class="keyword">import</span> UserController <span class="keyword">from</span> <span class="string">'./controllers/user'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line"><span class="comment">// auth 相关的路由</span></span><br><span class="line">router.post(<span class="string">'/auth/#'</span>, AuthController.login);</span><br><span class="line">router.post(<span class="string">'/auth/register'</span>, AuthController.register);</span><br><span class="line"></span><br><span class="line"><span class="comment">// users 相关的路由</span></span><br><span class="line">router.get(<span class="string">'/users'</span>, UserController.listUsers);</span><br><span class="line">router.get(<span class="string">'/users/:id'</span>, UserController.showUserDetail);</span><br><span class="line">router.put(<span class="string">'/users/:id'</span>, UserController.updateUser);</span><br><span class="line">router.delete(<span class="string">'/users/:id'</span>, UserController.deleteUser);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router;</span><br></pre></td></tr></table></figure><p>可以看到 <code>@koa/router</code> 的使用方式基本上与 Express Router 保持一致。</p><h3 id="注册路由"><a href="#注册路由" class="headerlink" title="注册路由"></a>注册路由</h3><p>最后，我们需要将 <code>router</code> 注册为中间件。打开 <code>src/server.ts</code>，修改代码如下：</p><figure class="highlight ts"><figcaption><span>src/server.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvMGE2MWNkNjUyYmY5OTJkYWU3NWM1ZmE3MjIzNzA4MDdiMzRkZGUwNy9zcmMvc2VydmVyLnRz" title="https://github.com/tuture-dev/koa-quickstart.git/blob/0a61cd652bf992dae75c5fa722370807b34dde07/src/server.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">[tuture-add]<span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./routes'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./logger'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 初始化 Koa 应用实例</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册中间件</span></span><br><span class="line">app.use(logger());</span><br><span class="line">app.use(cors());</span><br><span class="line">app.use(bodyParser());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 响应用户请求</span></span><br><span class="line">[tuture-del]app.use(<span class="function">(<span class="params">ctx</span>) =&gt;</span> &#123;</span><br><span class="line">[tuture-del]  ctx.body = <span class="string">'Hello Koa'</span>;</span><br><span class="line">[tuture-del]&#125;);</span><br><span class="line">[tuture-add]app.use(router.routes()).use(router.allowedMethods());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 运行服务器</span></span><br><span class="line">app.listen(<span class="number">3000</span>);</span><br></pre></td></tr></table></figure><p>可以看到，这里我们调用 <code>router</code> 对象的 <code>routes</code> 方法获取到对应的 Koa 中间件，还调用了 <code>allowedMethods</code> 方法注册了 HTTP 方法检测的中间件，这样当用户通过不正确的 HTTP 方法访问 API 时，就会自动返回 405 Method Not Allowed 状态码。</p><p>我们通过 Curl 来测试路由（也可以自行使用 Postman）：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ curl localhost:3000/hello</span><br><span class="line">Not Found</span><br><span class="line">$ curl localhost:3000/auth/register</span><br><span class="line">Method Not Allowed</span><br><span class="line">$ curl -X POST localhost:3000/auth/register</span><br><span class="line">Register controller</span><br><span class="line">$ curl -X POST localhost:3000/auth/#</span><br><span class="line">Login controller</span><br><span class="line">$ curl localhost:3000/users</span><br><span class="line">ListUsers controller</span><br><span class="line">$ curl localhost:3000/users/123</span><br><span class="line">ShowUserDetail controller with ID = 123</span><br><span class="line">$ curl -X PUT localhost:3000/users/123</span><br><span class="line">UpdateUser controller with ID = 123</span><br><span class="line">$ curl -X DELETE localhost:3000/users/123</span><br><span class="line">DeleteUser controller with ID = 123</span><br></pre></td></tr></table></figure><p>同时可以看到服务器的输出日志如下：</p><p><img alt data-src="https://static.powerformer.com/c/67e4c19/17255546d5bffec3.png"></p><p>路由已经接通，接下来就让我们来接入真实的数据吧！</p><h2 id="接入-MySQL-数据库"><a href="#接入-MySQL-数据库" class="headerlink" title="接入 MySQL 数据库"></a>接入 MySQL 数据库</h2><p>从这一步开始，我们将正式接入数据库。Koa 本身是一个中间件框架，理论上可以接入任何类型的数据库，这里我们选择流行的关系型数据库 MySQL。并且，由于我们使用了 TypeScript 开发，因此这里使用为 TS 量身打造的 <span class="exturl" data-url="aHR0cDovL3d3dy5ydWFueWlmZW5nLmNvbS9ibG9nLzIwMTkvMDIvb3JtLXR1dG9yaWFsLmh0bWw=" title="http://www.ruanyifeng.com/blog/2019/02/orm-tutorial.html">ORM<i class="fa fa-external-link"></i></span> 库 TypeORM。</p><h3 id="数据库的准备工作"><a href="#数据库的准备工作" class="headerlink" title="数据库的准备工作"></a>数据库的准备工作</h3><p>首先，请安装和配置好 MySQL 数据库，可以通过两种方式：</p><ul><li>官网下载安装包，这里是<span class="exturl" data-url="aHR0cHM6Ly9kZXYubXlzcWwuY29tL2Rvd25sb2Fkcy9teXNxbC8=" title="https://dev.mysql.com/downloads/mysql/">下载地址<i class="fa fa-external-link"></i></span></li><li>使用 MySQL Docker 镜像</li></ul><p>在确保 MySQL 实例运行之后，我们打开终端，通过命令行连接数据库：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ mysql -u root -p</span><br></pre></td></tr></table></figure><p>输入预先设置好的根帐户密码之后，就进入了 MySQL 的交互式执行客户端，然后运行以下命令：</p><figure class="highlight sql"><table><tr><td class="code"><pre><span class="line"><span class="comment">--- 创建数据库</span></span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">DATABASE</span> koa;</span><br><span class="line"></span><br><span class="line"><span class="comment">--- 创建用户并授予权限</span></span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">USER</span> <span class="string">'user'</span>@<span class="string">'localhost'</span> <span class="keyword">IDENTIFIED</span> <span class="keyword">BY</span> <span class="string">'pass'</span>;</span><br><span class="line"><span class="keyword">GRANT</span> <span class="keyword">ALL</span> <span class="keyword">PRIVILEGES</span> <span class="keyword">ON</span> koa.* <span class="keyword">TO</span> <span class="string">'user'</span>@<span class="string">'localhost'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">--- 处理 MySQL 8.0 版本的认证协议问题</span></span><br><span class="line"><span class="keyword">ALTER</span> <span class="keyword">USER</span> <span class="string">'user'</span>@<span class="string">'localhost'</span> <span class="keyword">IDENTIFIED</span> <span class="keyword">WITH</span> mysql_native_password <span class="keyword">BY</span> <span class="string">'pass'</span>;</span><br><span class="line"><span class="keyword">flush</span> <span class="keyword">privileges</span>;</span><br></pre></td></tr></table></figure><h3 id="TypeORM-的配置和连接"><a href="#TypeORM-的配置和连接" class="headerlink" title="TypeORM 的配置和连接"></a>TypeORM 的配置和连接</h3><p>首先安装相关的 npm 包，分别是 MySQL 驱动、TypeORM 及 <code>reflect-metadata</code>（反射 API 库，用于 TypeORM 推断模型的元数据）：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install mysql typeorm reflect-metadata</span><br></pre></td></tr></table></figure><p>然后在项目根目录创建 <code>ormconfig.json</code> ，TypeORM 会读取这个数据库配置进行连接，代码如下：</p><figure class="highlight json"><figcaption><span>ormconfig.json</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvNThlMzgxZGVjYzQ3N2M2MjczODU5MmU5NTI1ZGMyMTRhMGY5YTUxNy9vcm1jb25maWcuanNvbg==" title="https://github.com/tuture-dev/koa-quickstart.git/blob/58e381decc477c62738592e9525dc214a0f9a517/ormconfig.json">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"type"</span>: <span class="string">"mysql"</span>,</span><br><span class="line">  <span class="attr">"host"</span>: <span class="string">"localhost"</span>,</span><br><span class="line">  <span class="attr">"port"</span>: <span class="number">3306</span>,</span><br><span class="line">  <span class="attr">"username"</span>: <span class="string">"user"</span>,</span><br><span class="line">  <span class="attr">"password"</span>: <span class="string">"pass"</span>,</span><br><span class="line">  <span class="attr">"database"</span>: <span class="string">"koa"</span>,</span><br><span class="line">  <span class="attr">"synchronize"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">"entities"</span>: [<span class="string">"src/entity/*.ts"</span>],</span><br><span class="line">  <span class="attr">"cli"</span>: &#123;</span><br><span class="line">    <span class="attr">"entitiesDir"</span>: <span class="string">"src/entity"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这里有一些需要解释的字段：</p><ul><li><code>database</code> 就是我们刚刚创建的 <code>koa</code> 数据库</li><li><code>synchronize</code> 设为 <code>true</code> 能够让我们每次修改模型定义后都能自动同步到数据库<em>（如果你接触过其他的 ORM 库，其实就是自动数据迁移）</em></li><li><code>entities</code> 字段定义了模型文件的路径，我们马上就来创建</li></ul><p>接着修改 <code>src/server.ts</code>，在其中连接数据库，代码如下：</p><figure class="highlight ts"><figcaption><span>src/server.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvNThlMzgxZGVjYzQ3N2M2MjczODU5MmU5NTI1ZGMyMTRhMGY5YTUxNy9zcmMvc2VydmVyLnRz" title="https://github.com/tuture-dev/koa-quickstart.git/blob/58e381decc477c62738592e9525dc214a0f9a517/src/server.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Koa <span class="keyword">from</span> <span class="string">'koa'</span>;</span><br><span class="line"><span class="keyword">import</span> cors <span class="keyword">from</span> <span class="string">'@koa/cors'</span>;</span><br><span class="line"><span class="keyword">import</span> bodyParser <span class="keyword">from</span> <span class="string">'koa-bodyparser'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; createConnection &#125; <span class="keyword">from</span> <span class="string">'typeorm'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> <span class="string">'reflect-metadata'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./routes'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./logger'</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="comment">// 初始化 Koa 应用实例</span></span><br><span class="line">[tuture-del]<span class="keyword">const</span> app = <span class="keyword">new</span> Koa();</span><br><span class="line">[tuture-add]createConnection()</span><br><span class="line">[tuture-add]  .then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">[tuture-add]    <span class="comment">// 初始化 Koa 应用实例</span></span><br><span class="line">[tuture-add]    <span class="keyword">const</span> app = <span class="keyword">new</span> Koa();</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="comment">// 注册中间件</span></span><br><span class="line">[tuture-del]app.use(logger());</span><br><span class="line">[tuture-del]app.use(cors());</span><br><span class="line">[tuture-del]app.use(bodyParser());</span><br><span class="line">[tuture-add]    <span class="comment">// 注册中间件</span></span><br><span class="line">[tuture-add]    app.use(logger());</span><br><span class="line">[tuture-add]    app.use(cors());</span><br><span class="line">[tuture-add]    app.use(bodyParser());</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="comment">// 响应用户请求</span></span><br><span class="line">[tuture-del]app.use(router.routes()).use(router.allowedMethods());</span><br><span class="line">[tuture-add]    <span class="comment">// 响应用户请求</span></span><br><span class="line">[tuture-add]    app.use(router.routes()).use(router.allowedMethods());</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="comment">// 运行服务器</span></span><br><span class="line">[tuture-del]app.listen(<span class="number">3000</span>);</span><br><span class="line">[tuture-add]    <span class="comment">// 运行服务器</span></span><br><span class="line">[tuture-add]    app.listen(<span class="number">3000</span>);</span><br><span class="line">[tuture-add]  &#125;)</span><br><span class="line">[tuture-add]  .catch(<span class="function">(<span class="params">err: <span class="built_in">string</span></span>) =&gt;</span> <span class="built_in">console</span>.log(<span class="string">'TypeORM connection error:'</span>, err));</span><br></pre></td></tr></table></figure><h3 id="创建数据模型定义"><a href="#创建数据模型定义" class="headerlink" title="创建数据模型定义"></a>创建数据模型定义</h3><p>在 <code>src</code> 目录下创建 <code>entity</code> 目录，用于存放数据模型定义文件。在其中创建 <code>user.ts</code> ，代表用户模型，代码如下：</p><figure class="highlight ts"><figcaption><span>src/entity/user.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvNThlMzgxZGVjYzQ3N2M2MjczODU5MmU5NTI1ZGMyMTRhMGY5YTUxNy9zcmMvZW50aXR5L3VzZXIudHM=" title="https://github.com/tuture-dev/koa-quickstart.git/blob/58e381decc477c62738592e9525dc214a0f9a517/src/entity/user.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Entity, Column, PrimaryGeneratedColumn &#125; <span class="keyword">from</span> <span class="string">'typeorm'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Entity</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> User &#123;</span><br><span class="line">  <span class="meta">@PrimaryGeneratedColumn</span>()</span><br><span class="line">  id: <span class="built_in">number</span>;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@Column</span>()</span><br><span class="line">  name: <span class="built_in">string</span>;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@Column</span>(&#123; select: <span class="literal">false</span> &#125;)</span><br><span class="line">  password: <span class="built_in">string</span>;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@Column</span>()</span><br><span class="line">  email: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，用户模型有四个字段，其含义很容易理解。而 TypeORM 则是通过<span class="exturl" data-url="aHR0cHM6Ly93d3cudHNsYW5nLmNuL2RvY3MvaGFuZGJvb2svZGVjb3JhdG9ycy5odG1s" title="https://www.tslang.cn/docs/handbook/decorators.html">装饰器<i class="fa fa-external-link"></i></span>这种优雅的方式来将我们的 <code>User</code> 类映射到数据库中的表。这里我们使用了三个装饰器：</p><ul><li><code>Entity</code> 用于装饰整个类，使其变成一个数据库模型</li><li><code>Column</code> 用于装饰类的某个属性，使其对应于数据库表中的一列，可提供一系列选项参数，例如我们给 <code>password</code> 设置了 <code>select: false</code> ，使得这个字段在查询时默认不被选中</li><li><code>PrimaryGeneratedColumn</code> 则是装饰主列，它的值将自动生成</li></ul><div class="note info">            <p><strong>提示</strong></p><p>关于 TypeORM 所有的装饰器定义及其详细使用，请参考其<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R5cGVvcm0vdHlwZW9ybS9ibG9iL21hc3Rlci9kb2NzL3poX0NOL2RlY29yYXRvci1yZWZlcmVuY2UubWQ=" title="https://github.com/typeorm/typeorm/blob/master/docs/zh_CN/decorator-reference.md">装饰器文档<i class="fa fa-external-link"></i></span>。</p>          </div><h3 id="在-Controller-中操作数据库"><a href="#在-Controller-中操作数据库" class="headerlink" title="在 Controller 中操作数据库"></a>在 Controller 中操作数据库</h3><p>然后就可以在 Controller 中进行数据的增删改查操作了。首先我们打开 <code>src/controllers/user.ts</code> ，实现所有 Controller 的逻辑，代码如下：</p><figure class="highlight ts"><figcaption><span>src/controllers/user.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvNThlMzgxZGVjYzQ3N2M2MjczODU5MmU5NTI1ZGMyMTRhMGY5YTUxNy9zcmMvY29udHJvbGxlcnMvdXNlci50cw==" title="https://github.com/tuture-dev/koa-quickstart.git/blob/58e381decc477c62738592e9525dc214a0f9a517/src/controllers/user.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Context &#125; <span class="keyword">from</span> <span class="string">'koa'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; getManager &#125; <span class="keyword">from</span> <span class="string">'typeorm'</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; User &#125; <span class="keyword">from</span> <span class="string">'../entity/user'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> listUsers(ctx: Context) &#123;</span><br><span class="line">[tuture-del]    ctx.body = <span class="string">'ListUsers controller'</span>;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> userRepository = getManager().getRepository(User);</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> users = <span class="keyword">await</span> userRepository.find();</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    ctx.status = <span class="number">200</span>;</span><br><span class="line">[tuture-add]    ctx.body = users;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> showUserDetail(ctx: Context) &#123;</span><br><span class="line">[tuture-del]    ctx.body = <span class="string">`ShowUserDetail controller with ID = <span class="subst">$&#123;ctx.params.id&#125;</span>`</span>;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> userRepository = getManager().getRepository(User);</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> user = <span class="keyword">await</span> userRepository.findOne(+ctx.params.id);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (user) &#123;</span><br><span class="line">[tuture-add]      ctx.status = <span class="number">200</span>;</span><br><span class="line">[tuture-add]      ctx.body = user;</span><br><span class="line">[tuture-add]    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">[tuture-add]      ctx.status = <span class="number">404</span>;</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> updateUser(ctx: Context) &#123;</span><br><span class="line">[tuture-del]    ctx.body = <span class="string">`UpdateUser controller with ID = <span class="subst">$&#123;ctx.params.id&#125;</span>`</span>;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> userRepository = getManager().getRepository(User);</span><br><span class="line">[tuture-add]    <span class="keyword">await</span> userRepository.update(+ctx.params.id, ctx.request.body);</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> updatedUser = <span class="keyword">await</span> userRepository.findOne(+ctx.params.id);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (updatedUser) &#123;</span><br><span class="line">[tuture-add]      ctx.status = <span class="number">200</span>;</span><br><span class="line">[tuture-add]      ctx.body = updatedUser;</span><br><span class="line">[tuture-add]    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">[tuture-add]      ctx.status = <span class="number">404</span>;</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> deleteUser(ctx: Context) &#123;</span><br><span class="line">[tuture-del]    ctx.body = <span class="string">`DeleteUser controller with ID = <span class="subst">$&#123;ctx.params.id&#125;</span>`</span>;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> userRepository = getManager().getRepository(User);</span><br><span class="line">[tuture-add]    <span class="keyword">await</span> userRepository.delete(+ctx.params.id);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    ctx.status = <span class="number">204</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>TypeORM 中操作数据模型主要是通过 <code>Repository</code> 实现的，在 Controller 中，可以通过 <code>getManager().getRepository(Model)</code> 来获取到，之后 <code>Repository</code> 的查询 API 就与其他的库很类似了。</p><div class="note info">            <p><strong>提示</strong></p><p>关于 Repository 所有的查询 API，请参考<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R5cGVvcm0vdHlwZW9ybS9ibG9iL21hc3Rlci9kb2NzL3poX0NOL3JlcG9zaXRvcnktYXBpLm1k" title="https://github.com/typeorm/typeorm/blob/master/docs/zh_CN/repository-api.md">这里的文档<i class="fa fa-external-link"></i></span>。</p>          </div><p>细心的你应该还发现我们通过 <code>ctx.request.body</code> 获取到了请求体的数据，这是我们在第一步就配置好的 <code>bodyParser</code> 中间件在 Context 对象中添加的。</p><p>然后我们修改 <code>AuthController</code> ，实现具体的注册逻辑。由于密码不能明文保存在数据库中，需要使用非对称算法进行加密，这里我们使用曾经获得过密码加密大赛冠军的 <span class="exturl" data-url="aHR0cHM6Ly93d3cuYXJnb24yLmNvbS8=" title="https://www.argon2.com/">Argon2<i class="fa fa-external-link"></i></span> 算法。安装对应的 npm 包：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install argon2</span><br></pre></td></tr></table></figure><p>然后实现具体的 <code>register</code> Controller，修改 <code>src/controllers/auth.ts</code>，代码如下：</p><figure class="highlight ts"><figcaption><span>src/controllers/auth.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvNThlMzgxZGVjYzQ3N2M2MjczODU5MmU5NTI1ZGMyMTRhMGY5YTUxNy9zcmMvY29udHJvbGxlcnMvYXV0aC50cw==" title="https://github.com/tuture-dev/koa-quickstart.git/blob/58e381decc477c62738592e9525dc214a0f9a517/src/controllers/auth.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Context &#125; <span class="keyword">from</span> <span class="string">'koa'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> * <span class="keyword">as</span> argon2 <span class="keyword">from</span> <span class="string">'argon2'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; getManager &#125; <span class="keyword">from</span> <span class="string">'typeorm'</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; User &#125; <span class="keyword">from</span> <span class="string">'../entity/user'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> AuthController &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> register(ctx: Context) &#123;</span><br><span class="line">[tuture-del]    ctx.body = <span class="string">'Register controller'</span>;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> userRepository = getManager().getRepository(User);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> newUser = <span class="keyword">new</span> User();</span><br><span class="line">[tuture-add]    newUser.name = ctx.request.body.name;</span><br><span class="line">[tuture-add]    newUser.email = ctx.request.body.email;</span><br><span class="line">[tuture-add]    newUser.password = <span class="keyword">await</span> argon2.hash(ctx.request.body.password);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="comment">// 保存到数据库</span></span><br><span class="line">[tuture-add]    <span class="keyword">const</span> user = <span class="keyword">await</span> userRepository.save(newUser);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    ctx.status = <span class="number">201</span>;</span><br><span class="line">[tuture-add]    ctx.body = user;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>确保服务器在运行之后，我们就可以开始测试一波了。首先是注册用户（这里我用 Postman 演示，直观一些）：</p><p><img alt data-src="https://static.powerformer.com/c/67e4c19/17255546e4371a52"></p><p>你可以继续注册几个用户，然后继续访问 <code>/users</code> 相关的路由，应该可以成功地获取、修改和删除相应的数据了！</p><h2 id="实现-JWT-鉴权"><a href="#实现-JWT-鉴权" class="headerlink" title="实现 JWT 鉴权"></a>实现 JWT 鉴权</h2><p>JSON Web Token（JWT）是一种流行的 RESTful API 鉴权方案。这里我们将手把手带你学会如何在 Koa 框架中使用 JWT 鉴权，但是不会过多讲解其原理（可参考<span class="exturl" data-url="aHR0cDovL3d3dy5ydWFueWlmZW5nLmNvbS9ibG9nLzIwMTgvMDcvanNvbl93ZWJfdG9rZW4tdHV0b3JpYWwuaHRtbA==" title="http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html">这篇文章<i class="fa fa-external-link"></i></span>进行学习）。</p><p>首先安装相关的 npm 包：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install koa-jwt jsonwebtoken</span><br><span class="line">npm install @types/jsonwebtoken -D</span><br></pre></td></tr></table></figure><p>创建 <code>src/constants.ts</code> ，用于存放 JWT Secret 常量，代码如下：</p><figure class="highlight ts"><figcaption><span>src/constants.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvYmQyMzkyMzg2M2FhOTQwYzY5ZDdmZjhkMGMwMDM2YjE4NGJiMTA1NC9zcmMvY29uc3RhbnRzLnRz" title="https://github.com/tuture-dev/koa-quickstart.git/blob/bd23923863aa940c69d7ff8d0c0036b184bb1054/src/constants.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> JWT_SECRET = <span class="string">'secret'</span>;</span><br></pre></td></tr></table></figure><p>在实际开发中，请替换成一个足够复杂的字符串，并且最好通过环境变量的方式注入。</p><h3 id="重新规划路由"><a href="#重新规划路由" class="headerlink" title="重新规划路由"></a>重新规划路由</h3><p>有些路由我们希望只有已登录的用户才有权查看（_受保护的路由_），而另一些路由则是所有请求都可以访问（_不受保护的路由_）。在 Koa 的洋葱模型中，我们可以这样实现：</p><p><img alt data-src="https://static.powerformer.com/c/67e4c19/1725554705458c46.png"></p><p>所有请求都可以直接访问未受保护的路由，但是受保护的路由就放在 JWT 中间件的后面（或者从洋葱模型的角度看是“里面”），这样对于没有携带 JWT Token 的请求就直接返回，而不会继续传递下去。</p><p>想法明确之后，打开 <code>src/routes.ts</code> 路由文件，修改代码如下：</p><figure class="highlight ts"><figcaption><span>src/routes.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvYmQyMzkyMzg2M2FhOTQwYzY5ZDdmZjhkMGMwMDM2YjE4NGJiMTA1NC9zcmMvcm91dGVzLnRz" title="https://github.com/tuture-dev/koa-quickstart.git/blob/bd23923863aa940c69d7ff8d0c0036b184bb1054/src/routes.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Router <span class="keyword">from</span> <span class="string">'@koa/router'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> AuthController <span class="keyword">from</span> <span class="string">'./controllers/auth'</span>;</span><br><span class="line"><span class="keyword">import</span> UserController <span class="keyword">from</span> <span class="string">'./controllers/user'</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">const</span> router = <span class="keyword">new</span> Router();</span><br><span class="line">[tuture-add]<span class="keyword">const</span> unprotectedRouter = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line"><span class="comment">// auth 相关的路由</span></span><br><span class="line">[tuture-del]router.post(<span class="string">'/auth/#'</span>, AuthController.login);</span><br><span class="line">[tuture-del]router.post(<span class="string">'/auth/register'</span>, AuthController.register);</span><br><span class="line">[tuture-add]unprotectedRouter.post(<span class="string">'/auth/#'</span>, AuthController.login);</span><br><span class="line">[tuture-add]unprotectedRouter.post(<span class="string">'/auth/register'</span>, AuthController.register);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">const</span> protectedRouter = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line"><span class="comment">// users 相关的路由</span></span><br><span class="line">[tuture-del]router.get(<span class="string">'/users'</span>, UserController.listUsers);</span><br><span class="line">[tuture-del]router.get(<span class="string">'/users/:id'</span>, UserController.showUserDetail);</span><br><span class="line">[tuture-del]router.put(<span class="string">'/users/:id'</span>, UserController.updateUser);</span><br><span class="line">[tuture-del]router.delete(<span class="string">'/users/:id'</span>, UserController.deleteUser);</span><br><span class="line">[tuture-add]protectedRouter.get(<span class="string">'/users'</span>, UserController.listUsers);</span><br><span class="line">[tuture-add]protectedRouter.get(<span class="string">'/users/:id'</span>, UserController.showUserDetail);</span><br><span class="line">[tuture-add]protectedRouter.put(<span class="string">'/users/:id'</span>, UserController.updateUser);</span><br><span class="line">[tuture-add]protectedRouter.delete(<span class="string">'/users/:id'</span>, UserController.deleteUser);</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">default</span> router;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> &#123; protectedRouter, unprotectedRouter &#125;;</span><br></pre></td></tr></table></figure><p>上面我们分别实现了 <code>protectedRouter</code> 和 <code>unprotectedRouter</code> ，分别对应于需要 JWT 中间件保护的路由和不需要保护的路由。</p><h3 id="注册-JWT-中间件"><a href="#注册-JWT-中间件" class="headerlink" title="注册 JWT 中间件"></a>注册 JWT 中间件</h3><p>接着便是注册 JWT 中间件，并分别在其前后注册不需要保护的路由 <code>unprotectedRouter</code> 和需要保护的路由 <code>protectedRouter</code>。修改服务器文件 <code>src/server.ts</code> ，代码如下：</p><figure class="highlight ts"><figcaption><span>src/server.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvYmQyMzkyMzg2M2FhOTQwYzY5ZDdmZjhkMGMwMDM2YjE4NGJiMTA1NC9zcmMvc2VydmVyLnRz" title="https://github.com/tuture-dev/koa-quickstart.git/blob/bd23923863aa940c69d7ff8d0c0036b184bb1054/src/server.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> jwt <span class="keyword">from</span> <span class="string">'koa-jwt'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">'reflect-metadata'</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./routes'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; protectedRouter, unprotectedRouter &#125; <span class="keyword">from</span> <span class="string">'./routes'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./logger'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; JWT_SECRET &#125; <span class="keyword">from</span> <span class="string">'./constants'</span>;</span><br><span class="line"></span><br><span class="line">createConnection()</span><br><span class="line">  .then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">[tuture-del]    <span class="comment">// 响应用户请求</span></span><br><span class="line">[tuture-del]    app.use(router.routes()).use(router.allowedMethods());</span><br><span class="line">[tuture-add]    <span class="comment">// 无需 JWT Token 即可访问</span></span><br><span class="line">[tuture-add]    app.use(unprotectedRouter.routes()).use(unprotectedRouter.allowedMethods());</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="comment">// 注册 JWT 中间件</span></span><br><span class="line">[tuture-add]    app.use(jwt(&#123; secret: JWT_SECRET &#125;).unless(&#123; method: <span class="string">'GET'</span> &#125;));</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="comment">// 需要 JWT Token 才可访问</span></span><br><span class="line">[tuture-add]    app.use(protectedRouter.routes()).use(protectedRouter.allowedMethods());</span><br><span class="line"></span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">// ...</span></span><br></pre></td></tr></table></figure><p>对应刚才“洋葱模型”的设计图，是不是感觉很直观？</p><div class="note info">            <p><strong>提示</strong></p><p>在 JWT 中间件注册完毕后，如果用户请求携带了有效的 Token，后面的 <code>protectedRouter</code> 就可以通过 <code>ctx.state.user</code> 获取到 Token 的内容（更精确的说法是 Payload，负载，一般是用户的关键信息，例如 ID）了；反之，如果 Token 缺失或无效，那么 JWT 中间件会直接自动返回 401 错误。关于 koa-jwt 的更多使用细节，请参考其<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2tvYWpzL2p3dA==" title="https://github.com/koajs/jwt">文档<i class="fa fa-external-link"></i></span>。</p>          </div><h3 id="在-Login-中签发-JWT-Token"><a href="#在-Login-中签发-JWT-Token" class="headerlink" title="在 Login 中签发 JWT Token"></a>在 Login 中签发 JWT Token</h3><p>我们需要提供一个 API 端口让用户可以获取到 JWT Token，最合适的当然是登录接口 <code>/auth/#</code>。打开 <code>src/controllers/auth.ts</code> ，在 <code>login</code> 控制器中实现签发 JWT Token 的逻辑，代码如下：</p><figure class="highlight ts"><figcaption><span>src/controllers/auth.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvYmQyMzkyMzg2M2FhOTQwYzY5ZDdmZjhkMGMwMDM2YjE4NGJiMTA1NC9zcmMvY29udHJvbGxlcnMvYXV0aC50cw==" title="https://github.com/tuture-dev/koa-quickstart.git/blob/bd23923863aa940c69d7ff8d0c0036b184bb1054/src/controllers/auth.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> jwt <span class="keyword">from</span> <span class="string">'jsonwebtoken'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; JWT_SECRET &#125; <span class="keyword">from</span> <span class="string">'../constants'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> AuthController &#123;</span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> login(ctx: Context) &#123;</span><br><span class="line">[tuture-del]    ctx.body = <span class="string">'Login controller'</span>;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> userRepository = getManager().getRepository(User);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> user = <span class="keyword">await</span> userRepository</span><br><span class="line">[tuture-add]      .createQueryBuilder()</span><br><span class="line">[tuture-add]      .where(&#123; name: ctx.request.body.name &#125;)</span><br><span class="line">[tuture-add]      .addSelect(<span class="string">'User.password'</span>)</span><br><span class="line">[tuture-add]      .getOne();</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (!user) &#123;</span><br><span class="line">[tuture-add]      ctx.status = <span class="number">401</span>;</span><br><span class="line">[tuture-add]      ctx.body = &#123; message: <span class="string">'用户名不存在'</span> &#125;;</span><br><span class="line">[tuture-add]    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">await</span> argon2.verify(user.password, ctx.request.body.password)) &#123;</span><br><span class="line">[tuture-add]      ctx.status = <span class="number">200</span>;</span><br><span class="line">[tuture-add]      ctx.body = &#123; token: jwt.sign(&#123; id: user.id &#125;, JWT_SECRET) &#125;;</span><br><span class="line">[tuture-add]    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">[tuture-add]      ctx.status = <span class="number">401</span>;</span><br><span class="line">[tuture-add]      ctx.body = &#123; message: <span class="string">'密码错误'</span> &#125;;</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在 <code>login</code> 中，我们首先根据用户名（请求体中的 <code>name</code> 字段）查询对应的用户，如果该用户不存在，则直接返回 401；存在的话再通过 <code>argon2.verify</code> 来验证请求体中的明文密码 <code>password</code> 是否和数据库中存储的加密密码是否一致，如果一致则通过 <code>jwt.sign</code> 签发 Token，如果不一致则还是返回 401。</p><p>这里的 Token 负载就是标识用户 ID 的对象 <code>{ id: user.id }</code> ，这样后面鉴权成功后就可以通过 <code>ctx.user.id</code> 来获取用户 ID。</p><h3 id="在-User-控制器中添加访问控制"><a href="#在-User-控制器中添加访问控制" class="headerlink" title="在 User 控制器中添加访问控制"></a>在 User 控制器中添加访问控制</h3><p>Token 的中间件和签发都搞定之后，最后一步就是在合适的地方校验用户的 Token，确认其是否有足够的权限。最典型的场景便是，在更新或删除用户时，我们要<strong>确保是用户本人在操作</strong>。打开 <code>src/controllers/user.ts</code> ，代码如下：</p><figure class="highlight ts"><figcaption><span>src/controllers/user.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvYmQyMzkyMzg2M2FhOTQwYzY5ZDdmZjhkMGMwMDM2YjE4NGJiMTA1NC9zcmMvY29udHJvbGxlcnMvdXNlci50cw==" title="https://github.com/tuture-dev/koa-quickstart.git/blob/bd23923863aa940c69d7ff8d0c0036b184bb1054/src/controllers/user.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> updateUser(ctx: Context) &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> userId = +ctx.params.id;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (userId !== +ctx.state.user.id) &#123;</span><br><span class="line">[tuture-add]      ctx.status = <span class="number">403</span>;</span><br><span class="line">[tuture-add]      ctx.body = &#123; message: <span class="string">'无权进行此操作'</span> &#125;;</span><br><span class="line">[tuture-add]      <span class="keyword">return</span>;</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">    <span class="keyword">const</span> userRepository = getManager().getRepository(User);</span><br><span class="line">[tuture-del]    <span class="keyword">await</span> userRepository.update(+ctx.params.id, ctx.request.body);</span><br><span class="line">[tuture-del]    <span class="keyword">const</span> updatedUser = <span class="keyword">await</span> userRepository.findOne(+ctx.params.id);</span><br><span class="line">[tuture-add]    <span class="keyword">await</span> userRepository.update(userId, ctx.request.body);</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> updatedUser = <span class="keyword">await</span> userRepository.findOne(userId);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> deleteUser(ctx: Context) &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> userId = +ctx.params.id;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (userId !== +ctx.state.user.id) &#123;</span><br><span class="line">[tuture-add]      ctx.status = <span class="number">403</span>;</span><br><span class="line">[tuture-add]      ctx.body = &#123; message: <span class="string">'无权进行此操作'</span> &#125;;</span><br><span class="line">[tuture-add]      <span class="keyword">return</span>;</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">    <span class="keyword">const</span> userRepository = getManager().getRepository(User);</span><br><span class="line">[tuture-del]    <span class="keyword">await</span> userRepository.delete(+ctx.params.id);</span><br><span class="line">[tuture-add]    <span class="keyword">await</span> userRepository.delete(userId);</span><br><span class="line"></span><br><span class="line">    ctx.status = <span class="number">204</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>两个 Controller 的鉴权逻辑基本相同，我们通过比较 <code>ctx.params.id</code> 和 <code>ctx.state.user.id</code> 是否相同，如果不相同则返回 403 Forbidden 错误，相同则继续执行相应的数据库操作。</p><p>代码写完之后，我们用刚才注册的一个用户信息去访问登录 API：</p><p><img alt data-src="https://static.powerformer.com/c/67e4c19/172555470a1ccbb4.png"></p><p>成功地获取到了 JWT Token！然后我们复制获取到的 Token，在接下来测试受保护的路由时，我们需要添加一个 <code>Authorization</code> 头部，值为 <code>Bearer &lt;JWT_TOKEN&gt;</code> ，如下图所示：</p><p><img alt data-src="https://static.powerformer.com/c/67e4c19/17255547098c88c4.png"></p><p>然后就可以测试受保护的路由了！这里由于篇幅限制就省略了。</p><h2 id="错误处理"><a href="#错误处理" class="headerlink" title="错误处理"></a>错误处理</h2><p>最后，我们来简单地聊一下 Koa 中的错误处理。由于 Koa 采用了 async 函数和 Promise 作为异步编程的方案，所以错误处理自然也很简单了——直接用 JavaScript 自带的 try-catch 语法就可以轻松搞定。</p><h3 id="实现自定义错误（异常）"><a href="#实现自定义错误（异常）" class="headerlink" title="实现自定义错误（异常）"></a>实现自定义错误（异常）</h3><p>首先，让我们来实现一些自定义的错误（或者异常，本文不作区分）类。创建 <code>src/exceptions.ts</code> ，代码如下：</p><figure class="highlight ts"><figcaption><span>src/exceptions.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvZTQ3M2UyNTY2Y2YwZDRiMmZmOGEwNzZkN2FhMmU2MjA4YmFkOTU0Yi9zcmMvZXhjZXB0aW9ucy50cw==" title="https://github.com/tuture-dev/koa-quickstart.git/blob/e473e2566cf0d4b2ff8a076d7aa2e6208bad954b/src/exceptions.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> BaseException <span class="keyword">extends</span> <span class="built_in">Error</span> &#123;</span><br><span class="line">  <span class="comment">// 状态码</span></span><br><span class="line">  status: <span class="built_in">number</span>;</span><br><span class="line">  <span class="comment">// 提示信息</span></span><br><span class="line">  message: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> NotFoundException <span class="keyword">extends</span> BaseException &#123;</span><br><span class="line">  status = <span class="number">404</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params">msg?: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">super</span>();</span><br><span class="line">    <span class="keyword">this</span>.message = msg || <span class="string">'无此内容'</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UnauthorizedException <span class="keyword">extends</span> BaseException &#123;</span><br><span class="line">  status = <span class="number">401</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params">msg?: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">super</span>();</span><br><span class="line">    <span class="keyword">this</span>.message = msg || <span class="string">'尚未登录'</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> ForbiddenException <span class="keyword">extends</span> BaseException &#123;</span><br><span class="line">  status = <span class="number">403</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params">msg?: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">super</span>();</span><br><span class="line">    <span class="keyword">this</span>.message = msg || <span class="string">'权限不足'</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这里的错误类型参考了 <span class="exturl" data-url="aHR0cHM6Ly9kb2NzLm5lc3Rqcy5jb20vZXhjZXB0aW9uLWZpbHRlcnM=" title="https://docs.nestjs.com/exception-filters">Nest.js<i class="fa fa-external-link"></i></span> 的设计。出于学习目的，这里作了简化，并且只实现了我们需要用到的错误。</p><h3 id="在-Controller-中使用自定义错误"><a href="#在-Controller-中使用自定义错误" class="headerlink" title="在 Controller 中使用自定义错误"></a>在 Controller 中使用自定义错误</h3><p>接着我们便可以在 Controller 中使用刚才的自定义错误了。打开 <code>src/controllers/auth.ts</code>，修改代码如下：</p><figure class="highlight ts"><figcaption><span>src/controllers/auth.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvZTQ3M2UyNTY2Y2YwZDRiMmZmOGEwNzZkN2FhMmU2MjA4YmFkOTU0Yi9zcmMvY29udHJvbGxlcnMvYXV0aC50cw==" title="https://github.com/tuture-dev/koa-quickstart.git/blob/e473e2566cf0d4b2ff8a076d7aa2e6208bad954b/src/controllers/auth.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; UnauthorizedException &#125; <span class="keyword">from</span> <span class="string">'../exceptions'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> AuthController &#123;</span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> login(ctx: Context) &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (!user) &#123;</span><br><span class="line">[tuture-del]      ctx.status = <span class="number">401</span>;</span><br><span class="line">[tuture-del]      ctx.body = &#123; message: <span class="string">'用户名不存在'</span> &#125;;</span><br><span class="line">[tuture-add]      <span class="keyword">throw</span> <span class="keyword">new</span> UnauthorizedException(<span class="string">'用户名不存在'</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">await</span> argon2.verify(user.password, ctx.request.body.password)) &#123;</span><br><span class="line">      ctx.status = <span class="number">200</span>;</span><br><span class="line">      ctx.body = &#123; token: jwt.sign(&#123; id: user.id &#125;, JWT_SECRET) &#125;;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">[tuture-del]      ctx.status = <span class="number">401</span>;</span><br><span class="line">[tuture-del]      ctx.body = &#123; message: <span class="string">'密码错误'</span> &#125;;</span><br><span class="line">[tuture-add]      <span class="keyword">throw</span> <span class="keyword">new</span> UnauthorizedException(<span class="string">'密码错误'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，我们将直接手动设置状态码和响应体的代码改成了简单的错误抛出，代码清晰了很多。</p><div class="note info">            <p><strong>提示</strong></p><p>Koa 的 Context 对象提供了一个便捷方法 <code>throw</code> ，同样可以抛出异常，例如 <code>ctx.throw(400, &#39;Bad request&#39;)</code>。</p>          </div><p>同样地，修改 <code>UserController</code> 相关的逻辑。修改 <code>src/controllers/user.ts</code>，代码如下：</p><figure class="highlight ts"><figcaption><span>src/controllers/user.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvZTQ3M2UyNTY2Y2YwZDRiMmZmOGEwNzZkN2FhMmU2MjA4YmFkOTU0Yi9zcmMvY29udHJvbGxlcnMvdXNlci50cw==" title="https://github.com/tuture-dev/koa-quickstart.git/blob/e473e2566cf0d4b2ff8a076d7aa2e6208bad954b/src/controllers/user.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; NotFoundException, ForbiddenException &#125; <span class="keyword">from</span> <span class="string">'../exceptions'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> showUserDetail(ctx: Context) &#123;</span><br><span class="line">    <span class="keyword">const</span> userRepository = getManager().getRepository(User);</span><br><span class="line">    <span class="keyword">const</span> user = <span class="keyword">await</span> userRepository.findOne(+ctx.params.id);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (user) &#123;</span><br><span class="line">      ctx.status = <span class="number">200</span>;</span><br><span class="line">      ctx.body = user;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">[tuture-del]      ctx.status = <span class="number">404</span>;</span><br><span class="line">[tuture-add]      <span class="keyword">throw</span> <span class="keyword">new</span> NotFoundException();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> updateUser(ctx: Context) &#123;</span><br><span class="line">    <span class="keyword">const</span> userId = +ctx.params.id;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (userId !== +ctx.state.user.id) &#123;</span><br><span class="line">[tuture-del]      ctx.status = <span class="number">403</span>;</span><br><span class="line">[tuture-del]      ctx.body = &#123; message: <span class="string">'无权进行此操作'</span> &#125;;</span><br><span class="line">[tuture-del]      <span class="keyword">return</span>;</span><br><span class="line">[tuture-add]      <span class="keyword">throw</span> <span class="keyword">new</span> ForbiddenException();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">async</span> deleteUser(ctx: Context) &#123;</span><br><span class="line">    <span class="keyword">const</span> userId = +ctx.params.id;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (userId !== +ctx.state.user.id) &#123;</span><br><span class="line">[tuture-del]      ctx.status = <span class="number">403</span>;</span><br><span class="line">[tuture-del]      ctx.body = &#123; message: <span class="string">'无权进行此操作'</span> &#125;;</span><br><span class="line">[tuture-del]      <span class="keyword">return</span>;</span><br><span class="line">[tuture-add]      <span class="keyword">throw</span> <span class="keyword">new</span> ForbiddenException();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="添加错误处理中间件"><a href="#添加错误处理中间件" class="headerlink" title="添加错误处理中间件"></a>添加错误处理中间件</h3><p>最后，我们需要添加错误处理中间件来捕获在 Controller 中抛出的错误。打开 <code>src/server.ts</code> ，实现错误处理中间件，代码如下：</p><figure class="highlight ts"><figcaption><span>src/server.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYva29hLXF1aWNrc3RhcnQuZ2l0L2Jsb2IvZTQ3M2UyNTY2Y2YwZDRiMmZmOGEwNzZkN2FhMmU2MjA4YmFkOTU0Yi9zcmMvc2VydmVyLnRz" title="https://github.com/tuture-dev/koa-quickstart.git/blob/e473e2566cf0d4b2ff8a076d7aa2e6208bad954b/src/server.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">createConnection()</span><br><span class="line">  .then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 注册中间件</span></span><br><span class="line">    app.use(logger());</span><br><span class="line">    app.use(cors());</span><br><span class="line">    app.use(bodyParser());</span><br><span class="line"></span><br><span class="line">[tuture-add]    app.use(<span class="keyword">async</span> (ctx, next) =&gt; &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">try</span> &#123;</span><br><span class="line">[tuture-add]        <span class="keyword">await</span> next();</span><br><span class="line">[tuture-add]      &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">[tuture-add]        <span class="comment">// 只返回 JSON 格式的响应</span></span><br><span class="line">[tuture-add]        ctx.status = err.status || <span class="number">500</span>;</span><br><span class="line">[tuture-add]        ctx.body = &#123; message: err.message &#125;;</span><br><span class="line">[tuture-add]      &#125;</span><br><span class="line">[tuture-add]    &#125;);</span><br><span class="line">[tuture-add]</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">// ...</span></span><br></pre></td></tr></table></figure><p>可以看到，在这个错误处理中间件中，我们把返回的响应数据转换成 JSON 格式（而不是之前的 Plain Text），这样看上去更统一一些。</p><p>至此，这篇教程就结束了。内容很多，希望对你有一定的帮助。我们的用户系统已经能够处理大部分情形，但是对于一些边际情况的处理依然很糟糕（能想到有哪些吗？）。不过话说回来，相信你已经确定 Koa 是一个很棒的框架了吧？</p>]]></content>
    
    <summary type="html">
    
      凭借精巧的“洋葱模型”和对 Promise 以及 async/await 异步编程的完全支持，Koa 框架自从诞生以来就吸引了无数 Node 爱好者。然而 Koa 本身只是一个简单的中间件框架，要想实现一个足够复杂的 Web 应用还需要很多周边生态支持。这篇教程不仅会带你梳理 Koa 的基础知识，还会充分地运用和讲解构建 Web 应用必须的组件（路由、数据库、鉴权等），最终实现一个较为完善的用户系统。
    
    </summary>
    
    
      <category term="后端" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/"/>
    
      <category term="Node.js" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/"/>
    
      <category term="入门" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/%E5%85%A5%E9%97%A8/"/>
    
    
      <category term="TypeScript" scheme="https://tuture.co/tags/TypeScript/"/>
    
      <category term="Koa" scheme="https://tuture.co/tags/Koa/"/>
    
      <category term="MySQL" scheme="https://tuture.co/tags/MySQL/"/>
    
      <category term="JWT" scheme="https://tuture.co/tags/JWT/"/>
    
  </entry>
  
  <entry>
    <title>从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（九）：使用 Authing 集成完整的用户系统</title>
    <link href="https://tuture.co/2020/05/17/nO-RmUb/"/>
    <id>https://tuture.co/2020/05/17/nO-RmUb/</id>
    <published>2020-05-16T18:25:27.336Z</published>
    <updated>2021-07-11T07:16:34.088Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><img alt class="avatar" data-src="/images/avatars/tuture-dev.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><p class="nickName">@tuture-dev</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5k" title="https://github.com/tuture-dev/vue-online-shop-frontend"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="添加用户界面及路由"><a href="#添加用户界面及路由" class="headerlink" title="添加用户界面及路由"></a>添加用户界面及路由</h2><figure class="highlight js"><figcaption><span>client/src/main.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvMGJjNjRkMTMwNDZlNzJjZTdmZDk1MjljYjdlZmJiNjljMDExZDFjNy9jbGllbnQvc3JjL21haW4uanM=" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/0bc64d13046e72ce7fd9529cb7efbb69c011d1c7/client/src/main.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// The Vue build version to load with the `import` command</span></span><br><span class="line"><span class="comment">// (runtime-only or standalone) has been set in webpack.base.conf with an alias.</span></span><br><span class="line">[tuture-del]<span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; ValidationProvider &#125; <span class="keyword">from</span> <span class="string">'vee-validate'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; ValidationProvider &#125; <span class="keyword">from</span> <span class="string">"vee-validate"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./router'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">'./store'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> ElementUI <span class="keyword">from</span> <span class="string">'element-ui'</span></span><br><span class="line">[tuture-del]<span class="keyword">import</span> <span class="string">'element-ui/lib/theme-chalk/index.css'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">"./App"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">"./router"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">"./store"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> ElementUI <span class="keyword">from</span> <span class="string">"element-ui"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> <span class="string">"element-ui/lib/theme-chalk/index.css"</span>;</span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span>;</span><br><span class="line">[tuture-del]Vue.component(<span class="string">'ValidationProvider'</span>, ValidationProvider);</span><br><span class="line">[tuture-add]Vue.component(<span class="string">"ValidationProvider"</span>, ValidationProvider);</span><br><span class="line">Vue.use(ElementUI);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* eslint-disable no-new */</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">[tuture-del]  el: <span class="string">'#app'</span>,</span><br><span class="line">[tuture-add]  el: <span class="string">"#app"</span>,</span><br><span class="line">  router,</span><br><span class="line">  store,</span><br><span class="line">  components: &#123; App &#125;,</span><br><span class="line">[tuture-del]  template: <span class="string">'&lt;App/&gt;'</span>,</span><br><span class="line">[tuture-add]  template: <span class="string">"&lt;App/&gt;"</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><figure class="highlight html"><figcaption><span>client/src/pages/user/Index.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvMGJjNjRkMTMwNDZlNzJjZTdmZDk1MjljYjdlZmJiNjljMDExZDFjNy9jbGllbnQvc3JjL3BhZ2VzL3VzZXIvSW5kZXgudnVl" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/0bc64d13046e72ce7fd9529cb7efbb69c011d1c7/client/src/pages/user/Index.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"user-title"</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/"</span> <span class="attr">tag</span>=<span class="string">"div"</span>&gt;</span>登录/注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">router-view</span> /&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.user-title</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line">    cursor: pointer;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">  <span class="selector-class">.container</span> &#123;</span></span><br><span class="line">    margin-top: 40px;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight html"><figcaption><span>client/src/pages/user/#.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvMGJjNjRkMTMwNDZlNzJjZTdmZDk1MjljYjdlZmJiNjljMDExZDFjNy9jbGllbnQvc3JjL3BhZ2VzL3VzZXIvTG9naW4udnVl" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/0bc64d13046e72ce7fd9529cb7efbb69c011d1c7/client/src/pages/user/#.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"login-form"</span>&gt;</span>用户登录<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;&#125;;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight html"><figcaption><span>client/src/pages/user/Setting.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvMGJjNjRkMTMwNDZlNzJjZTdmZDk1MjljYjdlZmJiNjljMDExZDFjNy9jbGllbnQvc3JjL3BhZ2VzL3VzZXIvU2V0dGluZy52dWU=" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/0bc64d13046e72ce7fd9529cb7efbb69c011d1c7/client/src/pages/user/Setting.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span>settings<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    data() &#123;</span><br><span class="line"><span class="actionscript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">        model: &#123; manufacturer: &#123; name: <span class="string">''</span>, _id: <span class="string">''</span> &#125; &#125;,</span></span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    mounted() &#123;&#125;,</span><br><span class="line">  &#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><figcaption><span>client/src/router/index.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvMGJjNjRkMTMwNDZlNzJjZTdmZDk1MjljYjdlZmJiNjljMDExZDFjNy9jbGllbnQvc3JjL3JvdXRlci9pbmRleC5qcw==" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/0bc64d13046e72ce7fd9529cb7efbb69c011d1c7/client/src/router/index.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> Router <span class="keyword">from</span> <span class="string">'vue-router'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Router <span class="keyword">from</span> <span class="string">"vue-router"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">import</span> Home <span class="keyword">from</span> <span class="string">'@/pages/Home'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> Cart <span class="keyword">from</span> <span class="string">'@/pages/Cart'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> Detail <span class="keyword">from</span> <span class="string">'@/pages/Detail'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Home <span class="keyword">from</span> <span class="string">"@/pages/Home"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Cart <span class="keyword">from</span> <span class="string">"@/pages/Cart"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Detail <span class="keyword">from</span> <span class="string">"@/pages/Detail"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Admin Components</span></span><br><span class="line">[tuture-del]<span class="keyword">import</span> Index <span class="keyword">from</span> <span class="string">'@/pages/admin/Index'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> New <span class="keyword">from</span> <span class="string">'@/pages/admin/New'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> Products <span class="keyword">from</span> <span class="string">'@/pages/admin/Products'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> Edit <span class="keyword">from</span> <span class="string">'@/pages/admin/Edit'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> Manufacturers <span class="keyword">from</span> <span class="string">'@/pages/admin/Manufacturers'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> NewManufacturers <span class="keyword">from</span> <span class="string">'@/pages/admin/NewManufacturers'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> EditManufacturers <span class="keyword">from</span> <span class="string">'@/pages/admin/EditManufacturers'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Index <span class="keyword">from</span> <span class="string">"@/pages/admin/Index"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> New <span class="keyword">from</span> <span class="string">"@/pages/admin/New"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Products <span class="keyword">from</span> <span class="string">"@/pages/admin/Products"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Edit <span class="keyword">from</span> <span class="string">"@/pages/admin/Edit"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Manufacturers <span class="keyword">from</span> <span class="string">"@/pages/admin/Manufacturers"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> NewManufacturers <span class="keyword">from</span> <span class="string">"@/pages/admin/NewManufacturers"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> EditManufacturers <span class="keyword">from</span> <span class="string">"@/pages/admin/EditManufacturers"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> UserIndex <span class="keyword">from</span> <span class="string">"@/pages/user/Index"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Login <span class="keyword">from</span> <span class="string">"@/pages/user/#"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Setting <span class="keyword">from</span> <span class="string">"@/pages/user/Setting"</span>;</span><br><span class="line"></span><br><span class="line">Vue.use(Router);</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Router(&#123;</span><br><span class="line">[tuture-add]<span class="keyword">const</span> router = <span class="keyword">new</span> Router(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">[tuture-del]      path: <span class="string">'/'</span>,</span><br><span class="line">[tuture-del]      name: <span class="string">'Home'</span>,</span><br><span class="line">[tuture-del]      component: Home,</span><br><span class="line">[tuture-add]      path: <span class="string">"/"</span>,</span><br><span class="line">[tuture-add]      name: <span class="string">"Home"</span>,</span><br><span class="line">[tuture-add]      component: Home</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">[tuture-del]      path: <span class="string">'/admin'</span>,</span><br><span class="line">[tuture-del]      name: <span class="string">'Admin'</span>,</span><br><span class="line">[tuture-add]      path: <span class="string">"/admin"</span>,</span><br><span class="line">[tuture-add]      name: <span class="string">"Admin"</span>,</span><br><span class="line">      component: Index,</span><br><span class="line">      children: [</span><br><span class="line">        &#123;</span><br><span class="line">[tuture-del]          path: <span class="string">'new'</span>,</span><br><span class="line">[tuture-del]          name: <span class="string">'New'</span>,</span><br><span class="line">[tuture-del]          component: New,</span><br><span class="line">[tuture-add]          path: <span class="string">"new"</span>,</span><br><span class="line">[tuture-add]          name: <span class="string">"New"</span>,</span><br><span class="line">[tuture-add]          component: New</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">[tuture-del]          path: <span class="string">''</span>,</span><br><span class="line">[tuture-del]          name: <span class="string">'Products'</span>,</span><br><span class="line">[tuture-del]          component: Products,</span><br><span class="line">[tuture-add]          path: <span class="string">""</span>,</span><br><span class="line">[tuture-add]          name: <span class="string">"Products"</span>,</span><br><span class="line">[tuture-add]          component: Products</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">[tuture-del]          path: <span class="string">'edit/:id'</span>,</span><br><span class="line">[tuture-del]          name: <span class="string">'Edit'</span>,</span><br><span class="line">[tuture-del]          component: Edit,</span><br><span class="line">[tuture-add]          path: <span class="string">"edit/:id"</span>,</span><br><span class="line">[tuture-add]          name: <span class="string">"Edit"</span>,</span><br><span class="line">[tuture-add]          component: Edit</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">[tuture-del]          path: <span class="string">'manufacturers'</span>,</span><br><span class="line">[tuture-del]          name: <span class="string">'Manufacturers'</span>,</span><br><span class="line">[tuture-del]          component: Manufacturers,</span><br><span class="line">[tuture-add]          path: <span class="string">"manufacturers"</span>,</span><br><span class="line">[tuture-add]          name: <span class="string">"Manufacturers"</span>,</span><br><span class="line">[tuture-add]          component: Manufacturers</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">[tuture-del]          path: <span class="string">'manufacturers/new'</span>,</span><br><span class="line">[tuture-del]          name: <span class="string">'NewManufacturers'</span>,</span><br><span class="line">[tuture-del]          component: NewManufacturers,</span><br><span class="line">[tuture-add]          path: <span class="string">"manufacturers/new"</span>,</span><br><span class="line">[tuture-add]          name: <span class="string">"NewManufacturers"</span>,</span><br><span class="line">[tuture-add]          component: NewManufacturers</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">[tuture-del]          path: <span class="string">'manufacturers/edit/:id'</span>,</span><br><span class="line">[tuture-del]          name: <span class="string">'EditManufacturers'</span>,</span><br><span class="line">[tuture-del]          component: EditManufacturers,</span><br><span class="line">[tuture-del]        &#125;,</span><br><span class="line">[tuture-add]          path: <span class="string">"manufacturers/edit/:id"</span>,</span><br><span class="line">[tuture-add]          name: <span class="string">"EditManufacturers"</span>,</span><br><span class="line">[tuture-add]          component: EditManufacturers</span><br><span class="line">[tuture-add]        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">[tuture-del]      path: <span class="string">'/cart'</span>,</span><br><span class="line">[tuture-del]      name: <span class="string">'Cart'</span>,</span><br><span class="line">[tuture-del]      component: Cart,</span><br><span class="line">[tuture-add]      path: <span class="string">"/cart"</span>,</span><br><span class="line">[tuture-add]      name: <span class="string">"Cart"</span>,</span><br><span class="line">[tuture-add]      component: Cart</span><br><span class="line">[tuture-add]    &#125;,</span><br><span class="line">[tuture-add]    &#123;</span><br><span class="line">[tuture-add]      path: <span class="string">"/detail/:id"</span>,</span><br><span class="line">[tuture-add]      name: <span class="string">"Detail"</span>,</span><br><span class="line">[tuture-add]      component: Detail</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">[tuture-del]      path: <span class="string">'/detail/:id'</span>,</span><br><span class="line">[tuture-del]      name: <span class="string">'Detail'</span>,</span><br><span class="line">[tuture-del]      component: Detail,</span><br><span class="line">[tuture-add]      path: <span class="string">"/user"</span>,</span><br><span class="line">[tuture-add]      name: <span class="string">"User"</span>,</span><br><span class="line">[tuture-add]      component: UserIndex,</span><br><span class="line">[tuture-add]      children: [</span><br><span class="line">[tuture-add]        &#123;</span><br><span class="line">[tuture-add]          path: <span class="string">"login"</span>,</span><br><span class="line">[tuture-add]          name: <span class="string">"Login"</span>,</span><br><span class="line">[tuture-add]          component: Login</span><br><span class="line">[tuture-add]        &#125;,</span><br><span class="line">[tuture-add]        &#123;</span><br><span class="line">[tuture-add]          path: <span class="string">"settings"</span>,</span><br><span class="line">[tuture-add]          name: <span class="string">"Settings"</span>,</span><br><span class="line">[tuture-add]          component: Setting</span><br><span class="line">[tuture-add]        &#125;</span><br><span class="line">[tuture-add]      ]</span><br><span class="line">    &#125;</span><br><span class="line">[tuture-del]  ],</span><br><span class="line">[tuture-add]  ]</span><br><span class="line">&#125;);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">default</span> router;</span><br></pre></td></tr></table></figure><h2 id="使用-Authing-接入用户系统"><a href="#使用-Authing-接入用户系统" class="headerlink" title="使用 Authing 接入用户系统"></a>使用 Authing 接入用户系统</h2><p>在这一步骤中，我们将正式使用 <span class="exturl" data-url="aHR0cHM6Ly9hdXRoaW5nLmNuLz91dG1fc291cmNlPXR1dHVyZQ==" title="https://authing.cn/?utm_source=tuture">Authing<i class="fa fa-external-link"></i></span> 接入用户系统。Authing 是国内出色的身份认证云，能让我们轻松集成身份认证相关的逻辑，对于个人开发者来说，其<span class="exturl" data-url="aHR0cHM6Ly9hdXRoaW5nLmNuL3ByaWNpbmc/dXRtX3NvdXJjZT10dXR1cmU=" title="https://authing.cn/#?utm_source=tuture">免费使用额度<i class="fa fa-external-link"></i></span>也是相当充足的。</p><p>首先，让我们访问 Authing 官方网站，点击右上角的登录按钮，如下图所示：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d3055eca8c.png"></p><p>进入到登录页面后，我们输入帐户名和密码，会直接为我们创建帐号：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d3095f926b.png"></p><p>进入到控制台后，让我们创建一个新的<span class="exturl" data-url="aHR0cHM6Ly9kb2NzLmF1dGhpbmcuY24vYXV0aGluZy9xdWlja3N0YXJ0L2Jhc2ljI3lvbmctaHUtY2hpP3V0bV9zb3VyY2U9dHV0dXJl" title="https://docs.authing.cn/authing/quickstart/basic#yong-hu-chi?utm_source=tuture">用户池<i class="fa fa-external-link"></i></span>（顾名思义，就是用来管理和存储一系列用户的数据和信息），如下图所示：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d309214195.jpeg"></p><p>在创建用户池的时候，输入我们想要的用户池名称和专属域名后，选择类型为 Web，最后点击，我们的第一个用户池边创建好了。点击“基础配置”书签，可以查看到刚才创建用户池的一些关键信息，特别是用户池 ID，如下图所示：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d32d134626.jpeg"></p><div class="note warning">            <p><strong>注意</strong></p><p>后续应用开发时，所有的用户池 ID（<code>userPoolId</code>）请替换成自己帐户的真实 ID。</p>          </div><h3 id="配置-Vuex-Mutations-和-Store"><a href="#配置-Vuex-Mutations-和-Store" class="headerlink" title="配置 Vuex Mutations 和 Store"></a>配置 Vuex Mutations 和 Store</h3><p>由于我们的应用使用了 <span class="exturl" data-url="aHR0cHM6Ly92dWV4LnZ1ZWpzLm9yZy8=" title="https://vuex.vuejs.org/">Vuex<i class="fa fa-external-link"></i></span> 来解决状态管理问题，因此我们首先需要定义身份验证相关的 Mutation。这里我们定义两个新的 Mutation：</p><ul><li><code>SET_USER</code> ：设置用户身份数据</li><li><code>LOGOUT</code> ：退出登录</li></ul><p>在 <code>client/src/store/mutation-types.js</code> 中添加上面三个 Mutation 常量，代码如下：</p><figure class="highlight js"><figcaption><span>client/src/store/mutation-types.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjhlODNmZjg5ZWQ2ODg1NDg1ODJkMDhkNGM4MWE1Nzk4MTE4N2ExNy9jbGllbnQvc3JjL3N0b3JlL211dGF0aW9uLXR5cGVzLmpz" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f8e83ff89ed688548582d08d4c81a57981187a17/client/src/store/mutation-types.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> ALL_PRODUCTS = <span class="string">'ALL_PRODUCTS'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> ALL_PRODUCTS_SUCCESS = <span class="string">'ALL_PRODUCTS_SUCCESS'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> ALL_PRODUCTS = <span class="string">"ALL_PRODUCTS"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> ALL_PRODUCTS_SUCCESS = <span class="string">"ALL_PRODUCTS_SUCCESS"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> PRODUCT_BY_ID = <span class="string">'PRODUCT_BY_ID'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> PRODUCT_BY_ID_SUCCESS = <span class="string">'PRODUCT_BY_ID_SUCCESS'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> PRODUCT_BY_ID = <span class="string">"PRODUCT_BY_ID"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> PRODUCT_BY_ID_SUCCESS = <span class="string">"PRODUCT_BY_ID_SUCCESS"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> ADD_PRODUCT = <span class="string">'ADD_PRODUCT'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> ADD_PRODUCT_SUCCESS = <span class="string">'ADD_PRODUCT_SUCCESS'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> ADD_PRODUCT = <span class="string">"ADD_PRODUCT"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> ADD_PRODUCT_SUCCESS = <span class="string">"ADD_PRODUCT_SUCCESS"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> UPDATE_PRODUCT = <span class="string">'UPDATE_PRODUCT'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> UPDATE_PRODUCT_SUCCESS = <span class="string">'UPDATE_PRODUCT_SUCCESS'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> UPDATE_PRODUCT = <span class="string">"UPDATE_PRODUCT"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> UPDATE_PRODUCT_SUCCESS = <span class="string">"UPDATE_PRODUCT_SUCCESS"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> REMOVE_PRODUCT = <span class="string">'REMOVE_PRODUCT'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> REMOVE_PRODUCT_SUCCESS = <span class="string">'REMOVE_PRODUCT_SUCCESS'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> REMOVE_PRODUCT = <span class="string">"REMOVE_PRODUCT"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> REMOVE_PRODUCT_SUCCESS = <span class="string">"REMOVE_PRODUCT_SUCCESS"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> ADD_TO_CART = <span class="string">'ADD_TO_CART'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> REMOVE_FROM_CART = <span class="string">'REMOVE_FROM_CART'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> ADD_TO_CART = <span class="string">"ADD_TO_CART"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> REMOVE_FROM_CART = <span class="string">"REMOVE_FROM_CART"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> ALL_MANUFACTURERS = <span class="string">'ALL_MANUFACTURER'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> ALL_MANUFACTURERS_SUCCESS = <span class="string">'ALL_MANUFACTURER_S'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> ALL_MANUFACTURERS = <span class="string">"ALL_MANUFACTURER"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> ALL_MANUFACTURERS_SUCCESS = <span class="string">"ALL_MANUFACTURER_S"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> MANUFACTURER_BY_ID = <span class="string">'MANUFACTURER_BY_ID'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> MANUFACTURER_BY_ID_SUCCESS = <span class="string">'MANUFACTURER_BY_ID_SUCCESS'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> MANUFACTURER_BY_ID = <span class="string">"MANUFACTURER_BY_ID"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> MANUFACTURER_BY_ID_SUCCESS = <span class="string">"MANUFACTURER_BY_ID_SUCCESS"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> ADD_MANUFACTURER = <span class="string">'ADD_MANUFACTURER'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> ADD_MANUFACTURER_SUCCESS = <span class="string">'ADD_MANUFACTURER_SUCCESS'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> ADD_MANUFACTURER = <span class="string">"ADD_MANUFACTURER"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> ADD_MANUFACTURER_SUCCESS = <span class="string">"ADD_MANUFACTURER_SUCCESS"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> UPDATE_MANUFACTURER = <span class="string">'UPDATE_MANUFACTURER'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> UPDATE_MANUFACTURER_SUCCESS = <span class="string">'UPDATE_MANUFACTURER_SUCCESS'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> UPDATE_MANUFACTURER = <span class="string">"UPDATE_MANUFACTURER"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> UPDATE_MANUFACTURER_SUCCESS = <span class="string">"UPDATE_MANUFACTURER_SUCCESS"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> REMOVE_MANUFACTURER = <span class="string">'REMOVE_MANUFACTURER'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">const</span> REMOVE_MANUFACTURER_SUCCESS = <span class="string">'REMOVE_MANUFACTURER_SUCCESS'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> REMOVE_MANUFACTURER = <span class="string">"REMOVE_MANUFACTURER"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> REMOVE_MANUFACTURER_SUCCESS = <span class="string">"REMOVE_MANUFACTURER_SUCCESS"</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> SET_USER = <span class="string">"SET_USER"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> UPDATE_USER = <span class="string">"UPDATE_USER"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> LOGOUT = <span class="string">"LOGOUT"</span>;</span><br></pre></td></tr></table></figure><p>然后我们在 <code>client/src/store/mutations.js</code> 中实现上面定义用户相关 Mutation，代码如下：</p><figure class="highlight js"><figcaption><span>client/src/store/mutations.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjhlODNmZjg5ZWQ2ODg1NDg1ODJkMDhkNGM4MWE1Nzk4MTE4N2ExNy9jbGllbnQvc3JjL3N0b3JlL211dGF0aW9ucy5qcw==" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f8e83ff89ed688548582d08d4c81a57981187a17/client/src/store/mutations.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">  UPDATE_MANUFACTURER_SUCCESS,</span><br><span class="line">  REMOVE_MANUFACTURER,</span><br><span class="line">  REMOVE_MANUFACTURER_SUCCESS,</span><br><span class="line">[tuture-del]&#125; <span class="keyword">from</span> <span class="string">'./mutation-types'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; Message &#125; <span class="keyword">from</span> <span class="string">'element-ui'</span>;</span><br><span class="line">[tuture-add]  SET_USER,</span><br><span class="line">[tuture-add]  UPDATE_USER,</span><br><span class="line">[tuture-add]  LOGOUT</span><br><span class="line">[tuture-add]&#125; <span class="keyword">from</span> <span class="string">"./mutation-types"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; Message &#125; <span class="keyword">from</span> <span class="string">"element-ui"</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> userMutations = &#123;</span><br><span class="line">[tuture-add]  [SET_USER](state, payload) &#123;</span><br><span class="line">[tuture-add]    state.user = payload;</span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  [LOGOUT](state) &#123;</span><br><span class="line">[tuture-add]    state.user = &#123;&#125;;</span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line">[tuture-add]&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> productMutations = &#123;</span><br><span class="line">  [ALL_PRODUCTS](state) &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    state.showLoader = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> &#123; productId &#125; = payload;</span><br><span class="line">[tuture-del]    state.products = state.products.filter(<span class="function"><span class="params">product</span> =&gt;</span> product._id !== productId);</span><br><span class="line">[tuture-add]    state.products = state.products.filter(</span><br><span class="line">[tuture-add]      product =&gt; product._id !== productId</span><br><span class="line">[tuture-add]    );</span><br><span class="line">  &#125;,</span><br><span class="line">  [UPDATE_PRODUCT](state) &#123;</span><br><span class="line">    state.showLoader = <span class="literal">true</span>;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> &#123; <span class="attr">product</span>: newProduct &#125; = payload;</span><br><span class="line">    state.product = newProduct;</span><br><span class="line">[tuture-del]    state.products = state.products.map( <span class="function"><span class="params">product</span> =&gt;</span> &#123;</span><br><span class="line">[tuture-add]    state.products = state.products.map(<span class="function"><span class="params">product</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (product._id === newProduct._id) &#123;</span><br><span class="line">        <span class="keyword">return</span> newProduct;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">    <span class="keyword">const</span> &#123; product &#125; = payload;</span><br><span class="line">    state.cart.push(product);</span><br><span class="line">    Message(&#123;</span><br><span class="line">[tuture-del]      message: <span class="string">'恭喜你，成功加入购物车！'</span>,</span><br><span class="line">[tuture-del]      type: <span class="string">'success'</span></span><br><span class="line">[tuture-del]    &#125;)</span><br><span class="line">[tuture-add]      message: <span class="string">"恭喜你，成功加入购物车！"</span>,</span><br><span class="line">[tuture-add]      type: <span class="string">"success"</span></span><br><span class="line">[tuture-add]    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">  [REMOVE_FROM_CART](state, payload) &#123;</span><br><span class="line">[tuture-del]    <span class="keyword">const</span> &#123; productId &#125; = payload</span><br><span class="line">[tuture-del]    state.cart = state.cart.filter(<span class="function"><span class="params">product</span> =&gt;</span> product._id !== productId)</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> &#123; productId &#125; = payload;</span><br><span class="line">[tuture-add]    state.cart = state.cart.filter(<span class="function"><span class="params">product</span> =&gt;</span> product._id !== productId);</span><br><span class="line">    Message(&#123;</span><br><span class="line">[tuture-del]      message: <span class="string">'恭喜你，成功移除购物车！'</span>,</span><br><span class="line">[tuture-del]      type: <span class="string">'success'</span></span><br><span class="line">[tuture-del]    &#125;)</span><br><span class="line">[tuture-del]  &#125;,</span><br><span class="line">[tuture-add]      message: <span class="string">"恭喜你，成功移除购物车！"</span>,</span><br><span class="line">[tuture-add]      type: <span class="string">"success"</span></span><br><span class="line">[tuture-add]    &#125;);</span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> manufacturerMutations = &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">    state.showLoader = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> &#123; manufacturerId &#125; = payload;</span><br><span class="line">[tuture-del]    state.manufacturers = state.manufacturers.filter(<span class="function"><span class="params">manufacturer</span> =&gt;</span> manufacturer._id !== manufacturerId);</span><br><span class="line">[tuture-add]    state.manufacturers = state.manufacturers.filter(</span><br><span class="line">[tuture-add]      manufacturer =&gt; manufacturer._id !== manufacturerId</span><br><span class="line">[tuture-add]    );</span><br><span class="line">  &#125;,</span><br><span class="line">  [UPDATE_MANUFACTURER](state) &#123;</span><br><span class="line">    state.showLoader = <span class="literal">true</span>;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">    <span class="keyword">const</span> &#123; manufacturer &#125; = payload;</span><br><span class="line">    state.manufacturers = state.manufacturers.concat(manufacturer);</span><br><span class="line">  &#125;</span><br><span class="line">[tuture-del]&#125;</span><br><span class="line">[tuture-add]&#125;;</span><br></pre></td></tr></table></figure><p>最后我们在 Vuex Store 中集成相应的状态与 Mutation，修改 <code>client/src/store/index.js</code> ，代码如下：</p><figure class="highlight js"><figcaption><span>client/src/store/index.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjhlODNmZjg5ZWQ2ODg1NDg1ODJkMDhkNGM4MWE1Nzk4MTE4N2ExNy9jbGllbnQvc3JjL3N0b3JlL2luZGV4Lmpz" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f8e83ff89ed688548582d08d4c81a57981187a17/client/src/store/index.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; productGetters, manufacturerGetters &#125; <span class="keyword">from</span> <span class="string">"./getters"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123;</span><br><span class="line">[tuture-add]  productMutations,</span><br><span class="line">[tuture-add]  cartMutations,</span><br><span class="line">[tuture-add]  manufacturerMutations,</span><br><span class="line">[tuture-add]  userMutations</span><br><span class="line">[tuture-add]&#125; <span class="keyword">from</span> <span class="string">"./mutations"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; productActions, manufacturerActions &#125; <span class="keyword">from</span> <span class="string">"./actions"</span>;</span><br><span class="line"></span><br><span class="line">Vue.use(Vuex);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  strict: <span class="literal">true</span>,</span><br><span class="line">  state: &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">[tuture-add]    <span class="comment">// userInfo</span></span><br><span class="line">[tuture-add]    user: &#123;&#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  mutations: &#123;</span><br><span class="line">    ...productMutations,</span><br><span class="line">    ...cartMutations,</span><br><span class="line">    ...manufacturerMutations,</span><br><span class="line">[tuture-add]    ...userMutations</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h3 id="在根组件-App-中集成用户逻辑"><a href="#在根组件-App-中集成用户逻辑" class="headerlink" title="在根组件 App 中集成用户逻辑"></a>在根组件 App 中集成用户逻辑</h3><p>让我们打开根组件 <code>client/src/App.vue</code>，在其中添加一个 <code>mounted</code> 方法，使得在整个应用刚启动时获取并检查用户身份数据。修改代码如下：</p><figure class="highlight html"><figcaption><span>client/src/App.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjhlODNmZjg5ZWQ2ODg1NDg1ODJkMDhkNGM4MWE1Nzk4MTE4N2ExNy9jbGllbnQvc3JjL0FwcC52dWU=" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f8e83ff89ed688548582d08d4c81a57981187a17/client/src/App.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">// ...</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-del]  name: <span class="string">"App"</span></span></span><br><span class="line"><span class="actionscript">  [tuture-add]  name: <span class="string">"App"</span>,</span></span><br><span class="line">  [tuture-add]  mounted() &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]    <span class="keyword">const</span> userInfo = localStorage.getItem(<span class="string">"userInfo"</span>);</span></span><br><span class="line">  [tuture-add]</span><br><span class="line">  [tuture-add]    if (userInfo) &#123;</span><br><span class="line"><span class="javascript">  [tuture-add]      <span class="keyword">this</span>.$store.commit(<span class="string">"SET_USER"</span>, <span class="built_in">JSON</span>.parse(userInfo));</span></span><br><span class="line">  [tuture-add]    &#125;</span><br><span class="line">  [tuture-add]  &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">// ...</span><br></pre></td></tr></table></figure><p>可以看到，我们从 <code>localStorage</code> 中检查是否有 <code>userInfo</code> 数据，如果有的话通过 <code>SET_USER</code> Mutation 将用户身份数据存入状态中。</p><h3 id="在头部组件-Header-中集成用户逻辑"><a href="#在头部组件-Header-中集成用户逻辑" class="headerlink" title="在头部组件 Header 中集成用户逻辑"></a>在头部组件 Header 中集成用户逻辑</h3><p>打开头部组件 <code>client/src/components/Header.vue</code> ，我们在其中添加用户系统相关的逻辑，修改代码如下：</p><figure class="highlight html"><figcaption><span>client/src/components/Header.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjhlODNmZjg5ZWQ2ODg1NDg1ODJkMDhkNGM4MWE1Nzk4MTE4N2ExNy9jbGllbnQvc3JjL2NvbXBvbmVudHMvSGVhZGVyLnZ1ZQ==" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f8e83ff89ed688548582d08d4c81a57981187a17/client/src/components/Header.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">// ...</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">    props: [<span class="string">"activeIndex"</span>],</span></span><br><span class="line">    data() &#123;</span><br><span class="line"><span class="actionscript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-del]      isLogged: <span class="literal">false</span></span></span><br><span class="line"><span class="actionscript">  [tuture-add]      model: &#123; manufacturer: &#123; name: <span class="string">""</span>, _id: <span class="string">""</span> &#125; &#125;</span></span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">  [tuture-add]  computed: &#123;</span><br><span class="line">  [tuture-add]    isLogged() &#123;</span><br><span class="line"><span class="javascript">  [tuture-add]      <span class="keyword">let</span> token = <span class="keyword">this</span>.$store.state.user.token;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">return</span> !!token;</span></span><br><span class="line">  [tuture-add]    &#125;,</span><br><span class="line">  [tuture-add]    avatar() &#123;</span><br><span class="line"><span class="javascript">  [tuture-add]      <span class="keyword">let</span> photo = <span class="keyword">this</span>.$store.state.user.photo;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">return</span> photo;</span></span><br><span class="line">  [tuture-add]    &#125;</span><br><span class="line">  [tuture-add]  &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      handleLogout() &#123;</span><br><span class="line"><span class="actionscript">  [tuture-del]      <span class="comment">// 处理登出逻辑</span></span></span><br><span class="line"><span class="actionscript">  [tuture-add]      localStorage.removeItem(<span class="string">"token"</span>);</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      localStorage.removeItem(<span class="string">"userInfo"</span>);</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">this</span>.$store.commit(<span class="string">"LOGOUT"</span>);</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>可以看到，我们主要做了以下改变：</p><ul><li>把 <code>isLogged</code> 从原先的 <code>data</code> 变成了一个计算属性，通过从 Vuex Store 中获取 <code>token</code> 是否存在来判断是否登录</li><li>添加了 <code>avatar</code> 计算属性，用于从 Store 中获取用户头像</li><li>实现了 <code>handleLogout</code> 方法，用于处理登出逻辑，包括从 <code>localStorage</code> 中去除 <code>token</code> 和 <code>userInfo</code> 数据，并发起一个 <code>LOGOUT</code> Mutation 用于更新 Store 的状态</li></ul><h3 id="通过-Authing-Guard-实现登录页面"><a href="#通过-Authing-Guard-实现登录页面" class="headerlink" title="通过 Authing Guard 实现登录页面"></a>通过 Authing Guard 实现登录页面</h3><p><span class="exturl" data-url="aHR0cHM6Ly9kb2NzLmF1dGhpbmcuY24vYXV0aGluZy9zZGsvZ3VhcmQ/dXRtX3NvdXJjZT10dXR1cmU=" title="https://docs.authing.cn/authing/sdk/guard?utm_source=tuture">Guard <i class="fa fa-external-link"></i></span>是 Authing 推出的可嵌入登录表单，能够让我们用几行代码为整个应用集成登录和注册功能，集成后的效果如下：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d333d68545.png"></p><p>整体效果还是很 OK 的，而且我们可以通过一些配置项轻松实现定制，下面我们就来看看怎么实现吧。</p><p>首先，我们通过引入 Authing UMD 构建文件来集成 <span class="exturl" data-url="aHR0cHM6Ly9kb2NzLmF1dGhpbmcuY24vYXV0aGluZy9zZGsvZ3VhcmQ/dXRtX3NvdXJjZT10dXR1cmU=" title="https://docs.authing.cn/authing/sdk/guard?utm_source=tuture">Authing Guard<i class="fa fa-external-link"></i></span>。在 <code>client/index.html</code> 文件中通过 <code>script</code> 标签引入：</p><figure class="highlight html"><figcaption><span>client/index.html</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjhlODNmZjg5ZWQ2ODg1NDg1ODJkMDhkNGM4MWE1Nzk4MTE4N2ExNy9jbGllbnQvaW5kZXguaHRtbA==" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f8e83ff89ed688548582d08d4c81a57981187a17/client/index.html">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    [tuture-del]</span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span> /&gt;</span></span><br><span class="line">    [tuture-del]</span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width,initial-scale=1.0"</span> /&gt;</span></span><br><span class="line">    [tuture-add]</span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span> /&gt;</span></span><br><span class="line">    [tuture-add]</span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width,initial-scale=1.0"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue-online-shop<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- built files will be auto injected --&gt;</span></span><br><span class="line">    [tuture-add]</span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/@authing/guard/dist/Guard.umd.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><p>接着打开登录页面组件 <code>client/src/pages/user/#.vue</code>，修改代码如下：</p><figure class="highlight html"><figcaption><span>client/src/pages/user/#.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjhlODNmZjg5ZWQ2ODg1NDg1ODJkMDhkNGM4MWE1Nzk4MTE4N2ExNy9jbGllbnQvc3JjL3BhZ2VzL3VzZXIvTG9naW4udnVl" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f8e83ff89ed688548582d08d4c81a57981187a17/client/src/pages/user/#.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  [tuture-del]</span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"login-form"</span>&gt;</span>用户登录<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"login-form"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  [tuture-del]<span class="keyword">export</span> <span class="keyword">default</span> &#123;&#125;;</span></span><br><span class="line"><span class="javascript">  [tuture-add]<span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">  [tuture-add]  data() &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      model: &#123; manufacturer: &#123; name: <span class="string">""</span>, _id: <span class="string">""</span> &#125; &#125;</span></span><br><span class="line">  [tuture-add]    &#125;;</span><br><span class="line">  [tuture-add]  &#125;,</span><br><span class="line">  [tuture-add]  mounted() &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]    <span class="keyword">const</span> appId = <span class="string">""</span>;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]    <span class="keyword">const</span> userPoolId = <span class="string">""</span>;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]    <span class="keyword">const</span> domain = <span class="string">"https://tuture-first.authing.co"</span>;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="actionscript">  [tuture-add]    <span class="keyword">const</span> form = <span class="keyword">new</span> Guard(userPoolId, &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      logo: <span class="string">"https://tuture.co/images/avatar.png"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      title: <span class="string">"图雀全栈迷你电商"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      mountId: <span class="string">"login-form"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      hideClose: <span class="literal">true</span></span></span><br><span class="line">  [tuture-add]    &#125;);</span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="actionscript">  [tuture-add]    <span class="keyword">const</span> that = <span class="keyword">this</span>;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="actionscript">  [tuture-add]    form.on(<span class="string">"authenticated"</span>, userInfo =&gt; &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      that.$store.commit(<span class="string">"SET_USER"</span>, userInfo);</span></span><br><span class="line"><span class="javascript">  [tuture-add]      localStorage.setItem(<span class="string">"token"</span>, <span class="built_in">JSON</span>.stringify(userInfo.token));</span></span><br><span class="line"><span class="javascript">  [tuture-add]      localStorage.setItem(<span class="string">"userInfo"</span>, <span class="built_in">JSON</span>.stringify(userInfo));</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="actionscript">  [tuture-add]      that.$router.push(<span class="string">"/"</span>);</span></span><br><span class="line">  [tuture-add]    &#125;);</span><br><span class="line">  [tuture-add]  &#125;</span><br><span class="line">  [tuture-add]&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>我们在 <code>mounted</code> 生命周期方法中初始化 <code>Guard</code> 实例。在初始化 <code>Guard</code> 实例时，第一个参数是用户池 ID（<strong><em>记得换成自己的用户池 ID！</em></strong>），可以通过 Authing 控制台获取，第二个参数则是 Guard 组件的一些选项参数：</p><ul><li><code>logo</code> 是我们整个网站的 Logo 图片链接</li><li><code>title</code> 是整个登录表单的标题</li><li><code>mountId</code> 是用于挂载登录表单的 DOM ID，这里就是模板中唯一的 <code>div</code> 元素 <code>login-form</code></li><li><code>hideClose</code> 用于隐藏关闭按钮，因为我们把登录做成了一个独立的页面，不希望用户把登录表单关掉（这样整个页面就一片空白啦）</li></ul><div class="note info">            <p><strong>提示</strong></p><p>关于 <code>Guard</code> 完整的构造函数 API，请参考<span class="exturl" data-url="aHR0cHM6Ly9kb2NzLmF1dGhpbmcuY24vYXV0aGluZy9zZGsvZ3VhcmQjZ291LXphby1oYW4tc2h1LW5ldy1ndWFyZHVzZXJwb29saWQtb3B0aW9ucz91dG1fc291cmNlPXR1dHVyZQ==" title="https://docs.authing.cn/authing/sdk/guard#gou-zao-han-shu-new-guarduserpoolid-options?utm_source=tuture">官方文档<i class="fa fa-external-link"></i></span>。</p>          </div><p>在初始化 <code>Guard</code> 组件后，我们还需要添加身份验证成功后的监听事件函数，即 <code>form.on(&quot;authenticated&quot;, handler)</code> 。可以看到，在回调函数中，我们做了三件事：</p><ol><li>发出 <code>SET_USER</code> Mutation，修改 Store 状态</li><li>在 <code>localStorage</code> 中存储登录后获取的用户信息</li><li>通过 <code>$router</code> 路由重定向到首页</li></ol><div class="note info">            <p><strong>提示</strong></p><p>更多回调事件，可参考<span class="exturl" data-url="aHR0cHM6Ly9kb2NzLmF1dGhpbmcuY24vYXV0aGluZy9zZGsvZ3VhcmQjaHVpLXRpYW8tc2hpLWppYW4tb25ldmVudC1jYWxsYmFjaz91dG1fc291cmNlPXR1dHVyZQ==" title="https://docs.authing.cn/authing/sdk/guard#hui-tiao-shi-jian-onevent-callback?utm_source=tuture">完整事件列表<i class="fa fa-external-link"></i></span>。</p>          </div><p>配置完成后，开启应用，点击登录按钮，就可以看到我们炫酷的登录页面了：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d336625305.jpeg"></p><p>看上去很不错！</p><h2 id="添加权限管理和路由守卫"><a href="#添加权限管理和路由守卫" class="headerlink" title="添加权限管理和路由守卫"></a>添加权限管理和路由守卫</h2><p>在这一步中，我们将配置权限管理和路由守卫。权限管理很容易理解，就是当用户进行某些需要登录的操作（例如添加到购物车）时判断是否已经登录，如果未登录则重定向到登录页面。所谓<span class="exturl" data-url="aHR0cHM6Ly9yb3V0ZXIudnVlanMub3JnL3poL2d1aWRlL2FkdmFuY2VkL25hdmlnYXRpb24tZ3VhcmRzLmh0bWw/dXRtX3NvdXJjZT10dXR1cmU=" title="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html?utm_source=tuture">路由守卫<i class="fa fa-external-link"></i></span>（或称<strong>导航守卫</strong>），就是在进入一个具体的路由（页面）<strong>之前</strong>，判断用户是否具备足够的权限，如果权限不够，则直接重定向到登录页面，否则允许进入该页面。</p><p>在我们的应用中，主要有三个地方需要配置权限：</p><ul><li>商品添加按钮（ProductionButton）</li><li>购物车（Cart）</li><li>后台管理（Admin）</li></ul><p>让我们逐个击破吧。</p><h3 id="添加商品添加按钮的权限管理"><a href="#添加商品添加按钮的权限管理" class="headerlink" title="添加商品添加按钮的权限管理"></a>添加商品添加按钮的权限管理</h3><p>首先，我们需要为商品添加按钮配置权限管理。打开 <code>client/src/components/products/ProductButton.vue</code> 组件，修改 <code>methods</code> 中的 <code>addToCart</code> 和 <code>removeFromCart</code> 方法，代码如下：</p><figure class="highlight html"><figcaption><span>client/src/components/products/ProductButton.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvMTAyMjUzMzVlNjE5NWZkM2NiNGQ5OGM4NGI2NGYzZDI4MDcwNDhhZi9jbGllbnQvc3JjL2NvbXBvbmVudHMvcHJvZHVjdHMvUHJvZHVjdEJ1dHRvbi52dWU=" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/10225335e6195fd3cb4d98c84b64f3d2807048af/client/src/components/products/ProductButton.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">// ...</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// ...</span></span></span><br><span class="line">    methods: &#123;</span><br><span class="line">      addToCart() &#123;</span><br><span class="line"><span class="actionscript">  [tuture-del]      <span class="keyword">this</span>.$store.commit(<span class="string">"ADD_TO_CART"</span>, &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-del]        product: <span class="keyword">this</span>.product</span></span><br><span class="line">  [tuture-del]      &#125;);</span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">const</span> token = localStorage.getItem(<span class="string">"token"</span>);</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">const</span> that = <span class="keyword">this</span>;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line">  [tuture-add]      if (token) &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]        <span class="keyword">this</span>.$store.commit(<span class="string">"ADD_TO_CART"</span>, &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]          product: <span class="keyword">this</span>.product</span></span><br><span class="line">  [tuture-add]        &#125;);</span><br><span class="line"><span class="actionscript">  [tuture-add]      &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]        <span class="keyword">this</span>.$confirm(</span></span><br><span class="line"><span class="actionscript">  [tuture-add]          <span class="string">"你还未登录，点击去登录跳转登录页面，点击取消回到主界面"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]          <span class="string">"提示"</span>,</span></span><br><span class="line">  [tuture-add]          &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]            confirmButtonText: <span class="string">"去登录"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]            cancelButtonText: <span class="string">"取消"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]            type: <span class="string">"warning"</span></span></span><br><span class="line">  [tuture-add]          &#125;</span><br><span class="line">  [tuture-add]        )</span><br><span class="line"><span class="javascript">  [tuture-add]          .then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]            that.$router.push(<span class="string">"/user/#"</span>);</span></span><br><span class="line">  [tuture-add]          &#125;)</span><br><span class="line"><span class="javascript">  [tuture-add]          .catch(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]            <span class="keyword">this</span>.$message(&#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]              type: <span class="string">"info"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]              message: <span class="string">"你已取消"</span></span></span><br><span class="line">  [tuture-add]            &#125;);</span><br><span class="line">  [tuture-add]          &#125;);</span><br><span class="line">  [tuture-add]      &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      removeFromCart(productId) &#123;</span><br><span class="line"><span class="actionscript">  [tuture-del]      <span class="keyword">this</span>.$store.commit(<span class="string">"REMOVE_FROM_CART"</span>, &#123;</span></span><br><span class="line">  [tuture-del]        productId</span><br><span class="line">  [tuture-del]      &#125;);</span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">const</span> token = localStorage.getItem(<span class="string">"token"</span>);</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">const</span> that = <span class="keyword">this</span>;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line">  [tuture-add]      if (token) &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]        <span class="keyword">this</span>.$store.commit(<span class="string">"REMOVE_FROM_CART"</span>, &#123;</span></span><br><span class="line">  [tuture-add]          productId</span><br><span class="line">  [tuture-add]        &#125;);</span><br><span class="line"><span class="actionscript">  [tuture-add]      &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]        <span class="keyword">this</span>.$alert(</span></span><br><span class="line"><span class="actionscript">  [tuture-add]          <span class="string">"点击去登录跳转登录页面，点击取消回到主界面"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]          <span class="string">"你还未登录"</span>,</span></span><br><span class="line">  [tuture-add]          &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]            confirmButtonText: <span class="string">"去登录"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]            cancelButtonText: <span class="string">"取消"</span></span></span><br><span class="line">  [tuture-add]          &#125;</span><br><span class="line">  [tuture-add]        )</span><br><span class="line"><span class="javascript">  [tuture-add]          .then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]            that.$router.push(<span class="string">"/user/#"</span>);</span></span><br><span class="line">  [tuture-add]          &#125;)</span><br><span class="line"><span class="javascript">  [tuture-add]          .catch(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]            <span class="keyword">this</span>.$message(&#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]              type: <span class="string">"info"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]              message: <span class="string">"你已取消"</span></span></span><br><span class="line">  [tuture-add]            &#125;);</span><br><span class="line">  [tuture-add]          &#125;);</span><br><span class="line">  [tuture-add]      &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>可以看到，实现权限管理的思路很简单：先从 <code>localStorage</code> 中判断用于鉴权的 <code>token</code> 是否存在，如果存在则表明已登录，执行相应的 Mutation；如果不存在 <code>token</code>，则弹出 Alert 提示框询问用户是否需要跳转到登录页面进行登录。</p><h3 id="实现购物车的路由守卫"><a href="#实现购物车的路由守卫" class="headerlink" title="实现购物车的路由守卫"></a>实现购物车的路由守卫</h3><p>然后我们来实现购物车的路由守卫。幸运的是，Vue Router 已经为我们提供了<span class="exturl" data-url="aHR0cHM6Ly9yb3V0ZXIudnVlanMub3JnL3poL2d1aWRlL2FkdmFuY2VkL25hdmlnYXRpb24tZ3VhcmRzLmh0bWwjJUU3JUJCJTg0JUU0JUJCJUI2JUU1JTg2JTg1JUU3JTlBJTg0JUU1JUFFJTg4JUU1JThEJUFCP3V0bV9zb3VyY2U9dHV0dXJl" title="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB?utm_source=tuture">组件级别的路由守卫的方法<i class="fa fa-external-link"></i></span> <code>beforeRouteEnter</code> 。打开 <code>client/src/pages/Cart.vue</code>，修改代码如下：</p><figure class="highlight html"><figcaption><span>client/src/pages/Cart.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvMTAyMjUzMzVlNjE5NWZkM2NiNGQ5OGM4NGI2NGYzZDI4MDcwNDhhZi9jbGllbnQvc3JjL3BhZ2VzL0NhcnQudnVl" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/10225335e6195fd3cb4d98c84b64f3d2807048af/client/src/pages/Cart.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">// ...</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">  <span class="comment">// ...</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">    name: <span class="string">"home"</span>,</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// ...</span></span></span><br><span class="line"><span class="javascript">  [tuture-add]  beforeRouteEnter(to, <span class="keyword">from</span>, next) &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]    <span class="keyword">const</span> token = localStorage.getItem(<span class="string">"token"</span>);</span></span><br><span class="line">  [tuture-add]</span><br><span class="line">  [tuture-add]    if (!token) &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]      next(<span class="string">"/user/#"</span>);</span></span><br><span class="line"><span class="actionscript">  [tuture-add]    &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line">  [tuture-add]      next();</span><br><span class="line">  [tuture-add]    &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>依然是通过 <code>localStorage</code> 中尝试获取 <code>token</code> 来判断登录状态，然后通过 <code>next</code> 函数进入合适的路由。</p><h3 id="实现后台管理的路由守卫"><a href="#实现后台管理的路由守卫" class="headerlink" title="实现后台管理的路由守卫"></a>实现后台管理的路由守卫</h3><p>类似地，我们实现后台管理页面的路由守卫。打开 <code>client/src/pages/admin.Index.vue</code>，添加路由守卫方法，代码如下：</p><figure class="highlight html"><figcaption><span>client/src/pages/admin/Index.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvMTAyMjUzMzVlNjE5NWZkM2NiNGQ5OGM4NGI2NGYzZDI4MDcwNDhhZi9jbGllbnQvc3JjL3BhZ2VzL2FkbWluL0luZGV4LnZ1ZQ==" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/10225335e6195fd3cb4d98c84b64f3d2807048af/client/src/pages/admin/Index.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">// ...</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">  <span class="comment">// ...</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// ...</span></span></span><br><span class="line"><span class="javascript">  [tuture-add]  beforeRouteEnter(to, <span class="keyword">from</span>, next) &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]    <span class="keyword">const</span> token = localStorage.getItem(<span class="string">"token"</span>);</span></span><br><span class="line">  [tuture-add]</span><br><span class="line">  [tuture-add]    if (!token) &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]      next(<span class="string">"/user/#"</span>);</span></span><br><span class="line"><span class="actionscript">  [tuture-add]    &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line">  [tuture-add]      next();</span><br><span class="line">  [tuture-add]    &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>完成这一步后，打开应用，我们来看一下添加了权限管理和路由守卫的之后的应用会是怎么样的：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d34166fbdd.gif"></p><h2 id="将用户系统与现有的数据库集成"><a href="#将用户系统与现有的数据库集成" class="headerlink" title="将用户系统与现有的数据库集成"></a>将用户系统与现有的数据库集成</h2><p>仅仅实现登录和注册功能是远远不够的，我们还需要将用户系统集成到现有的数据库中。例如我们在添加商品时，希望能够和具体的用户绑定。</p><p>所幸我们使用的是 MongoDB 数据库，因此不像传统的关系型数据库那样需要繁杂的表结构更新，只需修改数据模型定义即可。</p><h3 id="更新-Mongoose-数据定义"><a href="#更新-Mongoose-数据定义" class="headerlink" title="更新 Mongoose 数据定义"></a>更新 Mongoose 数据定义</h3><p>首先让我们来更新一波 Mongoose 数据定义。打开 <code>server/model/index.js</code> ，修改代码如下：</p><figure class="highlight js"><figcaption><span>server/model/index.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZDFjNWRhZDhlZjRkYjNkNzA2Y2I0ODlkYWQyMzk5Njg0NmI5ZDZiNy9zZXJ2ZXIvbW9kZWwvaW5kZXguanM=" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/d1c5dad8ef4db3d706cb489dad23996846b9d6b7/server/model/index.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> productSchema = Schema(&#123;</span><br><span class="line">  id: ObjectId,</span><br><span class="line">  name: <span class="built_in">String</span>,</span><br><span class="line">  image: <span class="built_in">String</span>,</span><br><span class="line">[tuture-del]  price: <span class="built_in">Number</span>,</span><br><span class="line">[tuture-add]  price: <span class="built_in">String</span>,</span><br><span class="line">  description: <span class="built_in">String</span>,</span><br><span class="line">[tuture-del]  manufacturer: &#123; <span class="attr">type</span>: ObjectId, <span class="attr">ref</span>: <span class="string">'Manufacturer'</span> &#125;</span><br><span class="line">[tuture-add]  user: <span class="built_in">String</span>,</span><br><span class="line">[tuture-add]  manufacturer: &#123; <span class="attr">type</span>: ObjectId, <span class="attr">ref</span>: <span class="string">"Manufacturer"</span> &#125;,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> manufacturerSchema = Schema(&#123;</span><br><span class="line">  id: ObjectId,</span><br><span class="line">  name: <span class="built_in">String</span>,</span><br><span class="line">[tuture-add]  user: <span class="built_in">String</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// ...</span></span><br></pre></td></tr></table></figure><p>可以看到，我们主要是在两个数据模型 <code>productSchema</code> 和 <code>manufacturerSchema</code> 中加入了 <code>user</code> 字段，其他均无需改变。</p><h3 id="配置-Vuex-Action"><a href="#配置-Vuex-Action" class="headerlink" title="配置 Vuex Action"></a>配置 Vuex Action</h3><p>接着我们修改项目的 Action，主要是在两个新增数据的 Action（<code>addProduct</code> 和 <code>addManufacturer</code>）创建模型时记录用户数据。打开 <code>client/src/store/actions.js</code>，修改代码如下：</p><figure class="highlight js"><figcaption><span>client/src/store/actions.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZDFjNWRhZDhlZjRkYjNkNzA2Y2I0ODlkYWQyMzk5Njg0NmI5ZDZiNy9jbGllbnQvc3JjL3N0b3JlL2FjdGlvbnMuanM=" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/d1c5dad8ef4db3d706cb489dad23996846b9d6b7/client/src/store/actions.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> productActions = &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">[tuture-del]  addProduct(&#123; commit &#125;, payload) &#123;</span><br><span class="line">[tuture-add]  addProduct(&#123; commit, state &#125;, payload) &#123;</span><br><span class="line">    commit(ADD_PRODUCT);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> &#123; product &#125; = payload;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> _id = state.user._id;</span><br><span class="line">    axios</span><br><span class="line">[tuture-del]      .post(<span class="string">`<span class="subst">$&#123;API_BASE&#125;</span>/products`</span>, product)</span><br><span class="line">[tuture-add]      .post(<span class="string">`<span class="subst">$&#123;API_BASE&#125;</span>/products`</span>, &#123;</span><br><span class="line">[tuture-add]        ...product,</span><br><span class="line">[tuture-add]        user: _id,</span><br><span class="line">[tuture-add]        manufacturer: product.manufacturer._id</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">      .then(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">      &#125;)</span><br><span class="line">      .catch(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">      &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> manufacturerActions = &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">[tuture-del]  addManufacturer(&#123; commit &#125;, payload) &#123;</span><br><span class="line">[tuture-add]  addManufacturer(&#123; commit, state &#125;, payload) &#123;</span><br><span class="line">    commit(ADD_MANUFACTURER);</span><br><span class="line">    <span class="keyword">const</span> &#123; manufacturer &#125; = payload;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> _id = state.user._id;</span><br><span class="line">[tuture-add]</span><br><span class="line">    axios</span><br><span class="line">[tuture-del]      .post(<span class="string">`<span class="subst">$&#123;API_BASE&#125;</span>/manufacturers`</span>, manufacturer)</span><br><span class="line">[tuture-add]      .post(<span class="string">`<span class="subst">$&#123;API_BASE&#125;</span>/manufacturers`</span>, &#123; ...manufacturer, <span class="attr">user</span>: _id &#125;)</span><br><span class="line">      .then(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">      &#125;)</span><br><span class="line">      .catch(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">      &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>这里我们在前端发起请求创建新数据时，把 <code>user</code> 的 <code>_id</code> 也传了进去，这样数据库里面对应的商品和制造商就会记录相应的用户 ID 啦。</p><h2 id="添加账户设置并修改信息"><a href="#添加账户设置并修改信息" class="headerlink" title="添加账户设置并修改信息"></a>添加账户设置并修改信息</h2><p>在最后一步中，我们将借助 <span class="exturl" data-url="aHR0cHM6Ly9kb2NzLmF1dGhpbmcuY24vYXV0aGluZy9zZGsvc2RrLWZvci1qYXZhc2NyaXB0P3V0bV9zb3VyY2U9dHV0dXJl" title="https://docs.authing.cn/authing/sdk/sdk-for-javascript?utm_source=tuture">Authing SDK<i class="fa fa-external-link"></i></span> 实现更细粒度的用户身份管理，以及个人信息设置页面。首先用 npm 安装 Authing 的 JavaScript SDK：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install authing-js-sdk</span><br></pre></td></tr></table></figure><h3 id="修改-Header-的帐户设置链接"><a href="#修改-Header-的帐户设置链接" class="headerlink" title="修改 Header 的帐户设置链接"></a>修改 Header 的帐户设置链接</h3><p>首先，让我们修改 Header 头部中的帐户设置链接。打开 <code>client/src/components/Header.vue</code>，修改代码如下：</p><figure class="highlight html"><figcaption><span>client/src/components/Header.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjI1ZWI3Y2JlMjNkOTA1NTk0MzM0ZGRlZWRlOWExZTEzZDJkODQ2Mi9jbGllbnQvc3JjL2NvbXBvbmVudHMvSGVhZGVyLnZ1ZQ==" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f25eb7cbe23d905594334ddeede9a1e13d2d8462/client/src/components/Header.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header"</span>&gt;</span></span><br><span class="line">    // ...</span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header-right"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">el-dropdown</span> <span class="attr">v-if</span>=<span class="string">"isLogged"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">el-avatar</span> <span class="attr">class</span>=<span class="string">"el-dropdown-link"</span> <span class="attr">:src</span>=<span class="string">"avatar"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-avatar</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">el-dropdown-menu</span> <span class="attr">slot</span>=<span class="string">"dropdown"</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">el-dropdown-item</span>&gt;</span></span><br><span class="line">            [tuture-del]</span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://tuture-first.authing.co/#/profile"</span>&gt;</span>账户设置<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            [tuture-add]</span><br><span class="line">            <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/user/settings"</span> <span class="attr">tag</span>=<span class="string">"div"</span>&gt;</span>账户设置<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">el-dropdown-item</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">el-dropdown-item</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> @<span class="attr">click</span>=<span class="string">"handleLogout"</span>&gt;</span>退出登录<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">el-dropdown-item</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">el-dropdown-menu</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">el-dropdown</span>&gt;</span></span><br><span class="line">      // ...</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">// ...</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  [tuture-add]<span class="keyword">import</span> Authing <span class="keyword">from</span> <span class="string">"authing-js-sdk"</span>;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// ...</span></span></span><br><span class="line">    methods: &#123;</span><br><span class="line">  [tuture-del]    handleLogout() &#123;</span><br><span class="line"><span class="javascript">  [tuture-add]    <span class="keyword">async</span> handleLogout() &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">const</span> userPoolId = <span class="string">""</span>;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="javascript">  [tuture-add]      <span class="keyword">const</span> token = <span class="built_in">JSON</span>.parse(localStorage.getItem(<span class="string">"token"</span>));</span></span><br><span class="line"><span class="javascript">  [tuture-add]      <span class="keyword">const</span> userId = <span class="built_in">JSON</span>.parse(localStorage.getItem(<span class="string">"userInfo"</span>))._id;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">const</span> authing = <span class="keyword">new</span> Authing(&#123;</span></span><br><span class="line">  [tuture-add]        userPoolId</span><br><span class="line">  [tuture-add]      &#125;);</span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">try</span> &#123;</span></span><br><span class="line"><span class="javascript">  [tuture-add]        <span class="keyword">const</span> res = <span class="keyword">await</span> authing.checkLoginStatus(token);</span></span><br><span class="line"><span class="javascript">  [tuture-add]        <span class="built_in">console</span>.log(<span class="string">"res"</span>, res);</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="javascript">  [tuture-add]        <span class="keyword">await</span> authing.logout(userId);</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="actionscript">  [tuture-add]        <span class="keyword">this</span>.$message(&#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]          message: <span class="string">"成功登出"</span>,</span></span><br><span class="line"><span class="actionscript">  [tuture-add]          type: <span class="string">"success"</span></span></span><br><span class="line">  [tuture-add]        &#125;);</span><br><span class="line"><span class="actionscript">  [tuture-add]      &#125; <span class="keyword">catch</span> (err) &#123;</span></span><br><span class="line"><span class="javascript">  [tuture-add]        <span class="built_in">console</span>.log(<span class="string">"err"</span>, err);</span></span><br><span class="line">  [tuture-add]      &#125;</span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="actionscript">        localStorage.removeItem(<span class="string">"token"</span>);</span></span><br><span class="line"><span class="actionscript">        localStorage.removeItem(<span class="string">"userInfo"</span>);</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">this</span>.$store.commit(<span class="string">"LOGOUT"</span>);</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>可以看到，我们主要做了两点变动：</p><ol><li>在模板中调整“账户设置”的链接，从原先 Authing 的链接替换成了本应用的 <code>/user/settings</code> 路由，这个我们后面马上会实现</li><li>在 <code>handleLogout</code> 方法中，我们在 <code>localStorage</code> 抹去用户信息之前，通过 <code>authing.checkLoginStatus</code> 检查登录状态，然后通过 <code>authing.logout</code> 执行登出操作</li></ol><h3 id="实现-Setting-帐户设置页面"><a href="#实现-Setting-帐户设置页面" class="headerlink" title="实现 Setting 帐户设置页面"></a>实现 Setting 帐户设置页面</h3><p>打开之前已经创建好的设置页面 <code>client/src/pages/user/Setting.vue</code>，实现用户个人信息设置页面，代码如下：</p><figure class="highlight html"><figcaption><span>client/src/pages/user/Setting.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjI1ZWI3Y2JlMjNkOTA1NTk0MzM0ZGRlZWRlOWExZTEzZDJkODQ2Mi9jbGllbnQvc3JjL3BhZ2VzL3VzZXIvU2V0dGluZy52dWU=" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f25eb7cbe23d905594334ddeede9a1e13d2d8462/client/src/pages/user/Setting.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">[tuture-del]  <span class="tag">&lt;<span class="name">div</span>&gt;</span>settings<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">[tuture-add]  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">[tuture-add]    <span class="tag">&lt;<span class="name">app-header</span>&gt;</span><span class="tag">&lt;/<span class="name">app-header</span>&gt;</span></span><br><span class="line">[tuture-add]    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"user-container"</span>&gt;</span></span><br><span class="line">[tuture-add]      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"user-form"</span>&gt;</span></span><br><span class="line">[tuture-add]        <span class="tag">&lt;<span class="name">el-upload</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]          <span class="attr">class</span>=<span class="string">"avatar-uploader"</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]          <span class="attr">action</span>=<span class="string">"https://imgkr.com/api/files/upload"</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]          <span class="attr">:show-file-list</span>=<span class="string">"false"</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]          <span class="attr">:on-success</span>=<span class="string">"handleAvatarSuccess"</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]        &gt;</span></span><br><span class="line">[tuture-add]          <span class="tag">&lt;<span class="name">img</span> <span class="attr">v-if</span>=<span class="string">"imageUrl"</span> <span class="attr">:src</span>=<span class="string">"imageUrl"</span> <span class="attr">class</span>=<span class="string">"avatar"</span> /&gt;</span></span><br><span class="line">[tuture-add]          <span class="tag">&lt;<span class="name">i</span> <span class="attr">v-else</span> <span class="attr">class</span>=<span class="string">"el-icon-plus avatar-uploader-icon"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">[tuture-add]        <span class="tag">&lt;/<span class="name">el-upload</span>&gt;</span></span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]        <span class="tag">&lt;<span class="name">el-form</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]          <span class="attr">:model</span>=<span class="string">"user"</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]          <span class="attr">:rules</span>=<span class="string">"rules"</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]          <span class="attr">ref</span>=<span class="string">"ruleForm"</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]          <span class="attr">label-width</span>=<span class="string">"100px"</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]          <span class="attr">class</span>=<span class="string">"demo-ruleForm"</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]        &gt;</span></span><br><span class="line">[tuture-add]          <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">"昵称"</span> <span class="attr">prop</span>=<span class="string">"nickName"</span>&gt;</span></span><br><span class="line">[tuture-add]            <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">"user.nickname"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-input</span>&gt;</span></span><br><span class="line">[tuture-add]          <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">[tuture-add]          <span class="tag">&lt;<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">[tuture-add]            <span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">"primary"</span> @<span class="attr">click</span>=<span class="string">"submitForm('ruleForm')"</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]              &gt;</span>更新<span class="tag">&lt;/<span class="name">el-button</span></span></span><br><span class="line"><span class="tag">[<span class="attr">tuture-add</span>]            &gt;</span></span><br><span class="line">[tuture-add]          <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">[tuture-add]        <span class="tag">&lt;/<span class="name">el-form</span>&gt;</span></span><br><span class="line">[tuture-add]      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">[tuture-add]    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">[tuture-add]  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">[tuture-add]<span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.avatar-uploader</span> <span class="selector-class">.el-upload</span> &#123;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">dashed</span> <span class="selector-id">#d9d9d9</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">border-radius</span>: 6<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">cursor</span>: <span class="selector-tag">pointer</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">position</span>: <span class="selector-tag">relative</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">overflow</span>: <span class="selector-tag">hidden</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>&#125;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.avatar-uploader</span> <span class="selector-class">.el-upload</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">border-color</span>: <span class="selector-id">#409eff</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>&#125;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.avatar-uploader-icon</span> &#123;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">font-size</span>: 28<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">color</span>: <span class="selector-id">#8c939d</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">width</span>: 178<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">height</span>: 178<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">line-height</span>: 178<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">text-align</span>: <span class="selector-tag">center</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>&#125;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.avatar</span> &#123;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">width</span>: 178<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">height</span>: 178<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">display</span>: <span class="selector-tag">block</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>&#125;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span></span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.user-form</span> &#123;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">width</span>: 500<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>&#125;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span></span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.user-container</span> &#123;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">display</span>: <span class="selector-tag">flex</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">flex-direction</span>: <span class="selector-tag">row</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">justify-content</span>: <span class="selector-tag">center</span>;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span>&#125;</span></span><br><span class="line"><span class="css"><span class="selector-attr">[tuture-add]</span></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">[tuture-add]<span class="keyword">import</span> Header <span class="keyword">from</span> <span class="string">"@/components/Header.vue"</span>;</span></span><br><span class="line"><span class="javascript">[tuture-add]<span class="keyword">import</span> Authing <span class="keyword">from</span> <span class="string">"authing-js-sdk"</span>;</span></span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">  data() &#123;</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">[tuture-del]      model: &#123; manufacturer: &#123; name: <span class="string">""</span>, _id: <span class="string">""</span> &#125; &#125;</span></span><br><span class="line">[tuture-add]      user: &#123;&#125;,</span><br><span class="line"><span class="actionscript">[tuture-add]      imageUrl: <span class="string">""</span>,</span></span><br><span class="line">[tuture-add]      rules: &#123;</span><br><span class="line">[tuture-add]        nickname: [</span><br><span class="line"><span class="actionscript">[tuture-add]          &#123; required: <span class="literal">true</span>, message: <span class="string">"请输入你的昵称"</span>, trigger: <span class="string">"blur"</span> &#125;,</span></span><br><span class="line"><span class="actionscript">[tuture-add]          &#123; min: <span class="number">3</span>, max: <span class="number">25</span>, message: <span class="string">"长度在 3 到 25 个字符"</span>, trigger: <span class="string">"blur"</span> &#125;</span></span><br><span class="line">[tuture-add]        ]</span><br><span class="line">[tuture-add]      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">[tuture-del]  mounted() &#123;&#125;</span><br><span class="line"><span class="actionscript">[tuture-add]  created: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">[tuture-add]    <span class="keyword">const</span> user = <span class="keyword">this</span>.$store.state.user;</span></span><br><span class="line"><span class="actionscript">[tuture-add]    <span class="keyword">const</span> userInfo = localStorage.getItem(<span class="string">"userInfo"</span>);</span></span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="javascript">[tuture-add]    <span class="keyword">if</span> (user &amp;&amp; <span class="built_in">Object</span>.keys(user).length === <span class="number">0</span> &amp;&amp; userInfo) &#123;</span></span><br><span class="line"><span class="javascript">[tuture-add]      <span class="keyword">this</span>.user = <span class="built_in">JSON</span>.parse(userInfo);</span></span><br><span class="line"><span class="actionscript">[tuture-add]      <span class="keyword">this</span>.imageUrl = <span class="keyword">this</span>.user.photo;</span></span><br><span class="line"><span class="actionscript">[tuture-add]    &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="actionscript">[tuture-add]      <span class="keyword">this</span>.user = &#123; ...user &#125;;</span></span><br><span class="line"><span class="actionscript">[tuture-add]      <span class="keyword">this</span>.imageUrl = user.photo;</span></span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  components: &#123;</span><br><span class="line"><span class="actionscript">[tuture-add]    <span class="string">"app-header"</span>: Header</span></span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  methods: &#123;</span><br><span class="line"><span class="javascript">[tuture-add]    <span class="keyword">async</span> handleAvatarSuccess(res, file) &#123;</span></span><br><span class="line">[tuture-add]      if (res.code === 200) &#123;</span><br><span class="line"><span class="actionscript">[tuture-add]        <span class="keyword">this</span>.imageUrl = res.data;</span></span><br><span class="line"><span class="actionscript">[tuture-add]      &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="actionscript">[tuture-add]        <span class="keyword">this</span>.$message.error(<span class="string">"图片上传失败"</span>);</span></span><br><span class="line">[tuture-add]      &#125;</span><br><span class="line">[tuture-add]    &#125;,</span><br><span class="line"><span class="javascript">[tuture-add]    <span class="keyword">async</span> submitForm(formName) &#123;</span></span><br><span class="line"><span class="actionscript">[tuture-add]      <span class="keyword">const</span> nickname = <span class="keyword">this</span>.user.nickname;</span></span><br><span class="line"><span class="actionscript">[tuture-add]      <span class="keyword">const</span> photo = <span class="keyword">this</span>.imageUrl;</span></span><br><span class="line"><span class="actionscript">[tuture-add]      <span class="keyword">const</span> userId = <span class="keyword">this</span>.user._id;</span></span><br><span class="line"><span class="actionscript">[tuture-add]      <span class="keyword">const</span> user = <span class="keyword">this</span>.user;</span></span><br><span class="line"><span class="actionscript">[tuture-add]      <span class="keyword">const</span> that = <span class="keyword">this</span>;</span></span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="javascript">[tuture-add]      <span class="keyword">this</span>.$refs[formName].validate(<span class="keyword">async</span> valid =&gt; &#123;</span></span><br><span class="line">[tuture-add]        if (valid) &#123;</span><br><span class="line"><span class="actionscript">[tuture-add]          <span class="keyword">const</span> token = localStorage.getItem(<span class="string">"token"</span>);</span></span><br><span class="line"><span class="actionscript">[tuture-add]          <span class="keyword">const</span> userPoolId = <span class="string">""</span>;</span></span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="actionscript">[tuture-add]          <span class="keyword">const</span> authing = <span class="keyword">new</span> Authing(&#123;</span></span><br><span class="line">[tuture-add]            userPoolId</span><br><span class="line">[tuture-add]          &#125;);</span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="javascript">[tuture-add]          <span class="keyword">const</span> login = <span class="keyword">await</span> authing.login(&#123;</span></span><br><span class="line"><span class="actionscript">[tuture-add]            email: <span class="string">""</span>,</span></span><br><span class="line"><span class="actionscript">[tuture-add]            password: <span class="string">""</span></span></span><br><span class="line">[tuture-add]          &#125;);</span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="javascript">[tuture-add]          <span class="built_in">console</span>.log(<span class="string">"nickName"</span>, nickname);</span></span><br><span class="line"><span class="actionscript">[tuture-add]          <span class="keyword">try</span> &#123;</span></span><br><span class="line"><span class="javascript">[tuture-add]            <span class="keyword">await</span> authing.update(&#123;</span></span><br><span class="line">[tuture-add]              _id: login._id,</span><br><span class="line">[tuture-add]              photo,</span><br><span class="line">[tuture-add]              nickname</span><br><span class="line">[tuture-add]            &#125;);</span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="actionscript">[tuture-add]            <span class="keyword">const</span> newUser = &#123; ...user, nickname, photo &#125;;</span></span><br><span class="line"><span class="javascript">[tuture-add]            localStorage.setItem(<span class="string">"userInfo"</span>, <span class="built_in">JSON</span>.stringify(newUser));</span></span><br><span class="line"><span class="actionscript">[tuture-add]            that.$store.commit(<span class="string">"SET_USER"</span>, newUser);</span></span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="actionscript">[tuture-add]            <span class="keyword">this</span>.$message(&#123;</span></span><br><span class="line"><span class="actionscript">[tuture-add]              message: <span class="string">"修改信息成功"</span>,</span></span><br><span class="line"><span class="actionscript">[tuture-add]              type: <span class="string">"success"</span></span></span><br><span class="line">[tuture-add]            &#125;);</span><br><span class="line"><span class="actionscript">[tuture-add]          &#125; <span class="keyword">catch</span> (err) &#123;</span></span><br><span class="line"><span class="javascript">[tuture-add]            <span class="built_in">console</span>.log(<span class="string">"err"</span>, err);</span></span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="actionscript">[tuture-add]            <span class="keyword">this</span>.$message.error(<span class="string">"修改信息失败"</span>);</span></span><br><span class="line">[tuture-add]          &#125;</span><br><span class="line"><span class="actionscript">[tuture-add]        &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="javascript">[tuture-add]          <span class="built_in">console</span>.log(<span class="string">"error submit!!"</span>);</span></span><br><span class="line"><span class="actionscript">[tuture-add]          <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line">[tuture-add]        &#125;</span><br><span class="line">[tuture-add]      &#125;);</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>我们主要看一下 <code>script</code> 和 <code>template</code> 部分。首先在 <code>script</code> 部分中，我们的组件包括：</p><ul><li><code>data</code> 字段定义了模板中所需要的数据，包括 <code>user</code> 、<code>imageUrl</code>（头像链接）以及 <code>rules</code>（表单校验规则）</li><li><code>created</code> 生命周期方法用于从 Vuex Store 以及 <code>localStorage</code> 中获取用户数据（<code>localStorage</code> 的优先级更高一些），然后初始化上面的 <code>data</code> 字段</li><li><code>components</code> 用于指定 <code>app-header</code> 组件为我们刚才修改好的 <code>Header</code> 组件</li><li><code>methods</code> 中定义了 <code>handleAvatarSuccess</code> 和 <code>submitForm</code> 两个 Handler，分别用于处理头像上传成功以及提交表单的逻辑。在 <code>submitForm</code> 方法中，我们先从表单中获取到相应的数据，然后通过 <code>authing.update</code> 更新用户数据，成功后再修改 Vuex Store 中的状态</li></ul><h3 id="调整-App-根组件"><a href="#调整-App-根组件" class="headerlink" title="调整 App 根组件"></a>调整 App 根组件</h3><p>让我们调整一下 App 根组件。打开 <code>client/src/App.vue</code> ，修改代码如下：</p><figure class="highlight html"><figcaption><span>client/src/App.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjI1ZWI3Y2JlMjNkOTA1NTk0MzM0ZGRlZWRlOWExZTEzZDJkODQ2Mi9jbGllbnQvc3JjL0FwcC52dWU=" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f25eb7cbe23d905594334ddeede9a1e13d2d8462/client/src/App.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">// ...</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  [tuture-add]<span class="keyword">import</span> Authing <span class="keyword">from</span> <span class="string">"authing-js-sdk"</span>;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">    name: <span class="string">"App"</span>,</span></span><br><span class="line">    mounted() &#123;</span><br><span class="line"><span class="actionscript">  [tuture-del]    <span class="keyword">const</span> userInfo = localStorage.getItem(<span class="string">"userInfo"</span>);</span></span><br><span class="line"><span class="actionscript">  [tuture-add]    <span class="keyword">this</span>.checkLogin();</span></span><br><span class="line">  [tuture-add]  &#125;,</span><br><span class="line">  [tuture-add]  methods: &#123;</span><br><span class="line"><span class="javascript">  [tuture-add]    <span class="keyword">async</span> checkLogin() &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]      <span class="keyword">const</span> token = localStorage.getItem(<span class="string">"token"</span>);</span></span><br><span class="line">  [tuture-add]</span><br><span class="line">  [tuture-add]      if (token) &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]        <span class="keyword">const</span> userPoolId = <span class="string">""</span>;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="actionscript">  [tuture-add]        <span class="keyword">const</span> authing = <span class="keyword">new</span> Authing(&#123;</span></span><br><span class="line">  [tuture-add]          userPoolId</span><br><span class="line">  [tuture-add]        &#125;);</span><br><span class="line">  [tuture-add]</span><br><span class="line"><span class="javascript">  [tuture-add]        <span class="keyword">const</span> result = <span class="keyword">await</span> authing.checkLoginStatus(<span class="built_in">JSON</span>.parse(token));</span></span><br><span class="line">  [tuture-add]</span><br><span class="line">  [tuture-add]        if (result.status) &#123;</span><br><span class="line"><span class="actionscript">  [tuture-add]          <span class="keyword">const</span> userInfo = localStorage.getItem(<span class="string">"userInfo"</span>);</span></span><br><span class="line"></span><br><span class="line">  [tuture-del]    if (userInfo) &#123;</span><br><span class="line"><span class="javascript">  [tuture-del]      <span class="keyword">this</span>.$store.commit(<span class="string">"SET_USER"</span>, <span class="built_in">JSON</span>.parse(userInfo));</span></span><br><span class="line">  [tuture-add]          if (userInfo) &#123;</span><br><span class="line"><span class="javascript">  [tuture-add]            <span class="keyword">this</span>.$store.commit(<span class="string">"SET_USER"</span>, <span class="built_in">JSON</span>.parse(userInfo));</span></span><br><span class="line">  [tuture-add]          &#125;</span><br><span class="line"><span class="actionscript">  [tuture-add]        &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="actionscript">  [tuture-add]          localStorage.removeItem(<span class="string">"token"</span>);</span></span><br><span class="line"><span class="actionscript">  [tuture-add]          localStorage.removeItem(<span class="string">"userInfo"</span>);</span></span><br><span class="line">  [tuture-add]        &#125;</span><br><span class="line">  [tuture-add]      &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">// ...</span><br></pre></td></tr></table></figure><p>可以看到，我们主要实现了一个 <code>checkLogin</code> 方法，用于在整个应用刚挂载时检查登录状态，如果登录成功，则从 <code>storage</code> 里面取出数据并设置进 Redux Store ，如果登录失效，则清空本地的 <code>storage</code> 信息。</p><h3 id="调整其他页面"><a href="#调整其他页面" class="headerlink" title="调整其他页面"></a>调整其他页面</h3><p>最后我们调整一下其他页面的一些细节。修改 <code>client/src/pages/user/Index.vue</code>，代码如下：</p><figure class="highlight html"><figcaption><span>client/src/pages/user/Index.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjI1ZWI3Y2JlMjNkOTA1NTk0MzM0ZGRlZWRlOWExZTEzZDJkODQ2Mi9jbGllbnQvc3JjL3BhZ2VzL3VzZXIvSW5kZXgudnVl" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f25eb7cbe23d905594334ddeede9a1e13d2d8462/client/src/pages/user/Index.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">      [tuture-del]</span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">        [tuture-del]</span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"user-title"</span>&gt;</span></span><br><span class="line">          [tuture-del]</span><br><span class="line">          <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/"</span> <span class="attr">tag</span>=<span class="string">"div"</span>&gt;</span>登录/注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span> [tuture-del]</span><br><span class="line">        <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        [tuture-del] <span class="tag">&lt;<span class="name">router-view</span> /&gt;</span> [tuture-del]</span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      [tuture-add] <span class="tag">&lt;<span class="name">router-view</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-del]</span><span class="selector-class">.user-title</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">cursor</span>: <span class="selector-tag">pointer</span>;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-del]</span>&#125;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-del]</span></span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-del]</span><span class="selector-class">.container</span> &#123;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">margin-top</span>: 40<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-del]</span>&#125;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-del]</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">[tuture-add]<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure><p>继续修改 <code>client/src/pages/user/#.vue</code>，代码如下：</p><figure class="highlight html"><figcaption><span>client/src/pages/user/#.vue</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdnVlLW9ubGluZS1zaG9wLWZyb250ZW5kL2Jsb2IvZjI1ZWI3Y2JlMjNkOTA1NTk0MzM0ZGRlZWRlOWExZTEzZDJkODQ2Mi9jbGllbnQvc3JjL3BhZ2VzL3VzZXIvTG9naW4udnVl" title="https://github.com/tuture-dev/vue-online-shop-frontend/blob/f25eb7cbe23d905594334ddeede9a1e13d2d8462/client/src/pages/user/#.vue">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  [tuture-del]</span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"login-form"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  [tuture-add]</span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    [tuture-add]</span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"user-title"</span>&gt;</span></span><br><span class="line">      [tuture-add]</span><br><span class="line">      <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/"</span> <span class="attr">tag</span>=<span class="string">"div"</span>&gt;</span>用户界面<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span> [tuture-add]</span><br><span class="line">    <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    [tuture-add]</span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"login-form"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    [tuture-add]</span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">[tuture-add]<span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-add]</span><span class="selector-class">.user-title</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">cursor</span>: <span class="selector-tag">pointer</span>;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-add]</span>&#125;</span></span><br><span class="line"><span class="css">  <span class="selector-attr">[tuture-add]</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">[tuture-add] // ...</span><br></pre></td></tr></table></figure><p>当保存上面的修改的代码，我们可以看到如下的效果：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d34c19bd30.gif"></p><h2 id="集成微信、QQ-登录或-Github-登录"><a href="#集成微信、QQ-登录或-Github-登录" class="headerlink" title="集成微信、QQ 登录或 Github 登录"></a>集成微信、QQ 登录或 Github 登录</h2><p>通过上述流程，我们就完成了一个完整的用户系统及其与现有系统的整合，但是有同学发现了，我们在平时生活或工作中，除了常规的手机号+验证码、邮箱密码等，还会有一些更方便的登录方式，如微信登录、QQ 登录等，那么我们如何集成这些方便的登录呢？实际上可能看起来很复杂，但是在我们现有的基础上，用 Authing 可以很方便的集成微信、QQ 登录等。</p><div class="note warning">            <p><strong>注意</strong></p><p>只有企业才能集成微信或 QQ 登录，如果你是个人开发者，那么这一节你可以跳过哦 🤓</p>          </div><h3 id="集成微信扫码登录"><a href="#集成微信扫码登录" class="headerlink" title="集成微信扫码登录"></a>集成微信扫码登录</h3><p>首先去微信官方文档完成注册，然后申请一个<span class="exturl" data-url="aHR0cHM6Ly9vcGVuLndlaXhpbi5xcS5jb20vY2dpLWJpbi9mcmFtZT90PWhvbWUvd2ViX3RtcGwmbGFuZz16aF9DTg==" title="https://open.weixin.qq.com/cgi-bin/frame?t=home/web_tmpl&lang=zh_CN">微信网页应用<i class="fa fa-external-link"></i></span>，然后获取到微信网页应用的 AppID 和 AppSecret：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d3566d0e0d.png"></p><p>接着滑动到底部，将授权回调域改为 <code>oauth.authing.cn</code></p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d360ce9fa8.png"></p><p>然后我们开始去 Authing 控制台，在相应微信登录里面，填入刚刚获取的 <code>AppID</code> 和 <code>AppSecret</code> ：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d366bb0ba1.png"></p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d36d70102e.png"></p><p>注意到上面我们第三个参数 “重定向地址” 填写了我们现在 Vue 全栈电商应用的开发服务器地址，读者应该根据自己当前的需要地址进行对应的填写。</p><p>大功告成，通过上面的步骤我们就配置好了微信网页登录，现在你应该可以看到如下的效果：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d37286a52f.gif"></p><p>我的天！好神奇！就是上面几下手工点按配置，我们就集成好了微信登录！😅</p><h3 id="集成-QQ-登录"><a href="#集成-QQ-登录" class="headerlink" title="集成 QQ 登录"></a>集成 QQ 登录</h3><p>按照和接入微信网页登录类似的方式，我们前往<span class="exturl" data-url="aHR0cHM6Ly9jb25uZWN0LnFxLmNvbS9tYW5hZ2UuaHRtbCMv" title="https://connect.qq.com/manage.html#/"> QQ 互联中心<i class="fa fa-external-link"></i></span>，注册一个账号，并创建一个网页应用。</p><p>然后进入网页应用，将授权回调地址填写为：<code>https://oauth.authing.cn/oauth/qq/redirect</code> ，接着回到 Authing 控制台，我们配置 QQ 登录：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d37ca48ed6.png"></p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d3865db313.png"></p><p>保存之后，大功告成！我们的应用里面就有了 QQ 登录，和微信登录同样简单！</p><h3 id="集成-Github-登录"><a href="#集成-Github-登录" class="headerlink" title="集成 Github 登录"></a>集成 Github 登录</h3><p>最后我们再来尝试集成一下开发者比较喜爱的 Github 登录，看看 Authing 是如何简化这一劳动的呢？</p><p>首先根据 Github 指引，创建一个 <span class="exturl" data-url="aHR0cHM6Ly9kZXZlbG9wZXIuZ2l0aHViLmNvbS9hcHBzL2J1aWxkaW5nLW9hdXRoLWFwcHMvY3JlYXRpbmctYW4tb2F1dGgtYXBwLw==" title="https://developer.github.com/apps/building-oauth-apps/creating-an-oauth-app/">OAuth 应用<i class="fa fa-external-link"></i></span>。</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d38eaec73b.png"></p><p>然后填入如下内容：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d3990fc36f.png"></p><p>其中红框框出来的内容需要填入 Authing 相关的 <code>https://oauth.authing.cn/oauth/github/redirect</code>，然后创建好应用之后，取出 <code>Client ID</code> 和 <code>Client Secret</code> ：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d3a81ef29d.png"></p><p>之后就是类似之前的操作，进入 Authing 控制台，配置 Github 相关的内容：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d3a8503117.png"></p><p>最后可以看到如下效果：</p><p><img alt data-src="https://static.powerformer.com/c/092faf4/172281d3b53de278.gif"></p><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>至此，本篇教程也就结束了，相信你已经感受到了 Authing 身份认证机制的强大与便捷。在当今 Serverless 时代，越来越多标准化的流程（例如身份验证、人工智能应用等等）正在逐渐迈向云端，成为一种可直接消费的资源，而我们作为应用终端的开发者则可以将更多的时间和精力放在打磨和完善自身的产品上，在一定程度上解放了生产力。</p><p>图雀社区秉承“加速技术传播”的理念，致力于推广能够真正让开发者和用户的生活变得更美好的技术。</p>]]></content>
    
    <summary type="html">
    
      在之前的迷你电商应用中，我们的网站缺少了一个关键组成部分：用户鉴权系统，包括登录、注册、以及权限管理等相应的配置。徒手实现这些功能固然可行，但是对于一支崇尚精益的团队来说，选择可靠的身份认证服务（IDaaS）是更加明智的选择，不仅能够提供完善且丰富的身份认证和用户鉴权功能，还确保遵循最佳安全实践和优秀的可扩展性。在这篇教程中，我们将手把手带你在本系列之前完成的迷你电商应用中快速集成 Authing 用户认证模块，提供一致、流畅、安全的身份认证体验。
    
    </summary>
    
    
      <category term="前端" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="Vue" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/Vue/"/>
    
      <category term="入门" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/Vue/%E5%85%A5%E9%97%A8/"/>
    
    
      <category term="Vue" scheme="https://tuture.co/tags/Vue/"/>
    
      <category term="Express" scheme="https://tuture.co/tags/Express/"/>
    
      <category term="OAuth" scheme="https://tuture.co/tags/OAuth/"/>
    
      <category term="Authing" scheme="https://tuture.co/tags/Authing/"/>
    
      <category term="第三方登录" scheme="https://tuture.co/tags/%E7%AC%AC%E4%B8%89%E6%96%B9%E7%99%BB%E5%BD%95/"/>
    
  </entry>
  
  <entry>
    <title>Taro 小程序开发大型实战（七）：使用 Authing 打造完整且强大的用户系统</title>
    <link href="https://tuture.co/2020/05/17/2b5a9f1/"/>
    <id>https://tuture.co/2020/05/17/2b5a9f1/</id>
    <published>2020-05-16T17:37:06.464Z</published>
    <updated>2021-07-11T07:16:33.909Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><img alt class="avatar" data-src="/images/avatars/tuture-dev.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><p class="nickName">@tuture-dev</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yg==" title="https://github.com/tuture-dev/ultra-club"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="准备新版登录逻辑"><a href="#准备新版登录逻辑" class="headerlink" title="准备新版登录逻辑"></a>准备新版登录逻辑</h2><p>之前我们的小程序具有了一个简单博客必备的一些功能：</p><ul><li>权限管理：发帖之前需要登录</li><li>登录：普通登录和微信登录等</li><li>发帖：帖子会自动带上用户信息</li><li>获取所有帖子和单个帖子</li></ul><p>乍一看这个博客有点小完整了，但是一路跟下来的同学应该知道，我们之前的登录都是通过传入用户的 <code>nickName</code> 和 <code>photo</code> 来登录的，但是我们一般在生活中看到的一些比较正规的网站或者小程序，它们的登录一般都有类似手机+验证码登录，并且在一个标准的博客里面，可能还会涉及到诸如用户权限管理，用户登录状态查询等，刚刚我提到的种种关于用户的场景一般会被抽象为一个应用里的一个核心模块 – 用户系统，即所有和用户注册/登录、信息更新、权限管理、鉴权等相关的内容。</p><p>为了让我们的博客看起来更加专业，我们打算给它也加上整上一个专业的用户系统，有了最为核心的用户系统在，我们博客之后的扩展都可以游刃有余，但是据统计，一个应用要想打造一个比较专业的用户系统，至少需要花费几个月时间，还需要花大量的精力去维护打造出来的用户系统，所在在做了一番调研之后，我们将目标放在了一个叫做 Authing 的通用云身份平台，它提供的服务就是帮应用快速集成一个高效、安全的用户系统，而我们这篇教程将会讲解如何借助 Authing 来给我们的之前的小程序博客武装一个专业的用户系统。</p><p>首先我们先来看一看完成的效果：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab2f4dfe98.gif"></p><p><img alt data-src="https://cdn.nlark.com/yuque/0/2020/gif/123790/1588231679722-a000569d-8acf-4e8c-be6d-e7288dadacb2.gif"></p><p>如果你希望直接从这篇开始，那么可以 Clone 我们为你准备的代码，然后跟着教程补充剩下的部分：</p><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git clone -b authing-start https:&#x2F;&#x2F;github.com&#x2F;tuture-dev&#x2F;ultra-club.git</span><br><span class="line"></span><br><span class="line"># 或者下载 Gitee 上的仓库</span><br><span class="line">git clone -b authing-start https:&#x2F;&#x2F;gitee.com&#x2F;tuture&#x2F;ultra-club.git</span><br></pre></td></tr></table></figure><h3 id="改进普通登录"><a href="#改进普通登录" class="headerlink" title="改进普通登录"></a>改进普通登录</h3><p>首先我们来将之前普通登录的专业性提升一个档次，之前我们是让用户输入昵称和上传头像然后进行登录，现在我们打算切换到手机号+验证码的形式，立马现代化。</p><p>打开 <code>src/components/#Form/index.jsx</code> 文件，对其中的内容作出对应的修改如下：</p><figure class="highlight jsx"><figcaption><span>src/components/#Form/index.jsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iLzRhODVjZDAwNWQ4YmU2MTNkMDhjMThjMjVlYTE2MzM3MDNlMzBlYmEvc3JjL2NvbXBvbmVudHMvTG9naW5Gb3JtL2luZGV4LmpzeA==" title="https://github.com/tuture-dev/ultra-club/blob/4a85cd005d8be613d08c18c25ea1633703e30eba/src/components/#Form/index.jsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> Taro, &#123; useState &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> Taro, &#123; useState, useRef, useEffect &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line"><span class="keyword">import</span> &#123; View, Form &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span></span><br><span class="line"><span class="keyword">import</span> &#123; AtButton, AtImagePicker &#125; <span class="keyword">from</span> <span class="string">'taro-ui'</span></span><br><span class="line"><span class="keyword">import</span> &#123; useDispatch &#125; <span class="keyword">from</span> <span class="string">'@tarojs/redux'</span></span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; LOGIN &#125; <span class="keyword">from</span> <span class="string">'../../constants'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; SET_IS_OPENED, SET_LOGIN_INFO &#125; <span class="keyword">from</span> <span class="string">'../../constants'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> CountDownButton <span class="keyword">from</span> <span class="string">'../CountDownButton'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./index.scss'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">LoginForm</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Login Form 登录数据</span></span><br><span class="line">[tuture-del]  <span class="keyword">const</span> [formNickName, setFormNickName] = useState(<span class="string">''</span>)</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> [files, setFiles] = useState([])</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> [showAddBtn, setShowAddBtn] = useState(<span class="literal">true</span>)</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [phone, setPhone] = useState(<span class="string">''</span>)</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [phoneCode, setPhoneCode] = useState(<span class="string">''</span>)</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> countDownButtonRef = useRef(<span class="literal">null</span>)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> dispatch = useDispatch()</span><br><span class="line"></span><br><span class="line">[tuture-del]  <span class="function"><span class="keyword">function</span> <span class="title">onChange</span>(<span class="params">files</span>) </span>&#123;</span><br><span class="line">[tuture-del]    <span class="keyword">if</span> (files.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">[tuture-del]      setShowAddBtn(<span class="literal">false</span>)</span><br><span class="line">[tuture-del]    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">[tuture-del]      setShowAddBtn(<span class="literal">true</span>)</span><br><span class="line">[tuture-add]  <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">countDownButtonPressed</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (!phone) &#123;</span><br><span class="line">[tuture-add]      Taro.atMessage(&#123;</span><br><span class="line">[tuture-add]        type: <span class="string">'error'</span>,</span><br><span class="line">[tuture-add]        message: <span class="string">'您还没有填写手机!'</span>,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      <span class="keyword">return</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]    setFiles(files)</span><br><span class="line">[tuture-del]  &#125;</span><br><span class="line">[tuture-add]    countDownButtonRef.current.startCountDown()</span><br><span class="line"></span><br><span class="line">[tuture-del]  <span class="function"><span class="keyword">function</span> <span class="title">onImageClick</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-del]    Taro.previewImage(&#123;</span><br><span class="line">[tuture-del]      urls: [props.files[<span class="number">0</span>].url],</span><br><span class="line">[tuture-del]    &#125;)</span><br><span class="line">[tuture-add]    <span class="comment">// 处理发送验证码事件</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">handleSubmit</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    e.preventDefault()</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 鉴权数据</span></span><br><span class="line">[tuture-del]    <span class="keyword">if</span> (!formNickName || !files.length) &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (!phone || !phoneCode) &#123;</span><br><span class="line">      Taro.atMessage(&#123;</span><br><span class="line">        type: <span class="string">'error'</span>,</span><br><span class="line">        message: <span class="string">'您还有内容没有填写！'</span>,</span><br><span class="line">      &#125;)</span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]    setShowAddBtn(<span class="literal">true</span>)</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]    <span class="comment">// 提示登录成功</span></span><br><span class="line">[tuture-del]    Taro.atMessage(&#123;</span><br><span class="line">[tuture-del]      type: <span class="string">'success'</span>,</span><br><span class="line">[tuture-del]      message: <span class="string">'恭喜您，登录成功！'</span>,</span><br><span class="line">[tuture-del]    &#125;)</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]    <span class="comment">// 缓存在 storage 里面</span></span><br><span class="line">[tuture-del]    <span class="keyword">const</span> userInfo = &#123; <span class="attr">avatar</span>: files[<span class="number">0</span>].url, <span class="attr">nickName</span>: formNickName &#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]    <span class="comment">// 清空表单状态</span></span><br><span class="line">[tuture-del]    setFiles([])</span><br><span class="line">[tuture-del]    setFormNickName(<span class="string">''</span>)</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]    <span class="comment">// 向后端发起登录请求</span></span><br><span class="line">[tuture-del]    dispatch(&#123; <span class="attr">type</span>: LOGIN, <span class="attr">payload</span>: &#123; <span class="attr">userInfo</span>: userInfo &#125; &#125;)</span><br><span class="line">[tuture-add]    <span class="comment">// 处理登录和注册</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"post-form"</span>&gt;</span><br><span class="line">      &lt;Form onSubmit=&#123;handleSubmit&#125;&gt;</span><br><span class="line">        &lt;View className=<span class="string">"login-box"</span>&gt;</span><br><span class="line">[tuture-del]          &lt;View className=<span class="string">"avatar-selector"</span>&gt;</span><br><span class="line">[tuture-del]            &lt;AtImagePicker</span><br><span class="line">[tuture-del]              length=&#123;<span class="number">1</span>&#125;</span><br><span class="line">[tuture-del]              mode=<span class="string">"scaleToFill"</span></span><br><span class="line">[tuture-del]              count=&#123;<span class="number">1</span>&#125;</span><br><span class="line">[tuture-del]              files=&#123;files&#125;</span><br><span class="line">[tuture-del]              showAddBtn=&#123;showAddBtn&#125;</span><br><span class="line">[tuture-del]              onImageClick=&#123;onImageClick&#125;</span><br><span class="line">[tuture-del]              onChange=&#123;onChange&#125;</span><br><span class="line">[tuture-del]            /&gt;</span><br><span class="line">[tuture-del]          &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">          &lt;Input</span></span><br><span class="line"><span class="regexp">[tuture-del]            className="input-nickName"</span></span><br><span class="line"><span class="regexp">[tuture-add]            className="input-phone input-item"</span></span><br><span class="line"><span class="regexp">            type="text"</span></span><br><span class="line"><span class="regexp">[tuture-del]            placeholder="点击输入昵称"</span></span><br><span class="line"><span class="regexp">[tuture-del]            value=&#123;formNickName&#125;</span></span><br><span class="line"><span class="regexp">[tuture-del]            onInput=&#123;e =&gt; setFormNickName(e.target.value)&#125;</span></span><br><span class="line"><span class="regexp">[tuture-add]            placeholder="输入手机号"</span></span><br><span class="line"><span class="regexp">[tuture-add]            value=&#123;phone&#125;</span></span><br><span class="line"><span class="regexp">[tuture-add]            onInput=&#123;e =&gt; setPhone(e.target.value)&#125;</span></span><br><span class="line"><span class="regexp">          /</span>&gt;</span><br><span class="line">[tuture-add]          &lt;View className=<span class="string">"verify-code-box"</span>&gt;</span><br><span class="line">[tuture-add]            &lt;Input</span><br><span class="line">[tuture-add]              className=<span class="string">"input-nickName input-item"</span></span><br><span class="line">[tuture-add]              type=<span class="string">"text"</span></span><br><span class="line">[tuture-add]              placeholder=<span class="string">"四位验证码"</span></span><br><span class="line">[tuture-add]              value=&#123;phoneCode&#125;</span><br><span class="line">[tuture-add]              onInput=&#123;e =&gt; setPhoneCode(e.target.value)&#125;</span><br><span class="line">[tuture-add]            /&gt;</span><br><span class="line">[tuture-add]            &lt;CountDownButton</span><br><span class="line">[tuture-add]              onClick=&#123;countDownButtonPressed&#125;</span><br><span class="line">[tuture-add]              ref=&#123;countDownButtonRef&#125;</span><br><span class="line">[tuture-add]            /&gt;</span><br><span class="line">[tuture-add]          &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">          &lt;AtButton formType="submit" type="primary"&gt;</span></span><br><span class="line"><span class="regexp">            登录</span></span><br><span class="line"><span class="regexp">          &lt;/</span>AtButton&gt;</span><br><span class="line">[tuture-add]          &lt;View className=<span class="string">"at-article__info"</span>&gt;</span><br><span class="line">[tuture-add]            通过手机和验证码来登录，如果没有账号，我们将自动创建</span><br><span class="line">[tuture-add]          &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>View&gt;</span><br><span class="line">      &lt;<span class="regexp">/Form&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，上面的代码主要有如下几处更改：</p><ul><li>删除了处理 <code>avatar</code> 和 <code>nickName</code> 的 <code>useState</code> 逻辑</li><li>删除了之前用于处理上传头像的 <code>onImageClick</code> 和 <code>onChange</code> 函数，以及 <code>AtImagePicker</code> 组件</li><li>改进和增加了两个输入框，一个用于输入手机号，一个用于输入验证码，同是增加了 <code>phone</code> 和 <code>phoneCode</code> 的 <code>useState</code> 逻辑</li><li>改进 <code>handleSubmit</code> ，删除了原处理 <code>nickName</code> 和 <code>files</code> 的逻辑，以及删除了之前发起登录的 <code>dispatch</code> 逻辑</li><li>接着我们增加了一个用于倒计时的 <code>CountDownButton</code> 组件，以及获取 <code>ref</code> 的 <code>countDownButtonRef</code> 和处理按钮点击事件的 <code>countDownButtonPressed</code> 函数，在函数里面我们会做数据验证，如果用户填写了手机号，才允许执行倒计时逻辑，在接下来我们将在这个函数里面处理手机验证码发送逻辑。</li><li>最后我们添加了提示用户使用手机和验证码登录的文案。</li></ul><div class="note info">            <p><strong>提示</strong></p><p>这里的 CountDownButton 是 Taro 官方物料市场提供的物料，可以访问 <a href>这个地址</a>，下载物料，然后将 CountDownButton 的文件夹放到 <code>src/compontents</code> 文件夹下面。我们还需要对这个组件的样式做一点修改，以适应我们现在的 UI 风格，我们将马上来讲解如何修改，读者先可以下载这个物料，然后放置到刚刚提到的项目目录下。</p>          </div><h3 id="样式改进"><a href="#样式改进" class="headerlink" title="样式改进"></a>样式改进</h3><p>上面我们改进了组件，为了让我们的新版登录样子看起来更加专业、统一，我们加点样式，打开 <code>src/components/#Form/index.scss</code> 文件，对其中的内容作出对应的修改如下：</p><figure class="highlight scss"><figcaption><span>src/components/#Form/index.scss</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iLzRhODVjZDAwNWQ4YmU2MTNkMDhjMThjMjVlYTE2MzM3MDNlMzBlYmEvc3JjL2NvbXBvbmVudHMvTG9naW5Gb3JtL2luZGV4LnNjc3M=" title="https://github.com/tuture-dev/ultra-club/blob/4a85cd005d8be613d08c18c25ea1633703e30eba/src/components/#Form/index.scss">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.post-form</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">30px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="selector-class">.input-nickName</span> &#123;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.input-item</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: medium;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">40px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.input-phone</span> &#123;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>&#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span></span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.input-nickName</span> &#123;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">width</span>: calc(<span class="number">100%</span> - <span class="number">200px</span>);</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>&#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span></span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.verify-code-box</span> &#123;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">display</span>: flex;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">flex-direction</span>: row;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">align-items</span>: center;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>&#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span></span><br><span class="line"><span class="selector-class">.avatar-selector</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="使用-Taro-物料"><a href="#使用-Taro-物料" class="headerlink" title="使用 Taro 物料"></a>使用 Taro 物料</h3><p>我们上面用到的 <code>CountDownButton</code> 组件，就是 Taro 物料市场的一个物料, 简单的说物料就是一个能某方面功能完善的包或组件,帮助开发者快速完成某个逻辑而不需要重复造轮子,正如 Taro 物料市场官方的标语：</p><blockquote><p>让每一个让每一个轮子产生价值</p></blockquote><p>我们通过之前的步骤，应该已经下载好了物料，并放在了 <code>src/components</code> 文件夹下面了，可以看到组件中主要就是两个文件，一个逻辑文件 <code>src/components/CountDownButton/index.js</code> ，还有一个样式文件 <code>src/components/CountDownButton/index.css</code>是，这里我们要做个小修改就是逻辑文件里面引用的是 <code>index.scss</code> 文件，我们需要一下这个样式文件的后缀为 <code>index.scss</code> 。</p><p>接着为了和我们的现有的 UI 统一，我们还改了 <code>src/components/CountDownButton/index.scss</code>文件的 <code>activeButtonStyle</code> 和 <code>buttonCommonStyle</code> 样式，最后的文件内容如下：</p><figure class="highlight scss"><figcaption><span>src/components/CountDownButton/index.scss</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iLzRhODVjZDAwNWQ4YmU2MTNkMDhjMThjMjVlYTE2MzM3MDNlMzBlYmEvc3JjL2NvbXBvbmVudHMvQ291bnREb3duQnV0dG9uL2luZGV4LnNjc3M=" title="https://github.com/tuture-dev/ultra-club/blob/4a85cd005d8be613d08c18c25ea1633703e30eba/src/components/CountDownButton/index.scss">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 按钮默认展现样式 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.buttonCommonStyle</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">160px</span>;</span><br><span class="line">  <span class="attribute">height</span>: calc(<span class="number">1.4rem</span> + <span class="number">20px</span>);</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">  <span class="attribute">border</span>: none;</span><br><span class="line">  <span class="attribute">outline</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 禁用时候的TouchableOpacity样式 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.disableButtonStyle</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#f6f6f6</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 可以点击时候的TouchableOpacity样式 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.activeButtonStyle</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#02b875</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 文本默认样式 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.txtCommonStyle</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 禁用时Text样式 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.disableTxtStyle</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 可以点击时候的Text样式 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.activeTxtStyle</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>大功告成！🥳，我们成功的完成了新版普通登录的界面，当你保存代码，并在根目录下通过 <code>npm run dev:weapp</code> 开启微信小程序，并使用开发者工具打开我们的项目时，它的效果应该类型下面这样：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab2f71d1d2.png"></p><p>怎么样，是不是和你之前体验的各种专业 App 或者网站、小程序的登录注册界面和逻辑类似了呢？😆，有了这样一个专业的登录界面之后，我们接下来将要把它整个从前端到后端的逻辑跑通，下一步我们将跑通这个登录和注册逻辑。</p><div class="note info">            <p><strong>提示</strong></p><p>这里我们将登录和注册页面整合在了一起，通过在登录按钮下方的小文字提示，如果用户没有账号，那么通过手机号和验证码登录之后，我们会为用户直接注册一个账号，而简化界面逻辑的背后通常需要在代码逻辑上做出大量的改进、优化等，然而我们在下一步即将接入的通用的身份云平台 – Authing 则将这一逻辑简化到了几行代码。</p>          </div><h2 id="使用-Authing-接入完整的用户系统"><a href="#使用-Authing-接入完整的用户系统" class="headerlink" title="使用 Authing 接入完整的用户系统"></a>使用 Authing 接入完整的用户系统</h2><p>在文章开头和上一小结末尾买了那么多关子，说 Authing 如何简化我们的开发成本，有些读者估计都有点急不可耐了，这个 Authing 有这么方便嘛？，我们这一节就来开始深入使用它。</p><p>为了将 Authing 接入我们的博客小程序，我们需要做以下几点准备：</p><ul><li>注册 Authing 账号并创建一个 “小程序” 类型的用户池</li><li>通过官方文档，找到小程序 SDK，并下载对于的文件放置到项目目录下</li><li>在项目代码中导入 Authing 小程序 SDK，并开始使用</li></ul><h3 id="注册-Authing-账号"><a href="#注册-Authing-账号" class="headerlink" title="注册 Authing 账号"></a>注册 Authing 账号</h3><p>打开<span class="exturl" data-url="aHR0cHM6Ly9hdXRoaW5nLmNuLz91dG1fc291cmNlPXR1dHVyZQ==" title="https://authing.cn/?utm_source=tuture"> Authing 官网<i class="fa fa-external-link"></i></span>，我们会看到如下界面：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab2faef61e.png"></p><p>我们点击右上角的登录，可以看到，它会弹出如下界面：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab31cb9682.png"></p><p>我们这时候可以慢下脚步，好好看一下提供通用身份云平台的公司，他们的登录界面是怎么样的呢？可以看到，我们熟悉的微信登录、邮箱+密码登录、手机号+验证码登录、还有技术开发者常用的 Github 登录，甚至还有一个比较特殊的小程序扫码登录，基本将互联网上我们可能用到的最高效率的用户登录、注册功能逻辑都集成进了一个小小的表单里面。</p><p>读者可以自行选择自己喜欢的登录方式 😋，这里图雀酱选择了微信登录，然后在弹出的扫码界面，使用微信扫码二维码登录。登录之后，会弹出一个界面让你绑定手机号，读者这里可以自行选择是否绑定。当完成了这一步操作之后，界面会导航带你来到一个创建应用的界面，我们选择小程序，然后点击下一步：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab328a8600.png"></p><p>接着，会问你的应用是干什么的，我们填入：“图雀社区博客小程序”（读者这里可以自行脑补），然后我们点击下一步：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab6a4f7cf8.png"></p><p>接着会让你设置一个二级域名，我们输入 tuture-blog-miniprogram，然后我们点击完成：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab5e1312d8.png"></p><p>接下来我们回来到一个快速体验 Authing 功能的界面，系统为你默认创建了一个账号：</p><ul><li>账号：<code>test@test.com</code></li><li>密码：<code>123456a!</code></li></ul><p>你可以在右边的界面里面体验是否可以登录，当然你也可以注册一个用户，注册的用户稍后我们可以在控制台我们创建的 “图雀社区博客小程序” 用户池里面看到这个注册的用户：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab6fdfbb33.png"></p><p>并且上面的界面还讲解了如何快速集成 Authing 的登录功能和检查登录状态，并给出了 JS 实现代码，以及左下角的 Guard ，这个 Guard 简单来说就是一个集合了我们之前看到的 Authing 那个注册、登录表单的功能，并且提供一个专业的界面给你，使得你可以几行代码就实现一个类似 Authing 官方注册登录的那个样子。也就是我们刚刚看到的这个界面：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab31cb9682.png"></p><div class="note info">            <p><strong>提示</strong></p><p>我们在图雀社区的全栈电商系列文章的番外篇里面集成用户系统有讲到如何使用，感兴趣的读者可以阅读此篇文章。</p>          </div><p>好的，我们点击左下角的 “知道了，进入控制台”，开始进入我们的 Authing 用户池管理控制台，在此之前还会让你填写一个回调地址，这个我们暂时用不到，你可以跳过，或者可以随便填写一个，比如 <code>http://localhost:3000</code>。</p><p>最后，我们来到了这样一个界面：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab67e5569b.png"></p><p>可以看到这个界面左侧就是我们之前一直提到的 “用户池” 管理界面，默认选中了我们刚刚创建的 “图雀社区博客小程序”，一个用户池就是一整套用户以及和用户登录、注册、鉴权、登录状态、活跃、权限等有关的逻辑。</p><p>中间就是单个用户池里面的一些介绍，比如我们现在看到的是一个类似 Github 那个热力图一样的用户登录热力图，你可以方便的看到那天有多少次用户登录，往下滑可以看到更多用户数据分析方面的图表和内容。</p><h3 id="下载和配置-SDK"><a href="#下载和配置-SDK" class="headerlink" title="下载和配置 SDK"></a>下载和配置 SDK</h3><p>注册完账号、建立了用户池，我们需要下载 Authing 为我们提供的微信小程序 SDK 来集成用户系统，点击<span class="exturl" data-url="aHR0cHM6Ly9kb2NzLmF1dGhpbmcuY24vYXV0aGluZy9zZGsvYXV0aGluZy1zZGstZm9yLXd4YXBwP3V0bV9zb3VyY2U9dHV0dXJl" title="https://docs.authing.cn/authing/sdk/authing-sdk-for-wxapp?utm_source=tuture">这个链接<i class="fa fa-external-link"></i></span>去往小程序开发文档。</p><p>根据文档，我们需要在微信小程序后台配置两个域名白名单：</p><ul><li><code>https://oauth.authing.cn</code> 和 <code>https://users.authing.cn</code></li></ul><p>然后将微信小程序的 <code>AppId</code> 和 <code>AppSecret</code> 填入 Authing 对应的地址：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab696b133d.png"></p><p>这个界面，然后滑动到底部，选择小程序内登陆：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab9666de85.png"></p><p>在弹出的框里面填入对应的微信小程序的 <code>AppId</code> 和 <code>AppSecret</code> ：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab9903fdd9.png"></p><p>配置好之后，我们接下来可以将 SDK 代码下载，并放进我们的项目里，找一个地方（非现有项目中），运行如下脚本，Clone 小程序 SDK：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ git <span class="built_in">clone</span> https://github.com/Authing/authing-wxapp-sdk</span><br></pre></td></tr></table></figure><p>然后打开此项目，将其中的 <code>authing</code> 文件夹拷贝进我们 <code>ultra-club</code> 小程序的 <code>src/utils</code> 目录下，最后的目录结构看起来应该是这样：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">src</span><br><span class="line">├── store</span><br><span class="line">│   └── index.js</span><br><span class="line">└── utils</span><br><span class="line">    └── authing</span><br><span class="line">        ├── authing.js</span><br><span class="line">        ├── configs.js</span><br><span class="line">        ├── graphql</span><br><span class="line">        │   └── wxgql.js</span><br><span class="line">        └── utils</span><br><span class="line">            ├── qiniuUploader.js</span><br><span class="line">            ├── util.js</span><br><span class="line">            └── wxapp_rsa.min.js</span><br></pre></td></tr></table></figure><p>SDK 开发环境准备就绪 ✌️，我们接下来马上来集成手机号+验证码登录的身份逻辑！</p><h3 id="开始集成"><a href="#开始集成" class="headerlink" title="开始集成"></a>开始集成</h3><p>打开 <code>src/components/#Form/index.jsx</code> 文件，对其中的内容作出对应的修改如下：</p><figure class="highlight jsx"><figcaption><span>src/components/#Form/index.jsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iL2RmZWE4MmIwYjZlMTFkMWE1NzVkOTllOTUzMzdmNzJjOGE0ZWI2Zjkvc3JjL2NvbXBvbmVudHMvTG9naW5Gb3JtL2luZGV4LmpzeA==" title="https://github.com/tuture-dev/ultra-club/blob/dfea82b0b6e11d1a575d99e95337f72c8a4eb6f9/src/components/#Form/index.jsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro, &#123; useState, useRef, useEffect &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line"><span class="keyword">import</span> &#123; View, Form &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span></span><br><span class="line"><span class="keyword">import</span> &#123; AtButton, AtImagePicker &#125; <span class="keyword">from</span> <span class="string">'taro-ui'</span></span><br><span class="line"><span class="keyword">import</span> &#123; useDispatch &#125; <span class="keyword">from</span> <span class="string">'@tarojs/redux'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; SET_IS_OPENED, SET_LOGIN_INFO &#125; <span class="keyword">from</span> <span class="string">'../../constants'</span></span><br><span class="line"><span class="keyword">import</span> CountDownButton <span class="keyword">from</span> <span class="string">'../CountDownButton'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> Authing <span class="keyword">from</span> <span class="string">'../../utils/authing/authing'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./index.scss'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">LoginForm</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Login Form 登录数据</span></span><br><span class="line">  <span class="keyword">const</span> [phone, setPhone] = useState(<span class="string">''</span>)</span><br><span class="line">  <span class="keyword">const</span> [phoneCode, setPhoneCode] = useState(<span class="string">''</span>)</span><br><span class="line">  <span class="keyword">const</span> countDownButtonRef = useRef(<span class="literal">null</span>)</span><br><span class="line">[tuture-add]  <span class="keyword">let</span> userPoolId = <span class="string">''</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> dispatch = useDispatch()</span><br><span class="line"></span><br><span class="line">  <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">countDownButtonPressed</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!phone) &#123;</span><br><span class="line">      Taro.atMessage(&#123;</span><br><span class="line">        type: <span class="string">'error'</span>,</span><br><span class="line">        message: <span class="string">'您还没有填写手机!'</span>,</span><br><span class="line">      &#125;)</span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    countDownButtonRef.current.startCountDown()</span><br><span class="line"></span><br><span class="line">[tuture-del]    <span class="comment">// 处理发送验证码事件</span></span><br><span class="line">[tuture-add]    <span class="keyword">try</span> &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> authing = <span class="keyword">new</span> Authing(&#123;</span><br><span class="line">[tuture-add]        userPoolId,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> res = <span class="keyword">await</span> authing.getVerificationCode(phone)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      <span class="keyword">if</span> (res.code === <span class="number">200</span>) &#123;</span><br><span class="line">[tuture-add]        Taro.atMessage(&#123;</span><br><span class="line">[tuture-add]          type: <span class="string">'success'</span>,</span><br><span class="line">[tuture-add]          message: <span class="string">'手机验证码已经发送成功，注意查收'</span>,</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line">[tuture-add]      &#125;</span><br><span class="line">[tuture-add]    &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">[tuture-add]      Taro.atMessage(&#123;</span><br><span class="line">[tuture-add]        type: <span class="string">'error'</span>,</span><br><span class="line">[tuture-add]        message: <span class="string">'验证码发送失败，请稍后尝试 !'</span>,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]      <span class="built_in">console</span>.log(<span class="string">'err'</span>, err)</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">handleSubmit</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    e.preventDefault()</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 鉴权数据</span></span><br><span class="line">    <span class="keyword">if</span> (!phone || !phoneCode) &#123;</span><br><span class="line">      Taro.atMessage(&#123;</span><br><span class="line">        type: <span class="string">'error'</span>,</span><br><span class="line">        message: <span class="string">'您还有内容没有填写！'</span>,</span><br><span class="line">      &#125;)</span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]    <span class="comment">// 处理登录和注册</span></span><br><span class="line">[tuture-add]    <span class="keyword">try</span> &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> authing = <span class="keyword">new</span> Authing(&#123;</span><br><span class="line">[tuture-add]        userPoolId,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> userInfo = <span class="keyword">await</span> authing.loginByPhoneCode(&#123;</span><br><span class="line">[tuture-add]        phone,</span><br><span class="line">[tuture-add]        phoneCode,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      <span class="comment">// 提示登录成功</span></span><br><span class="line">[tuture-add]      Taro.atMessage(&#123;</span><br><span class="line">[tuture-add]        type: <span class="string">'success'</span>,</span><br><span class="line">[tuture-add]        message: <span class="string">'恭喜您，登录成功！'</span>,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> &#123; nickname, photo, _id &#125; = userInfo</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      <span class="comment">// 向后端发起登录请求</span></span><br><span class="line">[tuture-add]      <span class="keyword">await</span> Taro.setStorage(&#123;</span><br><span class="line">[tuture-add]        key: <span class="string">'userInfo'</span>,</span><br><span class="line">[tuture-add]        data: &#123;</span><br><span class="line">[tuture-add]          nickName: nickname,</span><br><span class="line">[tuture-add]          avatar: photo,</span><br><span class="line">[tuture-add]          _id,</span><br><span class="line">[tuture-add]        &#125;,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      <span class="keyword">await</span> Taro.setStorage(&#123;</span><br><span class="line">[tuture-add]        key: <span class="string">'token'</span>,</span><br><span class="line">[tuture-add]        data: userInfo.token,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      dispatch(&#123;</span><br><span class="line">[tuture-add]        type: SET_LOGIN_INFO,</span><br><span class="line">[tuture-add]        payload: &#123; <span class="attr">nickName</span>: nickname, <span class="attr">avatar</span>: photo, <span class="attr">userId</span>: _id &#125;,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      dispatch(&#123; <span class="attr">type</span>: SET_IS_OPENED, <span class="attr">payload</span>: &#123; <span class="attr">isOpened</span>: <span class="literal">false</span> &#125; &#125;)</span><br><span class="line">[tuture-add]    &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">[tuture-add]      Taro.atMessage(&#123;</span><br><span class="line">[tuture-add]        type: <span class="string">'error'</span>,</span><br><span class="line">[tuture-add]        message: <span class="string">'登录失败'</span>,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"post-form"</span>&gt;</span><br><span class="line">      &lt;Form onSubmit=&#123;handleSubmit&#125;&gt;</span><br><span class="line">        &lt;View className=<span class="string">"login-box"</span>&gt;</span><br><span class="line">          &lt;Input</span><br><span class="line">            className=<span class="string">"input-phone input-item"</span></span><br><span class="line">            type=<span class="string">"text"</span></span><br><span class="line">            placeholder=<span class="string">"输入手机号"</span></span><br><span class="line">            value=&#123;phone&#125;</span><br><span class="line">            onInput=&#123;e =&gt; setPhone(e.target.value)&#125;</span><br><span class="line">          /&gt;</span><br><span class="line">          &lt;View className=<span class="string">"verify-code-box"</span>&gt;</span><br><span class="line">            &lt;Input</span><br><span class="line">              className=<span class="string">"input-nickName input-item"</span></span><br><span class="line">              type=<span class="string">"text"</span></span><br><span class="line">              placeholder=<span class="string">"四位验证码"</span></span><br><span class="line">              value=&#123;phoneCode&#125;</span><br><span class="line">              onInput=&#123;e =&gt; setPhoneCode(e.target.value)&#125;</span><br><span class="line">            /&gt;</span><br><span class="line">            &lt;CountDownButton</span><br><span class="line">              onClick=&#123;countDownButtonPressed&#125;</span><br><span class="line">              ref=&#123;countDownButtonRef&#125;</span><br><span class="line">            /&gt;</span><br><span class="line">          &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">          &lt;AtButton formType="submit" type="primary"&gt;</span></span><br><span class="line"><span class="regexp">            登录</span></span><br><span class="line"><span class="regexp">          &lt;/</span>AtButton&gt;</span><br><span class="line">          &lt;View className=<span class="string">"at-article__info"</span>&gt;</span><br><span class="line">            通过手机和验证码来登录，如果没有账号，我们将自动创建</span><br><span class="line">          &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>View&gt;</span><br><span class="line">      &lt;<span class="regexp">/Form&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，上面的内容主要有如下几处修改：</p><ul><li>我们首先引入了上一步里面下载的 Authing SDK</li><li>接着我们定义了一个 <code>userPoolId</code> ，这就是我们前面创建 “图雀社区博客小程序” 用户池的标志 ID，这里读者需要前往 Authing 控制台界面，获取用户池 ID，并替换上面的空字符串：</li></ul><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281ab9d8b1772.png"></p><ul><li>接着我们在 <code>countDownButtonPressed</code> 函数内进行发起手机验证码操作，我们首先使用 <code>new Authing</code> 传入用户池 ID <code>userPoolId</code> 初始化一个一个实例并命名为 <code>authing</code> ，这一步代表我们拿到了此页用户池的操作权，接下来我们就可以进行用户有关的操作了。</li><li>接着我们使用 <code>authing.getVerificationCode</code> 方法，传入填写的手机号 <code>phone</code> ，它是一个异步 Promise 对象，所以我们用 <code>await</code> 关键字获取其结果，当结果 <code>res.code</code> 为 200，代表发送验证码成功，我们提示用户发送验证码成功，否则提醒发送验证码失败，当编写了上面的代码并保存之后，我们可以打开小程序尝试一下效果，输入手机号，并点击发送验证码：</li></ul><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281aba373023a.gif"></p><p>当然上面的手机号我瞎输入的，读者请自行输入自己的手机号尝试，接着应该可以在手机上收到验证码短信：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281aba386117a.jpeg"></p><p>Boom💥！可以看到简单几行代码，我们就搞定了手机验证码的发送。</p><ul><li>接下来我们需要完善一下使用手机+验证码登录的逻辑，我们在 <code>handleSubmit</code> 里面编写了一个 <code>try/catch</code> 语句，然后初始化 Authing 对象，并调用方法 <code>authing.loginByPhoneCode</code> 传入我们的手机号（<code>phone</code> ）和验证码 <code>phoneCode</code> ，进行调用之后，我们就完成了手机号+验证码登录，这个方法默认会对未登录用户进行创建账号操作，不需要用户额外处理其他逻辑。</li><li>接着，我们通过登录成功返回的 <code>userInfo</code> 拿到内容，做出修改并设置到 <code>storage</code> 里，以及存在 Redux Store 里面，并提示用户登录成功。当然如果登录失败，我们还会提示用户登录失败。</li></ul><div class="note info">            <p><strong>提示</strong></p><ol><li>这里我们做了数据格式的适应，如将 Authing 登录返回的用户信息 <code>userInfo.nickname</code> 适应成 <code>nickName</code> ，是为了匹配之前的小程序系统的数据格式。</li><li>可以看到我们额外存了一个 <code>userInfo.token</code> 到 <code>storage</code> 里面，这个 <code>token</code> 就是我们用户系统里面用于用户鉴权的标志，之后我们将用这个 token 来检查用户的登录状态并进行用户登录态的保持。</li></ol>          </div><p>一切准备就绪，接下来我们填入手机号，点击获取验证码，并将验证码填入小程序的输入框，点击登录应该就可以登录成功：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281abae530ec7.png"></p><p>可以看到，我们收获了一个默认的 “酷酷的头像”，并且提示了登录成功。大功告成，一个专业的只需要手机号+验证码的登录界面+逻辑我们就完整实现了，可以看到我们主要在界面的调整和 SDK 的引入上废了一点功夫，实际上实现整个逻辑，真的只需要几行代码！因为 Authing 在背后做了大量的工作来确保上层逻辑的简单。</p><h2 id="处理登出逻辑"><a href="#处理登出逻辑" class="headerlink" title="处理登出逻辑"></a>处理登出逻辑</h2><p>在上一小节中，我们成功将登录逻辑迁移到了手机号+验证码的方式，并且通过简单几行代码实现了验证码的发送，以及登录。</p><p>因为我们的登录逻辑相比之前有了一些变化，所以我们要适当的调整我们的登出逻辑，以适应这些变化。</p><h3 id="改进登出组件"><a href="#改进登出组件" class="headerlink" title="改进登出组件"></a>改进登出组件</h3><p>打开 <code>src/components/Logout/index.js</code> 文件，对其中的内容做出对应的修改：</p><figure class="highlight js"><figcaption><span>src/components/Logout/index.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iL2EyMzcyNmE2YjI4ZGM3ODMzMGM3OTQ1NjNlZTQ5Yjc5ODAzMDMyNjYvc3JjL2NvbXBvbmVudHMvTG9nb3V0L2luZGV4Lmpz" title="https://github.com/tuture-dev/ultra-club/blob/a23726a6b28dc78330c794563ee49b7980303266/src/components/Logout/index.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro, &#123; useState &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line"><span class="keyword">import</span> &#123; AtButton &#125; <span class="keyword">from</span> <span class="string">'taro-ui'</span></span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; useDispatch &#125; <span class="keyword">from</span> <span class="string">'@tarojs/redux'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; useDispatch, useSelector &#125; <span class="keyword">from</span> <span class="string">'@tarojs/redux'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; SET_LOGIN_INFO &#125; <span class="keyword">from</span> <span class="string">'../../constants'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> Authing <span class="keyword">from</span> <span class="string">'../../utils/authing/authing'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">LoginButton</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [isLogout, setIsLogout] = useState(<span class="literal">false</span>)</span><br><span class="line">  <span class="keyword">const</span> dispatch = useDispatch()</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> userId = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.userId)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">handleLogout</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    setIsLogout(<span class="literal">true</span>)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">await</span> Taro.removeStorage(&#123; <span class="attr">key</span>: <span class="string">'userInfo'</span> &#125;)</span><br><span class="line">[tuture-add]      <span class="keyword">await</span> Taro.removeStorage(&#123; <span class="attr">key</span>: <span class="string">'token'</span> &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> userPoolId = <span class="string">''</span></span><br><span class="line">[tuture-add]      <span class="keyword">const</span> authing = <span class="keyword">new</span> Authing(&#123;</span><br><span class="line">[tuture-add]        userPoolId,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      <span class="keyword">await</span> authing.logout(userId)</span><br><span class="line"></span><br><span class="line">      dispatch(&#123;</span><br><span class="line">        type: SET_LOGIN_INFO,</span><br><span class="line">        payload: &#123;</span><br><span class="line">          avatar: <span class="string">''</span>,</span><br><span class="line">          nickName: <span class="string">''</span>,</span><br><span class="line">          userId: <span class="string">''</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'removeStorage ERR: '</span>, err)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    setIsLogout(<span class="literal">false</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;AtButton type=<span class="string">"secondary"</span> full loading=&#123;isLogout&#125; onClick=&#123;handleLogout&#125;&gt;</span><br><span class="line">      退出登录</span><br><span class="line">    &lt;<span class="regexp">/AtButton&gt;</span></span><br><span class="line"><span class="regexp">  )</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure><p>可以看到，上面的内容主要有如下几处修改：</p><ul><li>我们在 <code>handleLogout</code> 函数里处理登出逻辑的时候，首先初始化了一个 <code>authing</code> 实例，主要这里的 <code>userPoolId</code> 也需要读者替换成你自己的，可以在 Authing 控制台获取，接着调用 <code>authing.logout</code> 传入用户的 <code>userId</code> 来登出此用户，这样之后就不能操作 Authing 上创建的用户池了</li><li>关于 <code>userId</code> 的获取，我们使用了 <code>react-redux</code> 钩子 <code>useSelector</code> 从 Redux Store 里面获取。</li><li>最后我们还要删除 <code>storage</code> 里面存储的 <code>token</code> 。</li></ul><h3 id="清理其他登出逻辑"><a href="#清理其他登出逻辑" class="headerlink" title="清理其他登出逻辑"></a>清理其他登出逻辑</h3><p>因为目前我们的登陆不是之前的使用 <code>nickName</code> 和 <code>avatar</code> ，而是使用手机号+验证码，所以我们一登录之后默认的 <code>nickName</code> 为空，而我们之前的判断用户是否登录的组件逻辑都是判断 <code>nickName</code> 是否存在，这里就有问题了，所以我们需要修改一下。</p><p>打开 <code>src/components/Footer/index.js</code> 文件，对其中的内容作出对应的修改如下：</p><figure class="highlight js"><figcaption><span>src/components/Footer/index.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iL2EyMzcyNmE2YjI4ZGM3ODMzMGM3OTQ1NjNlZTQ5Yjc5ODAzMDMyNjYvc3JjL2NvbXBvbmVudHMvRm9vdGVyL2luZGV4Lmpz" title="https://github.com/tuture-dev/ultra-club/blob/a23726a6b28dc78330c794563ee49b7980303266/src/components/Footer/index.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line"><span class="keyword">import</span> &#123; View &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span></span><br><span class="line"><span class="keyword">import</span> &#123; AtFloatLayout &#125; <span class="keyword">from</span> <span class="string">'taro-ui'</span></span><br><span class="line"><span class="keyword">import</span> &#123; useSelector, useDispatch &#125; <span class="keyword">from</span> <span class="string">'@tarojs/redux'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> Logout <span class="keyword">from</span> <span class="string">'../Logout'</span></span><br><span class="line"><span class="keyword">import</span> LoginForm <span class="keyword">from</span> <span class="string">'../#Form'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./index.scss'</span></span><br><span class="line"><span class="keyword">import</span> &#123; SET_IS_OPENED &#125; <span class="keyword">from</span> <span class="string">'../../constants'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Footer</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> nickName = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.nickName)</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> userId = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.userId)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> dispatch = useDispatch()</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 双取反来构造字符串对应的布尔值，用于标志此时是否用户已经登录</span></span><br><span class="line">[tuture-del]  <span class="keyword">const</span> isLogged = !!nickName</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> isLogged = !!userId</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 使用 useSelector Hooks 获取 Redux Store 数据</span></span><br><span class="line">  <span class="keyword">const</span> isOpened = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.isOpened)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"mine-footer"</span>&gt;</span><br><span class="line">      &#123;isLogged &amp;&amp; <span class="xml"><span class="tag">&lt;<span class="name">Logout</span> /&gt;</span></span>&#125;</span><br><span class="line">      &lt;View className=<span class="string">"tuture-motto"</span>&gt;</span><br><span class="line">        &#123;isLogged ? <span class="string">'From 图雀社区 with Love ❤'</span> : <span class="string">'您还未登录'</span>&#125;</span><br><span class="line">      &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">      &lt;AtFloatLayout</span></span><br><span class="line"><span class="regexp">        isOpened=&#123;isOpened&#125;</span></span><br><span class="line"><span class="regexp">        title="登录"</span></span><br><span class="line"><span class="regexp">        onClose=&#123;() =&gt;</span></span><br><span class="line"><span class="regexp">          dispatch(&#123; type: SET_IS_OPENED, payload: &#123; isOpened: false &#125; &#125;)</span></span><br><span class="line"><span class="regexp">        &#125;</span></span><br><span class="line"><span class="regexp">      &gt;</span></span><br><span class="line"><span class="regexp">        &lt;LoginForm /</span>&gt;</span><br><span class="line">      &lt;<span class="regexp">/AtFloatLayout&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，上面的内容主要就是将 <code>nickName</code> 替换成了 <code>userId</code> ，并用 <code>userId</code> 判断是否处于登录状态。</p><p>同样的，<code>src/components/Header/index.js</code> 也要作出类似的修改：</p><figure class="highlight js"><figcaption><span>src/components/Header/index.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iL2EyMzcyNmE2YjI4ZGM3ODMzMGM3OTQ1NjNlZTQ5Yjc5ODAzMDMyNjYvc3JjL2NvbXBvbmVudHMvSGVhZGVyL2luZGV4Lmpz" title="https://github.com/tuture-dev/ultra-club/blob/a23726a6b28dc78330c794563ee49b7980303266/src/components/Header/index.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line"><span class="keyword">import</span> &#123; View &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span></span><br><span class="line"><span class="keyword">import</span> &#123; AtMessage &#125; <span class="keyword">from</span> <span class="string">'taro-ui'</span></span><br><span class="line"><span class="keyword">import</span> &#123; useSelector &#125; <span class="keyword">from</span> <span class="string">'@tarojs/redux'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> LoggedMine <span class="keyword">from</span> <span class="string">'../LoggedMine'</span></span><br><span class="line"><span class="keyword">import</span> LoginButton <span class="keyword">from</span> <span class="string">'../#Button'</span></span><br><span class="line"><span class="keyword">import</span> WeappLoginButton <span class="keyword">from</span> <span class="string">'../WeappLoginButton'</span></span><br><span class="line"><span class="keyword">import</span> AlipayLoginButton <span class="keyword">from</span> <span class="string">'../AlipayLoginButton'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./index.scss'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Header</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> nickName = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.nickName)</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> userId = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.userId)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 双取反来构造字符串对应的布尔值，用于标志此时是否用户已经登录</span></span><br><span class="line">[tuture-del]  <span class="keyword">const</span> isLogged = !!nickName</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> isLogged = !!userId</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> isWeapp = Taro.getEnv() === Taro.ENV_TYPE.WEAPP</span><br><span class="line">  <span class="keyword">const</span> isAlipay = Taro.getEnv() === Taro.ENV_TYPE.ALIPAY</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"user-box"</span>&gt;</span><br><span class="line">      &lt;AtMessage /&gt;</span><br><span class="line">      &lt;LoggedMine /&gt;</span><br><span class="line">      &#123;!isLogged &amp;&amp; (</span><br><span class="line">        &lt;View className=<span class="string">"login-button-box"</span>&gt;</span><br><span class="line">          &lt;LoginButton /&gt;</span><br><span class="line">          &#123;isWeapp &amp;&amp; <span class="xml"><span class="tag">&lt;<span class="name">WeappLoginButton</span> /&gt;</span></span>&#125;</span><br><span class="line">          &#123;isAlipay &amp;&amp; <span class="xml"><span class="tag">&lt;<span class="name">AlipayLoginButton</span> /&gt;</span></span>&#125;</span><br><span class="line">        &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">      )&#125;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>还有我们的 “我的” 页面，<code>src/pages/mine/mine.jsx</code> 文件：</p><figure class="highlight jsx"><figcaption><span>src/pages/mine/mine.jsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iL2EyMzcyNmE2YjI4ZGM3ODMzMGM3OTQ1NjNlZTQ5Yjc5ODAzMDMyNjYvc3JjL3BhZ2VzL21pbmUvbWluZS5qc3g=" title="https://github.com/tuture-dev/ultra-club/blob/a23726a6b28dc78330c794563ee49b7980303266/src/pages/mine/mine.jsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro, &#123; useEffect &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line"><span class="keyword">import</span> &#123; View &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span></span><br><span class="line"><span class="keyword">import</span> &#123; useDispatch, useSelector &#125; <span class="keyword">from</span> <span class="string">'@tarojs/redux'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; Header, Footer &#125; <span class="keyword">from</span> <span class="string">'../../components'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./mine.scss'</span></span><br><span class="line"><span class="keyword">import</span> &#123; SET_LOGIN_INFO &#125; <span class="keyword">from</span> <span class="string">'../../constants'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Mine</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> dispatch = useDispatch()</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> nickName = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.nickName)</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> userId = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.userId)</span><br><span class="line"></span><br><span class="line">[tuture-del]  <span class="keyword">const</span> isLogged = !!nickName</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> isLogged = !!userId</span><br><span class="line"></span><br><span class="line">  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">getStorage</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> &#123; data &#125; = <span class="keyword">await</span> Taro.getStorage(&#123; <span class="attr">key</span>: <span class="string">'userInfo'</span> &#125;)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">const</span> &#123; nickName, avatar, _id &#125; = data</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 更新 Redux Store 数据</span></span><br><span class="line">        dispatch(&#123;</span><br><span class="line">          type: SET_LOGIN_INFO,</span><br><span class="line">          payload: &#123; nickName, avatar, <span class="attr">userId</span>: _id &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'getStorage ERR: '</span>, err)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (!isLogged) &#123;</span><br><span class="line">      getStorage()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"mine"</span>&gt;</span><br><span class="line">      &lt;Header /&gt;</span><br><span class="line">      &lt;Footer /&gt;</span><br><span class="line">    &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">  )</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">Mine.config = &#123;</span></span><br><span class="line"><span class="regexp">  navigationBarTitleText: '我的',</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure><p>最后，我们修改首页的 <code>src/pages/index/index.jsx</code> ：</p><figure class="highlight jsx"><figcaption><span>src/pages/index/index.jsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iL2EyMzcyNmE2YjI4ZGM3ODMzMGM3OTQ1NjNlZTQ5Yjc5ODAzMDMyNjYvc3JjL3BhZ2VzL2luZGV4L2luZGV4LmpzeA==" title="https://github.com/tuture-dev/ultra-club/blob/a23726a6b28dc78330c794563ee49b7980303266/src/pages/index/index.jsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro, &#123; useEffect &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line"><span class="keyword">import</span> &#123; View, Text &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span></span><br><span class="line"><span class="keyword">import</span> &#123; AtFab, AtFloatLayout, AtMessage &#125; <span class="keyword">from</span> <span class="string">'taro-ui'</span></span><br><span class="line"><span class="keyword">import</span> &#123; useSelector, useDispatch &#125; <span class="keyword">from</span> <span class="string">'@tarojs/redux'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; PostCard, PostForm &#125; <span class="keyword">from</span> <span class="string">'../../components'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./index.scss'</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  SET_POST_FORM_IS_OPENED,</span><br><span class="line">  SET_LOGIN_INFO,</span><br><span class="line">  GET_POSTS,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'../../constants'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Index</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> posts = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.post.posts) || []</span><br><span class="line">  <span class="keyword">const</span> isOpened = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.post.isOpened)</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> nickName = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.nickName)</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> userId = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.userId)</span><br><span class="line"></span><br><span class="line">[tuture-del]  <span class="keyword">const</span> isLogged = !!nickName</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> isLogged = !!userId</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> dispatch = useDispatch()</span><br><span class="line"></span><br><span class="line">  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> WeappEnv = Taro.getEnv() === Taro.ENV_TYPE.WEAPP</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (WeappEnv) &#123;</span><br><span class="line">      Taro.cloud.init()</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">getStorage</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> &#123; data &#125; = <span class="keyword">await</span> Taro.getStorage(&#123; <span class="attr">key</span>: <span class="string">'userInfo'</span> &#125;)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">const</span> &#123; nickName, avatar, _id &#125; = data</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 更新 Redux Store 数据</span></span><br><span class="line">        dispatch(&#123;</span><br><span class="line">          type: SET_LOGIN_INFO,</span><br><span class="line">          payload: &#123; nickName, avatar, <span class="attr">userId</span>: _id &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'getStorage ERR: '</span>, err)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (!isLogged) &#123;</span><br><span class="line">      getStorage()</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">getPosts</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="comment">// 更新 Redux Store 数据</span></span><br><span class="line">        dispatch(&#123;</span><br><span class="line">          type: GET_POSTS,</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'getPosts ERR: '</span>, err)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (!posts.length) &#123;</span><br><span class="line">      getPosts()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, [])</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">setIsOpened</span>(<span class="params">isOpened</span>) </span>&#123;</span><br><span class="line">    dispatch(&#123; <span class="attr">type</span>: SET_POST_FORM_IS_OPENED, <span class="attr">payload</span>: &#123; isOpened &#125; &#125;)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleClickEdit</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!isLogged) &#123;</span><br><span class="line">      Taro.atMessage(&#123;</span><br><span class="line">        type: <span class="string">'warning'</span>,</span><br><span class="line">        message: <span class="string">'您还未登录哦！'</span>,</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      setIsOpened(<span class="literal">true</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'posts'</span>, posts)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"index"</span>&gt;</span><br><span class="line">      &lt;AtMessage /&gt;</span><br><span class="line">      &#123;posts.map(<span class="function"><span class="params">post</span> =&gt;</span> (</span><br><span class="line">        &lt;PostCard key=&#123;post._id&#125; postId=&#123;post._id&#125; post=&#123;post&#125; isList /&gt;</span><br><span class="line">      ))&#125;</span><br><span class="line">      &lt;AtFloatLayout</span><br><span class="line">        isOpened=&#123;isOpened&#125;</span><br><span class="line">        title=<span class="string">"发表新文章"</span></span><br><span class="line">        onClose=&#123;() =&gt; setIsOpened(<span class="literal">false</span>)&#125;</span><br><span class="line">      &gt;</span><br><span class="line">        &lt;PostForm /&gt;</span><br><span class="line">      &lt;<span class="regexp">/AtFloatLayout&gt;</span></span><br><span class="line"><span class="regexp">      &lt;View className="post-button"&gt;</span></span><br><span class="line"><span class="regexp">        &lt;AtFab onClick=&#123;handleClickEdit&#125;&gt;</span></span><br><span class="line"><span class="regexp">          &lt;Text className="at-fab__icon at-icon at-icon-edit"&gt;&lt;/</span>Text&gt;</span><br><span class="line">        &lt;<span class="regexp">/AtFab&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>View&gt;</span><br><span class="line">    &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">  )</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">Index.config = &#123;</span></span><br><span class="line"><span class="regexp">  navigationBarTitleText: '首页',</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure><p>修改了如上代码并保存之后，打开应用，我们点击登出，应该顺利看到如下效果：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281abc7d4f9b3.gif"></p><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>在这一节中，我们呼应使用 Authing 登录的逻辑，对应修改了登出逻辑，并且使用 <code>userId</code> 替换 <code>nickName</code> 作为是否登录的判断标准。</p><h2 id="集成微信授权登录"><a href="#集成微信授权登录" class="headerlink" title="集成微信授权登录"></a>集成微信授权登录</h2><p>在前两小节中，我们使用 Authing 集成了手机号+验证码的登录逻辑，然后处理了登出逻辑，有同学可能会问了，我们之前是取代了普通登录，还有一个微信登录，我们是不是也可以用 Authing 来进行替换呢？毕竟集成用户系统肯定要全面集成，答案是可以！</p><p>接下来我们将使用 Authing 为我们提供的 <code>loginWithWxapp</code> ，快捷的将微信授权登录集成好，打开 <code>src/components/WeappLoginButton/index.js</code> 文件，对其中的内容作出对应的修改如下：</p><figure class="highlight js"><figcaption><span>src/components/WeappLoginButton/index.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iLzI5Y2UwNWJkYjc0ZGQ1M2Y2ZDgzYjgyNTkxMTg2ZDJkMWQxMDgzNWIvc3JjL2NvbXBvbmVudHMvV2VhcHBMb2dpbkJ1dHRvbi9pbmRleC5qcw==" title="https://github.com/tuture-dev/ultra-club/blob/29ce05bdb74dd53f6d83b82591186d2d1d10835b/src/components/WeappLoginButton/index.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> Taro, &#123; useState &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> Taro, &#123; useState, useEffect &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line"><span class="keyword">import</span> &#123; Button &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span></span><br><span class="line"><span class="keyword">import</span> &#123; useDispatch &#125; <span class="keyword">from</span> <span class="string">'@tarojs/redux'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./index.scss'</span></span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; LOGIN &#125; <span class="keyword">from</span> <span class="string">'../../constants'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; SET_LOGIN_INFO &#125; <span class="keyword">from</span> <span class="string">'../../constants'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> Authing <span class="keyword">from</span> <span class="string">'../../utils/authing/authing'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">WeappLoginButton</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [isLogin, setIsLogin] = useState(<span class="literal">false</span>)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> dispatch = useDispatch()</span><br><span class="line"></span><br><span class="line">  <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">onGetUserInfo</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    setIsLogin(<span class="literal">true</span>)</span><br><span class="line"></span><br><span class="line">[tuture-del]    <span class="keyword">const</span> &#123; avatarUrl, nickName &#125; = e.detail.userInfo</span><br><span class="line">[tuture-del]    <span class="keyword">const</span> userInfo = &#123; <span class="attr">avatar</span>: avatarUrl, nickName &#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]    dispatch(&#123;</span><br><span class="line">[tuture-del]      type: LOGIN,</span><br><span class="line">[tuture-del]      payload: &#123;</span><br><span class="line">[tuture-del]        userInfo: userInfo,</span><br><span class="line">[tuture-del]      &#125;,</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> userPoolId = <span class="string">'5ea4ffa72b3a80b6eff60b65'</span></span><br><span class="line">[tuture-add]    <span class="keyword">const</span> authing = <span class="keyword">new</span> Authing(&#123;</span><br><span class="line">[tuture-add]      userPoolId,</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">[tuture-add]    <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">loginWithAuthing</span>(<span class="params">code, detail</span>) </span>&#123;</span><br><span class="line">[tuture-add]      <span class="keyword">try</span> &#123;</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> userInfo = <span class="keyword">await</span> authing.loginWithWxapp(&#123;</span><br><span class="line">[tuture-add]          code,</span><br><span class="line">[tuture-add]          detail,</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]        <span class="comment">// 提示登录成功</span></span><br><span class="line">[tuture-add]        Taro.atMessage(&#123;</span><br><span class="line">[tuture-add]          type: <span class="string">'success'</span>,</span><br><span class="line">[tuture-add]          message: <span class="string">'恭喜您，登录成功！'</span>,</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> &#123; nickname, photo, _id &#125; = userInfo</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]        dispatch(&#123;</span><br><span class="line">[tuture-add]          type: SET_LOGIN_INFO,</span><br><span class="line">[tuture-add]          payload: &#123; <span class="attr">nickName</span>: nickname, <span class="attr">avatar</span>: photo, <span class="attr">userId</span>: _id &#125;,</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]        <span class="comment">// 向后端发起登录请求</span></span><br><span class="line">[tuture-add]        <span class="keyword">await</span> Taro.setStorage(&#123;</span><br><span class="line">[tuture-add]          key: <span class="string">'userInfo'</span>,</span><br><span class="line">[tuture-add]          data: &#123;</span><br><span class="line">[tuture-add]            nickName: nickname,</span><br><span class="line">[tuture-add]            avatar: photo,</span><br><span class="line">[tuture-add]            _id,</span><br><span class="line">[tuture-add]          &#125;,</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]        <span class="keyword">await</span> Taro.setStorage(&#123;</span><br><span class="line">[tuture-add]          key: <span class="string">'token'</span>,</span><br><span class="line">[tuture-add]          data: userInfo.token,</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]        <span class="comment">// 当 code 用于登录之后，会失效，所以这里重新获取 code</span></span><br><span class="line">[tuture-add]        Taro.login(&#123;</span><br><span class="line">[tuture-add]          success(res) &#123;</span><br><span class="line">[tuture-add]            <span class="keyword">const</span> code = res.code</span><br><span class="line">[tuture-add]            Taro.setStorageSync(<span class="string">'code'</span>, code)</span><br><span class="line">[tuture-add]          &#125;,</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line">[tuture-add]      &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">[tuture-add]        <span class="built_in">console</span>.log(<span class="string">'err'</span>, err)</span><br><span class="line">[tuture-add]        Taro.atMessage(&#123;</span><br><span class="line">[tuture-add]          type: <span class="string">'success'</span>,</span><br><span class="line">[tuture-add]          message: <span class="string">'恭喜您，登录成功！'</span>,</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line">[tuture-add]      &#125;</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    <span class="keyword">try</span> &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> code = Taro.getStorageSync(<span class="string">'code'</span>)</span><br><span class="line">[tuture-add]      Taro.login(&#123;</span><br><span class="line">[tuture-add]        success(res) &#123;</span><br><span class="line">[tuture-add]          <span class="keyword">const</span> code = res.code</span><br><span class="line">[tuture-add]          loginWithAuthing(code, e.detail)</span><br><span class="line">[tuture-add]        &#125;,</span><br><span class="line">[tuture-add]      &#125;)</span><br><span class="line">[tuture-add]    &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">[tuture-add]      <span class="built_in">console</span>.log(<span class="string">'err'</span>, err)</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">    setIsLogin(<span class="literal">false</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;Button</span><br><span class="line">      openType=<span class="string">"getUserInfo"</span></span><br><span class="line">      onGetUserInfo=&#123;onGetUserInfo&#125;</span><br><span class="line">      type=<span class="string">"primary"</span></span><br><span class="line">      className=<span class="string">"login-button"</span></span><br><span class="line">      loading=&#123;isLogin&#125;</span><br><span class="line">    &gt;</span><br><span class="line">      微信登录</span><br><span class="line">    &lt;<span class="regexp">/Button&gt;</span></span><br><span class="line"><span class="regexp">  )</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure><p>可以看到上面的内容主要有如下几处修改：</p><ul><li>我们删除了之前简单粗暴获取到 <code>userInfo</code> 里面的 <code>nickName</code> 和 <code>avatarUrl</code> 就发起登录的代码逻辑。</li><li>我们在 <code>onGetUserInfo</code> 里面初始化了一个 <code>authing</code> 实例，然后定义了一个 <code>loginWithAuthing</code> 方法，具体细节我们马上讲解，然后我们使用 <code>Taro.login</code> 调用微信授权登录 API，获取对应的 <code>code</code> ，并连同把 <code>onGetUserInfo</code> 传进来的 <code>e.detail</code> 一起传给 <code>loginWithAuthing</code> 。</li><li>在 <code>loginWithAuthing</code> 函数里面，哦们首先调用 <code>authing.loginWithWxapp</code> ，并传入对应的 <code>code</code> 和 <code>detail</code> ，进行登录，然后将登录获取的信息存在 <code>storage</code> 里面以及保存在 Redux Store 中，并提示用户登录成功。</li></ul><p>保存上面的代码，并运行我们的应用，你应该可以自由的操作微信登录了：</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281abd1c93268.gif"></p><p>就这样，我们就成功将微信授权登录使用 Authing 集成好了，可以看到我们只需要一个 <code>loginWithWxapp</code> 就把逻辑集成好了，完全不需要之前 <code>dispatch</code> 一个 <code>LOGIN</code> 请求，还要去处理一堆 <code>sagas</code> 逻辑，并且还要编写小程序云函数逻辑，手动处理这些逻辑不仅繁琐，还容易出错，并且也不够灵活，而 Authing 提供的 SDK 可以很好的解决这一点，赋能业务成功。</p><h2 id="新版用户系统整合进现有后端"><a href="#新版用户系统整合进现有后端" class="headerlink" title="新版用户系统整合进现有后端"></a>新版用户系统整合进现有后端</h2><p>在之前四个小节，我们都在将现有小程序博客的用户逻辑使用 Authing 来替代，而将用户逻辑用 Authing 来替代之后，我们会遇到一个小问题，就是之前的用户系统与其他模块如我们的发帖模块是存在耦合的，所以我们还需要将这个耦合的部分替换成 Authing 的相关逻辑，这就涉及到如何将新版的用户系统整合进现有的后端。</p><p>我们目前的博客小程序涉及到和用户系统耦合的部分就是我们云函数 <code>createPost</code> 在发帖的时候要带上用户信息，所以我们需要在这个云函数下使用 Authing 来替换相应的用户逻辑。</p><h3 id="安装-SDK"><a href="#安装-SDK" class="headerlink" title="安装 SDK"></a>安装 SDK</h3><p>我们的微信小程序后台使用了云函数，而云函数是一个个的 Node.js 函数，而 Authing 为我们提供了 Node.js 的 SDK npm 包，我们马上来安装它，在 <code>functions/createPost</code> 下执行如下的代码：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install authing-js-sdk</span><br></pre></td></tr></table></figure><p>执行之后，我们的 <code>package.json</code> 会是如下的样子：</p><figure class="highlight"><figcaption><span>functions/createPost/package.json</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iLzMzNmE2MGJiYWQzNTQ1MzFiNmM4NzVmNWYxMDMxOWFkNjRhNzI2N2QvZnVuY3Rpb25zL2NyZWF0ZVBvc3QvcGFja2FnZS5qc29u" title="https://github.com/tuture-dev/ultra-club/blob/336a60bbad354531b6c875f5f10319ad64a7267d/functions/createPost/package.json">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"createPost"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">[tuture-add]    "authing-js-sdk": "^3.18.7",</span><br><span class="line">    "wx-server-sdk": "latest"</span><br><span class="line">  &#125;</span><br><span class="line">[tuture-del]&#125;</span><br><span class="line">[tuture-add]&#125;</span><br></pre></td></tr></table></figure><p>接着，我们在云函数里面替换对应的逻辑，打开 <code>functions/createPost/index.js</code> 文件，对其中的内容做出对应的修改如下：</p><figure class="highlight js"><figcaption><span>functions/createPost/index.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iLzMzNmE2MGJiYWQzNTQ1MzFiNmM4NzVmNWYxMDMxOWFkNjRhNzI2N2QvZnVuY3Rpb25zL2NyZWF0ZVBvc3QvaW5kZXguanM=" title="https://github.com/tuture-dev/ultra-club/blob/336a60bbad354531b6c875f5f10319ad64a7267d/functions/createPost/index.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// 云函数入口文件</span></span><br><span class="line"><span class="keyword">const</span> cloud = <span class="built_in">require</span>(<span class="string">'wx-server-sdk'</span>)</span><br><span class="line">[tuture-add]<span class="keyword">const</span> Authing = <span class="built_in">require</span>(<span class="string">'authing-js-sdk'</span>)</span><br><span class="line"></span><br><span class="line">cloud.init(&#123;</span><br><span class="line">  env: cloud.DYNAMIC_CURRENT_ENV,</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> db = cloud.database()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 云函数入口函数</span></span><br><span class="line">exports.main = <span class="keyword">async</span> (event, context) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; postData, userId &#125; = event</span><br><span class="line"></span><br><span class="line">[tuture-del]  <span class="built_in">console</span>.log(<span class="string">'event'</span>, event)</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> userPoolId = <span class="string">''</span></span><br><span class="line">[tuture-add]  <span class="keyword">const</span> secret = <span class="string">''</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">[tuture-del]    <span class="keyword">const</span> user = <span class="keyword">await</span> db</span><br><span class="line">[tuture-del]      .collection(<span class="string">'user'</span>)</span><br><span class="line">[tuture-del]      .doc(userId)</span><br><span class="line">[tuture-del]      .get()</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> authing = <span class="keyword">new</span> Authing(&#123;</span><br><span class="line">[tuture-add]      userPoolId,</span><br><span class="line">[tuture-add]      secret,</span><br><span class="line">[tuture-add]    &#125;)</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> userInfo = <span class="keyword">await</span> authing.user(&#123; <span class="attr">id</span>: userId &#125;)</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> &#123; nickname, photo &#125; = userInfo</span><br><span class="line">[tuture-add]</span><br><span class="line">    <span class="keyword">const</span> &#123; _id &#125; = <span class="keyword">await</span> db.collection(<span class="string">'post'</span>).add(&#123;</span><br><span class="line">      data: &#123;</span><br><span class="line">        ...postData,</span><br><span class="line">[tuture-del]        user: user.data,</span><br><span class="line">[tuture-add]        user: &#123; <span class="attr">nickName</span>: nickname, <span class="attr">avatar</span>: photo, <span class="attr">_id</span>: userInfo._id &#125;,</span><br><span class="line">        createdAt: db.serverDate(),</span><br><span class="line">        updatedAt: db.serverDate(),</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> newPost = <span class="keyword">await</span> db</span><br><span class="line">      .collection(<span class="string">'post'</span>)</span><br><span class="line">      .doc(_id)</span><br><span class="line">      .get()</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      post: &#123; ...newPost.data &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">    <span class="built_in">console</span>.error(<span class="string">`createUser ERR: <span class="subst">$&#123;err&#125;</span>`</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，我们主要做了如下几处修改：</p><ul><li>我们导入了 Authing SDK</li><li>然后函数内部我们定义了 <code>userPoolId</code> 和 <code>secret</code> 来初始化 <code>authing</code> 实例，这两个参数我们可以在用户池控制台找到：</li></ul><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281abd4f70166.png"></p><ul><li>接着我们使用初始化好的 <code>authing</code> 来调用 <code>authing.user</code> 方法传入我们接收到的 <code>userId</code> 查询在 Authing 中保存的此用户资料，并用这个用户资料替换我们需要在小程序云数据库里面查到的用户数据</li></ul><p>自此，我们就在前后端深度整合了 Authing 用户系统，在之后我们的应用扩展过程中，所有和用户有关的逻辑都不需要自己在后台单独编写，前端也大大简化了工作量，并且我们还能在 Authing 的控制台可视化用户的数据：登录情况、登录区域、登录机器，还可以给用户进行权限分配，甚至直接修改用户资料等。</p><p><img alt data-src="https://static.powerformer.com/c/34a473b/172281abd746fd45.png"></p><h2 id="通过鉴权保有用户登录状态"><a href="#通过鉴权保有用户登录状态" class="headerlink" title="通过鉴权保有用户登录状态"></a>通过鉴权保有用户登录状态</h2><p>最后，我们来收尾一下，做一下用户登录状态的查询，因为应用的登录凭证它存在一个失效时间，当时间一到，我们再去操作用户信息就会显示没有权限，因为凭证失效了，所以说我们要及时检查用户的登录凭证是否失效，如果失效则要求用户重新登录，这也是读者经常会在访问某些网站的时候遇到，而现在我们将实操一下这个过程。</p><p>一般处理用户登录态的验证主要是在应用刚刚启动时，去进行一个鉴权处理，如果用户态有效，则顺利从应用的 <code>storage</code> 里面取出数据，然后设置进前端状态管理，进而展示用户数据，而如果没有则删除 <code>storage</code> 里面的数据，提示用户进行登录。</p><p>我们打开 <code>src/pages/index/index.jsx</code> 来实操，对其中的内容作出对应的修改如下：</p><figure class="highlight jsx"><figcaption><span>src/pages/index/index.jsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdWx0cmEtY2x1Yi9ibG9iL2MxNjk4NGQyNTk1M2NjZWUzYTM0NTgxNTcxM2NiNTRjOWY5YmMzZmEvc3JjL3BhZ2VzL2luZGV4L2luZGV4LmpzeA==" title="https://github.com/tuture-dev/ultra-club/blob/c16984d25953ccee3a345815713cb54c9f9bc3fa/src/pages/index/index.jsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro, &#123; useEffect &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line"><span class="keyword">import</span> &#123; View, Text &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span></span><br><span class="line"><span class="keyword">import</span> &#123; AtFab, AtFloatLayout, AtMessage &#125; <span class="keyword">from</span> <span class="string">'taro-ui'</span></span><br><span class="line"><span class="keyword">import</span> &#123; useSelector, useDispatch &#125; <span class="keyword">from</span> <span class="string">'@tarojs/redux'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; PostCard, PostForm &#125; <span class="keyword">from</span> <span class="string">'../../components'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./index.scss'</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  SET_POST_FORM_IS_OPENED,</span><br><span class="line">  SET_LOGIN_INFO,</span><br><span class="line">  GET_POSTS,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'../../constants'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> Authing <span class="keyword">from</span> <span class="string">'../../utils/authing/authing'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Index</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> posts = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.post.posts) || []</span><br><span class="line">  <span class="keyword">const</span> isOpened = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.post.isOpened)</span><br><span class="line">  <span class="keyword">const</span> userId = useSelector(<span class="function"><span class="params">state</span> =&gt;</span> state.user.userId)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> isLogged = !!userId</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> dispatch = useDispatch()</span><br><span class="line"></span><br><span class="line">  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> WeappEnv = Taro.getEnv() === Taro.ENV_TYPE.WEAPP</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (WeappEnv) &#123;</span><br><span class="line">      Taro.cloud.init()</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">getStorage</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]      <span class="comment">// 在应用初始化的时候，对应用进行鉴权，检查登录状态，如果登录失效，则情况缓存信息</span></span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">[tuture-del]        <span class="keyword">const</span> &#123; data &#125; = <span class="keyword">await</span> Taro.getStorage(&#123; <span class="attr">key</span>: <span class="string">'userInfo'</span> &#125;)</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> userPoolId = <span class="string">''</span></span><br><span class="line">[tuture-add]        <span class="keyword">const</span> &#123; <span class="attr">data</span>: token &#125; = <span class="keyword">await</span> Taro.getStorage(&#123; <span class="attr">key</span>: <span class="string">'token'</span> &#125;)</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> authing = <span class="keyword">new</span> Authing(&#123;</span><br><span class="line">[tuture-add]          userPoolId,</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> result = <span class="keyword">await</span> Taro.request(&#123;</span><br><span class="line">[tuture-add]          url: <span class="string">`https://users.authing.cn/authing/token?access_token=<span class="subst">$&#123;userInfo.token&#125;</span>`</span>,</span><br><span class="line">[tuture-add]        &#125;)</span><br><span class="line"></span><br><span class="line">[tuture-del]        <span class="keyword">const</span> &#123; nickName, avatar, _id &#125; = data</span><br><span class="line">[tuture-add]        <span class="keyword">if</span> (result.data.status) &#123;</span><br><span class="line">[tuture-add]          <span class="keyword">const</span> &#123; data &#125; = <span class="keyword">await</span> Taro.getStorage(&#123; <span class="attr">key</span>: <span class="string">'userInfo'</span> &#125;)</span><br><span class="line"></span><br><span class="line">[tuture-del]        <span class="comment">// 更新 Redux Store 数据</span></span><br><span class="line">[tuture-del]        dispatch(&#123;</span><br><span class="line">[tuture-del]          type: SET_LOGIN_INFO,</span><br><span class="line">[tuture-del]          payload: &#123; nickName, avatar, <span class="attr">userId</span>: _id &#125;,</span><br><span class="line">[tuture-del]        &#125;)</span><br><span class="line">[tuture-add]          <span class="keyword">const</span> &#123; nickName, avatar, _id &#125; = data</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]          <span class="comment">// 更新 Redux Store 数据</span></span><br><span class="line">[tuture-add]          dispatch(&#123;</span><br><span class="line">[tuture-add]            type: SET_LOGIN_INFO,</span><br><span class="line">[tuture-add]            payload: &#123; nickName, avatar, <span class="attr">userId</span>: _id &#125;,</span><br><span class="line">[tuture-add]          &#125;)</span><br><span class="line">[tuture-add]        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">[tuture-add]          <span class="keyword">await</span> Taro.removeStorage(&#123; <span class="attr">key</span>: <span class="string">'userInfo'</span> &#125;)</span><br><span class="line">[tuture-add]          <span class="keyword">await</span> Taro.removeStorage(&#123; <span class="attr">key</span>: <span class="string">'token'</span> &#125;)</span><br><span class="line">[tuture-add]        &#125;</span><br><span class="line">      &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'getStorage ERR: '</span>, err)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (!isLogged) &#123;</span><br><span class="line">      getStorage()</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">getPosts</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="comment">// 更新 Redux Store 数据</span></span><br><span class="line">        dispatch(&#123;</span><br><span class="line">          type: GET_POSTS,</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'getPosts ERR: '</span>, err)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (!posts.length) &#123;</span><br><span class="line">      getPosts()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, [])</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">setIsOpened</span>(<span class="params">isOpened</span>) </span>&#123;</span><br><span class="line">    dispatch(&#123; <span class="attr">type</span>: SET_POST_FORM_IS_OPENED, <span class="attr">payload</span>: &#123; isOpened &#125; &#125;)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleClickEdit</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!isLogged) &#123;</span><br><span class="line">      Taro.atMessage(&#123;</span><br><span class="line">        type: <span class="string">'warning'</span>,</span><br><span class="line">        message: <span class="string">'您还未登录哦！'</span>,</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      setIsOpened(<span class="literal">true</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'posts'</span>, posts)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"index"</span>&gt;</span><br><span class="line">      &lt;AtMessage /&gt;</span><br><span class="line">      &#123;posts.map(<span class="function"><span class="params">post</span> =&gt;</span> (</span><br><span class="line">        &lt;PostCard key=&#123;post._id&#125; postId=&#123;post._id&#125; post=&#123;post&#125; isList /&gt;</span><br><span class="line">      ))&#125;</span><br><span class="line">      &lt;AtFloatLayout</span><br><span class="line">        isOpened=&#123;isOpened&#125;</span><br><span class="line">        title=<span class="string">"发表新文章"</span></span><br><span class="line">        onClose=&#123;() =&gt; setIsOpened(<span class="literal">false</span>)&#125;</span><br><span class="line">      &gt;</span><br><span class="line">        &lt;PostForm /&gt;</span><br><span class="line">      &lt;<span class="regexp">/AtFloatLayout&gt;</span></span><br><span class="line"><span class="regexp">      &lt;View className="post-button"&gt;</span></span><br><span class="line"><span class="regexp">        &lt;AtFab onClick=&#123;handleClickEdit&#125;&gt;</span></span><br><span class="line"><span class="regexp">          &lt;Text className="at-fab__icon at-icon at-icon-edit"&gt;&lt;/</span>Text&gt;</span><br><span class="line">        &lt;<span class="regexp">/AtFab&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>View&gt;</span><br><span class="line">    &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">  )</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">Index.config = &#123;</span></span><br><span class="line"><span class="regexp">  navigationBarTitleText: '首页',</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure><p>可以看到，上面的内容主要做出了如下几处修改：</p><ul><li>我们在 <code>getStorage</code> 函数里面，首先获取了之前登录时保存的用户凭证 <code>token</code> ，然后初始化了一个 <code>authing</code> 实例，并通过 <code>Taro.request</code> 的方式，去请求 Authing 为我们提供的鉴权地址：<code>https://users.authing.cn/authing/token?access_token=YOUR_TOKEN</code> ，我们将这个链接中的 <code>YOUR_TOKEN</code> 替换成我们保存在 <code>storage</code> 里面的 <code>token</code> ，访问这个地址如果成功则会得到如下的结果：</li></ul><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">"status"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">"message"</span>: <span class="string">"已登录"</span>,</span><br><span class="line">  <span class="string">"code"</span>: <span class="number">200</span>,</span><br><span class="line">  <span class="string">"token"</span>: &#123;</span><br><span class="line">    <span class="string">"data"</span>: &#123;</span><br><span class="line"><span class="string">"email"</span>: <span class="string">"YOUR_EMAIL@domain.com"</span>,</span><br><span class="line"><span class="string">"id"</span>: <span class="string">"YOUR_USER_ID"</span>,</span><br><span class="line"><span class="string">"clientId"</span>: <span class="string">"YOUR_UESR_POOL_ID"</span></span><br><span class="line">    &#125;,</span><br><span class="line">        <span class="string">"iat"</span>: <span class="string">"Token 签发时间"</span></span><br><span class="line"><span class="string">"exp"</span>: <span class="string">"Token 过期时间"</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如果失败其中的 <code>status</code> 会为 <code>false</code> ，其它内容也会相应的变化。</p><ul><li>接着我们判断 <code>status</code> ，如果为 <code>true</code> 则从 <code>storage</code> 里面取出数据，设置进 Redux Store，如果为 <code>false</code> ，我们清空 <code>storage</code> 数据，这样在用户发帖时会提示用户需要登录。</li></ul><h2 id="小结-1"><a href="#小结-1" class="headerlink" title="小结"></a>小结</h2><p>通过这篇教程，我们将之前一个比较简单的用户系统替换成了专业的通用云身份提供商 Authing 提供的专业的用户系统，并且体验到了通过短短几行代码就可以实现专业的手机号+验证码登录、用户登出、微信授权登录、并且还可以做用户登录状态的检测等。</p><p>有了这样一个简单、方便且强大的用户系统做保障之后，我们的博客应用小程序将可以无顾虑的扩展其它模块，而涉及到身份相关的内容都可以交给 Authing 来做。当然我们这片文章还只用了 Authing 很小的一部分功能，还有诸如企业组织管理、单点登录等高级功能，有兴趣的用户可以自行发掘 💪！</p>]]></content>
    
    <summary type="html">
    
      为了让我们的博客看起来更加专业，我们打算给它也加上整上一个专业的用户系统，有了最为核心的用户系统在，我们博客之后的扩展都可以游刃有余，但是据统计，一个应用要想打造一个比较专业的用户系统，至少需要花费几个月时间，还需要花大量的精力去维护打造出来的用户系统，所在在做了一番调研之后，我们将目标放在了一个叫做 Authing 的通用云身份平台，它提供的服务就是帮应用快速集成一个高效、安全的用户系统，而我们这篇教程将会讲解如何借助 Authing 来给我们的之前的小程序博客武装一个专业的用户系统。
    
    </summary>
    
    
      <category term="小程序" scheme="https://tuture.co/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
    
      <category term="Taro" scheme="https://tuture.co/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/Taro/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/Taro/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="Taro" scheme="https://tuture.co/tags/Taro/"/>
    
      <category term="用户系统" scheme="https://tuture.co/tags/%E7%94%A8%E6%88%B7%E7%B3%BB%E7%BB%9F/"/>
    
      <category term="鉴权" scheme="https://tuture.co/tags/%E9%89%B4%E6%9D%83/"/>
    
      <category term="认证" scheme="https://tuture.co/tags/%E8%AE%A4%E8%AF%81/"/>
    
      <category term="OAuth" scheme="https://tuture.co/tags/OAuth/"/>
    
      <category term="微信登录" scheme="https://tuture.co/tags/%E5%BE%AE%E4%BF%A1%E7%99%BB%E5%BD%95/"/>
    
      <category term="QQ登录" scheme="https://tuture.co/tags/QQ%E7%99%BB%E5%BD%95/"/>
    
      <category term="Github登录" scheme="https://tuture.co/tags/Github%E7%99%BB%E5%BD%95/"/>
    
  </entry>
  
  <entry>
    <title>Nest.js 从零到壹系列（七）：讨厌写文档，Swagger UI 了解一下？</title>
    <link href="https://tuture.co/2020/05/12/@4675l54tY/"/>
    <id>https://tuture.co/2020/05/12/@4675l54tY/</id>
    <published>2020-05-11T16:06:00.509Z</published>
    <updated>2021-07-11T02:09:59.484Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one"><img alt class="avatar" data-src="/images/avatars/bldtp.png"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vdXNlci81YTVmZjNlMTZmYjlhMDFjOTUyNjIxNWY=" title="https://juejin.im/user/5a5ff3e16fb9a01c9526215f"><p class="nickName">布拉德特皮</p><i class="fa fa-external-link"></i></span>  </div>  </div></div><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>上一篇介绍了如何使用寥寥几行代码就实现 RBAC 0，解决了权限管理的痛点，这篇将解决另一个痛点：写文档。</p><a id="more"></a><p>上家公司在恒大的时候，项目的后端文档使用 Swagger UI 来展示，这是一个遵循 RESTful API 的、 可以互动的文档，所见即所得。</p><p>然后进入了目前的公司，接口文档是用 Markdown 写的，并保存在 SVN 上，每次接口修改，都要更新文档，并同步到 SVN，然后前端再拉下来更新。</p><p>这些都还好，之前还有直接丢个 .doc 文档过来的。。。。</p><p>以前我总吐槽后端太懒，文档都不愿更新，直到自己写后端时，嗯，真香。。。于是，为了不耽误摸鱼时间，寻找一个趁手的文档工具，就提上日程了。</p><p><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one">GitHub 项目地址<i class="fa fa-external-link"></i></span>，欢迎各位大佬 Star。</p><h2 id="什么是-RESTful-API"><a href="#什么是-RESTful-API" class="headerlink" title="什么是 RESTful API"></a>什么是 RESTful API</h2><p><span class="exturl" data-url="aHR0cHM6Ly93d3cuemhpaHUuY29tL3F1ZXN0aW9uLzI4NTU3MTE1L2Fuc3dlci80ODA5NDQzOA==" title="https://www.zhihu.com/question/28557115/answer/48094438">怎样用通俗的语言解释 REST，以及 RESTful ？ - 覃超的回答 - 知乎<i class="fa fa-external-link"></i></span></p><h2 id="Swagger-之旅"><a href="#Swagger-之旅" class="headerlink" title="Swagger 之旅"></a>Swagger 之旅</h2><h3 id="初始化-Swagger"><a href="#初始化-Swagger" class="headerlink" title="初始化 Swagger"></a>初始化 Swagger</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">$ yarn add <span class="meta">@nestjs</span>/swagger swagger-ui-express -S</span><br></pre></td></tr></table></figure><p>安装完依赖包后，只需要在 main.ts 中引入，并设置一些基本信息即可：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/main.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; NestFactory &#125; <span class="keyword">from</span> <span class="string">'@nestjs/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppModule &#125; <span class="keyword">from</span> <span class="string">'./app.module'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> express <span class="keyword">from</span> <span class="string">'express'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./middleware/logger.middleware'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TransformInterceptor &#125; <span class="keyword">from</span> <span class="string">'./interceptor/transform.interceptor'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; HttpExceptionFilter &#125; <span class="keyword">from</span> <span class="string">'./filter/http-exception.filter'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AllExceptionsFilter &#125; <span class="keyword">from</span> <span class="string">'./filter/any-exception.filter'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; SwaggerModule, DocumentBuilder &#125; <span class="keyword">from</span> <span class="string">'@nestjs/swagger'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">bootstrap</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> app = <span class="keyword">await</span> NestFactory.create(AppModule);</span><br><span class="line">  app.use(express.json()); <span class="comment">// For parsing application/json</span></span><br><span class="line">  app.use(express.urlencoded(&#123; extended: <span class="literal">true</span> &#125;)); <span class="comment">// For parsing application/x-www-form-urlencoded</span></span><br><span class="line">  <span class="comment">// 监听所有的请求路由，并打印日志</span></span><br><span class="line">  app.use(logger);</span><br><span class="line">  <span class="comment">// 使用拦截器打印出参</span></span><br><span class="line">  app.useGlobalInterceptors(<span class="keyword">new</span> TransformInterceptor());</span><br><span class="line">  app.setGlobalPrefix(<span class="string">'nest-zero-to-one'</span>);</span><br><span class="line">  app.useGlobalFilters(<span class="keyword">new</span> AllExceptionsFilter());</span><br><span class="line">  app.useGlobalFilters(<span class="keyword">new</span> HttpExceptionFilter());</span><br><span class="line">  <span class="comment">// 配置 Swagger</span></span><br><span class="line">  <span class="keyword">const</span> options = <span class="keyword">new</span> DocumentBuilder()</span><br><span class="line">    .setTitle(<span class="string">'Nest zero to one'</span>)</span><br><span class="line">    .setDescription(<span class="string">'The nest-zero-to-one API description'</span>)</span><br><span class="line">    .setVersion(<span class="string">'1.0'</span>)</span><br><span class="line">    .addTag(<span class="string">'test'</span>)</span><br><span class="line">    .build();</span><br><span class="line">  <span class="keyword">const</span> <span class="built_in">document</span> = SwaggerModule.createDocument(app, options);</span><br><span class="line">  SwaggerModule.setup(<span class="string">'api-doc'</span>, app, <span class="built_in">document</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">await</span> app.listen(<span class="number">3000</span>);</span><br><span class="line">&#125;</span><br><span class="line">bootstrap();</span><br></pre></td></tr></table></figure><p>接下来，我们访问 <code>localhost:3000/api-doc/#/</code> （假设你的端口是 3000），不出意外，会看到下图：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706531-bdc6bd31-d0d8-4571-ad14-e2dab278be6e.webp"></p><p>这就是 Swagger UI，页面列出了我们之前写的 <code>Router</code> 和 <code>DTO</code>（即图中的 Schemas）</p><h3 id="映射-DTO"><a href="#映射-DTO" class="headerlink" title="映射 DTO"></a>映射 DTO</h3><p>点开 <code>RegisterInfoDTO</code>，发现里面是空的，接下来，我们配置一下参数信息，在 <code>user.dto.ts</code> 中引入 <code>ApiProperty</code>，然后添加到之前的 <code>class-validator</code> 上：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.dto.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; IsNotEmpty, IsNumber, IsString &#125; <span class="keyword">from</span> <span class="string">'class-validator'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ApiProperty &#125; <span class="keyword">from</span> <span class="string">'@nestjs/swagger'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> RegisterInfoDTO &#123;</span><br><span class="line">  <span class="meta">@ApiProperty</span>()</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'用户名不能为空'</span> &#125;)</span><br><span class="line">  readonly accountName: <span class="built_in">string</span>;</span><br><span class="line">  <span class="meta">@ApiProperty</span>()</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'真实姓名不能为空'</span> &#125;)</span><br><span class="line">  <span class="meta">@IsString</span>(&#123; message: <span class="string">'真实姓名必须是 String 类型'</span> &#125;)</span><br><span class="line">  readonly realName: <span class="built_in">string</span>;</span><br><span class="line">  <span class="meta">@ApiProperty</span>()</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'密码不能为空'</span> &#125;)</span><br><span class="line">  readonly password: <span class="built_in">string</span>;</span><br><span class="line">  <span class="meta">@ApiProperty</span>()</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'重复密码不能为空'</span> &#125;)</span><br><span class="line">  readonly repassword: <span class="built_in">string</span>;</span><br><span class="line">  <span class="meta">@ApiProperty</span>()</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'手机号不能为空'</span> &#125;)</span><br><span class="line">  <span class="meta">@IsNumber</span>()</span><br><span class="line">  readonly mobile: <span class="built_in">number</span>;</span><br><span class="line">  <span class="meta">@ApiProperty</span>()</span><br><span class="line">  readonly role?: <span class="built_in">string</span> | <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>保存，<strong>刷新页面</strong>（该页面没有热加载功能），再看看效果：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706029-7e5dd58c-0139-4a7b-a994-0b83e034c32f.webp"></p><p>看到已经有了字段信息了，但是我们的 <code>role</code> 字段是【可选】的，而文档中是【必填】的，接下来再完善一下描述：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.dto.ts</span></span><br><span class="line">  <span class="meta">@ApiProperty</span>(&#123;</span><br><span class="line">    required: <span class="literal">false</span>,</span><br><span class="line">    description: <span class="string">'[用户角色]: 0-超级管理员 | 1-管理员 | 2-开发&amp;测试&amp;运营 | 3-普通用户（只能查看）'</span>,</span><br><span class="line">  &#125;)</span><br><span class="line">  readonly role?: <span class="built_in">number</span> | <span class="built_in">string</span>;</span><br></pre></td></tr></table></figure><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706081-cf4759f3-df1f-489b-bfbd-c5bf20b45486.webp"></p><p>其实，我们可以使用 <code>ApiPropertyOptional</code> 装饰器来表示【可选】参数，这样就不用频繁写 <code>required: false</code> 了：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.dto.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; IsNotEmpty, IsNumber, IsString &#125; <span class="keyword">from</span> <span class="string">'class-validator'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ApiProperty, ApiPropertyOptional &#125; <span class="keyword">from</span> <span class="string">'@nestjs/swagger'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> RegisterInfoDTO &#123;</span><br><span class="line">  ...</span><br><span class="line">  <span class="meta">@ApiPropertyOptional</span>(&#123;</span><br><span class="line">    description: <span class="string">'[用户角色]: 0-超级管理员 | 1-管理员 | 2-开发&amp;测试&amp;运营 | 3-普通用户（只能查看）'</span>,</span><br><span class="line">  &#125;)</span><br><span class="line">  readonly role?: <span class="built_in">number</span> | <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="接口标签分类"><a href="#接口标签分类" class="headerlink" title="接口标签分类"></a>接口标签分类</h3><p>通过前面的截图可以看到，所有的接口都在 Default 栏目下，接口多了之后，就很不方便查找了。</p><p>我们可以根据 Controller 来分类，添加装饰器 <code>@ApiTags</code> 即可：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.controller.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Controller, Post, Body, UseGuards, UsePipes &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthGuard &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthService &#125; <span class="keyword">from</span> <span class="string">'../auth/auth.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'./user.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ValidationPipe &#125; <span class="keyword">from</span> <span class="string">'../../pipe/validation.pipe'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; RegisterInfoDTO &#125; <span class="keyword">from</span> <span class="string">'./user.dto'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ApiTags &#125; <span class="keyword">from</span> <span class="string">'@nestjs/swagger'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@ApiTags</span>(<span class="string">'user'</span>) <span class="comment">// 添加 接口标签 装饰器</span></span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly authService: AuthService, <span class="keyword">private</span> readonly usersService: UserService</span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// JWT验证 - Step 1: 用户请求登录</span></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'login'</span>)</span><br><span class="line">  <span class="keyword">async</span> login(<span class="meta">@Body</span>() loginParmas: <span class="built_in">any</span>) &#123;</span><br><span class="line">    ...</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UsePipes</span>(<span class="keyword">new</span> ValidationPipe())</span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'register'</span>)</span><br><span class="line">  <span class="keyword">async</span> register(<span class="meta">@Body</span>() body: RegisterInfoDTO) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.usersService.register(body);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>保存再刷新一下页面，看到用户相关的都在一个栏目下了：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706112-e35f90a8-e7c4-4eb7-958a-8ae30f0349fc.webp"></p><h3 id="在-Swagger-中登录"><a href="#在-Swagger-中登录" class="headerlink" title="在 Swagger 中登录"></a>在 Swagger 中登录</h3><p>接下来，我们测试一下注册接口的请求，先编辑参数，然后点击 Execute：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706047-06afc747-00e0-4217-92a2-01fa644bfc40.webp"></p><p>然后看一下返回参数：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706096-c8550d16-d7e2-4e3c-af98-bca0fd94cf59.webp"></p><p>看到返回的是 401 未登录。</p><p>那么，如何在 Swagger 中登录呢？</p><p>我们先完善登录接口的 DTO：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.dto.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; IsNotEmpty, IsNumber, IsString &#125; <span class="keyword">from</span> <span class="string">'class-validator'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ApiProperty, ApiPropertyOptional &#125; <span class="keyword">from</span> <span class="string">'@nestjs/swagger'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> LoginDTO &#123;</span><br><span class="line">  <span class="meta">@ApiProperty</span>()</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'用户名不能为空'</span> &#125;)</span><br><span class="line">  readonly username: <span class="built_in">string</span>;</span><br><span class="line">  <span class="meta">@ApiProperty</span>()</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'密码不能为空'</span> &#125;)</span><br><span class="line">  readonly password: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> RegisterInfoDTO &#123;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后在 <code>main.ts</code> 中加上 <code>addBearerAuth()</code> 方法，启用承载授权</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/main.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; NestFactory &#125; <span class="keyword">from</span> <span class="string">'@nestjs/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppModule &#125; <span class="keyword">from</span> <span class="string">'./app.module'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> express <span class="keyword">from</span> <span class="string">'express'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./middleware/logger.middleware'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TransformInterceptor &#125; <span class="keyword">from</span> <span class="string">'./interceptor/transform.interceptor'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; HttpExceptionFilter &#125; <span class="keyword">from</span> <span class="string">'./filter/http-exception.filter'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AllExceptionsFilter &#125; <span class="keyword">from</span> <span class="string">'./filter/any-exception.filter'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; SwaggerModule, DocumentBuilder &#125; <span class="keyword">from</span> <span class="string">'@nestjs/swagger'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">bootstrap</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> app = <span class="keyword">await</span> NestFactory.create(AppModule);</span><br><span class="line">  ...</span><br><span class="line">  <span class="comment">// 配置 Swagger</span></span><br><span class="line">  <span class="keyword">const</span> options = <span class="keyword">new</span> DocumentBuilder()</span><br><span class="line">    .addBearerAuth() <span class="comment">// 开启 BearerAuth 授权认证</span></span><br><span class="line">    .setTitle(<span class="string">'Nest zero to one'</span>)</span><br><span class="line">    .setDescription(<span class="string">'The nest-zero-to-one API description'</span>)</span><br><span class="line">    .setVersion(<span class="string">'1.0'</span>)</span><br><span class="line">    .addTag(<span class="string">'test'</span>)</span><br><span class="line">    .build();</span><br><span class="line">  <span class="keyword">const</span> <span class="built_in">document</span> = SwaggerModule.createDocument(app, options);</span><br><span class="line">  SwaggerModule.setup(<span class="string">'api-doc'</span>, app, <span class="built_in">document</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">await</span> app.listen(<span class="number">3000</span>);</span><br><span class="line">&#125;</span><br><span class="line">bootstrap();</span><br></pre></td></tr></table></figure><p>然后只需在 Controller 中添加 <code>@ApiBearerAuth()</code> 装饰器即可，顺便把登录的 DTO 也加上：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.controller.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Controller, Post, Body, UseGuards, UsePipes &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthGuard &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthService &#125; <span class="keyword">from</span> <span class="string">'../auth/auth.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'./user.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ValidationPipe &#125; <span class="keyword">from</span> <span class="string">'../../pipe/validation.pipe'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; LoginDTO, RegisterInfoDTO &#125; <span class="keyword">from</span> <span class="string">'./user.dto'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ApiTags, ApiBearerAuth &#125; <span class="keyword">from</span> <span class="string">'@nestjs/swagger'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@ApiBearerAuth</span>() <span class="comment">// Swagger 的 JWT 验证</span></span><br><span class="line"><span class="meta">@ApiTags</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"></span></span><br><span class="line"><span class="params">    <span class="keyword">private</span> readonly authService: AuthService,</span></span><br><span class="line"><span class="params">    <span class="keyword">private</span> readonly usersService: UserService,</span></span><br><span class="line"><span class="params">  </span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// JWT 验证 - Step 1: 用户请求登录</span></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'login'</span>)</span><br><span class="line">  <span class="keyword">async</span> login(<span class="meta">@Body</span>() loginParmas: LoginDTO) &#123;</span><br><span class="line">    <span class="comment">// console.log('JWT验证 - Step 1: 用户请求登录');</span></span><br><span class="line">    <span class="keyword">const</span> authResult = <span class="keyword">await</span> <span class="keyword">this</span>.authService.validateUser(</span><br><span class="line">      loginParmas.username,</span><br><span class="line">      loginParmas.password,</span><br><span class="line">    );</span><br><span class="line">    <span class="keyword">switch</span> (authResult.code) &#123;</span><br><span class="line">      <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.authService.certificate(authResult.user);</span><br><span class="line">      <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          code: <span class="number">600</span>,</span><br><span class="line">          msg: <span class="string">`账号或密码不正确`</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">      <span class="keyword">default</span>:</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          code: <span class="number">600</span>,</span><br><span class="line">          msg: <span class="string">`查无此人`</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UsePipes</span>(<span class="keyword">new</span> ValidationPipe())</span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'register'</span>)</span><br><span class="line">  <span class="keyword">async</span> register(<span class="meta">@Body</span>() body: RegisterInfoDTO) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.usersService.register(body);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后，我们去页面中登录：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706171-316403c7-b827-49df-88ce-543884a6ad95.webp"></p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706197-c41fbd63-a67e-4f4d-85b8-191a84a0c99f.webp"></p><p>将 <code>Responses body</code> 中的 <code>token</code> 复制出来，然后将页面拖到顶部，点击右上角那个带锁的按钮：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706058-c8b4bcd3-f7a3-4a98-8d25-4d0dccb8640a.webp"></p><p>将 token 复制到弹窗的输入框，点击 <code>Authorize</code>，即可授权成功：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706049-5a34848d-6d1a-4a53-88bc-375ea94b928a.webp"></p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706141-095d4416-de2d-4a65-80a7-6acacaf9881b.webp"></p><blockquote><p>注意：这里显示的授权 <code>Value</code> 是密文，也就是，如果你复制错了，或者 token 过期了，也不会有任何提示。</p></blockquote><p>现在，我们再重新请求一下注册接口：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706068-274d2b84-5d1b-4d17-94a6-8bcc27746ebc.webp"></p><p>成功！</p><h3 id="示例参数"><a href="#示例参数" class="headerlink" title="示例参数"></a>示例参数</h3><p>前面登录的时候，需要手动输入用户名、密码，那么有没有可能，事先写好，这样前端来看文档的时候，直接用默认账号登录就行了呢？</p><p>我们先给 DTO 加点料：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.dto.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; IsNotEmpty, IsNumber, IsString &#125; <span class="keyword">from</span> <span class="string">'class-validator'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ApiProperty, ApiPropertyOptional &#125; <span class="keyword">from</span> <span class="string">'@nestjs/swagger'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// @ApiExtraModels(LoginDTO)</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> LoginDTO &#123;</span><br><span class="line">  <span class="meta">@ApiProperty</span>(&#123; description: <span class="string">'用户名'</span>, example: <span class="string">'koa2'</span>, &#125;)</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'用户名不能为空'</span> &#125;)</span><br><span class="line">  readonly username: <span class="built_in">string</span>;</span><br><span class="line">  <span class="meta">@ApiProperty</span>(&#123; description: <span class="string">'密码'</span>, example: <span class="string">'a123456'</span> &#125;)</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'密码不能为空'</span> &#125;)</span><br><span class="line">  readonly password: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> RegisterInfoDTO &#123;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后，去 Controller 中引入 <code>ApiBody</code>, 并用来装饰接口，type 直接指定 <code>LoginDTO</code> 即可：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.controller.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Controller, Post, Body, UseGuards, UsePipes &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthGuard &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthService &#125; <span class="keyword">from</span> <span class="string">'../auth/auth.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'./user.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ValidationPipe &#125; <span class="keyword">from</span> <span class="string">'../../pipe/validation.pipe'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; LoginDTO, RegisterInfoDTO &#125; <span class="keyword">from</span> <span class="string">'./user.dto'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ApiTags, ApiBearerAuth, ApiBody &#125; <span class="keyword">from</span> <span class="string">'@nestjs/swagger'</span>;</span><br><span class="line"><span class="meta">@ApiBearerAuth</span>()</span><br><span class="line"><span class="meta">@ApiTags</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly authService: AuthService, <span class="keyword">private</span> readonly usersService: UserService</span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// JWT验证 - Step 1: 用户请求登录</span></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'login'</span>)</span><br><span class="line">  <span class="meta">@ApiBody</span>(&#123;</span><br><span class="line">    description: <span class="string">'用户登录'</span>,</span><br><span class="line">    <span class="keyword">type</span>: LoginDTO,</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">async</span> login(<span class="meta">@Body</span>() loginParmas: LoginDTO) &#123;</span><br><span class="line">    ...</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UsePipes</span>(<span class="keyword">new</span> ValidationPipe())</span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'register'</span>)</span><br><span class="line">  <span class="keyword">async</span> register(<span class="meta">@Body</span>() body: RegisterInfoDTO) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.usersService.register(body);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>保存代码，再刷新一下页面：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706132-9f39e5b1-cb3b-4b1a-a916-7b466d02033c.webp"></p><p>并且点击 <code>Schema</code> 的时候，还能看到 DTO 详情：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706231-8cc62f87-5172-470c-a490-66d842678f40.webp"></p><p>再点击 <code>try it out</code> 按钮的时候，就会自动使用默认参数了：</p><p><img alt data-src="https://static.powerformer.com/c/@4675l54tY/1589284706156-dc8752ff-d7d0-4583-9896-8242fef8f67d.webp"></p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>本篇介绍了如何使用 Swagger 自动生成可互动的文档。</p><p>可以看到，我们只需在写代码的时候，加一些装饰器，并配置一些属性，就可以在 Swagger UI 中生成文档，并且这个文档是根据代码，实时更新的。查看文档，只需访问链接即可，不用再传来传去了，你好我好大家好。</p><p>本篇只是抛砖引玉， Swagger UI 还有很多可配置的玩法，比如数组应该怎么写，枚举应该怎么弄，如何设置请求头等等，因为篇幅原因，就不在这里展开了。有兴趣的同学，可以自行去官网了解~</p><blockquote><p>本篇收录于<span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vY29sbGVjdGlvbi81ZTg5M2ExYjZmYjlhMDRkNjVhMTU0MDA=" title="https://juejin.im/collection/5e893a1b6fb9a04d65a15400">NestJS 实战教程<i class="fa fa-external-link"></i></span>，更多文章敬请关注。</p></blockquote><p>参考资料：</p><p><span class="exturl" data-url="aHR0cHM6Ly9kb2NzLm5lc3Rqcy5jb20vcmVjaXBlcy9zd2FnZ2Vy" title="https://docs.nestjs.com/recipes/swagger">Nest 官网 - OpenAPI (Swagger)<i class="fa fa-external-link"></i></span></p><p><span class="exturl" data-url="aHR0cHM6Ly9zd2FnZ2VyLmlvL3NwZWNpZmljYXRpb24v" title="https://swagger.io/specification/">Swagger - OpenAPI Specification<i class="fa fa-external-link"></i></span></p><p><span class="exturl" data-url="aHR0cHM6Ly9pZHJhdGhlcmJld3JpdGluZy5jb20vbGVhcm5hcGlkb2MvcHViYXBpc19zd2FnZ2VyLmh0bWwjbWFrZS1hLXJlcXVlc3Q=" title="https://idratherbewriting.com/learnapidoc/pubapis_swagger.html#make-a-request">Swagger UI tutorial<i class="fa fa-external-link"></i></span></p>]]></content>
    
    <summary type="html">
    
      上一篇介绍了如何使用寥寥几行代码就实现 RBAC 0，解决了权限管理的痛点，这篇将解决另一个痛点：写文档。
    
    </summary>
    
    
      <category term="后端" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/"/>
    
      <category term="Node.js" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="Nest.js" scheme="https://tuture.co/tags/Nest-js/"/>
    
  </entry>
  
  <entry>
    <title>Nest.js 从零到壹系列（六）：用 15 行代码实现 RBAC 0</title>
    <link href="https://tuture.co/2020/05/12/@uXOOfFmhS/"/>
    <id>https://tuture.co/2020/05/12/@uXOOfFmhS/</id>
    <published>2020-05-11T16:05:00.509Z</published>
    <updated>2021-07-11T02:09:59.484Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one"><img alt class="avatar" data-src="/images/avatars/bldtp.png"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vdXNlci81YTVmZjNlMTZmYjlhMDFjOTUyNjIxNWY=" title="https://juejin.im/user/5a5ff3e16fb9a01c9526215f"><p class="nickName">布拉德特皮</p><i class="fa fa-external-link"></i></span>  </div>  </div></div><p>上一篇介绍了如何使用 DTO 和管道对入参进行验证，接下来介绍一下如何用拦截器，实现后台管理系统中最复杂、也最令人头疼的 RBAC。<br><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one">GitHub 项目地址<i class="fa fa-external-link"></i></span>，欢迎各位大佬 Star。</p><a id="more"></a><h2 id="RBAC"><a href="#RBAC" class="headerlink" title="RBAC"></a>RBAC</h2><h3 id="1-什么是-RBAC-？"><a href="#1-什么是-RBAC-？" class="headerlink" title="1. 什么是 RBAC ？"></a>1. 什么是 RBAC ？</h3><p>RBAC：基于角色的权限访问控制（Role-Based Access Control），是商业系统中最常见的权限管理技术之一。在 RBAC 中，权限与角色相关联，用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理。</p><h3 id="2-RBAC-模型的分类"><a href="#2-RBAC-模型的分类" class="headerlink" title="2. RBAC 模型的分类"></a>2. RBAC 模型的分类</h3><p>RBAC 模型可以分为：RBAC 0、RBAC 1、RBAC 2、RBAC 3 四种。<br>其中 RBAC 0 是基础，也是最简单的，相当于底层逻辑。RBAC 1、RBAC 2、RBAC 3 都是以 RBAC 0 为基础的升级。</p><h4 id="2-1-RBAC-0"><a href="#2-1-RBAC-0" class="headerlink" title="2.1 RBAC 0"></a>2.1 RBAC 0</h4><p>最简单的用户、角色、权限模型。这里面又包含了 2 种：</p><ul><li>用户和角色是多对一关系，即：一个用户只充当一种角色，一种角色可以有多个用户担当。</li><li>用户和角色是多对多关系，即：一个用户可同时充当多种角色，一种角色可以有多个用户担当。</li></ul><p>一般情况下，使用 RBAC 0 模型就可以满足常规的权限管理系统设计了。</p><p><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795143-9d5f6ad5-475f-4330-93d7-663b0d7be51a.webp"></p><h4 id="2-2-RBAC-1"><a href="#2-2-RBAC-1" class="headerlink" title="2.2 RBAC 1"></a>2.2 RBAC 1</h4><p>相对于 RBAC0 模型，增加了子角色，引入了继承概念，即子角色可以继承父角色的所有权限。</p><h4 id="2-3-RBAC-2"><a href="#2-3-RBAC-2" class="headerlink" title="2.3 RBAC 2"></a>2.3 RBAC 2</h4><p>基于 RBAC0 模型，增加了对角色的一些限制：角色互斥、基数约束、先决条件角色等。</p><ul><li>【角色互斥】：同一用户不能分配到一组互斥角色集合中的多个角色，互斥角色是指权限互相制约的两个角色。案例：财务系统中一个用户不能同时被指派给会计角色和审计员角色。</li><li>【基数约束】：一个角色被分配的用户数量受限，它指的是有多少用户能拥有这个角色。例如：一个角色专门为公司 CEO 创建的，那这个角色的数量是有限的。</li><li>【先决条件角色】：指要想获得较高的权限，要首先拥有低一级的权限。例如：先有副总经理权限，才能有总经理权限。</li><li>【运行时互斥】：例如，允许一个用户具有两个角色的成员资格，但在运行中不可同时激活这两个角色。</li></ul><h4 id="2-4-RBAC-3"><a href="#2-4-RBAC-3" class="headerlink" title="2.4 RBAC 3"></a>2.4 RBAC 3</h4><p>称为统一模型，它包含了 RBAC 1 和 RBAC 2，利用传递性，也把 RBAC 0 包括在内，综合了 RBAC 0、RBAC 1 和 RBAC 2 的所有特点，这里就不在多描述了。</p><h2 id="具体实现"><a href="#具体实现" class="headerlink" title="具体实现"></a>具体实现</h2><p>由于是入门教程，这里只演示 RBAC 0 模型的实现，即一个用户只能有一种角色，不存在交叉关系。<br>正所谓：道生一，一生二，二生三，三生万物。学会 RBAC 0 之后，相信读者们一定能结合概念，继续扩展权限系统的。<br>其实 RBAC 0 实现起来非常简单，简单到核心代码都不超过 15 行。<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795133-4ae9f836-e204-453e-9fb5-88cf932cfe80.webp"></p><h3 id="1-拦截器逻辑编写"><a href="#1-拦截器逻辑编写" class="headerlink" title="1. 拦截器逻辑编写"></a>1. 拦截器逻辑编写</h3><p>还记得第三篇签发 Token 的时候，有个 role 字段么？那个就是用户角色，下面我们针对 Token 的 role 字段进行展开。先新建文件：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">$ nest g interceptor rbac interceptor</span><br></pre></td></tr></table></figure><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/interceptor/rbac.interceptor.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  CallHandler,</span><br><span class="line">  ExecutionContext,</span><br><span class="line">  Injectable,</span><br><span class="line">  NestInterceptor,</span><br><span class="line">  ForbiddenException,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Observable &#125; <span class="keyword">from</span> <span class="string">'rxjs'</span>;</span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> RbacInterceptor <span class="keyword">implements</span> NestInterceptor &#123;</span><br><span class="line">  <span class="comment">// role[用户角色]: 0-超级管理员 | 1-管理员 | 2-开发&amp;测试&amp;运营 | 3-普通用户（只能查看）</span></span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly role: <span class="built_in">number</span></span>) &#123;&#125;</span><br><span class="line">  intercept(context: ExecutionContext, next: CallHandler): Observable&lt;<span class="built_in">any</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> req = context.getArgByIndex(<span class="number">1</span>).req;</span><br><span class="line">    <span class="keyword">if</span> (req.user.role &gt; <span class="keyword">this</span>.role) &#123;</span><br><span class="line">      <span class="keyword">throw</span> <span class="keyword">new</span> ForbiddenException(<span class="string">'对不起，您无权操作'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> next.handle();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面就是验证的核心代码，抛开注释，总共才 15 行，<br>构造器里的 <code>role: number</code> 是通过路由传入的可配置参数，表示必须小于等于这个数字的角色才能访问。通过获取用户角色的数字，和传入的角色数字进行比较即可。</p><h3 id="2-测试准备"><a href="#2-测试准备" class="headerlink" title="2. 测试准备"></a>2. 测试准备</h3><p>和第二篇一样，直接复制下列 SQL 语句 到 navicat 查询模块，运行，创建新表：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">CREATE TABLE <span class="string">`commodity`</span> (</span><br><span class="line"> <span class="string">`id`</span> int(<span class="number">11</span>) NOT NULL AUTO_INCREMENT COMMENT <span class="string">'商品ID'</span>,</span><br><span class="line"> <span class="string">`ccolumn_id`</span> smallint(<span class="number">6</span>) NOT NULL COMMENT <span class="string">'商品_栏目ID'</span>,</span><br><span class="line"> <span class="string">`commodity_name`</span> varchar(<span class="number">10</span>) NOT NULL COMMENT <span class="string">'商品_名称'</span>,</span><br><span class="line"> <span class="string">`commodity_desc`</span> varchar(<span class="number">20</span>) NOT NULL COMMENT <span class="string">'商品_介绍'</span>,</span><br><span class="line"> <span class="string">`market_price`</span> decimal(<span class="number">7</span>,<span class="number">2</span>) NOT NULL DEFAULT <span class="string">'0.00'</span> COMMENT <span class="string">'市场价'</span>,</span><br><span class="line"> <span class="string">`sale_money`</span> decimal(<span class="number">7</span>,<span class="number">2</span>) NOT NULL DEFAULT <span class="string">'0.00'</span> COMMENT <span class="string">'销售价'</span>,</span><br><span class="line"> <span class="string">`c_by`</span> varchar(<span class="number">24</span>) NOT NULL COMMENT <span class="string">'创建人'</span>,</span><br><span class="line"> <span class="string">`c_time`</span> timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT <span class="string">'创建时间'</span>,</span><br><span class="line"> <span class="string">`u_by`</span> varchar(<span class="number">24</span>) NOT NULL DEFAULT <span class="string">'0'</span> COMMENT <span class="string">'修改人'</span>,</span><br><span class="line"> <span class="string">`u_time`</span> timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT <span class="string">'修改时间'</span>,</span><br><span class="line"> PRIMARY KEY (<span class="string">`id`</span>),</span><br><span class="line"> KEY <span class="string">`idx_ccid`</span> (<span class="string">`ccolumn_id`</span>),</span><br><span class="line"> KEY <span class="string">`idx_cn`</span> (<span class="string">`commodity_name`</span>)</span><br><span class="line">) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=<span class="string">'商品表'</span>;</span><br></pre></td></tr></table></figure><p><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795169-1ed96e98-f807-458f-a324-dd8a29143ac6.webp"></p><h3 id="3-编写业务逻辑"><a href="#3-编写业务逻辑" class="headerlink" title="3. 编写业务逻辑"></a>3. 编写业务逻辑</h3><p>创建 commodity 模块，之前的教程已经教过，这里不再赘述，直接切入正题，先编写 Service：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/commodity/commodity.service.js</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> Sequelize <span class="keyword">from</span> <span class="string">'sequelize'</span>; <span class="comment">// 引入 Sequelize 库</span></span><br><span class="line"><span class="keyword">import</span> sequelize <span class="keyword">from</span> <span class="string">'../../database/sequelize'</span>; <span class="comment">// 引入 Sequelize 实例</span></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> CommodityService &#123;</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 查询商品列表</span></span><br><span class="line"><span class="comment">   * @param &#123;*&#125; body</span></span><br><span class="line"><span class="comment">   * @param &#123;string&#125; username</span></span><br><span class="line"><span class="comment">   * @returns &#123;Promise&lt;any&gt;&#125;</span></span><br><span class="line"><span class="comment">   * @memberof CommodityService</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="keyword">async</span> queryCommodityList(body: <span class="built_in">any</span>): <span class="built_in">Promise</span>&lt;<span class="built_in">any</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; pageIndex = <span class="number">1</span>, pageSize = <span class="number">10</span>, keywords = <span class="string">''</span> &#125; = body;</span><br><span class="line">    <span class="comment">// 分页查询条件</span></span><br><span class="line">    <span class="keyword">const</span> currentIndex =</span><br><span class="line">      (pageIndex - <span class="number">1</span>) * pageSize &lt; <span class="number">0</span> ? <span class="number">0</span> : (pageIndex - <span class="number">1</span>) * pageSize;</span><br><span class="line">    <span class="keyword">const</span> queryCommodityListSQL = <span class="string">`</span></span><br><span class="line"><span class="string">     SELECT</span></span><br><span class="line"><span class="string">       id, ccolumn_id columnId, commodity_name name, commodity_desc description,</span></span><br><span class="line"><span class="string">       sale_money saleMoney, market_price marketPrice,</span></span><br><span class="line"><span class="string">       c_by createBy, DATE_FORMAT(c_time, '%Y-%m-%d %H:%i:%s') createTime,</span></span><br><span class="line"><span class="string">       u_by updateBy, DATE_FORMAT(u_time, '%Y-%m-%d %H:%i:%s') updateTime</span></span><br><span class="line"><span class="string">     FROM</span></span><br><span class="line"><span class="string">       commodity</span></span><br><span class="line"><span class="string">     WHERE</span></span><br><span class="line"><span class="string">       commodity_name LIKE '%<span class="subst">$&#123;keywords&#125;</span>%'</span></span><br><span class="line"><span class="string">     ORDER BY</span></span><br><span class="line"><span class="string">       id DESC</span></span><br><span class="line"><span class="string">     LIMIT <span class="subst">$&#123;currentIndex&#125;</span>, <span class="subst">$&#123;pageSize&#125;</span></span></span><br><span class="line"><span class="string">   `</span>;</span><br><span class="line">    <span class="keyword">const</span> commodityList: <span class="built_in">any</span>[] = <span class="keyword">await</span> sequelize.query(queryCommodityListSQL, &#123;</span><br><span class="line">      <span class="keyword">type</span>: Sequelize.QueryTypes.SELECT,</span><br><span class="line">      raw: <span class="literal">true</span>,</span><br><span class="line">      logging: <span class="literal">false</span>,</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 统计数据条数</span></span><br><span class="line">    <span class="keyword">const</span> countCommodityListSQL = <span class="string">`</span></span><br><span class="line"><span class="string">     SELECT</span></span><br><span class="line"><span class="string">       COUNT(*) AS total</span></span><br><span class="line"><span class="string">     FROM</span></span><br><span class="line"><span class="string">       commodity</span></span><br><span class="line"><span class="string">     WHERE</span></span><br><span class="line"><span class="string">       commodity_name LIKE '%<span class="subst">$&#123;keywords&#125;</span>%'</span></span><br><span class="line"><span class="string">   `</span>;</span><br><span class="line">    <span class="keyword">const</span> count: <span class="built_in">any</span> = (</span><br><span class="line">      <span class="keyword">await</span> sequelize.query(countCommodityListSQL, &#123;</span><br><span class="line">        <span class="keyword">type</span>: Sequelize.QueryTypes.SELECT,</span><br><span class="line">        raw: <span class="literal">true</span>,</span><br><span class="line">        logging: <span class="literal">false</span>,</span><br><span class="line">      &#125;)</span><br><span class="line">    )[<span class="number">0</span>];</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      code: <span class="number">200</span>,</span><br><span class="line">      data: &#123;</span><br><span class="line">        commodityList,</span><br><span class="line">        total: count.total,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 创建商品</span></span><br><span class="line"><span class="comment">   *</span></span><br><span class="line"><span class="comment">   * @param &#123;*&#125; body</span></span><br><span class="line"><span class="comment">   * @param &#123;string&#125; username</span></span><br><span class="line"><span class="comment">   * @returns &#123;Promise&lt;any&gt;&#125;</span></span><br><span class="line"><span class="comment">   * @memberof CommodityService</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="keyword">async</span> createCommodity(body: <span class="built_in">any</span>, username: <span class="built_in">string</span>): <span class="built_in">Promise</span>&lt;<span class="built_in">any</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123;</span><br><span class="line">      columnId = <span class="number">0</span>,</span><br><span class="line">      name,</span><br><span class="line">      description = <span class="string">''</span>,</span><br><span class="line">      marketPrice = <span class="number">0</span>,</span><br><span class="line">      saleMoney = <span class="number">0</span>,</span><br><span class="line">    &#125; = body;</span><br><span class="line">    <span class="keyword">const</span> createCommoditySQL = <span class="string">`</span></span><br><span class="line"><span class="string">     INSERT INTO commodity</span></span><br><span class="line"><span class="string">       (ccolumn_id, commodity_name, commodity_desc, market_price, sale_money, c_by)</span></span><br><span class="line"><span class="string">     VALUES</span></span><br><span class="line"><span class="string">       ('<span class="subst">$&#123;columnId&#125;</span>', '<span class="subst">$&#123;name&#125;</span>', '<span class="subst">$&#123;description&#125;</span>', <span class="subst">$&#123;marketPrice&#125;</span>, <span class="subst">$&#123;saleMoney&#125;</span>, '<span class="subst">$&#123;username&#125;</span>');</span></span><br><span class="line"><span class="string">   `</span>;</span><br><span class="line">    <span class="keyword">await</span> sequelize.query(createCommoditySQL, &#123; logging: <span class="literal">false</span> &#125;);</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      code: <span class="number">200</span>,</span><br><span class="line">      msg: <span class="string">'Success'</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 修改商品</span></span><br><span class="line"><span class="comment">   *</span></span><br><span class="line"><span class="comment">   * @param &#123;*&#125; body</span></span><br><span class="line"><span class="comment">   * @param &#123;string&#125; username</span></span><br><span class="line"><span class="comment">   * @returns</span></span><br><span class="line"><span class="comment">   * @memberof CommodityService</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="keyword">async</span> updateCommodity(body: <span class="built_in">any</span>, username: <span class="built_in">string</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; id, columnId, name, description, saleMoney, marketPrice &#125; = body;</span><br><span class="line">    <span class="keyword">const</span> updateCommoditySQL = <span class="string">`</span></span><br><span class="line"><span class="string">     UPDATE</span></span><br><span class="line"><span class="string">       commodity</span></span><br><span class="line"><span class="string">     SET</span></span><br><span class="line"><span class="string">       ccolumn_id = <span class="subst">$&#123;columnId&#125;</span>,</span></span><br><span class="line"><span class="string">       commodity_name = '<span class="subst">$&#123;name&#125;</span>',</span></span><br><span class="line"><span class="string">       commodity_desc = '<span class="subst">$&#123;description&#125;</span>',</span></span><br><span class="line"><span class="string">       market_price = <span class="subst">$&#123;marketPrice&#125;</span>,</span></span><br><span class="line"><span class="string">       sale_money = <span class="subst">$&#123;saleMoney&#125;</span>,</span></span><br><span class="line"><span class="string">       u_by = '<span class="subst">$&#123;username&#125;</span>'</span></span><br><span class="line"><span class="string">     WHERE</span></span><br><span class="line"><span class="string">       id = <span class="subst">$&#123;id&#125;</span></span></span><br><span class="line"><span class="string">   `</span>;</span><br><span class="line">    <span class="keyword">const</span> transaction = <span class="keyword">await</span> sequelize.transaction();</span><br><span class="line">    <span class="keyword">await</span> sequelize.query(updateCommoditySQL, &#123; transaction, logging: <span class="literal">false</span> &#125;);</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      code: <span class="number">200</span>,</span><br><span class="line">      msg: <span class="string">'Success'</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 删除商品</span></span><br><span class="line"><span class="comment">   *</span></span><br><span class="line"><span class="comment">   * @param &#123;*&#125; body</span></span><br><span class="line"><span class="comment">   * @returns</span></span><br><span class="line"><span class="comment">   * @memberof CommodityService</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="keyword">async</span> deleteCommodity(body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = body;</span><br><span class="line">    <span class="keyword">const</span> deleteCommoditySQL = <span class="string">`</span></span><br><span class="line"><span class="string">     DELETE FROM</span></span><br><span class="line"><span class="string">       commodity</span></span><br><span class="line"><span class="string">     WHERE</span></span><br><span class="line"><span class="string">       id = <span class="subst">$&#123;id&#125;</span></span></span><br><span class="line"><span class="string">   `</span>;</span><br><span class="line">    <span class="keyword">await</span> sequelize.query(deleteCommoditySQL, &#123; logging: <span class="literal">false</span> &#125;);</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      code: <span class="number">200</span>,</span><br><span class="line">      msg: <span class="string">'Success'</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面的代码就包含了增、删、改、查，基本就涵盖了平时 80% 的搬砖内容。为了快速验证效果，这里就没有使用 DTO 进行参数验证，平时大家还是要加上比较好。<br>接下来编写 Controller，并引入 RBAC 拦截器：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/commodity/commodity.controller.js</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  Controller,</span><br><span class="line">  Request,</span><br><span class="line">  Post,</span><br><span class="line">  Body,</span><br><span class="line">  UseGuards,</span><br><span class="line">  UseInterceptors,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthGuard &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; CommodityService &#125; <span class="keyword">from</span> <span class="string">'./commodity.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; RbacInterceptor &#125; <span class="keyword">from</span> <span class="string">'../../interceptor/rbac.interceptor'</span>;</span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'commodity'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> CommodityController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly commodityService: CommodityService</span>) &#123;&#125;</span><br><span class="line">  <span class="comment">// 查询商品列表</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UseInterceptors</span>(<span class="keyword">new</span> RbacInterceptor(<span class="number">3</span>)) <span class="comment">// 调用 RBAC 拦截器</span></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'list'</span>)</span><br><span class="line">  <span class="keyword">async</span> queryColumnList(<span class="meta">@Body</span>() body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.queryCommodityList(body);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 新建商品</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UseInterceptors</span>(<span class="keyword">new</span> RbacInterceptor(<span class="number">2</span>))</span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'create'</span>)</span><br><span class="line">  <span class="keyword">async</span> createCommodity(<span class="meta">@Body</span>() body: <span class="built_in">any</span>, <span class="meta">@Request</span>() req: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.createCommodity(body, req.user.username);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 修改商品</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UseInterceptors</span>(<span class="keyword">new</span> RbacInterceptor(<span class="number">2</span>))</span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'update'</span>)</span><br><span class="line">  <span class="keyword">async</span> updateCommodity(<span class="meta">@Body</span>() body: <span class="built_in">any</span>, <span class="meta">@Request</span>() req: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.updateCommodity(body, req.user.username);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 删除商品</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UseInterceptors</span>(<span class="keyword">new</span> RbacInterceptor(<span class="number">1</span>))</span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'delete'</span>)</span><br><span class="line">  <span class="keyword">async</span> deleteCommodity(<span class="meta">@Body</span>() body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.deleteCommodity(body);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>和平时的路由没什么区别，就是使用了 <code>@UseInterceptors(new RbacInterceptor())</code>，并把数字传入，这样就可以判断权限了。</p><h3 id="4-验证"><a href="#4-验证" class="headerlink" title="4. 验证"></a>4. 验证</h3><p>这是之前注册的用户表，在没有修改权限的情况下，角色 <code>role</code> 都是 <code>3</code>：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795306-a9904eb2-e1f6-4aaa-84eb-919e2d98d4af.webp"><br>先往商品表插入一些数据：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795354-81463b00-2f2e-4282-97f6-a01f4ac42ff1.webp"><br>我将使用 <code>nodejs</code> 用户登录，并请求查询接口：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795322-4905b86b-8fe4-4ea8-84f2-23797ed90883.webp"><br>上图的查询结果，也符合预期，共有 2 条商品名称含有关键字 <code>德玛</code>。<br>接下来，我们新建商品（英雄）：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795553-f827336a-5c1a-45ea-813f-59867267bca8.webp"><br>上图可以看到，因为权限不足，所以被拦截了。<br>我们直接去数据库修改角色 role 字段，将 <code>3（普通用户）</code> 改为 <code>2（开发&amp;测试&amp;运营）</code>：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795347-49b68fd2-6fd4-44a8-8cba-5ad76de51dce.webp"><br>然后，<strong>重新登录，重新登录，重新登录，重要的事情说 3 遍</strong>，再请求：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795843-ac23ee51-d753-4937-8140-afd1706e56d2.webp"><br>返回成功信息，再看看数据库：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795401-68dcb551-cc5a-4e60-afcb-5993f8489148.webp"><br>如图，创建商品功能测试成功。<br>但是，“麦林炮手”的价格应该是 1350，我们修改一下价格：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795245-85277fbf-51b4-49e0-a338-e00d9324ddff.webp"><br>再看看数据库，通过 <code>u_by</code> 字段可以知道是通过接口修改的：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795170-e67298a7-8ae5-465f-9932-addd4887aa35.webp"><br>现在问题来了，因为麦林炮手的介绍不太“和谐”，所以需要删除，于是我们请求一下删除接口：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795351-8951a956-e246-4b19-9be0-8bea28ef183d.webp"><br>返回“无权操作”，只好提升角色，或者联系管理员帮忙删除啦，剩下的事情和之前的一样，不再赘述。</p><h3 id="5-优化"><a href="#5-优化" class="headerlink" title="5. 优化"></a>5. 优化</h3><p>大家可能发现，因为传入的是数字，所以在 Controller 里写的也都是数字，如果是一个人维护的还好，但是多人协同时，就显得不够友好了。<br>于是，我们应该创建常量，将角色和数字对应上，这样再看 Controller 的时候，哪些接口有哪些角色可以访问就一目了然了。<br>我们修改 auth 目录下的 <code>constants.ts</code></p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/auth/constants.ts</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> jwtConstants = &#123;</span><br><span class="line">  secret: <span class="string">'shinobi7414'</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> roleConstans = &#123;</span><br><span class="line">  SUPER_ADMIN: <span class="number">0</span>, <span class="comment">// 超级管理员</span></span><br><span class="line">  ADMIN: <span class="number">1</span>, <span class="comment">// 管理员</span></span><br><span class="line">  DEVELOPER: <span class="number">2</span>, <span class="comment">// 开发者（测试、运营具有同一权限，若提升为 RBAC 1 以上，则可酌情分开）</span></span><br><span class="line">  HUMAN: <span class="number">3</span>, <span class="comment">// 普通用户</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>然后修改 Controller，用常量替换数字：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/commodity/commodity.controller.js</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  Controller,</span><br><span class="line">  Request,</span><br><span class="line">  Post,</span><br><span class="line">  Body,</span><br><span class="line">  UseGuards,</span><br><span class="line">  UseInterceptors,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthGuard &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; CommodityService &#125; <span class="keyword">from</span> <span class="string">'./commodity.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; RbacInterceptor &#125; <span class="keyword">from</span> <span class="string">'../../interceptor/rbac.interceptor'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; roleConstans <span class="keyword">as</span> role &#125; <span class="keyword">from</span> <span class="string">'../auth/constants'</span>; <span class="comment">// 引入角色常量</span></span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'commodity'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> CommodityController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly commodityService: CommodityService</span>) &#123;&#125;</span><br><span class="line">  <span class="comment">// 查询商品列表</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UseInterceptors</span>(<span class="keyword">new</span> RbacInterceptor(role.HUMAN))</span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'list'</span>)</span><br><span class="line">  <span class="keyword">async</span> queryColumnList(<span class="meta">@Body</span>() body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.queryCommodityList(body);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 新建商品</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UseInterceptors</span>(<span class="keyword">new</span> RbacInterceptor(role.DEVELOPER))</span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'create'</span>)</span><br><span class="line">  <span class="keyword">async</span> createCommodity(<span class="meta">@Body</span>() body: <span class="built_in">any</span>, <span class="meta">@Request</span>() req: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.createCommodity(body, req.user.username);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 修改商品</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UseInterceptors</span>(<span class="keyword">new</span> RbacInterceptor(role.DEVELOPER))</span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'update'</span>)</span><br><span class="line">  <span class="keyword">async</span> updateCommodity(<span class="meta">@Body</span>() body: <span class="built_in">any</span>, <span class="meta">@Request</span>() req: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.updateCommodity(body, req.user.username);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 删除商品</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="meta">@UseInterceptors</span>(<span class="keyword">new</span> RbacInterceptor(role.ADMIN))</span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'delete'</span>)</span><br><span class="line">  <span class="keyword">async</span> deleteCommodity(<span class="meta">@Body</span>() body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.deleteCommodity(body);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如此一来，什么角色才有权限操作就一目了然。</p><h2 id="2020-3-31-更新：使用-Guard-守卫控制权限"><a href="#2020-3-31-更新：使用-Guard-守卫控制权限" class="headerlink" title="2020-3-31 更新：使用 Guard 守卫控制权限"></a>2020-3-31 更新：使用 Guard 守卫控制权限</h2><p>评论区有大神指出，应该使用 Guard 来管理角色相关，因此，在这里补充一下 Guard 的实现。<br>新建 Guard 文件：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">$ nest g guard rbac guards</span><br></pre></td></tr></table></figure><p>编写守卫逻辑：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/guards/rbac.guard.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  CanActivate,</span><br><span class="line">  ExecutionContext,</span><br><span class="line">  Injectable,</span><br><span class="line">  ForbiddenException,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Observable &#125; <span class="keyword">from</span> <span class="string">'rxjs'</span>;</span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> RbacGuard <span class="keyword">implements</span> CanActivate &#123;</span><br><span class="line">  <span class="comment">// role[用户角色]: 0-超级管理员 | 1-管理员 | 2-开发&amp;测试&amp;运营 | 3-普通用户（只能查看）</span></span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly role: <span class="built_in">number</span></span>) &#123;&#125;</span><br><span class="line">  canActivate(</span><br><span class="line">    context: ExecutionContext,</span><br><span class="line">  ): <span class="built_in">boolean</span> | <span class="built_in">Promise</span>&lt;<span class="built_in">boolean</span>&gt; | Observable&lt;<span class="built_in">boolean</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> request = context.switchToHttp().getRequest();</span><br><span class="line">    <span class="keyword">const</span> user = request.user;</span><br><span class="line">    <span class="keyword">if</span> (user.role &gt; <span class="keyword">this</span>.role) &#123;</span><br><span class="line">      <span class="keyword">throw</span> <span class="keyword">new</span> ForbiddenException(<span class="string">'对不起，您无权操作'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>去掉注释和 TSLint 的换行，同样不超过 15 行，接下来，在 Controller 里引入：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/commodity/commodity.controller.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  Controller,</span><br><span class="line">  Request,</span><br><span class="line">  Post,</span><br><span class="line">  Body,</span><br><span class="line">  UseGuards,</span><br><span class="line">  UseInterceptors,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthGuard &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; CommodityService &#125; <span class="keyword">from</span> <span class="string">'./commodity.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; RbacInterceptor &#125; <span class="keyword">from</span> <span class="string">'../../interceptor/rbac.interceptor'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; RbacGuard &#125; <span class="keyword">from</span> <span class="string">'../../guards/rbac.guard'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; roleConstans <span class="keyword">as</span> role &#125; <span class="keyword">from</span> <span class="string">'../auth/constants'</span>;</span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'commodity'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> CommodityController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly commodityService: CommodityService</span>) &#123;&#125;</span><br><span class="line">  <span class="comment">// 查询商品列表</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(<span class="keyword">new</span> RbacGuard(role.HUMAN))</span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="comment">// @UseInterceptors(new RbacInterceptor(role.HUMAN))</span></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'list'</span>)</span><br><span class="line">  <span class="keyword">async</span> queryColumnList(<span class="meta">@Body</span>() body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.queryCommodityList(body);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 新建商品</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(<span class="keyword">new</span> RbacGuard(role.DEVELOPER))</span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="comment">// @UseInterceptors(new RbacInterceptor(role.DEVELOPER))</span></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'create'</span>)</span><br><span class="line">  <span class="keyword">async</span> createCommodity(<span class="meta">@Body</span>() body: <span class="built_in">any</span>, <span class="meta">@Request</span>() req: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.createCommodity(body, req.user.username);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 修改商品</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(<span class="keyword">new</span> RbacGuard(role.DEVELOPER))</span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="comment">// @UseInterceptors(new RbacInterceptor(role.DEVELOPER))</span></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'update'</span>)</span><br><span class="line">  <span class="keyword">async</span> updateCommodity(<span class="meta">@Body</span>() body: <span class="built_in">any</span>, <span class="meta">@Request</span>() req: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.updateCommodity(body, req.user.username);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 删除商品</span></span><br><span class="line">  <span class="meta">@UseGuards</span>(<span class="keyword">new</span> RbacGuard(role.ADMIN))</span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line">  <span class="comment">// @UseInterceptors(new RbacInterceptor(role.ADMIN))</span></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'delete'</span>)</span><br><span class="line">  <span class="keyword">async</span> deleteCommodity(<span class="meta">@Body</span>() body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.commodityService.deleteCommodity(body);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>注意：RbacGuard 要在 AuthGuard 的上面，不然获取不到用户信息。<br>请求一下只有管理员才有权限的删除操作：<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795291-067c6b3f-2e0c-46ba-8622-9cc5237b24c2.webp"><br>涛声依旧。</p></blockquote><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>本篇介绍了 RBAC 的概念，以及如何使用拦截器和守卫实现 RBAC 0，原理简单到 15 行代码就搞定了。<br>然而这种设计，要求路由必须是一一对应的，遇到复杂的用户关系，还需要再建 3 张表，一张是 <code>权限</code> 表，一张是 <code>用户-权限</code> 对应表，还有一张是 <code>路由-权限</code> 对应表，这样基本能覆盖 RBAC 2 以上的需求了。<br>但万变不离其宗，基本就是在拦截器或守卫里做文章，用户登录后，将权限列表缓存起来（可以是 Redis），这样就不用每次都查表去判断有没有权限访问路由了。<br>下一篇，暂时还不知道要介绍什么，清明节前事有点多，可能是使用 Swagger 自动生成接口文档吧。<br><img alt data-src="https://static.powerformer.com/c/@uXOOfFmhS/1589284795242-b502bf8e-5650-41b3-97c7-1928e63efa09.gif"></p><blockquote><p>本篇收录于<span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vY29sbGVjdGlvbi81ZTg5M2ExYjZmYjlhMDRkNjVhMTU0MDA=" title="https://juejin.im/collection/5e893a1b6fb9a04d65a15400">NestJS 实战教程<i class="fa fa-external-link"></i></span>，更多文章敬请关注。</p></blockquote><h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><span class="exturl" data-url="aHR0cDovL3d3dy53b3NoaXBtLmNvbS9wZC8xMTUwMDkzLmh0bWw=" title="http://www.woshipm.com/pd/1150093.html">RBAC 模型：基于用户 - 角色 - 权限控制的一些思考<i class="fa fa-external-link"></i></span><br>`</p>]]></content>
    
    <summary type="html">
    
      上一篇介绍了如何使用 DTO 和管道对入参进行验证，接下来介绍一下如何用拦截器，实现后台管理系统中最复杂、也最令人头疼的 RBAC。
    
    </summary>
    
    
      <category term="后端" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/"/>
    
      <category term="Node.js" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="Nest.js" scheme="https://tuture.co/tags/Nest-js/"/>
    
  </entry>
  
  <entry>
    <title>Nest.js 从零到壹系列（五）：使用管道、DTO 验证入参，摆脱 if-else 的恐惧</title>
    <link href="https://tuture.co/2020/05/12/@sQN91Mviv/"/>
    <id>https://tuture.co/2020/05/12/@sQN91Mviv/</id>
    <published>2020-05-11T16:04:00.509Z</published>
    <updated>2021-07-11T02:09:59.410Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one"><img alt class="avatar" data-src="/images/avatars/bldtp.png"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vdXNlci81YTVmZjNlMTZmYjlhMDFjOTUyNjIxNWY=" title="https://juejin.im/user/5a5ff3e16fb9a01c9526215f"><p class="nickName">布拉德特皮</p><i class="fa fa-external-link"></i></span>  </div>  </div></div><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>上一篇介绍了如何使用中间件、拦截器、过滤器打造日志系统，接下来将介绍后端永远绕不过去的痛：参数验证。<br>你是否曾经为了验证参数，写了一大堆 if - else ？然后还要判断各种参数类型？相似的结构在不同的方法里判断，却又要复制一遍代码？<br>使用 DTO 可以清晰的了解对象的结构，使用 Pipes（管道）配合 <code>class-validator</code> 还可以对参数类型进行判断，还可以在验证失败的时候抛出错误信息。<br>前两天发现 NestJS 更新到了 7.0.3（之前是 6.0.0），为了让教程更贴合实际，故果断升级。升级后没发现什么大问题，之前的代码照常运行，若各位读者发现什么其他 Bug ，可以在 GitHub 上 issues。<br><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one">GitHub 项目地址<i class="fa fa-external-link"></i></span>，欢迎各位大佬 Star。</p><a id="more"></a><h2 id="一、什么是-DTO？"><a href="#一、什么是-DTO？" class="headerlink" title="一、什么是 DTO？"></a>一、什么是 DTO？</h2><blockquote><p>数据传输对象（DTO)(Data Transfer Object)，是一种设计模式之间传输数据的软件应用系统。数据传输目标往往是数据访问对象从数据库中检索数据。数据传输对象与数据交互对象或数据访问对象之间的差异是一个以不具有任何行为除了存储和检索的数据（访问和存取器）。<br>根据定义，我们需要在代码中约定一下 DTO，还是以注册接口为例，先创建 <code>user.dto.ts</code> 简单定义一下：</p></blockquote><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> RegisterInfoDTO &#123;</span><br><span class="line">  readonly accountName: <span class="built_in">string</span> | <span class="built_in">number</span>;</span><br><span class="line">  readonly realName: <span class="built_in">string</span>;</span><br><span class="line">  readonly password: <span class="built_in">string</span>;</span><br><span class="line">  readonly repassword: <span class="built_in">string</span>;</span><br><span class="line">  readonly mobile: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>其实就是输出了一个类似于声明接口的 class，表明了参数名和类型，并且是只读的。<br>当然，Nest 支持使用 Interface（接口） 来定义 DTO，具体语法可以浏览 TypeScript 官方文档，不过 Nest 建议使用 Class 来做 DTO（就踩坑经验而言， Class 确实比 Interface 方便多了），所以 Interface 在这里就不多介绍了。<br>定义好 DTO 后，接下来将演示怎么和管道配合来验证参数。</p><h2 id="二、管道"><a href="#二、管道" class="headerlink" title="二、管道"></a>二、管道</h2><h3 id="1-概念"><a href="#1-概念" class="headerlink" title="1. 概念"></a>1. 概念</h3><p>管道和拦截器有点像，都是在数据传输过程中的“关卡”，只不过各司其职。<br>管道有两个类型:</p><ul><li>转换：管道将输入数据转换为所需的数据输出；</li><li>验证：对输入数据进行验证，如果验证成功继续传递，验证失败则抛出异常；</li></ul><p><code>ValidationPipe</code> 是 Nest.js 自带的三个开箱即用的管道之一（另外两个是 <code>ParseIntPipe</code> 和 <code>ParseUUIDPipe</code>，现在还用不到）。</p><p><code>ValidationPipe</code> 只接受一个值并立即返回相同的值，其行为类似于一个标识函数，标准代码如下：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; PipeTransform, Injectable, ArgumentMetadata &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> ValidationPipe <span class="keyword">implements</span> PipeTransform &#123;</span><br><span class="line">  transform(value: <span class="built_in">any</span>, metadata: ArgumentMetadata) &#123;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>每个管道必须提供 <code>transform()</code> 方法。 这个方法有两个参数：</p><ul><li>value</li><li>metadata</li></ul><p><code>value</code> 是当前处理的参数，而 <code>metadata</code> 是其元数据。</p><h3 id="2-创建管道"><a href="#2-创建管道" class="headerlink" title="2. 创建管道"></a>2. 创建管道</h3><p>简单介绍完一些概念后，开始实战，先创建 pipe 文件：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ nest g pipe validation pipe</span><br></pre></td></tr></table></figure><p>这里我们还需要安装两个依赖包：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ yarn add class-validator class-transformer -S</span><br></pre></td></tr></table></figure><p>然后在 <code>validation.pipe.ts</code> 中编写验证逻辑：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/pipe/validation.pipe.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  ArgumentMetadata,</span><br><span class="line">  Injectable,</span><br><span class="line">  PipeTransform,</span><br><span class="line">  BadRequestException,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; validate &#125; <span class="keyword">from</span> <span class="string">'class-validator'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; plainToClass &#125; <span class="keyword">from</span> <span class="string">'class-transformer'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Logger &#125; <span class="keyword">from</span> <span class="string">'../utils/log4js'</span>;</span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> ValidationPipe <span class="keyword">implements</span> PipeTransform &#123;</span><br><span class="line">  <span class="keyword">async</span> transform(value: <span class="built_in">any</span>, &#123; metatype &#125;: ArgumentMetadata) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`value:`</span>, value, <span class="string">'metatype: '</span>, metatype);</span><br><span class="line">    <span class="keyword">if</span> (!metatype || !<span class="keyword">this</span>.toValidate(metatype)) &#123;</span><br><span class="line">      <span class="comment">// 如果没有传入验证规则，则不验证，直接返回数据</span></span><br><span class="line">      <span class="keyword">return</span> value;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 将对象转换为 Class 来验证</span></span><br><span class="line">    <span class="keyword">const</span> object = plainToClass(metatype, value);</span><br><span class="line">    <span class="keyword">const</span> errors = <span class="keyword">await</span> validate(object);</span><br><span class="line">    <span class="keyword">if</span> (errors.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">      <span class="keyword">const</span> msg = <span class="built_in">Object</span>.values(errors[<span class="number">0</span>].constraints)[<span class="number">0</span>]; <span class="comment">// 只需要取第一个错误信息并返回即可</span></span><br><span class="line">      Logger.error(<span class="string">`Validation failed: <span class="subst">$&#123;msg&#125;</span>`</span>);</span><br><span class="line">      <span class="keyword">throw</span> <span class="keyword">new</span> BadRequestException(<span class="string">`Validation failed: <span class="subst">$&#123;msg&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">private</span> toValidate(metatype: <span class="built_in">any</span>): <span class="built_in">boolean</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> types: <span class="built_in">any</span>[] = [<span class="built_in">String</span>, <span class="built_in">Boolean</span>, <span class="built_in">Number</span>, <span class="built_in">Array</span>, <span class="built_in">Object</span>];</span><br><span class="line">    <span class="keyword">return</span> !types.includes(metatype);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="3-绑定管道"><a href="#3-绑定管道" class="headerlink" title="3. 绑定管道"></a>3. 绑定管道</h3><p>绑定管道非常简单，就和之前使用 Guards 那样，直接用修饰符绑定在 Controller 上，然后将 body 的类型指定 DTO 即可：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.controller.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Controller, Post, Body, UseGuards, UsePipes &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthGuard &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthService &#125; <span class="keyword">from</span> <span class="string">'../auth/auth.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'./user.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ValidationPipe &#125; <span class="keyword">from</span> <span class="string">'../../pipe/validation.pipe'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; RegisterInfoDTO &#125; <span class="keyword">from</span> <span class="string">'./user.dto'</span>; <span class="comment">// 引入 DTO</span></span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line"> <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly authService: AuthService, <span class="keyword">private</span> readonly usersService: UserService</span>) &#123;&#125;</span><br><span class="line"> <span class="comment">// JWT验证 - Step 1: 用户请求登录</span></span><br><span class="line"> <span class="meta">@Post</span>(<span class="string">'login'</span>)</span><br><span class="line"> <span class="keyword">async</span> login(<span class="meta">@Body</span>() loginParmas: <span class="built_in">any</span>) &#123;</span><br><span class="line">   ...</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>))</span><br><span class="line"> <span class="meta">@UsePipes</span>(<span class="keyword">new</span> ValidationPipe()) <span class="comment">// 使用管道验证</span></span><br><span class="line"> <span class="meta">@Post</span>(<span class="string">'register'</span>)</span><br><span class="line"> <span class="keyword">async</span> register(<span class="meta">@Body</span>() body: RegisterInfoDTO) &#123; <span class="comment">// 指定 DTO类型</span></span><br><span class="line">   <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.usersService.register(body);</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="4-完善错误提示"><a href="#4-完善错误提示" class="headerlink" title="4. 完善错误提示"></a>4. 完善错误提示</h3><p>光有这些还不行，我们应该增加错误提示：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.dto.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; IsNotEmpty, IsNumber, IsString &#125; <span class="keyword">from</span> <span class="string">'class-validator'</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> RegisterInfoDTO &#123;</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'用户名不能为空'</span> &#125;)</span><br><span class="line">  readonly accountName: <span class="built_in">string</span> | <span class="built_in">number</span>;</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'真实姓名不能为空'</span> &#125;)</span><br><span class="line">  <span class="meta">@IsString</span>(&#123; message: <span class="string">'真实姓名必须是 String 类型'</span> &#125;)</span><br><span class="line">  readonly realName: <span class="built_in">string</span>;</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'密码不能为空'</span> &#125;)</span><br><span class="line">  readonly password: <span class="built_in">string</span>;</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'重复密码不能为空'</span> &#125;)</span><br><span class="line">  readonly repassword: <span class="built_in">string</span>;</span><br><span class="line">  <span class="meta">@IsNotEmpty</span>(&#123; message: <span class="string">'手机号不能为空'</span> &#125;)</span><br><span class="line">  <span class="meta">@IsNumber</span>()</span><br><span class="line">  readonly mobile: <span class="built_in">number</span>;</span><br><span class="line">  readonly role?: <span class="built_in">string</span> | <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面简单编写了一些常用的验证手段，<code>class-validator</code> 里面有非常多的验证方法，有兴趣的读者可以访问官方文档去学习：<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R5cGVzdGFjay9jbGFzcy12YWxpZGF0b3I=" title="https://github.com/typestack/class-validator">GitHub: class-validator<i class="fa fa-external-link"></i></span><br>接下来我们测试一下，先测试为空的情况：<br><img alt data-src="https://static.powerformer.com/c/@sQN91Mviv/1589284859007-8318b693-a8f9-4f08-85e7-cb443a924a53.webp"><br>上图可以看到 <code>accountName</code> 的 <code>@IsNotEmpty()</code> 已经生效了</p><blockquote><p>注意：class-validator 还提供了一个方法叫 @IsEmpty()，这是表示参数必须为空，不要搞混了。<br>再测试参数类型，因为 Postman 的 <code>Body \-&gt; x-www-form-urlencoded</code> 默认传的都是字符串，所以我们需要稍微修改一下请求参数：<br><img alt data-src="https://static.powerformer.com/c/@sQN91Mviv/1589284859083-1d5dae75-95cf-4f31-9084-4fa19b9f20b1.webp"><br>上图可以看到 <code>realname</code> 的 <code>@IsString()</code> 已经生效了，再看一下日志：<br><img alt data-src="https://static.powerformer.com/c/@sQN91Mviv/1589284859038-9ea28f71-caa8-423b-adf0-87d72797f697.webp"><br>至此，入参验证功能已基本完成，有了这些，我们就可以摆脱各种 if - else 来验证入参了（当然，特殊的，逻辑比较复杂的还是需要的）。</p></blockquote><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>本篇介绍了如何定义 DTO，如何使用 Pipes 管道，以及如何配合 class-validator 进行入参验证。<br>定义 DTO 有人可能会觉得好麻烦，直接 any 一把梭不就好了，然后 TypeScript 就逐渐变成了 AnyScript 了。。。。<br><img alt data-src="https://static.powerformer.com/c/@sQN91Mviv/1710abf3c25dc456"><br>但如果不拥抱 TypeScript 的特性，那还不如直接用 JavaScript 来写，这样还更快（如 Koa、Egg 等），定义 DTO 还有一个好处，那就是可以配合 Swagger 自动生成文档，并且是可请求的，极大方便了前端阅读文档，以后的教程会说明如何操作。<br>下一篇，将介绍一下如何使用拦截器进行权限认证。</p><blockquote><p>本篇收录于<span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vY29sbGVjdGlvbi81ZTg5M2ExYjZmYjlhMDRkNjVhMTU0MDA=" title="https://juejin.im/collection/5e893a1b6fb9a04d65a15400">NestJS 实战教程<i class="fa fa-external-link"></i></span>，更多文章敬请关注。<br>`</p></blockquote>]]></content>
    
    <summary type="html">
    
      上一篇介绍了如何使用中间件、拦截器、过滤器打造日志系统，接下来将介绍后端永远绕不过去的痛：参数验证。
    
    </summary>
    
    
      <category term="后端" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/"/>
    
      <category term="Node.js" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="Nest.js" scheme="https://tuture.co/tags/Nest-js/"/>
    
  </entry>
  
  <entry>
    <title>Nest.js 从零到壹系列（四）：使用中间件、拦截器、过滤器打造日志系统</title>
    <link href="https://tuture.co/2020/05/12/@auY0siFek/"/>
    <id>https://tuture.co/2020/05/12/@auY0siFek/</id>
    <published>2020-05-11T16:03:00.509Z</published>
    <updated>2021-07-11T02:09:59.465Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one"><img alt class="avatar" data-src="/images/avatars/bldtp.png"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vdXNlci81YTVmZjNlMTZmYjlhMDFjOTUyNjIxNWY=" title="https://juejin.im/user/5a5ff3e16fb9a01c9526215f"><p class="nickName">布拉德特皮</p><i class="fa fa-external-link"></i></span>  </div>  </div></div><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>上一篇介绍了如何使用 JWT 进行单点登录，接下来，要完善一下后端项目的一些基础功能。</p><a id="more"></a><p>首先，一个良好的服务端，应该有较完善的日志收集功能，这样才能在生产环境发生异常时，能够从日志中复盘，找出 Bug 所在。</p><p>其次，要针对项目中抛出的异常进行归类，并将信息反映在接口或日志中。</p><p>最后，请求接口的参数也应该被记录，以便统计分析（主要用于大数据和恶意攻击分析）。</p><p><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one">GitHub 项目地址<i class="fa fa-external-link"></i></span>，欢迎各位大佬 Star。</p><h2 id="一、日志系统"><a href="#一、日志系统" class="headerlink" title="一、日志系统"></a>一、日志系统</h2><p>这里使用的是 <code>log4js</code>，前身是 <code>log4j</code>，如果有写过 Java 的大佬应该不会陌生。</p><p>已经有大佬总结了 log4js 的用法，就不在赘述了：</p><p><span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vcG9zdC81N2I5NjJhZjdkYjJhMjAwNTQyYTBmYjM=" title="https://juejin.im/post/57b962af7db2a200542a0fb3">《Node.js 之 log4js 完全讲解》<i class="fa fa-external-link"></i></span></p><h3 id="1-配置"><a href="#1-配置" class="headerlink" title="1. 配置"></a>1. 配置</h3><p>先安装依赖包</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">$ yarn add log4js stacktrace-js -S</span><br></pre></td></tr></table></figure><p>在 config 目录下新建一个文件 <code>log4js.ts</code>，用于编写配置文件：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// config/log4js.ts</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> path <span class="keyword">from</span> <span class="string">'path'</span>;</span><br><span class="line"><span class="keyword">const</span> baseLogPath = path.resolve(__dirname, <span class="string">'../../logs'</span>); <span class="comment">// 日志要写入哪个目录</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> log4jsConfig = &#123;</span><br><span class="line">  appenders: &#123;</span><br><span class="line">    <span class="built_in">console</span>: &#123;</span><br><span class="line">      <span class="keyword">type</span>: <span class="string">'console'</span>, <span class="comment">// 会打印到控制台</span></span><br><span class="line">    &#125;,</span><br><span class="line">    access: &#123;</span><br><span class="line">      <span class="keyword">type</span>: <span class="string">'dateFile'</span>, <span class="comment">// 会写入文件，并按照日期分类</span></span><br><span class="line">      filename: <span class="string">`<span class="subst">$&#123;baseLogPath&#125;</span>/access/access.log`</span>, <span class="comment">// 日志文件名，会命名为：access.20200320.log</span></span><br><span class="line">      alwaysIncludePattern: <span class="literal">true</span>,</span><br><span class="line">      pattern: <span class="string">'yyyyMMdd'</span>,</span><br><span class="line">      daysToKeep: <span class="number">60</span>,</span><br><span class="line">      numBackups: <span class="number">3</span>,</span><br><span class="line">      category: <span class="string">'http'</span>,</span><br><span class="line">      keepFileExt: <span class="literal">true</span>, <span class="comment">// 是否保留文件后缀</span></span><br><span class="line">    &#125;,</span><br><span class="line">    app: &#123;</span><br><span class="line">      <span class="keyword">type</span>: <span class="string">'dateFile'</span>,</span><br><span class="line">      filename: <span class="string">`<span class="subst">$&#123;baseLogPath&#125;</span>/app-out/app.log`</span>,</span><br><span class="line">      alwaysIncludePattern: <span class="literal">true</span>,</span><br><span class="line">      layout: &#123;</span><br><span class="line">        <span class="keyword">type</span>: <span class="string">'pattern'</span>,</span><br><span class="line">        pattern:</span><br><span class="line">          <span class="string">'&#123;"date":"%d","level":"%p","category":"%c","host":"%h","pid":"%z","data":\'%m\'&#125;'</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 日志文件按日期（天）切割</span></span><br><span class="line">      pattern: <span class="string">'yyyyMMdd'</span>,</span><br><span class="line">      daysToKeep: <span class="number">60</span>,</span><br><span class="line">      <span class="comment">// maxLogSize: 10485760,</span></span><br><span class="line">      numBackups: <span class="number">3</span>,</span><br><span class="line">      keepFileExt: <span class="literal">true</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    errorFile: &#123;</span><br><span class="line">      <span class="keyword">type</span>: <span class="string">'dateFile'</span>,</span><br><span class="line">      filename: <span class="string">`<span class="subst">$&#123;baseLogPath&#125;</span>/errors/error.log`</span>,</span><br><span class="line">      alwaysIncludePattern: <span class="literal">true</span>,</span><br><span class="line">      layout: &#123;</span><br><span class="line">        <span class="keyword">type</span>: <span class="string">'pattern'</span>,</span><br><span class="line">        pattern:</span><br><span class="line">          <span class="string">'&#123;"date":"%d","level":"%p","category":"%c","host":"%h","pid":"%z","data":\'%m\'&#125;'</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 日志文件按日期（天）切割</span></span><br><span class="line">      pattern: <span class="string">'yyyyMMdd'</span>,</span><br><span class="line">      daysToKeep: <span class="number">60</span>,</span><br><span class="line">      <span class="comment">// maxLogSize: 10485760,</span></span><br><span class="line">      numBackups: <span class="number">3</span>,</span><br><span class="line">      keepFileExt: <span class="literal">true</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    errors: &#123;</span><br><span class="line">      <span class="keyword">type</span>: <span class="string">'logLevelFilter'</span>,</span><br><span class="line">      level: <span class="string">'ERROR'</span>,</span><br><span class="line">      appender: <span class="string">'errorFile'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  categories: &#123;</span><br><span class="line">    <span class="keyword">default</span>: &#123;</span><br><span class="line">      appenders: [<span class="string">'console'</span>, <span class="string">'app'</span>, <span class="string">'errors'</span>],</span><br><span class="line">      level: <span class="string">'DEBUG'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    info: &#123; appenders: [<span class="string">'console'</span>, <span class="string">'app'</span>, <span class="string">'errors'</span>], level: <span class="string">'info'</span> &#125;,</span><br><span class="line">    access: &#123; appenders: [<span class="string">'console'</span>, <span class="string">'app'</span>, <span class="string">'errors'</span>], level: <span class="string">'info'</span> &#125;,</span><br><span class="line">    http: &#123; appenders: [<span class="string">'access'</span>], level: <span class="string">'DEBUG'</span> &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  pm2: <span class="literal">true</span>, <span class="comment">// 使用 pm2 来管理项目时，打开</span></span><br><span class="line">  pm2InstanceVar: <span class="string">'INSTANCE_ID'</span>, <span class="comment">// 会根据 pm2 分配的 id 进行区分，以免各进程在写日志时造成冲突</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> log4jsConfig;</span><br></pre></td></tr></table></figure><p>上面贴出了我的配置，并标注了一些简单的注释，请配合 <span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vcG9zdC81N2I5NjJhZjdkYjJhMjAwNTQyYTBmYjM=" title="https://juejin.im/post/57b962af7db2a200542a0fb3">《Node.js 之 log4js 完全讲解》<i class="fa fa-external-link"></i></span> 一起食用。</p><h3 id="2-实例化"><a href="#2-实例化" class="headerlink" title="2. 实例化"></a>2. 实例化</h3><p>有了配置，就可以着手写 log4js 的实例以及一些工具函数了。</p><p>在 <code>src/utils</code> 下新建 <code>log4js.ts</code>:</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/utils/log4js.ts</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> Path <span class="keyword">from</span> <span class="string">'path'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> Log4js <span class="keyword">from</span> <span class="string">'log4js'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> Util <span class="keyword">from</span> <span class="string">'util'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> Moment <span class="keyword">from</span> <span class="string">'moment'</span>; <span class="comment">// 处理时间的工具</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> StackTrace <span class="keyword">from</span> <span class="string">'stacktrace-js'</span>;</span><br><span class="line"><span class="keyword">import</span> Chalk <span class="keyword">from</span> <span class="string">'chalk'</span>;</span><br><span class="line"><span class="keyword">import</span> config <span class="keyword">from</span> <span class="string">'../../config/log4js'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 日志级别</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">enum</span> LoggerLevel &#123;</span><br><span class="line">  ALL = <span class="string">'ALL'</span>,</span><br><span class="line">  MARK = <span class="string">'MARK'</span>,</span><br><span class="line">  TRACE = <span class="string">'TRACE'</span>,</span><br><span class="line">  DEBUG = <span class="string">'DEBUG'</span>,</span><br><span class="line">  INFO = <span class="string">'INFO'</span>,</span><br><span class="line">  WARN = <span class="string">'WARN'</span>,</span><br><span class="line">  ERROR = <span class="string">'ERROR'</span>,</span><br><span class="line">  FATAL = <span class="string">'FATAL'</span>,</span><br><span class="line">  OFF = <span class="string">'OFF'</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 内容跟踪类</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> ContextTrace &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"></span></span><br><span class="line"><span class="params">    <span class="keyword">public</span> readonly context: <span class="built_in">string</span>,</span></span><br><span class="line"><span class="params">    <span class="keyword">public</span> readonly path?: <span class="built_in">string</span>,</span></span><br><span class="line"><span class="params">    <span class="keyword">public</span> readonly lineNumber?: <span class="built_in">number</span>,</span></span><br><span class="line"><span class="params">    <span class="keyword">public</span> readonly columnNumber?: <span class="built_in">number</span>,</span></span><br><span class="line"><span class="params">  </span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Log4js.addLayout(<span class="string">'Awesome-nest'</span>, <span class="function">(<span class="params">logConfig: <span class="built_in">any</span></span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> (logEvent: Log4js.LoggingEvent): <span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> moduleName: <span class="built_in">string</span> = <span class="string">''</span>;</span><br><span class="line">    <span class="keyword">let</span> position: <span class="built_in">string</span> = <span class="string">''</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 日志组装</span></span><br><span class="line">    <span class="keyword">const</span> messageList: <span class="built_in">string</span>[] = [];</span><br><span class="line">    logEvent.data.forEach(<span class="function">(<span class="params">value: <span class="built_in">any</span></span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (value <span class="keyword">instanceof</span> ContextTrace) &#123;</span><br><span class="line">        moduleName = value.context;</span><br><span class="line">        <span class="comment">// 显示触发日志的坐标（行，列）</span></span><br><span class="line">        <span class="keyword">if</span> (value.lineNumber &amp;&amp; value.columnNumber) &#123;</span><br><span class="line">          position = <span class="string">`<span class="subst">$&#123;value.lineNumber&#125;</span>, <span class="subst">$&#123;value.columnNumber&#125;</span>`</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">typeof</span> value !== <span class="string">'string'</span>) &#123;</span><br><span class="line">        value = Util.inspect(value, <span class="literal">false</span>, <span class="number">3</span>, <span class="literal">true</span>);</span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">      messageList.push(value);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 日志组成部分</span></span><br><span class="line">    <span class="keyword">const</span> messageOutput: <span class="built_in">string</span> = messageList.join(<span class="string">' '</span>);</span><br><span class="line">    <span class="keyword">const</span> positionOutput: <span class="built_in">string</span> = position ? <span class="string">` [<span class="subst">$&#123;position&#125;</span>]`</span> : <span class="string">''</span>;</span><br><span class="line">    <span class="keyword">const</span> typeOutput: <span class="built_in">string</span> = <span class="string">`[<span class="subst">$&#123;</span></span></span><br><span class="line"><span class="string"><span class="subst">      logConfig.<span class="keyword">type</span></span></span></span><br><span class="line"><span class="string"><span class="subst">    &#125;</span>] <span class="subst">$&#123;logEvent.pid.toString()&#125;</span>   - `</span>;</span><br><span class="line">    <span class="keyword">const</span> dateOutput: <span class="built_in">string</span> = <span class="string">`<span class="subst">$&#123;Moment(logEvent.startTime).format(</span></span></span><br><span class="line"><span class="string"><span class="subst">      <span class="string">'YYYY-MM-DD HH:mm:ss'</span>,</span></span></span><br><span class="line"><span class="string"><span class="subst">    )&#125;</span>`</span>;</span><br><span class="line">    <span class="keyword">const</span> moduleOutput: <span class="built_in">string</span> = moduleName</span><br><span class="line">      ? <span class="string">`[<span class="subst">$&#123;moduleName&#125;</span>] `</span></span><br><span class="line">      : <span class="string">'[LoggerService] '</span>;</span><br><span class="line">    <span class="keyword">let</span> levelOutput: <span class="built_in">string</span> = <span class="string">`[<span class="subst">$&#123;logEvent.level&#125;</span>] <span class="subst">$&#123;messageOutput&#125;</span>`</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 根据日志级别，用不同颜色区分</span></span><br><span class="line">    <span class="keyword">switch</span> (logEvent.level.toString()) &#123;</span><br><span class="line">      <span class="keyword">case</span> LoggerLevel.DEBUG:</span><br><span class="line">        levelOutput = Chalk.green(levelOutput);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> LoggerLevel.INFO:</span><br><span class="line">        levelOutput = Chalk.cyan(levelOutput);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> LoggerLevel.WARN:</span><br><span class="line">        levelOutput = Chalk.yellow(levelOutput);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> LoggerLevel.ERROR:</span><br><span class="line">        levelOutput = Chalk.red(levelOutput);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> LoggerLevel.FATAL:</span><br><span class="line">        levelOutput = Chalk.hex(<span class="string">'#DD4C35'</span>)(levelOutput);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">default</span>:</span><br><span class="line">        levelOutput = Chalk.grey(levelOutput);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;Chalk.green(typeOutput)&#125;</span><span class="subst">$&#123;dateOutput&#125;</span>  <span class="subst">$&#123;Chalk.yellow(</span></span></span><br><span class="line"><span class="string"><span class="subst">      moduleOutput,</span></span></span><br><span class="line"><span class="string"><span class="subst">    )&#125;</span><span class="subst">$&#123;levelOutput&#125;</span><span class="subst">$&#123;positionOutput&#125;</span>`</span>;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注入配置</span></span><br><span class="line">Log4js.configure(config);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 实例化</span></span><br><span class="line"><span class="keyword">const</span> logger = Log4js.getLogger();</span><br><span class="line">logger.level = LoggerLevel.TRACE;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> Logger &#123;</span><br><span class="line">  <span class="keyword">static</span> trace(...args) &#123;</span><br><span class="line">    logger.trace(Logger.getStackTrace(), ...args);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> debug(...args) &#123;</span><br><span class="line">    logger.debug(Logger.getStackTrace(), ...args);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> log(...args) &#123;</span><br><span class="line">    logger.info(Logger.getStackTrace(), ...args);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> info(...args) &#123;</span><br><span class="line">    logger.info(Logger.getStackTrace(), ...args);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> warn(...args) &#123;</span><br><span class="line">    logger.warn(Logger.getStackTrace(), ...args);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> warning(...args) &#123;</span><br><span class="line">    logger.warn(Logger.getStackTrace(), ...args);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> error(...args) &#123;</span><br><span class="line">    logger.error(Logger.getStackTrace(), ...args);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> fatal(...args) &#123;</span><br><span class="line">    logger.fatal(Logger.getStackTrace(), ...args);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> access(...args) &#123;</span><br><span class="line">    <span class="keyword">const</span> loggerCustom = Log4js.getLogger(<span class="string">'http'</span>);</span><br><span class="line">    loggerCustom.info(Logger.getStackTrace(), ...args);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 日志追踪，可以追溯到哪个文件、第几行第几列</span></span><br><span class="line">  <span class="keyword">static</span> getStackTrace(deep: <span class="built_in">number</span> = <span class="number">2</span>): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> stackList: StackTrace.StackFrame[] = StackTrace.getSync();</span><br><span class="line">    <span class="keyword">const</span> stackInfo: StackTrace.StackFrame = stackList[deep];</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> lineNumber: <span class="built_in">number</span> = stackInfo.lineNumber;</span><br><span class="line">    <span class="keyword">const</span> columnNumber: <span class="built_in">number</span> = stackInfo.columnNumber;</span><br><span class="line">    <span class="keyword">const</span> fileName: <span class="built_in">string</span> = stackInfo.fileName;</span><br><span class="line">    <span class="keyword">const</span> basename: <span class="built_in">string</span> = Path.basename(fileName);</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;basename&#125;</span>(line: <span class="subst">$&#123;lineNumber&#125;</span>, column: <span class="subst">$&#123;columnNumber&#125;</span>): \n`</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面贴出了我实例化 log4js 的过程，主要是处理日志的组成部分（包含了时间、类型，调用文件以及调用的坐标），还可以根据日志的不同级别，在控制台中用不同的颜色显示。</p><p>这个文件，不但可以单独调用，也可以做成中间件使用。</p><h3 id="3-制作中间件"><a href="#3-制作中间件" class="headerlink" title="3. 制作中间件"></a>3. 制作中间件</h3><p>我们希望每次用户请求接口的时候，自动记录请求的路由、IP、参数等信息，如果每个路由都写，那就太傻了，所以需要借助中间件来实现。</p><p>Nest 中间件实际上等价于 express 中间件。</p><p>中间件函数可以执行以下任务:</p><ul><li>执行任何代码；</li><li>对请求和响应对象进行更改；</li><li>结束请求-响应周期；</li><li>调用堆栈中的下一个中间件函数；</li><li>如果当前的中间件函数没有【结束请求】或【响应周期】, 它必须调用 <code>next()</code> 将控制传递给下一个中间件函数。否则，请求将被挂起；</li></ul><p>执行下列命令，创建中间件文件：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">$ nest g middleware logger middleware</span><br></pre></td></tr></table></figure><p>然后，<code>src</code> 目录下，就多出了一个 <code>middleware</code> 的文件夹，里面的 <code>logger.middleware.ts</code> 就是接下来的主角，Nest 预设的中间件模板长这样：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/middleware/logger.middleware.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable, NestMiddleware &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> LoggerMiddleware <span class="keyword">implements</span> NestMiddleware &#123;</span><br><span class="line">  use(req: <span class="built_in">any</span>, res: <span class="built_in">any</span>, next: <span class="function"><span class="params">()</span> =&gt;</span> <span class="built_in">void</span>) &#123;</span><br><span class="line">    next();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这里只是实现了 <code>NestMiddleware</code> 接口，它接收 3 个参数：</p><ul><li>req：即 Request，请求信息；</li><li>res：即 Response ，响应信息；</li><li>next：将控制传递到下一个中间件，写过 Vue、Koa 的应该不会陌生；</li></ul><p>接下来，我们将日志功能写入中间件：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/middleware/logger.middleware.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable, NestMiddleware &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Request, Response &#125; <span class="keyword">from</span> <span class="string">'express'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Logger &#125; <span class="keyword">from</span> <span class="string">'../utils/log4js'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> LoggerMiddleware <span class="keyword">implements</span> NestMiddleware &#123;</span><br><span class="line">  use(req: Request, res: Response, next: <span class="function"><span class="params">()</span> =&gt;</span> <span class="built_in">void</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> code = res.statusCode; <span class="comment">// 响应状态码</span></span><br><span class="line">    next();</span><br><span class="line">    <span class="comment">// 组装日志信息</span></span><br><span class="line">    <span class="keyword">const</span> logFormat = <span class="string">`Method: <span class="subst">$&#123;req.method&#125;</span> \n Request original url: <span class="subst">$&#123;req.originalUrl&#125;</span> \n IP: <span class="subst">$&#123;req.ip&#125;</span> \n Status code: <span class="subst">$&#123;code&#125;</span> \n`</span>;</span><br><span class="line">    <span class="comment">// 根据状态码，进行日志类型区分</span></span><br><span class="line">    <span class="keyword">if</span> (code &gt;= <span class="number">500</span>) &#123;</span><br><span class="line">      Logger.error(logFormat);</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (code &gt;= <span class="number">400</span>) &#123;</span><br><span class="line">      Logger.warn(logFormat);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      Logger.access(logFormat);</span><br><span class="line">      Logger.log(logFormat);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>同时，Nest 也支持【函数式中间件】，我们将上面的功能用函数式实现一下：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/middleware/logger.middleware.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable, NestMiddleware &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Request, Response &#125; <span class="keyword">from</span> <span class="string">'express'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Logger &#125; <span class="keyword">from</span> <span class="string">'../utils/log4js'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> LoggerMiddleware <span class="keyword">implements</span> NestMiddleware &#123;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 函数式中间件</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">logger</span>(<span class="params">req: Request, res: Response, next: () =&gt; <span class="built_in">any</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> code = res.statusCode; <span class="comment">// 响应状态码</span></span><br><span class="line">  next();</span><br><span class="line">  <span class="comment">// 组装日志信息</span></span><br><span class="line">  <span class="keyword">const</span> logFormat = <span class="string">` &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span></span><br><span class="line"><span class="string">    Request original url: <span class="subst">$&#123;req.originalUrl&#125;</span></span></span><br><span class="line"><span class="string">    Method: <span class="subst">$&#123;req.method&#125;</span></span></span><br><span class="line"><span class="string">    IP: <span class="subst">$&#123;req.ip&#125;</span></span></span><br><span class="line"><span class="string">    Status code: <span class="subst">$&#123;code&#125;</span></span></span><br><span class="line"><span class="string">    Parmas: <span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(req.params)&#125;</span></span></span><br><span class="line"><span class="string">    Query: <span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(req.query)&#125;</span></span></span><br><span class="line"><span class="string">    Body: <span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(req.body)&#125;</span> \n  &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span></span><br><span class="line"><span class="string">  `</span>;</span><br><span class="line">  <span class="comment">// 根据状态码，进行日志类型区分</span></span><br><span class="line">  <span class="keyword">if</span> (code &gt;= <span class="number">500</span>) &#123;</span><br><span class="line">    Logger.error(logFormat);</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (code &gt;= <span class="number">400</span>) &#123;</span><br><span class="line">    Logger.warn(logFormat);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    Logger.access(logFormat);</span><br><span class="line">    Logger.log(logFormat);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面的日志格式进行了一些改动，主要是为了方便查看。</p><p>至于使用 Nest 提供的还是函数式中间件，可以视需求决定。当然，Nest 原生的中间件高级玩法会更多一些。</p><h3 id="4-应用中间件"><a href="#4-应用中间件" class="headerlink" title="4. 应用中间件"></a>4. 应用中间件</h3><p>做好中间件后，我们只需要将中间件引入 main.ts 中就好了：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/main.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; NestFactory &#125; <span class="keyword">from</span> <span class="string">'@nestjs/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppModule &#125; <span class="keyword">from</span> <span class="string">'./app.module'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./middleware/logger.middleware'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">bootstrap</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> app = <span class="keyword">await</span> NestFactory.create(AppModule);</span><br><span class="line">  <span class="comment">// 监听所有的请求路由，并打印日志</span></span><br><span class="line">  app.use(logger);</span><br><span class="line">  app.setGlobalPrefix(<span class="string">'nest-zero-to-one'</span>);</span><br><span class="line">  <span class="keyword">await</span> app.listen(<span class="number">3000</span>);</span><br><span class="line">&#125;</span><br><span class="line">bootstrap();</span><br></pre></td></tr></table></figure><p>保存代码后，就会发现，项目目录下就多了几个文件：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157042-afbc04e0-11ba-4c3d-a086-641b3c32c9c3.webp"></p><p>这就是之前 <code>config/log4js.ts</code> 中配置的成果</p><p>接下来，我们试着请求一下登录接口：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157040-5257b5aa-05cd-4ce6-8de7-c6aea6e7386b.webp"></p><p>发现虽然是打印了，但是没有请求参数信息。</p><p>于是，我们还要做一部操作，将请求参数处理一下：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/main.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; NestFactory &#125; <span class="keyword">from</span> <span class="string">'@nestjs/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppModule &#125; <span class="keyword">from</span> <span class="string">'./app.module'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> express <span class="keyword">from</span> <span class="string">'express'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./middleware/logger.middleware'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">bootstrap</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> app = <span class="keyword">await</span> NestFactory.create(AppModule);</span><br><span class="line">  app.use(express.json()); <span class="comment">// For parsing application/json</span></span><br><span class="line">  app.use(express.urlencoded(&#123; extended: <span class="literal">true</span> &#125;)); <span class="comment">// For parsing application/x-www-form-urlencoded</span></span><br><span class="line">  <span class="comment">// 监听所有的请求路由，并打印日志</span></span><br><span class="line">  app.use(logger);</span><br><span class="line">  app.setGlobalPrefix(<span class="string">'nest-zero-to-one'</span>);</span><br><span class="line">  <span class="keyword">await</span> app.listen(<span class="number">3000</span>);</span><br><span class="line">&#125;</span><br><span class="line">bootstrap();</span><br></pre></td></tr></table></figure><p>再请求一次，发现参数已经出来了：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157080-63d37742-b656-4bbb-be82-ea304a65c1f5.webp"></p><blockquote><p>上面的打印信息，IP 为 <code>::1</code> 是因为我所有的东西都跑在本地，正常情况下，会打印对方的 IP 的。</p></blockquote><p>再去看看 <code>logs/</code> 文件夹下：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157137-e9ee0369-e782-4da3-b800-fc8930976125.webp"></p><p>上图可以看到日志已经写入文件了。</p><h3 id="5-初探拦截器"><a href="#5-初探拦截器" class="headerlink" title="5. 初探拦截器"></a>5. 初探拦截器</h3><p>前面已经示范了怎么打印入参，但是光有入参信息，没有出参信息肯定不行的，不然怎么定位 Bug 呢。</p><p>Nest 提供了一种叫做 <code>Interceptors</code>（拦截器） 的东东，你可以理解为关卡，除非遇到关羽这样的可以过五关斩六将，否则所有的参数都会经过这里进行处理，正所谓雁过拔毛。</p><p>详细的使用方法会在后面的教程进行讲解，这里只是先大致介绍一下怎么使用：</p><p>执行下列指令，创建 <code>transform</code>文件</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ nest g interceptor transform interceptor</span><br></pre></td></tr></table></figure><p>然后编写出参打印逻辑，intercept 接受两个参数，当前的上下文和传递函数，这里还使用了 <code>pipe</code>（管道），用于传递响应数据：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/interceptor/transform.interceptor.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  CallHandler,</span><br><span class="line">  ExecutionContext,</span><br><span class="line">  Injectable,</span><br><span class="line">  NestInterceptor,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Observable &#125; <span class="keyword">from</span> <span class="string">'rxjs'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; map &#125; <span class="keyword">from</span> <span class="string">'rxjs/operators'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Logger &#125; <span class="keyword">from</span> <span class="string">'../utils/log4js'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> TransformInterceptor <span class="keyword">implements</span> NestInterceptor &#123;</span><br><span class="line">  intercept(context: ExecutionContext, next: CallHandler): Observable&lt;<span class="built_in">any</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> req = context.getArgByIndex(<span class="number">1</span>).req;</span><br><span class="line">    <span class="keyword">return</span> next.handle().pipe(</span><br><span class="line">      map(<span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> logFormat = <span class="string">` &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></span><br><span class="line"><span class="string">    Request original url: <span class="subst">$&#123;req.originalUrl&#125;</span></span></span><br><span class="line"><span class="string">    Method: <span class="subst">$&#123;req.method&#125;</span></span></span><br><span class="line"><span class="string">    IP: <span class="subst">$&#123;req.ip&#125;</span></span></span><br><span class="line"><span class="string">    User: <span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(req.user)&#125;</span></span></span><br><span class="line"><span class="string">    Response data:\n <span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(data.data)&#125;</span></span></span><br><span class="line"><span class="string">    &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;`</span>;</span><br><span class="line">        Logger.info(logFormat);</span><br><span class="line">        Logger.access(logFormat);</span><br><span class="line">        <span class="keyword">return</span> data;</span><br><span class="line">      &#125;),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>保存文件，然后在 <code>main.ts</code> 中引入，使用 <code>useGlobalInterceptors</code> 调用全局拦截器：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; NestFactory &#125; <span class="keyword">from</span> <span class="string">'@nestjs/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppModule &#125; <span class="keyword">from</span> <span class="string">'./app.module'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> express <span class="keyword">from</span> <span class="string">'express'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./middleware/logger.middleware'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TransformInterceptor &#125; <span class="keyword">from</span> <span class="string">'./interceptor/transform.interceptor'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">bootstrap</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> app = <span class="keyword">await</span> NestFactory.create(AppModule);</span><br><span class="line">  app.use(express.json()); <span class="comment">// For parsing application/json</span></span><br><span class="line">  app.use(express.urlencoded(&#123; extended: <span class="literal">true</span> &#125;)); <span class="comment">// For parsing application/x-www-form-urlencoded</span></span><br><span class="line">  <span class="comment">// 监听所有的请求路由，并打印日志</span></span><br><span class="line">  app.use(logger);</span><br><span class="line">  <span class="comment">// 使用全局拦截器打印出参</span></span><br><span class="line">  app.useGlobalInterceptors(<span class="keyword">new</span> TransformInterceptor());</span><br><span class="line">  app.setGlobalPrefix(<span class="string">'nest-zero-to-one'</span>);</span><br><span class="line">  <span class="keyword">await</span> app.listen(<span class="number">3000</span>);</span><br><span class="line">&#125;</span><br><span class="line">bootstrap();</span><br></pre></td></tr></table></figure><p>我们再试一次登录接口：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157093-2bf794c8-e2e0-495f-9006-b6d169f82cd3.webp"></p><p>可以看到，出参的日志已经出来了，User 为 <code>undefiend</code> 是因为登录接口没有使用 JWT 守卫，若路由加了 <code>@UseGuards(AuthGuard(&#39;jwt&#39;))</code>，则会把用户信息绑定在 req 上，具体操作可回顾上一篇教程。</p><h2 id="二、异常处理"><a href="#二、异常处理" class="headerlink" title="二、异常处理"></a>二、异常处理</h2><p>在开发的过程中，难免会写出各式各样的“八阿哥”，不然程序员就要失业了。一个富有爱心的程序员应该在输出代码的同时创造出 3 个岗位（手动狗头）。</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157088-01a8d786-4349-4d17-98d4-e695137597da.webp"></p><p>回归正题，光有入参出参日志还不够，异常的捕获和抛出也需要记录。</p><p>接下来，我们先故意写错语法，看看控制台打印什么：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157104-9c9abf15-a920-4902-ad19-ad4e0542fba3.webp"></p><p>如图，只会记录入参以及控制台默认的报错信息，而默认的报错信息，是不会写入日志文件的。</p><p>再看看请求的返回数据：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157143-6ed21a70-a6c1-4b64-b5f0-617b7967c38a.webp"></p><p>如图，这里只会看到 “Internal server error”，其他什么信息都没有。</p><p>这样就会有隐患了，用户在使用过程中报错了，但是日志没有记录报错的原因，就无法统计影响范围，如果是简单的报错还好，如果涉及数据库各种事务或者并发问题，就很难追踪定位了，总不能一直看着控制台吧。</p><p>因此，我们需要捕获代码中未捕获的异常，并记录日志到 <code>logs/errors</code> 里，方便登录线上服务器，对错误日志进行筛选、排查。</p><h3 id="1-初探过滤器"><a href="#1-初探过滤器" class="headerlink" title="1. 初探过滤器"></a>1. 初探过滤器</h3><p>Nest 不光提供了拦截器，也提供了过滤器，就代码结构而言，和拦截器很相似。</p><p>内置的异常层负责处理整个应用程序中的所有抛出的异常。当捕获到未处理的异常时，最终用户将收到友好的响应。</p><p>我们先新建一个 <code>http-exception.filter</code> 试试：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ nest g filter http-exception filter</span><br></pre></td></tr></table></figure><p>打开文件，默认代码长这样：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/filter/http-exception.filter.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; ArgumentsHost, Catch, ExceptionFilter &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Catch</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> HttpExceptionFilter&lt;T&gt; <span class="keyword">implements</span> ExceptionFilter &#123;</span><br><span class="line">  <span class="keyword">catch</span>(exception: T, host: ArgumentsHost) &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，和拦截器的结构大同小异，也是接收 2 个参数，只不过用了 <code>@Catch()</code> 来修饰。</p><h3 id="2-HTTP-错误的捕获"><a href="#2-HTTP-错误的捕获" class="headerlink" title="2. HTTP 错误的捕获"></a>2. HTTP 错误的捕获</h3><p>Nest 提供了一个内置的 HttpException 类，它从 @nestjs/common 包中导入。对于典型的基于 HTTP REST/GraphQL API 的应用程序，最佳实践是在发生某些错误情况时发送标准 HTTP 响应对象。</p><p>HttpException 构造函数有两个必要的参数来决定响应:</p><ul><li>response 参数定义 JSON 响应体。它可以是 string 或 object，如下所述。</li><li>status 参数定义 HTTP 状态代码。</li></ul><p>默认情况下，JSON 响应主体包含两个属性：</p><ul><li>statusCode：默认为 status 参数中提供的 HTTP 状态代码</li><li>message:基于状态的 HTTP 错误的简短描述</li></ul><p>我们先来编写捕获打印的逻辑：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/filter/http-exception.filter.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  ExceptionFilter,</span><br><span class="line">  Catch,</span><br><span class="line">  ArgumentsHost,</span><br><span class="line">  HttpException,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Request, Response &#125; <span class="keyword">from</span> <span class="string">'express'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Logger &#125; <span class="keyword">from</span> <span class="string">'../utils/log4js'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Catch</span>(HttpException)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> HttpExceptionFilter <span class="keyword">implements</span> ExceptionFilter &#123;</span><br><span class="line">  <span class="keyword">catch</span>(exception: HttpException, host: ArgumentsHost) &#123;</span><br><span class="line">    <span class="keyword">const</span> ctx = host.switchToHttp();</span><br><span class="line">    <span class="keyword">const</span> response = ctx.getResponse&lt;Response&gt;();</span><br><span class="line">    <span class="keyword">const</span> request = ctx.getRequest&lt;Request&gt;();</span><br><span class="line">    <span class="keyword">const</span> status = exception.getStatus();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> logFormat = <span class="string">` &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></span><br><span class="line"><span class="string">    Request original url: <span class="subst">$&#123;request.originalUrl&#125;</span></span></span><br><span class="line"><span class="string">    Method: <span class="subst">$&#123;request.method&#125;</span></span></span><br><span class="line"><span class="string">    IP: <span class="subst">$&#123;request.ip&#125;</span></span></span><br><span class="line"><span class="string">    Status code: <span class="subst">$&#123;status&#125;</span></span></span><br><span class="line"><span class="string">    Response: <span class="subst">$&#123;exception.toString()&#125;</span> \n  &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></span><br><span class="line"><span class="string">    `</span>;</span><br><span class="line">    Logger.info(logFormat);</span><br><span class="line">    response.status(status).json(&#123;</span><br><span class="line">      statusCode: status,</span><br><span class="line">      error: exception.message,</span><br><span class="line">      msg: <span class="string">`<span class="subst">$&#123;status &gt;= <span class="number">500</span> ? <span class="string">'Service Error'</span> : <span class="string">'Client Error'</span>&#125;</span>`</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面代码表示如何捕获 HTTP 异常，并组装成更友好的信息返回给用户。</p><p>我们测试一下，先把注册接口的 Token 去掉，请求：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157219-f0d860ec-1079-4cec-b21e-9312997d6321.webp"></p><p>上图是还没有加过滤器的请求结果。</p><p>我们在 main.ts 中引入 <code>http-exception</code>：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/main.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; NestFactory &#125; <span class="keyword">from</span> <span class="string">'@nestjs/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppModule &#125; <span class="keyword">from</span> <span class="string">'./app.module'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> express <span class="keyword">from</span> <span class="string">'express'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./middleware/logger.middleware'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TransformInterceptor &#125; <span class="keyword">from</span> <span class="string">'./interceptor/transform.interceptor'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; HttpExceptionFilter &#125; <span class="keyword">from</span> <span class="string">'./filter/http-exception.filter'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">bootstrap</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> app = <span class="keyword">await</span> NestFactory.create(AppModule);</span><br><span class="line">  app.use(express.json()); <span class="comment">// For parsing application/json</span></span><br><span class="line">  app.use(express.urlencoded(&#123; extended: <span class="literal">true</span> &#125;)); <span class="comment">// For parsing application/x-www-form-urlencoded</span></span><br><span class="line">  <span class="comment">// 监听所有的请求路由，并打印日志</span></span><br><span class="line">  app.use(logger);</span><br><span class="line">  <span class="comment">// 使用拦截器打印出参</span></span><br><span class="line">  app.useGlobalInterceptors(<span class="keyword">new</span> TransformInterceptor());</span><br><span class="line">  app.setGlobalPrefix(<span class="string">'nest-zero-to-one'</span>);</span><br><span class="line">  <span class="comment">// 过滤处理 HTTP 异常</span></span><br><span class="line">  app.useGlobalFilters(<span class="keyword">new</span> HttpExceptionFilter());</span><br><span class="line">  <span class="keyword">await</span> app.listen(<span class="number">3000</span>);</span><br><span class="line">&#125;</span><br><span class="line">bootstrap();</span><br></pre></td></tr></table></figure><p>使用全局过滤器 <code>useGlobalFilters</code> 调用 <code>http-exception</code>，再请求：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157167-02c5c42b-fdbc-4f0b-95f2-122eed2286d6.webp"></p><p>再看控制台打印：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157354-7846170b-6604-4d74-926c-4a3432116fef.webp"></p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157307-0acccad1-c883-4333-a9da-ff1ccd9068e4.webp"></p><p>如此一来，就可以看到未带 Token 请求的结果了，具体信息的组装，可以根据个人喜好进行修改。</p><h3 id="3-内置-HTTP-异常"><a href="#3-内置-HTTP-异常" class="headerlink" title="3. 内置 HTTP 异常"></a>3. 内置 HTTP 异常</h3><p>为了减少样板代码，Nest 提供了一系列继承自核心异常 HttpException 的可用异常。所有这些都可以在 @nestjs/common 包中找到：</p><ul><li>BadRequestException</li><li>UnauthorizedException</li><li>NotFoundException</li><li>ForbiddenException</li><li>NotAcceptableException</li><li>RequestTimeoutException</li><li>ConflictException</li><li>GoneException</li><li>PayloadTooLargeException</li><li>UnsupportedMediaTypeException</li><li>UnprocessableException</li><li>InternalServerErrorException</li><li>NotImplementedException</li><li>BadGatewayException</li><li>ServiceUnavailableException</li><li>GatewayTimeoutException</li></ul><p>结合这些，可以自定义抛出的异常类型，比如后面的教程说到权限管理的时候，就可以抛出 <code>ForbiddenException</code> 异常了。</p><h3 id="4-其他错误的捕获"><a href="#4-其他错误的捕获" class="headerlink" title="4. 其他错误的捕获"></a>4. 其他错误的捕获</h3><p>除了 HTTP 相关的异常，还可以捕获项目中出现的所有异常，我们新建 <code>any-exception.filter</code>：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ nest g filter any-exception filter</span><br></pre></td></tr></table></figure><p>一样的套路：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/filter/any-exception.filter.ts</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 捕获所有异常</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  ExceptionFilter,</span><br><span class="line">  Catch,</span><br><span class="line">  ArgumentsHost,</span><br><span class="line">  HttpException,</span><br><span class="line">  HttpStatus,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Logger &#125; <span class="keyword">from</span> <span class="string">'../utils/log4js'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Catch</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> AllExceptionsFilter <span class="keyword">implements</span> ExceptionFilter &#123;</span><br><span class="line">  <span class="keyword">catch</span>(exception: unknown, host: ArgumentsHost) &#123;</span><br><span class="line">    <span class="keyword">const</span> ctx = host.switchToHttp();</span><br><span class="line">    <span class="keyword">const</span> response = ctx.getResponse();</span><br><span class="line">    <span class="keyword">const</span> request = ctx.getRequest();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> status =</span><br><span class="line">      exception <span class="keyword">instanceof</span> HttpException</span><br><span class="line">        ? exception.getStatus()</span><br><span class="line">        : HttpStatus.INTERNAL_SERVER_ERROR;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> logFormat = <span class="string">` &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></span><br><span class="line"><span class="string">    Request original url: <span class="subst">$&#123;request.originalUrl&#125;</span></span></span><br><span class="line"><span class="string">    Method: <span class="subst">$&#123;request.method&#125;</span></span></span><br><span class="line"><span class="string">    IP: <span class="subst">$&#123;request.ip&#125;</span></span></span><br><span class="line"><span class="string">    Status code: <span class="subst">$&#123;status&#125;</span></span></span><br><span class="line"><span class="string">    Response: <span class="subst">$&#123;exception&#125;</span> \n  &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></span><br><span class="line"><span class="string">    `</span>;</span><br><span class="line">    Logger.error(logFormat);</span><br><span class="line">    response.status(status).json(&#123;</span><br><span class="line">      statusCode: status,</span><br><span class="line">      msg: <span class="string">`Service Error: <span class="subst">$&#123;exception&#125;</span>`</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>和 <code>http-exception</code> 的唯一区别就是 <code>exception</code> 的类型是 <code>unknown</code></p><p>我们将 any-exception 引入 main.ts：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/main.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; NestFactory &#125; <span class="keyword">from</span> <span class="string">'@nestjs/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppModule &#125; <span class="keyword">from</span> <span class="string">'./app.module'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> express <span class="keyword">from</span> <span class="string">'express'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; logger &#125; <span class="keyword">from</span> <span class="string">'./middleware/logger.middleware'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TransformInterceptor &#125; <span class="keyword">from</span> <span class="string">'./interceptor/transform.interceptor'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; HttpExceptionFilter &#125; <span class="keyword">from</span> <span class="string">'./filter/http-exception.filter'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AllExceptionsFilter &#125; <span class="keyword">from</span> <span class="string">'./filter/any-exception.filter'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">bootstrap</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> app = <span class="keyword">await</span> NestFactory.create(AppModule);</span><br><span class="line">  app.use(express.json()); <span class="comment">// For parsing application/json</span></span><br><span class="line">  app.use(express.urlencoded(&#123; extended: <span class="literal">true</span> &#125;)); <span class="comment">// For parsing application/x-www-form-urlencoded</span></span><br><span class="line">  <span class="comment">// 监听所有的请求路由，并打印日志</span></span><br><span class="line">  app.use(logger);</span><br><span class="line">  <span class="comment">// 使用拦截器打印出参</span></span><br><span class="line">  app.useGlobalInterceptors(<span class="keyword">new</span> TransformInterceptor());</span><br><span class="line">  app.setGlobalPrefix(<span class="string">'nest-zero-to-one'</span>);</span><br><span class="line">  app.useGlobalFilters(<span class="keyword">new</span> AllExceptionsFilter());</span><br><span class="line">  app.useGlobalFilters(<span class="keyword">new</span> HttpExceptionFilter());</span><br><span class="line">  <span class="keyword">await</span> app.listen(<span class="number">3000</span>);</span><br><span class="line">&#125;</span><br><span class="line">bootstrap();</span><br></pre></td></tr></table></figure><blockquote><p>注意：AllExceptionsFilter 要在 HttpExceptionFilter 的上面，否则 HttpExceptionFilter 就不生效了，全被 AllExceptionsFilter 捕获了。</p></blockquote><p>然后，我们带上 Token （为了跳过 401 报错）再请求一次：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157134-5556c85e-5a1f-4b60-87b6-656b2be6371c.webp"></p><p>再看看控制台：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157181-888f31ac-5d17-4eed-a9ab-7a738827dddf.webp"></p><p>已经有了明显的区别，再看看 errors.log，也写进了日志中：</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157193-23864e82-2367-4c69-b442-875f37c3f696.webp"></p><p>如此一来，代码中未捕获的错误也能从日志中查到了。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>本篇介绍了如何使用 log4js 来管理日志，制作中间件和拦截器对入参出参进行记录，以及使用过滤器对异常进行处理。</p><p>文中日志的打印格式可以按照自己喜好进行排版，不一定局限于此。</p><p>良好的日志管理能帮我们快速排查 Bug，减少加班，不做资本家的奴隶，把有限的精力投入到无限的可能上。</p><p><img alt data-src="https://static.powerformer.com/c/@auY0siFek/1589285157185-3dfd97b5-3d03-420a-bade-5600424f1981.webp"></p><p>下一篇将介绍如何使用 DTO 对参数进行验证，解脱各种 if - else。</p><blockquote><p>本篇收录于<span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vY29sbGVjdGlvbi81ZTg5M2ExYjZmYjlhMDRkNjVhMTU0MDA=" title="https://juejin.im/collection/5e893a1b6fb9a04d65a15400">NestJS 实战教程<i class="fa fa-external-link"></i></span>，更多文章敬请关注。</p></blockquote><p>参考资料：</p><p><span class="exturl" data-url="aHR0cHM6Ly9kb2NzLm5lc3Rqcy5jb20v" title="https://docs.nestjs.com/">Nest.js 官方文档<i class="fa fa-external-link"></i></span></p><p><span class="exturl" data-url="aHR0cHM6Ly9kb2NzLm5lc3Rqcy5jbi8=" title="https://docs.nestjs.cn/">Nest.js 中文文档<i class="fa fa-external-link"></i></span></p><p><span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vcG9zdC81N2I5NjJhZjdkYjJhMjAwNTQyYTBmYjM=" title="https://juejin.im/post/57b962af7db2a200542a0fb3">《Node.js 之 log4js 完全讲解》<i class="fa fa-external-link"></i></span></p><p>`</p>]]></content>
    
    <summary type="html">
    
      上一篇介绍了如何使用 JWT 进行单点登录，接下来，要完善一下后端项目的一些基础功能。
    
    </summary>
    
    
      <category term="后端" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/"/>
    
      <category term="Node.js" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="Nest.js" scheme="https://tuture.co/tags/Nest-js/"/>
    
  </entry>
  
  <entry>
    <title>Nest.js 从零到壹系列（三）：使用 JWT 实现注册、登录</title>
    <link href="https://tuture.co/2020/05/12/@sO4iOISav/"/>
    <id>https://tuture.co/2020/05/12/@sO4iOISav/</id>
    <published>2020-05-11T16:02:00.509Z</published>
    <updated>2021-07-11T02:09:59.410Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one"><img alt class="avatar" data-src="/images/avatars/bldtp.png"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vdXNlci81YTVmZjNlMTZmYjlhMDFjOTUyNjIxNWY=" title="https://juejin.im/user/5a5ff3e16fb9a01c9526215f"><p class="nickName">布拉德特皮</p><i class="fa fa-external-link"></i></span>  </div>  </div></div><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>上一篇介绍了如何使用 Sequelize 连接 MySQL，接下来，在原来代码的基础上进行扩展，实现用户的注册和登录功能。</p><a id="more"></a><p>这里简单提一下 JWT：</p><h3 id="JWT"><a href="#JWT" class="headerlink" title="JWT"></a>JWT</h3><blockquote><p>JWT（JSON Web Token）是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准（RFC 7519）。该 Token 被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT 的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该 Token 也可直接被用于认证，也可被加密。</p></blockquote><p>具体原理可以参考<span class="exturl" data-url="aHR0cDovL3d3dy5ydWFueWlmZW5nLmNvbS9ibG9nLzIwMTgvMDcvanNvbl93ZWJfdG9rZW4tdHV0b3JpYWwuaHRtbA==" title="http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html">《JSON Web Token 入门教程 - 阮一峰》<i class="fa fa-external-link"></i></span></p><p>所以 JWT 实现【登录】的大致流程是：</p><ol><li>客户端用户进行登录请求；</li><li>服务端拿到请求，根据参数查询用户表；</li><li>若匹配到用户，将用户信息进行签证，并颁发 Token；</li><li>客户端拿到 Token 后，存储至某一地方，在之后的请求中都带上 Token ；</li><li>服务端接收到带 Token 的请求后，直接根据签证进行校验，无需再查询用户信息；</li></ol><p>下面，就开始我们的实战：</p><p><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one">GitHub 项目地址<i class="fa fa-external-link"></i></span>，欢迎各位大佬 Star。</p><h2 id="一、编写加密的工具函数"><a href="#一、编写加密的工具函数" class="headerlink" title="一、编写加密的工具函数"></a>一、编写加密的工具函数</h2><p>在 <code>src</code> 目录下，新建文件夹 <code>utils</code>，里面将存放各种工具函数，然后新建 <code>cryptogram.ts</code> 文件：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> crypto <span class="keyword">from</span> <span class="string">'crypto'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Make salt</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">makeSalt</span>(<span class="params"></span>): <span class="title">string</span> </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> crypto.randomBytes(<span class="number">3</span>).toString(<span class="string">'base64'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Encrypt password</span></span><br><span class="line"><span class="comment"> * @param password 密码</span></span><br><span class="line"><span class="comment"> * @param salt 密码盐</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">encryptPassword</span>(<span class="params">password: <span class="built_in">string</span>, salt: <span class="built_in">string</span></span>): <span class="title">string</span> </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (!password || !salt) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">''</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> tempSalt = Buffer.from(salt, <span class="string">'base64'</span>);</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="comment">// 10000 代表迭代次数 16代表长度</span></span><br><span class="line">    crypto.pbkdf2Sync(password, tempSalt, <span class="number">10000</span>, <span class="number">16</span>, <span class="string">'sha1'</span>).toString(<span class="string">'base64'</span>)</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面写了两个方法，一个是制作一个随机盐（salt），另一个是根据盐来加密密码。</p><p>这两个函数将贯穿注册和登录的功能。</p><h2 id="二、用户注册"><a href="#二、用户注册" class="headerlink" title="二、用户注册"></a>二、用户注册</h2><p>在写注册逻辑之前，我们需要先修改一下上一篇写过的代码，即 <code>user.service.ts</code> 中的 <code>findeOne()</code> 方法：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.service.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> Sequelize <span class="keyword">from</span> <span class="string">'sequelize'</span>; <span class="comment">// 引入 Sequelize 库</span></span><br><span class="line"><span class="keyword">import</span> sequelize <span class="keyword">from</span> <span class="string">'../../database/sequelize'</span>; <span class="comment">// 引入 Sequelize 实例</span></span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserService &#123;</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 查询是否有该用户</span></span><br><span class="line"><span class="comment">   * @param username 用户名</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="keyword">async</span> findOne(username: <span class="built_in">string</span>): <span class="built_in">Promise</span>&lt;<span class="built_in">any</span> | <span class="literal">undefined</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> sql = <span class="string">`</span></span><br><span class="line"><span class="string">      SELECT</span></span><br><span class="line"><span class="string">        user_id userId, account_name username, real_name realName, passwd password,</span></span><br><span class="line"><span class="string">        passwd_salt salt, mobile, role</span></span><br><span class="line"><span class="string">      FROM</span></span><br><span class="line"><span class="string">        admin_user</span></span><br><span class="line"><span class="string">      WHERE</span></span><br><span class="line"><span class="string">        account_name = '<span class="subst">$&#123;username&#125;</span>'</span></span><br><span class="line"><span class="string">    `</span>; <span class="comment">// 一段平淡无奇的 SQL 查询语句</span></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> user = (</span><br><span class="line">        <span class="keyword">await</span> sequelize.query(sql, &#123;</span><br><span class="line">          <span class="keyword">type</span>: Sequelize.QueryTypes.SELECT, <span class="comment">// 查询方式</span></span><br><span class="line">          raw: <span class="literal">true</span>, <span class="comment">// 是否使用数组组装的方式展示结果</span></span><br><span class="line">          logging: <span class="literal">true</span>, <span class="comment">// 是否将 SQL 语句打印到控制台</span></span><br><span class="line">        &#125;)</span><br><span class="line">      )[<span class="number">0</span>];</span><br><span class="line">      <span class="comment">// 若查不到用户，则 user === undefined</span></span><br><span class="line">      <span class="keyword">return</span> user;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="built_in">console</span>.error(error);</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">void</span> <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>现在，<code>findOne()</code> 的功能更符合它的方法名了，查到了，就返回用户信息，查不到，就返回 <code>undefined</code>。</p><p>接下来，我们开始编写注册功能：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.service.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> Sequelize <span class="keyword">from</span> <span class="string">'sequelize'</span>; <span class="comment">// 引入 Sequelize 库</span></span><br><span class="line"><span class="keyword">import</span> sequelize <span class="keyword">from</span> <span class="string">'../../database/sequelize'</span>; <span class="comment">// 引入 Sequelize 实例</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; makeSalt, encryptPassword &#125; <span class="keyword">from</span> <span class="string">'../../utils/cryptogram'</span>; <span class="comment">// 引入加密函数</span></span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserService &#123;</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 查询是否有该用户</span></span><br><span class="line"><span class="comment">   * @param username 用户名</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="keyword">async</span> findOne(username: <span class="built_in">string</span>): <span class="built_in">Promise</span>&lt;<span class="built_in">any</span> | <span class="literal">undefined</span>&gt; &#123;</span><br><span class="line">    ...</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 注册</span></span><br><span class="line"><span class="comment">   * @param requestBody 请求体</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="keyword">async</span> register(requestBody: <span class="built_in">any</span>): <span class="built_in">Promise</span>&lt;<span class="built_in">any</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; accountName, realName, password, repassword, mobile &#125; = requestBody;</span><br><span class="line">    <span class="keyword">if</span> (password !== repassword) &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        code: <span class="number">400</span>,</span><br><span class="line">        msg: <span class="string">'两次密码输入不一致'</span>,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">const</span> user = <span class="keyword">await</span> <span class="keyword">this</span>.findOne(accountName);</span><br><span class="line">    <span class="keyword">if</span> (user) &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        code: <span class="number">400</span>,</span><br><span class="line">        msg: <span class="string">'用户已存在'</span>,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">const</span> salt = makeSalt(); <span class="comment">// 制作密码盐</span></span><br><span class="line">    <span class="keyword">const</span> hashPwd = encryptPassword(password, salt);  <span class="comment">// 加密密码</span></span><br><span class="line">    <span class="keyword">const</span> registerSQL = <span class="string">`</span></span><br><span class="line"><span class="string">      INSERT INTO admin_user</span></span><br><span class="line"><span class="string">        (account_name, real_name, passwd, passwd_salt, mobile, user_status, role, create_by)</span></span><br><span class="line"><span class="string">      VALUES</span></span><br><span class="line"><span class="string">        ('<span class="subst">$&#123;accountName&#125;</span>', '<span class="subst">$&#123;realName&#125;</span>', '<span class="subst">$&#123;hashPwd&#125;</span>', '<span class="subst">$&#123;salt&#125;</span>', '<span class="subst">$&#123;mobile&#125;</span>', 1, 3, 0)</span></span><br><span class="line"><span class="string">    `</span>;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">await</span> sequelize.query(registerSQL, &#123; logging: <span class="literal">false</span> &#125;);</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        code: <span class="number">200</span>,</span><br><span class="line">        msg: <span class="string">'Success'</span>,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        code: <span class="number">503</span>,</span><br><span class="line">        msg: <span class="string">`Service error: <span class="subst">$&#123;error&#125;</span>`</span>,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>编写好后，在 <code>user.controller.ts</code> 中添加路由</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.controller.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Controller, Post, Body &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'./user.service'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly usersService: UserService</span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// @Post('find-one')</span></span><br><span class="line">  <span class="comment">// findOne(@Body() body: any) &#123;</span></span><br><span class="line">  <span class="comment">//   return this.usersService.findOne(body.username);</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'register'</span>)</span><br><span class="line">  <span class="keyword">async</span> register(<span class="meta">@Body</span>() body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.usersService.register(body);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>现在，我们使用 Postman 来测试一下，先故意输入不一样的密码和已存在的用户名：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020495-26e6018c-e8f6-4903-83ae-1fb07bfef758.webp"></p><p>如图，密码不一致的校验触发了。</p><p>然后，我们把密码改成一致的：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020427-04cba9a1-45ee-4a63-8fb0-6baed5782322.webp"></p><p>如图，已有用户的校验触发了。</p><p>然后，我们再输入正确的参数：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020425-8bf8d6f4-b378-4664-a377-8bb4bf4f59e6.webp"></p><p>我们再去数据库看一下：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020828-503db24b-785c-4f3b-9092-d2ec20ba939f.webp"></p><p>发现已经将信息插入表中了，而且密码也是加密后的，至此，注册功能已基本完成。</p><h2 id="三、JWT-的配置与验证"><a href="#三、JWT-的配置与验证" class="headerlink" title="三、JWT 的配置与验证"></a>三、JWT 的配置与验证</h2><p>为了更直观的感受处理顺序，我在代码中加入了步骤打印</p><h3 id="1-安装依赖包"><a href="#1-安装依赖包" class="headerlink" title="1. 安装依赖包"></a>1. 安装依赖包</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">$ yarn add passport passport-jwt passport-local <span class="meta">@nestjs</span>/passport <span class="meta">@nestjs</span>/jwt -S</span><br></pre></td></tr></table></figure><h3 id="2-创建-Auth-模块"><a href="#2-创建-Auth-模块" class="headerlink" title="2. 创建 Auth 模块"></a>2. 创建 Auth 模块</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">$ nest g service auth logical</span><br><span class="line">$ nest g <span class="keyword">module</span> auth logical</span><br></pre></td></tr></table></figure><h3 id="3-新建一个存储常量的文件"><a href="#3-新建一个存储常量的文件" class="headerlink" title="3. 新建一个存储常量的文件"></a>3. 新建一个存储常量的文件</h3><p>在 <code>auth</code> 文件夹下新增一个 <code>constants.ts</code>，用于存储各种用到的常量：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/auth/constats.ts</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> jwtConstants = &#123;</span><br><span class="line">  secret: <span class="string">'shinobi7414'</span>, <span class="comment">// 秘钥</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="4-编写-JWT-策略"><a href="#4-编写-JWT-策略" class="headerlink" title="4. 编写 JWT 策略"></a>4. 编写 JWT 策略</h3><p>在 <code>auth</code> 文件夹下新增一个 <code>jwt.strategy.ts</code>，用于编写 JWT 的验证策略：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/auth/jwt.strategy.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; ExtractJwt, Strategy &#125; <span class="keyword">from</span> <span class="string">'passport-jwt'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; PassportStrategy &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Injectable &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; jwtConstants &#125; <span class="keyword">from</span> <span class="string">'./constants'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> JwtStrategy <span class="keyword">extends</span> PassportStrategy(Strategy) &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">super</span>(&#123;</span><br><span class="line">      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),</span><br><span class="line">      ignoreExpiration: <span class="literal">false</span>,</span><br><span class="line">      secretOrKey: jwtConstants.secret,</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// JWT验证 - Step 4: 被守卫调用</span></span><br><span class="line">  <span class="keyword">async</span> validate(payload: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`JWT验证 - Step 4: 被守卫调用`</span>);</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      userId: payload.sub,</span><br><span class="line">      username: payload.username,</span><br><span class="line">      realName: payload.realName,</span><br><span class="line">      role: payload.role,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="5-编写-auth-service-ts-的验证逻辑"><a href="#5-编写-auth-service-ts-的验证逻辑" class="headerlink" title="5. 编写 auth.service.ts 的验证逻辑"></a>5. 编写 auth.service.ts 的验证逻辑</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/auth/auth.service.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'../user/user.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; JwtService &#125; <span class="keyword">from</span> <span class="string">'@nestjs/jwt'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; encryptPassword &#125; <span class="keyword">from</span> <span class="string">'../../utils/cryptogram'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> AuthService &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"></span></span><br><span class="line"><span class="params">    <span class="keyword">private</span> readonly usersService: UserService,</span></span><br><span class="line"><span class="params">    <span class="keyword">private</span> readonly jwtService: JwtService,</span></span><br><span class="line"><span class="params">  </span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// JWT验证 - Step 2: 校验用户信息</span></span><br><span class="line">  <span class="keyword">async</span> validateUser(username: <span class="built_in">string</span>, password: <span class="built_in">string</span>): <span class="built_in">Promise</span>&lt;<span class="built_in">any</span>&gt; &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'JWT验证 - Step 2: 校验用户信息'</span>);</span><br><span class="line">    <span class="keyword">const</span> user = <span class="keyword">await</span> <span class="keyword">this</span>.usersService.findOne(username);</span><br><span class="line">    <span class="keyword">if</span> (user) &#123;</span><br><span class="line">      <span class="keyword">const</span> hashedPassword = user.password;</span><br><span class="line">      <span class="keyword">const</span> salt = user.salt;</span><br><span class="line">      <span class="comment">// 通过密码盐，加密传参，再与数据库里的比较，判断是否相等</span></span><br><span class="line">      <span class="keyword">const</span> hashPassword = encryptPassword(password, salt);</span><br><span class="line">      <span class="keyword">if</span> (hashedPassword === hashPassword) &#123;</span><br><span class="line">        <span class="comment">// 密码正确</span></span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          code: <span class="number">1</span>,</span><br><span class="line">          user,</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 密码错误</span></span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          code: <span class="number">2</span>,</span><br><span class="line">          user: <span class="literal">null</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 查无此人</span></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      code: <span class="number">3</span>,</span><br><span class="line">      user: <span class="literal">null</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// JWT验证 - Step 3: 处理 jwt 签证</span></span><br><span class="line">  <span class="keyword">async</span> certificate(user: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> payload = &#123;</span><br><span class="line">      username: user.username,</span><br><span class="line">      sub: user.userId,</span><br><span class="line">      realName: user.realName,</span><br><span class="line">      role: user.role,</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'JWT验证 - Step 3: 处理 jwt 签证'</span>);</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> token = <span class="keyword">this</span>.jwtService.sign(payload);</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        code: <span class="number">200</span>,</span><br><span class="line">        data: &#123;</span><br><span class="line">          token,</span><br><span class="line">        &#125;,</span><br><span class="line">        msg: <span class="string">`登录成功`</span>,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        code: <span class="number">600</span>,</span><br><span class="line">        msg: <span class="string">`账号或密码错误`</span>,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>此时保存文件，控制台会报错：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020424-b23efdd8-60bf-45cf-af7c-4828c0231b3f.webp"></p><p>可以先不管，这是因为还没有把 JwtService 和 UserService 关联到 auth.module.ts 中。</p><h3 id="5-编写本地策略"><a href="#5-编写本地策略" class="headerlink" title="5. 编写本地策略"></a>5. 编写本地策略</h3><p>这一步非必须，根据项目的需求来决定是否需要本地策略</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/auth/local.strategy.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Strategy &#125; <span class="keyword">from</span> <span class="string">'passport-local'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; PassportStrategy &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Injectable, UnauthorizedException &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthService &#125; <span class="keyword">from</span> <span class="string">'./auth.service'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> LocalStrategy <span class="keyword">extends</span> PassportStrategy(Strategy) &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly authService: AuthService</span>) &#123;</span><br><span class="line">    <span class="keyword">super</span>();</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">async</span> validate(username: <span class="built_in">string</span>, password: <span class="built_in">string</span>): <span class="built_in">Promise</span>&lt;<span class="built_in">any</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> user = <span class="keyword">await</span> <span class="keyword">this</span>.authService.validateUser(username, password);</span><br><span class="line">    <span class="keyword">if</span> (!user) &#123;</span><br><span class="line">      <span class="keyword">throw</span> <span class="keyword">new</span> UnauthorizedException();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> user;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="6-关联-Module"><a href="#6-关联-Module" class="headerlink" title="6. 关联 Module"></a>6. 关联 Module</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/auth/auth.module.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Module &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthService &#125; <span class="keyword">from</span> <span class="string">'./auth.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; LocalStrategy &#125; <span class="keyword">from</span> <span class="string">'./local.strategy'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; JwtStrategy &#125; <span class="keyword">from</span> <span class="string">'./jwt.strategy'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserModule &#125; <span class="keyword">from</span> <span class="string">'../user/user.module'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; PassportModule &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; JwtModule &#125; <span class="keyword">from</span> <span class="string">'@nestjs/jwt'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; jwtConstants &#125; <span class="keyword">from</span> <span class="string">'./constants'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Module</span>(&#123;</span><br><span class="line">  imports: [</span><br><span class="line">    PassportModule.register(&#123; defaultStrategy: <span class="string">'jwt'</span> &#125;),</span><br><span class="line">    JwtModule.register(&#123;</span><br><span class="line">      secret: jwtConstants.secret,</span><br><span class="line">      signOptions: &#123; expiresIn: <span class="string">'8h'</span> &#125;, <span class="comment">// token 过期时效</span></span><br><span class="line">    &#125;),</span><br><span class="line">    UserModule,</span><br><span class="line">  ],</span><br><span class="line">  providers: [AuthService, LocalStrategy, JwtStrategy],</span><br><span class="line">  exports: [AuthService],</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> AuthModule &#123;&#125;</span><br></pre></td></tr></table></figure><p>此时保存文件，若还有上文的报错，则需要去 <code>app.module.ts</code>，将 <code>AuthService</code> 从 <code>providers</code> 数组中移除，并在 <code>imports</code> 数组中添加 <code>AuthModule</code> 即可：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/app.module.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Module &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppController &#125; <span class="keyword">from</span> <span class="string">'./app.controller'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppService &#125; <span class="keyword">from</span> <span class="string">'./app.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserModule &#125; <span class="keyword">from</span> <span class="string">'./logical/user/user.module'</span>;</span><br><span class="line"><span class="comment">// import &#123; AuthService &#125; from './logical/auth/auth.service';</span></span><br><span class="line"><span class="keyword">import</span> &#123; AuthModule &#125; <span class="keyword">from</span> <span class="string">'./logical/auth/auth.module'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Module</span>(&#123;</span><br><span class="line">  imports: [UserModule, AuthModule],</span><br><span class="line">  controllers: [AppController],</span><br><span class="line">  providers: [AppService],</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> AppModule &#123;&#125;</span><br></pre></td></tr></table></figure><h3 id="7-编写-login-路由"><a href="#7-编写-login-路由" class="headerlink" title="7. 编写 login 路由"></a>7. 编写 login 路由</h3><p>此时，回归到 <code>user.controller.ts</code>，我们将组装好的 JWT 相关文件引入，并根据验证码来判断用户状态：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.controller.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Controller, Post, Body &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthService &#125; <span class="keyword">from</span> <span class="string">'../auth/auth.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'./user.service'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"></span></span><br><span class="line"><span class="params">    <span class="keyword">private</span> readonly authService: AuthService,</span></span><br><span class="line"><span class="params">    <span class="keyword">private</span> readonly usersService: UserService,</span></span><br><span class="line"><span class="params">  </span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// JWT验证 - Step 1: 用户请求登录</span></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'login'</span>)</span><br><span class="line">  <span class="keyword">async</span> login(<span class="meta">@Body</span>() loginParmas: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'JWT验证 - Step 1: 用户请求登录'</span>);</span><br><span class="line">    <span class="keyword">const</span> authResult = <span class="keyword">await</span> <span class="keyword">this</span>.authService.validateUser(</span><br><span class="line">      loginParmas.username,</span><br><span class="line">      loginParmas.password,</span><br><span class="line">    );</span><br><span class="line">    <span class="keyword">switch</span> (authResult.code) &#123;</span><br><span class="line">      <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.authService.certificate(authResult.user);</span><br><span class="line">      <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          code: <span class="number">600</span>,</span><br><span class="line">          msg: <span class="string">`账号或密码不正确`</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">      <span class="keyword">default</span>:</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          code: <span class="number">600</span>,</span><br><span class="line">          msg: <span class="string">`查无此人`</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'register'</span>)</span><br><span class="line">  <span class="keyword">async</span> register(<span class="meta">@Body</span>() body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.usersService.register(body);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>此时保存文件，同样的报错又出现了：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020405-c16215e4-9b52-42c2-815c-9a5f7b5c898d.webp"></p><p>这次我们先去 <code>user.module.ts</code> 将 <code>controllers</code> 注释掉：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020412-fdbb72bd-15cb-441b-bf12-05af43c05c5c.webp"></p><p>此时看控制台，没有 User 相关的路由，我们需要去 <code>app.module.ts</code> 将 Controller 添加回去：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020471-874995cf-a15a-4715-b9ef-78a0ea0d2328.webp"></p><p>这么做是因为如果在 <code>user.module.ts</code> 中引入 <code>AuthService</code> 的话，就还要将其他的策略又引入一次，个人觉得很麻烦，就干脆直接用 app 来统一管理了。</p><h2 id="四、登录验证"><a href="#四、登录验证" class="headerlink" title="四、登录验证"></a>四、登录验证</h2><p>前面列了一大堆代码，是时候检验效果了，我们就按照原来注册的信息，进行登录请求：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020419-4639eed7-8a53-4f0f-ab3e-8a43e05d80eb.webp"></p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020435-c6ce0683-7c17-4f6b-a512-ac60c4a40b89.webp"></p><p>图中可以看到，已经返回了一长串 token 了，而且控制台也打印了登录的步骤和用户信息。前端拿到这个 token，就可以请求其他有守卫的接口了。</p><p>接下来我们试试输错账号或密码的情况：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020438-96347679-4810-4ae6-bf4d-8514da969223.webp"></p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020463-bd779597-4077-4d1f-97a4-44e8a6197d34.webp"></p><h2 id="五、守卫"><a href="#五、守卫" class="headerlink" title="五、守卫"></a>五、守卫</h2><p>既然发放了 Token，就要能验证 Token，因此就要用到 Guard（守卫）了。</p><p>我们拿之前的注册接口测试一下，修改 <code>user.controller.ts</code> 的代码，引入 <code>UseGuards</code> 和 <code>AuthGuard</code>，并在路由上添加 <code>@UseGuards(AuthGuard(&#39;jwt&#39;))</code>：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.controller.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Controller, Post, Body, UseGuards &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthGuard &#125; <span class="keyword">from</span> <span class="string">'@nestjs/passport'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AuthService &#125; <span class="keyword">from</span> <span class="string">'../auth/auth.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'./user.service'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly authService: AuthService, <span class="keyword">private</span> readonly usersService: UserService</span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'login'</span>)</span><br><span class="line">  <span class="keyword">async</span> login(<span class="meta">@Body</span>() loginParmas: <span class="built_in">any</span>) &#123;</span><br><span class="line">    ...</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@UseGuards</span>(AuthGuard(<span class="string">'jwt'</span>)) <span class="comment">// 使用 'JWT' 进行验证</span></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'register'</span>)</span><br><span class="line">  <span class="keyword">async</span> register(<span class="meta">@Body</span>() body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> <span class="keyword">this</span>.usersService.register(body);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后，我们先来试试请求头没有带 token 的情况：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020438-ea800021-d536-4778-8b5d-244b24fb0334.webp"></p><p>可以看到，返回 401 状态码，Unauthorized 表示未授权，也就是判断你没有登录。</p><p>现在，我们试试带 Token 的情况，把登录拿到的 Token 复制到 Postman 的 Authorzation 里（选择 Bearer Token）：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020458-fe6b7c1a-8389-4f42-92c8-1eb2927fea18.webp"></p><p>然后再请求接口：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020435-1d0c3fc8-1900-42a5-a0b2-570007bb952d.webp"></p><p>此时，已经可以正常访问了，再看看控制台打印的信息，步骤也正如代码中注释的那样：</p><p><img alt data-src="https://static.powerformer.com/c/@sO4iOISav/1589285020490-5ed72be7-9f01-43de-896c-d81583c9dee6.webp"></p><p>至此，登录功能已基本完成。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>本篇介绍了如何使用 JWT 对用户登录进行 Token 签发，并在接受到含 Token 请求的时候，如何验证用户信息，从而实现了登录验证。</p><p>当然，实现登录验证并不局限于 JWT，还有很多方法，有兴趣的读者可以自己查阅。</p><p>这里也说一下 JWT 的缺点，主要是无法在使用同一账号登录的情况下，后登录的，挤掉先登录的，也就是让先前的 Token 失效，从而保证信息安全（至少我是没查到相关解决方法，如果有大神解决过该问题，还请指点），只能使用一些其他黑科技挤掉 Token（如 Redis）。</p><p>现在，注册、登录功能都有了，接下来应该完善一个服务端应有的其他公共功能。</p><p>下一篇将介绍拦截器、异常处理以及日志的收集。</p><blockquote><p>本篇收录于<span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vY29sbGVjdGlvbi81ZTg5M2ExYjZmYjlhMDRkNjVhMTU0MDA=" title="https://juejin.im/collection/5e893a1b6fb9a04d65a15400">NestJS 实战教程<i class="fa fa-external-link"></i></span>，更多文章敬请关注。</p></blockquote><p>`</p>]]></content>
    
    <summary type="html">
    
      上一篇介绍了如何使用 Sequelize 连接 MySQL，接下来，在原来代码的基础上进行扩展，实现用户的注册和登录功能。
    
    </summary>
    
    
      <category term="后端" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/"/>
    
      <category term="Node.js" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="Nest.js" scheme="https://tuture.co/tags/Nest-js/"/>
    
  </entry>
  
  <entry>
    <title>Nest.js 从零到壹系列（二）：使用 Sequelize 操作数据库</title>
    <link href="https://tuture.co/2020/05/12/@34dvBzFh6/"/>
    <id>https://tuture.co/2020/05/12/@34dvBzFh6/</id>
    <published>2020-05-11T16:01:00.509Z</published>
    <updated>2021-07-11T02:09:59.410Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one"><img alt class="avatar" data-src="/images/avatars/bldtp.png"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vdXNlci81YTVmZjNlMTZmYjlhMDFjOTUyNjIxNWY=" title="https://juejin.im/user/5a5ff3e16fb9a01c9526215f"><p class="nickName">布拉德特皮</p><i class="fa fa-external-link"></i></span>  </div>  </div></div><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>上一篇介绍了如何创建项目、路由的访问以及如何创建模块，这篇来讲讲数据库的连接与使用。</p><a id="more"></a><p>既然是后端项目，当然要能连上数据库，否则还不如直接写静态页面。</p><p>本教程使用的是 MySQL，有人可能会问为啥不用 MongoDB。。。呃，因为公司使用 MySQL，我也是结合项目经历写的教程，MongoDB 还没踩过坑，所以就不在这误人子弟了。</p><p><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one">GitHub 项目地址<i class="fa fa-external-link"></i></span>，欢迎各位大佬 Star。</p><h2 id="一、MySQL-准备"><a href="#一、MySQL-准备" class="headerlink" title="一、MySQL 准备"></a>一、MySQL 准备</h2><p>首先要确保你有数据库可以连接，如果没有，可以在 MySQL 官网下载一个，本地跑起来。安装教程这里就不叙述了，“百度一下，你就知道”。</p><p>推荐使用 Navicat Premium 可视化工具来管理数据库。</p><p>用 Navicat 连接上数据库后，新建一个库：</p><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098161-92c7982f-c049-484e-92d7-9e7afaa428af.webp"></p><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098122-8c279728-bb7a-47d7-b8dc-d55d8125428c.webp"></p><p>点开我们刚创建的库 <code>nest_zero_to_one</code>，点开 Tables，发现里面空空如也，接下来我们创建一张新表，点开上面工具栏的 Query，并新增查询：</p><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098172-12a43b0f-2fa2-43ef-bd5f-b7dc6533719c.webp"></p><p>将下列代码复制到框内，点击上面的运行，即可完成表的创建：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">CREATE TABLE <span class="string">`admin_user`</span> (</span><br><span class="line">  <span class="string">`user_id`</span> smallint(<span class="number">6</span>) NOT NULL AUTO_INCREMENT COMMENT <span class="string">'用户ID'</span>,</span><br><span class="line">  <span class="string">`account_name`</span> varchar(<span class="number">24</span>) NOT NULL COMMENT <span class="string">'用户账号'</span>,</span><br><span class="line">  <span class="string">`real_name`</span> varchar(<span class="number">20</span>) NOT NULL COMMENT <span class="string">'真实姓名'</span>,</span><br><span class="line">  <span class="string">`passwd`</span> char(<span class="number">32</span>) NOT NULL COMMENT <span class="string">'密码'</span>,</span><br><span class="line">  <span class="string">`passwd_salt`</span> char(<span class="number">6</span>) NOT NULL COMMENT <span class="string">'密码盐'</span>,</span><br><span class="line">  <span class="string">`mobile`</span> varchar(<span class="number">15</span>) NOT NULL DEFAULT <span class="string">'0'</span> COMMENT <span class="string">'手机号码'</span>,</span><br><span class="line">  <span class="string">`role`</span> tinyint(<span class="number">4</span>) NOT NULL DEFAULT <span class="string">'3'</span> COMMENT <span class="string">'用户角色：0-超级管理员|1-管理员|2-开发&amp;测试&amp;运营|3-普通用户（只能查看）'</span>,</span><br><span class="line">  <span class="string">`user_status`</span> tinyint(<span class="number">4</span>) NOT NULL DEFAULT <span class="string">'0'</span> COMMENT <span class="string">'状态：0-失效|1-有效|2-删除'</span>,</span><br><span class="line">  <span class="string">`create_by`</span> smallint(<span class="number">6</span>) NOT NULL COMMENT <span class="string">'创建人ID'</span>,</span><br><span class="line">  <span class="string">`create_time`</span> timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT <span class="string">'创建时间'</span>,</span><br><span class="line">  <span class="string">`update_by`</span> smallint(<span class="number">6</span>) NOT NULL DEFAULT <span class="string">'0'</span> COMMENT <span class="string">'修改人ID'</span>,</span><br><span class="line">  <span class="string">`update_time`</span> timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT <span class="string">'修改时间'</span>,</span><br><span class="line">  PRIMARY KEY (<span class="string">`user_id`</span>),</span><br><span class="line">  KEY <span class="string">`idx_m`</span> (<span class="string">`mobile`</span>)</span><br><span class="line">) ENGINE=InnoDB AUTO_INCREMENT=<span class="number">1</span> DEFAULT CHARSET=utf8 COMMENT=<span class="string">'后台用户表'</span>;</span><br></pre></td></tr></table></figure><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098152-6320a371-9605-4c10-93fe-48e75fadc3c4.webp"></p><p>然后我们可以看到，左边的 <code>Tables</code> 下多出了 <code>admin_user</code> 表，点开就可以看到字段信息了：</p><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098129-ee898154-d572-40ba-a8cf-8edb1a97bd84.webp"></p><p>我们先随便插入 2 条数据，方便后面的查询：</p><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098117-4a0baa06-3231-48b5-b572-b512622a86af.webp"></p><h2 id="二、项目的数据库配置"><a href="#二、项目的数据库配置" class="headerlink" title="二、项目的数据库配置"></a>二、项目的数据库配置</h2><p>先在项目根目录创建一个文件夹 <code>config</code>（与 <code>src</code> 同级），专门放置各种配置。</p><p>然后新建一个文件 <code>db.ts</code>:</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// config/db.ts</span></span><br><span class="line"><span class="keyword">const</span> productConfig = &#123;</span><br><span class="line">  mysql: &#123;</span><br><span class="line">    port: <span class="string">'数据库端口'</span>,</span><br><span class="line">    host: <span class="string">'数据库地址'</span>,</span><br><span class="line">    user: <span class="string">'用户名'</span>,</span><br><span class="line">    password: <span class="string">'密码'</span>,</span><br><span class="line">    database: <span class="string">'nest_zero_to_one'</span>, <span class="comment">// 库名</span></span><br><span class="line">    connectionLimit: <span class="number">10</span>, <span class="comment">// 连接限制</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> localConfig = &#123;</span><br><span class="line">  mysql: &#123;</span><br><span class="line">    port: <span class="string">'数据库端口'</span>,</span><br><span class="line">    host: <span class="string">'数据库地址'</span>,</span><br><span class="line">    user: <span class="string">'用户名'</span>,</span><br><span class="line">    password: <span class="string">'密码'</span>,</span><br><span class="line">    database: <span class="string">'nest_zero_to_one'</span>, <span class="comment">// 库名</span></span><br><span class="line">    connectionLimit: <span class="number">10</span>, <span class="comment">// 连接限制</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 本地运行是没有 process.env.NODE_ENV 的，借此来区分[开发环境]和[生产环境]</span></span><br><span class="line"><span class="keyword">const</span> config = process.env.NODE_ENV ? productConfig : localConfig;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> config;</span><br></pre></td></tr></table></figure><blockquote><p>Ps：这个文件是不同步到 github 的，需要各位读者结合实际情况配置</p></blockquote><p>市面上有很多连接数据库的工具，笔者这里使用的是 <code>Sequelize</code>，先安装依赖包：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">$ npm i sequelize sequelize-typescript mysql2 -S</span><br><span class="line">或</span><br><span class="line">$ yarn add sequelize sequelize-typescript mysql2 -S</span><br></pre></td></tr></table></figure><p>然后在 <code>src</code> 目录下创建文件夹 <code>database</code>，然后再创建 <code>sequelize.ts</code>：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/database/sequelize.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Sequelize &#125; <span class="keyword">from</span> <span class="string">'sequelize-typescript'</span>;</span><br><span class="line"><span class="keyword">import</span> db <span class="keyword">from</span> <span class="string">'../../config/db'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> sequelize = <span class="keyword">new</span> Sequelize(</span><br><span class="line">  db.mysql.database,</span><br><span class="line">  db.mysql.user,</span><br><span class="line">  db.mysql.password || <span class="literal">null</span>,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="comment">// 自定义主机; 默认值: localhost</span></span><br><span class="line">    host: db.mysql.host, <span class="comment">// 数据库地址</span></span><br><span class="line">    <span class="comment">// 自定义端口; 默认值: 3306</span></span><br><span class="line">    port: db.mysql.port,</span><br><span class="line">    dialect: <span class="string">'mysql'</span>,</span><br><span class="line">    pool: &#123;</span><br><span class="line">      max: db.mysql.connectionLimit, <span class="comment">// 连接池中最大连接数量</span></span><br><span class="line">      min: <span class="number">0</span>, <span class="comment">// 连接池中最小连接数量</span></span><br><span class="line">      acquire: <span class="number">30000</span>,</span><br><span class="line">      idle: <span class="number">10000</span>, <span class="comment">// 如果一个线程 10 秒钟内没有被使用过的话，那么就释放线程</span></span><br><span class="line">    &#125;,</span><br><span class="line">    timezone: <span class="string">'+08:00'</span>, <span class="comment">// 东八时区</span></span><br><span class="line">  &#125;,</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 测试数据库链接</span></span><br><span class="line">sequelize</span><br><span class="line">  .authenticate()</span><br><span class="line">  .then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'数据库连接成功'</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">  .catch(<span class="function">(<span class="params">err: <span class="built_in">any</span></span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 数据库连接失败时打印输出</span></span><br><span class="line">    <span class="built_in">console</span>.error(err);</span><br><span class="line">    <span class="keyword">throw</span> err;</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> sequelize;</span><br></pre></td></tr></table></figure><h2 id="三、数据库连接测试"><a href="#三、数据库连接测试" class="headerlink" title="三、数据库连接测试"></a>三、数据库连接测试</h2><p>好了，接下来我们来测试一下数据库的连接情况。</p><p>我们重写 <code>user.service.ts</code> 的逻辑：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.service.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> Sequelize <span class="keyword">from</span> <span class="string">'sequelize'</span>; <span class="comment">// 引入 Sequelize 库</span></span><br><span class="line"><span class="keyword">import</span> sequelize <span class="keyword">from</span> <span class="string">'../../database/sequelize'</span>; <span class="comment">// 引入 Sequelize 实例</span></span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserService &#123;</span><br><span class="line">  <span class="keyword">async</span> findOne(username: <span class="built_in">string</span>): <span class="built_in">Promise</span>&lt;<span class="built_in">any</span> | <span class="literal">undefined</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> sql = <span class="string">`</span></span><br><span class="line"><span class="string">      SELECT</span></span><br><span class="line"><span class="string">        user_id id, real_name realName, role</span></span><br><span class="line"><span class="string">      FROM</span></span><br><span class="line"><span class="string">        admin_user</span></span><br><span class="line"><span class="string">      WHERE</span></span><br><span class="line"><span class="string">        account_name = '<span class="subst">$&#123;username&#125;</span>'</span></span><br><span class="line"><span class="string">    `</span>; <span class="comment">// 一段平淡无奇的 SQL 查询语句</span></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> res = <span class="keyword">await</span> sequelize.query(sql, &#123;</span><br><span class="line">        <span class="keyword">type</span>: Sequelize.QueryTypes.SELECT, <span class="comment">// 查询方式</span></span><br><span class="line">        raw: <span class="literal">true</span>, <span class="comment">// 是否使用数组组装的方式展示结果</span></span><br><span class="line">        logging: <span class="literal">true</span>, <span class="comment">// 是否将 SQL 语句打印到控制台，默认为 true</span></span><br><span class="line">      &#125;);</span><br><span class="line">      <span class="keyword">const</span> user = res[<span class="number">0</span>]; <span class="comment">// 查出来的结果是一个数组，我们只取第一个。</span></span><br><span class="line">      <span class="keyword">if</span> (user) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          code: <span class="number">200</span>, <span class="comment">// 返回状态码，可自定义</span></span><br><span class="line">          data: &#123;</span><br><span class="line">            user,</span><br><span class="line">          &#125;,</span><br><span class="line">          msg: <span class="string">'Success'</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          code: <span class="number">600</span>,</span><br><span class="line">          msg: <span class="string">'查无此人'</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        code: <span class="number">503</span>,</span><br><span class="line">        msg: <span class="string">`Service error: <span class="subst">$&#123;error&#125;</span>`</span>,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>保存文件，就会看到控制台刷新了（前提是使用 <code>yarn start:dev</code> 启动的），并打印下列语句：</p><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098163-689735e7-c9b3-4cc5-a869-68776586be52.webp"></p><p>这说明之前的配置生效了，我们试着用之前的参数请求一下接口：</p><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098174-01e86f33-71bc-4334-ad3d-889ec0422bf2.webp"></p><p>返回“查无此人”，说明数据库没有叫“Kid”的用户。</p><p>我们改成正确的已存在的用户名再试试：</p><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098206-f0199b49-b37c-4772-b818-169c15b10787.webp"></p><p>然后观察一下控制台，我们的查询语句已经打印出来了，通过 <code>logging: true</code>，可以在调试 Bug 的时候，更清晰的查找 SQL 语句的错误，不过建议测试稳定后，上线前关闭，不然记录的日志会很繁杂：</p><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098175-99c8dfba-b58d-4433-b30f-acb8470aba94.webp"></p><p>再对照一下数据库里的表，发现查出来的数据和数据库里的一致，至此，MySQL 连接测试完成，以后就可以愉快的在 Service 里面搬砖了。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>这篇介绍了 MySQL 的数据准备、Sequelize 的配置、Nest 怎么通过 Sequelize 连接上 MySQL，以及用一条简单的查询语句去验证连接情况。</p><p>在这里，<strong>强烈建议使用写原生 SQL 语句去操作数据库</strong>。</p><p>虽然 Sequelize 提供了很多便捷的方法，具体可去 <span class="exturl" data-url="aHR0cHM6Ly9zZXF1ZWxpemUub3JnL3Y1Lw==" title="https://sequelize.org/v5/">Sequelize v5 官方文档<i class="fa fa-external-link"></i></span> 浏览学习。但笔者通过观察 <code>logging</code> 打印出来的语句发现，其实多了很多无谓的操作，在高并发的情况下，太影响性能了。</p><p>而且如果不使用原生查询，那么就要建立对象映射到数据库表，然后每次工具更新，还要花时间成本去学习，如果数据库改了字段，那么映射关系就会出错，然后项目就会疯狂报错以致宕机（亲身经历）。</p><p>而使用原生 SQL，只需要学一种语言就够了，换个工具，也能用，而且就算改了字段，也只会在请求接口的时候报错，到时候再针对那个语句修改就好了，而且现在查找替换功能这么强大，批量修改也不是难事。</p><p>最重要的是，如果你是从前端转后端，或者根本就是 0 基础到后端，还是建议先把 SQL 的基础打牢，不然连 <code>JOIN</code>、<code>LEFT JOIN</code> 和 <code>RIGHT JOIN</code> 的区别都分不清（我们公司就有个三年经验的后端，乱用 <code>LEFT JOIN</code>，然后被 DB 主管一顿痛骂。。。真事儿）。</p><p>多写、多分析、多看控制台报错、多从性能上考虑，才是最快入门的途径。</p><blockquote><p>注意：在写 UPDATE 更新语句的时候，一定要加上 WHERE 条件，一定要加上 WHERE 条件，一定要加上 WHERE 条件，重要的事情说 3 遍，血与泪的教训！！！</p></blockquote><p><img alt data-src="https://static.powerformer.com/c/@34dvBzFh6/1589285098128-2b7c200c-935f-418e-8d46-f1f164453908.webp"></p><p>下一篇，将介绍如何使用 JWT（Json Web Token）进行单点登录。</p><blockquote><p>本篇收录于<span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vY29sbGVjdGlvbi81ZTg5M2ExYjZmYjlhMDRkNjVhMTU0MDA=" title="https://juejin.im/collection/5e893a1b6fb9a04d65a15400">NestJS 实战教程<i class="fa fa-external-link"></i></span>，更多文章敬请关注。</p></blockquote><p>`</p>]]></content>
    
    <summary type="html">
    
      上一篇介绍了如何创建项目、路由的访问以及如何创建模块，这篇来讲讲数据库的连接与使用。
    
    </summary>
    
    
      <category term="后端" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/"/>
    
      <category term="Node.js" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="Nest.js" scheme="https://tuture.co/tags/Nest-js/"/>
    
  </entry>
  
  <entry>
    <title>Nest.js 从零到壹系列（一）：项目创建&amp;amp;路由设置&amp;amp;模块</title>
    <link href="https://tuture.co/2020/05/12/@pRtgJQ4NP/"/>
    <id>https://tuture.co/2020/05/12/@pRtgJQ4NP/</id>
    <published>2020-05-11T16:00:00.509Z</published>
    <updated>2021-07-11T02:09:59.465Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one"><img alt class="avatar" data-src="/images/avatars/bldtp.png"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vdXNlci81YTVmZjNlMTZmYjlhMDFjOTUyNjIxNWY=" title="https://juejin.im/user/5a5ff3e16fb9a01c9526215f"><p class="nickName">布拉德特皮</p><i class="fa fa-external-link"></i></span>  </div>  </div></div><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>本系列将以前端的视角进行书写，分享自己的踩坑经历。教程主要面向前端或者毫无后端经验，但是又想尝试 Node.js 的读者，当然，也欢迎后端大佬斧正。</p><a id="more"></a><blockquote><p>Nest 是一个用于构建高效，可扩展的 Node.js 服务器端应用程序的框架。它使用渐进式 JavaScript，内置并完全支持 TypeScript（但仍然允许开发人员使用纯 JavaScript 编写代码）并结合了 OOP（面向对象编程），FP（函数式编程）和 FRP（函数式响应编程）的元素。<br>在底层，Nest 使用强大的 HTTP Server 框架，如 Express（默认）和 Fastify。Nest 在这些框架之上提供了一定程度的抽象，同时也将其 API 直接暴露给开发人员。这样可以轻松使用每个平台的无数第三方模块。</p></blockquote><p>Nest 是我近半年接触的一款后端框架，之前接触的是 Koa2，但因为老项目被“资深”前端写的乱七八糟，所以我就选择了这款以 TypeScript 为主的、最近在国内兴起的框架重构了。截止目前，Github 上的 nestjs 拥有 25.2k 个 Star，主要用户在国外，所以侧面可以证明其一定的稳定性。</p><p>Nest 采用 MVC 的设计模式，如果有 Angular 项目经验的读者，应该会觉得熟悉。我没写过 Angular，所以当初学的时候，走了一些弯路，主要是接受这种类 Spring 的设计理念。</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941205-0447a9b4-d46e-4187-acd2-515522ebf4c4.webp"></p><p><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NlcGhpcm90aEtpZC9uZXN0LXplcm8tdG8tb25l" title="https://github.com/SephirothKid/nest-zero-to-one">GitHub 项目地址<i class="fa fa-external-link"></i></span>，欢迎各位大佬 Star。</p><p>好了，碎碎念到此为止，开始吧：</p><h2 id="一、项目创建"><a href="#一、项目创建" class="headerlink" title="一、项目创建"></a>一、项目创建</h2><p>项目环境：</p><ul><li>node.js: 11.13.0+</li><li>npm: 6.13.4+</li><li>nestjs: 7.0.3</li><li>typescript: 3.8.3</li></ul><p>先确操作系统上安装了 Node.js（&gt;= 10.13.0），然后安装 Nest.js，然后新建项目，输入如下指令：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm i -g @nestjs/cli</span><br><span class="line">$ nest new project-name</span><br></pre></td></tr></table></figure><p>输入完后，会初始化，此时，会问你使用哪一种方式来管理依赖包：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941213-1c828dcb-a482-47a2-803e-250553035951.webp"></p><p>我选择的是 <code>yarn</code>，主要是国内的 <code>npm</code> 下载得比较慢。如果没有 <code>yarn</code> 的，可以下载一个，也可以使用 <code>npm</code>，不过本系列教程都使用 <code>yarn</code>。</p><p>等鸡啄完了米，等狗舔完了面，等火烧断了锁，就会得到下列信息：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941177-16e5c85c-e295-4c6b-8141-55255de86585.webp"></p><p>按照提示，进入项目，不出意外，目录应该是这个样子的：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941299-8aa004dd-9022-44d2-8fe5-90782bb198b6.webp"></p><p>运行 <code>yarn run start</code> 或 <code>yarn start</code>，会看到控制台输出如下信息，表示服务已启动：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941184-e9d3abf8-5539-4f1d-8454-bf59a2cb64aa.webp"></p><h2 id="二、Hello-World"><a href="#二、Hello-World" class="headerlink" title="二、Hello World!"></a>二、Hello World!</h2><h3 id="1-路由指向"><a href="#1-路由指向" class="headerlink" title="1. 路由指向"></a>1. 路由指向</h3><p>打开 <code>src</code> 下的 <code>main.ts</code>，不出意外，应该会看到下列代码：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; NestFactory &#125; <span class="keyword">from</span> <span class="string">'@nestjs/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppModule &#125; <span class="keyword">from</span> <span class="string">'./app.module'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">bootstrap</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> app = <span class="keyword">await</span> NestFactory.create(AppModule);</span><br><span class="line">  <span class="keyword">await</span> app.listen(<span class="number">3000</span>);</span><br><span class="line">&#125;</span><br><span class="line">bootstrap();</span><br></pre></td></tr></table></figure><p><code>await NestFactory.create(AppModule);</code> 表示使用 Nest 的工厂函数创建了 AppModule，关于 Module 稍后会介绍。</p><p><code>await app.listen(3000)</code> 表示监听的是 3000 端口，这个可以自定义。若 3000 端口被占用导致项目启动失败，可以修改成其他端口。</p><p>然后我们通过 Postman 访问本地的 3000 端口，会发现出现如下信息：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941186-a1cc681d-2860-45cb-af3c-e27c517115bd.webp"></p><p>然后我们需要做的就是，找到为什么会出现 <code>Hello World!</code> 的原因。</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941214-5db88830-e7ff-4b39-8840-4ae9c02f7788.webp"></p><p>打开 <code>src</code> 下的 <code>app.service.ts</code>，会看到如下代码：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/app.service.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> AppService &#123;</span><br><span class="line">  getHello(): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'Hello World!'</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>发现这里有个方法 <code>getHello()</code>，返回了 <code>Hello World!</code> 字符串，那么它在哪里被调用呢？</p><p>打开 <code>src</code> 下的 <code>app.controller.ts</code>：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/app.controller.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Controller, Get &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppService &#125; <span class="keyword">from</span> <span class="string">'./app.service'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Controller</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> AppController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly appService: AppService</span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@Get</span>()</span><br><span class="line">  getHello(): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.appService.getHello();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>喔，原来如此，这里引入了 <code>app.service.ts</code> 中的 <code>AppService</code> 类，并实例化，然后通过 <code>@Get()</code> 修饰 <code>AppController</code> 里的 <code>getHello()</code> 方法，表示这个方法会被 <code>GET</code> 请求调用。</p><p>我们修改一下路由，就是在 <code>@Get()</code> 括号里面写上字符串：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/app.controller.ts</span></span><br><span class="line"><span class="meta">@Controller</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> AppController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly appService: AppService</span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@Get</span>(<span class="string">'hello-world'</span>)</span><br><span class="line">  getHello(): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.appService.getHello();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后<strong>重启项目</strong>（在控制台按下 Ctrl + C 终止项目，然后再输入 <code>yarn start</code>），此时我们再访问 <code>localhost:3000/</code>，就会发现 <code>404</code> 了：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941286-57799cd3-4a7c-42e8-806c-dd83485cd651.webp"></p><p>此时，我们输入 <code>localhost:3000/hello-world</code>，熟悉的字符出现了：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941227-1a94654c-ae24-4595-8442-780060fc07d3.webp"></p><p>这就是 Nest 的路由，是不是很简单？</p><h3 id="2-局部路由前缀"><a href="#2-局部路由前缀" class="headerlink" title="2. 局部路由前缀"></a>2. 局部路由前缀</h3><p>路由还可以设置局部和全局的前缀，使用前缀可以避免在所有路由共享通用前缀时出现冲突的情况。</p><p>还是 <code>app.controller.ts</code>，在 <code>@Controller()</code>写入 <code>lesson-1</code>，这样的话就表示<strong>当前文件</strong>中，所有的路由都有了前缀 <code>lesson-1</code>：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/app.controller.ts</span></span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'lesson-1'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> AppController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly appService: AppService</span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@Get</span>(<span class="string">'hello-world'</span>)</span><br><span class="line">  getHello(): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.appService.getHello();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>重启项目，此时我们访问 <code>localhost:3000/lesson-1/hello-world</code>，就会指向 <code>getHello()</code> 方法了：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941314-6cf571d4-956c-4685-af0e-6d0fc5d9ff64.webp"></p><h3 id="3-全局路由前缀"><a href="#3-全局路由前缀" class="headerlink" title="3. 全局路由前缀"></a>3. 全局路由前缀</h3><p>这个更简单了，只需要在 <code>main.ts</code> 中加上<code>app.setGlobalPrefix()</code>：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/main.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; NestFactory &#125; <span class="keyword">from</span> <span class="string">'@nestjs/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppModule &#125; <span class="keyword">from</span> <span class="string">'./app.module'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">bootstrap</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> app = <span class="keyword">await</span> NestFactory.create(AppModule);</span><br><span class="line">  app.setGlobalPrefix(<span class="string">'nest-zero-to-one'</span>); <span class="comment">// 全局路由前缀</span></span><br><span class="line">  <span class="keyword">await</span> app.listen(<span class="number">3000</span>);</span><br><span class="line">&#125;</span><br><span class="line">bootstrap();</span><br></pre></td></tr></table></figure><p>之后只要请求服务，所有的路由都要加上 <code>nest-zero-to-one</code> 前缀：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941302-947921d2-c892-4e41-a6d5-536a7dcaf278.webp"></p><h3 id="4-使用-nodemon-模式启动项目"><a href="#4-使用-nodemon-模式启动项目" class="headerlink" title="4. 使用 nodemon 模式启动项目"></a>4. 使用 nodemon 模式启动项目</h3><p>如果不想频繁重启，可以使用 <code>yarn start:dev</code> 启动项目，它会使用 nodemon 监听文件的变化，并自动重启服务。</p><p>如果出现下列信息：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941335-387ff501-d620-44ea-b5a4-4a2c2eb5c3be.webp"></p><p>原因是可能之前装过 <code>typescript</code> 或者 <code>nestjs</code> 脚手架，然后新建项目的时候，<code>typescript</code> 版本比较旧，只需在项目中更新到 <code>3.7.0</code> 以上：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ yarn add typescript -D</span><br></pre></td></tr></table></figure><p>出现这个截图，但是没有路由信息，表示 nodemon 的配置需要更改：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941444-ea20c995-b94d-4134-ab51-a61bfab39bca.webp"></p><figure class="highlight"><table><tr><td class="code"><pre><span class="line">package.json:</span><br><span class="line">❌ "start:dev": "concurrently --handle-input \"wait-on dist/main.js &amp;&amp; nodemon\" \"tsc -w -p tsconfig.build.json\" ",</span><br><span class="line">✅ "start:dev": "concurrently --handle-input \"wait-on dist/src/main.js &amp;&amp; nodemon\" \"tsc -w -p tsconfig.build.json\" ",</span><br><span class="line"></span><br><span class="line">nodemon.json:</span><br><span class="line">❌ "exec": "node dist/main"</span><br><span class="line">✅ "exec": "node dist/src/main"</span><br></pre></td></tr></table></figure><p>然后再运行 <code>yarn start:dev</code> 就可以了：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941305-17499c0d-d56a-41ad-b625-f14121bf0255.webp"></p><p>或者干脆直接把 <code>main.ts</code> 扔到根目录去（和 src 同级）</p><p>这样再改动什么文件，都会自动重启服务了。</p><h2 id="三、新增模块"><a href="#三、新增模块" class="headerlink" title="三、新增模块"></a>三、新增模块</h2><p>通过上文，应该熟悉了 NestJS 的设计模式，主要就是 <code>Controller</code>、<code>Service</code>、<code>Module</code> 共同努力，形成了一个模块。</p><ul><li><code>Controller</code>：传统意义上的控制器，提供 api 接口，负责处理路由、中转、验证等一些简洁的业务；</li><li><code>Service</code>：又称为 <code>Provider</code>， 是一系列服务、repo、工厂方法、helper 的总称，主要负责处理具体的业务，如数据库的增删改查、事务、并发等逻辑代码；</li><li><code>Module</code>：负责将 <code>Controller</code> 和 <code>Service</code> 连接起来，类似于 <code>namespace</code> 的概念；</li></ul><p>很直观的传统 MVC 结构，有 Spring 开发经验的后端应该不会陌生。</p><p>下面我们通过新增一个 User 模块来进行实战：</p><h3 id="1-Service"><a href="#1-Service" class="headerlink" title="1. Service"></a>1. Service</h3><p>个人习惯先创建 Service，最后再创建 Module，因为 Controller 和 Module 都需要引入 Service，这样引入的时候就可以有提示了（当然，也可以事先写 import 语句，但 ESLint 的检查会冒红点，强迫症患者表示不接受）。</p><p>使用 nest-cli 提供的指令可以快速创建文件，语法如下：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ nest g [文件类型] [文件名] [文件目录（src目录下）]</span><br></pre></td></tr></table></figure><p>我们输入：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ nest g service user logical</span><br></pre></td></tr></table></figure><p>就会发现 src 目录下多了 logical/user/ 文件夹（个人喜欢将业务逻辑相关的文件放入 logical）</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941294-5fa97734-fb92-4106-be61-31d8bace9074.webp"></p><p>上图中的 user.service.spec.ts 可以不用管……至少我写了大半年，也没动过这种文件。</p><p>然后我们看一下 <code>user.service.ts</code>，用指令创建的文件，基本都长这样:</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.service.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserService &#123;&#125;</span><br></pre></td></tr></table></figure><p>于是，我们可以仿照 app.service.ts 来写一个简单的业务了：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.service.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Injectable &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserService &#123;</span><br><span class="line">  findOne(username: <span class="built_in">string</span>): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (username === <span class="string">'Kid'</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="string">'Kid is here'</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'No one here'</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="2-Controller"><a href="#2-Controller" class="headerlink" title="2. Controller"></a>2. Controller</h3><p>现在，我们来写控制器，输入下列命令：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ nest g controller user logical</span><br></pre></td></tr></table></figure><p>初始化的 Controller 基本都长这个样：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/logical/user/user.controller.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Controller &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserController &#123;&#125;</span><br></pre></td></tr></table></figure><p>接下来，我们把 Service 的业务逻辑引入进来：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Controller, Post, Body &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'./user.service'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Controller</span>(<span class="string">'user'</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserController &#123;</span><br><span class="line">  <span class="keyword">constructor</span>(<span class="params"><span class="keyword">private</span> readonly usersService: UserService</span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@Post</span>(<span class="string">'find-one'</span>)</span><br><span class="line">  findOne(<span class="meta">@Body</span>() body: <span class="built_in">any</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.usersService.findOne(body.username);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>需要先用构造器实例化，然后才能调用方法，这里使用的是 <code>POST</code> 来接收请求，通过 <code>@Body()</code> 来获取请求体（request.body）的参数。</p><p>我们用 Postman 来测试一下，先随意传入一个 username：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941424-594d16f1-1114-428a-b1ff-0ba317d6dcd2.webp"></p><p>再传入 ‘Kid’：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941600-98827fc9-6c1f-4688-8c1d-6056bf5192e5.webp"></p><p>由此可知，我们成功匹配到了路由，并且编写的业务生效了。</p><p>至此 70% 的流程已经走完，以后开发业务（搬砖），基本都是在 Service 和 Controller 里面折腾了。。。</p><blockquote><p>注意：千万不要往 Controller 里面添加乱七八糟的东西，尤其不要在里面写业务逻辑，Controller 就应该保持简洁、干净。很多前端刚写 Node 的时候，都喜欢在这里面写逻辑，只为了省事，殊不知这对后期的维护是个灾难。</p></blockquote><h3 id="3-Module"><a href="#3-Module" class="headerlink" title="3. Module"></a>3. Module</h3><p>这个是连接 Service 和 Controller 的东东，很多人会奇怪，上文只是创建了 Service 和 Controller，怎么就可以访问了呢？</p><p>打开 app.module.ts：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/app.module.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Module &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppController &#125; <span class="keyword">from</span> <span class="string">'./app.controller'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppService &#125; <span class="keyword">from</span> <span class="string">'./app.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'./logical/user/user.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserController &#125; <span class="keyword">from</span> <span class="string">'./logical/user/user.controller'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Module</span>(&#123;</span><br><span class="line">  imports: [],</span><br><span class="line">  controllers: [AppController, UserController],</span><br><span class="line">  providers: [AppService, UserService],</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> AppModule &#123;&#125;</span><br></pre></td></tr></table></figure><p>发现使用指令创建文件的时候，已经自动帮我们引入 User 相关文件了，而 main.ts 文件里，又已经引入了 <code>AppModule</code>，并使用 <code>NestFactory</code> 创建了实例。</p><p>因此，如果是新建无关痛痒的子模块，即使不新建 Module 文件，也能通过路由访问。</p><p>但是作为教程，还是大致说一下吧，先创建文件：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ nest g module user logical</span><br></pre></td></tr></table></figure><p>初始化的 Module 基本都长这个样：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Module &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Module</span>(&#123;&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserModule &#123;&#125;</span><br></pre></td></tr></table></figure><p>我们把 Service 和 Controller 组装起来：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Module &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserService &#125; <span class="keyword">from</span> <span class="string">'./user.service'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; UserController &#125; <span class="keyword">from</span> <span class="string">'./user.controller'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Module</span>(&#123;</span><br><span class="line">  controllers: [UserController],</span><br><span class="line">  providers: [UserService],</span><br><span class="line">  exports: [UserService],</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserModule &#123;&#125;</span><br></pre></td></tr></table></figure><p>这样做有什么好处呢，就是其他 Module 想引入 User 的时候，就不用同时引入 Service 和 Controller 了，我们修改一下 <code>app.module.ts</code>：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// src/app.module.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Module &#125; <span class="keyword">from</span> <span class="string">'@nestjs/common'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppController &#125; <span class="keyword">from</span> <span class="string">'./app.controller'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppService &#125; <span class="keyword">from</span> <span class="string">'./app.service'</span>;</span><br><span class="line"><span class="comment">// import &#123; UserService &#125; from './logical/user/user.service';</span></span><br><span class="line"><span class="comment">// import &#123; UserController &#125; from './logical/user/user.controller';</span></span><br><span class="line"><span class="keyword">import</span> &#123; UserModule &#125; <span class="keyword">from</span> <span class="string">'./logical/user/user.module'</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Module</span>(&#123;</span><br><span class="line">  imports: [UserModule],</span><br><span class="line">  controllers: [AppController],</span><br><span class="line">  providers: [AppService],</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> AppModule &#123;&#125;</span><br></pre></td></tr></table></figure><p>保存运行，发现路由依然生效：</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941341-98f69263-6f51-4b65-af50-fb718b8e91ad.webp"></p><p>当然，Module 还有其他高级玩法，这个就不在这里展开了。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>本篇介绍了 Nest.js 项目的创建，路由的访问，以及如何新增模块。</p><p>每个模块又可分为 Service、Controller、Module。在本篇中：Service 负责处理逻辑、Controller 负责路由、Module 负责整合。</p><p>通过实战可以看出，Nest 还是相对简单的，唯一的障碍可能就是 TypeScript 了。</p><p>写惯了 JavaScript 的人，可能不是很能适应这种类型检查，尤其是热衷于使用各种骚操作的，不过既然涉及到了后端领域，还是严谨一点比较好，前期可以避免各种不规范导致的坑。</p><p><img alt data-src="https://static.powerformer.com/c/@pRtgJQ4NP/1589284941305-95bca38a-486f-40ab-b140-96673f9c87b7.webp"></p><p>下一篇将介绍如何连接 MySQL 数据库。</p><blockquote><p>本篇收录于<span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vY29sbGVjdGlvbi81ZTg5M2ExYjZmYjlhMDRkNjVhMTU0MDA=" title="https://juejin.im/collection/5e893a1b6fb9a04d65a15400">NestJS 实战教程<i class="fa fa-external-link"></i></span>，更多文章敬请关注。</p></blockquote><p>`</p>]]></content>
    
    <summary type="html">
    
      本系列将以前端的视角进行书写，分享自己的踩坑经历。教程主要面向前端或者毫无后端经验，但是又想尝试 Node.js 的读者，当然，也欢迎后端大佬斧正。
    
    </summary>
    
    
      <category term="后端" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/"/>
    
      <category term="Node.js" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/"/>
    
      <category term="进阶" scheme="https://tuture.co/categories/%E5%90%8E%E7%AB%AF/Node-js/%E8%BF%9B%E9%98%B6/"/>
    
    
      <category term="Nest.js" scheme="https://tuture.co/tags/Nest-js/"/>
    
  </entry>
  
  <entry>
    <title>用动画和实战打开 React Hooks（三）：useReducer 和 useContext</title>
    <link href="https://tuture.co/2020/05/05/689bb43/"/>
    <id>https://tuture.co/2020/05/05/689bb43/</id>
    <published>2020-05-05T03:06:36.489Z</published>
    <updated>2021-07-11T02:14:56.155Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><img alt class="avatar" data-src="/images/avatars/tuture-dev.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><p class="nickName">@tuture-dev</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcw==" title="https://github.com/tuture-dev/covid-19-with-hooks"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="useState：柳暗花明"><a href="#useState：柳暗花明" class="headerlink" title="useState：柳暗花明"></a>useState：柳暗花明</h2><p>欢迎继续阅读《用动画和实战打开 React Hooks 系列》：</p><ul><li><a href="https://tuture.co/2020/04/08/870a7b7/">《用动画和实战打开 React Hooks（一）：useState 和 useEffect》</a></li><li><a href="https://tuture.co/2020/04/14/xocgOEM/">《用动画和实战打开 React Hooks（二）：自定义 Hook 和 useCallback》</a></li></ul><p>如果你想要直接从这一篇开始学习，那么请克隆我们为你提供的源代码：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> -b third-part https://github.com/tuture-dev/covid-19-with-hooks.git</span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果你访问 GitHub 不流畅，我们还提供了 Gitee 地址</span></span><br><span class="line">git <span class="built_in">clone</span> -b third-part https://gitee.com/tuture/covid-19-with-hooks.git</span><br></pre></td></tr></table></figure><p>在这第三篇文章中，我们将首先来重温一下 <code>useState</code> 。在之前的两篇教程中，我们可以说和 <code>useState</code> 并肩作战了很久，是我们非常“熟悉”的老朋友了。但是回过头来，我们真的足够了解它吗？</p><h3 id="一个未解决的问题"><a href="#一个未解决的问题" class="headerlink" title="一个未解决的问题"></a>一个未解决的问题</h3><p>你很有可能在使用 <code>useState</code> 的时候遇到过一个问题：通过 Setter 修改状态的时候，怎么读取上一个状态值，并在此基础上修改呢？如果你看文档足够细致，应该会注意到 <code>useState</code> 有一个<strong>函数式更新</strong>（Functional Update）的用法，以下面这段计数器（代码来自 <span class="exturl" data-url="aHR0cHM6Ly9yZWFjdGpzLm9yZy9kb2NzL2hvb2tzLXJlZmVyZW5jZS5odG1sI2Z1bmN0aW9uYWwtdXBkYXRlcw==" title="https://reactjs.org/docs/hooks-reference.html#functional-updates">React 官网<i class="fa fa-external-link"></i></span>）为例：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Counter</span>(<span class="params">&#123;initialCount&#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [count, setCount] = useState(initialCount);</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;&gt;</span><br><span class="line">      Count: &#123;count&#125;</span><br><span class="line">      &lt;button onClick=&#123;() =&gt; setCount(initialCount)&#125;&gt;Reset&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">      &lt;button onClick=&#123;() =&gt; setCount(prevCount =&gt; prevCount - 1)&#125;&gt;-&lt;/</span>button&gt;</span><br><span class="line">      &lt;button onClick=&#123;() =&gt; setCount(<span class="function"><span class="params">prevCount</span> =&gt;</span> prevCount + <span class="number">1</span>)&#125;&gt;+&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，我们传入 <code>setCount</code> 的是一个函数，<strong>它的参数是之前的状态，返回的是新的状态</strong>。熟悉 Redux 的朋友马上就指出来了：这其实就是一个 <span class="exturl" data-url="aHR0cHM6Ly9yZWR1eC5qcy5vcmcvYmFzaWNzL3JlZHVjZXJz" title="https://redux.js.org/basics/reducers">Reducer 函数<i class="fa fa-external-link"></i></span>。</p><h3 id="Reducer-函数的前生今世"><a href="#Reducer-函数的前生今世" class="headerlink" title="Reducer 函数的前生今世"></a>Reducer 函数的前生今世</h3><p>Redux 文档里面已经详细地阐述了 <span class="exturl" data-url="aHR0cHM6Ly9yZWR1eC5qcy5vcmcvYmFzaWNzL3JlZHVjZXJz" title="https://redux.js.org/basics/reducers">Reducer 函数<i class="fa fa-external-link"></i></span>，但是我们这里将先回归最基础的概念，暂时忘掉框架相关的知识。在学习 JavaScript 基础时，你应该接触过数组的 <code>reduce</code> 方法，它可以用一种相当炫酷的方式实现数组求和：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> nums = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="keyword">const</span> value = nums.reduce(<span class="function">(<span class="params">acc, next</span>) =&gt;</span> acc + next, <span class="number">0</span>)</span><br></pre></td></tr></table></figure><p>其中 <code>reduce</code> 的第一个参数 <code>(acc, next) =&gt; acc + next</code> 就是一个 Reducer 函数。从表面上来看，这个函数接受一个状态的累积值 <code>acc</code> 和新的值 <code>next</code>，然后返回更新过后的累积值 <code>acc + next</code>。从更深层次来说，Reducer 函数有<strong>两个必要规则</strong>：</p><ul><li>只返回一个值</li><li>不修改输入值，而是返回新的值</li></ul><p>第一点很好判断，其中第二点则是很多新手踩过的坑，对比以下两个函数：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不是 Reducer 函数！</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">buy</span>(<span class="params">cart, thing</span>) </span>&#123;</span><br><span class="line">  cart.push(thing);</span><br><span class="line">  <span class="keyword">return</span> cart;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 正宗的 Reducer 函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">buy</span>(<span class="params">cart, thing</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> cart.concat(thing);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面的函数调用了数组的 <code>push</code> 方法，会<strong>就地修改</strong>输入的 <code>cart</code> 参数（是否 <code>return</code> 都无所谓了），违反了 Reducer 第二条规则，而下面的函数通过数组的 <code>concat</code> 方法返回了一个<strong>全新的数组</strong>，避免了直接修改 <code>cart</code> 。</p><p>我们回过头来看之前 <code>useState</code> 的函数式更新写法：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">setCount(<span class="function"><span class="params">prevCount</span> =&gt;</span> prevCount + <span class="number">1</span>);</span><br></pre></td></tr></table></figure><p>是不是一个很标准的 Reducer？</p><h3 id="最熟悉的陌生人"><a href="#最熟悉的陌生人" class="headerlink" title="最熟悉的陌生人"></a>最熟悉的陌生人</h3><p>我们在前两篇教程中大量地使用了 <code>useState</code>，你可能就此认为 <code>useState</code> 应该是最底层的<strong>元素</strong>了。但实际上在 React 的源码中，<code>useState</code> 的实现使用了 <code>useReducer</code>（本文的主角，下面会讲到）。在 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2ZhY2Vib29rL3JlYWN0L2Jsb2IvdjE2LjEzLjEvcGFja2FnZXMvcmVhY3QtcmVjb25jaWxlci9zcmMvUmVhY3RGaWJlckhvb2tzLmpzI0w2MjM=" title="https://github.com/facebook/react/blob/v16.13.1/packages/react-reconciler/src/ReactFiberHooks.js#L623">React 源码<i class="fa fa-external-link"></i></span>中有这么一个关键的函数 <code>basicStateReducer</code>（去掉了源码中的 <span class="exturl" data-url="aHR0cHM6Ly9mbG93Lm9yZy8=" title="https://flow.org/">Flow<i class="fa fa-external-link"></i></span> 类型定义）：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">basicStateReducer</span>(<span class="params">state, action</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">typeof</span> action === <span class="string">'function'</span> ? action(state) : action;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>于是，当我们通过 <code>setCount(prevCount =&gt; prevCount + 1)</code> 改变状态时，传入的 <code>action</code> 就是一个 Reducer 函数，然后调用该函数并传入当前的 <code>state</code>，得到更新后的状态。而我们之前通过传入具体的值修改状态时（例如 <code>setCount(5)</code>），由于不是函数，所以直接取传入的值作为更新后的状态。</p><div class="note info">            <p><strong>提示</strong></p><p>这里选取的是 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2ZhY2Vib29rL3JlYWN0L3RyZWUvdjE2LjEzLjE=" title="https://github.com/facebook/react/tree/v16.13.1">React v16.13.1<i class="fa fa-external-link"></i></span> 的源码，但是整体的实现应该已经趋于稳定，原理上不会相差太多。</p>          </div><p>听上去还是有点迷迷糊糊？又到了我们的动画环节。首先，我们传入的 <code>action</code> 是一个具体的值：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171ea21745699e22.gif"></p><p>当传入 Setter 的是一个 Reducer 函数的时候：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171ea21748b2582f.gif"></p><p>是不是一下子就豁然开朗了？</p><h3 id="实战环节"><a href="#实战环节" class="headerlink" title="实战环节"></a>实战环节</h3><p>这一步要写的代码比较多（可自行复制粘贴哈），我们要实现如下图所示的历史趋势图展示效果：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171ea21749423be5.png"></p><p>注意到我们展示了三个历史趋势（确诊病例 Cases、死亡病例 Deaths 和治愈病例 Recovered），并且每张历史趋势图可以调节过去的天数（从 0 到 30 天）。</p><h4 id="实现历史趋势图"><a href="#实现历史趋势图" class="headerlink" title="实现历史趋势图"></a>实现历史趋势图</h4><p>首先，让我们来实现历史曲线图 <code>HistoryChart</code> 组件。创建 <code>src/components/HistoryChart.js</code> 组件，代码如下：</p><figure class="highlight js"><figcaption><span>src/components/HistoryChart.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzMwNTBhYTdhMTc0OTBiZGM5NDU3MjliODcwNDc1ZTcxN2IzN2YyNDcvc3JjL2NvbXBvbmVudHMvSGlzdG9yeUNoYXJ0Lmpz" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/3050aa7a17490bdc945729b870475e717b37f247/src/components/HistoryChart.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  AreaChart,</span><br><span class="line">  CartesianGrid,</span><br><span class="line">  XAxis,</span><br><span class="line">  YAxis,</span><br><span class="line">  Tooltip,</span><br><span class="line">  Area,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">"recharts"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> TITLE2COLOR = &#123;</span><br><span class="line">  Cases: <span class="string">"#D0021B"</span>,</span><br><span class="line">  Deaths: <span class="string">"#4A4A4A"</span>,</span><br><span class="line">  Recovered: <span class="string">"#09C79C"</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">HistoryChart</span>(<span class="params">&#123; title, data, lastDays, onLastDaysChange &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> colorKey = <span class="string">`color<span class="subst">$&#123;title&#125;</span>`</span>;</span><br><span class="line">  <span class="keyword">const</span> color = TITLE2COLOR[title];</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;AreaChart</span><br><span class="line">        width=&#123;<span class="number">400</span>&#125;</span><br><span class="line">        height=&#123;<span class="number">150</span>&#125;</span><br><span class="line">        data=&#123;data.slice(-lastDays)&#125;</span><br><span class="line">        margin=&#123;&#123; <span class="attr">top</span>: <span class="number">10</span>, <span class="attr">right</span>: <span class="number">30</span>, <span class="attr">left</span>: <span class="number">10</span>, <span class="attr">bottom</span>: <span class="number">0</span> &#125;&#125;</span><br><span class="line">      &gt;</span><br><span class="line">        &lt;defs&gt;</span><br><span class="line">          &lt;linearGradient id=&#123;colorKey&#125; x1=<span class="string">'0'</span> y1=<span class="string">'0'</span> x2=<span class="string">'0'</span> y2=<span class="string">'1'</span>&gt;</span><br><span class="line">            &lt;stop offset=<span class="string">'5%'</span> stopColor=&#123;color&#125; stopOpacity=&#123;<span class="number">0.8</span>&#125; /&gt;</span><br><span class="line">            &lt;stop offset=<span class="string">'95%'</span> stopColor=&#123;color&#125; stopOpacity=&#123;<span class="number">0</span>&#125; /&gt;</span><br><span class="line">          &lt;<span class="regexp">/linearGradient&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>defs&gt;</span><br><span class="line">        &lt;XAxis dataKey=<span class="string">'time'</span> /&gt;</span><br><span class="line">        &lt;YAxis /&gt;</span><br><span class="line">        &lt;CartesianGrid strokeDasharray=<span class="string">'3 3'</span> /&gt;</span><br><span class="line">        &lt;Tooltip /&gt;</span><br><span class="line">        &lt;Area</span><br><span class="line">          type=<span class="string">'monotone'</span></span><br><span class="line">          dataKey=<span class="string">'number'</span></span><br><span class="line">          stroke=&#123;color&#125;</span><br><span class="line">          fillOpacity=&#123;<span class="number">1</span>&#125;</span><br><span class="line">          fill=&#123;<span class="string">`url(#<span class="subst">$&#123;colorKey&#125;</span>)`</span>&#125;</span><br><span class="line">        /&gt;</span><br><span class="line">      &lt;<span class="regexp">/AreaChart&gt;</span></span><br><span class="line"><span class="regexp">      &lt;h3&gt;&#123;title&#125;&lt;/</span>h3&gt;</span><br><span class="line">      &lt;input</span><br><span class="line">        type=<span class="string">'range'</span></span><br><span class="line">        min=<span class="string">'1'</span></span><br><span class="line">        max=<span class="string">'30'</span></span><br><span class="line">        value=&#123;lastDays&#125;</span><br><span class="line">        onChange=&#123;onLastDaysChange&#125;</span><br><span class="line">      /&gt;</span><br><span class="line">      Last &#123;lastDays&#125; days</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default HistoryChart;</span></span><br></pre></td></tr></table></figure><p>这里我们使用了 <span class="exturl" data-url="aHR0cDovL3JlY2hhcnRzLm9yZy8=" title="http://recharts.org/">Recharts<i class="fa fa-external-link"></i></span> 的 <span class="exturl" data-url="aHR0cDovL3JlY2hhcnRzLm9yZy9lbi1VUy9hcGkvQXJlYUNoYXJ0" title="http://recharts.org/en-US/api/AreaChart">AreaChart<i class="fa fa-external-link"></i></span> 组件来绘制历史趋势图，然后在图表下方添加了一个范围拖动条，能够让用户选择查看过去 1 到 30 天的历史趋势。</p><p><code>HistoryChart</code> 组件包含以下 Props：</p><ul><li><code>title</code> 是图表标题</li><li><code>data</code> 就是绘制图表需要的历史数据</li><li><code>lastDays</code> 是显示过去 N 天的数据，可以通过 <code>data.slice(-lastDays)</code> 进行选择</li><li><code>onLastDaysChange</code> 是用户通过 <code>input</code> 修改处理过去 N 天时的事件处理函数</li></ul><p>接着，我们需要一个辅助函数来对历史数据进行一些转换处理。NovelCOVID 19 API 返回的历史数据是一个对象：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">"3/28/20"</span>: <span class="number">81999</span>,</span><br><span class="line">  <span class="string">"3/29/20"</span>: <span class="number">82122</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>为了能够适应 Recharts 的数据格式，我们希望转换成数组格式：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">[</span><br><span class="line">  &#123;</span><br><span class="line">    time: <span class="string">"3/28/20"</span>,</span><br><span class="line">    number: <span class="number">81999</span></span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    time: <span class="string">"3/29/20"</span>,</span><br><span class="line">    number: <span class="number">82122</span></span><br><span class="line">  &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure><p>这个可以通过 <code>Object.entries</code> 很方便地进行转换。我们创建 <code>src/utils.js</code> 文件，实现 <code>transformHistory</code> 函数，代码如下：</p><figure class="highlight js"><figcaption><span>src/utils.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzMwNTBhYTdhMTc0OTBiZGM5NDU3MjliODcwNDc1ZTcxN2IzN2YyNDcvc3JjL3V0aWxzLmpz" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/3050aa7a17490bdc945729b870475e717b37f247/src/utils.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">transformHistory</span>(<span class="params">timeline = &#123;&#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.entries(timeline).map(<span class="function">(<span class="params">entry</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> [time, number] = entry;</span><br><span class="line">    <span class="keyword">return</span> &#123; time, number &#125;;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>接着我们来实现历史趋势图组 <code>HistoryChartGroup</code>，包含三个图表：确诊病例（Cases）、死亡人数（Deaths）和治愈病例（Recovered）。创建 <code>src/components/HistoryChartGroup.js</code>，代码如下：</p><figure class="highlight js"><figcaption><span>src/components/HistoryChartGroup.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzMwNTBhYTdhMTc0OTBiZGM5NDU3MjliODcwNDc1ZTcxN2IzN2YyNDcvc3JjL2NvbXBvbmVudHMvSGlzdG9yeUNoYXJ0R3JvdXAuanM=" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/3050aa7a17490bdc945729b870475e717b37f247/src/components/HistoryChartGroup.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; useState &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> HistoryChart <span class="keyword">from</span> <span class="string">"./HistoryChart"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; transformHistory &#125; <span class="keyword">from</span> <span class="string">"../utils"</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">HistoryChartGroup</span>(<span class="params">&#123; history = &#123;&#125; &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [lastDays, setLastDays] = useState(&#123;</span><br><span class="line">    cases: <span class="number">30</span>,</span><br><span class="line">    deaths: <span class="number">30</span>,</span><br><span class="line">    recovered: <span class="number">30</span>,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleLastDaysChange</span>(<span class="params">e, key</span>) </span>&#123;</span><br><span class="line">    setLastDays(<span class="function">(<span class="params">prev</span>) =&gt;</span> (&#123; ...prev, [key]: e.target.value &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div className=<span class="string">'history-group'</span>&gt;</span><br><span class="line">      &lt;HistoryChart</span><br><span class="line">        title=<span class="string">'Cases'</span></span><br><span class="line">        data=&#123;transformHistory(history.cases)&#125;</span><br><span class="line">        lastDays=&#123;lastDays.cases&#125;</span><br><span class="line">        onLastDaysChange=&#123;(e) =&gt; handleLastDaysChange(e, <span class="string">"cases"</span>)&#125;</span><br><span class="line">      /&gt;</span><br><span class="line">      &lt;HistoryChart</span><br><span class="line">        title=<span class="string">'Deaths'</span></span><br><span class="line">        data=&#123;transformHistory(history.deaths)&#125;</span><br><span class="line">        lastDays=&#123;lastDays.deaths&#125;</span><br><span class="line">        onLastDaysChange=&#123;(e) =&gt; handleLastDaysChange(e, <span class="string">"deaths"</span>)&#125;</span><br><span class="line">      /&gt;</span><br><span class="line">      &lt;HistoryChart</span><br><span class="line">        title=<span class="string">'Recovered'</span></span><br><span class="line">        data=&#123;transformHistory(history.recovered)&#125;</span><br><span class="line">        lastDays=&#123;lastDays.recovered&#125;</span><br><span class="line">        onLastDaysChange=&#123;(e) =&gt; handleLastDaysChange(e, <span class="string">"recovered"</span>)&#125;</span><br><span class="line">      /&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default HistoryChartGroup;</span></span><br></pre></td></tr></table></figure><h4 id="调整-CountriesChart-组件"><a href="#调整-CountriesChart-组件" class="headerlink" title="调整 CountriesChart 组件"></a>调整 CountriesChart 组件</h4><p>我们需要稍微调整一下 <code>CountriesChart</code> 组件，使得用户在点击一个国家的数据后，能够展示对应的历史趋势图。打开 <code>src/components/CountriesChart.js</code>，添加一个 <code>onClick</code> Prop，并传入 <code>BarChart</code> 中，如下面的代码所示：</p><figure class="highlight js"><figcaption><span>src/components/CountriesChart.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzMwNTBhYTdhMTc0OTBiZGM5NDU3MjliODcwNDc1ZTcxN2IzN2YyNDcvc3JjL2NvbXBvbmVudHMvQ291bnRyaWVzQ2hhcnQuanM=" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/3050aa7a17490bdc945729b870475e717b37f247/src/components/CountriesChart.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="function"><span class="keyword">function</span> <span class="title">CountriesChart</span>(<span class="params">&#123; data, dataKey &#125;</span>) </span>&#123;</span><br><span class="line">[tuture-add]<span class="function"><span class="keyword">function</span> <span class="title">CountriesChart</span>(<span class="params">&#123; data, dataKey, onClick &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;BarChart</span><br><span class="line">      width=&#123;<span class="number">1200</span>&#125;</span><br><span class="line">      height=&#123;<span class="number">250</span>&#125;</span><br><span class="line">      style=&#123;&#123; <span class="attr">margin</span>: <span class="string">"auto"</span> &#125;&#125;</span><br><span class="line">      margin=&#123;&#123; <span class="attr">top</span>: <span class="number">30</span>, <span class="attr">left</span>: <span class="number">20</span>, <span class="attr">right</span>: <span class="number">30</span> &#125;&#125;</span><br><span class="line">      data=&#123;data&#125;</span><br><span class="line">[tuture-add]      onClick=&#123;onClick&#125;</span><br><span class="line">    &gt;</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">    &lt;<span class="regexp">/BarChart&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ ...</span></span><br></pre></td></tr></table></figure><h4 id="在根组件中集成"><a href="#在根组件中集成" class="headerlink" title="在根组件中集成"></a>在根组件中集成</h4><p>最后，我们调整根组件，把之前实现的历史趋势图和修改后的 <code>CountriesChart</code> 集成到应用中。打开 <code>src/App.js</code>，代码如下：</p><figure class="highlight js"><figcaption><span>src/App.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzMwNTBhYTdhMTc0OTBiZGM5NDU3MjliODcwNDc1ZTcxN2IzN2YyNDcvc3JjL0FwcC5qcw==" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/3050aa7a17490bdc945729b870475e717b37f247/src/App.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> HistoryChartGroup <span class="keyword">from</span> <span class="string">"./components/HistoryChartGroup"</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [country, setCountry] = useState(<span class="literal">null</span>);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> history = useCoronaAPI(<span class="string">`/historical/<span class="subst">$&#123;country&#125;</span>`</span>, &#123;</span><br><span class="line">[tuture-add]    initialData: &#123;&#125;,</span><br><span class="line">[tuture-add]    converter: <span class="function">(<span class="params">data</span>) =&gt;</span> data.timeline,</span><br><span class="line">[tuture-add]  &#125;);</span><br><span class="line">[tuture-add] </span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div className=<span class="string">'App'</span>&gt;</span><br><span class="line">      &lt;h1&gt;COVID<span class="number">-19</span>&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">      &lt;GlobalStats stats=&#123;globalStats&#125; /</span>&gt;</span><br><span class="line">      &lt;SelectDataKey onChange=&#123;(e) =&gt; setKey(e.target.value)&#125; /&gt;</span><br><span class="line">[tuture-del]      &lt;CountriesChart data=&#123;countries&#125; dataKey=&#123;key&#125; /&gt;</span><br><span class="line">[tuture-add]      &lt;CountriesChart</span><br><span class="line">[tuture-add]        data=&#123;countries&#125;</span><br><span class="line">[tuture-add]        dataKey=&#123;key&#125;</span><br><span class="line">[tuture-add]        onClick=&#123;(payload) =&gt; setCountry(payload.activeLabel)&#125;</span><br><span class="line">[tuture-add]      /&gt;</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]      &#123;country ? (</span><br><span class="line">[tuture-add]        &lt;&gt;</span><br><span class="line">[tuture-add]          &lt;h2&gt;History <span class="keyword">for</span> &#123;country&#125;&lt;<span class="regexp">/h2&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]          &lt;HistoryChartGroup history=&#123;history&#125; /</span>&gt;</span><br><span class="line">[tuture-add]        &lt;<span class="regexp">/&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]      ) : (</span></span><br><span class="line"><span class="regexp">[tuture-add]        &lt;h2&gt;Click on a country to show its history.&lt;/</span>h2&gt;</span><br><span class="line">[tuture-add]      )&#125;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default App;</span></span><br></pre></td></tr></table></figure><div class="note success">            <p><strong>成功</strong></p><p>写完之后开启项目，点击直方图中的任意一个国家，就会展示该国家的历史趋势图（累计确诊、死亡病例、治愈病例），我们还可以随意调节过去的天数。</p>          </div><p>虽然现在我们的应用已经初步成型，但回过头来看代码，发现组件的状态和修改状态的逻辑散落在各个组件中，后面维护和实现新功能时无疑会遇到很大的困难，这时候就需要做专门的状态管理了。熟悉 React 开发的同学一定知道 <span class="exturl" data-url="aHR0cHM6Ly9yZWR1eC5qcy5vcmcv" title="https://redux.js.org/">Redux<i class="fa fa-external-link"></i></span> 或者 <span class="exturl" data-url="aHR0cHM6Ly9tb2J4LmpzLm9yZy9SRUFETUUuaHRtbA==" title="https://mobx.js.org/README.html">MobX<i class="fa fa-external-link"></i></span> 这样的库，不过借助 React Hooks，我们可以自己轻松地实现一个轻量级的状态管理解决方案。</p><h2 id="useReducer-useContext：呼风唤雨"><a href="#useReducer-useContext：呼风唤雨" class="headerlink" title="useReducer + useContext：呼风唤雨"></a>useReducer + useContext：呼风唤雨</h2><p>在之前我们说过，这篇文章将通过 React Hooks 来实现一个轻量级的、类似 Redux 的状态管理模型。不过在此之前，我们先简单地过一遍 Redux 的基本思想（熟悉的同学可以直接跳过哈）。</p><h3 id="Redux-基本思想"><a href="#Redux-基本思想" class="headerlink" title="Redux 基本思想"></a>Redux 基本思想</h3><p>之前，应用的状态（例如我们应用中当前国家、历史数据等等）散落在各个组件中，大概就像这样：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171ea2174b697c8c.png"></p><p>可以看到，每个组件都有自己的 State（状态）和 State Setter（状态修改函数），这意味着跨组件的状态读取和修改是相当麻烦的。而 Redux 的核心思想之一就是将状态放到<strong>唯一的全局对象</strong>（一般称为 Store）中，而修改状态则是调用对应的 Reducer 函数去更新 Store 中的状态，大概就像这样：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171ea2174c5ae3d4.gif"></p><p>上面这个动画描述的是组件 A 改变 B 和 C 中状态的过程：</p><ul><li>三个组件挂载时，从 Store 中<strong>获取并订阅</strong>相应的状态数据并展示（注意是<strong>只读</strong>的，不能直接修改）</li><li>用户点击组件 A，触发事件监听函数</li><li>监听函数中派发（Dispatch）对应的动作（Action），传入 Reducer 函数</li><li>Reducer 函数返回更新后的状态，并以此更新 Store</li><li>由于组件 B 和 C 订阅了 Store 的状态，所以重新获取更新后的状态并调整 UI</li></ul><div class="note info">            <p><strong>提示</strong></p><p>这篇教程不会详细地讲解 Redux，想要深入学习的同学可以阅读我们的<a href="https://tuture.co/2019/11/28/1fe175a/">《Redux 包教包会》</a>系列教程。</p>          </div><h3 id="useReducer-使用浅析"><a href="#useReducer-使用浅析" class="headerlink" title="useReducer 使用浅析"></a>useReducer 使用浅析</h3><p>首先，我们还是来看下官方介绍的 <code>useReducer</code> 使用方法：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> [state, dispatch] = useReducer(reducer, initialArg, init);</span><br></pre></td></tr></table></figure><p>首先我们来看下 <code>useReducer</code> 需要提供哪些参数：</p><ol><li>第一个参数 <code>reducer</code> 显然是必须的，它的形式跟 Redux 中的 Reducer 函数完全一致，即 <code>(state, action) =&gt; newState</code>。</li><li>第二个参数 <code>initialArg</code> 就是状态的初始值。</li><li>第三个参数 <code>init</code> 是一个可选的用于<strong>懒初始化</strong>（Lazy Initialization）的函数，这个函数返回初始化后的状态。</li></ol><p>返回的 <code>state</code>（只读状态）和 <code>dispatch</code>（派发函数）则比较容易理解了。我们来结合一个简单的计数器例子讲解一下：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Reducer 函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">reducer</span>(<span class="params">state, action</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">switch</span> (action.type) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'increment'</span>:</span><br><span class="line">      <span class="keyword">return</span> &#123; <span class="attr">count</span>: state.count + <span class="number">1</span> &#125;;</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Counter</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [state, dispatch] = useReducer(reducer, &#123; <span class="attr">count</span>: <span class="number">0</span> &#125;);</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;&gt;</span><br><span class="line">      Count: &#123;state.count&#125;</span><br><span class="line">      &lt;button onClick=&#123;() =&gt; dispatch(&#123; <span class="attr">type</span>: <span class="string">'increment'</span> &#125;)&#125;&gt;+&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>我们首先关注一下 Reducer 函数，它的两个参数 <code>state</code> 和 <code>action</code> 分别是当前状态和 <code>dispatch</code> 派发的动作。这里的动作就是普通的 JavaScript 对象，用来表示修改状态的操作，注意 <code>type</code> 是必须要有的属性，代表<strong>动作的类型</strong>。然后我们根据 <code>action</code> 的类型返回相应修改后的新状态。</p><p>然后在 <code>Counter</code> 组件中，我们通过 <code>useReducer</code> 钩子获取到了状态和 <code>dispatch</code> 函数，然后把这个状态渲染出来。在按钮 <code>button</code> 的 <code>onClick</code> 回调函数中，我们通过 <code>dispatch</code> 一个类型为 <code>increment</code> 的 Action 去更新状态。</p><p>天哪，为什么一个简单的计数器都搞得这么复杂！简简单单一个 <code>useState</code> 不就搞定了吗？</p><h3 id="什么时候该用-useReducer"><a href="#什么时候该用-useReducer" class="headerlink" title="什么时候该用 useReducer"></a>什么时候该用 useReducer</h3><p>你也许发现，<code>useReducer</code> 和 <code>useState</code> 的使用目的几乎是一样的：<strong>定义状态和修改状态的逻辑</strong>。<code>useReducer</code> 使用起来较为繁琐，但如果你的状态管理出现了至少一个以下所列举的问题：</p><ul><li>需要维护的状态本身比较复杂，多个状态之间相互依赖</li><li>修改状态的过程比较复杂</li></ul><p>那么我们就强烈建议你使用 <code>useReducer</code> 了。我们来通过一个实际的案例讲解来感受一下 <code>useReducer</code> 的威力（这次不是无聊的计数器啦）。假设我们要做一个支持<em>撤销</em>和<em>重做</em>的编辑器，它的 <code>init</code> 函数和 Reducer 函数分别如下：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 用于懒初始化的函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">init</span>(<span class="params">initialState</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    past: [],</span><br><span class="line">    present: initialState,</span><br><span class="line">    future: [],</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Reducer 函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">reducer</span>(<span class="params">state, action</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; past, future, present &#125; = state;</span><br><span class="line">  <span class="keyword">switch</span> (action.type) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'UNDO'</span>:</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        past: past.slice(<span class="number">0</span>, past.length - <span class="number">1</span>),</span><br><span class="line">        present: past[past.length - <span class="number">1</span>],</span><br><span class="line">        future: [present, ...future],</span><br><span class="line">      &#125;;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'REDO'</span>:</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        past: [...past, present],</span><br><span class="line">        present: future[<span class="number">0</span>],</span><br><span class="line">        future: future.slice(<span class="number">1</span>),</span><br><span class="line">      &#125;;</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">return</span> state;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>试试看用 <code>useState</code> 去写，会不会很复杂？</p><h3 id="useContext-使用浅析"><a href="#useContext-使用浅析" class="headerlink" title="useContext 使用浅析"></a>useContext 使用浅析</h3><p>现在状态的获取和修改都已经通过 <code>useReducer</code> 搞定了，那么只差一个问题：怎么让所有组件都能获取到 <code>dispatch</code> 函数呢？</p><p>在 Hooks 诞生之前，React 已经有了在组件树中共享数据的解决方案：<span class="exturl" data-url="aHR0cHM6Ly96aC1oYW5zLnJlYWN0anMub3JnL2RvY3MvY29udGV4dC5odG1s" title="https://zh-hans.reactjs.org/docs/context.html">Context<i class="fa fa-external-link"></i></span>。在类组件中，我们可以通过 <code>Class.contextType</code> 属性获取到最近的 Context Provider，那么在函数式组件中，我们该怎么获取呢？答案就是 <code>useContext</code> 钩子。使用起来非常简单：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 在某个文件中定义 MyContext</span></span><br><span class="line"><span class="keyword">const</span> MyContext = React.createContext(<span class="string">'hello'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在函数式组件中获取 Context</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Component</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> value = useContext(MyContext);</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>通过 <code>useContext</code> ，我们就可以轻松地让所有组件都能获取到 <code>dispatch</code> 函数了！</p><h3 id="实战环节-1"><a href="#实战环节-1" class="headerlink" title="实战环节"></a>实战环节</h3><h4 id="设计中心状态"><a href="#设计中心状态" class="headerlink" title="设计中心状态"></a>设计中心状态</h4><p>好的，让我们开始用 useReducer + useContext 的组合来重构应用的状态管理。按照状态中心化的原则，我们把整个应用的状态提取到一个全局对象中。初步设计（TypeScript 类型定义）如下：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">type</span> AppState &#123;</span><br><span class="line">  <span class="comment">// 数据指标类别</span></span><br><span class="line">  key: <span class="string">"cases"</span> | <span class="string">"deaths"</span> | <span class="string">"recovered"</span>;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 当前国家</span></span><br><span class="line">  country: <span class="built_in">string</span> | <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 过去天数</span></span><br><span class="line">  lastDays: &#123;</span><br><span class="line">    cases: <span class="built_in">number</span>;</span><br><span class="line">    deaths: <span class="built_in">number</span>;</span><br><span class="line">    recovered: <span class="built_in">number</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h4 id="在根组件中定义-Reducer-和-Dispatch-Context"><a href="#在根组件中定义-Reducer-和-Dispatch-Context" class="headerlink" title="在根组件中定义 Reducer 和 Dispatch Context"></a>在根组件中定义 Reducer 和 Dispatch Context</h4><p>这一次我们按照<strong>自顶向下</strong>的顺序，先在根组件 <code>App</code> 中配置好所有需要的 Reducer 以及 Dispatch 上下文。打开 <code>src/App.js</code> ，修改代码如下：</p><figure class="highlight js"><figcaption><span>src/App.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzFjNjFkOGQzNmRiNmMxZjA0YjQyMTQyODhlMjRjNzA1N2VhZTJjNmUvc3JjL0FwcC5qcw==" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/1c61d8d36db6c1f04b4214288e24c7057eae2c6e/src/App.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> React, &#123; useState &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> React, &#123; useReducer &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">[tuture-add]<span class="keyword">const</span> initialState = &#123;</span><br><span class="line">[tuture-add]  key: <span class="string">"cases"</span>,</span><br><span class="line">[tuture-add]  country: <span class="literal">null</span>,</span><br><span class="line">[tuture-add]  lastDays: &#123;</span><br><span class="line">[tuture-add]    cases: <span class="number">30</span>,</span><br><span class="line">[tuture-add]    deaths: <span class="number">30</span>,</span><br><span class="line">[tuture-add]    recovered: <span class="number">30</span>,</span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]&#125;;</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]<span class="function"><span class="keyword">function</span> <span class="title">reducer</span>(<span class="params">state, action</span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">switch</span> (action.type) &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">case</span> <span class="string">"SET_KEY"</span>:</span><br><span class="line">[tuture-add]      <span class="keyword">return</span> &#123; ...state, <span class="attr">key</span>: action.key &#125;;</span><br><span class="line">[tuture-add]    <span class="keyword">case</span> <span class="string">"SET_COUNTRY"</span>:</span><br><span class="line">[tuture-add]      <span class="keyword">return</span> &#123; ...state, <span class="attr">country</span>: action.country &#125;;</span><br><span class="line">[tuture-add]    <span class="keyword">case</span> <span class="string">"SET_LASTDAYS"</span>:</span><br><span class="line">[tuture-add]      <span class="keyword">return</span> &#123;</span><br><span class="line">[tuture-add]        ...state,</span><br><span class="line">[tuture-add]        lastDays: &#123; ...state.lastDays, [action.key]: action.days &#125;,</span><br><span class="line">[tuture-add]      &#125;;</span><br><span class="line">[tuture-add]    <span class="keyword">default</span>:</span><br><span class="line">[tuture-add]      <span class="keyword">return</span> state;</span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line">[tuture-add]&#125;</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]<span class="comment">// 用于传递 dispatch 的 React Context</span></span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">const</span> AppDispatch = React.createContext(<span class="literal">null</span>);</span><br><span class="line">[tuture-add] </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [state, dispatch] = useReducer(reducer, initialState);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> &#123; key, country, lastDays &#125; = state;</span><br><span class="line">[tuture-add] </span><br><span class="line">  <span class="keyword">const</span> globalStats = useCoronaAPI(<span class="string">"/all"</span>, &#123;</span><br><span class="line">    initialData: &#123;&#125;,</span><br><span class="line">    refetchInterval: <span class="number">5000</span>,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">[tuture-del]  <span class="keyword">const</span> [key, setKey] = useState(<span class="string">"cases"</span>);</span><br><span class="line">  <span class="keyword">const</span> countries = useCoronaAPI(<span class="string">`/countries?sort=<span class="subst">$&#123;key&#125;</span>`</span>, &#123;</span><br><span class="line">    initialData: [],</span><br><span class="line">    converter: <span class="function">(<span class="params">data</span>) =&gt;</span> data.slice(<span class="number">0</span>, <span class="number">10</span>),</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">[tuture-del]  <span class="keyword">const</span> [country, setCountry] = useState(<span class="literal">null</span>);</span><br><span class="line">  <span class="keyword">const</span> history = useCoronaAPI(<span class="string">`/historical/<span class="subst">$&#123;country&#125;</span>`</span>, &#123;</span><br><span class="line">    initialData: &#123;&#125;,</span><br><span class="line">    converter: <span class="function">(<span class="params">data</span>) =&gt;</span> data.timeline,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">[tuture-del]    &lt;div className=<span class="string">'App'</span>&gt;</span><br><span class="line">[tuture-del]      &lt;h1&gt;COVID<span class="number">-19</span>&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]      &lt;GlobalStats stats=&#123;globalStats&#125; /</span>&gt;</span><br><span class="line">[tuture-del]      &lt;SelectDataKey onChange=&#123;(e) =&gt; setKey(e.target.value)&#125; /&gt;</span><br><span class="line">[tuture-del]      &lt;CountriesChart</span><br><span class="line">[tuture-del]        data=&#123;countries&#125;</span><br><span class="line">[tuture-del]        dataKey=&#123;key&#125;</span><br><span class="line">[tuture-del]        onClick=&#123;(payload) =&gt; setCountry(payload.activeLabel)&#125;</span><br><span class="line">[tuture-del]      /&gt;</span><br><span class="line">[tuture-del] </span><br><span class="line">[tuture-del]      &#123;country ? (</span><br><span class="line">[tuture-del]        &lt;&gt;</span><br><span class="line">[tuture-del]          &lt;h2&gt;History <span class="keyword">for</span> &#123;country&#125;&lt;<span class="regexp">/h2&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]          &lt;HistoryChartGroup history=&#123;history&#125; /</span>&gt;</span><br><span class="line">[tuture-del]        &lt;<span class="regexp">/&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]      ) : (</span></span><br><span class="line"><span class="regexp">[tuture-del]        &lt;h2&gt;Click on a country to show its history.&lt;/</span>h2&gt;</span><br><span class="line">[tuture-del]      )&#125;</span><br><span class="line">[tuture-del]    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]    &lt;AppDispatch.Provider value=&#123;dispatch&#125;&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]      &lt;div className='App'&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]        &lt;h1&gt;COVID-19&lt;/</span>h1&gt;</span><br><span class="line">[tuture-add]        &lt;GlobalStats stats=&#123;globalStats&#125; /&gt;</span><br><span class="line">[tuture-add]        &lt;SelectDataKey /&gt;</span><br><span class="line">[tuture-add]        &lt;CountriesChart data=&#123;countries&#125; dataKey=&#123;key&#125; /&gt;</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]        &#123;country ? (</span><br><span class="line">[tuture-add]          &lt;&gt;</span><br><span class="line">[tuture-add]            &lt;h2&gt;History <span class="keyword">for</span> &#123;country&#125;&lt;<span class="regexp">/h2&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]            &lt;HistoryChartGroup history=&#123;history&#125; lastDays=&#123;lastDays&#125; /</span>&gt;</span><br><span class="line">[tuture-add]          &lt;<span class="regexp">/&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]        ) : (</span></span><br><span class="line"><span class="regexp">[tuture-add]          &lt;h2&gt;Click on a country to show its history.&lt;/</span>h2&gt;</span><br><span class="line">[tuture-add]        )&#125;</span><br><span class="line">[tuture-add]      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]    &lt;/</span>AppDispatch.Provider&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App;</span><br></pre></td></tr></table></figure><p>我们来一一分析上面的代码变化：</p><ol><li>首先定义了整个应用的初始状态 <code>initialState</code>，这个是后面 <code>useReducer</code> 钩子所需要的</li><li>然后我们定义了 Reducer 函数，主要响应三个 Action：<code>SET_KEY</code> 、<code>SET_COUNTRY</code> 和 <code>SET_LASTDAYS</code> ，分别用于修改数据指标、国家和过去天数这三个状态</li><li>定义了 <code>AppDispatch</code> 这个 Context，用来向子组件传递 <code>dispatch</code> </li><li>调用 <code>useReducer</code> 钩子，获取到状态 <code>state</code> 和分发函数 <code>dispatch</code> </li><li>最后在渲染时用 <code>AppDispatch.Provider</code> 将整个应用包裹起来，传入 <code>dispatch</code> ，使子组件都能获取得到</li></ol><h4 id="在子组件中通过-Dispatch-修改状态"><a href="#在子组件中通过-Dispatch-修改状态" class="headerlink" title="在子组件中通过 Dispatch 修改状态"></a>在子组件中通过 Dispatch 修改状态</h4><p>现在子组件的所有状态都已经提取到了根组件中，而子组件唯一要做的就是在响应用户事件时通过 <code>dispatch</code> 去修改中心状态。思路非常简单：</p><ul><li>先通过 <code>useContext</code> 获取到 <code>App</code> 组件传下来的 <code>dispatch</code> </li><li>调用 <code>dispatch</code> ，发起相应的动作（Action）</li></ul><p>OK，让我们开始动手吧。打开 <code>src/components/CountriesChart.js</code> ，修改代码如下：</p><figure class="highlight js"><figcaption><span>src/components/CountriesChart.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzFjNjFkOGQzNmRiNmMxZjA0YjQyMTQyODhlMjRjNzA1N2VhZTJjNmUvc3JjL2NvbXBvbmVudHMvQ291bnRyaWVzQ2hhcnQuanM=" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/1c61d8d36db6c1f04b4214288e24c7057eae2c6e/src/components/CountriesChart.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> React, &#123; useContext &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; AppDispatch &#125; <span class="keyword">from</span> <span class="string">"../App"</span>;</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]<span class="function"><span class="keyword">function</span> <span class="title">CountriesChart</span>(<span class="params">&#123; data, dataKey &#125;</span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> dispatch = useContext(AppDispatch);</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]  <span class="function"><span class="keyword">function</span> <span class="title">onClick</span>(<span class="params">payload = &#123;&#125;</span>) </span>&#123;</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (payload.activeLabel) &#123;</span><br><span class="line">[tuture-add]      dispatch(&#123; <span class="attr">type</span>: <span class="string">"SET_COUNTRY"</span>, <span class="attr">country</span>: payload.activeLabel &#125;);</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="function"><span class="keyword">function</span> <span class="title">CountriesChart</span>(<span class="params">&#123; data, dataKey, onClick &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> CountriesChart;</span><br></pre></td></tr></table></figure><p>按照同样的思路，我们来修改 <code>src/components/HistoryChartGroup.js</code> 组件：</p><figure class="highlight js"><figcaption><span>src/components/HistoryChartGroup.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzFjNjFkOGQzNmRiNmMxZjA0YjQyMTQyODhlMjRjNzA1N2VhZTJjNmUvc3JjL2NvbXBvbmVudHMvSGlzdG9yeUNoYXJ0R3JvdXAuanM=" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/1c61d8d36db6c1f04b4214288e24c7057eae2c6e/src/components/HistoryChartGroup.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> React, &#123; useState &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> React, &#123; useContext &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> HistoryChart <span class="keyword">from</span> <span class="string">"./HistoryChart"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; transformHistory &#125; <span class="keyword">from</span> <span class="string">"../utils"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; AppDispatch &#125; <span class="keyword">from</span> <span class="string">"../App"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="function"><span class="keyword">function</span> <span class="title">HistoryChartGroup</span>(<span class="params">&#123; history = &#123;&#125; &#125;</span>) </span>&#123;</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> [lastDays, setLastDays] = useState(&#123;</span><br><span class="line">[tuture-del]    cases: <span class="number">30</span>,</span><br><span class="line">[tuture-del]    deaths: <span class="number">30</span>,</span><br><span class="line">[tuture-del]    recovered: <span class="number">30</span>,</span><br><span class="line">[tuture-del]  &#125;);</span><br><span class="line">[tuture-add]<span class="function"><span class="keyword">function</span> <span class="title">HistoryChartGroup</span>(<span class="params">&#123; history = &#123;&#125;, lastDays = &#123;&#125; &#125;</span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> dispatch = useContext(AppDispatch);</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleLastDaysChange</span>(<span class="params">e, key</span>) </span>&#123;</span><br><span class="line">[tuture-del]    setLastDays(<span class="function">(<span class="params">prev</span>) =&gt;</span> (&#123; ...prev, [key]: e.target.value &#125;));</span><br><span class="line">[tuture-add]    dispatch(&#123; <span class="attr">type</span>: <span class="string">"SET_LASTDAYS"</span>, key, <span class="attr">days</span>: e.target.value &#125;);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> HistoryChartGroup;</span><br></pre></td></tr></table></figure><p>最后一公里，修改 <code>src/components/SelectDataKey.js</code> ：</p><figure class="highlight js"><figcaption><span>src/components/SelectDataKey.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzFjNjFkOGQzNmRiNmMxZjA0YjQyMTQyODhlMjRjNzA1N2VhZTJjNmUvc3JjL2NvbXBvbmVudHMvU2VsZWN0RGF0YUtleS5qcw==" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/1c61d8d36db6c1f04b4214288e24c7057eae2c6e/src/components/SelectDataKey.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> React, &#123; useContext &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; AppDispatch &#125; <span class="keyword">from</span> <span class="string">"../App"</span>;</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]<span class="function"><span class="keyword">function</span> <span class="title">SelectDataKey</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> dispatch = useContext(AppDispatch);</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]  <span class="function"><span class="keyword">function</span> <span class="title">onChange</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">[tuture-add]    dispatch(&#123; <span class="attr">type</span>: <span class="string">"SET_KEY"</span>, <span class="attr">key</span>: e.target.value &#125;);</span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="function"><span class="keyword">function</span> <span class="title">SelectDataKey</span>(<span class="params">&#123; onChange &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> SelectDataKey;</span><br></pre></td></tr></table></figure><p>重构完成，把项目跑起来，应该会发现和上一步的功能分毫不差。</p><div class="note info">            <p><strong>提示</strong></p><p>如果你熟悉 Redux，会发现我们的重构存在一个小小的遗憾：子组件只能通过传递 Props 的方式获取根组件 <code>App</code> 中的 <code>state</code> 。一个变通之计是通过把 <code>state</code> 也装进 Context 来解决，但如果遇到这种需求，笔者还是建议直接使用 Redux。</p>          </div><h3 id="Redux-还有用吗：Control-与-Context-之争"><a href="#Redux-还有用吗：Control-与-Context-之争" class="headerlink" title="Redux 还有用吗：Control 与 Context 之争"></a>Redux 还有用吗：Control 与 Context 之争</h3><p>听到有些声音说有了 React Hooks，都不需要 Redux 了。那 Redux 到底还有用吗？</p><p>在回答这个问题之前，请允许我先胡思乱想一波。React Hooks 确实强大得可怕，特别是通过优秀的第三方自定义 Hooks 库，几乎能让每个组件都能游刃有余地处理复杂的业务逻辑。反观 Redux，它的核心思想就是将状态和修改状态的操作全部集中起来进行。</p><p>有没有发现，这其实刚好对应了两种管理学思想 Context 和 Control？</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171ea29995effdb2.png"></p><blockquote><p>管理者需要 Context，not Control。—— 字节跳动创始人和 CEO 张一鸣</p></blockquote><p>Control 就是将权力集中起来，员工们只需有条不紊地按照 CEO 的决策执行相应的任务，就像 Redux 中的全局 Store 是”唯一的真相来源“（Single Source of Truth），所有状态和数据流的更新必须经过 Store；而 Context 就是给予各部门、各层级足够的决策权，因为他们所拥有的<strong>上下文</strong>更充足，<strong>专业度</strong>也更好，就像 React 中响应特定逻辑的组件具有更充足的上下文，并且可以借助 Hooks ”自给自足“地执行任务，而无需依赖全局的 Store。</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171ea2a092220ca1.png"></p><p>聊到这里，我想你心里已经有自己的答案了。<em>如果你想要分享的话，记得在评论区留言哦~</em></p><h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><ul><li>Sarah Drasner：<span class="exturl" data-url="aHR0cHM6Ly9jc3MtdHJpY2tzLmNvbS91bmRlcnN0YW5kaW5nLXRoZS1hbG1pZ2h0eS1yZWR1Y2VyLw==" title="https://css-tricks.com/understanding-the-almighty-reducer/">Understanding the Almighty Reducer<i class="fa fa-external-link"></i></span></li><li>Kingsley Silas：<span class="exturl" data-url="aHR0cHM6Ly9jc3MtdHJpY2tzLmNvbS9nZXR0aW5nLXRvLWtub3ctdGhlLXVzZXJlZHVjZXItcmVhY3QtaG9vay8=" title="https://css-tricks.com/getting-to-know-the-usereducer-react-hook/">Getting to Know the useReducer React Hook<i class="fa fa-external-link"></i></span></li><li>Kpax Qin：<span class="exturl" data-url="aHR0cHM6Ly96aHVhbmxhbi56aGlodS5jb20vcC8yNzA5MzE5MQ==" title="https://zhuanlan.zhihu.com/p/27093191">Redux状态管理之痛点、分析与改良<i class="fa fa-external-link"></i></span></li><li>方应杭：<span class="exturl" data-url="aHR0cHM6Ly96aHVhbmxhbi56aGlodS5jb20vcC82MzM4NTIzNQ==" title="https://zhuanlan.zhihu.com/p/63385235">尽量使用 useReducer，不要使用 useState（译文）<i class="fa fa-external-link"></i></span></li><li>张一鸣：<span class="exturl" data-url="aHR0cHM6Ly9ieXRlZGFuY2UuZmVpc2h1LmNuL2RvY3MvZG9jY25OYnZlc2pyckpwMTNjTlUzRTNpa2tiIzdlUUxnUQ==" title="https://bytedance.feishu.cn/docs/doccnNbvesjrrJp13cNU3E3ikkb#7eQLgQ">CEO 要避免”理性的自负”, 这错误盖茨、乔布斯都犯过<i class="fa fa-external-link"></i></span></li></ul>]]></content>
    
    <summary type="html">
    
      随着应用状态越来越复杂，我们迫切需要状态与数据流管理的解决方案。熟悉 React 开发的同学一定听说过 Redux，而在这篇文章中，我们将通过 useReducer + useContext 的组合实现一个简易版的 Redux。首先，我们将带你重新认识“老朋友”useState，并借此引出这篇文章的主角：Reducer 函数与 useReducer 钩子，并通过实战一步步带你理清数据流和状态管理的基本思想。
    
    </summary>
    
    
      <category term="前端" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="React" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/"/>
    
      <category term="入门" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/%E5%85%A5%E9%97%A8/"/>
    
    
      <category term="React" scheme="https://tuture.co/tags/React/"/>
    
      <category term="React Hooks" scheme="https://tuture.co/tags/React-Hooks/"/>
    
  </entry>
  
  <entry>
    <title>一杯茶的时间，上手 Taro 京东小程序开发</title>
    <link href="https://tuture.co/2020/04/20/224996a/"/>
    <id>https://tuture.co/2020/04/20/224996a/</id>
    <published>2020-04-19T20:35:59.837Z</published>
    <updated>2021-07-11T07:16:33.869Z</updated>
    
    <content type="html"><![CDATA[<h2 id="初始化项目代码"><a href="#初始化项目代码" class="headerlink" title="初始化项目代码"></a>初始化项目代码</h2><p>我们将使用同属于京东凹凸实验室团队研发开源的多端统一开发解决方案 – <span class="exturl" data-url="aHR0cHM6Ly90YXJvLmpkLmNvbS8=" title="https://taro.jd.com/">Taro<i class="fa fa-external-link"></i></span> 来开发我们的京东小程序。首先我们来看一看最后的完成效果：</p><a id="more"></a><p><img alt data-src="https://imgkr.cn-bj.ufileos.com/beeb95bd-7bd1-4ed4-877a-d052d676d7b8.gif"></p><h3 id="准备环境"><a href="#准备环境" class="headerlink" title="准备环境"></a>准备环境</h3><h4 id="手动初始化项目"><a href="#手动初始化项目" class="headerlink" title="手动初始化项目"></a>手动初始化项目</h4><p>确保你安装了 Node 开发环境，没有请参考图雀社区另外一篇 <a href="https://tuture.co/2019/12/03/892fa12/">Node.js 文章</a>，里面有完善的 Node.js 环境配置。</p><p>安装了最新的 Node.js 环境之后，我们使用 Node 安装时自带的包管理工具 Npm 来创建一个 Taro 项目，打开终端，运行如下命令：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx @tarojs/cli init jd-mp</span><br></pre></td></tr></table></figure><p>运行上面的命令之后，你会看到终端有如下输出：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388568343-2e73ab28-2722-4942-9c96-e19657d0e248.png"></p><p>稍等一会，当终端出现如下字样时，就代表项目初始化成功啦！</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">yarn install v1.21.1</span><br><span class="line">info No lockfile found.</span><br><span class="line">[1/4] Resolving packages...</span><br><span class="line">[2/4] Fetching packages...</span><br><span class="line">[3/4] Linking dependencies...</span><br><span class="line">[4/4] Building fresh packages...</span><br><span class="line">success Saved lockfile.</span><br><span class="line">Done <span class="keyword">in</span> 158.43s.</span><br><span class="line"></span><br><span class="line">创建项目 jd-mp 成功！</span><br><span class="line">请进入项目目录 jd-mp 开始工作吧！😝</span><br></pre></td></tr></table></figure><p>可以看到，我用了 158.43s ，所以初始项目的过程可能有点长，请耐心等待，如果最后你没有看到终端出现如上的字样，那么你可能遇到了问题，可以访问 <span class="exturl" data-url="aHR0cHM6Ly90YXJvLWNsdWIuamQuY29tLw==" title="https://taro-club.jd.com/">Taro 的论坛<i class="fa fa-external-link"></i></span>去寻求解答。</p><div class="note info">            <p><strong>提示</strong></p><p>通过上面的命令初始化项目之后，默认是没有生成 <code>.gitignore</code> 文件的，这会导致你的版本系统中多了很多 <code>node_modules/**</code> 下面的文件，所以我们需要手动在初始化好的 <code>jd-mp</code> 项目根目录下添加一个 <code>.gitignore</code> 文件，并添加对应的规则如下：</p><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">node_modules # 忽略 &#96;node_modules&#96; 下面的文件</span><br><span class="line"></span><br><span class="line">dist # 忽略之后构建项目生成的目录</span><br></pre></td></tr></table></figure>          </div><h4 id="使用准备好的代码"><a href="#使用准备好的代码" class="headerlink" title="使用准备好的代码"></a>使用准备好的代码</h4><p>如果你安装了 Node 环境，但是不想或者自己初始化项目是遇到了问题，那么你可以 Clone 一下我们为你准备的初始项目代码，之后跟着教程对照着这份初始代码进行改进就可以啦！</p><p>如果你偏爱 Github，那么可以运行如下命令来获取初始代码：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ git <span class="built_in">clone</span> https://github.com/tuture-dev/jd-miniprogram.git</span><br></pre></td></tr></table></figure><p>如果你偏爱 Gitee，那么可以运行如下命令来获取初始代码：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ git <span class="built_in">clone</span> https://gitee.com/tuture/jd-miniprogram.git</span><br></pre></td></tr></table></figure><p>与自己使用命令初始化 Taro 项目不同，通过 Clone 我们为你准备好的代码，你需要手动安装依赖，打开终端，输入如下命令安装依赖：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ <span class="built_in">cd</span> jd-miniprogram &amp;&amp; npm install</span><br></pre></td></tr></table></figure><p>好的，通过上面的步骤，我们就准备好了初始代码，接下来就需要你实际动手写代码了，是不是有点期待呢？我们马上就可以尝试开发一个京东小程序了！</p><h2 id="配置-JD-开发环境"><a href="#配置-JD-开发环境" class="headerlink" title="配置 JD 开发环境"></a>配置 JD 开发环境</h2><h3 id="安装-JD-的运行脚本"><a href="#安装-JD-的运行脚本" class="headerlink" title="安装 JD 的运行脚本"></a>安装 JD 的运行脚本</h3><p>等等，因为京东小程序才刚刚出来，还没有正式开始推广，所以 Taro 初始化项目的脚本里没有生成京东小程序的开启依赖，所以我们需要手动安装一下对应的开启依赖，打开命令行，在 <code>jd-mp</code> 项目根目录下执行如下命令安装：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install @tarojs/taro-jd</span><br></pre></td></tr></table></figure><p>安装好之后，我们还需要在 <code>package.json</code> 中添加如下两条开启京东小程序项目的脚本：</p><figure class="highlight"><figcaption><span>package.json</span></figcaption><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"jd-mp"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"private"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">"第一个京东小程序"</span>,</span><br><span class="line">  <span class="attr">"templateInfo"</span>: &#123;</span><br><span class="line">    <span class="attr">"name"</span>: <span class="string">"default"</span>,</span><br><span class="line">    <span class="attr">"typescript"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">"css"</span>: <span class="string">"sass"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    <span class="attr">"build:quickapp"</span>: <span class="string">"taro build --type quickapp"</span>,</span><br><span class="line">[tuture-add]    "build:jd": "taro build --type jd",</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">[tuture-add]    "dev:quickapp": "npm run build:quickapp -- --watch",</span><br><span class="line">[tuture-add]    "dev:jd": "npm run build:jd -- --watch"</span><br><span class="line">  &#125;,</span><br><span class="line">  "author": "",</span><br><span class="line">  "license": "MIT",</span><br><span class="line">  "dependencies": &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">[tuture-add]    "@tarojs/taro-jd": "^2.1.5",</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>安装并添加对应的命令之后，我们就可以在终端项目根目录执行如下命令来运行我们的京东小程序：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx taro build --<span class="built_in">type</span> jd --watch</span><br></pre></td></tr></table></figure><p>注意要加上 <code>--watch</code> 参数，这样当我们在编辑器（如 VSCode）修改内容并保存之后，项目会自动编译更新，然后刷新开发者工具就可以查看修改后的效果，上面这条命令会实际运行我们 <code>package.json</code> 里面添加的脚本命令：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="string">"dev:jd"</span>: <span class="string">"npm run build:jd -- --watch"</span></span><br></pre></td></tr></table></figure><h3 id="注册京东小程序"><a href="#注册京东小程序" class="headerlink" title="注册京东小程序"></a>注册京东小程序</h3><p>当进行了上面的配置之后，并把项目开起来之后，这个时候我们就需要去注册一个京东小程序，拿到对应的小程序的 <code>AppId</code> ，你可以访问<span class="exturl" data-url="aHR0cHM6Ly9tcC5qZC5jb20vP2VudHJhbmNlPXRhcm8=" title="https://mp.jd.com/?entrance=taro">京东小程序官网<i class="fa fa-external-link"></i></span>，根据步骤注册小程序，并创建项目，然后取到项目的 <code>AppId</code> ，类似如下：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388568471-3e51b0c5-5811-4493-a795-45878fc05c0a.png"></p><p>然后下载京东开发者工具，新建一个小程序项目，并输入拿到的 <code>AppId</code> ：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388568473-02fcc579-7f11-478f-bd52-c10a7ad29e26.png"></p><p>并在京东开发者里面点击上面圆圈圈出的那个文件夹图标，打开上面创建的 <code>jd-mp</code> 项目，不过请注意，我们需要选中项目里面编译好的 <code>dist</code> 目录：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388568417-8a8754a0-3e21-4f63-87ea-2c90c9e9d0fc.png"></p><p>这个时候，你的项目运行着，打开之后，你会在京东小程序开发者工具里面看到如下效果：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388568427-f86cecdc-263b-4fe7-bfe1-b542d5164687.png"></p><p>当然上面这个指示的效果是我最终写好的项目，你初次打开应该可以看到一个 <code>Hello World</code> 🥳🥳🥳</p><h2 id="编写第一个-JD-组件并配置样式"><a href="#编写第一个-JD-组件并配置样式" class="headerlink" title="编写第一个 JD 组件并配置样式"></a>编写第一个 JD 组件并配置样式</h2><p>一切准备就绪，可以开始编写我们的京东小程序了！</p><h3 id="编写第一个-JD-组件"><a href="#编写第一个-JD-组件" class="headerlink" title="编写第一个 JD 组件"></a>编写第一个 JD 组件</h3><p>Taro 小程序 <code>2.x.x</code> 暂时支持 React 来写小程序，而 Taro <code>3.x.x</code> 允许 React，Vue 和 Nerve 来写，之后我们图雀社区会出 Taro <code>3.x.x</code> 的教程，让 Vue 的读者也可以使用 Taro 来写小程序。</p><p>既然现在只能用 React，那么就让我们新潮一点，使用 React Hooks 来简化组件编写，打开 <code>src/pages/index/index.jsx</code> ，将类组件重构成函数式组件，并添加一点发帖相关的内容：</p><figure class="highlight jsx"><figcaption><span>src/pages/index/index.jsx</span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> Taro, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; View, Text &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span></span><br><span class="line">[tuture-del]<span class="keyword">import</span> <span class="string">'./index.scss'</span></span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]<span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">Index</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]  componentWillMount () &#123; &#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]  componentDidMount () &#123; &#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]  componentWillUnmount () &#123; &#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]  componentDidShow () &#123; &#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]  componentDidHide () &#123; &#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]  config = &#123;</span><br><span class="line">[tuture-del]    navigationBarTitleText: <span class="string">'首页'</span></span><br><span class="line">[tuture-del]  &#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]  render () &#123;</span><br><span class="line">[tuture-del]    <span class="keyword">return</span> (</span><br><span class="line">[tuture-del]      &lt;View className=<span class="string">'index'</span>&gt;</span><br><span class="line">[tuture-del]        &lt;Text&gt;Hello world!&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]      &lt;/</span>View&gt;</span><br><span class="line">[tuture-del]    )</span><br><span class="line">[tuture-del]  &#125;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Taro <span class="keyword">from</span> <span class="string">"@tarojs/taro"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; View, Button, Textarea &#125; <span class="keyword">from</span> <span class="string">"@tarojs/components"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> <span class="string">"./index.scss"</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Index</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">return</span> (</span><br><span class="line">[tuture-add]    &lt;View className=<span class="string">"index"</span>&gt;</span><br><span class="line">[tuture-add]      &lt;Textarea</span><br><span class="line">[tuture-add]        placeholder=<span class="string">"撰写优质教程..."</span></span><br><span class="line">[tuture-add]        className=<span class="string">"post-input"</span></span><br><span class="line">[tuture-add]        autoHeight</span><br><span class="line">[tuture-add]      /&gt;</span><br><span class="line">[tuture-add]      &lt;Button className=<span class="string">"post-button"</span>&gt;发表&lt;<span class="regexp">/Button&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]    &lt;/</span>View&gt;</span><br><span class="line">[tuture-add]  );</span><br><span class="line">&#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]Index.config = &#123;</span><br><span class="line">[tuture-add]  navigationBarTitleText: <span class="string">"首页"</span></span><br><span class="line">[tuture-add]&#125;;</span><br></pre></td></tr></table></figure><p>可以看到我们将类组件改成了函数式组件，并从 <code>@tarojs/components</code> 里面导入并添加了两个组件 <code>Textarea</code> 和 <code>Button</code> ，用于帖子表单的内容输入和发表。</p><p>接着，我们将之前的类属性 <code>config</code> 移动到 <code>Index.config</code> 上面来定义，这个 <code>config</code> 只在页面级组件里面存在，用于定义页面的一些属性，比如这个的 <code>navigationBarTitleText</code> 就是此页面的标题，在小程序里面代表顶部的标题：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388568324-7fed3fa6-b95c-4c54-8489-46a6171feed1.png"></p><h3 id="为组件添加样式"><a href="#为组件添加样式" class="headerlink" title="为组件添加样式"></a>为组件添加样式</h3><p>当我们添加了上面两个组件之后，组件的原生样式开起来比较普通，为了让我们的小程序更加专业一点，我们给其加点样式，其实使用  Taro 开发京东小程序时，写样式和我们平时开发 Web 应用差不多，这里我们使用了 SCSS 来写样式，在组件里面定义了对应的类名并导入了 CSS 文件，之后再 CSS 文件里面写样式。</p><p>打开 <code>src/pages/index/index.scss</code> ，在其中添加对应的样式文件如下：</p><figure class="highlight scss"><figcaption><span>src/pages/index/index.scss</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.index</span> &#123;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">display</span>: flex;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">flex-direction</span>: column;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">align-items</span>: center;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>&#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span></span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.post-input</span> &#123;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">margin-top</span>: <span class="number">24px</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">width</span>: <span class="number">80%</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">min-height</span>: <span class="number">80px</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">padding</span>: <span class="number">16px</span> <span class="number">30px</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>&#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span></span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.post-button</span> &#123;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">margin-top</span>: <span class="number">24px</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">width</span>: calc(<span class="number">80%</span> + <span class="number">60px</span>);</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">border-radius</span>: <span class="number">0</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">background-color</span>: <span class="number">#00bc87</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">color</span>: white;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>&#125;</span><br></pre></td></tr></table></figure><p>当添加了样式之后，我们的应用变成了如下样子：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388655569-cd751ab2-bf21-4342-b863-81c810d5fbb7.png"></p><p>怎么样，是不是变得有点专业了呢？🤓</p><h2 id="使用-React-Hooks-并处理事件"><a href="#使用-React-Hooks-并处理事件" class="headerlink" title="使用 React Hooks 并处理事件"></a>使用 React Hooks 并处理事件</h2><p>在编写了第一个组件之后，我们尝试来处理我们帖子的内容输入，这个时候就涉及到事件处理了，我们需要将之前在 <code>src/pages/index/index.jsx</code> 里面定义的 <code>TextArea</code> 做成 “受控组件”，我们使用 React Hooks 提供的 <code>useState</code> 来做到这一点。</p><p>打开 <code>src/pages/index/index.jsx</code>，对其中的内容作出对应的修改如下：</p><figure class="highlight jsx"><figcaption><span>src/pages/index/index.jsx</span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> Taro <span class="keyword">from</span> <span class="string">"@tarojs/taro"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Taro, &#123; useState &#125; <span class="keyword">from</span> <span class="string">"@tarojs/taro"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; View, Button, Textarea &#125; <span class="keyword">from</span> <span class="string">"@tarojs/components"</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">"./index.scss"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Index</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [post, setPost] = useState(<span class="string">""</span>);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]  <span class="function"><span class="keyword">function</span> <span class="title">handleChange</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">[tuture-add]    setPost(e.target.value);</span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"index"</span>&gt;</span><br><span class="line">      &lt;Textarea</span><br><span class="line">        placeholder=<span class="string">"撰写优质教程..."</span></span><br><span class="line">        className=<span class="string">"post-input"</span></span><br><span class="line">[tuture-add]        value=&#123;post&#125;</span><br><span class="line">[tuture-add]        onInput=&#123;handleChange&#125;</span><br><span class="line">        autoHeight</span><br><span class="line">      /&gt;</span><br><span class="line">      &lt;Button className=<span class="string">"post-button"</span>&gt;发表&lt;<span class="regexp">/Button&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Index.config = &#123;</span><br><span class="line">  navigationBarTitleText: <span class="string">"首页"</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>可以看到，上面我们导入了 <code>useState</code> 钩子，然后调用生成了一个 <code>post</code> 和 <code>setPost</code> ，接着我们定义了一个 <code>handleChange</code> 函数来处理 <code>Textarea</code> 的 <code>onInput</code> 事件，接收用户输入来设置 <code>post</code> 值，并通过将 <code>post</code> 设置回 <code>Textarea</code> 的 <code>value</code> 来达到 “受控组件” 的目的。</p><h2 id="组件组合和处理-UI-反馈"><a href="#组件组合和处理-UI-反馈" class="headerlink" title="组件组合和处理 UI 反馈"></a>组件组合和处理 UI 反馈</h2><p>当我们的内容多起来之后，在一个组件里面放太多内容会导致逻辑不清晰，所以我们尝试新建组件来抽出属于它的一部分逻辑。接下来我们马上要处理帖子发表逻辑，并且还要展示发表之后的效果，所以我们需要额外新建一个组件来展示帖子逻辑。</p><h3 id="新建组件"><a href="#新建组件" class="headerlink" title="新建组件"></a>新建组件</h3><p>在 <code>src</code> 目录先新建 <code>components</code> 文件夹，然后在里面新建 <code>PostCard</code> 文件夹，接着在这个文件夹里面建一个 <code>index.jsx</code> 文件，用于放置组件逻辑和 UI，我们在这里组件里面编写如下逻辑：</p><figure class="highlight jsx"><figcaption><span>src/components/PostCard/index.jsx</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; View, Text, Image &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./styles.scss'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">PostCard</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; post &#125; = props;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"post"</span>&gt;</span><br><span class="line">      &lt;Text className=<span class="string">"post-name"</span>&gt;&#123;post&#125;&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到我们创建了一个 <code>PostCard</code> 函数式组件，然后渲染了其父组件传下来的参数 <code>post</code> ，并且导入了一个 <code>styles.scss</code> 文件，我们将马上来创建它。</p><p>在 <code>src/components/PostCard</code> 文件夹下创建一个 <code>styles.scss</code> ，并编写如下内容：</p><figure class="highlight scss"><figcaption><span>src/components/PostCard/styles.scss</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.post</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: calc(<span class="number">80%</span> + <span class="number">60px</span>);</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">32px</span> <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.post-name</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">600</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="处理-UI-反馈"><a href="#处理-UI-反馈" class="headerlink" title="处理 UI 反馈"></a>处理 UI 反馈</h3><p>当编写了渲染帖子的组件之后，我们回到 <code>src/pages/index/index.jsx</code> 组件，来导入我们写好的 <code>PostCard</code> 组件，并同时处理帖子发表逻辑：</p><figure class="highlight jsx"><figcaption><span>src/pages/index/index.jsx</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro, &#123; useState &#125; <span class="keyword">from</span> <span class="string">"@tarojs/taro"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; View, Button, Textarea &#125; <span class="keyword">from</span> <span class="string">"@tarojs/components"</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">import</span> PostCard <span class="keyword">from</span> <span class="string">"../../components/PostCard"</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">"./index.scss"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Index</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [post, setPost] = useState(<span class="string">""</span>);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [postList, setPostList] = useState([]);</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleChange</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    setPost(e.target.value);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">[tuture-add]  <span class="function"><span class="keyword">function</span> <span class="title">handleSubmit</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]    <span class="built_in">console</span>.log(<span class="string">"hello world"</span>, post);</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (!post) &#123;</span><br><span class="line">[tuture-add]      Taro.showToast(&#123;</span><br><span class="line">[tuture-add]        title: <span class="string">"内容不能为空"</span>,</span><br><span class="line">[tuture-add]        icon: <span class="string">"none"</span></span><br><span class="line">[tuture-add]      &#125;);</span><br><span class="line">[tuture-add]    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">[tuture-add]      Taro.showToast(&#123;</span><br><span class="line">[tuture-add]        title: <span class="string">"发表成功"</span>,</span><br><span class="line">[tuture-add]        icon: <span class="string">"success"</span></span><br><span class="line">[tuture-add]      &#125;);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      setPost(<span class="string">""</span>);</span><br><span class="line">[tuture-add]      setPostList(postList.concat(post));</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"index"</span>&gt;</span><br><span class="line">      &lt;Textarea</span><br><span class="line">        placeholder=<span class="string">"撰写优质教程..."</span></span><br><span class="line">        className=<span class="string">"post-input"</span></span><br><span class="line">        value=&#123;post&#125;</span><br><span class="line">        onInput=&#123;handleChange&#125;</span><br><span class="line">        autoHeight</span><br><span class="line">      /&gt;</span><br><span class="line">[tuture-del]      &lt;Button className=<span class="string">"post-button"</span>&gt;发表&lt;<span class="regexp">/Button&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]      &lt;Button className="post-button" onClick=&#123;handleSubmit&#125;&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]        发表</span></span><br><span class="line"><span class="regexp">[tuture-add]      &lt;/</span>Button&gt;</span><br><span class="line">[tuture-add]      &lt;View className=<span class="string">"post-box"</span>&gt;</span><br><span class="line">[tuture-add]        &#123;postList.map(<span class="function"><span class="params">postItem</span> =&gt;</span> (</span><br><span class="line">[tuture-add]          &lt;PostCard post=&#123;postItem&#125; /&gt;</span><br><span class="line">[tuture-add]        ))&#125;</span><br><span class="line">[tuture-add]      &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Index.config = &#123;</span><br><span class="line">  navigationBarTitleText: <span class="string">"首页"</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>可以看到上面我们使用 <code>useState</code> 钩子创建了一个新的状态 <code>postList</code> ，接着我们在 <code>Button</code> 上定义了一个 <code>onClick</code> 的处理函数 <code>handleSubmit</code> ，在这个函数里面，我们判断输入的 <code>post</code> 是否为空，如果为空提示用户不可以发布，如果有内容，则提示用户新帖子发布成功，并将 <code>post</code> 添加到 <code>postList</code> 中，以及置空 <code>post</code> 内容，等待下次输入。</p><p>注意到这里我们使用 <code>Taro.showToast</code> API 来提示用户，Taro 还有很多方便的 API，比如弹出模态框等，可以<span class="exturl" data-url="aHR0cHM6Ly9uZXJ2anMuZ2l0aHViLmlvL3Rhcm8vZG9jcy9hcGlzL2ludGVyZmFjZS9pbnRlcmFjdGl2ZXMvc2hvd1RvYXN0Lmh0bWw=" title="https://nervjs.github.io/taro/docs/apis/interface/interactives/showToast.html">参考文档<i class="fa fa-external-link"></i></span>。</p><div class="note info">            <p><strong>提示</strong></p><p>这里额外的 <code>console</code> 语句可以忽略，属于开发时的调试语句。</p>          </div><p>最后，我们加一点样式来让我们的界面更加专业，打开 <code>src/pages/index/index.scss</code> ，修改内容如下：</p><figure class="highlight scss"><figcaption><span>src/pages/index/index.scss</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.index</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.post-input</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">80%</span>;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">80px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">16px</span> <span class="number">30px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.post-button</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">width</span>: calc(<span class="number">80%</span> + <span class="number">60px</span>);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#00bc87</span>;</span><br><span class="line">  <span class="attribute">color</span>: white;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span></span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.post-box</span> &#123;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="attribute">margin-top</span>: <span class="number">24px</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>&#125;</span><br></pre></td></tr></table></figure><p>大功告成！我们现在可以发表帖子并展示效果了，这个时候测试你的京东小程序，应该可以看到如下效果：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388568403-58bca79a-745e-4b80-821b-8ca684372ea8.png"></p><p>我们成功的处理了组件的组合，并且在发表帖子的时候使用 Taro 的 API 给与了用户 UI 反馈。</p><h2 id="多页面与路由跳转"><a href="#多页面与路由跳转" class="headerlink" title="多页面与路由跳转"></a>多页面与路由跳转</h2><p>通过上面的步骤，我们可以展示帖子列表，但是我们都知道，帖子的内容可能很长，所以我们需要额外的页面来展示帖子详情，所以我们接下来将新建页面并使用 Taro 提供的 API 进行多页面的跳转。</p><h3 id="新建页面"><a href="#新建页面" class="headerlink" title="新建页面"></a>新建页面</h3><p>我们在 <code>src/pages</code> 文件夹下建一个 <code>post</code> 文件夹，并在里面建一个 <code>post.jsx</code> 文件，并编写对应的内容如下：</p><figure class="highlight jsx"><figcaption><span>src/pages/post/post.jsx</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro, &#123; useRouter &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; View, Text &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./post.scss'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Post</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; params &#125; = useRouter();</span><br><span class="line">  <span class="keyword">const</span> &#123; post = <span class="string">''</span> &#125; = params;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"post"</span>&gt;</span><br><span class="line">      &lt;Text className=<span class="string">"post-name"</span>&gt;&#123;post&#125;&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Post.config = &#123;</span><br><span class="line">  navigationBarTitleText: <span class="string">'帖子页'</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>可以看到上面我们创建了一个 <code>Post</code> 函数式组件，然后增加了 <code>config</code> 配置，在标题改为 “帖子页”，接着我们使用 Taro 提供的 <code>useRouter</code> 钩子来获取路由传递过来的参数，取到参数里面的 <code>post</code> 并渲染。</p><div class="note warning">            <p><strong>注意</strong></p><p>一般情况下，我们是通过路由传递 <code>postId</code> ，然后在帖子详情里面发起 HTTP 请求获取帖子详情，这里为了演示京东小程序的能力，所以简化了写法。</p>          </div><h3 id="注册页面"><a href="#注册页面" class="headerlink" title="注册页面"></a>注册页面</h3><p>当创建了新页面之后，我们还要告诉应用我们创建的这个页面，也就是在应用注册这个页面，打开 <code>src/app.jsx</code> ，在对应 <code>App</code> 组件的 <code>config.pages</code> 属性里面添加刚刚创建的帖子详情页的路径如下：</p><figure class="highlight jsx"><figcaption><span>src/app.jsx</span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> Taro, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span></span><br><span class="line">[tuture-del]<span class="keyword">import</span> Index <span class="keyword">from</span> <span class="string">'./pages/index'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> Taro, &#123; Component &#125; <span class="keyword">from</span> <span class="string">"@tarojs/taro"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Index <span class="keyword">from</span> <span class="string">"./pages/index"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">import</span> <span class="string">'./app.scss'</span></span><br><span class="line">[tuture-add]<span class="keyword">import</span> <span class="string">"./app.scss"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果需要在 h5 环境中开启 React Devtools</span></span><br><span class="line"><span class="comment">// 取消以下注释：</span></span><br><span class="line"><span class="comment">// if (process.env.NODE_ENV !== 'production' &amp;&amp; process.env.TARO_ENV === 'h5')  &#123;</span></span><br><span class="line"><span class="comment">//   require('nerv-devtools')</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">[tuture-add]  componentDidMount() &#123;&#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]  componentDidMount () &#123;&#125;</span><br><span class="line">[tuture-add]  componentDidShow() &#123;&#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]  componentDidShow () &#123;&#125;</span><br><span class="line">[tuture-add]  componentDidHide() &#123;&#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]  componentDidHide () &#123;&#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]  componentDidCatchError () &#123;&#125;</span><br><span class="line">[tuture-add]  componentDidCatchError() &#123;&#125;</span><br><span class="line"></span><br><span class="line">  config = &#123;</span><br><span class="line">[tuture-del]    pages: [</span><br><span class="line">[tuture-del]      <span class="string">'pages/index/index'</span></span><br><span class="line">[tuture-del]    ],</span><br><span class="line">[tuture-add]    pages: [<span class="string">"pages/index/index"</span>, <span class="string">"pages/post/post"</span>],</span><br><span class="line">    <span class="built_in">window</span>: &#123;</span><br><span class="line">[tuture-del]      backgroundTextStyle: <span class="string">'light'</span>,</span><br><span class="line">[tuture-del]      navigationBarBackgroundColor: <span class="string">'#fff'</span>,</span><br><span class="line">[tuture-del]      navigationBarTitleText: <span class="string">'WeChat'</span>,</span><br><span class="line">[tuture-del]      navigationBarTextStyle: <span class="string">'black'</span></span><br><span class="line">[tuture-add]      backgroundTextStyle: <span class="string">"light"</span>,</span><br><span class="line">[tuture-add]      navigationBarBackgroundColor: <span class="string">"#fff"</span>,</span><br><span class="line">[tuture-add]      navigationBarTitleText: <span class="string">"WeChat"</span>,</span><br><span class="line">[tuture-add]      navigationBarTextStyle: <span class="string">"black"</span></span><br><span class="line">    &#125;</span><br><span class="line">[tuture-del]  &#125;</span><br><span class="line">[tuture-add]  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 在 App 类中的 render() 函数没有实际作用</span></span><br><span class="line">  <span class="comment">// 请勿修改此函数</span></span><br><span class="line">[tuture-del]  render () &#123;</span><br><span class="line">[tuture-del]    <span class="keyword">return</span> (</span><br><span class="line">[tuture-del]      &lt;Index /&gt;</span><br><span class="line">[tuture-del]    )</span><br><span class="line">[tuture-add]  render() &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">Index</span> /&gt;</span></span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]Taro.render(<span class="xml"><span class="tag">&lt;<span class="name">App</span> /&gt;</span></span>, <span class="built_in">document</span>.getElementById(<span class="string">'app'</span>))</span><br><span class="line">[tuture-add]Taro.render(<span class="xml"><span class="tag">&lt;<span class="name">App</span> /&gt;</span></span>, <span class="built_in">document</span>.getElementById(<span class="string">"app"</span>));</span><br></pre></td></tr></table></figure><h3 id="处理路由跳转"><a href="#处理路由跳转" class="headerlink" title="处理路由跳转"></a>处理路由跳转</h3><p>创建并注册了页面之后，我们就可以在 <code>src/components/PostCard/index.jsx</code> 组件里面处理点击帖子列表单个帖子的路由跳转了：</p><figure class="highlight jsx"><figcaption><span>src/components/PostCard/index.jsx</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro <span class="keyword">from</span> <span class="string">"@tarojs/taro"</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; View, Text, Image &#125; <span class="keyword">from</span> <span class="string">"@tarojs/components"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; View, Text &#125; <span class="keyword">from</span> <span class="string">"@tarojs/components"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">"./styles.scss"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">PostCard</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; post &#125; = props;</span><br><span class="line"></span><br><span class="line">[tuture-add]  <span class="function"><span class="keyword">function</span> <span class="title">handleClick</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]    Taro.navigateTo(&#123;</span><br><span class="line">[tuture-add]      url: <span class="string">`/pages/post/post?post=<span class="subst">$&#123;post&#125;</span>`</span></span><br><span class="line">[tuture-add]    &#125;);</span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">[tuture-del]    &lt;View className=<span class="string">"post"</span>&gt;</span><br><span class="line">[tuture-add]    &lt;View className=<span class="string">"post"</span> onClick=&#123;handleClick&#125;&gt;</span><br><span class="line">      &lt;Text className=<span class="string">"post-name"</span>&gt;&#123;post&#125;&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，我们新增了 <code>onClick</code> 事件的处理方法 <code>handleClick</code> ，并调用 Taro 提供的 <code>navigateTo</code> API 进行页面之间的跳转，更多页面导航的 API 可以<span class="exturl" data-url="aHR0cHM6Ly9uZXJ2anMuZ2l0aHViLmlvL3Rhcm8vZG9jcy9hcGlzL2ludGVyZmFjZS9uYXZpZ2F0aW9uL25hdmlnYXRlVG8uaHRtbA==" title="https://nervjs.github.io/taro/docs/apis/interface/navigation/navigateTo.html">参考文档<i class="fa fa-external-link"></i></span>。</p><p>现在你可以在添加帖子之后，点击单个帖子，你会发现页面发生跳转到帖子详情页，并展示了帖子的内容：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388568443-3f666098-0dc9-4096-9755-1284acb9663f.gif"></p><h2 id="添加-TabBar"><a href="#添加-TabBar" class="headerlink" title="添加 TabBar"></a>添加 TabBar</h2><p>处理了多页面的跳转，一个小程序还存在一些 TarBar 的需求，即底部有几个按钮进行多种类型的页面跳转，我们也来发掘一下在京东小程序里面如何添加 TabBar。</p><h3 id="编写新-TabBar-页面"><a href="#编写新-TabBar-页面" class="headerlink" title="编写新 TabBar 页面"></a>编写新 TabBar 页面</h3><p>我们首先来建立 TabBar 需要切换的另外一个页面，一般逻辑里面是 “我的” 页面，在 <code>src/pages</code> 目录下新建 <code>mine</code> 文件夹，然后在里面创建 <code>mine.jsx</code> 文件，编写对应的内容如下：</p><figure class="highlight jsx"><figcaption><span>src/pages/mine/mine.jsx</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro, &#123; useRouter &#125; <span class="keyword">from</span> <span class="string">'@tarojs/taro'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; View, Text, Image &#125; <span class="keyword">from</span> <span class="string">'@tarojs/components'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./mine.scss'</span>;</span><br><span class="line"><span class="keyword">import</span> avatar <span class="keyword">from</span> <span class="string">'../../images/avatar.png'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Mine</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"mine"</span>&gt;</span><br><span class="line">      &lt;Image src=&#123;avatar&#125; className=<span class="string">"mine-avatar"</span> /&gt;</span><br><span class="line">      &lt;View className=<span class="string">"slogan"</span>&gt;</span><br><span class="line">        &lt;Text className=<span class="string">"slogan-name"</span>&gt;</span><br><span class="line">          图雀社区：予力内容创作，加速技术传播</span><br><span class="line">        &lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>View&gt;</span><br><span class="line">    &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">Mine.config = &#123;</span></span><br><span class="line"><span class="regexp">  navigationBarTitleText: '我的',</span></span><br><span class="line"><span class="regexp">&#125;;</span></span><br></pre></td></tr></table></figure><p>可以看到是我们熟悉的函数式组件，并且 <code>config</code> 我们设置了 “我的” 的标题，并且还在组件中渲染了一张图片和标语，图片可以在项目中获取。1）<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamQtbWluaXByb2dyYW0vdHJlZS9tYXN0ZXIvc3Jj" title="https://github.com/tuture-dev/jd-miniprogram/tree/master/src">Github<i class="fa fa-external-link"></i></span> 2）<span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vdHV0dXJlL2pkLW1pbmlwcm9ncmFtL3RyZWUvbWFzdGVyL3NyYy9pbWFnZXM=" title="https://gitee.com/tuture/jd-miniprogram/tree/master/src/images">Gitee<i class="fa fa-external-link"></i></span></p><p>接着我们可以创建对应的样式文件，在 <code>src/pages/mine/</code>下创建对应的 <code>mine.scss</code> 文件，并编写如下的内容：</p><figure class="highlight scss"><figcaption><span>src/pages/mine/mine.scss</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.mine</span> &#123;</span><br><span class="line">  <span class="attribute">padding-top</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.mine-avatar</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slogan</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">24px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.slogan-name</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">32px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="配置-TabBar"><a href="#配置-TabBar" class="headerlink" title="配置 TabBar"></a>配置 TabBar</h3><p>准备好了 TabBar 的第二个页面之后，我们在 <code>src/app.jsx</code> 里面配置京东小程序的 TabBar：</p><figure class="highlight jsx"><figcaption><span>src/app.jsx</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Taro, &#123; Component &#125; <span class="keyword">from</span> <span class="string">"@tarojs/taro"</span>;</span><br><span class="line"><span class="keyword">import</span> Index <span class="keyword">from</span> <span class="string">"./pages/index"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">"./app.scss"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果需要在 h5 环境中开启 React Devtools</span></span><br><span class="line"><span class="comment">// 取消以下注释：</span></span><br><span class="line"><span class="comment">// if (process.env.NODE_ENV !== 'production' &amp;&amp; process.env.TARO_ENV === 'h5')  &#123;</span></span><br><span class="line"><span class="comment">//   require('nerv-devtools')</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  componentDidMount() &#123;&#125;</span><br><span class="line"></span><br><span class="line">  componentDidShow() &#123;&#125;</span><br><span class="line"></span><br><span class="line">  componentDidHide() &#123;&#125;</span><br><span class="line"></span><br><span class="line">  componentDidCatchError() &#123;&#125;</span><br><span class="line"></span><br><span class="line">  config = &#123;</span><br><span class="line">[tuture-del]    pages: [<span class="string">"pages/index/index"</span>, <span class="string">"pages/post/post"</span>],</span><br><span class="line">[tuture-add]    pages: [<span class="string">"pages/index/index"</span>, <span class="string">"pages/post/post"</span>, <span class="string">"pages/mine/mine"</span>],</span><br><span class="line">    <span class="built_in">window</span>: &#123;</span><br><span class="line">      backgroundTextStyle: <span class="string">"light"</span>,</span><br><span class="line">      navigationBarBackgroundColor: <span class="string">"#fff"</span>,</span><br><span class="line">      navigationBarTitleText: <span class="string">"WeChat"</span>,</span><br><span class="line">      navigationBarTextStyle: <span class="string">"black"</span></span><br><span class="line">[tuture-add]    &#125;,</span><br><span class="line">[tuture-add]    tabBar: &#123;</span><br><span class="line">[tuture-add]      list: [</span><br><span class="line">[tuture-add]        &#123;</span><br><span class="line">[tuture-add]          pagePath: <span class="string">"pages/index/index"</span>,</span><br><span class="line">[tuture-add]          text: <span class="string">"首页"</span>,</span><br><span class="line">[tuture-add]          iconPath: <span class="string">"./images/home.png"</span>,</span><br><span class="line">[tuture-add]          selectedIconPath: <span class="string">"./images/homeSelected.png"</span></span><br><span class="line">[tuture-add]        &#125;,</span><br><span class="line">[tuture-add]        &#123;</span><br><span class="line">[tuture-add]          pagePath: <span class="string">"pages/mine/mine"</span>,</span><br><span class="line">[tuture-add]          text: <span class="string">"我的"</span>,</span><br><span class="line">[tuture-add]          iconPath: <span class="string">"./images/mine.png"</span>,</span><br><span class="line">[tuture-add]          selectedIconPath: <span class="string">"./images/mineSelected.png"</span></span><br><span class="line">[tuture-add]        &#125;</span><br><span class="line">[tuture-add]      ]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 在 App 类中的 render() 函数没有实际作用</span></span><br><span class="line">  <span class="comment">// 请勿修改此函数</span></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">Index</span> /&gt;</span></span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Taro.render(<span class="xml"><span class="tag">&lt;<span class="name">App</span> /&gt;</span></span>, <span class="built_in">document</span>.getElementById(<span class="string">"app"</span>));</span><br></pre></td></tr></table></figure><p>可以看到，首先我们在 <code>config.pages</code> 里面声明了 <code>pages/mine/mine.jsx</code> 的路径，然后我们给 <code>config</code> 额外增加了一个 <code>tabBar</code> 属性，这个对象里面是一个 <code>list</code> 属性，然后在里面加入了两个 TabBar 页面的配置信息：</p><ul><li><code>pagePath</code> 代表当前选中 TabBar 渲染的页面路径</li><li><code>text</code> TabBar 的展示标题</li><li><code>iconPath</code> TabBar 未选中时展示的图标</li><li><code>selectedIconPath</code> TabBar 选中时展示的图标</li></ul><p>更多 TabBar 的配置信息可以<span class="exturl" data-url="aHR0cHM6Ly9uZXJ2anMuZ2l0aHViLmlvL3Rhcm8vZG9jcy90dXRvcmlhbC5odG1sI3RhYmJhcg==" title="https://nervjs.github.io/taro/docs/tutorial.html#tabbar">参考文档<i class="fa fa-external-link"></i></span>。用到的图标文件可以在项目中获取：1）<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvamQtbWluaXByb2dyYW0vdHJlZS9tYXN0ZXIvc3Jj" title="https://github.com/tuture-dev/jd-miniprogram/tree/master/src">Github<i class="fa fa-external-link"></i></span> 2）<span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vdHV0dXJlL2pkLW1pbmlwcm9ncmFtL3RyZWUvbWFzdGVyL3NyYy9pbWFnZXM=" title="https://gitee.com/tuture/jd-miniprogram/tree/master/src/images">Gitee。<i class="fa fa-external-link"></i></span></p><p>当配置好上面的内容之后我们应该可以在京东小程序开发者界面里面看到如下效果：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388569034-0fdca61a-8391-477e-9e74-1ec224a0624c.gif"></p><h2 id="发起网络请求"><a href="#发起网络请求" class="headerlink" title="发起网络请求"></a>发起网络请求</h2><p>前面所有的都是了解小程序本地编写的一些内容，大多数应用还需要网络请求获取远程数据来进行展示，当然我们的京东小程序尝鲜也不能漏掉这一点。</p><p>我们打开 <code>src/pages/index/index.jsx</code> 文件，对其中的内容作出对应的修改如下：</p><figure class="highlight jsx"><figcaption><span>src/pages/index/index.jsx</span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> Taro, &#123; useState &#125; <span class="keyword">from</span> <span class="string">"@tarojs/taro"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> Taro, &#123; useState, useEffect &#125; <span class="keyword">from</span> <span class="string">"@tarojs/taro"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; View, Button, Textarea &#125; <span class="keyword">from</span> <span class="string">"@tarojs/components"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> PostCard <span class="keyword">from</span> <span class="string">"../../components/PostCard"</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">"./index.scss"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Index</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [post, setPost] = useState(<span class="string">""</span>);</span><br><span class="line">  <span class="keyword">const</span> [postList, setPostList] = useState([]);</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleChange</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    setPost(e.target.value);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleSubmit</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"hello world"</span>, post);</span><br><span class="line">    <span class="keyword">if</span> (!post) &#123;</span><br><span class="line">      Taro.showToast(&#123;</span><br><span class="line">        title: <span class="string">"内容不能为空"</span>,</span><br><span class="line">        icon: <span class="string">"none"</span></span><br><span class="line">      &#125;);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      Taro.showToast(&#123;</span><br><span class="line">        title: <span class="string">"发表成功"</span>,</span><br><span class="line">        icon: <span class="string">"success"</span></span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      setPost(<span class="string">""</span>);</span><br><span class="line">      setPostList(postList.concat(post));</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">[tuture-add]  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">getPosts</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]      <span class="keyword">try</span> &#123;</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> res = <span class="keyword">await</span> Taro.request(&#123;</span><br><span class="line">[tuture-add]          url:</span><br><span class="line">[tuture-add]            <span class="string">"https://9ff4272f-ce60-4be6-9376-f9f462482edc.mock.pstmn.io/articles"</span></span><br><span class="line">[tuture-add]        &#125;);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]        <span class="keyword">const</span> postList = res.data.map(<span class="function"><span class="params">item</span> =&gt;</span> item.name);</span><br><span class="line">[tuture-add]        setPostList(postList);</span><br><span class="line">[tuture-add]      &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">[tuture-add]        <span class="built_in">console</span>.log(<span class="string">"err"</span>, err);</span><br><span class="line">[tuture-add]      &#125;</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]    getPosts();</span><br><span class="line">[tuture-add]  &#125;, []);</span><br><span class="line">[tuture-add]</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=<span class="string">"index"</span>&gt;</span><br><span class="line">      &lt;Textarea</span><br><span class="line">        placeholder=<span class="string">"撰写优质教程..."</span></span><br><span class="line">        className=<span class="string">"post-input"</span></span><br><span class="line">        value=&#123;post&#125;</span><br><span class="line">        onInput=&#123;handleChange&#125;</span><br><span class="line">        autoHeight</span><br><span class="line">      /&gt;</span><br><span class="line">      &lt;Button className=<span class="string">"post-button"</span> onClick=&#123;handleSubmit&#125;&gt;</span><br><span class="line">        发表</span><br><span class="line">      &lt;<span class="regexp">/Button&gt;</span></span><br><span class="line"><span class="regexp">      &lt;View className="post-box"&gt;</span></span><br><span class="line"><span class="regexp">        &#123;postList.map(postItem =&gt; (</span></span><br><span class="line"><span class="regexp">          &lt;PostCard post=&#123;postItem&#125; /</span>&gt;</span><br><span class="line">        ))&#125;</span><br><span class="line">      &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Index.config = &#123;</span><br><span class="line">  navigationBarTitleText: <span class="string">"首页"</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>可以看到，我们导入了 <code>useEffect</code> 钩子，并在其中定义了一个异步 <code>getPosts</code> 函数，用于获取初始的帖子列表，接着我们在这个函数中使用 Taro 的请求 API <code>Taro.request</code> 来发起网络请求，并将请求到的数据进行处理更新到 <code>postList</code> 中，关于更多请求的 API 请参考 <span class="exturl" data-url="aHR0cHM6Ly9uZXJ2anMuZ2l0aHViLmlvL3Rhcm8vZG9jcy9hcGlzL25ldHdvcmsvcmVxdWVzdC9yZXF1ZXN0Lmh0bWwjZG9jc05hdg==" title="https://nervjs.github.io/taro/docs/apis/network/request/request.html#docsNav">Taro 文档<i class="fa fa-external-link"></i></span>。</p><p>当添加了上面内容之后，我们可以收获如下的效果：</p><p><img alt data-src="https://static.powerformer.com/c/224996a/1587388568422-eea7383d-94ce-4e18-9a7f-7321e6aa418e.gif"></p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>通过这篇教程快速上手京东小程序开发，我们可以发现得益于 Taro 的优秀跨端特性，即使是最新刚推出的京东小程序也可以游刃有余的开发我们需要的功能，这不禁让我想起了 Taro Next 发布之际，Taro 团队明确的初心和使命：“降低开发成本，提高开发体验和开发效率”，不忘初心，牢记使命，这就是 Taro 团队拥抱变化的方式！</p>]]></content>
    
    <summary type="html">
    
      小程序世界纷争不断，巨型 App 都在纷纷构建自己的小程序流量入口，希望在造福商家、用户的同时，也能巩固自家流量壁垒，我们已经熟知了微信小程序、支付宝小程序，我们可能还知道已经有了头条小程序，QQ 轻应用等，今天为大家带来的是一款新型小程序，是由电商巨头京东即将发布的一款小程序，电商巨头的小程序又会为中国互联网带来怎么样的改变了？让我们拭目以待吧！而我们今天将带大家使用 Taro 来编写京东小程序，并完成可以发文章的的多页面博客小程序。
    
    </summary>
    
    
    
      <category term="Taro" scheme="https://tuture.co/tags/Taro/"/>
    
      <category term="小程序" scheme="https://tuture.co/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
    
      <category term="京东小程序" scheme="https://tuture.co/tags/%E4%BA%AC%E4%B8%9C%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
    
  </entry>
  
  <entry>
    <title>用动画和实战打开 React Hooks（二）：自定义 Hook 和 useCallback</title>
    <link href="https://tuture.co/2020/04/14/xocgOEM/"/>
    <id>https://tuture.co/2020/04/14/xocgOEM/</id>
    <published>2020-04-14T05:59:07.658Z</published>
    <updated>2021-07-11T02:14:56.154Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><img alt class="avatar" data-src="/images/avatars/tuture-dev.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><p class="nickName">@tuture-dev</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcw==" title="https://github.com/tuture-dev/covid-19-with-hooks"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="自定义-Hook：量身定制"><a href="#自定义-Hook：量身定制" class="headerlink" title="自定义 Hook：量身定制"></a>自定义 Hook：量身定制</h2><p>在<a href="https://tuture.co/2020/04/08/870a7b7/">上一篇教程</a>中，我们通过动画的方式不断深入 <code>useState</code> 和 <code>useEffect</code>，基本上理清了 React Hooks 背后的实现机制——<strong>链表</strong>，同时也实现了 COVID-19 数据可视化应用的全球数据总览和多个国家数据的直方图。</p><p>如果你想直接从这一篇教程开始阅读和实践，可下载本教程的源码：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> -b second-part https://github.com/tuture-dev/covid-19-with-hooks.git</span><br><span class="line"><span class="comment"># 或者克隆 Gitee 的仓库</span></span><br><span class="line">git <span class="built_in">clone</span> -b second-part https://gitee.com/tuture/covid-19-with-hooks.git</span><br></pre></td></tr></table></figure><p>自定义 Hook 是 React Hooks 中最有趣的功能，或者说特色。简单来说，它用一种高度灵活的方式，能够让你在不同的函数组件之间共享某些特定的逻辑。我们先来通过一个非常简单的例子来看一下。</p><h3 id="一个简单的自定义-Hook"><a href="#一个简单的自定义-Hook" class="headerlink" title="一个简单的自定义 Hook"></a>一个简单的自定义 Hook</h3><p>先来看一个 Hook，名为 <code>useBodyScrollPosition</code> ，用于获取当前浏览器的垂直滚动位置：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">useBodyScrollPosition</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [scrollPosition, setScrollPosition] = useState(<span class="literal">null</span>);</span><br><span class="line"></span><br><span class="line">  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> handleScroll = <span class="function"><span class="params">()</span> =&gt;</span> setScrollPosition(<span class="built_in">window</span>.scrollY);</span><br><span class="line">    <span class="built_in">document</span>.addEventListener(<span class="string">'scroll'</span>, handleScroll);</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="params">()</span> =&gt;</span></span><br><span class="line">      <span class="built_in">document</span>.removeEventListener(<span class="string">'scroll'</span>, handleScroll);</span><br><span class="line">  &#125;, []);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> scrollPosition;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>通过观察，我们可以发现自定义 Hook 具有以下特点：</p><ul><li>表面上：一个命名格式为 <code>useXXX</code> 的函数，但不是 React 函数式组件</li><li>本质上：内部通过使用 React 自带的一些 Hook （例如 <code>useState</code> 和 <code>useEffect</code> ）来实现某些通用的逻辑</li></ul><p>如果你发散一下思维，可以想到有很多地方可以去做自定义 Hook：DOM 副作用修改/监听、动画、请求、表单操作、数据存储等等。</p><div class="note info">            <p><strong>提示</strong></p><p>这里推荐两个强大的 React Hooks 库：<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3N0cmVhbWljaC9yZWFjdC11c2U=" title="https://github.com/streamich/react-use">React Use<i class="fa fa-external-link"></i></span> 和 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3VtaWpzL2hvb2tz" title="https://github.com/umijs/hooks">Umi Hooks<i class="fa fa-external-link"></i></span>。它们都实现了很多生产级别的自定义 Hook，非常值得学习。</p>          </div><p>我想这便是 React Hooks 最大的魅力——通过几个内置的 Hook，你可以按照某些约定进行任意组合，“制造出”任何你真正需要的 Hook，或者调用他人写好的 Hook，从而轻松应对各种复杂的业务场景。就好像大千世界无奇不有，却不过是由一百多种元素组合而成。</p><h3 id="管窥自定义-Hook-背后的原理"><a href="#管窥自定义-Hook-背后的原理" class="headerlink" title="管窥自定义 Hook 背后的原理"></a>管窥自定义 Hook 背后的原理</h3><p>又到了动画时间。我们来看看在组件初次渲染时的情形：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/17192a0a4b8aa4e7.gif"></p><p>我们在 <code>App</code> 组件中调用了 <code>useCustomHook</code> 钩子。可以看到，<strong>即便我们切换到了自定义 Hook 中，Hook 链表的生成依旧没有改变</strong>。再来看看重渲染的情况：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/17192a0a4b88b06e.gif"></p><p>同样地，即便代码的执行进入到自定义 Hook 中，我们依然可以从 Hook 链表中读取到相应的数据，这个”配对“的过程总能成功。</p><p>我们再次回味一下 Rules of Hook。它规定只有在两个地方能够使用 React Hook：</p><ol><li>React 函数组件</li><li>自定义 Hook</li></ol><p>第一点我们早就清楚了，第二点通过刚才的两个动画相信你也明白了：<strong>自定义 Hook 本质上只是把调用内置 Hook 的过程封装成一个个可以复用的函数，并不影响 Hook 链表的生成和读取</strong>。</p><h3 id="实战环节"><a href="#实战环节" class="headerlink" title="实战环节"></a>实战环节</h3><p>让我们继续 COVID-19 数据应用的开发。接下来，我们打算实现历史数据的展示，包括确诊病例、死亡病例和治愈人数。</p><p>我们首先来实现一个自定义 Hook，名为 <code>useCoronaAPI</code> ，用于共享从 NovelCOVID 19 API 获取数据的逻辑。创建 <code>src/hooks/useCoronaAPI.js</code>，填写代码如下：</p><figure class="highlight js"><figcaption><span>src/hooks/useCoronaAPI.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iL2E1NDM0YTg2Mzg2YWU0ZTQzZWRkZTVlMzY4OTg2N2UxZjRjNmZhYTUvc3JjL2hvb2tzL3VzZUNvcm9uYUFQSS5qcw==" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/a5434a86386ae4e43edde5e3689867e1f4c6faa5/src/hooks/useCoronaAPI.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useState, useEffect &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> BASE_URL = <span class="string">"https://corona.lmao.ninja/v2"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">useCoronaAPI</span>(<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  path,</span></span></span><br><span class="line"><span class="function"><span class="params">  &#123; initialData = null, converter = (data</span>) =&gt; <span class="title">data</span>, <span class="title">refetchInterval</span> = <span class="title">null</span> &#125;</span></span><br><span class="line"><span class="function">) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [data, setData] = useState(initialData);</span><br><span class="line"></span><br><span class="line">  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> fetchData = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">      <span class="keyword">const</span> response = <span class="keyword">await</span> fetch(<span class="string">`<span class="subst">$&#123;BASE_URL&#125;</span><span class="subst">$&#123;path&#125;</span>`</span>);</span><br><span class="line">      <span class="keyword">const</span> data = <span class="keyword">await</span> response.json();</span><br><span class="line">      setData(converter(data));</span><br><span class="line">    &#125;;</span><br><span class="line">    fetchData();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (refetchInterval) &#123;</span><br><span class="line">      <span class="keyword">const</span> intervalId = setInterval(fetchData, refetchInterval);</span><br><span class="line">      <span class="keyword">return</span> <span class="function"><span class="params">()</span> =&gt;</span> clearInterval(intervalId);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, [converter, path, refetchInterval]);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> data;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，定义的 <code>useCoronaAPI</code> 包含两个参数，第一个是 <code>path</code> ，也就是 API 路径；第二是配置参数，包括以下参数：</p><ul><li><code>initialData</code> ：初始为空的默认数据</li><li><code>converter</code> ：对原始数据的转换函数（默认是一个恒等函数）</li><li><code>refetchInterval</code> ：重新获取数据的间隔（以毫秒为单位）</li></ul><p>此外，我们还要注意 <code>useEffect</code> 所传入的 <code>deps</code> 数组，包括了三个元素（都是在 Effect 函数中用到的）：<code>converter</code> 、<code>path</code> 和 <code>refetchInterval</code> ，均来自 <code>useCoronaAPI</code> 传入的参数。</p><div class="note info">            <p><strong>提示</strong></p><p>在<a href="https://tuture.co/2020/04/08/870a7b7/">上一篇文章</a>中，我们简单地提到过，不要对 <code>useEffect</code> 的依赖说谎，那么这里就是一个很好的案例：我们将 Effect 函数<strong>所有用到的外部数据</strong>（包括函数）全部加入到了依赖数组中。当然，由于 <code>BASE_URL</code> 属于模块级别的常量，因此不需要作为依赖。<em>不过这里留了个坑，嘿嘿……</em></p>          </div><p>然后在根组件 <code>src/App.js</code> 中使用刚刚创建的 <code>useCoronaAPI</code> 钩子，代码如下：</p><figure class="highlight js"><figcaption><span>src/App.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iL2E1NDM0YTg2Mzg2YWU0ZTQzZWRkZTVlMzY4OTg2N2UxZjRjNmZhYTUvc3JjL0FwcC5qcw==" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/a5434a86386ae4e43edde5e3689867e1f4c6faa5/src/App.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> React, &#123; useState, useEffect &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> React, &#123; useState &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line">[tuture-del] </span><br><span class="line">[tuture-del]<span class="keyword">const</span> BASE_URL = <span class="string">"https://corona.lmao.ninja/v2"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; useCoronaAPI &#125; <span class="keyword">from</span> <span class="string">"./hooks/useCoronaAPI"</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> [globalStats, setGlobalStats] = useState(&#123;&#125;);</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> [countries, setCountries] = useState([]);</span><br><span class="line">[tuture-del]  <span class="keyword">const</span> [key, setKey] = useState(<span class="string">"cases"</span>);</span><br><span class="line">[tuture-del] </span><br><span class="line">[tuture-del]  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">[tuture-del]    <span class="keyword">const</span> fetchGlobalStats = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">[tuture-del]      <span class="keyword">const</span> response = <span class="keyword">await</span> fetch(<span class="string">`<span class="subst">$&#123;BASE_URL&#125;</span>/all`</span>);</span><br><span class="line">[tuture-del]      <span class="keyword">const</span> data = <span class="keyword">await</span> response.json();</span><br><span class="line">[tuture-del]      setGlobalStats(data);</span><br><span class="line">[tuture-del]    &#125;;</span><br><span class="line">[tuture-del] </span><br><span class="line">[tuture-del]    fetchGlobalStats();</span><br><span class="line">[tuture-del]    <span class="keyword">const</span> intervalId = setInterval(fetchGlobalStats, <span class="number">5000</span>);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> globalStats = useCoronaAPI(<span class="string">"/all"</span>, &#123;</span><br><span class="line">[tuture-add]    initialData: &#123;&#125;,</span><br><span class="line">[tuture-add]    refetchInterval: <span class="number">5000</span>,</span><br><span class="line">[tuture-add]  &#125;);</span><br><span class="line"></span><br><span class="line">[tuture-del]    <span class="keyword">return</span> <span class="function"><span class="params">()</span> =&gt;</span> clearInterval(intervalId);</span><br><span class="line">[tuture-del]  &#125;, []);</span><br><span class="line">[tuture-del] </span><br><span class="line">[tuture-del]  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">[tuture-del]    <span class="keyword">const</span> fetchCountries = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">[tuture-del]      <span class="keyword">const</span> response = <span class="keyword">await</span> fetch(<span class="string">`<span class="subst">$&#123;BASE_URL&#125;</span>/countries?sort=<span class="subst">$&#123;key&#125;</span>`</span>);</span><br><span class="line">[tuture-del]      <span class="keyword">const</span> data = <span class="keyword">await</span> response.json();</span><br><span class="line">[tuture-del]      setCountries(data.slice(<span class="number">0</span>, <span class="number">10</span>));</span><br><span class="line">[tuture-del]    &#125;;</span><br><span class="line">[tuture-del] </span><br><span class="line">[tuture-del]    fetchCountries();</span><br><span class="line">[tuture-del]  &#125;, [key]);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [key, setKey] = useState(<span class="string">"cases"</span>);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> countries = useCoronaAPI(<span class="string">`/countries?sort=<span class="subst">$&#123;key&#125;</span>`</span>, &#123;</span><br><span class="line">[tuture-add]    initialData: [],</span><br><span class="line">[tuture-add]    converter: <span class="function">(<span class="params">data</span>) =&gt;</span> data.slice(<span class="number">0</span>, <span class="number">10</span>),</span><br><span class="line">[tuture-add]  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App;</span><br></pre></td></tr></table></figure><p>整个 <code>App</code> 组件变得清晰了很多，不是吗？</p><p>但是当我们满怀期待地把应用跑起来，却发现整个应用陷入“无限请求”的怪圈中。打开 Chrome 开发者工具的 Network 选项卡，你会发现网络请求数量始终在飙升……</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/17192a0a4cca2311.gif"></p><p>吓得我们赶紧把网页关了。冷静下来之后，不禁沉思：这到底是为什么呢？</p><div class="note danger">            <p><strong>危险</strong></p><p><span class="exturl" data-url="aHR0cHM6Ly9jb3JvbmEubG1hby5uaW5qYS9kb2NzLyMv" title="https://corona.lmao.ninja/docs/#/">NovelCOVID 19 API<i class="fa fa-external-link"></i></span> 属于公益性质的数据资源，我们应该尽快把页面关掉，避免给对方的服务器造成太大的请求压力。</p>          </div><h2 id="useCallback：定海神针"><a href="#useCallback：定海神针" class="headerlink" title="useCallback：定海神针"></a>useCallback：定海神针</h2><p>如果你一字一句把<a href="https://tuture.co/2020/04/08/870a7b7/">上一篇文章</a>看下来，其实可能已经发现了问题的线索：</p><blockquote><p>依赖数组在判断元素是否发生改变时使用了 <code>Object.is</code> 进行比较，因此当 <code>deps</code> 中某一元素为非原始类型时（例如函数、对象等），<strong>每次渲染都会发生改变</strong>，从而每次都会触发 Effect，失去了 <code>deps</code> 本身的意义。</p></blockquote><p>OK，如果你没有印象也没关系，我们先来聊一聊初学 React Hooks 经常会遇到的一个问题：Effect 无限循环。</p><h3 id="关于-Effect-无限循环"><a href="#关于-Effect-无限循环" class="headerlink" title="关于 Effect 无限循环"></a>关于 Effect 无限循环</h3><p>来看一下这段”永不停止“的计数器：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">EndlessCounter</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [count, setCount] = useState(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> setCount(count + <span class="number">1</span>), <span class="number">1000</span>);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div className=<span class="string">"App"</span>&gt;</span><br><span class="line">      &lt;h1&gt;&#123;count&#125;&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如果你去运行这段代码，会发现数字永远在增长。我们来通过一段动画来演示一下这个”无限循环“到底是怎么回事：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/17192a0a4d97501f.gif"></p><p>我们的组件陷入了：<strong>渲染 =&gt; 触发 Effect =&gt; 修改状态 =&gt; 触发重渲染</strong>的无限循环。</p><p>想必你已经发现 <code>useEffect</code> 陷入无限循环的”罪魁祸首“了——因为没有提供正确的 <code>deps</code> ！从而导致每次渲染后都会去执行 Effect 函数。事实上，在之前的 <code>useCoronaAPI</code> 中，也是因为传入的 <code>deps</code> 存在问题，导致每次渲染后都去执行 Effect 函数去获取数据，陷入了无限循环。那么，到底是哪个依赖出现了问题？</p><p>没错，就是那个 <code>converter</code> 函数！我们知道，在 JavaScript 中，原始类型和非原始类型在判断值是否相同的时候有巨大的差别：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 原始类型</span></span><br><span class="line"><span class="literal">true</span> === <span class="literal">true</span> <span class="comment">// true</span></span><br><span class="line"><span class="number">1</span> === <span class="number">1</span> <span class="comment">// true</span></span><br><span class="line"><span class="string">'a'</span> === <span class="string">'a'</span> <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 非原始类型</span></span><br><span class="line">&#123;&#125; === &#123;&#125; <span class="comment">// false</span></span><br><span class="line">[] === [] <span class="comment">// false</span></span><br><span class="line">() =&gt; &#123;&#125; === <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125; <span class="comment">// false</span></span><br></pre></td></tr></table></figure><p>同样，每次传入的 <code>converter</code> 函数虽然形式上一样，但仍然是不同的函数（引用不相等），从而导致每次都会执行 Effect 函数。</p><h3 id="关于记忆化缓存（Memoization）"><a href="#关于记忆化缓存（Memoization）" class="headerlink" title="关于记忆化缓存（Memoization）"></a>关于记忆化缓存（Memoization）</h3><p>Memoization，一般称为记忆化缓存（或者“记忆”），听上去是很高深的计算机专业术语，但是它背后的思想很简单：假如我们有一个<strong>计算量很大的纯函数</strong>（给定相同的输入，一定会得到相同的输出），那么我们在第一次遇到特定输入的时候，把它的输出结果“记”（缓存）下来，那么下次碰到同样的输出，只需要从缓存里面拿出来直接返回就可以了，省去了计算的过程！</p><p>实际上，除了节省不必要的计算、从而提高程序性能之外，Memoization 还有一个用途：<strong>用了保证返回值的引用相等</strong>。</p><p>我们先通过一段简单的求平方根的函数，熟悉一下 Memoization 的原理。首先是一个没有缓存的版本：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sqrt</span>(<span class="params">arg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">result</span>: <span class="built_in">Math</span>.sqrt(arg) &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>你也许注意到了我们特地返回了一个对象来记录结果，我们后面会和 Memoized 的版本进行对比分析。然后是加了缓存的版本：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">memoizedSqrt</span>(<span class="params">arg</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 如果 cache 不存在，则初始化一个空对象</span></span><br><span class="line">  <span class="keyword">if</span> (!memoizedSqrt.cache) &#123;</span><br><span class="line">    memoizedSqrt.cache = &#123;&#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 如果 cache 没有命中，则先计算，再存入 cache，然后返回结果</span></span><br><span class="line">  <span class="keyword">if</span> (!memoizedSqrt.cache[arg]) &#123;</span><br><span class="line">    <span class="keyword">return</span> memoizedSqrt.cache[arg] = &#123; <span class="attr">result</span>: <span class="built_in">Math</span>.sqrt(arg) &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 直接返回 cache 内的结果，无需计算</span></span><br><span class="line">  <span class="keyword">return</span> memoizedSqrt.cache[arg];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后我们尝试调用这两个函数，就会发现一些明显的区别：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">sqrt(<span class="number">9</span>)                      <span class="comment">// &#123; result: 3 &#125;</span></span><br><span class="line">sqrt(<span class="number">9</span>) === sqrt(<span class="number">9</span>)          <span class="comment">// false</span></span><br><span class="line"><span class="built_in">Object</span>.is(sqrt(<span class="number">9</span>), sqrt(<span class="number">9</span>))  <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line">memoizedSqrt(<span class="number">9</span>)                              <span class="comment">// &#123; result: 3 &#125;</span></span><br><span class="line">memoizedSqrt(<span class="number">9</span>) === memoizedSqrt(<span class="number">9</span>)          <span class="comment">// true</span></span><br><span class="line"><span class="built_in">Object</span>.is(memoizedSqrt(<span class="number">9</span>), memoizedSqrt(<span class="number">9</span>))  <span class="comment">// true</span></span><br></pre></td></tr></table></figure><p>普通的 <code>sqrt</code> 每次返回的结果的引用都不相同（或者说是一个<strong>全新</strong>的对象），而 <code>memoizedSqrt</code> 则能返回完全相同的对象。因此在 React 中，通过 Memoization 可以确保多次渲染中的 Prop 或者状态的引用相等，从而能够避免不必要的重渲染或者副作用执行。</p><p>让我们来总结一下记忆化缓存（Memoization）的两个使用场景：</p><ul><li>通过缓存计算结果，节省费时的计算</li><li>保证相同输入下返回值的引用相等</li></ul><h3 id="使用方法和原理解析"><a href="#使用方法和原理解析" class="headerlink" title="使用方法和原理解析"></a>使用方法和原理解析</h3><p>为了解决函数在多次渲染中的<strong>引用相等</strong>（Referential Equality）问题，React 引入了一个重要的 Hook—— <code>useCallback</code>。官方文档介绍的使用方法如下：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> memoizedCallback = useCallback(callback, deps);</span><br></pre></td></tr></table></figure><p>第一个参数 <code>callback</code> 就是需要记忆的函数，第二个参数就是大家熟悉的 <code>deps</code> 参数，同样也是一个依赖数组（有时候也被称为输入 <code>inputs</code>）。在 Memoization 的上下文中，这个 <code>deps</code> 的作用相当于缓存中的键（Key），如果键没有改变，那么就直接返回缓存中的函数，并且确保是引用相同的函数。</p><p>在大多数情况下，我们都是传入空数组 <code>[]</code> 作为 <code>deps</code> 参数，这样 <code>useCallback</code> 返回的就<strong>始终是同一个函数，永远不会更新</strong>。</p><div class="note info">            <p><strong>提示</strong></p><p>你也许在刚开始学习 <code>useEffect</code> 的时候就发现：我们并不需要把 <code>useState</code> 返回的第二个 Setter 函数作为 Effect 的依赖。实际上，React 内部已经对 Setter 函数做了 Memoization 处理，因此每次渲染拿到的 Setter 函数都是完全一样的，<code>deps</code> 加不加都是没有影响的。</p>          </div><p>按照惯例，我们还是通过一段动画来了解一下 <code>useCallback</code> 的原理（<code>deps</code> 为空数组的情况），首先是初次渲染：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/17192a0a4d08c4c2.gif"></p><p>和之前一样，调用 <code>useCallback</code> 也是追加到 Hook 链表上，不过这里着重强调了这个函数 <code>f1</code> 所指向的内存位置（随便画了一个），从而明确告诉我们：<strong>这个 **</strong><code>f1</code><strong>** 始终是指向同一个函数</strong>。然后返回的 <code>onClick</code> 则是指向 Hook 中存储的 <code>f1</code>。</p><p>再来看看重渲染的情况：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/17192a0a4d874a81.gif"></p><p>重渲染的时候，再次调用 <code>useCallback</code> 同样返回给我们 <code>f1</code> 函数，并且这个函数还是指向同一块内存，从而使得 <code>onClick</code> 函数和上次渲染时真正做到了<strong>引用相等</strong>。</p><h3 id="useCallback-和-useMemo-的关系"><a href="#useCallback-和-useMemo-的关系" class="headerlink" title="useCallback 和 useMemo 的关系"></a>useCallback 和 useMemo 的关系</h3><p>我们知道 <code>useCallback</code> 有个好基友叫 <code>useMemo</code>。还记得我们之前总结了 Memoization 的两大场景吗？<code>useCallback</code> 主要是为了解决函数的”<strong>引用相等</strong>“问题，而 <code>useMemo</code> 则是一个”<strong>全能型选手</strong>“，能够同时胜任引用相等和节约计算的任务。</p><p>实际上，<code>useMemo</code> 的功能是 <code>useCallback</code> 的<strong>超集</strong>。与 <code>useCallback</code> 只能缓存函数相比，<code>useMemo</code> 可以缓存任何类型的值（当然也包括函数）。<code>useMemo</code> 的使用方法如下：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> memoizedValue = useMemo(<span class="function"><span class="params">()</span> =&gt;</span> computeExpensiveValue(a, b), [a, b]);</span><br></pre></td></tr></table></figure><p>其中第一个参数是一个函数，这个函数返回值的返回值（也就是上面 <code>computeExpensiveValue</code> 的结果）将返回给 <code>memoizedValue</code> 。因此以下两个钩子的使用是完全等价的：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">useCallback(fn, deps);</span><br><span class="line">useMemo(<span class="function"><span class="params">()</span> =&gt;</span> fn, deps);</span><br></pre></td></tr></table></figure><p>鉴于在前端开发中遇到的计算密集型任务是相当少的，而且浏览器引擎的性能也足够优秀，因此这一系列文章不会深入去讲解 <code>useMemo</code> 的使用。更何况，已经掌握 <code>useCallback</code> 的你，应该也已经知道怎么去使用 <code>useMemo</code> 了吧？</p><h3 id="实战环节-1"><a href="#实战环节-1" class="headerlink" title="实战环节"></a>实战环节</h3><p>熟悉了 <code>useCallback</code> 之后，我们开始修复 <code>useCoronaAPI</code> 钩子的问题。修改 <code>src/hooks/useCoronaAPI</code> ，代码如下：</p><figure class="highlight js"><figcaption><span>src/hooks/useCoronaAPI.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzRjYzEyZDg5OTdhYTBhZmRlOTkxNmM3M2Q5NmY0MzUyYjViNzJhMzIvc3JjL2hvb2tzL3VzZUNvcm9uYUFQSS5qcw==" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/4cc12d8997aa0afde9916c73d96f4352b5b72a32/src/hooks/useCoronaAPI.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> &#123; useState, useEffect &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; useState, useEffect, useCallback &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">useCoronaAPI</span>(<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  <span class="regexp">//</span> ...</span></span></span><br><span class="line"><span class="function"><span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [data, setData] = useState(initialData);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> convertData = useCallback(converter, []);</span><br><span class="line"></span><br><span class="line">  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> fetchData = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">[tuture-del]      setData(converter(data));</span><br><span class="line">[tuture-add]      setData(convertData(data));</span><br><span class="line">    &#125;;</span><br><span class="line">    fetchData();</span><br><span class="line"></span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">[tuture-del]  &#125;, [converter, path, refetchInterval]);</span><br><span class="line">[tuture-add]  &#125;, [convertData, path, refetchInterval]);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> data;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，我们把 <code>converter</code> 函数用 <code>useCallback</code> 包裹了起来，把记忆化处理后的函数命名为 <code>convertData</code>，并且传入的 <code>deps</code> 参数为空数组 <code>[]</code> ，确保每次渲染都相同。然后把 <code>useEffect</code> 中所有的 <code>converter</code> 函数相应修改成 <code>convertData</code>。</p><p>最后再次开启项目，一切又回归了正常，这次自定义 Hook 重构圆满完成！在下一篇教程中，我们将开始进一步推进 COVID-19 数据可视化项目的推进，通过曲线图的方式实现历史数据的展示（包括确诊、死亡和治愈）。数据状态变得越来越复杂，我们又该如何应对呢？敬请期待。</p><blockquote><p>剧透提醒：用 useReducer + useContext 实现一个简单的 Redux！</p></blockquote><h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><ul><li><span class="exturl" data-url="aHR0cHM6Ly9yZWFjdGpzLm9yZy9kb2NzL2hvb2tzLXJlZmVyZW5jZS5odG1s" title="https://reactjs.org/docs/hooks-reference.html">React 官方文档<i class="fa fa-external-link"></i></span></li><li>DT-FE：<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2R0LWZlL3dlZWtseS9ibG9iL3YyLzA4MC4lRTclQjIlQkUlRTglQUYlQkIlRTMlODAlOEElRTYlODAlOEUlRTQlQjklODglRTclOTQlQTglMjBSZWFjdCUyMEhvb2tzJTIwJUU5JTgwJUEwJUU4JUJEJUFFJUU1JUFEJTkwJUUzJTgwJThCLm1k" title="https://github.com/dt-fe/weekly/blob/v2/080.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%80%8E%E4%B9%88%E7%94%A8%20React%20Hooks%20%E9%80%A0%E8%BD%AE%E5%AD%90%E3%80%8B.md">怎么用 React Hooks 造轮子<i class="fa fa-external-link"></i></span></li><li>WellPaidGeed：<span class="exturl" data-url="aHR0cHM6Ly9kZXYudG8vd2VsbHBhaWRnZWVrL2hvdy10by13cml0ZS1jdXN0b20taG9va3MtaW4tcmVhY3QtMWFuYQ==" title="https://dev.to/wellpaidgeek/how-to-write-custom-hooks-in-react-1ana">How to write custom hooks in React<i class="fa fa-external-link"></i></span></li><li>Netlify Blog：<span class="exturl" data-url="aHR0cHM6Ly93d3cubmV0bGlmeS5jb20vYmxvZy8yMDE5LzAzLzExL2RlZXAtZGl2ZS1ob3ctZG8tcmVhY3QtaG9va3MtcmVhbGx5LXdvcmsv" title="https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/">Deep dive: How do React hooks really work?<i class="fa fa-external-link"></i></span></li><li>Andrew Myint：<span class="exturl" data-url="aHR0cHM6Ly9tZWRpdW0uY29tL0BhbmRyZXdteWludC9pbmZpbml0ZS1sb29wLWluc2lkZS11c2VlZmZlY3QtcmVhY3QtaG9va3MtNjc0OGRlNjI4NzE=" title="https://medium.com/@andrewmyint/infinite-loop-inside-useeffect-react-hooks-6748de62871">How to Fix the Infinite Loop Inside “useEffect” (React Hooks)<i class="fa fa-external-link"></i></span></li><li>Kent C. Dodds：<span class="exturl" data-url="aHR0cHM6Ly9rZW50Y2RvZGRzLmNvbS9ibG9nL3VzZW1lbW8tYW5kLXVzZWNhbGxiYWNr" title="https://kentcdodds.com/blog/usememo-and-usecallback">When to useMemo and useCallback<i class="fa fa-external-link"></i></span></li><li>Sandro Dolidze：<span class="exturl" data-url="aHR0cHM6Ly9tZWRpdW0uY29tL0BzZG9saWR6ZS9yZWFjdC1ob29rcy1tZW1vaXphdGlvbi05OWE5YTkxYzg4NTM=" title="https://medium.com/@sdolidze/react-hooks-memoization-99a9a91c8853">React Hooks: Memoization<i class="fa fa-external-link"></i></span></li><li>Chidume Nnamdi：<span class="exturl" data-url="aHR0cHM6Ly9ibG9nLmJpdHNyYy5pby91bmRlcnN0YW5kaW5nLW1lbW9pemF0aW9uLWluLWphdmFzY3JpcHQtdG8taW1wcm92ZS1wZXJmb3JtYW5jZS0yNzYzYWIxMDcwOTI=" title="https://blog.bitsrc.io/understanding-memoization-in-javascript-to-improve-performance-2763ab107092">Understanding Memoization in JavaScript to Improve Performance<i class="fa fa-external-link"></i></span></li></ul>]]></content>
    
    <summary type="html">
    
      在第二篇教程中，我们将手把手带你用自定义 Hook 重构之前的组件代码，让它变得更清晰、并且可以实现逻辑复用。在重构完成之后，我们陷入了组件“不断获取数据并重新渲染”的无限循环，这时候，useCallback 站了出来，如同定海神针一般拯救了我们的应用……
    
    </summary>
    
    
      <category term="前端" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="React" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/"/>
    
      <category term="入门" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/%E5%85%A5%E9%97%A8/"/>
    
    
      <category term="React" scheme="https://tuture.co/tags/React/"/>
    
      <category term="React Hooks" scheme="https://tuture.co/tags/React-Hooks/"/>
    
  </entry>
  
  <entry>
    <title>用动画和实战打开 React Hooks（一）：useState 和 useEffect</title>
    <link href="https://tuture.co/2020/04/08/870a7b7/"/>
    <id>https://tuture.co/2020/04/08/870a7b7/</id>
    <published>2020-04-07T18:52:36.227Z</published>
    <updated>2021-07-11T02:14:56.153Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><img alt class="avatar" data-src="/images/avatars/tuture-dev.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXY=" title="https://github.com/tuture-dev"><p class="nickName">@tuture-dev</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcw==" title="https://github.com/tuture-dev/covid-19-with-hooks"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="起步"><a href="#起步" class="headerlink" title="起步"></a>起步</h2><h3 id="前提条件"><a href="#前提条件" class="headerlink" title="前提条件"></a>前提条件</h3><p>在阅读这篇教程之前，希望你已经做了如下准备：</p><ul><li>掌握了 React 基础知识，例如组件、JSX、状态等等，如果你不了解的话，请先学习<a href="https://tuture.co/2019/11/18/07acf61/">《一杯茶的时间，上手 React 框架》</a></li><li>配置好 Node 环境，可参考<a href="https://tuture.co/2019/12/03/892fa12/">《一杯茶的时间，上手 Node.js》</a></li></ul><h3 id="为什么会有-Hooks？"><a href="#为什么会有-Hooks？" class="headerlink" title="为什么会有 Hooks？"></a>为什么会有 Hooks？</h3><p>在 Hooks 出现之前，类组件和函数组件的分工一般是这样的：</p><ul><li><strong>类组件</strong>提供了完整的状态管理和生命周期控制，通常用来承接复杂的业务逻辑，被称为<em>“聪明组件”</em></li><li><strong>函数组件</strong>则是纯粹的从数据到视图的映射，对状态毫无感知，因此通常被称为“<em>傻瓜组件</em>”</li></ul><p>有些团队还制定了这样的 React 组件开发约定：</p><blockquote><p>有状态的组件没有渲染，有渲染的组件没有状态。</p></blockquote><p>那么 Hooks 的出现又是为了解决什么问题呢？我们可以试图总结一下类组件颇具代表性的<strong>痛点</strong>：</p><ol><li>令人头疼的 <code>this</code> 管理，容易引入难以追踪的 Bug</li><li>生命周期的划分并不符合“内聚性”原则，例如 <code>setInterval</code> 和 <code>clearInterval</code> 这种具有强关联的逻辑被拆分在不同的生命周期方法中</li><li>组件复用（数据共享或功能复用）的困局，从早期的 Mixin，到<span class="exturl" data-url="aHR0cHM6Ly96aC1oYW5zLnJlYWN0anMub3JnL2RvY3MvaGlnaGVyLW9yZGVyLWNvbXBvbmVudHMuaHRtbA==" title="https://zh-hans.reactjs.org/docs/higher-order-components.html">高阶组件（HOC）<i class="fa fa-external-link"></i></span>，再到 <span class="exturl" data-url="aHR0cHM6Ly96aC1oYW5zLnJlYWN0anMub3JnL2RvY3MvcmVuZGVyLXByb3BzLmh0bWw=" title="https://zh-hans.reactjs.org/docs/render-props.html">Render Props<i class="fa fa-external-link"></i></span>，始终没有一个清晰直观又便于维护的组件复用方案</li></ol><p>没错，随着 Hooks 的推出，这些痛点都成为了历史！</p><h3 id="为什么要写这一系列-Hooks-教程？"><a href="#为什么要写这一系列-Hooks-教程？" class="headerlink" title="为什么要写这一系列 Hooks 教程？"></a>为什么要写这一系列 Hooks 教程？</h3><p>如何快速学习并掌握 React Hooks 一直是困扰很多新手或者老玩家的一个问题，而笔者在日常的学习和开发中也发现了以下头疼之处：</p><ul><li>React 官方文档对 Hooks 的讲解偏应用，对原理的阐述一笔带过</li><li>讲 React Hooks 的优秀文章很多，但大多专注于讲解一两个 Hook，要想一网打尽有难度</li><li>看了很多使用方法甚至源码分析，但是没法和具体的使用场景对应起来，不了解怎么在实际开发中灵活运用</li></ul><p>如果你也有同样的困惑，希望这一系列文章能帮助你拨开云雾，让 Hooks 成为你的称手兵器。我们将通过一个完整的 COVID-19 数据可视化项目，结合 Hooks 的动画原理讲解，让你真正地精通 React Hooks！</p><p>说实话，Hooks 的知识点相当分散，就像游乐园的游玩项目一样，选择一条完美的路线很难。但是不管怎么样，希望在接下来的旅程中，你能玩得开心😊！</p><h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>首先，通过 Create React App（以下简称 CRA） 初始化项目：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npx create-react-app covid-19-with-hooks</span><br></pre></td></tr></table></figure><p>在少许等待之后，进入项目。</p><div class="note info">            <p><strong>提示</strong></p><p>我们所有的数据源自 <span class="exturl" data-url="aHR0cHM6Ly9jb3JvbmEubG1hby5uaW5qYS9kb2NzLyMv" title="https://corona.lmao.ninja/docs/#/">NovelCOVID 19 API<i class="fa fa-external-link"></i></span>，可以点击访问其全部的 API 文档。</p>          </div><p>一切就绪，让我们出发吧！</p><h2 id="useState-useEffect：初来乍到"><a href="#useState-useEffect：初来乍到" class="headerlink" title="useState + useEffect：初来乍到"></a>useState + useEffect：初来乍到</h2><p>首先，让我们从最最最常用的两个 Hooks 说起：<code>useState</code> 和 <code>useEffect</code> 。很有可能，你在平时的学习和开发中已经接触并使用过了（当然如果你刚开始学也没关系啦）。不过在此之前，我们先熟悉一下 React 函数式组件的运行过程。</p><h3 id="理解函数式组件的运行过程"><a href="#理解函数式组件的运行过程" class="headerlink" title="理解函数式组件的运行过程"></a>理解函数式组件的运行过程</h3><p>我们知道，Hooks <strong>只能用于 React 函数式组件</strong>。因此理解函数式组件的运行过程对掌握 Hooks 中许多重要的特性很关键，请看下图：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/1717865fb8a13cfe.gif"></p><p>可以看到，函数式组件严格遵循 <code>UI = render(data)</code> 的模式。当我们第一次调用组件函数时，触发<strong>初次渲染</strong>；然后随着 <code>props</code> 的改变，便会重新调用该组件函数，触发<strong>重渲染</strong>。</p><p>你也许会纳闷，动画里面为啥要并排画三个一样的组件呢？因为我想通过这种方式直观地阐述函数式组件的一个重要思想：</p><blockquote><p>每一次渲染都是完全独立的。</p></blockquote><p>后面我们将沿用这样的风格，并一步步地介绍 Hook 在函数式组件中扮演怎样的角色。</p><h3 id="useState-使用浅析"><a href="#useState-使用浅析" class="headerlink" title="useState 使用浅析"></a>useState 使用浅析</h3><p>首先我们来简单地了解一下 <code>useState</code> 钩子的使用，官方文档介绍的使用方法如下：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> [state, setState] = useState(initialValue);</span><br></pre></td></tr></table></figure><p>其中 <code>state</code> 就是一个状态变量，<code>setState</code> 是一个用于修改状态的 Setter 函数，而 <code>initialValue</code> 则是状态的初始值。</p><p>光看代码可能有点抽象，请看下面的动画：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/1717865fbad32d1c.gif"></p><p>与之前的纯函数式组件相比，我们引入了 <code>useState</code> 这个钩子，瞬间就打破了之前 <code>UI = render(data)</code> 的安静画面——函数组件居然可以<strong>从组件之外把状态和修改状态的函数“钩”过来</strong>！并且仔细看上面的动画，<strong>通过调用 Setter 函数，居然还可以直接触发组件的重渲染</strong>！</p><div class="note info">            <p><strong>提示</strong></p><p>你也许注意到了所有的“钩子”都指向了一个绿色的问号，我们会在下面详细地分析那是什么，现在就暂时把它看作是组件之外可以访问的一个“神秘领域”。</p>          </div><p>结合上面的动画，我们可以得出一个重要的推论：<strong>每次渲染具有独立的状态值</strong>（毕竟每次渲染都是完全独立的嘛）。也就是说，每个函数中的 <code>state</code> 变量只是一个简单的<strong>常量</strong>，每次渲染时从钩子中获取到的常量，并没有附着数据绑定之类的神奇魔法。</p><p>这也就是老生常谈的 <strong>Capture Value</strong> 特性。可以看下面这段经典的计数器代码（来自 Dan 的<span class="exturl" data-url="aHR0cHM6Ly9vdmVycmVhY3RlZC5pby9hLWNvbXBsZXRlLWd1aWRlLXRvLXVzZWVmZmVjdC8=" title="https://overreacted.io/a-complete-guide-to-useeffect/">这篇精彩的文章<i class="fa fa-external-link"></i></span>）：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Counter</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [count, setCount] = useState(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleAlertClick</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      alert(<span class="string">'You clicked on: '</span> + count);</span><br><span class="line">    &#125;, <span class="number">3000</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;p&gt;You clicked &#123;count&#125; times&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">      &lt;button onClick=&#123;() =&gt; setCount(count + 1)&#125;&gt;</span></span><br><span class="line"><span class="regexp">        Click me</span></span><br><span class="line"><span class="regexp">      &lt;/</span>button&gt;</span><br><span class="line">      &lt;button onClick=&#123;handleAlertClick&#125;&gt;</span><br><span class="line">        Show alert</span><br><span class="line">      &lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>实现了上面这个计数器后（也可以直接通过这个 <span class="exturl" data-url="aHR0cHM6Ly9jb2Rlc2FuZGJveC5pby9zL3cyd3hsM3lvMGw=" title="https://codesandbox.io/s/w2wxl3yo0l">Sandbox<i class="fa fa-external-link"></i></span> 进行体验），按如下步骤操作：1）点击 Click me 按钮，把数字增加到 3；2）点击 Show alert 按钮；3）在 <code>setTimeout</code> 触发之前点击 Click me，把数字增加到 5。</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/1717865fbc70e63d.gif"></p><p>结果是 Alert 显示 3！</p><p>如果你觉得这个结果很正常，恭喜你已经理解了 Capture Value 的思想！如果你觉得匪夷所思嘛……来简单解释一下：</p><ul><li>每次渲染相互独立，因此每次渲染时组件中的状态、事件处理函数等等都是独立的，或者说<strong>只属于</strong>所在的那一次渲染</li><li>我们在 <code>count</code> 为 3 的时候触发了 <code>handleAlertClick</code> 函数，这个函数<strong>所记住的</strong> <code>count</code> 也为 3</li><li>三秒种后，刚才函数的 <code>setTimeout</code> 结束，输出<strong>当时记住的</strong>结果：3</li></ul><p>这道理就像，你翻开十年前的日记本，虽然是现在翻开的，但记录的仍然是十年前的时光。或者说，日记本 Capture 了那一段美好的回忆。</p><h3 id="useEffect-使用浅析"><a href="#useEffect-使用浅析" class="headerlink" title="useEffect 使用浅析"></a>useEffect 使用浅析</h3><p>你可能已经听说 <code>useEffect</code> 类似类组件中的生命周期方法。但是在开始学习 <code>useEffect</code> 之前，建议你暂时忘记生命周期模型，毕竟函数组件和类组件是不同的世界。官方文档介绍 <code>useEffect</code> 的使用方法如下：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">useEffect(effectFn, deps)</span><br></pre></td></tr></table></figure><p><code>effectFn</code> 是一个执行某些可能具有<strong>副作用</strong>的 Effect 函数（例如数据获取、设置/销毁定时器等），它可以返回一个<strong>清理函数</strong>（Cleanup），例如大家所熟悉的 <code>setInterval</code> 和 <code>clearInterval</code> ：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> intervalId = setInterval(doSomething(), <span class="number">1000</span>);</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="params">()</span> =&gt;</span> clearInterval(intervalId);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>可以看到，我们在 Effect 函数体内通过 <code>setInterval</code> 启动了一个定时器，随后又返回了一个 Cleanup 函数，用于销毁刚刚创建的定时器。</p><p>OK，听上去还是很抽象，再来看看下面的动画吧：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/1717865fbc8ba58f.gif"></p><p>动画中有以下需要注意的点：</p><ul><li>每个 Effect 必然在渲染之后执行，因此不会阻塞渲染，提高了性能</li><li>在运行每个 Effect 之前，运行前一次渲染的 Effect Cleanup 函数（如果有的话）</li><li>当组件销毁时，运行最后一次 Effect 的 Cleanup 函数</li></ul><div class="note info">            <p><strong>提示</strong></p><p>将 Effect 推迟到渲染完成之后执行是出于性能的考虑，如果你想在渲染之前执行某些逻辑（不惜牺牲渲染性能），那么可使用 <span class="exturl" data-url="aHR0cHM6Ly9yZWFjdGpzLm9yZy9kb2NzL2hvb2tzLXJlZmVyZW5jZS5odG1sI3VzZWxheW91dGVmZmVjdA==" title="https://reactjs.org/docs/hooks-reference.html#uselayouteffect"><code>useLayoutEffect</code><i class="fa fa-external-link"></i></span> 钩子，使用方法与 <code>useEffect</code> 完全一致，只是执行的时机不同。</p>          </div><p>再来看看 <code>useEffect</code> 的第二个参数：<code>deps</code> （依赖数组）。从上面的演示动画中可以看出，React 会在<strong>每次渲染后都运行 Effect</strong>。而依赖数组就是用来控制是否应该触发 Effect，从而能够减少不必要的计算，从而优化了性能。具体而言，只要依赖数组中的每一项与上一次渲染相比都没有改变，那么就跳过本次 Effect 的执行。</p><p>仔细一想，我们发现 <code>useEffect</code> 钩子与之前类组件的生命周期相比，有两个显著的特点：</p><ul><li>将初次渲染（<code>componentDidMount</code>）、重渲染（<code>componentDidUpdate</code>）和销毁（<code>componentDidUnmount</code>）三个阶段的逻辑用一个统一的 API 去解决</li><li>把相关的逻辑都放到一个 Effect 里面（例如 <code>setInterval</code> 和 <code>clearInterval</code>），更突出逻辑的内聚性</li></ul><p>在最极端的情况下，我们可以指定 <code>deps</code> 为空数组 <code>[]</code> ，这样可以确保 Effect <strong>只会在组件初次渲染后执行</strong>。实际效果动画如下：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/1717865fbf149bdc.gif"></p><p>可以看到，后面的所有重渲染都不会触发 Effect 的执行；在组件销毁时，运行 Effect Cleanup 函数。</p><div class="note warning">            <p><strong>注意</strong></p><p>如果你熟悉 React 的重渲染机制，那么应该可以猜到 <code>deps</code> 数组在判断元素是否发生改变时同样也使用了 <code>Object.is</code> 进行比较。因此一个隐患便是，当 <code>deps</code> 中某一元素为非原始类型时（例如函数、对象等），<strong>每次渲染都会发生改变</strong>，从而失去了 <code>deps</code> 本身的意义（条件式地触发 Effect）。我们会在接下来讲解如何规避这个困境。</p>          </div><h3 id="实战环节"><a href="#实战环节" class="headerlink" title="实战环节"></a>实战环节</h3><p>OK，到了实战环节，我们先实现获取全球数据概况（每 5 秒重新获取一次）。创建 <code>src/components/GlobalStats.js</code> 组件，用于展示全球数据概况，代码如下：</p><figure class="highlight js"><figcaption><span>src/components/GlobalStats.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzVkODIzMmQyNjBjZmI3ZTE4ODU1NzVjZTE1MTNkM2YwN2Q2NjJhMzAvc3JjL2NvbXBvbmVudHMvR2xvYmFsU3RhdHMuanM=" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/5d8232d260cfb7e1885575ce1513d3f07d662a30/src/components/GlobalStats.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Stat</span>(<span class="params">&#123; number, color &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&#123;&#123;</span> <span class="attr">color:</span> <span class="attr">color</span>, <span class="attr">fontWeight:</span> "<span class="attr">bold</span>" &#125;&#125;&gt;</span>&#123;number&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">GlobalStats</span>(<span class="params">&#123; stats &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; cases, deaths, recovered, active, updated &#125; = stats;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div className=<span class="string">'global-stats'</span>&gt;</span><br><span class="line">      &lt;small&gt;Updated on &#123;<span class="keyword">new</span> <span class="built_in">Date</span>(updated).toLocaleString()&#125;&lt;<span class="regexp">/small&gt;</span></span><br><span class="line"><span class="regexp">      &lt;table&gt;</span></span><br><span class="line"><span class="regexp">        &lt;tr&gt;</span></span><br><span class="line"><span class="regexp">          &lt;td&gt;</span></span><br><span class="line"><span class="regexp">            Cases: &lt;Stat number=&#123;cases&#125; color='red' /</span>&gt;</span><br><span class="line">          &lt;<span class="regexp">/td&gt;</span></span><br><span class="line"><span class="regexp">          &lt;td&gt;</span></span><br><span class="line"><span class="regexp">            Deaths: &lt;Stat number=&#123;deaths&#125; color='gray' /</span>&gt;</span><br><span class="line">          &lt;<span class="regexp">/td&gt;</span></span><br><span class="line"><span class="regexp">          &lt;td&gt;</span></span><br><span class="line"><span class="regexp">            Recovered: &lt;Stat number=&#123;recovered&#125; color='green' /</span>&gt;</span><br><span class="line">          &lt;<span class="regexp">/td&gt;</span></span><br><span class="line"><span class="regexp">          &lt;td&gt;</span></span><br><span class="line"><span class="regexp">            Active: &lt;Stat number=&#123;active&#125; color='orange' /</span>&gt;</span><br><span class="line">          &lt;<span class="regexp">/td&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>tr&gt;</span><br><span class="line">      &lt;<span class="regexp">/table&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> GlobalStats;</span><br></pre></td></tr></table></figure><p>可以看到，<code>GlobalStats</code> 就是一个简单的函数式组件，没有任何钩子。</p><p>然后修改 <code>src/App.js</code> ，引入刚刚创建的 <code>GlobalStats</code> 组件，代码如下：</p><figure class="highlight js"><figcaption><span>src/App.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzVkODIzMmQyNjBjZmI3ZTE4ODU1NzVjZTE1MTNkM2YwN2Q2NjJhMzAvc3JjL0FwcC5qcw==" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/5d8232d260cfb7e1885575ce1513d3f07d662a30/src/App.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> logo <span class="keyword">from</span> <span class="string">'./logo.svg'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> <span class="string">'./App.css'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> React, &#123; useState, useEffect &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]<span class="keyword">import</span> <span class="string">"./App.css"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> GlobalStats <span class="keyword">from</span> <span class="string">"./components/GlobalStats"</span>;</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]<span class="keyword">const</span> BASE_URL = <span class="string">"https://corona.lmao.ninja/v2"</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [globalStats, setGlobalStats] = useState(&#123;&#125;);</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> fetchGlobalStats = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> response = <span class="keyword">await</span> fetch(<span class="string">`<span class="subst">$&#123;BASE_URL&#125;</span>/all`</span>);</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> data = <span class="keyword">await</span> response.json();</span><br><span class="line">[tuture-add]      setGlobalStats(data);</span><br><span class="line">[tuture-add]    &#125;;</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]    fetchGlobalStats();</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> intervalId = setInterval(fetchGlobalStats, <span class="number">5000</span>);</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]    <span class="keyword">return</span> <span class="function"><span class="params">()</span> =&gt;</span> clearInterval(intervalId);</span><br><span class="line">[tuture-add]  &#125;, []);</span><br><span class="line">[tuture-add] </span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">[tuture-del]    &lt;div className=<span class="string">"App"</span>&gt;</span><br><span class="line">[tuture-del]      &lt;header className=<span class="string">"App-header"</span>&gt;</span><br><span class="line">[tuture-del]        &lt;img src=&#123;logo&#125; className=<span class="string">"App-logo"</span> alt=<span class="string">"logo"</span> /&gt;</span><br><span class="line">[tuture-del]        &lt;p&gt;</span><br><span class="line">[tuture-del]          Edit &lt;code&gt;src/App.js&lt;<span class="regexp">/code&gt; and save to reload.</span></span><br><span class="line"><span class="regexp">[tuture-del]        &lt;/</span>p&gt;</span><br><span class="line">[tuture-del]        &lt;a</span><br><span class="line">[tuture-del]          className=<span class="string">"App-link"</span></span><br><span class="line">[tuture-del]          href=<span class="string">"https://reactjs.org"</span></span><br><span class="line">[tuture-del]          target=<span class="string">"_blank"</span></span><br><span class="line">[tuture-del]          rel=<span class="string">"noopener noreferrer"</span></span><br><span class="line">[tuture-del]        &gt;</span><br><span class="line">[tuture-del]          Learn React</span><br><span class="line">[tuture-del]        &lt;<span class="regexp">/a&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]      &lt;/</span>header&gt;</span><br><span class="line">[tuture-add]    &lt;div className=<span class="string">'App'</span>&gt;</span><br><span class="line">[tuture-add]      &lt;h1&gt;COVID<span class="number">-19</span>&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]      &lt;GlobalStats stats=&#123;globalStats&#125; /</span>&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default App;</span></span><br></pre></td></tr></table></figure><p>可以看到，我们在 <code>App</code> 组件中，首先通过 <code>useState</code> 钩子引入了 <code>globalStats</code> 状态变量，以及修改该状态的函数。然后通过 <code>useEffect</code> 钩子获取 API 数据，其中有以下需要注意的点：</p><ol><li>我们通过定义了一个 <code>fetchGlobalStats</code> 异步函数并进行调用从而获取数据，而不是直接把这个 async 函数作为 <code>useEffect</code> 的第一个参数；</li><li>创建了一个 Interval，用于每 5 秒钟重新获取一次数据；</li><li>返回一个函数，用于销毁之前创建的 Interval。</li></ol><p>此外，第二个参数（依赖数组）为空数组，因此整个 Effect 函数只会运行一次。</p><div class="note warning">            <p><strong>注意</strong></p><p>有时候，你也许会不经意间把 Effect 写成一个 async 函数：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">useEffect(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> response = <span class="keyword">await</span> fetch(<span class="string">'...'</span>);</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;, []);</span><br></pre></td></tr></table></figure><p>这样可以吗？<strong>强烈建议你不要这样做</strong>。<code>useEffect</code> 约定 Effect 函数要么没有返回值，要么返回一个 Cleanup 函数。而这里 async 函数会隐式地返回一个 Promise，直接违反了这一约定，会造成不可预测的结果。</p>          </div><p>最后附上应用的全局 CSS 文件，代码如下（直接复制粘贴即可）：</p><figure class="highlight css"><figcaption><span>src/App.css</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iLzVkODIzMmQyNjBjZmI3ZTE4ODU1NzVjZTE1MTNkM2YwN2Q2NjJhMzAvc3JjL0FwcC5jc3M=" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/5d8232d260cfb7e1885575ce1513d3f07d662a30/src/App.css">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.App</span> &#123;</span><br><span class="line">[tuture-add]  width: 1200px;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">margin</span>: <span class="selector-tag">auto</span>;</span><br><span class="line">  <span class="selector-tag">text-align</span>: <span class="selector-tag">center</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="selector-class">.App-logo</span> &#123;</span><br><span class="line">[tuture-del]  height: 40vmin;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">pointer-events</span>: <span class="selector-tag">none</span>;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>&#125;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span> </span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="keyword">@media</span> (<span class="attribute">prefers-reduced-motion:</span> no-preference) &#123;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-class">.App-logo</span> &#123;</span><br><span class="line">[tuture-del]    animation: App-logo-spin infinite 20s linear;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  &#125;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>&#125;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span> </span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="selector-class">.App-header</span> &#123;</span><br><span class="line">[tuture-del]  background-color: #282c34;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">min-height</span>: 100<span class="selector-tag">vh</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.history-group</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">[tuture-del]  flex-direction: column;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">align-items</span>: <span class="selector-tag">center</span>;</span><br><span class="line">  <span class="selector-tag">justify-content</span>: <span class="selector-tag">center</span>;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">font-size</span>: <span class="selector-tag">calc</span>(10<span class="selector-tag">px</span> + 2<span class="selector-tag">vmin</span>);</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">color</span>: <span class="selector-tag">white</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">width</span>: 1200<span class="selector-tag">px</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">margin</span>: <span class="selector-tag">auto</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>&#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span> </span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-tag">table</span>,</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-tag">th</span>,</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-tag">td</span> &#123;</span><br><span class="line">[tuture-add]  border: 1px solid #ccc;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">border-collapse</span>: <span class="selector-tag">collapse</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="selector-class">.App-link</span> &#123;</span><br><span class="line">[tuture-del]  color: #61dafb;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-tag">th</span>,</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-tag">td</span> &#123;</span><br><span class="line">[tuture-add]  padding: 5px;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">text-align</span>: <span class="selector-tag">left</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="keyword">@keyframes</span> App-logo-spin &#123;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">from</span> &#123;</span><br><span class="line">[tuture-del]    transform: rotate(0deg);</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  &#125;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">to</span> &#123;</span><br><span class="line">[tuture-del]    transform: rotate(360deg);</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  &#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.global-stats</span> &gt; <span class="selector-tag">table</span> &#123;</span><br><span class="line">[tuture-add]  margin: auto;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">margin-top</span>: 0<span class="selector-class">.5rem</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">margin-bottom</span>: 1<span class="selector-tag">rem</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>通过 <code>npm start</code> 开启项目：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171786603098c448.png"></p><p>此外，你可以检查一下控制台的 Network 选项卡，应该能看到我们的应用每五秒就会发起一次请求查询最新的数据。恭喜你，成功地用 Hooks 进行了一次数据获取！</p><h2 id="useState-useEffect：渐入佳境"><a href="#useState-useEffect：渐入佳境" class="headerlink" title="useState + useEffect：渐入佳境"></a>useState + useEffect：渐入佳境</h2><p>在上一步骤中，我们在 <code>App</code> 组件中定义了一个 State 和 Effect，但是实际应用不可能这么简单，一般都需要多个 State 和 Effect，这时候又该怎么去理解和使用呢？</p><h3 id="深入-useState-的本质"><a href="#深入-useState-的本质" class="headerlink" title="深入 useState 的本质"></a>深入 useState 的本质</h3><p>在上一节的动画中，我们看到每一次渲染组件时，我们都能通过一个神奇的钩子把状态”钩“过来，不过这些钩子从何而来我们打了一个问号。现在，是时候解开谜团了。</p><div class="note warning">            <p><strong>注意</strong></p><p>以下动画演示并不完全对应 React Hooks 的源码实现，但是它能很好地帮助你理解其工作原理。当然，也能帮助你去啃真正的源码。</p>          </div><p>我们先来看看当组件初次渲染（挂载）时，情况到底是什么样的：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171786605bc81ad0.gif"></p><p>注意以下要点：</p><ol><li>在初次渲染时，我们通过 <code>useState</code> 定义了多个状态；</li><li>每调用一次 <code>useState</code> ，都会在组件之外生成一条 Hook 记录，同时包括状态值（用 <code>useState</code> 给定的初始值初始化）和修改状态的 Setter 函数；</li><li>多次调用 <code>useState</code> 生成的 Hook 记录形成了一条<strong>链表</strong>；</li><li>触发 <code>onClick</code> 回调函数，调用 <code>setS2</code> 函数修改 <code>s2</code> 的状态，不仅修改了 Hook 记录中的状态值，还即将<strong>触发重渲染</strong>。</li></ol><p>OK，重渲染的时候到了，动画如下：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171786607069e72d.gif"></p><p>可以看到，在初次渲染结束之后、重渲染之前，Hook 记录链表依然存在。当我们逐个调用 <code>useState</code> 的时候，<code>useState</code> 便返回了 Hook 链表中存储的状态，以及修改状态的 Setter。</p><div class="note info">            <p><strong>提示</strong></p><p>当你充分理解上面两个动画之后，其实就能理解为什么这个 Hook 叫 <code>useState</code> 而不是 <code>createState</code> 了——之所以叫 <code>use</code> ，是因为没有的时候才创建（初次渲染的时候），有的时候就直接读取（重渲染的时候）。</p>          </div><p>通过以上的分析，我们不难发现 <code>useState</code> 在设计方面的精巧（摘自张立理：<span class="exturl" data-url="aHR0cHM6Ly96aHVhbmxhbi56aGlodS5jb20vcC80ODI2NDcxMw==" title="https://zhuanlan.zhihu.com/p/48264713">对 React Hooks 的一些思考<i class="fa fa-external-link"></i></span>）：</p><ul><li>状态和修改状态的 Setter 函数两两配对，并且后者一定影响前者，前者只被后者影响，作为一个整体它们完全不受外界的影响</li><li>鼓励细粒度和扁平化的状态定义和控制，对于代码行为的可预测性和可测试性大有帮助</li><li>除了 <code>useState</code> （和其他钩子），函数组件依然是实现渲染逻辑的“纯”组件，对状态的管理被 Hooks 所封装了起来</li></ul><h3 id="深入-useEffect-的本质"><a href="#深入-useEffect-的本质" class="headerlink" title="深入 useEffect 的本质"></a>深入 useEffect 的本质</h3><p>在对 <code>useState</code> 进行一波深挖之后，我们再来揭开 <code>useEffect</code> 神秘的面纱。实际上，你可能已经猜到了——同样是通过一个链表记录所有的 Hook，请看下面的演示：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/17178660689c7301.gif"></p><p>注意其中一些细节：</p><ol><li><code>useState</code> 和 <code>useEffect</code> 在每次调用时都被添加到 Hook 链表中；</li><li><code>useEffect</code> 还会额外地在一个队列中添加一个等待执行的 Effect 函数；</li><li>在渲染完成后，依次调用 Effect 队列中的每一个 Effect 函数。</li></ol><p>至此，上一节的动画中那两个“问号”的身世也就揭晓了——只不过是<strong>链表</strong>罢了！回过头来，我们想起来 React 官方文档 Rules of Hooks 中强调过一点：</p><blockquote><p>Only call hooks at the top level. 只在最顶层使用 Hook。</p></blockquote><p>具体地说，不要在循环、嵌套、条件语句中使用 Hook——因为这些动态的语句很有可能会导致每次执行组件函数时调用 Hook 的顺序不能完全一致，导致 Hook 链表记录的数据失效。具体的场景就不画动画啦，自行脑补吧~</p><h3 id="不要撒谎：关于-deps-的那些事"><a href="#不要撒谎：关于-deps-的那些事" class="headerlink" title="不要撒谎：关于 deps 的那些事"></a>不要撒谎：关于 deps 的那些事</h3><p><code>useEffect</code> （包括其他类似的 <code>useCallback</code> 和 <code>useMemo</code> 等）都有个依赖数组（<code>deps</code>）参数，这个参数比较有趣的一点是：指定依赖的决定权完全在你手里。你当然可以选择“撒谎”，不管什么情况都给一个空的 <code>deps</code> 数组，仿佛在说“这个 Effect 函数什么依赖都没有，相信我”。</p><p>然而，这种有点偷懒的做法显然会引来各种 Bug。一般来说，所使用到的 <code>prop</code> 或者 <code>state</code> 都应该被添加到 <code>deps</code> 数组里面去。并且，React 官方还推出了一个专门的 <span class="exturl" data-url="aHR0cHM6Ly93d3cubnBtanMuY29tL3BhY2thZ2UvZXNsaW50LXBsdWdpbi1yZWFjdC1ob29rcw==" title="https://www.npmjs.com/package/eslint-plugin-react-hooks">ESLint 插件<i class="fa fa-external-link"></i></span>，可以帮你自动修复 <code>deps</code> 数组（<em>说实话，这个插件的自动修复有时候还是挺闹心的……</em>）。</p><h3 id="实战环节-1"><a href="#实战环节-1" class="headerlink" title="实战环节"></a>实战环节</h3><p>从这一步开始，我们将使用 <span class="exturl" data-url="aHR0cDovL3JlY2hhcnRzLm9yZw==" title="http://recharts.org">Recharts<i class="fa fa-external-link"></i></span> 作为可视化应用的图表库，它提供了出色的 D3 和 React 的绑定层。通过如下命令添加 <code>recharts</code> 依赖：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install recharts</span><br></pre></td></tr></table></figure><p>创建 <code>src/components/CountriesChart.js</code> ，用于展示多个国家的相关数据直方图，代码如下：</p><figure class="highlight js"><figcaption><span>src/components/CountriesChart.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iL2FjYTE3NzQ2OGVjYjQyMjBhMzM2ZDBkOGY5MWUzNmY5YmRkNzBiOTcvc3JjL2NvbXBvbmVudHMvQ291bnRyaWVzQ2hhcnQuanM=" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/aca177468ecb4220a336d0d8f91e36f9bdd70b97/src/components/CountriesChart.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  BarChart,</span><br><span class="line">  CartesianGrid,</span><br><span class="line">  XAxis,</span><br><span class="line">  YAxis,</span><br><span class="line">  Tooltip,</span><br><span class="line">  Legend,</span><br><span class="line">  Bar,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">"recharts"</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">CountriesChart</span>(<span class="params">&#123; data, dataKey &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;BarChart</span><br><span class="line">      width=&#123;<span class="number">1200</span>&#125;</span><br><span class="line">      height=&#123;<span class="number">250</span>&#125;</span><br><span class="line">      style=&#123;&#123; <span class="attr">margin</span>: <span class="string">"auto"</span> &#125;&#125;</span><br><span class="line">      margin=&#123;&#123; <span class="attr">top</span>: <span class="number">30</span>, <span class="attr">left</span>: <span class="number">20</span>, <span class="attr">right</span>: <span class="number">30</span> &#125;&#125;</span><br><span class="line">      data=&#123;data&#125;</span><br><span class="line">    &gt;</span><br><span class="line">      &lt;CartesianGrid strokeDasharray=<span class="string">'3 3'</span> /&gt;</span><br><span class="line">      &lt;XAxis dataKey=<span class="string">'country'</span> /&gt;</span><br><span class="line">      &lt;YAxis /&gt;</span><br><span class="line">      &lt;Tooltip /&gt;</span><br><span class="line">      &lt;Legend /&gt;</span><br><span class="line">      &lt;Bar dataKey=&#123;dataKey&#125; fill=<span class="string">'#8884d8'</span> /&gt;</span><br><span class="line">    &lt;<span class="regexp">/BarChart&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default CountriesChart;</span></span><br></pre></td></tr></table></figure><p>创建 <code>src/components/SelectDataKey.js</code> ，用于选择需要展示的关键指标，代码如下：</p><figure class="highlight js"><figcaption><span>src/components/SelectDataKey.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iL2FjYTE3NzQ2OGVjYjQyMjBhMzM2ZDBkOGY5MWUzNmY5YmRkNzBiOTcvc3JjL2NvbXBvbmVudHMvU2VsZWN0RGF0YUtleS5qcw==" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/aca177468ecb4220a336d0d8f91e36f9bdd70b97/src/components/SelectDataKey.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">SelectDataKey</span>(<span class="params">&#123; onChange &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;&gt;</span><br><span class="line">      &lt;label htmlFor=<span class="string">'key-select'</span>&gt;Select a key <span class="keyword">for</span> sorting: &lt;<span class="regexp">/label&gt;</span></span><br><span class="line"><span class="regexp">      &lt;select id='key-select' onChange=&#123;onChange&#125;&gt;</span></span><br><span class="line"><span class="regexp">        &lt;option value='cases'&gt;Cases&lt;/</span>option&gt;</span><br><span class="line">        &lt;option value=<span class="string">'todayCases'</span>&gt;Today Cases&lt;<span class="regexp">/option&gt;</span></span><br><span class="line"><span class="regexp">        &lt;option value='deaths'&gt;Death&lt;/</span>option&gt;</span><br><span class="line">        &lt;option value=<span class="string">'recovered'</span>&gt;Recovered&lt;<span class="regexp">/option&gt;</span></span><br><span class="line"><span class="regexp">        &lt;option value='active'&gt;Active&lt;/</span>option&gt;</span><br><span class="line">      &lt;<span class="regexp">/select&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> SelectDataKey;</span><br></pre></td></tr></table></figure><p><code>SelectDataKey</code> 用于让用户选择以下关键指标：</p><ul><li><code>cases</code> ：累积确诊病例</li><li><code>todayCases</code> ：今日确诊病例</li><li><code>deaths</code> ：累积死亡病例</li><li><code>recovered</code> ：治愈人数</li><li><code>active</code> ：现存确诊人数</li></ul><p>最后我们在根组件 <code>src/App.js</code> 中引入上面创建的两个组件，代码如下：</p><figure class="highlight js"><figcaption><span>src/App.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvY292aWQtMTktd2l0aC1ob29rcy9ibG9iL2FjYTE3NzQ2OGVjYjQyMjBhMzM2ZDBkOGY5MWUzNmY5YmRkNzBiOTcvc3JjL0FwcC5qcw==" title="https://github.com/tuture-dev/covid-19-with-hooks/blob/aca177468ecb4220a336d0d8f91e36f9bdd70b97/src/App.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line"><span class="keyword">import</span> GlobalStats <span class="keyword">from</span> <span class="string">"./components/GlobalStats"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> CountriesChart <span class="keyword">from</span> <span class="string">"./components/CountriesChart"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> SelectDataKey <span class="keyword">from</span> <span class="string">"./components/SelectDataKey"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> BASE_URL = <span class="string">"https://corona.lmao.ninja/v2"</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [globalStats, setGlobalStats] = useState(&#123;&#125;);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [countries, setCountries] = useState([]);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [key, setKey] = useState(<span class="string">"cases"</span>);</span><br><span class="line"></span><br><span class="line">  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;, []);</span><br><span class="line"></span><br><span class="line">[tuture-add]  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> fetchCountries = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> response = <span class="keyword">await</span> fetch(<span class="string">`<span class="subst">$&#123;BASE_URL&#125;</span>/countries?sort=<span class="subst">$&#123;key&#125;</span>`</span>);</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> data = <span class="keyword">await</span> response.json();</span><br><span class="line">[tuture-add]      setCountries(data.slice(<span class="number">0</span>, <span class="number">10</span>));</span><br><span class="line">[tuture-add]    &#125;;</span><br><span class="line">[tuture-add] </span><br><span class="line">[tuture-add]    fetchCountries();</span><br><span class="line">[tuture-add]  &#125;, [key]);</span><br><span class="line">[tuture-add] </span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div className=<span class="string">'App'</span>&gt;</span><br><span class="line">      &lt;h1&gt;COVID<span class="number">-19</span>&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">      &lt;GlobalStats stats=&#123;globalStats&#125; /</span>&gt;</span><br><span class="line">[tuture-add]      &lt;SelectDataKey onChange=&#123;(e) =&gt; setKey(e.target.value)&#125; /&gt;</span><br><span class="line">[tuture-add]      &lt;CountriesChart data=&#123;countries&#125; dataKey=&#123;key&#125; /&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default App;</span></span><br></pre></td></tr></table></figure><p>可以看到：</p><ol><li>我们创建了两个新的状态 <code>countries</code> （所有国家的数据）和 <code>key</code> （数据排序的指标，就是上面的五个）；</li><li>我们又通过一个 <code>useEffect</code> 钩子进行数据获取，和之前获取全球数据类似，只不过注意我们这边第二个参数（依赖数组）是 <code>[key]</code> ，也就是只有当 <code>key</code> 状态改变的时候，才会调用 <code>useEffect</code> 里面的函数。</li><li>最后使用之前创建的两个子组件，传入相应的数据和回调函数。</li></ol><p>把项目跑起来，可以看到直方图显示了前十个国家的数据，并且可以修改排序的指标（比如可以从默认的累积确诊 <code>cases</code> 切换成死亡人数 <code>deaths</code> ）：</p><p><img alt data-src="https://static.powerformer.com/c/870a7b7/171786607417628c.gif"></p><p>看上去挺不错的！</p><p>到这里，本系列第一篇也就讲完啦，希望你真正理解了 <code>useState</code> 和 <code>useEffect</code> ——最最最常用的两个 Hook。在下一篇教程中，我们将继续讲解自定义 Hook 和 <code>useCallback</code> ，敬请期待。</p><h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><ul><li><span class="exturl" data-url="aHR0cHM6Ly9yZWFjdGpzLm9yZy8=" title="https://reactjs.org/">React 官方文档<i class="fa fa-external-link"></i></span></li><li>Robin Wieruch：<span class="exturl" data-url="aHR0cHM6Ly93d3cucm9iaW53aWVydWNoLmRlL3JlYWN0LWhvb2tzLWZldGNoLWRhdGE=" title="https://www.robinwieruch.de/react-hooks-fetch-data">How to fetch data with React Hooks?<i class="fa fa-external-link"></i></span></li><li>Dan Abramov：<span class="exturl" data-url="aHR0cHM6Ly9vdmVycmVhY3RlZC5pby9hLWNvbXBsZXRlLWd1aWRlLXRvLXVzZWVmZmVjdC8=" title="https://overreacted.io/a-complete-guide-to-useeffect/">A Complete Guide to useEffect<i class="fa fa-external-link"></i></span></li><li>Dan Abramov：<span class="exturl" data-url="aHR0cHM6Ly9vdmVycmVhY3RlZC5pby9ob3ctYXJlLWZ1bmN0aW9uLWNvbXBvbmVudHMtZGlmZmVyZW50LWZyb20tY2xhc3Nlcy8=" title="https://overreacted.io/how-are-function-components-different-from-classes/">How Are Function Components Different from Classes?<i class="fa fa-external-link"></i></span></li><li>Rudi Yardley：<span class="exturl" data-url="aHR0cHM6Ly9tZWRpdW0uY29tL0ByeWFyZGxleS9yZWFjdC1ob29rcy1ub3QtbWFnaWMtanVzdC1hcnJheXMtY2Q0ZjE4NTcyMzZl" title="https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e">React hooks: not magic, just arrays<i class="fa fa-external-link"></i></span></li><li>Eytan Manor：<span class="exturl" data-url="aHR0cHM6Ly9tZWRpdW0uY29tL3RoZS1ndWlsZC91bmRlci10aGUtaG9vZC1vZi1yZWFjdHMtaG9va3Mtc3lzdGVtLWViNTk2MzhjOWRiYQ==" title="https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba">Under the hood of React’s hooks system<i class="fa fa-external-link"></i></span></li><li>衍良：<span class="exturl" data-url="aHR0cHM6Ly96aHVhbmxhbi56aGlodS5jb20vcC85MjIxMTUzMw==" title="https://zhuanlan.zhihu.com/p/92211533">React Hooks 完全上手指南<i class="fa fa-external-link"></i></span></li><li>张立理：<span class="exturl" data-url="aHR0cHM6Ly96aHVhbmxhbi56aGlodS5jb20vcC80ODI2NDcxMw==" title="https://zhuanlan.zhihu.com/p/48264713">对 React Hooks 的一些思考<i class="fa fa-external-link"></i></span></li></ul>]]></content>
    
    <summary type="html">
    
      自从 React 16.8 发布之后，它带来的 React Hooks 在前端圈引起了一场无法逆转的风暴。React Hooks 为函数式组件提供了无限的功能，解决了类组件很多的固有缺陷。这篇教程将带你快速熟悉并掌握最常用的两个 Hook：useState 和 useEffect。在了解如何使用的同时，还能管窥背后的原理，顺便实现一个 COVID-19（新冠肺炎）可视化应用。
    
    </summary>
    
    
      <category term="前端" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="React" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/"/>
    
      <category term="入门" scheme="https://tuture.co/categories/%E5%89%8D%E7%AB%AF/React/%E5%85%A5%E9%97%A8/"/>
    
    
      <category term="React" scheme="https://tuture.co/tags/React/"/>
    
      <category term="React Hooks" scheme="https://tuture.co/tags/React-Hooks/"/>
    
  </entry>
  
  <entry>
    <title>类型即正义：TypeScript 从入门到实践（二）</title>
    <link href="https://tuture.co/2020/04/06/H2r1tpF/"/>
    <id>https://tuture.co/2020/04/06/H2r1tpF/</id>
    <published>2020-04-06T02:20:24.050Z</published>
    <updated>2021-07-11T07:16:33.967Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9t" title="https://github.com/pftom"><img alt class="avatar" data-src="/images/avatars/pftom.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9t" title="https://github.com/pftom"><p class="nickName">@pftom</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVh" title="https://github.com/pftom/typescript-tea"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><p>我们在之前 <code>TodoInputProps</code> 中对 <code>onChange</code> 函数做了类型注解，当时我们没有详细讲解，在这一节中我们就来详细讲解一下 TS 中的函数。</p><h3 id="注解函数"><a href="#注解函数" class="headerlink" title="注解函数"></a>注解函数</h3><p>比如我们有如下的函数：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">x, y</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> x + y;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>那么我们该如何注解这个函数了？实际上函数主要的部分就是输入和输出，所以我们在注解函数的时候只需要注解函数的参数和返回值就可以了，因为上述的函数体内是是执行 <code>x+y</code> 操作，以我们的 <code>x</code> 和 <code>y</code> 应该都是 <code>number</code> 数字类型，返回值也是 <code>number</code> 数字类型，所以我们对上面的函数进行类型注解如下：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">x: <span class="built_in">number</span>, y: <span class="built_in">number</span></span>): <span class="title">number</span> </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> x + y;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到我们用冒号注解形式给 <code>x</code> 和 <code>y</code> 注解了 <code>number</code> 类型，而对于返回值，我们直接以 <code>add(): number</code> 的形式注解返回值。有时候返回值也可以不写，TS 可以根据参数类型和函数体计算返回值类型，也就是俗称的自动推断类型机制。</p><h3 id="函数类型"><a href="#函数类型" class="headerlink" title="函数类型"></a>函数类型</h3><p>除了注解函数，有时候我们还涉及到将函数赋值给一个变量，比如如下的例子：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> add = <span class="function"><span class="keyword">function</span> (<span class="params">x, y</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> x + y;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>这个时候我们一般来注解 <code>add</code> 时候，就需要使用函数类型来注解它，一个函数类型是形如：<code>(args1: type1, args2: type2, ..., args2: typen) =&gt; returnType</code> 的类型，所以对于上述的例子我们可以对其注解如下：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> add: (x: <span class="built_in">number</span>, y: <span class="built_in">number</span>): <span class="built_in">number</span> =  <span class="function"><span class="keyword">function</span>(<span class="params">x, y</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> x + y;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可能有同学有疑问了，这里我们给 <code>add</code> 变量注解了函数类型，但是我们没有给后面的那个函数进行一个注解啊？其实 TS 会进行类型的自动推导，根据函数类型的结构对比后面的函数，会自动推断出后面函数的 <code>x</code> ，<code>y</code> 和返回值都为 <code>number</code> 。</p><h3 id="可选参数"><a href="#可选参数" class="headerlink" title="可选参数"></a>可选参数</h3><p>就像我们之前接口（Interface）中有可选属性一样，我们的函数中也存在可选参数，因为使用 TS 最大的好处之一就是尽可能的明确函数、接口等类型定义，方便其他团队成员很清晰了解代码的接口，大大提高团队协作的效率，所以如果一个函数可能存在一些参数，但是我们并不是每次都需要传递这些参数，那么它们就属于可选参数的范围。</p><p>我们来看一下可选参数的例子，比如我们想写一个构造一个人姓名的函数，包含 <code>firstName</code> 和 <code>lastName</code> ，但是有时候我们不知道 <code>lastName</code> ，那么这样一个函数该怎么写了？：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">buildName</span>(<span class="params">firstName: <span class="built_in">string</span>, lastName?: <span class="built_in">string</span></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到上面我们构建一个人姓名的函数，必须得传递 <code>firstName</code> 属性，但是因为 <code>lastName</code> 可能有时候并不能获取到，所以把它设置为可选参数，所以以下几种函数调用方式都是可以的：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">buildName(<span class="string">'Tom'</span>, <span class="string">'Huang'</span>);</span><br><span class="line">buildName(<span class="string">'mRcfps'</span>);</span><br></pre></td></tr></table></figure><h3 id="重载"><a href="#重载" class="headerlink" title="重载"></a>重载</h3><p>重载（Overloads）是 TS 独有的概念，在 JS 中没有，它主要为函数多返回类型服务，具体来说就是一个函数可能会在内部执行一个条件语句，根据不同的条件返回不同的值，这些值可能是不同类型的，那么这个时候我们该怎么来给返回值注解类型了？</p><p>答案就是使用重载，通过定义一系列同样函数名，不同参数列表和返回值的函数来注解多类型返回值函数，我们来看一个多类型返回的函数：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> suits = [<span class="string">'hearts'</span>, <span class="string">'spades'</span>, <span class="string">'clubs'</span>, <span class="string">'diamonds'</span>];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">pickCard</span>(<span class="params">x</span>): <span class="title">any</span> </span>&#123;</span><br><span class="line">  <span class="comment">// 如果 x 是 `object` 类型，那么我们返回 pickCard 从 myDeck 里面取出 pickCard1 数据</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> x == <span class="string">'object'</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> pickedCard = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * x.length);</span><br><span class="line">    <span class="keyword">return</span> pickedCard;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 如果 x 是 `number` 类型，那么直接返回一个可以取数据的 pickCard2</span></span><br><span class="line">  <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> x == <span class="string">'number'</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> pickedSuit = <span class="built_in">Math</span>.floor(x / <span class="number">13</span>);</span><br><span class="line">    <span class="keyword">return</span> &#123; suit: suits[pickedSuit], card: x % <span class="number">13</span> &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> myDeck = [</span><br><span class="line">  &#123; suit: <span class="string">'diamonds'</span>, card: <span class="number">2</span> &#125;,</span><br><span class="line">  &#123; suit: <span class="string">'spades'</span>, card: <span class="number">10</span> &#125;,</span><br><span class="line">  &#123; suit: <span class="string">'hearts'</span>, card: <span class="number">4</span> &#125;,</span><br><span class="line">];</span><br><span class="line"><span class="keyword">let</span> pickedCard1 = myDeck[pickCard(myDeck)];</span><br><span class="line">alert(<span class="string">'card: '</span> + pickedCard1.card + <span class="string">' of '</span> + pickedCard1.suit);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> pickedCard2 = pickCard(<span class="number">15</span>);</span><br><span class="line">alert(<span class="string">'card: '</span> + pickedCard2.card + <span class="string">' of '</span> + pickedCard2.suit);</span><br></pre></td></tr></table></figure><p>针对上面的这个例子，我们这个 <code>pickCard</code> 函数根据 <code>x</code> 的类型会有不同的返回类型，有的同学可能会有疑问了，之前我们不是说过，TS 能够根据参数类型和函数体自动推断返回值类型嘛？是的，之前那个例子参数类型只有一种选项，所以可以自动推断出返回值类型，但是这里的情况是：“参数类型可能有多种选项，对应不同选项的参数类型，会有不同的返回值类型，并且我们对参数类型还未知”。针对这种情况，我们直接解耦这个对应关系，使用重载就可以很好的表达出来：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> suits = [<span class="string">'hearts'</span>, <span class="string">'spades'</span>, <span class="string">'clubs'</span>, <span class="string">'diamonds'</span>];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">pickCard</span>(<span class="params">x: &#123; suit: <span class="built_in">string</span>; card: <span class="built_in">number</span> &#125;[]</span>): <span class="title">number</span></span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">pickCard</span>(<span class="params">x: <span class="built_in">number</span></span>): </span>&#123; suit: <span class="built_in">string</span>; card: <span class="built_in">number</span> &#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">pickCard</span>(<span class="params">x</span>): <span class="title">any</span> </span>&#123;</span><br><span class="line">  <span class="comment">// 如果 x 是 `object` 类型，那么我们返回 pickCard 从 myDeck 里面取出 pickCard1 数据</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> x == <span class="string">'object'</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> pickedCard = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * x.length);</span><br><span class="line">    <span class="keyword">return</span> pickedCard;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 如果 x 是 `number` 类型，那么直接返回一个可以取数据的 pickCard2</span></span><br><span class="line">  <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> x == <span class="string">'number'</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> pickedSuit = <span class="built_in">Math</span>.floor(x / <span class="number">13</span>);</span><br><span class="line">    <span class="keyword">return</span> &#123; suit: suits[pickedSuit], card: x % <span class="number">13</span> &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> myDeck = [</span><br><span class="line">  &#123; suit: <span class="string">'diamonds'</span>, card: <span class="number">2</span> &#125;,</span><br><span class="line">  &#123; suit: <span class="string">'spades'</span>, card: <span class="number">10</span> &#125;,</span><br><span class="line">  &#123; suit: <span class="string">'hearts'</span>, card: <span class="number">4</span> &#125;,</span><br><span class="line">];</span><br><span class="line"><span class="keyword">let</span> pickedCard1 = myDeck[pickCard(myDeck)];</span><br><span class="line">alert(<span class="string">'card: '</span> + pickedCard1.card + <span class="string">' of '</span> + pickedCard1.suit);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> pickedCard2 = pickCard(<span class="number">15</span>);</span><br><span class="line">alert(<span class="string">'card: '</span> + pickedCard2.card + <span class="string">' of '</span> + pickedCard2.suit);</span><br></pre></td></tr></table></figure><p>我们可以看到这段代码比上面唯一多了的就是两端 <code>function pickCard(x: type1): type2</code> 语句，所以重载实际上就是函数名一样，参数列表和返回值不一样，我们来解析一下上面多出的两个重载：</p><ul><li>第一个重载，我们给参数 <code>x</code> 赋值了一个数组类型，数组的项是一个对象，对象包含两个属性 <code>suit</code> 和 <code>card</code> ，它们的类型分别为 <code>string</code> 和 <code>number</code> ；接着返回值类型为 <code>number</code> 类型，这个对应 <code>x</code> 的类型为 <code>object</code> 时，返回类型为 <code>number</code> 这种情况。</li><li>第二个重载，我们给参数 <code>x</code> 赋值了一个 <code>number</code> 类型，然后返回值类型是一个对象，它有两个属性 <code>suit</code> 和 <code>card</code> ，对应的类型为 <code>string</code> 和 <code>number</code> ；这个对应 <code>x</code> 的类型为 <code>number</code> 返回值类型为 <code>object</code> 类型这种情况。</li></ul><h3 id="动手实践"><a href="#动手实践" class="headerlink" title="动手实践"></a>动手实践</h3><p>学习了 TS 的函数之后，我们马上来运用在我们的 待办事项 应用里面，首先我们打开 <code>src/utils/data.ts</code> 对其中的数据做一点修改：</p><figure class="highlight ts"><figcaption><span>src/utils/data.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvZjI0ZGMzMTI1ZTdjNmY0MWMxNjM4YTg0YjRlM2RiZmFmNWQ5YTg5Mi9zcmMvdXRpbHMvZGF0YS50cw==" title="https://github.com/pftom/typescript-tea/blob/f24dc3125e7c6f41c1638a84b4e3dbfaf5d9a892/src/utils/data.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">interface</span> Todo &#123;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">interface</span> Todo &#123;</span><br><span class="line">[tuture-add]  id: <span class="built_in">string</span>;</span><br><span class="line">  user: <span class="built_in">string</span>;</span><br><span class="line">[tuture-del]  time: <span class="built_in">string</span>;</span><br><span class="line">[tuture-add]  date: <span class="built_in">string</span>;</span><br><span class="line">  content: <span class="built_in">string</span>;</span><br><span class="line">  isCompleted: <span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">interface</span> User &#123;</span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="keyword">interface</span> User &#123;</span><br><span class="line">  id: <span class="built_in">string</span>;</span><br><span class="line">  name: <span class="built_in">string</span>;</span><br><span class="line">  avatar: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[tuture-add]<span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">getUserById</span>(<span class="params">userId: <span class="built_in">string</span></span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">return</span> userList.filter(<span class="function"><span class="params">user</span> =&gt;</span> user.id === userId)[<span class="number">0</span>];</span><br><span class="line">[tuture-add]&#125;</span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> todoListData: Todo[] = [</span><br><span class="line">  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"1"</span>,</span><br><span class="line">    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-del]    user: <span class="string">"mRcfps"</span>,</span><br><span class="line">[tuture-del]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-add]    user: <span class="string">"23410977"</span>,</span><br><span class="line">[tuture-add]    date: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">    isCompleted: <span class="literal">false</span></span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"2"</span>,</span><br><span class="line">    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-del]    user: <span class="string">"pftom"</span>,</span><br><span class="line">[tuture-del]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-add]    user: <span class="string">"23410976"</span>,</span><br><span class="line">[tuture-add]    date: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">    isCompleted: <span class="literal">false</span></span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"3"</span>,</span><br><span class="line">    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-del]    user: <span class="string">"Holy"</span>,</span><br><span class="line">[tuture-del]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-add]    user: <span class="string">"58352313"</span>,</span><br><span class="line">[tuture-add]    date: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">    isCompleted: <span class="literal">false</span></span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"4"</span>,</span><br><span class="line">    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-del]    user: <span class="string">"crxk"</span>,</span><br><span class="line">[tuture-del]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-add]    user: <span class="string">"25455350"</span>,</span><br><span class="line">[tuture-add]    date: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">    isCompleted: <span class="literal">false</span></span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"5"</span>,</span><br><span class="line">    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-del]    user: <span class="string">"Pony"</span>,</span><br><span class="line">[tuture-del]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-del]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-add]    user: <span class="string">"12345678"</span>,</span><br><span class="line">[tuture-add]    date: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-add]    isCompleted: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> userList: User[] = [</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  &#123;</span><br><span class="line">    id: <span class="string">"23410976"</span>,</span><br><span class="line">    name: <span class="string">"pftom"</span>,</span><br><span class="line">[tuture-del]    avatar: <span class="string">"https://avatars0.githubusercontent.com/u/23410977?s=96&amp;v=4"</span></span><br><span class="line">[tuture-add]    avatar: <span class="string">"https://avatars1.githubusercontent.com/u/26423749?s=88&amp;v=4"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"12345678"</span>,</span><br><span class="line">[tuture-add]    name: <span class="string">"pony"</span>,</span><br><span class="line">[tuture-add]    avatar: <span class="string">"https://avatars3.githubusercontent.com/u/25010151?s=96&amp;v=4"</span></span><br><span class="line">  &#125;</span><br><span class="line">];</span><br></pre></td></tr></table></figure><p>可以看到，上面我们主要做出了如下几处修改：</p><ul><li>将 <code>todoListData</code> 的每个元素的 <code>user</code> 字段改为对应 <code>userList</code> 元素的 <code>id</code> ，方便基于 <code>user</code> 的 <code>id</code> 进行用户信息的查找。</li><li>接着我们给 <code>todoListData</code> 每个元素添加了 <code>id</code> 方便标志，然后把 <code>time</code> 属性替换成了 <code>date</code> 属性。</li><li>接着我们定义了一个 <code>getUserById</code> 函数，用于每个 <code>todo</code> 中根据 <code>user</code> 字段来获取对应的用户详情，包括名字和头像等，这里我们有些同学可能有疑问了，我们给参数做了类型注解，为啥不需要注解返回值了？其实这也是 TS 自动类型推断的一个应用场景，TS 编译器会根据参数的类型然后自动计算返回值类型，所以我们就不需要明确的指定返回值啦。</li><li>最后我们导出了 <code>Todo</code> 和 <code>User</code> 接口。</li></ul><p>接着我们类似单独创建 <code>src/TodoInput.tsx</code> 组件给 <code>src/App.tsx</code> 减负一样，尝试创建 <code>src/TodoList.tsx</code> 组件，然后把对应 <code>src/App.tsx</code> 的对应逻辑移动到这个组件里：</p><figure class="highlight ts"><figcaption><span>src/TodoList.tsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvZjI0ZGMzMTI1ZTdjNmY0MWMxNjM4YTg0YjRlM2RiZmFmNWQ5YTg5Mi9zcmMvVG9kb0xpc3QudHN4" title="https://github.com/pftom/typescript-tea/blob/f24dc3125e7c6f41c1638a84b4e3dbfaf5d9a892/src/TodoList.tsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; List, Avatar, Menu, Dropdown &#125; <span class="keyword">from</span> <span class="string">'antd'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; DownOutlined &#125; <span class="keyword">from</span> <span class="string">'@ant-design/icons'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; Todo, getUserById &#125; <span class="keyword">from</span> <span class="string">'./utils/data'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> menu = (</span><br><span class="line">  &lt;Menu&gt;</span><br><span class="line">    &lt;Menu.Item&gt;完成&lt;<span class="regexp">/Menu.Item&gt;</span></span><br><span class="line"><span class="regexp">    &lt;Menu.Item&gt;删除&lt;/</span>Menu.Item&gt;</span><br><span class="line">  &lt;<span class="regexp">/Menu&gt;</span></span><br><span class="line"><span class="regexp">);</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">interface TodoListProps &#123;</span></span><br><span class="line"><span class="regexp">  todoList: Todo[];</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">function TodoList(&#123; todoList &#125;: TodoListProps) &#123;</span></span><br><span class="line"><span class="regexp">  return (</span></span><br><span class="line"><span class="regexp">    &lt;List</span></span><br><span class="line"><span class="regexp">      className="demo-loadmore-list"</span></span><br><span class="line"><span class="regexp">      itemLayout="horizontal"</span></span><br><span class="line"><span class="regexp">      dataSource=&#123;todoList&#125;</span></span><br><span class="line"><span class="regexp">      renderItem=&#123;(item) =&gt; &#123;</span></span><br><span class="line"><span class="regexp">        const user = getUserById(item.user);</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">        return (</span></span><br><span class="line"><span class="regexp">          &lt;List.Item</span></span><br><span class="line"><span class="regexp">            key=&#123;item.id&#125;</span></span><br><span class="line"><span class="regexp">            actions=&#123;[</span></span><br><span class="line"><span class="regexp">              &lt;Dropdown overlay=&#123;menu&#125;&gt;</span></span><br><span class="line"><span class="regexp">                &lt;a key="list-loadmore-more"&gt;</span></span><br><span class="line"><span class="regexp">                  操作 &lt;DownOutlined /&gt;</span></span><br><span class="line"><span class="regexp">                &lt;/a&gt;</span></span><br><span class="line"><span class="regexp">              &lt;/Dropdown&gt;,</span></span><br><span class="line"><span class="regexp">            ]&#125;&gt;</span></span><br><span class="line"><span class="regexp">            &lt;List.Item.Meta</span></span><br><span class="line"><span class="regexp">              avatar=&#123;&lt;Avatar src=&#123;user.avatar&#125; /</span>&gt;&#125;</span><br><span class="line">              title=&#123;&lt;a href=<span class="string">"https://ant.design"</span>&gt;&#123;user.name&#125;&lt;<span class="regexp">/a&gt;&#125;</span></span><br><span class="line"><span class="regexp">              description=&#123;item.date&#125;</span></span><br><span class="line"><span class="regexp">            /</span>&gt;</span><br><span class="line">            &lt;div</span><br><span class="line">              style=&#123;&#123;</span><br><span class="line">                textDecoration: item.isCompleted ? <span class="string">'line-through'</span> : <span class="string">'none'</span>,</span><br><span class="line">              &#125;&#125;&gt;</span><br><span class="line">              &#123;item.content&#125;</span><br><span class="line">            &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">          &lt;/</span>List.Item&gt;</span><br><span class="line">        );</span><br><span class="line">      &#125;&#125;</span><br><span class="line">    /&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> TodoList;</span><br></pre></td></tr></table></figure><p>可以看到，上面我们主要做了如下改动：</p><ul><li>我们首先导入了 <code>Todo</code> 接口，给 TodoList 组件增加了 <code>TodoListProps</code> 接口用于给这个组件的 <code>props</code> 做类型注解。</li><li>接着我们导入了和 <code>getUserById</code> ，用于在 <code>renderItem</code> 里面根据 <code>item.user</code> 获取用户详情信息，然后展示头像和姓名。</li><li>接着我们将 <code>item.time</code> 更新为 <code>item.date</code></li><li>最后我们根据待办事项是否已经完成设置了 <code>line-through</code> 的 <code>textDecoration</code> 属性，来标志已经完成的事项。</li></ul><p>最后我们来根据上面的改进来修改对应的 <code>src/App.tsx</code> ：</p><figure class="highlight ts"><figcaption><span>src/App.tsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvZjI0ZGMzMTI1ZTdjNmY0MWMxNjM4YTg0YjRlM2RiZmFmNWQ5YTg5Mi9zcmMvQXBwLnRzeA==" title="https://github.com/pftom/typescript-tea/blob/f24dc3125e7c6f41c1638a84b4e3dbfaf5d9a892/src/App.tsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> React, &#123; useRef &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> React, &#123; useRef, useState &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  List,</span><br><span class="line">  Avatar,</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  Dropdown,</span><br><span class="line">  Tabs</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">"antd"</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; DownOutlined &#125; <span class="keyword">from</span> <span class="string">"@ant-design/icons"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> TodoInput <span class="keyword">from</span> <span class="string">"./TodoInput"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> TodoList <span class="keyword">from</span> <span class="string">"./TodoList"</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; todoListData &#125; <span class="keyword">from</span> <span class="string">"./utils/data"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">"./App.css"</span>;</span><br><span class="line"><span class="keyword">import</span> logo <span class="keyword">from</span> <span class="string">"./logo.svg"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; todoListData &#125; <span class="keyword">from</span> <span class="string">"./utils/data"</span>;</span><br><span class="line">[tuture-del]</span><br><span class="line"><span class="keyword">const</span> &#123; Title &#125; = Typography;</span><br><span class="line"><span class="keyword">const</span> &#123; TabPane &#125; = Tabs;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">const</span> menu = (</span><br><span class="line">[tuture-del]  &lt;Menu&gt;</span><br><span class="line">[tuture-del]    &lt;Menu.Item&gt;完成&lt;<span class="regexp">/Menu.Item&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]    &lt;Menu.Item&gt;删除&lt;/</span>Menu.Item&gt;</span><br><span class="line">[tuture-del]  &lt;<span class="regexp">/Menu&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]);</span></span><br><span class="line"><span class="regexp">[tuture-del]</span></span><br><span class="line"><span class="regexp">[tuture-del]function TodoList() &#123;</span></span><br><span class="line"><span class="regexp">[tuture-del]  return (</span></span><br><span class="line"><span class="regexp">[tuture-del]    &lt;List</span></span><br><span class="line"><span class="regexp">[tuture-del]      className="demo-loadmore-list"</span></span><br><span class="line"><span class="regexp">[tuture-del]      itemLayout="horizontal"</span></span><br><span class="line"><span class="regexp">[tuture-del]      dataSource=&#123;todoListData&#125;</span></span><br><span class="line"><span class="regexp">[tuture-del]      renderItem=&#123;item =&gt; (</span></span><br><span class="line"><span class="regexp">[tuture-del]        &lt;List.Item</span></span><br><span class="line"><span class="regexp">[tuture-del]          actions=&#123;[</span></span><br><span class="line"><span class="regexp">[tuture-del]            &lt;Dropdown overlay=&#123;menu&#125;&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]              &lt;a key="list-loadmore-more"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]                操作 &lt;DownOutlined /</span>&gt;</span><br><span class="line">[tuture-del]              &lt;<span class="regexp">/a&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]            &lt;/</span>Dropdown&gt;</span><br><span class="line">[tuture-del]          ]&#125;</span><br><span class="line">[tuture-del]        &gt;</span><br><span class="line">[tuture-del]          &lt;List.Item.Meta</span><br><span class="line">[tuture-del]            avatar=&#123;</span><br><span class="line">[tuture-del]              &lt;Avatar src=<span class="string">"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"</span> /&gt;</span><br><span class="line">[tuture-del]            &#125;</span><br><span class="line">[tuture-del]            title=&#123;&lt;a href=<span class="string">"https://ant.design"</span>&gt;&#123;item.user&#125;&lt;<span class="regexp">/a&gt;&#125;</span></span><br><span class="line"><span class="regexp">[tuture-del]            description=&#123;item.time&#125;</span></span><br><span class="line"><span class="regexp">[tuture-del]          /</span>&gt;</span><br><span class="line">[tuture-del]          &lt;div&gt;&#123;item.content&#125;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]        &lt;/</span>List.Item&gt;</span><br><span class="line">[tuture-del]      )&#125;</span><br><span class="line">[tuture-del]    /&gt;</span><br><span class="line">[tuture-del]  );</span><br><span class="line">[tuture-del]&#125;</span><br><span class="line">[tuture-del]</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> [todoList, setTodoList] = useState(todoListData);</span><br><span class="line">[tuture-add]</span><br><span class="line">  <span class="keyword">const</span> callback = <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> onFinish = <span class="function">(<span class="params">values: <span class="built_in">any</span></span>) =&gt;</span> &#123;</span><br><span class="line">[tuture-del]    <span class="built_in">console</span>.log(<span class="string">"Received values from form: "</span>, values);</span><br><span class="line">[tuture-add]    <span class="keyword">const</span> newTodo = &#123; ...values.todo, isCompleted: <span class="literal">false</span> &#125;;</span><br><span class="line">[tuture-add]    setTodoList(todoList.concat(newTodo));</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="keyword">const</span> ref = useRef(<span class="literal">null</span>);</span><br><span class="line"></span><br><span class="line">[tuture-add]  <span class="keyword">const</span> activeTodoList = todoList.filter(<span class="function"><span class="params">todo</span> =&gt;</span> !todo.isCompleted);</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> completedTodoList = todoList.filter(<span class="function"><span class="params">todo</span> =&gt;</span> todo.isCompleted);</span><br><span class="line">[tuture-add]</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div className=<span class="string">"App"</span> ref=&#123;ref&#125;&gt;</span><br><span class="line">      &lt;div className=<span class="string">"container header"</span>&gt;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">      &lt;div className=<span class="string">"container"</span>&gt;</span><br><span class="line">        &lt;Tabs onChange=&#123;callback&#125; <span class="keyword">type</span>=<span class="string">"card"</span>&gt;</span><br><span class="line">          &lt;TabPane tab=<span class="string">"所有"</span> key=<span class="string">"1"</span>&gt;</span><br><span class="line">[tuture-del]            &lt;TodoList /&gt;</span><br><span class="line">[tuture-add]            &lt;TodoList todoList=&#123;todoList&#125; /&gt;</span><br><span class="line">          &lt;<span class="regexp">/TabPane&gt;</span></span><br><span class="line"><span class="regexp">          &lt;TabPane tab="进行中" key="2"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]            &lt;TodoList /</span>&gt;</span><br><span class="line">[tuture-add]            &lt;TodoList todoList=&#123;activeTodoList&#125; /&gt;</span><br><span class="line">          &lt;<span class="regexp">/TabPane&gt;</span></span><br><span class="line"><span class="regexp">          &lt;TabPane tab="已完成" key="3"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]            &lt;TodoList /</span>&gt;</span><br><span class="line">[tuture-add]            &lt;TodoList todoList=&#123;completedTodoList&#125; /&gt;</span><br><span class="line">          &lt;<span class="regexp">/TabPane&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>Tabs&gt;</span><br><span class="line">      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ ...</span></span><br></pre></td></tr></table></figure><p>可以看到上面的内容作出了如下的修改：</p><ul><li>首先我们删除了 <code>TodoList</code> 部分代码，转而导入了 <code>TodoList</code> 组件</li><li>接着我们使用 <code>useState</code> Hooks 接收 <code>todoListData</code> 作为默认数据，然后通过 <code>isCompleted</code> 过滤，生成</li></ul><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>我们来总结和回顾一下这一小节学到的知识：</p><ul><li>首先我们讲解了 TS 中的函数，主要讲解了如何注解函数</li><li>然后引出了函数赋值给变量时如何进行变量的函数类型注解，并因此讲解了 TS 具有自动类型推断的能力</li><li>接着，我们对标接口（Interface）讲解了函数也存在可选参数</li><li>最后我们讲解了 TS 中独有的重载，它主要用来解决函数参数存在多种类型，然后对应参数的不同类型会有不同的返回值类型的情况，那么我们要给这种函数进行类型注解，可以通过重载的方式，解耦参数值类型和返回值类型，将所有可能情况通过重载表现出来。</li></ul><p>因为本篇文章是图雀社区一杯茶系列，所以关于函数的知识，我们还有一些内容没有讲解到，不过具体内容都是触类旁通，比如注解函数的 <code>rest</code> 参数，<code>this</code> 等，有兴趣的同学可以查阅官方文档：<span class="exturl" data-url="aHR0cHM6Ly93d3cudHlwZXNjcmlwdGxhbmcub3JnL2RvY3MvaGFuZGJvb2svZnVuY3Rpb25zLmh0bWw=" title="https://www.typescriptlang.org/docs/handbook/functions.html">TS-函数<i class="fa fa-external-link"></i></span>。</p><h2 id="交叉类型、联合类型"><a href="#交叉类型、联合类型" class="headerlink" title="交叉类型、联合类型"></a>交叉类型、联合类型</h2><p>在前三个大章节中，我们我们讲解了基础的 TS 类型，然后接着我们用这些学到的基础类型，去组合形成枚举和接口，去注解函数的参数和返回值，这都是 TS 类型注解到 JS 元素上的实践，那么就像 JS 中有元素运算一样如加减乘除甚至集合运算 “交并补”，TS 中也存在类型的一个运算，这就是我们这一节中要讲解的交叉和联合类型。</p><h3 id="交叉类型"><a href="#交叉类型" class="headerlink" title="交叉类型"></a>交叉类型</h3><p>交叉类型就是多个类型，通过 <code>&amp;</code> 类型运算符，合并成一个类型，这个类型包含了多个类型中的所有类型成员，我们来看个响应体的例子，假如我们有一个查询艺术家的请求，我们要根据查询的结果 – 响应体，打印对应信息，一般响应体是两类信息的综合：</p><ul><li>请求成功，返回标志请求成功的状态，以及目标数据</li><li>请求失败，返回标志请求失败的状态，以及错误信息</li></ul><p>针对这一一个场景，我们就可以使用交叉类型，了解了这样一个场景之后，那么我们再来看一下对应这个场景的具体例子：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> ErrorHandling &#123;</span><br><span class="line">  success: <span class="built_in">boolean</span>;</span><br><span class="line">  error?: &#123; message: <span class="built_in">string</span> &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> ArtistsData &#123;</span><br><span class="line">  artists: &#123; name: <span class="built_in">string</span> &#125;[];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> handleArtistsResponse = <span class="function">(<span class="params">response: ArtistsData &amp; ErrorHandling</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (response.error) &#123;</span><br><span class="line">    <span class="built_in">console</span>.error(response.error.message);</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(response.artists);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>我们可以看到这个例子，我们的艺术家信息接口（Interface）是 <code>ArtistsData</code> ，它是请求成功之后返回的具体数据之一，除了这个，我们的响应体一般还有标志响应是否成功的状态，以及错误的时候的打印信息，所以我们还定义了一个 <code>ErrorHandling</code> ，它们两个进行一个交叉类型操作就组成了我们的艺术家响应体：<code>ArtistsData &amp; ErrorHandling</code> ，然后我们在函数参数里面标志 <code>response</code> 为这个交叉类型的结果，并在函数体之类根据请求是否成功的状态 <code>reponse.error</code> 判断来打印对应的信息。</p><h3 id="联合类型"><a href="#联合类型" class="headerlink" title="联合类型"></a>联合类型</h3><p>那么联合类型是什么了？联合类型实际上是通过操作符 <code>|</code> ，将多个类型进行联合，组成一个复合类型，当用这个复合类型注解一个变量的时候，这个变量可以取这个复合类型中的任意一个类型，这个有点类似枚举了，就是一个变量可能存在多个类型，但是最终只能取一个类型。</p><blockquote><p>读者这里可以自行了解联合类型和枚举类型的一个细节差异，本文首先于篇幅，不具体展开。</p></blockquote><p>接下来我们来看个联合类型应用的场景，比如我们有一个 <code>padLeft</code> 函数 – 左填充空格操作，它负责接收两个参数 <code>value</code> 和 <code>padding</code> ，主要目标是实现给 <code>value</code> 这个字符串左边添加 <code>padding</code> ，可以类比这个 <code>padding</code> 就是空格，但是这里的 <code>padding</code> 既可以是字符串 <code>string</code> 类型，也可以是数字 <code>number</code> ，当 <code>padding</code> 是字符串时，一个比较简单的例子如下：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> value: <span class="built_in">string</span> = <span class="string">'Hello Tuture'</span>;</span><br><span class="line"><span class="keyword">const</span> padding: <span class="built_in">string</span> = <span class="string">'   '</span>;</span><br><span class="line"></span><br><span class="line">padLeft(value, padding); <span class="comment">// =&gt; '   Hello Tuture';</span></span><br></pre></td></tr></table></figure><p>好的，了解的场景之后，我们马上来一个实战，讲解上面那个例子的一个升级版：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">padLeft</span>(<span class="params">value: <span class="built_in">string</span>, padding: <span class="built_in">any</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> padding === <span class="string">'number'</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Array</span>(padding + <span class="number">1</span>).join(<span class="string">' '</span>) + value;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> padding === <span class="string">'string'</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> padding + value;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(</span><br><span class="line">    <span class="string">`&#123;% raw %&#125;Expected string or number, got '<span class="subst">$&#123;padding&#125;</span>'.&#123;% endraw %&#125;`</span>,</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">padLeft(<span class="string">'Hello world'</span>, <span class="number">4</span>);</span><br></pre></td></tr></table></figure><p>可以看到这个例子，<code>padding</code> 我们暂时给了 <code>any</code> ，然后函数体里面对 <code>string</code> 和 <code>number</code> 类型给了判断，执行对应的 “左空格填充” 操作，这个逻辑对于研发初期是可行的，但是当我们涉及到多人协作开发的时候，其他成员光看这个函数的变量定义，无法了解到底该给这个 <code>padding</code> 传递一个什么样类型的值，有可能某个队友进行了如下操作：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">padLeft(<span class="string">'Hello world'</span>, <span class="literal">true</span>);</span><br></pre></td></tr></table></figure><p>啪的一下，这个程序就崩了！所以你看，其实程序还是很脆弱的。</p><p>为了更加明确的约束 <code>padding</code> 的类型，我们有必要引进联合类型：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">padLeft</span>(<span class="params">value: <span class="built_in">string</span>, padding: <span class="built_in">string</span> | <span class="built_in">number</span></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// ...中间一样</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这个时候，我们发现即使再来很多位队友，他们也知道该如何调用这个接口，因为编译器会强制队友写正确的类型，如果还继续写：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">padLeft(<span class="string">'Hello world'</span>, <span class="literal">true</span>);</span><br></pre></td></tr></table></figure><p>编译器就会提示你如下错误：</p><p><img alt data-src="https://static.powerformer.com/c/cea18bc864f7a9b94223dcc718646b02/image-424290f29ec31da8.png"></p><h3 id="小结-1"><a href="#小结-1" class="headerlink" title="小结"></a>小结</h3><p>这一小节中我们学习了交叉类型和联合类型，它们是 TS 类型系统中的类型运算的产物，交叉类型是多个类型组成一个类型，最终结果类型是多个类型的总和，而联合类型是多个类型组成一个综合体，最终的结果类型是多个类型之中的某一个类型，交叉类型主要用于构造响应体，联合类型主要用于处理单变量被注解为多类型之一的场景，它还会与我们下一节要讲的字面量类型发生化学反应，实现枚举和处理类型守卫，我们将马上来讲解这些神奇的化学反应。</p><h2 id="字面量类型与类型守卫"><a href="#字面量类型与类型守卫" class="headerlink" title="字面量类型与类型守卫"></a>字面量类型与类型守卫</h2><p>最后我们来聊一聊类型守卫，类型守卫很多场景上都是和联合类型打配合存在的。在讲类型守卫的时候，我们还需要先聊一聊字面量类型，额！其实这三者是相辅相成的。</p><h3 id="字面量类型"><a href="#字面量类型" class="headerlink" title="字面量类型"></a>字面量类型</h3><p>其实字面量类型我们在第二节中已经或多或少的提到过了，还记得那个报错嘛？</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> tutureSlogan: <span class="built_in">string</span> = <span class="number">5201314</span>; <span class="comment">// 报错 Type '5201314' is not assignable to Type 'string'</span></span><br></pre></td></tr></table></figure><p>这里的 TS 编译器提示，”Type ‘5201314’ is not assignable to Type ‘string“，这里的 “Type ‘5201314’” 实际上就是一个字面量类型。</p><p>字面量可是说是 TS 类型系统里面最小的类型，就像 JS 里面的数字 1，它不可能再拆成更小的部分了，一般字面量类型分为两种：</p><ul><li>数字字面量</li><li>字符串字面量</li></ul><h4 id="数字字面量"><a href="#数字字面量" class="headerlink" title="数字字面量"></a>数字字面量</h4><p>像 <code>520</code> 这个数，把它当做类型使用，它就是数组字面量类型，使用它来注解一个变量的时候是这样的：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> tuture: <span class="number">520</span>;</span><br></pre></td></tr></table></figure><p>当我们初始化这个 tuture 变量的时候，就只能是赋值 520 这个数字了：</p><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">tuture = <span class="number">520</span>; <span class="comment">// 正确</span></span><br><span class="line">tuture = <span class="number">521</span>; <span class="comment">// 错误 Type '521' is not assignable to type '520'</span></span><br></pre></td></tr></table></figure><h4 id="字符串字面量"><a href="#字符串字面量" class="headerlink" title="字符串字面量"></a>字符串字面量</h4><p>对应的字符串字面量类似，我们现在用 <code>&#39;520&#39;</code> 这个字符串字面量类型来注解 <code>tuture</code> ：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> tuture: <span class="string">'520'</span>;</span><br><span class="line"></span><br><span class="line">tuture = <span class="string">'520'</span>;</span><br><span class="line">tuture = <span class="string">'521'</span>; <span class="comment">// Type '"521"' is not assignable to type '"520"'</span></span><br></pre></td></tr></table></figure><p>可以看到字面量类型还带来一个特点就是，被注解的为对应字面量类型的变量，在赋值的时候只能赋值为这个被注解的字面量。</p><p>上面我们了解了字面量类型，并且具体谈了谈它们的特点，那么这么一个单纯的类型，到底有什么特别的地方了？其实字面量类型搭配联合类型有意想不到的威力，我们来举两个例子：</p><ul><li>实现枚举</li><li>实现类型守卫</li></ul><h4 id="搭配举例-实现枚举效果"><a href="#搭配举例-实现枚举效果" class="headerlink" title="搭配举例 - 实现枚举效果"></a>搭配举例 - 实现枚举效果</h4><p>当我们搭配联合类型和字面量类型的时候，我们可以实现一定的枚举效果，我们来看个例子，我们买电脑一般都是三种系统，我们可以通过选用这三种电脑类型来获取对应的一个用户的情况，我们现在只给出一个函数的大体框架，具体实现在类型守卫里面详细展开：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUserInfo</span>(<span class="params">osType: 'Linux' | 'Mac' | 'Windows'</span>) </span>&#123; <span class="comment">// ... 后续实现 &#125;</span></span><br></pre></td></tr></table></figure><p>我们可以看到上面的例子，<code>osType</code> 可以取三种操作系统之一的值，这就类似枚举，我们可以创建一个类似的枚举：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">enum</span> EnumOSType &#123;</span><br><span class="line">  Linux,</span><br><span class="line">  Mac,</span><br><span class="line">  Windows,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUserInfo</span>(<span class="params">osType: EnumOSType</span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure><p>上面两个例子效果其实差不多，我们就通过 联合类型+字面量类型 实现了一个简单枚举的效果。</p><h3 id="类型守卫"><a href="#类型守卫" class="headerlink" title="类型守卫"></a>类型守卫</h3><p>类型守卫是我们 联合类型+字面量类型 的又一个应用场景，它主要用于在进行 ”联合“ 的多个类型之间，存在相同的字段，也存在不同的字段，然后需要区分具体什么时候是使用哪个类型，这么说可能比较迷糊，我们来看个例子，加入我们的 <code>getUserInfo</code> 函数的参数接收的是 <code>os</code> ，它根据 <code>os.type</code> 打印对应 <code>os</code> 携带的用户信息：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Linux &#123;</span><br><span class="line">  <span class="keyword">type</span>: <span class="string">'Linux'</span>;</span><br><span class="line">  linuxUserInfo: <span class="string">'极客'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> Mac &#123;</span><br><span class="line">  <span class="keyword">type</span>: <span class="string">'Mac'</span>;</span><br><span class="line">  macUserInfo: <span class="string">'极客+1'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> Windows &#123;</span><br><span class="line">  <span class="keyword">type</span>: <span class="string">'Windows'</span>;</span><br><span class="line">  windowsUserInfo: <span class="string">'极客+2'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUserInfo</span>(<span class="params">os: Linux | Mac | Windows</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(os.linuxUserInfo);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到上面我们将 <code>osType</code> 扩充成了 <code>os</code> ，然后三种 os 有相同的字段 <code>type</code> 和不同的字段 <code>xxxUserInfo</code> ，但是当我们函数体类打印 <code>os.linuxUserInfo</code> 的时候，TS 编译器报了如下错误：</p><p><img alt data-src="https://static.powerformer.com/c/cea18bc864f7a9b94223dcc718646b02/image-8cb30281a741b886.png"></p><p>有同学就有疑问了，我们这里不是联合类型了嘛，那应该 <code>os</code> 有 <code>Linux</code> 这一类型啊，这么打印为什么会错呢？其实我们要抓住一点，联合类型的最终结果是联合的多个类型之一，也就是 <code>os</code> 还可能是 <code>Mac</code> 或者 <code>Windows</code> ，所以这里打印 <code>os.linuxUserInfo</code> 就有问题，所以我们这个时候就需要类型守卫来帮忙了，它主要是根据多个类型中一样的字段，且这个字段是字面量类型来判断，进而执行不同的逻辑来确保类型的执行是正确的，我们来延伸一下上面的那个例子：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUserInfo</span>(<span class="params">os: Linux | Mac | Windows</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">switch</span> (os.type) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'Linux'</span>: &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(os.linuxUserInfo);</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">case</span> <span class="string">'Mac'</span>: &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(os.macUserInfo);</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">case</span> <span class="string">'Windows'</span>: &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(os.windowsUserInfo);</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，如果有同学跟着手敲这个函数的话，会发现当针对 <code>os.type</code> 进行条件判断之后，在 <code>case</code> 语句里面，TS 自动提示了需要取值的类型，比如在 <code>Linux</code> case 语句里面输入 <code>os.</code> 会提示 <code>linux</code> ：</p><p><img alt data-src="https://static.powerformer.com/c/cea18bc864f7a9b94223dcc718646b02/image-112f4036bf738207.png"></p><h3 id="动手实践-1"><a href="#动手实践-1" class="headerlink" title="动手实践"></a>动手实践</h3><p>了解完字面量类型和类型守卫之后，我们马上运用在我们的待办事项应用里面。</p><p>首先打开 <code>src/TodoList.tsx</code> ，我们近一步完善 <code>TodoList.tsx</code> 的逻辑：</p><figure class="highlight ts"><figcaption><span>src/TodoList.tsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvMmI3MzcyZGRjNzAwMzEzN2UyNWQ4NzBkNGIwNTEzYWIzNTZjMWFlMi9zcmMvVG9kb0xpc3QudHN4" title="https://github.com/pftom/typescript-tea/blob/2b7372ddc7003137e25d870d4b0513ab356c1ae2/src/TodoList.tsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; List, Avatar, Menu, Dropdown &#125; <span class="keyword">from</span> <span class="string">"antd"</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> &#123; DownOutlined &#125; <span class="keyword">from</span> <span class="string">"@ant-design/icons"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; List, Avatar, Menu, Dropdown, Modal &#125; <span class="keyword">from</span> <span class="string">"antd"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; DownOutlined, ExclamationCircleOutlined &#125; <span class="keyword">from</span> <span class="string">"@ant-design/icons"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; ClickParam &#125; <span class="keyword">from</span> <span class="string">"antd/lib/menu"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; Todo, getUserById &#125; <span class="keyword">from</span> <span class="string">"./utils/data"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">const</span> menu = (</span><br><span class="line">[tuture-del]  &lt;Menu&gt;</span><br><span class="line">[tuture-del]    &lt;Menu.Item&gt;完成&lt;<span class="regexp">/Menu.Item&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]    &lt;Menu.Item&gt;删除&lt;/</span>Menu.Item&gt;</span><br><span class="line">[tuture-del]  &lt;<span class="regexp">/Menu&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]);</span></span><br><span class="line"><span class="regexp">[tuture-add]const &#123; confirm &#125; = Modal;</span></span><br><span class="line"><span class="regexp">[tuture-add]</span></span><br><span class="line"><span class="regexp">[tuture-add]interface ActionProps &#123;</span></span><br><span class="line"><span class="regexp">[tuture-add]  onClick: (key: "complete" | "delete") =&gt; void;</span></span><br><span class="line"><span class="regexp">[tuture-add]  isCompleted: boolean;</span></span><br><span class="line"><span class="regexp">[tuture-add]&#125;</span></span><br><span class="line"><span class="regexp">[tuture-add]</span></span><br><span class="line"><span class="regexp">[tuture-add]function Action(&#123; onClick, isCompleted &#125;: ActionProps) &#123;</span></span><br><span class="line"><span class="regexp">[tuture-add]  const handleActionClick = (&#123; key &#125;: ClickParam) =&gt; &#123;</span></span><br><span class="line"><span class="regexp">[tuture-add]    if (key === "complete") &#123;</span></span><br><span class="line"><span class="regexp">[tuture-add]      onClick("complete");</span></span><br><span class="line"><span class="regexp">[tuture-add]    &#125; else if (key === "delete") &#123;</span></span><br><span class="line"><span class="regexp">[tuture-add]      onClick("delete");</span></span><br><span class="line"><span class="regexp">[tuture-add]    &#125;</span></span><br><span class="line"><span class="regexp">[tuture-add]  &#125;;</span></span><br><span class="line"><span class="regexp">[tuture-add]</span></span><br><span class="line"><span class="regexp">[tuture-add]  return (</span></span><br><span class="line"><span class="regexp">[tuture-add]    &lt;Menu onClick=&#123;handleActionClick&#125;&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]      &lt;Menu.Item key="complete"&gt;&#123;isCompleted ? "重做" : "完成"&#125;&lt;/</span>Menu.Item&gt;</span><br><span class="line">[tuture-add]      &lt;Menu.Item key=<span class="string">"delete"</span>&gt;删除&lt;<span class="regexp">/Menu.Item&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]    &lt;/</span>Menu&gt;</span><br><span class="line">[tuture-add]  );</span><br><span class="line">[tuture-add]&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> TodoListProps &#123;</span><br><span class="line">  todoList: Todo[];</span><br><span class="line">[tuture-add]  onClick: <span class="function">(<span class="params">todoId: <span class="built_in">string</span>, key: "complete" | "<span class="keyword">delete</span>"</span>) =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="function"><span class="keyword">function</span> <span class="title">TodoList</span>(<span class="params">&#123; todoList &#125;: TodoListProps</span>) </span>&#123;</span><br><span class="line">[tuture-add]<span class="function"><span class="keyword">function</span> <span class="title">TodoList</span>(<span class="params">&#123; todoList, onClick &#125;: TodoListProps</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;List</span><br><span class="line">      className=<span class="string">"demo-loadmore-list"</span></span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">          &lt;List.Item</span><br><span class="line">            key=&#123;item.id&#125;</span><br><span class="line">            actions=&#123;[</span><br><span class="line">[tuture-del]              &lt;Dropdown overlay=&#123;menu&#125;&gt;</span><br><span class="line">[tuture-add]              &lt;Dropdown</span><br><span class="line">[tuture-add]                overlay=&#123;<span class="function"><span class="params">()</span> =&gt;</span> (</span><br><span class="line">[tuture-add]                  &lt;Action</span><br><span class="line">[tuture-add]                    isCompleted=&#123;item.isCompleted&#125;</span><br><span class="line">[tuture-add]                    onClick=&#123;<span class="function">(<span class="params">key: "complete" | "<span class="keyword">delete</span>"</span>) =&gt;</span></span><br><span class="line">[tuture-add]                      onClick(item.id, key)</span><br><span class="line">[tuture-add]                    &#125;</span><br><span class="line">[tuture-add]                  /&gt;</span><br><span class="line">[tuture-add]                )&#125;</span><br><span class="line">[tuture-add]              &gt;</span><br><span class="line">                &lt;a key=<span class="string">"list-loadmore-more"</span>&gt;</span><br><span class="line">                  操作 &lt;DownOutlined /&gt;</span><br><span class="line">                &lt;<span class="regexp">/a&gt;</span></span><br><span class="line"><span class="regexp">              /</span><span class="regexp">/ ...</span></span><br></pre></td></tr></table></figure><p>可以看到上面的改动主要有如下几个部分：</p><ul><li>我们扩展了单个 Todo 的点击下拉菜单的菜单组件，定义了一个 <code>Action</code> 组件，它接收两个参数，<code>isCompleted</code> 和 <code>onClick</code> ，前者用来标志现在对 Todo 操作是重做还是完成，后者用来处理点击事件，根据 <code>todo.id</code> 和 操作的类型 <code>key</code> 来处理。</li><li>我们在 <code>Action</code> 组件的 <code>onClick</code> 属性里面调用的 <code>onClick</code> 函数是父组件传下来的函数，所以我们需要额外在 <code>TodoListProps</code> 加上这个 <code>onClick</code> 函数的类型定义，按照我们之前学习的注解函数的知识，这里我们需要注解参数列表和返回值，因为 <code>onClick</code> 函数内部执行点击逻辑，不需要返回值，所以我们给它注解了 <code>void</code> 类型，针对参数列表，<code>todoId</code> 比较简单，一般是字符串，所以注解为 <code>string</code> 类型，而 <code>key</code> 标注操作的类型，它是一个字面量联合类型，允许有 <code>complete</code> 和 <code>delete</code> 两种</li><li>接着我们来看 Action 组件，我们在上一步已经讲解它接收两个参数，因此我们新增一个 <code>ActionProps</code> 来注解 Action 组件的参数列表，可以看到其中的 <code>onClick</code> 和我们上一步讲解的一样，<code>isCompleted</code> 注解为 <code>boolean</code> 。</li><li>接在在 Action 组件里我们定义了 Menu <code>onClick</code>的处理函数 <code>handleActionClick</code> 是一个<code>ClickParam</code> 类型，它是从 <code>antd/lib/menu</code> 导入的 ，由组件库提供的，然后我们从参数里面解构出来了 <code>key</code> ，进而通过字面量类型进行类型守卫，处理了对于的 <code>onClick</code> 逻辑</li><li>最后我们做的一点改进就是在 Menu 里面根据 <code>isCompleted</code> 展示 “重做” 还是 “完成”。</li></ul><p>改进了 <code>src/TodoList.tsx</code> ，接着我们再来改进 <code>src/App.tsx</code> 里面对应于 <code>TodoList</code> 的逻辑，我们打开 <code>src/App.tsx</code> 对其中的内容做出对应的修改如下：</p><figure class="highlight ts"><figcaption><span>src/App.tsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvMmI3MzcyZGRjNzAwMzEzN2UyNWQ4NzBkNGIwNTEzYWIzNTZjMWFlMi9zcmMvQXBwLnRzeA==" title="https://github.com/pftom/typescript-tea/blob/2b7372ddc7003137e25d870d4b0513ab356c1ae2/src/App.tsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; useRef, useState &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  List,</span><br><span class="line">  Avatar,</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [todoList, setTodoList] = useState(todoListData);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> callback = <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;;</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">  <span class="keyword">const</span> activeTodoList = todoList.filter(<span class="function"><span class="params">todo</span> =&gt;</span> !todo.isCompleted);</span><br><span class="line">  <span class="keyword">const</span> completedTodoList = todoList.filter(<span class="function"><span class="params">todo</span> =&gt;</span> todo.isCompleted);</span><br><span class="line"></span><br><span class="line">[tuture-add]  <span class="keyword">const</span> onClick = <span class="function">(<span class="params">todoId: <span class="built_in">string</span>, key: "complete" | "<span class="keyword">delete</span>"</span>) =&gt;</span> &#123;</span><br><span class="line">[tuture-add]    <span class="keyword">if</span> (key === <span class="string">"complete"</span>) &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> newTodoList = todoList.map(<span class="function"><span class="params">todo</span> =&gt;</span> &#123;</span><br><span class="line">[tuture-add]        <span class="keyword">if</span> (todo.id === todoId) &#123;</span><br><span class="line">[tuture-add]          <span class="keyword">return</span> &#123; ...todo, isCompleted: !todo.isCompleted &#125;;</span><br><span class="line">[tuture-add]        &#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]        <span class="keyword">return</span> todo;</span><br><span class="line">[tuture-add]      &#125;);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]      setTodoList(newTodoList);</span><br><span class="line">[tuture-add]    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (key === <span class="string">"delete"</span>) &#123;</span><br><span class="line">[tuture-add]      <span class="keyword">const</span> newTodoList = todoList.filter(<span class="function"><span class="params">todo</span> =&gt;</span> todo.id !== todoId);</span><br><span class="line">[tuture-add]      setTodoList(newTodoList);</span><br><span class="line">[tuture-add]    &#125;</span><br><span class="line">[tuture-add]  &#125;;</span><br><span class="line">[tuture-add]</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div className=<span class="string">"App"</span> ref=&#123;ref&#125;&gt;</span><br><span class="line">      &lt;div className=<span class="string">"container header"</span>&gt;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">      &lt;div className=<span class="string">"container"</span>&gt;</span><br><span class="line">        &lt;Tabs onChange=&#123;callback&#125; <span class="keyword">type</span>=<span class="string">"card"</span>&gt;</span><br><span class="line">          &lt;TabPane tab=<span class="string">"所有"</span> key=<span class="string">"1"</span>&gt;</span><br><span class="line">[tuture-del]            &lt;TodoList todoList=&#123;todoList&#125; /&gt;</span><br><span class="line">[tuture-add]            &lt;TodoList todoList=&#123;todoList&#125; onClick=&#123;onClick&#125; /&gt;</span><br><span class="line">          &lt;<span class="regexp">/TabPane&gt;</span></span><br><span class="line"><span class="regexp">          &lt;TabPane tab="进行中" key="2"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]            &lt;TodoList todoList=&#123;activeTodoList&#125; /</span>&gt;</span><br><span class="line">[tuture-add]            &lt;TodoList todoList=&#123;activeTodoList&#125; onClick=&#123;onClick&#125; /&gt;</span><br><span class="line">          &lt;<span class="regexp">/TabPane&gt;</span></span><br><span class="line"><span class="regexp">          &lt;TabPane tab="已完成" key="3"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]            &lt;TodoList todoList=&#123;completedTodoList&#125; /</span>&gt;</span><br><span class="line">[tuture-add]            &lt;TodoList todoList=&#123;completedTodoList&#125; onClick=&#123;onClick&#125; /&gt;</span><br><span class="line">          &lt;<span class="regexp">/TabPane&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>Tabs&gt;</span><br><span class="line">      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App;</span><br></pre></td></tr></table></figure><p>可以看到上面主要就是两处改动：</p><ul><li>给 <code>TodoList</code> 增加 <code>onClick</code> 属性</li><li>实现 <code>onClick</code> 函数，根据字面量类型 <code>key</code> 进行类型守卫处理对应的数据更改逻辑</li></ul><h3 id="小结-2"><a href="#小结-2" class="headerlink" title="小结"></a>小结</h3><p>在这个小结中我们学习了字面量类型和类型守卫，字面量类型与联合类型搭配可以实现枚举的效果，也可以处理类型守卫，字面量类型是 TS 中最原子的类型，它不可以再进行拆解，而类型守卫主要是在针对联合类型时，TS 编译器无法处理，需要通过开发者手工辅助 TS 编译器处理类型而存在。</p>]]></content>
    
    <summary type="html">
    
      了解了基础的 TS 类型，接口之后，我们开始了解如何给更加复杂的结构注解类型，这就是我们这节里面要引出的函数，进而我们讲解如何对类型进行运算：交叉类型和联合类型，最后我们讲解了最原子类型：字面量类型，以及如何与联合类型搭配实现类型守卫效果。
    
    </summary>
    
    
    
      <category term="React" scheme="https://tuture.co/tags/React/"/>
    
      <category term="TypeScript" scheme="https://tuture.co/tags/TypeScript/"/>
    
  </entry>
  
  <entry>
    <title>类型即正义：TypeScript 从入门到实践（序言）</title>
    <link href="https://tuture.co/2020/04/06/cea18bc/"/>
    <id>https://tuture.co/2020/04/06/cea18bc/</id>
    <published>2020-04-05T17:47:37.842Z</published>
    <updated>2021-07-11T07:16:33.818Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9t" title="https://github.com/pftom"><img alt class="avatar" data-src="/images/avatars/pftom.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9t" title="https://github.com/pftom"><p class="nickName">@pftom</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVh" title="https://github.com/pftom/typescript-tea"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="准备代码"><a href="#准备代码" class="headerlink" title="准备代码"></a>准备代码</h2><ol><li>因为需要尽可能全且精炼的讲解 TypeScript 语法知识，所以我们需要一个恰到好处的实战项目，这一小节主要是用于讲解我们准备初始 TypeScript 版本的 React 项目代码的过程，在下一个小节中我们将会结合 React 项目代码，真正开始 TypeScript 语法的讲解。</li><li></li></ol><blockquote><p>本文所涉及的源代码都放在了 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdHlwZXNjcmlwdC10ZWE=" title="https://github.com/tuture-dev/typescript-tea">Github<i class="fa fa-external-link"></i></span>  或者 <span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vdHV0dXJlL3R5cGVzY3JpcHQtdGVh" title="https://gitee.com/tuture/typescript-tea">Gitee<i class="fa fa-external-link"></i></span> 上，如果您觉得我们写得还不错，希望您能给<strong>❤️ 这篇文章点赞+</strong><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdHlwZXNjcmlwdC10ZWE=" title="https://github.com/tuture-dev/typescript-tea"><strong>Github</strong><i class="fa fa-external-link"></i></span>** 或 <strong>[</strong>Gitee<strong>](<span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vdHV0dXJlL3R5cGVzY3JpcHQtdGVh" title="https://gitee.com/tuture/typescript-tea">https://gitee.com/tuture/typescript-tea<i class="fa fa-external-link"></i></span>)</strong> 仓库加星 ❤**️ 哦~</p></blockquote><blockquote><p>此教程属于 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvcmVhY3Qtcm9hZG1hcA==" title="https://github.com/tuture-dev/react-roadmap">React 前端工程师学习路线<i class="fa fa-external-link"></i></span>的一部分，欢迎来 Star 一波，鼓励我们继续创作出更好的教程，持续更新中~</p></blockquote><h3 id="前提条件"><a href="#前提条件" class="headerlink" title="前提条件"></a>前提条件</h3><ol><li>确保你已经安装了 Node.js，可以访问官网安装：<span class="exturl" data-url="aHR0cHM6Ly9ub2RlanMub3JnL2VuLw==" title="https://nodejs.org/en/">官网地址<i class="fa fa-external-link"></i></span>。</li><li>确保你已经了解基本的 React 开发知识，图雀社区有一篇很好的 <a href="https://tuture.co/2019/11/18/07acf61/">React 入门教程</a>，你可以通过学习它很快的上手 React。</li><li>确保你有一定的命令行使用基础，包括使用 Npm （Node.js 包管理工具）来安装包。</li></ol><h3 id="初始化应用"><a href="#初始化应用" class="headerlink" title="初始化应用"></a>初始化应用</h3><p>初始一个 React 应用的最佳方式那么一定是 React 官方维护的 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2ZhY2Vib29rL2NyZWF0ZS1yZWFjdC1hcHA=" title="https://github.com/facebook/create-react-app">Create React App<i class="fa fa-external-link"></i></span> 脚手架了，我们打开终端，运行如下命令来初始化一个 TypeScript 版本的 React 应用：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx create-react-app typescript-tea --template typescript</span><br></pre></td></tr></table></figure><p>运行如上命令，命令行里面应该会有一系列输出，等待几分钟，就会提示已经初始化完成，并提供了对于的命令来帮助你开启项目，我们根据提示输入如下命令来开启项目：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ <span class="built_in">cd</span> typescript-tea</span><br><span class="line">$ npm start</span><br></pre></td></tr></table></figure><p>运行如上命令之后，会自动开启 Webpack 开发服务器，并打开浏览器窗户，访问 <span class="exturl" data-url="aHR0cDovL2xvY2FsaG9zdDozMDAwLw==" title="http://localhost:3000/">http://localhost:3000/<i class="fa fa-external-link"></i></span> 来展示你的应用初始界面：</p><p><img alt data-src="https://static.powerformer.com/c/cea18bc864f7a9b94223dcc718646b02/image.png"></p><p>如果看到这个界面，恭喜你 🥳！成功创建一个 TypeScript 版本的 React 应用！</p><div class="note info">            <p><strong>提示</strong></p><p>在下文中，为了简化语言，我们统一称 TypeScript 为 TS。</p>          </div><h3 id="引入-antd-组件库"><a href="#引入-antd-组件库" class="headerlink" title="引入 antd 组件库"></a>引入 antd 组件库</h3><p>实战驱动的技术学习能带给我们成就感，便捷好用的包可以加快我们的开发效率，好看的界面可以提高我们的审美能力，缓解学习疲劳。在这篇教程的讲解过程中，我们将通过 <span class="exturl" data-url="aHR0cHM6Ly9hbnQuZGVzaWduL2luZGV4LWNu" title="https://ant.design/index-cn">Ant Design<i class="fa fa-external-link"></i></span> 对应的 React 组件库 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FudC1kZXNpZ24vYW50LWRlc2lnbg==" title="https://github.com/ant-design/ant-design">antd<i class="fa fa-external-link"></i></span> 来辅助我们项目的编写，使得我们可以专注于讲解 TS 的核心知识，而不被繁杂的界面语言所干扰，还能做出对应相应完成的目标功能。</p><div class="note info">            <p><strong>提示</strong></p><p><span class="exturl" data-url="aHR0cHM6Ly9hbnQuZGVzaWduL2luZGV4LWNu" title="https://ant.design/index-cn">Ant Design <i class="fa fa-external-link"></i></span>是蚂蚁金服孵化的一套企业级产品设计体系，提供了完备的 TS 类型定义，使得我们可以很方便的在 TS 项目中使用，在最近发布了 4.0 版本，致力于创造高效愉悦的工作体验。</p><p>除此之外 Ant Design 的周边生态也很丰富：</p><ul><li>包括新一代数据可视化解决方案：<span class="exturl" data-url="aHR0cHM6Ly9hbnR2LnZpc2lvbi96aA==" title="https://antv.vision/zh">AntV<i class="fa fa-external-link"></i></span></li><li>一个基于 Preact / React / React Native 的 UI 组件库：<span class="exturl" data-url="aHR0cHM6Ly9tb2JpbGUuYW50LmRlc2lnbi9pbmRleC1jbg==" title="https://mobile.ant.design/index-cn">Ant Design Mobile<i class="fa fa-external-link"></i></span></li><li>开箱即用的中台前端/设计解决方案：<span class="exturl" data-url="aHR0cHM6Ly9wcm8uYW50LmRlc2lnbi9pbmRleC1jbg==" title="https://pro.ant.design/index-cn">Ant Design Pro<i class="fa fa-external-link"></i></span></li><li>插画设计：<span class="exturl" data-url="aHR0cHM6Ly9hbnQuZGVzaWduL2RvY3Mvc3BlYy9pbGx1c3RyYXRpb24tY24=" title="https://ant.design/docs/spec/illustration-cn">海兔<i class="fa fa-external-link"></i></span></li><li>一款为设计者提升工作效率的 Sketch 工具集 ： <span class="exturl" data-url="aHR0cHM6Ly9raXRjaGVuLmFsaXBheS5jb20v" title="https://kitchen.alipay.com/">Kitchen<i class="fa fa-external-link"></i></span></li></ul><p>后面图雀社区计划围绕 Ant Design 生态撰写一系列教程，帮助大家提高设计、开发效率，敬请期待！✌️</p>          </div><h4 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h4><p>好了，大致介绍了 antd 组件库及 Ant Design 周边之后，我们马上来写代码引入 antd，打开命令行，在其中输入如下命令：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install antd</span><br></pre></td></tr></table></figure><p>运行上面的命令安装完依赖之后就可以在项目中使用了，但是为了更好的定制样式和按需引用以减小打包之后的包体积，我们还需要做一点定制化的操作，打开命令行，依次安装如下依赖：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install react-app-rewired customize-cra babel-plugin-import less less-loader</span><br></pre></td></tr></table></figure><p>注意到上面我们安装了很多包，我们来依次解释一下上面各种包的意思：</p><ul><li>react-app-rewired：用来定制化 Create React App （CRA)脚手架的一些配置，比如 Webpack、Babel 等，因为 CRA 它是一个封闭的黑盒，不允许开发者直接定制，但有时候我们需要对配置做一些修改，比如这里需要配置 antd 的按需引用。</li><li>customize-cra：是 CRA 在发布 2.0 之后出来的一个辅助 react-app-rewired 更方便定制 CRA 的 Webpack 配置的一个库，它提供了一些开箱即用的 API。</li><li>babel-plugin-import：是配置可供开发者按需引用 antd 组件的一个 Babel 插件</li><li>less 和 less-loader：是我们用于定制化 antd 的主题需要的 Webpack loader，因为 antd 使用 less 作为样式化语言。</li></ul><p>最后我们安装一个在 Ant Design 4.0 拆分出去的 icons 包，可以用来按需引用 icons，进一步减少最后的打包体积，继续在命令行运行如下命令：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install @ant-design/icons</span><br></pre></td></tr></table></figure><p>大功告成！现在我们所有的依赖以及安装完成。接下来就需要改写一下 CRA 之前通过 <code>react-scripts</code> 跑开发构建的流程，用我们安装的 <code>react-app-rewired</code> 脚本来替换它，当安装完了所以依赖，以及用<code>react-app-rewired</code> 替换 <code>react-scripts</code> 之后，我们的 <code>package.json</code> 文件应该是下面的样子：</p><figure class="highlight json"><figcaption><span>package.json</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvNzU2YjJkNDVmOTc5MGNhZjkxYWI0Yzc2YzIzZGVjMDZiN2JmOWRhOC9wYWNrYWdlLmpzb24=" title="https://github.com/pftom/typescript-tea/blob/756b2d45f9790caf91ab4c76c23dec06b7bf9da8/package.json">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">  "version": "0.1.0",</span><br><span class="line">  "private": true,</span><br><span class="line">  "dependencies": &#123;</span><br><span class="line">[tuture-add]    "@ant-design/icons": "^4.0.2",</span><br><span class="line">    "@testing-library/jest-dom": "^4.2.4",</span><br><span class="line">    "@testing-library/react": "^9.3.2",</span><br><span class="line">    "@testing-library/user-event": "^7.1.2",</span><br><span class="line">    "@types/jest": "^24.0.0",</span><br><span class="line">    "@types/node": "^12.0.0",</span><br><span class="line">    "@types/react": "^16.9.0",</span><br><span class="line">    "@types/react-dom": "^16.9.0",</span><br><span class="line">[tuture-add]    "antd": "^4.0.0",</span><br><span class="line">[tuture-add]    "babel-plugin-import": "^1.13.0",</span><br><span class="line">[tuture-add]    "customize-cra": "^0.9.1",</span><br><span class="line">[tuture-add]    "less": "^3.11.1",</span><br><span class="line">[tuture-add]    "less-loader": "^5.0.0",</span><br><span class="line">    "react": "^16.13.0",</span><br><span class="line">[tuture-add]    "react-app-rewired": "^2.1.5",</span><br><span class="line">    "react-dom": "^16.13.0",</span><br><span class="line">    "react-scripts": "3.4.0",</span><br><span class="line">    "typescript": "~3.7.2"</span><br><span class="line">  &#125;,</span><br><span class="line">  "scripts": &#123;</span><br><span class="line">[tuture-del]    "start": "react-scripts start",</span><br><span class="line">[tuture-del]    "build": "react-scripts build",</span><br><span class="line">[tuture-del]    "test": "react-scripts test",</span><br><span class="line">[tuture-add]    "start": "react-app-rewired start",</span><br><span class="line">[tuture-add]    "build": "react-app-rewired build",</span><br><span class="line">[tuture-add]    "test": "react-app-rewired test",</span><br><span class="line">    "eject": "react-scripts eject"</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// ...</span></span><br></pre></td></tr></table></figure><h4 id="修改配置"><a href="#修改配置" class="headerlink" title="修改配置"></a>修改配置</h4><p>安装完依赖之后，我们要确保对应改写 CRA 流程的配置生效，我们需要根据 <code>react-app-rewired</code> 的文档说明在根目录下建立 <code>config-overrides.js</code> 文件，并在其中编写如下的内容：</p><figure class="highlight js"><figcaption><span>config-overrides.js</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvNzU2YjJkNDVmOTc5MGNhZjkxYWI0Yzc2YzIzZGVjMDZiN2JmOWRhOC9jb25maWctb3ZlcnJpZGVzLmpz" title="https://github.com/pftom/typescript-tea/blob/756b2d45f9790caf91ab4c76c23dec06b7bf9da8/config-overrides.js">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; override, fixBabelImports, addLessLoader &#125; = <span class="built_in">require</span>(<span class="string">'customize-cra'</span>);</span><br><span class="line"><span class="keyword">const</span> darkThemeVars = <span class="built_in">require</span>(<span class="string">'antd/dist/dark-theme'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = override(</span><br><span class="line">  fixBabelImports(<span class="string">'import'</span>, &#123;</span><br><span class="line">    libraryName: <span class="string">'antd'</span>,</span><br><span class="line">    libraryDirectory: <span class="string">'es'</span>,</span><br><span class="line">    style: <span class="literal">true</span>,</span><br><span class="line">  &#125;),</span><br><span class="line">  addLessLoader(&#123;</span><br><span class="line">    javascriptEnabled: <span class="literal">true</span>,</span><br><span class="line">    modifyVars: &#123;</span><br><span class="line">      hack: <span class="string">`true;@import "<span class="subst">$&#123;<span class="built_in">require</span>.resolve(</span></span></span><br><span class="line"><span class="string"><span class="subst">        <span class="string">'antd/lib/style/color/colorPalette.less'</span>,</span></span></span><br><span class="line"><span class="string"><span class="subst">      )&#125;</span>";`</span>,</span><br><span class="line">      ...darkThemeVars,</span><br><span class="line">      <span class="string">'@primary-color'</span>: <span class="string">'#02b875'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;),</span><br><span class="line">);</span><br></pre></td></tr></table></figure><p>可以看到，上面的代码主要是导出一个用于修改 Webpack 配置的对象，使用 <code>override</code> API，接收两个修改配置的函数调用，<code>fixBabelImports</code> 用于配置 antd 的按需引用，<code>addLessLoader</code> 用于配置 antd 的主题，这里我们使用了 Ant Design 4.0 新带来的 Dark Mode（暗色模式），然后配置了主题色为图雀社区的主题色：<code>#02b875</code> ，代表希望的绿色。😆</p><p>自此，我们就引入了 antd 组件库，并进行了按需配置使用以及配置主题色和使用了 Ant Design 最新的暗色主题 – Dark Mode。</p><h3 id="编写初始代码"><a href="#编写初始代码" class="headerlink" title="编写初始代码"></a>编写初始代码</h3><h4 id="准备逻辑部分"><a href="#准备逻辑部分" class="headerlink" title="准备逻辑部分"></a>准备逻辑部分</h4><p>接下来，我们将使用 antd 帮助我们快速的编写一下我们即将实现的待办事项的界面，打开 <code>src/App.tsx</code> ，对其中的代码做出对应的修改如下：</p><figure class="highlight ts"><figcaption><span>src/App.tsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvNzU2YjJkNDVmOTc5MGNhZjkxYWI0Yzc2YzIzZGVjMDZiN2JmOWRhOC9zcmMvQXBwLnRzeA==" title="https://github.com/pftom/typescript-tea/blob/756b2d45f9790caf91ab4c76c23dec06b7bf9da8/src/App.tsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> logo <span class="keyword">from</span> <span class="string">'./logo.svg'</span>;</span><br><span class="line">[tuture-del]<span class="keyword">import</span> <span class="string">'./App.css'</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> React, &#123; useState, useRef &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123;</span><br><span class="line">[tuture-add]  List,</span><br><span class="line">[tuture-add]  Avatar,</span><br><span class="line">[tuture-add]  Button,</span><br><span class="line">[tuture-add]  Typography,</span><br><span class="line">[tuture-add]  Form,</span><br><span class="line">[tuture-add]  Input,</span><br><span class="line">[tuture-add]  Select,</span><br><span class="line">[tuture-add]  DatePicker,</span><br><span class="line">[tuture-add]  Menu,</span><br><span class="line">[tuture-add]  Dropdown,</span><br><span class="line">[tuture-add]  Tabs</span><br><span class="line">[tuture-add]&#125; <span class="keyword">from</span> <span class="string">"antd"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; DownOutlined &#125; <span class="keyword">from</span> <span class="string">"@ant-design/icons"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> <span class="string">"./App.css"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> logo <span class="keyword">from</span> <span class="string">"./logo.svg"</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">const</span> &#123; Title &#125; = Typography;</span><br><span class="line">[tuture-add]<span class="keyword">const</span> &#123; Option &#125; = Select;</span><br><span class="line">[tuture-add]<span class="keyword">const</span> &#123; TabPane &#125; = Tabs;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">const</span> todoListData = [</span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-add]    user: <span class="string">"mRcfps"</span>,</span><br><span class="line">[tuture-add]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-add]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-add]    user: <span class="string">"pftom"</span>,</span><br><span class="line">[tuture-add]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-add]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-add]    user: <span class="string">"Holy"</span>,</span><br><span class="line">[tuture-add]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-add]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-add]    user: <span class="string">"crxk"</span>,</span><br><span class="line">[tuture-add]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-add]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-add]    user: <span class="string">"Pony"</span>,</span><br><span class="line">[tuture-add]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-add]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line">[tuture-add]];</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">const</span> userList = [</span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"666666666"</span>,</span><br><span class="line">[tuture-add]    name: <span class="string">"图雀社区"</span>,</span><br><span class="line">[tuture-add]    avatar: <span class="string">"https://avatars0.githubusercontent.com/u/39240800?s=60&amp;v=4"</span></span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"23410977"</span>,</span><br><span class="line">[tuture-add]    name: <span class="string">"mRcfps"</span>,</span><br><span class="line">[tuture-add]    avatar: <span class="string">"https://avatars0.githubusercontent.com/u/23410977?s=96&amp;v=4"</span></span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"25455350"</span>,</span><br><span class="line">[tuture-add]    name: <span class="string">"crxk"</span>,</span><br><span class="line">[tuture-add]    avatar: <span class="string">"https://avatars1.githubusercontent.com/u/25455350?s=96&amp;v=4"</span></span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"23410977"</span>,</span><br><span class="line">[tuture-add]    name: <span class="string">"pftom"</span>,</span><br><span class="line">[tuture-add]    avatar: <span class="string">"https://avatars0.githubusercontent.com/u/23410977?s=96&amp;v=4"</span></span><br><span class="line">[tuture-add]  &#125;,</span><br><span class="line">[tuture-add]  &#123;</span><br><span class="line">[tuture-add]    id: <span class="string">"58352313"</span>,</span><br><span class="line">[tuture-add]    name: <span class="string">"holy"</span>,</span><br><span class="line">[tuture-add]    avatar: <span class="string">"https://avatars0.githubusercontent.com/u/58352313?s=96&amp;v=4"</span></span><br><span class="line">[tuture-add]  &#125;</span><br><span class="line">[tuture-add]];</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">const</span> menu = (</span><br><span class="line">[tuture-add]  &lt;Menu&gt;</span><br><span class="line">[tuture-add]    &lt;Menu.Item&gt;完成&lt;<span class="regexp">/Menu.Item&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]    &lt;Menu.Item&gt;删除&lt;/</span>Menu.Item&gt;</span><br><span class="line">[tuture-add]  &lt;<span class="regexp">/Menu&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]);</span></span><br><span class="line"><span class="regexp">[tuture-add]</span></span><br><span class="line"><span class="regexp">[tuture-add]const TodoInput = (&#123; value = &#123;&#125; &#125;) =&gt; &#123;</span></span><br><span class="line"><span class="regexp">  return (</span></span><br><span class="line"><span class="regexp">[tuture-del]    &lt;div className="App"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]      &lt;header className="App-header"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]        &lt;img src=&#123;logo&#125; className="App-logo" alt="logo" /</span>&gt;</span><br><span class="line">[tuture-del]        &lt;p&gt;</span><br><span class="line">[tuture-del]          Edit &lt;code&gt;src/App.tsx&lt;<span class="regexp">/code&gt; and save to reload.</span></span><br><span class="line"><span class="regexp">[tuture-del]        &lt;/</span>p&gt;</span><br><span class="line">[tuture-del]        &lt;a</span><br><span class="line">[tuture-del]          className=<span class="string">"App-link"</span></span><br><span class="line">[tuture-del]          href=<span class="string">"https://reactjs.org"</span></span><br><span class="line">[tuture-del]          target=<span class="string">"_blank"</span></span><br><span class="line">[tuture-del]          rel=<span class="string">"noopener noreferrer"</span></span><br><span class="line">[tuture-add]    &lt;div className=<span class="string">"todoInput"</span>&gt;</span><br><span class="line">[tuture-add]      &lt;Input <span class="keyword">type</span>=<span class="string">"text"</span> placeholder=<span class="string">"输入待办事项内容"</span> /&gt;</span><br><span class="line">[tuture-add]      &lt;Select style=&#123;&#123; width: <span class="number">80</span> &#125;&#125; size=<span class="string">"small"</span> defaultValue=<span class="string">"666666666"</span>&gt;</span><br><span class="line">[tuture-add]        &#123;userList.map(<span class="function"><span class="params">user</span> =&gt;</span> (</span><br><span class="line">[tuture-add]          &lt;Option value=&#123;user.id&#125;&gt;&#123;user.name&#125;&lt;<span class="regexp">/Option&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]        ))&#125;</span></span><br><span class="line"><span class="regexp">[tuture-add]      &lt;/</span>Select&gt;</span><br><span class="line">[tuture-add]      &lt;DatePicker</span><br><span class="line">[tuture-add]        size=<span class="string">"small"</span></span><br><span class="line">[tuture-add]        style=&#123;&#123; marginLeft: <span class="string">"16px"</span>, marginRight: <span class="string">"16px"</span> &#125;&#125;</span><br><span class="line">[tuture-add]      /&gt;</span><br><span class="line">[tuture-add]    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]  );</span></span><br><span class="line"><span class="regexp">[tuture-add]&#125;;</span></span><br><span class="line"><span class="regexp">[tuture-add]</span></span><br><span class="line"><span class="regexp">[tuture-add]function TodoList() &#123;</span></span><br><span class="line"><span class="regexp">[tuture-add]  return (</span></span><br><span class="line"><span class="regexp">[tuture-add]    &lt;List</span></span><br><span class="line"><span class="regexp">[tuture-add]      className="demo-loadmore-list"</span></span><br><span class="line"><span class="regexp">[tuture-add]      itemLayout="horizontal"</span></span><br><span class="line"><span class="regexp">[tuture-add]      dataSource=&#123;todoListData&#125;</span></span><br><span class="line"><span class="regexp">[tuture-add]      renderItem=&#123;item =&gt; (</span></span><br><span class="line"><span class="regexp">[tuture-add]        &lt;List.Item</span></span><br><span class="line"><span class="regexp">[tuture-add]          actions=&#123;[</span></span><br><span class="line"><span class="regexp">[tuture-add]            &lt;Dropdown overlay=&#123;menu&#125;&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]              &lt;a key="list-loadmore-more"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]                操作 &lt;DownOutlined /</span>&gt;</span><br><span class="line">[tuture-add]              &lt;<span class="regexp">/a&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]            &lt;/</span>Dropdown&gt;</span><br><span class="line">[tuture-add]          ]&#125;</span><br><span class="line">        &gt;</span><br><span class="line">[tuture-del]          Learn React</span><br><span class="line">[tuture-del]        &lt;<span class="regexp">/a&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]      &lt;/</span>header&gt;</span><br><span class="line">[tuture-add]          &lt;List.Item.Meta</span><br><span class="line">[tuture-add]            avatar=&#123;</span><br><span class="line">[tuture-add]              &lt;Avatar src=<span class="string">"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"</span> /&gt;</span><br><span class="line">[tuture-add]            &#125;</span><br><span class="line">[tuture-add]            title=&#123;&lt;a href=<span class="string">"https://ant.design"</span>&gt;&#123;item.user&#125;&lt;<span class="regexp">/a&gt;&#125;</span></span><br><span class="line"><span class="regexp">[tuture-add]            description=&#123;item.time&#125;</span></span><br><span class="line"><span class="regexp">[tuture-add]          /</span>&gt;</span><br><span class="line">[tuture-add]          &lt;div&gt;&#123;item.content&#125;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]        &lt;/</span>List.Item&gt;</span><br><span class="line">[tuture-add]      )&#125;</span><br><span class="line">[tuture-add]    /&gt;</span><br><span class="line">[tuture-add]  );</span><br><span class="line">[tuture-add]&#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> callback = <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> onFinish = <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;;</span><br><span class="line">[tuture-add]  <span class="keyword">const</span> ref = useRef(<span class="literal">null</span>);</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]  <span class="keyword">return</span> (</span><br><span class="line">[tuture-add]    &lt;div className=<span class="string">"App"</span> ref=&#123;ref&#125;&gt;</span><br><span class="line">[tuture-add]      &lt;div className=<span class="string">"container header"</span>&gt;</span><br><span class="line">[tuture-add]        &lt;img src=&#123;logo&#125; alt=<span class="string">""</span> /&gt;</span><br><span class="line">[tuture-add]        &lt;Title level=&#123;<span class="number">3</span>&#125;&gt;图雀社区：汇聚精彩的免费实战教程&lt;<span class="regexp">/Title&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]      &lt;/</span>div&gt;</span><br><span class="line">[tuture-add]      &lt;div className=<span class="string">"container"</span>&gt;</span><br><span class="line">[tuture-add]        &lt;Form onFinish=&#123;onFinish&#125;&gt;</span><br><span class="line">[tuture-add]          &lt;Form.Item name=<span class="string">"todo"</span>&gt;</span><br><span class="line">[tuture-add]            &lt;TodoInput /&gt;</span><br><span class="line">[tuture-add]          &lt;<span class="regexp">/Form.Item&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]        &lt;/</span>Form&gt;</span><br><span class="line">[tuture-add]      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]      &lt;div className="container"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]        &lt;Tabs onChange=&#123;callback&#125; type="card"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]          &lt;TabPane tab="所有" key="1"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]            &lt;TodoList /</span>&gt;</span><br><span class="line">[tuture-add]          &lt;<span class="regexp">/TabPane&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]          &lt;TabPane tab="进行中" key="2"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]            &lt;TodoList /</span>&gt;</span><br><span class="line">[tuture-add]          &lt;<span class="regexp">/TabPane&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]          &lt;TabPane tab="已完成" key="3"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]            &lt;TodoList /</span>&gt;</span><br><span class="line">[tuture-add]          &lt;<span class="regexp">/TabPane&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]        &lt;/</span>Tabs&gt;</span><br><span class="line">[tuture-add]      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"> <span class="comment">// ...</span></span><br></pre></td></tr></table></figure><p>上面的代码主要就是一系列初始数据的准备，antd 组件的使用，编写起来的大致轮廓，还没有涉及到任何的 TS 语法，但这个是我们开始项目的基础，读者只需要进行简单的复制放进现有的 <code>typescript-tea</code> 项目中对应的 <code>src/App.tsx</code> 中即可。</p><h4 id="准备样式部分"><a href="#准备样式部分" class="headerlink" title="准备样式部分"></a>准备样式部分</h4><p>准备了逻辑代码之后，为了让我们最后的待办事项在样式上更美观一点，也利于我们讲解时的操作，我们需要给项目加一点样式，打开 <code>src/App.css</code> 对其中的代码做出对应的修改如下：</p><figure class="highlight css"><figcaption><span>src/App.css</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvNzU2YjJkNDVmOTc5MGNhZjkxYWI0Yzc2YzIzZGVjMDZiN2JmOWRhOC9zcmMvQXBwLmNzcw==" title="https://github.com/pftom/typescript-tea/blob/756b2d45f9790caf91ab4c76c23dec06b7bf9da8/src/App.css">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.App</span> &#123;</span><br><span class="line">[tuture-del]  text-align: center;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">display</span>: <span class="selector-tag">flex</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">flex-direction</span>: <span class="selector-tag">column</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">align-items</span>: <span class="selector-tag">center</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">padding-top</span>: 60<span class="selector-tag">px</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>&#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span></span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.container</span> &#123;</span><br><span class="line">[tuture-add]  width: 600px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="selector-class">.App-logo</span> &#123;</span><br><span class="line">[tuture-del]  height: 40vmin;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">pointer-events</span>: <span class="selector-tag">none</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.header</span> &#123;</span><br><span class="line">[tuture-add]  text-align: center;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">margin-bottom</span>: 56<span class="selector-tag">px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="keyword">@media</span> (<span class="attribute">prefers-reduced-motion:</span> no-preference) &#123;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-class">.App-logo</span> &#123;</span><br><span class="line">[tuture-del]    animation: App-logo-spin infinite 20s linear;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  &#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.header</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">[tuture-add]  width: 160px;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">height</span>: 160<span class="selector-tag">px</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">margin-bottom</span>: 24<span class="selector-tag">px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="selector-class">.App-header</span> &#123;</span><br><span class="line">[tuture-del]  background-color: #282c34;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">min-height</span>: 100<span class="selector-tag">vh</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.todoInput</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">[tuture-del]  flex-direction: column;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">flex-direction</span>: <span class="selector-tag">row</span>;</span><br><span class="line">  <span class="selector-tag">align-items</span>: <span class="selector-tag">center</span>;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">justify-content</span>: <span class="selector-tag">center</span>;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">font-size</span>: <span class="selector-tag">calc</span>(10<span class="selector-tag">px</span> + 2<span class="selector-tag">vmin</span>);</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">color</span>: <span class="selector-tag">white</span>;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>&#125;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span></span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="selector-class">.App-link</span> &#123;</span><br><span class="line">[tuture-del]  color: #61dafb;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">height</span>: 40<span class="selector-tag">px</span>;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span>  <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#434343</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[tuture-del]</span><span class="keyword">@keyframes</span> App-logo-spin &#123;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">from</span> &#123;</span><br><span class="line">[tuture-del]    transform: rotate(0deg);</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  &#125;</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  <span class="selector-tag">to</span> &#123;</span><br><span class="line">[tuture-del]    transform: rotate(360deg);</span><br><span class="line"><span class="selector-attr">[tuture-del]</span>  &#125;</span><br><span class="line"><span class="selector-attr">[tuture-add]</span><span class="selector-class">.todoInput</span> <span class="selector-tag">input</span> &#123;</span><br><span class="line">[tuture-add]  border: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>好了！所有的准备工作已经就绪，在开始下一节真正的 TS 学习之前，我们先来回顾一下我们在这个小节中所完成的工作：</p><ul><li>使用 CRA 的 TypeScript 脚本初始化了一个 TS 版的 React 项目</li><li>安装了 antd 组件库，并使用 <code>react-app-rewired</code> 替换默认的 <code>react-scripts</code> 来完成对 CRA 的 Webpack 配置进行修改，以是我们可以获得 antd 组件的按需引用和主题定制的功能</li><li>准备了初始待办事项代码的逻辑部分和样式部分</li></ul><p>我们在前面铺垫了大量的 TypeScript 的优点以及花了不少笔墨来准备初始代码，想必读到这里的读者们可能已经等不及要马上见识一下 TS 的庐山真面目了吧！马上就来啦！</p><blockquote><p>本文所涉及的源代码都放在了 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdHlwZXNjcmlwdC10ZWE=" title="https://github.com/tuture-dev/typescript-tea">Github<i class="fa fa-external-link"></i></span>  或者 <span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vdHV0dXJlL3R5cGVzY3JpcHQtdGVh" title="https://gitee.com/tuture/typescript-tea">Gitee<i class="fa fa-external-link"></i></span> 上，如果您觉得我们写得还不错，希望您能给<strong>❤️ 这篇文章点赞+</strong><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdHlwZXNjcmlwdC10ZWE=" title="https://github.com/tuture-dev/typescript-tea"><strong>Github</strong><i class="fa fa-external-link"></i></span>** 或 <strong>[</strong>Gitee<strong>](<span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vdHV0dXJlL3R5cGVzY3JpcHQtdGVh" title="https://gitee.com/tuture/typescript-tea">https://gitee.com/tuture/typescript-tea<i class="fa fa-external-link"></i></span>)</strong> 仓库加星 ❤**️ 哦~</p></blockquote><p><img alt data-src="https://user-gold-cdn.xitu.io/2019/12/19/16f1ddb37a4d47a8?w=900&h=500&f=png&s=138401"></p>]]></content>
    
    <summary type="html">
    
      本文通过动手实践的方式带你搭建一个 TypeScript 版本的 React 项目，并且配置了 Ant Design 组件库，为整个TypeScript 从入门到实践系列实战教程准备初始代码。
    
    </summary>
    
    
    
      <category term="React" scheme="https://tuture.co/tags/React/"/>
    
      <category term="TypeScript" scheme="https://tuture.co/tags/TypeScript/"/>
    
  </entry>
  
  <entry>
    <title>类型即正义：TypeScript 从入门到实践（一）</title>
    <link href="https://tuture.co/2020/04/06/C_ao1Yv/"/>
    <id>https://tuture.co/2020/04/06/C_ao1Yv/</id>
    <published>2020-04-05T17:46:37.842Z</published>
    <updated>2021-07-11T07:16:34.087Z</updated>
    
    <content type="html"><![CDATA[<div class="profileBox">  <div class="avatarBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9t" title="https://github.com/pftom"><img alt class="avatar" data-src="/images/avatars/pftom.jpg"><i class="fa fa-external-link"></i></span>  </div>  <div class="rightBox">    <div class="infoBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9t" title="https://github.com/pftom"><p class="nickName">@pftom</p><i class="fa fa-external-link"></i></span>  </div>  <div class="codeBox">    <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVh" title="https://github.com/pftom/typescript-tea"><span class="codeText">查看代码</span><i class="fa fa-external-link"></i></span>  </div>  </div></div><a id="more"></a><h2 id="TypeScript-初探"><a href="#TypeScript-初探" class="headerlink" title="TypeScript 初探"></a>TypeScript 初探</h2><p>正式 TS 时间 ☕️，TS 是一门静态编程语言，它是 JavaScript 的超集。首先我们先来解释一下什么是编程语言，然后我们再来引出 TypeScript 是什么。</p><h3 id="编程语言是什么？"><a href="#编程语言是什么？" class="headerlink" title="编程语言是什么？"></a>编程语言是什么？</h3><p>那么什么是编程语言了？编程语言是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计算机发出指令。</p><p>我们拿 JS 来举例，一门标准的编程语言一般包含如下几个部分：</p><ul><li>数据结构：如原始数据类型 string/number/void 等，非原始数据类型 array/object/enum 等</li><li>控制结构：如 if/else 、 switch 、while、for 循环等</li><li>组织结构：如 函数、类</li><li>特性：如 JS 的原型链</li><li>常用的 API：如 isNaN 判断是不是非数字，toFixed 将小数进行四舍五入操作</li><li>运行环境：如 浏览器端的 JavaScript、服务器端的 Node</li></ul><p>其中前五种又称为语言内核，也就是我们常常喊的 ECMAScript 2015，或者 ES6；最后一个运行环境在浏览器端结合 BOM/DOM 即成为 JavaScript，在服务器端结合一些文件/网络的操作即成为 Node。</p><h3 id="TypeScript-是什么？"><a href="#TypeScript-是什么？" class="headerlink" title="TypeScript 是什么？"></a>TypeScript 是什么？</h3><p>而 TS，作为 JavaScript 的超集，包含着两类属性：</p><ul><li>属于 JavaScript 端的编程语言特性，使得我们可以执行各种 JavaScript 相关的操作：变量声明、编写 if/else 控制流、使用循环处理重复任务、使用函数执行特定的任务块、使用类来组织和复用代码和模拟真实世界的操作等，还有新特性比如：装饰器、Iterator、Generator 这些。这类特性在此篇文章中，我们默认你已经很清楚了，不会做过多的讲解。</li><li>属于 TypeScript 端独有的特性：类型，它也具有一套编程语言的特性，比如标志一个变量是 string 类型，一个函数的参数有三个，它们的类型分别是 string/number/boolean，返回类型为 never 等，这是基础类型，我们甚至可以基于类型进行编程，使用类型版本的控制、组织结构来完成高级类型的编写，进而将类型附着在 JavaScript 对应的编程语言特性上，将 JS 静态化，使得我们可以在编译期间就能发现类型上的错误，这一特性是我们本篇文章的重点。</li></ul><p>好的，读到这里，相比很多读者已经清楚了，其实 TS 没什么神秘的，主要就是设计了一套类似编程语言的类型语言，然后将这些类型附着在原 JavaScript 的语言之上，给其加上类型限制使得其静态化，进而可以快速的在编写时发现很多潜在的问题，帮助我们编写错误率更低，更适合团队协作的代码，这也是 TypeScript 适合编写大型的业务应用的原因。</p><h3 id="类型语言之数据结构"><a href="#类型语言之数据结构" class="headerlink" title="类型语言之数据结构"></a>类型语言之数据结构</h3><p>其中 TS 数据结构又包含原始类型、非原始类型、特殊类型和高级类型等几类。我们将结合在 TS 类型侧的定义，以及附着在 JS 上进行实战来讲解。</p><h4 id="原始类型"><a href="#原始类型" class="headerlink" title="原始类型"></a>原始类型</h4><h5 id="TS-类型侧的定义"><a href="#TS-类型侧的定义" class="headerlink" title="TS 类型侧的定义"></a>TS 类型侧的定义</h5><p>和 JS 中的原始数据类型一样，TS 对应着一致的类型定义，包括下面八种：</p><ul><li>number</li><li>string</li><li>boolean</li><li>null</li><li>undefined</li><li>void</li><li>symbol</li><li>bigint</li></ul><div class="note info">            <p><strong>提示</strong></p><p>其中前六种是 ES5 中就有的，symbol 从 ES6 开始引入，bigint 是 ES2020 新引进的。</p>          </div><p>上面是 TS 的原始类型，我们之前提到 TS 就是将类型附着在 JS 上，将其类型化，那么我们来看看上面的原始类型如何附着在 JS 上，将其类型化。</p><h5 id="附着在-JS-上的实战"><a href="#附着在-JS-上的实战" class="headerlink" title="附着在 JS 上的实战"></a>附着在 JS 上的实战</h5><p>TS 通过独特的<strong>冒号语法</strong>来将其类型侧定义的类型附着在 JS 上，我们来看几个例子：</p><p>用 JS 语言来写图雀社区的 Slogan，我们一般会这么写：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> tutureSlogan = <span class="string">'图雀社区，汇聚精彩的免费实战教程'</span>;</span><br></pre></td></tr></table></figure><p>我们可以确定，这句 Slogan 是一个 string 类型的，所以我们用对应的 TS 类型附着在其变量定义上如下：</p><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> tutureSlogan: <span class="built_in">string</span> = <span class="string">'图雀社区，汇聚精彩的免费实战教程'</span>;</span><br></pre></td></tr></table></figure><p>这样我们就给原 JS 的 <code>tutureSlogan</code> 变量加上了类型定义，它是一个 <code>string</code> 类型的变量，通过这样的操作，原 JS 变量的类型就被静态化了，在初始化时，就不能再赋值其他的类型给这个 <code>tutureSlogan</code> 变量了，比如我们将 <code>number</code> 类型的字面量赋值给 <code>tutureSlogan</code> ，就会报错：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> tutureSlogan: <span class="built_in">string</span> = <span class="number">5201314</span>; <span class="comment">// 报错 Type '5201314' is not assignable to Type 'string'</span></span><br></pre></td></tr></table></figure><p>这就是 TS 的强大之处，当团队编码时事先约定好数据的类型，那么后续编写并调用这些设置好类型的变量时就会强制起约束作用，就像上面的代码一样，如果给 <code>tutureSlogan</code> 赋值 <code>5201314</code> 就会报错，其实你大可克制一点对吧 😌，给 <code>5201314</code> 加个限制，两边带上引号 <code>&#39;5201314&#39;</code> 问题就迎刃而解了，爱也可以是克制 🤓。</p><div class="note info">            <p><strong>提示</strong></p><p>有些细心的同学可能对上面的报错信息有点不能理解，对于报错信息的后半段类型 <code>string</code> 可能理解，因为我们给 <code>tutureSlogan</code> 限制了 <code>string</code> 类型，但是对于我们的赋值 <code>5201314</code> ，它原本是一个 JS 的 number 类型的字面量，为什么也成了 <code>Type</code> 了？</p><p>那是因为，TS 引擎在对语句进行编译的时候，会对变量赋值两端做一个类型推理，比如对赋值语句的右侧 <code>5201314</code> ，会将其推理成 <code>5201314</code> 这个类型，它是一个属于 <code>number</code> 类型的一个特殊的 <code>number</code> 类型，可以被分配（<code>assignable</code> )给 <code>number</code> 类型的变量，这里的 <code>assignable</code> 是可分配的意思，就是一个子类型可以被分配给一个父类型，比如数字 1 可以被分配给 number 数字类型，但因为 number 类型和 string 类型是冲突的，所以这里报错了。</p><p>这里读者可能会有感觉了就是，你写的 JS 语句，加上类型定义之后，在 TS 编译器的世界里，一切皆类型了，它会以一种类型的视角去看待原 JS 语句，比如上面的语句，在 TS 编译器眼里，就是 <code>5201314</code> 类型和 <code>string</code> 类型的一个比较过程，如果比较一致，那么好的，我 TS 编译器今天就放你一马，让你逍遥快活。</p>          </div><h5 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h5><p>我们上面说到了 TS 的原始类型，一共有八个之多，并且通过其中的 <code>string</code> 类型来讲解了如何将 TS 类型附着在原 JS 语法上以静态化 JS 语言，剩下的 7 个原始类型的用法和 <code>string</code> 类型类似，我们将在之后的讲解中逐渐用到其中的类型。</p><h4 id="非原始类型"><a href="#非原始类型" class="headerlink" title="非原始类型"></a>非原始类型</h4><h5 id="TS-类型侧的定义-1"><a href="#TS-类型侧的定义-1" class="headerlink" title="TS 类型侧的定义"></a>TS 类型侧的定义</h5><p>同样的 JS 中的非原始数据类型一样，TS 中也存在非原始类型，表示出了八种原始类型之外的类型，非原始类型也称为是 <code>object</code> 类型。</p><p>实际上 TS 中还有几个常见的非原始类型，例举如下：</p><ul><li>array</li><li>tuple</li><li>enum</li></ul><p>且因为它们属于 <code>object</code> 类型，所以 <code>object</code> 类型实际上就代表了非原始类型。在上面的三个类型以及其父类型 <code>object</code> 中，<code>array</code> 和 <code>object</code> 其实我们应该有点熟悉，至于 <code>tuple</code> 和 <code>enum</code> 则是 TS 中新增的类型，JS 中正式提案中目前是没有的。讲完了类型侧定义，我们马上来实践一下上面的 <code>array</code> 和 <code>enum</code> 非原始类型。</p><h5 id="array-类型附着实战"><a href="#array-类型附着实战" class="headerlink" title="array 类型附着实战"></a>array 类型附着实战</h5><p>其中 <code>array</code> 类型我们比较熟悉，但这里有个不同就是之前我们的 JS 因为是动态语言，所以一个数组里面可以有各种不同的数据类型项，比如我们看如下 JS 语句：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="string">'1'</span>, <span class="number">2</span>, <span class="string">'3'</span>];</span><br></pre></td></tr></table></figure><p>可以看到，从 TS 的角度去看这个数组变量 <code>arr</code> 所包含的类型，存在字符串类型 <code>&#39;1&#39;</code> 和 <code>&#39;3&#39;</code> ，以及数字类型 <code>2</code> 。但 TS 总的数组类型要求数组中的元素都是同一个类型，不允许动态变化，比如我们为上面的数组变量 <code>arr</code> 声明类型应该如下：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> arr: <span class="built_in">string</span>[] = [<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>];</span><br></pre></td></tr></table></figure><p>可以看到，我们给变量 <code>arr</code> 声明了 <code>string[]</code> 类型，即一个 <code>string</code> 类型后面跟着一个数组标志，表示是字符串数组类型，当声明了 <code>string[]</code> 类型之后，我们需要把之前的数组 <code>2</code> 改成字符串 <code>&#39;2&#39;</code> 。</p><p>我们注意到 <code>array</code> 类型，它要求数组中每项的类型都一样，一般应用在数组的长度未知的情况，用特定的类型，比如 <code>string</code> 类型来约束数组的每一项。</p><p>然而从 JS 转过来的同学大多数同学可能对这个 <code>array</code> 类型不适应了，我们 JS 的同学经常会遇到编写一个数组，其中的多项的类型不一样，就和我们上面的 JS <code>arr</code> 的项一样，既有 <code>string</code> 类型又有 <code>number</code> 类型，那这该怎么办了？还好！TS 的设计者也为我们考虑到了这一点，那就是我们下面要讲到的 <code>tuple</code> （元组）类型。</p><h5 id="tuple-类型附着实战"><a href="#tuple-类型附着实战" class="headerlink" title="tuple 类型附着实战"></a>tuple 类型附着实战</h5><p>大家可能对 <code>tuple</code> （元组）类型很陌生了，其实元是一种特殊的数组类型，它主要用于这样的场景：“一个数组的项数已知，其中每项的类型也已知”，这句话说起来可能比较绕，我们用上面讲数组的例子来讲元祖：</p><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="string">'1'</span>, <span class="number">2</span>, <span class="string">'3'</span>];</span><br></pre></td></tr></table></figure><p>我们知道上面的数组第一项和第三项的类型为 <code>string</code> 类型，第二项的类型为 <code>number</code> 类型，现在我们要给这个 <code>arr</code> 附着一个类型，使得其静态化。</p><p>这个条件满足我们上面说的元组的适用场景，我们通过给 <code>arr</code> 一个对应的元组类型，让我们可以保持上面的写法不变：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> arr: [<span class="built_in">string</span>, <span class="built_in">number</span>, <span class="built_in">string</span>] = [<span class="string">'1'</span>, <span class="number">2</span>, <span class="string">'3'</span>];</span><br></pre></td></tr></table></figure><p>可以看到，元组就是形如 <code>[type1, type2, type3, ...., typen]</code> 这样数组长度已知，且类型已知的情况，其中 <code>type1</code> 到 <code>typen</code> 中所有的类型都可以不一样。</p><h5 id="小结-1"><a href="#小结-1" class="headerlink" title="小结"></a>小结</h5><p>在这一小结中我们讲解了一下什么是非原始类型，然后说明了在 TS 中有四种非原始类型，其中有一种代表非原始类型 <code>object</code> ，然后剩下的三种属于 <code>object</code> 类型。</p><p>接着我们通过实践讲解了 <code>array</code> 和 <code>tuple</code> 类型，对于 <code>enum</code> 类型和 <code>object</code> 类型本身，我们将留在之后的章节来讲，敬请期待 ✌️。</p><h4 id="特殊类型"><a href="#特殊类型" class="headerlink" title="特殊类型"></a>特殊类型</h4><p>TS 中还有几个常用的特殊类型，它们是 <code>any</code> 、<code>unknown</code> 和 <code>never</code> ，其中 <code>never</code> 类型一般会伴随着和函数的类型声明一起使用，所以我们将 <code>never</code> 类型的时候会提到函数的类型如何进行声明。</p><p>接下来我们来讲一讲这三个类型的含义和应用。</p><h5 id="any-类型定义与实战"><a href="#any-类型定义与实战" class="headerlink" title="any 类型定义与实战"></a>any 类型定义与实战</h5><p><code>any</code> 的字面含义是 “任何”，主要用于在编码的时候不知道一个变量的类型，所以先给它加一个 <code>any</code> 类型定义，表示它可以是任何类型，一般留待后续确认此变量类型之后再将 <code>any</code> 改为具体的类型。</p><p>我们来看一个例子，比如我们有下面一段 TS 变量定义语句：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> demand: any;</span><br></pre></td></tr></table></figure><p>因为有时候产品给一个需求，要我们去开发一个新功能，给了设计稿，但是没交接清楚，对于设计稿有一些内容我们想提前做，但是因为不清楚具体的类型，比如这里的 <code>demand</code> ，所以我们这里给 <code>demand</code> 一个 <code>any</code> 类型，然后继续做其他的内容，这样既不会出错，也不会影响其他的开发进度。</p><p>等到产品把具体的上下文交代清楚了，诶！我们清楚了知道这个 <code>demand</code> 的类型了，我们就可以回过头来给其附着一个严格的类型定义，比如我们知道它是 <code>string</code> 类型，那么我们再返回来对其修改如下：</p><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> demand: <span class="built_in">string</span>;</span><br></pre></td></tr></table></figure><p>就是这样，<code>any</code> 的应用场景大多是这样的。但是玩 TS 的朋友要小心哦，不要一碰到不确定的就写个 <code>any</code> 类型，然后写了之后还不改，那就把 TS 用成了 AnyScript 了，这就和 JS 一样了 😉。所以你看呀，TS 的优秀之处在于，你完全可以在 TS 的环境中写 JS 还能享受 TS 带来的各种静态语言的优势，所以这么受欢迎也是可以理解滴。</p><h5 id="unknown-类型定义与实战"><a href="#unknown-类型定义与实战" class="headerlink" title="unknown 类型定义与实战"></a>unknown 类型定义与实战</h5><p><code>unknown</code> 类型和 <code>any</code> 都可以表示任何类型，应用场景也和上面类型，但是它更安全。那么具体安全在哪里了？我们通过一个例子来看一看：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> demandOne: <span class="built_in">any</span>;</span><br><span class="line"><span class="keyword">let</span> demandTwo: unknown;</span><br></pre></td></tr></table></figure><p>我们拿到了开发需求，但是不清楚具体类型又打算继续开发时，上面两种情况都可以使用，但是当我们具体使用这两个变量的时候，<code>any</code> 类型的变量是可以进行任意进行赋值、实例化、函数执行等操作，但是 <code>unknown</code> 只允许赋值，不允许实例化、函数执行等操作，我们来看个例子：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">demandOne = <span class="string">'Hello, Tuture'</span>; <span class="comment">// 可以的</span></span><br><span class="line">demandTwo = <span class="string">'Hello, Ant Design'</span>; <span class="comment">// 可以的</span></span><br><span class="line"></span><br><span class="line">demandOne.foo.bar(); <span class="comment">// 可以的</span></span><br><span class="line">demandTwo.foo.bar(); <span class="comment">// 报错</span></span><br></pre></td></tr></table></figure><p>可以看到，<code>unknown</code> 类型只允许赋值操作，不允许对象取值（Getter) 、函数执行等操作，所以它更安全。</p><h5 id="never-函数类型定义与实战"><a href="#never-函数类型定义与实战" class="headerlink" title="never / 函数类型定义与实战"></a>never / 函数类型定义与实战</h5><p><code>never</code> 的字面意思是 “永不”，在 TS 中代表不存在的值类型，一般用于给函数进行类型声明，函数绝不会有返回值的时候使用，比如函数内抛出错误，我们首先看个例子将讲解一下如何给函数进行类型声明，然后接着我们讲  <code>never</code> 类型如何使用：</p><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">responseError</span>(<span class="params">message</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// ... 具体操作，接收信息，抛出错误</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>对于上面的函数，我们可以使用箭头函数的形式把它抽象成为形如 <code>(args1, args2, ... , argsn) =&gt; returnValue</code> ，我们主要关注点在于函数的输入和输出，所以我们在类型声明的时候把函数的输入参数的类型和输出结果的类型定义好就可以了。我们注意到上面我们定义的函数有一个参数： <code>message</code>  ，并且函数体内根据 <code>message</code>  抛出对应的错误，那么我们来给它进行类型声明如下：</p><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">responseError</span>(<span class="params">message: <span class="built_in">string</span></span>): <span class="title">never</span> </span>&#123;</span><br><span class="line">  <span class="comment">// ... 具体操作，接收信息，抛出错误</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h4 id="动手实践"><a href="#动手实践" class="headerlink" title="动手实践"></a>动手实践</h4><p>基本了解了类型语言的数据结构之后，我们马上来写一点 React 代码来实践我们学到的知识。</p><p>我们之前准备的代码中可以看到，有两个假数据数组 <code>todoListData</code> 和 <code>userList</code> ，我们使用之前学到的知识来给这两个数组进行类型定义，打开 <code>src/App.tsx</code> 对其中的内容作出对应的修改如下：</p><figure class="highlight ts"><figcaption><span>src/App.tsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvMjcyNmYxMDk0ZGQ2ODMwYTg1YmZlMjczZGE3OTU2Mjg4NTZiMDBkZC9zcmMvQXBwLnRzeA==" title="https://github.com/pftom/typescript-tea/blob/2726f1094dd6830a85bfe273da795628856b00dd/src/App.tsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">[tuture-del]<span class="keyword">const</span> todoListData = [</span><br><span class="line">[tuture-add]<span class="keyword">interface</span> Todo &#123;</span><br><span class="line">[tuture-add]  user: <span class="built_in">string</span>;</span><br><span class="line">[tuture-add]  time: <span class="built_in">string</span>;</span><br><span class="line">[tuture-add]  content: <span class="built_in">string</span>;</span><br><span class="line">[tuture-add]  isCompleted: <span class="built_in">boolean</span>;</span><br><span class="line">[tuture-add]&#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">interface</span> User &#123;</span><br><span class="line">[tuture-add]  id: <span class="built_in">string</span>;</span><br><span class="line">[tuture-add]  name: <span class="built_in">string</span>;</span><br><span class="line">[tuture-add]  avatar: <span class="built_in">string</span>;</span><br><span class="line">[tuture-add]&#125;</span><br><span class="line">[tuture-add]</span><br><span class="line">[tuture-add]<span class="keyword">const</span> todoListData: Todo[] = [</span><br><span class="line">  &#123;</span><br><span class="line">    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">    user: <span class="string">"mRcfps"</span>,</span><br><span class="line">    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">    isCompleted: <span class="literal">false</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">];</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">const</span> userList = [</span><br><span class="line">[tuture-add]<span class="keyword">const</span> userList: User[] = [</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="comment">// ...</span></span><br></pre></td></tr></table></figure><p>可以看到，上面我们定义了两个 <code>interface</code> Todo 和 User，然后以数组类型的方式对 <code>todoListData</code> 和 <code>userList</code> 进行注解，表示 <code>todoListData</code> 是 <code>Todo[]</code> 类型，<code>userList</code> 是 <code>User</code> 类型。</p><p>这里的 <code>interface</code> 我们还没用提到，我们将马上在后面讲到，可以理解它类似 JS 中的对象，用来组织一组类型，就比如我们这里  <code>todoList</code> 中单个元素实际上是包含四个属性的对象，其中前三个属性为 <code>string</code> 原始类型，最后一个属性为 <code>boolean</code> 类型，所以我们为了给 单个对象元素进行类型注解，我们使用了 <code>interface</code> 。</p><h2 id="枚举和接口"><a href="#枚举和接口" class="headerlink" title="枚举和接口"></a>枚举和接口</h2><p>在上一节中我们提到了 <code>interface</code> ，当时没有细讲，这一节我们就先来细细说一下 <code>interface</code> 是什么？</p><h3 id="Interface"><a href="#Interface" class="headerlink" title="Interface"></a>Interface</h3><p>它相当于类型中的 JS 对象，用于对函数、类等进行结构类型检查，所谓的结构类型检查，就是两个类型的结构一样，那么它们的类型就是兼容的，这在计算机科学的世界里也被成为 “鸭子类型”。</p><div class="note info">            <p><strong>提示</strong></p><p><strong>什么鸭子类型？</strong></p><p>当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子，那么这只鸟就可以被称为鸭子。</p>          </div><p>我们马上来看一个例子了解一个 <code>Interface</code> 是怎么样的，比如我们之前对象 <code>Todo</code> ，一个 Todo 对象如下：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> todo = &#123;</span><br><span class="line">  content: <span class="string">'图雀社区，汇聚精彩的免费技术教程'</span>;</span><br><span class="line">  user: <span class="string">'mRcfps'</span>,</span><br><span class="line">  time: <span class="string">'图雀社区：汇聚精彩的免费实战教程'</span>,</span><br><span class="line">  isCompleted: <span class="literal">false</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>现在我们要这个 todo 做一个类型注解，根据之前提到的 “鸭子类型” 的方式，我们可以定义一个 Interface 来为它做注解：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Todo &#123;</span><br><span class="line">  content: <span class="built_in">string</span>;</span><br><span class="line">  user: <span class="built_in">string</span>;</span><br><span class="line">  time: <span class="built_in">string</span>;</span><br><span class="line">  isCompleted: <span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> todo: Todo = &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>可以看到我们的接口 <code>Todo</code> 内容有四个字段，并且标注了这四个字段的类型，比如 <code>content</code> 为 <code>string</code> ，这个接口的样子和 <code>todo</code> 对象是一样的，所以用 Interface <code>Todo</code> 来注解 <code>todo</code> 是可行的，用 VSCode 的同学，应该可以看到我们这样写之后，编辑器里面没有抛出异常。</p><h4 id="可选属性"><a href="#可选属性" class="headerlink" title="可选属性"></a>可选属性</h4><p>上面我们讲到 Interface 是用来注解 对象，函数等，那么我们就有一个场景，一个对象里面的某些参数我们可能没有，比如一个待办事项 Todo，有时候没有设置 <code>time</code> 时间属性，那么修饰这样一个对象我们该怎么办了？幸好 TS 给我们提供了可选属性这样一个方便的属性，使得我们可以方便解决上面的问题，我们来看一下可选属性该怎么写，假如我们上面的那个例子，<code>time</code> 是可选的，那么我们可以写出如下这样：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Todo &#123;</span><br><span class="line">  content: <span class="built_in">string</span>;</span><br><span class="line">  user: <span class="built_in">string</span>;</span><br><span class="line">  time?: <span class="built_in">string</span>;</span><br><span class="line">  isCompleted: <span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>我们看到，只需要在属性类型修饰冒号左边加一个问号就可以了，这个时候我们就告诉 TS 编译器这个 <code>time</code> 属性是可选的一个类型，所以我们用上面的 Interface Todo 来注解一下没有 <code>time</code> 属性的 <code>todo</code> 对象如下：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> todo: Todo = &#123;</span><br><span class="line">  content: <span class="string">'予力内容创作，加速技术传播'</span>,</span><br><span class="line">  user: <span class="string">'pftom'</span>,</span><br><span class="line">  isCompleted: <span class="literal">false</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>可以看到，使用 VSCode 来跟着教程敲的同学应该发现上面的内容没有错误，类型检查通过了。</p><h4 id="只读属性"><a href="#只读属性" class="headerlink" title="只读属性"></a>只读属性</h4><p>TS 的 Interface 还有一些额外的属性比如只读属性（readonly），表示用相关带有只读属性的接口对某个 JS 元素做类型注解的时候，这个 JS 元素相关的属性被注解为只读属性时，我们之后不可以修改这个属性了，我们来看一个例子：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Todo &#123;</span><br><span class="line">  content: <span class="built_in">string</span>;</span><br><span class="line">  readonly user: <span class="built_in">string</span>;</span><br><span class="line">  time?: <span class="built_in">string</span>;</span><br><span class="line">  isCompleted: <span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到只读属性的添加就是在属性之前加上 <code>readonly</code> 关键字，就可以将 Interface 中的属性标志为已读的，我们来试验一下这个只读效果：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> todo: Todo = &#123;</span><br><span class="line">  content: <span class="string">'予力内容创作，加速技术传播'</span>,</span><br><span class="line">  user: <span class="string">'pftom'</span>,</span><br><span class="line">  isCompleted: <span class="literal">false</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">todo.user = <span class="string">'mRcfps'</span>;</span><br></pre></td></tr></table></figure><p>当我们进行上面的修改操作之后，编辑器内会报错：</p><p><img alt data-src="https://static.powerformer.com/c/cea18bc864f7a9b94223dcc718646b02/image-ec0575e36632e4e2.png"></p><h4 id="多余属性检查"><a href="#多余属性检查" class="headerlink" title="多余属性检查"></a>多余属性检查</h4><p>我在在 JS 中经常会遇到一个对象，一开始我们知道它有是哪个属性，但是它的属性却可以动态增加，比如我们的 <code>todo</code> 可能还存在 <code>priority</code> 优先级这样一个属性，那么我们如何定义一个可以注解动态增加属性对象的 Interface 了?</p><p>所幸 TS 提供一个多余属性检查的写法，使得上面的问题我们也可以解决，我们来看一下一个多余属性教程该怎么定义：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Todo &#123;</span><br><span class="line">  isCompleted: <span class="built_in">boolean</span>;</span><br><span class="line">  [propName: <span class="built_in">string</span>]: <span class="built_in">any</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>使用类似上面 JS 中的动态属性赋值的方式我们就可为 <code>Todo</code> 接口加上多余属性检查，这里我们将其注解为一定拥有 <code>isCompleted</code> 属性，其他的属性可以动态添加，因为动态添加的属性的值类型我们不清楚，所以我们用 <code>any</code> 来表示值类型，它可以是任意类型。我们马上来试验一下：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> todo: Todo = &#123;</span><br><span class="line">  content: <span class="string">'予力内容创作，加速技术传播'</span>,</span><br><span class="line">  isCompleted: <span class="literal">false</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">todo.user = <span class="string">'pftom'</span>;</span><br><span class="line">todo.time = <span class="string">'2020-04-04'</span>;</span><br></pre></td></tr></table></figure><p>可以看到，上面我们我们的 todo 在定义的时候只有两个属性，后面我们额外添加了两个属性，发现编辑器里面也不会报错，这就是多余属性检查的魅力。</p><h3 id="Enum"><a href="#Enum" class="headerlink" title="Enum"></a>Enum</h3><p>枚举是 TS 中独有的概念，在 JS 中没有，主要用于帮助定义一系列命名常量，常用于给一类变量做类型注解，它们的值是一组值里面的某一个，比如我们应用中参与创建待办事项的用户只有五个人，那么在创建待办事项时，此事项的所属用户是五人中的某一人。</p><p>我们马上来看一个例子，我们的将这五个用户放到枚举里面：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">enum</span> UserId &#123;</span><br><span class="line">  tuture,</span><br><span class="line">  mRcfps,</span><br><span class="line">  crxk,</span><br><span class="line">  pftom,</span><br><span class="line">  holy,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>进而我们可以改进一下我们在上节 Interface 里面的 <code>Todo</code> 接口，给它的 <code>user</code> 字段一个更精确的类型注解：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Todo &#123;</span><br><span class="line">  content: <span class="built_in">string</span>;</span><br><span class="line">  user: UserId;</span><br><span class="line">  time: <span class="built_in">string</span>;</span><br><span class="line">  isCompleted: <span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>通过上面的例子我们可以看到，<code>todo</code> 里面的 <code>user</code> 字段应该是五人之一，它有可能是 <code>tuture</code> ，也有可能是 <code>mRcfps</code> ，我们不知道，所以我们写了一个枚举 <code>UserId</code> ，并用它来注解 <code>Todo</code> 的 <code>user</code> 字段。</p><h4 id="数字枚举"><a href="#数字枚举" class="headerlink" title="数字枚举"></a>数字枚举</h4><p>上面我们的 UserId 中几个枚举值其实都对应着相应的数字，比如 <code>UserId.tuture</code> 它的值是数字 <code>0</code> ，<code>UserId.mRcfps</code> 它的值是数字 <code>1</code> ，以此类推，后面的几个枚举值分别是数字 <code>2</code> ，<code>3</code> ，<code>4</code> 。</p><p>当然我们也可以手动给其中某个枚举值赋值一个数字，这样这个枚举值后面的值会依次在这个赋值的数字上递增，我们来看个例子：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">enum</span> UserId &#123;</span><br><span class="line">  tuture,</span><br><span class="line">  mRcfps = <span class="number">6</span>,</span><br><span class="line">  crxk,</span><br><span class="line">  pftom,</span><br><span class="line">  holy,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面我们的每个枚举值对应的数字依次是：<code>0</code> ，<code>6</code> ，<code>7</code> ，<code>8</code> ，<code>9</code></p><h4 id="字符串枚举"><a href="#字符串枚举" class="headerlink" title="字符串枚举"></a>字符串枚举</h4><p>枚举的值除了是数字还可以是一系列字符串，比如：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">enum</span> UserId &#123;</span><br><span class="line">  tuture = <span class="string">'66666666'</span>,</span><br><span class="line">  mRcfps = <span class="string">'23410977'</span>,</span><br><span class="line">  crxk = <span class="string">'25455350'</span>,</span><br><span class="line">  pftom = <span class="string">'23410976'</span>,</span><br><span class="line">  holy = <span class="string">'58352313'</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以看到，我们给每个枚举值赋值了对于的字符串。</p><h4 id="异构枚举"><a href="#异构枚举" class="headerlink" title="异构枚举"></a>异构枚举</h4><p>当然在一个枚举里面既可以有字符串值也可以有数字：</p><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">enum</span> UserId &#123;</span><br><span class="line">  tuture = <span class="string">'66666666'</span>,</span><br><span class="line">  mRcfps = <span class="number">6</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="动手实践-1"><a href="#动手实践-1" class="headerlink" title="动手实践"></a>动手实践</h3><p>了解了 <code>Interface</code> 和 <code>Enum</code> 之后，我们马上运用在我们的项目中来完善我们的待办事项应用。</p><p>随着内容越写越多，我们的 <code>src/App.tsx</code> 越来越复杂，所以我们打算把 <code>TodoInput</code> 组件拆到单独的页面，在 <code>src</code> 目录下新建 <code>TodoInput.tsx</code> ，并在里面编写如下的内容：</p><figure class="highlight ts"><figcaption><span>src/TodoInput.tsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvYzE5YTY4YzE4MWZkOTdmMjg5ZWM1MDQ5MzU1YmNkZmM0OGIzMDU3MC9zcmMvVG9kb0lucHV0LnRzeA==" title="https://github.com/pftom/typescript-tea/blob/c19a68c181fd97f289ec5049355bcdfc48b30570/src/TodoInput.tsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; useState &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Input, Select, DatePicker &#125; <span class="keyword">from</span> <span class="string">'antd'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Moment &#125; <span class="keyword">from</span> <span class="string">'moment'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; userList &#125; <span class="keyword">from</span> <span class="string">'./utils/data'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> &#123; Option &#125; = Select;</span><br><span class="line"></span><br><span class="line"><span class="keyword">enum</span> UserId &#123;</span><br><span class="line">  tuture = <span class="string">'666666666'</span>,</span><br><span class="line">  mRcfps = <span class="string">'23410977'</span>,</span><br><span class="line">  crxk = <span class="string">'25455350'</span>,</span><br><span class="line">  pftom = <span class="string">'23410976'</span>,</span><br><span class="line">  holy = <span class="string">'58352313'</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> TodoValue &#123;</span><br><span class="line">  content?: <span class="built_in">string</span>;</span><br><span class="line">  user?: UserId;</span><br><span class="line">  date?: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> TodoInputProps &#123;</span><br><span class="line">  value?: TodoValue;</span><br><span class="line">  onChange?: <span class="function">(<span class="params">value: TodoValue</span>) =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> TodoInput = <span class="function">(<span class="params">&#123; value = &#123;&#125;, onChange &#125;: TodoInputProps</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> [content, setContent] = useState(<span class="string">''</span>);</span><br><span class="line">  <span class="keyword">const</span> [user, setUser] = useState(UserId.tuture);</span><br><span class="line">  <span class="keyword">const</span> [date, setDate] = useState(<span class="string">''</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> triggerChange = <span class="function">(<span class="params">changedValue: TodoValue</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (onChange) &#123;</span><br><span class="line">      onChange(&#123; content, user, date, ...value, ...changedValue &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> onContentChange = <span class="function">(<span class="params">e: <span class="built_in">any</span></span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (!(<span class="string">'content'</span> <span class="keyword">in</span> value)) &#123;</span><br><span class="line">      setContent(e.target.value);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    triggerChange(&#123; content: e.target.value &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> onUserChange = <span class="function">(<span class="params">selectValue: UserId</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (!(<span class="string">'user'</span> <span class="keyword">in</span> value)) &#123;</span><br><span class="line">      setUser(selectValue);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    triggerChange(&#123; user: selectValue &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> onDateOk = <span class="function">(<span class="params">date: Moment</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (!(<span class="string">'date'</span> <span class="keyword">in</span> value)) &#123;</span><br><span class="line">      setDate(date.format(<span class="string">'YYYY-MM-DD HH:mm'</span>));</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    triggerChange(&#123; date: date.format(<span class="string">'YYYY-MM-DD HH:mm'</span>) &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div className=<span class="string">"todoInput"</span>&gt;</span><br><span class="line">      &lt;Input</span><br><span class="line">        <span class="keyword">type</span>=<span class="string">"text"</span></span><br><span class="line">        placeholder=<span class="string">"输入待办事项内容"</span></span><br><span class="line">        value=&#123;value.content || content&#125;</span><br><span class="line">        onChange=&#123;onContentChange&#125;</span><br><span class="line">      /&gt;</span><br><span class="line">      &lt;Select</span><br><span class="line">        style=&#123;&#123; width: <span class="number">80</span> &#125;&#125;</span><br><span class="line">        size=<span class="string">"small"</span></span><br><span class="line">        defaultValue=&#123;UserId.tuture&#125;</span><br><span class="line">        value=&#123;user&#125;</span><br><span class="line">        onChange=&#123;onUserChange&#125;&gt;</span><br><span class="line">        &#123;userList.map(<span class="function">(<span class="params">user</span>) =&gt;</span> (</span><br><span class="line">          &lt;Option value=&#123;user.id&#125;&gt;&#123;user.name&#125;&lt;<span class="regexp">/Option&gt;</span></span><br><span class="line"><span class="regexp">        ))&#125;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>Select&gt;</span><br><span class="line">      &lt;DatePicker</span><br><span class="line">        showTime</span><br><span class="line">        size=<span class="string">"small"</span></span><br><span class="line">        onOk=&#123;onDateOk&#125;</span><br><span class="line">        style=&#123;&#123; marginLeft: <span class="string">'16px'</span>, marginRight: <span class="string">'16px'</span> &#125;&#125;</span><br><span class="line">      /&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default TodoInput;</span></span><br></pre></td></tr></table></figure><p>可以看到上面的内容，主要有如下几个部分的修改：</p><ul><li>我们定义了新的 <code>Interface</code> ：<code>TodoInputProps</code> ，它主要用来注解 <code>TodoInput</code> 这个函数式组件的 <code>props</code> 类型，可看到这个接口主要有两个字段，一个是 <code>value</code> ，它是 <code>TodoValue</code> 类型，还有一个 <code>onChange</code> ，它是一个函数类型，表示父组件将会传递一个 <code>onChange</code> 函数，我们将在之后讲解 TS 怎么注解函数，。</li><li>接着我们新增了一个枚举 <code>UserId</code> ，用来概括我们应用的五个用户的 ID，并且人为的为这五个枚举常量赋了对应的值。</li><li>接着我们改进了定义了一个新 <code>TodoValue</code> 接口，它有三个字段，主要用于标志 <code>TodoInputProps</code> 中上层组件中可能传递下来的值，所以三个字段都是可选的</li><li>最后我们定义了三个响应 <code>Input</code> 、<code>Select</code> 、<code>DatePicker</code> 的函数，<code>onContentChange</code> ，<code>onUserChange</code> ，<code>onDateOk</code> ，当上层组件没有传递对应的属性时，使用 <code>setXXX</code> 来更新 React 状态，否则触发 <code>triggerChange</code> ，调用父组件传递下来的 <code>onChange</code> 方法来更新对应的状态</li></ul><div class="note info">            <p><strong>提示</strong></p><p>上面我们从 <code>./utils/data</code> 导入了 <code>userList</code> ，以及导入了 <code>Moment</code> 用来注解 <code>moment</code> 类型的 date ，我们将在接下来的来马上来创建对于的 <code>./utils/data</code> 文件以及安装对于的 <code>moment</code> 。</p>          </div><p>在 <code>src/TodoInput.tsx</code> 中我们导入了 <code>Moment</code> 用来注解 <code>onDateOk</code> 的函数参数 <code>date</code> ，接下来我们来安装它：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install moment</span><br></pre></td></tr></table></figure><figure class="highlight json"><figcaption><span>package.json</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvYzE5YTY4YzE4MWZkOTdmMjg5ZWM1MDQ5MzU1YmNkZmM0OGIzMDU3MC9wYWNrYWdlLmpzb24=" title="https://github.com/pftom/typescript-tea/blob/c19a68c181fd97f289ec5049355bcdfc48b30570/package.json">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">    "customize-cra": "^0.9.1",</span><br><span class="line">    "less": "^3.11.1",</span><br><span class="line">    "less-loader": "^5.0.0",</span><br><span class="line">[tuture-add]    "moment": "^2.24.0",</span><br><span class="line">    "react": "^16.13.0",</span><br><span class="line">    "react-app-rewired": "^2.1.5",</span><br><span class="line">    "react-dom": "^16.13.0",</span><br><span class="line">    <span class="comment">// ...</span></span><br></pre></td></tr></table></figure><p>接着我们来创建对应的 <code>src/utils/data.ts</code> 文件，把之前在 <code>src/App.tsx</code> 里面的假数据统一放在这个文件里面，然后导出：</p><figure class="highlight ts"><figcaption><span>src/utils/data.ts</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvYzE5YTY4YzE4MWZkOTdmMjg5ZWM1MDQ5MzU1YmNkZmM0OGIzMDU3MC9zcmMvdXRpbHMvZGF0YS50cw==" title="https://github.com/pftom/typescript-tea/blob/c19a68c181fd97f289ec5049355bcdfc48b30570/src/utils/data.ts">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Todo &#123;</span><br><span class="line">  user: <span class="built_in">string</span>;</span><br><span class="line">  time: <span class="built_in">string</span>;</span><br><span class="line">  content: <span class="built_in">string</span>;</span><br><span class="line">  isCompleted: <span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> User &#123;</span><br><span class="line">  id: <span class="built_in">string</span>;</span><br><span class="line">  name: <span class="built_in">string</span>;</span><br><span class="line">  avatar: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> todoListData: Todo[] = [</span><br><span class="line">  &#123;</span><br><span class="line">    content: <span class="string">'图雀社区：汇聚精彩的免费实战教程'</span>,</span><br><span class="line">    user: <span class="string">'mRcfps'</span>,</span><br><span class="line">    time: <span class="string">'2020年3月2日 19:34'</span>,</span><br><span class="line">    isCompleted: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    content: <span class="string">'图雀社区：汇聚精彩的免费实战教程'</span>,</span><br><span class="line">    user: <span class="string">'pftom'</span>,</span><br><span class="line">    time: <span class="string">'2020年3月2日 19:34'</span>,</span><br><span class="line">    isCompleted: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    content: <span class="string">'图雀社区：汇聚精彩的免费实战教程'</span>,</span><br><span class="line">    user: <span class="string">'Holy'</span>,</span><br><span class="line">    time: <span class="string">'2020年3月2日 19:34'</span>,</span><br><span class="line">    isCompleted: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    content: <span class="string">'图雀社区：汇聚精彩的免费实战教程'</span>,</span><br><span class="line">    user: <span class="string">'crxk'</span>,</span><br><span class="line">    time: <span class="string">'2020年3月2日 19:34'</span>,</span><br><span class="line">    isCompleted: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    content: <span class="string">'图雀社区：汇聚精彩的免费实战教程'</span>,</span><br><span class="line">    user: <span class="string">'Pony'</span>,</span><br><span class="line">    time: <span class="string">'2020年3月2日 19:34'</span>,</span><br><span class="line">    isCompleted: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> userList: User[] = [</span><br><span class="line">  &#123;</span><br><span class="line">    id: <span class="string">'666666666'</span>,</span><br><span class="line">    name: <span class="string">'图雀社区'</span>,</span><br><span class="line">    avatar: <span class="string">'https://avatars0.githubusercontent.com/u/39240800?s=60&amp;v=4'</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    id: <span class="string">'23410977'</span>,</span><br><span class="line">    name: <span class="string">'mRcfps'</span>,</span><br><span class="line">    avatar: <span class="string">'https://avatars0.githubusercontent.com/u/23410977?s=96&amp;v=4'</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    id: <span class="string">'25455350'</span>,</span><br><span class="line">    name: <span class="string">'crxk'</span>,</span><br><span class="line">    avatar: <span class="string">'https://avatars1.githubusercontent.com/u/25455350?s=96&amp;v=4'</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    id: <span class="string">'23410976'</span>,</span><br><span class="line">    name: <span class="string">'pftom'</span>,</span><br><span class="line">    avatar: <span class="string">'https://avatars0.githubusercontent.com/u/23410977?s=96&amp;v=4'</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    id: <span class="string">'58352313'</span>,</span><br><span class="line">    name: <span class="string">'holy'</span>,</span><br><span class="line">    avatar: <span class="string">'https://avatars0.githubusercontent.com/u/58352313?s=96&amp;v=4'</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">];</span><br></pre></td></tr></table></figure><p>拆分了 <code>TodoInput</code> ，并把假数据移动到单独的文件之后，我们需要修改 <code>src/App.tsx</code> 对应的部分如下：</p><figure class="highlight ts"><figcaption><span>src/App.tsx</span><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BmdG9tL3R5cGVzY3JpcHQtdGVhL2Jsb2IvYzE5YTY4YzE4MWZkOTdmMjg5ZWM1MDQ5MzU1YmNkZmM0OGIzMDU3MC9zcmMvQXBwLnRzeA==" title="https://github.com/pftom/typescript-tea/blob/c19a68c181fd97f289ec5049355bcdfc48b30570/src/App.tsx">查看完整代码<i class="fa fa-external-link"></i></span></figcaption><table><tr><td class="code"><pre><span class="line">[tuture-del]<span class="keyword">import</span> React, &#123; useState, useRef &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line">[tuture-add]<span class="keyword">import</span> React, &#123; useRef &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  List,</span><br><span class="line">  Avatar,</span><br><span class="line">  Button,</span><br><span class="line">  Typography,</span><br><span class="line">  Form,</span><br><span class="line">[tuture-del]  Input,</span><br><span class="line">[tuture-del]  Select,</span><br><span class="line">[tuture-del]  DatePicker,</span><br><span class="line">  Menu,</span><br><span class="line">  Dropdown,</span><br><span class="line">  Tabs</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">"antd"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; DownOutlined &#125; <span class="keyword">from</span> <span class="string">"@ant-design/icons"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-add]<span class="keyword">import</span> TodoInput <span class="keyword">from</span> <span class="string">"./TodoInput"</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="keyword">import</span> <span class="string">"./App.css"</span>;</span><br><span class="line"><span class="keyword">import</span> logo <span class="keyword">from</span> <span class="string">"./logo.svg"</span>;</span><br><span class="line"></span><br><span class="line">[tuture-add]<span class="keyword">import</span> &#123; todoListData &#125; <span class="keyword">from</span> <span class="string">"./utils/data"</span>;</span><br><span class="line">[tuture-add]</span><br><span class="line"><span class="keyword">const</span> &#123; Title &#125; = Typography;</span><br><span class="line">[tuture-del]<span class="keyword">const</span> &#123; Option &#125; = Select;</span><br><span class="line"><span class="keyword">const</span> &#123; TabPane &#125; = Tabs;</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">interface</span> Todo &#123;</span><br><span class="line">[tuture-del]  user: <span class="built_in">string</span>;</span><br><span class="line">[tuture-del]  time: <span class="built_in">string</span>;</span><br><span class="line">[tuture-del]  content: <span class="built_in">string</span>;</span><br><span class="line">[tuture-del]  isCompleted: <span class="built_in">boolean</span>;</span><br><span class="line">[tuture-del]&#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]<span class="keyword">interface</span> User &#123;</span><br><span class="line">[tuture-del]  id: <span class="built_in">string</span>;</span><br><span class="line">[tuture-del]  name: <span class="built_in">string</span>;</span><br><span class="line">[tuture-del]  avatar: <span class="built_in">string</span>;</span><br><span class="line">[tuture-del]&#125;</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]<span class="keyword">const</span> todoListData: Todo[] = [</span><br><span class="line">[tuture-del]  &#123;</span><br><span class="line">[tuture-del]    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-del]    user: <span class="string">"mRcfps"</span>,</span><br><span class="line">[tuture-del]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-del]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-del]  &#125;,</span><br><span class="line">[tuture-del]  &#123;</span><br><span class="line">[tuture-del]    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-del]    user: <span class="string">"pftom"</span>,</span><br><span class="line">[tuture-del]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-del]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-del]  &#125;,</span><br><span class="line">[tuture-del]  &#123;</span><br><span class="line">[tuture-del]    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-del]    user: <span class="string">"Holy"</span>,</span><br><span class="line">[tuture-del]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-del]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-del]  &#125;,</span><br><span class="line">[tuture-del]  &#123;</span><br><span class="line">[tuture-del]    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-del]    user: <span class="string">"crxk"</span>,</span><br><span class="line">[tuture-del]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-del]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-del]  &#125;,</span><br><span class="line">[tuture-del]  &#123;</span><br><span class="line">[tuture-del]    content: <span class="string">"图雀社区：汇聚精彩的免费实战教程"</span>,</span><br><span class="line">[tuture-del]    user: <span class="string">"Pony"</span>,</span><br><span class="line">[tuture-del]    time: <span class="string">"2020年3月2日 19:34"</span>,</span><br><span class="line">[tuture-del]    isCompleted: <span class="literal">false</span></span><br><span class="line">[tuture-del]  &#125;</span><br><span class="line">[tuture-del]];</span><br><span class="line">[tuture-del]</span><br><span class="line">[tuture-del]<span class="keyword">const</span> userList: User[] = [</span><br><span class="line">[tuture-del]  &#123;</span><br><span class="line">[tuture-del]    id: <span class="string">"666666666"</span>,</span><br><span class="line">[tuture-del]    name: <span class="string">"图雀社区"</span>,</span><br><span class="line">[tuture-del]    avatar: <span class="string">"https://avatars0.githubusercontent.com/u/39240800?s=60&amp;v=4"</span></span><br><span class="line">[tuture-del]  &#125;,</span><br><span class="line">[tuture-del]  &#123;</span><br><span class="line">[tuture-del]    id: <span class="string">"23410977"</span>,</span><br><span class="line">[tuture-del]    name: <span class="string">"mRcfps"</span>,</span><br><span class="line">[tuture-del]    avatar: <span class="string">"https://avatars0.githubusercontent.com/u/23410977?s=96&amp;v=4"</span></span><br><span class="line">[tuture-del]  &#125;,</span><br><span class="line">[tuture-del]  &#123;</span><br><span class="line">[tuture-del]    id: <span class="string">"25455350"</span>,</span><br><span class="line">[tuture-del]    name: <span class="string">"crxk"</span>,</span><br><span class="line">[tuture-del]    avatar: <span class="string">"https://avatars1.githubusercontent.com/u/25455350?s=96&amp;v=4"</span></span><br><span class="line">[tuture-del]  &#125;,</span><br><span class="line">[tuture-del]  &#123;</span><br><span class="line">[tuture-del]    id: <span class="string">"23410977"</span>,</span><br><span class="line">[tuture-del]    name: <span class="string">"pftom"</span>,</span><br><span class="line">[tuture-del]    avatar: <span class="string">"https://avatars0.githubusercontent.com/u/23410977?s=96&amp;v=4"</span></span><br><span class="line">[tuture-del]  &#125;,</span><br><span class="line">[tuture-del]  &#123;</span><br><span class="line">[tuture-del]    id: <span class="string">"58352313"</span>,</span><br><span class="line">[tuture-del]    name: <span class="string">"holy"</span>,</span><br><span class="line">[tuture-del]    avatar: <span class="string">"https://avatars0.githubusercontent.com/u/58352313?s=96&amp;v=4"</span></span><br><span class="line">[tuture-del]  &#125;</span><br><span class="line">[tuture-del]];</span><br><span class="line">[tuture-del]</span><br><span class="line"><span class="keyword">const</span> menu = (</span><br><span class="line">  &lt;Menu&gt;</span><br><span class="line">    &lt;Menu.Item&gt;完成&lt;<span class="regexp">/Menu.Item&gt;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ ...</span></span><br><span class="line"><span class="regexp">  &lt;/</span>Menu&gt;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line">[tuture-del]<span class="keyword">const</span> TodoInput = <span class="function">(<span class="params">&#123; value = &#123;&#125; &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">[tuture-del]  <span class="keyword">return</span> (</span><br><span class="line">[tuture-del]    &lt;div className=<span class="string">"todoInput"</span>&gt;</span><br><span class="line">[tuture-del]      &lt;Input <span class="keyword">type</span>=<span class="string">"text"</span> placeholder=<span class="string">"输入待办事项内容"</span> /&gt;</span><br><span class="line">[tuture-del]      &lt;Select style=&#123;&#123; width: <span class="number">80</span> &#125;&#125; size=<span class="string">"small"</span> defaultValue=<span class="string">"666666666"</span>&gt;</span><br><span class="line">[tuture-del]        &#123;userList.map(<span class="function"><span class="params">user</span> =&gt;</span> (</span><br><span class="line">[tuture-del]          &lt;Option value=&#123;user.id&#125;&gt;&#123;user.name&#125;&lt;<span class="regexp">/Option&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]        ))&#125;</span></span><br><span class="line"><span class="regexp">[tuture-del]      &lt;/</span>Select&gt;</span><br><span class="line">[tuture-del]      &lt;DatePicker</span><br><span class="line">[tuture-del]        size=<span class="string">"small"</span></span><br><span class="line">[tuture-del]        style=&#123;&#123; marginLeft: <span class="string">"16px"</span>, marginRight: <span class="string">"16px"</span> &#125;&#125;</span><br><span class="line">[tuture-del]      /&gt;</span><br><span class="line">[tuture-del]    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">[tuture-del]  );</span></span><br><span class="line"><span class="regexp">[tuture-del]&#125;;</span></span><br><span class="line"><span class="regexp">[tuture-del]</span></span><br><span class="line"><span class="regexp">function TodoList() &#123;</span></span><br><span class="line"><span class="regexp">  return (</span></span><br><span class="line"><span class="regexp">    &lt;List</span></span><br><span class="line"><span class="regexp">      /</span><span class="regexp">/ ...</span></span><br><span class="line"><span class="regexp">function App() &#123;</span></span><br><span class="line"><span class="regexp">  const callback = () =&gt; &#123;&#125;;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">[tuture-del]  const onFinish = () =&gt; &#123;&#125;;</span></span><br><span class="line"><span class="regexp">[tuture-add]  const onFinish = (values: any) =&gt; &#123;</span></span><br><span class="line"><span class="regexp">[tuture-add]    console.log("Received values from form: ", values);</span></span><br><span class="line"><span class="regexp">[tuture-add]  &#125;;</span></span><br><span class="line"><span class="regexp">  const ref = useRef(null);</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">  return (</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ ...</span></span><br><span class="line"><span class="regexp">          &lt;Form.Item name="todo"&gt;</span></span><br><span class="line"><span class="regexp">            &lt;TodoInput /</span>&gt;</span><br><span class="line">          &lt;<span class="regexp">/Form.Item&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]          &lt;Form.Item&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]            &lt;Button type="primary" htmlType="submit"&gt;</span></span><br><span class="line"><span class="regexp">[tuture-add]              提交</span></span><br><span class="line"><span class="regexp">[tuture-add]            &lt;/</span>Button&gt;</span><br><span class="line">[tuture-add]          &lt;<span class="regexp">/Form.Item&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>Form&gt;</span><br><span class="line">      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">      &lt;div className="container"&gt;</span></span><br><span class="line"><span class="regexp">        /</span><span class="regexp">/ ...</span></span><br></pre></td></tr></table></figure><p>可以看到，上面的内容主要做出了如下的修改：</p><ul><li>我们删除了对应的假数据 <code>userList</code> 和 <code>todoListData</code> 及其 Interface 定义 <code>Todo</code> 和 <code>User</code> ，转而从我们创建的 <code>src/utils/data.ts</code> 里面导入 <code>todoListData</code></li><li>接着我们删除了 <code>TodoInput</code> 组件，转而导入我们之前创建的 <code>TodoInput</code> 组件</li><li>接着我们给 <code>Form</code> 表单部分加上了一个提交按钮，以及扩展了 <code>onFinish</code> 函数</li><li>最后我们删除了一些不再需要的导包</li></ul><h3 id="小结-2"><a href="#小结-2" class="headerlink" title="小结"></a>小结</h3><p>大功告成，这一节中我们学习了接口（Interface）和枚举（Enum），接口主要是对对象等多属性元素进行类型注解，而枚举是 TS 中独有的一个概念，在 JS 中没有，主要用于帮助定义一系列命名常量，常用于给一类变量做类型注解，它们的值是一组值里面的某一个，最后我们通过改进现有的 Todo 应用来实践了学到的这两个概念。</p><blockquote><p>本文所涉及的源代码都放在了 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdHlwZXNjcmlwdC10ZWE=" title="https://github.com/tuture-dev/typescript-tea">Github<i class="fa fa-external-link"></i></span>  或者 <span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vdHV0dXJlL3R5cGVzY3JpcHQtdGVh" title="https://gitee.com/tuture/typescript-tea">Gitee<i class="fa fa-external-link"></i></span> 上，如果您觉得我们写得还不错，希望您能给<strong>❤️ 这篇文章点赞+</strong><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3R1dHVyZS1kZXYvdHlwZXNjcmlwdC10ZWE=" title="https://github.com/tuture-dev/typescript-tea"><strong>Github</strong><i class="fa fa-external-link"></i></span>** 或 <strong>[</strong>Gitee<strong>](<span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vdHV0dXJlL3R5cGVzY3JpcHQtdGVh" title="https://gitee.com/tuture/typescript-tea">https://gitee.com/tuture/typescript-tea<i class="fa fa-external-link"></i></span>)</strong> 仓库加星 ❤**️ 哦~</p></blockquote><p><img alt data-src="https://user-gold-cdn.xitu.io/2019/12/19/16f1ddb37a4d47a8?w=900&h=500&f=png&s=138401"></p>]]></content>
    
    <summary type="html">
    
      JavaScript 已经占领了世界上的每一个角落，能访问网页的地方，基本上就有 JavaScript 在运作，然而 JavaScript 因为其动态、弱类型、解释型语言的特性、出错的调用栈隐蔽，使得开发者不仅在调试错误上花费大把时间，在团队协作开发时理解队友编写代码也极其困难。TypeScript 的出现极大的解决了上面的问题，TypeScript -- 一个 JavaScript 的超集，它作为一门编译型语言，提供了对类型系统和最新 ES 语法的支持，使得我们可以在享受使用 ES 最新语法的编写代码的同时，还能在写代码的过程中就规避很多潜在的语法、语义错误；并且其提供的类型系统使得我们可以在团队协作编写代码时可以很容易的了解队友代码的含义：输入和输出，大大提高了团队协作编写大型业务应用的效率。在现代 JavaScript 世界中，已经有很多大型库在使用 TypeScript 重构，包括前端三大框架：React、Vue、Angular，还有知名的组件库 antd，material，在很多公司内部的大型业务应用也在用 TypeScript 开发甚至重写现有的应用，所以如果你想编写大型业务应用或库，或者想写出更利于团队协作的代码，那么 TypeScript 有十足的理由值得你学习！本文是 TypeScript 系列教程的第一篇，主要通过使用 antd 组件库实战演练一个 TypeScript 版本 React TodoList 应用来讲解 TypeScript 的语法，使得你能在学会语法的同时还能完成一个实际可运行的项目。
    
    </summary>
    
    
    
      <category term="React" scheme="https://tuture.co/tags/React/"/>
    
      <category term="TypeScript" scheme="https://tuture.co/tags/TypeScript/"/>
    
  </entry>
  
</feed>