当前位置：首页 > news >正文

【5/20】Express.js 基础：构建 RESTful API，实现用户数据端点

news 2025/9/20 5:43:48

标签：Express.js、RESTful API、Node.js 后端、路由处理、API 开发、入门教程、项目实践

前言

欢迎来到“前后端与数据库交互详解”系列的第5篇文章！在前四篇文章中，我们从前端 Vue.js 基础起步，学习了组件、HTTP 请求（如天气查询），并用 Node.js 设置了简单服务器。纯 Node.js 服务器有效，但代码繁琐——路由和请求处理需要手动管理。

本篇文章的焦点是 Express.js 基础，特别是构建 RESTful API。我们将解释 Express 是什么、如何用它简化服务器，并在结尾实现一个完整的“用户数据端点”应用：一个支持 GET/POST 用户信息的 RESTful API（用数组模拟数据）。这将帮助您理解如何创建结构化的后端服务，前端可以调用它（用第三篇的 Axios）。未来，我们将连接真实数据库。

前提：您已安装 Node.js（从第四篇学过）。安装 Express：npm install express。我们用 Express 构建 RESTful API（Representational State Transfer，标准化端点如 /users）。

一、Express.js 是什么？

Express.js 是一个轻量级的 Node.js Web 框架，简化服务器和 API 开发。它像“Node.js 的增强版”，提供路由、中间件和请求处理。

为什么用 Express？
- 简化路由：不像纯 Node.js 需要 if-else 处理 URL，Express 用 app.get('/path', callback)。
- RESTful 支持：轻松创建 GET/POST/PUT/DELETE 端点，符合 API 标准。
- 中间件：函数链处理请求（如解析 JSON body）。
- 生态：易集成数据库、认证等。
- 对比纯 Node.js：第四篇的服务器代码可以简化 50%+，更易维护。
核心概念：
- App 实例：const app = express(); 是起点。
- 路由：app.get('/api/users', (req, res) => { res.json(data); }); 处理 GET。
- 中间件：如 app.use(express.json()); 解析 POST body。
- RESTful 原则：端点如 /users (GET 获取所有)、/users/:id (GET 获取单个)。

在我们的系列中，Express 是后端的核心：它构建 API，让前端（如 Vue）通过 HTTP 交互数据，最终连接数据库。

二、Express.js 的基本使用

安装后，创建服务器：

导入：const express = require('express');。
创建 app：const app = express();。
添加中间件：app.use(express.json());（解析 JSON）。
定义路由：如 app.post('/api/data', (req, res) => { res.send(req.body); });。
监听：app.listen(3000);。

示例：简单 GET 端点返回 JSON。

接下来，通过项目实践这些。

三、实现完整项目：用户数据端点应用

项目目标：创建一个 RESTful API，支持用户数据操作。端点包括 GET /api/users（获取所有用户）、POST /api/users（添加用户）。用数组模拟数据（未来替换为数据库）。这是一个独立的完整应用，可以运行，并用浏览器、Postman 或前端调用。

步骤 1: 创建项目文件夹并安装依赖

新建文件夹：mkdir user-api-express。
进入：cd user-api-express。
初始化：npm init -y。
安装 Express：npm install express。

步骤 2: 编写服务器代码

新建 server.js 文件，输入以下代码：

const express = require('express');
const app = express();
const PORT = 3000;// 中间件：解析 JSON body
app.use(express.json());// 模拟数据：用户数组（未来替换为数据库）
let users = [{ id: 1, name: 'Alice', email: 'alice@example.com' },{ id: 2, name: 'Bob', email: 'bob@example.com' }
];// GET /api/users：获取所有用户
app.get('/api/users', (req, res) => {res.json(users);
});// GET /api/users/:id：获取单个用户
app.get('/api/users/:id', (req, res) => {const user = users.find(u => u.id === parseInt(req.params.id));if (user) {res.json(user);} else {res.status(404).json({ error: 'User not found' });}
});// POST /api/users：添加新用户
app.post('/api/users', (req, res) => {const newUser = {id: users.length + 1,name: req.body.name,email: req.body.email};if (!newUser.name || !newUser.email) {return res.status(400).json({ error: 'Name and email are required' });}users.push(newUser);res.status(201).json(newUser);
});// 启动服务器
app.listen(PORT, () => {console.log(`Server running on http://localhost:${PORT}`);
});

解释：
- app.use(express.json())：自动解析 POST 的 JSON body。
- GET /api/users：返回所有用户数组。
- GET /api/users/:id：用参数（:id）获取单个（e.g., /api/users/1）。
- POST /api/users：接收 body（如 {name: “Charlie”, email: “c@example.com”}），添加并返回。
- 错误处理：404 或 400 状态码。
- CORS：如果从前端调用，添加中间件如 npm install cors 并 app.use(require('cors')());（可选扩展）。

步骤 3: 运行和测试

运行：node server.js（终端显示 “Server running”）。
测试 GET：
- 浏览器访问 http://localhost:3000/api/users，看到 JSON 数组。
- 访问 http://localhost:3000/api/users/1，看到单个用户。
测试 POST（用 Postman 或 curl）：
- 发送 POST 到 http://localhost:3000/api/users，body: {“name”: “Charlie”, “email”: “c@example.com”}，响应 201 和新用户 JSON。
- 再 GET /api/users，看到更新列表。
从前端调用：用第三篇的 Vue 项目，添加 Axios POST 发送用户数据，GET 获取列表。
这是一个完整的 RESTful API 应用！它展示了 Express 如何构建结构化的端点。