Latest web development tutorials

Kerangka Node.js Ekspres

Profil ekspres

Express adalah kerangka aplikasi node.js Web sederhana dan fleksibel yang menyediakan berbagai fitur canggih untuk membantu Anda membuat berbagai aplikasi Web, dan alat-alat HTTP kaya.

Gunakan Express dapat dengan cepat membuat sebuah situs web yang berfungsi penuh.

Mengungkapkan fitur Bingkai inti:

  • Middleware dapat diatur untuk menanggapi permintaan HTTP.

  • Ini mendefinisikan tabel routing untuk melakukan berbagai tindakan permintaan HTTP.

  • Anda dapat melewatkan parameter ke template untuk secara dinamis membuat halaman HTML.


instalasi Ekspres

Instalasi Express dan simpan bergantung pada daftar:

$ npm install express --save

Perintah di atas akan ekspres frame dipasang direktorinode_modules direktori saat ini, direktori akan dibuat secara otomatis mengungkapkan direktori node_modules.Beberapa kebutuhan penting dan modul ekspres diinstal dengan kerangka:

  • body-parser - Node.js middleware, JSON, Baku, Text dan data URL-dikodekan untuk diproses.

  • cookie-parser - ini adalah alat untuk parsing Cookie.Dengan req.cookies bisa mendapatkan melewati cookie, dan mengubahnya menjadi objek.

  • multer - Node.js middleware untuk pengolahan enctype = "multipart / form-data " ( bentuk set MIME encoding) data formulir.

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

Kerangka contoh pertama Ekspresikan

Selanjutnya, kita menggunakan kerangka Express untuk output "Hello World".

Contoh berikut kami memperkenalkan modul cepat, dan meminta klien, respon terhadap "Hello World" string.

Membuat file express_demo.js, kode tersebut adalah sebagai 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)

})

Mengeksekusi kode di atas:

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

Akses http://127.0.0.1:8081 dalam browser, hasilnya seperti berikut:


Permintaan dan Respon

Aplikasi Express menggunakanparameter fungsi callback:permintaan danresponobjek untuk menangani permintaan data dan tanggapan.

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

memperkenalkanpermintaan khusus dan objek respon:

Permintaan Obyek - objek permintaan merupakan permintaan HTTP berisi permintaan permintaan parameter string, konten, atribut HTTP header.atribut umum adalah:

  1. req.app: Ketika panggilan balik ke file eksternal, dengan akses mengungkapkan contoh req.app
  2. req.baseUrl: Dapatkan URL routing yang saat ini diinstal
  3. req.body / req.cookies: mendapatkan "permintaan tubuh" / Cookies
  4. req.fresh / req.stale: menentukan apakah permintaan tersebut masih "segar"
  5. req.hostname / req.ip: mendapatkan nama host dan alamat IP
  6. req.originalUrl: Dapatkan URL permohonan asli
  7. req.params: Dapatkan parameter rute
  8. req.path: Dapatkan jalur permintaan
  9. req.protocol: Dapatkan jenis protokol
  10. req.query: Dapatkan parameter string kueri URL
  11. req.route: Dapatkan dengan pencocokan saat
  12. req.subdomains: Dapatkan subdomain
  13. req.accpets (): Periksa header permintaan Terima jenis permintaan
  14. req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages
  15. req.get (): Mendapat HTTP request header ditentukan
  16. req.is (): jika permintaan header Content-Type tipe MIME

Tanggapan objek - objek respon merupakan respon HTTP, HTTP yaitu, ketika menerima permintaan dikirim ke data respon klien. atribut umum adalah:

  1. res.app: sama seperti req.app
  2. res.append (): Menentukan HTTP header tambahan
  3. res.set () terlebih dahulu sebelum res.append () akan mengatur ulang pengaturan
  4. res.cookie (nama, nilai [, opsi]): Set Cookie
  5. opition: domain / berakhir / HttpOnly / maxAge / path / aman / ditandatangani
  6. res.clearCookie (): Clear Cookie
  7. res.download (): Menentukan jalur transmisi file
  8. res.get (): Mengembalikan header HTTP
  9. res.json (): Transfer respon JSON
  10. res.jsonp (): mentransfer respon JSONP
  11. res.location (): mengatur respon header Lokasi HTTP saja, tidak diatur atau dekat kode status respon
  12. res.redirect (): mengatur respon header Lokasi HTTP, dan menetapkan status kode 302
  13. res.send (): HTTP Transfer respon
  14. res.sendFile (path [Opsi] [, fn]): Menentukan jalur transmisi dari file - diatur secara otomatis Content-Type ekstensi berdasarkan file
  15. res.set (): mengatur header HTTP, Anda dapat mengatur beberapa kepala objek masuk
  16. res.status (): mengatur kode status HTTP
  17. res.type (): mengatur Content-Type tipe MIME

rute

Kita sudah tahu permintaan aplikasi HTTP dasar dan rute ditentukan oleh siapa (sebutkan script) untuk menanggapi permintaan klien.

Dalam permintaan HTTP, kita dapat mengekstrak routing URL dan GET / POST parameter permintaan.

Selanjutnya kita memperpanjang Hello World, untuk menambahkan beberapa fitur untuk menangani lebih banyak jenis permintaan HTTP.

Membuat file express_demo2.js, kode tersebut adalah sebagai 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)

})

Mengeksekusi kode di atas:

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

Kemudian Anda dapat mencoba untuk mengakses http://127.0.0.1:8081 alamat yang berbeda, untuk melihat efek.

Akses http://127.0.0.1:8081/list_user dalam browser, hasilnya seperti berikut:

Akses http://127.0.0.1:8081/abcd dalam browser, hasilnya seperti berikut:

Akses http://127.0.0.1:8081/abcdefg dalam browser, hasilnya seperti berikut:


file statis

Express menyediakan built-inexpress.static middleware untuk mengatur file statis seperti: gambar, CSS, JavaScript dan sebagainya.

Anda dapat menggunakan middlewareexpress.static untuk menetapkan path file statis.Misalnya, jika Anda membayangkan, CSS, JavaScript file di direktori publik, Anda dapat menulis:

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

Kita bisa pergi ke public / gambar direktori didelegasikan beberapa gambar, sebagai berikut:

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

Mari kita memodifikasi berikutnya "Hello Kata" menambahkan fungsionalitas aplikasi pengolahan file statis.

Membuat file express_demo3.js, kode tersebut adalah sebagai 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)

})

Mengeksekusi kode di atas:

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

Mengeksekusi kode di atas:


GET Metode

Contoh berikut menunjukkan dua parameter dalam bentuk disampaikan dengan metode GET, kita dapat menggunakanprocess_get router server.js dalam file untuk memproses input:

file kode index.htm adalah sebagai 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>

file kode server.js adalah sebagai 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)

})

Mengeksekusi kode di atas:

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

Browser akses http://127.0.0.1:8081/index.htm, seperti yang ditunjukkan:

Sekarang Anda dapat memasukkan data ke dalam bentuk, dan menyerahkan presentasi berikut:


metode POST

Contoh berikut menunjukkan dua parameter melalui metode POST untuk mengirimkan formulir, kita dapat menggunakan router server.jsprocess_post dalam file untuk memproses input:

file kode index.htm diubah sebagai 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>

file kode server.js diubah sebagai 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)

})

Mengeksekusi kode di atas:

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

Browser akses http://127.0.0.1:8081/index.htm, seperti yang ditunjukkan:

Sekarang Anda dapat memasukkan data ke dalam bentuk, dan menyerahkan presentasi berikut:


Upload File

Di bawah ini kita membuat form untuk meng-upload file menggunakan metode POST, atribut bentuk enctype diatur ke multipart / form-data.

file kode index.htm diubah sebagai 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>

file kode server.js diubah sebagai 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)

})

Mengeksekusi kode di atas:

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

Browser akses http://127.0.0.1:8081/index.htm, seperti yang ditunjukkan:

Sekarang Anda dapat memasukkan data ke dalam bentuk, dan menyerahkan presentasi berikut:


Manajemen Cookie

Kita dapat menggunakan middleware mengirimkan informasi cookie ke server Node.js, kode berikut output informasi cookie dikirim oleh klien:

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

Mengeksekusi kode di atas:

$ node express_cookie.js 

Sekarang Anda dapat mengakses dan melihat http://127.0.0.1:8081 keluaran informasi terminal, berikut presentasi:


Informasi terkait