在节点表示执行css和js文件未加载

Question

我在letchat文件夹中有index.html，css和js文件。 运行节点快速服务器后，它不会加载css和js文件。 我正在提供server.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>

$（function（）{

var socket = io.connect（）;

和我的jQuery文件

在这里输入代码

$（document）.ready（function（）{

$（'。chat_head'）。click（function（）{

$（'。chat_body'）。slideToggle（'slow'）;

}）;

$（'。msg_head'）。click（function（）{

$（'。msg_box'）。slideToggle（'slow'）;

}）;

$（“。close”）。click（function（）{

$('.msg_box').hide();

}）;

$（“。user”）。click（function（）{

$（'。msg_wrap'）。show（）;

$（'。msg_box'）。show（）;

}）;

App仍处于初始开发阶段。 我试图将3个文件托管在带有聊天框的express节点上。 但是jquery无法运行。请让我知道要执行的步骤。

Answer 1

执行此操作时：

app.use("/letschat", express.static(__dirname + '/letschat'));

你告诉表达了请求/letschat/styles.css应被看作对__dirname + '/letschat/styles.css' 。

因此，为了使其正常工作，HTML页面中的URL必须为/letschat/styles.css 。

如果您希望网页中的URL只是/styles.css ，则将服务器代码更改为：

app.use(express.static(__dirname + '/letschat'));

在节点表示执行css和js文件未加载

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-09-06 06:39:24

在节点表示执行css和js文件未加载

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-09-06 06:39:24

解决方案1
1 已采纳 2016-09-06 06:39:24