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

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

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

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

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

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

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

Backend + Frontend

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

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

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

CORS

Cross-origin resource sharing (CORS) - совместное использование ресурсов между разными источниками.

Дело в том, что если Java Script будет обращаться к бекенду с другого домена, то он не сможет получить данные без особого разрешения, таковы правила безопасности для JavaScript. На этапе разработки удобно, если такая возможность будет. Например, бэкенд работает на одном домене (на каком то удаленном сервере), а разработка фронтенда ведется на другом домене или на локальном домене (localhost).

В этом примере сделана небольшая доработка. Применен модуль cross_origin, который решает эту проблему.

В этом примере приложения на Flask показано, как можно организовать работу с данными используя возможности ООП, и сделать код приложения легко читаемым, разделенным на функциональные модули и гибким. Этот пример можно использовать как некий базовый шаблон для начала разработки приложения.

В этом примере приложения на Flask создан отдельный класс db_class, который позволяет организовать и упростить работу с таблицами базы данных. Теперь для каждой таблицы из базы данных нужно создать объект из описанного класса и прописать по 4 роута (Create, Read, Update, Delete ). В примере (пока) создан только объект client, и прописаны роуты только для него. Обратите внимание как стало легче читать содержимое файла my_ap.py

В этом примере нужно сначала создать базу данных. Для этого запустите скрипт createDB.py.

python3 ./createDB.py

Этот скрипт создаст базу данных SQLite и заполнит её данными.

После этого можно запускать пример:

В этом примере рассмотрено приложение на Flask-е которое работает с базой данных. В качестве примера выбран SQLite. Реализованы основные операции с данными (CRUD - Create, Read, Update, Delete)

В этом примере нужно сначала создать базу данных. Для этого запустите скрипт createDB.py.

python3 ./createDB.py

Этот скрипт создаст базу данных SQLite и заполнит её данными.

После этого можно запускать пример:

В этом примере показано как работать с данными в JSON формате. Обратите внимание, что данные пока хранятся в массиве. В примере созданы методы для создания, чтения, обновления и удаления данных в массиве. Соответствующие роуты пока прописаны только для данных client.

Каждой операции соответствует определенный HTTP – метод:

• Create – POST
• Read – GET
• Update – PUT
• Delete – DELETE

Почему Flask

Почему именно Flask? Flask – фреймворк, который поражает своей простотой и богатством функционала. Он не навязывает разработчику конкретную базу данных или конкретные подходы. Вы можете освоить его базовые функции за один вечер. Что с одной стороны обеспечивает легкий старт, а с другой Flask обладает могучими функционалом, который можно изучать месяцами, удивляться и радоваться.

В этой начальной серии примеров будут показаны простые, но достаточные приемы для разработки простых web - приложений. Основной задачей этих примеров создать beckend и подружить его с frontend – ом. Формат выдачи данных - JSON.

Отдельный роут для редактирования данных

Традиционно для редактирования данных делают отдельный роут. Это удобно особенно если нужно коллегам скинуть ссылку на конкретный товар, карточку клиента и т.п. Согласитесь, проще поделиться ссылкой типа https://myproject.com/#/client/135, нежели глупо рассказывать куда зайти на какой странице куда нажать для просмотра или редактирования.

Для реализации этого функционала сделано два отдельных роута. Для просмотра списка path: '/client' (используется компонент client), и для редактирования path: '/client/:id' (используется компонент client-edit):

Стандартный компонент

Представьте, что вам нужно сделать десятки интерфейсов для заполнения каких-нибудь данных в своем приложении. Данные однотипные и интерфейсы так же похожи один на другой. Для таких целей логично сделать универсальный компонент, чтобы можно было перечислить поля с их типами, свойствами и все работало само. Именно это реализовано в этом примере. А именно сделан компонент standard-page, который включает в себя ранее созданные компоненты standard-table, standard-form. В результате мы получаем компонент, который постранично выводит данные в табличной форме с сортировкой, фильтром/поиском, с формой для редактирования, возможностью добавления и удаления записей.

В файле приложения описана константа const appDataset. В ней собрано описание полей всех компонент в одном месте. Вы можете поступить по другому. Или скажем, вообще загружать эти данные из отдельного файла.