Express框架快速上手:中间件、路由与错误处理

Express框架快速上手:中间件、路由与错误处理

预计时间:1-2 天(了解即可)


🎯 本章目标

理解 Express 的中间件机制------这是所有 Node.js Web 框架的核心原理,也是理解 NestJS 的基础。


1. Express 是什么

ini 复制代码
Express = 极简的 HTTP 请求处理框架
核心概念:路由 + 中间件 + 请求/响应对象

与 Spring MVC 对比

Spring MVC Express
@RequestMapping app.get/post/put/delete()
Filter 中间件
@RequestBody req.body
@RequestParam req.query
@PathVariable req.params
ResponseEntity res.status().json()

2. 基础使用

bash 复制代码
pnpm add express
pnpm add -D @types/express
typescript 复制代码
import express, { Request, Response, NextFunction } from 'express';

const app = express();

// 解析 JSON 请求体
app.use(express.json());

// 最基础的路由
app.get('/api/health', (req, res) => {
  res.json({ status: 'ok', timestamp: new Date() });
});

// 带参数的路由
app.get('/api/users/:id', (req, res) => {
  const { id } = req.params;      // 路径参数
  const { include } = req.query;  // 查询参数
  res.json({ id, include });
});

// POST 请求
app.post('/api/users', (req, res) => {
  const { name, email } = req.body;
  // 保存用户...
  res.status(201).json({ id: 1, name, email });
});

app.listen(3000, () => console.log('Server on port 3000'));

3. 中间件(核心概念)

中间件执行流程

scss 复制代码
请求 → [中间件1] → [中间件2] → [路由处理器] → 响应
                ↓            ↓
          next()         next()
typescript 复制代码
// 自定义中间件:请求日志
function requestLogger(req: Request, res: Response, next: NextFunction) {
  console.log(`${new Date().toISOString()} ${req.method} ${req.url}`);
  next(); // 必须调用 next() 传递控制权!
}

app.use(requestLogger); // 注册中间件

// 中间件:鉴权
function authMiddleware(req: Request, res: Response, next: NextFunction) {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) {
    return res.status(401).json({ error: 'Unauthorized' }); // 提前返回,不调用 next()
  }
  // 验证 token...
  (req as any).user = decodedUser;
  next();
}

// 只对特定路由应用中间件
app.use('/api/protected', authMiddleware);

内置中间件

typescript 复制代码
app.use(express.json());                  // 解析 JSON body
app.use(express.urlencoded({ extended: true })); // 解析表单 body
app.use(express.static('public'));        // 静态文件服务

错误处理中间件(4个参数)

typescript 复制代码
// 错误处理中间件必须放在所有路由之后
app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
  console.error(err.stack);
  res.status(500).json({ error: 'Internal Server Error' });
});

4. 路由组织(Router)

typescript 复制代码
import { Router } from 'express';

const userRouter = Router();

userRouter.get('/', (req, res) => { /* 列表 */ });
userRouter.get('/:id', (req, res) => { /* 详情 */ });
userRouter.post('/', (req, res) => { /* 创建 */ });
userRouter.put('/:id', (req, res) => { /* 更新 */ });
userRouter.delete('/:id', (req, res) => { /* 删除 */ });

// 挂载到主应用
app.use('/api/users', userRouter);

5. 完整项目示例

typescript 复制代码
// src/app.ts
import express from 'express';
import { userRouter } from './routes/user.routes.js';
import { errorHandler } from './middlewares/error.middleware.js';
import { requestLogger } from './middlewares/logger.middleware.js';

const app = express();

app.use(express.json());
app.use(requestLogger);

app.use('/api/users', userRouter);

app.use(errorHandler);

export default app;
typescript 复制代码
// src/index.ts
import app from './app.js';

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

6. 为什么选择 NestJS 而不是 Express

Express NestJS
架构 无约束,自由发挥 模块化,强约束
依赖注入 ❌ 手动 ✅ 内置
TypeScript 可选 原生支持
学习曲线 低 中等(但 Java 开发者觉得熟悉)
适合项目 小项目、快速原型 企业级应用
生态 大量第三方中间件 内置 + 官方集成包

建议:用 Express 了解中间件原理,用 NestJS 做正式项目。


下一步:NestJS入门

相关推荐
FRing0316 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
兰亭妙微UI设计公司18 小时前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js
小大宇19 小时前
Vue知识点-ElementPlus-03提示框+询问+通知
前端·javascript·vue.js
前端技术官20 小时前
前端的技术判断力是怎么练出来的?
javascript·web前端·localstorage·debounce·弱网处理
程序员大阳21 小时前
副队长JavaScript教程(60)-BOM 初识:window 对象与浏览器模型
javascript·bom·window对象·浏览器模型
web打印社区21 小时前
Chrome-kiosk-printing能上生产吗
开发语言·前端·javascript·chrome·websocket
志尊宝1 天前
AI原生前端开发(041):AI辅助的状态管理(Zustand/Pinia)
前端·javascript·ai-native
Geoffwo1 天前
DSH-SKILL基础
javascript
AI副业搞钱研究所1 天前
用 12 组正则写一个骗局话术检测器:权重打分、硬红旗保底和高亮区间合并
javascript
程序员大阳1 天前
副队长JavaScript教程(48)-异常处理基础
javascript·异常处理·finally·catch·try