koa art-template模板引擎的使用
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模板引擎的使用的更多相关文章
- Django基础，Day10 - template 模板引擎与路径设置
作为一个Web框架,Django需要一个方便的方式来生成动态的HTML.最常见的方法依赖于模板.模板包含所需的HTML输出的静态部分以及一些特殊的语法描述如何插入动态内容. Django框架后端默认支 ...
- KOA的简易模板引擎实现方式
上上一期链接--也就是本文的基础,参考KOA,5步手写一款粗糙的web框架 上一期链接--有关Router的实现思路,这份Koa的简易Router手敲指南请收下 本文参考仓库:点我 上一期科普了Rou ...
- koa 基础（十三）koa-art-template 模板引擎的使用
1.项目目录 2.app.js /** * http://aui.github.io/art-template/koa/ * 1.npm install --save art-template * n ...
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- 如何选择Javascript模板引擎（javascript template engine)？
译者 jjfat 日期:2012-9-17 来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...
- jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
- JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引 ...
- 腾讯模板引擎template
template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 script id="tpl" type="text/ ...
- 3、KOA模板引擎+访问静态资料中间件
一.Koa模板引擎初识1.安装中间件 : npm i --save koa-views2.安装ejs模板引擎 :npm i --save ejs3.编写模板:<%= title %> 是调 ...
随机推荐
- 2019-07-22 phpStudy配置虚拟主机
1.右击 phpStudy ->[打开配置文件]->[vhosts-conf]: 2.在里面加入如下代码,并保存: NameVirtualHost *:80 <VirtualHost ...
- php长连接应用
php长连接和短连接 2012-12-05 17:25 3529人阅读 评论(0) 收藏 举报 分类: 我的收藏(8) 什么是长连接,如果你没听说过,可以往下看! 长连接到底有什么用?我想你应该见 ...
- 两个数组的交集 II
题纲 给定两个数组,编写一个函数来计算它们的交集. 示例 : 输入: nums1 = [4,9,5], nums2 = [9,4,9,8,4] 输出: [4,9] 说明: 输出结果中每个元素出现的次数 ...
- springCloud学习1(集中式配置管理)
springcloud 总集:https://www.tapme.top/blog/detail/2019-02-28-11-33 一.前言 在开发普通的 web 应用中,我们通常是将配置项写在单 ...
- 下载Spring
下载Spring Spring官网并不直接提供Spring的下载,Spring现在托管在GitHub上. 1.进入Spring官网 -> PROJECTS -> SPRING FRAMEW ...
- MySQL Replication--半同步复制(Semi-Sync Replication)
半同步复制 默认配置下,MYSQL主从库通过binlog来保持一致,主库事务提交后,将binlog日志写入磁盘,然后返回给用户,备库通过拉取主库的binlog来同步主库的操作,无法保证主备节点数据实时 ...
- PHP生成小程序二维码
/** * [生成小程序二维码] * @return [type] [description] */ public function makeMiniQrcode_do() { begin: $id ...
- poj1734 Sightseeing trip(Floyd求无向图最小环)
#include <iostream> #include <cstring> #include <cstdio> #include <algorithm> ...
- Topcoder10566 IncreasingNumber
IncreasingNumber 一个数是Increasing当且仅当它的十进制表示是不降的,\(1123579\). 求 \(n\) 位不降十进制数中被 \(d\) 整除的有多少个. \(n\leq ...
- Docker部署nodejs应用并使用PM2作为守护进程
环境:centos7.6 Docker version 18.06.0-ce mkdir /data cd /data 拉取最新keymetrics/pm2:latest-alpine镜像 docke ...