Externí pohledy a styly v Sinatře

I když je možné vytvořit webové stránky s Sinatra v jednom souboru je to opravdu špatný nápad, protože problém je v tom, že čím je náš web složitější, tím obtížnější bude procházení v tomto souboru, a proto když dojde k chybě, bude obtížnější jej opravit .
Myšlenka použití rámce jako Sinatra je to být schopen zjednodušit naši práci, zatímco využíváme výhod všech nástrojů, které jsou nám v balíčku nabízeny, a také zahrnuje náš způsob práce, což velmi zvyšuje pravděpodobnost, že použití jediného souboru pro všechno není něco, co je v naší filozofii.
Proto můžeme začít pracovat na vnějších pohledech a stylech, takže každý pohled, který potřebujeme, je v samostatném souboru, pomocí kterého můžeme za prvé snadněji detekovat chyby a za druhé uspořádat do mnohem praktičtější struktury našeho projektu .
1- Nejprve musíme mít jazyk Rubín staženy, nainstalovány a nakonfigurovány v našem vývojovém prostředí.
2- Přístup k internetu, abychom si mohli stáhnout některé zdroje, které v příkladech uvedeme.
3- Dostatečná oprávnění pro zápis nových souborů a vytváření složek, kromě toho, že je možné spouštět soubory pomocí Rubín.
4- Textový editor, který dokáže napsat kód, který pro soubory použijeme, může být Vznešený text nebo NotePad ++, ale to, co známe, slouží našemu účelu.
The HTML V hlavním souboru projektu se nedoporučuje, pokud náš web není statický nebo dočasný a potřebujeme s něčím okamžitě jít na trh, protože jak jsme zmínili, tato praxe činí náš kód nečitelným a že jej nelze udržovat včas.
Abychom překonali tento problém, který vzniká, Sinatra nám nabízí možnost vytváření externích pohledů, které nejsou ničím jiným než soubory .erb kam umístíme HTML odpovídá našemu pohledu, kde Sinatra Při směrování vytvořeného zobrazení okamžitě vyhledá tyto soubory a tím se vygeneruje odpověď pro uživatele. Podívejme se v následujícím kódu, jak jsme vytvořili externí zobrazení, aby náš projekt uživateli ukázal nějaké informace.
Nejprve uděláme vytvoření souboru s názvem jistina.rb a tam vytvoříme naši základní strukturu, jak uvidíme níže:

 vyžadují 'sinatra' get '/' do erb: start end get '/ on' do erb: on end get '/ contact' do erb: contact end

Zatím to nepředstavuje nic nového, pokud jsme již viděli tutoriál prvních kroků se Sinatrou, zde provedeme import knihovny pomocí vyžadovat a nakonec definujeme trasy, které se pohledy vrátí, vše pomocí metody DOSTAT HTTP.
Nyní vytvoříme soubor s názvem layout.erb a umístíme jej do nové složky s názvem pohledy který musí být ve stejném adresáři, kde jsme vytvořili náš soubor jistina.rb, podívejme se na kód, který náš soubor bude obsahovat layout.erb:

Start
O mně
Kontakt

Nyní ve stejné složce pohledy že jsme právě vytvořili, vygenerujeme nový soubor, abychom mohli otestovat náš příklad, v tomto případě tomu budeme říkat tento soubor domů a má tento název, protože jedna z našich tras byla definována v jistina.rb má toto jméno, abychom v tomto souboru skončili, umístíme následující kód:

Vítejte na mých webových stránkách, zde vidíme, jak funguje náš první externí pohled Sinatra

Podíváme -li se pozorně, uvědomíme si, že to není nic jiného než HTML. Když je toto dokončeno, nyní jednoduše přejdeme na příkazovou konzolu a spustíme naši novou aplikaci. K tomu stačí provést následující:

 rubínový jistin.rb

Tento příkaz provede zvýšení integrovaného vývojového webového serveru WEBrick jak vidíme na následujícím obrázku:

Jakmile je tato akce provedena, můžeme přejít na naši stránku s externím zobrazením, proto přejdeme na adresu localhost: 4567, což nám dává výsledek, jako je ten, který můžeme vidět na následujícím obrázku:

ZVĚTŠIT

Protože jsme vytvořili náš první externí pohled, musíme ještě něco vysvětlit, a to je struktura projektu, protože ve výchozím nastavení Sinatra očekávejte strukturu, že pokud se jí budeme řídit, neměli bychom dělat nic jiného, ​​ale pokud nám to nebude vyhovovat, můžeme to změnit.
Základní strukturaZákladní struktura je hlavní soubor, kde je zahrnut framework a jsou vytvořeny trasy, pak máme další dvě složky, jednu s názvem pohledy který používáme k ukládání našich souborů .erb které odpovídají pohledům a složce veřejnost kde budeme ukládat různé statické soubory jako .css nebo .js.
Pokud vidíme následující obrázek, můžeme ocenit základní strukturu, kterou jsme vygenerovali pro aplikaci předchozího příkladu:

Zde vidíme, že se nazývá hlavní složka našeho projektu sinatra, pak v jádru tohoto máme náš soubor jistina.rb, a konečně máme dvě složky, které jsme zmínili, se složkou pohledy Zobrazí se dva soubory, které jsme vytvořili v předchozím příkladu.
Co teď, když nechceme používat výchozí názvy Sinatra protože z nějakého důvodu naše aplikace musí mít další složky, jak to jednoduše označíme v souboru jistina.rb jak následuje:
sada: public_folder, 'staticS touto instrukcí říkáme Sinatra že nyní místo hledání složky veřejnost, měli byste vyhledat složku s názvem Static.
sada: zobrazení, 'šablonyS touto instrukcí říkáme Sinatrovi, že místo hledání pohledy hledat šablony.
Tímto jsme již přepsali způsob, jakým rámec zpracovává tyto soubory, což nám dává větší svobodu nad naším projektem.
Nyní, když chápeme, jak funguje struktura naší aplikace, zahrneme styly, proto můžeme použít několik přístupů, ale nejvíce se doporučuje vytvořit obecný soubor, který platí pro všechna zobrazení. I když můžeme použít přístup vytváření našich CSS ručně, v tomto příkladu vysvětlíme, jak přidat Bootstrap a mít tak pevnější výchozí bod.
Nejprve si musíme stáhnout rámec Bootstrap a výslednou složku uložte do našeho adresáře veřejnost nebo statický v případě, že jsme se řídili pokyny pro změnu názvu ve vysvětlení struktury složek. Pak v našem souboru rozložení Chystáme se trochu změnit obsah štítku, abychom mohli zahrnout potřebné knihovny pro provoz Bootstrap, podívejme se na použité změny:

Jakmile jsme zahrnuli knihovny Bootstrap chystáme se upravit naše HTML Abychom získali strukturu více v souladu s rámcem, můžeme si přímo všimnout změny stylů na našem webu:

Start
O mně
Kontakt

Pokud se podíváme, změnili jsme některé věci, nejprve jsme do štítku zahrnuli knihovny Bootstrap, pak jsme vytvořili styl, který platí pouze uvnitř layout.erb pro prvky, které mají id styl, v případě tohoto příkladu jej použijeme na prvek a nakonec použijeme komponenty Bootstrap přidáme třídu nav nav-tabs k zobrazení naší nabídky ve formě záložek.
Restartujeme náš server z WEBrick a zadáme zadanou cestu, ve které běží naše aplikace, která by s použitými změnami měla vypadat následovně:

Jak vidíme, efektivně jsme na naši webovou aplikaci vytvořenou pomocí stylu použili SinatraSamozřejmě je před námi ještě spousta práce, aby byla tato aplikace více v souladu s produkčním prostředím, nicméně s touto základnou je mnohem snazší experimentovat a přidávat funkce, které nám poskytnou mnohem komplexnější vývoj.
Tímto ukončujeme tento tutoriál, pomocí kterého jsme se naučili organizovat náš projekt pomocí externích pohledů definujících strukturu složek a díky nimž je naše aplikace mnohem atraktivnější začleněním stylů, ale nejen prostého CSS, ale začlenili jsme i framework Bootstrap což nám pomáhá vytvářet mnohem atraktivnější uživatelská rozhraní bez mnoha bolestí hlavy.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod