第3章 Express 的请求与响应(二)

2 设置响应数据

在 Express 中,可以通过 res 对象设置 HTTP 响应。常见的响应方法包括 res.sendres.jsonres.statusres.sendFile 等。

2.1 发送文本和 JSON 响应

发送文本响应:

javascript 复制代码
app.get('/text', (req, res) => {
    res.send('Hello, world!');
});

发送 JSON 响应:

javascript 复制代码
app.get('/json', (req, res) => {
    const data = { message: 'Hello, world!' };
    res.json(data);
});

代码详解:

  • res.send('Text'):发送文本响应。
  • res.json({ key: 'value' }):发送 JSON 响应。
2.2 设置响应状态码

可以通过 res.status 方法设置 HTTP 响应状态码。

示例:

javascript 复制代码
app.get('/not-found', (req, res) => {
    res.status(404).send('Resource not found');
});

代码详解:

  • res.status(404).send('Message'):设置响应状态码为 404,并发送响应消息。
2.3 发送文件

可以通过 res.sendFile 方法发送文件作为响应。

示例:

javascript 复制代码
const path = require('path');

app.get('/file', (req, res) => {
    const filePath = path.join(__dirname, 'public', 'example.txt');
    res.sendFile(filePath);
});

代码详解:

  • res.sendFile(filePath):发送文件作为响应。
3 处理表单数据

处理表单数据是 Web 应用程序的常见需求。通常使用 POST 请求发送表单数据,并使用中间件解析请求体。

示例:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Form</title>
</head>
<body>
    <form action="/submit-form" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

服务器端代码:

javascript 复制代码
app.use(express.urlencoded({ extended: true }));

app.post('/submit-form', (req, res) => {
    // 获取表单数据
    const name = req.body.name;
    res.send(`Form submitted! Name: ${name}`);
});

代码详解:

  • express.urlencoded({ extended: true }):解析 URL 编码的请求体,将结果存储在 req.body
  • req.body.name:访问表单数据中的 name 字段。
4 使用查询参数

查询参数是 URL 中的键值对,通常用于传递额外的数据。可以通过 req.query 访问查询参数。

示例:

javascript 复制代码
app.get('/search', (req, res) => {
    const term = req.query.term;
    const sort = req.query.sort;
    res.send(`Search term: ${term}, Sort order: ${sort}`);
});

当用户访问 /search?term=express&sort=desc 时,响应内容将为 "Search term: express, Sort order: desc"。

代码详解:

  • req.query:获取查询参数,返回一个对象。
5 处理文件上传

处理文件上传是许多 Web 应用程序的重要功能。可以使用 multer 中间件处理文件上传。

安装 multer

bash 复制代码
npm install multer --save

配置 multer

javascript 复制代码
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    const file = req.file;
    res.send(`File uploaded: ${file.originalname}`);
});

代码详解:

  • multer({ dest: 'uploads/' }):配置 multer,将上传的文件保存到 uploads 目录。
  • upload.single('file'):处理单个文件上传,file 是表单字段的名称。
  • req.file:访问上传的文件信息。

HTML 表单示例:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>File Upload</title>
</head>
<body>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <label for="file">Choose file:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Upload</button>
    </form>
</body>
</html>

通过本章内容,读者应该能够理解并掌握如何在 Express 中处理 HTTP 请求和响应,包括解析请求数据、设置响应数据、处理表单数据、使用查询参数和处理文件上传。这些知识是开发功能丰富的 Web 应用程序的基础。

相关推荐
远之喵16 小时前
@tinyhttp/app VS express
express
家有狸花2 天前
Node.js 笔记(一):express路由
笔记·node.js·express
ChaITSimpleLove3 天前
K8s 一键部署 MongoDB 的 Replica-Set 和 MongoDB-Express
mongodb·kubernetes·express·高可用·yaml·replica-set
dingdingfish9 天前
关于 Oracle Database Express Edition 的功能和安装
oracle·express·database·vagrant·edition
知难行难11 天前
福昕阅读器高级版解决文件上传IEEE PDF eXpress字体未嵌入
pdf·express
ch_s_t13 天前
基于 Express+JWT + Vue 的前后端分离架构
vue.js·架构·express
caridle14 天前
教程:使用 InterBase Express 访问数据库(五):TIBTransaction
java·数据库·express
胡西风_foxww19 天前
nodejs爬虫系统
爬虫·nodejs·node·系统·express·request·cheerio
松果猿23 天前
场地污染在线计算可视化平台,获得易智瑞GIS开发竞赛C组优胜奖,内附易智瑞GIS开发竞赛与全国大学生测绘学科创新创业智能大赛提交材料。
vue·express
js_user1 个月前
在 Vue 渲染模板时,如何保留模板中的 HTML 注释?
开发语言·前端·javascript·css·vue.js·html·express