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. Финальный пример