如何在Express.js

时间:2017-12-09 09:23:56

标签: html node.js express

我在一个名为page.js的文件中运行一个简单的节点服务器,就像我正在尝试设置的系统一样。在该文件中,我有以下内容:

var express = require('express');
var app = express();

app.get('/', function(req, res) {
    res.sendFile('/Users/JohnFarkerson/Documents/SublimeFolder/index.html');
});

app.get('/*', function(req, res) {
    res.send("404 –– Page not found");
});

var server = app.listen(8080, function () {
    var host = server.address().address
    var port = server.address().port
});

索引文件的路径导致与.js文件保存在同一目录(SublimeFolder)。在该目录中还有我的javascript和css文件。在index.html中,我有以下几行:

<script language="javascript" type="text/javascript" src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="myStyleSheet.css">

我尝试将index.html中的路径更改为计算机上的完整路径,但这并没有解决我的问题。当我在Finder中找到index.html文件并双击时,它会在Chrome中打开file:///Users/JohnFarkerson/Documents/SublimeFolder/index.html,看起来很完美。但是,当我在节点中运行服务器然后转到http://localhost:8080/时,该页面加载了一个非常简单的版本,没有任何我的javascript或css。我在这里做错了什么?

编辑:

它现在有效。 index.html看起来像:

var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/js'));
app.use('/css', express.static(__dirname + '/css'));

app.get('/', function(req, res) {
    res.sendFile('/Users/JohnFarkerson/Documents/SublimeFolder/index.html');
});

app.get('/*', function(req, res) {
    res.send("404 –– Page not found");
});

var server = app.listen(8080, function () {
    var host = server.address().address
    var port = server.address().port
});

2 个答案:

答案 0 :(得分:0)

首先在js文件夹中放置javascript文件,然后在app.js(main node.js文件)中复制此代码:

app.use("/js", express.static(__dirname + '/js'));

答案 1 :(得分:0)

如果您在Chrome中打开file:///Users/JohnFarkerson/Documents/SublimeFolder/index.html,则协议为文件协议。但是如果你打开http://localhost:8080/,它就是一个http协议。快递创建一个http服务器。 .html .css.js文件是http服务器的静态文件。

也许你的目录看起来像这样:

SublimeFolder
|--- index.html
|--- myScript.js
|--- myStyleSheet.css

在文件协议中,您在磁盘中使用绝对路径,根路径为/,因此它可以正常工作。

但在http协议中,根路径是http服务器root,可能会在您的代码中定义,例如:

app.use(express.static(path.join(__dirname, 'public')));

http服务器根目录为your_project_path/public,您应该将js和css文件放在your_project_path/public目录中,然后使用根路径链接主题。例如,公共目录结构是:

your_project_path/public
|--- myScript.js
|--- myStyleSheet.css

script代码为<script src="/myScript.js"></script>

您可以使用Express application generator创建快速项目,并检查项目结构,然后您就可以理解它。