【Node.js学习 day3——http模块】

创建HTTP服务端

//1.导入http模块
const http = require('http');

//2.创建服务对象
const server = http.createServer((request, response) => {
    response.end('Hello HTTP Server');//设置响应体
});

//3.监听端口，启动服务
server.listen(9000,()=>{
    console.log('服务已经启动...')
})

在这里插入图片描述

HTTP服务的注意事项

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

浏览器查看HTTP报文

在这里插入图片描述

获取请求行和请求头

想要获取请求的数据，需要通过request对象

含义语法
请求方法request.method
请求版本request.httpVersion
请求路径request.url
URL路径require(‘url’) .parse(request.url).pathname
URL查询字符串require(‘url’).parse(request.url, true).query
请求头request.headers
请求体request.on(‘data’,function(chunk){})
request.on(‘end’,function(){});

注意事项：

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

获取请求体

<!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" method="post">
            <input type="text" name="username">
            <input type="text" name="password">
            <input type="submit" value="提交">
        </form>
    </body>
</html>

在这里插入图片描述

//1.导入http模块
const http = require('http');

//2.创建服务对象
const server = http.createServer((request, response) => {
    //声明一个变量
    let body = '';
    //绑定data事件
    request.on('data', chunk =>{
        body += chunk;
    })
    //绑定end时间
    request.on('end',() =>{
        console.log(body);
        //响应
        response.end('Hello HTTP');
    });
});

//3.监听端口，启动服务
server.listen(9000,()=>{
    console.log('服务已经启动...')
})

在这里插入图片描述

获取请求路径与查询字符串

//1.导入http模块
const http = require('http');

//2.创建服务对象
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');
});

//3.监听端口，启动服务
server.listen(9000,()=>{
    console.log('服务已经启动...')
})

HTTP请求练习

按照一下要求搭建HTTP服务，请求类型GET

请求地址响应体结果
/login登录页面
/reg注册页面
//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('404 Not Found');
   }
});

//3.监听端口，启动服务
server.listen(9000,()=>{
    console.log('服务已经启动...')
})

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

设置HTTP响应报文

作用语法
设置响应状态码response.statusCode
设置响应状态描述response.statusMessage(用的非常少)
设置响应头信息response.setHeader（‘头名’，‘头值’）
设置响应体response.write(‘xx’)
response.end(‘xxx’)

HTTP响应练习

//1.导入http模块
const http = require('http');

//2.创建服务对象
const server = http.createServer((request, response) => {
   //设置响应状态码
   //response.statusCode = 203;
   //response.statusCode = 404;
   //响应状态的描述
   response.statusMessage = 'iloveyou'
   //响应头
   response.setHeader('content-type','text/html;charset=utf-8');
   response.setHeader('myHeader','test test test');
   response.write('love');
   response.write('love');
   response.write('love');
   response.write('love');
   response.end('xxx');//设置响应体
});

//3.监听端口，启动服务
server.listen(9000,()=>{
    console.log('服务已经启动...')
})

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

响应练习

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

//1.导入http模块
const http = require('http');

//2.创建服务对象
const server = http.createServer((request, response) => {
   //设置响应状态码
   //response.statusCode = 203;
   //response.statusCode = 404;
   //响应状态的描述
   response.statusMessage = 'iloveyou'
   //响应头
   response.setHeader('content-type','text/html;charset=utf-8');
   response.setHeader('myHeader','test test test');
   response.end(`<!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:#aef ;
               }
               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>
               //获取所有的td
               let tds = document.querySelectorAll('td');
               //遍历
               tds.forEach(item => {
                   item.onclick = function(){
                       this.style.background = '#222';
                   }
               })
           </script>
       </body>
   </html>`);//设置响应体
});

//3.监听端口，启动服务
server.listen(9000,()=>{
    console.log('服务已经启动...')
})

在这里插入图片描述

响应文件练习

//1.导入http模块
const http = require('http');
const fs = require('fs');

//2.创建服务对象
const server = http.createServer((request, response) => {
   //读取文件内容
   let html = fs.readFileSync(__dirname + '/form.html');
   response.end(html);//设置响应体
});

//3.监听端口，启动服务
server.listen(9000,()=>{
    console.log('服务已经启动...')
})

在这里插入图片描述

网页资源加载基本过程

先HTML，后CSS，最后JS
在这里插入图片描述

实现网页引入外部资源

test.js

const http = require('http');
const fs = require('fs');

const server = http.createServer((request, response) => {
    let { pathname } = new URL(request.url, 'http://127.0.0.1');
    if (pathname === '/') {
        let html = fs.readFileSync(__dirname + '/form.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.setHeader('Content-Type', 'application/javascript');
        response.end(js);
    } else {
        response.statusCode = 404;
        response.end(`<h1>404 Not Found </h1>`);
    }
});

server.listen(9000, () => {
    console.log('服务已经启动...');
});

form.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="./index.css">
        <script type="text/javascript" src="./index.js"></script>
        
    </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>
    </body>
</html>

index.css

td{
    padding:20px 40px;
}
table tr:nth-child(odd){
    background:#aef ;
}
table tr:nth-child(even){
    background:#fcb;
}
table, td{
    border-collapse: collapse;
}

index.js

 //获取所有的td
 let tds = document.querySelectorAll('td');
 //遍历
 tds.forEach(item => {
     item.onclick = function(){
         this.style.background = '#222';
     }
 })

静态资源与动态资源

静态资源是指内容长时间不发生改变的资源，例如图片，视频，CSS文件，JS文件，HTML文件，字体文件等。
动态资源是指内容经常更新的资源，例如百度首页，网易首页，京东搜索列表页面等。

搭建静态资源服务

静态资源目录与网站根目录

HTTP服务在哪个文件夹寻找静态资源，那个文件夹就是静态资源目录，也称之为网站根目录。

网页URL之绝对路径

绝对路径可靠性强，而且相对容易理解，在项目中运用较多

形式特点
http://atguigu.com/web直接向目标资源发送请求，容易理解。网站的外链会用到此形式
//atguigu.com/web与页面URL的协议拼接形成完整URL再发送请求。大型网站用的比较多
/web与页面URL的协议、主机名、端口拼接形成完整URL再发送请求。中小型网站

网页URL之相对路径

相对路径在发送请求时，需要与当前页面URL路径进行计算，得到完整URL后，再发送请求，学习截断用的较多
例如当前网页url为http://www.atguigu.com/course/h5.html

形式最终的URL
./css/app.csshttp://www.atguigu.com/course/css/app.css
js/app.jshttp://www.atguigu.com/course/js/app.js
…/img/logo.pnghttp://www.atguigu.com/img/logo.png
…/…/mp4/show.mp4http://www.atguigu.com/mp4/show.mp4

页面URL的使用场景

包括但不限于如下场景：

  • a标签href
  • link标签href
  • script标签src
  • img标签src
  • video audio 标签 src
  • form中的action
  • AJAX请求中的URL

设置mime类型

媒体类型（通常称为Multipurpose Internet Mail Extensions或MIME类型）是一种标准，用来表示文档、文字或字节流的性质和格式

mime类型结构：[type]/[subType]
例如: text/html text/css image/jpeg image/png application/json

HTTP服务可以设置响应头Content-Type来表明响应体的MIME类型，浏览器会根据该类型决定如何处理资源。
下面是文件对应的mime类型

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'

对于未知的资源类型可以选择application/octet-stream类型，浏览器在遇到该类型的响应时，会对响应体内容进行独立存储，也就是常见的下载效果

GET和POST应用场景与区别

GET请求的情况：

  • 在地址栏直接输入url访问
  • 点击a链接
  • link标签引入css
  • script标签引入js
  • video与audio引入多媒体
  • img标签引入图片
  • form标签中的method为get（不区分大小写）
  • ajax中的get请求

POST请求的情况：

  • form标签中的method为post（不区分大小写）
  • AJAX的post请求

GET和POST请求的区别
GET和POST是HTTP协议请求的两种方式，主要有如下几个区别

  1. 作用。GET主要用来获取数据，POST主要用来提交数据
  2. 参数位置。GET带参数请求是将参数缀到URL之后，POST带参数请求是将参数放到请求体中
  3. 安全性。POST请求相对GET安全一些，因为在浏览器中参数会暴露在地址栏
  4. GET请求大小有限制，一般为2K，而POST请求则没有大小限制

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【PaperReading】5. Open-Vocabulary SAM

【PaperReading】5. Open-Vocabulary SAM

Category Content 论文题目 Open-Vocabulary SAM: Segment and Recognize Twenty-thousand Classes Interactively 作者 Haobo Yuan1 Xiangtai Li1 Chong Zhou1 Yining Li2 Kai Chen2 Chen Change Loy1 1S-Lab, Nanyang Technological University 2Shanghai Artificial In…
阅读更多...
力扣日记1.11-【二叉树篇】450. 删除二叉搜索树中的节点

力扣日记1.11-【二叉树篇】450. 删除二叉搜索树中的节点

力扣日记&#xff1a;【二叉树篇】450. 删除二叉搜索树中的节点 日期&#xff1a;2024.1.11 参考&#xff1a;代码随想录、力扣 450. 删除二叉搜索树中的节点 题目描述 难度&#xff1a;中等 给定一个二叉搜索树的根节点 root 和一个值 key&#xff0c;删除二叉搜索树中的 key…
阅读更多...
燃情瞬间，智能酒精壁炉点亮户外聚会新潮流

燃情瞬间，智能酒精壁炉点亮户外聚会新潮流

在户外聚会中&#xff0c;一种备受瞩目的装饰品和功能性家居设备正逐渐崭露头角&#xff0c;那就是智能酒精壁炉。这种独特的户外装置不仅为聚会场合带来独特的氛围&#xff0c;还具有许多引人注目的优势。 其明亮的火焰不仅照亮整个场所&#xff0c;还散发出温暖迷人的光芒&am…
阅读更多...
创建型模式 | 工厂模式

创建型模式 | 工厂模式

文章目录 一、简单工厂1.1、原理1.2、核心角色1.3、UML类图1.4、代码实现1.5、总结 二、工厂模式2.1、原理2.2、关键角色2.3、代码实现2.4、总结 三、抽象工厂模式3.1、原理3.2、关键角色3.3、UML类图3.4、工厂模式与抽象工厂模式的区别 前言 工厂模式是最常用的设计模式之一&a…
阅读更多...
知识引导的分子生成扩散模型 - KGDiff 评测

知识引导的分子生成扩散模型 - KGDiff 评测

一、背景介绍 KGDiff模型是一个基于口袋的知识引导的3D分子生成的扩散模型&#xff0c;来源于上海交通大学计算机学院涂仕奎教授的文章&#xff1a; 《KGDiff: towards explainable target-aware molecule generation with knowledge guidance》。文章链接&#xff1a;*KGDiff…
阅读更多...
Qt QTableView和QStandardItemModel包含搜索出现的文本及隐藏顶层节点

Qt QTableView和QStandardItemModel包含搜索出现的文本及隐藏顶层节点

前言 使用Qt进行开发时&#xff0c;树结构一般是使用QTreeWidget或使用QTreeViewQStandardItemModel结合。 查找 如果要进行查找树的所有项中&#xff0c;是否包含某文本&#xff0c;就需要遍历。 QTreeWidget查找 以下是使用QTreeWidget进行查找&#xff1a; 首先初始化一…
阅读更多...
跟着仙凡兄学习编译Telegram vs2022 2024.1.11编译成功

跟着仙凡兄学习编译Telegram vs2022 2024.1.11编译成功

编译Telegram 本人花了两天&#xff0c;问官方作者终于编译成功Telegram 运行环境&#xff1a;win11 vs2022 参见学习视频&#xff1a;【telegram编译成功&#xff0c;编译遇到的各种问题】https://www.bilibili.com/video/BV11c411x7jm?vd_sourcedf2e51268cc7412cc3937cf3df2…
阅读更多...
如何构建Prompt，帮我生成QA，作为召回率检索的测试集？

如何构建Prompt，帮我生成QA，作为召回率检索的测试集？

最近在做搜索召回率的提升工作。粮草未动兵马先行&#xff01;在做之前应该先有一把尺子来衡量召回率的好坏。所以应该先构建测试数据集&#xff0c;然后去做标准化测试。 有了测试机集以后。再去做搜索优化&#xff0c;才能看出来效果。 当然可以选择一些开源的测试集。如果可…
阅读更多...
【OpenCV学习笔记04】- 绘图功能

【OpenCV学习笔记04】- 绘图功能

这是对于 OpenCV 官方文档的 GUI 功能的学习笔记。学习笔记中会记录官方给出的例子&#xff0c;也会给出自己根据官方的例子完成的更改代码&#xff0c;同样彩蛋的实现也会结合多个知识点一起实现一些小功能&#xff0c;来帮助我们对学会的知识点进行结合应用。 如果有喜欢我笔…
阅读更多...
C++内存管理机制（侯捷）笔记1

C++内存管理机制（侯捷）笔记1

C内存管理机制&#xff08;侯捷&#xff09; 本文是学习笔记&#xff0c;仅供个人学习使用。如有侵权&#xff0c;请联系删除。 参考链接 Youtube: 侯捷-C内存管理机制 Github课程视频、PPT和源代码: https://github.com/ZachL1/Bilibili-plus 第一讲primitives的笔记 截至…
阅读更多...
【提示学习论文六】MaPLe: Multi-modal Prompt Learning论文原理

【提示学习论文六】MaPLe: Multi-modal Prompt Learning论文原理

文章目录 MaPLe: Multi-modal Prompt Learning 多模式提示学习文章介绍动机MaPLe:Multi-modal Prompt Learning 模型结构1、Deep Language Prompting 深度语言提示2、Deep Vision Prompting 深度视觉提示3、Vision Language Prompt Coupling 视觉语言提示耦合提示耦合过程 实验…
阅读更多...
使用MistNet在COCO128数据集上协作训练Yolo-v5

使用MistNet在COCO128数据集上协作训练Yolo-v5

本案例介绍如何在MNIST手写数字分类场景中&#xff0c;使用名为MistNet的聚合算法训练联邦学习作业。数据分散在不同的地方&#xff08;如边缘节点、摄像头等&#xff09;&#xff0c;由于数据隐私和带宽的原因&#xff0c;无法在服务器上聚合。因此&#xff0c;我们不能将所有…
阅读更多...
linux手动安装 vscode-server

linux手动安装 vscode-server

适用场景 很多时候&#xff0c;我们需要在本机&#xff08;比如windows&#xff09;通过remote ssh访问远程服务器&#xff08;一般是ubuntu&#xff09;&#xff0c;但经常出现 vscode 一直连不上远程服务器的情况&#xff0c;看一下 log&#xff1a; 这个log表示远程服务器…
阅读更多...
长尾分布定义，举个物种长尾分布和词频长尾分布的例子。

长尾分布定义，举个物种长尾分布和词频长尾分布的例子。

问题描述&#xff1a;长尾分布定义&#xff0c;举个物种长尾分布和词频长尾分布的例子。 问题解答&#xff1a; 长尾分布是一种概率分布的类型&#xff0c;它描述的是一种极端事件或者稀有事件的发生概率。具体来说&#xff0c;长尾分布描述的是少量的类别占据了大部分的样本…
阅读更多...
uniapp 设置底部导航栏

uniapp 设置底部导航栏

uniapp 设置原生 tabBar 底部导航栏。 设置底部导航栏 一、创建页面&#xff0c;一定要在 pages.json 文件中注册。 二、在 pages.json 文件中&#xff0c;设置 tabBar 配置项。 pages.json 页面 {"pages": [...],"globalStyle": {...},"uniIdRout…
阅读更多...
获取ffmpeg转码的实时进度

获取ffmpeg转码的实时进度

文章目录 前言一、需求二、实现获取 ffmpeg 转码的实时进度1、思路梳理2、源码修改 三、运行结果 前言 本文记录查看 ffmpeg 进行转码时的实时进度。所用的工程基于上个博客编译成功的工程&#xff1a;使用FFmpeg4.3.1的SDK官方开发包编译ffmpeg.c 一、需求 使用 ffmepg 对音…
阅读更多...
二叉树题目：完全二叉树插入器

二叉树题目：完全二叉树插入器

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;完全二叉树插入器 出处&#xff1a;919. 完全二叉树插入器 难度 6 级 题目描述 要求 完全二叉树是每一层&#xff08;除最后一层外&#xff09;都…
阅读更多...
Word·VBA实现邮件合并

Word·VBA实现邮件合并

目录 制作邮件合并模板VBA实现邮件合并举例 之前写过的一篇使用《python实现word邮件合并》&#xff0c;本文为vba实现方法 制作邮件合并模板 域名可以使用中文&#xff0c;最终完成的word模板&#xff0c;wps操作步骤类似 VBA实现邮件合并 在Excel启用宏的工作表运行以下代…
阅读更多...
攒机到底能省多少钱？

攒机到底能省多少钱？

昨天弄好了攒机配置&#xff0c;今天要求配置一些更为实用的配置&#xff0c;只是作为一般办公&#xff0c;单位买进来的计算机都是联想&#xff0c;价格普遍在7000元以上&#xff0c;出于省钱和实用目的&#xff0c;今天搭配了一个组机方案。 上面的配置对付一般办公足够&…
阅读更多...
查看进程对应的路径查看端口号对应的进程ubuntu 安装ssh共享WiFi设置MyBatis 使用map类型作为参数，复杂查询（导出数据）

查看进程对应的路径查看端口号对应的进程ubuntu 安装ssh共享WiFi设置MyBatis 使用map类型作为参数，复杂查询（导出数据）

Linux 查询当前进程所在的路径 top 命令查询相应的进程号pid ps -ef |grep 进程名 lsof -I:端口号 netstat -anp|grep 端口号 cd /proc/进程id cwd 进程运行目录 exe 执行程序的绝对路径 cmdline 程序运行时输入的命令行命令 environ 记录了进程运行时的环境变量 fd 目录下是进…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站