8000 comments display is ok · pycoder404/blog-vue@442fb53 · GitHub
[go: up one dir, main page]
Skip to content

Commit 442fb53

Browse files
pycoder404pycoder404
committed
comments display is ok
1 parent b03b3e8 commit 442fb53

File tree

4 files changed

+96
-12
lines changed

4 files changed

+96
-12
lines changed

‎src/api/comment.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import request from '@/utils/request'
22

33
export function getCommentList(queryParams) {
44
return request({
5-
url: '/api/comment/',
5+
url: '/api/comment/list/',
66
method: 'get',
77
params: queryParams
88
})

‎src/views/article/components/ArticleComment.vue

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div>
3+
<p> comments:</p>
4+
<el-card
5+
class="comment-item"
6+
v-for="comment in commentList"
7+
:key="comment.id"
8+
>
9+
<template #header>
10+
<div class="card-header">
11+
<!-- todo add isAuthor label -->
12+
<span>
13+
<b>{{comment.author}}</b>
14+
<span>{{comment.created_time}}</span>
15+
16+
</span>
17+
<el-button class="button" text>Operation button</el-button>
18+
</div>
19+
</template>
20+
{{comment.content}}
21+
</el-card>
22+
</div>
23+
24+
</template>
25+
26+
<script>
27+
28+
29+
import {getCommentList} from "@/api/comment";
30+
31+
export default {
32+
name: 'ArticleComment',
33+
components: {},
34+
props: {
35+
articleId: {
36+
type: Number
37+
}
38+
},
39+
data() {
40+
41+
return {
42+
loading: false,
43+
tempRoute: {},
44+
commentList: [],
45+
commentCount: 0,
46+
}
47+
},
48+
created() {
49+
this.getList()
50+
},
51+
methods: {
52+
getList() {
53+
this.listLoading = true
54+
const queryParams = {'article_id': this.articleId}
55+
getCommentList(queryParams).then(response => {
56+
this.commentList = response.data
57+
this.commentCount = response.count
58+
this.listLoading = false
59+
})
60+
}
61+
62+
}
63+
}
64+
65+
</script>
66+
67+
<style scoped>
68+
.comment-item {
69+
margin-top: 10px;
70+
71+
}
72+
73+
.card-header {
74+
75+
}
76+
77+
</style>

‎src/views/article/detail.vue

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
</router-link>
3434
</span>
3535
</div>
36+
37+
<el-divider></el-divider>
38+
<article-comment :article-id="articleId"></article-comment>
39+
3640
<br>
3741
</div>
3842
</el-col>
@@ -54,24 +58,25 @@
5458
import {getArticleDetail} from '@/api/article'
5559
// import SvgIcon from '@/components/SvgIcon/index'
5660
57-
import LikeFavorite from "@/views/article/components/LikeFavorite";
58-
import CategoryAndTag from "@/views/article/components/CategoryAndTag";
59-
//
61+
import LikeFavorite from "@/views/article/components/LikeFavorite"
62+
import CategoryAndTag from "@/views/article/components/CategoryAndTag"
63+
import ArticleComment from '@/views/article/components/ArticleComment'
6064
6165
export default {
6266
name: "ArticleDetail",
63-
components: {LikeFavorite, CategoryAndTag},
67+
components: {LikeFavorite, CategoryAndTag,ArticleComment},
6468
data() {
6569
return {
6670
articleDetail: {},
6771
tempRoute: {},
68-
tocBodyStyle: {padding: '5px 20px 10px 0px'}
72+
tocBodyStyle: {padding: '5px 20px 10px 0px'},
73+
articleId: Number
6974
}
7075
},
7176
7277
created() {
73-
const articleId = this.$route.params && this.$route.params.id
74-
this.fetchData(articleId)
78+
this.articleId = this.$route.params && this.$route.params.id
79+
this.fetchData(this.articleId)
7580
// Why need to make a copy of this.$route here?
7681
// Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
7782
// https://github.com/PanJiaChen/vue-element-admin/issues/1221

‎src/views/article/list.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div style="background-color: #f7f5f5">
3-
<div v-for="article in articleList" :key="article.id" class="article-main">
3+
<div v-for="article in articleList" :key="article.id" >
44
<el-row style="background-color: white">
5-
<el-col>
5+
<el-col :span="14" :offset="5" class="article-main" >
66
<div class="article-title">
77
<router-link
88
:to="'/article/detail/'+ article.id"
@@ -14,7 +14,7 @@
1414

1515
<div class="article-desc">
1616
<span>
17-
@{{article.created_time }} {{ article.author }}, views:{{article.views_count}} likes:{{article.likes_count}} comments:0
17+
@{{article.created_time }} {{ article.author }}, views:{{article.views_count}} likes:{{article.likes_count}} comments:{{article.comments_count}}
1818
<el-button icon="DeleteFilled" type="text"/>
1919
<router-link
2020
:to="'/article/edit/'+ article.id"
@@ -28,6 +28,7 @@
2828
</div>
2929
</el-col>
3030
</el-row>
31+
<!-- <el-divider style="margin: 10px 0;"/>-->
3132
</div>
3233
</div>
3334

@@ -94,9 +95,10 @@
9495
}
9596
9697
.article-main {
97-
margin: 10px 200px;
98+
margin-top:10px;
9899
box-shadow: 1px 2px 3px #ddd;
99100
border: 1px solid #ddd;
101+
border-radius: 5px;
100102
}
101103
102104
.article-title {

0 commit comments

Comments
 (0)
0