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

HTTP模块(二）

news 文章来源：https://blog.csdn.net/weixin_45780818/article/details/140251577 2025/5/14 8:05:01

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>

在这里插入图片描述

请求HTML文档：浏览器首先向服务器发送请求以获取HTML文档。这一步通常通过URL完成。
解析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中出现的顺序执行。

渲染流程：在解析HTML和加载CSS的过程中，浏览器开始构建渲染树，它是DOM和CSSOM的合并产物，表示哪些节点需要如何显示。一旦渲染树构建完成，并且相关资源（如图片）准备就绪，浏览器会开始渲染页面。
重排与重绘：在页面加载和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报文常见属性： const http require(http);const server http.createServer((request, response) > {// 设置请求状态码 2xx 4xx 5xxresponse.statusCode 200;// 设置请求描述了解即可response.statusMessage hello// 指定响…...

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

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

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

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

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

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

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

使用el-table实现自动滚动

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

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

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

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

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

day13(DNS域名解析)

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

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

uboot的mmc partconf命令

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

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

数据结构经典测题3

1. 设有定义： char *p; ，以下选项中不能正确将字符串赋值给字符型指针 p 的语句是【多选】（ ） 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()记录文本信息时，如果文本中含有含尖括号的标记，就会被自动识别为html标记，因此tensorboard会自动生成对应的带斜杠的结束标记。例如要记录的文本是 abc<abc>，在tensorboard中就会显示为a…...

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

sql-libs通关详解

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

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

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

当按键具有上拉电阻时，可以通过正确配置STM32的GPIO端口和编写相应的控制代码来实现按键控制LED灯的功能。具体来说，需要配置按键所连接的GPIO端口为输入模式，并启用内部上拉电阻，这样在按键未操作时该端口保持高电平状态&#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. 物理攻击：例如恶意破坏、搬走充电设施等，这可能会对充电设施造成损害，妨碍正常的电力传输。 2. 网络攻击： 黑客可能利用系统漏洞攻击网络，破坏设备，并窃取用户的个人信息、支付信息等； 车辆…...

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

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

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

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

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

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

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

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

文章目录介绍基于传统视觉方法的检测基于颜色和边缘信息基于背景抑制基于深度学习的检测特征金字塔网络（FPN）红绿灯检测特征金字塔自下而上自上而下横向连接特征融合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题解】以二进制加法的方式来计算两个内容为二进制数字的字符串相加的结果

🎉欢迎大家收看，请多多支持🌹 🥰关注小哇，和我一起成长🚀个人主页🚀 👑目录分析：🚀 数字层面分析⭐ 字符串层面分析⭐ 代码及运行结果分析:&#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

linux自动化构建工具--make/makefile

目录 1.make/makefile介绍 1.1基本认识 1.2依赖关系、依赖方法 1.3具体操作步骤 1.4进一步理解 1.5默认设置 1.6make二次使用的解释 1.7两个文件的时间问题 1.8总是被执行 1.9特殊符号介绍 1.make/makefile介绍 1.1基本认识 make是一个指令，makefile是一…...

编程日记 2024/7/25 13:54:27

学习记录——day15 数据结构链表

链表的引入顺序表的优缺点 1、优点:能够直接通过下标进行定位元素，访问效率高，对元素进行查找和修改比较快 2、不足:插入和删除元素需要移动大量的元素，效率较低 3、缺点:存储数据元素有上限，当达到MAX后，就不能再…...

编程日记 2024/7/25 13:51:16

vue3实现在新标签中打开指定的网址

有一个文件列表，如下图： 我希望点击查看按钮的时候，能够在新的标签页面打开这个文件的地址进行预览，该如何实现呢？ 比如： 实际上要实现这个并不难，参考demo如下： 首先&#x…...

编程日记 2024/7/25 13:50:15

Qt基础 | QSqlTableModel 的使用

文章目录一、QSqlTableModel 的使用1.主窗口MainWindow类定义2.构造函数3.打开数据表3.1 添加 SQLite 数据库驱动、设置数据库名称、打开数据库3.2 数据模型设置、选择模型、自定义代理组件、界面组件与模型数据字段间的数据映射 4.添加、插入与删除记录5.保存与取消修改6.设置…...

编程日记 2024/7/25 13:47:11

RPA软件-影刀使用

流程自动化影刀将操作进行抽象，分为一下几个对象： 网页自动化 （1） 网页自动化应用场景：网页操作、数据抓取 （2） 网页操作：基础操作-指令操作，智能操作-关联元素&#…...

编程日记 2024/7/25 13:45:09

HarmonyOS NEXT零基础入门到实战-第四部分

自定义组件: 概念: 由框架直接提供的称为系统组件， 由开发者定义的称为自定义组件。源代码： Component struct MyCom { build() { Column() { Text(我是一个自定义组件) } } } Component struct MyHeader { build() { Row(…...

编程日记 2024/7/25 13:44:08

vue2获取视频时长

使用HTML5的video标签和JavaScript： <template><video ref"video" autoplay controls loop muted loadedmetadata"getVideoDuration"><source src"https://desktop-yikao.oss-cn-beijing.aliyuncs.com/avatar/kaissp.mp4&q…...

编程日记 2024/7/25 13:41:05

Linux中进程的控制

一、进程的创建 1、知识储备进程的创建要调用系统接口，头文件 #include<unistd.h> 函数fork() 由于之前的铺垫我们现在可以更新一个概念进程内核数据结构（task_struct, mm_struct, 页表....） 代码数据所以如何理解进程的独…...

编程日记 2024/7/25 13:40:03

【源码】Sharding-JDBC源码分析之JDBC

Sharding-JDBC系列 1、Sharding-JDBC分库分表的基本使用 2、Sharding-JDBC分库分表之SpringBoot分片策略 3、Sharding-JDBC分库分表之SpringBoot主从配置 4、SpringBoot集成Sharding-JDBC-5.3.0分库分表 5、SpringBoot集成Sharding-JDBC-5.3.0实现按月动态建表分表 6、【…...

编程日记 2024/7/25 13:39:02

Java | Leetcode Java题解之第273题整数转换英文表示

题目： 题解： class Solution {String[] singles {"", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"};String[] t…...

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