Node.js 全栈知识点详细整理（含代码示例 + 前端结合实战）

本文从基础到进阶全面梳理 Node.js 核心知识点，并重点详解前端与 Node.js 的 6 种核心结合方式（前后端分离、SSR、静态服务、跨域代理、工程化、全栈实战），覆盖前端开发必备的 Node.js 全量知识。

一、Node.js 基础核心

1.1 Node.js 简介与运行

Node.js 是基于 Chrome V8 引擎的 JavaScript 运行时，让 JS 可以运行在服务端，核心特性：非阻塞 I/O、事件驱动、轻量高效。

• 安装：官网下载对应系统安装包（自带 npm 包管理器）
• 运行：终端执行 node 文件名.js

---

1.2 全局对象 & 全局 API

Node.js 无浏览器的 window，替代为 global 全局对象，内置常用全局 API：

全局对象 / API	作用	代码示例
global	全局根对象	global.name = "Node.js"; console.log(global.name)
process	进程信息（环境变量、命令行参数）	js // 打印环境变量 console.log(process.env); // 命令行参数 console.log(process.argv);
__dirname	当前文件所在绝对路径	console.log(__dirname)
__filename	当前文件的绝对路径 + 文件名	console.log(__filename)
定时器	setTimeout/setInterval/setImmediate	setTimeout(()=>console.log("延时执行"),1000)

---

1.3 核心内置模块（必学）

Node.js 内置无需安装的核心模块，是服务端开发基础：

1. Buffer 模块（二进制数据处理）

处理文件、网络传输的二进制数据（Node.js 特有）

// 创建 Buffer
const buf = Buffer.from('Hello Node.js', 'utf8');
// 转字符串
console.log(buf.toString()); // Hello Node.js
// 查看二进制
console.log(buf); // <Buffer 48 65 6c 6c 6f 20 4e 6f 64 65 2e 6a 73>

2. fs 模块（文件系统）

文件读写、复制、删除，分同步 / 异步两种写法（推荐异步，非阻塞）

const fs = require('fs'); // 引入模块

// 1. 异步读取文件（推荐）
fs.readFile('test.txt', 'utf8', (err, data) => {
  if (err) throw err; // 错误处理
  console.log('文件内容：', data);
});

// 2. 同步读取文件（阻塞线程，慎用）
const data = fs.readFileSync('test.txt', 'utf8');

// 3. 写入文件（覆盖写入）
fs.writeFile('test.txt', '我是写入的内容', (err) => {
  if (!err) console.log('写入成功');
});

3. path 模块（路径处理）

解决跨平台路径兼容问题（Windows/macOS/Linux）

const path = require('path');

// 拼接绝对路径（最常用）
const fullPath = path.join(__dirname, 'test.txt');
console.log('完整路径：', fullPath);

// 获取文件名
console.log(path.basename(fullPath)); // test.txt
// 获取文件扩展名
console.log(path.extname(fullPath)); // .txt

4. http 模块（原生 Web 服务）

创建 HTTP 服务器，处理前端请求

const http = require('http');

// 创建服务器
const server = http.createServer((req, res) => {
  // 设置响应头
  res.writeHead(200, { 'Content-Type': 'text/plain;charset=utf-8' });
  // 返回响应内容
  res.end('Hello Node.js 原生服务器');
});

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

5. events 模块（事件驱动）

Node.js 核心：基于事件订阅 / 发布

const EventEmitter = require('events');
const emitter = new EventEmitter();

// 1. 订阅事件（监听）
emitter.on('sayHi', (name) => {
  console.log(`你好，${name}`);
});

// 2. 触发事件
emitter.emit('sayHi', '前端开发者');

---

1.4 模块化系统

Node.js 采用模块化管理代码，避免全局污染，支持两种规范：

1. CommonJS 规范（默认）

• 导出：module.exports / exports
• 导入：require()

// 模块文件：utils.js
// 导出
module.exports = {
  sum: (a, b) => a + b,
  name: "工具模块"
};

// 主文件：index.js
const utils = require('./utils.js');
console.log(utils.sum(1,2)); // 3

2. ES Module 规范（ESM，现代推荐）

需在 package.json 中添加 "type": "module"

// 模块文件：utils.js
// 导出
export const sum = (a,b) => a+b;
export const name = "工具模块";

// 主文件：index.js
import { sum, name } from './utils.js';
console.log(sum(1,2)); // 3

---

1.5 异步编程（Node.js 核心）

Node.js 是异步非阻塞模型，解决回调地狱的三种方案：

1. 回调函数（原始写法，易产生回调地狱）

fs.readFile('a.txt', 'utf8', (err, data1) => {
  fs.readFile('b.txt', 'utf8', (err, data2) => {
    console.log(data1 + data2); // 嵌套层级过深 = 回调地狱
  });
});

2. Promise（优化嵌套）

const fs = require('fs/promises'); // Promise 版 fs

fs.readFile('a.txt', 'utf8')
  .then(data1 => fs.readFile('b.txt', 'utf8'))
  .then(data2 => console.log(data2))
  .catch(err => console.log(err));

3. async/await（终极方案，同步写法写异步）

const fs = require('fs/promises');

// 异步函数
async function readFiles() {
  try {
    const data1 = await fs.readFile('a.txt', 'utf8');
    const data2 = await fs.readFile('b.txt', 'utf8');
    console.log(data1 + data2);
  } catch (err) {
    console.log('读取失败：', err);
  }
}

readFiles(); // 执行

---

二、Node.js Web 开发（前端结合核心）

原生 http 模块开发效率低，Express 是 Node.js 最流行的 Web 框架（轻量、灵活）。

2.1 Express 快速上手

1. 安装：npm install express
2. 基础服务器：

const express = require('express');
const app = express();
const PORT = 3000;

// 1. 中间件：解析 JSON 请求体（处理前端 POST 数据）
app.use(express.json());
// 2. 中间件：解决跨域（后面前端结合会详解）
const cors = require('cors');
app.use(cors());

// 3. 路由：处理 GET 请求
app.get('/', (req, res) => {
  res.send('Hello Express 服务器');
});

// 4. 动态路由
app.get('/user/:id', (req, res) => {
  res.json({ id: req.params.id, name: '前端用户' });
});

// 启动服务
app.listen(PORT, () => {
  console.log(`Express 运行在 http://localhost:${PORT}`);
});

2.2 常用中间件

中间件是 Express 的核心，处理请求 / 响应的通用逻辑：

中间件	作用	安装
cors	解决跨域	npm i cors
multer	文件上传	npm i multer
dotenv	环境变量管理	npm i dotenv
express.static	静态资源托管	内置

---

三、数据持久化（数据库）

Node.js 配合数据库实现数据存储，前端常用组合：

• 非关系型：MongoDB + Mongoose
• 关系型：MySQL + mysql2

示例：MongoDB + Mongoose

// 安装：npm i mongoose
const mongoose = require('mongoose');

// 1. 连接数据库
mongoose.connect('mongodb://localhost:27017/frontDB')
  .then(() => console.log('MongoDB 连接成功'));

// 2. 定义数据模型
const userSchema = new mongoose.Schema({
  username: String,
  age: Number
});
const User = mongoose.model('User', userSchema);

// 3. 新增数据（给前端接口用）
async function addUser() {
  const user = new User({ username: '前端小白', age: 22 });
  await user.save();
}
addUser();

---

🔥 重点：前端与 Node.js 结合实战（6 大场景）

这是前端开发最常用的 Node.js 应用场景，每个场景配前后端完整代码 + 详细阐述。

场景 1：前后端分离（主流）

核心逻辑

• Node.js（Express）：写后端 API 接口（提供数据）
• 前端：用 axios 请求接口，渲染页面（Vue/React/ 原生 JS 通用）

步骤 1：Node.js 编写 API 接口

// server.js（后端）
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());

// 模拟数据
const users = [
  { id:1, name:'张三', job:'前端开发' },
  { id:2, name:'李四', job:'全栈开发' }
];

// 1. GET 接口：获取用户列表
app.get('/api/users', (req, res) => {
  res.json(users); // 返回 JSON 数据
});

// 2. POST 接口：新增用户
app.post('/api/user', (req, res) => {
  const newUser = req.body; // 接收前端传递的数据
  users.push(newUser);
  res.json({ msg:'新增成功', user:newUser });
});

app.listen(3000, () => console.log('API 服务运行在 3000 端口'));

步骤 2：前端请求接口（原生 HTML + Axios）

<!-- index.html（前端） -->
<!DOCTYPE html>
<html>
<body>
  <div id="userList"></div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 1. 请求后端接口获取用户
    async function getUsers() {
      const res = await axios.get('http://localhost:3000/api/users');
      // 渲染数据到页面
      const html = res.data.map(item => `<p>${item.name} - ${item.job}</p>`).join('');
      document.getElementById('userList').innerHTML = html;
    }

    // 2. 调用接口
    getUsers();
  </script>
</body>
</html>

前端结合阐述

1. 解耦：前端专注页面渲染，后端专注数据接口，独立开发部署
2. 技术栈：Vue/React + Axios + Node.js/Express 是前端主流全栈方案
3. 跨域：后端用 cors 中间件解决前端跨域问题

---

场景 2：静态资源服务器

核心逻辑

Node.js 托管前端静态文件（HTML/CSS/JS/ 图片），直接访问页面。

后端代码

const express = require('express');
const app = express();

// 托管当前目录下的 public 文件夹（存放前端静态文件）
app.use(express.static('public'));

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

目录结构

├── server.js
└── public/        # 前端静态资源
    ├── index.html
    ├── css/style.css
    └── js/main.js

前端结合阐述

• 无需 Nginx，Node.js 快速搭建前端静态服务
• 适用于：前端项目本地预览、小型项目部署

---

场景 3：服务端渲染（SSR）

核心逻辑

Node.js 在服务端渲染页面，直接返回完整 HTML 给前端（利于 SEO，首屏快）。

步骤 1：Express + EJS 模板引擎

// 安装：npm i ejs
const express = require('express');
const app = express();

// 配置模板引擎
app.set('view engine', 'ejs');
// 模板文件目录
app.set('views', './views');

// 渲染页面
app.get('/', (req, res) => {
  // 向模板传递数据
  res.render('index', { title: 'Node.js SSR 页面', user: '前端开发者' });
});

app.listen(3000);

步骤 2：EJS 模板（前端页面）

<!-- views/index.ejs -->
<h1><%= title %></h1>
<p>欢迎：<%= user %></p>

前端结合阐述

• 解决 SPA（单页应用）SEO 不友好、首屏加载慢问题
• 适用场景：官网、博客、电商等需要 SEO 的页面

---

场景 4：开发环境跨域代理

核心问题

前端开发时请求第三方接口会跨域，用 Node.js 做代理服务器转发请求。

后端代理代码

// 安装：npm i http-proxy-middleware
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 代理配置：将 /api 请求转发到第三方接口
app.use('/api', createProxyMiddleware({
  target: 'https://api.github.com', // 第三方接口地址
  changeOrigin: true // 解决跨域
}));

app.listen(3001, () => console.log('代理服务器运行在 3001 端口'));

前端请求

// 前端请求代理服务器，而非直接请求第三方接口
axios.get('http://localhost:3001/api/users')
  .then(res => console.log(res.data));

前端结合阐述

• 替代 Webpack/Vite 内置代理，纯 Node.js 实现跨域代理
• 适用于：无构建工具的原生前端项目开发

---

场景 5：前端工程化（Node.js 驱动）

核心逻辑

Node.js 是前端工程化的基石，所有构建工具都基于 Node.js 开发：

• 包管理：npm/yarn/pnpm
• 构建工具：Webpack/Vite/Rollup
• 脚本命令：package.json 中的 scripts

示例：package.json 脚本

{
  "scripts": {
    "dev": "vite", // 启动开发服务（Node.js 驱动）
    "build": "vite build", // 打包项目
    "preview": "vite preview"
  }
}

前端结合阐述

1. 前端的模块化、打包、压缩、热更新全靠 Node.js 实现
2. Vue/React 项目的底层运行环境都是 Node.js

---

场景 6：全栈小案例（TODO 待办）

完整演示：前端页面 + Node.js 接口 + 数据存储

1. 前端：增删改查待办事项
2. Node.js：提供 CRUD 接口
3. 数据：内存存储（可替换为数据库）

---

四、Node.js 进阶知识点

1. 流（Stream） ：处理大文件（视频 / 日志），避免内存溢出

   const fs = require('fs');
   // 读取流
   const readStream = fs.createReadStream('largeFile.txt');
   readStream.on('data', (chunk) => console.log('读取分片：', chunk));
   

2. 进程管理：child_process（创建子进程）、pm2（生产环境部署）

3. 错误处理：全局异常捕获、接口错误统一返回

4. 部署：服务器安装 Node.js，用 pm2 守护进程

---

总结

1. Node.js 核心：非阻塞 I/O、事件驱动、模块化、异步编程（async/await）

2. Web 开发：Express 是前端必备框架，核心是路由 + 中间件

3. 前端结合：

   • 主流：前后端分离（Node.js 写 API，前端请求）
   • 辅助：静态服务、跨域代理、SSR、工程化

4. 全栈能力：前端掌握 Node.js，可独立完成「前端页面 + 后端接口 + 部署」全流程开发