Comment contacter le backend dans vue

Vue est un framework JavaScript permettant de créer des interfaces utilisateur. Il présente de nombreux avantages, tels qu'être facile à apprendre, personnalisable, facilitant la création d'applications complexes d'une seule page, et bien plus encore. Vue examine généralement le problème du point de vue de la construction front-end, mais il doit être intégré au back-end dans de nombreux projets pour communiquer avec les applications back-end telles que les bases de données et les serveurs. Cet article expliquera comment utiliser Vue pour interagir avec le backend.

1. Paramètres du backend

Avant de commencer, assurez-vous que l'application backend peut recevoir des requêtes de Vue. Cela nécessite généralement la configuration de points de terminaison d'API pour envoyer des requêtes à Vue et recevoir des réponses. Dans votre code backend, vous devez définir des routes pour toutes les requêtes envoyées par votre application Vue. Le routage est chargé de déterminer quelle fonction de l'application répondra aux requêtes Vue.

Ajoutez le code suivant dans le fichier de routage :

app.get('/getdata', function(req, res) {

res.send（sampledata）;

});

Le code ci-dessus définit le routage de l'application afin qu'elle puisse être affiché dans le navigateur La réponse définie dans le code est renvoyée lorsque GET le point de terminaison "/getdata".

2. Envoyer une requête depuis une application Vue

Le principal moyen pour Vue de demander des données backend est d'utiliser le plug-in Vue Resource. Vue Resource est une bibliothèque HTTP qui fournit un service dans Vue qui peut être utilisé pour envoyer des requêtes HTTP.

Ajoutez le code suivant au composant Vue :

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource);

export default {

name: 'my-component',
data () {
  return {
    results: {}
  }
},
created () {
    this.$http.get('/getdata')
        .then(response => {
            this.results = response.body;
        }, response => {
            console.log('Error fetching data');  
        });
    }

}

Dans le ci-dessus, lorsque le composant est créé, il appellera le service $http de Vue pour envoyer une requête GET au serveur et renverra la réponse au composant. Si la requête renvoie des données avec succès, le modèle du composant est rendu à l'aide des données.

3. Traitement de la réponse du backend

Lorsque Vue Resource reçoit la réponse, elle renvoie un objet Promise. Cet objet peut être utilisé pour vérifier si la réponse a réussi et, si c'est le cas, utiliser les données de la réponse.

Dans le code ci-dessus, si la réponse réussit, les données du corps de la réponse sont stockées dans l'objet de résultats du composant. Cet objet est ensuite utilisé pour restituer les modèles Vue. Si la demande échoue, un message d'erreur est imprimé.

Il s'agit de la méthode de base pour interagir avec le backend à l'aide de Vue. Pour utiliser des fonctions plus avancées, telles que l'envoi de requêtes à l'aide des méthodes POST, PUT et DELETE, l'envoi et le traitement des données de formulaire, etc., vous pouvez consulter la documentation Vue Resource.

Résumé

Vue est une technologie importante pour les applications Web modernes. Le plugin Vue Resource est le principal outil pour interagir avec le backend. Lors de la création d'applications Vue, l'intégration des ressources Vue dans votre application est indispensable. Assurez-vous que votre serveur est configuré pour recevoir les requêtes Vue et renvoyer les réponses à votre application. En consultant la documentation de Vue Resource, vous pouvez découvrir comment Vue utilise plus de fonctionnalités pour interagir avec le backend.

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!