npm init vue@latest

npm install axios

<script setup>
  
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>

</style>

import { useRouter } from 'vue-router'
const router = useRouter();

children: [ // 定义子路由]

<template>
    <div class="container">
        <div class="wrapper">
            <form @submit.prevent="handleLogin">
                <h1>登录</h1>
                <div class="input-box">
                    <input v-model="LoginData.adminName" type="text" required />
                    <label>用户名</label>
                </div>
                <div class="input-box">
                    <input v-model="LoginData.adminPass" type="password" required />
                    <label>密码</label>
                </div>

                <div class="row">
                    <a @click="forgotPassword">忘记密码？</a>
                </div>

                <button type="submit" class="btn">登录</button>
                <div class="signup-link">
                    <p>还没有账号？<a href="#" @click="showSignUpAlert">创建一个。</a></p>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue'; // 引入 Vue 的 ref 函数用于响应式数据
import { mangerLoginService } from '@/api/manger'; // 导入登录服务 API
import { ElMessage } from 'element-plus'; // 导入 Element Plus 消息组件
import { useRouter } from 'vue-router'; // 引入 Vue Router 用于页面导航
import { useTokenStore } from '@/stores/token'; // 导入 token 存储管理

export default {
    setup() {
        const tokenStore = useTokenStore(); // 获取 token 存储
        const router = useRouter(); // 获取路由对象
        const LoginData = ref({
            adminName: '', // 用户名
            adminPass: '', // 密码
        });

        // 处理登录的函数
        const handleLogin = async () => {
            let result = await mangerLoginService(LoginData.value); // 调用登录 API
            if (result.code == 200) { // 判断返回的状态码
                console.log('登入成功，用户名是:', result.data.adminName);
                // localStorage.setItem('userInfo', JSON.stringify(result.data.adminName)); // 可选：存储用户信息
                ElMessage.success('登录成功!'); // 显示成功消息
                console.log('登入的token值是:', tokenStore);
                tokenStore.setToken(result.data); // 存储 token
                router.push('/'); // 登录成功后重定向到主页
            } else {
                ElMessage.error('账号或密码错误!'); // 显示错误消息
            }
        };

        // 处理忘记密码的函数
        const forgotPassword = () => {
            ElMessage.info('请联系管理员重置密码。'); // 提示信息
        };

        // 显示注册提示的函数
        const showSignUpAlert = () => { 
            // 这里可以添加注册逻辑或提示
        };

        return {
            LoginData, // 返回响应式数据
            handleLogin, // 返回登录处理函数
            forgotPassword, // 返回忘记密码处理函数
            showSignUpAlert, // 返回注册提示函数
        };
    },
};
</script>

<style scoped>
* {
    font-family: "Poppins", sans-serif; /* 设置全局字体 */
    margin: 0; /* 去除默认外边距 */
    padding: 0; /* 去除默认内边距 */
    box-sizing: border-box; /* 包含边框和内边距在内的宽高计算 */
}

html,
body {
    height: 100%; /* 使 html 和 body 填满整个视口 */
    margin: 0; /* 去除默认外边距 */
}

.container {
    height: 100vh; /* 使 container 填满整个视口高度 */
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    background: #282a37; /* 设置背景颜色 */
}

.wrapper {
    width: 400px; /* 设置 wrapper 宽度 */
    height: 450px; /* 设置 wrapper 高度 */
    background: #3e404d; /* 设置背景颜色 */
    border-radius: 20px; /* 设置圆角 */
    display: flex; /* 使用 flex 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 水平居中子元素 */
    justify-content: center; /* 垂直居中子元素 */
    backdrop-filter: blur(15px); /* 背景模糊效果 */
}

.wrapper:hover {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5); /* 鼠标悬停时的阴影效果 */
    background: #46474e; /* 鼠标悬停时的背景颜色 */
}

.wrapper h1 {
    font-size: 2em; /* 设置标题字体大小 */
    color: #fff; /* 设置标题颜色 */
    text-align: center; /* 设置标题居中 */
}

.wrapper .input-box {
    position: relative; /* 相对定位用于 label 的绝对定位 */
    width: 310px; /* 设置输入框宽度 */
    margin: 30px 0; /* 设置上下外边距 */
    border-bottom: 2px solid #fff; /* 底部边框 */
}

.wrapper .input-box input {
    width: 100%; /* 输入框宽度填满父元素 */
    height: 50px; /* 设置输入框高度 */
    background: transparent; /* 输入框背景透明 */
    outline: none; /* 去除输入框焦点样式 */
    border: none; /* 去除输入框边框 */
    font-size: 1em; /* 设置字体大小 */
    color: #fff; /* 设置字体颜色 */
    padding: 0 40px 0 5px; /* 设置内边距 */
}

.wrapper .input-box label {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    left: 5px; /* 左边距 */
    transform: translateY(-50%); /* 垂直居中调整 */
    font-size: 1em; /* 设置字体大小 */
    color: #fff; /* 设置字体颜色 */
    pointer-events: none; /* 禁用标签的鼠标事件 */
    transition: 0.5s; /* 标签移动动画 */
}

.wrapper .input-box input:focus~label,
.wrapper .input-box input:valid~label {
    top: -5px; /* 聚焦或有效输入时标签上移 */
}

.wrapper .input-box .icon {
    position: absolute; /* 绝对定位 */
    right: 8px; /* 右边距 */
    color: #fff; /* 设置颜色 */
    font-size: 1.2em; /* 设置字体大小 */
    line-height: 57px; /* 使图标垂直居中 */
}

.wrapper .row {
    margin: -15px 0 15px; /* 设置上下外边距 */
    font-size: 0.9em; /* 设置字体大小 */
    color: #fff; /* 设置字体颜色 */
    display: flex; /* 使用 flex 布局 */
    justify-content: space-between; /* 子元素水平分散对齐 */
}

.wrapper .row a {
    color: #fff; /* 设置链接颜色 */
    text-decoration: none; /* 去除链接下划线 */
}

.wrapper .btn {
    width: 100%; /* 按钮宽度填满父元素 */
    height: 40px; /* 设置按钮高度 */
    background: #fff; /* 设置按钮背景颜色 */
    border: none; /* 去除按钮边框 */
    border-radius: 40px; /* 设置圆角 */
    cursor: pointer; /* 设置鼠标悬停时光标为手型 */
    font-size: 1em; /* 设置字体大小 */
    color: #000; /* 设置字体颜色 */
    margin-top: 10px

//引入接口
import { mangerLoginService } from '@/api/manger';
//调用接口并接收返回值
 const handleLogin = async () => {
            let result = await mangerLoginService(LoginData.value)
            if (result.code == 200) {
                console.log('登入成功，用户名是:', result.data.adminName);
                // localStorage.setItem('userInfo', JSON.stringify(result.data.adminName)); // 存储用户信息
                ElMessage.success('登录成功!')
                console.log('登入的token值是:', tokenStore);
                tokenStore.setToken(result.data);
                router.push('/')
            } else {
                ElMessage.error('账号或密码错误!')
            }
        }