张翔
79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<template>
|
|
<div class="login-container">
|
|
<a-card class="login-card">
|
|
<template #title>
|
|
<h2>Novalon 管理系统</h2>
|
|
</template>
|
|
<a-form
|
|
:model="formState"
|
|
@finish="onFinish"
|
|
layout="vertical"
|
|
>
|
|
<a-form-item
|
|
label="用户名"
|
|
name="username"
|
|
:rules="[{ required: true, message: '请输入用户名' }]"
|
|
>
|
|
<a-input v-model:value="formState.username" placeholder="请输入用户名" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="密码"
|
|
name="password"
|
|
:rules="[{ required: true, message: '请输入密码' }]"
|
|
>
|
|
<a-input-password v-model:value="formState.password" placeholder="请输入密码" />
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-button type="primary" html-type="submit" :loading="loading" block>
|
|
登录
|
|
</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { message } from 'ant-design-vue'
|
|
import request from '@/utils/request'
|
|
|
|
const router = useRouter()
|
|
const loading = ref(false)
|
|
|
|
const formState = reactive({
|
|
username: '',
|
|
password: ''
|
|
})
|
|
|
|
const onFinish = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res: any = await request.post('/auth/login', formState)
|
|
localStorage.setItem('token', res.token)
|
|
localStorage.setItem('userId', res.userId)
|
|
message.success('登录成功')
|
|
router.push('/')
|
|
} catch (error: any) {
|
|
message.error(error.response?.data?.message || '登录失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.login-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
.login-card {
|
|
width: 400px;
|
|
}
|
|
}
|
|
</style>
|