新增login api

遇到cors問題

Author: alyciaciou

.env.development

@@ -0,0 +1 @@
+VITE_APP_BASE_URL='http://localhost:8081/spring-admin'

.env.production

@@ -0,0 +1 @@
+VITE_APP_BASE_URL=''

package-lock.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.7",
     "element-plus": "^2.8.4",
     "pinia": "^2.1.7",
     "vue": "^3.4.29",

package.json

@@ -0,0 +1,7 @@
+import { GET, POST, PUT, DELETE } from '@/composables/base'
+
+const login = async (data) => {
+    const res = await POST('/public/login', data)
+}
+
+export { login }

src/composables/apis.js

@@ -0,0 +1,65 @@
+import axios from 'axios';
+
+const { VITE_APP_BASE_URL } = import.meta.env
+const apiClient = axios.create({
+    baseURL: `${VITE_APP_BASE_URL}`,
+    // timeout: 1000, 
+});
+
+
+apiClient.interceptors.request.use(
+    config => {
+        return config;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+
+apiClient.interceptors.response.use(
+    response => {
+        return response;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+
+const GET = async (url, params = {}, config = {}) => {
+    try {
+        const response = await apiClient.get(url, { params, ...config });
+        return response;
+    } catch (error) {
+        throw error;
+    }
+};
+
+const POST = async (url, data, config = {}) => {
+    try {
+        const response = await apiClient.post(url, data, config);
+        return response;
+    } catch (error) {
+        throw error;
+    }
+};
+
+const PUT = async (url, data, config = {}) => {
+    try {
+        const response = await apiClient.put(url, data, config);
+        return response;
+    } catch (error) {
+        throw error;
+    }
+};
+
+const DELETE = async (url, config = {}) => {
+    try {
+        const response = await apiClient.delete(url, config);
+        return response;
+    } catch (error) {
+        throw error;
+    }
+};
+
+
+export { GET, POST, PUT, DELETE }

src/composables/base.js

@@ -5,9 +5,9 @@
                 <p class="text-sm text-gray-600 mt-1">請登入您的帳戶</p>
             </div>
             <el-form :model="form" :rules="rules" ref="loginForm" @submit.prevent="onSubmit" class="space-y-4">
-                <el-form-item prop="username">
+                <el-form-item prop="email">
                   <el-input 
-                  v-model="form.username" 
+                  v-model="form.email" 
                   placeholder="用戶名"
                   prefix-icon="el-icon-user"
                   class="w-full">
@@ -35,46 +35,44 @@
     </div>
   </template>
 
-  <script setup>
-  import { ref, reactive } from 'vue'
-  import { ElMessage } from 'element-plus'
+<script setup>
+    import { ref } from 'vue'
+    import { ElMessage } from 'element-plus'
+    import { login } from '@/composables/apis'
+
+    const loginForm = ref(null)
+    const form = ref({
+      email: '',
+      password: ''
+    })
   
-      const loginForm = ref(null)
-      const form = reactive({
-        username: '',
-        password: ''
-      })
-  
-      const rules = {
-        username: [
-          { required: true, message: '請輸入用戶名', trigger: 'blur' }
-        ],
-        password: [
-          { required: true, message: '請輸入密碼', trigger: 'blur' }
-        ]
-      }
+    const rules = {
+      email: [
+        { required: true, message: '請輸入用戶名', trigger: 'blur' }
+      ],
+      password: [
+        { required: true, message: '請輸入密碼', trigger: 'blur' }
+      ]
+    }
   
-      const onSubmit = () => {
-        loginForm.value.validate((valid) => {
-          if (valid) {
-            // 這裡處理登入邏輯
+    const onSubmit = () => {
+      loginForm.value.validate(async(valid) => {
+        if (valid) {
+          try {
+            const res = await login(form.value)
+            console.log(loginForm.value)
+            console.log(form.value)
+            console.log(res)
             ElMessage.success('登入成功!')
-            // 登入成功後可以進行路由跳轉等操作
-          } else {
-            ElMessage.error('請正確填寫登入信息')
+          } catch (error) {
+            console.log(error)
           }
-        })
-      }
-  
-  </script>
-  
-  <style>
-  /* 可以在這裡添加任何額外的樣式覆蓋 */
-  /* .el-input__inner {
-     bg-gray-50 border-gray-300;
-  }
+          
+          // 登入成功後可以進行路由跳轉等操作
+        } else {
+          ElMessage.error('請正確填寫登入信息')
+        }
+      })
+    }
   
-  .el-button--primary {
-     border-none;
-  } */
-  </style>
+</script>

src/views/LoginView.vue

@@ -5,6 +5,7 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base:'/spring-admin/public/site/',
   plugins: [
     vue(),
   ],