社区首页 >专栏 >从0到1学习nodejs(3)

从0到1学习nodejs(3)

y191024

发布于 2024-07-24 04:34:47

15600

代码可运行

文章被收录于专栏：睡不着所以学编程睡不着所以学编程

运行总次数：0

代码可运行

最近太忙碌，只能晚上抽空学一下，后台有留言说让我分享一下这个视频的链接，十分感谢，已经添加到自动回复了，可以获取'nodejs'获取，视频还是不错的，老师讲的很好！

IP的分类

IP是由32位二进制数字组成了,最多能表示2^32个IP地址,那就是4294967296(42亿)个IP,但是这个数量远远不够人们使用。因此就出现了区域共享和家庭共享。

比如我们家庭中的这些设备，就形成了一个局域网，而路由器给我们分配的地址就是局域网IP，也就是私网IP

我们找运营商给我们拉网线以后，就可以给路由器再接一根线，接上这根线以后，我们的路由器就有了另一个IP，这就是公网IP，也叫做广域网IP。我们所说的共享IP,指的就是公网IP。

因此，每个家庭中的各个设备的局域网是可以复用的，他们只需要通过一个公网IP进行通信即可，这就大大减少了IP不够用的问题。

本地回环IP地址

这个地址是一定要记住的，永远指向当前本机（开发表示熟悉极了）

但是不仅仅是127.0.0.1，以下IP范围内的都是本地回环IP地址

端口

学习完IP接着学一下端口

作用：

比如说，有两台电脑，左边的主机想给右边的主机发送一些报文数据，但是右边的主机怎么知道用哪个应用程序来处理报文呢？这时候端口就起到了作用。

接下来就是HTTP服务了哈

HTTP模块

创建一个最简单的服务吧

// 导入http模块
const http = require("http");
// 创建服务对象
const server = http.createServer((req, res) => {
  res.end("hello"); // 这里是设置响应体,并结束这个请求
});
// 监听端口,启动服务
server.listen(9000, () => {
  console.log("服务已启动..."); // 只有当服务成功启动才会执行
});

我们会发现如果响应的是中文的话会乱码

这个时候我们需要加一个响应头,告诉浏览器返回的结果是html,内容的字符集是utf-8的,让浏览器按照这样的方式解析

又遇到了一个问题,我的代码这样写报错了

GPT的解答是,试了下果然好了,可以注意一下。

每次修改都得重启，可以安装nodemon热更新

npm i nodemon

如果我们想看哪个端口被占用了,我们可以打开资源监视器去找

获取请求报文

const http = require('http');
const server = http.createServer((req, res) => {
  console.log(req.method);
  console.log(req.url); // 只包含url中的路径和查询字符串
  // 获取请求头
  console.log(req.headers);
  console.log(req.headers.host);
  res.end('666')
})
server.listen(3000, () => {
  console.log('服务已启动...');
})

获取请求体

我们现在写一段这样的代码,就可以获取到请求体了,注意get请求一般是没有请求体的,我们可以使用postman来发post请求

const http = require('http')
const server = http.createServer((req, res) => {
  let body = ''
  req.on('data', (chunk) => {
    body+=chunk
  })
  req.on('end', () => {
    console.log(body);
    res.end('hello')
  })
})
server.listen(3000, () => {
  console.log('服务已启动');
})

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

需要导入一个url模块

const http = require("http");
const url = require("url");

const server = http.createServer((req, res) => {
  console.log(url.parse(req.url));
});
server.listen(5000, () => {
  console.log("1111");
});

但是如果我们想要获取查询字符串的话,这样做还是不够方便,我们可以给parse方法加一个true参数

这样我们的query就是一个对象了

还有第二种方法,就是new URL()

const http = require("http");

const server = http.createServer((req, res) => {
  const url = new URL(req.url, "http://127.0.0.1");
  console.log(url);
  console.log(url.searchParams.get("keyword"));
});
server.listen(5002, () => {
  console.log("服务已启动");
});

小测试

const http = require("http");
const server = http.createServer((req, res) => {
  const url = new URL(req.url, "http://127.0.0.1");
  res.setHeader("content-type", "text/html;charset=utf-8");
  const { method } = req;
  const { pathname } = url;
  if (method === "GET" && pathname === "/login") {
    res.end(
      "<div>请登录</div><label for=login>用户名: </label><input id='login'/>"
    );
  } else if (method === "GET" && pathname === "/reg") {
    res.end(
      "<div>请注册</div><label for=login>用户名: </label><input id='login'/>"
    );
  } else {
    res.end(""); // 注意处理,不然匹配不上的时候会
    // 一直处于连接状态无法停止
  }
});
server.listen(5002, () => {
  console.log("服务已启动");
});

设置响应报文

我们可以设置响应状态码等

const http = require("http");
const server = http.createServer((req, res) => {
  // 设置响应码
  res.statusCode = 201;
  // 设置响应头
  res.setHeader("content-type", "text/html;charset=utf-8");
  // 设置多个重名响应头
  res.setHeader("test", ["a", "b", "c"]);
  // 设置响应体
  res.write("设置的响应体"); // 会和下面的end拼接在一起,但是一般不会同时调用
  res.end("请求返回结果"); // write可以写多个,但是end不可以(多也不行少也不行)
});
server.listen(3001, () => {
  console.log("服务已启动...");
});

响应体返回HTML格式结果

我们发送请求以后,通常都不是单一的文本,有时候是页面,那就要返回HTML了,要怎么做到呢

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="response">我是响应结果</div>
  </body>
  <style>
    .response {
      color: skyblue;
      font-size: 20px;
    }
</style>
</html>

const http = require("http");
const fs = require("fs");
const path = require("path");

const server = http.createServer((req, res) => {
// 这里不用path.resolve的话,../拼接不上去
  const filePath = path.resolve(__dirname, "../html/responseHtml.html");
  const html = fs.readFileSync(filePath);
  res.end(html);
});
server.listen("3002", () => {
  console.log("服务已启动");
});

扩展练习

现在我们将反应结果设置为了HTML,现在我们想要加入JS和css,我们第一反应应该都是在HTML中使用link和script引用,让我们看看这样会出现什么问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./test.css" />
  </head>
  <body>
    <div id="response">我是响应结果</div>
  </body>
  // 注意script的位置哈,写在上面的话是获取不到元素的
   <script src="./test.js"></script>
</html>

这是引入的样式和JS

现在我们执行一下,我们会发现除了这个HTML写的文本,JS和css都没有生效,我们会发现,我们的css还有JS的请求返回结果都是HTML,这是因为我们发请求时的回调函数出现了问题,没有处理好

现在我们对发请求的回调函数做一下处理

const http = require("http");
const fs = require("fs");
const path = require("path");

const server = http.createServer((req, res) => {
  let { pathname } = new URL(req.url, "http://127.0.0.1");

  console.log(pathname);
  if (pathname === "/") {
    const filePath = path.resolve(__dirname, "../html/responseHtml.html");
    const html = fs.readFileSync(filePath);
    res.end(html);
  } else if (pathname === "/test.js") {
    const jsPath = path.resolve(__dirname, "../html/test.js");
    const js = fs.readFileSync(jsPath);
    res.end(js);
  } else if (pathname === "/test.css") {
    const cssPath = path.resolve(__dirname, "../html/test.css");
    const css = fs.readFileSync(cssPath);
    res.end(css);
  } else {
    res.end("<p>404 Not Fount</p>");
  }
});
server.listen("3003", () => {
  console.log("服务已启动");
});