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?
Могу. Но это будет пример в стиле 'как стрелять из пушки по воробью'.
И всё же. Если не затруднит. Хотелось бы увидеть.
Отличная серия, с нетерпением жду продолжения.
Недавні записи
- CRSF to PWM
- U-FOC PC Monitor для Chrome browser
- Фільтрація Back-EMF. Безсенсорні BLDC мотори
- Text to speech. Українська мова
- LCD Display ST7567S (IIC)
- Розпізнавання мови (Speech recognition)
- Selenium
- Комп'ютерний зір (Computer Vision)
- Деякі думки про точність вимірювань в електроприводі
- Датчики Холла 120/60 градусів
Tags
bluetooth bldc nodemcu tim max1674 eeprom led avr hih-4000 brushless programmator mpu-6050 usart examples smd sensors piezo rs-232 motor html git meteo bme280 gps bkp encoder java-script raspberry-pi websocket esp8266 books solar eb-500 atmega mongodb gpio sms css pwm ethernet pmsm st-link capture dma stm32 watchdog lcd rfid python uart battery dc-dc soldering timer ssd1331 wifi nvic dht11 docker i2c 3d-printer adc bmp280 flash rtc servo barometer remap exti mpx4115a web flask ngnix usb displays foc ssd1306 mpu-9250 options
Архіви