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.
