Comment réaliser l'interaction entre thinkphp et vue

Avec le développement continu de la technologie Web, le modèle de séparation front-end et back-end est devenu une tendance dans le développement d'applications Web. Dans ce modèle, le front-end est responsable de la présentation et de l’interaction, tandis que le back-end est responsable du traitement des données et de la logique métier. Par conséquent, l’interaction entre le front-end et le back-end est particulièrement critique. Cet article présentera comment implémenter l'interaction dans ThinkPHP et Vue.

1. Conditions préalables

Avant de commencer à discuter de la façon d'implémenter l'interaction dans ThinkPHP et Vue, nous devons nous assurer que les conditions préalables suivantes sont remplies :

1 L'environnement d'exécution et la base de données PHP ont été installés

2. Le framework ThinkPHP a été installé

3. Vue.js a été installé

Si vous n'avez pas terminé ces préparatifs, veuillez les terminer avant de continuer à lire cet article.

2. API fournie par ThinkPHP

Dans ThinkPHP, nous pouvons fournir une API via le contrôleur pour interagir avec Vue. Une API peut être une requête GET ou une requête POST. De manière générale, les requêtes GET sont utilisées pour obtenir des données, tandis que les requêtes POST sont utilisées pour modifier les données. Regardons un exemple.

1. Créer un contrôleur

Tout d'abord, nous devons créer un contrôleur pour fournir l'API. En supposant que nous ayons créé un contrôleur nommé « Index » dans ThinkPHP, nous pouvons y ajouter une méthode nommée « getArticles » pour fournir une API permettant d'obtenir une liste d'articles.

public function getArticles()
{
    $articles = Db::name('article')->select();
    return json($articles);
}

Le code ci-dessus utilise la classe Db pour obtenir la liste des articles de la base de données, la convertit au format JSON via la fonction json et enfin la renvoie au navigateur en réponse.

2. Accédez à l'API dans Vue

Ensuite, nous devons appeler cette API dans Vue et obtenir la liste des articles renvoyés. Comme nous le savons tous, Vue peut utiliser la bibliothèque axios pour envoyer des requêtes HTTP. Regardons un exemple.

axios.get('/index/getArticles')
.then(function(response) {
    console.log(response.data);
})
.catch(function(error) {
    console.log(error);
});

Le code ci-dessus utilise la méthode axios.get pour accéder à l'API que nous avons créée ci-dessus et imprime la liste des articles sur la console lorsque la réponse est réussie. Notez que nous devons uniquement spécifier le chemin d'accès à l'API puisque nous utilisons des chemins relatifs. Si votre serveur est configuré avec un hôte virtuel, vous devez configurer le chemin comme chemin absolu.

3. Composants fournis par Vue

En plus d'utiliser l'API, Vue fournit également de nombreux composants pour rendre l'interaction avec le backend plus pratique. Par exemple, Vue fournit un composant appelé Axios, qui nous facilite l'utilisation de la bibliothèque axios.

1. Installer Axios

Pour utiliser Axios, nous devons d'abord l'installer dans notre projet Vue. Exécutez la commande suivante dans la console :

npm install axios --save

2. Utilisation d'Axios

Une fois l'installation terminée, nous pouvons l'utiliser dans le composant Vue. Créons un composant appelé "ArticleList" dans Vue pour afficher une liste d'articles.

<template>
  <div>
    <ul>
      <li v-for="article in articles">{{ article.title }}</li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        articles: []
      }
    },
    created() {
      axios.get('/index/getArticles')
      .then((response) => {
        this.articles = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
    }
  }
</script>

Le code ci-dessus utilise la méthode axios.get pour obtenir la liste des articles de l'API et l'enregistre dans les propriétés du composant. Le composant exécute automatiquement la fonction de création lors de sa création afin d'afficher la liste des articles dès leur récupération.

4. Résumé

Maintenant, nous avons appris comment implémenter l'interaction dans ThinkPHP et Vue. Que vous utilisiez des API ou des composants, la communication entre le front-end et le back-end peut être facilement réalisée. J'espère que cet article vous sera utile et je vous souhaite plus de succès dans le développement d'applications Web !

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!