art-template 模板引擎介绍

art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行 性能，并且同时支持 NodeJS 和浏览器。

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

官网地址，中文文档

在 Koa 中使用 art-template 模板引擎

首先安装art-template中间件

npm install --save art-template

npm install --save koa-art-template

在node应用的app.js中引入，并且配置（配置的时候需要path模块，所以也需要引入path模块）

const render = require('koa-art-template');

const path = require('path');

配置对应路由的模板，并且向模板传递数据

let Koa = require('koa')

let router = require('koa-router')()

const render = require('koa-art-template');

const path = require('path');

var 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)=>{

  let list = {

    name: '张三',

    h: '<h2>这是一个h2</h2>',

    num: 20,

    data: ['11111111','2222222222','33333333333']

  }

  await ctx.render('index',{

    list:list

  });

})

router.get('/news',async (ctx)=>{

  let app = {

    name: '张三11',

    h: '<h2>这是一个h211</h2>',

    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（ejs的写法），views/news.html（art的写法），views/public/footer.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

  <h2 class="title">这是一个koa-art-template</h2>

  <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<list.data.length; i++){%>

    <li><%=list.data[i]%></li>

    <%}%>

  </ul>

  <br/>

  <hr/>

  <br/>

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

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

  <h2 class="title">这是一个koa-art-template</h2>

  <br/>

  <h2>绑定数据</h2>

  {{list.name}}

  <br/>

  <hr/>

  <br/>

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

  {{@list.h}}

  <br/>

  <hr/>

  <br/>

  <h2>条件</h2>

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

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

  <h1>这是一个底部</h1>

</body>

</html>

最后浏览器访问，查看效果

koa art-template模板引擎的使用的更多相关文章

  1. Django基础，Day10 - template 模板引擎与路径设置

    作为一个Web框架,Django需要一个方便的方式来生成动态的HTML.最常见的方法依赖于模板.模板包含所需的HTML输出的静态部分以及一些特殊的语法描述如何插入动态内容. Django框架后端默认支 ...

  2. KOA的简易模板引擎实现方式

    上上一期链接--也就是本文的基础,参考KOA,5步手写一款粗糙的web框架 上一期链接--有关Router的实现思路,这份Koa的简易Router手敲指南请收下 本文参考仓库:点我 上一期科普了Rou ...

  3. koa 基础（十三）koa-art-template 模板引擎的使用

    1.项目目录 2.app.js /** * http://aui.github.io/art-template/koa/ * 1.npm install --save art-template * n ...

  4. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  5. 如何选择Javascript模板引擎（javascript template engine)？

    译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...

  6. jquery template.js前端模板引擎

    作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...

  7. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

  8. 腾讯模板引擎template

    template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板  script id="tpl" type="text/ ...

  9. 3、KOA模板引擎+访问静态资料中间件

    一.Koa模板引擎初识1.安装中间件 : npm i --save koa-views2.安装ejs模板引擎 :npm i --save ejs3.编写模板:<%= title %> 是调 ...

随机推荐

  1. Python进阶(十五)----面向对象之~继承(单继承,多继承MRO算法)

    Python进阶(十五)----面向对象之~继承 一丶面向对象的三大特性:封装,继承,多态 二丶什么是继承 # 什么是继承 # b 继承 a ,b是a的子类 派生类 , a是b的超类 基类 父类 # ...

  2. Python进阶(十)----软件开发规范, time模块, datatime模块,random模块,collection模块(python额外数据类型)

    Python进阶(十)----软件开发规范, time模块, datatime模块,random模块,collection模块(python额外数据类型) 一丶软件开发规范 六个目录: #### 对某 ...

  3. 微信小程序下拉框组件

    >>下拉组件 1.组件结构: 2.index.js: //index.js Component({ /** * 组件的属性列表 */ properties: { propArray: { ...

  4. Ubuntu 开发环境搭建

    一.修改权限 Ubuntu 用户权限相关命令 - 彭浪 - 博客园 Ubuntu 文件文件夹查看权限和设置权限 - 朝阳的向日葵 - 博客园 二.安装简体中文支持 三.安装搜狗输入法 四.安装Goog ...

  5. Python Image库简单处理图像

    直接列举几个常用的函数,可在 http://effbot.org/imagingbook/image.htm 中查看更多相关函数. from PIL import Image import numpy ...

  6. Mac下安装oh my zsh之后配置环境变量失效问题

    背景:在刚拿到mac 的时候,使用了默认的bash,由于工作需要在电脑上安装了maven,在~/.bash_profile 文件中添加了maven的配置如下 $ cat ~/.bash_profile ...

  7. ThreadLocal源码原理以及防止内存泄露

    ThreadLocal的原理图: 在线程任务Runnable中,使用一个及其以上ThreadLocal对象保存多个线程的一个及其以上私有值,即一个ThreadLocal对象可以保存多个线程一个私有值. ...

  8. Kotlin反射操纵构造方法与伴生对象

    反射操纵伴生对象: 先定义一个伴生对象: 然后咱们通过反射来调用一下它: 比较简单. 反射操纵构造方法: 先来定义一个类: 然后咱们通过反射来调用一个其中的方法,之前当然就得先来调用构造方法,由于我们 ...

  9. Codeforces Round #560 (Div. 3) Microtransactions

    Codeforces Round #560 (Div. 3) F2. Microtransactions (hard version) 题意: 现在有一个人他每天早上获得1块钱,现在有\(n\)种商品 ...

  10. 【转载】lr运行时设置，每个action 比例

    提供了再脚本运行时所需要的相关选项. 性能测试的关键之一:能否通过脚本来完全模拟用户的行为,可以通过运行设置让脚本运行的更人性化. 1. Run Logic 脚本如何运行,每个action与actio ...