Dieser Artikel vertieft mein Verständnis, indem er einen Kommentarartikel zum Rails-Tutorial schreibt, um mein Wissen weiter zu festigen Es ist Teil meines Studiums. In seltenen Fällen kann es lächerliche oder falsche Inhalte enthalten. Bitte beachten Sie. Ich würde es begrüßen, wenn Sie mir implizit sagen könnten ...
Quelle Rails Tutorial 6. Ausgabe
Der Stil wird nicht auf die zuvor erstellte Ansicht angewendet. Verwenden Sie daher Bootstrap, um ihn anzuordnen. Sie erfahren auch mehr über Funktionen rund um Ansichten wie Partials und Asset Pipeline.
Von Twitter veröffentlichtes Bootstrap kann leicht anspruchsvolle Designs anwenden, ohne viel CSS zu studieren. Nutzen Sie Bootstrap gut und wenden Sie Stile an.
Ich werde den Schlüsselcode kurz erklären.
-``` [If It IE 9] `` `: Ruft einen bedingten Kommentar auf. Unterstützt von IE. Dieses Mal habe ich HTML5 Shim verwendet, um es unter IE9 zu lesen.
-``` Link_to "link_text", "URL" `` `: Einer der Rails-Helfer. Erstellen Sie einen Link. Sie können auch eine benannte Route in der URL angeben.
-Das
-CSS-Klassencontainer, Navi usw. haben in Bootstrap eine besondere Bedeutung (erforderlich, um den Bootstrap-Stil anzuwenden).
$ curl -OL https://cdn.learnenough.com/kitten.jpg
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
100 138k 100 138k 0 0 194k 0 --:--:-- --:--:-- --:--:-- 395k
2.mv kitten.jpg app/assets/images/kitten.jpg
`<% = image_tag (" kitten.jpg ", alt:" kitten ")%>` in die unterste Zeile von home.html.erb einBootstrap ist auch insofern sehr praktisch, als Sie Stile einfach durch Angabe der Klasse anwenden können. Es ist zu bequem, um Responsive Design unterstützen zu können. Normalerweise müssen Sie für jeden Haltepunkt für jeden Haltepunkt einen Stil definieren. Bootstrap erledigt das für Sie.
SCSS heißt Sass. Eine Sprache, die CSS erweitert. Ein Code, der das Schreiben von CSS erleichtert, z. B. das Verschachteln von Stilen.
Eine kleine Erklärung zum Lesen von CSS.
body{
}
Wenn auf diese Weise eingeschlossen, wird der Stil für das "body" -Tag angewendet.
.center{
}
Wenn von Wörtern mit umgeben. Auf diese Weise wird der Stil für die CSS-Mittelklasse angewendet.
#logo{
}
Wenn # wie folgt hinzugefügt wird, wird der Stil auf das CSS-ID-Logo angewendet.
Der grundlegende CSS-Selektor sieht folgendermaßen aus.
Dies ist praktisch, da die gesamte mit Strg + / ausgewählte Zeile auskommentiert ist. Beeilen Sie sich nicht, in einer Windows-Umgebung zu lernen.
Es wird ein CSS, das alle img-Tags verbirgt.
Wenn der Unterstrich am Anfang des Dateinamens steht, wird er als Teil behandelt. Beispiel> _header.html.erb usw. Durch die Verwendung von Partials können Sie das Layout übersichtlicher gestalten und für jede Funktion in Gruppen unterteilen. Dies ist praktisch.
Partials werden mit der Rendermethode in die Ansicht geladen. Fügen Sie beim Aufrufen mit Render keine Unterstriche in den Dateinamen ein.
Ersetzen Sie das
-Tag durch`<% = render'layouts / head '%>`.
Template :: Error tritt auf, weil der von der Rendermethode zu lesende Teil nicht erstellt wurde.
Erstellen Sie eine neue head.html.erb und fügen Sie den Inhalt des head-Tags ein.
erb:head.html.erb
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application',
'data-turbolinks-track': 'reload' %>
<%= render 'layouts/shim' %>
</head>
Anhand der Manifestdatei können Sie erkennen, wie Assets organisiert werden. Das Gruppieren von Assets wird von einem Edelstein namens Sprockets durchgeführt.
*= require_tree .Die Beschreibung gibt an, dass alle Dateien in der Baumstruktur im Anwendungs-CSS zusammengestellt werden sollen.
Dateien wie Sass, CoffeeScript (eine Erweiterungssprache von JavaScript) und ERB werden über die Präprozessor-Engine konvertiert.
Die konvertierten werden durch die Manifestdatei kombiniert.
Durch Verwendung der Asset-Pipeline
- Kombinieren Sie eine große Anzahl von Dateien zu einer.
-Entfernen Sie unnötige Leerzeichen und zeigen Sie sie in einem minimierten und optimierten Zustand an.
Dank dieser Art der Verarbeitung können Sie Vorteile wie eine kürzere Ladezeit im Browser nutzen.
#### Stylesheet mit großartiger Syntax
Was können Sie mit Sass (SCSS) tun?
· Nest
Sie können Dinge verschachteln und schreiben, die normalerweise mit einem separaten Selektor geschrieben werden müssten.
Mit anderen Worten
```css
div{
color: #eee;
}
div.container{
width: 200px;
}
Die Beschreibung
div{
color: #eee;
.container{
width: 200px;
}
}
Es kann so verschachtelt werden. Überverschachtelung ist NG, aber die Verwendung einer moderaten Verschachtelung reduziert den Codierungsaufwand und erleichtert das Verständnis der Struktur.
·Variable Doppelte Werte wie CSS-Farbcodes können in Variablen gespeichert werden.
Wert;Sie können Variablen mit definieren.
##### Übung
1. [Rails Tutorial 6th Edition List 5.20](https://railstutorial.jp/chapters/filling_in_the_layout?version=6.0#code-refactored_scss)
### Layout-Link
Liste der benannten Routen, die vorerst verwendet werden können
|Seitenname|URL|Benannte Route|
|:--|:--|:--|
|Home|/|root_path|
|About|/about|about_path|
|Help|/help|help_path|
|Contact|/contact|contact_path|
[Aus Rails Tutorial Kapitel 6](https://railstutorial.jp/chapters/filling_in_the_layout?version=6.0#table-url_mapping)
#### Kontaktseite
Ich habe es getan, bevor ich es in Kapitel 3 wusste, also habe ich es weggelassen ()
Ichiou URL ist enthalten. → https://railstutorial.jp/chapters/filling_in_the_layout?version=6.0#sec-contact_page
#### Rails-Root-URL
Sie können das Routing von / angeben, indem Sie die rootURL definieren
Sie können Hilfsmethoden wie root_path und root_url verwenden.
Beide Methoden geben eine URL zurück
root_path → Gibt einen relativen Pfad zurück. Weil es root / ist
root_url → Gibt den absoluten Pfad zurück. Da es sich um root handelt, https://www.example.com/
Es spielt keine Rolle, welchen Sie verwenden, je nachdem, ob es sich um einen relativen oder einen absoluten Pfad handelt.
Rails hat die Regel, dass ein absoluter Pfad verwendet wird, um einen Link bei der Umleitung anzugeben. (Obwohl es mit einem relativen Pfad funktioniert)
*** _ URL-Methode bei der Umleitung
Andernfalls geben Sie es mit der Pfadmethode *** _ an.
Die Startseite und die Hilfeseite sind die Basisseiten der App, daher möchte ich die URL oben einfügen.
Derzeit ist es etwas mühsam, static_pages in / static_pages / help und URL abzulegen.
Ich werde es ändern, damit ich mit / help fliegen kann.
```ruby
get '/help', to: 'static_pages#help'
get '/about', to: 'static_pages#about'
get '/contact', to: 'static_pages#contact'
Indem Sie das Routing auf diese Weise neu schreiben Benannte Routen für Hilfe, Info und Kontakt werden festgelegt, und URLs wie / help werden mit der Route verknüpft, die durch Folgendes angegeben wird :.
Wenn Sie das Routing ändern, wird die im Test verwendete Methode alt und der Test wird nicht bestanden. Nehmen Sie einige Korrekturen vor.
test "should get help" do
get help_path
assert_response :success
assert_select "title", "Help | #{@base_title}"
end
test "should get about" do
get about_path
assert_response :success
assert_select "title", "About | #{@base_title}"
end
test "should get contact" do
get contact_path
assert_response :success
assert_select "title", "Contact | #{@base_title}"
end
1.2 Nach dem Aktualisieren des Routings
get helf_pathUnd schreiben Sie die Testmethode neu.
Mit anderen Worten, Sie können den Namen der benannten Route mit der Option as ändern. (Standard ist URL)
Die Routenhilfe ist der Hilfeaktion des Controllers static_pages beim Zugriff auf / help zugeordnet. meint
Nachdem Sie eine benannte Route definiert haben, können Sie die entsprechende Hilfsmethode verwenden Vorerst werde ich den Link-Teil, der durch # ersetzt wurde, durch eine benannte Route umschreiben.
<%= link_to "contact", 'contact_path' %>
Schreiben Sie solche Links wie Kopf- und Fußzeilen neu.
In der vorherigen Übung habe ich vergessen, zur Helf-Wurzel zurückzukehren, sodass ich sie einfach als helf_path definieren kann.
Strg + Z ist praktisch, wenn Sie wie zuvor zurückkehren (nur Windows-Benutzer). Es gibt übrigens zwei Stellen, an denen helf_path verwendet wird: static_pages_controller_test.rb und _header.html.erb. Bearbeiten Sie natürlich die definierten Routen.rb, je nachdem, ob es sich um Hilfe oder Hilfe handelt. Ich werde keine Hilfe mehr verwenden, also gehen wir zurück, um zu helfen.
Löschen Sie die Beschreibung von `` `as: 'helf'``` in route.rb.
Ändern Sie helf_path in static_pages_controller_test.rb in help_path
Ändern Sie helf_path in _header.html.erb in help_path
Sie können jeden Link manuell überprüfen, um festzustellen, ob jeder Link im Layout ordnungsgemäß funktioniert. Es ist einfacher und zuverlässiger, automatisch zu testen. In diesem Fall möchte ich alle Links von static_pages überprüfen, damit ich einen Integrationstest schreibe.
Hier ist der Code, den ich für den Integrationstest geschrieben habe, den ich dieses Mal hinzugefügt habe
test "layout links" do
get root_path
assert_template 'static_pages/home'
assert_select "a[href=?]",root_path, count: 2
assert_select "a[href=?]",help_path
assert_select "a[href=?]",about_path
assert_select "a[href=?]",contact_path
end
Senden Sie eine GET-Anforderung an den Stammpfad, um festzustellen, ob Sie die Startansicht gesehen haben und ob jeder Link vorhanden ist.
Hier wird assert_select etwas weiter fortgeschritten verwendet. Sieht aus wie Wenn Sie den Verknüpfungspfad in das zweite Argument einfügen, wird er nur dem? -Teil zugewiesen. count: 2 prüft nur, ob zwei dieser Elemente vorhanden sind. Eine einfache Methode, wenn Sie es wissen.
Es gibt viele andere Möglichkeiten, es zu verwenden. Einige Beispiele für die Verwendung von assert_select (aus der 6. Ausgabe des Rails-Tutorials)
Durch Angabe der Integration kann es nur für den Integrationstest ausgeführt werden, im Grunde handelt es sich jedoch um einen automatischen Schutztest
```rails t```Selbst wenn Sie alle Tests mit ausführen, gibt es keinen so großen Unterschied in der Ausführungszeit```rails t```Ich denke es ist okay.
Und hier hat mein Test einen Fehler bekommen
14:18:53 - INFO - Running: test/integration/site_layout_test.rb Running via Spring preloader in process 10766 Started with run options --seed 5553
FAIL["test_layout_links", #<Minitest::Reporters::Suite:0x000055eebbcd1e00 @name="SiteLayoutTest">, 1.4094162390028941] test_layout_links#SiteLayoutTest (1.41s) Expected exactly 2 elements matching "a[href="/"]", found 3.. Expected: 2 Actual: 3 test/integration/site_layout_test.rb:7:in `block in class:SiteLayoutTest'
1/1: [=====================================================] 100% Time: 00:00:01, Time: 00:00:01
Finished in 1.41642s 1 tests, 2 assertions, 1 failures, 0 errors, 0 skips
Anscheinend wird im Testcode zwei Root-URL-Links erwartet, in Wirklichkeit gibt es jedoch drei.
Außer dem Code und dem eigentlichen Anwendungsausführungsbildschirm
Anscheinend habe ich in der scss-Übung früher gemacht
img{ display: none; }
Es scheint, dass es drei Links gibt, weil ich sie nicht durch Überspringen hinzugefügt habe.
Es ist ärgerlich, also habe ich die Zeile mit image_tag gelöscht und sie wurde geheilt ()
Auf diese Weise können Sie den fehlerhaften Teil im Ergebnis der Testausführung leicht erkennen.
Schreiben Sie den Test entsprechend ...
##### Übung
1. Ähnlich wie im vorherigen Beispiel
Expected at least 1 element matching "a[href="/about"]", found 0..
Expected 0 to be >= 1.
test/integration/site_layout_test.rb:9:in `block in <class:SiteLayoutTest>'
Der Pfad zu / ungefähr ist 0, ich bin wütend, dass es mehr als einen geben sollte.
Dies zeigt, dass die Beschreibung von about_path fehlt.
2.
#### **`application_helper_test.rb`**
```rb
require 'test_helper'
class ApplicationHelperTest < ActionView::TestCase
test "full title helper" do
assert_equal full_title, "Ruby on Rails Tutorial Sample App"
assert_equal full_title("Help"), "Help | Ruby on Rails Tutorial Sample App"
end
end
Erstellen Sie eine Benutzerregistrierungsseite.
Erstellen Sie einen Benutzer-Controller mit dem Befehl Rails-Generierung wie in static_pages.
$ rails g controller users new
Korrigieren Sie den Teil, der den Fehler in der vorherigen Übung verursacht hat. Stellen Sie insbesondere sicher, dass der automatisch generierte Testcode dem / signup-Routing entspricht.
users_controller_test.rb
test "should get new" do
get signup_path
assert_response :success
end
Der Test wird auf diese Weise in signup_path umgeschrieben.
Wenden Sie danach signup_path auf den Link auf der Startseite an Bearbeiten Sie die automatisch generierte Anmeldeseite.
get signup_path
assert_select "title", full_title("Sign up")
Fügen Sie diese beiden Zeilen zu site_layout_test.rb hinzu.
Übernehmen und pushen Sie diese Änderung wie gewohnt mit git.
Recommended Posts