art-template模板引擎
模板引擎是第三方模块
1.art-template
高性能JavaScript模板引擎,使用npm install art-template
命令下载。
- 在命令行工具中使用 npminstall art-template 命令进行下载
- 使用const template =require(‘art-template’)引入模板引擎
- 告诉模板引擎要拼接的数据和模板在哪 const html =template(‘模板路径’, 数据);
- 使用模板语法告诉模板引擎,模板与数据应该如何进行拼接
小案例
//导入模板引擎模块
const template = require('art-template');
//导入path模块,拼接路径
const path = require('path');
//绝对路径
const views = path.join(__dirname, 'views', '01.art');
const html = template(views, {
name: '张三',
age: 20,
})
console.log(html);
<div>
<span>{{data.name}}</span>
<span>{{data.age}}</span>
</div>
2.模板语法
art-template同时支持两种模板语法:标准语法和原始语法
标准语法可以让模板更容易读写,原始语法具有强大的逻辑处理能力;
标准语法: {{ 数据 }}
原始语法: <%= 数据%>
2.1输出
<!-- 标准语法 -->
<h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2>
<!-- 原始语法 -->
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>
2.2原文输出
如果数据中携带HTML标签,默认模板引擎不会解析标签,会将其转义后输出;
标准语法:{{ @数据 }}
原始语法: <%- 数据 %>
<!-- 标准语法 -->
<h2>{{@ value }}</h2>
<!-- 原始语法 -->
<h2><%- value %></h2>
2.3条件判断
<!-- 标准语法 -->
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
2.4数据循环
标准语法: {{each 数据}} {{/each}}
原始语法: <% for() {%> <% } %>
{{each target}}
{{$index}} {{$value}}
{{/each}}
<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
2.5子模板
使用子模板可以将网站公共区块(头部,底部)抽离到单独的文件中
标准语法: {{ include ‘模板’}}
原始语法: <%include (‘模板’)%>
<!-- 标准语法 -->
{{include './header.art'}}
<!-- 原始语法 -->
<% include('./header.art') %>
2.6 模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML骨架模板</title>
{{block 'head'}}{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
<!--index.art 首页模板-->
{{extend './layout.art'}}
{{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}}
{{block 'content'}} <p>This is just an awesome page.</p> {{/block}}
2.7 时间插件dateformat
const template = require('art-template');
const path = require('path');
//引入时间模块 返回一个方法
const dateFormat = require('dateformat');
//设置模板根目录
template.defaults.root = path.join(__dirname,'views');
//导入模板变量
template.defaults.imports.dateFormat = dateFormat;
//配置模板的默认后缀
template.defaults.extname = '.html';
const html = template('06.art',{
time:new Date()
});
console.log(template('07',{}));
console.log(html);
art文件
{{ dateFormat(time,'yyyy-mm-dd')}}
时间模块下载 和时间格式
2.8.第三方模块serve-static
功能:实现静态资源访问服务
步骤:
1.引入serve-static模块获取创建静态资源服务功能的方法
2.调用方法创建静态资源服务并指定静态资源服务目录
3.启用静态资源服务功能
//导入静态资源访问模块,该模块有一个返回值,返回值是一个方法,调用这个方法就可以实现静态资源访问功能
const serveStatic = require('serve-static');
//实现静态资源访问服务,调用方法serveStatic 第一个参数是静态资源根目录
//serveStatic也有一个返回值,返回值也是一个方法,用变量接收这个方法,调用这个方法才可以实现静态资源访问功能
const serve = serveStatic(path.join(__dirname,'public'));
app.on('request', () => {
serve(req, res)
})
app.listen(3000)
2.9第三方模块 router
功能:实现路由
使用步骤:
1.获取路由对象
2.调用路由对象提供的方法创建路由
3.启用路由,使路由生效
//引入router模块,该模块有一个返回值,是用来获取路由对象的
const getRouter = require('router');
//获取路由对象,定义变量接收这个路由对象
const router = getRouter();
router.get('/add', (req, res) => {
res.end('Hello World!')
})
//需要在app.on('request',(req,res)=>{ })里边添加
app.on('request', (req, res) => {
router(req, res)
})