Comment combiner l'échafaudage Vue avec thinkphp

Vue est un framework JavaScript basé sur les données et ThinkPHP est un framework PHP open source. Ils sont tous deux très populaires dans leurs domaines respectifs. Comment utiliser Vue et ThinkPHP ensemble est une question très importante, car cela nous permet de développer des applications Web de manière plus efficace et plus pratique. Cet article explique comment utiliser Vue et ThinkPHP pour le développement.

1. Créer un projet Vue

Pour utiliser Vue, nous devons d'abord créer un projet Vue. Nous pouvons le faire en utilisant Vue CLI (Command Line Interface). La Vue CLI peut être installée à l'aide de la commande suivante :

npm install -g vue-cli

Ensuite, un nouveau projet Vue peut être créé à l'aide de la commande suivante :

vue init webpack my-project

Ici, « mon-projet » est le nom du projet. Nous pouvons ensuite accéder au répertoire du projet et installer toutes les dépendances requises :

cd my-project
npm install

2. Installez ThinkPHP

Maintenant, nous avons créé un nouveau projet Vue. Ensuite, nous devons installer et configurer ThinkPHP. Ici, nous supposons que vous avez déjà installé le serveur PHP et MySQL. La dernière version du code du framework peut être téléchargée depuis le site officiel de ThinkPHP et placée dans le répertoire du serveur du projet. Ensuite, vous devez configurer la connexion à la base de données et créer une table de base de données pour stocker les données. Vous pouvez utiliser le code suivant pour créer une table simple :

CREATE TABLE `users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL DEFAULT '',
  `email` varchar(255) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Cela créera une table appelée "users" qui comporte trois champs "id", "name" et "email".

3. Connectez Vue à ThinkPHP

Maintenant, nous sommes prêts à connecter Vue à ThinkPHP. Dans le répertoire racine du projet Vue, nous devons créer un nouveau dossier appelé « config ». Dans ce dossier, nous devons créer un nouveau fichier appelé « index.js ». Il s'agit d'un fichier de configuration Vue utilisé pour définir les options de communication avec le serveur. Ce fichier peut être créé en utilisant le code suivant :

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

Cela configurera le serveur de développement Vue pour qu'il proxy toutes les requêtes de '/api' et les envoie au serveur sur 'localhost:8080'. Vous pouvez modifier ces valeurs selon vos besoins.

Ensuite, nous devons modifier le fichier d'entrée du projet Vue (généralement 'index.js'). Nous pouvons utiliser le code suivant pour configurer la connexion de Vue au serveur :

import axios from 'axios'

axios.defaults.baseURL = '/api'

Vue.prototype.$http = axios

Cela indiquera à Vue d'utiliser la bibliothèque axios pour envoyer toutes les requêtes HTTP. Ici, nous définissons également l'URL de base afin que les demandes soient transmises au bon serveur.

Maintenant, nous devons créer un composant simple pour obtenir les données du serveur. Nous pouvons utiliser le code suivant pour créer ce composant :

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.email }})</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      users: []
    }
  },

  created () {
    this.$http.get('/users')
      .then(response => {
        this.users = response.data
      })
  }
}
</script>

Cela créera un composant Vue appelé 'UserList' qui obtiendra une liste d'utilisateurs du serveur et affichera leurs noms et adresses e-mail.

Enfin, côté serveur, nous devons créer un Handler pour gérer les requêtes faites par Vue. Ce gestionnaire peut être créé en utilisant le code suivant :

<?php

namespace app\index\controller;

use think\Controller;
use think\Db;

class Api extends Controller
{
    public function getUsers()
    {
        $users = Db::name(&#39;users&#39;)->select();
        return json($users);
    }
}

Cela créera un contrôleur appelé "Api" qui gérera les requêtes sur la route "/api/users" et renverra une liste d'utilisateurs.

4. Exécutez l'application

Maintenant, nous sommes prêts à exécuter l'application. Dans le répertoire racine de votre projet Vue, vous pouvez démarrer le serveur de développement avec la commande suivante :

npm run dev

Cela démarrera le serveur de développement de Vue et connectera Vue au serveur ThinkPHP. Notre exemple de composant est accessible à l'aide de l'URL suivante :

http://localhost:8080/users

Cela permettra d'obtenir une liste d'utilisateurs du serveur et de les afficher sur la page.

Résumé

Cet article présente comment utiliser Vue et ThinkPHP pour le développement. Nous avons découvert le processus de création d'un projet Vue, d'installation et de configuration de ThinkPHP et de connexion de Vue à ThinkPHP. Nous avons également créé un composant Vue simple pour obtenir des données du serveur et expliqué comment créer un gestionnaire côté serveur. Si vous souhaitez commencer à développer avec Vue et ThinkPHP, cet article vous aidera certainement.

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!