Latest web development tutorials

Node.js ekspresowe ramy

Ekspresowy profil

Express jest prosty i elastyczny node.js Web ramy aplikacja, która oferuje szereg zaawansowanych funkcji, aby pomóc w tworzeniu różnorodnych aplikacji internetowych i bogatych narzędzi HTTP.

Korzystanie Express może szybko założyć stronę internetową w pełni funkcjonalny.

Ekspresowe podstawowe cechy: Rama

  • Middleware można ustawić w odpowiedzi na żądania HTTP.

  • Definiuje ona tablicę routingu do wykonywania różnych działań żądania HTTP.

  • Można przekazać parametry do szablonu do dynamicznego renderowania stron HTML.


Instalacja ekspresowa

Instalacja ekspresowa i zapisać go do powoływania się na liście:

$ npm install express --save

Powyższe polecenie ekspresowe rama jest zamontowana directorynode_modules bieżący katalog, katalog zostanie utworzony automatycznie wyrażają katalogu node_modules.Kilka ważnych potrzeb i moduł express jest zainstalowany z ramami:

  • body-parser - node.js middleware, JSON, surowe, tekstu i danych zakodowanych dla przetwórstwa.

  • cookie-parser - Jest to narzędzie do analizowania Cookie.Przez req.cookies może dostać się do przejść przez cookie i zamienić je w obiekty.

  • multer - node.js middleware dla przetwórstwa enctype = "multipart / form-data " ( kodowania MIME formą zestaw) danych formularza.

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

Pierwsze wystąpienie ramy ekspresowe

Następnie używamy ram Express do wyjścia "Hello World".

Poniższy przykład wprowadziliśmy moduł wyraźne, a klient z prośbą o odpowiedź na "Hello World" string.

Tworzenie express_demo.js pliku, kod jest w następujący sposób:

//express_demo.js 文件
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("应用实例,访问地址为 http://%s:%s", host, port)

})

Wykonanie powyższego kodu:

$ node express_demo.js 
应用实例,访问地址为 http://0.0.0.0:8081

Dostęp http://127.0.0.1:8081 w przeglądarce, wyniki, jak pokazano poniżej:


Żądania i odpowiedzi

Ekspresowe aplikacja korzysta zparametrów funkcji zwrotnej:obiektów żądania iodpowiedzido obsługi żądań danych i odpowiedzi.

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

wprowadzenie specjalnegowniosku oraz obiekt odpowiedzi:

Obiekt żądania - żądanie obiekt reprezentuje żądanie HTTP zawiera parametr ciągu żądania zapytania zawartość, atrybuty nagłówka HTTP.Wspólne cechy to:

  1. req.app: Podczas wywołania zwrotnego do zewnętrznego pliku, z dostępem wyrazić przykłady req.app
  2. req.baseUrl: Get URL routing obecnie zainstalowanych
  3. req.body / req.cookies: get "Ciało zapytanie" / Cookies
  4. req.fresh / req.stale: ustalenie, czy żądanie jest jeszcze "świeże"
  5. req.hostname / req.ip: uzyskać nazwę hosta i adres IP
  6. req.originalUrl: Get oryginalnego żądania URL
  7. req.params: Get parametrów trasy
  8. req.path: Get ścieżkę żądania
  9. req.protocol: Get typ protokołu
  10. req.query: Pobierz parametry ciągu kwerendy URL
  11. req.route: Pobierz aktualną trasę dopasowanie
  12. req.subdomains: Get subdomenę
  13. req.accpets (): Sprawdź nagłówek żądania Zebrane typ zapytania
  14. req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages
  15. req.get (): Pobiera określony żądania nagłówek HTTP
  16. req.is (): Jeżeli wniosek nagłówka Content-Type typu MIME

Odpowiedź obiektów - obiekt odpowiedzi stanowi odpowiedź HTTP, HTTP, który jest, w momencie otrzymania żądania wysłanego do danych odpowiedzi klienta. Wspólne cechy to:

  1. res.app: jak req.app
  2. res.append (): Określa dodatkowy nagłówek HTTP
  3. res.set () zanim res.append () spowoduje przywrócenie ustawień
  4. res.cookie (nazwa, wartość [opcja]): Ustaw Cookie
  5. opition: domena / wygasa / HttpOnly / maxAge / ścieżka / bezpieczne / podpisana
  6. res.clearCookie (): Usuń Cookie
  7. res.download (): Określa ścieżkę transmisji pliku
  8. res.get (): Zwraca nagłówek HTTP
  9. res.json (): odpowiedź na żądanie przesłania JSON
  10. res.jsonp (): przenieść odpowiedź jsonp
  11. res.location (): ustawić tylko nagłówki HTTP odpowiedzi Lokalizacja nie ustawić lub zamknij Kod statusu odpowiedzi
  12. res.redirect (): ustawić nagłówki odpowiedzi Położenie HTTP i ustawić kod stanu 302
  13. res.send (): HTTP odpowiedź na żądanie przesłania
  14. res.sendFile (path [opcje] [fn]): Określa ścieżkę transmisji pliku - jest ustawiana automatycznie rozszerzenie Content-Type na podstawie pliku
  15. res.set (): ustawić nagłówek HTTP, można ustawić wiele przychodzącego obiektu głowę
  16. res.status (): ustawić kod stanu HTTP
  17. res.type (): ustawić typ MIME Content-Type

Routing

Znamy już podstawowe żądania HTTP aplikacji i drogi wyznaczone przez kogo (określić skrypt) odpowiada na żądania klientów.

W żądaniu HTTP, możemy wyodrębnić routingu URL i GET zlecenia parametru / POST.

Następnie rozszerzyć Hello World, dodać kilka funkcji, aby obsłużyć więcej typów żądań HTTP.

Tworzenie express_demo2.js pliku, kod jest w następujący sposób:

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

//  主页输出 "Hello World"
app.get('/', function (req, res) {
   console.log("主页 GET 请求");
   res.send('Hello GET');
})


//  POST 请求
app.post('/', function (req, res) {
   console.log("主页 POST 请求");
   res.send('Hello POST');
})

//  /del_user 页面响应
app.get('/del_user', function (req, res) {
   console.log("/del_user 响应 DELETE 请求");
   res.send('删除页面');
})

//  /list_user 页面 GET 请求
app.get('/list_user', function (req, res) {
   console.log("/list_user GET 请求");
   res.send('用户列表页面');
})

// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求
app.get('/ab*cd', function(req, res) {   
   console.log("/ab*cd GET 请求");
   res.send('正则匹配');
})


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

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例,访问地址为 http://%s:%s", host, port)

})

Wykonanie powyższego kodu:

$ node express_demo2.js 
应用实例,访问地址为 http://0.0.0.0:8081

Następnie można próbować uzyskać dostęp http://127.0.0.1:8081 inny adres, aby zobaczyć efekt.

http://127.0.0.1:8081/list_user dostęp w przeglądarce, wyniki, jak pokazano poniżej:

http://127.0.0.1:8081/abcd dostęp w przeglądarce, wyniki, jak pokazano poniżej:

Dostęp http://127.0.0.1:8081/abcdefg w przeglądarce, wyniki, jak pokazano poniżej:


pliki statyczne

Express oferuje wbudowaną middlewareexpress.static ustawić statycznych plików takich jak: zdjęcia, CSS, JavaScript i tak dalej.

Można użyćexpress.static middleware ustawić statyczny ścieżkę do pliku.Na przykład, jeśli obraz, CSS, pliki JavaScript w katalogu publicznym, można napisać:

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

Możemy przejść do katalogu / images publicznych przekazano kilka zdjęć, co następuje:

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

Pozwól nam modyfikować następny "Hello Słowo" rozszerzyć funkcjonalność aplikacji do przetwarzania plików statycznych.

Tworzenie express_demo3.js pliku, kod jest w następujący sposób:

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("应用实例,访问地址为 http://%s:%s", host, port)

})

Wykonanie powyższego kodu:

$ node express_demo3.js 
应用实例,访问地址为 http://0.0.0.0:8081

Wykonanie powyższego kodu:


Metoda GET

Poniższy przykład ilustruje dwa parametry w postaci złożonej metodą GET, możemy użyćprocess_get Router server.js w pliku przetwarzać dane wejściowe:

Kod pliku index.htm przedstawia się następująco:

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

server.js kod pliku jest następująca:

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

   // 输出 JSON 格式
   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("应用实例,访问地址为 http://%s:%s", host, port)

})

Wykonanie powyższego kodu:

node server.js 
应用实例,访问地址为 http://0.0.0.0:8081

dostęp przez przeglądarkę http://127.0.0.1:8081/index.htm, jak pokazano poniżej:

Teraz można wprowadzić dane do formularzy i złożyć następujące prezentacje:


metoda POST

Poniższy przykład ilustruje dwa parametry metodą POST do złożenia formularza, możemy wykorzystać router server.jsprocess_post w pliku przetwarzać dane wejściowe:

Kod pliku index.htm wprowadza się następujące zmiany:

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

server.js kod pliku wprowadza się następujące zmiany:

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

// 创建 application/x-www-form-urlencoded 编码解析
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) {

   // 输出 JSON 格式
   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("应用实例,访问地址为 http://%s:%s", host, port)

})

Wykonanie powyższego kodu:

$ node server.js
应用实例,访问地址为 http://0.0.0.0:8081

dostęp przez przeglądarkę http://127.0.0.1:8081/index.htm, jak pokazano poniżej:

Teraz można wprowadzić dane do formularzy i złożyć następujące prezentacje:


Prześlij plik

Poniżej stworzyć postać do przesyłania plików za pomocą metody POST, atrybut formą enctype ustawiony multipart / form-data.

Kod pliku index.htm wprowadza się następujące zmiany:

<html>
<head>
<title>文件上传表单</title>
</head>
<body>
<h3>文件上传:</h3>
选择一个文件上传: <br />
<form action="/file_upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" size="50" />
<br />
<input type="submit" value="上传文件" />
</form>
</body>
</html>

server.js kod pliku wprowadza się następujące zmiany:

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/'}).array('image'));

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

app.post('/file_upload', function (req, res) {

   console.log(req.files[0]);  // 上传的文件信息

   var des_file = __dirname + "/" + req.files[0].originalname;
   fs.readFile( req.files[0].path, function (err, data) {
        fs.writeFile(des_file, data, function (err) {
         if( err ){
              console.log( err );
         }else{
               response = {
                   message:'File uploaded successfully', 
                   filename:req.files[0].originalname
              };
          }
          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("应用实例,访问地址为 http://%s:%s", host, port)

})

Wykonanie powyższego kodu:

$ node server.js 
应用实例,访问地址为 http://0.0.0.0:8081

dostęp przez przeglądarkę http://127.0.0.1:8081/index.htm, jak pokazano poniżej:

Teraz można wprowadzić dane do formularzy i złożyć następujące prezentacje:


Zarządzanie Cookie

Możemy użyć middleware wysyła informacje do serwera plików cookie node.js poniższy kod wyprowadza informacje cookie jest wysyłane przez klienta:

// express_cookie.js 文件
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)

Wykonanie powyższego kodu:

$ node express_cookie.js 

Teraz można uzyskać dostęp i przeglądać http://127.0.0.1:8081 wyjściowy informacji terminala następujące przedstawienia:


Informacje pokrewne