Rangka Kerja Ekspres Node.js


Pengenalan Ekspres

Express ialah rangka kerja aplikasi web node.js yang ringkas dan fleksibel, yang menyediakan satu siri ciri berkuasa untuk membantu anda membuat pelbagai aplikasi web dan alatan HTTP yang kaya.

Gunakan Express untuk membina tapak web berfungsi sepenuhnya dengan pantas.

Ciri teras rangka kerja Express:

  • Anda boleh menyediakan perisian tengah untuk membalas permintaan HTTP.

  • mentakrifkan jadual penghalaan untuk melaksanakan tindakan permintaan HTTP yang berbeza.

  • Anda boleh memaparkan halaman HTML secara dinamik dengan menghantar parameter kepada templat.

Pasang Express

Pasang Express dan simpan ke senarai dependency: 

$ npm install express --save

Arahan di atas akan memasang rangka kerja Express dalam tempoh semasa Dalam direktori node_modules direktori, direktori ekspres akan dibuat secara automatik di bawah direktori node_modules. Modul penting berikut perlu dipasang bersama rangka kerja ekspres:

  • penghurai badan - perisian tengah node.js untuk memproses JSON, Raw, Teks dan URL yang dikodkan data.

  • penghuraikan kuki - Ini ialah alat untuk menghuraikan kuki. Melalui req.cookies, anda boleh mendapatkan kuki yang diluluskan dan menukarnya menjadi objek.

  • multer - node.js middleware, digunakan untuk memproses data borang enctype="multipart/form-data" (tetapkan pengekodan MIME borang). 

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

Contoh rangka kerja Ekspres Pertama

Seterusnya kami menggunakan rangka kerja Ekspres untuk mengeluarkan "Hello World".

Dalam contoh berikut, kami memperkenalkan modul ekspres dan membalas dengan rentetan "Hello World" selepas pelanggan memulakan permintaan.

Buat fail express_demo.js, kodnya adalah seperti berikut: 

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

Laksanakan kod di atas: 

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

Lawati http://127.0.0.1:8081 dalam penyemak imbas , Hasilnya adalah seperti yang ditunjukkan di bawah:

Permintaan dan Respons

Aplikasi Ekspres menggunakan parameter fungsi panggil balik: permintaan dan respons Objek untuk mengendalikan data permintaan dan respons. Pengenalan terperinci objek 

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

permintaan dan tindak balas:

objek Permintaan - objek permintaan mewakili permintaan HTTP, termasuk Permintaan rentetan pertanyaan, parameter, kandungan, pengepala HTTP dan atribut lain. Atribut biasa ialah:

  1. req.app: Apabila panggilan balik ialah fail luaran, gunakan req.app untuk mengakses contoh nyata

  2. req .baseUrl : Dapatkan laluan URL laluan yang sedang dipasang

  3. req.body / req.cookies: Dapatkan "request body" / Cookies

  4. req.fresh / req.stale: Tentukan sama ada permintaan masih "fresh"

  5. req.hostname / req.ip: Dapatkan nama hos dan alamat IP

  6. req .originalUrl: Dapatkan URL permintaan asal

  7. req.params: Dapatkan parameter penghalaan

  8. req .path: Dapatkan laluan permintaan

  9. req.protocol: Dapatkan jenis protokol

  10. req.query: Dapatkan rentetan parameter pertanyaan bagi URL

  11. req.route: Dapatkan laluan padanan semasa

  12. req.subdomains: Dapatkan nama subdomain

  13. req .accpets(): Semak jenis permintaan pengepala Terima permintaan

  14. req.acceptsCharsets/req.acceptsEncodings/req.acceptsBahasa

  15. req. get(): Dapatkan pengepala permintaan HTTP yang ditentukan

  16. req.is(): Tentukan jenis MIME pengepala permintaan Content-Type

Objek Respons - Objek respons mewakili respons HTTP, iaitu, data respons HTTP yang dihantar kepada klien apabila permintaan diterima. Atribut biasa ialah:

  1. res.app: Sama seperti req.app

  2. res.append(): tambahkan pengepala HTTP yang ditentukan

  3. res.set() selepas res.append() akan menetapkan semula pengepala yang telah ditetapkan sebelumnya

  4. res.cookie(nama, nilai [, pilihan ] ): Tetapkan Kuki

  5. pilihan: domain/tamat tempoh/httpOnly/maxAge/path/secure/signed

  6. res.clearCookie(): Kosongkan Kuki

  7. res.download(): Pindahkan fail dengan laluan yang ditentukan

  8. res.get(): Kembalikan pengepala HTTP yang ditentukan

  9. res.json(): hantarkan respons JSON

  10. res.jsonp(): hantarkan respons JSONP

  11. res.location(): Hanya tetapkan pengepala HTTP Lokasi bagi respons, tanpa menetapkan kod status atau respons tutup

  12. res.redirect(): Tetapkan pengepala HTTP Lokasi daripada respons, dan tetapkan kod Status 302

  13. res.send(): Hantar respons HTTP

  14. res.sendFile(path[,options ][,fn]): Pindahkan fail dengan laluan yang ditentukan -Content-Type akan ditetapkan secara automatik mengikut sambungan fail

  15. res.set(): Tetapkan pengepala HTTP dan objek yang masuk boleh menetapkan berbilang pengepala pada satu masa

  16. res.status(): Tetapkan kod status HTTP

  17. res.type(): Tetapkan jenis MIME Content-Type

Penghalaan

Kami telah pun memahami aplikasi asas permintaan HTTP dan penghalaan menentukan siapa (skrip yang ditentukan) bertindak balas kepada permintaan pelanggan.

Dalam permintaan HTTP, kami boleh mengekstrak URL yang diminta dan parameter GET/POST melalui penghalaan.

Seterusnya kami melanjutkan Hello World dan menambahkan beberapa fungsi untuk mengendalikan lebih banyak jenis permintaan HTTP.

Buat fail express_demo2.js, kodnya adalah seperti berikut: 

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

Lakukan kod di atas: 

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

Seterusnya anda boleh cuba mengakses http://127.0. 0.1:8081 Alamat yang berbeza untuk melihat kesannya.

Akses http://127.0.0.1:8081/list_user dalam penyemak imbas, hasilnya adalah seperti yang ditunjukkan di bawah:

Akses http://127.0.0.1 dalam penyemak imbas : 8081/abcd, hasilnya adalah seperti yang ditunjukkan di bawah:

Akses http://127.0.0.1:8081/abcdefg dalam penyemak imbas, hasilnya adalah seperti yang ditunjukkan di bawah:

Fail statik

Express menyediakan middleware terbina dalam express.static untuk menetapkan fail statik seperti imej, CSS, JavaScript, dll.

Anda boleh menggunakan perisian tengah express.static untuk menetapkan laluan fail statik. Contohnya, jika anda meletakkan imej, CSS dan fail JavaScript dalam direktori awam, anda boleh menulis: 

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

Kami boleh meletakkan beberapa imej dalam direktori awam/imej, seperti berikut: 

node_modules
server.jspublic/public/imagespublic/images/logo.png

Mari ubah suai aplikasi "Hello Word" untuk menambah fungsi memproses fail statik.

Buat fail express_demo3.js, kodnya adalah seperti berikut: 

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

Laksanakan kod di atas: 

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

Laksanakan kod di atas:

Akses dalam pelayar http://127.0.0.1:8081/images/logo.png (contoh ini menggunakan logo tutorial rookie), hasilnya adalah seperti yang ditunjukkan di bawah:

DAPATKAN kaedah

Contoh berikut menunjukkan penyerahan dua parameter melalui kaedah GET dalam borang Kita boleh menggunakan penghala process_get dalam fail server.js untuk memproses input:

<🎜. >Kod fail index.htm adalah seperti berikut :

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

Kod fail server.js adalah seperti berikut:

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

Laksanakan kod di atas:

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

Akses pelayar http: //127.0.0.1:8081/index.htm, Seperti yang ditunjukkan dalam gambar:

Kini anda boleh memasukkan data ke dalam borang dan menyerahkannya, seperti yang ditunjukkan di bawah:

Kaedah POST

Contoh berikut Ia menunjukkan penyerahan dua parameter melalui kaedah POST dalam borang Kita boleh menggunakan penghala

process_post dalam fail server.js untuk memproses. input:

Kod fail index.htm diubah suai seperti berikut: 

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

Kod fail server.js diubah suai seperti berikut:

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

Laksanakan kod di atas:

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

Akses pelayar http://127.0.0.1:8081/index.htm, seperti yang ditunjukkan dalam rajah Seperti yang ditunjukkan:

Kini anda boleh memasukkan data ke dalam borang dan menyerahkannya, seperti yang ditunjukkan di bawah:

Muat naik fail

Di bawah ini kami mencipta Borang yang digunakan untuk memuat naik fail, menggunakan kaedah POST, dengan atribut enctype borang ditetapkan kepada berbilang bahagian/bentuk -data.

kod fail index.htm diubah suai seperti berikut: 

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

kod fail server.js diubah suai seperti berikut: 

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

Laksanakan kod di atas: 

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

Akses pelayar http://127.0.0.1:8081/index.htm, seperti yang ditunjukkan dalam gambar:

Kini anda boleh memasukkan data ke dalam borang dan menyerahkannya, seperti yang ditunjukkan di bawah:

Pengurusan Kuki

Kami boleh menggunakan perisian tengah untuk menghantar maklumat kuki ke pelayan Node.js Kod berikut mengeluarkan maklumat kuki yang dihantar oleh pelanggan: 

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

Laksanakan kod di atas: 

$ node express_cookie.js

Kini anda boleh melawati http://127.0.0.1:8081 dan melihat output maklumat terminal, seperti ditunjukkan di bawah:

Maklumat berkaitan