0

0

Express框架怎么使用_Express框架快速上手与项目实战详细教程

絕刀狂花

絕刀狂花

发布时间:2025-11-09 22:08:02

|

789人浏览过

|

来源于php中文网

原创

Express 是快速构建 Web 应用和 API 的 Node.js 框架,通过路由、中间件实现请求处理,结合项目实战掌握 CRUD 接口开发并推荐代码分层结构以提升可维护性。

express框架怎么使用_express框架快速上手与项目实战详细教程

Express 是一个简洁而灵活的 Node.js Web 应用框架,提供了一套强大功能帮助你快速构建 Web 应用和 API。它本身轻量,但通过中间件机制可高度扩展。如果你刚接触 Node.js 后端开发,Express 是非常理想的起点。下面带你从零开始快速上手,并完成一个简单的项目实战。

一、安装与初始化 Express 项目

确保你的系统已安装 Node.js(建议 v14 或以上版本)。打开终端执行以下命令:

  • 创建项目目录:mkdir my-express-app && cd my-express-app
  • 初始化项目:npm init -y
  • 安装 Express:npm install express

创建入口文件 app.js,写入最基础的服务器代码:

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

app.get('/', (req, res) => { res.send('Hello from Express!'); });

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

运行 node app.js浏览器访问 http://localhost:3000 即可看到输出内容。

二、路由与请求处理

Express 使用 app.METHOD(path, callback) 定义路由。常见的 METHOD 包括 get、post、put、delete 等。

  • GET 请求:获取数据
  • POST 请求:提交数据
  • 动态路由参数使用冒号 : 定义

示例:添加多个路由

app.get('/users', (req, res) => {
  res.json({ users: ['Alice', 'Bob'] });
});

app.get('/users/:id', (req, res) => { const id = req.params.id; res.json({ userId: id }); });

app.post('/users', (req, res) => { res.status(201).send('User created'); });

注意:POST 请求需要解析请求体,需使用中间件。

三、使用中间件处理请求数据

中间件是 Express 的核心概念,用于在请求-响应周期中执行代码,如日志记录、身份验证、数据解析等。

常用内置中间件:

app.use(express.json()); // 解析 JSON 请求体
app.use(express.urlencoded({ extended: true })); // 解析表单数据

自定义中间件示例:

app.use((req, res, next) => {
  console.log(`${new Date().toISOString()} - ${req.method} ${req.path}`);
  next(); // 必须调用 next() 继续流程
});

该中间件会打印每次请求的时间、方法和路径。

bloop
bloop

快速查找代码,基于GPT-4的语义代码搜索

下载

四、项目实战:构建一个简易笔记 API

我们来实现一个支持增删改查(CRUD)的笔记接口。

创建 notes.js 模拟数据存储:

let notes = [
  { id: 1, title: '学习 Express', content: '今天学会了路由和中间件' }
];

module.exports = notes;

app.js 中引入并定义 CRUD 路由:

const notes = require('./notes');

// 获取所有笔记 app.get('/api/notes', (req, res) => { res.json(notes); });

// 获取单个笔记 app.get('/api/notes/:id', (req, res) => { const note = notes.find(n => n.id == req.params.id); if (!note) return res.status(404).send('Note not found'); res.json(note); });

// 创建笔记 app.post('/api/notes', (req, res) => { const { title, content } = req.body; const newNote = { id: notes.length + 1, title, content }; notes.push(newNote); res.status(201).json(newNote); });

// 更新笔记 app.put('/api/notes/:id', (req, res) => { const id = req.params.id; const note = notes.find(n => n.id == id); if (!note) return res.status(404).send('Note not found');

note.title = req.body.title || note.title; note.content = req.body.content || note.content; res.json(note); });

// 删除笔记 app.delete('/api/notes/:id', (req, res) => { const id = req.params.id; const index = notes.findIndex(n => n.id == id); if (index === -1) return res.status(404).send('Note not found');

notes.splice(index, 1); res.status(204).send(); // 无内容返回 });

使用 Postman 或 curl 测试这些接口,确认功能正常。

五、静态文件服务与模板引擎(可选扩展)

若要服务 HTML、CSS、JS 文件,使用 express.static

app.use(express.static('public'));

在 public 目录下放 index.html,即可直接访问。

集成模板引擎如 EJS:

  • 安装:npm install ejs
  • 设置视图引擎:app.set('view engine', 'ejs');
  • 创建 views/list.ejs,使用 res.render('list', { data }) 渲染页面

六、项目结构优化建议

随着项目变大,应拆分代码。推荐结构:

my-express-app/
├── app.js
├── routes/
│   └── notesRoute.js
├── controllers/
│   └── notesController.js
├── models/
│   └── Note.js
└── public/
    └── css/, js/

将路由逻辑移到 routes/notesRoute.js,控制器方法放入 controllers/notesController.js,保持代码清晰可维护。

基本上就这些。掌握 Express 的核心在于理解路由、中间件和请求响应流程。动手实现一个小项目能最快巩固知识。不复杂但容易忽略细节,比如忘记调用 next() 或未启用 body 解析。多练习,自然熟练。

相关专题

更多
什么是中间件
什么是中间件

中间件是一种软件组件,充当不兼容组件之间的桥梁,提供额外服务,例如集成异构系统、提供常用服务、提高应用程序性能,以及简化应用程序开发。想了解更多中间件的相关内容,可以阅读本专题下面的文章。

175

2024.05.11

Golang 中间件开发与微服务架构
Golang 中间件开发与微服务架构

本专题系统讲解 Golang 在微服务架构中的中间件开发,包括日志处理、限流与熔断、认证与授权、服务监控、API 网关设计等常见中间件功能的实现。通过实战项目,帮助开发者理解如何使用 Go 编写高效、可扩展的中间件组件,并在微服务环境中进行灵活部署与管理。

212

2025.12.18

css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

503

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

261

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

737

2023.07.28

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

535

2023.08.01

css字体颜色
css字体颜色

CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

751

2023.08.10

什么是css
什么是css

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

595

2023.08.10

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

74

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JavaScript
JavaScript

共185课时 | 15.7万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 0.9万人学习

Laravel---API接口
Laravel---API接口

共7课时 | 0.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号