将CSS链接到nodejs服务器的HTML [重复]答案

【问题标题】：Link CSS to HTML for nodejs server [duplicate]将CSS链接到nodejs服务器的HTML [重复]
【发布时间】：2017-12-10 03:39:15
【问题描述】：

我正在尝试将 styles.css 文件链接到 hello.html 页面以显示在使用 nodejs 的本地主机。但输出仅以 html 格式显示，不显示 css 样式。

这是我的代码！

project.js

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

http.createServer(function (req,res){
    fs.readFile('hello.html',function(err,data){
    res.writeHead(200,{'Content-Type': 'text/html'});
    res.write(data);
    res.end();
  });

}).listen(8080);

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="heading">
    <h1>FILE UPLOADING!</h1>
</div>

<form method= "POST" enctype="multipart/form-data" action="fileupload">
<input type="file" name="filetoupload">
<input type="submit" id='bt' value="Submit">
</form>


</body>
</html>

style.css

#heading{
    color:green;
    font-family: sans-serif,serif;
}

#bt{
 background-color: #4CAF50;
color: #ffffff;
border-color: #4CAF50;
}

【问题讨论】：

您的 HTML 代码中是否需要 CSS 文件？如果是这种情况，浏览器会向 Node 提出请求，Node 必须提供服务并将其发送给浏览器。
是的.. 检查 html 代码。我已经链接了css文件。但不起作用。
styles.css和html文件在同一个目录吗？
是的.. 相同的目录..html 在不在本地主机中查看时可以与 css 一起使用.. 所以基本上我想知道为什么它在使用 nodejs 的本地主机上不起作用。
因为你没有路线。节点是低级的，它不是试图变得“聪明”或任何东西。它正在做你告诉它做的事情。您正在请求一个 CSS 文件，但您没有编写任何指令（没有路线，没有文件夹指示）来处理这个请求。现在有了 Express，这很容易（这甚至是 Express 的全部意义所在），但是在没有 Express 的纯 Node 中，我不知道该怎么做。

标签： javascript html css node.js

【解决方案1】：

你可以试试这个！

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

http.createServer(function (req, res) {
    let route = req.url.replace('/', '')

    let request_url = route === '' || route === '/' ? 'hello.html' : route

    console.log(request_url)

    fs.exists(request_url, (exist) => {
        if (Boolean(exist) === false) {
            res.writeHead(404, {'content-type': 'text/html'})
            res.end('Page Not Found')
            return null
        }

        fs.readFile(request_url, function (err, data) {
            res.writeHead(200)
            res.write(data)
            res.end()
        })
    })
}).listen(8080)

【讨论】：

【解决方案2】：

您可以从下面的链接中获取参考，您还必须使用 http 来提供您的 css 文件。 Node.js serve multiple files in one request代码：

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

            http.createServer(function (req,res){
                if(req.url === '/hello.html') {
                fs.readFile('hello.html',function(err,data){
                res.writeHead(200,{'Content-Type': 'text/html'});
                res.write(data);
                res.end();
              });
                }
                else if(req.url === '/style.css') {
                fs.readFile('style.css',function(err,data){
                res.writeHead(200,{"Content-Type": "text/css"});
                res.write(data);
                res.end();
                });
                }

            }).listen(8080);

【讨论】：

@sreekant-shenoy 如果它适合您，请告知并批准 ans :)
你也可以使用 express 来获得更好的路由灵活性，正如 @Jeremy Tille 在 cmets 中提到的那样
当然，因为这看起来是一种处理路线的非常冗长和令人厌烦的方式。
谢谢大家！它的工作..我也会用快递学习。 :)
@SreekantShenoy 你能接受我的回答吗：D