vuejs를 사용하여 주석 기능을 구현하는 방법

vuejs를 사용하여 댓글 기능을 구현하는 방법: 1. article-content 구성 요소를 사용하고 obj를 바인딩합니다. 2. commemt-content 구성 요소를 통해 댓글 기능을 구현합니다.

이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vuejs를 사용하여 댓글 기능을 구현하는 방법은 무엇입니까?

Vue.js는 기사 댓글 및 답글 댓글 기능을 구현합니다.

원래는 jade를 사용하여 이 페이지를 렌더링하고 댓글 부분에 vue를 사용하고 싶었습니다. 그런데 곰곰이 생각해 보니 번거로웠고 결국에는 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>

데이터는 모두 루트 구성 요소에 의해 바인딩됩니다. 여기에서는 여러 이벤트도 모니터링됩니다.

그럼 먼저 좀 더 간단한 것, 텍스트 상자의 컴포넌트인 에 대해 이야기해 보겠습니다.

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

형은 다른 사람의 댓글을 클릭하면 "xxx에 답장합니다"라는 프롬프트 상자가 표시되는 것입니다. 이는 통신이 여러 구성 요소에 걸쳐 있고 두 구성 요소가 상위-하위 구성 요소가 아니라 형제 구성 요소이기 때문입니다. 상위 구성 요소에서 통신을 중단했습니다. 통신은 .

텍스트 상자의 콘텐츠는 v-model과 양방향으로 바인딩됩니다. 확인을 클릭하면 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"

에 바인딩되어야 합니다. 보조 댓글의 경우에도 댓글 배열을 순회해야 합니다. 바인딩을 바인딩합니다. 내용을 클릭해도 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는 세션에서 검색되는 현재 로그인 이름입니다. 유형은 댓글 작성자인지 다른 사람의 댓글인지 확인하는 데 사용됩니다. oldComment는 댓글 작성자의 이름입니다(실제로 저장될 때 ID여야 함). 클릭한 댓글의 인덱스입니다.

canelCommit은 댓글 취소 이벤트를 모니터링하는 것인데, 다른 사람의 댓글을 클릭했을 때 사용하는데 갑자기 댓글 작성자를 바꾸고 싶어요. 따라서 set type=0;

changCommmer는 누군가가 댓글을 클릭하고 댓글에 답글을 달고 싶어하는 시점을 모니터링합니다. 즉, type=1.

addComment는 댓글 추가 이벤트를 수신하는 것입니다. 유형의 값에 따라 해당 배열을 푸시합니다. 또한 여기에서 데이터베이스에 연결하는 것을 잊지 마십시오. 데이터를 전송하는 방법에는 두 가지가 있는데, 여기서는 테이블의 디자인에 따라 유형에 따라 두 개의 URL 또는 하나의 URL로 구분됩니다. 내일 테이블을 디자인한 후 이 주석 기능을 완료하기 위해 http 요청을 추가하겠습니다.

학기말이에요. 나는 시험에 실패할까봐 정말 두렵다.

추가하려면:

데이터베이스의 테이블 구조를 직접 디자인하는 것은 처음이라 문제가 많습니다.
업데이트하세요. 올바른 테이블 구조는 각 댓글에 고유한 ID가 있어야 합니다. 직접 댓글인 경우 parentId 값은 null입니다. parentId는 댓글의 ID입니다. 최종적으로 각 데이터 조각을 알아낸 후, parentId가 있는지 여부 등에 따라 obj를 조립하여 프런트엔드에 전달합니다. 이 obj를 직접 그룹화하면 for 루프가 3번이 됩니다. . . for 루프를 여러 번 사용하는 대신 데이터 구조에서 해시를 사용할 계획입니다. 이번 주말에 끝내세요. 그러면 다음 기사가 될 것입니다.

근데 곰곰이 생각해 보니. 해싱만 사용하는 경우 시간 기준으로 정렬할 수 없습니다. id%length 값을 기준으로 해시가 삽입되기 때문에 정렬할 시간이 없습니다. 데이터베이스를 쿼리하여 반환된 배열을 기반으로 이 obj를 직접 결합하는 경우 앞서 삽입한 id가 맨 앞에 있어야 하므로 시간 순서가 있습니다. 이 데이터 구조 문제는 실제로 간단하지 않습니다.

추천: "5개의 vue.js 비디오 튜토리얼 중 최신 선택"

위 내용은 vuejs를 사용하여 주석 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!