Flask & Vue. Серверна пагінація, пошук, сортування даних. Приклад№ 2.3

03.05.2021

У цій статті: серверна пагінація, пошук, сортування

Пошук, сортування та пагінація даних - це ті задачі, які виникають, коли записів у таблиці стає більше 100. Тобто, це потрібно відразу і завжди. У попередній статті ми трохи підготовлювали фронтенд до цих переробок. Нагадаю, до цього моменту пагінацією даних займався виключно фронтенд. Так робити можна лише тоді, коли даних не дуже багато, а відображення одного елемента даних (рядка) займає багато місця на екрані. Ну, Ви зрозуміли: майже ніколи так робити не слід. Ми рухаємось далі. У цій статті наведено приклад, як можна зробити серверну пагінацію на Flask. Фронтенд, написаний на Vue, перероблено для гармонійної взаємодії з бекендом.

Зміни на бекенді

model/default.py - перероблено метод read, для організації посторінкового виводу даних, пошуку та сортування.

Як це працює?

В метод read передаються додаткові дані, на підставі яких формується запит до бази даних, виконується пошук, сортування, вибірка потрібної сторінки.

Приклади

Пагінація. Сторінка #1, кількість рядків на сторінку: 5:


http://localhost:5000/client/{"paginator":{"page":1,"limit":5}}

Сортування. Сортування по полю name, desc - сортування у зворотньому напрямку:


http://localhost:5000/client/{"order":["name desc"]}

Пошук. Пошук по полю name, шукається "At", з використанням оператора LIKE. У прикладах реалізований тільки оператора LIKE. Але закладена можливість у майбутньому додати інші оператори > < = і т.д.:


http://localhost:5000/client/{"search":[{"field":"name","value":"At","operator":"LIKE"}]}

Також пошук і сортування можна виконувати за декількома колонками.

Посторінковий + Сортування + Пошук


http://localhost:5000/client/{"paginator":{"page":1,"limit":5},"order":["name"],"search":[{"field":"name","value":"At","operator":"LIKE"}]}

Зверніть увагу, що у разі посторінкового виводу даних, у результат додається рядок зі значенням _total_records_ - загальна кількість рядків на всіх сторінках відповідного запиту. Фронтенд використовує _total_records_ для коректного відображення навігації по сторінках (див. mixin crud_front)

Зміни у фронтенді

У Фронтенді трохи перероблені роути. Фронтенд має роут, у якому передаються всі параметри, що стосуються пошуку, сортування та посторінкового виводу даних:


 { path: '/:instance/prm/:prm', component: { template: '' } },

Завдяки цьому при зміні сортування, пошуці, переході на іншу сторінку, змінюється URL у адресному рядку браузера. Тепер можна скопіювати посилання, закрити вкладку браузера, відкрити знову, вставити посилання і додаток відкриється у тому ж самому стані, як Ви його закрили. Також, коли ви зайшли на сторінку, скажімо, 3, відкрили запис для редагування, а потім зберегли його, - Вас поверне на попередню сторінку зі збереженням сортування та пошуком. Це стало можливим завдяки тому, що параметри, які стосуються стану компоненти, передаються через URL. До того ж параметри передаються як один об'єкт, який можна у подальшому розширювати.

Функціонал, який займається обробкою та формуванням параметрів знаходиться у міксіні paginator_server.

Завантажити приклад #3

P.S. У наступній статті: Проста аутентифікація.

Як запустити приклад?

Завантажити архів з прикладом, розпакувати
Запустити приклад командою:
```
python ./my_app.py
```
або
```
python3 ./my_app.py
```
У браузері відкрити посилання: http://localhost:5000/

Дивись також:

Web-dev склерозник

Коментарі:

Додати коментар

Категорії

Недавні записи

Архіви

оберіть місяць: