Външни възгледи и стилове в Синатра

Въпреки че е възможно да се направи уеб сайт с Синатра в един файл това наистина е лоша идея, тъй като проблемът е, че колкото по -сложен е нашият сайт, толкова по -трудно ще бъде навигирането в този файл и следователно, когато възникне грешка, толкова по -трудно ще бъде да се коригира .
Идеята за използване на рамка като Синатра трябва да можем да опростим работата си, докато се възползваме от всички инструменти, които ни се предлагат в пакета, като включва и нашия начин на работа, което прави много вероятно използването на един файл за всичко да не е нещо, което е в нашата философия.
Ето защо можем да започнем да работим върху външни изгледи и стилове, така че всеки изглед, от който се нуждаем, е в отделен файл, с който първо можем да открием грешките по -лесно и второ да организираме в много по -практична структура на нашия проект .
1- Първо трябва да имаме език Руби изтеглени, инсталирани и конфигурирани в нашата среда за разработка.
2- Достъп до интернет, за да можете да изтеглите някои от ресурсите, които ще посочим в примерите.
3- Достатъчни разрешения за писане на нови файлове и създаване на папки, в допълнение към възможността за изпълнение на файлове с Руби.
4- Текстов редактор, за да може да напише кода, който ще използваме за файловете, може да бъде Възвишен текст или NotePad ++, но това, което познаваме, служи на нашата цел.
The HTML В основния файл на проекта не се препоръчва, освен ако нашият сайт не е статичен или временен и трябва незабавно да отидем на пазара с нещо, тъй като както споменахме, тази практика прави нашия код нечетлив и че не може да се поддържа навреме правилно.
За да се преодолее този възникнал проблем, Синатра ни предлага възможността за създаване на външни изгледи, които не са нищо повече от файлове .erb където ще поставим HTML съответстващи на нашето виждане, къде Синатра Когато маршрутизира създадения изглед, той веднага ще търси тези файлове и с това ще се генерира отговорът за потребителя.Да видим в следния код как сме създали външен изглед, така че нашият проект да показва на потребителя някаква информация.
Първо, това, което ще направим, е да създадем файл, наречен principal.rb и там създаваме нашата базова структура, както ще видим по -долу:

 изискват 'sinatra' get '/' do erb: start end get '/ on' do erb: on end get '/ contact' do erb: contact end

Досега това не представлява нищо ново, ако вече сме виждали урока за първите стъпки със Sinatra, тук това, което правим, е да импортираме библиотеката с изискват и накрая определяме маршрутите, които изгледите ще връщат, всички с метода ПОЛУЧАВАЙТЕ HTTP.
Сега ще създадем файл, наречен layout.erb и ще го поставим в нова папка, наречена изгледи които трябва да са в същата директория, в която сме създали нашия файл principal.rb, нека видим кода, който ще съдържа нашият файл layout.erb:

Старт
За мен
Контакт

Сега в същата папка изгледи който току -що създадохме, ще генерираме нов файл, за да можем да тестваме нашия пример, в този случай ще го наречем този файл home.erb и носи това име, защото един от нашите маршрути, дефиниран в principal.rb има това име, за да завършим в този файл, ще поставим следния код:

Добре дошли на моя уебсайт, тук виждаме как работи първият ни външен изглед Синатра

Ако погледнем внимателно, осъзнаваме, че това не е нищо повече от HTML. С това завършихме, сега просто отиваме в командната конзола и стартираме новото си приложение, за това трябва само да изпълним следното:

 рубинен директор.rb

Това, което прави тази команда, е да повиши интегрирания уеб сървър за разработка WEBrick както виждаме на следното изображение:

След като това действие бъде извършено, можем да преминем към нашата страница с външен изглед, за това ще отидем до адреса localhost: 4567, което ни дава резултат като този, който можем да видим на следното изображение:

Увеличете

Тъй като създадохме първия си външен изглед, все още трябва да обясним някои неща и това е структурата на проекта, тъй като по подразбиране Синатра очаквайте структура, която, ако я следваме, не трябва да правим нищо друго, но ако не ни харесва, можем да я променим.
Основна структураБазовата структура е основен файл, където рамката е включена и маршрутите са създадени, тогава имаме две допълнителни папки, едната се нарича изгледи който използваме за съхраняване на нашите файлове .erb които съответстват на изгледите и папка обществен където ще съхраняваме различните статични файлове като .css или .js.
Ако видим следното изображение, можем да оценим основната структура, която генерирахме за прилагането на предишния пример:

Тук виждаме, че основната папка на нашия проект се нарича синатра, тогава в основата на това имаме нашия файл principal.rbи накрая имаме двете папки, които споменахме, с папката изгледи показва, за да покаже двата файла, които създадохме в предишния пример.
Ами ако не искаме да използваме имената по подразбиране на Синатра тъй като по някаква причина нашето приложение трябва да има други папки, тъй като ние просто го посочваме във файла principal.rb както следва:
set: public_folder, 'staticС тази инструкция казваме Синатра че сега вместо да търсите папка обществен, трябва да потърсите папка с име Static.
set: изгледи, 'шаблониС тази инструкция казваме на Синатра, че вместо да търсим изгледи търсене на шаблони.
С това вече сме презаписали начина, по който рамката обработва тези файлове, давайки ни повече свобода над нашия проект.
Сега, когато разбираме как работи структурата на нашето приложение, ще включим стиловете, за това можем да приложим няколко подхода, но най -препоръчителният е да създадем общ файл, който да се прилага за всички изгледи. Въпреки че можем да приложим подхода за създаване на нашия CSS ръчно, ние ще обясним в този пример как да добавим Bootstrap и по този начин да имаме по -солидна отправна точка.
На първо място трябва да изтеглите рамката на Bootstrap и запишете получената папка в нашата директория обществен или статичен в случай, че сме следвали инструкциите за промяна на името в обяснението за структурата на папките. След това в нашия файл оформление Ще променим малко съдържанието на етикета, за да можем да включим необходимите библиотеки за работата на Bootstrap, нека видим приложените промени:

След като включим библиотеките на Bootstrap ще променим нашите HTML За да му придадем структура по -в съответствие с рамката, с това можем по -директно да забележим промяната на стиловете на нашия сайт:

Старт
За мен
Контакт

Ако погледнем, променихме някои неща, преди всичко в етикета, в който сме включили библиотеките на Bootstrap, тогава сме създали стил, който се прилага само вътре layout.erb за елементи, които имат идентификатор стил, в случая с този пример го прилагаме към елемента и накрая използваме компонентите на Bootstrap добавяме класа nav nav-tabs за да покажем нашето меню под формата на раздели.
Рестартираме нашия сървър от WEBrick и ние въвеждаме предоставения път, по който работи нашето приложение, което трябва да изглежда по следния начин с приложените промени:

Както виждаме, ние ефективно приложихме стил на нашето уеб приложение, направено с СинатраРазбира се, предстои още много работа, така че това приложение да е по -в съответствие с производствената среда, но с тази база е много по -лесно да експериментирате и да добавяте функционалности, които ще ни дадат много по -пълно развитие.
Така приключваме този урок, с който се научихме да организираме нашия проект, като използваме външни изгледи, дефиниращи структура на папки и правим нашето приложение много по -привлекателно чрез включване на стилове, но не само обикновен CSS, но и сме включили рамката Bootstrap което ни помага да създаваме много по -атрактивни потребителски интерфейси без много главоболия.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка