Vue Python: Integración de Vue.js y Python

Vue Python: Integración de Vue.js y Python

Vue.js es un framework de JavaScript para crear interfaces de usuario. Python es un lenguaje de programación de alto nivel que se utiliza para una amplia gama de tareas, incluyendo desarrollo web, ciencia de datos y machine learning.

En este tutorial, veremos cómo integrar Vue.js y Python para crear una aplicación web completa.

Requisitos

Para seguir este tutorial, necesitarás los siguientes requisitos:

  • Node.js y npm
  • Python 3.7 o superior
  • Un editor de código, como Visual Studio Code o Sublime Text

Creación del proyecto

Lo primero que haremos es crear un proyecto de Vue.js. Para ello, ejecutamos el siguiente comando en la terminal:

vue create my-app

Este comando creará un proyecto de Vue.js llamado my-app.

Creación del backend

Ahora crearemos el backend de nuestra aplicación. Para ello, crearemos un nuevo directorio llamado backend y crearemos un archivo app.py.

En el archivo app.py, importaremos el paquete Flask y crearemos un objeto de aplicación:

Python
from flask import Flask

app = Flask(__name__)

A continuación, crearemos una ruta básica que devolverá el texto «Hello, world!».

Python
@app.route("/")
def index():
    return "Hello, world!"

Para iniciar el servidor, ejecutaremos el siguiente comando en la terminal:

python app.py

Esto iniciará el servidor en el puerto 5000. Podemos acceder a la aplicación en la siguiente URL:

http://localhost:5000

Integración de Vue.js y Python

Ahora que tenemos el backend de nuestra aplicación, podemos integrarlo con Vue.js.

Para ello, crearemos un nuevo componente Vue.js llamado HelloWorld.

En el archivo HelloWorld.vue, importaremos el paquete axios y crearemos un componente que se conecte al backend:

Fragmento de código
<template>
  <div>
    <h1>Hello, world!</h1>
    <p>
      <button @click="getHelloWorld">Get Hello World</button>
    </p>
    <p>{{ helloWorld }}</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HelloWorld",
  data() {
    return {
      helloWorld: null,
    };
  },
  methods: {
    getHelloWorld() {
      axios
        .get("http://localhost:5000")
        .then((response) => {
          this.helloWorld = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

Este componente tiene un botón que, al hacer clic, llama a la ruta / del backend. La respuesta del backend se almacena en la variable helloWorld.

Para usar el componente HelloWorld, lo importaremos en el archivo App.vue.

Fragmento de código
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

Ahora, podemos iniciar el servidor de Vue.js ejecutando el siguiente comando en la terminal:

npm run serve

Esto iniciará el servidor de Vue.js en el puerto 8080. Podemos acceder a la aplicación en la siguiente URL:

http://localhost:8080

Al hacer clic en el botón «Get Hello World», se mostrará el texto «Hello, world!» en la página.

Conclusiones

En este tutorial, vimos cómo integrar Vue.js y Python para crear una aplicación web completa.

Utilizamos el paquete axios para conectar el componente Vue.js al backend de Python. El backend de Python simplemente devuelve el texto «Hello, world!».

Podemos extender este tutorial para crear aplicaciones web más complejas. Por ejemplo, podemos usar Vue.js para crear una interfaz