Sinatra'da dış görünümler ve stiller

ile bir web sitesi yapmak mümkün olsa da Sinatra tek bir dosyada bu gerçekten kötü bir fikir, çünkü sorun şu ki sitemiz ne kadar karmaşıksa, o dosyada gezinmek o kadar zor olacak ve bu nedenle bir hata oluştuğunda onu düzeltmek o kadar zor olacak .
Gibi bir çerçeve kullanmanın arkasındaki fikir Sinatra pakette bize sunulan tüm araçlardan yararlanırken, çalışma şeklimizi de dahil ederek işimizi basitleştirebilmektir, bu da her şey için tek bir dosya kullanmanın çok olası bir şey olmadığını gösterir. felsefemizde.
Bu nedenle dış görünümler ve stiller üzerinde çalışmaya başlayabiliriz, böylece ihtiyacımız olan her görünüm ayrı bir dosyada olur, bu sayede öncelikle hataları daha kolay tespit edebiliriz ve ikinci olarak projemizin yapısını çok daha pratik bir şekilde organize edebiliriz. .
1- Önce dilimiz olmalı yakut geliştirme ortamımızda indirilir, kurulur ve yapılandırılır.
2- Örneklerde belirteceğimiz bazı kaynakları indirebilmek için internet erişimi.
3- Dosyaları yürütebilmenin yanı sıra yeni dosyalar yazmak ve klasörler oluşturmak için yeterli izinler yakut.
4- Dosyalar için kullanacağımız kodu yazabilmek için bir metin editörü olabilir, Yüce metin veya NotePad ++, ancak hangisine aşinaysak, amacımıza hizmet eder.
NS HTML Projenin ana dosyasında, sitemiz statik veya geçici olmadıkça ve hemen bir şeyle piyasaya çıkmamız gerekmedikçe önerilmez, çünkü bahsettiğimiz gibi bu uygulama, kodumuzu okunamaz hale getirir ve sürdürülemez. zamanında düzgün.
Ortaya çıkan bu sorunun üstesinden gelebilmek için; Sinatra bize dosyalardan başka bir şey olmayan dış görünümler oluşturma imkanı sunuyor .erb nereye yerleştireceğiz HTML görüşümüze uygun olarak, nerede Sinatra Oluşturulan view'ı yönlendirirken hemen bu dosyaları arayacaktır ve bununla kullanıcı için cevap oluşturulacaktır.Aşağıdaki kodda projemizin kullanıcıya bazı bilgileri göstermesi için nasıl harici bir görünüm oluşturduğumuzu görelim.
İlk önce yapacağımız şey adında bir dosya oluşturmak. müdür.rb ve orada aşağıda göreceğimiz gibi temel yapımızı oluşturuyoruz:

 'sinatra' gerektir '/' yap erb: başlangıç ​​bitiş al '/ açık' yap erb: sonunda '/ iletişim' al erb yap: iletişim bitiş

Sinatra ile ilk adımların öğreticisini zaten gördüysek, bu şimdiye kadar yeni bir şeyi temsil etmiyor, burada yaptığımız şey kitaplığı içe aktarmak. gerekmek ve son olarak görünümlerin döneceği rotaları, tümü yöntemle tanımlarız. ELDE ETMEK HTTP.
Şimdi adında bir dosya oluşturacağız. düzen.erb ve onu adlı yeni bir klasöre yerleştireceğiz. Görüntüleme dosyamızı oluşturduğumuz dizinde olması gereken müdür.rb, dosyamızın içereceği kodu görelim düzen.erb:

Başlangıç
Benim hakkımda
Temas etmek

Şimdi aynı klasörde Görüntüleme yeni oluşturduğumuz örneğimizi test edebilmek için yeni bir dosya oluşturacağız, bu durumda buna bu dosya diyeceğiz ev.erb ve tanımlı rotalarımızdan biri olduğu için bu adı almıştır. müdür.rb bu ada sahip, bu dosyada bitirmek için aşağıdaki kodu yerleştireceğiz:

Web siteme hoş geldiniz, burada ilk dış görünümümüz Sinatra'nın nasıl çalıştığını görüyoruz

Dikkatli bakarsak bunun başka bir şey olmadığını anlarız. HTML. Bu tamamlandıktan sonra, şimdi sadece komut konsoluna gidip yeni uygulamamızı çalıştırıyoruz, bunun için sadece aşağıdakileri yürütmemiz gerekiyor:

 yakut müdür.rb

Bu komutun yaptığı, entegre geliştirme web sunucusunu yükseltmektir. WEBrick aşağıdaki resimde gördüğümüz gibi:

Bu işlem yapıldıktan sonra harici bir görünümle sayfamıza gidebiliriz, bunun için adrese gideceğiz. yerel ana bilgisayar: 4567, bu bize aşağıdaki resimde görebileceğimiz gibi bir sonuç verir:

BÜYÜT

İlk dış görünümümüzü oluşturduğumuz için, hala açıklamamız gereken bazı şeyler var ve bu, varsayılan olarak projenin yapısıdır. Sinatra Onu takip edersek başka bir şey yapmamamız gereken bir yapı bekliyoruz, ancak beğenimize değilse değiştirebiliriz.
temel yapıTemel yapı, çerçevenin dahil edildiği ve rotaların oluşturulduğu bir ana dosyadır, ardından biri olarak adlandırılan iki ek klasörümüz vardır. Görüntüleme dosyalarımızı depolamak için kullandığımız .erb görünümlere ve bir klasöre karşılık gelen halka açık .css veya .js gibi farklı statik dosyaları burada saklayacağız.
Aşağıdaki görüntüyü görürsek, önceki örneğin uygulaması için oluşturduğumuz temel yapıyı değerlendirebiliriz:

Burada projemizin ana klasörünün çağrıldığını görüyoruz. sinatra, sonra bunun kökünde dosyamız var müdür.rb, ve son olarak bahsettiğimiz iki klasörümüz var, klasörle birlikte Görüntüleme önceki örnekte oluşturduğumuz iki dosyayı göstermek için görüntülenir.
Şimdi, varsayılan adlarını kullanmak istemiyorsak ne olur? Sinatra bir nedenden dolayı uygulamamızın başka klasörlere sahip olması gerektiğinden, dosyada basitçe belirttiğimiz için müdür.rb aşağıdaki gibi:
set: public_folder, 'statikBu talimatla anlatıyoruz Sinatra şimdi bir klasör aramak yerine halka açık, Statik adlı bir klasör aramalısınız.
set: görünümler, 'şablonlarBu talimatla Sinatra'ya arama yapmak yerine şunu söylüyoruz: Görüntüleme şablonları arayın.
Bununla, çerçevenin bu dosyaları işleme biçiminin üzerine yazdık ve bize projemiz üzerinde daha fazla özgürlük sağladık.
Artık uygulamamızın yapısının nasıl çalıştığını anladığımıza göre, stilleri dahil edeceğiz, bunun için birkaç yaklaşım uygulayabiliriz, ancak en çok önerilen, tüm görünümler için geçerli olan genel bir dosya oluşturmaktır. oluşturma yaklaşımını uygulayabilsek de CSS manuel olarak, bu örnekte Bootstrap'in nasıl ekleneceğini ve böylece daha sağlam bir başlangıç ​​​​noktasına nasıl sahip olunacağını açıklayacağız.
Öncelikle framework'ü indirmeliyiz. Önyükleme ve ortaya çıkan klasörü dizinimize kaydedin halka açık veya statik Klasör yapısının açıklamasındaki isim değişikliği talimatlarını takip etmemiz durumunda. Daha sonra dosyamızda Yerleşim Çalışması için gerekli kütüphaneleri dahil edebilmek için etiketin içeriğini biraz değiştireceğiz. Önyükleme, uygulanan değişiklikleri görelim:

Kütüphaneleri dahil ettikten sonra Önyükleme bizimkileri değiştireceğiz HTML Çerçeveye daha uyumlu bir yapı kazandırmak için, bununla sitemizde stillerin değişimini daha doğrudan fark edebiliriz:

Başlangıç
Benim hakkımda
Temas etmek

Bakarsak bazı şeyleri değiştirmişiz, öncelikle etikette kütüphaneleri dahil ettik. Önyükleme, sonra sadece içinde geçerli olan bir stil yarattık düzen.erb kimliğine sahip öğeler için stil, bu örnekte onu öğeye uygularız ve son olarak bileşenlerini kullanırız. Önyükleme sınıfı ekliyoruz gezinme sekmeleri menümüzü sekmeler halinde görüntülemek için.
Sunucumuzu yeniden başlatıyoruz WEBrick ve uygulamamızın çalıştığı, uygulanan değişikliklerle aşağıdaki gibi görünmesi gereken yolu giriyoruz:

Gördüğümüz gibi, web uygulamamızda etkili bir şekilde bir stil uyguladık. SinatraTabii ki, bu uygulamanın bir üretim ortamıyla daha uyumlu olması için daha yapılacak çok iş var, ancak bu temel ile denemek ve bize çok daha eksiksiz bir gelişme sağlayacak işlevsellikler eklemek çok daha kolay.
Böylece, bir klasör yapısını tanımlayan dış görünümleri kullanarak projemizi düzenlemeyi öğrendiğimiz ve sadece düz CSS'yi değil, aynı zamanda çerçeveyi dahil ettiğimiz stilleri dahil ederek uygulamamızı çok daha çekici hale getirmeyi öğrendiğimiz bu öğreticiyi sonlandırıyoruz. Önyükleme bu da çok fazla baş ağrısı olmadan çok daha çekici kullanıcı arayüzleri oluşturmamıza yardımcı oluyor.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.