ejs概述

概述

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

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

ejs的特点：

　　1、快速编译和渲染

　　2、简单的模板标签

　　3、自定义标记分隔符

　　4、支持文本包含

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

　　6、模板静态缓存

　　7、支持express视图系统

简单示例

npm install ejs命令安装EJS

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});//关闭缓存

基本语法

常用方法

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

ejs.render(ste,data,[option])
```
//str指需要解析的字符串模板
//data数据
//option同上
var result = ejs.render('<%=test %>');
console.log(result);//test
```
常用标签
- <% '脚本' 标签，用于流程控制，无输出。
- <%_ 删除其前面的空格符
- <%= 输出数据到模板（输出是转义 HTML 标签）
- <%- 输出非转义的数据到模板
- <%# 注释标签，不执行、不输出内容
- <%% 输出字符串 '<%'
- %> 一般结束标签
- -%> 删除紧随其后的换行符
- _%> 将结束标签后面的空格符删除

### 基本语法

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

变量输出：<%= title %>

<%- title %>
html标签属性
变量定义标签属性：<h1 style="<%= style %>"></h1>

循环

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

<% if(isLogin){ %>
    <div class="user">
        <a href="">hello</a>
        <a href="">退出</a>
    </div>
    <% }else{ %>
    <div class="login">
        <a href="">登录</a>
        <a href="">注册</a>
    </div>
<% } %>

include

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

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

//head.ejs
    <meta charset="utf-8"/>
    <title><%= title %></title>
    <link rel="styleSheet" type="text/css" href="/css/index.css" />
//index.ejs
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <% include ./head %>
        </head>
        <body>
            <main>
                <div>main content</div>
            </main>
        </body>
    </html>

在express的应用

为express服务器，设置模板引擎类型
app.set("view engine","ejs");
配置ejs模板文件存放路径

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

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

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

ejs概述

概述

简单示例

基本语法

常用方法

常用标签

在express的应用

花花呀

引用和评论

MySQL 亿级数据迁移之迁移策略