Widoki zewnętrzne i style w Sinatrze

Chociaż możliwe jest stworzenie strony internetowej z Synatra w jednym pliku jest to naprawdę zły pomysł, ponieważ im bardziej złożona jest nasza strona, tym trudniej będzie nawigować w tym pliku, a zatem, gdy wystąpi błąd, tym trudniej będzie go naprawić .
Idea korzystania z frameworka, takiego jak Synatra jest to, aby móc uprościć naszą pracę, korzystając ze wszystkich narzędzi, które są nam oferowane w pakiecie, uwzględniając również nasz sposób pracy, co sprawia, że ​​bardzo prawdopodobne jest, że używanie jednego pliku do wszystkiego nie jest czymś, co jest w naszej filozofii.
Dlatego możemy przystąpić do pracy nad zewnętrznymi widokami i stylami, tak aby każdy potrzebny nam widok znajdował się w osobnym pliku, za pomocą którego po pierwsze możemy łatwiej wykrywać błędy a po drugie uporządkować w dużo bardziej praktyczną strukturę naszego projektu .
1- Najpierw musimy mieć język Rubin pobrane, zainstalowane i skonfigurowane w naszym środowisku programistycznym.
2- Dostęp do Internetu, aby móc pobrać niektóre zasoby, które wskażemy na przykładach.
3- Wystarczające uprawnienia do pisania nowych plików i tworzenia folderów, oprócz możliwości wykonywania plików za pomocą Rubin.
4- Edytor tekstu, aby móc napisać kod, którego użyjemy dla plików, może być Wzniosły tekst lub NotePad ++, ale cokolwiek znamy, służy naszemu celowi.
ten HTML W głównym pliku projektu nie jest to zalecane, chyba że nasza strona jest statyczna lub tymczasowa i musimy od razu iść z czymś na rynek, ponieważ jak już wspominaliśmy, taka praktyka powoduje, że nasz kod nie jest czytelny i nie można go utrzymać w odpowiednim czasie.
Aby przezwyciężyć ten problem, który się pojawia, Synatra oferuje nam możliwość tworzenia zewnętrznych widoków, które są niczym innym jak plikami .erb gdzie umieścimy HTML odpowiadające naszemu poglądowi, gdzie Synatra Podczas routingu utworzonego widoku natychmiast wyszuka te pliki i dzięki temu zostanie wygenerowana odpowiedź dla użytkownika.W poniższym kodzie zobaczmy, jak stworzyliśmy widok zewnętrzny, aby nasz projekt pokazywał użytkownikowi pewne informacje.
Najpierw stworzymy plik o nazwie główny.rb i tam tworzymy naszą podstawową strukturę, jak zobaczymy poniżej:

 wymagaj 'sinatra' pobierz '/' wykonaj erb: początek koniec pobierz '/ włącz' wykonaj erb: na koniec pobierz '/ kontakt' wykonaj erb: kontakt koniec

Jak dotąd nie stanowi to nic nowego, jeśli widzieliśmy już samouczek pierwszych kroków z Sinatrą, tutaj to, co robimy, to import biblioteki za pomocą wymagać i na koniec definiujemy trasy, które zwrócą widoki, wszystko metodą DOSTWAĆ HTTP.
Teraz utworzymy plik o nazwie układ.erb i umieścimy go w nowym folderze o nazwie wyświetlenia który musi znajdować się w tym samym katalogu, w którym utworzyliśmy nasz plik główny.rb, zobaczmy kod, który będzie zawierał nasz plik układ.erb:

Początek
O mnie
Kontakt

Teraz w tym samym folderze wyświetlenia które właśnie utworzyliśmy, wygenerujemy nowy plik, aby móc przetestować nasz przykład, w tym przypadku nazwiemy go tym plikiem home.erb i ma tę nazwę, ponieważ jedna z naszych tras zdefiniowanych w główny.rb ma taką nazwę, aby zakończyć w tym pliku umieścimy następujący kod:

Witam na mojej stronie, tutaj widzimy jak działa nasz pierwszy zewnętrzny widok Sinatra

Jeśli przyjrzymy się uważnie, zdamy sobie sprawę, że to nic więcej niż HTML. Po zakończeniu, teraz po prostu przechodzimy do konsoli poleceń i uruchamiamy naszą nową aplikację, w tym celu musimy tylko wykonać następujące czynności:

 ruby główny.rb

To, co robi to polecenie, to podniesienie zintegrowanego serwera programistycznego WEBrick jak widzimy na poniższym obrazku:

Po wykonaniu tej czynności możemy przejść do naszej strony z widokiem zewnętrznym, w tym celu przejdziemy pod adres Lokalny Gospodarz: 4567, co daje nam wynik podobny do tego, który widzimy na poniższym obrazku:

POWIĘKSZAĆ

Odkąd stworzyliśmy nasz pierwszy widok zewnętrzny, wciąż mamy kilka rzeczy do wyjaśnienia, a jest to struktura projektu, ponieważ domyślnie Synatra oczekuj struktury, że jeśli będziemy nią podążać, nie powinniśmy nic więcej robić, ale jeśli nam się to nie podoba, możemy ją zmienić.
Struktura podstawowaPodstawową strukturą jest plik główny, w którym zawarty jest framework i tworzone są trasy, następnie mamy dwa dodatkowe foldery, jeden o nazwie wyświetlenia którego używamy do przechowywania naszych plików .erb które odpowiadają widokom i folderowi publiczny gdzie będziemy przechowywać różne pliki statyczne, takie jak .css lub .js.
Jeśli zobaczymy poniższy obraz, możemy docenić strukturę bazową, którą wygenerowaliśmy dla zastosowania poprzedniego przykładu:

Tutaj widzimy, że główny folder naszego projektu nazywa się sinatra, to u podstaw tego mamy nasz plik główny.rb, i wreszcie mamy dwa foldery, o których wspomnieliśmy, z folderem wyświetlenia wyświetlane, aby pokazać dwa pliki, które utworzyliśmy w poprzednim przykładzie.
A co jeśli nie chcemy używać domyślnych nazw Synatra ponieważ z jakiegoś powodu nasza aplikacja musi mieć inne foldery, ponieważ po prostu wskazujemy to w pliku główny.rb następująco:
zestaw: folder_publiczny, 'statycznyDzięki tej instrukcji mówimy Synatra że teraz zamiast szukać folderu publiczny, powinieneś poszukać folderu o nazwie Static.
zbiór: widoki, 'szablony'Dzięki tej instrukcji mówimy Sinatrze, że zamiast szukać wyświetlenia wyszukaj szablony.
Dzięki temu nadpisaliśmy już sposób, w jaki framework obsługuje te pliki, co daje nam większą swobodę nad naszym projektem.
Teraz, gdy rozumiemy, jak działa struktura naszej aplikacji, dołączymy style, w tym celu możemy zastosować kilka podejść, jednak najbardziej zalecanym jest utworzenie ogólnego pliku, który dotyczy wszystkich widoków. Chociaż możemy zastosować podejście do tworzenia naszych CSS ręcznie wyjaśnimy w tym przykładzie, jak dodać Bootstrap, aby uzyskać bardziej solidny punkt wyjścia.
Przede wszystkim musimy pobrać ramy Bootstrap i zapisz powstały folder w naszym katalogu publiczny lub statyczny w przypadku, gdy postępowaliśmy zgodnie z instrukcjami zmiany nazwy w wyjaśnieniu struktury folderów. Następnie w naszym pliku układ Zamierzamy nieco zmienić zawartość etykiety, aby móc zawierać niezbędne biblioteki do obsługi Bootstrap, zobaczmy zastosowane zmiany:

Po dołączeniu bibliotek Bootstrap zamierzamy zmodyfikować nasze HTML Aby nadać mu strukturę bardziej zgodną z frameworkiem, dzięki temu możemy bardziej bezpośrednio zauważyć zmianę stylów na naszej stronie:

Początek
O mnie
Kontakt

Jeśli spojrzymy, zmieniliśmy niektóre rzeczy, przede wszystkim w etykiecie, w której zawarliśmy biblioteki Bootstrap, to stworzyliśmy styl, który ma zastosowanie tylko wewnątrz układ.erb dla elementów, które mają identyfikator styl, w przypadku tego przykładu stosujemy go do elementu i na koniec używamy składowych Bootstrap dodajemy klasę karty nawigacyjne aby wyświetlić nasze menu w postaci zakładek.
Restartujemy nasz serwer z WEBrick i wpisujemy podaną ścieżkę, w której działa nasza aplikacja, która z zastosowanymi zmianami powinna wyglądać następująco:

Jak widać skutecznie zastosowaliśmy styl w naszej aplikacji webowej wykonanej za pomocą SynatraOczywiście jest jeszcze dużo pracy, aby ta aplikacja była bardziej zgodna ze środowiskiem produkcyjnym, jednak z tą bazą dużo łatwiej jest eksperymentować i dodawać funkcjonalności, które dadzą nam znacznie pełniejszy rozwój.
W ten sposób kończymy ten samouczek, dzięki któremu nauczyliśmy się organizować nasz projekt za pomocą zewnętrznych widoków definiujących strukturę folderów i uatrakcyjniających naszą aplikację poprzez uwzględnienie stylów, ale nie tylko zwykłego CSS, ale zaimplementowaliśmy framework Bootstrap co pomaga nam tworzyć znacznie bardziej atrakcyjne interfejsy użytkownika bez większych problemów.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt