• Node.js 视频教程

Node.js - Express 框架

快递概览

Express 是一个最小且灵活的 Node.js Web 应用程序框架，它提供了一组强大的功能来开发 Web 和移动应用程序。它促进了基于 Node 的 Web 应用程序的快速开发。以下是 Express 框架的一些核心功能 -

  • 允许设置中间件来响应 HTTP 请求。

  • 定义一个路由表，用于根据 HTTP 方法和 URL 执行不同的操作。

  • 允许根据向模板传递参数来动态呈现 HTML 页面。

安装 Express

首先，使用 NPM 全局安装 Express 框架，以便可以使用 Node 终端创建 Web 应用程序。

$ npm install express --save

上面的命令将安装本地保存在node_modules目录中，并在node_modules内创建一个目录express。您应该安装以下重要模块以及 Express -

  • body-parser - 这是一个 Node.js 中间件，用于处理 JSON、Raw、Text 和 URL 编码的表单数据。

  • cookie-parser - 解析 Cookie 标头并使用由 cookie 名称键入的对象填充 req.cookies。

  • multer - 这是一个用于处理多部分/表单数据的node.js中间件。

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

你好世界示例

以下是一个非常基本的 Express 应用程序，它启动服务器并侦听端口 8081 进行连接。该应用程序以Hello World响应！对于主页的请求。对于所有其他路径，它将响应404 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)
})

将上述代码保存在名为 server.js 的文件中，并使用以下命令运行它。

$ node server.js

您将看到以下输出 -

Example app listening at http://0.0.0.0:8081

在任意浏览器中打开http://127.0.0.1:8081/，可以看到如下结果。

首次申请

请求与响应

Express 应用程序使用回调函数，其参数是请求和响应对象。

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

  • 请求对象- 请求对象表示 HTTP 请求，并具有请求查询字符串、参数、正文、HTTP 标头等属性。

  • 响应对象- 响应对象表示 Express 应用程序收到 HTTP 请求时发送的 HTTP 响应。

您可以打印req和res对象，它们提供了与 HTTP 请求和响应相关的大量信息，包括 cookie、会话、URL 等。

基本路由

我们已经看到了一个为主页的 HTTP 请求提供服务的基本应用程序。路由是指确定应用程序如何响应客户端对特定端点的请求，该端点是 URI（或路径）和特定的 HTTP 请求方法（GET、POST 等）。

我们将扩展 Hello World 程序以处理更多类型的 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)
})

将上述代码保存在名为 server.js 的文件中，并使用以下命令运行它。

$ node server.js

您将看到以下输出 -

Example app listening at http://0.0.0.0:8081

现在您可以在 http://127.0.0.1:8081 尝试不同的请求，以查看 server.js 生成的输出。以下是一些屏幕截图，显示了不同 URL 的不同响应。

屏幕再次显示 http://127.0.0.1:8081/list_user

第二次申请

屏幕再次显示 http://127.0.0.1:8081/abcd

第三次申请

屏幕再次显示 http://127.0.0.1:8081/abcdefg

第四次申请

提供静态文件

Express 提供了一个内置的中间件express.static来服务静态文件，例如图像、CSS、JavaScript 等。

您只需将保存静态资产的目录名称传递给express.static中间件即可开始直接提供文件。例如，如果将图像、CSS 和 JavaScript 文件保存在名为 public 的目录中，则可以执行以下操作 -

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

我们将在public/images子目录中保留一些图像，如下所示 -

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

让我们修改“Hello Word”应用程序以添加处理静态文件的功能。

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

将上述代码保存在名为 server.js 的文件中，并使用以下命令运行它。

$ node server.js

现在在任何浏览器中打开 http://127.0.0.1:8081/images/logo.png 并观察以下结果。

第五次申请

获取方法

这是一个使用 HTML FORM GET 方法传递两个值的简单示例。我们将使用server.js 中的process_get路由器来处理此输入。

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

让我们将上面的代码保存在index.htm 中，并修改server.js 以处理主页请求以及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)
})

使用http://127.0.0.1:8081/index.htm访问 HTML 文档将生成以下形式 -






First Name:





Last Name:

现在您可以输入名字和姓氏，然后单击提交按钮查看结果，它应该返回以下结果 -

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

邮寄方式

这是一个使用 HTML FORM POST 方法传递两个值的简单示例。我们将使用server.js 中的process_get路由器来处理此输入。

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

让我们将上面的代码保存在index.htm中，并修改server.js来处理主页请求以及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)
})

使用http://127.0.0.1:8081/index.htm访问 HTML 文档将生成以下形式 -






First Name:





Last Name:

现在您可以输入名字和姓氏，然后单击提交按钮以查看以下结果 -

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

上传文件

以下 HTML 代码创建一个文件上传器表单。该表单的 method 属性设置为POST，enctype 属性设置为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>

我们将上面的代码保存在index.htm中，并修改server.js来处理主页请求以及文件上传。

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

使用http://127.0.0.1:8081/index.htm访问 HTML 文档将生成以下形式 -

File Upload:
Select a file to upload: 





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

Cookie 管理

您可以将 cookie 发送到 Node.js 服务器，该服务器可以使用以下中间件选项来处理相同的内容。下面是一个简单的例子，打印客户端发送的所有cookie。

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)