Node.js - Ekspres Çerçeve

Hızlı Genel Bakış

Express, web ve mobil uygulamaları geliştirmek için sağlam bir dizi özellik sağlayan minimal ve esnek bir Node.js web uygulaması çerçevesidir. Düğüm tabanlı Web uygulamalarının hızlı gelişimini kolaylaştırır. Aşağıda, Express çerçevesinin temel özelliklerinden bazıları verilmiştir -

  • HTTP İsteklerine yanıt vermek için ara yazılımların kurulmasına izin verir.

  • HTTP Yöntemi ve URL'ye göre farklı eylemler gerçekleştirmek için kullanılan bir yönlendirme tablosunu tanımlar.

  • Şablonlara argümanlar iletmeye dayalı olarak HTML Sayfalarını dinamik olarak oluşturmaya izin verir.

Express yükleniyor

İlk olarak, Express çerçevesini NPM kullanarak global olarak kurun, böylece düğüm terminali kullanarak bir web uygulaması oluşturmak için kullanılabilir.

$ npm install express --save

Yukarıdaki komut, kurulumu yerel olarak node_modulesdizin ve node_modules içinde ifade edilen bir dizin oluşturur. Aşağıdaki önemli modülleri express ile birlikte yüklemelisiniz -

  • body-parser - Bu, JSON, Raw, Text ve URL kodlu form verilerini işlemek için bir node.js ara yazılımıdır.

  • cookie-parser - Tanımlama bilgisi başlığını ayrıştırın ve req.cookies'i tanımlama bilgisi adlarıyla anahtarlanmış bir nesneyle doldurun.

  • multer - Bu, çok parçalı / form verilerini işlemek için bir node.js ara yazılımıdır.

$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

Merhaba dünya Örneği

Aşağıda, bir sunucuyu başlatan ve bağlantı için 8081 numaralı bağlantı noktasını dinleyen çok basit bir Express uygulaması yer almaktadır. Bu uygulama şununla yanıt verir:Hello World!ana sayfaya yapılan istekler için. Diğer her yol için, bir404 Not Found.

var express = require('express');
var app = express();

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Yukarıdaki kodu server.js adlı bir dosyaya kaydedin ve aşağıdaki komutla çalıştırın.

$ node server.js

Aşağıdaki çıktıyı göreceksiniz -

Example app listening at http://0.0.0.0:8081

Aşağıdaki sonucu görmek için herhangi bir tarayıcıda http://127.0.0.1:8081/ adresini açın.

İstek ve Yanıt

Hızlı uygulama, parametreleri olan bir geri arama işlevi kullanır. request ve response nesneler.

app.get('/', function (req, res) {
   // --
})
  • İstek Nesnesi - İstek nesnesi, HTTP isteğini temsil eder ve istek sorgu dizesi, parametreler, gövde, HTTP üstbilgileri vb. İçin özelliklere sahiptir.

  • Yanıt Nesnesi - Yanıt nesnesi , bir Express uygulamasının bir HTTP isteği aldığında gönderdiği HTTP yanıtını temsil eder.

Yazdırabilirsiniz req ve res Çerezler, oturumlar, URL vb. dahil olmak üzere HTTP isteği ve yanıtıyla ilgili birçok bilgi sağlayan nesneler.

Temel Yönlendirme

Ana sayfa için HTTP isteği sunan temel bir uygulama gördük. Yönlendirme, bir uygulamanın bir URI (veya yol) ve belirli bir HTTP istek yöntemi (GET, POST, vb.) Olan belirli bir uç noktaya bir istemci isteğine nasıl yanıt vereceğini belirlemeyi ifade eder.

Hello World programımızı daha fazla HTTP isteği türünü işleyecek şekilde genişleteceğiz.

var express = require('express');
var app = express();

// This responds with "Hello World" on the homepage
app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET');
})

// This responds a POST request for the homepage
app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
})

// This responds a DELETE request for the /del_user page.
app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for /del_user");
   res.send('Hello DELETE');
})

// This responds a GET request for the /list_user page.
app.get('/list_user', function (req, res) {
   console.log("Got a GET request for /list_user");
   res.send('Page Listing');
})

// This responds a GET request for abcd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {   
   console.log("Got a GET request for /ab*cd");
   res.send('Page Pattern Match');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Yukarıdaki kodu server.js adlı bir dosyaya kaydedin ve aşağıdaki komutla çalıştırın.

$ node server.js

Aşağıdaki çıktıyı göreceksiniz -

Example app listening at http://0.0.0.0:8081

Artık server.js tarafından oluşturulan çıktıyı görmek için http://127.0.0.1:8081 adresinde farklı istekleri deneyebilirsiniz. Aşağıda, farklı URL'ler için farklı yanıtları gösteren birkaç ekran görüntüsü verilmiştir.

Tekrar gösteren ekran http://127.0.0.1:8081/list_user

Tekrar gösteren ekran http://127.0.0.1:8081/abcd

Tekrar gösteren ekran http://127.0.0.1:8081/abcdefg

Statik Dosyaları Sunma

Express, yerleşik bir ara yazılım sağlar express.static resimler, CSS, JavaScript vb. gibi statik dosyalar sunmak için

Statik varlıklarınızı sakladığınız dizinin adını express.staticdosyaları doğrudan sunmaya başlamak için ara yazılım. Örneğin, resimlerinizi, CSS ve JavaScript dosyalarınızı public adlı bir dizinde tutarsanız, bunu yapabilirsiniz -

app.use(express.static('public'));

Birkaç resim saklayacağız public/images aşağıdaki gibi alt dizin -

node_modules
server.js
public/
public/images
public/images/logo.png

Statik dosyaları işleme işlevselliği eklemek için "Merhaba Word" uygulamasını değiştirelim.

var express = require('express');
var app = express();

app.use(express.static('public'));

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port

   console.log("Example app listening at http://%s:%s", host, port)
})

Yukarıdaki kodu server.js adlı bir dosyaya kaydedin ve aşağıdaki komutla çalıştırın.

$ node server.js

Şimdi herhangi bir tarayıcıda http://127.0.0.1:8081/images/logo.png açın ve aşağıdaki sonucu gözlemleyin.

GET Yöntemi

HTML FORM GET yöntemini kullanarak iki değer ileten basit bir örnek. Kullanacağızprocess_get Bu girişi işlemek için server.js içindeki yönlendirici.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_get" method = "GET">
         First Name: <input type = "text" name = "first_name">  <br>
         Last Name: <input type = "text" name = "last_name">
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

Yukarıdaki kodu index.htm'ye kaydedelim ve server.js'yi ana sayfa isteklerini ve HTML formu tarafından gönderilen girdileri işleyecek şekilde değiştirelim.

var express = require('express');
var app = express();

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.get('/process_get', function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.query.first_name,
      last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

HTML belgesine http://127.0.0.1:8081/index.htm kullanarak erişmek aşağıdaki formu oluşturacaktır -

Şimdi Adı ve Soyadını girebilir ve ardından sonucu görmek için gönder düğmesine tıklayabilirsiniz ve aşağıdaki sonucu döndürmelidir -

{"first_name":"John","last_name":"Paul"}

POST Yöntemi

İşte HTML FORM POST yöntemini kullanarak iki değer ileten basit bir örnek. Kullanacağızprocess_get Bu girişi işlemek için server.js içindeki yönlendirici.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_post" method = "POST">
         First Name: <input type = "text" name = "first_name"> <br>
         Last Name: <input type = "text" name = "last_name">
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

Yukarıdaki kodu index.htm'ye kaydedelim ve server.js'yi ana sayfa isteklerini ve HTML formu tarafından gönderilen girdileri işleyecek şekilde değiştirelim.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/process_post', urlencodedParser, function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.body.first_name,
      last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

HTML belgesine http://127.0.0.1:8081/index.htm kullanarak erişmek aşağıdaki formu oluşturacaktır -

Şimdi Adını ve Soyadını girebilir ve ardından aşağıdaki sonucu görmek için gönder düğmesine tıklayabilirsiniz -

{"first_name":"John","last_name":"Paul"}

Dosya yükleme

Aşağıdaki HTML kodu bir dosya yükleyici formu oluşturur. Bu formun yöntem özniteliği şu şekilde ayarlanmış:POST ve enctype özniteliği şu şekilde ayarlanmıştır: multipart/form-data

<html>
   <head>
      <title>File Uploading Form</title>
   </head>

   <body>
      <h3>File Upload:</h3>
      Select a file to upload: <br />
      
      <form action = "http://127.0.0.1:8081/file_upload" method = "POST" 
         enctype = "multipart/form-data">
         <input type="file" name="file" size="50" />
         <br />
         <input type = "submit" value = "Upload File" />
      </form>
      
   </body>
</html>

Yukarıdaki kodu index.htm'ye kaydedelim ve server.js'yi ana sayfa isteklerini ve dosya yüklemesini işleyecek şekilde değiştirelim.

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/file_upload', function (req, res) {
   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);
   var file = __dirname + "/" + req.files.file.name;
   
   fs.readFile( req.files.file.path, function (err, data) {
      fs.writeFile(file, data, function (err) {
         if( err ) {
            console.log( err );
            } else {
               response = {
                  message:'File uploaded successfully',
                  filename:req.files.file.name
               };
            }
         
         console.log( response );
         res.end( JSON.stringify( response ) );
      });
   });
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

HTML belgesine http://127.0.0.1:8081/index.htm kullanarak erişmek aşağıdaki formu oluşturacaktır -

File Upload:
Select a file to upload: 

NOTE: This is just dummy form and would not work, but it must work at your server.

Çerez Yönetimi

Çerezleri, aşağıdaki ara yazılım seçeneğini kullanarak aynısını işleyebilen bir Node.js sunucusuna gönderebilirsiniz. Aşağıda, müşteri tarafından gönderilen tüm çerezleri yazdırmak için basit bir örnek verilmiştir.

var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function(req, res) {
   console.log("Cookies: ", req.cookies)
})
app.listen(8081)