本文目錄導(dǎo)讀：

1. 引言
2. 1. 什么是MERN技術(shù)棧？
3. 2. 環(huán)境搭建
4. 3. 構(gòu)建后端（Node.js + Express.js + MongoDB）
5. 4. 構(gòu)建前端（React.js）
6. 5. 前后端聯(lián)調(diào)
7. 6. 部署MERN應(yīng)用
8. 7. 總結(jié)

在當(dāng)今快速發(fā)展的Web開發(fā)領(lǐng)域，全棧開發(fā)已成為許多開發(fā)者的首選，MERN（MongoDB、Express.js、React.js、Node.js）技術(shù)棧因其高效、靈活和易于上手的特點(diǎn)，成為構(gòu)建現(xiàn)代Web應(yīng)用的熱門選擇，本文將帶你從零開始，一步步搭建一個(gè)完整的MERN應(yīng)用,并最終部署到云端。

---

什么是MERN技術(shù)棧？

MERN是由四個(gè)核心技術(shù)組成的全棧開發(fā)框架：

• MongoDB：一個(gè)NoSQL數(shù)據(jù)庫(kù),適合存儲(chǔ)JSON格式的數(shù)據(jù)。
• Express.js：一個(gè)基于Node.js的輕量級(jí)Web框架,用于構(gòu)建后端API。
• React.js：一個(gè)由Facebook開發(fā)的JavaScript庫(kù),用于構(gòu)建用戶界面。
• Node.js：一個(gè)基于Chrome V8引擎的JavaScript運(yùn)行時(shí),用于構(gòu)建服務(wù)器端應(yīng)用。

MERN的優(yōu)勢(shì)在于：

• 前后端均使用JavaScript,減少學(xué)習(xí)成本。
• React提供強(qiáng)大的組件化開發(fā)體驗(yàn)。
• MongoDB的靈活性使其適合快速迭代的開發(fā)模式。

---

環(huán)境搭建

在開始開發(fā)之前,我們需要安裝必要的工具和環(huán)境：

1 安裝Node.js和npm

Node.js是運(yùn)行JavaScript代碼的環(huán)境，npm（Node Package Manager）是它的包管理工具。
訪問 Node.js官網(wǎng) 下載并安裝最新LTS版本。

驗(yàn)證安裝：

node -v
npm -v

2 安裝MongoDB

MongoDB是MERN中的數(shù)據(jù)庫(kù)組件,可以選擇：

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

3 代碼編輯器

推薦使用 Visual Studio Code（VS Code），它支持JavaScript開發(fā),并有許多有用的插件。

---

構(gòu)建后端（Node.js + Express.js + MongoDB）

1 初始化項(xiàng)目

創(chuàng)建一個(gè)新文件夾并初始化npm：

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

2 安裝依賴

安裝Express和MongoDB驅(qū)動(dòng)：

npm install express mongoose cors

• express：Web框架
• mongoose：MongoDB的ODM（對(duì)象數(shù)據(jù)建模）庫(kù)
• cors：處理跨域請(qǐng)求

3 創(chuàng)建Express服務(wù)器

在 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請(qǐng)求體
// 連接MongoDB
mongoose.connect("mongodb://localhost:27017/mern-demo", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
// 定義數(shù)據(jù)模型
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);
});
// 啟動(dòng)服務(wù)器
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

運(yùn)行服務(wù)器：

node server.js

---

構(gòu)建前端（React.js）

1 創(chuàng)建React應(yīng)用

使用 create-react-app 初始化前端項(xiàng)目：

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請(qǐng)求：

npm install axios

---

前后端聯(lián)調(diào)

1 解決跨域問題

在 server.js 中啟用CORS：

app.use(cors());

2 代理設(shè)置

在 client/package.json 中添加：

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

這樣前端可以直接調(diào)用 /api/todos 而無需完整URL。

---

部署MERN應(yīng)用

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

推薦使用：

• Render（免費(fèi)托管Node.js應(yīng)用）
• Heroku（經(jīng)典PaaS平臺(tái)）
• AWS / DigitalOcean（VPS方案）

以 Heroku 為例：

1. 注冊(cè)并安裝 Heroku CLI
2. 創(chuàng)建 Procfile：

   web: node server.js

3. 部署：

   heroku login
   heroku create
   git push heroku main

2 部署前端（React.js）

推薦使用：

• Vercel（最佳React托管平臺(tái)）
• Netlify（免費(fèi)靜態(tài)網(wǎng)站托管）
• GitHub Pages（適合小型項(xiàng)目）

以 Vercel 為例：

1. 安裝Vercel CLI：

   npm install -g vercel

2. 部署：

   cd client
   vercel

---

本文詳細(xì)介紹了如何使用MERN技術(shù)棧構(gòu)建一個(gè)全棧應(yīng)用，并最終部署到云端,MERN的優(yōu)勢(shì)在于：

• 前后端統(tǒng)一使用JavaScript，提高開發(fā)效率。
• React的組件化開發(fā)，使前端代碼更易維護(hù)。
• MongoDB的靈活性，適合快速迭代的項(xiàng)目。

如果你想深入學(xué)習(xí)MERN,可以嘗試：

• 添加用戶認(rèn)證（JWT + Passport.js）
• 使用Redux管理狀態(tài)
• 優(yōu)化性能（SSR、代碼拆分）

希望這篇教程能幫助你從零開始掌握MERN全棧開發(fā)！??