Cet article approfondit ma compréhension en écrivant un article de commentaire du tutoriel Rails pour solidifier davantage mes connaissances Cela fait partie de mon étude. Dans de rares cas, un contenu ridicule ou un contenu incorrect peut être écrit. Notez s'il vous plaît. J'apprécierais que vous me disiez implicitement ...
La source Tutoriel Rails 6e édition
Le style n'est pas appliqué à la vue créée précédemment, utilisez donc Bootstrap pour l'organiser. Vous découvrirez également les fonctionnalités de la vue, telles que les partiels et le pipeline d'actifs.
Bootstrap publié par Twitter facilite l'application de conceptions sophistiquées sans avoir à étudier beaucoup le CSS. Faites bon usage de Bootstrap et appliquez des styles.
Je vais expliquer brièvement le code clé.
-``` [If It IE 9] `` `: Appel d'un commentaire conditionnel. Soutenu par IE. Cette fois, j'ai utilisé le shim HTML5 pour le lire sous IE9.
-``` Link_to "link_text", "URL" `` `: l'un des assistants Rails. Créez un lien. Vous pouvez également spécifier une route nommée dans l'URL.
-La balise
-CSS class container, nav, etc. ont une signification particulière dans Bootstrap (nécessaire pour appliquer le style Bootstrap).
$ 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")%> à la dernière ligne de home.html.erbBootstrap est également très pratique en ce sens que vous pouvez facilement appliquer des styles simplement en spécifiant la classe. Il est trop pratique de pouvoir prendre en charge une conception réactive. Normalement, vous devez définir un style pour chaque point d'arrêt pour chaque point d'arrêt. Bootstrap le fait pour vous.
SCSS s'appelle Sass. Un langage qui étend le CSS. Un code qui facilite l'écriture du CSS, tel que l'imbrication de style.
Une petite explication sur la façon de lire le CSS.
body{
}
Lorsqu'il est inclus de cette manière, le style de la balise "body" est appliqué.
.center{
}
Lorsqu'il est entouré de mots avec., Le style de la classe centrale CSS est appliqué.
#logo{
}
Lorsque # est ajouté comme ceci, le style est appliqué au logo de l'identifiant CSS.
Le sélecteur CSS de base ressemble à ceci.
C'est pratique car la ligne entière sélectionnée par Ctrl + / est commentée. Ne vous précipitez pas pour étudier dans un environnement Windows.
Cela devient un CSS qui cache toutes les balises img.
Si le trait de soulignement_ est placé au début du nom de fichier, il est traité comme partiel. Exemple> _header.html.erb etc. En utilisant des partiels, il est pratique de rendre la mise en page plus facile à voir et de la diviser en groupes pour chaque fonction.
Les partiels sont chargés dans la vue à l'aide de la méthode de rendu. N'incluez pas de traits de soulignement dans le nom du fichier lors de l'appel avec render.
Remplacez la balise
par<% = render'layouts / head '%> ``.
Template :: Error se produit car le partiel à lire par la méthode de rendu n'a pas été créé.
Créez un nouveau head.html.erb et collez le contenu de la balise head.
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>
Vous pouvez indiquer comment organiser les actifs à partir du fichier manifeste. Le processus de regroupement des actifs est effectué par une gemme appelée Sprockets.
*= require_tree .La description précise que tous les fichiers de l'arborescence doivent être rassemblés dans le CSS de l'application.
Les fichiers tels que Sass, CoffeeScript (un langage d'extension de JavaScript) et ERB sont convertis via le moteur du préprocesseur.
Les convertis sont combinés par le fichier manifeste.
En utilisant le pipeline d'actifs
-Combinez un grand nombre de fichiers en un seul.
-Retirez les blancs inutiles et affichez dans un état minimisé et optimisé.
Grâce à ce type de traitement, vous pouvez bénéficier d'avantages tels qu'une réduction du temps de chargement dans le navigateur.
#### Feuille de style avec une excellente syntaxe
Ce que vous pouvez faire avec Sass (SCSS)
・ Nid
Vous pouvez imbriquer et écrire des choses qui devraient normalement être écrites avec un sélecteur séparé.
En d'autres termes
```css
div{
color: #eee;
}
div.container{
width: 200px;
}
La description
div{
color: #eee;
.container{
width: 200px;
}
}
Il peut être imbriqué comme ça. La sur-imbrication est NG, mais l'utilisation d'une imbrication modérée a pour effet de réduire l'effort de codage et de rendre la structure plus facile à comprendre.
·variable Les valeurs en double telles que les codes de couleur CSS peuvent être stockées dans des variables.
valeur;Vous pouvez définir des variables avec.
##### Exercice
1. [Liste 5.20 du didacticiel Rails, 6e édition](https://railstutorial.jp/chapters/filling_in_the_layout?version=6.0#code-refactored_scss)
### Lien de mise en page
Liste des routes nommées qui peuvent être utilisées pour l'instant
|Nom de la page|URL|Route nommée|
|:--|:--|:--|
|Home|/|root_path|
|About|/about|about_path|
|Help|/help|help_path|
|Contact|/contact|contact_path|
[From Rails Tutorial Chapter 6](https://railstutorial.jp/chapters/filling_in_the_layout?version=6.0#table-url_mapping)
#### Page de contact
Je l'ai fait avant de le savoir au chapitre 3, alors je l'ai omis ()
L'URL Ichiou est incluse. → https://railstutorial.jp/chapters/filling_in_the_layout?version=6.0#sec-contact_page
#### URL racine de Rails
Vous pouvez spécifier le routage de / en définissant l'URL racine
Vous pourrez utiliser des méthodes d'assistance telles que root_path et root_url.
Ces deux méthodes renvoient une URL
root_path → Renvoie un chemin relatif. Parce que c'est root /
root_url → Renvoie le chemin absolu. Parce que c'est root, https://www.example.com/
Peu importe celui que vous utilisez, selon qu'il s'agit d'un chemin relatif ou d'un chemin absolu.
Dans Rails, il existe une règle selon laquelle la spécification de lien au moment de la redirection utilise un chemin absolu. (Bien que cela fonctionne avec un chemin relatif)
*** _ Méthode URL lors de la redirection
Sinon, spécifiez-le avec la méthode *** _ path.
La page d'accueil et la page d'aide sont les pages de base de l'application, je souhaite donc placer l'URL en haut.
Actuellement, il est un peu gênant de mettre static_pages dans / static_pages / help et URL.
Je vais le changer pour que je puisse voler avec / help.
```ruby
get '/help', to: 'static_pages#help'
get '/about', to: 'static_pages#about'
get '/contact', to: 'static_pages#contact'
En réécrivant le routage de cette manière Les itinéraires nommés pour l'aide, à propos et le contact seront définis, et les URL telles que / help seront liées à l'itinéraire spécifié par à:.
Si vous modifiez le routage, la méthode que vous avez utilisée dans le test deviendra ancienne et le test ne passera pas. Faites quelques corrections.
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. Après la mise à jour du routage
get helf_pathEt réécrivez la méthode de test.
En d'autres termes, vous pouvez changer le nom de la route nommée avec l'option as. (La valeur par défaut est URL)
Le helf de route est associé à l'action help du contrôleur static_pages lors de l'accès à / help. veux dire
Maintenant que vous avez défini une route nommée, vous pouvez utiliser la méthode d'assistance correspondante Pour le moment, je vais réécrire la partie lien qui a été remplacée par # par une route nommée.
<%= link_to "contact", 'contact_path' %>
Réécrivez les liens tels que les en-têtes et les pieds de page comme celui-ci.
Dans l'exercice précédent, j'ai oublié de revenir à la racine de helf, donc je peux simplement le définir comme helf_path.
Ctrl + Z est pratique pour revenir comme avant (utilisateurs Windows uniquement) À propos, il y a deux endroits où helf_path est utilisé: static_pages_controller_test.rb et _header.html.erb. Bien sûr, modifiez le fichier routes.rb défini selon qu'il s'agit de helf ou help. Je n'utiliserai plus helf, alors revenons en arrière pour aider.
Supprimez la description de as: 'helf'in routes.rb.
Remplacez helf_path dans static_pages_controller_test.rb par help_path
Remplacez helf_path dans _header.html.erb par help_path
Vous pouvez vérifier manuellement chaque lien pour voir si chaque lien de la mise en page fonctionne correctement. Il est plus facile et plus fiable de tester automatiquement. Dans ce cas, je veux vérifier tous les liens de static_pages, donc j'écrirai un test d'intégration.
Voici le code que j'ai écrit pour le test d'intégration que j'ai ajouté cette fois
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
J'envoie une requête GET au chemin racine pour voir si j'ai vu la vue d'accueil et voir si chaque lien existe.
Ici, assert_select est utilisé un peu plus avancé. Ressemble à Si vous mettez le chemin du lien dans le deuxième argument, il ne sera affecté qu'à la pièce? count: 2 vérifie simplement s'il y a deux de ces éléments. Une méthode simple si vous la connaissez.
Il existe de nombreuses autres façons de l'utiliser. Quelques exemples d'utilisation d'assert_select (à partir de la 6e édition du didacticiel Rails)
En spécifiant l'intégration, il ne peut être exécuté que pour le test d'intégration, mais il s'agit essentiellement d'un test automatique de garde
```rails t```Même si vous exécutez tous les tests avec, il n'y a pas tellement de différence de temps d'exécution```rails t```Je pense que ça va.
Et ici mon test a eu une erreur
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
Apparemment, le nombre de liens URL racine attendus dans le code de test est de deux, mais en réalité il y en a trois.
Sauf le code et l'écran réel d'exécution de l'application
Apparemment, dans l'exercice scss que j'ai fait plus tôt
img{ display: none; }
Il semble qu'il y ait trois liens car je ne l'ai pas ajouté en sautant.
C'est ennuyeux, j'ai donc supprimé la ligne avec image_tag et elle a été guérie ()
De cette façon, vous pouvez facilement voir la partie erronée dans le résultat de l'exécution du test.
Écrivez le test comme il convient ...
##### Exercice
1. Similaire à l'exemple précédent
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>'
Le chemin vers / environ est 0, je suis en colère qu'il devrait y en avoir plus d'un.
Cela montre que la description de about_path est manquante.
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
Commencez à créer une page d'inscription utilisateur.
Créez un contrôleur d'utilisateurs avec la commande rails generate comme dans static_pages.
$ rails g controller users new
Corrigez la partie à l'origine de l'erreur de l'exercice précédent. Plus précisément, faites correspondre le code de test généré automatiquement au routage / signup.
users_controller_test.rb
test "should get new" do
get signup_path
assert_response :success
end
Le test passe en réécrivant dans signup_path de cette manière.
Après cela, appliquez signup_path au lien sur la page d'accueil Modifiez la page d'inscription générée automatiquement.
get signup_path
assert_select "title", full_title("Sign up")
Ajoutez ces deux lignes à site_layout_test.rb.
Validez et envoyez ce changement avec git comme d'habitude
Recommended Posts