koa 中art-template模板引擎的使用
阿新 • • 發佈：2019-05-12
一個 bsp 模板 charset oot -a name ext round
art-template 模板引擎介紹
art-template 是一個簡約、超快的模板引擎。
它采用作用域預聲明的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的運行 性能，並且同時支持 NodeJS 和瀏覽器。
art-template 支持 ejs 的語法，也可以用自己的類似 angular 數據綁定的語法
官網地址，中文文檔
在 Koa 中使用 art-template 模板引擎
首先安裝art-template中間件
npm install --save art-template
npm install --save koa-art-template在node應用的app.js中引入，並且配置（配置的時候需要path模塊，所以也需要引入path模塊）
const render = require(‘koa-art-template‘);
const path = require(‘path‘);
配置對應路由的模板，並且向模板傳遞數據
let Koa = require(‘koa‘) let router = require(‘koa-router‘)() const render = require(‘koa-art-template‘); const path = require(‘path‘);var app = new Koa() //配置 koa-art-template模板引擎 render(app, { root: path.join(__dirname, ‘views‘), // 視圖的位置 extname: ‘.html‘, // 後綴名 debug: process.env.NODE_ENV !== ‘production‘ //是否開啟調試模式 }); router.get(‘/‘,async (ctx)=>{ let list = { name: ‘張三‘, h: ‘<h2>這是一個h2</h2>‘, num:20, data: [‘11111111‘,‘2222222222‘,‘33333333333‘] } await ctx.render(‘index‘,{ list:list }); }) router.get(‘/news‘,async (ctx)=>{ let app = { name: ‘張三11‘, h: ‘<h2>這是一個h211</h2>‘, num: 20, data: [‘11111111‘,‘2222222222‘,‘33333333333‘] }; await ctx.render(‘news‘,{ list: app }); }) app.use(router.routes()); /*啟動路由*/ app.use(router.allowedMethods()); app.listen(3000);
然後就是在模板中解析傳遞過來的數據，分別是views/index.html（ejs的寫法），views/news.html（art的寫法），views/public/footer.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2 class="title">這是一個koa-art-template</h2> <h2>綁定數據</h2> <%=list.name%> <br/> <%= 1 + 2 %> <br/> <hr/> <br/> <h2>綁定html數據</h2> <%=list.h%> <%-list.h%> <br/> <hr/> <br/> <h2>條件</h2> <%if(num>10){%> 大於10 <%}else{ %> 小於10 <%}%> <br/> <hr/> <br/> <h2>循環數據</h2> <ul> <%for(var i=0; i<list.data.length; i++){%> <li><%=list.data[i]%></li> <%}%> </ul> <br/> <hr/> <br/> <% include(‘./public/footer.html‘) %> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2 class="title">這是一個koa-art-template</h2> <br/> <h2>綁定數據</h2> {{list.name}} <br/> <hr/> <br/> <h2>綁定html數據</h2> {{@list.h}} <br/> <hr/> <br/> <h2>條件</h2> {{if num>20}} <sapn>大於20</sapn> {{else}} <sapn>小於20</sapn>{{/if}} <br/> <hr/> <br/> <h2>循環數據</h2> <ul> {{each list.data}} <li>{{$index}}---{{$value}}</li> {{/each}} </ul> <br/> <hr/> <br/> {{include ‘public/footer.html‘}} </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>這是一個底部</h1> </body> </html>
最後瀏覽器訪問，查看效果
koa 中art-template模板引擎的使用