Express系列(七)

2019-12-08 本文已影响0人笑红尘123

express模版引擎之ejs

随着前端业务的不断发展，页面交互逻辑的不断提高，让数据和界面实现分离渐渐被提了出来。JavaScript的MVC思想也流行了起来，在这种背景下，基于node.js的模板引擎也随之出现。

什么是模板引擎？

它用于解析动态数据和静态页面所生成的视图文件，将原本静态的数据变为动态，快速地实现页面交互；
目前使用较广的模板引擎有以下几种：Jade / Pug、EJS、Handlebars。

一、什么是ejs？

高效的 JavaScript 模板引擎。
"E" 代表 "effective"，即【高效】。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

二、ejs的基本使用

//app.js
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: "<h1>express</h1>"});
});
 
app.listen(3000);

//index.ejs
<!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>

三、ejs标签各种含义

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

四、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)。

如果感觉有帮助留下一个宝贵的赞或者给小编一个赞赏！！！