Question

This seems like a pretty simple problem with Node JS + Express to resolve and I've done some research to resolve my issues but it came out didn't so I am here posting question!

All I am trying to do is render .ejs file from my routes. Just like any other basic Node JS app's file structure, my app is divided into

/public , /views , /routes/ ,node_modules , app.js , package.json

Inside my app.js , I have declared

app.set('views', path.join(__dirname, '/views'));
app.use('/', express.static(__dirname + '/public'));

Inside my /views I have subfolders called /characters and /series So it looks like /views/characters/sample.ejs

Now in my routes I have this ('ejs' has been declared as view engine in app.js),

app.get('/series' , function(req,res){

    res.render('series/some');


});

Problem: Before I moved some.ejs file into /series ,

res.render('some');

worked perfectly.But after moving the file into /series I've realized Node JS can't render (well..can't find the some.ejs file).I could just remove all the sub folders and just drop all .ejs files under /views but it would be messy.

PS. I've tried passing multiple directories under **app.js attempts.**

for example:

app.set('views', [path.join(__dirname, '/views'),path.join(__dirname, 
'/views/characters/'), path.join(__dirname, '/views/series/')]);

File Structure:

           /myapp
                ->/node_modules
                ->/public
                    ->/css
                    ->/fonts
                    ->/images
                    ->/js
                    ->/template
                     ->/video
                ->/routes
                     ->characters.js
                     ->etc.js
                     ->index.js
                     ->series.js

                ->/views
                      ->/characters
                         ->characters_index.ejs
                      ->/series
                         ->series_index.ejs
                      ->index.ejs
              ->app.js
              ->package.json

This the structure. So I want to render either series_index.ejs or characters_index.ejs

  <!DOCTYPE html>
  <html lang="en">

  <head>
      <title><% include ../public/template/title %></title>

       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">

        <% include ../public/template/scripts %>


    </head>

    <body id="series_body">

    <% include ../public/template/background_effect %>


<% include ../public/template/navigation_bar %>

 <div class="container-fluid">
    <div class="row content-fluid">


        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 " >
            <div id="series_description" class="content-fluid">
        <h2>Batman (1989)</h2>
        <a href="/series/batman" ><img  class="img-responsive" 
     src="http://localhost:3000/images/series/batman_1989.jpg" width="200px" 
    height="300px"/></a>
            </div>

             <div id="series_description" class="content-fluid">
        <h2>Batman and Robin (1997)</h2>
        <a href="/series/batman_and_robin"><img  class="img-responsive" 
      src="http://localhost:3000/images/series/batman_and_robin.png" 
   width="200px" height="300px"/></a>
            </div>

             <div id="series_description" class="content-fluid">
        <h2>The Dark Knight Rises (2012)</h2>
        <a href="/series/the_dark_knight_rises"><img  class="img-responsive" 
     src="http://localhost:3000/images/series/the_dark_knight_rises.jpg" 
   width="200px" height="300px"/></a>
            </div>

        </div>

         <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 " >

           <div id="series_description" class="content-fluid">
        <h2>Batman Returns (1992)</h2>
        <a href="/series/batman_returns"><img class="img-responsive" 
      src="http://localhost:3000/images/series/batman_returns.png" 
   width="200px" height="300px"/></a>
            </div>

             <div id="series_description" class="content-fluid"> 
        <h2>Batman Begins (2005)</h2>
        <a href="/series/batman_begins"><img  class="img-responsive" 
      src="http://localhost:3000/images/series/batman_begins.jpg" 
    width="200px" height="300px"/></a>
            </div>

        </div>

         <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 " >

           <div id="series_description" class="content-fluid">
        <h2>Batman Forever (1995)</h2>
        <a href="/series/batman_forever"><img  class="img-responsive" 
    src="http://localhost:3000/images/series/batman_forever.png" 
   width="200px" height="300px"/></a>
            </div>

             <div id="series_description" class="content-fluid">
        <h2>The Dark Knight (2008)</h2>
        <a href="/series/the_dark_knight"><img  class="img-responsive" 
    src="http://localhost:3000/images/series/the_dark_knight.jpg" 
  width="200px" height="300px"/></a>
            </div>

        </div>

     </div>

  </div>    

  <% include ../public/template/footer %>


</body>

</html>

Answer 1

我认为问题在于你的斜线，尝试设置这个视图数组：

    app.set('views', [path.join(__dirname, 'views'),
                      path.join(__dirname, 'views/characters/'), 
                      path.join(__dirname, 'views/series/')]);

然后正常调用您的视图： res.render('some');

您可以通过以下方式检查已装入的视图文件夹： app.get('views');

Answer 2

接受的答案对我不起作用，所以我找到了一种方法来完成这项工作。

我不知道OP，但是当我尝试渲染一个子目录中的视图时，我得到了一个：

ENOENT: no such file or directory。

真正的问题是布局路径！

我使用的是布局，所以我的索引文件顶部有一个“extends layouts / main”;

这是错误的根本原因！

由于渲染视图位于目录结构的更深处，我需要将罪魁祸首更改为“extends ../ layouts / main”。

完成此修改并重新启动我的节点服务器后，一切都很好！

希望这有助于你们中的一些人！

(Node JS + Express) How do I render a file that is inside /views/subfolder/?

2 个答案: