vue实现登录框

Vue 实现登录框的实现方法

创建基础登录组件

在 Vue 项目中创建一个名为 LoginForm.vue 的组件文件，包含用户名、密码输入框和提交按钮。使用 v-model 进行双向数据绑定，监听表单提交事件。

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交登录信息:', this.form)
      // 这里添加登录逻辑
    }
  }
}
</script>

添加表单验证

使用 Vue 的 computed 属性或第三方库如 VeeValidate 进行表单验证。确保用户名和密码符合要求（如非空、长度限制等）。

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    validateForm() {
      let isValid = true
      if (!this.form.username) {
        this.errors.username = '请输入用户名'
        isValid = false
      }
      if (!this.form.password) {
        this.errors.password = '请输入密码'
        isValid = false
      }
      return isValid
    },
    handleSubmit() {
      if (this.validateForm()) {
        console.log('表单验证通过，提交登录信息:', this.form)
      }
    }
  }
}
</script>

样式美化

为登录表单添加 CSS 样式，提升用户体验。可以使用 Flexbox 或 CSS Grid 进行布局。

<style scoped>
form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
div {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

添加登录状态管理

使用 Vuex 或 Pinia 管理登录状态，处理登录成功或失败的情况。

// 在 Vuex store 中
state: {
  isLoggedIn: false,
  user: null
},
mutations: {
  loginSuccess(state, user) {
    state.isLoggedIn = true
    state.user = user
  },
  loginFailure(state) {
    state.isLoggedIn = false
    state.user = null
  }
}

实现 API 请求

使用 axios 或其他 HTTP 客户端与后端 API 通信，处理登录请求。

methods: {
  async handleSubmit() {
    if (this.validateForm()) {
      try {
        const response = await axios.post('/api/login', this.form)
        this.$store.commit('loginSuccess', response.data.user)
        this.$router.push('/dashboard')
      } catch (error) {
        this.errors.submit = '登录失败，请检查用户名和密码'
        this.$store.commit('loginFailure')
      }
    }
  }
}

添加加载状态和反馈

在登录过程中显示加载状态，给用户明确的反馈。

<template>
  <button type="submit" :disabled="isLoading">
    {{ isLoading ? '登录中...' : '登录' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    async handleSubmit() {
      if (this.validateForm()) {
        this.isLoading = true
        try {
          // API 请求
        } finally {
          this.isLoading = false
        }
      }
    }
  }
}
</script>