前端vue实现登录页面
Vue 登录页面实现步骤
项目初始化与依赖安装
使用 Vue CLI 创建项目并安装必要依赖（如 Vue Router、Axios）：
vue create login-demo
cd login-demo
npm install vue-router axios路由配置
在 src/router/index.js 中配置登录路由：
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
const routes = [
{
path: '/login',
name: 'Login',
component: Login
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router登录组件实现
创建 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>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
export default {
setup() {
const router = useRouter()
const form = reactive({
username: '',
password: ''
})
const handleSubmit = async () => {
try {
const response = await axios.post('/api/login', form)
localStorage.setItem('token', response.data.token)
router.push('/dashboard')
} catch (error) {
alert('登录失败: ' + error.response.data.message)
}
}
return { form, handleSubmit }
}
}
</script>
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
cursor: pointer;
}
</style>表单验证增强
使用 Vuelidate 进行表单验证（需安装 vuelidate）：
import { required, minLength } from 'vuelidate/lib/validators'
validations: {
form: {
username: { required },
password: { required, minLength: minLength(6) }
}
}API 请求封装
创建 src/api/auth.js 封装登录请求：
import axios from 'axios'
export const login = (credentials) => {
return axios.post('/api/login', credentials)
}响应式布局优化
添加媒体查询适应移动端：
@media (max-width: 600px) {
.login-container {
padding: 10px;
width: 90%;
}
}安全增强措施
实现以下安全措施：
- 密码输入框添加显示/隐藏切换功能
- 提交按钮添加防重复点击处理
- CSRF Token 防护（根据后端框架配置）
状态管理整合
如需全局管理用户状态，可结合 Vuex：
// store/modules/auth.js
const actions = {
async login({ commit }, credentials) {
const response = await login(credentials)
commit('SET_USER', response.data.user)
return response
}
}以上实现包含基础登录功能、表单验证、API交互和样式布局，可根据实际项目需求扩展更多功能如第三方登录、密码找回等。
