Node.js lernt den statischen Ressourcenserver

Verwandte Empfehlungen: „nodejs Tutorial“

implementiert den einfachsten statischen Ressourcenserver beim Erstellen eines HTTP-Servers. Sie können den Code schreiben und ändern, eine Ordnervorschaufunktion hinzufügen, einige Konfigurationen verfügbar machen und ihn in einen umwandeln Anpassbares statisches Ressourcenservermodul

Modularität

Der ideale Weg, den anpassbaren statischen Ressourcenserver zu verwenden, sollte so sein

const StaticServer = require('YOUR_STATIC_SERVER_FILE_PATH');

const staticServer = new StaticServer({
	port: 9527,
  root: '/public',
});

staticServer.start();

staticServer.close();

Diese Art der Verwendung erfordert, dass der Code modularisiert wird. Es ist sehr einfach, ein Modul in Node zu implementieren. js

const http = require('http');
const fs = require('fs');
const path = require('path');
const mime = require('mime-types');

const defaultConf = require('./config');

class StaticServer {
  constructor(options = {}) {
    this.config = Object.assign(defaultConf, options);
  }

  start() {
    const { port, root } = this.config;

    this.server = http.createServer((req, res) => {
      const { url, method } = req;

      if (method !== 'GET') {
        res.writeHead(404, {
          'content-type': 'text/html',
        });
        res.end('请使用 GET 方法访问文件！');
        return false;
      }

      const filePath = path.join(root, url);
      fs.access(filePath, fs.constants.R_OK, err => {
        if (err) {
          res.writeHead(404, {
            'content-type': 'text/html',
          });
          res.end('文件不存在！');

        } else {
          res.writeHead(200, {
            'content-type': mime.contentType(path.extname(url)),
          });
          fs.createReadStream(filePath).pipe(res);
        }
      });
    }).listen(port, () => {
      console.log(`Static server started at port ${port}`);
    });
  }

  stop() {
    this.server.close(() => {
      console.log(`Static server closed.`);
    });
  }
}

module.exports = StaticServer;

Vollständiger Code: https://github.com/Samaritan89/static-server/tree/v1
Führen Sie npm run test zum Testen ausnpm run test 可以测试

支持文件夹预览

当访问的路径是文件夹的时候程序会报错

Error: EISDIR: illegal operation on a directory, read
Emitted 'error' event on ReadStream instance at:
    at internal/fs/streams.js:217:14
    at FSReqCallback.wrapper [as oncomplete] (fs.js:524:5) {
  errno: -21,
  code: 'EISDIR',
  syscall: 'read'
}

因为 fs.createReadStream 尝试读取文件夹，需要兼容下访问路径是文件夹的时候，返回一个目录页，也就是在 fs.access 之后判断文件类型

fs.access(filePath, fs.constants.R_OK, err => {
  if (err) {
    res.writeHead(404, {
      'content-type': 'text/html',
    });
    res.end('文件不存在！');

  } else {
    const stats = fs.statSync(filePath);
    const list = [];
    if (stats.isDirectory()) {
      // 如果是文件夹则遍历文件夹，生成改文件夹内的文件树
      // 遍历文件内容，生成 html

    } else {
      res.writeHead(200, {
        'content-type': mime.contentType(path.extname(url)),
      });
      fs.createReadStream(filePath).pipe(res);
    }
  }
});

遍历生成 html 部分需要用到 文件夹操作 章节介绍的知识，为了方便生成 HTML，demo 使用了 Handlebar 模板引擎，主要逻辑

if (stats.isDirectory()) {
  // 如果是文件夹则遍历文件夹，生成改文件夹内的文件树
  const dir = fs.opendirSync(filePath);
  let dirent = dir.readSync();
  while (dirent) {
    list.push({
      name: dirent.name,
      path: path.join(url, dirent.name),
      type: dirent.isDirectory() ? 'folder' : 'file',
    });
    dirent = dir.readSync();
  }
  dir.close();

  res.writeHead(200, {
    'content-type': 'text/html',
  });

  // 对文件顺序重排，文件夹在文件前面，相同类型按字母排序，不区分大小写
  list.sort((x, y) => {
    if (x.type > y.type) {
      // 'folder' > 'file'， 返回 -1，folder 在 file 之前
      return -1;
    } else if (x.type == y.type) {
      return compare(x.name.toLowerCase(), y.name.toLowerCase());
    } else {
      return 1;
    }
  });

  // 使用 handlebars 模板引擎，生成目录页面 html
  const html = template({ list });
  res.end(html);
}

通过 git 代码修改记录可以清晰看到本次的变更：https://github.com/Samaritan89/static-server/commit/5565788dc317f29372f6e67e6fd55ec92323d0ea

同样在项目根目录执行 npm run test ，使用浏览器访问 127.0.0.1:9527
rrreee
Da fs.createReadStream versucht, den Ordner zu lesen, ist Kompatibilität erforderlich, wenn der Zugriffspfad ein Ordner ist und eine Verzeichnisseite zurückgibt, dh der Dateityp wird danach bestimmt fs.access

rrreee

Der Teil des Durchlaufens und Generierens von HTML erfordert die im Kapitel „Ordnerbetrieb“ eingeführten Kenntnisse. Um die Generierung von HTML zu erleichtern, verwendet die Demo die Hauptlogik der Handler-Vorlage >rrreeekann durch den Git-Code-Änderungsdatensatz deutlich gesehen werden. Diese Änderung: https://github.com/Samaritan89/static-server/commit/5565788dc317f29372f6e67e6fd55ec92323d0ea

Führen Sie außerdem npm run test im Projekt aus Stammverzeichnis und verwenden Sie einen Browser, um auf 0.1:9527 zuzugreifen. Sie können die Anzeige der Verzeichnisdateien sehen 🎜🎜🎜Vollständiger Code: https://github.com/Samaritan89/static-server/tree /v2🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmierunterricht 🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonNode.js lernt den statischen Ressourcenserver. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!