


Wie implementiert man eine Zhihu-ähnliche Antwort- und Kommentarfunktion in 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:
- Benutzer können unter Antworten Kommentare hinzufügen;
- Benutzer können unter jedem Knoten Kommentare hinzufügen; Kommentare nach Ebenen;
- Benutzer können Kommentare erweitern und verkleinern.
- 2. Datenstrukturdesign
- 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:
- createTime: Knotenerstellungszeit;
- children: Liste der untergeordneten Knoten.
- Hier ist die Definition der Datenstruktur:
interface Comment { id: string; content: string; author: string; createTime: number; children?: Comment[]; }
Nach dem Login kopierenFü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: interface CommentData { [answerId: string]: Comment[]; }
Nach dem Login kopieren3. 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>
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.- löst die Mutation von Vuex aus, um dem Status neue Kommentardatensätze hinzuzufügen. In der Komponente können wir die V-Model-Direktive verwenden, um den vom Benutzer eingegebenen Kommentarinhalt zu binden, und mit dem Element
<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 kopierenIn 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
<select>
auswählen, zu welchem Knoten er hinzugefügt werden soll. Das Folgende ist ein Beispiel für eine Komponente: comment
-Attribut. Wenn dieses Attribut vorhanden ist, bedeutet dies, dass die Komponente zu einem vorhandenen Kommentar hinzugefügt werden soll Kommentar unter der Antwort. 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"); }
在这个组件中,我们将用户输入的内容和选择的父节点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的状态中记录每个节点的展开状态。
展开和收缩评论的流程如下:
- 用户点击展开或收缩;
- 触发Vuex的Mutation,更新对应节点的展开状态;
- 组件根据展开状态,递归地渲染子节点。
这个功能我们需要编写一个递归组件。组件会根据节点是否展开来决定是否渲染子节点。在该组件中,我们还需要编写一个展开和收缩按钮。下面是该组件的代码:
toggle(state, id) { state.expanded[id] = !state.expanded[id]; },
在该组件中,我们使用Vuex中的expanded
rrreee
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]; },
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!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Durch die Verwendung von ECharts in Vue können Sie Ihrer Anwendung ganz einfach Datenvisualisierungsfunktionen hinzufügen. Zu den spezifischen Schritten gehören: Installieren von ECharts- und Vue ECharts-Paketen, Einführung von ECharts, Erstellen von Diagrammkomponenten, Konfigurieren von Optionen, Verwenden von Diagrammkomponenten, Anpassen von Diagrammen an Vue-Daten, Hinzufügen interaktiver Funktionen und Verwenden erweiterter Verwendungsmöglichkeiten.

Frage: Welche Rolle spielt der Exportstandard in Vue? Detaillierte Beschreibung: Exportstandard definiert den Standardexport der Komponente. Beim Importieren werden Komponenten automatisch importiert. Vereinfachen Sie den Importvorgang, verbessern Sie die Übersichtlichkeit und vermeiden Sie Konflikte. Wird häufig zum Exportieren einzelner Komponenten verwendet, wobei sowohl benannte als auch Standardexporte verwendet werden und globale Komponenten registriert werden.

Die Kartenfunktion von Vue.js ist eine integrierte Funktion höherer Ordnung, die ein neues Array erstellt, wobei jedes Element das transformierte Ergebnis jedes Elements im ursprünglichen Array ist. Die Syntax lautet map(callbackFn), wobei callbackFn jedes Element im Array als erstes Argument empfängt, optional den Index als zweites Argument, und einen Wert zurückgibt. Die Kartenfunktion ändert das ursprüngliche Array nicht.

In Vue.js ist event ein natives JavaScript-Ereignis, das vom Browser ausgelöst wird, während $event ein Vue-spezifisches abstraktes Ereignisobjekt ist, das in Vue-Komponenten verwendet wird. Im Allgemeinen ist die Verwendung von $event bequemer, da es so formatiert und erweitert ist, dass es die Datenbindung unterstützt. Verwenden Sie „event“, wenn Sie auf bestimmte Funktionen des nativen Ereignisobjekts zugreifen müssen.

onMounted ist ein Lebenszyklus-Hook für die Komponentenmontage in Vue. Seine Funktion besteht darin, Initialisierungsvorgänge durchzuführen, nachdem die Komponente im DOM bereitgestellt wurde, z. B. das Abrufen von Referenzen auf DOM-Elemente, das Festlegen von Daten, das Senden von HTTP-Anforderungen, das Registrieren von Ereignis-Listenern usw. Es wird nur einmal aufgerufen, wenn die Komponente gemountet wird. Wenn Sie Vorgänge ausführen müssen, nachdem die Komponente aktualisiert wurde oder bevor sie zerstört wurde, können Sie andere Lebenszyklus-Hooks verwenden.

Es gibt zwei Möglichkeiten, Module in Vue.js zu exportieren: Export und Export Default. export wird zum Exportieren benannter Entitäten verwendet und erfordert die Verwendung von geschweiften Klammern; export default wird zum Exportieren von Standardentitäten verwendet und erfordert keine geschweiften Klammern. Beim Importieren müssen per Export exportierte Entitäten ihre Namen verwenden, während per Exportstandard exportierte Entitäten implizit verwendet werden können. Es wird empfohlen, die Export-Standardeinstellung für Module zu verwenden, die mehrmals importiert werden müssen, und die Export-Standardeinstellung für Module, die nur einmal exportiert werden müssen.

Vue-Hooks sind Rückruffunktionen, die Aktionen bei bestimmten Ereignissen oder Lebenszyklusphasen ausführen. Dazu gehören Lebenszyklus-Hooks (wie beforeCreate, mount, beforeDestroy), Event-Handling-Hooks (wie click, input, keydown) und benutzerdefinierte Hooks. Hooks verbessern die Komponentenkontrolle, reagieren auf Komponentenlebenszyklen, verarbeiten Benutzerinteraktionen und verbessern die Wiederverwendbarkeit von Komponenten. Um Hooks zu verwenden, definieren Sie einfach die Hook-Funktion, führen Sie die Logik aus und geben Sie einen optionalen Wert zurück.

Vue.js-Ereignismodifikatoren werden verwendet, um bestimmte Verhaltensweisen hinzuzufügen, darunter: Verhindern von Standardverhalten (.prevent), Stoppen von Ereignisblasen (.stop), Einmaliges Ereignis (.once), Erfassen von Ereignissen (.capture), Passives Abhören von Ereignissen (.passive), Adaptiv Modifikator (.self)Schlüsselmodifikator (.key)
