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('服务启动成功...')
})
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 端口
总结
本篇文章我们首先学习了 HTTP 响应报文，包括设置响应状态码、设置响应状态的描述、设置响应头和响应体等；此外，我们还编写了一个 Demo，学习如何响应页面信息、认识了 MIME 并学会了如何进行错误处理等。
好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！
参考资料：
- Node.js教程（菜鸟教程）
- Node.js零基础视频教程（尚硅谷 · 李强）
