189 lines
5.2 KiB
HTML
189 lines
5.2 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">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.show-flex {
|
|
|
|
display: flex;
|
|
}
|
|
|
|
header {
|
|
background-color: black;
|
|
color: #fff;
|
|
line-height: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 30px;
|
|
flex: 1;
|
|
}
|
|
|
|
.site-nav {
|
|
text-align: right;
|
|
}
|
|
|
|
.site-nav a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
padding: 0 20px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.site-nav a:hover {
|
|
color: #333;
|
|
background-color: aqua;
|
|
}
|
|
|
|
.container {
|
|
width: 900px;
|
|
max-width: 90%;
|
|
margin: auto;
|
|
}
|
|
|
|
.main {
|
|
margin: 30px auto;
|
|
}
|
|
|
|
.article-item {
|
|
margin-bottom: 30px;
|
|
border-bottom: dashed 1px #ccc;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.article-item .image img {
|
|
width: 100px;
|
|
height: 100px;
|
|
display: block;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.article-item .info {
|
|
flex: 1;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.info .title {
|
|
height: 30px;
|
|
}
|
|
|
|
.info .desc {
|
|
color: #666;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.info .ext {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: right;
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 200px;
|
|
}
|
|
|
|
.search-input .el-input__inner {
|
|
border-radius: 50px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="home">
|
|
<header>
|
|
<div class="container show-flex">
|
|
<div class="logo">我的博客</div>
|
|
<div class="search-input">
|
|
<el-input size="small" placeholder="请输入搜索关键字" prefix-icon="el-icon-search"
|
|
clearable v-model="search" @change="loadList" />
|
|
</div>
|
|
<nav class="site-nav">
|
|
<a href="./">首页</a>
|
|
<a href="./login.html">登录</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<div class="main container">
|
|
<div class="show-flex article-item" v-for="(a,index) in articleArray" :key="index">
|
|
<div class="image">
|
|
<img :src="a.cover">
|
|
</div>
|
|
<div class="info">
|
|
<h3 class="title">{{a.title}}</h3>
|
|
<p class="desc">{{a.description}}</p>
|
|
<div class="ext">
|
|
<span>发布于:{{formatDate(a.publish_time)}}</span>
|
|
<span>阅读({{a.view_count}})</span>
|
|
<span>评论({{a.comment_count}})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page" style="text-align: center;">
|
|
<el-pagination layout="prev, pager, next" @current-change="onPageChange" :page-size="size"
|
|
:total="total">
|
|
</el-pagination>
|
|
</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'
|
|
|
|
const HomeApp = window.xxxx = new Vue({
|
|
el: '#home', // 设置挂载对象
|
|
data() {
|
|
return {
|
|
articleArray: [], // 文章列表数组
|
|
total: 0, // 总的文章数量
|
|
size: 3, // 每页显示条数
|
|
currentPage: 1,
|
|
search: ''
|
|
}
|
|
},
|
|
created() {
|
|
this.loadList();//页面一加载就获取
|
|
},
|
|
methods: {
|
|
formatDate(time){
|
|
return dayjs(time).format('YYYY-MM-DD HH:mm')
|
|
},
|
|
loadList() {
|
|
// 使用request方法请求数据
|
|
request('/api/article/web/list', { size: this.size, page: this.currentPage,search:this.search }).then(data => {
|
|
this.articleArray = data.list
|
|
this.total = data.total;
|
|
this.size = data.size;
|
|
})
|
|
},
|
|
// 当页码发生变化
|
|
onPageChange(page) {
|
|
this.currentPage = page; // 设置当前页码
|
|
this.loadList();
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |