Express 框架的使用（详细）

最新推荐文章于 2024-05-15 18:26:11 发布
最新推荐文章于 2024-05-15 18:26:11 发布
阅读量3.6w 收藏 1.1k
点赞数 182
分类专栏： Node.js 文章标签： html node.js javascript es6 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27575925/article/details/109290650
版权

文章目录

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。

1oneLee
关注
  • 182
    点赞
  • 踩
  • 1102
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
Node基础--day04
youzhabanzhuren的博客
03-05 119
1. nodemon 自动重启 web服务器 nodemon：实时监听当前项目中，文件的变化；并自动重启 web 服务器； 安装： npm i nodemon -g 使用： nodemon 要执行文件的路径 2. express 框架 (主要做API接口) 基于 Node.js 平台之上，进一步封装了 http模块，使用更加方便； 安装： npm init -y 初始化项目；npm i...
基于Express框架使用POST传递Form数据
12-09
本文实例为大家分享了基于Express框架使用POST传递Form数据的具体代码，供大家参考，具体内容如下 客户端使用Form发送数据 在客户端Html文件中Form代码如下： <!-- POST test --> <form action="/test" method="post" id="foo" > <input type="text" name="username"> <input type="password" name="password"> <input type="submit"> </form> 在服务器端处理’/test’ POST请求的代码如下：  var bo
express框架
lxllxl211的博客
04-03 1158
可以使用 app.use0 连续定义多个全局中间件。客户端请求到达服务器之后，会按照中间件。
node.js的Express框架的介绍 与 安装详细教程
最新发布
2301_76669854的博客
05-15 1507
node.js的Express框架介绍与安装详细教程
使用基础node.js的express框架在连接数据库的过程中，出现Error: Cannot enqueue Handshake after invoking quit.的解决方案
田螺姑娘的博客
08-03 579
使用基础node.js的express框架在连接数据库的过程中，出现Error: Cannot enqueue Handshake after invoking quit.的解决方案 情形如下： 在第一次连接数据库的时候，没有问题。第二次连接时候直接断开连接，并报以上错误。 原因是：在请求数据库时，发出connection.connect()，且每次都会connection.end()。但是mysql.createConnection却仅仅只创建了一次。下一次请求的时候并未创建新的连接。 解决方案 最简
express框架使用详解
xiaozhuangyumaotao的博客
05-30 1724
express框架介绍与安装 express框架其实是nodejs内置http模块的扩展，主要用来： 1.快速搭建nodejs项目：这点功能有点类似于java里面的maven，使用express建立好的项目结构有固定的目录名称，每个目录都约定俗成的 存放着应该存放的文件，比如public目录一般用来存放资源文件 2.完成路由功能：在没有使用express之前，如果我们想要实现路径的路由，需要使用http模块获取url，加上n多个if else判断来实现，在 express里面...
Express框架.docx
07-09
Express 框架可以使用 npm install express 命令进行下载。 二、Express 框架特性 Express 框架提供了方便简洁的路由定义方式，对获取 HTTP 请求参数进行了简化处理，高度支持模板引擎，提供了中间件机制，拥有...
Express框架的使用
01-07
使用npm安装express npm install express -S 命令如下： C:\Users\Administrator>cd /d E:/node E:\node>mkdir express E:\node>cd express E:\node\express>npm install express -S npm WARN node@1.0.0 No ...
node.js express框架
02-04
本文将围绕“Node.js Express框架”和“使用PM2部署后台项目”这两个主题，深入探讨它们的核心概念、使用方法及实际应用。 一、Express框架详解 1. Express基础：Express是一个基于Node.js平台的极简、灵活的Web...
express框架中使用jwt实现验证的方法
10-16
主要给大家介绍了关于express框架中使用jwt实现验证的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用express具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
express框架下使用session的方法
01-01
上一遍文章说了cookie的不足，提到使用session是解决缺点的一个方法。这遍文章说说怎么使用session.作者使用了文件保存session的方法。若用别保存方式（内存、数据库）也行，记得使用相应的模块。 下面从使用内存...
Express 的基本使用
qq_57404393的博客
03-04 1713
初识 Express,托管静态资源 官方Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。 Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。 建议下载4.17.1版本 不使用..
Express 使用详情
世间万物皆不如你
06-28 883
通过本文的介绍，你已经了解了 Express 的基本使用方法和概念，包括安装、路由、中间件、模板引擎等。Express 是一个非常强大且灵活的 Web 开发框架，可以帮助你更高效地开发 Web 应用。希望本文对你有所帮助，祝你在使用 Express 的过程中取得成功！
Express框架的安装和使用
前端卷王小白的博客
05-05 2967
express框架的安装,express框架的使用,包文件的描述
app.listen(3000)与app是不一样的
weixin_33919941的博客
03-29 1644
前者是server代码如下 Server { domain: null, _events: { request: { [Function] domain: undefined, _events: [Object], _maxListeners: undefined, setMaxList...
Express框架使用全流程
接着奏乐接着舞的博客
01-16 1159
对于平时不怎么使用node.js开发的我，每次要开发时还得搭建非常麻烦，所以我就自己搭建了一个项目，对于这个项目，我的要求只有一个，那就是拿来就能用，直接就可以使用它进行日常开发，所以就有了这篇博客。
Express框架基本使用
weixin_42733970的博客
06-11 381
Express 是一个基于Node 平台的web 应用开发框架，它提供了一系列的强大特性，帮助你创建各种 Web 应用 可以使用 npm install express 命令进行下载 基本使用： // 引入express框架 const express = require('express'); // 创建网站服务器 const app = express(); app.get('/' , (req, res) => { // send() // 1. send方法内部会检测响应..
express框架使用
07-14
Express 是一个基于 Node.js 平台的 Web 应用开发框架，它提供了一系列强大的功能，使得构建 Web 应用变得更加容易。 下面是一个简单的 Express 应用的例子： ```javascript const express = require('express') const app = express() app.get('/', function(req, res) { res.send('Hello World!') }) app.listen(3000, function() { console.log('Example app listening on port 3000!') }) ``` 上面的代码创建了一个 Express 应用，并在根路径上定义了一个 GET 请求处理函数，当用户在浏览器中访问 http://localhost:3000 时，会返回 "Hello World!" 字符串。 使用 Express 开发 Web 应用的一般步骤如下： 1. 安装 Express：可以使用 npm 进行安装： ``` npm install express ``` 2. 引入 Express 模块：在代码中引入 Express 模块，可以使用 `require('express')` 来引入。 3. 创建应用对象：通过调用 `express()` 函数来创建一个 Express 应用对象。 4. 定义路由：使用 `app.get()`、`app.post()`、`app.put()`、`app.delete()` 等函数来定义路由，这些函数接受两个参数，第一个参数是路由路径，第二个参数是请求处理函数，请求处理函数会在对应的路由被请求时被调用。 5. 启动服务器：使用 `app.listen()` 函数来启动服务器，该函数接受两个参数，第一个参数是监听的端口号，第二个参数是一个回调函数，用于在服务器启动时执行一些操作。 这些是 Express 的基本使用方法，当然还有很多高级功能，需要根据实际需求进行学习和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值