Skip to content

Commit 97a4676

Browse files
stacklensstacklens
committed
N fix
1 parent 16e85eb commit 97a4676

File tree

2 files changed

+169
-177
lines changed

2 files changed

+169
-177
lines changed

‎md/310-发布评论.md

+161-169
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## 入口与Props
44

5-
作为一个普通的博客，评论通常位于**文章详情的末尾**，以便读者发表对博主的赞赏之情。又因为评论模块和文章模块本身没太多交联，比较独立，因此也没必要让他们的代码搅在一起。
5+
作为一个普通的博客，评论通常位于**文章详情的末尾**，以便读者发表对博主的赞赏之情。又因为评论模块和文章模块本身没太多交联，比较独立，因此可以不让它们的代码搅在一起。
66

77
因此修改 `ArticleDetail.vue` ，新增一个 `Comments` **组件**：（注意此组件还没写）
88

@@ -11,28 +11,28 @@
1111

1212
<template>
1313

14-
...
14+
...
1515

16-
<Comments :article="article" />
16+
<Comments :article="article" />
1717

18-
<BlogFooter/>
18+
<BlogFooter/>
1919

2020
</template>
2121

2222
<script>
23-
...
24-
import Comments from '@/components/Comments.vue'
23+
...
24+
import Comments from '@/components/Comments.vue'
2525
26-
export default {
27-
...
28-
components: {BlogHeader, BlogFooter, Comments},
29-
...
30-
}
26+
export default {
27+
...
28+
components: {BlogHeader, BlogFooter, Comments},
29+
...
30+
}
3131
</script>
3232
...
3333
```
3434

35-
Props 可以是数字、字符串等原生类型，也可以绑定如 `article` 这类自定义**对象**。传递文章对象是为了让评论组件获取到相关联文章的所有评论。
35+
Props 可以是数字、字符串等原生类型，也可以是如 `article` 这类自定义**对象**。传递文章对象是为了让评论组件获取到相关联文章的所有评论。
3636

3737
## 评论组件
3838

@@ -44,182 +44,174 @@ Props 可以是数字、字符串等原生类型，也可以绑定如 `article`
4444
<!-- frontend/src/components/Comments.vue -->
4545

4646
<template>
47-
<br>
48-
<br>
49-
<hr>
50-
<h3>发表评论</h3>
51-
<!-- 评论多行文本输入控件 -->
52-
<textarea
47+
<br><br>
48+
<hr>
49+
<h3>发表评论</h3>
50+
<!-- 评论多行文本输入控件 -->
51+
<textarea
5352
v-model="message"
5453
:placeholder="placeholder"
5554
name="comment"
5655
id="comment-area"
5756
cols="60"
5857
rows="10"
59-
></textarea>
60-
<div>
61-
<button @click="submit" class="submitBtn">发布</button>
58+
></textarea>
59+
<div>
60+
<button @click="submit" class="submitBtn">发布</button>
61+
</div>
62+
63+
<br>
64+
<p>已有 {{ comments.length }} 条评论</p>
65+
<hr>
66+
67+
<!-- 渲染所有评论内容 -->
68+
<div
69+
v-for="comment in comments"
70+
:key="comment.id"
71+
>
72+
<div class="comments">
73+
<div>
74+
<span class="username">
75+
{{ comment.author.username }}
76+
</span>
77+
于
78+
<span class="created">
79+
{{ formatted_time(comment.created) }}
80+
</span>
81+
<span v-if="comment.parent">
82+
对
83+
<span class="parent">
84+
{{ comment.parent.author.username }}
85+
</span>
86+
</span>
87+
说道：
88+
</div>
89+
<div class="content">
90+
{{ comment.content }}
91+
</div>
92+
<div>
93+
<button class="commentBtn" @click="replyTo(comment)">回复</button>
94+
</div>
6295
</div>
63-
64-
<br>
65-
<p>已有 {{ comments.length }} 条评论</p>
6696
<hr>
67-
68-
<!-- 渲染所有评论内容 -->
69-
<div
70-
v-for="comment in comments"
71-
:key="comment.id"
72-
>
73-
<div class="comments">
74-
<div>
75-
<span class="username">
76-
{{ comment.author.username }}
77-
</span>
78-
于
79-
<span class="created">
80-
{{ formatted_time(comment.created) }}
81-
</span>
82-
<span v-if="comment.parent">
83-
对
84-
<span class="parent">
85-
{{ comment.parent.author.username }}
86-
</span>
87-
</span>
88-
说道：
89-
</div>
90-
<div class="content">
91-
{{ comment.content }}
92-
</div>
93-
<div>
94-
<button class="commentBtn" @click="replyTo(comment)">回复</button>
95-
</div>
96-
</div>
97-
<hr>
98-
</div>
97+
</div>
9998
</template>
10099

101100
<script>
102-
import axios from 'axios';
103-
import authorization from '@/utils/authorization';
104-
105-
export default {
106-
name: 'Comments',
107-
// 通过 props 获取当前文章
108-
props: { article: Object },
109-
data: function () {
110-
return {
111-
// 所有评论
112-
comments: [],
113-
// 评论控件绑定的文本和占位符
114-
message: '',
115-
placeholder: '说点啥吧...',
116-
// 评论的评论
117-
parentID: null
101+
import axios from 'axios';
102+
import authorization from '@/utils/authorization';
103+
104+
export default {
105+
name: 'Comments',
106+
// 通过 props 获取当前文章
107+
props: { article: Object },
108+
data: function () {
109+
return {
110+
// 所有评论
111+
comments: [],
112+
// 评论控件绑定的文本和占位符
113+
message: '',
114+
placeholder: '说点啥吧...',
115+
// 评论的评论
116+
parentID: null
117+
}
118+
},
119+
// 监听 article 对象
120+
// 以便实时更新评论
121+
watch: {
122+
article() {
123+
this.comments = this.article !== null ? this.article.comments : []
124+
}
125+
},
126+
methods: {
127+
// 提交评论
128+
submit() {
129+
const that = this;
130+
authorization()
131+
.then(function (response) {
132+
if (response[0]) {
133+
axios
134+
.post('/api/comment/',
135+
{
136+
content: that.message,
137+
article_id: that.article.id,
138+
parent_id: that.parentID,
139+
},
140+
{
141+
headers: {Authorization: 'Bearer ' + localStorage.getItem('access.myblog')}
142+
})
143+
.then(function (response) {
144+
// 将新评论添加到顶部
145+
that.comments.unshift(response.data);
146+
that.message = '';
147+
alert('留言成功')
148+
})
118149
}
119-
},
120-
// 监听 article 对象
121-
// 以便实时更新评论
122-
watch: {
123-
article() {
124-
this.comments = this.article !== null ? this.article.comments : []
150+
else {
151+
alert('请登录后评论。')
125152
}
126-
},
127-
methods: {
128-
// 提交评论
129-
submit() {
130-
const that = this;
131-
authorization()
132-
.then(function (response) {
133-
if (response[0]) {
134-
axios
135-
.post('/api/comment/',
136-
{
137-
content: that.message,
138-
article_id: that.article.id,
139-
parent_id: that.parentID,
140-
},
141-
{
142-
headers: {Authorization: 'Bearer ' + localStorage.getItem('access.myblog')}
143-
})
144-
.then(function (response) {
145-
// 将新评论添加到顶部
146-
that.comments.unshift(response.data);
147-
that.message = '';
148-
alert('留言成功')
149-
})
150-
}
151-
else {
152-
alert('请登录后评论。')
153-
}
154-
})
155-
},
156-
// 对某条评论进行评论
157-
// 即二级评论
158-
replyTo(comment) {
159-
this.parentID = comment.id;
160-
this.placeholder = '对' + comment.author.username + '说:'
161-
},
162-
// 修改日期显示格式
163-
formatted_time: function (iso_date_string) {
164-
const date = new Date(iso_date_string);
165-
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
166-
},
167-
}
153+
})
154+
},
155+
// 对某条评论进行评论
156+
// 即二级评论
157+
replyTo(comment) {
158+
this.parentID = comment.id;
159+
this.placeholder = '对' + comment.author.username + '说:'
160+
},
161+
// 修改日期显示格式
162+
formatted_time: function (iso_date_string) {
163+
const date = new Date(iso_date_string);
164+
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
165+
},
168166
}
167+
}
169168
</script>
170169

171170
<style scoped>
172-
button {
173-
cursor: pointer;
174-
border: none;
175-
outline: none;
176-
color: whitesmoke;
177-
border-radius: 5px;
178-
}
179-
180-
.submitBtn {
181-
height: 35px;
182-
background: steelblue;
183-
width: 60px;
184-
}
185-
186-
.commentBtn {
187-
height: 25px;
188-
background: lightslategray;
189-
width: 40px;
190-
}
191-
192-
.comments {
193-
padding-top: 10px;
194-
}
195-
196-
.username {
197-
font-weight: bold;
198-
color: darkorange;
199-
}
200-
201-
.created {
202-
font-weight: bold;
203-
color: darkblue;
204-
}
205-
206-
.parent {
207-
font-weight: bold;
208-
color: orangered;
209-
}
210-
211-
.content {
212-
font-size: large;
213-
padding: 15px;
214-
}
171+
button {
172+
cursor: pointer;
173+
border: none;
174+
outline: none;
175+
color: whitesmoke;
176+
border-radius: 5px;
177+
}
178+
.submitBtn {
179+
height: 35px;
180+
background: steelblue;
181+
width: 60px;
182+
}
183+
.commentBtn {
184+
height: 25px;
185+
background: lightslategray;
186+
width: 40px;
187+
}
188+
.comments {
189+
padding-top: 10px;
190+
}
191+
.username {
192+
font-weight: bold;
193+
color: darkorange;
194+
}
195+
.created {
196+
font-weight: bold;
197+
color: darkblue;
198+
}
199+
.parent {
200+
font-weight: bold;
201+
color: orangered;
202+
}
203+
.content {
204+
font-size: large;
205+
padding: 15px;
206+
}
215207
</style>
216208
```
217209

218210
实际上没有啥新知识，都是前面章节技巧的混合：
219211

220-
- 组件通过 `Props` 获取了**文章对象**，利用 `watch` 监听此对象并实时更新关联评论。注意这里**不能**通过 `mounted()` 去实现此逻辑，原因是因为挂载 Vue 实例时 `article` 的**初始值**是 `null`。
212+
- 组件通过 `Props` 获取了**文章对象**，利用 `watch` 监听此对象并实时更新关联评论。注意这里**不能**通过 `mounted()` 去实现此逻辑，原因是因为挂载 Vue 实例的时候 `article` 的**初始值**是 `null`。
221213
- 提交评论用 `submit()` 方法，后端若返回成功则将最新的评论**更新**到 `this.comments` 中。
222-
- `replyTo()` 方法用于记录评论的父级（即“评论的评论”），当然没有也是可以的。
214+
- `replyTo()` 方法用于记录评论的父级（即“评论的评论”），如果为 `null` 则表示此评论自己就是第一级。
223215
- `formatted_time()` 方法见过好几回了，用于格式化日期。
224216

225217
发表评论这就搞定了！来**看看效果**吧。
@@ -228,12 +220,12 @@ Props 可以是数字、字符串等原生类型，也可以绑定如 `article`
228220

229221
![](https://blog.dusaiphoto.com/drf-p310-1.png)
230222

231-
虽然简陋，但该有的东西都有，剩下的就是扩充和美化的工作了。
223+
虽然简陋，但该有的功能都有，剩下的就是扩充和美化界面的工作了。
232224

233225
## 收尾工作
234226

235-
评论的删改的开发，由于和前面章节所用的技巧高度重合，就不赘述了，留给读者自行研究。
227+
有的读者可能发现了，教程虽然使用了 Vue 3，但是里面用到的核心技术跟 Vue 2 基本没什么不同，甚至可以非常顺滑的互相迁移。**那 Vue 3 究竟更新了什么？**
236228

237-
有的读者可能发现了，教程虽然使用了 Vue 3，但是里面用到的技巧跟 Vue 2 里基本没什么不同啊，甚至可以非常顺滑的互相迁移。**那 Vue 3 究竟更新了什么？**
229+
下面一章让我们正式进入 Vue 3 最强大的新功能之一：组合式 API。
238230

239-
下面一章让我们进入 Vue 3 最强大的新功能之一：组合式 API。
231+
> 评论的删改的开发，由于和前面章节所用的技巧高度重合，就不赘述了，留给读者自行研究。

0 commit comments

Comments
 (0)