• express第三方中间件研究之bodyParser中间件


    转载至:http://www.cnblogs.com/lianer/p/5178693.html

    接触nodejs已有一段时间了,但最近才开始落实项目,于是使用express应用生成器生成了一个应用。开发过程中发现ajax提交的数据无法被express正确的解析,主要的情况是这样的:

    // 浏览器端post一个对象
    $.ajax({
        url: "/save",
        type: "post",
        data: {
            name: "henry",
            age: 30,
            hobby: [ "sport", "coding" ]
        }
    });
    
    // express接收这个对象
    router.post("/save", function (req, res, next) {
        console.log(req.body); // => { 'info[name]': 'henry','info[age]': '30','hobby[1]': 'sport','hobby[2]': 'coding' }
    });

    显然这样的解析结果是不能直接拿来用的,莫名其妙的一个坑,困了我许久。

    bodyParser中间件

    bodyParser中间件用来解析http请求体,是express默认使用的中间件之一。

    使用express应用生成器生成一个网站,它默认已经使用了  bodyParser.json  与  bodyParser.urlencoded  的解析功能,除了这两个,bodyParser还支持对text、raw的解析。

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));

    顾名思义,bodyParser.json是用来解析json数据格式的。bodyParser.urlencoded则是用来解析我们通常的form表单提交的数据,也就是请求头中包含这样的信息:  Content-Type: application/x-www-form-urlencoded 

    常见的四种Content-Type类型:

    • application/x-www-form-urlencoded 常见的form提交
    • multipart/form-data 文件提交
    • application/json  提交json格式的数据
    • text/xml  提交xml格式的数据

    详细解读 urlencoded

     bodyParser.urlencoded  模块用于解析req.body的数据,解析成功后覆盖原来的req.body,如果解析失败则为 {}。该模块有一个属性extended,官方介绍如下:

    The extended option allows to choose between parsing the URL-encoded data with the querystring library (when false) or the qs library (when true). Defaults to true, but using the default has been deprecated.

    大致的意思就是:extended选项允许配置使用querystring(false)或qs(true)来解析数据,默认值是true,但这已经是不被赞成的了。

    querystring就是nodejs内建的对象之一,用来字符串化对象或解析字符串。如

    querystring.parse("name=henry&age=30") => { name: 'henry', age: '30' }

    那么,既然querystring已经能完成对urlencode的解析了,为什么还需要qs?qs又是什么?

    qs介绍

    qs是一个querystring的库,在qs的功能基础上,还支持更多的功能并优化了一些安全性。比如,对象解析的支持:

    // 内建对象 querystring
    querystring.parse("info[name]=henry&info[age]=30&hobby[1]=sport&hobby[2]=coding") => 
      { 
        'info[name]': 'henry',
        'info[age]': '30',
        'hobby[1]': 'sport',
        'hobby[2]': 'coding'
      }
    
    // 第三方插件 qs
    qs.parse("info[name]=henry&info[age]=30&hobby[1]=sport&hobby[2]=coding") => 
      {
        info: {
          name: 'henry',
          age: '30'
        },
        hobby: [ 'sport', 'coding' ]
      }

    可以看出,querystring并不能正确的解析复杂对象(多级嵌套),而qs却可以做到。

    但是qs也不是万能的,对于多级嵌套的对象,qs只会解析5层嵌套,超出的部分会表现的跟本文头部的那种情况一样;对于数组,qs最大只会解析20个索引,超出的部分将会以键值对的形式解析。

    作为一个中间件,qs必须要为性能考虑,才会有如此多的限制,express也默认使用qs来解析请求体。

    理论上来说,form表单提交不会有多级嵌套的情况,而urlencoded本身也是form的内容类型,因此,bodyParser.urlencoded不支持多级嵌套也是很合理的设计。

    那么,如果我们非要上传一个十分复杂的对象,应该怎么办?

    解决方案

    出现这个问题的根本原因是:我以form的形式去提交了一个json数据。

    jquery默认的  content-Type  配置的是  application/x-www-form-urlencoded ,

    因此更改ajax请求参数: contentType: "application/json" ,并将数据转成json提交,问题就解决了。

    // 浏览器端post一个对象
    $.ajax({
        url: "/save",
        type: "post",
        contentType: "application/json",
        data: JSON.stringify({
            name: "henry",
            age: 30,
            hobby: [ "sport", "coding" ]
        })
    });
    
    // express接收这个对象
    router.post("/save", function (req, res, next) {
        console.log(req.body); // => { name: 'henry', age: 30, hobby: [ 'sport', 'coding' ] }
    });

    参考资料

    大多时候,我们只知道如何去使用,而不知道为什么这么用。

  • 相关阅读:
    [Aaronyang] 写给自己的WPF4.5 笔记23 [3d交互与动画 4/4]
    [Aaronyang] 写给自己的WPF4.5 笔记22 [3d交互与动画 3/4]
    [Aaronyang] 写给自己的WPF4.5 笔记21 [3d课 2/4]
    [Aaronyang] 写给自己的WPF4.5 笔记20 [3d课 1/4]
    [Aaronyang] 写给自己的WPF4.5 笔记19[Visual类图文并茂讲解]
    [Aaronyang] 写给自己的WPF4.5 笔记18[几何图形*Geometry图文并茂讲解]
    [Aaronyang紫色博客] 写给自己的WPF4.5-Blend5公开课系列 3
    [Aaronyang紫色博客] 写给自己的WPF4.5-Blend5公开课系列 2-更进一步
    [Aaronyang紫色博客] 写给自己的WPF4.5-Blend5公开课系列 1
    [Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图,Ay制作,AyWindow强势预览]
  • 原文地址:https://www.cnblogs.com/wuqun/p/5942918.html
Copyright © 2020-2023  润新知