最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

运维笔记admin15浏览0评论

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

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

我的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=".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"><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文件)。我在我的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视图中引用的资源。

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论