带有参数和部分的 EJS 页面挂起答案

【问题标题】：EJS pages with parameters and partials hang带有参数和部分的 EJS 页面挂起
【发布时间】：2018-01-10 23:52:59
【问题描述】：

我的 ejs 页面上发生了一个奇怪的问题。当我在使用路由参数加载的任何页面上包含页眉和页脚部分时，页面会挂起。当我在页面加载时点击停止按钮时，页面加载正常。在没有路由参数的页面上，我没有问题。

我在节点中收到以下错误（页面加载了一个名为 eventid 的路由参数）：

    params for results to find by eventid:  { eventid: 'app.css' }
    SOMETHING WENT WRONG GETTING RESULT:  { CastError: Cast to ObjectId 
failed for value "app.css" at path "event_id" for model "results"

发布此问题后，我在下面添加了评论。我想我会在这里添加一些信息以提供更多详细信息。标题部分中的 app.css 链接是我的问题的原因。当我将其注释掉时，它工作正常。在节点中，我使用以下行将文件包含在我的资源文件夹中，该文件夹位于我的应用程序的根目录中。这工作正常，除非我使用部分页脚加载它。 app.use(express.static(path.join(__dirname, 'resources')))

示例页面...

<% include ../partials/header %>

<h3>Sample page</h3>

<% include ../partials/footer %>

标题部分...

<html>
    <head>
            <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

            <link rel="stylesheet" type="text/css" href="app.css">
    </head>
    <body>  
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="google.com"><i class="fa fa-futbol-o"></i> PESers Only</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="/events">Link 1</a></li>
                        <li><a href="/results">Link 2</a></li> 
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/register">Register</a></li>
                        <li><a href="/login">Log In</a></li>
                        <li><a href="/logout">Log Out</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- <div id="wrapper"> -->
            <div class="container">

页脚部分...

           </div> <!-- close container -->
        <!-- </div> close wrapper -->
    </body>
    <footer class="footer">
        <div class="footer-content list-inline">  
                 Footer text | Contact Us
        </div>
    </footer>
</html>

【问题讨论】：

所以问题出在我的标题部分中的 app.css 声明。当我将其注释掉时，我在带有路由参数的页面上没有任何挂起。在节点中，在带有路由参数的页面上，我的参数被分配了 app.css { eventid: 'app.css' }。为什么会发生这种情况？如何正确包含我的 app.css 页面？

标签： node.js ejs

【解决方案1】：

事实证明，我遇到的问题与外部文件的引用有关（在本例中是我的 app.css 文件）。我在我的 ejs 标头部分中使用：<link rel="stylesheet" type="text/css" href="app.css"> 引用它，但是当我在 href 中添加反斜杠时错误已修复：<link rel="stylesheet" type="text/css" href="/app.css">。

本质上，当引用 app.use (app.use(express.static(__dirname + "/resources"));) 中声明的文件夹中的 css 文件等资源时，您需要使用反斜杠来引用应用程序的根目录，然后访问您计划引用的资源在 ejs 视图中。

【讨论】：