koa 中使用 art-template 模板引擎

art-template 模板引擎：

中文文档：http://aui.github.io/art-template/zh-cn/docs/

既支持ejs 的语法，也可以用自己的类似angular 数据绑定的语法

在 koa 中使用 art-template 模板引擎：

npm install --save art-template
npm install --save koa-art-template     　　https://www.npmjs.com/package/koa-art-template

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const render = require('koa-art-template')
const path = require('path')

//配置koa-art-template模板引擎
render(app,{
    root:path.join(__dirname,'views'), //视图的位置
    extname:'.html', //后缀名
    debug: process.env.NODE_ENV !== 'production' ////是否开启调试模式
})

router.get('/',async (ctx)=>{
    console.log('首页')
    await ctx.render('index')
})

app.use(router.routes());  
app.use(router.allowedMethods());
app.listen(3000);

art-template 模板引擎语法

http://aui.github.io/art-template/zh-cn/docs/syntax.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>
</head>
<body>
    <h3>index.html页面</h3>
    <h5>子模板</h5>
    {{include 'layout/header1.html'}}
    <% include('layout/header2.html') %>
    <h5>绑定数据</h5>
    <%=msg%> <br>
    {{msg}} <br>
    <%= 0 || 1 %> <br>
    {{0 || 1}} <br>
    <%= 1 + 1 %> <br>
    {{1+1}} 
   
    <h5>绑定html数据</h5>
    <%- htmlMsg %>
    {{@ htmlMsg}}

    <h5>条件渲染</h5>
    <%if(num==10){%>
        num=10
    <%}else{ %>
        num!=10
    <%}%>
    <br>
    {{if num==10}} num=10
    {{else}} num!=10 
    {{/if}}

    <h5>列表渲染</h5>
    <ul>
       <%for(var i=0;i<list.length;i++){%>
       <li><%=list[i]%></li>
       <%}%>
    </ul>
    {{each list}}
         {{$index}}------{{$value}}
    {{/each}}
</body>
</html>

 

posted @ 2021-01-30 19:06  shanlu  阅读(206)  评论(0)    收藏  举报