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

Gracias por acompañarme en la quinta publicación sobre el uso de Vue.js y Flask para el desarrollo web completo. Esta publicación será bastante corta, pero muy valiosa ya que...

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 completo. Esta publicación será bastante breve, pero muy valiosa, ya que demostraré cómo conectar las aplicaciones de front-end y back-end utilizando JavaScript asincrónico y XML (también conocido como AJAX).

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

Contenido de la serie

  1. Configuración y familiarización con VueJS
  2. Navegación por el enrutador Vue
  3. Gestión de estados con Vuex
  4. API RESTful con Flask
  5. Integración de AJAX con REST API (usted está aquí)
  6. Autenticación JWT
  7. Implementación en un servidor privado virtual

Breve explicación de AJAX y aplicaciones de cliente grueso {#explicación breve de ajaxandthickclientapps}

AJAX es una tecnología poderosa que ha tenido un enorme éxito en la creación de aplicaciones web rápidas y altamente interactivas. De hecho, creo que AJAX es probablemente la tecnología más impactante que ha impulsado un importante cambio de paradigma desde la era de las aplicaciones web cliente ligero a las cada vez más gruesas 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 de 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.

  1. El marco Vue.js con su excelente sistema de reactividad compartido junto con la biblioteca similar a vuex flux
  2. 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 recibir datos desde y hacia un servidor de manera asíncrona dentro del navegador. De esta forma, el navegador puede actualizar rápidamente los 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.

Configuración de Axios y habilitación de CORS

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

1
$ 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 [Intercambio de recursos de origen cruzado](https://developer.mozilla. org/en-US/docs/Web/HTTP/CORS) (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 y práctica extensión de Flask, Matraz-CORS, que facilita mucho la integración con Flask. Como se hizo anteriormente, uso pip para instalarlo así.

1
(venv)$ pip install Flask-CORS

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
"""
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 recuerdas del último artículo definí los siguientes extremos de API RESTful en el Flask aplicación que deberá llamarse desde JavaScript dentro del navegador.

Funcionalidad del método de ruta


/api/surveys/ GET Recuperar todas las encuestas /api/surveys/ POST Crear una nueva encuesta /api/surveys/id/ GET Recuperar una encuesta por ID /api/surveys/id/ PUT Actualizar las selecciones de elección de una encuesta

En src/api/index.js necesito importar la biblioteca axios y para 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(...) así:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
// 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 que hacer dos pequeños cambios en src/store/index.js para adaptarse a la convención utilizada por axios para devolver datos de solicitudes de obtención. En los métodos de acción loadSurvey(...) y loadSurveys(...), cada uno llama a la función que a su vez llama a los métodos axios.get(...), 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 miembro .data del objeto de la promesa resuelta. Por lo tanto, los datos pasados ​​a las mutaciones deberán ser response.data en lugar de solo response.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
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 hizo cargo de la construcción del 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 iniciar 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 y, en el back-end, utilicé la extensión Flask-CORS para habilitar CORS.

Gracias por leer y acompáñenme en el próximo artículo en el que cubriré la implementación del registro y la autenticación de usuarios. Como siempre, agradezco cualquier comentario o crítica a continuación.