[英]at node express execution css and js files are not loading
I am having index.html, css and js files in letschat folder. 我在letchat文件夹中有index.html,css和js文件。 After running the node express server it is not loading the css and js files.
运行节点快速服务器后,它不会加载css和js文件。 I am giving the server.js code.
我正在提供server.js代码。 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');
});
my 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>
$(function(){ $(function(){
var socket = io.connect(); var socket = io.connect();
and my jquery file 和我的jQuery文件
enter code here 在这里输入代码
$(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 is still in initial development phase. App仍处于初始开发阶段。 I am trying to host the 3 files on node express with chat box.
我试图将3个文件托管在带有聊天框的express节点上。 but jquery is not functioning.please let me know the procedure to do.
但是jquery无法运行。请让我知道要执行的步骤。
When you do this: 执行此操作时:
app.use("/letschat", express.static(__dirname + '/letschat'));
you're telling Express that a request for /letschat/styles.css
should be looked for in __dirname + '/letschat/styles.css'
. 你告诉表达了请求
/letschat/styles.css
应被看作对__dirname + '/letschat/styles.css'
。
So, for that to work properly, the URL in your HTML page would have to be /letschat/styles.css
. 因此,为了使其正常工作,HTML页面中的URL必须为
/letschat/styles.css
。
If you want the URL in your web page to just be /styles.css
, then change your server code to: 如果您希望网页中的URL只是
/styles.css
,则将服务器代码更改为:
app.use(express.static(__dirname + '/letschat'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.