vue 3.0登录界面实现
实现Vue 3.0登录界面
环境准备
确保已安装Node.js（建议版本14+）和Vue CLI（全局安装命令：npm install -g @vue/cli）。通过Vue CLI创建新项目：
vue create vue-login-demo选择Vue 3模板，完成项目初始化。
组件结构与模板
在src/components下创建LoginForm.vue文件，包含表单模板：
<template>
<div class="login-container">
<h2>用户登录</h2>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="username">用户名</label>
<input
type="text"
id="username"
v-model="form.username"
placeholder="请输入用户名"
required
/>
</div>
<div class="form-group">
<label for="password">密码</label>
<input
type="password"
id="password"
v-model="form.password"
placeholder="请输入密码"
required
/>
</div>
<button type="submit" class="submit-btn">登录</button>
</form>
</div>
</template>逻辑与响应式数据
使用Vue 3的ref或reactive定义表单数据和方法：
<script>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
const form = reactive({
username: '',
password: ''
});
const handleSubmit = () => {
// 模拟登录验证
if (form.username === 'admin' && form.password === '123456') {
alert('登录成功');
router.push('/dashboard');
} else {
alert('用户名或密码错误');
}
};
return { form, handleSubmit };
}
};
</script>样式设计
添加CSS样式增强视觉效果：
<style scoped>
.login-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.submit-btn {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.submit-btn:hover {
background-color: #369f6b;
}
</style>路由配置
在src/router/index.js中配置登录页路由（需先安装vue-router@4）：
import { createRouter, createWebHistory } from 'vue-router';
import LoginForm from '../components/LoginForm.vue';
const routes = [
{
path: '/login',
name: 'Login',
component: LoginForm
},
// 其他路由...
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;表单验证增强
使用vuelidate或自定义验证逻辑提升安全性：
// 示例：自定义验证
const validateForm = () => {
const errors = [];
if (!form.username.trim()) errors.push('用户名不能为空');
if (form.password.length < 6) errors.push('密码长度至少6位');
return errors;
};
const handleSubmit = () => {
const errors = validateForm();
if (errors.length > 0) {
alert(errors.join('\n'));
return;
}
// 提交逻辑...
};API集成
实际项目中替换模拟验证为后端API调用：
import axios from 'axios';
const handleSubmit = async () => {
try {
const response = await axios.post('/api/login', form);
if (response.data.success) {
localStorage.setItem('token', response.data.token);
router.push('/dashboard');
}
} catch (error) {
alert(error.response?.data?.message || '登录失败');
}
};
