Express. js ошибка приложения: браузер застрял в состоянии загрузки при попытке доступа к определенному маршруту - PullRequest
Новая
       38

Express. js ошибка приложения: браузер застрял в состоянии загрузки при попытке доступа к определенному маршруту

0 голосов
/ 04 февраля 2020

Я работаю над приложением для ведения блога (нажмите на ссылку, чтобы увидеть репозиторий GitHub ) с Express, E JS и MongoDB.

По какой-то причине я не смог определить, когда (в браузере) я пытаюсь go сделать следующее: http://localhost:3000/dashboard он (браузер) застревает в состоянии загрузки и никогда не загружает панель мониторинга. маршрут.

В индексе "entry". 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}!`));

В маршруте панели инструментов (маршруты \ admin \ панель инструментов. 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');
};

в routes/front-end/posts.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
                });
            }
        });
    }
};

ВАЖНО: Необходимо, чтобы каждое отдельное сообщение отображалось под root url , например: http://localhost:3000/5e3063dbfa749d9229bab26f, где 5e3063dbfa749d9229bab26f - это, конечно, идентификатор сообщения.

Это для целей SEO. Я собираюсь позже заменить id на post slug : http://localhost:3000/my-great-post.

Как мне этого добиться?

Ответы [ 11 ]

1 голос
/ 26 февраля 2020

ИСПРАВЛЕНО , для полного выполнения примера клона нод-чит-код XPressBlog и запуска node index с последующим npm i.

Укажите браузер на http://localhost: 3000 / панель инструментов , выходы:

Это панель инструментов

http://localhost: 3000 , выходные данные:

Это загрузит все сообщения; продолжить с вашими логи c!

http://localhost: 3000 / my-great-post , выходные данные:

Это загрузит один пост с слагом: my-great-post

Что вы делали не так?

Вы путали использование app.use(, поэтому они исправлены в соответствии с вашими потребностями (как упомянуто в вашем посте) следующим образом: 

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

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

Если вы хотите sh, чтобы узнать больше о app.use, вот ссылки:

1 голос
/ 26 февраля 2020

Вам нужно добавить postRoute только один раз в индекс. js, 

// Bring the Dashboard
const dashboardRoute = require("./routes/admin/dashboard");
// Get Dashboard
app.use('/dashboard', dashboardRoute);
// Bring the Posts Routes
const postsRoute = require('./routes/front-end/posts');
// Get Posts
app.use('/', postsRoute);

и в файле dashboardRoute измените маршрут на '/' вместо ' / dashboard ', иначе вам нужно использовать localhost: 3000 / dashboard / dashboard , чтобы получить панель мониторинга 

router.get('/', dashboardController.displayDashboard);
1 голос
/ 26 февраля 2020

Вы неправильно настраиваете свои маршруты в файле индекса. 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');

const dashboardRoute = require("./routes/admin/dashboard");

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

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

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

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

Вам не нужно использовать два postsRoutes. Проверьте это: https://expressjs.com/en/guide/routing.html

Также я предлагаю вам добавить свой почтовый маршрут так: app.use('/post, postsRoute).

1 голос
/ 26 февраля 2020

Ваша проблема с маршрутизацией может быть исправлена ​​заменой порядка /:id и /dashboard. 

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);

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

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

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


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

app.listen(port, () => console.log(`Listening on port ${port}!`));
1 голос
/ 25 февраля 2020

Во-первых, app.use('/:id', postsRoute); и app.use('/dashboard', dashboardRoute); одинаковы для браузера. Причина, когда браузер получает '/ dashboard', он не знает, является ли строка 'dashboard' идентификатором или нет. Из-за этого он застревает, поскольку URL указывает оба этих маршрута. Так что измените app.use('/:id', postsRoute); на app.use('/post/:id', postsRoute);. Это будет работать нормально.

Во-вторых, согласно вашему коду, URL должен быть http://localhost:3000/dashboard/dashboard, а не http://localhost:3000/dashboard.

index. 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}!`));
1 голос
/ 25 февраля 2020

В Index. js вы добавляете экспорт маршрутов в "/", в express пути маршрутов будут совпадать с регулярным выражением. поэтому, когда добавили маршрутизатор в "/", чтобы все началось с этого момента. 

// 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.use('/dashboard', dashboardRoute);

теперь маршруты становятся

/dashboard/dashboard - это даст приборной панели

, но этот переопределяет соответствие маршрутизации "/: id /: id", так что теперь все переопределяется этим

, поэтому создайте другой маршрут для получения сообщений как app.use("/posts", postsRoute);

/posts -> он выдаст все сообщения

/posts/: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);
0 голосов
/ 05 февраля 2020

Вам нужно реорганизовать свои маршруты. Архитектура вашего приложения выглядит запутанно. Если вы используете express Router, вам нужно сделать что-то вроде этого:

ваш индекс. js

...
const routes = require('./routes/index');
... 
// Middleware
app.use(morgan('dev'));

app.use('/', routes);

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

вам нужно создать route / index. js файл, содержащий что-то вроде этого: 

const express = require('express');
const router = express.Router();
const dashboardController = require('../controllers/admin/dashboard');
const postsController = require('../controllers/front-end/posts');

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

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

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

module.exports = router;
0 голосов
/ 04 февраля 2020

попробуйте написать app.get('/:id', postsRoute); после app.get('/dashboard', dashboardRoute);

, когда http://localhost:3000/dashboard url, вызвавший его, вызовет postRoute route вместо dashboardRoute, потому что express распознает '/ dashboard' как ' /: id ', поэтому req.params.id должно быть равно' приборной панели 'внутри postRoute

0 голосов
/ 04 февраля 2020

Вы применяете 2 фильтра.

Сначала в app.get('/dashboard', dashboardRoute);, а затем в router.get('/dashboard', dashboardController.displayDashboard);.

Итак, вы, вероятно, создаете http://localhost:3000/dashboard/dashboard route

Попробуйте удалить фильтр с одного из них

0 голосов
/ 04 февраля 2020

Единственная причина в том, что вы используете get дважды. Первый в вашем index.js, а второй в вашем dashboard.js. Вам не следует этого делать.

Итак, чтобы исправить это, убедитесь, что в вашем index.js не используется app.get: 

app.get('/dashboard', dashboardRoute);

Используйте только 1013 *: 

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

После того, как вы используете set app.use('/dashboard') в вашем index.js, убедитесь, что в вашем dashboard.js, как этот код ниже: 

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

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

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

module.exports = router;

Теперь вы можете позвоните вашей конечной точке с помощью URL: localhost:3000/dashboard.

. Пример вашего кода вы можете посмотреть на моем коде: https://codesandbox.io/s/express-ejs-bug-answer-0nyo9

Надеюсь, это поможет вы.

Страница:
...