web-dev склерозник - сторінка 3
‹ 1 2
Vue шаг за шагом. Диалоги и Notifications. Пример#10

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

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

Стандартная таблица. Минимизируем код.
В этом примере сделан компонент standard-table. В нем реализована возможность не только отображать любые поля (колонки), но и добавлять любые "кнопки" в колонку "Action", связывая родительский компонент с дочерним.
Применяя компонент standard-table, мы легко сможем реализовать вывод других данных Seller и Product с тем же функционалом (сортировка, фильтр/поиск, постраничный вывод и т.д.). При этом нам достаточно перечислить нужные поля и задать им свойства.
Vue шаг за шагом. Таблица - трансформер под настольные и мобильные версии. Пример#7

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

Сортировка, поиск
В этом примере продолжаем дорабатывать компонент client.
Добавлен компонент header-order. С его помощью заголовки таблицы могут быть сделаны «кликабельными» и при клике менять направление сортировки соответствующего столбца. Обратите внимание как этот компонент используется в компоненте client-table и как он работает со slot-тами.
Vue шаг за шагом. Постраничный вывод данных. Пример#5

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

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

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

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

первая серия примеров
Вступление
Что это: сборник примеров с пошаговым и поэтапным построением 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 - Автоматическое развертывание проектов

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

PWA - це не клей :) Що таке Progressive Web Apps? Гугліть =>.
ОСЬ ЩО З ЦЬОГО ВИЙШЛО: https://avislab.github.io/map/
1. Робимо звичайне Web-application (HTML - сторіночку з JavaScript - тиком :))
Наприклад, щось таке /files/map/0.html
Зверніть увагу HTTPS немає, тому доступу до вашої локації не буде.
‹ 1 2
Категорії

Недавні записи
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
- Golang + Vue + PostgreSQL #2
- Golang + Vue + SQLite #1
- FOC Position Control. Векторне управління - Стабілізація положення
- Flask & Vue. Завантаження файлів. Приклад № 2.10
- Рекуперація. FOC і цікаві досліди
- Flask & Vue. OAuth. Приклад№ 2.9
- Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8
- Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7
Tags
stm32 bkp soldering eeprom eb-500 led hih-4000 bme280 bmp280 3d-printer usb ethernet html git docker barometer raspberry-pi remap dc-dc rfid java-script nodemcu mpu-6050 rtc capture gpio avr brushless foc options flash flask atmega python displays rs-232 solar st-link ssd1331 dma adc bluetooth web ssd1306 wifi exti mpu-9250 pwm pmsm mongodb programmator i2c battery max1674 piezo css meteo watchdog books websocket servo dht11 ngnix mpx4115a lcd motor uart sensors nvic encoder usart sms smd bldc esp8266 tim timer gps examples
Архіви
