NodeJS / Express / Mean Stack

Question

我是Express和新手的新手，我试图运行一个简单的app / webserver作为概念证明。我被困了好几个小时，因为我的服务器将每个文件作为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': '../'});
});

};

我一直在关注本教程verbatum：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文件放在应有的位置并更新路径。
我还可以看到您使用index.html中routes.js的绝对完整路径而不是相对路径，因此您的应用程序似乎需要整理出来。

Answer 2

您所关注的教程包含此路线

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

明确定义您描述的行为。

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

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

<强>更新

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