Question

我已经整理了一个小应用程序并使用html，css和javaScript。现在我想在nodejs服务器上运行它。我已经为服务器创建了一个单独的文件，以便使用以下代码开始运行。

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

function onRequest(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
fs.readFile('./index.html', null, function(error, data) {
    if (error) {
        response.writeHead(404);
        response.write('File not found');
    } else {
        response.write(data);
    }
    response.end();
  });

}

http.createServer(onRequest).listen(3000, function(){
console.log("The server has started");
});

现在html正在渲染，但CSS没有渲染。另外，链接到html的JavaScript无效。我确实看到了Nodejs static file。但这似乎没有意义。任何帮助将不胜感激。

Answer 1

你（有点）必须使用静态文件。因为在您的示例中，即使请求了CSS或JS文件，也始终发送index.html文件。

下面是一个快递（几乎等于http）的例子

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

var app = express();

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

app.listen(PORT);

Answer 2

没有表达，我写了一个小模块：

 var fs = require('fs');
module.exports = {
    getFile: function(url) {
        var text = '404';
        try {
            url = url.split('?')[0];
            if (url === '/') {
                url = '/index.html';
            }
            text = fs.readFileSync('./public' + url);
            if (url === '/index.html') {
                text = text.toString().replace(/version=/g, "version=" + Date.now());
            }
            return text;
        } catch (e) {
            return text + ' ' + e;

        }
    }
};

- 是route.js，在这个文件中我收到了文件夹＆＃39; public＆＃39;与css，js等。 index.js：

var http = require("http");
var route = require('./route');

var html; 

     function onRequest(request, response) {
          if (request.method === 'GET') {
                response.writeHead(200);
                response.write(route.getFile(request.url));
                response.end('');
            } 
        }
        http.createServer(onRequest).listen(8888);
        console.log("Server has started.");

＆＃39; index.html＆＃39;的例子：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css?version=">
    <title>test table</title>
</head>

<body>

    <div contenteditable="true">
        Example
    </div>
    <script src="js/table_creator.js?version="></script>
    <script src="js/table_controller.js?version="></script>
    <script src="js/table_size.js?version="></script>
    <script src="js/table_core.js?version="></script>
    <script src="js/index.js?version="></script>
</body>

</html>

publick文件夹：

服务器文件系统：

css没有在nodejs web app中呈现

2 个答案: