feat(login): 实现登录功能并优化相关组件

- 移除了 AboutView.vue 中的多余代码- 完善了 CustomLogin.vue 中的登录逻辑，添加了表单提交后的处理
- 更新了 CustomNews.vue 中的数据请求方式- 删除了不再使用的 db.json 文件
- 在 package.json 中添加了 serve 脚本
- 在 vite.config.js 中配置了服务器代理

db.json

@@ -1,10 +0,0 @@
-{
-  "users": [
-    {
-      "id": 1,
-      "username": "test",
-      "password": "test",
-      "token": "123456"
-    }
-  ]
-}

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "serve": "vite serve",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "format": "prettier --write src/"

src/components/CustomLogin.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 import { computed, reactive } from 'vue'
+import router from '@/router/index.js'
 
 const formState = reactive({
   account: '',
@@ -9,18 +10,27 @@ const formState = reactive({
 })
 
 const onfinish = async () => {
-  console.log('formState', formState)
-  const response = await fetch('http://127.0.0.1:3000/login', {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'default',
-    headers: {
-      'Content-Type': 'application/json; charset=utf-8'
-    },
-    credentials: 'include',
-    body: JSON.stringify(formState)
-  })
-  console.log(response)
+  try {
+    const response = await fetch('http://localhost:3000/login', {
+      method: 'POST',
+      cache: 'default',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8'
+      },
+      credentials: 'include',
+      body: JSON.stringify(formState)
+    })
+
+    if (response.ok) {
+      const data = await response.json()
+      console.log(data)
+      await router.push('/')
+    } else {
+      console.error('Login failed', response.statusText)
+    }
+  } catch (e) {
+    console.log(e)
+  }
 }
 
 const onFinishFailed = () => {

src/components/CustomNews.vue

@@ -34,14 +34,22 @@
 import { onMounted, ref, nextTick } from 'vue'
 
 const count = 3
-const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`
+// const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`
+const fakeDataUrl = `http://localhost:3000/user/list?page=${count}`
 const initLoading = ref(true)
 const loading = ref(false)
 const data = ref([])
 const list = ref([])
 
 onMounted(() => {
-  fetch(fakeDataUrl)
+  fetch(fakeDataUrl, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    cache: 'default',
+    credentials: 'include'
+  })
     .then((res) => res.json())
     .then((res) => {
       initLoading.value = false

src/views/AboutView.vue

@@ -1,14 +1,7 @@
 <script setup lang="js">
-import { useRouter } from 'vue-router'
 import CustomNews from '@/components/CustomNews.vue'
-
-const router = useRouter()
 </script>
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-    <a-button @click="() => router.push('/news')">Goto News</a-button>
-  </div>
   <CustomNews />
 </template>
 

vite.config.js

@@ -14,5 +14,10 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000',  // 代理 API 请求
+    }
   }
 })