使用express实现静态资源托管并且可以访问整个目录下的文件

1. 使用express实现静态资源托管还是挺简单的只需要使用express的static中间件即可
2. 代码如下：

   const express = require('express');
   const app = express();
   const path = require('path');
   
   //----- 配置静态资源托管 -----
   app.use('/', express.static(path.join(__dirname, 'public')));
   
   //----- 监听端口 -----
   const port = process.env.port || 3000;
   app.listen(port, (error) => {
          
       console.log(`server running at port ${
            port}`);
   });
   

3. 但是上面的实现存在着一个极大的问题，那就是一次只能访问一个文件，无法访问整个目录。并且每次访问文件都要手动在地址栏输入地址，这样太麻烦了，要是能像Tomcat服务器那样直接展示出整个目录下的文件就好了。
4. 为了实现上面的需求，我们需要使用 node 的第三方包 serve-index
5. serve-index npm资源链接
6. express框架使用 serve-index
   • 安装：npm install serve-index --save
   • 导入：const serveIndex = require('serve-index');
   • 作为express中间件使用 app.use('/', serveIndex(静态资源路径), {'icons': true}));
7. 具体实现代码:

   const express = require('express');
   const app = express();
   const path = require('path');
   const serveIndex = require('serve-index');
   
   //----- 配置静态资源托管 -----
   // 静态目录
   app.use('/', serveIndex(path.join(__dirname, 'public'), {
          'icons': true}));
   app.use('/', express.static(path.join(__dirname, 'public')));
   
   //----- 监听端口 -----
   const port = process.env.port || 3000;
   app.listen(port, (error) => {
          
       console.log(`server running at port ${
            port}`);
   });
   
   

8. 浏览器效果：
   
9. 若需要查看其它目录，只需要改变 serveIndex和 express.static的路径即可，如想要查看根目录下的所有文件可以使用如下代码：

   app.use('/', serveIndex(__dirname, {
          'icons': true}));
   app.use('/', express.static(__dirname));
   

10. 浏览器效果：