HTTP和第三方模块

私人博客

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

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

系列文章目录

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


文章目录

  • 私人博客
  • 系列文章目录
  • 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


HTTP和第三方模块

一、http

1、介绍

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

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

http的传输行为,共分为三个步骤:

  1. 建立连接
  2. 进行传输
  3. 断开连接

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

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组成如下图:

HTTP和第三方模块_第1张图片

这里所指的请求路径是上图中的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 addyarn 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

你可能感兴趣的:(全栈工程师的基本素养,#,后端开发,javascript,前端,http,网络协议,开发语言)