Formları Express ile yönetin

Web uygulamalarında kullanıcı verilerini elde etmenin en doğrudan yollarından biri formlar aracılığıyladır, ancak bu verileri mantığımıza ve uygulama denetleyicilerimize ulaştırmak için birçok mekanizma olmasına rağmen, derinlerde formlarla aynı kuralları izlemeleri gerekir. HTML, bir yöntem kullan HTTP bilgileri göndermek için.
Bu, dikkate alınabilecek ve fikirlerimizi geliştiren işlevlerle eksiksiz web uygulamaları yapmak istiyorsak, formları işleme ve değiştirme becerisini hayati hale getirir.
1- Bu öğreticiyi yürütmek için önceki bazı gereksinimleri karşılamamız gerekiyor, önce bir kurulum yapmamız gerekiyor. Node.js işlevsel, o zaman bir projemiz olmalı ifade etmekKlasör yapısına sahip olmaması önemli değil, ancak lokasyonda mevcut olması için çerçeveye ihtiyacımız var.
2- Temel kavramlara sahip olmalıyız. npm, ve HTML, kavramlar çok basit bir şekilde açıklanmasına rağmen, etiket nedir veya HTML özniteliği nedir gibi açıklanmayan temeller vardır.
3- Son olarak, uygulamamızı yazabilmek ve doğrulayabilmek için bir tarayıcıya ve bir metin düzenleyiciye ihtiyacımız var.
işleyişini görmeden önce ifade etmek Formları işlemek için, kullanıcı verilerini yakalamak istediğimizde veya buna ihtiyaç duyduğumuzda uygulamalarımızın oluşturulmasının hayati bir parçası olduklarından, bunların temel yönlerini biraz daha derinlemesine bilmemiz gerekir.
En sevdiğimiz meyveyi yakalayan basit bir alan formu oluşturduğumuz aşağıdaki kodu görelim.

En sevdiğiniz meyve:Göndermek

İlk etapta bir form bir etiketten oluşmalıdır, bunun içinde en az bir öznitelik olmalıdır. yöntem tarayıcımıza bilgiyi bize nasıl göndereceğini gösterecek, İLETİ veya ELDE ETMEK, temel HTTP yöntemleri olan bir öznitelik de yerleştirebiliriz. eylemBu yoksa form kendisine hizmet eden aynı rotaya, varsa örnekte olduğu gibi belirtilen rotaya gönderilir.
Genel ÖzelliklerFormumuzdaki tüm etiketler çalışır HTML bizim istediğimiz, ancak daha önemli olan türlerde olduğu gibi veri girişi olanlardır çünkü bu etiketler ve değerleri yapılırken gönderilecek olanlardır. Sunmak eylem düğmesi olduğu için ihtiyacımız olan diğer girdi türüdür. Mülklere verdiğimiz adla verileri alacağız tatlı patates Yarattığımız alanların her birinde, her alana bir id niteliği yerleştirmek ve içindeki öğeleri manipüle edebilmek için benzersiz olması da önemlidir. GÜNEŞ zarif bir şekilde.
Formu nasıl görüyoruz HTML Çok basit bir unsur olmasına rağmen, gelecekte kafa karışıklığı yaşamamak için vurgulanmaya, vurgulanmaya ve açıklamaya değer birçok ayrıntıya sahiptir.
Bir formu aldıktan sonra, kullandığımız çerçeveden bağımsız olarak birçok seçeneğimiz var. ifade etmek, laravel, Django, vb. Kullanıcımıza verilerinin alınıp alınmadığını, işlenip işlenmediğini veya bir hata olup olmadığını söyleyecek olan bu olduğundan, izlenmesi gereken bir süreç vardır. Bu süreç, yanıt ve yeniden yönlendirme olmak üzere iki gruba ayrılabilir.
CevapBu eylem grubunda, kullanıcı formu gönderdikten ve bir işlem yaptıktan sonra bir yanıt gönderebiliriz. HTML aynı zamanda bir mesaj yazdırıyoruz veya yeni bir görünüm oluşturuyoruz, burada size verilerin doğru olup olmadığını veya bir hata olup olmadığını söyleyebiliriz. Bu cevap tip olabilir AJAX, böylece sayfa tamamen yüklenmeden oluşturulur veya yeniden yüklenirken yeni görünümü gösterin veya basitçe animasyonlu bir mesaj oluşturun. JavaScript.
yeniden yönlendirmeBu diğer grupta, yeniden yönlendirdiğimiz bilgileri işleyip kullanıcıyı ya başka bir görünüme ya da sadece uygulamamızı kullandıkları için teşekkür ettiğimiz bir ekrana gönderdiğimizde, cevapla aynı görünebilir, ancak yaptığımız şey şudur: kullanıcıyı uygulamamızda başka bir yere gönderin.
Uygulamamızı hazırlamak için ifade etmek Formları işlemek için önce adlı bir eklenti yüklememiz gerekiyor. vücut ayrıştırıcı, bu, tarayıcının bize gönderdiği verileri değiştirmemize yardımcı olacak kişidir. Bunu konsolumuzda yapmak için Node.js talimatı kullanmalıyız:

 npm install --save body-parser

Bu talimatın yürütülmesiyle oluşturulan yanıtı görelim:

O zaman zaten dosyamızın içinde app.js veya yerleştirdiğimiz ad, etkileşimde bize yardımcı olması için bu ara yazılımı eklemeliyiz:

 app.use (require ('body-parser') ());

Bununla formlarımızın içeriğini doğrudan uygulamamızda işlemeye hazırız. ifade etmek, Diğer çerçeveler bu tür bir kurulum gerektirmediğinden biraz karmaşık görünebilir, ancak ifade etmek bize bilgiyi istediğimiz gibi işleme özgürlüğü vermek için mi, bu var olan pek çok yoldan sadece bir tanesi.
Kullanıcının en sevdiği meyveyi yakalama işlevine sahip bir form oluşturacağız. Daha kolay olması için öğreticinin bir önceki bölümünde oluşturduğumuz formu, kurulumunu yaptığımız klasörümüzde kullanacağız. ifade etmek, adında bir dosya oluşturalım server.js, app.js ya da hangi ismi koymak istersek, önemli olan içeriktir. İçeride kullanımını talep ederek başlayacağız. ifade etmek, sonra bir uygulama nesnesi oluşturmalıyız ve bu ara katman yazılımını kullanmalıdır. vücut ayrıştırıcı.
Rotaları tanımlayınSonraki eylem rotaları tanımlamalıyız, bizim durumumuzda formu görüntülemek için kök rotayı kullanacağız, bu yüzden doğrudan uygulamamıza erişirken sonucu doğrudan alacağız, o zaman süreci alan bir rota oluşturacağız. yöntem İLETİ, yapacağı şey, sonunda bir yazdırmak için form verilerini almaktır. HTML alınan verileri gösterir.
Bu, programımızın akışını anlamamızı ve böylece gelecekte daha karmaşık formları işleyebilmemizi sağlayacaktır. Aşağıda açıklanan kodu görelim:

 var ekspres = gerektirir ('ekspres'); var bodyParser = require ('body-parser'); var app = ekspres (); app.use (bodyParser()); app.set ('port', process.env.PORT || 3001); app.get ('/', function (req, res) {var html = '' + '' + ''+' En sevdiğiniz meyve: '+' '+''+''+' Gönder '+''+''; res.send (html); }); app.post ('/ process', function (req, res) {var meyve = req.body.fruit; var html =' Favori Meyveniz: '+ meyve +'.
'+' Tekrar deneyin.'; res.send (html); }); app.listen (app.get ('port'), function () {console.log ('Express http://localhost'ta başladı:' + app.get ('port') + '; kapatmak için Ctrl-C tuşlarına basın sunucu. ');});

Bununla uygulamamızın oluşturulmasını tamamladık, şimdi nasıl görüntüleneceğini gözden geçireceğiz, bunun için sadece talimatı yazmamız gerekiyor:

 düğüm sunucusu.js

Neresi server.js Uygulamamıza yerleştirdiğimiz isimdir ve yerleştirdiğimiz bağlantı noktasına bağlı olarak formumuzu tarayıcıda görebiliriz:

Tabii ki bu daha estetik olabilir, Önyüklemeveya stiller CSSAncak, bu öğreticinin amaçları ve kapsamı açısından, form işlemeyi anlamak için mükemmeldir. Alana bir şeyler yazıp gönder'e tıklayarak onunla etkileşime geçersek, sayfamıza nasıl ulaşacağımızı göreceğiz. URL işlem:

Bu durumda en başa dönmek için bir link bıraktık, bu işlem yönlendirme tipine ait, çünkü kullanıcıyı başka bir rotaya gönderip sorgusunun sonucunu orada aldığımız için, elbette eksik olduğumuz birçok doğrulama var. bu örnekte, örneğin boş alanın gönderilip gönderilmediği, bir gönderinin başka bir menşeden yapılıp yapılmadığını nasıl doğruladığımız vb. Bunlar geçerli şeylerdir, ancak öğreticinin amacından kaçarlar, yalnızca programcılar olarak geliştirmelerinde diğer adımların takip ettiğini bilmeniz için bunlardan bahsediyoruz. ifade etmek.
Bununla, gördüğümüz gibi bu öğreticiyi bitirdik ifade etmek Bilgileri Ön Uçtan mantığımıza aktardığımızda işleri bizim için çok daha kolay hale getiriyor, rotaların basitleştirilmiş kullanımı ve bilgilerin kodunu çözmemize yardımcı olmak için ara katman yazılımının kullanılması, geliştirme süresinden tasarruf etmemizi mükemmel hale getiriyor.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.