快速路线参数不断加载

Question

I can see the dynamic id that appears on the URL but the page keeps loading... I have attached the route that HTML redirects us to and the database.我可以看到 URL 上显示的动态 ID，但页面一直在加载...我附上了 HTML 将我们重定向到的路由和数据库。

// Route Parameter // 路由参数

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 that's redirects to that route // 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>

// Schema & Model (Database) // 架构 & 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;

Answer 1

The page got rendered when i removed css and scripts to it.当我删除 css 和脚本时，页面被渲染。 Found to the solution here on stack overflow that you have to use "/" before giving any css or js path reference:在堆栈溢出中找到解决方案，您必须在提供任何 css 或 js 路径引用之前使用“/”：

so instead of this:所以而不是这个：

HTML head 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 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>

**Add / ** **添加 / **

HTML Head 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 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>

Answer 2

In HTML details Just remove main js and main css在 HTML 详情去掉main js和main css即可

快速路线参数不断加载

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-09-23 13:40:46

解决方案2
-1 2022-09-29 16:21:05

快速路线参数不断加载

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-09-23 13:40:46

解决方案2 -1 2022-09-29 16:21:05

解决方案1
0 已采纳 2020-09-23 13:40:46

解决方案2
-1 2022-09-29 16:21:05