drf_vue_blog/frontend/src/components/CommentView.vue

<template>
	<br /><br />
	<hr />
	<h3>发表评论</h3>
	<!-- 评论多行文本输入控件 -->
	<textarea
		v-model="message"
		:placeholder="placeholder"
		name="comment"
		id="comment-area"
		cols="60"
		rows="10"
	></textarea>
	<div>
		<button @click="submit" class="submitBtn">发布</button>
	</div>

	<br />
	<p>已有 {{ comments.length }} 条评论</p>
	<hr />

	<!-- 渲染所有评论内容 -->
	<div v-for="comment in comments" :key="comment.id">
		<div class="comments">
			<div>
				<span class="username">
					{{ comment.author.username }}
				</span>
				于
				<span class="created">
					{{ formatted_time(comment.created) }}
				</span>
				<span v-if="comment.parent">
					对
					<span class="parent">
						{{ comment.parent.author.username }}
					</span>
				</span>
				说道：
			</div>
			<div class="content">
				{{ comment.content }}
			</div>
			<div>
				<button class="commentBtn" @click="replyTo(comment)">
					回复
				</button>
			</div>
		</div>
		<hr />
	</div>
</template>

<script>
import $ from 'jquery';
import authorization from '@/utils/authorization'
import { ref, watchEffect } from 'vue';

export default {
	name: "CommentView",
    props: {
        article: {
            type: Object,
            required: true,
        }
    },
	setup(props) {
        // 所有评论
        let comments = ref([]);
        // 评论控件绑定的文本和占位符
        let message = ref('');
        let placeholder = ref('说点啥吧...');
        // 评论的评论
        let parentId = ref(null);
        // 发表评论
        const submit = () => {
            authorization().then((response) => {
                if (response[0]) {
                    $.ajax({
                        url: 'http://127.0.0.1:6789/api/comment/',
                        type: 'POST',
                        data: {
                            content: message.value,
                            article_id: props.article.id,
                            parent_id: parentId.value,

                        },
                        headers: {
                            authorization: "Bearer " + localStorage.getItem('access_blog')
                        },
                        success(resp) {
                            // 将新评论添加到顶部
                            comments.value.unshift(resp);
                            message.value = '';
                            window.alert("留言成功");
                        }
                    })
                }else {
                    window.alert("请登录后再评论!");
                }
            });
        };

        const replyTo = (comment) => {
            console.log(comment);
            parentId.value = comment.id;
            placeholder.value = '对' + comment.author.username + '说';
        };

        const formatted_time = (iso_date_string) => {
            const date = new Date(iso_date_string);
            return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
        };

        watchEffect(() => {
            comments.value = props.article !== null ? props.article.comments : [];
        }); 

        return {
            comments,
            message,
            placeholder,
            parentId,
            submit,
            replyTo,
            formatted_time,
        }
    },
};
</script>

<style scoped>
button {
	cursor: pointer;
	border: none;
	outline: none;
	color: whitesmoke;
	border-radius: 5px;
}
.submitBtn {
	height: 35px;
	background: steelblue;
	width: 60px;
}
.commentBtn {
	height: 25px;
	background: lightslategray;
	width: 40px;
    margin-bottom: 40px;
}
.comments {
	padding-top: 10px;
}
.username {
	font-weight: bold;
	color: darkorange;
}
.created {
	font-weight: bold;
	color: darkblue;
}
.parent {
	font-weight: bold;
	color: orangered;
}
.content {
	font-size: large;
	padding: 15px;
}
</style>