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. windows环境下安装mysql5.7.20

    配置my.ini文件 [client] port=3306 default-character-set=utf8 [mysqld] # 设置为自己MYSQL的安装目录 basedir=D:\Progr ...

  2. SolarWinds-改变端口

    Solarwinds配置文件,修改为80端口(默认为8123) C:\Program Files\SolarWinds\DPA\iwc\tomcat\conf\server.xml

  3. 20.centos7基础学习与积累-006-软实力-画图

    从头开始积累centos7系统运用 亿图是用指南 安装亿图软件 修改基础配置 路径:文件==>选项==>常规 需要修改的参数: 撤销次数:256 自动保存间隔:2分钟 路径:文件==> ...

  4. python deque的内在实现 本质上就是双向链表所以用于stack、队列非常方便

    How collections.deque works? Cosven     前言:在 Python 生态中,我们经常使用 collections.deque 来实现栈.队列这些只需要进行头尾操作的 ...

  5. 使用SecureCRT操作linux系统时候的简单设置

    因为第一次访问一台虚拟机的时候会出现这样的情况;   底色为白色和乱码的情况 需要在选项----->会话选项中进行一些设置 用来解决乱码问题的这个设置为:

  6. 2019牛客暑期多校训练营（第三场）G: Removing Stones（启发式分治）

    题意:给定N,表示N堆石子,每堆石子数为a[],问多少个区间,可以满足“石子总和若为偶数,那么可以两两取来自不同堆的石子,直到取完: 如果为奇数,那么排除其中一个,然后可以两两取来自不同堆的石子,直到 ...

  7. sqoop从oracle数据库抽取数据,导入到hive

    环境: hadoop-2.7.5 sqoop-1.4.7 zookeeper-3.4.10 hive-2.3.3 (使用mysql配置元数据库) jdk1.8.0_151 oracle 11.2.0. ...

  8. canvas绚丽的随机曲线

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyMAAAHECAIAAAClb2KBAAAgAElEQVR4nOyd+VsaV/v/Pz/UpW3abJ ...

  9. Dubbo源码分析：Filter

    类图 Filter链 在ProtocolFilterWrapper对象中完成Filter完成组建. 实现代码

  10. [BZOJ 5127][Lydsy1712月赛]数据校验

    Description 题库链接 给你一个长度为 \(n\) 的序列.\(m\) 次询问,每次询问序列的一个区间 \([l,r]\).对于 \([l,r]\) 内的所有子区间,询问值域是否连续.若存在 ...