当前位置：首页 > VUE

Vue实现登陆注册

2026-01-23 14:02:24VUE

Vue 登录注册功能实现

准备工作

确保已安装 Vue CLI 和必要的依赖，如 Vue Router 和 axios。创建 Vue 项目后，设置路由和状态管理。

创建登录注册组件

在 src/components 目录下创建 Login.vue 和 Register.vue 组件。使用 Vue 的单文件组件结构，包含模板、脚本和样式。

<!-- Login.vue -->
<template>
  <div class="login-form">
    <h3>登录</h3>
    <form @submit.prevent="handleLogin">
      <input v-model="email" type="email" placeholder="邮箱" required>
      <input v-model="password" type="password" placeholder="密码" required>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      this.$store.dispatch('login', {
        email: this.email,
        password: this.password
      })
    }
  }
}
</script>

配置路由

在 src/router/index.js 中配置登录和注册页面的路由。

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

Vue.use(Router)

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

状态管理

使用 Vuex 管理用户状态。在 src/store/index.js 中设置登录和注册的 actions。

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('SET_USER', response.data.user)
    },
    async register({ commit }, userData) {
      const response = await axios.post('/api/register', userData)
      commit('SET_USER', response.data.user)
    }
  }
})

表单验证

在登录和注册表单中添加基本的验证逻辑，确保用户输入符合要求。

<!-- Register.vue -->
<template>
  <div class="register-form">
    <h3>注册</h3>
    <form @submit.prevent="handleRegister">
      <input v-model="name" type="text" placeholder="姓名" required>
      <input v-model="email" type="email" placeholder="邮箱" required>
      <input v-model="password" type="password" placeholder="密码" required>
      <input v-model="confirmPassword" type="password" placeholder="确认密码" required>
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    handleRegister() {
      if (this.password !== this.confirmPassword) {
        alert('两次输入的密码不一致')
        return
      }
      this.$store.dispatch('register', {
        name: this.name,
        email: this.email,
        password: this.password
      })
    }
  }
}
</script>

后端接口

确保后端提供 /api/login 和 /api/register 接口，处理用户认证和数据存储。使用 JWT 或其他认证机制返回令牌。

样式优化

添加 CSS 样式美化表单，提升用户体验。

.login-form, .register-form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
}

button {
  width: 100%;
  padding: 8px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
}

通过以上步骤，可以实现基本的登录和注册功能。根据需求可以进一步扩展，如添加密码重置、第三方登录等功能。

Vue实现登陆注册