试试用 Node.js 编写个简单的web框架

简介: 今天跟往常一样逛技术社区,发现了一篇《Express 简单实现》(github) ,写的还是比较简单易懂的。刚好平时在测试比如局域网共享文件,临时网页共享或测试等等情况下可能会需要一个临时的http服务。

今天跟往常一样逛技术社区,发现了一篇《Express 简单实现》(github) ,写的还是比较简单易懂的。
刚好平时在测试比如局域网共享文件,临时网页共享或测试等等情况下可能会需要一个临时的http服务。
当然一般情况下我都是使用Python命令python -m http.server 8080来做临时服务,但是如果需要有动态请求时可能就不能用这种办法了(当然啦你也可以使用PythonBottle库或Node.jsExpress来编写临时服务) 。
刚好那就自己也尝试着写写一个简单的web框架呗。

1.一个很简单的示例

simple_http.js

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

var routes = {//路由
    '/'(req, res) {
        res.end('关爱单身狗成长协会');
    },
    '/demo'(req, res) { //读取html示例
        res.write(fs.readFileSync('./demo.html', 'utf-8'));
        res.end();
    },
    /** 自定义路由.... **/
    err(req, res, errCode) {//自定义异常
        res.writeHead(errCode, { 'Content-Type': 'text/html' });
        res.write(errCode.toString());
        res.end();
    }
};

http.createServer((req, res) => {//监听
    let { pathname } = url.parse(req.url, true);//获取访问路径
    let route = routes[pathname];//匹配路由
    try {
        return route ? route(req, res) : routes.err(req, res, 400);
    }
    catch (err) {
        console.error(err);
        routes.err(req, res, 500);
    }
}).listen(8080);

2.将其包装成库

simple_http.js

'use strict';
const http = require('http');
const url = require('url');
function createApplication() {
    let app = function (req, res) {//监听
        let { pathname } = url.parse(req.url, true);//获取访问路径
        let route = app.routes[pathname];
        let r = { "req": req, "res": res, "path": pathname, "app": app, method: req.method.toLocaleUpperCase() };
        try {
            return route ? route.apply(r) : app.error404(r);
        }
        catch (err) {
            app.error(Object.assign(r, { err: err.toString(), errCode: 500 }));
        }
    };
    app.routes = {};//路由
    app.error = (r) => {//异常处理
        console.error(r);
        r.res.writeHead(r.errCode, { 'Content-Type': 'text/html' });
        r.res.write(r.errCode.toString());
        r.res.end();
    };
    app.error404 = (r) => app.error(Object.assign(r, { err: "path not find", errCode: 404 }));//404异常处理
    app.listen = function () {
        let server = http.createServer(app);
        server.listen(...arguments);
        return server;
    };
    return app;
}
module.exports = createApplication;

app.js调用:

const app = require("./simple_http")();
const fs = require('fs');

app.routes["/"] = function () {
    this.res.end('关爱单身狗成长协会');
};
app.routes["/demo"] = function () { 
    this.res.write(fs.readFileSync('./demo.html', 'utf-8'));
    this.res.end();
};

let server = app.listen(8080, '0.0.0.0', function () {
    console.log(`listening at http://${server.address().address}:${server.address().port}`)
});

3.增加静态文件夹访问,控制台异常信息输出

simple_http.js

'use strict';
const http = require('http')
const url = require('url')
const utils = require("./utils");
function createApplication() {
    let app = function (req, res) {
        // 解析请求,包括文件名
        let { pathname } = url.parse(req.url, true);
        let route = app.routes[pathname];
        let r = { "req": req, "res": res, "path": pathname, "app": app, method: req.method.toLocaleUpperCase() };
        try {
            return route ? route.apply(r) :app.serve(r, (e, res) => {if (e && e.status) app.error404(r);});
        }
        catch (err) {
            app.error(Object.assign(r, { err: err.toString(), errCode: 500 }));
        }
    };
    app.routes = {};
    app.error = (r) => r.res.end();
    app.error404 = (r) => app.error(Object.assign(r, { err: "path not find", errCode: 404 }));
    app.listen = function () {
        let server = http.createServer(app);
        server.listen(...arguments);
        return server;
    };
    return utils(app);
}
module.exports = createApplication;

utils.js扩展:

const mime = require("./mime");
const fs = require("fs");
module.exports = function (app) {
    app.getClientIP = (req) => req.headers['x-real-ip'] || req.headers['x-forwarded-for']|| req.connection.remoteAddress;
    app.errorLog = (r) => console.error({ "path": r.path, "ip": app.getClientIP(r.req), err: r.err, errCode: r.errCode });
    app.error = (r) => {
        app.errorLog(r);
        r.res.writeHead(r.errCode, { 'Content-Type': 'text/html' });
        r.res.write(r.errCode.toString());
        r.res.end();
    };
    app.static = [];
    app.serve = (r) => {
        let path = r.path.replace(/^\/+/, "");
        if (app.static.length == 0) return app.error404(r);
        let s = app.static.find(_ => path.indexOf(_) == 0);
        if (s) {
            let t = mime.getType(path);
            return fs.readFile(path, function (err, fr) {
                if (err) {
                    app.error404(r);
                } else {
                    r.res.writeHead(200, { 'Content-Type': t });
                    r.res.write(fr);
                    r.res.end();
                }
            });
        }
    };
    app.moveFile = (op, np) => fs.renameSync(op, np);
    app.copyFile = (op, np) => fs.writeFileSync(np, fs.readFileSync(op));
    app.readJSON = (p) => JSON.parse(fs.readFileSync(p));
    app.writeJSON = (p, d) => fs.writeFileSync(p, JSON.stringify(d));
    app.readText = (p) => fs.readFileSync(p, 'utf-8');
    return app;
};

mime.js文件扩展名识别

const M = {
    getType(p) {
        let e = p.toLocaleLowerCase().split(".");
        return M[e[e.length - 1]] || M["*"];
    }, 
    "*": "application/octet-stream", 
    "tif": "image/tiff",
    //.........
    "css": "text/css",
    //.........
    "htm": "text/html",
    "html": "text/html",
    //.........
    "jpeg": "image/jpeg",
    "jpg": "image/jpeg", 
    "js": "application/javascript",
    "json":"application/json",
    //.........
    };
module.exports = M;

app.js调用:

const app = require("./simple_http")();
const fs = require('fs');

app.static.push("static");//加入静态目录

app.routes["/"] = function () {//加入路由
    this.res.end('关爱单身狗成长协会');
};

let server = app.listen(8080, '0.0.0.0', function () {
    console.log(`listening at http://${server.address().address}:${server.address().port}`)
});

好啦一个简单的web框架,就写的差不多了。大家可以参考着写写看,或比如加入:正则路由解析、模板引擎、post请求处理、文件上传处理等等的功能。
文章源码放在:https://gitee.com/baojuhua/node_simple_http/tree/master

相关文章
|
3月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
156 62
|
3月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
266 45
|
3月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
3月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
98 4
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
64 2
|
3月前
|
中间件 Go API
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
220 1
|
4月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
59 1
JavaScript控制台:提升Web开发技能的秘密武器
|
3月前
|
SQL 安全 PHP
探索PHP的现代演进:从Web开发到框架创新
PHP是一种流行的服务器端脚本语言,自诞生以来在Web开发领域占据重要地位。从简单的网页脚本到支持面向对象编程的现代语言,PHP经历了多次重大更新。本文探讨PHP的现代演进历程,重点介绍其在Web开发中的应用及框架创新,如Laravel、Symfony等。这些框架不仅简化了开发流程,还提高了开发效率和安全性。
49 3
|
3月前
|
前端开发 JavaScript 开发工具
从框架到现代Web开发实践
从框架到现代Web开发实践
69 1
|
3月前
|
SQL 安全 PHP
探索PHP的现代演进:从Web开发到框架创新
PHP 自发布以来一直在 Web 开发领域占据重要地位,历经多次重大更新,从简单的脚本语言进化为支持面向对象编程的现代语言。本文探讨 PHP 的演进历程,重点介绍其在 Web 开发中的应用及框架创新。自 PHP 5.3 引入命名空间后,PHP 迈向了面向对象编程时代;PHP 7 通过优化内核大幅提升性能;PHP 8 更是带来了属性、刚性类型等新特性。
49 3

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62