静态web服务器
在前面的web服务器中,最后实现的功能是:根据用户的不同请求,加载不同的页面。下面,先将上次的代码进行稍微的修改:
1,在model文件夹下新建router.js
2,将上次最后的获取文件类型和获取文件后缀名的方法全部封装到router.js文件中,并进行暴露
var fs=require('fs'); var path=require('path'); var url=require('url'); function getMime(extname,callback){ fs.readFile('./mime.json',function(err,data){ if(err){ console.log('mime.json文件不存在'); return false; } 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; if(pathname=='/'){ pathname='/index.html'; } var extname=path.extname(pathname); if(pathname!='/favicon.ico'){ fs.readFile(staticpath+'/'+pathname,function(err,data){ if(err){ 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(); }); } }) } }
然后,新建01.js,测试功能是否正常
var http =require('http'); var router = require('./model/router.js') http.createServer(function(req,res){ router.statics(req,res,'static') }).listen(8001)
目前,一切正常!
路由
关于路由,官方的解析是:路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET、POST 等)组成的,涉及到应用如何响应客户端对某个网站节点的访问。也就是说,路由指的就是针对不同请求的 URL,处理不同的业务逻辑。
var http =require('http'); var url = require('url'); http.createServer(function(req,res){ var pathname = url.parse(req.url).pathname; if(pathname=='/login'){ res.end('login'); }else if(pathname=='/register'){ res.end('register'); }else if(pathname=='/order'){ res.end('order'); }else{ res.end('index'); } }).listen(8001)
EJS
其实,我们前面,根据不同的请求,加载不同的页面,已经实现了一个最简单的路由了,只是返回的是提前写好的页面,而不是从后台获取的数据。如果想要将数据库和文件中读取的数据显示到html上面,我们还需要用到EJS这个后台模板引擎。
要使用ejs,首先需要进行安装
其次是简单的ejs的语法:https://ejs.bootcss.com/
接下来,在项目根目录新建view文件夹,用于存放模板文件
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>
register.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>注册</h2> <%=msg%> <br/> <%-h%> </body> </html>
然后接可以根据用户的不同请求,输出不同的ejs模板了(03.js)。
var http=require('http'); var url=require('url'); var ejs=require('ejs'); http.createServer(function(req,res){ res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"}); var pathname=url.parse(req.url).pathname; if(pathname != '/favicon.ico'){ if(pathname=='/login'){ var data='你好我是后台数据'; var list=['1111','2222', '3333',]; ejs.renderFile('view/login.ejs',{ msg:data, list:list },function(err,data){ res.end(data); }) }else{ var msg='这是注册页面,也是注册的路由'; var h="<h2>这是一个h2</h2>" ejs.renderFile('view/register.ejs',{ msg:msg, h:h },function(err,data){ res.end(data); }) } } }).listen(8001);
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; });
下面,先新建一个form.ejs,用于模仿post和get请求
<!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>login</h2>
<form action="/dologin" method="post">
<input type="text" name="username"/><br/>
<input type="password" name="password"/>
<input type="submit" value="submit"/><br/>
</form>
</body>
</html>
然后针对不同的请求类型,用不同的方式获取数据,并写入login.txt文件中。
var http=require('http'); var url=require('url'); var ejs=require('ejs'); var fs=require('fs'); http.createServer(function(req,res){ res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"}); //判断请求类型(转换为小写) get还是post请求 var method=req.method.toLowerCase(); var pathname=url.parse(req.url,true).pathname; if(pathname=='/login'){ ejs.renderFile('view/form.ejs',{ },function(err,data){ res.end(data); }) }else if(pathname=='/dologin' &&method=='get'){ var urlInfo = url.parse(req.url,true).query fs.appendFile('login.txt',urlInfo+' ',function(err){ if(err){ console.log(err); return; } console.log('写入数据成功'); }) res.end("<script>alert('登录成功');history.back();</script>") }else if(pathname=='/dologin' &&method=='post'){ var postStr=''; req.on('data',function(chunk){ postStr+=chunk; }) req.on('end',function(err,chunk){ console.log(postStr); fs.appendFile('login.txt',postStr+' ',function(err){ if(err){ console.log(err); return; } console.log('写入数据成功'); }) res.end("<script>alert('登录成功');history.back();</script>") }) }else{ ejs.renderFile('view/index.ejs',{ },function(err,data){ res.end(data); }) } }).listen(8001);
代码下载:点这里 (提取码:76c1)