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

前端核心技术Node.js（二）——path模块、HTTP与模块化

news 2025/8/1 15:57:43

path模块

path模块提供了操作路径的功能

API说明
path.resolve拼接规范的绝对路径
path.sep获取操作系统的路径分隔符
path.parse解析路径并返回对象
path.basename获取路径的基础名称
path.dirname获取路径的目录名
path.extname获取路径的扩展名

HTTP协议

定义：Hypertext Transfer Protocol（超文本传输协议）
在这里插入图片描述

  1. 结构
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

网络基础概念

  1. IP
    IP也称【IP地址】，本身是一个数字标识
    例如192.168.1.3
    IP本身是一个数字标识
    IP用来标志网络设备，实现设备间通信
  2. IP的分类
    • 局域网IP（私网IP）：192.168.0.0~192.168.255.255
      172.16.0.0~172.31.255.255
      10.0.0.0~10.255.255.255
    • 本地回环IP地址：127.0.0.1~127.255.255.254
    • 广域网IP（公网IP）：除上述之外
  3. 端口
    定义：应用程序的数字标识，一台计算机有65536个端口（0~65535）
    主要作用：实现不同主机应用程序之间的通信

HTTP模块

  1. 创建HTTP服务
// 1.导入HTTP模块
const http = require('http');
// 2.创建HTTP服务
const server = http.createServer((req, res) => {res.end('Hello World!');
});
// 3.监听端口,启动服务
server.listen(3000, () => {console.log('Server is running at http://localhost:3000');
});
  1. 注意事项
  2. 命令行Ctrl+C停止服务
  3. 当服务启动后，更新代码必须重启服务才能生效
  4. 响应内容中文乱码的解决方法
response.setHearder('content-type','text/html;charset=utf-8')
  1. 端口号被占用
Error：listen EADDRINUSE:address already in use:::9000

1.关闭当前正在运行监听端口的服务
2.修改其他端口号
  1. HTTP协议默认端口是80。HTTPS的默认端口是442，HTTP服务开发常用端口有3000,8080,8090,9000
    注：如果端口被其他程序占用，可以使用资源监视器找到占用端口的程序，然后使用任务管理器关闭对应的程序

获取请求报文

想要获取请求的数据，需要通过request对象
在这里插入图片描述
注意事项：
1.requst.url只能获取路径以及查询字符串，无法获取URL中的域名以及协议的内容
2.requst.headers将请求信息转化为一个对象，并将属性名都转化成了【小写】
3.关于路径：如果访问网站的时候，只填写了IP地址或者是域名信息，此时请求的路径为【/】
4.关于favicon.ico:这个请求是属于浏览器自动发送的请求

// 1.导入HTTP模块
const http = require('http');
// 2.创建HTTP服务
const server = http.createServer((req, res) => {// 获取请求方法// console.log(request.method)// 获取请求的url //只包含url中的路径与查询字符串// console.log(request.url)// 获取HTTP协议的版本号// console.log(request.httpVersion)// 获取HTTP请求头console.log(request.headers)res.end('HTTP Server');
});
// 3.监听端口,启动服务
server.listen(3000, () => {console.log('Server is running at http://localhost:3000');
});

const http = require('http');
const server = http.createServer((req, res) => {// 1.声明变量let body = '';// 2.监听data事件req.on('data', (chunk) => {body += chunk;})// 3.绑定end事件req.on('end', () => {console.log(body);// 响应res.end('HTTP Server');})res.end('HTTP Server');
})
server.listen(3000, () => {console.log('server is running at http://127.0.0.1:3000');
})

const http = require('http');
// 1. 引入url模块
const url = require('url');
const server = http.createServer((req, res) => {// 2. 解析请求地址// console.log(req.url)let res = url.parse(req.url)// console.log(res)// 路径let pathname = res.pathnameconsole.log(pathname)// 查询字符串let keyword = res.query.keywordconsole.log(keyword)res.end('url')
})server.listen(3000, () => {console.log('server is running at http://127.0.0.1:3000');
})

const http = require('http');const server = http.createServer((req, res) => {// 实例化url对象// let url = new URL('/search?a=100&b=200', 'http://127.0.0.1:3000')let url = new URL(req.url, 'http://127.0.0.1')console.log(url.pathname)res.end('url new')
})server.listen(3000, () => {console.log('server is running at http://127.0.0.1:3000');
})
HTTP请求练习

在这里插入图片描述

const http = require('http')const server = http.createServer((req, res) => {// 获取请求方法let { method } = req// 获取请求的url路径let { pathname } = new URL(req.url, 'http://127.0.0.1')// console.log(method, pathname)res.setHeader('Content-Type', 'text/html;charset=utf-8')// 判断if (method === 'GET' && pathname === '/login') {res.end('登录页面')} else if (method === 'GET' && pathname === '/register') {res.end('注册页面')} else {res.end('404 Not Found')}
})server.listen(3000, () => {console.log('server is running at http://127.0.0.1:3000')
})

设置HTTP的响应报文

在这里插入图片描述

const http = require('http')const server = http.createServer((req, res) => {// 1.设置响应状态码res.statusCode = 404// 2.响应状态描述res.statusMessage = 'peipeipei'// 3.响应头// res.setHeader('Content-Type', 'text/plain;charset=utf-8')// res.setHeader('Server', 'Node.js')res.setHeader('myHeader', 'test test')// 4.响应体res.write('gun')res.end()
})server.listen(3000, () => {console.log('server is running at http://127.0.0.1:3000')
})
HTTP响应练习

在这里插入图片描述

const http = require('http')
const fs = require('fs')
const server = http.createServer((req, res) => {let { pathname } = new URL(req.url, 'http://127.0.0.1')if (pathname === '/') {let html = fs.readFileSync(__dirname + '/test.html', 'utf-8')res.end(html)} else if (pathname === '/index.html') {let css = fs.readFileSync(__dirname + '/index.css', 'utf-8')res.end(css)} else if (pathname === '/index.js') {let js = fs.readFileSync(__dirname + '/index.js', 'utf-8')res.end(js)} else {res.statusCode = 404res.end('404 not found')}})
server.listen(3000, () => {console.log('服务器启动成功')
})

<!DOCTYPE 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">
</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 src="index.js"></script>
</body>
静态资源与动态资源

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

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

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

网页中的URL

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

绝对路径

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

形式特点
http://atguigu.com/web直接向目标资源发送请求，容易理解。网站的外链会用到此形式
//atguigu.com/web与页面URL的协议拼接形成完整URL再发送请求。大型网站用的比较多
/web与页面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类型，浏览器会根据该类八x如L生贝际
下面是常见文件对应的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请求的情况：

  • 在地址栏直接输入ul访问
  • 点击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带参数请求是将参数缀到UL之后，POST带参数请求是将参数放到请求体中
  3. 安全性。POST请求相对GET安全一些，因为在浏览器中参数会暴露在地址栏
  4. GET请求大小有限制，一般为2K,而POST请求则没有大小限制

模块化

介绍

  1. 什么是模块化与模块？
    将一个复杂的程序文件依据一定规则（规范）拆分成多个文件的过程称之为模块化
    其中拆分出的每个文件就是一个模块，模块的内部数据是私有的，不过模块可以暴露内部数据以便其他模块使用
  2. 什么是模块化项目？
    编码时是按照模块一个一个编码的，整个项目就是一个模块化的项目
  3. 模块化好处
    下面是模块化的一些好处：
  4. 防止命名冲突
  5. 高复用性
  6. 高维护性

暴露数据

模块暴露数据的方式有两种：

  1. module.exports value
  2. exports.name value
    使用时有几点注意：
    -module.Exports可以暴露任意数据
    -不能使用exports=value的形式暴露数据，模块内部module与exports的隐式关系exports= module.exports ={}

导入（引入）模块

在模块中使用require传入文件路径即可引入文件

const test require('./me.js');

require使用的一些注意事项：

  1. 对于自己创建的模块，导入时路径建议写相对路径，且不能省略./和../
  2. js和json文件导入时可以不用写后缀，cc+编写的node扩展文件也可以不写后缀，但是一般用不到
  3. 如果导入其他类型的文件，会以js文件进行处理
  4. 如果导入的路径是个文件夹，则会首先检测该文件夹下package.json文件中main属性对应的文件，
    如果main属性不存在，或者package…json不存在，则会检测文件夹下的index.js和index.json,
    如果还是没找到，就会报错
  5. 导入node.js内置模块时，直接require模块的名字即可，无需加./和../
  6. require还有一种使用场景，会在包管理工具章节介绍
  7. module.exports、exports以及require这些都是CommonJS模块化规范中的内容
    而Node.js实现了CommonJS模块化规范

导入模块的基本流程

这里我们个绍一下require导入自定义模块的基本流程

  1. 将相对路径转为绝对路径，定位目标文件
  2. 缓存检测
  3. 读取目标文件代码
  4. 包裹为一个函数并执行（自执行函数）。通过arguments.callee.toString（）查看自执行函数
  5. 缓存模块的值
  6. 返回module.exports的值

CommonJS规范

module.exports、exports以及require这些都是CommonJS模块化规范中的内容。
而Node.js是实现了CommonJS模块化规范，二者关系有点像JavaScript与ECMAScript

http://www.lryc.cn/news/606496.html

相关文章：

  • 2025年物联网新趋势：格行随身WiFi的模块化架构与低延迟优化
  • 代码随想录算法训练营第三十七天
  • 从C语言到C++：拥抱面向对象编程的全新世界
  • LCGL使用简介
  • 【qiankun】基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
  • 详解Vite 配置中的代理功能
  • 基于岗位需求的康养休闲旅游服务实训室建设方案
  • 【赵渝强老师】OceanBase租户的资源管理
  • Opus音频编码器全解析：从技术原理到实战应用
  • 在 CentOS 7 安装中文字体
  • yolo目标检测基础知识
  • 【算法基础课-算法模板2】数据结构
  • 【Node】nvm在windows系统无管理员权限切换node版本
  • Vue3+Vite项目如何简单使用tsx
  • 【基于落霞归雁思维框架的软件项目管理实践指南】
  • 【硬件-笔试面试题】硬件/电子工程师，笔试面试题-53，（知识点：硬件电路问题排查，CPU上电后未运转，供电、时钟，复位，硬件连接）
  • 【Linux系列】SSD 与 HDD
  • Git之本地仓库管理
  • 尾插法和倒序输出
  • 【Keras学习笔记】开发环境搭建
  • pig Cloud中分布式锁的使用（setIfAbsent）
  • QT聊天项目DAY17
  • LeetCode 85：最大矩形
  • Shader开发（五）什么是渲染管线
  • Flutter兼容的iOS的最低版本号
  • 链特异性文库是什么？为什么它在转录组测序中越来越重要？
  • 【普中STM32精灵开发攻略】--第 2 章 开发板功能及使用介绍
  • 浅谈“压敏电阻”
  • 基于单片机智能油烟机设计/厨房排烟系统设计
  • 开发避坑短篇（12）：达梦数据库TIMESTAMP字段日期区间查询实现方案