vue实现界面登录注册

Vue 实现登录注册界面

使用 Vue.js 实现登录注册界面需要结合表单验证、状态管理和路由跳转等功能。以下是一个完整的实现方案：

创建 Vue 项目

使用 Vue CLI 创建新项目：

vue create auth-demo
cd auth-demo

安装必要依赖

添加路由和表单验证库：

npm install vue-router vuelidate axios

路由配置

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

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'

Vue.use(Router)

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

登录组件实现

src/views/Login.vue：

<template>
  <div class="auth-form">
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label>邮箱</label>
        <input v-model="email" type="email" required>
      </div>
      <div class="form-group">
        <label>密码</label>
        <input v-model="password" type="password" required>
      </div>
      <button type="submit">登录</button>
      <p>没有账号？<router-link to="/register">立即注册</router-link></p>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 这里添加登录逻辑
      console.log('登录信息:', this.email, this.password)
      // 通常这里会调用API然后跳转到主页
    }
  }
}
</script>

<style scoped>
.auth-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
</style>

注册组件实现

src/views/Register.vue：

<template>
  <div class="auth-form">
    <h2>注册</h2>
    <form @submit.prevent="handleRegister">
      <div class="form-group">
        <label>用户名</label>
        <input v-model="username" required>
      </div>
      <div class="form-group">
        <label>邮箱</label>
        <input v-model="email" type="email" required>
      </div>
      <div class="form-group">
        <label>密码</label>
        <input v-model="password" type="password" required>
      </div>
      <div class="form-group">
        <label>确认密码</label>
        <input v-model="confirmPassword" type="password" required>
      </div>
      <button type="submit">注册</button>
      <p>已有账号？<router-link to="/login">立即登录</router-link></p>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    handleRegister() {
      if (this.password !== this.confirmPassword) {
        alert('两次密码输入不一致')
        return
      }
      // 这里添加注册逻辑
      console.log('注册信息:', this.username, this.email, this.password)
      // 通常这里会调用API然后跳转到登录页
    }
  }
}
</script>

表单验证增强

使用 Vuelidate 进行更严格的表单验证：

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

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

API 请求封装

创建 src/api/auth.js 处理认证相关请求：

import axios from 'axios'

export default {
  login(credentials) {
    return axios.post('/api/login', credentials)
  },
  register(userInfo) {
    return axios.post('/api/register', userInfo)
  }
}

状态管理

使用 Vuex 管理用户认证状态：

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      state.isAuthenticated = true
    },
    logout(state) {
      state.user = null
      state.isAuthenticated = false
    }
  },
  actions: {
    login({ commit }, credentials) {
      return authApi.login(credentials)
        .then(response => {
          commit('setUser', response.data.user)
        })
    },
    register({ commit }, userInfo) {
      return authApi.register(userInfo)
    }
  }
})

路由守卫

在路由配置中添加导航守卫，保护需要认证的页面：

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

这个实现方案包含了 Vue 登录注册界面的核心功能，可以根据实际需求进行扩展和调整。