Node.js入门教程(三十一):Express 框架

一、Express 简介

Express 是一个简洁而灵活的 node.js Web应用框架,提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。

Express 框架核心特性

特性 说明
中间件 可以设置中间件来响应 HTTP 请求
路由 定义了路由表用于执行不同的 HTTP 请求动作
模板渲染 可以通过向模板传递参数来动态渲染 HTML 页面

二、安装 Express

安装 Express 并将其保存到依赖列表中:

复制代码
$ cnpm install express --save

以上命令会将 Express 框架安装在当前目录的 node_modules 目录中。

常用中间件

以下几个重要的模块是需要与 express 框架一起安装的:

模块 说明
body-parser 用于处理 JSON, Raw, Text 和 URL 编码的数据
cookie-parser 解析 Cookie 的工具,通过 req.cookies 获取 cookie
multer 用于处理 enctype="multipart/form-data" 的表单数据
复制代码
$ cnpm install body-parser --save
$ cnpm install cookie-parser --save
$ cnpm install multer --save

查看版本

复制代码
$ cnpm list express
/data/www/node
└── express@4.15.2

三、第一个 Express 实例

以下实例中我们引入了 express 模块,并在客户端发起请求后,响应 "Hello World" 字符串。

创建 express_demo.js 文件:

复制代码
// 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);
});

执行以上代码:

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

在浏览器中访问 http://127.0.0.1:8081,页面显示 "Hello World"。

四、请求和响应

Express 应用使用回调函数的参数:requestresponse 对象来处理请求和响应的数据。

复制代码
app.get('/', function(req, res) {
    // 处理请求
});

Request 对象常用属性

属性 说明
req.app 访问 express 的实例
req.baseUrl 获取路由当前安装的 URL 路径
req.body / req.cookies 获得请求主体 / Cookies
req.fresh / req.stale 判断请求是否还"新鲜"
req.hostname / req.ip 获取主机名和 IP 地址
req.originalUrl 获取原始请求 URL
req.params 获取路由的 parameters
req.path 获取请求路径
req.protocol 获取协议类型
req.query 获取 URL 的查询参数串
req.route 获取当前匹配的路由
req.accepts() 检查可接受的请求文档类型
req.get() 获取指定的 HTTP 请求头

Response 对象常用方法

方法 说明
res.append() 追加指定 HTTP 头
res.cookie(name, value[, option]) 设置 Cookie
res.clearCookie() 清除 Cookie
res.download() 传送指定路径的文件
res.get() 返回指定的 HTTP 头
res.json() 传送 JSON 响应
res.jsonp() 传送 JSONP 响应
res.redirect() 重定向
res.render(view[, locals], callback) 渲染视图
res.send() 传送 HTTP 响应
res.sendFile(path[, options][, fn]) 传送指定路径的文件
res.set() 设置 HTTP 头
res.status() 设置 HTTP 状态码
res.type() 设置 Content-Type 的 MIME 类型

五、路由

路由决定了由谁(指定脚本)去响应客户端请求。在 HTTP 请求中,我们可以通过路由提取出请求的 URL 以及 GET/POST 参数。

路由示例

创建 express_demo2.js 文件:

复制代码
var express = require('express');
var app = express();

// 主页 GET 请求
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 页面响应 DELETE 请求
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);
});

执行后访问不同地址查看效果。

六、静态文件

Express 提供了内置的中间件 express.static 来设置静态文件如:图片、CSS、JavaScript 等。

复制代码
app.use('/public', express.static('public'));

目录结构示例

复制代码
node_modules/
server.js
public/
public/images/
public/images/logo.png

完整示例

创建 express_demo3.js 文件:

复制代码
var express = require('express');
var app = express();

app.use('/public', 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);
});

执行后访问 http://127.0.0.1:8081/public/images/logo.png 查看静态图片。

七、GET 方法

以下实例演示了在表单中通过 GET 方法提交两个参数。

index.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">
<input type="submit" value="Submit">
</form>
</body>
</html>

server.js

复制代码
var express = require('express');
var app = express();

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

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

app.get('/process_get', function(req, res) {
    // 输出 JSON 格式
    var 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);
});

获取参数方式

请求方式 参数位置 Express 获取方式
GET URL 查询字符串 req.query
POST 请求体 req.body

八、POST 方法

以下实例演示了在表单中通过 POST 方法提交两个参数。

index.html

复制代码
<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>

server.js

复制代码
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('/public', express.static('public'));

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

app.post('/process_post', urlencodedParser, function(req, res) {
    var 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);
});

九、文件上传

使用 POST 方法,表单 enctype 属性设置为 multipart/form-data

index.html

复制代码
<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>

server.js

复制代码
var express = require('express');
var app = express();
var fs = require("fs");
var bodyParser = require('body-parser');
var multer = require('multer');

app.use('/public', express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/' }).array('image'));

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

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

十、Cookie 管理

使用 cookie-parser 中间件解析客户端发送的 cookie 信息。

复制代码
// express_cookie.js
var express = require('express');
var cookieParser = require('cookie-parser');
var util = require('util');

var app = express();
app.use(cookieParser());

app.get('/', function(req, res) {
    console.log("Cookies: " + util.inspect(req.cookies));
});

app.listen(8081);

十一、本章小结

知识点 说明
Express 简介 简洁灵活的 Node.js Web 应用框架
核心特性 中间件、路由、模板渲染
安装 cnpm install express --save
请求对象 req.query(GET)、req.body(POST)
响应方法 res.send()res.json()res.sendFile()
静态文件 express.static 中间件
路由 app.get()app.post()app.use()
中间件 body-parser、cookie-parser、multer

提示:Express 是 Node.js 最流行的 Web 框架之一。掌握 Express 是进行 Node.js Web 开发的核心技能。更多 API 请参考官方文档:

相关推荐
小屁孩你滑稽掉了4 小时前
prisma操作数据库的方法使用教程(简洁版)
数据库·node.js·prisma·fastify
__zRainy__5 小时前
Node系列 · Node基础:https 模块
后端·网络协议·http·https·node.js
__zRainy__14 小时前
Node.js Web 框架选型指南:从 Express 到 Hono 的全景对比
前端·node.js·express·koa·nestjs·egg·fastify
烂蜻蜓14 小时前
Node.js入门教程(二十八):GET/POST请求
node.js
__zRainy__20 小时前
Node系列 · Node基础:net 模块
后端·node.js
meilindehuzi_a1 天前
Express 基础到中间件:系统掌握常用 API 与请求处理链
中间件·express
嘟嘟07171 天前
从浏览器到 hello world:Docker + nginx 反向代理 + Node 最小服务器一次讲清
docker·容器·node.js
FungLeo1 天前
Node 后端实战 · 老系统数据迁移怎么不出乱子?V1→V2 重构实战与 3 个生产坑
node.js·serverless·数据库迁移·d1 数据库
今日无bug1 天前
Tool Use 工具调用 —— 让LLM缸中大脑突破物理限制的3个阶段
node.js·llm·agent