N fix

Author: stacklens

md/220-翻页与监听.md

@@ -1,4 +1,4 @@
-上一章的详情页面跳转，用到了 vue-router 动态匹配路由的能力。而翻页功能通常不会直接改变当前路由，而是修改查询参数来实现。它两的区别如下：
+上一章的详情页面跳转，用到了 vue-router 动态匹配路由的能力。而翻页功能通常不会直接改变当前路由，而是修改 url 中的查询参数来实现。它两的区别如下：
 
 ```python
 # 改变路由
@@ -167,8 +167,8 @@ get_page_param: function (direction) {
 ```
 
 - `try` 是为了避免潜在的取值问题（比如网速缓慢时 `info` 还未获取到数据）；一般来说 `catch` 语句应该含有对应报错的措施，教程就略过了。
-- `switch` 同样是用来控制查询方向，有点点不同的是它默认查询了当前的页码，用于显示。
-- 根据查询方向，构建 `URL` 对象并获取到其中的页码参数。
+- `switch` 同样是用来控制翻页方向，有点点不同的是它默认查询了当前的页码，用于显示。
+- 根据翻页方向，构建 `URL` 对象并获取到其中的页码参数。
 
 ```javascript
 // 获取文章列表数据
@@ -199,7 +199,7 @@ watch: {
 
 这个 `watch` 就非常重要了，划重点。它的作用是监听 Vue 管理的数据，一旦发生变化就执行对应的方法。比如这里，我们已经知晓 `this.$route` 是 Vue 的路由对象了，因此将其注册到 `watch` 中，每当其变化（也就是 url 中的页码参数 `?page` 变化了）则立即根据当前页码更新对应的文章数据。
 
-你可能会问，既然首页的文章数据是在**页面初始化**时通过 `mounted()` 加载的，那为什么翻页后的数据不在这里更新？很遗憾这是不行的。因为参数变化在 vue-router 看来不算是真正的**路径变化**，因此不会触发 `mounted()` 这类生命周期钩子。
+你可能会问，既然首页的文章数据是在**页面初始化**时通过 `mounted()` 加载的，那为什么翻页后的数据不在 `mounted()`  中更新？很遗憾这是不行的。因为参数变化在 vue-router 看来不算是真正的**路径变化**，因此不会触发 `mounted()` 这类生命周期钩子。
 
 > 关于 watch 更多内容请见[文档](https://v3.vuejs.org/guide/computed.html#watchers)。
 

md/230-搜索文章.md

@@ -46,7 +46,7 @@
         padding-top: 22px;
     }
 
-    /* 来源：https://blog.csdn.net/qq_39198420/article/details/77973339*/
+    /* css 来源：https://blog.csdn.net/qq_39198420/article/details/77973339*/
     * {
         box-sizing: border-box;
     }
@@ -147,17 +147,17 @@
 ```
 
 - `v-model` 指令可以在表单控件上创建**双向数据绑定**。具体来说，就是上面的 `<input>` 中的数据和 Vue 管理的 `searchText` 数据绑定在一起了，其中一个发生变化，另一个也会改变。
-- `v-on:click` 绑定了按钮的**鼠标点击事件**，即点击则触发 `searchArticles()` 方法。`.prevent` 用于阻止按钮原本的提交功能。
+- `v-on:click` 绑定了按钮的**鼠标点击事件**，即点击则触发 `searchArticles()` 方法。`.prevent` 用于阻止按钮原本的表单提交功能。
 
 前面章节我们用 `<router-link>` 标签实现了路由跳转。在必要时候路由跳转也可以通过脚本来**动态实现**，也就是上面代码的 `this.$router.push(...)` 了。注意 `this.$route` 和 `this.$router` ，前者代表路径对象，后者代表路由器对象。
 
 总之，点击按钮触发 `searchArticles()` ，然后此方法将 `searchText` 作为参数跳转到新的路径。
 
 ## 正餐
 
-页面跳转实现了，但是跳转之后还不能够根据路径的中 `search` 参数展示筛选后的数据。因此要**换个战场**，在 `ArticleList.vue` 里进行修改（主要是 Javascript 部分）。
+页面跳转实现了，但是因为前面章节把 `get_article_data()` 方法中的 url 写死为 `'/api/article'` 了，所以跳转之后还不能够根据路径的中 `search` 参数展示筛选后的数据。因此要**换个战场**，在 `ArticleList.vue` 里进行修改（主要是 Javascript 部分）。
 
-旧的翻页 `<router-link>` 仅考虑了路径参数中的 `page` 值。为了取得包括 `page` 和 `search` 的正确路径，新写一个方法 `get_path()`：
+旧的翻页 `<router-link>` 仅考虑了路径参数中的 `page` 值。为了在翻页后取得包括 `page` 和 `search` 的正确路径，新写一个方法 `get_path()`：
 
 ```html
 <!--  frontend/src/components/ArticleList.vue  -->
@@ -246,9 +246,9 @@
 ...
 ```
 
-这里的代码抛弃了之前用的**字符串拼接**的方式，改为专门用户处理路径参数的 `URLSearchParams()` 对象。为了将路径中已有的参数添加到 `URLSearchParams()` 中，可以用其本身的 `append()` 方法，但此方法不能**判断值是否存在**，从而获得类似 `http://localhost:8080/?page=undefined` 这种错误的路径。
+这里的代码抛弃了之前用的**字符串拼接**的方式，改为专门用于处理路径参数的 `URLSearchParams()` 对象。为了将路径中已有的参数添加到 `URLSearchParams()` 中，可以用其本身的 `append()` 方法，但此方法不能**判断值是否存在**，从而获得类似 `http://localhost:8080/?page=undefined` 这种错误的路径。
 
-解决方法可以在 `methods` 里写一个 `appendIfExists()` 方法，调用它来排除错误路径。还有一种方法是由于 JavaScript 是基于**原型链**的语言，因此可以通过原型链将此方法添加到任何对象中，以扩展此对象的功能。
+解决方法可以在 `methods` 里写一个 `appendIfExists()` 方法，调用它来排除错误路径。还有一种方法是由于 JavaScript 是基于**原型链**的语言，因此可以通过原型链将此方法添加到已有对象中（包括内置原生对象），以扩展此对象的功能。
 
 具体实施方法就是在 `main.js` 中写入：
 
@@ -266,11 +266,11 @@ URLSearchParams.prototype.appendIfExists = function (key, value) {
 createApp(App)...;
 ```
 
-如此一来，`URLSearchParams` 对象就有了这个 `appendIfExists()` 了。
+因为 `main.js` 在 Vue 初始化时必然会执行，如此一来`URLSearchParams` 对象就有了这个 `appendIfExists()` 了。
 
-> **警告**：以上示例仅供参考。请谨慎扩展原生类型，尤其是如果你的代码将被其他人使用，这可能导致意外的代码行为。建议在扩展方法的名称前加上一些标识符，以便潜在用户可以区分你的代码和原生的方法。
+> **警告**：以上示例仅供参考。请谨慎扩展原生类型，尤其是如果你的代码将被其他人使用，这可能导致意外的代码行为。建议在扩展方法的名称前加上一些标识符，以便潜在用户可以区分你注入的方法和原生的方法。
 >
-> 关于继承、原型链的解释，详见[这里](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)。关于 URLSearchParams，详见[这里](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)。
+> 关于继承、原型链的解释，详见[原型链](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)。关于 URLSearchParams，详见[URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)。
 
 把这些脚本写好后，就可以修改路由的**模板**了：