模板引擎jade/ejs,模板适配

后台模板引擎：生成页面，有ejs------温和的，非侵入式，可以往里面加功能，弱依赖； jade------破坏性、侵入式（和普通的html不能共存），强依赖，离开了jade页面就不能工作了

在express中进行模板适配的中间件：consolidate

jade---强依赖

1）jade----首先在项目的根目录下安装jade

2）书写.jade文件，支持缩进规定层级和略写

3）属性放在()，逗号分隔：<script src='a.js'></script>在Jade中的书写形式script(src='a.js')，多个属性<link href='d.css' rel='stylsheet'>则写成link(href='d.css',rel='stylsheet')

4）内容空个格，直接放后面：----<a href='b.html'>官网</a>则写成a(href='a.html')官网

5）属性style class特殊：Style支持普通写法和json写法；class支持普通写法和数组写法

6）给标签加id和class直接跟在后面：div.box div#div1

7）jade.render('字符串') jade.renderFile('模板文件名'，options)

8）自动识别单双标签

9）支持自定义标签，识别标签后面的内容，单行识别|，标签后跟.表示后面内容原样输出，include a.js(使得按照原文样式引进来)

<!-- 支持自定义标签 -->
html
    head
    body
        aaa

<html>
    <head></head>
    <body>
        <aaa></aaa>
    </body>
</html>

<!-- 在标签后面跟上内容 -->
html
    head
    body
       |aaa

<html>
    <head></head>
    <body>
        aa
    </body>
</html>

10）传变量：div 我的名字：#{name}

jade.renderFile('1.jade',{pretty:true,name:'jiang'});

div 我的名字：#{name}
div=name

11）运算，代码

//-表示代码，#表示运算
body
    -var a=12;
    -var b=7;
    div 结果是：#{a+b}

在js文件中读取该文件并输出.jade文件里面的内容

ejs-----弱依赖

1）首先在项目下安装ejs

2）书写.ejs文件，写法和html差不多，只不过是多了一些功能，<%= name%>，这个name的值从ejs.js文件中传过来

3）在ejs文件中写循环：表示循环开始和结束，变量和代码的地方用<%%>包起来

<!-- 输出多个div -->
<% for(var i=0;i<json.length;i++){ %>
<div></div>
<% } %>

4）书写表达式

<%= 13 %>+<%= 14%>
<!-- 13+14 -->

<!-- =转义输出，-不转义输出 -->
<% var str="<div></div>>" %>
<%- str %>

5）引进文件


<% include ../a.txt %>

3、consolidate----模板引擎适配

1）需要下载配置模板引擎

设置输出内容类型

// 输出的东西；视图引擎---html
server.set('view engine','html');

设置模板文件存放的路径

// 模板文件放置的路径（www下）；
server.set('views','./views');

//模板类型

// 模板类型；
server.engine('html',consolidate.ejs);

2）解析模板

server.get('/index',(req,res)=>{
    // res.send()直接给客户端返回数据
    // res.rend()将编译好的页面发给客户端
    res.render('1.ejs',{name:'jiang'});
}

模板引擎jade/ejs,模板适配

相关文章