手把手写一个迷你版的express

最新推荐文章于 2024-07-01 23:13:40 发布
最新推荐文章于 2024-07-01 23:13:40 发布
阅读量588 收藏 1
点赞数 2
分类专栏： node 文章标签： nodejs express
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42532128/article/details/107147785
版权
本文手把手教你如何实现一个迷你版的Express，详细讲解了从初始化类到实现请求处理的整个过程，包括中间件机制、路由处理和HTTP方法的支持。通过实例代码，帮助理解Express的工作原理。
摘要由CSDN通过智能技术生成

目录

express中间件的简单实现

说明

本次的简单实现中实现了express的use，get，post，listen，res.json和中间件的next机制。

功能分析

回顾expess的使用：

  1. 声明一个express实例
   const app = require('express')
  1. 在实例上调用方法use，use方法的参数是一个路由+多个函数，当然也可以不传路由，比如：
    app.use(cookieParser());    // 只传函数

    app.use('/api/user', userRouter());     // 传路由+函数

    app.use('/api/demo', loginCheck(), handleDemo());   // 传路由+多个函数

  1. 在实例上调用方法get，get方法参数形式与use相同，所不同的是只有当请求方法为get时，app.get中传入的函数才会被执行。

  2. 在实例上调用方法post，post与get形式一样，只是请求方法变成了post。

  3. 在实例上调用listen方法，用于启动http服务，通常，我们会给listen方法传入一个端口和一个方法：

app.listen(5000, () => {
    console.log(`http is listening at 5000`);
})

也可以只传入一个端口：

app.listen(5000)

  1. 关于路由的处理：
    传路由时就相当于多了一层限制，只有当你指定的路由与请求的路由相同或者是请求的路由的前缀时，app.use/get/post中的函数才会被执行。

    就以app.use为例说明一下，

app.use('/api', (req, res, next) => {
    console.log('处理 /api 路由')
    next()
});

app.use('/api/user', (req, res, next) => {
    console.log('处理 /api/user 路由')
    next()
})

那么当请求的路由为api/user时，这两个方法都会被执行，最后打印出：

处理 /api 路由
处理 /api/user 路由
  1. 另外还有很重要的一点是中间件的next机制。在上面的例子中，如果第一个use的方法里没写next()，那么路由处理到此为止，就不会再去找下一个函数了。就是说，当上面的例子变成：
app.use('/api', (req, res, next) => {
    console.log('处理 /api 路由')
});

app.use('/api/user', (req, res, next) => {
    console.log('处理 /api/user 路由')
    next()
})

那么，只会打印出：

处理 /api 路由
  1. 最后就是在函数的res参数上，绑定了一个json方法，使用res.json，我们可以很方便的给前端返回一个json数据。

代码实现

下面来简单实现一下：

1. 初始化一个类并导出

首先声明一个类MiniExpress，这里直接用es6。最后导出一个工厂函数，这样我们在外部只需要调用这个函数（而不需要new）就可以得到一个实例。

class MiniExpress {
}

module.exports = () => new MiniExpress();

2. 写构造方法

这里我们需要一个数组按顺序存放要处理的中间件：

constructor() {
    this.routes = [];
}

3. 注册公有函数 use，get 和 post。

在函数中，我们需要把函数中传入的所有中间件都放入到对应的数组中。

由于传入的参数要兼容有路由的模式，因此写一个私有函数来处理参数。这里用Symbol来声明私有函数：

const _register = Symbol();

然后实现use，get和post：

use() {
    // 将当前函数中的所有参数展开传入_register函数中，
    // 经过_register函数处理后，函数中的所有参数都会被放进一个对象中，
    // 该对象的结构为：{ path: '', queue = [] } path中放路由，queue中放中间件（函数）
    const info = this[_register].apply(this, arguments);
    // 将处理后的对象放入this.routes中
     this.routes.push(info);
}

get() {
    const info = this[_register].apply(this, arguments);
    // 给info添加属性method，便于以后根据请求方法筛选中间件
    info.method = 'get';
    this.routes.push(info);
}

post() {
    const info = this[_register].apply(this, arguments);
    info.method = 'post';
    this.routes.push(info);
}

_register方法：

 [_register](path) {
    const info = {}; // info有path和queue两个属性，其中path中放路由，queue中放中间件函数
    if (typeof path === 'string') {
        // 第一个参数为路由
        info.path = path;
        // 从第二个参数开始裁取参数数组（如果不是数组就转为数组），将结果存入 queue
        info.queue = Array.prototype.slice.call(arguments, 1);
    } else {
        // 没有传路由，则默认赋值为跟路由
        info.path = '/';
        // 将整个参数（转换为）数组存入 queue
        info.queue = Array.prototype.slice.call(arguments, 0);
    }
    // 返回保存了路由和中间件的对象
    return info;
}

经过上面的处理后，所有中间件就被收集了起来。接下来，开始创建http服务。并将请求与http服务连接起来。

4.写listen方法

在这个方法中，我们需要创建一个http服务，并把处理路由的回调函数传进去。这里创建一个私有函数_callback作为这个回调函数：

const http = require('http');
const _callback = Symbol();

注册listen函数：

listen(...args) {
    // 使用http的createServer方法注册一个http服务
    const server = http.createServer(this[_callback]());
    // 将所有参数展开传入listen函数中，参数中的第一项为端口
    server.listen(...args);
}

这里使用展开运算符的作用：

如果传入的参数是数组，那么直接展开，传入函数中

如果传入的参数不是数组，那么先将所有参数都放入数组中，然后再将这个数组展开，传入函数中

5. 实现_callback方法

我们需要在这个函数中返回一个函数。在返回的函数中处理路由。给函数有req和res参数。

首先在res中注册一个json函数，用于给前端返回一个json字符串：

 [_callback]() {
    return (req, res) => {
        res.json = data => {
            res.setHeader('Content-type', 'application/json');
            res.end(JSON.stringify(data));
        };
    }
}

然后根据请求方法和请求路由，把当前匹配到的所有路由放进一个数组中。这里举个例子进一步解释一下：

比如现在的请求方法是get，请求路由是/api/user/info。假设你的express是这么写的：

const app = require('express')();

// 方法1
app.use((req, res, next) => {
    next();
});

// 方法2
app.get((req, res, next) => {
    next();
});

// 方法3
app.get('/api', (req, res, next) => {
    next();
});

// 方法4
app.get('/api/user/info', (req, res, next) => {
    next()
    res.json({
        errNo: 0,
        msg: 'get info success'
    });
});

在express中，这四个方法会依次执行，最后给前端返回一个json字符串。由此可以想到，在express的实现中，需要将这四个方法的参数统一收集起来。然后为参数中所有的中间件（函数），都实现next机制。而这些参数之前已经放进了一个对象中，并存入了各自的数组（this.routes.all，this.routes.get，this.routes.post）。

这里将收集中间件的方法命名为__match，将实现next机制的方法命名为_handle。这两个函数都是私有函数，因此首先：

const _match = new Symbol();
const _handle = new Symbol();

然后将它们加入_callback函数中：

 [_callback]() {
    return (req, res) => {
        res.json = data => {
            res.setHeader('Content-type', 'application/json');
            res.end(JSON.stringify(data));
        };

        // 将req中的url和method拿出来
        const url = req.url;
        const method = req.method.toLowerCase();

        const resultList = this[_match](method, url);
        this[_handle](req, res, resultList);
    }
}

6. 实现_match方法

之前分析过了_match方法的作用就是根据请求方法和请求路由收集所有匹配到的中间件。这里路由的匹配是匹配前缀，在最开始分析路由处理的时候也讲到过。直接上代码：

 [_match](method, url) {
    // 声明一个数组收集处理结果
    let queue = [];

    // 忽略获得网站图标的请求
    if (url === '/favicon.ico') {
        return queue;
    }

    // 声明一个中间变量，存储根据请求方法匹配后的结果
    let curRoutes = [];
    // 根据请求方法匹配，匹配app.use中的中间件时忽略请求方法
    this.routes.forEach(route => {
        if (!route.method || (route.method && route.method === method)) {
            curRoutes.push(route);
        }
    })

    // 根据请求的路由匹配，匹配到当前路由的前缀就加入queue
    curRoutes.forEach(routeInfo => {
        if (url.indexOf(routeInfo.path) === 0) {
            queue = queue.concat(routeInfo.queue);
        }
    })

    // 返回处理结果
    return queue;
}

7. 实现_handle方法

将所有匹配到的中间件收集起来之后，我们需要用next机制将他们联系起来。next机制刚开始的时候也有介绍，这里就不再重复说了。上代码：

[_handle](req, res, queue) {
    const next = () => {
        // middleware赋值为队首，并将队首弹出
        // 这里的队列中存储的是所有匹配到的中间件
        const middleware = queue.shift();
        if (middleware) {
            // 进入下一个中间件
            middleware(req, res, next);
        }
    };
    next();
}

至此，所有分析结束，最后附上完整的代码：

完整代码

const http = require('http');
const slice = Array.prototype.slice;

// 定义私有方法
const _register = Symbol();
const _match = Symbol();
const _callback = Symbol();
const _handle = Symbol();

class MiniExpress {
    constructor() {
        // 按顺序存放要处理的中间件
        this.routes = [];
    }

    use() {
        // 将当前函数中的所有参数展开传入_register函数中，
        // 经过_register函数处理后，函数中的所有参数都会被放进一个对象中，
        // 该对象的结构为：{ path: '', queue = [] } path中放路由，queue中放中间件（函数）
        const info = this[_register].apply(this, arguments);
        this.routes.push(info);
    }

    get() {
        const info = this[_register].apply(this, arguments);
        info.method = 'get';
        this.routes.push(info);
    }

    post() {
        const info = this[_register].apply(this, arguments);
        info.method = 'post';
        this.routes.push(info);
    }

    listen(...args) {
        const server = http.createServer(this[_callback]());
        server.listen(...args);
    }

    /**
     * 如果传入了路由则将路由和其他参数放进queue，
     * 否则，将路由赋值为跟路由，然后存入queue
     *
     * @param {*} path
     * @returns {object} path：路由，queue：其他参数(中间件)
     * @memberof MiniExpress
     */
    [_register](path) {
        const info = {}; // info有path和queue两个属性，其中path中放路由，queue中放中间件
        if (typeof path === 'string') {
            // 第一个参数为路由
            info.path = path;
            // 从第二个参数开始裁取参数数组（如果不是数组就转为数组），将结果存入 queue
            info.queue = slice.call(arguments, 1);
        } else {
            info.path = '/';
            // 将整个参数（转换为）数组存入 queue
            info.queue = slice.call(arguments, 0);
        }
        return info;
    }

    /**
    * http.createServer方法中的回调函数
    *
    * @returns {function}
    * @memberof MiniExpress
    */
    [_callback]() {
        return (req, res) => {
            res.json = data => {
                res.setHeader('Content-type', 'application/json');
                res.end(JSON.stringify(data));
            };
            const url = req.url;
            const method = req.method.toLowerCase();

            const resultList = this[_match](method, url);
            this[_handle](req, res, resultList);
        }
    }

    [_match](method, url) {
        // 存放最终匹配成功的中间件
        let queue = [];

        // 忽略网站图标的请求
        if (url === '/favicon.ico') {
            return queue;
        }

        // 定义中间变量，存放方法匹配后的结果
        let curRoutes = [];

        // 匹配方法
        this.routes.forEach(route => {
            if (!route.method || (route.method && route.method === method)) {
                curRoutes.push(route);
            }
        })

        // 匹配路由（前缀）
        curRoutes.forEach(routeInfo => {
            if (url.indexOf(routeInfo.path) === 0) {
                queue = queue.concat(routeInfo.queue);
            }
        })
        return queue;
    }

    // next机制
    [_handle](req, res, queue) {
        const next = () => {
            // 第一个匹配的中间件
            const middleware = queue.shift();
            if (middleware) {
                // 执行中间件函数
                middleware(req, res, next);
            }
        };
        next();
    }
}

module.exports = () => {
    // 工厂函数
    return new MiniExpress()
}

测试

测试代码：

const app = require('./MiniExpress')();

app.use((req, res, next) => {
    console.log('请求开始...', req.method, req.url)
    next();
})

app.use((req, res, next) => {
    // 假设在处理 cookie
    console.log('处理 cookie ...')
    req.cookie = {
        userId: 'abc123'
    }
    next();
})

app.use('/api', (req, res, next) => {
    console.log('处理 /api 路由')
    next();
})

app.get('/api', (req, res, next) => {
    console.log('get /api 路由')
    next();
})

// 模拟登录验证
function loginCheck(req, res, next) {
    setTimeout(() => {
        console.log('模拟登录成功')
        next()
    }, 1000);
}

// 添加中间件
app.get('/api/user/info', loginCheck, (req, res, next) => {
    console.log('get /api/user/info')
    res.json({
        errno: 0,
        data: req.cookie
    })
})

app.use((req, res, next) => {
    res.json({
        errno: 404,
        msg: 'not found'
    })
})

app.listen(5000, () => {
    console.log('server is running on port 5000')
})

测试结果

将这个代码运行起来，在浏览器中输入http://localhost:5000/api/user/info。可以看到控制台中会打印出：

server is running on port 5000
请求开始... GET /api/user/info
处理 cookie ...
处理 /api 路由
get /api 路由
模拟登录成功
get /api/user/info

浏览器中显示出一个json字符串：

{
    "errno": 0,
    "data": {
    "userId": "abc123"
    }
}

测试结束。

張猴子
关注
专栏目录
手把手教你写一个RPC框架（一）
weixin_43395911的博客
12-09 2679
一 写在前面 最近在公司中进行开发，均是采用分布式微服务的开发方式，不同的微服务之间采用RPC框架进行通信与数据调用。通常在开发一个接口时，会需要调用其他微服务的接口，从而获取想要的数据，因为有了RPC框架，调用其他服务的接口非常方便，就像调用本地方法一样简单。于是我非常想学习RPC框架的原理并且自己实现一个RPC框架，为了记录这个过程，有了这个系列的文章。感兴趣的小伙伴们，记得一键三连～ 二 RPC框架 ...
一小时：手把手教你入门express【建议收藏】
贪吃ღ大魔王
07-05 3661
express 简介 Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。搭建web服务器 Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。 使用Express开发框架可以非常方便、快速的创建Web网站的服务器或API接口的服务器 官方网址：https://www.expressjs.com.cn/ 简单使用 下载安装： npm init -y npm i express -S 使用步骤： 导入包 创建服务器 处理请求 监
TypeScript19（声明文件d.ts）
xiaojian044的博客
12-02 157
声明文件
Express中间件工作原理介绍
坤小的专栏
10-21 1409
Express中间件工作原理介绍 中间件是Express框架学习中最难的部分，同时也是最为核心的技术，我们的学习路线如下 1.什么是中间件 2.Express中间件的本质及工作原理 3.自定义解析post请求参数的中间件 4.第三方中间件使用 1.1-什么是中间件 下图是一个自来水净化的过程，这张图可以更好的理解什么是中间件 水库的水并不是直接取出来就送到用户的家中使用，而是经过一些净...
Express中间件
最新发布
m0_62442882的博客
07-01 991
1.中间件的概念；2.Express中间件的调用流程；3.中间件的分类
express中间件原理（app.use()）
chen__cheng的博客
03-22 845
app.use1.什么是中间件2.express中的中间件3.总结 1.什么是中间件 中间件就是一个请求处理方法，用其把用户从请求到响应的整个过程分发到多个中间件去处理，这样做的目的是提高代码的灵活性，动态可扩展的。简单的理解就是：将收到的请求进行逐层过滤。 2.express中的中间件 请求处理的过程是：当服务器接收到请求之后，如果服务器写了多个中间件，则按照顺序依次匹配，直到匹配到符合要求的中间件，然后进行处理。需要注意的是：同一个请求所经过的中间件都是同一个请求对象和响应对象 中间件分类： 应用程
express中间件原理
Dimuzero的博客
11-21 825
一.中间件 middleware 1.中间件作用 一个请求发送到服务器后，他的生命周期是： 收到request（请求） 服务端处理 发送response（响应） 如果业务逻辑复杂，为了明确和便于维护，需要把处理的事情分配成几个部分来做，而每个部分就是一个中间件（在实际请求发生之前hack req和res对象来实现一些功能） 2.中间件是什么 中间件其是一个函数，在响应发送之前对请求进行一些操作 function middleware(req,res,next){ // 做该干的事 //
7 每个人都能徒手写递归神经网络手把手教你写一个RNN .html
11-29
机器学习 深度学习 pytorch tensorflow 贝叶斯 神经网络 算法
11行python写一个神经网络，手把手快速入门神经网络 .html
11-29
机器学习 深度学习 pytorch tensorflow 贝叶斯 神经网络 算法
实现一个编译器 c语言实现,手把手教你实现一个简单的编译器
weixin_39907850的博客
05-18 2762
手把手教你实现一个简单的编译器1、 概述今天我们将学习开发一个编译器，但是呢，这个编译器并不是说什么都能都编译，它只是一个超级小的编译器，主要用于说明编译器的一些基本的原理。我们这个编译器可以将类似于lisp语言的函数调用编译成类似于C语言的函数调用。如果你对lisp语言和C语言这两者都不熟悉，没关系，什么语言其实无所谓，但接下来还是会给你一个快速的介绍。如果我们有两个函数分别是add和subtr...
浅谈express 中间件机制及实现原理
08-29
本篇文章主要介绍了浅谈express 中间件机制及实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入理解nodejs中Express的中间件
10-19
一个Express应用就是在调用各种中间件。可见中间件在web应用开发中的重要性，有兴趣的可以了解一下
Express中间件工作原理详细介绍
m0_62877814的博客
01-03 266
Express中间件工作原理详细介绍
express中间件实现原理和源码分析
前端361
10-15 424
中间件的添加逻辑：如下图 中间件添加实现主要源码： 请求路由绑定逻辑：如下图： 路由绑定相关源码： 接收请求处理逻辑： 接收请求主要源码： 中间件的添加逻辑：如下图 这里是app.use()逻辑 其他方式参见从源码分析express中间件添加方式的区别 中间件添加实现主要源码： app.use = function use(fn) { var offset = 0; ...
关于express中间件的简要解析之应用级、路由级中间件（一）
野渡无人舟自横
06-08 4258
Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架：从本质上来说，一个 Express 应用就是在调用各种中间件。中间件（Middleware） 是一个函数，它可以访问请求对象（request object (req)）,响应对象（response object (res)）, 和 web 应用中处于请求-响应循环流程中的中间件，一般被命名为 next 的变量。
egg插件机制原理
前端361
04-29 601
egg提供了丰富的插件，也提供了自定义插件的api，那么egg插件到底是如何被框架识别并加载的呢。了解这个，对开发者来说，可以更好的使用插件，抽离通用插件。 ...
express中间件的原理
mangguom23的博客
04-22 86
const http = require('http') const slice = Array.prototype.slice class LikeExpress { constructor() { // 存放中间件的列表 this.routes = { all: [], // app.use(...) get: [], // app.get(...) post: [] // ap
手把手教你写一个ios app
07-28
以下是一步一步教你如何编写一个iOS应用的简要指南： 1. 了解基本知识： 在开始编写iOS应用之前，你需要了解一些基本的编程概念和iOS开发环境。学习Objective-C或Swift编程语言、熟悉Xcode集成开发环境以及掌握基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值