go_fish_web/src/pages/login/Login.vue

<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: LyMy
 * @Date: 2025-04-11 15:46:41
 * @LastEditors: LyMy
 * @LastEditTime: 2025-04-11 16:23:46
 * @FilePath: \fish_game\src\pages\login\Login.vue
-->
<template>
    <div class="login-page">
        <h1>登录</h1>
        <form @submit.prevent="handleLogin">
            <input v-model="Name" placeholder="用户名" />
            <input v-model="Password" type="password" placeholder="密码" />
            <button type="submit">登录</button>
        </form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { login } from '@/api/login/login'
import { useRouter } from 'vue-router'

const router = useRouter()
const Name = ref('')
const Password = ref('')

async function handleLogin () {
    try {
        const res = await login({ Name: Name.value, Password: Password.value })
        if (res && res.token) {
            localStorage.setItem('token', res.token)
            router.push('/')
        } else {
            alert('登录失败，未返回token')
        }
    } catch (err) {
        alert('登录失败，请检查网络或重试')
        console.error('登录错误:', err)
    }
}
</script>


<style scoped>
.login-page {
    max-width: 400px;
    margin: 100px auto;
    text-align: center;
}
input {
    display: block;
    margin: 10px auto;
    padding: 8px;
    width: 80%;
}
button {
    padding: 10px 20px;
}
</style>