gpt4 book ai didi

html - Nodejs + 人力车 : src= reference not working

转载 作者:太空宇宙 更新时间:2023-11-03 23:43:45 25 4
gpt4 key购买 nike

我正在尝试制作一个应用程序来生成 Twitter 字数的“实时”图表,基本上是尝试在 24 小时内扩展和练习 NodeJS 第 14 章。我决定使用“Rickshaw”,并且我想我应该从简单地运行一个简单的示例开始。但是,虽然我可以加载一个简单的 html 页面,但无法显示图表。 Firefox 调试指示:“ReferenceError: Rickshaw is not Defined [Break On This Error] graph = new Rickshaw.Graph( { "。这意味着存在引用错误,但经过几个小时的谷歌搜索和阅读后,我没有发现看到了。目录结构是正确的;npm 正确安装了所有模块,没有错误。有人能看到我缺少什么吗?

注意:我是 JS/Node 的新手,虽然这本书是在 Express 2.x 中工作的,但我一直在 Express 3.x 中工作,所以不确定我是否在所有情况下都得到了正确的翻译。代码如下:

package.json

    {
"name":"socket.io-twitter-example",
"version": "0.0.1",
"private": "true",
"dependencies": {
"express": ">=2.5.4",
"rickshaw": ">=1.1.0"
}
}

app.js

    var express = require('express'),
rickshaw = require('rickshaw'),
app = express(),
http = require('http'),
server = http.createServer(app)

server.listen(3000);
app.get('/', function (req,res) {
res.sendfile(__dirname + '/index.html');
});

index.html

    <!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8" />
<title>Socket.IO Twitter Example</title>
</head>
<body>
<h1>Rickshaw Example</h1>


<div id="chart"></div>
<ul class="tweets"></ul>

<script type="text/javascript" src="node_modules/rickshaw/vendor/d3.v2.js"></script> //don't think "node_modules/" is required, but doesn't work without either
<script type="text/javascript" src="node_modules/rickshaw/rickshaw.min.js"></script>

<script>
graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 285,
height: 180,
series: [{
color: 'steelblue',
data: [
{ x: 0, y: 40 },
{ x: 1, y: 49 },
{ x: 2, y: 38 },
{ x: 3, y: 30 },
{ x: 4, y: 32 } ]
}]
});
graph.render();
</script>


</body>
</html>

最佳答案

您需要配置 express.static 中间件,以便 express 知道在哪里查找 js 和 css 文件等静态资源:

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

通常将此类资源放入 public 文件夹(如上例所示)或 static 文件夹中。

如果您创建一个 public 文件夹并按如下方式组织它

app.js
public
rickshaw
vendor
d3.v2.js
rickshaw.min.js

然后您就可以使用以下命令将文件正确加载到 html 中

<script type="text/javascript" src="/rickshaw/vendor/d3.v2.js"></script>
<script type="text/javascript" src="/rickshaw/rickshaw.min.js"></script>

参见this section express 文档,了解有关中间件的更多信息和示例。

关于html - Nodejs + 人力车 : src= reference not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17982478/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com