Node 模擬express框架的路由封裝

App.js:

var http=require("http");
var app=require("./router");
var ejs=require("ejs");
http.createServer(app).listen(8100);
//註冊路由
app.get("/",function(req,res){
    ejs.renderFile("./static/index.ejs","",function(err,str){
        res.send(str);
    });
});
//get
/*app.get("/login",function(req,res){
    var data=req.body;
    ejs.renderFile("./static/login.ejs",data,function(err,str){
        res.send(str);
    });
});*/
//post
app.post("/login",function(req,res){
    var data=req.body;
    ejs.renderFile("./static/login.ejs",data,function(err,str){
        res.send(str);
    });
});

router.js:

//模擬express路由寫法
var url=require("url");
var obj={};
obj._get={};
obj._post={};
var app=function(req,res){
    res.send=function(data){
        res.writeHead(200,{"Content-Type":"text/html;charset=utf-8"});
        res.end(data);
    }
    //找當前req請求的method方式
    var method=req.method.toLowerCase();
    var path=url.parse(req.url,true);
    var pathname=path.pathname;
    if(path=="/favicon.ico") return;

    //根據路徑判斷路由有沒有  如果有則執行路由的方法,即執行註冊路由
    if(obj["_"+method][pathname]){
        if(method=="get"){
            req.body=path.query;
              //路由方法
            obj["_"+method][pathname](req,res);
        }
        else{
            var result="?";
            req.on("data",function(str){
                result+=str;
            });
            req.on("end",function(){
                //post傳值解析出來直接給req.body屬性
                req.body=url.parse(result,true).query;
                //路由方法
                obj["_"+method][pathname](req,res);
            });
        }
    }
    else{
        res.end("404");
    }
}
//封裝get方法  在對象上生成路由 
app.get=function(string,callback){
    obj._get[string]=callback;
}
//封裝post方法
app.post=function(string,callback){
    obj._post[string]=callback;
}
module.exports=app;

index.ejs:

<body>
    <div>首頁</div>
    <form method="post" action="/login">
        <ul>
            <li>賬號:<input type="text" name="id"/></li>
            <li>密碼:<input type="text" name="pwd"/></li>
            <li><input type="submit" value="登錄"/></li>
        </ul>
    </form>
</body>

login.ejs:

<body>
    <div>登錄成功!</div>
    <div><%=id%></div>
    <div><%=pwd%></div>
</body>

目錄:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章