使用nuxt,express,mysql,nginx创建个人博客系列-19
136
2020-01-24 18:37
10 个月前
评论实现
评论实现我们得需要获取用户的名称和邮箱,所以我们使用一个弹框是实现,当用户没登录想要评论时,我们会弹出让用户添加用户名和邮箱的弹框。 如图:
上一章我们有引入了comment和commentList组件,我直接贴出代码让大家参考 目录:components/comment.vue
<template>
<transition name="comment-fade">
<div class="comment-box" @click.self="hideModel">
<transition name="comment-slide">
<div class="comment-center" v-show="show">
<slot></slot>
</div>
</transition>
</div>
</transition>
</template>
<script>
export default {
data(){
return {
show:false
}
},
methods:{
hideModel(){
this.$emit('hideCommentBox')
}
},
mounted(){
this.show=true;
}
}
</script>
目录:components/commentlist.vue
<template>
<ul>
<li v-for="(item,index) in list" :class="['uu'+index]" :key="item+index" v-if="list.length" >
<div class="comment-list-box-main">
<div class="comment-list-box-main-content">{{item.content}}</div>
<div class="clearfix comment-list-box-main-name">
<div>{{item.username}}</div>
<div>{{moment(item.created_at).format('YYYY-MM-DD HH:mm')}}</div>
<div class="comment-reply-btn" v-if="childIndex+1<reply_num" @click="setPid({ev:$event,id:item.id,replyIndex:childIndex+1,orginDataIndex:index})">回复</div>
</div>
</div>
<commentlist :childIndex="childIndex+1" v-if="item.commentList && item.commentList.length && childIndex+1<reply_num" @setpid="setPid" :list="item.commentList" ></commentlist>
</li>
</ul>
</template>
<script>
export default {
name: 'commentlist',
data(){
return {
reply_num:5 //控制评论层级,理论可以无限级,我把他限制到5级评论
}
},
props: {
list: {
type:Array,
default(){
return [];
}
},
childIndex:{
type:Number,
defualt:0
}
},
methods:{
setPid(obj){
// if(obj && obj.ev && obj.ev.target){
let arr = [];
var ali = ($(obj.ev.target).parents('li'))
ali.each((index,item)=>{
arr.push($(item).attr('class').replace('uu',''))
})
this.$emit('setpid',{
ev:obj.ev,
id:obj.id,
orginDataIndex:arr.reverse()
});
// }
},
getParentNode(tar){
let domNode = [];
function getParent(tar){
if(tar.parentNode){
domNode.push(tar.parentNode);
getParent(tar.parentNode)
}
}
getParent(tar);
return domNode;
}
}
}
</script>
评论接口
目录:server/api/articles.js
router.post('/article/addComment',async(req,res,next)=>{
let {articles_id,p_id,content,username,email} = req.body;
let sql = `insert into comments set ?`
let params = {
articles_id,
p_id,
content,
username,
email,
}
let myConnect = await mysql.getConnect();
let comment = await mysql.query(myConnect, sql,params);
await mysql.release(myConnect);
res.send(util.resSuccess({
data:comment
}))
})
上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-18
下一篇-使用nuxt,express,mysql,nginx创建个人博客系列-20