vue+node+mongodb前后端实现注册登录代码

在使用Vue.js作为前端框架，Node.js作为后端服务器，以及MongoDB作为数据库的情况下，实现注册和登录功能通常涉及到以下步骤：

1. **前端Vue.js部分**:
- 使用Vue CLI创建Vue项目。
- 设计注册和登录表单界面。
- 使用Axios或Fetch API与后端通信，发送注册和登录请求。

2. **后端Node.js部分**:
- 使用Express框架创建RESTful API。
- 使用body-parser中间件解析请求体。
- 使用jsonwebtoken（JWT）进行身份验证。
- 使用Mongoose操作MongoDB数据库，创建用户模型和相关的CRUD接口。

3. **数据库MongoDB部分**:
- 设计用户集合的文档结构，通常包含用户名、密码、邮箱等字段。
- 实现用户数据的增删改查操作。

以下是一个简化的代码示例：

**前端Vue.js (注册登录组件示例)**:

// 注册组件
<template>
  <form @submit.prevent="register">
    <!-- 用户名、密码等输入字段 -->
    <button type="submit">注册</button>
  </form>
</template>

<script>
export default {
  methods: {
    register() {
      this.axios.post('/api/register', {
        username: this.username,
        password: this.password
      }).then(response => {
        // 处理响应，例如跳转到登录页面
      }).catch(error => {
        // 处理错误
      });
    }
  }
};
</script>

**后端Node.js (注册接口示例)**:

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

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

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true });

// 用户模型
const UserSchema = new mongoose.Schema({
  username: String,
  password: String,
  // 其他字段...
});
const User = mongoose.model('User', UserSchema);

// 注册API
app.post('/api/register', (req, res) => {
  const newUser = new User({
    username: req.body.username,
    password: req.body.password // 实际项目中需要对密码加密处理
  });
  
  newUser.save().then(user => {
    res.status(201).send(user);
  }).catch(err => {
    res.status(400).send(err);
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

**数据库MongoDB (用户集合结构)**:

{
  "_id": ObjectId("..."),
  "username": "user1",
  "password": "hashed_password",
  // 其他信息...
}