当前位置：首页 > VUE

node vue实现登录注册

2026-02-24 02:06:39VUE

实现登录注册功能

使用Node.js和Vue.js实现登录注册功能需要分为后端（Node.js）和前端（Vue.js）两部分。以下是一个完整的实现方案。

后端部分（Node.js）

使用Express框架搭建后端服务，处理用户注册和登录请求。

安装依赖

npm install express body-parser bcryptjs jsonwebtoken mongoose cors

创建后端代码

const express = require('express');
const bodyParser = require('body-parser');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(bodyParser.json());
app.use(cors());

mongoose.connect('mongodb://localhost:27017/auth_demo', { useNewUrlParser: true, useUnifiedTopology: true });

const User = mongoose.model('User', {
  username: String,
  password: String
});

app.post('/register', async (req, res) => {
  const { username, password } = req.body;
  const hashedPassword = await bcrypt.hash(password, 10);
  const user = new User({ username, password: hashedPassword });
  await user.save();
  res.status(201).send({ message: 'User registered successfully' });
});

app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  const user = await User.findOne({ username });
  if (!user) return res.status(404).send({ message: 'User not found' });
  const isPasswordValid = await bcrypt.compare(password, user.password);
  if (!isPasswordValid) return res.status(401).send({ message: 'Invalid credentials' });
  const token = jwt.sign({ username: user.username }, 'secret_key', { expiresIn: '1h' });
  res.send({ token });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

前端部分（Vue.js）

使用Vue.js创建前端页面，实现用户注册和登录功能。

安装依赖

npm install axios vue-router

创建前端代码

<template>
  <div>
    <h2>Register</h2>
    <input v-model="registerUsername" placeholder="Username">
    <input v-model="registerPassword" type="password" placeholder="Password">
    <button @click="register">Register</button>

    <h2>Login</h2>
    <input v-model="loginUsername" placeholder="Username">
    <input v-model="loginPassword" type="password" placeholder="Password">
    <button @click="login">Login</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      registerUsername: '',
      registerPassword: '',
      loginUsername: '',
      loginPassword: ''
    };
  },
  methods: {
    async register() {
      try {
        await axios.post('http://localhost:3000/register', {
          username: this.registerUsername,
          password: this.registerPassword
        });
        alert('Registration successful');
      } catch (error) {
        alert('Registration failed');
      }
    },
    async login() {
      try {
        const response = await axios.post('http://localhost:3000/login', {
          username: this.loginUsername,
          password: this.loginPassword
        });
        localStorage.setItem('token', response.data.token);
        alert('Login successful');
      } catch (error) {
        alert('Login failed');
      }
    }
  }
};
</script>