我创建了一个html网页，其上附有.css，images和javescript文件。但是，当我使用以下命令运行我的节点服务器时：
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
它确实在localhost上打开了我的网页，但是却发现无法找到附加文件（例如样式表图像和脚本）的错误。如果我只是运行我的index.html页面，它工作正常。错误在哪里？
我所做的是分别运行我的index.html和server.js，它确实有效。但每当我尝试通过节点服务器发布index.html页面时，它都不起作用。
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var fs = require('fs');
server.listen(8080, function() {
console.log("wagwan")
});
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket) {
socket.on('turnon', function(data) {
console.log(data.turnon);
//serialPort.write("on");
});
socket.on('turnoff', function(data) {
console.log(data.turnoff);
// serialPort.write("off");
});
}); .background {
background-repeat: no-repeat;
/* custom background-position */
background-position: 50% 50%;
/* ie8- graceful degradation */
background-position: 50% 50%\9 !important;
}
/* fullscreen setup */
html,
body {
/* give this to all tags from html to .fullscreen */
height: 100%;
}
.fullscreen,
.content-a {
width: 100%;
min-height: 100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
height: 100%;
overflow: hidden;
}
/* content centering styles */
.content-a {
display: table;
}
.content-b {
display: table-cell;
position: relative;
vertical-align: middle;
text-align: center;
color: #2d2bde;
font-size: 35px;
font-family: 'Arial Rounded MT';
}
/* visual styles */
body {
margin: 0;
font-family: sans-serif;
font-size: 28px;
line-height: 100px;
color: #ffffff;
text-align: center;
}
section {
background: #9ed100;
}
.not-fullscreen {
height: 50%;
}
button,
.button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
background: none;
background-color: #199cd8;
background-clip: border-box;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
outline: none;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
padding: 0 20px;
text-transform: uppercase;
line-height: 40px;
display: inline-block;
zoom: 1;
*display: inline;
box-shadow: none;
text-shadow: none;
}
.top {
background-color: #199cd8;
height: 68px;
padding-top: 20px;
line-height: 50px;
overflow: hidden;
}
.banner {
padding: 1px 16px;
}
.w3-wide {
font-family: "Segoe UI", Arial, sans-serif !important;
letter-spacing: 4px;
}
.w3-right {
float: right !important;
}
.sitelogo {
margin: 0;
margin-right: 20px;
width: 60px;
height: 60px;
border: none;
}<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset="utf-8">
<meta name="description" content="Web to serial Arduino">
<title>Web to serial Arduino</title>
<script src="socket.io/node_modules/socket.io-client/socket.io.js"></script>
<script>
//var socket = io.connect('http://localhost:8080');
var socket = io('http://localhost:8080', {
'transports': ['websocket', 'polling']
});
</script>
</head>
<body>
<div class="banner top">
<a href="index.html">
<img src="Drawing.png" alt="logo" class="sitelogo">
</a>
<div class="w3-right toptext w3-wide">An Arduino project for robotic Arm</div>
</div>
<div class="fullscreen background" style="background-image:url('http://cdns.nocamels.com/wp-content/uploads/2013/10/bigstock-Business-technologies-today-43292197.jpg');" data-img-width="1600" data-img-height="1064">
<div class="content-a">
<div class="content-b">
<br>WELCOME TO Arduino "A simple function to test node.js"
<br>
<div class="button" onclick="socket.emit('turnon', { turnon:'on'});">
Turn On
</div> <span style="color: #ffffff;"><a class="button primary-button" onclick="socket.emit('turnoff', {turnoff:'off'});">Turn off</a> </span>
<br>
<div class="button" onclick="console.log('connected');">
connect
</div> <span style="color: #ffffff;"><a class="button primary-button" onclick="console.log('reset');">Reset</a> </span>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
您要做的是提供“静态”文件。 Javascript，CSS等称为静态文件。
您的路线：
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
正在发送您的index.html文件，但您的node.js服务器（快速应用程序）未提供您的静态文件。
类似的东西：
app.use(express.static('public'));
或
app.use(express.static(__dirname + '/public'));
应该为你解决问题。
“在Express - express.static中使用内置中间件帮助完成服务文件，例如图像，CSS，JavaScript和其他静态文件。
将目录的名称（将被标记为静态资产的位置）传递给express.static中间件，以便直接开始提供文件。例如，如果将图像，CSS和JavaScript文件保存在名为public的目录中，则可以执行以下操作：“
http://expressjs.com/starter/static-files.html
此外，您似乎正在使用套接字。我建议你在进入socket之前先学习express和node。简化您的代码，将其缩小到具体细节，并了解它的工作原理。 Socket非常酷，但很多项目都不需要。
答案 1 :(得分：0)
您必须指定在express中提供静态文件的路径，如下所示：
app.use('/socket.io', express.static('socket.io'));
同时将socket.io替换为HTML中的/socket.io