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

WayneYang2026-04-20 17:10

本文从基础到进阶 全面梳理 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 特有）

arduino 复制代码 
// 创建 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 模块（文件系统）

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

javascript 复制代码 
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）

javascript 复制代码 
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 服务器，处理前端请求

javascript 复制代码 
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 核心：基于事件订阅 / 发布

javascript 复制代码 
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()
javascript 复制代码 
// 模块文件：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"

javascript 复制代码 
// 模块文件：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. 回调函数（原始写法，易产生回调地狱）
javascript 复制代码 
fs.readFile('a.txt', 'utf8', (err, data1) => {
  fs.readFile('b.txt', 'utf8', (err, data2) => {
    console.log(data1 + data2); // 嵌套层级过深 = 回调地狱
  });
});
2. Promise（优化嵌套）
typescript 复制代码 
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（终极方案，同步写法写异步）
javascript 复制代码 
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. 基础服务器：
javascript 复制代码 
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

javascript 复制代码 
// 安装：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 接口

ini 复制代码 
// 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）

xml 复制代码 
<!-- 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/ 图片），直接访问页面。

后端代码

ini 复制代码 
const express = require('express');
const app = express();

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

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

目录结构

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

前端结合阐述

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

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

核心逻辑

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

步骤 1：Express + EJS 模板引擎

dart 复制代码 
// 安装：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 模板（前端页面）

xml 复制代码 
<!-- views/index.ejs -->
<h1><%= title %></h1>
<p>欢迎：<%= user %></p>

前端结合阐述

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

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

核心问题

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

后端代理代码

javascript 复制代码 
// 安装：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 端口'));

前端请求

javascript 复制代码 
// 前端请求代理服务器，而非直接请求第三方接口
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 脚本

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） ：处理大文件（视频 / 日志），避免内存溢出

    javascript 复制代码 
    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，可独立完成「前端页面 + 后端接口 + 部署」全流程开发

相关推荐
土拨鼠爱coding2 小时前
Chrome插件 - DIY Theme
前端·chrome
小赵同学WoW2 小时前
CSS作用域穿透选择器
前端·css
工頁光軍2 小时前
OpenAI NodeJs版使用案列
node.js·oneapi
GreenTea2 小时前
Deep Dive into Claude Code：源码泄漏引发的AI Agent架构全解析
前端·人工智能·后端
RePeaT2 小时前
【Next.js】基础知识速查
前端·react.js·next.js
yyuuuzz2 小时前
独立站搭建：从入门到避坑实战
前端·git·github
OpenTiny社区3 小时前
WebSkill —— 运行在浏览器的 Agent 技能
前端·开源·ai编程
Amos_Web3 小时前
Solana 智能合约编译问题排查与修复总结
前端·rust·区块链
颜酱3 小时前
从零实现「拍照记单词」小应用（可复刻版）
前端·javascript·人工智能
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026 年 AI 编程助手全面对比评测：Cursor vs Copilot vs Claude Code vs GitHub Copilot Free04Claude Code Windows 兼容性问题：指定版本 2.1.112 可解决05AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析06UBUNTU Claude Code 报错 claude native binary not installed07从限购到畅通：GLM-5.1 Coding Plan接入攻略08GPT-6发布日深度解析-Symphony架构200万Token实战09从零部署 Hermes Agent：一只"会成长的 AI 马"保姆级安装教程10零成本！Ollama本地部署国产大模型全指南（支持Kimi-K2.5/GLM-5/Qwen，新手秒上手）