浅谈node ------- (3)

246 阅读3分钟

先写一个demo

首先我们创建一个名为web的文件夹(可以用Git mkdir web),创建一个文件index.js(touch index.js),再创建两个HTML文件,我是直接把淘宝和天猫的html复制下来了。

我们现在index.js里引入几个模块,这几个模块我在上篇都有提及(url模块后面会提及)

const http = require("http");
const fs = require("fs");
const path = require("path");
const url = require("url");

然后我们在创建一个服务器,监听浏览器 3000端口(localhost:3000)

const server = http.createServer(function (req , res) {

})
server.listen(3000)

我们先写一个render函数,作用是判断我们在浏览器输入的router(模拟域名的输入),然后模拟服务器内部读取文件,返还给客户端,path模块就是自动拼接文件路径的一个node的模块

function render(fileName , res) {    
    fs.readFile(path.resolve(__dirname , fileName) , function (err , data) {        
        if(err) {            
            res.statusCode = 500;            
            res.statusMessage = "server error";            
            return;        
        }        
        res.end(data);    
    })
}

然后我们在读取不同的文件的时候,调用render函数

const server = http.createServer(function (req , res) {    
    let pathUrl = url.parse(req.url , true);  //true是为了让query的值变为一个对象  
    let pathName = pathUrl.pathname;    
    let queryObj = pathUrl.query;    
    if(pathName == "/taobao") {        
        render("taobao.html" , res);    
    }else if(pathName == "/tianmao") {        
        render("tianmao.html" , res);    
    }else if (pathName == "/index") {        
        render("index.html" , res);    
    }else if (pathName == "/logIn") {        
        render("logIn.html" , res);    
    }else if (pathName == "/api") {        
        if(queryObj.user === "fhr" && queryObj.password === "fuhaoran") {            
            render("taobao.html" , res);        
        }
    }else {            
        res.end("Wrong Password, Please Back To LogIn!!!");        
    }else {        
        res.end("404")    
    }
})

这里想解释一下,我在web文件夹里有创建了几个文件,index.html,logIn.html

logIn.html

<a href="/taobao">taobao</a>    
<a href="/tianmao">tianmao</a>

logIn.html

<form action="/api">        
    登录:<input type="text" placeholder="用户名/邮箱" name="user">        
    密码:<input type="password" placeholder="密码8~16位" maxlength="16" minlength="8" name="password">        
    <input type="submit">    
</form>

然后解释一下那三个变量,首先我们先引入url模块,这是node处理访问请求url的模块,url模块里面有个方法是url.parse(),将我们所访问页面的url传入即req.url,然后我们打印一下这个函数的返回值

则我们可以看见,url.parse(req.url)返回的是一个对象,我们要提取相应的属性值进行匹配,我们先提取出pathname属性,这是我们访问的域名,query返还的是我们访问时url“?”后面的内容,说白了就是GET的拼接,因为logIn.html里有一个form表单嘛,做了一个登录验证的功能。

这样一个简单的demo就实现了

然后我们发现if&else这种调教语句太傻了,有没有一种封装好的方法来实现我们的路由的匹配呢,答案当然是有的,node有相应的express框架,你可以看一下文档,然后改写一下上述代码

那我再来简单的写一下express里的use的功能实现吧

首先我创建了一个lib文件夹,里面有一个express.js的文件,然后封装了一个express的方法

const url = require("url");
function express() {    
    this.routers = [];
}
express.prototype.use = function (router , fn) {    
    let path = url.parse(router);    
    this.routers.push({       
        path : router,        
        fn : fn    
    })
}
express.prototype.handle = function (req , res) {    
    let pathUrl = url.parse(req.url , true);    
    let pathName = pathUrl.pathname;    
    let queryObj = pathUrl.query;    
    let count = 0;    
    while(true) {        
        let router = this.routers[count++];        
        if(router.path === pathName) {            
            router.fn(req , res);            
            return true;        
        }        
        if(count == this.routers.length) {            
            return false;        
        }
    }
}
module.exports = express;
然后我在web的index.js里引入一下express这个文件,然后我们这样改写一下index.js

app.use("/taobao" , function (req , res) {    
    render("taobao.html" , res);
})
app.use("/tianmao" , function (req , res) {    
    render("tianmao.html" , res);
})
app.use("/logIn" , function (req , res) {    
    render("logIn.html" , res);
})
app.use("/api" , function (req , res) {    
    let pathUrl = url.parse(req.url , true);    
    let pathName = pathUrl.pathname;    
    let queryObj = pathUrl.query;    
    if(queryObj.user === "fhr" && queryObj.password === "fuhaoran") {        
        render("taobao.html" , res);    
    } else {        
        res.end("Wrong Password, Please Back To LogIn!!!");    
    }
})
app.use("/index" , function (req , res) {    
    render("index.html" , res);
})

const server = http.createServer(function (req , res) {
    if(app.handle(req , res)) {
        return;
    }else {
      res.end("404")
}

这样就可以了,快实现一下吧