Node.js学习之静态资源服务器

　　相关：《nodejs 教程》

　　在创建 HTTP 服务器实现了一个最简单的静态资源服务器，可以对代码进行写改造，增加文件夹预览功能，暴露出一些配置，变成一个可定制的静态资源服务器模块
 

　　模块化

　　可定制的静态资源服务器理想的使用方式应该是这样的

　　const StaticServer = require('YOUR_STATIC_SERVER_FILE_PATH'); const staticServer = new StaticServer({ port: 9527, root: '/public', }); staticServer.start(); staticServer.close();

　　这样的使用方式就要求代码实现模块化，Node.js 实现一个模块非常简单

　　完整代码：
执行 npm 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()) { // 如果是文件夹则遍历文件夹，生成改文件夹内的文件树 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 代码修改记录可以清晰看到本次的变更：

　　同样在项目根目录执行 npm run test ，使用浏览器访问 127.0.0.1:9527 可以看到目录文件的展示

完整代码：

　　编程教学！！