vue 登录页面实现
实现 Vue 登录页面的步骤
创建 Vue 项目
使用 Vue CLI 创建一个新项目，确保已安装 Vue CLI。运行以下命令：
vue create login-page选择默认配置或手动配置，根据需求添加 Router 和 Vuex。
设计登录表单
在 src/views 或 src/components 下创建 Login.vue 文件，包含用户名和密码输入框以及提交按钮。
<template>
<div class="login-container">
<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>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleSubmit() {
// 处理登录逻辑
}
}
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
</style>添加表单验证
使用 Vuelidate 或手动验证表单输入，确保用户名和密码符合要求。
<script>
import { required, minLength } from 'vuelidate/lib/validators'
export default {
data() {
return {
username: '',
password: ''
}
},
validations: {
username: { required, minLength: minLength(3) },
password: { required, minLength: minLength(6) }
},
methods: {
handleSubmit() {
if (this.$v.$invalid) {
alert('请填写正确的用户名和密码')
return
}
// 提交逻辑
}
}
}
</script>处理登录逻辑
在 handleSubmit 方法中调用 API 进行身份验证，使用 Axios 发送 POST 请求。
<script>
import axios from 'axios'
export default {
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) {
alert('登录失败，请检查用户名和密码')
}
}
}
}
</script>添加路由保护
在 src/router/index.js 中配置路由守卫，防止未登录用户访问受保护页面。
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/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样式优化
使用 CSS 或 UI 库（如 Element UI 或 Vuetify）美化登录页面。
<template>
<el-form class="login-form" @submit.native.prevent="handleSubmit">
<el-form-item label="用户名">
<el-input v-model="username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-button type="primary" native-type="submit">登录</el-button>
</el-form>
</template>响应式设计
确保登录页面在不同设备上显示正常，添加媒体查询或使用 Flexbox/Grid 布局。
.login-form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 4px;
}
@media (max-width: 600px) {
.login-form {
width: 90%;
}
}通过以上步骤，可以实现一个功能完善且美观的 Vue 登录页面。
