Question

我是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

问题＆gt;＆gt;无论我做什么，我的css文件都没有加载。这是经常出错的错误 -

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

不知道该怎么办。我已经2天了，请帮助!!

Answer 1

你的文件名可能不应该有空格，但除了这一点之外。你想要做的是serve a static file.

因为你已经这样做了

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

然后这条线就好了。删除整个http.createServer方法，它应该可以正常工作。

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

根本不需要乱用fs。

修改

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

Answer 2

为什么你同时使用express和http模块？已经快递模块由http模块包装。所以你可以使用快递模块而不是http。这里，使用快速模块的示例。

// proper way in server.js

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

var app = express();

app.use('/app', function(req, res){
    res.sendFile(path.resolve(__dirname, './html/app.html')); // put your app.html's relative path
})

app.use('/app.js', function(req, res){
    res.sendFile(path.resolve(__dirname, './js/app.js')); // put your app.js's relative path
})

app.use('/app.css', function(req, res){
    res.sendFile(path.resolve(__dirname, './css/app.css')); // put your app.css's relative path
})

app.listen(9090, function(err){
    if(err) console.log(err);
    console.log('listening at http://localhost:9090/app');
})

// app.html

<html>
     <head>
          <script src='/app.js'/>
          <link href='/app.css'/>
     </head>
     <body>
          // your elements
     </body>
</html>

在node.js中加载html样式表

2 个答案: