django与graphviz相结合

一、思路

将jango的数据使用graphviz在前面进行展示。

二、导入graphviz模块

import datetime
from django.shortcuts import render,redirect
from django.urls import reverse
from graphviz import Digraph

三、html的引导页

1.使用表格方式，将static中的图像文件展示出来。

文件名：index.html

{% extends 'albums/base.html'%}
{% load static %}
{% block title%}
albums
{% endblock%}
{% block content%}
<div class="container">
    <div class="row">
        <a class="col-2 btn btn-lg btn-outline-primary" href="{% url 'albums:graph_create'%}">新建</a>
    </div>
    <table class="table table-striped table-hover">
        <thead>
            <th class="col-1">序号</th>
            <th class="col-3">图</th>
            <th class="col-3">名称</th>
            <th class="col-3">备注</th>
        </thead>
        <tbody>
            {% for r in result_list%}
            <tr>
                <td>{{forloop.counter}}</td>
                <td>
                   <a href="{% url 'albums:photo_look' r%}" target="_blank"> 
                    <img src="{% static 'albums/'|add:r %}" class="" width="200" alt="Image"></img>
                </a>
                </td>
                <td>{{r}}</td>
                <td></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock%}

2.点击图像可以放大图像,注意 'albums/'|add:photo_name，使用是模板过滤器实现的字符相加。

文件名：photo_look.html

{% extends 'albums/base.html'%}
{% load static %}
{% block title%}
albums
{% endblock%}
{% block content%}
{{result_str}}
<div class="container">
    <img
        src="{% static 'albums/'|add:photo_name %}"
        class=""
        alt="Image"
    >hello</img>
</div>
{% endblock%}

三、views文件

1.index.py

from django.shortcuts import render
import os

def index(request):
    result_list = os.listdir('static/albums')

    result_list = [r for r in result_list if r.split('.')[-1] in('jpg','png')]
    print(result_list)
    result_str = 'albums is ok'
    return render(request,'albums/index.html',locals())

2，graph.py

import datetime
from django.shortcuts import render,redirect
from django.urls import reverse
from graphviz import Digraph
 
def graph_create(request):
    now_str = datetime.datetime.now().strftime('%m%d%H%M%S')
    photo_name=f'测试{now_str}'
    dot = Digraph()
    dot.node("1","Life's too short")
    dot.node("2","I learn Python")
    dot.edge('1','2')

    dot.render(f'static/albums/{photo_name}',format="png",view=False)
    return redirect(reverse('albums:index'),request)

3.photo.py,用于点击进放大图像

from django.shortcuts import render


def photo_look(request,photo_name):
    result_str = photo_name
    return render(request,'albums/photo_look.html',locals())

四、urls.py

from django.urls import path
from .views import index,photo,graph

app_name='albums'

urlpatterns = [
    path('',index.index,name='index'),
    path('photo_look/<str:photo_name>',photo.photo_look,name='photo_look'),
    path('graph_create',graph.graph_create,name='graph_create'),
    path('graph_create/<str:photo_name>',graph.graph_create,name='graph_create'),
]