optimize api fetch

.env.development

@@ -0,0 +1,4 @@
+# 自定义的环境变量（命名必须以 VITE_ 开头）
+
+## 开发环境地址前缀（一般 '/'，'./' 都可以）TODO:
+VITE_API_BASE_URL = `http://127.0.0.1:10007`

.env.production

@@ -0,0 +1,4 @@
+# 自定义的环境变量（命名必须以 VITE_ 开头）
+
+## 开发环境地址前缀（一般 '/'，'./' 都可以）TODO:
+VITE_API_BASE_URL = `http://127.0.0.1:10007`

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],
+    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],
   },
-    publishedCommentsCount: 5,
-    publishedCommentIds: [6, 7, 8, 9, 10],
+  {
+    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],
   },
 ]
 

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<KUNGalgamer> {
+  try {
+    const url = `/kungalgamer/${id}`
+
+    // 调用fetchGet函数
+    const response = await fetchGet<KUNGalgamer>(url)
+
+    // 返回获取的用户数据
+    return response
+  } catch (error) {
+    // 处理错误
+    console.error(error)
+    throw new Error('Failed to fetch user data')
+  }
+}

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[]
+}

src/api/topic/index.ts

@@ -19,7 +19,7 @@ export async function getTopicRangeApi(
   start: number,
   count: number
 ): Promise<KUNGalgameTopic[]> {
-  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<KUNGalgameTopic[]>(url)

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 {

src/store/modules/kungalgamer.ts

@@ -1,15 +1,20 @@
 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 {

src/types/api.d.ts

@@ -1,9 +0,0 @@
-// 所有的 api 接口响应数据的格式
-interface ApiResponseData<T> {
-  // 响应代码
-  code: number
-  // 响应返回数据
-  data: T
-  // 响应消息
-  message: string
-}

src/utils/request.ts

@@ -11,7 +11,10 @@ const fetchRequest = async <T>(
   options: FetchOptions
 ): Promise<T> => {
   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!')

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)
+})
 </script>
 
 <template>

src/views/kungalgamer/components/Avatar.vue

@@ -1,5 +1,36 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { defineComponent, ref } from 'vue'
 
-<template></template>
+const selectedFile = ref(null)
+
+const handleFileChange = (event: Event) => {
+  const fileInput = event.target as HTMLInputElement
+  if (fileInput.files && fileInput.files[0]) {
+    selectedFile.value = fileInput.files[0]
+  }
+}
+
+const handleSubmit = () => {
+  if (selectedFile.value) {
+    // 处理提交逻辑，例如上传文件等
+    console.log('Selected file:', selectedFile.value)
+  } else {
+    console.log('No file selected')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <label for="avatar">Choose images to upload (PNG, JPG)</label>
+    <input
+      type="file"
+      id="avatar"
+      accept=".jpg, .jpeg, .png"
+      @change="handleFileChange"
+    />
+  </div>
+  <button @click="handleSubmit">submit</button>
+</template>
 
 <style lang="scss" scoped></style>