web-dev склерозник
Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8
Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7
Flask & Vue. Кастомні компоненти. Приклад№ 2.6
Flask & Vue. Авторизація. Приклад№ 2.5
Flask & Vue. Проста аутентифікація. Приклад№ 2.4
Flask & Vue. Серверна пагінація, пошук, сортування даних. Приклад№ 2.3
Flask & Vue. Frontend - Зручна навігація. Приклад№ 2.2
Flask & Vue. Друга серія прикладів
Вітаю. Починаю наступну, другу серію прикладів Flask + Vue. У цій серії будуть наступні статті:
- Згадати все (ця стаття)
- Посторінковий вивід даних (пагінація). Як зробити правильно
- Посторінковий вивід даних + сортування + пошук
- Проста Аутентифікація
- Авторизація
- Наводимо красу. Кастомний вигляд компоненту "Product"
- Знову переробляємо backend. SQLAlchemy, Migrate, Marshmallow, JWT
- Використання систем збірки проекту. Webpack
Flask✙Gunicorn✙Nginx➭😎
Це покрокова інструкція, як підняти у продакшені додаток, написаний на Flask, за допомогою GUNICORN та NGNIX. Отже, ми створили web-додаток за допомогою мікрофреймвока Flask. Ми його запускали та тестували на http://localhost:5000/. Але, у такому вигляді, на робочому сервері йому жити - не можна. Він не потягне навантаження і це може бути небезпечно. Як його підняти у продакшені? Для цього ми будемо використовувати GUNICORN і NGNIX.
Vue SVG. Приклад побудови живого параметричного креслення
Отже, на Vue можна робити параметричні креслення у форматі SVG, а потім зберегти як окремий SVG-файл. Що таке параметричне креслення і кому воно потрібно? Уявіть що Ви працюєте закрійником, всі викрійки типові, різні тільки розміри. Було б дуже зручно, якби Ви вбили основні розміри (параметри), а програма сама побудувала б креслення. Так само це стосується інших галузей, де треба завдати декілька параметрів і отримати креслення. Наприклад, Ви займаєтесь виготовленням коробок з картону, тощо. І, щоб скоротити час на креслення і вчасно виконати замовлення клієнта, Вам потрібна система для швидкої побудови креслення.
У цьому прикладі я буду "малювати" статор електричного двигуна.
Vue SVG - компонент. Приклад 📑
Одного разу, в одному з проектів знадобилося мені створити візуальний компонент, який би зображував хід якогось процесу. Наприклад, користувач заповнює данні і цей процес розбитий на кроки. Треба якось красивенько йому показати, що зараз це крок №2 з 4. Або у відсотках і щоб візуально було ясно скільки ще йому страждати або чекати. Звісно, що і кількість "кроків" і кольори і розмір у різних місцях де буде використано цей компонент будуть різні. CSS - в даному випадку не вирішував задачу. З картинками заморочуватися не хотілося, тому вирішив спробувати SVG. Оскільки векторна графіка SVG виписується тегами проблем не повинно бути (принаймні для Vue). Далі приклад компонента (трохи спрощений від того про який я писав), який являє собою простенький SVG - компонент.
Flask + Vue 🏁 Финальный пример 🏁
Backend + Frontend
В этом финальном примере переделан фронтенд на работу с реальным бекендом. Теперь приложение на Flask (backend) и приложение на Vue (frontend) работают вместе. И для переделки фронтенда из прошлого примера пришлось… всего то переделать один миксин crud. Это меньше 100 строк размашистого кода.
Еще в appDataset добавлен параметр url для каждого instance.
Все прочие доработки связаны с «наведением красоты». Таким образом, благодаря тому, что структура приложения разделена на компоненты и миксины, понадобились минимальные переделки.
Категорії
Недавні записи
- Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8
- Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7
- Flask & Vue. Кастомні компоненти. Приклад№ 2.6
- Flask & Vue. Авторизація. Приклад№ 2.5
- Flask & Vue. Проста аутентифікація. Приклад№ 2.4
- Flask & Vue. Серверна пагінація, пошук, сортування даних. Приклад№ 2.3
- Flask & Vue. Frontend - Зручна навігація. Приклад№ 2.2
- Flask & Vue. Друга серія прикладів
- Ротор з металевим кільцем проти ротора без кільця
- 🇺🇦 FOC Board STM32F103RB 🧩
Tags
web html css bldc brushless stm32 motor flask atmega foc git java-script pmsm raspberry-pi python websocket mongodb esp8266 nodemcu st-link tim timer docker ngnix programmator ssd1331 ssd1306 wifi uart meteo bme280 bmp280 i2c gps mpu-6050 mpu-9250 sensors 3d-printer options usb barometer remap watchdog flash eeprom rtc bkp encoder pwm servo capture examples dma adc nvic usart gpio books battery dc-dc sms max1674 avr lcd dht11 piezo rs-232 rfid solar exti bluetooth eb-500 displays ethernet led smd soldering mpx4115a hih-4000
Архіви