Я буду создавать базовую панель администратора с помощью VueJS. Я пробую пакет компонентов Vuetify, чтобы упростить разработку. Это был мой первый опыт работы с Vuetify, и создание его стало проще простого!

Изменить - это обновленная статья, которая дополняет и дополняет эту статью. Ознакомьтесь с Часть 2.5

Эта статья является частью серии. Остальное смотрите ниже!

Часть 0 - Настройка мультитенантного приложения Laravel

Часть 1 - Laravel Passport и Hyn \ Tenancy

Часть 2 - VueJS и Laravel API ← Вы здесь

Часть 3 - Многопользовательское тестирование Laravel

Вот демонстрационное репо, над которым я работаю. Обязательно используйте ветку Main.



sadnub / laravel-tenancy-паспорт-демонстрация
Демо-версия Laravel с паспортом и арендой. Участвуйте в разработке sadnub / laravel-tenancy-паспорт-демо, создав… github.com



Ознакомьтесь с документацией Vuetify.



Быстрый старт - Vuetify.js
Начните работу с Vue и Vuetify в кратчайшие сроки. vuetifyjs.com



Как упоминалось ранее, я использую Vuetify в качестве строительных блоков для этой панели. Ознакомьтесь с приведенной выше ссылкой на документацию для получения дополнительной информации.

Предпосылки

Это мультитенантный пример. См. Часть 1 этой серии для получения дополнительной информации. Вам нужно будет перейти к /register и создать клиента, прежде чем вы сможете войти в панель управления. После создания клиента вы будете перенаправлены на страницу входа в систему.

Очистка

Перво-наперво нам нужно очистить конфигурацию Laravel.

Удалить эти файлы

resources\sass\*
resources\js\bootstrap.js
resources\js\components\ExampleComponent.vue

Примечание. До Laravel 5.7 папки sass и js находились в активах

Вы можете удалить некоторые пакеты, включенные в Laravel.

npm remove bootstrap
npm remove popper.js
npm remove lodash

Откройте webpack.mix.js и удалите эту строку.

.sass('resources/sass/app.scss', 'public/css');

Настраивать

Используйте npm (или что-то еще), чтобы включить эти пакеты.

npm install vue-router --save-dev
npm install vuetify --save-dev

Настройка Vuetify проста. Просто импортируйте Vuetify и добавьте его в Vue как плагин в свой app.js файл.

import Vuetify from 'vuetify'
Vue.use(Vuetify)

Это будет включать ВСЕ компоненты Vuetify, независимо от того, используете вы их или нет. Если вы хотите уменьшить размер пакета, следуйте инструкциям в документации Vuetify.

Webpack

Единственное, что я делаю с Webpack, - это создаю псевдоним, чтобы @ указывало на корневой каталог js. Это устраняет необходимость в относительных путях при импорте файлов. Добавьте следующий код в webpack.mix.js.

mix.webpackConfig({    
  resolve: {      
    alias: {
 @’: __dirname + '/resources/assets/js'      
    },    
  },  
})

Ваш путь может отличаться в зависимости от версии laravel

Настройка Axios

Есть много способов заставить это работать. Я предпочитаю импортировать аксиомы только тогда, когда мне это нужно. Создайте каталог конфигурации и создайте файл с именем axios.js.

Мы можем импортировать этот файл всякий раз, когда нам нужно взаимодействовать с API.

Компоненты

App.vue

Это компонент, из которого мы будем все строить. Я поместил сюда все компоненты макета Vuetify. Это дает нам базовый макет панели инструментов с заголовком и боковой панелью.

Если вы посмотрите на строку 37, у меня есть форма, встроенная в меню. Я использую это, чтобы пользователи могли выйти из системы, поскольку Laravel требует POST-запроса к /logout. Затем у меня есть метод Vue logout(), который отправит форму. Токен - это вычисляемое свойство, которое извлекает токен CSRF из метатега. Это тот же подход, который используется в строительных лесах Laravel Auth, и он довольно удобен!

Я также указал <router-view></router-view>. Здесь он будет отображать различные страницы (или представления) из маршрутизатора.

Ссылки на боковую панель

В App.vue ссылки боковой панели создаются на основе файла с именем sidebarLinks.js в корне папки js. Идите вперед и создайте этот файл.

API

Создайте папку api и добавьте ticket.js. Здесь я импортирую аксиомы и добавляю различные функции API.

Затем я импортирую этот файл в нужные мне компоненты. Каждый метод возвращает обещание и позволяет компоненту выполнять успешную обработку и обработку ошибок.

Vue Router

Это routes.js файл, который я использую. Это довольно просто, всего два маршрута. При необходимости вы можете добавить больше.

app.js

Убедитесь, что ваш app.js файл выглядит так. Сюда входят плагины и конфигурация маршрутов.

Далее мы создадим компоненты!

Просмотр билета

Это представление маршрутизатора, в котором есть все функции приборной панели. Здесь много чего происходит. Я постараюсь сломать это.

Ниже приведено изображение компонента "Тикеты" в действии. Я просто взял пример из документации таблицы данных Vuetify и заставил его работать с моим API.

Основным используемым здесь компонентом является <v-data-table>. Это компонент Vuetify, который отображает, форматирует и сортирует данные. Также из этого представления можно редактировать, удалять и добавлять заявки.

Как только пользователь перейдет к этому компоненту, он попытается получить все билеты из API. Это происходит в ловушке created(). Файл tickets.js импортируется в этот компонент и позволяет легко выполнять вызовы API.

Каждый вызов API возвращает обещание и использует методы .then() и .catch() для обработки успешных вызовов и ошибок. Я использую компонент <v-snack-bar> для отображения статуса вызовов API.

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

Компилировать

Пришло время скомпилировать весь код, написанный на данный момент. Если вы еще не запустили: npm install в базовом каталоге laravel. Затем запустите npm run dev, чтобы собрать модули. Вы также можете использовать npm run watch для автоматической сборки при изменении файлов. Наконец, если вы строите для производства, вы можете запустить npm run prod. Это позволит собрать и минимизировать код.

Просмотры Laravel Auth

Это то, что я раньше не пробовал с этими представлениями. Я включил Vue и Vuetify и использовал их вместе с движком шаблонов лезвий. Я не думаю, что после того, как он закончил, делать это так, потому что он довольно медленно загружается. Но пользовательский интерфейс единообразен во всем приложении, что является плюсом.

app.blade.php

Это макет лезвия, в который я включаю файлы Vue и Vuetify.

login.blade.php

Это шаблон лезвия входа в систему, переработанный с использованием компонентов Vuetify.

register.blade.php

Шаблон клинка регистра переработан с добавлением компонентов Vuetify.

Заключение

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

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

Затем я думаю, что собираюсь переработать REST API в конечную точку GraphQL. Также ожидайте некоторых тестов в будущем!