[英]NodeJS / Express / Mean Stack
I am new to Express and semi-new to nodejs and I am trying to run a simple app / webserver as a proof of concept. 我是Express的新手,对nodejs的新手,我试图运行一个简单的应用程序/网络服务器作为概念验证。 I have been stuck for hours because my server serves every file as index.html (with the content of index.html).
我已经呆了几个小时,因为我的服务器将每个文件都作为index.html(包含index.html的内容)来提供。
In my index.html I am making calls to JS files and CSS files and they are all coming back but with a 200 in the console but they are all coming back with index.html content instead of the actual content contained in them. 在我的index.html中,我正在调用JS文件和CSS文件,它们全部返回,但在控制台中返回200,但是它们全部返回index.html内容而不是其中包含的实际内容。 I believe the problem is in my server.js file which is below:
我相信问题出在下面的我的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': '../'});
});
}; };
I have been following this tutorial verbatum: http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application but haven't had much success. 我一直在关注本教程的详细信息: http ://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application,但并没有取得太大的成功。
I cannot confirm without looking at your computer but I get the feeling the paths in your application are wrong. 我不看电脑就无法确认,但是我感觉到您的应用程序中的路径错误。
The crucial parts in the express setup are: 快速设置中的关键部分是:
app.use(express.static(__dirname + '/public'));
and 和
app.get('*', function(req, res) { res.sendfile('/Users/...../app/public/index.html');
The first rule catches and returns any static file in __dirname + '/public'
. 第一条规则捕获并返回
__dirname + '/public'
任何静态文件。
The second returns index.html
for anything else. 第二个返回
index.html
来表示其他内容。
The problem is that your server.js
is not in the apps directory (I can see this since you use ../../app/routes.js
to get to routes.js
) this means __dirname + '/public'
is not pointing to the public directory. 问题是,你的
server.js
是不是在应用程序目录(我可以看到这一点,因为你用../../app/routes.js
去routes.js
),这意味着__dirname + '/public'
不指向公共目录。 Which is why your static files are being served by the global rule in routes.js
. 这就是为什么您的静态文件由
routes.js
的全局规则提供服务的routes.js
。
In order to fix this change __dirname + '/public'
to ../../app/public
, or better yet place your server.js
file where it should be and update your paths. 为了解决此问题,
__dirname + '/public'
更改为../../app/public
,或者最好将server.js
文件放置在应有的位置并更新路径。
I can also see you are using an absolute full path to index.html
in routes.js
instead of a relative one so it seems as if your applications needs to tidied out. 我还可以看到,您使用的是在
routes.js
中使用index.html
的绝对完整路径,而不是相对路径,因此似乎您的应用程序需要整理。
The tutorial that you are following contains this route 您关注的教程包含此路线
app.get('*', function(req, res) {
res.sendfile('./public/index.html'); // load our public/index.html file
});
which explicitly defines the behaviour you described. 明确定义您描述的行为。
In this tutorial it makes sense because it explains how to build a single page application. 在本教程中,这很有意义,因为它说明了如何构建单页应用程序。 This type of the application typically returns the same content for all the request while the actual presentation work happens on the client by the client-side library (angular in this example).
这种类型的应用程序通常会为所有请求返回相同的内容,而实际的呈现工作是由客户端库(在此示例中为角度)在客户端上发生的。
So if you what to serve more pages with different content you need to add more routes for them, just like route for /api/nerds
in the example. 因此,如果您要为更多内容不同的页面提供服务,则需要为其添加更多路由,就像示例中
/api/nerds
路由一样。
Update: 更新:
After clarifying that the issue is incorrectly served CSS and JS files, the proposed solution is to check the location of the server.js - it should be in the folder together with the folder "public". 弄清该问题不正确地提供给CSS和JS文件后,建议的解决方案是检查server.js的位置-它应该与文件夹“ public”一起放在文件夹中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.