手动实现 express

最新推荐文章于 2024-08-30 14:12:50 发布
最新推荐文章于 2024-08-30 14:12:50 发布
阅读量97 收藏
点赞数
文章标签： json postman
原文链接：https://juejin.im/post/5b53e4fa518825615d2fb049
版权

express 中文翻译 “快递”

  • 基于http服务进行了二次封装
  • 在express中扩展了很多 中间件
  • 对路由进行了封装
  • req,res 进行了一些功能的封装

关于express和koa中间件的区别

  • koa 小巧，仅做基础封装
  • express 有很多额外的中间件，路由

简单使用

需要安装npm install express express.js

let express = require('../node_modules/express');
let app = express();
app.get('/',(req,res)=>{
  res.end('ok'+req.money);
});
app.get('/hello', (req, res) => {
  res.end('hello');
});
app.delete('/hello', (req, res) => {
  res.end('delete hello');
});
app.post('/hello',(req,res)=>{
  res.end('post hello');
});
app.all('*',(req,res)=>{
  res.end('end');
})；
// 发送静态文件
app.get('/404',function (req,res) {
  res.sendFile('404.html',{root:__dirname});//必须保证绝对路径
  //res.sendFile(require('path').join(__dirname,'404.html'));
})
app.listen(3000);
复制代码

上述我们可以看出：

  • express是一个函数
  • 函数有 delete, post，all等，处理路由
  • express执行后 返回的是一个监听函数
  • 该函数可以起服务
  • 在访问路由之前可以做很多事情 => 中间件

express架子 express/index.js


let http = require('http');
let url = require('url');
function createApplication(){
    //若果请求方法，路径一致，则执行回调
    let app = (req,res) => {
        let reqMethod = req.method.toLowerCase();
        let {pathname} = url.parse(req.url,true);
        for(let i=0;i<app.routes.length;i++){
            let {method,path,handler} = app.routes[i];
            if(method === reqMethod && pathname == path){
                handler(req,res)
            }
        }
        res.statusCode = 404;
        res.end(`Cannot ${reqMethod} ${pathname}`);
    }
    app.routes = [];
    //存储 方法 路径 回调
    app.get = (path,handler) => {
        app.routes.push({
            method:'get',
            path,
            handler
        })
    }
    app.listen = (...args) => {
        let server = http.createServer(app);
        server.listen(...args);
    }
    return  app;
}
module.exports = createApplication
复制代码

post测试：可以下载postman插件下载安装

all

function createApplication(){
    ...
    let app = (req,res) => {
        ...
        for(let i=0;i<app.routes.length;i++){
            let {method,path,handler} = app.routes[i];
            if((method === reqMethod || method === all)&& (pathname == path|| pathname === '*')){
                handler(req,res)
            }
        }
        res.statusCode = 404;
        res.end(`Cannot ${reqMethod} ${pathname}`);
    }
    app.all = function (path, handler) {
        app.routes.push({
          method: 'all',
          path,
          handler
        })
    }
    ...
}
复制代码

洋葱模型

express/test1.js

function app(){

}
app.routes = [];
app.use = function(cb){
    app.routes.push(cb)
}

app.use((next)=> {
    console.log(1);
    next();
    console.log(2);
})
app.use((next)=> {
    console.log(3);
    next();
    console.log(4);
})    
app.use((next)=> {
    console.log(5);
    console.log(6);
})  

let index = 0;
function next(){
    if(index === app.routes.lenth) return;
    app.routes[index++](next)
}
next();
复制代码

输出135642，这就是我们说的洋葱模型

中间件

  • 中间件作用 当我们真正访问的路由之前可以干很多事情
  • 可以决定是否向下执行
  • 可以做一些权限判断，可以写多个中间件，和路由是放在同一个队列中的
  • req是同一个
  • 类似于洋葱模型

express.js

app.use('/', (req,res,next)=> {
  req.money = 10000;
  next();// 继续的意思，不调用next表示不继续了
});
app.use((req, res, next) =>{
  req.money -= 2000;
  next();
});
app.get('/',(req,res)=>{
  res.end('ok'+req.money);
});
复制代码

最后 localhost:3000 输出ok 3000

中间件实现 express/index.js

...
function createApplication(){
    let app = (req,res) => {
        let reqMethod = req.method.toLowerCase();
        let {pathname} = url.parse(req.url,true);
        let index = 0;
        function next(){//将回调转换为next形式
            if(index === app.routes.length){
                res.statusCode = 404;
                res.end(`Cannot ${reqMethod} ${pathname}`);
                return;
            } 
            let {method,path,handler} = app.routes[index++];
            if(method === 'middleware'){
                //中间件
                if(pathname == path || path === '/' || pathname.startsWith(path + '/')){
                    handler(req,res,next)
                }else{
                    next();//  没有迭代到 就执行下一个中间件
                }
            }else{
                //路由
                if((method === reqMethod || method === all)&& (pathname == path|| pathname === '*')){
                    handler(req,res);
                }else{
                    next();
                }
            }
        }
        next();
    }
    app.routes = [];
    //存储 方法 路径 回调
    let methods = ['get', 'post', 'put', 'delete', 'options'];
    app.use = function(path,handler){
        if(typeof handler != 'function'){
            handler = path;
            path = '/'
        }
        app.routes.push({
            method: 'middleware',
            path,
            handler
        })
    }
    ...
    return  app;
}
module.exports = createApplication
复制代码

有个特殊的地方，比如我们的路径是article/9/zdl,我们这样写article/:age/:name => {age:9,name:zdl}

如何解析这种路径？在express里可以通过req.params获取到

express.js

let express = require('../express');
let app = express();
app.get('/article/:id/:name', (req,res,next)=> {
    console.log(req.params);
    res.end(JSON.stringify(req.params));
});
app.listen(3000);
复制代码

test: localhost:3000/:1/zdl1

express/index.js

...
function createApplication(){
    let app = (req,res) => {
        ...
        function next(){
            ...
            if(method === 'middleware'){
                ...
            }else{
                //路由
                if(path.params){
                    // 到路径参数的路由
                    if(path.test(pathname)){
                        let params = {}
                        let values = pathname.match(path).slice(1);
                        values.forEach((value,index)=>{
                            params[path.params[index]] = value
                        });
                        req.params = params; // 把参数挂载到req上
                        handler(req,res);
                    }else{ 
                        next();
                    }
                }else{
                    ...
                }
            }
        }
        next();
    }
    ...
    methods.forEach(method => {
        app[method] = (path,handler) => {
            //带路径参数的路由
            let params = [];
            if(path.includes(':')){//如果路径带有:就把路径转换成正则
                path = path.replace(/:([^\/]+)/g,function(){
                    params.push(arguments[1]);
                    return '([^\/]+)';
                })
                path = new RegExp(path);
                path.params = params;
                
            }
            app.routes.push({
                method,
                path,
                handler
            })
        }
    })
    ...
    return  app;
}
module.exports = createApplication
复制代码

目录：

最后我们完整的index.js 


let http = require('http');
let url = require('url');
function createApplication(){
    //若果请求方法，路径一致，则执行回调
    let app = (req,res) => {
        let reqMethod = req.method.toLowerCase();
        let {pathname} = url.parse(req.url,true);
        let index = 0;
        function next(){
            if(index === app.routes.length){
                res.statusCode = 404;
                res.end(`Cannot ${reqMethod} ${pathname}`);
                return;
            } 
            let {method,path,handler} = app.routes[index++];
            if(method === 'middleware'){
                //中间件
                if(pathname === path || path == '/' || pathname.startsWith(path + '/')){
                    handler(req,res,next)
                }else{
                    next();//  没有迭代到 就执行下一个中间件
                }
            }else{
                //路由
                if(path.params){
                    // 到路径参数的路由
                    if(path.test(pathname)){
                        let params = {}
                        let values = pathname.match(path).slice(1);
                        values.forEach((value,index)=>{
                            params[path.params[index]] = value
                        });
                        req.params = params; // 把参数挂载到req上
                        handler(req,res);
                    }else{ 
                        next();
                    }
                }else{
                    if((method === reqMethod || method === all)&& (pathname == path|| pathname === '*')){
                        handler(req,res);
                    }else{
                        next();
                    }
                }
            }
        }
        next();
    }
    app.routes = [];
    //存储 方法 路径 回调
    let methods = ['get', 'post', 'put', 'delete', 'options'];
    app.use = function(path,handler){
        if(typeof handler != 'function'){
            handler = path;
            path = '/'
        }
        app.routes.push({
            method: 'middleware',
            path,
            handler
        })
    }
    app.all = function (path, handler) {
        app.routes.push({
            method: 'all',
            path,
            handler
        })
    }
    methods.forEach(method => {
        app[method] = (path,handler) => {
            //带路径参数的路由
            let params = [];
            if(path.includes(':')){//如果路径带有:就把路径转换成正则
                path = path.replace(/:([^\/]+)/g,function(){
                    params.push(arguments[1]);
                    return '([^\/]+)';
                })
                path = new RegExp(path);
                path.params = params;
                
            }
            app.routes.push({
                method,
                path,
                handler
            })
        }
    })
    app.listen = (...args) => {
        let server = http.createServer(app);
        server.listen(...args);
    }
    return  app;
}
module.exports = createApplication
复制代码

中间件-1

express内置了很多中间件，把想要的方法已经解析好了，可以直接使用

let express = require('./express');
let app = express();

app.use(function (req,res,next) {
  ...
  next();
});

app.get('/article', (req,res,next)=> {
  console.log(req.path,req.query);
  res.send({name:'zfpx'});
});
app.listen(3000);

复制代码

实现 app.use的内容

test: localhost:3000/article?a=1&b=2

app.use(function (req,res,next) {
    let {path,query} = url.parse(req.url,true);
    req.path = path;
    req.query = query;
    req.hostname = 'XXXX';
    //装饰模式
    let end = res.end.bind(res);
    res.send = function(value){
        console.log(typeof value);
        if(typeof value === 'object'){
            end(JSON.stringify(value))
        }else if(Buffer.isBuffer(value) || typeof value === 'string'){
            end(value)
        }else{
            end(value.toString())
        }
        
    }
    next();
});
复制代码

中间件-2

启用一个静态服务

index.js

let express = require('./express');
let app = express();

app.use(function (req,res,next) {
  ...
  next();
});

app.get('/article', (req,res,next)=> {
  console.log(req.path,req.query);
  res.send({name:'zfpx'});
});
app.listen(3000);

复制代码

use内容

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

let path = require('path');
let fs = require('fs')

function static(p){
    return (req ,res ,next) => {
        let newPath = path.join(p, req.path);
        fs.stat(newPath,(err,stat) => {
             if(err){
                 next();
             }else{
                 console.log(stat.isDirectory());
                 
                 if(stat.isDirectory()){
                     let p = path.join(newPath,'/index.html');
                     console.log(p);
                     
                     fs.createReadStream(p).pipe(res)
                 }else{
                     fs.createReadStream(newPath).pipe(res)
                 }
             }
        })
    }
}

复制代码
weixin_33853827
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
express Html 跳转,Express URL跳转（重定向）的实现
weixin_30420045的博客
06-04 629
Express是一个基于Node.js实现的Web框架，其响应HTTP请求的response对象中有两个用于URL跳转方法res.location()和res.redirect()，使用它们可以实现URL的301或302重定向。res.location(path)res.location(path)下面列举了几种，设置http响应头Location的方法res.location('/foo/bar...
Nodejs 手动搭建 Express 项目
yang_xin_cc的博客
02-17 474
俗话说好记性不如烂笔头，在看了两天文档后，在这里准备把自己学到的东西写成文章记录下来。安装全局模块npm install -g express express-generator suptervisor // express-generator Express 应用生成器 // suptervisor 监视你对代码的改动，并自动重启 Node.js ,必须全局安装 快速生成项目express -
NodeJs 手写简单实现 require 函数
靖凡无所畏惧的个人博客
03-20 456
前言： 今天带给大家手写 require 函数代码，希望对大家有所帮助。 代码： // 1. 现将 .a 文件转化为绝对路径 // 2. 读取这个文件，需要增加一个函数，函数内部需要返回 module.exports // 3. 让函数执行 // 4. new Module 创建模块，根据文件名来创建， exports id // -- module.load 加载模块 // -- Module._extensions 代表一个对象，对象上放着很多处理方法 // ...
封装一个简易的express，实现简单路由
bboyjoe的博客
06-19 619
const http = require('http') const url = require('url') let router = [] class Application { get (path, handler) { router.push({ path, method: 'get', handler }) } liste...
中间件的原理 手动封装中间件
qq_42537725的博客
09-09 376
中间件原理 手动封装中间件 在redux添加自己的操作，完成打印日志需求 需求：在dispatch之前，打印一下本次的action对象，dispatch完成之后，可以打印最新的store state console.log("dispatching:", addAction(5)); store.dispatch(addAction()); console.log("new state:", store.getState()); console.log("dispatching:", addActio
10行代码实现require功能
2024路在何方
08-02 557
笔者在学习node的时候，突然想到如何自己写一个require，于是就有了这篇文章。 10行代码能够快速写出require功能，主要具备的只是点是fs模块知识、new Function知识，CommonJs知识。 首先来介绍本文用到的fs模块知识 fs = require(‘fs’)这一句代码就是node的引入文件模块，可以进行文件操作 fs.readFileSync(modu...
express
WXX的博客
08-22 526
express是基于node.js平台，快速，开放，极简的web开发框架express的作用和node.js内置的http模块类似，专门创建web服务器的npm上的一个包，提供了快速创建web服务器的便捷方法express是基于http内置模块封装出来的使用express，我们可以方便，快速的创建web网站的服务器或API接口的服务器。
基于Express+Mongodb的报修系统设计与实现
04-18
报修系统是专业的售后服务管理系统,...再者，接收post请求参数的代码，需要对请求对象添加事件，手动拼接请求参数，对请求参数的格式进行转化，都是复杂的，并且还是和和业务逻辑没有关系；原生JS实现网站应用比较困难
webpack结合express实现自动刷新的方法
10-17
要实现Webpack与Express结合的自动刷新功能，我们首先需要配置Webpack。在`webpack.config.js`文件中，我们需要定义入口（entry）和输出（output）以及一些插件。入口处，我们引入了`webpack-hot-middleware/client`...
express+mockjs实现模拟后台数据发送功能
01-19
前言： 　大多数时候，前端会和后端同时进行开发，即在我们...　缺点：ajax存在跨域问题，通常无法请求本地文件，即使火狐也存在不能访问不同文件目录下的json文件，通常需要通过ide或者自己手动启动服务 3.用nodejs
express搭建简单的后台服务器（基础篇）
前端原创分享，常年坚持记录和分享，全网阅读量超百万
02-03 5887
本文简单对express的一些重要基础知识做一下记录，以加深自己对express基础的了解。 不得不说的路由 作为一个后台服务器，你必须要处理来自客户端的各种请求。这个时候，就要先定义各种请求的处理器，也就是路由。 引用express官方的解释。 路由是由一个 URI、HTTP 请求（GET、POST等）和若干个句柄组成，它的结构如下： app.METHOD(path, [cal
require加载器实现原理
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-23 169
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群来源：隐冬https://juejin.cn/post/6949385808755294245我们常说node并不是...
如何创建一个Express
Sun_Maple_jw的博客
08-30 674
1、什么是Express Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。 1）通过npm init命令为你的应用创建一个package.json文件。 npm init //需要自己配置package.json ### npm init -y //自动配置好的package.json 2)安装 Express npm install express --sa...
原生封装express(app)方法
weixin_34232744的博客
05-24 557
express版路由接口封装(app) var querystring = require("querystring") var url = require("url") var app = { cbArr: [], get(path, cb) { this.cbArr.push({ type: "get", path, cb }) }, post(...
Powershell@2 文件操作整理
april_4的博客
08-28 305
最近又开始折腾pipeline了，对文件操作，这里实践并记录一下。
Vite项目启动服务器时报错 Error: Cannot find module @rollup/rollup-win32-x64-msvc.
最新发布
一只想躺平却不敢躺平的小菜鸟
08-30 272
Vite项目启动服务器时报错 Error: Cannot find module @rollup/rollup-win32-x64-msvc.
前端通过draggable结合fabricjs实现拖拽至画布生成元素自定义编排功能
m0_52313178的博客
08-26 1180
前端通过draggable结合fabricjs实现拖拽自定义编排功能 太久没有更新了，主要最近行情不太好失业了一段时间，一度到怀疑人生，然后就是做的东西大多没有什么含金量，没什么好分享的就很尴尬。 刚好最近遇到一个奇葩的需求，一个基地管理的需求，由于项目中的基地很偏，地图上都定位不到，只能通过一个图片作为底图，然后在上面绘制一些图层，需要做一个自定义编排的需求，先上图: 上面是实现的demo，首先上html结构代码（技术栈：V3+TS+elementplus） <div class="massif-
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值