五分钟轻仿一套express源码

目录

  • 概述
  • hello-world 实例
  • 运行原理
  • 多路由多回调以及中间件

概述

Express是一个基于 Node.js 平台,快速、开放、极简的 web 开发框架。主要有 路由、中间件、模板引擎、 错误处理等功能

Hello world 实例

在test文件夹中新加1.helloworld.js

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

app.get('/', function (req, res) {
    res.end('Hello World!');
});

var server = app.listen(3000, function () {
    console.log('Example app listening at 3000');
});
复制代码

运行 1.helloworls.js

node 1.helloworls.js
复制代码

上面代码会在本机的3000端口启动一个网站,网页显示Hello World。

运行原理

现在新建lib文件夹我们手写一个自己的express库 了解其运行原理

YUAN-EXPRESS
|
|
| - lib
|   | - application.js #包裹app层
|   | - express.js  #框架入口
|
| - test
|   | - 1.helloworld.js
|

复制代码

express.js

const Application = require('./application');
function createApplicaton() {
    return new Application();
}
module.exports = createApplicaton;
复制代码

目的:在application.js中实现实例中app.get、app.listen两个方法

操作:构造Appliaction函数,在原型上添加 get、listen方法

application.js

const http = require('http')
const url = require('url')

let router = [{
    path:"*",
    method:"*",
    handler(req,res){
        res.end(`Cannot ${req.method}_${req.url}`)
    }
}]
function Application() {

}

Application.prototype.get = function (path,handler) {//在Application原型上添加get方法
    router.push({
        path,
        method: 'get',
        handler
    })
}

Application.prototype.listen = function () {//在Application原型上添加listen方法匹配路径,执行对应的handler方法
    let self = this
    const server = http.createServer(function (req,res) {
        let { pathname } = url.parse(req.url,true)
        for(var i = 1;i<router.length;i++){
            let { path,method,handler } = router[i]
            if (pathname == path && req.method.toLocaleLowerCase() == method){
                return handler(req,res)
            }
        }
        router[0].handler(req,res)
    })
    server.listen(...arguments)
}


module.exports = Application
复制代码

Express框架建立在node.js内置的http模块上。

上面代码的关键是http模块的createServer方法,表示生成一个HTTP服务器实例。该方法接受一个回调函数,该回调函数的参数,分别为代表HTTP请求和HTTP回应的request对象和response对象。

循环请求过来时放入router数组的对象,当请求方法和路径与对象中的一致时,执行回调handler方法。

多路由多回调以及中间件

  1. 测试用例
const express = require('../lib/express');
const app = express();
/**
 * 1.get是指定多个处理函数
 * 2.中间件错误处理
 * 3. 子路径系统 单独创建一个子路径系统,并且把它挂载到主路径 系统上
 *
 */
/**
 * app.use
 * express.Router();
 */
app.use(function (req, res, next) {
    console.log('Ware1:', Date.now());
    next();
});
//路由是完整匹配的。/ != /user 所以进不来
app.get('/', function (req, res, next) {
    res.end('1');
});
//创建一个新的路由容器,或者说路由系统
const user = express.Router();// router
user.use(function (req, res, next) {
    console.log('Ware2', Date.now());
    next();
});
//在子路径里的路径是相对于父路径
user.get('/2', function (req, res, next) {
    res.end('2');
});
//use表示使用中间件,只需要匹配前缀就可以了
app.use('/user', user);//user第二个参数是处理函数 (req,res,next)
// req.url = /user/3
//app.use('/user', artcile);
app.use(function (err, req, res, next) {
    res.end('catch ' + err);
});
app.listen(3000, function () {
    console.log('server started at port 3000');
});
复制代码
  1. 先对项目结构改造
iExpress/
|
|   
| - application.js  #包裹app层
|
| - route/
|   | - index.js    #Router类
|   | - route.js    #Route类
|   | - layer.js    #Layer类
|
| - middle/
|   | - init.js     #内置中间件
|
| - test/
|    | - 测试用例文件1
|    | - ...
|
·- express.js       #框架入口
复制代码
  • app从字面量变为Application类
  • 丰富HTTP请求方法
  • 封装Router
  • 路径一样的路由整合为一组,引入Layer的概念
  • 增加路由控制,支持next方法,并增加错误捕获功能
  • 执行Router.handle的时候传入out参数
  1. 理清逻辑

测试代码中 注册添加了多个路由且能添加多个回调方法,将逻辑分为三步。

(1)Application容器将请求方法和handler分发给router,在执行listen监听函数时,执行self._router.handle(req, res, done),让塞入Router中的逻辑运行。

Application类

const Router = require('./router');

Application.prototype.lazyrouter = function () {
    if (!this._router) {
        this._router = new Router();
    }
}
methods.forEach(function (method) {
    Application.prototype[method] = function () {
        this.lazyrouter();
        //这样写可以支持多个处理函数
        this._router[method].apply(this._router, slice.call(arguments));
        return this;
    }
});
Application.prototype.listen = function () {
    let self = this;
    let server = http.createServer(function (req, res) {
        function done() {//如果没有任何路由规则匹配的话会走此函数
            res.end(`Cannot ${req.method} ${req.url}`);
        }
        //如果路由系统无法处理,也就是没有一条路由规则跟请求匹配,是会把请求交给done
        self._router.handle(req, res, done);
    });
    server.listen(...arguments);
}
复制代码

(2) 在Router中每一个方法的请求都会往当前的路由系统中添加一个层,在层(layer)中创建一个route实例

Router类

proto.route = function (path) {
    let route = new Route(path);
    let layer = new Layer(path, route.dispatch.bind(route));
    layer.route = route;
    this.stack.push(layer);//在Router中新增一层layer
    return route;
}

methods.forEach(function (method) {
    proto[method] = function (path) {//请求过来
        let route = this.route(path);//往Router里添一层
        route[method].apply(route, slice.call(arguments, 1));//
        return this;
    }
});
复制代码

如果是中间件,默认没有path 所以layer的route设为undefined

proto.use = function (path, handler) {
    if (typeof handler != 'function') {
        handler = path;
        path = '/';
    }
    let layer = new Layer(path, handler);
    layer.route = undefined;//我们正是通过layer有没有route来判断是一个中间件函数还是一个路由
    this.stack.push(layer);
    return this
}
复制代码

Application开始监听端口时,执行Router的handle方法。 添加 next 函数主要负责将控制权交给下一个中间件,如果当前中间件没有终结请求,并且next没有被调用,那么请求将被挂起,后边定义的中间件将得不到被执行的机会。

当Router中的路径和方法匹配时,走到当前layer中,运行layer.handle_request 执行route中添加的方法。

proto.handle = function (req, res, out) {
    //slashAdded是否添加过/ removed指的是被移除的字符串
    let idx = 0,
        self = this,
        slashAdded = false,
        removed = '';
    // /user/2
    let { pathname } = url.parse(req.url, true);
    function next(err) {
        if (slashAdded) {
            req.url = '';
            slashAdded = false;
        }
        if (removed.length > 0) {
            req.url = removed + req.url;
            removed = '';
        }
        if (idx >= self.stack.length) {
            return out(err);
        }
        let layer = self.stack[idx++];
        //在此匹配路径 params   正则+url= req.params
        if (layer.match(pathname)) {// layer.params
            if (!layer.route) { //这一层是中间件层//  /user/2
                removed = layer.path;//  /user
                req.url = req.url.slice(removed.length);// /2
                if (err) {
                    layer.handle_error(err, req, res, next);
                } else {
                    if (req.url == '') {
                        req.url = '/';
                        slashAdded = true;
                    }
                    layer.handle_request(req, res, next);
                }
            } else {
                if (layer.route && layer.route.handle_method(req.method)) {
                    //把layer的parmas属性拷贝给req.params
                    req.params = layer.params;
                    self.process_params(layer, req, res, () => {
                        layer.handle_request(req, res, next);
                    });
                } else {
                    next(err);
                }
            }
        } else {
            next(err);
        }
    }
    next();
}
复制代码

(3)进入到当前layer,按照顺序执行添加的每一个route

Layer类

Layer.prototype.handle_request = function (req, res, next) {
    this.handler(req, res, next);
}
复制代码

注意 这里的this.handler方法,是添加layer时加入的route.dispatch.bind(route),dispatch是在router.route方法中,初始化layer的时候绑定到Layer.handler上的,解析下dispatch代码:

Route.prototype.dispatch = function (req, res, out) {
    let idx = 0, self = this;
    function next(err) {
        if (err) {//如果一旦在路由函数中出错了,则会跳过当前路由
            return out(err);
        }
        if (idx >= self.stack.length) {
            return out();//route.dispath里的out刚好是Router的next
        }
        let layer = self.stack[idx++];
        if (layer.method == req.method.toLowerCase()) {
            layer.handle_request(req, res, next);
        } else {
            next();
        }
    }
    next();
}
复制代码

文字结构图如下

Application
|
|
Router
|
| - stack
    |
    | - Layer
        |
        | - path  router
                    |
                    | - method  handler
            
复制代码

Router Layer

  • Router Layer 路径 处理函数(route.dispatch) 有一个特殊的route属性
  • Route layer 路径 处理函数(真正的业务代码) 有一特殊的属性method

Application只做包装幻术及路由分发, Router实现 app.use、 app.param、 app.get、 app.post等路由方法方法的封装

逻辑说明图

源码

仓库地址:源码链接点这里~

相关推荐
雕鹰团队分享仿百度文库网站程序源码,是一个用来搭建供网友在线分享文档的开放**台网站。在用仿百度分享文库程序源码搭建的网站上,用户可以在线阅读和下载涉及课件,**题,考试题库,论文报告,专业资料,各类公文模板。法律文件、文学小说等多个领域的资料,不过需要扣除相应的百度积分,**台所累积的文档,均来自热心用户上传。分享文库的网站自身不编辑或修改用户上传的文档内容。用户通过上传文档,可以获得**台虚拟的积分奖励,用于下载自己需要的文档。下载文档需要登录,免费文档可以登录后下载,对于上传用户已标价了的文档,则下载时需要付出虚拟积分。当前**台支持主流的。doc(.docx)、.ppt(.pptx)、.xls(.xlsx)、pdf、txt文件格式。 对文档上传功能的介绍 1.上传我的文档,分享知识,分享快乐 文档分享是一个开放的资源获取**台,所积累的每一份文档都来自广大网友的无私共享。 上传文档的操作很简单,只要你拥有一个百度账号,同时在你电脑上存有附件,即可松完成上传操作。 2.良好的在线阅读体验 文档分享支持在线阅读附件中的内容,并提供了缩放、全屏等功能。在此你可以获得**乎完美的阅读体验。 3.下载文档,感恩文档上传者的无私分享 每份文档页面下方都有一个下载文档的button,点击后可以进行文档下载。 1、安装PHP集成环境 (这个你早就懂) 2、把"php仿百度文库源码"文件夹下的文件放到你的WEB根目录,建立数据库docshare 默认MYSQL数据库帐号root 密码123456 3、在phpmyadmin下导入数据库docsahre.sql 4、后台地址 你的网址/admin 进后台帐号admin 密码123456 在系统设置将默认模板改为baidumb 清空原上传的演示的文档数据 5、在后台-模块-上传新模块(将HTML自动更新和QQ登录模板导进去,相关的文件修改我已经做好,只是数据库中还没导入模块而已,导入之后,后台设置一下即可,无需再修改文件) 6、生成首页 7、安装软件: 安装以下软件前,先要在本机装好OFFICE2007 net2.0以上 windows2003 系统 退掉杀毒软件切忌! 安装辅助软件 (1)mysql数据源驱动 (2)SaveAsPDF (3)swftools (4)在线文档转换后台(内网版) 默认安装--把wordtoflash.exe复制到安装目录替换破解 然后复制suncn.dll到c:\windows\system32\suncn.dll (5)开始--运行--输入RegSvr32 c:\windows\system32\suncn.dll回车--注册 在线文档转换后台配置:(.....为路径) root 密码123456---测试连接--成功后往下配置 生成FLASH保存目录.......\你的WEB目录\bookswfs 网站根目录...............\你的WEB目录 图片目录设定 .............\你的WEB目录\uploads\allimg 提取简介保存 ..............\你的WEB目录\txt 配置好后点击 执行--即可上传文档 OK!完成
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页