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

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

  • 配置

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

  • 使用

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

📚请求报文的组成

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

在这里插入图片描述

🐇HTTP请求行

在这里插入图片描述

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

  • URL：Uniform 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.hqwc.cn/news/59628.html

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

相关文章

慧算账的千亿财税市场之旅，从当好中小企业财税之友开始

慧算账的千亿财税市场之旅，从当好中小企业财税之友开始

数字化转型浪潮下&#xff0c;各个行业都在不断升级进化。不过&#xff0c;各领域中头部企业与中小企业数字化的方式有所不同。头部企业资金实力雄厚&#xff0c;对于数字化架构的搭建&#xff0c;往往会以内设部门加外部合作的方式来推进&#xff0c;而中小企业在可投入研发资…
阅读更多...
Android 面试重点之Framework （Handler篇）

Android 面试重点之Framework （Handler篇）

近期在网上看到不少Android 开发分享的面试经验&#xff0c;我发现基本每个面经中多多少少都有Framework 底层原理的影子。它也是Android 开发中最重要的一个部分&#xff0c;面试官一般会通过 Framework底层中的一些逻辑原理由浅入深进行提问&#xff0c;来评估应聘者的真实水…
阅读更多...
16-3_Qt 5.9 C++开发指南_使用QStyle 设置界面外观_实现不同系统下的界面效果的匹配

16-3_Qt 5.9 C++开发指南_使用QStyle 设置界面外观_实现不同系统下的界面效果的匹配

文章目录 1. QStyle的作用&#xff08;实现不同系统下的界面效果的匹配&#xff09;2. Qt内置样式的使用3. 源码3.1 可视化UI设计3.2 mainwindow.cpp 1. QStyle的作用&#xff08;实现不同系统下的界面效果的匹配&#xff09; Qt 是一个跨平台的类库&#xff0c;相同的界面组件…
阅读更多...
python版《羊了个羊》游戏开发第一天

python版《羊了个羊》游戏开发第一天

Python小型项目实战教学课《羊了个羊》 一、项目开发大纲&#xff08;初级&#xff09; 版本1.0&#xff1a;基本开发 课次 内容 技术 第一天 基本游戏地图数据 面向过程 第二天 鼠标点击和移动 面向对象 第三天 消除 设计模式&#xff1a;单例模式 第四天 完整…
阅读更多...
Database Comparer VCL for Delphi crack

Database Comparer VCL for Delphi crack

Database Comparer VCL for Delphi crack 数据库比较器VCL比较并同步许多流行数据库的数据库结构(元数据)和表数据。支持的数据库列表不断更新&#xff0c;包括InterBase、FireBird、MySQL、MSSQL、Oracle、Sybase、PostgreSQL、DB2、PervasiveSQL、MSAccess、Paradox、DBASE以…
阅读更多...
访问者模式——操作复杂对象结构

访问者模式——操作复杂对象结构

1、简介 1.1、概述 访问者模式是一种较为复杂的行为型设计模式&#xff0c;它包含访问者和被访问元素两个主要组成部分。这些被访问的元素通常具有不同的类型&#xff0c;且不同的访问者可以对它们进行不同的访问操作。访问者模式使得用户可以在不修改现有系统的情况下扩展系…
阅读更多...
分布式搜索ElasticSearch-ES（一）

分布式搜索ElasticSearch-ES（一）

一、ElasticSearch介绍 ES是一款非常强大的开源搜索引擎&#xff0c;可以帮我们从海量的数据中快速找到我们需要的内容。 ElasticSearch结合kibana、Logstash、Beats&#xff0c;也就是elastic stack(ELK)&#xff0c;被广泛运用在日志数据分析&#xff0c;实时监控等领域。 …
阅读更多...
Golang 包详解以及go mod

Golang 包详解以及go mod

Golang 中包的介绍和定义 包（package）是多个 Go 源码的集合，是一种高级的代码复用方案，Go 语言为我们提供了 很多内置包，如 fmt、strconv、strings、sort、errors、time、encoding/json、os、io 等。 Golang 中的包可以分为三种：1、系统内置包 2、自定义包 3、第三方包…
阅读更多...
View绘制流程-Window创建

View绘制流程-Window创建

前言&#xff1a; View绘制流程中&#xff0c;主要流程是这样的&#xff1a; 1.用户进入页面&#xff0c;首先创建和绑定Window&#xff1b; 2.首次创建以及后续vsync信号来临时&#xff0c;会请求执行刷新流程&#xff1b; 3.刷新流程完成后&#xff0c;会通知SurfaceFlin…
阅读更多...
【机器学习1】什么是机器学习机器学习的重要性

【机器学习1】什么是机器学习机器学习的重要性

什么是机器学习? 简而言之&#xff0c;机器学习就是训练机器去学习。 机器学习作为人工智能(Artificial Intelligence,AI)的一个分支&#xff0c;以其最基本的形式来使用算法通过从数据中获取知识来进行预测。 不同于人类通过分析大量数据手动推导规则和模型&#xff0c;机…
阅读更多...
等了10年，工信部的APP备案终于来了

等了10年，工信部的APP备案终于来了

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 2005年3月&#xff0c;工信部要求所有境内网站都要进行网站备案、公安备案。 2023年8月&#xff0c;工信部要求所有的APP、小程序进行备案。否则…… 这绝对是一个移动互联网创业分水岭&#xff0…
阅读更多...
Linux初识网络基础

Linux初识网络基础

目录 网络发展 认识“协议 ” 网络协议 OSI七层模型&#xff1a; TCP/IP五层&#xff08;或四层&#xff09;模型 网络传输基本流程 网络传输流程图&#xff1a; 数据包封装和封用 网络中的地址 认识IP地址&#xff1a; 认识MAC地址&#xff1a; 网络发展 1.独立…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023