1
我做了一個html網頁，其中附有.css，圖像和javescript文件。然而，當我用下面的命令來運行我的節點服務器：無法通過使用節點js服務器訪問html的內容，
app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); });
但它卻可以在本地主機上我的網頁，但提供了錯誤，它找不到附加文件，如樣式表圖像和腳本。如果我只是運行我的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>
我不知道你在哪裏，包括任何CSS文件在您的HTML無論如何 –
我已經使用