recherche

Maison >interface Web >tutoriel CSS >Ruby on Rails Frontend Rapide avec Frameworks CSS Classless ou Class-Light comme CDN

Ruby on Rails Frontend Rapide avec Frameworks CSS Classless ou Class-Light comme CDN

Barbara Streisand
Barbara Streisandoriginal
2025-01-13 10:20:43699parcourir

Ruby on Rails Frontend Rápido com Frameworks CSS Classless ou Class-Light sem CDN

Cet article traite du même sujet que l'article précédent, mais là où l'article précédent utilisait un framework CSS hébergé sur CDN, cet article utilisera des fichiers CSS locaux et les copiera dans le dossier du projet.

Créer une nouvelle application Rails

  • rails serve Le temps avant la commande est utilisé pour afficher la durée totale d'exécution de la commande. L'exemple suivant a pris 47 secondes. 
<code>$ rails -v
Rails 8.0.0

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

Rails 8, basé sur sa philosophie « sans construction », utilise Prop Shaft comme bibliothèque de pipeline d'actifs et Importmap comme bibliothèque JavaScript par défaut. Importmap ne fait rien avec JavaScript.

Ouvrez le projet à l'aide de VSCode ou de votre éditeur préféré

<code>$ rails -v
Rails 8.0.0

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

En savoir plus sur la disposition par défaut de Rails app/views/layouts/application.html.erb

Développer…- Suivant le principe de la convention sur la configuration (CoC), Rails utilise `application.html.erb` comme mise en page par défaut pour afficher toutes les pages ; - Le contenu du fichier original dans Rails 8 doit être identique ou similaire à : 
<code>$ cd classless-css-local && code .</code>
    La partie supérieure de la balise
  • <head> contient des éléments structurels importants pour le rendu des pages et le fonctionnement normal. La balise <head> est utilisée pour contenir des métadonnées et des ressources importantes qui aident à configurer le comportement de la page (à l'aide de JavaScript), l'apparence (à l'aide de CSS), l'association avec d'autres systèmes et services et la configuration de la sécurité, telle que la protection CSRF et CSP
    • Le contenu principal de la page sera rendu à l'intérieur de
  • via la balise ERB. Cette balise sert de point d'intégration pour contenir le contenu de la vue rendu dynamiquement par Rails <body> ;
Générer des pages de test à l'aide du contrôleur de pages et des actions html_test_1, html_test_2, html_test_3 et html_test_4

Agrandir… ```bash $ rails g pages du contrôleur html_test_1 html_test_2 html_test_3 html_test_4 créer app/controllers/pages_controller.rb route récupère "pages/html_test_1" récupérez "pages/html_test_2" récupérez "pages/html_test_3" récupérez "pages/html_test_4" invocateurb créer une application/des vues/des pages créer app/views/pages/html_test_1.html.erb créer app/views/pages/html_test_2.html.erb créer app/views/pages/html_test_3.html.erb créer app/views/pages/html_test_4.html.erb invoquer l'assistant créer app/helpers/pages_helper.rb ```
    Étant donné que les routes sont également ajoutées lors de la création de contrôleurs et d'actions, vous pouvez accéder à toutes les actions créées via le lien suivant :
  • localhost:3000/pages/html_test_1
  • localhost:3000/pages/html_test_2
  • localhost:3000/pages/html_test_3
  • localhost:3000/pages/html_test_4
Utilisez VSCode pour ouvrir le

fichierconfig/routes.rb

    Ajoutez les lignes suivantes à la fin du fichier pour pointer la racine de la page vers le contrôleur de pages précédemment créé et l'action html_test_1. De cette façon, lorsque vous accédez à votre site Web ou à votre système, la première page affichée sera la page html_test_1 du contrôleur de pages. Sinon, la page par défaut de Rails sera affichée. 
<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>
    Si le paramètre
  • est passé lors de la création du contrôleur, vous pouvez ignorer l'ajout de routes pour l'action créée.La commande complète deviendra rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Afficher les itinéraires Rails

Développer…À l'aide du terminal, vous pouvez spécifier un contrôleur (en utilisant `-c`) pour afficher les routes, par exemple le contrôleur de pages : 
<code>$ rails -v
Rails 8.0.0

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

Vous pouvez également utiliser la commande suivante pour afficher tous les itinéraires : 

<code>$ cd classless-css-local && code .</code>
  • Vous pouvez également accéder à l'itinéraire via votre navigateur en utilisant l'adresse http://127.0.0.1:3000/rails/info/routes. N'oubliez pas de démarrer le serveur de développement en utilisant bin/dev ou le serveur Rails standard en utilisant rails server à la racine du projet. Le serveur de développement « écoute » les modifications apportées aux fichiers JavaScript et CSS afin d'effectuer le traitement nécessaire et de les transmettre à l'utilisateur.
  • Pour que les modifications apportées à ces fichiers soient reflétées instantanément dans le navigateur, une gemme telle que Rails Live Reload doit être installée.

Nous allons créer quatre pages avec du contenu HTML pour tester les styles CSS.

Ruby on Rails utilise par défaut l'architecture MVC (Model-View-Controller) pour lancer l'organisation du projet. La plupart du code est organisé dans les dossiers suivants :

  • Lorsque le code est lié à la logique et aux données du domaine/métier, veuillez le sauvegarder dans le dossier app/models
    •  ;
  • Le code lié à l'affichage (HTML, JSON, XML, etc.) sera placé dans le dossier app/views
    •  ;
  • Le code lié au cycle de vie de la requête sera placé dans le dossier app/controllers
    •  ;

En raison du manque d'espace, les étapes suivantes seront omises. Veuillez noter que ce qui précède a été pseudo-originalisé à partir du texte original et conserve le format et l'emplacement d'origine de l'image. Un pseudo-original complet nécessiterait une réécriture similaire du reste.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript ruby bash mvc ruby on rails 架构 json css html csrf xml class vscode http
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Déverrouiller la gemme secrète dans une division centrée.Article suivant：Déverrouiller la gemme secrète dans une division centrée.

Articles Liés

Voir plus