Flask + Vue 🏁 Финальный пример 🏁
Backend + Frontend
В этом финальном примере переделан фронтенд на работу с реальным бекендом. Теперь приложение на Flask (backend) и приложение на Vue (frontend) работают вместе. И для переделки фронтенда из прошлого примера пришлось… всего то переделать один миксин crud. Это меньше 100 строк размашистого кода.
Еще в appDataset добавлен параметр url для каждого instance.
Все прочие доработки связаны с «наведением красоты». Таким образом, благодаря тому, что структура приложения разделена на компоненты и миксины, понадобились минимальные переделки.
Структура приложения
В очередной раз хотелось бы обратить внимание на построение структуры приложения (фронтенда) и в графической форме пояснить суть.
Составной компонент содержит часть, которая взаимодействует с бекендом. Этот компонент содержит методы для работы с бекендом и собственные данные. Данные загружаются с бекенда. Эти данные предоставляются дочерним компонентам, которые их отображают. Дочерние компоненты выполняют функцию взаимодействия с пользователем и являются GUI компонентами. В случае необходимости произвести операции с данными, дочерние компоненты отправляют events родительскому. Родительский компонент формирует запрос на бекенд и после успешной операции обновляет свои данные. Обновленные данные предаются всем дочерним компонентам. Не важно какой компонент отправит event родителю для обновления данных. Новые данные получат все компоненты сразу же после обновления. Таким образом выстраивается интерфейс где не будет «залипших» данных.
Если Вам покажется, что проще из какой то компоненты отправить запрос прямо на бекенд, как это обозначено красными стрелками, то обновленные данные получит только тот компонент, который отправил запрос, все остальные новых данных не получат и у Вас вполне может сложиться такая ситуация, когда один компонент показывает одни данные, а другой другие, старые:
Конечно, можно сделать механизм рассылки сообщения всем компонентам о необходимости обновить данные, но это приведет к лишним запросам и путанице в коде.
Второй аспект — врастание функций работы с данными в GUI компоненты. Это приводит к тому что при необходимости заменить какой нибудь «визуальный» компонент на другой, приходиться страдать с функционалом, который работает с данными.
Третий аспект это потеря понимания как и кто управляет данным. При разделении полномочий, когда визуализацией занимаются дочерние компоненты, а работой с данными — родительский, весь функционал для работы с данными (а он может быть весьма витиеватым) сосредоточен в одном компоненте и Вы всегда видите какие есть методы и что они делают. Если работу с данными разнести по другим компонентам, вполне можно забыть и пропустить какой компонент что делает особенно если функционал дублируется.
Оправдание типа «...я хотел сделать полностью независимый автономный компонент, чтобы везде и всегда, в любом месте работал сам...» звучит так же глупо если бы Вы услышали, что в моем теле есть орган, полностью независящий от всего остального организма.
Резюме
Теперь наш фронтенд работает с реальным бекендом, который в свою очередь работает с реальной базой данных. Все составляющие собраны вместе, мы можем двигаться дальше. В этой первой серии примеров рассмотрена лишь работа с простыми данными. И принципы построения и взаимодействия компонент. В следующей серии примеров будет рассмотрен пример работы с «кучерявыми» составными, сложными и неоднородными данными, сложные составные формы. Рассмотрим организацию постраничного вывода при взаимодействии с бекендом. Напомню, сейчас постраничный вывод упрощенный. Т.е. загружаются все данные и уже на стороне клиента разбиваются на страницы. Если данных реально много, нужно делать загрузку данных с бекенда по страницам, и этим мы займемся в следующей серии примеров. Так же будет рассмотрен пример подгрузки данных при прокрутки до конца страницы. Сделаем приложение мультиязычным. Сделаем простую авторизацию пользователей.
Запуск примера
В этом примере нужно сначала создать базу данных. Для этого запустите скрипт createDB.py.
python3 ./createDB.py
Этот скрипт создаст базу данных SQLite и заполнит её данными.
После этого можно запускать пример.
Запустите бекенд командой
python3 ./my_app.py
После чего откройте в браузере ссылку http://localhost:5000/
Можно запускать фронтенд как и раньше - открывая index.html, как локальный файл.
Внимание! Данный запуск бекенд-а годиться только для разработки! На рабочем сервере делается все по другому. О чем будет отдельная статья.
Всем успехов.
Смотри также:
- Vue. Vue-router
- Vue. Свойство data. Основы компонент
- Vue. CRUD. Работа с данными
- Vue. Mixins (Примеси)
- Vue. computed свойства. Постраничный вывод данных
- Vue. Сортировка, поиск данных в таблицах
- Vue. Таблица - трансформер под настольные и мобильные версии
- Vue. Стандартная таблица. Минимизируем код
- Vue. Динамическая загрузка компонент
- Vue. Диалоги и Notifications
- Vue.Стандартный компонент для редактирования данных
- Vue. Разнообразие из кирпичиков
- Flask + Vue. Финальный пример
А можете в качестве примера показать как применить Flask + Vue для вашей метеостанции на Raspberry Pi?
Могу. Но это будет пример в стиле 'как стрелять из пушки по воробью'.
И всё же. Если не затруднит. Хотелось бы увидеть.
Отличная серия, с нетерпением жду продолжения.
Недавні записи
- Комп'ютерний зір (Машинний зір)
- Деякі думки про точність вимірювань в електроприводі
- Датчики Холла 120/60 градусів
- Модуль драйверів напівмосту IGBT транзисторів
- Драйвер IGBT транзисторів на A316J
- AS5600. Варіант встановлення на BLDC мотор
- DC-DC для IGBT драйверів ізольований 2 W +15 -8 вольт
- U-FOC - Векторне керування безколекторними моторами
- FOC - своя реалізація векторного керування. Підбиваю підсумки 2022 року
- Конструктор регуляторів моторів. Підбиваю підсумки 2022 року.
Tags
ngnix flash flask i2c servo dma gpio avr solar bme280 docker eeprom sms java-script barometer rtc dht11 ssd1306 bldc motor raspberry-pi ssd1331 mpu-9250 dc-dc rfid foc st-link usb remap pwm capture soldering nodemcu lcd eb-500 esp8266 mpu-6050 nvic usart books mpx4115a timer adc bluetooth tim programmator meteo sensors led python websocket hih-4000 html pmsm mongodb bmp280 gps encoder displays smd stm32 css git examples rs-232 ethernet brushless 3d-printer watchdog max1674 exti atmega options battery uart wifi bkp piezo web
Архіви