将请求rest-api数据传递给flask html。

Question

我刚开始玩烧瓶和html。

我有一个python文件，它向url发出请求并返回json中的输出。输出输出打印在终端上。现在，我希望将输出显示在html页面中。我很少有难以理解的tutorial..but，并且根据我自己的数据采用了它。

没有任何烧瓶/html的Python文件

def topo():
    response = requests.get(network_url, auth = (user, pass))
    print(response)
    for nodes in response.json()['network-topology']['topology']:
        node_info = nodes['node']
        for node in node_info:
            try:
                ip_address = node['host-tracker-service:addresses'][0]['ip']
                mac_address = node['host-tracker-service:addresses'][0]['mac']
                print 'MAC address %s IP address %s' % (mac_address, ip_address)
            except:
                pass

和上面的代码返回终端输出如下

MAC address 00:00:00:00:00:01 IP address 10.0.0.1
MAC address 00:00:00:00:00:02 IP address 10.0.0.2

下面是来自rest-api请求的响应。

{u'network-topology': {u'topology': [{u'node': [{u'opendaylight-topology-inventory:inventory-node-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:1']", u'node-id': u'openflow:1', u'termination-point': [{u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:1']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:1:2']", u'tp-id': u'openflow:1:2'}, {u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:1']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:1:1']", u'tp-id': u'openflow:1:1'}, {u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:1']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:1:LOCAL']", u'tp-id': u'openflow:1:LOCAL'}]}, {u'host-tracker-service:addresses': [{u'first-seen': 1568245219561, u'ip': u'10.0.0.1', u'mac': u'00:00:00:00:00:01', u'id': 26, u'last-seen': 1568245219561}], u'host-tracker-service:id': u'00:00:00:00:00:01', u'host-tracker-service:attachment-points': [{u'active': True, u'corresponding-tp': u'host:00:00:00:00:00:01', u'tp-id': u'openflow:1:1'}], u'node-id': u'host:00:00:00:00:00:01', u'termination-point': [{u'tp-id': u'host:00:00:00:00:00:01'}]}, {u'opendaylight-topology-inventory:inventory-node-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:2']", u'node-id': u'openflow:2', u'termination-point': [{u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:2']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:2:LOCAL']", u'tp-id': u'openflow:2:LOCAL'}, {u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:2']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:2:1']", u'tp-id': u'openflow:2:1'}, {u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:2']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:2:2']", u'tp-id': u'openflow:2:2'}]}, {u'host-tracker-service:addresses': [{u'first-seen': 1568245219558, u'ip': u'10.0.0.2', u'mac': u'00:00:00:00:00:02', u'id': 25, u'last-seen': 1568245219558}], u'host-tracker-service:id': u'00:00:00:00:00:02', u'host-tracker-service:attachment-points': [{u'active': True, u'corresponding-tp': u'host:00:00:00:00:00:02', u'tp-id': u'openflow:2:1'}], u'node-id': u'host:00:00:00:00:00:02', u'termination-point': [{u'tp-id': u'host:00:00:00:00:00:02'}]}], u'link': [{u'link-id': u'host:00:00:00:00:00:01/openflow:1:1', u'destination': {u'dest-node': u'openflow:1', u'dest-tp': u'openflow:1:1'}, u'source': {u'source-tp': u'host:00:00:00:00:00:01', u'source-node': u'host:00:00:00:00:00:01'}}, {u'link-id': u'openflow:2:1/host:00:00:00:00:00:02', u'destination': {u'dest-node': u'host:00:00:00:00:00:02', u'dest-tp': u'host:00:00:00:00:00:02'}, u'source': {u'source-tp': u'openflow:2:1', u'source-node': u'openflow:2'}}, {u'link-id': u'openflow:1:2', u'destination': {u'dest-node': u'openflow:2', u'dest-tp': u'openflow:2:2'}, u'source': {u'source-tp': u'openflow:1:2', u'source-node': u'openflow:1'}}, {u'link-id': u'openflow:2:2', u'destination': {u'dest-node': u'openflow:1', u'dest-tp': u'openflow:1:2'}, u'source': {u'source-tp': u'openflow:2:2', u'source-node': u'openflow:2'}}, {u'link-id': u'openflow:1:1/host:00:00:00:00:00:01', u'destination': {u'dest-node': u'host:00:00:00:00:00:01', u'dest-tp': u'host:00:00:00:00:00:01'}, u'source': {u'source-tp': u'openflow:1:1', u'source-node': u'openflow:1'}}, {u'link-id': u'host:00:00:00:00:00:02/openflow:2:1', u'destination': {u'dest-node': u'openflow:2', u'dest-tp': u'openflow:2:1'}, u'source': {u'source-tp': u'host:00:00:00:00:00:02', u'source-node': u'host:00:00:00:00:00:02'}}], u'topology-id': u'flow:1'}]}}

这就是我用烧瓶和html页面添加路由的时候。也许我错了。请在这里协助。

@app.route('/')
def mypage():
   def topo():
    response = requests.get(network_url, auth = (user, pass))
    print(response)
    for nodes in response.json()['network-topology']['topology']:
          <snippet>


        return render_template('myweb.html', topo=json.loads(response.text)['network-topology'])

if __name__ == '__main__':
  app.run(host='0.0.0.0', debug=True)

在html模板中，我不知道如何将it...how链接到我的python文件。请协助这里..。

<!-- myweb.html -->

<html>
<body>
  <h1>Topology</h1>
  {% ??????????? %}
    <div>{{?????["????????"]}}</div>
  {% ???? %}
</body>
</html>

我希望在下面的简单表中看到HTML输出

   MAC Address       IP Address
1. 00:00:00:00:00:01 10.0.0.1
2. 00:00:00:00:00:02 10.0.0.2 

我想把输出放到html页面上。只是不清楚如何处理我自己的json数据。请告诉我正确的方法。谢谢你的支持和帮助。

Answer 1

以下是一种可能的办法：

PYTHON的侧

@app.route('/')
def mypage():
    def topo():
        response = requests.get(network_url, auth = (user, pass))
        print(response)
        list_of_mac_ip_address = []

        for nodes in response.json()['network-topology']['topology']:
            node_info = nodes['node']
            for node in node_info:
                dico = dict()
                try:
                    ip_address = node['host-tracker-service:addresses'][0]['ip']
                    mac_address = node['host-tracker-service:addresses'][0]['mac']
                    print 'MAC address %s IP address %s' % (mac_address, ip_address)

                    dico['IP'] = ip_address
                    dico['MAC'] = mac_address
                    list_of_mac_ip_address.append(dico)

                except:
                    pass

        return list_of_mac_ip_address

    list_of_mac_ip_address = topo()

    return render_template('myweb.html', list_ip_mac=list_of_mac_ip_address)

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

myweb.html

<html>
<body>
    <h1>Topology</h1>
    <table id="yourTableID" width="100%" cellspacing="5">
        <thead>
            <tr>
                <th> MAC Address </th>
                <th> IP Address </th>   
            </tr>
        </thead>
        <tbody>
            {% for i in list_ip_mac %}
                <tr>
                    <td>
                        {{ i["IP"] }}
                    </td>
                    <td>
                        {{ i["MAC"] }}
                    </td>
                </tr>
            {% endfor %}
        </tbody>                 
    </table>
</body>
</html>

如您所见，我创建了一个在HTML端发送的字典列表。使用jinja，我遍历这个列表来检索不同的IP和MAC地址。