Express 框架的使用（详细）
文章目录
- Express 框架
- 1.1 Express框架是什么
- 1.2 Express 框架特性
- 1.3 原生 node.js 与 Express 框架对比
- 1.4 基本使用（入门代码）
- 2. 中间件
- 2.1 什么是中间件
- 2.2 中间件的基本使用
- 2.3 app.use 中间件用法
- 2.4 中间件应用
- 2.5 错误处理中间件
- 2.6 捕获错误
- 3. express 请求处理
- 3.1 构建模块化路由
- 3.2 GET参数的获取
- 3.3 POST参数的请求
- 3.4 app.use（）方法的进一步理解
Express 框架
1.1 Express框架是什么
Express 是一个基于 Node平台的Web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。
- 下载
npm install express
1.2 Express 框架特性
- 提供了简洁的路由定义方式
- 对获取 http 请求参数进行了简化处理
- 对模板引擎支持程度高，方便渲染动态HTML页面
- 拥有中间件机制有效控制 HTTP 请求
- 拥有大量第三方中间件对功能进行扩展
1.3 原生 node.js 与 Express 框架对比
1.4 基本使用（入门代码）
// 引入 express 框架
const express = require('express')
// 创建网站服务器
const app = express();app.get('/', (req, res) => {// send()// 1. send 方法内部会检测响应内容的类型// 2. send 方法会自动设置 http 状态码// 3. send 方法还会帮我们自动设置响应的内容类型以及编码res.send('Hello Express');
})app.get('/list', (req, res)=> {// 向客户端直接响应一个对象 res.send({name: 'zhangsan', age: 20});
})// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
2. 中间件
2.1 什么是中间件
2.2 中间件的基本使用
// 引入 express 框架
const express = require('express')// 创建网站服务器
const app = express();app.get('/request', (req, res, next) => {req.name = 'zhangsan';next(); // 向下执行
})app.get('/request', (req, res)=> {res.send(req.name);
})// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
2.3 app.use 中间件用法
app.use 匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求。
// 引入 express 框架
const express = require('express')// 创建网站服务器
const app = express();// 接收所有的请求的中间件
app.use((req, res, next) => {console.log('请求走了 app.use 中间件');
})// 当客户端访问 /request 请求的时候走当前中间件
app.use('/request', (req, res, next) => {console.log('请求走了 app.use /request 中间件 ');
})app.get('/request', (req, res, next) => {req.name = 'zhangsan';next();
})app.get('/request', (req, res)=> {res.send(req.name);
})// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
可以发现网页在转圈
控制台输出结果见上图，说明后面的中间件没有走。
- 修改程序，在程序中加入 next（）
// 引入 express 框架
const express = require('express')// 创建网站服务器
const app = express();// 接收所有的请求的中间件
app.use((req, res, next) => {console.log('请求走了 app.use 中间件');next();
})// 当客户端访问 /request 请求的时候走当前中间件
app.use('/request', (req, res, next) => {console.log('请求走了 app.use /request 中间件 ');next();
})app.get('/request', (req, res, next) => {req.name = 'zhangsan';next();
})app.get('/request', (req, res)=> {res.send(req.name);
})// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
- 再加入 /list 路由
// 引入 express 框架
const express = require('express');// 创建网站服务器
const app = express();// 接收所有的请求的中间件
app.use((req, res, next) => {console.log('请求走了 app.use 中间件');next();
})// 当客户端访问 /request 请求的时候走当前中间件
app.use('/request', (req, res, next) => {console.log('请求走了 app.use /request 中间件 ');next();
})app.get('/list', (req, res) => {res.send('/list');
})app.get('/request', (req, res, next) => {req.name = 'zhangsan';next();
})app.get('/request', (req, res)=> {res.send(req.name);
})// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
2.4 中间件应用
- 路由保护：
客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面。
// 引入 express 框架
const express = require('express')// 创建网站服务器
const app = express();app.use('/admin', (req, res, next) => {// 用户没有登录let isLogin = false;// 如果用户登录if (isLogin) {// 让请求继续向下执行next();} else {// 如果用户没有登录，直接对客户端作出响应res.send('您还没有登录，无法访问当前页面');}
})app.get('/admin', (req, res) => {res.send('您已登录 可以访问当前页面')
})// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
如果将 let isLogin = false 改为：
let isLogin = true;
- 网站维护公告
在所有路由最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护中。
// 引入 express 框架
const express = require('express')// 创建网站服务器
const app = express();app.use((req, res, next) => {res.send('当前网站正在维护...');
})app.use('/admin', (req, res, next) => {// 用户没有登录let isLogin = true;// 如果用户登录if (isLogin) {// 让请求继续向下执行next();} else {// 如果用户没有登录，直接对客户端作出响应res.send('您还没有登录，无法访问当前页面');}
})app.get('/admin', (req, res) => {res.send('您已登录 可以访问当前页面')
})// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
- 自定义404页面
// 引入 express 框架
const express = require('express')// 创建网站服务器
const app = express();app.use('/admin', (req, res, next) => {// 用户没有登录let isLogin = true;// 如果用户登录if (isLogin) {// 让请求继续向下执行next();} else {// 如果用户没有登录，直接对客户端作出响应res.send('您还没有登录，无法访问当前页面');}
})app.get('/admin', (req, res) => {res.send('您已登录 可以访问当前页面')
})app.use((req, res, next) => {// 为客户端响应404状态码以及提示信息res.status(404).send('当前访问的页面是不存在的');
})
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
2.5 错误处理中间件
在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如读取文件失败，数据库连接失败。
错误处理中间件是一个集中处理错误的地方。
- 例如显示服务器错误：
app.use((err, req, res, next) => {res.status(500).send('服务器发生错误');
})
- 基本实例
// 引入 express 框架
const express = require('express')// 创建网站服务器
const app = express();app.get('/index', (req, res) => {// 创建一个错误实例并抛出throw new Error('程序发生了未知错误');
})// 错误处理中间件
app.use((err, req, res, next) => {res.status(500).send(err.message);
})// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
当程序出现错误时，调用 next（）方法，并且将错误信息通过参数的形式传递给 next（）方法，即可触发错误处理中间件。
- 基本实例
// 引入 express 框架
const express = require('express')// 引入文件模块
const fs = require('fs');// 创建网站服务器
const app = express();app.get('/index', (req, res, next) => {// 创建一个错误实例并抛出// throw new Error('程序发生了未知错误');fs.readFile('./demo.txt', 'utf8', (err, result) => {if (err != null) {// 文件读取失败 向下传递错误对象next(err);} else {// 文件读取成功res.send(result);}})// res.send('程序正常')
})// 错误处理中间件
app.use((err, req, res, next) => {res.status(500).send(err.message);
})// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');demo.txt 的文件时不存在的，读取失败后会将错误对象通过 next （）方法传递给错误处理中间件，显示相应的错误信息。
2.6 捕获错误
在 node.js中，异步API的错误信息都是通过回调函数获取的，支持 Promise 对象的异步API发生错误可以通过catch方法捕获。
try catch 可以捕获异步函数以及其他同步代码执行过程中发生的错误，但是不能捕获其他类型的错误（回调函数的错误、Promise对象的错误）。
- 基本实例
// 引入 express 框架
const express = require('express')// 引入文件模块
const fs = require('fs');const promisify = require('util').promisify;
const readFile = promisify(fs.readFile);// 创建网站服务器
const app = express();app.get('/index', async (req, res, next) => {try {await readFile('./aaa.js');} catch (ex) {// 传递错误信息next(ex);}
})// 错误处理中间件
app.use((err, req, res, next) => {res.status(500).send(err.message);
})// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
3. express 请求处理
3.1 构建模块化路由
- 构建模块化路由的基础语法
// 引入 express 框架
const express = require('express');
// 创建网站服务器
const app = express();
// 创建路由对象
const home = express.Router();
// 为路由对象匹配请求路径
app.use('/home', home);
// 创建二级路由
home.get('/index', (req, res) => {res.send('欢迎来到博客首页');
})// 监听端口
app.listen(3000);
console.log('服务器开启成功');
如何构建模块化路由
基础案例
在 入口文件 app.js 文件的同级目录新建 route 文件夹
在 route 文件夹下 新建 home.js 文件 以及 admin.js 文件home.js：
const express = require('express');const home = express.Router();home.get('/index', (req, res) => {res.send('欢迎来到博客首页页面');
});// 导出 home 这个路由对象
module.exports = home;
admin.js：
const express = require('express');const admin = express.Router();admin.get('/index', (req, res) => {res.send('欢迎来到博客管理页面');
});// 导出 admin 这个路由对象
module.exports = admin;
app.js：
// 引入 express 框架
const express = require('express');// 创建网站服务器
const app = express();const home = require('./route/home');
const admin = require('./route/admin');app.use('/home', home);
app.use('/admin', admin);// 监听端口
app.listen(3000);
console.log('服务器开启成功');
- 在 route 文件夹中构建不同的路由模块，放在不同的文件中
- 通过module.exports 将不同路由模块的路由对象导出
- 在 app.js 文件中通过 require 将不同路由模块的路由对象导入，同时对导入的路由进行路由匹配
3.2 GET参数的获取
Express 框架中使用 req.query 即可 获取GET参数 ，框架内部会将GET参数转换为对象并返回。
// 引入 express 框架
const express = require('express');
// 创建网站服务器
const app = express();app.get('/index', (req, res) => {// req.query 获取请求参数res.send(req.query)
})// 监听端口
app.listen(3000);
console.log('服务器开启成功');
在浏览器的地址栏中输入：
http://localhost:3000/index
浏览器页面显示的是一个空对象，这是因为我们没有给GET请求地址传参数.
在浏览器的地址栏中输入：
http://localhost:3000/index?name=zhangbing&age=20&gender=男
可以看到请求参数为对象：
3.3 POST参数的请求
Express 中接收 POST请求参数 需要借助第三方包 body-parser
app.js：
// 引入 express 框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();
// 拦截所有请求
// extended: false 方法内部使用 querystring 模块处理请求参数的格式
// extended: true 方法内部使用第三方模块 qs 来处理请求参数的格式
app.use(bodyParser.urlencoded({extended: false}));app.post('/add', (req, res) => {res.send(req.body);
})// 监听端口
app.listen(3000);
console.log('服务器开启成功');post.html 表单数据通过post方法提交
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="http://localhost:3000/add" method="post"><input type="text" name="username"><input type="password" name="password"><input type="submit"></form>
</body>
</html>
打开 post.html 文件，在表单中输入数据：
点击表单中的提交按钮，可以看到页面跳转到了 http://localhost:3000/add 页面，同时以对象的形式显示了提交的数据：
3.4 app.use（）方法的进一步理解
在上面获取post请求参数的方法中，我们使用了以下的代码：
app.use(bodyParser.urlencoded({extended: false}));
这行代码应该如何理解呢？且看我细细到来！
- app.use（）调用外部定义的函数的小例子
// 引入 express 框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();// 拦截所有的请求
app.use(fn ());function fn () {return function (req, res, next) {console.log(req.method);next();}
}app.get('/', (req, res) => {// 接收 post 请求参数res.send('ok');
})app.post('/add', (req, res) => {res.send(req.body);
})// 监听端口
app.listen(3000);
console.log('服务器开启成功');
可以看到返回的函数被调用了，这些做有什么好处呢？
好处就是我们可以在调用 fn 函数的同时，向 fn 内部传递一些额外的参数，在请求处理函数内部可以根据这个参数改变请求处理函数的行为。可以看一下下面的例子：
// 引入 express 框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();app.use(fn ({a: 1}));function fn (obj) {return function (req, res, next) {if (obj.a == 1) {console.log(req.url);} else {console.log(req.method);}next();}
}app.get('/', (req, res) => {// 接收 post 请求参数res.send('ok');
})app.post('/add', (req, res) => {res.send(req.body);
})// 监听端口
app.listen(3000);
console.log('服务器开启成功');
fn 的形参为一个对象，我们给 fn 函数传递了一个实参 {a: 1}，可以看到：
很显然，控制台打印出了请求地址中的 ‘/’
现在如果将fn 的实参修改为 {a: 2}
则请求处理函数的行为也发生了改变
此时控制台打印的结果不是‘/’，而是请求的方式 GET。
Express 框架的使用（详细）相关推荐
- Express框架简介（详细）
下面是对Express框架的简单介绍,希望可以帮助到有需要的小伙伴~ Express框架是什么 Express是一个基于Node平台的web应用开发框架,它提供了一系列的强大特性,帮助你创建各种Web ...
- Express框架的请求处理~非常详细
下面是对Express请求处理的整理,希望可以帮助到有需要的小伙伴~ 文章目录 Express请求处理 构建模块化路由 GET参数的获取 POST参数的获取 app.use()方法 Express路由 ...
- express框架+fetch/axios.js（本机实现跨域请求）
之前实现过使用jQuery-Ajax跨域请求,写过一个专题:jQuery-Ajax实现跨域 Promise实现跨域 使用Promise也可以实现跨域请求. 普通的Promise模板: var p = ...
- cocos creator麻将教程系列(二)—— 达达麻将的底层通讯express框架与socketio
达达麻将网络通讯 目录 达达麻将网络通讯 要点: (1)express框架的基本写法 (2)socket.io的基本原理和使用; (3)creator阅读源码的必杀技巧; (4)一起来看达达麻将的游客 ...
- express 框架之session
一.什么是session? 最近在学习node.js 的express框架,接触到了关于session方面的内容.翻阅了一些的博客,学到了不少东西,发现一篇博文讲的很好,概念内容摘抄如下: Sessi ...
- 从零开始部署Node.js服务至阿里云ECS服务器并通过express框架实现外网IP访问html项目
大致步骤(2017.07.25): 1.购买阿里云服务器 2.在云服务器上搭建node环境 3.上传Node.js代码,并测试通过 一.购买阿里云服务器 1.登陆阿里云 2.选择控制台 3.选择云服务 ...
- node、express框架
前面的话 Express是一个简洁.灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮助开发者创建各种 Web 和移动设备应用.本文将详细介绍express框架 概述 官网对E ...
- Node.js Express 框架 Express
Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...
- 如何搭建html运行环境,搭建基于express框架运行环境的方法步骤
一.Express简介 Express提供了一个轻量级模块,把Node.js的http模块功能封装在一个简单易用的接口中.Express也扩展了http模块的功能,使你轻松处理服务器的路由.响应.co ...
- http协议、模块、express框架以及路由器、中间件和mysql模块
一.http协议 是浏览器和web服务器之间的通信协议 1.通用头信息 request url:请求的url,向服务器请求的数据 request method:请求的方式 get.post sta ...
最新文章
- 直线拟合的实现步骤和相关算子
- Unity学习笔记4 更换编辑器为VS2013及VS的背景图片设置
- tokudb mysql_【MySQL】TokuDB引擎安装教程
- 计算机应用基础专2020春,计算机应用基础(专)(专,2020春)(20200831130023).pdf
- c++ hough变换代码_hough变换原理以及实现（转载）
- Unable to open log device '/dev/log/main' : No such file or directory it ...
- leetcode771题
- hadoop集群全纪录
- type=button 字体大一点_机械制图中文字用什么字体？你所在的企业图纸中文字又是什么字体...
- 计算机端口详细介绍（整理版）
- Java从入门到放弃 --没放弃就写java程序员职业规划
- Java IO流处理 面试题汇总
- 计算机如何重新连接打印机,电脑打印机脱机怎么重新连接
- 「星火计划沙龙视频」云原生数据湖专场
- 等本等息，等额本息，等额本金，看懂再贷款，坑多！
- 数字IC设计学习笔记_Formality 形式验证
- Iris植物分类数据可视化(散点图)(python-nvd3)
- 撸了几行骚代码，解放了双手
- led trigger
- 软件工程课程团队项目——团队日志