nodejs+vue+express+mongodb搭建一整套案例和原理

夲奋亻Jay

于 2024-05-30 09:22:44 发布

阅读量401

点赞数 6

分类专栏：服务端文章标签： vue.js express mongodb

本文链接：https://blog.csdn.net/qq_29101285/article/details/139311531

版权

服务端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

搭建一个完整的 Node.js + Vue + Express + MongoDB 应用涉及到前端和后端的协同工作。下面是一个基础的项目搭建案例，以及一些关键概念的原理解释。

项目结构示例

my-app/
│
├── backend/               # 后端 Express 应用
│   ├── node_modules/       # Node.js 依赖
│   ├── models/             # MongoDB 模型
│   ├── routes/             # Express 路由
│   ├── controllers/        # 路由处理逻辑
│   ├── .env                # 环境变量配置
│   ├── app.js              # Express 应用入口
│   └── package.json        # package.json 文件
│
└── frontend/               # 前端 Vue 应用
    ├── node_modules/        # Node.js 依赖
    ├── public/               # 公共资源
    ├── src/                  # 源代码
    ├── .env                  # 环境变量配置
    ├── vue.config.js         # Vue 配置文件
    └── package.json          # package.json 文件

后端 (Express + MongoDB)

初始化项目

在 backend 目录中初始化 Node.js 项目并安装依赖。

cd backend
npm init -y
npm install express mongoose body-parser cors dotenv --save

设置 Express 服务器

backend/app.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
require('dotenv').config();

const app = express();

app.use(cors());
app.use(bodyParser.json());

// 连接 MongoDB
mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });

// 引入路由
const userRoutes = require('./routes/userRoutes');
app.use('/api/users', userRoutes);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

创建 MongoDB 模型

backend/models/User.js

const mongoose = require('mongoose');

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

module.exports = mongoose.model('User', UserSchema);

定义路由

backend/routes/userRoutes.js

const express = require('express');
const router = express.Router();
const User = require('../models/User');

// 获取用户列表
router.get('/', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

// 添加新用户
router.post('/', async (req, res) => {
  const { name, email } = req.body;
  const user = new User({ name, email });
  await user.save();
  res.status(201).json(user);
});

module.exports = router;

前端 (Vue)

初始化项目

在 frontend 目录中初始化 Vue 项目并安装依赖。

cd frontend
npm install -g @vue/cli
vue create my-app
# 选择默认设置或手动配置
cd my-app
npm install axios --save

修改 Vue 配置

frontend/vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
      },
    },
  },
};

创建 Vue 组件

frontend/src/components/UserList.vue

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user._id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('/api/users');
        this.users = response.data;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>