模板引擎

1 .模板引擎基础

1.1模板引擎

主要功能就是拼接字符串（将HTML模板与数据拼接）

模板引擎不是node.js本身提供的，是第三方模块

让开发者以更友好的方式拼接字符串，是项目代码更加清晰，更加易于维护。

{{}} mustache语法八字胡语法

1.2 art-template模板引擎

由腾讯公司出品目前运行最快

安装：npm install art-template

该命令在哪执行就会把包下载到哪里然后在安装了该引擎的目录下创建模板文件和执行代码的文件

引入模板引擎const template=require（‘art-template’）require返回值是拼接字符串的方法要用变量承接
告诉模板引擎要拼接的数据和模板在哪 const html =template('模板路径'，数据)； 返回值是拼接好的字符串模板路径要写绝对路径第二个参数是要在模板中显示的数据，是对象类型

*如果要拼接的模块和数据在同一个文件中就可以根据id来拼接，模块路径就可以

HTML模板的后缀名是.art

const path = require（'path'）导入拼接字符串模块

path里的join（，，）是拼接字符串的方法 path.join（‘字符串’，‘字符串’，变量）

__dirname 当前文件所在的路径（取到当前文件的上一级目录）

2.模板引擎语法

2.1模板语法

当前模板引擎同时支持两种模板语法：标准语法和原始语法

标准语法让模板更容易读写，原始语法具有强大的逻辑处理能力

标准语法：{{ 数据 }}
原始语法：<%=数据 %>

2.2输出

如何将数据展示到页面当中

语法内部可以进行简单的运算显示的是运算结果

2.3原文输出

如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出

将标签解析

标准语法{{ @数据 }}
原始语法<%= @数据 %>

2.4条件判断

在模板中可以根据条件来决定显示哪块HTML代码

标准语法

{{if条件}}…{{/if}}

{{if v1}}…{{else if v2}}…{{/if}}

原始语法

<% if(value) {%>…<% } %>

<% if(v1) {%>…<% } else if (v2) {%>…<% } %>

可以写原生js代码

2.5模板循环

each是art-template的模板语法专属的

标准语法

{{each 数据}}//数据为要循环的对象

{{KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲} //当前循环索引 {{value}}//当前循环数据

{{/each}}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ldkP0Q6C-1626133610466)(C:\Users\甜味少女静\Pictures\QQ截图20210710103933.png)]//循环生成li标签

原始语法

<% for(){%>

<%= i%> <%= 数据%>

<%}%>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uv5OHv8K-1626133610469)(C:\Users\甜味少女静\Pictures\QQ截图20210710104201.png)]

2.6子模版

使用子模版可以将网站公共区块（头部、底部）抽离到单独的文件中。

标准语法{{include ‘子模版路径’}}
原始语法<%include(‘模板路径’)%>

2.7 模板继承

使用模板继承可以将网站HTML骨架（html标签和body标签）抽离到单独的文件中，其他页面模板可以继承骨架文件

骨架模板挖坑：{{block ‘自定义名字’}}{{/block}}

继承{{extend ’骨架模板路径‘}}

填充：{{block ’骨架模板中定义的名字‘}}要填充的内容例：<link rel = ‘stylesheet’ herf=(“custom.css”)> {{/block}}//会在相应位置填充上内容

2.8 模板配置

向模板中导入变量 template.defaults.imports.变量名=变量值；
设置模板根目录 template.defaults.root=模板目录//设置了之后 template方法中就可以直接写模板文件的名字而不用写之前的路径
设置模板默认后缀 template.defaults.extname=’.art’

3.案例

3.1 案例介绍-学生档案管理

npm init -y生成package.json文件//项目描述文件

npm install mongoose//连接数据库要用的第三方模块

mongoose.connect（‘mongodb://localhost/数据库名字’）.then((){}).catch((){})//连接数据库，连接成功则执行then方法否则执行catch方法

stall mongoose//连接数据库要用的第三方模块