Inhaltsverzeichnis
1. Funktionseinführung
In Vue können Sie das Namensattribut der Komponente verwenden, um eine Rekursion zu implementieren. Hier ist eine einfache Komponente:
Diese Komponente rendert alle untergeordneten Knoten rekursiv.
3.3 展开和收缩评论
4. 总结
Heim Web-Frontend View.js Wie implementiert man eine Zhihu-ähnliche Antwort- und Kommentarfunktion in Vue?

Wie implementiert man eine Zhihu-ähnliche Antwort- und Kommentarfunktion in Vue?

Jun 25, 2023 pm 04:19 PM
vue 评论 回答

Vue ist ein sehr beliebtes Frontend-Framework. Aufgrund seiner Flexibilität und Benutzerfreundlichkeit wird es häufig in der Webentwicklung eingesetzt. Zhihu ist eine sehr beliebte Q&A-Community mit einer großen Benutzerbasis und umfangreichen Inhalten. In Zhihu ist die Kommentarfunktion unter Antworten sehr wichtig. In diesem Artikel erfahren Sie, wie Sie mit Vue Zhihu-ähnliche Antwort- und Kommentarfunktionen implementieren.

1. Funktionseinführung

In Zhihu können Benutzer unter den Antworten kommentieren. Kommentare können eine Baumstruktur bilden, in der jeder Knoten einen Kommentar darstellt und zwischen den Knoten eine Eltern-Kind-Beziehung besteht. Benutzer können unter jedem Knoten eigene Kommentare hinzufügen, die ebenfalls eine Baumstruktur bilden. Um Benutzern die Anzeige zu erleichtern, wird Zhihu auch Kommentare erweitern und verkleinern.

Das Folgende ist eine Liste der Funktionen, die in diesem Artikel implementiert werden müssen:

  1. Benutzer können unter Antworten Kommentare hinzufügen;
  2. Benutzer können unter jedem Knoten Kommentare hinzufügen; Kommentare nach Ebenen;
  3. Benutzer können Kommentare erweitern und verkleinern.
  4. 2. Datenstrukturdesign
  5. Bevor wir diese Funktion implementieren, müssen wir zuerst die Datenstruktur entwerfen. In Zhihu sind Kommentare eine Baumstruktur und jeder Knoten hat die folgenden Attribute:

id: die eindeutige Kennung des Knotens;

Inhalt: der Inhalt des Knotens;
  1. createTime: Knotenerstellungszeit;
  2. children: Liste der untergeordneten Knoten.
  3. Hier ist die Definition der Datenstruktur:
  4. interface Comment {
      id: string;
      content: string;
      author: string;
      createTime: number;
      children?: Comment[];
    }
    Nach dem Login kopieren
  5. Für jede Antwort benötigen wir eine Liste mit Kommentaren. Da es mehrere Antworten geben kann, müssen wir diese Kommentarlisten in ein Objekt einfügen, damit die entsprechende Kommentarliste über die ID der Antwort abgerufen werden kann. Das Folgende ist die Definition der Datenstruktur:
  6. interface CommentData {
      [answerId: string]: Comment[];
    }
    Nach dem Login kopieren
  7. 3. Implementierungsschritte

3.1 Kommentare anzeigen

Zuerst müssen wir die Kommentarliste anzeigen. Um eine Baumstruktur anzuzeigen, können wir rekursive Komponenten verwenden. Rekursive Komponenten bedeuten, dass die Komponente sich selbst in einer eigenen Vorlage aufrufen kann.

In Vue können Sie das Namensattribut der Komponente verwenden, um eine Rekursion zu implementieren. Hier ist eine einfache Komponente:

<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>
Nach dem Login kopieren

Diese Komponente rendert alle untergeordneten Knoten rekursiv.

3.2 Kommentar hinzufügen

Beim Hinzufügen eines Kommentars müssen wir angeben, zu welchem ​​Knoten er hinzugefügt werden soll. Daher müssen wir jedem Knoten eine eindeutige Kennung hinzufügen. In diesem Beispiel verwenden wir UUID, um eine eindeutige Kennung zu generieren. Gleichzeitig speichern wir zur Vereinfachung der Bedienung auch die ID der Antwort, zu der sie in jedem Knoten gehört.

Wir können Vuex verwenden, um den Status zu verwalten. Der Vorgang zum Hinzufügen von Kommentaren ist wie folgt:

Der Benutzer gibt den Kommentarinhalt ein und wählt aus, zu welchem ​​Knoten er hinzugefügt werden soll.

löst die Vuex-Aktion aus, sendet eine Anfrage an den Server und fügt einen Kommentardatensatz auf dem Server hinzu.

Nachdem das Hinzufügen erfolgreich war, gibt der Server einen neuen Kommentardatensatz zurück.
  1. löst die Mutation von Vuex aus, um dem Status neue Kommentardatensätze hinzuzufügen.
  2. In der Komponente können wir die V-Model-Direktive verwenden, um den vom Benutzer eingegebenen Kommentarinhalt zu binden, und mit dem Element <select> auswählen, zu welchem ​​Knoten er hinzugefügt werden soll. Das Folgende ist ein Beispiel für eine Komponente:
  3. <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>
    Nach dem Login kopieren
  4. In dieser Komponente binden wir den vom Benutzer eingegebenen Inhalt und die ausgewählte übergeordnete Knoten-ID bidirektional an die Daten der Komponente. Gleichzeitig erhält die Komponente auch ein comment-Attribut. Wenn dieses Attribut vorhanden ist, bedeutet dies, dass die Komponente zu einem vorhandenen Kommentar hinzugefügt werden soll Kommentar unter der Antwort.
  5. In der Methode created der Komponente rufen wir die Liste der untergeordneten Knoten der Kommentare ab, die von der Komponente hinzugefügt werden sollen. Wenn die aktuelle Komponente zu einem vorhandenen Kommentar hinzugefügt werden soll, verwenden wir deren untergeordnete Knotenliste. Andernfalls erhalten wir die Kommentarliste der Antwort aus dem Vuex-Status.

In der addComment-Methode der Komponente können wir die Aktion von Vuex aufrufen, um einen neuen Kommentardatensatz zum Server hinzuzufügen: <select>元素来选择要添加到哪个节点下面。下面是一个组件的例子:

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

在这个组件中,我们将用户输入的内容和选择的父节点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>
Nach dem Login kopieren

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

3.3 展开和收缩评论

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

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

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

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

toggle(state, id) {
  state.expanded[id] = !state.expanded[id];
},
Nach dem Login kopieren
Nach dem Login kopieren

在该组件中,我们使用Vuex中的expandedrrreee

Nachdem die Aktion verarbeitet wurde, lösen wir das Ereignis added</code > aus um die übergeordnete Komponente zu benachrichtigen, die Schnittstelle zu aktualisieren. <p></p>3.3 Kommentare erweitern und verkleinern🎜🎜Das Erweitern und Verkleinern von Kommentaren ist eine relativ komplexe Funktion. Es ist notwendig, den Erweiterungsstatus jedes Knotens aufzuzeichnen und den Knoten und seine untergeordneten Knoten schnell abzurufen. Wir können den Erweiterungsstatus jedes Knotens im Vuex-Status aufzeichnen. 🎜🎜Der Prozess zum Erweitern und Verkleinern von Kommentaren ist wie folgt: 🎜🎜🎜Der Benutzer klickt zum Erweitern oder Verkleinern; 🎜🎜löst Vuex's Mutation aus, um den Erweiterungsstatus des entsprechenden Knotens zu aktualisieren; 🎜🎜Die Komponente rendert die untergeordneten Knoten rekursiv den Ausbaustatus. 🎜🎜🎜Für diese Funktion müssen wir eine rekursive Komponente schreiben. Die Komponente entscheidet, ob untergeordnete Knoten gerendert werden, basierend darauf, ob der Knoten erweitert ist. In dieser Komponente müssen wir auch eine Schaltfläche zum Erweitern und Reduzieren schreiben. Das Folgende ist der Code der Komponente: 🎜rrreee🎜In dieser Komponente verwenden wir den Status <code>expanded in Vuex, um aufzuzeichnen, ob jeder Knoten erweitert ist. In der berechneten Komponente verwenden wir diesen Zustand, um zu bestimmen, ob der aktuelle Knoten erweitert ist. In den Methoden der Komponente verwenden wir die Mutation von Vuex, um den erweiterten Zustand zu aktualisieren. 🎜🎜Die Verarbeitungslogik des Erweiterungszustands ist sehr einfach. Wir müssen nur den Erweiterungszustand des entsprechenden Knotens in Mutation umkehren: 🎜
toggle(state, id) {
  state.expanded[id] = !state.expanded[id];
},
Nach dem Login kopieren
Nach dem Login kopieren

4. 总结

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

Das obige ist der detaillierte Inhalt vonWie implementiert man eine Zhihu-ähnliche Antwort- und Kommentarfunktion in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

So fügen Sie Funktionen zu Schaltflächen für Vue hinzu So fügen Sie Funktionen zu Schaltflächen für Vue hinzu Apr 08, 2025 am 08:51 AM

Sie können der VUE -Taste eine Funktion hinzufügen, indem Sie die Taste in der HTML -Vorlage an eine Methode binden. Definieren Sie die Methode und schreiben Sie die Funktionslogik in der VUE -Instanz.

So verweisen Sie auf die JS -Datei mit Vue.js So verweisen Sie auf die JS -Datei mit Vue.js Apr 07, 2025 pm 11:27 PM

Es gibt drei Möglichkeiten, sich auf JS -Dateien in Vue.js zu beziehen: Geben Sie den Pfad direkt mit dem & lt; Skript & gt an. Etikett;; Dynamischer Import mit dem montierten () Lebenszyklushaken; und importieren über die Vuex State Management Library.

So verwenden Sie Watch in Vue So verwenden Sie Watch in Vue Apr 07, 2025 pm 11:36 PM

Mit der Watch -Option in Vue.js können Entwickler auf Änderungen in bestimmten Daten anhören. Wenn sich die Daten ändert, löst sich eine Rückruffunktion aus, um Aktualisierungsansichten oder andere Aufgaben auszuführen. Zu den Konfigurationsoptionen gehören unmittelbar, die festlegen, ob ein Rückruf sofort ausgeführt werden soll, und Deep, das feststellt, ob Änderungen an Objekten oder Arrays rekursiv anhören sollen.

Was bedeutet VUE Multi-Page-Entwicklung? Was bedeutet VUE Multi-Page-Entwicklung? Apr 07, 2025 pm 11:57 PM

VUE Multi-Page-Entwicklung ist eine Möglichkeit, Anwendungen mithilfe des Vue.js-Frameworks zu erstellen, in dem die Anwendung in separate Seiten unterteilt ist: Code-Wartung: Die Aufteilung der Anwendung in mehrere Seiten kann das Verwalten und Wartungsbereich erleichtern. Modularität: Jede Seite kann als separates Modul für eine einfache Wiederverwendung und den Austausch verwendet werden. Einfaches Routing: Die Navigation zwischen Seiten kann durch einfache Routing -Konfiguration verwaltet werden. SEO -Optimierung: Jede Seite hat eine eigene URL, die SEO hilft.

So kehren Sie von Vue zur vorherigen Seite zurück So kehren Sie von Vue zur vorherigen Seite zurück Apr 07, 2025 pm 11:30 PM

VUE.JS hat vier Methoden, um zur vorherigen Seite zurückzukehren: $ router.go (-1) $ router.back () verwendet & lt; Router-Link to = & quot;/& quot; Komponentenfenster.history.back () und die Methodenauswahl hängt von der Szene ab.

So verwenden Sie Vue Traversal So verwenden Sie Vue Traversal Apr 07, 2025 pm 11:48 PM

Es gibt drei gängige Methoden für Vue.js, um Arrays und Objekte zu durchqueren: Die V-für-Anweisung wird verwendet, um jedes Element zu durchqueren und Vorlagen zu rendern; Die V-Bind-Anweisung kann mit V-für dynamisch Attributwerte für jedes Element verwendet werden. und die .MAP -Methode kann Array -Elemente in Neuarrays umwandeln.

So fragen Sie die Version von Vue So fragen Sie die Version von Vue Apr 07, 2025 pm 11:24 PM

Sie können die Vue -Version mit Vue Devtools abfragen, um die Registerkarte VUE in der Konsole des Browsers anzuzeigen. Verwenden Sie NPM, um den Befehl "npm list -g vue" auszuführen. Suchen Sie das Vue -Element im Objekt "Abhängigkeiten" der Datei package.json. Führen Sie für Vue -CLI -Projekte den Befehl "Vue --version" aus. Überprüfen Sie die Versionsinformationen im & lt; Skript & gt; Tag in der HTML -Datei, die sich auf die VUE -Datei bezieht.

See all articles