静态文件，带有 Node.js 和 Express 的样式表
Posted
技术标签:
【中文标题】静态文件，带有 Node.js 和 Express 的样式表【英文标题】：Static file, stylesheet with Node.js and Express 【发布时间】：2014-03-16 23:14:52 【问题描述】：我是 Nodejs 的新手，我无法让我的样式表（和 js 文件）与我的 Node.js 服务器一起工作。我尝试了很多东西，但没有任何效果。请问你能帮帮我吗 ？ 我的样式表位于“公共”文件夹中。
Server-side :
var http = require('http');
var fs = require('fs');
var express = require('express');
var path = require('path');
var app = express();
// Chargement du fichier index.html affiché au client
var server = http.createServer(function(req, res)
fs.readFile('./index.html', 'utf-8', function(error, content)
res.writeHead(200, "Content-Type": "text/html");
res.end(content);
);
);
app.use(express.static(path.join(__dirname, 'public')));
// Chargement de socket.io
var io = require('socket.io').listen(server);
io.sockets.on('connection', function (socket, pseudo)
// Quand on client se connecte, on lui envoie un message
socket.emit('message', 'Vous êtes bien connecté !');
// On signale aux autres clients qu'il y a un nouveau venu
socket.broadcast.emit('message', 'Un autre client vient de se connecter ! ');
// Dès qu'on nous donne un pseudo, on le stocke en variable de session
socket.on('petit_nouveau', function(pseudo)
socket.set('pseudo', pseudo);
);
// Dès qu'on reçoit un "message" (clic sur le bouton), on le note dans la console
socket.on('message', function (message)
// On récupère le pseudo de celui qui a cliqué dans les variables de session
socket.get('pseudo', function (error, pseudo)
console.log(pseudo + ' me parle ! Il me dit : ' + message);
);
);
);
server.listen(8080);
客户端：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Chat par navigateur</title>
<link rel="stylesheet" href="public/css/stylesheet.css">
<!-- <link rel="icon" type="image/png" href="img/favicon.png" /> -->
</head>
<body>
<h1>SALUTATIONS</h1>
<p><input type="button" value="Parler au serveur" id="poke" /></p>
<!-- <script type="text/javascript" src="js/jQuery.js"></script> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:8080');
socket.on('message', function(message)
alert('Le serveur a un message pour vous : ' + message);
)
$('#poke').click(function ()
alert("ok");
socket.emit('message', 'Salut serveur, ça va ?');
)
</script>
</body>
</html>
【问题讨论】：
这是整个代码吗？提供静态文件/样式表的代码在哪里？ 是的，这是整个代码。不是“app.use(express.static(path.join(__dirname, 'public')));” ?或者也许我错过了一些东西.. 是的，我没有注意到那行代码，当您尝试浏览 localhost url 时，express 会记录任何内容吗？ 嗯，我只是在控制台中有这个：“信息 - socket.io 开始调试 - 提供静态内容 /socket.io.js 调试 - 客户端授权信息 - 握手授权 LxFKCDd3_g8Q4P_5Qnek 调试 - 设置请求 GET / socket.io/1/websocket/LxFKCDd3_g8Q4P_5Qnek 调试 - 为客户端设置心跳间隔 LxFKCDd3_g8Q4P_5Qnek 调试 - 客户端授权调试 - websocket 写入 1:: 调试 - websocket 写入 5:::"name":"message","args": ["Vous êtes bien conne cté !"] 调试 - 广播数据包" 【参考方案1】：如果您使用的是 Express 3.x，请尝试以下操作：
var http = require('http');
var express = require('express');
var path = require('path');
var app = express();
app.get('/', function(req, res)
res.sendfile('/index.html');
);
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
var server = http.createServer(app);
var io = require('socket.io').listen(server);
/* Your socket event handlers are here.*/
server.listen(8080);
【讨论】：
我试过了，但现在在 localhost 页面上写着“Cannot GET /” @Hornlame 更新代码以添加路由处理程序。 现在我有“GET localhost:8080/public/css/stylesheet.css404（未找到）”，我在本地工作，这是我无法解决的问题（因为公用文件夹在我的硬盘中）.. 在index.html 中，将<link rel="stylesheet" href="public/css/stylesheet.css"> 更改为<link rel="stylesheet" href="/css/stylesheet.css">
非常感谢，它成功了！现在可以试试Node了，以后会研究express的东西。以上是关于静态文件，带有 Node.js 和 Express 的样式表的主要内容，如果未能解决你的问题，请参考以下文章
Node.js 公共静态文件夹，用于为 js 提供 utf-8 字符集
使用 Node JS / Express 提供包含图像的静态 HTML 页面
Express （RoutingMiddleware托管静态文件view engine 等等）