node express.static 读取所有目录答案

【问题标题】：node express.static to read all directorynode express.static 读取所有目录
【发布时间】：2018-11-29 11:09:49
【问题描述】：

我正在做一个视频门户项目。视频在服务器上的不同文件夹中分类。我使用的是 nodejs 技术。我的目标是读取文件夹的功能，为文件夹中的所有视频内容提供服务。目前，下面的代码提供特定文件而不是文件夹。我将会感谢您的贡献。谢谢

  let express = require('express');
let bodyParser = require('body-parser');
let path = require('path');

let fs = require('fs');
var ejs=require('ejs');
let port = process.env.PORT || 4000;
let videosPath = './videos/';



let app = express();

/*let logger = function(req, res, next){
    console.log("logging...");
}
app.use(logger);*/

//view engine
app.set('view engine', 'ejs');
app.set('views', path.join( __dirname, 'views'));

//routing alternative
//app.use(express.static('public'));


// using body parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));



app.get('/videos/:id',function(req,res){

    fs.readdir(`./videos/${req.params.id}`, (err, files) => {
       console.log(files);
       res.render('pages/index',{videos:files,cateogry_id:req.params.id});
    });

});

app.get('/',function(req,res){
res.render('index');});


app.listen(port, function(){
    console.log("server runnung on 4000");
});

【问题讨论】：

标签： javascript express frameworks project

【解决方案1】：

使用EJS 进行模板渲染：

请参考link 获取教程，

在项目的根目录中创建 views 文件夹，我们在其中创建用于渲染的 ejs 页面

现在在 projectName/views/

中创建 index.ejs 文件

在您的 index.ejs 文件中

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>

  <h3><%=videos.length+'total videos'%><h3>

  <div class="row">

  <% videos.forEach(function(video)){ %>
       <div class="col-lg-4 my-2">
         <video width="320" height="240" autoplay>
            <source src="<%= '/videos/'+category_id+'/'+video%>" type="video/mp4">
         </video>
       </div>
  <%})%>
  </div>


</body>
</html>

使用fs module

我们将使用fs读取视频文件夹内容

在你的视频文件夹中，按 category_id 创建文件夹，里面放你的视频

点赞videos/1/myvideo.mp4

将此添加到您的 app.js 文件中

var fs = require('fs');
var ejs=require('ejs');

 // set the view engine to ejs
 app.set('view engine', 'ejs');


app.get('/category/:id',function(req,res){

    fs.readdir(`./videos/${req.params.id}`, (err, files) => {
       console.log(files);
       res.render('pages/index',{videos:files,cateogry_id:req.params.id});
    });

});

【讨论】：

我很感谢你 Saurabh Mistry 谢谢你的回答，但我需要更清楚的理解，因为这是我第一次使用 express 框架。我在运行代码时遇到异常。我还希望文件夹中的所有视频同时显示，即在阅读文件夹后，视频总数应显示在页面上。提前致谢。
@Simon Jerry，好的，我会详细告诉你
我很欣赏 Saurabh Mistry 先生。我会期待的。
感谢 Saurabh Mistry 先生，但运行上面的代码时出现以下错误：
@SimonJerry ，请在您的问题中添加您的错误