Planet Alpha

Erstellen Sie ein CMS mit Laravel und Vue

Blog

Erstellen Sie ein CMS mit Laravel und Vue

Erstellen Sie ein CMS mit Laravel und Vue - Teil 1: Einrichten

Die Geburt des Internets hat seitdem die Zugänglichkeit von Inhalten zum Besseren neu definiert und zu einem deutlichen Anstieg des Inhaltskonsums auf der ganzen Welt geführt. Der durchschnittliche Internetnutzer konsumiert und produziert irgendeine Form von Inhalten formell oder informell.



Ein Beispiel für die Bemühungen um formelle Inhaltserstellung ist, wenn jemand einen Blogbeitrag über seine Arbeit verfasst, damit eine bestimmte Zielgruppe ihre Website leicht finden kann. Diese Art von Inhalten wird in der Regel von einem CMS (Content Management System) bereitgestellt und verwaltet. Einige beliebte sind WordPress , Drupal und SilverStripe.





Ein CMS hilft Content-Erstellern, Inhalte in einem leicht konsumierbaren Format zu produzieren. In dieser Tutorial-Reihe betrachten wir, wie man mit Laravel und Vue ein einfaches CMS von Grund auf neu erstellt.



Unser CMS wird in der Lage sein, neue Beiträge zu erstellen, bestehende Beiträge zu aktualisieren, Beiträge zu löschen, die wir nicht mehr benötigen, und es Benutzern auch ermöglicht, Kommentare zu Beiträgen abzugeben, die mit Pusher in Echtzeit aktualisiert werden. Wir werden auch in der Lage sein, Beiträgen vorgestellte Bilder hinzuzufügen, um ihnen eine visuelle Attraktivität zu verleihen.



Wenn wir fertig sind, können wir ein CMS haben, das wie folgt aussieht:





Erstellen Sie ein CMS mit Laravel und Vue

Voraussetzungen

Um dieser Serie folgen zu können, sind einige Dinge erforderlich:

  • Grundkenntnisse in PHP.
  • Grundkenntnisse des Laravel-Frameworks.
  • Grundkenntnisse in JavaScript (ES6-Syntax).
  • Grundkenntnisse in Vue.
  • Postman auf Ihrem Computer installiert.

Der Quellcode für dieses Projekt ist hier auf GitHub verfügbar.

Installieren der Laravel-CLI

Wenn Sie die Laravel CLI bereits auf Ihrem Computer installiert haben, überspringen Sie bitte diesen Abschnitt.

Das erste, was wir tun müssen, ist die Laravel-CLI und die Laravel-Abhängigkeiten zu installieren. Die CLI wird bei der Erstellung neuer Laravel-Projekte immer dann hilfreich sein, wenn wir eines erstellen müssen. Laravel erfordert PHP und einige andere Tools und Erweiterungen, daher müssen wir diese zuerst installieren, bevor wir die CLI installieren.

Hier ist eine Liste der Abhängigkeiten, die in der offiziellen Laravel-Dokumentation dokumentiert sind:

Lassen Sie uns sie einzeln installieren.

PHP installieren

Ein Äquivalent für Windows-Benutzer könnte darin bestehen, XAMPP hier herunterzuladen und zu installieren. XAMPP wird mit einer Benutzeroberfläche geliefert, um die meisten anderen Dinge zu installieren, die Sie unten manuell installieren müssen. Daher können Windows-Benutzer die nächsten Schritte überspringen, bis die Composer installieren Unterrubrik.

Öffnen Sie eine neue Instanz des Terminals und fügen Sie den folgenden Befehl ein:

# Linux Users $ sudo apt-get install php7.2 # Mac users $ brew install php72

Zum Zeitpunkt des Schreibens dieses Artikels ist PHP 7.2 die neueste stabile Version von PHP, sodass der obige Befehl sie auf Ihrem Computer installiert.

Nach Abschluss können Sie mit dem folgenden Befehl überprüfen, ob PHP auf Ihrem Computer installiert wurde:

$ php -v

Installieren der Mbstring-Erweiterung

So installieren Sie |_+_| Erweiterung für PHP, fügen Sie den folgenden Befehl in das geöffnete Terminal ein:

mbstring

Um zu überprüfen, ob die |_+_| Erweiterung erfolgreich installiert wurde, können Sie den folgenden Befehl ausführen:

# Linux users $ sudo apt-get install php7.2-mbstring # Mac users # You don't have to do anything as it is installed automatically.

Installieren der XML-PHP-Erweiterung

Um die XML-Erweiterung für PHP zu installieren, fügen Sie den folgenden Befehl in das geöffnete Terminal ein:

mbstring

Um zu überprüfen, ob die |_+_| Erweiterung erfolgreich installiert wurde, können Sie den folgenden Befehl ausführen:

$ php -m | grep mbstring

Installieren der ZIP-PHP-Erweiterung

Um die Zip-Erweiterung für PHP zu installieren, fügen Sie den folgenden Befehl in Ihr Terminal ein:

# Linux users $ sudo apt-get install php-xml # Mac users # You don't have to do anything as it is installed automatically.

Um zu überprüfen, ob die |_+_| Erweiterung erfolgreich installiert wurde, können Sie den folgenden Befehl ausführen:

xml

curl installieren

Windows-Benutzer müssen möglicherweise curl von hier herunterladen.

Um curl zu installieren, fügen Sie den folgenden Befehl in Ihr Terminal ein:

$ php -m | grep xml

Führen Sie den folgenden Befehl aus, um zu überprüfen, ob curl erfolgreich installiert wurde:

# Linux users $ sudo apt-get install php7.2-zip # Mac users # You don't have to do anything as it is installed automatically.

Composer installieren

Windows-Benutzer können Composer hier herunterladen und installieren. Starten Sie nach Abschluss der Installation eine neue Instanz der Eingabeaufforderung als Administrator und führen Sie diesen Befehl aus, wenn Sie Composer benötigen:

zip

Nachdem wir curl auf unserem Computer installiert haben, rufen wir Composer mit diesem Befehl auf:

$ php -m | grep zip

Damit wir Composer in Zukunft ohne Aufruf von |_+_| ausführen können, müssen wir möglicherweise die Berechtigung ändern. Dies sollten Sie jedoch nur tun, wenn Sie Probleme bei der Installation von Paketen haben:

# Linux users $ sudo apt-get install curl # Mac users using Homebrew (https://brew.sh) $ brew install curl

Installation des Laravel-Installationsprogramms

An dieser Stelle können wir bereits ein neues Laravel-Projekt mit Composer's |_+_| . erstellen Befehl, der so aussieht:

$ curl --version

Aber wir gehen noch einen Schritt weiter und installieren den Laravel-Installer mit Composer:

php composer.phar

Wenn Sie Windows verwenden, müssen Sie möglicherweise den vorherigen Befehl in einem erweiterten Terminal wie PowerShell oder dem Gitbash-Terminal ausführen. Windows-Benutzer können die folgenden Schritte auch überspringen.

Nach der Installation müssen wir den PATH zum |_+_| . hinzufügen Datei, damit unser Terminal die |_+_| Befehl:

$ curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin --filename=composer

CMS-Projekt erstellen

Nachdem wir nun die offizielle Laravel-CLI auf unserem Computer installiert haben, erstellen wir unser CMS-Projekt mit dem Installationsprogramm. In Ihrem Terminalfenster, |_+_| in das Projektverzeichnis, in dem Sie das Projekt erstellen möchten, und führen Sie den folgenden Befehl aus:

sudo

Zum Zeitpunkt des Schreibens dieses Artikels ist die neueste Version von Laravel 5.6

Wir navigieren in das Projektverzeichnis und bedienen die Anwendung über den Webserver von PHP:

$ sudo chown -R $USER ~/.composer/

Wenn wir jetzt http://127.0.0.1:8000/ besuchen, sehen wir die Standardvorlage von Laravel:

Einrichten der Datenbank

In dieser Serie verwenden wir MySQL als unser Datenbanksystem, daher ist eine Voraussetzung für diesen Abschnitt, dass MySQL auf Ihrem Computer installiert ist.

Sie können die folgenden Schritte ausführen, um MySQL zu installieren und zu konfigurieren:

  • Linux-Benutzer – hier finden Sie eine detaillierte Anleitung.
  • Mac-Benutzer können einfach den Befehl |_+_| ausführen.
  • Windows-Benutzer, die XAMPP installiert haben, wie zuvor vorgeschlagen, müssen MySQL nicht installieren, da es vorinstalliert ist.

Sie benötigen außerdem einen speziellen Treiber, der es PHP ermöglicht, mit MySQL zu arbeiten, Sie können ihn mit diesem Befehl installieren:

create-project

Laden Sie das Projektverzeichnis in Ihren bevorzugten Texteditor und es sollte ein |_+_| Datei im Stammverzeichnis des Ordners. Hier speichert Laravel seine Umgebungsvariablen.

Erstellen Sie eine neue MySQL-Datenbank und nennen Sie sie |_+_|. Im |_+_| Aktualisieren Sie die Datenbankkonfigurationsschlüssel wie unten gezeigt:

$ composer create-project --prefer-dist laravel/laravel project-name

Ersetzen Sie die |_+_| und |_+_| mit Ihren MySQL-Datenbank-Anmeldeinformationen.

Benutzerrollen einrichten

Wie die meisten Content-Management-Systeme werden wir ein Benutzerrollensystem haben, damit unser Blog mehrere Benutzertypen haben kann. der Admin und der normale Benutzer. Der Administrator sollte in der Lage sein, einen Beitrag zu erstellen und andere CRUD-Vorgänge für einen Beitrag auszuführen. Der normale Nutzer hingegen soll einen Beitrag ansehen und kommentieren können.

Damit wir diese Funktionalität implementieren können, müssen wir die Benutzerauthentifizierung implementieren und ein einfaches Rollenautorisierungssystem hinzufügen.

Benutzerauthentifizierung einrichten

Laravel bietet sofort eine Benutzerauthentifizierung, was großartig ist, und wir können die Funktion durch Ausführen eines einzigen Befehls aufrufen:

$ composer global require 'laravel/installer'

Das oben Genannte erstellt alles, was für die Authentifizierung in unserer Anwendung erforderlich ist, sodass wir nichts zusätzliches tun müssen.

Rollenberechtigung einrichten

Wir benötigen ein Modell für die Benutzerrollen, also erstellen wir eine und eine zugehörige Migrationsdatei:

aol Mail-Anmeldeseite jetzt
bashrc

Im |_+_| Ordner, suchen Sie die neu erstellte Migrationsdatei und aktualisieren Sie die |_+_| Klasse mit diesem Ausschnitt:

laravel

Wir beabsichtigen, eine Viele-zu-Viele-Beziehung zwischen den |_+_| und |_+_| fügen wir also eine Beziehungsmethode zu beiden Modellen hinzu.

Öffne die |_+_| Modell und fügen Sie die folgende Methode hinzu:

$ echo 'export PATH='$HOME/.composer/vendor/bin:$PATH'' >> ~/.bashrc $ source ~/.bashrc

Öffne die |_+_| Modell und beinhalten die folgende Methode:

cd

Außerdem benötigen wir eine Pivot-Tabelle, um jedem Benutzer eine passende Rolle zuzuordnen. Erstellen wir also eine neue Migrationsdatei für die role_user Tisch:

$ laravel new cms

Im |_+_| Ordner, suchen Sie die neu erstellte Migrationsdatei und aktualisieren Sie die |_+_| Klasse mit diesem Ausschnitt:

$ cd cms $ php artisan serve

Als Nächstes erstellen wir Seeder, die die |_+_| . bevölkern und |_+_| Tabellen mit einigen Daten. Führen Sie in Ihrem Terminal den folgenden Befehl aus, um die Datenbank-Seeder zu erstellen:

brew install mysql

Im |_+_| Ordner, öffnen Sie den |_+_| Datei und ersetzen Sie den Inhalt durch den folgenden Code:

# Linux users $ sudo apt-get install php7.2-mysql # Mac Users # You don't have to do anything as it is installed automatically.

Öffne die |_+_| Datei und ersetzen Sie den Inhalt durch den folgenden Code:

.env

Wir müssen auch die |_+_| . aktualisieren Klasse. Öffnen Sie die Datei und aktualisieren Sie die |_+_| Methode wie unten gezeigt:

laravelcms

Als Nächstes aktualisieren wir die |_+_| Modell. Wir werden ein |_+_| . hinzufügen Methode, die überprüft, welche Rolle ein Benutzer hat. Wir geben eine 404-Seite zurück, auf der ein Benutzer nicht die erwartete Rolle für eine Seite hat. Öffne die |_+_| Modell und fügen Sie diese Methoden hinzu:

.env

Ändern wir die |_+_| Datei im |_+_| Ordner, sodass einem neuen Benutzer bei der Registrierung immer eine Standardrolle, die Benutzerrolle, zugeordnet wird.

Öffne die |_+_| und aktualisieren Sie die |_+_| Aktion mit folgendem Code:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravelcms DB_USERNAME=YourUsername DB_PASSWORD=YourPassword

Jetzt migrieren und Seeding der Datenbank, damit wir uns mit den Beispielkonten anmelden können. Führen Sie dazu den folgenden Befehl in Ihrem Terminal aus:

DB_USERNAME

Um zu testen, ob unsere Rollen so funktionieren, wie sie sollten, werden wir die |_+_| . aktualisieren Datei. Öffne die |_+_| und aktualisieren Sie die |_+_| Methode wie unten gezeigt:

DB_PASSWORD

Jetzt sollten nur Administratoren das Dashboard sehen können. In einer komplexeren Anwendung würden wir stattdessen eine Middleware verwenden.

Wir können testen, ob dies funktioniert, indem wir die Anwendung bereitstellen und beide Benutzerkonten anmelden. Samuel Jackson und Neo Ighodaro.

Denken Sie daran, dass in unserem |_+_| Datei haben wir Samuel als normalen Benutzer und Neo als Admin definiert, sodass Samuel nach dem Anmelden einen 404-Fehler sehen sollte und Neo die Homepage sehen kann.

Testen der Anwendung

Lassen Sie uns die Anwendung mit diesem Befehl bedienen:

$ php artisan make:auth

Wenn wir versuchen, uns mit Samuels Zugangsdaten anzumelden, sollten wir Folgendes sehen:

Erstellen Sie ein CMS mit Laravel und Vue

Auf der anderen Seite werden wir mit Neos Zugangsdaten angemeldet, da er ein Admin-Konto hat:

Erstellen Sie ein CMS mit Laravel und Vue

Wir werden auch bestätigen, dass bei jeder Registrierung eines neuen Benutzers ihm eine Rolle zugewiesen wird und es sich um die Rolle eines regulären Benutzers handelt. Wir werden einen neuen Benutzer erstellen und ihn Greg nennen, er sollte direkt danach einen 404-Fehler sehen:

Erstellen Sie ein CMS mit Laravel und Vue

Es funktioniert genau so, wie wir es wollten, aber es macht für uns keinen Sinn, einen normalen Benutzer auf eine 404-Seite umzuleiten. Stattdessen bearbeiten wir die |_+_| damit es Benutzer basierend auf ihren Rollen umleitet, d. h., es leitet einen normalen Benutzer zu einer normalen Homepage und einen Administrator zu einem Administrator-Dashboard um.

Öffne die |_+_| Datei und aktualisieren Sie die |_+_| Methode wie unten gezeigt:

$ php artisan make:model Role -m

Wenn wir unsere Anwendung bereitstellen und versuchen, uns mit dem Administratorkonto anzumelden, wird ein 404-Fehler angezeigt, da wir keinen Controller oder keine Ansicht für die |_+_| . haben Route. Im nächsten Artikel beginnen wir mit der Erstellung der grundlegenden Ansichten für das CMS.

Fazit Teil 1

In diesem Tutorial haben wir gelernt, wie man eine neue Laravel-App auf unserem Computer installiert und alle erforderlichen Abhängigkeiten einbezieht. Wir haben auch gelernt, wie man die Laravel-App so konfiguriert, dass sie mit einer MySQL-Datenbank funktioniert. Wir haben auch unsere Modelle und Migrationsdateien erstellt und die Datenbank mit Datenbank-Seedern geseedet.

Im nächsten Teil dieser Serie beginnen wir mit dem Erstellen der Ansichten für die Anwendung.

Der Quellcode für dieses Projekt ist auf Github verfügbar.

Erstellen Sie ein CMS mit Laravel und Vue - Teil 2: Implementieren von Beiträgen

Im vorherigen Teil dieser Serie haben wir die Benutzerauthentifizierung und Rollenautorisierung eingerichtet, aber noch keine Ansichten für die Anwendung erstellt. In diesem Abschnitt erstellen wir die |_+_| Modell und beginnen Sie mit der Erstellung des Frontends für die Anwendung.

Unsere Anwendung ermöglicht unterschiedliche Zugänglichkeitsstufen für zwei Arten von Benutzern; der normale Benutzer und Administrator. In diesem Kapitel konzentrieren wir uns darauf, die Ansicht aufzubauen, die normale Benutzer sehen dürfen.

Bevor wir Ansichten erstellen, erstellen wir die |_+_| Modell, da es für das Rendern der Ansicht zwingend erforderlich ist.

Der Quellcode für dieses Projekt ist hier auf GitHub verfügbar.

Voraussetzungen

Um dieser Serie folgen zu können, sind einige Dinge erforderlich:

  • Grundkenntnisse in PHP.
  • Grundkenntnisse des Laravel-Frameworks.
  • Grundkenntnisse in JavaScript (ES6-Syntax).
  • Grundkenntnisse in Vue.
  • Postman auf Ihrem Computer installiert.

Einrichten des Post-Modells

Wir erstellen die |_+_| model mit einem zugeordneten Resource Controller und einer Migrationsdatei mit diesem Befehl:

database/migrations

Wir haben die |_+_| . hinzugefügt Flag, weil wir möchten, dass der Controller ein Ressourcencontroller ist. Die |_+_| -Flag generiert eine Migration für das Modell.

Navigieren wir in die |_+_| Ordner und aktualisieren Sie die |_+_| Klasse, die für uns generiert wurde:

CreateRolesTable

Wir haben ein |_+_| Eigenschaft, weil wir eine Beziehung zwischen den |_+_| und |_+_| Modelle. A |_+_| hat auch ein |_+_| Feld, in dem die Adresse des zugehörigen Bildes gespeichert wird.

Erstellen eines Datenbank-Seeders für die Post-Tabelle

Wir erstellen eine neue Seeder-Datei für die |_+_| Tabelle mit diesem Befehl:

increments('id'); $table->string('name'); $table->string('description'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('roles'); } }

Navigieren wir in die |_+_| Ordner und aktualisieren Sie die |_+_| Datei:

User

Wenn wir diesen Seeder ausführen, werden zwei neue Beiträge erstellt und beide dem Admin-Benutzer mit der ID 2 zugewiesen. Wir hängen beide Beiträge an den Admin-Benutzer an, da die normalen Benutzer nur Beiträge anzeigen und Kommentare abgeben dürfen; Sie können keinen Beitrag erstellen.

Öffnen wir die |_+_| und aktualisieren Sie es mit dem folgenden Code:

Role

Wir haben die |_+_| . erstellt und |_+_| Dateien im vorherigen Kapitel.

Wir verwenden diesen Befehl, um unsere Tabellen zu migrieren und die Datenbank zu starten:

User

Definieren der Beziehungen

So wie wir zuvor eine Viele-zu-Viele-Beziehung zwischen den |_+_| und |_+_| Modelle müssen wir eine andere Art von Beziehung zwischen den |_+_| und |_+_| Modelle.

Wir werden die Beziehung als eine Eins-zu-Viele-Beziehung definieren, da ein Benutzer viele Beiträge hat, ein Beitrag jedoch immer nur einem Benutzer gehört.

Öffne die |_+_| Modell und schließen Sie die folgende Methode ein:

// File: ./app/User.php public function roles() { return $this->belongsToMany(Role::class); }

Öffne die |_+_| Modell und schließen Sie die folgende Methode ein:

Role

Routen einrichten

An dieser Stelle unserer Bewerbung haben wir noch keine Titelseite mit allen aufgeführten Beiträgen. Lassen Sie uns erstellen, damit jeder alle erstellten Beiträge sehen kann. Abgesehen von der Startseite benötigen wir auch eine einzelne Beitragsseite, falls ein Benutzer einen bestimmten Beitrag lesen muss.

Lassen Sie uns zwei neue Routen zu unserem |_+_| . hinzufügen Datei:

  • Die erste Route gleicht Anfragen mit dem Stammverzeichnis unserer Anwendung ab und wird von |_+_| . bearbeitet Handlung:
// File: ./app/Role.php public function users() { return $this->belongsToMany(User::class); }

Im |_+_| Datei gibt es bereits eine Routendefinition für die |_+_| Adresse, müssen Sie sie durch die neue Routendefinition oben ersetzen.

  • Die zweite Route verarbeitet Anfragen für bestimmte |_+_| Gegenstände und werden vom |_+_| Handlung:
$ php artisan make:migration create_role_user_table

Mit diesen beiden neuen Routen haben die |_+_| Datei sollte so aussehen:

database/migrations

Einrichten des Postcontrollers

In diesem Abschnitt wollen wir die Handler-Aktionsmethoden definieren, die wir im |_+_| . registriert haben -Datei, damit unsere Anwendung weiß, wie die passenden Ansichten gerendert werden.

Zuerst fügen wir das |_+_| Methode:

CreateRoleUserTable

Hier möchten wir fünf erstellte Beiträge pro Seite abrufen und an die |_+_| . senden Aussicht. Wir werden diese Ansicht in Kürze erstellen.

Als nächstes fügen wir das |_+_| Methode zum Controller:

// File: ./database/migrations/*_create_role_user_table.php increments('id'); $table->integer('role_id')->unsigned(); $table->integer('user_id')->unsigned(); }); } public function down() { Schema::dropIfExists('role_user'); } }

In der obigen Methode haben wir eine Funktion von Laravel namens Route Model Binding verwendet, um den URL-Parameter einem |_+_| . zuzuordnen Instanz mit derselben ID. Wir senden ein |_+_| . zurück Ansicht, die wir in Kürze erstellen werden. Dies ist die Ansicht für die einzelne Beitragsseite.

Aufbau unserer Ansichten

Laravel verwendet für sein Frontend eine Templating-Engine namens Blade. Wir werden Blade verwenden, um diese Teile des Frontends zu erstellen, bevor wir im nächsten Kapitel zu Vue wechseln.

Navigieren Sie zum |_+_| Ordner und erstellen Sie zwei neue Blade-Dateien:

  1. users
  2. roles

Dies sind die Dateien, die die Ansichten für die Zielseite und die einzelne Beitragsseite laden. Bevor wir mit dem Schreiben von Code in diese Dateien beginnen, möchten wir eine einfache Layoutvorlage erstellen, die unsere Seitenaufrufe als Grundlage verwenden können.

Im |_+_| erstellen Sie eine Blade-Vorlagendatei und nennen Sie sie |_+_|. Hier definieren wir das vererbbare Template für unsere Single- und Landingpages.

Öffne die |_+_| Datei und aktualisieren Sie sie mit diesem Code:

$ php artisan make:seeder RoleTableSeeder $ php artisan make:seeder UserTableSeeder

Jetzt können wir diese Vorlage im |_+_| . erben Datei, öffnen Sie sie und aktualisieren Sie sie mit diesem Code:

database/seeds

Machen wir dasselbe mit dem |_+_| Datei, öffnen Sie sie und aktualisieren Sie sie mit diesem Code:

RoleTableSeeder.php

Testen der Anwendung

Wir können die Anwendung testen, um zu sehen, ob die Dinge so funktionieren, wie wir es erwarten. Wenn wir die Anwendung bereitstellen, erwarten wir, dass eine Zielseite und eine einzelne Beitragsseite angezeigt werden. Wir erwarten auch, dass wir zwei Posts sehen, da dies die Anzahl der Posts ist, die wir in die Datenbank übertragen haben.

Wir werden die Anwendung mit diesem Befehl bedienen:

// File: ./database/seeds/RoleTableSeeder.php name = 'user'; $role_regular_user->description = 'A regular user'; $role_regular_user->save(); $role_admin_user = new Role; $role_admin_user->name = 'admin'; $role_admin_user->description = 'An admin user'; $role_admin_user->save(); } }

Wir können diese Adresse besuchen, um die Anwendung zu sehen:

Erstellen Sie ein CMS mit Laravel und Vue

Wir haben hier einfache Platzhalterbilder verwendet, weil wir kein Admin-Dashboard erstellt haben, das die Ausführung von CRUD-Operationen für Beiträge ermöglicht.

In den kommenden Kapiteln werden wir die Möglichkeit für einen Administrator hinzufügen, beim Erstellen eines neuen Beitrags ein benutzerdefiniertes Bild einzufügen.

Fazit Teil 2

In diesem Kapitel haben wir die |_+_| Modell und definierte darauf eine Beziehung zum |_+_| Modell. Wir haben auch die Landing Page und die Single Page erstellt.

Im nächsten Teil dieser Serie werden wir die API entwickeln, die das Medium für die Kommunikation zwischen dem Admin-Benutzer und den Post-Items sein wird.

Der Quellcode für dieses Projekt ist hier auf Github verfügbar.

Erstellen Sie ein CMS mit Laravel und Vue - Teil 3: Erstellen einer API

Im vorherigen Teil dieser Serie haben wir die Beitragsressource initialisiert und mit dem Aufbau des Frontends des CMS begonnen. Wir haben die Titelseite, die alle Beiträge und die einzelne Beitragsseite anzeigt, mit Laravels Templating-Engine Blade entworfen.

In diesem Teil der Serie beginnen wir mit der Erstellung der API für die Anwendung. Wir werden eine API für CRUD-Operationen erstellen, die ein Administrator für Beiträge ausführt, und wir werden die Endpunkte mit Postman testen.

Der Quellcode für dieses Projekt ist hier auf GitHub verfügbar.

Voraussetzungen

Um dieser Serie folgen zu können, sind einige Dinge erforderlich:

  • Grundkenntnisse in PHP.
  • Grundkenntnisse des Laravel-Frameworks.
  • Grundkenntnisse in JavaScript (ES6-Syntax).
  • Grundkenntnisse in Vue.
  • Postman auf Ihrem Computer installiert.

Erstellen der API mit den API-Ressourcen von Laravel

Das Laravel-Framework macht es sehr einfach, APIs zu erstellen. Es verfügt über eine API-Ressourcenfunktion, die wir problemlos in unser Projekt übernehmen können. Sie können sich API-Ressourcen als Transformationsschicht zwischen Eloquent-Modellen und den JSON-Antworten vorstellen, die von unserer API zurückgesendet werden.

Massenzuweisung zu bestimmten Feldern zulassen

Da wir CRUD-Operationen für die Posts in der Anwendung ausführen werden, müssen wir explizit angeben, dass es für einige Felder zulässig ist, massenweise Daten zuzuweisen. Aus Sicherheitsgründen verhindert Laravel standardmäßig die Massenzuweisung von Daten zu Modellfeldern.

Öffne die |_+_| Datei und fügen Sie diese Codezeile ein:

UserTableSeeder.php

API-Routen definieren

Wir verwenden die |_+_|-Methode, um nur API-Routen zu generieren. Öffne die |_+_| Datei und fügen Sie den folgenden Code hinzu:

// File: ./database/seeds/UserTableSeeder.php name = 'Samuel Jackson'; $user->email = 'samueljackson@jackson.com'; $user->password = bcrypt('samuel1234'); $user->save(); $user->roles()->attach(Role::where('name', 'user')->first()); $admin = new User; $admin->name = 'Neo Ighodaro'; $admin->email = 'neo@creativitykills.co'; $admin->password = bcrypt('neo1234'); $admin->save(); $admin->roles()->attach(Role::where('name', 'admin')->first()); } }

Weil wir die API-Anfragen am |_+_| . bearbeiten werden URL mit |_+_|, müssen wir einige zusätzliche Aktionsmethoden in unseren Post-Controller aufnehmen.

Erstellen der Beitragsressource

Zu Beginn dieses Abschnitts haben wir bereits darüber gesprochen, was die API-Ressourcen von Laravel sind. Hier erstellen wir eine Ressourcenklasse für unsere |_+_| Modell. Dadurch können wir |_+_| . abrufen Daten und geben das formatierte JSON-Format zurück.

So erstellen Sie eine Ressourcenklasse für unsere |_+_| model führen Sie den folgenden Befehl in Ihrem Terminal aus:

DatabaseSeeder

Ein neues |_+_| Datei wird im |_+_| . verfügbar sein Verzeichnis unserer Anwendung. Öffne die |_+_| Datei und ersetzen Sie die |_+_| Methode mit folgendem:

run

Die Aufgabe dieses |_+_| Methode besteht darin, unsere |_+_| Ressource in ein Array. Wie oben gesehen, haben wir die Felder in unserem |_+_| . angegeben model, das wir als JSON zurückgeben möchten, wenn wir eine Anfrage nach Beiträgen stellen.

Wir gießen auch explizit die Daten, |_+_| und |_+_|, in Zeichenfolgen, damit sie als Datumszeichenfolgen zurückgegeben werden. Die Daten sind normalerweise eine Instanz von Carbon .

Nachdem wir nun eine Ressourcenklasse für unsere |_+_| . erstellt haben können wir mit dem Erstellen der Aktionsmethoden der API in unserem |_+_| und Instanzen von |_+_| . zurückgeben wo wir wollen.

Hinzufügen der Aktionsmethoden zum Post-Controller

Zu den üblichen Aktionen, die an einem Beitrag ausgeführt werden, gehören die folgenden:

  1. Erstellen - der Vorgang zum Erstellen eines neuen Beitrags.
  2. Lesen - der Vorgang des Lesens eines oder mehrerer Beiträge.
  3. Aktualisieren – der Vorgang zum Aktualisieren eines bereits veröffentlichten Beitrags.
  4. Löschen - der Vorgang zum Löschen eines Beitrags.

Im letzten Artikel haben wir bereits bei der Definition der |_+_| . eine Art ‚Read‘-Funktionalität implementiert und |_+_| Methoden. Diese Methoden ermöglichen es Benutzern, Beiträge auf der Homepage zu durchsuchen.

In diesem Abschnitt werden wir die Methoden definieren, die unsere API-Anfragen zum Erstellen, Lesen, Aktualisieren und Löschen von Beiträgen lösen.

Als erstes wollen wir die |_+_| . importieren Klasse an der Spitze der |_+_| Datei:

// File: ./database/seeds/DatabaseSeeder.php call([ RoleTableSeeder::class, UserTableSeeder::class, ]); } }

Weil wir die |_+_| . erstellt haben Als Ressourcencontroller haben wir bereits die Ressourcenaktionsmethoden für uns in der |_+_| Datei werden wir sie mit passenden Code-Schnipseln aktualisieren.

Erstellen der Handleraktion für den Erstellungsvorgang

Im |_+_| aktualisiere die |_+_| action-Methode mit dem folgenden Code-Snippet. Es ermöglicht uns, einen neuen Beitrag zu validieren und zu erstellen:

User

Diese Methode ermöglicht es uns, eine JSON-formatierte Sammlung aller gespeicherten Beiträge zurückzugeben. Wir möchten die Antwort auch paginieren, da wir so eine bessere Ansicht auf dem Admin-Dashboard erstellen können.

Gemäß den oben besprochenen RESTful-Konventionen ist ein |_+_| Anfrage an diese Adresse, http://127.0.0.1:800/api/posts/id , sollte vom |_+_| . gelöst werden Aktion Methode. Lassen Sie uns die Methode mit dem passenden Snippet aktualisieren:

checkRoles

Super, jetzt gibt diese Methode bei einer API-Abfrage eine einzelne Instanz einer Post-Ressource zurück.

Erstellen der Handleraktion für den Aktualisierungsvorgang

Als Nächstes aktualisieren wir die |_+_| Methode im |_+_| Klasse. Es ermöglicht uns, einen bestehenden Beitrag zu ändern:

User

Diese Methode erhält eine Anfrage und einen Beitrag |_+_| als Parameter verwenden wir die Routenmodellbindung, um die |_+_| in eine Instanz von |_+_|. Zuerst validieren wir die |_+_| Attribute, dann aktualisieren wir die Titel- und Textfelder des aufgelösten Beitrags.

Erstellen der Handleraktion für den Löschvorgang

Lass uns die |_+_| . aktualisieren Methode im |_+_| Klasse. Mit dieser Methode können wir einen vorhandenen Beitrag entfernen:

// File: ./app/User.php public function checkRoles($roles) { if ( ! is_array($roles)) { $roles = [$roles]; } if ( ! $this->hasAnyRole($roles)) { auth()->logout(); abort(404); } } public function hasAnyRole($roles): bool { return (bool) $this->roles()->whereIn('name', $roles)->first(); } public function hasRole($role): bool { return (bool) $this->roles()->where('name', $role)->first(); }

Bei dieser Methode lösen wir die |_+_| -Instanz, löschen Sie sie und geben Sie einen 204-Antwortcode zurück.

Unsere Methoden sind vollständig. Wir haben eine Methode, um unsere CRUD-Operationen abzuwickeln, aber wir haben das Frontend für das Admin-Dashboard nicht erstellt.

Am Ende des zweiten Artikels haben wir die |_+_| Aktionsmethode wie folgt:

RegisterController.php

Dadurch konnten wir normale Benutzer auf die Ansicht |_+_| und Admin-Benutzer auf die URL |_+_| umleiten. An dieser Stelle dieser Serie ein Besuch bei |_+_| wird fehlschlagen, weil wir es weder als Route mit einem Handler-Controller definiert noch eine Ansicht dafür erstellt haben.

Erstellen wir das |_+_| mit diesem Befehl:

Controllers/Auth

Wir werden die |_+_| . hinzufügen Weg zu unserem |_+_| Datei:

RegisterController

Beachten Sie, dass wir |_+_| . geschrieben haben hier, weil wir beabsichtigen, jede Seite des Admin-Dashboards mit dem Vue-Router zu bedienen. Wenn wir im nächsten Artikel mit dem Aufbau des Admin-Dashboards beginnen, überlassen wir Vue alle Routen der |_+_| Seiten.

Lass uns die |_+_| . aktualisieren Datei, um die Authentifizierungs-Middleware zu verwenden und ein |_+_| . einzufügen Aktionsmethode:

create

In die |_+_|action-Methode haben wir ein Snippet eingefügt, das sicherstellt, dass nur Admin-Benutzer das Admin-Dashboard besuchen und CRUD-Operationen für Beiträge ausführen können.

Wir werden in diesem Artikel nicht mit dem Aufbau des Admin-Dashboards beginnen, sondern testen, ob unsere API ordnungsgemäß funktioniert. Wir verwenden Postman, um Anfragen an die Anwendung zu stellen.

Testen der Anwendung

Lassen Sie uns testen, ob unsere API wie erwartet funktioniert. Wir werden die Anwendung zunächst mit diesem Befehl bedienen:

// File: ./app/Http/Controllers/Auth/RegisterController.php protected function create(array $data) { $user = User::create([ 'name' => $data['name'], 'email' => $data['email'], 'password' => bcrypt($data['password']), ]); $user->roles()->attach(AppRole::where('name', 'user')->first()); return $user; }

Wir können http://localhost:8000 besuchen, um unsere Anwendung zu sehen, und es sollten genau zwei Beiträge verfügbar sein; Dies sind die Posts, die wir während der Migration in die Datenbank eingefügt haben:

Erstellen Sie ein CMS mit Laravel und Vue

Stellen Sie beim Testen mit Postman immer die |_+_| Kopfzeile zu |_+_|.

Lassen Sie uns nun mit Postman einen neuen Beitrag über die API-Schnittstelle erstellen. Senden Sie ein |_+_| Anfrage wie unten gezeigt:

Jetzt aktualisieren wir diesen Beitrag, den wir gerade erstellt haben. In Postman passieren wir nur die |_+_| und |_+_| Felder zu einem |_+_| Anfrage.

Um es einfach zu machen, können Sie einfach die unten stehende Nutzlast kopieren und die roh Anfragedatentyp für die Körper :

$ php artisan migrate:fresh --seed

Wir hätten die PATCH-Methode verwenden können, um dieses Update durchzuführen, die HTTP-Verben PUT und PATCH funktionieren beide gut, um ein bereits vorhandenes Element zu bearbeiten.

Zum Schluss löschen wir den Beitrag mit Postman:

Relationale Google Cloud-Datenbank

Wir sind sicher, dass der Beitrag gelöscht wurde, da der Antwortstatus |_+_| . ist wie wir in |_+_| angegeben haben.

Abschluss

In diesem Kapitel haben wir die API-Ressourcen von Laravel kennengelernt und eine Ressourcenklasse für das Post-Modell erstellt. Wir haben auch die |_+_| . verwendet -Methode, um nur API-Routen für unsere Anwendung zu generieren. Wir haben die Methoden zur Abwicklung der API-Operationen geschrieben und mit Postman getestet.

Im nächsten Teil erstellen wir das Admin-Dashboard und entwickeln die Logik, die es dem Admin-Benutzer ermöglicht, Beiträge über die API zu verwalten.

Der Quellcode für dieses Projekt ist hier auf Github verfügbar.

Erstellen Sie ein CMS mit Laravel und Vue - Teil 4: Erstellen des Dashboards

Im letzten Artikel dieser Serie haben wir die API-Schnittstelle erstellt und Laravel-API-Ressourcen verwendet, um sauber formatierte JSON-Antworten zurückzugeben. Wir haben getestet, dass die API so funktioniert, wie wir sie für die Verwendung von Postman definiert haben.

In diesem Teil der Serie beginnen wir mit dem Aufbau des Admin-Frontends des CMS. Dies ist der erste Teil der Serie, in dem wir Vue integrieren und Vues magische Fähigkeiten erforschen.

Wenn wir mit diesem Teil fertig sind, wird unsere Anwendung einige zusätzliche Funktionen haben, wie unten gezeigt:

Erstellen Sie ein CMS mit Laravel und Vue

Der Quellcode für dieses Projekt ist hier auf GitHub verfügbar.

Voraussetzungen

Um dieser Serie folgen zu können, sind einige Dinge erforderlich:

  • Grundkenntnisse in PHP.
  • Grundkenntnisse des Laravel-Frameworks.
  • Grundkenntnisse in JavaScript (ES6-Syntax).
  • Grundkenntnisse in Vue.

Aufbau des Frontends

Laravel wird standardmäßig mit Vue ausgeliefert, sodass wir nicht die Vue-CLI verwenden oder Vue von einem CDN referenzieren müssen. Dies ermöglicht es uns, alle unsere Anwendungen, das Frontend und das Backend, in einer einzigen Codebasis zu haben.

Jede neu erstellte Instanz einer Laravel-Installation enthält standardmäßig einige Vue-Dateien, die wir sehen können, wenn wir in das |_+_| . navigieren Mappe.

Einrichten von Vue und VueRouter

Bevor wir Vue in unserer Anwendung verwenden können, müssen wir zunächst einige Abhängigkeiten mit NPM installieren. Führen Sie den folgenden Befehl aus, um die standardmäßig mit Laravel gelieferten Abhängigkeiten zu installieren:

HomeController.php

Wir werden alle Routen für das Admin-Dashboard mit |_+_| . verwalten also lass es uns einziehen:

HomeController

Wenn die Installation abgeschlossen ist, öffnen wir als nächstes das |_+_| Datei und ersetzen Sie ihren Inhalt durch den folgenden Code:

index

Im obigen Snippet haben wir die |_+_| . importiert und fügte es der Vue-Anwendung hinzu. Wir haben auch ein |_+_| . importiert und ein |_+_| Komponente. Dies sind die Komponenten, in die wir unser Markup schreiben werden, also erstellen wir beide Dateien.

Öffne die |_+_| Ordner und erstellen Sie vier Dateien:

  1. |_+_| - Dies ist die übergeordnete Komponente für das Admin-Dashboard-Frontend.
  2. |_+_| - Dies ist eine Komponente, die alle verfügbaren Beiträge im Admin-Dashboard anzeigt.
  3. |_+_| - Dies ist die Komponente, in der ein Admin-Benutzer einen neuen Beitrag erstellen kann.
  4. |_+_| - Dies ist die Komponente, die die Ansicht anzeigt, in der ein Admin-Benutzer einen vorhandenen Beitrag aktualisieren kann.

Beachten Sie, dass wir keine Komponentendatei für den Löschvorgang erstellt haben, da es möglich sein wird, einen Beitrag aus dem |_+_| . zu löschen Komponente. Eine Ansicht ist nicht erforderlich.

Im |_+_| Datei haben wir eine |_+_| Array und darin registrierten wir ein |_+_| Route. Während der Renderzeit wird der Pfad dieser Route dem |_+_| . zugeordnet Komponente.

Im vorherigen Artikel haben wir angegeben, dass Admin-Benutzern ein |_+_| . angezeigt werden soll Blick in die |_+_| Methode haben wir diese Ansicht jedoch nicht erstellt. Lassen Sie uns die Ansicht erstellen. Öffne die |_+_| Ordner und erstellen Sie einen neuen Ordner namens |_+_|. Im neuen |_+_| Ordner, erstellen Sie eine neue Datei mit dem Namen |_+_|. Dies wird der Einstiegspunkt zum Admin-Dashboard sein, weiter von dieser Route entfernt lassen wir die |_+_| alles andere handhaben.

Öffne die |_+_| Datei und fügen Sie den folgenden Code ein:

// File: ./app/Http/Controllers/HomeController.php public function index(Request $request) { $request->user()->checkRoles('admin'); return view('home'); }

Unser Ziel hier ist es, Vue in die Anwendung zu integrieren, daher haben wir die |_+_| Datei mit dieser Codezeile:

UserTableSeeder.php

Damit unsere App funktioniert, benötigen wir ein Root-Element, an das unsere Vue-Instanz gebunden wird. Vor dem |_+_| Tag, fügen Sie dieses Code-Snippet hinzu:

$ php artisan serve

Wir haben zuvor die |_+_| . definiert Komponente als Wrapping-Komponente, deshalb haben wir sie hier als Root-Komponente eingefügt. Damit einige der Frontend-Komponenten korrekt funktionieren, benötigen wir einige Details des angemeldeten Admin-Benutzers, um CRUD-Vorgänge durchzuführen. Aus diesem Grund haben wir die |_+_| . weitergegeben und |_+_| Requisiten zum |_+_| Komponente.

Wir müssen die |_+_| . verhindern Fehler in unserem Vue-Frontend auftreten, also fügen Sie dieses Code-Snippet direkt vor dem |_+_| . ein Schild:

HomeController

Dieses Snippet stellt sicher, dass immer der richtige Token in unserem Frontend enthalten ist, Laravel bietet die |_+_| Schutz für uns aus der Box.

An dieser Stelle sollte dies der Inhalt Ihres |_+_| . sein Datei:

HomeController.php

Einrichten der Startseitenansicht

Öffne die |_+_| Datei, die wir vor einiger Zeit erstellt haben, und fügen diese Markup-Vorlage hinzu:

index

Wir haben ein |_+_| . hinzugefügt in dieser Vorlage, die Routen zum |_+_| Komponente.

Wir passieren die |_+_| Daten zum |_+_| Komponente, weil ein |_+_| ist erforderlich während |_+_| Schaffung.

Lassen Sie uns einige Stile hinzufügen, damit die Seite gut aussieht. Unter dem Abschluss |_+_| Tag, fügen Sie den folgenden Code ein:

// File: ./app/Http/Controllers/HomeController.php public function index(Request $request) { if ($request->user()->hasRole('user')) { return redirect('/'); } if ($request->user()->hasRole('admin')){ return redirect('/admin/dashboard'); } }

Wir verwenden das Scoped-Attribut für |_+_| -Tag, weil wir möchten, dass das CSS nur auf |_+_| . angewendet wird Komponente.

Als nächstes fügen wir das |_+_| Abschnitt, der die Requisiten verwendet, die wir von der übergeordneten Komponente weitergegeben haben. Wir werden auch die Methode definieren, die die |_+_| . steuert Funktion hier. Unter dem Abschluss |_+_| Tag, fügen Sie den folgenden Code ein:

admin/dashboard

Einrichten der Leseansicht

Im |_+_| Datei haben wir den Pfad der |_+_| Komponente als |_+_|, was dieselbe Adresse wie |_+_| . ist Komponente. Dadurch wird sichergestellt, dass die |_+_| Komponente wird immer standardmäßig geladen.

Im |_+_| Komponente möchten wir alle verfügbaren Beiträge laden. Wir werden auch hinzufügen Aktualisieren und Löschen Optionen zu jedem Beitrag. Ein Klick auf diese Optionen führt zum |_+_| und |_+_| Ansichten bzw.

Öffne die |_+_| Datei und fügen Sie Folgendes ein:

Post

Oben haben wir die Vorlage, um die Beiträge zu verarbeiten, die von der API geladen werden. Fügen Sie als Nächstes Folgendes unter dem schließenden |_+_| . ein Schild:

Post

Im obigen Skript haben wir ein |_+_| . definiert -Methode, die eine Liste von Beiträgen vom Back-End-Server anfordert. Wir haben auch ein |_+_| . definiert Objekt als Dateneigenschaft. Dieses Objekt wird immer dann aufgefüllt, wenn Beiträge vom Backend-Server empfangen werden.

Wir haben |_+_| . definiert und |_+_| Datenzeichenfolgeneigenschaften, um Paginierungslinks zu speichern und die Paginierungsoptionen nur anzuzeigen, wenn sie verfügbar sind.

Zuletzt haben wir ein |_+_| . definiert Methode, die |_+_| . nimmt eines Posts als Parameter und sendet ein |_+_| Anfrage an die API-Schnittstelle mit Axios .

Testen der Anwendung

Nachdem wir die ersten Komponenten fertiggestellt haben, können wir die Anwendung mit diesem Befehl bereitstellen:

Post

Wir werden auch die Assets erstellen, damit unser JavaScript für uns kompiliert wird. Führen Sie dazu den folgenden Befehl im Stammverzeichnis des Projektordners aus:

$ php artisan make:model Post -mr

Wir können die URL der Anwendung http://localhost:8000 besuchen und uns als Admin-Benutzer anmelden und einen Beitrag löschen:

Erstellen Sie ein CMS mit Laravel und Vue

Abschluss

In diesem Teil der Serie haben wir mit dem Aufbau des Admin-Dashboards mit Vue begonnen. Wir haben |_+_| . installiert um das Admin-Dashboard zu einem SPA zu machen. Wir haben die Startseitenansicht des Admin-Dashboards hinzugefügt und Lese- und Löschfunktionen integriert.

Wir sind noch nicht fertig mit dem Dashboard. Im nächsten Teil werden wir die Ansichten hinzufügen, mit denen wir Beiträge erstellen und aktualisieren können.

Der Quellcode für dieses Projekt ist hier auf Github verfügbar.

Erstellen Sie ein CMS mit Laravel und Vue - Teil 5: Vervollständigung unserer Dashboards

Im vorherigen Teil dieser Serie haben wir die ersten Teile des Admin-Dashboards mit Vue erstellt. Mit dem |_+_| haben wir es auch in ein SPA geschafft, d.h. der Besuch der Seiten führt nicht zu einem erneuten Laden des Webbrowsers.

Wir haben nur die Wrapper-Komponente und die |_+_| . gebaut Komponente, die die zu ladenden Beiträge abruft, damit ein Administrator sie verwalten kann.

Hier ist eine Aufzeichnung dessen, was wir im letzten Artikel erreicht haben:

Erstellen Sie ein CMS mit Laravel und Vue

roku-com-link aktivieren

In diesem Artikel erstellen wir die Ansicht, mit der Benutzer Beiträge erstellen und aktualisieren können. Wir beginnen mit dem Schreiben von Code im |_+_| und |_+_| Dateien, die wir im vorherigen Artikel erstellt haben.

Wenn wir mit diesem Teil fertig sind, haben wir zusätzliche Funktionen wie Erstellen und Aktualisieren:

Erstellen Sie ein CMS mit Laravel und Vue

Der Quellcode für dieses Projekt ist hier auf Github verfügbar.

Voraussetzungen

Um dieser Serie folgen zu können, sind einige Dinge erforderlich:

  • Grundkenntnisse in PHP.
  • Grundkenntnisse des Laravel-Frameworks.
  • Grundkenntnisse in JavaScript (ES6-Syntax).
  • Grundkenntnisse in Vue.

Einschließlich der neuen Routen in VueRouter

Im vorherigen Artikel haben wir nur die Route für die |_+_| . definiert Komponente müssen wir die Routenkonfiguration für die neuen Komponenten einschließen, die wir erstellen möchten. |_+_| und |_+_|.

Öffne die |_+_| Datei und ersetzen Sie den Inhalt durch den folgenden Code:

r

Oben haben wir der JavaScript-Datei zwei neue Komponenten hinzugefügt. Wir haben die |_+_| und |_+_| Komponenten. Wir haben sie auch dem |_+_| . hinzugefügt damit sie mit den angegebenen URLs geladen werden können.

Erstellen der Erstellungsansicht

Öffne die |_+_| Datei und aktualisieren Sie sie mit dieser Markup-Vorlage:

m

Oben haben wir die Vorlage für die |_+_| Komponente. Wenn bei der Erstellung des Beitrags ein Fehler auftritt, wird ein Feld angezeigt, das den spezifischen Fehler anzeigt. Wenn ein Beitrag erfolgreich veröffentlicht wurde, wird auch eine Meldung angezeigt, dass er erfolgreich war.

Nehmen wir die |_+_| Logik, die das Senden von Posts an unseren Backend-Server durchführt und die Antwort zurückliest.

Nach der Schließung |_+_| tag füge dies hinzu:

database/migrations

Im obigen Skript haben wir ein |_+_| . definiert Methode, die die Werte der |_+_| Felder und verwendet die Axios-Bibliothek, um sie an die API-Schnittstelle auf dem Backend-Server zu senden. Innerhalb dieser Methode aktualisieren wir auch den Status des Vorgangs, damit ein Admin-Benutzer weiß, wann ein Beitrag erfolgreich erstellt wurde oder nicht.

Erstellen der Update-Ansicht

Beginnen wir mit dem Bau der |_+_| Komponente. Öffne die |_+_| Datei und aktualisieren Sie sie mit dieser Markup-Vorlage:

CreatePostsTable

Diese Vorlage ähnelt der im |_+_| Komponente. Fügen wir die |_+_| . hinzu für das Bauteil.

Unter dem Abschluss |_+_| Tag, fügen Sie Folgendes ein:

// File: ./app/database/migrations/*_create_posts_table.php increments('id'); $table->integer('user_id')->unsigned(); $table->string('title'); $table->text('body'); $table->binary('image')->nullable(); $table->timestamps(); }); } public function down() { Schema::dropIfExists('posts'); } }

Im obigen Skript rufen wir die |_+_| -Methode, sobald die Komponente |_+_| ist. Die |_+_| -Methode holt die Daten eines einzelnen Posts vom Backend-Server mit der |_+_|.

Wenn Axios die Daten für die Post zurücksendet, aktualisieren wir die Eingabefelder in dieser Komponente, damit sie aktualisiert werden können.

Schließlich die |_+_| -Methode nimmt die Werte der Felder in den Komponenten und versucht, sie zur Aktualisierung an den Back-End-Server zu senden. In einer Situation, in der das fehlschlägt, erhalten wir sofortiges Feedback.

Testen der Anwendung

Um zu testen, ob unsere Änderungen funktionieren, möchten wir die Datenbank aktualisieren und in einen neuen Zustand zurückversetzen. Führen Sie dazu den folgenden Befehl in Ihrem Terminal aus:

user_id

Als Nächstes kompilieren wir unsere JavaScript-Dateien und -Assets. Dadurch wird sichergestellt, dass alle Änderungen, die wir an der Vue-Komponente und dem |_+_| . vorgenommen haben, Datei wird gebaut. Führen Sie zum Neukompilieren den folgenden Befehl in Ihrem Terminal aus:

User

Schließlich müssen wir den Antrag zustellen. Führen Sie dazu den folgenden Befehl in Ihrem Terminalfenster aus:

Post

Wenn der Befehl 'Serve' zuvor ausgeführt wurde, müssen Sie ihn möglicherweise neu starten.

Wir besuchen http://localhost:8000 der Anwendung und melden uns als Admin-Benutzer an. Über das Dashboard können Sie die Erstellungs- und Aktualisierungsfunktion testen:

Erstellen Sie ein CMS mit Laravel und Vue

Abschluss

In diesem Teil der Serie haben wir das Dashboard aktualisiert, um die |_+_| und |_+_| Komponente, damit der Administrator Beiträge hinzufügen und aktualisieren kann.

Im nächsten Artikel werden wir die Ansichten erstellen, die das Erstellen und Aktualisieren eines Beitrags ermöglichen.

Der Quellcode für dieses Projekt ist hier auf Github verfügbar.

Erstellen Sie ein CMS mit Laravel und Vue - Teil 6: Hinzufügen von Echtzeitkommentaren

Im vorherigen Teil dieser Serie haben wir das Backend der Anwendung mit Vue fertiggestellt. Wir konnten die Erstellungs- und Aktualisierungskomponente hinzufügen, die zum Erstellen eines neuen Beitrags und zum Aktualisieren eines bestehenden Beitrags verwendet wird.

Hier ist eine Bildschirmaufnahme von dem, was wir erreichen konnten:

Erstellen Sie ein CMS mit Laravel und Vue

In diesem letzten Teil der Serie werden wir Unterstützung für Kommentare hinzufügen. Wir stellen auch sicher, dass die Kommentare zu jedem Beitrag in Echtzeit aktualisiert werden, sodass ein Benutzer die Seite nicht aktualisieren muss, um neue Kommentare zu sehen.

Wenn wir fertig sind, wird unsere Anwendung neue Funktionen haben und wie folgt funktionieren:

Erstellen Sie ein CMS mit Laravel und Vue

Der Quellcode für dieses Projekt ist hier auf Github verfügbar.

Voraussetzungen

Um dieser Serie folgen zu können, sind einige Dinge erforderlich:

  • Ein Pusher-Konto. Hier anmelden .
  • Grundkenntnisse in PHP.
  • Grundkenntnisse des Laravel-Frameworks.
  • Grundkenntnisse in JavaScript (ES6-Syntax).
  • Grundkenntnisse in Vue.

Kommentare zum Backend hinzufügen

Als wir die API erstellt haben, haben wir die Unterstützung für Kommentare zur Beitragsressource nicht hinzugefügt, daher müssen wir dies jetzt tun. Öffnen Sie das API-Projekt in Ihrem Texteditor, da wir das Projekt ein wenig ändern werden.

Als erstes möchten wir ein Modell, einen Controller und eine Migration für die Kommentarressource erstellen. Öffnen Sie dazu Ihr Terminal und |_+_| in das Projektverzeichnis und führen Sie den folgenden Befehl aus:

Post

Der obige Befehl erstellt ein Modell namens |_+_|, einen Controller namens |_+_| und eine Migrationsdatei im |_+_| Verzeichnis.

Aktualisieren der Kommentar-Migrationsdatei

Um die Migration der Kommentare zu aktualisieren, navigieren Sie zu |_+_| Ordner und suchen Sie die neu erstellte Migrationsdatei für die |_+_| Modell. Lass uns die |_+_| . aktualisieren Methode in der Datei:

image

Wir haben |_+_| . aufgenommen und |_+_| Felder, da wir beabsichtigen, eine Verknüpfung zwischen den Kommentaren, Benutzern und Beiträgen herzustellen. Die |_+_| Feld enthält den eigentlichen Kommentar.

Definieren der Beziehungen zwischen den Kommentar-, Benutzer- und Beitragsmodellen

In dieser Anwendung gehört ein Kommentar zu einem Benutzer und einem Beitrag, da ein Benutzer einen Kommentar zu einem bestimmten Beitrag abgeben kann. Daher müssen wir die Beziehung definieren, die alles verbindet.

Öffne die |_+_| Modell und schließen Sie diese Methode ein:

posts

Dies ist eine Beziehung, die einfach besagt, dass ein Benutzer viele Kommentare haben kann. Jetzt definieren wir dieselbe Beziehung auf dem |_+_| Modell. Öffne die |_+_| Datei und fügen Sie diese Methode ein:

$ php artisan make:seeder PostTableSeeder

Schließlich werden wir zwei Methoden in die |_+_| Modell, um die zweite Hälfte der Beziehungen zu vervollständigen, die wir im |_+_| . definiert haben und |_+_| Modelle.

Öffne die |_+_| Datei und schließen Sie diese Methoden ein:

database/seeds

Da wir bei der Kommentarerstellung Daten bestimmten Feldern einer Kommentarinstanz massenweise zuweisen möchten, werden wir dieses Array der zulässigen Zuweisungen in die |_+_| . aufnehmen Datei:

PostTableSeeder.php

Wir können jetzt unsere Datenbankmigration für unsere Kommentare ausführen:

// File: ./app/database/seeds/PostsTableSeeder.php user_id = 2; $post->title = 'Using Laravel Seeders'; $post->body = 'Laravel includes a simple method of seeding your database with test data using seed classes. All seed classes are stored in the database/seeds directory. Seed classes may have any name you wish, but probably should follow some sensible convention, such as UsersTableSeeder, etc. By default, a DatabaseSeeder class is defined for you. From this class, you may use the call method to run other seed classes, allowing you to control the seeding order.'; $post->save(); $post = new Post; $post->user_id = 2; $post->title = 'Database: Migrations'; $post->body = 'Migrations are like version control for your database, allowing your team to easily modify and share the application's database schema. Migrations are typically paired with Laravel's schema builder to easily build your application's database schema. If you have ever had to tell a teammate to manually add a column to their local database schema, you've faced the problem that database migrations solve.'; $post->save(); } }

Konfigurieren von Laravel zum Senden von Ereignissen mit Pusher

Wir haben bereits gesagt, dass die Kommentare eine Echtzeitfunktion haben werden und wir werden dies mit Pusher erstellen, daher müssen wir Laravels Event-Broadcasting-Funktion aktivieren.

Öffne die |_+_| Datei und entkommentieren Sie die folgende Zeile im |_+_| Array:

DatabaseSeeder

Als nächstes müssen wir den Broadcast-Treiber im |_+_| . konfigurieren Datei:

// File: ./app/database/seeds/DatabaseSeeder.php call([ RoleTableSeeder::class, UserTableSeeder::class, PostTableSeeder::class, ]); } }

Laden wir das Pusher PHP SDK mit Composer ein:

RoleTableSeeder

Pusher konfigurieren

Damit wir Pusher in dieser Anwendung verwenden können, ist es eine Voraussetzung, dass Sie über ein Pusher-Konto verfügen. Sie können hier ein kostenloses Pusher-Konto erstellen, sich dann bei Ihrem Dashboard anmelden und eine App erstellen.

Sobald Sie eine App erstellt haben, verwenden wir die App-Details, um Pusher im |_+_| . zu konfigurieren Datei:

UserTableSeeder

Aktualisieren Sie die Pusher-Schlüssel mit den App-Anmeldeinformationen, die Sie unter dem Schlüssel Abschnitt über die Überblick Registerkarte auf dem Pusher-Dashboard.

Übertragung eines Ereignisses, wenn ein neuer Kommentar gesendet wird

Damit die Kommentaraktualisierung in Echtzeit erfolgt, müssen wir ein Ereignis basierend auf der Kommentarerstellungsaktivität übertragen. Wir erstellen ein neues Ereignis und nennen es |_+_|. Es soll gefeuert werden, wenn ein neuer Kommentar erfolgreich erstellt wurde.

Führen Sie den Befehl in Ihrem Terminal aus:

$ php artisan migrate:fresh --seed

Es wird eine neu erstellte Datei im |_+_| Verzeichnis, öffnen Sie das |_+_| Datei und stellen Sie sicher, dass die |_+_| Schnittstelle.

Öffnen Sie die Datei und ersetzen Sie sie durch den folgenden Code:

User

Im obigen Code haben wir zwei öffentliche Eigenschaften erstellt, |_+_| und |_+_|, um die Daten zu speichern, die an den Kanal weitergegeben werden, auf dem wir senden. Wir haben auch einen privaten Kanal namens |_+_| erstellt. Wir verwenden einen privaten Kanal, damit nur authentifizierte Kunden den Kanal abonnieren können.

Definieren der Routen für die Handhabung von Operationen auf einem Kommentar

Wir haben zuvor einen Controller für das Kommentarmodell erstellt, aber wir haben die Webrouten nicht definiert, die Anfragen an diesen Controller weiterleiten.

Öffne die |_+_| Datei und fügen Sie den folgenden Code ein:

Role

Einrichten der Aktionsmethoden im CommentController

Wir müssen zwei Methoden in die |_+_| . aufnehmen -Datei sind diese Methoden für das Speichern und Abrufen von Methoden verantwortlich. Im |_+_| Methode senden wir auch ein Ereignis, wenn ein neuer Kommentar erstellt wird.

Öffne die |_+_| Datei und ersetzen Sie ihren Inhalt durch den folgenden Code:

Post

Im |_+_| Methode oben, validieren wir und erstellen dann einen neuen Beitragskommentar. Nachdem der Kommentar erstellt wurde, senden wir die |_+_| Ereignis an andere Kunden, damit diese ihre Kommentarliste in Echtzeit aktualisieren können.

Im |_+_| -Methode geben wir nur die zu einem Beitrag gehörenden Kommentare zusammen mit dem Benutzer zurück, der den Kommentar abgegeben hat.

Hinzufügen einer Authentifizierungsebene

Fügen wir eine Authentifizierungsebene hinzu, die sicherstellt, dass nur authentifizierte Benutzer die privaten |_+_| . abhören können Kanal, den wir erstellt haben.

Fügen Sie den folgenden Code zu |_+_| . hinzu Datei:

User

Hinzufügen von Kommentaren zum Frontend

Im zweiten Artikel dieser Serie haben wir die Ansicht für die Single-Post-Landingpage im |_+_| . erstellt Datei, aber wir haben die Kommentarfunktion nicht hinzugefügt. Wir werden es jetzt hinzufügen. Wir werden Vue verwenden, um die Kommentare für diese Anwendung zu erstellen. Daher werden wir als erstes Vue in das Frontend unserer Anwendung aufnehmen.

Öffnen Sie die Master-Layout-Vorlage und fügen Sie Vue in sein |_+_| . ein Schild. Kurz vor dem |_+_| Tag erscheint im |_+_| Datei, fügen Sie dieses Snippet ein:

User

Die |_+_| ist da, damit Benutzer keine Anfragen in unserer Anwendung fälschen können. Alle unsere Anfragen werden zufällig generierte |_+_| . auswählen und verwenden Sie diese, um Anfragen zu stellen.

Als nächstes möchten wir die |_+_| . aktualisieren Datei, damit sie eine Vorlage für die Kommentaransicht enthält.

Öffnen Sie die Datei und ersetzen Sie ihren Inhalt durch den folgenden Code:

// File: ./app/User.php public function posts() { return $this->hasMany(Post::class); }

Oben haben wir die |_+_| . importiert Komponente und dann haben wir sie der Liste der Komponenten in der Vue-Instanz der Anwendungen hinzugefügt.

Erstellen Sie nun ein |_+_| Datei im |_+_| Verzeichnis. Hier wird der gesamte Code für unsere Kommentaransicht abgelegt. Wir werden diese Datei später füllen.

Pusher und Laravel Echo installieren

Damit wir Pusher verwenden und Ereignisse im Frontend abonnieren können, müssen wir sowohl Pusher als auch Laravel Echo einbinden. Wir werden dies tun, indem wir diesen Befehl ausführen:

Post

Laravel Echo ist eine JavaScript-Bibliothek, die es einfach macht, Kanäle zu abonnieren und von Laravel gesendete Ereignisse zu hören.

Lassen Sie uns nun Laravel Echo so konfigurieren, dass es in unserer Anwendung funktioniert. Im |_+_| Datei, suchen und entkommentieren Sie dieses Code-Snippet:

// File: ./app/Post.php public function user() { return $this->belongsTo(User::class); }

Die |_+_| und |_+_| zieht die Schlüssel aus deinem |_+_| Datei, sodass Sie sie nicht erneut manuell eingeben müssen.

Jetzt importieren wir die |_+_| Komponente in die |_+_| Datei und übergeben Sie die erforderlichen Requisiten.

Öffne die |_+_| Datei und ersetzen Sie ihren Inhalt durch den folgenden Code:

routes/web.php

Erstellen der Kommentaransicht

Öffne die |_+_| Datei und fügen Sie die folgende Markup-Vorlage unten hinzu:

PostController@all

Jetzt fügen wir ein Skript hinzu, das zwei Methoden definiert:

  1. |_+_| - Dadurch werden alle vorhandenen Kommentare beim Erstellen der Komponente abgerufen.
  2. |_+_| - Dadurch wird ein neuer Kommentar hinzugefügt, indem der Backend-Server aufgerufen wird. Es wird auch ein neues Ereignis auslösen, das gesendet wird, damit alle Clients sie in Echtzeit erhalten.

Fügen Sie in derselben Datei Folgendes unter dem schließenden |_+_| . hinzu Schild:

Route::get('/', 'PostController@all');

Im |_+_| Methode oben haben wir zuerst die |_+_| -Methode erstellten wir einen Listener für die private |_+_| Kanal mit Laravel Echo. Sobald dieser Listener ausgelöst wird, wird die |_+_| Eigenschaft wird aktualisiert.

Testen der Anwendung

Lassen Sie uns nun die Anwendung testen, um zu sehen, ob sie wie beabsichtigt funktioniert. Bevor wir die Anwendung ausführen, müssen wir unsere Datenbank aktualisieren, um alle Änderungen rückgängig zu machen. Führen Sie dazu den folgenden Befehl in Ihrem Terminal aus:

routes/web.php

Als Nächstes erstellen wir die Anwendung so, dass alle Änderungen kompiliert und als Teil der JavaScript-Datei eingefügt werden. Führen Sie dazu den folgenden Befehl auf Ihrem Terminal aus:

/

Schließlich bedienen wir die Anwendung mit diesem Befehl:

Post

Um zu testen, ob unsere Anwendung funktioniert, besuchen Sie die Anwendungs-URL http://localhost:8000 in zwei separaten Browserfenstern. Wir melden uns in jedem der Fenster als anderer Benutzer bei unserer Anwendung an.

Wir werden schließlich in jedem der Browserfenster einen Kommentar zu demselben Beitrag abgeben und überprüfen, ob er im anderen Fenster in Echtzeit aktualisiert wird:

Erstellen Sie ein CMS mit Laravel und Vue

Abschluss

In diesem letzten Tutorial dieser Serie haben wir die Kommentarfunktion des CMS erstellt und auch in Echtzeit erstellt. Die Echtzeitfunktionalität konnten wir mit Pusher realisieren.

In dieser gesamten Serie haben wir gelernt, wie man mit Laravel und Vue ein CMS erstellt.

Der Quellcode für diese Artikelserie ist hier auf Github verfügbar.

Ursprünglich veröffentlicht von Neo Ighodaro unter https://pusher.com

#vue-js #laravel #php #javascript #web-entwicklung





Beliebte Beiträge

Interessante Artikel

Tipp Der Redaktion