HTTP和第三方模块

许小墨~

已于 2023-05-15 21:07:05 修改

阅读量386

点赞数 1

分类专栏：全栈工程师的基本素养 # 后端开发文章标签： javascript 前端 http 网络协议开发语言

于 2023-04-14 21:55:46 首次发布

本文链接：https://blog.csdn.net/qq_60306931/article/details/130161108

版权

全栈工程师的基本素养同时被 2 个专栏收录

100 篇文章 0 订阅

订阅专栏

后端开发

13 篇文章 0 订阅

订阅专栏

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
后端系列文章——传送门

HTTP和第三方模块

一、http

1、介绍

为什么要学习http？因为前端和后台进行交互的时候，使用的就是这个协议。

HTTP协议，叫超文本传输协议(Hypertext transfer protocol)。是一个规则，规定了浏览器和服务器之间通信的规则。

http的传输行为，共分为三个步骤：

建立连接
进行传输
断开连接

无论是哪个步骤，都是由客户端主动开始的，这样比较安全，也符合用户的心理预期。否则，服务器主动给客户端发消息会让人不寒而粟，例如：我们打开浏览器什么也没做，淘宝就主动给用户发消息开始支付。

2、三次握手

客户端和服务器传输数据之前，必须先建立连接才可以，建立连接的过程，叫做三次握手。

建立连接，类似于我们平常在聊天的时候，说正事之前，会先说：‘在吗’，对方回答：‘在’。然后才说正事。

建立连接，就是为后续的传输做准备，所以建立连接的过程中，客户端和服务器都需要确保自己和对方都可以收发消息。

第一次握手：客户端主动给服务器发送消息，请求连接（其中会携带一些数据作为这次连接的识别符）。

第二次握手：服务器收到消息后，给客户端回应一个消息，表示已经收到要连接的请求（其中会携带两部分数据，一部分是第一次的识别符，另一部分是这次响应的识别符）。

第三次握手：客户端收到服务器的消息后，给服务器再次发送消息，表示收到服务器响应的消息（其中要携带响应的识别符）。

3、传输

当连接建立后，客户端就可以跟服务器进行传输了，整个传输过程分为两个阶段：

客户端给服务器发起请求
服务器给客户端做出响应

3.1、请求

http协议中规定，客户端发起请求的请求信息，要遵循请求报文的格式，请求报文规定请求信息分为4个部分：

请求行
请求头
请求空行
请求主体

我们可以在浏览器的network（网络）中看到当前页面的请求，

点击请求名称，可以打开请求，看到这次请求的详细信息，

其中Request就是这次请求的所有请求信息。

3.1.1、请求行

请求信息原始界面中的第一行就是请求行

请求行中包含三个内容：

请求方式

客户端对服务器发起不同的请求方式，服务器有不同的识别规则和回应。最常见的请求方式：
- get：参数会暴露在地址栏；数据有大小限制，最大4kb；数据只能进行url编码；get请求会被记录在历史记录；可能会被浏览器缓存。语义用于获取服务器端数据。常见的get请求包括：
  - 在地址栏输入数据敲回车
  - 点击a标签跳转
  - html中引入图片、引入css、引入js、引入html地址
  - form默认的提交方式，也可以设置get提交方式
- post：参数不会暴露在地址栏；数据大小没有限制；数据可以不经过url编码，可以是其他格式数据；post不会被记录在历史记录；不会被浏览器缓存。语义用于给服务器提交数据。常见的post请求：form标签的post提交方式
- put：语义用于请求服务器修改数据
- delete：语义用于请求服务器删除数据
请求路径

请求的完整url组成如下图：

在这里插入图片描述

这里所指的请求路径是上图中的path+hash部分。

注意：请求路径永远是/开头。

请求的协议以及版本

http请求的协议为http。不同的网络通信，请求协议也是不同的，常见的协议有：

http/https/ssh/ftp/sftp/mongodb/mysql/。。。

demo：nodejs服务器获取请求方式和请求路径
```
req.method
req.url
```

3.1.2、请求头

请求头代表发起请求的信息中，一些键值对，可以说明这次请求的一些信息

具体含义：

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9 # 告诉服务器当前客户端可以接收的文档的类型。其实这里包含了*/*，就表示什么都可以接收；
Accept-Encoding: gzip, deflate, br # 客户端支持的编码
Accept-Language: zh-CN,zh;q=0.9 # 当前客户端可以支持的语言，在浏览器的工具->选项中可以得到相关信息
Cache-Control: max-age=0 # 缓存机制
Connection: keep-alive # 客户端支持的连接方式，保持一段连接，默认为3000ms
Host: localhost:3000 # 请求的主机名为localhost：8080，url中的host部分，包含hostname和port
Sec-Fetch-Dest: document # 告诉服务器 浏览器如何使用获取的数据
Sec-Fetch-Mode: navigate # 表示这是一个浏览器的页面切换请求
Sec-Fetch-Site: none # 表示一个请求发起者的来源与目标资源来源之间的关系，因为直接敲回车打开的，所以没有目标来源
Sec-Fetch-User: ?1 # 表示导航请求由用户激活触发(鼠标点击/键盘)
Upgrade-Insecure-Requests: 1 # 表示这个请求不安全，可以跟服务器协商升级为https协议
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 # 告诉网站服务器，访问者是通过什么工具来请求的,其中包含系统和客户端信息
sec-ch-ua: "Google Chrome";v="107", "Chromium";v="107", "Not=A?Brand";v="24" # user-agent的补充，怕user-agent泄漏客户端信息而做出的补充
sec-ch-ua-mobile: ?0 # 是否是移动设备
sec-ch-ua-platform: "Windows" # 系统

demo：nodejs服务器获取请求头

req.headers

3.1.3、请求空行

请求头和请求主体之间要有一个空行。好截取内容。

3.1.4、请求主体

客户端想服务器发起请求的时候可以给服务器携带一些参数，叫做请求主体。

不同的请求方式携带参数的方式也不同的。

get请求的请求主体，是带在url中的

demo：nodejs服务器获取get请求参数

const url = require('url')
const http = require('http')
http.createServer((req, res) => {
    if(req.url.startsWith('/index.html') && req.method === 'GET'){
    	// 获取get请求参数
  		url.parse(req.url).query
    }
    
}).listen(端口号)

post请求的请求主体，不在url中显示，必须打开浏览器的payload中才能看到：

后端代码：

require('http').createServer((req, res) => {
    if(req.url === '/') {
        res.end(require('fs').readFileSync('./form.html'))
    } else if(req.url === '/postSubmit') {
        res.end('this is post submit!')
    } else {
        res.end()
    }
}).listen(3000)

前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单页面</title>
</head>
<body>
    <form method='post' action="/postSubmit">
        账号：<input type="text" name="account" />
        <br>
        密码：<input type="password" name="password" />
        <br>
        <input type="submit" />
    </form>
</body>
</html>

demo：nodejs服务器获取post请求参数

require('http').createServer((req, res) => {
    if(req.method === 'POST' && req.url === '/postSubmit') {
     	// 获取post参数
        var str = ''
        req.on('data', chunk => {
            str += chunk.toString()        
        })
        req.on('end', () => {
            console.log(str)
        })
    }
}).listen(端口号)

req有on方法用于绑定事件，数据的传送是分成每一小部分传递的

data事件，当有一小部分数据传递过来时触发，其中参数chunk代表这一小部分数据，默认格式为buffer

end事件，当数据传送完毕后触发

整个过程是异步的

3.2、响应

http规定，服务器接收请求后，要对客户端进行相应。http规定响应信息必须遵循响应报文的规则。响应报文规则包含3部分内容：

响应行
响应头
响应主体

3.2.1、响应行

响应行包含3部分：

协议和版本
状态码

状态码是http协议规定用来描述这次请求，服务器给出响应的状态，http请求共有5中响应状态：
- 1xx：代表请求已被接受，需要继续处理
- 2xx：代表请求已成功被服务器接收、理解、并接受
- 3xx：代表需要客户端采取进一步的操作才能完成请求
- 4xx：代表了客户端看起来可能发生了错误，妨碍了服务器的处理
- 5xx：代表了服务器在处理请求的过程中有错误或者异常状态发生
状态描述

每个状态码，都有一个描述对应，更详细的说明这个状态码的含义。

参考网址：响应状态码

demo：nodejs服务器设置响应状态码
```
res.writeHead(状态码, 状态描述)
```

3.2.2、响应头

响应头是一些键值对来描述响应信息：

Date: Sun, 27 Nov 2022 02:11:46 GMT # 响应时间
Connection: keep-alive # http1.1版本可以允许客户端和服务器持续连接，下次请求可免除重复断开请求的过程，节省连接效率
Keep-Alive: timeout=5 # 表示这个持续的连接可以保持5秒
Content-Length: 18 # 服务端给客户端的数据长度

demo：nodejs服务器设置避免中文乱码的响应头

res.setHeader('Content-Type', 'text/html;charset=utf8')

3.2.3、响应主体

响应主体是服务器给客户端响应的主要数据。

4、四次挥手

当客户端和服务器结束这次请求后，需要断开连接。断开连接也叫作四次挥手。具体过程如下：

第一次挥手，客户端主动对服务器发起断开请求（携带这次请求的标识符）

第二次挥手，服务器回应收到这次请求，并做断开准备（携带对这次请求的标识符，表示对这个请求做回应）

第三次挥手，服务器做好断开准备后，通知客户端，可以断开了，当客户端断开后，服务器将销毁这次请求的信息，不再回应（携带对这次请求的标识符，表示对这个请求做回应）

第四次挥手，客户端告诉服务器已经断开（携带回应的标识符）

二、第三方模块下载

nodejs自带的模块无法满足业务需求时，我们需要自定义模块来完成功能，对于某一类型的功能，为了能重复使用，自定义的模块是需要封装的。假设已经有人封装好这样的模块了，我们只需要下载下来导入就能使用。这样由别人封装好的模块，叫第三方模块。

第三方模块，需要下载下来。传统方式的下载，需要打开官网，找到下载页，点击下载按钮。

在nodejs开发中，第三方模块，不需要打开官网，只需要执行命令即可，比起传统下载方式方便n倍。

nodejs内置了下载功能，转为下载第三方模块而设计 - npm。

1、npm

npm是nodejs自带的转为下载模块的功能，不用下载安装，有安装好nodejs后，直接就可以运行。

npm -v # 查看npm版本

npm下载模块：

npm install/i 包名
npm i 包名 包名 ... # 下载多个模块
npm i 包名@版本号 # 最新版本可以使用 @latest

下载命令执行之后，会生成node_modules文件夹，将下载好的包放在这个文件夹中。这个文件夹的特点：文件比较琐碎，层级嵌套较深，依赖关系较多…

下载命令执行后，还会生成package.json文件，记录所有在当前文件夹下下载的模块和版本。

还会生成package-lock.json，该文件也会记录模块，但没什么作用，可忽略。

查看模块的所有版本：

npm view 模块 versions

查看所有安装好的依赖包：

npm list # 简写 npm ls

卸载：

npm uninstall/un 包名

npm切换镜像源：

npm config set registry 镜像源地址 # 切换命令
npm config get registry # 查看镜像源地址
npm --registry https://registry.npm.taobao.org install node-red-contrib-composer@latest # 临时切换使用

一个项目的开发，通常会使用很多模块，这写模块会保存在node_modules文件夹。项目开发完成后，需要上线，也就是要将本地项目上传到远程服务器，本质上就是将本地文件复制到远程服务器一份。

node_modules文件夹由于自身的特点：文件比较琐碎，层级嵌套较深，会导致在复制的时候，可能会丢失部分文件，这样项目上传到远程服务器也就无法运行了。

为了避免这个问题发生，我们在上传项目的时候，就会忽略上传node_modules，仅上传package.json文件，然后在package.json文件所在文件夹执行命令：npm i，就可以将package.json中记录好的模块，都重新下载安装成功。

可见package.json文件的重要性，但是我们在执行下载命令，有时候是不会自动生成package.json文件的，此时就需要我们在做项目之前，强行生成package.json文件：

npm初始化命令（强制生成package.json文件）：

npm init # 手动输入整个包的信息
npm init -y # 自动生成整个包的信息 - 不能在中文文件夹下使用

下载好的模块如果不知道怎么使用，上网查询：npm官网。所有使用npm能下载好的模块，都在这个网站上能找到。

2、yarn

yarn跟npm一样，是一个第三方包的管理工具，比起npm，yarn工具更加高效快捷。

通常在下载一些较为复杂的包的时候，多个包之间总会有一些依赖关系，npm下载的时候，使用续发形式下载，也就是同步下载;而yarn是并发形式下载，也就是异步下载，效率更高。

例如，我们需要模块A，但是模块A需要依赖模块B，模块B又需要依赖模块C，npm下载的时候是按照顺序：C—>B—>A；yarn下载的时候是并发下载：A和B和C同时下载。

yarn不是一个自带工具，需要手动下载安装，下载地址：yarn官网。傻瓜式安装即可。

检测安装：

yarn --version

初始化：

yarn init
yarn init -y

下载安装包：

yarn add 包
yarn add 包@版本号

卸载包：

yarn remove 包

安装全部依赖：

yarn 
yarn install

三、常用工具

1、nodemon

我们在使用nodejs的http模块开发服务器的时候，每开发一些代码，就需要停止服务器，然后重启生效，过程很繁琐。

nodemon可以让项目文件发生变化的时候自动重新启动。

下载安装：

npm i nodemon -g

工具下载好后，是需要在计算机任何一个目录下都可以使用的，所以要在下载命令后添加-g的参数，意为全局安装，计算机任何一个目录下都可以使用。

使用：

nodemon 待执行的js文件

当文件发生改变后，会自动重新启动，无需手动停止启动。

2、http-server

http-server工具可以快速将一个文件夹作为服务器根目录，创建一个用于显示页面的服务器。

下载安装：

npm i http-server -g

使用：在目标文件夹下执行命令

http-server

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog

许小墨~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTTP和第三方模块

http网络协议详解以及npm的使用
复制链接

扫一扫

专栏目录

HTTP和第三方模块

私人博客

系列文章目录

文章目录

HTTP和第三方模块

一、http

1、介绍

2、三次握手

3、传输

3.1、请求

3.1.1、请求行

3.1.2、请求头

3.1.3、请求空行

3.1.4、请求主体

3.2、响应

3.2.1、响应行

3.2.2、响应头

3.2.3、响应主体

4、四次挥手

二、第三方模块下载

1、npm

2、yarn

三、常用工具

1、nodemon

2、http-server

注

“相关推荐”对你有帮助么？