・ Le tutoriel Rails est la 4ème édition ・ Cette étude est le 3e tour (2e tour après le chapitre 9) ・ L'auteur est un débutant qui a fait tout Progate
・ Si vous le lisez, vous ne le comprendrez pas. ・ Recherchez et résumez les termes que vous ne comprenez pas (en bas de l'article, glossaire). ・ Plongez dans ce que vous ne comprenez pas. ・ Travaillez sur tous les exercices. ・ Ne copiez pas le code autant que possible.
Maintenant le chapitre 5. Il s'agit de la phase de développement à grande échelle. Cliquez ici pour la chanson d'aujourd'hui. Luby Sparks "Pop.1979" Différence rubis. J'ai hâte d'entendre le son de cette impulsion initiale.
Comme je l'avais prédit dans Chapitre 1, je n'ai pas suivi le cours Sass de Progate, donc je l'ai terminé rapidement. C'est une notation pour éliminer la duplication du code, faciliter l'écriture et répondre aux changements.
Bootstrap est là. Le plan est Cet article peut être facile à comprendre. Bref, il s'agit de faciliter le développement web en appelant celui dont le comportement est défini à l'avance. Il prend également en charge la conception réactive sans difficulté.
$ curl -OL cdn.learnenough.com/kitten.jpg
2. Utilisez la commande mv pour déplacer le fichier kitten.jpg téléchargé vers le répertoire de ressources approprié (référence: 5.2.1). → Allez dans le répertoire images avec la commande suivante
$ mv kitten.jpg app/assets/images
ruby:home.html.erb
<%= link_to image_tag("kitten.jpg ", alt: "cute kitten") %>
Je ne suis toujours pas sûr de CSS, donc cela prendra du temps, mais vérifions l'opération à chaque fois que j'en saisis un. C'est plus facile que de tout copier et de commenter un par un. Et comme c'est ennuyeux, je vais faire quelque chose qui peut être imbriqué à ce stade. Je pense que je nichais quelque part après ça. Faisons-le d'abord, puis reprenons les réponses plus tard.
2. Ajoutez le code du Listing 5.11 à custom.scss et essayez de cacher toutes les images. Espérons que le logo Rails disparaîtra de votre page d'accueil. Utilisez la fonction Inspecteur comme précédemment pour voir que cette fois le code source HTML reste et que seule l'image n'est plus affichée. → C'est vrai. Je le cache simplement avec CSS. Je vais juste faire ceci, donc je vais omettre les détails.
Partiel = partiel. Cela peut être plus facile à comprendre si vous imaginez un réfrigérateur partiel. L'image de le stocker séparément du gashacon là-bas. Si vous découpez les parties qui sont utilisées sur d'autres pages ou celles qui sont couramment utilisées sur toutes les pages et que vous les enregistrez individuellement. Est-il appelé (rendu) au besoin?
2. Je n'ai pas encore fait de partiel comme le Listing 5.18, donc le test devrait être rouge à ce stade. Lançons le test et vérifions-le. → Sora RED.
3. Créez un partiel pour la balise head dans le répertoire layouts, écrivez le code que vous avez enregistré précédemment et vérifiez enfin que le test redevient vert. → Créez le fichier suivant et partiel! (Le test est également VERT)
ruby:_rails_default.html.erb
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Un pipeline d'actifs que je pense difficile à comprendre. Cette phrase est-elle importante? «Vous n'avez pas à vous soucier de« vous concentrer sur l'efficacité du développement ou le temps de chargement ». Gardez-le organisé pour les programmeurs dans l'environnement de développement et utilisez Asset Pipeline dans l'environnement de production pour minimiser les fichiers. Tu dois juste le faire. " En bref, est-ce une image de passage d'objets épars à travers un tube mince? Dans le processus, il aimerait organiser les fichiers, éliminer les éléments inutiles et les minimiser.
En regardant la liste des variables LESS, @ gray-light est plus clair (@ gray-base, 46,7%) au lieu de # 777. Mais est-ce une différence de version? Ce n'est pas grave car la couleur réelle ne semble pas changer (les autres couleurs par défaut sont-elles les mêmes)? 。
custom.scss
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $gray-medium-light;
color: $gray-light;
a {
color: $gray;
&:hover {
color: $gray-darker;
}
}
small {
float: left;
}
ul {
float: right;
li {
float: left;
margin-left: 15px;
}
}
}
Au début, la route nommée (○○ _path) ne semblait pas correcte, mais il est habituel de l'écrire comme ceci car les rails ont une telle fonction et il est facile de répondre aux changements. Cela et compréhension. Quand il devient possible de l'utiliser en définissant le routage.
〇〇_path: renvoie la chaîne de caractères sous l'URL racine. En gros, utilisez ceci 〇〇_url: renvoie la chaîne de caractères de l'URL complète. Utilisé uniquement pour les redirections.
2. Assurez-vous que le test est rouge en raison du changement précédent. Veuillez mettre à jour le routage comme indiqué dans l'extrait 5.28 pour rendre le test vert. → Naturellement ROUGE. Si vous changez le test en helf_path, il sera VERT.
3. Utilisez l'opérateur de comparaison == pour vérifier que les objets créés dans les deux tâches ci-dessus sont identiques. → Remettons-le.
Présentation du test d'intégration. «Les tests d'intégration vous permettent de simuler et de tester le comportement de bout en bout de votre application.» Écrivons en pensant au déroulement des opérations. Pour les tests, la documentation Rails peut être utile. (Le lien est pour Rails 6) assert_select est flexible, mais il est sage de s'en tenir au point de tester les éléments HTML (tels que les liens) qui changent fréquemment dans votre mise en page. Vous l'avez également couvert dans le Glossaire du chapitre 3. Oups, y a-t-il une erreur ici? Quand je l'ai recherché, la destination du lien était quelque chose comme "root_path". Puisque 〇〇_path est une méthode, '' n'est pas nécessaire. C'était un simple oubli.
2. Comme indiqué dans l'extrait 5.35, il est pratique de rendre l'assistant full_title utilisé dans l'assistant d'application disponible dans l'environnement de test. De cette façon, vous pouvez tester le titre correct avec un code comme l'extrait 5.36. Cependant, ce n'est pas un test parfait. Par exemple, une faute de frappe dans le titre de base, telle que «Ruby on Rails Tutoial», ne serait pas détectée par ce test. Pour résoudre ce problème, nous devons écrire un test pour l'assistant full_title. Alors, créez un fichier pour tester l'assistant d'application et remplacez la partie FILL_IN du Listing 5.37 par le code approprié. Astuce: Dans le Listing 5.37, nous avons utilisé assert_equal
test/helpers/application_helper_test.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
routes.rb
Rails.application.routes.draw do
get 'users/new'
root 'static_pages#home'
get '/help', to: 'static_pages#help'
get '/about', to: 'static_pages#about'
get '/contact', to: 'static_pages#contact'
get '/signup', to: 'users#new'
end
La prochaine fois que je l'ai lu, c'était juste.
2. Pour confirmer que le test précédent fonctionne correctement, commentez la partie racine d'inscription et vérifiez que le test est rouge. Si vous pouvez le confirmer, décommentez-le et remettez-le à l'état vert. → Essayez-le.
3. Ajoutez le code pour accéder à la page d'inscription au test d'intégration du Listing 5.32 (en utilisant la méthode get). Après avoir ajouté le code, exécutez le test et assurez-vous que le résultat est correct. Astuce: essayez d'utiliser l'assistant full_title présenté dans l'extrait 5.36. → Probablement pas, mais j'ai également ajouté un test pour vérifier s'il existe un lien Sing up. Je ferai également ce que je dois faire pour confirmer mes connaissances.
site_layout_test.rb
require 'test_helper'
class SiteLayoutTest < ActionDispatch::IntegrationTest
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
assert_select "a[href=?]", signup_path
get contact_path
assert_select "title", full_title("Contact")
get signup_path
assert_select "title", full_title("Sign up")
end
end
・ Bootstrap est pratique, mais j'entends qu'il n'est pas surutilisé. ・ Les chats sont universels et mignons. ・ Sass est pratique. Le code est rafraîchissant. -Apparence partielle et rafraîchissante. ・ Asset Pipeline optimise les actifs (images, CSS, JS, etc.) sans autorisation. -Si vous définissez le routage, vous pouvez utiliser 〇〇_path et 〇〇_url. -Le test d'intégration peut tester l'opération comme le déplacement entre les pages. Simulons l'opération.
Le chapitre 5 est terminé. Au troisième tour, j'ai enfin pu en saisir le contenu. heureux. Au chapitre 6, nous allons créer un modèle utilisateur.
⇨ Allez au chapitre 6! ⇦ Cliquez ici pour le chapitre 4 Cliquez ici pour les conditions préalables et le statut de l'auteur pour l'apprentissage
・ Commentaire conditionnel Une instruction conditionnelle dans le code source HTML que vous pouvez utiliser pour transmettre ou masquer du code à Microsoft Internet Explorer. Il a été aboli depuis IE10.
· Site Web adaptatif Une conception dans laquelle le format d'affichage change en fonction du terminal / navigateur à afficher. Même sur le même site Web, la taille des caractères et du contenu peut changer entre les smartphones et les PC. Celui qui est souvent dit réactif.
・ Assert_template Testez si le modèle spécifié dans l'action est représenté.
・ Assert_equal
assert_equal Teste si les deux valeurs sont égales sous la forme de
Recommended Posts