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

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

1. 기능 소개

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

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

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

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

id: 노드의 고유 식별자

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

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

각 답변에는 댓글 목록이 필요합니다. 답변이 여러 개 있을 수 있으므로 이러한 댓글 목록을 객체에 넣어 답변의 ID로 해당 댓글 목록을 얻을 수 있도록 해야 합니다. 데이터 구조의 정의는 다음과 같습니다.

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

3. 구현 단계

3.1 댓글 표시

먼저 댓글 목록을 표시해야 합니다. 트리 구조를 표시하기 위해 재귀 구성 요소를 사용할 수 있습니다. 재귀 구성 요소는 구성 요소가 자체 템플릿에서 자신을 호출할 수 있음을 의미합니다.

Vue에서는 컴포넌트의 name 속성을 사용하여 재귀를 구현할 수 있습니다. 다음은 간단한 구성 요소입니다.

<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>

이 구성 요소는 모든 하위 노드를 재귀적으로 렌더링합니다.

3.2 댓글 추가

댓글을 추가할 때 어떤 노드에 추가할지 지정해야 합니다. 따라서 각 노드에 고유 식별자를 추가해야 합니다. 이 예에서는 UUID를 사용하여 고유 식별자를 생성합니다. 동시에, 작업의 편의를 위해 그것이 속한 답변의 ID도 각 노드에 저장합니다.

Vuex를 사용하여 상태를 관리할 수 있습니다. 댓글을 추가하는 과정은 다음과 같습니다.

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

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>

이 구성 요소에서는 사용자가 입력한 내용과 선택한 상위 노드 ID를 구성 요소의 데이터에 양방향으로 바인딩합니다. 동시에 구성 요소는 comment 속성도 받습니다. 이 속성이 있으면 구성 요소가 기존 주석에 추가된다는 의미입니다. 그렇지 않으면 구성 요소가 새 주석에 추가됩니다. 답변 아래에 의견을 말하십시오.

<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을 호출하여 서버에 새 댓글 레코드를 추가할 수 있습니다.

rrreee🎜Action이 처리된 후 added</code >Event를 트리거합니다. 인터페이스를 새로 고치도록 상위 구성 요소에 알립니다. 🎜🎜3.3 댓글 확장 및 축소🎜🎜댓글 확장 및 축소는 비교적 복잡한 기능입니다. 각 노드의 확장 상태를 기록하고 노드와 그 하위 노드를 빠르게 확보해야 합니다. Vuex 상태에서 각 노드의 확장 상태를 기록할 수 있습니다. 🎜🎜댓글 확장 및 축소 과정은 다음과 같습니다. 🎜🎜🎜사용자가 클릭하여 확장하거나 축소합니다. 🎜🎜Vuex의 Mutation을 트리거하여 해당 노드의 확장 상태를 업데이트합니다. 🎜🎜구성 요소는 확장 상태. 🎜🎜🎜이 함수를 위해서는 재귀 구성 요소를 작성해야 합니다. 구성 요소는 노드가 확장되었는지 여부에 따라 하위 노드를 렌더링할지 여부를 결정합니다. 이 구성요소에서는 확장 및 축소 버튼도 작성해야 합니다. 다음은 컴포넌트의 코드입니다. 🎜rrreee🎜이 컴포넌트에서는 Vuex의 <code>expanded 상태를 사용하여 각 노드가 확장되었는지 기록합니다. 계산된 구성요소에서는 이 상태를 사용하여 현재 노드가 확장되었는지 여부를 결정합니다. 구성 요소의 메서드에서는 Vuex의 Mutation을 사용하여 확장된 상태를 업데이트합니다. 🎜🎜확장 상태의 처리 로직은 매우 간단합니다. Mutation에서 해당 노드의 확장 상태를 반전시키기만 하면 됩니다. 🎜

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

4. 总结

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

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