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 express接受此请求并处理所有中间件和路由器。由于您设置了这样的主应用程序

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

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

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

如果此样式表存在，

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

您的问题的一个简单解决方案是，您不是从主应用程序提供后端和前端应用程序，而是在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');
});

前端和后端与快递

1 个答案: