最近太忙碌,只能晚上抽空学一下,后台有留言说让我分享一下这个视频的链接,十分感谢,已经添加到自动回复了,可以获取'nodejs'获取 ,视频还是不错的,老师讲的很好!
IP
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("服务已启动");
});
现在就可以了
但是这种方式还是非常麻烦的,后面会解决这个问题
暂时先写到这吧,拖太久了,上班以后太懒了