0
私はgetschatフォルダにindex.html、cssおよびjsファイルを持っています。ノードエクスプレスサーバーを実行すると、cssファイルとjsファイルはロードされません。私はserver.jsコードを与えています。問題の解決方法を教えてください。ノードエクスプレス実行時CSSおよびjsファイルがロードされていません
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
users = [];
connections = [];
app.use("/letschat",express.static(__dirname + '/letschat'));
app.listen(process.env.PORT || 3000);
console.log('Server running....');
app.get('/letschat', function(req, res){
res.sendFile(__dirname + '/index.html');
});
私のindex.html ---
enter code here
<script src="http://code.jquery.com/jquery-2.1.0-rc1.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/letschat/chat.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<style>
body{
background: skyblue;
margin:0px;
}
.chat_box,.msg_box{
position: fixed;
cursor: pointer;
bottom:0px;
background: white;
right:20px;
width:250px;
border-radius: 5px 5px 0px 0px;
}
.chat_head,.msg_head{
background:#3498db;
padding: 15px;
color:white;
border-radius: 5px 5px 0px 0px;
}
.chat_body{
height:300px;
}
.user{
cursor: pointer;
padding :20px;
position: relative;
}
.user:hover{
background: orange;
}
.user:before{
content:"";
position:absolute;
background: green;
width:10px;
height:10px;
left:6px;
top:25px;
border-radius: 5px;
}
.msg_box{
width:250px;
background: white;
height: 300px;
bottom:-5px;
}
.close{
float: right;
}
.msg_body{
background: white;
font-size: 14px;
width: 250px;
height: 200px;
overflow: auto;
overflow-x: hidden;
}
.msg_footer{
}
.msg_input {
border: transparent;
border-top: 2px solid green;
width: 100%;
padding: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.msg_a{
margin-left: 20px;
padding: 15px;
background: orange;
position: relative;
}
.msg_a:before{
content: "";
position: absolute;
width: 0px;
left: -30px;
top :10px;
height: -9px;
border: 15px solid;
border-color: transparent orange transparent transparent;
}
.msg_b{
margin-right: 20px;
padding: 15px;
background: skyblue;
position: relative;
}
.msg_b:before{
content: "";
position: absolute;
width: 0px;
right:-30px;
top :10px;
height: -9px;
border: 15px solid;
border-color: transparent transparent transparent skyblue ;
}
</style>
</head>
<body>
<div>TODO write content</div>
<div class="chat_box">
<div class ="chat_head"> Chathead </div>
<div class ="chat_body">
<div class="user" >Sunil Kumar</div>
</div>
</div>
<div class="msg_box" style="right:300px">
<div class="msg_head">Sun
<div class="close">x</div>
</div>
<div class="msg_wrap">
<div class="msg_body">
<div class="msg_a">This is from a</div>
<div class="msg_b">This is from b</div>
<div class="msg_insert"></div>
</div>
<div class="msg_footer"><textarea class="msg_input" rows="4">sample</textarea></div>
</div>
</div>
<script>
$（関数（）{
VARソケット= io.connect（）;
と私のjqueryのファイル
が入り、ここでコード
$（ドキュメント）.ready（関数（）{
$（ 'chat_head'） .click（function（）{
$（ '。chat_body'）。slideToggle （'スロー'）;
}）; 。
$（ 'msg_head '）をクリックし（関数（）{
$（' msg_box。 '）slideToggle）（' 遅い';
}）。 （ "閉じる"）
$クリック（関数（）{
$('.msg_box').hide();
}）。 。。 "msg_box '
$（）ショー（）;
$（ '利用者'）（機能（）{
$（'。msg_wrap"）ショー（）をクリックしてください。
}）;
アプリはまだ初期段階にあります。私はチャットボックスでノードエクスプレスで3つのファイルをホストしようとしています。 jqueryは機能していません。実行する手順を教えてください。
なぜあなたは「あなたのパブリックディレクトリ内の「/ letschat」フォルダのためのルータが含まれています/とにかくエクスプレスで扱われるサブフォルダ内のindex.htmlが見つかりませんか？ – traktor53