当前位置： 首页 > news >正文

HTTP模块(二）

news 2025/9/13 23:15:34

HTTP

设置 HTTP 响应报文

HTTP报文常见属性：

const http = require('http');const server = http.createServer((request, response) => {// 设置请求状态码 2xx 4xx 5xxresponse.statusCode = 200;// 设置请求描述 了解即可response.statusMessage = 'hello'// 指定响应体的MIME类型response.setHeader('Content-Type', 'text/html; charset=utf-8');// 指定响应内容的编码方式，如gzip或deflate，用于内容压缩。response.setHeader('Content-Encoding', 'gzip');// 用于实现跨源资源共享（CORS），指定哪些网站可以访问该资源。response.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有来源，实际应用中可能需要指定具体来源// 指示浏览器如何缓存响应response.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate'); // 禁止缓存// 一个实体标签，用于验证资源是否有变化response.setHeader('ETag', 'W/"abcd1234"');// 表示资源最后一次修改的时间。response.setHeader('Last-Modified', new Date().toUTCString());// 指示服务器软件的信息response.setHeader('Server', 'MyCustomServer/1.0');// 设置Cookie，用于会话管理等。response.setHeader('Set-Cookie', ['type=ninja', 'language=javascript']);// 指定响应过期时间，之后浏览器将不再缓存此响应。response.setHeader('Expires', new Date(Date.now() + 86400000).toUTCString()); // 一天后过期response.end('Hello Http Server');
});server.listen(9000, () => {console.log('服务已启动');
});

加载 HTML 文件内容

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;}table tr:nth-child(odd) {background: pink;}table tr:nth-child(even) {background: red;}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></table><script>//获取所有的 tdlet tds = document.querySelectorAll("td");//遍历tds.forEach((item) => {item.onclick = function () {this.style.background = "#ffffff";};});</script></body>
</html>

通过 FS 模块

const http = require('http');
const fs = require('fs');const server = http.createServer((request, response) => {const table = fs.readFileSync(__dirname + `/table.html`);response.end(table);
});server.listen(9000, () => {console.log('服务已启动');
});

response.end不仅可以接收字符串作为参数，发送文本数据给客户端，还能够接收 Buffer 对象来发送二进制数据，如图片、音频或视频文件等，需要注意的是使用 Buffer 时，确保你的内容类型（Content-Type）设置与实际数据类型相匹配，以便浏览器或客户端能够正确处理。

网页资源加载基本过程

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>标题</title><link rel="stylesheet" href="./css/index.css" /></head><body><h1>这是一个HTML页面</h1><hr /><img width="100%" src="./images/h5.png" alt="" /><script src="./js/index.js"></script></body>
</html>

在这里插入图片描述

  1. 请求HTML文档：浏览器首先向服务器发送请求以获取HTML文档。这一步通常通过URL完成。
  2. 解析HTML：浏览器开始解析收到的HTML文档，构建DOM（文档对象模型）。解析过程中，浏览器会遇到以下类型的资源：
  • CSS：当遇到link标签引用外部CSS文件或style标签包含内联样式时，浏览器会开始加载CSS（如果是外部链接，则发送CSS请求）。CSS的加载通常与HTML解析并行进行，但CSS的解析（构建CSSOM，即CSS对象模型）可能等待CSS文件完全加载后才进行，以确保正确应用样式。内联样式会立即被处理。
  • IMG 图片：遇到img标签时，浏览器会立即发送请求下载图片，但不会等待图片加载完成就继续解析HTML，以加快页面内容的显示。图片加载通常是异步的。
  • JavaScript：当浏览器遇到script标签时，一般分为同步脚本和异步脚本:
    • 同步脚本：默认情况下，JavaScript的加载和执行会阻塞HTML的解析。浏览器会暂停构建DOM，等待脚本下载并执行完毕。这是因为JavaScript有可能修改DOM结构或CSSOM。
    • 异步脚本：如果script标签指定了async属性，脚本会在下载的同时允许HTML解析继续，且脚本下载完成后会异步执行，不保证执行顺序。如果使用defer属性（仅适用于外部脚本），脚本同样不会阻塞HTML解析，但所有带有defer的脚本会在HTML解析完成后，DOMContentLoaded事件触发之前，按照在HTML中出现的顺序执行。
  1. 渲染流程：在解析HTML和加载CSS的过程中，浏览器开始构建渲染树，它是DOM和CSSOM的合并产物，表示哪些节点需要如何显示。一旦渲染树构建完成，并且相关资源（如图片）准备就绪，浏览器会开始渲染页面。
  2. 重排与重绘：在页面加载和JavaScript修改DOM/CSSOM时，可能会触发布局重排（Reflow）和样式重绘（Repaint），以反映页面结构或样式的改变。

加载 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><link rel="stylesheet" href="../css/index.css">
</head><body><table border="1"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table><script src="../js/index.js"></script>
</body>
</html>

目录结构

├─css
├─html
├─js
└─服务.js

启动服务.js后

const http = require('http');
const fs = require('fs');const server = http.createServer((request, response) => {const table = fs.readFileSync(__dirname + `/html/table.html`);response.end(table);
});server.listen(9000, () => {console.log('服务已启动');
});

会发现css样式和js点击功能失效。
在这里插入图片描述
这是由于响应报文均返回html所导致。
在这里插入图片描述
调整代码为以下即可：

//导入 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');console.log('pathname', pathname);if(pathname === '/'){let html = fs.readFileSync(__dirname + '/html/10_table.html');response.end(html); }else if(pathname === '/css/index.css'){let css = fs.readFileSync(__dirname + '/css/index.css');response.end(css); }else if(pathname === '/js/index.js'){let js = fs.readFileSync(__dirname + '/js/index.js');response.end(js);}else{response.statusCode = 404;response.end('<h1>404 Not Found</h1>')}});//监听端口, 启动服务
server.listen(9000, () => {console.log('服务已经启动....')
});

加载HTML文件内容（优化二）

//导入 http 模块
const http = require('http');
const fs = require('fs');
const path = require('path');//创建服务对象
const server = http.createServer((request, response) => {//获取请求url的路径let { pathname } = new URL(request.url, 'http://127.0.0.1');const filePath = __dirname + pathname;fs.readFile(filePath, (err, data) => {if (err) {response.statusCode = 500;return;}console.log('data', data);response.end(data);})

加载HTML文件内容（优化三）

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) => {// 拼接路径let url = new URL(request.url, 'http://127.0.0.1');// 根目录let root = __dirname + '/page';// 拼接文件路径 css js html ...let filePath = root + url.pathname;// 读取文件fs.readFile(filePath, (err, data) => {if (err) {console.error(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) {if (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

  • 在地址栏直接输入url访问
  • 点击a链接
  • link标签引入css
  • script标签引入js
  • img标签引入脱
  • from标签中的method为get
  • ajax中的get请求

POST

  • form标签中的method为post
  • ajax的post请求

相关文章：

HTTP模块(二）

HTTP 设置 HTTP 响应报文 HTTP报文常见属性&#xff1a; const http require(http);const server http.createServer((request, response) > {// 设置请求状态码 2xx 4xx 5xxresponse.statusCode 200;// 设置请求描述 了解即可response.statusMessage hello// 指定响…...

编程日记 2024/7/25 14:29:12

引入缓存带来的问题以及解决方案

目录 前言 问题与解决方案 缓存击穿 缓存穿透 缓存雪崩 缓存一致性 前言 在提升接口性能的方案中&#xff0c;毫无疑问&#xff0c;使用缓存是最有效果的&#xff0c;但同时也会带来新的问题。 缓存击穿缓存穿透缓存雪崩缓存一致性 以上问题都是引入缓存需要考虑的&am…...

编程日记 2024/7/25 14:26:08

力扣39题：组合总和的 Java 实现

引言 力扣&#xff08;LeetCode&#xff09;是一个在线编程平台&#xff0c;提供了大量的编程题目供开发者练习。第39题“组合总和”是一个经典的回溯算法问题&#xff0c;要求找出所有可能的组合&#xff0c;使得组合中的数字之和等于给定的目标值。本文将介绍如何使用 Java …...

编程日记 2024/7/25 14:25:05

使用el-table实现自动滚动

文章目录 概要技术实现完整代码 概要 在前端开发大屏的时候&#xff0c;我们会用到表格数据展示&#xff0c;有时候为了使用户体验更加好&#xff0c;会增加表格自动滚动。下边我将以示例代码&#xff0c;用element UI的el-table来讲一下。 技术实现 1 .增加dom监听&#xf…...

编程日记 2024/7/25 14:24:04

Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题

互联网产品离不开数据处理&#xff0c;数据处理有一些基本的原则包括&#xff1a;准确性、‌完整性、‌一致性、‌保密性、‌及时性。‌ 准确性&#xff1a;是数据处理的首要目标&#xff0c;‌确保数据的真实性和可靠性。‌准确的数据是进行分析和决策的基础&#xff0c;‌因此…...

编程日记 2024/7/25 14:23:02

day13(DNS域名解析)

今天内容&#xff1a; 1、逆向解析 2、多域名 3、时间服务器 4、主从配置 1.设置逆向解析 &#xff08;1&#xff09;永久配置我们自己的DNS服务器 &#xff08;2&#xff09;关闭NetworkManager服务 NetworkManager 的自动管理功能可能会干扰定制化的网络配置。 在需要切换…...

编程日记 2024/7/25 14:22:01

uboot的mmc partconf命令

文章目录 命令格式参数解释具体命令解释总结 mmc partconf 是一个用于配置 MMC (MultiMediaCard) 分区的 U-Boot 命令。具体来说&#xff0c;这个命令允许你设置或读取 MMC 卡的分区配置参数。让我们详细解释一下 mmc partconf 0 0 1 0 命令的含义。 命令格式 mmc partconf &…...

编程日记 2024/7/25 14:20:59

数据结构经典测题3

1. 设有定义&#xff1a; char *p; &#xff0c;以下选项中不能正确将字符串赋值给字符型指针 p 的语句是【多选】&#xff08; &#xff09; A: pgetchar(); B: scanf("%s",p); C: char s[]"china"; ps; D: *p"china"; 答案为ABD A选项&…...

编程日记 2024/7/25 14:19:57

tensorboard add_text() 停止自动为尖括号标记添加配对的结束括号＜/＞

问题 调用tensorboard的add_text()记录文本信息时&#xff0c;如果文本中含有含尖括号的标记&#xff0c;就会被自动识别为html标记&#xff0c;因此tensorboard会自动生成对应的带斜杠的结束标记。 例如要记录的文本是 abc<abc>&#xff0c;在tensorboard中就会显示为a…...

编程日记 2024/7/25 14:18:56

sql-libs通关详解

1-4关 1.第一关 我们输入?id1 看回显&#xff0c;通过回显来判断是否存在注入&#xff0c;以及用什么方式进行注入&#xff0c;直接上图 可以根据结果指定是字符型且存在sql注入漏洞。因为该页面存在回显&#xff0c;所以我们可以使用联合查询。联合查询原理简单说一下&…...

编程日记 2024/7/25 14:17:55

【STM32】当按键具有上拉电阻时GPIO应该配置什么模式？怎么用按键去控制LED翻转？

当按键具有上拉电阻时&#xff0c;可以通过正确配置STM32的GPIO端口和编写相应的控制代码来实现按键控制LED灯的功能。具体来说&#xff0c;需要配置按键所连接的GPIO端口为输入模式&#xff0c;并启用内部上拉电阻&#xff0c;这样在按键未操作时该端口保持高电平状态&#xf…...

编程日记 2024/7/25 14:15:52

EXO-chatgpt_api 解释

目录 chatgpt_api 解释 resolve_tinygrad_tokenizer 函数 resolve_tokenizer 函数 调试和日志记录​​​​​​​ 参数 返回值 初始化方法 __init__ 异步方法 注意事项 chatgpt_api 解释 展示了如何在一个项目中组织和导入各种库、模块和类，以及如何进行一些基本的We…...

编程日记 2024/7/25 14:12:48

新能源汽车的充电网络安全威胁和防护措施

1. 物理攻击&#xff1a;例如恶意破坏、搬走充电设施等&#xff0c;这可能会对充电设施造成损害&#xff0c;妨碍正常的电力传输。 2. 网络攻击&#xff1a; 黑客可能利用系统漏洞攻击网络&#xff0c;破坏设备&#xff0c;并窃取用户的个人信息、支付信息等&#xff1b; 车辆…...

编程日记 2024/7/25 14:09:44

Linux中利用消息队列给两个程序切换显示到前台

消息队列–两个进程间的通信 需求&#xff1a; 1.在Linux系统中2.两个ui界面的程序切换&#xff0c;一个显示&#xff0c;另一个隐藏 .h #ifndef PROGRAMWINDOWSWITCH2_H #define PROGRAMWINDOWSWITCH2_H#include <QObject> #include <QThread> #include <Q…...

编程日记 2024/7/25 14:07:42

C语言实例-约瑟夫生者死者小游戏

问题&#xff1a; 30个人在一条船上&#xff0c;超载&#xff0c;需要15人下船。于是人们排成一队&#xff0c;排队的位置即为他们的编号。报数&#xff0c;从1开始&#xff0c;数到9的人下船&#xff0c;如此循环&#xff0c;直到船上仅剩15人为止&#xff0c;问都有哪些编号…...

编程日记 2024/7/25 14:04:39

算法类学习笔记 ———— 红绿灯检测

文章目录 介绍基于传统视觉方法的检测基于颜色和边缘信息基于背景抑制 基于深度学习的检测特征金字塔网络&#xff08;FPN&#xff09;红绿灯检测特征金字塔自下而上自上而下横向连接 特征融合SSD红绿灯检测 高精度地图结合 介绍 红绿灯检测就是获取红绿灯在图像中的坐标以及它…...

编程日记 2024/7/25 14:03:38

git命令使用详细介绍

1 环境配置 设置的信息会保存在~/.gitconfig文件中 查看配置信息 git config --list git config user.name设置用户信息 git config --global user.name "有勇气的牛排" git config --global user.email “1809296387qq.com”2 获取Git仓库 2.1 本地初始化一个仓…...

编程日记 2024/7/25 13:59:34

WebStorm中在Terminal终端运行脚本时报错无法加载文件进行数字签名。无法在当前系统上运行该脚本。有关运行脚本和设置执行策略的详细信息，请参阅

错误再现 我们今天要 在webstorm用终端运行脚本 目的是下一个openAPI的 前端请求代码生成的模块 我们首先从github上查看官方文档 我们根据文档修改 放到webstorm终端里执行 报错 openapi : 无法加载文件 C:\Users\ZDY\Desktop\多多oj\dduoj\node_modules\.bin\openapi.p…...

编程日记 2024/7/25 13:58:33

【Java题解】以二进制加法的方式来计算两个内容为二进制数字的字符串相加的结果

&#x1f389;欢迎大家收看&#xff0c;请多多支持&#x1f339; &#x1f970;关注小哇&#xff0c;和我一起成长&#x1f680;个人主页&#x1f680; &#x1f451;目录 分析&#xff1a;&#x1f680; 数字层面分析⭐ 字符串层面分析⭐ 代码及运行结果分析:&#x1f6…...

编程日记 2024/7/25 13:56:30

docker -v 到底和那个一样？type=volume还是type=bind的解释

逐行通俗详细的解释下这个代码“#!/usr/bin/env bash # # This script will automatically pull docker image from DockerHub, and start a daemon container to run the Qwen-Chat web-demo.IMAGE_NAMEqwenllm/qwen:2-cu121 QWEN_CHECKPOINT_PATH/path/to/Qwen-Instruct PORT…...

编程日记 2024/7/25 13:55:29

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/9/12 22:07:59

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/7/18 10:35:00

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/9/2 4:01:22

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/8/24 19:33:30

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/9/6 0:09:27

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/9/11 20:26:21

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/8/26 21:58:04

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/8/16 15:34:02

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/9/2 17:48:08

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2025/9/8 20:54:35