javascript - 将 CSS 链接到 Nodejs 服务器的 HTML

标签 javascript html css node.js

我正在尝试将 styles.css 文件链接到 hello.html 页面以显示在使用 Node.js 的本地主机。但输出仅采用 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>

样式.css

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

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

最佳答案

您可以从下面的链接中获取引用,您还必须使用 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); 

关于javascript - 将 CSS 链接到 Nodejs 服务器的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44943676/

相关文章:

javascript - 我编写的 JQuery 代码停止工作,是否有我忽略的错误?

javascript - 提交时在联系表单的提交按钮旁边显示加载程序

javascript - 用于更改背景图像的多状态动画按钮

css - 在 GWT 中设置 CSS 属性

javascript - Angular 翻译功能未按预期工作

javascript - 如何使用 JavaScript 或 JQuery 获取以像素为单位的默认字体大小?

javascript - 与 IMA.js 的 javascript 同构应用程序

html - 如何制作轮廓表?

javascript - 单击时在 youtube iframe 下隐藏一个 div

html - 在 iFrame 上方弹出/悬停方向或菜单