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. pandas-10 pd.pivot_table()透视表功能

    pandas-10 pd.pivot_table()透视表功能 和excel一样,pandas也有一个透视表的功能,具体demo如下: import numpy as np import pandas ...

  2. Java 之 Request 对象

    一.Request 对象和 Response 对象原理 request和response对象是由服务器创建的,供我们使用的. request对象是来获取请求消息,response对象是来设置响应消息. ...

  3. pychrom注册码

    http://angame.top/wx/web/zhucema/ YZVR7WDLV8-eyJsaWNlbnNlSWQiOiJZWlZSN1dETFY4IiwibGljZW5zZWVOYW1lIjo ...

  4. iOS OpenCV资料收集

    OpenCV iOS Title: OpenCV iOS Hello Compatibility: > OpenCV 2.4.3 Author: Charu Hans You will lear ...

  5. sql 查询某个字段最长的记录

    sql  查询文本字段中值的长度最长的记录 一.函数1.SQL ServerLEN() 函数返回文本字段中值的长度.SELECT LEN(column_name) FROM table_name;2. ...

  6. Gitlab创建一个项目（三）使用IntelliJ IDEA开发项目

    Gitlab创建一个项目 Gitlab创建一个项目(二)创建新用户以及分配项目 1.登陆到gitlab 2.点击项目名,获取http的URL 3.idea打开,选择git 4.设置项目路径以及本地保存 ...

  7. Flask入门很轻松 （二）

    转载请在文章开头附上原文链接地址:https://www.cnblogs.com/Sunzz/p/10959454.html 请求钩子 在客户端和服务器交互的过程中,有些准备工作或扫尾工作需要处理,比 ...

  8. linux中的【;】【&&】【&】【|】【||】说明与用法

    原文 “;”分号用法 方式:command1 ; command2 用;号隔开每个命令, 每个命令按照从左到右的顺序,顺序执行, 彼此之间不关心是否失败, 所有命令都会执行. “| ”管道符用法 上一 ...

  9. windows10 进入BIOS

    windows10开机进入不了BIOS 原因 上网查了电脑固件所应该有的进入键,什么F1.F2.F12.Delete以及什么要配置Fn+F1...等等方法就是开机进入不了BIOS. 解决办法 最后发现 ...

  10. Java入门(二)——泛型

    如果你写过前端,可能会经常写一下关于变量类型的判断,比如:typeof fn === 'function'之类的代码.因为JavaScript作为一门弱类型语言,类型的判断往往需要开发人员自己去检查. ...