vue登录界面实现
实现 Vue 登录界面的步骤
创建 Vue 项目
使用 Vue CLI 创建新项目：
vue create login-demo
cd login-demo安装必要依赖
安装 axios 用于 HTTP 请求：
npm install axios创建登录组件
在 src/components 目录下创建 Login.vue 文件：
<template>
<div class="login-container">
<h2>用户登录</h2>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label>用户名</label>
<input v-model="username" type="text" required>
</div>
<div class="form-group">
<label>密码</label>
<input v-model="password" type="password" required>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async handleSubmit() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
});
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} catch (error) {
console.error('登录失败:', error);
}
}
}
};
</script>
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
</style>配置路由
修改 src/router/index.js：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
}
]
})创建模拟 API
在 src/main.js 中添加模拟拦截器：
import axios from 'axios';
axios.interceptors.request.use(config => {
if (config.url === '/api/login') {
return {
...config,
data: { token: 'mock-token' }
};
}
return config;
});添加导航守卫
在路由文件中添加全局前置守卫：
router.beforeEach((to, from, next) => {
if (to.path !== '/login' && !localStorage.getItem('token')) {
next('/login');
} else {
next();
}
});运行项目
启动开发服务器：
npm run serve样式优化
可以添加以下 CSS 增强视觉效果：
.login-container {
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 8px;
margin-top: 50px;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background: #42b983;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}表单验证增强
添加简单的客户端验证：
if (!this.username || !this.password) {
alert('请输入用户名和密码');
return;
}
