1、项目概述与环境搭建：全栈项目介绍、技术栈选型（React + Node.js + MongoDB）、开发环境配置（Node.js、npm、Git、VS Code）

1.1 这个全栈项目到底要做什么？

说实话，我见过太多同学学完前端学后端，学完数据库又忘了怎么连。最后面试时，人家问「你独立做过什么项目？」——答不上来。

所以这门课的目标很直接：带你从零开始，完整地做出一个能上线、能用的全栈项目。不是那种「Hello World」级别的玩具，而是一个具备用户认证、数据管理、前后端交互、部署上线的真实应用。

我个人习惯把这类项目叫做「脚手架式实战」——你做完这一个，以后换任何业务场景，都能快速套用这套架构。

项目核心功能预览：

  • 用户注册、登录、权限管理（JWT 认证）
  • 数据 CRUD 操作（增删改查）
  • 前后端分离架构（RESTful API）
  • 部署到云服务器（Nginx + PM2）

1.2 技术栈选型——为什么是这三件套？

你可能会问：现在技术那么多，为什么偏偏选 React + Node.js + MongoDB？

嗯，这个问题我当年也纠结过。我在项目中用过 Vue、用过 Java Spring Boot、也用过 MySQL。但如果你让我给「从零到上线」选一套最顺手的组合，我会毫不犹豫选 MERN 栈。

原因有三：

技术 选型理由 我的经验
React 组件化、生态成熟、Hooks 让逻辑复用变得简单 我最早用 jQuery 写页面，改需求改到崩溃。React 的组件化让我解脱了。
Node.js JavaScript 全栈统一语言、非阻塞 I/O 性能好 前后端都用 JS，你想想看，光这一点就能省多少学习成本。
MongoDB 文档型数据库、与 JSON 天然契合、灵活 我曾经用 MySQL 做社交 feed 流，表结构改了三版。换成 MongoDB 后，舒服多了。

💡 我的建议： 如果你是第一次做全栈项目，别贪多。MERN 栈是「性价比最高」的入门组合。等你跑通一遍，再考虑换成 TypeScript、PostgreSQL 或者微服务架构。

1.3 开发环境配置——先把家伙事儿备齐

好，理论说完了，咱们动手。环境配置这一步，我见过太多人卡在这里。其实说白了就四样东西：Node.js、npm、Git、VS Code。

1.3.1 安装 Node.js 和 npm

Node.js 是咱们后端的基础，npm 是包管理器。这两个是绑在一起的，装一个就都有了。

安装步骤：

  1. 去 nodejs.org 下载 LTS 版本（别下 Current，稳一点）
  2. 双击安装，一路 Next
  3. 打开终端（CMD 或 PowerShell），验证安装：
node -v
# 输出示例：v18.17.0

npm -v
# 输出示例：9.6.7

⚠️ 注意： 我曾经遇到过一个问题——装完 Node.js 后，在终端里输入 node 提示「不是内部命令」。这是因为环境变量没配好。解决办法：重新安装，安装时勾选「Add to PATH」选项。

1.3.2 安装 Git

Git 是版本控制的标配。没有它，你改代码都不敢改。

安装步骤：

  1. 去 git-scm.com 下载对应系统版本
  2. 安装时，建议勾选「Git Bash Here」和「Git GUI Here」
  3. 验证安装：
git --version
# 输出示例：git version 2.41.0

我个人习惯用 Git Bash 来操作，比 CMD 舒服很多。尤其是那些 Linux 命令，在 Windows 下也能用。

1.3.3 安装 VS Code

编辑器这块，我试过 WebStorm、Sublime、Vim……最后定居在 VS Code。为什么？免费、插件多、启动快。

推荐插件（必装）：

  • ES7+ React/Redux/React-Native snippets —— 写 React 代码的快捷键神器
  • Prettier - Code formatter —— 自动格式化代码，团队协作必备
  • GitLens —— 看代码是谁写的、什么时候改的
  • Thunder Client —— 在 VS Code 里直接测接口，不用切到 Postman

💡 小技巧： 装完插件后，按 Ctrl + Shift + P，搜索「settings.json」，把下面这段加进去，保存后代码自动格式化：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

1.4 验证环境——跑一个 Hello World 试试

环境装完了，咱们得验证一下能不能跑起来。别急，就三步。

第一步：创建项目文件夹

mkdir fullstack-project
cd fullstack-project

第二步：初始化 npm 项目

npm init -y

这会在文件夹里生成一个 package.json 文件。说白了，它就是项目的「身份证」。

第三步：写一个简单的 Node.js 服务器

新建一个 server.js 文件，写入：

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, 全栈项目启动成功！');
});

server.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

然后在终端运行：

node server.js

打开浏览器，访问 http://localhost:3000。如果你看到「Hello, 全栈项目启动成功！」——恭喜，环境搭建完成。

🎯 第一章核心要点回顾：

  • 我们做的项目是一个完整的全栈应用，不是 demo
  • 技术栈选 React + Node.js + MongoDB，因为性价比最高
  • 环境配置只需要 Node.js、npm、Git、VS Code 四样
  • 验证环境：跑一个 Node.js 服务器，能访问就说明没问题

好，第一章就到这儿。下一章咱们开始搭建项目骨架，把前后端的目录结构理清楚。到时候你会看到，一个「能上线的项目」和「随便写的 demo」到底差在哪里。

← 上一章 📖 返回目录 下一章 →