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); ~~~ ```