将mininet流量数据可视化至前端

news2024/10/2 16:22:01

准备工作：

创建项目

django-admin startproject mininet_web

在这里插入图片描述

python manage.py runserver 0.0.0.0:8000

在这里插入图片描述
init文件加上：

settings改数据库，具体看上一篇
在这里插入图片描述
创建第一个app

在这里插入图片描述
models.py是创建数据库中表结构用的

类名代表了数据库表名，且继承了models.Model，类里面的字段代表数据表中的字段(name)，数据类型则由CharField（相当于varchar）、DateField（相当于datetime）， max_length 参数限定长度。

settings文件里加入app：
在这里插入图片描述
三部曲，自动创表，并通知项目

sudo python manage.py migrate

在这里插入图片描述
testdb创建在mininet_web最里层文件夹中：

示例代码：
# -*- coding: utf-8 -*-
from django.http import HttpResponse

from myproject.models import Test

# Create your models here.
def testdb(request):
	test1=Test(name='yyy')
	test1.save()
	response=""
	response1=""
	list=Test.objects.all()
	for var in list:
		response1+=var.name+" "
	response=response1
	return HttpResponse("<p>"+response+"<p>")

再稍微改改url文件：
在这里插入图片描述
得到效果:

可以查看数据库：

将mininet流量数据输入数据库

在我们的应用的代码中：
加入
for i in range(4): for j in range(4): if flows.objects.filter(source_switch=i,destination_switch=j).exists(): flows.objects.filter(source_switch=i,destination_switch=j).update(flows=int(s[i][j])) else : flows1=flows(source_switch=i,destination_switch=j,flows=int(s[i][j])) flows1.save()
即可时刻更新对应流量数据

流量可视化

记得新建templates文件夹
修改settings文件：
在这里插入图片描述
views。py文件里
对流量数据库进行操作：

from django.http import HttpResponse
from myproject.models import flows
from django.shortcuts import render

def hello(request):
	return HttpResponse("Hello world !")

def topology(request):
    # Fetch the traffic data from the database
    traffic_data = flows.objects.all()

    # Prepare the data for display
    # You can extend this part to format the data as needed
    topology_data = []
    for data in traffic_data:
        topology_data.append({
            'source_switch': data.source_switch,
            'destination_switch': data.destination_switch,
            'traffic_size': data.flows
        })

    # Render the data in a template and pass it to the context
    context = {
        'topology_data': topology_data
    }
    return render(request, 'topology.html', context)

topology.html:

<!DOCTYPE html>
<html>
<head>
    <title>Mininet Topology</title>
</head>
<body>
    <h1>Mininet Topology</h1>
    <table>
        <tr>
            <th>Source Switch</th>
            <th>Destination Switch</th>
            <th>Traffic Size</th>
        </tr>
        {% for data in topology_data %}
            <tr>
                <td>{{ data.source_switch }}</td>
                <td>{{ data.destination_switch }}</td>
                <td>{{ data.traffic_size }}</td>
            </tr>
        {% endfor %}
    </table>
</body>
</html>

接着改改urls：
在这里插入图片描述
就大功告成：