问题：

表示js应用程序错误：当试图访问某些路由时，浏览器处于加载状态

微生智刚

2023-03-14

我正在使用Express、EJS和MongoDB开发一个博客应用程序（单击链接查看GitHub repo）。

由于某种原因，我无法确定何时（在浏览器中）尝试转到：http://localhost:3000/dashboardit（浏览器）陷入加载状态，从未实际加载仪表板路径。

在“条目”索引中。我拥有的js文件：

const express = require('express');
const dotenv = require('dotenv');
const mongoose = require('mongoose');
const path = require('path');
const morgan = require('morgan');
const expressLayouts = require('express-ejs-layouts');
const app = express();

dotenv.config();

//Conect to MONGODB
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => {
    console.log('conected');
});

mongoose.connection.on('error', err => {
    console.log(`DB connection error: ${err.message}`);
});

// Set static directory
app.use(express.static(path.join(__dirname, 'public')));

// Set views directory
app.set('views', path.join(__dirname, 'views'));

// Set view engine
app.set('view engine', 'ejs');

// Use Express Layouts
app.use(expressLayouts);

// Middleware
app.use(morgan('dev'));

// Bring the Posts Routes
const postsRoute = require('./routes/front-end/posts');

// Get Posts
app.use('/', postsRoute);

// Get Single Post
app.use('/:id', postsRoute);

// Bring the Dashboard
const dashboardRoute = require('./routes/admin/dashboard');

// Get Dashboard
app.use('/dashboard', dashboardRoute);

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`Listening on port ${port}!`));

在仪表板路径（routes\admin\dashboard.js）中，我有：

const express = require('express');
const dashboardController = require('../../controllers/admin/dashboard');

// Express router
const router = express.Router();

// Dysplay Dashboard
router.get('/dashboard', dashboardController.displayDashboard);

module.exports = router;

而在仪表板控制器中：

const Post = require('../../models/post');

exports.displayDashboard = (req, res, next) => {
    res.send('Dashboard');
};

在路由/前端/POST中。js我有：

const express = require('express');
const postsController = require('../../controllers/front-end/posts');

// Express router
const router = express.Router();

// Get Posts
router.get('/', postsController.getPosts);

// Get Single Post
router.get('/:id', postsController.getSinglePost);

module.exports = router;

员额管理员：

const Post = require('../../models/post');

exports.getPosts = (req, res, next) => {
    const posts = Post.find({}, (err, posts) => {
        if(err){
            console.log('Error: ', err);
        } else {
            res.render('default/index', {
                layout: 'default/layout',
                website_name: 'MEAN Blog',
                page_heading: 'XPress News',
                page_subheading: 'A MEAN Stack Blogging Application',
                posts: posts
            });
        }
    });
};

exports.getSinglePost = (req, res, next) => {
    let id = req.params.id;
    if (id.match(/^[0-9a-fA-F]{24}$/)) {
        Post.findById(id, function(err, post){
            if(err){
                console.log('Error: ', err);
            } else {
                res.render('default/singlepost', {
                    layout: 'default/layout',
                    website_name: 'MEAN Blog',
                    post: post
                });
            }
        });
    }
};

重要提示：每个帖子都必须显示在根url下，例如：http://localhost:3000/5e3063dbfa749d9229bab26f其中5e3063dbfa749d9229bab26f当然是帖子id。

这是为了搜索引擎优化的目的。我打算稍后用post slug替换id:http://localhost:3000/my-好文章。

我怎样才能做到这一点？

共有3个答案

范鸿畅

2023-03-14

在我ndex.js你正在添加路由导出到 "/" , 在快速路由路径将与常规表达式匹配。所以当添加路由器到"/"所以一切将从这里开始。

// Bring the Posts Routes
const postsRoute = require('./routes/front-end/posts');

// Get Posts
app.use('/', postsRoute);

// Get Single Post
app.use('/:id', postsRoute);

// Bring the Dashboard
const dashboardRoute = require('./routes/admin/dashboard');

// Get Dashboard
app.use('/dashboard', dashboardRoute);

这里发生的是第一现在路线变成这样

你添加了postsRoutes

所以现在路线变成了

/-将给出所有帖子/： id-将给出单个帖子

您再次将postsRoutes添加到“：/id”/：id-postsRoutes

所以现在路线变成了

/：id将给出所有帖子/：id/：id将给出单个帖子

因此，您必须删除其中的任何一行

好吧，就这一个

// Get Posts
app.use('/', postsRoute);

对于你的仪表板，你也做了同样的事情

app。使用（“/dashboard”，仪表板路线）；

现在路线变成了

/dashboard/dashboard-它会给dashboard

但是这个会覆盖“/：id/：id”路由匹配，所以现在所有的内容都会被这个覆盖

因此，创建另一个获取帖子的路由，如app.use（/post， postsRoad）；

/帖子-

/post/： id-

以及需要更改的仪表板路线

router.get('/dashboard', dashboardController.displayDashboard);

/dashboard -> "/"

router.get('/', dashboardController.displayDashboard);

最终路线将是

const postsRoute = require('./routes/front-end/posts');

// Get Posts
app.use('/posts', postsRoute);

// Get Single Post
// THIS ONE WILL COMMENT 
// app.use('/posts/:id', postsRoute);

// Bring the Dashboard
const dashboardRoute = require('./routes/admin/dashboard');

// Get Dashboard
app.use('/dashboard', dashboardRoute);

在仪表板路线中

router.get('/', dashboardController.displayDashboard);

邢小云

2023-03-14

首先，app.use（'/： id'， postsRoad）；和app.use（'/dashboard'， dashboardRoad）；对浏览器来说是相同的。因为当浏览器获取/dashboard时，它不知道字符串dashboard是否是id。正因为如此，当URL指示这两个路由时，它会卡住。所以将app.use（'/： id'， postsRoad）；改为app.use（'/post/： id'， postsRoad）；。这将工作罚款。

其次，根据您的代码，URL应该是http://localhost:3000/dashboard/dashboard，而不是http://localhost:3000/dashboard。

指数js

const express = require('express');
const dotenv = require('dotenv');
const mongoose = require('mongoose');
const path = require('path');
const morgan = require('morgan');
const expressLayouts = require('express-ejs-layouts');
const app = express();

dotenv.config();

//Conect to MONGODB
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => {
    console.log('conected');
});

mongoose.connection.on('error', err => {
    console.log(`DB connection error: ${err.message}`);
});

// Set static directory
app.use(express.static(path.join(__dirname, 'public')));

// Set views directory
app.set('views', path.join(__dirname, 'views'));

// Set view engine
app.set('view engine', 'ejs');

// Use Express Layouts
app.use(expressLayouts);

// Middleware
app.use(morgan('dev'));

// Bring the Posts Routes
const postsRoute = require('./routes/front-end/posts');

// Get Posts
app.use('/', postsRoute);

// Get Single Post
app.use('/post/:id', postsRoute); //****changed******

// Bring the Dashboard
const dashboardRoute = require('./routes/admin/dashboard');

// Get Dashboard
app.use('/dashboard', dashboardRoute);

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`Listening on port ${port}!`));

包嘉懿

2023-03-14

修复了它，对于完整的运行示例，克隆节点欺骗XPressBlog并运行节点索引，然后运行npm i。

指向浏览器http://localhost:3000/dashboard，产出：

这是仪表板

http://localhost:3000，产出：

这将加载所有帖子；继续你的逻辑！

http://localhost:3000/my-great-post，产出：

这将用slug加载单个帖子：我的伟大帖子

你做错了什么？

您混淆了应用程序的使用。使用（），以便根据您的需要（如您的帖子中所述）进行修复，如下所示：

const dashboardRoute = require("./routes/admin/dashboard");
app.use('/dashboard', dashboardRoute);

const postsRoute = require('./routes/front-end/posts');
app.use('/', postsRoute);

如果您想进一步了解应用程序。使用以下是链接：

nodejs express什么是应用程序使用
使用中间件

类似资料：

Instagram应用程序内浏览器未加载图像

我真的很讨厌instagram应用内浏览器。它显示的内容几乎不同于所有普通浏览器。出于某种原因，我的图像无法加载。我的网站链接到其他网站的图像。但是这些图像没有扩展。（不确定这是否是问题所在）这些图片不会加载到instagram应用程序内浏览器中。但在所有其他浏览器中，图像加载没有问题。此外，我的网站是https，而图像是HTTP。不确定这是否有影响。有没有办法在instagram应用内浏
当请求由于浏览器重新加载而失败时，jQuery $ .ajax调用成功处理程序

问题内容：我有以下代码：我有一个计时器，它经常发出AJAX请求。如果我在“数据”中未收到任何内容，则会向用户显示错误消息-这意味着服务器上出现了问题。问题是当用户在进行AJAX调用时重新加载页面时。我在Firebug中看到AJAX调用失败（URL变成红色，并且没有显示HTTP状态），因此我希望jQuery将停止请求或至少转到错误处理程序。但它会转到成功处理程序，并在’data’变量中传递nu
路由 - 加载中/错误子状态

英文原文: http://emberjs.com/guides/routing/loading-and-error-substates/ 除了异步路由指南中描述的技术外，Ember路由还提供了通过使用error和loading子状态，来实现自定义路由间的异步过渡。 loading子状态考虑下面的情形： 1 2 3 4 5 App.Router.map(function() { this.r
Vue路由器总是重新加载浏览器-失去vuex状态

我有一个问题，看起来很简单，但现在不那么简单了（对我来说）：我已使用Vue cli（路由器、VueX、PWA）设置了一个Vue项目。我一如既往地设置了一些路由（按照文档中的建议）和VueX中的一些状态字段：在我的视图/组件中，我在实例上使用方法，以编程方式死记硬背，如下所示：，其中是等待的
浏览器路由器（反应应用程序）在Github不工作

我有一个小小的React应用程序项目，我已经在Github中部署了它。它的工作原理，甚至我使用导入{浏览器路由器，链接，交换机，路由}从"react-router-dom"；路由和作品...这是我的代码：类应用程序扩展反应。组件{ render（）{ } }导出默认应用程序；' 我在本地机器上使用过这个，没有“basename”，并且工作过。现在，在github服务器中，我的问题是，当您访问我的应
js中的路由错误-访问XMLHttpRequest

我该怎么解决？

表示js应用程序错误：当试图访问某些路由时，浏览器处于加载状态

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档