gpt4 book ai didi

javascript - 在 node.js 中加载 html 样式表

转载 作者:太空宇宙 更新时间:2023-11-04 08:30:02 24 4
gpt4 key购买 nike

我是 node.js 的初学者,我正在 w3schools 学习它。

最近在学习的时候File System ,我遇到了 fs.readFile 方法。作为它的第一个参数,我为它提供了一个指向先前创建的 html 文件的链接。现在该文件附加了一个 css 样式表,我编辑了它的 href(很明显)。这标志着我的问题的开始。

在几个网站上大量阅读并多次编辑我的代码后,这是我的代码的最终版本。

我的js、html和css如下——

var http = require('http'),
fs = require('fs'),
path = require('path'),
express = require('express'),
app = express();

app.use(express.static(path.join(__dirname, '/public')));

http.createServer(function (req, res) {
fs.readFile('.CSS Transitions - timing function.html', function (err, data) {
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end(data);
});
}).listen(8080);

console.log('Server running at =>\n localhost:8080\nCtrl + C to quit');
a
{
transition : color 1s, font-size .5s;
transition-timing-function : ease;
color : black;
font-size : 30px;
}

a:hover
{
color : red;
font-size : 40px;
}
<!DOCTYPE html>


<html>
<head>
<title>Transition</title>
<link rel='stylesheet' type='text/css' href='css/CSS Transitions - timing function.css'>
</head>
<body>
<h2>Links</h2>
<ul>
<li><a href='http://www.htmldog.com'>HTML-Dog</a></li>
<li><a href='http://www.imdb.com'>IMDb</a></li>
<li><a href='http://www.youtube.com'>YouTube</a></li>
</ul>
</body>
</html>

我的目录结构是

js file
html file
/public
/css
css file

问题>> 无论我做什么,我的 css 文件都没有加载。这是常见的错误-

资源解释为样式表但使用 MIME 类型文本/html 传输:“http://localhost:8080/css/CSS%20Transitions%20-%20timing%20function.css”。

不知道该怎么办了。我已经用了 2 天了,请帮忙!!

最佳答案

您的文件名中可能不应该有空格,但这不是重点。看起来你想做的是 serve a static file.

既然你已经这样做了

app.use(express.static(path.join(__dirname, '/public')));

那么就这一行就好了。删除整个 http.createServer 方法,它应该可以正常工作。

href='/css/CSS Transitions - timing function.css'

根本不需要乱用 fs。

编辑

我认为使用 express 执行此操作的首选方法是我上面写的,但也许将 header 类型从 text/html 更改为 text/css 也可以吗?

关于javascript - 在 node.js 中加载 html 样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44864125/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com