jQuery Sözü. Verilen sözlerin işinize yaramasını nasıl sağlarsınız
Yetkilendirme için siteden veri çekmek istedim ve ne oldu.
file_get_contentsfile_get_contents - akışlarıyla, yöntemin utanç verici olduğu ve birçok sunucunun sayfalara yönelik bu tür bir isteği aptalca kolayca engelleyebildiği ortaya çıktı. Güvenilir sitelerin kolayca indirilmesi için bu yöntemin yeri doldurulamaz. Çok basit ve kullanışlı.
Bu tek sayfalık cihazla POST isteğiyle veri yükleyebilirsiniz:
$result = file_get_contents($url, false,stream_context_create(array('http' => array('method' => 'POST','header' => 'Content-Type: application/xml','content' => $xml)))));
Biçimlendirilmiş sürüm:
armut:http_requestBu berbat bir yöntem, böyle bir kovanın içine bakmak gerçekten çileden çıkarıcı. Elbette buradan alınan bu kodu tarayabilirim: http://pear.php.net/manual/pl/package.http.http-request.intro.php
Ama işe yaradığı açık ama berbat görünüyor.
Pecl_HttpBu nasıl bir saçmalık - örneklerini bulamadığım garip bir PHP uzantısı, ancak php.net'te bu DEV BİR DEĞİŞİM.
Ancak bakılacak bir şey buldum, umarım daha fazla örnek verebilirsiniz:
$istek = İstek::fabrika($url); $request->method("POST"); $istek->başlıklar($başlık); $request->post($post_params); $istek->yürüt(); KıvırmakVakaların% 90'ında kullanılan en evrensel yöntem, ancak bunun her zaman işe yaramadığını söylüyorlar.
if($curl = curl_init()) (
curl_setopt($curl, CURLOPT_URL, 'http://mysite.ru/receiver.php');
curl_setopt($kıvrılma, CURLOPT_RETURNTRANSFER,true);
curl_setopt($curl, CURLOPT_POST, doğru);
curl_setopt($curl, CURLOPT_POSTFIELDS, "a=4&b=7");
$out = curl_exec($curl);
curl_close($kıvrılma);
CURL kodu, ne derse desin, kıçım kadar çirkin.
SoketlerHemen bir örnek vereyim:
$fp = fsockopen($url, 80, $hata, $hata, 30);
echo "HATA: $hata ($hata)
\N";
$hata="HATA: $hata ($hata)";
$out = "GET / HTTP/1.1\r\n";
$out .="User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.13 (KHTML, Gecko gibi) Chrome/24.0.1284.0 Safari/537.13\r\n";
$out .= "Ana Bilgisayar: $url\r\n";
$out .= "Yönlendiren: http://site";
$out .= "Bağlantı: Kapat\r\n\r\n";
$dışarı .= "\r\n";
fwrite($fp, $çıkış);
while (!feof($fp)) (
$src.=fgets($fp, 128);
Bu hayattan bir örnek, daha çirkin olamaz ama her yerde ve her zaman işe yarıyor, kütüphanelere gerek yok, gözlerimi yaşartıyor. PHP4 bile yeterli.
SnoopySnoopy'den daha havalı bir şey söylüyorlar. Kontrol etmedim, koda baktım, belge yok. İlginç ama vakit kaybı.
Zend_http_client/Zend:httpRusçada bazı belgeler bile var. Büyük, çok güçlü, sıkıcı.
Buzz – Basit HTTP İstek KitaplığıBuzz, HTTP istekleri için başka bir kütüphanedir. İşte bir kod örneği:
| 1 | $request = new Buzz\Message\Request("HEAD" , "/" , "http://google.com"); |
| 2 | $yanıt = new Buzz\Message\Response(); |
| 3 |
| 4 | $client = new Buzz\Client\FileGetContents(); |
| 5 | $istemci ->gönder($istek, $yanıt); |
| 6 |
| 7 | yankı $istek; |
| 8 | yankı $yanıt; |
Henüz bakmadım ve çözemedim ama mutlaka bir göz atacaksınız.
İstekler – Kolay HTTP İstekleriİstekler kitaplığı, HTTP isteklerini kolayca yapmanızı sağlar. Eğer siz de (benim gibi) Curl sözdizimini hatırlamıyorsanız bu kütüphane tam size göre, örnek kod.
PHP'de, önceden tanımlanmış $_POST değişkeni, koleksiyonun değerindeki = "post" yönteminden oluşturmak için kullanılır.
$_POST DeğişkeniFormdaki önceden tanımlanmış $_POST değişkeni, değerdeki = "post" yönteminden veri toplamak için kullanılır.
POST yöntemiyle gönderilen bilgi formu, kimse tarafından görülemeyen (tarayıcının adres çubuğunda görüntülenmeyen) ve gönderilen bilgi miktarıyla ilgili de sınırlı değildir.
Not: Ancak varsayılan olarak POST yöntemine gönderilen maksimum bilgi miktarı 8 MB'dir (php.ini dosyası post_max_size ayarlanarak değiştirilebilir).
Örneklerform.html dosya kodu aşağıdaki gibidir:
本教程(web sitesi) 名字: 年龄:
Kullanıcı "Gönder" düğmesini tıkladığında aşağıdakine benzer bir URL görüntülenir:
http://www..php
"Welcome.php" dosyası artık form verilerine $_POST değişkeni toplayabilir (Form alanlarının adının otomatik olarak $_POST dizi anahtarları haline geleceğini unutmayın):
欢迎 !
你的年龄是 岁。
Bir tarayıcı aracılığıyla erişilen demo aşağıdaki gibidir:
Method = "post" ne zaman kullanılır?POST aktarım yöntemiyle bir formdaki bilgiler hiç kimse tarafından görülemez ve gönderilen bilgi miktarı da sınırlı değildir.
Ancak etiket URL'de görüntülenmediğinden bu sayfaya yer işareti koymak mümkün değildir.
PHP $_REQUEST değişkeniÖnceden tanımlanmış $_REQUEST değişkeni $_GET, $_POST ve $_COOKIE içeriğini içerir.
$_REQUEST Değişkeni GET ve POST yöntemleriyle gönderilen form verilerini toplamak için kullanılabilir.
Örnekler"welcome.php" dosyasını aşağıdaki koda göre değiştirebilirsiniz, $_GET, $_POST ve diğer verileri kabul edebilir.
欢迎 !
你的年龄是 岁。
Hatta tasarım kalıplarını duymuş ve hatta şu harika kitapları karıştırmış olabilirsiniz:
- E. Gamma, R. Helm, R. Johnson, J. Vlissides “Nesneye yönelik tasarım teknikleri. Tasarım desenleri";
- M. Fowler "Kurumsal Yazılım Uygulamalarının Mimarisi."
Bu makale öncelikle yeni başlayanlar için faydalı olacaktır. Her durumda, birkaç saat içinde tüm modern web çerçevelerinin temelini oluşturan MVC modelinin uygulanması hakkında bir fikir edinebileceğinizi ve ayrıca "nasıl yapılacağı" konusunda daha fazla düşünmek için "yiyecek" alabileceğinizi umuyorum. yap." Makalenin sonunda, web çerçevelerinin (MVC dışında) nelerden oluştuğunu ve nasıl çalıştıklarını anlamanıza yardımcı olacak bir dizi faydalı bağlantı bulunmaktadır.
Deneyimli PHP programcılarının bu makalede kendileri için yeni bir şey bulmaları pek mümkün değildir, ancak ana metinle ilgili yorum ve yorumları çok faydalı olacaktır! Çünkü Teori olmadan pratik imkansızdır ve pratik olmadan teori işe yaramaz, sonra önce biraz teori olacak, sonra uygulamaya geçeceğiz. MVC konseptine zaten aşina iseniz teori bölümünü atlayıp doğrudan uygulamaya geçebilirsiniz.
1. Teori MVC modeli, amacı iş mantığını kullanıcı arayüzünden ayırmak olan bir uygulamayı yapılandırmanın basit bir yolunu açıklar. Sonuç olarak uygulamanın ölçeklendirilmesi, test edilmesi, bakımı ve elbette uygulanması daha kolaydır.MVC modelinin kavramsal diyagramına bakalım (bence bu şimdiye kadar gördüğüm en başarılı diyagram):
MVC mimarisinde model, verileri ve iş mantığı kurallarını sağlar, görünüm kullanıcı arayüzünden sorumludur ve denetleyici, model ile görünüm arasındaki etkileşimi sağlar.
Bir MVC uygulamasının tipik akışı şu şekilde tanımlanabilir:
Bu, örneğin sitenin ana sayfasının görünümünü görüntüler.
örneğin veritabanından bilgi okuyan model çağrılarını içerir.
Model kullanıcıyla doğrudan etkileşime girmemelidir. Kullanıcı isteğine ilişkin tüm değişkenlerin denetleyicide işlenmesi gerekir.
Model, kullanıcının ihtiyaçlarına göre değişebilecek HTML veya başka bir görüntü kodu oluşturmamalıdır. Bu tür kodların görünümlerde işlenmesi gerekir.
Aynı model, örneğin: kullanıcı kimlik doğrulama modeli, uygulamanın hem kullanıcı hem de yönetim kısımlarında kullanılabilir. Bu durumda, genel kodu ayrı bir sınıfa taşıyabilir ve onun alt öğelerinde alt uygulamaya özgü yöntemleri tanımlayarak ondan miras alabilirsiniz.
Görünüm - denetleyiciden ve modelden alınan verilerin harici görüntüsünü belirtmek için kullanılır.
Görünümler, verileri geçmek, biçimlendirmek ve görüntülemek için HTML işaretlemesini ve küçük PHP kodu eklemelerini içerir.
Veritabanına doğrudan erişim sağlanmamalıdır. Modellerin yapması gereken şey budur.
Kullanıcı isteğinden elde edilen verilerle çalışmamalıdır. Bu görev kontrolör tarafından gerçekleştirilmelidir.
Çıktıya hazır verileri elde etmek için bir denetleyicinin veya modellerin özelliklerine ve yöntemlerine doğrudan erişebilir.
Görünümler genellikle tüm sayfalarda ortak olan işaretlemeyi (örneğin, üstbilgi ve altbilgi) ve modelden veri çıktısını görüntülemek veya veri giriş formlarını görüntülemek için kullanılan şablonun bölümlerini içeren ortak bir şablona bölünür.
Denetleyici modelleri, görünümleri ve diğer bileşenleri çalışan bir uygulamaya bağlayan yapıştırıcıdır. Denetleyici, kullanıcı isteklerinin işlenmesinden sorumludur. Denetleyici SQL sorguları içermemelidir. Bunları modellerde tutmak daha iyidir. Denetleyici HTML veya başka bir işaretleme içermemelidir. Bunu göz önünde bulundurmaya değer.
İyi tasarlanmış bir MVC uygulamasında denetleyiciler genellikle çok incedir ve yalnızca birkaç düzine kod satırı içerir. Aynı şey CMS Joomla'daki Aptal Yağ Kontrolörleri (SFC) için söylenemez. Denetleyici mantığı oldukça tipiktir ve çoğu temel sınıflara aktarılır.
Modeller ise tam tersine çok kalındır ve veri işlemeyle ilgili kodun çoğunu içerir, çünkü içerdiği veri yapısı ve iş mantığı genellikle belirli bir uygulamaya oldukça özeldir.
Umarım farklı sitelerin adres çubuğunu oluşturmak için tamamen farklı formatlara sahip olabileceğini fark etmişsinizdir. Her format bir web uygulamasının mimarisini görüntüleyebilir. Her zaman böyle olmasa da çoğu durumda bu açık bir gerçektir.
Biraz metin ve kullanıcı profili görüntüleyen adres çubuğu için iki seçeneği ele alalım.
Bu durumda yaklaşık işlem kodu:
switch($_GET["action"]) ( case "about" : require_once("about.php"); // "Hakkımızda" sayfa sonu; case "contacts" : require_once("contacts.php"); // "Kişiler" sayfa sonu; case "feedback" : require_once("feedback.php"); // "Geri Bildirim" sayfa sonu; varsayılan: require_once("page404.php"); // sayfa "404" break; )
Sanırım bunu daha önce neredeyse herkes yaptı.
Bir URL yönlendirme motoru kullanarak, uygulamanızı aynı bilgileri görüntüleyecek şekilde aşağıdaki gibi istekleri kabul edecek şekilde yapılandırabilirsiniz:
http://www.example.com/contacts/feedback
Burada kişiler denetleyiciyi temsil eder ve geri bildirim, geri bildirim formunu vb. görüntüleyen kişiler denetleyici yöntemidir. Bu konuya pratik kısımda tekrar döneceğiz.
Ayrıca, birçok web çerçevesi yönlendiricisinin, özel URL rotaları (URL'nin her bir bölümünün ne anlama geldiğini belirtin) ve bunları işlemek için kurallar oluşturmanıza izin verdiğini bilmek de önemlidir.
Artık uygulamaya geçmek için yeterli teorik bilgiye sahibiz.
İleriye baktığımda, Model, View ve Controller çekirdek sınıflarının çekirdek klasörde saklanacağını söyleyeceğim.
Çocukları denetleyicilerde, modellerde ve görünüm dizinlerinde saklanacaktır. index.php dosyası uygulamaya giriş noktasıdır. Bootstrap.php dosyası uygulamanın yüklenmesini başlatır, gerekli tüm modülleri vb. bağlar.
Sırayla gideceğiz; İndex.php dosyasını açıp aşağıdaki kodla dolduralım:
ini_set("display_errors", 1); require_once "uygulama/bootstrap.php";
Burada hiçbir soru olmamalı.
Sonra hemen bootstrap.php dosyasına gidelim:
require_once "core/model.php"; require_once "core/view.php"; require_once "core/controller.php"; require_once "çekirdek/rota.php"; Rota::başlangıç(); //yönlendiriciyi başlat
İlk üç satır şu anda var olmayan çekirdek dosyalarını içerecektir. Son satırlar, yönlendirici sınıfının bulunduğu dosyayı içerir ve statik başlatma yöntemini çağırarak yürütme için başlatır.
RewriteEngine On RewriteCond %(REQUEST_FILENAME) !-f RewriteCond %(REQUEST_FILENAME) !-d RewriteRule .* index.php [L]
Bu kod, tüm sayfa işlemlerini ihtiyacımız olan index.php'ye yönlendirecektir. İlk bölümde Ön Kontrolör hakkında konuştuğumuzu hatırlıyor musunuz?
Yönlendirmeyi çekirdek dizinde ayrı bir rota.php dosyasına yerleştireceğiz. Bu dosyada, sayfa görünümünü oluşturacak denetleyici yöntemlerini çalıştıracak olan Route sınıfını açıklayacağız.
Route.php dosyasının içeriği
sınıf Rota ( statik işlev start() ( // denetleyici ve varsayılan eylem $kontrolör_adı = "Ana"; $eylem_adı = "indeks"; $rotalar = patlayabilir("/", $_SERVER["REQUEST_URI"]); // get denetleyici adı if (!empty($routes)) ( $kontrolör_adı = $rotalar; ) // eylem adını al if (!empty($routes)) ( $aksiyon_adı = $rotalar; ) // önek ekle $model_adı = " Model_".$controller_name; $controller_name = "Controller_".$controller_name; $action_name = "action_".$action_name; // dosyayı model sınıfına bağlayın (bir model dosyası olmayabilir) $model_file = strtolower ($model_adı). ".php"; $model_path = "uygulama/modeller/".$model_dosyası; if(file_exists($model_path)) ( include "application/models/".$model_file; ) // dosyayı bağla denetleyici sınıfıyla $controller_file = strtolower ($controller_name)..php"; $controller_path = "application/controllers/".$controller_file; if(file_exists($controller_path)) ( include "application/controllers/".$controller_file; ) else ( /* buraya bir istisna atmak doğru olur, ancak işleri basitleştirmek için hemen 404 sayfasına yönlendireceğiz */ Route::ErrorPage404(); ) // bir denetleyici oluştur $kontrolör = yeni $kontrolcünün_adı ; $eylem = $eylem_adı; if(method_exists($controller, $action)) ( // denetleyici eylemini çağırın $controller->$action(); ) else ( // burada bir istisna atmak da daha akıllıca olacaktır Route::ErrorPage404(); ) ) function ErrorPage404( ) ( $host = "http://".$_SERVER["HTTP_HOST"]."/"; başlık("HTTP/1.1 404 Bulunamadı"); başlık("Durum: 404 Bulunamadı") ; başlık(" Konum:".$ana bilgisayar."404"); ) )
Sınıfın çok basitleştirilmiş bir mantık uyguladığını (hacimli koda rağmen) ve hatta güvenlik sorunları yaşayabileceğini not ediyorum. Bu kasıtlı olarak yapıldı çünkü... tam teşekküllü bir yönlendirme sınıfı yazmak en azından ayrı bir makaleyi hak ediyor. Şimdi ana noktalara bakalım...
$_SERVER["REQUEST_URI"] global dizi öğesi kullanıcının iletişim kurduğu tam adresi içerir.
Örneğin: example.ru/contacts/feedback
Fonksiyonun kullanılması patlamak Adres bileşenlere ayrılmıştır. Sonuç olarak denetleyicinin adını alıyoruz, verilen örnekte bu denetleyicidir kişiler ve bizim durumumuzda eylemin adı - geri bildirim.
Daha sonra model dosyası (model eksik olabilir) ve varsa denetleyici dosyası bağlanır ve son olarak denetleyicinin bir örneği oluşturulur ve denetleyici sınıfında tanımlanmışsa eylem tekrar çağrılır.
Bu nedenle, örneğin adrese giderken:
example.com/portföy
veya
example.com/portfolio/index
Yönlendirici aşağıdaki eylemleri gerçekleştirecektir:
example.com/ufo
daha sonra “404” sayfasına yönlendirilecektir:
example.com/404
Kullanıcının denetleyicide tanımlanmayan bir eyleme erişmesi durumunda da aynı şey olacaktır.2.2. MVC uygulamasına dönelim. Çekirdek klasöre gidelim ve Route.php dosyasına üç dosya daha ekleyelim: model.php, view.php ve Controller.php
Şimdi yazmaya başlayacağımız temel sınıfları içereceklerini hatırlatayım.
model.php dosyasının içeriği
sınıf Modeli ( public function get_data() ( ) )
Model sınıfı, alt sınıflarda geçersiz kılınacak tek bir boş veri getirme yöntemi içerir. Alt sınıfları oluşturduğumuzda her şey daha net hale gelecektir.
view.php dosyasının içeriği
class View ( //public $template_view; // burada varsayılan genel görünümü belirleyebilirsiniz. function created($content_view, $template_view, $data = null) ( /* if(is_array($data)) ( // diziyi dönüştür öğeleri değişkenlere yerleştirin extract($data); ) */ include "application/views/".$template_view; ))
Yöntemi tahmin etmek zor değil oluşturmak bir görünüm oluşturmaya yöneliktir. Aşağıdaki parametreler ona iletilir:
Belirli bir sayfanın içeriğini görüntülemek için.
Bizim durumumuzda genel şablon başlık, menü, kenar çubuğu ve altbilgiyi içerecek ve sayfa içeriği ayrı bir formda yer alacaktır. Yine, bu basitlik için yapılır.
Controller.php dosyasının içeriği
sınıf Denetleyici ( public $model; public $görünüm; function __construct() ( $this->view = new View(); ) function action_index() ( ) )
Yöntem action_index- bu, varsayılan olarak çağrılan bir eylemdir; alt sınıfları uygularken bunu geçersiz kılacağız.
Önceki şekilde, şablon_view.php dosyası ayrı ayrı vurgulanmıştır - bu, tüm sayfalarda ortak olan işaretlemeyi içeren bir şablondur. En basit durumda şöyle görünebilir:
Ev
Siteye prezentabl bir görünüm kazandırmak için bir CSS şablonu oluşturuyoruz ve HTML işaretlemesinin yapısını değiştirerek ve CSS ile JavaScript dosyalarını bağlayarak bunu sitemize entegre ediyoruz:
Makalenin sonundaki “Sonuç” bölümünde basit bir şablonun entegrasyonu için adımların atıldığı bir projenin bulunduğu GitHub deposuna bağlantı bulunmaktadır.
class Controller_Main, Denetleyiciyi genişletir ( function action_index() ( $this->view->generate("main_view.php", "template_view.php"); ) )
yöntemde oluşturmak View sınıfının bir örneği, genel şablonun dosyalarının adları ve sayfa içeriğinin bulunduğu görünüm iletilir.
İndeks eylemine ek olarak denetleyici elbette başka eylemler de içerebilir.
Genel görünüm dosyasını daha önce incelemiştik. Main_view.php içerik dosyasını düşünün:
Hoş geldin!
OLOLOSHA EKİBİ, Meksika maskeleri, Hindistan ve Seylan'dan bronz ve taş heykeller, Ekvator Afrika'sının beş veya altı yüzyıllık ustaları tarafından yaratılan kısma ve heykelleri toplama konusunda uzun yıllara dayanan deneyime sahip, web sitesi geliştirme alanında birinci sınıf uzmanlardan oluşan bir ekiptir. evvel...
Bu, herhangi bir PHP çağrısı olmadan basit işaretleme içerir.
Ana sayfayı görüntülemek için aşağıdaki adreslerden birini kullanabilirsiniz:
Aşağıdaki modelden elde edilen verileri görüntüleyen bir görünümü kullanan bir örneği ele alacağız. 2.3.2. Bir “Portföy” sayfası oluşturun Bizim durumumuzda “Portföy” sayfası modeli kullanan tek sayfadır.
Model genellikle veri örnekleme yöntemlerini içerir, örneğin:
model_portfolio.php model dosyasını modeller klasörüne yerleştirin. İşte içeriği:
class Model_Portfolio Modeli genişletir ( public function get_data() ( return array(array("Yıl" => "2012", "Site" => "http://DunkelBeer.ru", "Description" => "Tanıtım sitesi Alman üretici Löwenbraü'nün, Rusya'da "SUN InBev." bira üretim şirketi tarafından üretilen koyu Dunkel birası), array("Yıl" => "2012", "Site" => "http://ZopoMobile.ru", "Açıklama " => "Zopo'nun Android işletim sistemine dayalı Çin telefonlarının ve bunlara yönelik aksesuarların Rusça kataloğu."), // todo); ) )
Model denetleyici sınıfı, denetleyici_portfolio.php dosyasında bulunur; kodu aşağıdadır:
class Controller_Portfolio, Controller'ı genişletir ( function __construct() ( $this->model = new Model_Portfolio(); $this->view = new View(); ) function action_index() ( $data = $this->model->get_data( ); $this->view->generate("portfolio_view.php", "template_view.php", $data); ) )
Bir değişkene veri yöntemin döndürdüğü dizi yazılır get_data buna daha önce baktık.
Bu değişken daha sonra bir yöntem parametresi olarak iletilir oluşturmak, aynı zamanda şunları da içerir: genel şablona sahip dosyanın adı ve sayfa içeriğine sahip görünümü içeren dosyanın adı.
Sayfa içeriğini içeren görünüm portfolyo_view.php dosyasındadır.
Portföy
| Yıl | Proje | Tanım |
Burada her şey basit, görünüm modelden elde edilen verileri gösteriyor. 2.3.3. Kalan sayfaların oluşturulması Kalan sayfalar aynı şekilde oluşturulur. Kodları, makalenin sonunda bağlantısı verilen GitHub deposunda “Sonuç” bölümünde mevcuttur.3. Sonuç Sonunda ne oldu:
Ortaya çıkan kartvizit web sitesinin ekran görüntüsü
GitHub bağlantısı: https://github.com/vitalyswipe/tinymvc/zipball/v0.1
Ancak bu versiyonda aşağıdaki sınıfların (ve bunlara karşılık gelen türlerin) taslağını çizdim:
- Kullanıcı adı ve şifreyi girmek için bir form içeren bir görünümün oluşturulduğu, doldurulduktan sonra kimlik doğrulama prosedürünün gerçekleştirildiği ve başarılı olması durumunda kullanıcı yönetici paneline yönlendirildiği Controller_Login.
- Contorller_Admin, kullanıcının daha önce sitede yönetici olarak yetkilendirilip yetkilendirilmediğini kontrol eden bir indeks eylemiyle (eğer öyleyse, yönetici paneli görünümü görüntülenir) ve oturumu kapatmak için bir oturum kapatma eylemiyle.
Ancak basit web uygulamaları (örneğin kartvizit siteleri) geliştirirken Yii veya Kohana gibi birkaç yüz dosyadan oluşan web çerçevelerini kullanmak her zaman tavsiye edilmez. Artık Php, Html, CSS ve JavaScript kodlarını tek dosyada karıştırmamak için güzel bir MVC modeli oluşturabiliriz.
Bu makale, web uygulamanız için temel olarak kullanabileceğiniz gerçekten doğru bir şeyin örneğinden çok, CMF'yi öğrenmek için bir başlangıç noktasıdır. Belki de size ilham verdi ve siz zaten MVC'ye dayalı olarak kendi mikro çerçevenizi veya CMS'nizi yazmayı düşünüyorsunuz. Ancak, "blackjack ve fahişeler" ile bir sonraki çarkı yeniden icat etmeden önce bir kez daha düşünün: belki de çabalarınızı halihazırda var olan bir projenin geliştirilmesine ve topluluğa yardım etmeye yönlendirmek daha mantıklı olabilir mi?!
Not: Yazı, yorumlarda bırakılan bazı yorumlar dikkate alınarak yeniden yazılmıştır. Eleştirinin çok faydalı olduğu ortaya çıktı. Yanıta bakıldığında: yorumlar, PM'ler ve gönderiyi favorilere ekleyen kullanıcı sayısı, bu gönderiyi yazma fikrinin o kadar da kötü olmadığı ortaya çıktı. Ne yazık ki tüm istekleri dikkate alıp daha ayrıntılı yazmak zaman yetersizliğinden mümkün değil... ama belki de orijinal versiyona olumsuz oy veren gizemli kişiler bunu yapacaklardır. Projelerinizde iyi şanslar!
5. Konuyla ilgili yararlı bağlantılardan bir seçki Bu makale sıklıkla web çerçeveleri konusuna değiniyor - bu çok geniş bir konudur, çünkü mikro çerçeveler bile akıllıca birbirine bağlanmış birçok bileşenden oluşur ve bunlar hakkında konuşmak için birden fazla makale gerekir. bileşenler. Ancak burada, şu veya bu şekilde çerçeveler konusuyla ilgili olan bağlantılardan (bu makaleyi yazarken takip ettiğim) küçük bir seçki sunmaya karar verdim.Etiketler: Etiket ekleyin
Bu derste formlar ve sayfalar arasında veri aktarma tekniklerine bakacağız. Bu tür yöntemler POST ve GET'tir. Her biri hakkında ayrı ayrı ve daha ayrıntılı olarak konuşacağız. Genel olarak konuşursak, formlar arasındaki iletişim için bu gereklidir. Örneğin bir sayfada bazı alanları dolduruyoruz ve bunları işlenmek üzere başka bir sayfaya aktarmamız gerekiyor.
Öncelikle GET metoduna bakalım. Bu, tüm değişkenlerin ve değerlerinin doğrudan adres üzerinden iletildiği zamandır. Şimdi bir örnek kullanarak her şeyi göreceksiniz ve hatta çoğu sitenin ve forumun nasıl çalıştığını anlayacaksınız.
Örneğin şöyle bir html sayfamız var:
Bağlantıyı al kullanılarak değişkenlerin iletilmesi örneğini içeren sayfa
Bağlantıyı görüyor musun? Karmaşıktır ve birkaç bölümden oluşur. Hepsini parçalara ayıralım:
https://site— etki alanı adresi veya aynı zamanda adlandırıldığı gibi ana bilgisayar.
index.php— PHP'de isteği işleyecek bir sayfa.
?
— adres ile değişkenlerin bulunduğu blok arasındaki ayrımın sembolü.
Daha sonra sembolle ayrılan değişkenler ve değerleri gelir. &
.
isim=Sergey— değişkenin adı ve değeri Sergey.
yaş=22- aynı şey, değişken yaş, değer 22.
Her şeyi çözdük, şimdi bunun GET yöntemini kullanarak php'de nasıl işlendiğini görelim.
Hatırlayacağınız gibi index.php sayfasına geçtik:
Öncelikle bir tavsiye: HER ZAMAN değişkenlerinizin doğruluğunu kontrol edin: boşluk olup olmadığını, geçerli değerlere uygunluğu vb. Her şey adres çubuğu üzerinden iletildiği için veriler kolaylıkla değiştirilebilir ve siteye zarar verebilir. Şimdi kodun kendisine gelince: kullanarak ad ve yaş değişkenlerinin boşluk olup olmadığını kontrol ettik ve eğer boş değillerse onları görüntüledik ve eğer boşlarsa basitçe rapor ettik.
Çok basit, katılmıyor musun? Örneğin, bir html sayfası oluşturabilir ve menüdeki değişkenler aracılığıyla bağlantılar oluşturabilir ve index.php'de değişkeni işleyebilir ve alınan değere bağlı olarak belirli bir sayfayı görüntüleyebilirsiniz. Bunu daha sonra PHP'de sıfırdan bir web sitesi oluşturma hakkındaki makalede konuşacağız. Hiçbir şeyi kaçırmamak için RSS'ye abone olmanızı tavsiye ederim.
Bu yöntemin nasıl çalıştığını göstermek için adresi olan basit bir satırdan biraz daha fazlasına ihtiyacımız olacak :) Doldurulacak bir form içeren bir HTML sayfası oluşturmamız gerekecek, ama sorun değil, size hazır bir form vereceğim örnek:
Bilgi iletmek için alanlarda Post Fill'i kullanarak değişkenlerin iletilmesine bir örnek içeren sayfa:
Adınızı giriniz:
Lütfen yaşınızı belirtin:
Böylece basit bir formla bir html sayfası oluşturduk. POST yönteminin yalnızca formda kullanılabileceğini unutmayın.
Formun ilk parametresi “method”dur, transfer için kullanacağımız metodu tanımlar. Tahmin edebileceğiniz gibi bu ya GET ya da POST'tur. Ayrıca, GET ayarlanmışsa, tüm alan adları (değişken adları biçiminde) ve değerleri, GET yöntemiyle ilgili bölümde olduğu gibi referans olarak iletilir. POST ayarlanırsa tüm değişken adları ve değerleri tarayıcı isteği olarak web sunucusuna iletilecektir. Yani adres çubuğunda görünmeyecekler. Çoğu durumda bu çok faydalıdır. POST ayrıca daha güvenlidir ve bu anlaşılabilir bir durumdur, çünkü değerleri olan değişkenlerin düzenlenmesi artık o kadar kolay değildir, ancak bu da mümkündür.
İkinci form parametresi “eylem”dir. Bu, verileri ilettiğimiz betik dosyasının yolu ve adıdır. Bizim durumumuzda bu index.php'dir. Bu yol tam olarak şu şekilde iletilebilir: action = “https://my_site.ru/index.php”. “Action” parametresinin değerini belirtmezseniz, tüm bilgiler ana betiğe yani sitenizin index.php indeks sayfasına aktarılacaktır ki bu oldukça mantıklıdır.
Şimdi formumuzdan verileri alacağız. Bunu index.php'ye aktardığımıza göre, bu özel sayfanın kodu aşağıda olacaktır:
Boşluğu ve geçerli değerleri kontrol etmeyi unutmayın. Daha sonra değişkenlerimizin neden kullanıcı_adı ve yaş olarak adlandırıldığını açıklığa kavuşturmamız gerekiyor. Ve yukarıda oluşturduğumuz formun alanlarına bakın. Oraya bak giriş adı = "kullanıcı_adı" tipi = "metin"? Burası name parametresinin bu alanı kullanarak elde edeceğimiz değişkenin adını belirttiği yerdir. Yaşla aynı. Umarım açıktır. Bir değişkeni ve değerini POST aracılığıyla almak, yukarıda tartıştığımız GET'ten neredeyse hiç farklı değil.
Bunun büyük bir ders olduğu ortaya çıktı, ama en faydalı derslerden biri çünkü değişkenleri formlar ve sayfalar arasında aktarmak tam olarak PHP'yi kullandığımız etkileşimdir.
26 Ocak 2017
Vaatler, vaatler, geri arama cehennemi, Ertelenen nesne, sonra, ne zaman ve çözümler...
Bu sözler her telgraf direğinden duyulmaktadır. Bu gezegende vaatleri yerine getirmeyen son aptalın ben olduğuma dair bir his var. Bu duruma üzülerek bu konuyu incelemeye karar verdim. Ancak git rebase örneğinde olduğu gibi, internette vaatler hakkında çok fazla bilgi olduğu ancak çok az yerde kullanışlı bir açıklamaya sahip olduğu ortaya çıktı. Ve internette bir şey olmadığından, onu kendiniz yaratmanız gerekir.
Bu harika şeyin genel teorisine ve inceliklerine pek ilgim yok. Tanıdık olmayan herhangi bir şeyi olası faydaları açısından algılarım. Bu nedenle vaatlerin nasıl işlediğine dair ayrıntılı açıklamaları diğer bloglarda aramak daha iyidir. Jquery vaatleri ile pratik bir çalışma örneğine bakacağız. Ve sonunda, bunu daha ayrıntılı olarak incelemeye değer mi, yoksa $.ajax.success'te yasal olarak tonlarca kod yazmaya devam edip edemeyeceğimizi öğreneceğiz.
Ne zaman sözlere ihtiyacımız olabilir?Tipik bir örnek. İyi niyetli arka uç geliştiricilerin, kesin olarak tanımlanmış eylemleri gerçekleştiren bir dizi küçük komut dosyası isteğini derlediği yeni bir projeye bakıyoruz. Bir istek - küçük bir işlem. Genel olarak REST hizmeti oluştururken böyle olması gerekir. Ama şimdilik REST ile ilgili gösteriş yapmayı bırakıp, dünyaya gelelim.
Hayali projemizde bir Kullanıcı varlığı, programcı terimleriyle kullanıcı ve bir Sipariş - sipariş vardır. Ve bunun gibi işlemleri gerçekleştiren birkaç alma ve gönderme isteği vardır:
- 1. GET php/user/info.php - kullanıcı hakkında bilgi alma
- 2. GET php/user/orders.php - kullanıcı siparişlerini alma
- 3. POST php/user/new.php - yeni bir kullanıcı ekleme
- 4. POST php/order/new.php - sipariş ekleme
- 5. POST php/order/applyBonus.php - bir siparişe bonus uygulamak (belirli bir siparişten belirli bir tutarı çekmek)
Bunlar veritabanında basit manipülasyonlar yapan basit sorgulardır. Ve ön tarafta, belirli istekleri yerine getirmek, onlardan bir yanıt beklemek, bu yanıtı ayrıştırmak ve bir sonraki isteğe iletmekle ilgili bir dizi çeşitli görevimiz var.
Bir istek gönderip bazı kodları başarıyla çalıştırmamız gerekse bile, bu pek iyi görünmüyor. İlk isteğin sonucunu alıp ikinciye göndersek ne olur? Peki ya 2 isteği sırayla yürütmeniz, verilerin alınmasını beklemeniz, bu verileri üçüncüde kullanmanız ve ancak bundan sonra bazı eylemler gerçekleştirmeniz gerekiyorsa? Tam bir korku.
Şunu sorabilirsiniz: 3 ajax isteğini sırayla yürütmeniz ve ancak daha sonra bazı yararlı eylemler gerçekleştirmeniz gereken bunlar ne tür çılgın gereksinimlerdir? Şimdi vaatleri kullanacağımız bir düzine görevi özetleyeceğiz. Görevler daha karmaşık hale gelecek ve bu konu ardı ardına gelen üç talebin sonuncusu olacak. Ve en önemlisi, ajax isteklerinin herhangi bir kombinasyonunu akılcı bir şekilde yönetmemize olanak sağlayacak bir kod yazacağız. Başlayalım.
Hangi sorunları çözeceğiz?Listenin tamamını duyuruyorum:
- 1. Kullanıcı bilgilerinin basit şekilde alınması - 1 alma isteği
- 2. Kullanıcı siparişlerinin bir listesinin alınması - 1 alma isteği
- 3. Son siparişi alma - 1 alma isteği + istemcide veri işleme
- 4. Tüm kullanıcı siparişlerinin toplam tutarı 1 alma isteği + istemcide veri işlemedir
- 5. Kullanıcı ekleme - 1 gönderi isteği
- 6. Sipariş ekleme - 1 gönderi isteği
- 7. Kullanıcı kaydıyla sipariş ekleme - 2 gönderi isteği. İkinci sorgu birincinin sonuçlarını kullanır.
- 8. Bir siparişe bonus uygulama - 1 gönderi isteği
- 9. Kullanıcının son siparişine bonus uygulama - 2 alma ve 1 gönderi isteği
Gördüğünüz gibi çoğu görev çok zor değil. Düzenli $.ajax.success geri çağrılarıyla çözülebilirler. Ancak ilk olarak, kodunuz hızla darmadağın olacak, ikincisi, onu yeniden kullanmak zor olacak ve üçüncüsü, 9 numaralı sorunu ardı ardına gelen üç istekle çözmek için ne tür bir ayak örtüsü yazmanız gerektiğini hayal edin.
Muhtemelen alışılmadık javascript koduna alışmak için görevleri yavaş yavaş karmaşıklaştıracağız. Arayüz şuna benziyor: Yukarıdaki görevlerin her biri için bir düğme oluşturacağız. Düğmeye tıklamak, görev numarasına karşılık gelen istenen istek dizisini başlatacaktır.
Tabii ki, özellikle etkileyici değil, ancak her şeyin güzel görünmesine ihtiyacımız yok, bunun yerine vaatlerin kendi yararımıza nasıl işe yarayacağını anlamamız gerekiyor. Makalenin iddialı başlığı içeriğiyle tutarlıdır. Sunucuya yalnızca 5 API isteği kullanarak herhangi bir görevi gerçekleştirmenize ve birleştirmenize olanak sağlayacak birkaç js modülü yazacağız. Ama önce bu sunucu kodunu yazmanız gerekiyor.
Sunucu kodunu yazıyoruz. Tabii ki PHPHadi hızlıca 5 PHP betiğinin taslağını çizelim. Aynı zamanda hangi parametreleri kabul edeceklerine ve neleri döndüreceklerine de bakacağız. Projenin kökünde bir php klasörü oluşturacağız ve içinde 2 tane daha - kullanıcı ve sipariş. Ve sırasıyla tüm istek dosyalarına bakalım.
PHP. Kullanıcı bilgilerini alma/php/user/info.php'yi AL
If ($_SERVER["REQUEST_METHOD"] === "GET") ( // $_GET dizisinden veri alın $userId = (int)$_GET["userId"]; // Veritabanından kullanıcı hakkındaki bilgileri alın ... uyku(1); // Kullanıcının e-postasını ve bonusunu döndürür echo json_encode(array("email" => " [e-posta korumalı]", "bonus" => rand(500, 1000))); ) else ( başlık("HTTP/1.0 405 Yöntemine İzin Verilmiyor"); echo json_encode(array("hata" =>
UserId parametresini girdi olarak kabul ediyoruz, ardından 1 saniye bekleyip (bazı yararlı işleri simüle ediyoruz) ve kullanıcının e-postasını ve bonusunu bir json nesnesinde döndürüyoruz. Aynı sayıları takip etmek çok da üzücü olmasın diye rastgele bir bonus oluşturacağız.
Bir nokta var: Eğer betiğe GET olmayan bir istek kullanarak erişmeye çalışırsak, hata alanında karşılık gelen metinle birlikte 405 http hatası döndüreceğiz. Şimdilik aldırmayın, bunu yazının sonunda hatırlayacağız.
Elbette gerçek hayatta veritabanına girecek kod yazacaksınız ancak bu yazının konusu bu değil. Şimdi sadece giriş parametrelerine ve sunucudan gelen yanıtların formatına biraz dikkat ederek istekleri simüle etmemiz gerekiyor. Tüm bunlar, js kodunu vaatlerle yazarken faydalı olacaktır. Geriye kalan 4 API isteğini ise benzetme yoluyla yazacağız.
PHP. Kullanıcı siparişlerinin listesiGET /php/user/orders.php
If ($_SERVER["REQUEST_METHOD"] === "GET") ( // $_GET dizisinden veri alın $userId = (int)$_GET["userId"]; // Veritabanından kullanıcı hakkındaki bilgileri alın ... uyku(1); // Kullanıcı siparişlerini döndürür echo json_encode(array("siparişler" => array(array("siparişId" => rand(1, 5), "summa" => rand(1000, 1500) ), array ("orderId" => rand(10, 20), "summa" => rand(2000, 5000)), array("orderId" => rand(30, 50), "summa" => rand( 10000, 20000 ))))); ) else (header("HTTP/1.0 405 Yönteme İzin Verilmiyor"); echo json_encode(array("hata" => "Yöntem desteklenmiyor")); )
Kullanıcı kimliğini kabul ediyoruz ve iki alana sahip bir nesne dizisi döndürüyoruz: kimlik ve sipariş miktarı.
PHP. Kullanıcı oluşturmaPOST /php/user/new.php
If ($_SERVER["REQUEST_METHOD"] === "POST") ( // $_POST dizisinden veri alın $email = $_POST["email"]; $name = $_POST["name"]; // Kullanıcıyı veritabanına ekle yazın... uyku(1); // Oluşturulan kullanıcının kimliğini döndürün, örneğin - random echo json_encode(array("userId" => Rand(1, 100))); ) else (header("HTTP/ 1.0 405 Yöntemine İzin Verilmiyor"); echo json_encode(array("hata" => "Yöntem desteklenmiyor")); )
Girişte $_POST dizisinden e-postayı ve adı alıp oluşturulan kullanıcının kimliğini döndürüyoruz.
PHP. Sipariş eklemePOST /php/order/new.php
If ($_SERVER["REQUEST_METHOD"] === "POST") ( // $_POST dizisinden veri alın $userId = (int)$_POST["userId"]; $summa = (int)$_POST[" summa "]; // Siparişi veritabanına ekleyin... uyku(1); // Oluşturulan siparişin kimliğini döndürün, örneğin - random echo json_encode(array("orderId" => rand(1, 1000) )); ) else (header("HTTP/1.0 405 Yöntemine İzin Verilmiyor"); echo json_encode(array("hata" => "Yöntem desteklenmiyor")); )
Kullanıcı kimliğini ve sipariş tutarını kabul edip oluşturulan siparişin kimliğini döndürüyoruz.
PHP. Bir siparişe bonus uygulamaPOST /php/order/applyBonus.php
If ($_SERVER["REQUEST_METHOD"] === "POST") ( // $_POST dizisinden veri alın $orderId = (int)$_POST["orderId"]; $bonus = (int)$_POST[" bonus "]; // Siparişi veritabanına ekle... uyku(1); // Başarı kodunu döndür echo json_encode(array("kod" => "başarı")); ) else ( başlık("HTTP/) 1.0 405 Yönteme İzin Verilmiyor"); echo json_encode(array("error" => "Yöntem desteklenmiyor")); )
Giriş, sipariş kimliği ve bonus tutarıdır; çıktı ise her şeyin yolunda gittiğini belirten bir başarı kodudur.
Hazırlıklarımız bitti, client kısmına ve js koduna geçelim.
Proje çerçevesi ve html şablonuProjenin kökünde bir index.html dosyası oluşturalım. Head kısmına şöyle bir şey yazacağız:
jQuery'ye söz ver
Baş kısmında küçük bir stil - öyle olsun. Vücutta aşağıdakileri yerleştireceğiz.
jQuery'ye söz ver1. Kullanıcı hakkında genel bilgi 2. Sipariş listesi 3. Son sipariş 4. Tüm siparişlerin toplam tutarı 5. Kullanıcı ekleme
6. Sipariş ekleme 7. Sipariş ekleme ve kullanıcı oluşturma 8. Siparişe bonus uygulama 9. Kullanıcının son siparişine bonus uygulama
Burada yukarıdaki işlemleri başlatan 9 düğme görüyoruz. Her seferinde görevler daha da zorlaşacak. İşlevselliği sırayla uygulayacağız. Ve sonunda, iki Ajax isteğinin tamamlanmasını bekleyen ve sonuçlarını üçüncüde kullanan ve üçüncüsü tamamlandıktan sonra başka bir şey yapan bir fonksiyon yazdığımızı fark ettiğimizde şaşırıyoruz... Kulağa zor geliyor ama olacak. bir tane göndermekten daha zor olamaz - veri için tek alma isteği. 9 görevin tamamı için kod miktarı yaklaşık olarak aynı olacaktır - her biri on basit satır.
İndex.html'nin sonunda 4 adet js dosyası birbirine bağlanır. jquery'yi hemen js klasörüne koyun, user.js ve order.js dosyalarını şimdilik boş bırakın. Ve main.js ile biraz çalışıp uygulamamız için temel başlatma kodunu yazacağız.
Main.js şablonuDosyanın genel yapısı aşağıdaki gibidir
// Ana uygulama modülü "katı kullanım"; var app = (function() ( var userId = Math.round(Math.random() * 100); // Kullanıcı işlevi hakkında bilgi alın _userInfo() ( // ... ) // Kullanıcı siparişlerinin bir listesini alın function _userOrders( ) ( // ... ) // Kullanıcının son siparişi function _userLastOrder() ( // ... ) // Tüm siparişlerin toplamı function _userTotalSummaOrders() ( // ... ) // Kullanıcı ekleme function _userNew() ( // ... ) // Sipariş fonksiyonu ekleme _orderNew() ( // ... ) // Kullanıcı fonksiyonu oluşturarak sipariş ekleme _orderNewWithUser() ( // ... ) // Uygulama sipariş fonksiyonuna bir bonus _orderApplyBonus() ( // ... ) // Kullanıcının son sipariş fonksiyonuna bir bonus uygulama _userApplyBonusToLastOrder() ( // ... ) // sözler fonksiyonundaki hataları yakala onCatchError(response) ( / / ... ) // Olayları düğmelere ekleyin function _bindHandlers() ( $("#user-info-btn").on("click", _userInfo); $("#user-orders-btn").on ("tıklayın", _userOrders); $("# user-last-order-btn").on("tıklayın", _userLastOrder); $("#user-total-summa-orders-btn").on("tıklayın", _userTotalSummaOrders); $("#user-new-btn").on("tıklayın", _userNew); $("#order-new-btn").on("tıklayın", _orderNew); $("#order-new-with-user-btn").on("tıklayın", _orderNewWithUser); $("#order-apply-bonus-btn").on("tıklayın", _orderApplyBonus); $("#user-apply-bonus-to-last-order-btn").on("tıklayın", _userApplyBonusToLastOrder); ) // Uygulama fonksiyonunu başlat init() ( _bindHandlers(); ) // Return dışında dönüş ( onCatchError: onCatchError, init: init ) ))(); // Uygulamayı başlatın $(document).ready(app.init);
Burada uygulamanın ana modülü olan app modülünü hazırladık. Örneğin, tüm modül için global olan userId değişkeni rastgele alınır. Aşağıda ilgili düğmelere basılarak başlatılan 9 işlev bulunmaktadır. Bunları yorumlardan kolayca takip edebilirsiniz.
onCatchError işlevi, ajax isteklerinde bir şeyler ters gittiğinde etkinleşir. _bindHandlers 9 tıklama olayının tümünü bağlar, init temel modül başlatma işlevidir. Dönüş bloğu, modülün ön cephesini, yani dışarıdan erişilebilen yöntemleri döndürür. onCatchError kullanıcı ve sipariş modüllerinde kullanılacağı için harici olarak döndürülür. Daha sonra $(document).ready(app.init) gelir - bu, uygulamayı başlatır.
Şema şu şekildedir: Veriyi alıp sunucuya gönderen kodun kendisi user.js ve order.js modüllerinde yer alacaktır. Yani uygulamanın asıl uygulaması, özü vardır. Ve main.js'de, //... yazıldığı uygun yerlere, kullanıcı ve sipariş modüllerinin yetenekleri kullanılarak birkaç satır kod yazılacaktır.
Tamamen içmediyseniz endişelenmeyin, şimdi her şey netleşecek.
Kullanıcı hakkında bilgi almaİlk görev, sunucuya bir Ajax isteği göndermek, bilgi almak ve onunla bir şeyler yapmaktır. Görünüşe göre burada akıllıca olacak hiçbir şey yok mu? Bunu binlerce kez yazdık
$.ajax(( url: "php/user/info.php", data: ( userId: userId ), method: "get", dataType: "json", başarı: function(response) ( // Yanıtla bir şeyler yapın ), error: function(response) ( // Hata varsa bir şeyler yapın), ));
Ama boşuna vaatlerle uğraşmak istemedik, hatta bunun için küçük de olsa koca bir proje başlattık. Ayrıca $.ajax zaten bir söz veriyor ve bunu kullanmamak yazık olur. O halde biraz nefes alalım ve biraz farklı kod yazalım.
Dosya /js/user.js
// Modül Kullanıcısı "use strict"; var user = (function() ( // Kullanıcı hakkında genel bilgi // Bir nesneyi döndür - e-posta ve kullanıcı bonusu işlevi getInfo(params) ( return $.ajax(( url: "php/user/info.php", data) : ( userId: params.userId ), yöntem: "get", dataType: "json" )).then(function(data) ( return ( email: data.email, bonus: data.bonus ); )).fail( app.onCatchError); ) // Return dışında dönüş ( info: getInfo ) ))();
Bu, kullanıcı modülünün çerçevesi ve vaatleri kullanan ilk fonksiyondur. Çok tanıdık geliyor - aynı $.ajax, ancak başlangıçta geri çağırma işlevi yok. Bunun yerine, isteğin sonuçlarına göre hangi verilerin döndürüleceğini belirtiriz. Then ... return bloğunda, iki alanla sözden bir nesne beklediğimizi söylüyoruz: email ve bonus. Hatırladığımız gibi bunlar php/user/info.php isteği üzerine arka uçtan dönenlerdir.
getInfo(params) - parametrelere sahip bir nesneyi fonksiyona iletiriz. Bizim durumumuzda yalnızca bir tane var, kullanıcı kimliği, ancak nesnenin uygun olduğunu anlıyorsunuz çünkü içinde istediğiniz kadar veri aktarabiliyorsunuz. Bu nedenle gelecekte nesneleri parametre olarak kullanacağız. Ancak sunucudan gelen bir yanıt olarak da.
Fail(app.onCatchError), istekte herhangi bir sorun olması durumunda uygulama modülünün onCatchError yöntemini çağırmanız gerektiğini belirtir. Sorunlar farklı olabilir: sunucu tarafında bir hata, hatalı bir istek yöntemi veya hatalı bir URL. Bu onCatchError metodunun ne işe yaradığına şimdilik bakmayın, yazının sonunda anlayacağız.
Ayrıca user.info yönteminin verilerin nasıl kullanılacağı hakkında hiçbir şey bilmediğini unutmayın. Görevi veriyi döndürmek ve user.info adlı kodun bu veriyle ne yapacağını bulmasını sağlamaktır. Ve bence bu harika çünkü mantığın açık bir şekilde bölündüğünü görebiliyorsunuz. Kullanıcı modülü sunucuyla nasıl etkileşim kuracağını biliyor ancak tarayıcının ondan ne istediğini bilmiyor. Bu modül, dom tarayıcısındaki javascript manipülasyonları ile arka uçumuz arasında bir katman olarak düşünülebilir. Tıpkı php kodunun istemci tarayıcısı ile veritabanı arasındaki aynı katman olması gibi.
Ancak modül ve getInfo üzerinde düşünerek kendimizi kaptırdık. Pratikte nasıl kullanılacağına bir göz atalım - bu, uygulama modülünün _userInfo işlevindedir. Bunun için dikkatlice bir taslak yazdık, hadi kodla dolduralım
// Kullanıcı işlevi hakkında bilgi alın _userInfo() ( user.info((userId: userId))).done(function(userInfo) ( console.log("userInfo: ", userInfo); )); )
Ve düğmeye tıkladığınızda çağrılan tek şey budur! Kullanıcı modülünün info metodunu çekiyoruz. GetInfo değil, dahili bir işlevdir. Yani info, çünkü bunu user'da return (...) bloğunda belirttik.
user.info((userId: userId)) bize bir söz verir. Zincirin ilerleyen kısımlarında, sözün sonucunu ilettiğimiz bir geri çağırma işleviyle tamam diyoruz. Size hatırlatmama izin verin, bu formun bir nesnesidir (e-posta: " [e-posta korumalı]", bonus: 12345). Bu sonuçla ilgili özel bir şey yapmayacağız, sadece konsolda görüntüleyeceğiz. Ancak kimse sizi bu verilerle herhangi bir değişiklik yapmaktan alıkoyamaz. Hatta bunun için ayrı bir işlev seçmek de mümkündür. userInfo nesnesini ilettiğiniz buna.
Ortaya çıkan koda tekrar bakalım ve onu normal $.ajax isteğiyle karşılaştıralım ve gerekli tüm işlemleri başarıyla gerçekleştirelim. Biraz daha fazla olması dışında kodun aynı olduğu görülüyor. Ama bir şeyler değişti. Kod daha temiz hale geldi. 2 mantıksal bölüme ayrıldı: veri almak ve işlemek. Daha az yatırım. Fonksiyonlar daha kısadır.
Bu yaklaşımın pratik faydalarına henüz inanmıyorsanız, aşağıda sizi buna ikna edebilirim. Ancak önce, kullanıcı siparişlerinin bir listesini (önceki örneğin bir karbon kopyası) almak için kod yazalım.
Kullanıcı siparişlerinin listesini almaAşağıdaki kodu kullanıcı modülüne ekleyelim
// Kullanıcı siparişlerinin listesi // Siparişlerin dizisini şu biçimde döndür: (sipariş kimliği, sipariş miktarı) function getOrders(params) ( return $.ajax(( url: "php/user/orders.php", data: ( userId: params.userId ), yöntem: "get", dataType: "json" )).then(function(data) ( return data.orders; )).fail(app.onCatchError); ) return ( info: getInfo, siparişler: getOrders, )
Ve main.js'de başka bir işlevi kodla dolduracağız
// Kullanıcı siparişlerinin listesini alın function _userOrders() ( user.orders((userId: userId))).done(function(userOrders) ( console.log("userOrders: ", userOrders); )); )
Burada yeni bir şey yok, bir istek gönderdik, siparişlerin bir listesini aldık ve bunu konsolda gösterdik. Ancak bir sonraki paragraf çok daha ilginç olacak.
Kullanıcının son siparişini almaDiyelim ki tüm siparişler hakkında değil, sonuncusu hakkında bilgiye ihtiyacımız var. Arka uç API'si, bir dizide yalnızca tüm siparişleri tamamen almamıza olanak tanır. Hiç sorun değil, istemcide ayrı bir sipariş nesnesini kolaylıkla çıkartabiliriz, fakat bunu nasıl organize edeceğiz?
Elbette aynı $.ajax bize yardımcı olacaktır, ancak ne kadar kod biriktirmemiz gerekir? Son siparişi ne sıklıkla almamız gerektiğini ve alınan verileri hangi işlevlere göndereceğimizi bilmiyoruz. Elbette herhangi bir kodu düzenleyebilir, ajax istekleri için sarmalayıcı işlevler yazabilir ve gerekli sonuç işleyici işlevlerini $.ajax.success'e iletebilirsiniz... Ancak kabul etmelisiniz ki, tanıdık olmasına rağmen bu en uygun yol değildir.
Dolayısıyla ustalaşma vaatleri ışığında kulaklarımızla böyle bir yanıltmaca yapıp kullanıcı modülüne başka bir fonksiyon yazacağız.
// Kullanıcının son siparişi // Son siparişi döndür (object) function getLastOrder(params) ( return getOrders(params).then(function(orders) ( return siparişler.slice(-1); )); ) return ( info: getInfo, siparişler: getOrders, lastOrder: getLastOrder, )
Bakın ne yaptık. Sipariş listesini alan başka bir söz döndüren hazır bir yöntem kullandık. .then(function(orders)) içindeki siparişler, arka uçtan alınan siparişlerin tam dizisini içerir. Daha sonra geriye kalan tek şey dizinin son elemanını return order.slice(-1); aracılığıyla döndürmek olacaktır.
Böyle bir zincirin avantajı burada zaten görülüyor. getLastOrder işlevi tüm siparişlerin nasıl alındığını bile bilmiyor. Burada görünür bir ajax isteği yok; bunu başka bir yöntem yapıyor. Yalnızca bitmiş sonucu kullanırız.
Ve bir düğmeye tıklandığında bunu main.js'de kullanmak önceki örneklerdeki kadar basittir.
// Kullanıcının son sipariş fonksiyonu _userLastOrder() ( user.lastOrder((userId: userId))).done(function(lastOrder) ( console.log("userLastOrder: ", lastOrder); )); )
Pinleme için başka bir fonksiyon yazalım.
Tüm kullanıcı siparişlerinin toplamını alma// Toplam sipariş miktarı function getTotalSummaOrders(params) ( return getOrders(params).then(function(orders) ( return siparişler.reduce(function(total, currOrder) ( return total + currOrder.summa; ), 0); ) ) ; ) return ( info: getInfo, siparişler: getOrders, lastOrder: getLastOrder, totalSummaOrders: getTotalSummaOrders )
// Tüm siparişlerin toplam toplamı function _userTotalSummaOrders() ( user.totalSummaOrders((userId: userId)).done(function(totalSumma) ( console.log("userTotalSummaOrders: ", totalSumma); )); )
Biz de aynı yöntemi kullandık. Hazır getOrders(params) metodunu aldık ve azaltım kullanarak emir miktarını hesapladık. Ve yine, geri çağırmalı bir düzine kod satırı yerine 2 kısa ve net fonksiyon görüyoruz. Ayrıca user.totalSummaOrders() işlevi, kendisine döndürülen verilerin nasıl kullanılacağı konusunda endişe duymadan her yerde kullanılmaya devam edebilir.
Yeni bir kullanıcı ekleme// Kullanıcı ekleme // Oluşturulan kullanıcı fonksiyonunun kimliğini döndür newUser(params) ( return $.ajax(( url: "php/user/new.php", data: ( // yeni kullanıcı e-postası hakkında bazı veriler) : params.e-posta, ad: params.name ), yöntem: "post", dataType: "json" )).then(function(data) ( return data.userId; )).fail(app.onCatchError); ) return ( info: getInfo, siparişler: getOrders, lastOrder: getLastOrder, totalSummaOrders: getTotalSummaOrders, newUser: newUser )
// Bir kullanıcı işlevi ekleme _userNew() ( var data = ( email: " [e-posta korumalı]", name: "Webdevkin" ); user.newUser(data).done(function(userId) ( console.log("userNew: ", userId); )); )
Biraz daha uzun görünüyor, ancak bunun tek nedeni iki alanlı bir nesneyi sunucuya aktarmamızdır. Kodun geri kalanı bilgi alırken olduğu kadar basittir. Şu yöntemi unutmayın: "post" burada zaten kullanılıyor
Şimdi daha da ilginç, ajax isteklerini birleştirmeye başlayalım. Yeni bir order.js modülü oluşturalım.
Sipariş ekleme// Modül Sırası "katı kullanım"; var order = (function() ( // Bir sipariş ekleme // Oluşturulan siparişin kimliğini döndürür function _createOrder(params) ( return $.ajax(( url: "php/order/new.php", data: ( / / bazı yeni sipariş verileri userId: params.userId, summa: params.summa), method: "post", dataType: "json")).then(function(data) ( return data.orderId; )).fail(app . onCatchError); ) // Sipariş ekleme // Oluşturulan sipariş fonksiyonunun kimliğini döndür newOrder(params) ( if (params.userId) ( // userId biliniyorsa, hemen siparişi ekleyin return _createOrder(params); ) else ( // Önce bir kullanıcı oluşturmanız gerekir return user.newUser(params).then(function(userId) ( return _createOrder((userId: userId, summa: params.summa)); )); ) ) // Dışarıya dön return ( yeniSipariş: yeniSipariş ) ))() ;
Burada aynı anda 2 fonksiyon var. _createOrder doğrudan sipariş ekliyor. Kullanıcı eklemeyle aynı şekilde çalışır. Bu yöntemi doğrudan dışarıdan çağırmayacağız - tüm işler newOrder üzerinden gerçekleştirilecek.
Yaptığı bu kadar özel olan şey nedir? Burada biraz ara vermek gerekiyor...
Çevrimiçi mağazalarda sipariş verme işlemi nasıl gerçekleşir?
Genellikle sipariş iki şemaya göre yapılır: kayıtlı kullanıcılar ve misafirler için. Kayıtlı kullanıcılar için her şey açıktır: Kullanıcı kimliğini alırız (kural olarak oturumun arka ucunda saklanır), sipariş verilerini istemciden aktarırız ve siparişi veritabanına ekleriz. Lepota.
Ancak siteye bir "misafir" gelirse ona da sipariş vermeliyiz. Ancak bunun için yine de bir kullanıcı oluşturmanız gerekiyor, siparişin aptalca birine bağlanması gerekiyor. Bir kişiyi siteye ayrı olarak kaydolmaya, ödeme sayfasına geri dönmeye ve tam kullanıcı olarak sipariş verilerini sunucuya göndermeye zorlayabilirsiniz.
Veya insani bir şekilde davranabilirsiniz: kullanıcı hakkında minimum veri toplayın (isim + e-posta), verileri sipariş edin ve tek seferde kullanıcıyı kaydedin ve ona bir sipariş ekleyin. Gereksiz hareket yok - alıcı için daha fazla mutluluk.
Kısacası, newOrder işlevinin yalnızca sipariş ekleyemeyeceği, aynı zamanda kullanıcıyı önceden ekleyebileceği ortaya çıktı. Bu ihtiyaç params'ta userId parametresinin varlığı ile kontrol edilir. Eğer orada değilse, önce kullanıcıyı ekliyoruz, kullanıcı kimliğini alıyoruz ve onunla _createOrder siparişini eklemeye başlıyoruz.
params.userId biliniyorsa, _createOrder doğrudan başlatılır. Oldukça karmaşık manipülasyonlar aynı 5-6 satırlık kodla gerçekleştirilir. Her seferinde daha karmaşık görevler üstleniyoruz ancak kodun karmaşıklığında önemli bir artış gözlemlemiyoruz. Vaatleri geri getiren bir dizi basit yöntem, sorguları istediğimiz şekilde birleştirmemize ve bir Lego kurucusu gibi karmaşık işlevleri bir araya getirmemize olanak tanır.
App.js'ye sipariş eklemenin nasıl çalıştığını kontrol edelim - main.js'de iki düğme için daha işleyiciler yazacağız.
// Bir sipariş işlevi ekleme _orderNew() ( var data = ( userId: userId, summa: 7000 ); order.newOrder(data).done(function(orderId) ( console.log("orderCreate: ", orderId); ) ) ; ) // Sipariş ekleme ve kullanıcı işlevi oluşturma _orderNewWithUser() ( var data = ( email: " [e-posta korumalı]", ad: "Webdevkin", toplam: 10000 ); order.newOrder(data).then(function(orderId) ( console.log("orderNewWithUser: ", orderId); )); )
Bonusu siparişe uyguluyoruz// Bir siparişe bonus uygulama // İşlev başarılı olursa true değerini döndür applicationBonus(params) ( return $.ajax(( url: "php/order/applyBonus.php", data: ( orderId: params.orderId, bonus: params) .bonus), yöntem: "post", dataType: "json" )).then(function() ( return true; )).fail(app.onCatchError); ) // Return out out return ( newOrder: newOrder, applicationBonus: Bonus uygula )
// Bir sipariş fonksiyonuna bonus uygulama _orderApplyBonus() ( order.applyBonus((orderId: 5, bonus: 200)).then(function(result) ( console.log("orderApplyBonus: ", result); )); )
Burada her şey tanıdık. 3 ajax isteğinin nasıl gerçekleştirileceğini göstermek için ara işlev olarak bu işleve ihtiyacımız var. Sadece arka arkaya 3 isteğin gerekli olduğu bir durum bulmanız gerekiyor.
Evet Kolay! Hadi hayal kuralım. Şirketin doğum gününde yönetim, tüm müşterilerine bir bonus vermeye ve bu tutarı kullanıcının son siparişinden silmeye karar verdi. Bonusun nasıl verildiği bizi ilgilendirmez, bonus tutarını ve son siparişin kimliğini almamız gerekiyor. Bunlar paralel olarak yürütülebilen 2 alma isteğidir. Bu verileri bekledikten sonra, bu sefer sunucuya belirtilen bonusu istenen siparişe uygulayacak başka bir (üçüncü) istek göndereceğiz.
Örnek elbette abartılı ama sanat adına işe yarayacak. Kod yazıyoruz.
Kullanıcının son siparişine bonus uygulama// Son sıraya bir bonus uygulama // İşlev başarılı olursa true değerini döndür applicationBonusToLastOrder(params) ( var infoPromise = this.info(params), lastOrderPromise = this.lastOrder(params); return $.when(infoPromise, lastOrderPromise). sonra (function(userData, lastOrderInfo) ( return order.applyBonus(( orderId: lastOrderInfo.orderId, bonus: userData.bonus )); )); ) return ( info: getInfo, siparişler: getOrders, lastOrder: getLastOrder, totalSummaOrders: getTotalSummaOrders , yeniKullanıcı: yeniKullanıcı, ApplyBonusToLastOrder: ApplyBonusToLastOrder)
Burada yeni $.when yapısını kullandık. Önemli olan, ona birkaç söz ilettiğimiz, sonuçlarını beklediğimiz ve sonra işlevine bir geri çağrı ilettiğimiz, yani bu sonuçlarla ne yapmak istediğimizdir. Bizim durumumuzda, kullanıcının bonusunu birinciden, son siparişin kimliğini ise ikinciden alıyoruz. Ve bu verileri üçüncü yönteme aktarıyoruz. Bu kadar.
Bu, test projemizde sözler kullanmanın son ve en kafa karıştırıcı örneğiydi. Vaatleri nasıl kullanacağımızı bilmeden böyle bir dizi için daha önce ne kadar kod yazacağımızı bir düşünün.
Main.js'deki çalışmayı bu şekilde kontrol ediyoruz
// Kullanıcının son siparişine bir bonus uygulama function _userApplyBonusToLastOrder() ( user.applyBonusToLastOrder((userId: userId)).then(function(result) ( console.log("userApplyBonusToLastOrder: ", result); )); )
Hata işlemeDünyamız ideal değil ve her aşamada istek kesintiye uğrayabilir. Bu tür durumları bir şekilde ele almamız ve app.onCatchError yöntemini hatırlamamız gerekiyor. Hadi uygulamasına bakalım
// Vaatlerdeki hataları yakala işlevi onCatchError(response) ( var json = Response.responseJSON, message = (json && json.error) ? json.error: Response.statusText; console.log("ERROR: ", message); )
Burada neler oluyor? Yanıt parametresinde başımıza gelen hata hakkında bilgi bulacağız. Öncelikle yanıtın içeriğini bir json nesnesine çekiyoruz. Daha sonra anlaşılmaz bir hata alanının olup olmadığını kontrol ediyoruz.
Php code kısmına dönersek bu alanda gizemli bir şeyin olmadığını göreceğiz. Yöntem uyuşmazlığı durumunda bunu arka uçtan kendimiz döndürürüz (http kodu 405). Örneğin GET yöntemini kullanarak bir kullanıcı oluşturmaya çalıştığımızda. Bu PHP kodunu yalnızca kendimizin yeterli hata nedenleri üretebileceğimizi ve bunları kullanıcılara rapor edebileceğimizi göstermek için yazdım. Aynı şekilde, giriş parametrelerinin doğrulanması sırasında veya veritabanına yazma işlemi sırasında bir hata meydana gelirse böyle bir yanıtı atabilirsiniz.
Böylece json.error'da arka uçta oluşturulan hatanın bir açıklamasını bulacağız. Ancak bu, isteğin sunucuya ulaştığı durumlarda işe yarayacaktır. Örneğin URL'de bir hata yaptıysak veya sunucu yanıt vermiyorsa, bu durumda xhr answer.statusText nesnesinin standart yanıtını analiz ederiz.
Bu hata bilgisiyle ne yapacağınız size kalmış. Genellikle "bir şeyler ters gitti" gibi göze çarpmayan bir mesaj gösterilir. Örneğin console.log("ERROR: ", message) yazıp yazıyı orada bitireceğiz.
Sonuçlar, demolar ve kaynaklarUmarım sizi, sadece özgeçmişinizde fazladan bir satır yazmak için değil, verilen sözlerin daha yakından incelemeye değer olduğuna ikna etmişimdir. Elbette yazımızda onların tüm yeteneklerini değerlendirmeye bile yaklaşamadık. Aslında, yalnızca özel bir duruma değindik - standart $.ajax yöntemiyle döndürülen vaatler ve kısaca - $.when. Ancak bununla çalışmanın ve onların yardımıyla oldukça çeşitli ve karmaşık görevler için basit ve kolayca genişletilebilir kod yazmanın mümkün olduğuna ikna olduk.
Burada incelenen kodu görebilirsiniz. Ve buraya bak... Sadece düğmelere bastığınızda hiçbir şey görmezsiniz. Konsolu, Ağ sekmesini açın ve isteklerin yürütülme sırasını, iletilen verileri ve döndürülen sonuçları görün. Ardışık birkaç istekte tüm parametrelerin doğru şekilde iletildiğinden emin olun.
Ve elbette, yorumlarda kendi düşüncelerinizi ve düşüncelerinizi paylaşın.
