node.js - 模板引擎

模板引擎就是通过服务端渲染生成客户端模板


0x01 说明

说白了就和字符串替换差不多。

  • 就是有一个html模板文件,一个node.js文件。
  • 然后通过node.js,替换html里的内容,最后将html渲染好后返回给浏览器。

  • 模板文件:

    • 需要被替换的内容使用{{ 变量 }} 包围起来。
  • node.js文件:

    • 使用一个对象,这个对象第一个参数写模板文件,第二个参数传一个对象,对象里写上模板文件中的变量。

这就渲染好了,然后返回给客户端就行了。


0x02 如何使用

1、首先需要通过npm下载art-template这个模块。

  • 注意:
    • 该文件会下载到cmd当前所在目录。
    • 该文件必须和项目在同一个文件内。
//终端命令
npm install art-template

2、然后在node.js中使用requre引入该模块。

var template = requirt("art-template");

3、然后通过template.render(source,data)方法进行渲染。

  • source:要渲染的模板。
  • data:要显示的数据(对象)

这里可以单独编写一个.html文件,当做模板使用,然后通过fs核心模块中的文件读取文件方法:fs.readFile()返回的data数据填到render()方法的source中,然后在render()方法的data中写上替换数据。


案列:

<!-- 
html模板文件
 - 名称:index.html
-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>大家好,我叫{{ name }}</h1>
    <h2>我今年{{ age }}岁了</h2>
</body>
</html>
//node.js文件

//引入模块
var http = require("http");
var fs = require("fs");
var template = require("art-template");

//创建一个服务器
http.createServer(function(req, res){
    //获取模板文件
    fs.readFile('index.html',function(err, data){
        if(err){
            //设置编码
            res.setHeader("Content-type", "text/plain; charset=utf-8");
            //一般也就是找不到文件,返回404,使用return,并不在向下执行。
            return res.end("404 Not Found!");
        }
        //获取成功执行这里-渲染
        var ret = template.render(data.toString(),{
            name:"小明",
            age:19
        });
        //将渲染好的数据返回给客户端
        res.setHeader("Content-type", "text/html; charset=utf-8");
        res.end(ret);
    });
}).listen("3000",function(){
    console.log("Server Runing...");
});

发表评论 / Comment

用心评论~