本文目录导读：

1. 引言
2. 1. 什么是MERN技术栈？
3. 2. 环境搭建
4. 3. 构建后端（Node.js + Express.js + MongoDB）
5. 4. 构建前端（React.js）
6. 5. 前后端联调
7. 6. 部署MERN应用
8. 7. 总结

在当今快速发展的Web开发领域，全栈开发已成为许多开发者的首选，MERN（MongoDB、Express.js、React.js、Node.js）技术栈因其高效、灵活和易于上手的特点，成为构建现代Web应用的热门选择，本文将带你从零开始，一步步搭建一个完整的MERN应用,并最终部署到云端。

---

什么是MERN技术栈？

MERN是由四个核心技术组成的全栈开发框架：

• MongoDB：一个NoSQL数据库,适合存储JSON格式的数据。
• Express.js：一个基于Node.js的轻量级Web框架,用于构建后端API。
• React.js：一个由Facebook开发的JavaScript库,用于构建用户界面。
• Node.js：一个基于Chrome V8引擎的JavaScript运行时,用于构建服务器端应用。

MERN的优势在于：

• 前后端均使用JavaScript,减少学习成本。
• React提供强大的组件化开发体验。
• MongoDB的灵活性使其适合快速迭代的开发模式。

---

环境搭建

在开始开发之前,我们需要安装必要的工具和环境：

1 安装Node.js和npm

Node.js是运行JavaScript代码的环境，npm（Node Package Manager）是它的包管理工具。
访问 Node.js官网 下载并安装最新LTS版本。

验证安装：

node -v
npm -v

2 安装MongoDB

MongoDB是MERN中的数据库组件,可以选择：

• 本地安装：MongoDB Community Server
• 云端托管：使用 MongoDB Atlas（推荐）

3 代码编辑器

推荐使用 Visual Studio Code（VS Code），它支持JavaScript开发,并有许多有用的插件。

---

构建后端（Node.js + Express.js + MongoDB）

1 初始化项目

创建一个新文件夹并初始化npm：

mkdir mern-app
cd mern-app
npm init -y

2 安装依赖

安装Express和MongoDB驱动：

npm install express mongoose cors

• express：Web框架
• mongoose：MongoDB的ODM（对象数据建模）库
• cors：处理跨域请求

3 创建Express服务器

在 server.js 文件中编写：

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.json()); // 解析JSON请求体
// 连接MongoDB
mongoose.connect("mongodb://localhost:27017/mern-demo", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
// 定义数据模型
const Todo = mongoose.model("Todo", {
  text: String,
  completed: Boolean,
});
// API路由
app.get("/api/todos", async (req, res) => {
  const todos = await Todo.find();
  res.json(todos);
});
app.post("/api/todos", async (req, res) => {
  const newTodo = new Todo(req.body);
  await newTodo.save();
  res.json(newTodo);
});
// 启动服务器
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

运行服务器：

node server.js

---

构建前端（React.js）

1 创建React应用

使用 create-react-app 初始化前端项目：

npx create-react-app client
cd client
npm start

2 连接后端API

在 client/src/App.js 中编写：

import React, { useState, useEffect } from "react";
import axios from "axios";
function App() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState("");
  useEffect(() => {
    fetchTodos();
  }, []);
  const fetchTodos = async () => {
    const res = await axios.get("http://localhost:5000/api/todos");
    setTodos(res.data);
  };
  const addTodo = async () => {
    await axios.post("http://localhost:5000/api/todos", {
      text,
      completed: false,
    });
    setText("");
    fetchTodos();
  };
  return (
    <div>
      <h1>MERN Todo App</h1>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo._id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

安装 axios 用于HTTP请求：

npm install axios

---

前后端联调

1 解决跨域问题

在 server.js 中启用CORS：

app.use(cors());

2 代理设置

在 client/package.json 中添加：

"proxy": "http://localhost:5000"

这样前端可以直接调用 /api/todos 而无需完整URL。

---

部署MERN应用

1 部署后端（Node.js + MongoDB）

推荐使用：

• Render（免费托管Node.js应用）
• Heroku（经典PaaS平台）
• AWS / DigitalOcean（VPS方案）

以 Heroku 为例：

1. 注册并安装 Heroku CLI
2. 创建 Procfile：

   web: node server.js

3. 部署：

   heroku login
   heroku create
   git push heroku main

2 部署前端（React.js）

推荐使用：

• Vercel（最佳React托管平台）
• Netlify（免费静态网站托管）
• GitHub Pages（适合小型项目）

以 Vercel 为例：

1. 安装Vercel CLI：

   npm install -g vercel

2. 部署：

   cd client
   vercel

---

本文详细介绍了如何使用MERN技术栈构建一个全栈应用，并最终部署到云端,MERN的优势在于：

• 前后端统一使用JavaScript，提高开发效率。
• React的组件化开发，使前端代码更易维护。
• MongoDB的灵活性，适合快速迭代的项目。

如果你想深入学习MERN,可以尝试：

• 添加用户认证（JWT + Passport.js）
• 使用Redux管理状态
• 优化性能（SSR、代码拆分）

希望这篇教程能帮助你从零开始掌握MERN全栈开发！🚀