Python Flask. Создание HTML-таблиц на основе данных

Python Flask. Создание HTML-таблиц на основе данных

Python Flask. Создание HTML-таблиц на основе данных

В этой статье мы рассмотрим, как передавать данные таблицы из бэкэнда в
наш HTML-интерфейс и создать таблицу на основе этих данных.

Наша файловая структура

Для простоты давайте работать только с двумя файлами:



templates/index.html(внутри папки templates)



app.py



Код в app.py



from flask import Flask, render_template



app = Flask(__name__)



@app.route('/')

def home():



    headers = ['fruit', 'price', 'country']



    tableData = [

        {'fruit':'apple', 'price':4, 'country':'singapore'},

        {'fruit':'orange', 'price':5, 'country':'singapore'},

        {'fruit':'pear', 'price':6, 'country':'singapore'},

        {'fruit':'apple', 'price':7, 'country':'malaysia'},

        {'fruit':'orange', 'price':8, 'country':'malaysia'},

        {'fruit':'pear', 'price':9, 'country':'malaysia'},

    ]



    return render_template(

        'index.html',

        headers=headers,

        tableData=tableData

    )



if __name__ == '__main__':

    app.run()



app.py содержит наше приложение Python Flask. Обратите внимание, что заголовки
таблиц headers и сами данные таблицы tableData передаются в наш HTML-шаблон
index.html в функции render_template.

Мы хотим отображать эти данные в нашем HTML-интерфейсе в виде таблицы.

Код в templates/index.html.

Этот HTML-файл получает данные от нашего бэкэнда Python Flask. Точнее,
он получает 2 переменные — headers и tableData.



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">



<div class="px-5 mx-5">

    <h1>My Table</h1>



    <table class="table table-striped table-bordered">

        <thead>

            <tr>

                {% for header in headers %}

                    <th>{{header}}</th>

                {% endfor %}

            </tr>

        </thead>



        <tbody>

            {% for row in tableData %}

                <tr>

                    <td>{{row['fruit']}}</td>

                    <td>{{row['price']}}</td>

                    <td>{{row['country']}}</td>



            {% endfor %}

            </tbody>

        </table>

    </div>





</body>

</html>



Откройте командную строку с помощью клавиш Win+R. Перейдите в папку с файлом app.py,
командой cd /полный путь к app.py/. Введите в терминале одну из двух команд:



>> flask run 

или 

>> python app.py



вывод



Running on http://127.X.X.X:X000



Перейдите по указанному адресу. Перед вами должна появиться таблица с ценами.

Таким образом, мы создали простую таблицу с помощью Python


и запустили файл на локальном сервере Flask.

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий