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 中间件应用

  1. 路由保护:
    客户端在访问需要登录的页面时,可以先使用中间件判断用户登录状态,用户如果未登录,则拦截请求,直接响应,禁止用户进入需要登录的页面。
// 引入 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;

在这里插入图片描述

  1. 网站维护公告
    在所有路由最上面定义接收所有请求的中间件,直接为客户端做出响应,网站正在维护中。
// 引入 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('网站服务器启动成功');

在这里插入图片描述

  1. 自定义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 构建模块化路由

在这里插入图片描述

  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('服务器开启成功');

在这里插入图片描述
在这里插入图片描述

  1. 在 route 文件夹中构建不同的路由模块,放在不同的文件中
  2. 通过module.exports 将不同路由模块的路由对象导出
  3. 在 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。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐