Eksterne synspunkter og stiler i Sinatra

Selv om det er mulig å lage et nettsted med Sinatra i en enkelt fil er dette virkelig en dårlig idé, siden problemet er at jo mer komplekst nettstedet vårt er, desto vanskeligere blir det å navigere i filen, og derfor er det vanskeligere å korrigere det når en feil oppstår .
Ideen bak å bruke et rammeverk som Sinatra det er for å kunne forenkle arbeidet vårt mens vi benytter oss av alle verktøyene som tilbys i pakken, og også inkluderer vår måte å jobbe på, noe som gjør det svært sannsynlig at bruk av en enkelt fil for alt ikke er noe som er i vår filosofi.
Det er derfor vi kan begynne å jobbe med eksterne visninger og stiler, slik at hver visning vi trenger er i en egen fil som vi først kan oppdage feil lettere og for det andre organisere i en mye mer praktisk struktur i prosjektet vårt .
1- Vi må ha språk først Rubin lastet ned, installert og konfigurert i vårt utviklingsmiljø.
2- Internett -tilgang for å kunne laste ned noen av ressursene som vi skal angi i eksemplene.
3- Tilstrekkelige tillatelser til å skrive nye filer og opprette mapper, i tillegg til å kunne kjøre filer med Rubin.
4- Et tekstredigeringsprogram for å kunne skrive koden som vi skal bruke til filene, det kan det være Sublim tekst eller NotePad ++, men det vi kjenner til tjener vårt formål.
De HTML I hovedfilen til prosjektet anbefales det ikke med mindre nettstedet vårt er statisk eller midlertidig, og vi må umiddelbart gå til markedet med noe, siden denne praksisen gjør at koden vår ikke er lesbar og at den ikke kan vedlikeholdes. i tide skikkelig.
For å overvinne dette problemet som oppstår, Sinatra gir oss muligheten til å lage eksterne visninger, som ikke er annet enn filer .erb hvor vi skal plassere HTML tilsvarende vårt syn, hvor Sinatra Når du ruter visningen som er opprettet, vil den umiddelbart søke etter disse filene, og med dette vil responsen for brukeren bli generert. La oss se i følgende kode hvordan vi har opprettet en ekstern visning slik at prosjektet vårt viser brukeren litt informasjon.
Det første vi skal gjøre er å lage en fil som heter rektor.rb og der lager vi vår grunnstruktur som vi vil se nedenfor:

 krever 'sinatra' get '/' do erb: start end get '/ on' do erb: on end get '/ contact' do erb: contact end

Så langt representerer dette ikke noe nytt hvis vi allerede har sett opplæringen til de første trinnene med Sinatra, her er det vi gjør å importere biblioteket med krever og til slutt definerer vi rutene som visningene vil returnere, alle med metoden FÅ HTTP.
Nå skal vi lage en fil som heter layout.erb og vi skal plassere den i en ny mappe som heter visninger som må være i samme katalog som vi har opprettet filen vår rektor.rb, la oss se koden som filen vår vil inneholde layout.erb:

Start
Om meg
Ta kontakt med

Nå i samme mappe visninger som vi nettopp har opprettet, skal vi generere en ny fil for å kunne teste vårt eksempel, i dette tilfellet vil vi kalle det denne filen hjem.erb og det har dette navnet fordi en av rutene våre er definert i rektor.rb har dette navnet, for å fullføre i denne filen vil vi plassere følgende kode:

Velkommen til nettstedet mitt, her ser vi hvordan vår første eksterne visning Sinatra fungerer

Hvis vi ser nøye ut, innser vi at det ikke er mer enn HTML. Når dette er fullført, går vi bare til kommandokonsollen og kjører vår nye applikasjon, for dette trenger vi bare å utføre følgende:

 rubin rektor. rb

Hva denne kommandoen gjør er å heve den integrerte utviklingswebserveren WEBrick som vi ser på følgende bilde:

Når denne handlingen er utført, kan vi navigere til siden vår med en ekstern visning, for dette går vi til adressen lokal vert: 4567, som gir oss et resultat som det vi kan se på følgende bilde:

FORSTØRRE

Siden vi har laget vår første eksterne visning, har vi fortsatt noen ting å forklare, og dette er strukturen til prosjektet, siden som standard Sinatra forvente en struktur at hvis vi følger den, bør vi ikke gjøre noe annet, men hvis det ikke er i vår smak, kan vi endre det.
GrunnstrukturBasestrukturen er en hovedfil som er der rammen er inkludert og rutene blir opprettet, så har vi to ekstra mapper, en som heter visninger som er den vi bruker til å lagre filene våre .erb som tilsvarer visningene og en mappe offentlig det er der vi vil lagre de forskjellige statiske filene som .css eller .js.
Hvis vi ser følgende bilde, kan vi sette pris på grunnstrukturen vi genererte for anvendelsen av det forrige eksemplet:

Her ser vi at hovedmappen til prosjektet vårt heter sinatra, så har vi filen ved roten til dette rektor.rb, og til slutt har vi de to mappene som vi har nevnt, med mappen visninger vises for å vise de to filene vi opprettet i forrige eksempel.
Hva om vi ikke vil bruke standardnavnene på Sinatra siden applikasjonen vår av en eller annen grunn må ha andre mapper, slik vi ganske enkelt angir det i filen rektor.rb som følger:
sett: public_folder, 'staticMed denne instruksjonen forteller vi Sinatra det nå i stedet for å søke etter en mappe offentlig, bør du se etter en mappe som heter Statisk.
sett: visninger, 'malerMed denne instruksjonen forteller vi Sinatra at i stedet for å søke visninger søk etter maler.
Med dette har vi allerede overskrevet måten rammeverket håndterer filene på, noe som gir oss mer frihet over prosjektet vårt.
Nå som vi forstår hvordan strukturen i applikasjonen vår fungerer, kommer vi til å inkludere stilene, for dette kan vi bruke flere tilnærminger, men den mest anbefalte er å lage en generell fil som gjelder for alle visninger. Selv om vi kan bruke tilnærmingen til å skape vår CSS manuelt, skal vi forklare i dette eksemplet hvordan du legger til Bootstrap og dermed har et mer solid utgangspunkt.
Først av alt må vi laste ned rammeverket for Støvelhempe og lagre den resulterende mappen i vår katalog offentlig eller statisk i tilfelle vi har fulgt instruksjonene for navneendringen i forklaringen av mappestrukturen. Så i filen vår oppsett Vi skal endre innholdet i etiketten litt for å kunne inkludere de nødvendige bibliotekene for driften av Støvelhempe, la oss se endringene som er brukt:

Når vi har inkludert bibliotekene til Støvelhempe vi kommer til å endre vår HTML For å gi den en struktur som er mer i tråd med rammene, kan vi mer direkte merke endringen av stiler på nettstedet vårt:

Start
Om meg
Ta kontakt med

Hvis vi ser at vi har endret noen ting, først og fremst på etiketten vi har inkludert bibliotekene til Støvelhempe, så har vi laget en stil som bare gjelder innenfor layout.erb for elementer som har id stil, i dette eksemplet bruker vi det på elementet og til slutt bruker vi komponentene til Støvelhempe vi legger til klassen nav nav-faner for å vise menyen vår i form av faner.
Vi starter serveren på nytt fra WEBrick og vi går inn i den angitte banen som programmet vårt kjører i, som skal se slik ut med endringene som er brukt:

Som vi kan se har vi effektivt brukt en stil på vår webapplikasjon laget med SinatraSelvfølgelig er det fortsatt mye arbeid å gjøre for at denne applikasjonen er mer i tråd med et produksjonsmiljø, men med denne basen er det mye lettere å eksperimentere og legge til funksjoner som vil gi oss en mye mer komplett utvikling.
Dermed avslutter vi denne opplæringen, som vi har lært å organisere prosjektet vårt ved å bruke eksterne visninger som definerer en mappestruktur og gjør applikasjonen vår mye mer attraktiv ved å inkorporere stiler, men ikke bare vanlig CSS, men vi har innarbeidet rammeverket Støvelhempe som hjelper oss med å lage mye mer attraktive brukergrensesnitt uten mye hodepine.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng