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.
Краткое описание
В этой серии примеров для Vue не будет использоваться система сборки проекта. Это сделано для упрощения работы с примерами. Скачал и смотри. Все компоненты легко могут быть переделаны во vue – файлы (vue - компоненты). Этим мы займемся в самом конце следующей серии примеров.
На первом этапе построения Frontend данные будут храниться в localstorage. Затем мы сделаем простой backend, который в конечном счете будет работать с базой SQLite. После чего переделаем наш Frontend для работы с реальным backend-ом. В процессе таких переделок будет продемонстрирована гибкость применяемых подходов. Именно четкое понимание структуры приложения и правильное его построение поможет в дальнейшем выполнять радикальные изменения в проекте избегая колоссальных трудозатрат.
На некоторых этапах Вы можете увидеть нагромождение кода, и некоторую алогичность. Просто дождитесь следующего примера. Иногда я это делал специально, чтобы стало ясно зачем, мы делаем так, как это будет в конце. Если Вам не интересен сам процесс разъяснения, и Вы хотите получить сразу финальный пример — ждите выхода финального примера #13. Но если у Вас возникнут вопросы типа «а чё афтар сделает так?», Вы будите сразу посланы на пример #1. Исключение — реальные критические замечания, коих я ожидаю от более опытных специалистов, чем я.
Удачи.
P.S. часть кода копипстилась с рабочих проектов и там могут «торчать непонятные хвосты». Пишите - буду править.
Все, что здесь изложено — это видение автора, сформированное его личным жизненным путем и ни в коем случае не должно рассматриваться как единственно правильная точка зрения. Это всего лишь пример, как можно сделать. Если Вам что-то не понравилось, я не виноват. Если Вы использовали мой приме, а в нем баг — сами виноваты. Нужно рефакторить чужой код. Не хочется рефакторить — страдайте.
Примеры можно использовать, по своему усмотрению в любых коммерческих и не коммерческих проектах. Разрешается переделывать и модифицировать примеры, компоненты и вообще любые составляющие этого курса в любых масштабах. Разрешается бесплатно распространять или передавать третьим лицам данный курс и его модификации, примеры и производные данных примеров. НЕЛЬЗЯ использовать данные примеры для платных курсов! НЕЛЬЗЯ продавать или выдавать данный курс или его фрагмент за свои работы.
Пример №1 из 13
Пример простого приложения с использованием роутов
В этом примере
Простой набросок приложения с четырьмя роутами. Главный файл приложения — app.js. В нем описаны:
- Общее хранилище Vuex.Store. Используется для хранения «общих» данных. Пока в нем только title.
- routes — собственно роуты. В роутах указываются компоненты которые будут отображаться на месте router-view
- и сам объект приложения.
Файл app-components.js содержит компоненты приложения. Да, пока все компоненты в одном файле. Да, потом мы увидим как это не удобно и разнесем компоненты в разные файлы. Пока их не много пусть будет так.
Компонент app-menu — рисует меню. Пока пункты меню прописаны жестко в компоненте.
Компонент default — стартовая страничка примера на котором будет отображаться описание и пояснение к примеру.
client, seller, product — компоненты, которые в будущем будут работать с разными данным.
Для просмотра примера откройте в браузере файл index.html
Примеры предполагают, что в конечном счете роутов может быть десятки и сотни. К примеру у одного проекта, которым я занимаюсь 168 роутов и проект продолжает расти и развиваться. Соответственно, компонент так же может быть достаточное количество. Для того, чтобы с этим справиться и не запутать себя нужно выстроить и передерживаться стандартов. Эти стандарты — ваше внутренне дело. Главное чтобы они были выработаны и их придерживаться. Те подходы которые будут представлены дальше в примерах — это легкий оттенок того, что существует в реалиях и сделаны для примера. Ваше видение и детали могут отличаться от предложенных в этих примерах.
Ссылки
Vue Router - https://router.vuejs.org/ru/
Vuex.Store - https://vuex.vuejs.org/ru/guide/
Резюме
В этом примере рассмотрено простое приложение с роутами. Показана взаимосвязь роутов и компонент. Рассмотрен пример использования общего для всех компонент хранилища данных Vuex.Store.
В следующем примере
Пример создания компонента с собственными данными.
Смотри также:
- Vue. Vue-router
- Vue. Свойство data. Основы компонент
- Vue. CRUD. Работа с данными
- Vue. Mixins (Примеси)
- Vue. computed свойства. Постраничный вывод данных
- Vue. Сортировка, поиск данных в таблицах
- Vue. Таблица - трансформер под настольные и мобильные версии
- Vue. Стандартная таблица. Минимизируем код
- Vue. Динамическая загрузка компонент
- Vue. Диалоги и Notifications
- Vue.Стандартный компонент для редактирования данных
- Vue. Разнообразие из кирпичиков
- Flask + Vue. Финальный пример
Додати коментар

Недавні записи
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
- 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
Архіви
