vue实现登录代码
以下是一个基于 Vue.js 的登录功能实现示例，包含表单验证和异步请求处理：
基础组件结构
<template>
<div class="login-container">
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="username">用户名</label>
<input
type="text"
id="username"
v-model="form.username"
@blur="validateField('username')"
>
<span class="error" v-if="errors.username">{{ errors.username }}</span>
</div>
<div class="form-group">
<label for="password">密码</label>
<input
type="password"
id="password"
v-model="form.password"
@blur="validateField('password')"
>
<span class="error" v-if="errors.password">{{ errors.password }}</span>
</div>
<button type="submit" :disabled="isSubmitting">
{{ isSubmitting ? '登录中...' : '登录' }}
</button>
</form>
</div>
</template>脚本部分
<script>
import { reactive, ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
export default {
setup() {
const form = reactive({
username: '',
password: ''
})
const errors = reactive({
username: '',
password: ''
})
const isSubmitting = ref(false)
const router = useRouter()
const validateField = (field) => {
if (field === 'username' && !form.username.trim()) {
errors.username = '请输入用户名'
} else if (field === 'password' && !form.password.trim()) {
errors.password = '请输入密码'
} else {
errors[field] = ''
}
}
const handleSubmit = async () => {
validateField('username')
validateField('password')
if (errors.username || errors.password) return
isSubmitting.value = true
try {
const response = await axios.post('/api/login', {
username: form.username,
password: form.password
})
localStorage.setItem('token', response.data.token)
router.push('/dashboard')
} catch (error) {
alert(error.response?.data?.message || '登录失败')
} finally {
isSubmitting.value = false
}
}
return {
form,
errors,
isSubmitting,
handleSubmit,
validateField
}
}
}
</script>样式部分
<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;
border: 1px solid #ddd;
border-radius: 4px;
}
.error {
color: red;
font-size: 12px;
}
button {
background-color: #42b983;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:disabled {
opacity: 0.7;
cursor: not-allowed;
}
</style>关键功能说明
表单验证 在输入框失去焦点时触发验证，确保必填字段不为空。错误信息会实时显示在对应字段下方。
登录状态管理
使用 isSubmitting 状态防止重复提交，并在请求过程中禁用按钮。
API请求
使用 axios 发送 POST 请求到 /api/login 端点，处理成功响应和错误情况。
路由跳转 登录成功后使用 vue-router 跳转到 dashboard 页面。
Token存储 将服务器返回的 token 存储在 localStorage 中，便于后续请求的身份验证。
这个实现可以根据实际需求进行扩展，例如添加记住密码功能、验证码验证等。
