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 响应报文](#设置 HTTP 响应报文)
- [Simple Demo](#Simple Demo)
- 总结

前言

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

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

设置 HTTP 响应报文

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

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

javascript 复制代码

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 类型并进行错误处理。

javascript 复制代码

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 文件中编写如下内容：

javascript 复制代码

<!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 文件中编写如下内容：

javascript 复制代码

h2 {
    color: orange;
}

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

javascript 复制代码

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

启动服务后，访问 9000 端口

总结

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

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

参考资料：

Node.js教程（菜鸟教程）

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