Админка магазина на vue.js. Урок 10. Добавляем и удаляем бренды

август 1 , 2019

Продолжаем разбираться с vue.js. Мы на первом же уроке научились считывать и отображать данные из базы, пора разобраться, как ими управлять. Сегодня мы будем работать с брендами и посмотрим, как их добавлять и удалять. REST API под это давно написан, сегодня исключительно фронтенд и vue.

Почему мы начинаем с брендов, а не с самого интересного, с товаров? Бренды и категории это самые простые сущности нашей админки. Обе состоят состоят из двух полей, id и название title. Поэтому разобраться с ними проще, чем сразу с товарами. Давайте сначала сделаем самое простое, а до товаров доберемся уже подготовленными. Сегодня реализуем добавление и удаление брендов, а редактированием займемся чуть позже. Для категорий код напишем по аналогии, а потом приступим к вещам поинтереснее, к товарам.

Итак, начнем.

Метки:
Читать дальше

Как научиться плавать за один час

июль 25 , 2019

Этот рассказ был частью большого поста о Сочи. Но я подумал, что тема забавная, и может быть, моя история кому-то поможет преодолеть страхи и тоже научиться плавать. Или хотя бы просто поржать. Возможно, вы даже не помните, с каких лет плаваете. А возможно, как и я, дожили до тридцатника, не умеете и не любите в этом признаваться. Ничего страшного. Просто помните, что когда-то каждый из нас не умел ходить и какать ровно в горшок. Итак, вот моя история.

Я всю жизнь не умею плавать. Как-то не сложилось. Вырос в таких местах, где особой воды не было. Была речка, но такая, что ее кошки вброд переходили, а собаки перепрыгивали.

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

Базовая аутентификация в nginx. Закрываем админку магазина

июль 23 , 2019

На страницах блога мы уже не первый месяц работаем с админками. Сделали простую админку на файлах и пилим админку интернет-магазина на vue.js. И все у нас хорошо, кроме того, что наши админки доступны всему интернету. Для тестового магазина в бложике это гордость, а для реального проекта - наоборот.

Это проблема авторизации в веб-приложениях и рано или поздно программисты с ней сталкиваются. Каждый решает это по-разному. В золотые времена фриланса я уверенно закрывал страницы через body { display: none } и это работало. Сейчас так просто уже не получится, приходится читать гуглы и делать технологии.

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

Одиночное мотопутешествие или 3500 км за 4 дня

июнь 5 , 2019

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

1700 километров в одну сторону - таки вызов для первого раза. В 2018-м так далеко ехать я не рисковал и катался только в окрестностях Питера. В сумме за сезон накатал всего 5 тысяч км и решил, что теперь-то готов. И в 2019-м забил отпуск на вторые майские, чтобы аккурат 9 мая отправиться в путь.

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

Сложные динамические фильтры в интернет-магазинах. Опрос

апрель 30 , 2019

Ребят, нужно ваше мнение.

Я обычно не провожу опросы на тему "какую статью написать", но сегодня другой случай. На webdevkin-е есть серия статей про фильтры в интернет-магазинах. Если не читали, то вот демо-страница с фильтрами. Иногда вы присылаете мне вопросы и пожеления на их доработку. Уже несколько раз была просьба показать, как делать сложные динамические фильтры. Что это значит?

В упомянутой серии уроков фильтры были, так сказать, фиксированные. Категории, бренды, цены и что-то еще. У каждого товара есть такие характеристики. Но что если у нас большой магазин с кучей товаров разного плана? Например, мы продаем ноутбуки, телефоны и видеокамеры. У ноутбуков есть параметры: процессор, объем памяти, тип и объем жесткого диска, диагональ экрана. У телефонов форм-фактор, ОС, объем памяти и цвет. У видеокамер что-то свое. Каждой категории товаров присущи свои наборы фильтров и значений, причем они могут хитро пересекаться. Например, диагональ экрана есть у ноутбуков и телефонов, но если у ноутбуков это значения 11, 13, 14 и 15 дюймов, то у телефонов скорее 4, 5, 5.5 и так далее.

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

Пирамида Маслоу. Триумф банальностей

апрель 27 , 2019

Жизнь странная штука. Любой набор банальностей и простейших наблюдений способен вылиться в теорию, обсуждаемую десятилетиями. Например, пирамида Маслоу, которую упоминают везде - от психологии до менеджмента.

Сам Маслоу без сомнения очень грамотный товарищ. Но была у него хитрость: слишком качественно подбирал подопытных для своих наблюдений. Вы же знаете, на кого он ориентировался? Альберт Эйнштейн, отцы-основатели США и другие образцово-показательные люди.

К сожалению, великие мыслители не обсуждают свои идеи с мудаками вроде меня. А может, и к счастью, иначе сколько бы стройных теорий разрушилось при общении со скептиками, привыкшими во всем сомневаться и везде искать подвох. Жить стало бы скучнее: многие профессора не сделали бы себе карьеру, а что такое лайф-коучинг, мы не знали бы и по сей день.

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

Админка магазина на vue.js. Урок 9. Перерабатываем фильтры

апрель 23 , 2019

Мы уже поработали и с vuex, и с компонентами vue. А сегодня затронем обе темы и займемся небольшим рефакторингом. Возможно, вы спросите зачем?

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

Кратко вспомним суть претензий: компонент товаров огромный, нужно его разносить, фильтры отдельно, фильтрам не нужно ничего знать о товарах, логику фильтрации нужно выносить во vuex. В этом уроке мы и займемся причесыванием кода, сделаем приложение чуть более структурированным, а заодно узнаем несколько моментов работы с vue. По функционалу ничего нового не будет, поэтому если вам не интересны манипуляции над кодом ради какой-то мифической правильности, просто скачайте исходники и дождитесь следующего урока. Там точно будет новый функционал и будет на что посмотреть.

Итак, поехали.

Метки:
Читать дальше

Тайм-менеджмент. Рецепты пофигизма

апрель 11 , 2019

Когда будут проводить чемпионат по впустую потраченному времени, я если и не займу первое место, то сорву приз зрительских симпатий. В этом я хорош, страшно подумать, сколько времени за свою жизнь я спустил в унитаз.

Но каким бы дурачком я ни был, рано или поздно в голову начинают лезть мысли, что пора завязывать с почесыванием пуза на диване. Конечно, приятно поныть, что не хватает свободного времени из-за работы, но ведь работы меньше от этого не станет, правильно? Приходится напрягать мозг и думать, что делать.

К счастью, я быстро забил на мнения экспертов в пабликах контакта. Вставайте рано, ложитесь поздно, высыпайтесь, планируйте жизнь, и вообще не будьте мудаком, а будьте немудаком. Очень полезно, спасибо. Только помедленнее, не успеваю записывать.

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

Админка магазина на vue.js. Урок 8. Vuex на практике

апрель 9 , 2019

В прошлом уроке мы разобрали общую теорию работы с Vuex, пора реализовать это на практике. Одно дело почитать документацию, а другое - писать код под свои задачи. Как всегда, появляются какие-то тонкости, на которые при поверхностном изучении не обращаешь внимания, и приходится вникать по ходу работы.

Давайте договоримся, что будем делать в этом уроке. В прошлый раз я упоминал, что идея Vuex - это вынос общих данных в отдельное хранилище. У нас есть такие данные: категории, бренды и продукты. В этом уроке мы создадим общее хранилище и научимся работать с ним в приложении.

Теперь разберем все по отдельности и увидим, как преобразовывается код по мере внедрения Vuex.

Метки:
Читать дальше

Админка магазина на vue.js. Урок 7. Flux и Vuex

апрель 4 , 2019

Сегодня речь пойдет о flux и vuex. Flux - это подход для работы с данными во фронтенде. Vuex - это реализация flux для vue.js, точно так же, как и redux для реакта. Я иногда читаю о том, что flux - это новая концепция, парадигма, сложная идея и так далее. Поразбиравшись с flux, я не проникся трепетным отношением к нему, но оценил простоту подхода.

Если вы хотите узнать о flux для того, чтобы умными словами беседовать с тимлидом на собеседовании, лучше почитайте в википедии. У меня другая цель - научиться работать с vue.js удобно и комфортно. Решать задачи с помощью технологии, а не искать себе новые проблемы. Vuex - это именно та штука, которая решает проблемы, а не создает их.

Метки:
Читать дальше