node中的Express框架详解

下面是关于“node中的Express框架详解”的攻略，包含了框架的基本概念，常用的组件，常用的操作和两条示例说明。

一、Express框架基本概念

1、Express框架概述

Express 是一个基于 Node.js 的 Web 应用开发框架，它提供了丰富的 HTTP 实用功能及插件，用于快速地搭建 Web 应用程序和移动应用程序。其主要特点是易于学习和快速开发。

2、Express框架的特性

• 轻量级：Express 框架相对于其他的 Web 应用框架是一个轻量级的框架。
• 简洁而灵活：Express 框架提供了很多强大的函数，可以帮助我们创建各种 Web 应用。
• 丰富的 HTTP 功能：Express 框架提供了每个 HTTP 功能，包括对 cookie、GET、POST、DELETE 等方面的支持。
• 支持多种模板引擎。

二、Express框架常用组件

1、路由

路由是定义应用程序的 URL 的方式。它可以通过 URL 参数传递请求参数和数据，并返回数据到页面上。

2、请求对象

请求对象（Request）是在客户端与服务器端之间传递数据的载体。它提供了很多 API，可以用来访问 HTTP 请求的各个部分，包括请求 URL、请求头、请求体等。

3、响应对象

响应对象（Response）是在服务端与客户端之间传递数据的载体。它提供了非常多的 API，可以用来访问 HTTP 响应的各个部分，包括响应头、响应体等。在 Express 中，响应对象是由 res 对象代表的。

4、中间件

中间件（Middleware）是一个函数，它负责处理应用程序中的 HTTP 请求和响应。当请求到达服务器时，中间件对请求进行预处理，然后将其传递给下一步。

三、Express框架常用操作

1、安装 Express 框架

可以使用 npm 命令来安装 Express 框架，命令如下：

npm install express --save

2、创建 Express 应用

可以使用以下代码创建一个简单的 Express 应用程序：

const express = require('express')
const app = express()

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

app.listen(3000, function () {
  console.log('app listening on port 3000!');
});

3、处理表单数据

在 Express 框架中，可以使用 body-parser 中间件来处理表单数据。可以使用以下代码在 Express 应用程序中集成 body-parser：

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

// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })

// POST /login 请求
app.post('/login', urlencodedParser, function (req, res) {
  if (!req.body) return res.sendStatus(400)
  res.send('welcome, ' + req.body.username)
})

四、示例说明

1、展示一个静态图片

首先，在项目目录下创建一个名为 public 的文件夹，然后把图片放到一个名为 images 的子文件夹下。

接下来，在 app.js 中添加以下代码：

const express = require('express')
const app = express()

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

app.listen(8080, function() {
  console.log('Server running on http://localhost:8080');
})

然后在浏览器中访问 http://localhost:8080/images/image.jpg，即可看到图片的显示。

2、处理表单数据

把一张包含表单的 HTML 放在 public 文件夹下，并在 action 中指定提交的路由：

<form action="/login" method="post">
  <label>用户名：</label>
  <input type="text" name="username" /><br>

  <label>密码：</label>
  <input type="password" name="password" /><br>

  <input type="submit" value="提交" />
</form>

接下来，在 app.js 中添加以下代码：

const express = require('express')
const bodyParser = require('body-parser')

const app = express()
const urlencodedParser = bodyParser.urlencoded({ extended: false })

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

app.post('/login', urlencodedParser, function(req, res) {
  console.log(req.body)
  res.send('username: ' + req.body.username + ', password: ' + req.body.password)
})

app.listen(8080, function() {
  console.log('Server running on http://localhost:8080');
})

然后打开浏览器，在地址栏中输入 http://localhost:8080/index.html，填写表单并提交，即可在控制台中看到输出结果。