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

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

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

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

Сортировка, поиск

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

Добавлен компонент header-order. С его помощью заголовки таблицы могут быть сделаны «кликабельными» и при клике менять направление сортировки соответствующего столбца. Обратите внимание как этот компонент используется в компоненте client-table и как он работает со slot-тами.

Постраничный вывод данных

Продолжая тему разделения полномочий и обязанностей в приложении, будут созданы компоненты по следующему принципу: Родительский компонент будет взаимодействовать с backend-ом, работать с данными и отдавать их дочерним компонентам. Дочерние компоненты будут отображать данные и при необходимости выполнить какие либо операции с данными, будут передавать «родителю» события, но сами изменять данные не будут. Родитель получив событие будет выполнять операции с данными и раздавать их дочерним компонентам.

Во фреймворке Vue реализован удобный механизм примесей (mixins). Вы можете создать объект, который будет подмешиваться к создаваемой компоненте. Можно сказать и другими словами — можно создать объект или несколько объектов на основе которых будет создан компонент. Это не то чтобы наследование, просто Вы можете вынести повторяющиеся методы в отдельный миксин и указывать его при создании компоненты. И все, что Вы укажите в миксине будет перенесено в компонент. Используя миксины можно эффективно устранить куски повторяющиеся кода.

CRUD

В этом примере освоим работу с данными используя подход CRUD (создание (create), чтение (read), обновление (update), удаление (delete)).

Именно понимание основного замысла этого подхода облегчит в будущем разработку и поддержку больших и сложных приложений. В данном примере мы создадим четыре отдельных метода для работы с данными. Каким бы сложным не казалось приложение или структура данных, можно обойтись этими четырьмя методами. Мало того, если backend для любой сущьности будет реализовывать все 4 метода, то frontend сможет реализовать интерфейс любой сложности и любого вида. Крайне желательно чтобы стандарт работы и формат выдачи данных на backend-е не менялся от одной сущьности к другой и выдерживался стандарт. В этом случае Вы сможете создать стандартные компоненты для работы с данными (что и будет продемонстрировано в следующих примерах). В реальной жизни, долгоиграющие проекты страдают болезнью, которую я называю «наслоение исторических слоев». Приходят новые технологии, backend состоит из разных составных частей, backend пишут разные люди/группы, и получается что могут быть совсем не похожие форматы данных. И если здесь не будет стандартизации, это все придется разгребать фронтенду. И мы будем строить такую структуру приложения, чтобы оно в любом случае смогло.

Компонент с собственными данными

В компонент client добавлены собственные данные (объект data). Обратите внимание, что объект data - это функция. Данные, заполняются при создании компоненты (см. «mounted»). Это пока, в будущем они будут загружаться с сервера. Поскольку компонент, судя из названия, будет работать с данными «Клиенты», и эти данные другим элементам приложения типа «меню» не нужны в принципе, владение собственными данными не считается большим грехом. В большинстве случаев рекомендуется создавать компоненты, которым данные передаются, а своих они не имеют (или если и имеют, то только те, которые необходимы для функционирования компонента). Мы к этому будем стремиться, но в данном случае компонент client — будет родительским компонентом. Именно он будет работать с данными, а другие компоненты только отображать их. И понимание разделения полномочий в дальнейшем упростит построение сложного или масштабного приложения.

первая серия примеров

Вступление

Что это: сборник примеров с пошаговым и поэтапным построением web - приложения на Vue. Также построение простенького backend-а на Flask (python) для более ясного понимания как срастить backend и frontend. Основной упор примеров сделан не на то, как сделать формочку, табличку для одного объекта данных, какие библиотеки использовать (этого добра в интернете полно), а на то, как выстроить структуру приложения для безболезненного его дальнейшего развития. Серия примеров построена по принципу меньше слов, больше примеров. Не ожидайте подробных объяснений, придется немного разбираться самому.

Для кого: для тех, кто знаком с Vue, хотя бы поверхностно. Для тех, кто кроме «Hello world!» сделал небольшое приложение и имеет массу вопросов «Как?» и «Зачем?».

Что будет рассмотрено в плане применения возможностей Vue: роуты, компоненты, Vuex.Store, построение взаимодействий родительских и дочерних компонент, распределение обязанностей компонент, построение компонент на основе примесей (mixins), вычисляемые поля, компоненты для постраничного вывод данных с сортировкой, фильтром/поиском, работа с данными (CRUD), компоненты для создания адаптивной таблицы под desktop/mobile версии, построение и работа с формами, стандартизация работы с данными — как итог создание стандартной компоненты для табличного постраничного просмотра и редактирования данных, разбиение приложения на компоненты, работа с локальным хранилищем, динамическая загрузка компонент. Отдельными примерами будет сделан простой backend с использованием framewrk Flask. После чего будет доработано приложение на Vue для работы с backend-ом. В конце получим некий шаблон - заготовку для web - приложений на Vue. На этом будет закончена первая, базовая серия примеров. Работа с более сложной структурой данных будет рассмотрена в следующей серии примеров.

Что будем использовать: Vue, Vue Material, Bootstrap, Flask, SQLite.

GIT - распределённая система управления версиями. Проект был создан Линусом Торвальдсом для управления разработкой ядра Linux, первая версия выпущена 7 апреля 2005 года.

Эта краткая инструкция по GIT позволит быстро научиться разворачивать и поддерживать на сервере Ваши проекты.

PWA - це не клей :) Що таке Progressive Web Apps? Гугліть =>.

ОСЬ ЩО З ЦЬОГО ВИЙШЛО: https://avislab.github.io/map/

1. Робимо звичайне Web-application (HTML - сторіночку з JavaScript - тиком :))

Наприклад, щось таке /files/map/0.html
Зверніть увагу HTTPS немає, тому доступу до вашої локації не буде.

INKSVG.JS - бібліотека яка допоможе зв`язати векторну графіку (SVG) з будь-якими даними.

• пошук графічних об`єктів у SVG - файлі по ID, переміщення zoom-у на об`єкт
• зміна стилю об`єктів
• зміна текстових написів, та їх стилю
• анімація об`єктів

INKSVG.JS використовує D3.js, та фактично є обгорткою, яка спрощує роботу саме SVG файлами, які створені графічними редакторами типу Inkscape. INKSVG.JS враховує нюанси саме форматів Sodipodi.

Ми всі вже звикли до віконного інтерфейсу у операційних системах. Звикаємо до "віконець" які вискакують на сайтах і дратують нас. Інколи самі на сайтах використовуємо щось типу чатів для on-line консультацій, тощо. Я помітив що такі вікна вкрай туплять і капець як гальмівно завантажуються і працюють. Бо сучасні підходи розробки вимагають... Та в деяких проектах зручніше використовувати саме інтерфейс схожий на віконний. Тому трохи заморочився і зробив щось таке, що назвав WinManager.

Openlayers - библиотека для работы с разными картами. В том числе с OpenStreetMap - шикарной альтернативой Google Maps.

Качаем openlayers-workshop: https://github.com/openlayers/workshop/releases

В рабочей папке:

1. рспаковать файл openlayers-workshop-en.zip