362 lines
14 KiB
Vue
362 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 引用导航 -->
|
||
<Header></Header>
|
||
<div style="text-align: left;padding-left: 40px; width: 96%;" class="mblog">
|
||
<br>
|
||
<div>
|
||
<h2>{{ blog.title }}</h2>
|
||
<span style="font-size: 13px;">发布时间: {{ formatDate(blog.created) }}</span>
|
||
</div>
|
||
<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-avatar class="comment-avatar" shape="circle" size="medium"
|
||
:src="commentReply.avatar" />
|
||
<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: {
|
||
formatDate(dateString) {
|
||
const options = { year: 'numeric', month: 'long', day: 'numeric' };
|
||
return new Date(dateString).toLocaleString('zh-CN', options);
|
||
},
|
||
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('/comment/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 == '') {
|
||
//如果头像为空，设置默认头像
|
||
this.comments[i].avatar = 'http://62.234.217.137:8088' + '/images/avatar/default.jpg'
|
||
} else {
|
||
this.comments[i].avatar = 'http://62.234.217.137:8088' + 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('/comment/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('/blog/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> |