【Node.js】(二）__path模块、HTTP协议

六. _path模块

path 模块提供了 操作路径 的功能，提供了几个常用的API

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

const path = require('path');
//获取路径分隔符
console.log(path.sep);
//拼接绝对路径
console.log(path.resolve(__dirname, 'test'));
//解析路径
let pathname = 'D:/program file/nodejs/node.exe';
console.log(path.parse(pathname));
//获取路径基础名称
console.log(path.basename(pathname))
//获取路径的目录名
console.log(path.dirname(pathname));
//获取路径的扩展名
console.log(path.extname(pathname));

七. HTTP协议

1. 概念

HTTP（hypertext transport protocol）协议；中文叫**超文本传输协议 **
是一种基于TCP/IP的应用层通信协议
这个协议详细规定了 浏览器 和万维网 服务器 之间互相通信的规则。
协议中主要规定了两个方面的内容

• 客户端：用来向服务器发送数据，可以被称之为**请求报文 **
• 服务端：向客户端返回数据，可以被称之为响应报文

报文：可以简单理解为就是一堆字符串

2. 请求报文

(1). 请求报文结构

(2). HTTP请求行

• 请求方法（get、post、put、delete等）
• 请求 URL（统一资源定位器）

例如：**http://www.baidu.com:80/index.html?a=100&b=200#logo **

• http： 协议（https、ftp、ssh等）
• **www.baidu.com **域名
• 80 端口号
• /index.html 路径
• a=100&b=200 查询字符串
• #logo 哈希（锚点链接）
• HTTP协议版本号

(3). HTTP请求头

格式：『头名：头值』
常见的请求头有：

Host	主机名
Connection	连接的设置 keep-alive（保持连接）；close（关闭连接）
Cache-Control	缓存控制 max-age = 0 （没有缓存）
Upgrade-
Insecure-
Requests	将网页中的http请求转化为https请求（很少用）老网站升级
User-Agent	用户代理，客户端字符串标识，服务器可以通过这个标识来识别这个请求来自哪个客户端 ，一般在PC端和手机端的区分
Accept	设置浏览器接收的数据类型
Accept-Encoding	设置接收的压缩方式
Accept
Language	设置接收的语言 q=0.7 为喜好系数，满分为1
Cookie

(4). HTTP请求体

请求体内容的格式是非常灵活的，
（可以是空）> GET请求，
（也可以是字符串，还可以是JSON）=> POST请求
例如：

• 字符串：keywords=手机&price=2000
• JSON：{“keywords”:“手机”,“price”:2000}

3. 响应报文

(1). 响应报文结构

(2). 响应行

HTTP/1.1 200 OK

• HTTP/1.1：HTTP协议版本号
• 200：响应状态码 404 Not Found 500 Internal Server Error

还有一些状态码，参考：响应状态码查询

• OK：响应状态描述

响应状态码和响应字符串关系是一一对应的。

(3). 响应头

Cache-Control: 缓存控制 private 私有的，只允许客户端缓存数据
Connection 链接设置
Content-Type:text/html;charset=utf-8 设置响应体的数据类型以及字符集,响应体为html，字符集 utf-8
Content-Length:响应体的长度，单位为字节

(4). 响应体

响应体的内容格式是非常灵活的，常见的响应体格式有：

1. HTML
2. CSS
3. JavaScript
4. 图片
5. 视频
6. JSON

4. 创建HTTP服务

使用node.js创建http服务

(1). 操作步骤

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


//2. 创建服务对象
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
    response.end('hello HTTP Server');
});


//3. 监听端口，启动服务
server.listen(9000, () => {
    console.log('服务已经启动...');
})

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

(2). 测试

浏览器请求对应端口

http://127.0.0.1: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等

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

5. 浏览器查看HTTP报文

(1). 查看请求行与请求头

(2). 查看请求体

(3). 查看URL查询字符串

(3). 查看响应行与响应头

(3). 查看响应体

6. 获取HTTP请求报文

含义	语法	重点掌握
请求方法	request.method	*
请求版本	request.httpVerson
请求路径	request.url	*
URL路径	request(‘url’).parse(request.url).pathname	*
URL查询字符串	request(‘url’).parse(request.url,true).query	*
请求头	request.headers	*
请求体	request.on('data,function(chunk){});
request.on(‘end’,function(){});

注意事项

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

获取请求路径与查询字符串方法：

1. 旧方法

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


//2. 创建服务对象
const server = http.createServer((request, response) => {
    let res = url.parse(request.url,true); //第二个参数设置true是把query参数设置成一个对象
    //输出路径
    let pathname = res.pathname;
    console.log(pathname);
    //输出 keyword 查询字符串
    let keyword = res.query.keyword;
    console.log(keyword);
    response.end('url');
});


//3. 监听端口，启动服务
server.listen(9000, () => {
    console.log('服务已经启动...');
})

2. 新方法

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


//2. 创建服务对象
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
    //实例化 URL 对象
    let url = new URL(request.url, 'http://127.0.0.1');
    //输出路径
    console.log(url.pathname);
    //输出 keyword 查询字符串
    console.log(url.searchParams.get('keyword'));
    response.end('url new');
});


//3. 监听端口，启动服务
server.listen(9000, () => {
    console.log('服务已经启动...');
})

3. 小练习

按照以下要求搭建HTTP服务

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

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

//2. 创建服务对象
const server = http.createServer((request, response) => {
    //获取请求的方法
    let { method } = request;
    //获取请求的url地址
    let { pathname } = new URL(request.url, 'http://127.0.0.1');
    response.setHeader('content-type', 'text/html;charset=utf-8');
    // 判断
    if (method == 'GET' && pathname == '/login') {
        response.end('登录页面');
    } else if (method == 'GET' && pathname == '/reg') {
        response.end('注册页面');
    }
    response.end('Not Found!');
});

//3. 监听端口，启动服务
server.listen(9000, () => {
    console.log('服务已经启动...');
})

7. 设置HTTP响应报文

作用	语法
设置响应状态码	response.statusCode
设置响应状态描述	response.statusMessage
设置响应头信息	response.setHeader(‘头名’,‘头值’)
设置响应体	response.write(‘xx’)
response.end(‘xx’)

// write 和 end 的两种使用情况：
//1. write 和 end 的结合使用 响应体相对分散
response.write('xx');
response.write('xx');
response.write('xx');
response.end(); //每一个请求，在处理的时候必须要执行 end 方法的

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

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

//导入 http 模块
const http = require('http');
//创建服务对象
const server = http.createServer((request, response) => {
    response.end(`
    <!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>
        <style>
            td {
                padding: 20px 40px;
            }
    
            table tr:nth-child(odd) {
                background: #aef;
            }
    
            table tr:nth-child(even) {
                background: #fcb;
            }
    
            table,
            td {
    
                border-collapse: collapse;
            }
        </style>
    </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>
            //获取所有的 td
            let tds = document.querySelectorAll('td');
            //遍历
            tds.forEach(item => {
                item.onclick = function () {
                    this.style.background = '#222';
                }
            })
        </script>
    </body>
    
    </html>
`); //设置响应体
});
//监听端口, 启动服务
server.listen(9000, () => {
    console.log('服务已经启动....')
});

我们能看到这个方法html模板没有高亮显示，而且不方便维护，我们可以把html内容给拿出来做单独的文件，再用读取文件内容功能导入

//导入 http 模块
const http = require('http');
const fs = require('fs');
//创建服务对象
const server = http.createServer((request, response) => {
    //读取文件内容
    let html = fs.readFileSync(__dirname + '/index.html');
    response.end(html); //设置响应体
});
//监听端口, 启动服务
server.listen(9000, () => {
    console.log('服务已经启动....')
});

<!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>
    <style>
        td {
            padding: 20px 40px;
        }


        table tr:nth-child(odd) {
            background: #aef;
        }


        table tr:nth-child(even) {
            background: #fcb;
        }


        table,
        td {


            border-collapse: collapse;
        }
    </style>
</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>
        //获取所有的 td
        let tds = document.querySelectorAll('td');
        //遍历
        tds.forEach(item => {
            item.onclick = function () {
                this.style.background = '#222';
            }
        })
    </script>
</body>


</html>

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

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

如果html中的css和js单独写到文件里用link和script引入的话，服务启动是怎么样的呢

我们看到它确实是一个表格，但是里面没有内容，这是为什么呢
是因为css和js文件都被解析为了html文件，所以没有显示出来
这时候我们需要对传进来的文件进行判断，如果是css文件就执行css，js文件就执行js

获取请求头通过/后面的类型来判断是什么类型的文件

//导入 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 == '/') {
        //读取文件内容
        let html = fs.readFileSync(__dirname + '/index.html');
        response.end(html); //设置响应体
    } else if (pathname == '/index.css') {
        //读取文件内容
        let css = fs.readFileSync(__dirname + '/index.css');
        response.end(css); //设置响应体
    } else if (pathname == '/index.js') {
        //读取文件内容
        let js = fs.readFileSync(__dirname + '/index.js');
        response.end(js); //设置响应体
    } else {
        response.statusCode = 404;
        response.end('<h4>404 Not Found</h4>');
    }
});
//监听端口, 启动服务
server.listen(9000, () => {
    console.log('服务已经启动....')
});

9

9. 静态资源服务

静态资源是指 内容长时间不发生改变的资源，例如图片，视频，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');
    //拼接文件路径
    let filePath = __dirname + '/' + pathname;
    //读取文件 fs 异步 API
    fs.readFile(filePath, (err, data) => {
        if (err) {
            response.statusCode = 500;
            response.end('文件读取失败~~');
            return;
        }
        //响应文件内容
        response.end(data);
    })
});
//监听端口, 启动服务
server.listen(9000, () => {
    console.log('服务已经启动....')
});

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

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

(2). 网页中的URL

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

绝对路径

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

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

相对路径

相对路径在发送请求时，需要与当前页面URL路径进行计算，得到完整URL后，再发送请求，学习阶段用的比较多
例如当前网页url为http://www.baidu.com/course/h5.html

形式	最终的URL
./css/app.css	http://www.baidu.com/course/css/app.css
js/app.js	http://www.baidu.com/course/js/app.js
…/img/logo.png	http://www.baidu.com/img/logo.png
…/…/mp4/show.mp4	http://www.baidu.com/mp4/show.mp4

(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 类型，浏览器在遇到该类型的响应
时，会对响应体内容进行独立存储，也就是我们常见的 下载 效果

//导入 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 rootDir = __dirname + '/';
    //拼接文件路径
    let filePath = rootDir + pathname;
    //读取文件 fs 异步 API
    fs.readFile(filePath, (err, data) => {
        if (err) {
            response.setHeader('content-type', 'text/html;charset=utf-8');
            response.statusCode = 500;
            response.end('文件读取失败~~');
            return;
        }
        //响应文件内容
        response.end(data);
    })
});
//监听端口, 启动服务
server.listen(9000, () => {
    console.log('服务已经启动....')
});

10. GET和POST请求

(1). GET 请求的情况：

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

(2). POST 请求的情况：

• form 标签中的 method 为 post（不区分大小写）
• AJAX 的 post 请求

(3). GET和POST请求的区别

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

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