本人的学习笔记
学node的时候看的最懵逼的其实就是模板引擎，原理也是很简单，但并非是基础语法那样一看就明白的东西，所以有系统学习的必要。同时这也是前端必备技能栈之一。
介绍
art-template是腾讯发行的（Σ(っ °Д °;)っ
文档是中文的
功能是将html数据和模板进行拼接
下载
npm install art-template
引入
const template=require(‘art-template’)
告诉模板引擎要拼接的数据和模板在哪
const html =template(‘模板路径’,数据);
基本使用实例
//导入模板引擎模块
const template =require('art-template');
const pate=require('path')
//将特定模板和特定数据进行拼接，第一个参数是模板路径（注意必须使用绝对路径）
//使用path.join的一个好处就是能获取不同的系统的api，保证可移植性，关于path包的用法，请参考我的另一篇文章：nodejs学习笔记（十）
//第二个参数是要在模板中显示的数据，对象类型
const html=template(path.join(__dirname,'views',index.art'),{
data:{
name:'张三',
age:20,
content='<h1>我是标题</h1>'
}
})
//html是返回的字符串
文件中必定是html文本
<div>
<span>{{data.name}}</span>
<span>{{data.age}}</span>
<div>
views
views是约定俗称的模板文件夹
模板语法
art-template提供了两种模板语法：标准语法和原始语法
原始语法就是js语法套上一个外套(外套比较繁琐…)
输出
<!-- 标准语法 -->
<p>{{name}}</p>
<p>{{1+1}}</p>
<p>{{content}}</p>
<p>{{@content}}</p>
<!-- 为了安全考虑，模板引擎默认不解析标签，标准语法需要加入@符号，原始语法需要=变成- -->
<!-- 原始语法 -->
<p><%= name%></p>
<p><%= 1+2 %></p>
<p><%= content %></p>
<p><%- content %></p>
条件判断
<!-- 标准语法 -->
{{if age>18}}
年龄大于18
{{else if age < 15}}
年龄小于15
{{else }}
年龄不符合要求
{{/if}}
{{if}}
<!-- 原始语法 ,更复杂,更强大-->
<% if ( age > 18 ){ %>
年龄大于18
<% } else if( age < 15 > ){%>
年龄小于15
<% } >else ) % >
年龄不符合条件
<% } %>
循环
{
users:[{
name:"张三",
age:20,
sex:"男"
},{
name:"李四",
age:20,
sex:"男"
},{
name:"王五",
age:20,
sex:"女"
}]
}
<ul>
<!-- 标准语法,$value代表当前循环的这一项 -->
{{each users}}
<li>
{{$value.name}}
{{$value.age}}
{{$value.sex}}
</li>
{{/each}}
<!-- 原始语法 -->
<ul>
<% for(var i=0;i<users.length;i++>{) %>
<li>
<%=users[i].name %>
<%=users[i].age %>
<%=users[i].sex %>
</li>
</ul>
※子模版
使用子模版,可以将网站公共区块(头部,底部)抽离到单独的文件中去
!!!
太有用了吧这个
(md我怎么说话这么像旅人)
新建 header.art footer.art
做过wordexpress的人应该很熟悉这两个文件吧
{{ include './common/header.art'}}
<% include('./common/header.art') %>
<% include('./common/footer.art') %>
<div> {{msg}} </div>
{{ include './common/footer.art'}}
学了一半之后,不禁感慨,模板引擎真的是太有用了,解决了前端的很多痛点,一定要认真掌握才行.
不过现在都一点多了…深夜学习真爽
※模板继承
模板继承允许将html骨架抽离到单独的文件中,其它页面模板可以继承骨架文件.
允许预留位置,可以使用其它模板填充.
填充css内容,js内容,页面主体内容
骨架文件
layout.art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
{{block 'link'}}{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
05.art
<!-- extend是单标记 -->
{{extend './common/layout.art'}}
{{block 'content'}}
<p>{{ msg }}</p>
{{/block}}
{{block 'link'}}
<link rel="stylesheet" type="text/css" herf="./main.css">
<!-- 外链一个css文件 -->
{{/block}}
模板配置
向模板中导入变量
下载时间模块
npm install dateformat
//导入模板引擎模块
const template =require('art-template');
const pate=require('path')
const dateFormat=require('dateformat')
//导入模板变量
template.defaults.imports.dateFormat=dateFormat;
const html=template(path.join(__dirname,'views',index.art'),{
time:new Date()
})
//html是返回的字符串
06.art
<!-- 直接使用time会出现格式上的问题,需要向模板中导入第三方方法来处理数据 -->
{{ dateFormat((time,'yyyy-mm-dd'}}
模板配置
当要渲染多个模板文件时
const template =require('art-template');
const pate=require('path')
const dateFormat=require('dateformat')
//设置模板根目录
template.defaults.root=path.join(__dirname,'views');
template.defaults.imports.dateFormat=dateFormat;
const html=template('06.art',{
time:new Date()
})
还可以设置默认模板后缀…(现在觉得前端真的大多数时搬砖的工作…起码开始是这样)
使用:
template.defaults.extname=".art";
习惯使用html的话,也可以:
template.defaults.extname=".html";
然后到这里就结束了,更深入学node的话还是要多做几个项目
这也是我下一步的计划.
