88 lines
2.9 KiB
HTML
88 lines
2.9 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">我的博客</div>
|
|
<nav class="site-nav">
|
|
<a href="./">首页</a>
|
|
<a href="./login.html">登录</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<div class="main container">
|
|
<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>
|
|
</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 {
|
|
a: {
|
|
"id": 1,
|
|
"title": "",
|
|
"cover": "",
|
|
"publish_time": "",
|
|
"description": "",
|
|
"content": "",
|
|
"category": "",
|
|
"view_count": 0,
|
|
"comment_count": 0,
|
|
"status": 1
|
|
}
|
|
}
|
|
},
|
|
async created() {
|
|
const params = qs.parse(location.search);
|
|
if (!params.id) {
|
|
alert("文章的编号不正确")
|
|
return;
|
|
}
|
|
const id = params.id;
|
|
const articleList = await request('./api/article/web/detail', { id });
|
|
if (articleList.length != 1) {
|
|
alert('文章数据有问题');
|
|
return;
|
|
}
|
|
this.a = articleList[0];
|
|
},
|
|
methods: {
|
|
formatDate(time) {
|
|
return dayjs(time).format('YYYY-MM-DD HH:mm')
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |