Feat: vite dev server

frontend/src/services/apiService.ts

@@ -3,6 +3,9 @@ import axios from "axios";
 import EventEmitter from "events";
 import _ from "lodash";
 
+// Each request must carry the X-Requested-With: XMLHttpRequest header
+axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+
 export interface RequestConfig extends AxiosRequestConfig {
   forceRequest?: boolean;
 }
@@ -16,8 +19,8 @@ class ApiService {
         String(config.method),
         String(config.url),
         JSON.stringify(config.data ?? {}),
-        JSON.stringify(config.params ?? {}),
-      ].join(""),
+        JSON.stringify(config.params ?? {})
+      ].join("")
     );
 
     return new Promise((resolve, reject) => {

frontend/src/services/apis.ts

@@ -1,5 +1,22 @@
 import { useDefineApi } from "@/stores/useApiCache";
 
+export const loginUser = useDefineApi<
+  {
+    // Post
+    data: {
+      username: string;
+      password: string;
+    };
+  },
+  // Response
+  {
+    id: number;
+  }
+>({
+  url: "/api/auth/login",
+  method: "POST"
+});
+
 export const userInfoApi = useDefineApi<
   {
     // Query
@@ -16,5 +33,5 @@ export const userInfoApi = useDefineApi<
     id: number;
   }
 >({
-  url: "https://jsonplaceholder.typicode.com/todos/1",
+  url: "https://jsonplaceholder.typicode.com/todos/1"
 });

frontend/src/services/user.ts

@@ -8,8 +8,8 @@ export const userService = createGlobalState(() => {
       url: "https://jsonplaceholder.typicode.com/todos/1",
       data: {
         username,
-        password,
-      },
+        password
+      }
     });
     return result.data;
   };
@@ -18,17 +18,17 @@ export const userService = createGlobalState(() => {
     const state = userInfoApi();
     state.execute({
       params: {
-        uid,
+        uid
       },
       data: {
-        newName: "dsad",
-      },
+        newName: "dsad"
+      }
     });
     return state;
   };
 
   return {
     login,
-    getUserInfo,
+    getUserInfo
   };
 });

frontend/src/tools/commom.ts

@@ -0,0 +1,3 @@
+export async function sleep(t: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, t));
+}

frontend/src/views/Login.vue

@@ -5,31 +5,47 @@ import {
   CheckCircleOutlined,
   LoadingOutlined,
   LockOutlined,
-  UserOutlined,
+  UserOutlined
 } from "@ant-design/icons-vue";
 import { reactive, ref } from "vue";
 import { router } from "@/config/router";
+import { loginUser } from "@/services/apis";
+import { sleep } from "@/tools/commom";
 
 const formData = reactive({
   username: "",
-  password: "",
+  password: ""
 });
 
+const { execute: login } = loginUser();
+
 const loginStep = ref(0);
 
-const handleLogin = () => {
+const handleLogin = async () => {
   loginStep.value++;
-  setTimeout(() => {
-    // loginStep.value = 0;
-    loginStep.value++;
-    setTimeout(() => loginSuccess(), 1200);
-  }, 3000);
+  await sleep(1500);
+
+  try {
+    const res = await login({
+      data: {
+        username: "1",
+        password: "2"
+      }
+    });
+    console.log("resresres:", res);
+  } catch (error) {
+    console.log("LOGIN ERROR:", error);
+  }
+
+  loginStep.value++;
+  await sleep(1200);
+  loginSuccess();
 };
 
 const loginSuccess = () => {
   loginStep.value++;
   router.push({
-    path: "/",
+    path: "/"
   });
 };
 </script>
@@ -108,7 +124,7 @@ const loginSuccess = () => {
   <div
     :class="{
       logging: loginStep === 1,
-      loginDone: loginStep === 3,
+      loginDone: loginStep === 3
     }"
   >
     <div class="login-page-container">
@@ -124,11 +140,7 @@ const loginSuccess = () => {
                   {{ t("使用服务器的 MCSManager 账号进入面板") }}
                 </a-typography-paragraph>
                 <div>
-                  <a-input
-                    v-model:value="formData.username"
-                    :placeholder="t('账号')"
-                    size="large"
-                  >
+                  <a-input v-model:value="formData.username" :placeholder="t('账号')" size="large">
                     <template #suffix>
                       <UserOutlined style="color: rgba(0, 0, 0, 0.45)" />
                     </template>
@@ -148,11 +160,7 @@ const loginSuccess = () => {
                   <div class="mt-24 flex-between align-center">
                     <div class="mcsmanager-link">
                       Powered by
-                      <a
-                        href="https://mcsmanager.com"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
+                      <a href="https://mcsmanager.com" target="_blank" rel="noopener noreferrer">
                         MCSManager
                       </a>
                     </div>
@@ -167,10 +175,7 @@ const loginSuccess = () => {
                   </div>
                 </div>
               </div>
-              <div
-                class="login-panel-body flex-center"
-                v-show="loginStep === 1"
-              >
+              <div class="login-panel-body flex-center" v-show="loginStep === 1">
                 <div style="text-align: center">
                   <LoadingOutlined :style="{ fontSize: '50px' }" />
                 </div>
@@ -180,7 +185,7 @@ const loginSuccess = () => {
                   <CheckCircleOutlined
                     :style="{
                       fontSize: '40px',
-                      color: 'var(--color-green-6)',
+                      color: 'var(--color-green-6)'
                     }"
                   />
                 </div>
@@ -193,7 +198,7 @@ const loginSuccess = () => {
         <div
           :class="{
             'right-square': true,
-            'right-square-logging': loginStep === 1,
+            'right-square-logging': loginStep === 1
           }"
         >
           <div class="square1"></div>

frontend/vite.config.ts

@@ -8,28 +8,30 @@ import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:23333",
+        changeOrigin: true
+        // rewrite: (path) => path.replace(/^\/api/, "")
+      }
+    }
+  },
+
   plugins: [
     vue(),
     vueJsx(),
     Components({
       resolvers: [
         AntDesignVueResolver({
-          importStyle: false, // css in js
-        }),
-      ],
-    }),
+          importStyle: false // css in js
+        })
+      ]
+    })
   ],
   resolve: {
     alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
-    },
-  },
-  // css: {
-  //   preprocessorOptions: {
-  //     scss: {
-  //       javascriptEnabled: true,
-  //       additionalData: `@import "${path.resolve(__dirname, 'src/assets/variables.scss')}";`
-  //     }
-  //   }
-  // }
+      "@": fileURLToPath(new URL("./src", import.meta.url))
+    }
+  }
 });