N fix

Author: stacklens

md/200-文章列表.md

@@ -185,23 +185,25 @@ Vue 采用组件化的思想，把同一个组件的内容打包到一起。比
 
 ### script
 
-当一个 Vue 实例被创建时，它将 `data` 对象中的所有属性加入到 Vue 的**响应式系统**中。更神奇的是，当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
+当一个 Vue 实例被创建时，它将 `data` 对象返回的所有属性加入到 Vue 的**响应式系统**中。更神奇的是，当这些属性的值发生改变时，视图将会产生“响应”，即自动更新为新的值。
 
 比方说上面代码的 `data` 中的 `info` 属性在初始化时赋值了一个空字符串。当 Vue 加载完成后调用了生命周期的钩子 `mounted()` 方法，通过 `axios` 向 Django 后端获取到文章列表数据并赋值给 `info` 后，页面中关联的部分也会立即随之更新，而不用你手动去操作页面元素，这就是响应式的好处。
 
+> Axios 自动将请求得到的 Json 数据转换为 JavaScript 对象，所以你可以直接调用接口里的数据了。
+>
 > 如果写好上述代码，访问 `http://localhost:8080/` 看不到任何内容，请检查后端服务器是否已启动，并查看浏览器控制台确保没有跨域相关的报错。
 
 ### template
 
-如果你之前学过 Django 内置的模板语法，那么 Vue 的模板语法就不难理解。元素块中以 `v` 打头的属性即是 Vue 的模板语法标记。 `v-for` 即循环可迭代元素（`info.results` 对应后端数据的 json 结构。请对照后端接口进行理解。），`v-bind:key` 给定了循环中每个元素的主键。
+如果你之前学过 Django 内置的模板语法，那么 Vue 的模板语法就不难理解。元素块中以 `v` 打头的属性即是 Vue 的模板语法标记。 `v-for` 即循环可迭代元素（`info.results` 对应后端数据的 json 结构。请对照后端接口进行理解。），`v-bind:key` 给定了循环中每个元素的主键，作用是方便 Vue 渲染时对元素进行识别。
 
-注意，很巧的是 Vue 同样也用双花括号`{{ }}` 定义它所持有的数据对象。所以这里的双花括号和 Django 模板语法没有任何关系，千万别搞混了。
+注意，很巧的是 Vue 默认同样也用双花括号`{{ }}` 定义它所持有的数据对象。所以这里的双花括号和 Django 模板语法没有任何关系，千万别搞混了。
 
 ### style
 
 这部分纯粹就是 `css` 了，也就是规定了页面各元素的大小、位置、颜色等样式，比较基础就不展开讲了。
 
-顺利的话（别忘了前后端服务器都要启动），现在你的页面应该时这样子：
+顺利的话（别忘了前后端服务器都要启动），现在你的页面应该时这样子：（通过后台添加一些测试文章）
 
 ![](https://blog.dusaiphoto.com/p200-1.png)
 
@@ -268,7 +270,9 @@ Vue 采用组件化的思想，把同一个组件的内容打包到一起。比
 
 标签 `tag` 和文章标题类似，用 `v-for` 循环取值即可。
 
-创建时间 `article.created` 由于需要格式化，则用到点新东西：方法（即methods，注意看 `scripts` 中对其的定义）。方法名为 `formatted_time()` ，功能很简单，即把 iso 日期转换为人类容易理解的日期显示形式。
+创建时间时 `article.created` 由于需要格式化，则用到点新东西：方法（即methods，注意看 `scripts` 中对其的定义）。方法名为 `formatted_time()` ，功能很简单，即把 iso 日期转换为人类容易理解的日期显示形式。
+
+方法 `methods` 既可以在脚本中直接调用，也可以在模板中通过标签属性或者花括号调用，非常方便。
 
 刷新页面，可以看到标签和日期都成功显示出来了。
 
@@ -326,17 +330,17 @@ Vue 采用组件化的思想，把同一个组件的内容打包到一起。比
 </style>
 ```
 
-这里基本没有新内容，唯一需要注意的就是样式中的 `#app` ，它是由 Vue 自动挂载的，因此覆盖了整个页面的元素。
+没有新知识，唯一需要注意的就是样式中的 `#app` ，它是由 Vue 自动挂载的，因此覆盖了整个页面的元素。
 
 现在你的博客页面是这样子的：
 
 ![](https://blog.dusaiphoto.com/p200-2.png)
 
-是不是有点简洁类型博客的意思了？
+是不是有点博文列表的意思了？
 
 ## 组件化
 
-组件化是 Vue 的核心思想之一。组件可以把网页分解成一个个的小功能，达到解耦合及复用。
+组件化是 Vue 的核心思想之一。组件可以把网页分解成一个个的小功能，达到代码解耦及复用。
 
 在 `frontend/src/components/` 路径下分别创建 `ArticleList.vue` / `BlogHeader.vue` / `BlogFooter.vue` 三个文件，并且把我们之前在 `App.vue` 中写的代码分别搬运到对应的位置。
 
@@ -511,4 +515,4 @@ BlogFooter.vue：
 </style>
 ```
 
-刷新页面，内容与修改之前相同，但代码变得更加规整和清爽了。
+刷新页面，功能虽然与修改前完全相同，但代码变得更加规整和清爽了。

md/210-文章详情.md

@@ -1,6 +1,6 @@
 上一章做好了文章列表，紧接着就是实现**文章详情页面**了。
 
-从列表到详情，毫无疑问首当其冲的问题就是页面如何跳转。
+从列表到详情，首当其冲的问题就是页面如何跳转。
 
 传统模式的跳转是由 Django 后端分配路由。不过本教程既然采用了前后端分离的模式，那就打算抛弃后端路由，采用**前端路由**的方式来实现页面跳转。
 
@@ -17,7 +17,7 @@
 added 1 package in 9.143s
 ```
 
-笔者这里安装到的 4.0.2 版本。
+> 笔者这里安装到的 4.0.2 版本。
 
 因为 vue-router 会用到文章的 id 作为动态地址，所以对 **Django 后端**做一点小更改：
 
@@ -48,11 +48,11 @@ import router from './router'
 createApp(App).use(router).mount('#app');
 ```
 
-和 **Vue 2** 不同的是，挂载实例时 **Vue 3** 采用函数式的写法，变得更加美观了。
+> 和 **Vue 2** 不同的是，挂载路由实例时 **Vue 3** 采用函数式的写法，变得更加美观了。
 
 由于后续页面会越来越多，为了避免 `App.vue` 越发臃肿，因此必须优化文件结构。
 
-新建 `frontend/src/views/` 目录用来存放现在及将来所有的页面文件。在此目录新建 `Home.vue` 文件，把之前的首页代码稍加修改搬运过来：
+新建 `frontend/src/views/` 目录，用来存放现在及将来所有的页面文件。在此目录新建 `Home.vue` 文件，把之前的首页代码稍加修改搬运过来：
 
 ```html
 <!--  frontend/src/views/Home.vue  -->
@@ -127,7 +127,7 @@ createApp(App).use(router).mount('#app');
 </style>
 ```
 
-`App.vue` 文件中大部分内容都搬走了，只剩一个新增的 `<router-view>` 标签，它就是各路径所代表的页面的实际渲染位置。
+`App.vue` 文件中大部分内容都搬走了，只剩一个新增的 `<router-view>` 标签，它就是各路径所代表的页面的实际渲染位置。比如你现在在 Home 页面，那么 `<router-view>` 则渲染的是 Home 中的内容。
 
 > 一套组合拳，App.vue 看起来干净多了。
 
@@ -161,7 +161,7 @@ const router = createRouter({
 export default router;
 ```
 
-- 列表 `routes` 定义了所有需要挂载到路由中的路径，成员为**路径 url** 、路径名和**路径的 vue 对象**。详情页面的动态路由采用冒号 `:id` 的形式来定义。
+- 列表 `routes` 定义了所有需要挂载到路由中的路径，成员为**路径 url** 、**路径名**和**路径的 vue 对象**。详情页面的动态路由采用冒号 `:id` 的形式来定义。
 - 接着就用 `createRouter()` 创建 router。参数里的 `history` 定义具体的路由形式，`createWebHashHistory()` 为哈希模式（具体路径在 # 符号后面）；`createWebHistory()` 为 HTML5 模式（路径中没有丑陋的 # 符号），此为**推荐模式**，但是**部署时需要额外的配置**。
 
 > 各模式的详细介绍看[文档](https://next.router.vuejs.org/guide/essentials/history-mode.html)。
@@ -196,6 +196,8 @@ export default router;
 
 `:to` 属性指定了跳转位置，注意看**动态参数 id** 是如何传递的。
 
+在 Vue 中，属性前面的冒号 `:` 表示此属性被”绑定“了。”绑定“的对象可以是某个动态的参数（比如这里的 id 值），也可以是 Vue 所管理的 data，也可以是 methods。总之，看到冒号就要明白这个属性后面跟着个变量或者表达式，没有冒号就是普通的字符串。冒号 `:` 实际上是 `v-bind:` 的缩写。
+
 > 有一个小问题是由于 router 内部机制，之前给 `class="article-title"` 写的 padding 样式会失效。解决方式是将其包裹在一个 div 元素中，在此 div 上重新定义 padding。想了解做法的见 Github 仓库中的源码。
 
 Router 骨架就搭建完毕了。此时点击首页的文章标题链接后，应该就顺利跳转到一个只有页眉页脚的详情页面了。
@@ -302,7 +304,7 @@ Router 骨架就搭建完毕了。此时点击首页的文章标题链接后，
 先看**模板**部分：
 
 - 在渲染文章前，逻辑控制语句 `v-if` 先确认数据是否存在，避免出现**潜在的**调用数据不存在的 bug。
-- 由于 `body_html` 、`toc_html` 都是后端渲染好的 markdown 文本，需要将其渲染为 HTML ，所以需要用 `v-html` 标注。
+- 由于 `body_html` 、`toc_html` 都是后端渲染好的 markdown 文本，需要将其直接转换为 HTML ，所以需要用 `v-html` 标注。
 
 再看脚本：
 
@@ -321,6 +323,6 @@ Router 骨架就搭建完毕了。此时点击首页的文章标题链接后，
 
 用很少的、漂亮的代码完成了看起来还不错的详情页，并且摆脱了手动操作 DOM 的繁琐。
 
-不知客观您的感受如何呢。
+感受如何呢。
 
 > Django 的 Markdown 渲染只负责把文章转换为 HTML 文本。如果你仍然觉得其排版简陋，那就需要自己定义对应的 CSS 样式，调整为自己喜欢的外观。不过这就不在本文的讨论范畴内了，进一步了解可参考笔者[另一篇文章](https://www.dusaiphoto.com/article/20/)。