中间件 body-parser 的详细使用方法

小灰灰 2024-05-09 16:29 129阅读 0赞

> **还是大剑师兰特**：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

![在这里插入图片描述][4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>No.</th> 
   <th align="left">内容链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Openlayers <a href="https://dajianshi.blog.csdn.net/article/details/136641287" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126706466" rel="nofollow"> 【源代码+示例300+】 </a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">Leaflet <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow"> 【源代码+图文示例 150+】 </a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">Cesium <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow"> 【源代码+图文示例200+】 </a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">MapboxGL<a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow"> 【源代码+图文示例150+】 </a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">前端就业宝典 <a href="https://blog.csdn.net/cuclife/category_12437862.html" rel="nofollow">【面试题+详细答案 1000+】</a></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]

#### 文章目录 ####

*   *  一、安装 body-parser
     *  二、基本使用示例
     *   *  1. 解析 application/x-www-form-urlencoded 数据
         *  2. 解析 application/json 数据
         *  3.解析文本数据 (text/plain)
     *  三、注意事项

![在这里插入图片描述][dc0ac1bbac5d42c784218ff79dabfe28.png_pic_center]

`body-parser` 是一个 Node.js 中间件，用于解析 HTTP 请求体（请求正文）。在 Express 应用中，它尤其有用，因为它可以帮助你处理 POST、PUT、DELETE 等请求中的 JSON、URL-encoded 数据或文本数据。默认情况下，Express 不会解析请求体，因此需要借助 `body-parser` 或类似的库。

### 一、安装 body-parser ###

首先，你需要通过 npm 安装 `body-parser`：

npm install body-parser

### 二、基本使用示例 ###

下面是一些使用 `body-parser` 解析不同类型请求体的示例代码。

#### 1. 解析 application/x-www-form-urlencoded 数据 ####

这种格式的数据常用于 HTML 表单提交，默认的编码类型就是 `application/x-www-form-urlencoded`。

#### 2. 解析 application/json 数据 ####

对于发送 JSON 格式数据的请求，比如 AJAX 请求，可以使用 `json` 中间件。

const express = require('express');
    const bodyParser = require('body-parser');
    const app = express();
    
    // 使用 json 中间件
    app.use(bodyParser.json());
    
    app.post('/api/data', (req, res) => {
        
      const data = req.body;
      console.log(data);
      res.send('JSON 数据已接收');
    });
    
    app.listen(3000, () => {
        
      console.log('服务器正在监听 3000 端口');
    });

#### 3.解析文本数据 (text/plain) ####

虽然不常见，但你也可以解析纯文本请求体。

const express = require('express');
    const bodyParser = require('body-parser');
    const textParser = bodyParser.text();
    const app = express();
    
    app.post('/text', textParser, (req, res) => {
        
      const text = req.body;
      console.log('接收到的文本:', text);
      res.send('文本数据已接收');
    });
    
    app.listen(3000, () => {
        
      console.log('服务器正在监听 3000 端口');
    });

### 三、注意事项 ###

自 Express 4.16.0 版本起，Express 增加了内置的 bodyParser 支持，可以直接使用 `express.json()` 和 `express.urlencoded()` 而不必单独安装 `body-parser`。例如：

const express = require('express');
    const app = express();
    
    // 相当于 body-parser 的 json 和 urlencoded
    app.use(express.json());
    app.use(express.urlencoded({
         extended: false }));
    
    // ...后续路由处理...

这些示例展示了如何使用 `body-parser` 来处理不同类型的请求体数据，使你可以方便地从请求中提取并操作这些数据。

[4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/7e4fe5e99f874988a517177f13e422f0.png
[744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/326e5103ac2c49e39e82d8eaa5621331.png
[dc0ac1bbac5d42c784218ff79dabfe28.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/418cb77db1be4bce9050843680e822fe.png