vue实现登录注册

实现登录注册功能

在Vue中实现登录注册功能需要结合前端和后端交互，以下是具体实现步骤。

创建登录注册表单

使用Vue的模板语法创建登录和注册表单，包含用户名、密码等字段。

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model="form.username" placeholder="用户名" />
      <input v-model="form.password" placeholder="密码" type="password" />
      <button type="submit">{{ isLogin ? '登录' : '注册' }}</button>
    </form>
    <button @click="toggleMode">{{ isLogin ? '切换到注册' : '切换到登录' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: true,
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    toggleMode() {
      this.isLogin = !this.isLogin
    },
    handleSubmit() {
      if (this.isLogin) {
        this.login()
      } else {
        this.register()
      }
    }
  }
}
</script>

处理登录注册逻辑

通过axios发送HTTP请求与后端API交互，实现用户登录和注册功能。

import axios from 'axios'

export default {
  methods: {
    async login() {
      try {
        const response = await axios.post('/api/login', this.form)
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败')
      }
    },
    async register() {
      try {
        await axios.post('/api/register', this.form)
        alert('注册成功')
        this.isLogin = true
      } catch (error) {
        alert('注册失败')
      }
    }
  }
}

路由配置

使用Vue Router配置路由，保护需要登录才能访问的页面。

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

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    next('/')
  } else {
    next()
  }
})

export default router

状态管理

使用Vuex管理用户登录状态，实现全局状态共享。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    login({ commit }, user) {
      commit('setUser', user)
    },
    logout({ commit }) {
      commit('setUser', null)
    }
  }
})

表单验证

添加表单验证功能，确保用户输入符合要求。

export default {
  data() {
    return {
      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
    },
    handleSubmit() {
      if (!this.validateForm()) return
      // 继续处理登录或注册
    }
  }
}

响应式设计

添加响应式样式，优化移动端用户体验。

<style scoped>
form {
  max-width: 400px;
  margin: 0 auto;
}
input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
button {
  width: 100%;
}
</style>