Erste Schritte mit Laravel Livewire

Gute Nachrichten für Laravel -Entwickler: Verwenden Sie LiveWire, um die Dynamic -Schnittstellenkonstruktion zu vereinfachen! In diesem Artikel werden Sie LiveWire verwendet, dieses leistungsstarke Laravel Full Stack -Framework, problemlos dynamische interaktive Schnittstellen erstellen und die Menge an JavaScript -Code erheblich reduzieren. Mit LiveWire können Sie sich eher auf die Entwicklung von Anwendungsfunktionen als auf die mühsamen zugrunde liegenden Implementierungen konzentrieren.

Kernpunkte:

• LiveWire ist ein Full-Stack-Framework, das hauptsächlich PHP- und Blade-Vorlagen verwendet, um dynamische Schnittstellen von Laravel zu erstellen, und verfügt über nur über sehr wenig JavaScript-Code.
• Dieses Tutorial führt Sie durch den Erstellen einer CRUD -App, die zeigt, wie LiveWire dynamische UI -Updates (z. B. Suche und Sortieren) ohne das Nachladen von Seiten umgeht.
• LiveWire ist eine hervorragende Alternative zu Vue.js, insbesondere für Front-End-Framework-Neulinge mit einer glatteren Lernkurve, da sie die Laravel-Vorlagen, mit denen Sie vertraut sind, optimal nutzen.
• Der Setup -Prozess umfasst das Erstellen eines neuen Laravel -Projekts, die Einrichtung einer Datenbank, die Installation von LiveWire und andere notwendige Abhängigkeiten.
Zu den wichtigsten Funktionen von LiveWire gehören Echtzeitüberprüfung, Paging und Verwaltung von Benutzerinteraktionen direkt auf der Schnittstelle (Erstellen, Aktualisieren und Löschen von Benutzern).
• Optimierungstechniken werden auch in den
-Tutorials hervorgehoben, z.

Was ist Livewire?

LiveWire ist eine Bibliothek, mit der Sie reaktionsschnelle dynamische Schnittstellen mit Blattvorlagen und einer kleinen Menge JavaScript erstellen können. "Small" liegt daran, dass wir nur JavaScript schreiben müssen, um Daten über Browserereignisse zu übergeben und auf sie zu reagieren.

Sie können LiveWire verwenden, um die folgenden Funktionen ohne Seite neu zu laden:

Pagination
Formprüfung
Benachrichtigung
Datei -Upload -Vorschau

Es ist zu beachten, dass die Funktionen von LiveWire viel mehr als das sind. Sie können es für weitere Szenarien verwenden, und die oben genannten sind nur einige der häufigsten Szenarien.

Vergleich von Livewire mit Vue

vue war immer der bevorzugte Front-End-Rahmen für Laravel-Entwickler, um ihren Anwendungen Interaktivität zu verleihen. Wenn Sie bereits Vue verwenden, ist das Lernen von Livewire optional. Wenn Sie jedoch bei Laravel Front-End-Entwicklung neu sind und nach einer Alternative zu Vue suchen, ist LiveWire eine gute Option. Die Lernkurve ist flacher als Vue, da Sie hauptsächlich Blade zum Schreiben von Vorlagendateien verwenden.

Weitere Informationen zum Vergleich von LiveWire und Vue finden Sie in "Laravel Livewire vs Vue".

Anwendungsübersicht

Wir werden eine Echtzeit-CRUD-Anwendung erstellen. Es handelt sich im Wesentlichen um eine CRUD -Anwendung, bei der kein Seiten -Nachladen erforderlich ist. LiveWire wird alle AJAX -Anfragen behandeln, die zur Aktualisierung der Benutzeroberfläche erforderlich sind, einschließlich Filterergebnisse über Suchfelder, Sortieren nach Spaltentiteln und einfache Pagination (vorher und nächstes). Das Erstellen und Bearbeiten von Benutzern verwendet das Bootstrap -Modalfeld.

Sie können das Github -Repository besuchen, um den Quellcode dieses Projekts anzuzeigen.

Voraussetzungen

In diesem Tutorial geht davon aus, dass Sie Erfahrung in der Entwicklung von PHP -Anwendungen haben. Die Laravel -Erfahrung wird hilfreich sein, aber nicht erforderlich. Wenn Sie nur reine PHP- oder andere PHP -Frameworks kennen, können Sie auch weiter lernen.

In diesem Tutorial geht davon aus, dass Sie die folgende Software auf Ihrem Computer installiert haben:

• php
• mysql
• nginx
• Komponist
• Knoten und NPM

Wenn Sie einen Mac verwenden, ist die Installation von DBNgin und Laravel Valet bequemer als die Installation von MySQL und Nginx.

Projekteinstellungen

Sie können ein neues Laravel -Projekt erstellen:

composer create-project laravel/laravel livecrud

Navigieren Sie zum generierten LiveCrud -Ordner. Dies ist der Stammprojektordner, in dem Sie alle Befehle im gesamten Tutorial ausführen.

Der nächste Schritt besteht darin, eine MySQL -Datenbank mit dem Datenbankverwaltungs -Tool Ihrer Wahl zu erstellen. Nennen Sie die Datenbank livecrud.

Backend -Abhängigkeiten installieren

Wir haben nur eine Backend -Abhängigkeit, dh Livewire. Installieren Sie es mit dem folgenden Befehl:

composer require livewire/livewire:2.3

Hinweis: Wir haben eine bestimmte Version installiert, die ich beim Erstellen der Demo verwendet habe. Wenn Sie diesen Artikel in Zukunft lesen, wird empfohlen, die neueste Version zu installieren. Schauen Sie sich unbedingt das Projektänderungs Protokoll im GitHub -Repository an, um sicherzustellen, dass Sie nichts verpasst haben.

Einrichten Sie die Datenbank

Aktualisieren Sie die Standardmigration, um Benutzertabellen zu erstellen und die benutzerdefinierten Felder hinzuzufügen, die wir verwenden:

// database/migrations/<timestamp>_create_users_table.php
</timestamp>public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->enum('user_type', ['admin', 'user'])->default('user'); // add this
        $table->tinyInteger('age'); // add this
        $table->string('address')->nullable(); // add this
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password');
        $table->rememberToken();
        $table->timestamps();
    });
}

Aktualisieren Sie als nächstes die Datei Datenbank/Factories/userFactory.php und geben Sie den Wert für die benutzerdefinierten Felder an, die wir hinzugefügt haben:

// database/factories/UserFactory.php
public function definition()
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique()->safeEmail,
        'email_verified_at' => now(),
        'password' => 'yIXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween(18, 60),
        'address' => $this->faker->address,
    ];
}

Öffnen Sie schließlich die Datei database/Seaser/Databaseseeder.php und kontrollieren Sie den Anruf, um den virtuellen Benutzer zu erstellen:

// database/seeders/DatabaseSeeder.php
public function run()
{
    \App\Models\User::factory(100)->create();
}

Vergessen Sie nicht, Ihre .Env -Datei mit der Testdatenbank zu aktualisieren, die Sie verwenden. In diesem Fall habe ich die Datenbank LiveCrud benannt. Sobald er fertig ist, führen Sie die Migration und den Säator aus, um die Datenbank zu bevölkern:

php artisan migrate
php artisan db:seed

Setzen Sie Front-End-Abhängigkeiten

Um den Vorgang zu vereinfachen, werden wir Laravel Scaffold für Bootstrap verwenden. Dazu müssen Sie zuerst das Laravel/UI -Paket installieren:

composer require laravel/ui

Als nächstes installieren Sie Bootstrap 4. Dadurch wird die Konfiguration in Ihrer Datei webpack.mix.js hinzugefügt und Ressourcen/js/app.js und ressourcen/sass/app.scss -Dateien erstellt:

php artisan ui bootstrap

Fügen Sie als nächstes eine Schriftart zu Ressourcen/Sass/App.scss -Datei hinzu. Standardmäßig sollte es bereits Schriftarten, Variablen und Bootstrap -Importe enthalten:

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// add these:
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";

Nach dem Abschluss alle Abhängigkeiten installieren:

npm install @fortawesome/fontawesome-free
npm install

(nächste Schritte aufgrund von Platzbeschränkungen werden Sie in Segmenten ausgegeben. Bitte stellen Sie weiterhin Fragen, um den Rest zu erhalten)

Das obige ist der detaillierte Inhalt vonErste Schritte mit Laravel Livewire. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!