本文主要是介绍day04-artTemplate学生档案系统routerserveStatic,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
模板引擎
目标
- 能够使用模板引擎渲染数据
- 能够使用模板引擎进行原文输出
- 能够使用循环输出数据
- 能够知道如何引用子模板
- 能够知道如何如何进行模板继承
基本概念(★★★)
模板引擎是第三方模块。
让开发者以更加友好的方式拼接字符串,使项目代码更加清晰更加易于维护
[外链图片转存失败(img-e5YrlUW6-1568473328611)(images/artTemplate.png)]
art-template模板引擎
入门使用(★★★)
-
利用
npm
命令下载art-template
库npm install art-template
-
创建
js
文件,引入art-template
库const trempalte = require('art-template');
-
引入拼接的数据源
//引入path库 const path = require('path'); //拼接路径,这里最好用绝对路径 const views = path.join(_dirName,'views','index.art'); //关联到 template里面 const html = template(views,{name: '德玛西亚' });
-
创建.art 渲染模板
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><!--标准语法--><p>{{ name }}</p><!--原生语法--><p><%= age%></p> </body> </html>
输出语句
标准语法用 {{}}(★★★)
在大括号里面可以进行逻辑运算
<p>{{ 1 + 1 }}</p>
<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
<p>{{ content }}</p>
如果说需要解析html标签,需要在变量前面加 @ 符号
<p>{{@ content }}</p>
原生语法 <%= %>
可以进行逻辑运算
<p><%= 1 + 2%></p>
<p><%= 1 + 1 == 2 ? '相等' : '不相等' %></p>
<p><%= content%></p>
如果说需要解析html标签,需要在变量前面加 - 符号
<p><%- content%></p>
条件判断
标准语法 {{if 条件}} … {{/if}} (★★★)
{{if age > 18}}年龄大于18
{{else if age < 15 }}年龄小于15
{{else}}年龄不符合要求
{{/if}}
原生语法 <% if (value) { %> … <% } %>
<% if (age > 18) { %>年龄大于18
<% } else if (age < 15) { %>年龄小于15
<% } else { %>年龄不符合要求
<% } %>
循环
标准语法 {{each 数据}} {{/each}}(★★★)
<ul
这篇关于day04-artTemplate学生档案系统routerserveStatic的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!