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


1 2 3 4

Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8

11.06.2021
Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8

У цій статті: Система збірки проекту Vue. Webpack.

У попередніх прикладах ми писали фронтенд на Vue, як це робили наші діди. Але існують системи збірки проекту для Vue. У цьому прикладі розберемося що це, навіщо і коли це добре, а коли - зайве.

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

Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7

07.05.2021
Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7

У цій статті: Migrate, SQLAlchemy, Marshmallow, JWT

Ми трохи розважалися з бекендом, виписуючи все власноруч. Але Ви, мабуть, вже здогадалися, що людство все це вже зробило до нас і для нас. Цей приклад - переробка бекенду з використанням сучасного інструментарію.

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

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

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

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

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

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

Flask & Vue. Авторизація. Приклад№ 2.5

05.05.2021
Flask & Vue. Авторизація. Приклад№ 2.5

У цій статті: Авторизація

У кожному web-додатку доводиться роздавати права користувачам. Не існує єдиного підходу і те, як саме Ви будите це робити - це цілком Ваше рішення і Ваші прблеми.

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

Flask & Vue. Проста аутентифікація. Приклад№ 2.4

04.05.2021
Flask & Vue. Проста аутентифікація. Приклад№ 2.4

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

Коли потрібно пускати юзерів у приложуху тільки по логіну та паролю, це можна зробити декількома шляхами.

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

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

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

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

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

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

Flask & Vue. Frontend - Зручна навігація. Приклад№ 2.2

02.05.2021
Flask & Vue. Frontend - Зручна навігація. Приклад№ 2.2

У цій статті: Навігація, роути, таблиця. Як робити рівно?

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

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

Flask & Vue. Друга серія прикладів

01.05.2021
Flask & Vue. Друга серія прикладів web-dev склерозник

Flask✙Gunicorn✙Nginx➭😎

01.09.2020
Flask✙Gunicorn✙Nginx➭😎

Це покрокова інструкція, як підняти у продакшені додаток, написаний на Flask, за допомогою GUNICORN та NGNIX. Отже, ми створили web-додаток за допомогою мікрофреймвока Flask. Ми його запускали та тестували на http://localhost:5000/. Але, у такому вигляді, на робочому сервері йому жити - не можна. Він не потягне навантаження і це може бути небезпечно. Як його підняти у продакшені? Для цього ми будемо використовувати GUNICORN і NGNIX.

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

Vue SVG. Приклад побудови живого параметричного креслення

17.06.2020
Vue SVG. Приклад побудови живого параметричного креслення

SVG drawing on Vue

Отже, на Vue можна робити параметричні креслення у форматі SVG, а потім зберегти як окремий SVG-файл. Що таке параметричне креслення і кому воно потрібно? Уявіть що Ви працюєте закрійником, всі викрійки типові, різні тільки розміри. Було б дуже зручно, якби Ви вбили основні розміри (параметри), а програма сама побудувала б креслення. Так само це стосується інших галузей, де треба завдати декілька параметрів і отримати креслення. Наприклад, Ви займаєтесь виготовленням коробок з картону, тощо. І, щоб скоротити час на креслення і вчасно виконати замовлення клієнта, Вам потрібна система для швидкої побудови креслення.

У цьому прикладі я буду "малювати" статор електричного двигуна.

Переглянути приклад SVG креслення на Vue

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

Vue SVG - компонент. Приклад 📑

12.06.2020
Vue SVG - компонент. Приклад 📑

Одного разу, в одному з проектів знадобилося мені створити візуальний компонент, який би зображував хід якогось процесу. Наприклад, користувач заповнює данні і цей процес розбитий на кроки. Треба якось красивенько йому показати, що зараз це крок №2 з 4. Або у відсотках і щоб візуально було ясно скільки ще йому страждати або чекати. Звісно, що і кількість "кроків" і кольори і розмір у різних місцях де буде використано цей компонент будуть різні. CSS - в даному випадку не вирішував задачу. З картинками заморочуватися не хотілося, тому вирішив спробувати SVG. Оскільки векторна графіка SVG виписується тегами проблем не повинно бути (принаймні для Vue). Далі приклад компонента (трохи спрощений від того про який я писав), який являє собою простенький SVG - компонент.

Переглянути приклад SVG компонент на Vue

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

Flask + Vue 🏁 Финальный пример 🏁

09.05.2020
Flask + Vue 🏁 Финальный пример 🏁

Backend + Frontend

В этом финальном примере переделан фронтенд на работу с реальным бекендом. Теперь приложение на Flask (backend) и приложение на Vue (frontend) работают вместе. И для переделки фронтенда из прошлого примера пришлось… всего то переделать один миксин crud. Это меньше 100 строк размашистого кода.

Еще в appDataset добавлен параметр url для каждого instance.

Все прочие доработки связаны с «наведением красоты». Таким образом, благодаря тому, что структура приложения разделена на компоненты и миксины, понадобились минимальные переделки.

web-dev склерозник
1 2 3 4

Архіви