完成文章的分页

db.sql

@@ -28,7 +28,7 @@ create table article(
 	comment_count int default 0,
 	status tinyint(1) default 1 -- 状态 1标识草稿 2表示已发布 0表示已删除
 );
-INSERT INTO article(title,publish_time,description,content,category) VALUES('测试1','2022-05-10 16:52:09','测试测试','测试测试测试测试','默认');
+INSERT INTO article(title,publish_time,description,content,category,cover) VALUES('测试1','2022-05-10 16:52:09','测试测试','测试测试测试测试','默认','https://www.liulinblog.com/wp-content/uploads/2022/05/1652233699-97014b5f43a5d59-300x200.webp');
 INSERT INTO article(title,publish_time,description,content,category) VALUES('测试2','2022-05-10 16:52:09','测试测试','测试测试测试测试','默认');
 INSERT INTO article(title,publish_time,description,content,category) VALUES('测试3','2022-05-10 16:52:09','测试测试','测试测试测试测试','默认');
 INSERT INTO article(title,publish_time,description,content,category) VALUES('测试4','2022-05-10 16:52:09','测试测试','测试测试测试测试','默认');
@@ -38,6 +38,7 @@ INSERT INTO article(title,publish_time,description,content,category) VALUES('测
 
 
 update article  set cover = 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
+where cover is null;
 -- 评论表: 评论ID、文章ID、评论内容、发布时间、评论者IP
 create table comment
 (

public/index.html

@@ -36,6 +36,7 @@
 
         .container {
             width: 900px;
+            max-width: 90%;
             margin: auto;
         }
 
@@ -109,34 +110,46 @@
                 </div>
             </div>
             <div class="page" style="text-align: center;">
-                <el-pagination layout="prev, pager, next" :page-size="size" :total="total">
+                <el-pagination layout="prev, pager, next" @current-change="onPageChange" :page-size="size" :total="total">
                 </el-pagination>
             </div>
         </div>
     </div>
-    <!-- 引入vue和elementd的库 -->
+    <!-- 引入vue库 -->
     <script src="./vue/dist/vue.js"></script>
     <script src="./element-ui/lib/index.js"></script>
     <script type="module">
         // import Vue from './vue/dist/vue.esm-browser.js'
-        // import ElementUI from './element-ui/lib/index.js'
         // vue 通过 Vue.createApp(选项)创建vue实例
         import request from './modules/request.js'
-        const HomeApp = new Vue({
+
-            el: '#home',
+        const HomeApp = window.xxxx = new Vue({
+            el: '#home', // 设置挂载对象
             data() {
                 return {
-                    articleArray:[],
+                    articleArray: [], // 文章列表数组
-                    total:0,
+                    total: 0, // 总的文章数量
-                    size:5
+                    size: 3, // 每页显示条数
+                    currentPage: 1
                 }
             },
-            mounted(){
+            created() {
-                request('/api/article/web/list?size=2').then(data=>{
+                this.loadList();//页面一加载就获取
+            },
+            methods: {
+                loadList() {
+                    // 使用request方法请求数据
+                    request('/api/article/web/list', { size: this.size, page: this.currentPage }).then(data => {
                         this.articleArray = data.list
                         this.total = data.total;
                         this.size = data.size;
                     })
+                },
+                // 当页码发生变化
+                onPageChange(page){
+                    this.currentPage = page;
+                    this.loadList();
+                }
             }
         })
     </script>

public/modules/request.js

@@ -1,10 +1,10 @@
 /**
  * example: <br>
- *  <p>request('http://localhost:3000/aricle/detail?id=1').then()... </p>
+ *  <p>GET=>request('http://localhost:3000/aricle/detail?id=1').then()... </p>
- *  request('http://localhost:3000/aricle/detail',{id:1}).then()... <br>
+ *  <p>GET=>request('http://localhost:3000/aricle/detail',{id:1}).then()... </p>
  *  request('http://localhost:3000/aricle/detail',{id:1},'POST').then()... <br>
  * @param {string} url 
- * @param {*} params 
+ * @param {any} params 
  * @param {'GET'|'POST'} method 
  * @returns 
  */