当前位置: 首页 > 知识库问答 >
问题:

表示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应用程序内浏览器中。但在所有其他浏览器中,图像加载没有问题。 此外,我的网站是https,而图像是HTTP。不确定这是否有影响。 有没有办法在instagram应用内浏

  • 问题内容: 我有以下代码: 我有一个计时器,它经常发出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 cli(路由器、VueX、PWA)设置了一个Vue项目。我一如既往地设置了一些路由(按照文档中的建议)和VueX中的一些状态字段: 在我的视图/组件中,我在实例上使用方法,以编程方式死记硬背,如下所示: ,其中是等待的

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