99 lines
3.7 KiB
HTML
99 lines
3.7 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="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 :href="'detail.html?id=' + a.id">{{a.title}}</a>
|
|
</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">
|
|
Vue.config.productionTip = false;
|
|
Vue.config.silent = true;
|
|
// import Vue from './vue/dist/vue.esm-browser.js'
|
|
// vue 通过 Vue.createApp(选项)创建vue实例
|
|
import request from './modules/request.js'
|
|
|
|
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> |