One place for hosting & domains

      einer

      Sidekiq und Redis einer Ruby-on-Rails-Anwendung hinzufügen


      Einführung

      Bei der Entwicklung einer Ruby-on-Rails-Anwendung stellen Sie möglicherweise fest, dass Sie Anwendungsaufgaben haben, die asynchron ausgeführt werden sollten. Die Verarbeitung von Daten, das Versenden von Batch-E-Mails oder die Interaktion mit externen APIs sind Beispiele für Arbeiten, die asynchron mit Hintergrundjobs durchgeführt werden können. Die Verwendung von Hintergrundjobs kann die Leistung Ihrer Anwendung verbessern, indem möglicherweise zeitintensive Aufgaben in eine Hintergrundverarbeitungs-Warteschlange ausgelagert werden, wodurch der ursprüngliche Anfrage-/Antwort-Zyklus entlastet wird.

      Sidekiq ist eines der am häufigsten verwendeten Hintergrundjob-Frameworks, das Sie in einer Rails-Anwendung implementieren können. Es wird von Redis unterstützt, einem In-Memory-Schlüsselwertspeicher, der für seine Flexibilität und Leistung bekannt ist. Sidekiq verwendet Redis als Aufgabenmanagementspeicher, um pro Sekunde Tausende von Aufgaben zu verarbeiten.

      In diesem Tutorial fügen Sie Redis und Sidekiq zu einer bestehenden Rails-Anwendung hinzu. Sie werden einen Satz von Sidekiq Worker-Klassen und -Verfahren erstellen, um Folgendes zu bewältigen:

      • Einen Batch-Upload von Informationen über bedrohte Haie in die Anwendungsdatenbank aus einer CSV-Datei im Projekt-Repository.
      • Die Entfernung dieser Daten.

      Wenn Sie fertig sind, haben Sie eine Demo-Anwendung, die Workers und Jobs verwendet, um Aufgaben asynchron zu verarbeiten. Dieses Tutorial ist ein guter Startpunkt, damit Sie später Worker und Jobs zu Ihrer eigenen Anwendung hinzufügen können.

      Voraussetzungen

      Um dieser Anleitung zu folgen, benötigen Sie:

      Schritt 1 – Klonen des Projekts und Installieren von Abhängigkeiten

      Unser erster Schritt besteht darin, das Repository rails-bootstrap aus dem DigitalOcean Community GitHub-Konto zu klonen. Dieses Repository enthält den Code aus dem Setup, das in „Hinzufügen von Sidekiq und Redis zu einer Ruby-on-Rails-Anwendung“ beschrieben wird. Dort wird erklärt, wie Bootstrap zu einem bestehenden Rails 5-Projekt hinzugefügt wird.

      Klonen Sie das Repository in ein Verzeichnis namens rails-sidekiq:

      • git clone https://github.com/do-community/rails-bootstrap.git rails-sidekiq

      Navigieren Sie zum Verzeichnis rails-sidekiq:

      Um mit dem Code arbeiten zu können, müssen Sie zunächst die Abhängigkeiten des Projekts installieren, die in seiner Gemfile aufgelistet sind. Um mit Sidekiq und Redis arbeiten zu können, müssen Sie dem Projekt auch das Gem sidekiq hinzufügen.

      Öffnen Sie das Gemfile des Projekts zur Bearbeitung mit nano oder Ihrem bevorzugten Editor:

      Fügen Sie das Gem an beliebiger Stelle in die Abhängigkeiten des Hauptprojekts ein (oberhalb der Entwicklungsabhängigkeiten):

      ~/rails-sidekiq/Gemfile

      . . .
      # Reduces boot times through caching; required in config/boot.rb
      gem 'bootsnap', '>= 1.1.0', require: false
      gem 'sidekiq', '~>6.0.0'
      
      group :development, :test do
      . . .
      

      Speichern und schließen Sie die Datei, wenn Sie mit dem Hinzufügen des Gems fertig sind.

      Verwenden Sie den folgenden Befehl, um die Gems zu installieren:

      Sie werden in der Ausgabe sehen, dass das Gem redis auch als Erfordernis für sidekiq installiert ist.

      Als Nächstes installieren Sie Ihre Yarn-Abhängigkeiten. Da dieses Rails 5-Projekt modifiziert wurde, um Assets mit webpack bereitzustellen, werden seine JavaScript-Abhängigkeiten nun von Yarn verwaltet. Das bedeutet es ist notwendig, die in der Datei package.json des Projekts aufgeführten Abhängigkeiten zu installieren und zu verifizieren.

      Führen Sie yarn install aus, um diese Abhängigkeiten zu installieren:

      Führen Sie als Nächstes Ihre Datenbankmigration durch:

      Sobald Ihre Migrationen abgeschlossen sind, können Sie die Anwendung testen, um sicherzustellen, dass sie wie erwartet funktioniert. Starten Sie Ihren Server im Kontext Ihres lokalen Bundles mit dem folgenden Befehl, wenn Sie lokal arbeiten:

      Wenn Sie auf einem Entwicklungsserver arbeiten, können Sie die Anwendung starten mit:

      • bundle exec rails s --binding=your_server_ip

      Navigieren Sie zu localhost:3000 oder http://your_server_ip:3000. Sie sehen die folgende Startseite:

      Anwendungs-Startseite

      Um einen neuen Hai zu erstellen, klicken Sie auf die Schaltfläche Get Shark Info, die Sie zu der Route sharks/index führt:

      Sharks Index-Route

      Um zu verifizieren, dass die Anwendung funktioniert, können wir ihr einige Demo-Informationen anhängen. Klicken Sie auf New Shark. Dank der Authentifizierungseinstellungen des Projekts werden Sie zur Eingabe des Benutzernamens (sammy) und Passworts (shark) aufgefordert.

      Geben Sie auf der Seite New Shark unter Name „Great White“ und unter Facts „Scary“ ein:

      Hai erstellen

      Klicken Sie auf die Schaltfläche Create Shark, um den Shark zu erstellen. Sobald Sie sehen, dass Ihr Hai erstellt wurde, können Sie den Server mit STRG+C beenden.

      Sie haben nun die notwendigen Abhängigkeiten für Ihr Projekt installiert und seine Funktionalität getestet. Als Nächstes können Sie einige Änderungen der Rails-Anwendung vornehmen, um mit Ihren Ressourcen für bedrohte Haie zu arbeiten.

      Schritt 2 — Generieren eines Controllers für Ressourcen für bedrohte Haie

      Um mit unseren Ressourcen für bedrohte Haie zu arbeiten, fügen wir der Anwendung ein neues Modell und einen Controller hinzu, der steuert, wie den Benutzern Informationen über bedrohte Haie präsentiert werden. Unser ultimatives Ziel ist, den Benutzern das Hochladen einer großen Menge von Informationen über bedrohte Haie zu ermöglichen, ohne die Gesamtfunktionalität unserer Anwendung zu blockieren, und diese Informationen zu löschen, wenn sie sie nicht mehr benötigen.

      Erstellen wir zunächst ein Modell Endangered für unsere bedrohten Haie. Wir werden ein Zeichenfolgenfeld für den Hainamen in unsere Datenbanktabelle aufnehmen und ein weiteres Zeichenfolgenfeld für die Kategorien der International Union for the Conservation of Nature (IUCN), die den Grad der Gefährdung der einzelnen Haie bestimmen.

      Letztendlich entspricht unsere Modellstruktur den Spalten in der CSV-Datei, die wir zur Erstellung unseres Batch-Uploads verwenden werden. Diese Datei befindet sich im Verzeichnis db und Sie können ihren Inhalt mit dem folgenden Befehl überprüfen:

      Die Datei enthält eine Liste von 73 bedrohten Haien und ihren IUCN-Status – vu für gefährdet, en für bedroht und cr für vom Aussterben bedroht.

      Unser Modell Endangered wird mit diesen Daten übereinstimmen, sodass wir neue Instanzen Endangered aus dieser CSV-Datei erstellen können. Erstellen Sie das Modell mit dem folgenden Befehl:

      • rails generate model Endangered name:string iucn:string

      Erstellen Sie als Nächstes einen Controller Endangered mit einer Aktion index:

      • rails generate controller endangered index

      Dadurch erhalten wir einen Ausgangspunkt, um die Funktionalität unserer Anwendung auszubauen, obwohl wir auch benutzerdefinierte Methoden zu der Controller-Datei hinzufügen müssen, die Rails für uns generiert hat.

      Öffnen Sie nun diese Datei:

      • nano app/controllers/endangered_controller.rb

      Rails hat uns ein Grundgerüst zur Verfügung gestellt, das wir nun ausfüllen können.

      Zunächst müssen wir bestimmen, welche Routen wir für die Arbeit mit unseren Daten benötigen. Dank dem Befehl generate controller haben wir eine Methode index, mit der wir beginnen können. Diese wird mit einer Ansicht index korrelieren, in der wir den Benutzern die Möglichkeit bieten werden, bedrohte Haie hochzuladen.

      Wir werden aber auch Fälle bearbeiten wollen, in denen Benutzer die Haie möglicherweise bereits hochgeladen haben. In diesem Fall benötigen sie keine Upload-Option. Wir werden irgendwie beurteilen müssen, wie viele Instanzen der Klasse Endangered bereits existieren, da mehr als eine darauf hinweist, dass der Batch-Upload bereits stattgefunden hat.

      Beginnen wir mit der Erstellung einer Methode private set_endangered, die jede Instanz unserer Klasse Endangered aus der Datenbank abrufen wird. Fügen Sie den folgenden Code zur Datei hinzu:

      ~/rails-sidekiq/app/controllers/endangered_controller.rb

      class EndangeredController < ApplicationController
        before_action :set_endangered, only: [:index, :data]
      
        def index
        end
      
        private
      
          def set_endangered
            @endangered = Endangered.all
          end
      
      end
      

      Beachten Sie, dass der Filter before_action sicherstellt, dass der Wert von @endangered nur für die Routen index und data festgelegt ist. Dort verarbeiten wir die Daten über bedrohte Haie.

      Fügen Sie als Nächstes den folgenden Code zu der Methode index hinzu, um den richtigen Pfad für Benutzer zu bestimmen, die diesen Teil der Anwendung besuchen:

      ~/rails-sidekiq/app/controllers/endangered_controller.rb

      class EndangeredController < ApplicationController
        before_action :set_endangered, only: [:index, :data]
      
        def index          
          if @endangered.length > 0
            redirect_to endangered_data_path
          else
            render 'index'
          end
        end
      . . .
      

      Wenn mehr als 0 Instanzen unserer Klasse Endangered vorhanden sind, leiten wird die Benutzer auf die Route data um, wo sie Informationen über die von ihnen erstellten Haie einsehen können. Andernfalls sehen sie die Ansicht index.

      Fügen Sie als Nächstes unter die Methode index eine Methode data hinzu, die mit der Ansicht data korreliert:

      ~/rails-sidekiq/app/controllers/endangered_controller.rb

      . . .
        def index          
          if @endangered.length > 0
            redirect_to endangered_data_path
          else
            render 'index'
          end
        end
      
        def data
        end
      . . .
      

      Als Nächstes fügen wir eine Methode hinzu, um den Daten-Upload selbst zu verarbeiten. Wir nennen diese Methode upload und sie wird eine Sidekiq Worker-Klasse und -methode aufrufen, um den Daten-Upload aus der CSV-Datei durchzuführen. Im nächsten Schritt erstellen wir die Definition für diese Worker-Klasse, AddEndangeredWorker.

      Für den Moment fügen Sie den folgenden Code zu der Datei hinzu, um den Sidekiq Worker aufzurufen, der den Upload ausführt:

      ~/rails-sidekiq/app/controllers/endangered_controller.rb

      . . .
        def data
        end
      
        def upload
          csv_file = File.join Rails.root, 'db', 'sharks.csv'   
          AddEndangeredWorker.perform_async(csv_file)
          redirect_to endangered_data_path, notice: 'Endangered sharks have been uploaded!'
        end
      . . .
      

      Durch den Aufruf der Methode perform_async in der Klasse AddEndangeredWorker mit der CSV-Datei als Argument, stellt dieser Code sicher, dass die Haidaten und der Upload-Job an Redis übergeben werden. Die Sidekiq Workers, die wir einrichten werden, überwachen die Job-Warteschlange und reagieren, wenn neue Jobs entstehen.

      Nach dem Aufruf von perform_async leitet unsere Methode upload zu dem Pfad data um, wo Benutzer die hochgeladenen Haie einsehen können.

      Als Nächstes fügen wir eine Methode destroy zur Zerstörung der Daten hinzu. Fügen Sie den folgenden Code unter die Methode upload hinzu:

      ~/rails-sidekiq/app/controllers/endangered_controller.rb

      . . .
        def upload
          csv_file = File.join Rails.root, 'db', 'sharks.csv'   
          AddEndangeredWorker.perform_async(csv_file)
          redirect_to endangered_data_path, notice: 'Endangered sharks have been uploaded!'
        end
      
        def destroy
          RemoveEndangeredWorker.perform_async
          redirect_to root_path
        end
      . . .
      

      Wie unsere Methode upload beinhaltet unsere Methode destroy einen Aufruf perform_async der Klasse RemoveEndangeredWorker – den anderen Sidekiq Worker, den wir erstellen werden. Nach dem Aufruf dieser Methode leitet sie die Benutzer zu dem Stammanwendungspfad um.

      Die fertige Datei sieht ungefähr so aus:

      ~/rails-sidekiq/app/controllers/endangered_controller.rb

      class EndangeredController < ApplicationController
        before_action :set_endangered, only: [:index, :data]
      
        def index          
          if @endangered.length > 0
            redirect_to endangered_data_path
          else
            render 'index'
          end
        end
      
        def data
        end
      
        def upload
          csv_file = File.join Rails.root, 'db', 'sharks.csv'   
          AddEndangeredWorker.perform_async(csv_file)
          redirect_to endangered_data_path, notice: 'Endangered sharks have been uploaded!'
        end
      
        def destroy
          RemoveEndangeredWorker.perform_async
          redirect_to root_path
        end
      
        private
      
          def set_endangered
            @endangered = Endangered.all
          end
      
      end
      

      Wenn die Bearbeitung abgeschlossen wurde, speichern und schließen Sie die Datei.

      Als letzten Schritt zur Verfestigung der Routen unserer Anwendung werden wir den Code config/routes.rb der Datei, in der sich unsere Routendeklarationen befinden, ändern.

      Öffnen Sie nun diese Datei:

      Die Datei sieht derzeit wie folgt aus:

      ~/rails-sidekiq/config/routes.rb

      Rails.application.routes.draw do
        get 'endangered/index'
        get 'home/index'
        resources :sharks do
                resources :posts
        end
        root 'home#index'
        # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
      end
      

      Wir müssen die Datei aktualisieren, um die in unserem Controller definierten Routen aufzunehmen: data, upload und destroy. Unsere Route data wird mit einer GET-Anforderung zum Abrufen der Haifischdaten übereinstimmen, während unsere Routen upload und destroy den POST-Anforderungen zugeordnet werden, die diese Daten hochladen und zerstören.

      Fügen Sie den folgenden Code zu der Datei hinzu, um diese Routen zu definieren:

      ~/rails-sidekiq/config/routes.rb

      Rails.application.routes.draw do
        get 'endangered/index'
        get 'endangered/data', to: 'endangered#data'
        post 'endangered/upload', to: 'endangered#upload'
        post 'endangered/destroy', to: 'endangered#destroy'
        get 'home/index'
        resources :sharks do
                resources :posts
        end
        root 'home#index'
        # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
      end
      

      Wenn die Bearbeitung abgeschlossen wurde, speichern und schließen Sie die Datei.

      Nachdem Sie Ihr Modell Endangered und Ihre Controller eingerichtet haben, können Sie nun mit der Definition Ihrer Sidekiq Worker-Klassen fortfahren.

      Schritt 3 – Definieren von Sidekiq Workers

      Wir haben die Methode perform_async für unsere Sidekiq Worker in unserem Controller aufgerufen, aber wir müssen noch die Worker selbst erstellen.

      Erstellen Sie zunächst ein Verzeichnis workers für die Worker:

      Öffnen Sie eine Datei für den Worker AddEndangeredWorker:

      • nano app/workers/add_endangered_worker.rb

      Wir fügen in dieser Datei Code ein, der uns die Arbeit mit den Daten in unserer CSV-Datei ermöglicht. Zunächst fügen wir der Datei Code hinzu, der die Klasse erstellt, die Ruby-CSV-Bibliothek einbezieht und sicherstellt, dass diese Klasse als Sidekiq Worker funktioniert:

      ~/rails-sidekiq/app/workers/add_endangered_worker.rb

      class AddEndangeredWorker
        require 'csv'
        include Sidekiq::Worker
        sidekiq_options retry: false
      
      end
      

      Wir fügen auch die Option retry: false ein, um sicherzustellen, dass Sidekiq den Upload im Falle eines Fehlschlags nicht erneut versucht.

      Fügen Sie als Nächstes den Code für die Funktion perform hinzu:

      ~/rails-sidekiq/app/workers/add_endangered_worker.rb

      class AddEndangeredWorker
        require 'csv'
        include Sidekiq::Worker
        sidekiq_options retry: false
      
        def perform(csv_file)
          CSV.foreach(csv_file, headers: true) do |shark|
          Endangered.create(name: shark[0], iucn: shark[1])
        end
       end
      
      end
      

      Die Methode perform empfängt Argumente von der im Controller definierten Methode perform_async. Daher ist es wichtig, dass die Argumentwerte abgeglichen sind. Hier übergeben wir in csv_file, die in dem Controller definierte Variable und verwenden die Methode foreach aus der CSV-Bibliothek, um die Werte in der Datei zu lesen. Das Setzen von headers: true für diese Schleife stellt sicher, dass die erste Zeile der Datei als eine Zeile von Headers behandelt wird.

      Der Block liest dann die Werte von der Datei in die Spalten, die wir für unser Modell Endangered festgelegt haben: name und iucn. Durch Ausführung dieser Schleife werden für jeden der Einträge in unserer CSV-Datei Instanzen Endangered erstellt.

      Wenn Sie die Bearbeitung abgeschlossen haben, speichern und schließen Sie die Datei.

      Als Nächstes erstellen wir einen Worker, der sich um das Löschen dieser Daten kümmert. Öffnen Sie eine Datei für die Klasse RemoveEndangeredWorker:

      • nano app/workers/remove_endangered_worker.rb

      Fügen Sie den Code zur Definition der Klasse hinzu und stellen Sie sicher, dass sie die CSV-Bibliothek verwendet und als Sidekiq Worker funktioniert:

      ~/rails-sidekiq/app/workers/remove_endangered_worker.rb

      class RemoveEndangeredWorker
        include Sidekiq::Worker
        sidekiq_options retry: false
      
      end
      

      Fügen Sie als Nächstes eine Methode perform hinzu, um die Zerstörung der Daten von bedrohten Haien zu handhaben:

      ~/rails-sidekiq/app/workers/remove_endangered_worker.rb

      class RemoveEndangeredWorker
        include Sidekiq::Worker
        sidekiq_options retry: false
      
        def perform
          Endangered.destroy_all
        end
      
      end
      

      Die Methode perform ruft destroy_all in der Klasse Endangered auf, wodurch alle Instanzen der Klasse aus der Datenbank entfernt werden.

      Wenn die Bearbeitung abgeschlossen wurde, speichern und schließen Sie die Datei.

      Nachdem Sie Ihre Worker eingerichtet haben, können Sie mit der Erstellung eines Layouts für Ihre Ansichten endangered und von Vorlagen für Ihre Ansichten index und data fortfahren, sodass Benutzer bedrohte Haie hochladen und ansehen können.

      Schritt 4 – Hinzufügen von Layouts und Ansichtsvorlagen

      Damit Benutzer in den Genuss ihrer Informationen über bedrohte Haie kommen, müssen wir uns mit zwei Dingen befassen: dem Layout für die in unserem Controller endangered definierten Ansichten und mit den Ansichtsvorlagen für die Ansichten index und data.

      Unsere Anwendung verwendet derzeit ein anwendungsweites Layout, das sich unter app/views/layouts/application.html.erb befindet, eine Navigations-Partiale und ein Layout für die Ansichten sharks. Das Anwendungslayout prüft, ob ein Inhaltsblock vorhanden ist, der das Laden verschiedener Layouts ermöglicht, je nachdem, mit welchem Teil der Anwendung sich unsere Benutzer beschäftigen: für die Seite home index sehen sie ein Layout und für alle Ansichten über individuelle Haie ein anderes.

      Wir können das Layout sharks für unsere Ansichten endangered neu verwenden, da dieses Format auch für die Darstellung von Haidaten in großen Mengen funktioniert.

      Kopieren Sie die Layoutdatei sharks, um ein Layout für endangered zu erstellen:

      • cp app/views/layouts/sharks.html.erb app/views/layouts/endangered.html.erb

      Als Nächstes werden wir an der Erstellung von Ansichtenvorlagen für unsere Ansichten index und data arbeiten.

      Öffnen Sie zuerst die Vorlage index:

      • nano app/views/endangered/index.html.erb

      Löschen Sie den Boilerplate-Code und fügen Sie stattdessen den folgenden Code hinzu, der den Benutzern einige allgemeine Informationen über die bedrohten Kategorien gibt und ihnen die Möglichkeit bietet, Informationen über bedrohte Haie hochzuladen:

      ~/rails-sidekiq/app/views/endangered/index.html.erb

      <p id="notice"><%= notice %></p>
      
      <h1>Endangered Sharks</h1>
      
      <p>International Union for Conservation of Nature (ICUN) statuses: <b>vu:</b> Vulnerable, <b>en:</b> Endangered, <b>cr:</b> Critically Endangered </p>
      
      <br>
      
        <%= form_tag endangered_upload_path do %>
        <%= submit_tag "Import Endangered Sharks" %>
        <% end %>
      
        <br>
      
      <%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %> <%= link_to 'Home', home_index_path, :class => "btn btn-primary btn-sm" %>
      

      Ein form_tag macht den Daten-Upload möglich, indem eine Post-Aktion auf den endangered_upload_path verweist – die Route, die wir für unsere Uploads definiert haben.  Eine Submit-Schaltfläche, die mit dem submit_tag erstellt wurde, fordert die Benutzer zum "Import Endangered Sharks" (Importieren bedrohter Haie) auf.

      Zusätzlich zu diesem Code haben wir einige allgemeine Informationen über ICUN-Codes eingefügt, damit die Benutzer die Daten, die sie sehen werden, interpretieren können.

      Wenn die Bearbeitung abgeschlossen wurde, speichern und schließen Sie die Datei.

      Öffnen Sie als Nächstes eine Datei für die Ansicht data:

      • nano app/views/endangered/data.html.erb

      Fügen Sie den folgenden Code hinzu, der eine Tabelle mit den Daten der bedrohten Haie hinzufügt:

      ~/rails-sidekiq/app/views/endangered/data.html.erb

      <p id="notice"><%= notice %></p>
      
      <h1>Endangered Sharks</h1>
      
      <p>International Union for Conservation of Nature (ICUN) statuses: <b>vu:</b> Vulnerable, <b>en:</b> Endangered, <b>cr:</b> Critically Endangered </p>
      
      <div class="table-responsive">
      <table class="table table-striped table-dark">
        <thead>
          <tr>
            <th>Name</th>
            <th>IUCN Status</th>
            <th colspan="3"></th>
          </tr>
        </thead>
      
        <tbody>
          <% @endangered.each do |shark| %>
            <tr>
              <td><%= shark.name %></td>
              <td><%= shark.iucn %></td>
            </tr>
          <% end %>
        </tbody>
      </table>
      </div>
      
      <br>
      
        <%= form_tag endangered_destroy_path do %>
        <%= submit_tag "Delete Endangered Sharks" %>
        <% end %>
      
        <br>
      
      <%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %> <%= link_to 'Home', home_index_path, :class => "btn btn-primary btn-sm" %>
      

      Dieser Code enthält noch einmal die ICUN-Statuscodes und eine Bootstrap-Tabelle für die ausgegebenen Daten. Indem wir unsere Variable @endangered durchschleifen, geben wir den Namen und den ICUN-Status jedes Hais in die Tabelle aus.

      Unterhalb der Tabelle haben wir einen weiteren Satz von form_tags und submit_tags, die auf den Pfad destroy verweisen, indem Benutzern die Option zum "Delete Endangered Sharks" (Löschen bedrohter Haie) angeboten wird.

      Wenn die Bearbeitung abgeschlossen wurde, speichern und schließen Sie die Datei.

      Die letzte Änderung, die wir für unsere Ansichten vornehmen, wird in der Ansicht index vorgenommen, die mit unserem Controller home verknüpft ist. Sie erinnern sich vielleicht daran, dass diese Ansicht als das Stammverzeichnis der Anwendung in config/routes.rb festgelegt ist.

      Öffnen Sie diese Datei zur Bearbeitung:

      • nano app/views/home/index.html.erb

      Finden Sie die Spalte in der Zeile, die besagt Sharks are ancient (Haie sind uralt):

      ~/rails-sidekiq/app/views/home/index.html.erb

      . . .
              <div class="col-lg-6">
                  <h3>Sharks are ancient</h3>
                  <p>There is evidence to suggest that sharks lived up to 400 million years ago.
                  </p>
              </div>
          </div>
      </div>
      

      Fügen Sie den folgenden Code zur Datei hinzu:

      ~/rails-sidekiq/app/views/home/index.html.erb

      . . .
              <div class="col-lg-6">
                  <h3>Sharks are ancient and SOME are in danger</h3>
                  <p>There is evidence to suggest that sharks lived up to 400 million years ago. Without our help, some could disappear soon.</p>
                  <p><%= button_to 'Which Sharks Are in Danger?', endangered_index_path, :method => :get,  :class => "btn btn-primary btn-sm"%>
                  </p>
              </div>
          </div>
      </div>
      

      Wir haben einen Handlungsaufruf für Benutzer aufgenommen, um mehr über bedrohte Haie zu erfahren, indem wir zuerst eine starke Botschaft weitergeben und dann einen Helfer button_to hinzufügen, der eine GET-Anfrage an die Route endangered index sendet und Benutzern Zugriff auf diesen Teil der Anwendung gewährt. Von dort aus können sie Informationen über bedrohte Haie hochladen und anzeigen.

      Wenn die Bearbeitung abgeschlossen wurde, speichern und schließen Sie die Datei.

      Nachdem Sie nun Ihren Code eingegeben haben, können Sie die Anwendung starten und einige Haie hochladen!

      Schritt 5 – Starten von Sidekiq und Testen der Anwendung

      Bevor wir die Anwendung starten, müssen wir Migrationen in unserer Datenbank durchführen und Sidekiq starten, um unsere Worker zu aktivieren. Redis sollte bereits auf dem Server ausgeführt werden, aber wir können das überprüfen, um sicherzugehen. Sobald all diese Dinge eingerichtet sind, sind wir bereit, die Anwendung zu testen.

      Überprüfen Sie zunächst, ob Redis ausgeführt wird:

      Sie sollten eine Ausgabe wie die folgende sehen:

      Output

      ● redis-server.service - Advanced key-value store Loaded: loaded (/lib/systemd/system/redis-server.service; enabled; vendor preset: enabled) Active: active (running) since Tue 2019-11-12 20:37:13 UTC; 1 weeks 0 days ago

      Führen Sie als Nächstes Ihre Datenbankmigration durch:

      Sie können nun Sidekiq im Kontext Ihres aktuellen Projekt-Bundles starten, indem Sie den Befehl bundle exec sidekiq verwenden:

      Sie werden eine ähnliche Ausgabe wie diese sehen, die anzeigt, dass Sidekiq zur Bearbeitung von Jobs bereit ist:

      Output

      m, `$b .ss, $$: .,d$ `$$P,d$P' .,md$P"' ,$$$$$b/md$$$P^' .d$$$$$$/$$$P' $$^' `"/$$$' ____ _ _ _ _ $: ,$$: / ___|(_) __| | ___| | _(_) __ _ `b :$$ ___ | |/ _` |/ _ |/ / |/ _` | $$: ___) | | (_| | __/ <| | (_| | $$ |____/|_|__,_|___|_|__|__, | .d$$ |_| 2019-11-19T21:43:00.540Z pid=17621 tid=gpiqiesdl INFO: Running in ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux] 2019-11-19T21:43:00.540Z pid=17621 tid=gpiqiesdl INFO: See LICENSE and the LGPL-3.0 for licensing details. 2019-11-19T21:43:00.540Z pid=17621 tid=gpiqiesdl INFO: Upgrade to Sidekiq Pro for more features and support: http://sidekiq.org 2019-11-19T21:43:00.540Z pid=17621 tid=gpiqiesdl INFO: Booting Sidekiq 6.0.3 with redis options {:id=>"Sidekiq-server-PID-17621", :url=>nil} 2019-11-19T21:43:00.543Z pid=17621 tid=gpiqiesdl INFO: Starting processing, hit Ctrl-C to stop

      Öffnen Sie ein zweites Terminalfenster, navigieren Sie zum Verzeichnis rails-sidekiq und starten Sie Ihren Anwendungsserver.

      Wenn Sie die Anwendung lokal ausführen, verwenden Sie den folgenden Befehl:

      Wenn Sie mit einem Entwicklungsserver arbeiten, führen Sie den folgenden Befehl aus:

      • bundle exec rails s --binding=your_server_ip

      Navigieren Sie im Browser zu localhost:3000 oder http://your_server_ip:3000. Sie sehen die folgende Startseite:

      Sidekiq App Home

      Klicken Sie auf die Which Sharks Are in Danger? Schaltfläche. Da Sie keine gefährdeten Sharks hochgeladen haben, wird Ihnen die Ansicht des gefährdeten Index gezeigt:

      Ansicht des gefährdeten Index

      Klicken Sie auf Import Endangered Sharks, um die gefährdeten Sharks zu importieren. Eine Statusmeldung teilt Ihnen mit, dass die Sharks importiert wurden:

      Import beginnen

      Sie sehen auch den Beginn des Imports. Aktualisieren Sie die Seite, um die gesamte Tabelle zu sehen:

      Tabelle aktualisieren

      Dank Sidekiq ist unser umfangreiches Batch-Upload der gefährdeten Sharks gelungen, ohne den Browser zu blockieren oder die Funktionsweise anderer Anwendungen zu beeinträchtigen.

      Klicken Sie auf die Schaltfläche Home unten auf der Seite, die Sie zur Hauptseite der Anwendung zurückbringen wird:

      Sidekiq App Home

      Klicken Sie hier erneut auf Which Sharks Are in Danger? . Damit gelangen Sie nun direkt zu der Ansicht data, da Sie die Haie bereits hochgeladen haben.

      Um die Löschfunktionalität zu testen, klicken Sie auf die Schaltfläche Delete Endangered Sharks unterhalb der Tabelle. Sie sollten nun erneut zu der Hauptseite der Anwendung umgeleitet werden. Wenn Sie ein letztes Mal auf Which Sharks Are in Danger? klicken, gelangen Sie zu der Ansicht index zurück, in der Sie die Option haben, die Haie erneut hochzuladen:

      Ansicht des gefährdeten Index

      Ihre Anwendung wird nun mit Sidekiq Workers ausgeführt, die zur Bearbeitung von Jobs bereit sind und sicherstellen, dass die Benutzer eine gute Erfahrung mit Ihrer Anwendung haben.

      Zusammenfassung

      Sie haben nun eine funktionierende Rails-Anwendung mit aktiviertem Sidekiq, die es Ihnen ermöglicht, kostspielige Operationen in eine von Sidekiq verwaltete und von Redis unterstützte Job-Warteschlange auszulagern. Dadurch können Sie die Geschwindigkeit und Funktionalität Ihrer Website im Laufe der Entwicklung verbessern.

      Wenn Sie mehr über Sidekiq erfahren möchten, sind die Docs ein guter Ausgangspunkt.

      Weitere Informationen über Redis finden Sie in unserer Bibliothek der Redis Ressourcen. Sie können auch mehr über die Ausführung eines verwalteten Redis-Clusters auf DigitalOcean erfahren, indem Sie sich die Produktdokumentation ansehen.



      Source link

      Erstellen einer Anwendung für ein inspirierendes Zitat unter Verwendung von AdonisJs und MySQL


      Der Autor wählte den Tech Education Fund, um eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

      Einführung

      AdonisJs ist ein in einfachem JavaScript geschriebenes Node.js Web-Framework, das auf allen gängigen Betriebssystemen läuft. Es verwendet das beliebte Designmuster MVC (Model – View – Controller) und bietet ein stabiles Ökosystem für das Schreiben serverseitiger Webanwendungen. Das Framework bietet nahtlose Authentifizierung, SQL ORM (objekt-relationales Mapping), Migrationen und Datenbank-Seeding. AdonisJs weist eine ähnliche Architektur wie das PHP Webanwendungs-Framework Laravel auf, einschließlich der gleichen Ordnerstruktur und mehrere gemeinsam genutzter Einrichtungskonzepte.

      Standardmäßig verwendet AdonisJs die Edge Template Engine, die für eine intuitive Verwendung konzipiert ist. Genau wie Laravel wird AdonisJs mit einem ORM namens Lucid bereitgestellt, das als Schnittstelle für die Kommunikation zwischen den Modellen einer Anwendung und der Datenbank dient. Mit AdonisJs können Entwickler eine Full-Stack-Anwendung erstellen, bei der der Backend-Server für die Anwendung der Geschäftslogik, das Routing und das Rendering aller Seiten der Anwendung verantwortlich ist. Es ist auch möglich, eine Webdienst-API zu erstellen, um JSON-Antworten von einem Controller zurückzugeben; diese Webdienste können dann über Frontend-Frameworks wie Vue.js, React und Angular konsumiert werden.

      In diesem Tutorial erstellen Sie eine Anwendung mit AdonisJs unter Verwendung seiner CLI. Sie erstellen Routen, Controller, Modelle und Ansichten innerhalb Ihrer Anwendung und führen Formularvalidierungen durch. Das Beispiel in diesem Tutorial wird eine Anwendung für ein inspirierendes Zitat sein, bei der sich ein Benutzer registrieren und anmelden kann, um ein inspirierendes Zitat zu erstellen. Diese Demo-Anwendung bietet Ihnen die Möglichkeit zur Ausführung von CRUD (Create, Read, Update und Delete)-Operationen.

      Voraussetzungen

      Bevor Sie mit diesem Leitfaden beginnen, benötigen Sie Folgendes:

      Anmerkung: Dieses Tutorial verwendet für die Entwicklung einen macOS-Rechner. Wenn Sie ein anderes Betriebssystem verwenden, müssen Sie in den ersten Schritten möglicherweise sudo für npm-Befehle verwenden.

      Schritt 1 – Installieren der Adonis CLI

      In diesem Abschnitt werden Sie Adonis CLI und alle erforderlichen Pakete auf Ihrem lokalen Rechner installieren. Die CLI ermöglicht es Ihnen, ein neues AdonisJs-Projekt aufzubauen, sowie Boilerplates für Controller, Middlewares und Modelle in Ihrer Anwendung zu erstellen und zu generieren. Außerdem erstellen Sie Ihre Datenbank für das Projekt.

      Führen Sie den folgenden Befehl aus, um die AdonisJs CLI global auf Ihrem Rechner über npm zu installieren:

      Geben Sie nach Abschluss der Installation den folgenden Befehl im Terminal ein, um die Installation von AdonisJs zu bestätigen und die aktuelle Version anzuzeigen:

      Sie sehen eine Ausgabe, die die aktuelle Version von AdonisJs zeigt:

      Output

      4.1.0

      Mit der erfolgreichen Installation der AdonisJs CLI haben Sie nun Zugriff auf den Befehl adonis und können ihn zum Erstellen neuer Installationen eines AdonisJs-Projekts, zur Verwaltung Ihres Projekts und zum Erzeugen relevanter Dateien wie die Controller, Modelle usw. verwenden.

      Nun können Sie mit der Erstellung eines neuen AdonisJs-Projekts fortfahren, indem Sie den Befehl adonis wie hier gezeigt verwenden:

      • adonis new adonis-quotes-app

      Der vorhergehende Befehl erstellt eine Anwendung namens adonis-quotes-app​​​ in einem neuen Verzeichnis mit demselben Namen in Ihrem lokalen Projektverzeichnis mit der entsprechenden AdonisJs MVC-Struktur.

      Verschieben Sie sie in den neuen Anwendungsordner:

      Starten Sie dann Ihre Anwendung durch Ausführen von:

      Dadurch wird der Entwicklungsserver auf dem Standardport 3333 gestartet, wie in der Root-Datei .env für Ihre Anwendung angegeben. Navigieren Sie zu http://localhost:3333, um die Begrüßungsseite von AdonisJs anzuzeigen.

      Begrüßungsseite von AdonisJs

      Jetzt schließen Sie die Einrichtung Ihrer Datenbank ab. Hier installieren Sie den Treiber mysql, um sich über npm von Ihrer Node.js-Anwendung mit Ihrem MySQL-Server zu verbinden. Gehen Sie zunächst wieder zu Ihrem Terminal zurück, auf dem die Anwendung derzeit läuft, beenden Sie den Prozess mit STRG+C und führen Sie den folgenden Befehl aus:

      Nachdem Sie nun den MySQL Node.js-Treiber für diese Anwendung erfolgreich installiert haben, müssen Sie die Anwendungsdatenbank erstellen und die entsprechende Verbindung zu ihr aufbauen.

      Die neueste Version von MySQL, die Sie aus dem vorbereitendem Tutorial installiert haben, verwendet ein standardmäßiges Authentifizierungs-Plugin namens caching_ha2_password. Dieses wird derzeit von den Node.js-Treibern für MySQL nicht unterstützt. Um Probleme mit der Datenbankverbindung in Ihrer Anwendung zu vermeiden, müssen Sie einen neuen MySQL-Benutzer anlegen und das derzeit unterstützte Authentifizierungs-Plugin mysql_native_password verwenden.

      Um zu beginnen, greifen Sie mit dem Account root auf den MySQL-Client zu:

      Sie werden aufgefordert, das während der MySQL-Installation eingerichtete Passwort für den Account root einzugeben.

      Erstellen Sie als Nächstes den Benutzer und das Passwort unter Verwendung des Plugins mysql_native_password:

      • CREATE USER 'sammy'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

      Sie sehen den folgenden Output:

      Output

      Query OK, 0 rows affected (0.02 sec)

      Erstellen Sie nachfolgend eine Datenbank für die Anwendung mit:

      Sie sehen den folgenden Output:

      Output

      Query OK, 1 row affected (0.03 sec)

      Damit haben Sie die Datenbank für diese Anwendung erfolgreich erstellt.

      Aktivieren Sie jetzt den Zugriff auf die erstellte Datenbank für den neuen MySQL-Benutzer. Führen Sie den folgenden Befehl aus, um dem Benutzer alle Berechtigungen in der Datenbank zu erteilen:

      • GRANT ALL PRIVILEGES ON adonis.* TO 'sammy'@'localhost';

      Laden Sie die Berechtigungstabelle neu, indem Sie den folgenden Befehl ausführen, um die soeben vorgenommenen Änderungen zu übernehmen:

      Sie sehen den folgenden Output:

      Output

      Query OK, 0 rows affected (0.00 sec)

      Beenden Sie den MySQL-Client mit:

      Sie haben die AdonisJs CLI erfolgreich installiert, ein neues AdonisJs-Projekt erstellt und mysql über npm installiert.  Außerdem haben Sie die Datenbank für diese Anwendung erstellt und einen MySQL-Benutzer mit den entsprechenden Berechtigungen eingerichtet. Dies ist die Grundeinrichtung für Ihre Anwendung. Im nächsten Abschnitt beginnen Sie mit der Erstellung der erforderlichen Ansichten für Ihre Anwendung.

      Schritt 2 – Verwenden der Edge Templating Engine

      AdonisJs wird mit einer eigenen Template-Engine namens Edge bereitgestellt. Sie ermöglicht Ihnen die Erstellung einer wiederverwendbaren HTML-Vorlage und die Einführung von Front-End-Logik in Ihre Anwendung mit minimalem Code. Edge stellt JavaScript-Entwickler während der Entwicklung einer Anwendung die Werkzeuge zur Verfügung, um ein komponentenbasiertes Layout zu erstellen, Bedingungen zu schreiben, Iterationen zu verwenden und Anzeigeebenen zur Aufnahme der Logik zu erstellen. Alle Template-Dateien enden mit der Erweiterung .edge und werden im Verzeichnis resources/views gespeichert.

      Nachfolgend sind die Ansichten aufgeführt, die Ihre Anwendung für die ordnungsgemäße Funktionsweise benötigt:

      • Master Layout: Mit Edge können Sie eine Seite erstellen, die das CSS, gängige JavaScript-Dateien, jQuery und gängige Bestandteile der Benutzeroberfläche enthält, die in der gesamten Anwendung gleich bleiben, wie zum Beispiel die Navigationsleiste, das Logo, der Header usw. Sobald Sie die Seite Master Layout erstellt haben, übernehmen andere Ansichten (Seiten) in Ihrer Anwendung diese.
      • Index View: Diese Seite verwendet das Master Layout, um gängige Dateien zu erben und Inhalte für die Homepage der Anwendung darzustellen.
      • Login-Seite: Diese Seite verwendet ebenfalls das Master Layout und stellt das Formular mit den Eingabefeldern für Benutzername und Passwort für die Anmeldung der Benutzer dar.
      • Register-Seite: Hier sehen Benutzer ein Formular zur Registrierung und zur dauerhaften Speicherung der Informationen in der Datenbank.
      • Create Quote-Seite: Benutzer werden diese Seite zum Erstellen eines inspirierenden Zitats verwenden.
      • Edit Quote-Seite: Benutzer werden diese Seite zum Bearbeiten eines Zitats verwenden.
      • View Quote-Seite: Benutzer werden diese Seite zum Anzeigen eines bestimmten Zitats verwenden.

      Verwenden Sie zunächst den Befehl adonis, um die Seite Master Layout zu erstellen, indem Sie den folgenden Befehl ausführen:

      • adonis make:view layouts/master

      Sie werden eine Ausgabe ähnlich der folgenden sehen:

      Output

      ✔ create resources/views/layouts/master.edge

      Dieser Befehl erstellt automatisch eine Datei master.edge in Ihrem Ordner resources/views/layouts. Öffnen Sie die neue Datei:

      • nano resources/views/layouts/master.edge

      Fügen Sie den folgenden Code hinzu:

      /resources/views/layouts/master.edge

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>adonis-quotes-app</title>
          {{ style('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') }}
          {{ style('style') }}
          {{ script('https://code.jquery.com/jquery-3.3.1.slim.min.js') }}
      </head>
      <body>
          <div class="container-fliud">
              @include('navbar')
              @!section('content')
          </div>
          {{ script('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js') }}
      
      </body>
      </html>
      

      In dieser Datei schließen Sie die CDN-Dateien für Bootstrap CSS, Bootstrap JavaScript und jQuery ein. Sie fügen einen globalen CSS-Dateinamen style.css hinzu und schließen innerhalb der div eine Partiale-Datei namens navbar ein. Um Fragmente des HTML-Codes, die Sie auf mehreren Seiten Ihrer Anwendung benötigen, wie nav oder footer, wiederzuverwenden, können Sie Partiale einfügen. Dabei handelt es sich um kleinere Dateien, die den sich wiederholenden Code enthalten, sodass der Code für diese Elemente schneller an einer Stelle und nicht bei jedem Auftreten aktualisiert werden kann. Die navbar enthält Markierungen für die Schaltflächen Login und Register, ein Logo und einen Home-Link.

      Auf diese Weise können alle nachfolgenden für diese Anwendung erstellten Seiten das Master-Layout erweitern und die navbar rendern, ohne dass der Inhalt neu geschrieben werden muss. Sie erstellen diese Datei navbar später im Tutorial.

      Abschließend definieren Sie einen Abschnitt-Tag @! section(), um Inhalte anderer Seiten einzuschließen und sie vom Master-Layout rendern zu lassen. Damit dies wie erwartet funktioniert, müssen alle neuen Seiten, die das Master-Layout erweitern, auch einen Abschnitt-Tag mit demselben Namen (d. h. @section('content')) definieren.

      Speichern und schließen Sie die Datei, sobald Sie mit der Bearbeitung fertig sind.

      Als Nächstes verwenden Sie den Befehl adonis, um die Navigationsleiste zu erstellen:

      Sie sehen einen Output, der so ähnlich wie der nachfolgende aussieht:

      Output

      ✔ create resources/views/navbar.edge

      Öffnen Sie die neu erstellte Datei:

      • nano resources/views/navbar.edge

      Fügen Sie dann den folgenden Code hinzu:

      /resources/views/navbar.edge

      <nav class="navbar navbar-expand-lg navbar-dark text-white">
          <a class="navbar-brand" >LOGO</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
      
          <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                  <li class="nav-item active ">
                      <a class="btn text-white" href="https://www.digitalocean.com/">Home</a>
                  </li>
              </ul>
          </div>
          <div class="navbar-right" id="navbarNav">
              @loggedIn
                  <ul class="navbar-nav">
                          <li>
                              <div class="text-right">
                                   <a href="{{route('create.quote')}}" class="btn btn-outline-primary">Create Quote</a>
                              </div>
                          </li>
      
                      <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="https://www.digitalocean.com/#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             {{ auth.user.username}}
                          </a>
                          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                              <form method="POST" action="{{route('logout')}}">
                                  {{ csrfField() }}
                                    <button  type="submit" class="dropdown-item" href="">logout</button>
                              </form>
                          </div>
                      </li>
                  </ul>
              @else
                  <ul class="navbar-nav">
                      <li class="nav-item active pr-2">
                          <a href="{{route('login.create')}}" class="btn btn-outline-danger">
                            login
                          </a>
                      </li>
                      <li class="nav-item active pr-2">
                          <a href="{{route('register.create')}}" class="btn btn-outline-primary">
                              Register
                          </a>
                      </li>
                  </ul>
              @endloggedIn
          </div>
      </nav>
      

      Zusätzlich zur Definition der Links zu der Homepage und einer Schaltfläche zum Registrieren und Anmelden fügen Sie ein Tag @loggedIn hinzu. Damit können Sie eine bedingte Anweisung um den authentifizierten Benutzer herum schreiben und bei Bedarf entsprechende Inhalte anzeigen. Für einen authentifizierten Benutzer zeigt die Anwendung den Benutzernamen und eine Schaltfläche zum Erstellen eines neuen Zitats an. Wenn ein Benutzer nicht angemeldet ist, zeigt Ihre Anwendung eine Schaltfläche für die Anmeldung oder die Registrierung an. Diese Seite wird als Partiale auf jeder Seite eingefügt, so wie es zuvor im Master-Layout für diese Anwendung enthalten war.

      Speichern und schließen Sie die Datei.

      Nun erstellen Sie die Indexseite, die Sie für die Homepage der Anwendung verwenden. Sie wird die Liste aller inspirierenden Zitate, die die Benutzer schreiben, rendern und anzeigen:

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      ✔ create resources/views/index.edge

      Die hier erstellte Datei wird sich in resources/views/index.edge befinden. Öffnen Sie die Datei:

      • nano resources/views/index.edge

      Fügen Sie dann den folgenden Code hinzu:

      /resources/views/index.edge

      @layout('layouts/master')
      @section('content')
      
      <div class="container">
          <div class="text-center">
              @if(flashMessage('successmessage'))
                  <span class="alert alert-success p-1">{{ flashMessage('successmessage') }}</span>
              @endif
          </div>
          <div class="row">
              @each(quote in quotes)
                  <div class="col-md-4 mb-4 quote-wrapper">
                      <a href="https://www.digitalocean.com/view-quote/{{quote.id}}" class="w-100">
                          <div class="card shadow-lg bg-dark text-white">
                              <div class="card-body">
                                  <blockquote class="blockquote mb-0">
                                      <p>{{quote.body}}</p>
                                      <footer class="blockquote-footer">
                                          <cite title="Source Title"> {{quote.username}}</cite>
                                      </footer>
                                  </blockquote>
                                  @if(auth.user.id == quote.user_id)
                                    <div>
                                      <a  href="http://www.digitalocean.com/edit-quote/{{quote.id}}" class="btn btn-primary">edit</a>
                                      <a href="http://www.digitalocean.com/delete-quote/{{quote.id}}" class="btn btn-danger">delete</a>
                                    </div>
                                  @endif
                              </div>
                          </div>
                      </a>
                  </div>
              @else
               <div class="col-md-12 empty-quote text-center">
                      <p>No inspirational quote has been created</p>
               </div>
              @endeach
          </div>
      </div>
      @endsection
      

      Hier geben Sie an, dass diese Ansicht das Layout master durch Erweiterung verwenden wird. Diese Seite hat nun Zugriff auf alle Bibliotheken, Stylesheets und die navbar, die im Layout master enthalten sind. Als Nächstes iterieren Sie über ein Array von quotes (Zitaten) unter Verwendung des integrierten Tags @each. Das Array quotes wird von dem QuoteController, den Sie später in diesem Tutorial erstellen werden, an diese Ansicht übergeben. Wenn keine Zitate vorhanden sind, wird eine entsprechende Meldung angezeigt.

      Speichern und schließen Sie diese Datei.

      Um die Anmeldeseite zu erstellen, führen Sie nun den folgenden Befehl aus:

      • adonis make:view auth/login

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      ✔ create resources/views/auth/login.edge

      Dadurch wird automatisch ein Ordner auth innerhalb von resources/views erstellt und darin ebenfalls eine Datei login.edge angelegt. Öffnen Sie die Datei login.edge:

      • nano resources/views/auth/login.edge

      Fügen Sie den folgenden Inhalt hinzu:

      /resources/views/auth/login.edge

      @layout('layouts/master')
      @section('content')
        <div class="container">
          <div class="row">
            <div class="col-md-4 shadow bg-white mt-5 rounded offset-md-4">
              <form method="POST" action="{{route('login.store')}}">
                {{ csrfField() }}
                  <div>
                    @if(flashMessage('successmessage'))
                      <span class="alert alert-success p-1">{{ flashMessage('successmessage') }}</span>
                    @endif
                  </div>
                  <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="email" name="email" value="{{old('email','')}}"  placeholder="Enter email">
                    {{ elIf('<span class=text-danger>$self</span>', getErrorFor('email'), hasErrorFor('email')) }}
                  </div>
                  <div class="form-group">
                    <label for="pasword">Password</label>
                    <input type="password" class="form-control" id="password" name="password" value="{{old('password','')}}" placeholder="Password">
                    {{ elIf('<span class=text-danger>$self</span>', getErrorFor('password'), hasErrorFor('password')) }}
                  </div>
      
                  <div class="text-center">
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </div>
              </form>
            </div>
          </div>
        </div>
      @endsection
      

      Diese Datei enthält ein Formular, das Eingabeelemente enthält,mit denen Sie den Benutzernamen und das Passwort eines registrierten Benutzers erfassen, bevor dieser sich erfolgreich authentifizieren und mit der Erstellung von Zitaten beginnen kann. Ein weiteres wichtiges Element, das Sie auf dieser Seite beachten sollten, ist das {{ csrfField() }}​​​. Es handelt sich dabei um eine globale Variable, die AdonisJs verwendet, um das CSRF-Zugriffstoken zu übergeben, wenn eine POST-, PUT– und DELETE-Anfrage aus Ihrer Anwendung gesendet wird.

      Dies wurde eingerichtet, um Ihre Anwendung vor Cross-Site Request Forgery (CSRF)-Angriffen zu schützen. Es funktioniert, indem es für jeden Benutzer, der Ihre Website besucht, ein eindeutiges CSRF-Geheimnis erzeugt. Sobald Ihre Benutzer eine HTTP-Anfrage vom Frontend aus senden, wird ein entsprechendes Token für dieses Geheimnis generiert und mit der Anfrage weitergegeben. Auf diese Weise kann die für diese Anfrage innerhalb von AdonisJs erstellte Middleware überprüfen, ob sowohl das Token als auch das CSRF-Geheimnis gültig sind und dem aktuell authentifizierten Benutzer gehören.

      Speichern und schließen Sie die Datei, sobald Sie fertig sind.

      Als Nächstes erstellen Sie die Registrierungsseite mit diesem Befehl:

      • adonis make:view auth/register

      Sie werden eine ähnliche Ausgabe wie diese sehen:

      Output

      ✔ create resources/views/auth/register.edge

      Suchen und öffnen Sie die neu erstellte Datei in resources/views/auth/register.edge:

      • nano resources/views/auth/register.edge

      Fügen Sie folgenden Code hinzu:

      resources/views/auth/register.edge

      @layout('layouts/master')
      @section('content')
        <div class="container ">
          <div class="row">
              <div class="col-md-4  bg-white p-3 mt-5 shadow no-border rounded offset-md-4">
                <form method="POST" action="{{route('register.store')}}">
                  {{ csrfField() }}
                    <div class="form-group">
                      <label for="name">Fullname</label>
                      <input type="text" class="form-control" id="name" name="name"  value="{{old('name','')}}" placeholder="Enter Fullname">
                      {{ elIf('<span class=text-danger>$self</span>', getErrorFor('name'), hasErrorFor('name')) }}
                    </div>
                    <div class="form-group">
                      <label for="email">Email address</label>
                      <input type="email" class="form-control" id="email"  name="email" value="{{old('email','')}}" placeholder="Enter email">
                      {{ elIf('<span class=text-danger>$self</span>', getErrorFor('email'), hasErrorFor('email')) }}
                    </div>
                    <div class="form-group">
                      <label for="pasword">Password</label>
                      <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                      {{ elIf('<span class=text-danger>$self</span>', getErrorFor('password'), hasErrorFor('password')) }}
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
              </div>
          </div>
        </div>
      @endsection
      

      Ähnlich wie die Anmeldeseite enthält diese Datei ein HTML-Formular mit Eingabefeldern zur Erfassung von Name, E-Mail und Passwort eines Benutzers während des Registrierungsvorgangs. Ebenfalls enthalten ist das {{ csrfField() }}, da es für jede Post-Anfrage für eine AdonisJs-Anwendung erforderlich ist.

      Speichern und schließen Sie die Datei.

      Nun erstellen Sie eine neue Datei, um ein inspirierendes Zitat zu erstellen, indem Sie den folgenden Befehl vom Terminal aus ausführen:

      • adonis make:view quotes/create-quote

      Sie sehen eine Ausgabe wie:

      Output

      ✔ create resources/views/quotes/create-quote.edge

      Öffnen Sie resources/views/quotes/create-quote.edge:

      • nano resources/views/quotes/create-quote.edge

      Und fügen Sie den folgenden Inhalt hinzu:

      /resources/views/quotes/create-quote.edge

      @layout('layouts/master')
      @section('content')
      <div class="container">
          <div class="row">
              <div class="col-md-3"></div>
              <div class="col-md-6 shadow bg-white mt-5 rounded p-3">
                  <div class="float-right">
                      <a href="https://www.digitalocean.com/" class="btn btn-outline-dark ">back</a>
                  </div>
                      <br>
      
                  <div class="clear-fix"></div>
                      <form method="POST" action="{{route('store.quote')}}">
                          {{ csrfField() }}
                          <div class="form-group">
                              <label for="quote">Create Quote</label>
                              <textarea type="text" rows="5"  name='body' id="body" class="form-control" id="quote" placeholder="Write an inspirational quote"></textarea>
                          </div>
      
                          <div class="text-center">
                              <button type="submit" class="btn btn-primary">Submit</button>
                          </div>
                      </form>
                  </div>
              </div>
              <div class="col-md-3"></div>
          </div>
      </div>
      @endsection
      

      Diese Seite erweitert das Master-Layout und enthält ein HTML-Formular mit einem Textbereichselement, das es dem Benutzer ermöglicht, Text über mehrere Zeilen einzugeben, bevor er über die entsprechende Route veröffentlicht und gehandhabt wird.

      Speichern und schließen Sie die Datei, sobald Sie fertig sind.

      Erstellen Sie als Nächstes eine Seite zur Bearbeitung eines bestimmten Zitats. Führen Sie den folgenden Befehl vom Terminal aus:

      • adonis make:view quotes/edit-quote

      Sie sehen den folgenden Output:

      Output

      ✔ create resources/views/quotes/edit-quote.edge

      Öffnen Sie die Datei mit:

      • nano resources/views/quotes/edit-quote.edge

      Fügen Sie den folgenden Inhalt zu resources/views/quotes/edit-quote hinzu:

      /resources/views/quotes/edit-quote.edge

      @layout('layouts/master')
      @section('content')
      <div class="container">
          <div class="row">
              <div class="col-md-6 shadow bg-white rounded p-3 offset-md-3">
                  <div class="float-right">
                      <a href="https://www.digitalocean.com/" class="btn btn-outline-dark ">back</a>
                  </div>
                  <br>
      
                  <div class="clear-fix"></div>
                  <form method="POST" action="/update-quote/{{quote.id}}">
                      {{ csrfField() }}
                      <div class="form-group">
                          <label for="pasword">Edit Quote</label>
                          <textarea type="text" rows="5"  name='body' id="body" class="form-control" id="quote" placeholder="write the inspirational quote">{{quote.body}}</textarea>
                      </div>
                      <div class="text-center">
                          <button type="submit" class="btn btn-primary">Update</button>
                      </div>
      
                  </form>
              </div>
          </div>
      </div>
      @endsection
      

      Diese Seite enthält ähnliche Inhalte wie die Datei create-quote.edge – der Unterschied besteht darin, dass sie die Details eines bestimmten Zitats enthält, die zu bearbeiten sind, <form method="POST" action="/update-quote/{{quote.id}}">.

      Speichern und schließen Sie die Datei.

      Erstellen Sie abschließend eine Seite, um ein einzelnes inspirierendes Zitat anzuzeigen:

      • adonis make:view quotes/quote

      Sie sehen eine Ausgabe, die dieser ähnelt:

      Output

      ✔ create resources/views/quotes/quote.edge

      Öffnen Sie die Datei mit:

      • nano resources/views/quotes/quote.edge

      Fügen Sie folgenden Code hinzu:

      /resources/views/quotes/quote.edge

      @layout('layouts/master')
      @section('content')
      <div class="container">
          <div class="row">
              <div class="col-md-6 offset-md-3">
                  <div class="card shadow-lg bg-dark text-white">
                      <div class="card-body">
                          <div class="float-right">
                              <a href="https://www.digitalocean.com/" class="btn btn-outline-primary ">back</a>
                          </div>
                              <br>
                          <div class="clear-fix"></div>
                          <blockquote class="blockquote mb-0">
                              <p>{{quote.body}}</p>
                              <footer class="blockquote-footer">
                                  <cite title="Source Title">{{quote.username}}</cite>
                              </footer>
                          </blockquote>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      @endsection
      

      Diese Seite gibt die Details eines bestimmten Zitats wieder, einschließlich des Zitatkörpers quote.body, und des Autors, der es erstellt hat, quote.username.

      Wenn Sie mit der Datei fertig sind, speichern und schließen Sie sie.

      Sie haben alle erforderlichen Seiten für Ihre Anwendung mit Hilfe der Edge Templating Engine erstellt. Als Nächstes konfigurieren und stellen Sie eine Verbindung mit der Datenbank Ihrer Anwendung her.

      Schritt 3 – Erstellen eines Datenbankschemas

      Wenn Sie Ihre Anwendung jetzt bereitstellen, wird ein Fehler ausgegeben, da Sie die Anwendung noch mit einer Datenbank verbinden müssen. In diesem Abschnitt richten Sie eine Verbindung mit der Datenbank ein und verwenden dann den Befehl adonis zur Erzeugung einer Migrationsdatei, die zur Erstellung der Tabellen für die Datenbank verwendet wird.

      AdonisJs enthält ein ORM namens Lucid ORM, das eine aktive Datensatz-Implementierung für die Arbeit mit Ihrer Datenbank bereitstellt. Damit entfällt das mühsame Schreiben von SQL-Abfragen, die Daten in Echtzeit aus der Datenbank abrufen. Dies ist besonders hilfreich bei der Arbeit an einer komplexen Anwendung, die viele Abfragen erfordert. So können Sie beispielsweise alle Zitate aus Ihrer Anwendung abrufen, indem Sie eingeben:

      const quotes = await Quote.all()
      

      Um mit der entsprechenden Konfiguration für Ihre Anwendungsdatenbank fortzufahren, stellen Sie sicher, dass Sie sich immer noch im Stammverzeichnis Ihrer Anwendung befinden und erstellen Sie eine .env-Datei:

      Öffnen Sie die neu erstellte Datei und fügen Sie den folgenden Inhalt hinzu:

      .env

      HOST=127.0.0.1
      PORT=3333
      NODE_ENV=development
      APP_URL=http://${HOST}:${PORT}
      CACHE_VIEWS=false
      APP_KEY=bTVOEgUvmTCfkvgrK8gEBC3Qxt1xSYr0
      DB_CONNECTION=mysql
      DB_HOST=127.0.0.1
      DB_PORT=3306
      DB_USER=sammy
      DB_PASSWORD=password
      DB_DATABASE=adonis
      SESSION_DRIVER=cookie
      HASH_DRIVER=bcrypt
      

      Standardmäßig ist die Datenbankverbindung für eine AdonisJs-Anwendung SQLite, die Sie hier auf MySQL aktualisieren werden. Des Weiteren geben Sie den PORT für die Anwendung, die Anwendungsumgebung und Berechtigungsnachweise für die Datenbank an. Stellen Sie sicher, dass Sie die Platzhalter DB_USER, DB_PASSWORD und DB_DATABASE mit Ihren Berechtigungsnachweisen ersetzen.

      Als Nächstes erstellen Sie das Modell und eine Migrationsdatei für Quote unter Verwendung der Adonis CLI. Führen Sie dazu den folgenden Befehl aus:

      • adonis make:model Quote --migration

      Sie sehen eine Ausgabe, die der folgenden ähnelt:

      Output

      ✔ create app/Models/Quote.js ✔ create database/migrations/1568209992854_quote_schema.js

      Dieser Befehl erstellt ein Modell für Quote im Ordner app/Models und eine Schemadatei in dem Ordner database/migrations. Der neu erstellten Schemadatei wird der aktuelle Zeitstempel vorangestellt. Öffnen Sie die Schemadatei mit:

      • nano database/migrations/1568209992854_quote_schema.js

      Aktualisieren Sie den Inhalt mit dem folgenden Code:

      database/migrations/…quote_schema.js

      'use strict'
      /** @type {import('@adonisjs/lucid/src/Schema')} */
      const Schema = use('Schema')
      class QuoteSchema extends Schema {
        up () {
          this.create('quotes', (table) => {
            table.increments()
            table.integer('user_id').notNullable()
            table.string('username', 80).notNullable()
            table.string('body').notNullable()
            table.timestamps()
          })
        }
        down () {
          this.drop('quotes')
        }
      }
      module.exports = QuoteSchema
      

      Eine Schemadatei in AdonisJs erfordert zwei verschiedene Methoden:

      • up: Wird verwendet, um eine neue Tabelle zu erstellen oder eine bestehende Tabelle zu ändern.
      • down: Wird verwendet, um die bei der Methode up vorgenommene Änderung rückgängig zu machen.

      Zusätzlich zu den Feldern timestamps() und increments() aktualisieren Sie den Inhalt der Schemadatei mit den Feldattributen user_id, username und dem body eines zu erstellenden Zitats. Die Felder user_id und username verweisen auf die Details des Benutzers, der ein bestimmtes Zitat erstellt. Dies definiert eine 1:n-Beziehung und bedeutet, dass ein Benutzer eine unendliche Anzahl von Zitaten besitzen kann, während ein einzelnes Zitat nur einem Benutzer gehören kann.

      Speichern und schließen Sie die Datei.

      AdonisJs wird standardmäßig mit Modell User und der zugehörigen Migrationsdatei installiert. Dies erfordert nur eine kleine Änderung, um die Beziehung zwischen dem Modell User und Quote herzustellen.

      Öffnen Sie das Modell User in app/Models/User.js:

      Fügen Sie diese Methode unmittelbar nach der Methode tokens() hinzu:

      app/Models/User.js

      ...
      class User extends Model {
        ...
        tokens () {
          return this.hasMany('App/Models/Token')
        }
      
        quote () {
          return this.hasMany('App/Models/Quote')
        }
      }
      
      module.exports = User
      

      Dadurch wird eine 1:n-Beziehung mit der Tabelle Quote unter Verwendung von user_id als Fremdschlüssel festgelegt.

      Speichern und schließen Sie die Datei.

      Um diesen Abschnitt abzuschließen, verwenden Sie den folgenden Befehl zur Ausführung von Migrationen, wodurch die Methode up() aller Migrationsdateien ausgeführt wird:

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      migrate: 1503248427885_user.js migrate: 1503248427886_token.js migrate: 1568209992854_quote_schema.js Database migrated successfully in 3.42 s

      Sie haben eine Verbindung mit Ihrer Datenbank konfiguriert und gesichert. Des Weiteren haben Sie ein Modell Quote und die dazugehörige Schemadatei erstellt und eine 1:n-Beziehung zwischen User und Quote hergestellt. Als Nächstes generieren Sie die Routen und Controller zur Bearbeitung von HTTP-Anfragen und die Geschäftslogik zum Erstellen, Bearbeiten und Löschen eines inspirierenden Zitats.

      Schritt 4 – Erstellen von Controllern und Einrichten von Routen

      In diesem Abschnitt beginnen Sie mit der Erstellung von Controllern, die die gesamte Logik für die Anwendung verarbeiten und diese später an eine bestimmte Route anhängen, damit die Benutzer über eine URL darauf zugreifen können.

      Zu Beginn werden Sie mit der Adonis CLI einen neuen HTTP-Request-Controller erstellen, der alle Authentifizierungsprozesse für Ihre Anwendung verarbeiten kann, indem Sie den folgenden Befehl ausführen:

      • adonis make:controller Auth --type http

      Dieser Befehl erstellt eine Datei AuthController.js und speichert sie innerhalb des Ordners app/Controllers/Http. Sie verwenden das Flag --type, um anzugeben, dass dieser Controller ein HTTP-Controller sein soll.

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      ✔ create app/Controllers/Http/AuthController.js

      Öffnen Sie als Nächstes die neu erstellte Controller-Datei:

      • nano app/Controllers/Http/AuthController.js

      Aktualisieren Sie sie mit dem folgenden Inhalt:

      app/Controllers/Http/AuthController.js

      'use strict'
      const User = use('App/Models/User')
      class AuthController {
      
          loginView({ view }) {
              return view.render('auth.login')
          }
          registrationView({ view }) {
              return view.render('auth.register')
          }
      
          async postLogin({ request, auth, response}) {
              await auth.attempt(request.input('email'), request.input('password'))
              return response.route('index')
          }
      
          async postRegister({ request, session, response }) {
              const user = await User.create({
                  username: request.input('name'),
                  email: request.input('email'),
                  password: request.input('password')
              })
              session.flash({ successmessage: 'User have been created successfully'})
              return response.route('login.create');
          }
      
          async logout ({ auth, response }) {
              await auth.logout()
              return response.route("https://www.digitalocean.com/")
          }
      }
      module.exports = AuthController
      

      In dieser Datei importieren Sie das Modell User und erstellen dann zwei Methoden namens loginView() und registerView(), um die Anmelde- bzw. Registrierungsseite zu rendern. Abschließend erstellen Sie die folgenden asynchronen Methoden:

      • postLogin(): Mit dieser Methode erhalten Sie den Wert von email und password, die mit Hilfe der in AdonisJs eingebauten Methode request gepostet wurden, und validieren dann diesen Benutzer anhand der Details in der Datenbank. Wenn ein solcher Benutzer in der Datenbank existiert und den korrekten Berechtigungsnachweis eingegeben hat, wird er zurück auf die Homepage umgeleitet und authentifiziert, bevor er ein neues Zitat erstellen kann. Andernfalls wird eine Meldung angezeigt, die auf den falschen Berechtigungsnachweis hinweist.
      • postRegister(): Dies erhält den Wert von username, email und password für einen Benutzer, um ein Konto für diesen Benutzer in der Datenbank zu erstellen. Eine Nachricht mit der Angabe, dass dieser Benutzer erfolgreich erstellt wurde, wird an die Sitzung weitergeleitet, und der Benutzer wird auf die Anmeldeseite umgeleitet, um authentifiziert zu werden und mit der Erstellung eines Zitats zu beginnen.
      • logout(): Diese Methode verarbeitet die Logout-Funktionalität und leitet den Benutzer zurück auf die Homepage.

      Speichern und schließen Sie die Datei.

      Nachdem Sie nun den Controller für die Registrierung und Authentifizierung von Benutzern eingerichtet haben, fahren Sie mit der Erstellung eines HTTP-Request-Controllers für die Verwaltung aller Operationen in Bezug auf Zitate fort.

      Führen Sie, zurück im Terminal, den folgenden Befehl aus, um den QuoteController zu erstellen:

      • adonis make:controller Quote --type http --resource

      Die Verwendung des Flags --resource erstellt einen Controller mit vordefinierten kreativen Methoden zur Durchführung von CRUD (Create, Read, Update und Delete)-Operationen.

      Sie sehen:

      Output

      ✔ create app/Controllers/Http/QuoteController.js

      Finden Sie diese Datei innerhalb von app/Controllers/Http/QuoteControllers.js:

      • nano app/Controllers/Http/QuoteController.js

      Aktualisieren Sie sie mit dem folgenden Inhalt:

      app/Controllers/Http/QuoteController.js

      'use strict'
      const Quote = use('App/Models/Quote')
      
      class QuoteController {
      
        async index ({ view }) {
          const quote = await Quote.all()
          return view.render('index', {
            quotes: quote.toJSON()
          })
        }
      
        async create ({ view }) {
          return view.render('quotes.create-quote')
        }
      
        async store ({ request,auth,session, response }) {
          const quote = await Quote.create({
            user_id: auth.user.id,
            username: auth.user.username,
            body: request.input('body')
          })
          session.flash({ 'successmessage': 'Quote has been created'})
          return response.redirect("https://www.digitalocean.com/")
        }
      
        async show ({ params, view }) {
          const quote = await Quote.find(params.id)
          return view.render('quotes.view-quote', {
            quote: quote.toJSON()
          })
        }
      
        async edit ({ params, view }) {
          const quote = await Quote.find(params.id)
          return view.render('quotes.edit-quote', {
            quote: quote.toJSON()
          })
        }
      
        async update ({ params, request, response, session }) {
          const quote = await Quote.find(params.id)
          quote.body = request.input('body')
          await quote.save()
          session.flash({'successmessage': 'Quote has been updated'})
          return response.redirect("https://www.digitalocean.com/")
        }
      
        async destroy ({ params, response, session }) {
          const quote = await Quote.find(params.id)
          await quote.delete()
          session.flash({'successmessage': 'Quote has been deleted'})
          return response.redirect("https://www.digitalocean.com/")
        }
      }
      module.exports = QuoteController
      

      In diesem Controller haben Sie das Modell Quote importiert und die folgenden Methoden aktualisiert, die automatisch mit AdonisJs CLI erstellt wurden:

      • index(): Um alle Zitate aus der Datenbank zu holen und sie auf der Homepage der Anwendung darzustellen.
      • create(): Um eine Seite zum Erstellen von Zitaten darzustellen.
      • store(): Um ein neu erstelltes Zitat dauerhaft in der Datenbank zu speichern und eine entsprechende Antwort zurückzugeben.
      • show(): Um die id eines bestimmten Zitats zu erhalten, es aus der Datenbank abzurufen und auf der Seite zur Bearbeitung von Zitaten anzuzeigen.
      • edit(): Um Details eines bestimmten Zitats aus der Datenbank abzurufen und zur Bearbeitung darzustellen.
      • update(): Um jede Aktualisierung eines Zitats zu verarbeiten und den Benutzer zurück auf die Homepage zu leiten.
      • destroy(): Um ein bestimmtes Zitat zu löschen und vollständig aus der Datenbank zu entfernen.

      Speichern und schließen Sie die Datei.

      Nachdem Sie alle erforderlichen Controller für diese Anwendung erstellt haben, können Sie nun die Routen so einrichten, dass die Benutzer problemlos mit Ihrer Anwendung interagieren können. Navigieren Sie zu Beginn zu der Datei start/routes.js:

      Ersetzen Sie den Inhalt mit dem folgenden:

      start/routes.js

      'use strict'
      const Route = use('Route')
      
      Route.get("https://www.digitalocean.com/",'QuoteController.index').as('index')
      Route.get('/register','AuthController.registrationView').as('register.create')
      Route.post('/register-store','AuthController.postRegister').as('register.store').validator('Register')
      Route.get('/login','AuthController.loginView').as('login.create')
      Route.post('/login-store','AuthController.postLogin').as('login.store')
      Route.get('/view-quote/:id','QuoteController.show').as('view.quote')
      
      Route.group(() => {
          Route.get('/create-quote','QuoteController.create').as('create.quote')
          Route.post('/store-quote','QuoteController.store').as('store.quote')
          Route.get('/edit-quote/:id','QuoteController.edit').as('edit.quote')
          Route.post('/update-quote/:id','QuoteController.update').as('update.quote')
          Route.get('/delete-quote/:id','QuoteController.destroy').as('delete.quote')
          Route.post('/logout','AuthController.logout').as('logout')
      }).middleware(['auth'])
      

      Hier definieren Sie den Pfad für jede Route in Ihrer Anwendung, geben die HTTP-Verben für jede Aktion an und binden die Route an eine bestimmte Methode in jedem Controller. Außerdem benennen Sie jede dieser Routen so, wie sie in den Controllern und Ansichten referenziert wurden.

      Um sicherzustellen, dass nur authentifizierte Benutzer auf alle Zitatrouten zugreifen können, ordnen Sie eine Gruppe namens Middleware zu. Schließlich hängen Sie eine Validierer-Methode an die Route register.store an, um die Benutzereingaben zu validieren.

      Speichern und schließen Sie die Datei.

      Sie haben Ihre Controller erstellt und die Routen für Ihre Anwendung eingerichtet. Als Nächstes erstellen Sie die in diesem Schritt definierte Validierer-Methode.

      Schritt 5 – Validieren der Benutzereingabe

      Standardmäßig verfügt AdonisJs nicht über integrierte Validierer. Daher müssen Sie den Validierer für Ihre Anwendung manuell installieren und registrieren.

      Führen Sie den folgenden Befehl aus, um ihn zu installieren:

      Öffnen Sie die folgende Datei, um den Anbieter des Validieres (Validator Provider) zu registrieren:

      Registrieren Sie dann den Anbieter des Validieres, indem Sie ihn an die Liste der Anbieter anhängen, wie nachfolgend gezeigt:

      start/app.js

      ...
      const providers = [
         ...
         '@adonisjs/cors/providers/CorsProvider',
         '@adonisjs/shield/providers/ShieldProvider',
         '@adonisjs/session/providers/SessionProvider',
         '@adonisjs/auth/providers/AuthProvider',
         '@adonisjs/validator/providers/ValidatorProvider'
      ]
      

      Nachdem Sie den Anbieter des Validieres innerhalb Ihrer Anwendung installiert und registriert haben, erstellen Sie nun mit dem folgenden Befehl einen benutzerdefinierten Validierer, um die Eingabe des Benutzers während der Registrierung zu validieren:

      • adonis make:validator Register

      Dadurch wird eine Datei Register.js im Verzeichnis App/Validators erstellt. Öffnen Sie die Datei mit:

      • nano app/Validators/Register.js

      Fügen Sie den folgenden Code zur Datei hinzu:

      app/Validators/Register.js

      'use strict'
      class Register {
        get rules () {
          return {
            name:'required',
            email:'required|email|unique:users',
            password:'required|min:8'
          }
        }
      
        get messages(){
          return{
            'name.required':'Full name is required',
            'email.required':'email is required',
            'email.unique':'email already exists',
            'password.required':'password is required',
            'password.min':'password should be at least 8 characters'
          }
        }
      }
      module.exports = Register
      

      In Ihrer Anwendung definieren Sie Regeln für bestimmte Felder. Wenn Validierungen zu einem beliebigen Zeitpunkt fehlschlagen, setzt der Validierer den Fehler automatisch als Flash-Meldung und der Benutzer wird zurück zum Formular geleitet.

      Speichern und schließen Sie die Datei, sobald Sie die Bearbeitung abgeschlossen haben.

      Um Ihrer Anwendung ein Design hinzuzufügen, öffnen Sie schließlich die folgende Datei:

      Ersetzen Sie die Inhalte mit dem folgenden:

      /public/style.css

      @import url('https://fonts.googleapis.com/css?family=Montserrat:300');
      
      html, body {
        height: 100%;
        width: 100%;
      }
      
      body {
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        background-image: url("/splash.png");
        background-color: #220052;
      }
      
      * {
        margin: 0;
        padding: 0;
      }
      
      a {
        color: inherit;
        text-decoration: underline;
      }
      
      p {
        margin: 0.83rem 0;
      }
      
      .quote-wrapper {
        margin-top: 20px;
      }
      
      .quote-wrapper a {
        text-decoration: none;
      }
      
      .quote-wrapper a:hover {
        color: #ffffff;
      }
      
      .empty-quote {
        color: #ffffff;
      }
      
      form {
        padding: 20px;
      }
      

      In dieser Datei aktualisieren Sie das CSS-Design Ihrer Anwendung in der Datei style.css.

      Sie haben einen Anbieter eines Validieres installiert und registriert, um die Eingabe von Benutzern während des Registrierungsvorgangs zu überprüfen. Des Weiteren haben Sie den Inhalt Ihres Stylesheets aktualisiert, um der Anwendung mehr Design hinzuzufügen. Im letzten Schritt testen Sie Ihre Anwendung.

      Schritt 6 – Bereitstellen der Anwendung

      In diesem Schritt stellen Sie Ihre Anwendung bereit und erstellen einen Benutzer und ein Passwort zum Testen der Authentifizierung. Außerdem fügen Sie Ihrer Anwendung ein Zitate hinzu und zeigen es auf der Homepage an.

      Um Ihre Anwendung zu testen, starten Sie den Entwicklungsserver mit dem folgenden Befehl aus dem Stammverzeichnis Ihrer Anwendung:

      Dadurch wird die Anwendung auf dem innerhalb der Stammdatei .env definierten Port, 3333, gestartet. Navigieren Sie in Ihrem Browser zu http://localhost:3333.

      Homepage der Zitat-Anwendung

      Die Homepage ist zur Zeit leer, da Sie keine Zitate erstellt haben. Klicken Sie auf die Schaltfläche Register.

      Anmeldeseite

      Geben Sie Ihre Informationen ein und klicken Sie auf die Schaltfläche Submit, um den Registrierungsvorgang abzuschließen. Sie werden auf die Anmeldeseite umgeleitet. Geben Sie Ihre E-Mail-Adresse und Ihr Passwort für die Authentifizierung ein.

      Anmeldeseite

      Nachdem Sie authentifiziert sind, klicken Sie auf die Schaltfläche Create Quote.

      Seite „Zitat erstellen“

      Geben Sie ein Zitat ein und navigieren Sie zu der Seite View all, um Ihr Zitat anzuzeigen.

      Seite „Alle Zitate anzeigen“

      Sie haben Ihre Anwendung getestet, indem Sie einen Benutzer erstellt und authentifiziert und anschließend ein Zitat verfasst haben.

      Zusammenfassung

      In diesem Tutorial haben Sie eine Webanwendung mit AdonisJs erstellt. Sie haben die Anwendung unter Verwendung der AdonisJs CLI eingerichtet und die CLI zum Erstellen anderer relevanter Dateien wie Controller, Modelle und Ansichten verwendet.

      Sie können Webanwendungen mit diesem Framework unabhängig von Ihrer Größe und Komplexität erstellen. Sie können den Quellcode für dieses Projekt hier auf GitHub herunterladen. Um weitere Funktionen zu erkunden, können Sie auch die offizielle Dokumentation besuchen.

      Wenn Sie einige unserer anderen JavaScript-Framework-Tutorials erkunden möchten, sehen Sie sich Folgendes an:



      Source link