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 请参考官方文档:

相关推荐
FungLeo21 小时前
成为全栈·Node 后端篇·文件上传:R2 / 本地磁盘双实现与签名直传
node.js·文件上传·成为全栈·cloudflare r2·文件去重
FungLeo1 天前
成为全栈·Node 后端篇·认证方案:JWT 还是 Session
node.js·jwt·session·认证方案
FungLeo1 天前
成为全栈·Node 后端篇·文章 CRUD 与投稿状态机
node.js·状态机·crud·成为全栈
BS30813_vx1 天前
基于 Express + uni-app 的养老院管理系统设计与实现
后端·uni-app·express
晴天161 天前
Webpack3/4/5 核心差异、性能升级与迁移实战指南-Day38
webpack·node.js
大牧师1 天前
Nest.js 微服务入门教程
开发语言·javascript·后端·微服务·node.js·nest.js·nest
wxwx_bscxy3222 天前
NodeJS 高校学业预警系统10551
mysql·node.js·vue·高校学业预警
FungLeo2 天前
成为全栈·Node 后端篇·列表接口三件套:分页、筛选、排序
node.js·列表排序·列表分页·成为全栈·列表接口设计·列表筛选
晴天162 天前
浏览器中ESM与AMD模块共存的解决方案
前端·node.js
晴天162 天前
Node.js 模块化混合开发指南:CommonJS / ESM 混用适配方案与落地配置
node.js