无法在node.js中加载js和css文件

时间:2015-11-17 09:48:44

标签: javascript html css node.js

这是html页面。我从node.js服务器调用此页面,即app.js.Here我无法加载socket.io.js,bootstrap.js,bootstrap.css页面

我的index.html:

<html>
<script type="text/javascript" src="/javascripts/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type ="text/javascript" src="/javascripts/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.css" />


<div id="progressbar">
</div>

<script>
  var socket = io('http://localhost:8085');
  socket.on('connect', function(){});
  socket.on('message', function(data){
    $('#progressbar').progressbar({
    maximum: 100,
    step: JSON.parse(data).percent
    });
  });
  socket.on('disconnect', function(){});
</script>
</html>

我的app.js代码:

var app = express ();
var http = require('http').Server(app);
var io = require('socket.io')(http);
http.listen(8085, function(){
    console.log('listening on *:8085');
});

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

app.get('/', function (req, res) {
 res.sendfile(__dirname + '/index.html');
//res.send('Hello World!');

});

在萤火虫中,我正面对这个 enter image description here

3 个答案:

答案 0 :(得分:1)

您为静态文件设置了错误的路径。

在你的情况下,你需要使用它:

app.use('/javascripts', express.static(__dirname + '/javascripts'));
app.use('/stylesheets', express.static(__dirname + '/stylesheets'));

现在, javascripts stylesheets 文件夹中的任何文件都将作为静态文件加载。

您当前使用静态文件的方法:

app.use(express.static(path.join(__dirname, 'public')));

这会将 public 文件夹下的所有内容加载为静态文件,因此如果您需要移动 javascripts 样式表文件夹想要那个工作。

答案 1 :(得分:0)

将您的视图引擎更改为html并修改如下代码:

app.set('views', path.join(__dirname, 'public'));
app.set('view engine', 'html');

并更改sendfile方法:

res.sendFile(path.join(__dirname, '../YOUR_FOLDER_NAME/public', 'index.html'));

EDITED ::

更改index.html文件:

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/test.css" />

答案 2 :(得分:0)

这是app.js. (基于@Andrius&#39;解决方案)我能够在http://localhost:8085上运行它。 index.html保持不变。

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');

var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
http.listen(8085, function(){
    console.log('listening on *:8085');
});

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
//app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

//test
app.use('/javascripts', express.static(__dirname + '/javascripts'));
app.use('/stylesheets', express.static(__dirname + '/stylesheets'));

app.use(express.static(path.join(__dirname, 'public')));

//app.use('/', routes);
//app.use('/users', users);

app.get('/', function (req, res) {
 res.sendfile(__dirname + '/index.html');
//res.send('Hello World!');

});