node 学习(5) －－ Nodejs加载静态资源/ejs模版

最新推荐文章于 2024-06-27 10:28:01 发布

小白变怪兽

最新推荐文章于 2024-06-27 10:28:01 发布

阅读量2k

点赞数

分类专栏： nodejs

本文链接：https://blog.csdn.net/u013558749/article/details/79388613

版权

nodejs 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

我们想要通过nodes来加载静态资源，即我输入http://localhost:8000/index.html，就会返回index.html的信息。具体如何实现我们先来看一个简单的例子：

假设静态资源都在static目录下：

var http = require('http');
var fs = require('fs');

http.createServer(function(req,res){
    var pathname = req.url;

    if(pathname == '/'){
        pathname = '/index.html';
    }

    if(pathname != '/favicon.ico'){
        fs.readFile('static' + pathname, function(err, data){
            if(err){
                res.end('NO THIS PAGE~');
            }else {
                res.end(data.toString());
            }
        })
    }
}).listen(8000);

上述例子比较简单，很多因素也都没有考虑到，接下来我们就对加载静态资源进行初步改造（加上返回类型）。

var http = require('http');
var fs = require('fs');
var path = require('path');


// 根据访问后缀 extname ,获取对应类型
function getMime(extname, callback){
    fs.readFile('./mime.json', function(err, data){
        if(err){
            return false;
        }else {
            var mimes = JSON.parse(data.toString());
            var result = mimes[extname] || 'text/html';
            callback(result);
        }
    })
}


http.createServer(function(req,res){
    var pathname = req.url;

    if(pathname == '/'){
        pathname = '/index.html';
    }

    if(pathname != '/favicon.ico'){
        fs.readFile('static' + pathname, function(err, data){
            if(err){
                fs.readFile('static' + '/404.html', function(error, data404){
                    if(error){
                        res.end('error');
                    }

                    res.writeHead(404, { "Content-Type": "text/html; charset='utf-8'" });
                    res.end(data404);;
                })
            }else {
                // path.extname('index.html') 返回'.html'
                getMime(path.extname(pathname), function(txt){
                    res.writeHead(200, { "Content-Type": ""+ txt +"; charset='utf-8'" });
                    res.end(data.toString());
                })
            }
        })
    }
}).listen(8000);

好了，熟知上面的内容之后，我们就可以进一步的来了解一下模版了（这里介绍的是ejs模版），它是一个第三方模块，所以我们也要通过npm 进行安装

npm install ejs

关于ejs的基本用法，可以查看https://segmentfault.com/a/1190000004286562。
https://www.npmjs.com/package/ejs。

这里基于上述demo举一个简单的例子，新建views文件夹，用于存放ejs模版页面

这里写图片描述

模版页面的内容格式和html是一致的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1><%= title %></h1>
    </body>
</html>

通过ejs.renderFile方法将数据填充到模版页面上

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

ejs.renderFile("./views/index.ejs", {title: "我是标题"}, function(err, data){
   res.end(data);
})

完整代码：

var http = require('http');
var fs = require('fs');
var path = require('path');
var ejs = require('ejs');


// 根据访问后缀 extname ,获取对应类型
function getMime(extname, callback){
    fs.readFile('./mime.json', function(err, data){
        if(err){
            return false;
        }else {
            var mimes = JSON.parse(data.toString());
            var result = mimes[extname] || 'text/html';
            callback(result);
        }
    })
}


http.createServer(function(req,res){
    var pathname = req.url;


    if(pathname == '/'){
        pathname = '/index.html';
    }

    if(pathname != '/favicon.ico'){
        fs.readFile('static' + pathname, function(err, data){
            if(err){
                fs.readFile('static' + '/404.html', function(error, data404){
                    if(error){
                        res.end('error');
                    }

                    res.writeHead(404, { "Content-Type": "text/html; charset='utf-8'" });
                    res.end(data404);;
                })
            }else {
                // path.extname('index.html') 返回'.html'
                getMime(path.extname(pathname), function(txt){
                    var extname = path.extname(pathname);
                    var basename = path.basename(pathname, extname);
                    res.writeHead(200, { "Content-Type": ""+ txt +"; charset='utf-8'" });

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

                    ejs.renderFile("./views/" + basename + ".ejs", {title: "我是标题"}, function(err, data){
                        res.end(data);
                    })
                })
            }
        })
    }
}).listen(8000);