353 lines
13 KiB
Vue
353 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<!-- 引用导航 -->
|
|||
|
|
<Header></Header>
|
|||
|
|
<div style="text-align: left;padding-left: 40px; width: 96%;" class="mblog">
|
|||
|
|
<br>
|
|||
|
|
<h2>{{ blog.title }}</h2>
|
|||
|
|
<br>
|
|||
|
|
<div>
|
|||
|
|
<el-link icon="el-icon-edit">
|
|||
|
|
<!--携带博客ID跳转到编辑页面，对博客进行修改-->
|
|||
|
|
<router-link :to="{ name: 'BlogEdit', params: { blogId: blog.id } }">
|
|||
|
|
编辑
|
|||
|
|
</router-link>
|
|||
|
|
</el-link>
|
|||
|
|
|
|||
|
|
<el-divider direction="vertical"></el-divider>
|
|||
|
|
|
|||
|
|
<el-link type="danger" @click="messageHandel" icon="el-icon-delete">
|
|||
|
|
删除
|
|||
|
|
</el-link>
|
|||
|
|
<el-divider direction="vertical"></el-divider>
|
|||
|
|
|
|||
|
|
<el-button type="text" @click="commentGet()" icon="el-icon-chat-line-round">评论区</el-button>
|
|||
|
|
|
|||
|
|
<el-drawer title="评论区" :visible.sync="commentVisible" width="30%">
|
|||
|
|
<!-- 评论功能 -->
|
|||
|
|
<div>
|
|||
|
|
<el-form :model="commentForm" status-icon :rules="rules" label-width="80px" ref="commentForm">
|
|||
|
|
<el-tag style="font-size: 15px;" v-if="showReply">回复@{{ replyComent.replyName }}
|
|||
|
|
<el-button type="text" @click="replyCancel()" icon="el-icon-close"
|
|||
|
|
size="medium"></el-button>
|
|||
|
|
</el-tag>
|
|||
|
|
|
|||
|
|
<el-form-item label="评论" prop="content">
|
|||
|
|
<el-input type="text" v-model="commentForm.content"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="submitCommentForm()">评论</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
<!-- 评论区展示功能 -->
|
|||
|
|
<div v-for="comment in comments" :key="comment.comment_id">
|
|||
|
|
<div v-if="!comment.parent_id">
|
|||
|
|
<div class="comment-container">
|
|||
|
|
<div class="comment-top">
|
|||
|
|
<el-avatar class="comment-avatar" shape="circle" size="medium"
|
|||
|
|
:src="comment.avatar" />
|
|||
|
|
<el-tag class="comment-username" style="font-size: 17px;">{{ comment.username
|
|||
|
|
}}</el-tag>
|
|||
|
|
<span class="comment-time"> {{ comment.created }}</span>
|
|||
|
|
<!-- 回复评论 -->
|
|||
|
|
<el-button class="reply-button" type="text" icon="el-icon-chat-line-round"
|
|||
|
|
@click="replyVisible(comment)">回复</el-button>
|
|||
|
|
</div>
|
|||
|
|
<span class="comment-content">" {{ comment.content }} "</span>
|
|||
|
|
</div>
|
|||
|
|
<el-divider content-position="center">
|
|||
|
|
<el-button v-if="isClickId !== comment.comment_id" type="text"
|
|||
|
|
@click="viewReplys(comment)">查看回复</el-button>
|
|||
|
|
<el-button v-else type="text" @click="viewReplysCollapse(comment)">收起回复</el-button>
|
|||
|
|
</el-divider>
|
|||
|
|
<!-- 评论回复展示功能 -->
|
|||
|
|
<div v-for="commentReply in commentReplys" :key="commentReply.comment_id">
|
|||
|
|
<div
|
|||
|
|
v-if="(commentReply.parent_id == comment.comment_id) && isClickId === comment.comment_id">
|
|||
|
|
<div class="comment-reply">
|
|||
|
|
<div class="comment-top">
|
|||
|
|
<el-tag class="comment-username" style="font-size: 17px;">{{
|
|||
|
|
commentReply.username }} 回复 @{{
|
|||
|
|
commentReply.parent_name }}</el-tag>
|
|||
|
|
<span class="comment-time"> {{ commentReply.created }}</span>
|
|||
|
|
<el-button class="reply-button" type="text" icon="el-icon-chat-line-round"
|
|||
|
|
@click="replyCommentVisible(commentReply, comment, comments)">回复</el-button>
|
|||
|
|
</div>
|
|||
|
|
<span class="comment-content">" {{ commentReply.content }} "</span>
|
|||
|
|
<br>
|
|||
|
|
<!-- 回复评论 -->
|
|||
|
|
<!-- <el-input v-if="showReplyInput()"></el-input> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-drawer>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-divider></el-divider>
|
|||
|
|
|
|||
|
|
<div class="markdown-body" v-html="blog.content"></div>
|
|||
|
|
<br>
|
|||
|
|
</div>
|
|||
|
|
<br>
|
|||
|
|
<Footer></Footer>
|
|||
|
|
<br>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import axios from 'axios';
|
|||
|
|
//为了让markdown转换的文本更好看，使用这个文件进行渲染
|
|||
|
|
import "github-markdown-css/github-markdown.css"
|
|||
|
|
import Header from "../components/Header.vue";
|
|||
|
|
import Footer from "../components/Footer.vue";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: { Header, Footer },
|
|||
|
|
beforeRouteEnter(to, from, next) {
|
|||
|
|
// 在组件进入之前，将页面滚动到顶部
|
|||
|
|
window.scrollTo(0, 0);
|
|||
|
|
next();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
viewReply: false, //查看回复显示
|
|||
|
|
showReply: false, //回复评论按钮显示
|
|||
|
|
blog: {}, //博客对象
|
|||
|
|
username: '', //用户名
|
|||
|
|
comments: {}, //评论区
|
|||
|
|
commentForm: { //评论表单
|
|||
|
|
id: '',
|
|||
|
|
username: '',
|
|||
|
|
content: '',
|
|||
|
|
created: ''
|
|||
|
|
},
|
|||
|
|
commentVisible: false, //评论区显示
|
|||
|
|
replyComent: {
|
|||
|
|
comment_id: '',
|
|||
|
|
replyName: '',
|
|||
|
|
},
|
|||
|
|
commentReplys: [],
|
|||
|
|
isClickId: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
viewReplys(comment) {
|
|||
|
|
this.isClickId = comment.comment_id
|
|||
|
|
const commentReplyAdd = []
|
|||
|
|
this.comments.forEach((commentReply) => {
|
|||
|
|
if ((commentReply.parent_id === comment.comment_id)) {
|
|||
|
|
commentReplyAdd.push(commentReply);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.commentReplys = commentReplyAdd
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
viewReplysCollapse() {
|
|||
|
|
this.isClickId = ''
|
|||
|
|
},
|
|||
|
|
replyCancel() {
|
|||
|
|
//取消回复
|
|||
|
|
this.showReply = false
|
|||
|
|
this.replyComent.replyName = ''
|
|||
|
|
this.replyComent.comment_id = ''
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
replyVisible(comment) {
|
|||
|
|
this.replyComent.replyName = comment.username
|
|||
|
|
this.replyComent.comment_id = comment.comment_id
|
|||
|
|
console.log("replyComent.comment_id" + this.replyComent.comment_id + "replyComent.replyName" + this.replyComent.replyName)
|
|||
|
|
this.showReply = true
|
|||
|
|
},
|
|||
|
|
replyCommentVisible(commentReply, comment) {
|
|||
|
|
console.log("comment:" + comment + "commentReply:" + commentReply)
|
|||
|
|
this.replyComent.replyName = commentReply.username
|
|||
|
|
this.replyComent.comment_id = comment.comment_id
|
|||
|
|
this.showReply = true
|
|||
|
|
const commentReplyAdd = []
|
|||
|
|
this.comments.forEach((commentReply) => {
|
|||
|
|
if ((commentReply.parent_id === comment.comment_id)) {
|
|||
|
|
commentReplyAdd.push(commentReply);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.commentReplys = commentReplyAdd
|
|||
|
|
//刷新展
|
|||
|
|
},
|
|||
|
|
showReplyInput() {
|
|||
|
|
if (this.showReply) {
|
|||
|
|
return true
|
|||
|
|
} else {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
messageHandel() {
|
|||
|
|
this.$confirm('此操作将永久删除该博客, 是否继续?', '提示', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}).then(() => {
|
|||
|
|
//删除博客
|
|||
|
|
// axios.get('/deleteBlog', {
|
|||
|
|
// params: {
|
|||
|
|
// blogId: this.blog.id
|
|||
|
|
// }
|
|||
|
|
// }).then((res) => {
|
|||
|
|
// console.log(res.data)
|
|||
|
|
// this.$message({
|
|||
|
|
// type: 'success',
|
|||
|
|
// message: '删除成功!'
|
|||
|
|
// });
|
|||
|
|
// //跳转到主页
|
|||
|
|
// this.$router.push('/')
|
|||
|
|
|
|||
|
|
// })
|
|||
|
|
this.$message({
|
|||
|
|
type: 'success',
|
|||
|
|
message: '该功能暂时不对外开发哦！'
|
|||
|
|
});
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.$message({
|
|||
|
|
type: 'info',
|
|||
|
|
message: '已取消删除'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
commentGet() {
|
|||
|
|
this.commentVisible = true
|
|||
|
|
//获取评论区
|
|||
|
|
axios.get('/getComment', {
|
|||
|
|
params: {
|
|||
|
|
blogId: this.blog.id
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
console.log(res.data)
|
|||
|
|
this.comments = res.data
|
|||
|
|
for (let i = 0; i < this.comments.length; i++) {
|
|||
|
|
if (this.comments[i].avatar == null) {
|
|||
|
|
//如果头像为空，设置默认头像
|
|||
|
|
this.comments[i].avatar = 'http://124.71.135.249:8081' + '/images/avatar/default.jpg'
|
|||
|
|
} else {
|
|||
|
|
this.comments[i].avatar = 'http://124.71.135.249:8081' + this.comments[i].avatar
|
|||
|
|
}
|
|||
|
|
console.log("this.comments[i].parent_id" + this.comments[i].parent_id + "this.comments[i].username" + this.comments[i].username)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
submitCommentForm() {
|
|||
|
|
//获取当前时间
|
|||
|
|
var date = new Date();
|
|||
|
|
var year = date.getFullYear();
|
|||
|
|
var month = date.getMonth() + 1;
|
|||
|
|
var day = date.getDate();
|
|||
|
|
var created = year + "-" + month + "-" + day;
|
|||
|
|
|
|||
|
|
this.commentForm.id = this.blog.id
|
|||
|
|
this.commentForm.username = this.username
|
|||
|
|
this.commentForm.created = created
|
|||
|
|
console.log(this.commentForm)
|
|||
|
|
//提交评论
|
|||
|
|
axios.post('/addComment', {
|
|||
|
|
article_id: this.commentForm.id,
|
|||
|
|
parent_id: this.replyComent.comment_id,
|
|||
|
|
parent_name: this.replyComent.replyName,
|
|||
|
|
content: this.commentForm.content,
|
|||
|
|
created: this.commentForm.created
|
|||
|
|
}).then((res) => {
|
|||
|
|
console.log(res.data)
|
|||
|
|
this.$message({
|
|||
|
|
type: 'success',
|
|||
|
|
message: '评论成功!'
|
|||
|
|
});
|
|||
|
|
//刷新评论区
|
|||
|
|
this.commentGet()
|
|||
|
|
//清空评论框
|
|||
|
|
this.commentForm.content = ''
|
|||
|
|
}).catch((err) => {
|
|||
|
|
console.log(err);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
const blogId = this.$route.params.blogId
|
|||
|
|
const that = this
|
|||
|
|
axios.get('/getBlogDetail', {
|
|||
|
|
params: {
|
|||
|
|
blogId: blogId
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
that.blog = res.data
|
|||
|
|
console.log(res.data)
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 将markdown的文本转为正常文本
|
|||
|
|
* */
|
|||
|
|
//拿到markdown渲染资源对象
|
|||
|
|
var markDownIT = require("markdown-it")
|
|||
|
|
var md = new markDownIT() //获取到markdown-it的对象
|
|||
|
|
var result = md.render(that.blog.content) //将markdown文本渲染成html文本
|
|||
|
|
that.blog.content = result //将正常文本赋值给页面显示
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
// this.commentGet(blogId)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.mblog {
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 760px;
|
|||
|
|
margin: 10px 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-container {
|
|||
|
|
margin: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-top {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-avatar {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-username {
|
|||
|
|
padding-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-time {
|
|||
|
|
margin-left: 5px;
|
|||
|
|
font-size: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reply-button {
|
|||
|
|
display: none;
|
|||
|
|
float: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-container:hover .reply-button {
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-content {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-reply {
|
|||
|
|
margin: 20px;
|
|||
|
|
padding-left: 20px
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-reply:hover .reply-button {
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
</style>
|