Integraci贸n AJAX con API REST
Contenido
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
/api/surveys/ | OBTENER | Recuperar todas las encuestas |
/api/surveys/ | ENVIAR | Crea una nueva encuesta |
/api/surveys/id/ | OBTENER | Recuperar una encuesta por id |
/api/surveys/id/ | PONER | Actualizar las selecciones de opciones de una encuesta |
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.