Node.js |(四)HTTP协议 | 尚硅谷2023版Node.js零基础视频教程

学习视频:尚硅谷2023版Node.js零基础视频教程,nodejs新手到高手

在这里插入图片描述

文章目录

  • 📚HTTP概念
  • 📚窥探HTTP报文
  • 📚请求报文的组成
    • 🐇HTTP请求行
    • 🐇HTTP请求头
    • 🐇HTTP的请求体
  • 📚响应报文的组成
    • 🐇响应行
    • 🐇响应头和响应体
  • 📚使用node.js创建HTTP服务
  • 📚浏览器查看HTTP报文
  • 📚获取HTTP请求报文
    • 🐇提取HTTP报文
    • 🐇提取HTTP报文的请求体(了解)
    • 🐇提取HTTP报文中URL路径与查询字符串
    • 🐇HTTP请求练习
  • 📚HTTP响应报文
    • 🐇设置HTTP响应报文
    • 🐇HTTP响应练习
  • 📚网页资源的基本加载过程
    • 🐇实现网页引入外部资源
  • 📚静态资源服务
    • 🐇网页中的URL
    • 🐇设置资源类型(mime类型)
    • 🐇GET和POST请求场景小结
    • 🐇GET和POST请求的区别

补充笔记

  • 计算机网络|第二章:应用层
  • 计算机网络|第四章:网络层:数据平面

📚HTTP概念

在这里插入图片描述
在这里插入图片描述

📚窥探HTTP报文

  • Fiddler
    在这里插入图片描述

  • 安装fiddler

    • 安装包下载地址
    • 安装
      在这里插入图片描述
  • 配置

    • ToolOptions里 ,找到HTTPS勾选Decrypt..,然后同意接下来的弹窗。记得点OK!然后重启!!
      在这里插入图片描述
      在这里插入图片描述
    • 设置Web Browsers
      在这里插入图片描述
  • 使用

    • 双击某一条则会显示详细信息
      在这里插入图片描述
    • 选择Raw会显示详细信息
      在这里插入图片描述

📚请求报文的组成

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

🐇HTTP请求行

在这里插入图片描述

  • 请求方法
    在这里插入图片描述

  • URLUniform Reaourse Locator,统一资源定位符,其本身也是一个字符串。
    在这里插入图片描述

  • 版本号
    在这里插入图片描述

🐇HTTP请求头

  • 格式:头名:头值
    在这里插入图片描述

在这里插入图片描述

🐇HTTP的请求体

在这里插入图片描述

📚响应报文的组成

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

🐇响应行

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

🐇响应头和响应体

在这里插入图片描述

  • 响应体内容的类型是非常灵活的,常见的类型有 HTML、CSS、JS、图片、JSON。
  • 相应头请求头这些都是不需要记住的,在MDN可查。

  • IP的介绍
    • IP也称为【IP地址】,本身是一个数字标识。
    • IP用来标识网络设备,用来实现设备通信。
    • 端口:应用程序的数字标识,实现不同主机应用程序之间的通信。

📚使用node.js创建HTTP服务

在这里插入图片描述


  1. 命令行 ctrl + c停止服务
  2. 当服务启动后,更新代码必须重启服务才能生效
  3. 响应内容中文乱码的解决办法:response.setHeader('content-type','text/html;charset=utf-8');
  4. 端口号被占用:Error: listen EADDRINUSE: address already in use :::9000
    1)关闭当前正在运行监听端口的服务 ( 使用较多 )
    2)修改其他端口号
  5. HTTP 协议默认端口是 80 。HTTPS 协议的默认端口是 443, HTTP 服务开发常用端口有 3000,
    8080,8090,9000 等。

在这里插入图片描述

//1. 导入 http 模块
const http = require('http');//2. 创建服务对象
const server = http.createServer((request, response) => {//response.end('Hello HTTP'); //设置响应体//解决响应内容中文乱码的问题response.setHeader('content-type', 'text/html;charset=utf-8');response.end('你好'); //设置响应体
});//3. 监听端口, 启动服务
//9000是端口号,以下在服务启动成功时运行
server.listen(9000, () => {console.log('服务已经启动....')
});

在这里插入图片描述在这里插入图片描述

📚浏览器查看HTTP报文

尚硅谷教程
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实操

  • 运行上边写的代码,打开对应网页,F12检查,查看网络。
    在这里插入图片描述
  • 查看127.0.0.1细节
    在这里插入图片描述
  • 运行表单页提交内容并查看请求体
    在这里插入图片描述
    在这里插入图片描述
  • 查看URL查询字符串
    在这里插入图片描述
  • 查看响应体
    在这里插入图片描述

📚获取HTTP请求报文

  • 想要获取请求的数据,需要通过request对象
    在这里插入图片描述

  1. request.url只能获取路径以及查询字符串,无法获取 URL 中的域名以及协议的内容
  2. request.headers将请求信息转化成一个对象,并将属性名都转化成了『小写』
  3. 关于路径:如果访问网站的时候,只填写了 IP 地址或者是域名信息,此时请求的路径为『 / 』
  4. 关于 favicon.ico:这个请求是属于浏览器自动发送的请求——获取图标

🐇提取HTTP报文

//1. 导入 http 模块
const http = require('http');//2. 创建服务对象
const server = http.createServer((request, response) => {//获取请求的方法console.log(request.method);//获取请求的 urlconsole.log(request.url);// 只包含 url 中的路径与查询字符串//获取 HTTP 协议的版本号console.log(request.httpVersion);//获取 HTTP 的请求头console.log(request.headers.host);response.end('http'); //设置响应体
});//3. 监听端口, 启动服务
server.listen(9000, () => {console.log('服务已经启动....')
});

在这里插入图片描述

🐇提取HTTP报文的请求体(了解)

//1. 导入 http 模块
const http = require('http');//2. 创建服务对象
const server = http.createServer((request, response) => {//1. 声明一个变量let body = '';//2. 绑定 data 事件request.on('data', chunk => {body += chunk;})//3. 绑定 end 事件request.on('end', () => {console.log(body);//响应response.end('Hello HTTP');});
});//3. 监听端口, 启动服务
server.listen(9000, () => {console.log('服务已经启动....')
});

在这里插入图片描述

  • 借助form表单
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
    </head>
    <body><form action="http://127.0.0.1:9000/index.html" method="post" ><input type="text" name="username"><input type="text" name="password"><input type="submit" value="提交"></form>
    </body>
    </html>
    
    在这里插入图片描述

🐇提取HTTP报文中URL路径与查询字符串

法一

//导入 http 模块
const http = require('http');
//1. 导入 url 模块(node.js内置模块)
const url = require('url');//创建服务对象
const server = http.createServer((request, response) => {//2. 解析 request.url ,parse:解析let res = url.parse(request.url, true);console.log(res);//路径let pathname = res.pathname;console.log(pathname);//查询字符串let keyword = res.query.keyword;console.log(keyword);response.end('url');
});//监听端口, 启动服务
server.listen(9000, () => {console.log('服务已经启动....')
});

在这里插入图片描述

在这里插入图片描述


法二

小插曲在这里插入图片描述本来以为是05没关,但ctrlC后还是报错🤔重开vs后OK😄记得CtrlC终止后再开新的终端⚠️
ps:nodejs端口号占用——解决办法

//导入 http 模块
const http = require('http');//创建服务对象
const server = http.createServer((request, response) => {//实例化 URL 的对象let url = new URL(request.url, 'http://127.0.0.1');//输出路径console.log(url.pathname);//输出 keyword 查询字符串console.log(url.searchParams.get('keyword'));response.end('url new');
});//监听端口, 启动服务
server.listen(9000, () => {console.log('服务已经启动....')
});

在这里插入图片描述

🐇HTTP请求练习

在这里插入图片描述

//1. 导入 http 模块
const http = require('http');//2. 创建服务对象
const server = http.createServer((request, response) => {//获取请求的方法let {method} = request;//获取请求的 url 路径let {pathname} = new URL(request.url, 'http://127.0.0.1');response.setHeader('content-type','text/html;charset=utf-8');//判断if(method === 'GET' && pathname === '/login'){//登录的情形response.end('登录页面');}else if(method === 'GET' && pathname === '/reg'){ // register 注册response.end('注册页面');}else{response.end('Not Found');}
});//3. 监听端口 启动服务
server.listen(9000, () => {console.log('服务已经启动.. 端口 9000 监听中....');
})

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

📚HTTP响应报文

🐇设置HTTP响应报文

在这里插入图片描述

//导入 http 模块
const http = require('http');//创建服务对象
const server = http.createServer((request, response) => {//1. 设置响应状态码response.statusCode = 203;//response.statusCode = 404;//2. 响应状态的描述 response.statusMessage = 'iloveyou';//3. 响应头response.setHeader('content-type', 'text/html;charset=utf-8');// response.setHeader('Server', 'Node.js');// response.setHeader('myHeader', 'test test test');// response.setHeader('test', ['a','b','c']);//4. 响应体的设置response.write('love');response.write('love');response.write('love');response.write('love');//write可以多次调用response.end('love'); //设置响应体//end不能不写也不能写多个,不然会报错//response.end('xxx'); //设置响应体
});//监听端口, 启动服务
server.listen(9000, () => {console.log('服务已经启动....')
});

在这里插入图片描述

🐇HTTP响应练习

  • 需求:搭建 HTTP 服务,响应一个 4 行 3 列的表格,并且要求表格有隔行换色效果 ,且 点击单元格能高亮显示

  • 采用html和js分离+导入实现。

  • html完成表格样式

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>td {padding: 20px 40px;}/* odd even交替实现隔行换色 */table tr:nth-child(odd) {background: rgb(202, 219, 255);}table tr:nth-child(even) {background: #fcb;}table,td {border-collapse: collapse;}</style>
    </head><body><table border="1"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table><script>//实现点击换色//获取所有的 tdlet tds = document.querySelectorAll('td');//遍历tds.forEach(item => {item.onclick = function () {this.style.background = 'yellow';}})</script>
    </body></html>
    
  • js设置响应

    //导入 http 模块
    const http = require('http');
    const fs = require('fs');//创建服务对象
    const server = http.createServer((request, response) => {//读取文件内容let html = fs.readFileSync(__dirname + '/10_table.html');response.end(html); //设置响应体
    });//监听端口, 启动服务
    server.listen(9000, () => {console.log('服务已经启动....')
    });
    

    在这里插入图片描述
    在这里插入图片描述

📚网页资源的基本加载过程

  • 网页资源的加载都是循序渐进的,首先获取 HTML 的内容, 然后解析 HTML 在发送其他资源的请求,如CSS,Javascript,图片等。
  • 理解了这个内容对于后续的学习与成长有非常大的帮助。

🐇实现网页引入外部资源

  • 这里使用的是上边那个表格的练习例子,但把html、css、js都单独拆开,关注外部资源引入问题!
    在这里插入图片描述

    //导入 http 模块
    const http = require('http');
    const fs = require('fs');//创建服务对象
    const server = http.createServer((request, response) => {//获取请求url的路径let {pathname} = new URL(request.url, 'http://127.0.0.1');if(pathname === '/'){//读取文件内容let html = fs.readFileSync(__dirname + '/10_table.html');response.end(html); //设置响应体}else if(pathname === '/index.css'){//读取文件内容let css = fs.readFileSync(__dirname + '/index.css');response.end(css); //设置响应体}else if(pathname === '/index.js'){//读取文件内容let js = fs.readFileSync(__dirname + '/index.js');response.end(js); //设置响应体}else{response.statusCode = 404;response.end('<h1>404 Not Found</h1>')}
    });//监听端口, 启动服务
    server.listen(9000, () => {console.log('服务已经启动....')
    });
    

    在这里插入图片描述

以上写法可行但很麻烦,于是接下来看静态资源服务👇

📚静态资源服务

  • 静态资源是指内容长时间不发生改变的资源 ,例如图片,视频,CSS 文件,JS文件,HTML文件,字体文件等。
  • 动态资源是指内容经常更新的资源 ,例如百度首页,网易首页,京东搜索列表页面等。
  • HTTP 服务在哪个文件夹中寻找静态资源,那个文件夹就是静态资源目录,也称之为网站根目录

🐇网页中的URL

喔——又是绝对路径相对路径喏——

  • 绝对路径
    在这里插入图片描述
  • 相对路径
    在这里插入图片描述
  • 关注运行后的URL拼接方式!
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>URL</title>
    </head>
    <body><!-- 绝对路径 --><a href="https://www.baidu.com">百度</a><a href="//jd.com">京东</a><a href="/search">搜索</a><hr><!-- 相对路径 --><a href="./css/app.css">访问CSS</a><a href="js/app.js">访问JS</a><a href="../img/logo.png">访问图片</a><a href="../../img/logo.png">访问图片</a>
    </body>
    </html>
    

🐇设置资源类型(mime类型)

在这里插入图片描述

/*** 创建一个 HTTP 服务,端口为 9000,满足如下需求* GET  /index.html        响应  page/index.html 的文件内容* GET  /css/app.css       响应  page/css/app.css 的文件内容* GET  /images/logo.png   响应  page/images/logo.png 的文件内容*/
//导入 http 模块
const http = require('http');
const fs = require('fs');
const path = require('path');
//声明一个变量
let mimes = {html: 'text/html',css: 'text/css',js: 'text/javascript',png: 'image/png',jpg: 'image/jpeg',gif: 'image/gif',mp4: 'video/mp4',mp3: 'audio/mpeg',json: 'application/json'
}//创建服务对象
const server = http.createServer((request, response) => {if(request.method !== 'GET'){response.statusCode = 405;response.end('<h1>405 Method Not Allowed</h1>');return;}//获取请求url的路径let {pathname} = new URL(request.url, 'http://127.0.0.1');//声明一个变量let root = __dirname + '/page';// let root = __dirname + '/../';//拼接文件路径let filePath = root + pathname;//读取文件 fs 异步 APIfs.readFile(filePath, (err, data) => {if(err){console.log(err);//设置字符集response.setHeader('content-type','text/html;charset=utf-8');//判断错误的代号switch(err.code){case 'ENOENT':response.statusCode = 404;response.end('<h1>404 Not Found</h1>');case 'EPERM':response.statusCode = 403;response.end('<h1>403 Forbidden</h1>');default:response.statusCode = 500;response.end('<h1>Internal Server Error</h1>');}return;}//获取文件的后缀名let ext = path.extname(filePath).slice(1);//获取对应的类型let type = mimes[ext];if(type){//匹配到了 text/html;charset=utf-8if(ext === 'html'){//解决乱码问题response.setHeader('content-type', type + ';charset=utf-8');}else{response.setHeader('content-type', type);}}else{//没有匹配到response.setHeader('content-type', 'application/octet-stream');}//响应文件内容response.end(data);})});//监听端口, 启动服务
server.listen(9000, () => {console.log('服务已经启动....')
});

🐇GET和POST请求场景小结

在这里插入图片描述

🐇GET和POST请求的区别

  • GET POST 是 HTTP 协议请求的两种方式。
    • GET主要用来获取数据,POST主要用来提交数据
    • GET 带参数请求是将参数缀到 URL 之后,在地址栏中输入 url 访问网站就是 GET 请求,
    • POST 带参数请求是将参数放到请求体中。
    • POST 请求相对 GET安全一些,因为在浏览器中参数会暴露在地址栏。
    • GET请求大小有限制,一般为 2K,而POST请求则没有大小限制。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux信号介绍

一、信号处理函数的注册 signal()使用&#xff1a; 1 #include<stdio.h>2 #include <signal.h>3 4 void handler(int signum)5 {6 switch(signum){7 case 2:8 printf("signum %d\n",signum);9 …

Multipass虚拟机设置局域网固定IP同时实现快速openshell的链接

本文只介绍在windows下实现的过程&#xff0c;Ubuntu采用22.04 安装multipass后&#xff0c;在卓面右下角Open shell 就可以链接默认实例Primary&#xff0c;当然如果你有多个虚拟机&#xff0c;可以针对不同内容单独建立终端的链接&#xff0c;而本文仅仅用Primary来说明。 …

GO学习之 微框架(Gin)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…

《大型网站技术架构》第二篇 架构-高可用

高可用在公司中的重要性 对公司而言&#xff0c;可用性关系网站的生死存亡。对个人而言&#xff0c;可用性关系到自己的绩效升迁。 工程师对架构做了许多优化、对代码做了很多重构&#xff0c;对性能、扩展性、伸缩性做了很多改善&#xff0c;但别人未必能直观地感受到&#…

【三维编辑】Seal-3D:基于NeRF的交互式像素级编辑

文章目录 摘要一、引言二、方法2.1.基于nerf的编辑问题概述2.2.编辑指导生成2.3.即时预览的两阶段学生训练 三、实验四、代码总结 项目主页: https://windingwind.github.io/seal-3d/ 代码&#xff1a;https://github.com/windingwind/seal-3d/ 论文: https://arxiv.org/pdf/23…

JavaWeb-Servlet服务连接器(一)

目录 1.Servlet生命周期 2.Servlet的配置 3.Servlet的常用方法 4.Servlet体系结构 5.HTTP请求报文 6.HTTP响应报文 1.Servlet生命周期 Servlet&#xff08;Server Applet&#xff09;是Java Servlet的简称。其主要的功能是交互式地浏览和修改数据&#xff0c;生成一些动态…

Springboot04--vue前端部分+element-ui

注意点&#xff1a; 这边v-model和value的区别&#xff1a;v-model是双向绑定的&#xff0c;value是单向绑定 li的key的问题 vue的组件化开发&#xff1a; 1. NPM&#xff08;类似maven&#xff0c;是管理前段代码的工具&#xff09; 安装完之后可以在cmd里面使用以下指令 2.…

初出茅庐的小李博客之认识编码器

编码器是什么&#xff1a; 一种将角位移或者角速度转换成一连串电数字脉冲的旋转式传感器&#xff0c;我们可以通过编码器测量到底位移或者速度信息。编码器通常由一个旋转部分和一个固定部分组成&#xff0c;旋转部分随着被测量的物体进行旋转&#xff0c;固定部分则保持不动…

vue2 封装 webSocket 开箱即用

第一步&#xff1a; 下载 webSocket npm install vue-native-websocket --save 第二步&#xff1a; 需要在 main.js 中 引入 import websocket from vue-native-websocket; Vue.use(websocket, , {connectManually: true, // 手动连接format: json, // json格式reconnection:…

【Ubuntu】简化反向代理和个性化标签页体验

本文将介绍如何使用Docker部署Nginx Proxy Manager和OneNav&#xff0c;两个功能强大且易用的工具。Nginx Proxy Manager用于简化和管理Nginx反向代理服务器的配置&#xff0c;而OneNav则提供个性化的新标签页体验和导航功能。通过本文的指导&#xff0c;您将学习如何安装和配置…

JavaScript类

JavaScript 类(class) 类是用于创建对象的模板。 我们使用 class 关键字来创建一个类&#xff0c;类体在一对大括号 {} 中&#xff0c;我们可以在大括号 {} 中定义类成员的位置&#xff0c;如方法或构造函数。 每个类中包含了一个特殊的方法 constructor()&#xff0c;它是类…

【yolov系列:小白yolov7跑数据集建立环境】

首先在github上面获取别人的源码 这个是github的源码包&#xff0c;直接下载解压使用 打开解压后的文件夹应该可以看到这个页面。 进入文件夹的requirements.txt的页面 这篇文章是为了记录自己的环境配置过程&#xff0c;当作笔记使用来看&#xff0c;目前网上各种安装教程都…

深入浅出:MyBatis的使用方法及最佳实践

这里写目录标题 添加MyBatis框架⽀持配置连接字符串和MyBatis配置连接字符串配置 MyBatis 中的 XML 路径 添加业务代码创建数据库和表添加用户实体类添加 mapper 接⼝添加 UserMapper.xml添加 Service层添加 Controller层 增删改操作增加操作删除操作修改操作 添加MyBatis框架⽀…

浏览器多管闲事之跨域

年少时的梦想就是买一台小霸王游戏机 当时的宣传语就是小霸王其乐无穷~。 大些了&#xff0c;攒够了零花钱&#xff0c;在家长的带领下终于买到了 那一刻我感觉就是最幸福的人 风都是甜的&#xff01; 哪成想... 刚到家就被家长扣下了 “”禁止未成年人玩游戏机 (问过卖家了&a…

泛微E-Office任意文件上传漏洞复现(HW0day)

0x01 产品简介 泛微E-Office是一款标准化的协同 OA 办公软件&#xff0c;泛微协同办公产品系列成员之一,实行通用化产品设计&#xff0c;充分贴合企业管理需求&#xff0c;本着简洁易用、高效智能的原则&#xff0c;为企业快速打造移动化、无纸化、数字化的办公平台。 0x02 漏…

【LeetCode】数据结构题解(13)[设计循环链表]

设计循环链表 &#x1f609; 1.题目来源&#x1f440;2.题目描述&#x1f914;3.解题思路&#x1f973;4.代码展示 所属专栏&#xff1a;玩转数据结构题型❤️ &#x1f680; >博主首页&#xff1a;初阳785❤️ &#x1f680; >代码托管&#xff1a;chuyang785❤️ &…

selenium环境搭建

文章目录 1、下载谷歌浏览器2、下载谷歌驱动 1、下载谷歌浏览器 浏览器下载完成后&#xff0c;在任务管理器中禁止浏览器的自动更新。因为驱动版本必须和浏览器一致&#xff0c;如果浏览器更新了&#xff0c;驱动就用不起了。 2、下载谷歌驱动 谷歌驱动需要和谷歌浏览器版本…

Spring-Cloud-Loadblancer详细分析_3

前两篇文章介绍了加载过程&#xff0c;本文从Feign的入口开始分析执行过程&#xff0c;还是从FeignBlockingLoadBalancerClient.execute来入手 public class FeignBlockingLoadBalancerClient implements Client {private static final Log LOG LogFactory.getLog(FeignBlock…

2023全新UI好看的社区源码下载/反编译版

2023全新UI好看的社区源码下载/反编译版 这次分享一个RuleAPP二开美化版&#xff08;尊重每个作者版权&#xff09;&#xff0c;无加密可反编译版本放压缩包了&#xff0c;自己弄吧&#xff01;&#xff01;&#xff01; RuleAPP本身就是一款免费开源强大的社区&#xff0c;基…

【MySQL--->数据库操作】

文章目录 [TOC](文章目录) 一、操作语句1.增2.删3.改4.查5.备份 二、字符集与校验规则 一、操作语句 1.增 语句格式:create database [if no exists]数据库名[create_specification [,create_specification] …]; 中括号内是可选项,if no exists是指如果数据库不存在就创建,存…