带参数和部分的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视图中引用的资源。