<template>
<div class="login-container">
<div class="login-box">
<!-- 头部Logo
与标题 -->
<div class="login-header">
<div class="login-logo">
<i class="fas fa-shield-alt"></i>
</div>
<h2>停车场管理系统</h2>
</div>
<!-- 登录表单 -->
<div class="login-form">
<!-- 用户名输入 -->
<div class="form-group">
<label for="username">用户名</label>
<div class="input-group">
<i class="fas fa-user"></i>
<input
type="text"
id="username"
v-model="form.username"
placeholder="请输入用户名"
:class="{'error'
: error.value.username}"
>
</div>
<p class="error-message" v-if="error.username">{{ error.value.username }}</p>
</div>
<!-- 密码输入 -->
<div class="form-group">
<label for="password">密码</label>
<div class="input-group">
<i class="fas fa-lock"></i>
<input
type="password"
id="password"
v-model="form.password"
placeholder="请输入密码"
:class="{'error'
: error.value.password}"
>
</div>
<p class="error-message" v-if="error.password">{{ error.value.password }}</p>
</div>
<!-- 登录按钮 -->
<button
class="btn btn-primary btn-block"
@click="handleLogin"
:disabled="loading"
>
<span v-if="loading">
<i class="fas fa-spinner fa-spin"></i> 登录中...
</span>
<span v-else>
登录 <i class="fas fa-sign-in-alt"></i>
</span>
</button>
<!-- 版本信息 -->
<div class="login-footer">
<p>版本号
: 1.0.0</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive,onMounted } from 'vue';
import { login } from '@/services/loginService.js'; // 引入登录服务
import {useRoute, useRouter} from 'vue-router'; // 路由跳转
// 响应式数据
const form = reactive({
username
: '',
password
: ''
});
//状态管理
const loading = ref(false);
const error = ref({
username
: '',
password
: '',
general
: ''
});
const router = useRouter(); // 初始化路由实例
const route = useRoute();
// 表单验证
const validateForm = () => {
let isValid = true;
if (!form.username) {
error.value.username = '请输入用户名';
isValid = false;
} else {
error.value.username = '';
}
if (!form.password) {
error.value.password = '请输入密码';
isValid = false;
} else {
error.value.password = '';
}
return isValid;
};
// 登录处理
const handleLogin = async () => {
// 重置错误信息
error.value = {
username
: '',
password
: '',
general
: ''
};
//验证表单
if (!validateForm()) {
return;
}
loading.value = true;
try {
// 调用登录接口APi（对接 loginService.js）
const response = await login(form.username, form.password);
//处理后端响应
if (response.code === 200 && response.data) {
//存储用户信息
localStorage.setItem('token', response.data.token || '');
localStorage.setItem('userId', response.data.id || '');
localStorage.setItem('userType', response.data.type || '');
localStorage.setItem('username', response.data.username || '');
localStorage.setItem('isLoggedIn', 'true');
console.log('登录成功');
// 登录成功，跳转到首页
const redirect = route.query.redirect || '/home';
router.push(redirect);
}
} catch (err) {
if (err.code ===
1005) {
error.value.general = '用户名或密码错误';
} else {
error.value.general = err.message || '登录失败，请稍后重试';
}
} finally {
loading.value = false;
}
};
// 页面加载时检查登录状态
onMounted(() => {
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
if (isLoggedIn) {
router.push('/home');
}
});
</script>
<style scoped>
.login-container {
display
: flex;
justify-content
: center;
align-items
: center;
min-
height: 100vh;
background-color
: #f5f5f5;
background-image
: url('https
://picsum.photos/id/1048/1920/1080');
background-size
: cover;
background-position
: center;
position
: relative;
}
.login-container
::before {
content
: '';
position
: absolute;
top
: 0;
left
: 0;
width
: 100%;
height: 100%;
background-color
: rgba(0, 0, 0, 0.5);
}
.login-box {
background-color
: white;
border-radius
: 10px;
box-shadow
: 0 10px 25px rgba(0, 0, 0, 0.1);
width
: 400px;
max-width
: 90
%;
padding
: 40px;
position
: relative;
z-index
: 1;
}
.login-logo {
text-align
: center;
margin-bottom
: 30px;
}
.login-logo i {
font-size
: 48px;
color
: #1abc9c;
margin-bottom
: 10px;
}
.login-logo h2 {
color
: #2c3e50;
font-size
: 24px;
}
.form-group {
margin-bottom
: 20px;
}
.form-group label {
display
: block;
margin-bottom
: 8px;
color
: #2c3e50;
font-weight
: 500;
}
.input-group {
display
: flex;
align-items
: center;
border
: 1px solid #ddd;
border-radius
: 4px;
padding
: 10px;
}
.input-group i {
width
: 25px;
color
: #999;
}
.input-group input {
flex
: 1;
border
: none;
outline
: none;
padding-left
: 10px;
font-size
: 16px;
}
.remember-me {
display
: flex;
align-items
: center;
}
.remember-me input {
margin-right
: 8px;
}
.btn-block {
width
: 100%;
margin-top
: 20px;
}
.login-footer {
text-align
: center;
margin-top
: 20px;
color
: #999;
font-size
: 14px;
}
.error-message {
color
: #e74c3c;
margin-bottom
: 15px;
text-align
: center;
}
</style>@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
// 用户登录
@PostMapping("/login")
public Resp<User> login(@RequestBody LoginForm loginForm) {
User user = userService.login(loginForm.getUsername(), loginForm.getPassword());
return Resp.ok(user);
}
本文探讨了CSS中使用100%高度布局时遇到的问题及解决方案，特别是当父容器未显式设置高度时子元素无法正确继承高度的情况。
扫一扫
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
