vuejsを使ってコメント機能を実装する方法

vuejs を使用してコメント機能を実装する方法: 1.article-content コンポーネントを使用して obj をバインドします; 2.commmt-content コンポーネントを通じてコメント機能を実装します。

この記事の動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

#vuejs を使用してコメント機能を実装する方法

#Vue.js は記事コメント機能とコメント返信機能を実装します:

このページとコメント欄をvueでレンダリングするのにjadeを使いたかったのですが、よく考えたら面倒だったので、結局vueコンポーネントを丸ごと使って完成させることにしました。

最初にオンライン デモに移動します: http://jsbin.com/ceqifo/1/edit?js,output

次に、レンダリングに移動します

直接コメントすることができます。他の人のコメントをクリックすると、他の人のコメントに返信できます。

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>

データはすべてルート コンポーネントによってバインドされます。いくつかのイベントもここで監視されます。

44b687f00f92bda7782bf55d7c7bfa4f について説明します。

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 は、他の人のコメントをクリックすると、「xxx に返信します」というプロンプト ボックスが表示されることを意味します。これは、コンポーネント間の通信があり、2 つのコンポーネントが親子コンポーネントではないためです。兄弟コンポーネントなので通信を切断しました。親コンポーネントのプロパティで通信を実装します。

テキスト ボックスのコンテンツは v-model と双方向にバインドされています。[OK] をクリックすると、addComment イベントがトリガーされ、テキスト コンテンツが親コンポーネントに渡され、親コンポーネントがイベントをリッスンします。 。

commemt-content コンポーネント – コメント コンテンツ

最初に json 形式を決定します

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

次に、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);
 }
 }
});

コンテンツがない場合は、「まだコメントがありません。最初のコメントを投稿します!」と表示されます。コンテンツがある場合は、トラバースを開始します。コメントをクリックするときにコメントの数を知る必要があるため、各コメントを v-bind:index="index"

2 番目のコメントにバインドする必要があります。応答配列を走査し、バインディングをバインドします。コンテンツをクリックしても1段目のコメントの一番下に追加されてしまうため、2つのクリックイベントを同じイベントにバインドしました。渡される名前が異なるだけで、その背後にあるインデックスは第 1 レベルのコメントのインデックスです。

changeCommenter イベントによって変更がトリガーされ、親コンポーネントがそれをリッスンして対応する動作を実行します。

親コンポーネント

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

データがあります。 。 。名前をつけるのは本当に難しいです。 。 。 commenter は現在のログイン名であり、セッションから取得されます。type はコメント作成者であるか他の人のコメントであるかを確認します。oldComment はコメント投稿者の名前 (実際に保存されるときは ID である必要があります)。chooseIndex はクリックされたものです。コメントのインデックス。

canelCommit はコメントキャンセルイベントを監視するもので、他の人のコメントをクリックした後、突然コメント作成者を変更したい場合に使用します。したがって、set type=0;

changCommer は、他の人がコメントをクリックしてコメントに返信しようとしているときを監視します。つまり、type=1.

addComment はコメント追加イベントをリッスンすることになります。 type の値に従って、対応する配列をプッシュします。ここでデータベースに接続することも忘れないでください。データの転送方法は 2 つあり、テーブルの設計に応じて 2 つの URL またはタイプに応じて 1 つの URL に分けられます。明日テーブルを設計したら、http リクエストを追加してコメント機能を完成させます。

もう学期末ですね。試験に落ちたら本当に怖いです。

追記:

データベースのテーブル構造を自分で設計するのは初めてなので、非常に難しいです。

更新、正しいテーブル構造では、各コメントが独自の ID を持つ必要があります。デフォルトで null に設定されるparentId 属性があります。それが直接コメントの場合、parentId 値は null です。他の人のコメントへの返信の場合、parentId 値は null です。コメントの場合、parentId はそのコメントの ID です。最終的に各データを見つけた後、その中にparentIdがあるかどうかに基づいてobjが組み立てられ、フロントエンドに渡されます。このobjを直接グループ化するとforループが3回になりますので。 。 。 for ループを何度も使用する代わりに、データ構造でハッシュを使用する予定です。今週末にこれを終わらせて、次の記事になります。

しかし、よく考えてみると。ハッシュのみを使用する場合、時間に基づいて並べ替えることはできません。ハッシュは id%length の値に基づいて挿入されるため、並べ替える時間はありません。データベースへのクエリによって返された配列に基づいてこの obj を直接結合する場合、前に挿入された ID が最初になる必要があるため、時間順序が存在します。このデータ構造の問題は実際には単純ではありません。

推奨: 「

最新の 5 つの vue.js ビデオ チュートリアル セレクション

」

以上がvuejsを使ってコメント機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。