前端 ----模板引擎（补充）
template是一个模板引擎
使用：
1.简单使用
// 导入模板引擎模块
const template = require('art-template');
// 将特定模板与特定数据进行拼接
1 const html = template('./views/index.art',{ 2 data: { 3 name: '张三', 4 age: 20 5 } 6 }); 7 8 index.art：↓ 9 <div> 10 <span>{{data.name}}</span> 11 <span>{{data.age}}</span> 12 </div>
2.语法
art-template同时支持两种模板语法：标准语法和原始语法。
标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。
标准语法： {{ 数据 }}
原始语法：<%=数据 %>
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.原文输出
标准语法：{{@ 数据 }} 原始语法：<%-数据 %> 如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。（直接输出标签） <!-- 标准语法 --> <h2>{{@ value }}</h2> <!-- 原始语法 --> <h2><%- value %></h2>
3.条件判断
<!-- 标准语法 --> {{if 条件}} ... {{/if}} {{if v1}} ... {{else if v2}} ... {{/if}} <!-- 原始语法 --> <% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
4.循环
标准语法：{{each 数据}} {{/each}}
原始语法：<% for() { %> <% } %>
<!-- 标准语法 -->
{{each target}}
{{$index}} {{$value}}
{{/each}}
<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
5.子模版
使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。 标准语法：{{include '模板'}} 原始语法：<%include('模板') %> <!-- 标准语法 --> {{include './header.art'}} <!-- 原始语法 --> <% include('./header.art') %>
6.模板继承示例
//继承的模板和挖坑的地方 <!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}}
3.模板配置
向模板中导入变量 template.defaults.imports.变量名 = 变量值;
设置模板根目录 template.defaults.root = 模板目录
设置模板默认后缀 template.defaults.extname = '.art'
也可以这样：在使用前更改默认后缀，目录可能也可以
template.defaults.extname = '.art' const html1 = template('01',{}) console.log(html1) template.defaults.extname = '.html' const html2 = template('02',{}) console.log(html2)
第三方模块 router
功能：实现路由
使用步骤：
获取路由对象
调用路由对象提供的方法创建路由
启用路由，使路由生效
const getRouter = require('router') const router = getRouter(); router.get('/add', (req, res) => { res.end('Hello World!') }) server.on('request', (req, res) => { router(req, res) })
--------------------PS--------------------------------------------
如果想从 xx.post('/add',(res,req)=>{})中获得数据，需要第三方模块 body-parser
第三方模块 serve-static
功能：实现静态资源访问服务
步骤：
引入serve-static模块获取创建静态资源服务功能的方法
调用方法创建静态资源服务并指定静态资源服务目录
启用静态资源服务功能
const serveStatic = require('serve-static') const serve = serveStatic('public') server.on('request', () => { serve(req, res) }) server.listen(3000)
