Comment utiliser vuejs pour implémenter la fonction de commentaire

Comment utiliser vuejs pour implémenter la fonction de commentaire : 1. Utilisez le composant article-content et liez un obj 2. Implémentez la fonction de commentaire via le composant commemt-content.

L'environnement d'exploitation de cet article : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Comment utiliser vuejs pour implémenter la fonction de commentaire ?

Vue.js implémente les fonctions de commentaire d'article et de réponse aux commentaires :

Je voulais à l'origine utiliser jade pour rendre cette page et utiliser vue pour la partie commentaire, mais après y avoir réfléchi, j'ai trouvé cela gênant. En fin de compte, utilisons les composants vue pour y parvenir.
Allez d'abord sur la démo en ligne : http://jsbin.com/ceqifo/1/edit?js,output

Ensuite allez sur les rendus

Vous pouvez commenter directement, cliquez sur les commentaires des autres pour répondre aux commentaires des autres.

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>

Les données sont toutes liées par le composant racine. Plusieurs événements y sont également surveillés.

16a1d3f70f6525c7383e3bd51743dd3f, le composant de la zone de texte.

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 = "";
 }
 }
});

type est que si vous cliquez sur le commentaire de quelqu'un d'autre, une boîte de dialogue "Vous répondez à xxx" s'affichera car la communication s'étend sur plusieurs composants et les deux composants ne sont pas des composants parent-enfant mais des composants frères. J'ai accroché leur communication dans le composant parent. La communication est implémentée sur un attribut de .

Le contenu de la zone de texte est lié dans les deux sens avec un modèle en V. Si vous cliquez sur OK, un événement addComment est déclenché et le contenu du texte est transmis au composant parent, qui écoutera l'événement.

composant commemt-content – ​​​​comment content

Déterminez d'abord le format json

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

Regardez ensuite le composant commemt-content

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);
 }
 }
});

S'il n'y a pas de contenu, il affichera « Pas encore de commentaires, je le ferai postez le premier commentaire ! S'il y a du contenu, commencez à parcourir. Parce qu'il faut connaître le nombre de commentaires en cliquant dessus, chaque commentaire doit être lié à un v-bind:index="index"

Quand il s'agit des commentaires secondaires, il faut quand même parcourir le tableau de réponse et lier la reliure. Parce que même si l'on clique sur le contenu, il est ajouté au bas du commentaire de premier niveau, j'ai donc lié les deux événements de clic au même événement. C'est juste que les noms transmis sont différents. L'index derrière eux est l'index des commentaires de premier niveau.

L'événement changeCommenter déclenche le changement, et le composant parent écoute et exécute le comportement correspondant.

Composant parent

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;
 }
 }
})

données là-bas. . . C’est vraiment difficile à nommer. . . commenter est le nom de connexion actuel, qui sera obtenu à partir de la session ; le type consiste à voir s'il s'agit du commentaire de l'auteur du commentaire ou du commentaire de quelqu'un d'autre ; oldComment est le nom du commentateur (il doit s'agir de l'identifiant lorsqu'il est réellement stocké). cliqué L'index des commentaires.

canelCommit sert à surveiller l'événement d'annulation du commentaire. Il est utilisé ici si je clique sur le commentaire de quelqu'un d'autre mais du coup je veux changer l'auteur du commentaire. Définissez donc type=0 ;

changCommmer surveille lorsque quelqu'un clique sur un commentaire et souhaite répondre au commentaire. Autrement dit, type=1.

addComment consiste à écouter l'événement d'ajout de commentaire. Selon la valeur du type, poussez le tableau correspondant. Pensez également à vous connecter à la base de données ici. Il existe deux manières de transférer des données. Ici, elles sont divisées en deux URL ou une selon le type, qui dépend de la conception du tableau. Après avoir conçu le tableau demain, j'ajouterai une requête http pour compléter cette fonction de commentaire.

C'est la fin du trimestre. J'ai vraiment peur d'échouer à l'examen.

Ajouter :

Comme c'est la première fois que je conçois moi-même la structure des tables de la base de données, c'est très problématique. Mise à jour, la structure de table correcte devrait être que chaque commentaire ait son propre identifiant. Il existe un attribut parentId qui est par défaut nul S'il s'agit d'un commentaire direct, la valeur parentId est nulle. S'il s'agit d'une réponse au commentaire de quelqu'un d'autre, la valeur parentId est nulle. le parentId est celui-là. L'identifiant du commentaire. Après avoir finalement découvert chaque élément de données, l'obj est assemblé en fonction de la présence ou non d'un parentId, etc., et transmis au front-end. Si vous regroupez directement cet obj, la boucle for sera 3 fois, donc. . . Je prévois d'utiliser le hachage dans la structure de données au lieu d'utiliser la boucle for autant de fois. Terminez cela ce week-end et ce sera le prochain article.

Mais après j'y ai réfléchi. Si vous utilisez uniquement le hachage, vous ne pouvez pas trier en fonction du temps. Étant donné que le hachage est inséré en fonction de la valeur de id%length, vous n'avez pas le temps de trier. Si vous combinez cet obj directement en fonction du tableau renvoyé en interrogeant la base de données, l'identifiant inséré précédemment doit être au début, il y a donc un ordre temporel. Ce problème de structure de données n’est vraiment pas simple.

Recommandé : "

La dernière sélection de 5 didacticiels vidéo vue.js

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!