Question

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

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

<% include ../partials/header %>

<h3>Sample page</h3>

<% include ../partials/footer %>

我在发布此问题后在下面添加了评论。我想我会在这里添加一些信息以提供更多细节。标题部分中的app.css链接是导致我出现问题的原因。当我评论它时它工作正常。在节点中，我使用以下行在我的资源文件夹中包含文件，该文件位于我的应用程序的根目录中。这工作正常，除非我使用局部页脚加载它。 <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>  <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 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>

标题部分......

RequestBase

页脚部分...

class RequestBase {
  _responseType: ResponseBase
}

class ResponseBase {}

class FindUserRequest implements RequestBase {
  _responseType: FindUserResponse
  user_id: string
  constructor(user_id: string) {
    this.user_id = user_id
  }
}

class FindUserResponse {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const request = new FindUserRequest("foo")
const response = performRequest(request) // FindUserResponse | undefined

function performRequest<T extends RequestBase>(req: T): T["_responseType"] | undefined {
  if (req instanceof FindUserRequest) {
    return new FindUserResponse("foo", 23)
  }
}

Answer 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视图中引用。

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

1 个答案: