前端工程师的全栈梦！实现属于自己的express服务器框架！

作为一名专业的前端工程师，我们不仅要实现自己前端业务的技术精进，想要升职加薪？我们除过磨炼自己的前台技术，同样需要在后台方面有自己的理解！我们的目标是：JS迟早一天统治全球！

今天，我来给大家分享一下自己实现express框架的过程！

服务端实现：

//引入 http 模块
const http = require('http');

//创建路由列表
const router = [];
function createRouter(pathname,handel,method){
    router.push({
        pathname,
        handel,
        method
    })
}
class htppServer{
    constructor() {
        //启动服务器
        this.listen(...arguments);
    }
    listen(){
        //创建http服务器
        const app = http.createServer((req,res) => {
            const pathname = req.url;
            //遍历路由列表
            router.forEach(item => {
                if(item.pathname === pathname && item.method.toUpperCase() === 'GET'){
                    item.handel(item.pathname,res);
                }
            })
        })
        //启动http 服务器
        app.listen(...arguments);
    }
    get(pathname,handel,method='get'){
        createRouter(pathname,handel,method);
        console.log(router);
    }
}
module.exports = function yyServer(){
    return new htppServer(...arguments);
}

前端调用:

//引入服务器文件
const express = require('./testServer');
//启动服务器
const app = express(3000);
//解构出promisify --- 使用promise 语法来处理异步嵌套问题
const { promisify } = require('util')
const readfile = promisify(require('fs').readFile);

//解析英文
app.get('/',(req,res) => {
    res.end('hello');
})
//解析文本
app.get('/text',(req,res) => {
    res.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'});
    res.end('我是你们的越哥哥');
})

//解析html文件
app.get('/yy',(req,res) => {
    //res.writeHead()  设置服务器向前端返回的响应由 对应文件的解析格式
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
    readfile('./demo.html',{encoding:'utf-8',flag:'r'})
    .then( ok => {
        res.end(ok);
    })
    .catch( err => {
        res.end(err);
    })
})
//解析图片
app.get('/img',(req,res) => {
    res.writeHead(200,{'Content-Type':'image/jpg;charset=UTF8'});
    readfile('./下载 (4).jpg','binary')
    .then( ok => {
        res.write(ok,'binary');
        res.end();
    })
    .catch( err => {
        res.end(JSON.stringify(err));
    })
})

对于本文使用的res.writeHead,下面精心解释:

res.writeHead 主要是为了 约定 服务器向前端响应的内容，是文本、html文件、图片等等各种格式的文件。

 方法说明：

 向请求的客户端发送响应头

 并且该函数在一个请求内最多只能调用一次。

 如果不调用，则会自动生成一个响应头。

 基本语法：

 response.writeHead(statusCode, [reasonPhrase], [headers])

 statusCode：表示请求状态，如200表示请求成功。404表示未找到。

 reasonPhrase，headers：写入请求内容格式、编码方式等

 例子：

 该格式可以识别HTML结构，编码格式是UTF-8

 res.writeHead(200,{‘Content-Type’:‘text/html;charset=UTF8’});

 该格式不可以识别HTML结构，是普通文本

 res.writeHead(200,{‘Content-Type’:‘text/plain;charset=UTF8’});

 该格式识别图片

 res.writeHead(200,{‘Content-Type’:‘image/jpg;charset=UTF8’});

 该格式识别样式 

res.writeHead(200,{‘Content-Type’:‘text/css;charset=UFT8’});