art-template 简单使用

首先贴上 art-template 官网 http://aui.github.io/art-template/zh-cn/docs/

这是一个由腾讯开发的 后台引擎 比ejs的运行速度要快很多

app.js


/*
 http://aui.github.io/art-template/koa/

 1npm install --save art-template
 npm install --save koa-art-template


 2const 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');
* */
var Koa=require('koa'),
    router = require('koa-router')(),
    render = require('koa-art-template'),
    path=require('path');//记得引入path

var app=new Koa();

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

});

router.get('/',async (ctx)=>{
   //ctx.body="首页"
    let list={

        name:'张三',
        h:'

这是一个h2

'
, num:20, data:['11111111','2222222222','33333333333'] } await ctx.render('index',{ list:list }); })
//接收post提交的数据 router.get('/news',async (ctx)=>{ let app={ name:'张三11', h:'

这是一个h211

'
, 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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>

    <link rel="stylesheet" href="css/basic.css"/>
head>
<body>
    <h2 class="title">这是一个koa-art-templateh2>


<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
          <li><%=list.data[i]%>li>
        <%}%>
    ul>

    <br/>
    <hr/>
    <br/>


    <% include('./public/footer.html') %>
body>
html>

views/news.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>

    <link rel="stylesheet" href="css/basic.css"/>
head>
<body>
    <h2 class="title">这是一个koa-art-templateh2>


    <br/>



    <h2>绑定数据h2>

    {{list.name}}

    <br/>
    <hr/>
    <br/>
    <h2>绑定html数据h2>


         {{@list.h}}
    <br/>
    <hr/>
    <br/>
    <h2>条件h2>


        {{if num>20}} <sapn>大于20sapn> {{else}} <sapn>小于20sapn>{{/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>

你可能感兴趣的:(art-template 简单使用)