使用vue实现登录功能
创建Vue项目
使用Vue CLI初始化项目：
vue create vue-login-demo选择默认配置或手动配置（如Router、Vuex等）。
安装依赖
如需使用Axios发送请求：
npm install axios设计登录表单组件
在src/components/Login.vue中创建表单：
<template>
<div class="login">
<h3>登录</h3>
<form @submit.prevent="handleSubmit">
<input v-model="username" type="text" placeholder="用户名" required />
<input v-model="password" type="password" placeholder="密码" required />
<button type="submit">登录</button>
</form>
<p v-if="error" class="error">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
error: ''
};
},
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 (err) {
this.error = '登录失败，请检查用户名或密码';
}
}
}
};
</script>
<style scoped>
.error { color: red; }
</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', component: Login },
{ path: '/dashboard', component: () => import('../components/Dashboard.vue'), meta: { requiresAuth: true } }
]
});添加路由守卫
在src/router/index.js中补充全局前置守卫：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});后端接口示例（可选）
使用Node.js模拟登录接口：
const express = require('express');
const app = express();
app.use(express.json());
app.post('/api/login', (req, res) => {
if (req.body.username === 'admin' && req.body.password === '123456') {
res.json({ token: 'fake-jwt-token' });
} else {
res.status(401).send('认证失败');
}
});
app.listen(3000, () => console.log('Server running on port 3000'));集成Axios
在src/main.js中配置Axios全局实例：
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';
Vue.prototype.$axios = axios;状态管理（可选）
如需使用Vuex管理登录状态：
// src/store/index.js
export default new Vuex.Store({
state: {
isAuthenticated: false,
user: null
},
mutations: {
loginSuccess(state, user) {
state.isAuthenticated = true;
state.user = user;
},
logout(state) {
state.isAuthenticated = false;
state.user = null;
}
}
});表单验证增强
使用Vuelidate进行客户端验证：
npm install vuelidate在组件中引入：
import { required, minLength } from 'vuelidate/lib/validators';
export default {
data() { /* ... */ },
validations: {
username: { required },
password: { required, minLength: minLength(6) }
},
methods: {
handleSubmit() {
this.$v.$touch();
if (this.$v.$invalid) return;
// 提交逻辑
}
}
};
