Nodejs WEB服务器 静态文件托管 GET POST路由 EJS模板引擎

Posted 2021-03-24 柳帅

1 Nodejs 静态文件托管 　　

略

2、 路由

　　官方解释：路由（Routing）是由一个 URI（或者叫路径）和一个特定的 HTTP 方法（GET、 POST 等）组成的，

涉及到应用如何响应客户端对某个网站节点的访问。

　　非官方解释：路由指的就是针对不同请求的 URL， 处理不同的业务逻辑。 

 

 

 

3 路由静态文件提取

原 `services.js` 代码

// 引入模块
var http = require(\'http\');

// fs 模块
var fs =require(\'fs\');

// path模块
var path = require(\'path\');

// url 模块
var url = require(\'url\');

// 自定义模块
var mimeModel =require(\'./model/getmimefromfile.js\');

http.createServer(function (req, res) {
    //http://localhost:8001/news.html  /news.html
    //http://localhost:8001/index.html  /index.html
    //css/dmb.bottom.css

    // 只获取路径,不携带参数
    var pathname =url.parse(req.url).pathname;
    //路由分发
    if (pathname===\'/\'){
        pathname =\'/index.html\';
    }

    // 获取后缀名
    var extname = path.extname(pathname);

    if (pathname!==\'/favicon.ico\'){ /*过滤请求 favicon.ico*/
        //console.log(pathname);
        //文件操作获取 static 目录下的 index.html  文件
        fs.readFile(\'static\'+pathname,function (err, data) {
            if (err){
                console.log(\'404\');
                fs.readFile(\'static/404.html\',function (err, data404) {
                    if (err){
                        console.log(err);
                    }
                    res.writeHead(\'404\',{"Content-Type":"text/html;charset=\'utf-8\'"});
                    res.write(data404);
                    res.end()
                })
            }else{//返回文件
                // 获取文件类型
                var mine = mimeModel.getMine(fs,extname);
                res.writeHead(200,{"Content-Type":mine+";charset=\'utf-8\'"});
                res.write(data);
                res.end()
            }
        })
    }
    console.log(pathname);
}).listen(8001);

 

提取出 `router.js `文件

// fs 模块
var fs =require(\'fs\');

// path模块
var path = require(\'path\');

// url 模块
var url = require(\'url\');

// 私有方法
getMine = function (fs, extname) {
    //.html
    var data = fs.readFileSync(\'./mime.json\');
    var Mimes = JSON.parse(data.toString());
    return Mimes[extname] || \'text/html\';
};

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\'){ /*过滤请求 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 (err, data404) {
                    if (err){
                        console.log(err);
                    }
                    res.writeHead(\'404\',{"Content-Type":"text/html;charset=\'utf-8\'"});
                    res.write(data404);
                    res.end()
                })
            }else{//返回文件
                // 获取文件类型
                var mine = getMine(fs,extname);
                res.writeHead(200,{"Content-Type":mine+";charset=\'utf-8\'"});
                res.write(data);
                res.end()
            }
        })
    }
    console.log(pathname);
}

 

目录结构

 

 

 

路由分发逻辑演示

`services2.js`

//引入http模块
var http=require(\'http\');

var url=require(\'url\');
//路由:指的就是针对不同请求的 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);

 

4 初始 EJS模板引擎

官网 : https://www.npmjs.com/package/ejs

 

安装:

npm install ejs –save / cnpm install ejs --save

EJS 常用标签
 <% %>流程控制标签
 <%= %>输出标签（原文输出 HTML 标签）
 <%- %>输出标签（HTML 会被浏览器解析）

 

nodejs 中使用

ejs.renderFile(filename, data, options, function(err, str){
// str => Rendered HTML string
});

 

渲染实例

`02services2.js`

//引入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;
    console.log(pathname);
    if (pathname ==="/login"){
        var data =\'你好我是后台数据\';

        var list = [\'111\',\'222\',\'333\'];

        var rawHtml = \'<h2>我是原生的h2标签</h2>\';
        // 把数据渲染到模板上面
        ejs.renderFile(\'views/login.ejs\',
            {
                msg:data,
                list:list,
                raw:rawHtml
            },
            function (err,data) {
            console.log(\'1\');
            res.end(data)
        })
    }

}).listen(8001);

 

`views/login.ejs`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h2>这是一个ejs 后台模板引擎 -- 登录</h2>
    <h2><%=msg%></h2>
    <br>
    <hr>
    <ul>
        <!-- for 循环渲染数组 -->
        <% for (var i = 0; i < list.length; i++) { %>
            <li><%=list[i]%></li>
        <%}%>
    </ul>

    <!--    渲染 标签 字符串-->
    <%-raw%>

</body>
</html>

 

5 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\'){
        //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);
                }
                console.log(\'写入文件成功\');
            })

        })
    }else{
        res.end(\'other\')
    }
}).listen(8001);