Node.js——http 模块（二）

个人简介

👀个人主页：前端杂货铺
🙋‍♂️学习方向：主攻前端方向，正逐渐往全干发展
📃个人状态：研发工程师，现效力于中国工业软件事业
🚀人生格言：积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

内容	参考链接
Node.js（一）	Node.js——fs（文件系统）模块
Node.js（二）	Node.js——path（路径操作）模块
Node.js（三）	Node.js——http 模块（一）

文章目录

- 前言
- 设置 HTTP 响应报文
- Simple Demo
- 总结

前言

上篇文章我们学习了 path 模块，本篇文章我们学习 Node.js 的 http 模块。

http 模块是核心模块，它提供了 HTTP 服务器和客户端功能，主要用于前后端通信。

设置 HTTP 响应报文

下面，我们学习如何进行 HTTP 响应报文的设置，其实也很简单，只需要 response.xxx 调一些属性和方法即可。

statusCode: 设置响应状态码
statusMessage: 设置响应状态的描述
setHeader(): 设置响应头
write(): 设置响应体

const http = require('http');// 创建服务对象
const server = http.createServer((request, response) => {// 设置响应状态码response.statusCode = 201;// 设置响应状态的描述response.statusMessage = 'hi';// 设置响应头response.setHeader('content-type', 'text/html;charset=utf-8');response.setHeader('Server', 'Node.js');response.setHeader('DIYHeader', 'diy header');response.setHeader('test', ['a', 'b', 'c']);// 设置响应体response.write('Hello, ');response.write('This ');response.write('is ');response.write('zahuopu');response.end('!');
})// 监听端口，启动服务
server.listen('9000', () => {console.log('服务启动成功...')
})

https://i-blog.csdnimg.cn/direct/3ebc4965352e442d8f4d8d421e4ef137.png" alt="在这里插入图片描述" />

Simple Demo

下面我们编写一个小 Demo，实现响应页面信息（包括 html、css 和 js），设置 MIME 类型并进行错误处理。

const http = require('http');
const fs = require('fs');
const path = require('path');// MIME类型（Multipurpose Internet Mail Extensions）是一种标准，用于表示文档、文件或字节流的性质和格式‌‌。
// 设置HTTP响应的 Content-Type 头部，以告诉浏览器如何处理返回的内容。
const mimes = {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',
}const server = http.createServer((request, response) => {// 获取请求路径const { pathname } = new URL(request.url, 'http://127.0.0.1');// 拼接完整的文件路径const filePath = __dirname + pathname;fs.readFile(filePath, (err, data) => {// 处理错误信息if (err) {response.setHeader('content-text', 'text/html;charset=utf-8');switch (err.code) {// 未找到case 'ENOENT':response.statusCode = 404;response.end('<h1>404 Not Found</h1>');// 无权限case 'EPERM':response.statusCode = 403;response.end('<h1>403 Forbidden</h1>');// 其他错误default:response.statusCode = 500;response.end('<h1>Internal Server Error</h1>');}return;}// 获取文件后缀名const ext = path.extname(filePath).slice(1);// 获取对应的类型const type = mimes[ext];if (type) {if (ext === 'html') {response.setHeader('content-text', type + ';charset=utf-8');}} else {response.setHeader('content-type', 'application/octet-stream');}// 响应文件内容response.end(data);})
})server.listen('9000', () => {console.log('服务已启动...');
})

在 index.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><link rel="stylesheet" href="./index.css" /></head><body><h2>前端杂货铺</h2><script src="./index.js"></script></body>
</html>

在 index.css 文件中编写如下内容：

h2 {color: orange;
}

在 index.js 文件中编写如下内容：

const h2 = document.querySelector('h2');
h2.style.fontSize = 20 + 'px';
h2.style.fontWeight = 200;

启动服务后，访问 9000 端口

https://i-blog.csdnimg.cn/direct/27e57aaa763d46319d174e28282dc544.png" alt="在这里插入图片描述" />

https://i-blog.csdnimg.cn/direct/2ea4c1c043b24f4d9f7bdf57f738df90.png" alt="在这里插入图片描述" />

https://i-blog.csdnimg.cn/direct/8efb2989c1224d9199ddff91d8caf4ea.png" alt="在这里插入图片描述" />

https://i-blog.csdnimg.cn/direct/04b30e44005d4b148f4e228523359c13.png" alt="在这里插入图片描述" />

总结

本篇文章我们首先学习了 HTTP 响应报文，包括设置响应状态码、设置响应状态的描述、设置响应头和响应体等；此外，我们还编写了一个 Demo，学习如何响应页面信息、认识了 MIME 并学会了如何进行错误处理等。

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

Node.js教程（菜鸟教程）
Node.js零基础视频教程（尚硅谷 · 李强）

https://i-blog.csdnimg.cn/blog_migrate/3cf97cbd47fc0cd482bf8e677dab493e.png" alt="在这里插入图片描述" />