当你有两条不同的主要路线时,如何在 ejs 文件中加载资产?
how to load assets in ejs file when you have two different main routes?
我有一个简单的博客快递应用程序,我设置了两条不同的主要路线,常规路线(登录,post,注册等...)和管理员(添加post,编辑post 等...)问题是我的资产,css 或任何其他静态文件不会在 管理路由 中加载,但幸运的是在常规路由中工作.我的快速设置如下:
app.use('/admin/pages', adminPages);
app.use('/', pages);
所以在调查了两个主要路线的 chrome 开发人员工具之后,这就是问题所在,但不知道如何解决!
这是当管理员路由不加载 bootstrap 或 css 文件时:
请注意所有资产在 localhost:3005
之后都带有不需要的 (admin/pages/...) 前缀
但它在这里有效(没有前缀):
这是我的文件结构:
完整 App.js :
const express = require('express'),
app = express(),
path = require('path'),
mongoose = require('mongoose'),
bodyParser = require('body-parser'),
pages = require('./routes/pages.js'),
config = require('./config/database'),
expressSession = require('express-session'),
expressValidator = require('express-validator'),
adminPages = require('./routes/admin_pages.js');
mongoose.connect(config.database);
const database = mongoose.connection;
database.on('error', console.error.bind(console, '@@error with database:'));
database.once('open', () => {
console.log('Connected To Database successfully');
});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
// app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.set('trust proxy', 1);
app.use(
expressSession({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
cookie: { secure: true }
})
);
app.use(require('connect-flash')());
app.use(function(req, res, next) {
res.locals.messages = require('express-messages')(req, res);
next();
});
app.use(
expressValidator({
errorFormatter: function(param, msg, value) {
var namespace = param.split('.'),
root = namespace.shift(),
formParam = root;
while (namespace.length) {
formParam += '[' + namespace.shift() + ']';
}
return {
param: formParam,
msg: msg,
value: value
};
}
})
);
app.use('/admin/pages', adminPages);
app.use('/', pages);
const port = 3005;
app.listen(port, () => {
console.log(`App Listening @ localhost:${port}`);
});
add_page.ejs :
<%- include('../_layouts/header') %>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<button> submit </button>
</form>
<%- include('../_layouts/footer') %>
这是我的两条主要路线:
我找到了答案。
当使用两条主要路线时,您需要将每条路线指定到其静态文件,因此我们为常规路线获得了这个中间件,如下所示:
app.use('/', express.static('public'));
由于您有通往 admin/pages 的另一条路线,因此缺少此路线:
app.use('/admin/pages', express.static('public'));
这解决了问题 :D
在我的例子中,我只使用一条主要路线,所以我更改了资产 url,在 url 的开头添加了一个 /
,它对我有用:
<link rel="stylesheet" href="assets/css/style.css">
至
<link rel="stylesheet" href="/assets/css/style.css">
也许它对其他人有帮助,问候!
我有一个简单的博客快递应用程序,我设置了两条不同的主要路线,常规路线(登录,post,注册等...)和管理员(添加post,编辑post 等...)问题是我的资产,css 或任何其他静态文件不会在 管理路由 中加载,但幸运的是在常规路由中工作.我的快速设置如下:
app.use('/admin/pages', adminPages);
app.use('/', pages);
所以在调查了两个主要路线的 chrome 开发人员工具之后,这就是问题所在,但不知道如何解决!
这是当管理员路由不加载 bootstrap 或 css 文件时:
但它在这里有效(没有前缀):
这是我的文件结构:
完整 App.js :
const express = require('express'),
app = express(),
path = require('path'),
mongoose = require('mongoose'),
bodyParser = require('body-parser'),
pages = require('./routes/pages.js'),
config = require('./config/database'),
expressSession = require('express-session'),
expressValidator = require('express-validator'),
adminPages = require('./routes/admin_pages.js');
mongoose.connect(config.database);
const database = mongoose.connection;
database.on('error', console.error.bind(console, '@@error with database:'));
database.once('open', () => {
console.log('Connected To Database successfully');
});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
// app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.set('trust proxy', 1);
app.use(
expressSession({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
cookie: { secure: true }
})
);
app.use(require('connect-flash')());
app.use(function(req, res, next) {
res.locals.messages = require('express-messages')(req, res);
next();
});
app.use(
expressValidator({
errorFormatter: function(param, msg, value) {
var namespace = param.split('.'),
root = namespace.shift(),
formParam = root;
while (namespace.length) {
formParam += '[' + namespace.shift() + ']';
}
return {
param: formParam,
msg: msg,
value: value
};
}
})
);
app.use('/admin/pages', adminPages);
app.use('/', pages);
const port = 3005;
app.listen(port, () => {
console.log(`App Listening @ localhost:${port}`);
});
add_page.ejs :
<%- include('../_layouts/header') %>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<button> submit </button>
</form>
<%- include('../_layouts/footer') %>
这是我的两条主要路线:
我找到了答案。 当使用两条主要路线时,您需要将每条路线指定到其静态文件,因此我们为常规路线获得了这个中间件,如下所示:
app.use('/', express.static('public'));
由于您有通往 admin/pages 的另一条路线,因此缺少此路线:
app.use('/admin/pages', express.static('public'));
这解决了问题 :D
在我的例子中,我只使用一条主要路线,所以我更改了资产 url,在 url 的开头添加了一个 /
,它对我有用:
<link rel="stylesheet" href="assets/css/style.css">
至
<link rel="stylesheet" href="/assets/css/style.css">
也许它对其他人有帮助,问候!