快速路線參數不斷加載
[英]express route parameters keeps loading
問題描述
我可以看到 URL 上顯示的動態 ID，但頁面一直在加載...我附上了 HTML 將我們重定向到的路由和數據庫。
// 路由參數
app.get('/detail/:id', (req, res) =>{
const id = req.params.id;
Blog.findById(id)
.then((result) => res.render('detail', { title: 'Blog Detail',blog: result }))
.catch(err => console.log(err));
});
// HTML 重定向到該路由
<% if(blogs.length > 0) { %>
<% blogs.forEach(blog =>{ %>
<a href="/detail/<%=blog._id%>">
<div class="blog-entry">
<a href="/detail/<%=blog._id%>" class="img-2"><img src="images/blog-1.jpg" class="img-fluid;" style="width: 80%; height: 40%;" alt="Colorlib Template"></a>
<div class="text pt-3">
<h3><a href="/detail/<%=blog._id%>"><%= blog.title %></a></h3>
<p style="margin-top: -10px;"><span class="pr-3"><%= blog.snippet%></span</p>
<p class="mb-0"><a href="/detail/<%=blog._id%>" class="btn btn-black py-2">Read More <span class="icon-arrow_forward ml-4"></span></a></p>
</div>
</div>
</a>
// 架構 & Model（數據庫）
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const blogSchema = new Schema({
title: {
type:String,
required: true
},
snippet:{
type:String,
required: true
},
body:{
type:String,
required: true
},
// image:
}, { timestamps: true });
const Blog = mongoose.model('Blog', blogSchema);
module.exports = Blog;
2 個解決方案
解決方案1
0 已采納 2020-09-23 13:40:46
當我刪除 css 和腳本時，頁面被渲染。 在堆棧溢出中找到解決方案，您必須在提供任何 css 或 js 路徑引用之前使用“/”：
所以而不是這個：
HTML頭
<head>
<title><%= title %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/style.css">
</head>
JS
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="js/main.js"></script>
**添加 / **
HTML頭
<head>
<title><%= title %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="/css/animate.css">
<link rel="stylesheet" href="/css/owl.carousel.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/magnific-popup.css">
<link rel="stylesheet" href="/css/aos.css">
<link rel="stylesheet" href="/css/ionicons.min.css">
<link rel="stylesheet" href="/css/flaticon.css">
<link rel="stylesheet" href="/css/icomoon.css">
<link rel="stylesheet" href="/css/style.css">
</head>
JS
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-migrate-3.0.1.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.easing.1.3.js"></script>
<script src="/js/jquery.waypoints.min.js"></script>
<script src="/js/jquery.stellar.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/jquery.magnific-popup.min.js"></script>
<script src="/js/aos.js"></script>
<script src="/js/jquery.animateNumber.min.js"></script>
<script src="/js/scrollax.min.js"></script>
<script src="/js/main.js"></script>
解決方案2
-1 2022-09-29 16:21:05
在 HTML 詳情 去掉main js和main css即可
郵遞員在向快速路由發送請求時掛起（繼續加載）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.