Node.js入门指南（二）

目录

http模块

创建http服务端

浏览器查看 HTTP 报文

获取 HTTP 请求报文

设置响应报文

网页资源的基本加载过程

静态资源服务

hello,大家好！上一篇文章我们对Node.js进行了初步的了解，并介绍了Node.js的Buffer、fs模块以及path模块。这一篇文章主要介绍Node.js的http模块。

http模块

创建http服务端

首先需要导入http模块，接着创建服务对象，调用http中的createsServer方法，该方法会传入两个形参，request以及response。request会接受请求报文的封装对象，能够通过该对象获取到请求头，请求行以及请求体。response会传入对响应报文的封装对象，它能够设置响应头，响应行以及响应体。当我们在浏览器发送http请求时，该回调函数就会执行。

// 导入http模块
const http=require('http');
// 创建服务对象
const server=http.createServer((request,response)=>{//设置响应体response.end('Hello http server');
});
// 监听端口
server.listen(9000,()=>{console.log("服务已经启动.....")
})

server.listen用于设置监听的端口号，当我们成功运行js文件时，我们就可以通过本地的9000端口访问到我们设置的响应体了。以下有一些注意事项：

1️⃣命令行 ctrl + c 停止服务。

2️⃣当服务启动后，更新代码必须重启服务才能生效。

3️⃣响应内容中文乱码的解决办法 response.setHeader('content-type','text/html;charset=utf-8');

4️⃣当端口号被占用时，可以关闭当前正在运行监听端口的服务，或者修改其他端口号。

5️⃣HTTP 协议默认端口是 80 。HTTPS 协议的默认端口是 443, HTTP 服务开发常用端口有 3000，8080，8090，9000 等。

6️⃣如果端口被其他程序占用，可以使用 资源监视器 找到占用端口的程序，然后使用任务管理器 关闭对应的程序。

浏览器查看 HTTP 报文

学会使用浏览器来查看我们的http报文是非常重要的，对于后续我们的调试会起到很大的作用。当我们向服务端发送get请求时，我们如何查询对应的请求头请求行以及请求体呢？我们还是以上面的代码为例向9000端口发送请求。

点击Network,然后发送请求之后会有显示，点击127.0.0.1，然后在点击Headers部分，点击Response Heasers，然后再点击Raw就可以清晰地看到相应的响应头和响应行。

然后点击Response，可以看到相应的响应体信息。

由于我们再向该端口号发送一个post请求，并携带对应的参数，来查看相应的请求头，请求行和请求体。对应大代码如下：

<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>

同样步骤，我们点击Request Headers进行查看请求行和请求头。由于我们携带了相应的数据，因此会多出一个Payload的部分，我们点击它就是我们的请求体。

Payload的部分除了可以查看我们请求体的内容，还可以查看我们url中查询字符串的内容，这里就不做演示，感兴趣的小伙伴可以自行实践。

获取 HTTP 请求报文

我们可以通过使用  request 对象来获取请求方法，请求的url，获取协议的版本号以及获取http的请求头等信息。注意：获取请求的url，不会包括协议，域名端口号等信息，只会包含url中的路径以及查询的字符串。 
// 导入http模块
const http=require('http');
// 创建服务对象
const server=http.createServer((request,response)=>{//获取请求方法console.log(request.method);//获取请求的url,只会包括url中的路径与查询字符串console.log(request.url);//获取协议的版本号console.log(request.httpVersion);//获取http的请求头console.log(request.headers);//设置响应体response.end('Hello http server');
});
// 监听端口
server.listen(9000,()=>{console.log("服务已经启动.....")
})

我们还可以获取请求体中的内容，我们通过给request对象绑定data事件以及end事件来实现请求体的获取，当我们发送get请求时，它的请求体会是空的。因此我们使用上面的表单发起post请求，只有我们会在控制台看到输出相应的请求体信息。username=N-A&password=123456。该方式了解即可后续还会提供更加简便的方式。

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

对于我们得到的请求路径以及请求的查询字符串是非常重要的，我们可以通过获取相应的请求路径以及查询的字符串向浏览器返回不同的内容。因此我们可以导入url模块来进行获取。这时候可能会有小伙伴有疑问，刚才我们不是可以直接通过request.url来得到请求的路径以及查询的字符串吗？

确实是可以，但是它返回出来的形式并不利于我们更直观更方便地进行获取。因此我们采用导入url模块来获取请求的路径以及查询的参数。

// 导入http模块
const http=require('http');
//导入url模块
const url=require('url');
// 创建服务对象
const server=http.createServer((request,response)=>{//解析request.urllet res=url.parse(request.url);let pathname=res.pathname;//查询路径console.log(pathname);// /serach//设置响应体response.end('Hello http server');
});
// 监听端口
server.listen(9000,()=>{console.log("服务已经启动.....")
})

当服务启动之后假设我向9000端口发送：http://127.0.0.1:9000/serach?name=N-A的请求,控制台打印出的res为

Url {protocol: null,slashes: null,auth: null,host: null,port: null,hostname: null,hash: null,search: '?name=N-A',query: 'name=N-A',pathname: '/serach',path: '/serach?name=N-A',href: '/serach?name=N-A'
}

此时我们可以直接获取res的hostname属性来得到对应的路径：/search。那如何得到查询的参数呢？我们可以看到我们的参数存在query的属性里面，如果直接获取得出来的结果也不是我们想要的，因此这时候就需要用到parse方法的第二个参数了，将其设置为true，查询字符串将会以对象的形式进行展示如下。第一个数组不需要管。

Url {query: [Object: null prototype] { name: 'N-A' },
}

因此我们通过对应以及键名来进行查询。

// 导入http模块
const http=require('http');
//导入url模块
const url=require('url');
// 创建服务对象
const server=http.createServer((request,response)=>{//解析request.urllet res=url.parse(request.url,true);//查询字符串let keyword=res.query.name;console.log(keyword);//N-A//设置响应体response.end('Hello http server');
});
// 监听端口
server.listen(9000,()=>{console.log("服务已经启动.....")
})

除了上面介绍的那一种方法，我们还可以采用实例化的方式去创建一个对象，再通过对象里面的属性来获取url里面的相关内容了。这种方式较为简便。

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

设置响应报文

我们可以通过相应的方法来设置响应报文的信息，包括：响应状态码（response.statusCode）、响应状态描述（response.statusMessage） 、响应头信息（response.setHeader）以及响应体（response.write以及 response.end）。

设置响应头可以使用数组来实现设置多个同名的响应头。response.write和 response.end都可以用来设置响应体，区别在与前者可以多次设置，而后者只能设置一次。当使用response.write来设置响应体是，一般就不再使用response.end进行设置响应体，直接为空即可。在回调函数中必须要response.end。

// 导入http模块
const http=require('http');
// 创建服务对象
const server=http.createServer((request,response)=>{//设置响应状态码response.statusCode=203;//设置响应状态的描述response.statusMessage='N-A';//设置响应头response.setHeader('content-type','text/html;charset=utf-8');//设置多个同名的响应头response.setHeader('text',['a','b','c']);//设置响应体，write可以重复设置response.write('N-A');response.write('N-A');response.write('N-A');//设置响应体，end只能设置一次response.end();
});
// 监听端口
server.listen(9000,()=>{console.log("服务已经启动.....")
})

网页资源的基本加载过程

假设我们在浏览器搜索CSDN，然后向会向CSDN的服务端发送请求，但是这时候需要注意的是，浏览器并不是只发送一次请求。网页资源的加载都是循序渐进的，首先获取 HTML 的内容， 然后解析 HTML 在发送其他资源的请求，如 CSS，Javascript，图片等。 

静态资源服务

静态资源是指 内容长时间不发生改变的资源 ，例如图片，视频，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');if(pathname==='/index.html'){//读取文件内容let html=fs.readFileSync(__dirname+'/page/index.html');response.end(html);}else if(pathname==='/css/app.css'){//读取文件内容let css=fs.readFileSync(__dirname+'/page/css/app.css');response.end(css);}else if(pathname==='/images/logo.png'){//读取文件内容let img=fs.readFileSync(__dirname+'/page/images/logo.png');response.end(img);}else{response.statusCode=404;response.end('<h1>404 Not Found</h1>')}
});
// 监听端口
server.listen(9000,()=>{console.log("服务已经启动.....")
})

当访问相应的文件路径时，我们就可以再浏览器看到对应文件中的内容。但是这种方式并不简便，当有很多的不同的文件时需要编写很长的代码。因此可以提取公共的路径部分进行修改如下：

// 导入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');//拼接文件路径let filePath=__dirname+'/page'+pathname;//读取文件fs.readFile(filePath,(err,data)=>{if(err){response.statusCode=500;response.end('文件读取失败');return;}//响应内容response.end(data);})
});
// 监听端口
server.listen(9000,()=>{console.log("服务已经启动.....")
})
HTTP 服务在哪个文件夹中寻找静态资源，那个文件夹就是静态资源目录 ，也称之为网站根目录。以上面的静态资源服务为例，path就是网站的根目录。它还可以单独地和__firname赋值给一个变量，该变量再去与pathname进行拼接，结果是一样的，只是后续如果想要修改根目录的话更为方便。 
   //声明一个变量let root=__dirname+'/page'//拼接文件路径let filePath=root+pathname;

再补充一些关于网页中URL的内容，网页中的 URL 主要分为两大类：相对路径与绝对路径。绝对路径可靠性强，而且相对容易理解，在项目中运用较多。相对路径在发送请求时，需要与当前页面 URL 路径进行 计算 ，得到完整 URL 后，再发送请求，学习阶段用的较多。

绝对路径的形式：

形式特点
http://atguigu.com/w
eb
直接向目标资源发送请求，容易理解。网站的外链会用到此形式
//atguigu.com/web
与页面 URL 的协议拼接形成完整 URL 再发送请求。大型网站用的比较多
/web
与页面 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
在前面我们已经有涉及到，设置响应头的信息时，其中有一部分是 text/html，表示请求的资源文件为html类型的文件，除了html类型，还有很多的其他类型也有相应的格式。浏览器会帮助我们识别对应的文件类型，但是如果我们设置文件的相应信息会更加地规范。这一个步骤叫做 mime 类型的设置。 HTTP 服务可以设置响应头 Content-Type 来表明响应体的 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'

对上面我们编写的静态资源服务设置mime类型，如下：

// 导入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) => {//获取请求url对象let { pathname } = new URL(request.url, 'http://127.0.0.1');//声明一个变量let root = __dirname + '/page'//拼接文件路径let filePath = root + pathname;//读取文件fs.readFile(filePath, (err, data) => {if (err) {response.statusCode = 500;response.end('文件读取失败');return;}//获取文件后缀名let ext = path.extname(filePath).slice(1);//获取对应的类型let type = mimes[ext];if (type) {response.setHeader('content-type', type);} else {response.setHeader('content-type', 'application/octet-stream')}//响应内容response.end(data);})
});
// 监听端口
server.listen(9000, () => {console.log("服务已经启动.....")
})

css文件以及js中的文件若存在中文，使用浏览器打开会出现乱码的情况，因此可以设charset=utf-8。修改如下：

   if (type) {response.setHeader('content-type', type+';chaeset=utf-8');} else {response.setHeader('content-type', 'application/octet-stream')}
对于未知的资源类型，可以选择 application/octet-stream 类型，浏览器在遇到该类型的响应时，会对响应体内容进行独立存储，也就是我们常见的下载效果。
我们还需要对响应错误进行一定的处理，我们前面都只是给你指定为500的错误，我们可以根据不同的状态 err.code来设置相应的错误编码以及错误信息，详细完整的错误可看官网。我们对以上的代码进行修改： 
// 导入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>');}//获取请求url对象let { pathname } = new URL(request.url, 'http://127.0.0.1');//声明一个变量let root = __dirname + '/page'//拼接文件路径let filePath = root + pathname;//读取文件fs.readFile(filePath, (err, data) => {if (err) {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) {response.setHeader('content-type', type+';chaeset=utf-8');} else {response.setHeader('content-type', 'application/octet-stream')}//响应内容response.end(data);})
});
// 监听端口
server.listen(9000, () => {console.log("服务已经启动.....")
})

最后我们来介绍一下get请求以及post请求的应用场景以及区别：

GET 请求的情况POST 请求的情况：
在地址栏直接输入 url 访问
form 标签中的 method 为 post （不区分大小写）
点击 a 链接AJAX 的 post 请求
link 标签引入 css
script 标签引入 js
img 标签引入图片
form 标签中的 method 为 get （不区分大小写）
ajax 中的 get 请求
它们之间的区别主要有以下几点：
1️⃣GET 主要用来获取数据， POST 主要用来提交数据。但是也可以反过来，这并不是绝对的。
2️⃣GET 带参数请求是将参数缀到 URL 之后，在地址栏中输入 url 访问网站就是 GET 请求，POST 带参数请求是将参数放到请求体中。
3️⃣POST 请求相对 GET 安全一些，因为在浏览器中参数会暴露在地址栏。
4️⃣GET 请求大小有限制，一般为 2K ，而 POST 请求则没有大小限制。

好啦！本文就先到这里了！感谢阅读。后续持续更新，拜拜！！ 

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

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

相关文章

【Git】一文教你学会 submodule 的增、查、改、删

【Git】一文教你学会 submodule 的增、查、改、删

添加子模块 $ git submodule add <url> <path>url 为想要添加的子模块路径path 为子模块存放的本地路径 示例&#xff0c;添加 r-tinymaix 为子模块到主仓库 ./sdk/packages/online-packages/r-tinymaix 路径下&#xff0c;命令如下所示&#xff1a; $ git subm…
阅读更多...
【深度学习】基于深度学习的超分辨率图像技术一览

【深度学习】基于深度学习的超分辨率图像技术一览

超分辨率(Super-Resolution)即通过硬件或软件的方法提高原有图像的分辨率&#xff0c;图像超分辨率是计算机视觉和图像处理领域一个非常重要的研究问题&#xff0c;在医疗图像分析、生物特征识别、视频监控与安全等实际场景中有着广泛的应用。 SR取得了显著进步。一般可以将现有…
阅读更多...
互联网上门洗鞋店小程序

互联网上门洗鞋店小程序

上门洗鞋店小程序门店版是基于原平台版进行增强的&#xff0c;结合洗鞋行业的线下实际运营经验和需求&#xff0c;专为洗鞋人和洗鞋店打造的高效、实用、有价值的管理软件系统。 它能够帮助洗鞋人建立自己的私域流量&#xff0c;实现会员用户管理&#xff0c;实现用户与商家的点…
阅读更多...
AC自动机（简单模板）

AC自动机（简单模板）

AC自动机&#xff0c;就相当于是在字典树上用kmp。next数组回退的位置为最大匹配字符串在字典树上的节点位置。 在获取字典树上的next数组的时候用的是BFS每次相当与处理的一层。 下图中红线为&#xff0c;可以回退的位置&#xff0c;没有红线的节点回退的位置都是虚拟原点。…
阅读更多...
pgz easyexcel如何给excel文件添加自定义属性

pgz easyexcel如何给excel文件添加自定义属性

免费API方式 直接上传URL，自定义修改Excel 视频演示【内含接口地址】 https://www.ixigua.com/7304510132812153385 前情提示 | 功能说明 多选仅支持微软office、office365系列Excel。因为WPS宏功能需要企业版且付费生成xlsx、xlsm等文件，office和WPS均可以打开，均可以单…
阅读更多...
设计模式——行为型模式（一）

设计模式——行为型模式（一）

行为型模式用于描述程序在运行时复杂的流程控制，即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务，它涉及算法与对象间职责的分配。 行为型模式分为类行为模式和对象行为模式，前者采用继承机制来在类间分派行为，后者采用组合或聚合在对象间分配行…
阅读更多...
Adobe的组织工具程序Bridge 2024 版本下载与安装

Adobe的组织工具程序Bridge 2024 版本下载与安装

目录 前言一、Bridge 2024安装二、使用配置总结 前言 Adobe Bridge是由 Adobe 公司开发的一款用于管理和组织创意资产的工具。它是Adobe Creative Cloud 套件的一部分&#xff0c;为设计师、摄影师和其他创意专业人员提供了一个集中管理和浏览其多媒体文件的平台。注&#xff…
阅读更多...
Unity UGUI图片锯齿严重怎么解决

Unity UGUI图片锯齿严重怎么解决

在开发的时候&#xff0c;发现图片锯齿严重&#xff0c;打包到移动端或者在编辑器都这样&#xff0c;如下图 原因&#xff1a; 查了一些资料&#xff0c;找到了原因如下&#xff1a;关于为什么会发生这种情况&#xff1a;看起来你的源资源比你在屏幕上显示的大小大得多。所以当…
阅读更多...
基于Vue+SpringBoot的个人健康管理系统

基于Vue+SpringBoot的个人健康管理系统

项目编号&#xff1a; S 040 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S040&#xff0c;文末获取源码。} 项目编号&#xff1a;S040&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 健康档案模块2.2 体检档案模块2.3 健…
阅读更多...
软件设计不是CRUD（6）：低耦合模块设计实战——组织机构模块（上）

软件设计不是CRUD（6）：低耦合模块设计实战——组织机构模块（上）

组织机构功能是应用系统中常见的业务功能之一&#xff0c;但是不同性质、不同行业背景、不同使用场景的应用系统对组织机构功能的要求可能完全不一样。所以使用这样的功能对低耦合模块设计进行示例性的讲解是比较具有代表性的。在后续的几篇文章中&#xff0c;我们会首先进行示…
阅读更多...
系列四、编程式事务

系列四、编程式事务

一、概述 编程式事务是指程序员手动的在业务代码中控制事务执行的流程&#xff0c;业务方法正常执行提交事务&#xff0c;业务方法执行过程中出现异常则回滚事务。 二、编程式事务环境搭建 2.1、项目概览 2.2、pom.xml <dependencies><!--spring基本依赖--><d…
阅读更多...
csrf漏洞修复

csrf漏洞修复

漏洞说明&#xff1a;通过篡改请求头中的Referer值依旧能够访问到接口。 通过http请求头里面的Referer随意访问接口 通过下面两个代码类程序来实现你的程序不会被攻击&#xff0c;里面有两个实体&#xff0c;如果你感觉这个程序对你有用&#xff0c;联系我&#xff0c;我私发…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023