Aplicaciones de una sola página con Vue.js y Flask: Integración AJAX

Integración AJAX con API REST

Gracias por acompañarme en la quinta publicación sobre el uso de Vue.js y Flask para el desarrollo web de pila completa. Esta publicación será bastante breve, pero muy valiosa, ya que demostraré cómo conectar las aplicaciones de front-end y back-end utilizando Asynchronous Javascript y XML (también conocido como AJAX).

El código para esta publicación se puede encontrar en mi cuenta de GitHub en la rama FifthPost.

Contenido de la serie

• Seup y familiarización con VueJS
• Navegando por el enrutador Vue
• Gestión de estado con Vuex
• API RESTful con Flask
• Integración AJAX con API REST (estás aquí)
• Autenticación JWT
• Implementación en un servidor privado virtual

Breve explicación de AJAX y aplicaciones de cliente grueso

AJAX es una poderosa tecnología que ha tenido un enorme éxito en la creación de aplicaciones web altamente interactivas y rápidas. De hecho, creo que AJAX es probablemente la tecnología más impactante que ha impulsado un gran cambio de paradigma desde la era de cliente ligero aplicaciones web a los cada vez más densos o cliente gordo aplicaciones web que vemos hoy. La aplicación de encuestas que he estado demostrando en esta serie se considera una aplicación de servidor cliente distribuida implementada como un cliente pesado. Esto significa que la mayoría de la lógica y el comportamiento se implementan en el cliente a través de JavaScript (principalmente usando Vue.js) mientras que el lado del servidor es una API RESTful bastante tonta que simplemente consume y entrega datos.

Hay dos tecnologías principales que permiten que esta aplicación de cliente pesado haga malabarismos con el mantenimiento del estado (datos), el comportamiento y la presentación basada en datos.

• El marco Vue.js con su excelente sistema de reactividad compartido junto con la biblioteca tipo vuex flux
• Funcionalidad AJAX implementada dentro de una biblioteca JavaScript bien diseñada llamada axios

Ya debería estar familiarizado con la genialidad que ofrecen Vue.js y vuex de mis publicaciones anteriores en esta serie. Así que me centraré en explicar AJAX en este artículo. AJAX es una tecnología de comunicación de red que utiliza HTTP para enviar y extraer datos hacia y desde un servidor de manera asincrónica dentro del navegador. De esta manera, el navegador puede actualizar rápidamente componentes individuales que dependen de pequeñas cantidades de datos, en lugar de actualizar toda la página, lo que conduce a una experiencia mucho más receptiva.

Configurar Axios y habilitar CORS

Para instalar axios usaré npm y lo guardaré en mi archivo package.json con el siguiente comando:

$ npm install --save axios

Ahora, para usar axios para realizar solicitudes AJAX desde el cliente al servidor back-end, tendré que hacer un cambio en la aplicación Flask para habilitar Uso compartido de recursos de origen cruzado (CORS). Cada vez que un cliente realiza una solicitud de un recurso que reside en otra máquina según lo definido por el protocolo, la dirección IP / nombre de dominio o el número de puerto, se deben agregar encabezados adicionales asociados con CORS. Afortunadamente, hay una pequeña extensión práctica para matraces, Matraz-CORS, eso hace que la integración con Flask sea muy fácil. Como hice anteriormente, uso pip para instalarlo así.

(venv)$ pip install Flask-CORS

A continuación, necesito importar e instanciar el CORS objeto de extensión luego regístrelo con el objeto de aplicación Flask dentro del módulo application.py de la aplicación back-end.

"""
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

Implementación de solicitudes AJAX con Axios

A continuación, necesito reemplazar las funciones simuladas que implementé anteriormente en scr / api / index.js con solicitudes GET, POST y PUT usando la biblioteca axios. Si reString del último artículo, definí los siguientes puntos finales de la API RESTful en la aplicación Flask, que deberán llamarse desde JavaScript dentro del navegador.

Funcionalidad del método de ruta

En src / api / index.js necesito importar la biblioteca axios y para la reutilización también defino una variable llamada API_URL que es igual a la raíz del recurso API http://127.0.0.1:5000/api. Luego reemplazo el cuerpo de las funciones existentes para usar los métodos axios get(...), put(...)y post(...) al igual que:

// 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)
}

Ahora solo hay dos pequeños cambios para realizar en src / store / index.js para adaptarse a la convención utilizada por axios para devolver datos de solicitudes get. En el loadSurvey(...) y loadSurveys(...) métodos de acción, cada uno de ellos está llamando a la función que a su vez llama al axios.get(...) métodos, que devuelven promesas. Cuando estas promesas se resuelvan, contendrán los datos devueltos por la solicitud AJAX al servidor y esos datos se mantendrán en un .data miembro del objeto de promesa resuelto. Por lo tanto, los datos transmitidos a las mutaciones deberán ser response.data en lugar de solo 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 })
      })
  },

¡Y voilá! ¿Qué tan simple es eso?

Dado que todo el trabajo pesado ya se ocupó de construir el front-end y el back-end en publicaciones anteriores, el trabajo requerido para integrar la comunicación AJAX es literalmente así de simple. Todo lo que queda por hacer es encender los servidores de desarrollo y probar la aplicación de la encuesta.

Conclusión

En este breve artículo he demostrado cómo conectar la aplicación front-end y back-end a través de la poderosa tecnología de comunicación AJAX. Para lograr esto, utilicé la biblioteca axios para manejar el lado del cliente de las cosas, y en el back-end utilicé la extensión Flask-CORS para habilitar CORS.

Gracias por leer y únase a mí para el próximo artículo en el que voy a cubrir la implementación del registro y la autenticación de usuarios. Como siempre, agradezco cualquier comentario o crítica a continuación.