node JS 处理 http 请求之 GET 和 POST 请求

素颜马尾好姑娘i 2022-12-26 15:28 114阅读 0赞

#### 一、http ####

1.  `http` 请求概述，如下所示：

*  `DNS` 解析，建立 `TCP` 连接，发送 `http` 请求
 *  `server` 接收到 `http` 请求，处理，并返回
 *  客户端接收到返回数据，处理数据，如渲染页面，执行 `JS`

1.  `node JS` 处理 `http` 请求，如下所示：

*  `get` 请求和 `querystring`
 *  `post` 请求和 `postdata`
 *  路由

#### 二、node JS 处理 get 请求 ####

1.  `node JS` 处理 `get` 请求，如下所示：

*  `get` 请求，即客户端要向 `server` 端获取数据，如查询列表
 *  通过 `querystring` 来传递数据，如 `a.html?a=100&b=200`
 *  浏览器直接访问，就发送 `get` 请求

1.  通过 `npm init -y` 初始化项目，新建 `app.js` 文件，代码如下所示：

const http = require('http')
    const querystring = require('querystring')
    
    const server = http.createServer((req, res) => { 
      console.log('method:', req.method)
      const url = req.url
      console.log('url:', url)
      req.query = querystring.parse(url.split('?')[1])
      console.log('query:',req.query)
      res.end(JSON.stringify(req.query)) 
    })
    
    server.listen(8000)
    console.log('ok')

1.  通过 `node app.js` 命令运行项目，在浏览器窗口分别输入 `http://localhost:8000/api/list` 和 `http://localhost:8000/api/list?name=zhangsan&age=20`， 发送 `GET` 请求，如下所示：

*  `http://localhost:8000/api/list`，如图所示：

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

*  `http://localhost:8000/api/list?name=zhangsan&age=20`，如图所示：

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

#### 三、node JS 处理 post 请求 ####

1.  `node JS` 处理 `post` 请求，如下所示：

*  `post` 请求，即客户端要像服务端传递数据，如新建信息
 *  通过 `post.data` 传递数据
 *  浏览器无法直接模拟，需要手写 `js`，或者使用 `postman`

1.  在 `app.js` 文件中，代码如下所示：

const http = require('http')
    const querystring = require('querystring')
    
    const server = http.createServer((req,res) => { 
      if (req.method === 'POST') { 
        // req 数据格式
        console.log('req content-type:', req.headers['content-type'])
        // 接收数据
        let postData = ''
        req.on('data', chunk => { 
          postData += chunk.toString()
        })
        req.on('end', () => { 
          console.log('postData:', postData)
          res.end('end 结束')
        })
      }
    })
    
    
    server.listen(8000)
    console.log('ok')

1.  通过 `node app.js` 命令运行项目，在 `postman` 中，在 `http://localhost:8000/` 请求中，在 `raw` 中输入 `{ "name": "zhangsan", "age": 24 }`，发送 `POST` 请求，如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][20201206142557782.png_pic_center]

[20201206142322191.png_pic_center]: /images/20221120/67e6f7822e144d18b5988fe1e6779aec.png
[20201206142333264.png_pic_center]: /images/20221120/b3685bbd85464d6fae7407d8903ac66e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/75d6f583eacb47838ef3682f0d9d6a7a.png
[202012061424393.png_pic_center]: https://img-blog.csdnimg.cn/202012061424393.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201206142546790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70#pic_center
[20201206142557782.png_pic_center]: https://img-blog.csdnimg.cn/20201206142557782.png#pic_center