Externa åsikter och stilar i Sinatra

Även om det är möjligt att göra en webbplats med Sinatra i en enda fil är detta verkligen en dålig idé, eftersom problemet är att ju mer komplex vår webbplats är, desto svårare blir det att navigera i den filen och därför när ett fel uppstår, desto svårare blir det att korrigera det .
Tanken bakom att använda en ram som Sinatra det är för att kunna förenkla vårt arbete medan vi utnyttjar alla verktyg som erbjuds oss i paketet, och också innehåller vårt sätt att arbeta, vilket gör det mycket troligt att det inte är något att använda en enda fil för allt i vår filosofi.
Det är därför vi kan börja arbeta med externa vyer och stilar, så att varje vy vi behöver finns i en separat fil som vi för det första lättare kan upptäcka fel och för det andra organisera i en mycket mer praktisk struktur för vårt projekt .
1- Vi måste ha språket först Rubin nedladdad, installerad och konfigurerad i vår utvecklingsmiljö.
2- Internetåtkomst för att kunna ladda ner några av de resurser som vi ska ange i exemplen.
3- Tillräckliga behörigheter för att skriva nya filer och skapa mappar, förutom att kunna köra filer med Rubin.
4- En textredigerare för att kunna skriva koden som vi ska använda för filerna, det kan vara Sublim text eller NotePad ++, men det vi känner till tjänar vårt syfte.
De HTML I projektets huvudfil rekommenderas det inte om inte vår webbplats är statisk eller tillfällig och vi måste omedelbart gå till marknaden med något, eftersom denna praxis gör att vår kod inte är läsbar och att den inte kan underhållas i rätt tid.
För att övervinna detta problem som uppstår, Sinatra erbjuder oss möjligheten att skapa externa vyer, som inte är annat än filer .erb där vi kommer att placera HTML motsvarande vår uppfattning, var Sinatra Vid dirigering av den skapade vyn kommer den omedelbart att söka efter dessa filer och med detta kommer svaret för användaren att genereras. Låt oss se i följande kod hur vi har skapat en extern vy så att vårt projekt visar användaren lite information.
Först vad vi ska göra är att skapa en fil som heter rektor. rb och där skapar vi vår basstruktur som vi kommer att se nedan:

 kräver 'sinatra' get '/' do erb: start end get '/ on' do erb: on end get '/ contact' do erb: contact end

Hittills representerar detta inget nytt om vi redan har sett handledning av de första stegen med Sinatra, här är det vi gör att importera biblioteket med behöva och slutligen definierar vi de rutter som vyerna kommer att återvända, alla med metoden SKAFFA SIG HTTP.
Nu ska vi skapa en fil som heter layout.erb och vi ska placera den i en ny mapp som heter vyer som måste finnas i samma katalog som vi har skapat vår fil rektor. rb, låt oss se koden som vår fil kommer att innehålla layout.erb:

Start
Om mig
Kontakt

Nu i samma mapp vyer som vi just har skapat kommer vi att skapa en ny fil för att kunna testa vårt exempel, i det här fallet kommer vi att kalla den denna fil hem.erb och det har detta namn eftersom en av våra rutter definieras i huvudman.rb har detta namn, för att slutföra i den här filen kommer vi att placera följande kod:

Välkommen till min webbplats, här ser vi hur vår första externa vy Sinatra fungerar

Om vi ​​tittar noga inser vi att det inte är mer än HTML. När detta är klart går vi helt enkelt till kommandokonsolen och kör vår nya applikation, för detta behöver vi bara köra följande:

 rubin rektor. rb

Vad detta kommando gör är att höja den integrerade utvecklingswebbservern WEBrick som vi ser i följande bild:

När denna åtgärd är klar kan vi navigera till vår sida med en extern vy, för detta går vi till adressen lokal värd: 4567, vilket ger oss ett resultat som det vi kan se i följande bild:

FÖRSTORA

Eftersom vi har skapat vår första externa vy har vi fortfarande några saker att förklara, och detta är projektets struktur, eftersom som standard Sinatra förvänta oss en struktur att om vi följer den ska vi inte göra något annat, men om det inte är till vår smak kan vi ändra det.
BasstrukturBasstrukturen är en huvudfil som är där ramverket ingår och rutterna skapas, sedan har vi ytterligare två mappar, en som heter vyer som är den vi använder för att lagra våra filer .erb som motsvarar vyerna och en mapp offentlig det är där vi kommer att lagra de olika statiska filerna som .css eller .js.
Om vi ​​ser följande bild kan vi uppskatta basstrukturen som vi genererade för tillämpningen av det föregående exemplet:

Här ser vi att huvudmappen för vårt projekt heter sinatra, då har vi vår fil i roten till detta rektor. rb, och slutligen har vi de två mappar som vi har nämnt, med mappen vyer visas för att visa de två filer som vi skapade i föregående exempel.
Vad händer nu om vi inte vill använda standardnamnen på Sinatra eftersom vår applikation av någon anledning måste ha andra mappar, som vi helt enkelt anger det i filen rektor. rb som följer:
set: public_folder, 'staticMed denna instruktion berättar vi Sinatra det nu istället för att söka efter en mapp offentlig, bör du leta efter en mapp som heter Statisk.
set: views, 'mallarMed denna instruktion berättar vi för Sinatra att istället för att söka vyer sök efter mallar.
Med detta har vi redan skrivit över hur ramverket hanterar dessa filer, vilket ger oss mer frihet över vårt projekt.
Nu när vi förstår hur strukturen i vår applikation fungerar, kommer vi att inkludera stilarna, för detta kan vi tillämpa flera tillvägagångssätt, men det mest rekommenderade är att skapa en allmän fil som gäller för alla vyer. Även om vi kan tillämpa metoden att skapa vår CSS manuellt kommer vi att förklara i detta exempel hur man lägger till Bootstrap och därmed har en mer solid utgångspunkt.
Först och främst måste vi ladda ner ramarna för Bootstrap och spara den resulterande mappen i vår katalog offentlig eller statisk om vi har följt instruktionerna för namnändringen i förklaringen av mappstrukturen. Sedan i vår fil layout Vi kommer att ändra innehållet i etiketten lite för att kunna inkludera nödvändiga bibliotek för driften av Bootstrap, låt oss se de ändringar som tillämpas:

När vi har inkluderat biblioteken av Bootstrap vi kommer att ändra vår HTML För att ge den en struktur som överensstämmer med ramen, kan vi mer direkt märka förändringen av stilar på vår webbplats:

Start
Om mig
Kontakt

Om vi ​​tittar har vi ändrat vissa saker, först och främst i etiketten vi har inkluderat biblioteken för Bootstrap, då har vi skapat en stil som bara gäller inom layout.erb för element som har id stil, i detta exempel applicerar vi det på elementet och slutligen använder vi komponenterna i Bootstrap vi lägger till klassen nav nav-flikar att visa vår meny i form av flikar.
Vi startar om vår server från WEBrick och vi anger den angivna sökvägen där vår applikation körs, vilket ska se ut så här med de ändringar som tillämpas:

Som vi kan se har vi effektivt tillämpat en stil på vår webbapplikation gjord med SinatraNaturligtvis finns det fortfarande mycket arbete att göra för att denna applikation är mer i linje med en produktionsmiljö, men med denna bas är det mycket lättare att experimentera och lägga till funktioner som ger oss en mycket mer komplett utveckling.
Således avslutar vi denna handledning, som vi har lärt oss att organisera vårt projekt med genom att använda externa vyer som definierar en mappstruktur och gör vår applikation mycket mer attraktiv genom att införliva stilar, men inte bara vanlig CSS, utan vi har införlivat ramverket Bootstrap vilket hjälper oss att skapa mycket mer attraktiva användargränssnitt utan mycket huvudvärk.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng