在现代 Web 开发中,后端接口的实现通常是基于 RESTful API 的设计。Express 是一个轻量级、灵活的 Node.js Web 框架,非常适合快速搭建 RESTful API。本文将通过一个完整的示例,展示如何使用 Express 和 CORS 中间件搭建一个支持增删改查(CRUD)操作的用户管理系统。我们将实现以下功能:
-
获取所有用户数据。
-
通过 ID 查询单个用户。
-
添加新用户(支持自增 ID)。
-
修改用户信息。
-
删除用户。
一、环境准备
1. 安装 Node.js
确保你已经安装了 Node.js。可以通过访问 Node.js 官网 下载并安装。
2. 创建项目文件夹
在你选择的目录下创建一个名为 express
的文件夹。
3. 初始化项目
打开 VSCode,将 express
文件夹拖入 VSCode 中。在 VSCode 的终端中(快捷键 Ctrl+J
打开终端),运行以下命令初始化项目并安装必要的依赖:
bash复制
npm init -y
npm install express cors --save
-
npm init -y
:快速初始化项目,生成package.json
文件。 -
npm install express cors --save
:安装 Express 和 CORS 中间件,并将其添加到项目依赖中。 -
简单使用跳转express启动搭建环境
二、编写代码
在 express
文件夹中创建一个名为 express.js
的文件,并写入以下代码:
JavaScript复制
// 引入 Express 框架,用于创建和管理 HTTP 服务器
const express = require('express');
// 引入 CORS 中间件,用于处理跨域请求
const cors = require('cors');
// 创建一个 Express 应用实例
const app = express();
// 使用 CORS 中间件,允许跨域请求
// 注意:在开发环境中可以这样使用,但在生产环境中需要配置更安全的参数
app.use(cors());
// 解析 JSON 格式的请求体
app.use(express.json());
// 定义一个数组,包含多个用户数据
let data = [
{
id: 1,
name: '张三',
age: 28,
createTime: "2020-01-01",
email: "zhangsan@example.com",
},
{
id: 2,
name: '李四',
age: 22,
createTime: "2021-02-15",
email: "lisi@example.com",
},
{
id: 3,
name: '王五',
age: 35,
createTime: "2019-08-23",
email: "wangwu@example.com",
},
{
id: 4,
name: '赵六',
age: 40,
createTime: "2018-05-30",
email: "zhaoliu@example.com",
},
{
id: 5,
name: '孙七',
age: 29,
createTime: "2022-11-11",
email: "sunqi@example.com",
},
];
// 1. 获取所有用户数据
app.get('/users', (req, res) => {
res.json(data);
});
// 2. 通过 ID 查询单个用户
app.get('/users/:id', (req, res) => {
const id = parseInt(req.params.id);
const user = data.find(user => user.id === id);
if (!user) {
res.status(404).json({ message: '用户未找到' });
} else {
res.json(user);
}
});
// 3. 添加新用户(支持自增 ID)
app.post('/users', (req, res) => {
const newUser = req.body;
// 检查必要字段是否存在
if (!newUser.name || !newUser.age) {
res.status(400).json({ message: '缺少必要字段' });
return;
}
// 自动生成一个新的自增 ID
const newId = data.length > 0 ? data[data.length - 1].id + 1 : 1;
// 为新用户分配自增 ID
const userWithId = {
id: newId,
...newUser
};
// 将新用户添加到数据数组中
data.push(userWithId);
res.status(200).json({ code: 200, data: "新增成功" });
});
// 4. 修改用户信息
app.put('/users/:id', (req, res) => {
const id = parseInt(req.params.id);
const updatedUser = req.body;
const index = data.findIndex(user => user.id === id);
if (index === -1) {
res.status(404).json({ message: '用户未找到' });
return;
}
data[index] = { ...data[index], ...updatedUser };
res.status(200).json({ code: 200, data: "修改成功" });
});
// 5. 删除用户
app.delete('/users/:id', (req, res) => {
const id = parseInt(req.params.id);
const index = data.findIndex(user => user.id === id);
if (index === -1) {
res.status(404).json({ message: '用户未找到' });
return;
}
data.splice(index, 1);
res.status(200).json({ code: 200, data: "删除成功" });
});
// 监听 3000 端口,启动服务器
app.listen(3000, () => {
console.log('示例应用正在监听 3000 端口 !');
});
三、代码说明
1. CORS 中间件
使用 cors()
中间件允许跨域请求,方便前端开发。在生产环境中,建议配置更严格的跨域策略。
2. JSON 请求体解析
通过 app.use(express.json())
解析 JSON 格式的请求体,使得后端可以直接接收 JSON 数据。
3. 自增 ID 的实现
在添加新用户时,通过以下逻辑生成自增 ID:
JavaScript复制
const newId = data.length > 0 ? data[data.length - 1].id + 1 : 1;
如果数组中有用户数据,则取数组中最后一个用户的 id
并加 1;如果数组为空,则默认从 1 开始。
4. CRUD 操作
-
GET
/users
:获取所有用户数据。 -
GET
/users/:id
:通过 ID 查询单个用户。 -
POST
/users
:添加新用户。 -
PUT
/users/:id
:修改用户信息。 -
DELETE
/users/:id
:删除用户。
四、运行服务器
在终端中运行以下命令,启动服务器:
bash复制
node express.js
如果一切正常,控制台会打印:
示例应用正在监听 3000 端口 !
五、测试接口
1. 使用 Postman 测试
安装 Postman 后,可以通过以下方式测试接口:
获取所有用户
-
方法:
GET
-
地址:
http://localhost:3000/users
查询单个用户
-
方法:
GET
-
地址:
http://localhost:3000/users/1
添加新用户
-
方法:
POST
-
地址:
http://localhost:3000/users
-
请求体:
JSON复制
{ "name": "新用户", "age": 25, "createTime": "2024-01-01", "email": "newuser@example.com" }
-
返回结果:
JSON复制
{ "code": 200, "data": "新增成功" }
修改用户信息
-
方法:
PUT
-
地址:
http://localhost:3000/users/1
-
请求体:
JSON复制
{ "name": "张三更新", "age": 30 }
-
返回结果:
JSON复制
{ "code": 200, "data": "修改成功" }
删除用户
-
方法:
DELETE
-
地址:
http://localhost:3000/users/1
-
返回结果:
JSON复制
{ "code": 200, "data": "删除成功" }
六、总结
本文通过一个完整的示例,展示了如何使用 Express 和 CORS 中间件搭建一个支持。
标签:const,users,res,Express,改查,用户,API,data,id From: https://blog.csdn.net/weixin_66708577/article/details/145270658