vue框架实现登录
Vue 框架实现登录功能
使用 Vue 框架实现登录功能需要结合前端和后端交互，以下是一个完整的实现方案。
创建登录表单
在 Vue 组件中创建登录表单，包含用户名和密码输入框。
<template>
<div class="login-container">
<form @submit.prevent="handleLogin">
<div class="form-group">
<label for="username">用户名</label>
<input
type="text"
id="username"
v-model="loginForm.username"
placeholder="请输入用户名"
/>
</div>
<div class="form-group">
<label for="password">密码</label>
<input
type="password"
id="password"
v-model="loginForm.password"
placeholder="请输入密码"
/>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>定义数据和方法
在 Vue 组件的 script 部分定义登录表单的数据和登录方法。
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
}
}
},
methods: {
async handleLogin() {
try {
const response = await this.$axios.post('/api/login', this.loginForm)
if (response.data.success) {
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
}
} catch (error) {
console.error('登录失败:', error)
}
}
}
}
</script>使用 Axios 发送请求
安装并配置 Axios 用于发送 HTTP 请求。
npm install axios在项目的入口文件（如 main.js）中配置 Axios。
import axios from 'axios'
Vue.prototype.$axios = axios后端接口对接
确保后端提供登录接口，接收用户名和密码，返回 token 或其他认证信息。
// 示例 Node.js 后端接口
app.post('/api/login', (req, res) => {
const { username, password } = req.body
if (username === 'admin' && password === '123456') {
res.json({ success: true, token: 'generated_token' })
} else {
res.status(401).json({ success: false, message: '用户名或密码错误' })
}
})路由守卫
使用 Vue Router 的路由守卫保护需要登录的页面。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})样式优化
为登录表单添加基础样式，提升用户体验。
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
cursor: pointer;
}
</style>通过以上步骤，可以实现一个完整的 Vue 登录功能，包括表单处理、后端交互、路由保护和样式优化。
