Création d'un exemple SPA à l'aide de Python et Vue.js

Avec la popularité des applications Web, les applications monopage (SPA) sont devenues une tendance. SPA ne nécessite pas de recharger la page à chaque fois, mais laisse la gestion du contenu à JavaScript, améliorant ainsi les performances des applications Web.

Dans cet article, nous utiliserons Python et Vue.js pour créer un exemple SPA simple. Python sera utilisé pour fournir l'API backend et Vue.js sera utilisé pour l'implémentation frontend.

Étape 1 : Configurer l'environnement

Pour créer cette application, vous devez installer Python 3.x et Node.js. Vous pouvez télécharger le programme d'installation sur le site officiel.

Une fois l'installation terminée, vous pouvez exécuter la commande suivante dans le terminal pour vérifier si l'installation a réussi :

python --version
node --version

Étape 2 : Créer l'API backend

Nous utiliserons le framework Flask pour fournir l'API backend. Flask est un micro-framework écrit en Python qui facilite la création d'applications Web.

Nous devons installer la bibliothèque Flask et Flask-CORS pour effectuer des requêtes d'origine croisée à l'API depuis le client.

Créez un répertoire appelé « backend », puis créez un fichier Python appelé « app.py » dans ce répertoire. Copiez le code suivant dans ce fichier :

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/test')
def test():
    return {'message': 'Hello from the backend!'}

Ici, nous avons créé une application Flask et activé CORS. Ensuite, nous définissons une route comme "/api/test" qui renverra un message simple.

Ensuite, vous pouvez exécuter la commande suivante dans le terminal pour démarrer le serveur API backend :

export FLASK_APP=app.py
export FLASK_ENV=development
flask run

Étape 3 : Créer l'application Vue.js frontale

Ensuite, nous créerons une application d'une seule page à l'aide de Vue.js. Vous pouvez choisir d'utiliser Vue CLI pour créer des applications Vue.js.

Allez dans le répertoire « backend » du terminal et exécutez la commande suivante :

npm install -g @vue/cli
vue create frontend

Cela créera un répertoire appelé « frontend » et configurera une application Vue.js de base pour vous.

Ensuite, nous devons installer la bibliothèque axios pour accéder à l'API backend depuis l'application frontend. Exécutez la commande suivante dans le répertoire "frontend" :

npm install axios

Vous pouvez maintenant ouvrir le fichier "src/App.vue" dans votre application Vue.js et copier le code suivant dans la balise du modèle :

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    data() {
      return {
        message: ""
      };
    },
    mounted() {
      this.getMessage();
    },
    methods: {
      getMessage() {
        axios.get("http://localhost:5000/api/test").then(response => {
          this.message = response.data.message;
        });
      }
    }
  };
</script>

Le code ci-dessus contient Un modèle simple qui affiche les messages de l'API backend sur la page. Il contient également un composant Vue.js qui utilise la bibliothèque axios pour récupérer les messages de l'API backend et les lier aux éléments de la page.

Ensuite, vous pouvez exécuter la commande suivante dans le terminal pour lancer l'application Vue.js :

npm run serve

Quatrième étape : tester l'application

Vous pouvez maintenant utiliser votre navigateur pour accéder à http://localhost:8080 et cela devrait Vous pouvez voir un message intitulé « Bonjour du backend ! »

Fait ! Vous pouvez désormais continuer à développer votre application selon vos besoins. Il s'agit d'un exemple d'application simple, mais vous pouvez utiliser ce modèle pour créer des applications plus volumineuses, notamment la connexion et l'authentification, les connexions à des bases de données et des interfaces frontales plus complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!