From 8e492ee5aefa5294beec02f3b6e474678ce7e084 Mon Sep 17 00:00:00 2001
From: MoYi <1545929126@qq.com>
Date: Mon, 20 Nov 2023 18:09:10 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8E=B7=E5=8F=96=E6=96=87=E4=BB=B6API?=
 =?UTF-8?q?=E6=8C=82=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/Requester.ts    |  19 ++-
 src/entities/File.ts    |  10 ++
 src/style.css           |   3 -
 src/views/AppMobile.vue | 254 +++++++++++-----------------------------
 4 files changed, 87 insertions(+), 199 deletions(-)
 create mode 100644 src/entities/File.ts

diff --git a/src/api/Requester.ts b/src/api/Requester.ts
index e33fce5..91cc23f 100644
--- a/src/api/Requester.ts
+++ b/src/api/Requester.ts
@@ -1,10 +1,10 @@
 import axios from 'axios'
 import {md5Hex} from "./CryptoUtils";
-import {User} from "../entities/User.ts";
-import {Auth} from "../entities/Auth.ts";
-import {UnwrapRef} from "vue";
+import {User} from "../entities/User";
+import {Auth} from "../entities/Auth";
+import {File} from "../entities/File";
 
-export const baseUrl = 'https://localhost:8081';
+export const baseUrl = 'http://localhost:8081';
 
 export interface Result<T> {
     data: T;
@@ -14,15 +14,10 @@ export interface Result<T> {
 }
 
 export interface Page<T> {
-    data: T[];
+    data: Array<T>;
     total: number;
 }
 
-export interface File {
-    page: number;
-    num: number;
-}
-
 export type PageResult<T> = Result<Page<T>>
 const instance = axios.create({
     baseURL: baseUrl,
@@ -62,6 +57,6 @@ export const register = (username: string, password: string, auth: Auth, verifyC
     })
 }
 
-export const getAllFiles = (page: UnwrapRef<number>, num: UnwrapRef<number>) => {
-    return instance.get<PageResult<File>>(`/api/file/getAll?page=${page}&num=${num}`);
+export const getAllFiles = (page: number, num: number) => {
+    return instance.get<PageResult<File>>("/api/file/getAll", {params: {num, page}});
 }
\ No newline at end of file
diff --git a/src/entities/File.ts b/src/entities/File.ts
new file mode 100644
index 0000000..8db8964
--- /dev/null
+++ b/src/entities/File.ts
@@ -0,0 +1,10 @@
+export interface File {
+    downloadCount: number;
+    hash: string;
+    id: number;
+    name: string;
+    size: number;
+    type: string;
+    uploadTime: string;
+    uploaderName: string;
+}
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 6e1b86e..e69de29 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +0,0 @@
-:root {
-    background-color: #242424;
-}
\ No newline at end of file
diff --git a/src/views/AppMobile.vue b/src/views/AppMobile.vue
index 93b5f9f..d425bd8 100644
--- a/src/views/AppMobile.vue
+++ b/src/views/AppMobile.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="MobileHome">
     <!-- 页面主体部分 -->
-    <div class="Head">
+    <div class="head">
       <!-- 头部区域 -->
-      <van-cell-group inset class="InputFileName">
+      <van-cell-group inset class="inputFileName">
         <!-- 搜索框区域 -->
-        <van-field v-model="InputFileName" center clearable placeholder="请输入文件名称">
+        <van-field v-model="inputFileName" center clearable placeholder="请输入文件名称">
           <!-- 文件名输入框 -->
           <template #button>
             <!-- 搜索按钮 -->
@@ -14,7 +14,7 @@
         </van-field>
       </van-cell-group>
 
-      <van-image class="UserAvatar"
+      <van-image class="userAvatar"
                  width="50"
                  height="50"
                  src="src/assets/UserAvatar.jpg"
@@ -23,33 +23,32 @@
       <!-- 用户头像 -->
 
       <van-popup
-          v-model:show="UserAvatarLoginShow"
+          v-model:show="userAvatarLoginShow"
           round
           position="top"
-          class="UserLoginBox">
+          class="userLoginBox">
         <!-- 登录弹窗 -->
         <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="请输入用户名"/>
+          <label for="userName">用户名</label>
+          <van-field id="userName" v-model="userName" center placeholder="请输入用户名"/>
           <!-- 用户名输入框 -->
           <label for="password">密码</label>
-          <van-field id="password" v-model="UserPassword" center type="password" placeholder="请输入用户密码"/>
+          <van-field id="password" v-model="userPassword" center type="password" placeholder="请输入用户密码"/>
           <!-- 密码输入框 -->
           <div class="actions">
-            <van-button class="UserLoginButton" @click="UserLogin" type="primary">登录</van-button>
+            <van-button class="userLoginButton" @click="userLogin" type="primary">登录</van-button>
             <!-- 登录按钮 -->
-            <van-button class="UserLoginButton" @click="UserEnroll" type="primary">注册</van-button>
+            <van-button class="userLoginButton" @click="userEnroll" type="primary">注册</van-button>
             <!-- 注册按钮 -->
           </div>
         </div>
       </van-popup>
     </div>
-    <div class="FileLiteBox">
-      <el-table :data="currentData" border style="width: 100%">
-        <el-table-column prop="id" label="ID" width="40"/>
+    <div class="fileLiteBox">
+      <el-table :data="nowFileData" border style="width: 100%">
+        <el-table-column prop="id" label="ID" width="60"/>
         <el-table-column prop="name" label="文件名" width="200"/>
         <el-table-column prop="type" label="文件格式" width="180"/>
         <el-table-column prop="size" label="文件大小" width="100"/>
@@ -72,11 +71,10 @@
       <div class="pagination-container">
         <!-- 分页控件容器 -->
         <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
+            @current-change="fetchFiles"
             :current-page="currentPage"
             :page-size="pageSize"
-            :total="totalItems"
+            :total="totalFiles"
             layout="prev, pager, next">
         </el-pagination>
       </div>
@@ -85,164 +83,46 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed} from "vue";
+import {onMounted, ref} from "vue";
 import {ElMessage} from "element-plus";
 import 'element-plus/es/components/message/style/css';
-import {login, register, Result, getAllFiles} from '../api/Requester';
-import {User} from "../entities/User.ts";
+import {login, register, getAllFiles, Result} from '../api/Requester';
+import {User} from "../entities/User";
 import {AxiosResponse} from "axios";
-import {Auth} from "../entities/Auth.ts";
+import {Auth} from "../entities/Auth";
+import {File} from "../entities/File";
 
-const InputFileName = ref('');
-const UserAvatarLoginShow = ref(false);
-const UserName = ref();
-const UserPassword = ref();
-const isAdmin = ref(false); // 是否是管理员
-// 分页
-const currentPage = ref(1);
-const pageSize = ref(5);
-const TableDataFile = [
-  {
-    "downloadCount": 0,
-    "hash": "80bd1104e15f52c1e3acab6ab2a0c0a9548f7d2f6310d37817be1d68c973a2ecb90a10630c8f403a5770caf1060f5a161a0ce1760900b2d9149ae484179f6c5b",
-    "id": 3,
-    "name": "orztqriypljbbqdhggcz",
-    "size": 785,
-    "type": "tj",
-    "uploadTime": "2023-11-19 14:38:24",
-    "uploaderName": "wzp"
-  },
-  {
-    "downloadCount": 0,
-    "hash": "6ab4a3a84f37a4b41bacdf604fea06107c835a9f4d42c43f09d964fa70b0ea8766feacf70bf734447cf981d5e5b27df0ac04ef3c32233fbd5354ddaafa2808ca",
-    "id": 4,
-    "name": "mnmvapdgquwqocbiwtdkzl",
-    "size": 880,
-    "type": "gxtog",
-    "uploadTime": "2023-11-19 14:38:47",
-    "uploaderName": "wzp"
-  },
-  {
-    "downloadCount": 0,
-    "hash": "36b90ac358b56f4ff25b4506a76cbc656fa1cceaed47e6f5f8bbdb1b3a612df66edb85e11f4057252011565147c1ee9b5d41e50070dc36ae6eee08f5e6d34dc9",
-    "id": 5,
-    "name": "jlzkunryl",
-    "size": 543,
-    "type": "zrv",
-    "uploadTime": "2023-11-19 14:38:47",
-    "uploaderName": "wzp"
-  },
-  {
-    "downloadCount": 0,
-    "hash": "1a37c0298eabe1c2bc0414ba9b33ebcc487e5e6fc879f07ade56ec4c74bc5555ced1ff78dbeca637cd1941cd7cd4ce5c8089f241c5cbfd56eddd284b76ac1ef7",
-    "id": 6,
-    "name": "dswqhfqskdagcbfckwpndfatd",
-    "size": 526,
-    "type": "esjvu",
-    "uploadTime": "2023-11-19 14:38:47",
-    "uploaderName": "wzp"
-  },
-  {
-    "downloadCount": 0,
-    "hash": "ce5658a5607b9789183628a270cf07218f34a892eb1cba7eb6bd4a7975e00f2610109b34c1dcac997557e13e75fcf3ae13b7975fe368203f5f68490ee591b94a",
-    "id": 7,
-    "name": "piocnpmktwxbb",
-    "size": 898,
-    "type": "vcggc",
-    "uploadTime": "2023-11-19 14:38:47",
-    "uploaderName": "wzp"
-  },
-  {
-    "downloadCount": 0,
-    "hash": "9b7e885939e62cfc5826ed91503fb6416996ea1508453cb750355d6c70256d3a95b9122c7da8daec659d72ef3e3e98b6f770c4c54effd33f34a915260a25a72f",
-    "id": 8,
-    "name": "wxmnzwfbk",
-    "size": 609,
-    "type": "cm",
-    "uploadTime": "2023-11-19 14:38:47",
-    "uploaderName": "wzp"
-  },
-  {
-    "downloadCount": 0,
-    "hash": "045a8e81558d7d7f14fd06c52ac4055eeaea5aee6fb3f8dbd320fe25a389784e1349ba5d9c4ca63b7de957d86a21412716db72723ac12d1f0a276f7f3c862e8e",
-    "id": 9,
-    "name": "zqrnpauhvwzbavicgej",
-    "size": 656,
-    "type": "kt",
-    "uploadTime": "2023-11-19 14:38:47",
-    "uploaderName": "wzp"
-  },
-  {
-    "downloadCount": 0,
-    "hash": "7f288c84ca711e79d50bf4286f88f6e73ff49248c8285d93b52077e921bf414e0fd98f98a396422c15ade33bafedbf0e1cffa78ce63caa93d200f015609d8aea",
-    "id": 10,
-    "name": "zxblkv",
-    "size": 593,
-    "type": "q",
-    "uploadTime": "2023-11-19 14:38:47",
-    "uploaderName": "wzp"
-  },
-  {
-    "downloadCount": 0,
-    "hash": "73371bf6b11cb599e63047ced75d141908158ec386f403a7cfd9cf75116b2543e7248f5fe83dac61d076e5e59a82b4f352fdc19cebaa12566b0a2d467bd1f885",
-    "id": 11,
-    "name": "wdhdrvnphlqpxptnsn",
-    "size": 883,
-    "type": "vno",
-    "uploadTime": "2023-11-19 14:38:47",
-    "uploaderName": "wzp"
-  },
-  {
-    "downloadCount": 0,
-    "hash": "a387498ffd84522c954fe1bcde7b0f98212bfbda59fb785b482345b59bf3f17da8c5595378564e3cd5e187f4ae99558b0ac624bfa5c3f147e6412c9797c45cc4",
-    "id": 12,
-    "name": "ccyqhcbggcgeoarmxydndshw",
-    "size": 579,
-    "type": "zu",
-    "uploadTime": "2023-11-19 14:38:47",
-    "uploaderName": "wzp"
-  }
-]
-const totalItems = ref(TableDataFile.length);
+// TODO: 头部组件定义变量
+const inputFileName = ref<string>('');
+const userAvatarLoginShow = ref<boolean>(false);
+const userName = ref<string>("");
+const userPassword = ref<string>("");
+const isAdmin = ref<boolean>(false); // 是否是管理员
 
-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);
-  })
-};
+// TODO: 分页属性配置
+const currentPage = ref<number>(1);
+const pageSize = ref<number>(18);
+const nowFileData = ref<File[]>([]);
+const totalFiles = ref<number>(0);
 
+// TODO: 用户登录弹窗
 const toggleUserLogin = () => {
-  UserAvatarLoginShow.value = !UserAvatarLoginShow.value;
+  userAvatarLoginShow.value = !userAvatarLoginShow.value;
   // 切换用户登录弹窗的显示状态
 };
 
-const UserLogin = () => {
+// TODO: 用户登录接口
+const userLogin = () => {
   // 用户登录函数
-  if (UserName.value == "" || UserPassword.value == "") {
+  if (userName.value == "" || userPassword.value == "") {
     ElMessage.error("用户名密码不能为空");
     return;
   }
-  login(UserName.value, UserPassword.value).then((res: AxiosResponse<Result<User>>) => {
+  login(userName.value, userPassword.value).then((res: AxiosResponse<Result<User>>) => {
     // 发送登录请求
     if (res.data.status == 200) {
       ElMessage.success("登录成功!")
-      toggleUserLogin()
+      toggleUserLogin(); // Close the login popup
     } else {
       ElMessage.error("登录失败,用户名密码错误!")
     }
@@ -251,13 +131,14 @@ const UserLogin = () => {
   })
 };
 
-const UserEnroll = () => {
+// TODO: 用户注册接口
+const userEnroll = () => {
   // 用户注册函数
-  if (UserName.value == '' || UserPassword.value == '') {
+  if (userName.value == '' || userPassword.value == '') {
     ElMessage.error("用户名密码不能为空")
     return;
   }
-  register(UserName.value, UserPassword.value, Auth.user).then((res) => {
+  register(userName.value, userPassword.value, Auth.user).then((res) => {
     switch (res.data.status) {
       case 251:
         ElMessage.error("邀请码错误！");
@@ -271,55 +152,60 @@ const UserEnroll = () => {
   });
 }
 
-const handleShowDetail = () => {
-  console.log("detail");
+// TODO: 获取列表文件接口
+const fetchFiles = (current?: number) => {
+  if (current) {
+    currentPage.value = current;
+  }
+  getAllFiles(currentPage.value, pageSize.value).then((res) => {
+    nowFileData.value = res.data.data.data;
+    totalFiles.value = res.data.data.total;
+  })
 }
 
+// TODO: 查看文件属性
+const handleShowDetail = () => {
+  console.log("查看文件属性接口");
+}
+
+// TODO: 文件下载
 const handleDownload = () => {
   console.log("download");
 }
 
+// TODO: 删除文件
 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;
-};
-
+// TODO: 实时更新
+onMounted(() => {
+  fetchFiles();
+})
 </script>
 
 <style scoped>
-.Head {
+.head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #f0f0f0; /* 头部样式，包括布局和背景颜色 */
 }
 
-.InputFileName {
+.inputFileName {
   flex: 1;
   margin-right: 10px; /* 搜索框样式 */
 }
 
-.UserAvatar {
+.userAvatar {
   margin: 10px;
 }
 
-.UserAvatar img {
+.userAvatar img {
   border-radius: 50px;
 }
 
-.UserLoginBox {
+.userLoginBox {
   background-color: #fff;
   border-radius: 10px;
   padding: 20px; /* 登录弹窗样式 */
@@ -344,11 +230,11 @@ const handleSizeChange = (val: number) => {
   margin-top: 20px; /* 按钮区域样式 */
 }
 
-.UserLoginButton {
+.userLoginButton {
   width: 120px; /* 登录注册按钮样式 */
 }
 
-.FileLiteBox {
+.fileLiteBox {
   margin-top: 10px;
 }