关于node中数据交互的理解

2021-06-18 本文已影响0人似朝朝我心

什么是数据交互？

数据交互是httpd协议中常见的，数据交互顾名思义就是我把数据传输给你，你再把数据返回给我，这么一个过程其实就是数据交互。

数据交互里面的一些基本概念：

数据交互过程图：

根据上图的意思，无非就是用户在客户端的浏览器中上网，这一个上网打开链接的过程，其实就是访问一个具体url地址而要发起一个请求到服务器这一端来，而服务器这边拿到客户端发过来的请求，表示收到呼叫，稍等片刻，在这片刻之间呢，服务器就会去处理客户端发起请求的，然后把结果反馈给客户端，并且告诉客户端一声，这是你的用户需要的资料，浏览器当即进行解析把页面渲染出来，然后用户就看到了浏览器解析网页后所呈现出的内容了，上述的这么一个过程其实就是数据交互啦。

那么在数据交互的过程中到底发送了什么事情呢？
比如浏览器发送给服务器的这个数据到底是什么？
服务器返还给客户端的这个数据又是什么呢？

嘿嘿!其实，这个数据就叫报文，那报文又长啥样呢？

从浏览器发送给服务器的这个数据，我叫它请求报文，换言之还有一个响应报文。

请求报文拆解图：

如果我们用过ajax就知道，报文其实Network里面那个东东，分别对应请求头、请求体，还有响应头、响应体。

数据的交互方式，换个说法也可以叫数据的请求方式

常见的数据请求方式是:GET请求(完整请求一个资源)和POST请求(表单提交)

此外还有一些比较偏，或者比较冷，简单点就是平时基本用不到的数据请求方式：PUT（上传文件）、DELETE、PATCH（打补丁）、HEAD(仅请求响应首部)

什么是GET请求？

从字面上理解,GET就是获取、获得、得到的意思。而GET()请求主要就是获取数据。
发起GET请求,数据是放在url里面进行传输的，就像ajax里面的携带参数，专业点叫查询字符串,Query String，一段完整的url后面,出现了一个?，这个?符号后面就表示具体的携带信息，而&这个符号就是作参数拼接意思。

axios.get({
    url:'localhost:3000/api/goodsList?id=10023&page=1&limit=10'
})

回顾一下上面报文图，这里的url其实指的就是我们放在报文里面那个请求头位置的请求信息。

GET请求容量小,必须小于32KB,这是http协议规定的，因为这个规定，所以GET请求只允许传递少量的数据，比如一些数字、字符串等，如果想要传递图片格式的数据或者视频，GET请求确实有点捉襟见肘，必须采用POST请求。

当页面发起一个GET请求时，应如何拿到GET请求发送过来数据？

一个小demo,用到node中http模块来搭建服务器，而前端暂且使用表单发起GET请求。

前端界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:3000/api" method="GET">
        <table border="1"> 
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="userName"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="提交" style="width: 100%;"></td>
            </tr>
        </table>
    </form>
</body>
</html>

服务器：

const http = require('http')
//搭建服务器
http.createServer((req, res)=>{
    console.log(req.url);//拿到浏览器发起请求的路径
}).listen(3000)//监听端口号

运行服务器，当我们在客户端浏览器中提交表单后

PS C:\Users\asus\Desktop\学习Nodejs> node index
/api?userName=qinfubin&password=123456

如果我们想拿到这些数据，可以通过es6语法的解构赋值去获取，用split()方法去切一刀,返回一个字符串数组

const http = require('http')
//搭建服务器
http.createServer((req, res)=>{
    console.log(req.url);//拿到浏览器发起请求的路径
    let [url,queryString] = req.url.split('?') //以?号切一刀，返回1个字符串数组分别赋值给url和queryString
    console.log(url)
    console.log(queryString);
    let [user_name,passwd] = queryString.split('&')
    console.log(`用户名：${user_name},密码：${passwd}`);
}).listen(3000)//监听端口号

但在node中有一个url模块，有了它，我们就不需要去用split()去砍一刀又一刀，然后再结构赋值，我们为什么不用现成的呢？

const http = require('http')
const url = require('url')
//搭建服务器
http.createServer((req, res)=>{
    console.log(url.parse(req.url));//拿到浏览器发起请求的路径进行解析
}).listen(3000)//监听端口号

如果我们再增加一个参数：true，这样我们就直接可以拿到一个json对象

console.log(url.parse(req.url,true));

接下来我们只需要结构赋值，将json里面的数据值取出来即可

const http = require('http')
const url = require('url')
//搭建服务器
http.createServer((req, res)=>{
    //console.log(url.parse(req.url,true));;//拿到浏览器发起请求的路径进行解析
    const {pathname, query} = url.parse(req.url,true)
    console.log(`请求的路径pathname是:${pathname},用户名:${query.userName},密码：${query.password}`);
}).listen(3000)//监听端口号

POST请求和GET请求的区别在哪里？

我们知道无论是GET方式还是POST方式，它们共同的特点就是都可以发起请求，并且还可以进行传递数据。

而POST方式相比于GET方式，具体有哪些区别呢？

数据是放在body里面进行传输的。
具有小于2G的传递数据空间，传输容量大，是POST传递数据方式最明显的特点，这也意味着，传输一些视频或者图片格式的文件绰绰有余。
因为GET方式传递数据容量小，所以是一次性传输，而POST方式不一样，比如传递一个文件，因为数据量大，它会分成一段一段地进行传输二进制的buffer流。

demo案例
前端界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:3000/api" method="POST">
        <table border="1"> 
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="userName"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="提交" style="width: 100%;"></td>
            </tr>
        </table>
    </form>
</body>
</html>

服务器：

const http = require('http')
const queryString = require('querystring')
//搭建服务器
http.createServer((req, res)=>{
    let result = []
    req.on('data',buffer => { //监听buffer流动过程
        result.push(buffer)//将每次流过的都添加到数组中
    })
    req.on('end', () =>{//进行最后一次buffer流动的监听
        console.log('数据已经传输完成',result);
    })
}).listen(3000)//监听端口号

拿到的只是二进制的buffer流，我们需要转换成字符串的形式，才能看懂。

const http = require('http')
const queryString = require('querystring')
//搭建服务器
http.createServer((req, res)=>{
    let result = []
    req.on('data',buffer => { //监听buffer整个流动过程
        result.push(buffer)//将每次流过一段buffer流的都添加到数组中
    })
    req.on('end', () =>{//进行最后一次buffer流动的监听
        //console.log('数据已经传输完成',result);
        let data = Buffer.concat(result).toString()//将二进制的buffer流解析成字符串
        console.log(data);
        console.log(queryString.parse(data)); //解析成json对象
        
    })
}).listen(3000)//监听端口号

接下来只需要取出值即可

const http = require('http')
const queryString = require('querystring')
//搭建服务器
http.createServer((req, res)=>{
    let result = []
    req.on('data',buffer => { //监听buffer整个流动过程
        result.push(buffer)//将每次流过一段buffer流的都添加到数组中
    })
    req.on('end', () =>{//进行最后一次buffer流动的监听
        //console.log('数据已经传输完成',result);
        const data = Buffer.concat(result).toString()//将二进制的buffer流解析成字符串
        //console.log(data);
        //console.log(queryString.parse(data)); //解析成json对象
        const userName =  queryString.parse(data).userName;//取出用户名
        const password =  queryString.parse(data).password;//取出密码
        console.log(userName,password);
    })
}).listen(3000)//监听端口号

关于node中数据交互的理解

猜你喜欢

热点阅读