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. Tornado + Bootstrap 快速搭建自己的web应用

    前言 最近用 python tordado 框架, 整了一个模板页面, 用于接入与发布数据的展示, tornado 简单易用, bootstrap 比较流行, 用起来也省事, 配合起来做些小案例非常迅 ...

  2. Microsoft Project项目管理工具

    下载 网址 安装 要注意以前安装的32位的Office或者Visio时这里会检测到,这里也要装32位的.不能根据系统位数来了.下载前先看清你用的Microsoft的软件是什么版本. 使用 新建空白项目 ...

  3. JavaScript之原型、函数、实例

    JavaScript 函数语法 函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() {    // 执行代码 } 当调用该函数时,会执 ...

  4. 1519484 - How to analyze network disconnections shown in system log (transaction SM21)

    Symptom System log (transaction SM21) shows network disconnections, e.g.: Q04 Connection to user 264 ...

  5. mysql模糊查询1，11，111用逗号(其他符号)拼接的相似字符串

    mysql进行模糊查询时,基本都是LIKE "%sss%",有时候这种查询时准确的,但是有种情况这种查询会出现很大问题. 看一下下面这张表 如果想查询字段test包含1的数据,一般 ...

  6. linux技能点七 shell

    shell脚本:定义,连接符,输入输出流,消息重定向,命令的退出状态,申明变量,运算符,控制语句 定义:linux下的多命令操作文件 连接符: ::用于命令的分隔符,命令会从左往右依次执行 & ...

  7. ajax 传递数组参数

    一.ajax 传递数组参数 需要添加: traditional: true, let typeIDArr = [,,,,,]; var that = this; var url = '@Url.Act ...

  8. Hibernate配置文件模版

    hibernate.cfg.xml 配置文件模版: <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-config ...

  9. Python学习日记(三十四) Mysql数据库篇 二

    外键(Foreign Key) 如果今天有一张表上面有很多职务的信息 我们可以通过使用外键的方式去将两张表产生关联 这样的好处能够节省空间,比方说你今天的职务名称很长,在一张表中就要重复的去写这个职务 ...

  10. Linux 运维入门到跑路书单推荐

    一.基础入门 <鸟哥的Linux私房菜基础学习篇>:最具知名度的Linux入门书<鸟哥的Linux私房菜基础学习篇>,全面而详细地介绍了Linux操作系统. https://b ...