devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

class04：http模块_使用http模块发起网络请求

作者：2023面试高手 | 2024-03-27 11:02:45

赞

踩

使用http模块发起网络请求

目录

一、http模块

使用node 创建服务应用使得前后端数据交互，从而在访问地址的时候返回页面或者数据。

http模块是内置模块，用来创建node应用程序，后面会使用express，koa等第三方库创建，较为简便。

1. 创建node应用

const http = require("http");  // 引入创建node应用程序的模块

  • 1

打印输出：

console.log(http);

  • 1

在这里插入图片描述

创建node应用：

const serve = http.createServer(() => { });

  • 1

启动node应用：

serve.listen(port, callback)

  • 1

port： 端口号

callback：回调函数

端口号是 0 - 65536 之间的一个数组成，端口是node应用运行的一个地址；

端口号已经被调用，不能创建相同的端口地址，两个相同的地址会报错。

例：

serve.listen("3000", () => {
    console.log("3000端口启动之后调用")
});

  • 1
  • 2
  • 3

在这里插入图片描述

2. 请求体与访问体

网页通过本地端口localhost访问后端数据，网页地址栏相等于在发送get请求 ：

request 请求体 => 前端发送数据给后端的一个整体信息

response 响应体 => 后端给前端发送信息的一个整体

例：

const serve = http.createServer((request,response)=>{
	// 后端给前端返回数据：字符串->buffer格式
    console.log(request.url);  // get 请求的数据
    // 让前端按照该格式进行解析
    response.setHeader("Content-Type","text/html;charset=utf-8"); 
    
    response.end("莫听穿林打叶声，何妨吟啸且徐行")
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

浏览器访问结果：
在这里插入图片描述

后端打印输出：
在这里插入图片描述

3. 返回页面

引入http模块：

const http = require("http");

  • 1

创建node应用：

const serve =http.createServer((req,res)=>{
    console.log(req.url)
});

  • 1
  • 2
  • 3

开启服务端口：

serve.listen("3000",()=>{
    console.log("3000端口启动之后调用")
});

  • 1
  • 2
  • 3

假如要访问同目录下的web文件夹中的index.html文件，则应在第二步中将后端数据index.html页面发送给前端，但打开web文件访问index.html文件需要先引入fs模块。

const fs =require("fs")

  • 1
const serve =http.createServer((req,res)=>{
    console.log(req.url)
    fs.readFile("./web/index.html",(err,data)=>{
        res.end(data)
    });
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在这里插入图片描述
在这里插入图片描述

4. 返回css样式

http仅支持在HTML内添加样式，若读取css文件只能读取文本，比较麻烦。

4.1 在html内添加css样式，可正常显示

// index.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>
        p{
            background: red;
        }
    </style>
</head>
<body>
    <p>听闻广陵不知寒，大雪龙骑下江南！</p>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

4.2 使用css样式文件，不能正常显示

// index.html
<link rel="stylesheet" href="./index.css"></link>

  • 1
  • 2
// index.css
p{
    background: red;
}

  • 1
  • 2
  • 3
  • 4

在这里插入图片描述

通过打印请求地址，可发现每次访问页面时，后端发起了三次请求：

console.log(req.url)

  • 1

在这里插入图片描述

这三次请求分别是：/ 、/index.css、/favicon.ico，其中/ 表示3000端口。
结论：前端有些标签会自动发送请求，如link a form img script window.location.href等。

4.3 对css文件发起请求访问，只能显示文本

const serve =http.createServer((req,res)=>{
    console.log(req.url)
    fs.readFile("./web/index.html",(err,data)=>{
        res.end(data)
    });
    fs.readFile("./web/index.css",(err,data)=>{
         res.end(data)
    });
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在这里插入图片描述

注意：这种访问并不能每次都显示该css文本，而是有时显示html文本，有时显示css文本，有时显示被css样式渲染的html文本；即访问的文件已经混乱，各个文件在不同时间互相覆盖。

4.4 使用if-else解决混乱

const serve =http.createServer((req,res)=>{
    console.log(req.url);
    if(req.url == "/"){
        fs.readFile("./web/index.html",(err,data)=>{
            res.end(data)
        });
    }else if(req.url == "/index.css"){
        fs.readFile("./web/index.css",(err,data)=>{
            res.end(data)
        });
    }else if(req.url == "/index.png"){
        fs.readFile("./web/index.png",(err,data)=>{
            res.end(data)
        });
    }
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16


在这里插入图片描述

二、后端接收前端的数据

1. axios请求的get方式

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。

前端使用axios发起请求：

// app.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>
    <button id="r_get">get请求</button>
    <!--  axios 封装好的原生ajax请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //  axios   是封装好的ajax请求数据   vue和react基本都使用这种请求方式

        r_get.onclick=()=>{
             // ajax请求数据---get方式
            axios({
                method: 'get',   // 发送的请求方式
                url: 'http://localhost:3000/request_me',  // 地址 后端 路由地址
            }).then((res)=>{
                console.log(res);     // 拿到后端发送的数据
            })
        };

    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  • 1

上一行的代码为axios访问网络配置的固定路径；

app.html文件中配置了get的请求方式，当请求地址为http://localhost:3000/request_me时可以正确发起该axios的get请求。请求得到返回的数据内容由后端决定。

// app.js
const http = require("http");

const serve = http.createServer((req, res) => {
    console.log(req.url, "req.url");  // get数据  包裹请求地址

    if (req.url == "/request_me") {   //前端请求数据地址时 
        res.end("66666666666666")   //后端给前端发送的数据
    }
});

serve.listen("3000", () => {
    console.log("3000端口开启")
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

后端通过http接收前端发起的请求，如果请求地址和端口正确则返回66666666666666：
在这里插入图片描述

前端发起请求之后还要接收后端返回的数据，通过**.then**的方式接收：

r_get.onclick=()=>{
    // ajax请求数据---get方式
    axios({
        method: 'get',   // 发送的请求方式
        url: 'http://localhost:3000/request_me',  // 地址 后端 路由地址
    }).then((res)=>{
    	console.log(res);     // 拿到后端返回的数据
    })
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

打印输出res：
在这里插入图片描述

跨域问题：

在后端接收请求之前设置跨域，可以使任何人都能访问：

res.setHeader("Access-Control-Allow-Origin", "*");

  • 1

2. axios请求的post方式

post在前端发起请求需要传递数据：

当请求地址为http://localhost:8080/request_her可正确发起post请求，携带的数据有name和age：

// app.html
r_post.onclick=()=>{
    // ajax请求数据---post方式
    axios({
        method: 'post',   // 发送的请求方式
        url: 'http://localhost:8080/request_her',  // 地址   后端  路由地址
        data:{               // post请求发送数据方式
            name:"LeBron James",
            age:"38",
        }
	}).then((res)=>{
        console.log(res);     // 拿到后端发送的数据
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

post方式在后端获取数据需要通过on事件的方式：

if (req.url == "/request_her") {
    // 前端post请求http模块获取数据，在on事件中获取值
    req.on("data", (chunk) => {
    	console.log(chunk.toString())
    });
    res.end("55555555555")
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

后端通过http接收前端发起的请求，如果请求地址和端口正确则返回55555555555：
在这里插入图片描述

三、URL模块

引入：

const url = require("url");  // 地址序列号

  • 1

例：

const http = require("http");   // 引入创建node应用程序模块
const fs = require("fs");
const url = require("url");     // 地址序列号

// 完整返回给前端
const serve = http.createServer((req, res) => {
    console.log(url.parse(req.url));
});
serve.listen("3000", () => {
    console.log("3000端口启动之后调用")
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/323987
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号