HTTP和第三方模块

news2025/1/17 3:51:31

私人博客

许小墨の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组成如下图:

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/443532.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

zookeepr 简介

简介&#xff1a; zookeeper是为分布式应用提供协调服务的高性能组件。zookeeper通过简单的接口暴露了一些公共服务(命名、配置管理、同步和分组服务), 因此你不需要从头开始写这些服务。你可以现成得使用zookeeper来实现共识、组管理、领导者选举和存在协议。你可以根据自己的…

ConcurrentHashMap分段锁

1.分段锁的设计目的 ConcurrentHashMap 是支持高并发的线程安全的 HashMap。相较于 HashTable 使用 synchronized 方法来保证线程安全&#xff0c;ConcurrentHashMap 采用分段锁的方式&#xff0c;在线程竞争激烈的情况下 ConcurrentHashMap 的效率高很多。 ConcurrentHashMa…

考勤系统的最佳实践 - 静态活体检测 API 技术

引言 静态活体检测&#xff08;Static Liveness Detection&#xff09;API 是一种基于人脸识别技术&#xff0c;用于判断面部图像或视频是否为真实人脸的 API 接口。它基于图片中人像的破绽&#xff08;摩尔纹、成像畸形等&#xff09;&#xff0c;判断目标是否为活体&#xf…

abpvnext 创建数据时发布本地事件ILocalEventBus.PublishAsync ,创建的数据被阻塞的问题解决

一、问题背景描述&#xff1a; 我有一个需求&#xff0c;需要在字典服务里创建字典类型成功后执行ILocalEventBus.PublishAsync 发布一个事件&#xff0c;让主业务服务订阅这个事件&#xff0c;然后执行业务代码将字典类型同步给所有租户。 最开始我在字典服务员的applicatio…

数据结构实验 C语言 一元二项式操作

东莞理工学院请勿抄袭 1.实验目的 通过实验达到&#xff1a; ⑴ 理解和掌握线性结构的概念及其典型操作的算法思想&#xff1b; ⑵ 熟练掌握基本线性结构-线性表的顺序存储结构、链式存储结构及其操作的实现&#xff1b; ⑶ 理解和掌握受限线性结构——堆栈、队列、串、数…

HTTP 1 2 3 的演变过程

1 HTTP/1.1 相比 HTTP/1.0 提高了什么性能&#xff1f; HTTP/1.1 相比 HTTP/1.0 性能上的改进&#xff1a; 使用长连接的方式改善了 HTTP/1.0 短连接造成的性能开销。支持管道&#xff08;pipeline&#xff09;网络传输&#xff0c;只要第一个请求发出去了&#xff0c;不必等…

【ECharts+Vue】学习笔记(快速入门版)

一、ECharts 1.1 什么是Echarts ECharts 是一个使用 JavaScript 实现的开源可视化库&#xff0c;涵盖各行业图表&#xff0c;满足各种需求。提供了丰富的可视化图标&#xff0c;帮助你轻松实现大屏展示。 官网地址&#xff1a;Apache ECharts 1.2 ECharts的安装 直接下载 下载官…

分布式之搜索解决方案es

一 ES初识 1.1 概述 ElasticSearch&#xff1a;是基于 Lucene 的 Restful 的分布式实时全文搜索引擎&#xff0c;每个字段都被索引并可被搜索&#xff0c;可以快速存储、搜索、分析海量的数据。是ELK的一个组成,是一个产品&#xff0c;而且是非常完善的产品&#xff0c;ELK代表…

webRtc播放rtsp视频流(vue2、vue3+vite+ts)

一、下载webRtc 开发环境用的win10版本的。 github上直接下载&#xff0c;速度感人。 Releases mpromonet/webrtc-streamer GitHub 提供资源下载&#xff0c;0积分 https://download.csdn.net/download/weiqiang915/87700892 二、启动&#xff0c;测试 webrtc-streame…

PDD滑块分析

文章目录 1.流程分析2.关键点分析3.结果展示 声明&#xff1a;本文只作学习研究&#xff0c;禁止用于非法用途&#xff0c;否则后果自负&#xff0c;如有侵权&#xff0c;请告知删除&#xff0c;谢谢&#xff01; 欢迎大佬加群一起交流哇&#xff08; Q群&#xff1a;985475126…

基于web的电动车租赁管理系统C#+asp.net+sqlserver

具体功能如下&#xff1a;个人信息管理&#xff1a;实现登陆后对个人信息进行修改和查看的功能。 修改登录密码&#xff1a;实现登陆后对个人密码进行修改的功能。 申请租车订单&#xff1a;客户用户登陆后可以申请租车订单。同时可以查看租赁订单信息。 售后评价管理&#xff…

深度学习中的一阶段目标检测

博主简介 博主是一名大二学生&#xff0c;主攻人工智能研究。感谢让我们在CSDN相遇&#xff0c;博主致力于在这里分享关于人工智能&#xff0c;c&#xff0c;Python&#xff0c;爬虫等方面知识的分享。 如果有需要的小伙伴可以关注博主&#xff0c;博主会继续更新的&#xff0c…

飞行机器人专栏(十二)-- 提高机器人系统可靠性的关键要素与实践

本文将介绍如何在机器人系统的开发过程中融入关键要素&#xff0c;从而提高系统的可靠性。我们将从需求分析、设计阶段、开发与调试、验证与优化、迭代与升级等方面进行详细讨论&#xff0c;并提供示例代码以帮助您更好地理解相关概念。 目录 一、需求分析与规划 二、…

XML与JSON知识学习

目录 XML简介 XML的结构 小结 使用DOM 练习 小结 使用SAX 练习 小结 使用Jackson 练习 小结 使用JSON 反序列化 练习 小结 XML简介 XML是可扩展标记语言&#xff08;eXtensible Markup Language&#xff09;的缩写&#xff0c;它是一种数据表示格式&#xf…

管理后台项目-01-项目模板-登录相关-路由搭建-品牌相关

目录 1-项目模板 1.1-项目目录结构说明​编辑 1.2-前置项目相关配置 2-登录相关开发 3-路由的搭建 4-品牌管理 4.1-品牌列表 4.2-新增/修改品牌 4.3-删除品牌名称 1-项目模板 前端的后台管理系统我们采用github上有的成熟项目作为模板来开发&#xff1b; 简洁版:GitHu…

【CocosCreator入门】CocosCreator组件 | ScrollView(滚动视图)组件

Cocos Creator 是一款流行的游戏开发引擎&#xff0c;具有丰富的组件和工具&#xff0c;其中的ScrollView组件是一种用于实现滚动视图效果的重要组件。它可以让我们在游戏中实现各种滚动视图效果&#xff0c;例如列表、地图等。 目录 一、组件介绍 二、组件属性 三、详细说明…

java+mysql crm客户关系管理系统的设计与实现

在众多网站开发技术中,JSP支持现在绝大多数操作平台,它在代码执行效率、代码可移植性及组建的应用上均优越于其他动态网页技术。因此,本文研究了基于JSP技术的系统动态网站。根据JSP的原理按照网站时机原则以及步骤,对动态网站的定义了目标、分析了网站功能需求,进行了结构…

windows 10 下安装配置mysql8.0 (保姆级教程)

文章目录 一、MySQL 8.0的基本信息二、MySQL 8.0的系统要求三、MySQL 8.0的安装步骤3.1. 下载MySQL 8.03.2. 运行MySQL安装文件3.3. 选择安装类型3.4. 配置MySQL Server3.5 mysql shell 的使用 四、总结 一、MySQL 8.0的基本信息 MySQL是一种开放源代码的关系型数据库管理系统…

2023Java高频面试题,jvm虚拟机体系结构,收藏必看!

1. 前言 最近很多小伙伴在找工作. 在面试中, 面试官经常问到的一个面试题是 : 请说出Jvm虚拟机体系结构? 小伙伴们, 一般会说堆, 栈.....然后面试官问, 那还知道其他的吗, 然后小伙伴们就语塞了....... 面试后来问千锋健哥, 所以健哥在这里为大家来讲讲这个Jvm虚拟机体系结…

【一起啃书】《机器学习》第三章 线性模型

第三章 线性模型 3.1 基本形式 给定由 d d d个属性描述的示例 x ( x 1 ; x 2 ; . . . ; x d ) {\bf{x}} ({x_1};{x_2};...;{x_d}) x(x1​;x2​;...;xd​)&#xff0c;其中 x i x_i xi​是 x \bf{x} x在第 i i i个属性上的取值&#xff0c;线性模型试图学得一个通过属性的线性…