前言
在nodeJS的世界中,我们使用到express的时候有甚多,但是express的原理到底是什么呢? 我们只知道用的时候引入就可以了,但是它内部的模块又是什么呢? 本文章便封装一个简单的原生的类似于express的路由分发请求,同时使用了模板引擎ejs
来模仿前端的请求源
正文
首先我们来看一下我们需要写的有那几个文件
首先要安装一下这个ejs这个模块,再开始写下面的内容
表单提交模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/dologin" method="POST">
<input type="text" name="username" id="">
<br>
<input type="password" name="password" id="">
<br>
<input type="submit" value="登录">
</form>
</body>
</html>
index.js
index.js 只需要启动服务即可,其中可以配置我们后端的路由请求
// 服务端启动首页
const routeFn = require('./routerHandler');
const server = require('./server');
const routers = {};
// 路由请求
routers['/'] = routeFn.get.Home;
routers['/home'] = routeFn.get.Home;
routers['/login'] = routeFn.get.Login;
routers['/dologin'] = routeFn.post.doLogin;
server.server(routers, routeFn);
routerHandler.js
此JS中只需要写一些我们对应的方法并且暴露出去即可
const ejs = require('ejs');
// 响应的请求
const get = {};
const post = {};
get.Home = function(res){
console.log('home');
res.writeHeader(200, {'Content-Type':'text/json; charset="utf-8" '});
const json = [{
"name":"小明",
"age":12,
"isChecked":true
}]
res.end(JSON.stringify(json));
}
get.Login = function(res){
console.log('登录')
// res.writeHeader(200, {'Content-Type':'text/html; charset="utf-8" '});
ejs.renderFile('./view/form.ejs', {}, (err, data)=>{
if(err){
console.log('模板出现错误');
return;
}
res.end(data)
})
}
post.doLogin = function(req, res){
console.log(req.body);
res.writeHeader(200, {'Content-Type':'text/html; charset="utf-8" '});
res.end("<script>alert('1');history.back()</script>")
}
exports.get = get;
exports.post = post;
server.js
此JS文件才是我们真正的服务端文件,在此文件中用来启动HTTP
服务,并且分发出去请求路由
const http = require('http');
const router = require('./router');
const url = require('url');
// 服务端
const Server = function(routers, routeFn){
function start(req, res){
const pathName = url.parse(req.url).pathname;
// 只有是有效请求的时候才会去分发路径
if(pathName != '/favicon.ico'){
// 传入请求路径,路由数组, response
router(req, res, routers);
}
}
http.createServer(start).listen(3000);
}
exports.server = Server;
router.js
此JS文件主要是用来分发服务端的请求来处理对应的返回
const routeFn = require('./routerHandler');
const url = require('url');
// 该页面是用来分发请求的
function route(req, res, routers){
const pathName = url.parse(req.url).pathname;
const method = req.method.toLowerCase();
// 判断路由数组当中有没有这个方法
if(typeof(routers[pathName]) === "function"){
if(method == 'get'){
routers[pathName](res);
}else{
var dataVal = '';
req.on('data', (val)=>{
dataVal+=val;
})
// 拿到前台传来的数据,放到body当中
req.on('end', (err, val)=>{
req.body = dataVal;
routers[pathName](req, res);
})
}
}else{
res.writeHeader(404, {"Content-Type":"text/html; charset='utf-8' "});
const resString = "<h1>404 NotFound!!</h1>";
res.end(resString);
}
}
module.exports = route;
OK,一个简易的封装到此结束,有问题请留言