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>
데이터는 모두 루트 구성 요소에 의해 바인딩됩니다. 여기에서는 여러 이벤트도 모니터링됩니다.
bab569c0e0c6db45dde49e2502318ed1에 대해 이야기해 보겠습니다.
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>', props: ['type','name'], 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>', props: ['comment'], 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!