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

搭建一个完整的 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