将请求 rest-api 数据传递给烧瓶 html

Question

我刚开始玩烧瓶和 html。

我有一个 python 文件，它向 url 发出请求并以 json 格式返回输出。输出打印在终端上。现在，我想让输出显示在 html 页面中。我已经完成了一些教程..但很难理解并根据我自己的数据采用它。

没有任何烧瓶/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 模板中，我不知道该怎么做...如何将 html 页面链接到我的 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 地址。