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

path模块

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

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

HTTP协议

定义：Hypertext Transfer Protocol（超文本传输协议）

结构

网络基础概念

IP
IP也称【IP地址】，本身是一个数字标识
例如192.168.1.3
IP本身是一个数字标识
IP用来标志网络设备，实现设备间通信
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）：除上述之外
端口
定义：应用程序的数字标识，一台计算机有65536个端口（0~65535）
主要作用：实现不同主机应用程序之间的通信

HTTP模块

创建HTTP服务

javascript 复制代码

// 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');
});

注意事项
命令行Ctrl+C停止服务
当服务启动后，更新代码必须重启服务才能生效
响应内容中文乱码的解决方法

javascript 复制代码

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

端口号被占用

javascript 复制代码

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

复制代码

1.关闭当前正在运行监听端口的服务
2.修改其他端口号

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

获取请求报文

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

注意事项：

1.requst.url只能获取路径以及查询字符串，无法获取URL中的域名以及协议的内容

2.requst.headers将请求信息转化为一个对象，并将属性名都转化成了【小写】

3.关于路径：如果访问网站的时候，只填写了IP地址或者是域名信息，此时请求的路径为【/】

4.关于favicon.ico:这个请求是属于浏览器自动发送的请求

javascript 复制代码

// 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');
});

javascript 复制代码

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');
})

javascript 复制代码

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.pathname
  console.log(pathname)
  // 查询字符串
  let keyword = res.query.keyword
  console.log(keyword)

  res.end('url')
})

server.listen(3000, () => {
  console.log('server is running at http://127.0.0.1:3000');
})

javascript 复制代码

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请求练习

javascript 复制代码

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的响应报文

javascript 复制代码

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响应练习

javascript 复制代码

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 = 404
    res.end('404 not found')
  }

})
server.listen(3000, () => {
  console.log('服务器启动成功')
})

html 复制代码

<!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.css	http://www.atguigu.com/course/css/app.css
js/app.js	http://www.atguigu.com/course/js/app.js
.../img/logo.png	http://www.atguigu.com/img/logo.png
.../.../mp4/show.mp4	http://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协议请求的两种方式，主要有如下几个区别

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

模块化

介绍

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

暴露数据

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

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

导入（引入）模块

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

javascript 复制代码

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

require使用的一些注意事项：

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

导入模块的基本流程

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

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

CommonJS规范

module.exports、exports以及require这些都是CommonJS模块化规范中的内容。

而Node.js是实现了CommonJS模块化规范，二者关系有点像JavaScript与ECMAScript

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

path模块

HTTP协议

网络基础概念

HTTP模块

获取请求报文

HTTP请求练习

设置HTTP的响应报文

HTTP响应练习

静态资源与动态资源

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

网页中的URL

绝对路径

相对路径

网页中使用URL的场景小结

设置资源类型(mime类型)

GET和POST请求

场景小结

GET和POST请求的区别

模块化

介绍

暴露数据

导入（引入）模块

导入模块的基本流程

CommonJS规范