前端vue登录功能实现
登录功能实现步骤
环境准备 确保已安装Vue CLI和Node.js，创建Vue项目并安装必要依赖如axios和vue-router。
创建登录组件
在src/components下创建Login.vue文件，包含表单、用户名、密码输入框及提交按钮。
<template>
<div>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</div>
</template>数据绑定与方法
在<script>部分定义数据模型和登录方法，使用axios发送POST请求。
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
handleLogin() {
axios.post('/api/login', {
username: this.username,
password: this.password
})
.then(response => {
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
})
.catch(error => {
console.error('登录失败:', error);
});
}
}
};
</script>路由配置
在src/router/index.js中配置登录路由，确保未登录用户重定向到登录页。
import Vue from 'vue';
import Router from 'vue-router';
import Login from '../components/Login.vue';
import Dashboard from '../components/Dashboard.vue';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
});
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !localStorage.getItem('token')) {
next('/login');
} else {
next();
}
});
export default router;后端接口
确保后端提供/api/login接口接收用户名和密码，返回token或错误信息。
样式优化 可添加CSS美化表单，使用框架如Element UI或Vuetify加速开发。
<style scoped>
form {
max-width: 300px;
margin: 0 auto;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
}
</style>表单验证 添加基础验证，如非空检查。
methods: {
handleLogin() {
if (!this.username || !this.password) {
alert('请输入用户名和密码');
return;
}
// 其余登录逻辑
}
}
