From abbc35e9e72f1bcd2904a383cdf6ab3232cb2173 Mon Sep 17 00:00:00 2001
From: MoYi <1545929126@qq.com>
Date: Mon, 20 Nov 2023 15:47:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=8E=B7=E5=8F=96=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E6=96=87=E4=BB=B6API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/Requester.ts    |  12 ++++-
 src/views/AppMobile.vue | 113 +++++++++++++++++++++++++++-------------
 2 files changed, 88 insertions(+), 37 deletions(-)

diff --git a/src/api/Requester.ts b/src/api/Requester.ts
index 2cbfc96..e33fce5 100644
--- a/src/api/Requester.ts
+++ b/src/api/Requester.ts
@@ -2,8 +2,9 @@ import axios from 'axios'
 import {md5Hex} from "./CryptoUtils";
 import {User} from "../entities/User.ts";
 import {Auth} from "../entities/Auth.ts";
+import {UnwrapRef} from "vue";
 
-export const baseUrl = 'http://localhost:8081';
+export const baseUrl = 'https://localhost:8081';
 
 export interface Result<T> {
     data: T;
@@ -17,6 +18,11 @@ export interface Page<T> {
     total: number;
 }
 
+export interface File {
+    page: number;
+    num: number;
+}
+
 export type PageResult<T> = Result<Page<T>>
 const instance = axios.create({
     baseURL: baseUrl,
@@ -54,4 +60,8 @@ export const register = (username: string, password: string, auth: Auth, verifyC
         auth: auth,
         verifyCode: verifyCode,
     })
+}
+
+export const getAllFiles = (page: UnwrapRef<number>, num: UnwrapRef<number>) => {
+    return instance.get<PageResult<File>>(`/api/file/getAll?page=${page}&num=${num}`);
 }
\ No newline at end of file
diff --git a/src/views/AppMobile.vue b/src/views/AppMobile.vue
index 26743c7..93b5f9f 100644
--- a/src/views/AppMobile.vue
+++ b/src/views/AppMobile.vue
@@ -30,6 +30,7 @@
         <!-- 登录弹窗 -->
         <div class="login-content">
           <h2>登录/注册</h2>
+          <el-button link type="primary" size="small" @click="fetchFiles">获取文件列表 - 测试</el-button>
           <p>欢迎来到文件分享站</p>
           <label for="username">用户名</label>
           <van-field id="username" v-model="UserName" center placeholder="请输入用户名"/>
@@ -47,7 +48,7 @@
       </van-popup>
     </div>
     <div class="FileLiteBox">
-      <el-table :data="TableDataFile" border style="width: 100%">
+      <el-table :data="currentData" border style="width: 100%">
         <el-table-column prop="id" label="ID" width="40"/>
         <el-table-column prop="name" label="文件名" width="200"/>
         <el-table-column prop="type" label="文件格式" width="180"/>
@@ -55,34 +56,39 @@
         <el-table-column prop="uploaderName" label="上传者" width="100"/>
         <el-table-column fixed="right" label="操作" width="100">
           <template #default="scope">
+            <!-- 列表操作按钮 -->
             <el-button link type="primary" size="small" @click="handleShowDetail();">
-              <!-- scope.row.id, scope.row.fileName  是handleShowDetail的传参 -->
+              <!-- 显示详细信息按钮 -->
               详细
             </el-button>
             <el-button link type="primary" size="small" @click="handleDownload();">下载</el-button>
+            <!-- 下载按钮 -->
             <el-button link type="primary" size="small" @click="handleDelete();" v-if="isAdmin">删除
-              <!-- scope.row.id  是handleDelete和handleDownload的传参  -->
+              <!-- 删除按钮，仅管理员可见 -->
             </el-button>
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination
-          background
-          layout="prev, pager, next"
-          :total="total"
-          v-model:current-page="currentPage"
-          :page-size="pageSize"
-          @update:current-page="handleCurrentChange"
-      />
+      <div class="pagination-container">
+        <!-- 分页控件容器 -->
+        <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="totalItems"
+            layout="prev, pager, next">
+        </el-pagination>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref} from "vue";
+import {ref, computed} from "vue";
 import {ElMessage} from "element-plus";
-import 'element-plus/es/components/message/style/css'
-import {login, register, Result} from '../api/Requester'
+import 'element-plus/es/components/message/style/css';
+import {login, register, Result, getAllFiles} from '../api/Requester';
 import {User} from "../entities/User.ts";
 import {AxiosResponse} from "axios";
 import {Auth} from "../entities/Auth.ts";
@@ -91,11 +97,10 @@ const InputFileName = ref('');
 const UserAvatarLoginShow = ref(false);
 const UserName = ref();
 const UserPassword = ref();
-const currentPage = ref(1); // 当前页码
-const pageSize = ref(5); // 每页显示的记录数
-const total = ref(99999); // 总记录数，这里可以根据你的需求动态获取
 const isAdmin = ref(false); // 是否是管理员
-
+// 分页
+const currentPage = ref(1);
+const pageSize = ref(5);
 const TableDataFile = [
   {
     "downloadCount": 0,
@@ -198,11 +203,29 @@ const TableDataFile = [
     "uploaderName": "wzp"
   }
 ]
-const handleCurrentChange = (newPage: number) => {
-  currentPage.value = newPage;
-  // 此处添加获取数据的逻辑，例如调用 API
-};
+const totalItems = ref(TableDataFile.length);
 
+const fetchFiles = () => {
+  const currentPage = ref(1);
+  const pageSize = ref(15); // 设置每页数据量为15
+  // res.data.data.date.length 长度
+  // res.data.data.date[x] 文件,从0开始
+  // res.data.data.date[0].downloadCount 下载次数
+  // res.data.data.date[0].hash 文件hash
+  // res.data.data.date[0].id 文件id
+  // res.data.data.date[0].name 文件名
+  // res.data.data.date[0].size 文件大小
+  // res.data.data.date[0].type 文件类型
+  // res.data.data.date[0].uploadTime 上传时间
+  // res.data.data.data[0].uploaderName 上传者
+  // res.data.data.total 总文件
+  // res.data.message 返回消息
+  // res.data.status 状态码
+  // res.data.timestamp 访问时间
+  getAllFiles(currentPage.value, pageSize.value).then((res) => {
+    console.log(res.data);
+  })
+};
 
 const toggleUserLogin = () => {
   UserAvatarLoginShow.value = !UserAvatarLoginShow.value;
@@ -235,7 +258,7 @@ const UserEnroll = () => {
     return;
   }
   register(UserName.value, UserPassword.value, Auth.user).then((res) => {
-    switch (res.data.status){
+    switch (res.data.status) {
       case 251:
         ElMessage.error("邀请码错误！");
         break;
@@ -244,7 +267,8 @@ const UserEnroll = () => {
         break;
       default:
         ElMessage.error("无法注册！");
-    }});
+    }
+  });
 }
 
 const handleShowDetail = () => {
@@ -258,6 +282,20 @@ const handleDownload = () => {
 const handleDelete = () => {
   console.log("delete");
 }
+
+const currentData = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value;
+  const end = start + pageSize.value;
+  return TableDataFile.slice(start, end);
+});
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+};
+
+const handleSizeChange = (val: number) => {
+  pageSize.value = val;
+};
+
 </script>
 
 <style scoped>
@@ -265,14 +303,12 @@ const handleDelete = () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: #f0f0f0;
-  /* 头部样式，包括布局和背景颜色 */
+  background-color: #f0f0f0; /* 头部样式，包括布局和背景颜色 */
 }
 
 .InputFileName {
   flex: 1;
-  margin-right: 10px;
-  /* 搜索框样式 */
+  margin-right: 10px; /* 搜索框样式 */
 }
 
 .UserAvatar {
@@ -286,8 +322,7 @@ const handleDelete = () => {
 .UserLoginBox {
   background-color: #fff;
   border-radius: 10px;
-  padding: 20px;
-  /* 登录弹窗样式 */
+  padding: 20px; /* 登录弹窗样式 */
 }
 
 .login-content h2 {
@@ -300,23 +335,29 @@ const handleDelete = () => {
 
 .login-content label {
   display: block;
-  margin-bottom: 5px;
-  /* 登录弹窗内部文本样式 */
+  margin-bottom: 5px; /* 登录弹窗内部文本样式 */
 }
 
 .actions {
   display: flex;
   justify-content: space-around;
-  margin-top: 20px;
-  /* 按钮区域样式 */
+  margin-top: 20px; /* 按钮区域样式 */
 }
 
 .UserLoginButton {
-  width: 120px;
-  /* 登录注册按钮样式 */
+  width: 120px; /* 登录注册按钮样式 */
 }
 
 .FileLiteBox {
   margin-top: 10px;
 }
+
+.pagination-container {
+  display: flex; /* 使用Flex布局 */
+  flex-direction: column; /* 垂直方向排列子元素 */
+  justify-content: center; /* 水平居中对齐 */
+  align-items: center; /* 垂直居中对齐 */
+  text-align: center; /* 文本水平居中对齐 */
+  margin-top: 10px;
+}
 </style>
\ No newline at end of file