提问者:小点点

Chrome中未加载资源


我正在使用EJS来呈现HTML。 但是对于一条路由,同样的HTML内容会被加载,当尝试使用另一条路由时,chrome显示CSS文件的状态为已取消,js文件的状态代码为404。 我不知道哪里出了问题。 它适用于“/”路由,但不适用于“/admin/students”路由。 请帮帮我。 在表中,我正在打印通过route发送的数据。 在“/”路由中,我只是发送一个文本作为数据,其他一切都与给出下面的代码相同。

 app.get('/',(req,res)=>{
 res.render('layout',{data:"IT is working"});
 });

 app.get('/admin/students',(req,res)=>{
  Student.find({},function(err,result){
    if(err)
        console.log(err);
    else
        res.render('student',{st:result});
  })
 })


<!DOCTYPE HTML>
<html lang="zxx" class="no-js">

<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/fav.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Blog Home</title>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700" 
rel="stylesheet" />
<!--
  CSS
  =============================================
-->

<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />

</head>

<body>
<!-- ================ Start Header Area ================= -->

<header class="default-header">
<nav class="navbar navbar-expand-lg  navbar-light">
  <div class="container">
    <a class="navbar-brand" href="index.html">
    <img src="img/logo.png" alt="" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
     target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="lnr lnr-menu"></span>
      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse justify-content-end align-items-center" 
    id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/admin">Admin</a></li>
        <li><a href="#">User</a></li>
      
      
      </ul>
    </div>
  </div>
</nav>

</header>

<section class="banner-area" style="background: url('img/home.png')" >
<div class="container">
  
  <div class="row justify-content-center align-items-center">
    <div class="col-lg-12 banner-right">
      <h1 class="text-white">
          Blog Home
      </h1>
      <p class="mx-auto text-white  mt-20 mb-40">
        In the history of modern astronomy, there is probably no one greater leap forward than the 
        building.
      </p>
      <div class="link-nav">
        <span class="box">
          <a href="index.html">Home </a>
          <i class="lnr lnr-arrow-right"></i>
          <a href="blog-home.html">Blog Home</a>
        </span>
      </div>
    </div>
  
  </div>
  </div>
  </section>

  <table class="table">
  <thead class="thead-dark">
  <tr>
  <th scope="col">Reg.No.</th>
  <th scope="col">Name</th>
  <th scope="col">Branch</th>
  <th scope="col">Handle</th>
   </tr>
  </thead>
  <body>

  <% st.map(rec=>{ %>
  <tr style="color:black">
    <th scope="row"><%=rec._id%></th>
    <td><%=rec.sname%></td>
    <td><%=rec.branch%></td>
    <td><form action="/students/<%=rec._id%>/edit}"></form></td>
  </tr>
   <% }) %>

  </tbody>
  </table>



  <footer class="footer-area section-gap">

  <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | 
  This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a 
    href="https://colorlib.com" target="_blank">Colorlib</a>
   <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
    
  </footer>
  <!-- ================ End footer Area ================= -->

  <script src="js/vendor/jquery-2.2.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" 
  integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
  crossorigin="anonymous"></script>
   <script src="js/vendor/bootstrap.min.js"></script>
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? 
    key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
   <script src="js/jquery.ajaxchimp.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
   <script src="js/parallax.min.js"></script>
   <script src="js/owl.carousel.min.js"></script>
   <script src="js/jquery.sticky.js"></script>
   <script src="js/hexagons.min.js"></script>
   <script src="js/jquery.counterup.min.js"></script>
   <script src="js/waypoints.min.js"></script>
   <script src="js/jquery.nice-select.min.js"></script>
    <script src="js/main.js"></script>



   </body>

   </html>

共1个答案

匿名用户

您应该使用静态文件的绝对路径,而不是相对路径。 示例:

<script src="js/main.js"></script>

应该是:

<script src="/js/main.js"></script>

同样,您应该修复ejs文件中所有静态文件(css,js等)的路径。

您可以在这里阅读关于绝对路径和相对路径的更多信息。