vue实现评论列表功能

下面是vue实现评论列表功能的完整攻略。

1. 初始化

首先，我们需要使用vue-cli初始化一个项目，使用以下命令：

vue create project-name

初始化完成后，我们需要安装axios和bootstrap，使用以下命令：

npm install axios bootstrap

2. 创建数据模型

我们需要先定义一个评论数据的模型，包含评论的id、内容、用户、时间等信息。例如：

{
  id: 1,
  content: '这是一个评论',
  user: '小明',
  time: '2021-07-01 10:00:00'
}

我们可以将模型放在一个单独的js文件中，例如：

export default {
  id: Number,
  content: String,
  user: String,
  time: String
}

3. 定义组件

接下来，我们需要定义一个评论列表组件和一个评论输入组件。

评论列表组件需要包含以下功能：

获取评论列表数据
渲染评论列表
支持翻页
支持删除评论

评论列表组件的代码示例：

<template>
  <div>
    <h2>评论列表</h2>
    <ul class="list-group">
      <li class="list-group-item" v-for="comment in comments" :key="comment.id">
        <p>{{comment.content}}</p>
        <small>{{comment.user}} {{comment.time}}</small>
        <button class="btn btn-sm btn-danger float-right" @click="deleteComment(comment.id)">删除</button>
        <hr>
      </li>
    </ul>
    <nav v-if="totalPage>1">
      <ul class="pagination">
        <li class="page-item" v-if="currentPage>1" @click="changePage(currentPage-1)"><a class="page-link" href="#">上一页</a></li>
        <li class="page-item" v-for="page in totalPage" :key="page" :class="{ active: currentPage==page }" @click="changePage(page)"><a class="page-link" href="#">{{page}}</a></li>
        <li class="page-item" v-if="currentPage<totalPage" @click="changePage(currentPage+1)"><a class="page-link" href="#">下一页</a></li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      comments: []
    }
  },
  created() {
    this.getComments()
  },
  methods: {
    getComments() {
      axios.get(`/api/comments?page=${this.currentPage}&pageSize=${this.pageSize}`).then(res => {
        this.comments = res.data.list
        this.total = res.data.total
      })
    },
    deleteComment(id) {
      axios.delete(`/api/comment/${id}`).then(res => {
        this.getComments()
      })
    },
    changePage(page) {
      this.currentPage = page
      this.getComments()
    }
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize)
    }
  }
}
</script>

其中，getComments方法用于获取评论列表数据，deleteComment方法用于删除评论，changePage方法用于切换页码。这些方法都需要通过调用后端接口来实现。

评论列表组件还需要在created生命周期中调用getComments方法，以获取初始评论列表数据。

评论输入组件需要包含以下功能：

输入评论内容
点击提交按钮提交评论

评论输入组件的代码示例：

<template>
  <form>
    <div class="form-group">
      <label for="content">评论内容</label>
      <textarea class="form-control" id="content" rows="3" v-model="content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary" @click.prevent="submitComment">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    submitComment() {
      axios.post('/api/comment', { content: this.content }).then(res => {
        this.content = ''
        this.$emit('add-comment')
      })
    }
  }
}
</script>

其中，submitComment方法用于提交评论内容，提交成功后会清空输入框并触发add-comment事件，以通知评论列表组件刷新数据。

4. 调用后端接口

在getComments、deleteComment和submitComment等方法中，我们需要调用后端提供的接口来实现数据的获取、删除和添加。这里我们假设后端提供了以下接口：

GET /api/comments?page=X&pageSize=Y：获取评论列表数据，X为页码，Y为每页条数。
DELETE /api/comment/:id：根据id删除一条评论。
POST /api/comment：添加一条评论，content为评论的内容。

在实际项目中，这些接口需要根据后端实际实现进行调整。

5. 父子组件通信

最后，我们需要将评论输入组件和评论列表组件组合起来使用。为了让评论输入组件和评论列表组件进行通信，我们可以使用$emit方法来触发自定义事件，例如在评论输入组件中触发add-comment事件，以通知评论列表组件刷新数据。

组合后的代码示例：

<template>
  <div>
    <comment-input @add-comment="getComments"></comment-input>
    <comment-list></comment-list>
  </div>
</template>

<script>
import CommentInput from './CommentInput.vue'
import CommentList from './CommentList.vue'

export default {
  components: {
    CommentInput,
    CommentList
  },
  methods: {
    getComments() {
      this.$refs.commentList.getComments()
    }
  }
}
</script>

其中，$refs.commentList指向评论列表组件的实例，getComments方法通过该实例调用获取评论数据的方法，以刷新评论列表。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue实现评论列表功能 - Python技术站