vue实现网页注册登录

Vue实现网页注册登录功能

环境准备 确保已安装Node.js和Vue CLI，创建一个新的Vue项目：

vue create auth-demo

安装必要依赖 需要安装vue-router和axios：

npm install vue-router axios

项目结构

src/
├── components/
│   ├── Login.vue
│   └── Register.vue
├── views/
│   ├── Home.vue
│   └── Dashboard.vue
├── router/
│   └── index.js
├── App.vue
└── main.js

路由配置

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

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

Vue.use(Router)

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

登录组件实现

Login.vue示例代码：

<template>
  <div class="login">
    <h2>用户登录</h2>
    <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>
    <p>没有账号？<router-link to="/register">立即注册</router-link></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await this.$axios.post('/api/login', {
          email: this.email,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败: ' + error.response.data.message)
      }
    }
  }
}
</script>

注册组件实现

Register.vue示例代码：

<template>
  <div class="register">
    <h2>用户注册</h2>
    <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>
      <button type="submit">注册</button>
    </form>
    <p>已有账号？<router-link to="/login">立即登录</router-link></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      password: ''
    }
  },
  methods: {
    async handleRegister() {
      try {
        await this.$axios.post('/api/register', {
          name: this.name,
          email: this.email,
          password: this.password
        })
        alert('注册成功，请登录')
        this.$router.push('/login')
      } catch (error) {
        alert('注册失败: ' + error.response.data.message)
      }
    }
  }
}
</script>

状态管理（可选）

对于更复杂的应用，可以使用Vuex管理登录状态：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    loginSuccess(state, user) {
      state.isAuthenticated = true
      state.user = user
    },
    logout(state) {
      state.isAuthenticated = false
      state.user = null
    }
  }
})

路由守卫

添加路由守卫保护需要认证的页面：

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.path !== '/login' && to.path !== '/register' && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

后端API对接

示例API请求配置（在main.js中）：

import axios from 'axios'
axios.defaults.baseURL = 'http://your-api-domain.com/api'
Vue.prototype.$axios = axios

样式优化

添加基础样式增强用户体验：

/* 在App.vue中 */
form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

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

button {
  background: #42b983;
  color: white;
  border: none;
  padding: 10px;
  width: 100%;
  cursor: pointer;
}

.router-link {
  color: #42b983;
  text-decoration: none;
}

以上实现包含了Vue项目中注册登录功能的核心要素，可根据实际需求进行调整和扩展。