Автор оригинала: Adam McQuistan.

Одностраничные приложения с Vue.js и Колба: Интеграция AJAX

Интеграция AJAX с REST API

Спасибо, что присоединились ко мне для пятого поста об использовании Vue.js и колба для полнотекстовой веб-разработки. Этот пост будет довольно коротким, но очень ценным, поскольку я продемонстрирую, как подключить интерфейсные и бэкенд-приложения с помощью асинхронного Javascript и XML (он же AJAX).

Код для этого поста можно найти на моем аккаунте GitHub под веткой FifthPost .

Содержание серии

1. Настройка и знакомство с VueJS
2. Навигация по маршрутизатору Vue
3. Государственное управление с помощью Vuex
4. RESTful API с колбой
5. Интеграция AJAX с REST API (вы находитесь здесь)
6. Аутентификация JWT
7. Развертывание на виртуальном частном сервере

Краткое описание AJAX и толстых клиентских приложений

AJAX – это мощная технология, которая имела огромный успех в создании высокоинтерактивных и быстрых веб-приложений. На самом деле, я считаю, что AJAX-это, вероятно, самая впечатляющая технология, которая вызвала серьезный сдвиг парадигмы от эпохи тонких клиентских веб-приложений к все более толстым или толстым клиентским веб-приложениям, которые мы видим сегодня. Приложение опроса, которое я демонстрировал в этой серии, считается распределенным клиент-серверным приложением, реализованным как толстый клиент. Это означает, что большая часть логики и поведения реализована на клиенте через JavaScript (в основном с помощью Vue.js) в то время как серверная сторона-это довольно тупой RESTful API, который просто потребляет и обслуживает данные.

Существуют две основные технологии, которые позволяют этому толстому клиентскому приложению жонглировать поддержанием состояния (данных), поведением и представлением данных.

1. В Vue.js фреймворк с его превосходной системой реактивности совместно используется вместе с библиотекой vuex flux-like
2. Функциональность AJAX реализована в хорошо разработанной библиотеке JavaScript под названием axios

Вы уже должны быть знакомы с удивительностью, обеспечиваемой Vue.js и vuex из моих предыдущих постов в этой серии. Поэтому я сосредоточусь на объяснении AJAX в этой статье. AJAX-это сетевая коммуникационная технология, которая использует HTTP для передачи и извлечения данных на сервер и с него асинхронным образом в браузере. Таким образом, браузер способен быстро обновлять отдельные компоненты, зависящие от небольших объемов данных, а не обновлять всю страницу целиком, что приводит к гораздо более отзывчивому опыту.

Настройка оси и включение CORS

Для установки axios я использую npm и сохраню его в свой файл package.json со следующей командой:

$ npm install --save axios

Теперь, чтобы использовать axios для выполнения AJAX-запросов от клиента к серверному серверу, мне нужно будет внести изменения в приложение Flask, чтобы включить Cross Origin Resource Sharing (CORS). Каждый раз, когда клиент делает запрос на ресурс, который находится на другой машине, как определено протоколом, IP-адресом/доменным именем или номером порта, необходимо добавить дополнительные заголовки, связанные с CORS. К счастью, есть удобное небольшое расширение Flask, Flask-CORS , которое делает интеграцию с Flask очень простой. Как уже было сделано ранее, я использую pip для установки его таким образом.

(venv)$ pip install Flask-CORS

Затем мне нужно импортировать и создать экземпляр объекта CORE extension, а затем зарегистрировать его с помощью объекта приложения Flask в приложении.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 в браузере.

В src/api/index.js Мне нужно импортировать библиотеку axios, и для повторного использования я также определяю переменную с именем 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 чтобы приспособиться к конвенции, используемой стремящимися вернуть данные из запросов get. В методах load Survey(...) и load Surveys(...) action каждый из них вызывает функцию, которая, в свою очередь, вызывает методы axios.get (...) , возвращающие обещания. Когда эти обещания разрешатся, они будут содержать данные, возвращенные AJAX-запросом на сервер, и эти данные будут храниться в члене .data разрешенного объекта promise. Таким образом, данные, передаваемые мутациям, должны быть ответом.данные вместо просто ответа .

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-коммуникации, буквально так проста. Все, что осталось сделать, это просто запустить серверы разработчиков и взять приложение опроса на диск.

Вывод

В этой короткой статье я продемонстрировал, как подключить front-end и backend-приложение с помощью мощной коммуникационной технологии AJAX. Для этого я использовал библиотеку axios для обработки клиентской части вещей, а на бэк-энде я использовал расширение Flask-CORS для включения CORS.

Спасибо за чтение и, пожалуйста, присоединяйтесь ко мне для следующей статьи, где я собираюсь рассказать о реализации регистрации и аутентификации пользователей. Как всегда, я приветствую любые комментарии или критику ниже.