Flask & Vue. Кастомні компоненти. Приклад№ 2.6

06.05.2021

В цій статті: Наводимо красу - кастомні компоненти

Пам'ятаєте, в попередній серії прикладів ми робили компонент "product" в вигляді плиток з можливістю редагування прямо в них. Давайте це повторимо з урахуванням доопрацьованого додатка.

Перш за все, для нестандартного компонента, нам треба буде прописати окремі роути:


  { path: '/product',
    component: { template: '' },
    beforeEnter (to, from, next) { loadComponents("product.js"); next() }
  },
  { path: '/product/prm/:prm',
    component: { template: '' },
    beforeEnter (to, from, next) { loadComponents("product.js"); next() }
  },

Вони обов'язково мають бути розташовані вище за стандартні роути, інакше не спрацюють.

Реалізація компоненти product в файлі product.js

Ще в компоненті пагінації зроблене автоматичне завантаження з сервера наступної сторінки коли на мобільному пристрої доскролити до низу сторінки та завантаження попередньої, коли доскролити до гори сторінки. Власне, я цього не дуже полюбляю, але як що цікаво, дивись як це зроблено в компоненті "paginator". Це лише приклад, він працює не ідеально. Можна зробити так, щоб дані сторінок довантажувалися при сколінгу, але це Ви зможете переробити власноруч.

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

P.S. Можливо Ви звернули увагу на те, що в всіх цих прикладах (на бекенді) ми майже написали свою майже ORM, трохи погралися з токенами (ну майже токенами), і гемороїлися з оновленням структури даних вручну (див. файли modifyDB.py). Але людство все це вже зробило до нас і пішло далі для полегшення життя і праці. Тому в наступній статті ми знову все переробимо бекенд з використанням SQLAlchemy, Migrate, Marshmallow, JWT.

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

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

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

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

Коментарі:

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

Категорії

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

Архіви

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