我正在使用Express、EJS和MongoDB开发一个博客应用程序(单击链接查看GitHub repo)。
由于某种原因,我无法确定何时(在浏览器中)尝试转到:http://localhost:3000/dashboard
it(浏览器)陷入加载状态,从未实际加载仪表板路径。
在“条目”索引中。我拥有的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-好文章
。
我怎样才能做到这一点?
在我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);
首先,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}!`));
修复了它,对于完整的运行示例,克隆节点欺骗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);
如果您想进一步了解应用程序。使用
以下是链接:
我真的很讨厌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服务器中,我的问题是,当您访问我的应
我该怎么解决?