[英]Frontend and Backend with express
Currently i'm working on a web application with express.js. 目前我正在使用express.js处理Web应用程序。 I want to have a frontend and backend. 我想要一个前端和后端。 The frontend should show some contents from a database, in the backend i want to create this contents (similar as a cms). 前端应该显示来自数据库的一些内容,在后端我想创建这个内容(类似于cms)。
I started with this folder structure: 我从这个文件夹结构开始:
app/
├── frontend/
│ ├── public //Javascript, css & images only for frontend
│ ├── views //Frontend jade templates
│ └── client.js
│
├── backend/
│ ├── public //Only backend css & stuff
│ └── views //Backend templates
│ └── core.js
│
└── server.js //Starts the whole application
The server.js server.js
var express = require('express');
var app = express();
var config = require('../app/config.json')[app.get('env')];
var backend = require('./backend/core');
var frontend = require('./frontend/client');
app.use(backend);
app.use(frontend);
app.set('port', config.port || 3000);
var server = app.listen(app.get('port'), function() {
console.log('Server listening on port ' + app.get('port') + ' in ' + app.get('env') + ' mode');
});
the client.js client.js
var express = require('express');
var app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('layout', {title: 'Frontpage'});
});
app.get('/about', function(req, res) {
res.render('layout', {title: 'About us'});
});
module.exports = app;
and the core.js 和core.js
var express = require('express');
var app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.static(__dirname + '/public'));
app.get('/login', function(req, res) {
res.render('layout', {title: 'Login'});
});
app.get('/login/dashboard', function(req, res) {
res.render('layout', {title: 'Dashboard'});
});
module.exports = app;
express.js loads the right templates but not the right stylesheet. express.js加载正确的模板,但不加载正确的样式表。 For every route the backend stylesheet is loaded. 对于每个路由,都会加载后端样式表。
localhost:3000/about
should load the stylesheet in 应加载样式表
frontend/public/css/
and 和
localhost:3000/login
should load the css in 应该加载css
backend/public/css/
How can i fix this? 我怎样才能解决这个问题?
The issue that the backend stylesheet is served by express is a consequence of how express handles requests in conjunction with your application architecture. 后端样式表由express提供的问题是express如何与您的应用程序体系结构一起处理请求的结果。
A web browser requests a stylesheet /css/site.css express accepts this request and processes all middleware and routers. Web浏览器请求样式表/css/site.css express接受此请求并处理所有中间件和路由器。 Since you set up your main app like this 由于您设置了这样的主应用程序
app.use(backend);
app.use(frontend);
The backend app first handles the request. 后端应用程序首先处理请求。 Since you've registered the static middleware in your backend app 由于您已在后端应用程序中注册了静态中间件
app.use(express.static(__dirname + '/public'));
the stylesheet /css/site.css is served from your backend app if this stylesheet exists. 如果此样式表存在,则样式表/css/site.css将从您的后端应用程序提供。 This happens for every middleware and route. 每个中间件和路由都会发生这种情况。 So any route or asset (css, image) that is requested by a client will be first processed by your backend app. 因此,客户端请求的任何路由或资产(css,image)将首先由您的后端应用程序处理。 As a consequence routes and assets in the backend app will "hide" routes and assets in your frontend app if they are served via the same route. 因此,如果通过相同的路线提供服务,后端应用中的路由和资产将“隐藏”前端应用中的路由和资产。
A simple solution to your problem would be that you're not serving backend and frontend apps from your main app but to start two express apps in server.js
: 解决您问题的一个简单方法是,您不是从主应用程序提供后端和前端应用程序,而是在server.js
启动两个Express应用程序:
var config = require('../app/config.json')[process.env.NODE_ENV];
var backend = require('./backend/core');
backend.set('port', config.backend.port || 3000);
var backendServer = backend.listen(backend.get('port'), function() {
console.log('Backend server listening on port ' + backend.get('port') + ' in ' + backend.get('env') + ' mode');
});
var frontend = require('./frontend/client');
frontend.set('port', config.frontend.port || 3001);
var frontendServer = frontend.listen(frontend.get('port'), function() {
console.log('Frontend server listening on port ' + frontend.get('port') + ' in ' + frontend.get('env') + ' mode');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.