你知道吗？用NPM构建HTTP服务器，加速LeetCode刷题！

2023-11-02 10:01

短信预约 -IT技能 免费直播动态提醒

在LeetCode刷题的过程中，我们经常需要测试自己的代码，查看输出结果。通常的方法是在本地编写代码，然后复制粘贴到LeetCode网站上。但是这种方式并不高效，因为我们需要不断地切换窗口，复制粘贴代码。如果能够在本地搭建一个HTTP服务器，就可以通过浏览器直接访问本地代码，大大提高效率。本文将介绍如何使用NPM构建HTTP服务器，让LeetCode刷题更加流畅。

安装Node.js和NPM

首先需要安装Node.js和NPM。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以让JavaScript在服务器端运行。NPM是Node.js的包管理工具，可以方便地安装和管理依赖包。

在Node.js官网下载并安装Node.js，安装完成后运行以下命令检查是否安装成功：

node -v
npm -v

如果输出了版本号，则说明安装成功。

初始化项目

在命令行中进入一个空文件夹，然后执行以下命令初始化项目：

npm init

按照提示输入项目信息，比如项目名称、版本、作者等。最后会生成一个package.json文件，用于管理项目依赖。

安装依赖

接下来需要安装http-server依赖，用于启动HTTP服务器。在命令行中执行以下命令安装：

npm install http-server --save-dev

这里使用--save-dev参数将依赖保存到开发环境，因为HTTP服务器只在开发阶段使用，不需要在生产环境中部署。

创建服务器

在项目根目录下创建一个server.js文件，用于创建HTTP服务器。代码如下：

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

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  console.log(`Request for ${req.url} received.`);

  if (req.method === "GET") {
    let filePath = "." + req.url;
    if (filePath === "./") {
      filePath = "./index.html";
    }

    const extname = String(path.extname(filePath)).toLowerCase();
    const mimeTypes = {
      ".html": "text/html",
      ".js": "text/javascript",
      ".css": "text/css",
      ".json": "application/json",
      ".png": "image/png",
      ".jpg": "image/jpg",
      ".gif": "image/gif",
      ".svg": "image/svg+xml",
      ".wav": "audio/wav",
      ".mp4": "video/mp4",
      ".woff": "application/font-woff",
      ".ttf": "application/font-ttf",
      ".eot": "application/vnd.ms-fontobject",
      ".otf": "application/font-otf",
      ".wasm": "application/wasm"
    };

    const contentType = mimeTypes[extname] || "application/octet-stream";

    fs.readFile(filePath, function(error, content) {
      if (error) {
        if(error.code == "ENOENT"){
          fs.readFile("./404.html", function(error, content) {
            res.writeHead(404, { "Content-Type": "text/html" });
            res.end(content, "utf-8");
          });
        }
        else {
          res.writeHead(500);
          res.end("Sorry, check with the site admin for error: "+error.code+" ..
");
          res.end();
        }
      }
      else {
        res.writeHead(200, { "Content-Type": contentType });
        res.end(content, "utf-8");
      }
    });
  }
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

代码中使用了Node.js的内置模块http、fs和path，用于创建HTTP服务器、读取文件和解析路径。在服务器收到GET请求时，会解析请求路径，读取对应的文件，然后返回响应。

在项目根目录下创建一个index.html文件，用于测试服务器是否正常工作。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>HTTP Server Test</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

启动服务器

在命令行中执行以下命令启动HTTP服务器：

npm run server

这里使用了NPM的scripts功能，在package.json文件中添加以下配置：

"scripts": {
  "server": "http-server"
}

这样就可以通过浏览器访问http://127.0.0.1:3000/，看到Hello World!。

配置LeetCode刷题环境

现在可以将LeetCode刷题时需要测试的代码放到项目根目录下，通过浏览器访问http://127.0.0.1:3000/代码文件名即可测试代码。比如，如果有一个名为test.js的文件，可以通过http://127.0.0.1:3000/test.js访问。

总结

通过本文介绍的方法，可以在本地搭建一个HTTP服务器，大大提高LeetCode刷题的效率。当然，除了用于LeetCode刷题，这种方法也适用于其他需要测试代码的场景。

完整代码如下：

package.json

{
  "name": "http-server-demo",
  "version": "1.0.0",
  "description": "Demo for using http-server",
  "main": "index.js",
  "scripts": {
    "server": "http-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "http-server": "^0.12.3"
  }
}

server.js

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

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  console.log(`Request for ${req.url} received.`);

  if (req.method === "GET") {
    let filePath = "." + req.url;
    if (filePath === "./") {
      filePath = "./index.html";
    }

    const extname = String(path.extname(filePath)).toLowerCase();
    const mimeTypes = {
      ".html": "text/html",
      ".js": "text/javascript",
      ".css": "text/css",
      ".json": "application/json",
      ".png": "image/png",
      ".jpg": "image/jpg",
      ".gif": "image/gif",
      ".svg": "image/svg+xml",
      ".wav": "audio/wav",
      ".mp4": "video/mp4",
      ".woff": "application/font-woff",
      ".ttf": "application/font-ttf",
      ".eot": "application/vnd.ms-fontobject",
      ".otf": "application/font-otf",
      ".wasm": "application/wasm"
    };

    const contentType = mimeTypes[extname] || "application/octet-stream";

    fs.readFile(filePath, function(error, content) {
      if (error) {
        if(error.code == "ENOENT"){
          fs.readFile("./404.html", function(error, content) {
            res.writeHead(404, { "Content-Type": "text/html" });
            res.end(content, "utf-8");
          });
        }
        else {
          res.writeHead(500);
          res.end("Sorry, check with the site admin for error: "+error.code+" ..
");
          res.end();
        }
      }
      else {
        res.writeHead(200, { "Content-Type": contentType });
        res.end(content, "utf-8");
      }
    });
  }
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

index.html

<!DOCTYPE html>
<html>
<head>
  <title>HTTP Server Test</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

404.html

<!DOCTYPE html>
<html>
<head>
  <title>404 Not Found</title>
</head>
<body>
  <h1>404 Not Found</h1>
  <p>The requested URL was not found on this server.</p>
</body>
</html>

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

leetcode npm http

阅读原文内容投诉