Node.js |（四）HTTP协议 | 尚硅谷2023版Node.js零基础视频教程

啦啦右一2023-08-10 8:59

学习视频：尚硅谷2023版Node.js零基础视频教程，nodejs新手到高手

文章目录

补充笔记：

📚HTTP概念


📚窥探HTTP报文

  • Fiddler

  • 安装fiddler

  • 配置

    • 在Tool的Options里 ，找到HTTPS勾选Decrypt..，然后同意接下来的弹窗。记得点OK！然后重启！！

    • 设置Web Browsers

  • 使用

    • 双击某一条则会显示详细信息
    • 选择Raw会显示详细信息

📚请求报文的组成


🐇HTTP请求行

  • 请求方法

  • URL ：Uniform Reaourse Locator，统一资源定位符，其本身也是一个字符串。

  • 版本号

🐇HTTP请求头

  • 格式：头名：头值

🐇HTTP的请求体

📚响应报文的组成



🐇响应行



🐇响应头和响应体

  • 响应体内容的类型是非常灵活的，常见的类型有 HTML、CSS、JS、图片、JSON。
  • 相应头请求头这些都是不需要记住的，在MDN可查。
  • IP的介绍
    • IP也称为【IP地址】，本身是一个数字标识。
    • IP用来标识网络设备，用来实现设备通信。
    • 端口：应用程序的数字标识，实现不同主机应用程序之间的通信。

📚使用node.js创建HTTP服务

  1. 命令行 ctrl + c停止服务
  2. 当服务启动后，更新代码必须重启服务才能生效
  3. 响应内容中文乱码的解决办法：response.setHeader('content-type','text/html;charset=utf-8');
  4. 端口号被占用：Error: listen EADDRINUSE: address already in use :::9000
    1）关闭当前正在运行监听端口的服务 （ 使用较多 ）
    2）修改其他端口号
  5. HTTP 协议默认端口是 80 。HTTPS 协议的默认端口是 443, HTTP 服务开发常用端口有 3000，
    8080，8090，9000 等。
js 复制代码 
//1. 导入 http 模块
const http = require('http');

//2. 创建服务对象
const server = http.createServer((request, response) => {
  //response.end('Hello HTTP'); //设置响应体
  //解决响应内容中文乱码的问题
  response.setHeader('content-type', 'text/html;charset=utf-8');
  response.end('你好'); //设置响应体
});

//3. 监听端口, 启动服务
//9000是端口号，以下在服务启动成功时运行
server.listen(9000, () => {
  console.log('服务已经启动....')
});

📚浏览器查看HTTP报文

尚硅谷教程





实操

  • 运行上边写的代码，打开对应网页，F12检查，查看网络。
  • 查看127.0.0.1细节
  • 运行表单页提交内容并查看请求体

  • 查看URL查询字符串
  • 查看响应体

📚获取HTTP请求报文

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

🐇提取HTTP报文

js 复制代码 
//1. 导入 http 模块
const http = require('http');

//2. 创建服务对象
const server = http.createServer((request, response) => {
  //获取请求的方法
  console.log(request.method);
  //获取请求的 url
  console.log(request.url);// 只包含 url 中的路径与查询字符串
  //获取 HTTP 协议的版本号
  console.log(request.httpVersion);
  //获取 HTTP 的请求头
  console.log(request.headers.host);
  response.end('http'); //设置响应体
});

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

🐇提取HTTP报文的请求体（了解）

js 复制代码 
//1. 导入 http 模块
const http = require('http');

//2. 创建服务对象
const server = http.createServer((request, response) => {
  //1. 声明一个变量
  let body = '';
  //2. 绑定 data 事件
  request.on('data', chunk => {
    body += chunk;
  })
  //3. 绑定 end 事件
  request.on('end', () => {
    console.log(body);
    //响应
    response.end('Hello HTTP');
  });
});

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

  • 借助form表单

    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>
</head>
<body>
  <form action="http://127.0.0.1:9000/index.html" method="post" >
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit" value="提交">
  </form>
</body>
</html>

🐇提取HTTP报文中URL路径与查询字符串

法一

js 复制代码 
//导入 http 模块
const http = require('http');
//1. 导入 url 模块（node.js内置模块）
const url = require('url');

//创建服务对象
const server = http.createServer((request, response) => {
  //2. 解析 request.url ，parse：解析
  let res = url.parse(request.url, true);
  console.log(res);
  //路径
  let pathname = res.pathname;
  console.log(pathname);
  //查询字符串
  let keyword = res.query.keyword;
  console.log(keyword);
  response.end('url');
});

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

法二

小插曲本来以为是05没关，但ctrlC后还是报错🤔重开vs后OK😄记得CtrlC终止后再开新的终端⚠️
ps：nodejs端口号占用------解决办法

js 复制代码 
//导入 http 模块
const http = require('http');

//创建服务对象
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');
});

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

🐇HTTP请求练习

js 复制代码 
//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'){ // register 注册
    response.end('注册页面');
  }else{
    response.end('Not Found');
  }
});

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



📚HTTP响应报文

🐇设置HTTP响应报文

js 复制代码 
//导入 http 模块
const http = require('http');

//创建服务对象
const server = http.createServer((request, response) => {
  //1. 设置响应状态码
  response.statusCode = 203;
  //response.statusCode = 404;
  //2. 响应状态的描述 
  response.statusMessage = 'iloveyou';
  //3. 响应头
  response.setHeader('content-type', 'text/html;charset=utf-8');
  // response.setHeader('Server', 'Node.js');
  // response.setHeader('myHeader', 'test test test');
  // response.setHeader('test', ['a','b','c']);
  //4. 响应体的设置
  response.write('love');
  response.write('love');
  response.write('love');
  response.write('love');//write可以多次调用
  response.end('love'); //设置响应体
  //end不能不写也不能写多个，不然会报错
  //response.end('xxx'); //设置响应体
});

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

🐇HTTP响应练习

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

  • 采用html和js分离＋导入实现。

  • html完成表格样式

    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>
  <style>
    td {
      padding: 20px 40px;
    }
    /* odd even交替实现隔行换色 */
    table tr:nth-child(odd) {
      background: rgb(202, 219, 255);
    }

    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 = 'yellow';
      }
    })
  </script>
</body>

</html>

  • js设置响应

    js 复制代码 
    //导入 http 模块
const http = require('http');
const fs = require('fs');

//创建服务对象
const server = http.createServer((request, response) => {
  //读取文件内容
  let html = fs.readFileSync(__dirname + '/10_table.html');
  response.end(html); //设置响应体
});

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


📚网页资源的基本加载过程

  • 网页资源的加载 都是循序渐进的，首先获取 HTML 的内容， 然后解析 HTML 在发送其他资源的请求，如CSS，Javascript，图片等。
  • 理解了这个内容对于后续的学习与成长有非常大的帮助。

🐇实现网页引入外部资源

  • 这里使用的是上边那个表格的练习例子，但把html、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 + '/10_table.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('<h1>404 Not Found</h1>')
  }
});

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

以上写法可行但很麻烦，于是接下来看静态资源服务👇

📚静态资源服务

  • 静态资源是指内容长时间不发生改变的资源 ，例如图片，视频，CSS 文件，JS文件，HTML文件，字体文件等。
  • 动态资源是指内容经常更新的资源 ，例如百度首页，网易首页，京东搜索列表页面等。
  • HTTP 服务在哪个文件夹中寻找静态资源，那个文件夹就是静态资源目录，也称之为网站根目录。

🐇网页中的URL

喔------又是绝对路径相对路径喏------

  • 绝对路径

  • 相对路径

  • 关注运行后的URL拼接方式！

    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>URL</title>
</head>
<body>
  <!-- 绝对路径 -->
  <a href="https://www.baidu.com">百度</a>
  <a href="//jd.com">京东</a>
  <a href="/search">搜索</a>
  <hr>
  <!-- 相对路径 -->
  <a href="./css/app.css">访问CSS</a>
  <a href="js/app.js">访问JS</a>
  <a href="../img/logo.png">访问图片</a>
  <a href="../../img/logo.png">访问图片</a>
</body>
</html>

🐇设置资源类型（mime类型）

js 复制代码 
/**
 * 创建一个 HTTP 服务，端口为 9000，满足如下需求
 * GET  /index.html        响应  page/index.html 的文件内容
 * GET  /css/app.css       响应  page/css/app.css 的文件内容
 * GET  /images/logo.png   响应  page/images/logo.png 的文件内容
 */
//导入 http 模块
const http = require('http');
const fs = require('fs');
const path = require('path');
//声明一个变量
let mimes = {
  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'
}

//创建服务对象
const server = http.createServer((request, response) => {
  if(request.method !== 'GET'){
    response.statusCode = 405;
    response.end('<h1>405 Method Not Allowed</h1>');
    return;
  }
  //获取请求url的路径
  let {pathname} = new URL(request.url, 'http://127.0.0.1');
  //声明一个变量
  let root = __dirname + '/page';
  // let root = __dirname + '/../';
  //拼接文件路径
  let filePath = root + pathname;
  //读取文件 fs 异步 API
  fs.readFile(filePath, (err, data) => {
    if(err){
      console.log(err);
      //设置字符集
      response.setHeader('content-type','text/html;charset=utf-8');
      //判断错误的代号
      switch(err.code){
        case 'ENOENT':
          response.statusCode = 404;
          response.end('<h1>404 Not Found</h1>');
        case 'EPERM':
          response.statusCode = 403;
          response.end('<h1>403 Forbidden</h1>');
        default:
          response.statusCode = 500;
          response.end('<h1>Internal Server Error</h1>');
      }
      
      return;
    }
    //获取文件的后缀名
    let ext = path.extname(filePath).slice(1);
    //获取对应的类型
    let type = mimes[ext];
    if(type){
      //匹配到了 text/html;charset=utf-8
      if(ext === 'html'){
        //解决乱码问题
        response.setHeader('content-type', type + ';charset=utf-8');
      }else{
        response.setHeader('content-type', type);
      }
    }else{
      //没有匹配到
      response.setHeader('content-type', 'application/octet-stream');
    }
    //响应文件内容
    response.end(data);
  })
  
});

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

🐇GET和POST请求场景小结

🐇GET和POST请求的区别

  • GET 和 POST 是 HTTP 协议请求的两种方式。
    • GET主要用来获取数据，POST主要用来提交数据
    • GET 带参数请求是将参数缀到 URL 之后，在地址栏中输入 url 访问网站就是 GET 请求，
    • POST 带参数请求是将参数放到请求体中。
    • POST 请求相对 GET安全一些，因为在浏览器中参数会暴露在地址栏。
    • GET请求大小有限制，一般为 2K，而POST请求则没有大小限制。
相关推荐
汀、人工智能23 分钟前
报错error: RPC failed，curl 16 Error in the HTTP2 framing layer解决方法
网络·git·网络协议·rpc
qq 17780362227 分钟前
智能新时代，游戏盾守护顺畅体验
运维·服务器·网络·游戏·云计算·ddos·ip
2401_847056552 小时前
Altium Designer脚本工具定制
网络·数据库
就这个java爽！2 小时前
JAVA网络编程【基于TCP和UDP协议】超详细！！！
java·开发语言·网络·tcp/ip·udp·eclipse·idea
一叶飘零_sweeeet3 小时前
为什么 Feign 要用 HTTP 而不是 RPC？
java·网络协议·http·spring cloud·rpc·feign
KookeeyLena73 小时前
动态IP与静态IP：哪种更适合用户使用？
网络·网络协议·tcp/ip
赵啸林3 小时前
npm发布插件超级简单版
前端·npm·node.js
可惜已不在3 小时前
华为 HCIP-Datacom H12-821 题库 (25)
网络·华为
亿林科技网络安全3 小时前
阿里云盘照片事件！网络安全警钟长鸣
网络·安全·web安全
平头哥在等你3 小时前
《计算机网络名词解释》
服务器·网络·计算机网络
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CCF-CSP认证考试 202406-3 文本分词 100分题解08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10软件工程从理论到实践客观题汇总(头歌第一章至第八章)