一、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. 注意事项:
- 命令行
ctrl + c
停止服务 - 当服务启动后,更新代码 必须重启服务才能生效
- 响应内容中文乱码的解决办法
response.setHeader('content-type','text/html;charset=utf-8');
- 端口号被占用
Error: listen EADDRINUSE: address already in use :::9000
- 关闭当前正在运行监听端口的服务 ( 使用较多 )
- 修改其他端口号
HTTP
协议默认端口是80
。HTTPS
协议的默认端口是443
,HTTP
服务开发常用端口有3000, 8080,8090,9000
等
如果端口被其他程序占用,可以使用 资源监视器 找到占用端口的程序,然后使用 任务管理器 关闭
对应的程序
4. 浏览器查看HTTP
报文
1. 查看步骤
2. 查看请求报文
-
查看请求行和请求头
-
查看请求体
3. 查看响应报文
-
查看响应行和响应体
-
查看响应体
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(){}) |
- 注意事项
request.url
只能获取路径以及查询字符串,无法获取URL
中的域名以及协议的内容request.headers
将请求信息转化成一个对象,并将属性名都转化成了【小写】(kebab-case)
- 关于路径:如果访问网站的时候,只填写了
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
的两种使用情况:
write
和end
的结合使用响应体相对分散:
response.write('xx');
response.write('xx');
response.write('xx');
response.end();//每一个请求,在处理的时候必须要执行`end`方法的
- 单独使用
end
方法响应体相对集中
response.end('xxx');
- 示例:
7. 网页资源的基本加载过程
网页资源的加载都是循序渐进的,首先获取HTML的内容,然后解析HTML在发送其他资源的请求,如CSS
,Javascript
,图片等
8. 静态资源服务
静态资源是指 内容长时间不发生改变的资源 ,例如图片,视频,
CSS
文件,JS
文件,HTML
文件,字体文件等
动态资源是指 内容经常更新的资源 ,例如百度首页,网易首页,京东搜索列表页面等
示例:响应静态资源练习
1. 网站根目录或静态资源目录
HTTP 服务在哪个文件夹中寻找静态资源,那个文件夹就是 静态资源目录 ,也称之为 网站根目录
示例:响应静态资源练习封装
2. 网页中的URL
- 网页中的
URL
主要分为两大类:相对路径与绝对路径
- 绝对路径
绝对路径可靠性强,而且相对容易理解,在项目中运用较多
形式 | 特点 |
---|---|
https://baidu.com | 直接向目标资源发送请求,容易理解。网站的外链会用到此形式 |
jd.com | 与页面URL的协议拼接形成完整URL再发送请求。大型网站用的比较多 |
/search | 与网站的URL的协议、主机名、端口拼接形成完整的URL再发送请求。中小型网站 |
- 相对路径
相对路径在发送请求时,需要与当前页面
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 |
- 网页中使用
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
请求场景小结
GET
请求的情况:- 在地址栏直接输入
url
访问 - 点击
a
链接 link
标签引入css
script
标签引入js
img
标签引入图片form
标签中的method
为get
(不区分大小写)ajax
中的get
请求
- 在地址栏直接输入
POST
请求的情况:form
标签中的method
为post
(不区分大小写)AJAX
的post
请求
2.GET
和 POST
请求区别
GET
主要用来获取数据,POST
主要用来提交数据GET
带参数请求是将参数缀到URL
之后,在地址栏中输入url
访问网站就是GET
请求,POST
带参数请求是将参数放到请求体中POST
请求相对GET
安全一些,因为在浏览器中参数会暴露在地址栏GET
请求大小有限制,一般为2K
,而POST
请求则没有大小限制