From 7d3e42f7037699018be915a924e230d6bda9e1f6 Mon Sep 17 00:00:00 2001
From: laowang <yaclty2@gmail.com>
Date: Thu, 12 May 2022 08:52:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=96=87=E7=AB=A0=E7=9A=84?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db.sql                    |  3 ++-
 public/index.html         | 41 ++++++++++++++++++++++++++-------------
 public/modules/request.js |  6 +++---
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/db.sql b/db.sql
index 774d113..ec2cc82 100644
--- a/db.sql
+++ b/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
 (
diff --git a/public/index.html b/public/index.html
index 13e1929..8e8db84 100644
--- a/public/index.html
+++ b/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:[],
-                    total:0,
-                    size:5
+                    articleArray: [], // 文章列表数组
+                    total: 0, // 总的文章数量
+                    size: 3, // 每页显示条数
+                    currentPage: 1
                 }
             },
-            mounted(){
-                request('/api/article/web/list?size=2').then(data=>{
-                    this.articleArray = data.list
-                    this.total = data.total;
-                    this.size = data.size;
-                })
+            created() {
+                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>
diff --git a/public/modules/request.js b/public/modules/request.js
index 71096af..52b22ad 100644
--- a/public/modules/request.js
+++ b/public/modules/request.js
@@ -1,10 +1,10 @@
 /**
  * example: <br>
- *  <p>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>
+ *  <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 
  */