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

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

如果你使用的是express等框架，

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

您将所有静态文件托管在 Public 文件夹中，如下所示：

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

如果您有一个特定名称为“媒体”的文件夹：

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 文件夹的路径（如果index.html 和webServer.js 在同一个文件夹中，则path 是一个空字符串） .

然后，在您有任何 css 或 js 链接的 html 页面中，您只需将 html 页面所在文件夹的路径放入您的 css 或 js 文件。例如，我在root 中有webServer.js，在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>