Ārējie uzskati un stili Sinatrā

Lai gan ir iespējams izveidot vietni ar Sinatra vienā failā tā patiešām ir slikta ideja, jo problēma ir tāda, ka jo sarežģītāka ir mūsu vietne, jo grūtāk būs pārvietoties šajā failā, un tādēļ, ja rodas kļūda, būs grūtāk to labot .
Ideja izmantot tādu sistēmu kā Sinatra tas ir, lai mēs varētu vienkāršot savu darbu, kamēr mēs izmantojam visus komplektā piedāvātos rīkus, iekļaujot arī mūsu darba veidu, kas padara ļoti ticamu, ka viena faila izmantošana visam nav kaut kas mūsu filozofijā.
Tāpēc mēs varam sākt strādāt pie ārējiem uzskatiem un stiliem, lai katrs nepieciešamais skats būtu atsevišķā failā, ar kuru, pirmkārt, varētu vieglāk atklāt kļūdas un, otrkārt, daudz praktiskāk sakārtot mūsu projekta struktūru. .
1- Mums vispirms ir jābūt valodai Rubīns lejupielādēt, instalēt un konfigurēt mūsu izstrādes vidē.
2- piekļuve internetam, lai varētu lejupielādēt dažus resursus, kurus mēs norādīsim piemēros.
3- Pietiekamas atļaujas jaunu failu rakstīšanai un mapju izveidei, turklāt iespēja izpildīt failus ar Rubīns.
4- Teksta redaktors, lai varētu uzrakstīt kodu, ko izmantosim failiem, tas var būt Cildens teksts vai NotePad ++, bet tas, kas mums ir pazīstams, kalpo mūsu mērķim.
HTML Projekta galvenajā failā tas nav ieteicams, ja vien mūsu vietne nav statiska vai īslaicīga, un mums nekavējoties jādodas uz kaut ko, jo, kā jau minējām, šī prakse padara mūsu kodu nelasāmu un to nevar saglabāt laikā pareizi.
Lai pārvarētu šo radušos problēmu, Sinatra piedāvā mums iespēju izveidot ārējus skatus, kas ir nekas vairāk kā faili .erb kur mēs novietosim HTML atbilst mūsu uzskatam, kur Sinatra Maršrutējot izveidoto skatu, tas nekavējoties meklēs šos failus un līdz ar to tiks ģenerēta atbilde lietotājam. Tālāk redzēsim, kā mēs esam izveidojuši ārēju skatu, lai mūsu projekts parādītu lietotājam kādu informāciju.
Vispirms mēs izveidosim failu ar nosaukumu galvenais.rb un tur mēs izveidojam savu bāzes struktūru, kā mēs redzēsim zemāk:

 pieprasīt 'sinatra' get '/' do erb: start end get get '/ on' do erb: end get '/ contact' do erb: contact end

Līdz šim tas nav nekas jauns, ja mēs jau esam redzējuši apmācību par pirmajiem soļiem ar Sinatra, šeit mēs importējam bibliotēku ar pieprasīt un visbeidzot mēs definējam maršrutus, pa kuriem skati atgriezīsies, izmantojot šo metodi GŪT HTTP.
Tagad mēs izveidosim failu ar nosaukumu izkārtojums.erb un mēs to ievietosim jaunā mapē ar nosaukumu viedokli kam jāatrodas tajā pašā direktorijā, kurā esam izveidojuši savu failu galvenais.rb, redzēsim kodu, kas būs mūsu failā izkārtojums.erb:

Sākt
Par mani
Kontakti

Tagad tajā pašā mapē viedokli ka mēs tikko izveidojām, mēs ģenerēsim jaunu failu, lai varētu pārbaudīt mūsu piemēru, šajā gadījumā mēs to sauksim par šo failu mājas.erb un tam ir šis nosaukums, jo viens no mūsu maršrutiem ir definēts galvenais.rb ir šis nosaukums, lai pabeigtu šajā failā, mēs ievietojam šādu kodu:

Laipni lūdzam manā vietnē, šeit mēs redzam, kā darbojas mūsu pirmais ārējais skats Sinatra

Ja mēs uzmanīgi paskatāmies, mēs saprotam, ka tas nav nekas vairāk kā HTML. Kad tas ir pabeigts, tagad mēs vienkārši dodamies uz komandu konsoli un palaižam savu jauno lietojumprogrammu, jo mums ir jāizpilda tikai šādas darbības:

 rubīna galvenais.rb

Šī komanda veic integrētā izstrādes tīmekļa servera pacelšanu WEBrick kā mēs redzam nākamajā attēlā:

Kad šī darbība ir pabeigta, mēs varam pāriet uz mūsu lapu ar ārēju skatu, lai to izdarītu, mēs ejam uz adresi vietējais saimnieks: 4567, kas dod mums tādu rezultātu, kādu varam redzēt šajā attēlā:

PALIELINĀT

Tā kā esam izveidojuši savu pirmo ārējo skatu, mums vēl ir jāpaskaidro dažas lietas, un tā ir projekta struktūra, jo pēc noklusējuma Sinatra gaidīt struktūru, ka, ja mēs tai sekojam, mums nevajadzētu darīt neko citu, tomēr, ja tā mums nepatīk, mēs varam to mainīt.
Bāzes struktūraPamata struktūra ir galvenais fails, kurā ietvars ir iekļauts un maršruti ir izveidoti, tad mums ir divas papildu mapes, viena viedokli kuru mēs izmantojam savu failu glabāšanai .erb kas atbilst skatiem un mapei publiski kur mēs glabāsim dažādus statiskos failus, piemēram, .css vai .js.
Ja redzam šādu attēlu, mēs varam novērtēt bāzes struktūru, ko izveidojām, lai piemērotu iepriekšējo piemēru:

Šeit mēs redzam, ka tiek saukta mūsu projekta galvenā mape sinatra, tad šīs saknes pamatā ir mūsu fails galvenais.rbun, visbeidzot, mums ir divas mūsu minētās mapes ar mapi viedokli parādīts, lai parādītu divus failus, kurus izveidojām iepriekšējā piemērā.
Ko darīt, ja mēs nevēlamies izmantot noklusējuma nosaukumus Sinatra tā kā kāda iemesla dēļ mūsu lietojumprogrammai ir jābūt citām mapēm, kā mēs to vienkārši norādām failā galvenais.rb sekojoši:
komplekts: public_folder, 'staticAr šo instrukciju mēs sakām Sinatra ka tagad tā vietā, lai meklētu mapi publiski, jums vajadzētu meklēt mapi ar nosaukumu Static.
komplekts: skati, veidnesAr šo norādījumu mēs sakām Sinatrai, ka tā vietā, lai meklētu viedokli meklēt veidnes.
Ar to mēs jau esam pārrakstījuši veidu, kādā sistēma apstrādā šos failus, dodot mums lielāku brīvību pār mūsu projektu.
Tagad, kad mēs saprotam, kā darbojas mūsu lietojumprogrammas struktūra, mēs iekļausim stilus, šim nolūkam mēs varam izmantot vairākas pieejas, tomēr visieteicamākais ir izveidot vispārīgu failu, kas attiecas uz visiem skatiem. Lai gan mēs varam pielietot savu radīšanas pieeju CSS manuāli, šajā piemērā mēs izskaidrosim, kā pievienot Bootstrap un tādējādi iegūt stabilāku sākumpunktu.
Pirmkārt, mums ir jālejupielādē sistēma Bootstrap un saglabājiet iegūto mapi mūsu direktorijā publiski vai statisks gadījumā, ja esam ievērojuši nosaukuma maiņas norādījumus mapju struktūras skaidrojumā. Tad mūsu failā izkārtojums Mēs nedaudz mainīsim etiķetes saturu, lai varētu iekļaut darbībai nepieciešamās bibliotēkas Bootstrap, redzēsim piemērotās izmaiņas:

Kad esam iekļāvuši bibliotēkas Bootstrap mēs mainīsim savu HTML Lai piešķirtu tai struktūru, kas vairāk atbilst regulējumam, mēs varam tiešāk pamanīt stilu maiņu mūsu vietnē:

Sākt
Par mani
Kontakti

Ja paskatāmies, mēs esam mainījuši dažas lietas, pirmkārt, etiķetē, kurā esam iekļāvuši bibliotēkas Bootstrap, tad mēs esam izveidojuši stilu, kas attiecas tikai uz iekšpusi izkārtojums.erb elementiem, kuriem ir id stils, šī piemēra gadījumā mēs to piemērojam elementam un, visbeidzot, izmantojot komponentus Bootstrap mēs pievienojam klasi navigācijas cilnes lai mūsu izvēlne tiktu parādīta cilņu veidā.
Mēs restartējam savu serveri no WEBrick un mēs ievadām norādīto ceļu, kurā darbojas mūsu lietojumprogramma, kam vajadzētu izskatīties šādi ar veiktajām izmaiņām:

Kā redzam, mēs esam efektīvi izmantojuši stilu savā tīmekļa lietojumprogrammā, kas izveidota ar SinatraProtams, vēl ir daudz darba, lai šī lietojumprogramma vairāk atbilstu ražošanas videi, tomēr ar šo bāzi ir daudz vieglāk eksperimentēt un pievienot funkcijas, kas mums dos daudz pilnīgāku attīstību.
Tādējādi mēs beidzam šo apmācību, ar kuru mēs esam iemācījušies organizēt savu projektu, izmantojot ārējos skatus, definējot mapju struktūru un padarot mūsu lietojumprogrammu daudz pievilcīgāku, iekļaujot stilus, bet ne tikai vienkāršu CSS, bet mēs esam iekļāvuši ietvaru Bootstrap kas palīdz mums izveidot daudz pievilcīgākas lietotāja saskarnes bez lielām galvassāpēm.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu