Question

我正在尝试创建一个应用程序生成Twitter字数的“实时”图表，基本上试图在24小时内扩展和运用NodeJS的第14章。我决定使用'人力车'，我想我开始时只需要一个简单的例子。但是，虽然我可以加载一个简单的html页面，但我无法显示图表。 Firefox调试表明：“ReferenceError：人力车没有定义[打破此错误] 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>

Answer 1

您需要配置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>

有关中间件的更多信息和示例，请参阅express文档的this section。

Nodejs + Rickshaw：src =引用不起作用

1 个答案: