Vanjski pogledi i stilovi u Sinatri

Iako je moguće napraviti web stranicu s Sinatra u jednoj datoteci ovo je zaista loša ideja, budući da je problem u tome što je složenije naše web mjesto, teže će se kretati po toj datoteci i stoga će se, kad se dogodi pogreška, to teže ispraviti .
Ideja o korištenju okvira poput Sinatra biti u mogućnosti pojednostaviti naš rad dok koristimo sve alate koji su nam ponuđeni u paketu, uključujući i naš način rada, što čini vrlo vjerojatno da korištenje jedne datoteke za sve nije nešto što je u našoj filozofiji.
Zato možemo početi raditi na vanjskim pogledima i stilovima, tako da svaki pogled koji nam je potreban bude u zasebnoj datoteci s kojom ćemo prvo moći lakše otkriti pogreške, a zatim organizirati u mnogo praktičniju strukturu našeg projekta .
1- Prvo moramo imati jezik Rubin preuzeti, instalirati i konfigurirati u našem razvojnom okruženju.
2- Pristup internetu kako biste mogli preuzeti neke resurse koje ćemo navesti u primjerima.
3- Dovoljna dopuštenja za pisanje novih datoteka i stvaranje mapa, uz mogućnost izvođenja datoteka pomoću Rubin.
4- Uređivač teksta koji može napisati kôd koji ćemo koristiti za datoteke, to može biti Uzvišen tekst ili NotePad ++, ali ono što nam je poznato služi našoj svrsi.
The HTML U glavnoj datoteci projekta ne preporučuje se osim ako je naša stranica statična ili privremena i moramo odmah s nečim otići na tržište, jer kao što smo spomenuli, ova praksa čini naš kôd nečitkim i ne može se održavati na vrijeme kako treba.
Kako bi se prevladao ovaj problem koji se javlja, Sinatra nudi nam mogućnost stvaranja vanjskih prikaza koji nisu ništa drugo do datoteke .erb gdje ćemo postaviti HTML odgovara našem gledištu, gdje Sinatra Prilikom usmjeravanja stvorenog prikaza, on će odmah tražiti te datoteke i s tim će se generirati odgovor za korisnika. Pogledajmo u sljedećem kodu kako smo stvorili vanjski prikaz tako da naš projekt prikazuje korisniku neke informacije.
Prvo ćemo napraviti datoteku pod nazivom ravnatelj.rb i tu stvaramo našu osnovnu strukturu kao što ćemo vidjeti u nastavku:

 zahtijevaju 'sinatra' get '/' do erb: start end get '/ on' do erb: on end get '/ contact' do erb: kontakt kraj

Do sada ovo ne predstavlja ništa novo ako smo već vidjeli vodič o prvim koracima sa Sinatrom, evo ono što radimo je uvoz biblioteke sa zahtijevaju i na kraju definiramo rute koje će se prikazi vratiti, sve s metodom DOBITI HTTP.
Sada ćemo stvoriti datoteku pod nazivom izgled.erb i smjestit ćemo ga u novu mapu pod nazivom pogleda koji mora biti u istom direktoriju u kojem smo stvorili našu datoteku ravnatelj.rb, pogledajmo kod koji će naša datoteka sadržavati izgled.erb:

Početak
O meni
Kontakt

Sada u istoj mapi pogleda koju smo upravo stvorili generirat ćemo novu datoteku kako bismo mogli testirati naš primjer, u ovom slučaju nazvat ćemo je ovom datotekom doma.erb i ima ovaj naziv jer je jedna od naših ruta definirana u ravnatelj.rb ima ovaj naziv, za završetak u ovoj datoteci stavit ćemo sljedeći kod:

Dobro došli na moju web stranicu, ovdje vidimo kako funkcionira naš prvi vanjski prikaz Sinatre

Ako pažljivo pogledamo, shvatimo da to nije ništa drugo do HTML. Kad je ovo završeno, sada jednostavno idemo na naredbenu konzolu i pokrećemo našu novu aplikaciju, za to moramo samo izvršiti sljedeće:

 rubin ravnatelj.rb

Ova naredba podiže integrirani razvojni web poslužitelj WEBrick kao što vidimo na sljedećoj slici:

Kad se ova radnja dovrši, možemo otići na našu stranicu s vanjskim prikazom, za to ćemo otići na adresu localhost: 4567, što nam daje rezultat poput onog koji možemo vidjeti na sljedećoj slici:

POVEĆAJTE

Budući da smo stvorili svoj prvi vanjski prikaz, još uvijek imamo neke stvari za objasniti, a ovo je struktura projekta, budući da prema zadanim postavkama Sinatra očekujte strukturu da ako je slijedimo ne bismo trebali učiniti ništa drugo, međutim ako nam se ne sviđa možemo je promijeniti.
Osnovna strukturaOsnovna struktura je glavna datoteka u koju se uključuje okvir i stvaraju rute, tada imamo dvije dodatne mape, jednu tzv. pogleda koji koristimo za spremanje datoteka .erb koji odgovaraju pogledima i mapi javnost gdje ćemo pohraniti različite statičke datoteke poput .css ili .js.
Ako vidimo sljedeću sliku, možemo cijeniti osnovnu strukturu koju smo generirali za primjenu prethodnog primjera:

Ovdje vidimo da se zove glavna mapa našeg projekta sinatra, tada u korijenu ovoga imamo našu datoteku ravnatelj.rb, i na kraju imamo dvije mape koje smo spomenuli, s mapom pogleda prikazane za prikaz dviju datoteka koje smo stvorili u prethodnom primjeru.
Što ako ne želimo koristiti zadane nazive Sinatra budući da iz nekog razloga naša aplikacija mora imati druge mape, jer to jednostavno označavamo u datoteci ravnatelj.rb kako slijedi:
set: public_folder, 'staticOvom uputom kažemo Sinatra da sada umjesto traženja mape javnost, trebali biste potražiti mapu pod nazivom Static.
set: pogledi, 'predlošciOvim uputama govorimo Sinatri da umjesto pretraživanja pogleda traženje predložaka.
Ovim smo već prepisali način na koji okvir postupa s tim datotekama, dajući nam veću slobodu nad našim projektom.
Sada kada razumijemo kako funkcionira struktura naše aplikacije, uključit ćemo stilove, za to možemo primijeniti nekoliko pristupa, međutim najpreporučljivije je stvaranje opće datoteke koja se odnosi na sve poglede. Iako možemo primijeniti pristup stvaranja našeg CSS ručno ćemo u ovom primjeru objasniti kako dodati Bootstrap i tako imati solidnije polazište.
Prije svega moramo preuzeti okvir Bootstrap i spremite rezultirajuću mapu u naš direktorij javnost ili statički u slučaju da smo slijedili upute za promjenu naziva u objašnjenju strukture mapa. Zatim u našoj datoteci izgled Promijenit ćemo sadržaj oznake kako bismo mogli uključiti potrebne knjižnice za rad Bootstrap, da vidimo primijenjene promjene:

Nakon što smo uključili knjižnice Bootstrap mi ćemo promijeniti naš HTML Da bismo mu dali strukturu koja je u skladu s okvirom, ovim možemo izravnije primijetiti promjenu stilova na našoj web stranici:

Početak
O meni
Kontakt

Ako pogledamo promijenili smo neke stvari, prije svega u oznaku koju smo uključili knjižnice Bootstrap, tada smo stvorili stil koji se primjenjuje samo unutar izgled.erb za elemente koji imaju id stil, u slučaju ovog primjera primjenjujemo ga na element i konačno koristimo komponente Bootstrap dodajemo razred nav nav-tabs za prikaz našeg izbornika u obliku kartica.
Ponovo pokrećemo naš poslužitelj s WEBrick i unosimo navedenu putanju na kojoj se izvodi naša aplikacija, koja bi trebala izgledati na sljedeći način s primijenjenim promjenama:

Kao što vidimo, učinkovito smo primijenili stil na našoj web aplikaciji napravljenom s SinatraNaravno, ima još puno posla kako bi ova aplikacija bila više u skladu s proizvodnim okruženjem, međutim s ovom je bazom puno lakše eksperimentirati i dodati funkcionalnosti koje će nam omogućiti puno potpuniji razvoj.
Tako završavamo ovaj vodič s kojim smo naučili organizirati svoj projekt korištenjem vanjskih pogleda definirajući strukturu mapa i čineći našu aplikaciju mnogo privlačnijom uvrštavanjem stilova, ali ne samo običnog CSS -a, već smo ugradili i okvir Bootstrap što nam pomaže u stvaranju mnogo atraktivnijih korisničkih sučelja bez puno glavobolja.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod