zoukankan      html  css  js  c++  java
  • 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+'
    ',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);
    });

     

  • 相关阅读:
    二分查找 && 三分查找
    LeetCode || 大杂烩w
    LeetCode || 递归 / 回溯
    LeetCode || 双指针 / 单调栈
    HITICS || 2018大作业 程序人生 Hello's P2P
    思维 || Make It Equal
    国庆集训 || Wannafly Day4
    国庆集训 || Wannafly Day1
    区间DP || HDU 6249 Alice’s Stamps
    10进制转k进制
  • 原文地址:https://www.cnblogs.com/loaderman/p/11504800.html
Copyright © 2011-2022 走看看