Интеграция AJAX с REST API
Спасибо, что присоединились ко мне для пятой публикации об использовании Vue.js и Flask для полнофункциональной веб-разработки. Этот пост будет довольно коротким, но очень ценным, поскольку я продемонстрирую, как соединить интерфейсные и серверные приложения с помощью асинхронного Javascript и XML (также известного как AJAX).
Код этого сообщения можно найти в моей учетной записи GitHub в ветке FifthPost .
Содержание серии
- Seup и знакомство с VueJS
- Навигация по Vue Router
- Управление состоянием с Vuex
- RESTful API с Flask
- Интеграция AJAX с REST API (вы здесь)
- JWT аутентификация
- Развертывание на виртуальном частном сервере
Краткое объяснение AJAX и толстых клиентских приложений
AJAX - это мощная технология, которая добилась огромного успеха в создании интерактивных и быстрых веб-приложений. Фактически, я считаю, что AJAX, вероятно, является наиболее эффективной технологией, которая способствовала серьезному сдвигу парадигмы от эпохи веб-приложений с тонкими клиентами к веб-приложениям с все более толстыми или толстыми клиентами, которые мы видим сегодня. Приложение для опроса, которое я демонстрировал в этой серии, считается распределенным клиент-серверным приложением, реализованным как толстый клиент. Это означает, что большая часть логики и поведения реализуется на клиенте через JavaScript (в основном с использованием Vue.js), в то время как серверная часть представляет собой довольно глупый RESTful API, который просто потребляет и обслуживает данные.
Есть две основные технологии, которые позволяют этому толстому клиентскому приложению совмещать обслуживание состояния (данных), поведения и представления, управляемого данными.
- Фреймворк Vue.js с его превосходной системой реактивности, совместно используемый с библиотекой, подобной vuex flux.
- Функциональность AJAX реализована в хорошо разработанной библиотеке JavaScript под названием axios.
Вы уже должны быть знакомы с потрясающими возможностями, предоставляемыми Vue.js и vuex, из моих предыдущих публикаций в этой серии. Поэтому в этой статье я сосредоточусь на объяснении AJAX. AJAX - это технология сетевой связи, которая использует HTTP для передачи и извлечения данных на сервер и с сервера асинхронным образом в браузере. Таким образом, браузер может быстро обновлять отдельные компоненты, зависящие от небольших объемов данных, а не обновлять всю страницу, что приводит к гораздо более быстрому реагированию.
Настройка Axios и включение CORS
Чтобы установить axios, я буду использовать npm и сохраню его в свой файл package.json с помощью следующей команды:
$ npm install --save axios
Теперь, чтобы использовать axios для выполнения запросов AJAX от клиента к внутреннему серверу, мне нужно будет внести изменения в приложение Flask, чтобы включить совместное использование ресурсов Cross Origin (CORS). Каждый раз, когда клиент делает запрос ресурса, который находится на другом компьютере, как определено протоколом, IP-адресом / доменным именем или номером порта, необходимо добавить дополнительные заголовки, связанные с CORS. К счастью, есть удобное небольшое расширение Flask, Flask-CORS , которое упрощает интеграцию с Flask. Как и раньше, я использую pip для его установки.
(venv)$ pip install Flask-CORS
Затем мне нужно импортировать и создать экземпляр CORS затем
зарегистрировать его с помощью объекта приложения Flask в модуле
application.py серверного приложения.
"""
application.py
- creates a Flask app instance and registers the database object
"""
from flask import Flask
from flask_cors import CORS
def create_app(app_name='SURVEY_API'):
app = Flask(app_name)
app.config.from_object('surveyapi.config.BaseConfig')
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
from surveyapi.api import api
app.register_blueprint(api, url_prefix="/api")
from surveyapi.models import db
db.init_app(app)
return app
Реализация запросов AJAX с помощью Axios
Затем мне нужно заменить фиктивные функции, которые я реализовал ранее в scr / api / index.js, запросами GET, POST и PUT с использованием библиотеки axios. Если вы помните из предыдущей статьи, я определил следующие конечные точки RESTful API в приложении Flask, которые нужно будет вызывать из JavaScript в браузере.
Маршрут Методика Функциональность
/api/surveys/ ПОЛУЧАТЬ Получить все опросы
/api/surveys/ ПОЧТА Создать новый опрос
/api/surveys/id/ ПОЛУЧАТЬ Получить опрос по идентификатору
/api/surveys/id/ СТАВИТЬ Обновление выбранных вариантов опроса
В src / api / index.js мне нужно импортировать библиотеку API_URL
которая равна корню ресурса API http://127.0.0.1:5000/api . Затем я
заменяю тело существующих функций, чтобы использовать методы axios
get(...) , put(...) и post(...) следующим образом:
// api/index.js
import axios from 'axios'
const API_URL = 'http://127.0.0.1:5000/api'
export function fetchSurveys() {
return axios.get(`${API_URL}/surveys/`)
}
export function fetchSurvey(surveyId) {
return axios.get(`${API_URL}/surveys/${surveyId}/`)
}
export function saveSurveyResponse(surveyResponse) {
return axios.put(`${API_URL}/surveys/${surveyResponse.id}/`, surveyResponse)
}
export function postNewSurvey(survey) {
return axios.post(`${API_URL}/surveys/`, survey)
}
Теперь осталось сделать только два небольших изменения в src / store /
index.js, чтобы учесть соглашение, используемое axios для возврата
данных из запросов на получение. В loadSurvey(...) и
loadSurveys(...) каждый из них вызывает функцию, которая, в свою
очередь, вызывает axios.get(...) , возвращающие обещания. Когда эти
обещания разрешатся, они будут содержать данные, возвращаемые запросом
AJAX на сервер, и эти данные будут храниться в .data разрешенного
объекта обещания. Таким образом, данные, передаваемые в мутации, должны
быть response.data а не просто response .
const actions = {
// asynchronous operations
loadSurveys(context) {
return fetchSurveys()
.then((response) => {
// context.commit('setSurveys', { surveys: response })
context.commit('setSurveys', { surveys: response.data })
})
},
loadSurvey(context, { id }) {
return fetchSurvey(id)
.then((response) => {
// context.commit('setSurvey', { survey: response })
context.commit('setSurvey', { survey: response.data })
})
},
И вуаля! Насколько это просто?
Поскольку вся тяжелая работа по созданию внешнего и внутреннего интерфейса была уже сделана в предыдущих публикациях, работа, необходимая для интеграции связи AJAX, буквально настолько проста. Все, что остается сделать, это просто запустить серверы разработчиков и взять приложение для опроса на пробежку.
Заключение
В этой короткой статье я продемонстрировал, как соединить интерфейсное и внутреннее приложение с помощью мощной коммуникационной технологии AJAX. Для этого я использовал библиотеку axios для обработки клиентской части вещей, а на внутренней стороне я использовал расширение Flask-CORS для включения CORS.
Спасибо за чтение и присоединяйтесь ко мне для написания следующей статьи, в которой я расскажу о реализации регистрации и аутентификации пользователей. Как всегда, я приветствую любые комментарии или критику ниже.