路由

静态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+'\n',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+'\n',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)

posted on 2019-04-18 21:40  紅葉  阅读(150)  评论(0编辑  收藏  举报