NodeJS / Express / 平均堆栈

Question

我是 Express 的新手，也是 nodejs 的半新手，我正在尝试运行一个简单的应用程序/网络服务器作为概念证明。我被困了好几个小时，因为我的服务器将每个文件都作为 index.html （包含 index.html 的内容）。

在我的 index.html 中，我正在调用 JS 文件和 CSS 文件，它们都回来了，但控制台中有 200，但它们都回来了 index.html 内容，而不是其中包含的实际内容.我相信问题出在下面的 server.js 文件中：

// server.js

// modules =================================================
var express = require('express');
var app     = express();
var mongoose= require('mongoose');
var path = require('path');

// configuration ===========================================

// config files
var db = require('../config/db');

var port = process.env.PORT || 9999; // set our port
//mongoose.connect(db.url); // connect to our mongoDB database (uncomment after you enter in your own credentials in config/db.js)

app.configure(function() {
app.use(express.static(__dirname + '/public'));     // set the static files location     /public/img will be /img for users
app.use(express.logger('dev'));                     // log every request to the console
app.use(express.bodyParser());                      // have the ability to pull information from html in POST
app.use(express.methodOverride());                  // have the ability to simulate DELETE and PUT
});

// routes ==================================================
require('../../app/routes')(app); // configure our routes

// start app ===============================================
app.listen(port);                                                // startup our app at http://localhost:9999
console.log('Magic happens on port ' + port);           // shoutout to the user
exports = module.exports = app;                         // expose app

// app/routes.js

module.exports = function(app) {

// server routes ===========================================================
// handle things like api calls
// authentication routes

// sample api route
app.get('/api/nerds', function(req, res) {
    // use mongoose to get all nerds in the database
    Nerd.find(function(err, nerds) {

        // if there is an error retrieving, send the error. nothing after res.send(err) will execute
        if (err)
            res.send(err);

        res.json(nerds); // return all nerds in JSON format
    });
});

// route to handle creating (app.post)
// route to handle delete (app.delete)

// frontend routes =========================================================
// route to handle all angular requests
app.get('*', function(req, res) {
    res.sendfile('/Users/...../app/public/index.html'); // load our public/index.html file
    //res.sendfile(path, {'root': '../'});
});

};

我一直在逐字阅读本教程：http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application，但没有取得太大成功。

Answer 1

如果不查看您的计算机，我无法确认，但我感觉您的应用程序中的路径有误。

快速设置中的关键部分是：

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

和

app.get('*', function(req, res) { res.sendfile('/Users/...../app/public/index.html');

第一条规则捕获并返回__dirname + '/public' 中的任何静态文件。
第二个返回index.html 其他任何东西。

问题是您的server.js 不在应用程序目录中（我可以看到这一点，因为您使用../../app/routes.js 来访问routes.js）这意味着__dirname + '/public' 没有指向公共目录。这就是为什么 routes.js 中的全局规则为您的静态文件提供服务的原因。

为了修复此更改 __dirname + '/public' 到 ../../app/public，或者最好将您的 server.js 文件放在应有的位置并更新您的路径。
我还可以看到您在routes.js 中使用了指向index.html 的绝对完整路径，而不是相对路径，因此您的应用程序似乎需要整理。

Answer 2

您正在学习的教程包含这条路线

app.get('*', function(req, res) {
  res.sendfile('./public/index.html'); // load our public/index.html file
});

它明确定义了您描述的行为。

在本教程中这很有意义，因为它解释了如何构建单页应用程序。这种类型的应用程序通常为所有请求返回相同的内容，而实际的演示工作由客户端库（在本例中为 angular）在客户端上进行。

因此，如果您要为更多具有不同内容的页面提供服务，则需要为它们添加更多路由，就像示例中的 /api/nerds 路由一样。

更新：

在澄清问题是错误地提供 CSS 和 JS 文件后，建议的解决方案是检查 server.js 的位置 - 它应该与文件夹“public”一起在文件夹中。