NodeJs 路由、EJS 模板引擎、GET和POST

转载

jcf0706 2021-08-13 09:15:22

文章标签 html 数据 json ico 业务逻辑 文章分类 Node.js 前端开发

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);

<!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);
});