So kombinieren Sie Vue-Scaffolding mit Thinkphp

Vue ist ein datengesteuertes JavaScript-Framework und ThinkPHP ist ein Open-Source-PHP-Framework. Beide sind in ihren jeweiligen Bereichen sehr beliebt. Die gemeinsame Nutzung von Vue und ThinkPHP ist ein sehr wichtiges Thema, da wir so Webanwendungen effizienter und komfortabler entwickeln können. In diesem Artikel wird erläutert, wie Sie Vue und ThinkPHP für die Entwicklung verwenden.

1. Erstellen Sie ein Vue-Projekt.

Um Vue verwenden zu können, müssen wir zunächst ein Vue-Projekt erstellen. Wir können dies mit Vue CLI (Command Line Interface) tun. Die Vue-CLI kann mit dem folgenden Befehl installiert werden:

npm install -g vue-cli

Anschließend kann mit dem folgenden Befehl ein neues Vue-Projekt erstellt werden:

vue init webpack my-project

Here, 'my-project' ist der Projektname. Wir können dann zum Projektverzeichnis navigieren und alle erforderlichen Abhängigkeiten installieren:

cd my-project
npm install

2 Install ThinkPHP

Jetzt haben wir ein neues Vue-Projekt erstellt. Als nächstes müssen wir ThinkPHP installieren und konfigurieren. Hierbei gehen wir davon aus, dass Sie bereits einen PHP- und MySQL-Server installiert haben. Die neueste Version des Framework-Codes kann von der offiziellen Website von ThinkPHP heruntergeladen und im Serververzeichnis des Projekts abgelegt werden. Als Nächstes müssen Sie die Datenbankverbindung konfigurieren und eine Datenbanktabelle zum Speichern der Daten erstellen. Sie können den folgenden Code verwenden, um eine einfache Tabelle zu erstellen:

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;

Dadurch wird eine Tabelle namens „Benutzer“ erstellt, die drei Felder „ID“, „Name“ und „E-Mail“ enthält.

3. Vue mit ThinkPHP verbinden

Jetzt sind wir bereit, Vue mit ThinkPHP zu verbinden. Im Stammverzeichnis des Vue-Projekts müssen wir einen neuen Ordner namens „config“ erstellen. In diesem Ordner müssen wir eine neue Datei namens „index.js“ erstellen. Dies ist eine Vue-Konfigurationsdatei, mit der Optionen für die Kommunikation mit dem Server festgelegt werden. Diese Datei kann mit dem folgenden Code erstellt werden:

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

Dadurch wird der Vue-Entwicklungsserver so eingerichtet, dass er alle Anfragen von „/api“ weiterleitet und sie an den Server auf „localhost:8080“ sendet. Sie können diese Werte nach Bedarf ändern.

Als nächstes müssen wir die Eintragsdatei des Vue-Projekts ändern (normalerweise „index.js“). Wir können den folgenden Code verwenden, um die Verbindung von Vue zum Server einzurichten:

import axios from 'axios'

axios.defaults.baseURL = '/api'

Vue.prototype.$http = axios

Dadurch wird Vue angewiesen, die Axios-Bibliothek zum Senden aller HTTP-Anfragen zu verwenden. Hier legen wir auch die Basis-URL fest, damit Anfragen per Proxy an den richtigen Server weitergeleitet werden.

Jetzt müssen wir eine einfache Komponente erstellen, um Daten vom Server abzurufen. Wir können den folgenden Code verwenden, um diese Komponente zu erstellen:

<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>

Dadurch wird eine Vue-Komponente namens „UserList“ erstellt, die eine Liste der Benutzer vom Server abruft und deren Namen und E-Mail-Adressen anzeigt.

Schließlich müssen wir auf der Serverseite einen Handler erstellen, um die von Vue gestellten Anforderungen zu verarbeiten. Dieser Handler kann mit dem folgenden Code erstellt werden:

<?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);
    }
}

Dadurch wird ein Controller namens „Api“ erstellt, der Anfragen auf der Route „/api/users“ verarbeitet und eine Liste von Benutzern zurückgibt.

4. Führen Sie die Anwendung aus.

Jetzt können wir die Anwendung ausführen. Im Stammverzeichnis Ihres Vue-Projekts können Sie den Entwicklungsserver mit dem folgenden Befehl starten:

npm run dev

Dadurch wird der Entwicklungsserver von Vue gestartet und Vue mit dem ThinkPHP-Server verbunden. Auf unsere Beispielkomponente kann über die folgende URL zugegriffen werden:

http://localhost:8080/users

Dadurch wird eine Liste der Benutzer vom Server abgerufen und auf der Seite angezeigt.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie Vue und ThinkPHP für die Entwicklung verwenden. Wir haben etwas über den Prozess der Erstellung eines Vue-Projekts, der Installation und Konfiguration von ThinkPHP und der Verbindung von Vue mit ThinkPHP erfahren. Wir haben außerdem eine einfache Vue-Komponente erstellt, um Daten vom Server abzurufen, und erläutert, wie ein serverseitiger Handler erstellt wird. Wenn Sie mit der Entwicklung mit Vue und ThinkPHP beginnen möchten, wird Ihnen dieser Artikel auf jeden Fall weiterhelfen.

Das obige ist der detaillierte Inhalt vonSo kombinieren Sie Vue-Scaffolding mit Thinkphp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!