nodejs学习计划--（四）http模块

一、http模块

使用nodejs创建HTTP服务

1. 操作步骤

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

// 2. 创建服务对象 create 创建 server 服务
// request 意为请求，是对请求报文的封装对象，通过 request 对象可以获得请求报文的数据
// response 意为响应，是对响应报文的封装对象，通过 response 对象可以设置响应报文
const serve = http.createServer((request, response)=>{
  response.end('WelCome')
})
// 3. 监听端口，启动服务
serve.listen(9000, ()=>{
  console.log('服务已经启动')
})

http.createServer 里的回调函数的执行时机： 当接收到 HTTP 请求的时候，就会执行

2. 测试

浏览器请求对应端口

http://127.0.0.1:9000 / http://localhost:9000/

3. 注意事项：

1. 命令行 ctrl + c 停止服务
2. 当服务启动后，更新代码 必须重启服务才能生效
3. 响应内容中文乱码的解决办法

response.setHeader('content-type','text/html;charset=utf-8');

4. 端口号被占用

Error: listen EADDRINUSE: address already in use :::9000

• 关闭当前正在运行监听端口的服务 （ 使用较多 ）
• 修改其他端口号

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

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

4. 浏览器查看HTTP报文

1. 查看步骤

2. 查看请求报文

1. 查看请求行和请求头
   

2. 查看请求体
   

3. 查看响应报文

1. 查看响应行和响应体
   

2. 查看响应体
   

5. 获取HTTP报文

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

含义	语法	重点掌握
请求方法	request.method	*
请求版本	request.httpVersion
请求路径	request.url	*
URL路径	require('url').parse(request.url).pathname	*(旧)
	new URL(request.url, 'http://xxx').pathname	*
URL查询字符串	require('url').parse(request.url, true).query	*(旧)
	new URL(request.url, 'http://xxx').searchParams	*
请求头	request.headers	*
请求体	request.on('data', function(thunk){})
	request.on('end', function(){})

• 注意事项

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

• 示例代码：
  按照以下要求搭建HTTP服务

请求类型（方法）	请求地址	响应体结果
get	/login	登录页面
get	/reg	注册页面

6. 设置HTTP响应报文

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

• write和end的两种使用情况：

1. write和end的结合使用响应体相对分散:

response.write('xx');
response.write('xx');
response.write('xx');
response.end();//每一个请求，在处理的时候必须要执行`end`方法的

2. 单独使用end方法响应体相对集中
   response.end('xxx');

• 示例：

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

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

7. 网页资源的基本加载过程

网页资源的加载都是循序渐进的，首先获取HTML的内容，然后解析HTML在发送其他资源的请求，如CSS，Javascript，图片等

8. 静态资源服务

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

1. 网站根目录或静态资源目录

HTTP 服务在哪个文件夹中寻找静态资源，那个文件夹就是 静态资源目录 ，也称之为 网站根目录
示例：响应静态资源练习封装

2. 网页中的URL

• 网页中的 URL 主要分为两大类：相对路径与绝对路径

1. 绝对路径

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

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

2. 相对路径

相对路径在发送请求时，需要与当前页面 URL 路径进行 计算 ，得到完整 URL 后，再发送请求

• 例如当前网页 url 为 http://127.0.0.1/home/index.html

形式	最终的url
./css/index/css	http://127.0.0.1/home/css/index.css
js/index/js	http://127.0.0.1/home/js/index.js
../img/logo.jpg	http://127.0.0.1/img/logo.jpg
../../img/logo.jpg	http://127.0.0.1/img/logo.jpg

3. 网页中使用 URL 的场景小结

• 包括但不限于如下场景：
  • a 标签 href
  • link 标签 href
  • script 标签 src
  • img 标签 src
  • video audio 标签 src
  • form 中的 action
  • AJAX 请求中的 URL

3. 设置资源类型（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 类型，浏览器在遇到该类型的响应时，会对响应体内容进行独立存储，也就是我们常见的 下载 效果
示例：设置mime类型示例

4. 常见err错误code

code码	示意
ENOENT	没有这样的文件或目录:通常由 fs 操作引发以指示指定路径名的组件不存在。给定路径找不到任何实体（文件或目录）
EPERM	不允许操作: 试图执行需要提升权限的操作
ETIMEDOUT	操作超时: 连接或发送请求失败，因为连接方在一段时间后没有正确响应。通常发生在 http 或 net。通常表明 socket.end() 没有被正确地调用。
更多见官网

9. GET和POST请求的区别

GET 和 POST 是 HTTP 协议请求的两种方式

1. GET 和 POST 请求场景小结

1. GET 请求的情况：
   • 在地址栏直接输入 url 访问
   • 点击 a 链接
   • link 标签引入 css
   • script 标签引入 js
   • img 标签引入图片
   • form 标签中的 method 为 get （不区分大小写）
   • ajax 中的 get 请求
2. POST 请求的情况：
   • form 标签中的 method 为 post（不区分大小写）
   • AJAX 的 post 请求

2.GET 和 POST 请求区别

• GET 主要用来获取数据，POST 主要用来提交数据
• GET 带参数请求是将参数缀到 URL 之后，在地址栏中输入 url 访问网站就是 GET 请求，POST 带参数请求是将参数放到请求体中
• POST 请求相对 GET 安全一些，因为在浏览器中参数会暴露在地址栏
• GET 请求大小有限制，一般为 2K，而 POST 请求则没有大小限制