2014-09-29 39 views
2

我的nodeJS應用程序非常簡單,但我很難將我的JavaScript文件鏈接到它。通常情況下,您只需將腳本放在標題中。這顯然不適用於Node,所以試圖通過sendFile和其他一些方法來鏈接它,但沒有一個能夠工作。如何使用express和nodeJS將javascript文件鏈接到html頁面

我的JavaScript很簡單:

var express = require('express'); 
var app = express(); 


app.get('/',function(req, res) { 
    res.sendFile(__dirname + '/index.html'); 
    res.send() 
}); 
app.listen(8888) 

我的HTML也很簡單:

<html> 
<head> 
    <title>Charter</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
</head> 
<body> 
    <div id="container" style="width:100%; height:400px;"></div> 
    <button id="button" class="autocompare" onclick="plotNewChart()">Add series</button> 
    <script type="text/javascript"> 
     $(function() { $('#container').highcharts({ chart: { events: { addSeries: function() { var label = this.renderer.label('A series was added, about to redraw chart', 100, 120).attr({ fill: Highcharts.getOptions().colors[0], padding: 10, r: 5, zIndex: 8 }) .css({ color: '#FFFFFF' }) .add(); setTimeout(function() { label.fadeOut(); }, 1000); } } }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); }); 
    </script> 
</body> 
</html> 

我想要做的就是鏈接的另一個文件,myJS.js。我不知道如何做到這一點,沒有典型的`

+0

你鏈接的JavaScript是服務器端。把它放在項目根目錄下的.js文件中,並用''node filename.js'''啓動它' – 2014-09-29 20:50:16

+0

有沒有辦法讓javascript客戶端? – maudulus 2014-09-29 20:52:13

+0

我不確定快遞是否有能力,甚至有可能運行客戶端。但那是我自己的經驗。 – 2014-09-29 20:56:29

回答

6

你需要設置你的快遞服務器來提供靜態文件。目前,它似乎只服務於'/'路線。

在設置路由之前,添加下面的行。然後,您可以從「公共」文件夾提供相對於您的腳本的靜態資產。

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

所以,如果你把你的myJS.jspublic/js/myJS.js之後就可以引用它像這樣

<script src="/js/myJS.js"></script> 

更多信息的文檔:http://expressjs.com/api.html#express.static

+0

我鏈接創建了一個新的快速應用程序,遵循我在下面的鏈接和您的指示閱讀。然而,我想我必須使用'app.engine('html',require('ejs')。renderFile);'以便不必在「jade」中編寫html。此外,出於某種原因,即使css在我創建快速應用程序(不添加我的靜態html)時創建了快捷應用程序,javascript也不會鏈接。你知道爲什麼嗎? http://stackoverflow.com/questions/11710995/how-to-include-css-and-js-files-in-node-js-project – maudulus 2014-09-30 17:06:02

+0

哦,我看到 - layout.jade頁面已自動鏈接到CSS,所以我可以通過那裏鏈接我的js。仍然不能用靜態獲得它,但是:| – maudulus 2014-09-30 17:28:02

+0

您需要添加:'var path = require('path');否則代碼將導致錯誤。 – 7stud 2014-11-25 09:12:02

相關問題