web-dev склерозник - сторінка 2


1 2 3 4

Flask, CORS, JSON-файл. Пример#6

30.04.2020
Flask, CORS, JSON-файл. Пример#6

CORS

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

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

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

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

Flask. Model. Пример#5

15.04.2020
Flask. Model. Пример#5

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

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

Flask > db_class > SQLite. Пример#4

12.04.2020
Flask > db_class > SQLite. Пример#4

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

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


python3 ./createDB.py

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

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

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

Flask + SQLite + JSON. Пример#3

07.04.2020
Flask + SQLite + JSON. Пример#3

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

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


python3 ./createDB.py

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

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

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

Flask. JSON. Пример#2

03.04.2020
Flask. JSON. Пример#2

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

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

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

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

Flask. Установка и первое приложение. Пример#1

01.04.2020
Flask. Установка и первое приложение. Пример#1

Почему Flask

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

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

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

Vue шаг за шагом. Разнообразие из кирпичиков. Пример#12

28.03.2020
Vue шаг за шагом. Разнообразие из кирпичиков. Пример#12

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

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

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

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

Vue шаг за шагом. Стандартный компонент для редактирования данных. Пример#11

27.03.2020
Vue шаг за шагом. Стандартный компонент для редактирования данных. Пример#11

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

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

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

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

Vue шаг за шагом. Диалоги и Notifications. Пример#10

26.03.2020
Vue шаг за шагом. Диалоги и Notifications. Пример#10

md-dialog для Vue

В этом примере используется md-dialog для создания диалоговых окон. Форма для редактирования данных превращена в диалоговое окно. Использован шрифт fontawesome для создания иконок. Сделаны диалоги alert, confirm, confirm3btn, prompt. Перед удалением записи запрашиваться подтверждение. В приложение добавлена система нотификаций (Notifications). Компонент notification отображает всплывающие сообщения, информирующих пользователя о каких либо событиях. Сообщения исчезают через определенное время.

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

Vue шаг за шагом. Динамическая загрузка компонент. Пример#9

24.03.2020
Vue шаг за шагом. Динамическая загрузка компонент. Пример#9

Динамическая загрузка компонент

В этом примере компоненты разделены на отдельные файлы и сделана система динамической загрузки компонент. Разумеется, во Vue есть шикарный механизм разделения приложения на чанки, и при переходе к системам сборки нужно использовать возможности фреймворка. Этот пример лишь демонстрация того как это можно легко сделать и на сколько Vue гибкий инструмент. Для загрузки компонент используются навигационные хуки vue-router.

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

Vue шаг за шагом. Стандартная таблица. Минимизируем код. Пример#8

23.03.2020
Vue шаг за шагом. Стандартная таблица. Минимизируем код. Пример#8

Стандартная таблица. Минимизируем код.

В этом примере сделан компонент standard-table. В нем реализована возможность не только отображать любые поля (колонки), но и добавлять любые "кнопки" в колонку "Action", связывая родительский компонент с дочерним.

Применяя компонент standard-table, мы легко сможем реализовать вывод других данных Seller и Product с тем же функционалом (сортировка, фильтр/поиск, постраничный вывод и т.д.). При этом нам достаточно перечислить нужные поля и задать им свойства.

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

Vue шаг за шагом. Таблица - трансформер под настольные и мобильные версии. Пример#7

19.03.2020
Vue шаг за шагом. Таблица - трансформер под настольные и мобильные версии. Пример#7

Таблица - трансформер

В этом примере продолжаем дорабатывать компонент client.

Поскольку web - приложение должно нормально работать и на мобильных устройствах, сегодня займемся отображением таблицы. На мобильных устройствах табличное представление данных приносит пользователям страдания и при малой ширине экрана крайне не удобны в работе. Я сделал несколько компонент, с помощью которых можно легко сделать универсальную адаптивную таблицу. Она будет выглядеть как таблица на десктопной версии и как «плиточки» на мобильных устройствах.

web-dev склерозник
1 2 3 4

Архіви