ejs--嵌入式js模板引擎

做页面,数据动态绑定

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--嵌入式js模板引擎_第1张图片
ejs.render( template,data)
template:模板字符串(需要用转义字符引起来)
data:给模板字符串传送的数据

3.ejs标签及使用

ejs--嵌入式js模板引擎_第2张图片

<%- 不可以转义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":"小白00",
    "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>>

include当做模块化封装,哪里需要这个模块,调用即可,可减少代码
ejs--嵌入式js模板引擎_第3张图片

你可能感兴趣的:(ejs--嵌入式js模板引擎)