为什么前端开发者都该学点 Node.js？从零搭建你的第一个服务器

萧杰

2026-05-08 06:29

阅读 1502

大家好，我是阿航，一名在大厂干了三年的前端工程师，业余时间也在 B 站做技术分享。经常有刚入门的同学私信我：“老师，我只会写 HTML/CSS/JS，但看到别人用 React 做项目时总提到 Node.js，它到底是干嘛的？我能学会吗？”

说实话，我当初学的时候也是一头雾水。Node.js 听起来像后端的东西，离我们前端很远。但其实，现代前端开发几乎离不开 Node.js——无论是本地开发服务器、打包工具（比如 Vite、Webpack），还是部署脚本，背后都是它在默默支撑。

更别说现在流行的全栈开发了：用 React 写前端，用 Node.js 写后端 API，一套 JavaScript 全搞定！今天这篇教程，就带你从零开始写出第一个 Node.js 服务，哪怕你连“服务器”是啥都不知道，也能跟着敲出来！

一、Node.js 到底是什么？能干什么？

简单说：Node.js 让 JavaScript 不只能跑在浏览器里，还能跑在电脑上（服务器端）。

浏览器里的 JS：操作网页、响应点击、发请求……
Node.js 里的 JS：读写文件、连接数据库、启动 Web 服务器……

举个例子：你想做个待办事项 App，前端用 React 展示列表，那数据存在哪？谁来提供接口？这时候，你就需要一个后端服务——而 Node.js 就能帮你轻松实现！

💡 小知识：Moltbot 是一个基于 Node.js 的开源聊天机器人框架（虽然不太主流），但它正好说明了 Node.js 的能力——不仅能做 Web 服务，还能做自动化脚本、命令行工具、甚至 Discord 机器人！

二、环境准备：5 分钟装好开发环境

第一步：安装 Node.js

打开官网 https://nodejs.org
下载 LTS 版本（长期支持，最稳定）
双击安装，一路“下一步”即可

✅ 安装完成后，打开终端（Mac 用 Terminal，Windows 用 CMD 或 PowerShell），输入：
node -v
npm -v
如果看到类似 v20.12.0 和 10.5.0 的版本号，说明安装成功！

第二步：选个顺手的编辑器

推荐 VS Code（免费 + 强大）：

官网下载：https://code.visualstudio.com
安装后，按 `Ctrl+``（反引号）打开内置终端，直接写代码+运行，超方便！

三、核心概念：用最简单的语言讲清楚

1. `npm` 是什么？

npm = Node Package Manager（Node 包管理器）。你可以把它想象成“JavaScript 的应用商店”。

想用别人写好的功能（比如处理日期、连接数据库）？用 npm install xxx 装就行！
自己写的项目依赖也会记录在 package.json 文件里

2. `require` / `import`：引入代码

Node.js 默认用 require 引入模块（新项目也可用 import，但初学建议先用 require）：

// 引入内置模块
const fs = require('fs');        // 文件系统
const http = require('http');    // HTTP 服务器

// 引入第三方包（需先 npm install）
const express = require('express');

3. 回调函数 & 异步：别被吓到！

Node.js 大量使用异步操作（比如读文件、查数据库），避免程序卡住。初学记住一点：

耗时操作 = 用回调函数 or async/await

比如读文件：

// 回调写法
fs.readFile('data.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

// async/await 写法（更清晰！）
const data = await fs.promises.readFile('data.txt', 'utf8');
console.log(data);

📌 避坑指南：新手常犯错误是把异步当同步写，结果拿不到数据。记住：凡是有 .then() 或 await 的地方，就是异步！

四、实战：手把手写一个“React 前端 + Node.js 后端”的小项目

目标：做一个返回用户信息的 API，未来可以给 React 前端调用。

步骤 1：创建项目目录

mkdir my-first-node-app
cd my-first-node-app
npm init -y  # 自动生成 package.json

步骤 2：安装 Express（最流行的 Node.js Web 框架）

npm install express

步骤 3：写一个简单的服务器

新建文件 server.js：

// server.js
const express = require('express');
const app = express();
const PORT = 3000;

// 允许前端跨域请求（React 默认跑在 3000 或 5173）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// 模拟用户数据
const users = [
  { id: 1, name: '小明', email: 'xiaoming@example.com' },
  { id: 2, name: '小红', email: 'xiaohong@example.com' }
];

// 定义 API 接口：GET /api/users
app.get('/api/users', (req, res) => {
  res.json(users); // 返回 JSON 数据
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`✅ 服务器已启动！访问 http://localhost:${PORT}/api/users`);
});

步骤 4：运行服务器

在终端执行：

node server.js

打开浏览器，访问 http://localhost:3000/api/users，你会看到：

[
  {"id":1,"name":"小明","email":"xiaoming@example.com"},
  {"id":2,"name":"小红","email":"xiaohong@example.com"}
]

🎉 恭喜！你刚刚写了一个真正的后端 API！

步骤 5：让 React 前端调用它（可选体验）

如果你已经会一点 React，可以这样在组件里获取数据：

// App.jsx
import { useEffect, useState } from 'react';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <h1>用户列表</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

🔗 注意：React 项目默认端口可能是 5173（Vite）或 3000（Create React App），所以我们的 Node.js 服务用了 Access-Control-Allow-Origin: * 来允许跨域。

五、新手常见问题解答（FAQ）

问题	解答
Q：Node.js 和 Java/Python 做后端有什么区别？	Node.js 用 JavaScript，对前端开发者更友好；适合 I/O 密集型应用（如聊天、API 服务），但不适合 CPU 密集型任务（如视频编码）。
Q：为什么我的 `node server.js` 报错 “Cannot find module”？	忘记 `npm install express` 了！所有第三方包都要先安装才能 `require`。
Q：每次改代码都要手动重启服务器？太麻烦！	安装 `nodemon`：`npm install -g nodemon`，然后用 `nodemon server.js` 启动，代码保存自动重启！
Q：Moltbot 和这个教程有关系吗？	Moltbot 是一个基于 Node.js 的聊天机器人框架，说明 Node.js 不仅能做 Web 服务，还能做各种后台程序。我们这里聚焦 Web API，但原理相通。

六、下一步学习建议

你现在已经有能力写简单的后端接口了！接下来可以：

学数据库：用 SQLite 或 MongoDB 存真实数据（推荐 mongoose 库）
加身份验证：用 JWT 实现登录注册
部署上线：把 Node.js 服务部署到 Railway、Render 或阿里云
结合 React 完整项目：做一个带增删改查的 Todo App，前后端分离！

🚀 我的经验：不要一开始就想做“完整电商系统”。先跑通一个最小闭环（比如本文的 /api/users），再一点点加功能。这是我带实习生时反复强调的！

结语

Node.js 并没有想象中那么“后端”和可怕。对前端来说，它更像是一个强大的扩展工具，让你不再受限于浏览器沙盒。

我写这篇教程，就是希望你能迈出第一步。就像我三年前那样——从一行 console.log('Hello Node!') 开始，到现在能独立负责全栈项目。

你不需要一次学会所有东西，只需要比昨天的自己多懂一行代码。

快去打开终端，敲下 node -v 吧！有问题欢迎在评论区留言，我会一一回复。

下期预告：《用 Express + MongoDB 打造你的第一个用户系统》，记得关注！

作者：阿航｜大厂前端工程师 & B站技术UP主｜专注让编程变得简单

标签:MoltbotReact

最热最新

暂无评论

为你推荐

暂无相关推荐

为什么前端开发者都该学点 Node.js？从零搭建你的第一个服务器

一、Node.js 到底是什么？能干什么？

二、环境准备：5 分钟装好开发环境

第一步：安装 Node.js

第二步：选个顺手的编辑器

三、核心概念：用最简单的语言讲清楚

1. `npm` 是什么？

2. `require` / `import`：引入代码

3. 回调函数 & 异步：别被吓到！

四、实战：手把手写一个“React 前端 + Node.js 后端”的小项目

步骤 1：创建项目目录

步骤 2：安装 Express（最流行的 Node.js Web 框架）

步骤 3：写一个简单的服务器

步骤 4：运行服务器

步骤 5：让 React 前端调用它（可选体验）

五、新手常见问题解答（FAQ）

六、下一步学习建议

结语

评论 0

为你推荐

精选内容

为什么前端开发者都该学点 Node.js？从零搭建你的第一个服务器

一、Node.js 到底是什么？能干什么？

二、环境准备：5 分钟装好开发环境

第一步：安装 Node.js

第二步：选个顺手的编辑器

三、核心概念：用最简单的语言讲清楚

1. npm 是什么？

2. require / import：引入代码

3. 回调函数 & 异步：别被吓到！

四、实战：手把手写一个“React 前端 + Node.js 后端”的小项目

步骤 1：创建项目目录

步骤 2：安装 Express（最流行的 Node.js Web 框架）

步骤 3：写一个简单的服务器

步骤 4：运行服务器

步骤 5：让 React 前端调用它（可选体验）

五、新手常见问题解答（FAQ）

六、下一步学习建议

结语

评论 0

为你推荐

相关推荐

精选内容

1. `npm` 是什么？

2. `require` / `import`：引入代码