Файл config.js я считаю чрезвычайно важным для разработки в нескольких средах. Я поместил всю информацию о моей среде JS в этот файл. Прямо сейчас у нас будет только одна переменная, которая зависит от среды, и это api_url. На моем компьютере для разработки у меня есть домен для разработки с именемrope.dev, а в исходном коде —ropeandbrew.coffee. Когда я создаю свое приложение, я хочу, чтобы узел правильно вызывал каждый маршрут API в зависимости от моей среды. Итак, в моем /resources/assets/config.js я делаю простой оператор switch, который строит api_url в зависимости от того, для какой среды я создаю свое приложение, а затем экспортирую конфигурацию.
Мой файл config.js выглядит так:
/*
Defines the API route we are using.
*/
var api_url = '';
switch( process.env.NODE_ENV ){
case 'development':
api_url = 'https://roast.dev/api/v1';
break;
case 'production':
api_url = 'https://roastandbrew.coffee/api/v1';
break;
}
export const ROAST_CONFIG = {
API_URL: api_url,
}Затем я могу экспортировать любые переменные, которые я считаю подходящими в качестве объекта, и использовать их в остальной части внешнего интерфейса моего приложения, например, в следующем разделе, где мы определяем маршруты API.
Шаг 2: Добавьте файл cafe.js
Мне нравится имитировать нашу структуру API с нашими ресурсами в Javascript. Это позволяет нам группировать маршруты API по ресурсам. Первое, что нам нужно сделать, это создать файл cafe.js в каталоге /resources/assets/js/api.
Далее нам нужно импортировать ROAST_CONFIG из последнего шага, чтобы мы могли получить доступ к API_URL для выполнения наших запросов. Для этого добавьте следующий код в начало файла cafe.js:
/*
Imports the Roast API URL from the config.
*/
import { ROAST_CONFIG } from '../config.js’;Теперь у нас есть наш базовый URL-адрес API для отправки запросов. Затем мы должны экспортировать модуль по умолчанию, чтобы мы могли использовать наши запросы API в другом месте нашего приложения. Наш файл cafe.js должен выглядеть так:
/*
Imports the Roast API URL from the config.
*/
import { ROAST_CONFIG } from '../config.js';
export default {
}Шаг 3: Добавьте запрос на получение кафе
Теперь нам нужно добавить метод для получения всех кафе. Этот метод получит доступ к маршруту /api/v1/cafes на стороне Laravel нашего приложения. Для всех наших внешних запросов мы будем использовать библиотеку axios, которую мы установили при настройке нашего приложения: GitHub — axios/axios: HTTP-клиент на основе обещаний для браузера и node.js. В этом руководстве мы настроили это: https://serversideup.net/configuring-js-sass-single-page-app/ и автоматически добавим правильный заголовок для доступа к маршрутам API приложения.
Чтобы добавить запрос на доступ к кафе, добавьте в свой модуль следующий код:
export default {
/*
GET /api/v1/cafes
*/
getCafes: function(){
return axios.get( ROAST_CONFIG.API_URL + '/cafes' );
},
}Что это делает, так это возвращает запрос Axios GET на правильный маршрут API. В Vuex мы вызовем этот запрос API как действие и сохраним данные в модуль, который мы создадим.
Шаг 4: Добавьте запрос на получение отдельного кафе
Как и в предыдущем запросе, мы вернем запрос Axios GET на маршрут /api/v1/cafes/{cafeID}, который будем вызывать через Vuex. Разница в том, что в этом запросе у нас есть параметр для cafeID, который будет использоваться для ссылки на кафе, которое мы загружаем. Чтобы добавить этот запрос, добавьте следующую строку кода под последним запросом:
/*
GET /api/v1/cafes/{cafeID}
*/
getCafe: function( cafeID ){
return axios.get( ROAST_CONFIG.API_URL + '/cafes/' + cafeID );
},Это вернет конкретное кафе, которое мы загружаем.
Шаг 5: Добавьте запрос на добавление кафе
Мышление такое же, как мы создаем запрос axios, который мы возвращаем, который мы можем вызвать в любом месте приложения. На этот раз это POST-запрос, требующий еще нескольких параметров. Однако еще раз мы собираемся вызывать это через действие Vuex, которое мы сделаем в следующем уроке.
Чтобы добавить запрос POST, добавьте следующее под запросом для одного кафе:
/*
POST /api/v1/cafes
*/
postAddNewCafe: function( name, address, city, state, zip ){
return axios.post( ROAST_CONFIG.API_URL + '/cafes',
{
name: name,
address: address,
city: city,
state: state,
zip: zip
}
);
}Параметры этого метода соответствуют тому, что будет передано нашему маршруту /api/v1/cafes для добавления нового кафе. Когда мы отправляем полезную нагрузку нашего действия Vuex, мы извлекаем данные и вызываем этот метод, добавляя действие.
Подведение итогов
Итак, все наши действия добавлены в javascript в файл /resources/assets/js/api/cafe.js, и это должно выглядеть так:
/*
Imports the Roast API URL from the config.
*/
import { ROAST_CONFIG } from '../config.js';
export default {
/*
GET /api/v1/cafes
*/
getCafes: function(){
return axios.get( ROAST_CONFIG.API_URL + '/cafes' );
},
/*
GET /api/v1/cafes/{cafeID}
*/
getCafe: function( cafeID ){
return axios.get( ROAST_CONFIG.API_URL + '/cafes/' + cafeID );
},
/*
POST /api/v1/cafes
*/
postAddNewCafe: function( name, address, city, state, zip ){
return axios.post( ROAST_CONFIG.API_URL + '/cafes',
{
name: name,
address: address,
city: city,
state: state,
zip: zip
}
);
}
}Мы возвращаем запросы axios, чтобы мы могли слушать и действовать в соответствии с обещаниями в действии Vuex. Звучит очень сложно, но в следующем уроке вы увидите, как все это очень элегантно сочетается. Это позволит отслеживать все данные, которые нам нужны, в интерфейсе нашего приложения и упростит загрузку всех этих данных по запросу. Поскольку мы возвращаем запросы axios и вызываем их в действии Vuex, мы можем обрабатывать ошибки и обрабатывать успехи.
Я знаю, что это сложная настройка, но поверьте мне, как только вы настроите ее правильно, все начнет вставать на свои места. Подумайте об этом так. Вы можете построить дом с фундаментом, но как только вы добавите к нему что-то, вы быстро поймете, что его нужно переделать. Или вы можете построить прочный фундамент из цемента, и добавление функций в ваш дом будет легко поддерживаться. По кодировке очень похоже. У нас есть вся эта конфигурация, но как только мы закончим ее основу, мы действительно сможем летать вместе и сделать прекрасный SPA.
Вы действительно увидите преимущества этого способа, если вам когда-нибудь понадобится гибридное мобильное приложение. Цель этой серии руководств — добиться этого с помощью Cordova. Вы буквально можете скопировать имеющийся у вас код, создать новый файл точки входа и примерно через 1–2 часа получить полностью работающее мобильное приложение.
Привет! Мы пишем книгу по разработке приложений на основе API. Узнай первым, как только он будет готов! Зарегистрируйтесь здесь: Регистрация для разработки приложений на основе API
