前端和后端与快递

目前我正在使用express.js处理web应用程序。 我想要一个前端和后端。 前端应该显示来自数据库的一些内容，在后端我想创build这个内容（类似于一个cms）。

我从这个文件夹结构开始：

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 

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

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; 

和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加载正确的模板，但不是正确的样式表。 对于每个路由后端样式表加载。

 localhost:3000/about 

应该加载样式表

 frontend/public/css/ 

和

 localhost:3000/login 

应该加载的CSS

 backend/public/css/ 

我怎样才能解决这个问题？

Answer 1

后端样式表由express服务的问题是express如何处理与您的应用程序体系结构相关的请求的结果。

Web浏览器请求样式表/css/site.css express接受此请求并处理所有中间件和路由器。 因为你设置你的主要应用程序是这样的

 app.use(backend); app.use(frontend); 

后端应用程序首先处理请求。 由于您已经在后端应用程序中注册了静态中间件

 app.use(express.static(__dirname + '/public')); 

如果这个样式表存在的话，样式表/css/site.css会从后台应用程序提供。 这发生在每个中间件和路由上。 因此，客户端请求的任何路由或资产（css，image）将首先由您的后端应用程序处理。 因此，后端应用程序中的路线和资产将“隐藏”前端应用程序中的路线和资产（如果它们是通过相同的路线提供服务的话）。

你的问题的一个简单的解决scheme是，你不是服务于你的主应用程序的后端和前端应用程序，而是在server.js启动两个快速应用程序：

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