1、app.js
var Koa = require('koa') router = require('koa-router')() render = require('koa-art-template') path = require('path') app = new Koa() render(app, { root: path.join(__dirname, 'views'), //视图的位置 extname: '.html', //后缀名 debug: process.env.NODE_ENV !=='production' //是否开启调试模式 }) router.get('/', async (ctx)=>{ await ctx.render('index') }) router.get('/news', async (ctx)=>{ let list = { name: 'lee', h: '<h2>lee2</h2>', num: 20, arr: [1,2,3,4,5] } await ctx.render('news',{ list: list }) }) app.use(router.routes()) //启动路由 app.use(router.allowedMethods()) app.listen(3000)
2、news.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/basic.css"/> </head> <body> <h2 class="header">这是一个koa-art-template</h2> <h2>***绑定数据***</h2> <%=list.name%> {{list.name}} <!--art-template语法 --> </hr> <h2>***绑定html数据***</h2> <%-list.h%> {{@list.h}} <!--art-template语法 --> </hr> <h2>***条件***</h2> <%if(list.num>20){%> 大于20 <%}else{%> 小于20 <%}%> <!--art-template语法 --> {{if num>20}}<span>大于20</span>{{else}}<span>小于20</span>{{/if}} </hr> <h2>***循环***</h2> <ul> <%for(let i=0; i<list.arr.length; i++){%> <li><%=list.arr[i]%></li> <%}%> </ul> <ul> <!--art-template语法 --> {{each list.arr}} <li>{{$index}}--{{$value}}</li> {{/each}} </ul> </hr> <% include('news/footer.html')%> {{include 'news/footer.html'}} <!--art-template语法 --> </body> </html>
