当前位置：首页 > VUE

用vue实现登陆

2026-01-21 05:06:15VUE

使用 Vue 实现登录功能

以下是一个基于 Vue.js 的登录功能实现方案，包含前端页面、表单验证和与后端交互的完整流程。

创建登录组件

在 Vue 项目中创建一个登录组件（如 Login.vue），包含基本的表单结构：

<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"
          placeholder="请输入用户名"
        />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          v-model="form.password"
          placeholder="请输入密码"
        />
      </div>
      <button type="submit" :disabled="loading">
        {{ loading ? '登录中...' : '登录' }}
      </button>
    </form>
  </div>
</template>

设置数据模型和验证

在组件中添加数据模型和简单的表单验证：

用vue实现登陆

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      loading: false,
    }
  },
  methods: {
    validateForm() {
      if (!this.form.username.trim()) {
        alert('请输入用户名')
        return false
      }
      if (!this.form.password) {
        alert('请输入密码')
        return false
      }
      return true
    },
  },
}
</script>

添加登录请求方法

实现与后端 API 的交互逻辑：

<script>
import axios from 'axios'

export default {
  methods: {
    async handleSubmit() {
      if (!this.validateForm()) return

      this.loading = true
      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 || '登录失败')
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

添加样式

为登录组件添加基本样式：

用vue实现登陆

<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;
  box-sizing: border-box;
}
button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  width: 100%;
}
button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>

路由配置

在 Vue Router 中配置登录路由：

import Login from './views/Login.vue'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  // 其他路由...
]

状态管理（可选）

对于更复杂的应用，可以使用 Vuex 管理登录状态：

// store/modules/auth.js
export default {
  state: {
    user: null,
    token: localStorage.getItem('token') || null,
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    logout(state) {
      state.user = null
      state.token = null
      localStorage.removeItem('token')
    },
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('setUser', response.data.user)
      commit('setToken', response.data.token)
    },
  },
}

表单验证增强（可选）

可以使用 Vuelidate 或类似的库进行更强大的表单验证：

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    }
  },
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) },
    },
  },
}