So verwenden Sie VueJS zum Implementieren der Kommentarfunktion

So verwenden Sie Vuejs, um die Kommentarfunktion zu implementieren: 1. Verwenden Sie die Artikelinhaltskomponente und binden Sie ein Objekt. 2. Implementieren Sie die Kommentarfunktion über die Kommentarinhaltskomponente.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Wie verwende ich Vuejs, um die Kommentarfunktion zu implementieren?

Vue.js implementiert die Artikelkommentar- und Antwortkommentarfunktionen:

Ich wollte ursprünglich Jade verwenden, um diese Seite zu rendern und Vue für den Kommentarteil verwenden. Aber nachdem ich darüber nachgedacht hatte, fand ich es mühsam. Am Ende verwenden wir Vue-Komponenten, um es zu erledigen.
Zuerst gehen Sie zur Online-Demo: http://jsbin.com/ceqifo/1/edit?js,output

Dann gehen Sie zu den Renderings

Sie können direkt kommentieren, klicken Sie auf die Kommentare anderer, um zu antworten auf die Kommentare anderer Leute.

html

<div id="comment">
 <article-content v-bind:article="article"></article-content>
 <commemt-content v-bind:comment="comment" v-on:change="changCommmer"></commemt-content>
 <comment-textarea v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment" v-on:canel="canelCommit"></comment-textarea>
</div>

Die Daten sind alle an die Stammkomponente gebunden. Hier werden auch mehrere Ereignisse überwacht.

26dd0fbbc15f776f493275f5a4efd005, die Komponente des Textfelds.

Vue.component('commentTextarea',{
 template:'\
 <div class="commentBox">\
 <h3>发表评论</h3>\
 <b v-if="type">你回复 {{name}}</b>\
 <textarea name="" value="请填写评论内容" v-model="commentText"></textarea>\
 <button class="btn" @click="addComment">发表</button>\
 <button class="btn" @click="canelComment">取消</button>\
 </div>&#39;,
 props: [&#39;type&#39;,&#39;name&#39;],
 data: function(){
 return {commentText:""}
 },
 methods: {
 addComment: function() {
 this.$emit("submit",this.commentText);
 this.commentText = "";
 },
 canelComment: function() {
 this.$emit("canel");
 this.commentText = "";
 }
 }
});

Typ ist, dass, wenn Sie auf den Kommentar einer anderen Person klicken, das Eingabeaufforderungsfeld „Sie antworten auf xxx“ angezeigt wird. Dies liegt daran, dass die Kommunikation komponentenübergreifend erfolgt und die beiden Komponenten keine Eltern-Kind-Komponenten, sondern Geschwisterkomponenten sind. Ich habe ihre Kommunikation in der übergeordneten Komponente aufgehängt. Kommunikation ist auf einem Attribut von implementiert.

Der Inhalt im Textfeld ist bidirektional mit einem V-Modell gebunden. Wenn auf OK geklickt wird, wird ein AddComment-Ereignis ausgelöst und der Textinhalt wird an die übergeordnete Komponente übergeben, die auf das Ereignis wartet.

Commemt-Content-Komponente – Kommentarinhalt

Bestimmen Sie zuerst das JSON-Format

comment: [
 {
 name: "有毒的黄同学", //评论人名字
 time: "2016-08-17", 
 content: "好,讲得非常好，good",
 reply: [ //回复评论的信息，是一个数组，如果没内容就是一个空数组
 {
 responder: "傲娇的", //评论者
 reviewers: "有毒的黄同学", //被评论者
 time: "2016-09-05",
 content: "你说得对"
 }
 }
 ]

Schauen Sie sich dann die Commemt-Content-Komponente an

Vue.component('commemt-content',{
 template:'\
 <div class="commentBox">\
 <h3>评论</h3>\
 <p v-if="comment.length==0">暂无评论，我来发表第一篇评论！</p>\
 <div v-else>\
 <div class="comment" v-for="(item,index) in comment" v-bind:index="index" >\
 <b>{{item.name}}<span>{{item.time}}</span></b>\
 <p @click="changeCommenter(item.name,index)">{{item.content}}</p>\
 <div v-if="item.reply.length > 0">\
  <div class="reply" v-for="reply in item.reply">\
  <b>{{reply.responder}}  回复  {{reply.reviewers}}<span>{{reply.time}}</span></b>\
  <p @click="changeCommenter(reply.responder,index)"">{{reply.content}}</p>\
  </div>\
 </div>\
 </div>\
 </div>\
 </div>&#39;,
 props: [&#39;comment&#39;],
 methods: {
 changeCommenter: function(name,index) {
 this.$emit("change",name,index);
 }
 }
});

Wenn kein Inhalt vorhanden ist, wird angezeigt: „Noch keine Kommentare, das werde ich.“ poste den ersten Kommentar!" . Wenn Inhalt vorhanden ist, beginnen Sie mit der Durchquerung. Da Sie die Anzahl der Kommentare kennen müssen, wenn Sie darauf klicken, muss jeder Kommentar an einen v-bind:index="index"

gebunden werden. Bei den sekundären Kommentaren ist es weiterhin erforderlich, das Antwortarray zu durchlaufen und binde die Bindung. Denn selbst wenn auf den Inhalt geklickt wird, wird er am Ende des Kommentars der ersten Ebene hinzugefügt, daher habe ich die beiden Klickereignisse an dasselbe Ereignis gebunden. Die übergebenen Namen sind lediglich unterschiedlich. Der Index dahinter ist der Index der Kommentare der ersten Ebene.

Das changeCommenter-Ereignis löst die Änderung aus, und die übergeordnete Komponente hört zu und führt das entsprechende Verhalten aus.

Übergeordnete Komponente

var comment = new Vue({
 el: "#comment",
 data: {
 commenter: "session", //评论人，这里会从session拿
 type: 0, //0为评论作者1为评论别人的评论
 oldComment: null, //久评论者的名字
 chosedIndex: -1, //被选中的评论的index
 article: {
 title: "当归泡水喝的九大功效",
 time: "2016-07-12",
 read:50,
 content: ""
 },
 comment: [] //评论内容
 },
 methods: {
 //添加评论
 addComment: function(data) {
 if(this.type == 0) {
 this.comment.push({
  name: 'session',
  time: getTime(),
  content: data,
  reply: []
 });
 //服务器端
 }else if(this.type == 1){
 this.comment[this.chosedIndex].reply.push({
  responder: 'session',
  reviewers:this.comment[this.chosedIndex].name,
  time: getTime(),
  content: data
 });
 this.type = 0;
 }
 },
 //监听到了点击了别人的评论
 changCommmer: function(name,index) {
 this.oldComment = name;
 this.chosedIndex = index;
 this.type = 1;
 },
 //监听到了取消评论
 canelCommit: function() {
 this.type = 0;
 }
 }
})

Daten dort. . . Es ist wirklich schwer zu benennen. . . Kommentator ist der aktuelle Anmeldename, der aus der Sitzung abgerufen wird. Der Typ dient dazu, festzustellen, ob es sich um den Kommentar des Kommentarautors oder den Kommentar einer anderen Person handelt (es sollte die ID sein, die tatsächlich ausgewählt wurde). angeklickt Der Index der Kommentare.

canelCommit dient zur Überwachung des Kommentarlöschereignisses. Es wird hier verwendet, wenn ich auf den Kommentar einer anderen Person klicke, aber plötzlich den Kommentarautor ändern möchte. Also setze type=0;

changCommmer überwacht, wenn jemand auf einen Kommentar klickt und auf den Kommentar antworten möchte. Das heißt, type=1.

addComment dient dazu, das Ereignis „Kommentar hinzufügen“ abzuhören. Pushen Sie entsprechend dem Wert des Typs das entsprechende Array. Denken Sie auch daran, hier eine Verbindung zur Datenbank herzustellen. Es gibt zwei Möglichkeiten, Daten zu übertragen. Dabei werden sie je nach Typ in zwei URLs oder eine unterteilt, was vom Design der Tabelle abhängt. Nachdem ich morgen die Tabelle entworfen habe, werde ich eine http-Anfrage hinzufügen, um die Kommentarfunktion abzuschließen.

Es ist das Ende des Semesters. Ich habe große Angst, die Prüfung nicht zu bestehen.

Zusätzlich:

Da es das erste Mal ist, dass ich die Tabellenstruktur der Datenbank selbst entwerfe, ist dies sehr problematisch.
Aktualisieren Sie, dass die korrekte Tabellenstruktur darin bestehen sollte, dass jeder Kommentar eine eigene ID hat, die standardmäßig auf null gesetzt ist. Wenn es sich um einen direkten Kommentar handelt, ist der parentId-Wert null. die parentId ist die ID des Kommentars. Nachdem schließlich jedes Datenelement herausgefunden wurde, wird das Objekt basierend darauf zusammengestellt, ob es eine parentId enthält, und an das Frontend übergeben. Wenn Sie dieses Objekt direkt gruppieren, wird die for-Schleife also dreimal durchgeführt. . . Ich habe vor, den Hash in der Datenstruktur zu verwenden, anstatt so oft die for-Schleife zu verwenden. Beenden Sie dies dieses Wochenende und es wird der nächste Artikel sein.

Aber nachdem ich darüber nachgedacht habe. Wenn Sie nur Hashing verwenden, ist eine Sortierung nach Zeit nicht möglich. Da der Hash basierend auf dem Wert von id%length eingefügt wird, bleibt keine Zeit zum Sortieren. Wenn Sie dieses Objekt direkt basierend auf dem von der Datenbankabfrage zurückgegebenen Array kombinieren, muss die zuvor eingefügte ID vorne stehen, damit eine chronologische Reihenfolge vorliegt. Dieses Datenstrukturproblem ist wirklich nicht einfach.

Empfohlen: „Die neueste Auswahl von 5 vue.js-Video-Tutorials“

Das obige ist der detaillierte Inhalt vonSo verwenden Sie VueJS zum Implementieren der Kommentarfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!