NodeJs 路由、EJS 模板引擎、GET和POST
2、路由
官方解释:
路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET、POST 等)组成 的,涉及到应用如何响应客户端对某个网站节点的访问。
路由指的就是针对不同请求的 ,处理不同的业务逻辑。
EJS 模块引擎
EJS ,可以把我们数据库和文件读取的数据显示到 Html 页面上面。它 是一个第三方模块,需要通过 npm 安装
https://www.npm js.com /package/ejs
npm install ejs –save / cnpm install ejs --save
Nodejs 中使用:
ejs.renderFile(filename, data, options, function(err, str){ // str => Rendered HTML string
});
EJS 常用标签
<%%>流程控制标签
<%=%>输出标签(原文输出HTML标签)
<%-%>输出标签(HTML会被浏览器解析)
Get、Post
超文本传输协议(HTTP)的设计目的是保证客户端机器与服务器之间的通信。 在客户端和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST。
GET - 从指定的资源请求数据。(一般用于获取数据)
POST - 向指定的资源提交要被处理的数据。(一般用于提交数据)
获取 GET 传值:
var urlinfo=url.parse(req.url,true);
urlinfo.query();
获取 POST 传值:
var postData = ''; // 数据块接收中
req.on('data', function (postDataChunk) { postData += postDataChunk;
});
// 数据接收完毕,执行回调函数
req.on('end', function () { try {
postData = JSON.parse(postData); } catch (e) { }
req.query = postData;
console .log(q uerystring .parse(postData));
});
案例:
router.js
//fs模块
var fs=require('fs');
//path模块
var path=require('path'); /*nodejs自带的模块*/
//url模块
var url=require('url');
//获取文件类型的方法 私有
function getMime(extname,callback){ /*获取后缀名的方法*/
fs.readFile('./mime.json',function(err,data){
if(err){
console.log('mime.json文件不存在');
return false;
}
//console.log(data.toString());
var Mimes=JSON.parse(data.toString());
var result= Mimes[extname] || 'text/html';
callback(result)
})
}
exports.statics=function(req,res,staticpath){
var pathname=url.parse(req.url).pathname; /*获取url的值*/
if(pathname=='/'){
pathname='/index.html'; /*默认加载的首页*/
}
//获取文件的后缀名
var extname=path.extname(pathname);
if(pathname!='/favicon.ico'){ /*过滤请求favicon.ico*/
//console.log(pathname);
//文件操作获取 static下面的index.html
fs.readFile(staticpath+'/'+pathname,function(err,data){
if(err){ /*么有这个文件*/
console.log('404');
fs.readFile(staticpath+'/404.html',function(error,data404){
if(error){
console.log(error);
}
res.writeHead(404,{"Content-Type":"text/html;charset='utf-8'"});
res.write(data404);
res.end(); /*结束响应*/
})
}else{ /*返回这个文件*/
getMime(extname,function(mime){
res.writeHead(200,{"Content-Type":""+mime+";charset='utf-8'"});
res.write(data);
res.end(); /*结束响应*/
});
}
})
}
}
demo01.js
//引入http模块
var http=require('http');
//引入扩展名的方法是在文件里面获取到的。
var router=require('./model/router.js');
//console.log(mimeModel.getMime('.css')); //获取文件类型
http.createServer(function(req,res){
router.statics(req,res,'static');
console.log(req.url);
}).listen(8001);
els案例:
//引入http模块
var http=require('http');
var url=require('url');
var ejs=require('ejs');
//路由:指的就是针对不同请求的 URL,处理不同的业务逻辑。
http.createServer(function(req,res){
res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"});
var pathname=url.parse(req.url).pathname;
if(pathname=='/login'){
var data='你好我是后台数据';
var list=[
'1111',
'2222',
'3333',
];
//把数据库的数据渲染到模板上面
ejs.renderFile('views/login.ejs',{
msg:data,
list:list
},function(err,data){
res.end(data);
})
}else{
var msg='这是注册页面,也是注册的路由';
var h="<h2>这是一个h2</h2>"
ejs.renderFile('views/register.ejs',{
msg:msg,
h:h
},function(err,data){
res.end(data);
})
}
}).listen(8001);
login.ejs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<h2>这是一个ejs的后台模板引擎-登录</h2>
<h2><%=msg%></h2>
<br/>
<hr/>
<ul>
<% for(var i=0;i<list.length;i++){%>
<li><%=list[i]%></li>
<% } %>
</ul>
</body>
</html>
get,post
//引入http模块
var http=require('http');
var url=require('url');
var ejs=require('ejs');
var fs=require('fs');
//路由:指的就是针对不同请求的 URL,处理不同的业务逻辑。
http.createServer(function(req,res){
res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"});
//获取get 还是post请求
var method=req.method.toLowerCase();
//console.log(method);
var pathname=url.parse(req.url,true).pathname;
if(pathname=='/login'){ /*显示登录页面*/
ejs.renderFile('views/form.ejs',{
},function(err,data){
res.end(data);
})
}else if(pathname=='/dologin' &&method=='get'){ /*执行登录的操作*/
//get获取数据
console.log(url.parse(req.url,true).query);
res.end('dologin');
}else if(pathname=='/dologin' &&method=='post'){ /*执行登录的操作*/
var postStr='';
req.on('data',function(chunk){
postStr+=chunk;
})
req.on('end',function(err,chunk){
//res.end(postStr);
console.log(postStr);
fs.appendFile('login.txt',postStr+'\n',function(err){
if(err){
console.log(err);
return;
}
console.log('写入数据成功');
})
res.end("<script>alert('登录成功');history.back();</script>")
})
}else{
ejs.renderFile('views/index.ejs',{
},function(err,data){
res.end(data);
})
}
}).listen(8001);
http_router.js
var url = require('url');
/**
* 对resquest进行封装
*
* @param {*} res
*/
var packingRes = function (res) {
var end = res.end;
res.end = function (data, encoding, callback) {
if (data && !(data instanceof Buffer) && (typeof data !== 'function')) {
if (typeof data === 'object') {
data = JSON.stringify(data);
} else if (typeof data === 'number') {
data = data.toString();
}
}
end.call(res, data, encoding, callback);
};
res.send = function (data, type) {
res.writeHead(200,
{
'Access-Control-Allow-Origin': '*',
'Content-Type': 'text/' + (type || 'plain') + '; charset=UTF-8'
}
);
res.end(data);
};
res.sendImg = function (data, type, timeout) {
res.writeHead(200,
{
'Access-Control-Allow-Origin': '*',
'Content-Type': 'image/' + (type || 'png'),
'Content-Length': Buffer.byteLength(data),
'Cache-Control': 'max-age=' + (timeout || 5184000)
}
);
res.end(data);
};
return res;
};
/**
* 路由规则
*/
var route = function () {
var self = this;
this._get = {};
this._post = {};
/**
* 处理请求
*
* @param {*} req
* @param {*} res
*/
var handle = function (req, res) {
packingRes(res);
var Url = url.parse(req.url, true);
var pathname = Url.pathname;
if (!pathname.endsWith('/')) {
pathname = pathname + '/';
}
var query = Url.query;
var method = req.method.toLowerCase();
if (self['_' + method][pathname]) {
if (method == 'post') {
// 设置接收数据编码格式为 UTF-8
// req.setEncoding('utf-8');
var postData = '';
// 数据块接收中
req.on('data', function (postDataChunk) {
postData += postDataChunk;
});
// 数据接收完毕,执行回调函数
req.on('end', function () {
try {
postData = JSON.parse(postData);
} catch (e) { }
req.query = postData;
self['_' + method][pathname](req, res);
});
} else {
req.query = query;
self['_' + method][pathname](req, res);
}
} else {
res.send(method + '请求路由地址不存在:' + pathname);
}
};
/**
* 注册get请求
*/
handle.get = function (string, callback) {
if (!string.startsWith('/')) {
string = '/' + string;
}
if (!string.endsWith('/')) {
string = string + '/';
}
self._get[string] = callback;
};
/**
* 注册post请求
*/
handle.post = function (string, callback) {
if (!string.startsWith('/')) {
string = '/' + string;
}
if (!string.endsWith('/')) {
string = string + '/';
}
self._post[string] = callback;
};
return handle;
};
module.exports = function () {
return new route();
};
demo.js
var route = require('./model/http-route.js');
var app = route();
var http = require('http');
var server = http.createServer(app);
app.get('/', function (req, res) {
res.send('首页');
});
app.get('/login', function (req, res) {
res.send('login');
});
app.get('/register', function (req, res) {
res.send('register');
});
app.post('/test', function (req, res) {
console.log('POST', req.query);
res.send(req.query);
});
server.listen(8080, function () {
console.log('listen ' + server.address().port);
});
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!