首先安装依赖
npm install
这个中间间的功能是吧用户设置的目录引射在根路径“/”下,快速解决目录下所有文件的路由问题。
此中间件已经被express集成,也可以直接采用express.static()实现相同功能,无需额外安装serve-static。东西都是一样的,这里还是使用serve-static来介绍,实际使用建议使用express.static()。
serveStatic(root, [options])方法接收两个参数,
第一个是文件的目录,也就是你网页文件的目录,当用户访问服务器根目录时候,会从这个目录下找index.html文件。如果没找会调用next()转到下一个中间件处理。
第二个参数options有以下配置,基本上是设置响应头的配置,
{
/* default=true */
/* 是否开启accept-ranges */
"acceptRanges": true,
/* default = 'ignore' */
/* 当用户申请'.'开头的文件或目录处理方式 */
/* 'allow' 允许 */
/* 'deny' 禁用 返回403响应代码并调用next() */
/* 'ignore' 忽略 返回404并调用next() */
"dotfiles": "ignore",
/* default = true */
/* 是否开启etag */
"etag": true,
/* default = false */
/* 设置文件扩展名,当用户输入的路径未找到文件时,则将扩展名添加到文件名进行搜索,匹配第一个 */
/* 如制定一个后缀名的文件: ['html', 'htm'] */
"extensions": false,
/* default = true */
/* 当客户端请求有错误时,如请求未存在的文件,设置为true就直接调用next()进入下一步处理,false的话直接返回next(err)进入404处理。 */
"fallthrough": true,
/* default = true */
/* false会忽略immutable和maxAge */
"cacheControl": true,
/* defalut = false */
/* 在cache-control上添加immutable的属性,需要开启cacheControl */
"immutable": false,
/* default = 0 */
/* 设置在cache-control上的maxAge属性,需要开启cacheControl */
"maxAge": 0,
/* default = ['index.html'] */
/* 当用户未制定文件名默认的文件,开启时会搜寻index.html,也可以设置自定义的入口文件 */
"index": ['index.html'],
/* default = true */
/* 是否开启lastModified */
"lastModified": true,
/* default = true */
/* 如果请求路径是目录的话,在目录后添加/(如果该目录有默认文件,就会找寻默认文件) */
"redirect": true,
/* 自定义headers */
/* res 响应对象 */
/* path 发送文件的路径 */
/* stat 正在发送的文件的 stat 对象 */
"setHeaders": fn(res, path, stat)
}
serveStatic可以多次被app.use()使用,按照顺序先查找第一个,找到第一个会忽略其后的serveStatic设置。如果第一个目录无效就会调用第二个,依次类推。但只有一个能生效。这样的使用场景是设置一个备用的目录。
设置一个文件资源管理服务器,用目录结构展示
javascript
html
Css
Node.js
express
javascript
html
Css
Node.js
express
静态托管目录为public目录,在public目录下和其下的每一个子目录都有index.html文件,当用户访问当前目录时就会进入当前目录的index.html文件。目的是在这些index.html文件中,写入的结构是当前目录下所有文件的链接,当点击该链接就可进入该文件。
view下的base.html是生成index.html的模板文件,当服务器启动时候,自动会按照模板和目录下文件的情况自动生成index.html文件。
生成和读取文件用到fs模块,写入页面是动态的,我这里并没有打算使用模板引擎,自己做个简单的方法。
除了涉及到的技术,尽量不要使用库和框架来实现,多使用js原生的方法来实现。
这里只做学习的简单应用,还有很多细节可以优化,如参数化api,ul生成算法优化及分离模块等,完成品可以应用到服务器的文件可视化解决方案。
页面渲染有多种实现方式,我这里是后端进行处理,当然还可以使用前端的方式实现局部更新,给到客户端数据进行前端渲染。好处是不用每个文件夹新建index.html文件。具体方式大家可以自己试试看。
serve-static中间件处理后的目录,可以不用每一个文件设置返回的类型、缓存等等信息,可以很快捷托管文件夹中所有的文件。当你打开这些文件时候,也能返回正确的信息,简化了很多的操作过程。在加载html中包含其他需要加载的css、js、图片等等都可以都放在托管的文件夹中,总能正确显示。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。