beautiful flask tables

Красивые и функциональные столы-колбы

Меня очень беспокоило, как я могу создать таблицу в своем личном блоге и добавить к ней функциональные возможности, которые позволят мне быстро получить доступ к любым конкретным данным. В случае, когда данные в таблицах слишком велики, добавление нумерации страниц было крайне необходимо. Кроме того, максимально эффективная загрузка данных в таблицу поможет улучшить работу с моим блог-приложением.

Функции

• Пагинация данных в строках
  • Выберите количество строк, которые будут отображаться в таблице.
• Поиск данных во всей таблице
  • Приложение может искать по всей таблице определенное слово или фразу (медленно и неэффективно, как показано в примере с базовой таблицей).
  • Приложение может искать определенное слово или фразу по данным с разбивкой на страницы (быстро и эффективно, как показано в примере таблицы Ajax).
• Сортировка данных во всей таблице
  • Приложение может сортировать всю таблицу по определенному столбцу (Вы можете выбрать, по какому столбцу сортировать во время разработки)

Используемые технологии

• Фреймворк колбы
• Python для программирования (front-end и back-end)
• SQLAlchemy для базы данных
• Бутстрап для красивого стола
• jQuery для внешнего интерфейса
• Библиотека dataTables.js для улучшения таблицы
• Faker для генерации фейковых пользовательских данных
• AJAX для фронтенда
• Heroku для развертывания
• Докер для развертывания

Типы отображаемых таблиц

1. Таблица начальной загрузки
2. Базовая таблица
3. Стол Аякс
4. Серверная таблица

Таблица начальной загрузки

Создать таблицу в flask очень просто. Все, что вам нужно сделать, это определить структуру таблицы и отобразить всех пользователей в таблице.

Базовая таблица

Базовая таблица — это таблица, которая отображает все данные в базе данных, как и таблица начальной загрузки. Я называю его базовым в том смысле, что он вполне хорош для целей отображения коротких данных. Однако отображение больших данных не очень эффективно.

Самый большой недостаток базовой таблицы, которая просто показывает все пользовательские данные в нашей базе данных, заключается в том, что в течение нескольких секунд при загрузке страницы эта таблица будет отображать всю таблицу, прежде чем начнется разбиение на страницы. В больших размерах пользователю придется терпеливо ждать, пока маршрут «сделает свое дело», прежде чем отобразится фактическая итоговая таблица.

Таблица, когда страница загружается в течение первых нескольких секунд

Таблица при полной загрузке страницы

Стол Аякс

Использование Ajax помогает решить проблему, с которой сталкивается базовая таблица. Здесь таблица сначала загружается пустой при выполнении запроса на доступ к таблице ajax. Вторая конечная точка используется для отображения данных в таблице. Однако с этой таблицей все еще есть небольшая проблема. Если данные слишком велики, таблица будет пустой в течение нескольких секунд, прежде чем отобразятся фактические данные. Это связано с тем, что сначала необходимо загрузить всю таблицу, а это может занять время в зависимости от размера данных.

Таблица Ajax при загрузке страницы в течение первых нескольких секунд

Таблица Ajax при полной загрузке страницы

Серверная таблица

В таблице на стороне сервера все функции, такие как разбиение на страницы, поиск и сортировка, реализуются на стороне сервера. Это очень эффективный способ отображения больших данных. При выполнении запроса серверной таблицы с разбивкой на страницы будут отображаться только данные, найденные на конкретной странице. Если пользователь переходит на другую страницу, то будет сделан новый запрос данных на следующей странице. Таким образом, загружаются и отображаются только необходимые данные. Это лучшее решение, но его реализация немного сложнее. Такие функции, как поиск и сортировка, необходимо перенести с клиентской стороны на серверную.

Развернутое приложение

• Приложение Flask Table на Heroku
• Приложение Flask Table в Docker

ПРИМЕЧАНИЕ. Если вы тестируете приложение на сервере Heroku, вы можете обнаружить «Неожиданную ошибку». Это связано с тем, что Heroku предоставляет ограниченный объем хранилища базы данных. В настоящее время приложение автоматически генерирует сотни пользователей, которые к моменту доступа к приложению Heroku могли отключить свою базу данных из-за превышения лимита хранилища в версии бесплатного уровня.

Тестирование

Если вы заинтересованы в тестировании приложения, вы можете использовать следующие команды для запуска приложения:

1. Клонируйте этот репозиторий:

   $ git clone [email protected]:GitauHarrison/beautiful-flask-tables.git
   

2. Измените каталог для доступа к приложению:

   $ cd beautiful-flask-tables
   

3. Создайте и активируйте виртуальную среду:

   $ mkvirtualenv flask-tables
   

4. Установите зависимости:

   $ pip3 install -r requirements.txt
   

5. Запустите приложение:

   $ flask run
   

6. Откройте приложение в браузере, работающее на локальном порту 5000:

   • Хром
   • Firefox
   • Сафари

Ссылка

• Интерактивные шаблоны Flask — Мигель Гринберг
• Красивые столы-фляги - я

Идем дальше

Использование JQuery в настоящее время устарело. Это делает DataTables.js устаревшим, поскольку он опирается на JQuery. Ознакомьтесь с обновленной версией этого проекта здесь, где я показываю, как работать с Grid.js.