ejs--嵌入式js模板引擎_.ejs-优快云博客

本文链接：https://blog.youkuaiyun.com/XIAO_YuBaby/article/details/103341351

本文介绍了EJS模板引擎的基本概念、安装步骤、标签使用、模板引入、数据交互及实际应用案例。EJS是一种JavaScript模板库，用于动态生成HTML，实现数据与视图的分离。通过`ejs.renderFile`和`ejs.render`方法渲染模板，利用`<%-`、`<%=`和`<%_`标签进行数据处理，同时讲解了如何在EJS中进行循环和判断。此外，还探讨了如何在JS中操作EJS渲染的数据。

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

做页面，数据动态绑定

1.理解ejs

① 什么是模板引擎，为什么要用模板引擎

循环遍历数据显示
实现数据与试图分离（即html结构与数据分离）

②ejs

EJS是一个javascript模板库，用来从json数据中生成HTML字符串
EJS 是一套简单的模板语言，将JavaScript 代码生成 HTML 页面。
EJS 只是普通的 JavaScript代码。(可将js代码嵌入到html中且这些js代码可被解析成html)

2. 使用步骤

1.安装 npm install ejs
2.引用 var ejs = require('ejs')
3.在js中可以通过ejs.render()/renderFile()获取到ejs模板内容，并通过res.end()渲染到页面上去
可以参考博客路由那一篇
①ejs.renderFile(path,data,callback)

path：模板字符串所在文件（后缀为.ejs，如果在express中配置，后缀也可为html）
data：向模板字符串传递的数据
callback：回调函数接收两个参数，一个为err，一个为str。str为解析后的html，可直接渲染到页面上

② ejs.render( template,data)
template：模板字符串（需要用转义字符引起来）
data：给模板字符串传送的数据

3.ejs标签及使用

在这里插入图片描述

<%- 不可以转义html标签
<%= 可以转义html标签
<%_ _%> 删除前边的空格
① ejs循环

<ul>
        <% for(let i=0;i<student.length;i++){ %>
            <li>     <%_ _%><%-student[i].name%>---<%-student[i].sex%></li>
        <%}%>
    </ul>

② ejs 判断语句

<% if(true){%>
    <div>true</div>
    <%}else{%>
    <div>false</div>
    <%}%>

4.`include(path,data)`模板引入

① 在一个ejs文件中引入另一个ejs文件
② path为另一个ejs文件路径，data为向path路径ejs文件传送的内容
③ data传送的内容是json类型，需要用<%-%>/<%=%>将返回的内容解析

5.将ejs渲染的数据获取到js中进行操作

注意：
① 这里只能使用"-",不能使用等号，使用等号会对json中的":"进行转义
② 转义json的时候要用单引号 ’ ’ 包起来

 	var data='<%-JSON.stringify(student)%>'
    console.log(JSON.parse(data));

6.使用代码实例

1.data.json 文件
[{
    "name":"毛肚",
    "sex":"20"
},
{
    "name":"小花",
    "sex":"20"
},
{
    "name":"<span>小白00<span>",
    "sex":"21"
}]

2.js文件
const url=require("url");
const ejs=require("ejs");
let data=require("./data.json");
module.exports=(req,res)=>{
    res.writeHead(200,{"Content-Type":"text/html;charst=utf-8"});
    let pathname=url.parse(req.url).pathname;
    if(pathname!="favicon.ico"){
        if(pathname=="/"){
            // {}括号里边将后台服务器的数据往页面中渲染
            ejs.renderFile("view/index.ejs",{
                student:data
            },(err,str)=>{
                if(err){
                    throw err;
                }
                res.end(str);
            })
        }
        else{
            ejs.rander("404.ejs",data);
            res.end();
        }
    }
}

3.index.ejs文件
<body>
    首页
    <%-include('../component/menu.ejs',student)%>
    <script>
        //将ejs渲染的数据获取到js中  只能使用 "—" 解析符号
        var data='<%-JSON.stringify(student)%>'
        console.log(JSON.parse(data));
    </script>
</body>


4.被引入的另一个ejs文件
<ul>
    <li>菜单</li>
    <li>导航</li>
    <li>博客</li>
    <li>游戏</li>
    <li>水果</li>
    <li>我的关注</li>
    <li>管理</li>
</ul>
<ul>
    <% for(let i=0;i<student.length;i++){%>
    <li><%-student[i].name%></li>
    <%}%>
</ul>>