Node.js - Express Framework

Express Overview

Express to minimalna i elastyczna struktura aplikacji internetowych Node.js, która zapewnia solidny zestaw funkcji do tworzenia aplikacji internetowych i mobilnych. Ułatwia szybki rozwój aplikacji internetowych opartych na węzłach. Oto niektóre z podstawowych funkcji frameworka Express -

  • Umożliwia skonfigurowanie oprogramowania pośredniczącego w celu odpowiadania na żądania HTTP.

  • Definiuje tablicę routingu używaną do wykonywania różnych działań na podstawie metody HTTP i adresu URL.

  • Umożliwia dynamiczne renderowanie stron HTML na podstawie przekazywania argumentów do szablonów.

Instalowanie Express

Po pierwsze, zainstaluj platformę Express globalnie za pomocą NPM, aby można było jej użyć do stworzenia aplikacji internetowej przy użyciu terminala węzłowego.

$ npm install express --save

Powyższe polecenie zapisuje instalację lokalnie w node_moduleskatalog i tworzy katalog express wewnątrz node_modules. Powinieneś zainstalować następujące ważne moduły wraz z ekspresowym -

  • body-parser - To jest oprogramowanie pośredniczące node.js do obsługi danych formularza w formacie JSON, Raw, Text i URL.

  • cookie-parser - Przeanalizuj nagłówek Cookie i wypełnij req.cookies obiektem z kluczem według nazw plików cookie.

  • multer - To jest oprogramowanie pośredniczące node.js do obsługi danych wieloczęściowych / formularzy.

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

Witaj świecie Przykład

Poniżej znajduje się bardzo podstawowa aplikacja Express, która uruchamia serwer i nasłuchuje na porcie 8081 pod kątem połączenia. Ta aplikacja odpowiadaHello World!w przypadku zapytań do strony głównej. W przypadku każdej innej ścieżki odpowie rozszerzeniem404 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)
})

Zapisz powyższy kod w pliku o nazwie server.js i uruchom go następującym poleceniem.

$ node server.js

Zobaczysz następujący wynik -

Example app listening at http://0.0.0.0:8081

Otwórz http://127.0.0.1:8081/ w dowolnej przeglądarce, aby zobaczyć następujący wynik.

Wymagać odpowiedzi

Aplikacja Express używa funkcji zwrotnej, której parametry to request i response obiekty.

app.get('/', function (req, res) {
   // --
})

  • Obiekt żądania - obiekt żądania reprezentuje żądanie HTTP i ma właściwości ciągu zapytania żądania, parametrów, treści, nagłówków HTTP i tak dalej.

  • Obiekt odpowiedzi - obiekt odpowiedzi reprezentuje odpowiedź HTTP, którą aplikacja Express wysyła po otrzymaniu żądania HTTP.

Możesz drukować req i res obiekty, które dostarczają wielu informacji związanych z żądaniem i odpowiedzią HTTP, w tym pliki cookie, sesje, adres URL itp.

Podstawowy routing

Widzieliśmy podstawową aplikację, która obsługuje żądanie HTTP dla strony głównej. Routing odnosi się do określenia, w jaki sposób aplikacja odpowiada na żądanie klienta skierowane do określonego punktu końcowego, którym jest identyfikator URI (lub ścieżka) oraz określona metoda żądania HTTP (GET, POST itd.).

Rozszerzymy nasz program Hello World, aby obsługiwał więcej typów żądań HTTP.

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)
})

Zapisz powyższy kod w pliku o nazwie server.js i uruchom go następującym poleceniem.

$ node server.js

Zobaczysz następujący wynik -

Example app listening at http://0.0.0.0:8081

Teraz możesz wypróbować różne żądania pod adresem http://127.0.0.1:8081, aby zobaczyć dane wyjściowe wygenerowane przez server.js. Poniżej znajduje się kilka zrzutów ekranu pokazujących różne odpowiedzi na różne adresy URL.

Ekran pokazuje ponownie http://127.0.0.1:8081/list_user

Ekran pokazuje ponownie http://127.0.0.1:8081/abcd

Ekran pokazuje ponownie http://127.0.0.1:8081/abcdefg

Udostępnianie plików statycznych

Express zapewnia wbudowane oprogramowanie pośredniczące express.static do obsługi plików statycznych, takich jak obrazy, CSS, JavaScript itp.

Wystarczy przekazać nazwę katalogu, w którym przechowujesz zasoby statyczne, do pliku express.staticoprogramowanie pośredniczące, aby rozpocząć bezpośrednie udostępnianie plików. Na przykład, jeśli przechowujesz swoje obrazy, pliki CSS i JavaScript w katalogu o nazwie public, możesz to zrobić -

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

Zatrzymamy kilka zdjęć w formacie public/images podkatalog w następujący sposób -

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

Zmodyfikujmy aplikację „Hello Word”, aby dodać funkcję obsługi plików statycznych.

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)
})

Zapisz powyższy kod w pliku o nazwie server.js i uruchom go następującym poleceniem.

$ node server.js

Teraz otwórz http://127.0.0.1:8081/images/logo.png w dowolnej przeglądarce i zobacz następujący wynik.

POBIERZ metodę

Oto prosty przykład, który przekazuje dwie wartości za pomocą metody HTML FORM GET. Będziemy używaćprocess_get router wewnątrz server.js do obsługi tego wejścia.

<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>

Zapiszmy powyższy kod w index.htm i zmodyfikujmy server.js, aby obsługiwał żądania strony głównej, a także dane wejściowe wysyłane przez formularz HTML.

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)
})

Dostęp do dokumentu HTML za pomocą http://127.0.0.1:8081/index.htm wygeneruje następujący formularz -

Teraz możesz wpisać imię i nazwisko, a następnie kliknąć przycisk przesyłania, aby zobaczyć wynik, który powinien zwrócić następujący wynik -

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

Metoda POST

Oto prosty przykład, który przekazuje dwie wartości za pomocą metody HTML FORM POST. Będziemy używaćprocess_get router wewnątrz server.js do obsługi tego wejścia.

<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>

Zapiszmy powyższy kod w index.htm i zmodyfikujmy server.js, aby obsługiwał żądania strony głównej, a także dane wejściowe wysyłane przez formularz HTML.

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)
})

Dostęp do dokumentu HTML za pomocą http://127.0.0.1:8081/index.htm wygeneruje następujący formularz -

Teraz możesz wpisać imię i nazwisko, a następnie kliknąć przycisk przesyłania, aby zobaczyć następujący wynik -

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

Udostępnianie pliku

Poniższy kod HTML tworzy formularz do przesyłania plików. Ten formularz ma atrybut metody ustawiony naPOST a atrybut enctype jest ustawiony na 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>

Zapiszmy powyższy kod w index.htm i zmodyfikujmy server.js, aby obsługiwał żądania strony głównej, a także przesyłanie plików.

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)
})

Dostęp do dokumentu HTML za pomocą http://127.0.0.1:8081/index.htm wygeneruje następujący formularz -

File Upload:
Select a file to upload: 





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

Zarządzanie plikami cookies

Możesz wysłać pliki cookie do serwera Node.js, który może obsłużyć to samo, przy użyciu następującej opcji oprogramowania pośredniego. Poniżej znajduje się prosty przykład drukowania wszystkich plików cookie wysłanych przez klienta.

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)
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved