N fix

Author: stacklens

md/260-资料更新与异步.md

@@ -2,9 +2,9 @@
 
 ## 组件化
 
-前面做搜索功能时，为了美观我们定义过按钮的样式了。正巧用户更新也需要按钮，为了避免样式相互冲突，先做点准备工作：把搜索框组件化。
+前面做搜索功能时，为了美观我们定义了按钮的样式。正巧用户更新也需要按钮，为了避免样式相互冲突，先做点准备工作：**把搜索框组件化**。
 
-组件化的方法前面已经讲过了，再来走一遍加深印象。
+> 组件化的方法前面已经讲过了，再来一遍加深印象。
 
 新建一个 `SearchButton.vue` 文件，把 `BlogHeader.vue` 中与搜索相关的内容全部搬运过来：
 
@@ -49,7 +49,7 @@
 </style>
 ```
 
-注意这里的搬运是有些小改动的，比如导入导出包的名字，不改就乱套了。
+注意这里的搬运是有些小改动的，比如组件导出的名字，不改就乱套了。
 
 接着把 `BlogHeader.vue` 对应搜索的部分删掉（特别是样式）：
 
@@ -82,7 +82,7 @@
                 // searchText 变量删除
             }
         },
-        // methods 删除掉了
+        // methods 删除掉
         mounted() {...}
         }
     }
@@ -94,7 +94,7 @@
 </style>
 ```
 
-同样也记得把用不到的导入导出包、组件、名称都修改正确。
+同样也记得把用不到的库、组件、名称都修改正确。
 
 完成后刷新页面，确保功能正常就 OK。
 
@@ -103,7 +103,7 @@
 用户资料的更改、删除最好有个单独的页面，这就带来两个很头疼的问题：
 
 - 用户资料页面涉及 POST/PATCH 等操作，毫无疑问需要验证用户的身份和 token 有效性；巧的是前面写的 `BlogHeader.vue` 也有类似的需求。因此需要将**验证代码**重构为一个单独的函数，供大家调用。
-- 把**验证代码**抽象为单独的函数后，好死不死 `axios` 发送的请求是异步的，所以要将此处的异步代码转换为同步代码，否则 localStorage 的存取顺序会因为网速的快慢而不可预测，带来潜在 bug。
+- 把**验证代码**抽象为单独的函数后，由于 `axios` 发送的请求是异步的，所以要将此处的异步代码转换为同步代码，否则 localStorage 的存取顺序会因为网速的快慢而不可预测，带来潜在 bug。
 
 综合上述两条，让我们先来处理这最麻烦的部分。
 
@@ -169,10 +169,10 @@ export default authorization;
 
 看起来和之前写的验证代码很像，但是有两个非常重要的区别：
 
-- 用 `async/await` ： `async` 表示函数里含有异步操作，`await` 表示紧跟在后面的表达式需要等待结果。`await` 关键字只能用在 `async` 函数中，并且由于它返回的 `Promise` 对象运行的结果可能是 `rejected` ，所以最好放到 `try...catch` 语句中。
-- `async` 函数返回的不再是 `return` 后面的数据，而是 `Promise` 对象，因此调用它的位置需要改为 `Promise.then().catch()` 进行异常处理。（有点像 `axios.then().catch()`)
+- `async/await` ： `async` 表示函数里含有异步操作，`await` 表示紧跟在后面的表达式需要等待结果。`await` 关键字只能用在 `async` 函数中，并且由于它返回的 `Promise` 对象运行的结果可能是 `rejected` ，所以最好放到 `try...catch` 语句中。
+- `async` 函数返回的不再是 `return` 后面的数据，而是包含数据的 `Promise` 对象，因此调用它的位置需要改为 `Promise.then().catch()` 进行异常处理。（有点像 `axios.then().catch()`)
 
-> Promise 对新手来说稍麻烦，篇幅有限不会展开讲原理，请善用搜索。
+> Promise 对新手来说稍麻烦，篇幅有限不展开讲原理，请善用搜索。
 
 ## 用户中心
 
@@ -247,7 +247,7 @@ export default authorization;
                             alert('Password too short.');
                             return
                         }
-                        // 旧 username 用于向接口发送请求
+                        // 旧的 username 用于向接口发送请求
                         const oldName = storage.getItem('username.myblog');
                         // 获取已填写的表单数据
                         let data = {};
@@ -303,12 +303,12 @@ export default authorization;
 </style>
 ```
 
-核心就是脚本里的 `authorization()` 函数，这就是我们刚封装的验证函数嘛！在它的 `.then()` 里，只干了下面这两件事情：
+核心就是脚本里的 `authorization()` 函数，这就是我们刚封装的验证函数嘛。在它的 `.then()` 里，干了下面这两件事情：
 
 - 检查函数返回的数据，如果登录失效，或者密码太短，则拒绝执行后面的逻辑。
 - 拿到用户填写的表单数据，并取出保存在本地的令牌，发送到后端接口更新用户数据。
 
-模板和样式都没什么新内容，读者捎带看一下就可以。
+模板和样式都没有新内容，读者捎带看一下就可以。
 
 ## 收尾工作
 
@@ -317,6 +317,8 @@ export default authorization;
 修改 `BlogHeader.vue` 的代码：
 
 ```html
+<!-- frontend/src/components/BlogHeader.vue -->
+
 <template>
     <div id="header">
         ...
@@ -368,13 +370,11 @@ export default authorization;
         height: 16px;
         border-radius: 5px;
     }
-
     /* 容器 <div> - 需要定位下拉内容 */
     .dropdown {
         position: relative;
         display: inline-block;
     }
-
     /* 下拉内容 (默认隐藏) */
     .dropdown-content {
         display: none;
@@ -384,25 +384,21 @@ export default authorization;
         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
         text-align: center;
     }
-
     /* 下拉菜单的链接 */
     .dropdown-content a {
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
     }
-
     /* 鼠标移上去后修改下拉菜单链接颜色 */
     .dropdown-content a:hover {
         background-color: #f1f1f1
     }
-
     /* 在鼠标移上去后显示下拉菜单 */
     .dropdown:hover .dropdown-content {
         display: block;
     }
-
     /* 当下拉内容显示后修改下拉按钮的背景颜色 */
     .dropdown:hover .dropbtn {
         background-color: darkslateblue;
@@ -415,7 +411,7 @@ export default authorization;
 </style>
 ```
 
-- 将验证代码全部删除，变为调用 `authorization()` 函数。
+- 将之前写的验证代码全部删除，变为调用 `authorization()` 函数。
 - 将欢迎词替换为下拉框，选项里包含用户中心的入口。
 
 最后把路由注册到 `index.js`：