实现一个动态评论系统：Vue3与后端API交互

原创

日晚间粉 2024-08-20 13:58:33 ©著作权

©著作权归作者所有：来自51CTO博客作者日晚间粉的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现一个动态评论系统：Vue3与后端API交互

在当今的开发环境中，评论系统是多种应用中不可或缺的一部分，本文将带您深入了解如何使用 Vue3 实现一个动态评论系统，并与后端 API 进行交互。我们将重点使用 Vue3 的 composition API（setup 语法糖）来构建这个系统。

需求概述

在构建动态评论系统时，我们需要实现以下功能：

获取评论列表
提交新评论
展示评论详情
支持实时更新评论

准备工作

本示例中，我们将使用以下技术栈：

前端：Vue 3, Axios
后端：我们假定有一个 RESTful API，支持 GET 和 POST 请求。

为了更好地演示，假设我们的后端 API 如下：

GET /api/comments：获取评论列表
POST /api/comments：提交新评论

创建 Vue3 应用

首先，确保我们已安装 Vue 3。您可以使用 Vue CLI 创建一个新的 Vue 项目：

vue create dynamic-comment-system

进入项目目录：

cd dynamic-comment-system

安装 Axios 以便进行 API 请求：

npm install axios

实现评论系统

在我们的项目中创建一个名为 CommentSection.vue 的组件，并开始实现评论系统的功能。

<template>
  <div class="comments">
    <h2>评论区</h2>
    <div class="comment-list">
      <div class="comment" v-for="comment in comments" :key="comment.id">
        <p><strong>{{ comment.author }}:</strong> {{ comment.content }}</p>
      </div>
    </div>
    <form @submit.prevent="addComment">
      <input 
        type="text" 
        v-model="newComment.author" 
        placeholder="您的名字" 
        required 
      />
      <textarea 
        v-model="newComment.content" 
        placeholder="请输入您的评论" 
        required 
      ></textarea>
      <button type="submit">提交评论</button>
    </form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'; 
import axios from 'axios';

const comments = ref([]); // 用于存储评论数据
const newComment = ref({ author: '', content: '' }); // 用于存储新评论的信息

// 获取评论列表
const fetchComments = async () => {
  try {
    const response = await axios.get('https://example.com/api/comments');
    comments.value = response.data; 
  } catch (error) {
    console.error('无法获取评论：', error); 
  }
};

// 提交新评论
const addComment = async () => {
  try {
    const response = await axios.post('https://example.com/api/comments', newComment.value);
    comments.value.push(response.data); // 将新评论添加到列表中
    newComment.value = { author: '', content: '' }; // 清空输入框
  } catch (error) {
    console.error('无法提交评论：', error); 
  }
};

// 组件挂载时获取评论列表
onMounted(fetchComments);
</script>

<style scoped>
.comments {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid #ccc;
}
.comment {
  border-bottom: 1px solid #eee;
  padding: 0.5rem 0;
}
form {
  display: flex;
  flex-direction: column;
}
input, textarea {
  margin: 0.5rem 0;
  padding: 0.5rem;
}
</style>

代码解析

数据管理：我们使用 ref 来创建 comments 和 newComment 的响应式数据。comments 用于存储从后端获取的评论列表，newComment 用于临时存储用户输入的评论信息。
获取评论列表：通过 fetchComments 函数，我们使用 Axios 向后端 API 发送 GET 请求以获取评论数据，并将其存放在 comments 中。
提交新评论：addComment 函数处理提交新评论的逻辑。经过 POST 请求提交到后端后，我们将新评论添加到 comments 数组中，并重置输入框内容。
生命周期钩子：我们在 onMounted 挂载钩子中调用 fetchComments 方法，以确保在组件加载后获取评论列表。