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

    /api/surveys/OBTENERRecuperar todas las encuestas
    /api/surveys/ENVIARCrea una nueva encuesta
    /api/surveys/id/OBTENERRecuperar una encuesta por id
    /api/surveys/id/PONERActualizar 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.

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *