Ruby on Rails Frontend Rapide avec Frameworks CSS Classless ou Class-Light comme CDN-tutoriel CSS-php.cn

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

Barbara Streisand

Libérer： 2025-01-13 10:20:43

original

695 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

<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
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 ```

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

fichier`config/routes.rb`

<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>

Copier après la connexion

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>

Copier après la connexion

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

<code>$ cd classless-css-local && code .</code>

Copier après la connexion

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!