suchen

Heim >Web-Frontend >CSS-Tutorial >Schnelles Ruby on Rails-Frontend mit Tailwind als klassenloses CSS-Framework

Schnelles Ruby on Rails-Frontend mit Tailwind als klassenloses CSS-Framework

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2025-01-15 10:44:45426Durchsuche

Ruby on Rails Frontend Rápido Usando Tailwind como um Frameworks CSS Classless

Dieser Artikel ist den vorherigen Artikeln dieser Serie sehr ähnlich, aber dieses Mal werden wir das Tailwind-Framework als klassenloses CSS-Framework verwenden.

Erstellen Sie eine neue Rails-Anwendung

  • rails serve Das time vor dem Befehl wird verwendet, um die Gesamtzeit der Befehlsausführung anzuzeigen. Das folgende Beispiel dauerte 47 Sekunden. 
<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Rails 8 verwendet standardmäßig Propshaft als Ressourcen-Pipeline-Bibliothek und Importmap als JavaScript-Bibliothek, basierend auf seiner „No Build“-Philosophie. Importmap führt keine JavaScript-Verarbeitung durch.

Öffnen Sie das Projekt mit VSCode oder Ihrem bevorzugten Editor

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Grundlegendes zum Rails-Standardlayout app/views/layouts/application.html.erb

Erweitern…- Gemäß dem Prinzip „Convention over Configuration“ (CoC) verwendet Rails „application.html.erb“ als Standardlayout zum Rendern aller Seiten. - Der ursprüngliche Dateiinhalt in Rails 8 sollte gleich oder ähnlich sein wie: 
<code>$ cd classless-css-tailwind && code .</code>
    Das
  • <head>-Tag enthält wichtige Strukturelemente für die Seitendarstellung und das ordnungsgemäße Funktionieren. <head> Wird verwendet, um Metadaten und wichtige Ressourcen zu enthalten, die dabei helfen, das Verhalten der Seite (mithilfe von JavaScript), das Erscheinungsbild (mithilfe von CSS), die Verknüpfung mit anderen Systemen und Diensten sowie Sicherheitseinstellungen wie CSRF- und CSP-Schutz zu konfigurieren; Der Hauptinhalt der
    • -Seite wird innerhalb des
  • über das ERB-Tag gerendert. Dieses Tag dient als Integrationspunkt für die Aufnahme von Ansichtsinhalten, die von Rails dynamisch gerendert werden <body>
Generieren Sie eine Testseite mit dem
-Controller und den Aktionen

, pages, html_test_1 und html_test_2html_test_3 html_test_4

Erweitern…
„Bash $ Rails G-Controller-Seiten html_test_1 html_test_2 html_test_3 html_test_4 Erstellen Sie app/controllers/pages_controller.rb Route holen Sie sich „pages/html_test_1“ Holen Sie sich „pages/html_test_2“ Holen Sie sich „pages/html_test_3“ Holen Sie sich „pages/html_test_4“ invokeerb App/Ansichten/Seiten erstellen Erstellen Sie app/views/pages/html_test_1.html.erb Erstellen Sie app/views/pages/html_test_2.html.erb Erstellen Sie app/views/pages/html_test_3.html.erb Erstellen Sie app/views/pages/html_test_4.html.erb Helfer aufrufen Erstellen Sie app/helpers/pages_helper.rb „ Da beim Erstellen von Controllern und Aktionen auch Routen hinzugefügt werden, können alle erstellten Aktionen über den folgenden Link aufgerufen werden:
  • localhost:3000/pages/html_test_1
  • localhost:3000/pages/html_test_2
  • localhost:3000/pages/html_test_3
  • localhost:3000/pages/html_test_4
    • Verwenden Sie VSCode, um die
Datei

zu öffnen config/routes.rb

Fügen Sie am Ende der Datei die folgenden Zeilen hinzu, um den Seitenstamm auf den zuvor erstellten
    -Controller und die
  • -Aktion zu leiten. Auf diese Weise wird beim Zugriff auf Ihre Website oder Ihr System als erste Seite die Seite pages des html_test_1-Controllers angezeigt. Andernfalls wird die Standardseite von Rails angezeigt. pages html_test_1 
<code class="language-html">
    <title></title><meta content="width=device-width,initial-scale=1" name="viewport"></meta><meta content="yes" name="apple-mobile-web-app-capable"></meta><meta content="yes" name="mobile-web-app-capable"></meta><link href="/icon.png" rel="icon" type="image/png"></link><link href="/icon.svg" rel="icon" type="image/svg+xml"></link><link href="/icon.png" rel="apple-touch-icon"></link></code>
Wenn der Parameter
    beim Erstellen des Controllers übergeben wird, können Sie das Hinzufügen von Routen für die erstellte Aktion ignorieren.Der vollständige Befehl wird zu rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Rails-Routen anzeigen

Erweitern…Mit dem Terminal können Sie einen Controller (mit „-c“) angeben, um die Route anzuzeigen, zum Beispiel den „pages“-Controller: 
<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Alternativ können Sie den folgenden Befehl verwenden, um alle Routen anzuzeigen: 

<code>$ cd classless-css-tailwind && code .</code>
  • Sie können die Route auch über Ihren Browser unter der Adresse http://127.0.0.1:3000/rails/info/routes aufrufen. Vergessen Sie nicht, den Entwicklungsserver mit bin/dev oder Standard rails server im Projektstammverzeichnis zu starten. Der Entwicklungsserver „lauscht“ auf Änderungen an JavaScript-Dateien und CSS-Dateien, um die erforderliche Verarbeitung durchzuführen, um sie dem Benutzer bereitzustellen.
  • Damit Änderungen an diesen Dateien sofort ausgeführt und im Browser angezeigt werden können, muss ein Gem wie Rails Live Reload installiert werden.

Wir werden vier Seiten mit HTML-Inhalten erstellen, um CSS-Stile zu testen.

Ruby on Rails verwendet standardmäßig die MVC-Architektur (Model-View-Controller), um die Projektorganisation zu initiieren. Der größte Teil des Codes ist in den folgenden Ordnern organisiert:

  • Code, der sich auf Domänen-/Geschäftslogik und Daten bezieht, sollte im Ordner app/models gespeichert werden
    • Anzeigebezogener Code (HTML, JSON, XML usw.) befindet sich im Ordner
  • ; app/viewsCode, der sich auf den Anforderungslebenszyklus bezieht, befindet sich im Ordner
  • app/controllersFügen Sie den Inhalt der
    • Seite
ein

html_test_1Erweitern…

- Besuchen Sie den Link https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html und kopieren Sie den gesamten Inhalt innerhalb von „
“. Tag, wie unten gezeigt
Fügen Sie den Inhalt der 
<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>
Seite
ein

html_test_2Erweitern…

- Besuchen Sie den Link https://gist.github.com/tommaitland/5865229 und kopieren Sie den gesamten Inhalt innerhalb des `
`-Tags, wie unten gezeigt Eine Beispielformularlegende
<code>$ cd classless-css-tailwind && code .</code>
Name: E-Mail: Schaltfläche: Einzelnes Kontrollkästchen:
Kontrollkästchen 1: Kontrollkästchen 2: Kontrollkästchen 3: Kontrollkästchen 4:
Datum: Datum, Uhrzeit (lokal): Datei: Bild: Monat: Nummer: Passwort: Einzelnes Radio:
Radio 1: Radio 2: Radio 3: Radio 4:
Zurücksetzen: Zeit: Suche: Tel: Text: URL: Woche: Wählen Sie 1: Wählen Sie 2: Mehrere auswählen: Gruppen auswählen: TestTestTestTestTestTest Datenliste:
- Öffnen Sie die Datei „app/views/pages/html_test_2.html.erb“ und fügen Sie den oben kopierten Inhalt ein Fügen Sie den Inhalt der
Seite
ein

html_test_3Erweitern...

Besuchen Sie den Link https://github.com/cbracco/html5-test-page/blob/master/index.html und kopieren Sie den gesamten Inhalt nach dem `
`-Tag, wobei der Text „“ enthalten ist

Das obige ist der detaillierte Inhalt vonSchnelles Ruby on Rails-Frontend mit Tailwind als klassenloses CSS-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript ruby bash mvc ruby on rails 架构 json html5 css html csrf select checkbox date xml number this github vscode http https
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Galadriel CSS und Nenyr verstehen: Ein umfassender Leitfaden zum deklarativen StilNächster Artikel：Galadriel CSS und Nenyr verstehen: Ein umfassender Leitfaden zum deklarativen Stil

In Verbindung stehende Artikel

Mehr sehen