10.koa基礎之koa-art-template 模板引擎的使用 · koa實戰

art.html ``` ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>art模板使用</title> </head> <body> <h2 class="title">這是一個koa-art-template</h2> <h2>綁定數據</h2> {{list.name}} <br /> <hr /> <br /> <h2>綁定html數據</h2> {{@list.h}} <h2>條件</h2> {{if num>20}} <span>大于20</span> {{else}} <span>小于20</span> {{/if}} <br /> <hr /> <br /> <h2>循環數據</h2> <ul> {{each list.data}} <li>{{$index}} --- {{$value}}</li> {{/each}} </ul> <br /> <hr /> </body> </html> ~~~ ``` app.js ``` ~~~ /** * http://aui.github.io/art-template/koa/ * 1、cnpm install --save art-template * cnpm install --save koa-art-template * 2、const render = require('koa-art-template'); * 3、 * render(app, { * root: path.join(__dirname, 'view'), // 視圖的位置 * extname: '.art', // 后綴名 * debug: process.env.NODE_ENV !== 'production' // 是否開啟調試模式 * }) * 4、await ctx.render('user') */ // 引入模塊 const Koa = require('koa'); const router = require('koa-router')(); /*引入是實例化路由推薦*/ const render = require('koa-art-template'); const path = require('path'); // 實例化 let 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) => { // ctx.body = '首頁'; let list = { name: '張三', h: '<h2>這是一個h2</h2>', num: 20, data: ['11111', '22222', '33333'] } await ctx.render('art', { list: list }) }); app.use(router.routes()); app.use(router.allowedMethods()); app.listen(8000); ~~~ ```