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

Интеграция AJAX с REST API Спасибо, что присоединились ко мне для пятой публикации об использовании Vue.js и Flask для полнофункциональной веб-разработки. Этот пост будет довольно коротким, но очень ценным, поскольку я продемонстрирую, как соединить интерфейсные и серверные приложения с помощью асинхронного Javascript и XML (также известного как AJAX). Код этого сообщения можно найти в моей учетной записи GitHub в ветке FifthPost [https://github.com/amcquistan/flask-vuejs-survey/tree/FifthPost]. Содержание серии 1. Поднять и получить

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

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

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

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

  1. Seup и знакомство с VueJS
  2. Навигация по Vue Router
  3. Управление состоянием с Vuex
  4. RESTful API с Flask
  5. Интеграция AJAX с REST API (вы здесь)
  6. JWT аутентификация
  7. Развертывание на виртуальном частном сервере

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

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

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

  1. Фреймворк Vue.js с его превосходной системой реактивности, совместно используемый с библиотекой, подобной vuex flux.
  2. Функциональность 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.

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

comments powered by Disqus