在节点表示执行css和js文件未加载 [英] at node express execution css and js files are not loading
问题描述
我在letchat文件夹中有index.html，css和js文件.运行节点快递服务器后，它不会加载css和js文件.我正在提供server.js代码.请让我知道如何解决该问题.
I am having index.html, css and js files in letschat folder. After running the node express server it is not loading the css and js files. I am giving the server.js code. please let me know how to resolve the issue.
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--
my 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>
$(function(){
$(function(){
var socket = io.connect();
var socket = io.connect();
和我的jquery文件
and my jquery file
在此处输入代码
$(document).ready(function(){
$(document).ready(function(){
$('.chat_head').click(function(){
$('.chat_head').click(function(){
$('.chat_body').slideToggle('slow');
$('.chat_body').slideToggle('slow');
});
$('.msg_head').click(function(){
$('.msg_head').click(function(){
$('.msg_box').slideToggle('slow');
$('.msg_box').slideToggle('slow');
})；
$(.close").click(function(){
$(".close").click(function(){
$('.msg_box').hide();
});
$(.user").click(function(){
$(".user").click(function(){
$('.msg_wrap').show();
$('.msg_wrap').show();
$('.msg_box').show();
$('.msg_box').show();
});
App仍处于初始开发阶段.我试图将3个文件托管在带有聊天框的express节点上.但是jquery无法正常工作.请让我知道要执行的步骤.
App is still in initial development phase. I am trying to host the 3 files on node express with chat box. but jquery is not functioning.please let me know the procedure to do.
推荐答案
执行此操作时:
app.use("/letschat", express.static(__dirname + '/letschat'));
您告诉Express，应该在__dirname + '/letschat/styles.css'中查找对/letschat/styles.css的请求.
you're telling Express that a request for /letschat/styles.css should be looked for in __dirname + '/letschat/styles.css'.
因此，要使其正常工作，HTML页面中的URL必须为/letschat/styles.css.
So, for that to work properly, the URL in your HTML page would have to be /letschat/styles.css.
如果您希望网页中的URL仅是/styles.css，则将服务器代码更改为:
If you want the URL in your web page to just be /styles.css, then change your server code to:
app.use(express.static(__dirname + '/letschat'));
这篇关于在节点表示执行css和js文件未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
