Node.js的"老伙计":Express框架入门记

还记得我第一次用Node.js写后端时的窘境:想处理一个简单的GET请求,翻了半天文档才凑出几十行代码,还因为没处理好请求头报了一堆错。直到前辈扔给我一句"试试Express",我才发现后端开发原来能这么省心。这个在Node.js生态里活跃了十几年的"老伙计",至今仍是数百万开发者的入门首选------不是因为它多新潮,而是因为它把复杂的Web开发逻辑,梳理得像奶茶里的珍珠一样清晰。

先搞懂:Express到底是什么?

如果把Node.js比作一辆能跑的汽车,那Express就是一套现成的操控系统。它是基于Node.js的轻量级Web框架,没有给汽车换引擎,只是把方向盘、油门、刹车都设计得顺手又好懂。你不用再从零搭建HTTP服务器,不用手动解析请求参数,这些重复又繁琐的工作,Express都帮你封装成了简单的API。

有人说它是"Node.js的事实标准框架",这话一点不夸张。GitHub上43k+的星标,每周超1000万次的npm下载量,还有StackOverflow上百万条相关问题,都证明了它的地位。就像Postman的早期原型、很多小程序的后端接口,都是用它搭起来的。它就像编程界的"白衬衫",看似普通却百搭实用,不管是小demo还是中型系统都能hold住。

但它也不是完美的------版本更新慢,v4从2014年用到现在,v5的正式版迟迟不见踪影;面对Fastify这些后起之秀,性能也显得有些吃力。可就像老手艺一样,它的稳定、资料多、入门门槛低,仍是新手绕不开的选择。

上手实操:从"Hello World"开始

别被"框架"两个字吓到,用Express写第一个程序,比泡一杯速溶咖啡还简单。前提是你已经装好了Node.js,接下来跟着步骤走,5分钟就能看到成果。

第一步:搭建项目环境

先在电脑上建个文件夹,比如叫"my-first-express",然后打开终端进入这个文件夹。依次输入下面两条命令:

csharp 复制代码
npm init -y  # 初始化项目,生成package.json文件
npm install express  # 安装Express框架

第一条命令会帮你创建项目配置文件,"-y"表示全部用默认设置,不用挨个确认;第二条命令则是把Express下载到项目里,就像给手机装APP一样。

第二步:写核心代码

在文件夹里新建一个叫"app.js"的文件,这就是我们的核心代码文件。把下面这段代码复制进去,我会逐行给你解释:

javascript 复制代码
// 1. 把Express框架"请"进来
const express = require('express')
// 2. 创建一个Express应用实例,就像打开了一个服务窗口
const app = express()
// 3. 定义服务器要监听的端口,3000是开发常用端口
const port = 3000

// 4. 定义路由:当有人访问根路径"/"时,返回"Hello World!"
app.get('/', (req, res) => {
  res.send('Hello World! 这是我的第一个Express应用')
})

// 5. 启动服务器,开始监听3000端口
app.listen(port, () => {
  console.log(`服务器跑起来啦!访问地址:http://localhost:${port}`)
})

这里的关键是"路由"------它就像餐厅里的点餐系统,客人点了鱼香肉丝(访问"/"路径),厨房就按菜单做对应的菜(返回指定内容)。req是客人的需求(请求信息),res是厨房的回应(响应内容),通过这两个对象就能完成前后端的对话。

第三步:启动服务,见证成果

在终端输入这条命令:

复制代码
node app.js

如果看到"服务器跑起来啦!"的提示,就说明成功了。现在打开浏览器,输入"http://localhost:3000" ,页面上会清晰地显示我们写的那句话。是不是比直接用Node.js原生代码简单太多?

对了,要是想改响应内容,直接修改res.send()里的字符串就行;想停止服务,在终端按Ctrl+C就好。

核心技能:搞懂路由和中间件

学会Hello World只是刚进门,Express的灵魂其实是路由和中间件。掌握这两个东西,你就能搭建真正能用的后端服务了。

1. 路由:给不同请求分好工

实际开发中,我们不可能只有一个根路径。比如做一个博客,需要有文章列表、文章详情、提交评论等功能,这就需要定义多个路由。

在app.js里继续添加这些代码,就能实现不同路径的访问:

javascript 复制代码
// 文章列表页面,GET请求
app.get('/articles', (req, res) => {
  res.send('这是文章列表,有10篇文章')
})

// 单篇文章详情,路径里的:id是动态参数
app.get('/articles/:id', (req, res) => {
  // 通过req.params获取动态参数
  const articleId = req.params.id
  res.send(`这是第${articleId}篇文章的详情`)
})

// 提交评论,POST请求
app.post('/comments', (req, res) => {
  res.send('评论提交成功!')
})

现在访问"http://localhost:3000/articles/5" ,会显示"这是第5篇文章的详情";访问"/articles"会显示文章列表。这里要注意,路由匹配是按顺序来的,要是把动态路由写在固定路由前面,可能会出现匹配错误,这点一定要记牢。

如果路由太多,都堆在app.js里会很乱。这时候可以用express.Router()做模块化拆分,把路由单独放在一个文件里,就像把不同科目笔记分开记一样,清晰又好维护。

2. 中间件:请求的"中转站"

中间件是Express最精妙的设计,我更愿意叫它"请求的加工厂"。比如污水处理需要过滤、沉淀、消毒三个步骤,中间件就是处理请求的这些步骤------在请求到达最终路由前,先做一些预处理,比如验证登录、记录日志、解析参数等。

举个简单的例子,我们做一个日志中间件,记录每次请求的时间和路径:

javascript 复制代码
// 定义日志中间件
const logger = (req, res, next) => {
  const time = new Date().toLocaleString()
  const path = req.path
  console.log(`[${time}] 有人访问了:${path}`)
  // 必须调用next(),否则请求会卡在中间件里
  next()
}

// 注册全局中间件,所有请求都会经过它
app.use(logger)

把这段代码放在路由定义之前,再启动服务访问任意路径,终端就会显示访问时间和路径。这里的next()特别重要,就像接力赛的交接棒,把请求传递给下一个中间件或路由,要是忘了写,请求就会"迷路"。

中间件还能做很多事,比如身份验证------只有登录的用户才能访问某些路由。不过这里有个坑:要是把中间件挂载在根路径"/",它会作用于所有请求,可能导致访问首页都需要登录。解决办法是给路由分个专属路径,比如把需要验证的路由都放在"/admin"下面,只给这个路径挂载验证中间件。

最后:Express的学习路径

如果你刚入门,不用急着追求复杂功能,按这个步骤学就好:

  1. 先掌握基础路由(GET/POST)和res的常用方法(send/json/render);
  2. 学习中间件的使用,比如解析JSON请求体的express.json()、处理静态文件的express.static();
  3. 尝试路由模块化,把代码拆分成不同文件;
  4. 结合数据库(比如MongoDB),实现数据的增删改查;
  5. 最后学习错误处理,让你的服务更健壮。

Express就像一位话不多但经验丰富的老师傅,它不会强迫你用某种固定模式,而是给你足够的自由去发挥。虽然现在有Fastify、Koa这些更现代的框架,但把Express学扎实,就像打好编程的地基,以后再学其他框架会轻松很多。

别再犹豫了,打开终端,敲下那行npm install express,开启你的后端开发之旅吧。毕竟,最好的学习方式,就是动手去做。

相关推荐
1***Q78425 分钟前
TypeScript类型兼容
前端·javascript·typescript
多啦C梦a29 分钟前
React useTransition 全网最通俗深度讲解:为什么它能让页面“不卡”?
前端·javascript·react.js
inCBle30 分钟前
vue3+ts 封装一个通用流程复用工具函数
前端·vue.js·设计
西维32 分钟前
告别手动部署!Docker + Drone 前端自动化部署指南
前端·ci/cd·docker
实习生小黄33 分钟前
WXT 框架下的 Window 对象获取
前端·浏览器
WindrunnerMax35 分钟前
基于 NodeJs 的分布式任务队列与容器优雅停机
javascript·后端·node.js
少卿36 分钟前
Webpack 插件开发指南:深入理解 Compiler Hooks
前端·webpack
一名普通的程序员36 分钟前
Design Tokens的设计与使用详解:构建高效设计系统的核心技术
前端
VaJoy36 分钟前
Cocos Creator Shader 入门 ⒇ —— 液态玻璃效果
前端·cocos creator