• Express全系列教程之(十一):渲染ejs模板引擎


     

    一、简介

    相比于jade模板引擎,ejs对原HTML语言就未作出结构上的改变,只不过在其交互数据方面做出了些许修改,相比于jade更加简单易用。因此其学习成本是很低的。您也可参考ejs官网:https://ejs.bootcss.com/

    二、ejs基本使用

    这里我们使用如下配置文件:

    我们啊可以通过下面的方式实现基本的ejs操作:

    app.js文件:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    const express=require("express");

    const ejs=require("ejs");

    const fs=require("fs");

    var app=express();

    //引用ejs

    app.set('views',"public");  //设置视图的对应目录

    app.set("view engine","ejs");       //设置默认的模板引擎

    app.engine('ejs', ejs.__express);       //定义模板引擎

    app.get("/",function(req,res){

        res.render("index.ejs",{title: "<h4>express</h4>"});

    });

    app.listen(8080);

      ejs文件:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8">

            <title></title>

        </head>

        <body>

            <% for(var i=0;i<10;i++){ %>

                <%= i %>

            <% } %>

            <!-- 获取变量 -->

            <div class="datas">

                <p>获取变量:</p>

                <%- title %>

                <%= title %>

            </div>

        </body>

    </html>

      这时我们会得到如下图的结果:

    由此可以知道:
    <% xxx %>:里面写入的是js语法,
    <%= xxx %>:里面是服务端发送给ejs模板转义后的变量,输出为原html
    <%- xxx %>:里面也是服务端发送给ejs模板后的变量,不过他会把html输出来

    同理res.render()函数也是支持回调的:

    1

    2

    3

    res.render('user', { name: 'Tobi' }, function(err, html) {

      console.log(html);

    });

      这样我们即可将看到heml的内容。另外值得说明的是ejs模块也有ejs.render()和ejs.renderFile()方法,他在这里与res.render()作用类似,如下:

    1

    2

    3

    4

    5

    ejs.render(str, data, options);

    ejs.renderFile(filename, data, options, function(err, str){

        // str => 输出绘制后的 HTML

    });

      三、ejs标签各种含义

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

    四、option的配置:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    cache       缓存编译后的函数,需要提供 filename

    filename    被 cache 参数用做键值,同时也用于 include 语句

    context     函数执行时的上下文环境

    compileDebug 当为 false 时不编译调试语句

    client      返回独立的编译后的函数

    delimiter   放在角括号中的字符,用于标记标签的开与闭

    debug       将生成的函数体输出

    _with       是否使用 with() {} 结构。如果为 false,所有局部数据将存储在 locals 对象上。

    localsName  如果不使用 with ,localsName 将作为存储局部变量的对象的名称。默认名称是 locals

    rmWhitespace 删除所有可安全删除的空白字符,包括开始与结尾处的空格。对于所有标签来说,它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。

    escape  为 <%= 结构设置对应的转义(escape)函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。

      以上就为ejs基本用法,往后对数据库操作就直接把json数据从服务器返送给模板引擎就行;

  • 相关阅读:
    python 文本相似度计算
    文本分析:停用词集
    浅谈RPC框架
    主动测试 -- 如何让执行测试的过程更流畅?
    非常好用的1款UI自动化测试工具:airTest
    Jmeter JSON断言和响应断言的区别是什么?
    monkey测试环境搭建 及 操作步骤
    如何通过优化测试流程,优化测试时间?
    POST请求成功,但接口返回数据不正确
    fiddler抓包 IOS11以上系统
  • 原文地址:https://www.cnblogs.com/wjlbk/p/12633306.html
Copyright © 2020-2023  润新知