zoukankan      html  css  js  c++  java
  • Express全系列教程之(四):获取Post参数的两种方式

     

    一、关于POST请求

    post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新。
    相比于get请求,post所请求的数据会更加安全。上一章中我们发现get请求会在地址栏显示输入的用户名和密码(有中文时会转化为BASE64加密),而post请求则会将数据放入http包的包体中,这使得别人无法直接看到用户名和密码!

    二、Express如何设置POST请求

    1.我们的知道,首先我们得知道在form表单进行post请求,enctype属性一般设置为“application/x-www-form-urlencoded”,如果设置成multipart/form-data,则多用于文件上传,如下:

    1

    2

    <form action="#" method="post" enctype="application/x-www-form-urlencoded">

    </form>

      之后,我们可以使用npm提供的body-parser或者connect-multiparty来获取post数据。我也会把两种方式都进行演示:

    (1)、body-parser

    Express中默认都使用body-parser作为请求体解析post数据,这个模块也能解析:JSON、Raw、文本、URL-encoded格式的请求体。
    首先在项目目录安装body-parser:

    1

    cnpm install body-parser --save

      在项目app.js中,引用和设置该模块:

    1

    2

    3

    4

    5

    const bodyParser=require("body-parser");

    // 解析以 application/json 和 application/x-www-form-urlencoded 提交的数据

    var jsonParser = bodyParser.json();

    var urlencodedParser = bodyParser.urlencoded({ extended: false });

      

    bodyParser.json()很明显是将json作为消息主题,再且常见的语言和浏览器大都支持json规范,使得json处理起来不会遇上兼容性问题。
    application/x-www-form-urlencoded:
    如果form表单不设置enctype属性,那么他默认就会是这种。
    之后获取数据:

    1

    2

    3

    app.post("/",urlencodedParser,function(req,res){

        res.send(req.body);

    });

      

    在中间添加urlencodedParser,请求是依然使用req.body获取数据。
    下面是一个完整的实例:
    index.html:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8">

            <title></title>

        </head>

        <body>

            <form action="http://localhost:8080/" method="post" enctype="application/x-www-form-urlencoded">

                用户:

                <input type="text" name="user" id="user" placeholder="用户名"><br>

                密码:

                <input type="password" name="password" id="password" placeholder="密码"/><br>

                <input type="submit" value="提交"/>

            </form>

        </body>

    </html>

      app.js:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    const express=require("express");

    const bodyParser=require("body-parser");

    var app=express();

    // 解析application/json数据

    var jsonParser = bodyParser.json();

    // 解析application/x-www-form-urlencoded数据

    var urlencodedParser = bodyParser.urlencoded({ extended: false });

    app.post('/',urlencodedParser,function(req,res){

        res.send(req.body);

    });

    app.listen(8080);

      (2)、connect-multiparty

    虽然connect-multiparty多用于文件上传,但也可以访问到post请求的数据,先安装

    1

    cnpm install connect-multiparty --save

      再引入和构建函数:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    const multipart = require('connect-multiparty');

    var multipartMiddleware = multipart();

    ```

    同样我们也采用req.body来获取参数:

    ```

    app.post('/',multipartMiddleware,function(req,res){

        res.send(req.body);

    });

      完整的:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    const express=require("express");

    const multipart = require('connect-multiparty');

    var multipartMiddleware = multipart();

    var app=express();

    app.post('/',multipartMiddleware,function(req,res){

        res.send(req.body);

    });

    app.listen(8080);

      相比于body-parser,代码量似乎更少一些,但我还是建议使用body-parser,根据官方说法,他会在服务器上创建临时文件,并且永远不会去清理它们,这会相当两会系统资源,所以不到万不得已请不要去使用它。

    总结

    post数据在网页开发时经常使用,请务必掌握它,只有这样网页的交互设计才能够做到游刃有余,今天就到这里,也希望大家以后多多支持。

      

  • 相关阅读:
    Java人员正确使用 IntelliJ IDEA的方式
    python错误:UnicodeDecodeError: 'utf8' codec can't decode byte 0xe6 in position 0: unexpected end of data
    htm5本地存储方案——websql的封装
    htm5本地存储方案——indexdb的封装
    jquery实现checkbox的单选和全选
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
  • 原文地址:https://www.cnblogs.com/wjlbk/p/12633311.html
Copyright © 2011-2022 走看看