使用Express框架的前端和后端

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 

服务器.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');
});

客户端.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/

我该怎么解决这个问题？

- user3567590

---

使用Firebug查看是否加载了所有不同的样式表。如果是，则问题在于您的视图而不是服务器。我还喜欢在这里解决命名不当的问题。public中的所有内容通常被认为是“前端”。Node和Express是后端、服务器技术。 - Tony

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、图像）都将首先由您的后端应用程序处理。结果，如果通过相同的路由提供，则后端应用中的路由和资产将“隐藏”前端应用中的路由和资产。

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

- saintedlama