前端和后端与快递

Question

目前我正在使用express.js处理Web应用程序.我想要一个前端和后端.前端应该显示来自数据库的一些内容,在后端我想创建这个内容(类似于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表示接受此请求并处理所有中间件和路由器。既然你像这样设置了你的主应用程序

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

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

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

如果此样式表存在，则样式表/css/site.css将从您的后端应用程序提供。每个中间件和路由都会发生这种情况。因此，客户端请求的任何路由或资源（css、图像）将首先由您的后端应用程序处理。因此，如果通过相同的路由提供服务，后端应用程序中的路由和资源将“隐藏”前端应用程序中的路由和资源。

解决您的问题的一个简单方法是，您不从主应用程序提供后端和前端应用程序，而是在以下位置启动两个快速应用程序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');
});