vue实现登录框

创建Vue登录组件

使用Vue CLI或手动创建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" 
          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>

设置数据绑定与验证

在script部分设置响应式数据和基础验证：

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {}
    }
  },
  methods: {
    validateForm() {
      this.errors = {}
      if (!this.form.username) this.errors.username = '请输入用户名'
      if (!this.form.password) this.errors.password = '请输入密码'
      return Object.keys(this.errors).length === 0
    }
  }
}
</script>

实现登录逻辑

添加提交方法和API调用：

<script>
import axios from 'axios'

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

      try {
        const response = await axios.post('/api/login', this.form)
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        this.errors.api = error.response?.data?.message || '登录失败'
      }
    }
  }
}
</script>

添加样式增强体验

在style部分添加基础样式：

<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;
  border: 1px solid #ddd;
}
button {
  background: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}
.error {
  color: red;
  font-size: 12px;
}
</style>

添加状态管理与路由保护

在Vuex中设置登录状态管理：

// store.js
export default new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    SET_AUTH(state, payload) {
      state.isAuthenticated = true
      state.user = payload.user
    }
  }
})

添加路由导航守卫：

// router.js
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.isAuthenticated) {
      next({ path: '/login' })
    } else {
      next()
    }
  } else {
    next()
  }
})