【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请求则没有大小限制
相关推荐
Double Point1 小时前
（三十三）Dart 中使用 Pub 包管理系统与 HTTP 请求教程
网络·网络协议·http
南通DXZ1 小时前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
你的人类朋友2 小时前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
前端太佬2 小时前
暂时性死区（Temporal Dead Zone, TDZ）
前端·javascript·node.js
Mintopia2 小时前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
你的人类朋友2 小时前
CommonJS模块化规范
javascript·后端·node.js
李少兄1 天前
Unirest：优雅的Java HTTP客户端库
java·开发语言·http
Mintopia1 天前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
云上艺旅1 天前
K8S学习之基础七十四：部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得2051 天前
哈尔滨工业大学DeepSeek公开课：探索大模型原理、技术与应用从GPT到DeepSeek｜附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量05RAG 实践- Ollama+RagFlow 部署本地知识库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07木马学习记录08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek RAGFlow构建本地知识库系统10【AUTOSAR 基础软件】Can模块详解（Can栈之驱动模块）