技术分享
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)

鑫生活

总有人要赢,为什么不能是我
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)
  • 项目 Demo 汇总
  • node中使用crypto生成token
  • new Function
  • body-parser处理多层对象的问题
    • body-parser简介
    • 遇到的问题
      • 解决
  • Vite快速搭建Vue3+TypeScript项目
  • Cordova打包Vue项目的问题
  • Vue将汉字转为拼音,取出首字母
  • 项目中能用到的
  • Vuepress+Vercel搭建个人站点
  • husky规范代码提交
  • 项目
coderly
2019-12-29

body-parser处理多层对象的问题

# body-parser 处理多层对象的问题

参考:https://blog.csdn.net/guzhao593/article/details/83933105
参考:https://www.jianshu.com/p/80b502efe255

# body-parser简介

具体用法可以查看https://www.jianshu.com/p/80b502efe255,这里不做过多解释

  • body-parser模块是一个Express中间件
  • body-parser是一个HTTP请求体解析中间件
  • 可以解析 JSON、Raw、文本、URL-encoded 格式的请求体
  • 请求体解析后,解析值都会被放到req.body属性,内容为空时是一个{}空对象。

# 遇到的问题

  1. 我写接口和前台交互的时候,前台经常是将一个对象或者某个值传递到接口,body-parser可以很好的将它们转换成key:value的形式,方面获取接收到的值。
  2. 现在有这么一个需求,我要将一个数组对象传递到接口,并且将对收到的数组对象进行处理并且存储起来。

# 前台发送的值

  • 前台发送数据使用的是application/x-www-form-urlencoded格式,并用qs.stringify处理之后发送
  • 发送的数据
    图片

# 后端接收到的值

  • 后端使用body-parser处理接收的数据,使用bodyParser.json格式
  • 此时接收到的值
    图片
  • 这不是我们想要的结果

# 解决

通过查找资料发现,body-parser只能处理对象的一层,如果对象有多层,也只处理第一层,而仅凭body-parser是没办法解决的,所以我们需要一个可以处理多层的工具,这里我使用了qs模块

  • 引入qs
// 引入qs模块
const qs = require('qs')
1
2
  • 使用:body-parser可以不用改,仅仅将req.body用qs.parse()解析就可以结果
console.log(qs.parse(req.body))
1
  • 结果
    图片

  • 这样我们得到了我们想要的数据,也许还有其他的方法,这里没有继续深入挖掘。

#Node.js#Express
上次更新: 2021/09/13, 15:11:59
new Function
Vite快速搭建Vue3+TypeScript项目

← new Function Vite快速搭建Vue3+TypeScript项目→

最近更新
01
css
09-13
02
html
09-13
03
README
09-13
更多文章>
Theme by Vdoing | Copyright © 2021-2021 coderly | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式