• Node.js Video Tutorials

Node.js - Express 框架

上一页
下一页

Express.js是一个简洁灵活的Web应用程序框架，它提供了一套强大的功能来开发基于Node.js的Web和移动应用程序。Express.js是Node.js生态系统中最流行的Web框架之一。Express.js提供了现代Web框架的所有功能，例如模板引擎、静态文件处理、与SQL和NoSQL数据库的连接。

Node.js内置了一个Web服务器。其http模块中的createServer()方法启动一个异步http服务器。可以使用核心Node.js功能开发Web应用程序。但是，必须费力地处理HTTP请求和响应的所有底层操作。Web应用程序框架负责这些常见任务，允许开发人员专注于应用程序的业务逻辑。像Express.js这样的Web框架是一组实用程序，有助于快速、健壮且可扩展的Web应用程序的开发。

以下是Express框架的一些核心功能：

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

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

  • 允许根据传递给模板的参数动态渲染HTML页面。

Express.js构建在connect中间件之上，而connect中间件又基于Node.js API的核心模块之一http。

Core Modules

安装Express

Express.js包可在npm包仓库中找到。让我们在一个名为ExpressApp的应用程序文件夹中本地安装express包。

D:\expressApp> npm init
D:\expressApp> npm install express --save

上述命令将安装保存到node_modules目录中的本地，并在node_modules内创建一个express目录。

Hello world 示例

以下是一个非常基本的Express应用程序，它启动一个服务器并在端口5000上监听连接。此应用程序对主页请求的响应为“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(5000, function () {
   console.log("Express App running at http://127.0.0.1:5000/");
})

将上述代码保存为index.js，然后从命令行运行它。

D:\expressApp> node index.js
Express App running at http://127.0.0.1:5000/

在浏览器窗口中访问https://127.0.0.1:5000/。它将显示Hello World消息。

First Application

应用程序对象

顶级express类的对象表示应用程序对象。它由以下语句实例化：

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

应用程序对象处理重要的任务，例如处理HTTP请求、渲染HTML视图和配置中间件等。

app.listen()方法在指定的宿主和端口创建Node.js Web服务器。它封装了Node.js API的http模块中的createServer()方法。

app.listen(port, callback);

基本路由

app对象分别使用app.get()、app.post()、app.put()和app.delete()方法处理HTTP请求GET、POST、PUT和DELETE。HTTP请求和HTTP响应对象由NodeJS服务器作为参数提供给这些方法。这些方法的第一个参数是一个字符串，表示URL的端点。这些方法是异步的，通过传递请求和响应对象来调用回调函数。

GET 方法

在上面的示例中，我们提供了一个方法来处理客户端访问'/'端点时的GET请求。

app.get('/', function (req, res) {
   res.send('Hello World');
})

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

  • 响应对象 - 响应对象表示Express应用程序在收到HTTP请求时发送的HTTP响应。响应对象的send()方法制定服务器对客户端的响应。

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

响应对象还有一个sendFile()方法，它将给定文件的內容作为响应发送。

res.sendFile(path)

将以下HTML脚本保存为express应用程序根文件夹中的index.html。

<html>
<body>
<h2 style="text-align: center;">Hello World</h2>
</body>
</html>

将index.js文件更改为以下代码：

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

app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname,"index.html"));
})

var server = app.listen(5000, function () {
   
   console.log("Express App running at http://127.0.0.1:5000/");
})

运行上述程序并访问https://127.0.0.1:5000/，浏览器将显示如下Hello World消息。

Index js File

让我们使用sendFile()方法在index.html文件中显示一个HTML表单。

<html>
   <body>
      
      <form action = "/process_get" method = "GET">
         First Name: <input type = "text" name = "first_name">  <br>
         Last Name: <input type = "text" name = "last_name">  <br>
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

上面的表单使用GET方法将数据提交到/process_get端点。因此，我们需要提供一个app.get()方法，在提交表单时调用该方法。

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

表单数据包含在请求对象中。此方法从request.query数组中检索数据，并将其作为响应发送给客户端。

index.js文件的完整代码如下：

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

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

app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname,"index.html"));
})

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(5000, function () {
   console.log("Express App running at http://127.0.0.1:5000/");
})

访问https://127.0.0.1:5000/。

Request Object

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

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

POST 方法

HTML表单通常用于将数据提交到服务器，其method参数设置为POST，尤其是在要提交一些二进制数据（例如图像）时。因此，让我们将index.html中的method参数更改为POST，并将action参数更改为“process_POST”。

<html>
   <body>
      
      <form action = "/process_POST" method = "POST">
         First Name: <input type = "text" name = "first_name">  <br>
         Last Name: <input type = "text" name = "last_name">  <br>
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

要处理POST数据，我们需要从npm安装body-parser包。使用以下命令。

npm install body-parser –save

这是一个用于处理JSON、Raw、Text和URL编码表单数据的node.js中间件。

此包使用以下require语句包含在JavaScript代码中。

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

urlencoded()函数创建application/x-www-form-urlencoded解析器

// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

在express应用程序代码中添加以下app.post()方法来处理POST数据。

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

这是index.js文件的完整代码

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

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('/', function (req, res) {
   res.sendFile(path.join(__dirname,"index.html"));
})

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));
})
app.post("/process_post", )
var server = app.listen(5000, function () {
   console.log("Express App running at http://127.0.0.1:5000/");
})

从命令提示符运行index.js并访问https://127.0.0.1:5000/。

Command Prompt

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

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

提供静态文件

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

您只需要将保存静态资源（例如图像、CSS和JavaScript文件）的目录名称传递给express.static中间件即可开始直接提供这些文件。例如，如果您将图像、CSS和JavaScript文件保存在名为public的目录中，您可以这样做：

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

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

node_modules
index.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(5000, function () {
   console.log("Express App running at http://127.0.0.1:5000/");
})

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

D:\expressApp> node index.js

现在在任何浏览器中打开http://127.0.0.1:5000/images/logo.png，并查看以下结果。

Fifth Application

要详细了解Express.js，请访问我们的ExpressJS教程（ExpressJS）

打印页面
上一页
下一页
广告