当前位置：首页 > VUE

前端vue实现登录页面

2026-02-24 07:18:58VUE

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交互和样式布局，可根据实际项目需求扩展更多功能如第三方登录、密码找回等。

前端vue实现登录页面