Außenansichten und Stile in Sinatra

Obwohl es möglich ist, eine Website mit zu erstellen Sinatra in einer einzigen Datei ist dies wirklich eine schlechte Idee, da das Problem darin besteht, dass die Navigation in dieser Datei umso schwieriger ist, je komplexer unsere Website ist, und daher wird es umso schwieriger, wenn ein Fehler auftritt, ihn zu korrigieren .
Die Idee hinter der Verwendung eines Frameworks wie Sinatra Es geht darum, unsere Arbeit zu vereinfachen, während wir alle Werkzeuge nutzen, die uns im Paket angeboten werden, und auch unsere Arbeitsweise einbeziehen, was es sehr wahrscheinlich macht, dass die Verwendung einer einzigen Datei für alles nicht selbstverständlich ist in unserer Philosophie.
Deshalb können wir mit der Arbeit an externen Ansichten und Stilen beginnen, sodass jede benötigte Ansicht in einer separaten Datei vorliegt, mit der wir erstens Fehler leichter erkennen und zweitens die Struktur unseres Projekts viel praktischer organisieren können .
1- Wir müssen zuerst die Sprache haben Rubin heruntergeladen, installiert und in unserer Entwicklungsumgebung konfiguriert.
2- Internetzugang, um einige der Ressourcen herunterladen zu können, die wir in den Beispielen angeben werden.
3- Ausreichende Berechtigungen zum Schreiben neuer Dateien und Erstellen von Ordnern sowie zum Ausführen von Dateien mit Rubin.
4- Ein Texteditor, um den Code schreiben zu können, den wir für die Dateien verwenden werden, kann es sein Erhabener Text oder NotePad ++, aber was auch immer wir kennen, erfüllt unseren Zweck.
Das HTML In der Hauptdatei des Projekts wird es nicht empfohlen, es sei denn, unsere Site ist statisch oder temporär und wir müssen sofort mit etwas auf den Markt gehen, da diese Praxis, wie bereits erwähnt, unseren Code nicht lesbar macht und nicht gewartet werden kann rechtzeitig richtig.
Um dieses auftretende Problem zu überwinden, Sinatra bietet uns die Möglichkeit, externe Ansichten zu erstellen, die nichts anderes als Dateien sind .erb wo werden wir die platzieren HTML entsprechend unserer Ansicht, wo Sinatra Beim Routing der erstellten Ansicht wird sofort nach diesen Dateien gesucht und damit die Antwort für den Benutzer generiert.Sehen wir uns im folgenden Code an, wie wir eine externe Ansicht erstellt haben, damit unser Projekt dem Benutzer einige Informationen anzeigt.
Zuerst erstellen wir eine Datei namens Principal.rb und dort erstellen wir unsere Basisstruktur, wie wir unten sehen werden:

 erfordern 'sinatra' get '/' do erb: start end get '/ on' do erb: on end hol '/contact' do erb: contact end

Bisher stellt dies nichts Neues dar, wenn wir bereits das Tutorial der ersten Schritte mit Sinatra gesehen haben, hier importieren wir die Bibliothek mit benötigen und schließlich definieren wir die Routen, die die Ansichten zurückgeben, alle mit der Methode BEKOMMEN HTTP-.
Jetzt erstellen wir eine Datei namens layout.erb und wir werden es in einem neuen Ordner namens . ablegen Ansichten die sich im selben Verzeichnis befinden muss, in dem wir unsere Datei erstellt haben Principal.rb, sehen wir uns den Code an, den unsere Datei enthalten wird layout.erb:

Start
Über mich
Kontakt

Jetzt im selben Ordner Ansichten die wir gerade erstellt haben, erstellen wir eine neue Datei, um unser Beispiel testen zu können, in diesem Fall nennen wir es diese Datei home.erb und es hat diesen Namen, weil eine unserer Routen definiert in Principal.rb diesen Namen hat, werden wir zum Abschluss in dieser Datei den folgenden Code einfügen:

Willkommen auf meiner Website, hier sehen wir, wie unsere erste Außenansicht Sinatra funktioniert

Wenn wir genau hinsehen, stellen wir fest, dass es nichts anderes ist als HTML. Nachdem dies abgeschlossen ist, gehen wir jetzt einfach zur Befehlskonsole und führen unsere neue Anwendung aus, dazu müssen wir nur Folgendes ausführen:

 ruby Principal.rb

Mit diesem Befehl wird der integrierte Entwicklungs-Webserver aktiviert WEBrick wie wir im folgenden Bild sehen:

Sobald diese Aktion abgeschlossen ist, können wir mit einer externen Ansicht zu unserer Seite navigieren, dazu gehen wir zu der Adresse localhost: 4567, was uns ein Ergebnis wie das im folgenden Bild zu sehen gibt:

VERGRÖSSERN

Da wir unsere erste Außenansicht erstellt haben, müssen wir noch einiges erklären, und das ist der Aufbau des Projekts, da standardmäßig Sinatra erwarten Sie eine Struktur, dass wir nichts anderes tun sollten, wenn wir ihr folgen, aber wenn es uns nicht gefällt, können wir sie ändern.
GrundstrukturDie Basisstruktur ist eine Hauptdatei, in der das Framework enthalten ist und die Routen erstellt werden, dann haben wir zwei zusätzliche Ordner, einen namens Ansichten Welches ist dasjenige, das wir verwenden, um unsere Dateien zu speichern .erb die den Ansichten und einem Ordner entsprechen öffentlich Hier werden die verschiedenen statischen Dateien wie .css oder .js gespeichert.
Wenn wir das folgende Bild sehen, können wir die Grundstruktur erkennen, die wir für die Anwendung des vorherigen Beispiels generiert haben:

Hier sehen wir, dass der Hauptordner unseres Projekts heißt sinatra, dann an der Wurzel davon haben wir unsere Datei Principal.rb, und schließlich haben wir die beiden erwähnten Ordner mit dem Ordner Ansichten angezeigt, um die beiden Dateien anzuzeigen, die wir im vorherigen Beispiel erstellt haben.
Was ist nun, wenn wir nicht die Standardnamen von verwenden möchten Sinatra da unsere Anwendung aus irgendeinem Grund andere Ordner haben muss, wie wir es einfach in der Datei angeben Principal.rb wie folgt:
set: public_folder, 'statischMit dieser Anleitung erzählen wir Sinatra das jetzt anstatt nach einem Ordner zu suchen öffentlich, sollten Sie nach einem Ordner namens Static suchen.
Set: Ansichten, "Vorlagen"Mit dieser Anweisung sagen wir Sinatra, dass anstatt zu suchen Ansichten nach Vorlagen suchen.
Damit haben wir bereits die Art und Weise überschrieben, wie das Framework mit diesen Dateien umgeht, was uns mehr Freiheit für unser Projekt gibt.
Nachdem wir nun verstanden haben, wie die Struktur unserer Anwendung funktioniert, werden wir die Stile einbeziehen. Dazu können wir verschiedene Ansätze anwenden. Am meisten wird jedoch empfohlen, eine allgemeine Datei zu erstellen, die für alle Ansichten gilt. Obwohl wir den Ansatz anwenden können, unsere CSS manuell erklären wir in diesem Beispiel, wie man Bootstrap hinzufügt und somit einen solideren Ausgangspunkt hat.
Zuerst müssen wir das Framework von . herunterladen Bootstrap und speichern Sie den resultierenden Ordner in unserem Verzeichnis öffentlich oder statisch für den Fall, dass wir die Hinweise zur Namensänderung in der Erläuterung der Ordnerstruktur befolgt haben. Dann in unserer Datei Layout Wir werden den Inhalt des Labels ein wenig ändern, um die notwendigen Bibliotheken für den Betrieb von einbinden zu können Bootstrap, sehen wir uns die vorgenommenen Änderungen an:

Nachdem wir die Bibliotheken von Bootstrap wir werden unsere modifizieren HTML Um ihm eine dem Rahmen entsprechende Struktur zu geben, können wir damit den Stilwechsel auf unserer Website direkter bemerken:

Start
Über mich
Kontakt

Wenn wir schauen, haben wir einige Dinge geändert, vor allem haben wir in das Etikett die Bibliotheken von aufgenommen Bootstrap, dann haben wir einen Stil erstellt, der nur innerhalb gilt layout.erb für Elemente mit der ID Stil, in diesem Beispiel wenden wir es auf das Element an und verwenden schließlich die Komponenten von Bootstrap wir fügen die klasse hinzu nav nav-tabs um unsere Speisekarte in Form von Registerkarten anzuzeigen.
Wir starten unseren Server neu von WEBrick und wir geben den bereitgestellten Pfad ein, in dem unsere Anwendung läuft, der mit den vorgenommenen Änderungen wie folgt aussehen sollte:

Wie wir sehen, haben wir effektiv einen Stil auf unsere Webanwendung angewendet, der mit . erstellt wurde SinatraNatürlich gibt es noch viel zu tun, damit diese Anwendung einer Produktionsumgebung besser entspricht, aber mit dieser Basis ist es viel einfacher zu experimentieren und Funktionen hinzuzufügen, die uns eine viel vollständigere Entwicklung ermöglichen.
Damit beenden wir dieses Tutorial, mit dem wir gelernt haben, unser Projekt zu organisieren, indem wir externe Ansichten verwenden, die eine Ordnerstruktur definieren und unsere Anwendung durch die Einbindung von Stilen, aber nicht nur reinem CSS, sondern auch das Framework viel attraktiver machen Bootstrap was uns hilft, ohne viel Kopfzerbrechen viel attraktivere Benutzeroberflächen zu erstellen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben