Question

我在letschat文件夹中有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>

$（函数（）{

var socket = io.connect（）;

和我的jquery文件

在这里输入代码

（文档）$。就绪（函数（）{

$（ 'chat_head'）。点击（函数（）{

$（ 'chat_body。 '）的slideToggle（' 慢'）;

}）;

$（ 'msg_head'）。点击（函数（）{

$（ 'msg_box。 '）的slideToggle（' 慢'）;

}）;

$（ “关闭”）。单击（函数（）{

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

}）;

$（ “用户”）。单击（函数（）{

$（ 'msg_wrap。'）示出了（）;

$（ 'msg_box。'）示出了（）;

}）;

App仍处于初始开发阶段。我试图通过聊天框在node express上托管3个文件。但是jquery没有运行。请让我知道要执行的程序。

Answer 1

执行此操作时：

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

您告诉Express，应在/letschat/styles.css中查找__dirname + '/letschat/styles.css'的请求。

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

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

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

在节点表达执行css和js文件没有加载

1 个答案: