前端和后端与快递答案

【问题标题】：Frontend and Backend with express前端和后端与快递
【发布时间】：2014-08-06 17:49:00
【问题描述】：

目前我正在使用 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/

我该如何解决这个问题？

【问题讨论】：

使用 firebug 查看它是否加载了所有不同的样式表。如果是，那么问题出在您的观点上，而不是服务器上。我还想在这里解决术语使用不当的问题。 public 中的所有内容通常被认为是“前端”。 Node 和 Express 是后端服务器技术。

标签： node.js express

【解决方案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 中启动两个快速应用程序：

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

【讨论】：