【Node.js学习 day3——http模块】

Dosage de fleurs2024-01-12 8:26

创建HTTP服务端

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

//2.创建服务对象
const server = http.createServer((request, response) => {
    response.end('Hello HTTP Server');//设置响应体
});

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

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. HTTP协议默认端口是80。HTTP服务开发常用端口有3000,8080,8090,9000等。

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

浏览器查看HTTP报文

获取请求行和请求头

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

含义 语法
请求方法 request.method
请求版本 request.httpVersion
请求路径 request.url
URL路径 require('url') .parse(request.url).pathname
URL查询字符串 require('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：这个请求是属于浏览器自动发送的请求

获取请求体

复制代码 
<!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" method="post">
            <input type="text" name="username">
            <input type="text" name="password">
            <input type="submit" value="提交">
        </form>
    </body>
</html>
复制代码 
//1.导入http模块
const http = require('http');

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

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

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

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

//2.创建服务对象
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('服务已经启动...')
})

HTTP请求练习

按照一下要求搭建HTTP服务，请求类型GET

请求地址 响应体结果
/login 登录页面
/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'){
        //register注册
        response.end('注册页面');
   }else{
    //默认的响应
    response.end('404 Not Found');
   }
});

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


设置HTTP响应报文

作用 语法
设置响应状态码 response.statusCode
设置响应状态描述 response.statusMessage(用的非常少)
设置响应头信息 response.setHeader（'头名'，'头值'）
设置响应体 response.write('xx') response.end('xxx')

HTTP响应练习

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

//2.创建服务对象
const server = http.createServer((request, response) => {
   //设置响应状态码
   //response.statusCode = 203;
   //response.statusCode = 404;
   //响应状态的描述
   response.statusMessage = 'iloveyou'
   //响应头
   response.setHeader('content-type','text/html;charset=utf-8');
   response.setHeader('myHeader','test test test');
   response.write('love');
   response.write('love');
   response.write('love');
   response.write('love');
   response.end('xxx');//设置响应体
});

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


响应练习

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

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

//2.创建服务对象
const server = http.createServer((request, response) => {
   //设置响应状态码
   //response.statusCode = 203;
   //response.statusCode = 404;
   //响应状态的描述
   response.statusMessage = 'iloveyou'
   //响应头
   response.setHeader('content-type','text/html;charset=utf-8');
   response.setHeader('myHeader','test test test');
   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>`);//设置响应体
});

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

响应文件练习

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

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

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

网页资源加载基本过程

先HTML，后CSS，最后JS

实现网页引入外部资源

test.js

复制代码 
const http = require('http');
const fs = require('fs');

const server = http.createServer((request, response) => {
    let { pathname } = new URL(request.url, 'http://127.0.0.1');
    if (pathname === '/') {
        let html = fs.readFileSync(__dirname + '/form.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.setHeader('Content-Type', 'application/javascript');
        response.end(js);
    } else {
        response.statusCode = 404;
        response.end(`<h1>404 Not Found </h1>`);
    }
});

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>
        <link rel="stylesheet" href="./index.css">
        <script type="text/javascript" src="./index.js"></script>
        
    </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>
    </body>
</html>

index.css

复制代码 
td{
    padding:20px 40px;
}
table tr:nth-child(odd){
    background:#aef ;
}
table tr:nth-child(even){
    background:#fcb;
}
table, td{
    border-collapse: collapse;
}

index.js

复制代码 
 //获取所有的td
 let tds = document.querySelectorAll('td');
 //遍历
 tds.forEach(item => {
     item.onclick = function(){
         this.style.background = '#222';
     }
 })

静态资源与动态资源

静态资源是指内容长时间不发生改变的资源 ，例如图片，视频，CSS文件，JS文件，HTML文件，字体文件等。

动态资源是指内容经常更新的资源，例如百度首页，网易首页，京东搜索列表页面等。

搭建静态资源服务

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

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

网页URL之绝对路径

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

形式 特点
http://atguigu.com/web 直接向目标资源发送请求，容易理解。网站的外链会用到此形式
//atguigu.com/web 与页面URL的协议拼接形成完整URL再发送请求。大型网站用的比较多
/web 与页面URL的协议、主机名、端口拼接形成完整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类型，浏览器会根据该类型决定如何处理资源。

下面是文件对应的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请求的情况：

  • 在地址栏直接输入url访问
  • 点击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带参数请求是将参数缀到URL之后，POST带参数请求是将参数放到请求体中
  3. 安全性。POST请求相对GET安全一些，因为在浏览器中参数会暴露在地址栏
  4. GET请求大小有限制，一般为2K，而POST请求则没有大小限制
相关推荐
井队Tell5 小时前
打造高清3D虚拟世界|零基础学习Unity HDRP高清渲染管线（第十天）
学习·3d·unity
qq. 28040339845 小时前
nestjs引篇
后端·node.js·nestjs
Lester_11015 小时前
嵌入式学习笔记 - 用泰勒公式解决 tanh函数
笔记·学习·算法
茄汁面5 小时前
Angular(TypeScript ) 中基于 ExcelJS 实现导入模板下载功能（带样式与数据验证）
前端·javascript·node.js
charlie1145141916 小时前
从模仿到掌握：尝试一下Native CSS手写一个好看的按钮
前端·css·学习·ui
弈风千秋万古愁6 小时前
【PID】连续PID和数字PID chapter1（补充） 学习笔记
笔记·学习·算法·matlab
im_AMBER7 小时前
JavaScript 03 【基础语法学习】
javascript·笔记·学习
Yupureki7 小时前
从零开始的C++学习生活 18:C语言复习课(期末速通)
c语言·数据结构·c++·学习·visual studio
做科研的周师兄7 小时前
【机器学习入门】9.2：感知机 Python 实践代码模板（苹果香蕉分类任务适配）
人工智能·python·学习·机器学习·分类·数据挖掘·numpy
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07Labelme从安装到标注：零基础完整指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10jdk21下载、安装（Windows、Linux、macOS）