0

我在letschat 文件夹中有index.html、css 和js 文件。运行 node express 服务器后,它不会加载 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>

$(函数(){

var socket = io.connect();

和我的 jquery 文件

在此处输入代码

$(文档).ready(函数(){

$('.chat_head').click(function(){

$('.chat_body').slideToggle('slow');

});

$('.msg_head').click(function(){

$('.msg_box').slideToggle('slow');

});

$(".close").click(函数(){

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

});

$(".user").click(function(){

$('.msg_wrap').show();

$('.msg_box').show();

});

应用程序仍处于初始开发阶段。我正在尝试使用聊天框在 node express 上托管 3 个文件。但 jquery 无法运行。请让我知道要执行的程序。

4

1 回答 1

1

当你这样做时:

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

你告诉 Express/letschat/styles.css应该在__dirname + '/letschat/styles.css'.

因此,要使其正常工作,您的 HTML 页面中的 URL 必须是/letschat/styles.css.

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

app.use(express.static(__dirname + '/letschat'));
于 2016-09-06T06:39:24.493 回答