HTTP实战（nodejs）

喜欢ヅ旅行 2023-07-15 13:22 18阅读 0赞

目录：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

### HTTP（get） ###

方法 [http.get(url\[, options\]\[, callback\])][http.get_url_ options_ callback]

*  参数：  
    url < string> | < URL>  
    options < Object> ，接受与 http.request() 相同的 options，且 method 始终设置为 **GET**。从原型继承的属性将被忽略。  
    callback < Function>
 *  这个方法与 http.request() 的唯一区别是它将方法设置为 GET 并自动调用 req.end()。
 *  callback 调用时只有一个参数，该参数是 http.IncomingMessage 的实例。  
    [IncomingMessage][] 对象由 http.Server 或 http.ClientRequest 创建，并分别作为第一个参数传给 ‘request’ 和 ‘response’ 事件。 它可用于访问响应状态、消息头、以及数据。

console.log(response)，response是callback 调用时的参数（http.IncomingMessage 的实例），然后把statusCode解构拿出来了 let \{statusCode\}=response;  
![在这里插入图片描述][20200318091613864.png] ![在这里插入图片描述][20200318092410600.png]  
F12或ctrl+shift+i，点Network—>all，能够查看状态码、文本类型等信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]  
console.log(chunk) 多个数据块接收拼接，最终形成完整的数据  
![在这里插入图片描述][20200318095142505.png]

##### http常用 statusCode 状态码： #####

1**：通知   100~200   
    2**：成功   200~300    200成功       288 端口号被占用
    3**：重定向  300~400   302移动       304缓存
    4**：客户端错误         404资源不存在
    5**：服务器错误

### 拉钩代理例子（request） ###

通过nodejs的http模块实现简单的代理功能。

比如说我们打开拉勾网的网站，现在我们想要自己本地设置一个端口打开，那么怎么去做这个代理呢？  
拉勾网原网址：https://m.lagou.com/listmore.json?pageNo=2&pageSize=15  
现在我们用这个网址打开：http://localhost:8099/listmore.json?pageNo=2&pageSize=15

1、先用原网址打开：把这串数据的url拿过来，直接地址栏输入，就能得到这串数据。  
![在这里插入图片描述][20200318190223890.png]  
![在这里插入图片描述][2020031819014852.png]  
![在这里插入图片描述][20200318190344453.png]  
2、然后现在我们尝试用本地端口打开。

开启服务：  
![在这里插入图片描述][20200318191613512.png]  
如果不写具体的请求参数，那么，request.url会默认为 “/”（服务端控制台查看）  
![在这里插入图片描述][20200318191647993.png] ![在这里插入图片描述][20200318192251543.png]  
现在完整路径打开，能够看到现在 req.url: /listmore.json?pageNo=2&pageSize=15；  
另外，显示的这串数据其实就是服务端响应的数据`res.write(rowdata)`  
![在这里插入图片描述][20200318192415439.png] ![在这里插入图片描述][20200318192450977.png]

> 小知识点：一级域名、二级域名  
> 比如百度 m.baidu.com 、 fe.baidu.com， 如果配置 \* .baidu.com 那么前面两个网址就能跨域访问。  
> baidu.com 一级域名（顶级域名） m fe \* 这些位置的都是二级域名

大师兄：[Noodjs 代理的实现：手动封装代理与http-proxy-middleware插件实现代理][Noodjs _http-proxy-middleware]

### 拉钩代理例子（http-proxy-middleware） ###

安装：

*  npm init -y 先生成package.json文件
 *  yarn add http-proxy-middleware@0.21.0 注意不要安装过新的版本，可能不稳定

现在我想配置一个代理，通过匹配 “/fetch” 来走这个代理，  
http://localhost:8099/fetch/listmore.json?pageNo=2&pageSize=15 ，同样能访问原站点访问的数据；  
原站点：https://m.lagou.com/listmore.json?pageNo=2&pageSize=15

能够看到用代理的站点也能访问。  
![在这里插入图片描述][20200318211351158.png]  
![在这里插入图片描述][20200318211409770.png]

### http.request 请求发送、接收 ###

[中文文档][Link 1]

*  两种形式：  
    http.request(options\[, callback\])  
    http.request(url\[, options\]\[, callback\])
 *  参数：  
    url < string> | < URL>  
    options < Object>  
    callback < Function>

（注意注意：咱们下来的两个例子，客户端与服务端都得开着，分两个终端来开启。）

#### 一、post ####

client.js 客户端

server.js 服务端

服务正常开启，服务端打印接收到的数据，响应结果给客户端：  
![在这里插入图片描述][2020031822234267.png]  
客户端收到服务器的响应：  
![在这里插入图片描述][2020031822231751.png]

#### 二、get ####

通俗来讲，与post最大的不同是url直接携带请求参数。

client.js 客户端

server.js 服务端

开启服务器，接收数据，回复响应：  
![在这里插入图片描述][20200318225330466.png]  
客户端接收响应信息：  
![在这里插入图片描述][20200318225420701.png]  
小知识点：中间层的概念，node作为中间层，比如node把Java的多个接口整合成一个接口。

### HTTP爬虫 (Request) ###

先说下原则，能爬的爬，不能爬的不爬，反爬的绝对不能爬。

然后，下面用nodejs来实现网页内容的抓取，也就是简单的爬虫。  
比如我们爬 [https://www.microsoftstore.com.cn/][https_www.microsoftstore.com.cn] 这个网站的一些开元内容。

用到一个插件cheerio，是jquery核心功能简洁实现，主要是用在服务器端需要对DOM进行操作的地方。  
安装：yarn add cheerio （可以先生成package.json文件，npm init -y 以便查看安装信息）

// 爬虫
    
    const https=require('https');
    const $ =require('cheerio');//引入cheerio模块
    
    function filterData(data){ 
        // console.log("data:",data);//data是链接页面的html代码
        var items=$(data).find('.listContainerInner li');//类似选择器，找到要爬数据的唯一标识
        // console.log("items.length:",items.length);//5
        var result=[];//最有希望被爬出的数据以数组返回
        $(items).each((index,item)=>{ 
            // console.log("item:",item);
            // console.log("$(item):",$(item));//比item多了个"0"，放在第一位
            // console.log($(item).find('.price strong').text());//能够把价格信息都拿到
    
            let $item=$(item);//不重新命名也行
            var param={ 
                url:$item.find('img').attr('data-src'),
                name:$(item).find('.name h4').text(),
                price:$item.find('.price strong').text(),
            }
            result.push(param);//把每一条拿出来数据以对象的形式每次放入数组
        })
        console.log(result);
        // return result;//以数组返回
    }
    
    var app=https.request({ 
        protocol:'https:',
        hostname:'www.microsoftstore.com.cn',
        port:443,//https的默认端口 
        method:'GET'
    },(res)=>{ 
        var rawdata='';
        res.on('data',(chunk)=>{ 
            rawdata+=chunk;
        })
        res.on('end',()=>{ 
            // console.log(rawdata);//rawdata是链接页面的html代码
            filterData(rawdata);
        })
    })
    
    app.end();

我们想要把这五条数据的一些信息拿到手：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]  
然后信息就拿到手啦：  
![在这里插入图片描述][20200320114158992.png]

### 登录、退出 小例子 ###

// /api/login
    // /api/logout
    
    const http = require('http');
    const qs = require('querystring');
    
    http.createServer((req, res) => { 
        var url = req.url;//用户请求路径
        var rawdata = '';
        console.log('method:',req.method);//查看请求方式是get还是post
        res.setHeader('Content-Type', 'application/json;charset:utf-8;');// 如果遇到字符乱码的问题，就设置文本类型
        req.on('data', (chunk) => { 
            rawdata += chunk;
        })
        req.on('end', () => { 
            // console.log(qs.parse(rawdata));//就相当于JSON.parse()
            console.log("url:",url);//判断是否登录或退出 /api/login
            console.log("rawdata:",rawdata);//客户端发过来的参数
            switch (url) { 
                case '/api/login':
                    let username = qs.parse(rawdata).username;//相当于JSON.parse()，尝试使用不同方法
                    console.log(username);
                    var result = { 
                        code: 1,
                        message: '登陆成功',
                        username
                    }
                    res.end(JSON.stringify(result));//res.write()与res.end()的缩写版
                    break;
                case '/api/logout':
                    var result = { 
                        code: 2,
                        message: '退出成功',
                    }
                    res.write(JSON.stringify(result));//跟JSON.stringify()功能一样
                    res.end();
                    break;
            }
        })
    }).listen(3000, () => {  // listen是绑定端口，监听端口
        console.log('正常启动 localhost 3000...');
    })

介绍一款插件insomnia，用于前后端分离，可以模拟浏览器发送各种方式的请求。  
登录login，客户端向服务端发送请求：  
![在这里插入图片描述][202003201330416.png]  
服务端：  
![在这里插入图片描述][20200320133303803.png]  
退出logout，客户端退出登录：  
![在这里插入图片描述][2020032013291339.png]  
服务端：  
![在这里插入图片描述][20200320133403716.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230528/6bb0b0384cf941fbbd6ab4df492b1f57.png
[http.get_url_ options_ callback]: http://nodejs.cn/api/http.html#http_http_get_options_callback
[IncomingMessage]: http://nodejs.cn/api/http.html#http_class_http_incomingmessage
[20200318091613864.png]: https://img-blog.csdnimg.cn/20200318091613864.png
[20200318092410600.png]: /images/20230528/89e096ae868a473ca8499ae2ad024fa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/2c855f204f304a3aa386938897392c23.png
[20200318095142505.png]: /images/20230528/ce85cf0234a24daaa05ba06bee1176ed.png
[20200318190223890.png]: /images/20230528/2e8db03205c84801864e2ba202cc311e.png
[2020031819014852.png]: /images/20230528/cf0481bf89584305bcfc965666d8b789.png
[20200318190344453.png]: /images/20230528/67cb47bc2d464139afbb349149aaa408.png
[20200318191613512.png]: /images/20230528/5f55e7bdc4e24042a871fc92f9abca1a.png
[20200318191647993.png]: https://img-blog.csdnimg.cn/20200318191647993.png
[20200318192251543.png]: /images/20230528/f3039051945f46d9957c3e0dcbd574a7.png
[20200318192415439.png]: https://img-blog.csdnimg.cn/20200318192415439.png
[20200318192450977.png]: /images/20230528/17e8476f9a0f4c62b36025b43df250e5.png
[Noodjs _http-proxy-middleware]: https://www.cnblogs.com/ltfxy/p/12515345.html
[20200318211351158.png]: /images/20230528/1f681d2318b7468a8d7c725238c42875.png
[20200318211409770.png]: /images/20230528/29cc7831e63e43b084104e9bab2bb1a2.png
[Link 1]: http://nodejs.cn/api/http.html#http_http_request_options_callback
[2020031822234267.png]: /images/20230528/1a5e5c1c28e342c587505afc607bd71b.png
[2020031822231751.png]: /images/20230528/ef45d17e35564c36964fbd82f5c34227.png
[20200318225330466.png]: /images/20230528/b807f0b647804876b7669ede1c77782f.png
[20200318225420701.png]: /images/20230528/042e879dc9a44b3c87d4dd86d4138541.png
[https_www.microsoftstore.com.cn]: https://www.microsoftstore.com.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: /images/20230528/34d482b61add4fda8690a0123cb7b8a5.png
[20200320114158992.png]: /images/20230528/a9cdd49b88ac4a2bb1eb48c30f1fb0f0.png
[202003201330416.png]: /images/20230528/1eb273727a704f428bf420b5e7c4336a.png
[20200320133303803.png]: /images/20230528/973b1736cfd241f48df389e4b87d9c4b.png
[2020032013291339.png]: /images/20230528/1aa35153a1ee4b4a891eff64e635e1ce.png
[20200320133403716.png]: /images/20230528/300aee846417402b8f149f062d671ccf.png