Создание тегов с помощью vue-multiselect и тегов Laravel

Теги - важная часть группировки информации в Интернете. На Medium вы помечаете свои сообщения категориями. В Facebook вы отмечаете свои фотографии. В Gmail вы можете пометить свои сообщения ярлыками. На GitHub вы можете добавлять теги в свои репозитории. В этом руководстве мы рассмотрим, как я использовал готовые пакеты Laravel и Vue.js для создания системы тегов для кандидатов на Employbl.com.

Если вы еще этого не сделали, не стесняйтесь протестировать эту функцию, подав заявку на присоединение к сети Employbl.

Конечный результат выглядит примерно так:

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

Начнем с создания интерфейса, того, что на самом деле видит пользователь.

🔖 Интерфейс

Vue-multiselect создан Дамианом Дулишем, членом основной команды Vue.js. У него около 4000 звезд на GitHub. Поддержка основного члена команды, удобный веб-сайт документации и звезды GitHub - все это побудило меня выбрать эту библиотеку, а не потрясающе выглядящую vue-tags-input.

После того, как я выбрал библиотеку, было важно, чтобы компонент был частью формы, которую я мог отправить в серверную часть. Обычно я использую Blade для создания формы, которая будет выглядеть примерно так:

app/resources/views/mytemplate.blade.php
<form method="POST" action="{{ route(task.create) }}">
    @csrf
    <input type="text" class="form-control" name="title">
    <input type="submit" value="Submit">
</form>

Это хорошо, но не работает, когда вашей форме требуются функции Javascript. Например, посмотрите, имеет ли смысл этот код:

app/resources/views/mytemplate.blade.php
<form method="POST" action="{{ route(task.create) }}">
    @csrf
     <input type="text" class="form-control" name="title">
     <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Add tags for this task"></multiselect>
    <input type="submit" value="Submit">
</form>

Это уродливо и сломается. Лучше всего извлечь всю форму из Blade в компонент Vue. Я нашел приведенное ниже сообщение в блоге Марка Шерренберга очень полезным.

В этом посте он извлекает логику формы в удобный миксин Vue.js. Я не заходил так далеко, но если я создавал много форм или имел для работы других разработчиков, то, безусловно, было бы о чем подумать.

Вместо этого мой компонент лезвия выглядит так:

@extends('layouts.app')

@section('content')
    <br>
    <br>
    <br>
    <div class="row">
        <div class="col-sm-6 offset-sm-2">
            <h3>✊ Complete your profile</h3>

            <span class="text-muted">This will only be shown to legit companies. We don't mess with headhunters, agency recruiters or third parties.</span>
            <hr>
        </div>
    </div>
    <candidate-profile-form candidate="{{ $candidate }}" tags="{{ $allTags }}" candidate-tags="{{ $candidateTags }}"></candidate-profile-form>

В приведенном выше коде мы визуализируем шаблон лезвия, который отображает компонент Vue. Мы передаем данные с сервера, используя синтаксис Blade и свойства Vue. Данные будут доступны компоненту в виде строки. Чтобы убедиться, что его можно использовать, мы вызовем JSON.parse для значения props.

Компонент <candidate-profile-form> выглядит примерно так:

Внутри функции компонента data мы анализируем объекты JS, которые мы передали через лезвие. Список доступных тегов, которые могут выбрать кандидаты, сообщения об ошибках и текущая информация о кандидате будут поступать из серверной части Laravel.

Защита Axios и CSRF доступна для нашего компонента Vue через файл по умолчанию bootstrap.js, который поставляется с Laravel 5.7.

🚀 Бэкэнд

Для добавления тегов в бэкэнд мы будем использовать пакет от агентства веб-разработчиков Spatie. Ведущими сопровождающими являются: Фрик Ван дер Хертен, Алекс Вандербист и drbyte. Спасибо! 🙏

Есть два метода контроллера. Измените, если для отображения блейд-формы, а обновление - для запроса PUT, когда кандидат нажимает «Сохранить». Второй файл - это сидер, который создает все доступные теги, из которых могут выбирать кандидаты.

Я сохраняю кандидатов в таблице пользователей.

Здесь происходит кое-что забавное с нетерпеливой загрузкой и анализом тегов при их возврате в форму. Таким образом, мы отображаем только имя тега вместо объекта тега. Цель этого на бэкэнде - сделать наш компонент Vue как можно более простым.

Спасибо за прочтение! Если у вас есть предложения по коду, оставьте комментарий или напишите мне в твиттере.

Не стесняйтесь создавать профиль кандидата на Employbl: https://employbl.com/candidates (в настоящее время доступно только кандидатам из США)

Ваше здоровье! 🍻