Eksterne synspunkter og stilarter i Sinatra

Selvom det er muligt at lave et websted med Sinatra i en enkelt fil er dette virkelig en dårlig idé, da problemet er, at jo mere komplekst vores websted er, jo sværere vil det være at navigere i den fil, og derfor, når der opstår en fejl, desto vanskeligere bliver det at rette det .
Ideen bag at bruge en ramme som Sinatra det er for at kunne forenkle vores arbejde, mens vi drager fordel af alle de værktøjer, der tilbydes os i pakken, og også inkorporerer vores måde at arbejde på, hvilket gør det meget sandsynligt, at det ikke er noget at bruge en enkelt fil til alt i vores filosofi.
Derfor kan vi begynde at arbejde med eksterne visninger og stilarter, så hver visning, vi har brug for, er i en separat fil, som vi for det første lettere kan opdage fejl og for det andet organisere i en meget mere praktisk struktur i vores projekt .
1- Vi skal have sprog først Rubin downloadet, installeret og konfigureret i vores udviklingsmiljø.
2- Internetadgang for at kunne downloade nogle af de ressourcer, som vi vil angive i eksemplerne.
3- Tilstrækkelige tilladelser til at skrive nye filer og oprette mapper, udover at kunne eksekvere filer med Rubin.
4- En teksteditor for at kunne skrive den kode, som vi vil bruge til filerne, det kan være Sublim tekst eller NotePad ++, men det, vi kender, tjener vores formål.
Det HTML I projektets hovedfil anbefales det ikke, medmindre vores websted er statisk eller midlertidigt, og vi skal straks gå på markedet med noget, da denne praksis, som vi har nævnt, gør vores kode ikke læsbar, og at den ikke kan vedligeholdes i tide ordentligt.
For at overvinde dette problem, der opstår, Sinatra giver os mulighed for at oprette eksterne visninger, som ikke er andet end filer .erb hvor vi vil placere HTML svarende til vores opfattelse, hvor Sinatra Ved routing af den oprettede visning vil den straks søge efter disse filer, og med dette vil svaret for brugeren blive genereret. Lad os i følgende kode se, hvordan vi har oprettet en ekstern visning, så vores projekt viser brugeren nogle oplysninger.
Først, hvad vi vil gøre, er at oprette en fil kaldet rektor.rb og der skaber vi vores grundstruktur, som vi vil se nedenfor:

 kræve 'sinatra' get '/' do erb: start end get '/ on' do erb: on end get '/ contact' do erb: contact end

Indtil videre repræsenterer dette ikke noget nyt, hvis vi allerede har set vejledningen til de første trin med Sinatra, her er det, vi gør, at importere biblioteket med kræve og endelig definerer vi de ruter, visningerne vil returnere, alle med metoden FÅ HTTP.
Nu skal vi oprette en fil kaldet layout.erb og vi kommer til at placere det i en ny mappe kaldet visninger som skal være i den samme mappe, hvor vi har oprettet vores fil rektor.rb, lad os se den kode, som vores fil vil indeholde layout.erb:

Start
Om mig
Kontakt

Nu i samme mappe visninger at vi lige har oprettet, vil vi generere en ny fil for at kunne teste vores eksempel, i dette tilfælde vil vi kalde det denne fil hjem.erb og det har dette navn, fordi en af ​​vores ruter er defineret i rektor.rb har dette navn, for at afslutte i denne fil vil vi placere følgende kode:

Velkommen til min hjemmeside, her ser vi, hvordan vores første eksterne visning Sinatra fungerer

Hvis vi kigger godt efter, indser vi, at det ikke er mere end HTML. Når dette er afsluttet, går vi nu bare til kommandokonsollen og kører vores nye applikation, for dette skal vi kun udføre følgende:

 rubin rektor. rb

Hvad denne kommando gør, er at hæve den integrerede udviklingswebserver WEBrick som vi ser på følgende billede:

Når denne handling er udført, kan vi navigere til vores side med en ekstern visning, for dette vil vi gå til adressen lokal vært: 4567, hvilket giver os et resultat som det, vi kan se på følgende billede:

FORSTØRRE

Da vi har oprettet vores første eksterne visning, har vi stadig nogle ting at forklare, og dette er projektets struktur, da det som standard er Sinatra forvente en struktur, at hvis vi følger den, skal vi ikke gøre noget andet, men hvis det ikke er til vores smag, kan vi ændre det.
GrundstrukturGrundstrukturen er en hovedfil, der er hvor rammen er inkluderet, og ruterne oprettes, så har vi to ekstra mapper, den ene kaldes visninger som er den vi bruger til at gemme vores filer .erb der svarer til visningerne og en mappe offentlig hvor vi vil gemme de forskellige statiske filer som .css eller .js.
Hvis vi ser følgende billede, kan vi sætte pris på den grundstruktur, vi genererede til anvendelsen af ​​det foregående eksempel:

Her ser vi, at hovedmappen i vores projekt kaldes sinatra, så har vi vores fil ved roden af ​​dette rektor.rb, og endelig har vi de to mapper, som vi har nævnt, med mappen visninger vises for at vise de to filer, som vi oprettede i det foregående eksempel.
Hvad nu hvis vi ikke vil bruge standardnavnene på Sinatra da vores applikation af en eller anden grund skal have andre mapper, som vi ganske enkelt angiver det i filen rektor.rb som følger:
sæt: public_folder, 'staticMed denne instruktion fortæller vi Sinatra det nu i stedet for at søge efter en mappe offentlig, skal du kigge efter en mappe ved navn Statisk.
sæt: visninger, 'skabelonerMed denne instruktion fortæller vi Sinatra det i stedet for at søge visninger søg efter skabeloner.
Med dette har vi allerede overskrevet den måde, hvorpå rammerne håndterer disse filer, hvilket giver os mere frihed over vores projekt.
Nu hvor vi forstår, hvordan strukturen i vores applikation fungerer, vil vi inkludere stilarterne, til dette kan vi anvende flere tilgange, men den mest anbefalede er at oprette en generel fil, der gælder for alle visninger. Selvom vi kan anvende tilgangen til at skabe vores CSS manuelt vil vi i dette eksempel forklare, hvordan du tilføjer Bootstrap og dermed har et mere solidt udgangspunkt.
Først og fremmest skal vi downloade rammerne for Bootstrap og gem den resulterende mappe i vores bibliotek offentlig eller statisk i tilfælde af at vi har fulgt instruktionerne for navneændringen i forklaringen af ​​mappestrukturen. Så i vores fil layout Vi kommer til at ændre indholdet af etiketten lidt for at kunne inkludere de nødvendige biblioteker til driften af Bootstrap, lad os se de anvendte ændringer:

Når vi har inkluderet bibliotekerne af Bootstrap vi vil ændre vores HTML For at give det en struktur, der er mere i overensstemmelse med rammen, kan vi mere direkte bemærke ændringen af ​​stilarter på vores websted:

Start
Om mig
Kontakt

Hvis vi ser, har vi ændret nogle ting, først og fremmest i etiketten, vi har inkluderet bibliotekerne i Bootstrap, så har vi skabt en stil, der kun gælder inden for layout.erb for elementer, der har id stil, i tilfælde af dette eksempel anvender vi det på elementet og til sidst ved hjælp af komponenterne i Bootstrap vi tilføjer klassen nav nav-faner at vise vores menu i form af faner.
Vi genstarter vores server fra WEBrick og vi indtaster den angivne sti, som vores applikation kører i, som skal se ud som følger med de anvendte ændringer:

Som vi kan se, har vi effektivt anvendt en stil på vores webapplikation lavet med SinatraSelvfølgelig er der stadig meget arbejde, så denne applikation er mere i overensstemmelse med et produktionsmiljø, men med denne base er det meget lettere at eksperimentere og tilføje funktionaliteter, der vil give os en meget mere komplet udvikling.
Således afslutter vi denne vejledning, som vi har lært at organisere vores projekt ved at bruge eksterne visninger, der definerer en mappestruktur og gør vores applikation meget mere attraktiv ved at inkorporere stilarter, men ikke kun almindelig CSS, men vi har indarbejdet rammerne Bootstrap hvilket hjælper os med at skabe meget mere attraktive brugergrænseflader uden en masse hovedpine.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt