vue2连接mongodb数据库

原创

mob649e815d65e6 2024-11-23 08:01:12 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815d65e6的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue2连接MongoDB数据库的完整指南

Vue.js 是一种渐进式 JavaScript 框架，主要用于构建用户界面。在许多现代 Web 应用中，数据的持久化通常是通过数据库进行的，MongoDB 是一个流行的 NoSQL 数据库，因其灵活性和扩展性受到广泛青睐。本篇文章将带你了解如何在 Vue2 应用中连接到 MongoDB 数据库，并提供代码示例。

文章结构

介绍
环境准备
连接 MongoDB
实现 CRUD 操作
关系图示
状态图示
结论

1. 介绍

在这个例子中，我们将构建一个简单的 Vue2 应用，连接到 MongoDB 数据库，进行基本的 CRUD（创建、读取、更新和删除）操作。我们将使用 Express.js 作为后端框架，通过 RESTful API 与 Vue.js 进行交互。

2. 环境准备

在开始之前，请确保你已经安装了以下工具：

Node.js
MongoDB数据库，可以在本地或云端（如 MongoDB Atlas）进行设置
Vue CLI

你可以通过以下命令安装 Express 和 Mongoose（MongoDB 的 ODM）：

npm install express mongoose cors

创建一个新文件夹作为项目目录，并使用 Vue CLI 创建 Vue2 应用：

vue create vue2-mongo-app
cd vue2-mongo-app

3. 连接 MongoDB

我们需要首先创建一个 Express 服务器来处理 API 请求。创建一个 server.js 文件，添加以下代码：

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(cors());
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/vue2-mongo', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('MongoDB connected...'))
    .catch(err => console.log(err));

// Start server
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

在上面的代码中，我们导入了 Express、Mongoose 和 CORS 模块，连接到 MongoDB 数据库。

4. 实现 CRUD 操作

我们将创建一个简单的操作模型，比如 "用户"，并添加 CRUD 功能。继续在 server.js 中，添加用户模型和路由：

const UserSchema = new mongoose.Schema({
    name: String,
    email: String
});

const User = mongoose.model('User', UserSchema);

// Create User
app.post('/api/users', async (req, res) => {
    const newUser = new User(req.body);
    await newUser.save();
    res.status(201).send(newUser);
});

// Read Users
app.get('/api/users', async (req, res) => {
    const users = await User.find();
    res.send(users);
});

// Update User
app.put('/api/users/:id', async (req, res) => {
    const user = await User.findByIdAndUpdate(req.params.id, req.body, { new: true });
    res.send(user);
});

// Delete User
app.delete('/api/users/:id', async (req, res) => {
    await User.findByIdAndDelete(req.params.id);
    res.status(204).send();
});

4.1 前端代码示例

在 Vue2 应用中，我们将使用 Axios 来发送请求。首先安装 Axios：

npm install axios

在 src 目录下创建一个新的文件 UserService.js，用于处理 API 请求：

import axios from 'axios';

const API_URL = 'http://localhost:5000/api/users';

export default {
    getAll() {
        return axios.get(API_URL);
    },
    create(user) {
        return axios.post(API_URL, user);
    },
    update(id, user) {
        return axios.put(`${API_URL}/${id}`, user);
    },
    delete(id) {
        return axios.delete(`${API_URL}/${id}`);
    }
};

在 Vue 组件中，我们可以使用上述 UserService 来管理用户数据：

<template>
    <div>
        User Management
        <form @submit.prevent="addUser">
            <input v-model="name" placeholder="Name" />
            <input v-model="email" placeholder="Email" />
            <button type="submit">Add User</button>
        </form>
        <ul>
            <li v-for="user in users" :key="user._id">
                {{ user.name }} - {{ user.email }}
                <button @click="removeUser(user._id)">Delete</button>
            </li>
        </ul>
    </div>
</template>

<script>
import UserService from './UserService';

export default {
    data() {
        return {
            users: [],
            name: '',
            email: ''
        };
    },
    methods: {
        async fetchUsers() {
            const response = await UserService.getAll();
            this.users = response.data;
        },
        async addUser() {
            await UserService.create({ name: this.name, email: this.email });
            this.name = '';
            this.email = '';
            await this.fetchUsers();
        },
        async removeUser(id) {
            await UserService.delete(id);
            await this.fetchUsers();
        }
    },
    mounted() {
        this.fetchUsers();
    }
};
</script>

5. 关系图示

在系统设计中，ER 图（实体关系图）用于表示数据库中的实体及其关系。以下是我们示例中的 ER 图示：

erDiagram
    USER {
        String id PK "用户ID"
        String name "用户姓名"
        String email "用户邮箱"
    }

在这个图中，我们看到了用户表和其属性，包括 ID、姓名和邮箱。

6. 状态图示

状态图用于表示系统中的状态变化。以下是我们程序的状态图：

stateDiagram
    [*] --> Initializing
    Initializing --> FetchingUsers: Start Fetch
    FetchingUsers --> UsersFetched: Users Fetched
    UsersFetched --> [*]
    UsersFetched --> AddingUser: Add User
    AddingUser --> UserAdded: User Added
    UserAdded --> UsersFetched
    UsersFetched --> RemovingUser: Remove User
    RemovingUser --> UserRemoved: User Removed
    UserRemoved --> UsersFetched