登陆初始化

src/apis/login.js

@@ -0,0 +1,12 @@
+// 登陆相关接口
+import request from '@/utils/request'
+// 登陆接口
+export const login = (params) => request.basic.post('/v1/auth/login', params)
+// // 获取role条数据
+// export const getRole = (id) => request.basic.get(`/api/v1/roles/${id}`)
+// // 添加role
+// export const createRole = (params) => request.basic.post('/api/v1/roles', params)
+// // 更新role
+// export const updateRole = (id, params) => request.basic.put(`/api/v1/roles/${id}`, params)
+// // 删除role
+// export const delRole = (id) => request.basic.delete(`/api/v1/roles/${id}`)

src/views/login/component/account.vue

@@ -1,13 +1,29 @@
 <template>
-  <a-form :model="formState" name="normal_login" class="login-form"  @finishFailed="onFinishFailed">
-    <a-form-item label="账号" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
+  <a-form
+    :model="formState"
+    name="normal_login"
+    class="login-form"
+    @finish="onFinish"
+    @finish-failed="onFinishFailed"
+    ref="formRef"
+  >
+    <a-form-item
+      label="账号"
+      name="username"
+      :rules="[{ required: true, message: '请输入用户名！' }]"
+    >
       <a-input v-model:value="formState.username">
         <template #prefix>
           <UserOutlined class="site-form-item-icon" />
         </template>
       </a-input>
     </a-form-item>
-    <a-form-item label="密码" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
+
+    <a-form-item
+      label="密码"
+      name="password"
+      :rules="[{ required: true, message: '请输入密码！' }]"
+    >
       <a-input-password v-model:value="formState.password">
         <template #prefix>
           <LockOutlined class="site-form-item-icon" />
@@ -15,50 +31,82 @@
       </a-input-password>
     </a-form-item>
 
+    <!-- 可选：记住我 -->
+    <!--
+    <a-form-item name="remember" no-style>
+      <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
+    </a-form-item>
+    -->
+
     <a-form-item>
-      <a-button type="primary"  block @click="handleClick" class="login-form-button">
+      <a-button type="primary" html-type="submit" block class="login-form-button">
         登 录
       </a-button>
     </a-form-item>
   </a-form>
 </template>
+
 <script lang="ts" setup>
-import { reactive, computed } from 'vue';
+import { reactive, ref } from 'vue';
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
-import { useRouter } from 'vue-router'
-const router=useRouter()
+import { useRouter } from 'vue-router';
+import apis from '../../../apis/login.js';
+// 如果需要 md5，请确保已安装并导入，例如：import md5 from 'md5';
+// import md5 from 'md5'; // 按需使用
+
+const router = useRouter();
+const formRef = ref();
+
 interface FormState {
   username: string;
   password: string;
   remember: boolean;
 }
+
 const formState = reactive<FormState>({
   username: '',
   password: '',
   remember: true,
 });
-const handleClick = (values: any) => {
-  console.log('Success:', values);
-  router.push('/')
+
+// 表单验证通过后自动调用
+const onFinish = async (values: FormState) => {
+  // 可选：对密码进行加密（根据后端要求）
+  // const loginData = { ...values, password: md5(values.password) };
+
+  try {
+    const { success } = await apis.login(values); // 假设 apis.login 返回 { success: boolean }
+
+    if (success) {
+      // 登录成功
+      router.push('/platform');
+    } else {
+      // 后端返回登录失败（如密码错误）
+      formRef.value?.setFields([
+        { name: 'password', errors: ['用户名或密码错误'] }
+      ]);
+    }
+  } catch (error) {
+    console.error('登录请求失败:', error);
+    // 网络错误或服务器异常
+    formRef.value?.setFields([
+      { name: 'password', errors: ['网络错误，请稍后重试'] }
+    ]);
+  }
 };
 
 const onFinishFailed = (errorInfo: any) => {
-  console.log('Failed:', errorInfo);
+  console.log('表单验证失败:', errorInfo);
+  // Ant Design Vue 会自动显示校验错误，无需额外处理
 };
-const disabled = computed(() => {
-  return !(formState.username && formState.password);
-});
 </script>
+
 <style scoped>
-#components-form-demo-normal-login .login-form {
+.login-form {
   max-width: 300px;
 }
 
-#components-form-demo-normal-login .login-form-forgot {
-  float: right;
-}
-
-#components-form-demo-normal-login .login-form-button {
+.login-form-button {
   width: 100%;
 }
-</style>
+</style>

src/views/login/index.vue

@@ -41,6 +41,7 @@ const state = reactive({
 const onTabsClick = () => {
   state.isTabPaneShow = !state.isTabPaneShow;
 };
+
 </script>
 
 <style scoped lang="scss">