1.项目目录

2.app.js

/**

 * http://aui.github.io/art-template/koa/

 * 1、npm install --save art-template

 *    npm install --save koa-art-template

 * 2、const render = require('koa-art-template');

 * 3、

 * render(app, {

 *   root: path.join(__dirname, 'view'), // 视图的位置

 *   extname: '.art', // 后缀名

 *   debug: process.env.NODE_ENV !== 'production' // 是否开启调试模式

 * })

 * 4、await ctx.render('user')

 */

// 引入模块

const Koa = require('koa');

const router = require('koa-router')(); /*引入是实例化路由 推荐*/

const render = require('koa-art-template');

const path = require('path');

// 实例化

let 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) => {

  // ctx.body = '首页';

  let list = {

    name: '张三',

    h: '<h2>这是一个h2</h2>',

    num: 20,

    data: ['11111', '22222', '33333']

  }

  await ctx.render('index', {

    list: list

  })

})

router.get('/news', async (ctx) => {

  // ctx.body = '新闻';

  let app = {

    name: '张三',

    h: '<h2>这是一个h2</h2>',

    num: 20,

    data: ['11111', '22222', '33333']

  }

  await ctx.render('news', {

    list: app

  });

})

app.use(router.routes());

app.use(router.allowedMethods());

app.listen(3000);

3.原始用法

views/index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <link rel="stylesheet" href="css/basic.css" />

</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%>

          <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>

4.art-template 的用法 -- 类似于 angular 语法

views/news.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <link rel="stylesheet" href="css/basic.css" />

</head>

<body>

  <h2 class="title">这是一个koa-art-template</h2>

  <h2>绑定数据</h2>

  {{list.name}}

  <br />

  <hr />

  <br />

  <h2>绑定html数据</h2>

  {{@list.h}}

  <h2>条件</h2>

  {{if num>20}} <span>大于20</span> {{else}} <span>小于20</span> {{/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>

views/public/footer.html

<h1>这是一个底部</h1>

5.效果图

koa 基础（十三）koa-art-template 模板引擎的使用的更多相关文章

  1. koa 基础（九） ejs 模板引擎的使用

    1.app.js /** * ejs 模板引擎的使用: * 1.npm install koa-views --save * 2.npm install ejs --save * 3.var view ...

  2. Django基础，Day10 - template 模板引擎与路径设置

    作为一个Web框架,Django需要一个方便的方式来生成动态的HTML.最常见的方法依赖于模板.模板包含所需的HTML输出的静态部分以及一些特殊的语法描述如何插入动态内容. Django框架后端默认支 ...

  3. 前端知识点回顾——koa和模板引擎

    koa 基于Node.js的web框架,koa1只兼容ES5,koa2兼容ES6及以后. const Koa = requier("koa"); const koa = new K ...

  4. koa art-template模板引擎的使用

    art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...

  5. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  6. 3、KOA模板引擎+访问静态资料中间件

    一.Koa模板引擎初识1.安装中间件 : npm i --save koa-views2.安装ejs模板引擎 :npm i --save ejs3.编写模板:<%= title %> 是调 ...

  7. koa 基础（二十六）数据库 与 art-template 模板 联动 --- 编辑数据、删除数据

    1.通过 ObjectID 获取 _id 根目录/module/db.js /** * DB库 */ var MongoDB = require('mongodb'); var MongoClient ...

  8. koa 基础（二十五）数据库 与 art-template 模板 联动 --- 新增数据

    1.视图层 根目录/views/index.html <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. koa 基础（二十三）封装 DB 库 --- 应用

    1.根目录/module/config.js /** * 配置文件 */ var app = { dbUrl: 'mongodb://127.0.0.1:27017/?gssapiServiceNam ...

随机推荐

  1. 《Redis高阶应用》讲座总结

    数据结构延展 常用数据结构:String,Hash,List,Set,Sorted Set(不聊这些) 高级数据结构:Bitmaps,hyperloglog,GEO 单机拓展到分布式 为什么要分区:性 ...

  2. EF Code First 数据迁移操作

    打开执行命令窗体 1.EF Code First创建数据库 PM> Install-Package EntityFramework 2.EF Code First数据库迁移 2.1.生成数据库 ...

  3. 并发编程：生产消费模型、死锁与Rlock、线程、守护线程、信号量、锁

    一.生产者消费者模型1 二.生产者消费者模型2 三.守护线程 四.常用方法 五.启动线程的另一种方式 六.锁 七.锁死 八.死锁 九.单个锁能不能死锁 十.信号旗 一.生产者消费者模型1 import ...

  4. 使用dsoframer演示ppt

    优点: (1)不用直接打开PowerPoint (2)可以嵌入到Form中,那种先打开ppt然后将ppt嵌入到Form中的方式,会先打开PowerPoint 缺点: 很早就停止更新了....  但是没 ...

  5. IO框架：asyncio 下篇

    动态添加协程 在实战之前,我们要先了解下在asyncio中如何将协程态添加到事件循环中的.这是前提. 如何实现呢,有两种方法: 主线程是同步的 import time import asyncio f ...

  6. ionic使用CardIO实现扫描银行卡功能（只能扫描16位以下，并且是浮雕数字）

    在一些涉及支付功能的app,一般需要绑定银行卡,除了靠用户手动输入银行卡号,用手机扫描银行卡也是一种常用的手段,查阅了写资料,发现ionic有CardIO插件可以实现这个功能,就兴致冲冲去尝试,结果有 ...

  7. React造轮子：拖拽排序组件「Dragact」

    先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...

  8. 【C#-程序时间计数器】如何计算某些步骤/过程耗时多少？

    使用Stopwatch对象,TimeSpan对象 Stopwatch sw = new Stopwatch();//跑表,该类可以进行时间的统计 命名空间using System.Diagnostic ...

  9. 前端Web浏览器基于Flash如何实时播放监控视频画面（四）之使用videoJs‘拉流’

    本片文章只是起到抛砖引玉的作用,能从头到尾走通就行,并不做深入研究.为了让文章通俗易懂,尽量使用白话描述. 0x001: 下载videoJs 对于Video.js 5.x及更低版本,Flash技术(v ...

  10. word粘贴图片到ekitor

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...