Question

我是Javascript-Meanstack的新手，我想和朋友一起实施一个项目。我们目前正在开发一个应该实现d3.js的网络嗅探器。我们希望以图形方式绘制网络流量。该应用程序还使用了来自npm的pcap-module。我们还使用MongoDB作为数据库，并使用yeoman生成器（生成器 - ＆gt; http://meanjs.org/generator.html）设计整个应用程序的结构。（我目前正在用德语开发，所以请不要怀疑变量名称是否奇怪！）

目前，我们可以通过为它们创建会话来将数据包保存到我们的数据库中。代码可在 /server.js 中找到。

pcap = require('pcap'),
pcap_session = pcap.createSession('en1', 'ip');

在要求pcap模块后，我们将数据包保存到名为数据包的集合中，此代码也在 /server.js 中。

mongoose.createConnection('mongodb://localhost/scream-dev');

var packetSchema = new mongoose.Schema({
    any: mongoose.Schema.Types.Mixed
});
var Pakete = mongoose.model('packets', packetSchema);

pcap_session.on('packet', function (raw_packet) {
    var packet_ip = pcap.decode.packet(raw_packet);

    var paket = new Pakete({
        any: packet
    });

    paket.save(function (err, paket) {
        if (err) return console.error(err);
        //console.log('Saved a IP Packet!');
    });
    //console.log(packet_ip);
});

目前一切都很好，如果我们查看我们的数据包集合，我会发现（经过足够的时间，一些!!）数据包以此方案：

{
    "_id" : ObjectId("5534c9c538ebe8617b5ae35c"),
    "any" : {
        "link_type" : "LINKTYPE_ETHERNET",
        "pcap_header" : {
            "tv_sec" : 1429522885,
            "tv_usec" : 846102,
            "caplen" : 145,
            "len" : 145
        },
        "payload" : {
            "dhost" : {
                "addr" : [ 
                    104, 
                    168, 
                    109, 
                    69, 
                    154, 
                    194
                ]
            },
            "shost" : {
                "addr" : [ 
                    164, 
                    147, 
                    76, 
                    194, 
                    149, 
                    78
                ]
            },
            "ethertype" : 2048,
            "vlan" : null,
            "payload" : {
                "version" : 4,
                "header_length" : 5,
                "header_bytes" : 20,
                "diffserv" : 0,
                "total_length" : 131,
                "identification" : 10167,
                "flags" : {
                    "reserved" : 0,
                    "df" : 0,
                    "mf" : 0
                },
                "fragment_offset" : 0,
                "ttl" : 51,
                "protocol" : 6,
                "header_checksum" : 56601,
                "saddr" : {
                    "o1" : 173,
                    "o2" : 194,
                    "o3" : 122,
                    "o4" : 22
                },
                "daddr" : {
                    "o1" : 192,
                    "o2" : 168,
                    "o3" : 154,
                    "o4" : 35
                },
                "protocol_name" : null,
                "payload" : {
                    "sport" : 443,
                    "dport" : 51541,
                    "seqno" : 4050575809,
                    "ackno" : 3439177583,
                    "data_offset" : 8,
                    "header_bytes" : 32,
                    "reserved" : 0,
                    "flags" : {
                        "cwr" : 0,
                        "ece" : 0,
                        "urg" : 0,
                        "ack" : 1,
                        "psh" : 1,
                        "rst" : 0,
                        "syn" : 0,
                        "fin" : 0
                    },
                    "window_size" : 1653,
                    "checksum" : 55427,
                    "urgent_pointer" : 0,
                    "options" : {
                        "mss" : null,
                        "window_scale" : null,
                        "sack_ok" : null,
                        "sack" : null,
                        "timestamp" : 973486614,
                        "echo" : 1190534572
                    },
                    "data" : { "$binary" : "FwMDAEoAAAAAAAABDDepuDqq89CSU3Qi2+AY8FFmXoNq4uSCD0e34q7nOEZVJ1+0RLj8JAEw30z5p8wEj    fBgaFzbgBWn3z9LA5CmySlNDg==", "$type" : "00" },
                    "data_bytes" : 79
                }
            }
        }
    },
    "__v" : 0
}

一切都很好。现在我们要将数据包，首先只用表{/ strong>中的ng-repeat添加到我们的前端。我们还想添加一个搜索，搜索表格的 EVERY 列。也以实验方式添加了分页。

在我们的模块文件夹 / public / modules / network （网络是我们自己的模块） /public/modules/network/controllers/network.client.controller.js 写得像这样：

'use strict'; angular.module('network').factory('Packets', ['$resource', function ($resource) { return $resource('network/:packetId', { packetId: '@_id' }, { update: { method: 'PUT' } }); } ]); angular.module('network') .controller('NetworkController', ['$scope', '$stateParams', '$location', 'Authentication', 'Packets', function ($scope, $stateParams, $location, Authentication, Packets) { $scope.authentication = Authentication; $scope.packets = Packets.query(); $scope.filteredTodos = []; $scope.currentPage = 1; $scope.numPerPage = 16; $scope.maxSize = 20; $scope.todos = []; $scope.todos = $scope.packets; $scope.$watch('currentPage + numPerPage', function () { var begin = (($scope.currentPage - 1) * $scope.numPerPage), end = begin + $scope.numPerPage; $scope.filteredTodos = $scope.todos.slice(begin, end); });

如果我猜对了，ng-repeat代码就像我们的 /public/modules/network/views/network.client.view.html 一样，看起来像这样，根据 Packet.query（） - Codeline，还是？：

<div data-ng-controller="NetworkController"> <div> <table class="table table-striped table-condensed table-hover"> <thead> <tr> <th class="id" custom-sort order="'id'" sort="sort">Object Id </th> <th class="name" custom-sort order="'name'" sort="sort">saddr </th> <th class="description" custom-sort order="'description'" sort="sort">daddr </th> <th class="field3" custom-sort order="'field3'" sort="sort">protocol </th> <th class="field4" custom-sort order="'field4'" sort="sort">sport </th> <th class="field5" custom-sort order="'field5'" sort="sort">dport </th> </tr> </thead> <tbody> <tr ng-repeat="item in filteredTodos track by item.id | filter:search"> <td>{{item._id}}</td> <td>{{item.any.payload.payload.saddr.o1}}.{{item.any.payload.payload.saddr.o2}}.{{item.any.payload.payload.saddr.o3}}.{{item.any.payload.payload.saddr.o4}}</td> <td>{{item.any.payload.payload.daddr.o1}}.{{item.any.payload.payload.daddr.o2}}.{{item.any.payload.payload.daddr.o3}}.{{item.any.payload.payload.daddr.o4}}</td> <td>{{item.any.payload.payload.protocol_name}}</td> <td>{{item.any.payload.payload.payload.sport}}</td> <td>{{item.any.payload.payload.payload.dport}}</td> </tr> </tbody> <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true"> </pagination> <br> <input type="text" ng-model="search.$" /> </table> </div> </div>

我们已经发现，如果在上面代码的 tablerow 元素中添加 track by item._id ，则搜索无法完全正常工作，如果跟踪by .. 离开了它的部分工作（我们无法过滤一个点＆＃34;。＆＃34; ??）

无论如何......我们现在有两个问题：

第一：如果我们点击另一个页面号码，为什么表格只显示结果？（页面编号本身不断刷新）

第二：我们怎样才能像我们的桌子一样在同一页面上显示d3.js图形？我们已将 d3 和 nvd3 与bower install --save一起安装，还在 /config/env/all.js 中添加了依赖项，例如＆＃ 34;的＆＃39;公共/ LIB / D3 / d3.min.js＆＃39; ＆＃34;或＆＃34; ＆＃39; public / lib / d3 / d3.js＆＃39; ＆＃34;。在我们的/public/config.js中，我们还添加了＆＃39; d3 ＆＃39;和＆＃39; nvd3 ＆＃39;到我们的applicationModuleVendorDependencies但它总是返回一个错误：

错误：[$ injector：nomod]模块＆＃39; d3＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

我们也尝试在控制器中使用指令，但之后又返回另一个错误：

未知提供商＆lt; - d3＆lt; - d3BarsProvider

如果你可以帮助我解决任何代码或想法，那将是非常好的。我们正在努力解决这个问题几周。

Answer 1

首先，根据ng-repeat documentation：

如果在表达式中使用过滤器，则应在跟踪表达式之前应用它们。

因此你的表达成为：

item in filteredTodos | filter:search track by item.id

其次，D3库在window上公开。它不是Angular的一部分。您有三种选择：

直接使用D3，无需注射。
像这样注入$window：function ($window) { var d3 = $window.d3; }
自己提供，例如：angular.module('yourApp').constant('d3', d3);

我建议＃3因为在单元测试中更容易模拟。

ng-repeat项目仅在分页点击后出现

1 个答案: