Question

我是新来的。

我有一个网站（index.html），其中包含多个 css 和 js 文件。在本地它工作正常，但如果我启动node-http服务器（调用index.html），网站（localhost:8080）不知道文件。它只向我显示了与javascript文件无关的基本文本（即<h1>）。我在浏览器中检查了源代码以查看index.html。但是，如果我点击 css 和 js 链接，我会被转发回index.html。

我认为，这是一个链接问题。或者您认为问题可能出在节点http服务器实现中？如果你能给我一些支持，对我来说非常有帮助。

谢谢，并祝福，凯文

webServer.js：

var express = require('express');
var connect = require('connect');
var http = require('http');

var path = "";

var app = connect().use(express.static(__dirname + path));
http.createServer(app).listen(8080);

的index.html：

负责人：

<!-- Cascading Style Sheets  -->
<link href="css/custom.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/rickshaw.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/envision.css" media="screen" rel="stylesheet" type="text/css" >

体：

<h1>Data monitoring</h1>

<!-- Drawing rickshaw based charts -->
<div id="chart-type1"></div>
<div id="chart-type2"></div>
<!-- Drawing envision based charts -->
<div id="chart-TimeSeries"></div>
<div id="chart-RealTime"></div>

<!-- JavaScript  -->
<script type="text/javascript" src="lib/d3.min.js"></script>
<script type="text/javascript" src="lib/rickshaw.js"></script>

<script type="text/javascript" src="js/chart.js"></script>
<script type="text/javascript" src="js/chartTimeSeries.js"></script>
<script type="text/javascript" src="js/chartRealTime.js"></script>

<script type="text/javascript" src="js/collectionJson.js"></script>

Answer 1

如果您使用的是快递等框架，

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

您将公共文件夹中的所有静态文件托管如下：

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

如果您有一个特定名称的文件夹为'media'：

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

Answer 2

您必须以这样的方式为所有文件定义路线：

var http = require ('http');
var fs = require('fs');

var port = '8080';

var server = http.createServer(function (req, res) {
   if (request.url === '/') {
       fs.readFile('index.html', function(err, data){
          res.writeHead(200, {'Content-Type': 'text/html'});
          res.end(data, 'utf-8');
       });
   } else if (request.url === '/css/custom.css') {
       /*Read /css/custom.css file*/
   } else if (request.url === '/path/to/other.file') {
       /*Read /path/to/other.file*/
   }
}).listen(port);

但这很难读写，因此最好使用Web框架。您可以尝试使用Express或我编写的框架：Simples。您可以将所有静态文件放在目录中，然后使用以下代码：

var simples = require('simples');

var server = new simples(8080);

server.serve('path/to/staticFiles');

// or in some special cases:

server.get('/some_url', function (connection) {
    connection.header('X-Some-Header', 'Header Value'); // Set a header
    connection.drain('some_local_file.ext');
});

Answer 3

您可以使用express或connect（使用npm安装它们）来创建将使用http.createServer()托管的应用程序。您将写入webServer.js：

var http = require('http');
var connect = require('connect');
var app = connect().use(connect.static(__dirname + path));
http.createServer(app).listen(8080);

其中path是从您的根文件夹（您有webServer.js）到index.html文件夹的路径path是一个空字符串，如果index.html和webServer.js在同一文件夹中。）

然后，在你有任何css或js链接的html页面中，你只需要将html页面所在文件夹的路径放到你的css或js文件中。例如，webServer.js中有root，html文件夹中有html，js文件夹中有js。在我的HTML中，我将放置：<script src="../js/myjsfile.js"></script>。

请注意，您将无法找到高于服务器根目录的路径。

Answer 4

在你的html文件中使用它

<script>
     $.getScript("/js/yourjsfile.js", function () {
       //alert("Script loaded and executed.");
       // Here you can use anything you defined in the loaded script
    });
</script>

如何在节点http服务器的html中包含css / js

4 个答案: