当前位置：首页 > VUE

vue实现的登录界面

2026-01-22 06:08:00VUE

以下是一个基于 Vue.js 的登录界面实现方案，包含基础功能与关键代码示例：

基础结构

使用 Vue 单文件组件（SFC）组织代码，模板部分包含表单元素：

<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">用户名</label>
        <input 
          type="text" 
          id="username" 
          v-model="form.username" 
          required
        >
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input 
          type="password" 
          id="password" 
          v-model="form.password" 
          required
        >
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

数据绑定与验证

通过 Vue 的响应式系统管理表单数据：

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      if (!this.form.username || !this.form.password) {
        alert('请填写完整信息');
        return;
      }
      this.$emit('login', this.form);
    }
  }
}
</script>

样式设计

使用 CSS 增强视觉体验：

<style scoped>
.login-container {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #42b983;
  color: white;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}
</style>

扩展功能建议

添加输入验证逻辑（如密码复杂度）
集成 Vue Router 实现登录后跳转
使用 Vuex 管理全局登录状态
添加第三方登录（如 OAuth）
实现记住密码功能

与后端交互示例

通过 axios 发送登录请求：

vue实现的登录界面

import axios from 'axios';

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) {
      console.error('登录失败:', error);
    }
  }
}

以上实现可根据实际项目需求进行调整和扩展。