serve-index用法、实现原理(源码解读)
本文主要讲解serve-index的用法和实现原理(源代码分析)。
一 说明
serve-index的功能是将文件夹中文件列表显示到浏览器中。
serve-index是一个NodeJS模块,可以通过NPM安装。
二 安装方法
$ npm install serve-index --save
三 使用方法
通过ExpressJS创建静态服务器时,使用serve-index方法如下:
var express = require('express');
var serveIndex = require('serve-index');
var app = express(); app.use(express.static('staticServer')); app.use(serveIndex('staticServer',{ 'icons': true })); var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port; console.log('Example app listening at http://%s:%s', host, port);
});
通过nodeJS的serve-static创建静态服务器时,用法如下:
var finalhandler = require('finalhandler')
var http = require('http')
var serveIndex = require('serve-index')
var serveStatic = require('serve-static') // Serve directory indexes for public/ftp folder (with icons)
var index = serveIndex('public/ftp', {'icons': true}) // Serve up public/ftp folder files
var serve = serveStatic('public/ftp') // Create server
var server = http.createServer(function onRequest(req, res){
var done = finalhandler(req, res)
serve(req, res, function onNext(err) {
if (err) return done(err)
index(req, res, done)
})
}) // Listen
server.listen(3000)
四 接口说明
serveIndex(path,options)
1.功能说明:
创建一个中间件函数。
2.返回值:
中间件函数,这个中间件创建了文件夹中所有文件的索引目录。
3.参数:
path:
静态文件服务器的路径地址,一般与创建静态服务器地址一致。
options:
ServeIndex在options对象中接受这些属性:
filter
类型:Function;默认值为false
。
功能:文件夹中每个文件都调用filter函数进行过滤,实际就是让开发人员可以决定哪些文件显示哪些不显示,也可以改变文件名。如果该函数返回false(或者空字符串)【注意:只测试了这两种】,则不显示该文件夹。
参数:filter(filename, index, files, dir)
filename
是文件名,index
是数组索引,files
是文件数组,是文件dir
所在的绝对路径。
下边是filter的一个示例,用于过滤不显示READEME.md文件。
var options = {
icons : true,
filter : serveIndexFilter
}; function serveIndexFilter(filename, index, list, path) {
console.log(filename);
console.log(index);
console.log(list);
console.log(path); // 过滤README.md文件,如果是该文件,就不显示
if (filename.match('README.md')) {
return '';
} else {
return filename;
}
} app.use(serveIndex('staticServer', options));
hidden
类型:Boolean
默认值:false
功能:是否隐藏文件名是“.”的文件。设置为true时,显示;设置为false时,不显示。
icons
显示文件图标。默认为false
。
stylesheet
CSS样式表的可选路径。默认为内置样式表。
template
HTML模板的可选路径或将呈现HTML字符串的函数。默认为内置模板。
给定字符串时,该字符串将用作要加载的文件路径,然后在模板中替换以下标记:
{directory}
使用目录的名称。{files}
使用无序的文件链接列表的HTML。{linked-path}
使用目录链接的HTML。{style}
使用指定的样式表和嵌入的图像。
当作为函数给出时,该函数被调用为template(locals, callback)
,并且需要调用它callback(error, htmlString)
。以下是提供的当地人:
directory
是显示的目录(/
根在哪里)。displayIcons
是否应该呈现图标的布尔值。fileList
是目录中的已排序文件数组。该数组包含具有以下属性的对象:name
是文件的相对名称。stat
是fs.Stats
文件的对象。
path
是完整的文件系统路径directory
。style
是默认样式表或stylesheet
选项的内容。viewName
是view
选项提供的视图名称。
view
类型:String
功能:显示模式。可选值:"tiles"、"details"
。默认为tiles
。
说明:设置为details时,显示样子如下:
五 实现原理
通过上边用法可以知道,serveIndex方法返回一个中间件函数,这个中间件函数会在服务器接收到请求时执行,这个函数的主要功能是根据请求url地址,读取本地文件夹中对应的文件,创建一个HTML文件,生成文件列表DOM、样式等插入HTML文件中,并将这个HTML作为请求内容返回给浏览器显示,这样就实现了将文件夹内容显示到浏览器中了。
详细步骤如下:
5.1.serveIndex方法创建并返回中间件函数,该中间件函数作为app.use()的参数,这样就相当于给服务器注册了一个回调函数,当有请求过来时,就会调用该函数。
app.use(serveIndex('staticServer', options));
serveIndex的缩略代码(省去了返回的函数代码)如下:
function serveIndex(root, options) {
var opts = options || {}; // root required
if (!root) {
throw new TypeError('serveIndex() root path required');
} // resolve root to absolute and normalize
var rootPath = normalize(resolve(root) + sep); var filter = opts.filter;
var hidden = opts.hidden;
var icons = opts.icons;
var stylesheet = opts.stylesheet || defaultStylesheet;
var template = opts.template || defaultTemplate;
var view = opts.view || 'tiles'; return function (req, res, next) {
//...
};
};
5.2 当服务器受到浏览器请求时,会执行上边返回的中间的函数,该函数主要功能是根据请求url地址,读取本地文件夹中对应的文件,创建一个HTML文件,生成文件列表DOM、样式等插入HTML文件中,并将这个HTML作为请求内容返回给浏览器显示,这样就实现了将文件夹内容显示到浏览器中了。
重点代码片段如下:
通过NodeJS的fs文件接口读取请求路径中的文件:
fs.readdir(path, function(err, files){
if (err) return next(err);
if (!hidden) files = removeHidden(files);
if (filter) files = files.filter(function(filename, index, list) {
return filter(filename, index, list, path);
});
files.sort(); // content-negotiation
var accept = accepts(req);
var type = accept.type(mediaTypes); // not acceptable
if (!type) return next(createError(406));
serveIndex[mediaType[type]](req, res, files, next, originalDir, showUp, icons, path, view, template, stylesheet);
});
上边代码中最后调用的serveIndex[mediaType[type]],实际是调用serveIndex.html()方法,该方法主要做了2件事:创建HTML文件和文件列表DOM,并设置给请求头的body中。
fs.readFile(stylesheet, 'utf8', function (err, style) {
if (err) return next(err); // create locals for rendering
var locals = {
directory: dir,
displayIcons: Boolean(icons),
fileList: fileList,
path: path,
style: style,
viewName: view
}; // render html
render(locals, function (err, body) {
if (err) return next(err);
send(res, 'text/html', body)
});
});
function createHtmlRender(template) {
return function render(locals, callback) {
// read template
fs.readFile(template, 'utf8', function (err, str) {
if (err) return callback(err); var body = str
.replace(/\{style\}/g, locals.style.concat(iconStyle(locals.fileList, locals.displayIcons)))
.replace(/\{files\}/g, createHtmlFileList(locals.fileList, locals.directory, locals.displayIcons, locals.viewName))
.replace(/\{directory\}/g, escapeHtml(locals.directory))
.replace(/\{linked-path\}/g, htmlPath(locals.directory)); callback(null, body);
});
};
}
function send (res, type, body) {
// security header for content sniffing
res.setHeader('X-Content-Type-Options', 'nosniff') // standard headers
res.setHeader('Content-Type', type + '; charset=utf-8')
res.setHeader('Content-Length', Buffer.byteLength(body, 'utf8')) // body
res.end(body, 'utf8')
}
参考资料&内容来源:
Express官网:http://www.expressjs.com.cn/en/resources/middleware/serve-index.html
serve-index用法、实现原理(源码解读)的更多相关文章
- Vue 源码解读(4)—— 异步更新
前言 上一篇的 Vue 源码解读(3)-- 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter.setter,从而拦截对数据的访问和设置. 当对 ...
- http-proxy-middleware使用方法和实现原理(源码解读)
本文主要讲http-proxy-middleware用法和实现原理. 一 简介 http-proxy-middleware用于后台将请求转发给其它服务器. 例如:我们当前主机A为http://loca ...
- Webpack探索【16】--- 懒加载构建原理详解(模块如何被组建&如何加载)&源码解读
本文主要说明Webpack懒加载构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack懒加载构建原理. 本文使用的 ...
- Webpack探索【15】--- 基础构建原理详解(模块如何被组建&如何加载)&源码解读
本文主要说明Webpack模块构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack的基础构建原理. 本文使用的W ...
- 2,MapReduce原理及源码解读
MapReduce原理及源码解读 目录 MapReduce原理及源码解读 一.分片 灵魂拷问:为什么要分片? 1.1 对谁分片 1.2 长度是否为0 1.3 是否可以分片 1.4 分片的大小 1.5 ...
- Vue 源码解读(3)—— 响应式原理
前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过 ...
- 第二十三课:jQuery.event.add的原理以及源码解读
本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...
- Alamofire源码解读系列(四)之参数编码(ParameterEncoding)
本篇讲解参数编码的内容 前言 我们在开发中发的每一个请求都是通过URLRequest来进行封装的,可以通过一个URL生成URLRequest.那么如果我有一个参数字典,这个参数字典又是如何从客户端传递 ...
- Alamofire源码解读系列(八)之安全策略(ServerTrustPolicy)
本篇主要讲解Alamofire中安全验证代码 前言 作为开发人员,理解HTTPS的原理和应用算是一项基本技能.HTTPS目前来说是非常安全的,但仍然有大量的公司还在使用HTTP.其实HTTPS也并不是 ...
- SDWebImage源码解读 之 UIImage+GIF
第二篇 前言 本篇是和GIF相关的一个UIImage的分类.主要提供了三个方法: + (UIImage *)sd_animatedGIFNamed:(NSString *)name ----- 根据名 ...
随机推荐
- Spring MVC通过Pageable对象和PageableDefault注解获取分页信息(MongoDB通过Pageable来操作分页)
说明:Pageable同时也能用于操作MongoDB的分页. PageableSpring Data库中定义的一个接口,该接口是所有分页相关信息的一个抽象,通过该接口,我们可以得到和分页相关所有信息( ...
- Docker 容器网络
默认网络 当安装docker时,它会自动创建3个网络.可以使用docker network ls 来查看. zane@zane-V:~$ docker network ls NETWORK ID ...
- Scut游戏服务器引擎6.1.5.6发布,直接可运行,支持热更新
1. 增加exe版(console),web版本(IIS)的游戏服宿主程序 2. 增加Model支持脚本化,实现不停服更新 3. 增加Language支持脚本化 4. 修改Sns与Pay Center ...
- 2017.2.28 activiti实战--第七章--Spring容器集成应用实例(五)普通表单
学习资料:<Activiti实战> 第七章 Spring容器集成应用实例(五)普通表单 第六章中介绍了动态表单.外置表单.这里讲解第三种表单:普通表单. 普通表单的特点: 把表单内容写在 ...
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...
- 地图之CLLocationManager的使用 定位功能使用
1.iOS8曾经使用CLLocationManager 1.导入头文件 <CoreLocation/CoreLocation.h> 2.创建位置管理者 CLLocationManager ...
- js 小总结
数组操作 创建数组:var standTerm = new Array("维护","维修"); var arr = new Array(); 数组长度:leng ...
- [译]RabbitMQ教程C#版 - “Hello World”
[译]RabbitMQ教程C#版 - “Hello World” 先决条件本教程假定RabbitMQ已经安装,并运行在localhost标准端口(5672).如果你使用不同的主机.端口或证书,则需 ...
- MySQL系列:innodb源代码分析之线程并发同步机制
innodb是一个多线程并发的存储引擎,内部的读写都是用多线程来实现的,所以innodb内部实现了一个比較高效的并发同步机制. innodb并没有直接使用系统提供的锁(latch)同步结构,而是对其进 ...
- cmake学习之-configure_file
一.系统版本 cmake version: 3.5.2 系统版本: Ubuntun 16.04 cmake docment: 3.14.4 最后更新: 2019-05-30 二.指令说明 config ...