【问题标题】:(Node JS + Express) How do I render a file that is inside /views/subfolder/?(Node JS + Express)如何渲染 /views/subfolder/ 中的文件?
【发布时间】:2017-04-06 16:50:55
【问题描述】:

这似乎是 Node JS + Express 解决的一个非常简单的问题,我已经做了一些研究来解决我的问题,但结果并没有,所以我在这里发布问题!

我要做的就是从我的路由中渲染 .ejs 文件。就像任何其他基本 Node JS 应用程序的文件结构一样,我的应用程序分为

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

在我的 app.js 中,我声明了

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

在我的 /views 中,我有名为 /characters/series 的子文件夹 所以它看起来像 /views/characters/sample.ejs

现在在我的路线中,我有这个 ('ejs' 已在 app.js 中声明为视图引擎)

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

    res.render('series/some');


});

问题:在我将 some.ejs 文件移动到 /series 之前,

res.render('some'); 

完美运行。但是在将文件移动到 /series 后,我意识到 Node JS 无法呈现(嗯..找不到 some.ejs文件)。我可以删除所有子文件夹,然后将所有 .ejs 文件放在 /views 下,但这会很混乱。

附言。我尝试在 **app.js 尝试下传递多个目录。**

例如:

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

文件结构:

           /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

这个结构。所以我想渲染 series_index.ejscharacters_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>

【问题讨论】:

    标签: node.js express


    【解决方案1】:

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

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

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

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

    【讨论】:

    • 嗨,Jakub。我刚试过,还是一样。所以出于好奇,我做了 console.log(app.get('views')); 。路径都正确设置,但奇怪的是它仍然找不到“一些”......
    • 您能否提供此日志以及您项目的完整结构(带扩展名)?
    • 我通过添加带有扩展名的文件结构来编辑我的问题,请检查一下。
    • 您可以尝试按以下顺序设置 app.js 文件:views->view engine->express static?
    • 知道了,你有:,但是使用这个设置,你会去1个目录应用程序,所以你在views文件夹中搜索标题文件,不在模板文件夹中。您必须在新目录中的文件中将所有出现的 ../ 更改为 ../../
    【解决方案2】:

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

    我不知道 OP,但是当我尝试渲染子目录中的视图时,我得到了:

    ENOENT: no such file or directory.

    真正的问题是布局路径

    我使用的是布局,所以我的索引文件顶部有一个“扩展布局/主”;

    这是错误的根本原因!

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

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

    希望这对你们中的一些人有所帮助!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-01-13
      • 2011-11-28
      相关资源
      最近更新 更多