欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Node.js EJS模板引擎

程序员文章站 2022-03-16 16:30:27
...

初识 EJS 模块引擎

我们学的 EJS 是后台模板,可以把我们数据库和文件读取的数据显示到 Html 页面上面。它 是一个第三方模块,需要通过 npm 安装 https://www.npmjs.com/package/ejs

安装:

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

Node.js EJS模板引擎

Nodejs 中使用:

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

EJS 常用标签

  • <% %>流程控制标签

  • <%= %>输出标签(原文输出 HTML 标签)

  • <%- %>输出标签(HTML 会被浏览器解析)


//引入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>

register.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>注册</h2>


    <%=msg%>
    <br/>

    <%-h%>

</body>
</html>

Node.js EJS模板引擎

Node.js EJS模板引擎