先写一个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表单嘛,做了一个登录验证的功能。
然后我们发现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;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")
}这样就可以了,快实现一下吧