搭建一个完整的 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>
原理
-
Node.js：作为服务器端 JavaScript 运行环境，它使得 JavaScript 能够用于服务器端编程。
-
Express：是一个灵活的 Node.js Web 应用框架，提供了丰富的 HTTP 实用工具和基于中间件的请求处理机制。
-
Vue：是一个用于构建用户界面的渐进式框架，它易于上手，同时提供了丰富的生态系统和支持库。
-
MongoDB：是一个基于文档的 NoSQL 数据库，它以灵活的文档结构存储数据，适用于快速迭代和大数据应用。
-
Mongoose：是一个 MongoDB 模型工具，它简化了数据的管理和验证。
-
Axios：是一个基于 Promise 的 HTTP 客户端，用于从前端向后端发送请求。
-
环境变量：通过
.env文件管理不同环境的配置，如数据库 URI、端口号等。 -
代理服务器：在开发中，Vue CLI 提供了代理功能，使得前端开发服务器能够将 API 请求转发到后端服务器。
通过上述步骤和原理，你可以搭建一个完整的 Node.js + Vue + Express + MongoDB 应用，前端界面通过 Vue 构建，后端 API 通过 Express 和 Mongoose 提供，数据存储在 MongoDB 中。
