Connect a Trivia Question Service to Vue
In order to save time, you’ll use a public API for retrieving trivia questions instead of building out a question database from scratch. The service provides a URL that returns a different trivia question every time it’s requested. Define the URL in the file and you’ll get an initial question when the Trivia Game page is loaded. Then you’ll modify the Trivia Game component to include a card with the question and answer:
(pasting the full contents of the file)
Add Buttons in Vue to Indicate Right and Wrong Answers
Now, let’s add two more buttons next to the Delete Player button and implement the handlers:
The game is complete now! You now have a basic Laravel API that returns trivia questions to authenticated requests, and a Vue front-end that can log users in and make authenticated requests to the Laravel API.
This is a great start, but there is of course room for improvement. You can improve the code by extracting the common API boilerplate code (retrieving the access token, sending the Authorization header, sending a request and receiving a response) into a service class.
You can find the full code here: https://github.com/oktadeveloper/okta-php-laravel-vue-crud-example
Implementing CRUD in the Vue SPA with AJAX
All the CRUD operations in a full-stack app will be executed in the backend since that’s where the database is. However, the triggering of CRUD operations will happen in the Vue SPA.
As such, an HTTP client (something that can communicate between our front and backends across the internet) will be of importance here. Axios is a great HTTP client that comes pre-installed with the default Laravel frontend.
Let’s look at our resource table again, as each AJAX call will need to target a relevant API route:
| Verb | Path | Action | Route Name |
|---|---|---|---|
| GET | /api/cruds | index | cruds.index |
| GET | /api/cruds/create | create | cruds.create |
| PUT | /api/cruds/{id} | update | cruds.update |
| DELETE | /api/cruds/{id} | destroy | cruds.destroy |
Read
Let’s begin with the method. This method is responsible for retrieving our Cruds from the backend and will target the action of our Laravel controller, thus using the endpoint .
We can set up a GET call with , as the Axios library has been aliased as a property of the object in the default Laravel frontend setup.
Axios methods like , , etc return a promise. We can use async/await to neatly the response object. We’ll destructure it so we can grab the property which is the body of the AJAX response.
resources/assets/js/components/App.vue
As you can see, the Cruds are returned in a JSON array. Axios automatically parses the JSON and gives us JavaScript objects, which is nice. Let’s iterate through these and create new Cruds with our factory function, pushing each new one to the array data property.
Finally, we’ll trigger this method programmatically from the hook, ensure our Cruds get added when the page first loads.
resources/assets/js/components/App.vue
With that done, we can now see the Cruds displayed in our app when we load it:
Update (and syncing state)
The action allows us to change the color of a Crud. We’ll send form data to the API endpoint so it knows what color we want to use. Note that the ID of the Crud is provided in the URL as well.
This is a good time to discuss an issue I mentioned at the beginning of the article: with single-page apps, you must ensure the state of the data is consistent in both the front and backends.
In the case of the method, we could update the Crud object in the frontend app instantly before the AJAX call is made since we already know the new state.
However, we don’t perform this update until the AJAX call completes. Why? The reason is that the action might fail for some reason: the internet connection might drop, the updated value may be rejected by the database, or some other reason.
If we instead wait until the server responds before updating the frontend state, we can be sure the action was successful and the front and backend data is synchronized.
resources/assets/js/components/App.vue
Create and Delete
Now that you understand the key points of the architecture, you will hopefully be able to understand these last two operations without my commentary:
resources/assets/js/components/App.vue
Управление версиями / очистка кеша
Многие разработчики дополняют свои скомпилированные ресурсы меткой времени или уникальным токеном, чтобы заставить браузеры загружать свежие ресурсы вместо обслуживания устаревших копий кода. Mix может автоматически обработать это за вас, используя метод .
Метод добавит уникальный хэш к именам файлов всех скомпилированных файлов, что сделает очистку кеша более удобной:
После создания версионного файла вы не узнаете точное имя файла. Итак, вы должны использовать глобальную функцию Laravel в ваших представлениях, чтобы загрузить соответствующим образом хешированный ресурс. Функция автоматически определит текущее имя хешированного файла:
Поскольку файлы с поддержкой версий обычно не нужны при разработке, вы можете указать процессу управления версиями запускаться только во время :
Пользовательские Mix URL-адреса
Если ваши скомпилированные ресурсы Mix развернуты в CDN отдельно от вашего приложения, вам нужно будет изменить базовый URL-адрес, сгенерированный функцией . Вы можете сделать это, добавив параметр конфигурации в файл конфигурации вашего приложения :
После настройки URL-адреса Mix функция будет префикс настроенного URL-адреса при создании URL-адресов для ресурсов:
Проверяем работу Vue в Laravel
Для теста заменим код шаблона на:
Дальше попробуем подключить в этот шаблон компонент Vue. После всех манипуляций, которые мы проделали выше, в папке нам доступен пример Vue компонента ExampleComponent.vue
Чтобы его подключить добавим в шаблон welcome.blade.php строку то место, куда нужно подключить компонент, например так:
Теперь если перейдем на главную страницу http://vuetest.loc/, мы увидим подключенный компонент.
Если попробовать изменить компонент, например поменять текст на Привет Vue! И обновить главную страницу страницу, ничего не произойдет. Чтобы видеть изменение, необходимо пересобрать фронтенд.
Выполним команду:
Она пересоберет наш фронтенд и продолжит выполняться в терминале. Она будет следить за всеми изменениями наших ресурсов и при любых изменениях будет автоматически обновлять файлы.
Теперь обновив главную страницу мы видим измененный компонент Vue с нашим текстом.
Configuring Vue Router
The way that Vue Router works is that it maps a route to a Vue component and then renders it within this tag in the application:
The router view is within the context of the Vue application component that surrounds the entire application. We will come back to the component momentarily.
First, we are going to update the main JavaScript file and configure Vue router. Replace the contents of the file with the following:
We have a few files that we need to create, but first, let’s cover the contents of :
- We import and install the plugin with
- We import three Vue components:
- an component that is the outermost application component,
- A component that maps to the route
- A component that maps to the route
- We construct a new instance that takes a configuration object
- We make Vue aware of the component by passing it to the property in the Vue constructor
- We inject the constant into the new Vue application to get access to and
The constructor takes an array of routes, where we define the path, the name (just like Laravel’s named route), and the component that maps to the path.
I like to move my route definitions into a separate routes module that I import, but for the sake of simplicity we’ll define the routes within the main application file.
In order for Laravel mix to run successfully, we need to define the three components:
First, the file is the outermost container element for our application. Inside this component, we’ll define an application heading and some navigation using Vue Router’s tag:
The most important tag in our component is the tag, which is where our router will render the given component that matches the route (i.e. or ).
The next component we need to define is located at :
Lastly, we define the component located at :
I like separating my reusable components from my view-specific components by organizing my views into the folder and my truly reusable components in . This is my convention, and I find it works well so I can easily separate which components are intended to be reusable and which components are view-specific.
We have everything we need to run our Vue application as far as the frontend is concerned! Next, we need to define the backend route and the server-side template.
The Server-Side
We leverage an application framework like Laravel with a Vue SPA so that we can build a server-side API to work with our application. We can also use Blade to render our application and expose environment configuration through a global JavaScript object, which is convenient in my opinion.
In this tutorial, we aren’t going to build out an API, but we will in a follow-up. This post is all about wiring up the Vue router.
The first thing we’ll tackle on the server-side is defining the route. Open the file and replace the welcome route with the following:
We define a catch-all route to the which means that any web route will map to our SPA. If we didn’t do this, and the user made a request to , Laravel would respond with a 404.
Next, we need to create the and define the view:
Open the and enter the following:
Lastly, enter the following in :
We’ve defined the required element which contains the component that Vue will render, along with rendering the appropriate component based on the URL.
Laravel для начинающих и чайников
Вам не придётся читать большое количество документации или книг, чтобы начать создавать сайты на Laravel. Достаточно пары дней чтобы с ноля создать свой небольшой вэб-проект, ознакомляясь с документацией по мере возникновения вопросов. Концепция фреймворка такова, что разработчику нужно думать только о логике самого приложения не беспокоясь о базах данных, средствах кеширования, хранении файлов и пользовательских сессиях.
Благодаря наличию множества фасадов легко реализуется абстрагирование от конкретных реализаций работы с тем или иным хранилищем. Всего одной строчкой в конфигурации можно перевести приложение с MySql на Postgres, с Memcache на Redis, а хранение файлов с локального хранилище на распределённые сервера Amazon. И т.п. Например, получить данные из быстрого кеша можно сделать так:
$geo = \Cache::tags()->remember($ip, 60 * 24 * 7, function() use ($SxGeoHttp) {
return $SxGeoHttp->getCityFull();
});
Ещё одна приятная вещь в Laravel — Fluent Interface, подход в архитектуре, благодаря которому можно строить цепочки вызовов, что делает код легко читаемым, а его написание в IDE становится максимально быстрым. Например, сделать запрос в БД можно таким образом:
$items = Like::query()->with('likeable')->orderByDesc('created_at')->whereUserId($id)->limit(13)->get();
Можно много что ещё сказать, но лучше 1 раз попробовать самому, чем 10 раз прочитать о чужом опыте. Начинайте прямо сейчас!
Step 4: Add Navigation Vue Component
Time to add our first Vue component to Roast and Brew! Now that we have SASS ready to compile into our Vue component, we should be ready to rock and roll with building what we need. First, add the file: . We created a global directory as well. I like to structure the components in folders for grouping especially with parent/child combinations. Just makes things easier to find. In the Navigation.vue component, stub out the following code:
This is just the base for the component. Next we have to tell Vue that we are using SCSS in our tag instead of CSS. To do that add a property of to the the tag.
Next, we need to import our SCSS variables. Since we defined it to resolve as the root directory for the SCSS, we can add this as the first line in the style tag:
Now we are importing our SCSS variables in our Navigation.vue component! It should look like this all stubbed out:
This component will be our navigation bar for our application. Notice we also used a tag. I try to follow the HTML5 semantics whenever possible. If you haven’t done HTML5 semantics, I’d recommend checking out: HTML5 Semantic Elements and doing some Googling.
We now have a component that complies with SASS using Laravel Mix.
Full-Stack Vue/Laravel CRUD
CRUD (Create, Read, Update and Delete) are the basic data operations and one of the first things you learn as a Laravel developer. Vue.js 2.6 is part of the package available with Laravel 6. Vue is a great option for creating a dynamic user interface for your CRUD operations.
The standard approach of combining Vue and Laravel is to create Vue components and then drop them into your Blade files. But CRUD operation under this architecture will require a page refresh before they’re reflected in the UI.
Single-page application
Superior user experience can be achieved by creating a Vue single-page application (SPA) with Laravel. CRUD operations can then be done asynchronously without a page refresh
However, this configuration will require special attention to ensure the state of the data is consistent in both the front end backends. In this tutorial, I’ll show you how to do that.
CRUD операции
Все операции, которые нам нужны для создания (creating), чтения (reading), обновления (updating) и удаления (deleting), доступны для коллекций. Давайте посмотрим на основные и наиболее часто используемые операции, которые вам нужны.
Создание
Есть два метода, которые нам нужны для создания документов в коллекции.
- insertOne
- insertMany
Почему бы не добавить данные в коллекцию в БД pokeworld.
# вставить одного покемона
> db.pokemons.insertOne({
name: "Pikachu",
type: "Electric",
health: 35
})
# вставить более одного покемона одновременно
> db.pokemons.insertMany()
Чтение
Для чтения данных из нашей коллекции нам могут понадобиться всего два метода. У этих методов есть несколько операторов и опций, которые могут помочь нам фильтровать наши данные в соответствии с нашими потребностями.
- find: возвращает несколько документов
- findOne: возвращает только первый документ
В этих двух операциях мы можем передавать фильтры. Если не указан фильтр, он вернет все документы в случае и первый документ в случае FineOne.
# найди один
> db.pokemons.findOne({ name: "Pikachu" })
# найти всех покемонов типа Water
> db.pokemons.find({ type: "Water" })
# найти покемонов со health больше 40
> db.pokemons.find({ health: { $gt: 40 } })
# найти покемонов с типом Water и health больше 40
> db.pokemons.find({ type: "Water", health: { $gt: 40 }})
В приведенном выше примере мы использовали оператор $gt. Есть и другие операторы, о которых мы поговорим в следующих статьях.
Обновление
Опять же, у нас есть два метода обновления документов
- updateOne
- updateMany
Оба могут использовать фильтр, как и find, чтобы найти документ, который нам нужно обновить, и объект, который определяет, что мы хотим обновить. Мы используем оператор $set для обновления полей в документе.
# обновление одного покемона
> db.pokemons.updateOne(
{ name: "Pikachu" },
{ $set: { health: 45 }}
)
# обновление нескольких покемонов и добавление weakness к type Water
> db.pokemons.updateMany(
{ type: "Water" },
{ $set: { weakness: "Electric" }}
)
# увеличение health пикачу на 10, а также добавление weakness
> db.pokemons.updateOne(
{ name: "Pikachu" },
{
$inc: { health: 10 },
$set: { weakness: "Ground" }
}
)
В приведенных выше примерах вы можете видеть, что мы можем изменить несколько полей за одно обновление. $inc — это один из операторов, который вы видите здесь, который мы можем использовать для увеличения / уменьшения числовых типов. Есть и другие операторы, о которых мы поговорим позже.
Удаление
Наша последняя операция — Удалить.
- deleteOne
- deleteMany
Оба похожи на методы обновления и поиска. Они так же могут использовать фильтр, чтобы определить документ, который мы хотим удалить. Давайте посмотрим на несколько примеров:
# удаление одного покемона
> db.pokemons.deleteOne({ name: "Pikachu" })
# удаление покемонов с health больше или равным 40
> db.pokemons.deleteMany({ health: { $gte: 40 }})
# удаление всех покемонов !!
> db.pokemons.deleteMany({})
Печально Мы удалили Пикачу. Не забудьте добавить его обратно.
Вот как работают методы удаления. Как видите, они похоже на поиск документа или документов. Если вы можете его найти, вы можете удалить его. В приведенном выше примере мы использовали оператор $gte. Он означает больше, или равно.
Далее мы более подробно рассмотрим операции чтения. Больше способов фильтрации данных, доступных операторов и т. д.
Happy Coding
Spread the love
Написание JavaScript
Все требуемые для вашего приложения JavaScript-зависимости можно найти в файле в корневой папке проекта. Этот файл похож на ; отличие состоит в том, что в нём указаны JavaScript-зависимости вместо PHP-зависимостей. Вы можете установить эти зависимости с помощью менеджера пакетов node.js (NPM):
После установки пакетов вы можете использовать команду для компилирования ваших ресурсов. Webpack — сборщик модулей для современных JavaScript-приложений. Когда вы запустите команду , Webpack выполнит инструкции из файла :
Стандартный , поставляемый с Laravel, компилирует ваш SASS и файл . В файле вы можете зарегистрировать свои компоненты Vue, а если вы предпочитаете другой фреймворк, то настроить своё собственное JavaScript-приложение. В обычном случае ваш скомпилированный JavaScript будет помещён в папку .
Написание компонентов Vue
По-умолчанию в свежем приложении Laravel есть Vue-компонент , расположенный в папке . Файл — пример однофайлового Vue-компонента, который определяет свои JavaScript и HTML-шаблоны в этом же файле. Однофайловые компоненты обеспечивают очень удобный подход к созданию приложений на основе JavaScript. Этот образец компонента зарегистрирован в вашем файле :
Для использования компонента в вашем приложении вы можете просто разместить его в одном из своих HTML-шаблонов. Например, после запуска Artisan-команды для создания заготовок экранов аутентификации и регистрации в вашем приложении, вы можете разместить компонент в Blade-шаблоне :
Разумеется, если вам интересно узнать больше о написании Vue-компонентов, вы можете прочитать документацию по Vue, в которой простым языком подробно описан весь фреймворк Vue.
Использование React
Если вы предпочитаете использовать React для написания JavaScript-приложений, в Laravel есть базовые заготовки и для него. В любом новом приложении Laravel выполните команду с опцией :
Эта команда удалит существующие заготовки приложения Vue и заменит их фреймворком React c одим демонстрационным компонентом.
Установка Vue CLI и запуск нового проекта
Во-первых, мы собираемся установить Vue CLI (интерфейс командной строки), который поможет нам инициализировать новое приложение Vue. Чтобы установить Vue CLI, мы собираемся ввести эту команду в терминале:
После установки мы собираемся создать новый проект, используя официальный шаблон Vue.js Webpack. Webpack — это сборщик модулей, который будет генерировать статические ресурсы из наших модулей и зависимостей.
Чтобы создать наш первый проект Vue.js, давайте перейдем к папке, в которой мы хотим создать проект, и введите терминал:
Через некоторое время мастер установки задаст нам несколько вопросов.
Подробности проекта
Первый вопрос: (имя проекта). Назовем его, , вы можете назвать его как захотите, главное чтобы имя пакета узла не содержало заглавных букв, и лучше всего вводить имя в Kebab Case.
Второй вопрос: (Описание проекта). А для этого мы напишем Если хотите, можете написать что то свое.
Настройка Vue.js и ESLint
Четвертый вопрос: необходимо выбрать сборку Vue: или просто . Мы выберем, потому что мы собираемся писать компоненты Vue.js, а для этого нам нужен компилятор.
Пятый вопрос: нужен ли нам , чтобы создать несколько страниц для навигации. Мы ответим утвердительно, напечатав .
Шестой вопрос — хотим ли включить в наш проект. — отличный пакет, который заботится о нашем стиле кода и заставляет нас писать код по строгим правилам, таким как отступ в коде, запись пробелов перед скобками в определениях функций, запись точки с запятой и многое другое. Ответим утвердительно, напечатав .
Седьмой вопрос: хотим ли мы использовать . — это набор правил, и существует множество предустановок, потому что у людей разные предпочтения, и, например, некоторым нравится ставить точку с запятой в конце строки, а другим нет. Мастер попросит нас выбрать между , или написать свои собственные правила. Вы можете выбрать то, что подходит вашему стилю, и изменить это позже в файле.
Настройка тестов и прочего.
Восьмой вопрос касается модульных тестов, и мы напечатаем, потому что мы не будем рассматривать какие-либо типы тестов в данной статье.
Девятый вопрос касается тестов e2e, и мы снова напечатаем .
Десятый и последний вопрос: нужно ли запускать мастер для установки всех необходимых нам зависимостей. Мы выберем чтобы установить все необходимые зависимости.
Если вы внимательно за всем проследили, в результате вы увидите приверно следующее:
Подождем, пока он все установит, а затем откроем проект любым редактором кода и проанализируем структуру проекта. Могу посоветовать — использовать Visual Studio Code, потому что у него есть отличные расширения, которые могут нам очень помочь при создании приложений Vue.js, например Vue.js Extension Pack.
Для каких целей не подойдёт Laravel?
К сожалению, Ларавел плохо подходит для highload-проектов, т.к. ядро фреймворка достаточно тяжёлое и его инициализация может занимать больше времени, чем полезный функционал самого приложения.
Также он не очень хорошо подходит для разработки консольных приложений и демонов по той же причине, хотя во фреймворке присутствуют компоненты для их создания. Даже для выполнения одной маленькой cli-команды будет грузиться всё ядро и инициализироваться все компоненты задействованные в приложении.
Сомнительным решением станет также разработка REST API и тому подобных сервисов, хотя бы по факту того, что что из коробки этот PHP-фреймворк не содержит компонент для удобной их реализации.
Нет, никто делать этого не запрещает, однако, приложения критичные к ресурсам и производительности лучше разрабатывать на других фреймворках или вообще на других более быстрых языках. Для создания прототипов, MVP и PoC таких систем Laravel отлично подойдёт. Но для сурового продакшена будет требовать в раз больше мощностей, чем приложения написанные на легковесных фреймворках.
