Создание autoselect-компонента на Symfony/Vue. Часть 2.

Сегодня зафиналим наш autoselect-компонент. Но для начала расскажу, где я был: дорабатывал положенные 2 недели на старой работе и готовился к выходу на новую. Больше пока сказать не могу, кроме того, что компания большая, требуют там больше и работать надо будет упорно, чтобы пройти испытательный. Зато буду больше писать о всяком. А теперь к нашим баранам. В первой части мы немного затронули Vue, написали первый компонент и закончили на этом. Сегодня так просто отделаться не получится — будет и бэк, и фронт, и интересные либы и много нового материала.

Для начала нужно мОкнуть данные с бэка. Что такое мокнуть? Это значит подделать (получить фэйковые данные для тестов). С этими данными будет работать наш компонент, написанный в 1-ой части.

Чтобы это сделать, нам нужно некоторое количество записей в какой-либо таблице. Я создам таблицу Product, каждая запись в которой будет состоять из 4-х частей: id, название продукта, дата поступления и количество.

Чтобы всё сделать по науке мы познакомимся такой вещью, как фикстуры — классы, которые автоматизируют создание записей и используется для тестов. Я познакомился с этим понятием относительно недавно в одном из манов от symfonycast. Но обо всём по порядку. Сначала установим свежую копию Symfony. Устанавливать буду пакет symfony/skeleton — без дополнительных библиотек. Как это сделать я описывал в одном из первых уроков на канале, там всё максимально подробно и с картинками 🙂 Привожу только листинг:

 
Читать далее →

Создание autoselect-компонента на Symfony/Vue. Часть 1.

Привет, друг. Мой первый компонент, написанный на Vue — это автовыпадашка по поисковому запросу. Чтобы ты понимал, о чём я говорю — вспомни выпадающий список, который появляется, когда ты начинаешь вводить запрос в поисковой строке google:

 

При каждом нажатии клавиш поисковая выдача подстраивается под тебя, предлагая тебе наиболее релевантные варианты, которые ты возможно ищешь. Примерно тоже самое мне нужно было написать, когда я пару месяцев назад приступил к созданию одной большой и сложной формы, абсолютно ничего не зная о Vue. 

 

Помимо практики и разъяснения того, что недавно понял сам — я опишу некий «журнал разработки»: какими шагами я шёл, чтобы понять ту или иную вещь. В частности, покажу как вообще можно подступиться к Vue и начать что-то делать. Оговорюсь сразу — если среди подписчиков есть люди, знающие Vue и работающие с ним — буду рад любой критике и обратной связи в целом. А теперь поехали.

Первое, что следует открыть — документацию. Она переведена на русский, выстроена в режиме от простого к сложному и местами понятна :). Скажу честно — прочитав первые разделы и дойдя до компонентов я всё ещё мало представлял, как подступиться к созданию и как вообще должна выглядеть структура проекта.

Если теория (даже с отработанными примерами) тебе понятна, но четкой картины не выстраивается (как было у меня), то советую весьма неплохой видос — «Уроки VUE.JS учим за 1 час». Да, звучит как откровенный кликбейт с примесью чего-то в стиле «С++ за 20 минут», но это редкое исключение. Автор, хоть и идёт по стандартной документации, проделал большую работу: чего стоит анимация, которая помогает визуально уяснить материал и примеры, расширяющие стандартную доку.

На второй день, немного поигравшись с атрибутами, событиями, я посмотрел ещё несколько манов, и пробросом пользовательских событий в компоненты-родители (ты же прочитал документация и понимаешь о чём я говорю, да?), наступил момент узнать, как правильно строить архитектуру файлов проекта. Тут есть замечательный видос, где автор описывает такой инструмент, как VUE-cli: «Learn Vue.js (RU) — Vue CLI». Он небольшой и советую его посмотреть, прежде чем идти дальше, потому что через пару минут мы будем его использовать. К слову, это 3-ий или 4-ый ман автора в плейлисте по Vue. Первые 3 — введение и основы, которые стоит глянуть как закрепление документации и видео с часовым разъяснением Vue.js.

Давай развернём пустой проект, прежде чем идти дальше. Открываем IDE и далее по протоколу:

  • Ставим (если это ещё не сделано) vue-cli:
Читать далее →