Vue에서 Zhihu와 같은 답변 및 댓글 기능을 구현하는 방법은 무엇입니까?

Vue는 매우 인기 있는 프런트 엔드 프레임워크로 유연성과 사용 용이성으로 인해 웹 개발에 널리 사용됩니다. Zhihu는 대규모 사용자 기반과 풍부한 콘텐츠를 갖춘 매우 인기 있는 Q&A 커뮤니티입니다. Zhihu에서는 답변 아래의 댓글 기능이 매우 중요합니다. 이 기사에서는 Vue를 사용하여 Zhihu와 유사한 답변 및 댓글 기능을 구현하는 방법을 살펴보겠습니다.

1. 기능 소개

Zhihu에서는 답변 아래에 댓글을 달 수 있습니다. 댓글은 트리 구조를 형성할 수 있으며, 각 노드는 댓글을 나타내고 노드 간에 상위-하위 관계가 있습니다. 사용자는 각 노드 아래에 자신만의 설명을 추가할 수 있으며, 이는 또한 트리 구조를 형성합니다. 사용자가 쉽게 볼 수 있도록 Zhihu는 댓글도 확대 및 축소합니다.

다음은 이 문서에서 구현해야 하는 기능 목록입니다.

1. 사용자는 답변 아래에 댓글을 추가할 수 있습니다.
2. 댓글은 트리 구조를 형성할 수 있습니다.
3. 사용자는 각 노드 아래에 댓글을 추가할 수 있습니다.
4. 사용자는 댓글을 확장하거나 축소할 수 있습니다.
5. 2. 데이터 구조 설계

이 기능을 구현하기 전에 먼저 데이터 구조를 설계해야 합니다. Zhihu에서 댓글은 트리 구조이며 각 노드에는 다음과 같은 속성이 있습니다.

1. content: 노드의 콘텐츠
2. author: 노드의 작성자;
createTime: 노드 생성 시간
3. children: 하위 노드 목록입니다.
5. 데이터 구조의 정의는 다음과 같습니다.

interface Comment {
  id: string;
  content: string;
  author: string;
  createTime: number;
  children?: Comment[];
}

로그인 후 복사

interface CommentData {
  [answerId: string]: Comment[];
}

<template>
  <div>
    <div>{{ comment.content }}</div>
    <div v-if="comment.children">
      <comment v-for="c in comment.children" :key="c.id" :comment="c" />
    </div>
  </div>
</template>

<script>
export default {
  name: "comment",
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
};
</script>

사용자가 댓글 내용을 입력하고 이를 추가할 노드를 선택합니다.

Vuex Action을 트리거하고 서버에 요청을 보내고 서버에 댓글 레코드를 추가합니다.
추가가 성공한 후 서버는 새 댓글 레코드를 반환합니다.
Vuex의 Mutation을 트리거하여 상태에 새 댓글 레코드를 추가합니다.
4. 컴포넌트에서 v-model 지시어를 사용하여 사용자가 입력한 주석 내용을 바인딩하고 <select> 요소를 사용하여 이를 추가할 노드를 선택할 수 있습니다. 다음은 구성 요소의 예입니다.

<template>
  <div>
    <div>
      <textarea v-model="content" />
    </div>
    <div>
      <select v-model="parentId">
        <option value="root">回答</option>
        <option :value="comment.id" v-for="comment in comments" :key="comment.id">
          {{ comment.content }}
        </option>
      </select>
    </div>
    <div>
      <button @click="addComment">添加评论</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  props: {
    answerId: {
      type: String,
      required: true,
    },
    comment: {
      type: Object,
      required: false,
      default: () => null,
    },
  },
  data() {
    return {
      content: "",
      parentId: "root",
      comments: [],
    };
  },
  created() {
    if (this.comment) {
      this.comments = this.comment.children || [];
    } else {
      this.comments = this.$store.state.comments[this.answerId] || [];
    }
  },
  methods: {
    ...mapActions("comments", ["addComment"]),
  },
};
</script>

로그인 후 복사

<select>元素来选择要添加到哪个节点下面。下面是一个组件的例子：

async addComment() {
  const { content, parentId } = this;
  const answerId = this.answerId;
  await this.addComment({ answerId, parentId, content });
  this.$emit("added");
}

在这个组件中，我们将用户输入的内容和选择的父节点id双向绑定到组件的data中。同时，该组件还接收一个comment属性，如果该属性存在，则表示该组件要添加到一个已有的评论下面；否则，该组件是要添加到回答下面的新评论。

在该组件的created方法中，我们检索该组件要添加的评论的子节点列表。如果当前组件是要添加到一个已有的评论下面，则使用它的子节点列表；否则，我们从Vuex的状态中获取所在回答的评论列表。

在组件的addComment方法中，我们可以调用Vuex的Action，来向服务器添加新的评论记录：

<template>
  <div>
    <div>
      <div>{{ comment.content }}</div>
      <div>
        <button @click="toggle"> {{ open ? "收起" : "展开" }} </button>
      </div>
    </div>
    <div v-if="open && comment.children">
      <comment v-for="subComment in comment.children" :key="subComment.id" :comment="subComment" />
    </div>
  </div>
</template>

<script>
export default {
  name: "comment",
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
  computed: {
    open() {
      return this.$store.state.expanded[this.comment.id];
    },
  },
  methods: {
    toggle() {
      this.$store.commit("toggle", this.comment.id);
    },
  },
};
</script>

在Action处理完毕后，我们触发added事件，以通知父组件刷新界面。

3.3 展开和收缩评论

展开和收缩评论是一项比较复杂的功能。需要记录每个节点的展开状态，并能够快速的获取所在节点和它的子节点。我们可以在Vuex的状态中记录每个节点的展开状态。

展开和收缩评论的流程如下：

1. 用户点击展开或收缩；
2. 触发Vuex的Mutation，更新对应节点的展开状态；
3. 组件根据展开状态，递归地渲染子节点。

这个功能我们需要编写一个递归组件。组件会根据节点是否展开来决定是否渲染子节点。在该组件中，我们还需要编写一个展开和收缩按钮。下面是该组件的代码：

toggle(state, id) {
  state.expanded[id] = !state.expanded[id];
},

在该组件中，我们使用Vuex中的expanded컴포넌트의 created 메소드에서 컴포넌트에 의해 추가될 댓글의 하위 노드 목록을 검색합니다. 현재 구성 요소를 기존 주석에 추가하려면 해당 하위 노드 목록을 사용하세요. 그렇지 않으면 Vuex 상태에서 답변의 주석 목록을 가져옵니다.

컴포넌트의 addComment 메소드에서 Vuex의 Action을 호출하여 서버에 새 댓글 레코드를 추가할 수 있습니다.

toggle(state, id) {
  state.expanded[id] = !state.expanded[id];
},

4. 总结

本文介绍了如何使用Vue实现仿知乎的回答评论功能，包括评论的树形结构、添加评论、展开和收缩评论。Vue的组件、状态管理和递归组件等特性，为实现该功能提供了非常便利的支持。如果您想尝试实现仿知乎的回答评论功能，本文提供了非常好的参考。

위 내용은 Vue에서 Zhihu와 같은 답변 및 댓글 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!