前端vue实现登录页面
创建Vue项目
使用Vue CLI快速初始化项目：
npm install -g @vue/cli
vue create login-demo
cd login-demo安装必要依赖
若需使用路由和状态管理，安装Vue Router和Vuex：
npm install vue-router vuex axios设计登录页面结构
在src/views下创建Login.vue，包含表单基础结构：
<template>
<div class="login-container">
<h2>用户登录</h2>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label>用户名</label>
<input v-model="form.username" type="text" required />
</div>
<div class="form-group">
<label>密码</label>
<input v-model="form.password" type="password" required />
</div>
<button type="submit">登录</button>
</form>
</div>
</template>实现数据绑定与验证
在<script>部分添加响应式数据和提交逻辑：
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
async handleSubmit() {
try {
const response = await axios.post('/api/login', this.form)
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
alert('登录失败: ' + error.response.data.message)
}
}
}
}
</script>添加样式
在<style>中编写基础样式：
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 8px;
}
button {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
}
</style>配置路由
在src/router/index.js中设置登录页路由：
import Login from '../views/Login.vue'
const routes = [
{
path: '/login',
name: 'Login',
component: Login
}
]集成状态管理（可选）
在Vuex中存储登录状态：
// src/store/index.js
export default new Vuex.Store({
state: {
isAuthenticated: false
},
mutations: {
setAuth(state, status) {
state.isAuthenticated = status
}
}
})表单验证增强
使用VeeValidate或自定义验证规则：
methods: {
validateForm() {
if (!this.form.username.trim()) return '用户名不能为空'
if (this.form.password.length < 6) return '密码至少6位'
return null
},
async handleSubmit() {
const error = this.validateForm()
if (error) return alert(error)
// 后续提交逻辑...
}
}响应式布局优化
通过媒体查询适配移动端：
@media (max-width: 600px) {
.login-container {
padding: 15px;
margin: 20px;
}
}
