ejs概述

概述

在web项目中渲染页面，我们很多时候，会用json或者拼接字符串的方式，不够美观，破坏原有html结构，大量的html拼接会使代码难以阅读。

ejs是一种nodejs模板引擎，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装。

ejs的特点：

　　1、快速编译和渲染

　　2、简单的模板标签

　　3、自定义标记分隔符

　　4、支持文本包含

　　5、支持浏览器端和服务器端

　　6、模板静态缓存

　　7、支持express视图系统

简单示例

1. npm install ejs命令安装EJS

2. ejs.js。将模板字符串和数据作为参数传递给 EJS，HTML 就出来了。

   var ejs = require('ejs'),
       test = ['001', '002', '003'],
       html = ejs.render('<%= test.join(", "); %>', {test: test});

​ ejs模板文件后缀名 .ejs

​ ejs默认是开启模版缓存。这样在一个页面中多次请求模版文件时，只会请求一次

　 　可通过代码设置是否开启缓存：EJS.config({cache: false});//关闭缓存

基本语法

常用方法

1. ejs.compile(str,[option])

   //str指需要解析的字符串模板
   //option指配置信息
   /*
       cache 缓存编译后的函数，需要提供 filename
       filename 被 cache 参数用做键值，同时也用于 include 语句
       context 函数执行时的上下文环境
       compileDebug 当为 false 时不编译调试语句
       client 返回独立的编译后的函数
       delimiter 放在角括号中的字符，用于标记标签的开与闭
       debug 将生成的函数体输出
       _with 是否使用 with() {} 结构。如果为 false，所有局部数据将存储在 locals 对象上。
       localsName 如果不使用 with ，localsName 将作为存储局部变量的对象的名称。默认名称是 locals
       rmWhitespace 删除所有可安全删除的空白字符，包括开始与结尾处的空格。对于所有标签来说，它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。
       escape 为 <%= 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。
   */
   var tpl = ejs.compile('<%=test %>');
   var result = tpl();
   console.log(result);//test

2. ejs.render(ste,data,[option])

   //str指需要解析的字符串模板
   //data数据
   //option同上
   var result = ejs.render('<%=test %>');
   console.log(result);//test

   常用标签

   • <% '脚本' 标签，用于流程控制，无输出。
   • <%_ 删除其前面的空格符
   • <%= 输出数据到模板（输出是转义 HTML 标签）
   • <%- 输出非转义的数据到模板
   • <%# 注释标签，不执行、不输出内容
   • <%% 输出字符串 '<%'
   • %> 一般结束标签
   • -%> 删除紧随其后的换行符
   • _%> 将结束标签后面的空格符删除

### 基本语法

1. 变量

   变量声明：<% title="My First Test" %>

   变量输出：<%= title %>

   ​ <%- title %>

2. html标签属性

   变量定义标签属性：

3. 循环

   <% users=["张三","李四","王五","赵六"] %>
   
      <% for(var item in users){ %>
         
   
           <%= users[item] %>
         
      <% } %>
   

4. if

   <% if(isLogin){ %>
       
   
           hello
           退出
       
       <% }else{ %>
       
   
           登录
           注册
       
   <% } %>

5. include

   通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。)

   <% include 嵌套模板路径 %>
   <% include ./header %>

   //head.ejs
       
       
       
   //index.ejs
       
       
           
               <% include ./head %>
           
           
               
   
                   
   main content
               
           
       

在express的应用

1. 为express服务器，设置模板引擎类型

   app.set("view engine","ejs");

2. 配置ejs模板文件存放路径

app.set('views', path.join(__dirname, 'views'));

1. 将ejs模板渲染成html页面后返回给浏览器

• res.render(path,data)
• path:模板文件路径 字符串
• 渲染模板时需要使用的数据，对象
• res.render("404")
• res.render("login",{title:"用户登录“})