From 87d4949bbbd10748f228fd1de94b54c06064de61 Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Wed, 14 Jun 2023 19:09:55 +0800 Subject: [PATCH] optimize api fetch --- .env.development | 4 + .env.production | 4 + server/src/routes/user.js | 88 ++++++++++++--------- src/api/index.ts | 0 src/api/kungalgamer/index.ts | 20 +++++ src/api/kungalgamer/types/kungalgamer.ts | 20 +++++ src/api/topic/index.ts | 2 +- src/api/user/index.ts | 0 src/api/user/types/user.ts | 0 src/components/KUNGalgameTopBar.vue | 2 +- src/store/modules/kungalgamer.ts | 13 ++- src/types/api.d.ts | 9 --- src/utils/request.ts | 5 +- src/views/kungalgamer/KUNGalgamer.vue | 7 ++ src/views/kungalgamer/components/Avatar.vue | 35 +++++++- 15 files changed, 154 insertions(+), 55 deletions(-) create mode 100644 .env.development create mode 100644 .env.production delete mode 100644 src/api/index.ts create mode 100644 src/api/kungalgamer/index.ts create mode 100644 src/api/kungalgamer/types/kungalgamer.ts delete mode 100644 src/api/user/index.ts delete mode 100644 src/api/user/types/user.ts delete mode 100644 src/types/api.d.ts diff --git a/.env.development b/.env.development new file mode 100644 index 00000000..9cf2fcfc --- /dev/null +++ b/.env.development @@ -0,0 +1,4 @@ +# 自定义的环境变量（命名必须以 VITE_ 开头） + +## 开发环境地址前缀（一般 '/'，'./' 都可以）TODO: +VITE_API_BASE_URL = `http://127.0.0.1:10007` \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 00000000..406aa475 --- /dev/null +++ b/.env.production @@ -0,0 +1,4 @@ +# 自定义的环境变量（命名必须以 VITE_ 开头） + +## 开发环境地址前缀（一般 '/'，'./' 都可以）TODO: +VITE_API_BASE_URL = `http://127.0.0.1:10007` diff --git a/server/src/routes/user.js b/server/src/routes/user.js index b5fe7ed2..b9462872 100644 --- a/server/src/routes/user.js +++ b/server/src/routes/user.js @@ -6,50 +6,64 @@ const router = express.Router() // 模拟用户数据 const users = [ { - registrationSequence: 1, - username: 'KUN', + uid: 1, + name: 'KUN', email: 'kun@kungal.com', token: 'KUNGalgame', - avatar: './assets/images/KUN.jpg', - registrationTime: Date.now(), + avatar: 'http://127.0.0.1:10007/assets/images/KUN.jpg', + roles: 'admin', + status: '0', + time: Date.now(), moemoepoint: 1007, bio: '鲲最可爱！', - likesCount: 1007, - commentsCount: 50, - repliesCount: 20, - likedTopicsCount: 5, - repliedTopicsCount: 1007, - pushedTopicsCount: 3, - userTopics: { - likedTopicIds: [1, 2, 3], - repliedTopicIds: [4, 5], - pushedTopicIds: [6, 7, 8], - }, - publishedCommentsCount: 10, - publishedCommentIds: [1, 2, 3, 4, 5], + upvotes: 1007, + like: 50, + comment: [1, 2, 3, 4], + reply: [1, 2, 3], + topic: [1, 2, 3], + like_topic: [1, 2, 3], + upvotes_topic: [2, 3], + reply_topic: [2, 3, 4], }, { - registrationSequence: 2, - username: 'YUYU', + uid: 2, + name: 'YUYU', email: 'yuyu@kungal.com', - token: 'azkhx', - avatar: './assets/images/topic.jpg', - registrationTime: Date.now(), - moemoePoints: 11000, - bio: '啊这可海星', - likesCount: 1007, - commentsCount: 20, - repliesCount: 10, - likedTopicsCount: 2, - repliedTopicsCount: 1007, - pushedTopicsCount: 1, - userTopics: { - likedTopicIds: [9, 10], - repliedTopicIds: [11], - pushedTopicIds: [12], - }, - publishedCommentsCount: 5, - publishedCommentIds: [6, 7, 8, 9, 10], + token: 'KUNGalgame', + avatar: 'http://127.0.0.1:10007/assets/images/topic.jpg', + roles: 'kungalgamer', + status: '0', + time: Date.now(), + moemoepoint: 10, + bio: '鲲最可爱！', + upvotes: 1007, + like: 50, + comment: [1, 2, 3, 4], + reply: [1, 2, 3], + topic: [1, 2, 3], + like_topic: [1, 2, 3], + upvotes_topic: [2, 3], + reply_topic: [2, 3, 4], + }, + { + uid: 3, + name: 'azkhx', + email: 'azkhx@kungal.com', + token: 'KUNGalgame', + avatar: '', + roles: 'kungalgamer', + status: '1', + time: Date.now(), + moemoepoint: 17, + bio: '鲲最可爱！', + upvotes: 1007, + like: 50, + comment: [1, 2, 3, 4], + reply: [1, 2, 3], + topic: [1, 2, 3], + like_topic: [1, 2, 3], + upvotes_topic: [2, 3], + reply_topic: [2, 3, 4], }, ] diff --git a/src/api/index.ts b/src/api/index.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/api/kungalgamer/index.ts b/src/api/kungalgamer/index.ts new file mode 100644 index 00000000..40669cb5 --- /dev/null +++ b/src/api/kungalgamer/index.ts @@ -0,0 +1,20 @@ +import { KUNGalgamer } from './types/kungalgamer' +import { fetchGet } from '@/utils/request' + +export async function getSingleKUNGalgamerApi( + id: number +): Promise { + try { + const url = `/kungalgamer/${id}` + + // 调用fetchGet函数 + const response = await fetchGet(url) + + // 返回获取的用户数据 + return response + } catch (error) { + // 处理错误 + console.error(error) + throw new Error('Failed to fetch user data') + } +} diff --git a/src/api/kungalgamer/types/kungalgamer.ts b/src/api/kungalgamer/types/kungalgamer.ts new file mode 100644 index 00000000..1867c5e3 --- /dev/null +++ b/src/api/kungalgamer/types/kungalgamer.ts @@ -0,0 +1,20 @@ +export interface KUNGalgamer { + uid: number + name: string + email: string + token: string + avatar: string + roles: string + status: number + time: number + moemoepoint: number + bio: string + upvotes: number + like: number + comment: number[] + reply: number[] + topic: number[] + like_topic: number[] + upvotes_topic: number[] + reply_topic: number[] +} diff --git a/src/api/topic/index.ts b/src/api/topic/index.ts index 8f514f2f..f09ccb0d 100644 --- a/src/api/topic/index.ts +++ b/src/api/topic/index.ts @@ -19,7 +19,7 @@ export async function getTopicRangeApi( start: number, count: number ): Promise { - const url = `http://127.0.0.1:10007/topic/topics/kun?start=${start}&count=${count}` + const url = `/topic/topics/kun?start=${start}&count=${count}` try { const response = await fetchGet(url) diff --git a/src/api/user/index.ts b/src/api/user/index.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/api/user/types/user.ts b/src/api/user/types/user.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/KUNGalgameTopBar.vue b/src/components/KUNGalgameTopBar.vue index 9a1a76b1..afc8bd45 100644 --- a/src/components/KUNGalgameTopBar.vue +++ b/src/components/KUNGalgameTopBar.vue @@ -159,7 +159,7 @@ $navNumber: v-bind(navItemNum); height: 7px; left: 0; position: absolute; - transition: left 0.5s; + transition: 0.5s; width: calc(100% / $navNumber); } a { diff --git a/src/store/modules/kungalgamer.ts b/src/store/modules/kungalgamer.ts index 6d935cfb..5b218367 100644 --- a/src/store/modules/kungalgamer.ts +++ b/src/store/modules/kungalgamer.ts @@ -1,16 +1,21 @@ import { defineStore } from 'pinia' +import { shallowReactive } from 'vue' interface UserState { + id: number token: string + roles: string } export const useKUNGalgamerStore = defineStore({ id: 'kungalgamer', persist: true, - state: (): UserState => ({ - // TODO: - token: 'KUNGalgame', - }), + state: (): UserState => + shallowReactive({ + id: 0, + token: '', + roles: '', + }), getters: { getToken(): string { return this.token diff --git a/src/types/api.d.ts b/src/types/api.d.ts deleted file mode 100644 index ddee8880..00000000 --- a/src/types/api.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -// 所有的 api 接口响应数据的格式 -interface ApiResponseData { - // 响应代码 - code: number - // 响应返回数据 - data: T - // 响应消息 - message: string -} diff --git a/src/utils/request.ts b/src/utils/request.ts index 0e0e0375..84ee11f7 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -11,7 +11,10 @@ const fetchRequest = async ( options: FetchOptions ): Promise => { try { - const response = await fetch(url, options) + const baseUrl = import.meta.env.VITE_API_BASE_URL + const fullUrl = `${baseUrl}${url}` + + const response = await fetch(fullUrl, options) if (!response.ok) { throw new Error('Request Error!') diff --git a/src/views/kungalgamer/KUNGalgamer.vue b/src/views/kungalgamer/KUNGalgamer.vue index ac51cb43..9fe73868 100644 --- a/src/views/kungalgamer/KUNGalgamer.vue +++ b/src/views/kungalgamer/KUNGalgamer.vue @@ -6,6 +6,13 @@ import NavBar from './components/NavBar.vue' import Header from './components/Header.vue' // 导入通用 Footer import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue' + +// 导入请求函数 +import { getSingleKUNGalgamerApi } from '@/api/kungalgamer/index' + +getSingleKUNGalgamerApi(1).then((userData) => { + console.log(userData) +})