Koa中使用art-template模板引擎

最新推荐文章于 2021-12-08 09:00:00 发布

Mr.XiaoYang

最新推荐文章于 2021-12-08 09:00:00 发布

阅读量594

点赞数 1

分类专栏： node 进阶之旅文章标签： art-template模板引擎 koa中art-template模板引擎

本文链接：https://blog.csdn.net/qq_36718999/article/details/96837663

版权

node 进阶之旅专栏收录该内容

18 篇文章 0 订阅

订阅专栏

查看更多资源

1. 常见模板引擎的性能对比

适用于 koa 的模板引擎选择非常多，比如 jade、ejs、nunjucks、art-template 等。

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

art-template 支持 ejs 的语法，也可以用自己的类似 angular 数据绑定的语法。

2. Koa中使用art-template

// 1. 安装
 npm install --save art-template
 npm install --save koa-art-template

var Koa = require('koa'),
  router = require('koa-router')(),
  render = require('koa-art-template'), // 2. 引用
  path = require('path');

var app = new Koa();

// 3. 配置 koa-art-template模板引擎
render(app, {
  root: path.join(__dirname, 'views'),   // 视图的位置
  extname: '.html',  // 后缀名 如：index.html
  debug: process.env.NODE_ENV !== 'production'  //是否开启调试模式

});
router.get('/', async (ctx) => {
  let app = {
    name: '张三11',
    h: '<h2>这是一个h211</h2>',
    num: 20,
    data: ['11111111', '2222222222', '33333333333']
  };
  await ctx.render('index', { // 4. 传参 渲染koa-art-template模板 index.html
    list: app
  });
})

app.use(router.routes());   /*启动路由*/
app.use(router.allowedMethods());
app.listen(3000);

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/basic.css" />
</head>
<body>
  <!-- art-template 基本语法 -->
  <h2 class="title">这是一个koa-art-template</h2>
  <h2>绑定数据</h2>
  {{list.name}}
  <hr />
  <h2>绑定html数据</h2>
  {{@list.h}}
  <hr />
  <h2>条件</h2>
  {{if num>20}} <sapn>大于20</sapn> {{else}} <sapn>小于20</sapn>{{/if}}
  <hr />
  <h2>循环数据</h2>
  <ul>
    {{each list.data}}
    <li>{{$index}}---{{$value}}</li>
    {{/each}}
  </ul>
  <hr />
  {{include 'public/footer.html'}}
</body>
</html>

Mr.XiaoYang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Koa中使用art-template模板引擎

查看更多资源1.常见模板引擎的性能对比适用于 koa 的模板引擎选择非常多，比如 jade、ejs、nunjucks、art-template 等。art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。art-template 支持 ejs 的语法...
复制链接

扫一扫

专栏目录