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. 解除Ubuntu系统的root登录图形界面限制

    Ubuntu18.04.1开发团队为了Ubuntu18.04.1系统的安全,默认root不能登录图形界面,普通用户需要使用root权限时,只能通过sudo [命令] [参数] 临时使用root权限,或 ...

  2. kali之使用sqlmap进行sql注入

    sqlmap简介 sqlmap支持五种不同的注入模式: 1.基于布尔的盲注,即可以根据返回页面判断条件真假的注入. 2.基于时间的盲注,即不能根据页面返回内容判断任何信息,用条件语句查看时间延迟语句是 ...

  3. 【夯实基础】- Integer.valueof()和Integer.parseInt()的区别

    今天在看公司代码的时候,看到有人在将 String 转为 int 时,用到了Integer.parseInt(String s)方法,我一直用的是Integer.valueOf(String s)方法 ...

  4. 一道经典面试题，atoi函数的实现

    参考资料 (1)atoi函数的实现 (2)<剑指offer> 题目分析 本题需要注意的有几个方面: (1)检查输入参数,指针是否为NULL: (2)去除字符串前面的空格 (3)处理正负符号 ...

  5. IDEA中安装及配置SVN

    1.TortoiseSvn(小乌龟下载地址): https://tortoisesvn.net/downloads.html 2.下载完SVN安装包后,在本机安装SVN(小乌龟),注意安装的时候添加上 ...

  6. java开发手册-总结与补充

    1.分层领域模型规约 1.DO( Data Object):与数据库表结构一一对应,通过 DAO 层向上传输数据源对象. 2.DTO( Data Transfer Object):数据传输对象, Se ...

  7. json模块中dumps()与dump()区别

    dumps是将dict转化成json字符串格式,loads是将json字符串转化成dict格式. dump和load也是类似的功能,只是与文件操作结合起来了. dump(写入内容,文件对象) 和loa ...

  8. nginx使用过程中遇到的问题及基本使用总结

    问题: 1.出现这个问题nginx: [error] open() "/run/nginx.pid" failed (2: No such file or directory) 解 ...

  9. golang执行Linux和Windows命令

    1. 可接收变参命令 package main import ( "fmt" "os" "os/exec" "strings&qu ...

  10. linux下的 c 和 c++ 开发工具及linux内核开发工具

    https://opensource.com/article/18/6/embedded-linux-build-tools https://github.com/luong-komorebi/Awe ...