Node.js EJS模板引擎-CSDN博客

本文链接：https://blog.csdn.net/cckevincyh/article/details/78638776

本文介绍了EJS作为后台模板引擎的基本用法，包括安装、基本语法和如何将数据渲染到HTML页面上。通过示例展示了如何使用EJS处理路由，并展示动态数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初识 EJS 模块引擎

我们学的 EJS 是后台模板，可以把我们数据库和文件读取的数据显示到 Html 页面上面。它是一个第三方模块，需要通过 npm 安装 https://www.npmjs.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 会被浏览器解析）


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

<!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>

<!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>

这里写图片描述