vue登录页面实现

Vue 登录页面实现步骤

创建Vue项目

使用Vue CLI创建新项目：

vue create login-app

安装必要依赖

安装路由和表单验证库（如Vuelidate）：

npm install vue-router vuelidate

创建登录组件

在src/components下创建Login.vue文件：

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

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

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.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;
  border-radius: 4px;
  cursor: pointer;
}
</style>

配置路由

在src/router/index.js中设置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

添加表单验证

使用Vuelidate进行基本验证：

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required },
    password: { required }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 验证通过后的逻辑
      }
    }
  }
}
</script>

添加API请求

在handleSubmit方法中添加实际登录请求：

methods: {
  async handleSubmit() {
    this.$v.$touch()
    if (!this.$v.$invalid) {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        // 处理登录成功后的逻辑
      } catch (error) {
        // 处理错误
      }
    }
  }
}

添加状态管理

使用Vuex存储登录状态：

// store/index.js
export default new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    setAuth(state, payload) {
      state.isAuthenticated = payload.isAuthenticated
      state.user = payload.user
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setAuth', {
            isAuthenticated: true,
            user: response.data.user
          })
        })
    }
  }
})

完善登录组件

更新Login.vue使用Vuex：

methods: {
  async handleSubmit() {
    this.$v.$touch()
    if (!this.$v.$invalid) {
      try {
        await this.$store.dispatch('login', {
          username: this.username,
          password: this.password
        })
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败')
      }
    }
  }
}

添加路由守卫

在路由配置中添加导航守卫：

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

添加错误提示

在模板中添加验证错误提示：

<div class="form-group">
  <label>用户名</label>
  <input 
    type="text" 
    v-model="username"
    :class="{ 'is-invalid': $v.username.$error }"
  >
  <div v-if="$v.username.$error" class="invalid-feedback">
    用户名不能为空
  </div>
</div>

添加加载状态

在提交时显示加载状态：

data() {
  return {
    username: '',
    password: '',
    isLoading: false
  }
},
methods: {
  async handleSubmit() {
    this.$v.$touch()
    if (!this.$v.$invalid) {
      this.isLoading = true
      try {
        await this.$store.dispatch('login', {
          username: this.username,
          password: this.password
        })
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败')
      } finally {
        this.isLoading = false
      }
    }
  }
}

添加记住我功能

扩展登录表单和数据模型：

<div class="form-group">
  <input type="checkbox" v-model="rememberMe">
  <label>记住我</label>
</div>

data() {
  return {
    username: '',
    password: '',
    rememberMe: false
  }
}