一、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 应用使用回调函数的参数:request 和 response 对象来处理请求和响应的数据。
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 请参考官方文档:
Express4.x API:4.x API Reference · Express.js 4.x