MERN Stack 入門：初學者指南-js教程-PHP中文網

MERN Stack 入門：初學者指南

DDD

發布： 2025-01-12 18:32:43

原創

581 人瀏覽過

Getting Started with MERN Stack: A Beginner

什麼是 MERN 堆疊？

MERN 就像網頁開發領域的復仇者聯盟一樣，是一支由超級英雄組成的團隊，共同努力創建出色的網頁應用程式。陣容如下：

MongoDB：將資料儲存在類似 JSON 的文檔中的冷資料庫。靈活，就像您週五晚上的計劃一樣。
Express.js：讓伺服器端開發變得輕而易舉的後端精靈。將其視為操作背後的大腦。
React.js：最酷的孩子，負責建立動態和互動式使用者介面。您的用戶一定會喜歡它。
Node.js：在伺服器上執行 JavaScript 的無聲動力。就像你需要時總是在身邊的朋友。

它們共同使 Web 開發變得流暢、快速，並且——我們敢說——有趣。

為什麼選擇 MERN？

這就是 MERN 值得您花時間（和不眠之夜）的原因：

一種語言統治一切：JavaScript 無所不在！前端、後端、資料庫——全部採用一種語言。這就像擁有萬用遙控器。
可擴展性目標：從您的小型業餘項目到下一個價值十億美元的應用程序，MERN 可以像專業人士一樣擴展。
社群力量：卡住了嗎？谷歌一下。 MERN 社區可能有一個迷因——呃，解決方案——可以解決您的問題。
可自訂的自動對焦：開源技術意味著您可以根據自己的喜好進行調整。瘋狂起來（但也許保持一些理智）。

設定您的環境

在開始建造 MERN 傑作之前，您需要做好準備。這是您的清單：

Node.js 和 npm：從 Node.js 官方網站取得。它們就像麵包和黃油——沒有它們就無法生存。
MongoDB：從MongoDB官網下載。專業提示：不要讓 NoSQL 術語嚇到您。沒什麼大不了的。
程式碼編輯器：VS Code 是程式碼編輯器界的 Netflix。大家都在用，非常棒。

像老闆一樣驗證您的設定：

node -v
npm -v
mongo --version

登入後複製

您的第一個 MERN 應用程序

1. 初始化項目

先建立一個新專案。把它當作你的寶寶。

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

登入後複製

2. 設定後端

安裝後端好東西：

npm install express mongoose dotenv

登入後複製

建立一個index.js 檔案並為您的後端賦予生命：

const express = require('express');
const mongoose = require('mongoose');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(express.json());

// Routes
app.get('/', (req, res) => {
  res.send('Welcome to the MERN Stack!');
});

// MongoDB Connection
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

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

登入後複製