Fatal编程技术网
  • javascript/
  • Javascript css未在nodejs web app中呈现

Javascript css未在nodejs web app中呈现

javascript css node.js server

Javascript css未在nodejs web app中呈现,javascript,css,node.js,server,Javascript,Css,Node.js,Server,我用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.ht

我用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无法工作。我确实看到了这个。但这似乎没有道理。任何帮助都将不胜感激。

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

下面是express的一个示例（几乎等于http）

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

下面是express的一个示例（几乎等于http）

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

 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，在这个文件中，我得到了包含css、js和其他内容的文件夹“public”。 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.");
“index.html”的示例：

<!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文件夹：

服务器文件系统：
没有express，我写了一个小模块：

 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，在这个文件中，我得到了包含css、js和其他内容的文件夹“public”。 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.");
“index.html”的示例：

<!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文件夹：

服务器文件系统：

你试过了吗？我想问题可能出在
“Content-Type”：“text/html”
，因为这样只处理html文件（不是css，不是js）。我认为该应用程序还应该包括其他文件类型的单独逻辑。在我看来，css和js文件的index.html是对请求的唯一响应，是索引文件。根据请求提供的任何帮助：打开浏览器控制台，查看css和js文件的404错误。当这样的事情不起作用时，打开控制台（又名DevTools）是第一件要做的事情。你试过了吗？我想问题可能出在
“Content-Type”：“text/html”
，因为这样只处理html文件（不是css，不是js）。我认为该应用程序还应该包括其他文件类型的单独逻辑。在我看来，css和js文件的index.html是对请求的唯一响应，是索引文件。根据请求提供的任何帮助：打开浏览器控制台，查看css和js文件的404错误。打开控制台（也称为DevTools）当这样的事情不起作用时，首先要做的是。还可以在onRequest处理程序中检查从浏览器请求的文件，然后将请求的文件作为响应数据发送。还可以在onRequest处理程序中检查从浏览器请求的文件，然后将请求的文件作为响应数据发送数据。模块是否在server.js文件中？我将index.html、js和css放在公用文件夹中？我重写了答案。您可以在中查看此代码，谢谢。稍后将对此进行查看。模块是否在server.js文件中？我将index.html、js和css放在公用文件夹中？我重写了答案。您可以在“谢谢”中查看此代码，稍后将对此进行查看。