161 lines
6.6 KiB
HTML
161 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
|
|
<link rel="stylesheet" href="./assets/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="detail">
|
|
<header>
|
|
<div class="container show-flex">
|
|
<div class="logo"><a href="./">我的博客</a></div>
|
|
<nav class="site-nav">
|
|
<a href="./">首页</a>
|
|
<a href="./login.html">登录</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<div class="main container">
|
|
<div v-if="isError == false" style="display:none" :style="{display:a.id > 0 ?'block':'none'}">
|
|
<h1 id="article-title">{{a.title}}</h1>
|
|
<div id="artilce-info" class="show-flex">
|
|
<div class="category">分类:{{a.category}}</div>
|
|
<div class="time">发布于:{{a.publish_time}}</div>
|
|
<div class="count">
|
|
阅读数({{a.view_count}})
|
|
评论数({{a.comment_count}})
|
|
</div>
|
|
</div>
|
|
<div id="article-content" v-html="a.content"></div>
|
|
<div id="article-comment" style="margin-top: 50px;">
|
|
<h1>所有评论</h1>
|
|
<div class="publish" style="margin: 10px 0;">
|
|
<!-- 发表评论 -->
|
|
<div>
|
|
<el-input type="textarea" v-model="commentContent" :rows="4" placeholder="请发表您的看法" />
|
|
</div>
|
|
<div style="margin-top: 10px;">
|
|
<el-button size="small" type="primary" @click="submitComment" :disabled="commentContent == ''">评论</el-button>
|
|
</div>
|
|
</div>
|
|
<div id="comment-list">
|
|
<!-- 评论列表 -->
|
|
<div class="comment-item" v-for="c in commentList" :key="c.id">
|
|
<div class="content">{{c.content}}</div>
|
|
<div class="info" style="padding:10px 0;font-size:12px;">
|
|
<span>归属地:{{c.address || c.ip}}</span>
|
|
<span style="margin-left: 10px;">评论时间:{{c.publish_time}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="error-notice">
|
|
<el-result icon="info" title="提示" sub-title="加载文章数据异常">
|
|
<template slot="extra">
|
|
<el-button type="primary" round size="medium" @click="back">返回</el-button>
|
|
</template>
|
|
</el-result>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 引入vue库 -->
|
|
<script src="./vue/dist/vue.js"></script>
|
|
<script src="./element-ui/lib/index.js"></script>
|
|
<script src="./modules/dayjs.min.js"></script>
|
|
<script type="module">
|
|
// import Vue from './vue/dist/vue.esm-browser.js'
|
|
// vue 通过 Vue.createApp(选项)创建vue实例
|
|
import request from './modules/request.js'
|
|
import qs from './modules/qs.js'
|
|
|
|
new Vue({
|
|
el: '#detail', // 设置挂载对象
|
|
data() {
|
|
return {
|
|
commentContent: '',
|
|
isError: false,
|
|
a: {
|
|
"id": 0,
|
|
"title": null,
|
|
"cover": "",
|
|
"publish_time": "",
|
|
"description": "",
|
|
"content": "",
|
|
"category": "",
|
|
"view_count": 0,
|
|
"comment_count": 0,
|
|
"status": 1
|
|
},
|
|
// 所有评论的列表
|
|
commentList: []
|
|
}
|
|
},
|
|
async created() {
|
|
const params = qs.parse(location.search); // 解析查询参数
|
|
if (!params.id) {
|
|
this.setTitle()
|
|
this.isError = true;
|
|
return;
|
|
}
|
|
const id = this.a.id = params.id; // 获取并保存文章编号
|
|
await request('./api/article/web/update', { id }) // 更新阅读数量
|
|
const articleList = await request('./api/article/web/detail', { id }); // 查询详情
|
|
if (articleList.length != 1) {
|
|
this.isError = true;
|
|
this.setTitle()
|
|
return;
|
|
}
|
|
this.a = articleList[0];
|
|
this.setTitle()
|
|
// 加载评论
|
|
this.loadCommentList()
|
|
|
|
},
|
|
methods: {
|
|
async submitComment(){
|
|
if(!this.commentContent){
|
|
this.$message.error('请先填写评论内容')
|
|
// this.$alert('请先填写评论内容','提示')
|
|
return false;
|
|
}
|
|
const ret = await request('./api/comment/web/add',{
|
|
article_id:this.a.id,
|
|
content:this.commentContent
|
|
},'POST')
|
|
|
|
if(ret.status){
|
|
this.$message.success('发表评论成功')
|
|
this.a.comment_count ++; // 直接对评论数+1
|
|
this.loadCommentList()
|
|
// this.commentContent = '' // 将评论内容清空
|
|
}else{
|
|
this.$message.error(ret.message)
|
|
}
|
|
},
|
|
async loadCommentList() {
|
|
const id = this.a.id;
|
|
const list = await request('./api/comment/web/query', { id }) // 获取所有的评论列表
|
|
this.commentList = list;
|
|
},
|
|
back() {
|
|
history.back()
|
|
},
|
|
setTitle(title = null) {
|
|
document.title = this.a.title || '加载数据失败'
|
|
},
|
|
formatDate(time) {
|
|
return dayjs(time).format('YYYY-MM-DD HH:mm')
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |