MERN Stack 入门：初学者指南-js教程-PHP中文网

MERN Stack 入门：初学者指南

DDD

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

原创

572 人浏览过

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}`));

登录后复制