javascript - 如何在 Node http 服务器的 html 中包含 css/js

Question

我是新来的。

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

我想，这是一个链接问题。或者您认为问题可能出在 Node 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 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');
});